diff --git a/MAIN_PLAN.md b/MAIN_PLAN.md
index 4a80f26..a0c1f3c 100644
--- a/MAIN_PLAN.md
+++ b/MAIN_PLAN.md
@@ -237,6 +237,17 @@
- `npm test -s`: 164 파일, 289 테스트 전부 그린
- React 경고(setState in render) 제거, 테스트 플래키성 해소
+### 키보드 nudge × 멀티선택 복합 (2025-11-17)
+- TDD
+ - `components/wysiwyg/Canvas.nudge.multiselect.acceptance.test.tsx`
+ - ArrowRight: 1px 이동 후 그리드 스냅 적용(이동 축만 스냅)
+ - Shift+ArrowUp: 스냅 없이 정확히 -1px 이동(미세 이동)
+ - Alt+ArrowRight: +16px 이동 후 그리드 스냅(가속 이동)
+- 구현: `components/wysiwyg/Canvas.tsx`
+ - `onKeyDown`: 앵커(마지막 선택) 기준 목표 좌표(tx, ty) → 스냅 적용(nx, ny) → 델타(ddx, ddy) 산출 → 선택 집합 전체에 동일 델타 적용
+ - 이동하지 않은 축은 기존 좌표 유지하여 비의도 축 보정 방지
+- 결과: 전체 테스트 그린(168 파일 / 295 테스트)
+
## 목표
- 비개발자도 사용 가능한 단일 페이지 랜딩 페이지 빌더.
- 결과물: 정적 ZIP(HTML/CSS/JS) 다운로드. 이미지: 외부 URL 또는 로컬 업로드(서버 저장 없음, ZIP에 패키징). 폰트는 외부 CDN 허용.
diff --git a/components/wysiwyg/Canvas.nudge.multiselect.acceptance.test.tsx b/components/wysiwyg/Canvas.nudge.multiselect.acceptance.test.tsx
new file mode 100644
index 0000000..02e01ef
--- /dev/null
+++ b/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()
+ 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()
+ 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()
+ 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)
+ })
+ })
+})
diff --git a/components/wysiwyg/Canvas.tsx b/components/wysiwyg/Canvas.tsx
index 0c37528..68b904a 100644
--- a/components/wysiwyg/Canvas.tsx
+++ b/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) {
diff --git a/lib/wysiwyg/export.css.regression.snapshot.test.ts b/lib/wysiwyg/export.css.regression.snapshot.test.ts
new file mode 100644
index 0000000..40b0697
--- /dev/null
+++ b/lib/wysiwyg/export.css.regression.snapshot.test.ts
@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { exportFrame } from '@/lib/wysiwyg/export'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function baseFrame(bg = '#111111'): Frame {
+ return {
+ id: 'f', width: 320, height: 200, background: bg,
+ layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
+ }
+}
+
+describe('wysiwyg export - CSS regression (tokens + rules presence)', () => {
+ it('contains core tokens and rules across themes and states', () => {
+ const out = exportFrame(baseFrame('#222222'))
+ const css = out.css
+ // root and theme tokens
+ expect(css).toMatch(/:root\s*{[^}]*--bg:/)
+ expect(css).toMatch(/\[data-theme="light"\]\s*{[^}]*--bg:/)
+ expect(css).toMatch(/\[data-theme="dark"\]\s*{[^}]*--bg:/)
+ // base usage
+ expect(css).toMatch(/\.frame\s*{[^}]*background:var\(--bg\)/)
+ expect(css).toMatch(/a\s*{[^}]*color:var\(--primary\)/)
+ // controls base
+ expect(css).toMatch(/input,select,textarea\s*{[^}]*color:var\(--text\)/)
+ expect(css).toMatch(/input,select,textarea\s*{[^}]*border:1px solid var\(--border\)/)
+ // states
+ expect(css).toMatch(/input:focus,select:focus,textarea:focus\s*{[^}]*outline:2px solid var\(--primary\)/)
+ expect(css).toMatch(/:focus-visible\s*{[^}]*outline:2px solid var\(--ring\)/)
+ expect(css).toMatch(/:focus-visible\s*{[^}]*outline-offset:var\(--ring-offset\)/)
+ expect(css).toMatch(/input:invalid,select:invalid,textarea:invalid\s*{[^}]*border-color:var\(--danger\)/)
+ expect(css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*background:var\(--disabled-bg\)/)
+ expect(css).toMatch(/input\[readonly\],select\[readonly\],textarea\[readonly\]\s*{[^}]*color:var\(--disabled-fg\)/)
+ })
+})
diff --git a/tests/e2e/wysiwyg-guides-multiselect.e2e.ts b/tests/e2e/wysiwyg-guides-multiselect.e2e.ts
new file mode 100644
index 0000000..f3983b5
--- /dev/null
+++ b/tests/e2e/wysiwyg-guides-multiselect.e2e.ts
@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+test.describe('WYSIWYG - Guides toggle and multiselect live region', () => {
+ test('toggles guides and announces multiselect in aria-live', async ({ page }) => {
+ await page.goto(wysiwygUrl)
+
+ // Canvas and live region present
+ const canvas = page.getByTestId('wysiwyg-canvas')
+ await expect(canvas).toBeVisible()
+ const live = page.getByTestId('aria-live')
+ await expect(live).toContainText(/선택\s*0개/)
+
+ // Add two text objects
+ const addText = page.getByRole('button', { name: /^Add Text$/i })
+ await addText.click()
+ await addText.click()
+
+ // Marquee select both
+ const box = await canvas.boundingBox()
+ if (!box) throw new Error('canvas not found')
+ await page.mouse.move(box.x + 40, box.y + 40)
+ await page.mouse.down()
+ await page.mouse.move(box.x + 300, box.y + 200)
+ await page.mouse.up()
+
+ await expect(live).toContainText(/선택\s*2개/)
+
+ // Guides toggle
+ const guidesBtn = page.getByRole('button', { name: /Guides/i })
+ await expect(guidesBtn).toHaveAttribute('aria-pressed', 'true')
+ await guidesBtn.click()
+ await expect(guidesBtn).toHaveAttribute('aria-pressed', 'false')
+ await guidesBtn.click()
+ await expect(guidesBtn).toHaveAttribute('aria-pressed', 'true')
+ })
+})