@airbridge/component

airbridge-design-system

에어브릿지 대시보드에 사용되는 디자인 시스템을 관리하는 Repository입니다.
각 내용을 참조하여 업무 진행을 부탁드립니다 :)

✅ Requirement

• Node (LTS version)
• PNPM

How To Install

# install node from brew
brew install node

# install pnpm from brew
brew install pnpm

# setup version
pnpm env use --global 16

⚒️ Environment Setup

본 레포지터리를 Clone한 뒤, PNPM을 사용해 필요한 패키지를 설치해주세요.
GitKraken 등의 Git GUI 도구를 사용하면, 보다 편하게 작업하실 수 있습니다.

# install packages from lock file
pnpm install

🏃 Install & Run

설치가 완료되고, 로컬에서 개발 내용을 확인하고자 할 때는 아래 명령어를 입력해주세요.

pnpm storybook

로컬에서 빌드를 실행할 때는 아래 명령어를 입력해주세요.

pnpm build

🎨 Templates

아래 명령어들을 이용해 템플릿이 적용된 파일을 쉽게 생성할 수 있습니다.

foundation 템플릿을 사용하고자 할 때는 아래 명령어를 입력해주세요.

pnpm new:foundation [NAME]

• src/foundations/[NAME]/[NAME].stories.mdx 파일이 생성됩니다. (*template)
• src/foundations/[NAME]/[NAME].ts 파일이 생성됩니다. (*template)
• src/foundations/[NAME]/index.ts 파일이 생성됩니다.
• src/foundations/index.ts 에 export문이 추가됩니다.
  
  

component 템플릿을 사용하고자 할 때는 아래 명령어를 입력해주세요.
터미널에 제시되는 프롬프트에서 컴포넌트의 이름과 props를 입력하면 컴포넌트 생성에 필요한 파일들이 자동 생성됩니다.

pnpm new:component

• src/components/foo/Foo.tsx 파일이 생성됩니다.
• src/components/foo/Foo.styles.ts 파일이 생성됩니다.
• src/components/foo/index.ts 파일이 생성됩니다.
• Storybook의 Docs를 구성할 파일들이 storybook 폴더 내에 생성됩니다.
  • src/components/foo/storybook/Foo.docs.mdx 파일이 생성됩니다.
  • src/components/foo/storybook/Foo.stories.tsx 파일이 생성됩니다.
  • src/components/foo/storybook/Foo.stories.styles.tsx 파일이 생성됩니다.
• src/components/index.ts 에 export문이 추가됩니다.
  
  
  

🔍 Stability & Review

For QA & Code Review

Code Review를 위해 PR을 올릴 때는, 기본적으로 'Draft Pull Request' 옵션을 활성화시킵니다.

QA에 필요한 환경은 Vercel로 구축합니다.
feature/TICKET_NAME 으로 브랜치를 생성한 후 master로 PR을 보내면, 자동으로 Deploy Preview가 생성됩니다.

🚀 Deployment

master 브랜치에 새로운 커밋이 생기면 (merge or push),
GitHub Actions를 통해 빌드 이후 Vercel을 통해 배포됩니다. 배포 완료시 #dev-alert-ads에서 알림을 받을 수 있습니다.

• ✅ GitHub Actions
• 🚀 Vercel

기타 내부 오류 처리

hotfix/TICKET_NAME 으로 브랜치를 생성하여 작업, PR을 올린 뒤 merge합니다.

etc...

• 🤔 Front-end Guidelines
• 🗂 Design System Notion Page

"Design system is a process and therefore is simultaneously always ready and never done." > - Marcin Treder, UXPin