개발 안내

실행

Node.js 22 이상과 pnpm 11을 사용합니다.

pnpm install
pnpm dev

로컬 문서는 http://127.0.0.1:5173/docs, Storybook은 같은 서버의 /storybook에서 실행됩니다. pnpm dev는 시작할 때 Storybook을 한 번 빌드합니다.

컴포넌트를 수정하면서 즉시 확인하려면 별도 터미널에서 Storybook 개발 서버를 실행합니다.

pnpm storybook

Storybook 개발 서버는 http://localhost:6006에서 실행됩니다. 컴포넌트별 예제와 상태를 비교하고 Controls에서 지원하는 속성을 변경할 수 있습니다. 예제에서 문서로 이동하려면 5173 문서 서버도 실행합니다.

pnpm build로 문서와 Storybook을 함께 빌드합니다. 배포 후에는 상단 Storybook 링크가 같은 사이트의 /storybook으로 연결됩니다. 별도 배포 주소 설정은 필요하지 않습니다.

/storybook은 /storybook/index.html로 이동하며, 예제와 이미지도 /storybook/ 아래에서 불러옵니다. Storybook 예제의 /docs 링크는 같은 사이트의 문서로 돌아갑니다.

storybook-static/과 public/storybook/은 자동 생성하는 결과물입니다. Git에 추가하지 않습니다. 로컬 문서 서버의 Storybook을 갱신할 때는 pnpm storybook:build를 실행합니다.

문서의 예제 이름은 examples의 파일 이름과 연결됩니다. 미리보기는 이 파일을 실행하고, 코드 영역은 같은 파일을 읽습니다. Storybook도 같은 예제를 import합니다.

문서 예제는 iframe에서 실행되므로 문서 스타일과 모달 상태가 예제에 전달되지 않습니다. 새 창으로 열면 뷰포트 전체에서 동작을 확인할 수 있습니다.

pnpm typecheck
pnpm test
pnpm build
pnpm test:ui
pnpm storybook:build
pnpm test:storybook

제목은 대상의 이름으로 씁니다. 설명에는 용도, 동작, 조건, 제약을 적습니다. 감성적인 수식과 반복적인 안내는 사용하지 않습니다. 구현 과정은 개발 기록에 남기고 컴포넌트 사용 문서와 구분합니다.