241 lines
9.3 KiB
TypeScript
241 lines
9.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import { Card } from "@/components/ui/card";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
|
|
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
|
||
|
|
import { Plus, Copy, Trash2, GripVertical, Edit2, Check, X } from "lucide-react";
|
||
|
|
import {
|
||
|
|
DropdownMenu,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuItem,
|
||
|
|
DropdownMenuTrigger,
|
||
|
|
} from "@/components/ui/dropdown-menu";
|
||
|
|
|
||
|
|
export function PageListPanel() {
|
||
|
|
const {
|
||
|
|
layoutConfig,
|
||
|
|
currentPageId,
|
||
|
|
addPage,
|
||
|
|
deletePage,
|
||
|
|
duplicatePage,
|
||
|
|
reorderPages,
|
||
|
|
selectPage,
|
||
|
|
updatePageSettings,
|
||
|
|
} = useReportDesigner();
|
||
|
|
|
||
|
|
const [editingPageId, setEditingPageId] = useState<string | null>(null);
|
||
|
|
const [editingName, setEditingName] = useState("");
|
||
|
|
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
|
||
|
|
|
||
|
|
const handleStartEdit = (pageId: string, currentName: string) => {
|
||
|
|
setEditingPageId(pageId);
|
||
|
|
setEditingName(currentName);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSaveEdit = () => {
|
||
|
|
if (editingPageId && editingName.trim()) {
|
||
|
|
updatePageSettings(editingPageId, { page_name: editingName.trim() });
|
||
|
|
}
|
||
|
|
setEditingPageId(null);
|
||
|
|
setEditingName("");
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCancelEdit = () => {
|
||
|
|
setEditingPageId(null);
|
||
|
|
setEditingName("");
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDragStart = (index: number) => {
|
||
|
|
setDraggedIndex(index);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDragOver = (e: React.DragEvent, index: number) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (draggedIndex === null || draggedIndex === index) return;
|
||
|
|
|
||
|
|
// 실시간으로 순서 변경하지 않고, drop 시에만 변경
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDrop = (e: React.DragEvent, targetIndex: number) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (draggedIndex === null) return;
|
||
|
|
|
||
|
|
const sourceIndex = draggedIndex;
|
||
|
|
if (sourceIndex !== targetIndex) {
|
||
|
|
reorderPages(sourceIndex, targetIndex);
|
||
|
|
}
|
||
|
|
|
||
|
|
setDraggedIndex(null);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDragEnd = () => {
|
||
|
|
setDraggedIndex(null);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-background flex h-full w-64 flex-col border-r">
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="flex items-center justify-between border-b p-3">
|
||
|
|
<h3 className="text-sm font-semibold">페이지 목록</h3>
|
||
|
|
<Button size="sm" variant="ghost" onClick={() => addPage()}>
|
||
|
|
<Plus className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 페이지 목록 */}
|
||
|
|
<ScrollArea className="flex-1 p-2">
|
||
|
|
<div className="space-y-2">
|
||
|
|
{layoutConfig.pages
|
||
|
|
.sort((a, b) => a.page_order - b.page_order)
|
||
|
|
.map((page, index) => (
|
||
|
|
<Card
|
||
|
|
key={page.page_id}
|
||
|
|
draggable
|
||
|
|
onDragStart={() => handleDragStart(index)}
|
||
|
|
onDragOver={(e) => handleDragOver(e, index)}
|
||
|
|
onDrop={(e) => handleDrop(e, index)}
|
||
|
|
onDragEnd={handleDragEnd}
|
||
|
|
className={`group relative cursor-pointer transition-all hover:shadow-md ${
|
||
|
|
page.page_id === currentPageId
|
||
|
|
? "border-primary bg-primary/5 ring-primary/20 ring-2"
|
||
|
|
: "border-border hover:border-primary/50"
|
||
|
|
} ${draggedIndex === index ? "opacity-50" : ""}`}
|
||
|
|
onClick={() => selectPage(page.page_id)}
|
||
|
|
>
|
||
|
|
<div className="p-3">
|
||
|
|
{/* 드래그 핸들 & 페이지 정보 */}
|
||
|
|
<div className="flex items-start gap-2">
|
||
|
|
<div className="text-muted-foreground cursor-grab pt-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||
|
|
<GripVertical className="h-4 w-4" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
{/* 페이지 이름 편집 */}
|
||
|
|
{editingPageId === page.page_id ? (
|
||
|
|
<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
|
||
|
|
<Input
|
||
|
|
value={editingName}
|
||
|
|
onChange={(e) => setEditingName(e.target.value)}
|
||
|
|
onKeyDown={(e) => {
|
||
|
|
if (e.key === "Enter") handleSaveEdit();
|
||
|
|
if (e.key === "Escape") handleCancelEdit();
|
||
|
|
}}
|
||
|
|
className="h-6 text-sm"
|
||
|
|
autoFocus
|
||
|
|
/>
|
||
|
|
<Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={handleSaveEdit}>
|
||
|
|
<Check className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
<Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={handleCancelEdit}>
|
||
|
|
<X className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="truncate text-sm font-medium">{page.page_name}</span>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant="ghost"
|
||
|
|
className="h-5 w-5 p-0 opacity-0 transition-opacity group-hover:opacity-100"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
handleStartEdit(page.page_id, page.page_name);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Edit2 className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 페이지 정보 */}
|
||
|
|
<div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
|
||
|
|
<span>
|
||
|
|
{page.width} x {page.height}mm
|
||
|
|
</span>
|
||
|
|
<span>•</span>
|
||
|
|
<span>{page.components.length}개 컴포넌트</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 액션 메뉴 */}
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant="ghost"
|
||
|
|
className="h-6 w-6 p-0 opacity-0 transition-opacity group-hover:opacity-100"
|
||
|
|
>
|
||
|
|
<span className="sr-only">메뉴</span>
|
||
|
|
<span className="text-xl leading-none">⋮</span>
|
||
|
|
</Button>
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
<DropdownMenuContent align="end">
|
||
|
|
<DropdownMenuItem
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
duplicatePage(page.page_id);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Copy className="mr-2 h-4 w-4" />
|
||
|
|
복제
|
||
|
|
</DropdownMenuItem>
|
||
|
|
<DropdownMenuItem
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
deletePage(page.page_id);
|
||
|
|
}}
|
||
|
|
disabled={layoutConfig.pages.length <= 1}
|
||
|
|
className="text-destructive focus:text-destructive"
|
||
|
|
>
|
||
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
||
|
|
삭제
|
||
|
|
</DropdownMenuItem>
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 썸네일 (간단한 미리보기) */}
|
||
|
|
<div className="mt-2 aspect-[210/297] overflow-hidden rounded border bg-white">
|
||
|
|
<div className="relative h-full w-full origin-top-left scale-[0.15]">
|
||
|
|
<div
|
||
|
|
className="absolute inset-0 bg-white"
|
||
|
|
style={{
|
||
|
|
width: `${page.width * 3.7795}px`,
|
||
|
|
height: `${page.height * 3.7795}px`,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* 간단한 컴포넌트 표시 */}
|
||
|
|
{page.components.slice(0, 10).map((comp) => (
|
||
|
|
<div
|
||
|
|
key={comp.id}
|
||
|
|
className="border-primary/20 bg-primary/5 absolute border"
|
||
|
|
style={{
|
||
|
|
left: `${comp.x}px`,
|
||
|
|
top: `${comp.y}px`,
|
||
|
|
width: `${comp.width}px`,
|
||
|
|
height: `${comp.height}px`,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</ScrollArea>
|
||
|
|
|
||
|
|
{/* 푸터 */}
|
||
|
|
<div className="border-t p-2">
|
||
|
|
<Button size="sm" variant="outline" className="w-full" onClick={() => addPage()}>
|
||
|
|
<Plus className="mr-2 h-4 w-4" />새 페이지 추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|