sam-react-prod/claudedocs/archive/[IMPL-2025-11-17] item-list-css-sync.md

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만 있음)

// React
<TableCell className="text-muted-foreground cursor-pointer hidden md:table-cell">
  {filteredItems.length - (startIndex + index)}
</TableCell>

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

품목코드 컬럼

// 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 배경색 스타일 없음

품목유형 컬럼

// 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() 함수 사용 안함 (색상 없음)
• ❌ 부품 타입별 추가 뱃지 없음

품목명 컬럼

// 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 말줄임 없음
• ❌ 견적산출용 뱃지 없음

규격 컬럼

// 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 파싱 로직 없음

단위 컬럼

// 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> 없음 (단순 텍스트)

작업 컬럼

// 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. 부품 타입 뱃지