feat: updatePassword, updateInfo 기능 연결

frontend/src/components/InfoEditForm/InfoEditForm.jsx

@@ -1,11 +1,15 @@
 import styles from './InfoEditForm.module.css';
 import { useState } from 'react';
 
-export default function InfoEditForm() {
+export default function InfoEditForm({ onSubmit }) {
   const [username, setUsername] = useState('');
   const [useremail, setUseremail] = useState('');
+
   return (
-    <form className={styles.infoEditForm}>
+    <form
+      onSubmit={(e) => onSubmit(e, username, useremail)}
+      className={styles.infoEditForm}
+    >
       <p className={styles.textHeading}>이름 변경</p>
       <div className={styles.inputBox}>
         <label

frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx

@@ -2,6 +2,7 @@ import { useState, useRef } from 'react';
 import styles from './PasswordChangeForm.module.css';
 
 export default function PasswordChangeForm({ onSubmit, onPwError = false }) {
+  // TODO: onPwError(현재 비밀번호와 같음) 시 응답을 받아 표시
   const [errorConfirmMessage, setErrorConfirmMessage] = useState(false);
   const [errorSameMessage, setErrorSameMessage] = useState(false);
   const currentPasswordRef = useRef('');

frontend/src/hooks/api/useAuth.js

@@ -55,15 +55,23 @@ export function useAuth() {
       .catch((e) => console.log(e));
   };
 
+  const updateInfo = (name, email) => {
+    const infoBody = {
+      name,
+      email,
+    };
+    return instance.put(`${API_URL}/user/updateinfo`, infoBody);
+  };
+
   const updatePassword = (currentPw, newPw, newPwCheck) => {
     const passwordBody = {
       currentPassword: currentPw,
       newPassword: newPw,
-      newPasswordCheckL: newPwCheck,
+      newPasswordCheck: newPwCheck,
     };
     console.log(passwordBody);
     return instance.put(`${API_URL}/user/updatepassword`, passwordBody);
   };
 
-  return { login, logout, userRegister, updatePassword };
+  return { login, logout, userRegister, updateInfo, updatePassword };
 }

frontend/src/pages/MyInfoChangePage/MyInfoChangePage.jsx

@@ -1,5 +1,15 @@
 import { InfoEditForm } from '../../components/InfoEditForm';
+import { useAuth } from '../../hooks/api/useAuth';
 
 export default function MyInfoChangePage() {
-  return <InfoEditForm />;
+  const { updateInfo } = useAuth();
+
+  const handleSubmit = async (e, username, useremail) => {
+    e.preventDefault();
+    await updateInfo(username, useremail)
+      .then((res) => console.log(res))
+      .catch((err) => console.log(err));
+  };
+
+  return <InfoEditForm onSubmit={handleSubmit} />;
 }

frontend/src/utils/axios/instance.js

@@ -12,7 +12,7 @@ const instance = axios.create({
 
 instance.interceptors.request.use((config) => {
   const accessToken = useBoundStore.getState().token;
-
+  console.log(accessToken);
   if (accessToken) {
     config.headers.Authorization = `${accessToken}`;
   }