Divider

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

개요

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

주요 특징:

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

사용 사례:

iCignal 대시보드 섹션 구분
리포트 영역 구분
분석 결과 그룹 구분
설정 메뉴 구분

설치


npx @vortex/cli add separator --package icignal

기본 사용법


import "@vortex/ui-icignal/theme";
import { Separator } from "@vortex/ui-icignal";
 
export default function Example() {
  return (
    <div>
      <p>데이터 수집 결과</p>
      <Separator />
      <p>데이터 분석 결과</p>
    </div>
  );
}

iCignal 브랜딩

iCignal 특화 사용 가이드

대시보드 섹션 구분:


<div>
  <h2>실시간 모니터링</h2>
  <Separator className="my-lg" />
  <h2>주간 리포트</h2>
  <Separator className="my-lg" />
  <h2>월간 통계</h2>
</div>

분석 결과 그룹 구분:


<Card>
  <div>
    <h3>2024년 1분기</h3>
    <p>분석 데이터...</p>
  </div>
  <Separator />
  <div>
    <h3>2024년 2분기</h3>
    <p>분석 데이터...</p>
  </div>
</Card>

Foundation과의 차이점

속성	Foundation	iCignal
기본 색상	중립적 회색	iCignal 브랜드 계열
사용 맥락	범용 구분선	iCignal 대시보드/리포트 구분

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: iCignal 대시보드 섹션 구분


import "@vortex/ui-icignal/theme";
import { Separator } from "@vortex/ui-icignal";
 
export default function DashboardSections() {
  return (
    <div className="space-y-lg">
      <section>
        <h2 className="text-2xl font-bold">실시간 데이터</h2>
        <p>현재 수집 중인 데이터 현황</p>
      </section>
 
      <Separator />
 
      <section>
        <h2 className="text-2xl font-bold">주간 분석</h2>
        <p>지난 7일간 분석 결과</p>
      </section>
    </div>
  );
}

예제 2: iCignal 리포트 영역 구분


import "@vortex/ui-icignal/theme";
import { Separator } from "@vortex/ui-icignal";
 
export default function ReportSections() {
  return (
    <Card>
      <CardContent>
        <div className="mb-md">
          <h3>데이터 수집</h3>
          <p>총 10,000건 수집 완료</p>
        </div>
 
        <Separator>
          <span className="px-md text-sm text-gray-500">분석 결과</span>
        </Separator>
 
        <div className="mt-md">
          <h3>핵심 인사이트</h3>
          <p>주요 트렌드 분석...</p>
        </div>
      </CardContent>
    </Card>
  );
}