[Init/#11] 스토리북 초기세팅

[Leeyoonji23]

💡 Summary

close #11

아기다리 고기다리던 스토리북 초기세팅이 왔습니다.

✅ Tasks

• 스토리북 설치
• 스토리북 - vanilla extract 연동
• 자동배포 설정

👀 To Reviewer

스토리북 작성 가이드라인

1. 파일 구조

• 컴포넌트 파일 옆에 .stories.tsx 파일 생성
• ex) Button.tsx -> Button.stories.tsx

2. 메타 데이터 생성

   const meta = {
     title: 'Components/Button', // 사이드바 경로
     component: Button,
     parameters: { ... }, // 스토리 표시 설정
     tags: ['autodocs'], // 자동 문서화
     argTypes: { ... }, // prop 컨트롤 설정
   }

3. 스토리 작성

   export const Default: Story = {
     args: {
       label: '버튼',
       size: 'medium',
     },
   };

자세한 사항은 /stories/Button.stories.tsx 파일에 제가 주석 달아서 정리해 뒀습니다!
참고하시면 될 것 같아요~

실행방법

pnpm storybook

localhost:6006 포트에서 잘 작동되는지 확인도 부탁드려요!

모르는 부분이 있거나 질문사항은 언제든 말씀해 주세요!

📸 Screenshot

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[jisooooooooooo]

설정할 게 많아서 힘드셨을 텐데 고생 많으셨습니다!!!
얼른 써보고 싶네요ㅎ~ㅎ🤓

[kwonsaebom]

너무 너무 수고 많으셨습니다 !!! 🤩
가이드라인 참고해서 적용해보겠습니다 !

[shinjigu]

스토리북 설정하느라 고생 많으셨습니다 !!
pnpm lint -- --fix 활용해서 들여쓰기, 세미콜론, 따옴표, import 순서와 빈 줄, 불필요한 공백 등을 고칠 수 있으니, 커밋 전에 해보셔도 좋을 것 같습니당