Divider

콘텐츠를 구분하는 구분선 컴포넌트입니다.

개요

Divider는 콘텐츠 영역을 시각적으로 구분하는 컴포넌트입니다. Cals Divider는 Cals 브랜드 컬러를 활용하여 섹션을 명확히 구분합니다.

주요 특징:

수평/수직 구분선
텍스트가 있는 구분선
3가지 스타일 (solid, dashed, dotted)
간격 조절 가능

사용 사례:

Cals 예약 목록 섹션 구분
고객 정보 영역 구분
일정 그룹 구분
설정 메뉴 구분

설치


npx @vortex/cli add separator --package cals

기본 사용법


import "@vortex/ui-cals/theme";
import { Separator } from "@vortex/ui-cals";
 
export default function Example() {
  return (
    <div>
      <p>오늘 예약</p>
      <Separator />
      <p>내일 예약</p>
    </div>
  );
}

🆕 Cals 브랜딩

Cals 특화 사용 가이드

예약 목록 섹션 구분:


<div>
  <h2>오늘 예약</h2>
  <Separator className="my-lg" />
  <h2>이번 주 예약</h2>
  <Separator className="my-lg" />
  <h2>이번 달 예약</h2>
</div>

고객 정보 그룹 구분:


<Card>
  <div>
    <h3>예약 정보</h3>
    <p>2024-01-15 10:00 - 예약 확정</p>
  </div>
  <Separator />
  <div>
    <h3>고객 정보</h3>
    <p>이름: 김예약 | 연락처: 010-1234-5678</p>
  </div>
</Card>

예약 상태별 구분선

예약 상태에 따라 다른 색상의 구분선을 사용할 수 있습니다:


{
  /* 예약 가능 - Available Green */
}
<Separator className="border-green-500" />;
 
{
  /* 승인 대기 - Pending Orange */
}
<Separator className="border-orange-500" />;
 
{
  /* 예약 확정 - Confirmed Blue */
}
<Separator className="border-blue-500" />;
 
{
  /* 예약 취소 - Cancelled Red */
}
<Separator className="border-red-500" />;
 
{
  /* 서비스 완료 - Completed Purple */
}
<Separator className="border-purple-500" />;

🆕 Foundation/iCignal과의 차이점

속성	Foundation	iCignal	Cals
기본 색상	중립적 회색	iCignal 브랜드 계열	Cals 브랜드 계열
사용 맥락	범용 구분선	iCignal 대시보드/리포트	Cals 예약/고객 정보
예약 상태	없음	없음	5가지 상태 색상 지원

Props API

| Prop | Type | Default | Description | | ----------- | --------------- | ----------- | ---------------- | ----------- | ------------- | | orientation | ‘horizontal’ \ | ‘vertical’ | ‘horizontal’ | 구분선 방향 | | style | ‘solid’ \ | ‘dashed’ \ | ‘dotted’ | ‘solid’ | 구분선 스타일 | | className | string | - | 추가 CSS 클래스 | | children | ReactNode | - | 구분선 내 텍스트 |

접근성

Separator 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

`role=“separator”` (자동 적용)
`aria-orientation` (방향 표시)

예제

예제 1: Cals 예약 목록 섹션 구분


import "@vortex/ui-cals/theme";
import { Separator } from "@vortex/ui-cals";
 
export default function BookingSections() {
  return (
    <div className="space-y-lg">
      <section>
        <h2 className="text-2xl font-bold">오늘 예약</h2>
        <p>총 5건의 예약이 있습니다</p>
      </section>
 
      <Separator />
 
      <section>
        <h2 className="text-2xl font-bold">이번 주 예약</h2>
        <p>총 23건의 예약이 있습니다</p>
      </section>
    </div>
  );
}

예제 2: Cals 고객 정보 영역 구분


import "@vortex/ui-cals/theme";
import { Separator } from "@vortex/ui-cals";
 
export default function CustomerSections() {
  return (
    <Card>
      <CardContent>
        <div className="mb-md">
          <h3>예약 정보</h3>
          <p>2024-01-15 10:00 | 헤어컷 + 펌</p>
        </div>
 
        <Separator>
          <span className="px-md text-sm text-gray-500">고객 정보</span>
        </Separator>
 
        <div className="mt-md">
          <h3>김예약 고객님</h3>
          <p>연락처: 010-1234-5678 | 이메일: booking@example.com</p>
        </div>
      </CardContent>
    </Card>
  );
}

예제 3: 예약 상태별 구분선


import "@vortex/ui-cals/theme";
import { Separator, Badge } from "@vortex/ui-cals";
 
export default function BookingStatusSections() {
  return (
    <div className="space-y-md">
      <div>
        <Badge variant="available">예약 가능</Badge>
        <Separator className="my-sm border-green-500" />
        <p>3개의 슬롯이 예약 가능합니다</p>
      </div>
 
      <div>
        <Badge variant="pending">승인 대기</Badge>
        <Separator className="my-sm border-orange-500" />
        <p>2건의 예약이 승인을 기다리고 있습니다</p>
      </div>
 
      <div>
        <Badge variant="confirmed">예약 확정</Badge>
        <Separator className="my-sm border-blue-500" />
        <p>5건의 예약이 확정되었습니다</p>
      </div>
    </div>
  );
}