Divider

시각적 구분자 역할을 하며, 콘텐츠 간의 구획을 명확히 나누는 데 사용하는 컴포넌트예요.

주문 내역

배송 정보

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/divider.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/divider.json

class-variance-authority 를 설치하고 아래 코드를 components/ui/divider.tsx 에 복사해요.

components/ui/divider.tsx

/** * @title Divider * @description 시각적 구분자 역할을 하며, 콘텐츠 간의 구획을 명확히 나누는 데 사용하는 컴포넌트예요. */import * as React from 'react';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';// SEED Rootage spec: divider.yaml (thickness 1px, $color.stroke.neutral-muted 기본)const dividerVariants = cva('m-0 box-border block shrink-0 border-0 border-solid bg-transparent', {  variants: {    tone: {      neutralMuted: 'border-stroke-neutral-muted',      neutralSubtle: 'border-stroke-neutral-subtle',    },    orientation: {      horizontal: 'h-0 w-auto self-stretch',      vertical: 'h-auto w-0 self-stretch',    },    inset: {      true: '',      false: '',    },  },  compoundVariants: [    { orientation: 'horizontal', inset: true, className: 'mx-x4' },    { orientation: 'vertical', inset: true, className: 'my-x4' },  ],  defaultVariants: {    tone: 'neutralMuted',    orientation: 'horizontal',    inset: false,  },});export interface DividerProps  extends Omit<React.ComponentProps<'hr'>, 'color'>,    VariantProps<typeof dividerVariants> {  /**   * 렌더링할 요소. `hr` 은 스크린 리더가 구분선으로 읽어요.   * 장식용이면 `div` 를, 목록 안이면 `li` 를 사용해요.   */  as?: 'hr' | 'div' | 'li';  /** 선 두께(px). */  thickness?: number;}function Divider({  as: Comp = 'hr',  className,  tone,  orientation,  inset,  thickness = 1,  style,  role,  ...props}: DividerProps) {  const isVertical = orientation === 'vertical';  // hr 은 기본이 horizontal. 그 외 방향이거나, hr 이 아닌데 role=separator 면 aria-orientation 을 명시해요.  const needsOrientation =    (Comp === 'hr' && isVertical && (role === undefined || role === 'separator')) ||    (Comp !== 'hr' && role === 'separator');  const Element = Comp as 'hr';  return (    <Element      data-slot="divider"      data-orientation={orientation ?? 'horizontal'}      role={role}      aria-orientation={needsOrientation ? (orientation ?? 'horizontal') : undefined}      className={cn(dividerVariants({ tone, orientation, inset }), className)}      style={{ [isVertical ? 'borderRightWidth' : 'borderBottomWidth']: thickness, ...style }}      {...props}    />  );}export { Divider, dividerVariants };

Anatomy

$color.stroke.neutral-muted 또는 $color.stroke.neutral-subtle 컬러 토큰으로 채워진 1px 레이어로 구성되며, 필요에 따라 Inset 레이아웃을 표시할 수 있어요.

Properties

Tone

Neutral Muted: 의미 단위가 바뀌는 경계를 나눠요. 섹션과 섹션 사이, 헤더와 본문 경계처럼 한 화면에 한두 번만 등장하는 구분에 사용해요.
Neutral Subtle: 반복되는 같은 성격의 항목 사이를 나눠요. 리스트 아이템, 테이블 행, 설정 메뉴 항목처럼 한 화면에 여러 번 등장하는 구분에 사용해요.

필요하면 className 으로 다른 stroke 토큰(border-stroke-*)을 넣어 사용할 수 있어요.

Neutral Muted

Neutral Subtle

Orientation

세로로 쌓이는 레이아웃에서는 Horizontal을, 가로로 나열되는 레이아웃에서는 Vertical을 사용해요.

최근 본 상품

찜한 상품

판매중

예약중

거래완료

Inset

전체 너비를 차지하지 않고, 양옆 Gutter(16px)만큼 안쪽 여백을 두고 콘텐츠 영역 안에 배치해요. Vertical 방향에서는 위아래에 여백이 생겨요.

알림 설정
계정 관리
고객센터

Thickness

기본 두께는 1px이에요. 꼭 필요한 경우에만 thickness 로 두께를 바꿔요.

1px

2px

4px

Guidelines

적절한 시각적 구분자 선택하기

화면 안의 콘텐츠를 구분하는 방식으로는 Inset Divider, Full-width Divider, 그리고 Basement 레이어 위에 Default 레이어를 올려 8px 간격을 주는 세 가지 방법이 있어요. 각 방식은 사용 목적과 맥락이 다르므로 상황에 맞게 골라요.

구분 방식	강도	사용 상황
Inset Divider	약함	같은 그룹 안에서 내용을 구분할 때 사용해요.
Full-width Divider	중간	그룹을 구분할 때 사용해요. 액션 영역을 구분하는 용도로도 활용할 수 있어요.
8px Gap	강함	기존 내용과 크게 구분되는 내용을 표시할 때 사용해요.

8px Divider는 존재하지 않아요. Basement 레이어(bg-bg-layer-basement) 위에 Default 레이어(bg-bg-layer-default)를 올리고 그 사이에 간격을 두는 방식으로 구현해요.

불필요한 Divider 사용하지 않기

반복되는 레이아웃(예: 리스트)에서는 요소 간 구분이 자연스럽게 이뤄지므로 Divider가 필요하지 않을 수 있어요. Divider를 쓰기 전에 꼭 필요한지 검토해요.

알림 설정계정 관리고객센터

Do· 여백만으로 구분

여백으로 충분히 구분되면 Divider를 넣지 않아요.

알림 설정계정 관리고객센터

Don't· 모든 항목 사이에 Divider

Divider는 꼭 필요한 경우에만 사용해요.

마지막 Divider는 표시하지 않기

Divider는 맥락을 구분하기 위해 콘텐츠 사이에 들어가는 요소예요. 화면의 마지막 섹션이나 요소 아래에는 Divider를 표시하지 않아요.

주문 내역배송 정보

Do· 콘텐츠 사이에만

마지막 섹션 아래에는 Divider가 없어요.

주문 내역배송 정보

Don't· 마지막에도 Divider

마지막 섹션의 Divider는 표시하지 않아요.

Vertical Divider

Vertical 방향 Divider는 가로 방향 레이아웃에서 단을 구분할 때 사용할 수 있어요.

스크린 리더

Divider는 기본으로 <hr /> 을 렌더링해요. <hr /> 은 의미를 가진 구분선이라 스크린 리더가 "구분선"으로 읽어요.

의미 없는 장식 요소라면 as="div" 로 렌더링해서 스크린 리더가 읽지 않게 해요.
<li> 처럼 <hr /> 이 아닌 요소로 렌더링하면서 스크린 리더가 읽어야 한다면 role="separator" 를 지정해요. 이때 aria-orientation 은 자동으로 붙어요.

/** * @title Divider * @description 시각적 구분자 역할을 하며, 콘텐츠 간의 구획을 명확히 나누는 데 사용하는 컴포넌트예요. */ import * as React from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; // SEED Rootage spec: divider.yaml (thickness 1px, $color.stroke.neutral-muted 기본) const dividerVariants = cva('m-0 box-border block shrink-0 border-0 border-solid bg-transparent', { variants: { tone: { neutralMuted: 'border-stroke-neutral-muted', neutralSubtle: 'border-stroke-neutral-subtle', }, orientation: { horizontal: 'h-0 w-auto self-stretch', vertical: 'h-auto w-0 self-stretch', }, inset: { true: '', false: '', }, }, compoundVariants: [ { orientation: 'horizontal', inset: true, className: 'mx-x4' }, { orientation: 'vertical', inset: true, className: 'my-x4' }, ], defaultVariants: { tone: 'neutralMuted', orientation: 'horizontal', inset: false, }, }); export interface DividerProps extends Omit<React.ComponentProps<'hr'>, 'color'>, VariantProps<typeof dividerVariants> { /** * 렌더링할 요소. `hr` 은 스크린 리더가 구분선으로 읽어요. * 장식용이면 `div` 를, 목록 안이면 `li` 를 사용해요. */ as?: 'hr' | 'div' | 'li'; /** 선 두께(px). */ thickness?: number; } function Divider({ as: Comp = 'hr', className, tone, orientation, inset, thickness = 1, style, role, ...props }: DividerProps) { const isVertical = orientation === 'vertical'; // hr 은 기본이 horizontal. 그 외 방향이거나, hr 이 아닌데 role=separator 면 aria-orientation 을 명시해요. const needsOrientation = (Comp === 'hr' && isVertical && (role === undefined || role === 'separator')) || (Comp !== 'hr' && role === 'separator'); const Element = Comp as 'hr'; return ( <Element data-slot="divider" data-orientation={orientation ?? 'horizontal'} role={role} aria-orientation={needsOrientation ? (orientation ?? 'horizontal') : undefined} className={cn(dividerVariants({ tone, orientation, inset }), className)} style={{ [isVertical ? 'borderRightWidth' : 'borderBottomWidth']: thickness, ...style }} {...props} /> ); } export { Divider, dividerVariants };

/** * @title Divider * @description 시각적 구분자 역할을 하며, 콘텐츠 간의 구획을 명확히 나누는 데 사용하는 컴포넌트예요. */import * as React from 'react';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';// SEED Rootage spec: divider.yaml (thickness 1px, $color.stroke.neutral-muted 기본)const dividerVariants = cva('m-0 box-border block shrink-0 border-0 border-solid bg-transparent', { variants: { tone: { neutralMuted: 'border-stroke-neutral-muted', neutralSubtle: 'border-stroke-neutral-subtle', }, orientation: { horizontal: 'h-0 w-auto self-stretch', vertical: 'h-auto w-0 self-stretch', }, inset: { true: '', false: '', }, }, compoundVariants: [ { orientation: 'horizontal', inset: true, className: 'mx-x4' }, { orientation: 'vertical', inset: true, className: 'my-x4' }, ], defaultVariants: { tone: 'neutralMuted', orientation: 'horizontal', inset: false, },});export interface DividerProps extends Omit<React.ComponentProps<'hr'>, 'color'>, VariantProps<typeof dividerVariants> { /** * 렌더링할 요소. `hr` 은 스크린 리더가 구분선으로 읽어요. * 장식용이면 `div` 를, 목록 안이면 `li` 를 사용해요. */ as?: 'hr' | 'div' | 'li'; /** 선 두께(px). */ thickness?: number;}function Divider({ as: Comp = 'hr', className, tone, orientation, inset, thickness = 1, style, role, ...props}: DividerProps) { const isVertical = orientation === 'vertical'; // hr 은 기본이 horizontal. 그 외 방향이거나, hr 이 아닌데 role=separator 면 aria-orientation 을 명시해요. const needsOrientation = (Comp === 'hr' && isVertical && (role === undefined || role === 'separator')) || (Comp !== 'hr' && role === 'separator'); const Element = Comp as 'hr'; return ( <Element data-slot="divider" data-orientation={orientation ?? 'horizontal'} role={role} aria-orientation={needsOrientation ? (orientation ?? 'horizontal') : undefined} className={cn(dividerVariants({ tone, orientation, inset }), className)} style={{ [isVertical ? 'borderRightWidth' : 'borderBottomWidth']: thickness, ...style }} {...props} /> );}export { Divider, dividerVariants };

설치Copy Anchor Link

수동 설치

AnatomyCopy Anchor Link

PropertiesCopy Anchor Link

ToneCopy Anchor Link

OrientationCopy Anchor Link

InsetCopy Anchor Link

ThicknessCopy Anchor Link

GuidelinesCopy Anchor Link

적절한 시각적 구분자 선택하기Copy Anchor Link

불필요한 Divider 사용하지 않기Copy Anchor Link

마지막 Divider는 표시하지 않기Copy Anchor Link

Vertical DividerCopy Anchor Link

스크린 리더Copy Anchor Link

PropsCopy Anchor Link

On this page

설치