invaiz-design-system v0.3.3

🎨 INVAIZ Design System

(주)인바이즈의 디자인을 반영한 디자인 시스템 패키지입니다.
여러 패키지 내 일관성 있는 디자인을 적용하기 위한 목적을 가지고 있습니다.

React, TypeScript 디자인 시스템으로, @emotion을 사용하여 스타일을 지정합니다.

• 🔩 개발 도구는 다음과 같이 사용합니다.
  • 번들링 및 개발 서버 실행: Vite
  • 컴포넌트 유닛 테스트: Jest, @testing-library
  • UI 테스트: storybook
  • 문법 검사(정적 분석): ESLint
  • 코드 포맷팅: Prettier
  • 그 외: Github Actions, chromatic, Netlify
• 🖌️ 디자인 도구는 Figma를 사용합니다.
• ESM 모듈 시스템에서 사용 가능합니다.

⚠️ 해당 패키지를 사용하기 위해서는 사용하려는 패키지의 의존성 모듈로 @emotion/react, @emotion/styled가 포함되어 있어야 합니다.

👀 프로젝트 구조

• ☁️ .github

  • Github에서 참조하는 요소(Github Actions, Issue와 PR 규칙 등)이 포함하는 폴더입니다.
  • chromatic과 Netlify로 main에 푸쉬할 경우, 자동으로 storybook 문서를 빌드하여 업로드하는 스크립트 등을 선언합니다.

• ⚙️ .storybook

  • storybook과 관련된 설정을 지정하는 폴더입니다.
  • Webpack 기반으로 구현된 storybook을 Vite와 연결하고, storybook 전역적으로 사용해야 하는 문법을 지정합니다.

• ⚙️ config

  • 프로젝트의 설정을 위한 추가 파일이 포함하는 폴더입니다.

• 🖨 dist

  • Vite로 빌드된 결과물이 포함되는 폴더입니다.
  • 외부에서 사용할 수 있도록 ESM 모듈로 출력됩니다.
  • 프로젝트 소스 코드는 TypeScript로, 외부에서 바로 사용하기 위해서는 d.ts가 포함된 JavaScript파일로 컴파일(트랜스파일)되어 있어야 합니다.
  • 즉, dist 폴더에 컴파일된 JavaScript 파일이 존재하지 않는다면 해당 패키지는 외부에서 사용할 수 없습니다.

• 📖 docs

  • 패키지 내에서 지켜야 할 규칙 등 문서화된 자료를 포함하는 폴더입니다.

• 📁 public

  • Vite가 개발 모드로 실행될 때 React 애플리케이션에서 참조할 정적 파일을 포함하는 폴더입니다.

• 📝 src

  • 프로젝트의 소스 코드가 포함하는 폴더입니다.
  • 인바이즈에서 사용하는 디자인 시스템을 모두 포함합니다.

• ⚙️ .eslintrc

  • 루트 폴더에 있는 설정을 상속 받고, storybook 파일에서의 설정을 지정하고 있습니다.

• ✂️ .gitignore

  • Git에서 추적하지 않아야 하는 파일 리스트를 명시한 파일입니다.
  • storybook 빌드 파일을 업로드하지 않는 설정을 추가합니다.

• 📜 index.html

  • Vite가 개발 모드로 실행될 때 React 애플리케이션이 구동될 HTML 엔트리 포인트 페이지입니다.

• ⚙️ jest.config.ts

  • 테스트 환경을 구성하는 Jest의 설정을 명시합니다.

• 📦 package.json

  • invaiz-design-system 패키지에서 사용하는 의존성 모듈을 명시합니다.

• ⚙️ tsconfig.json

  • 루트 폴더에 있는 설정을 상속받아 alias를 지정하고 있습니다.

• ⚙️ vite.config.ts

  • SVG 파일을 리액트 컴포넌트처럼 사용할 수 있는 vite-plugin-svgr가 명시되어 있습니다.
  • 외부에서 라이브러리 모듈 형태로 접근할 수 있도록 빌드하는 설정를 포함합니다.
  • 개발 서버를 열기 위한 정보를 포함하고 있습니다.

📑 프로젝트 환경 요구 사항

• node: v20.x.x 이상
• pnpm: v9.x.x 이상

📒 사전 작업

• 설치 명령어를 아래와 같이 해야만 합니다.

pnpm install --shamefully-hoist

💬 사용 가능한 스크립트

• pnpm start

  • Vite 개발 환경으로 동작합니다.
  • /src/**/* 내의 파일 수정 시 Hot-Loader가 적용됩니다.
  • 8080 포트에서 개발 서버를 오픈합니다.

• pnpm build

  • Vite를 사용해서 패키지 소스를 외부에서 사용할 수 있도록 번들링, 빌드합니다.
  • 결과물이 d.ts와 함께 ESM 모듈로 dist 폴더에 생성됩니다.

• pnpm test

  • Jest를 사용하여 프로젝트 폴더 내의 테스트를 모두 실행합니다.
  • *.test.js, *.test.ts, *.spec.js, *.spec.ts 파일을 테스트 파일로 인식합니다.`

• pnpm test:watch

  • Jest를 사용하여 프로젝트 폴더 내의 테스트를 모두 실행하고, 파일의 변경을 지속적으로 감시합니다.`

• pnpm test:snapshot

  • Jest를 사용해 스냅샷 테스트를 수행합니다.
  • 스냅샷 테스트로 선언되어 있는 파일들의 컴포넌트 렌더링 상태를 확인하고, 새로 찍어냅니다.

• pnpm test:clear

  • Jest에 캐시된 파일을 모두 삭제합니다.`

• pnpm eslint

  • src 내의 소스 코드를 eslint를 사용하여 검사합니다.

• pnpm eslint:fix

  • src 내의 소스 코드를 eslint를 사용하여 검사하고, 수정할 수 있는 부분은 자동으로 수정합니다.

• pnpm prettier

  • src 내의 소스 코드를 prettier를 사용하여 검사합니다.

• pnpm prettier:fix

  • src 내의 소스 코드를 prettier를 사용하여 검사하고, 수정할 수 있는 부분은 자동으로 수정합니다.

• pnpm storybook

  • Storybook 페이지를 개발 환경을 오픈합니다.
  • 6006 포트에서 페이지를 오픈합니다.

• pnpm build-storybook

  • Storybook 페이지를 빌드합니다.
  • 빌드 완료된 파일은 storybook-static 폴더에 생성됩니다.