auto: PR for feat/export-css-tokens-deep (#83)

Automated PR created on push to feat/export-css-tokens-deep

Reviewed-on: #83
Co-authored-by: Jaybe <master@jaybe.dev>
Co-committed-by: Jaybe <master@jaybe.dev>

components/wysiwyg/Canvas.nudge.multiselect.acceptance.test.tsx

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { WysiwygBuilderPage } from '@/components/wysiwyg/WysiwygBuilderPage'
+
+function getBoxes(ids: string[]) {
+  return ids.map((id) => {
+    const el = screen.getByTestId(`obj-${id}`) as HTMLElement
+    const s = el.style as CSSStyleDeclaration
+    return {
+      id,
+      left: parseInt(s.left || '0', 10),
+      top: parseInt(s.top || '0', 10),
+      width: parseInt(s.width || '0', 10),
+      height: parseInt(s.height || '0', 10),
+    }
+  })
+}
+
+function snap8(v: number) { return Math.round(v / 8) * 8 }
+
+async function addTextAt(x: number, y: number) {
+  fireEvent.click(screen.getByRole('button', { name: /^Add Text$/i }))
+  const all = await screen.findAllByTestId(/obj-text-/)
+  const obj = all[all.length - 1] as HTMLElement
+  // select the newly added object
+  fireEvent.mouseDown(obj, { clientX: x, clientY: y })
+  fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
+  // move via props inputs (X/Y) for the selected object
+  const xInput = screen.getByLabelText('X') as HTMLInputElement
+  const yInput = screen.getByLabelText('Y') as HTMLInputElement
+  fireEvent.change(xInput, { target: { value: String(x) } })
+  fireEvent.change(yInput, { target: { value: String(y) } })
+  return obj.getAttribute('data-testid')!.replace('obj-', '')
+}
+
+describe('Canvas multiselect keyboard nudge', () => {
+  it('ArrowRight applies 1px then grid snap to both (no modifier)', async () => {
+    render(<WysiwygBuilderPage />)
+    const id1 = await addTextAt(60, 60)
+    const id2 = await addTextAt(140, 60)
+
+    const canvas = screen.getByTestId('wysiwyg-canvas')
+    // marquee select both
+    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
+    fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
+    fireEvent.mouseUp(canvas)
+
+    const before = getBoxes([id1, id2])
+    fireEvent.keyDown(canvas, { key: 'ArrowRight' })
+    const after = getBoxes([id1, id2])
+    const expLeft0 = snap8(before[0].left + 1)
+    const dx = expLeft0 - before[0].left
+    after.forEach((b, i) => {
+      expect(b.left).toBe(before[i].left + dx)
+      expect(b.top).toBe(before[i].top)
+    })
+  })
+
+  it('Shift+ArrowUp moves exactly -1px on Y for both (no snap)', async () => {
+    render(<WysiwygBuilderPage />)
+    const id1 = await addTextAt(60, 60)
+    const id2 = await addTextAt(140, 60)
+
+    const canvas = screen.getByTestId('wysiwyg-canvas')
+    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
+    fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
+    fireEvent.mouseUp(canvas)
+
+    const before = getBoxes([id1, id2])
+    fireEvent.keyDown(canvas, { key: 'ArrowUp', shiftKey: true })
+    const after = getBoxes([id1, id2])
+    after.forEach((b, i) => {
+      expect(b.top).toBe(before[i].top - 1)
+      expect(b.left).toBe(before[i].left)
+    })
+  })
+
+  it('Alt+ArrowRight moves +16px then snaps to grid for both', async () => {
+    render(<WysiwygBuilderPage />)
+    const id1 = await addTextAt(60, 60)
+    const id2 = await addTextAt(140, 60)
+
+    const canvas = screen.getByTestId('wysiwyg-canvas')
+    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
+    fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
+    fireEvent.mouseUp(canvas)
+
+    const before = getBoxes([id1, id2])
+    fireEvent.keyDown(canvas, { key: 'ArrowRight', altKey: true })
+    const after = getBoxes([id1, id2])
+    const expLeft0 = snap8(before[0].left + 16)
+    const dx = expLeft0 - before[0].left
+    after.forEach((b, i) => {
+      expect(b.left).toBe(before[i].left + dx)
+      expect(b.top).toBe(before[i].top)
+    })
+  })
+})

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) {
@@ -426,9 +434,11 @@ export function Canvas({ frame, onChange, onSelectIds, enableGuides = true }: Ca
       tabIndex={0}
       onKeyDown={onKeyDown}
       onMouseDown={(e) => {
-        // 빈 캔버스 클릭 시 마퀴 시작 또는 선택 해제
-        // 객체 onMouseDown에서 선택을 처리하므로, 여기서는 드래그 박스 시작만 담당
-        if ((e.target as HTMLElement).dataset.testid === 'wysiwyg-canvas') {
+        // 빈 영역(객체/핸들이 아닌 영역) 클릭 시 마퀴 시작 또는 선택 해제
+        const t = e.target as HTMLElement
+        const isObj = !!t.closest('[data-testid^="obj-"],[aria-label^="object "]')
+        const isHandle = !!t.closest('[data-testid^="resize-handle-"]')
+        if (!isObj && !isHandle) {
           setSelectedIds([])
           setMarquee({ active: true, x0: e.clientX, y0: e.clientY, x1: e.clientX, y1: e.clientY })
           try { onSelectIds?.([]) } catch {}