From 9ec553499ac2ba580fd09701a165914ba9cfa071 Mon Sep 17 00:00:00 2001
From: Younggun Park <ygpark0922@gmail.com>
Date: Sun, 15 Feb 2026 01:24:48 +0900
Subject: [PATCH 1/3] feat: Implement StylePreset-aware asset generation with
 multi-layout OG images
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create lib/assets/style-resolver.ts: slug-based mapping layer translating preset free-text fields (og_layout, og_background, og_typography, shadow_style, color_mode) into concrete satori/sharp styles
- Enhance lib/assets/og-image.tsx: 4 layout variants (centered, left-aligned, centered-large-text, grid-balanced), multi-font loading from Google Fonts CDN (Inter, Geist, Plus Jakarta Sans, Nunito), gradient/dark backgrounds, glassmorphism simulation
- Extend lib/utils/image.ts: SVG icons with <linearGradient> and <feDropShadow> filters for preset-aware styling, corner_radius masking for AI-generated icons
- Add color utilities: darkenHex, lightenHex, hexToRgba for HSL-based color manipulation
- Update lib/assets/splash-screen.ts and app-icons.ts: support gradient backgrounds and preset styling
- Wire brandProfile through favicon, app-icons, and pipeline for complete preset integration

When users click "다시 생성", each of 8 style presets (Notion Minimal, Airbnb 3D, Stripe Gradient, Linear Dark, Vercel Sharp, Glassmorphism, Duolingo Playful, Figma Clean) now produces visually distinct OG images, favicons, app icons, and splash screens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/api/ai/icons/route.ts          |   1 +
 app/globals.css                    |  20 +-
 components/wizard/icon-ai-tab.tsx  |  83 ++++++-
 components/wizard/step-4-icon.tsx  |   7 +-
 components/wizard/wizard-shell.tsx |   6 +-
 lib/ai/fal.ts                      |   9 +-
 lib/assets/app-icons.ts            |  35 ++-
 lib/assets/favicon.ts              |  14 +-
 lib/assets/og-image.tsx            | 341 ++++++++++++++++++++++++---
 lib/assets/pipeline.ts             |   4 +-
 lib/assets/splash-screen.ts        |  39 +++-
 lib/assets/style-resolver.ts       | 361 +++++++++++++++++++++++++++++
 lib/utils/colors.ts                |  54 +++++
 lib/utils/image.ts                 |  58 ++++-
 14 files changed, 952 insertions(+), 80 deletions(-)
 create mode 100644 lib/assets/style-resolver.ts

diff --git a/app/api/ai/icons/route.ts b/app/api/ai/icons/route.ts
index 50cbb33..19495fb 100644
--- a/app/api/ai/icons/route.ts
+++ b/app/api/ai/icons/route.ts
@@ -37,6 +37,7 @@ export async function POST(request: Request) {
     const images = await generateIcon({
       description: body.description,
       brandProfile: body.brandProfile,
+      styleModifier: body.styleModifier,
     })
 
     await incrementUsage(admin, user.id, 'ai_icons_used_this_month')
diff --git a/app/globals.css b/app/globals.css
index 77bfb8f..184edf1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -66,8 +66,12 @@ body {
 
 /* -- Dark Mode -- */
 [data-theme="dark"] {
-  --color-brand: #fafafa;
-  --color-brand-foreground: #0a0a0b;
+  --color-brand: #111114;
+  --color-brand-foreground: #fafafa;
+
+  --color-accent: #818cf8;
+  --color-accent-light: #a5b4fc;
+  --color-accent-dark: #6366f1;
 
   --color-surface: #0a0a0b;
   --color-surface-secondary: #18181b;
@@ -84,14 +88,18 @@ body {
   --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 4px 12px rgb(0 0 0 / 0.4);
   --shadow-lg: 0 4px 6px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.4);
   --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.4), 0 16px 48px rgb(0 0 0 / 0.5);
-  --shadow-glow: 0 0 20px rgb(99 102 241 / 0.25), 0 0 60px rgb(99 102 241 / 0.15);
+  --shadow-glow: 0 0 20px rgb(129 140 248 / 0.3), 0 0 60px rgb(129 140 248 / 0.15);
 }
 
 /* 시스템 설정 기반 자동 다크모드 (선택적) */
 @media (prefers-color-scheme: dark) {
   html:not([data-theme="light"]) {
-    --color-brand: #fafafa;
-    --color-brand-foreground: #0a0a0b;
+    --color-brand: #111114;
+    --color-brand-foreground: #fafafa;
+
+    --color-accent: #818cf8;
+    --color-accent-light: #a5b4fc;
+    --color-accent-dark: #6366f1;
 
     --color-surface: #0a0a0b;
     --color-surface-secondary: #18181b;
@@ -205,7 +213,7 @@ body {
 
 /* -- Gradient Text -- */
 .text-gradient {
-  background: linear-gradient(135deg, var(--color-accent) 0%, #a78bfa 50%, var(--color-accent-light) 100%);
+  background: linear-gradient(135deg, var(--color-accent) 0%, #c4b5fd 50%, var(--color-accent-light) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
diff --git a/components/wizard/icon-ai-tab.tsx b/components/wizard/icon-ai-tab.tsx
index d3b4c8d..c8943ce 100644
--- a/components/wizard/icon-ai-tab.tsx
+++ b/components/wizard/icon-ai-tab.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { useState } from 'react'
-import { Sparkles } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { Sparkles, Wand2 } from 'lucide-react'
 import Image from 'next/image'
 import { useWizardStore } from '@/store/wizard-store'
 import { Input } from '@/components/ui/input'
@@ -10,12 +10,13 @@ import { Button } from '@/components/ui/button'
 import { PlanGate } from '@/components/shared/plan-gate'
 import { UsageMeter } from '@/components/shared/usage-meter'
 import { cn } from '@/lib/utils/cn'
-import type { BrandProfile, Plan, User } from '@/types/database'
+import type { BrandProfile, Plan, StylePreset, User } from '@/types/database'
 
 interface IconAiTabProps {
   plan: Plan
   user: User
   brandProfile: BrandProfile | null
+  stylePreset: StylePreset | null
 }
 
 interface GeneratedImage {
@@ -23,14 +24,62 @@ interface GeneratedImage {
   seed: number
 }
 
-export function IconAiTab({ plan, user, brandProfile }: IconAiTabProps) {
-  const { icon, setIcon } = useWizardStore()
+function buildSuggestions(
+  projectName: string,
+  projectDescription: string,
+  platform: string,
+  brandProfile: BrandProfile | null,
+  stylePreset: StylePreset | null,
+): string[] {
+  const suggestions: string[] = []
+
+  if (stylePreset && projectName) {
+    suggestions.push(`${stylePreset.name}-style icon for ${projectName}`)
+  }
+
+  if (brandProfile?.keywords?.length) {
+    const keyword = brandProfile.keywords[0]
+    const iconStyle = stylePreset?.icon_style || brandProfile.icon_style
+    suggestions.push(`${keyword} themed ${iconStyle ? iconStyle + ' ' : ''}icon`)
+  }
+
+  if (projectName && projectDescription) {
+    suggestions.push(
+      `modern ${platform} app icon for ${projectName}, ${projectDescription}`,
+    )
+  }
+
+  if (projectName && !stylePreset) {
+    suggestions.push(`minimalist icon for ${projectName}`)
+  }
+
+  if (suggestions.length === 0) {
+    suggestions.push('minimalist app icon, clean and modern')
+  }
+
+  return suggestions
+}
+
+export function IconAiTab({ plan, user, brandProfile, stylePreset }: IconAiTabProps) {
+  const { icon, setIcon, project, platform } = useWizardStore()
   const [description, setDescription] = useState('')
   const [isGenerating, setIsGenerating] = useState(false)
   const [images, setImages] = useState<GeneratedImage[]>([])
   const [error, setError] = useState<string | null>(null)
   const [iconsUsed, setIconsUsed] = useState(user.ai_icons_used_this_month)
 
+  const suggestions = useMemo(
+    () =>
+      buildSuggestions(
+        project.name,
+        project.description,
+        platform.platform,
+        brandProfile,
+        stylePreset,
+      ),
+    [project.name, project.description, platform.platform, brandProfile, stylePreset],
+  )
+
   const iconsLimit = plan === 'pro' ? Infinity : 5
   const isExhausted = iconsUsed >= iconsLimit
 
@@ -54,6 +103,7 @@ export function IconAiTab({ plan, user, brandProfile }: IconAiTabProps) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           description,
+          styleModifier: stylePreset?.ai_style_modifier ?? undefined,
           brandProfile: brandProfile ? {
             styleDirection: brandProfile.style_direction,
             primaryColor: brandProfile.primary_color,
@@ -107,6 +157,29 @@ export function IconAiTab({ plan, user, brandProfile }: IconAiTabProps) {
           onChange={(e) => setDescription(e.target.value)}
           placeholder="e.g., minimalist checkmark icon for task app"
         />
+        {suggestions.length > 0 && (
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="flex items-center gap-1 text-xs text-text-tertiary">
+              <Wand2 className="h-3 w-3" />
+              Suggested:
+            </span>
+            {suggestions.map((s, i) => (
+              <button
+                key={i}
+                type="button"
+                onClick={() => setDescription(s)}
+                className={cn(
+                  'rounded-full border px-3 py-1 text-xs transition-colors',
+                  description === s
+                    ? 'border-brand bg-brand/10 text-brand'
+                    : 'border-border text-text-secondary hover:border-border-hover hover:bg-surface-secondary',
+                )}
+              >
+                {s}
+              </button>
+            ))}
+          </div>
+        )}
       </div>
 
       <Button
diff --git a/components/wizard/step-4-icon.tsx b/components/wizard/step-4-icon.tsx
index 9aa77fa..6c5db5a 100644
--- a/components/wizard/step-4-icon.tsx
+++ b/components/wizard/step-4-icon.tsx
@@ -5,15 +5,16 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
 import { IconTextTab } from './icon-text-tab'
 import { IconSymbolTab } from './icon-symbol-tab'
 import { IconAiTab } from './icon-ai-tab'
-import type { BrandProfile, Plan, User } from '@/types/database'
+import type { BrandProfile, Plan, StylePreset, User } from '@/types/database'
 
 interface Step4IconProps {
   plan: Plan
   user: User
   brandProfile: BrandProfile | null
+  stylePreset: StylePreset | null
 }
 
-export function Step4Icon({ plan, user, brandProfile }: Step4IconProps) {
+export function Step4Icon({ plan, user, brandProfile, stylePreset }: Step4IconProps) {
   const [activeTab, setActiveTab] = useState('text')
 
   return (
@@ -38,7 +39,7 @@ export function Step4Icon({ plan, user, brandProfile }: Step4IconProps) {
           <IconSymbolTab />
         </TabsContent>
         <TabsContent value="ai">
-          <IconAiTab plan={plan} user={user} brandProfile={brandProfile} />
+          <IconAiTab plan={plan} user={user} brandProfile={brandProfile} stylePreset={stylePreset} />
         </TabsContent>
       </Tabs>
     </div>
diff --git a/components/wizard/wizard-shell.tsx b/components/wizard/wizard-shell.tsx
index 2485ca2..185dbe5 100644
--- a/components/wizard/wizard-shell.tsx
+++ b/components/wizard/wizard-shell.tsx
@@ -123,8 +123,10 @@ export function WizardShell({ brandProfiles, stylePresets, user }: WizardShellPr
         return <Step2ProjectInfo user={user} brandProfile={selectedProfile} />
       case 3:
         return <Step3Style presets={stylePresets} brandProfile={selectedProfile} plan={plan} />
-      case 4:
-        return <Step4Icon plan={plan} user={user} brandProfile={selectedProfile} />
+      case 4: {
+        const selectedPreset = stylePresets.find((p) => p.id === store.style.stylePresetId) ?? null
+        return <Step4Icon plan={plan} user={user} brandProfile={selectedProfile} stylePreset={selectedPreset} />
+      }
       case 5:
         return (
           <Step5Preview
diff --git a/lib/ai/fal.ts b/lib/ai/fal.ts
index 25f7405..9dae510 100644
--- a/lib/ai/fal.ts
+++ b/lib/ai/fal.ts
@@ -21,6 +21,7 @@ interface GenerateIconParams {
   description: string
   brandProfile?: BrandProfileInfo
   promptConfig?: IconPromptConfig
+  styleModifier?: string
 }
 
 /**
@@ -28,7 +29,7 @@ interface GenerateIconParams {
  * FAL AI의 Flux 모델을 사용하여 브랜드 스타일에 맞는 아이콘을 생성합니다.
  */
 export async function generateIcon(params: GenerateIconParams) {
-  const { description, brandProfile, promptConfig } = params
+  const { description, brandProfile, promptConfig, styleModifier } = params
 
   let prompt: string
 
@@ -41,7 +42,7 @@ export async function generateIcon(params: GenerateIconParams) {
     prompt = `${description}, ${composed.userPrompt}`
   } else {
     // 기본 프롬프트 생성 (promptConfig 없는 경우)
-    prompt = buildDefaultPrompt(description, brandProfile)
+    prompt = buildDefaultPrompt(description, brandProfile, styleModifier)
   }
 
   const result = await fal.subscribe(AI_CONFIG.fal.model, {
@@ -68,10 +69,12 @@ export const generateIconWithPromptConfig = generateIcon
 
 function buildDefaultPrompt(
   description: string,
-  brandProfile?: BrandProfileInfo
+  brandProfile?: BrandProfileInfo,
+  styleModifier?: string,
 ): string {
   const parts = [
     description,
+    styleModifier || '',
     brandProfile ? getStyleModifier(brandProfile.styleDirection) : '',
     brandProfile?.keywords.join(', ') || '',
     'single centered icon',
diff --git a/lib/assets/app-icons.ts b/lib/assets/app-icons.ts
index 309973a..2a189c3 100644
--- a/lib/assets/app-icons.ts
+++ b/lib/assets/app-icons.ts
@@ -2,20 +2,24 @@ import sharp from 'sharp'
 import { ANDROID_MIPMAP_SIZES, ANDROID_ADAPTIVE_SIZES, IOS_ICON_SIZES } from './constants'
 import { renderIconToBuffer, type IconSource } from '@/lib/utils/image'
 import { hexToRgb } from '@/lib/utils/colors'
-import type { Project, StylePreset, MobileTarget } from '@/types/database'
+import { resolveSplashStyles } from './style-resolver'
+import type { Project, StylePreset, BrandProfile, MobileTarget } from '@/types/database'
 
 interface AppIconInput {
   iconSource: IconSource
   project: Project
+  brandProfile: BrandProfile | null
   stylePreset: StylePreset
   mobileTarget: MobileTarget | null
 }
 
 export async function generateAppIcons(input: AppIconInput) {
-  const { iconSource, project, stylePreset, mobileTarget } = input
+  const { iconSource, project, brandProfile, stylePreset, mobileTarget } = input
   const results: Record<string, Buffer> = {}
-  const baseImage = await renderIconToBuffer(iconSource, 1024, project, stylePreset)
-  const bgColorHex = project.primary_color_override || '#FFFFFF'
+  const baseImage = await renderIconToBuffer(iconSource, 1024, project, stylePreset, brandProfile)
+
+  const resolved = resolveSplashStyles(stylePreset, brandProfile, project)
+  const bgColorHex = resolved.background.color1
   const bgRgb = hexToRgb(bgColorHex)
 
   // Android
@@ -27,9 +31,26 @@ export async function generateAppIcons(input: AppIconInput) {
     for (const [density, size] of Object.entries(ANDROID_ADAPTIVE_SIZES.foreground)) {
       results[`android/mipmap-${density}/ic_launcher_foreground.png`] =
         await sharp(baseImage).resize(size, size).png().toBuffer()
-      results[`android/mipmap-${density}/ic_launcher_background.png`] =
-        await sharp({ create: { width: size, height: size, channels: 4, background: { ...bgRgb, alpha: 255 } } })
-          .png().toBuffer()
+
+      // Adaptive background: gradient or solid based on style
+      let bgBuffer: Buffer
+      if (resolved.background.type === 'gradient' && resolved.background.color2) {
+        const gradientSvg = Buffer.from(
+          `<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
+            <defs><linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stop-color="${resolved.background.color1}"/>
+              <stop offset="100%" stop-color="${resolved.background.color2}"/>
+            </linearGradient></defs>
+            <rect width="${size}" height="${size}" fill="url(#bg)"/>
+          </svg>`
+        )
+        bgBuffer = await sharp(gradientSvg).png().toBuffer()
+      } else {
+        bgBuffer = await sharp({
+          create: { width: size, height: size, channels: 4, background: { ...bgRgb, alpha: 255 } },
+        }).png().toBuffer()
+      }
+      results[`android/mipmap-${density}/ic_launcher_background.png`] = bgBuffer
     }
   }
 
diff --git a/lib/assets/favicon.ts b/lib/assets/favicon.ts
index 6aed00b..9ff11a6 100644
--- a/lib/assets/favicon.ts
+++ b/lib/assets/favicon.ts
@@ -3,18 +3,21 @@ import pngToIco from 'png-to-ico'
 import { FAVICON_SIZES } from './constants'
 import { renderIconToBuffer, generateTextSVG, type IconSource } from '@/lib/utils/image'
 import { getContrastColor } from '@/lib/utils/colors'
-import type { Project, StylePreset } from '@/types/database'
+import { resolveIconStyles } from './style-resolver'
+import type { Project, StylePreset, BrandProfile } from '@/types/database'
 
 interface FaviconInput {
   iconSource: IconSource
   project: Project
+  brandProfile: BrandProfile | null
   stylePreset: StylePreset
 }
 
 export async function generateFavicons(input: FaviconInput) {
-  const { iconSource, project, stylePreset } = input
+  const { iconSource, project, brandProfile, stylePreset } = input
   const results: Record<string, Buffer> = {}
-  const color = project.primary_color_override || '#000000'
+  const color = project.primary_color_override || brandProfile?.primary_color || '#000000'
+  const resolved = resolveIconStyles(stylePreset, brandProfile, project)
 
   // SVG Favicon
   if (iconSource.type === 'text') {
@@ -22,7 +25,8 @@ export async function generateFavicons(input: FaviconInput) {
       iconSource.value!,
       color,
       getContrastColor(color),
-      stylePreset.corner_radius
+      stylePreset.corner_radius,
+      resolved,
     )
     results['favicon.svg'] = Buffer.from(svgString)
   } else if (iconSource.type === 'svg') {
@@ -30,7 +34,7 @@ export async function generateFavicons(input: FaviconInput) {
   }
 
   // PNG Favicons
-  const baseImage = await renderIconToBuffer(iconSource, 512, project, stylePreset)
+  const baseImage = await renderIconToBuffer(iconSource, 512, project, stylePreset, brandProfile)
 
   for (const size of FAVICON_SIZES.png) {
     const resized = await sharp(baseImage)
diff --git a/lib/assets/og-image.tsx b/lib/assets/og-image.tsx
index 8f521a9..40fdf22 100644
--- a/lib/assets/og-image.tsx
+++ b/lib/assets/og-image.tsx
@@ -1,12 +1,63 @@
 import satori from 'satori'
 import sharp from 'sharp'
-import { readFile } from 'fs/promises'
-import path from 'path'
 import { OG_IMAGE_SIZES } from './constants'
-import { getContrastColor } from '@/lib/utils/colors'
+import { resolveOgStyles, type ResolvedOgStyles } from './style-resolver'
 import type { Project, BrandProfile, StylePreset } from '@/types/database'
 import React from 'react'
 
+// ========================================
+// Font Loading
+// ========================================
+
+// Google Fonts CDN URLs for each font/weight combination
+const FONT_URLS: Record<string, Record<number, string>> = {
+  'Inter': {
+    400: 'https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZhrib2Bg-4.ttf',
+    500: 'https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZhrib2Bg-4.ttf',
+    600: 'https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZhrib2Bg-4.ttf',
+    700: 'https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZhrib2Bg-4.ttf',
+  },
+  'Geist': {
+    700: 'https://fonts.gstatic.com/s/geist/v3/gyBhhwUxId8mMGZKNImSPbcZm7h9NNQ.ttf',
+  },
+  'Plus Jakarta Sans': {
+    700: 'https://fonts.gstatic.com/s/plusjakartasans/v8/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_KU7NShXUEKi4Rw.ttf',
+  },
+  'Nunito': {
+    800: 'https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.ttf',
+  },
+}
+
+// Module-level cache to avoid re-fetching fonts within the same invocation
+const fontCache = new Map<string, Buffer>()
+
+async function loadFont(family: string, weight: number): Promise<Buffer> {
+  const key = `${family}-${weight}`
+  const cached = fontCache.get(key)
+  if (cached) return cached
+
+  const familyUrls = FONT_URLS[family]
+  const url = familyUrls?.[weight] || FONT_URLS['Inter']![700]!
+
+  const res = await fetch(url)
+  if (!res.ok) {
+    // Fallback to Inter 700
+    const fallbackRes = await fetch(FONT_URLS['Inter']![700]!)
+    if (!fallbackRes.ok) throw new Error(`Failed to load font: ${family} ${weight}`)
+    const buf = Buffer.from(await fallbackRes.arrayBuffer())
+    fontCache.set(key, buf)
+    return buf
+  }
+
+  const buf = Buffer.from(await res.arrayBuffer())
+  fontCache.set(key, buf)
+  return buf
+}
+
+// ========================================
+// Main Generator
+// ========================================
+
 interface OgImageInput {
   project: Project
   brandProfile: BrandProfile | null
@@ -14,31 +65,26 @@ interface OgImageInput {
 }
 
 export async function generateOgImages(input: OgImageInput) {
-  const { project, brandProfile } = input
+  const { project, brandProfile, stylePreset } = input
   const results: Record<string, Buffer> = {}
 
-  let fontData: Buffer
-  try {
-    fontData = await readFile(path.join(process.cwd(), 'public/fonts/Inter-Bold.ttf'))
-  } catch {
-    // Fallback: use a system-like default if font not available
-    fontData = Buffer.alloc(0)
-  }
+  const resolved = resolveOgStyles(stylePreset, brandProfile, project)
+  const fontData = await loadFont(resolved.fontFamily, resolved.fontWeight)
 
-  const fonts = fontData.length > 0
-    ? [{ name: 'Inter', data: fontData, weight: 700 as const, style: 'normal' as const }]
-    : []
+  const fonts = [
+    { name: resolved.fontFamily, data: fontData, weight: resolved.fontWeight as 100, style: 'normal' as const },
+  ]
 
   // OG Image (1200x630)
   const ogSvg = await satori(
-    renderOgTemplate(project, brandProfile),
+    renderOgTemplate(project, resolved),
     { width: OG_IMAGE_SIZES.og.width, height: OG_IMAGE_SIZES.og.height, fonts }
   )
   results['og.png'] = await sharp(Buffer.from(ogSvg)).png().toBuffer()
 
   // Twitter Card (1200x600)
   const twitterSvg = await satori(
-    renderOgTemplate(project, brandProfile),
+    renderOgTemplate(project, resolved),
     { width: OG_IMAGE_SIZES.twitter.width, height: OG_IMAGE_SIZES.twitter.height, fonts }
   )
   results['twitter-card.png'] = await sharp(Buffer.from(twitterSvg)).png().toBuffer()
@@ -46,12 +92,72 @@ export async function generateOgImages(input: OgImageInput) {
   return results
 }
 
-function renderOgTemplate(
-  project: Project,
-  brandProfile: BrandProfile | null,
-) {
-  const bgColor = project.primary_color_override || brandProfile?.primary_color || '#000000'
-  const textColor = getContrastColor(bgColor)
+// ========================================
+// Template Renderer (dispatch by layout)
+// ========================================
+
+function renderOgTemplate(project: Project, s: ResolvedOgStyles) {
+  switch (s.layout) {
+    case 'left-aligned':
+      return renderLeftAligned(project, s)
+    case 'centered-large-text':
+      return renderCenteredLargeText(project, s)
+    case 'grid-balanced':
+      return renderGridBalanced(project, s)
+    case 'centered':
+    default:
+      return renderCentered(project, s)
+  }
+}
+
+// ========================================
+// Layout: Centered (Airbnb 3D, Stripe Gradient, Glassmorphism, Duolingo)
+// ========================================
+
+function renderCentered(project: Project, s: ResolvedOgStyles) {
+  const subtitle = project.ai_headline || project.description || ''
+
+  const textContent = React.createElement('div', {
+    style: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      alignItems: 'center',
+      padding: s.glassOverlay ? '48px 64px' : '0',
+      ...(s.glassOverlay ? {
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        borderRadius: '24px',
+        border: '1px solid rgba(255,255,255,0.2)',
+      } : {}),
+      ...(s.hardShadow ? {
+        backgroundColor: s.background === s.textColor ? 'transparent' : undefined,
+        boxShadow: '6px 6px 0 rgba(0,0,0,0.2)',
+        borderRadius: '16px',
+        padding: '48px 64px',
+      } : {}),
+    },
+  },
+    React.createElement('div', {
+      style: {
+        fontSize: '56px',
+        fontWeight: s.fontWeight,
+        fontFamily: s.fontFamily,
+        color: s.textColor,
+        textAlign: 'center' as const,
+        lineHeight: 1.2,
+        marginBottom: subtitle ? '20px' : '0',
+      },
+    }, project.name),
+    subtitle ? React.createElement('div', {
+      style: {
+        fontSize: '28px',
+        fontFamily: s.fontFamily,
+        color: s.secondaryTextColor,
+        textAlign: 'center' as const,
+        lineHeight: 1.4,
+        maxWidth: '800px',
+      },
+    }, subtitle) : null,
+  )
 
   return React.createElement('div', {
     style: {
@@ -61,26 +167,199 @@ function renderOgTemplate(
       alignItems: 'center',
       width: '100%',
       height: '100%',
-      backgroundColor: bgColor,
+      background: s.background,
       padding: '80px',
     },
+  }, textContent)
+}
+
+// ========================================
+// Layout: Left-Aligned (Notion Minimal, Linear Dark)
+// ========================================
+
+function renderLeftAligned(project: Project, s: ResolvedOgStyles) {
+  const subtitle = project.ai_headline || project.description || ''
+
+  // Left text block
+  const textBlock = React.createElement('div', {
+    style: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      justifyContent: 'center',
+      flex: 1,
+    },
   },
     React.createElement('div', {
       style: {
-        fontSize: '64px',
+        fontSize: '52px',
+        fontWeight: s.fontWeight,
+        fontFamily: s.fontFamily,
+        color: s.textColor,
+        lineHeight: 1.2,
+        marginBottom: subtitle ? '16px' : '0',
+      },
+    }, project.name),
+    subtitle ? React.createElement('div', {
+      style: {
+        fontSize: '24px',
+        fontFamily: s.fontFamily,
+        color: s.secondaryTextColor,
+        lineHeight: 1.5,
+        maxWidth: '600px',
+      },
+    }, subtitle) : null,
+  )
+
+  // Right accent element
+  const accentElement = s.accentColor ? React.createElement('div', {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '120px',
+      height: '120px',
+      borderRadius: '24px',
+      backgroundColor: s.accentColor,
+      marginLeft: '60px',
+      flexShrink: 0,
+    },
+  },
+    React.createElement('div', {
+      style: {
+        fontSize: '48px',
         fontWeight: 700,
-        color: textColor,
+        color: '#FFFFFF',
+        fontFamily: s.fontFamily,
+      },
+    }, project.name.charAt(0).toUpperCase()),
+  ) : null
+
+  return React.createElement('div', {
+    style: {
+      display: 'flex',
+      flexDirection: 'row' as const,
+      alignItems: 'center',
+      width: '100%',
+      height: '100%',
+      background: s.background,
+      padding: '80px',
+    },
+  }, textBlock, accentElement)
+}
+
+// ========================================
+// Layout: Centered Large Text (Vercel Sharp)
+// ========================================
+
+function renderCenteredLargeText(project: Project, s: ResolvedOgStyles) {
+  return React.createElement('div', {
+    style: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%',
+      background: s.background,
+      padding: '80px',
+    },
+  },
+    React.createElement('div', {
+      style: {
+        fontSize: '96px',
+        fontWeight: s.fontWeight,
+        fontFamily: s.fontFamily,
+        color: s.textColor,
         textAlign: 'center' as const,
-        marginBottom: '24px',
+        lineHeight: 1.1,
+        letterSpacing: '-2px',
       },
     }, project.name),
+  )
+}
+
+// ========================================
+// Layout: Grid Balanced (Figma Clean)
+// ========================================
+
+function renderGridBalanced(project: Project, s: ResolvedOgStyles) {
+  const subtitle = project.ai_headline || project.description || ''
+
+  // Left: Text content
+  const leftColumn = React.createElement('div', {
+    style: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      justifyContent: 'center',
+      flex: 1,
+      paddingRight: '40px',
+    },
+  },
     React.createElement('div', {
       style: {
-        fontSize: '32px',
-        color: textColor,
-        opacity: 0.9,
-        textAlign: 'center' as const,
+        fontSize: '48px',
+        fontWeight: s.fontWeight || 400,
+        fontFamily: s.fontFamily,
+        color: s.textColor,
+        lineHeight: 1.25,
+        marginBottom: subtitle ? '16px' : '0',
+      },
+    }, project.name),
+    subtitle ? React.createElement('div', {
+      style: {
+        fontSize: '22px',
+        fontFamily: s.fontFamily,
+        color: s.secondaryTextColor,
+        lineHeight: 1.5,
+      },
+    }, subtitle) : null,
+  )
+
+  // Right: Decorative card stack
+  const rightColumn = React.createElement('div', {
+    style: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '320px',
+      flexShrink: 0,
+      gap: '12px',
+    },
+  },
+    // Decorative cards
+    React.createElement('div', {
+      style: {
+        display: 'flex',
+        width: '200px',
+        height: '200px',
+        borderRadius: '20px',
+        backgroundColor: s.accentColor || '#E5E7EB',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
       },
-    }, project.ai_headline || project.description || '')
+    },
+      React.createElement('div', {
+        style: {
+          fontSize: '72px',
+          fontWeight: 700,
+          color: '#FFFFFF',
+          fontFamily: s.fontFamily,
+        },
+      }, project.name.charAt(0).toUpperCase()),
+    ),
   )
+
+  return React.createElement('div', {
+    style: {
+      display: 'flex',
+      flexDirection: 'row' as const,
+      alignItems: 'center',
+      width: '100%',
+      height: '100%',
+      background: s.background,
+      padding: '80px',
+    },
+  }, leftColumn, rightColumn)
 }
diff --git a/lib/assets/pipeline.ts b/lib/assets/pipeline.ts
index 7bf5873..8fdefba 100644
--- a/lib/assets/pipeline.ts
+++ b/lib/assets/pipeline.ts
@@ -60,7 +60,7 @@ export async function runAssetPipeline(input: PipelineInput) {
   // 경량 작업과 병렬로 시작하되, 이미지 작업끼리는 순차 실행
   const imageTask = (async () => {
     if (isWeb) {
-      results.favicons = await generateFavicons({ iconSource, project, stylePreset })
+      results.favicons = await generateFavicons({ iconSource, project, brandProfile, stylePreset })
       results.ogImages = await generateOgImages({ project, brandProfile, stylePreset })
     }
 
@@ -68,12 +68,14 @@ export async function runAssetPipeline(input: PipelineInput) {
       results.appIcons = await generateAppIcons({
         iconSource,
         project,
+        brandProfile,
         stylePreset,
         mobileTarget: project.mobile_target,
       })
       results.splashScreens = await generateSplashScreens({
         iconSource,
         project,
+        brandProfile,
         stylePreset,
         mobileTarget: project.mobile_target,
       })
diff --git a/lib/assets/splash-screen.ts b/lib/assets/splash-screen.ts
index 518293f..165e4c4 100644
--- a/lib/assets/splash-screen.ts
+++ b/lib/assets/splash-screen.ts
@@ -2,31 +2,54 @@ import sharp from 'sharp'
 import { SPLASH_SIZES } from './constants'
 import { renderIconToBuffer, type IconSource } from '@/lib/utils/image'
 import { hexToRgb } from '@/lib/utils/colors'
-import type { Project, StylePreset, MobileTarget } from '@/types/database'
+import { resolveSplashStyles } from './style-resolver'
+import type { Project, StylePreset, BrandProfile, MobileTarget } from '@/types/database'
 
 interface SplashInput {
   iconSource: IconSource
   project: Project
+  brandProfile: BrandProfile | null
   stylePreset: StylePreset
   mobileTarget: MobileTarget | null
 }
 
 export async function generateSplashScreens(input: SplashInput) {
-  const { iconSource, project, stylePreset, mobileTarget } = input
+  const { iconSource, project, brandProfile, stylePreset, mobileTarget } = input
   const results: Record<string, Buffer> = {}
 
   const iconSize = 200
-  const iconBuffer = await renderIconToBuffer(iconSource, iconSize, project, stylePreset)
-  const bgColorHex = project.primary_color_override || '#FFFFFF'
-  const bgRgb = hexToRgb(bgColorHex)
+  const iconBuffer = await renderIconToBuffer(iconSource, iconSize, project, stylePreset, brandProfile)
+  const resolved = resolveSplashStyles(stylePreset, brandProfile, project)
 
   for (const { width, height, name } of SPLASH_SIZES) {
     if (mobileTarget === 'android' && (name.startsWith('iphone') || name.startsWith('ipad'))) continue
     if (mobileTarget === 'ios' && name.startsWith('android')) continue
 
-    results[`splash/${name}.png`] = await sharp({
-      create: { width, height, channels: 4, background: { ...bgRgb, alpha: 255 } },
-    })
+    let bgBuffer: Buffer
+
+    if (resolved.background.type === 'gradient' && resolved.background.color2) {
+      // Create gradient background via SVG
+      const gradientSvg = Buffer.from(
+        `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stop-color="${resolved.background.color1}"/>
+              <stop offset="100%" stop-color="${resolved.background.color2}"/>
+            </linearGradient>
+          </defs>
+          <rect width="${width}" height="${height}" fill="url(#bg)"/>
+        </svg>`
+      )
+      bgBuffer = await sharp(gradientSvg).png().toBuffer()
+    } else {
+      // Solid background
+      const bgRgb = hexToRgb(resolved.background.color1)
+      bgBuffer = await sharp({
+        create: { width, height, channels: 4, background: { ...bgRgb, alpha: 255 } },
+      }).png().toBuffer()
+    }
+
+    results[`splash/${name}.png`] = await sharp(bgBuffer)
       .composite([{ input: iconBuffer, gravity: 'centre' }])
       .png()
       .toBuffer()
diff --git a/lib/assets/style-resolver.ts b/lib/assets/style-resolver.ts
new file mode 100644
index 0000000..868327b
--- /dev/null
+++ b/lib/assets/style-resolver.ts
@@ -0,0 +1,361 @@
+import { isLightColor, darkenHex, lightenHex, hexToRgba, getContrastColor } from '@/lib/utils/colors'
+import type { StylePreset, BrandProfile, Project } from '@/types/database'
+
+// ========================================
+// Resolved Types
+// ========================================
+
+export type OgLayout = 'centered' | 'left-aligned' | 'centered-large-text' | 'grid-balanced'
+
+export interface ResolvedOgStyles {
+  layout: OgLayout
+  background: string  // CSS background value (color or linear-gradient)
+  isDark: boolean
+  textColor: string
+  secondaryTextColor: string
+  fontFamily: string
+  fontWeight: number
+  accentColor: string | null  // decorative accent element color
+  glassOverlay: boolean       // glassmorphism simulation
+  hardShadow: boolean         // duolingo-style hard shadow on text container
+}
+
+export interface ResolvedIconStyles {
+  cornerRadius: number
+  shadow: {
+    svgFilter: string | null       // SVG <filter> element string
+    svgFilterId: string | null     // filter id for referencing
+  }
+  background: {
+    type: 'solid' | 'gradient' | 'dark'
+    fill: string         // SVG fill value (color or 'url(#bg-gradient)')
+    defs: string | null  // SVG <defs> for gradients
+  }
+  textColor: string
+}
+
+export interface ResolvedSplashStyles {
+  background: {
+    type: 'solid' | 'gradient'
+    color1: string
+    color2: string | null
+  }
+}
+
+// ========================================
+// OG Styles Resolver
+// ========================================
+
+export function resolveOgStyles(
+  preset: StylePreset,
+  brandProfile: BrandProfile | null,
+  project: Project,
+): ResolvedOgStyles {
+  const primaryColor = project.primary_color_override || brandProfile?.primary_color || '#6366F1'
+  const secondaryColor = brandProfile?.secondary_colors?.[0] || lightenHex(primaryColor, 20)
+
+  // Slug-based dispatch for known presets
+  switch (preset.slug) {
+    case 'notion-minimal':
+      return {
+        layout: 'left-aligned',
+        background: '#FFFFFF',
+        isDark: false,
+        textColor: '#1A1A1A',
+        secondaryTextColor: '#6B7280',
+        fontFamily: 'Inter',
+        fontWeight: 500,
+        accentColor: primaryColor,
+        glassOverlay: false,
+        hardShadow: false,
+      }
+
+    case 'airbnb-3d':
+      return {
+        layout: 'centered',
+        background: `linear-gradient(135deg, ${lightenHex(primaryColor, 30)} 0%, ${lightenHex(primaryColor, 15)} 100%)`,
+        isDark: false,
+        textColor: darkenHex(primaryColor, 35),
+        secondaryTextColor: darkenHex(primaryColor, 20),
+        fontFamily: 'Plus Jakarta Sans',
+        fontWeight: 700,
+        accentColor: primaryColor,
+        glassOverlay: false,
+        hardShadow: false,
+      }
+
+    case 'stripe-gradient':
+      return {
+        layout: 'centered',
+        background: `linear-gradient(135deg, #0A0A1A 0%, ${darkenHex(primaryColor, 30)} 50%, #0A0A1A 100%)`,
+        isDark: true,
+        textColor: '#FFFFFF',
+        secondaryTextColor: 'rgba(255,255,255,0.7)',
+        fontFamily: 'Inter',
+        fontWeight: 600,
+        accentColor: primaryColor,
+        glassOverlay: false,
+        hardShadow: false,
+      }
+
+    case 'linear-dark':
+      return {
+        layout: 'left-aligned',
+        background: `linear-gradient(160deg, #0A0A0A 0%, #141420 100%)`,
+        isDark: true,
+        textColor: '#FFFFFF',
+        secondaryTextColor: 'rgba(255,255,255,0.5)',
+        fontFamily: 'Inter',
+        fontWeight: 500,
+        accentColor: primaryColor,
+        glassOverlay: false,
+        hardShadow: false,
+      }
+
+    case 'vercel-sharp': {
+      const useDark = !isLightColor(primaryColor)
+      return {
+        layout: 'centered-large-text',
+        background: useDark ? '#000000' : '#FFFFFF',
+        isDark: useDark,
+        textColor: useDark ? '#FFFFFF' : '#000000',
+        secondaryTextColor: useDark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)',
+        fontFamily: 'Geist',
+        fontWeight: 700,
+        accentColor: null,
+        glassOverlay: false,
+        hardShadow: false,
+      }
+    }
+
+    case 'glassmorphism':
+      return {
+        layout: 'centered',
+        background: `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`,
+        isDark: !isLightColor(primaryColor),
+        textColor: '#FFFFFF',
+        secondaryTextColor: 'rgba(255,255,255,0.8)',
+        fontFamily: 'Inter',
+        fontWeight: 600,
+        accentColor: null,
+        glassOverlay: true,
+        hardShadow: false,
+      }
+
+    case 'duolingo-playful':
+      return {
+        layout: 'centered',
+        background: primaryColor,
+        isDark: !isLightColor(primaryColor),
+        textColor: getContrastColor(primaryColor),
+        secondaryTextColor: hexToRgba(getContrastColor(primaryColor), 0.8),
+        fontFamily: 'Nunito',
+        fontWeight: 800,
+        accentColor: null,
+        glassOverlay: false,
+        hardShadow: true,
+      }
+
+    case 'figma-clean':
+      return {
+        layout: 'grid-balanced',
+        background: '#F5F5F5',
+        isDark: false,
+        textColor: '#1A1A1A',
+        secondaryTextColor: '#6B7280',
+        fontFamily: 'Inter',
+        fontWeight: 400,
+        accentColor: primaryColor,
+        glassOverlay: false,
+        hardShadow: false,
+      }
+
+    default:
+      return resolveOgStylesByKeyword(preset, primaryColor, secondaryColor)
+  }
+}
+
+function resolveOgStylesByKeyword(
+  preset: StylePreset,
+  primaryColor: string,
+  secondaryColor: string,
+): ResolvedOgStyles {
+  const bg = preset.og_background?.toLowerCase() || ''
+  const layout = preset.og_layout?.toLowerCase() || ''
+
+  const isDark = bg.includes('dark') || bg.includes('black') || bg.includes('#0a')
+  const resolvedLayout: OgLayout =
+    layout.includes('left') ? 'left-aligned' :
+    layout.includes('large text') ? 'centered-large-text' :
+    layout.includes('grid') || layout.includes('balanced') ? 'grid-balanced' :
+    'centered'
+
+  let background: string
+  if (isDark) {
+    background = `linear-gradient(135deg, #0A0A0A 0%, ${darkenHex(primaryColor, 30)} 100%)`
+  } else if (bg.includes('gradient')) {
+    background = `linear-gradient(135deg, ${lightenHex(primaryColor, 25)} 0%, ${secondaryColor} 100%)`
+  } else if (bg.includes('gray') || bg.includes('#f5f5f5')) {
+    background = '#F5F5F5'
+  } else if (bg.includes('white') || bg.includes('#ffffff')) {
+    background = '#FFFFFF'
+  } else {
+    background = primaryColor
+  }
+
+  const { fontFamily, fontWeight } = parseTypography(preset.og_typography)
+
+  return {
+    layout: resolvedLayout,
+    background,
+    isDark,
+    textColor: isDark ? '#FFFFFF' : '#1A1A1A',
+    secondaryTextColor: isDark ? 'rgba(255,255,255,0.6)' : '#6B7280',
+    fontFamily,
+    fontWeight,
+    accentColor: primaryColor,
+    glassOverlay: bg.includes('blur') || bg.includes('glass'),
+    hardShadow: false,
+  }
+}
+
+function parseTypography(ogTypography: string | null): { fontFamily: string; fontWeight: number } {
+  if (!ogTypography) return { fontFamily: 'Inter', fontWeight: 700 }
+
+  const parts = ogTypography.split(',').map(s => s.trim())
+  const fontFamily = parts[0] || 'Inter'
+  const weightStr = (parts[1] || 'Bold').toLowerCase()
+
+  const weightMap: Record<string, number> = {
+    'regular': 400, 'medium': 500, 'semibold': 600, 'semi bold': 600,
+    'bold': 700, 'extra bold': 800, 'extrabold': 800,
+  }
+
+  return { fontFamily, fontWeight: weightMap[weightStr] || 700 }
+}
+
+// ========================================
+// Icon Styles Resolver
+// ========================================
+
+export function resolveIconStyles(
+  preset: StylePreset,
+  brandProfile: BrandProfile | null,
+  project: Project,
+): ResolvedIconStyles {
+  const primaryColor = project.primary_color_override || brandProfile?.primary_color || '#6366F1'
+  const secondaryColor = brandProfile?.secondary_colors?.[0] || lightenHex(primaryColor, 15)
+
+  const shadow = resolveShadow(preset.shadow_style, primaryColor)
+  const background = resolveIconBackground(preset.color_mode, primaryColor, secondaryColor)
+  const textColor = background.type === 'dark' ? primaryColor : getContrastColor(primaryColor)
+
+  return {
+    cornerRadius: preset.corner_radius,
+    shadow,
+    background,
+    textColor,
+  }
+}
+
+function resolveShadow(
+  shadowStyle: string | null,
+  primaryColor: string,
+): ResolvedIconStyles['shadow'] {
+  if (!shadowStyle || shadowStyle === 'None') {
+    return { svgFilter: null, svgFilterId: null }
+  }
+
+  const id = 'icon-shadow'
+  const s = shadowStyle.toLowerCase()
+
+  let filter: string
+  if (s.includes('soft drop') || s.includes('soft shadow')) {
+    filter = `<filter id="${id}" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="rgba(0,0,0,0.15)" flood-opacity="1"/></filter>`
+  } else if (s.includes('colored glow') || s.includes('neon')) {
+    filter = `<filter id="${id}" x="-30%" y="-30%" width="160%" height="160%"><feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="${primaryColor}" flood-opacity="0.4"/></filter>`
+  } else if (s.includes('hard')) {
+    filter = `<filter id="${id}" x="-10%" y="-10%" width="130%" height="130%"><feDropShadow dx="3" dy="3" stdDeviation="0" flood-color="rgba(0,0,0,0.25)" flood-opacity="1"/></filter>`
+  } else if (s.includes('glass') || s.includes('blur')) {
+    filter = `<filter id="${id}" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="rgba(0,0,0,0.1)" flood-opacity="1"/></filter>`
+  } else if (s.includes('minimal') || s.includes('subtle elevation')) {
+    filter = `<filter id="${id}" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.08)" flood-opacity="1"/></filter>`
+  } else {
+    return { svgFilter: null, svgFilterId: null }
+  }
+
+  return { svgFilter: filter, svgFilterId: id }
+}
+
+function resolveIconBackground(
+  colorMode: string | null,
+  primaryColor: string,
+  secondaryColor: string,
+): ResolvedIconStyles['background'] {
+  if (!colorMode) {
+    return { type: 'solid', fill: primaryColor, defs: null }
+  }
+
+  const cm = colorMode.toLowerCase()
+
+  if (cm.includes('dark') || cm.includes('accent')) {
+    return { type: 'dark', fill: '#0A0A0A', defs: null }
+  }
+
+  if (cm.includes('gradient') || cm.includes('translucent')) {
+    const gradientId = 'bg-gradient'
+    const defs = `<linearGradient id="${gradientId}" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="${primaryColor}"/><stop offset="100%" stop-color="${secondaryColor}"/></linearGradient>`
+    return { type: 'gradient', fill: `url(#${gradientId})`, defs }
+  }
+
+  if (cm.includes('pure monochrome')) {
+    const color = isLightColor(primaryColor) ? '#FFFFFF' : '#000000'
+    return { type: 'solid', fill: color, defs: null }
+  }
+
+  // 'Monochrome', 'Bright solid', 'Clean with accent', default
+  return { type: 'solid', fill: primaryColor, defs: null }
+}
+
+// ========================================
+// Splash Styles Resolver
+// ========================================
+
+export function resolveSplashStyles(
+  preset: StylePreset,
+  brandProfile: BrandProfile | null,
+  project: Project,
+): ResolvedSplashStyles {
+  const primaryColor = project.primary_color_override || brandProfile?.primary_color || '#FFFFFF'
+  const bg = preset.og_background?.toLowerCase() || ''
+
+  if (bg.includes('dark') || bg.includes('black') || bg.includes('#0a')) {
+    return {
+      background: { type: 'gradient', color1: '#0A0A0A', color2: darkenHex(primaryColor, 30) },
+    }
+  }
+
+  if (bg.includes('gradient') || bg.includes('blur')) {
+    const secondaryColor = brandProfile?.secondary_colors?.[0] || lightenHex(primaryColor, 20)
+    return {
+      background: { type: 'gradient', color1: primaryColor, color2: secondaryColor },
+    }
+  }
+
+  if (bg.includes('bright') || bg.includes('solid color')) {
+    return {
+      background: { type: 'solid', color1: primaryColor, color2: null },
+    }
+  }
+
+  if (bg.includes('gray') || bg.includes('#f5f5f5')) {
+    return {
+      background: { type: 'solid', color1: '#F5F5F5', color2: null },
+    }
+  }
+
+  // white or default
+  return {
+    background: { type: 'solid', color1: '#FFFFFF', color2: null },
+  }
+}
diff --git a/lib/utils/colors.ts b/lib/utils/colors.ts
index aa772bf..72a6fa4 100644
--- a/lib/utils/colors.ts
+++ b/lib/utils/colors.ts
@@ -16,3 +16,57 @@ export function isLightColor(hex: string): boolean {
 export function getContrastColor(hex: string): string {
   return isLightColor(hex) ? '#000000' : '#FFFFFF'
 }
+
+export function hexToHsl(hex: string): { h: number; s: number; l: number } {
+  const { r, g, b } = hexToRgb(hex)
+  const rn = r / 255
+  const gn = g / 255
+  const bn = b / 255
+  const max = Math.max(rn, gn, bn)
+  const min = Math.min(rn, gn, bn)
+  const l = (max + min) / 2
+  if (max === min) return { h: 0, s: 0, l }
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+  let h = 0
+  if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6
+  else if (max === gn) h = ((bn - rn) / d + 2) / 6
+  else h = ((rn - gn) / d + 4) / 6
+  return { h, s, l }
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  const hue2rgb = (p: number, q: number, t: number) => {
+    if (t < 0) t += 1
+    if (t > 1) t -= 1
+    if (t < 1 / 6) return p + (q - p) * 6 * t
+    if (t < 1 / 2) return q
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+    return p
+  }
+  if (s === 0) {
+    const v = Math.round(l * 255)
+    return `#${v.toString(16).padStart(2, '0').repeat(3)}`
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+  const p = 2 * l - q
+  const r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255)
+  const g = Math.round(hue2rgb(p, q, h) * 255)
+  const b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255)
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+}
+
+export function darkenHex(hex: string, percent: number): string {
+  const { h, s, l } = hexToHsl(hex)
+  return hslToHex(h, s, Math.max(0, l - percent / 100))
+}
+
+export function lightenHex(hex: string, percent: number): string {
+  const { h, s, l } = hexToHsl(hex)
+  return hslToHex(h, s, Math.min(1, l + percent / 100))
+}
+
+export function hexToRgba(hex: string, alpha: number): string {
+  const { r, g, b } = hexToRgb(hex)
+  return `rgba(${r},${g},${b},${alpha})`
+}
diff --git a/lib/utils/image.ts b/lib/utils/image.ts
index 8872075..8018259 100644
--- a/lib/utils/image.ts
+++ b/lib/utils/image.ts
@@ -1,5 +1,7 @@
 import sharp from 'sharp'
-import type { Project, StylePreset } from '@/types/database'
+import type { Project, StylePreset, BrandProfile } from '@/types/database'
+import { resolveIconStyles, type ResolvedIconStyles } from '@/lib/assets/style-resolver'
+import { getContrastColor } from '@/lib/utils/colors'
 
 export interface IconSource {
   type: 'text' | 'svg' | 'image'
@@ -11,11 +13,30 @@ export function generateTextSVG(
   text: string,
   bgColor: string,
   textColor: string,
-  cornerRadius: number
+  cornerRadius: number,
+  resolved?: ResolvedIconStyles,
 ): string {
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  if (!resolved) {
+    // Legacy path (no resolved styles)
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <rect width="100" height="100" rx="${cornerRadius}" fill="${bgColor}" />
   <text x="50" y="50" text-anchor="middle" dominant-baseline="central" font-family="sans-serif" font-size="${text.length > 1 ? 36 : 50}" font-weight="bold" fill="${textColor}">${text}</text>
+</svg>`
+  }
+
+  const defs: string[] = []
+  if (resolved.background.defs) defs.push(resolved.background.defs)
+  if (resolved.shadow.svgFilter) defs.push(resolved.shadow.svgFilter)
+
+  const defsStr = defs.length > 0 ? `<defs>${defs.join('')}</defs>` : ''
+  const filterAttr = resolved.shadow.svgFilterId ? ` filter="url(#${resolved.shadow.svgFilterId})"` : ''
+  const fill = resolved.background.fill
+  const tColor = resolved.textColor
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  ${defsStr}
+  <rect width="100" height="100" rx="${cornerRadius}" fill="${fill}"${filterAttr} />
+  <text x="50" y="50" text-anchor="middle" dominant-baseline="central" font-family="sans-serif" font-size="${text.length > 1 ? 36 : 50}" font-weight="bold" fill="${tColor}">${text}</text>
 </svg>`
 }
 
@@ -23,13 +44,18 @@ export async function renderIconToBuffer(
   iconSource: IconSource,
   size: number,
   project: Project,
-  stylePreset: StylePreset
+  stylePreset: StylePreset,
+  brandProfile?: BrandProfile | null,
 ): Promise<Buffer> {
-  const color = project.primary_color_override || '#000000'
-  const radius = stylePreset.corner_radius
+  const resolved = resolveIconStyles(stylePreset, brandProfile || null, project)
+  const color = project.primary_color_override || brandProfile?.primary_color || '#000000'
+  const radius = resolved.cornerRadius
 
   if (iconSource.type === 'text') {
-    const svg = generateTextSVG(iconSource.value!, color, '#FFFFFF', radius)
+    const textColor = resolved.background.type === 'dark'
+      ? resolved.textColor
+      : getContrastColor(color)
+    const svg = generateTextSVG(iconSource.value!, color, textColor, radius, resolved)
     return sharp(Buffer.from(svg))
       .resize(size, size)
       .png()
@@ -43,9 +69,23 @@ export async function renderIconToBuffer(
       .toBuffer()
   }
 
-  // image type (AI generated)
-  return sharp(iconSource.buffer!)
+  // image type (AI generated) - apply corner radius masking
+  const resized = await sharp(iconSource.buffer!)
     .resize(size, size, { fit: 'cover' })
     .png()
     .toBuffer()
+
+  if (radius > 0) {
+    // Scale corner radius proportionally (base 100 viewBox → target size)
+    const scaledRadius = Math.round((radius / 100) * size)
+    const maskSvg = Buffer.from(
+      `<svg width="${size}" height="${size}"><rect width="${size}" height="${size}" rx="${scaledRadius}" fill="white"/></svg>`
+    )
+    return sharp(resized)
+      .composite([{ input: maskSvg, blend: 'dest-in' }])
+      .png()
+      .toBuffer()
+  }
+
+  return resized
 }

From fb24e754f0f88643f5ca9304f90c3a2dde47c919 Mon Sep 17 00:00:00 2001
From: Younggun Park <ygpark0922@gmail.com>
Date: Mon, 16 Feb 2026 16:40:30 +0900
Subject: [PATCH 2/3] fix: resolve lint errors for CI (unused imports, type
 imports, declaration order)

- Remove unused imports: Link, redirect, FolderOpen, X
- Use `type` keyword for type-only NextRequest imports
- Move handleClose/handleDismiss declarations before handleKeyDown to fix accessed-before-declared errors
- Remove unused catch binding variable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../projects/[id]/project-detail-client.tsx   |  2 +-
 app/[locale]/(dashboard)/projects/actions.ts  |  1 -
 app/[locale]/(dashboard)/projects/page.tsx    |  2 +-
 app/api/email/route.ts                        |  2 +-
 app/api/feedback/route.ts                     |  2 +-
 app/api/notifications/route.ts                |  2 +-
 components/feedback/feedback-widget.tsx       | 24 +++++++++----------
 components/feedback/nps-modal.tsx             | 22 ++++++++---------
 components/ui/cookie-consent.tsx              |  2 +-
 lib/utils/api-client.ts                       |  2 +-
 10 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/app/[locale]/(dashboard)/projects/[id]/project-detail-client.tsx b/app/[locale]/(dashboard)/projects/[id]/project-detail-client.tsx
index 544ac8e..0c3a269 100644
--- a/app/[locale]/(dashboard)/projects/[id]/project-detail-client.tsx
+++ b/app/[locale]/(dashboard)/projects/[id]/project-detail-client.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import { Download, RefreshCw, Loader2, Copy } from 'lucide-react'
 import { toast } from 'sonner'
-import { Link, useRouter } from '@/i18n/navigation'
+import { useRouter } from '@/i18n/navigation'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent } from '@/components/ui/card'
diff --git a/app/[locale]/(dashboard)/projects/actions.ts b/app/[locale]/(dashboard)/projects/actions.ts
index a7f5de4..7ea7a3e 100644
--- a/app/[locale]/(dashboard)/projects/actions.ts
+++ b/app/[locale]/(dashboard)/projects/actions.ts
@@ -1,6 +1,5 @@
 'use server'
 
-import { redirect } from 'next/navigation'
 import { createClient } from '@/lib/supabase/server'
 import type { Project } from '@/types/database'
 
diff --git a/app/[locale]/(dashboard)/projects/page.tsx b/app/[locale]/(dashboard)/projects/page.tsx
index 548a085..094f480 100644
--- a/app/[locale]/(dashboard)/projects/page.tsx
+++ b/app/[locale]/(dashboard)/projects/page.tsx
@@ -3,7 +3,7 @@ import { createClient } from '@/lib/supabase/server'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent } from '@/components/ui/card'
-import { Plus, FolderOpen, ArrowRight, Sparkles } from 'lucide-react'
+import { Plus, ArrowRight, Sparkles } from 'lucide-react'
 import type { ProjectStatus } from '@/types/database'
 
 const STATUS_CONFIG: Record<ProjectStatus, { variant: 'default' | 'success' | 'warning' | 'error'; label: string }> = {
diff --git a/app/api/email/route.ts b/app/api/email/route.ts
index b516054..f956f0c 100644
--- a/app/api/email/route.ts
+++ b/app/api/email/route.ts
@@ -5,7 +5,7 @@
  * This route is protected by an internal API key
  */
 
-import { NextRequest, NextResponse } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 import { sendEmail } from '@/lib/email/client'
 import { WelcomeEmail, ProjectCompleteEmail } from '@/lib/email/templates'
 
diff --git a/app/api/feedback/route.ts b/app/api/feedback/route.ts
index 4d32ae5..43758fd 100644
--- a/app/api/feedback/route.ts
+++ b/app/api/feedback/route.ts
@@ -3,7 +3,7 @@
  * Handles submission of general feedback and NPS responses
  */
 
-import { NextRequest, NextResponse } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 import { createClient } from '@/lib/supabase/server'
 
 interface FeedbackBody {
diff --git a/app/api/notifications/route.ts b/app/api/notifications/route.ts
index d65347c..4621fd4 100644
--- a/app/api/notifications/route.ts
+++ b/app/api/notifications/route.ts
@@ -3,7 +3,7 @@
  * Handles fetching and updating notifications for authenticated users
  */
 
-import { NextRequest, NextResponse } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 import { createClient } from '@/lib/supabase/server'
 import {
   getNotifications,
diff --git a/components/feedback/feedback-widget.tsx b/components/feedback/feedback-widget.tsx
index 0ab759f..e242fad 100644
--- a/components/feedback/feedback-widget.tsx
+++ b/components/feedback/feedback-widget.tsx
@@ -49,6 +49,17 @@ export function FeedbackWidget({
 
   const t = content[locale]
 
+  const handleClose = useCallback(() => {
+    setIsAnimating(false)
+    setTimeout(() => {
+      setIsOpen(false)
+      setSentiment(null)
+      setMessage('')
+      // Return focus to trigger button
+      triggerRef.current?.focus()
+    }, 300)
+  }, [])
+
   // Focus trap handler
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -82,7 +93,7 @@ export function FeedbackWidget({
         }
       }
     },
-    [isOpen]
+    [isOpen, handleClose]
   )
 
   // Add/remove keyboard listener
@@ -104,17 +115,6 @@ export function FeedbackWidget({
     })
   }
 
-  const handleClose = useCallback(() => {
-    setIsAnimating(false)
-    setTimeout(() => {
-      setIsOpen(false)
-      setSentiment(null)
-      setMessage('')
-      // Return focus to trigger button
-      triggerRef.current?.focus()
-    }, 300)
-  }, [])
-
   const handleSubmit = () => {
     if (!sentiment || !message.trim()) return
 
diff --git a/components/feedback/nps-modal.tsx b/components/feedback/nps-modal.tsx
index fb63828..a0173e8 100644
--- a/components/feedback/nps-modal.tsx
+++ b/components/feedback/nps-modal.tsx
@@ -58,6 +58,16 @@ export function NPSModal({
 
   const t = content[locale]
 
+  const handleDismiss = useCallback(() => {
+    setIsAnimating(false)
+    setTimeout(() => {
+      setIsOpen(false)
+      // Restore focus to trigger element
+      triggerRef.current?.focus()
+    }, 300)
+    onDismiss?.()
+  }, [onDismiss])
+
   // Focus trap handler
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -91,7 +101,7 @@ export function NPSModal({
         }
       }
     },
-    [isOpen]
+    [isOpen, handleDismiss]
   )
 
   // Add/remove keyboard listener
@@ -147,16 +157,6 @@ export function NPSModal({
     }, 2000)
   }
 
-  const handleDismiss = useCallback(() => {
-    setIsAnimating(false)
-    setTimeout(() => {
-      setIsOpen(false)
-      // Restore focus to trigger element
-      triggerRef.current?.focus()
-    }, 300)
-    onDismiss?.()
-  }, [onDismiss])
-
   const getScoreColor = (score: number, isSelected: boolean) => {
     if (!isSelected)
       return 'bg-white/5 border-white/10 text-white/40 hover:bg-white/10 hover:text-white/60'
diff --git a/components/ui/cookie-consent.tsx b/components/ui/cookie-consent.tsx
index a51a4bf..e16620e 100644
--- a/components/ui/cookie-consent.tsx
+++ b/components/ui/cookie-consent.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Cookie, X, Shield, ChevronRight } from 'lucide-react'
+import { Cookie, Shield, ChevronRight } from 'lucide-react'
 import { Link } from '@/i18n/navigation'
 
 interface CookieConsentProps {
diff --git a/lib/utils/api-client.ts b/lib/utils/api-client.ts
index 40e7ad4..dab7f75 100644
--- a/lib/utils/api-client.ts
+++ b/lib/utils/api-client.ts
@@ -60,7 +60,7 @@ export async function apiClient<T = unknown>(
     }
 
     return { data: data as T }
-  } catch (error) {
+  } catch {
     // 네트워크 에러
     return {
       error: {

From 3c797b120ed65eea5a5473e948d22fbd361fe3e4 Mon Sep 17 00:00:00 2001
From: Younggun Park <ygpark0922@gmail.com>
Date: Mon, 16 Feb 2026 16:47:13 +0900
Subject: [PATCH 3/3] fix: add force-dynamic to dashboard layout to prevent SSG
 build failure

Dashboard pages call createClient() for auth, which requires Supabase
env vars unavailable during static generation at build time.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/[locale]/(dashboard)/layout.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/[locale]/(dashboard)/layout.tsx b/app/[locale]/(dashboard)/layout.tsx
index 72f7331..5ee9638 100644
--- a/app/[locale]/(dashboard)/layout.tsx
+++ b/app/[locale]/(dashboard)/layout.tsx
@@ -1,3 +1,5 @@
+export const dynamic = 'force-dynamic'
+
 import AuthGuard from '@/components/layout/auth-guard'
 import { Sidebar } from '@/components/layout/sidebar'
 import { MobileNav } from '@/components/layout/mobile-nav'