feat: WYSIWYG 빌더 1차 기능 완성 및 테스트 추가

2025-11-17 10:04:01 +09:00
parent 9ced249015
commit 1c607f6331
13 changed files with 660 additions and 28 deletions
@@ -39,4 +39,44 @@ describe('wysiwyg export (absolute positioned HTML/CSS + scale wrapper)', () =>
    expect(out.css).toMatch(/\.frame-scale\s*{[^}]*transform-origin:0 0/)
    expect(out.html).toMatch(/class=\"frame-scale\"/)
  })
+
+  it('wraps exported markup with full HTML document and references stylesheet/script', () => {
+    const frame = makeFrame()
+    const out = exportFrame(frame)
+    expect(out.html.startsWith('<!doctype html>')).toBe(true)
+    expect(out.html).toMatch(/<link rel=\"stylesheet\" href=\"styles\.css\"/)
+    expect(out.html).toMatch(/<script src=\"app\.js\"><\/script>/)
+  })
+
+  it('exports button objects as anchors with href/label semantics', () => {
+    const frame: Frame = {
+      ...makeFrame(),
+      layers: [
+        {
+          id: 'buttons',
+          name: 'Buttons',
+          visible: true,
+          locked: false,
+          objects: [
+            { id: 'cta', type: 'button', x: 10, y: 20, width: 120, height: 36, rotate: 0, zIndex: 0, props: { label: 'Start', href: 'https://acme.dev', color: '#fff', background: '#111' } },
+          ],
+        },
+      ],
+    }
+    const out = exportFrame(frame)
+    expect(out.html).toMatch(/<a id=\"cta\" href=\"https:\/\/acme\.dev\">Start<\/a>/)
+    expect(out.css).toMatch(/#cta\s*{[^}]*width:120px;[^}]*height:36px/)
+  })
+
+  it('skips invisible layers when exporting html/css', () => {
+    const frame: Frame = {
+      ...makeFrame(),
+      layers: [
+        { id: 'hidden', name: 'Hidden', visible: false, locked: false, objects: [makeFrame().layers[0].objects[0]] },
+      ],
+    }
+    const out = exportFrame(frame)
+    expect(out.html).not.toContain('id="o1"')
+    expect(out.css).not.toContain('#o1')
+  })
 })
@@ -38,11 +38,26 @@ export function exportFrame(frame: Frame): Exported {
      piecesCss.push(r.css)
    }
  }
-  const html = `<div class="frame-scale"><div class="frame">${piecesHtml.join('')}</div></div>`
+  const inner = `<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')
+  const html = [
+    '<!doctype html>',
+    '<html lang="en">',
+    '<head>',
+    '<meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width,initial-scale=1" />',
+    '<title>WYSIWYG Frame</title>',
+    '<link rel="stylesheet" href="styles.css" />',
+    '</head>',
+    '<body>',
+    inner,
+    '<script src="app.js"></script>',
+    '</body>',
+    '</html>',
+  ].join('')
  return { html, css, js: '' }
 }