이로울 | 포트폴리오

Divider

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

Live Preview

계정으로 로그인

이메일과 비밀번호를 입력하세요

또는

홈둘러보기설정

Divider

의미적 구분선입니다. 가로/세로 방향과 가운데 라벨 슬롯을 지원합니다.

가로 — 기본 / 라벨

label을 주면 '선 — 라벨 — 선' 형태가 됩니다.

Source Code

<Divider />
<Divider label="또는" />

또는

Live Preview

세로

부모가 flex일 때 self-stretch로 높이를 채웁니다.

Source Code

<div className="flex items-center gap-4">
  <span>홈</span>
  <Divider orientation="vertical" />
  <span>설정</span>
</div>

홈둘러보기설정

Live Preview

Implementation

제작 코드

이 컴포넌트가 실제로 어떻게 구현되어 있는지 — 본체 .tsx 파일을 그대로 보여줍니다. variant 매핑·접근성 처리·forwardRef 패턴 등 디테일을 그대로 확인할 수 있어요.

Dividertypescript

/**
 * Divider 컴포넌트
 *
 * 의미적 구분선. 가로/세로 + 가운데 라벨 슬롯을 지원합니다.
 * - 가로: 기본 1px 라인, label을 주면 "선 — 라벨 — 선" 형태.
 * - 세로: 부모가 flex일 때 self-stretch로 높이를 채우는 1px 세로선.
 */

import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

export interface DividerProps {
  orientation?: 'horizontal' | 'vertical';
  /** 가로 방향일 때 가운데 표시할 라벨 (선택) */
  label?: ReactNode;
  className?: string;
}

export function Divider({ orientation = 'horizontal', label, className }: DividerProps) {
  if (orientation === 'vertical') {
    return (
      <span
        role="separator"
        aria-orientation="vertical"
        className={cn('inline-block w-px min-h-[1em] self-stretch bg-slate-200', className)}
      />
    );
  }

  if (label) {
    return (
      <div role="separator" className={cn('flex items-center gap-3', className)}>
        <span className="h-px flex-1 bg-slate-200" />
        <span className="shrink-0 text-xs font-medium text-slate-400">{label}</span>
        <span className="h-px flex-1 bg-slate-200" />
      </div>
    );
  }

  return <hr role="separator" className={cn('h-px w-full border-0 bg-slate-200', className)} />;
}