WYSIWYG: 멀티선택/그룹 스냅·가이드(그룹 bbox)/마퀴 선택 TDD·구현 및 문서 업데이트

components/wysiwyg/Canvas.guide.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/react'
+import { Canvas } from '@/components/wysiwyg/Canvas'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function makeFrame(): Frame {
+  return {
+    id: 'f1',
+    width: 320,
+    height: 200,
+    background: '#ffffff',
+    layers: [
+      { id: 'l1', name: 'L1', visible: true, locked: false, objects: [
+        { id: 'o1', type: 'image', x: 101, y: 99, width: 50, height: 40, rotate: 0, zIndex: 0, props: { src: 'x', alt: '' } },
+      ] },
+    ],
+  }
+}
+
+describe('Canvas guidelines during drag with snap', () => {
+  it('shows x/y guide lines snapping to 8px grid while dragging', () => {
+    const frame = makeFrame()
+    const { getByTestId, queryByTestId } = render(<Canvas frame={frame} />)
+    const canvas = getByTestId('wysiwyg-canvas')
+    const obj = getByTestId('obj-o1')
+
+    expect(queryByTestId('guide-x')).toBeNull()
+    expect(queryByTestId('guide-y')).toBeNull()
+
+    fireEvent.mouseDown(obj, { clientX: 200, clientY: 150 })
+    fireEvent.mouseMove(canvas, { clientX: 203, clientY: 151 })
+
+    expect(getByTestId('guide-x')).toBeInTheDocument()
+    expect(getByTestId('guide-y')).toBeInTheDocument()
+
+    fireEvent.mouseUp(canvas)
+
+    expect(queryByTestId('guide-x')).toBeNull()
+    expect(queryByTestId('guide-y')).toBeNull()
+  })
+})