90 lines
3.6 KiB
Markdown
90 lines
3.6 KiB
Markdown
# Alert
|
|
|
|
현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Alert 고유의 API·Token·상태·결정만 기록한다.
|
|
|
|
## 1. 상태
|
|
|
|
| 항목 | 내용 |
|
|
|---|---|
|
|
| 구현 상태 | 구현 완료 (현재 HM 규격) |
|
|
| 기준일 | 2026-10-02 |
|
|
| 기반 | shadcn/ui Alert (CVA, grid + 선행 svg) |
|
|
| 대표 Story | `Components/Feedback/Alert` → `All` (이름 "Alert") |
|
|
| 보류 | 아래 §11 |
|
|
|
|
## 2. 적용 근거
|
|
|
|
- **참고 근거**: ui-viz 기존 테스트 규격에는 Alert 규격이 없다(후보 목록, 상태 색 success/warning/information 미정). Toast와 별개로 참고만 했다.
|
|
- **현재 HM 규격**: §3~§4.
|
|
- **구현 방식**: shadcn Alert 구조(`role="alert"`, 선행 svg 아이콘 grid, `AlertTitle`, `AlertDescription`)를 유지하고 `data-variant`로 theme CSS를 선택.
|
|
- **보류**: §11.
|
|
|
|
## 3. 기본 규격
|
|
|
|
| 항목 | 값 |
|
|
|---|---|
|
|
| Container | border 1px, radius 4px, padding `12px 16px`, 면 `--hm-sem-bg-surface` |
|
|
| Icon | 16px (소비자가 lucide 등 svg를 첫 자식으로), 컬럼 gap 12px |
|
|
| Title | 14 / 20 / 500 |
|
|
| Description | 14 / 20 / 400, 색 `--hm-sem-fg-secondary` |
|
|
| Close action | 없음 |
|
|
|
|
## 4. 상태 규격
|
|
|
|
| variant | border | Title·icon 색 |
|
|
|---|---|---|
|
|
| `default` | `--hm-sem-stroke-default` | `--hm-sem-fg-primary` |
|
|
| `destructive` | `--hm-sem-action-destructive` | `--hm-sem-action-destructive` |
|
|
|
|
아이콘이 없으면 텍스트가 왼쪽에서 시작한다.
|
|
|
|
## 5. API
|
|
|
|
```
|
|
Alert: variant?: "default" | "destructive" 기본 "default"
|
|
AlertTitle, AlertDescription
|
|
```
|
|
`Alert`는 `role="alert"`로 렌더. 출력 속성: `data-slot="alert|alert-title|alert-description"`, `data-variant`.
|
|
|
|
## 6. Token
|
|
|
|
`packages/ui/src/theme/alert.css` (`--hm-alert-*`): `radius`, `padding-x/y`, `border-width`, `icon-size`, Title/Description typography, variant별 `{default,destructive}-{background,border-color,title-color,description-color}`. Semantic 참조. Primitive 신규 추가 없음.
|
|
|
|
## 7. shadcn / Radix에서 유지한 항목
|
|
|
|
`role="alert"`, grid 레이아웃(`has-[>svg]`), `data-slot`, `cn(..., className)`, `AlertTitle` line-clamp.
|
|
|
|
## 8. HM에서 변경한 항목
|
|
|
|
shadcn `rounded-lg border px-4 py-3 text-sm`, destructive의 색 class 제거 → theme CSS. 아이콘을 16px로 고정.
|
|
|
|
## 9. Storybook
|
|
|
|
대표 Story `All`: `default`, `destructive`, `no-icon`, `title-only`, `long`. verification: `Default`, `Destructive`.
|
|
|
|
## 10. 사용자 확정 결정
|
|
|
|
2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 이 컴포넌트에 대한 개별 수치 결정은 없다.
|
|
|
|
## 11. 미확정 / 보류
|
|
|
|
- success / warning / information variant: HM 상태 색 미정이라 만들지 않았다(neutral·destructive만).
|
|
- 닫기 버튼, action 슬롯: 없음. Toast와 혼합하지 않는다.
|
|
- 수치(12/16 padding, 16px 아이콘)는 현재 HM 규격이며 디자인 확정 시 재검토.
|
|
|
|
## 12. 관련 파일
|
|
|
|
```
|
|
packages/ui/src/components/ui/alert.tsx
|
|
packages/ui/src/theme/alert.css
|
|
packages/ui/src/theme.css (import)
|
|
packages/ui/src/index.ts (export Alert, AlertTitle, AlertDescription)
|
|
src/components/alert.stories.tsx
|
|
```
|
|
|
|
## 13. 검증 상태
|
|
|
|
- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
|
|
- computed style: `role=alert`, border 1px, radius 4px, padding `12px 16px`, Title 14px/500, destructive border·Title `rgb(211,47,47)`, 아이콘 16px, 아이콘 유무에 따른 Title 시작 위치(45px / 17px) 확인.
|
|
- 미확인: 사이드바 화면, 390px 폭.
|