써밋업 디자인 시스템 세팅하기

[KimKyuHoi]

💡 Feature proposal : Submit-up Design System Setup

Use-cases

• 모노레포 기반의 디자인 시스템 구축 필요
• 일관된 코드 스타일 및 개발 환경 제공
• 컴포넌트 문서화 및 테스트 환경 구축
• 자동화된 배포 프로세스 구현
• GDGoC KNU => Remote 해서 가지고온 관계로 main에 다가 박아둔 상태라 PR을 날릴수가 없는 상황

Example

# 프로젝트 초기 설정
yarn init -w

# 기본 패키지 설치
yarn add -D turbo eslint prettier

# UI 라이브러리 설정
cd packages/ui
yarn add -D storybook
yarn add @shadcn/ui

Attempted solutions

Proposal

1. Yarn Berry + Turborepo 설정

   • Workspace 구성
   • 공통 패키지 관리

2. 코드 품질 관리

   • ESLint/Prettier 설정

3. UI 컴포넌트 개발 환경

   • Storybook 설정
     • auto docs
   • shadcn/ui 통합
   • jest setting

4. CI/CD 자동화

• pr-check.yml
• ui-package-test.yml
• release.yml

References

• Yarn berry인데 Storybook에서 node_modules 뜨는 경우 : https://velog.io/@turtle601/%EC%96%B4%EC%A9%8C%EB%8B%A4-storybook-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-%EA%B8%B0%EC%97%AC%ED%95%98%EA%B2%8C-%EB%90%9C-%EC%8D%B0
• Yarn berry Cannot find module prettier : https://xionwcfm.tistory.com/286
• yarn berry에서의 cannot find module 에러 해결: https://velog.io/@jungmiin/yarn-berry%EC%97%90%EC%84%9C%EC%9D%98-cannot-find-module-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0