WYSIWYG: 멀티선택 그룹 리사이즈/회전 TDD 추가 및 구현\n- 리사이즈: 마지막 선택 객체 스냅 델타를 전체 선택 객체에 균등 적용\n- 회전: 스냅/Shift 미세회전 델타를 전체 선택 객체에 균등 적용\n- 테스트 안정화(waitFor) 및 훅 의존성 보정(일부 경고 잔존)

2025-11-17 01:06:14 +09:00
parent 498ffb675a
commit 713648fb3a
3 changed files with 197 additions and 7 deletions
@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import { Canvas } from '@/components/wysiwyg/Canvas'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function makeFrame(): Frame {
+  return {
+    id: 'f1',
+    width: 400,
+    height: 300,
+    background: '#ffffff',
+    layers: [
+      {
+        id: 'l1',
+        name: 'L1',
+        visible: true,
+        locked: false,
+        objects: [
+          { id: 'o1', type: 'image', x: 20, y: 20, width: 50, height: 40, rotate: 0, zIndex: 0, props: { src: 'x', alt: '' } },
+          { id: 'o2', type: 'image', x: 120, y: 60, width: 80, height: 30, rotate: 0, zIndex: 1, props: { src: 'y', alt: '' } },
+        ],
+      },
+    ],
+  }
+}
+
+describe('WYSIWYG Canvas multigroup resize', () => {
+  it('resizes all selected objects by the same snapped delta when resizing last-selected', async () => {
+    const frame = makeFrame()
+    const { getByTestId } = render(<Canvas frame={frame} />)
+
+    // select o1
+    const obj1 = getByTestId('obj-o1')
+    fireEvent.mouseDown(obj1, { clientX: 25, clientY: 25 })
+    // shift+select o2
+    const obj2 = getByTestId('obj-o2')
+    fireEvent.mouseDown(obj2, { clientX: 125, clientY: 65, shiftKey: true })
+
+    // resize using last-selected (o2) handle
+    const handle2 = getByTestId('resize-handle-o2')
+    const canvas = getByTestId('wysiwyg-canvas')
+
+    // Start at bottom-right corner; move by +7,+9 (snap8 => +8, +8)
+    fireEvent.mouseDown(handle2, { clientX: 200, clientY: 90 })
+    fireEvent.mouseMove(canvas, { clientX: 207, clientY: 99 })
+    fireEvent.mouseUp(canvas)
+
+    const o1 = getByTestId('obj-o1')
+    const o2 = getByTestId('obj-o2')
+
+    await waitFor(() => {
+      expect(o2).toHaveStyle({ width: '88px', height: '40px' })
+      expect(o1).toHaveStyle({ width: '58px', height: '50px' })
+    })
+  })
+})