Skip to content

Commit 778170d

Browse files
KongMezuKongMezu
authored
Merge pull request #10 from geulDa/initsetting
⚙️Style Setting : 디자인 시스템 1차 세팅 완료
2 parents e640633 + 9116abf commit 778170d

File tree

5 files changed

+318
-20
lines changed

5 files changed

+318
-20
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"@types/react-dom": "^19",
2424
"eslint": "^9",
2525
"eslint-config-next": "15.5.4",
26-
"tailwindcss": "^4",
26+
"tailwindcss": "4.1.14",
2727
"typescript": "^5"
2828
}
2929
}

‎pnpm-lock.yaml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎postcss.config.mjs‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/styles/globals.css‎

Lines changed: 55 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,68 @@
1-
@import "tailwindcss";
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
html {
6+
font-size: 62.5%;
7+
}
28

39
:root {
10+
/* 메인컬러(MAIN) */
11+
--color-main-1: #D9FAFB;
12+
--color-main-2: #B2F4F6;
13+
--color-main-3: #8CEFF2;
14+
--color-main-4: #65E9ED;
15+
--color-main-5: #22DFE5;
16+
--color-main-6: #0BCBD2;
17+
--color-main-7: #14A9AE;
18+
--color-main-8: #168A8E;
19+
--color-main-9: #107274;
20+
--color-main-10: #0A5C5E;
21+
22+
/* 서브컬러(SECONDARY) */
23+
--color-secondary-1: #FEEFF3;
24+
--color-secondary-2: #FFD0DC;
25+
--color-secondary-3: #FAA2B8;
26+
--color-secondary-4: #FF7B9C;
27+
--color-secondary-5: #FF5B84;
28+
--color-secondary-6: #EB436D;
29+
--color-secondary-7: #CD1845;
30+
--color-secondary-8: #920C2D;
31+
--color-secondary-9: #710520;
32+
--color-secondary-10: #470214;
33+
34+
/* 그레이 스케일(GRAY) */
35+
--color-gray-1: #FAFAFA;
36+
--color-gray-2: #F4F4F4;
37+
--color-gray-3: #E9E9E9;
38+
--color-gray-4: #D5D5D5;
39+
--color-gray-5: #BCBDBE;
40+
--color-gray-6: #A1A4AA;
41+
--color-gray-7: #8B9099;
42+
--color-gray-8: #484B51;
43+
--color-gray-9: #2E3136;
44+
--color-gray-10: #111215;
45+
46+
/* 서브 포인트 컬러(BLUE & RED) */
47+
--color-blue: #2569FF;
48+
--color-red-1: #F06B6B;
49+
--color-red-2: #EB3939;
50+
51+
52+
/* 배경/전경 */
453
--background: #ffffff;
5-
--foreground: #171717;
6-
}
54+
--foreground: #111215;
755

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);
56+
/* 폰트 */
57+
--font-sans: 'Pretendard', system-ui, sans-serif;
58+
--font-serif: 'JEN Serif', serif;
1359
}
1460

61+
/* 다크 모드 */
1562
@media (prefers-color-scheme: dark) {
1663
:root {
1764
--background: #0a0a0a;
1865
--foreground: #ededed;
1966
}
2067
}
2168

22-
body {
23-
background: var(--background);
24-
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
26-
}

‎tailwind.config.js‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
4+
theme: {
5+
extend: {
6+
/* colors */
7+
colors: {
8+
mint: {
9+
50: 'var(--color-main-1)',
10+
100: 'var(--color-main-2)',
11+
200: 'var(--color-main-3)',
12+
300: 'var(--color-main-4)',
13+
400: 'var(--color-main-5)',
14+
500: 'var(--color-main-6)',
15+
600: 'var(--color-main-7)',
16+
700: 'var(--color-main-8)',
17+
800: 'var(--color-main-9)',
18+
900: 'var(--color-main-10)',
19+
},
20+
pink: {
21+
50: 'var(--color-secondary-1)',
22+
100: 'var(--color-secondary-2)',
23+
200: 'var(--color-secondary-3)',
24+
300: 'var(--color-secondary-4)',
25+
400: 'var(--color-secondary-5)',
26+
500: 'var(--color-secondary-6)',
27+
600: 'var(--color-secondary-7)',
28+
700: 'var(--color-secondary-8)',
29+
800: 'var(--color-secondary-9)',
30+
900: 'var(--color-secondary-10)',
31+
},
32+
gray: {
33+
50: 'var(--color-gray-1)',
34+
100: 'var(--color-gray-2)',
35+
200: 'var(--color-gray-3)',
36+
300: 'var(--color-gray-4)',
37+
400: 'var(--color-gray-5)',
38+
500: 'var(--color-gray-6)',
39+
600: 'var(--color-gray-7)',
40+
700: 'var(--color-gray-8)',
41+
800: 'var(--color-gray-9)',
42+
900: 'var(--color-gray-10)',
43+
},
44+
blue: {
45+
400: 'var(--color-blue)'
46+
},
47+
red: {
48+
300: 'var(--color-red-1)',
49+
400: 'var(--color-red-2)',
50+
},
51+
background: 'var(--background)',
52+
foreground: 'var(--foreground)',
53+
},
54+
/* display */
55+
display: {
56+
'layout-flex': 'flex',
57+
'layout-grid': 'grid',
58+
'layout-block': 'block',
59+
'layout-inline': 'inline-block',
60+
},
61+
/* grid & layout */
62+
gridTemplateColumns: {
63+
'layout-6': 'repeat(6, minmax(0, 1fr))', // 모바일 6컬럼 그리드
64+
'layout-4': 'repeat(4, minmax(0, 1fr))', // 모바일 4컬럼 그리드
65+
},
66+
gridTemplateRows: {
67+
'layout-auto': 'auto',
68+
},
69+
maxWidth: {
70+
mobile: '430px', // 모바일 최대 넓이
71+
},
72+
minWidth: {
73+
100: '100px',
74+
200: '200px',
75+
},
76+
/* padding, margin, gap 모두 사용 가능*/
77+
spacing: {
78+
0: '0rem',
79+
1: '0.4rem',
80+
2: '0.8rem',
81+
3: '1rem',
82+
4: '1.6rem',
83+
5: '2rem',
84+
6: '2.4rem',
85+
7: '2.8rem',
86+
8: '3.2rem',
87+
9: '3.6rem',
88+
10: '4rem',
89+
18: '7.2rem',
90+
},
91+
/* Radius*/
92+
borderRadius: {
93+
xs: '2px',
94+
base: '5px',
95+
sm: '4px',
96+
md: '8px',
97+
lg: '16px',
98+
xl: '24px',
99+
full: '9999px',
100+
},
101+
/* font*/
102+
fontFamily: {
103+
sans: ['Pretendard', 'system-ui', 'sans-serif'],
104+
serif: ['JEN Serif', 'serif'],
105+
},
106+
},
107+
},
108+
plugins: [
109+
function ({ addUtilities }) {
110+
const newUtilities = {
111+
/* Pretendard */
112+
/* DISPLAY */
113+
'.text-display-lg': {
114+
fontSize: '5.7rem', //57px
115+
fontWeight: 300,
116+
lineHeight: '6.4rem', //64px
117+
letterSpacing: '-0.025rem', //-0.25px',
118+
fontFamily: 'Pretendard, system-ui, sans-serif',
119+
},
120+
'.text-display-md': {
121+
fontSize: '5.2rem', //52px
122+
fontWeight: 300,
123+
lineHeight: '4.5rem', //45px
124+
fontFamily: 'Pretendard, system-ui, sans-serif',
125+
},
126+
'.text-display-sm': {
127+
fontSize: '3.6rem', //36px
128+
fontWeight: 300,
129+
lineHeight: '4.4rem', //44px
130+
fontFamily: 'Pretendard, system-ui, sans-serif',
131+
},
132+
/* HEADLINE */
133+
'.text-headline-lg': {
134+
fontSize: '3.2rem', //32px
135+
fontWeight: 200,
136+
lineHeight: '4rem', //40px
137+
fontFamily: 'Pretendard, system-ui, sans-serif',
138+
},
139+
'.text-headline-md': {
140+
fontSize: '2.8rem', //28px
141+
fontWeight: 200,
142+
lineHeight: '3.2rem', //32px
143+
fontFamily: 'Pretendard, system-ui, sans-serif',
144+
},
145+
'.text-headline-sm': {
146+
fontSize: '2.4rem', //24px
147+
fontWeight: 200,
148+
lineHeight: '3.2rem', //32px
149+
fontFamily: 'Pretendard, system-ui, sans-serif',
150+
},
151+
152+
/* TITLE */
153+
'.text-title-lg': {
154+
fontSize: '2.2rem', //22px
155+
fontWeight: 400,
156+
lineHeight: '1.75rem', //28px
157+
fontFamily: 'Pretendard, system-ui, sans-serif',
158+
},
159+
'.text-title-md': {
160+
fontSize: '1.6rem', //16px
161+
fontWeight: 400,
162+
lineHeight: '2.4rem', //24px
163+
letterSpacing: '0.015rem', //0.15px
164+
fontFamily: 'Pretendard, system-ui, sans-serif',
165+
},
166+
'.text-title-sm': {
167+
fontSize: '1.4rem', //14px
168+
fontWeight: 400,
169+
lineHeight: '2rem', //20px
170+
letterSpacing: '0.01rem', //0.1px
171+
fontFamily: 'Pretendard, system-ui, sans-serif',
172+
},
173+
/* LABEL */
174+
'.text-label-lg': {
175+
fontSize: '1.4rem', //14px
176+
fontWeight: 300,
177+
lineHeight: '2rem', //20px
178+
letterSpacing: '0.01rem', //0.1px
179+
fontFamily: 'Pretendard, system-ui, sans-serif',
180+
},
181+
'.text-label-md': {
182+
fontSize: '1.2em', //12px
183+
fontWeight: 300,
184+
lineHeight: '1.6rem', //16px
185+
letterSpacing: '0.05rem', //0.5px
186+
fontFamily: 'Pretendard, system-ui, sans-serif',
187+
},
188+
'.text-label-sm': {
189+
fontSize: '1.1rem', //11px
190+
fontWeight: 300,
191+
lineHeight: '1.6rem', //16px
192+
letterSpacing: '0.05rem', //0.5px
193+
fontFamily: 'Pretendard, system-ui, sans-serif',
194+
},
195+
/* BODY */
196+
'.text-body-lg': {
197+
fontSize: '1.4rem', //14px,
198+
fontWeight: 400,
199+
lineHeight: '2.4rem', //24px
200+
letterSpacing: '0.05rem', //0.5px
201+
fontFamily: 'Pretendard, system-ui, sans-serif',
202+
},
203+
'.text-body-md': {
204+
fontSize: '1.2rem', //12px
205+
fontWeight: 300,
206+
lineHeight: '2rem', //20px
207+
letterSpacing: '0.025rem', //0.25px
208+
fontFamily: 'Pretendard, system-ui, sans-serif',
209+
},
210+
'.text-body-sm': {
211+
fontSize: '1rem', //10px
212+
fontWeight: 200,
213+
lineHeight: '1.6rem', //16px
214+
letterSpacing: '0.04rem', // 0.4px
215+
fontFamily: 'Pretendard, system-ui, sans-serif',
216+
},
217+
218+
/* JEN Serif */
219+
/* DISPLAY */
220+
'.text-display-serif': {
221+
fontSize: '3.6rem', //36px
222+
fontWeight: 200,
223+
lineHeight: '4.6rem', //46px
224+
letterSpacing: '0.6rem', //6px
225+
fontFamily: 'JEN Serif, serif',
226+
},
227+
/* HEADLINE */
228+
'.text-headline-lg-serif': {
229+
fontSize: '3.2rem', //32px
230+
fontWeight: 200,
231+
lineHeight: '4rem', //40px
232+
letterSpacing: '0.2rem', //2px
233+
fontFamily: 'JEN Serif, serif',
234+
},
235+
'.text-headline-md-serif': {
236+
fontSize: '2.4rem', //24px
237+
fontWeight: 200,
238+
lineHeight: '3.2rem', //32px
239+
letterSpacing: '0.2rem', //2px
240+
fontFamily: 'JEN Serif, serif',
241+
},
242+
'.text-headline-sm-serif': {
243+
fontSize: '2rem', //20px
244+
fontWeight: 200,
245+
lineHeight: '2.4rem', //24px
246+
letterSpacing: '1.2rem', //12px
247+
fontFamily: 'JEN Serif, serif',
248+
},
249+
/* LABEL */
250+
'.text-label-serif': {
251+
fontSize: '1.4rem', //14px
252+
fontWeight: 200,
253+
lineHeight: '2rem', //20px
254+
letterSpacing: '0.4rem', //4px
255+
fontFamily: 'JEN Serif, serif',
256+
},
257+
};
258+
addUtilities(newUtilities);
259+
},
260+
],
261+
};

0 commit comments

Comments
 (0)