Feat : mypage: 비밀번호 변경 전 인증 기능 추가

src/app/mypage/MypageClient.tsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 import { useState, useEffect } from 'react';
-import { updateUserNickname } from './_mypage/action';
+import { updateUserNickname, verifyPassword } from './_mypage/action';
 import ProfileImageUploader from './_mypage/ProfileImageUploader';
 import NicknameField from './_mypage/NicknameField';
 import PasswordField from './_mypage/PasswordField';
@@ -79,7 +79,16 @@ export default function MyPageClient() {
             <PasswordField
               password={password}
               setPassword={setPassword}
-              onClick={() => openModal('change-password')}
+              onClick={async () => {
+                try {
+                  const res = await verifyPassword(email!, password);
+                  if (res?.accessToken) {
+                    openModal('change-password');
+                  }
+                } catch (e) {
+                  Toast.error('비밀번호 인증 실패');
+                }
+              }}
             />
             <button
               type="button"

src/app/mypage/_mypage/PasswordField.tsx

@@ -15,8 +15,15 @@ export default function PasswordField({ password, setPassword, onClick }: Passwo
       field="input"
       type="password"
       label="비밀번호"
+      placeholder="비밀번호를 입력해 주세요."
       value={password}
       onChange={(e) => setPassword(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onClick();
+        }
+      }}
       rightSlot={
         <div className="flex items-center">
           <Button size="xs" fontSize="14" className="shrink-0" onClick={onClick}>

src/app/mypage/_mypage/action.ts

@@ -31,3 +31,13 @@ export async function updateUserPassword(password: string, passwordConfirmation:
     throw new Error('비밀번호 변경 실패');
   }
 }
+
+export async function verifyPassword(email: string, password: string) {
+  try {
+    const res = await axiosServer.post('/auth/signIn', { email, password });
+    return res.data;
+  } catch (e) {
+    console.error('비밀번호 인증 실패:', e);
+    throw new Error('비밀번호 인증 실패');
+  }
+}

src/app/mypage/_mypage/mypage-modal/ChangePasswordModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
 import {
   ModalContainer,
   ModalFooter,
@@ -17,13 +18,18 @@ import { AUTH_ERROR_MESSAGES } from '@/constants/messages/signup';
 import { Toast } from '@/components/common/Toastify';
 import { updateUserPassword } from '../action';
 import BouncingDots from '@/components/common/loading/BouncingDots';
+import { deleteClientCookie } from '@/lib/cookie/client';
+import { useUser } from '@/contexts/UserContext';
+
 interface PasswordChangeSuccessModalProps {
   onClose: () => void;
 }
 
 export default function ChangePasswordModal({ onClose }: PasswordChangeSuccessModalProps) {
   const { closeModal } = useModalContext();
+  const router = useRouter();
   const [isPending, startTransition] = useTransition();
+  const { logoutUser } = useUser();
   const INITIAL_FORM_DATA = {
     newPassword: '',
     confirmPassword: '',
@@ -54,11 +60,15 @@ export default function ChangePasswordModal({ onClose }: PasswordChangeSuccessMo
       try {
         await updateUserPassword(formData.newPassword, formData.confirmPassword);
 
+        deleteClientCookie('accessToken');
+        deleteClientCookie('refreshToken');
+        await logoutUser();
+
         setFormData(INITIAL_FORM_DATA);
 
         closeModal('change-password');
         Toast.success('비밀번호 변경 성공');
-        onClose();
+        router.replace('/login?from=password-change');
       } catch {
         Toast.error('비밀번호 변경 실패');
       }