diff --git a/package-lock.json b/package-lock.json index 032364b..a23dd49 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "jascoffee-front", "version": "0.0.0", "dependencies": { + "axios": "^1.7.9", + "bootstrap": "^5.3.3", + "jwt-decode": "^3.1.2", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -923,6 +926,17 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.28.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.1.tgz", @@ -1454,6 +1468,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -1469,12 +1489,42 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.7.9", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz", + "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1627,6 +1677,18 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1767,6 +1829,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -2281,6 +2352,26 @@ "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2290,6 +2381,20 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -3028,6 +3133,12 @@ "node": ">=4.0" } }, + "node_modules/jwt-decode": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz", + "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==", + "license": "MIT" + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -3100,6 +3211,27 @@ "node": ">= 0.4" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3391,6 +3523,12 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index e971e1e..16faaa0 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,9 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.7.9", + "bootstrap": "^5.3.3", + "jwt-decode": "^3.1.2", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/src/App.css b/src/App.css index b9d355d..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -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.jsx b/src/App.jsx index f67355a..78734c8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,33 +1,13 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' import './App.css' +import MyPage from './components/MyPage' + function App() { - const [count, setCount] = useState(0) + return ( <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

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

-
-

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

+ ) } diff --git a/src/MyPage.css b/src/MyPage.css new file mode 100644 index 0000000..ee6bf11 --- /dev/null +++ b/src/MyPage.css @@ -0,0 +1,62 @@ +/* 전체 배경색 */ +body { + background-color: #FEFAE0; + font-family: Arial, sans-serif; + } + + /* 카드 스타일 */ + .card { + border: 1px solid #B99470; + background-color: #FEFAE0; + border-radius: 8px; + padding: 20px; + margin-bottom: 20px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + + /* 버튼 스타일 */ + .btn-custom-primary { + background-color: #C0C78C; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + transition: background-color 0.3s; + } + + .btn-custom-primary:hover { + background-color: #A6B37D; + } + + .btn-custom-secondary { + background-color: #A6B37D; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + transition: background-color 0.3s; + } + + .btn-custom-secondary:hover { + background-color: #C0C78C; + } + + .btn-custom-danger { + background-color: #B99470; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + transition: background-color 0.3s; + } + + .btn-custom-danger:hover { + background-color: #A6B37D; + } + + /* 입력 필드 스타일 */ + .form-control { + border: 1px solid #B99470; + border-radius: 5px; + } + \ No newline at end of file diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/MyPage.jsx b/src/components/MyPage.jsx new file mode 100644 index 0000000..b815b13 --- /dev/null +++ b/src/components/MyPage.jsx @@ -0,0 +1,281 @@ +import { useState, useEffect } from "react"; +import 'bootstrap/dist/css/bootstrap.min.css'; +import axios from 'axios'; +import jwt_decode from "jwt-decode"; + +const MyPage = () => { + const [userData, setUserData] = useState({ account: "", name: "", mmid: "", fund: "" }); + const [isEditing, setIsEditing] = useState(false); + const [isChangingPassword, setIsChangingPassword] = useState(false); + const [editData, setEditData] = useState(null); + const [passwordData, setPasswordData] = useState({ + currentPassword: "", + newPassword: "", + confirmPassword: "", + }); + + // 유저 정보 가져오기 + useEffect(() => { + const fetchUserData = async () => { + try { + const token = localStorage.getItem("accessToken"); + if (!token) { + console.error("Access token not found!"); + return; + } + + const decoded = jwt_decode(token); + const account = decoded.account; // JWT에서 account 추출 + + const response = await axios.get(`http://localhost:8080/users/${account}`, { + headers: { + access: `${token}`, + }, + }); + + setUserData(response.data); + } catch (error) { + console.error("There was an error fetching the user data!", error); + } + }; + + fetchUserData(); + }, []); + + // 개인정보 수정 모드로 전환 + const handleEditClick = () => { + setEditData(userData); + setIsEditing(true); + }; + + // 수정 폼 입력값 실시간 업데이트 + const handleInputChange = (e) => { + const { name, value } = e.target; + setEditData({ ...editData, [name]: value }); + }; + + // 개인정보 수정 저장 + const handleSave = async () => { + try { + const token = localStorage.getItem("accessToken"); + if (!token) { + alert("인증 정보가 없습니다. 다시 로그인 해주세요."); + return; + } + + // PUT 또는 POST/패치 등의 메서드는 서버 구현에 따라 다를 수 있습니다. + // 여기서는 PUT 예시 + await axios.put("http://localhost:8080/update", editData, { + headers: { + access: `${token}`, + }, + }); + + alert("개인정보가 저장되었습니다."); + setUserData(editData); // 수정한 데이터로 state 갱신 + setIsEditing(false); + } catch (error) { + console.error("개인정보 수정 중 오류가 발생했습니다.", error); + alert("개인정보 수정에 실패했습니다."); + } + }; + + // 수정 취소 + const handleCancel = () => { + setIsEditing(false); + }; + + // 비밀번호 변경 모드로 전환 + const handlePasswordChangeClick = () => { + setPasswordData({ currentPassword: "", newPassword: "", confirmPassword: "" }); + setIsChangingPassword(true); + }; + + // 비밀번호 변경 폼 입력값 실시간 업데이트 + const handlePasswordInputChange = (e) => { + const { name, value } = e.target; + setPasswordData({ ...passwordData, [name]: value }); + }; + + // 비밀번호 변경 저장 + const handlePasswordSave = async () => { + try { + const token = localStorage.getItem("accessToken"); + if (!token) { + alert("인증 정보가 없습니다. 다시 로그인 해주세요."); + return; + } + + // 서버가 요구하는 파라미터(form-data/json 등)는 서버 로직에 맞춰서 수정하세요. + await axios.put("http://localhost:8080/password/update", { + currentPassword: passwordData.currentPassword, + newPassword: passwordData.newPassword, + confirmPassword: passwordData.confirmPassword + }, { + headers: { + access: `${token}`, + }, + }); + + alert("비밀번호가 변경되었습니다."); + setIsChangingPassword(false); + } catch (error) { + console.error("비밀번호 변경 중 오류가 발생했습니다.", error); + alert("비밀번호 변경에 실패했습니다."); + } + }; + + // 비밀번호 변경 취소 + const handlePasswordCancel = () => { + setIsChangingPassword(false); + }; + + // 회원 탈퇴 + const handleDeleteAccount = async () => { + try { + const token = localStorage.getItem("accessToken"); + if (!token) { + alert("인증 정보가 없습니다. 다시 로그인 해주세요."); + return; + } + + // DELETE 요청 시, axios에서는 data를 전달하려면 아래와 같이 해야 합니다. + // (또는 URL 파라미터 등으로 전달) + await axios.delete("http://localhost:8080/users/delete", { + headers: { + access: `${token}`, + }, + data: { account: userData.account }, + }); + + alert("회원 탈퇴가 완료되었습니다."); + // 이후 필요하다면 토큰 삭제, 메인 페이지로 이동 등의 로직 추가 + localStorage.removeItem("accessToken"); + // window.location.href = "/"; + } catch (error) { + console.error("회원 탈퇴 중 오류가 발생했습니다.", error); + alert("회원 탈퇴에 실패했습니다."); + } + }; + + return ( +
+

My Page

+ + {/* 비밀번호 변경 모드가 아닐 때 */} + {!isChangingPassword ? ( + <> +
+
+

개인정보

+ {isEditing ? ( +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ ) : ( +
+

아이디: {userData.account}

+

이름: {userData.name}

+

mmId: {userData.mmid}

+

환불계좌: {userData.fund}

+ +
+ )} +
+
+ +
+ + +
+ + ) : ( + // 비밀번호 변경 모드일 때 +
+
+

비밀번호 변경

+
+ + +
+
+ + +
+
+ + +
+ + +
+
+ )} +
+ ); +}; + +export default MyPage; diff --git a/src/index.css b/src/index.css index 6119ad9..e69de29 100644 --- a/src/index.css +++ b/src/index.css @@ -1,68 +0,0 @@ -:root { - font-family: Inter, 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.jsx b/src/main.jsx index b9a1a6d..9962d02 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,9 @@ -import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( - + - , + )