이번 글에서는 Figma를 기반으로 작성한 컴포넌트를 어떻게 Storybook에서 볼 수 있는지에 대해 알아보려고 합니다. Stories 폴더 내에 파일과 코드 추가하기과정은 생각보다 간단합니다.본인의 프로젝트 폴더 내에 /components 폴더 안에 stories 폴더가 생성되어 있는데 그 안에 컴포넌트 파일.stories.tsx와 코드만 추가해 주면 됩니다. 저의 경우 confirmButton이라는 컴포넌트를 사용하기 때문에 stories 폴더 내에 ConfirmButton.stories.tsx라는 파일을 추가해줍니다.그리고 파일 내에 다음과 같은 코드를 작성합니다. // stories/ConfirmButton.stories.tsximport type { Meta, StoryObj } from "@..

이미 많이 지난 프로젝트이지만 https://github.com/SejongPeer/peer_v2 의 리팩토링을 마저하고자 합니다. 그 중 첫 번째 단계는 바로 StoryBook 도입인데요, StoryBook은 왜 도입해야 하는지부터 알아볼까요? 컴포넌트 단위 개발이 용이하다StoryBook은 각각의 컴포넌트를 독립적으로 개발하고 테스트할 수 있도록 도와줍니다.실제 페이지가 완성되지 않아도 개별 컴포넌트 단위에서 개발이 가능합니다. 이는 디자인 시스템 구축에 유리합니다.컴포넌트 문서화 자동화Storybook은 UI의 상태 (Props, Variants)를 자동으로 문서화해줍니다.팀 내에서 디자이너, 개발자, QA, PM이 컴포넌트 가이드를 쉽게 확인 가능이외에도 더 많은 장점들이 있지만, 제가 도입하려고..