Skip to Content
ComponentsCalsCals Components

Cals Components

Cals 브랜드 아이덴티티가 적용된 예약 관리 특화 컴포넌트 라이브러리입니다.

개요

Cals Components는 Foundation Components를 기반으로 Cals 브랜드 아이덴티티와 예약 관리 시스템에 최적화된 컴포넌트 세트입니다.

핵심 특징:

  • ✅ Cals 브랜드 컬러 (Pink, Blue, Purple)
  • ✅ 예약 상태 컬러 시스템 (5가지 상태)
  • ✅ 예약 관리 특화 예제
  • ✅ Foundation과 동일한 API 호환성
  • ✅ 접근성(WCAG 2.1 AA) 준수

Cals 브랜드 컬러

Primary (Pink) - `#e91e63`

Cals의 메인 브랜드 컬러입니다. 주요 액션 버튼, CTA, 강조 요소에 사용됩니다.

사용 예시:

  • 예약 확정 버튼
  • 주요 네비게이션
  • 중요한 알림
<Button variant="primary">예약하기</Button>

Secondary (Blue) - `#03a9f4`

보조 브랜드 컬러로 정보 표시, 링크, 보조 액션에 사용됩니다.

사용 예시:

  • 정보 표시 버튼
  • 링크 텍스트
  • 보조 네비게이션
<Button variant="secondary">일정 보기</Button>

Accent (Purple) - `#9c27b0`

특별한 상태나 강조가 필요한 요소에 사용되는 악센트 컬러입니다.

사용 예시:

  • 프리미엄 기능
  • 특별 이벤트
  • 강조 요소
<Badge variant="accent">프리미엄</Badge>

예약 상태 컬러 시스템

Cals Components의 가장 큰 특징은 5가지 예약 상태를 명확하게 구분하는 컬러 시스템입니다.

Available (예약 가능) - `#4caf50`

예약이 가능한 시간대나 서비스를 나타냅니다.

<Badge variant="available">예약 가능</Badge>
<Button variant="success">예약하기</Button>

Pending (대기 중) - `#ff9800`

예약 요청이 접수되었지만 아직 확정되지 않은 상태입니다.

<Badge variant="pending">승인 대기</Badge>
<Alert variant="warning">예약 승인을 기다리고 있습니다</Alert>

Confirmed (확정) - `#03a9f4`

예약이 확정된 상태입니다.

<Badge variant="confirmed">예약 확정</Badge>
<Alert variant="info">예약이 확정되었습니다</Alert>

Cancelled (취소) - `#f44336`

예약이 취소된 상태입니다.

<Badge variant="cancelled">예약 취소</Badge>
<Alert variant="destructive">예약이 취소되었습니다</Alert>

Completed (완료) - `#9c27b0`

서비스가 완료된 예약입니다.

<Badge variant="completed">서비스 완료</Badge>
<Alert variant="success">서비스가 완료되었습니다</Alert>

Foundation/iCignal과의 차이점

특징FoundationiCignalCals
Primary Color`#3B82F6``#2196f3` (Blue)`#e91e63` (Pink)
사용 제한없음iCignal 제품 전용Cals 제품 전용
특화 기능범용Analytics, Reports예약 상태 컬러 (5가지)
예제 컨텍스트일반적 사용데이터 분석, 대시보드예약 관리, 일정, 고객
Theme Import`@vortex/ui/theme``@vortex/ui-icignal/theme``@vortex/ui-cals/theme`

설치 및 사용

1. 패키지 설치

# Cals UI 패키지 설치
npm install @vortex/ui-cals
# 또는
pnpm add @vortex/ui-cals

2. Theme 설정

Cals 브랜드 컬러를 사용하려면 반드시 Cals theme을 import해야 합니다.

// App.tsx 또는 _app.tsx
import "@vortex/ui-cals/theme";

3. 컴포넌트 사용

import { Button, Badge, Card } from "@vortex/ui-cals";
 
export default function BookingPage() {
  return (
    <Card>
      <h2>예약 관리</h2>
      <Badge variant="available">예약 가능</Badge>
      <Button variant="primary">예약하기</Button>
    </Card>
  );
}

CLI를 통한 컴포넌트 추가

Vortex CLI를 사용하여 개별 컴포넌트를 프로젝트에 추가할 수 있습니다.

# Cals Button 컴포넌트 추가
npx @vortex/cli add button --package cals
 
# 여러 컴포넌트 동시 추가
npx @vortex/cli add button input card --package cals

컴포넌트 카테고리

Basic (기본 컴포넌트) - 6개

Form (폼 컴포넌트) - 5개

Layout (레이아웃 컴포넌트) - 4개

Feedback (피드백 컴포넌트) - 5개

Data Display (데이터 표시 컴포넌트) - 4개

Navigation (네비게이션 컴포넌트) - 3개

예약 관리 시스템 예제

예약 캘린더

import { Card, Badge, Button } from "@vortex/ui-cals";
 
export default function BookingCalendar() {
  return (
    <Card>
      <h3>2024년 1월 15일</h3>
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <span>10:00 - 11:00</span>
          <Badge variant="available">예약 가능</Badge>
          <Button size="sm">예약</Button>
        </div>
        <div className="flex items-center justify-between">
          <span>11:00 - 12:00</span>
          <Badge variant="confirmed">예약 확정</Badge>
        </div>
        <div className="flex items-center justify-between">
          <span>14:00 - 15:00</span>
          <Badge variant="pending">승인 대기</Badge>
        </div>
      </div>
    </Card>
  );
}

고객 예약 목록

import { Table, Badge, Button } from "@vortex/ui-cals";
 
export default function BookingList() {
  return (
    <Table>
      <thead>
        <tr>
          <th>고객명</th>
          <th>예약 시간</th>
          <th>상태</th>
          <th>액션</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>김예약</td>
          <td>2024-01-15 10:00</td>
          <td>
            <Badge variant="confirmed">예약 확정</Badge>
          </td>
          <td>
            <Button size="sm">상세보기</Button>
          </td>
        </tr>
        <tr>
          <td>이고객</td>
          <td>2024-01-15 14:00</td>
          <td>
            <Badge variant="pending">승인 대기</Badge>
          </td>
          <td>
            <Button size="sm" variant="primary">
              승인
            </Button>
          </td>
        </tr>
        <tr>
          <td>박서비스</td>
          <td>2024-01-10 10:00</td>
          <td>
            <Badge variant="completed">서비스 완료</Badge>
          </td>
          <td>
            <Button size="sm">리뷰 보기</Button>
          </td>
        </tr>
      </tbody>
    </Table>
  );
}

디자인 가이드

예약 상태별 UI 가이드

  1. Available (예약 가능)

    • 초록색 (#4caf50) 사용
    • 예약 버튼 활성화
    • 명확한 CTA 제공

  2. Pending (승인 대기)

    • 주황색 (#ff9800) 사용
    • “승인” 또는 “거절” 액션 제공
    • 대기 시간 표시 권장

  3. Confirmed (예약 확정)

    • 파란색 (#03a9f4) 사용
    • “취소” 액션 제공
    • 예약 정보 명확히 표시

  4. Cancelled (예약 취소)

    • 빨간색 (#f44336) 사용
    • 취소 사유 표시 권장
    • “다시 예약” 액션 제공

  5. Completed (서비스 완료)

    • 보라색 (#9c27b0) 사용
    • 리뷰/평가 액션 제공
    • 완료 일시 표시

접근성

모든 Cals Components는 WCAG 2.1 AA 기준을 준수합니다:

  • ✅ 시맨틱 HTML 사용
  • ✅ 적절한 ARIA 속성 적용
  • ✅ 키보드 네비게이션 지원
  • ✅ 스크린 리더 호환성
  • ✅ 색상 대비 4.5:1 이상

예약 상태 컬러 접근성:

  • 색상만으로 상태를 구분하지 않음
  • 텍스트 레이블 병행 사용
  • 아이콘으로 추가 정보 제공

관련 리소스

Last updated on
ComponentsAvatar