MZC Design System

MZC 디자인 시스템은 React와 TypeScript로 구축된 재사용 가능한 컴포넌트 라이브러리입니다. Tailwind CSS와 Radix UI를 기반으로 하여 일관성 있고 접근성이 뛰어난 UI 컴포넌트를 제공합니다.

🚀 주요 특징

• TypeScript 지원: 완전한 타입 안정성과 개발자 경험 향상
• Tailwind CSS: 유틸리티 우선의 스타일링 시스템
• Radix UI: 접근성이 뛰어난 헤드리스 UI 컴포넌트
• Storybook: 컴포넌트 문서화 및 개발 환경
• 다크 모드: 테마 전환 기능 지원
• Variant 기반: class-variance-authority를 활용한 유연한 컴포넌트 변형

📦 설치

npm install @mzc-fe/design-system
# 또는
yarn add @mzc-fe/design-system

🛠️ 사용법

기본 설정

import { ThemeProvider } from "@mzc-fe/design-system";
import "@mzc-fe/design-system/dist/design-system.css";

function App() {
  return (
    <ThemeProvider defaultTheme="light">{/* 앱 컴포넌트들 */}</ThemeProvider>
  );
}

디자인 토큰 사용

// 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>

🎯 개발

개발 환경 설정

# 의존성 설치
yarn install

# 개발 서버 실행
yarn storybook

# 빌드
yarn build

# 린트 검사
yarn lint

프로젝트 구조

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-* 클래스 자동 생성

/* 사용 예시 */
.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을 사용합니다:

yarn storybook

Storybook을 통해 각 컴포넌트의 다양한 상태와 사용법을 확인할 수 있습니다.

🔗 관련 링크

• Tailwind CSS
• Radix UI
• Storybook
• class-variance-authority