sam-design/src/ITEM_MASTER_DESIGN_STANDARD.md

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

개요

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

---

1. 버튼 디자인 표준

1.1 기본 버튼

// 주요 액션 버튼 (등록, 저장 등)
<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 아이콘 버튼

// 편집 버튼
<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 버튼 그룹

<div className="flex gap-2">
  <Button size="sm" variant="outline">취소</Button>
  <Button size="sm">저장</Button>
</div>

---

2. 카드 레이아웃 표준

2.1 기본 카드

<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 설명이 있는 카드

<Card>
  <CardHeader>
    <CardTitle>제목</CardTitle>
    <CardDescription>설명 텍스트</CardDescription>
  </CardHeader>
  <CardContent>
    {/* 내용 */}
  </CardContent>
</Card>

---

3. Empty State 표준

<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 테이블 헤더

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">NO</TableHead>
      <TableHead>항목명</TableHead>
      <TableHead className="text-right">액션</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {/* 행 */}
  </TableBody>
</Table>

4.2 테이블 액션 셀

<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 기본 입력 필드

<div className="space-y-2">
  <Label>라벨</Label>
  <Input placeholder="입력하세요" />
</div>

5.2 셀렉트 필드

<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 텍스트영역

<div className="space-y-2">
  <Label>라벨</Label>
  <Textarea 
    placeholder="입력하세요" 
    className="min-h-[100px]"
  />
</div>

5.4 폼 그리드

<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 기본 다이얼로그

<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 큰 다이얼로그

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
    {/* 내용 */}
  </DialogContent>
</Dialog>

---

7. 탭 구조 표준

<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 상태 뱃지

// 성공/완료
<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 카운트 뱃지

<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 섹션 간격

<div className="space-y-6">
  <Section1 />
  <Section2 />
  <Section3 />
</div>

10.2 요소 간격

// 폼 필드
<div className="space-y-4">
  <FormField1 />
  <FormField2 />
</div>

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

10.3 그리드 간격

<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 그리드 반응형

// 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 반응형

// 세로 → 가로
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. 뱃지 및 아이콘 통일