diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c21a3cf8..58784355 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,24 +2,20 @@ -- - --- ## 📝 작업 상세 내용 -- - --- ## ✅ 체크리스트 -- [ ] GitHub 이슈에 `Close: #번호`를 추가했는가? -- [ ] 불필요한 주석, 디버깅 코드 제거했는가? -- [ ] 기능 테스트 및 정상 동작 확인했는가? -- [ ] 커밋컨벤션을 잘 지켜 커밋했는가? +- [ ] PR 본문에 `Close #번호` 추가 +- [ ] 불필요한 주석, 디버깅 코드 제거 +- [ ] 기능 테스트 및 정상 동작 확인 +- [ ] 커밋컨벤션 준수 --- diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml index 7a922d1d..0893a1bf 100644 --- a/.github/workflows/pr-check.yml +++ b/.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 diff --git a/package.json b/package.json index 12e0a3a1..01a4e7ac 100644 --- a/package.json +++ b/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", diff --git a/src/app/styles/index.css b/src/app/styles/index.css index d4b50785..22649507 100644 --- a/src/app/styles/index.css +++ b/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); + } +} diff --git a/yarn.lock b/yarn.lock index 8ad4e24a..12cd6a51 100644 --- a/yarn.lock +++ b/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