diff --git a/frontend/components/report/designer/ReportDesignerToolbar.tsx b/frontend/components/report/designer/ReportDesignerToolbar.tsx index ebb7c7cb..1ec55145 100644 --- a/frontend/components/report/designer/ReportDesignerToolbar.tsx +++ b/frontend/components/report/designer/ReportDesignerToolbar.tsx @@ -1,10 +1,38 @@ "use client"; import { Button } from "@/components/ui/button"; -import { Save, Eye, RotateCcw, ArrowLeft, Loader2, BookTemplate, Grid3x3, Undo2, Redo2 } from "lucide-react"; +import { + Save, + Eye, + RotateCcw, + ArrowLeft, + Loader2, + BookTemplate, + Grid3x3, + Undo2, + Redo2, + AlignLeft, + AlignRight, + AlignVerticalJustifyStart, + AlignVerticalJustifyEnd, + AlignCenterHorizontal, + AlignCenterVertical, + AlignHorizontalDistributeCenter, + AlignVerticalDistributeCenter, + RectangleHorizontal, + RectangleVertical, + Square, +} from "lucide-react"; import { useRouter } from "next/navigation"; import { useReportDesigner } from "@/contexts/ReportDesignerContext"; import { useState } from "react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; import { SaveAsTemplateModal } from "./SaveAsTemplateModal"; import { reportApi } from "@/lib/api/reportApi"; @@ -30,11 +58,27 @@ export function ReportDesignerToolbar() { redo, canUndo, canRedo, + selectedComponentIds, + alignLeft, + alignRight, + alignTop, + alignBottom, + alignCenterHorizontal, + alignCenterVertical, + distributeHorizontal, + distributeVertical, + makeSameWidth, + makeSameHeight, + makeSameSize, } = useReportDesigner(); const [showPreview, setShowPreview] = useState(false); const [showSaveAsTemplate, setShowSaveAsTemplate] = useState(false); const { toast } = useToast(); + // 정렬 버튼 활성화 조건 + const canAlign = selectedComponentIds && selectedComponentIds.length >= 2; + const canDistribute = selectedComponentIds && selectedComponentIds.length >= 3; + // 템플릿 저장 가능 여부: 컴포넌트가 있어야 함 const canSaveAsTemplate = components.length > 0; @@ -173,6 +217,105 @@ export function ReportDesignerToolbar() { > + + {/* 정렬 드롭다운 */} + + + + + + + + 왼쪽 정렬 + + + + 오른쪽 정렬 + + + + 위쪽 정렬 + + + + 아래쪽 정렬 + + + + + 가로 중앙 정렬 + + + + 세로 중앙 정렬 + + + + + {/* 배치 드롭다운 */} + + + + + + + + 가로 균등 배치 + + + + 세로 균등 배치 + + + + + {/* 크기 조정 드롭다운 */} + + + + + + + + 같은 너비로 + + + + 같은 높이로 + + + + 같은 크기로 + + +