604 lines
20 KiB
TypeScript
604 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect, useCallback } from "react";
|
||
import { Table, Filter, Search, Download, RefreshCw, Plus, Edit, Trash2 } from "lucide-react";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||
import { toast } from "sonner";
|
||
import { useAuth } from "@/hooks/useAuth";
|
||
|
||
/**
|
||
* 데이터 테이블 템플릿 컴포넌트
|
||
* 기존 하드코딩된 데이터 테이블 기능을 독립적인 컴포넌트로 분리
|
||
*/
|
||
|
||
export interface DataTableTemplateProps {
|
||
/**
|
||
* 테이블 제목
|
||
*/
|
||
title?: string;
|
||
|
||
/**
|
||
* 테이블 설명
|
||
*/
|
||
description?: string;
|
||
|
||
/**
|
||
* 컬럼 정의
|
||
*/
|
||
columns?: Array<{
|
||
id: string;
|
||
label: string;
|
||
type: string;
|
||
visible: boolean;
|
||
sortable: boolean;
|
||
filterable: boolean;
|
||
width?: number;
|
||
}>;
|
||
|
||
/**
|
||
* 필터 설정
|
||
*/
|
||
filters?: Array<{
|
||
id: string;
|
||
label: string;
|
||
type: "text" | "select" | "date" | "number";
|
||
options?: Array<{ label: string; value: string }>;
|
||
}>;
|
||
|
||
/**
|
||
* 페이징 설정
|
||
*/
|
||
pagination?: {
|
||
enabled: boolean;
|
||
pageSize: number;
|
||
pageSizeOptions: number[];
|
||
showPageSizeSelector: boolean;
|
||
showPageInfo: boolean;
|
||
showFirstLast: boolean;
|
||
};
|
||
|
||
/**
|
||
* 액션 버튼 설정
|
||
*/
|
||
actions?: {
|
||
showSearchButton: boolean;
|
||
searchButtonText: string;
|
||
enableExport: boolean;
|
||
enableRefresh: boolean;
|
||
enableAdd: boolean;
|
||
enableEdit: boolean;
|
||
enableDelete: boolean;
|
||
addButtonText: string;
|
||
editButtonText: string;
|
||
deleteButtonText: string;
|
||
};
|
||
|
||
/**
|
||
* 스타일 설정
|
||
*/
|
||
style?: React.CSSProperties;
|
||
|
||
/**
|
||
* 클래스명
|
||
*/
|
||
className?: string;
|
||
|
||
/**
|
||
* 미리보기 모드 (실제 데이터 없이 구조만 표시)
|
||
*/
|
||
isPreview?: boolean;
|
||
}
|
||
|
||
export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
|
||
title = "데이터 테이블",
|
||
description = "데이터를 표시하고 관리하는 테이블",
|
||
columns = [],
|
||
filters = [],
|
||
pagination = {
|
||
enabled: true,
|
||
pageSize: 10,
|
||
pageSizeOptions: [5, 10, 20, 50],
|
||
showPageSizeSelector: true,
|
||
showPageInfo: true,
|
||
showFirstLast: true,
|
||
},
|
||
actions = {
|
||
showSearchButton: true,
|
||
searchButtonText: "검색",
|
||
enableExport: true,
|
||
enableRefresh: true,
|
||
enableAdd: true,
|
||
enableEdit: true,
|
||
enableDelete: true,
|
||
addButtonText: "추가",
|
||
editButtonText: "수정",
|
||
deleteButtonText: "삭제",
|
||
},
|
||
style,
|
||
className = "",
|
||
isPreview = true,
|
||
}) => {
|
||
const { user } = useAuth();
|
||
|
||
// 🆕 검색 필터 관련 상태
|
||
const [searchFilterColumns, setSearchFilterColumns] = useState<Set<string>>(new Set());
|
||
const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false);
|
||
const [searchValues, setSearchValues] = useState<Record<string, string>>({});
|
||
|
||
// 설정된 컬럼만 사용 (자동 생성 안함)
|
||
const defaultColumns = React.useMemo(() => {
|
||
return columns || [];
|
||
}, [columns]);
|
||
|
||
// 미리보기용 샘플 데이터
|
||
const sampleData = React.useMemo(() => {
|
||
if (!isPreview) return [];
|
||
|
||
return [
|
||
{ id: 1, name: "홍길동", email: "hong@example.com", status: "활성", created_date: "2024-01-15" },
|
||
{ id: 2, name: "김철수", email: "kim@example.com", status: "비활성", created_date: "2024-01-14" },
|
||
{ id: 3, name: "이영희", email: "lee@example.com", status: "활성", created_date: "2024-01-13" },
|
||
];
|
||
}, [isPreview]);
|
||
|
||
const visibleColumns = defaultColumns.filter((col) => col.visible);
|
||
|
||
// 🆕 컬럼명 -> 라벨 매핑
|
||
const columnLabels = React.useMemo(() => {
|
||
const labels: Record<string, string> = {};
|
||
defaultColumns.forEach(col => {
|
||
labels[col.id] = col.label;
|
||
});
|
||
return labels;
|
||
}, [defaultColumns]);
|
||
|
||
// 🆕 localStorage에서 필터 설정 복원
|
||
useEffect(() => {
|
||
if (user?.userId && title) {
|
||
const storageKey = `datatable-search-filter-${user.userId}-${title}`;
|
||
const savedFilter = localStorage.getItem(storageKey);
|
||
if (savedFilter) {
|
||
try {
|
||
const parsed = JSON.parse(savedFilter);
|
||
setSearchFilterColumns(new Set(parsed));
|
||
} catch (e) {
|
||
console.error("필터 설정 복원 실패:", e);
|
||
}
|
||
}
|
||
}
|
||
}, [user?.userId, title]);
|
||
|
||
// 🆕 필터 저장 함수
|
||
const handleSaveSearchFilter = useCallback(() => {
|
||
if (user?.userId && title) {
|
||
const storageKey = `datatable-search-filter-${user.userId}-${title}`;
|
||
const filterArray = Array.from(searchFilterColumns);
|
||
localStorage.setItem(storageKey, JSON.stringify(filterArray));
|
||
toast.success("검색 필터 설정이 저장되었습니다.");
|
||
}
|
||
}, [user?.userId, title, searchFilterColumns]);
|
||
|
||
// 🆕 필터 토글 함수
|
||
const handleToggleFilterColumn = useCallback((columnId: string) => {
|
||
setSearchFilterColumns((prev) => {
|
||
const newSet = new Set(prev);
|
||
if (newSet.has(columnId)) {
|
||
newSet.delete(columnId);
|
||
} else {
|
||
newSet.add(columnId);
|
||
}
|
||
return newSet;
|
||
});
|
||
}, []);
|
||
|
||
return (
|
||
<Card className={`h-full w-full ${className}`} style={style}>
|
||
{/* 헤더 영역 */}
|
||
<CardHeader className="pb-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<CardTitle className="flex items-center space-x-2">
|
||
<Table className="h-5 w-5" />
|
||
<span>{title}</span>
|
||
</CardTitle>
|
||
{description && <p className="text-muted-foreground mt-1 text-sm">{description}</p>}
|
||
</div>
|
||
|
||
{/* 액션 버튼들 */}
|
||
<div className="flex items-center space-x-2">
|
||
{actions.enableRefresh && (
|
||
<Button variant="outline" size="sm">
|
||
<RefreshCw className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
|
||
{actions.enableExport && (
|
||
<Button variant="outline" size="sm">
|
||
<Download className="mr-1 h-4 w-4" />
|
||
내보내기
|
||
</Button>
|
||
)}
|
||
|
||
{actions.enableAdd && (
|
||
<Button size="sm">
|
||
<Plus className="mr-1 h-4 w-4" />
|
||
{actions.addButtonText}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
|
||
<CardContent className="space-y-4">
|
||
{/* 🆕 검색 필터 설정 버튼 영역 */}
|
||
{defaultColumns.length > 0 && (
|
||
<div className="flex items-center justify-end">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setIsFilterSettingOpen(true)}
|
||
disabled={isPreview}
|
||
className="gap-2"
|
||
>
|
||
<Filter className="h-4 w-4" />
|
||
검색 필터 설정
|
||
{searchFilterColumns.size > 0 && (
|
||
<Badge variant="secondary" className="ml-1 h-5 px-1.5 text-[10px]">
|
||
{searchFilterColumns.size}
|
||
</Badge>
|
||
)}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 🆕 선택된 컬럼의 검색 입력 필드 */}
|
||
{searchFilterColumns.size > 0 && (
|
||
<div className="grid grid-cols-1 gap-3 rounded-lg border bg-gray-50/50 p-4 md:grid-cols-2 lg:grid-cols-3">
|
||
{Array.from(searchFilterColumns).map((columnId) => {
|
||
const column = defaultColumns.find(col => col.id === columnId);
|
||
if (!column) return null;
|
||
|
||
return (
|
||
<div key={columnId} className="space-y-1.5">
|
||
<label className="text-xs font-medium text-gray-700">
|
||
{column.label}
|
||
</label>
|
||
<Input
|
||
placeholder={`${column.label} 검색...`}
|
||
value={searchValues[columnId] || ""}
|
||
onChange={(e) => setSearchValues(prev => ({...prev, [columnId]: e.target.value}))}
|
||
disabled={isPreview}
|
||
className="h-9 text-sm"
|
||
/>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* 검색 및 필터 영역 */}
|
||
<div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
|
||
{/* 검색 입력 */}
|
||
<div className="flex items-center space-x-2">
|
||
{actions.showSearchButton && (
|
||
<Button variant="outline" disabled={isPreview}>
|
||
<Search className="mr-2 h-4 w-4" />
|
||
{actions.searchButtonText}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
{/* 기존 필터 영역 (이제는 사용하지 않음) */}
|
||
{filters.length > 0 && (
|
||
<div className="flex items-center space-x-2">
|
||
<Filter className="text-muted-foreground h-4 w-4" />
|
||
{filters.slice(0, 3).map((filter, index) => (
|
||
<Select key={filter.id || `filter-${index}`} disabled={isPreview}>
|
||
<SelectTrigger className="w-[140px]">
|
||
<SelectValue placeholder={filter.label} />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{filter.options?.map((option) => (
|
||
<SelectItem key={option.value} value={option.value}>
|
||
{option.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 데이터 테이블 */}
|
||
<div className="rounded-md border">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full">
|
||
{/* 테이블 헤더 */}
|
||
<thead className="bg-muted/50 border-b">
|
||
<tr>
|
||
{/* 선택 체크박스 */}
|
||
<th className="w-12 p-3">
|
||
<Checkbox disabled={isPreview} />
|
||
</th>
|
||
|
||
{/* 컬럼 헤더 */}
|
||
{visibleColumns.map((column) => (
|
||
<th key={column.id} className="p-3 text-left font-medium" style={{ width: column.width }}>
|
||
<div className="flex items-center space-x-1">
|
||
<span>{column.label}</span>
|
||
{column.sortable && (
|
||
<div className="flex flex-col">
|
||
<div className="bg-muted-foreground h-1 w-1"></div>
|
||
<div className="bg-muted-foreground mt-0.5 h-1 w-1"></div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</th>
|
||
))}
|
||
|
||
{/* 액션 컬럼 */}
|
||
{(actions.enableEdit || actions.enableDelete) && <th className="w-24 p-3 text-center">액션</th>}
|
||
</tr>
|
||
</thead>
|
||
|
||
{/* 테이블 바디 */}
|
||
<tbody>
|
||
{isPreview ? (
|
||
// 미리보기 데이터
|
||
sampleData.map((row, index) => (
|
||
<tr key={index} className="hover:bg-muted/30 border-b">
|
||
<td className="p-3">
|
||
<Checkbox disabled />
|
||
</td>
|
||
{visibleColumns.map((column) => (
|
||
<td key={column.id} className="p-3">
|
||
{column.type === "select" && column.id === "status" ? (
|
||
<Badge variant={row[column.id] === "활성" ? "default" : "secondary"}>
|
||
{row[column.id]}
|
||
</Badge>
|
||
) : (
|
||
<span className="text-sm">{row[column.id]}</span>
|
||
)}
|
||
</td>
|
||
))}
|
||
{(actions.enableEdit || actions.enableDelete) && (
|
||
<td className="p-3">
|
||
<div className="flex items-center justify-center space-x-1">
|
||
{actions.enableEdit && (
|
||
<Button variant="ghost" size="sm" disabled>
|
||
<Edit className="h-3 w-3" />
|
||
</Button>
|
||
)}
|
||
{actions.enableDelete && (
|
||
<Button variant="ghost" size="sm" disabled>
|
||
<Trash2 className="h-3 w-3 text-red-500" />
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</td>
|
||
)}
|
||
</tr>
|
||
))
|
||
) : (
|
||
// 실제 데이터가 없는 경우 플레이스홀더
|
||
<tr>
|
||
<td colSpan={visibleColumns.length + 2} className="text-muted-foreground p-8 text-center">
|
||
데이터가 없습니다.
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 페이징 영역 */}
|
||
{pagination.enabled && (
|
||
<div className="flex items-center justify-between">
|
||
<div className="text-muted-foreground flex items-center space-x-2 text-sm">
|
||
{pagination.showPageInfo && <span>{isPreview ? "1-3 of 3" : "0-0 of 0"} 항목 표시</span>}
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
{/* 페이지 크기 선택 */}
|
||
{pagination.showPageSizeSelector && (
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-muted-foreground text-sm">표시:</span>
|
||
<Select disabled={isPreview}>
|
||
<SelectTrigger className="w-16">
|
||
<SelectValue placeholder={pagination.pageSize.toString()} />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{pagination.pageSizeOptions.map((size) => (
|
||
<SelectItem key={size} value={size.toString()}>
|
||
{size}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
)}
|
||
|
||
{/* 페이지 네비게이션 */}
|
||
<div className="flex items-center space-x-1">
|
||
{pagination.showFirstLast && (
|
||
<Button variant="outline" size="sm" disabled>
|
||
«
|
||
</Button>
|
||
)}
|
||
<Button variant="outline" size="sm" disabled>
|
||
‹
|
||
</Button>
|
||
<Button variant="outline" size="sm" className="bg-primary text-primary-foreground">
|
||
1
|
||
</Button>
|
||
<Button variant="outline" size="sm" disabled>
|
||
›
|
||
</Button>
|
||
{pagination.showFirstLast && (
|
||
<Button variant="outline" size="sm" disabled>
|
||
»
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
|
||
{/* 🆕 검색 필터 설정 다이얼로그 */}
|
||
<Dialog open={isFilterSettingOpen} onOpenChange={setIsFilterSettingOpen}>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>검색 필터 설정</DialogTitle>
|
||
<DialogDescription>
|
||
표시할 검색 필터를 선택하세요. 선택하지 않은 필터는 숨겨집니다.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="max-h-[400px] space-y-2 overflow-y-auto py-4">
|
||
{defaultColumns.map((column) => (
|
||
<div key={column.id} className="flex items-center space-x-3 rounded-lg p-3 hover:bg-gray-50">
|
||
<Checkbox
|
||
id={`filter-${column.id}`}
|
||
checked={searchFilterColumns.has(column.id)}
|
||
onCheckedChange={() => handleToggleFilterColumn(column.id)}
|
||
/>
|
||
<label htmlFor={`filter-${column.id}`} className="flex-1 cursor-pointer text-sm">
|
||
{column.label}
|
||
<span className="ml-2 text-xs text-gray-500">({column.type})</span>
|
||
</label>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<DialogFooter className="gap-2 sm:gap-0">
|
||
<Button variant="outline" onClick={() => setIsFilterSettingOpen(false)}>
|
||
취소
|
||
</Button>
|
||
<Button onClick={() => {
|
||
handleSaveSearchFilter();
|
||
setIsFilterSettingOpen(false);
|
||
}}>
|
||
저장
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 데이터 테이블 템플릿 기본 설정
|
||
*/
|
||
export const getDefaultDataTableConfig = () => ({
|
||
template_code: "advanced-data-table-v2",
|
||
template_name: "고급 데이터 테이블 v2",
|
||
template_name_eng: "Advanced Data Table v2",
|
||
description: "검색, 필터링, 페이징, CRUD 기능이 포함된 완전한 데이터 테이블 컴포넌트",
|
||
category: "table",
|
||
icon_name: "table",
|
||
default_size: {
|
||
width: 1000,
|
||
height: 680,
|
||
},
|
||
layout_config: {
|
||
components: [
|
||
{
|
||
type: "datatable",
|
||
label: "고급 데이터 테이블",
|
||
position: { x: 0, y: 0 },
|
||
size: { width: 1000, height: 680 },
|
||
style: {
|
||
border: "1px solid #e5e7eb",
|
||
borderRadius: "8px",
|
||
backgroundColor: "#ffffff",
|
||
padding: "0",
|
||
},
|
||
// 데이터 테이블 전용 설정
|
||
columns: [
|
||
{ id: "id", label: "ID", type: "number", visible: true, sortable: true, filterable: false, width: 80 },
|
||
{ id: "name", label: "이름", type: "text", visible: true, sortable: true, filterable: true, width: 150 },
|
||
{ id: "email", label: "이메일", type: "email", visible: true, sortable: true, filterable: true, width: 200 },
|
||
{ id: "status", label: "상태", type: "select", visible: true, sortable: true, filterable: true, width: 100 },
|
||
{
|
||
id: "created_date",
|
||
label: "생성일",
|
||
type: "date",
|
||
visible: true,
|
||
sortable: true,
|
||
filterable: true,
|
||
width: 120,
|
||
},
|
||
],
|
||
filters: [
|
||
{
|
||
id: "status",
|
||
label: "상태",
|
||
type: "select",
|
||
options: [
|
||
{ label: "전체", value: "" },
|
||
{ label: "활성", value: "active" },
|
||
{ label: "비활성", value: "inactive" },
|
||
],
|
||
},
|
||
{ id: "name", label: "이름", type: "text" },
|
||
{ id: "email", label: "이메일", type: "text" },
|
||
],
|
||
pagination: {
|
||
enabled: true,
|
||
pageSize: 10,
|
||
pageSizeOptions: [5, 10, 20, 50, 100],
|
||
showPageSizeSelector: true,
|
||
showPageInfo: true,
|
||
showFirstLast: true,
|
||
},
|
||
actions: {
|
||
showSearchButton: true,
|
||
searchButtonText: "검색",
|
||
enableExport: true,
|
||
enableRefresh: true,
|
||
enableAdd: true,
|
||
enableEdit: true,
|
||
enableDelete: true,
|
||
addButtonText: "추가",
|
||
editButtonText: "수정",
|
||
deleteButtonText: "삭제",
|
||
},
|
||
// 모달 설정
|
||
addModalConfig: {
|
||
title: "새 데이터 추가",
|
||
description: "테이블에 새로운 데이터를 추가합니다.",
|
||
width: "lg",
|
||
layout: "two-column",
|
||
gridColumns: 2,
|
||
fieldOrder: ["name", "email", "status"],
|
||
requiredFields: ["name", "email"],
|
||
hiddenFields: ["id", "created_date"],
|
||
advancedFieldConfigs: {
|
||
status: {
|
||
type: "select",
|
||
options: [
|
||
{ label: "활성", value: "active" },
|
||
{ label: "비활성", value: "inactive" },
|
||
],
|
||
},
|
||
},
|
||
submitButtonText: "추가",
|
||
cancelButtonText: "취소",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
});
|
||
|
||
export default DataTableTemplate;
|