Storybook 도입

[abiriadev]

💡 문제점 또는 필요성

• 프런트엔드 코드에서 중구난방으로 작성되고 있는 컴포넌트를 정리
• 디자인에서 미구현된 컴포넌트 구현
• 컴포넌트의 사용법 예시 코드 제시
• 개별 컴포넌트의 독립된 환경에서의 빠른 개발
• 개별 컴포넌트의 문서화와 쉬운 검색

💡 원하는 해결 방법 또는 대안 제시

• 워크샵 프레임워크인 Storybook을 도입

💡 참고자료

• https://storybook.js.org/docs/api/csf
• https://storybook.js.org/docs/writing-stories
• https://storybook.js.org/docs/get-started/whats-a-story
• https://storybook.js.org/docs/writing-docs/autodocs
• https://storybook.js.org/docs/writing-docs
• https://storybook.js.org/docs/writing-docs/doc-blocks
• https://storybook.js.org/docs/api/doc-block-description
• Docs: update outdated guide to make code open by default storybookjs/storybook#26872
• [Bug]: csf-plugin fails to read stories with names not matching hardcoded regex storybookjs/storybook#26905
• https://studymatchproject.atlassian.net/wiki/x/AgCdAw