# 반응형 테이블 시스템 - 아토믹 디자인 분류

## 📋 개요
IntegratedListTemplateV2의 테이블 섹션을 아토믹 디자인 시스템에 맞춰 재사용 가능한 컴포넌트로 분리했습니다.

---

## 🔬 아토믹 디자인 분류

### **Atoms (원자)** - 기본 UI 요소
이미 존재하는 UI 컴포넌트들을 사용합니다.

| 컴포넌트 | 경로 | 역할 |
|---------|------|------|
| Checkbox | `/components/ui/checkbox.tsx` | 선택 체크박스 |
| Badge | `/components/ui/badge.tsx` | 뱃지 (카운트 표시) |
| Button | `/components/ui/button.tsx` | 버튼 |
| TabChip | `/components/atoms/TabChip.tsx` | 모바일 탭 칩 |

---

### **Molecules (분자)** - 복합 UI 요소

#### 1. **TabNavigationMolecule**
- **경로**: `/components/molecules/TabNavigationMolecule.tsx`
- **역할**: 반응형 탭 네비게이션
- **구성**:
  - 데스크톱: 기본 Tabs UI
  - 모바일: TabChip 버튼 스타일
- **Props**:
  ```tsx
  interface TabNavigationMoleculeProps {
    tabs: TabItem[];
    activeTab: string;
    onTabChange: (value: string) => void;
  }
  ```

#### 2. **TableHeaderMolecule**
- **경로**: `/components/molecules/TableHeaderMolecule.tsx`
- **역할**: 테이블 헤더 (전체 선택 체크박스 포함)
- **특징**:
  - 전체 선택/해제 체크박스
  - 동적 컬럼 헤더
  - "작업" 컬럼은 선택 항목이 없을 때 빈 헤더로 표시
- **Props**:
  ```tsx
  interface TableHeaderMoleculeProps {
    columns: TableColumn[];
    allSelected: boolean;
    onToggleSelectAll: (checked: boolean) => void;
    selectedItemsCount?: number;
  }
  ```

#### 3. **EmptyStateMolecule**
- **경로**: `/components/molecules/EmptyStateMolecule.tsx`
- **역할**: 데이터가 없을 때 빈 상태 표시
- **변형**:
  - `card`: 모바일 카드 뷰용
  - `table`: 데스크톱 테이블 뷰용
- **Props**:
  ```tsx
  interface EmptyStateMoleculeProps {
    message?: string;
    colSpan?: number;
    variant?: "card" | "table";
  }
  ```

---

### **Organisms (유기체)** - 완전한 기능 블록

#### **ResponsiveDataTable**
- **경로**: `/components/organisms/ResponsiveDataTable.tsx`
- **역할**: 전체 반응형 테이블 시스템
- **구성 요소**:
  - TabNavigationMolecule (탭 전환)
  - TableHeaderMolecule (테이블 헤더)
  - EmptyStateMolecule (빈 상태)
  - 데스크톱 테이블 뷰
  - 모바일 카드 뷰
  - 체크박스 선택 기능
  
- **Props**:
  ```tsx
  interface ResponsiveDataTableProps<T = any> {
    // 탭 설정
    tabs: TabItem[];
    activeTab: string;
    onTabChange: (value: string) => void;

    // 데이터
    data: T[];
    columns: TableColumn[];

    // 선택 기능
    selectedItems: Set<string>;
    allSelected: boolean;
    onToggleSelectAll: (checked: boolean) => void;
    onToggleSelection: (id: string) => void;
    getItemId: (item: T) => string;

    // 렌더링 함수
    renderTableRow: (item: T, index: number, globalIndex: number) => ReactNode;
    renderMobileCard: (
      item: T,
      index: number,
      globalIndex: number,
      isSelected: boolean,
      onToggle: () => void
    ) => ReactNode;

    // 페이지네이션
    startIndex?: number;

    // 빈 상태 메시지
    emptyMessage?: string;
  }
  ```

---

### **Templates (템플릿)** - 페이지 레이아웃

#### **IntegratedListTemplateV2**
- **경로**: `/components/templates/IntegratedListTemplateV2.tsx`
- **역할**: 완전한 목록 페이지 템플릿
- **사용하는 Organisms**:
  - ResponsiveDataTable (테이블 시스템)
  - PageHeader (페이지 헤더)
  - StatCards (통계 카드)
  - SearchFilter (검색 필터)
  - ScreenVersionHistory (버전 이력)

---

## 📦 사용 예시

### 기본 사용법

```tsx
import { ResponsiveDataTable } from "./components/organisms/ResponsiveDataTable";

function MyListPage() {
  const tabs = [
    { value: "all", label: "전체", count: 100, color: "blue" },
    { value: "active", label: "활성", count: 80, color: "green" },
  ];

  const columns = [
    { key: "code", label: "코드", className: "w-[120px]" },
    { key: "name", label: "이름", className: "min-w-[150px]" },
    { key: "actions", label: "작업", className: "w-[200px]" },
  ];

  return (
    <Card>
      <CardContent>
        <ResponsiveDataTable
          tabs={tabs}
          activeTab={activeTab}
          onTabChange={setActiveTab}
          data={filteredData}
          columns={columns}
          selectedItems={selectedItems}
          allSelected={allSelected}
          onToggleSelectAll={handleSelectAll}
          onToggleSelection={handleToggleSelection}
          getItemId={(item) => item.id}
          renderTableRow={(item, index, globalIndex) => (
            <TableRow>
              <TableCell className="text-center">
                <Checkbox
                  checked={selectedItems.has(item.id)}
                  onCheckedChange={() => handleToggleSelection(item.id)}
                />
              </TableCell>
              <TableCell>{item.code}</TableCell>
              <TableCell>{item.name}</TableCell>
              <TableCell>
                <Button size="sm">수정</Button>
              </TableCell>
            </TableRow>
          )}
          renderMobileCard={(item, index, globalIndex, isSelected, onToggle) => (
            <Card>
              <CardContent className="p-4">
                <div className="flex items-center gap-2">
                  <Checkbox checked={isSelected} onCheckedChange={onToggle} />
                  <div>
                    <div>{item.code}</div>
                    <div>{item.name}</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
          startIndex={0}
          emptyMessage="검색 결과가 없습니다."
        />
      </CardContent>
    </Card>
  );
}
```

---

## 🎯 재사용 가능한 컴포넌트 목록

다른 페이지에서 동일한 테이블 레이아웃을 적용하려면 다음 컴포넌트들을 import하여 사용하세요:

### 1. 전체 테이블 시스템이 필요한 경우
```tsx
import { ResponsiveDataTable } from "./components/organisms/ResponsiveDataTable";
```

### 2. 탭 네비게이션만 필요한 경우
```tsx
import { TabNavigationMolecule } from "./components/molecules/TabNavigationMolecule";
```

### 3. 테이블 헤더만 필요한 경우
```tsx
import { TableHeaderMolecule } from "./components/molecules/TableHeaderMolecule";
```

### 4. 빈 상태만 필요한 경우
```tsx
import { EmptyStateMolecule } from "./components/molecules/EmptyStateMolecule";
```

---

## ✅ 적용된 페이지

현재 이 시스템이 적용된 페이지:
- **품목관리** (`/components/ItemMasterPage.tsx`)
- **거래처관리** 
- **출하관리**
- **수주관리**

---

## 🔄 마이그레이션 가이드

기존 목록 페이지를 이 시스템으로 마이그레이션하려면:

1. **IntegratedListTemplateV2** 사용 (전체 템플릿 교체)
2. 또는 **ResponsiveDataTable**만 사용 (테이블 섹션만 교체)
3. 필요한 경우 개별 Molecules 사용 (부분적 적용)

---

## 📚 관련 파일

- `/components/atoms/TabChip.tsx`
- `/components/molecules/TabNavigationMolecule.tsx`
- `/components/molecules/TableHeaderMolecule.tsx`
- `/components/molecules/EmptyStateMolecule.tsx`
- `/components/organisms/ResponsiveDataTable.tsx`
- `/components/templates/IntegratedListTemplateV2.tsx`

---

## 🎨 디자인 특징

- ✅ 완전한 반응형 (데스크톱 테이블 / 모바일 카드)
- ✅ 체크박스 선택 기능
- ✅ 탭 기반 필터링
- ✅ 빈 상태 처리
- ✅ 일관된 스타일
- ✅ TypeScript 타입 안전성
- ✅ 재사용 가능한 컴포넌트 구조

---

**작성일**: 2025-01-27  
**버전**: 1.0.0  
**작성자**: SAM MES 개발팀
