Workshop: TypeScript 와 Storybook을 사용한 리액트 디자인 시스템 구축하기

에서 재밌게 만든 React + TypeScript + Storybook 앱이당

• 워크샵 신청 링크: https://innovationlab191121workshop.splashthat.com/
• 강의 자료: http://bit.ly/1121-storybook
• Storybook tutorial: https://velopert.gitbook.io/storybook-tutorial/

디자인 시스템이란?

• Design system: Style Guide + Component library
  • Style guide: 특정 브랜드나 UI를 만들 때 꼭 지켜야 하는 규칙들 (color, typography, motion, spacing)
    • https://www.carbondesignsystem.com/components/overview
  • Component library: UI kit,

문서화

• "If you don't document it, it doesn't exist"
• Storybook
  • Storybook v5.2 부터 MDX 지원! <- 편함
• Docz: https://www.docz.site/
  • MDX 지원
• react-styleguidist: https://react-styleguidist.js.org/

Styling

• emotion beat the styled components (https://velopert.gitbook.io/storybook-tutorial/04.create-design-system/04a.button#emotion)