Skip to content

Commit b2f0437

Browse files
MINJI121MINJI121
committed
GlobalStyle 브랜치 삭제 후 재생성, 공통 font와 color 정의
1 parent e812b41 commit b2f0437

File tree

6 files changed

+204
-89
lines changed

6 files changed

+204
-89
lines changed

‎declares.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module "*.css";

‎postcss.config.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
module.exports = {
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
23
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
4+
"@tailwindcss/postcss": {},
55
},
66
};

src/pages/app.tsx renamed to src/pages/_app.tsx

File renamed without changes.

src/pages/document.tsx renamed to src/pages/_document.tsx

File renamed without changes.

‎src/styles/globals.css‎

Lines changed: 200 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,210 @@
11
@import "tailwindcss";
22

3-
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
3+
@layer {
4+
body {
5+
font-family: "Pretendard", sans-serif;
6+
}
67
}
78

8-
@theme inline {
9-
--color-background: var(--background);
10-
--color-foreground: var(--foreground);
11-
--font-sans: var(--font-geist-sans);
12-
--font-mono: var(--font-geist-mono);
9+
@theme {
10+
--primary: #5534da;
11+
--p-text: #333236;
12+
--color-violet8: #f1effd;
13+
--color-red: #d6173a;
14+
--color-green: #7ac555;
15+
--color-purple: #760dde;
16+
--color-orange: #ffa500;
17+
--color-blue: #76a5ea;
18+
--color-pink: #e876ea;
19+
--color-white: #ffffff;
20+
--color-black: #000000;
21+
--color-4b4b4b: #4b4b4b;
22+
--color-171717: #171717;
23+
--color-FAFAFA: #fafafa;
24+
--color-EEEEEE: #eeeeee;
25+
--color-D9D9D9: #d9d9d9;
26+
--color-9FA6b2: #9fa6b2;
27+
--color-787486: #787486;
1328
}
1429

15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--background: #0a0a0a;
18-
--foreground: #ededed;
30+
@layer components {
31+
.font-32b {
32+
font-size: 32px;
33+
line-height: 42px;
34+
font-weight: 700;
35+
}
36+
.font-32sb {
37+
font-size: 32px;
38+
line-height: 42px;
39+
font-weight: 600;
40+
}
41+
.font-24b {
42+
font-size: 24px;
43+
line-height: 32px;
44+
font-weight: 700;
45+
}
46+
.font-24sb {
47+
font-size: 24px;
48+
line-height: 32px;
49+
font-weight: 600;
50+
}
51+
.font-24m {
52+
font-size: 24px;
53+
line-height: 32px;
54+
font-weight: 500;
55+
}
56+
.font-24r {
57+
font-size: 24px;
58+
line-height: 32px;
59+
font-weight: 400;
60+
}
61+
.font-20b {
62+
font-size: 20px;
63+
line-height: 32px;
64+
font-weight: 700;
65+
}
66+
.font-20sb {
67+
font-size: 20px;
68+
line-height: 32px;
69+
font-weight: 600;
70+
}
71+
.font-20m {
72+
font-size: 20px;
73+
line-height: 32px;
74+
font-weight: 500;
75+
}
76+
.font-20r {
77+
font-size: 20px;
78+
line-height: 32px;
79+
font-weight: 400;
80+
}
81+
.font-18b {
82+
font-size: 18px;
83+
line-height: 26px;
84+
font-weight: 700;
85+
}
86+
.font-18sb {
87+
font-size: 18px;
88+
line-height: 26px;
89+
font-weight: 600;
90+
}
91+
.font-18m {
92+
font-size: 18px;
93+
line-height: 26px;
94+
font-weight: 500;
95+
}
96+
.font-18r {
97+
font-size: 18px;
98+
line-height: 26px;
99+
font-weight: 400;
100+
}
101+
.font-16b {
102+
font-size: 16px;
103+
line-height: 26px;
104+
font-weight: 700;
105+
}
106+
.font-16sb {
107+
font-size: 16px;
108+
line-height: 26px;
109+
font-weight: 600;
110+
}
111+
.font-16m {
112+
font-size: 16px;
113+
line-height: 26px;
114+
font-weight: 500;
19115
}
116+
.font-16r {
117+
font-size: 16px;
118+
line-height: 26px;
119+
font-weight: 400;
120+
}
121+
.font-14b {
122+
font-size: 14px;
123+
line-height: 24px;
124+
font-weight: 700;
125+
}
126+
.font-14sb {
127+
font-size: 14px;
128+
line-height: 24px;
129+
font-weight: 600;
130+
}
131+
.font-14m {
132+
font-size: 14px;
133+
line-height: 24px;
134+
font-weight: 500;
135+
}
136+
.font-14r {
137+
font-size: 14px;
138+
line-height: 24px;
139+
font-weight: 400;
140+
}
141+
.font-13sb {
142+
font-size: 13px;
143+
line-height: 22px;
144+
font-weight: 600;
145+
}
146+
.font-13m {
147+
font-size: 13px;
148+
line-height: 22px;
149+
font-weight: 500;
150+
}
151+
.font-12sb {
152+
font-size: 12px;
153+
line-height: 20px;
154+
font-weight: 600;
155+
}
156+
.font-12m {
157+
font-size: 12px;
158+
line-height: 18px;
159+
font-weight: 500;
160+
}
161+
.font-12r {
162+
font-size: 12px;
163+
line-height: 18px;
164+
font-weight: 400;
165+
}
166+
}
167+
168+
@font-face {
169+
font-family: "Pretendard";
170+
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff2")
171+
format("woff2");
172+
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
173+
format("woff");
174+
font-weight: 400;
175+
font-style: normal;
176+
font-display: swap;
177+
}
178+
179+
@font-face {
180+
font-family: "Pretendard";
181+
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Medium.woff2")
182+
format("woff2");
183+
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Medium.woff")
184+
format("woff");
185+
font-weight: 500;
186+
font-style: normal;
187+
font-display: swap;
188+
}
189+
190+
@font-face {
191+
font-family: "Pretendard";
192+
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-SemiBold.woff2")
193+
format("woff2");
194+
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-SemiBold.woff")
195+
format("woff");
196+
font-weight: 600;
197+
font-style: normal;
198+
font-display: swap;
20199
}
21200

22-
body {
23-
background: var(--background);
24-
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
201+
@font-face {
202+
font-family: "Pretendard";
203+
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff2")
204+
format("woff2");
205+
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff")
206+
format("woff");
207+
font-weight: 700;
208+
font-style: normal;
209+
font-display: swap;
26210
}

‎tailwind.config.ts‎

Lines changed: 0 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +0,0 @@
1-
import type { Config } from "tailwindcss";
2-
3-
export default {
4-
content: [
5-
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
6-
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
7-
"./src/containers/**/*.{js,ts,jsx,tsx,mdx}",
8-
],
9-
theme: {
10-
extend: {
11-
fontFamily: {
12-
pretendard: ["Pretendard"],
13-
},
14-
fontSize: {
15-
"3xl-Bold": ["32px", { lineHeight: "42px", fontWeight: "700" }],
16-
"3xl-Semibold": ["32px", { lineHeight: "42px", fontWeight: "600" }],
17-
"2xl-Bold": ["24px", { lineHeight: "32px", fontWeight: "700" }],
18-
"2xl-Semibold": ["24px", { lineHeight: "32px", fontWeight: "600" }],
19-
"2xl-Medium": ["24px", { lineHeight: "32px", fontWeight: "500" }],
20-
"2xl-Regular": ["24px", { lineHeight: "32px", fontWeight: "400" }],
21-
"xl-Bold": ["20px", { lineHeight: "32px", fontWeight: "700" }],
22-
"xl-Semibold": ["20px", { lineHeight: "32px", fontWeight: "600" }],
23-
"xl-Medium": ["20px", { lineHeight: "32px", fontWeight: "500" }],
24-
"xl-Regular": ["20px", { lineHeight: "32px", fontWeight: "400" }],
25-
"2lg-Bold": ["18px", { lineHeight: "26px", fontWeight: "700" }],
26-
"2lg-Semibold": ["18px", { lineHeight: "26px", fontWeight: "600" }],
27-
"2lg-Medium": ["18px", { lineHeight: "26px", fontWeight: "500" }],
28-
"2lg-Regular": ["18px", { lineHeight: "26px", fontWeight: "400" }],
29-
"lg-Bold": ["16px", { lineHeight: "26px", fontWeight: "700" }],
30-
"lg-Semibold": ["16px", { lineHeight: "26px", fontWeight: "600" }],
31-
"lg-Medium": ["16px", { lineHeight: "26px", fontWeight: "500" }],
32-
"lg-Regular": ["16px", { lineHeight: "26px", fontWeight: "400" }],
33-
"md-Bold": ["14px", { lineHeight: "24px", fontWeight: "700" }],
34-
"md-Semibold": ["14px", { lineHeight: "24px", fontWeight: "600" }],
35-
"md-Medium": ["14px", { lineHeight: "24px", fontWeight: "500" }],
36-
"md-Regular": ["14px", { lineHeight: "24px", fontWeight: "400" }],
37-
"sm-Semibold": ["13px", { lineHeight: "22px", fontWeight: "600" }],
38-
"sm-Medium": ["13px", { lineHeight: "22px", fontWeight: "500" }],
39-
"xs-Semibold": ["12px", { lineHeight: "20px", fontWeight: "600" }],
40-
"xs-Medium": ["12px", { lineHeight: "18px", fontWeight: "500" }],
41-
"xs-Regular": ["12px", { lineHeight: "18px", fontWeight: "400" }],
42-
},
43-
colors: {
44-
primary: "#5534DA",
45-
secondary: "#F1EFFD",
46-
red: "#D6173A",
47-
green: "#7AC555",
48-
purple: "#760DDF",
49-
orange: "#FFA500",
50-
blue: "#76A5EA",
51-
pink: "#E876EA",
52-
wihte: "#FFFFFF",
53-
black: {
54-
1000: "#000000",
55-
900: "#171717",
56-
800: "#333236",
57-
700: "#4B4B4B",
58-
},
59-
glay: {
60-
1000: "#787486",
61-
900: "#9FA6B2",
62-
800: "#D9D9D9",
63-
700: "#EEEEEE",
64-
600: "#FAFAFA",
65-
},
66-
},
67-
},
68-
},
69-
plugins: [],
70-
} satisfies Config;

0 commit comments

Comments
 (0)