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/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/package-lock.json b/package-lock.json index d4896fe1..a42ae41c 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.7", "@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.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.7.tgz", + "integrity": "sha512-YIEUUr4yf8q8oQoXPpSlnvKNVKDQlPMWrmOcgzoduo7kvA2UF0/BwJ/eMKFTiTtkNL17I0M6Xe2tvwFU7be6iw==", + "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..86df25f4 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.7", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", 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.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 3d7ded3f..e2ce2986 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,33 +1,19 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' +import GlobalStyles from '@/GlobalStyles'; +import Navibar from '@/Navibar'; +import GiftThemeSection from '@/GiftThemeSection'; +import Banner from '@/Banner'; +import GiftRanking from '@/GiftRanking'; +import SelectFr from '@/SelectFr'; function App() { - const [count, setCount] = useState(0) - return ( <> -
- - Vite logo - - - React logo - -
-

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/Banner.tsx b/src/Banner.tsx new file mode 100644 index 00000000..d17aaf83 --- /dev/null +++ b/src/Banner.tsx @@ -0,0 +1,36 @@ +import { css } from '@emotion/react'; +import useCustomTheme from './useCustomTheme'; +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}; +`; + +const Banner=()=> { + const theme = useCustomTheme(); +return ( +
+

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

+

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

+
+)}; +export default Banner; diff --git a/src/GiftRanking.tsx b/src/GiftRanking.tsx new file mode 100644 index 00000000..e303e349 --- /dev/null +++ b/src/GiftRanking.tsx @@ -0,0 +1,170 @@ +import { css} from '@emotion/react'; +import { useState } from 'react'; +import useCustomTheme from './useCustomTheme'; +import type { Theme } from '@/theme'; + +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 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 = () => 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 = css` +font-weight: 500; +margin-top: 2px; +`; + +const priceStyle = 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 = useCustomTheme(); + const [selectedTab, setSelectedTab] = useState('전체'); + const [selectedSubTab, setSelectedSubTab] = useState('받고 싶어한'); + + + 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; 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/Navibar.tsx b/src/Navibar.tsx new file mode 100644 index 00000000..480fe30d --- /dev/null +++ b/src/Navibar.tsx @@ -0,0 +1,59 @@ +import { css } from '@emotion/react'; +import type { Theme } from '@/theme'; +import useCustomTheme from './useCustomTheme'; + +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 = useCustomTheme(); + return ( +
+
+
<
+
+ + + +
+
+ ); +}; + +export default Navibar; diff --git a/src/SelectFr.tsx b/src/SelectFr.tsx new file mode 100644 index 00000000..02333085 --- /dev/null +++ b/src/SelectFr.tsx @@ -0,0 +1,53 @@ +import { css} from '@emotion/react'; +import useCustomTheme from './useCustomTheme' +import type {Theme} from '@/theme' + +const containerStyle = (theme:Theme)=>css` + padding: ${theme.spacing.spacing4}; + display: flex; + flex-direction: column; + gap: ${theme.spacing.spacing4}; + height: 80px; + `; + const friendBoxStyle =(theme:Theme)=> css` + display: flex; + align-items: center; + gap: ${theme.spacing.spacing2}; + padding: ${theme.spacing.spacing2}; + border-radius: 8px; + `; + + const plusCircleStyle = (theme:Theme)=>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 =(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 = useCustomTheme(); + return ( +
+
+
+
+ 선물할 친구를 선택해 주세요. +
+
+
+
+ ); +}; + +export default SelectFr; 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/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 bef5202a..a13bf8f0 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,16 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' +import { ThemeProvider } from '@emotion/react'; +import theme from '@/theme'; +import App from '@/App.tsx' +import GlobalStyles from '@/GlobalStyles'; +import '@fontsource/pretendard/400.css'; createRoot(document.getElementById('root')!).render( - + + + + , -) +) \ No newline at end of file diff --git a/src/theme.ts b/src/theme.ts new file mode 100644 index 00000000..adbad8e9 --- /dev/null +++ b/src/theme.ts @@ -0,0 +1,193 @@ +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/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; + + 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, diff --git a/vite.config.ts b/vite.config.ts index 8b0f57b9..5d8a1b7d 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'), + } + } })