Separator

관련성이 다른 인접 영역을 낮은 강조도로 구분합니다.

목적

Separator는 가까운 콘텐츠 그룹 사이의 관계와 경계를 낮은 강조도로 보여준다. 구조를 이해시키는 보조 수단이며, 제목과 spacing만으로 충분한 곳에 선을 반복해서 추가하지 않는다.

선택 기준

목록 group, menu group, header와 body처럼 의미가 다른 인접 영역을 구분할 때 사용한다.
단순히 여백이 부족해 보인다는 이유로 사용하지 않는다.
강한 section 전환은 heading과 spacing을 먼저 사용한다.
표의 행 경계처럼 component가 이미 제공하는 border를 중복하지 않는다.

실제 패키지 렌더링

기본 사용 예시

예시 데이터

기본 정보

학습 일정

구조

Separator 하나를 구분할 두 영역 사이에 둔다. 기본은 horizontal이며 부모의 전체 너비를 사용한다. Vertical separator는 높이를 제공하는 flex row 등 명확한 parent 안에서 사용한다.

변형과 크기

orientation은 horizontal 또는 vertical이며 기본값은 horizontal이다. Horizontal은 1px 높이와 전체 너비, vertical은 1px 너비와 부모 높이를 사용한다. 색은 semantic border를 따른다.

상태와 동작

Separator는 상호작용하지 않으며 hover, focus, selected 상태가 없다. 기본 decorative=true이므로 보조 기술의 문서 구조에는 포함되지 않는다. 의미 있는 구분선으로 읽혀야 하는 경우에만 decorative={false}를 사용한다.

콘텐츠

Separator 안에는 text나 아이콘을 넣지 않는다. 또는처럼 글자가 있는 구분은 별도의 layout과 text semantics로 구성한다.

접근성

시각적 장식이라면 기본 decorative를 유지한다. section의 의미 구분을 separator 하나에만 의존하지 않고 heading과 문서 구조를 함께 사용한다. decorative={false}일 때 orientation이 실제 시각 방향과 일치해야 한다.

좁은 화면과 긴 콘텐츠

responsive layout에서 row가 column으로 바뀌면 vertical Separator를 horizontal로 함께 전환하거나 제거한다. Separator가 콘텐츠보다 더 강한 grid처럼 보이지 않게 반복 횟수를 줄인다.

공개 API

Separator: orientation="horizontal" | "vertical", decorative; 기본값은 각각 horizontal, true

그 밖의 기반 separator props와 className을 전달한다.

예제

import { Separator } from '@classum/dot-design-system/ui';

export function CurriculumMetadata() {
  return (
    <div>
      <div className="py-3">
        <p className="text-sm text-muted-foreground">최근 저장</p>
        <p>오늘 14:32</p>
      </div>
      <Separator />
      <div className="py-3">
        <p className="text-sm text-muted-foreground">현재 버전</p>
        <p>v12</p>
      </div>
    </div>
  );
}

피해야 할 사용

모든 간격마다 Separator를 넣지 않는다.
heading 없이 선만으로 section 의미를 전달하지 않는다.
높이가 없는 parent에서 vertical Separator를 사용하지 않는다.
responsive 방향이 바뀌어도 orientation을 그대로 두지 않는다.
이미 border가 있는 행 사이에 선을 중복하지 않는다.

목적