# WACE PLM — Modal Design System

> 이 파일은 Claude Code(`CLAUDE.md`)와 Cursor(`.cursor/rules/modal-design.mdc`)에서 자동 참조됩니다.
> **모달 패턴만** 정의합니다. Designer 페이지 레이아웃은 변경하지 않습니다.

---

## 1. 모달 Shell 구조

```tsx
<Dialog open={open} onOpenChange={onOpenChange}>
  <DialogContent className="max-w-[{SIZE}] h-[80vh] overflow-hidden flex flex-col p-0 [&>button]:hidden">
    <DialogTitle className="sr-only">{title}</DialogTitle>
    <DialogDescription className="sr-only">{description}</DialogDescription>

    {/* Header */}
    <div className="px-6 py-4 border-b border-border flex items-center justify-between">
      <div className="flex items-center gap-2">
        <{Icon} className="w-4 h-4 text-blue-600" />
        <h2 className="text-base font-semibold text-foreground">{title}</h2>
      </div>
      <Button variant="ghost" size="icon" onClick={() => onOpenChange(false)} className="w-8 h-8">
        <X className="w-4 h-4" />
      </Button>
    </div>

    {/* Tab (선택) */}
    {/* → Section 2 참조 */}

    {/* Content */}
    <div className="flex-1 overflow-y-auto px-6 py-4">
      {/* 콘텐츠 */}
    </div>

    {/* Footer */}
    <div className="px-6 py-4 border-t border-border flex items-center justify-end gap-2">
      <Button variant="outline" onClick={() => onOpenChange(false)}>취소</Button>
      <Button className="bg-blue-600 hover:bg-blue-700">저장</Button>
    </div>
  </DialogContent>
</Dialog>
```

### 사이즈 변형

| 용도 | className |
|------|-----------|
| 기본 (512px) | `max-w-lg` |
| 중간 (672px) | `max-w-2xl` |
| 넓음 (800px) | `max-w-[800px]` |
| 최대 (1024px) | `max-w-5xl` |

---

## 2. 탭 패턴 (모달 내부)

```tsx
<div className="mx-6 mt-3">
  <div className="h-9 bg-muted/30 rounded-lg p-0.5 inline-flex">
    {tabs.map(tab => (
      <button
        key={tab.value}
        onClick={() => setActiveTab(tab.value)}
        className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-1.5 ${
          activeTab === tab.value
            ? "bg-blue-50 text-blue-700 shadow-sm"
            : "bg-transparent text-foreground hover:text-foreground/80"
        }`}
      >
        <tab.Icon className="w-3.5 h-3.5" />
        {tab.label}
      </button>
    ))}
  </div>
</div>
```

- shadcn `<Tabs>` 컴포넌트 **사용 금지** — 위 커스텀 버튼 패턴 사용
- 활성 탭: `bg-blue-50 text-blue-700 shadow-sm`
- 비활성 탭: `bg-transparent text-foreground`

---

## 3. 섹션 패턴

### 정보 섹션 (강조, Teal)

```tsx
<div className="bg-teal-50 border border-teal-200 rounded-xl p-4">
  {/* 데이터 소스, 정보 입력 등 주요 섹션 */}
</div>
```

### 일반 섹션 (흰색)

```tsx
<div className="bg-white border border-border rounded-xl p-4 space-y-4">
  {/* 설정, 목록 등 */}
</div>
```

---

## 4. 폼 필드 패턴

```tsx
{/* Label + Input */}
<div className="space-y-2">
  <Label className="text-xs font-medium text-foreground">라벨</Label>
  <Input className="h-9 text-sm" placeholder="..." />
</div>

{/* Label + Select */}
<div className="space-y-2">
  <Label className="text-xs font-medium text-foreground">라벨</Label>
  <Select>
    <SelectTrigger className="h-9 text-sm">
      <SelectValue placeholder="선택하세요" />
    </SelectTrigger>
    <SelectContent>...</SelectContent>
  </Select>
</div>

{/* 읽기 전용 Input */}
<div className="space-y-2">
  <Label className="text-xs font-medium text-muted-foreground">라벨 (자동 감지)</Label>
  <Input className="h-9 text-sm bg-muted" readOnly />
</div>
```

- 필드 간격: `space-y-3`
- Label: `text-xs font-medium`
- Input/Select 높이: `h-9`

---

## 5. 버튼 규칙 (모달 내)

| 위치 | variant | 용도 |
|------|---------|------|
| Footer 취소 | `outline` | 닫기, 취소 |
| Footer 저장 | `className="bg-blue-600 hover:bg-blue-700"` | 저장, 확인 |
| Footer 삭제 | `variant="destructive"` | 삭제 확인 |
| 콘텐츠 내 추가 | `variant="outline" size="sm" className="w-full gap-2"` | 행/항목 추가 |
| 콘텐츠 내 아이콘 | `variant="ghost" size="sm"` | 인라인 액션 |
| 삭제 아이콘 | `variant="ghost" size="sm" className="text-destructive hover:text-destructive hover:bg-destructive/10"` | 인라인 삭제 |

---

## 6. 오버레이 & 애니메이션

- 오버레이: `rgba(0, 0, 0, 0.6)` — globals.css에 이미 전역 설정됨
- 모달 열기: `fade-in 200ms + zoom-in-95` (shadcn 기본)
- 모달 닫기: `fade-out 150ms + zoom-out-95` (shadcn 기본)
- 탭 전환: 애니메이션 없음 (즉시)

---

## 7. 아이콘 규칙 (모달 내)

| 위치 | 크기 | 색상 |
|------|------|------|
| 헤더 타이틀 아이콘 | `w-4 h-4` (16px) | `text-blue-600` |
| 탭 내부 아이콘 | `w-3.5 h-3.5` (14px) | 탭 상태에 따라 자동 |
| 닫기 버튼 X | `w-4 h-4` (16px) | 기본 foreground |
| 콘텐츠 내 액션 아이콘 | `w-3 h-3` (12px) | `text-muted-foreground` |
| 행 추가 버튼 아이콘 | `w-3.5 h-3.5` (14px) | 기본 |

---

## 8. 접근성 필수 사항

```tsx
{/* DialogContent 내부 반드시 포함 */}
<DialogTitle className="sr-only">{모달 목적 설명}</DialogTitle>
<DialogDescription className="sr-only">{상세 설명}</DialogDescription>
```

- Escape 키로 닫기: shadcn Dialog 기본 제공
- 포커스 트랩: shadcn Dialog 기본 제공
- 닫기 버튼에 `aria-label` 불필요 (shadcn 처리)