복제 및 스타일 복사 기능 추가

frontend/components/report/designer/CanvasComponent.tsx

@@ -168,6 +168,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
     selectedComponentId,
     selectedComponentIds,
     selectComponent,
+    selectMultipleComponents,
     updateComponent,
     getQueryResult,
     snapValueToGrid,
@@ -178,12 +179,19 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
     margins,
     layoutConfig,
     currentPageId,
+    duplicateAtPosition,
   } = useReportDesigner();
   const [isDragging, setIsDragging] = useState(false);
   const [isResizing, setIsResizing] = useState(false);
   const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
   const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
   const componentRef = useRef<HTMLDivElement>(null);
+  
+  // Alt+드래그 복제를 위한 상태
+  const [isAltDuplicating, setIsAltDuplicating] = useState(false);
+  const duplicatedIdsRef = useRef<string[]>([]);
+  // 복제 시 원본 컴포넌트들의 위치 저장 (상대적 위치 유지용)
+  const originalPositionsRef = useRef<Map<string, { x: number; y: number }>>(new Map());
 
   const isSelected = selectedComponentId === component.id;
   const isMultiSelected = selectedComponentIds.includes(component.id);
@@ -308,6 +316,8 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
     // Ctrl/Cmd 키 감지 (다중 선택)
     const isMultiSelect = e.ctrlKey || e.metaKey;
+    // Alt 키 감지 (복제 드래그)
+    const isAltPressed = e.altKey;
 
     // 이미 다중 선택의 일부인 경우: 선택 상태 유지 (드래그만 시작)
     const isPartOfMultiSelection = selectedComponentIds.length > 1 && selectedComponentIds.includes(component.id);
@@ -325,6 +335,66 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
       }
     }
 
+    // Alt+드래그: 복제 모드
+    if (isAltPressed) {
+      // 복제할 컴포넌트 ID 목록 결정
+      let idsToClone: string[] = [];
+      
+      if (isPartOfMultiSelection) {
+        // 다중 선택된 경우: 잠기지 않은 선택된 모든 컴포넌트 복제
+        idsToClone = selectedComponentIds.filter((id) => {
+          const c = components.find((comp) => comp.id === id);
+          return c && !c.locked;
+        });
+      } else if (isGrouped) {
+        // 그룹화된 경우: 같은 그룹의 모든 컴포넌트 복제
+        idsToClone = components
+          .filter((c) => c.groupId === component.groupId && !c.locked)
+          .map((c) => c.id);
+      } else {
+        // 단일 컴포넌트
+        idsToClone = [component.id];
+      }
+
+      if (idsToClone.length > 0) {
+        // 원본 컴포넌트들의 위치 저장 (복제본 ID -> 원본 위치 매핑용)
+        const positionsMap = new Map<string, { x: number; y: number }>();
+        idsToClone.forEach((id) => {
+          const comp = components.find((c) => c.id === id);
+          if (comp) {
+            positionsMap.set(id, { x: comp.x, y: comp.y });
+          }
+        });
+
+        // 복제 생성 (오프셋 없이 원래 위치에)
+        const newIds = duplicateAtPosition(idsToClone, 0, 0);
+        if (newIds.length > 0) {
+          // 복제된 컴포넌트 ID와 원본 위치 매핑
+          // newIds[i]는 idsToClone[i]에서 복제됨
+          const dupPositionsMap = new Map<string, { x: number; y: number }>();
+          newIds.forEach((newId, index) => {
+            const originalId = idsToClone[index];
+            const originalPos = positionsMap.get(originalId);
+            if (originalPos) {
+              dupPositionsMap.set(newId, originalPos);
+            }
+          });
+          originalPositionsRef.current = dupPositionsMap;
+
+          // 복제된 컴포넌트들을 선택하고 드래그 시작
+          duplicatedIdsRef.current = newIds;
+          setIsAltDuplicating(true);
+          
+          // 복제된 컴포넌트들 선택
+          if (newIds.length === 1) {
+            selectComponent(newIds[0], false);
+          } else {
+            selectMultipleComponents(newIds);
+          }
+        }
+      }
+    }
+
     setIsDragging(true);
     setDragStart({
       x: e.clientX - component.x,
@@ -388,6 +458,31 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
         const deltaX = snappedX - component.x;
         const deltaY = snappedY - component.y;
 
+        // Alt+드래그 복제 모드: 원본은 이동하지 않고 복제본만 이동
+        if (isAltDuplicating && duplicatedIdsRef.current.length > 0) {
+          // 복제된 컴포넌트들 이동 (각각의 원본 위치 기준으로 절대 위치 설정)
+          duplicatedIdsRef.current.forEach((dupId) => {
+            const dupComp = components.find((c) => c.id === dupId);
+            const originalPos = originalPositionsRef.current.get(dupId);
+            
+            if (dupComp && originalPos) {
+              // 각 복제본의 원본 위치에서 delta만큼 이동
+              const targetX = originalPos.x + deltaX;
+              const targetY = originalPos.y + deltaY;
+
+              // 경계 체크
+              const dupMaxX = canvasWidthPx - marginRightPx - dupComp.width;
+              const dupMaxY = canvasHeightPx - marginBottomPx - dupComp.height;
+
+              updateComponent(dupId, {
+                x: Math.min(Math.max(marginLeftPx, targetX), dupMaxX),
+                y: Math.min(Math.max(marginTopPx, targetY), dupMaxY),
+              });
+            }
+          });
+          return; // 원본 컴포넌트는 이동하지 않음
+        }
+
         // 현재 컴포넌트 이동
         updateComponent(component.id, {
           x: snappedX,
@@ -492,6 +587,10 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
     const handleMouseUp = () => {
       setIsDragging(false);
       setIsResizing(false);
+      // Alt 복제 상태 초기화
+      setIsAltDuplicating(false);
+      duplicatedIdsRef.current = [];
+      originalPositionsRef.current = new Map();
       // 가이드라인 초기화
       clearAlignmentGuides();
     };
@@ -506,6 +605,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
   }, [
     isDragging,
     isResizing,
+    isAltDuplicating,
     dragStart.x,
     dragStart.y,
     resizeStart.x,

frontend/components/report/designer/ReportDesignerCanvas.tsx

@@ -211,6 +211,9 @@ export function ReportDesignerCanvas() {
     alignmentGuides,
     copyComponents,
     pasteComponents,
+    duplicateComponents,
+    copyStyles,
+    pasteStyles,
     undo,
     redo,
     showRuler,
@@ -629,16 +632,39 @@ export function ReportDesignerCanvas() {
         }
       }
 
+      // Ctrl+Shift+C (또는 Cmd+Shift+C): 스타일 복사 (일반 복사보다 먼저 체크)
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "c") {
+        e.preventDefault();
+        copyStyles();
+        return;
+      }
+
+      // Ctrl+Shift+V (또는 Cmd+Shift+V): 스타일 붙여넣기 (일반 붙여넣기보다 먼저 체크)
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "v") {
+        e.preventDefault();
+        pasteStyles();
+        return;
+      }
+
       // Ctrl+C (또는 Cmd+C): 복사
-      if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "c") {
         e.preventDefault();
         copyComponents();
+        return;
       }
 
       // Ctrl+V (또는 Cmd+V): 붙여넣기
-      if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "v") {
         e.preventDefault();
         pasteComponents();
+        return;
+      }
+
+      // Ctrl+D (또는 Cmd+D): 복제
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "d") {
+        e.preventDefault();
+        duplicateComponents();
+        return;
       }
 
       // Ctrl+Shift+Z 또는 Ctrl+Y (또는 Cmd+Shift+Z / Cmd+Y): Redo (Undo보다 먼저 체크)
@@ -670,6 +696,9 @@ export function ReportDesignerCanvas() {
     removeComponent,
     copyComponents,
     pasteComponents,
+    duplicateComponents,
+    copyStyles,
+    pasteStyles,
     undo,
     redo,
   ]);