feat(wysiwyg): 레이어/속성 패널 및 Export(절대배치) 1차 TDD/구현

- LayersPanel: 순서 변경/잠금/숨김 토글
- PropsPanel: 위치/크기/회전 및 이미지 src/alt 편집
- exportFrame: frame-scale 토큰 및 오브젝트 절대배치 HTML/CSS 출력
- 테스트 추가 및 전체 그린 유지

components/wysiwyg/Canvas.tsx

@@ -14,6 +14,8 @@ export function Canvas({ frame, onChange }: CanvasProps) {
   const [model, setModel] = useState<Frame>(frame)
   const [selectedId, setSelectedId] = useState<string | null>(model.layers[0]?.objects[0]?.id ?? 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 rotatingRef = useRef<{ id: string; startX: number; startY: number; origDeg: number } | null>(null)
 
   const selected = useMemo(() => {
     for (const layer of model.layers) {
@@ -53,17 +55,49 @@ export function Canvas({ frame, onChange }: CanvasProps) {
   }, [])
 
   const onMouseMoveCanvas = useCallback((e: React.MouseEvent) => {
+    const rot = rotatingRef.current
+    if (rot) {
+      const dx = e.clientX - rot.startX
+      let next = rot.origDeg + dx
+      if (!e.shiftKey) {
+        next = Math.round(next / 15) * 15
+      }
+      updateObject(rot.id, (o) => ({ ...o, rotate: next }))
+      return
+    }
+    const r = resizingRef.current
+    if (r) {
+      const dx = e.clientX - r.startX
+      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 }))
+      return
+    }
     const d = draggingRef.current
-    if (!d) return
-    const dx = e.clientX - d.startX
-    const dy = e.clientY - d.startY
-    const nx = snap8(d.origX + dx)
-    const ny = snap8(d.origY + dy)
-    updateObject(d.id, (o) => ({ ...o, x: nx, y: ny }))
+    if (d) {
+      const dx = e.clientX - d.startX
+      const dy = e.clientY - d.startY
+      const nx = snap8(d.origX + dx)
+      const ny = snap8(d.origY + dy)
+      updateObject(d.id, (o) => ({ ...o, x: nx, y: ny }))
+    }
   }, [updateObject])
 
   const onMouseUpCanvas = useCallback(() => {
     draggingRef.current = null
+    resizingRef.current = null
+    rotatingRef.current = null
+  }, [])
+
+  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 }
+  }, [])
+
+  const onMouseDownRotate = useCallback((e: React.MouseEvent, o: WObject) => {
+    e.stopPropagation()
+    rotatingRef.current = { id: o.id, startX: e.clientX, startY: e.clientY, origDeg: o.rotate }
   }, [])
 
   return (
@@ -84,7 +118,22 @@ export function Canvas({ frame, onChange }: CanvasProps) {
           aria-label={`object ${o.id}`}
           onMouseDown={(e) => onMouseDownObj(e, o)}
           style={{ position: 'absolute', left: o.x, top: o.y, width: o.width, height: o.height, transform: `rotate(${o.rotate}deg)`, outline: selectedId===o.id? '2px solid #0ea5e9':'none' }}
-        />
+        >
+          {selectedId === o.id && (
+            <div
+              data-testid={`resize-handle-${o.id}`}
+              onMouseDown={(e) => onMouseDownResize(e, o)}
+              style={{ position: 'absolute', right: 0, bottom: 0, width: 10, height: 10, background: '#0ea5e9', cursor: 'nwse-resize' }}
+            />
+          )}
+          {selectedId === o.id && (
+            <div
+              data-testid={`rotate-handle-${o.id}`}
+              onMouseDown={(e) => onMouseDownRotate(e, o)}
+              style={{ position: 'absolute', left: '50%', top: -16, width: 10, height: 10, marginLeft: -5, background: '#0ea5e9', borderRadius: 5, cursor: 'grab' }}
+            />
+          )}
+        </div>
       )))}
     </div>
   )