Skip to content
/ daepiro-design-system Public

안전 재난 알림 서비스 '대피로' 웹 디자인 시스템

0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Team-NumberOne/daepiro-design-system

BranchesTags

Repository files navigation

대피로 디자인 시스템 (Daepiro Design System)

Thumbnail

React 기반 디자인 시스템 컴포넌트 라이브러리입니다. Tailwind CSS v4를 사용하여 스타일링됩니다.

📦 설치

npm install @team-numberone/daepiro-design-system
# 또는
pnpm add @team-numberone/daepiro-design-system
# 또는
yarn add @team-numberone/daepiro-design-system

GitHub Packages 사용 시

.npmrc 파일에 다음을 추가하세요:

@team-numberone:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_TOKEN

🚀 빠른 시작

import { Button, Modal, Icons } from "@team-numberone/daepiro-design-system";
import "@team-numberone/daepiro-design-system/dist/index.css";

function App() {
  return (
    <div>
      <Button variant="primary">버튼</Button>
      <Icons.Close />
    </div>
  );
}

📚 컴포넌트

Button

다양한 variant와 크기를 지원하는 버튼 컴포넌트입니다.

import { Button } from "@team-numberone/daepiro-design-system";

<Button variant="primary">Primary 버튼</Button>
<Button variant="default">Default 버튼</Button>
<Button variant="gray">Gray 버튼</Button>
<Button disabled>비활성화</Button>
<Button full>전체 너비</Button>

Props:

  • variant: "primary" | "default" | "gray" (기본값: "default")
  • disabled: boolean (기본값: false)
  • full: boolean (기본값: false)
  • leftIcon: ReactNode
  • rightIcon: ReactNode
  • type: "button" | "submit" | "reset" (기본값: "button")

Modal

모달 다이얼로그 컴포넌트입니다. 기본 사용법과 컴파운드 패턴을 지원합니다.

import { Modal } from "@team-numberone/daepiro-design-system";

// 기본 사용법
<Modal
  open={isOpen}
  onOpenChange={setIsOpen}
  actionButton={{
    label: "확인",
    onClick: () => console.log("확인 클릭"),
  }}
>
  <h2>모달 제목</h2>
  <p>모달 내용</p>
</Modal>

// 컴파운드 패턴
<Modal.Root open={isOpen} onOpenChange={setIsOpen}>
  <Modal.Overlay>
    <Modal.Content>
      <Modal.Header>제목</Modal.Header>
      <Modal.CloseButton />
      <div>내용</div>
    </Modal.Content>
  </Modal.Overlay>
</Modal.Root>

Props:

  • open: boolean - 모달 열림/닫힘 상태
  • onOpenChange: (isOpen: boolean) => void - 상태 변경 핸들러
  • size: "small" | "medium" | "large" (기본값: "medium")
  • closeOnOverlayClick: boolean (기본값: true)
  • closeOnEscape: boolean (기본값: true)
  • showCloseButton: boolean (기본값: true)
  • actionButton: { label: string; onClick?: () => void } - 하단 액션 버튼

Icon

아이콘 컴포넌트입니다. 정적 컴포넌트와 동적 컴포넌트를 모두 지원합니다.

import { Icon, Icons } from "@team-numberone/daepiro-design-system";

// 정적 컴포넌트
<Icons.Close />
<Icons.ArrowDown size="lg" />
<Icons.Plus decorative={false} aria-label="추가" />

// 동적 컴포넌트
<Icon name="Close" size="md" />
<Icon name="ArrowDown" size={24} />

사이즈:

  • xs: 12px
  • sm: 16px
  • md: 24px (기본값)
  • lg: 32px
  • xl: 48px
  • 또는 숫자로 직접 지정

Props:

  • size: "xs" | "sm" | "md" | "lg" | "xl" | number (기본값: "md")
  • color: string - 아이콘 색상
  • decorative: boolean (기본값: true) - 장식용 아이콘 여부
  • aria-label: string - decorative={false}일 때 필요

🎨 디자인 토큰

Colors

JavaScript/TypeScript에서 사용

import { colors } from "@team-numberone/daepiro-design-system";

// 실제 색상 팔레트 (디자인 토큰)
colors.O[500];   // Orange 500 - #FF6929
colors.Gre[300]; // Green 300 - #6ACF98
colors.R[500];   // Red 500 - #FA2C1F
colors.G[900];   // Gray 900 - #222530

CSS 변수로 사용:

/* 실제 색상 이름 */
background-color: var(--color-orange-500);
color: var(--color-green-300);

/* 시멘틱 색상 이름 */
background-color: var(--color-primary-500);  /* Orange */
color: var(--color-secondary-300);           /* Green */

Tailwind CSS 유틸리티 클래스로 바로 사용

@theme에 정의된 색상은 Tailwind 유틸리티 클래스로 바로 사용할 수 있습니다:

// 실제 색상 이름으로 사용
<div className="bg-orange-500 text-white">Orange 배경</div>
<div className="bg-green-500 text-white">Green 배경</div>
<div className="bg-red-500 text-white">Red 배경</div>

// 시멘틱 색상 이름으로 사용 (Orange → Primary, Green → Secondary, Red → Tertiary)
<div className="bg-primary-500 text-white">Primary(Orange) 배경</div>
<div className="bg-secondary-500 text-white">Secondary(Green) 배경</div>
<div className="bg-tertiary-500 text-white">Tertiary(Red) 배경</div>

// Gray 색상
<div className="bg-gray-50 text-gray-900">Gray 배경</div>
<div className="bg-gray-75">Gray-75 배경</div>
<div className="text-gray-600">Gray 텍스트</div>

// 모든 색상 스케일 사용 가능 (50-900)
<div className="bg-primary-100 hover:bg-primary-200">호버 효과</div>
<div className="bg-orange-100 hover:bg-orange-200">Orange 호버 효과</div>

색상 매핑:

  • orange-* = primary-* (Orange → Primary)
  • green-* = secondary-* (Green → Secondary)
  • red-* = tertiary-* (Red → Tertiary)

Typography

import { typography } from "@team-numberone/daepiro-design-system";

typography.h1; // h1 스타일
typography["body-1"]; // body-1 스타일
typography.caption; // caption 스타일

Shadows

import { shadows } from "@team-numberone/daepiro-design-system";

shadows.small;
shadows.medium;
shadows.large;

Tailwind CSS 테마 커스터마이징

이 디자인 시스템은 Tailwind CSS v4를 사용하며, @theme 문법을 통해 테마를 커스터마이징할 수 있습니다.

기본 사용법

// 색상 사용
<div className="bg-primary-500 text-white p-4 rounded-lg">
  Primary 배경
</div>

// 타이포그래피 사용
<h1 className="text-h1">제목 1</h1>
<p className="text-body-1">본문 텍스트</p>

테마 오버라이드 (사용처에서)

디자인 시스템의 색상을 커스터마이징할 수 있습니다. 예를 들어, Primary 색상을 그린(Secondary)으로 변경:

/* globals.css */
@import "@team-numberone/daepiro-design-system/dist/index.css";
@import "tailwindcss";

/* Primary 색상을 Green으로 오버라이드 */
@theme {
  --color-primary-50: var(--color-green-50);
  --color-primary-100: var(--color-green-100);
  --color-primary-200: var(--color-green-200);
  --color-primary-300: var(--color-green-300);
  --color-primary-400: var(--color-green-400);
  --color-primary-500: var(--color-green-500);
  --color-primary-600: var(--color-green-600);
  --color-primary-700: var(--color-green-700);
  --color-primary-800: var(--color-green-800);
  --color-primary-900: var(--color-green-900);
}

/* 디자인 시스템 컴포넌트의 CSS 변수도 오버라이드 */
:root {
  --color-primary-50: var(--color-green-50);
  --color-primary-100: var(--color-green-100);
  --color-primary-200: var(--color-green-200);
  --color-primary-300: var(--color-green-300);
  --color-primary-400: var(--color-green-400);
  --color-primary-500: var(--color-green-500);
  --color-primary-600: var(--color-green-600);
  --color-primary-700: var(--color-green-700);
  --color-primary-800: var(--color-green-800);
  --color-primary-900: var(--color-green-900);
}

이렇게 하면:

  • 사용처의 bg-primary-500 클래스가 Green 색상으로 적용됩니다
  • 디자인 시스템의 Button 컴포넌트도 Green 색상을 사용합니다
  • 디자인 시스템이 제공하는 --color-green-*, --color-orange-*, --color-red-* CSS 변수를 참조할 수 있습니다

커스텀 색상 정의

@theme {
  /* 완전히 새로운 색상 정의 */
  --color-primary-500: #ff0000;
  --color-gray-900: #1a1a1a;
  
  /* 타이포그래피 커스터마이징 */
  --font-family-sans: "Your Font", sans-serif;
}

🛠️ 개발

사전 요구사항

  • Node.js 18 이상
  • pnpm 10.25.0 이상

설치

pnpm install

스크립트

# 개발 서버 실행
pnpm dev

# Storybook 실행
pnpm storybook

# 빌드
pnpm build

# 테스트 실행
pnpm test

# 테스트 커버리지
pnpm test:coverage

# 린트 및 포맷 체크
pnpm check

# 린트 및 포맷 자동 수정
pnpm check:fix

# 아이콘 생성 (SVG → React 컴포넌트)
pnpm icons

프로젝트 구조

src/
├── components/     # React 컴포넌트
├── hooks/          # 커스텀 훅
├── icons/          # 아이콘 컴포넌트
├── styles/         # Tailwind CSS 스타일 (tailwind.css)
├── tokens/         # 디자인 토큰 (colors, typography, shadows)
├── utils/          # 유틸리티 함수 (cn 등)
└── core/           # 핵심 유틸리티

📖 Storybook

컴포넌트 문서와 예제는 Storybook에서 확인할 수 있습니다.

pnpm storybook

🧪 테스트

프로젝트는 Vitest를 사용하여 테스트를 작성합니다.

# 테스트 실행
pnpm test

# 테스트 감시 모드
pnpm test:watch

# 테스트 UI
pnpm test:ui

# 커버리지 리포트
pnpm test:coverage

📝 기여하기

  1. 이슈를 생성하거나 기존 이슈를 확인하세요
  2. 기능 브랜치를 생성하세요 (git checkout -b feature/amazing-feature)
  3. 변경사항을 커밋하세요 (git commit -m 'feat: Add amazing feature')
  4. 브랜치에 푸시하세요 (git push origin feature/amazing-feature)
  5. Pull Request를 생성하세요

커밋 컨벤션

이 프로젝트는 Conventional Commits를 따릅니다.

  • feat: 새로운 기능
  • fix: 버그 수정
  • docs: 문서 변경
  • style: 코드 스타일 변경 (포맷팅 등)
  • refactor: 리팩토링
  • test: 테스트 추가/수정
  • chore: 빌드 설정, 의존성 등

📄 라이선스

이 프로젝트는 비공개 프로젝트입니다.

🔗 링크

📞 문의

이슈나 질문이 있으시면 GitHub Issues를 통해 문의해주세요.

About

안전 재난 알림 서비스 '대피로' 웹 디자인 시스템

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 9

Release v0.2.5 Latest
Jan 18, 2026
+ 8 releases

Packages

 
 
 

Languages