# CSS 비교 분석 - 품목 관리 리스트 페이지

**날짜**: 2025-11-17
**React 파일**: `sma-react-v2.0/src/components/ItemManagement.tsx` (lines 1956-2200)
**Next.js 파일**: `sam-react-prod/src/components/items/ItemListClient.tsx` (lines 206-330)

---

## 🔍 발견된 CSS 차이점

### 1. CardTitle (타이틀)
| 항목 | React | Next.js | 상태 |
|------|-------|---------|------|
| className | `text-sm md:text-base` | `text-base font-semibold` | ❌ MISMATCH |
| **수정 필요** | → `text-sm md:text-base` | | |

### 2. TabsList (탭 리스트)
| 항목 | React | Next.js | 상태 |
|------|-------|---------|------|
| 래퍼 div | `overflow-x-auto -mx-2 px-2 mb-6` | 없음 | ❌ MISSING |
| className | `inline-flex w-auto min-w-full md:grid md:w-full md:max-w-2xl md:grid-cols-6` | `grid w-full grid-cols-6 mb-6` | ❌ MISMATCH |
| **수정 필요** | → 래퍼 추가 + React className 적용 | | |

### 3. TabsTrigger (탭 버튼)
| 항목 | React | Next.js | 상태 |
|------|-------|---------|------|
| className | `whitespace-nowrap` | 없음 | ❌ MISSING |
| **수정 필요** | → `whitespace-nowrap` 추가 | | |

### 4. TabsContent
| 항목 | React | Next.js | 상태 |
|------|-------|---------|------|
| className | `mt-0` | `mt-0` | ✅ MATCH |

### 5. 테이블 래퍼
| 항목 | React | Next.js | 상태 |
|------|-------|---------|------|
| className | `hidden lg:block rounded-md border` | `border rounded-lg overflow-hidden` | ❌ MISMATCH |
| **수정 필요** | → `hidden lg:block rounded-md border` | | |

---

## 📋 테이블 구조 차이점

### **TableHeader - 컬럼 구조**

#### React 컬럼 순서 (8개):
1. 체크박스 (`w-[50px]`)
2. **번호** (`hidden md:table-cell`) ⭐
3. **품목코드** (`min-w-[100px]`)
4. **품목유형** (`min-w-[80px]`)
5. **품목명** (`min-w-[120px]`)
6. **규격** (`hidden md:table-cell`)
7. **단위** (`hidden md:table-cell`)
8. **작업** (`text-right min-w-[100px]`)

#### Next.js 목표 컬럼 순서 (10개) - 개선안:
1. ❌ **체크박스** (`w-[50px]`) - 추가 필요
2. ❌ **번호** (`hidden md:table-cell`) - 추가 필요
3. **품목 코드** (`min-w-[100px]`) - width 수정
4. **품목유형** (`min-w-[80px]`) - 위치 이동
5. **품목명** (`min-w-[120px]`) - 위치 이동
6. **규격** (`hidden md:table-cell`) - 위치 이동
7. **단위** (`hidden md:table-cell`) - 위치 이동
8. ~~**판매 단가**~~ - 🚨 **제거**
9. **품목 상태** (`w-[80px]`) - ✅ **유지** (컬럼명 변경: "상태" → "품목 상태")
10. **작업** (`text-right min-w-[100px]`) - 정렬 수정

### 🚨 주요 문제점

| # | 문제 | React | Next.js | 개선안 |
|---|------|-------|---------|---------|
| 1 | 체크박스 컬럼 | ✅ 있음 (`w-[50px]`) | ❌ 없음 | ✅ 추가 |
| 2 | 번호 컬럼 | ✅ 있음 (`hidden md:table-cell`) | ❌ 없음 | ✅ 추가 |
| 3 | 품목코드 width | `min-w-[100px]` | `w-[120px]` | ✅ `min-w-[100px]`로 수정 |
| 4 | 컬럼 순서 | 코드→유형→명→규격→단위 | 코드→명→유형→단위→규격 | ✅ React 순서로 변경 |
| 5 | 판매단가 | ❌ 없음 | ✅ 있음 | 🚨 **제거** |
| 6 | 품목 상태 | ❌ 없음 | ✅ 있음 ("상태") | ✅ **유지** (컬럼명: "품목 상태") |
| 7 | 작업 정렬 | `text-right` | `text-center` ❌ | ✅ `text-right`로 수정 |

---

## 🎨 TableCell 상세 CSS 비교

### 번호 컬럼 (React만 있음)
```tsx
// React
<TableCell className="text-muted-foreground cursor-pointer hidden md:table-cell">
  {filteredItems.length - (startIndex + index)}
</TableCell>

// Next.js: 없음 (추가 필요)
```

### 품목코드 컬럼
```tsx
// React
<TableCell className="cursor-pointer">
  <code className="text-xs bg-gray-100 px-2 py-1 rounded">
    {formatItemCodeForAssembly(item) || '-'}
  </code>
</TableCell>

// Next.js
<TableCell className="font-mono text-sm">
  {item.itemCode}
</TableCell>
```

**차이점**:
- ❌ `cursor-pointer` 누락
- ❌ `<code>` 태그 없음
- ❌ `text-xs bg-gray-100 px-2 py-1 rounded` 배경색 스타일 없음

### 품목유형 컬럼
```tsx
// React
<TableCell className="cursor-pointer">
  {getItemTypeBadge(item.itemType)}
  {/* + 부품인 경우 추가 뱃지 */}
</TableCell>

// Next.js
<TableCell>
  <Badge variant="outline">
    {ITEM_TYPE_LABELS[item.itemType]}
  </Badge>
</TableCell>
```

**차이점**:
- ❌ `cursor-pointer` 누락
- ❌ `getItemTypeBadge()` 함수 사용 안함 (색상 없음)
- ❌ 부품 타입별 추가 뱃지 없음

### 품목명 컬럼
```tsx
// React
<TableCell className="cursor-pointer">
  <div className="flex items-center gap-2">
    <span className="truncate max-w-[150px] md:max-w-none">{item.itemName}</span>
    {/* + 견적산출용 뱃지 */}
  </div>
</TableCell>

// Next.js
<TableCell className="font-medium">
  {item.itemName}
</TableCell>
```

**차이점**:
- ❌ `cursor-pointer` 누락
- ❌ `flex items-center gap-2` 구조 없음
- ❌ `truncate max-w-[150px] md:max-w-none` 말줄임 없음
- ❌ 견적산출용 뱃지 없음

### 규격 컬럼
```tsx
// React
<TableCell className="text-sm text-muted-foreground cursor-pointer hidden md:table-cell">
  {item.itemCode?.includes('-') ? item.itemCode.split('-').slice(1).join('-') : (item.specification || "-")}
</TableCell>

// Next.js
<TableHead>규격</TableHead>
<TableCell className="text-sm text-gray-600">
  {item.specification || '-'}
</TableCell>
```

**차이점**:
- ❌ `cursor-pointer` 누락
- ❌ `hidden md:table-cell` 반응형 숨김 없음
- ❌ `text-muted-foreground` → `text-gray-600` (다른 색상)
- ❌ itemCode 파싱 로직 없음

### 단위 컬럼
```tsx
// React
<TableCell className="cursor-pointer hidden md:table-cell">
  <Badge variant="secondary">{item.unit || "-"}</Badge>
</TableCell>

// Next.js
<TableHead className="w-[80px]">단위</TableHead>
<TableCell>{item.unit}</TableCell>
```

**차이점**:
- ❌ `cursor-pointer` 누락
- ❌ `hidden md:table-cell` 반응형 숨김 없음
- ❌ `<Badge>` 없음 (단순 텍스트)

### 작업 컬럼
```tsx
// React
<TableHead className="text-right min-w-[100px]">작업</TableHead>
<TableCell className="text-right">
  <TableActionButtons
    onView={() => handleViewChange("view", item)}
    onEdit={() => handleViewChange("edit", item)}
    onDelete={() => {...}}
  />
</TableCell>

// Next.js
<TableHead className="w-[150px] text-center">작업</TableHead>
<TableCell>
  <div className="flex items-center justify-center gap-1">
    <Button variant="ghost" size="sm">
      <Eye className="w-4 h-4" />  {/* ❌ 아이콘 틀림 */}
    </Button>
    {/* ... */}
  </div>
</TableCell>
```

**차이점**:
- ❌ `text-right` → `text-center` (정렬 틀림)
- ❌ `min-w-[100px]` → `w-[150px]`
- ❌ `TableActionButtons` 컴포넌트 대신 직접 구현
- ❌ 아이콘: `Search` → `Eye` (돋보기 → 눈)

---

## 📝 수정 체크리스트

### 구조 변경
- [ ] CardTitle: `text-sm md:text-base` 적용
- [ ] TabsList 래퍼 div 추가: `overflow-x-auto -mx-2 px-2 mb-6`
- [ ] TabsList: `inline-flex w-auto min-w-full md:grid md:w-full md:max-w-2xl md:grid-cols-6`
- [ ] TabsTrigger: `whitespace-nowrap` 추가
- [ ] 테이블 래퍼: `hidden lg:block rounded-md border`

### 테이블 컬럼 재구성
- [ ] 체크박스 컬럼 추가 (첫 번째, `w-[50px]`)
- [ ] 번호 컬럼 추가 (두 번째, `hidden md:table-cell`)
- [ ] 컬럼 순서 변경: 체크박스 → 번호 → 코드 → 유형 → 명 → 규격 → 단위 → 품목상태 → 작업
- [ ] 판매단가 컬럼 제거 🚨
- [ ] 상태 컬럼명 변경: "상태" → "품목 상태" ✅ (유지)
- [ ] 작업 컬럼 정렬: `text-center` → `text-right`, width: `w-[150px]` → `min-w-[100px]`

### CSS 클래스 적용
- [ ] 품목코드: `cursor-pointer` + `<code>` 태그 + `text-xs bg-gray-100 px-2 py-1 rounded`
- [ ] 품목유형: `cursor-pointer` + `getItemTypeBadge()` 함수 사용
- [ ] 품목명: `cursor-pointer` + `flex items-center gap-2` + `truncate max-w-[150px] md:max-w-none`
- [ ] 규격: `cursor-pointer hidden md:table-cell text-muted-foreground` + itemCode 파싱 로직
- [ ] 단위: `cursor-pointer hidden md:table-cell` + `<Badge variant="secondary">`
- [ ] 작업: `text-right` + `Search` 아이콘

### 기능 추가
- [ ] `getItemTypeBadge()` 함수 구현 (유형별 색상)
- [ ] `formatItemCodeForAssembly()` 함수 구현
- [ ] 체크박스 선택 기능
- [ ] 견적산출용 뱃지 로직
- [ ] 부품 타입별 추가 뱃지

---

## 🎯 우선순위

### 긴급 (시각적 영향 큼)
1. 번호 컬럼 추가
2. 품목코드 배경색 (`bg-gray-100`)
3. 품목유형 색상 (Badge)
4. 컬럼 순서 변경
5. 작업 정렬 수정 (`text-center` → `text-right`)

### 중요
6. 체크박스 컬럼 추가
7. 판매단가 컬럼 제거 🚨
8. 상태 컬럼명 변경: "상태" → "품목 상태" ✅
9. 아이콘 변경 (Eye → Search)
10. TabsList 반응형

### 보통
11. cursor-pointer 일괄 적용
12. 견적산출용 뱃지
13. 부품 타입 뱃지