feat: 정보수정 페이지 기본 데이터(email, username) 추가

frontend/src/components/InfoEditForm/InfoEditForm.jsx

@@ -1,9 +1,14 @@
 import styles from './InfoEditForm.module.css';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
-export default function InfoEditForm({ onSubmit }) {
-  const [username, setUsername] = useState('');
-  const [useremail, setUseremail] = useState('');
+export default function InfoEditForm({ name, email, onSubmit }) {
+  const [username, setUsername] = useState(name);
+  const [useremail, setUseremail] = useState(email);
+
+  useEffect(() => {
+    setUsername(name);
+    setUseremail(email);
+  }, [name, email]);
 
   return (
     <form
@@ -46,7 +51,12 @@ export default function InfoEditForm({ onSubmit }) {
           required
         />
       </div>
-      <button className={styles.buttonBox}>내 정보 수정</button>
+      <button
+        disabled={(!username && !useremail) || (username == name && useremail == email)}
+        className={styles.buttonBox}
+      >
+        내 정보 수정
+      </button>
     </form>
   );
 }

frontend/src/components/InfoEditForm/InfoEditForm.module.css

@@ -55,3 +55,12 @@
   display: flex;
   justify-content: end;
 }
+
+.buttonBox:disabled,
+.buttonBox[disabled] {
+  border-color: var(--border-color);
+  background-color: var(--background-tertiary);
+  color: var(--text-color-tertiary);
+  cursor: not-allowed;
+  stroke: var(--text-color-tertiary);
+}

frontend/src/hooks/api/useUserInfo.js

@@ -0,0 +1,10 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useUserInfo() {
+  return useSuspenseQuery({
+    queryKey: ['myInfo'],
+    queryFn: () => instance.get(`${API_URL}/user/userinfo`),
+  });
+}

frontend/src/pages/MyInfoChangePage/MyInfoChangePage.jsx

@@ -1,9 +1,12 @@
 import { InfoEditForm } from '../../components/InfoEditForm';
 import { useAuth } from '../../hooks/api/useAuth';
+import { useUserInfo } from '../../hooks/api/useUserInfo';
 import { useNavigate } from 'react-router-dom';
 
 export default function MyInfoChangePage() {
   const navigate = useNavigate();
+  const { data } = useUserInfo();
+  const myInfo = data.data?.userInfo;
   const { updateInfo } = useAuth();
 
   const handleSubmit = async (e, username, useremail) => {
@@ -13,5 +16,11 @@ export default function MyInfoChangePage() {
       .catch((err) => console.log(err));
   };
 
-  return <InfoEditForm onSubmit={handleSubmit} />;
+  return (
+    <InfoEditForm
+      name={myInfo.name}
+      email={myInfo.email}
+      onSubmit={handleSubmit}
+    />
+  );
 }