@mzc-fe/design-system 0.0.5 → 0.0.7-rc.0

package/README.md

@@ -1,184 +0,0 @@
-# MZC Design System
-
-MZC 디자인 시스템은 React와 TypeScript로 구축된 재사용 가능한 컴포넌트 라이브러리입니다. Tailwind CSS와 Radix UI를 기반으로 하여 일관성 있고 접근성이 뛰어난 UI 컴포넌트를 제공합니다.
-
-## 🚀 주요 특징
-
-- **TypeScript 지원**: 완전한 타입 안정성과 개발자 경험 향상
-- **Tailwind CSS**: 유틸리티 우선의 스타일링 시스템
-- **Radix UI**: 접근성이 뛰어난 헤드리스 UI 컴포넌트
-- **Storybook**: 컴포넌트 문서화 및 개발 환경
-- **다크 모드**: 테마 전환 기능 지원
-- **Variant 기반**: class-variance-authority를 활용한 유연한 컴포넌트 변형
-
-## 📦 설치
-
-```bash
-npm install @mzc-fe/design-system
-# 또는
-yarn add @mzc-fe/design-system
-```
-
-## 🛠️ 사용법
-
-### 기본 설정
-
-```tsx
-import { ThemeProvider } from "@mzc-fe/design-system";
-import "@mzc-fe/design-system/dist/design-system.css";
-
-function App() {
-  return (
-    <ThemeProvider defaultTheme="light">{/* 앱 컴포넌트들 */}</ThemeProvider>
-  );
-}
-```
-
-> **⚠️ Tailwind CSS 사용 시 주의사항**
->
-> 프로젝트에서 Tailwind CSS를 함께 사용하는 경우, `design-system.css`가 **반드시** `@import 'tailwindcss'`보다 **먼저** import되어야 합니다. 순서가 잘못되면 디자인 시스템의 스타일이 Tailwind에 의해 덮어씌워질 수 있습니다.
->
-> ```css
-> /* ✅ 올바른 순서 */
-> @import "@mzc-fe/design-system/dist/design-system.css";
-> @import "tailwindcss";
->
-> /* ❌ 잘못된 순서 */
-> @import "tailwindcss";
-> @import "@mzc-fe/design-system/dist/design-system.css";
-> ```
-
-### 디자인 토큰 사용
-
-```tsx
-// CSS 클래스로 디자인 토큰 사용
-<div className="bg-main text-main p-2">
-  <h1 className="font-h1-700">제목</h1>
-  <p className="font-subtitle1-700">부제목</p>
-</div>
-
-// CSS 변수로 직접 사용
-<div style={{
-  backgroundColor: 'var(--background-color-main)',
-  color: 'var(--text-color-main)',
-  padding: 'var(--spacing)'
-}}>
-  커스텀 스타일
-</div>
-```
-
-## 🎯 개발
-
-### 개발 환경 설정
-
-```bash
-# 의존성 설치
-yarn install
-
-# 개발 서버 실행
-yarn storybook
-
-# 빌드
-yarn build
-
-# 린트 검사
-yarn lint
-```
-
-### 로컬 테스트 (yalc)
-
-다른 프로젝트에서 배포 전 디자인 시스템을 테스트하려면 [yalc](https://github.com/wclr/yalc)를 사용합니다.
-
-```bash
-# yalc 전역 설치 (최초 1회)
-npm install -g yalc
-
-# 디자인 시스템 빌드 및 로컬 배포
-yarn publish:local
-```
-
-테스트할 프로젝트에서:
-
-```bash
-# 디자인 시스템 로컬 버전 연결
-yalc add @mzc-fe/design-system
-
-# 의존성 재설치
-yarn install
-```
-
-테스트 완료 후 정리:
-
-```bash
-# 로컬 버전 연결 해제
-yalc remove @mzc-fe/design-system
-
-# 또는 모든 yalc 패키지 제거
-yalc remove --all
-```
-
-> **💡 Tip**: 디자인 시스템을 수정할 때마다 `yarn publish:local`을 실행하고, 테스트 프로젝트에서 `yalc update`를 실행하면 변경사항이 반영됩니다.
-
-### 프로젝트 구조
-
-```
-src/
-├── components/           # 재사용 가능한 컴포넌트
-│   └── Button/           # Button 컴포넌트
-│   └── ...               # Button 컴포넌트
-├── foundations/          # 디자인 토큰 및 테마
-│   ├── color.css         # 색상 토큰
-│   ├── spacing.css       # 간격 토큰
-│   ├── typography.css    # 타이포그래피 토큰
-│   └── ThemeProvider.tsx # 테마 관리
-└── lib/                  # 유틸리티 함수
-    └── utils.ts          # 공통 유틸리티
-```
-
-## 🎨 디자인 토큰
-
-프로젝트는 `@theme inline`과 CSS 변수를 활용한 디자인 토큰 시스템을 사용합니다:
-
-### 색상 시스템 (`color.css`)
-
-- **토큰 매핑**: `@theme inline`을 통해 CSS 변수를 Tailwind 클래스에 매핑
-- **테마 지원**: 라이트/다크 모드 자동 전환
-- **자동 클래스 생성**: `--background-color-*`, `--text-color-*` 패턴으로 `bg-*`, `text-*` 클래스 자동 생성
-
-```css
-/* 사용 예시 */
-.bg-main {
-  background-color: var(--background-color-main);
-}
-.text-main {
-  color: var(--text-color-main);
-}
-```
-
-### 간격 시스템 (`spacing.css`)
-
-- **기본 단위**: 4px 기준의 일관된 간격 시스템
-- **Tailwind 통합**: `p-2` → `padding: 8px` 자동 변환
-
-### 타이포그래피 (`typography.css`)
-
-- **유틸리티 클래스**: `@utility`를 사용한 재사용 가능한 텍스트 스타일
-- **폰트 패밀리**: Pretendard 폰트 사용
-- **일관된 스타일**: `font-h1-700`, `font-subtitle1-700` 등 체계적인 명명 규칙
-
-## 📚 Storybook
-
-컴포넌트 문서화와 개발을 위해 Storybook을 사용합니다:
-
-```bash
-yarn storybook
-```
-
-Storybook을 통해 각 컴포넌트의 다양한 상태와 사용법을 확인할 수 있습니다.
-
-## 🔗 관련 링크
-
-- [Tailwind CSS](https://tailwindcss.com/)
-- [Radix UI](https://www.radix-ui.com/)
-- [Storybook](https://storybook.js.org/)
-- [class-variance-authority](https://cva.style/)