From 9ced249015fc3135743cc54a4568c242d09265f5 Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Mon, 17 Nov 2025 01:56:07 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20WYSIWYG=20=EC=A0=84=EC=9A=A9=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=B6=94=EA=B0=80(/[locale]/wysiwyg)=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=83=98=ED=94=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80/?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[locale]/wysiwyg/page.tsx           |  5 ++++
 components/wysiwyg/WysiwygPage.test.tsx | 15 +++++++++++
 components/wysiwyg/WysiwygPage.tsx      | 36 +++++++++++++++++++++++++
 3 files changed, 56 insertions(+)
 create mode 100644 app/[locale]/wysiwyg/page.tsx
 create mode 100644 components/wysiwyg/WysiwygPage.test.tsx
 create mode 100644 components/wysiwyg/WysiwygPage.tsx

diff --git a/app/[locale]/wysiwyg/page.tsx b/app/[locale]/wysiwyg/page.tsx
new file mode 100644
index 0000000..5ae2566
--- /dev/null
+++ b/app/[locale]/wysiwyg/page.tsx
@@ -0,0 +1,5 @@
+import WysiwygPage from '@/components/wysiwyg/WysiwygPage'
+
+export default function Page() {
+  return <WysiwygPage />
+}
diff --git a/components/wysiwyg/WysiwygPage.test.tsx b/components/wysiwyg/WysiwygPage.test.tsx
new file mode 100644
index 0000000..bcd61af
--- /dev/null
+++ b/components/wysiwyg/WysiwygPage.test.tsx
@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { WysiwygPage } from '@/components/wysiwyg/WysiwygPage'
+
+describe('WysiwygPage', () => {
+  it('renders Canvas with a sample frame and aria-live region', () => {
+    render(<WysiwygPage />)
+    const canvas = screen.getByTestId('wysiwyg-canvas')
+    expect(canvas).toBeInTheDocument()
+    // at least one object is present
+    expect(screen.getByTestId('obj-o1')).toBeInTheDocument()
+    // a11y live region exists
+    expect(screen.getByTestId('aria-live')).toBeInTheDocument()
+  })
+})
diff --git a/components/wysiwyg/WysiwygPage.tsx b/components/wysiwyg/WysiwygPage.tsx
new file mode 100644
index 0000000..1b29650
--- /dev/null
+++ b/components/wysiwyg/WysiwygPage.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Canvas } from '@/components/wysiwyg/Canvas'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function sampleFrame(): Frame {
+  return {
+    id: 'f-sample',
+    width: 600,
+    height: 400,
+    background: '#ffffff',
+    layers: [
+      {
+        id: 'l1',
+        name: 'Base',
+        visible: true,
+        locked: false,
+        objects: [
+          { id: 'o1', type: 'image', x: 40, y: 40, width: 100, height: 80, rotate: 0, zIndex: 0, props: { src: 'https://via.placeholder.com/100x80', alt: 'A' } },
+          { id: 'o2', type: 'text', x: 200, y: 60, width: 200, height: 40, rotate: 0, zIndex: 1, props: { text: 'WYSIWYG', fontSize: 20, color: '#111111' } },
+        ],
+      },
+    ],
+  }
+}
+
+export function WysiwygPage() {
+  const frame = sampleFrame()
+  return (
+    <div className="p-6 space-y-4">
+      <h1 className="text-xl font-semibold">WYSIWYG Canvas</h1>
+      <Canvas frame={frame} />
+    </div>
+  )
+}
+
+export default WysiwygPage