[Frontend] Structuring Storybook

[rkskekzzz]

현재 상태

파일 구별이 명확하지 않아서 새로운 스토리북을 생성할 때, 어떤 위치, 어떤 방식으로 생성해야할지 결정하는데 시간이 많이 걸립니다
명확하게 구조를 세워둘 필요가 있어 보입니다!

예시

Storybook에서 공식문서로 구성하는 가이드를 작성해 두었습니다!

아래는 위 링크에 나오는 모든 예시들입니다 :)

Atomic Design methodology

• Codecademy
• The Guardian
• United Nations World Food Programme

By functionality

• Spotify Backstage
• Grommet
• Monday.com Vibe

By component status

• IBM Carbon
• Workday Canvas

[rkskekzzz]

위 예시 중 마음에 드는 샘플을 골라서 해당 샘플의 구조를 따라하면 좋을 것 같습니다! 많은 의견 부탁드립니당:)

[leekh716]

오 저는 맨 처음 codeacademy꺼 맘에 드는데요!
컴포넌트 단계에 따라 atom -> molecule -> organism 로 구분한게 직관적이고 이해가 잘 가는 구성이네요(생명공학 전공이라 그런건 비밀)

[rkskekzzz]

저도 첫번째 방식이 젤 좋아보이네요!!
추가로 custom hook에 대한 가이드를 아래 링크처럼 만들어 두는 것도 좋아보입니다!
https://react.carbondesignsystem.com/?path=/docs/hooks-usecontextmenu--overview