Skip to content

Commit ff9d8ec

Browse files
Hys-LeeHys-Lee
authored
외부 폰트 -suit variable 적용 (#15)
* feat: 로컬 폰트 suit_variable 적용 next실행과 storybook실행에 따로 설정이 필요해서 각각 했습니다. figma에서 사용되는 font-['SUIT_Variable'] 형식을 사용하기 위해 tailwind.config.ts를 생성했습니다. * feat: 디자인 토큰 primitive도 추가
1 parent 2939e86 commit ff9d8ec

File tree

8 files changed

+147
-26
lines changed

8 files changed

+147
-26
lines changed

‎.storybook/preview.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Preview } from "@storybook/react";
22
import "../app/globals.css";
3+
import "./storybook-fonts.css";
34
import {
45
Title,
56
Subtitle,

‎.storybook/storybook-fonts.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@font-face {
2+
font-family: "SUIT Variable";
3+
src: url("../public/fonts/SUIT-Variable.woff2");
4+
}

‎app/globals.css‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
1-
@import "./tokens.css";
21
@import "tailwindcss";
2+
@config "../tailwind.config.ts";
3+
@import "./tokens.css";
34

45
:root {
56
--background: #ffffff;
67
--foreground: #171717;
78
}
89

10+
/* @font-face {
11+
font-family: "SUIT Variable";
12+
src: url("../public/fonts//SUIT-Variable.woff2");
13+
} */
14+
915
@theme inline {
1016
--color-background: var(--background);
1117
--color-foreground: var(--foreground);
12-
--font-sans: var(--font-geist-sans);
13-
--font-mono: var(--font-geist-mono);
18+
--font-sans: [var(--font-suit-variable), var(--font-geist-sans)];
19+
--font-mono: [var(--font-suit-variable), var(--font-geist-mono)];
1420
}
1521

1622
@media (prefers-color-scheme: dark) {
@@ -23,5 +29,6 @@
2329
body {
2430
background: var(--background);
2531
color: var(--foreground);
26-
font-family: Arial, Helvetica, sans-serif;
32+
33+
font-family: var(--font-suit-varialbe), Arial, Helvetica, sans-serif;
2734
}

‎app/layout.tsx‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
2+
// import { Geist, Geist_Mono } from "next/font/google";
3+
import localFont from "next/font/local";
34
import "./globals.css";
45

5-
const geistSans = Geist({
6-
variable: "--font-geist-sans",
7-
subsets: ["latin"],
8-
});
6+
// const geistSans = Geist({
7+
// variable: "--font-geist-sans",
8+
// subsets: ["latin"],
9+
// });
10+
11+
// const geistMono = Geist_Mono({
12+
// variable: "--font-geist-mono",
13+
// subsets: ["latin"],
14+
// });
915

10-
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
12-
subsets: ["latin"],
16+
export const customFont = localFont({
17+
src: "../public/fonts/SUIT-Variable.woff2",
18+
display: "swap",
19+
variable: "--font-suit-variable",
1320
});
1421

1522
export const metadata: Metadata = {
@@ -23,12 +30,17 @@ export default function RootLayout({
2330
children: React.ReactNode;
2431
}>) {
2532
return (
26-
<html lang="en">
27-
<body
28-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29-
>
30-
{children}
31-
</body>
33+
<html lang="ko" className={`${customFont.className}`}>
34+
<head>
35+
<link
36+
rel="preload"
37+
href="/fonts/SUIT-Variable.woff2"
38+
as="font"
39+
type="font/woff2" // 폰트 파일 형식에 맞게 (woff, ttf 등)
40+
crossOrigin="anonymous" // 일반적으로 폰트에는 추가하는 것이 좋음
41+
/>
42+
</head>
43+
<body className={`${customFont.variable} antialiased`}>{children}</body>
3244
</html>
3345
);
3446
}

‎app/tokens.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,87 @@
11
@theme {
2+
--color-Color-gray-5: #f7f7f8;
3+
--color-Color-gray-10: #e6e8ea;
4+
--color-Color-gray-20: #cdd1d5;
5+
--color-Color-gray-30: #b1b8be;
6+
--color-Color-gray-40: #8a949e;
7+
--color-Color-gray-50: #6d7882;
8+
--color-Color-gray-60: #58616a;
9+
--color-Color-gray-70: #464c53;
10+
--color-Color-gray-80: #33363d;
11+
--color-Color-gray-90: #1e2124;
12+
--color-Color-gray-95: #111111;
13+
--color-Color-common-black: #000000;
14+
--color-Color-common-white: #ffffff;
15+
--color-Color-red-5: #fde9e8;
16+
--color-Color-red-10: #fbd3d0;
17+
--color-Color-red-20: #f8b9b5;
18+
--color-Color-red-30: #f2847d;
19+
--color-Color-red-40: #ee584f;
20+
--color-Color-red-50: #ea3429;
21+
--color-Color-red-60: #ce1308;
22+
--color-Color-red-70: #890d06;
23+
--color-Color-red-80: #620904;
24+
--color-Color-red-90: #3b0502;
25+
--color-Color-yellow-5: #fff7e5;
26+
--color-Color-yellow-10: #ffe4ad;
27+
--color-Color-yellow-20: #ffd070;
28+
--color-Color-yellow-30: #ffc247;
29+
--color-Color-yellow-40: #ffb114;
30+
--color-Color-yellow-50: #e39902;
31+
--color-Color-yellow-60: #c08102;
32+
--color-Color-yellow-70: #8b5e04;
33+
--color-Color-yellow-80: #634303;
34+
--color-Color-yellow-90: #4a3202;
35+
--color-Color-green-5: #ebfaee;
36+
--color-Color-green-10: #c2f0cc;
37+
--color-Color-green-20: #85e099;
38+
--color-Color-green-30: #48d166;
39+
--color-Color-green-40: #2bab47;
40+
--color-Color-green-50: #228738;
41+
--color-Color-green-60: #1d722f;
42+
--color-Color-green-70: #196228;
43+
--color-Color-green-80: #13491e;
44+
--color-Color-green-90: #0c3114;
45+
--color-Color-blue-5: #e7f4fe;
46+
--color-Color-blue-10: #b6ddfb;
47+
--color-Color-blue-20: #86c7f9;
48+
--color-Color-blue-30: #55b1f6;
49+
--color-Color-blue-40: #1694f3;
50+
--color-Color-blue-50: #0576cc;
51+
--color-Color-blue-60: #045c9f;
52+
--color-Color-blue-70: #03487c;
53+
--color-Color-blue-80: #023a64;
54+
--color-Color-blue-90: #01233c;
55+
--color-Color-primary-5: #e7e7fd;
56+
--color-Color-primary-10: #dadafc;
57+
--color-Color-primary-20: #c7c8fa;
58+
--color-Color-primary-30: #abacf7;
59+
--color-Color-primary-40: #8b8cf4;
60+
--color-Color-primary-50: #5d5fef;
61+
--color-Color-primary-60: #3033e8;
62+
--color-Color-primary-70: #1719cf;
63+
--color-Color-primary-80: #1214a1;
64+
--color-Color-primary-90: #0a0b5c;
65+
--spacing-Number-0: 0rem;
66+
--spacing-Number-1: 0.062rem;
67+
--spacing-Number-2: 0.125rem;
68+
--spacing-Number-4: 0.25rem;
69+
--spacing-Number-8: 0.5rem;
70+
--spacing-Number-12: 0.75rem;
71+
--spacing-Number-14: 0.875rem;
72+
--spacing-Number-16: 1rem;
73+
--spacing-Number-18: 1.125rem;
74+
--spacing-Number-20: 1.25rem;
75+
--spacing-Number-24: 1.5rem;
76+
--spacing-Number-28: 1.75rem;
77+
--spacing-Number-32: 2rem;
78+
--spacing-Number-40: 2.5rem;
79+
--spacing-Number-48: 3rem;
80+
--spacing-Number-56: 3.5rem;
81+
--spacing-Number-64: 4rem;
82+
--spacing-Number-72: 4.5rem;
83+
--spacing-Number-80: 5rem;
84+
--spacing-Number-999: 62.438rem;
285
--radius-2: 0.125rem;
386
--radius-4: 0.25rem;
487
--radius-8: 0.5rem;

‎public/fonts/SUIT-Variable.woff2‎

611 KB
Binary file not shown.

‎sd-tokens.config.mjs‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,17 @@ StyleDictionary.registerFormat({
4343
format: function ({ dictionary }) {
4444
return [
4545
"@theme {",
46-
...dictionary.allTokens
47-
.filter((prop) => !prop.name.includes("primitive"))
48-
.map((prop) => {
49-
//test
50-
console.log("prop.name, prop.type: ", prop.name, prop.type);
51-
const nameFromPath = prop.path.slice(1).join("-");
52-
46+
...dictionary.allTokens.map((prop) => {
47+
const isPrimitive = prop.name.includes("primitive");
48+
const nameFromPath = prop.path.slice(1).join("-");
49+
50+
if (isPrimitive) {
51+
const middleName = prop.type === "color" ? "Color-" : "";
52+
return ` --${token2TailwindTypeMap?.[prop.type] ?? "non-mapped"}-${middleName}${nameFromPath}: ${prop.value};`;
53+
} else {
5354
return ` --${token2TailwindTypeMap?.[prop.type] ?? "non-mapped"}-${nameFromPath}: ${prop.value};`;
54-
}),
55+
}
56+
}),
5557
"}",
5658
].join("\n");
5759
},

‎tailwind.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// tailwind.config.js
2+
const defaultTheme = require("tailwindcss/defaultTheme");
3+
4+
module.exports = {
5+
theme: {
6+
extend: {
7+
fontFamily: {
8+
SUIT_Variable: [`var(--font-suit-variable)`],
9+
},
10+
},
11+
},
12+
};

0 commit comments

Comments
 (0)