fix: 제어 컴포넌트와 react-hook-form 혼합 사용 문제 해결

Author: hyeeuncho

src/pages/join/InfoInputPage.tsx

@@ -6,24 +6,28 @@ import { useNavigate } from 'react-router-dom';
 import { FormData, zodValidation } from '../../shared/lib/formValidation';
 import { useUserInfo, useUserUpdate } from '../../features/join/hooks/useUserHook';
 import useAuthStore from '../../app/provider/authStore';
+import { useEffect } from 'react';
 
 const InfoInputPage = () => {
   const { data, isLoading } = useUserInfo();
-  const { login, setName} = useAuthStore();
+  const { login, setName } = useAuthStore();
   const { mutate: updateUser } = useUserUpdate();
   const {
     register,
     handleSubmit,
     formState: { errors, isValid },
+    reset,
   } = useForm<FormData>({
     mode: 'onChange',
+    defaultValues: {
+      name: '',
+      email: '',
+      phone: '',
+    },
     ...zodValidation,
   });
   const navigate = useNavigate();
 
-  const nameValue = data?.name;
-  const emailValue = data?.email;
-
   const onSubmit: SubmitHandler<FormData> = formData => {
     const updatedData = {
       id: data?.id || 0,
@@ -44,7 +48,15 @@ const InfoInputPage = () => {
       },
     });
   };
-
+  useEffect(() => {
+    if (data) {
+      reset({
+        name: data.name || '',
+        email: data.email || '',
+        phone: '',
+      });
+    }
+  }, [data, reset]);
   if (isLoading) {
     return <div>로딩 중...</div>;
   }
@@ -62,7 +74,6 @@ const InfoInputPage = () => {
         <UnderlineTextField
           label="이름"
           placeholder="이름"
-          value={nameValue}
           errorMessage={errors.name?.message}
           className="text-xl"
           {...register('name')}
@@ -82,7 +93,6 @@ const InfoInputPage = () => {
         <UnderlineTextField
           label="이메일"
           placeholder="이메일"
-          value={emailValue}
           type="email"
           errorMessage={errors.email?.message}
           className="text-xl"

src/pages/join/LogoutPage.tsx

@@ -1,21 +1,24 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { axiosClient } from '../../shared/types/api/http-client';
+import useAuthStore from '../../app/provider/authStore';
 
 const LogoutPage = () => {
   const navigate = useNavigate();
+  const { logout } = useAuthStore();
 
   useEffect(() => {
-    const logout = async () => {
+    const handleLogout = async () => {
       try {
         await axiosClient.post('/oauth/logout');
+        logout();
         navigate('/');
       } catch (error) {
         console.error('로그아웃 실패:', error);
         alert('로그아웃에 실패했습니다. 다시 시도해주세요.');
       }
     };
-    logout();
+    handleLogout();
   }, [navigate]);
 
   return <div>로그아웃 중...</div>;

src/shared/types/api/http-client.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosError, AxiosResponse } from 'axios';
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { ApiErrorResponse } from './apiResponse';
 import Cookies from 'js-cookie';
 import useAuthStore from '../../../app/provider/authStore';
@@ -36,7 +36,7 @@ axiosClient.interceptors.response.use(
       message: error.response?.data?.message || error.message,
     };
 
-    const originalRequest = error.config as any;
+    const originalRequest = error.config as AxiosRequestConfig & { _retry?: boolean };
 
     // 401(토큰 만료)일 경우 로그아웃 처리 or 토큰 갱신 가능
     if (errorInfo.status === 401) {