From a74af885aaf60d2f2ea7e6309161b004bad0a5b2 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Tue, 24 Jun 2025 09:46:29 +0900 Subject: [PATCH 01/40] remove unused --- public/vite.svg | 1 - src/assets/react.svg | 1 - 2 files changed, 2 deletions(-) delete mode 100644 public/vite.svg delete mode 100644 src/assets/react.svg diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 4374000ba20f296a02dea4a61ea12ff37e198b06 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Tue, 24 Jun 2025 09:47:57 +0900 Subject: [PATCH 02/40] add Prettier --- .prettierrc | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..e69de29b From 445de5675badb957e72fe8d062e93b815a088c7a Mon Sep 17 00:00:00 2001 From: Yebeen Date: Tue, 24 Jun 2025 10:30:31 +0900 Subject: [PATCH 03/40] add global styles with Emotion --- src/emotionstyle.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/emotionstyle.tsx diff --git a/src/emotionstyle.tsx b/src/emotionstyle.tsx new file mode 100644 index 00000000..e69de29b From b5f3f47f9881ac9ca0932051108c87c3aa6d82ae Mon Sep 17 00:00:00 2001 From: Yebeen Date: Tue, 24 Jun 2025 10:47:11 +0900 Subject: [PATCH 04/40] update README --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index cdf3e5c8..3d098465 100644 --- a/README.md +++ b/README.md @@ -1 +1,16 @@ # react-gift-login + +## 불필요한 코드나 파일 삭제 -> react.svg, vite.svg파일 및 import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' 등 import 해주는 코드 + +## 절대경로로 Import 할 수 있게 alias를 설정 + +## Prettier가 무엇인지 찾아보고 추가 + +## emotion 스타일 라이브러리를 추가, reset css를 적용 + +## 기본 폰트로 Pretendard를 적용 + +## 기능 단위로 나누어 커밋 + + + From d2bdd83cec6ce849df03d9338405f7aa00fda711 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Tue, 24 Jun 2025 10:49:39 +0900 Subject: [PATCH 05/40] add global styles with emotion --- src/emotionstyle.tsx | 47 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/src/emotionstyle.tsx b/src/emotionstyle.tsx index e69de29b..82024e69 100644 --- a/src/emotionstyle.tsx +++ b/src/emotionstyle.tsx @@ -0,0 +1,47 @@ +/** @jsxImportSource @emotion/react */ +import { css, Global } from '@emotion/react'; + +const GlobalStyles = () => ( + +); + +export default GlobalStyles; From d5274f732f771a68171819e687aedec1b3abd5f4 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Tue, 24 Jun 2025 10:52:26 +0900 Subject: [PATCH 06/40] delete unused --- src/App.tsx | 24 +++--------------------- 1 file changed, 3 insertions(+), 21 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3d7ded3f..8e7651c1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,4 @@ import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' import './App.css' function App() { @@ -8,26 +6,10 @@ function App() { return ( <> -

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

+ ) } From bf632a866074f049ec6e602d160773c370bd26a2 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Tue, 24 Jun 2025 10:54:23 +0900 Subject: [PATCH 07/40] add path --- vite.config.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/vite.config.ts b/vite.config.ts index 8b0f57b9..78ed9023 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,14 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' +import p from 'path' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], + resolve:{ + alias:{ + '@':p.resolve(__dirname,'src'), + '@utils':p.resolve(__dirname,'src/utils'), + } + } }) From 063cffafca791e767c67795d01aa7113eaea60aa Mon Sep 17 00:00:00 2001 From: Yebeen Date: Tue, 24 Jun 2025 10:55:41 +0900 Subject: [PATCH 08/40] add prettier --- .prettierrc | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/.prettierrc b/.prettierrc index e69de29b..034a0b4f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -0,0 +1,12 @@ +{ + "semi": true, + "singleQuote": true, + "printWidth": 80, + "trailingComma": "es5", + "tabWidth": 2, + "useTabs": false, + "bracketSpacing": true, + "arrowParens": "always", + "endOfLine": "lf" + } + \ No newline at end of file From 5d94b730c857182a4aa7faa18a1360537bcc172f Mon Sep 17 00:00:00 2001 From: Yebeen Date: Tue, 24 Jun 2025 10:57:50 +0900 Subject: [PATCH 09/40] main alias path --- src/main.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/main.tsx b/src/main.tsx index bef5202a..49761ed0 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,9 +2,13 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.tsx' +import GlobalStyles from './emotionstyle'; +import '@fontsource/pretendard/variable.css'; + createRoot(document.getElementById('root')!).render( + , ) From 34b569acc48049ec2a107a7a64cc6e3a70521b5d Mon Sep 17 00:00:00 2001 From: yebeen53 Date: Tue, 24 Jun 2025 21:08:25 +0900 Subject: [PATCH 10/40] =?UTF-8?q?=EC=B6=A9=EB=82=A8=EB=8C=80=5FFE=5F?= =?UTF-8?q?=EC=9D=B4=EC=98=88=EB=B9=88=20-=201=EB=8B=A8=EA=B3=84=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EC=84=B8=ED=8C=85=20(#1?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * remove unused * add Prettier * add global styles with Emotion * update README * add global styles with emotion * delete unused * add path * add prettier * main alias path --- .prettierrc | 12 +++++++++++ README.md | 15 ++++++++++++++ public/vite.svg | 1 - src/App.tsx | 24 +++------------------- src/assets/react.svg | 1 - src/emotionstyle.tsx | 47 ++++++++++++++++++++++++++++++++++++++++++++ src/main.tsx | 4 ++++ vite.config.ts | 7 +++++++ 8 files changed, 88 insertions(+), 23 deletions(-) create mode 100644 .prettierrc delete mode 100644 public/vite.svg delete mode 100644 src/assets/react.svg create mode 100644 src/emotionstyle.tsx diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..034a0b4f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,12 @@ +{ + "semi": true, + "singleQuote": true, + "printWidth": 80, + "trailingComma": "es5", + "tabWidth": 2, + "useTabs": false, + "bracketSpacing": true, + "arrowParens": "always", + "endOfLine": "lf" + } + \ No newline at end of file diff --git a/README.md b/README.md index cdf3e5c8..3d098465 100644 --- a/README.md +++ b/README.md @@ -1 +1,16 @@ # react-gift-login + +## 불필요한 코드나 파일 삭제 -> react.svg, vite.svg파일 및 import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' 등 import 해주는 코드 + +## 절대경로로 Import 할 수 있게 alias를 설정 + +## Prettier가 무엇인지 찾아보고 추가 + +## emotion 스타일 라이브러리를 추가, reset css를 적용 + +## 기본 폰트로 Pretendard를 적용 + +## 기능 단위로 나누어 커밋 + + + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 3d7ded3f..8e7651c1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,4 @@ import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' import './App.css' function App() { @@ -8,26 +6,10 @@ function App() { return ( <> -

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

+ ) } diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/emotionstyle.tsx b/src/emotionstyle.tsx new file mode 100644 index 00000000..82024e69 --- /dev/null +++ b/src/emotionstyle.tsx @@ -0,0 +1,47 @@ +/** @jsxImportSource @emotion/react */ +import { css, Global } from '@emotion/react'; + +const GlobalStyles = () => ( + +); + +export default GlobalStyles; diff --git a/src/main.tsx b/src/main.tsx index bef5202a..49761ed0 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,9 +2,13 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.tsx' +import GlobalStyles from './emotionstyle'; +import '@fontsource/pretendard/variable.css'; + createRoot(document.getElementById('root')!).render( + , ) diff --git a/vite.config.ts b/vite.config.ts index 8b0f57b9..78ed9023 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,14 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' +import p from 'path' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], + resolve:{ + alias:{ + '@':p.resolve(__dirname,'src'), + '@utils':p.resolve(__dirname,'src/utils'), + } + } }) From 6bf7cda12833800a92fc26f13c6811e08cb811a2 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Wed, 25 Jun 2025 15:53:29 +0900 Subject: [PATCH 11/40] add mockdata --- mockdata.ts | 94 +++++++++++++++++++++++++ src/theme.ts | 195 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 289 insertions(+) create mode 100644 mockdata.ts create mode 100644 src/theme.ts diff --git a/mockdata.ts b/mockdata.ts new file mode 100644 index 00000000..35acfafc --- /dev/null +++ b/mockdata.ts @@ -0,0 +1,94 @@ +const category=[ + { + themeId: 3715, + name: '생일', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371520241125_LQBMT.png', + }, + { + themeId: 3714, + name: '맛있는선물', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371420250401_CYHOR.png', + }, + { + themeId: 3713, + name: '직장동료', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371320250107_QWGZN.png', + }, + { + themeId: 3712, + name: '연인', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371220250107_YMYGC.png', + }, + { + themeId: 3993, + name: 'FOR ME', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F399320250519_CMTFF.png', + }, + { + themeId: 3710, + name: '가벼운선물', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371020250102_QSNFV.png', + }, + { + themeId: 3782, + name: '스몰럭셔리', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F378220250214_OHAQK.png', + }, + { + themeId: 3877, + name: '명품선물', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F387720250324_SDCJQ.png', + }, + { + themeId: 3707, + name: '출산・돌', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370720241228_QFZPM.png', + }, + { + themeId: 3697, + name: '결혼・집들이', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F369720250126_OGWLG.png', + }, + { + themeId: 3704, + name: '시원한선물', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370420250324_WDMHS.png', + }, + { + themeId: 3705, + name: '합격・응원', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370520250127_NLVFN.png', + }, + { + themeId: 3706, + name: '건강・케어', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370620250415_HENTO.png', + }, + { + themeId: 3703, + name: '교환권', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370320250331_NPPCU.png', + }, + { + themeId: 3702, + name: '웃긴선물', + image: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370220241228_UPSAE.png', + }, + ]; + export default category; + \ No newline at end of file diff --git a/src/theme.ts b/src/theme.ts new file mode 100644 index 00000000..6e3b2574 --- /dev/null +++ b/src/theme.ts @@ -0,0 +1,195 @@ +const theme = { + colors: { + gray00: '#ffffff', + gray100: '#f7f8f9', + gray200: '#f3f4f5', + gray300: '#eeeff1', + gray400: '#dcdee3', + gray500: '#d1d3d8', + gray600: '#b0b3ba', + gray700: '#868b94', + gray800: '#555d6d', + gray900: '#2a3038', + gray1000: '#1a1c20', + + yellow00: '#fffef9', + yellow100: '#fffce5', + yellow200: '#fff8b7', + yellow300: '#fff38a', + yellow400: '#ffef5c', + yellow500: '#ffea2e', + yellow600: '#fee500', // 카카오 메인 노란색 + yellow700: '#d5c000', + yellow800: '#ac9b00', + yellow900: '#847700', + yellow1000: '#5b5200', + + brown00: '#fff9f4', + brown100: '#ffeedc', + brown200: '#ffe2c4', + brown300: '#f9d0a8', + brown400: '#edbc8a', + brown500: '#cb9a69', + brown600: '#a97b4d', + brown700: '#875e35', + brown800: '#654321', // 카카오 브라운 + brown900: '#432a12', + brown1000: '#2d1b08', + + blue00: '#f8faff', + blue100: '#eff6ff', + blue200: '#e2edfc', + blue300: '#cbdffa', + blue400: '#aacefd', + blue500: '#85b8fd', + blue600: '#5e98fe', + blue700: '#217cf9', + blue800: '#135fcd', + blue900: '#0b4596', + blue1000: '#032451', + + red00: '#fffafa', + red100: '#fdf0f0', + red200: '#fde7e7', + red300: '#fed4d2', + red400: '#feb7b3', + red500: '#fe928d', + red600: '#fc6a66', + red700: '#fa342c', + red800: '#ca1d13', + red900: '#921708', + red1000: '#4a1209', + + semantic: { + kakaoYellow: '#fee500', + kakaoYellowHover: '#ffea2e', + kakaoYellowActive: '#d5c000', + kakaoYellowPressed: '#d5c000', + kakaoBrown: '#654321', + kakaoBrownPressed: '#432a12', + + backgroundDefault: '#ffffff', + backgroundDisabled: '#f3f4f5', + backgroundFill: '#f7f8f9', + + textDefault: '#2a3038', + textSub: '#b0b3ba', + textDisabled: '#dcdee3', + textPlaceholder: '#b0b3ba', + + borderDefault: '#dcdee3', + borderDisabled: '#eeeff1', + + statusCritical: '#fa342c', + statusCriticalBackground: '#fdf0f0', + statusInfo: '#217cf9', + statusInfoBackground: '#eff6ff', + } + }, + typography: { + title1Bold: { + fontSize: '1.25rem', // 20px + fontWeight: 700, + lineHeight: '1.6875rem', // 27px + }, + title1Regular: { + fontSize: '1.25rem', + fontWeight: 400, + lineHeight: '1.6875rem', + }, + title2Bold: { + fontSize: '1rem', // 16px + fontWeight: 700, + lineHeight: '1.5rem', // 24px + }, + title2Regular: { + fontSize: '1rem', + fontWeight: 400, + lineHeight: '1.5rem', + }, + subtitle1Bold: { + fontSize: '1rem', + fontWeight: 700, + lineHeight: '1.375rem', // 22px + }, + subtitle1Regular: { + fontSize: '1rem', + fontWeight: 400, + lineHeight: '1.5rem', + }, + subtitle2Bold: { + fontSize: '0.875rem', // 14px + fontWeight: 700, + lineHeight: '1.1875rem', // 19px + }, + subtitle2Regular: { + fontSize: '0.875rem', + fontWeight: 400, + lineHeight: '1.1875rem', + }, + body1Bold: { + fontSize: '1rem', + fontWeight: 700, + lineHeight: '1.375rem', + }, + body1Regular: { + fontSize: '1rem', + fontWeight: 400, + lineHeight: '1.375rem', + }, + body2Bold: { + fontSize: '0.875rem', + fontWeight: 700, + lineHeight: '1.1875rem', + }, + body2Regular: { + fontSize: '0.875rem', + fontWeight: 400, + lineHeight: '1.1875rem', + }, + label1Bold: { + fontSize: '0.875rem', + fontWeight: 700, + lineHeight: '1.1875rem', + }, + label1Regular: { + fontSize: '0.875rem', + fontWeight: 400, + lineHeight: '1.1875rem', + }, + label2Bold: { + fontSize: '0.75rem', // 12px + fontWeight: 700, + lineHeight: '1rem', // 16px + }, + label2Regular: { + fontSize: '0.75rem', + fontWeight: 400, + lineHeight: '1rem', + } + }, + spacing: { + spacing0: '0px', + spacing1: '4px', + spacing2: '8px', + spacing3: '12px', + spacing4: '16px', + spacing5: '20px', + spacing6: '24px', + spacing7: '28px', + spacing8: '32px', + spacing9: '36px', + spacing10: '40px', + spacing11: '44px', + spacing12: '48px', + spacing13: '52px', + spacing14: '56px', + spacing15: '60px', + spacing16: '64px', + } + }; + + +export type Theme = typeof theme; +export default theme; + \ No newline at end of file From b3696a3cc7cba8383c90d6f4ad9652cb9d62737e Mon Sep 17 00:00:00 2001 From: Yebeen Date: Wed, 25 Jun 2025 16:04:31 +0900 Subject: [PATCH 12/40] add token --- src/theme.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/theme.ts b/src/theme.ts index 6e3b2574..adbad8e9 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -188,8 +188,6 @@ const theme = { spacing16: '64px', } }; - export type Theme = typeof theme; -export default theme; - \ No newline at end of file +export default theme; \ No newline at end of file From 58fb5f4e26de91f25831d396172114c8ff5a9e83 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Thu, 26 Jun 2025 13:50:32 +0900 Subject: [PATCH 13/40] delete unused css files --- src/App.css | 42 --------- src/App.tsx | 4 +- src/emotionstyle.tsx | 27 ++++-- src/index.css | 68 -------------- src/main.tsx | 12 ++- src/navigation.tsx | 25 ++++++ tatus | 208 +++++++++++++++++++++++++++++++++++++++++++ vite.config.ts | 2 +- 8 files changed, 263 insertions(+), 125 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/index.css create mode 100644 src/navigation.tsx create mode 100644 tatus diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355df..00000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index 8e7651c1..ac7be6f1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,14 @@ import { useState } from 'react' import './App.css' +import GlobalStyles from './emotionstyle' +import Navibar from './navigation' + function App() { const [count, setCount] = useState(0) return ( <> -

Vite + React

diff --git a/src/emotionstyle.tsx b/src/emotionstyle.tsx index 82024e69..8912ff83 100644 --- a/src/emotionstyle.tsx +++ b/src/emotionstyle.tsx @@ -1,9 +1,16 @@ /** @jsxImportSource @emotion/react */ import { css, Global } from '@emotion/react'; +import { useTheme } from '@emotion/react'; +import type { Theme } from './theme'; -const GlobalStyles = () => ( + + +const GlobalStyles = () => { + const theme = useTheme() as Theme; + return( ( html, body { height: 100%; - font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, + font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - background-color: #fff; - color: #111; + max-width: 720px; + margin-left: auto; + margin-right: auto; + background-color: ${theme.colors.semantic.backgroundDefault}; + color:${theme.colors.semantic.textDefault}; } a { @@ -29,7 +39,7 @@ const GlobalStyles = () => ( } button { - background: none; + background: grey; border: none; cursor: pointer; font: inherit; @@ -39,9 +49,8 @@ const GlobalStyles = () => ( display: block; max-width: 100%; height: auto; + } `} - /> -); - -export default GlobalStyles; + />) +}; export default GlobalStyles; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 08a3ac9e..00000000 --- a/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.tsx b/src/main.tsx index 49761ed0..8f4c01d3 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,14 +1,18 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' +import { ThemeProvider } from '@emotion/react'; +import theme from './theme'; import './index.css' import App from './App.tsx' -import GlobalStyles from './emotionstyle'; -import '@fontsource/pretendard/variable.css'; - - +import GlobalStyles from './emotionstyle.tsx'; +import '@fontsource/pretendard/400.css'; +import category from '../mockdata'; createRoot(document.getElementById('root')!).render( + + , ) +console.log(category); \ No newline at end of file diff --git a/src/navigation.tsx b/src/navigation.tsx new file mode 100644 index 00000000..7d266c73 --- /dev/null +++ b/src/navigation.tsx @@ -0,0 +1,25 @@ +/**@jsxImportSource @emotion/react */ +import { useTheme } from '@emotion/react'; +import type { Theme } from './theme'; + + +const Navibar=()=>{ + const theme = useTheme() as Theme; + const navstyle=` + max-width:720px; + height: auto; + background:${theme.colors.semantic.kakaoYellow}; + display:flex; + align-items:center; + color:${theme.colors.gray1000}; + margin: 0 auto;` + + return (<> + + 선물하기 + + ) + +}; export default Navibar; \ No newline at end of file diff --git a/tatus b/tatus new file mode 100644 index 00000000..4d93e9e7 --- /dev/null +++ b/tatus @@ -0,0 +1,208 @@ +commit 6bf7cda12833800a92fc26f13c6811e08cb811a2 (HEAD -> step2) +Author: Yebeen +Date: Wed Jun 25 15:53:29 2025 +0900 + + add mockdata + +diff --git a/src/theme.ts b/src/theme.ts +new file mode 100644 +index 0000000..6e3b257 +--- /dev/null ++++ b/src/theme.ts +@@ -0,0 +1,195 @@ ++const theme = { ++ colors: { ++ gray00: '#ffffff', ++ gray100: '#f7f8f9', ++ gray200: '#f3f4f5', ++ gray300: '#eeeff1', ++ gray400: '#dcdee3', ++ gray500: '#d1d3d8', ++ gray600: '#b0b3ba', ++ gray700: '#868b94', ++ gray800: '#555d6d', ++ gray900: '#2a3038', ++ gray1000: '#1a1c20', ++  ++ yellow00: '#fffef9', ++ yellow100: '#fffce5', ++ yellow200: '#fff8b7', ++ yellow300: '#fff38a', ++ yellow400: '#ffef5c', ++ yellow500: '#ffea2e', ++ yellow600: '#fee500', // 카카오 메인 노란색 ++ yellow700: '#d5c000', ++ yellow800: '#ac9b00', ++ yellow900: '#847700', ++ yellow1000: '#5b5200', ++  ++ brown00: '#fff9f4', ++ brown100: '#ffeedc', ++ brown200: '#ffe2c4', ++ brown300: '#f9d0a8', ++ brown400: '#edbc8a', ++ brown500: '#cb9a69', ++ brown600: '#a97b4d', ++ brown700: '#875e35', ++ brown800: '#654321', // 카카오 브라운 ++ brown900: '#432a12', ++ brown1000: '#2d1b08', ++  ++ blue00: '#f8faff', ++ blue100: '#eff6ff', ++ blue200: '#e2edfc', ++ blue300: '#cbdffa', ++ blue400: '#aacefd', ++ blue500: '#85b8fd', ++ blue600: '#5e98fe', ++ blue700: '#217cf9', ++ blue800: '#135fcd', ++ blue900: '#0b4596', ++ blue1000: '#032451', ++  ++ red00: '#fffafa', ++ red100: '#fdf0f0', ++ red200: '#fde7e7', ++ red300: '#fed4d2', ++ red400: '#feb7b3', ++ red500: '#fe928d', ++ red600: '#fc6a66', ++ red700: '#fa342c', ++ red800: '#ca1d13', ++ red900: '#921708', ++ red1000: '#4a1209', ++  ++ semantic: { ++ kakaoYellow: '#fee500', ++ kakaoYellowHover: '#ffea2e', ++ kakaoYellowActive: '#d5c000', ++ kakaoYellowPressed: '#d5c000', ++ kakaoBrown: '#654321', ++ kakaoBrownPressed: '#432a12', ++  ++ backgroundDefault: '#ffffff', ++ backgroundDisabled: '#f3f4f5', ++ backgroundFill: '#f7f8f9', ++  ++ textDefault: '#2a3038', ++ textSub: '#b0b3ba', ++ textDisabled: '#dcdee3', ++ textPlaceholder: '#b0b3ba', ++  ++ borderDefault: '#dcdee3', ++ borderDisabled: '#eeeff1', ++  ++ statusCritical: '#fa342c', ++ statusCriticalBackground: '#fdf0f0', ++ statusInfo: '#217cf9', ++ statusInfoBackground: '#eff6ff', ++ } ++ }, ++ typography: { ++ title1Bold: { ++ fontSize: '1.25rem', // 20px ++ fontWeight: 700, ++ lineHeight: '1.6875rem', // 27px ++ }, ++ title1Regular: { ++ fontSize: '1.25rem', ++ fontWeight: 400, ++ lineHeight: '1.6875rem', ++ }, ++ title2Bold: { ++ fontSize: '1rem', // 16px ++ fontWeight: 700, ++ lineHeight: '1.5rem', // 24px ++ }, ++ title2Regular: { ++ fontSize: '1rem', ++ fontWeight: 400, ++ lineHeight: '1.5rem', ++ }, ++ subtitle1Bold: { ++ fontSize: '1rem', ++ fontWeight: 700, ++ lineHeight: '1.375rem', // 22px ++ }, ++ subtitle1Regular: { ++ fontSize: '1rem', ++ fontWeight: 400, ++ lineHeight: '1.5rem', ++ }, ++ subtitle2Bold: { ++ fontSize: '0.875rem', // 14px ++ fontWeight: 700, ++ lineHeight: '1.1875rem', // 19px ++ }, ++ subtitle2Regular: { ++ fontSize: '0.875rem', ++ fontWeight: 400, ++ lineHeight: '1.1875rem', ++ }, ++ body1Bold: { ++ fontSize: '1rem', ++ fontWeight: 700, ++ lineHeight: '1.375rem', ++ }, ++ body1Regular: { ++ fontSize: '1rem', ++ fontWeight: 400, ++ lineHeight: '1.375rem', ++ }, ++ body2Bold: { ++ fontSize: '0.875rem', ++ fontWeight: 700, ++ lineHeight: '1.1875rem', ++ }, ++ body2Regular: { ++ fontSize: '0.875rem', ++ fontWeight: 400, ++ lineHeight: '1.1875rem', ++ }, ++ label1Bold: { ++ fontSize: '0.875rem', ++ fontWeight: 700, ++ lineHeight: '1.1875rem', ++ }, ++ label1Regular: { ++ fontSize: '0.875rem', ++ fontWeight: 400, ++ lineHeight: '1.1875rem', ++ }, ++ label2Bold: { ++ fontSize: '0.75rem', // 12px ++ fontWeight: 700, ++ lineHeight: '1rem', // 16px ++ }, ++ label2Regular: { ++ fontSize: '0.75rem', ++ fontWeight: 400, ++ lineHeight: '1rem', ++ } ++ }, ++ spacing: { ++ spacing0: '0px', ++ spacing1: '4px', ++ spacing2: '8px', ++ spacing3: '12px', ++ spacing4: '16px', ++ spacing5: '20px', ++ spacing6: '24px', ++ spacing7: '28px', ++ spacing8: '32px', ++ spacing9: '36px', ++ spacing10: '40px', ++ spacing11: '44px', ++ spacing12: '48px', ++ spacing13: '52px', ++ spacing14: '56px', ++ spacing15: '60px', ++ spacing16: '64px', ++ } ++ }; ++ ++  ++export type Theme = typeof theme; ++export default theme; ++  +\ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 78ed9023..6796604b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -11,4 +11,4 @@ export default defineConfig({ '@utils':p.resolve(__dirname,'src/utils'), } } -}) +}) \ No newline at end of file From d09668600fbb21ace478efe0b3da8f5c8de27f3b Mon Sep 17 00:00:00 2001 From: Yebeen Date: Thu, 26 Jun 2025 16:58:08 +0900 Subject: [PATCH 14/40] add navigation bar --- src/navigation.tsx | 79 +++++++++++++++++++++++++++++++++------------- 1 file changed, 57 insertions(+), 22 deletions(-) diff --git a/src/navigation.tsx b/src/navigation.tsx index 7d266c73..660f0ab7 100644 --- a/src/navigation.tsx +++ b/src/navigation.tsx @@ -1,25 +1,60 @@ -/**@jsxImportSource @emotion/react */ -import { useTheme } from '@emotion/react'; +/** @jsxImportSource @emotion/react */ +import { css, useTheme } from '@emotion/react'; import type { Theme } from './theme'; +const Navibar = () => { + const theme = useTheme() as Theme; -const Navibar=()=>{ - const theme = useTheme() as Theme; - const navstyle=` - max-width:720px; - height: auto; - background:${theme.colors.semantic.kakaoYellow}; - display:flex; - align-items:center; - color:${theme.colors.gray1000}; - margin: 0 auto;` - - return (<> - - 선물하기 - - ) - -}; export default Navibar; \ No newline at end of file + const container = css` + max-width: 720px; + height: 50px; + background: ${theme.colors.semantic.backgroundDefault}; + display: flex; + align-items: center; + justify-content: space-between; /* 세 요소 좌우 배치 */ + margin: 0 auto; + padding: 0 16px; + `; + + const navstyle = css` + font-size: ${theme.typography.title1Bold.fontSize}; + font-weight: ${theme.typography.title1Bold.fontWeight}; + line-height: ${theme.typography.title1Bold.lineHeight}; + color: ${theme.colors.semantic.textDefault}; + `; + + const per = css` + cursor: pointer; + width: 40px; + height: 40px; + background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6aLBdZ-dWr4tVuP38je4WW2WVGphxmiINHA&s'); + background-size: contain; + background-position: center; + ` + + + const pre = css` + cursor: pointer; + `; + + const preStyle = css` + width: 40px; + height: 40px; + color: black; + font-size: 25px; + `; + + return ( +
+
+
<
+
+ + + +
+
+ ); +}; + +export default Navibar; From d95a3d743886268c5f5192286e82e18e7c8913c4 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Thu, 26 Jun 2025 16:59:28 +0900 Subject: [PATCH 15/40] select Friend --- src/selectFr.tsx | 57 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/selectFr.tsx diff --git a/src/selectFr.tsx b/src/selectFr.tsx new file mode 100644 index 00000000..3fe8b1b7 --- /dev/null +++ b/src/selectFr.tsx @@ -0,0 +1,57 @@ +/** @jsxImportSource @emotion/react */ +import { css, useTheme } from '@emotion/react'; +import type { Theme } from './theme'; +import React from 'react'; + +const SelectFr: React.FC = () => { + const theme = useTheme() as Theme; + + const containerStyle = css` + padding: ${theme.spacing.spacing4}; + display: flex; + flex-direction: column; + gap: ${theme.spacing.spacing4}; + height: 80px; + `; + const friendBoxStyle = css` + display: flex; + align-items: center; + gap: ${theme.spacing.spacing2}; + padding: ${theme.spacing.spacing2}; + border-radius: 8px; + `; + + const plusCircleStyle = css` + width: 40px; + height: 40px; + background-color: ${theme.colors.semantic.kakaoYellow}; + color: black; + font-size: 25px; + font-weight: bold; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + `; + + const bannerStyle = css` + background-color: ${theme.colors.semantic.backgroundDefault}; + padding: ${theme.spacing.spacing2}; + font-size: ${theme.typography.label2Regular.fontSize}; + border-radius: 8px; + `; + + return ( +
+
+
+
+ 선물할 친구를 선택해 주세요. +
+ +
+
+
+ ); +}; + +export default SelectFr; From 0fa162d62a8c779802cd70589d1bb2a364b057e2 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Thu, 26 Jun 2025 17:01:51 +0900 Subject: [PATCH 16/40] select Category --- src/selectCategory.tsx | 82 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 src/selectCategory.tsx diff --git a/src/selectCategory.tsx b/src/selectCategory.tsx new file mode 100644 index 00000000..db580a28 --- /dev/null +++ b/src/selectCategory.tsx @@ -0,0 +1,82 @@ +/** @jsxImportSource @emotion/react */ +import { useTheme } from '@emotion/react'; +import type { Theme } from './theme'; +import { css } from '@emotion/react'; + +const themes = [ + { label: '생일', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371520241125_LQBMT.png' }, + { label: '맛있는선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371420250401_CYHOR.png' }, + { label: '직장동료', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371320250107_QWGZN.png' }, + { label: '연인', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371220250107_YMYGC.png' }, + { label: 'FOR ME', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F399320250519_CMTFF.png' }, + { label: '가벼운선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371020250102_QSNFV.png' }, + { label: '스몰럭셔리', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F378220250214_OHAQK.png' }, + { label: '명품선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F387720250324_SDCJQ.png' }, + { label: '출산 · 돌', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370720241228_QFZPM.png' }, + { label: '결혼 · 집들이', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F369720250126_OGWLG.png' }, + { label: '시원한선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370420250324_WDMHS.png' }, + { label: '합격 · 응원', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370520250127_NLVFN.png' }, + { label: '건강 · 케어', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370620250415_HENTO.png' }, + { label: '교환권', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370320250331_NPPCU.png' }, + { label: '웃긴선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370220241228_UPSAE.png' }, +]; + +export default function GiftThemeSection() { + const theme = useTheme() as Theme; + + const wrapperStyle = css` + padding: ${theme.spacing.spacing5}; + `; + + const titleStyle = css` + font-size: ${theme.typography.title2Bold.fontSize}; + font-weight: ${theme.typography.title2Bold.fontWeight}; + line-height: ${theme.typography.title2Bold.lineHeight}; + margin-bottom: ${theme.spacing.spacing4}; + `; + + const gridStyle = css` + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: ${theme.spacing.spacing4}; + + @media (max-width: 480px) { + grid-template-columns: repeat(3, 1fr); + } + `; + + const itemStyle = css` + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + span { + font-size: ${theme.typography.label1Regular.fontSize}; + font-weight: ${theme.typography.label1Regular.fontWeight}; + line-height: ${theme.typography.label1Regular.lineHeight}; + color: ${theme.colors.semantic.textDefault}; + margin-top: ${theme.spacing.spacing2}; + } + + img { + width: 56px; + height: 56px; + object-fit: contain; + } + `; + + return ( +
+

선물 테마

+
+ {themes.map((item) => ( +
+ {item.label} + {item.label} +
+ ))} +
+
+ ); +} From d00dcf57c9def093fde2a26c39122dfedc381da3 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Thu, 26 Jun 2025 17:02:38 +0900 Subject: [PATCH 17/40] elsesection --- src/elsesection.tsx | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/elsesection.tsx diff --git a/src/elsesection.tsx b/src/elsesection.tsx new file mode 100644 index 00000000..550190cc --- /dev/null +++ b/src/elsesection.tsx @@ -0,0 +1,37 @@ +/** @jsxImportSource @emotion/react */ +import { css, useTheme } from '@emotion/react'; +import type { Theme } from './theme'; + +export default function Banner() { + const theme = useTheme() as Theme; + + const containerStyle = css` + background-Color: ${theme.colors.semantic.kakaoYellow}; + border-radius: 10px; + padding: ${theme.spacing.spacing4}; + display: flex; + flex-direction: column; + + gap: ${theme.spacing.spacing1}; + color: ${theme.colors.semantic.textDefault};` + + +const textStyle = css` + font-size: ${theme.typography.label1Regular.fontSize}; + font-weight: ${theme.typography.label1Regular.fontWeight}; + line-height: ${theme.typography.label1Regular.lineHeight}; + color: ${theme.colors.semantic.textDefault}; +`; +const t2Style = css` + font-size: ${theme.typography.subtitle1Bold.fontSize}; + font-weight: ${theme.typography.subtitle1Bold.fontWeight}; + line-height: ${theme.typography.subtitle1Bold.lineHeight}; + color: ${theme.colors.semantic.textDefault}; +`; + +return ( +
+

카카오테크 캠퍼스 3기 여러분

+

프론트엔드 2단계 과제 화이팅! 🎉

+
+)}; From 9659267b8affca3e4cd3fc89ef384a2e169eb0d6 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Thu, 26 Jun 2025 17:04:21 +0900 Subject: [PATCH 18/40] giftRanking --- src/giftRanking.tsx | 168 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 src/giftRanking.tsx diff --git a/src/giftRanking.tsx b/src/giftRanking.tsx new file mode 100644 index 00000000..4de6db83 --- /dev/null +++ b/src/giftRanking.tsx @@ -0,0 +1,168 @@ +/** @jsxImportSource @emotion/react */ +import { css, useTheme } from '@emotion/react'; +import type { Theme } from './theme'; +import React, { useState } from 'react'; + +const tabs = ['전체', '여성이', '남성이', '청소년이']; +const subTabs = ['받고 싶어한', '많이 선물한', '위시로 받은']; + +const products = Array.from({ length: 6 }).map((_, i) => ({ + id: i + 1, + brand: 'BBQ', + name: 'BBQ', + price: 29000, + image: 'https://st.kakaocdn.net/product/gift/product/20231030175450_53e90ee9708f45ffa45b3f7b4bc01c7c.jpg', +})); + +const GiftRanking = () => { + const theme = useTheme() as Theme; + const [selectedTab, setSelectedTab] = useState('전체'); + const [selectedSubTab, setSelectedSubTab] = useState('받고 싶어한'); + + const sectionStyle = css` + padding: ${theme.spacing.spacing5}; + `; + + + const titleStyle = css` + font-size: ${theme.typography.title1Bold.fontSize}; + font-weight: ${theme.typography.title1Bold.fontWeight}; + margin-bottom: ${theme.spacing.spacing4}; + `; + + const tabsStyle = css` + display: flex; + gap: ${theme.spacing.spacing2}; + margin-bottom: ${theme.spacing.spacing3}; + `; + + const tabStyle = (selected: boolean) => css` + padding: 6px 12px; + border-radius: 9999px; + background-color: ${selected ? theme.colors.blue900 : '#5084ea'}; + color: ${selected ? 'white' : theme.colors.blue00}; + font-weight: 600; + font-size: 14px; + cursor: pointer; + transition: background-color 0.2s ease; + `; + + const subTabContainer = css` + display: flex; + justify-content: space-around; + background: #eef3ff; + border-radius: 8px; + margin-bottom: ${theme.spacing.spacing4}; + font-size: 14px; + padding: 8px 0; + `; + + const subTabStyle = (selected: boolean) => css` + font-weight: 600; + color: ${selected ? theme.colors.blue900 : theme.colors.semantic.textDefault}; + cursor: pointer; + padding: 4px 8px; + border-bottom: ${selected ? `2px solid ${theme.colors.blue900}` : 'none'}; + transition: color 0.2s ease, border-bottom 0.2s ease; + `; + + const gridStyle = css` + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: ${theme.spacing.spacing4}; + `; + + const cardStyle = css` + position: relative; + border-radius: 8px; + overflow: hidden; + background: white; + padding: ${theme.spacing.spacing2}; + text-align: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + `; + + const rankBadge = (rank : number) => css` + position: absolute; + top: 8px; + left: 8px; + background-color: red; + color: white; + font-size: 12px; + width: 24px; + height: 24px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + `; + + const imageStyle = css` + width: 100%; + height: auto; + margin-bottom: ${theme.spacing.spacing2}; + `; + + const brandStyle = css` + font-size: 12px; + color: ${theme.colors.gray400}; + `; + + const nameStyle = css` + font-weight: 500; + margin-top: 2px; + `; + + const priceStyle = css` + font-weight: bold; + margin-top: 4px; + `; + const more=css` + border:1px solid ${theme.colors.semantic.borderDefault}; + border-radius: 10px; + display:flex; + align-items: center; + justify-content: center; + padding:5px; + ` + + return ( +
+

실시간 급상승 선물랭킹

+ + +
+ {tabs.map((tab) => ( + + ))} +
+ + +
+ {subTabs.map((text) => ( + setSelectedSubTab(text)}> + {text} + + ))} +
+ +
+ {products.map((item) => ( +
+
{item.id}
+ {item.name} +
{item.brand}
+
{item.name}
+
{item.price.toLocaleString()} 원
+
+ ))} +
+
더보기
+
+ ); +}; + +export default GiftRanking; From a656905e5f0008f4436c911c4494af3d49d48a93 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Thu, 26 Jun 2025 17:05:01 +0900 Subject: [PATCH 19/40] app.tsx --- src/App.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ac7be6f1..a4936213 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,22 @@ import { useState } from 'react' -import './App.css' import GlobalStyles from './emotionstyle' import Navibar from './navigation' - +import React from "react"; +import SelectCategory from "./selectCategory"; +import Banner from "./elsesection"; +import GiftRanking from "./giftRanking"; +import SelectFr from './selectFr'; function App() { - const [count, setCount] = useState(0) return ( <> - + + <> + <> + <> + <> + ) } From 4179adb6a5dbbaa4c14c6f00f6bd6cabc2efcd9c Mon Sep 17 00:00:00 2001 From: Yebeen Date: Thu, 26 Jun 2025 17:05:19 +0900 Subject: [PATCH 20/40] main.tsx --- src/main.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/main.tsx b/src/main.tsx index 8f4c01d3..38faf730 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,6 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { ThemeProvider } from '@emotion/react'; import theme from './theme'; -import './index.css' import App from './App.tsx' import GlobalStyles from './emotionstyle.tsx'; import '@fontsource/pretendard/400.css'; From 8fc23d8c0d3680e3591405c0cf2b164159978f3a Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:00:26 +0900 Subject: [PATCH 21/40] refactor(path) --- src/App.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a4936213..fe475344 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,9 @@ -import { useState } from 'react' -import GlobalStyles from './emotionstyle' -import Navibar from './navigation' -import React from "react"; -import SelectCategory from "./selectCategory"; -import Banner from "./elsesection"; -import GiftRanking from "./giftRanking"; -import SelectFr from './selectFr'; +import GlobalStyles from '@/emotionstyle'; +import Navibar from '@/navigation'; +import SelectCategory from '@/selectCategory'; +import Banner from '@/Banner'; +import GiftRanking from '@/giftRanking'; +import SelectFr from '@/selectFr'; function App() { From 6f841850f9c643d5cf122de1a14d65805c62a3b2 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:02:02 +0900 Subject: [PATCH 22/40] refactor(name) --- src/Banner.tsx | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/Banner.tsx diff --git a/src/Banner.tsx b/src/Banner.tsx new file mode 100644 index 00000000..6ba8ffc2 --- /dev/null +++ b/src/Banner.tsx @@ -0,0 +1,34 @@ +import { css } from '@emotion/react'; +import hook from './hook'; +import type { Theme } from '@/theme'; +const containerStyle = (theme:Theme)=>css` +background-Color: ${theme.colors.semantic.kakaoYellow}; +border-radius: 10px; +padding: ${theme.spacing.spacing4}; +display: flex; +flex-direction: column; +gap: ${theme.spacing.spacing1}; +color: ${theme.colors.semantic.textDefault};` + +const textStyle = (theme:Theme)=>css` +font-size: ${theme.typography.label1Regular.fontSize}; +font-weight: ${theme.typography.label1Regular.fontWeight}; +line-height: ${theme.typography.label1Regular.lineHeight}; +color: ${theme.colors.semantic.textDefault}; +`; + +const t2Style = (theme:Theme)=>css` +font-size: ${theme.typography.subtitle1Bold.fontSize}; +font-weight: ${theme.typography.subtitle1Bold.fontWeight}; +line-height: ${theme.typography.subtitle1Bold.lineHeight}; +color: ${theme.colors.semantic.textDefault}; +`; + +export default function Banner() { + const theme = hook(); +return ( +
+

카카오테크 캠퍼스 3기 여러분

+

프론트엔드 2단계 과제 화이팅! 🎉

+
+)}; From 3adf7806f54d874b59020fed1da3396f8147868e Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:03:49 +0900 Subject: [PATCH 23/40] refactor(hook) --- src/emotionstyle.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/emotionstyle.tsx b/src/emotionstyle.tsx index 8912ff83..19f96f74 100644 --- a/src/emotionstyle.tsx +++ b/src/emotionstyle.tsx @@ -1,12 +1,7 @@ -/** @jsxImportSource @emotion/react */ import { css, Global } from '@emotion/react'; -import { useTheme } from '@emotion/react'; -import type { Theme } from './theme'; - - - +import hook from './hook'; const GlobalStyles = () => { - const theme = useTheme() as Theme; + const theme = hook(); return( Date: Fri, 27 Jun 2025 16:06:06 +0900 Subject: [PATCH 24/40] refactor(hook), refactor(style) --- src/giftRanking.tsx | 255 ++++++++++++++++++++++---------------------- 1 file changed, 128 insertions(+), 127 deletions(-) diff --git a/src/giftRanking.tsx b/src/giftRanking.tsx index 4de6db83..8640d0a5 100644 --- a/src/giftRanking.tsx +++ b/src/giftRanking.tsx @@ -1,8 +1,7 @@ -/** @jsxImportSource @emotion/react */ -import { css, useTheme } from '@emotion/react'; -import type { Theme } from './theme'; -import React, { useState } from 'react'; - +import { css} from '@emotion/react'; +import { useState } from 'react'; +import hook from './hook'; +import type { Theme } from '@/theme'; const tabs = ['전체', '여성이', '남성이', '청소년이']; const subTabs = ['받고 싶어한', '많이 선물한', '위시로 받은']; @@ -14,153 +13,155 @@ const products = Array.from({ length: 6 }).map((_, i) => ({ image: 'https://st.kakaocdn.net/product/gift/product/20231030175450_53e90ee9708f45ffa45b3f7b4bc01c7c.jpg', })); + +const sectionStyle = (theme:Theme)=>css` +padding: ${theme.spacing.spacing5}; +`; + + +const titleStyle= (theme:Theme)=>css` +font-size: ${theme.typography.title1Bold.fontSize}; +font-weight: ${theme.typography.title1Bold.fontWeight}; +margin-bottom: ${theme.spacing.spacing4}; +`; + +const tabsStyle= (theme:Theme)=>css` +display: flex; +gap: ${theme.spacing.spacing2}; +margin-bottom: ${theme.spacing.spacing3}; +`; + +const tabStyle = (theme:Theme,selected: boolean) => css` +padding: 6px 12px; +border-radius: 9999px; +background-color: ${selected ? theme.colors.blue900 : '#5084ea'}; +color: ${selected ? 'white' : theme.colors.blue00}; +font-weight: 600; +font-size: 14px; +cursor: pointer; +transition: background-color 0.2s ease; +`; + +const subTabContainer =(theme:Theme)=> css` +display: flex; +justify-content: space-around; +background: #eef3ff; +border-radius: 8px; +margin-bottom: ${theme.spacing.spacing4}; +font-size: 14px; +padding: 8px 0; +`; + +const subTabStyle = (theme:Theme,selected: boolean) => css` +font-weight: 600; +color: ${selected ? theme.colors.blue900 : theme.colors.semantic.textDefault}; +cursor: pointer; +padding: 4px 8px; +border-bottom: ${selected ? `2px solid ${theme.colors.blue900}` : 'none'}; +transition: color 0.2s ease, border-bottom 0.2s ease; +`; + +const gridStyle = (theme:Theme)=>css` +display: grid; +grid-template-columns: repeat(3, 1fr); +gap: ${theme.spacing.spacing4}; +`; + +const cardStyle = (theme:Theme)=>css` +position: relative; +border-radius: 8px; +overflow: hidden; +background: white; +padding: ${theme.spacing.spacing2}; +text-align: center; +box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +`; + +const rankBadge = (theme:Theme,rank : number) => css` +position: absolute; +top: 8px; +left: 8px; +background-color: red; +color: white; +font-size: 12px; +width: 24px; +height: 24px; +border-radius: 50%; +display: flex; +align-items: center; +justify-content: center; +font-weight: bold; +`; + +const imageStyle = (theme:Theme)=>css` +width: 100%; +height: auto; +margin-bottom: ${theme.spacing.spacing2}; +`; + +const brandStyle = (theme:Theme)=>css` +font-size: 12px; +color: ${theme.colors.gray400}; +`; + +const nameStyle = (theme:Theme)=>css` +font-weight: 500; +margin-top: 2px; +`; + +const priceStyle = (theme:Theme)=>css` +font-weight: bold; +margin-top: 4px; +`; +const more=(theme:Theme)=>css` +border:1px solid ${theme.colors.semantic.borderDefault}; +border-radius: 10px; +display:flex; +align-items: center; +justify-content: center; +padding:5px; +` + const GiftRanking = () => { - const theme = useTheme() as Theme; + const theme = hook(); const [selectedTab, setSelectedTab] = useState('전체'); const [selectedSubTab, setSelectedSubTab] = useState('받고 싶어한'); - const sectionStyle = css` - padding: ${theme.spacing.spacing5}; - `; - - - const titleStyle = css` - font-size: ${theme.typography.title1Bold.fontSize}; - font-weight: ${theme.typography.title1Bold.fontWeight}; - margin-bottom: ${theme.spacing.spacing4}; - `; - - const tabsStyle = css` - display: flex; - gap: ${theme.spacing.spacing2}; - margin-bottom: ${theme.spacing.spacing3}; - `; - - const tabStyle = (selected: boolean) => css` - padding: 6px 12px; - border-radius: 9999px; - background-color: ${selected ? theme.colors.blue900 : '#5084ea'}; - color: ${selected ? 'white' : theme.colors.blue00}; - font-weight: 600; - font-size: 14px; - cursor: pointer; - transition: background-color 0.2s ease; - `; - - const subTabContainer = css` - display: flex; - justify-content: space-around; - background: #eef3ff; - border-radius: 8px; - margin-bottom: ${theme.spacing.spacing4}; - font-size: 14px; - padding: 8px 0; - `; - - const subTabStyle = (selected: boolean) => css` - font-weight: 600; - color: ${selected ? theme.colors.blue900 : theme.colors.semantic.textDefault}; - cursor: pointer; - padding: 4px 8px; - border-bottom: ${selected ? `2px solid ${theme.colors.blue900}` : 'none'}; - transition: color 0.2s ease, border-bottom 0.2s ease; - `; - - const gridStyle = css` - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: ${theme.spacing.spacing4}; - `; - - const cardStyle = css` - position: relative; - border-radius: 8px; - overflow: hidden; - background: white; - padding: ${theme.spacing.spacing2}; - text-align: center; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); - `; - - const rankBadge = (rank : number) => css` - position: absolute; - top: 8px; - left: 8px; - background-color: red; - color: white; - font-size: 12px; - width: 24px; - height: 24px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; - `; - - const imageStyle = css` - width: 100%; - height: auto; - margin-bottom: ${theme.spacing.spacing2}; - `; - - const brandStyle = css` - font-size: 12px; - color: ${theme.colors.gray400}; - `; - - const nameStyle = css` - font-weight: 500; - margin-top: 2px; - `; - - const priceStyle = css` - font-weight: bold; - margin-top: 4px; - `; - const more=css` - border:1px solid ${theme.colors.semantic.borderDefault}; - border-radius: 10px; - display:flex; - align-items: center; - justify-content: center; - padding:5px; - ` return ( -
-

실시간 급상승 선물랭킹

+
+

실시간 급상승 선물랭킹

-
+
{tabs.map((tab) => ( - ))}
-
+
{subTabs.map((text) => ( - setSelectedSubTab(text)}> + setSelectedSubTab(text)}> {text} ))}
-
+
{products.map((item) => ( -
-
{item.id}
- {item.name} -
{item.brand}
-
{item.name}
-
{item.price.toLocaleString()} 원
+
+
{item.id}
+ {item.name} +
{item.brand}
+
{item.name}
+
{item.price.toLocaleString()} 원
))}
-
더보기
+
더보기
); }; From de07b1ec232b5a8bb8360596a9bc4e6cb24e193f Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:06:49 +0900 Subject: [PATCH 25/40] feat(hook) --- src/hook.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/hook.ts diff --git a/src/hook.ts b/src/hook.ts new file mode 100644 index 00000000..3de8be28 --- /dev/null +++ b/src/hook.ts @@ -0,0 +1,7 @@ + +import { useTheme } from '@emotion/react'; +import type { Theme } from './theme'; + +export default function hook(): Theme { + return useTheme() as Theme; +} From a2ab30fa80eed496a924f09bce99aab1f284f025 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:09:17 +0900 Subject: [PATCH 26/40] refactor(path) --- src/main.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index 38faf730..0d60cecb 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,9 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { ThemeProvider } from '@emotion/react'; -import theme from './theme'; -import App from './App.tsx' -import GlobalStyles from './emotionstyle.tsx'; +import theme from '@/theme'; +import App from '@/App.tsx' +import GlobalStyles from '@/emotionstyle.tsx'; import '@fontsource/pretendard/400.css'; import category from '../mockdata'; createRoot(document.getElementById('root')!).render( From b9a23f7b234c8b06eac1007e2db7d74ad0b83b31 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:10:02 +0900 Subject: [PATCH 27/40] refactor(path) --- src/navigation.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/navigation.tsx b/src/navigation.tsx index 660f0ab7..9753ff1b 100644 --- a/src/navigation.tsx +++ b/src/navigation.tsx @@ -1,11 +1,8 @@ -/** @jsxImportSource @emotion/react */ -import { css, useTheme } from '@emotion/react'; -import type { Theme } from './theme'; +import { css } from '@emotion/react'; +import type { Theme } from '@/theme'; +import hook from './hook'; -const Navibar = () => { - const theme = useTheme() as Theme; - - const container = css` +const container = (theme:Theme)=>css` max-width: 720px; height: 50px; background: ${theme.colors.semantic.backgroundDefault}; @@ -16,7 +13,7 @@ const Navibar = () => { padding: 0 16px; `; - const navstyle = css` + const navstyle = (theme:Theme)=>css` font-size: ${theme.typography.title1Bold.fontSize}; font-weight: ${theme.typography.title1Bold.fontWeight}; line-height: ${theme.typography.title1Bold.lineHeight}; @@ -44,13 +41,15 @@ const Navibar = () => { font-size: 25px; `; +const Navibar = () => { + const theme = hook(); return ( -
+
<
- +
From eeca54048dc01246f22ad1941485cdd053639e69 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:10:57 +0900 Subject: [PATCH 28/40] refactor(path) --- src/selectCategory.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/selectCategory.tsx b/src/selectCategory.tsx index db580a28..89ce2c17 100644 --- a/src/selectCategory.tsx +++ b/src/selectCategory.tsx @@ -1,6 +1,5 @@ -/** @jsxImportSource @emotion/react */ import { useTheme } from '@emotion/react'; -import type { Theme } from './theme'; +import type { Theme } from '@/theme'; import { css } from '@emotion/react'; const themes = [ From 1c6c8342d7ccfd8d64234a9f3ed2ce5a8957b797 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:12:12 +0900 Subject: [PATCH 29/40] refactor(hook) --- src/selectFr.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/selectFr.tsx b/src/selectFr.tsx index 3fe8b1b7..8412e5b2 100644 --- a/src/selectFr.tsx +++ b/src/selectFr.tsx @@ -1,10 +1,7 @@ -/** @jsxImportSource @emotion/react */ -import { css, useTheme } from '@emotion/react'; -import type { Theme } from './theme'; -import React from 'react'; - -const SelectFr: React.FC = () => { - const theme = useTheme() as Theme; +import { css} from '@emotion/react'; +import hook from './hook' +const SelectFr = () => { + const theme = hook(); const containerStyle = css` padding: ${theme.spacing.spacing4}; From 5c79ac408bf346966d373e0e2a67e96134e81a29 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:13:21 +0900 Subject: [PATCH 30/40] feat(jsxImportSource) --- tsconfig.app.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/tsconfig.app.json b/tsconfig.app.json index c9ccbd4c..913e6177 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,5 +1,11 @@ { "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"], + "@utils/*": ["src/utils/*"] + }, + "jsxImportSource": "@emotion/react", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2020", "useDefineForClassFields": true, From 558b99bed7df2463124473c204d6d179b1e4aa89 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:16:11 +0900 Subject: [PATCH 31/40] refactor(delete file) --- tatus | 208 ---------------------------------------------------------- 1 file changed, 208 deletions(-) delete mode 100644 tatus diff --git a/tatus b/tatus deleted file mode 100644 index 4d93e9e7..00000000 --- a/tatus +++ /dev/null @@ -1,208 +0,0 @@ -commit 6bf7cda12833800a92fc26f13c6811e08cb811a2 (HEAD -> step2) -Author: Yebeen -Date: Wed Jun 25 15:53:29 2025 +0900 - - add mockdata - -diff --git a/src/theme.ts b/src/theme.ts -new file mode 100644 -index 0000000..6e3b257 ---- /dev/null -+++ b/src/theme.ts -@@ -0,0 +1,195 @@ -+const theme = { -+ colors: { -+ gray00: '#ffffff', -+ gray100: '#f7f8f9', -+ gray200: '#f3f4f5', -+ gray300: '#eeeff1', -+ gray400: '#dcdee3', -+ gray500: '#d1d3d8', -+ gray600: '#b0b3ba', -+ gray700: '#868b94', -+ gray800: '#555d6d', -+ gray900: '#2a3038', -+ gray1000: '#1a1c20', -+  -+ yellow00: '#fffef9', -+ yellow100: '#fffce5', -+ yellow200: '#fff8b7', -+ yellow300: '#fff38a', -+ yellow400: '#ffef5c', -+ yellow500: '#ffea2e', -+ yellow600: '#fee500', // 카카오 메인 노란색 -+ yellow700: '#d5c000', -+ yellow800: '#ac9b00', -+ yellow900: '#847700', -+ yellow1000: '#5b5200', -+  -+ brown00: '#fff9f4', -+ brown100: '#ffeedc', -+ brown200: '#ffe2c4', -+ brown300: '#f9d0a8', -+ brown400: '#edbc8a', -+ brown500: '#cb9a69', -+ brown600: '#a97b4d', -+ brown700: '#875e35', -+ brown800: '#654321', // 카카오 브라운 -+ brown900: '#432a12', -+ brown1000: '#2d1b08', -+  -+ blue00: '#f8faff', -+ blue100: '#eff6ff', -+ blue200: '#e2edfc', -+ blue300: '#cbdffa', -+ blue400: '#aacefd', -+ blue500: '#85b8fd', -+ blue600: '#5e98fe', -+ blue700: '#217cf9', -+ blue800: '#135fcd', -+ blue900: '#0b4596', -+ blue1000: '#032451', -+  -+ red00: '#fffafa', -+ red100: '#fdf0f0', -+ red200: '#fde7e7', -+ red300: '#fed4d2', -+ red400: '#feb7b3', -+ red500: '#fe928d', -+ red600: '#fc6a66', -+ red700: '#fa342c', -+ red800: '#ca1d13', -+ red900: '#921708', -+ red1000: '#4a1209', -+  -+ semantic: { -+ kakaoYellow: '#fee500', -+ kakaoYellowHover: '#ffea2e', -+ kakaoYellowActive: '#d5c000', -+ kakaoYellowPressed: '#d5c000', -+ kakaoBrown: '#654321', -+ kakaoBrownPressed: '#432a12', -+  -+ backgroundDefault: '#ffffff', -+ backgroundDisabled: '#f3f4f5', -+ backgroundFill: '#f7f8f9', -+  -+ textDefault: '#2a3038', -+ textSub: '#b0b3ba', -+ textDisabled: '#dcdee3', -+ textPlaceholder: '#b0b3ba', -+  -+ borderDefault: '#dcdee3', -+ borderDisabled: '#eeeff1', -+  -+ statusCritical: '#fa342c', -+ statusCriticalBackground: '#fdf0f0', -+ statusInfo: '#217cf9', -+ statusInfoBackground: '#eff6ff', -+ } -+ }, -+ typography: { -+ title1Bold: { -+ fontSize: '1.25rem', // 20px -+ fontWeight: 700, -+ lineHeight: '1.6875rem', // 27px -+ }, -+ title1Regular: { -+ fontSize: '1.25rem', -+ fontWeight: 400, -+ lineHeight: '1.6875rem', -+ }, -+ title2Bold: { -+ fontSize: '1rem', // 16px -+ fontWeight: 700, -+ lineHeight: '1.5rem', // 24px -+ }, -+ title2Regular: { -+ fontSize: '1rem', -+ fontWeight: 400, -+ lineHeight: '1.5rem', -+ }, -+ subtitle1Bold: { -+ fontSize: '1rem', -+ fontWeight: 700, -+ lineHeight: '1.375rem', // 22px -+ }, -+ subtitle1Regular: { -+ fontSize: '1rem', -+ fontWeight: 400, -+ lineHeight: '1.5rem', -+ }, -+ subtitle2Bold: { -+ fontSize: '0.875rem', // 14px -+ fontWeight: 700, -+ lineHeight: '1.1875rem', // 19px -+ }, -+ subtitle2Regular: { -+ fontSize: '0.875rem', -+ fontWeight: 400, -+ lineHeight: '1.1875rem', -+ }, -+ body1Bold: { -+ fontSize: '1rem', -+ fontWeight: 700, -+ lineHeight: '1.375rem', -+ }, -+ body1Regular: { -+ fontSize: '1rem', -+ fontWeight: 400, -+ lineHeight: '1.375rem', -+ }, -+ body2Bold: { -+ fontSize: '0.875rem', -+ fontWeight: 700, -+ lineHeight: '1.1875rem', -+ }, -+ body2Regular: { -+ fontSize: '0.875rem', -+ fontWeight: 400, -+ lineHeight: '1.1875rem', -+ }, -+ label1Bold: { -+ fontSize: '0.875rem', -+ fontWeight: 700, -+ lineHeight: '1.1875rem', -+ }, -+ label1Regular: { -+ fontSize: '0.875rem', -+ fontWeight: 400, -+ lineHeight: '1.1875rem', -+ }, -+ label2Bold: { -+ fontSize: '0.75rem', // 12px -+ fontWeight: 700, -+ lineHeight: '1rem', // 16px -+ }, -+ label2Regular: { -+ fontSize: '0.75rem', -+ fontWeight: 400, -+ lineHeight: '1rem', -+ } -+ }, -+ spacing: { -+ spacing0: '0px', -+ spacing1: '4px', -+ spacing2: '8px', -+ spacing3: '12px', -+ spacing4: '16px', -+ spacing5: '20px', -+ spacing6: '24px', -+ spacing7: '28px', -+ spacing8: '32px', -+ spacing9: '36px', -+ spacing10: '40px', -+ spacing11: '44px', -+ spacing12: '48px', -+ spacing13: '52px', -+ spacing14: '56px', -+ spacing15: '60px', -+ spacing16: '64px', -+ } -+ }; -+ -+  -+export type Theme = typeof theme; -+export default theme; -+  -\ No newline at end of file From 128581f351ee3f1a236fcf2467773027f8fb88c7 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 16:17:37 +0900 Subject: [PATCH 32/40] refactor(style) --- src/giftRanking.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/giftRanking.tsx b/src/giftRanking.tsx index 8640d0a5..fb9b0d9e 100644 --- a/src/giftRanking.tsx +++ b/src/giftRanking.tsx @@ -104,12 +104,12 @@ font-size: 12px; color: ${theme.colors.gray400}; `; -const nameStyle = (theme:Theme)=>css` +const nameStyle = css` font-weight: 500; margin-top: 2px; `; -const priceStyle = (theme:Theme)=>css` +const priceStyle = css` font-weight: bold; margin-top: 4px; `; @@ -156,8 +156,8 @@ const GiftRanking = () => {
{item.id}
{item.name}
{item.brand}
-
{item.name}
-
{item.price.toLocaleString()} 원
+
{item.name}
+
{item.price.toLocaleString()} 원
))} From c134963fbcd3a58934decf7e8456c5f42af91c02 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 21:46:34 +0900 Subject: [PATCH 33/40] fix:hook --- src/elsesection.tsx | 37 ------------------------------------- src/hook.ts | 9 ++++++--- 2 files changed, 6 insertions(+), 40 deletions(-) delete mode 100644 src/elsesection.tsx diff --git a/src/elsesection.tsx b/src/elsesection.tsx deleted file mode 100644 index 550190cc..00000000 --- a/src/elsesection.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import { css, useTheme } from '@emotion/react'; -import type { Theme } from './theme'; - -export default function Banner() { - const theme = useTheme() as Theme; - - const containerStyle = css` - background-Color: ${theme.colors.semantic.kakaoYellow}; - border-radius: 10px; - padding: ${theme.spacing.spacing4}; - display: flex; - flex-direction: column; - - gap: ${theme.spacing.spacing1}; - color: ${theme.colors.semantic.textDefault};` - - -const textStyle = css` - font-size: ${theme.typography.label1Regular.fontSize}; - font-weight: ${theme.typography.label1Regular.fontWeight}; - line-height: ${theme.typography.label1Regular.lineHeight}; - color: ${theme.colors.semantic.textDefault}; -`; -const t2Style = css` - font-size: ${theme.typography.subtitle1Bold.fontSize}; - font-weight: ${theme.typography.subtitle1Bold.fontWeight}; - line-height: ${theme.typography.subtitle1Bold.lineHeight}; - color: ${theme.colors.semantic.textDefault}; -`; - -return ( -
-

카카오테크 캠퍼스 3기 여러분

-

프론트엔드 2단계 과제 화이팅! 🎉

-
-)}; diff --git a/src/hook.ts b/src/hook.ts index 3de8be28..32325f5d 100644 --- a/src/hook.ts +++ b/src/hook.ts @@ -1,7 +1,10 @@ - import { useTheme } from '@emotion/react'; import type { Theme } from './theme'; -export default function hook(): Theme { + +const useHook=(): Theme=> { return useTheme() as Theme; -} +}; +export default useHook; + + From 5278cbe27f8957892f908d4d11a80b9499b2bf5c Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 21:51:27 +0900 Subject: [PATCH 34/40] refactor: css out of component --- src/selectFr.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/selectFr.tsx b/src/selectFr.tsx index 8412e5b2..2937eb36 100644 --- a/src/selectFr.tsx +++ b/src/selectFr.tsx @@ -1,16 +1,15 @@ import { css} from '@emotion/react'; import hook from './hook' -const SelectFr = () => { - const theme = hook(); +import type {Theme} from '@/theme' - const containerStyle = css` +const containerStyle = (theme:Theme)=>css` padding: ${theme.spacing.spacing4}; display: flex; flex-direction: column; gap: ${theme.spacing.spacing4}; height: 80px; `; - const friendBoxStyle = css` + const friendBoxStyle =(theme:Theme)=> css` display: flex; align-items: center; gap: ${theme.spacing.spacing2}; @@ -18,7 +17,7 @@ const SelectFr = () => { border-radius: 8px; `; - const plusCircleStyle = css` + const plusCircleStyle = (theme:Theme)=>css` width: 40px; height: 40px; background-color: ${theme.colors.semantic.kakaoYellow}; @@ -31,21 +30,22 @@ const SelectFr = () => { justify-content: center; `; - const bannerStyle = css` + const bannerStyle =(theme:Theme)=> css` background-color: ${theme.colors.semantic.backgroundDefault}; padding: ${theme.spacing.spacing2}; font-size: ${theme.typography.label2Regular.fontSize}; border-radius: 8px; `; - + +const SelectFr = () => { + const theme = hook(); return ( -
-
-
+
+
+
+
+
선물할 친구를 선택해 주세요.
- -
+
); From 9b9d62e0d99c6dc4488703b9b18274cc300f6fa4 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 21:56:29 +0900 Subject: [PATCH 35/40] refactor:unify form func --- src/Banner.tsx | 8 +-- src/giftRanking.tsx | 5 +- src/selectCategory.tsx | 113 +++++++++++++++++------------------------ 3 files changed, 56 insertions(+), 70 deletions(-) diff --git a/src/Banner.tsx b/src/Banner.tsx index 6ba8ffc2..d75cdbaa 100644 --- a/src/Banner.tsx +++ b/src/Banner.tsx @@ -1,6 +1,7 @@ import { css } from '@emotion/react'; -import hook from './hook'; +import useHook from './hook'; import type { Theme } from '@/theme'; + const containerStyle = (theme:Theme)=>css` background-Color: ${theme.colors.semantic.kakaoYellow}; border-radius: 10px; @@ -24,11 +25,12 @@ line-height: ${theme.typography.subtitle1Bold.lineHeight}; color: ${theme.colors.semantic.textDefault}; `; -export default function Banner() { - const theme = hook(); +const Banner=()=> { + const theme = useHook(); return (

카카오테크 캠퍼스 3기 여러분

프론트엔드 2단계 과제 화이팅! 🎉

)}; +export default Banner; diff --git a/src/giftRanking.tsx b/src/giftRanking.tsx index fb9b0d9e..3c278246 100644 --- a/src/giftRanking.tsx +++ b/src/giftRanking.tsx @@ -1,7 +1,8 @@ import { css} from '@emotion/react'; import { useState } from 'react'; -import hook from './hook'; +import useHook from './hook'; import type { Theme } from '@/theme'; + const tabs = ['전체', '여성이', '남성이', '청소년이']; const subTabs = ['받고 싶어한', '많이 선물한', '위시로 받은']; @@ -123,7 +124,7 @@ padding:5px; ` const GiftRanking = () => { - const theme = hook(); + const theme = useHook(); const [selectedTab, setSelectedTab] = useState('전체'); const [selectedSubTab, setSelectedSubTab] = useState('받고 싶어한'); diff --git a/src/selectCategory.tsx b/src/selectCategory.tsx index 89ce2c17..cd13ce82 100644 --- a/src/selectCategory.tsx +++ b/src/selectCategory.tsx @@ -1,81 +1,64 @@ -import { useTheme } from '@emotion/react'; -import type { Theme } from '@/theme'; import { css } from '@emotion/react'; +import useHook from './hook'; +import category from '../mockdata'; +import type{Theme} from '@/theme'; -const themes = [ - { label: '생일', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371520241125_LQBMT.png' }, - { label: '맛있는선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371420250401_CYHOR.png' }, - { label: '직장동료', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371320250107_QWGZN.png' }, - { label: '연인', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371220250107_YMYGC.png' }, - { label: 'FOR ME', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F399320250519_CMTFF.png' }, - { label: '가벼운선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F371020250102_QSNFV.png' }, - { label: '스몰럭셔리', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F378220250214_OHAQK.png' }, - { label: '명품선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F387720250324_SDCJQ.png' }, - { label: '출산 · 돌', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370720241228_QFZPM.png' }, - { label: '결혼 · 집들이', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F369720250126_OGWLG.png' }, - { label: '시원한선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370420250324_WDMHS.png' }, - { label: '합격 · 응원', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370520250127_NLVFN.png' }, - { label: '건강 · 케어', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370620250415_HENTO.png' }, - { label: '교환권', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370320250331_NPPCU.png' }, - { label: '웃긴선물', image: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F370220241228_UPSAE.png' }, -]; +const wrapperStyle = (theme:Theme)=>css` +padding: ${theme.spacing.spacing5}; +`; -export default function GiftThemeSection() { - const theme = useTheme() as Theme; +const titleStyle = (theme:Theme)=>css` +font-size: ${theme.typography.title2Bold.fontSize}; +font-weight: ${theme.typography.title2Bold.fontWeight}; +line-height: ${theme.typography.title2Bold.lineHeight}; +margin-bottom: ${theme.spacing.spacing4}; +`; - const wrapperStyle = css` - padding: ${theme.spacing.spacing5}; - `; +const gridStyle = (theme:Theme)=>css` +display: grid; +grid-template-columns: repeat(5, 1fr); +gap: ${theme.spacing.spacing4}; - const titleStyle = css` - font-size: ${theme.typography.title2Bold.fontSize}; - font-weight: ${theme.typography.title2Bold.fontWeight}; - line-height: ${theme.typography.title2Bold.lineHeight}; - margin-bottom: ${theme.spacing.spacing4}; - `; - - const gridStyle = css` - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: ${theme.spacing.spacing4}; +@media (max-width: 480px) { + grid-template-columns: repeat(3, 1fr); +} +`; - @media (max-width: 480px) { - grid-template-columns: repeat(3, 1fr); - } - `; +const itemStyle = (theme:Theme)=>css` +display: flex; +flex-direction: column; +align-items: center; +text-align: center; - const itemStyle = css` - display: flex; - flex-direction: column; - align-items: center; - text-align: center; +span { + font-size: ${theme.typography.label1Regular.fontSize}; + font-weight: ${theme.typography.label1Regular.fontWeight}; + line-height: ${theme.typography.label1Regular.lineHeight}; + color: ${theme.colors.semantic.textDefault}; + margin-top: ${theme.spacing.spacing2}; +} - span { - font-size: ${theme.typography.label1Regular.fontSize}; - font-weight: ${theme.typography.label1Regular.fontWeight}; - line-height: ${theme.typography.label1Regular.lineHeight}; - color: ${theme.colors.semantic.textDefault}; - margin-top: ${theme.spacing.spacing2}; - } +img { + width: 56px; + height: 56px; + object-fit: contain; +} +`; - img { - width: 56px; - height: 56px; - object-fit: contain; - } - `; +const GiftThemeSection=()=> { + const theme = useHook(); return ( -
-

선물 테마

-
- {themes.map((item) => ( -
- {item.label} - {item.label} +
+

선물 테마

+
+ {category.map((item) => ( +
+ {item.name} + {item.name}
))}
); -} +}; export default GiftThemeSection; From e56d63adb183d79d2f9684659daadefb82c9110a Mon Sep 17 00:00:00 2001 From: Yebeen Date: Fri, 27 Jun 2025 21:58:00 +0900 Subject: [PATCH 36/40] refactor:unify name into Navibar --- src/Navibar.tsx | 59 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/Navibar.tsx diff --git a/src/Navibar.tsx b/src/Navibar.tsx new file mode 100644 index 00000000..727dd01a --- /dev/null +++ b/src/Navibar.tsx @@ -0,0 +1,59 @@ +import { css } from '@emotion/react'; +import type { Theme } from '@/theme'; +import hook from './hook'; + +const container = (theme:Theme)=>css` + max-width: 720px; + height: 50px; + background: ${theme.colors.semantic.backgroundDefault}; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 auto; + padding: 0 16px; + `; + + const navstyle = (theme:Theme)=>css` + font-size: ${theme.typography.title1Bold.fontSize}; + font-weight: ${theme.typography.title1Bold.fontWeight}; + line-height: ${theme.typography.title1Bold.lineHeight}; + color: ${theme.colors.semantic.textDefault}; + `; + + const per = css` + cursor: pointer; + width: 40px; + height: 40px; + background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6aLBdZ-dWr4tVuP38je4WW2WVGphxmiINHA&s'); + background-size: contain; + background-position: center; + ` + + + const pre = css` + cursor: pointer; + `; + + const preStyle = css` + width: 40px; + height: 40px; + color: black; + font-size: 25px; + `; + +const Navibar = () => { + const theme = hook(); + return ( +
+
+
<
+
+ + + +
+
+ ); +}; + +export default Navibar; From 6ef2b158565e75d0eeaed5bf1ac5704fb0ff7d17 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Sat, 28 Jun 2025 16:33:20 +0900 Subject: [PATCH 37/40] fix:build error --- package-lock.json | 413 ++++++++++++++++++++++++++++++++++++++++--- package.json | 3 + src/App.tsx | 2 +- src/emotionstyle.tsx | 4 +- src/giftRanking.tsx | 4 +- src/main.tsx | 5 +- src/navigation.tsx | 59 ------- 7 files changed, 394 insertions(+), 96 deletions(-) delete mode 100644 src/navigation.tsx diff --git a/package-lock.json b/package-lock.json index d4896fe1..d0aa44d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,21 @@ { - "name": "kakao-gift", + "name": "react-gift-login", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "kakao-gift", + "name": "react-gift-login", "version": "0.0.0", "dependencies": { + "@emotion/react": "^11.14.0", + "@fontsource/pretendard": "^5.2.5", "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@eslint/js": "^9.25.0", + "@types/node": "^24.0.6", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", @@ -43,7 +46,6 @@ "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", @@ -99,7 +101,6 @@ "version": "7.27.5", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.5.tgz", "integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==", - "dev": true, "license": "MIT", "dependencies": { "@babel/parser": "^7.27.5", @@ -133,7 +134,6 @@ "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz", "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==", - "dev": true, "license": "MIT", "dependencies": { "@babel/traverse": "^7.27.1", @@ -175,7 +175,6 @@ "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -185,7 +184,6 @@ "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -219,7 +217,6 @@ "version": "7.27.5", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz", "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.27.3" @@ -263,11 +260,19 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.27.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz", + "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.27.2", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.27.1", @@ -282,7 +287,6 @@ "version": "7.27.4", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz", "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.27.1", @@ -301,7 +305,6 @@ "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -311,7 +314,6 @@ "version": "7.27.6", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz", "integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.27.1", @@ -321,6 +323,126 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.13.5", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz", + "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==", + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/serialize": "^1.3.3", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "license": "MIT" + }, + "node_modules/@emotion/cache": { + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz", + "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.2", + "@emotion/weak-memoize": "^0.4.0", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==", + "license": "MIT" + }, + "node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, + "node_modules/@emotion/react": { + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", + "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.13.5", + "@emotion/cache": "^11.14.0", + "@emotion/serialize": "^1.3.3", + "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0", + "@emotion/utils": "^1.4.2", + "@emotion/weak-memoize": "^0.4.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz", + "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==", + "license": "MIT", + "dependencies": { + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/unitless": "^0.10.0", + "@emotion/utils": "^1.4.2", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", + "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==", + "license": "MIT" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz", + "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz", + "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==", + "license": "MIT" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==", + "license": "MIT" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz", @@ -913,6 +1035,15 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fontsource/pretendard": { + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/@fontsource/pretendard/-/pretendard-5.2.5.tgz", + "integrity": "sha512-UAj3l+Exfx6Sq5hySbhTQhNzkZnhzBxQdHySmjo2lifXyXpMAHv7GD7hAQTLgZfBd1WixJJkmynfJbOp+TAckg==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -983,7 +1114,6 @@ "version": "0.3.8", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz", "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.2.1", @@ -998,7 +1128,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -1008,7 +1137,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -1018,14 +1146,12 @@ "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", - "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -1416,6 +1542,22 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/node": { + "version": "24.0.6", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.6.tgz", + "integrity": "sha512-ZOyn+gOs749xU7ovp+Ibj0g1o3dFRqsfPnT22C2t5JzcRvgsEDpGawPbCISGKLudJk9Y0wiu9sYd6kUh0pc9TA==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~7.8.0" + } + }, + "node_modules/@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", + "license": "MIT" + }, "node_modules/@types/react": { "version": "19.1.8", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz", @@ -1790,6 +1932,21 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1858,7 +2015,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -1936,6 +2092,31 @@ "dev": true, "license": "MIT" }, + "node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "license": "MIT", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/cosmiconfig/node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -1955,14 +2136,12 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, "license": "MIT" }, "node_modules/debug": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", - "dev": true, "license": "MIT", "dependencies": { "ms": "^2.1.3" @@ -1990,6 +2169,15 @@ "dev": true, "license": "ISC" }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "license": "MIT", + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, "node_modules/esbuild": { "version": "0.25.5", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz", @@ -2045,7 +2233,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", - "dev": true, "license": "MIT", "engines": { "node": ">=10" @@ -2319,6 +2506,12 @@ "node": ">=8" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "license": "MIT" + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -2372,6 +2565,15 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -2425,6 +2627,27 @@ "node": ">=8" } }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "license": "BSD-3-Clause", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -2439,7 +2662,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==", - "dev": true, "license": "MIT", "dependencies": { "parent-module": "^1.0.0", @@ -2462,6 +2684,27 @@ "node": ">=0.8.19" } }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "license": "MIT" + }, + "node_modules/is-core-module": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", + "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", + "license": "MIT", + "dependencies": { + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -2506,7 +2749,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -2526,7 +2768,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", - "dev": true, "license": "MIT", "bin": { "jsesc": "bin/jsesc" @@ -2542,6 +2783,12 @@ "dev": true, "license": "MIT" }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "license": "MIT" + }, "node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -2593,6 +2840,12 @@ "node": ">= 0.8.0" } }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "license": "MIT" + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -2667,7 +2920,6 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true, "license": "MIT" }, "node_modules/nanoid": { @@ -2757,7 +3009,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "dev": true, "license": "MIT", "dependencies": { "callsites": "^3.0.0" @@ -2766,6 +3017,24 @@ "node": ">=6" } }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -2786,11 +3055,25 @@ "node": ">=8" } }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "license": "MIT" + }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", - "dev": true, "license": "ISC" }, "node_modules/picomatch": { @@ -2897,6 +3180,12 @@ "react": "^19.1.0" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -2907,11 +3196,30 @@ "node": ">=0.10.0" } }, + "node_modules/resolve": { + "version": "1.22.10", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", + "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", + "license": "MIT", + "dependencies": { + "is-core-module": "^2.16.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", - "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -3031,6 +3339,15 @@ "node": ">=8" } }, + "node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -3054,6 +3371,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", + "license": "MIT" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -3067,6 +3390,18 @@ "node": ">=8" } }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/tinyglobby": { "version": "0.2.14", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz", @@ -3188,6 +3523,13 @@ "typescript": ">=4.8.4 <5.9.0" } }, + "node_modules/undici-types": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz", + "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==", + "dev": true, + "license": "MIT" + }, "node_modules/update-browserslist-db": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", @@ -3365,6 +3707,21 @@ "dev": true, "license": "ISC" }, + "node_modules/yaml": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz", + "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==", + "dev": true, + "license": "ISC", + "optional": true, + "peer": true, + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14.6" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index fcf08815..122b4677 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,14 @@ "preview": "vite preview" }, "dependencies": { + "@emotion/react": "^11.14.0", + "@fontsource/pretendard": "^5.2.5", "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@eslint/js": "^9.25.0", + "@types/node": "^24.0.6", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", diff --git a/src/App.tsx b/src/App.tsx index 8c726da1..d9f93b92 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import GlobalStyles from '@/emotionstyle'; -import Navibar from '@/navigation'; +import Navibar from '@/Navibar'; import SelectCategory from '@/selectCategory'; import Banner from '@/Banner'; import GiftRanking from '@/giftRanking'; diff --git a/src/emotionstyle.tsx b/src/emotionstyle.tsx index 9f65f0a8..2d165cb7 100644 --- a/src/emotionstyle.tsx +++ b/src/emotionstyle.tsx @@ -1,7 +1,7 @@ import { css, Global } from '@emotion/react'; -import hook from './hook'; +import useHook from './hook'; const GlobalStyles = () => { - const theme = hook(); + const theme =useHook(); return( css` +const rankBadge = () => css` position: absolute; top: 8px; left: 8px; @@ -154,7 +154,7 @@ const GiftRanking = () => {
{products.map((item) => (
-
{item.id}
+
{item.id}
{item.name}
{item.brand}
{item.name}
diff --git a/src/main.tsx b/src/main.tsx index 91d27522..c6f74bd1 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,7 +5,6 @@ import theme from '@/theme'; import App from '@/App.tsx' import GlobalStyles from '@/emotionstyle.tsx'; import '@fontsource/pretendard/400.css'; -import category from '../mockdata'; createRoot(document.getElementById('root')!).render( @@ -14,6 +13,4 @@ createRoot(document.getElementById('root')!).render( , -) - -console.log(category); +) \ No newline at end of file diff --git a/src/navigation.tsx b/src/navigation.tsx deleted file mode 100644 index 9753ff1b..00000000 --- a/src/navigation.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { css } from '@emotion/react'; -import type { Theme } from '@/theme'; -import hook from './hook'; - -const container = (theme:Theme)=>css` - max-width: 720px; - height: 50px; - background: ${theme.colors.semantic.backgroundDefault}; - display: flex; - align-items: center; - justify-content: space-between; /* 세 요소 좌우 배치 */ - margin: 0 auto; - padding: 0 16px; - `; - - const navstyle = (theme:Theme)=>css` - font-size: ${theme.typography.title1Bold.fontSize}; - font-weight: ${theme.typography.title1Bold.fontWeight}; - line-height: ${theme.typography.title1Bold.lineHeight}; - color: ${theme.colors.semantic.textDefault}; - `; - - const per = css` - cursor: pointer; - width: 40px; - height: 40px; - background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6aLBdZ-dWr4tVuP38je4WW2WVGphxmiINHA&s'); - background-size: contain; - background-position: center; - ` - - - const pre = css` - cursor: pointer; - `; - - const preStyle = css` - width: 40px; - height: 40px; - color: black; - font-size: 25px; - `; - -const Navibar = () => { - const theme = hook(); - return ( -
-
-
<
-
- - - -
-
- ); -}; - -export default Navibar; From a21b5a4cbcd841f9ad526bbcada4ca594d0b6df7 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Sat, 28 Jun 2025 16:56:48 +0900 Subject: [PATCH 38/40] refactor:change name fit to component --- src/GiftThemeSection.tsx | 64 ++++++++++++++++++++++++++++++++++++++++ src/GlobalStyles.tsx | 53 +++++++++++++++++++++++++++++++++ src/useCustomTheme.ts | 10 +++++++ 3 files changed, 127 insertions(+) create mode 100644 src/GiftThemeSection.tsx create mode 100644 src/GlobalStyles.tsx create mode 100644 src/useCustomTheme.ts diff --git a/src/GiftThemeSection.tsx b/src/GiftThemeSection.tsx new file mode 100644 index 00000000..aff0a622 --- /dev/null +++ b/src/GiftThemeSection.tsx @@ -0,0 +1,64 @@ +import { css } from '@emotion/react'; +import useCustomTheme from './useCustomTheme'; +import category from '../mockdata'; +import type{Theme} from '@/theme'; + +const wrapperStyle = (theme:Theme)=>css` +padding: ${theme.spacing.spacing5}; +`; + +const titleStyle = (theme:Theme)=>css` +font-size: ${theme.typography.title2Bold.fontSize}; +font-weight: ${theme.typography.title2Bold.fontWeight}; +line-height: ${theme.typography.title2Bold.lineHeight}; +margin-bottom: ${theme.spacing.spacing4}; +`; + +const gridStyle = (theme:Theme)=>css` +display: grid; +grid-template-columns: repeat(5, 1fr); +gap: ${theme.spacing.spacing4}; + +@media (max-width: 480px) { + grid-template-columns: repeat(3, 1fr); +} +`; + +const itemStyle = (theme:Theme)=>css` +display: flex; +flex-direction: column; +align-items: center; +text-align: center; + +span { + font-size: ${theme.typography.label1Regular.fontSize}; + font-weight: ${theme.typography.label1Regular.fontWeight}; + line-height: ${theme.typography.label1Regular.lineHeight}; + color: ${theme.colors.semantic.textDefault}; + margin-top: ${theme.spacing.spacing2}; +} + +img { + width: 56px; + height: 56px; + object-fit: contain; +} +`; + + +const GiftThemeSection=()=> { + const theme = useCustomTheme(); + return ( +
+

선물 테마

+
+ {category.map((item) => ( +
+ {item.name} + {item.name} +
+ ))} +
+
+ ); +}; export default GiftThemeSection; diff --git a/src/GlobalStyles.tsx b/src/GlobalStyles.tsx new file mode 100644 index 00000000..4d80576f --- /dev/null +++ b/src/GlobalStyles.tsx @@ -0,0 +1,53 @@ +import { css, Global } from '@emotion/react'; +import useCustomTheme from './useCustomTheme'; +const GlobalStyles = () => { + const theme =useCustomTheme(); + return( + + ) +}; + +export default GlobalStyles; diff --git a/src/useCustomTheme.ts b/src/useCustomTheme.ts new file mode 100644 index 00000000..480ca5fe --- /dev/null +++ b/src/useCustomTheme.ts @@ -0,0 +1,10 @@ +import { useTheme } from '@emotion/react'; +import type { Theme } from './theme'; + + +const useCustomTheme=(): Theme=> { + return useTheme() as Theme; +}; +export default useCustomTheme; + + From be6d8873858fcb0a639045fbd9ab0d87bc6801c3 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Sat, 28 Jun 2025 16:58:27 +0900 Subject: [PATCH 39/40] refactor:change related to hook --- package-lock.json | 8 +++--- package.json | 2 +- src/App.tsx | 8 +++--- src/Banner.tsx | 4 +-- src/Navibar.tsx | 4 +-- src/emotionstyle.tsx | 53 ---------------------------------- src/giftRanking.tsx | 4 +-- src/hook.ts | 10 ------- src/main.tsx | 2 +- src/selectCategory.tsx | 64 ------------------------------------------ src/selectFr.tsx | 5 ++-- 11 files changed, 18 insertions(+), 146 deletions(-) delete mode 100644 src/emotionstyle.tsx delete mode 100644 src/hook.ts delete mode 100644 src/selectCategory.tsx diff --git a/package-lock.json b/package-lock.json index d0aa44d0..a42ae41c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ }, "devDependencies": { "@eslint/js": "^9.25.0", - "@types/node": "^24.0.6", + "@types/node": "^24.0.7", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", @@ -1543,9 +1543,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "24.0.6", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.6.tgz", - "integrity": "sha512-ZOyn+gOs749xU7ovp+Ibj0g1o3dFRqsfPnT22C2t5JzcRvgsEDpGawPbCISGKLudJk9Y0wiu9sYd6kUh0pc9TA==", + "version": "24.0.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.7.tgz", + "integrity": "sha512-YIEUUr4yf8q8oQoXPpSlnvKNVKDQlPMWrmOcgzoduo7kvA2UF0/BwJ/eMKFTiTtkNL17I0M6Xe2tvwFU7be6iw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 122b4677..86df25f4 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ }, "devDependencies": { "@eslint/js": "^9.25.0", - "@types/node": "^24.0.6", + "@types/node": "^24.0.7", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", diff --git a/src/App.tsx b/src/App.tsx index d9f93b92..d2af1fa3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,8 @@ -import GlobalStyles from '@/emotionstyle'; +import GlobalStyles from '@/GlobalStyles'; import Navibar from '@/Navibar'; -import SelectCategory from '@/selectCategory'; +import GiftThemeSection from '@/GiftThemeSection'; import Banner from '@/Banner'; -import GiftRanking from '@/giftRanking'; +import GiftRanking from '@/GiftRanking'; import SelectFr from '@/selectFr'; function App() { @@ -12,7 +12,7 @@ function App() { - + diff --git a/src/Banner.tsx b/src/Banner.tsx index d75cdbaa..d17aaf83 100644 --- a/src/Banner.tsx +++ b/src/Banner.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import useHook from './hook'; +import useCustomTheme from './useCustomTheme'; import type { Theme } from '@/theme'; const containerStyle = (theme:Theme)=>css` @@ -26,7 +26,7 @@ color: ${theme.colors.semantic.textDefault}; `; const Banner=()=> { - const theme = useHook(); + const theme = useCustomTheme(); return (

카카오테크 캠퍼스 3기 여러분

diff --git a/src/Navibar.tsx b/src/Navibar.tsx index 727dd01a..480fe30d 100644 --- a/src/Navibar.tsx +++ b/src/Navibar.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import type { Theme } from '@/theme'; -import hook from './hook'; +import useCustomTheme from './useCustomTheme'; const container = (theme:Theme)=>css` max-width: 720px; @@ -42,7 +42,7 @@ const container = (theme:Theme)=>css` `; const Navibar = () => { - const theme = hook(); + const theme = useCustomTheme(); return (
diff --git a/src/emotionstyle.tsx b/src/emotionstyle.tsx deleted file mode 100644 index 2d165cb7..00000000 --- a/src/emotionstyle.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { css, Global } from '@emotion/react'; -import useHook from './hook'; -const GlobalStyles = () => { - const theme =useHook(); - return( - - ) -}; - -export default GlobalStyles; diff --git a/src/giftRanking.tsx b/src/giftRanking.tsx index bb9e52cd..e303e349 100644 --- a/src/giftRanking.tsx +++ b/src/giftRanking.tsx @@ -1,6 +1,6 @@ import { css} from '@emotion/react'; import { useState } from 'react'; -import useHook from './hook'; +import useCustomTheme from './useCustomTheme'; import type { Theme } from '@/theme'; const tabs = ['전체', '여성이', '남성이', '청소년이']; @@ -124,7 +124,7 @@ padding:5px; ` const GiftRanking = () => { - const theme = useHook(); + const theme = useCustomTheme(); const [selectedTab, setSelectedTab] = useState('전체'); const [selectedSubTab, setSelectedSubTab] = useState('받고 싶어한'); diff --git a/src/hook.ts b/src/hook.ts deleted file mode 100644 index 32325f5d..00000000 --- a/src/hook.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { useTheme } from '@emotion/react'; -import type { Theme } from './theme'; - - -const useHook=(): Theme=> { - return useTheme() as Theme; -}; -export default useHook; - - diff --git a/src/main.tsx b/src/main.tsx index c6f74bd1..a13bf8f0 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client' import { ThemeProvider } from '@emotion/react'; import theme from '@/theme'; import App from '@/App.tsx' -import GlobalStyles from '@/emotionstyle.tsx'; +import GlobalStyles from '@/GlobalStyles'; import '@fontsource/pretendard/400.css'; createRoot(document.getElementById('root')!).render( diff --git a/src/selectCategory.tsx b/src/selectCategory.tsx deleted file mode 100644 index cd13ce82..00000000 --- a/src/selectCategory.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { css } from '@emotion/react'; -import useHook from './hook'; -import category from '../mockdata'; -import type{Theme} from '@/theme'; - -const wrapperStyle = (theme:Theme)=>css` -padding: ${theme.spacing.spacing5}; -`; - -const titleStyle = (theme:Theme)=>css` -font-size: ${theme.typography.title2Bold.fontSize}; -font-weight: ${theme.typography.title2Bold.fontWeight}; -line-height: ${theme.typography.title2Bold.lineHeight}; -margin-bottom: ${theme.spacing.spacing4}; -`; - -const gridStyle = (theme:Theme)=>css` -display: grid; -grid-template-columns: repeat(5, 1fr); -gap: ${theme.spacing.spacing4}; - -@media (max-width: 480px) { - grid-template-columns: repeat(3, 1fr); -} -`; - -const itemStyle = (theme:Theme)=>css` -display: flex; -flex-direction: column; -align-items: center; -text-align: center; - -span { - font-size: ${theme.typography.label1Regular.fontSize}; - font-weight: ${theme.typography.label1Regular.fontWeight}; - line-height: ${theme.typography.label1Regular.lineHeight}; - color: ${theme.colors.semantic.textDefault}; - margin-top: ${theme.spacing.spacing2}; -} - -img { - width: 56px; - height: 56px; - object-fit: contain; -} -`; - - -const GiftThemeSection=()=> { - const theme = useHook(); - return ( -
-

선물 테마

-
- {category.map((item) => ( -
- {item.name} - {item.name} -
- ))} -
-
- ); -}; export default GiftThemeSection; diff --git a/src/selectFr.tsx b/src/selectFr.tsx index 2937eb36..02333085 100644 --- a/src/selectFr.tsx +++ b/src/selectFr.tsx @@ -1,5 +1,5 @@ import { css} from '@emotion/react'; -import hook from './hook' +import useCustomTheme from './useCustomTheme' import type {Theme} from '@/theme' const containerStyle = (theme:Theme)=>css` @@ -36,9 +36,8 @@ const containerStyle = (theme:Theme)=>css` font-size: ${theme.typography.label2Regular.fontSize}; border-radius: 8px; `; - const SelectFr = () => { - const theme = hook(); + const theme = useCustomTheme(); return (
From 192610cca4a6b162c91d1349096ced4fd836c282 Mon Sep 17 00:00:00 2001 From: Yebeen Date: Sun, 29 Jun 2025 01:52:31 +0900 Subject: [PATCH 40/40] fix:build error --- src/App.tsx | 3 +-- src/{giftRanking.tsx => GiftRanking.tsx} | 0 src/{selectFr.tsx => SelectFr.tsx} | 0 3 files changed, 1 insertion(+), 2 deletions(-) rename src/{giftRanking.tsx => GiftRanking.tsx} (100%) rename src/{selectFr.tsx => SelectFr.tsx} (100%) diff --git a/src/App.tsx b/src/App.tsx index d2af1fa3..e2ce2986 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,10 +3,9 @@ import Navibar from '@/Navibar'; import GiftThemeSection from '@/GiftThemeSection'; import Banner from '@/Banner'; import GiftRanking from '@/GiftRanking'; -import SelectFr from '@/selectFr'; +import SelectFr from '@/SelectFr'; function App() { - return ( <> diff --git a/src/giftRanking.tsx b/src/GiftRanking.tsx similarity index 100% rename from src/giftRanking.tsx rename to src/GiftRanking.tsx diff --git a/src/selectFr.tsx b/src/SelectFr.tsx similarity index 100% rename from src/selectFr.tsx rename to src/SelectFr.tsx