E2E 스모크: WYSIWYG 가이드 토글 및 멀티선택 라이브리전 검증 추가

MAIN_PLAN.md

@@ -199,6 +199,16 @@
 - 오류 원인/디버깅
   - 없음(스냅샷은 정규식 매칭으로 안정화)
 
+### 스타일 토큰 회귀 강화(링/비활성) (2025-11-17)
+- TDD
+  - `lib/wysiwyg/export.style.tokens.focusVisible.test.ts`: `--ring`, `--ring-offset` 토큰 존재 및 `:focus-visible`에서 outline/offset 참조 검증
+  - `lib/wysiwyg/export.style.tokens.disabled.test.ts`: `--disabled-bg`, `--disabled-fg` 토큰 존재 및 `:disabled`/`[readonly]`에서 참조 검증
+- 구현: `lib/wysiwyg/export.ts`
+  - :root/테마 토큰에 `--ring`, `--ring-offset`, `--disabled-bg`, `--disabled-fg` 추가
+  - 규칙 추가: `:focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset)}`
+  - 규칙 추가: `input,select,textarea:disabled{background:var(--disabled-bg);color:var(--disabled-fg)}` / `[readonly]{color:var(--disabled-fg)}`
+- 결과: 전체 테스트 그린(166 파일 / 291 테스트)
+
 ### Guides/그룹 액션 완성(드래그/리사이즈/회전 + 스냅) (2025-11-17)
 - TDD
   - `components/wysiwyg/WysiwygBuilder.guides.acceptance.test.tsx`: Guides 토글 ON/OFF 표시 확인

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\)/)
+  })
+})

lib/wysiwyg/export.style.tokens.disabled.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest'
+import { exportFrame } from '@/lib/wysiwyg/export'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function baseFrame(): Frame {
+  return {
+    id: 'f', width: 320, height: 200, background: '#111111',
+    layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
+  }
+}
+
+describe('wysiwyg export - disabled/read-only control tokens', () => {
+  it('defines disabled tokens and uses them for :disabled and [readonly]', () => {
+    const out = exportFrame(baseFrame())
+    // tokens
+    expect(out.css).toMatch(/:root\s*{[^}]*--disabled-bg:/)
+    expect(out.css).toMatch(/:root\s*{[^}]*--disabled-fg:/)
+    // usage
+    expect(out.css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*background:var\(--disabled-bg\)/)
+    expect(out.css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*color:var\(--disabled-fg\)/)
+    expect(out.css).toMatch(/input\[readonly\],select\[readonly\],textarea\[readonly\]\s*{[^}]*color:var\(--disabled-fg\)/)
+  })
+})

lib/wysiwyg/export.style.tokens.focusVisible.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { exportFrame } from '@/lib/wysiwyg/export'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function baseFrame(): Frame {
+  return {
+    id: 'f', width: 320, height: 200, background: '#111111',
+    layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
+  }
+}
+
+describe('wysiwyg export - focus-visible ring tokens', () => {
+  it('defines ring tokens and uses them in :focus-visible styles', () => {
+    const out = exportFrame(baseFrame())
+    // tokens
+    expect(out.css).toMatch(/:root\s*{[^}]*--ring:/)
+    expect(out.css).toMatch(/:root\s*{[^}]*--ring-offset:/)
+    // usage (focus-visible across common focusables and controls)
+    expect(out.css).toMatch(/:focus-visible\s*{[^}]*outline:2px solid var\(--ring\)/)
+    expect(out.css).toMatch(/:focus-visible\s*{[^}]*outline-offset:var\(--ring-offset\)/)
+  })
+})

lib/wysiwyg/export.ts

@@ -120,15 +120,18 @@ export function exportFrame(frame: Frame): Exported {
   }
   const inner = `<div class="frame-scale"><div class="frame">${piecesHtml.join('')}</div></div>`
   const css = [
-    `:root{--bg:${frame.background};--text:#f9fafb;--border:#94a3b8;--primary:#0ea5e9;--danger:#ef4444}`,
+    `:root{--bg:${frame.background};--text:#f9fafb;--border:#94a3b8;--primary:#0ea5e9;--danger:#ef4444;--ring:#22c55e;--ring-offset:2px;--disabled-bg:#e5e7eb;--disabled-fg:#9ca3af}`,
-    `[data-theme="light"]{--bg:#ffffff;--text:#0f172a;--border:#cbd5e1;--primary:#0ea5e9;--danger:#ef4444}`,
+    `[data-theme="light"]{--bg:#ffffff;--text:#0f172a;--border:#cbd5e1;--primary:#0ea5e9;--danger:#ef4444;--ring:#22c55e;--ring-offset:2px;--disabled-bg:#e5e7eb;--disabled-fg:#6b7280}`,
-    `[data-theme="dark"]{--bg:#111111;--text:#f9fafb;--border:#94a3b8;--primary:#0ea5e9;--danger:#ef4444}`,
+    `[data-theme="dark"]{--bg:#111111;--text:#f9fafb;--border:#94a3b8;--primary:#0ea5e9;--danger:#ef4444;--ring:#22c55e;--ring-offset:2px;--disabled-bg:#1f2937;--disabled-fg:#9ca3af}`,
     `.frame{position:relative;width:${frame.width}px;height:${frame.height}px;background:var(--bg)}`,
     `.frame-scale{transform-origin:0 0}`,
     `a{color:var(--primary);text-decoration:none}`,
     `input,select,textarea{color:var(--text);background:transparent;border:1px solid var(--border)}`,
+    `:focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset)}`,
     `input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:2px}`,
     `input:invalid,select:invalid,textarea:invalid{border-color:var(--danger)}`,
+    `input:disabled,select:disabled,textarea:disabled{background:var(--disabled-bg);color:var(--disabled-fg)}`,
+    `input[readonly],select[readonly],textarea[readonly]{color:var(--disabled-fg)}`,
     `fieldset{border:1px solid var(--border)}`,
     `legend{color:var(--text)}`,
     ...piecesCss,

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')
+  })
+})