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 폭.

3.6 KiB Raw Permalink Blame History