# ResponsiveListTemplate

## 개요
품목관리를 기반으로 한 완전한 반응형 목록 템플릿입니다.
데스크톱/태블릿/모바일 모든 화면 크기를 지원합니다.

## 구조

### 계층
```
Templates (템플릿)
  └─ ResponsiveListTemplate
      ├─ Organisms (유기체)
      │   ├─ PageLayout
      │   ├─ PageHeader
      │   ├─ StatCards
      │   ├─ SearchFilter
      │   └─ DataTable
      ├─ Molecules (분자)
      │   └─ TableActionButtons
      └─ Atoms (원자)
          ├─ Badge
          ├─ Button
          ├─ Checkbox
          ├─ Input
          ├─ Card
          └─ Tabs
```

### 레이아웃 구조
```
PageLayout (max-width 설정 가능)
  ├─ PageHeader (제목 + 아이콘 + 액션 버튼)
  ├─ StatCards (통계 카드 - 선택사항)
  ├─ SearchFilter (검색 + 필터 - 선택사항)
  └─ Card (목록 카드)
      ├─ CardHeader (카드 제목)
      └─ CardContent
          └─ Tabs
              ├─ TabsList (데스크톱: 기본 탭)
              ├─ 커스텀 버튼 탭 (모바일: 색상별 버튼)
              └─ TabsContent
                  ├─ DataTable (데스크톱/태블릿)
                  └─ 카드 리스트 (모바일)
```

## 반응형 동작

### 데스크톱 (lg 이상, 1024px+)
- **탭**: TabsList - 기본 UI 컴포넌트
- **목록**: DataTable - 스크롤 가능한 테이블
- **선택**: 테이블 내 체크박스

### 모바일 (lg 미만, ~1023px)
- **탭**: 커스텀 버튼 - 색상별 구분 (border-2 + 배경색)
- **목록**: 카드 리스트 - 개별 카드 컴포넌트
- **선택**: 카드 내 체크박스

## Props

### 필수 Props
```typescript
title: string;                    // 페이지 제목
tabs: TabConfig[];                // 탭 구성
currentTab: string;               // 현재 선택된 탭
onTabChange: (value: string) => void;  // 탭 변경 핸들러
data: T[];                        // 데이터 배열
keyField: keyof T;                // 고유 키 필드명
columns: Column<T>[];             // 데스크톱 테이블 컬럼
```

### 선택적 Props
```typescript
description?: string;              // 페이지 설명
icon?: LucideIcon;                // 페이지 아이콘
headerActions?: ReactNode;         // 헤더 액션 (등록 버튼 등)
stats?: StatCardProps[];          // 통계 카드
searchValue?: string;             // 검색어
onSearchChange?: (value: string) => void;  // 검색 변경 핸들러
searchPlaceholder?: string;       // 검색 플레이스홀더
extraFilters?: ReactNode;         // 추가 필터 (Select 등)
onRowClick?: (row: T) => void;    // 행 클릭 핸들러
renderMobileCard?: (item: T, index: number) => ReactNode;  // 모바일 카드 렌더러
selectable?: boolean;             // 선택 기능 활성화
selectedIds?: Set<string>;        // 선택된 항목 ID
onToggleSelection?: (id: string) => void;  // 선택 토글 핸들러
cardTitle?: string | ((currentTab: string, count: number) => string);  // 카드 제목
emptyMessage?: string;            // 빈 목록 메시지
maxWidth?: "sm" | "md" | "lg" | "xl" | "full";  // 레이아웃 최대 너비
```

## 탭 구성

### TabConfig
```typescript
interface TabConfig {
  value: string;      // 탭 값 (필수)
  label: string;      // 탭 라벨 (필수)
  count?: number;     // 카운트 (선택)
  color?: "blue" | "purple" | "orange" | "cyan" | "green" | "gray";  // 모바일 색상
}
```

### 색상 스타일
- **blue**: 전체, 기본
- **purple**: 제품
- **orange**: 부품
- **cyan**: 부자재
- **green**: 원자재
- **gray**: 소모품

## 사용 예제

### 기본 사용법
```typescript
import { ResponsiveListTemplate } from "./components/templates/ResponsiveListTemplate";

const tabs = [
  { value: "all", label: "전체", count: 100, color: "blue" },
  { value: "FG", label: "제품", count: 50, color: "purple" },
];

<ResponsiveListTemplate
  title="품목 관리"
  description="제품, 부품, 부자재 등록 및 관리"
  icon={Package}
  headerActions={<Button>품목 등록</Button>}
  tabs={tabs}
  currentTab={currentTab}
  onTabChange={setCurrentTab}
  data={filteredItems}
  keyField="id"
  columns={columns}
/>
```

### 통계 카드 추가
```typescript
const stats = [
  { label: "전체 품목", value: 100, icon: Package, iconColor: "text-blue-600" },
  { label: "제품", value: 50, icon: Package, iconColor: "text-purple-600" },
];

<ResponsiveListTemplate
  stats={stats}
  // ... 기타 props
/>
```

### 검색 및 필터 추가
```typescript
<ResponsiveListTemplate
  searchValue={searchTerm}
  onSearchChange={setSearchTerm}
  searchPlaceholder="품목코드, 품목명 검색..."
  extraFilters={
    <Select value={filterType} onValueChange={setFilterType}>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="품목 유형" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="all">전체</SelectItem>
        <SelectItem value="FG">제품</SelectItem>
      </SelectContent>
    </Select>
  }
  // ... 기타 props
/>
```

### 모바일 카드 커스터마이징
```typescript
import { createMobileCardRenderer } from "./components/templates/ResponsiveListTemplate";

const renderMobileCard = createMobileCardRenderer<Item>({
  getNumber: (item, index, total) => total - index,
  getTitle: (item) => item.itemName,
  getSubtitle: (item) => item.itemCode,
  getBadge: (item) => ({ label: item.itemType, variant: "outline" }),
  getFields: (item) => [
    { label: "규격", value: item.specification || "-" },
    { label: "재질", value: item.material || "-" },
  ],
  getActions: (item) => (
    <div className="flex gap-2">
      <Button size="sm" variant="outline">상세</Button>
      <Button size="sm" variant="outline">수정</Button>
    </div>
  ),
  selectable: true,
  selectedIds,
  onToggleSelection,
});

<ResponsiveListTemplate
  renderMobileCard={renderMobileCard}
  // ... 기타 props
/>
```

## 헬퍼 함수

### createMobileCardRenderer
모바일 카드 렌더러를 쉽게 생성할 수 있는 헬퍼 함수입니다.

```typescript
const renderMobileCard = createMobileCardRenderer<T>({
  getNumber?: (item: T, index: number, total: number) => string | number;
  getTitle: (item: T) => string;
  getSubtitle?: (item: T) => string;
  getBadge?: (item: T) => { label: string; variant?: BadgeVariant };
  getFields: (item: T) => MobileCardField[];
  getActions?: (item: T) => ReactNode;
  selectable?: boolean;
  selectedIds?: Set<string>;
  onToggleSelection?: (id: string) => void;
});
```

## 사용 사례

### 적용된 페이지
1. **생산관리 → 품목관리**: 원본 템플릿
2. **판매관리 → 견적관리**: ResponsiveListTemplate 적용
3. **판매관리 → 거래처관리**: ResponsiveListTemplate 적용

### 적합한 사용 사례
- 품목 관리 시스템
- 견적 관리 시스템
- 거래처 관리 시스템
- 주문 관리 시스템
- 재고 관리 시스템
- 기타 목록 기반 관리 시스템

## 특징

### 1. 완전한 반응형
- 데스크톱: 테이블 + 기본 탭
- 모바일: 카드 + 커스텀 버튼 탭
- 자동 레이아웃 전환

### 2. 일관된 디자인
- 아토믹 디자인 시스템 기반
- 재사용 가능한 컴포넌트
- 통일된 스타일 가이드

### 3. 확장성
- Props를 통한 커스터마이징
- 헬퍼 함수로 쉬운 설정
- 선택적 기능 활성화

### 4. 접근성
- 키보드 네비게이션
- 스크린 리더 지원
- ARIA 속성 적용

## 주의사항

1. **데이터 타입**: `T extends { id: string }` - id 필드 필수
2. **keyField**: 고유한 값을 가진 필드 지정
3. **renderMobileCard**: 모바일 경험 개선을 위해 제공 권장
4. **선택 기능**: selectable, selectedIds, onToggleSelection 함께 사용

## 버전
- **v1.0.0**: 초기 릴리즈 (품목관리 기반)
- 생성일: 2024
- 최종 수정: 2024
