telepix-ui

프로젝트 개요

• 목적
  • 텔레픽스 디자인 시스템 반영을 위한 공통 라이브러리 제작
  • 불필요하고 반복 작성되는 컴포넌트 개발 공수를 줄여 개발 속도 향상
• 핵심 기능
  • 자주 사용되는 공통 컴포넌트를 import하여 자유롭게 컴포넌트 조작

기술 스택

• TypeScript
• React
• TailwindCSS
• Storybook
• Radix-ui Primitives
• react-day-picker
• dayjs

디렉터리 구조

📦 .storybook
 ┣ 📜 index.css
 ┣ 📜 main.mjs
 ┣ 📜 preview.jsx
 ┗ 📜 props-table.tsx
 📦 src
 ┣ 📂 autocomplete
 ┣ 📂 button
 ┣ 📂 calendar
 ┣ 📂 card
 ┣ 📂 checkbox
 ┣ 📂 context-menu
 ┣ 📂 data-table
 ┣ 📂 date-picker
 ┣ 📂 dialog
 ┣ 📂 horizontal-tab
 ┣ 📂 input
 ┣ 📂 interactive-list-item
 ┣ 📂 lib (tailwind 설정 관련 twmerge, clsx 관련 util 파일)
 ┣ 📂 mode-tab
 ┣ 📂 multiple-select
 ┣ 📂 pagination
 ┣ 📂 radio-group
 ┣ 📂 select
 ┣ 📂 styles
 ┣ 📂 table
 ┣ 📂 tag
 ┣ 📂 text
 ┣ 📂 textarea
 ┣ 📂 tooltip
 ┣ 📂 vertical-menu
 ┣ 📜 GettingStarted.mdx
 ┣ 📜 index.ts
 ┗ 📜 client.ts
 📜 eslint.config.js
 📜 package.json
 📜 pnpm-lock.yaml
 📜 postcss.config.js
 📜 prettier.config.mjs
 📜 README.md
 📜 rollup.config.js
 📜 tailwind.config.js
 📜 tsconfig.build.json
 📜 tsconfig.json

설치 및 실행 방법

# 의존성 설치
pnpm install

# 스토리북 실행
npm run storybook

Design System 링크

• Simple Design System

배포 관련 정보

배포 시, 아래와 같이 package.json의 version을 올리고 push를 하게 되면, Pipeline에 의해 자동으로 배포됩니다.

npm version patch    # 또는 minor / major

git push origin main --follow-tags

커밋 메세지 컨벤션

커밋 메세지 컨벤션은 frontend 코드 컨벤션을 따릅니다.