feat(phase6): 자산 경로 구조 옵션(UI/미리보기/Export) + 폰트 preconnect 토글 + extras 자동 보강(robots/manifest) + 문서화

components/BuilderClientPage.tsx

@@ -58,6 +58,7 @@ export default function BuilderClientPage() {
   const [manifestThemeColor, setManifestThemeColor] = useState<string>('')
   const [robotsDisallow, setRobotsDisallow] = useState<string>('')
   const [sheetsMode, setSheetsMode] = useState<'auto' | 'include' | 'exclude'>('auto')
+  const [assetPathStrategy, setAssetPathStrategy] = useState<'flat' | 'grouped'>('flat')
   // Font optimization: allow toggling Google Fonts preconnect links in exported HTML
   const [fontPreconnect, setFontPreconnect] = useState<boolean>(true)
   const [viewport, setViewport] = useState<'desktop' | 'mobile'>(() => {
@@ -178,10 +179,22 @@ export default function BuilderClientPage() {
     try {
       if (typeof window !== 'undefined') {
         const w = window as unknown as { __exportPreview?: () => { html: string; css: string; js: string } }
+        // Build an effective AssetManager based on selected path strategy
+        const buildEffectiveAm = (): AssetManager | undefined => {
+          const base = am ?? undefined
+          if (!base) return undefined
+          if (assetPathStrategy === 'flat') return base
+          const clone = new AssetManager({ maxBytes: 10 * 1024 * 1024, allowedExts: ['png', 'jpg', 'jpeg', 'webp', 'svg'], pathStrategy: assetPathStrategy })
+          for (const ref of base.list()) {
+            // re-add to apply new path strategy and recreate byOriginal mapping
+            clone.add({ name: ref.originalName, type: ref.mimeType, bytes: ref.bytes })
+          }
+          return clone
+        }
         w.__exportPreview = () => {
           try {
             // Export preview with current optimization options
-            return exportPage(pageSchema.parse(pageData), { assetManager: am ?? undefined, fontPreconnect })
+            return exportPage(pageSchema.parse(pageData), { assetManager: buildEffectiveAm(), fontPreconnect })
           } catch {
             const fixed: Page = {
               ...pageData,
@@ -191,12 +204,12 @@ export default function BuilderClientPage() {
                 spamProtection: pageData.form?.spamProtection ?? { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
               },
             }
-            return exportPage(pageSchema.parse(fixed), { assetManager: am ?? undefined, fontPreconnect })
+            return exportPage(pageSchema.parse(fixed), { assetManager: buildEffectiveAm(), fontPreconnect })
           }
         }
       }
     } catch {}
-  }, [pageData, am, fontPreconnect])
+  }, [pageData, am, fontPreconnect, assetPathStrategy])
 
   const doExport = useCallback(async () => {
     let valid = pageData as Page
@@ -213,8 +226,19 @@ export default function BuilderClientPage() {
       } as Page
       valid = pageSchema.parse(fixed)
     }
+    // Build an effective AssetManager based on selected path strategy
+    const buildEffectiveAm = (): AssetManager | undefined => {
+      const base = am ?? undefined
+      if (!base) return undefined
+      if (assetPathStrategy === 'flat') return base
+      const clone = new AssetManager({ maxBytes: 10 * 1024 * 1024, allowedExts: ['png', 'jpg', 'jpeg', 'webp', 'svg'], pathStrategy: assetPathStrategy })
+      for (const ref of base.list()) {
+        clone.add({ name: ref.originalName, type: ref.mimeType, bytes: ref.bytes })
+      }
+      return clone
+    }
     // Respect font optimization toggle when exporting
-    const exported = exportPage(valid, { assetManager: am ?? undefined, fontPreconnect })
+    const exported = exportPage(valid, { assetManager: buildEffectiveAm(), fontPreconnect })
     try {
       if (typeof window !== 'undefined') {
         const w = window as unknown as { __captureExport?: boolean; __lastExport?: { html: string; css: string; js: string } }
@@ -223,7 +247,17 @@ export default function BuilderClientPage() {
         }
       }
     } catch {}
-    const assets = am ? am.toZipStructure() : {}
+    const effectiveAm = (() => {
+      const base = am ?? undefined
+      if (!base) return undefined
+      if (assetPathStrategy === 'flat') return base
+      const clone = new AssetManager({ maxBytes: 10 * 1024 * 1024, allowedExts: ['png', 'jpg', 'jpeg', 'webp', 'svg'], pathStrategy: assetPathStrategy })
+      for (const ref of base.list()) {
+        clone.add({ name: ref.originalName, type: ref.mimeType, bytes: ref.bytes })
+      }
+      return clone
+    })()
+    const assets = effectiveAm ? effectiveAm.toZipStructure() : {}
     // Build overrides from UI options
     const manifestOverrideBase: Record<string, string> = {}
     if (manifestName && manifestName.trim().length > 0) manifestOverrideBase.name = manifestName.trim()
@@ -251,7 +285,7 @@ export default function BuilderClientPage() {
     }
     const zipBytes = await buildZip({ html: exported.html, css: exported.css, js: exported.js, assets, extras })
     download('landing.zip', zipBytes)
-  }, [pageData, am, manifestName, manifestShortName, manifestStartUrl, manifestDisplay, manifestThemeColor, robotsDisallow, sheetsMode, fontPreconnect])
+  }, [pageData, am, manifestName, manifestShortName, manifestStartUrl, manifestDisplay, manifestThemeColor, robotsDisallow, sheetsMode, fontPreconnect, assetPathStrategy])
 
   return (
     <div className="p-6 space-y-6">
@@ -316,6 +350,20 @@ export default function BuilderClientPage() {
             </div>
             <div className="border rounded p-3 space-y-2">
               <h2 className="text-sm font-semibold mb-1">Export Options</h2>
+              {/* Asset path strategy: flat vs grouped */}
+              <label className="block" htmlFor="ins-asset-path-strategy">
+                <span className="sr-only">Asset Path Strategy</span>
+                <select
+                  id="ins-asset-path-strategy"
+                  aria-label="Asset Path Strategy"
+                  className="border rounded px-3 py-2 w-full"
+                  value={assetPathStrategy}
+                  onChange={(e) => setAssetPathStrategy(e.target.value as 'flat' | 'grouped')}
+                >
+                  <option value="flat">Assets Path: Flat</option>
+                  <option value="grouped">Assets Path: Grouped (images/fonts/other)</option>
+                </select>
+              </label>
               {/* Font optimization toggle for Google Fonts preconnect */}
               <label className="flex items-center gap-2" htmlFor="ins-font-preconnect">
                 <input

lib/exporter/assets.pathStrategy.integration.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+import { AssetManager } from '@/lib/assets/assetManager'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'Path Strategy',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [ { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'local:hero.png' } } ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 't', description: 'd' },
+  })
+}
+
+describe('자산 경로 구조 옵션', () => {
+  it('grouped 전략일 때 이미지가 assets/images/ 경로로 렌더된다', async () => {
+    const page = makePage()
+    const am = new AssetManager({ maxBytes: 1024 * 1024, allowedExts: ['png'], pathStrategy: 'grouped' })
+    // add hero image asset
+    const bytes = new Uint8Array([1,2,3,4,5])
+    await am.add({ name: 'hero.png', type: 'image/png', bytes })
+    const out = exportPage(page, { assetManager: am })
+    expect(out.html).toMatch(/assets\/images\/[a-f0-9]{8}\.png/i)
+  })
+})

lib/exporter/extras.autoEnrich.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest'
+import { buildExtrasForPage } from '@/lib/exporter/extras'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'My Product',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [ { type: 'hero', props: { heading: 'Hello', subheading: '', imageUrl: 'https://example.com/hero.png' } } ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 't', description: 'd' },
+  })
+}
+
+function toStr(bytes: Uint8Array) {
+  return new TextDecoder().decode(bytes)
+}
+
+describe('extras 자동 보강', () => {
+  it('manifest: 잘못된 theme_color는 무시하고 기본(primaryColor) 사용', () => {
+    const page = makePage()
+    const out = buildExtrasForPage(page, { manifest: { theme_color: 'not-a-hex' } })
+    const manifest = JSON.parse(toStr(out['site.webmanifest']))
+    expect(manifest.theme_color).toBe('#0ea5e9')
+  })
+
+  it('manifest: short_name은 12자 이내로 자동 절단', () => {
+    const page = makePage()
+    const out = buildExtrasForPage(page, { manifest: { name: 'Super Long Product Name' } })
+    const manifest = JSON.parse(toStr(out['site.webmanifest']))
+    expect(manifest.short_name.length).toBeLessThanOrEqual(12)
+  })
+
+  it('robots: 주어진 plain 경로 목록을 자동으로 User-agent 헤더와 Disallow 라인으로 보강', () => {
+    const page = makePage()
+    const robotsPlain = "/admin\n/private"
+    const out = buildExtrasForPage(page, { robotsText: robotsPlain })
+    const robots = toStr(out['robots.txt'])
+    expect(robots).toMatch(/^User-agent: \*/)
+    expect(robots).toMatch(/Disallow: \/admin/)
+    expect(robots).toMatch(/Disallow: \/private/)
+  })
+})

lib/exporter/extras.ts

@@ -17,7 +17,14 @@ function toBytes(s: string): Uint8Array {
 }
 
 function buildRobots(base?: string): string {
-  if (base && base.trim().length > 0) return base
+  if (base && base.trim().length > 0) {
+    const s = base.trim()
+    if (/^User-agent:/i.test(s)) return s
+    const lines = s.split(/\n+/).map((l) => l.trim()).filter((l) => l.length > 0)
+    if (lines.length === 0) return 'User-agent: *\n'
+    const disallowLines = lines.map((l) => (l.startsWith('Disallow:') ? l : `Disallow: ${l}`))
+    return `User-agent: *\n${disallowLines.join('\n')}`
+  }
   return 'User-agent: *\n'
 }
 
@@ -37,9 +44,18 @@ export function buildExtrasForPage(page: Page, overrides?: ExtrasOverrides): Rec
   const robotsText = buildRobots(overrides?.robotsText)
   out['robots.txt'] = toBytes(robotsText)
 
-  // site.webmanifest
+  // site.webmanifest (auto-enrich and safe-merge)
   const manifestBase = deriveManifest(page)
-  const manifestMerged = { ...manifestBase, ...(overrides?.manifest || {}) }
+  const ov = overrides?.manifest || {}
+  const name = ov.name && ov.name.trim().length > 0 ? ov.name : manifestBase.name
+  const short_name = ov.short_name && ov.short_name.trim().length > 0
+    ? ov.short_name
+    : (name.length > 12 ? name.slice(0, 12) : name)
+  const start_url = ov.start_url && ov.start_url.trim().length > 0 ? ov.start_url : manifestBase.start_url
+  const display = ov.display && ov.display.trim().length > 0 ? ov.display : manifestBase.display
+  const hexOk = ov.theme_color ? /^#([0-9a-fA-F]{3}){1,2}$/.test(ov.theme_color) : false
+  const theme_color = hexOk ? (ov.theme_color as string) : manifestBase.theme_color
+  const manifestMerged = { name, short_name, start_url, display, theme_color }
   const manifestJson = JSON.stringify(manifestMerged, null, 2)
   out['site.webmanifest'] = toBytes(manifestJson)