# 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` 확인.
- 미확인: 사이드바 화면.