# 품목 마스터 기반 디자인 표준

## 개요
ItemMasterDataManagement_fixed.tsx를 기준으로 추출한 디자인 표준입니다.
전체 시스템에 이 표준을 적용합니다.

---

## 1. 버튼 디자인 표준

### 1.1 기본 버튼
```tsx
// 주요 액션 버튼 (등록, 저장 등)
<Button size="sm">
  <Plus className="h-4 w-4 mr-2" />
  등록
</Button>

// 보조 액션 버튼 (취소, 닫기 등)
<Button size="sm" variant="outline">
  <X className="h-4 w-4 mr-2" />
  취소
</Button>
```

### 1.2 아이콘 버튼
```tsx
// 편집 버튼
<Button size="sm" variant="ghost" className="h-8 w-8 p-0">
  <Edit className="h-4 w-4" />
</Button>

// 삭제 버튼
<Button size="sm" variant="ghost" className="h-8 w-8 p-0">
  <Trash2 className="h-4 w-4 text-red-500" />
</Button>

// 보기 토글 버튼
<Button size="sm" variant="ghost" className="h-8 w-8 p-0">
  <Eye className="h-4 w-4" />
</Button>
```

### 1.3 버튼 그룹
```tsx
<div className="flex gap-2">
  <Button size="sm" variant="outline">취소</Button>
  <Button size="sm">저장</Button>
</div>
```

---

## 2. 카드 레이아웃 표준

### 2.1 기본 카드
```tsx
<Card>
  <CardHeader>
    <div className="flex items-center justify-between">
      <CardTitle>제목</CardTitle>
      <Button size="sm">
        <Plus className="h-4 w-4 mr-2" />
        추가
      </Button>
    </div>
  </CardHeader>
  <CardContent>
    {/* 내용 */}
  </CardContent>
</Card>
```

### 2.2 설명이 있는 카드
```tsx
<Card>
  <CardHeader>
    <CardTitle>제목</CardTitle>
    <CardDescription>설명 텍스트</CardDescription>
  </CardHeader>
  <CardContent>
    {/* 내용 */}
  </CardContent>
</Card>
```

---

## 3. Empty State 표준

```tsx
<div className="bg-gray-50 border-2 border-dashed border-gray-200 rounded-lg py-16">
  <div className="text-center">
    <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-lg flex items-center justify-center">
      <FileText className="w-8 h-8 text-gray-400" />
    </div>
    <p className="text-gray-600 mb-1">
      데이터가 없습니다
    </p>
    <p className="text-sm text-gray-500">
      추가 버튼을 클릭하여 새로운 항목을 등록하세요
    </p>
  </div>
</div>
```

---

## 4. 테이블 디자인 표준

### 4.1 테이블 헤더
```tsx
<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">NO</TableHead>
      <TableHead>항목명</TableHead>
      <TableHead className="text-right">액션</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {/* 행 */}
  </TableBody>
</Table>
```

### 4.2 테이블 액션 셀
```tsx
<TableCell className="text-right">
  <div className="flex justify-end gap-1">
    <Button size="sm" variant="ghost" className="h-8 w-8 p-0">
      <Edit className="h-4 w-4" />
    </Button>
    <Button size="sm" variant="ghost" className="h-8 w-8 p-0">
      <Trash2 className="h-4 w-4 text-red-500" />
    </Button>
  </div>
</TableCell>
```

---

## 5. 폼 입력 표준

### 5.1 기본 입력 필드
```tsx
<div className="space-y-2">
  <Label>라벨</Label>
  <Input placeholder="입력하세요" />
</div>
```

### 5.2 셀렉트 필드
```tsx
<div className="space-y-2">
  <Label>라벨</Label>
  <Select value={value} onValueChange={setValue}>
    <SelectTrigger>
      <SelectValue placeholder="선택하세요" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="1">옵션 1</SelectItem>
      <SelectItem value="2">옵션 2</SelectItem>
    </SelectContent>
  </Select>
</div>
```

### 5.3 텍스트영역
```tsx
<div className="space-y-2">
  <Label>라벨</Label>
  <Textarea 
    placeholder="입력하세요" 
    className="min-h-[100px]"
  />
</div>
```

### 5.4 폼 그리드
```tsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div className="space-y-2">
    <Label>필드 1</Label>
    <Input />
  </div>
  <div className="space-y-2">
    <Label>필드 2</Label>
    <Input />
  </div>
  <div className="space-y-2">
    <Label>필드 3</Label>
    <Input />
  </div>
</div>
```

---

## 6. 다이얼로그 표준

### 6.1 기본 다이얼로그
```tsx
<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>제목</DialogTitle>
      <DialogDescription>설명</DialogDescription>
    </DialogHeader>
    
    <div className="space-y-4">
      {/* 폼 내용 */}
    </div>
    
    <DialogFooter>
      <Button variant="outline" onClick={() => setIsOpen(false)}>
        취소
      </Button>
      <Button onClick={handleSave}>
        저장
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

### 6.2 큰 다이얼로그
```tsx
<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
    {/* 내용 */}
  </DialogContent>
</Dialog>
```

---

## 7. 탭 구조 표준

```tsx
<Tabs value={activeTab} onValueChange={setActiveTab}>
  <TabsList>
    <TabsTrigger value="tab1">탭 1</TabsTrigger>
    <TabsTrigger value="tab2">탭 2</TabsTrigger>
    <TabsTrigger value="tab3">탭 3</TabsTrigger>
  </TabsList>
  
  <TabsContent value="tab1">
    <Card>
      <CardContent className="pt-6">
        {/* 탭 1 내용 */}
      </CardContent>
    </Card>
  </TabsContent>
  
  <TabsContent value="tab2">
    <Card>
      <CardContent className="pt-6">
        {/* 탭 2 내용 */}
      </CardContent>
    </Card>
  </TabsContent>
</Tabs>
```

---

## 8. 뱃지 표준

### 8.1 상태 뱃지
```tsx
// 성공/완료
<Badge variant="default" className="bg-green-500">완료</Badge>

// 경고
<Badge variant="default" className="bg-yellow-500">대기</Badge>

// 오류
<Badge variant="destructive">오류</Badge>

// 정보
<Badge variant="secondary">정보</Badge>
```

### 8.2 카운트 뱃지
```tsx
<Badge variant="secondary" className="text-xs">
  {count}개
</Badge>
```

---

## 9. 아이콘 사용 표준

### 9.1 아이콘 크기
- 버튼 내부: `className="h-4 w-4"`
- Empty State: `className="w-8 h-8"` (컨테이너: `w-16 h-16`)
- 큰 아이콘: `className="h-6 w-6"`

### 9.2 아이콘 색상
- 기본: `text-current` (상위 요소 색상 상속)
- 삭제: `text-red-500`
- 비활성: `text-gray-400`
- 강조: `text-primary`

### 9.3 아이콘 spacing
- 버튼 내 텍스트와 함께: `className="h-4 w-4 mr-2"`
- 단독 사용: `className="h-4 w-4"`

---

## 10. 레이아웃 spacing 표준

### 10.1 섹션 간격
```tsx
<div className="space-y-6">
  <Section1 />
  <Section2 />
  <Section3 />
</div>
```

### 10.2 요소 간격
```tsx
// 폼 필드
<div className="space-y-4">
  <FormField1 />
  <FormField2 />
</div>

// 버튼 그룹
<div className="flex gap-2">
  <Button />
  <Button />
</div>
```

### 10.3 그리드 간격
```tsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* 그리드 아이템 */}
</div>
```

---

## 11. 색상 체계

### 11.1 배경 색상
- 메인 배경: `bg-background`
- 카드 배경: `bg-card`
- 보조 배경: `bg-gray-50`
- Empty State 배경: `bg-gray-50` + `border-2 border-dashed border-gray-200`

### 11.2 텍스트 색상
- 메인 텍스트: `text-foreground`
- 보조 텍스트: `text-muted-foreground`
- 회색 텍스트: `text-gray-500`, `text-gray-600`

### 11.3 강조 색상
- Primary: `bg-primary text-primary-foreground`
- Secondary: `bg-secondary text-secondary-foreground`
- Destructive: `bg-destructive text-destructive-foreground`

---

## 12. 반응형 패턴

### 12.1 그리드 반응형
```tsx
// 1열 → 2열 → 3열
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"

// 1열 → 2열 → 4열
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
```

### 12.2 flex 반응형
```tsx
// 세로 → 가로
className="flex flex-col md:flex-row gap-4"

// 가로 (항상)
className="flex gap-4"
```

---

## 적용 체크리스트

### 버튼
- [ ] size="sm" 사용
- [ ] 아이콘 크기 h-4 w-4
- [ ] 아이콘+텍스트 시 mr-2 spacing
- [ ] 아이콘 전용 버튼 h-8 w-8 p-0
- [ ] 삭제 버튼 text-red-500

### 카드
- [ ] Card > CardHeader > CardContent 구조
- [ ] CardTitle 사용
- [ ] 액션 버튼은 CardHeader에 배치

### Empty State
- [ ] bg-gray-50 border-2 border-dashed
- [ ] 중앙 정렬
- [ ] 아이콘 w-16 h-16 컨테이너

### 폼
- [ ] space-y-2로 Label과 Input 그룹화
- [ ] grid 레이아웃 사용
- [ ] 반응형 컬럼 수

### 다이얼로그
- [ ] DialogFooter에 버튼 배치
- [ ] 취소/저장 버튼 순서

### 아이콘
- [ ] 일관된 크기 사용
- [ ] 적절한 색상 적용
- [ ] spacing 일관성

---

## 마이그레이션 우선순위

1. 버튼 스타일 통일
2. 카드 레이아웃 통일
3. Empty State 통일
4. 테이블 디자인 통일
5. 폼 입력 통일
6. 다이얼로그 통일
7. 탭 구조 통일
8. 뱃지 및 아이콘 통일
