Skip to content

Commit 31fb291

Browse files
seung365seung365
authored
Feat: 디자인 토큰 설정 (#59)
* chore: pretendard 폰트 패키지 설치 * feat: pretendard 폰트 설정 추가 * feat: layout에 pretendard 기본으로 적용 * style: color 디자인 토큰 추가 * chore: text 디자인 토큰 추가 * chore: 확장자 수정 * chore: 확장자 수정 * chore: tsconfig.json 수정 * chore: font path 수정 * chore: bacgkround 토큰 네이밍 변경 * style: fontSize 전역으로 설정 * style: fontSize px -> rem으로 변경 * chore: colortheme 사용
1 parent b4e8158 commit 31fb291

File tree

9 files changed

+169
-16
lines changed

9 files changed

+169
-16
lines changed

‎app/layout.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,10 @@
11
import Providers from "@/app/providers";
2+
import { pretendard } from "@/shared/styles/base/font";
23
import type { Metadata } from "next";
3-
import { Geist, Geist_Mono } from "next/font/google";
44
import type { ReactNode } from "react";
55

66
// TODO: 추후 수정
77

8-
const geistSans = Geist({
9-
variable: "--font-geist-sans",
10-
subsets: ["latin"],
11-
});
12-
13-
const geistMono = Geist_Mono({
14-
variable: "--font-geist-mono",
15-
subsets: ["latin"],
16-
});
17-
188
export const metadata: Metadata = {
199
title: "Create Next App",
2010
description: "Generated by create next app",
@@ -26,8 +16,8 @@ export default function RootLayout({
2616
children: ReactNode;
2717
}>) {
2818
return (
29-
<html lang="ko">
30-
<body className={`${geistSans.variable} ${geistMono.variable}`}>
19+
<html lang="ko" className={pretendard.className}>
20+
<body>
3121
<Providers>{children}</Providers>
3222
</body>
3323
</html>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"clsx": "^2.1.1",
2525
"ky": "^1.8.1",
2626
"next": "15.3.5",
27+
"pretendard": "^1.3.9",
2728
"react": "^19.0.0",
2829
"react-dom": "^19.0.0"
2930
},

‎pnpm-lock.yaml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎shared/styles/base/font.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import localFont from "next/font/local";
2+
3+
export const pretendard = localFont({
4+
src: [
5+
{
6+
path: "../../../node_modules/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2",
7+
weight: "400",
8+
style: "normal",
9+
},
10+
{
11+
path: "../../../node_modules/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2",
12+
weight: "500",
13+
style: "normal",
14+
},
15+
{
16+
path: "../../../node_modules/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2",
17+
weight: "600",
18+
style: "normal",
19+
},
20+
{
21+
path: "../../../node_modules/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2",
22+
weight: "700",
23+
style: "normal",
24+
},
25+
],
26+
variable: "--font-pretendard",
27+
display: "swap",
28+
});

‎shared/styles/base/global.css.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1+
import { globalStyle } from "@vanilla-extract/css";
12
import "./reset.css";
3+
4+
globalStyle("html", {
5+
fontSize: "62.5%",
6+
});

‎shared/styles/tokens/.gitkeep‎

Whitespace-only changes.

‎shared/styles/tokens/color.css.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { createGlobalTheme } from "@vanilla-extract/css";
2+
3+
export const colorTheme = createGlobalTheme(":root", {
4+
white: {
5+
100: "#FFFFFF",
6+
85: "rgba(255, 255, 255, 0.85)",
7+
70: "rgba(255, 255, 255, 0.70)",
8+
60: "rgba(255, 255, 255, 0.60)",
9+
50: "rgba(255, 255, 255, 0.50)",
10+
40: "rgba(255, 255, 255, 0.40)",
11+
30: "rgba(255, 255, 255, 0.30)",
12+
},
13+
background: {
14+
normal: "#17171C",
15+
elevated: "#27272C",
16+
},
17+
point: {
18+
primary: "#CFA9DF",
19+
secondary: "#9D41C4",
20+
dark: "#32293D",
21+
},
22+
btn: {
23+
disabled: "#343438",
24+
},
25+
});

‎shared/styles/tokens/text.css.ts‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { createGlobalTheme } from "@vanilla-extract/css";
2+
import { colorTheme } from "./color.css";
3+
4+
export const textTheme = createGlobalTheme(":root", {
5+
titleH1: {
6+
fontWeight: "600",
7+
fontSize: "2.5rem",
8+
lineHeight: "1.6em",
9+
letterSpacing: "-0.03em",
10+
color: colorTheme.white[100],
11+
},
12+
titleH1Lg: {
13+
fontWeight: "600",
14+
fontSize: "3rem",
15+
lineHeight: "1.6em",
16+
letterSpacing: "-0.03em",
17+
color: colorTheme.white[100],
18+
},
19+
titleH2: {
20+
fontWeight: "600",
21+
fontSize: "2.4rem",
22+
lineHeight: "1.6em",
23+
letterSpacing: "-0.02em",
24+
color: colorTheme.white[100],
25+
},
26+
titleH2Lg: {
27+
fontWeight: "600",
28+
fontSize: "2.6rem",
29+
lineHeight: "1.6em",
30+
letterSpacing: "-0.02em",
31+
color: colorTheme.white[100],
32+
},
33+
titleH3: {
34+
fontWeight: "700",
35+
fontSize: "2rem",
36+
lineHeight: "1.4em",
37+
letterSpacing: "-0.02em",
38+
color: colorTheme.white[100],
39+
},
40+
titleH3Lg: {
41+
fontWeight: "700",
42+
fontSize: "2.2rem",
43+
lineHeight: "1.6em",
44+
letterSpacing: "-0.02em",
45+
color: colorTheme.white[100],
46+
},
47+
bodyB1: {
48+
fontWeight: "500",
49+
fontSize: "1.7rem",
50+
lineHeight: "1.8em",
51+
letterSpacing: "-0.02em",
52+
color: colorTheme.white[100],
53+
},
54+
bodyB1Lg: {
55+
fontWeight: "500",
56+
fontSize: "1.8rem",
57+
lineHeight: "1.8em",
58+
letterSpacing: "-0.02em",
59+
color: colorTheme.white[100],
60+
},
61+
bodyB2: {
62+
fontWeight: "500",
63+
fontSize: "1.5rem",
64+
lineHeight: "1.5em",
65+
letterSpacing: "-0.02em",
66+
fontStyle: "italic",
67+
color: colorTheme.white[100],
68+
},
69+
bodyB2Lg: {
70+
fontWeight: "500",
71+
fontSize: "1.5rem",
72+
lineHeight: "1.6em",
73+
letterSpacing: "-0.02em",
74+
fontStyle: "italic",
75+
color: colorTheme.white[100],
76+
},
77+
caption16: {
78+
fontWeight: "500",
79+
fontSize: "1.6rem",
80+
lineHeight: "1.6em",
81+
letterSpacing: "-0.02em",
82+
color: "#666",
83+
},
84+
caption15: {
85+
fontWeight: "500",
86+
fontSize: "1.5rem",
87+
lineHeight: "1.6em",
88+
letterSpacing: "-0.02em",
89+
color: colorTheme.white[100],
90+
},
91+
caption14: {
92+
fontWeight: "500",
93+
fontSize: "1.4rem",
94+
lineHeight: "1.6em",
95+
letterSpacing: "-0.02em",
96+
color: colorTheme.white[100],
97+
},
98+
});

‎tsconfig.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@
2222
"@/*": ["./*"]
2323
}
2424
},
25-
26-
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
27-
25+
"include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", ".next/types/**/*.ts"],
2826
"exclude": ["node_modules", ".next"]
2927
}

0 commit comments

Comments
 (0)