19 lines
1.0 KiB
Plaintext
19 lines
1.0 KiB
Plaintext
---
|
|
description: 모달(Dialog) 컴포넌트 구현 시 WACE 디자인 시스템 적용
|
|
globs: **/*.tsx
|
|
alwaysApply: false
|
|
---
|
|
|
|
모달 컴포넌트 구현 시 반드시 @design-system.md 의 패턴을 따를 것.
|
|
|
|
## 핵심 규칙 요약
|
|
|
|
1. **Shell**: `DialogContent`에 `p-0 [&>button]:hidden flex flex-col h-[80vh] overflow-hidden` 필수
|
|
2. **접근성**: `<DialogTitle className="sr-only">`, `<DialogDescription className="sr-only">` 반드시 포함
|
|
3. **헤더**: `px-6 py-4 border-b` + 아이콘(`w-4 h-4 text-blue-600`) + 제목(`text-base font-semibold`) + X 닫기 버튼
|
|
4. **탭**: shadcn `<Tabs>` 사용 금지 → `@design-system.md` Section 2의 커스텀 버튼 패턴 사용
|
|
5. **콘텐츠**: `flex-1 overflow-y-auto px-6 py-4`
|
|
6. **Footer**: `px-6 py-4 border-t flex justify-end gap-2` + 취소(`outline`) + 저장(`bg-blue-600`)
|
|
7. **폼 필드**: Label `text-xs font-medium` + Input/Select `h-9 text-sm`, 그룹 간격 `space-y-3`
|
|
8. **섹션**: 강조 섹션 `bg-teal-50 border-teal-200 rounded-xl`, 일반 섹션 `bg-white border-border rounded-xl`
|