feat(exporter): 폰트 최적화 - preconnect(googleapis/gstatic) 및 system-ui 폴백 테스트 추가

Reviewed-on: #5

.gitea/workflows/auto-label.yml

@@ -0,0 +1,37 @@
+name: Auto Label PR
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  add-automerge-label:
+    runs-on: [macos, host]
+    steps:
+      - name: Add 'automerge' label to PR
+        env:
+          CI_TOKEN: ${{ secrets.CI_TOKEN }}
+          GITEA_BASE_URL: https://gitea.jaybe.dev
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          REPO: ${{ github.repository }}
+        run: |
+          set -euo pipefail
+          if [ -z "${CI_TOKEN:-}" ]; then
+            echo "CI_TOKEN not set; skipping labeling"; exit 0; fi
+          OWNER=$(echo "$REPO" | cut -d'/' -f1)
+          NAME=$(echo "$REPO" | cut -d'/' -f2)
+          echo "Resolving existing label id for 'automerge' in $OWNER/$NAME (no creation)"
+          curl -sS -o /tmp/labels.json -H "Authorization: token ${CI_TOKEN}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/labels?limit=1000" || true
+          # Extract all ids whose name == automerge, prefer the smallest id (oldest)
+          LID=$(tr '\n' ' ' < /tmp/labels.json | \
+            grep -o '"id":[0-9][0-9]*[^\}]*"name":"automerge"' | \
+            sed -E 's/.*"id":([0-9]+).*/\1/' | sort -n | head -n1 || true)
+          if [ -z "${LID:-}" ]; then
+            echo "No existing 'automerge' label found; skipping labeling"; exit 0; fi
+          echo "Labeling PR #$PR_NUMBER with id $LID"
+          curl -sS -X POST \
+            -H "Content-Type: application/json" \
+            -H "Authorization: token ${CI_TOKEN}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/issues/${PR_NUMBER}/labels" \
+            -d '{"labels":['"${LID}"']}' || true

.gitea/workflows/auto-pr.yml

@@ -0,0 +1,76 @@
+name: Auto PR
+
+on:
+  push:
+    branches:
+      - 'feat/**'
+
+jobs:
+  open-pr:
+    runs-on: [macos, host]
+    steps:
+      - name: Create Pull Request via Gitea API
+        env:
+          CI_TOKEN: ${{ secrets.CI_TOKEN }}
+          GITEA_BASE_URL: https://gitea.jaybe.dev
+          REPO: ${{ github.repository }}
+          HEAD_BRANCH: ${{ github.ref_name }}
+          BASE_BRANCH: main
+        run: |
+          set -euo pipefail
+          if [ -z "${CI_TOKEN:-}" ]; then
+            echo "GITEA_TOKEN not set; skipping auto-pr"; exit 0; fi
+          OWNER=$(echo "$REPO" | cut -d'/' -f1)
+          NAME=$(echo "$REPO" | cut -d'/' -f2)
+          TITLE="auto: PR for $HEAD_BRANCH"
+          BODY="Automated PR created on push to $HEAD_BRANCH"
+          echo "Creating PR $HEAD_BRANCH -> $BASE_BRANCH for $OWNER/$NAME"
+          HTTP_CODE=$(curl -sS -o /tmp/pr_resp.json -w "%{http_code}" -X POST \
+            -H "Content-Type: application/json" \
+            -H "Authorization: token ${CI_TOKEN}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/pulls" \
+            -d "{\"head\":\"${HEAD_BRANCH}\",\"base\":\"${BASE_BRANCH}\",\"title\":\"${TITLE}\",\"body\":\"${BODY}\"}") || true
+          echo "API status: $HTTP_CODE"
+          if [ "$HTTP_CODE" = "201" ]; then
+            echo "PR created"; cat /tmp/pr_resp.json
+            PR_NUMBER=$(cat /tmp/pr_resp.json | sed -n 's/.*"number":\([0-9]*\).*/\1/p' | head -n1)
+          else
+            echo "PR not created (possibly exists). Response:"; cat /tmp/pr_resp.json || true
+          fi
+
+          # Retry to resolve PR number by listing open PRs and matching head/base
+          i=0
+          while [ -z "${PR_NUMBER:-}" ] && [ $i -lt 10 ]; do
+            i=$((i+1))
+            echo "[retry $i] Resolving PR number for $HEAD_BRANCH -> $BASE_BRANCH"
+            curl -sS -o /tmp/pr_list.json -H "Authorization: token ${CI_TOKEN}" \
+              "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/pulls?state=open" || true
+            # Extract PR number matching head.ref==HEAD_BRANCH and base.ref==BASE_BRANCH
+            PR_NUMBER=$(awk -v hb="$HEAD_BRANCH" -v bb="$BASE_BRANCH" 'BEGIN{RS="},"; pr=""} {
+              if($0 ~ /\"head\":\{[^}]*\"ref\":\"" hb "\"/ && $0 ~ /\"base\":\{[^}]*\"ref\":\"" bb "\"/){
+                if (match($0, /\"number\":([0-9]+)/, m)) { print m[1]; exit }
+              }
+            }' /tmp/pr_list.json)
+            if [ -z "${PR_NUMBER:-}" ]; then sleep 2; fi
+          done
+
+          if [ -n "${PR_NUMBER:-}" ]; then
+            echo "Resolving existing label id for 'automerge' in $OWNER/$NAME (no creation)"
+            curl -sS -o /tmp/labels.json -H "Authorization: token ${CI_TOKEN}" \
+              "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/labels?limit=1000" || true
+            LID=$(tr '\n' ' ' < /tmp/labels.json | \
+              grep -o '"id":[0-9][0-9]*[^\}]*"name":"automerge"' | \
+              sed -E 's/.*"id":([0-9]+).*/\1/' | sort -n | head -n1 || true)
+            if [ -n "${LID:-}" ]; then
+              echo "Adding 'automerge' (id=$LID) label to PR #$PR_NUMBER"
+              curl -sS -X POST \
+                -H "Content-Type: application/json" \
+                -H "Authorization: token ${CI_TOKEN}" \
+                "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/issues/${PR_NUMBER}/labels" \
+                -d '{"labels":['"${LID}"']}' || true
+            else
+              echo "No existing 'automerge' label found; skipping label add"
+            fi
+          else
+            echo "PR number could not be determined; skipping label add"
+          fi

.gitea/workflows/ci.yml

@@ -0,0 +1,82 @@
+name: CI
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+
+jobs:
+  test:
+    runs-on: [macos, host]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Unit/Component tests (Vitest)
+        run: npm test
+        env:
+          CI: true
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: E2E tests (Playwright)
+        run: npm run test:e2e -- --reporter=line
+        env:
+          CI: true
+
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report
+          if-no-files-found: ignore
+          retention-days: 3
+
+      - name: Auto-merge PR on green
+        if: ${{ github.event_name == 'pull_request' }}
+        env:
+          CI_TOKEN: ${{ secrets.CI_TOKEN }}
+          GITEA_BASE_URL: https://gitea.jaybe.dev
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          REPO: ${{ github.repository }}
+        run: |
+          set -euo pipefail
+          if [ -z "${CI_TOKEN:-}" ]; then
+            echo "CI_TOKEN not set; skipping auto-merge"; exit 0; fi
+          OWNER=$(echo "$REPO" | cut -d'/' -f1)
+          NAME=$(echo "$REPO" | cut -d'/' -f2)
+          echo "Checking labels for PR #$PR_NUMBER on $OWNER/$NAME"
+          LABELS_JSON=$(curl -sS -X GET \
+            -H "Authorization: token ${CI_TOKEN}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/issues/${PR_NUMBER}")
+          echo "labels payload (first 200 chars):"; echo "$LABELS_JSON" | cut -c1-200 || true
+          if ! echo "$LABELS_JSON" | grep -qi '"name":"automerge"'; then
+            echo "Label 'automerge' not present; skipping merge"; exit 0; fi
+          echo "Label 'automerge' present; proceeding to merge"
+          # ensure PR is open
+          PR_JSON=$(curl -sS -X GET \
+            -H "Authorization: token ${CI_TOKEN}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/pulls/${PR_NUMBER}")
+          STATE=$(echo "$PR_JSON" | sed -n 's/.*"state":"\([^"]*\)".*/\1/p')
+          echo "PR state: ${STATE:-unknown}"
+          if [ "${STATE:-}" != "open" ]; then
+            echo "PR state is not open; skipping merge"; exit 0; fi
+          echo "Merging PR #$PR_NUMBER for $OWNER/$NAME"
+          HTTP_CODE=$(curl -sS -o /tmp/merge_resp.json -w "%{http_code}" -X POST \
+            -H "Content-Type: application/json" \
+            -H "Authorization: token ${CI_TOKEN}" \
+            "${GITEA_BASE_URL}/api/v1/repos/${OWNER}/${NAME}/pulls/${PR_NUMBER}/merge" \
+            -d '{"Do":"merge","MergeMessage":"auto-merge: CI green"}' || true)
+          echo "merge http: $HTTP_CODE"
+          echo "merge resp:"; cat /tmp/merge_resp.json || true

.github/workflows/ci.yml

@@ -0,0 +1,35 @@
+name: CI
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+
+jobs:
+  test:
+    runs-on: [macos, host]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Unit/Component tests (Vitest)
+        run: npm test
+        env:
+          CI: true
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: E2E tests (Playwright)
+        run: npm run test:e2e
+        env:
+          CI: true

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+MAIN_PLAN.md

app/[locale]/builder/page.tsx

@@ -0,0 +1,5 @@
+import BuilderClientPage from '@/components/BuilderClientPage'
+
+export default function BuilderPage() {
+  return <BuilderClientPage />
+}

app/[locale]/layout.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+import { getMessages } from '@/lib/i18n/getMessages'
+import type { AppLocale } from '@/lib/i18n/locales'
+import I18nProvider from '@/components/I18nProvider'
+import '../globals.css'
+
+export const dynamic = 'force-static'
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: ReactNode
+  params: Promise<{ locale: AppLocale }>
+}) {
+  const { locale } = await params
+  const messages = await getMessages(locale)
+  return (
+    <html lang={locale}>
+      <body>
+        <I18nProvider locale={locale} messages={messages}>{children}</I18nProvider>
+      </body>
+    </html>
+  )
+}

app/[locale]/page.tsx

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import { defaultLocale } from '@/lib/i18n/locales'
+
+export default function IndexPage({ params }: { params: { locale: string } }) {
+  const loc = params.locale || defaultLocale
+  return (
+    <main className="p-6">
+      <h1 className="text-2xl font-semibold mb-4">Landing Builder</h1>
+      <p className="mb-4">Start building your landing page.</p>
+      <Link className="text-sky-600 underline" href={`/${loc}/builder`}>
+        Go to Builder
+      </Link>
+    </main>
+  )
+}

app/builder/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function BuilderPage() {
+  redirect('/en/builder')
+}

components/BuilderClientPage.addButtons.titleConsistency.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('Inspector Add buttons title consistency', () => {
+  test('Features/Testimonials/FAQ Add buttons have title matching visible label', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    // Features
+    fireEvent.click(screen.getByTestId('card-features'))
+    fireEvent.click(await screen.findByLabelText('Select 0'))
+    const addFeature = await screen.findByRole('button', { name: /Add Feature Item/i })
+    expect(addFeature).toBeInTheDocument()
+    expect(addFeature.getAttribute('title')).toBe('Add Feature Item')
+
+    // Testimonials
+    fireEvent.click(screen.getByTestId('card-testimonials'))
+    fireEvent.click(await screen.findByLabelText('Select 1'))
+    const addTestimonial = await screen.findByRole('button', { name: /Add Testimonial/i })
+    expect(addTestimonial).toBeInTheDocument()
+    expect(addTestimonial.getAttribute('title')).toBe('Add Testimonial')
+
+    // FAQ
+    fireEvent.click(screen.getByTestId('card-faq'))
+    fireEvent.click(await screen.findByLabelText('Select 2'))
+    const addFaq = await screen.findByRole('button', { name: /Add FAQ Item/i })
+    expect(addFaq).toBeInTheDocument()
+    expect(addFaq.getAttribute('title')).toBe('Add FAQ Item')
+  })
+})

components/BuilderClientPage.ariaDescribedby.features.test.tsx

@@ -0,0 +1,47 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('BuilderClientPage - inspector aria-describedby (Features/Testimonials)', () => {
+  test('Features inputs reference help via aria-describedby', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    fireEvent.click(screen.getByTestId('card-features'))
+    fireEvent.click(await screen.findByLabelText('Select 0'))
+
+    const feature0 = await screen.findByLabelText('Feature 0')
+    expect(feature0).toHaveAttribute('aria-describedby', 'ins-features-help')
+  })
+
+  test('Testimonials inputs reference help via aria-describedby', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    fireEvent.click(screen.getByTestId('card-testimonials'))
+    fireEvent.click(await screen.findByLabelText('Select 0'))
+
+    fireEvent.click(screen.getByRole('button', { name: /Add Testimonial/i }))
+
+    const author0 = await screen.findByLabelText('Author 0')
+    const quote0 = await screen.findByLabelText('Quote 0')
+    expect(author0).toHaveAttribute('aria-describedby', 'ins-testimonials-help')
+    expect(quote0).toHaveAttribute('aria-describedby', 'ins-testimonials-help')
+  })
+})

components/BuilderClientPage.ariaDescribedby.hcf.test.tsx

@@ -0,0 +1,62 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('BuilderClientPage - inspector aria-describedby (Hero/CTA/FAQ)', () => {
+  test('Hero input references help via aria-describedby', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    fireEvent.click(screen.getByTestId('card-hero'))
+    fireEvent.click(await screen.findByLabelText('Select 0'))
+
+    const hero = await screen.findByLabelText('Hero Heading')
+    expect(hero).toHaveAttribute('aria-describedby', 'ins-hero-heading-help')
+  })
+
+  test('CTA inputs reference help via aria-describedby', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    fireEvent.click(screen.getByTestId('card-cta'))
+    fireEvent.click(await screen.findByLabelText('Select 0'))
+
+    const text = await screen.findByLabelText('CTA Text')
+    const href = await screen.findByLabelText('CTA Href')
+    expect(text).toHaveAttribute('aria-describedby', 'ins-cta-text-help')
+    expect(href).toHaveAttribute('aria-describedby', 'ins-cta-href-help')
+  })
+
+  test('FAQ inputs reference help via aria-describedby', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    fireEvent.click(screen.getByTestId('card-faq'))
+    fireEvent.click(await screen.findByLabelText('Select 0'))
+    fireEvent.click(await screen.findByRole('button', { name: 'Add FAQ Item' }))
+
+    const q0 = await screen.findByLabelText('FAQ Q 0')
+    const a0 = await screen.findByLabelText('FAQ A 0')
+    expect(q0).toHaveAttribute('aria-describedby', 'ins-faq-help')
+    expect(a0).toHaveAttribute('aria-describedby', 'ins-faq-help')
+  })
+})

components/BuilderClientPage.ariaDescribedby.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('BuilderClientPage - inspector aria-describedby smoke', () => {
+  test('SEO/Analytics inputs reference helptext via aria-describedby', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    const seoTitle = await screen.findByLabelText('SEO Title')
+    const seoDesc = await screen.findByLabelText('SEO Description')
+    const ogImage = await screen.findByLabelText('OG Image URL')
+    const ga4 = await screen.findByLabelText('GA4 Measurement ID')
+    const pixel = await screen.findByLabelText('Meta Pixel ID')
+
+    expect(seoTitle).toHaveAttribute('aria-describedby', 'ins-seo-title-help')
+    expect(seoDesc).toHaveAttribute('aria-describedby', 'ins-seo-desc-help')
+    expect(ogImage).toHaveAttribute('aria-describedby', 'ins-og-image-help')
+    expect(ga4).toHaveAttribute('aria-describedby', 'ins-ga4-help')
+    expect(pixel).toHaveAttribute('aria-describedby', 'ins-meta-pixel-help')
+  })
+})

components/BuilderClientPage.featuresPreview.test.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+import { NextIntlClientProvider } from 'next-intl'
+import enMessages from '@/messages/en.json'
+import BuilderClientPage from '@/components/BuilderClientPage'
+
+const messages: Record<string, string> = enMessages as Record<string, string>
+
+describe('BuilderClientPage - features/testimonials preview', () => {
+  it('사이드바 카드 클릭으로 features/testimonials 섹션이 추가되고 프리뷰에 표기된다', () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <BuilderClientPage />
+      </NextIntlClientProvider>
+    )
+
+    // features 추가
+    fireEvent.click(screen.getByTestId('card-features'))
+    // testimonials 추가
+    fireEvent.click(screen.getByTestId('card-testimonials'))
+
+    // 프리뷰에서 섹션 요약 표기 확인
+    expect(screen.getByText(/features — items: 3/)).toBeInTheDocument()
+    expect(screen.getByText(/testimonials — items: 2/)).toBeInTheDocument()
+  })
+})

components/BuilderClientPage.formPreview.test.tsx

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import { NextIntlClientProvider } from 'next-intl'
+import enMessages from '@/messages/en.json'
+const messages: Record<string, string> = enMessages as Record<string, string>
+
+describe('BuilderClientPage - form preview', () => {
+  it('폼 필드 목록과 필수 여부가 미리보기에 표시된다', () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <BuilderClientPage />
+      </NextIntlClientProvider>
+    )
+
+    // FormBuilderPanel의 텍스트 필드 추가 버튼 클릭 (data-testid 사용)
+    fireEvent.click(screen.getByTestId('btn-add-text'))
+
+    // 프리뷰 존재 확인(컴팩트 인스펙터 영역으로 이동됨)
+    expect(screen.getByText(/Locale:/)).toBeInTheDocument()
+
+    // 첫 필드 항목 표기: 라벨/네임/required 여부(초기 false)
+    expect(screen.getByText(/Text 1 \(field1\)/)).toBeInTheDocument()
+    expect(screen.queryByText(/required/)).not.toBeNull()
+
+    // required 토글 후 프리뷰 갱신 확인
+    fireEvent.click(screen.getByLabelText('Required 0'))
+    expect(screen.getAllByText('required').length).toBeGreaterThan(0)
+  })
+})

components/BuilderClientPage.inspector.cta.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+import { NextIntlClientProvider } from 'next-intl'
+import enMessages from '@/messages/en.json'
+import BuilderClientPage from '@/components/BuilderClientPage'
+
+const messages: Record<string, string> = enMessages as Record<string, string>
+
+describe('BuilderClientPage - Inspector CTA', () => {
+  it('CTA 선택 후 인스펙터에서 텍스트/링크를 편집할 수 있다', () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <BuilderClientPage />
+      </NextIntlClientProvider>
+    )
+
+    // CTA 섹션 추가
+    fireEvent.click(screen.getByTestId('btn-add-cta'))
+
+    // 선택
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    // 인풋 존재 및 값 변경
+    const textInput = screen.getByLabelText('CTA Text') as HTMLInputElement
+    const hrefInput = screen.getByLabelText('CTA Href') as HTMLInputElement
+
+    expect(textInput.value).toBeTruthy()
+    expect(hrefInput.value).toBeTruthy()
+
+    fireEvent.change(textInput, { target: { value: 'Buy Now' } })
+    fireEvent.change(hrefInput, { target: { value: 'https://example.com' } })
+
+    expect((screen.getByLabelText('CTA Text') as HTMLInputElement).value).toBe('Buy Now')
+    expect((screen.getByLabelText('CTA Href') as HTMLInputElement).value).toBe('https://example.com')
+  })
+})

components/BuilderClientPage.inspector.faq.test.tsx

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+import { NextIntlClientProvider } from 'next-intl'
+import enMessages from '@/messages/en.json'
+import BuilderClientPage from '@/components/BuilderClientPage'
+
+const messages: Record<string, string> = enMessages as Record<string, string>
+
+describe('BuilderClientPage - Inspector FAQ', () => {
+  it('FAQ 선택 후 인스펙터에서 아이템을 편집할 수 있다(쉼표 구분)', () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <BuilderClientPage />
+      </NextIntlClientProvider>
+    )
+
+    // FAQ 섹션 추가 및 선택
+    fireEvent.click(screen.getByTestId('btn-add-faq'))
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    // 리스트 UI: Add FAQ Item 후 Q/A 입력 변경 확인
+    fireEvent.click(screen.getByRole('button', { name: 'Add FAQ Item' }))
+    const q0 = screen.getByLabelText('FAQ Q 0') as HTMLInputElement
+    const a0 = screen.getByLabelText('FAQ A 0') as HTMLInputElement
+    fireEvent.change(q0, { target: { value: 'Q1?' } })
+    fireEvent.change(a0, { target: { value: 'A1' } })
+    expect((screen.getByLabelText('FAQ Q 0') as HTMLInputElement).value).toBe('Q1?')
+    expect((screen.getByLabelText('FAQ A 0') as HTMLInputElement).value).toBe('A1')
+  })
+})

components/BuilderClientPage.inspector.faqList.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+import { NextIntlClientProvider } from 'next-intl'
+import enMessages from '@/messages/en.json'
+import BuilderClientPage from '@/components/BuilderClientPage'
+
+const messages: Record<string, string> = enMessages as Record<string, string>
+
+describe('BuilderClientPage - Inspector FAQ List UI', () => {
+  it('FAQ 항목을 추가/편집/삭제할 수 있다', () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <BuilderClientPage />
+      </NextIntlClientProvider>
+    )
+
+    // FAQ 섹션 추가 및 선택
+    fireEvent.click(screen.getByTestId('btn-add-faq'))
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    // Add FAQ Item 버튼 클릭 → 첫 항목 생성
+    fireEvent.click(screen.getByRole('button', { name: 'Add FAQ Item' }))
+
+    const q0 = screen.getByLabelText('FAQ Q 0') as HTMLInputElement
+    const a0 = screen.getByLabelText('FAQ A 0') as HTMLInputElement
+
+    fireEvent.change(q0, { target: { value: 'What is it?' } })
+    fireEvent.change(a0, { target: { value: 'A landing builder' } })
+
+    expect((screen.getByLabelText('FAQ Q 0') as HTMLInputElement).value).toBe('What is it?')
+    expect((screen.getByLabelText('FAQ A 0') as HTMLInputElement).value).toBe('A landing builder')
+
+    // 두 번째 항목 추가 후 삭제
+    fireEvent.click(screen.getByRole('button', { name: 'Add FAQ Item' }))
+    const q1 = screen.getByLabelText('FAQ Q 1') as HTMLInputElement
+    fireEvent.change(q1, { target: { value: 'How to export?' } })
+    fireEvent.click(screen.getByLabelText('Remove FAQ 1'))
+
+    // 삭제 후 첫 항목만 남음
+    expect(screen.queryByLabelText('FAQ Q 1')).toBeNull()
+    expect(screen.getByLabelText('FAQ Q 0')).toBeInTheDocument()
+  })
+})

components/BuilderClientPage.inspector.featuresTestimonials.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('Inspector - Features & Testimonials editing', () => {
+  test('Features: add item and edit value', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    // add Features section via sidebar
+    fireEvent.click(screen.getByTestId('card-features'))
+
+    // select the section in canvas (index 0)
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    // add item
+    fireEvent.click(screen.getByRole('button', { name: /Add Feature Item/i }))
+
+    // edit item 0
+    const input = screen.getByLabelText('Feature 0') as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'New Feature' } })
+    expect(input.value).toBe('New Feature')
+  })
+
+  test('Testimonials: add item and edit author/quote', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    // add Testimonials section via sidebar
+    fireEvent.click(screen.getByTestId('card-testimonials'))
+
+    // select the section (index 0)
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    // add item
+    fireEvent.click(screen.getByRole('button', { name: /Add Testimonial/i }))
+
+    const author = screen.getByLabelText('Author 0') as HTMLInputElement
+    const quote = screen.getByLabelText('Quote 0') as HTMLInputElement
+
+    fireEvent.change(author, { target: { value: 'Alice' } })
+    fireEvent.change(quote, { target: { value: 'Awesome!' } })
+
+    expect(author.value).toBe('Alice')
+    expect(quote.value).toBe('Awesome!')
+  })
+})

components/BuilderClientPage.inspector.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+import { NextIntlClientProvider } from 'next-intl'
+import enMessages from '@/messages/en.json'
+import BuilderClientPage from '@/components/BuilderClientPage'
+
+const messages: Record<string, string> = enMessages as Record<string, string>
+
+describe('BuilderClientPage - Inspector panel', () => {
+  it('섹션 선택 후 인스펙터에서 Hero heading을 편집할 수 있다', () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <BuilderClientPage />
+      </NextIntlClientProvider>
+    )
+
+    // Hero 섹션 추가 (data-testid 사용)
+    fireEvent.click(screen.getByTestId('btn-add-hero'))
+
+    // 캔버스에서 첫 섹션 선택
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    // 인스펙터에서 Hero Heading 입력 존재
+    const heading = screen.getByLabelText('Hero Heading') as HTMLInputElement
+    expect(heading).toBeInTheDocument()
+    // 기본값 존재(Welcome)
+    expect(heading.value).toBeTruthy()
+
+    // 값 변경
+    fireEvent.change(heading, { target: { value: 'Hello World' } })
+    expect((screen.getByLabelText('Hero Heading') as HTMLInputElement).value).toBe('Hello World')
+  })
+})

components/BuilderClientPage.inspectorHelp.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen, within } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('BuilderClientPage - Inspector helptexts (Hero/CTA/FAQ)', () => {
+  test('Hero, CTA, FAQ helptexts render', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    // add hero and select it from canvas
+    screen.getByTestId('card-hero').click()
+    const sec0 = await screen.findByTestId('sec-item-0')
+    within(sec0).getByRole('button', { name: /Select/ }).click()
+    expect(await screen.findByText(/Main heading displayed prominently/i)).toBeInTheDocument()
+
+    // add cta and select it from canvas
+    screen.getByTestId('card-cta').click()
+    const sec1 = await screen.findByTestId('sec-item-1')
+    within(sec1).getByRole('button', { name: /Select/ }).click()
+    expect(await screen.findByLabelText('CTA Text')).toBeInTheDocument()
+    expect(await screen.findByLabelText('CTA Href')).toBeInTheDocument()
+
+    // add faq and select it from canvas
+    screen.getByTestId('card-faq').click()
+    const sec2 = await screen.findByTestId('sec-item-2')
+    within(sec2).getByRole('button', { name: /Select/ }).click()
+    expect(await screen.findByText(/Add at least one FAQ item with Q and A/i)).toBeInTheDocument()
+  })
+})

components/BuilderClientPage.kbd.featuresTestimonials.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('Inspector keyboard UX - Features & Testimonials add item', () => {
+  test('Features: Space/Enter activates Add Feature Item', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    // Add features section and select it
+    fireEvent.click(screen.getByTestId('card-features'))
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    const addBtn = screen.getByRole('button', { name: /Add Feature Item/i })
+
+    // Space key
+    addBtn.focus()
+    fireEvent.keyDown(addBtn, { key: ' ', code: 'Space', charCode: 32 })
+    // Expect first input to appear (Feature 0)
+    expect(screen.getByLabelText('Feature 0')).toBeInTheDocument()
+
+    // Enter key adds another
+    addBtn.focus()
+    fireEvent.keyDown(addBtn, { key: 'Enter', code: 'Enter', charCode: 13 })
+    expect(screen.getByLabelText('Feature 1')).toBeInTheDocument()
+  })
+
+  test('Testimonials: Space/Enter activates Add Testimonial', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    // Add testimonials section and select it
+    fireEvent.click(screen.getByTestId('card-testimonials'))
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    const addBtn = screen.getByRole('button', { name: /Add Testimonial/i })
+
+    // Space
+    addBtn.focus()
+    fireEvent.keyDown(addBtn, { key: ' ', code: 'Space', charCode: 32 })
+    expect(screen.getByLabelText('Author 0')).toBeInTheDocument()
+    expect(screen.getByLabelText('Quote 0')).toBeInTheDocument()
+
+    // Enter adds another
+    addBtn.focus()
+    fireEvent.keyDown(addBtn, { key: 'Enter', code: 'Enter', charCode: 13 })
+    expect(screen.getByLabelText('Author 1')).toBeInTheDocument()
+    expect(screen.getByLabelText('Quote 1')).toBeInTheDocument()
+  })
+})

components/BuilderClientPage.kbd.remove.test.tsx

@@ -0,0 +1,111 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('Inspector keyboard UX - Remove actions', () => {
+  test('Features: Remove with Space/Enter', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    // Add features and select
+    fireEvent.click(screen.getByTestId('card-features'))
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    // Add two items
+    const addBtn = screen.getByRole('button', { name: /Add Feature Item/i })
+    let inputs = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
+    const beforeAdd = inputs.length
+    fireEvent.click(addBtn)
+    fireEvent.click(addBtn)
+    inputs = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
+    expect(inputs.length).toBe(beforeAdd + 2)
+
+    // Remove last item via Space
+    inputs = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
+    const beforeRemoveA = inputs.length
+    let removeButtons = screen.queryAllByRole('button', { name: /Remove Feature \d+/ })
+    const rmLastA = removeButtons[removeButtons.length - 1]
+    rmLastA.focus()
+    fireEvent.keyUp(rmLastA, { key: ' ', code: 'Space', charCode: 32 })
+    await waitFor(() => {
+      const now = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
+      expect(now.length).toBe(beforeRemoveA - 1)
+    })
+
+    // Add another then remove last via Enter
+    fireEvent.click(addBtn)
+    inputs = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
+    const beforeRemoveB = inputs.length
+    removeButtons = screen.queryAllByRole('button', { name: /Remove Feature \d+/ })
+    const rmLastB = removeButtons[removeButtons.length - 1]
+    rmLastB.focus()
+    fireEvent.keyUp(rmLastB, { key: 'Enter', code: 'Enter', charCode: 13 })
+    await waitFor(() => {
+      const now = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
+      expect(now.length).toBe(beforeRemoveB - 1)
+    })
+  })
+
+  test('Testimonials: Remove with Space/Enter', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    // Add testimonials and select
+    fireEvent.click(screen.getByTestId('card-testimonials'))
+    fireEvent.click(screen.getByLabelText('Select 0'))
+
+    // Add two items
+    const addBtn = screen.getByRole('button', { name: /Add Testimonial/i })
+    let authors = screen.queryAllByRole('textbox', { name: /Author \d+/ })
+    let quotes = screen.queryAllByRole('textbox', { name: /Quote \d+/ })
+    const beforeAddT = authors.length
+    fireEvent.click(addBtn)
+    fireEvent.click(addBtn)
+    authors = screen.queryAllByRole('textbox', { name: /Author \d+/ })
+    quotes = screen.queryAllByRole('textbox', { name: /Quote \d+/ })
+    expect(authors.length).toBe(beforeAddT + 2)
+    expect(quotes.length).toBe(beforeAddT + 2)
+
+    // Remove last item via Enter
+    authors = screen.queryAllByRole('textbox', { name: /Author \d+/ })
+    let beforeRemoveT = authors.length
+    let rmTButtons = screen.queryAllByRole('button', { name: /Remove Testimonial \d+/ })
+    let rmLastT = rmTButtons[rmTButtons.length - 1]
+    rmLastT.focus()
+    fireEvent.keyUp(rmLastT, { key: 'Enter', code: 'Enter', charCode: 13 })
+    await waitFor(() => {
+      const aNow = screen.queryAllByRole('textbox', { name: /Author \d+/ })
+      expect(aNow.length).toBe(beforeRemoveT - 1)
+    })
+
+    // Add another then remove last via Space
+    fireEvent.click(addBtn)
+    authors = screen.queryAllByRole('textbox', { name: /Author \d+/ })
+    beforeRemoveT = authors.length
+    rmTButtons = screen.queryAllByRole('button', { name: /Remove Testimonial \d+/ })
+    rmLastT = rmTButtons[rmTButtons.length - 1]
+    rmLastT.focus()
+    fireEvent.keyUp(rmLastT, { key: ' ', code: 'Space', charCode: 32 })
+    await waitFor(() => {
+      const aNow = screen.queryAllByRole('textbox', { name: /Author \d+/ })
+      expect(aNow.length).toBe(beforeRemoveT - 1)
+    })
+  })
+})

components/BuilderClientPage.previewViewport.persist.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test, beforeEach } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('BuilderClientPage - preview viewport persistence & placeholders', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    cleanup()
+  })
+
+  test('persists viewport selection in localStorage', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    const container = screen.getByTestId('preview-container')
+    expect(container).toHaveClass('w-[768px]')
+
+    fireEvent.click(screen.getByRole('button', { name: /Mobile/i }))
+    expect(container).toHaveClass('w-[375px]')
+
+    // remount
+    cleanup()
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    const container2 = screen.getByTestId('preview-container')
+    expect(container2).toHaveClass('w-[375px]')
+  })
+
+  test('inspector inputs have helpful placeholders', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    expect(screen.getByLabelText('SEO Title')).toHaveAttribute('placeholder')
+    expect(screen.getByLabelText('SEO Description')).toHaveAttribute('placeholder')
+    expect(screen.getByLabelText('OG Image URL')).toHaveAttribute('placeholder')
+    expect(screen.getByLabelText('GA4 Measurement ID')).toHaveAttribute('placeholder')
+    expect(screen.getByLabelText('Meta Pixel ID')).toHaveAttribute('placeholder')
+  })
+})

components/BuilderClientPage.previewViewport.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('BuilderClientPage - preview viewport toggle', () => {
+  test('toggles preview width between mobile and desktop', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    const container = screen.getByTestId('preview-container')
+    // default is desktop
+    expect(container).toHaveClass('w-[768px]')
+
+    fireEvent.click(screen.getByRole('button', { name: /Mobile/i }))
+    expect(container).toHaveClass('w-[375px]')
+
+    fireEvent.click(screen.getByRole('button', { name: /Desktop/i }))
+    expect(container).toHaveClass('w-[768px]')
+  })
+})

components/BuilderClientPage.sectionCanvas.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+import { NextIntlClientProvider } from 'next-intl'
+import enMessages from '@/messages/en.json'
+import BuilderClientPage from '@/components/BuilderClientPage'
+
+const messages: Record<string, string> = enMessages as Record<string, string>
+
+describe('BuilderClientPage - SectionCanvas integration', () => {
+  it('섹션을 추가하고 이동/삭제가 동작한다', () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <BuilderClientPage />
+      </NextIntlClientProvider>
+    )
+
+    // 섹션 3개 추가: Hero, FAQ, CTA (data-testid 사용)
+    fireEvent.click(screen.getByTestId('btn-add-hero'))
+    fireEvent.click(screen.getByTestId('btn-add-faq'))
+    fireEvent.click(screen.getByTestId('btn-add-cta'))
+
+    const canvas = screen.getByTestId('section-canvas')
+    expect(canvas).toBeInTheDocument()
+
+    // 초기 순서 확인: hero, faq, cta
+    let items = canvas.querySelectorAll('li')
+    expect(items.length).toBe(3)
+    expect(items[0].textContent).toMatch(/hero/)
+    expect(items[1].textContent).toMatch(/faq/)
+    expect(items[2].textContent).toMatch(/cta/)
+
+    // 두 번째 항목(faq)을 위로 이동 (Up 1)
+    fireEvent.click(screen.getByLabelText('Up 1'))
+    items = canvas.querySelectorAll('li')
+    expect(items[0].textContent).toMatch(/faq/)
+    expect(items[1].textContent).toMatch(/hero/)
+
+    // 마지막 항목(cta)을 위로 이동 (Up 2)
+    fireEvent.click(screen.getByLabelText('Up 2'))
+    items = canvas.querySelectorAll('li')
+    expect(items[0].textContent).toMatch(/faq/)
+    expect(items[1].textContent).toMatch(/cta/)
+    expect(items[2].textContent).toMatch(/hero/)
+
+    // 가운데 항목(cta) 삭제 (Remove 1)
+    fireEvent.click(screen.getByLabelText('Remove 1'))
+    items = canvas.querySelectorAll('li')
+    expect(items.length).toBe(2)
+    expect(items[0].textContent).toMatch(/faq/)
+    expect(items[1].textContent).toMatch(/hero/)
+  })
+})

components/BuilderClientPage.seoAnalytics.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('SEO/Analytics inspector', () => {
+  test('edits SEO title/description and shows in preview', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    const seoTitle = screen.getByLabelText('SEO Title')
+    const seoDesc = screen.getByLabelText('SEO Description')
+
+    fireEvent.change(seoTitle, { target: { value: 'Landing SEO' } })
+    fireEvent.change(seoDesc, { target: { value: 'Great page' } })
+
+    expect(await screen.findByTestId('preview-seo-title')).toHaveTextContent('Landing SEO')
+    expect(await screen.findByTestId('preview-seo-description')).toHaveTextContent('Great page')
+  })
+
+  test('edits Analytics fields and shows in preview', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    const ga4 = screen.getByLabelText('GA4 Measurement ID')
+    const mp = screen.getByLabelText('Meta Pixel ID')
+
+    fireEvent.change(ga4, { target: { value: 'G-TEST123' } })
+    fireEvent.change(mp, { target: { value: '1234567890' } })
+
+    expect(await screen.findByTestId('preview-ga4')).toHaveTextContent('G-TEST123')
+    expect(await screen.findByTestId('preview-meta-pixel')).toHaveTextContent('1234567890')
+  })
+})

components/BuilderClientPage.seoHelp.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('BuilderClientPage - SEO/Analytics helptexts', () => {
+  test('renders helpful hints under SEO/Analytics/OG inputs', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    expect(screen.getByText(/Shown in browser title and social previews/i)).toBeInTheDocument()
+    expect(screen.getByText(/Used by search engines and OG description/i)).toBeInTheDocument()
+    expect(screen.getByText(/Absolute URL recommended/i)).toBeInTheDocument()
+    expect(screen.getByText(/Format: G-XXXXXXXXXX/i)).toBeInTheDocument()
+    expect(screen.getByText(/Numeric Page ID/i)).toBeInTheDocument()
+  })
+})

components/BuilderClientPage.tsx

@@ -0,0 +1,698 @@
+"use client"
+
+import React, { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import { useTranslations } from 'next-intl'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+import { AssetManager } from '@/lib/assets/assetManager'
+import { buildZip } from '@/lib/exporter/zip'
+import type { Section } from '@/lib/state/store'
+import { createFormStore, type FormState } from '@/lib/state/formStore'
+import FormBuilderPanel from '@/components/FormBuilderPanel'
+import BuilderShell from '@/components/BuilderShell'
+import SectionCanvas from '@/components/SectionCanvas'
+import SidebarComponents from '@/components/SidebarComponents'
+
+function download(filename: string, data: Uint8Array) {
+  const ab = data.slice().buffer as ArrayBuffer
+  const blob = new Blob([ab], { type: 'application/zip' })
+  try {
+    if (typeof window !== 'undefined') {
+      const w = window as unknown as { __captureExport?: boolean; __lastBlob?: Blob }
+      if (w.__captureExport) {
+        w.__lastBlob = blob
+      }
+    }
+  } catch {}
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  URL.revokeObjectURL(url)
+}
+
+export default function BuilderClientPage() {
+  const t = useTranslations()
+  const [locale, setLocale] = useState<'en' | 'ko'>('en')
+  const [title, setTitle] = useState('My Landing')
+  const [primaryColor, setPrimaryColor] = useState('#0ea5e9')
+  const [fontFamily, setFontFamily] = useState('Inter')
+  const [sections, setSections] = useState<Section[]>([])
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
+  const [seoTitle, setSeoTitle] = useState<string>('')
+  const [seoDescription, setSeoDescription] = useState<string>('')
+  const [ogImage, setOgImage] = useState<string>('')
+  const [ga4MeasurementId, setGa4MeasurementId] = useState<string>('')
+  const [metaPixelId, setMetaPixelId] = useState<string>('')
+  const [viewport, setViewport] = useState<'desktop' | 'mobile'>(() => {
+    if (typeof window !== 'undefined') {
+      try {
+        const saved = localStorage.getItem('builder.viewport') as 'desktop' | 'mobile' | null
+        if (saved === 'desktop' || saved === 'mobile') return saved
+      } catch {}
+    }
+    return 'desktop'
+  })
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const assetManagerRef = useRef<AssetManager>(
+    new AssetManager({ maxBytes: 10 * 1024 * 1024, allowedExts: ['png', 'jpg', 'jpeg', 'webp', 'svg'] })
+  )
+
+  useEffect(() => {
+    try {
+      localStorage.setItem('builder.viewport', viewport)
+    } catch {}
+  }, [viewport])
+  const [am, setAm] = useState<AssetManager | null>(null)
+  useEffect(() => {
+    setAm(assetManagerRef.current)
+  }, [])
+  const [selectedFileName, setSelectedFileName] = useState<string>('')
+
+  // form store (stable instance without ref access in render)
+  const formStore = useMemo(() => createFormStore(), [])
+  const formState: FormState = useSyncExternalStore(
+    formStore.subscribe,
+    formStore.getState,
+    formStore.getState
+  )
+
+  const addHero = useCallback(async () => {
+    const fileEl = fileInputRef.current
+    if (fileEl && fileEl.files && fileEl.files.length > 0) {
+      const file = fileEl.files[0]
+      const buf = new Uint8Array(await file.arrayBuffer())
+      if (am) {
+        await am.add({ name: file.name, type: file.type, bytes: buf })
+      }
+      setSelectedFileName(file.name)
+    }
+    // 파일이 없어도 Hero 섹션은 추가(이미지는 placeholder 사용)
+    const hero: Section = { type: 'hero', props: { heading: 'Welcome', subheading: '' } }
+    setSections((prev) => [...prev, hero])
+  }, [am])
+
+  const addFaq = useCallback(() => {
+    const faq: Section = { type: 'faq', props: { items: [] } }
+    setSections((prev) => [...prev, faq])
+  }, [])
+
+  const addCta = useCallback(() => {
+    const cta: Section = { type: 'cta', props: { text: 'Get Started', href: '#' } }
+    setSections((prev) => [...prev, cta])
+  }, [])
+
+  const addFeatures = useCallback(() => {
+    const features: Section = { type: 'features', props: { items: ['Feature A', 'Feature B', 'Feature C'] } }
+    setSections((prev) => [...prev, features])
+  }, [])
+
+  const addTestimonials = useCallback(() => {
+    const testimonials: Section = {
+      type: 'testimonials',
+      props: { items: [{ author: 'Jane', quote: 'Great product!' }, { author: 'John', quote: 'Loved it.' }] },
+    }
+    setSections((prev) => [...prev, testimonials])
+  }, [])
+
+  const removeAt = useCallback((idx: number) => {
+    setSections((prev) => prev.filter((_, i) => i !== idx))
+  }, [])
+
+  const moveSection = useCallback((from: number, to: number) => {
+    setSections((prev) => {
+      if (from < 0 || to < 0 || from >= prev.length || to >= prev.length) return prev
+      const next = prev.slice()
+      const [sp] = next.splice(from, 1)
+      next.splice(to, 0, sp)
+      return next
+    })
+  }, [])
+
+  const pageData = useMemo<Page>(() => {
+    const firstName = selectedFileName
+
+    const mappedSections = sections.map((s: Section) => {
+      if (s.type === 'hero') {
+        return {
+          type: 'hero' as const,
+          props: {
+            heading: s.props?.heading || 'Welcome',
+            subheading: s.props?.subheading || '',
+            imageUrl: firstName ? `local:${firstName}` : 'https://via.placeholder.com/800x400',
+          },
+        }
+      }
+      return s
+    })
+
+    return ({
+      title,
+      locale,
+      theme: { primaryColor, fontFamily },
+      sections: (mappedSections as unknown) as Page['sections'],
+      form: formState,
+      analytics: { ga4MeasurementId, metaPixelId, customHeadHtml: '' },
+      seo: { title: seoTitle || title, description: (seoDescription && seoDescription.trim()) ? seoDescription : 'Landing page', ogImage: (ogImage && ogImage.trim()) ? ogImage : undefined },
+    } as unknown) as Page
+  }, [title, locale, primaryColor, fontFamily, sections, formState, selectedFileName, seoTitle, seoDescription, ga4MeasurementId, metaPixelId, ogImage])
+
+  // test-only: expose preview exporter for E2E to read exported HTML/CSS/JS directly
+  useEffect(() => {
+    try {
+      if (typeof window !== 'undefined') {
+        const w = window as unknown as { __exportPreview?: () => { html: string; css: string; js: string } }
+        w.__exportPreview = () => {
+          try {
+            return exportPage(pageSchema.parse(pageData), { assetManager: am ?? undefined })
+          } catch {
+            const fixed: Page = {
+              ...pageData,
+              form: {
+                actionUrl: pageData.form?.actionUrl ?? '',
+                fields: pageData.form?.fields ?? [],
+                spamProtection: pageData.form?.spamProtection ?? { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+              },
+            }
+            return exportPage(pageSchema.parse(fixed), { assetManager: am ?? undefined })
+          }
+        }
+      }
+    } catch {}
+  }, [pageData, am])
+
+  const doExport = useCallback(async () => {
+    const valid = pageSchema.parse(pageData)
+    const exported = exportPage(valid, { assetManager: am ?? undefined })
+    try {
+      if (typeof window !== 'undefined') {
+        const w = window as unknown as { __captureExport?: boolean; __lastExport?: { html: string; css: string; js: string } }
+        if (w.__captureExport) {
+          w.__lastExport = exported
+        }
+      }
+    } catch {}
+    const assets = am ? am.toZipStructure() : {}
+    const zipBytes = await buildZip({ html: exported.html, css: exported.css, js: exported.js, assets })
+    download('landing.zip', zipBytes)
+  }, [pageData, am])
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-semibold">{t('builder.title')}</h1>
+
+      <BuilderShell
+        left={
+          <div className="space-y-4">
+            <SidebarComponents
+              onAddHero={addHero}
+              onAddFAQ={addFaq}
+              onAddCTA={addCta}
+              onAddFeatures={addFeatures}
+              onAddTestimonials={addTestimonials}
+            />
+            <FormBuilderPanel store={formStore} />
+          </div>
+        }
+        center={
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="block text-sm font-medium" htmlFor="builder-title">{t('builder.field.title')}</label>
+              <input id="builder-title" className="border rounded px-3 py-2 w-full" value={title} onChange={(e) => setTitle(e.target.value)} />
+            </div>
+            <div className="flex gap-4">
+              <div className="flex-1">
+                <label className="block text-sm font-medium" htmlFor="builder-locale">{t('builder.field.locale')}</label>
+                <select id="builder-locale" className="border rounded px-3 py-2 w-full" value={locale} onChange={(e) => setLocale(e.target.value as 'en' | 'ko')}>
+                  <option value="en">en</option>
+                  <option value="ko">ko</option>
+                </select>
+              </div>
+              <div className="flex-1">
+                <label className="block text-sm font-medium" htmlFor="builder-primary-color">{t('builder.field.primaryColor')}</label>
+                <input id="builder-primary-color" type="color" className="border rounded px-2 py-2 w-full h-10" value={primaryColor} onChange={(e) => setPrimaryColor(e.target.value)} />
+              </div>
+              <div className="flex-1">
+                <label className="block text-sm font-medium" htmlFor="builder-font-family">{t('builder.field.fontFamily')}</label>
+                <input id="builder-font-family" className="border rounded px-3 py-2 w-full" value={fontFamily} onChange={(e) => setFontFamily(e.target.value)} />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="block text-sm font-medium" htmlFor="builder-hero-file">{t('builder.upload.hero')}</label>
+              <input id="builder-hero-file" ref={fileInputRef} type="file" accept="image/*" className="block" />
+            </div>
+
+            <div className="flex gap-2">
+              <button data-testid="btn-add-hero" className="bg-sky-600 text-white rounded px-4 py-2" onClick={addHero}>{t('builder.action.addHero')}</button>
+              <button data-testid="btn-add-faq" className="bg-gray-200 rounded px-4 py-2" onClick={addFaq}>{t('builder.action.addFAQ')}</button>
+              <button data-testid="btn-add-cta" className="bg-gray-200 rounded px-4 py-2" onClick={addCta}>{t('builder.action.addCTA')}</button>
+            </div>
+
+            <div className="space-y-2">
+              <label className="block text-sm font-medium">{t('builder.sections')}</label>
+              <SectionCanvas
+                sections={sections}
+                onMove={moveSection}
+                onRemove={removeAt}
+                onSelect={(i) => setSelectedIndex(i)}
+              />
+            </div>
+          </div>
+        }
+        right={
+          <div className="space-y-3">
+            <button className="bg-emerald-600 text-white rounded px-4 py-2 w-full" onClick={doExport}>{t('builder.action.export')}</button>
+            <div className="border rounded p-3 space-y-2">
+              <h2 className="text-sm font-semibold mb-1">SEO / Analytics</h2>
+              <label className="block" htmlFor="ins-seo-title">
+                <span className="sr-only">SEO Title</span>
+                <input
+                  id="ins-seo-title"
+                  aria-label="SEO Title"
+                  aria-describedby="ins-seo-title-help"
+                  className="border rounded px-3 py-2 w-full"
+                  placeholder="e.g. Product landing page"
+                  value={seoTitle}
+                  onChange={(e) => setSeoTitle(e.target.value)}
+                />
+                <p id="ins-seo-title-help" className="mt-1 text-xs text-gray-500">Shown in browser title and social previews</p>
+              </label>
+              <label className="block" htmlFor="ins-seo-desc">
+                <span className="sr-only">SEO Description</span>
+                <input
+                  id="ins-seo-desc"
+                  aria-label="SEO Description"
+                  aria-describedby="ins-seo-desc-help"
+                  className="border rounded px-3 py-2 w-full"
+                  placeholder="Short description shown in search/OG"
+                  value={seoDescription}
+                  onChange={(e) => setSeoDescription(e.target.value)}
+                />
+                <p id="ins-seo-desc-help" className="mt-1 text-xs text-gray-500">Used by search engines and OG description</p>
+              </label>
+              <label className="block" htmlFor="ins-og-image">
+                <span className="sr-only">OG Image URL</span>
+                <input
+                  id="ins-og-image"
+                  aria-label="OG Image URL"
+                  aria-describedby="ins-og-image-help"
+                  className="border rounded px-3 py-2 w-full"
+                  placeholder="https://.../og-image.png"
+                  value={ogImage}
+                  onChange={(e) => setOgImage(e.target.value)}
+                />
+                <p id="ins-og-image-help" className="mt-1 text-xs text-gray-500">Absolute URL recommended</p>
+              </label>
+              <label className="block" htmlFor="ins-ga4">
+                <span className="sr-only">GA4 Measurement ID</span>
+                <input
+                  id="ins-ga4"
+                  aria-label="GA4 Measurement ID"
+                  aria-describedby="ins-ga4-help"
+                  className="border rounded px-3 py-2 w-full"
+                  placeholder="G-XXXXXXXXXX"
+                  value={ga4MeasurementId}
+                  onChange={(e) => setGa4MeasurementId(e.target.value)}
+                />
+                <p id="ins-ga4-help" className="mt-1 text-xs text-gray-500">Format: G-XXXXXXXXXX</p>
+              </label>
+              <label className="block" htmlFor="ins-meta-pixel">
+                <span className="sr-only">Meta Pixel ID</span>
+                <input
+                  id="ins-meta-pixel"
+                  aria-label="Meta Pixel ID"
+                  aria-describedby="ins-meta-pixel-help"
+                  className="border rounded px-3 py-2 w-full"
+                  placeholder="1234567890"
+                  value={metaPixelId}
+                  onChange={(e) => setMetaPixelId(e.target.value)}
+                />
+                <p id="ins-meta-pixel-help" className="mt-1 text-xs text-gray-500">Numeric Page ID</p>
+              </label>
+            </div>
+            <div className="border rounded p-3">
+              <h2 className="text-sm font-semibold mb-2">Inspector</h2>
+              {selectedIndex !== null && sections[selectedIndex] ? (
+                (() => {
+                  const s = sections[selectedIndex]
+                  if (s.type === 'hero') {
+                    const heading = s.props?.heading ?? 'Welcome'
+                    return (
+                      <div className="space-y-2">
+                        <label className="block" htmlFor="ins-hero-heading">
+                          <span className="sr-only">Hero Heading</span>
+                          <input
+                            id="ins-hero-heading"
+                            aria-label="Hero Heading"
+                            aria-describedby="ins-hero-heading-help"
+                            className="border rounded px-3 py-2 w-full"
+                            value={heading}
+                            onChange={(e) => {
+                              const v = e.target.value
+                              setSections((prev) => prev.map((it, idx) => {
+                                if (idx !== selectedIndex) return it
+                                return { ...it, props: { ...(it.props || {}), heading: v } } as Section
+                              }))
+                            }}
+                          />
+                        </label>
+                        <p id="ins-hero-heading-help" className="mt-1 text-xs text-gray-500">Main heading displayed prominently</p>
+                      </div>
+                    )
+                  }
+                  if (s.type === 'cta') {
+                    const text = s.props?.text ?? 'Get Started'
+                    const href = s.props?.href ?? '#'
+                    return (
+                      <div className="space-y-2">
+                        <label className="block" htmlFor="ins-cta-text">
+                          <span className="sr-only">CTA Text</span>
+                          <input
+                            id="ins-cta-text"
+                            aria-label="CTA Text"
+                            aria-describedby="ins-cta-text-help"
+                            className="border rounded px-3 py-2 w-full"
+                            value={text}
+                            onChange={(e) => {
+                              const v = e.target.value
+                              setSections((prev) => prev.map((it, idx) => {
+                                if (idx !== selectedIndex) return it
+                                return { ...it, props: { ...(it.props || {}), text: v } } as Section
+                              }))
+                            }}
+                          />
+                        </label>
+                        <p id="ins-cta-text-help" className="mt-1 text-xs text-gray-500">Button label and link for primary action</p>
+                        <label className="block" htmlFor="ins-cta-href">
+                          <span className="sr-only">CTA Href</span>
+                          <input
+                            id="ins-cta-href"
+                            aria-label="CTA Href"
+                            aria-describedby="ins-cta-href-help"
+                            className="border rounded px-3 py-2 w-full"
+                            value={href}
+                            onChange={(e) => {
+                              const v = e.target.value
+                              setSections((prev) => prev.map((it, idx) => {
+                                if (idx !== selectedIndex) return it
+                                return { ...it, props: { ...(it.props || {}), href: v } } as Section
+                              }))
+                            }}
+                          />
+                        </label>
+                        <p id="ins-cta-href-help" className="mt-1 text-xs text-gray-500">Button label and link for primary action</p>
+                      </div>
+                    )
+                  }
+                  if (s.type === 'faq') {
+                    const items: Array<{ q: string; a: string }> = Array.isArray(s.props?.items) ? (s.props.items as Array<{ q: string; a: string }>) : []
+                    const addItem = () => {
+                      const nextItems = [...items, { q: '', a: '' }]
+                      setSections((prev) => prev.map((it, idx) => {
+                        if (idx !== selectedIndex) return it
+                        return { ...it, props: { ...(it.props || {}), items: nextItems } } as Section
+                      }))
+                    }
+                    const updateItem = (i: number, patch: { q?: string; a?: string }) => {
+                      const nextItems = items.map((it: { q: string; a: string }, idx: number) => (idx === i ? { ...it, ...patch } : it))
+                      setSections((prev) => prev.map((it, idx) => {
+                        if (idx !== selectedIndex) return it
+                        return { ...it, props: { ...(it.props || {}), items: nextItems } } as Section
+                      }))
+                    }
+                    const removeItem = (i: number) => {
+                      const nextItems = items.filter((_: { q: string; a: string }, idx: number) => idx !== i)
+                      setSections((prev) => prev.map((it, idx) => {
+                        if (idx !== selectedIndex) return it
+                        return { ...it, props: { ...(it.props || {}), items: nextItems } } as Section
+                      }))
+                    }
+                    return (
+                      <div className="space-y-2">
+                        <button type="button" className="px-2 py-1 border rounded text-sm" title="Add FAQ Item" onClick={addItem}>Add FAQ Item</button>
+                        <p id="ins-faq-help" className="text-xs text-gray-500">Add at least one FAQ item with Q and A</p>
+                        <ul className="space-y-2">
+                          {items.map((it: { q: string; a: string }, i: number) => (
+                            <li key={i} className="flex items-start gap-2">
+                              <div className="flex-1 grid grid-cols-2 gap-2">
+                                <label className="block" htmlFor={`ins-faq-q-${i}`}>
+                                  <span className="sr-only">FAQ Q {i}</span>
+                                  <input
+                                    id={`ins-faq-q-${i}`}
+                                    aria-label={`FAQ Q ${i}`}
+                                    aria-describedby="ins-faq-help"
+                                    className="border rounded px-2 py-1 w-full"
+                                    value={it.q ?? ''}
+                                    onChange={(e) => updateItem(i, { q: e.target.value })}
+                                  />
+                                </label>
+                                <label className="block" htmlFor={`ins-faq-a-${i}`}>
+                                  <span className="sr-only">FAQ A {i}</span>
+                                  <input
+                                    id={`ins-faq-a-${i}`}
+                                    aria-label={`FAQ A ${i}`}
+                                    aria-describedby="ins-faq-help"
+                                    className="border rounded px-2 py-1 w-full"
+                                    value={it.a ?? ''}
+                                    onChange={(e) => updateItem(i, { a: e.target.value })}
+                                  />
+                                </label>
+                              </div>
+                              <button type="button" aria-label={`Remove FAQ ${i}`} className="px-2 py-1 border rounded text-sm text-red-600" onClick={() => removeItem(i)}>Remove</button>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )
+                  }
+                  if (s.type === 'features') {
+                    const items: string[] = Array.isArray(s.props?.items) ? (s.props.items as string[]) : []
+                    const addItem = () => {
+                      const nextItems = [...items, '']
+                      setSections((prev) => prev.map((it, idx) => (idx === selectedIndex ? ({ ...it, props: { ...(it.props || {}), items: nextItems } } as Section) : it)))
+                    }
+                    const updateItem = (i: number, v: string) => {
+                      const nextItems = items.map((it, idx) => (idx === i ? v : it))
+                      setSections((prev) => prev.map((it, idx) => (idx === selectedIndex ? ({ ...it, props: { ...(it.props || {}), items: nextItems } } as Section) : it)))
+                    }
+                    const removeItem = (i: number) => {
+                      const nextItems = items.filter((_, idx) => idx !== i)
+                      setSections((prev) => prev.map((it, idx) => (idx === selectedIndex ? ({ ...it, props: { ...(it.props || {}), items: nextItems } } as Section) : it)))
+                    }
+                    return (
+                      <div className="space-y-2">
+                        <button type="button" className="px-2 py-1 border rounded text-sm" title="Add Feature Item" onClick={addItem}>Add Feature Item</button>
+                        <p id="ins-features-help" className="text-xs text-gray-500">Describe a single feature per line</p>
+                        <ul className="space-y-2">
+                          {items.map((val, i) => (
+                            <li key={i} className="flex items-center gap-2">
+                              <label className="block flex-1" htmlFor={`ins-feature-${i}`}>
+                                <span className="sr-only">Feature {i}</span>
+                                <input
+                                  id={`ins-feature-${i}`}
+                                  aria-label={`Feature ${i}`}
+                                  aria-describedby="ins-features-help"
+                                  className="border rounded px-2 py-1 w-full"
+                                  value={val}
+                                  onChange={(e) => updateItem(i, e.target.value)}
+                                />
+                              </label>
+                              <button
+                                type="button"
+                                aria-label={`Remove Feature ${i}`}
+                                title={`Remove Feature ${i}`}
+                                className="px-2 py-1 border rounded text-sm text-red-600"
+                                onClick={() => removeItem(i)}
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter' || e.key === ' ') removeItem(i)
+                                }}
+                                onKeyUp={(e) => {
+                                  if (e.key === 'Enter' || e.key === ' ') removeItem(i)
+                                }}
+                              >
+                                Remove
+                              </button>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )
+                  }
+                  if (s.type === 'testimonials') {
+                    const items: Array<{ author: string; quote: string }> = Array.isArray(s.props?.items)
+                      ? (s.props.items as Array<{ author: string; quote: string }>)
+                      : []
+                    const addItem = () => {
+                      const nextItems = [...items, { author: '', quote: '' }]
+                      setSections((prev) => prev.map((it, idx) => (idx === selectedIndex ? ({ ...it, props: { ...(it.props || {}), items: nextItems } } as Section) : it)))
+                    }
+                    const updateItem = (i: number, patch: Partial<{ author: string; quote: string }>) => {
+                      const nextItems = items.map((it, idx) => (idx === i ? { ...it, ...patch } : it))
+                      setSections((prev) => prev.map((it, idx) => (idx === selectedIndex ? ({ ...it, props: { ...(it.props || {}), items: nextItems } } as Section) : it)))
+                    }
+                    const removeItem = (i: number) => {
+                      const nextItems = items.filter((_, idx) => idx !== i)
+                      setSections((prev) => prev.map((it, idx) => (idx === selectedIndex ? ({ ...it, props: { ...(it.props || {}), items: nextItems } } as Section) : it)))
+                    }
+                    return (
+                      <div className="space-y-2">
+                        <button type="button" className="px-2 py-1 border rounded text-sm" title="Add Testimonial" onClick={addItem}>Add Testimonial</button>
+                        <p id="ins-testimonials-help" className="text-xs text-gray-500">Add author and quote for each testimonial</p>
+                        <ul className="space-y-2">
+                          {items.map((it, i) => (
+                            <li key={i} className="grid grid-cols-2 gap-2 items-start">
+                              <label className="block" htmlFor={`ins-author-${i}`}>
+                                <span className="sr-only">Author {i}</span>
+                                <input
+                                  id={`ins-author-${i}`}
+                                  aria-label={`Author ${i}`}
+                                  aria-describedby="ins-testimonials-help"
+                                  className="border rounded px-2 py-1 w-full"
+                                  value={it.author}
+                                  onChange={(e) => updateItem(i, { author: e.target.value })}
+                                />
+                              </label>
+                              <label className="block" htmlFor={`ins-quote-${i}`}>
+                                <span className="sr-only">Quote {i}</span>
+                                <input
+                                  id={`ins-quote-${i}`}
+                                  aria-label={`Quote ${i}`}
+                                  aria-describedby="ins-testimonials-help"
+                                  className="border rounded px-2 py-1 w-full"
+                                  value={it.quote}
+                                  onChange={(e) => updateItem(i, { quote: e.target.value })}
+                                />
+                              </label>
+                              <div className="col-span-2">
+                                <button
+                                  type="button"
+                                  aria-label={`Remove Testimonial ${i}`}
+                                  title={`Remove Testimonial ${i}`}
+                                  className="px-2 py-1 border rounded text-sm text-red-600"
+                                  onClick={() => removeItem(i)}
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') removeItem(i)
+                                  }}
+                                  onKeyUp={(e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') removeItem(i)
+                                  }}
+                                >
+                                  Remove
+                                </button>
+                              </div>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )
+                  }
+                  return <div className="text-xs text-gray-500">No editable fields</div>
+                })()
+              ) : (
+                <div className="text-xs text-gray-500">Nothing selected</div>
+              )}
+            </div>
+            <div className="border rounded p-3">
+              <h2 className="text-sm font-semibold mb-2">{t('builder.preview')}</h2>
+              <p id="preview-toggle-help" className="sr-only">Toggle preview viewport for the builder preview area</p>
+              <div className="mb-2 flex gap-2">
+                <button
+                  type="button"
+                  aria-label="Desktop"
+                  aria-pressed={viewport === 'desktop'}
+                  aria-controls="preview-container"
+                  aria-describedby="preview-toggle-help"
+                  className={`rounded px-2 py-1 text-sm transition-colors border focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600 ${
+                    viewport === 'desktop'
+                      ? 'bg-sky-600 text-white border-sky-600'
+                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
+                  }`}
+                  onClick={() => setViewport('desktop')}
+                >
+                  Desktop
+                </button>
+                <button
+                  type="button"
+                  aria-label="Mobile"
+                  aria-pressed={viewport === 'mobile'}
+                  aria-controls="preview-container"
+                  aria-describedby="preview-toggle-help"
+                  className={`rounded px-2 py-1 text-sm transition-colors border focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600 ${
+                    viewport === 'mobile'
+                      ? 'bg-sky-600 text-white border-sky-600'
+                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
+                  }`}
+                  onClick={() => setViewport('mobile')}
+                >
+                  Mobile
+                </button>
+              </div>
+              <div className="prose max-w-none">
+                <div
+                  data-testid="preview-container"
+                  className={`border rounded p-3 ${viewport === 'desktop' ? 'w-[768px]' : 'w-[375px]'} mx-auto`}
+                >
+                <div className="mb-2"><strong>Title:</strong> {pageData.title}</div>
+                <div className="mb-2"><strong>Locale:</strong> {pageData.locale}</div>
+                <div className="mb-2"><strong>SEO Title:</strong> <span data-testid="preview-seo-title">{pageData.seo.title}</span></div>
+                <div className="mb-2"><strong>SEO Description:</strong> <span data-testid="preview-seo-description">{pageData.seo.description}</span></div>
+                <div className="mb-2"><strong>OG Image:</strong> <span data-testid="preview-og-image">{pageData.seo.ogImage || ''}</span></div>
+                <div className="mb-2"><strong>GA4:</strong> <span data-testid="preview-ga4">{pageData.analytics?.ga4MeasurementId || ''}</span></div>
+                <div className="mb-2"><strong>Meta Pixel:</strong> <span data-testid="preview-meta-pixel">{pageData.analytics?.metaPixelId || ''}</span></div>
+                <div className="space-y-2">
+                  {sections.map((s: Section, i: number) => {
+                    switch (s.type) {
+                      case 'hero':
+                        return (
+                          <div key={i} className="text-sm text-gray-700">• hero — heading: {s.props?.heading || 'Welcome'}</div>
+                        )
+                      case 'faq': {
+                        const count = s.props.items?.length || 0
+                        return (
+                          <div key={i} className="text-sm text-gray-700">• faq — items: {count}</div>
+                        )
+                      }
+                      case 'cta': {
+                        const text = s.props.text || 'CTA'
+                        const href = s.props.href || '#'
+                        return (
+                          <div key={i} className="text-sm text-gray-700">• cta — {text} → {href}</div>
+                        )
+                      }
+                      case 'features': {
+                        const count = s.props.items?.length || 0
+                        return (
+                          <div key={i} className="text-sm text-gray-700">• features — items: {count}</div>
+                        )
+                      }
+                      case 'testimonials': {
+                        const count = s.props.items?.length || 0
+                        return (
+                          <div key={i} className="text-sm text-gray-700">• testimonials — items: {count}</div>
+                        )
+                      }
+                      default:
+                        return null
+                    }
+                  })}
+                </div>
+                <ul className="list-disc pl-5 mt-2">
+                  {formState.fields.map((f, idx) => (
+                    <li key={`${f.name}-${idx}`} className="text-sm">
+                      {f.label} ({f.name}) {f.required ? 'required' : ''}
+                    </li>
+                  ))}
+                </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+      />
+    </div>
+  )
+}

components/BuilderShell.test.tsx

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import BuilderShell from '@/components/BuilderShell'
+
+describe('BuilderShell', () => {
+  it('좌/중/우 3패널과 접근성 라벨을 렌더링한다', () => {
+    render(
+      <BuilderShell left={<div>LEFT</div>} center={<div>CENTER</div>} right={<div>RIGHT</div>} />
+    )
+
+    expect(screen.getByTestId('builder-shell')).toBeInTheDocument()
+    expect(screen.getByLabelText('Components Panel')).toBeInTheDocument()
+    expect(screen.getByLabelText('Canvas')).toBeInTheDocument()
+    expect(screen.getByLabelText('Inspector')).toBeInTheDocument()
+  })
+})

components/BuilderShell.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import React from 'react'
+
+export default function BuilderShell({
+  left,
+  center,
+  right,
+}: {
+  left: React.ReactNode
+  center: React.ReactNode
+  right: React.ReactNode
+}) {
+  return (
+    <div className="h-full w-full grid grid-cols-1 md:grid-cols-[280px_1fr_320px] gap-4 p-4" data-testid="builder-shell">
+      <aside className="border rounded p-3 min-h-[200px]" aria-label="Components Panel" data-testid="panel-left">
+        {left}
+      </aside>
+      <main className="border rounded p-3 min-h-[200px]" aria-label="Canvas" data-testid="panel-center">
+        {center}
+      </main>
+      <aside className="border rounded p-3 min-h-[200px]" aria-label="Inspector" data-testid="panel-right">
+        {right}
+      </aside>
+    </div>
+  )
+}

components/FormBuilderPanel.a11y.test.tsx

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { expect, test } from 'vitest'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import FormBuilderPanel from './FormBuilderPanel'
+import { createFormStore } from '@/lib/state/formStore'
+
+expect.extend(toHaveNoViolations)
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+test('FormBuilderPanel has no obvious a11y violations', async () => {
+  const store = createFormStore()
+  const { container } = render(
+    <Wrapper>
+      <FormBuilderPanel store={store} />
+    </Wrapper>
+  )
+  const results = await axe(container)
+  expect(results).toHaveNoViolations()
+})

components/FormBuilderPanel.test.tsx

@@ -0,0 +1,138 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+import FormBuilderPanel from '@/components/FormBuilderPanel'
+import { createFormStore } from '@/lib/state/formStore'
+import type { SelectField, RadioField } from '@/lib/state/formStore'
+import { NextIntlClientProvider } from 'next-intl'
+import enMessages from '@/messages/en.json'
+const messages: Record<string, string> = enMessages as Record<string, string>
+
+describe('FormBuilderPanel', () => {
+  it('필드 추가와 action URL/스팸 옵션 변경을 수행한다', () => {
+    const store = createFormStore()
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <FormBuilderPanel store={store} />
+      </NextIntlClientProvider>
+    )
+
+    // 초기 상태
+    expect(screen.queryAllByTestId('field-item').length).toBe(0)
+
+    // 필드 추가 2개 (번역 키 이슈 회피: 첫 번째 버튼 클릭)
+    fireEvent.click(screen.getAllByRole('button')[0])
+    fireEvent.click(screen.getAllByRole('button')[0])
+    expect(screen.queryAllByTestId('field-item').length).toBe(2)
+
+    // action URL 입력
+    const actionInput = screen.getByLabelText('Action URL') as HTMLInputElement
+    fireEvent.change(actionInput, { target: { value: 'https://example.com/form' } })
+    expect(actionInput.value).toBe('https://example.com/form')
+    expect(store.getState().actionUrl).toBe('https://example.com/form')
+
+    // 스팸 옵션 - honeypot 변경
+    const hpInput = screen.getByLabelText('Honeypot Field') as HTMLInputElement
+    fireEvent.change(hpInput, { target: { value: '_trap' } })
+    expect(store.getState().spam.honeypotFieldName).toBe('_trap')
+
+    // 스팸 옵션 - min seconds 변경
+    const tsInput = screen.getByLabelText('Min Submit Seconds') as HTMLInputElement
+    fireEvent.change(tsInput, { target: { value: '5' } })
+    expect(store.getState().spam.minSubmitSeconds).toBe(5)
+  })
+
+  it('pattern과 maxLength 편집이 상태에 반영된다', () => {
+    const store = createFormStore()
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <FormBuilderPanel store={store} />
+      </NextIntlClientProvider>
+    )
+
+    // 텍스트 필드 1개 추가
+    fireEvent.click(screen.getAllByRole('button')[0])
+
+    const pat0 = screen.getByLabelText('Pattern 0') as HTMLInputElement
+    fireEvent.change(pat0, { target: { value: '^[A-Za-z ]+$' } })
+    expect(store.getState().fields[0].pattern).toBe('^[A-Za-z ]+$')
+
+    const max0 = screen.getByLabelText('MaxLength 0') as HTMLInputElement
+    fireEvent.change(max0, { target: { value: '50' } })
+    expect(store.getState().fields[0].maxLength).toBe(50)
+  })
+
+  it('select/radio 옵션 편집이 동작하고 추가 버튼으로 타입별 필드를 만든다', () => {
+    const store = createFormStore()
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <FormBuilderPanel store={store} />
+      </NextIntlClientProvider>
+    )
+
+    // select 추가 후 옵션 편집 (버튼 인덱스로 접근)
+    const buttons1 = screen.getAllByRole('button')
+    // 버튼 순서: Text, Email, Tel, Date, Textarea, Checkbox, Select, Radio
+    fireEvent.click(buttons1[6])
+    const opts0 = screen.getByLabelText('Options 0') as HTMLInputElement
+    fireEvent.change(opts0, { target: { value: 'A,B,C' } })
+    expect(store.getState().fields[0].type).toBe('select')
+    expect((store.getState().fields[0] as SelectField).options).toEqual(['A','B','C'])
+
+    // radio 추가 후 옵션 편집
+    const buttons2 = screen.getAllByRole('button')
+    fireEvent.click(buttons2[7])
+    const opts1 = screen.getByLabelText('Options 1') as HTMLInputElement
+    fireEvent.change(opts1, { target: { value: 'S,M,L' } })
+    expect(store.getState().fields[1].type).toBe('radio')
+    expect((store.getState().fields[1] as RadioField).options).toEqual(['S','M','L'])
+
+    // email/checkbox/textarea/date/tel도 추가 버튼 존재 (인덱스 기반 클릭)
+    const buttons3 = screen.getAllByRole('button')
+    fireEvent.click(buttons3[1]) // Email
+    fireEvent.click(buttons3[5]) // Checkbox
+    fireEvent.click(buttons3[4]) // Textarea
+    fireEvent.click(buttons3[3]) // Date
+    fireEvent.click(buttons3[2]) // Tel
+
+    const names = store.getState().fields.map((f) => f.type)
+    expect(names).toContain('email')
+    expect(names).toContain('checkbox')
+    expect(names).toContain('textarea')
+    expect(names).toContain('date')
+    expect(names).toContain('tel')
+  })
+
+  it('필드 레이블/필수 편집, 이동/삭제가 동작한다', () => {
+    const store = createFormStore()
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <FormBuilderPanel store={store} />
+      </NextIntlClientProvider>
+    )
+
+    // 3개 추가
+    fireEvent.click(screen.getAllByRole('button')[0])
+    fireEvent.click(screen.getAllByRole('button')[0])
+    fireEvent.click(screen.getAllByRole('button')[0])
+    expect(screen.queryAllByTestId('field-item').length).toBe(3)
+
+    // 첫 필드 레이블 변경
+    const label0 = screen.getByLabelText('Label 0') as HTMLInputElement
+    fireEvent.change(label0, { target: { value: 'Name' } })
+    expect(store.getState().fields[0].label).toBe('Name')
+
+    // 첫 필드 required 토글
+    const req0 = screen.getByLabelText('Required 0') as HTMLInputElement
+    fireEvent.click(req0)
+    expect(store.getState().fields[0].required).toBe(true)
+
+    // 첫 필드를 아래로 이동 (0 -> 1)
+    fireEvent.click(screen.getByRole('button', { name: 'Down 0' }))
+    expect(store.getState().fields.map(f => f.name)).toEqual(['field2','field1','field3'])
+
+    // 두 번째(이전 첫) 필드 삭제
+    fireEvent.click(screen.getByRole('button', { name: 'Remove 1' }))
+    expect(store.getState().fields.map(f => f.name)).toEqual(['field2','field3'])
+  })
+})

components/FormBuilderPanel.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import React, { useCallback, useSyncExternalStore } from 'react'
+import type { FormState, FormField } from '@/lib/state/formStore'
+import { useTranslations } from 'next-intl'
+
+type Store = {
+  getState: () => FormState
+  subscribe: (listener: () => void) => () => void
+}
+
+export default function FormBuilderPanel({ store }: { store: Store }) {
+  const t = useTranslations()
+  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState)
+
+  const onAddText = useCallback(() => {
+    const idx = state.fields.length + 1
+    const name = `field${idx}`
+    store.getState().addField({ type: 'text', name, label: `Text ${idx}`, required: false })
+  }, [state.fields.length, store])
+
+  const nextName = () => `field${state.fields.length + 1}`
+  const onAddEmail = () => store.getState().addField({ type: 'email', name: nextName(), label: 'Email', required: false })
+  const onAddTel = () => store.getState().addField({ type: 'tel', name: nextName(), label: 'Tel', required: false })
+  const onAddDate = () => store.getState().addField({ type: 'date', name: nextName(), label: 'Date', required: false })
+  const onAddTextarea = () => store.getState().addField({ type: 'textarea', name: nextName(), label: 'Message', required: false })
+  const onAddCheckbox = () => store.getState().addField({ type: 'checkbox', name: nextName(), label: 'Agree', required: false })
+  const onAddSelect = () => store.getState().addField({ type: 'select', name: nextName(), label: 'Select', required: false, options: [] })
+  const onAddRadio = () => store.getState().addField({ type: 'radio', name: nextName(), label: 'Radio', required: false, options: [] })
+
+  const onChangeAction = (e: React.ChangeEvent<HTMLInputElement>) => {
+    store.getState().setActionUrl(e.target.value)
+  }
+
+  const onChangeHp = (e: React.ChangeEvent<HTMLInputElement>) => {
+    store.getState().setSpam({ honeypotFieldName: e.target.value })
+  }
+
+  const onChangeTs = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = parseInt(e.target.value || '0', 10)
+    store.getState().setSpam({ minSubmitSeconds: Number.isNaN(v) ? 0 : v })
+  }
+
+  const onChangeLabel = (i: number, e: React.ChangeEvent<HTMLInputElement>) => {
+    store.getState().updateField(i, { label: e.target.value })
+  }
+
+  const onToggleRequired = (i: number) => {
+    const cur = store.getState().fields[i]?.required ?? false
+    store.getState().updateField(i, { required: !cur })
+  }
+
+  const onDown = (i: number) => {
+    if (i < state.fields.length - 1) {
+      store.getState().moveField(i, i + 1)
+    }
+  }
+
+  const onRemove = (i: number) => {
+    store.getState().removeField(i)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <button type="button" data-testid="btn-add-text" onClick={onAddText} className="px-2 py-1 border rounded">{t('builder.action.addText')}</button>
+        <button type="button" onClick={onAddEmail} className="px-2 py-1 border rounded">{t('builder.action.addEmail')}</button>
+        <button type="button" onClick={onAddTel} className="px-2 py-1 border rounded">{t('builder.action.addTel')}</button>
+        <button type="button" onClick={onAddDate} className="px-2 py-1 border rounded">{t('builder.action.addDate')}</button>
+        <button type="button" onClick={onAddTextarea} className="px-2 py-1 border rounded">{t('builder.action.addTextarea')}</button>
+        <button type="button" onClick={onAddCheckbox} className="px-2 py-1 border rounded">{t('builder.action.addCheckbox')}</button>
+        <button type="button" onClick={onAddSelect} className="px-2 py-1 border rounded">{t('builder.action.addSelect')}</button>
+        <button type="button" onClick={onAddRadio} className="px-2 py-1 border rounded">{t('builder.action.addRadio')}</button>
+      </div>
+
+      <div className="space-y-2">
+        <label className="block" htmlFor="form-action-url">
+          <span className="block text-sm">{t('builder.form.actionUrl')}</span>
+          <input id="form-action-url" aria-label="Action URL" className="border px-2 py-1 w-full" value={state.actionUrl}
+            onChange={onChangeAction} />
+        </label>
+        <label className="block" htmlFor="form-honeypot">
+          <span className="block text-sm">{t('builder.form.honeypot')}</span>
+          <input id="form-honeypot" aria-label="Honeypot Field" className="border px-2 py-1 w-full" value={state.spam.honeypotFieldName}
+            onChange={onChangeHp} />
+        </label>
+        <label className="block" htmlFor="form-min-seconds">
+          <span className="block text-sm">{t('builder.form.minSeconds')}</span>
+          <input id="form-min-seconds" aria-label="Min Submit Seconds" type="number" className="border px-2 py-1 w-full" value={state.spam.minSubmitSeconds}
+            onChange={onChangeTs} />
+        </label>
+      </div>
+
+      <ul className="space-y-2">
+        {state.fields.map((f: FormField, i: number) => (
+          <li key={`${f.name}-${i}`} data-testid="field-item" className="text-sm border rounded p-2 flex items-center gap-2">
+            <div className="flex-1">
+              <div className="text-xs text-gray-500">{f.type} - {f.name}</div>
+              <label className="block" htmlFor={`field-label-${i}`}>
+                <span className="sr-only">Label {i}</span>
+                <input id={`field-label-${i}`} aria-label={`Label ${i}`} className="border px-2 py-1 w-full" value={f.label}
+                  onChange={(e) => onChangeLabel(i, e)} />
+              </label>
+              <label className="inline-flex items-center gap-2 mt-1" htmlFor={`field-required-${i}`}>
+                <input id={`field-required-${i}`} aria-label={`Required ${i}`} type="checkbox" checked={!!f.required}
+                  onChange={() => onToggleRequired(i)} />
+                <span className="text-xs">required</span>
+              </label>
+              {(f.type === 'text' || f.type === 'email' || f.type === 'tel' || f.type === 'date' || f.type === 'textarea') && (
+                <div className="mt-1 grid grid-cols-2 gap-2">
+                  <label className="block" htmlFor={`field-pattern-${i}`}>
+                    <span className="sr-only">Pattern {i}</span>
+                    <input
+                      id={`field-pattern-${i}`}
+                      aria-label={`Pattern ${i}`}
+                      className="border px-2 py-1 w-full"
+                      value={f.pattern ?? ''}
+                      onChange={(e) => store.getState().updateField(i, { pattern: e.target.value })}
+                    />
+                  </label>
+                  <label className="block" htmlFor={`field-maxlen-${i}`}>
+                    <span className="sr-only">MaxLength {i}</span>
+                    <input
+                      id={`field-maxlen-${i}`}
+                      aria-label={`MaxLength ${i}`}
+                      type="number"
+                      className="border px-2 py-1 w-full"
+                      value={f.maxLength ?? ''}
+                      onChange={(e) => {
+                        const v = parseInt(e.target.value || '0', 10)
+                        store.getState().updateField(i, { maxLength: Number.isNaN(v) ? undefined : v })
+                      }}
+                    />
+                  </label>
+                </div>
+              )}
+              {(f.type === 'select' || f.type === 'radio') && (
+                <label className="block mt-1" htmlFor={`field-options-${i}`}>
+                  <span className="sr-only">Options {i}</span>
+                  <input id={`field-options-${i}`} aria-label={`Options ${i}`} className="border px-2 py-1 w-full"
+                    value={(f.type === 'select' || f.type === 'radio') ? f.options.join(',') : ''}
+                    onChange={(e) => {
+                      const opts = e.target.value.split(',').map((s) => s.trim()).filter(Boolean)
+                      if (f.type === 'select' || f.type === 'radio') {
+                        store.getState().updateField(i, { options: opts } as Partial<FormField>)
+                      }
+                    }} />
+                </label>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <button type="button" aria-label={`Down ${i}`} onClick={() => onDown(i)} className="px-2 py-1 border rounded">Down {i}</button>
+              <button type="button" aria-label={`Remove ${i}`} onClick={() => onRemove(i)} className="px-2 py-1 border rounded text-red-600">Remove {i}</button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

components/I18nProvider.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { NextIntlClientProvider } from 'next-intl'
+import React from 'react'
+
+export default function I18nProvider({
+  locale,
+  messages,
+  children,
+}: {
+  locale: string
+  messages: Record<string, string>
+  children: React.ReactNode
+}) {
+  return (
+    // next-intl: Provide a default timeZone to avoid ENVIRONMENT_FALLBACK mismatches
+    <NextIntlClientProvider locale={locale} messages={messages} timeZone="Asia/Seoul">
+      {children}
+    </NextIntlClientProvider>
+  )
+}

components/InspectorA11y.sections.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import I18nProvider from '@/components/I18nProvider'
+import en from '@/messages/en.json'
+import { assertDescribedBy } from '@/components/testUtils/inspectorA11y'
+
+describe('Inspector a11y sections template - Hero/CTA/FAQ describedby wiring', () => {
+  it('Hero, CTA, FAQ inspector inputs are wired to helptexts', () => {
+    render(
+      <I18nProvider locale="en" messages={en as unknown as Record<string, string>}>
+        <BuilderClientPage />
+      </I18nProvider>
+    )
+
+    // Add hero to enable inspector
+    const addHero = screen.getByRole('button', { name: 'Add Hero' })
+    fireEvent.click(addHero)
+
+    // Select first section (Hero)
+    const selectButtons = screen.getAllByRole('button', { name: /Select \d+/ })
+    fireEvent.click(selectButtons[0])
+
+    const heroHeading = screen.getByLabelText('Hero Heading')
+    assertDescribedBy(heroHeading, 'ins-hero-heading-help')
+
+    // Replace with CTA and test describedby
+    const addCta = screen.getByRole('button', { name: 'Add CTA' })
+    fireEvent.click(addCta)
+    const selectSecond = screen.getAllByRole('button', { name: /Select \d+/ })[1]
+    fireEvent.click(selectSecond)
+
+    const ctaText = screen.getByLabelText('CTA Text')
+    assertDescribedBy(ctaText, 'ins-cta-text-help')
+    const ctaHref = screen.getByLabelText('CTA Href')
+    assertDescribedBy(ctaHref, 'ins-cta-href-help')
+
+    // Add FAQ and test using shared help id
+    const addFaq = screen.getByRole('button', { name: 'Add FAQ' })
+    fireEvent.click(addFaq)
+    const selectThird = screen.getAllByRole('button', { name: /Select \d+/ })[2]
+    fireEvent.click(selectThird)
+    // Add one FAQ item to render inputs
+    const addFaqItem = screen.getByRole('button', { name: 'Add FAQ Item' })
+    fireEvent.click(addFaqItem)
+
+    const faqQ = screen.getByLabelText('FAQ Q 0')
+    const faqA = screen.getByLabelText('FAQ A 0')
+    assertDescribedBy(faqQ, 'ins-faq-help')
+    assertDescribedBy(faqA, 'ins-faq-help')
+  })
+})

components/InspectorA11y.template.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import I18nProvider from '@/components/I18nProvider'
+import en from '@/messages/en.json'
+import { assertDescribedBy } from '@/components/testUtils/inspectorA11y'
+
+describe('Inspector a11y template - describedby wiring', () => {
+  it('SEO/Analytics inputs are wired to their helptexts via aria-describedby', () => {
+    render(
+      <I18nProvider locale="en" messages={en as unknown as Record<string, string>}>
+        <BuilderClientPage />
+      </I18nProvider>
+    )
+
+    const seoTitle = screen.getByLabelText('SEO Title')
+    const seoDesc = screen.getByLabelText('SEO Description')
+    const ogImage = screen.getByLabelText('OG Image URL')
+    const ga4 = screen.getByLabelText('GA4 Measurement ID')
+    const meta = screen.getByLabelText('Meta Pixel ID')
+
+    assertDescribedBy(seoTitle, 'ins-seo-title-help')
+    assertDescribedBy(seoDesc, 'ins-seo-desc-help')
+    assertDescribedBy(ogImage, 'ins-og-image-help')
+    assertDescribedBy(ga4, 'ins-ga4-help')
+    assertDescribedBy(meta, 'ins-meta-pixel-help')
+  })
+})

components/SectionCanvas.a11y.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react'
+import { describe, test, expect } from 'vitest'
+import SectionCanvas from './SectionCanvas'
+import type { Section } from '@/lib/state/store'
+
+describe('SectionCanvas a11y', () => {
+  test('renders dnd-kit live region and instructions', () => {
+    const sections: Section[] = []
+    render(
+      <SectionCanvas
+        sections={sections}
+        onMove={() => {}}
+        onRemove={() => {}}
+        onSelect={() => {}}
+      />
+    )
+
+    // dnd-kit screen reader instructions should be present in the DOM
+    expect(screen.getByText(/To pick up a draggable item/i)).toBeInTheDocument()
+
+    // Live region for announcements should exist
+    const liveRegion = screen.getByRole('status')
+    expect(liveRegion).toHaveAttribute('aria-live', 'assertive')
+  })
+})

components/SectionCanvas.ariaLabels.test.tsx

@@ -0,0 +1,77 @@
+import { describe, expect, test } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import React, { useState } from 'react'
+import SectionCanvas from './SectionCanvas'
+import type { Section } from '@/lib/state/store'
+
+function Wrapper({ withSelect = true }: { withSelect?: boolean }) {
+  const [sections, setSections] = useState<Section[]>([
+    { type: 'hero', props: { heading: 'H', subheading: '' } },
+    { type: 'faq', props: { items: [] } },
+    { type: 'cta', props: { text: 'Go', href: '#' } },
+  ])
+  const onMove = (from: number, to: number) => {
+    setSections((prev) => {
+      const next = prev.slice()
+      const [sp] = next.splice(from, 1)
+      next.splice(to, 0, sp)
+      return next
+    })
+  }
+  const onRemove = () => {}
+  const onSelect = withSelect ? () => {} : undefined
+  return <SectionCanvas sections={sections} onMove={onMove} onRemove={onRemove} onSelect={onSelect} />
+}
+
+describe('SectionCanvas aria-labels on control buttons', () => {
+  test('Select/Up/Down/Remove buttons expose index-based aria-labels', () => {
+    render(<Wrapper />)
+
+    const list = screen.getByTestId('section-canvas')
+    const items = within(list).getAllByTestId(/sec-item-/)
+
+    // check first item labels (index 0)
+    const first = items[0]
+    const sel0 = within(first).getByLabelText('Select 0') as HTMLButtonElement
+    const up0 = within(first).getByLabelText('Up 0') as HTMLButtonElement
+    const down0 = within(first).getByLabelText('Down 0') as HTMLButtonElement
+    const rm0 = within(first).getByLabelText('Remove 0') as HTMLButtonElement
+    expect(sel0).toBeInTheDocument()
+    expect(up0).toBeInTheDocument()
+    expect(down0).toBeInTheDocument()
+    expect(rm0).toBeInTheDocument()
+    expect(sel0.title).toBe(sel0.getAttribute('aria-label'))
+    expect(up0.title).toBe(up0.getAttribute('aria-label'))
+    expect(down0.title).toBe(down0.getAttribute('aria-label'))
+    expect(rm0.title).toBe(rm0.getAttribute('aria-label'))
+
+    // check last item labels (index 2)
+    const last = items[2]
+    const sel2 = within(last).getByLabelText('Select 2') as HTMLButtonElement
+    const up2 = within(last).getByLabelText('Up 2') as HTMLButtonElement
+    const down2 = within(last).getByLabelText('Down 2') as HTMLButtonElement
+    const rm2 = within(last).getByLabelText('Remove 2') as HTMLButtonElement
+    expect(sel2).toBeInTheDocument()
+    expect(up2).toBeInTheDocument()
+    expect(down2).toBeInTheDocument()
+    expect(rm2).toBeInTheDocument()
+    expect(sel2.title).toBe(sel2.getAttribute('aria-label'))
+    expect(up2.title).toBe(up2.getAttribute('aria-label'))
+    expect(down2.title).toBe(down2.getAttribute('aria-label'))
+    expect(rm2.title).toBe(rm2.getAttribute('aria-label'))
+  })
+
+  test('Up/Down buttons still present when onSelect not provided', () => {
+    render(<Wrapper withSelect={false} />)
+    const list = screen.getByTestId('section-canvas')
+    const items = within(list).getAllByTestId(/sec-item-/)
+
+    // when onSelect is undefined, Select button should not exist
+    expect(within(items[0]).queryByLabelText('Select 0')).toBeNull()
+
+    // Up/Down/Remove must still be present
+    expect(within(items[0]).getByLabelText('Up 0')).toBeInTheDocument()
+    expect(within(items[0]).getByLabelText('Down 0')).toBeInTheDocument()
+    expect(within(items[0]).getByLabelText('Remove 0')).toBeInTheDocument()
+  })
+})

components/SectionCanvas.dnd.test.tsx

@@ -0,0 +1,77 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React, { useState } from 'react'
+import SectionCanvas from '@/components/SectionCanvas'
+import type { Section } from '@/lib/state/store'
+
+type DragEvt = { active: { id: string }; over: { id: string } }
+
+vi.mock('@dnd-kit/core', async () => {
+  const actual = await vi.importActual<typeof import('@dnd-kit/core')>('@dnd-kit/core')
+  return {
+    ...actual,
+    DndContext: ({ onDragEnd, children }: { onDragEnd?: (e: DragEvt) => void; children: React.ReactNode }) => (
+      <div data-testid="mock-dnd" onClick={() => onDragEnd?.({ active: { id: 'sec-0' }, over: { id: 'sec-2' } })}>
+        {children}
+      </div>
+    ),
+    closestCenter: vi.fn(),
+    PointerSensor: function () {},
+    useSensor: vi.fn(() => ({})),
+    useSensors: vi.fn(() => []),
+  }
+})
+
+vi.mock('@dnd-kit/sortable', async () => {
+  const actual = await vi.importActual<typeof import('@dnd-kit/sortable')>('@dnd-kit/sortable')
+  return {
+    ...actual,
+    SortableContext: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    useSortable: () => ({
+      attributes: {} as Record<string, unknown>,
+      listeners: {} as Record<string, unknown>,
+      setNodeRef: () => {},
+      transform: null as unknown,
+      transition: null as unknown,
+    }),
+    verticalListSortingStrategy: vi.fn(),
+  }
+})
+
+function Wrapper() {
+  const [sections, setSections] = useState<Section[]>([
+    { type: 'hero', props: { heading: 'Welcome', subheading: '' } },
+    { type: 'faq', props: { items: [] } },
+    { type: 'cta', props: { text: 'Go', href: '#' } },
+  ])
+  return (
+    <SectionCanvas
+      sections={sections}
+      onMove={(from, to) => {
+        const next = sections.slice()
+        const [sp] = next.splice(from, 1)
+        next.splice(to, 0, sp)
+        setSections(next)
+      }}
+      onRemove={(i) => setSections((prev) => prev.filter((_, idx) => idx !== i))}
+    />
+  )
+}
+
+describe('SectionCanvas - dnd', () => {
+  it('드래그 종료 이벤트로 섹션 순서를 변경한다', () => {
+    render(<Wrapper />)
+    const list = screen.getByTestId('section-canvas')
+    let items = list.querySelectorAll('li')
+    expect(items[0].textContent).toMatch(/hero/)
+    expect(items[1].textContent).toMatch(/faq/)
+    expect(items[2].textContent).toMatch(/cta/)
+
+    fireEvent.click(screen.getByTestId('mock-dnd'))
+
+    items = list.querySelectorAll('li')
+    expect(items[0].textContent).toMatch(/faq/)
+    expect(items[1].textContent).toMatch(/cta/)
+    expect(items[2].textContent).toMatch(/hero/)
+  })
+})

components/SectionCanvas.keyboard.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, test } from 'vitest'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import React, { useState } from 'react'
+import SectionCanvas from './SectionCanvas'
+import type { Section } from '@/lib/state/store'
+
+function Wrapper() {
+  const [sections, setSections] = useState<Section[]>([
+    { type: 'hero', props: { heading: 'H', subheading: '' } },
+    { type: 'faq', props: { items: [] } },
+    { type: 'cta', props: { text: 'Go', href: '#' } },
+  ])
+
+  const onMove = (from: number, to: number) => {
+    setSections((prev) => {
+      const next = prev.slice()
+      const [sp] = next.splice(from, 1)
+      next.splice(to, 0, sp)
+      return next
+    })
+  }
+
+  return (
+    <SectionCanvas
+      sections={sections}
+      onMove={onMove}
+      onRemove={() => {}}
+      onSelect={() => {}}
+    />
+  )
+}
+
+describe('SectionCanvas keyboard/fallback reorder', () => {
+  test('clicking Down and Up buttons reorders items', () => {
+    render(<Wrapper />)
+
+    // initial order: hero, faq, cta
+    const list = screen.getByTestId('section-canvas')
+    let items = within(list).getAllByTestId(/sec-item-/)
+    expect(items[0]).toHaveTextContent('hero')
+    expect(items[1]).toHaveTextContent('faq')
+    expect(items[2]).toHaveTextContent('cta')
+
+    // move first item (index 0) down
+    fireEvent.click(within(items[0]).getByLabelText('Down 0'))
+
+    items = within(list).getAllByTestId(/sec-item-/)
+    expect(items[0]).toHaveTextContent('faq')
+    expect(items[1]).toHaveTextContent('hero')
+    expect(items[2]).toHaveTextContent('cta')
+
+    // move last item up
+    fireEvent.click(within(items[2]).getByLabelText('Up 2'))
+
+    items = within(list).getAllByTestId(/sec-item-/)
+    expect(items[0]).toHaveTextContent('faq')
+    expect(items[1]).toHaveTextContent('cta')
+    expect(items[2]).toHaveTextContent('hero')
+  })
+})

components/SectionCanvas.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import React, { useMemo } from 'react'
+import type { Section } from '@/lib/state/store'
+import { DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
+function SortableItem({ id, children, testId }: { id: string; children: React.ReactNode; testId?: string }) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id })
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+  return (
+    <li ref={setNodeRef} style={style} {...attributes} {...listeners} data-testid={testId} className="flex items-center justify-between border rounded px-3 py-2">
+      {children}
+    </li>
+  )
+}
+
+export default function SectionCanvas({
+  sections,
+  onMove,
+  onRemove,
+  onSelect,
+}: {
+  sections: Section[]
+  onMove: (from: number, to: number) => void
+  onRemove: (index: number) => void
+  onSelect?: (index: number) => void
+}) {
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }))
+  const ids = useMemo(() => sections.map((_, i) => `sec-${i}`), [sections])
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    if (!over) return
+    if (active.id === over.id) return
+    const from = ids.indexOf(String(active.id))
+    const to = ids.indexOf(String(over.id))
+    if (from !== -1 && to !== -1) onMove(from, to)
+  }
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+        <ul className="space-y-1" data-testid="section-canvas">
+          {sections.map((s, i) => (
+            <SortableItem id={`sec-${i}`} key={`sec-${i}`} testId={`sec-item-${i}`}>
+              <span className="text-sm">{s.type}</span>
+              <div className="flex items-center gap-2">
+                {onSelect && (
+                  <button aria-label={`Select ${i}`} title={`Select ${i}`} className="text-sm border rounded px-2 py-1" onClick={() => onSelect(i)}>
+                    Select
+                  </button>
+                )}
+                <button aria-label={`Up ${i}`} title={`Up ${i}`} className="text-sm border rounded px-2 py-1" onClick={() => i > 0 && onMove(i, i - 1)}>
+                  Up
+                </button>
+                <button aria-label={`Down ${i}`} title={`Down ${i}`} className="text-sm border rounded px-2 py-1" onClick={() => i < sections.length - 1 && onMove(i, i + 1)}>
+                  Down
+                </button>
+                <button aria-label={`Remove ${i}`} title={`Remove ${i}`} className="text-sm text-red-600 border rounded px-2 py-1" onClick={() => onRemove(i)}>
+                  Remove
+                </button>
+              </div>
+            </SortableItem>
+          ))}
+        </ul>
+      </SortableContext>
+    </DndContext>
+  )
+}

components/SidebarComponents.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import React from 'react'
+
+export default function SidebarComponents({
+  onAddHero,
+  onAddFAQ,
+  onAddCTA,
+  onAddFeatures,
+  onAddTestimonials,
+}: {
+  onAddHero: () => void
+  onAddFAQ: () => void
+  onAddCTA: () => void
+  onAddFeatures: () => void
+  onAddTestimonials: () => void
+}) {
+  return (
+    <div className="space-y-2" data-testid="sidebar-components">
+      <h2 className="text-sm font-semibold">Components</h2>
+      <div className="grid grid-cols-1 gap-2">
+        <button data-testid="card-hero" className="border rounded p-2 text-left" onClick={onAddHero}>
+          <div className="text-sm font-medium">Hero</div>
+          <div className="text-xs text-gray-500">Large heading + image</div>
+        </button>
+        <button data-testid="card-faq" className="border rounded p-2 text-left" onClick={onAddFAQ}>
+          <div className="text-sm font-medium">FAQ</div>
+          <div className="text-xs text-gray-500">Questions & answers</div>
+        </button>
+        <button data-testid="card-cta" className="border rounded p-2 text-left" onClick={onAddCTA}>
+          <div className="text-sm font-medium">CTA</div>
+          <div className="text-xs text-gray-500">Action button</div>
+        </button>
+        <button data-testid="card-features" className="border rounded p-2 text-left" onClick={onAddFeatures}>
+          <div className="text-sm font-medium">Features</div>
+          <div className="text-xs text-gray-500">List of product features</div>
+        </button>
+        <button data-testid="card-testimonials" className="border rounded p-2 text-left" onClick={onAddTestimonials}>
+          <div className="text-sm font-medium">Testimonials</div>
+          <div className="text-xs text-gray-500">Customer quotes</div>
+        </button>
+      </div>
+    </div>
+  )
+}

components/ariaTitleLabelConsistency.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('Buttons title/aria-label consistency', () => {
+  test('Inspector Remove buttons have title matching aria-label', async () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    // Add Features section and select
+    fireEvent.click(screen.getByTestId('card-features'))
+    fireEvent.click(await screen.findByLabelText('Select 0'))
+    // Ensure at least one item
+    fireEvent.click(screen.getByRole('button', { name: /Add Feature Item/i }))
+
+    // Validate Features remove buttons
+    const featureRemoveButtons = screen.getAllByRole('button', { name: /Remove Feature \d+/ })
+    for (const btn of featureRemoveButtons) {
+      const aria = btn.getAttribute('aria-label') || ''
+      const title = btn.getAttribute('title') || ''
+      expect(title).toBe(aria)
+    }
+
+    // Add Testimonials section and select
+    fireEvent.click(screen.getByTestId('card-testimonials'))
+    fireEvent.click(await screen.findByLabelText('Select 1'))
+    // Ensure at least one item to expose remove button
+    fireEvent.click(screen.getByRole('button', { name: /Add Testimonial/i }))
+
+    // Validate Testimonials remove buttons
+    const testimonialRemoveButtons = screen.getAllByRole('button', { name: /Remove Testimonial \d+/ })
+    for (const btn of testimonialRemoveButtons) {
+      const aria = btn.getAttribute('aria-label') || ''
+      const title = btn.getAttribute('title') || ''
+      expect(title).toBe(aria)
+    }
+  })
+})

components/buttons.naming.smoke.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import I18nProvider from '@/components/I18nProvider'
+import en from '@/messages/en.json'
+
+describe('Buttons naming/aria-label consistency (smoke)', () => {
+  it('renders primary action buttons with stable accessible names', () => {
+    render(
+      <I18nProvider locale="en" messages={en as unknown as Record<string, string>}>
+        <BuilderClientPage />
+      </I18nProvider>
+    )
+
+    // Sidebar/toolbar actions
+    expect(screen.getByRole('button', { name: 'Add Hero' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add FAQ' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add CTA' })).toBeInTheDocument()
+
+    // Export button
+    expect(screen.getByRole('button', { name: 'Export ZIP' })).toBeInTheDocument()
+
+    // Preview viewport toggle buttons have explicit aria-labels as names
+    expect(screen.getByRole('button', { name: 'Desktop' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Mobile' })).toBeInTheDocument()
+  })
+})

components/i18n.form.actions.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import I18nProvider from '@/components/I18nProvider'
+import en from '@/messages/en.json'
+import ko from '@/messages/ko.json'
+
+describe('i18n regression - form add actions (en/ko)', () => {
+  function renderWith(locale: 'en' | 'ko') {
+    const messages = locale === 'en' ? en : ko
+    return render(
+      <I18nProvider locale={locale} messages={messages as unknown as Record<string, string>}>
+        <BuilderClientPage />
+      </I18nProvider>
+    )
+  }
+
+  it('en labels exist for form field add buttons', () => {
+    renderWith('en')
+    expect(screen.getByRole('button', { name: 'Add Text' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Email' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Tel' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Date' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Textarea' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Checkbox' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Select' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Radio' })).toBeInTheDocument()
+  })
+
+  it('ko labels exist for form field add buttons', () => {
+    renderWith('ko')
+    expect(screen.getByRole('button', { name: '텍스트 필드 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '이메일 필드 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '전화번호 필드 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '날짜 필드 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '텍스트영역 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '체크박스 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '셀렉트 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '라디오 추가' })).toBeInTheDocument()
+  })
+})

components/i18n.misc.labels.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import I18nProvider from '@/components/I18nProvider'
+import en from '@/messages/en.json'
+import ko from '@/messages/ko.json'
+
+describe('i18n regression - misc labels (title/preview/sections)', () => {
+  function renderWith(locale: 'en' | 'ko') {
+    const messages = locale === 'en' ? en : ko
+    return render(
+      <I18nProvider locale={locale} messages={messages as unknown as Record<string, string>}>
+        <BuilderClientPage />
+      </I18nProvider>
+    )
+  }
+
+  it('en: builder title, preview text, sections heading present', () => {
+    renderWith('en')
+    expect(screen.getByRole('heading', { name: 'Landing Page Builder' })).toBeInTheDocument()
+    expect(screen.getByText('Preview (static)')).toBeInTheDocument()
+    expect(screen.getByText('Sections')).toBeInTheDocument()
+  })
+
+  it('ko: builder title, preview text, sections heading present', () => {
+    renderWith('ko')
+    expect(screen.getByRole('heading', { name: '랜딩 페이지 빌더' })).toBeInTheDocument()
+    expect(screen.getByText('미리보기(정적)')).toBeInTheDocument()
+    expect(screen.getByText('섹션')).toBeInTheDocument()
+  })
+})

components/i18n.regression.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import I18nProvider from '@/components/I18nProvider'
+import en from '@/messages/en.json'
+import ko from '@/messages/ko.json'
+
+function renderWith(locale: 'en' | 'ko') {
+  const messages = locale === 'en' ? en : ko
+  return render(
+    <I18nProvider locale={locale} messages={messages as unknown as Record<string, string>}>
+      <BuilderClientPage />
+    </I18nProvider>
+  )
+}
+
+describe('i18n regression - key presence on main UI', () => {
+  it('en: shows expected labels and buttons', () => {
+    renderWith('en')
+    expect(screen.getByRole('heading', { name: 'Landing Page Builder' })).toBeInTheDocument()
+    expect(screen.getByLabelText('Title')).toBeInTheDocument()
+    expect(screen.getByLabelText('Locale')).toBeInTheDocument()
+    expect(screen.getByLabelText('Primary Color')).toBeInTheDocument()
+    expect(screen.getByLabelText('Font Family')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Export ZIP' })).toBeInTheDocument()
+    // form actions
+    expect(screen.getByRole('button', { name: 'Add Text' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Email' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Tel' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Date' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Textarea' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Checkbox' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Select' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Radio' })).toBeInTheDocument()
+    // preview
+    expect(screen.getByRole('button', { name: 'Desktop' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Mobile' })).toBeInTheDocument()
+  })
+
+  it('ko: shows expected labels and buttons', () => {
+    renderWith('ko')
+    expect(screen.getByRole('heading', { name: '랜딩 페이지 빌더' })).toBeInTheDocument()
+    expect(screen.getByLabelText('제목')).toBeInTheDocument()
+    expect(screen.getByLabelText('로케일')).toBeInTheDocument()
+    expect(screen.getByLabelText('대표 색상')).toBeInTheDocument()
+    expect(screen.getByLabelText('폰트')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'ZIP 내보내기' })).toBeInTheDocument()
+    // form actions
+    expect(screen.getByRole('button', { name: '텍스트 필드 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '이메일 필드 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '전화번호 필드 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '날짜 필드 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '텍스트영역 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '체크박스 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '셀렉트 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '라디오 추가' })).toBeInTheDocument()
+    // preview
+    expect(screen.getByRole('button', { name: 'Desktop' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Mobile' })).toBeInTheDocument()
+  })
+})

components/i18n.sidebar.actions.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import I18nProvider from '@/components/I18nProvider'
+import en from '@/messages/en.json'
+import ko from '@/messages/ko.json'
+
+describe('i18n regression - sidebar add actions (en/ko)', () => {
+  function renderWith(locale: 'en' | 'ko') {
+    const messages = locale === 'en' ? en : ko
+    return render(
+      <I18nProvider locale={locale} messages={messages as unknown as Record<string, string>}>
+        <BuilderClientPage />
+      </I18nProvider>
+    )
+  }
+
+  it('en labels exist', () => {
+    renderWith('en')
+    expect(screen.getByRole('button', { name: 'Add Hero' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add FAQ' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add CTA' })).toBeInTheDocument()
+  })
+
+  it('ko labels exist', () => {
+    renderWith('ko')
+    expect(screen.getByRole('button', { name: '히어로 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'FAQ 추가' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'CTA 추가' })).toBeInTheDocument()
+  })
+})

components/previewToggle.aria.snapshot.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import BuilderClientPage from '@/components/BuilderClientPage'
+import I18nProvider from '@/components/I18nProvider'
+import en from '@/messages/en.json'
+
+describe('Preview viewport toggle ARIA regression', () => {
+  it('Desktop/Mobile buttons expose stable ARIA attributes', () => {
+    render(
+      <I18nProvider locale="en" messages={en as unknown as Record<string, string>}>
+        <BuilderClientPage />
+      </I18nProvider>
+    )
+
+    const desktop = screen.getByRole('button', { name: 'Desktop' })
+    const mobile = screen.getByRole('button', { name: 'Mobile' })
+
+    // describedby shared help
+    expect(desktop).toHaveAttribute('aria-describedby', 'preview-toggle-help')
+    expect(mobile).toHaveAttribute('aria-describedby', 'preview-toggle-help')
+
+    // controls preview container
+    expect(desktop).toHaveAttribute('aria-controls', 'preview-container')
+    expect(mobile).toHaveAttribute('aria-controls', 'preview-container')
+
+    // default pressed state: Desktop true, Mobile false
+    expect(desktop).toHaveAttribute('aria-pressed', 'true')
+    expect(mobile).toHaveAttribute('aria-pressed', 'false')
+  })
+})

components/testUtils/inspectorA11y.ts

@@ -0,0 +1,8 @@
+// Inspector a11y helper: verify input ↔ helptext wiring via aria-describedby
+import { expect } from 'vitest'
+
+export function assertDescribedBy(input: HTMLElement, helpId: string) {
+  expect(input).toHaveAttribute('aria-describedby', helpId)
+  const help = (input.ownerDocument || document).getElementById(helpId)
+  expect(help).not.toBeNull()
+}

lib/assets/assetManager.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import { AssetManager } from '@/lib/assets/assetManager'
+
+function buf(bytes: number[]): Uint8Array {
+  return new Uint8Array(bytes)
+}
+
+describe('AssetManager', () => {
+  it('업로드 이미지를 해시하여 assets/<hash>.<ext>로 관리하고 중복을 제거한다', async () => {
+    const am = new AssetManager({
+      maxBytes: 10 * 1024 * 1024,
+      allowedExts: ['png', 'jpg', 'jpeg', 'webp', 'svg'],
+    })
+
+    const a1 = await am.add({ name: 'hero.png', type: 'image/png', bytes: buf([1,2,3,4]) })
+    const a2 = await am.add({ name: 'another.png', type: 'image/png', bytes: buf([1,2,3,4]) })
+    const a3 = await am.add({ name: 'logo.svg', type: 'image/svg+xml', bytes: buf([60,115,118,103,62]) })
+
+    expect(a1.path).toMatch(/^assets\/[a-f0-9]{8}\.png$/)
+    expect(a2.path).toBe(a1.path) // 동일 바이트 -> 동일 해시 -> 중복 제거
+    expect(a3.path).toMatch(/^assets\/[a-f0-9]{8}\.svg$/)
+
+    const list = am.list()
+    expect(list.length).toBe(2)
+
+    const zipStruct = am.toZipStructure()
+    const keys = Object.keys(zipStruct)
+    expect(keys).toContain(a1.path)
+    expect(keys).toContain(a3.path)
+    expect(zipStruct[a1.path]).toBeInstanceOf(Uint8Array)
+  })
+
+  it('허용되지 않은 확장자/크기는 거절한다', async () => {
+    const am = new AssetManager({ maxBytes: 5, allowedExts: ['png'] })
+    await expect(
+      am.add({ name: 'bad.gif', type: 'image/gif', bytes: buf([1]) })
+    ).rejects.toThrow(/extension/i)
+
+    await expect(
+      am.add({ name: 'big.png', type: 'image/png', bytes: buf([1,2,3,4,5,6]) })
+    ).rejects.toThrow(/size/i)
+  })
+
+  it('rewriteUrl: http/https는 그대로, local:<name>은 assets 경로로 치환한다', async () => {
+    const am = new AssetManager({ maxBytes: 1024, allowedExts: ['png'] })
+    const external = am.rewriteUrl('https://cdn.example.com/x.png')
+    expect(external).toBe('https://cdn.example.com/x.png')
+
+    const ref = await am.add({ name: 'pic.png', type: 'image/png', bytes: buf([9,9,9]) })
+    const rewritten = am.rewriteUrl(`local:${ref.originalName}`)
+    expect(rewritten).toBe(ref.path)
+  })
+})

lib/assets/assetManager.ts

@@ -0,0 +1,98 @@
+export type AssetInput = {
+  name: string
+  type: string
+  bytes: Uint8Array
+}
+
+export type AssetRef = {
+  originalName: string
+  mimeType: string
+  bytes: Uint8Array
+  hash8: string
+  ext: string
+  path: string // assets/<hash8>.<ext>
+}
+
+export type AssetManagerOptions = {
+  maxBytes: number
+  allowedExts: string[] // e.g., ['png','jpg','jpeg','webp','svg']
+}
+
+function extOf(name: string): string {
+  const i = name.lastIndexOf('.')
+  return i >= 0 ? name.slice(i + 1).toLowerCase() : ''
+}
+
+// Simple FNV-1a 32-bit hash -> 8-hex chars
+function hash8(bytes: Uint8Array): string {
+  let h = 0x811c9dc5 >>> 0
+  for (let i = 0; i < bytes.length; i++) {
+    h ^= bytes[i]
+    h = Math.imul(h, 0x01000193) >>> 0
+  }
+  return ('00000000' + h.toString(16)).slice(-8)
+}
+
+export class AssetManager {
+  private readonly maxBytes: number
+  private readonly allowed: Set<string>
+  private byHash = new Map<string, AssetRef>()
+  private byOriginal = new Map<string, string>() // originalName -> path
+
+  constructor(opts: AssetManagerOptions) {
+    this.maxBytes = opts.maxBytes
+    this.allowed = new Set(opts.allowedExts.map((e) => e.toLowerCase()))
+  }
+
+  async add(file: AssetInput): Promise<AssetRef> {
+    const ext = extOf(file.name)
+    if (!this.allowed.has(ext)) {
+      throw new Error('Invalid extension')
+    }
+    if (file.bytes.length > this.maxBytes) {
+      throw new Error('File size exceeded')
+    }
+    const h = hash8(file.bytes)
+    const existing = this.byHash.get(h)
+    if (existing) {
+      // map original name for rewrite convenience
+      if (!this.byOriginal.has(file.name)) this.byOriginal.set(file.name, existing.path)
+      return existing
+    }
+
+    const path = `assets/${h}.${ext}`
+    const ref: AssetRef = {
+      originalName: file.name,
+      mimeType: file.type,
+      bytes: file.bytes,
+      hash8: h,
+      ext,
+      path,
+    }
+    this.byHash.set(h, ref)
+    if (!this.byOriginal.has(file.name)) this.byOriginal.set(file.name, path)
+    return ref
+  }
+
+  list(): AssetRef[] {
+    return Array.from(this.byHash.values())
+  }
+
+  toZipStructure(): Record<string, Uint8Array> {
+    const out: Record<string, Uint8Array> = {}
+    for (const ref of this.byHash.values()) {
+      out[ref.path] = ref.bytes
+    }
+    return out
+  }
+
+  rewriteUrl(urlOrLocalRef: string): string {
+    if (/^https?:\/\//i.test(urlOrLocalRef)) return urlOrLocalRef
+    if (urlOrLocalRef.startsWith('local:')) {
+      const key = urlOrLocalRef.slice('local:'.length)
+      const p = this.byOriginal.get(key)
+      return p ?? urlOrLocalRef
+    }
+    return urlOrLocalRef
+  }
+}

lib/exporter/a11yMainContain.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'T',
+    locale: 'en',
+    theme: { primaryColor: '#000000', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: '', imageUrl: 'https://example.com/hero.png' } },
+      { type: 'faq', props: { items: [{ q: 'Q1', a: 'A1' }] } },
+      { type: 'cta', props: { text: 'Go', href: '#' } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter a11y/structure - main contains sections and form', () => {
+  test('main landmark wraps sections and form markup', () => {
+    const out = exportPage(makePage())
+    expect(out.html).toContain('<main id="main" role="main">')
+    // sections inside main
+    expect(out.html).toMatch(/<main[\s\S]*<section class="hero"[\s\S]*<section class="faq"[\s\S]*<section class="cta"[\s\S]*<\/main>/)
+    // form inside main
+    expect(out.html).toMatch(/<main[\s\S]*<form method="post"[\s\S]*<\/main>/)
+  })
+})

lib/exporter/a11yResponsive.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(overrides: Partial<Page> = {}): Page {
+  const base: Page = {
+    title: 'T',
+    locale: 'en',
+    theme: { primaryColor: '#000000', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: 'Sub', imageUrl: 'https://example.com/img.png' } },
+      { type: 'faq', props: { items: [{ q: 'Q1', a: 'A1' }] } },
+      { type: 'features', props: { items: ['One', 'Two'] } },
+      { type: 'testimonials', props: { items: [{ author: 'Jane', quote: 'Great' }] } },
+      { type: 'cta', props: { text: 'Go', href: '#' } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 'SEO', description: 'Desc' },
+  }
+  return pageSchema.parse({ ...base, ...overrides })
+}
+
+describe('Exporter a11y/responsive enhancements', () => {
+  test('includes skip link and main landmark', () => {
+    const out = exportPage(makePage())
+    expect(out.html).toContain('<a href="#main" class="skip-link">')
+    expect(out.html).toContain('<main id="main" role="main">')
+  })
+
+  test('sections use aria-labelledby with h2 ids', () => {
+    const out = exportPage(makePage())
+    expect(out.html).toContain('<section class="faq" aria-labelledby="faq-heading">')
+    expect(out.html).toContain('<h2 id="faq-heading">FAQ</h2>')
+    expect(out.html).toContain('<section class="features" aria-labelledby="features-heading">')
+    expect(out.html).toContain('<h2 id="features-heading">Features</h2>')
+    expect(out.html).toContain('<section class="testimonials" aria-labelledby="testimonials-heading">')
+    expect(out.html).toContain('<h2 id="testimonials-heading">Testimonials</h2>')
+  })
+
+  test('hero image alt derives from heading', () => {
+    const out = exportPage(makePage())
+    expect(out.html).toContain('<h1 id="hero-heading">Welcome</h1>')
+    expect(out.html).toMatch(/<img[^>]*src="https:\/\/example\.com\/img\.png"[^>]*alt="Welcome"[^>]*\/>/)
+  })
+
+  test('responsive and a11y CSS tokens exist', () => {
+    const out = exportPage(makePage())
+    expect(out.css).toMatch(/@media \(max-width: 640px\)/)
+    expect(out.css).toMatch(/@media \(prefers-reduced-motion: reduce\)/)
+    expect(out.css).toMatch(/a\.skip-link:focus/)
+    expect(out.css).toMatch(/outline: 3px solid/)
+  })
+})

lib/exporter/analytics.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+describe('Analytics snippet injection', () => {
+  const base = {
+    title: 'Analytics Test',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'Analytics Test', description: 'desc' },
+  }
+
+  it('GA4 measurement ID가 있으면 GA4 스니펫을 삽입한다', () => {
+    const page: Page = pageSchema.parse({
+      ...base,
+      analytics: { ga4MeasurementId: 'G-ABC123', metaPixelId: '' },
+    })
+    const out = exportPage(page)
+    expect(out.html).toContain('https://www.googletagmanager.com/gtag/js?id=G-ABC123')
+    expect(out.html).toContain("gtag('config', 'G-ABC123')")
+  })
+
+  it('Meta Pixel ID가 있으면 Pixel 스니펫을 삽입한다', () => {
+    const page: Page = pageSchema.parse({
+      ...base,
+      analytics: { ga4MeasurementId: '', metaPixelId: '1234567890' },
+    })
+    const out = exportPage(page)
+    expect(out.html).toContain('fbq(')
+    expect(out.html).toContain("fbq('init', '1234567890')")
+  })
+
+  it('customHeadHtml이 있으면 head에 그대로 삽입한다', () => {
+    const page: Page = pageSchema.parse({
+      ...base,
+      analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '<meta name="robots" content="noindex">' },
+    })
+    const out = exportPage(page)
+    expect(out.html).toContain('<meta name="robots" content="noindex">')
+  })
+})

lib/exporter/contrastFontTokens.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'T',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'T', description: 'D' },
+  })
+
+describe('Exporter CSS contrast/font tokens', () => {
+  test('contains base text color and responsive font adjustments', () => {
+    const out = exportPage(makePage())
+    // base body text color token present
+    expect(out.css).toMatch(/body\{[^}]*color:\s*#0f172a/i)
+    // focus outline thickness and offset present
+    expect(out.css).toMatch(/outline:\s*3px\s*solid/i)
+    expect(out.css).toMatch(/outline-offset:\s*2px/i)
+    // responsive font size change for h1 in mobile media query
+    expect(out.css).toMatch(/@media \(max-width: 640px\)[\s\S]*h1\{[^}]*font-size:\s*1\.5rem/i)
+  })
+})

lib/exporter/cssTokens.expand.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'CSS Tokens Expand',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter CSS tokens - expanded regression', () => {
+  it('includes root var, skip-link base/focus, focus outline, reduced-motion, body font', () => {
+    const out = exportPage(makePage())
+    const css = out.css
+
+    // :root primary color var
+    expect(css).toMatch(/:root\{\s*--primary:\s*#0ea5e9\s*;\s*\}/)
+
+    // body font family includes configured font first
+    expect(css).toMatch(/body\{[^}]*font-family:\s*Inter,\s*system-ui[\s\S]*\}/)
+
+    // skip-link base and focus tokens
+    expect(css).toMatch(/a\.skip-link\{[\s\S]*left:-9999px[\s\S]*\}/)
+    expect(css).toMatch(/a\.skip-link:focus\{[\s\S]*left:1rem[\s\S]*background:[^;]+;[\s\S]*\}/)
+
+    // focus-visible/outline tokens (any focusable)
+    expect(css).toMatch(/button:focus, a:focus, input:focus, select:focus, textarea:focus\{[\s\S]*outline:\s*3px solid\s*#2563eb[\s\S]*outline-offset:\s*2px[\s\S]*\}/)
+
+    // reduced-motion detailed rule
+    expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)\{\s*\*\{\s*transition:\s*none !important;\s*animation:\s*none !important\s*\}\s*\}/)
+  })
+})

lib/exporter/cssTokens.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'T',
+    locale: 'en',
+    theme: { primaryColor: '#000000', fontFamily: 'Inter' },
+    sections: [],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter CSS tokens', () => {
+  test('includes focus outline, skip-link, and responsive MQ tokens', () => {
+    const out = exportPage(makePage())
+    expect(out.css).toMatch(/a\.skip-link:focus/)
+    expect(out.css).toMatch(/focus-visible|outline: 3px solid|outline-offset/)
+    expect(out.css).toMatch(/@media \(max-width: 640px\)/)
+    expect(out.css).toMatch(/@media \(prefers-reduced-motion: reduce\)/)
+  })
+})

lib/exporter/cta.edge-cases.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(overrides: Partial<Page> = {}): Page {
+  const base: Page = {
+    title: 'CTA Edge',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [
+      { type: 'cta', props: { text: '   ', href: '#' } },
+      { type: 'features', props: { items: ['One'] } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 't', description: 'd' },
+  }
+  return pageSchema.parse({ ...base, ...overrides })
+}
+
+describe('Exporter - CTA edge cases', () => {
+  it('drops CTA section when text is whitespace-only', () => {
+    const out = exportPage(makePage())
+    expect(out.html).not.toContain('<section class="cta"')
+    expect(out.html).not.toContain('<a class="btn-cta"')
+  })
+
+  it('renders CTA when text is valid after trimming', () => {
+    const out = exportPage(makePage({ sections: [ { type: 'cta', props: { text: '  Buy Now  ', href: '#' } } ] as Page['sections'] }))
+    expect(out.html).toContain('<a class="btn-cta" href="#">Buy Now</a>')
+  })
+})

lib/exporter/darkContrast.hover.tokens.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'Dark Contrast Hover',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: 'Sub', imageUrl: 'https://img.example/h.png' } },
+      { type: 'cta', props: { text: 'Call', href: '#' } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 't', description: 'd' },
+  })
+}
+
+describe('Exporter - dark mode hover/cta tokens', () => {
+  it('adds link hover underline and ensures btn-cta readable in dark', () => {
+    const out = exportPage(makePage())
+    const css = out.css
+
+    // underline on hover for links in dark for clearer affordance
+    expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*a:hover\{[^}]*text-decoration:underline/i)
+
+    // btn-cta has readable foreground/background in dark
+    expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*\.btn-cta\{[^}]*background:[^;]+;[^}]*color:#fff/i)
+  })
+})

lib/exporter/darkContrast.tokens.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'Dark Contrast',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: 'Sub', imageUrl: 'https://img.example/h.png' } },
+      { type: 'faq', props: { items: [{ q: 'Q', a: 'A' }] } },
+      { type: 'cta', props: { text: 'Go', href: '#' } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 't', description: 'd' },
+  })
+}
+
+describe('Exporter - dark mode contrast tokens', () => {
+  it('includes dark mode tokens that improve contrast for links/buttons/faq text', () => {
+    const out = exportPage(makePage())
+    const css = out.css
+
+    // dark mode block exists
+    expect(css).toMatch(/@media \(prefers-color-scheme: dark\)/)
+
+    // link color token in dark
+    expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*a\{[^}]*color:#93c5fd/i)
+
+    // button keeps readable foreground/background in dark
+    expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*button\{[^}]*background:[^;]+;[^}]*color:#fff/i)
+
+    // faq answer text brighter in dark
+    expect(css).toMatch(/@media \(prefers-color-scheme: dark\)[\s\S]*\.faq-a\{[^}]*color:#cbd5e1/i)
+  })
+})

lib/exporter/featuresTestimonials.aria.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'T',
+    locale: 'en',
+    theme: { primaryColor: '#000000', fontFamily: 'Inter' },
+    sections: [
+      { type: 'features', props: { items: ['One', 'Two'] } },
+      { type: 'testimonials', props: { items: [{ author: 'Jane', quote: 'Great' }] } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter - Features/Testimonials aria-labelledby', () => {
+  test('has aria-labelledby and matching heading ids', () => {
+    const out = exportPage(makePage())
+    expect(out.html).toContain('<section class="features" aria-labelledby="features-heading">')
+    expect(out.html).toContain('<h2 id="features-heading">Features</h2>')
+    expect(out.html).toContain('<section class="testimonials" aria-labelledby="testimonials-heading">')
+    expect(out.html).toContain('<h2 id="testimonials-heading">Testimonials</h2>')
+  })
+})

lib/exporter/focusVisibleTokens.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'Focus Tokens',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+  })
+
+describe('CSS focus-visible tokens smoke', () => {
+  test('outline uses 3px solid and hex color token', () => {
+    const { css } = exportPage(makePage())
+    expect(css).toMatch(/outline:\s*3px\s*solid/i)
+    // check presence of our hex color used for outline (example: #2563eb)
+    expect(css).toMatch(/outline:\s*3px\s*solid\s*#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})/)
+    // ensure focus-visible styles exist on common interactive elements
+    expect(css).toMatch(/button:focus|:focus-visible|a:focus|input:focus|textarea:focus|select:focus/)
+  })
+})

lib/exporter/font.optimization.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'Font Opt',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [ { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'https://img/h.png' } } ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 't', description: 'd' },
+  })
+}
+
+describe('Exporter - 폰트 최적화', () => {
+  it('head에 폰트 preconnect 링크가 포함된다(googleapis/gstatic)', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    expect(html).toMatch(/<link rel="preconnect" href="https:\/\/fonts\.googleapis\.com">/)
+    expect(html).toMatch(/<link rel="preconnect" href="https:\/\/fonts\.gstatic\.com" crossorigin>/)
+  })
+
+  it('CSS에 system-ui 폴백이 포함된다', () => {
+    const out = exportPage(makePage())
+    const css = out.css
+    expect(css).toMatch(/font-family:[^;]*system-ui/i)
+  })
+})

lib/exporter/formHelptext.a11y.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'Form Help A11y',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: {
+      actionUrl: '',
+      fields: [
+        { type: 'text', name: 'name', label: 'Name', required: true, help: 'Your full name' },
+        { type: 'email', name: 'email', label: 'Email', required: true },
+        { type: 'select', name: 'plan', label: 'Plan', required: false, options: ['A','B'], help: 'Choose your plan' },
+        { type: 'radio', name: 'size', label: 'Size', required: false, options: ['S','M','L'], help: 'Pick one size' },
+        { type: 'checkbox', name: 'agree', label: 'Agree', required: true, help: 'You must agree to proceed' },
+        { type: 'textarea', name: 'msg', label: 'Message', required: false },
+      ],
+      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+    },
+    seo: { title: 'Form Help A11y', description: 'desc' },
+  })
+
+/**
+ * Requirements (a11y):
+ * - Each control has an id `field-<name>` and its label has htmlFor pointing to it.
+ * - If field.help exists:
+ *   - Render help element with id `field-<name>-help` containing help text.
+ *   - Control has `aria-describedby` referencing the help id.
+ * - For radio group, set aria-describedby on the fieldset instead of individual radios.
+ */
+
+describe('Exporter - form helptext and aria-describedby', () => {
+  it('renders id/htmlFor and help + aria-describedby wiring', () => {
+    const page = makePage()
+    const out = exportPage(page)
+    const html = out.html
+
+    // text with help
+    expect(html).toContain('id="field-name"')
+    expect(html).toContain('<label for="field-name">Name')
+    expect(html).toContain('id="field-name-help"')
+    expect(html).toContain('Your full name')
+    expect(html).toContain('aria-describedby="field-name-help"')
+
+    // email without help → no aria-describedby
+    expect(html).toContain('id="field-email"')
+    expect(html).toContain('<label for="field-email">Email')
+    expect(html).not.toContain('field-email-help')
+
+    // select with help
+    expect(html).toContain('id="field-plan"')
+    expect(html).toContain('<label for="field-plan">Plan')
+    expect(html).toContain('id="field-plan-help"')
+    expect(html).toContain('Choose your plan')
+
+    // radio group help → fieldset has aria-describedby
+    expect(html).toContain('<fieldset')
+    expect(html).toContain('aria-describedby="field-size-help"')
+    expect(html).toContain('id="field-size-help"')
+    expect(html).toContain('Pick one size')
+
+    // checkbox with help
+    expect(html).toContain('id="field-agree"')
+    expect(html).toContain('<label for="field-agree">')
+    expect(html).toContain('id="field-agree-help"')
+    expect(html).toContain('You must agree to proceed')
+
+    // textarea without help
+    expect(html).toContain('id="field-msg"')
+    expect(html).toContain('<label for="field-msg">Message')
+  })
+})

lib/exporter/formHelptext.matrix.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+function makePage(fields: Page['form']['fields']): Page {
+  return pageSchema.parse({
+    title: 'Matrix',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: {
+      actionUrl: '',
+      fields,
+      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+    },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter - form helptext matrix (required/maxLength/pattern/help)', () => {
+  it('text: required + maxLength + help → has required, maxlength, help id and aria-describedby', () => {
+    const page = makePage([
+      { type: 'text', name: 'nick', label: 'Nickname', required: true, maxLength: 10, help: 'Public name' },
+    ])
+    const html = exportPage(page).html
+    expect(html).toContain('id="field-nick"')
+    expect(html).toMatch(/name="nick"[^"]*[^>]*required/)
+    expect(html).toMatch(/name="nick"[^"]*[^>]*maxlength="10"/)
+    expect(html).toContain('id="field-nick-help"')
+    expect(html).toContain('aria-describedby="field-nick-help"')
+  })
+
+  it('tel: pattern only, no help → has pattern, no aria-describedby', () => {
+    const page = makePage([
+      { type: 'tel', name: 'phone', label: 'Phone', required: false, pattern: '^\\+?[0-9\\- ]{7,}$' },
+    ])
+    const html = exportPage(page).html
+    expect(html).toMatch(/name="phone"[^"]*[^>]*pattern="\^\\\+\?\[0-9\\\- \]\{7,\}\$"/)
+    expect(html).not.toContain('field-phone-help')
+    // ensure no false aria-describedby
+    expect(html).not.toMatch(/name="phone"[^"]*[^>]*aria-describedby=/)
+  })
+
+  it('select: help present → select has aria-describedby and help element exists', () => {
+    const page = makePage([
+      { type: 'select', name: 'plan', label: 'Plan', required: false, options: ['Free','Pro'], help: 'Choose one' },
+    ])
+    const html = exportPage(page).html
+    expect(html).toContain('id="field-plan"')
+    expect(html).toContain('aria-describedby="field-plan-help"')
+    expect(html).toContain('id="field-plan-help"')
+  })
+
+  it('radio: help present → fieldset has aria-describedby; radios do not individually', () => {
+    const page = makePage([
+      { type: 'radio', name: 'size', label: 'Size', required: false, options: ['S','M'], help: 'Pick one' },
+    ])
+    const html = exportPage(page).html
+    // fieldset wiring
+    expect(html).toContain('<fieldset')
+    expect(html).toContain('aria-describedby="field-size-help"')
+    expect(html).toContain('id="field-size-help"')
+    // radios present
+    expect(html).toContain('type="radio"')
+  })
+})

lib/exporter/formHelptext.snapshot.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'Form Help Snapshot',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: {
+      actionUrl: '',
+      fields: [
+        { type: 'text', name: 'name', label: 'Name', required: true, help: 'Your full name' },
+        { type: 'email', name: 'email', label: 'Email', required: true },
+        { type: 'radio', name: 'size', label: 'Size', options: ['S','M'], help: 'Pick one size' },
+        { type: 'select', name: 'plan', label: 'Plan', options: ['Free','Pro'], help: 'Choose plan' },
+        { type: 'checkbox', name: 'agree', label: 'Agree', required: true, help: 'Must agree' },
+      ],
+      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+    },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+
+function extractForm(html: string): string {
+  const m = html.match(/<form[\s\S]*?<\/form>/)
+  return m ? m[0]
+    // normalize whitespace for snapshot stability
+    .replace(/\s+\n/g, '\n')
+    .replace(/\n\s+/g, '\n')
+    .trim()
+    : ''
+}
+
+describe('Exporter - form helptext snapshot', () => {
+  it('contains stable wiring for ids/labels/help/aria', () => {
+    const out = exportPage(makePage())
+    const form = extractForm(out.html)
+
+    // name with help
+    expect(form).toContain('id="field-name"')
+    expect(form).toContain('<label for="field-name">Name')
+    expect(form).toContain('id="field-name-help"')
+    expect(form).toContain('aria-describedby="field-name-help"')
+
+    // email present (no help)
+    expect(form).toContain('id="field-email"')
+    expect(form).toContain('<label for="field-email">Email')
+    expect(form).not.toContain('field-email-help')
+
+    // radio group help on fieldset
+    expect(form).toContain('<fieldset')
+    expect(form).toContain('aria-describedby="field-size-help"')
+    expect(form).toContain('id="field-size-help"')
+    expect(form).toContain('type="radio"')
+
+    // select with help
+    expect(form).toContain('id="field-plan"')
+    expect(form).toContain('aria-describedby="field-plan-help"')
+    expect(form).toContain('id="field-plan-help"')
+
+    // checkbox with help
+    expect(form).toContain('id="field-agree"')
+    expect(form).toContain('aria-describedby="field-agree-help"')
+    expect(form).toContain('id="field-agree-help"')
+  })
+})

lib/exporter/formRender.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makePage = (withAction = false): Page =>
+  pageSchema.parse({
+    title: 'Form Test',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: {
+      actionUrl: withAction ? 'https://example.com/submit' : '',
+      fields: [
+        { type: 'text', name: 'name', label: 'Name', required: true },
+        { type: 'email', name: 'email', label: 'Email', required: true },
+        { type: 'select', name: 'plan', label: 'Plan', required: false, options: ['A','B'] },
+        { type: 'radio', name: 'size', label: 'Size', required: false, options: ['S','M','L'] },
+        { type: 'checkbox', name: 'agree', label: 'Agree', required: true },
+        { type: 'textarea', name: 'msg', label: 'Message', required: false },
+      ],
+      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+    },
+    seo: { title: 'Form Test', description: 'desc' },
+  })
+
+
+describe('Exporter - form rendering', () => {
+  it('필드 라벨/required/옵션 및 스팸 방지 요소를 렌더링한다 (action 미지정)', () => {
+    const page = makePage(false)
+    const out = exportPage(page)
+
+    // 필수 required
+    expect(out.html).toContain('name="name"')
+    expect(out.html).toContain('required')
+    expect(out.html).toContain('name="email"')
+
+    // select/radio 옵션 존재
+    expect(out.html).toContain('<select')
+    expect(out.html).toContain('<option value="A">A</option>')
+    // 라디오 인풋은 id 속성이 먼저 오므로 type만으로 확인
+    expect(out.html).toContain('type="radio"')
+
+    // checkbox/textarea
+    expect(out.html).toContain('type="checkbox"')
+    expect(out.html).toContain('<textarea')
+
+    // 스팸 방지: honeypot + timestamp
+    expect(out.html).toContain('type="hidden"')
+    expect(out.html).toContain('name="_hp"')
+    expect(out.html).toContain('name="_ts"')
+
+    // action 미지정 → Sheets fallback 힌트
+    expect(out.html).toContain('data-sheets-fallback="true"')
+  })
+
+  it('action URL이 있으면 form에 action 속성이 포함된다', () => {
+    const page = makePage(true)
+    const out = exportPage(page)
+    expect(out.html).toContain('action="https://example.com/submit"')
+    expect(out.html).not.toContain('data-sheets-fallback="true"')
+  })
+})

lib/exporter/formTokens.regression.test.ts

@@ -0,0 +1,60 @@
+import { describe, test, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'Form Tokens Regression',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: {
+      actionUrl: '',
+      fields: [
+        { type: 'text', name: 'fullName', label: 'Full Name', required: true, maxLength: 50 },
+        { type: 'email', name: 'email', label: 'Email', required: true },
+        { type: 'tel', name: 'phone', label: 'Phone', pattern: '^\\+?[0-9\\- ]{7,}$' },
+        { type: 'radio', name: 'size', label: 'Size', options: ['S','M','L'] },
+        { type: 'select', name: 'plan', label: 'Plan', options: ['Free','Pro'] },
+        { type: 'checkbox', name: 'agree', label: 'Agree to terms', required: true },
+        { type: 'textarea', name: 'message', label: 'Message' },
+      ],
+      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+    },
+    seo: { title: 'SEO', description: 'Desc' },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+  })
+
+describe('Exporter - form tokens regression', () => {
+  test('renders inputs with required/pattern/maxLength and spam-protection markers', () => {
+    const { html, js } = exportPage(makePage())
+
+    // required + maxlength on text
+    expect(html).toMatch(/name="fullName"[^"]*[^>]*required/)
+    expect(html).toMatch(/name="fullName"[^"]*[^>]*maxlength="50"/)
+
+    // email required
+    expect(html).toMatch(/name="email"[^"]*[^>]*required/)
+
+    // tel pattern
+    expect(html).toMatch(/name="phone"[^"]*[^>]*pattern="\^\\\+\?\[0-9\\\- \]\{7,\}\$"/)
+
+    // radio/select options present
+  // 라디오 인풋은 id 속성이 먼저 오므로 type만으로 확인
+    expect(html).toContain('type="radio"')
+    expect(html).toContain('<select')
+    expect(html).toContain('<option value="Free">Free</option>')
+
+    // checkbox/textarea
+    expect(html).toContain('type="checkbox"')
+    expect(html).toContain('<textarea')
+
+    // spam-protection hidden inputs
+    expect(html).toContain('type="hidden"')
+    expect(html).toContain('name="_hp"')
+    expect(html).toContain('name="_ts"')
+
+    // js fills timestamp
+    expect(js).toMatch(/querySelector\('input\[name="_ts"\]'\)/)
+  })
+})

lib/exporter/formValidation.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makePage = (overrides: Partial<Page> = {}): Page =>
+  pageSchema.parse({
+    title: 'Validate',
+    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 },
+        { type: 'email', name: 'email', label: 'Email', required: true },
+        { type: 'textarea', name: 'msg', label: 'Message', required: false, maxLength: 200 },
+      ],
+      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+    },
+    seo: { title: 'Validate', description: 'desc' },
+    ...overrides,
+  })
+
+
+describe('Exporter - field validation attributes', () => {
+  it('text에 pattern/maxLength, textarea에 maxLength를 렌더링한다', () => {
+    const page = makePage()
+    const out = exportPage(page)
+
+    // text: pattern + maxlength
+    expect(out.html).toContain('name="name"')
+    expect(out.html).toContain('pattern="^[A-Za-z ]+$"')
+    expect(out.html).toContain('maxlength="30"')
+
+    // textarea: maxlength
+    expect(out.html).toContain('<textarea')
+    expect(out.html).toContain('name="msg"')
+    expect(out.html).toContain('maxlength="200"')
+  })
+})

lib/exporter/headingsLevels.all.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+const makeFullPage = (): Page =>
+  pageSchema.parse({
+    title: 'Heading Levels All',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Hero Title', subheading: 'Sub', imageUrl: 'https://example.com/hero.png' } },
+      { type: 'features', props: { items: ['Feat A', 'Feat B'] } },
+      { type: 'testimonials', props: { items: [{ author: 'Ada', quote: 'Nice' }] } },
+      { type: 'faq', props: { items: [{ q: 'Q1', a: 'A1' }, { q: 'Q2', a: 'A2' }] } },
+      { type: 'cta', props: { text: 'Try', href: '#' } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+  })
+
+describe('Exporter heading level consistency (full)', () => {
+  test('hero=h1, others=h2, faq items=h3', () => {
+    const { html } = exportPage(makeFullPage())
+
+    // hero
+    expect(html).toContain('<h1 id="hero-heading">Hero Title</h1>')
+
+    // features/testimonials/faq/cta sections labeled by h2
+    expect(html).toContain('<h2 id="features-heading">')
+    expect(html).toContain('<section class="features" aria-labelledby="features-heading">')
+
+    expect(html).toContain('<h2 id="testimonials-heading">')
+    expect(html).toContain('<section class="testimonials" aria-labelledby="testimonials-heading">')
+
+    expect(html).toContain('<h2 id="faq-heading">')
+    expect(html).toContain('<section class="faq" aria-labelledby="faq-heading">')
+
+    expect(html).toContain('<h2 id="cta-heading">')
+    expect(html).toContain('<section class="cta" aria-labelledby="cta-heading">')
+
+    // faq items use h3
+    expect(html).toMatch(/<h3[^>]*>Q1<\/h3>/)
+    expect(html).toMatch(/<h3[^>]*>Q2<\/h3>/)
+  })
+})

lib/exporter/headingsLevels.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'My Landing',
+    locale: 'en',
+    theme: { primaryColor: '#222222', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: 'Sub', imageUrl: 'https://example.com/hero.png' } },
+      { type: 'features', props: { items: ['Fast', 'Reliable'] } },
+      { type: 'testimonials', props: { items: [{ author: 'Jane', quote: 'Great' }] } },
+      { type: 'faq', props: { items: [{ q: 'Q1', a: 'A1' }] } },
+      { type: 'cta', props: { text: 'Start', href: '#' } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter heading levels', () => {
+  test('hero uses h1, sections use h2, faq questions use h3', () => {
+    const out = exportPage(makePage())
+    // hero h1
+    expect(out.html).toMatch(/<section class="hero"[\s\S]*<h1[\s\S]*>Welcome<\/h1>/)
+    // features/testimonials/faq/cta use h2 for section titles
+    expect(out.html).toContain('<h2 id="features-heading">')
+    expect(out.html).toContain('<h2 id="testimonials-heading">')
+    expect(out.html).toContain('<h2 id="faq-heading">')
+    expect(out.html).toContain('<h2 id="cta-heading">')
+    // faq item question headings h3
+    expect(out.html).toMatch(/<section class="faq"[\s\S]*<h3[\s\S]*>Q1<\/h3>/)
+  })
+})

lib/exporter/hero.edge-cases.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(overrides: Partial<Page> = {}): Page {
+  const base: Page = {
+    title: 'Hero Edge',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: '   ', imageUrl: 'https://img.example/h.png' } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 't', description: 'd' },
+  }
+  return pageSchema.parse({ ...base, ...overrides })
+}
+
+describe('Exporter - hero edge cases', () => {
+  it('omits subheading when whitespace-only', () => {
+    const out = exportPage(makePage())
+    expect(out.html).toContain('<h1 id="hero-heading">Welcome</h1>')
+    expect(out.html).not.toMatch(/<div class="text">[\s\S]*<p>\s*<\/p>/)
+  })
+
+  it('trims subheading content', () => {
+    const out = exportPage(makePage({ sections: [ { type: 'hero', props: { heading: 'Welcome', subheading: '  Hello world  ', imageUrl: 'https://img.example/h.png' } } ] as Page['sections'] }))
+    expect(out.html).toContain('<p>Hello world</p>')
+  })
+})

lib/exporter/html.ts

@@ -0,0 +1,354 @@
+import type { Page, FormField } from '@/lib/schema/page'
+import type { AssetManager } from '@/lib/assets/assetManager'
+
+export type Exported = { html: string; css: string; js: string }
+export type ExportOptions = { assetManager?: AssetManager }
+
+function renderFaq(section: { props: { items: Array<{ q: string; a: string }> } }) {
+  const itemsRaw: Array<{ q: string; a: string }> = Array.isArray(section.props.items) ? section.props.items : []
+  const isBlank = (s: string | undefined | null) => !s || s.trim().length === 0
+  const items = itemsRaw
+    .map((it) => ({ q: (it.q || '').trim(), a: (it.a || '').trim() }))
+    // drop when both question and answer are blank
+    .filter((it) => !(isBlank(it.q) && isBlank(it.a)))
+  return `
+    <section class="faq" aria-labelledby="faq-heading">
+      <div class="container">
+        <h2 id="faq-heading">FAQ</h2>
+        <ul class="faq-list">
+          ${items
+            .map(
+              (it) => `
+              <li class="faq-item">
+                <h3 class="faq-q">${escapeHtml(it.q)}</h3>
+                <p class="faq-a">${escapeHtml(it.a)}</p>
+              </li>`
+            )
+            .join('')}
+        </ul>
+      </div>
+    </section>
+  `
+}
+
+function renderFeatures(section: { props: { items: string[] } }) {
+  const items: string[] = (Array.isArray(section.props?.items) ? section.props.items : [])
+    .map((s) => String(s ?? '').trim())
+    .filter((s) => s.length > 0)
+  return `
+    <section class="features" aria-labelledby="features-heading">
+      <div class="container">
+        <h2 id="features-heading">Features</h2>
+        <ul class="features-list">
+          ${items.map((it) => `<li class="feature-item">${escapeHtml(String(it))}</li>`).join('')}
+        </ul>
+      </div>
+    </section>
+  `
+}
+
+function renderBenefits(section: { props: { items: string[] } }) {
+  const items: string[] = (Array.isArray(section.props?.items) ? section.props.items : [])
+    .map((s) => String(s ?? '').trim())
+    .filter((s) => s.length > 0)
+  return `
+    <section class="benefits" aria-labelledby="benefits-heading">
+      <div class="container">
+        <h2 id="benefits-heading">Benefits</h2>
+        <ul class="benefits-list">
+          ${items.map((it) => `<li class="benefit-item">${escapeHtml(String(it))}</li>`).join('')}
+        </ul>
+      </div>
+    </section>
+  `
+}
+
+function renderTestimonials(section: { props: { items: Array<{ author: string; quote: string }> } }) {
+  const items: Array<{ author: string; quote: string }> = (Array.isArray(section.props?.items)
+    ? section.props.items
+    : [])
+    .map((it) => ({ author: (it.author || '').trim(), quote: (it.quote || '').trim() }))
+    // drop when both are blank
+    .filter((it) => !(it.author.length === 0 && it.quote.length === 0))
+  return `
+    <section class="testimonials" aria-labelledby="testimonials-heading">
+      <div class="container">
+        <h2 id="testimonials-heading">Testimonials</h2>
+        ${items
+          .map(
+            (it) => `
+          <figure class="testimonial">
+            <blockquote>“${escapeHtml(it.quote)}”</blockquote>
+            ${it.author.length > 0 ? `<figcaption>— ${escapeHtml(it.author)}</figcaption>` : ''}
+          </figure>`
+          )
+          .join('')}
+      </div>
+    </section>
+  `
+}
+
+function renderCta(section: { props: { text: string; href?: string } }) {
+  const href = section.props.href
+  const text = (section.props.text || '').trim()
+  if (text.length === 0) return ''
+  return `
+    <section class="cta" aria-labelledby="cta-heading">
+      <div class="container">
+        <h2 id="cta-heading">CTA</h2>
+        <a class="btn-cta" href="${escapeHtml(href || '#')}">${escapeHtml(text)}</a>
+      </div>
+    </section>
+  `
+}
+
+const escapeHtml = (s: string) =>
+  s
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+
+function renderHero(section: { props: { heading: string; subheading?: string; imageUrl: string } }, opts?: ExportOptions) {
+  const { heading } = section.props
+  const subheadingRaw = section.props.subheading
+  const subheading = subheadingRaw ? subheadingRaw.trim() : ''
+  const am = opts?.assetManager
+  const imageUrlRaw: string = section.props.imageUrl
+  const imageUrl = am ? am.rewriteUrl(imageUrlRaw) : imageUrlRaw
+  return `
+    <section class="hero" aria-labelledby="hero-heading">
+      <div class="container">
+        <div class="text">
+          <h1 id="hero-heading">${escapeHtml(heading)}</h1>
+          ${subheading.length > 0 ? `<p>${escapeHtml(subheading)}</p>` : ''}
+        </div>
+        <div class="media">
+          <img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(heading)}" loading="lazy" decoding="async" />
+        </div>
+      </div>
+    </section>
+  `
+}
+
+function renderField(field: FormField) {
+  const id = `field-${escapeHtml(field.name)}`
+  const helpId = `field-${escapeHtml(field.name)}-help`
+  const hasHelp = !!field.help
+  const helpHtml = hasHelp ? `<div id="${helpId}" class="form-help">${escapeHtml(field.help!)}</div>` : ''
+
+  const pat = 'pattern' in field && field.pattern ? ` pattern="${escapeHtml(field.pattern)}"` : ''
+  const max = 'maxLength' in field && field.maxLength ? ` maxlength="${field.maxLength}"` : ''
+  const describedBy = hasHelp ? ` aria-describedby="${helpId}"` : ''
+  const common = `id="${id}" name="${escapeHtml(field.name)}" aria-label="${escapeHtml(field.label)}" ${field.required ? 'required' : ''}${pat}${max}${describedBy}`
+
+  switch (field.type) {
+    case 'text':
+    case 'email':
+    case 'tel':
+    case 'date':
+      return `
+        <div class="form-control">
+          <label for="${id}">${escapeHtml(field.label)}</label>
+          <input type="${field.type}" ${common} />
+          ${helpHtml}
+        </div>
+      `
+    case 'textarea':
+      return `
+        <div class="form-control">
+          <label for="${id}">${escapeHtml(field.label)}</label>
+          <textarea ${common}></textarea>
+          ${helpHtml}
+        </div>
+      `
+    case 'checkbox':
+      return `
+        <div class="form-control">
+          <label for="${id}">${escapeHtml(field.label)}</label>
+          <input type="checkbox" ${common} />
+          ${helpHtml}
+        </div>
+      `
+    case 'radio': {
+      const { options } = field as Extract<FormField, { type: 'radio' }>
+      const fsDescribed = hasHelp ? ` aria-describedby="${helpId}"` : ''
+      return `
+        <fieldset${fsDescribed}>
+          <legend>${escapeHtml(field.label)}</legend>
+          ${options
+            .map(
+              (opt: string, i: number) => {
+                const optId = `${id}-opt-${i}`
+                return `<div><input id="${optId}" type="radio" name="${escapeHtml(field.name)}" aria-label="${escapeHtml(field.label)}" value="${escapeHtml(opt)}" ${field.required ? 'required' : ''}${pat}${max} /><label for="${optId}">${escapeHtml(opt)}</label></div>`
+              }
+            )
+            .join('')}
+          ${helpHtml}
+        </fieldset>
+      `
+    }
+    case 'select': {
+      const { options } = field as Extract<FormField, { type: 'select' }>
+      return `
+        <div class="form-control">
+          <label for="${id}">${escapeHtml(field.label)}</label>
+          <select ${common}>
+            ${options
+              .map((opt: string) => `<option value="${escapeHtml(opt)}">${escapeHtml(opt)}</option>`)
+              .join('')}
+          </select>
+          ${helpHtml}
+        </div>
+      `
+    }
+    default:
+      return ''
+  }
+}
+
+function renderForm(page: Page) {
+  const { form } = page
+  const hasAction = !!(form.actionUrl && form.actionUrl.trim().length > 0)
+  const hp = form.spamProtection.honeypotFieldName
+  const dataFallback = hasAction ? '' : ' data-sheets-fallback="true"'
+  return `
+    <form method="post"${hasAction ? ` action="${escapeHtml(form.actionUrl!)}"` : ''}${dataFallback}>
+      <input type="hidden" name="${escapeHtml(hp)}" />
+      <input type="hidden" name="_ts" value="" />
+      ${form.fields.map(renderField).join('\n')}
+      <button type="submit">Submit</button>
+    </form>
+  `
+}
+
+function buildHead(page: Page) {
+  const ogImage = page.seo.ogImage
+  const analyticsParts: string[] = []
+  const ga = page.analytics?.ga4MeasurementId
+  if (ga && ga.trim()) {
+    analyticsParts.push(`
+    <script async src="https://www.googletagmanager.com/gtag/js?id=${ga}"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${ga}');
+    </script>`)
+  }
+  const pixel = page.analytics?.metaPixelId
+  if (pixel && pixel.trim()) {
+    analyticsParts.push(`
+    <script>
+      !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+      n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
+      n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
+      t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script',
+      'https://connect.facebook.net/en_US/fbevents.js');
+      fbq('init', '${pixel}');
+      fbq('track', 'PageView');
+    </script>`)
+  }
+  const custom = page.analytics?.customHeadHtml || ''
+  return `
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="canonical" href="/" />
+    <title>${escapeHtml(page.seo.title)}</title>
+    <meta name="description" content="${escapeHtml(page.seo.description)}" />
+    <meta property="og:title" content="${escapeHtml(page.seo.title)}" />
+    <meta property="og:description" content="${escapeHtml(page.seo.description)}" />
+    ${ogImage ? `<meta property="og:image" content="${escapeHtml(ogImage)}" />` : ''}
+    ${analyticsParts.join('\n')}
+    ${custom}
+  `
+}
+
+function buildCss(page: Page) {
+  return `
+  :root{ --primary:${page.theme.primaryColor}; }
+  body{ font-family: ${page.theme.fontFamily}, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji"; margin:0; color:#0f172a }
+  a.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
+  a.skip-link:focus{ position:absolute; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem 1rem; background:#111827; color:#fff; border-radius:.375rem; z-index:1000 }
+  .container{ max-width: 960px; margin: 0 auto; padding: 2rem }
+  .hero .text{ margin-bottom: 1rem }
+  img{ max-width: 100%; height: auto }
+  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 }
+  .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 }
+  .faq-a{ color:#334155; overflow-wrap:anywhere }
+  .btn-cta{ background: var(--primary); color:#fff; padding:.75rem 1rem; border-radius:.5rem; display:inline-block; text-decoration:none }
+  .features{ background:#f8fafc }
+  .features-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem }
+  .feature-item{ background:#fff; border:1px solid #e2e8f0; border-radius:.5rem; padding:.75rem; overflow-wrap:anywhere }
+  .benefits-list{ list-style:none; padding:0; margin:0 }
+  .benefit-item{ overflow-wrap:anywhere }
+  .testimonials{ background:#ffffff }
+  .testimonial{ border-left:4px solid var(--primary); padding:.5rem 1rem; margin: .75rem 0; background:#fefefe }
+  .testimonial blockquote{ margin:0; font-style:italic; color:#1f2937; overflow-wrap:anywhere }
+  .testimonial figcaption{ color:#475569; margin-top:.25rem }
+  @media (max-width: 640px){ .container{ padding: 1rem } h1{ font-size: 1.5rem } }
+  @media (prefers-color-scheme: dark){ body{ color:#e5e7eb; background:#0b1020 } .feature-item{ background:#0f172a; border-color:#1f2937 } a{ color:#93c5fd } a:hover{ text-decoration:underline } button{ background: var(--primary); color:#fff } .btn-cta{ background: var(--primary); color:#fff } .faq-a{ color:#cbd5e1 } }
+  @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important } }
+  `
+}
+
+function buildJs() {
+  // timestamp 채우기(스팸 방지용 제출 지연 체크용 데이터)
+  return `
+  (function(){
+    var ts = document.querySelector('input[name="_ts"]');
+    if(ts){ ts.value = String(Date.now()); }
+    // Ensure skip-link moves focus into main for a11y
+    var skip = document.querySelector('a.skip-link');
+    var main = document.getElementById('main');
+    if (skip && main) {
+      skip.addEventListener('click', function(){
+        if (!main.hasAttribute('tabindex')) {
+          main.setAttribute('tabindex', '-1');
+        }
+        main.focus();
+      });
+    }
+  })();
+  `
+}
+
+export function exportPage(page: Page, opts?: ExportOptions): Exported {
+  const sections = page.sections
+    .map((s: Page['sections'][number]) => {
+      if (s.type === 'hero') return renderHero(s, opts)
+      if (s.type === 'faq') return renderFaq(s)
+      if (s.type === 'cta') return renderCta(s)
+      if (s.type === 'features') return renderFeatures(s)
+      if (s.type === 'benefits') return renderBenefits(s)
+      if (s.type === 'testimonials') return renderTestimonials(s)
+      return ''
+    })
+    .join('\n')
+
+  const formHtml = renderForm(page)
+
+  const html = `<!DOCTYPE html>
+<html lang="${escapeHtml(page.locale)}">
+<head>
+${buildHead(page)}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to content</a>
+  <main id="main" role="main">
+    ${sections}
+    ${formHtml}
+  </main>
+  <script>${buildJs()}</script>
+  <style>${buildCss(page)}</style>
+</body>
+</html>`
+
+  return { html, css: buildCss(page), js: buildJs() }
+}

lib/exporter/htmlExporter.assets.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+import { AssetManager } from '@/lib/assets/assetManager'
+
+const makeLocalImagePage = async () => {
+  const am = new AssetManager({ maxBytes: 1024 * 1024, allowedExts: ['png'] })
+  const hero = await am.add({ name: 'hero.png', type: 'image/png', bytes: new Uint8Array([1,2,3]) })
+  const page: Page = pageSchema.parse({
+    title: 'Local Image',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      {
+        type: 'hero',
+        props: { heading: 'Hi', subheading: '', imageUrl: `local:${hero.originalName}` },
+      },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'Local Image', description: 'd' },
+  })
+  return { am, page }
+}
+
+describe('HTML Exporter - asset rewrite', () => {
+  it('local: 프리픽스 이미지는 assets/<hash>.<ext>로 치환된다', async () => {
+    const { am, page } = await makeLocalImagePage()
+    const out = exportPage(page, { assetManager: am })
+
+    // assets 경로가 HTML 내 포함되어야 함
+    expect(out.html).toMatch(/assets\/[a-f0-9]{8}\.png/)
+  })
+})

lib/exporter/htmlExporter.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makeSamplePage = (): Page =>
+  pageSchema.parse({
+    title: 'Sample Landing',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      {
+        type: 'hero',
+        props: {
+          heading: 'Welcome',
+          subheading: 'Build fast',
+          imageUrl: 'https://cdn.example.com/hero.png',
+        },
+      },
+    ],
+    form: {
+      actionUrl: '',
+      fields: [
+        { type: 'text', name: 'name', label: 'Name', required: true },
+        { type: 'email', name: 'email', label: 'Email', required: true },
+        { type: 'checkbox', name: 'agree', label: 'Agree', required: true },
+      ],
+      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+    },
+    analytics: { ga4MeasurementId: '', metaPixelId: '' },
+    seo: { title: 'Sample Landing', description: 'desc', ogImage: 'https://cdn.example.com/og.png' },
+  })
+
+
+describe('HTML Exporter', () => {
+  it('페이지를 정적 HTML/CSS/JS로 내보낸다', () => {
+    const page = makeSamplePage()
+    const out = exportPage(page)
+
+    expect(typeof out.html).toBe('string')
+    expect(typeof out.css).toBe('string')
+    expect(typeof out.js).toBe('string')
+
+    // 기본 요소 포함
+    expect(out.html).toContain('<!DOCTYPE html>')
+    expect(out.html).toContain('<html lang="en">')
+    expect(out.html).toContain('<title>Sample Landing</title>')
+
+    // OG/SEO
+    expect(out.html).toContain('meta property="og:title"')
+    expect(out.html).toContain('meta property="og:image"')
+
+    // Hero 섹션 렌더링
+    expect(out.html).toContain('Welcome')
+    expect(out.html).toContain('Build fast')
+    expect(out.html).toContain('https://cdn.example.com/hero.png')
+
+    // Form 렌더링 및 스팸방지 요소
+    expect(out.html).toContain('name="name"')
+    expect(out.html).toContain('name="email"')
+    expect(out.html).toContain('name="agree"')
+    expect(out.html).toContain('type="hidden"') // honeypot 또는 타임스탬프
+
+    // actionUrl 미지정이면 data-hint 포함(향후 Sheets 연결 힌트)
+    expect(out.html).toContain('data-sheets-fallback="true"')
+  })
+
+  it('파일 input은 생성하지 않는다', () => {
+    const page = makeSamplePage()
+    const out = exportPage(page)
+    expect(out.html).not.toMatch(/type=\"file\"/)
+  })
+})

lib/exporter/og.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+describe('Exporter - OG image meta', () => {
+  test('includes og:image meta when seo.ogImage is provided', () => {
+    const page: Page = pageSchema.parse({
+      title: 'T',
+      locale: 'en',
+      theme: { primaryColor: '#000000', fontFamily: 'Inter' },
+      sections: [],
+      form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+      analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+      seo: { title: 'SEO', description: 'Desc', ogImage: 'https://example.com/og.png' },
+    })
+    const out = exportPage(page)
+    expect(out.html).toContain('<meta property="og:image" content="https://example.com/og.png" />')
+  })
+
+  test('omits og:image meta when seo.ogImage is empty', () => {
+    const page: Page = pageSchema.parse({
+      title: 'T',
+      locale: 'en',
+      theme: { primaryColor: '#000000', fontFamily: 'Inter' },
+      sections: [],
+      form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+      analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+      seo: { title: 'SEO', description: 'Desc' },
+    })
+    const out = exportPage(page)
+    expect(out.html).not.toContain('og:image')
+  })
+})

lib/exporter/regressionSnapshot.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'Snapshot',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: 'Sub', imageUrl: 'https://example.com/hero.png' } },
+      { type: 'features', props: { items: ['One', 'Two'] } },
+      { type: 'testimonials', props: { items: [{ author: 'Jane', quote: 'Great' }] } },
+      { type: 'faq', props: { items: [{ q: 'Q1', a: 'A1' }] } },
+      { type: 'cta', props: { text: 'Go', href: '#' } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+  })
+
+describe('Exporter regression snapshot (markers only)', () => {
+  test('combined markers for headings/aria/responsive exist', () => {
+    const out = exportPage(makePage())
+    const { html, css } = out
+    // headings/aria markers
+    expect(html).toContain('<h1 id="hero-heading">Welcome</h1>')
+    expect(html).toContain('<section class="features" aria-labelledby="features-heading">')
+    expect(html).toContain('<h2 id="features-heading">')
+    expect(html).toContain('<section class="testimonials" aria-labelledby="testimonials-heading">')
+    expect(html).toContain('<h2 id="testimonials-heading">')
+    expect(html).toContain('<section class="faq" aria-labelledby="faq-heading">')
+    expect(html).toContain('<h2 id="faq-heading">')
+    expect(html).toContain('<section class="cta" aria-labelledby="cta-heading">')
+    expect(html).toContain('<h2 id="cta-heading">')
+    // responsive/a11y CSS markers
+    expect(css).toMatch(/@media \(max-width: 640px\)/)
+    expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)/)
+    expect(css).toMatch(/a\.skip-link:focus/)
+    expect(css).toMatch(/outline:\s*3px\s*solid/)
+  })
+})

lib/exporter/sectionA11y.template.test.ts

@@ -0,0 +1,28 @@
+import { describe, it } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+import { assertSectionA11y } from '@/lib/exporter/testUtils/sectionA11y'
+
+function makeFullPage(): Page {
+  return pageSchema.parse({
+    title: 'A11y Template',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: '', imageUrl: 'https://via.placeholder.com/800x400' } },
+      { type: 'features', props: { items: ['A','B','C'] } },
+      { type: 'testimonials', props: { items: [{ author: 'Jane', quote: 'Great!' }] } },
+      { type: 'faq', props: { items: [{ q: 'Q1', a: 'A1' }] } },
+      { type: 'cta', props: { text: 'Get Started', href: '#' } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter - section a11y template', () => {
+  it('validates basic a11y landmarks, headings and tokens', () => {
+    const out = exportPage(makeFullPage())
+    assertSectionA11y(out.html)
+  })
+})

lib/exporter/sections.benefits.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'Benefits Test',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'benefits', props: { items: ['Fast setup', 'No code', 'Accessible by default'] } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+
+describe('Exporter - benefits section', () => {
+  it('renders benefits as a section with h2 and aria-labelledby + list items', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    expect(html).toContain('<section class="benefits" aria-labelledby="benefits-heading">')
+    expect(html).toContain('<h2 id="benefits-heading">Benefits</h2>')
+    expect(html).toContain('<ul class="benefits-list">')
+    expect(html).toContain('<li class="benefit-item">Fast setup</li>')
+    expect(html).toContain('<li class="benefit-item">No code</li>')
+    expect(html).toContain('<li class="benefit-item">Accessible by default</li>')
+  })
+})

lib/exporter/sections.edge-cases.test.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(overrides: Partial<Page> = {}): Page {
+  const base: Page = {
+    title: 'Edge',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [
+      { type: 'features', props: { items: ['One', '   ', '   ', 'Two'] } },
+      { type: 'benefits', props: { items: ['A', '   ', '   ', 'B'] } },
+      { type: 'faq', props: { items: [
+        { q: '  ', a: '   ' },
+        { q: 'Valid Q', a: '   ' },
+        { q: 'Another', a: 'Answer' },
+      ] } },
+      { type: 'testimonials', props: { items: [
+        { author: '  ', quote: '   ' },
+        { author: 'Jane', quote: '  Great product   ' },
+      ] } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 't', description: 'd' },
+  }
+  return pageSchema.parse({ ...base, ...overrides })
+}
+
+describe('Exporter - sections edge cases', () => {
+  it('filters out whitespace-only items and keeps valid ones', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+
+    // features: only One, Two
+    expect(html).toContain('<li class="feature-item">One</li>')
+    expect(html).toContain('<li class="feature-item">Two</li>')
+    expect(html).not.toMatch(/<li class="feature-item"><\/li>/)
+
+    // benefits: only A, B
+    expect(html).toContain('<li class="benefit-item">A</li>')
+    expect(html).toContain('<li class="benefit-item">B</li>')
+
+    // faq: drop fully empty, keep items even if answer empty when question is valid
+    expect(html).toContain('<h3 class="faq-q">Valid Q</h3>')
+    // testimonials: drop fully empty, keep trimmed quote
+    expect(html).toContain('<blockquote>“Great product”</blockquote>')
+  })
+
+  it('adds word-break tokens to avoid overflow for long words', () => {
+    const out = exportPage(makePage())
+    const css = out.css
+    expect(css).toMatch(/\.feature-item\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
+    expect(css).toMatch(/\.benefit-item\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
+    expect(css).toMatch(/\.testimonial blockquote\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
+  })
+})

lib/exporter/sections.edge-phase3.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(overrides: Partial<Page> = {}): Page {
+  const base: Page = {
+    title: 'Edge P3',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [
+      { type: 'faq', props: { items: [ { q: 'VeryVeryVeryVeryVeryLongWordWithoutSpaces', a: 'AnotherSuperLongUnbreakableWord' } ] } },
+      { type: 'testimonials', props: { items: [
+        { author: '   ', quote: 'Great!' },
+        { author: 'Alice', quote: 'Nice' },
+      ] } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 't', description: 'd' },
+  }
+  return pageSchema.parse({ ...base, ...overrides })
+}
+
+describe('Exporter - phase3 edge cases', () => {
+  it('omits testimonial author line when author is blank', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    // First item author blank -> no figcaption for that blockquote
+    expect(html).toMatch(/<blockquote>“Great!\”<\/blockquote>[\s\S]*?<\/figure>/)
+    // Ensure the next item with author renders figcaption
+    expect(html).toMatch(/<figcaption>— Alice<\/figcaption>/)
+  })
+
+  it('adds word-break/overflow-wrap for FAQ q/a to avoid overflow', () => {
+    const out = exportPage(makePage())
+    const css = out.css
+    expect(css).toMatch(/\.faq-q\{[\s\S]*(?:overflow-wrap:anywhere|word-break:break-word)/i)
+    expect(css).toMatch(/\.faq-a\{[\s\S]*(?:overflow-wrap:anywhere|word-break:break-word)/i)
+  })
+})

lib/exporter/sections.escape.regression.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'Escape Regression',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'features', props: { items: ['F<&>"', 'Safe'] } },
+      { type: 'faq', props: { items: [{ q: 'Q<&>"', a: 'A<&>"' }] } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter - HTML escape regression (Features/FAQ)', () => {
+  it('escapes HTML special characters in features items', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    // feature item should contain escaped characters &lt; &amp; &gt; &quot;
+    expect(html).toContain('<li class="feature-item">F&lt;&amp;&gt;&quot;</li>')
+  })
+
+  it('escapes HTML special characters in faq q/a', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    expect(html).toContain('<h3 class="faq-q">Q&lt;&amp;&gt;&quot;</h3>')
+    expect(html).toContain('<p class="faq-a">A&lt;&amp;&gt;&quot;</p>')
+  })
+})

lib/exporter/sections.featuresTestimonials.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makeBase(overrides: Partial<Page>): Page {
+  const base: Page = {
+    title: 'T',
+    locale: 'en',
+    theme: { primaryColor: '#000000', fontFamily: 'Inter' },
+    sections: [],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 'SEO', description: 'Desc' },
+  }
+  return pageSchema.parse({ ...base, ...overrides })
+}
+
+describe('Exporter - Features and Testimonials sections', () => {
+  test('renders features list with items and classes', () => {
+    const sections = ([
+      { type: 'features', props: { items: ['One', 'Two', 'Three'] } },
+    ] as unknown) as Page['sections']
+    const page = makeBase({ sections })
+    const out = exportPage(page)
+    expect(out.html).toContain('<section class="features" aria-labelledby="features-heading">')
+    expect(out.html).toContain('<ul class="features-list">')
+    expect(out.html).toContain('<li class="feature-item">One</li>')
+    expect(out.html).toContain('<li class="feature-item">Two</li>')
+    expect(out.html).toContain('<li class="feature-item">Three</li>')
+  })
+
+  test('renders testimonials with figure/blockquote/figcaption structure', () => {
+    const sections = ([
+      { type: 'testimonials', props: { items: [
+        { author: 'Jane', quote: 'Great!' },
+        { author: 'John', quote: 'Nice.' },
+      ] } },
+    ] as unknown) as Page['sections']
+    const page = makeBase({ sections })
+    const out = exportPage(page)
+    expect(out.html).toContain('<section class="testimonials" aria-labelledby="testimonials-heading">')
+    expect(out.html).toContain('<figure class="testimonial">')
+    expect(out.html).toContain('<blockquote>“Great!”</blockquote>')
+    expect(out.html).toContain('<figcaption>— Jane</figcaption>')
+    expect(out.html).toContain('<blockquote>“Nice.”</blockquote>')
+    expect(out.html).toContain('<figcaption>— John</figcaption>')
+  })
+})

lib/exporter/sections.regression.benefits.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'Sections Regression',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: '', imageUrl: 'https://via.placeholder.com/800x400' } },
+      { type: 'features', props: { items: ['F1','F2'] } },
+      { type: 'benefits', props: { items: ['B1','B2','B3'] } },
+      { type: 'testimonials', props: { items: [{ author: 'Ada', quote: 'Great' }] } },
+      { type: 'faq', props: { items: [{ q: 'Q1', a: 'A1' }] } },
+      { type: 'cta', props: { text: 'Start', href: '#' } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter - sections regression (includes benefits)', () => {
+  it('renders sections with correct ARIA/heading/list structures', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+
+    // hero h1
+    expect(html).toMatch(/<section class="hero" aria-labelledby="hero-heading">/)
+    expect(html).toMatch(/<h1 id="hero-heading">Welcome<\/h1>/)
+
+    // features
+    expect(html).toMatch(/<section class="features" aria-labelledby="features-heading">/)
+    expect(html).toMatch(/<h2 id="features-heading">Features<\/h2>/)
+    expect(html).toMatch(/<ul class="features-list">[\s\S]*<li class="feature-item">F1<\/li>[\s\S]*<li class="feature-item">F2<\/li>[\s\S]*<\/ul>/)
+
+    // benefits
+    expect(html).toMatch(/<section class="benefits" aria-labelledby="benefits-heading">/)
+    expect(html).toMatch(/<h2 id="benefits-heading">Benefits<\/h2>/)
+    expect(html).toMatch(/<ul class="benefits-list">[\s\S]*<li class="benefit-item">B1<\/li>[\s\S]*<li class="benefit-item">B2<\/li>[\s\S]*<li class="benefit-item">B3<\/li>[\s\S]*<\/ul>/)
+
+    // testimonials
+    expect(html).toMatch(/<section class="testimonials" aria-labelledby="testimonials-heading">/)
+    expect(html).toMatch(/<h2 id="testimonials-heading">Testimonials<\/h2>/)
+
+    // faq with h3
+    expect(html).toMatch(/<section class="faq" aria-labelledby="faq-heading">/)
+    expect(html).toMatch(/<h2 id="faq-heading">FAQ<\/h2>/)
+    expect(html).toMatch(/<h3 class="faq-q">Q1<\/h3>/)
+
+    // cta
+    expect(html).toMatch(/<section class="cta" aria-labelledby="cta-heading">/)
+    expect(html).toMatch(/<h2 id="cta-heading">CTA<\/h2>/)
+  })
+})

lib/exporter/sections.regression.cta-testimonials.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'Sections Regression CTA/Testimonials',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'testimonials', props: { items: [{ author: 'Linus', quote: 'Simple and fast' }] } },
+      { type: 'cta', props: { text: 'Get Started', href: '/start' } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter - CTA and Testimonials regression', () => {
+  it('renders testimonials figure/blockquote/figcaption structure', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    expect(html).toMatch(/<section class="testimonials" aria-labelledby="testimonials-heading">/)
+    expect(html).toMatch(/<h2 id="testimonials-heading">Testimonials<\/h2>/)
+    expect(html).toMatch(/<figure class="testimonial">[\s\S]*<blockquote>“Simple and fast”<\/blockquote>[\s\S]*<figcaption>— Linus<\/figcaption>[\s\S]*<\/figure>/)
+  })
+
+  it('renders CTA link with correct class and href', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    expect(html).toMatch(/<section class="cta" aria-labelledby="cta-heading">/)
+    expect(html).toMatch(/<h2 id="cta-heading">CTA<\/h2>/)
+    expect(html).toMatch(/<a class="btn-cta" href="\/start">Get Started<\/a>/)
+  })
+})

lib/exporter/sections.regression.features-faq.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'Sections Regression Features/FAQ',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'features', props: { items: ['F1', 'F2', 'F3'] } },
+      { type: 'faq', props: { items: [{ q: 'Q1', a: 'A1' }, { q: 'Q2', a: 'A2' }] } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter - Features/FAQ regression (structure/classes/count)', () => {
+  it('renders features with list, class names, and correct item count', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    expect(html).toMatch(/<section class="features" aria-labelledby="features-heading">/)
+    expect(html).toMatch(/<h2 id="features-heading">Features<\/h2>/)
+    expect(html).toMatch(/<ul class="features-list">/)
+    const featureItems = html.match(/<li class="feature-item">/g) || []
+    expect(featureItems.length).toBe(3)
+  })
+
+  it('renders faq with list, h3 question class, and correct item count', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    expect(html).toMatch(/<section class="faq" aria-labelledby="faq-heading">/)
+    expect(html).toMatch(/<h2 id="faq-heading">FAQ<\/h2>/)
+    expect(html).toMatch(/<ul class="faq-list">/)
+    const qCount = html.match(/<h3 class="faq-q">/g) || []
+    const aCount = html.match(/<p class="faq-a">/g) || []
+    expect(qCount.length).toBe(2)
+    expect(aCount.length).toBe(2)
+  })
+})

lib/exporter/sections.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { exportPage } from '@/lib/exporter/html'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'Sections',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'faq', props: { items: [ { q: 'Q1?', a: 'A1.' }, { q: 'Q2?', a: 'A2.' } ] } },
+      { type: 'cta', props: { text: 'Get Started', href: '#start' } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'Sections', description: 'desc' },
+  })
+
+
+describe('Exporter - FAQ/CTA sections', () => {
+  it('FAQ와 CTA 섹션을 렌더링한다', () => {
+    const page = makePage()
+    const out = exportPage(page)
+
+    // FAQ
+    expect(out.html).toContain('Q1?')
+    expect(out.html).toContain('A1.')
+    expect(out.html).toContain('Q2?')
+    expect(out.html).toContain('A2.')
+
+    // CTA
+    expect(out.html).toContain('Get Started')
+    expect(out.html).toContain('#start')
+  })
+})

lib/exporter/seoPerf.tokens.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'SEO/Perf',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Welcome', subheading: 'Sub', imageUrl: 'https://img.example/hero.png' } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+  })
+}
+
+describe('Exporter - small SEO/Perf improvements', () => {
+  it('includes canonical link and dark mode tokens; hero image lazy/async', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    const css = out.css
+
+    // canonical link present in head
+    expect(html).toMatch(/<link[^>]+rel="canonical"/)
+
+    // hero image has loading/decoding attributes
+    expect(html).toMatch(/<img[^>]*loading="lazy"/)
+    expect(html).toMatch(/<img[^>]*decoding="async"/)
+
+    // dark mode media query token exists
+    expect(css).toMatch(/@media \(prefers-color-scheme: dark\)/)
+  })
+})

lib/exporter/testUtils/sectionA11y.ts

@@ -0,0 +1,30 @@
+import { expect } from 'vitest'
+
+export function assertSectionA11y(html: string) {
+  // basic landmarks
+  expect(html).toContain('<main id="main" role="main">')
+  expect(html).toContain('class="skip-link"')
+
+  // hero h1
+  expect(html).toMatch(/<h1 id="hero-heading">[\s\S]*<\/h1>/)
+
+  // features h2 and aria-labelledby
+  expect(html).toMatch(/<h2 id="features-heading">Features<\/h2>/)
+  expect(html).toMatch(/<section class="features" aria-labelledby="features-heading">/)
+
+  // testimonials h2 and aria-labelledby
+  expect(html).toMatch(/<h2 id="testimonials-heading">Testimonials<\/h2>/)
+  expect(html).toMatch(/<section class="testimonials" aria-labelledby="testimonials-heading">/)
+
+  // FAQ heading levels and structure
+  expect(html).toMatch(/<h2 id="faq-heading">FAQ<\/h2>/)
+  // at least one h3 under FAQ
+  expect(html).toMatch(/<h3 class="faq-q">[\s\S]*<\/h3>/)
+
+  // CTA h2 & aria-labelledby
+  expect(html).toMatch(/<h2 id="cta-heading">CTA<\/h2>/)
+  expect(html).toMatch(/<section class="cta" aria-labelledby="cta-heading">/)
+
+  // focus-visible tokens (CSS)
+  expect(html).toContain('outline: 3px solid')
+}

lib/exporter/typographyContrastTokens.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, test } from 'vitest'
+import { exportPage } from './html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+const makePage = (): Page =>
+  pageSchema.parse({
+    title: 'A11y Tokens',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO', description: 'Desc' },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+  })
+
+describe('A11y color/typography token smoke', () => {
+  test('base text color, font-family and mobile h1 size markers exist', () => {
+    const { css } = exportPage(makePage())
+
+    // base text color token presence
+    expect(css.replace(/\s+/g, ' ')).toMatch(/body\{[^}]*color:\s*#0f172a/i)
+
+    // font-family token (contains "Inter" and common fallbacks)
+    expect(css).toMatch(/body\{[^}]*font-family:\s*Inter/i)
+
+    // mobile h1 size within max-width:640px media query
+    expect(css).toMatch(/@media \(max-width: 640px\)[\s\S]*h1\{[^}]*font-size:\s*1\.5rem/i)
+  })
+})

lib/exporter/zip.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import JSZip from 'jszip'
+import { buildZip } from '@/lib/exporter/zip'
+
+const textEncoder = new TextEncoder()
+
+describe('ZIP 유틸', () => {
+  it('index.html / styles.css / app.js 와 assets/* 를 포함한 ZIP을 생성한다', async () => {
+    const html = '<!DOCTYPE html><html><head><title>x</title></head><body>hi</body></html>'
+    const css = 'body{color:#000}'
+    const js = 'console.log(1)'
+    const assets: Record<string, Uint8Array> = {
+      'assets/a1.png': new Uint8Array([1,2,3]),
+      'assets/b2.svg': textEncoder.encode('<svg></svg>'),
+    }
+
+    const zipBytes = await buildZip({ html, css, js, assets })
+
+    const zip = await JSZip.loadAsync(zipBytes)
+    const names = Object.keys(zip.files)
+
+    expect(names).toContain('index.html')
+    expect(names).toContain('styles.css')
+    expect(names).toContain('app.js')
+    expect(names).toContain('assets/a1.png')
+    expect(names).toContain('assets/b2.svg')
+
+    const htmlContent = await zip.files['index.html'].async('string')
+    expect(htmlContent).toContain('<title>x</title>')
+  })
+})

lib/exporter/zip.ts

@@ -0,0 +1,42 @@
+import JSZip from 'jszip'
+
+export type BuildZipInput = {
+  html: string
+  css: string
+  js: string
+  assets?: Record<string, Uint8Array>
+  // root-level extra files like favicon.ico, site.webmanifest, robots.txt
+  extras?: Record<string, Uint8Array>
+}
+
+export async function buildZip(input: BuildZipInput): Promise<Uint8Array> {
+  const zip = new JSZip()
+  zip.file('index.html', input.html)
+  zip.file('styles.css', input.css)
+  zip.file('app.js', input.js)
+  if (input.assets) {
+    for (const [path, bytes] of Object.entries(input.assets)) {
+      // In Node/Vitest, use Buffer for robust binary handling
+      const buf = Buffer.from(bytes)
+      zip.file(path, buf as unknown as Buffer)
+    }
+  }
+  if (input.extras) {
+    // validate manifest if present
+    if (Object.prototype.hasOwnProperty.call(input.extras, 'site.webmanifest')) {
+      try {
+        const manifestBytes = input.extras['site.webmanifest']
+        const manifestStr = Buffer.from(manifestBytes).toString('utf8')
+        JSON.parse(manifestStr)
+      } catch {
+        throw new Error('Invalid site.webmanifest JSON')
+      }
+    }
+    for (const [path, bytes] of Object.entries(input.extras)) {
+      const buf = Buffer.from(bytes)
+      zip.file(path, buf as unknown as Buffer)
+    }
+  }
+  const content = await zip.generateAsync({ type: 'uint8array' })
+  return content
+}

lib/exporter/zip.validation.integrated.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import JSZip from 'jszip'
+import { exportPage } from '@/lib/exporter/html'
+import { buildZip } from '@/lib/exporter/zip'
+import { AssetManager } from '@/lib/assets/assetManager'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePageWithLocalAsset(): { page: Page; am: AssetManager } {
+  const am = new AssetManager({ maxBytes: 1024 * 1024, allowedExts: ['png','svg','jpg','jpeg','webp'] })
+  // simulate adding a local image and referencing it by original name via local: prefix
+  const bytes = new Uint8Array([7,8,9])
+  // add as "hero.png"
+  am.add({ name: 'hero.png', type: 'image/png', bytes })
+
+  const base: Page = pageSchema.parse({
+    title: 'Integrated ZIP',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'local:hero.png' } },
+      { type: 'cta', props: { text: 'Go', href: '#' } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: 'G-TEST', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 't', description: 'd' },
+  })
+  return { page: base, am }
+}
+
+describe('Export ZIP 통합 검증', () => {
+  it('exportPage 출력 + buildZip 결과에서 assets 경로/메타가 보존된다', async () => {
+    const { page, am } = makePageWithLocalAsset()
+    const out = exportPage(page, { assetManager: am })
+    const assets = am.toZipStructure()
+    const zipBytes = await buildZip({ html: out.html, css: out.css, js: out.js, assets })
+
+    const zip = await JSZip.loadAsync(zipBytes)
+    const names = Object.keys(zip.files)
+    // assets 파일이 존재해야 함
+    const assetKey = Object.keys(assets)[0]
+    expect(names).toContain(assetKey)
+
+    // index.html에 canonical/meta/ga4 스니펫 보존
+    const html = await zip.files['index.html'].async('string')
+    expect(html).toMatch(/<link rel="canonical" href="\//)
+    expect(html).toMatch(/<meta name="description" content="d"/)
+    expect(html).toMatch(/gtag\('config', 'G-TEST'\)/)
+
+    // hero 이미지가 재작성된 경로를 사용한다
+    const match = html.match(/<img[^>]*src="([^"]+)"/)
+    expect(match && match[1]).toBe(assetKey)
+  })
+})

lib/exporter/zip.validation.meta.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import JSZip from 'jszip'
+import { buildZip } from '@/lib/exporter/zip'
+
+describe('Export ZIP 메타 보존 검증', () => {
+  it('index.html의 SEO/OG/Analytics 메타가 그대로 보존된다', async () => {
+    const html = `<!DOCTYPE html><html><head>
+      <meta charset="utf-8" />
+      <link rel="canonical" href="/" />
+      <meta name="description" content="desc" />
+      <meta property="og:title" content="OT" />
+      <meta property="og:description" content="OD" />
+      <script>window.dataLayer=[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());</script>
+    </head><body>ok</body></html>`
+    const css = 'body{color:#222}'
+    const js = 'console.log("ok")'
+
+    const zipBytes = await buildZip({ html, css, js, assets: {} })
+    const zip = await JSZip.loadAsync(zipBytes)
+    const htmlContent = await zip.files['index.html'].async('string')
+
+    expect(htmlContent).toMatch(/<link rel="canonical" href="\//)
+    expect(htmlContent).toMatch(/<meta name="description" content="desc"/)
+    expect(htmlContent).toMatch(/<meta property="og:title" content="OT"/)
+    expect(htmlContent).toMatch(/<meta property="og:description" content="OD"/)
+    expect(htmlContent).toMatch(/window\.dataLayer=\[\];/)
+  })
+})

lib/exporter/zip.validation.phase4.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import JSZip from 'jszip'
+import { buildZip } from '@/lib/exporter/zip'
+import type { BuildZipInput } from '@/lib/exporter/zip'
+
+const TE = new TextEncoder()
+
+describe('Export ZIP 검증 강화 4차: 루트 파일(favicon/manifest/robots)', () => {
+  it('루트 파일들을 포함한다: favicon.ico / site.webmanifest / robots.txt', async () => {
+    const manifest = {
+      name: 'Landing Builder',
+      short_name: 'LB',
+      start_url: '/',
+      display: 'standalone',
+      icons: [{ src: '/favicon.png', sizes: '512x512', type: 'image/png' }],
+    }
+    const input: BuildZipInput = {
+      html: '<!DOCTYPE html><html><head><title>a</title></head><body>ok</body></html>',
+      css: 'body{color:#111}',
+      js: 'console.log("ok")',
+      assets: {},
+      extras: {
+        'favicon.ico': new Uint8Array([0, 1, 2, 3]),
+        'site.webmanifest': TE.encode(JSON.stringify(manifest)),
+        'robots.txt': TE.encode('User-agent: *\nDisallow:'),
+      },
+    }
+    const zipBytes = await buildZip(input)
+
+    const zip = await JSZip.loadAsync(zipBytes)
+    const names = Object.keys(zip.files)
+    expect(names).toContain('favicon.ico')
+    expect(names).toContain('site.webmanifest')
+    expect(names).toContain('robots.txt')
+
+    const robots = await zip.files['robots.txt'].async('string')
+    expect(robots).toMatch(/User-agent: \*/)
+
+    const parsed = JSON.parse(await zip.files['site.webmanifest'].async('string'))
+    expect(parsed.name).toBe('Landing Builder')
+    expect(parsed.icons[0].type).toBe('image/png')
+  })
+
+  it('잘못된 manifest JSON이면 실패한다', async () => {
+    const badInput: BuildZipInput = {
+        html: '<!DOCTYPE html><html><head><title>a</title></head><body>ok</body></html>',
+        css: 'body{color:#111}',
+        js: 'console.log("ok")',
+        extras: { 'site.webmanifest': TE.encode('{ invalid json') },
+      }
+    await expect(buildZip(badInput)).rejects.toThrow()
+  })
+})

lib/exporter/zip.validation.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest'
+import JSZip from 'jszip'
+import { buildZip } from '@/lib/exporter/zip'
+
+const TE = new TextEncoder()
+
+describe('Export ZIP 검증 강화', () => {
+  it('assets가 비어있을 때 index.html/styles.css/app.js만 포함한다', async () => {
+    const zipBytes = await buildZip({
+      html: '<!DOCTYPE html><html><head><title>a</title></head><body>ok</body></html>',
+      css: 'body{color:#111}',
+      js: 'console.log("ok")',
+      assets: {},
+    })
+    const zip = await JSZip.loadAsync(zipBytes)
+    const names = Object.keys(zip.files).sort()
+    expect(names).toEqual(['app.js','index.html','styles.css'])
+  })
+
+  it('assets가 있으면 모든 파일을 그대로 포함한다(서브폴더 포함)', async () => {
+    const assets = {
+      'assets/img/logo.png': new Uint8Array([0,1,2,3]),
+      'assets/svg/icon.svg': TE.encode('<svg></svg>'),
+      'assets/fonts/inter.woff2': new Uint8Array([4,5,6]),
+    }
+    const zipBytes = await buildZip({
+      html: '<!DOCTYPE html><html><head><title>a</title></head><body>ok</body></html>',
+      css: 'body{color:#111}',
+      js: 'console.log("ok")',
+      assets,
+    })
+    const zip = await JSZip.loadAsync(zipBytes)
+    const names = Object.keys(zip.files)
+    expect(names).toContain('index.html')
+    expect(names).toContain('styles.css')
+    expect(names).toContain('app.js')
+    expect(names).toContain('assets/img/logo.png')
+    expect(names).toContain('assets/svg/icon.svg')
+    expect(names).toContain('assets/fonts/inter.woff2')
+
+    const logo = await zip.files['assets/img/logo.png'].async('uint8array')
+    expect(Array.from(logo)).toEqual([0,1,2,3])
+  })
+})

lib/i18n/getMessages.ts

@@ -0,0 +1,8 @@
+import 'server-only'
+import { locales, type AppLocale } from '@/lib/i18n/locales'
+
+export async function getMessages(locale: AppLocale) {
+  const loc = locales.includes(locale) ? locale : 'en'
+  const messages = (await import(`@/messages/${loc}.json`)).default
+  return messages as Record<string, string>
+}

lib/i18n/i18n.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { createI18n } from '@/lib/i18n'
+
+describe('i18n util', () => {
+  const i18n = createI18n({
+    defaultLocale: 'en',
+    messages: {
+      en: { hello: 'Hello {name}', onlyEn: 'Only EN' },
+      ko: { hello: '안녕하세요 {name}' },
+    },
+  })
+
+  it('로케일별 번역과 변수 치환을 지원한다', () => {
+    expect(i18n.t('en', 'hello', { name: 'Jay' })).toBe('Hello Jay')
+    expect(i18n.t('ko', 'hello', { name: '제이' })).toBe('안녕하세요 제이')
+  })
+
+  it('키가 없으면 기본 로케일로 폴백한다', () => {
+    expect(i18n.t('ko', 'onlyEn')).toBe('Only EN')
+  })
+
+  it('완전히 없는 키는 키 그대로 반환한다', () => {
+    expect(i18n.t('en', 'missing.key')).toBe('missing.key')
+  })
+})