[Chore] 디자인 시스템 토큰 정의

.github/pull_request_template.md

@@ -2,24 +2,20 @@
 
 <!-- 여기에 어떤 변경을 했는지 설명해주세요-->
 
--
-
 ---
 
 ## 📝 작업 상세 내용
 
 <!--리뷰어가 특별히 봐줬으면 하는 부분이 있다면 여기에 적어주세요-->
 
--
-
 ---
 
 ## ✅ 체크리스트
 
-- [ ] GitHub 이슈에 `Close: #번호`를 추가했는가?
-- [ ] 불필요한 주석, 디버깅 코드 제거했는가?
-- [ ] 기능 테스트 및 정상 동작 확인했는가?
-- [ ] 커밋컨벤션을 잘 지켜 커밋했는가?
+- [ ] PR 본문에 `Close #번호` 추가
+- [ ] 불필요한 주석, 디버깅 코드 제거
+- [ ] 기능 테스트 및 정상 동작 확인
+- [ ] 커밋컨벤션 준수
 
 ---
 

.github/workflows/pr-check.yml

@@ -24,6 +24,12 @@ jobs:
           node-version: 22
           cache: 'yarn'
 
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Set Yarn version
+        run: corepack prepare yarn@4.10.3 --activate
+
       - name: Generate cache key
         id: cache-key
         run: echo "value=${{ hashFiles('**/yarn.lock', '**/vite.config.ts', '**/tsconfig.json') }}" >> $GITHUB_OUTPUT

package.json

@@ -26,6 +26,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "es-toolkit": "^1.43.0",
+    "pretendard": "^1.3.9",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-hook-form": "^7.68.0",
@@ -43,7 +44,7 @@
     "@storybook/addon-onboarding": "^10.1.10",
     "@storybook/addon-vitest": "^10.1.10",
     "@storybook/react-vite": "^10.1.10",
-    "@tailwindcss/vite": "4.0.0",
+    "@tailwindcss/vite": "^4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -77,7 +78,7 @@
     "prettier": "^3.7.4",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "storybook": "^10.1.10",
-    "tailwindcss": "4.0.0",
+    "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.50.0",
     "vite": "^7.3.0",

src/app/styles/index.css

@@ -1 +1,149 @@
 @import 'tailwindcss';
+@import 'pretendard/dist/web/variable/pretendardvariable.css';
+
+@theme {
+  /* Typography - Font Family */
+  --font-sans:
+    'Pretendard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+
+  /* Colors - Primitive/Gray */
+  --color-white: #ffffff;
+  --color-gray-50: #f2f2f7;
+  --color-gray-100: #e5e5ea;
+  --color-gray-200: #d1d1d6;
+  --color-gray-300: #c7c7cc;
+  --color-gray-400: #aeaeb2;
+  --color-gray-500: #8e8e93;
+  --color-gray-600: #636366;
+  --color-gray-700: #48484a;
+  --color-gray-800: #3a3a3c;
+  --color-gray-900: #1c1c1e;
+  --color-black: #000000;
+
+  /* Colors - Primitive/Blue (Green) */
+  --color-green-50: #e0fff0;
+  --color-green-100: #b8ffe6;
+  --color-green-200: #8cffd0;
+  --color-green-300: #63ffd6;
+  --color-green-400: #38ffd1;
+  --color-green-500: #1bffd0;
+  --color-green-600: #0dd9b5;
+  --color-green-700: #00b39b;
+  --color-green-800: #008c7e;
+  --color-green-900: #00665f;
+
+  /* Typography - Font Size (Primitive/Scale) */
+  --font-size-xxxl: 40px;
+  --font-size-xxl: 28px;
+  --font-size-xl: 24px;
+  --font-size-l: 20px;
+  --font-size-m: 16px;
+  --font-size-s: 14px;
+  --font-size-xs: 12px;
+  --font-size-xxs: 8px;
+
+  /* Typography - Line Height */
+  --line-height-l: 28px;
+  --line-height-m: 24px;
+  --line-height-s: 20px;
+  --line-height-xs: 16px;
+
+  /* Typography - Letter Spacing */
+  --letter-spacing: 0;
+
+  /* Typography - Font Weight */
+  --font-weight-b: 700;
+  --font-weight-sb: 600;
+  --font-weight-m: 500;
+  --font-weight-r: 400;
+
+  /* Spacing (Primitive/Scale)*/
+  --spacing-xxxl: 40px;
+  --spacing-xxl: 28px;
+  --spacing-xl: 24px;
+  --spacing-l: 20px;
+  --spacing-m: 16px;
+  --spacing-s: 14px;
+  --spacing-xs: 12px;
+  --spacing-xxs: 8px;
+
+  /* Margin (Primitive/Scale) */
+  --margin-l: 24px;
+  --margin-m: 20px;
+  --margin-s: 16px;
+
+  /* Padding (Primitive/Scale) */
+  --padding-l: 16px;
+  --padding-m: 12px;
+  --padding-s: 8px;
+
+  /* Radius (Primitive/Scale) */
+  --radius-xl: 40px;
+  --radius-l: 24px;
+  --radius-m: 16px;
+  --radius-s: 8px;
+}
+
+@layer base {
+  html {
+    font-family: var(--font-sans);
+  }
+}
+
+@layer utilities {
+  .typo-title-1 {
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-sb);
+    font-size: var(--font-size-xxl);
+    line-height: 125%;
+    letter-spacing: var(--letter-spacing);
+  }
+
+  .typo-title-2 {
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-sb);
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-l);
+    letter-spacing: var(--letter-spacing);
+  }
+
+  .typo-title-3 {
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-b);
+    font-size: var(--font-size-l);
+    line-height: var(--line-height-m);
+    letter-spacing: var(--letter-spacing);
+  }
+
+  .typo-body-1 {
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-m);
+    font-size: var(--font-size-m);
+    line-height: var(--line-height-m);
+    letter-spacing: var(--letter-spacing);
+  }
+
+  .typo-body-2 {
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-sb);
+    font-size: var(--font-size-m);
+    line-height: var(--line-height-s);
+    letter-spacing: var(--letter-spacing);
+  }
+
+  .typo-caption-1 {
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-sb);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing);
+  }
+
+  .typo-caption-2 {
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-r);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing);
+  }
+}

yarn.lock

@@ -1467,7 +1467,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tailwindcss/node@npm:^4.0.0":
+"@tailwindcss/node@npm:4.1.18":
   version: 4.1.18
   resolution: "@tailwindcss/node@npm:4.1.18"
   dependencies:
@@ -1573,7 +1573,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tailwindcss/oxide@npm:^4.0.0":
+"@tailwindcss/oxide@npm:4.1.18":
   version: 4.1.18
   resolution: "@tailwindcss/oxide@npm:4.1.18"
   dependencies:
@@ -1618,17 +1618,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tailwindcss/vite@npm:4.0.0":
-  version: 4.0.0
-  resolution: "@tailwindcss/vite@npm:4.0.0"
+"@tailwindcss/vite@npm:^4.1.18":
+  version: 4.1.18
+  resolution: "@tailwindcss/vite@npm:4.1.18"
   dependencies:
-    "@tailwindcss/node": "npm:^4.0.0"
-    "@tailwindcss/oxide": "npm:^4.0.0"
-    lightningcss: "npm:^1.29.1"
-    tailwindcss: "npm:4.0.0"
+    "@tailwindcss/node": "npm:4.1.18"
+    "@tailwindcss/oxide": "npm:4.1.18"
+    tailwindcss: "npm:4.1.18"
   peerDependencies:
-    vite: ^5.2.0 || ^6
-  checksum: 10c0/547eb16c6ef5d720bf962868bf163756b2a7583a0d26df609bc096e17a169963d98a2bd10408796b17dee575da89a1c0d4bc9764e0f3b10914f7ba2ba338fbe8
+    vite: ^5.2.0 || ^6 || ^7
+  checksum: 10c0/7605364d29cd5683948f7b74f22c5f3b39b89b54d25b3b1094f8300ec6fe9f053f73246170debad86e01080f858d0bf6d0ef8e398a9dc0ce1f5a02c34447726b
   languageName: node
   linkType: hard
 
@@ -5635,7 +5634,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss@npm:1.30.2, lightningcss@npm:^1.29.1":
+"lightningcss@npm:1.30.2":
   version: 1.30.2
   resolution: "lightningcss@npm:1.30.2"
   dependencies:
@@ -5814,7 +5813,7 @@ __metadata:
     "@storybook/addon-onboarding": "npm:^10.1.10"
     "@storybook/addon-vitest": "npm:^10.1.10"
     "@storybook/react-vite": "npm:^10.1.10"
-    "@tailwindcss/vite": "npm:4.0.0"
+    "@tailwindcss/vite": "npm:^4.1.18"
     "@tanstack/react-query": "npm:^5.90.12"
     "@tanstack/react-query-devtools": "npm:^5.91.1"
     "@testing-library/dom": "npm:^10.4.1"
@@ -5851,6 +5850,7 @@ __metadata:
     jsdom: "npm:^27.3.0"
     lint-staged: "npm:^16.2.7"
     msw: "npm:^2.12.7"
+    pretendard: "npm:^1.3.9"
     prettier: "npm:^3.7.4"
     prettier-plugin-tailwindcss: "npm:^0.7.2"
     react: "npm:^19.2.3"
@@ -5860,7 +5860,7 @@ __metadata:
     storybook: "npm:^10.1.10"
     tailwind-merge: "npm:^3.4.0"
     tailwind-variants: "npm:^3.2.2"
-    tailwindcss: "npm:4.0.0"
+    tailwindcss: "npm:^4.1.18"
     typescript: "npm:~5.9.3"
     typescript-eslint: "npm:^8.50.0"
     vite: "npm:^7.3.0"
@@ -6672,6 +6672,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretendard@npm:^1.3.9":
+  version: 1.3.9
+  resolution: "pretendard@npm:1.3.9"
+  checksum: 10c0/45da0108541a2bd78dc1e43c8a0fc25994d202745ff178faf834477cb341fc376ba367e4e742ef5c139be119c86b8f4d17c8ae4f3a85c310aa7fb4ff419a7cac
+  languageName: node
+  linkType: hard
+
 "prettier-plugin-tailwindcss@npm:^0.7.2":
   version: 0.7.2
   resolution: "prettier-plugin-tailwindcss@npm:0.7.2"
@@ -7858,14 +7865,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:4.0.0":
-  version: 4.0.0
-  resolution: "tailwindcss@npm:4.0.0"
-  checksum: 10c0/418b1cb02c46f5064bdd4931d8bb030e5c2a986744226dc282b47ecd4b95d1eb919a6f35a68cac948fbf3224fd976feafd9476e289cb5774062f6a3b2a49606e
-  languageName: node
-  linkType: hard
-
-"tailwindcss@npm:4.1.18":
+"tailwindcss@npm:4.1.18, tailwindcss@npm:^4.1.18":
   version: 4.1.18
   resolution: "tailwindcss@npm:4.1.18"
   checksum: 10c0/c79263cea0b2c577859b02f28284caa4eb3844e4d0f563686726ca97817c045c5c395a55bc776daaa351ba9e4aefa9a75bfbb43c22d86f3c573eecc2b87d6bf1