Skip to Content
ComponentsFoundationBasicDivider

Divider

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

개요

Divider는 콘텐츠 영역을 시각적으로 구분하는 컴포넌트입니다. 수평 또는 수직 방향으로 표시할 수 있으며, 텍스트를 포함할 수도 있습니다.

주요 특징:

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

사용 사례:

  • 섹션 구분
  • 리스트 아이템 구분
  • 폼 그룹 구분
  • 레이아웃 영역 구분

설치

npx @vortex/cli add separator --package foundation

기본 사용법

import { Separator } from "@vortex/ui-foundation";
 
export default function Example() {
  return (
    <div>
      <p>Content 1</p>
      <Separator />
      <p>Content 2</p>
    </div>
  );
}

Variants (변형)

수평 구분선 (기본)

<Separator orientation="horizontal" />

수직 구분선

<div className="flex items-center h-10">
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>

스타일

Solid (기본)

<Separator style="solid" />

Dashed

<Separator style="dashed" />

Dotted

<Separator style="dotted" />

텍스트가 있는 구분선

<Separator>
  <span className="px-md text-sm text-gray-500">또는</span>
</Separator>

Props API

PropTypeDefaultDescription
orientation’horizontal’ | ‘vertical''horizontal’구분선 방향
style’solid’ | ‘dashed’ | ‘dotted''solid’구분선 스타일
classNamestring-추가 CSS 클래스
childrenReactNode-구분선 내 텍스트

접근성

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

ARIA 속성:

  • role="separator" (자동 적용)
  • aria-orientation (vertical일 때)

스크린 리더 지원:

  • 구분선으로 인식됨
  • 텍스트 내용 읽힘

예제

예제 1: 로그인 폼 구분

export default function LoginForm() {
  return (
    <div className="space-y-md">
      <Button variant="outline" className="w-full">
        Google로 로그인
      </Button>
      <Separator>
        <span className="px-md text-sm text-gray-500">또는</span>
      </Separator>
      <Input placeholder="이메일" />
      <Input type="password" placeholder="비밀번호" />
      <Button className="w-full">로그인</Button>
    </div>
  );
}

예제 2: 리스트 구분

export default function SettingsList() {
  return (
    <div>
      <div className="py-md">
        <h3>프로필 설정</h3>
      </div>
      <Separator />
      <div className="py-md">
        <h3>알림 설정</h3>
      </div>
      <Separator />
      <div className="py-md">
        <h3>보안 설정</h3>
      </div>
    </div>
  );
}

관련 컴포넌트

  • Card - 카드 내 구분
  • List - 리스트 아이템 구분
Last updated on
ButtonSkeleton