From 6027357ce62751402568681a62129e04a0f2d511 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 29 Jul 2024 21:19:47 +0900 Subject: [PATCH 01/13] feat : responsive utils --- package.json | 10 +- pnpm-lock.yaml | 647 ++++++++++++++++++++++++++++++++++++++-- src/App.tsx | 323 +------------------- src/pages/Test.tsx | 309 +++++++++++++++++++ src/utils/isObject.ts | 16 + src/utils/responsive.ts | 64 ++++ vite.config.ts | 17 +- 7 files changed, 1046 insertions(+), 340 deletions(-) create mode 100644 src/pages/Test.tsx create mode 100644 src/utils/isObject.ts create mode 100644 src/utils/responsive.ts diff --git a/package.json b/package.json index 04b71273..3ee39551 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,15 @@ "preview": "vite preview" }, "dependencies": { + "@vanilla-extract/css": "^1.15.3", + "@vanilla-extract/css-utils": "^0.1.4", + "@vanilla-extract/dynamic": "^2.1.1", + "@vanilla-extract/recipes": "^0.5.3", + "framer-motion": "^11.3.19", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.25.1", + "zustand": "^4.5.4" }, "devDependencies": { "@testing-library/jest-dom": "^6.4.5", @@ -29,6 +36,7 @@ "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", + "@vanilla-extract/vite-plugin": "^4.0.13", "@vitejs/plugin-react-swc": "^3.5.0", "@vitest/coverage-v8": "^2.0.3", "@vitest/ui": "^1.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 34a2160e..f29d1ad0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,16 +8,37 @@ importers: .: dependencies: + '@vanilla-extract/css': + specifier: ^1.15.3 + version: 1.15.3 + '@vanilla-extract/css-utils': + specifier: ^0.1.4 + version: 0.1.4 + '@vanilla-extract/dynamic': + specifier: ^2.1.1 + version: 2.1.1 + '@vanilla-extract/recipes': + specifier: ^0.5.3 + version: 0.5.3(@vanilla-extract/css@1.15.3) + framer-motion: + specifier: ^11.3.19 + version: 11.3.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-router-dom: + specifier: ^6.25.1 + version: 6.25.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + zustand: + specifier: ^4.5.4 + version: 4.5.4(@types/react@18.3.3)(react@18.3.1) devDependencies: '@testing-library/jest-dom': specifier: ^6.4.5 - version: 6.4.6(vitest@2.0.3(@vitest/ui@1.6.0)(jsdom@24.1.0)) + version: 6.4.6(vitest@2.0.3(@types/node@20.14.12)(@vitest/ui@1.6.0)(jsdom@24.1.0)) '@testing-library/react': specifier: ^15.0.7 version: 15.0.7(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -36,12 +57,15 @@ importers: '@typescript-eslint/parser': specifier: ^7.15.0 version: 7.16.1(eslint@8.57.0)(typescript@5.5.3) + '@vanilla-extract/vite-plugin': + specifier: ^4.0.13 + version: 4.0.13(@types/node@20.14.12)(vite@5.3.4(@types/node@20.14.12)) '@vitejs/plugin-react-swc': specifier: ^3.5.0 - version: 3.7.0(vite@5.3.4) + version: 3.7.0(vite@5.3.4(@types/node@20.14.12)) '@vitest/coverage-v8': specifier: ^2.0.3 - version: 2.0.3(vitest@2.0.3(@vitest/ui@1.6.0)(jsdom@24.1.0)) + version: 2.0.3(vitest@2.0.3(@types/node@20.14.12)(@vitest/ui@1.6.0)(jsdom@24.1.0)) '@vitest/ui': specifier: ^1.6.0 version: 1.6.0(vitest@2.0.3) @@ -62,10 +86,10 @@ importers: version: 5.5.3 vite: specifier: ^5.3.4 - version: 5.3.4 + version: 5.3.4(@types/node@20.14.12) vitest: specifier: ^2.0.2 - version: 2.0.3(@vitest/ui@1.6.0)(jsdom@24.1.0) + version: 2.0.3(@types/node@20.14.12)(@vitest/ui@1.6.0)(jsdom@24.1.0) packages: @@ -80,6 +104,40 @@ packages: resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==} engines: {node: '>=6.9.0'} + '@babel/compat-data@7.25.0': + resolution: {integrity: sha512-P4fwKI2mjEb3ZU5cnMJzvRsRKGBUcs8jvxIoRmr6ufAY9Xk2Bz7JubRTTivkw55c7WQJfTECeqYVa+HZ0FzREg==} + engines: {node: '>=6.9.0'} + + '@babel/core@7.24.9': + resolution: {integrity: sha512-5e3FI4Q3M3Pbr21+5xJwCv6ZT6KmGkI0vw3Tozy5ODAQFTIWe37iT8Cr7Ice2Ntb+M3iSKCEWMB1MBgKrW3whg==} + engines: {node: '>=6.9.0'} + + '@babel/generator@7.25.0': + resolution: {integrity: sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==} + engines: {node: '>=6.9.0'} + + '@babel/helper-compilation-targets@7.24.8': + resolution: {integrity: sha512-oU+UoqCHdp+nWVDkpldqIQL/i/bvAv53tRqLG/s+cOXxe66zOYLU7ar/Xs3LdmBihrUMEUhwu6dMZwbNOYDwvw==} + engines: {node: '>=6.9.0'} + + '@babel/helper-module-imports@7.24.7': + resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==} + engines: {node: '>=6.9.0'} + + '@babel/helper-module-transforms@7.25.0': + resolution: {integrity: sha512-bIkOa2ZJYn7FHnepzr5iX9Kmz8FjIz4UKzJ9zhX3dnYuVW0xul9RuR3skBfoLu+FPTQw90EHW9rJsSZhyLQ3fQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + + '@babel/helper-plugin-utils@7.24.8': + resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==} + engines: {node: '>=6.9.0'} + + '@babel/helper-simple-access@7.24.7': + resolution: {integrity: sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==} + engines: {node: '>=6.9.0'} + '@babel/helper-string-parser@7.24.8': resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==} engines: {node: '>=6.9.0'} @@ -88,6 +146,14 @@ packages: resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==} engines: {node: '>=6.9.0'} + '@babel/helper-validator-option@7.24.8': + resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==} + engines: {node: '>=6.9.0'} + + '@babel/helpers@7.25.0': + resolution: {integrity: sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==} + engines: {node: '>=6.9.0'} + '@babel/highlight@7.24.7': resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==} engines: {node: '>=6.9.0'} @@ -97,17 +163,43 @@ packages: engines: {node: '>=6.0.0'} hasBin: true + '@babel/parser@7.25.0': + resolution: {integrity: sha512-CzdIU9jdP0dg7HdyB+bHvDJGagUv+qtzZt5rYCWwW6tITNqV9odjp6Qu41gkG0ca5UfdDUWrKkiAnHHdGRnOrA==} + engines: {node: '>=6.0.0'} + hasBin: true + + '@babel/plugin-syntax-typescript@7.24.7': + resolution: {integrity: sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + '@babel/runtime@7.24.8': resolution: {integrity: sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==} engines: {node: '>=6.9.0'} + '@babel/template@7.25.0': + resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==} + engines: {node: '>=6.9.0'} + + '@babel/traverse@7.25.0': + resolution: {integrity: sha512-ubALThHQy4GCf6mbb+5ZRNmLLCI7bJ3f8Q6LHBSRlSKSWj5a7dSUzJBLv3VuIhFrFPgjF4IzPF567YG/HSCdZA==} + engines: {node: '>=6.9.0'} + '@babel/types@7.24.9': resolution: {integrity: sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ==} engines: {node: '>=6.9.0'} + '@babel/types@7.25.0': + resolution: {integrity: sha512-LcnxQSsd9aXOIgmmSpvZ/1yo46ra2ESYyqLcryaBZOghxy5qqOBjvCWP5JfkI8yl9rlxRgdLTTMCQQRcN2hdCg==} + engines: {node: '>=6.9.0'} + '@bcoe/v8-coverage@0.2.3': resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} + '@emotion/hash@0.9.2': + resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} + '@esbuild/aix-ppc64@0.21.5': resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} engines: {node: '>=12'} @@ -326,6 +418,10 @@ packages: '@polka/url@1.0.0-next.25': resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==} + '@remix-run/router@1.18.0': + resolution: {integrity: sha512-L3jkqmqoSVBVKHfpGZmLrex0lxR5SucGA0sUfFzGctehw+S/ggL9L/0NnC5mw6P8HUWpFZ3nQw3cRApjjWx9Sw==} + engines: {node: '>=14.0.0'} + '@rollup/rollup-android-arm-eabi@4.18.1': resolution: {integrity: sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==} cpu: [arm] @@ -532,6 +628,9 @@ packages: '@types/estree@1.0.5': resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + '@types/node@20.14.12': + resolution: {integrity: sha512-r7wNXakLeSsGT0H1AU863vS2wa5wBOK4bWMjZz2wj+8nBx+m5PeIn0k8AloSLpRuiwdRQZwarZqHE4FNArPuJQ==} + '@types/prop-types@15.7.12': resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} @@ -602,6 +701,34 @@ packages: '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} + '@vanilla-extract/babel-plugin-debug-ids@1.0.6': + resolution: {integrity: sha512-C188vUEYmw41yxg3QooTs8r1IdbDQQ2mH7L5RkORBnHx74QlmsNfqVmKwAVTgrlYt8JoRaWMtPfGm/Ql0BNQrA==} + + '@vanilla-extract/css-utils@0.1.4': + resolution: {integrity: sha512-3WRxMGa/VQaL32jZqRUpnnoVFSws5iPIUpQr+XlT4jXhtMeKYcA20rFK2k2Amkg04sqrO84A8hNMeABWZQesEg==} + + '@vanilla-extract/css@1.15.3': + resolution: {integrity: sha512-mxoskDAxdQAspbkmQRxBvolUi1u1jnyy9WZGm+GeH8V2wwhEvndzl1QoK7w8JfA0WFevTxbev5d+i+xACZlPhA==} + + '@vanilla-extract/dynamic@2.1.1': + resolution: {integrity: sha512-iqf736036ujEIKsIq28UsBEMaLC2vR2DhwKyrG3NDb/fRy9qL9FKl1TqTtBV4daU30Uh3saeik4vRzN8bzQMbw==} + + '@vanilla-extract/integration@7.1.7': + resolution: {integrity: sha512-xKwrCtmiBq6QzRNj+IOg5cAMRQRXkFnnvcE374MROJPnVvDX0d+lrIQapFGt64F0H8Gjk4kVl4slvCiV3ECQ4w==} + + '@vanilla-extract/private@1.0.5': + resolution: {integrity: sha512-6YXeOEKYTA3UV+RC8DeAjFk+/okoNz/h88R+McnzA2zpaVqTR/Ep+vszkWYlGBcMNO7vEkqbq5nT/JMMvhi+tw==} + + '@vanilla-extract/recipes@0.5.3': + resolution: {integrity: sha512-SPREq1NmaoKuvJeOV0pppOkwy3pWZUoDufsyQ6iHrbkHhAU7XQqG9o0iZSmg5JoVgDLIiOr9djQb0x9wuxig7A==} + peerDependencies: + '@vanilla-extract/css': ^1.0.0 + + '@vanilla-extract/vite-plugin@4.0.13': + resolution: {integrity: sha512-JeACJlPtsWp/73Ke1Px/QvDA8M3GlBt4ZjWytSm7rYoKv1qEANSnvAZsAevIp56tTMJaqs++R3L7OkmnFeKhlw==} + peerDependencies: + vite: ^4.0.3 || ^5.0.0 + '@vitejs/plugin-react-swc@3.7.0': resolution: {integrity: sha512-yrknSb3Dci6svCd/qhHqhFPDSw0QtjumcqdKMoNNzmOl5lMXTTiqzjWtG4Qask2HdvvzaNgSunbQGet8/GrKdA==} peerDependencies: @@ -709,6 +836,11 @@ packages: resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} engines: {node: '>=8'} + browserslist@4.23.2: + resolution: {integrity: sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + cac@6.7.14: resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} engines: {node: '>=8'} @@ -717,6 +849,9 @@ packages: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} + caniuse-lite@1.0.30001643: + resolution: {integrity: sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==} + chai@5.1.1: resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==} engines: {node: '>=12'} @@ -757,13 +892,28 @@ packages: concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} + confbox@0.1.7: + resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==} + + convert-source-map@2.0.0: + resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} + css-what@6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + css.escape@1.5.1: resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} + cssesc@3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + cssstyle@4.0.1: resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==} engines: {node: '>=18'} @@ -787,6 +937,14 @@ packages: decimal.js@10.4.3: resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==} + dedent@1.5.3: + resolution: {integrity: sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==} + peerDependencies: + babel-plugin-macros: ^3.1.0 + peerDependenciesMeta: + babel-plugin-macros: + optional: true + deep-eql@5.0.2: resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==} engines: {node: '>=6'} @@ -794,6 +952,13 @@ packages: deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} + deep-object-diff@1.1.9: + resolution: {integrity: sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==} + + deepmerge@4.3.1: + resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} + engines: {node: '>=0.10.0'} + delayed-stream@1.0.0: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} @@ -823,6 +988,9 @@ packages: eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} + electron-to-chromium@1.5.2: + resolution: {integrity: sha512-kc4r3U3V3WLaaZqThjYz/Y6z8tJe+7K0bbjUVo3i+LWIypVdMx5nXCkwRe6SWbY6ILqLdc1rKcKmr3HoH7wjSQ==} + emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -838,6 +1006,10 @@ packages: engines: {node: '>=12'} hasBin: true + escalade@3.1.2: + resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} + engines: {node: '>=6'} + escape-string-regexp@1.0.5: resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} engines: {node: '>=0.8.0'} @@ -893,6 +1065,10 @@ packages: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} + eval@0.1.8: + resolution: {integrity: sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==} + engines: {node: '>= 0.8'} + execa@8.0.1: resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==} engines: {node: '>=16.17'} @@ -943,6 +1119,20 @@ packages: resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==} engines: {node: '>= 6'} + framer-motion@11.3.19: + resolution: {integrity: sha512-+luuQdx4AsamyMcvzW7jUAJYIKvQs1KE7oHvKkW3eNzmo0S+3PSDWjBuQkuIP9WyneGnKGMLUSuHs8OP7jKpQg==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} @@ -951,6 +1141,10 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] + gensync@1.0.0-beta.2: + resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} + engines: {node: '>=6.9.0'} + get-func-name@2.0.2: resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==} @@ -974,6 +1168,10 @@ packages: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} deprecated: Glob versions prior to v9 are no longer supported + globals@11.12.0: + resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} + engines: {node: '>=4'} + globals@13.24.0: resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==} engines: {node: '>=8'} @@ -1088,6 +1286,9 @@ packages: jackspeak@3.4.3: resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==} + javascript-stringify@2.1.0: + resolution: {integrity: sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==} + js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -1107,6 +1308,11 @@ packages: canvas: optional: true + jsesc@2.5.2: + resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==} + engines: {node: '>=4'} + hasBin: true + json-buffer@3.0.1: resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} @@ -1116,6 +1322,11 @@ packages: json-stable-stringify-without-jsonify@1.0.1: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} + json5@2.2.3: + resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} + engines: {node: '>=6'} + hasBin: true + keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} @@ -1146,6 +1357,9 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + lru-cache@5.1.1: + resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + lz-string@1.5.0: resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} hasBin: true @@ -1160,6 +1374,9 @@ packages: resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==} engines: {node: '>=10'} + media-query-parser@2.0.2: + resolution: {integrity: sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==} + merge-stream@2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} @@ -1198,6 +1415,12 @@ packages: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} + mlly@1.7.1: + resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==} + + modern-ahocorasick@1.0.1: + resolution: {integrity: sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==} + mrmime@2.0.0: resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==} engines: {node: '>=10'} @@ -1213,6 +1436,9 @@ packages: natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} + node-releases@2.0.18: + resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} + npm-run-path@5.3.0: resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -1287,6 +1513,9 @@ packages: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} + pkg-types@1.1.3: + resolution: {integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==} + postcss@8.4.39: resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==} engines: {node: ^10 || ^12 || >=14} @@ -1327,6 +1556,19 @@ packages: react-is@18.3.1: resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} + react-router-dom@6.25.1: + resolution: {integrity: sha512-0tUDpbFvk35iv+N89dWNrJp+afLgd+y4VtorJZuOCXK0kkCWjEvb3vTJM++SYvMEpbVwXKf3FjeVveVEb6JpDQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + + react-router@6.25.1: + resolution: {integrity: sha512-u8ELFr5Z6g02nUtpPAggP73Jigj1mRePSwhS/2nkTrlPU5yEkH1vYzWNyvSnSzeeE2DNqWdH+P8OhIh9wuXhTw==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -1338,6 +1580,9 @@ packages: regenerator-runtime@0.14.1: resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} + require-like@0.1.2: + resolution: {integrity: sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==} + requires-port@1.0.0: resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} @@ -1378,6 +1623,10 @@ packages: scheduler@0.23.2: resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} + semver@6.3.1: + resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} + hasBin: true + semver@7.6.3: resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==} engines: {node: '>=10'} @@ -1506,6 +1755,9 @@ packages: peerDependencies: typescript: '>=4.2.0' + tslib@2.6.3: + resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==} + type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -1519,16 +1771,38 @@ packages: engines: {node: '>=14.17'} hasBin: true + ufo@1.5.4: + resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==} + + undici-types@5.26.5: + resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} + universalify@0.2.0: resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==} engines: {node: '>= 4.0.0'} + update-browserslist-db@1.1.0: + resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} url-parse@1.5.10: resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==} + use-sync-external-store@1.2.0: + resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + + vite-node@1.6.0: + resolution: {integrity: sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + vite-node@2.0.3: resolution: {integrity: sha512-14jzwMx7XTcMB+9BhGQyoEAmSl0eOr3nrnn+Z12WNERtOvLN+d2scbRUvyni05rT3997Bg+rZb47NyP4IQPKXg==} engines: {node: ^18.0.0 || >=20.0.0} @@ -1651,10 +1925,28 @@ packages: xmlchars@2.2.0: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} + yallist@3.1.1: + resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} + yocto-queue@0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} + zustand@4.5.4: + resolution: {integrity: sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==} + engines: {node: '>=12.7.0'} + peerDependencies: + '@types/react': '>=16.8' + immer: '>=9.0.6' + react: '>=16.8' + peerDependenciesMeta: + '@types/react': + optional: true + immer: + optional: true + react: + optional: true + snapshots: '@adobe/css-tools@4.4.0': {} @@ -1669,10 +1961,80 @@ snapshots: '@babel/highlight': 7.24.7 picocolors: 1.0.1 + '@babel/compat-data@7.25.0': {} + + '@babel/core@7.24.9': + dependencies: + '@ampproject/remapping': 2.3.0 + '@babel/code-frame': 7.24.7 + '@babel/generator': 7.25.0 + '@babel/helper-compilation-targets': 7.24.8 + '@babel/helper-module-transforms': 7.25.0(@babel/core@7.24.9) + '@babel/helpers': 7.25.0 + '@babel/parser': 7.24.8 + '@babel/template': 7.25.0 + '@babel/traverse': 7.25.0 + '@babel/types': 7.24.9 + convert-source-map: 2.0.0 + debug: 4.3.5 + gensync: 1.0.0-beta.2 + json5: 2.2.3 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + + '@babel/generator@7.25.0': + dependencies: + '@babel/types': 7.25.0 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 + jsesc: 2.5.2 + + '@babel/helper-compilation-targets@7.24.8': + dependencies: + '@babel/compat-data': 7.25.0 + '@babel/helper-validator-option': 7.24.8 + browserslist: 4.23.2 + lru-cache: 5.1.1 + semver: 6.3.1 + + '@babel/helper-module-imports@7.24.7': + dependencies: + '@babel/traverse': 7.25.0 + '@babel/types': 7.24.9 + transitivePeerDependencies: + - supports-color + + '@babel/helper-module-transforms@7.25.0(@babel/core@7.24.9)': + dependencies: + '@babel/core': 7.24.9 + '@babel/helper-module-imports': 7.24.7 + '@babel/helper-simple-access': 7.24.7 + '@babel/helper-validator-identifier': 7.24.7 + '@babel/traverse': 7.25.0 + transitivePeerDependencies: + - supports-color + + '@babel/helper-plugin-utils@7.24.8': {} + + '@babel/helper-simple-access@7.24.7': + dependencies: + '@babel/traverse': 7.25.0 + '@babel/types': 7.24.9 + transitivePeerDependencies: + - supports-color + '@babel/helper-string-parser@7.24.8': {} '@babel/helper-validator-identifier@7.24.7': {} + '@babel/helper-validator-option@7.24.8': {} + + '@babel/helpers@7.25.0': + dependencies: + '@babel/template': 7.25.0 + '@babel/types': 7.25.0 + '@babel/highlight@7.24.7': dependencies: '@babel/helper-validator-identifier': 7.24.7 @@ -1684,18 +2046,53 @@ snapshots: dependencies: '@babel/types': 7.24.9 + '@babel/parser@7.25.0': + dependencies: + '@babel/types': 7.25.0 + + '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.24.9)': + dependencies: + '@babel/core': 7.24.9 + '@babel/helper-plugin-utils': 7.24.8 + '@babel/runtime@7.24.8': dependencies: regenerator-runtime: 0.14.1 + '@babel/template@7.25.0': + dependencies: + '@babel/code-frame': 7.24.7 + '@babel/parser': 7.25.0 + '@babel/types': 7.25.0 + + '@babel/traverse@7.25.0': + dependencies: + '@babel/code-frame': 7.24.7 + '@babel/generator': 7.25.0 + '@babel/parser': 7.25.0 + '@babel/template': 7.25.0 + '@babel/types': 7.25.0 + debug: 4.3.5 + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + '@babel/types@7.24.9': dependencies: '@babel/helper-string-parser': 7.24.8 '@babel/helper-validator-identifier': 7.24.7 to-fast-properties: 2.0.0 + '@babel/types@7.25.0': + dependencies: + '@babel/helper-string-parser': 7.24.8 + '@babel/helper-validator-identifier': 7.24.7 + to-fast-properties: 2.0.0 + '@bcoe/v8-coverage@0.2.3': {} + '@emotion/hash@0.9.2': {} + '@esbuild/aix-ppc64@0.21.5': optional: true @@ -1849,6 +2246,8 @@ snapshots: '@polka/url@1.0.0-next.25': {} + '@remix-run/router@1.18.0': {} + '@rollup/rollup-android-arm-eabi@4.18.1': optional: true @@ -1962,7 +2361,7 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/jest-dom@6.4.6(vitest@2.0.3(@vitest/ui@1.6.0)(jsdom@24.1.0))': + '@testing-library/jest-dom@6.4.6(vitest@2.0.3(@types/node@20.14.12)(@vitest/ui@1.6.0)(jsdom@24.1.0))': dependencies: '@adobe/css-tools': 4.4.0 '@babel/runtime': 7.24.8 @@ -1973,7 +2372,7 @@ snapshots: lodash: 4.17.21 redent: 3.0.0 optionalDependencies: - vitest: 2.0.3(@vitest/ui@1.6.0)(jsdom@24.1.0) + vitest: 2.0.3(@types/node@20.14.12)(@vitest/ui@1.6.0)(jsdom@24.1.0) '@testing-library/react@15.0.7(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: @@ -1993,6 +2392,10 @@ snapshots: '@types/estree@1.0.5': {} + '@types/node@20.14.12': + dependencies: + undici-types: 5.26.5 + '@types/prop-types@15.7.12': {} '@types/react-dom@18.3.0': @@ -2087,14 +2490,88 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@vitejs/plugin-react-swc@3.7.0(vite@5.3.4)': + '@vanilla-extract/babel-plugin-debug-ids@1.0.6': + dependencies: + '@babel/core': 7.24.9 + transitivePeerDependencies: + - supports-color + + '@vanilla-extract/css-utils@0.1.4': {} + + '@vanilla-extract/css@1.15.3': + dependencies: + '@emotion/hash': 0.9.2 + '@vanilla-extract/private': 1.0.5 + css-what: 6.1.0 + cssesc: 3.0.0 + csstype: 3.1.3 + dedent: 1.5.3 + deep-object-diff: 1.1.9 + deepmerge: 4.3.1 + media-query-parser: 2.0.2 + modern-ahocorasick: 1.0.1 + picocolors: 1.0.1 + transitivePeerDependencies: + - babel-plugin-macros + + '@vanilla-extract/dynamic@2.1.1': + dependencies: + '@vanilla-extract/private': 1.0.5 + + '@vanilla-extract/integration@7.1.7(@types/node@20.14.12)': + dependencies: + '@babel/core': 7.24.9 + '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.24.9) + '@vanilla-extract/babel-plugin-debug-ids': 1.0.6 + '@vanilla-extract/css': 1.15.3 + dedent: 1.5.3 + esbuild: 0.21.5 + eval: 0.1.8 + find-up: 5.0.0 + javascript-stringify: 2.1.0 + mlly: 1.7.1 + vite: 5.3.4(@types/node@20.14.12) + vite-node: 1.6.0(@types/node@20.14.12) + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + + '@vanilla-extract/private@1.0.5': {} + + '@vanilla-extract/recipes@0.5.3(@vanilla-extract/css@1.15.3)': + dependencies: + '@vanilla-extract/css': 1.15.3 + + '@vanilla-extract/vite-plugin@4.0.13(@types/node@20.14.12)(vite@5.3.4(@types/node@20.14.12))': + dependencies: + '@vanilla-extract/integration': 7.1.7(@types/node@20.14.12) + vite: 5.3.4(@types/node@20.14.12) + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + + '@vitejs/plugin-react-swc@3.7.0(vite@5.3.4(@types/node@20.14.12))': dependencies: '@swc/core': 1.6.13 - vite: 5.3.4 + vite: 5.3.4(@types/node@20.14.12) transitivePeerDependencies: - '@swc/helpers' - '@vitest/coverage-v8@2.0.3(vitest@2.0.3(@vitest/ui@1.6.0)(jsdom@24.1.0))': + '@vitest/coverage-v8@2.0.3(vitest@2.0.3(@types/node@20.14.12)(@vitest/ui@1.6.0)(jsdom@24.1.0))': dependencies: '@ampproject/remapping': 2.3.0 '@bcoe/v8-coverage': 0.2.3 @@ -2109,7 +2586,7 @@ snapshots: strip-literal: 2.1.0 test-exclude: 7.0.1 tinyrainbow: 1.2.0 - vitest: 2.0.3(@vitest/ui@1.6.0)(jsdom@24.1.0) + vitest: 2.0.3(@types/node@20.14.12)(@vitest/ui@1.6.0)(jsdom@24.1.0) transitivePeerDependencies: - supports-color @@ -2148,7 +2625,7 @@ snapshots: pathe: 1.1.2 picocolors: 1.0.1 sirv: 2.0.4 - vitest: 2.0.3(@vitest/ui@1.6.0)(jsdom@24.1.0) + vitest: 2.0.3(@types/node@20.14.12)(@vitest/ui@1.6.0)(jsdom@24.1.0) '@vitest/utils@1.6.0': dependencies: @@ -2226,10 +2703,19 @@ snapshots: dependencies: fill-range: 7.1.1 + browserslist@4.23.2: + dependencies: + caniuse-lite: 1.0.30001643 + electron-to-chromium: 1.5.2 + node-releases: 2.0.18 + update-browserslist-db: 1.1.0(browserslist@4.23.2) + cac@6.7.14: {} callsites@3.1.0: {} + caniuse-lite@1.0.30001643: {} + chai@5.1.1: dependencies: assertion-error: 2.0.1 @@ -2274,14 +2760,22 @@ snapshots: concat-map@0.0.1: {} + confbox@0.1.7: {} + + convert-source-map@2.0.0: {} + cross-spawn@7.0.3: dependencies: path-key: 3.1.1 shebang-command: 2.0.0 which: 2.0.2 + css-what@6.1.0: {} + css.escape@1.5.1: {} + cssesc@3.0.0: {} + cssstyle@4.0.1: dependencies: rrweb-cssom: 0.6.0 @@ -2299,10 +2793,16 @@ snapshots: decimal.js@10.4.3: {} + dedent@1.5.3: {} + deep-eql@5.0.2: {} deep-is@0.1.4: {} + deep-object-diff@1.1.9: {} + + deepmerge@4.3.1: {} + delayed-stream@1.0.0: {} dequal@2.0.3: {} @@ -2323,6 +2823,8 @@ snapshots: eastasianwidth@0.2.0: {} + electron-to-chromium@1.5.2: {} + emoji-regex@8.0.0: {} emoji-regex@9.2.2: {} @@ -2355,6 +2857,8 @@ snapshots: '@esbuild/win32-ia32': 0.21.5 '@esbuild/win32-x64': 0.21.5 + escalade@3.1.2: {} + escape-string-regexp@1.0.5: {} escape-string-regexp@4.0.0: {} @@ -2439,6 +2943,11 @@ snapshots: esutils@2.0.3: {} + eval@0.1.8: + dependencies: + '@types/node': 20.14.12 + require-like: 0.1.2 + execa@8.0.1: dependencies: cross-spawn: 7.0.3 @@ -2503,11 +3012,20 @@ snapshots: combined-stream: 1.0.8 mime-types: 2.1.35 + framer-motion@11.3.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + tslib: 2.6.3 + optionalDependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + fs.realpath@1.0.0: {} fsevents@2.3.3: optional: true + gensync@1.0.0-beta.2: {} + get-func-name@2.0.2: {} get-stream@8.0.1: {} @@ -2538,6 +3056,8 @@ snapshots: once: 1.4.0 path-is-absolute: 1.0.1 + globals@11.12.0: {} + globals@13.24.0: dependencies: type-fest: 0.20.2 @@ -2646,6 +3166,8 @@ snapshots: optionalDependencies: '@pkgjs/parseargs': 0.11.0 + javascript-stringify@2.1.0: {} + js-tokens@4.0.0: {} js-tokens@9.0.0: {} @@ -2682,12 +3204,16 @@ snapshots: - supports-color - utf-8-validate + jsesc@2.5.2: {} + json-buffer@3.0.1: {} json-schema-traverse@0.4.1: {} json-stable-stringify-without-jsonify@1.0.1: {} + json5@2.2.3: {} + keyv@4.5.4: dependencies: json-buffer: 3.0.1 @@ -2719,6 +3245,10 @@ snapshots: lru-cache@10.4.3: {} + lru-cache@5.1.1: + dependencies: + yallist: 3.1.1 + lz-string@1.5.0: {} magic-string@0.30.10: @@ -2735,6 +3265,10 @@ snapshots: dependencies: semver: 7.6.3 + media-query-parser@2.0.2: + dependencies: + '@babel/runtime': 7.24.8 + merge-stream@2.0.0: {} merge2@1.4.1: {} @@ -2764,6 +3298,15 @@ snapshots: minipass@7.1.2: {} + mlly@1.7.1: + dependencies: + acorn: 8.12.1 + pathe: 1.1.2 + pkg-types: 1.1.3 + ufo: 1.5.4 + + modern-ahocorasick@1.0.1: {} + mrmime@2.0.0: {} ms@2.1.2: {} @@ -2772,6 +3315,8 @@ snapshots: natural-compare@1.4.0: {} + node-releases@2.0.18: {} + npm-run-path@5.3.0: dependencies: path-key: 4.0.0 @@ -2836,6 +3381,12 @@ snapshots: picomatch@2.3.1: {} + pkg-types@1.1.3: + dependencies: + confbox: 0.1.7 + mlly: 1.7.1 + pathe: 1.1.2 + postcss@8.4.39: dependencies: nanoid: 3.3.7 @@ -2874,6 +3425,18 @@ snapshots: react-is@18.3.1: {} + react-router-dom@6.25.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@remix-run/router': 1.18.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-router: 6.25.1(react@18.3.1) + + react-router@6.25.1(react@18.3.1): + dependencies: + '@remix-run/router': 1.18.0 + react: 18.3.1 + react@18.3.1: dependencies: loose-envify: 1.4.0 @@ -2885,6 +3448,8 @@ snapshots: regenerator-runtime@0.14.1: {} + require-like@0.1.2: {} + requires-port@1.0.0: {} resolve-from@4.0.0: {} @@ -2935,6 +3500,8 @@ snapshots: dependencies: loose-envify: 1.4.0 + semver@6.3.1: {} + semver@7.6.3: {} shebang-command@2.0.0: @@ -3042,6 +3609,8 @@ snapshots: dependencies: typescript: 5.5.3 + tslib@2.6.3: {} + type-check@0.4.0: dependencies: prelude-ls: 1.2.1 @@ -3050,8 +3619,18 @@ snapshots: typescript@5.5.3: {} + ufo@1.5.4: {} + + undici-types@5.26.5: {} + universalify@0.2.0: {} + update-browserslist-db@1.1.0(browserslist@4.23.2): + dependencies: + browserslist: 4.23.2 + escalade: 3.1.2 + picocolors: 1.0.1 + uri-js@4.4.1: dependencies: punycode: 2.3.1 @@ -3061,13 +3640,34 @@ snapshots: querystringify: 2.2.0 requires-port: 1.0.0 - vite-node@2.0.3: + use-sync-external-store@1.2.0(react@18.3.1): + dependencies: + react: 18.3.1 + + vite-node@1.6.0(@types/node@20.14.12): + dependencies: + cac: 6.7.14 + debug: 4.3.5 + pathe: 1.1.2 + picocolors: 1.0.1 + vite: 5.3.4(@types/node@20.14.12) + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + + vite-node@2.0.3(@types/node@20.14.12): dependencies: cac: 6.7.14 debug: 4.3.5 pathe: 1.1.2 tinyrainbow: 1.2.0 - vite: 5.3.4 + vite: 5.3.4(@types/node@20.14.12) transitivePeerDependencies: - '@types/node' - less @@ -3078,15 +3678,16 @@ snapshots: - supports-color - terser - vite@5.3.4: + vite@5.3.4(@types/node@20.14.12): dependencies: esbuild: 0.21.5 postcss: 8.4.39 rollup: 4.18.1 optionalDependencies: + '@types/node': 20.14.12 fsevents: 2.3.3 - vitest@2.0.3(@vitest/ui@1.6.0)(jsdom@24.1.0): + vitest@2.0.3(@types/node@20.14.12)(@vitest/ui@1.6.0)(jsdom@24.1.0): dependencies: '@ampproject/remapping': 2.3.0 '@vitest/expect': 2.0.3 @@ -3104,10 +3705,11 @@ snapshots: tinybench: 2.8.0 tinypool: 1.0.0 tinyrainbow: 1.2.0 - vite: 5.3.4 - vite-node: 2.0.3 + vite: 5.3.4(@types/node@20.14.12) + vite-node: 2.0.3(@types/node@20.14.12) why-is-node-running: 2.3.0 optionalDependencies: + '@types/node': 20.14.12 '@vitest/ui': 1.6.0(vitest@2.0.3) jsdom: 24.1.0 transitivePeerDependencies: @@ -3167,4 +3769,13 @@ snapshots: xmlchars@2.2.0: {} + yallist@3.1.1: {} + yocto-queue@0.1.0: {} + + zustand@4.5.4(@types/react@18.3.3)(react@18.3.1): + dependencies: + use-sync-external-store: 1.2.0(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + react: 18.3.1 diff --git a/src/App.tsx b/src/App.tsx index dc22ffb2..dd911973 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,317 +1,14 @@ +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Test from "./pages/Test"; + function App() { return ( - <> -

React Clean Code Payments CSS example

-

1️⃣ 카드 추가

-
-
-

- 카드 추가 -

-
-
-
-
-
-
-
-
- NAME - MM / YY -
-
-
-
-
- 카드 번호 -
- - - - -
-
-
- 만료일 -
- - -
-
-
- 카드 소유자 이름(선택) - -
-
- 보안코드(CVC/CVV) - -
-
- 카드 비밀번호 - - - - -
-
- 다음 -
-
-
- -

2️⃣ 카드 추가 - 카드사 선택

-
-
-

- 카드 추가 -

-
-
-
- 클린카드 -
-
-
-
-
-
- 1111 - 2222 - oooo - oooo -
-
- NAME - MM / YY -
-
-
-
-
- 카드 번호 -
- - - - -
-
-
- 만료일 -
- - -
-
-
- 카드 소유자 이름(선택) - -
-
- 보안코드(CVC/CVV) - -
-
- 카드 비밀번호 - - - - -
-
- 다음 -
-
-
-
-
-
-
- 클린 카드 -
-
-
- 클린 카드 -
-
-
- 클린 카드 -
-
-
- 클린 카드 -
-
-
-
-
- 클린 카드 -
-
-
- 클린 카드 -
-
-
- 클린 카드 -
-
-
- 클린 카드 -
-
-
-
-
- -

3️⃣ 카드 추가 - 입력 완료

-
-
-

- 카드 추가 -

-
-
-
- 클린카드 -
-
-
-
-
-
- 1111 - 2222 - oooo - oooo -
-
- 프롱이 - 12 / 23 -
-
-
-
-
- 카드 번호 -
- - - - -
-
-
- 만료일 -
- - -
-
-
- 카드 소유자 이름(선택) - -
-
- 보안코드(CVC/CVV) - -
-
- 카드 비밀번호 - - - - -
-
- 다음 -
-
-
- -

4️⃣ 카드 추가 완료

-
-
-
-

카드등록이 완료되었습니다.

-
-
-
-
- 클린카드 -
-
-
-
-
-
- 1111 - 2222 - oooo - oooo -
-
- 프롱이 - 12 / 23 -
-
-
-
-
- -
-
- 다음 -
-
-
- -

5️⃣ 카드 목록

-
-
-
-

보유 카드

-
-
-
-
- 클린카드 -
-
-
-
-
-
- 1111 - 2222 - oooo - oooo -
-
- 프롱이 - 12 / 23 -
-
-
-
- 법인카드 -
-
+
-
-
-
- - ) + + + } /> + + + ); } -export default App +export default App; diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx new file mode 100644 index 00000000..dba80ce2 --- /dev/null +++ b/src/pages/Test.tsx @@ -0,0 +1,309 @@ +const Test = () => { + return ( + <> +

React Clean Code Payments CSS example

+

1️⃣ 카드 추가

+
+
+

카드 추가

+
+
+
+
+
+
+
+
+ NAME + MM / YY +
+
+
+
+
+ 카드 번호 +
+ + + + +
+
+
+ 만료일 +
+ + +
+
+
+ 카드 소유자 이름(선택) + +
+
+ 보안코드(CVC/CVV) + +
+
+ 카드 비밀번호 + + + + +
+
+ 다음 +
+
+
+

2️⃣ 카드 추가 - 카드사 선택

+
+
+

카드 추가

+
+
+
+ 클린카드 +
+
+
+
+
+
+ 1111 - 2222 - oooo - oooo +
+
+ NAME + MM / YY +
+
+
+
+
+ 카드 번호 +
+ + + + +
+
+
+ 만료일 +
+ + +
+
+
+ 카드 소유자 이름(선택) + +
+
+ 보안코드(CVC/CVV) + +
+
+ 카드 비밀번호 + + + + +
+
+ 다음 +
+
+
+
+
+
+
+ 클린 카드 +
+
+
+ 클린 카드 +
+
+
+ 클린 카드 +
+
+
+ 클린 카드 +
+
+
+
+
+ 클린 카드 +
+
+
+ 클린 카드 +
+
+
+ 클린 카드 +
+
+
+ 클린 카드 +
+
+
+
+
+

3️⃣ 카드 추가 - 입력 완료

+
+
+

카드 추가

+
+
+
+ 클린카드 +
+
+
+
+
+
+ 1111 - 2222 - oooo - oooo +
+
+ 프롱이 + 12 / 23 +
+
+
+
+
+ 카드 번호 +
+ + + + +
+
+
+ 만료일 +
+ + +
+
+
+ 카드 소유자 이름(선택) + +
+
+ 보안코드(CVC/CVV) + +
+
+ 카드 비밀번호 + + + + +
+
+ 다음 +
+
+
+

4️⃣ 카드 추가 완료

+
+
+
+

카드등록이 완료되었습니다.

+
+
+
+
+ 클린카드 +
+
+
+
+
+
+ + 1111 - 2222 - oooo - oooo + +
+
+ 프롱이 + 12 / 23 +
+
+
+
+
+ +
+
+ 다음 +
+
+
+

5️⃣ 카드 목록

+
+
+
+

보유 카드

+
+
+
+
+ 클린카드 +
+
+
+
+
+
+ 1111 - 2222 - oooo - oooo +
+
+ 프롱이 + 12 / 23 +
+
+
+
+ 법인카드 +
+
+
+
+
+
+ + ); +}; + +export default Test; diff --git a/src/utils/isObject.ts b/src/utils/isObject.ts new file mode 100644 index 00000000..9e1069af --- /dev/null +++ b/src/utils/isObject.ts @@ -0,0 +1,16 @@ +export const isObject = (value: unknown): value is object | Function => { + if (value === null || value === undefined) { + return false; + } + + const type = typeof value; + if (type !== "object" && type !== "function") { + return false; + } + + return ( + Object.getPrototypeOf(value) === Object.prototype || + Object.getPrototypeOf(value) === Function.prototype || + Object.getPrototypeOf(value) === null + ); +}; diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts new file mode 100644 index 00000000..f3fec9a5 --- /dev/null +++ b/src/utils/responsive.ts @@ -0,0 +1,64 @@ +import { isObject } from "./isObject"; + +type BreakpointsAlias = "mobile" | "tablet" | "desktop"; + +type ResponsiveValueConfig = { + [Breakpoint in BreakpointsAlias]?: T; +}; + +export type ResponsiveValue = T | ResponsiveValueConfig; + +const breakpoints = { + mobile: 0, + tablet: 768, + desktop: 1024, +}; + +const getViewportWidth = () => { + return ( + window.innerWidth || + document.documentElement.clientWidth || + document.body.clientWidth + ); +}; + +const getCurrentBreakpoint = (): BreakpointsAlias => { + const width = getViewportWidth(); + if (width >= breakpoints.desktop) return "desktop"; + if (width >= breakpoints.tablet) return "tablet"; + return "mobile"; +}; + +const isResponsiveValueConfig = ( + value: unknown +): value is ResponsiveValueConfig => { + return ( + isObject(value) && + ("mobile" in value || "tablet" in value || "desktop" in value) + ); +}; + +const getResponsiveValue = ( + value: ResponsiveValue, + defaultValue: T +): T => { + if (!isResponsiveValueConfig(value)) { + return value; + } + + const currentBreakpoint = getCurrentBreakpoint(); + const breakpointsOrder: BreakpointsAlias[] = ["desktop", "tablet", "mobile"]; + + const selectedBreakpoint = breakpointsOrder.find( + (bp) => + value[bp] !== undefined && + breakpoints[bp] <= breakpoints[currentBreakpoint] + ); + + if (selectedBreakpoint) { + return value[selectedBreakpoint]!; + } + return defaultValue; +}; + +export { getResponsiveValue }; diff --git a/vite.config.ts b/vite.config.ts index 1cdac555..38bd350b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,20 +1,21 @@ -import { defineConfig as defineTestConfig, mergeConfig } from 'vitest/config'; -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react-swc'; +import { defineConfig as defineTestConfig, mergeConfig } from "vitest/config"; +import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin"; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; export default mergeConfig( defineConfig({ - plugins: [react()], + plugins: [react(), vanillaExtractPlugin()], }), defineTestConfig({ test: { globals: true, - environment: 'jsdom', - setupFiles: './src/setupTests.ts', + environment: "jsdom", + setupFiles: "./src/setupTests.ts", coverage: { reportsDirectory: "./.coverage", - reporter: ['lcov', 'json', 'json-summary'] + reporter: ["lcov", "json", "json-summary"], }, }, }) -) +); From bff1623ce5fa5096041ca98ad451dd1c52ebab3a Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 29 Jul 2024 22:43:59 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat=20:=20breakpoint=20css-variable?= =?UTF-8?q?=EB=A1=9C=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/breakpoint.ts | 7 +++ src/styles/breakpointTheme.css.ts | 29 +++++++++++++ src/utils/responsive.ts | 72 ++++++++++++++----------------- 3 files changed, 69 insertions(+), 39 deletions(-) create mode 100644 src/constants/breakpoint.ts create mode 100644 src/styles/breakpointTheme.css.ts diff --git a/src/constants/breakpoint.ts b/src/constants/breakpoint.ts new file mode 100644 index 00000000..feff59ad --- /dev/null +++ b/src/constants/breakpoint.ts @@ -0,0 +1,7 @@ +export const breakpoints = { + mobile: 0, + tablet: 768, + desktop: 1024, +} as const; + +export type BreakpointAlias = keyof typeof breakpoints; diff --git a/src/styles/breakpointTheme.css.ts b/src/styles/breakpointTheme.css.ts new file mode 100644 index 00000000..14cc32fd --- /dev/null +++ b/src/styles/breakpointTheme.css.ts @@ -0,0 +1,29 @@ +import { createGlobalTheme, globalStyle } from "@vanilla-extract/css"; +import { breakpoints } from "../constants/breakpoint"; + +export const vars = createGlobalTheme(":root", { + breakpoints: { + mobile: `${breakpoints.mobile}px`, + tablet: `${breakpoints.tablet}px`, + desktop: `${breakpoints.desktop}px`, + }, + currentBreakpoint: "mobile", +}); + +globalStyle(":root", { + vars: { + [vars.currentBreakpoint]: "mobile", + }, + "@media": { + [`(min-width: ${vars.breakpoints.tablet})`]: { + vars: { + [vars.currentBreakpoint]: "tablet", + }, + }, + [`(min-width: ${vars.breakpoints.desktop})`]: { + vars: { + [vars.currentBreakpoint]: "desktop", + }, + }, + }, +}); diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts index f3fec9a5..11ab99e7 100644 --- a/src/utils/responsive.ts +++ b/src/utils/responsive.ts @@ -1,34 +1,14 @@ +import { style } from "@vanilla-extract/css"; import { isObject } from "./isObject"; - -type BreakpointsAlias = "mobile" | "tablet" | "desktop"; +import { BreakpointAlias } from "../constants/breakpoint"; +import { vars } from "../styles/breakpointTheme.css"; type ResponsiveValueConfig = { - [Breakpoint in BreakpointsAlias]?: T; + [Breakpoint in BreakpointAlias]?: T; }; export type ResponsiveValue = T | ResponsiveValueConfig; -const breakpoints = { - mobile: 0, - tablet: 768, - desktop: 1024, -}; - -const getViewportWidth = () => { - return ( - window.innerWidth || - document.documentElement.clientWidth || - document.body.clientWidth - ); -}; - -const getCurrentBreakpoint = (): BreakpointsAlias => { - const width = getViewportWidth(); - if (width >= breakpoints.desktop) return "desktop"; - if (width >= breakpoints.tablet) return "tablet"; - return "mobile"; -}; - const isResponsiveValueConfig = ( value: unknown ): value is ResponsiveValueConfig => { @@ -38,7 +18,34 @@ const isResponsiveValueConfig = ( ); }; -const getResponsiveValue = ( +export const getCurrentBreakpoint = (): BreakpointAlias => { + return getComputedStyle(document.documentElement) + .getPropertyValue("--currentBreakpoint") + .trim() as BreakpointAlias; +}; + +export const createResponsiveStyle = ( + property: string, + value: ResponsiveValue +) => { + if (!isResponsiveValueConfig(value)) { + return style({ [property]: value }); + } + + return style({ + [property]: value.mobile, + "@media": { + [`(min-width: ${vars.breakpoints.tablet})`]: { + [property]: value.tablet, + }, + [`(min-width: ${vars.breakpoints.desktop})`]: { + [property]: value.desktop, + }, + }, + }); +}; + +export const getResponsiveValue = ( value: ResponsiveValue, defaultValue: T ): T => { @@ -47,18 +54,5 @@ const getResponsiveValue = ( } const currentBreakpoint = getCurrentBreakpoint(); - const breakpointsOrder: BreakpointsAlias[] = ["desktop", "tablet", "mobile"]; - - const selectedBreakpoint = breakpointsOrder.find( - (bp) => - value[bp] !== undefined && - breakpoints[bp] <= breakpoints[currentBreakpoint] - ); - - if (selectedBreakpoint) { - return value[selectedBreakpoint]!; - } - return defaultValue; + return value[currentBreakpoint] ?? defaultValue; }; - -export { getResponsiveValue }; From 6fe07b1fe9ed877c0c19cf0a3b250e5f351c3df4 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 29 Jul 2024 22:45:05 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat=20:=20Flex=20primitive=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Flex.css.ts | 24 +++++++++++++++++++++ src/components/common/Flex.tsx | 35 +++++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 src/components/common/Flex.css.ts create mode 100644 src/components/common/Flex.tsx diff --git a/src/components/common/Flex.css.ts b/src/components/common/Flex.css.ts new file mode 100644 index 00000000..d2863936 --- /dev/null +++ b/src/components/common/Flex.css.ts @@ -0,0 +1,24 @@ +import { style } from "@vanilla-extract/css"; +import { createResponsiveStyle } from "../../utils/responsive"; +import { FlexProps } from "./Flex"; + +export const flexBase = style({ + display: "flex", +}); + +export const createFlexStyle = ({ + direction, + justify, + align, + wrap, + gap, +}: FlexProps) => { + return style([ + flexBase, + createResponsiveStyle("flexDirection", direction || "row"), + createResponsiveStyle("justifyContent", justify || "flex-start"), + createResponsiveStyle("alignItems", align || "stretch"), + createResponsiveStyle("flexWrap", wrap || "nowrap"), + createResponsiveStyle("gap", gap || 0), + ]); +}; diff --git a/src/components/common/Flex.tsx b/src/components/common/Flex.tsx new file mode 100644 index 00000000..35df247c --- /dev/null +++ b/src/components/common/Flex.tsx @@ -0,0 +1,35 @@ +import { CSSProperties, PropsWithChildren } from "react"; +import { ResponsiveValue } from "../../utils/responsive"; +import { createFlexStyle } from "./Flex.css"; + +export interface FlexProps { + direction?: ResponsiveValue<"row" | "column">; + justify?: ResponsiveValue< + "flex-start" | "flex-end" | "center" | "space-between" | "space-around" + >; + align?: ResponsiveValue< + "flex-start" | "flex-end" | "center" | "stretch" | "baseline" + >; + wrap?: ResponsiveValue<"nowrap" | "wrap" | "wrap-reverse">; + gap?: ResponsiveValue; + style?: ResponsiveValue; +} + +export const Flex = ({ + children, + direction = "row", + justify = "flex-start", + align = "stretch", + wrap = "nowrap", + gap = 0, +}: PropsWithChildren) => { + const flexStyle = createFlexStyle({ + direction, + justify, + align, + wrap, + gap, + }); + + return
{children}
; +}; From 2e3d17d2de02f450ec2d9b422afd64d9098e9743 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 21:26:14 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat=20:=20debounce=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/debounce.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/utils/debounce.ts diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts new file mode 100644 index 00000000..a22fcb13 --- /dev/null +++ b/src/utils/debounce.ts @@ -0,0 +1,21 @@ +export function debounce void>( + callback: T, + wait: number +): (...args: Parameters) => void { + let timeout: ReturnType | null = null; + + return function (this: any, ...args: Parameters) { + const context = this; + + const later = () => { + timeout = null; + callback.apply(context, args); + }; + + if (timeout !== null) { + clearTimeout(timeout); + } + + timeout = setTimeout(later, wait); + }; +} From dec1c77553fe3a1d30dd1dd1a794f250ca6dc741 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 21:26:29 +0900 Subject: [PATCH 05/13] feat : useResponsive custom hook --- src/hooks/common/useResponsiveValue.ts | 27 ++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/hooks/common/useResponsiveValue.ts diff --git a/src/hooks/common/useResponsiveValue.ts b/src/hooks/common/useResponsiveValue.ts new file mode 100644 index 00000000..4c4fbbac --- /dev/null +++ b/src/hooks/common/useResponsiveValue.ts @@ -0,0 +1,27 @@ +import { useState, useEffect, useCallback } from "react"; +import { ResponsiveValue, getResponsiveValue } from "../../utils/responsive"; +import { debounce } from "../../utils/debounce"; + +export function useResponsiveValue( + value: ResponsiveValue, + defaultValue: T +): T { + const [currentValue, setCurrentValue] = useState(() => + getResponsiveValue(value, defaultValue) + ); + + const handleResize = useCallback( + debounce(() => { + const newValue = getResponsiveValue(value, defaultValue); + setCurrentValue(newValue); + }, 100), + [value, defaultValue] + ); + + useEffect(() => { + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, [handleResize]); + + return currentValue; +} From a6b5a2fa59ce277eae8c4834585689642d86f4a2 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 21:26:50 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat=20:=20Flex=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Flex.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/common/Flex.tsx b/src/components/common/Flex.tsx index 35df247c..fc0ca504 100644 --- a/src/components/common/Flex.tsx +++ b/src/components/common/Flex.tsx @@ -1,6 +1,6 @@ import { CSSProperties, PropsWithChildren } from "react"; +import { useResponsiveValue } from "../../hooks/common/useResponsiveValue"; import { ResponsiveValue } from "../../utils/responsive"; -import { createFlexStyle } from "./Flex.css"; export interface FlexProps { direction?: ResponsiveValue<"row" | "column">; @@ -22,14 +22,17 @@ export const Flex = ({ align = "stretch", wrap = "nowrap", gap = 0, + style, }: PropsWithChildren) => { - const flexStyle = createFlexStyle({ - direction, - justify, - align, - wrap, - gap, - }); + const flexStyle: CSSProperties = { + display: "flex", + flexDirection: useResponsiveValue(direction, "row"), + justifyContent: useResponsiveValue(justify, "flex-start"), + alignItems: useResponsiveValue(align, "stretch"), + flexWrap: useResponsiveValue(wrap, "nowrap"), + gap: useResponsiveValue(gap, 0), + ...(typeof style === "object" && !("mobile" in style) ? style : {}), + }; - return
{children}
; + return
{children}
; }; From 5fb5cbf24e9edbb9669bb8546a55a2309cc19e23 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 21:27:12 +0900 Subject: [PATCH 07/13] feat : Responsive utils --- src/utils/responsive.ts | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts index 11ab99e7..a4270d3a 100644 --- a/src/utils/responsive.ts +++ b/src/utils/responsive.ts @@ -1,7 +1,5 @@ -import { style } from "@vanilla-extract/css"; import { isObject } from "./isObject"; import { BreakpointAlias } from "../constants/breakpoint"; -import { vars } from "../styles/breakpointTheme.css"; type ResponsiveValueConfig = { [Breakpoint in BreakpointAlias]?: T; @@ -9,6 +7,12 @@ type ResponsiveValueConfig = { export type ResponsiveValue = T | ResponsiveValueConfig; +const breakpoints = { + mobile: 0, + tablet: 768, + desktop: 1024, +}; + const isResponsiveValueConfig = ( value: unknown ): value is ResponsiveValueConfig => { @@ -20,29 +24,32 @@ const isResponsiveValueConfig = ( export const getCurrentBreakpoint = (): BreakpointAlias => { return getComputedStyle(document.documentElement) - .getPropertyValue("--currentBreakpoint") + .getPropertyValue("--current-breakpoint") .trim() as BreakpointAlias; }; export const createResponsiveStyle = ( property: string, value: ResponsiveValue -) => { +): string => { if (!isResponsiveValueConfig(value)) { - return style({ [property]: value }); + return `${property}: ${value};`; } - return style({ - [property]: value.mobile, - "@media": { - [`(min-width: ${vars.breakpoints.tablet})`]: { - [property]: value.tablet, - }, - [`(min-width: ${vars.breakpoints.desktop})`]: { - [property]: value.desktop, - }, - }, - }); + const breakpointEntries = Object.entries(breakpoints) as [ + BreakpointAlias, + number + ][]; + return breakpointEntries.reduce((acc, [breakpoint, minWidth], index) => { + if (value[breakpoint] !== undefined) { + if (index === 0) { + acc += `${property}: ${value[breakpoint]};`; + } else { + acc += `@media (min-width: ${minWidth}px) { ${property}: ${value[breakpoint]}; }`; + } + } + return acc; + }, ""); }; export const getResponsiveValue = ( From cc26d83ba292a6c684c96fd8b4463653d9b1e6d9 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 21:36:37 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat=20:=20Portal=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Portal.tsx | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/components/common/Portal.tsx diff --git a/src/components/common/Portal.tsx b/src/components/common/Portal.tsx new file mode 100644 index 00000000..b1af5902 --- /dev/null +++ b/src/components/common/Portal.tsx @@ -0,0 +1,6 @@ +import { PropsWithChildren } from "react"; +import { createPortal } from "react-dom"; + +export const Portal = ({ children }: PropsWithChildren) => { + return createPortal(children, document.body); +}; From 58841c545fcbe1ff22f2f77a950eede5b348762c Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 21:59:49 +0900 Subject: [PATCH 09/13] feat : useClickOutside --- src/hooks/common/useClickOutside.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/hooks/common/useClickOutside.ts diff --git a/src/hooks/common/useClickOutside.ts b/src/hooks/common/useClickOutside.ts new file mode 100644 index 00000000..7b04db07 --- /dev/null +++ b/src/hooks/common/useClickOutside.ts @@ -0,0 +1,25 @@ +import { useEffect, useRef, useCallback } from "react"; + +export const useClickOutside = ( + callback: () => void +) => { + const ref = useRef(null); + + const handleClickOutside = useCallback( + (event: MouseEvent) => { + if (ref.current && !ref.current.contains(event.target as Node)) { + callback(); + } + }, + [callback] + ); + + useEffect(() => { + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [handleClickOutside]); + + return ref; +}; From 79514ec4883df9e549288d2d82e46c9dece6a527 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 22:33:51 +0900 Subject: [PATCH 10/13] feat : useKeybind --- src/hooks/common/useKeybind.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/hooks/common/useKeybind.ts diff --git a/src/hooks/common/useKeybind.ts b/src/hooks/common/useKeybind.ts new file mode 100644 index 00000000..35b916d8 --- /dev/null +++ b/src/hooks/common/useKeybind.ts @@ -0,0 +1,15 @@ +import { useEffect } from "react"; + +export const useKeybind = (key: string, callback: () => void) => { + useEffect(() => { + const handleKeybind = (event: KeyboardEvent) => { + if (event.key === key) { + callback(); + } + }; + window.addEventListener("keydown", handleKeybind); + return () => { + window.removeEventListener("keydown", handleKeybind); + }; + }, []); +}; From 3c9556f3775017dba41222ab6e63c59fb9ac19a1 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 22:34:05 +0900 Subject: [PATCH 11/13] =?UTF-8?q?feat=20:=20Modal=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Modal.tsx | 70 +++++++++++++++++++++++++++++++++ src/styles/index.css | 16 ++++++++ src/styles/modal.css | 5 +++ 3 files changed, 91 insertions(+) create mode 100644 src/components/common/Modal.tsx diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx new file mode 100644 index 00000000..c4d12180 --- /dev/null +++ b/src/components/common/Modal.tsx @@ -0,0 +1,70 @@ +import { PropsWithChildren, useState, createContext, useContext } from "react"; +import { useClickOutside } from "../../hooks/common/useClickOutside"; +import { useKeybind } from "../../hooks/common/useKeybind"; +import { Portal } from "./Portal"; + +interface ModalProps { + onShow: () => void; + onHide: () => void; +} + +interface ModalContextType { + isOpen: boolean; + toggleModal: () => void; +} + +const ModalContext = createContext(null); + +export const Modal = ({ + onShow, + onHide, + children, +}: PropsWithChildren) => { + const [isOpen, setIsOpen] = useState(false); + + const toggleModal = () => { + if (isOpen) { + onHide(); + } else { + onShow(); + } + setIsOpen((prev) => !prev); + }; + + return ( + + {children} + + ); +}; + +Modal.Trigger = ({ children }: PropsWithChildren) => { + const context = useContext(ModalContext); + if (!context) throw new Error("Modal.Trigger must be used within a Modal"); + + return
{children}
; +}; + +Modal.Content = ({ children }: PropsWithChildren) => { + const context = useContext(ModalContext); + if (!context) throw new Error("Modal.Content must be used within a Modal"); + + const { isOpen, toggleModal } = context; + + const ref = useClickOutside(toggleModal); + useKeybind("Escape", toggleModal); + + return ( + <> + {isOpen && ( + +
+
+ {children} +
+
+ + )} + + ); +}; diff --git a/src/styles/index.css b/src/styles/index.css index 783a2e38..11c0e3ef 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -26,6 +26,22 @@ input { border-radius: 15px; } +:root { + --current-breakpoint: mobile; +} + +@media (min-width: 768px) { + :root { + --current-breakpoint: tablet; + } +} + +@media (min-width: 1024px) { + :root { + --current-breakpoint: desktop; + } +} + .app { height: 100%; padding: 16px 24px; diff --git a/src/styles/modal.css b/src/styles/modal.css index d86fa3b0..d0dec0d8 100644 --- a/src/styles/modal.css +++ b/src/styles/modal.css @@ -9,6 +9,11 @@ align-items: center; flex-wrap: wrap; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: #fff; z-index: 10; } From 5bd4e668339c9cdc9b5bdf720115f54e5d183f98 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 23:15:27 +0900 Subject: [PATCH 12/13] feat : useFunnel --- src/hooks/common/useFunnel.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/hooks/common/useFunnel.ts diff --git a/src/hooks/common/useFunnel.ts b/src/hooks/common/useFunnel.ts new file mode 100644 index 00000000..44ff1c63 --- /dev/null +++ b/src/hooks/common/useFunnel.ts @@ -0,0 +1,30 @@ +import { PropsWithChildren, useCallback, useMemo, useState } from "react"; + +interface StepProps { + name: string; +} + +export const useFunnel = () => { + const [currentStep, setCurrentStep] = useState(); + + const setStep = useCallback((step: string) => { + setCurrentStep(step); + }, []); + + const Funnel = useMemo(() => { + const FunnelComponent = ({ children }: PropsWithChildren) => { + return children; + }; + + FunnelComponent.Step = ({ + name, + children, + }: PropsWithChildren) => { + return currentStep === name ? children : null; + }; + + return FunnelComponent; + }, [currentStep]); + + return [Funnel, setStep] as const; +}; From 032ec5880b4e99bc81f4f1c1407307aadcdabab6 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@naver.com> Date: Mon, 5 Aug 2024 23:29:09 +0900 Subject: [PATCH 13/13] =?UTF-8?q?refactor=20:=20useFunnel=20=EC=A0=9C?= =?UTF-8?q?=EB=84=A4=EB=A6=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/common/useFunnel.ts | 49 ++++++++++++++++++++++++++++++----- 1 file changed, 43 insertions(+), 6 deletions(-) diff --git a/src/hooks/common/useFunnel.ts b/src/hooks/common/useFunnel.ts index 44ff1c63..12bb67ae 100644 --- a/src/hooks/common/useFunnel.ts +++ b/src/hooks/common/useFunnel.ts @@ -1,15 +1,52 @@ -import { PropsWithChildren, useCallback, useMemo, useState } from "react"; +import { + PropsWithChildren, + useCallback, + useEffect, + useMemo, + useState, +} from "react"; interface StepProps { name: string; } -export const useFunnel = () => { - const [currentStep, setCurrentStep] = useState(); +interface UseFunnelOptions { + stepQueryKey?: string; + initialStep?: T; + onStepChange?: (step: T) => void; +} + +export const useFunnel = ( + steps: readonly T[], + options: UseFunnelOptions = {} +) => { + const { + stepQueryKey = "funnel-step", + initialStep = steps[0], + onStepChange, + } = options; + + const [currentStep, setCurrentStep] = useState(initialStep); + + const setStep = useCallback( + (step: T) => { + setCurrentStep(step); + if (onStepChange) { + onStepChange(step); + } + }, + [onStepChange] + ); - const setStep = useCallback((step: string) => { - setCurrentStep(step); - }, []); + useEffect(() => { + const params = new URLSearchParams(window.location.search); + const stepFromQuery = params.get(stepQueryKey); + if (stepFromQuery && steps.includes(stepFromQuery as T)) { + setStep(stepFromQuery as T); + } else { + setStep(initialStep); + } + }, [stepQueryKey, initialStep, setStep, steps]); const Funnel = useMemo(() => { const FunnelComponent = ({ children }: PropsWithChildren) => {