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