레이어 관리 구현

frontend/components/report/designer/ReportDesignerToolbar.tsx

@@ -22,6 +22,10 @@ import {
   RectangleHorizontal,
   RectangleVertical,
   Square,
+  ChevronDown,
+  ChevronsDown,
+  ChevronsUp,
+  ChevronUp,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useReportDesigner } from "@/contexts/ReportDesignerContext";
@@ -70,14 +74,19 @@ export function ReportDesignerToolbar() {
     makeSameWidth,
     makeSameHeight,
     makeSameSize,
+    bringToFront,
+    sendToBack,
+    bringForward,
+    sendBackward,
   } = 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 hasSelection = selectedComponentIds && selectedComponentIds.length >= 1;
 
   // 템플릿 저장 가능 여부: 컴포넌트가 있어야 함
   const canSaveAsTemplate = components.length > 0;
@@ -316,6 +325,38 @@ export function ReportDesignerToolbar() {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
+
+          {/* 레이어 드롭다운 */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!hasSelection}
+                className="gap-2"
+                title="레이어 순서 (1개 이상 선택 필요)"
+              >
+                <ChevronsUp className="h-4 w-4" />
+                레이어
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={bringToFront}>
+                <ChevronsUp className="mr-2 h-4 w-4" />맨 앞으로
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={bringForward}>
+                <ChevronUp className="mr-2 h-4 w-4" />한 단계 앞으로
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={sendBackward}>
+                <ChevronDown className="mr-2 h-4 w-4" />한 단계 뒤로
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={sendToBack}>
+                <ChevronsDown className="mr-2 h-4 w-4" />맨 뒤로
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
           <Button variant="outline" size="sm" onClick={handleReset} className="gap-2">
             <RotateCcw className="h-4 w-4" />
             초기화