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