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

components/wysiwyg/Canvas.marquee.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Canvas } from '@/components/wysiwyg/Canvas'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+const frame: Frame = {
+  id: 'f-marquee',
+  width: 500,
+  height: 400,
+  background: '#fff',
+  layers: [
+    { id: 'l1', name: 'L1', visible: true, locked: false, objects: [
+      { id: 'o1', type: 'text', x: 10, y: 10, width: 40, height: 30, rotate: 0, zIndex: 3, props: { text: 'A', fontSize: 16, color: '#000' } },
+      { id: 'o2', type: 'text', x: 80, y: 12, width: 40, height: 30, rotate: 0, zIndex: 2, props: { text: 'B', fontSize: 16, color: '#000' } },
+      { id: 'o3', type: 'text', x: 200, y: 100, width: 40, height: 30, rotate: 0, zIndex: 1, props: { text: 'C', fontSize: 16, color: '#000' } },
+    ]}
+  ]
+}
+
+describe('Canvas marquee multi-select', () => {
+  it('selects objects intersecting the marquee rectangle', () => {
+    render(<Canvas frame={frame} />)
+    const canvas = screen.getByTestId('wysiwyg-canvas')
+
+    // 캔버스 빈 공간에서 드래그 박스(마퀴) 생성: (5,5)→(130,50)
+    fireEvent.mouseDown(canvas, { clientX: 5, clientY: 5 })
+    fireEvent.mouseMove(canvas, { clientX: 130, clientY: 50 })
+    fireEvent.mouseUp(canvas)
+
+    const o1 = screen.getByTestId('obj-o1')
+    const o2 = screen.getByTestId('obj-o2')
+    const o3 = screen.getByTestId('obj-o3')
+
+    expect(o1).toHaveStyle({ outline: '2px solid #0ea5e9' })
+    expect(o2).toHaveStyle({ outline: '2px solid #0ea5e9' })
+    expect(o3).toHaveStyle({ outline: 'none' })
+  })
+})