prography · Hys-Lee · Jun 13, 2025 · May 21, 2025 · May 21, 2025 · May 22, 2025
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/react";
 import "../app/globals.css";
+import "./storybook-fonts.css";
 import {
   Title,
   Subtitle,

diff --git a/.storybook/storybook-fonts.css b/.storybook/storybook-fonts.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "SUIT Variable";
+  src: url("../public/fonts/SUIT-Variable.woff2");
+}
diff --git a/app/globals.css b/app/globals.css
@@ -1,16 +1,22 @@
-@import "./tokens.css";
 @import "tailwindcss";
+@config "../tailwind.config.ts";
+@import "./tokens.css";
 
 :root {
   --background: #ffffff;
   --foreground: #171717;
 }
 
+/* @font-face {
+  font-family: "SUIT Variable";
+  src: url("../public/fonts//SUIT-Variable.woff2");
+} */
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: [var(--font-suit-variable), var(--font-geist-sans)];
+  --font-mono: [var(--font-suit-variable), var(--font-geist-mono)];
 }
 
 @media (prefers-color-scheme: dark) {
@@ -23,5 +29,6 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+
+  font-family: var(--font-suit-varialbe), Arial, Helvetica, sans-serif;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,15 +1,22 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+// import { Geist, Geist_Mono } from "next/font/google";
+import localFont from "next/font/local";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
+// const geistSans = Geist({
+//   variable: "--font-geist-sans",
+//   subsets: ["latin"],
+// });
+
+// const geistMono = Geist_Mono({
+//   variable: "--font-geist-mono",
+//   subsets: ["latin"],
+// });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+export const customFont = localFont({
+  src: "../public/fonts/SUIT-Variable.woff2",
+  display: "swap",
+  variable: "--font-suit-variable",
 });
 
 export const metadata: Metadata = {
@@ -23,12 +30,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+    <html lang="ko" className={`${customFont.className}`}>
+      <head>
+        <link
+          rel="preload"
+          href="/fonts/SUIT-Variable.woff2"
+          as="font"
+          type="font/woff2" // 폰트 파일 형식에 맞게 (woff, ttf 등)
+          crossOrigin="anonymous" // 일반적으로 폰트에는 추가하는 것이 좋음
+        />
+      </head>
+      <body className={`${customFont.variable} antialiased`}>{children}</body>
     </html>
   );
 }
diff --git a/app/tokens.css b/app/tokens.css
@@ -1,4 +1,87 @@
 @theme {
+  --color-Color-gray-5: #f7f7f8;
+  --color-Color-gray-10: #e6e8ea;
+  --color-Color-gray-20: #cdd1d5;
+  --color-Color-gray-30: #b1b8be;
+  --color-Color-gray-40: #8a949e;
+  --color-Color-gray-50: #6d7882;
+  --color-Color-gray-60: #58616a;
+  --color-Color-gray-70: #464c53;
+  --color-Color-gray-80: #33363d;
+  --color-Color-gray-90: #1e2124;
+  --color-Color-gray-95: #111111;
+  --color-Color-common-black: #000000;
+  --color-Color-common-white: #ffffff;
+  --color-Color-red-5: #fde9e8;
+  --color-Color-red-10: #fbd3d0;
+  --color-Color-red-20: #f8b9b5;
+  --color-Color-red-30: #f2847d;
+  --color-Color-red-40: #ee584f;
+  --color-Color-red-50: #ea3429;
+  --color-Color-red-60: #ce1308;
+  --color-Color-red-70: #890d06;
+  --color-Color-red-80: #620904;
+  --color-Color-red-90: #3b0502;
+  --color-Color-yellow-5: #fff7e5;
+  --color-Color-yellow-10: #ffe4ad;
+  --color-Color-yellow-20: #ffd070;
+  --color-Color-yellow-30: #ffc247;
+  --color-Color-yellow-40: #ffb114;
+  --color-Color-yellow-50: #e39902;
+  --color-Color-yellow-60: #c08102;
+  --color-Color-yellow-70: #8b5e04;
+  --color-Color-yellow-80: #634303;
+  --color-Color-yellow-90: #4a3202;
+  --color-Color-green-5: #ebfaee;
+  --color-Color-green-10: #c2f0cc;
+  --color-Color-green-20: #85e099;
+  --color-Color-green-30: #48d166;
+  --color-Color-green-40: #2bab47;
+  --color-Color-green-50: #228738;
+  --color-Color-green-60: #1d722f;
+  --color-Color-green-70: #196228;
+  --color-Color-green-80: #13491e;
+  --color-Color-green-90: #0c3114;
+  --color-Color-blue-5: #e7f4fe;
+  --color-Color-blue-10: #b6ddfb;
+  --color-Color-blue-20: #86c7f9;
+  --color-Color-blue-30: #55b1f6;
+  --color-Color-blue-40: #1694f3;
+  --color-Color-blue-50: #0576cc;
+  --color-Color-blue-60: #045c9f;
+  --color-Color-blue-70: #03487c;
+  --color-Color-blue-80: #023a64;
+  --color-Color-blue-90: #01233c;
+  --color-Color-primary-5: #e7e7fd;
+  --color-Color-primary-10: #dadafc;
+  --color-Color-primary-20: #c7c8fa;
+  --color-Color-primary-30: #abacf7;
+  --color-Color-primary-40: #8b8cf4;
+  --color-Color-primary-50: #5d5fef;
+  --color-Color-primary-60: #3033e8;
+  --color-Color-primary-70: #1719cf;
+  --color-Color-primary-80: #1214a1;
+  --color-Color-primary-90: #0a0b5c;
+  --spacing-Number-0: 0rem;
+  --spacing-Number-1: 0.062rem;
+  --spacing-Number-2: 0.125rem;
+  --spacing-Number-4: 0.25rem;
+  --spacing-Number-8: 0.5rem;
+  --spacing-Number-12: 0.75rem;
+  --spacing-Number-14: 0.875rem;
+  --spacing-Number-16: 1rem;
+  --spacing-Number-18: 1.125rem;
+  --spacing-Number-20: 1.25rem;
+  --spacing-Number-24: 1.5rem;
+  --spacing-Number-28: 1.75rem;
+  --spacing-Number-32: 2rem;
+  --spacing-Number-40: 2.5rem;
+  --spacing-Number-48: 3rem;
+  --spacing-Number-56: 3.5rem;
+  --spacing-Number-64: 4rem;
+  --spacing-Number-72: 4.5rem;
+  --spacing-Number-80: 5rem;
+  --spacing-Number-999: 62.438rem;
   --radius-2: 0.125rem;
   --radius-4: 0.25rem;
   --radius-8: 0.5rem;

diff --git a/public/fonts/SUIT-Variable.woff2 b/public/fonts/SUIT-Variable.woff2
diff --git a/sd-tokens.config.mjs b/sd-tokens.config.mjs
@@ -43,15 +43,17 @@ StyleDictionary.registerFormat({
   format: function ({ dictionary }) {
     return [
       "@theme {",
-      ...dictionary.allTokens
-        .filter((prop) => !prop.name.includes("primitive"))
-        .map((prop) => {
-          //test
-          console.log("prop.name, prop.type: ", prop.name, prop.type);
-          const nameFromPath = prop.path.slice(1).join("-");
-
+      ...dictionary.allTokens.map((prop) => {
+        const isPrimitive = prop.name.includes("primitive");
+        const nameFromPath = prop.path.slice(1).join("-");
+
+        if (isPrimitive) {
+          const middleName = prop.type === "color" ? "Color-" : "";
+          return `  --${token2TailwindTypeMap?.[prop.type] ?? "non-mapped"}-${middleName}${nameFromPath}: ${prop.value};`;
+        } else {
           return `  --${token2TailwindTypeMap?.[prop.type] ?? "non-mapped"}-${nameFromPath}: ${prop.value};`;
-        }),
+        }
+      }),
       "}",
     ].join("\n");
   },

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,12 @@
+// tailwind.config.js
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+  theme: {
+    extend: {
+      fontFamily: {
+        SUIT_Variable: [`var(--font-suit-variable)`],
+      },
+    },
+  },
+};