WYSIWYG: 멀티선택 그룹 리사이즈/회전 TDD 추가 및 구현\n- 리사이즈: 마지막 선택 객체 스냅 델타를 전체 선택 객체에 균등 적용\n- 회전: 스냅/Shift 미세회전 델타를 전체 선택 객체에 균등 적용\n- 테스트 안정화(waitFor) 및 훅 의존성 보정(일부 경고 잔존)

components/wysiwyg/Canvas.tsx

@@ -33,7 +33,9 @@ export function Canvas({ frame, onChange }: CanvasProps) {
   const selectedId = selectedIds[selectedIds.length - 1] ?? null
   const draggingRef = useRef<{ id: string; startX: number; startY: number; origX: number; origY: number } | null>(null)
   const resizingRef = useRef<{ id: string; startX: number; startY: number; origW: number; origH: number } | null>(null)
+  const resizeGroupRef = useRef<{ ids: string[]; orig: Record<string, { w: number; h: number }> } | null>(null)
   const rotatingRef = useRef<{ id: string; startX: number; startY: number; origDeg: number } | null>(null)
+  const rotateGroupRef = useRef<{ ids: string[]; orig: Record<string, { d: number }> } | null>(null)
   const [showGuides, setShowGuides] = useState(false)
   const [guidePos, setGuidePos] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
   const [marquee, setMarquee] = useState<{
@@ -114,7 +116,7 @@ export function Canvas({ frame, onChange }: CanvasProps) {
     draggingRef.current = { id: o.id, startX: e.clientX, startY: e.clientY, origX: o.x, origY: o.y }
     setShowGuides(true)
     setGuidePos({ x: snap8(o.x), y: snap8(o.y) })
-  }, [])
+  }, [selectedIds, model.layers])
 
   const onMouseMoveCanvas = useCallback((e: React.MouseEvent) => {
     // 마퀴 선택 처리 우선
@@ -148,7 +150,18 @@ export function Canvas({ frame, onChange }: CanvasProps) {
       if (!e.shiftKey) {
         next = Math.round(next / 15) * 15
       }
-      updateObject(rot.id, (o) => ({ ...o, rotate: next }))
+      if (selectedIds.length > 1 && rotateGroupRef.current) {
+        const { ids, orig } = rotateGroupRef.current
+        const base = orig[rot.id]
+        const dd = next - base.d
+        updateObjects(ids, (o) => {
+          const o0 = orig[o.id]
+          if (!o0) return o
+          return { ...o, rotate: o0.d + dd }
+        })
+      } else {
+        updateObject(rot.id, (o) => ({ ...o, rotate: next }))
+      }
       return
     }
     const r = resizingRef.current
@@ -157,7 +170,23 @@ export function Canvas({ frame, onChange }: CanvasProps) {
       const dy = e.clientY - r.startY
       const nw = Math.max(8, snap8(r.origW + dx))
       const nh = Math.max(8, snap8(r.origH + dy))
-      updateObject(r.id, (o) => ({ ...o, width: nw, height: nh }))
+      if (selectedIds.length > 1 && resizeGroupRef.current) {
+        const { ids, orig } = resizeGroupRef.current
+        const base = orig[r.id]
+        const dw = nw - base.w
+        const dh = nh - base.h
+        updateObjects(ids, (o) => {
+          const o0 = orig[o.id]
+          if (!o0) return o
+          return {
+            ...o,
+            width: Math.max(8, o0.w + dw),
+            height: Math.max(8, o0.h + dh),
+          }
+        })
+      } else {
+        updateObject(r.id, (o) => ({ ...o, width: nw, height: nh }))
+      }
       return
     }
     const d = draggingRef.current
@@ -169,7 +198,7 @@ export function Canvas({ frame, onChange }: CanvasProps) {
       setGuidePos({ x: nx, y: ny })
       updateObject(d.id, (o) => ({ ...o, x: nx, y: ny }))
     }
-  }, [updateObject, marquee.active, marquee.x0, marquee.y0, model.layers])
+  }, [updateObject, updateObjects, marquee.active, marquee.x0, marquee.y0, model.layers, selectedIds.length])
 
   const onMouseUpCanvas = useCallback(() => {
     if (marquee.active) {
@@ -177,6 +206,7 @@ export function Canvas({ frame, onChange }: CanvasProps) {
     }
     draggingRef.current = null
     resizingRef.current = null
+    resizeGroupRef.current = null
     rotatingRef.current = null
     setShowGuides(false)
   }, [marquee.active])
@@ -184,12 +214,29 @@ export function Canvas({ frame, onChange }: CanvasProps) {
   const onMouseDownResize = useCallback((e: React.MouseEvent, o: WObject) => {
     e.stopPropagation()
     resizingRef.current = { id: o.id, startX: e.clientX, startY: e.clientY, origW: o.width, origH: o.height }
-  }, [])
+    // capture originals for group resize
+    const ids = Array.from(new Set([...selectedIds, o.id]))
+    const orig: Record<string, { w: number; h: number }> = {}
+    for (const ly of model.layers) {
+      for (const ob of ly.objects) {
+        if (ids.includes(ob.id)) orig[ob.id] = { w: ob.width, h: ob.height }
+      }
+    }
+    resizeGroupRef.current = { ids, orig }
+  }, [selectedIds, model.layers])
 
   const onMouseDownRotate = useCallback((e: React.MouseEvent, o: WObject) => {
     e.stopPropagation()
     rotatingRef.current = { id: o.id, startX: e.clientX, startY: e.clientY, origDeg: o.rotate }
-  }, [])
+    const ids = Array.from(new Set([...selectedIds, o.id]))
+    const orig: Record<string, { d: number }> = {}
+    for (const ly of model.layers) {
+      for (const ob of ly.objects) {
+        if (ids.includes(ob.id)) orig[ob.id] = { d: ob.rotate }
+      }
+    }
+    rotateGroupRef.current = { ids, orig }
+  }, [selectedIds, model.layers])
 
   return (
     <div
@@ -396,7 +443,17 @@ export function Canvas({ frame, onChange }: CanvasProps) {
           if (!selected) return
           const nw = Math.max(8, snap8(typeof width === 'number' ? width : 0))
           const nh = Math.max(8, snap8(typeof height === 'number' ? height : 0))
-          updateObject(selected.id, (o) => ({ ...o, width: nw, height: nh }))
+          if (selectedIds.length > 1) {
+            const dw = nw - selected.width
+            const dh = nh - selected.height
+            updateObjects(selectedIds, (o) => ({
+              ...o,
+              width: Math.max(8, o.width + dw),
+              height: Math.max(8, o.height + dh),
+            }))
+          } else {
+            updateObject(selected.id, (o) => ({ ...o, width: nw, height: nh }))
+          }
         }}
         onRotate={({ rotate, inputEvent }) => {
           if (!selected) return