feat(font): Export Options에 폰트 preconnect 토글 추가 및 exporter 옵션 연동

components/BuilderClientPage.tsx

@@ -58,6 +58,8 @@ export default function BuilderClientPage() {
   const [manifestThemeColor, setManifestThemeColor] = useState<string>('')
   const [robotsDisallow, setRobotsDisallow] = useState<string>('')
   const [sheetsMode, setSheetsMode] = useState<'auto' | 'include' | 'exclude'>('auto')
+  // Font optimization: allow toggling Google Fonts preconnect links in exported HTML
+  const [fontPreconnect, setFontPreconnect] = useState<boolean>(true)
   const [viewport, setViewport] = useState<'desktop' | 'mobile'>(() => {
     if (typeof window !== 'undefined') {
       try {
@@ -178,7 +180,8 @@ export default function BuilderClientPage() {
         const w = window as unknown as { __exportPreview?: () => { html: string; css: string; js: string } }
         w.__exportPreview = () => {
           try {
-            return exportPage(pageSchema.parse(pageData), { assetManager: am ?? undefined })
+            // Export preview with current optimization options
+            return exportPage(pageSchema.parse(pageData), { assetManager: am ?? undefined, fontPreconnect })
           } catch {
             const fixed: Page = {
               ...pageData,
@@ -188,12 +191,12 @@ export default function BuilderClientPage() {
                 spamProtection: pageData.form?.spamProtection ?? { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
               },
             }
-            return exportPage(pageSchema.parse(fixed), { assetManager: am ?? undefined })
+            return exportPage(pageSchema.parse(fixed), { assetManager: am ?? undefined, fontPreconnect })
           }
         }
       }
     } catch {}
-  }, [pageData, am])
+  }, [pageData, am, fontPreconnect])
 
   const doExport = useCallback(async () => {
     let valid = pageData as Page
@@ -210,7 +213,8 @@ export default function BuilderClientPage() {
       } as Page
       valid = pageSchema.parse(fixed)
     }
-    const exported = exportPage(valid, { assetManager: am ?? undefined })
+    // Respect font optimization toggle when exporting
+    const exported = exportPage(valid, { assetManager: am ?? undefined, fontPreconnect })
     try {
       if (typeof window !== 'undefined') {
         const w = window as unknown as { __captureExport?: boolean; __lastExport?: { html: string; css: string; js: string } }
@@ -247,7 +251,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])
+  }, [pageData, am, manifestName, manifestShortName, manifestStartUrl, manifestDisplay, manifestThemeColor, robotsDisallow, sheetsMode, fontPreconnect])
 
   return (
     <div className="p-6 space-y-6">
@@ -312,6 +316,17 @@ 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>
+              {/* Font optimization toggle for Google Fonts preconnect */}
+              <label className="flex items-center gap-2" htmlFor="ins-font-preconnect">
+                <input
+                  id="ins-font-preconnect"
+                  type="checkbox"
+                  aria-label="Font Preconnect"
+                  checked={fontPreconnect}
+                  onChange={(e) => setFontPreconnect(e.target.checked)}
+                />
+                <span className="text-sm">Enable font preconnect (Google Fonts)</span>
+              </label>
               <label className="block" htmlFor="ins-manifest-name">
                 <span className="sr-only">Manifest Name</span>
                 <input