Saffron 디자인 시스템 적용: 브랜드 컬러 + Pretendard 폰트 + 크림 배경

- CSS 변수 기반 brand-50~950 컬러 팔레트 추가 (Tailwind @theme inline) - Pretendard Variable 폰트 로드 및 기본 폰트로 설정 - 라이트모드 배경 #FFFAF5 크림색 적용 (다크모드 기본 유지) - 전체 컴포넌트 orange-* → brand-* 마이그레이션 - 식당 리스트 채널명에 YouTube SVG 아이콘 추가 - 디자인 컨셉 문서 추가 (docs/design-concepts.md) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-11 21:15:45 +09:00
parent ec8330a978
commit 50018c17fa
12 changed files with 177 additions and 60 deletions
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist } from "next/font/google";
+import localFont from "next/font/local";
 import "./globals.css";
 import { Providers } from "./providers";

@@ -8,6 +9,14 @@ const geist = Geist({
  subsets: ["latin"],
 });

+const pretendard = localFont({
+  src: [
+    { path: "../fonts/PretendardVariable.woff2", style: "normal" },
+  ],
+  variable: "--font-pretendard",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
  title: "Tasteby - YouTube Restaurant Map",
  description: "YouTube food channel restaurant map service",
@@ -20,7 +29,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="ko" className="dark:bg-gray-950" suppressHydrationWarning>
-      <body className={`${geist.variable} font-sans antialiased`}>
+      <body className={`${pretendard.variable} ${geist.variable} font-sans antialiased`}>
        <Providers>{children}</Providers>
      </body>
    </html>