Separator

현재 HM 구현의 기준 문서. 공통 원칙은 docs/guidelines/프로젝트-지침.md(§6, §7), Token 구조 원칙은 테마-토큰-가이드.md를 따른다. 이 문서는 Separator 고유의 API·Token·상태·결정만 기록한다.

1. 상태

항목	내용
구현 상태	구현 완료 (현재 HM 규격)
기준일	2026-10-02
기반	shadcn/ui Separator (Radix `Separator`)
대표 Story	`Components/Data & Display/Separator` → `All` (이름 "Separator")
보류	아래 §11

2. 적용 근거

참고 근거: ui-viz에는 독립 Separator 규격이 없다(컴포넌트별 divider 값만 있다). 참고만 했다.
현재 HM 규격: §3~§4.
구현 방식: Radix Separator의 orientation과 decorative(기본 true, role=none) API를 유지하고 theme CSS로 두께·색을 연결.
보류: §11.

3. 기본 규격

항목	값
Thickness	1px (`--hm-separator-thickness`)
Color	`--hm-separator-color` → Semantic `--hm-sem-stroke-input-default` (`#DEDBD2`)
Horizontal	높이 1px, 폭 100%
Vertical	폭 1px, `align-self: stretch`, `min-height: 1em` (flex row 안에서 사용)

4. 상태 규격

상태 없음. decorative(기본 true)는 role="none", decorative={false}는 role="separator".

5. API

Radix Separator props 그대로 (orientation: "horizontal" 기본 / "vertical", decorative: 기본 true). 출력 속성: data-slot="separator", data-orientation.

6. Token

packages/ui/src/theme/separator.css: --hm-separator-thickness, --hm-separator-color. 현재 공통 --hm-sem-stroke-input-default를 참조한다. Component Token은 독립적으로 유지한다.

7. shadcn / Radix에서 유지한 항목

Radix 접근성(decorative, aria-orientation), data-slot, cn(..., className), shrink-0.

8. HM에서 변경한 항목

shadcn의 bg-border, h-px/w-px class를 제거하고 theme CSS가 두께·색을 담당.

9. Storybook

대표 Story All: horizontal, vertical, semantic(decorative=false). verification: Horizontal, Vertical.

10. 사용자 확정 결정

2026-10-10: 같은 제목·설명 묶음에서는 제목 아래와 설명 아래에 Separator를 각각 연속으로 사용하지 않고, 필요한 위치 한 곳에만 적용한다. 대표 Story는 제목·설명 묶음 뒤 한 곳에 적용한다. 모든 제목이나 설명에 구분선을 필수로 추가하는 규칙은 아니다. Component 스타일과 API는 유지한다.

2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 이 컴포넌트에 대한 개별 수치 결정은 없다.

11. 미확정 / 보류

구분선 전용 Semantic(stroke.divider 등) 도입: 미결정. 현재 공통 stroke Semantic과 구분할 필요가 생기면 재검토.
텍스트가 들어간 구분선("or"), 두께 변형: 없음.

12. 관련 파일

packages/ui/src/components/ui/separator.tsx
packages/ui/src/theme/separator.css
packages/ui/src/theme.css            (import)
packages/ui/src/index.ts             (export Separator)
src/components/separator.stories.tsx

13. 검증 상태

npm run typecheck, npm run build: 통과(2026-10-02).
computed style: horizontal 높이 1px·폭 100%, vertical 폭 1px·높이 24px(flex row stretch), 색 rgb(222,219,210).
a11y: 기본 role=none, decorative={false}이면 role=separator 확인.
미확인: 사이드바 화면.

3.5 KiB Raw Blame History