문서: MAIN_PLAN Export 폼 a11y(fieldset aria-describedby/help/id) 배치 기록 추가

MAIN_PLAN.md

@@ -285,6 +285,19 @@
   - 그리드 단독: 인접 후보가 없을 때 13px → 16px 그리드 스냅
 - 결과: 스냅 우선순위 정책(에지 > 센터 > 그리드) 회귀 스모크 확보
 
+### 회전 후 스냅 유지 E2E (에지 > 그리드) (2025-11-17)
+- 테스트: `tests/e2e/wysiwyg-rotate-snap.e2e.ts`
+  - 객체를 15° 회전 후 드래그해도 에지 스냅이 그리드보다 우선 적용됨 검증
+  - 드래그 중 라이브리전 가이드 텍스트 노출 확인(가이드 x/y)
+- 결과: 회전 상태에서도 스냅 우선순위 일관성 확보, 라이브리전 가이드 동작 스모크 통과
+
+### Export 폼 a11y: radio fieldset aria-describedby/help/id 연결 (2025-11-18)
+- 테스트: `lib/exporter/formFieldset.a11y.test.ts`
+  - fieldset에 `aria-describedby`로 help id 연결(`field-*-help`)
+  - legend는 label과 동일 텍스트 사용
+  - 각 option은 고유 id(`field-*-opt-*`)와 label for 매핑, 동일 name 공유
+- 결과: 라디오 그룹 a11y 구조 회귀 스냅샷 확보(legend/fieldset/help/id 일관성)
+
 ## 목표
 - 비개발자도 사용 가능한 단일 페이지 랜딩 페이지 빌더.
 - 결과물: 정적 ZIP(HTML/CSS/JS) 다운로드. 이미지: 외부 URL 또는 로컬 업로드(서버 저장 없음, ZIP에 패키징). 폰트는 외부 CDN 허용.

lib/exporter/formError.regression.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import type { Page } from '@/lib/schema/page'
+
+const makePage = (overrides: Partial<Page> = {}): Page => ({
+  title: 'Form Error Regression',
+  locale: 'en',
+  theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+  sections: [],
+  form: {
+    actionUrl: '',
+    fields: [
+      { type: 'text', name: 'name', label: 'Name', required: true, pattern: '^[A-Za-z ]+$', maxLength: 30, help: 'Enter your name' },
+      { type: 'email', name: 'email', label: 'Email', required: true, help: 'We will contact you' },
+      { type: 'textarea', name: 'msg', label: 'Message', required: false, maxLength: 200, help: 'Optional' },
+    ],
+    spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+  },
+  analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+  seo: { title: 'T', description: 'D' },
+  ...overrides,
+})
+
+describe('Exporter - form error/required/pattern regression', () => {
+  it('adds required/pattern/maxlength attributes and aria-describedby links', () => {
+    const page = makePage()
+    const { html } = exportPage(page)
+
+    // required/pattern on text
+    expect(html).toMatch(/<input[^>]*name="name"[^>]*required/)
+    expect(html).toMatch(/<input[^>]*name="name"[^>]*pattern="\^\[A-Za-z \]\+\$"/)
+    expect(html).toMatch(/<input[^>]*name="name"[^>]*maxlength="30"/)
+    // describedby via help
+    expect(html).toMatch(/<label for="field-name">Name<\/label>/)
+    expect(html).toMatch(/<input[^>]*id="field-name"[^>]*aria-describedby="field-name-help"/)
+    expect(html).toMatch(/<div id="field-name-help" class="form-help">Enter your name<\/div>/)
+
+    // email required + describedby
+    expect(html).toMatch(/<input[^>]*type="email"[^>]*name="email"[^>]*required/)
+    expect(html).toMatch(/<input[^>]*id="field-email"[^>]*aria-describedby="field-email-help"/)
+
+    // textarea maxlength + describedby
+    expect(html).toMatch(/<textarea[^>]*name="msg"[^>]*maxlength="200"/)
+    expect(html).toMatch(/<textarea[^>]*id="field-msg"[^>]*aria-describedby="field-msg-help"/)
+  })
+
+  it('CSS includes :invalid rule for error state', () => {
+    const page = makePage()
+    const { css } = exportPage(page)
+    expect(css).toMatch(/input:invalid,select:invalid,textarea:invalid\{[^}]*border-color/)
+  })
+})

lib/exporter/formFieldset.a11y.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import type { Page } from '@/lib/schema/page'
+
+const makePage = (overrides: Partial<Page> = {}): Page => ({
+  title: 'Fieldset A11y',
+  locale: 'en',
+  theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+  sections: [],
+  form: {
+    actionUrl: '',
+    fields: [
+      { type: 'radio', name: 'plan', label: 'Plan', options: ['Basic','Pro'], required: false, help: 'Choose your plan' },
+    ],
+    spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+  },
+  analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+  seo: { title: 'T', description: 'D' },
+  ...overrides,
+})
+
+describe('Exporter - radio fieldset a11y', () => {
+  it('fieldset gets aria-describedby to help id; legend equals label; options share name', () => {
+    const page = makePage()
+    const { html } = exportPage(page)
+
+    // fieldset with describedby
+    expect(html).toMatch(/<fieldset[^>]*aria-describedby="field-plan-help"/)
+    // legend uses label
+    expect(html).toMatch(/<legend>Plan<\/legend>/)
+    // help element id matches describedby target
+    expect(html).toMatch(/<div id="field-plan-help" class="form-help">Choose your plan<\/div>/)
+    // radio inputs share name and ids are unique
+    expect(html).toMatch(/<input id="field-plan-opt-0" type="radio" name="plan"[^>]*value="Basic"/)
+    expect(html).toMatch(/<label for="field-plan-opt-0">Basic<\/label>/)
+    expect(html).toMatch(/<input id="field-plan-opt-1" type="radio" name="plan"[^>]*value="Pro"/)
+    expect(html).toMatch(/<label for="field-plan-opt-1">Pro<\/label>/)
+  })
+})

lib/exporter/html.ts

@@ -314,6 +314,7 @@ function buildCss(page: Page) {
   label{ display:block; margin: .5rem 0 }
   button{ background: var(--primary); color:#fff; border:none; padding:.75rem 1rem; border-radius:.5rem }
   button:focus, a:focus, input:focus, select:focus, textarea:focus{ outline: 3px solid #2563eb; outline-offset:2px }
+  input:invalid,select:invalid,textarea:invalid{ border-color:#ef4444 }
   .faq-list{ list-style:none; padding:0; margin:0 }
   .faq-item{ margin: .75rem 0 }
   .faq-q{ font-size: 1rem; font-weight:600; overflow-wrap:anywhere }

tests/e2e/wysiwyg-group-rotate-drag.e2e.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+async function getLefts(page: import('@playwright/test').Page) {
+  const els = page.locator('[data-testid^="obj-text-"]')
+  const count = await els.count()
+  const results: number[] = []
+  for (let i = 0; i < count; i++) {
+    const style = await els.nth(i).evaluate((n) => (n as HTMLElement).style.left || '0')
+    results.push(parseInt(style || '0', 10))
+  }
+  return results
+}
+
+test.describe('WYSIWYG - Group rotate then drag with snap and live region', () => {
+  test('after rotating multiselect, dragging group by 13px snaps to 16px; live region says 선택 2개', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // Marquee select both
+    const cbox = await canvas.boundingBox()
+    if (!cbox) throw new Error('canvas not found')
+    await page.mouse.move(cbox.x + 40, cbox.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(cbox.x + 260, cbox.y + 160)
+    await page.mouse.up()
+
+    const live = page.getByTestId('aria-live')
+    await expect(live).toContainText(/선택\s*2개/)
+
+    // Rotate ~15deg via rotate handle
+    const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first()
+    const hbox = await rotateHandle.boundingBox()
+    if (!hbox) throw new Error('rotate handle not found')
+    await page.mouse.move(hbox.x + 5, hbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(hbox.x + 40, hbox.y + 5)
+    await expect(live).toContainText(/가이드\s*x=|y=/)
+    await page.mouse.up()
+
+    const before = await getLefts(page)
+
+    // Drag group by ~13px on X; expect grid snap to 16
+    const target = page.locator('[data-testid^="obj-text-"]').nth(1)
+    const tbox = await target.boundingBox()
+    if (!tbox) throw new Error('target not found')
+    await page.mouse.move(tbox.x + 5, tbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(tbox.x + 5 + 13, tbox.y + 5)
+    await page.mouse.up()
+
+    const after = await getLefts(page)
+    const dx = after[1] - before[1]
+    expect(dx).toBe(16)
+    expect(after[0] - before[0]).toBe(16)
+  })
+})

tests/e2e/wysiwyg-group-rotate-resize-ns.e2e.ts

@@ -0,0 +1,113 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+async function getBox(page: import('@playwright/test').Page, nth: number) {
+  const el = page.locator('[data-testid^="obj-text-"]').nth(nth)
+  const left = await el.evaluate((n) => parseInt((n as HTMLElement).style.left || '0', 10))
+  const top = await el.evaluate((n) => parseInt((n as HTMLElement).style.top || '0', 10))
+  const width = await el.evaluate((n) => parseInt((n as HTMLElement).style.width || '0', 10))
+  const height = await el.evaluate((n) => parseInt((n as HTMLElement).style.height || '0', 10))
+  return { left, top, width, height }
+}
+
+function snap8(v: number) { return Math.round(v / 8) * 8 }
+
+test.describe('WYSIWYG - Group rotate then resize (N/S) with snap', () => {
+  test('rotate ~15°, then group resize S by +16 (snap) — heights grow equally, top unchanged', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // marquee select both
+    const cbox = await canvas.boundingBox()
+    if (!cbox) throw new Error('canvas not found')
+    await page.mouse.move(cbox.x + 40, cbox.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(cbox.x + 260, cbox.y + 160)
+    await page.mouse.up()
+
+    // rotate to ~15°
+    const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first()
+    const hbox = await rotateHandle.boundingBox()
+    if (!hbox) throw new Error('rotate handle not found')
+    await page.mouse.move(hbox.x + 5, hbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(hbox.x + 40, hbox.y + 5)
+    await page.mouse.up()
+
+    const b0 = await getBox(page, 0)
+    const b1 = await getBox(page, 1)
+
+    // resize south edge of the second by +16px
+    const target = page.locator('[data-testid^="obj-text-"]').nth(1)
+    const tbox = await target.boundingBox()
+    if (!tbox) throw new Error('target not found')
+    await page.mouse.move(tbox.x + 5, tbox.y + tbox.height - 3)
+    await page.mouse.down()
+    await page.mouse.move(tbox.x + 5, tbox.y + tbox.height + 16)
+    await page.mouse.up()
+
+    const a0 = await getBox(page, 0)
+    const a1 = await getBox(page, 1)
+
+    const dh = snap8(b1.height + 16) - b1.height
+    expect(a0.top).toBe(b0.top)
+    expect(a1.top).toBe(b1.top)
+    expect(a0.height).toBe(b0.height + dh)
+    expect(a1.height).toBe(b1.height + dh)
+  })
+
+  test('rotate ~15°, then group resize N by +16 (snap) — heights grow equally, top shifts equally', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // marquee select both
+    const cbox = await canvas.boundingBox()
+    if (!cbox) throw new Error('canvas not found')
+    await page.mouse.move(cbox.x + 40, cbox.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(cbox.x + 260, cbox.y + 160)
+    await page.mouse.up()
+
+    // rotate to ~15°
+    const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first()
+    const hbox = await rotateHandle.boundingBox()
+    if (!hbox) throw new Error('rotate handle not found')
+    await page.mouse.move(hbox.x + 5, hbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(hbox.x + 40, hbox.y + 5)
+    await page.mouse.up()
+
+    const b0 = await getBox(page, 0)
+    const b1 = await getBox(page, 1)
+
+    // resize north edge of the first by -16px (drag up)
+    const first = page.locator('[data-testid^="obj-text-"]').first()
+    const fbox = await first.boundingBox()
+    if (!fbox) throw new Error('first not found')
+    await page.mouse.move(fbox.x + 5, fbox.y + 3)
+    await page.mouse.down()
+    await page.mouse.move(fbox.x + 5, fbox.y - 16)
+    await page.mouse.up()
+
+    const a0 = await getBox(page, 0)
+    const a1 = await getBox(page, 1)
+
+    const dh = snap8(b0.height + 16) - b0.height
+    const dy = a0.top - b0.top
+    expect(a0.height).toBe(b0.height + dh)
+    expect(a1.height).toBe(b1.height + dh)
+    expect(dy).toBeLessThanOrEqual(-16)
+    expect(a1.top - b1.top).toBe(dy)
+  })
+})

tests/e2e/wysiwyg-group-rotate-resize.e2e.ts

@@ -0,0 +1,114 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+async function getBox(page: import('@playwright/test').Page, nth: number) {
+  const el = page.locator('[data-testid^="obj-text-"]').nth(nth)
+  const left = await el.evaluate((n) => parseInt((n as HTMLElement).style.left || '0', 10))
+  const top = await el.evaluate((n) => parseInt((n as HTMLElement).style.top || '0', 10))
+  const width = await el.evaluate((n) => parseInt((n as HTMLElement).style.width || '0', 10))
+  const height = await el.evaluate((n) => parseInt((n as HTMLElement).style.height || '0', 10))
+  return { left, top, width, height }
+}
+
+function snap8(v: number) { return Math.round(v / 8) * 8 }
+
+test.describe('WYSIWYG - Group rotate then resize (E/W) with snap', () => {
+  test('rotate ~15°, then group resize E by +16 (snap) — widths grow equally, left unchanged', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // marquee select both
+    const cbox = await canvas.boundingBox()
+    if (!cbox) throw new Error('canvas not found')
+    await page.mouse.move(cbox.x + 40, cbox.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(cbox.x + 260, cbox.y + 160)
+    await page.mouse.up()
+
+    // rotate via handle to ~15°
+    const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first()
+    const hbox = await rotateHandle.boundingBox()
+    if (!hbox) throw new Error('rotate handle not found')
+    await page.mouse.move(hbox.x + 5, hbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(hbox.x + 40, hbox.y + 5)
+    await page.mouse.up()
+
+    const b0 = await getBox(page, 0)
+    const b1 = await getBox(page, 1)
+
+    // resize east handle of the second by +16px (should snap to +16)
+    const target = page.locator('[data-testid^="obj-text-"]').nth(1)
+    const tbox = await target.boundingBox()
+    if (!tbox) throw new Error('target not found')
+    await page.mouse.move(tbox.x + tbox.width - 5, tbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(tbox.x + tbox.width + 16, tbox.y + 5)
+    await page.mouse.up()
+
+    const a0 = await getBox(page, 0)
+    const a1 = await getBox(page, 1)
+
+    const dw = snap8(b1.width + 16) - b1.width
+    expect(a0.left).toBe(b0.left)
+    expect(a1.left).toBe(b1.left)
+    expect(a0.width).toBe(b0.width + dw)
+    expect(a1.width).toBe(b1.width + dw)
+  })
+
+  test('rotate ~15°, then group resize W by +16 (snap) — widths grow equally, left shifts equally', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // marquee select both
+    const cbox = await canvas.boundingBox()
+    if (!cbox) throw new Error('canvas not found')
+    await page.mouse.move(cbox.x + 40, cbox.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(cbox.x + 260, cbox.y + 160)
+    await page.mouse.up()
+
+    // rotate via handle to ~15°
+    const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first()
+    const hbox = await rotateHandle.boundingBox()
+    if (!hbox) throw new Error('rotate handle not found')
+    await page.mouse.move(hbox.x + 5, hbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(hbox.x + 40, hbox.y + 5)
+    await page.mouse.up()
+
+    const b0 = await getBox(page, 0)
+    const b1 = await getBox(page, 1)
+
+    // resize west handle of the first by -16px (drag left)
+    const first = page.locator('[data-testid^="obj-text-"]').first()
+    const fbox = await first.boundingBox()
+    if (!fbox) throw new Error('first not found')
+    await page.mouse.move(fbox.x + 5, fbox.y + 5) // move inside to be safe
+    await page.mouse.move(fbox.x + 2, fbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(fbox.x - 16, fbox.y + 5)
+    await page.mouse.up()
+
+    const a0 = await getBox(page, 0)
+    const a1 = await getBox(page, 1)
+
+    const dw = snap8(b0.width + 16) - b0.width
+    const dx = a0.left - b0.left
+    expect(a0.width).toBe(b0.width + dw)
+    expect(a1.width).toBe(b1.width + dw)
+    expect(dx).toBeLessThanOrEqual(-16)
+    expect(a1.left - b1.left).toBe(dx)
+  })
+})

tests/e2e/wysiwyg-guides-rotate-group.e2e.ts

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+test.describe('WYSIWYG - Guides toggle with group rotate + snap + live region', () => {
+  test('guides ON: after multiselect and rotate, dragging snaps and aria-live shows guides + selection', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // Turn on Guides
+    const guidesBtn = page.getByRole('button', { name: /Guides/i })
+    await guidesBtn.click()
+
+    // Marquee select both
+    const cbox = await canvas.boundingBox()
+    if (!cbox) throw new Error('canvas not found')
+    await page.mouse.move(cbox.x + 40, cbox.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(cbox.x + 260, cbox.y + 160)
+    await page.mouse.up()
+
+    const live = page.getByTestId('aria-live')
+    await expect(live).toContainText(/선택\s*2개/)
+
+    // Rotate ~15deg
+    const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first()
+    const hbox = await rotateHandle.boundingBox()
+    if (!hbox) throw new Error('rotate handle not found')
+    await page.mouse.move(hbox.x + 5, hbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(hbox.x + 40, hbox.y + 5)
+    await expect(live).toContainText(/가이드\s*x=|y=/)
+    await page.mouse.up()
+
+    // Drag group by ~13px on X to verify grid snap still applies with guides
+    const target = page.locator('[data-testid^="obj-text-"]').nth(1)
+    const tbox = await target.boundingBox()
+    if (!tbox) throw new Error('target not found')
+
+    // Read before
+    const leftsBefore = await page.locator('[data-testid^="obj-text-"]').evaluateAll((nodes) => nodes.map(n => parseInt((n as HTMLElement).style.left || '0', 10)))
+
+    await page.mouse.move(tbox.x + 5, tbox.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(tbox.x + 5 + 13, tbox.y + 5)
+    await page.mouse.up()
+
+    const leftsAfter = await page.locator('[data-testid^="obj-text-"]').evaluateAll((nodes) => nodes.map(n => parseInt((n as HTMLElement).style.left || '0', 10)))
+    const dx = leftsAfter[1] - leftsBefore[1]
+    expect(dx).toBe(16)
+    expect(leftsAfter[0] - leftsBefore[0]).toBe(16)
+  })
+})