테스트/린트 안정화: 버튼 쿼리 모호성 제거, 훅 deps 보강, vi.spyOn 모킹, 멀티선택 Moveable 간섭 방지 재확인, 스냅 우선순위 회귀 그린

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

@@ -0,0 +1,95 @@
+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
+    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 directional resize', () => {
+  it('east handle increases width of all selected without shifting their x', 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)
+
+    // wait until aria-live announces 2 selections
+    const live1 = await screen.findByTestId('aria-live')
+    expect(live1.textContent || '').toMatch(/선택\s*2개/)
+    const before = getBoxes([id1, id2])
+    const hRight = await screen.findByTestId(`resize-handle-e-${id2}`)
+    fireEvent.mouseDown(hRight, { clientX: before[1].left + before[1].width, clientY: before[1].top + 5 })
+    fireEvent.mouseMove(screen.getByTestId('wysiwyg-canvas'), { clientX: before[1].left + before[1].width + 16, clientY: before[1].top + 5 })
+    fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
+
+    const after = getBoxes([id1, id2])
+    const dw = snap8(before[1].width + 16) - before[1].width
+    after.forEach((b, i) => {
+      expect(b.left).toBe(before[i].left)
+      expect(b.width).toBe(before[i].width + dw)
+      expect(b.top).toBe(before[i].top)
+      expect(b.height).toBe(before[i].height)
+    })
+  })
+
+  it('west handle moves x of all selected left and increases their width equally', 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])
+    const hLeft = await screen.findByTestId(`resize-handle-w-${id1}`)
+    fireEvent.mouseDown(hLeft, { clientX: before[0].left, clientY: before[0].top + 5 })
+    fireEvent.mouseMove(screen.getByTestId('wysiwyg-canvas'), { clientX: before[0].left - 16, clientY: before[0].top + 5 })
+    fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
+
+    const after = getBoxes([id1, id2])
+    const right0 = before[0].left + before[0].width
+    const expLeft0 = Math.min(snap8(before[0].left - 16), right0 - 8)
+    const dx = expLeft0 - before[0].left
+    const dw = (right0 - expLeft0) - before[0].width
+
+    after.forEach((b, i) => {
+      expect(b.left).toBe(before[i].left + dx)
+      expect(b.width).toBe(before[i].width + dw)
+      expect(b.top).toBe(before[i].top)
+      expect(b.height).toBe(before[i].height)
+    })
+  })
+})