REFACTOR: 비밀번호 변경 API 모듈화

Author: abyss-s

react-app/src/apis/user/changePassword.ts

@@ -0,0 +1,11 @@
+import axiosInstance from '../axiosInstance';
+
+export interface ChangePasswordRequest {
+  old_password: string;
+  new_password: string;
+}
+
+export async function changePassword(userId: string, body: ChangePasswordRequest): Promise<void> {
+  const response = await axiosInstance.patch(`/user/${userId}`, body);
+  return response.data;
+}

react-app/src/pages/ChangePW.tsx

@@ -1,9 +1,55 @@
+import { useState } from 'react';
+import { changePassword } from '@/apis/user/changePassword';
+
 const ChangePW = () => {
-    return (
-        <div>
-            
-        </div>
-    );
+  const [oldPassword, setOldPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+
+  const handleChangePassword = async () => {
+    try {
+      const userId = localStorage.getItem('userId');
+      if (!userId) throw new Error('로그인 정보 없음');
+
+      await changePassword(userId, {
+        old_password: oldPassword,
+        new_password: newPassword,
+      });
+
+      alert('비밀번호가 변경되었습니다.');
+      setOldPassword('');
+      setNewPassword('');
+    } catch (err) {
+      alert('비밀번호 변경 실패');
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto  ">
+      <h2 className="text-xl font-bold mb-6 text-center">비밀번호 변경 테스트</h2>
+      <div className="mb-4">
+        <label className="font-pm block mb-1">현재 비밀번호</label>
+        <input
+          type="password"
+          value={oldPassword}
+          onChange={(e) => setOldPassword(e.target.value)}
+          className="w-full px-3 py-2 border rounded focus:ring focus:outline-none"
+        />
+      </div>
+      <div className="mb-6">
+        <label className="font-pm block mb-1">새 비밀번호</label>
+        <input
+          type="password"
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+          className="w-full px-3 py-2 border rounded focus:ring focus:outline-none"
+        />
+      </div>
+      <button onClick={handleChangePassword} className="w-full py-2 text-white rounded ">
+        변경하기
+      </button>
+    </div>
+  );
 };
 
-export default ChangePW;
+export default ChangePW;

react-app/src/pages/Home.tsx

@@ -1,16 +1,3 @@
-import { useToast } from '@/hook/useToast';
-
 export default function Home() {
-  const { showToast } = useToast();
-
-  const handleButtonClick = () => {
-    showToast('버튼이 클릭되었습니다', 'success');
-  };
-
-  return (
-    <div>
-      <h1>Hello</h1>
-      <button onClick={handleButtonClick}>토스트 표시</button>
-    </div>
-  );
+  return <div>홈</div>;
 }

react-app/src/routes.tsx

@@ -3,6 +3,7 @@ import Layout from '@/components/Layout/Layout';
 import Login from './pages/Login';
 import Home from './pages/Home';
 import Vote from './pages/Vote';
+import ChangePW from './pages/ChangePW';
 
 const router = createBrowserRouter([
   {
@@ -21,6 +22,10 @@ const router = createBrowserRouter([
         path: 'vote',
         element: <Vote />,
       },
+      {
+        path: 'change-password',
+        element: <ChangePW />,
+      },
     ],
   },
 ]);