From 72936c732c1e55c1a5825ce22ea9e2196faaa752 Mon Sep 17 00:00:00 2001 From: "ojspp000@naver.com" Date: Mon, 2 Sep 2024 00:10:09 +0900 Subject: [PATCH] =?UTF-8?q?Feat=20"=EC=9B=B9=EC=86=8C=EC=BC=93=20=ED=86=B5?= =?UTF-8?q?=EC=8B=A0=20=EC=99=84=EB=A3=8C=20"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 226 ------------------ package.json | 2 - src/App.jsx | 2 + src/components/AdminRequestList.jsx | 10 +- src/components/ChargeButtonInfo.jsx | 4 +- src/components/HartButtonInfo.jsx | 111 +++++++++ src/css/pages/ChargeRequestPage.css | 25 ++ src/css/pages/MainpageLogin.css | 48 ++++ ...tsPage.jsx => AdminChargeRequestsPage.jsx} | 0 src/pages/ChargeRequestPage.jsx | 100 ++++++++ src/pages/MainpageLogin.jsx | 60 ++++- vite.config.js | 2 +- 12 files changed, 346 insertions(+), 244 deletions(-) create mode 100644 src/components/HartButtonInfo.jsx create mode 100644 src/css/pages/ChargeRequestPage.css rename src/pages/{ChargeRequestsPage.jsx => AdminChargeRequestsPage.jsx} (100%) create mode 100644 src/pages/ChargeRequestPage.jsx diff --git a/package-lock.json b/package-lock.json index cf2e6f7..859ec43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,6 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@mui/material": "^5.15.21", - "@stomp/stompjs": "^7.0.0", "@vanilla-extract/css": "^1.15.3", "axios": "^1.7.2", "base-64": "^1.0.0", @@ -25,7 +24,6 @@ "react-router-dom": "^6.24.1", "react-type-animation": "^3.2.0", "recoil": "^0.7.7", - "socket.io-client": "^2.5.0", "sockjs-client": "^1.6.1", "stompjs": "^2.3.3" }, @@ -1588,11 +1586,6 @@ "win32" ] }, - "node_modules/@stomp/stompjs": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.0.0.tgz", - "integrity": "sha512-fGdq4wPDnSV/KyOsjq4P+zLc8MFWC3lMmP5FBgLWKPJTYcuCbAIrnRGjB7q2jHZdYCOD5vxLuFoKIYLy5/u8Pw==" - }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1815,11 +1808,6 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, - "node_modules/after": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", - "integrity": "sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==" - }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -2004,11 +1992,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/arraybuffer.slice": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", - "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==" - }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -2069,11 +2052,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/backo2": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", - "integrity": "sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==" - }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2085,19 +2063,6 @@ "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz", "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==" }, - "node_modules/base64-arraybuffer": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz", - "integrity": "sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==", - "engines": { - "node": ">= 0.6.0" - } - }, - "node_modules/blob": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz", - "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==" - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2254,24 +2219,6 @@ "node": ">= 0.8" } }, - "node_modules/component-bind": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", - "integrity": "sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==" - }, - "node_modules/component-emitter": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz", - "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==", - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/component-inherit": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", - "integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==" - }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -2527,49 +2474,6 @@ "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==", "dev": true }, - "node_modules/engine.io-client": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.5.4.tgz", - "integrity": "sha512-ydc8uuMMDxC5KCKNJN3zZKYJk2sgyTuTZQ7Aj1DJSsLKAcizA/PzWivw8fZMIjJVBo2CJOYzntv4FSjY/Lr//g==", - "dependencies": { - "component-emitter": "~1.3.0", - "component-inherit": "0.0.3", - "debug": "~3.1.0", - "engine.io-parser": "~2.2.0", - "has-cors": "1.1.0", - "indexof": "0.0.1", - "parseqs": "0.0.6", - "parseuri": "0.0.6", - "ws": "~7.5.10", - "xmlhttprequest-ssl": "~1.6.2", - "yeast": "0.1.2" - } - }, - "node_modules/engine.io-client/node_modules/debug": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/engine.io-client/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" - }, - "node_modules/engine.io-parser": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz", - "integrity": "sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==", - "dependencies": { - "after": "0.8.2", - "arraybuffer.slice": "~0.0.7", - "base64-arraybuffer": "0.1.4", - "blob": "0.0.5", - "has-binary2": "~1.0.2" - } - }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -3516,24 +3420,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/has-binary2": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz", - "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==", - "dependencies": { - "isarray": "2.0.1" - } - }, - "node_modules/has-binary2/node_modules/isarray": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", - "integrity": "sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==" - }, - "node_modules/has-cors": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", - "integrity": "sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==" - }, "node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -3650,11 +3536,6 @@ "node": ">=0.8.19" } }, - "node_modules/indexof": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", - "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==" - }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -4530,16 +4411,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/parseqs": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz", - "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==" - }, - "node_modules/parseuri": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz", - "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==" - }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -5201,65 +5072,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/socket.io-client": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.5.0.tgz", - "integrity": "sha512-lOO9clmdgssDykiOmVQQitwBAF3I6mYcQAo7hQ7AM6Ny5X7fp8hIJ3HcQs3Rjz4SoggoxA1OgrQyY8EgTbcPYw==", - "dependencies": { - "backo2": "1.0.2", - "component-bind": "1.0.0", - "component-emitter": "~1.3.0", - "debug": "~3.1.0", - "engine.io-client": "~3.5.0", - "has-binary2": "~1.0.2", - "indexof": "0.0.1", - "parseqs": "0.0.6", - "parseuri": "0.0.6", - "socket.io-parser": "~3.3.0", - "to-array": "0.1.4" - } - }, - "node_modules/socket.io-client/node_modules/debug": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/socket.io-client/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" - }, - "node_modules/socket.io-parser": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.4.tgz", - "integrity": "sha512-z/pFQB3x+EZldRRzORYW1vwVO8m/3ILkswtnpoeU6Ve3cbMWkmHEWDAVJn4QJtchiiFTo5j7UG2QvwxvaA9vow==", - "dependencies": { - "component-emitter": "~1.3.0", - "debug": "~3.1.0", - "isarray": "2.0.1" - } - }, - "node_modules/socket.io-parser/node_modules/debug": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/socket.io-parser/node_modules/isarray": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", - "integrity": "sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==" - }, - "node_modules/socket.io-parser/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" - }, "node_modules/sockjs-client": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz", @@ -5443,11 +5255,6 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, - "node_modules/to-array": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz", - "integrity": "sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==" - }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -5924,34 +5731,6 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, - "node_modules/ws": { - "version": "7.5.10", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", - "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", - "engines": { - "node": ">=8.3.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, - "node_modules/xmlhttprequest-ssl": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz", - "integrity": "sha512-3XfeQE/wNkvrIktn2Kf0869fC0BN6UpydVasGIeSm2B1Llihf7/0UfZM+eCkOw3P7bP4+qPgqhm7ZoxuJtFU0Q==", - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/yaeti": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz", @@ -5975,11 +5754,6 @@ "node": ">= 6" } }, - "node_modules/yeast": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", - "integrity": "sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==" - }, "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 db0c013..fb59b7c 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@mui/material": "^5.15.21", - "@stomp/stompjs": "^7.0.0", "@vanilla-extract/css": "^1.15.3", "axios": "^1.7.2", "base-64": "^1.0.0", @@ -27,7 +26,6 @@ "react-router-dom": "^6.24.1", "react-type-animation": "^3.2.0", "recoil": "^0.7.7", - "socket.io-client": "^2.5.0", "sockjs-client": "^1.6.1", "stompjs": "^2.3.3" }, diff --git a/src/App.jsx b/src/App.jsx index 54a15ab..434dedd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -25,6 +25,7 @@ import Adminpageunlogin from "./pages/Adminpage_unlogin.jsx"; // import ChargeRequestsPage from "./pages/ChargeRequestsPage.jsx"; // import ChargeRequestMonitor from "./components/admintest.jsx"; import AdminRequestList from "./components/AdminRequestList.jsx"; +import ChargeRequestPage from "./pages/ChargeRequestPage.jsx"; export default function App() { @@ -46,6 +47,7 @@ export default function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/AdminRequestList.jsx b/src/components/AdminRequestList.jsx index 813147b..1f7c1a9 100644 --- a/src/components/AdminRequestList.jsx +++ b/src/components/AdminRequestList.jsx @@ -7,6 +7,8 @@ import { adminRequests } from "../Atoms"; import SockJS from "sockjs-client"; import Stomp from "stompjs"; + + function getTokenFromCookie() { const name = 'Authorization='; const decodedCookie = decodeURIComponent(document.cookie); @@ -35,7 +37,7 @@ function AdminRequestList() { console.log("Token from cookie:", token); - return new Promise((resolve, reject) => { + client.connect({ Authorization: `Bearer ${token}` }, (frame) => { console.log('Connected: ' + frame); @@ -58,12 +60,12 @@ function AdminRequestList() { ); }); - resolve(client); + }, (error) => { console.error('Error connecting to WebSocket', error); - reject(error); + }); - }); + }; const initializeWebSocket = async () => { diff --git a/src/components/ChargeButtonInfo.jsx b/src/components/ChargeButtonInfo.jsx index 59bd546..9c56b3a 100644 --- a/src/components/ChargeButtonInfo.jsx +++ b/src/components/ChargeButtonInfo.jsx @@ -9,7 +9,7 @@ function ChargeButtonInfo({ return (
- ๐Ÿ’ ๋ถ€์Šค์— ์ถฉ์ „ ์š”์ฒญํ•˜๊ธฐ + ๐Ÿ’ ๋ถ€์Šค์— ํฌ์ธํŠธ ์ถฉ์ „ ์š”์ฒญํ•˜๊ธฐ +
+
  • + 500P๋‹น 1ํšŒ์˜ ๊ธฐํšŒ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค +
    • +
  • + ํฌ์ธํŠธ๋ฅผ PickMe๋กœ ๋ฐ”๊พธ๊ณ  ์‹ถ์„๋•Œ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ฃผ์„ธ์š” +
    • + +
    + + +
    + +
    +
    +

    ํ•„์š” ํฌ์ธํŠธ: {totalPointsNeeded}P

    +

    ํ˜„์žฌ ํฌ์ธํŠธ: {point}P

    +
    + +
    + +
    + ); +} + +export default HartButtonInfo; diff --git a/src/css/pages/ChargeRequestPage.css b/src/css/pages/ChargeRequestPage.css new file mode 100644 index 0000000..9037485 --- /dev/null +++ b/src/css/pages/ChargeRequestPage.css @@ -0,0 +1,25 @@ + +.charge-input { + width: 100%; + padding: 20px 10px; + margin-bottom: 20px; + border-radius: 8px; + border: 1px solid #ddd; + font-size: 20px; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); + background-color: #ffffff; + transition: box-shadow 0.2s ease, transform 0.2s ease; +} + +.charge-input:focus { + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); + transform: translateY(-1px); + outline: none; /* ๊ธฐ๋ณธ ๋ธŒ๋ผ์šฐ์ € ์•„์›ƒ๋ผ์ธ ์ œ๊ฑฐ */ +} + .charge-request-clicked-top-page { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + font-size: 30px; + } diff --git a/src/css/pages/MainpageLogin.css b/src/css/pages/MainpageLogin.css index 9e85051..5ae3c10 100644 --- a/src/css/pages/MainpageLogin.css +++ b/src/css/pages/MainpageLogin.css @@ -133,6 +133,7 @@ align-items: center; justify-content: space-between; margin-bottom: 16px; + } .charge-request-clicked-text { text-align: left; @@ -177,3 +178,50 @@ cursor: not-allowed; /* ํด๋ฆญํ•  ์ˆ˜ ์—†์Œ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ปค์„œ */ font-size: 13px; } +.present_point { + margin-top: 10px; + align-items: flex-start; /* Align items to the start of the cross axis (left in this case) */ + display: flex; /* Ensure that the container is using flexbox to make align-items work */ + justify-content: flex-start; /* Justify content to the start of the main axis (left in this case) */ +} +.heart-input-container { + display: flex; /* flexbox ์‚ฌ์šฉ */ + align-items: center; /* ํฌ๋กœ์Šค ์ถ•(์„ธ๋กœ)์—์„œ ์ค‘์•™ ์ •๋ ฌ */ + justify-content: flex-start; /* ๋ฉ”์ธ ์ถ•(๊ฐ€๋กœ)์—์„œ ์™ผ์ชฝ ์ •๋ ฌ */ + margin-top: 20px; + margin-bottom: 10px; +} +.heart-input { + padding: 10px 12px; /* ํƒ€์ดํ•‘ ํŽธ์•ˆํ•จ์„ ์œ„ํ•œ ํŒจ๋”ฉ ์กฐ์ • */ + width: 20%; /* ๋ถ€๋ชจ ์ปจํ…Œ์ด๋„ˆ์— ๋งž๋Š” ๋„ˆ๋น„ ์กฐ์ • */ + margin-top: 7px; + height: 30px; + margin-left: 5px; /* ๋ผ๋ฒจ๊ณผ์˜ ๊ฐ„๊ฒฉ */ + border: 1px solid #ccc; /* ๊ฒฝ๊ณ„์„  ์„ค์ • */ + border-radius: 4px; /* ๊ฒฝ๊ณ„์„ ์˜ ๋ชจ์„œ๋ฆฌ๋ฅผ ๋‘ฅ๊ธ€๊ฒŒ */ + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* ๊ทธ๋ฆผ์ž ์ถ”๊ฐ€ */ +} + +.heart-input:focus { + + outline: none; /* ๊ธฐ๋ณธ ์•„์›ƒ๋ผ์ธ ์ œ๊ฑฐ */ +} + +label { + font-size: 20px; /* ๋ผ๋ฒจ์˜ ๊ธ€์ž ํฌ๊ธฐ ์„ค์ • */ + font-weight: bold; + color: #333; /* ๋ผ๋ฒจ์˜ ๊ธ€์ž ์ƒ‰์ƒ ์„ค์ • */ + margin-right: 10px; /* ์ž…๋ ฅ ํ•„๋“œ์™€์˜ ๊ฐ„๊ฒฉ */ +} + +.points-needed > div { + text-align: left; /* ๋‚ด๋ถ€ div์˜ ํ…์ŠคํŠธ๋ฅผ ์™ผ์ชฝ ์ •๋ ฌ */ +} + +.points-needed { + display: flex; + justify-content: flex-start; + font-size: 16px; + color: #333; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/src/pages/ChargeRequestsPage.jsx b/src/pages/AdminChargeRequestsPage.jsx similarity index 100% rename from src/pages/ChargeRequestsPage.jsx rename to src/pages/AdminChargeRequestsPage.jsx diff --git a/src/pages/ChargeRequestPage.jsx b/src/pages/ChargeRequestPage.jsx new file mode 100644 index 0000000..8a86579 --- /dev/null +++ b/src/pages/ChargeRequestPage.jsx @@ -0,0 +1,100 @@ +import React, { useState } from "react"; +import { useRecoilState } from "recoil"; +import Background from "../components/Background.jsx"; +import "../css/pages/ChargeRequestPage.css"; // ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•œ CSS ํŒŒ์ผ ์ƒ์„ฑ +import HeaderMain from "../components/HeaderMain"; +import { charge } from "../Atoms"; +import axios from "axios"; +import NavBar from "../components/Navbar.jsx"; +function ChargeRequestPage() { + const [amount, setAmount] = useState(""); + const [chargeState, setChargeState] = useRecoilState(charge); // Recoil ์ƒํƒœ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ + + const handleAmountChange = (event) => { + setAmount(event.target.value); + }; + + const handleSubmit = async () => { + // Recoil ์ƒํƒœ ์—…๋ฐ์ดํŠธ + setChargeState({ chargeclick: true }); + + try { + // ์ฟ ํ‚ค์—์„œ Authorization ํ† ํฐ์„ ๊ฐ€์ ธ์˜ค๊ธฐ + const cookies = document.cookie.split('; ').reduce((acc, cookie) => { + const [name, value] = cookie.split('='); + acc[name] = value; + return acc; + }, {}); + const accessToken = cookies.Authorization; + + if (!accessToken) { + throw new Error('No access token found in cookies'); + } + + // ๋ฐฑ์—”๋“œ๋กœ POST ์š”์ฒญ ๋ณด๋‚ด๊ธฐ + const response = await axios.post( + "http://backend.comatching.site:8080/auth/user/api/charge", + { + amount: parseInt(amount), // amount๋ฅผ integer๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์ „์†ก + }, + { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + } + ); + + if (response.status === 200) { + alert("์ถฉ์ „ ์š”์ฒญ์ด ์„ฑ๊ณต์ ์œผ๋กœ ์ „์†ก๋˜์—ˆ์Šต๋‹ˆ๋‹ค."); + // ์ดํ›„ ๋ฆฌ๋””๋ ‰์…˜ ๋˜๋Š” ๋‹ค๋ฅธ ๋กœ์ง ์ถ”๊ฐ€ ๊ฐ€๋Šฅ + } else { + alert("์ถฉ์ „ ์š”์ฒญ์— ์‹คํŒจํ–ˆ์Šต๋‹ˆ๋‹ค."); + } + } catch (error) { + console.error("Error submitting charge request:", error); + alert("์ถฉ์ „ ์š”์ฒญ ์ค‘ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค."); + } + }; + + return ( +
    + + + +
    +
    + ๐Ÿ’ ๋ถ€์Šค์— ์ถฉ์ „ ์š”์ฒญํ•˜๊ธฐ +
    + + + +
  • + ์ž…๊ธˆ ํ›„ ํฌ์ธํŠธ ์ถฉ์ „์„ ์›ํ•˜๊ฑฐ๋‚˜ +
    • +
  • + ํฌ์ธํŠธ๋ฅผ PickMe๋กœ ๋ฐ”๊พธ๊ณ  ์‹ถ์„๋•Œ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ฃผ์„ธ์š” +
    • +
  • + ์š”์ฒญ ํ›„์—๋Š” ์ž…๊ธˆ ํ™”๋ฉด๊ณผ ์•„์ด๋””๋ฅผ ๋ณด์—ฌ ์ฃผ์„ธ์š”. +
    • +
  • + ๋ฒ„ํŠผ ๋‚จ์šฉ ์‹œ ์ด์šฉ์ด ์ œํ•œ๋  ์ˆ˜ ์žˆ์œผ๋‹ˆ ์œ ์˜ ๋ฐ”๋ž๋‹ˆ๋‹ค. +
    • + +
    +
    +); +} + +export default ChargeRequestPage; \ No newline at end of file diff --git a/src/pages/MainpageLogin.jsx b/src/pages/MainpageLogin.jsx index cd4141e..93bfb8d 100644 --- a/src/pages/MainpageLogin.jsx +++ b/src/pages/MainpageLogin.jsx @@ -14,10 +14,11 @@ import MyInfoButton from "../components/MyInfoButton"; import ChargeButtonInfo from "../components/ChargeButtonInfo"; import NavBar from "../components/Navbar"; import TutorialSlides from "../components/TutorialSlides"; - +import HartButtonInfo from "../components/HartButtonInfo"; function MainpageLogin() { const navigate = useNavigate(); // ํŽ˜์ด์ง€ ์ด๋™์„ ์œ„ํ•œ useNavigate ํ›… ์‚ฌ์šฉ - const [isClicked, setIsClicked] = useState(false); // ์ถฉ์ „ ์š”์ฒญ ํ† ๊ธ€ ํด๋ฆญ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๋Š” ์ƒํƒœ ๋ณ€์ˆ˜ + const [isPointClicked, setIsPointClicked] = useState(false); // ํฌ์ธํŠธ ์ถฉ์ „ ์š”์ฒญ ํ† ๊ธ€ ํด๋ฆญ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๋Š” ์ƒํƒœ ๋ณ€์ˆ˜ + const [isHeartClicked, setIsHeartClicked] = useState(false); // ํ•˜ํŠธ ์ถฉ์ „ ์š”์ฒญ ํ† ๊ธ€ ํด๋ฆญ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๋Š” ์ƒํƒœ ๋ณ€์ˆ˜ const [showTutorial, setShowTutorial] = useState(false); // Show tutorial on login const [userInfo, setUserInfo] = useState({ @@ -38,7 +39,15 @@ function MainpageLogin() { const handleToggleClick = () => { setIsClicked((prevIsClicked) => !prevIsClicked); }; + // ํฌ์ธํŠธ ์ถฉ์ „ ํ† ๊ธ€ ํด๋ฆญ ํ•ธ๋“ค๋Ÿฌ + const handlePointToggleClick = () => { + setIsPointClicked((prevIsClicked) => !prevIsClicked); + }; + // ํ•˜ํŠธ ์ถฉ์ „ ํ† ๊ธ€ ํด๋ฆญ ํ•ธ๋“ค๋Ÿฌ + const handleHeartToggleClick = () => { + setIsHeartClicked((prevIsClicked) => !prevIsClicked); + }; // ์‚ฌ์šฉ์ž ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋น„๋™๊ธฐ ํ•จ์ˆ˜ useEffect(() => { const fetchData = async () => { @@ -91,7 +100,10 @@ function MainpageLogin() { navigate("/guide"); }; const handleCharge = () => { - navigate("/charge"); + navigate("/charge-request"); + }; + const handlehartCharge = () => { + navigate("/hart-charge-request"); }; const handleClickmatch = () => { navigate("/QR-generator"); @@ -161,21 +173,52 @@ function MainpageLogin() { /> - {isClicked ? ( + {isPointClicked ? ( ) : (
    - ๐Ÿ’ ๋ถ€์Šค์— ์ถฉ์ „ ์š”์ฒญํ•˜๊ธฐ + ๐Ÿ’ ๋ถ€์Šค์— ํฌ์ธํŠธ ์ถฉ์ „ ์š”์ฒญํ•˜๊ธฐ {userInfo.canRequestCharge ? ( + ) : ( +
    + ์š”์ฒญ์™„๋ฃŒ +
    + )} +
    + )} + {isHeartClicked ? ( + + ) : ( +
    + โค๏ธ ํฌ์ธํŠธ ํ•˜ํŠธ๋กœ ๊ตํ™˜ํ•˜๊ธฐ + {userInfo.canRequestCharge ? ( +