캔버스 키보드 너지: 멀티선택 델타 적용 및 축별 스냅 보정, 수용 테스트 추가

components/wysiwyg/Canvas.tsx

@@ -111,14 +111,22 @@ export function Canvas({ frame, onChange, onSelectIds, enableGuides = true }: Ca
     else if (e.key === 'ArrowDown') dy = step
     else return
     e.preventDefault()
-    updateObject(selected.id, (o) => {
-      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])
+
+    // 기준 객체(선택 anchor)에 대해 목표 좌표 계산 후 델타를 산출하여 멀티선택 전체에 동일 적용
+    const tx = selected.x + dx
+    const ty = selected.y + dy
+    // 스냅은 이동한 축에만 적용, 이동이 없는 축은 값 유지
+    const nx = dx !== 0 ? (useSnap ? snap8(tx) : tx) : selected.x
+    const ny = dy !== 0 ? (useSnap ? snap8(ty) : ty) : selected.y
+    const ddx = nx - selected.x
+    const ddy = ny - selected.y
+
+    if (selectedIds.length > 1) {
+      updateObjects(selectedIds, (o) => ({ ...o, x: o.x + ddx, y: o.y + ddy }))
+    } else {
+      updateObject(selected.id, (o) => ({ ...o, x: o.x + ddx, y: o.y + ddy }))
+    }
+  }, [selected, selectedIds, updateObject, updateObjects])
 
   const onMouseDownObj = useCallback((e: React.MouseEvent, o: WObject) => {
     if (e.shiftKey) {