Skip to content

Commit 10dffd6

Browse files
AAminhaAAminha
committed
design: 스타일 가이드 설정
1 parent e942c48 commit 10dffd6

File tree

9 files changed

+157
-1
lines changed

9 files changed

+157
-1
lines changed

‎index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + React + TS</title>
8+
<link
9+
rel="stylesheet"
10+
as="style"
11+
crossorigin
12+
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"
13+
/>
814
</head>
915
<body>
1016
<div id="root"></div>

‎src/App.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import '@/styles/index.css';
21
import { Route, Routes } from 'react-router';
32

43
import Home from './pages/Home';

‎src/main.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { createRoot } from 'react-dom/client';
44
import { BrowserRouter } from 'react-router';
55

66
import App from './App';
7+
import './styles/index.css';
78

89
const queryClient = new QueryClient();
910

‎src/styles/components.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* 재사용 가능한 UI 컴포넌트의 스타일 정의 */
2+
3+
@layer components {
4+
}

‎src/styles/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
@import 'tailwindcss';
2+
@import './theme.css';
3+
@import './preflight.css';
4+
@import './typography.css';
5+
@import './components.css';
6+
@import './utilities.css';

‎src/styles/preflight.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* 기본 스타일 리셋 및 전역 스타일 */
2+
3+
@layer base {
4+
body {
5+
font-family: 'Pretendard Variable', Pretendard, sans-serif;
6+
}
7+
}

‎src/styles/theme.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* https://tailwindcss.com/docs/theme */
2+
/* 테마 변수 정의 */
3+
4+
@theme {
5+
--color-black: #1c1b1a;
6+
--color-white: #fff;
7+
8+
--color-gray-5: #f2f2f2;
9+
--color-gray-10: #e7e7e7;
10+
--color-gray-15: #dadada;
11+
--color-gray-20: #cecece;
12+
--color-gray-30: #b6b6b6;
13+
--color-gray-40: #9d9d9d;
14+
--color-gray-50: #858585;
15+
--color-gray-60: #6c6c6c;
16+
--color-gray-70: #545454;
17+
--color-gray-80: #3b3b3b;
18+
--color-gray-90: #232323;
19+
--color-gray-100: #0a0a0a;
20+
21+
--color-accent-1: #f15847;
22+
--color-accent-2: #f58d7b;
23+
--color-accent-3: #fdd6cc;
24+
25+
--color-primary-1: #eabf17;
26+
--color-primary-1-hover: #fab546;
27+
--color-primary-2: #fad446;
28+
--color-primary-3: #f8de8c;
29+
--color-primary-4: #fff5dd;
30+
--color-primary-5: #fffbf8;
31+
32+
--color-default-bg: #fffbf8;
33+
}

‎src/styles/typography.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
@layer base {
2+
.h1-b {
3+
font-size: 32px;
4+
font-weight: 700;
5+
line-height: 48px;
6+
}
7+
8+
.h2-b {
9+
font-size: 24px;
10+
font-weight: 700;
11+
line-height: 36px;
12+
}
13+
14+
.h3-b {
15+
font-size: 20px;
16+
font-weight: 700;
17+
line-height: 30px;
18+
}
19+
20+
.body-l-b {
21+
font-size: 16px;
22+
font-weight: 700;
23+
line-height: 24px;
24+
}
25+
26+
.body-l-sb {
27+
font-size: 16px;
28+
font-weight: 600;
29+
line-height: 24px;
30+
}
31+
32+
.body-l-m {
33+
font-size: 16px;
34+
font-weight: 500;
35+
line-height: 24px;
36+
letter-spacing: -0.16px;
37+
}
38+
39+
.body-l-r {
40+
font-size: 16px;
41+
font-weight: 400;
42+
line-height: 24px;
43+
letter-spacing: -0.16px;
44+
}
45+
46+
.body-b {
47+
font-size: 14px;
48+
font-weight: 700;
49+
line-height: 21px;
50+
letter-spacing: -0.14px;
51+
}
52+
53+
.body-sb {
54+
font-size: 14px;
55+
font-weight: 600;
56+
line-height: 21px;
57+
letter-spacing: -0.14px;
58+
}
59+
60+
.body-m {
61+
font-size: 14px;
62+
font-weight: 500;
63+
line-height: 24px;
64+
letter-spacing: -0.14px;
65+
}
66+
67+
.body-r {
68+
font-size: 14px;
69+
font-weight: 400;
70+
line-height: 21px;
71+
letter-spacing: -0.14px;
72+
}
73+
74+
.caption-b {
75+
font-size: 12px;
76+
font-weight: 700;
77+
line-height: 18px;
78+
}
79+
80+
.caption-sb {
81+
font-size: 12px;
82+
font-weight: 600;
83+
line-height: 18px;
84+
}
85+
86+
.caption-m {
87+
font-size: 12px;
88+
font-weight: 500;
89+
line-height: 18px;
90+
}
91+
92+
.caption-r {
93+
font-size: 12px;
94+
font-weight: 400;
95+
line-height: 18px;
96+
}
97+
}

‎src/styles/utilities.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* Tailwind에서 기본적으로 제공하지 않는 추가 유틀리티 클래스 정의 */
2+
3+
@layer utilities {
4+
}

0 commit comments

Comments
 (0)