React 및 TypeScript 컴포넌트 라이브러리, 5부: Storybook을 이용한 컴포넌트 문서화

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 및 TypeScript를 사용하는 개발자, Storybook으로 컴포넌트 문서화를 수행하는 프론트엔드 개발자

핵심 요약

  • Storybook 설치: npx storybook init 명령어로 초기 설정, Vite 기반으로 구성
  • 컴포넌트 최적화: Tag.tsxText.tsx에서 textWeight 삭제, textFontWeight로 대체
  • 문서화 구조: .stories.tsx.mdx 파일로 구성, StorybookContainer 컴포넌트로 문서화 요소 중앙 정렬
  • 버전 정보: Storybook v8.6.12, Vite v6.3.5 사용

섹션별 세부 요약

1. Storybook 초기 설정

  • npx storybook init 명령어 실행으로 프로젝트 의존성 확인 및 설정
  • vite 옵션 선택 (Rollup 지원 없음)
  • 문서화 목적으로 storybook 설정
  • 생성된 종속성: @storybook/react, @storybook/builder-vite
  • package.jsonstorybookbuild-storybook 스크립트 추가

2. 컴포넌트 최적화

  • Tag.tsx에서 textWeight 제거, textFontWeight로 대체
  • TagPropsStyledTagProps 인터페이스 수정 (기본 formatsemiRounded로 변경)
  • StyledTag 스타일 정의에 size, format, padding 조건 분기 추가
  • Text.tsx에서 color, fontSize 등 기본 props 정의 및 StyledText 스타일 조건 분기 수정

3. 테스트 파일 업데이트

  • Tag.test.tsx에서 textWeight 관련 테스트 제거
  • expect 문으로 기본 backgroundColor, borderRadius, padding 값 검증

4. 문서화 구조 생성

  • StorybookContainer 컴포넌트 생성: 문서화 요소 중앙 정렬 및 간격 조정
  • Tag.stories.tsx 파일 생성: DefaultPredefined 스토리 정의
  • .mdx 파일로 문서 내용 작성 및 .stories.tsx 시나리오 포함

결론

  • Storybook 설치 및 컴포넌트 최적화: Vite 기반으로 구성, textFontWeight 등 props 조정 필수
  • 문서화 구조: .stories.tsx.mdx 파일 병행, StorybookContainer으로 문서화 요소 중앙 정렬
  • 실무 팁: vite 설정 시 @storybook/builder-vite 추가, TagText 컴포넌트의 props/스타일 조건 분기 체크 필수