feat(wysiwyg): 레이어/속성 패널 및 Export(절대배치) 1차 TDD/구현

- LayersPanel: 순서 변경/잠금/숨김 토글
- PropsPanel: 위치/크기/회전 및 이미지 src/alt 편집
- exportFrame: frame-scale 토큰 및 오브젝트 절대배치 HTML/CSS 출력
- 테스트 추가 및 전체 그린 유지

lib/wysiwyg/export.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { exportFrame } from '@/lib/wysiwyg/export'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function makeFrame(): Frame {
+  return {
+    id: 'f1', width: 320, height: 200, background: '#ffffff',
+    layers: [
+      { id: 'l1', name: 'Base', visible: true, locked: false, objects: [
+        { id: 'o1', type: 'image', x: 16, y: 24, width: 80, height: 60, rotate: 15, zIndex: 0, props: { src: 'https://example.com/a.jpg', alt: 'A' } },
+      ]},
+      { id: 'l2', name: 'Text', visible: true, locked: false, objects: [
+        { id: 't1', type: 'text', x: 24, y: 120, width: 200, height: 32, rotate: 0, zIndex: 1, props: { text: 'Hello', fontSize: 18, color: '#111111' } },
+      ]},
+    ],
+  }
+}
+
+describe('wysiwyg export (absolute positioned HTML/CSS + scale wrapper)', () => {
+  it('renders wrapper with fixed width/height and absolutely positioned children', () => {
+    const frame = makeFrame()
+    const out = exportFrame(frame)
+    expect(out.html).toMatch(/<div class=\"frame\"/)
+    expect(out.css).toMatch(/\.frame\s*{[^}]*position:relative/)
+    expect(out.css).toMatch(/width:320px/)
+    expect(out.css).toMatch(/height:200px/)
+    // image object
+    expect(out.html).toMatch(/<img[^>]*src=\"https:\/\/example.com\/a.jpg\"/)
+    expect(out.css).toMatch(/#o1\s*{[^}]*left:16px;[^}]*top:24px;[^}]*width:80px;[^}]*height:60px;[^}]*transform:rotate\(15deg\)/)
+    // text object
+    expect(out.html).toMatch(/<p id=\"t1\"/)
+    expect(out.html).toMatch(/Hello/)
+    expect(out.css).toMatch(/#t1\s*{[^}]*left:24px;[^}]*top:120px;[^}]*width:200px;[^}]*height:32px/)
+  })
+
+  it('includes scale wrapper token for responsive fit', () => {
+    const frame = makeFrame()
+    const out = exportFrame(frame)
+    expect(out.css).toMatch(/\.frame-scale\s*{[^}]*transform-origin:0 0/)
+    expect(out.html).toMatch(/class=\"frame-scale\"/)
+  })
+})

lib/wysiwyg/export.ts

@@ -0,0 +1,48 @@
+import type { Frame, WObject } from '@/lib/wysiwyg/schema'
+
+export type Exported = { html: string; css: string; js: string }
+
+function esc(s: string) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+function isImage(o: WObject): o is Extract<WObject, { type: 'image' }> { return o.type === 'image' }
+function isText(o: WObject): o is Extract<WObject, { type: 'text' }> { return o.type === 'text' }
+function isButton(o: WObject): o is Extract<WObject, { type: 'button' }> { return o.type === 'button' }
+
+function renderObject(o: WObject): { html: string; css: string } {
+  const baseCss = `#${o.id}{position:absolute;left:${o.x}px;top:${o.y}px;width:${o.width}px;height:${o.height}px;transform:rotate(${o.rotate}deg)}`
+  if (isImage(o)) {
+    const html = `<img id="${o.id}" src="${esc(o.props.src)}" alt="${esc(o.props.alt || '')}" />`
+    return { html, css: baseCss }
+  }
+  if (isText(o)) {
+    const html = `<p id="${o.id}">${esc(o.props.text)}</p>`
+    return { html, css: baseCss + `;font-size:${o.props.fontSize}px;color:${o.props.color}` }
+  }
+  // button minimal
+  const label = isButton(o) ? o.props.label : 'Button'
+  const href = isButton(o) ? (o.props.href || '#') : '#'
+  const html = `<a id="${o.id}" href="${esc(href)}">${esc(label)}</a>`
+  return { html, css: baseCss }
+}
+
+export function exportFrame(frame: Frame): Exported {
+  const piecesHtml: string[] = []
+  const piecesCss: string[] = []
+  for (const layer of frame.layers) {
+    if (!layer.visible) continue
+    for (const o of layer.objects) {
+      const r = renderObject(o)
+      piecesHtml.push(r.html)
+      piecesCss.push(r.css)
+    }
+  }
+  const html = `<div class="frame-scale"><div class="frame">${piecesHtml.join('')}</div></div>`
+  const css = [
+    `.frame{position:relative;width:${frame.width}px;height:${frame.height}px;background:${frame.background}}`,
+    `.frame-scale{transform-origin:0 0}`,
+    ...piecesCss,
+  ].join('\n')
+  return { html, css, js: '' }
+}