324 lines
11 KiB
TypeScript
324 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { GripVertical, Eye, EyeOff } from "lucide-react";
|
|
|
|
interface ColumnConfig {
|
|
columnName: string;
|
|
label: string;
|
|
visible: boolean;
|
|
width?: number;
|
|
frozen?: boolean;
|
|
}
|
|
|
|
interface TableOptionsModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
columns: ColumnConfig[];
|
|
onSave: (config: {
|
|
columns: ColumnConfig[];
|
|
showGridLines: boolean;
|
|
viewMode: "table" | "card" | "grouped-card";
|
|
}) => void;
|
|
tableName: string;
|
|
userId?: string;
|
|
}
|
|
|
|
export function TableOptionsModal({
|
|
isOpen,
|
|
onClose,
|
|
columns: initialColumns,
|
|
onSave,
|
|
tableName,
|
|
userId = "guest",
|
|
}: TableOptionsModalProps) {
|
|
const [columns, setColumns] = useState<ColumnConfig[]>(initialColumns);
|
|
const [showGridLines, setShowGridLines] = useState(true);
|
|
const [viewMode, setViewMode] = useState<"table" | "card" | "grouped-card">("table");
|
|
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
|
|
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
|
|
|
// localStorage에서 설정 불러오기
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
const storageKey = `table_options_${tableName}_${userId}`;
|
|
const savedConfig = localStorage.getItem(storageKey);
|
|
|
|
if (savedConfig) {
|
|
try {
|
|
const parsed = JSON.parse(savedConfig);
|
|
setColumns(parsed.columns || initialColumns);
|
|
setShowGridLines(parsed.showGridLines ?? true);
|
|
setViewMode(parsed.viewMode || "table");
|
|
} catch (error) {
|
|
console.error("설정 불러오기 실패:", error);
|
|
}
|
|
} else {
|
|
setColumns(initialColumns);
|
|
}
|
|
}
|
|
}, [isOpen, tableName, userId, initialColumns]);
|
|
|
|
// 컬럼 표시/숨기기 토글
|
|
const toggleColumnVisibility = (index: number) => {
|
|
const newColumns = [...columns];
|
|
newColumns[index].visible = !newColumns[index].visible;
|
|
setColumns(newColumns);
|
|
};
|
|
|
|
// 컬럼 틀고정 토글
|
|
const toggleColumnFrozen = (index: number) => {
|
|
const newColumns = [...columns];
|
|
newColumns[index].frozen = !newColumns[index].frozen;
|
|
setColumns(newColumns);
|
|
};
|
|
|
|
// 컬럼 너비 변경
|
|
const updateColumnWidth = (index: number, width: number) => {
|
|
const newColumns = [...columns];
|
|
newColumns[index].width = width;
|
|
setColumns(newColumns);
|
|
};
|
|
|
|
// 드래그 앤 드롭 핸들러
|
|
const handleDragStart = (index: number) => {
|
|
setDraggedIndex(index);
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent, index: number) => {
|
|
e.preventDefault();
|
|
setDragOverIndex(index);
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent, dropIndex: number) => {
|
|
e.preventDefault();
|
|
|
|
if (draggedIndex === null || draggedIndex === dropIndex) {
|
|
setDraggedIndex(null);
|
|
setDragOverIndex(null);
|
|
return;
|
|
}
|
|
|
|
const newColumns = [...columns];
|
|
const [draggedColumn] = newColumns.splice(draggedIndex, 1);
|
|
newColumns.splice(dropIndex, 0, draggedColumn);
|
|
|
|
setColumns(newColumns);
|
|
setDraggedIndex(null);
|
|
setDragOverIndex(null);
|
|
};
|
|
|
|
const handleDragEnd = () => {
|
|
setDraggedIndex(null);
|
|
setDragOverIndex(null);
|
|
};
|
|
|
|
// 저장
|
|
const handleSave = () => {
|
|
const config = {
|
|
columns,
|
|
showGridLines,
|
|
viewMode,
|
|
};
|
|
|
|
// localStorage에 저장
|
|
const storageKey = `table_options_${tableName}_${userId}`;
|
|
localStorage.setItem(storageKey, JSON.stringify(config));
|
|
|
|
onSave(config);
|
|
onClose();
|
|
};
|
|
|
|
// 초기화
|
|
const handleReset = () => {
|
|
setColumns(initialColumns);
|
|
setShowGridLines(true);
|
|
setViewMode("table");
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-h-[90vh] sm:max-w-[700px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">테이블 옵션</DialogTitle>
|
|
<DialogDescription className="text-xs sm:text-sm">
|
|
컬럼 표시/숨기기, 순서 변경, 틀고정 등을 설정할 수 있습니다.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Tabs defaultValue="columns" className="flex flex-col flex-1 overflow-hidden">
|
|
<TabsList className="grid w-full grid-cols-3 flex-shrink-0">
|
|
<TabsTrigger value="columns" className="text-xs sm:text-sm">컬럼 설정</TabsTrigger>
|
|
<TabsTrigger value="display" className="text-xs sm:text-sm">표시 설정</TabsTrigger>
|
|
<TabsTrigger value="view" className="text-xs sm:text-sm">보기 모드</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* 컬럼 설정 탭 */}
|
|
<TabsContent value="columns" className="flex-1 overflow-y-auto space-y-3 sm:space-y-4 mt-4">
|
|
<div className="text-xs sm:text-sm text-muted-foreground mb-2">
|
|
드래그하여 순서를 변경하거나, 아이콘을 클릭하여 표시/숨기기를 설정하세요.
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{columns.map((column, index) => (
|
|
<div
|
|
key={column.columnName}
|
|
draggable
|
|
onDragStart={() => handleDragStart(index)}
|
|
onDragOver={(e) => handleDragOver(e, index)}
|
|
onDrop={(e) => handleDrop(e, index)}
|
|
onDragEnd={handleDragEnd}
|
|
className={`flex items-center gap-2 p-2 sm:p-3 border rounded-md bg-card hover:bg-accent/50 transition-colors cursor-move ${
|
|
dragOverIndex === index ? "border-primary" : "border-border"
|
|
}`}
|
|
>
|
|
{/* 드래그 핸들 */}
|
|
<GripVertical className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
|
|
|
{/* 컬럼명 */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-xs sm:text-sm font-medium truncate">
|
|
{column.label}
|
|
</div>
|
|
<div className="text-[10px] sm:text-xs text-muted-foreground truncate">
|
|
{column.columnName}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 너비 설정 */}
|
|
<div className="flex items-center gap-1 sm:gap-2">
|
|
<Label className="text-[10px] sm:text-xs whitespace-nowrap">너비:</Label>
|
|
<Input
|
|
type="number"
|
|
value={column.width || 150}
|
|
onChange={(e) => updateColumnWidth(index, parseInt(e.target.value) || 150)}
|
|
className="h-7 w-16 sm:h-8 sm:w-20 text-xs"
|
|
min={50}
|
|
max={500}
|
|
/>
|
|
</div>
|
|
|
|
{/* 틀고정 */}
|
|
<Button
|
|
variant={column.frozen ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => toggleColumnFrozen(index)}
|
|
className="h-7 px-2 text-[10px] sm:h-8 sm:px-3 sm:text-xs"
|
|
>
|
|
{column.frozen ? "고정됨" : "고정"}
|
|
</Button>
|
|
|
|
{/* 표시/숨기기 */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => toggleColumnVisibility(index)}
|
|
className="h-7 w-7 sm:h-8 sm:w-8 flex-shrink-0"
|
|
>
|
|
{column.visible ? (
|
|
<Eye className="h-4 w-4 text-primary" />
|
|
) : (
|
|
<EyeOff className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* 표시 설정 탭 */}
|
|
<TabsContent value="display" className="flex-1 overflow-y-auto space-y-3 sm:space-y-4 mt-4">
|
|
<div className="flex items-center justify-between p-3 sm:p-4 border rounded-md bg-card">
|
|
<div className="space-y-0.5">
|
|
<Label className="text-xs sm:text-sm font-medium">그리드선 표시</Label>
|
|
<p className="text-[10px] sm:text-xs text-muted-foreground">
|
|
테이블의 셀 구분선을 표시합니다
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={showGridLines}
|
|
onCheckedChange={setShowGridLines}
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* 보기 모드 탭 */}
|
|
<TabsContent value="view" className="flex-1 overflow-y-auto space-y-3 sm:space-y-4 mt-4">
|
|
<div className="grid gap-3">
|
|
<Button
|
|
variant={viewMode === "table" ? "default" : "outline"}
|
|
onClick={() => setViewMode("table")}
|
|
className="h-auto flex-col items-start p-3 sm:p-4 text-left"
|
|
>
|
|
<div className="text-sm sm:text-base font-semibold">테이블형</div>
|
|
<div className="text-xs text-muted-foreground mt-1">
|
|
전통적인 행/열 테이블 형식으로 표시
|
|
</div>
|
|
</Button>
|
|
|
|
<Button
|
|
variant={viewMode === "card" ? "default" : "outline"}
|
|
onClick={() => setViewMode("card")}
|
|
className="h-auto flex-col items-start p-3 sm:p-4 text-left"
|
|
>
|
|
<div className="text-sm sm:text-base font-semibold">카드형</div>
|
|
<div className="text-xs text-muted-foreground mt-1">
|
|
각 항목을 카드로 표시 (가로로 길게)
|
|
</div>
|
|
</Button>
|
|
|
|
<Button
|
|
variant={viewMode === "grouped-card" ? "default" : "outline"}
|
|
onClick={() => setViewMode("grouped-card")}
|
|
className="h-auto flex-col items-start p-3 sm:p-4 text-left"
|
|
>
|
|
<div className="text-sm sm:text-base font-semibold">그룹화된 카드형</div>
|
|
<div className="text-xs text-muted-foreground mt-1">
|
|
그룹별로 카드를 묶어서 표시
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
<DialogFooter className="gap-2 sm:gap-0 mt-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleReset}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
초기화
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={onClose}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
취소
|
|
</Button>
|
|
<Button
|
|
onClick={handleSave}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
저장
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|