WYSIWYG: 키보드 nudge(Shift 1px 비스냅, Alt 16px 스냅) TDD/구현 및 테스트

components/wysiwyg/Canvas.tsx

@@ -56,15 +56,23 @@ export function Canvas({ frame, onChange }: CanvasProps) {
   const onKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (!selected) return
     let dx = 0, dy = 0
-    if (e.key === 'ArrowLeft') dx = -1
-    else if (e.key === 'ArrowRight') dx = 1
-    else if (e.key === 'ArrowUp') dy = -1
-    else if (e.key === 'ArrowDown') dy = 1
+    let step = 1
+    let useSnap = true
+    // Shift: 미세 이동(1px, 스냅 없음), Alt: 가속 이동(16px, 스냅 적용)
+    if (e.shiftKey) { step = 1; useSnap = false }
+    else if (e.altKey) { step = 16; useSnap = true }
+
+    if (e.key === 'ArrowLeft') dx = -step
+    else if (e.key === 'ArrowRight') dx = step
+    else if (e.key === 'ArrowUp') dy = -step
+    else if (e.key === 'ArrowDown') dy = step
     else return
     e.preventDefault()
     updateObject(selected.id, (o) => {
-      const nx = snap8(o.x + dx)
-      const ny = snap8(o.y + dy)
+      const tx = o.x + dx
+      const ty = o.y + dy
+      const nx = useSnap ? snap8(tx) : tx
+      const ny = useSnap ? snap8(ty) : ty
       return { ...o, x: nx, y: ny }
     })
   }, [selected, updateObject])