Fix: 프로필 수정 로직 변경

src/components/commons/Input.tsx

@@ -3,7 +3,7 @@ import { Controller, Control, FieldValues, Path } from 'react-hook-form';
 interface InputProps<T extends FieldValues> {
   control: Control<T>;
   name: Path<T>;
-  label: string | React.ReactNode;
+  label?: string | React.ReactNode;
   type: string;
   autoFocus?: boolean;
   maxLength?: number;

src/components/modal/AccountNumberModal.tsx

@@ -0,0 +1,83 @@
+import Modal from '@/components/modal';
+import Button from '../commons/Button';
+import { useModal } from '@/contexts/ModalContext';
+import Input from '../commons/Input';
+import useUserStore from '@/store/useUserStore';
+import { z } from 'zod';
+import { accountNumberVerificationSchema } from '@/libs/schemas/auth';
+import { AccountNumberVerificationTypes } from 'gachTaxi-types';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, SubmitHandler, useWatch } from 'react-hook-form';
+import { useToast } from '@/contexts/ToastContext';
+import handleAxiosError from '@/libs/apis/axiosError.api';
+import { getAccountNumber } from '@/libs/apis/getAccountNumber.api';
+
+const AccountNumberModal = () => {
+  const { closeModal } = useModal();
+
+  const { user } = useUserStore();
+
+  const profileForm = useForm<z.infer<typeof accountNumberVerificationSchema>>({
+    resolver: zodResolver(accountNumberVerificationSchema),
+    defaultValues: {
+      accountNumber: user?.accountNumber || '',
+    },
+    mode: 'onSubmit',
+  });
+  const { setUser } = useUserStore();
+  const { openToast } = useToast();
+  const accountNumber = useWatch({
+    control: profileForm.control,
+    name: 'accountNumber',
+  });
+
+  const handleSubmitChange: SubmitHandler<
+    AccountNumberVerificationTypes
+  > = async () => {
+    try {
+      const updateData = profileForm.getValues();
+
+      const res = await getAccountNumber(updateData);
+      if (res?.code === 200) {
+        const userData = res?.data;
+        setUser(userData);
+        openToast(res.message, 'success');
+        closeModal();
+      }
+    } catch (error) {
+      const errorMessage = handleAxiosError(error);
+      openToast(errorMessage, 'error');
+    }
+  };
+
+  return (
+    <>
+      <Modal.Header className="font-bold text-header mt-4 px-3">
+        계좌번호
+      </Modal.Header>
+      <Modal.Content className="font-medium text-captionHeader text-textDarkGray">
+        <form
+          className="flex flex-col gap-2 w-full"
+          onSubmit={profileForm.handleSubmit(
+            handleSubmitChange as SubmitHandler<
+              z.infer<typeof accountNumberVerificationSchema>
+            >,
+          )}
+        >
+          <Input
+            control={profileForm.control}
+            name="accountNumber"
+            placeholder="계좌번호를 입력해주세요"
+            type="text"
+          />
+
+          <Button type="submit" className="w-full mt-8">
+            {accountNumber ? '변경하기' : '확인'}
+          </Button>
+        </form>
+      </Modal.Content>
+    </>
+  );
+};
+
+export default AccountNumberModal;

src/components/my-page/MyProfileHeader.tsx

@@ -31,7 +31,7 @@ const MyProfileHeader = () => {
           />
         </p>
         <p className="text-captionBody text-textLightGray mt-[8px]">
-          추가 정보
+          {user?.studentNumber}
         </p>
       </div>
     </div>

src/hooks/useChangeButtonData.tsx

@@ -2,6 +2,7 @@ import BackIcon from '@/assets/icon/backIcon.svg?react';
 import { Link } from 'react-router-dom';
 import { useModal } from '@/contexts/ModalContext';
 import MyPageModal from '@/components/modal/MyPageModal';
+import AccountNumberModal from '@/components/modal/AccountNumberModal';
 
 interface ButtonItem {
   label: string;
@@ -17,24 +18,31 @@ export const useChangeButtonData = (): JSX.Element[] => {
     { label: '공지 사항', path: '/mypage/notice' },
     { label: '문의 사항', path: '/mypage/inquiry' },
     { label: '이용 기록', path: '/mypage/useage' },
-    { label: '알림 설정', path: '/mypage/notification' },
     {
-      label: '로그아웃',
+      label: '계좌 번호',
       component: (
         <div
-          key="logout"
-          onClick={() => openModal(<MyPageModal />)}
+          key="accountNumber"
+          onClick={() => openModal(<AccountNumberModal />)}
           className="flex justify-between items-center w-full text-captionHeader cursor-pointer"
         >
-          <span>로그아웃</span>
+          <span>계좌번호</span>
           <BackIcon className="rotate-180" />
         </div>
       ),
     },
     {
-      label: '전화번호 인증',
-      path: '/mypage/phone-verification',
-      isVerified: false,
+      label: '로그아웃 및 탈퇴',
+      component: (
+        <div
+          key="logout"
+          onClick={() => openModal(<MyPageModal />)}
+          className="flex justify-between items-center w-full text-captionHeader cursor-pointer"
+        >
+          <span>로그아웃 및 탈퇴</span>
+          <BackIcon className="rotate-180" />
+        </div>
+      ),
     },
   ];
 
@@ -43,27 +51,6 @@ export const useChangeButtonData = (): JSX.Element[] => {
       return <div key={index}>{item.component}</div>;
     }
 
-    if (item.isVerified !== undefined) {
-      return (
-        <Link
-          key={index}
-          to={item.path!}
-          className="flex justify-between items-center w-full text-captionHeader"
-        >
-          <span>{item.label}</span>
-          <span
-            className={`text-assistive h-[26px] p-4 rounded-full flex items-center justify-center ${
-              item.isVerified
-                ? 'bg-primary text-addRed'
-                : 'bg-addRed text-white'
-            }`}
-          >
-            인증확인
-          </span>
-        </Link>
-      );
-    }
-
     return (
       <Link
         key={index}

src/libs/apis/getAccountNumber.api.ts

@@ -0,0 +1,13 @@
+import client from './clients';
+import { AccountNumberVerificationTypes } from 'gachTaxi-types';
+
+export const getAccountNumber = async (
+  data: AccountNumberVerificationTypes,
+) => {
+  try {
+    const res = await client.post('/api/accounts', data);
+    return res.data;
+  } catch (error) {
+    console.log('프로필 업데이트 실패', error);
+  }
+};

src/libs/schemas/auth.ts

@@ -23,8 +23,7 @@ const accountNumberSchema = z
   .min(10, '올바른 계좌번호를 입력해주세요!')
   .refine((value) => !isNaN(Number(value)), {
     message: '계좌번호는 숫자로만 입력해야 합니다!',
-  })
-  .optional();
+  });
 
 const editNickNameSchema = z
   .string()
@@ -116,6 +115,9 @@ export const userInfoVerificationSchema = z.object({
 export const profileEditVerificationSchema = z.object({
   profilePicture: profileImageSchema,
   nickName: editNickNameSchema,
+});
+
+export const accountNumberVerificationSchema = z.object({
   accountNumber: accountNumberSchema,
 });
 

src/pages/my-page/EditProfilePage.tsx

@@ -21,7 +21,6 @@ const EditProfilePage = () => {
     defaultValues: {
       nickName: user?.nickName || '',
       profilePicture: user?.profilePicture || undefined,
-      accountNumber: user?.accountNumber || '',
     },
     mode: 'onSubmit',
   });
@@ -93,14 +92,6 @@ const EditProfilePage = () => {
           type="text"
         />
 
-        <Input
-          control={profileForm.control}
-          name="accountNumber"
-          label="계좌번호"
-          placeholder="계좌번호를 입력해주세요"
-          type="text"
-        />
-
         <Button type="submit" className="w-full mt-8">
           변경하기
         </Button>

src/pages/my-page/index.tsx

@@ -1,8 +1,6 @@
 import Notice from './Notice';
 import Inquiry from './Inquiry';
 import Usage from './Usage';
-import Notification from './Notification';
-import PhoneVerificationPage from './PhoneVerificationPage';
 import MyProfileHeader from '@/components/my-page/MyProfileHeader';
 import MyPageButton from '@/components/my-page/MyPageButton';
 import BackButton from '@/components/commons/BackButton';
@@ -24,11 +22,9 @@ const MyPage = () => {
   return (
     <Routes>
       <Route index element={<DefaultMyPage />} />
-      <Route path="phone-verification" element={<PhoneVerificationPage />} />
       <Route path="notice" element={<Notice />} />
       <Route path="inquiry" element={<Inquiry />} />
       <Route path="useage" element={<Usage />} />
-      <Route path="notification" element={<Notification />} />
       <Route path="edit-profile" element={<EditProfilePage />} />
     </Routes>
   );

src/types/auth.d.ts

@@ -34,7 +34,10 @@ declare module 'gachTaxi-types' {
   interface ProfileEditVerificationTypes {
     profilePicture?: file | string | undefined;
     nickName?: string;
-    accountNumber?: string;
+  }
+
+  interface AccountNumberVerificationTypes {
+    accountNumber: string;
   }
 
   interface AgreementsTypes {