Fix: 비밀번호 재설정 과정 이메일 전달 로직 및 UI 수정 #4

Author: ThinkMuk

src/app/auth/signin/page.jsx

@@ -28,12 +28,16 @@ export default function Page() {
   const [errors, setErrors] = useState([]);
   const [isRendering, setIsRendering] = useState(0);
   const [loading, setLoading] = useState(false);
+  const [verifiedEmail, setVerifiedEmail] = useState('');
 
   const handleBackToLogin = () => setIsRendering(0);
   const handleFindIdClick = () => setIsRendering(1);
   const handleResetPasswordClick = () => setIsRendering(2);
   const handleBackToResetRequest = () => setIsRendering(2);
-  const handleResetPasswordNext = () => setIsRendering(3);
+  const handleResetPasswordNext = (email) => {
+    setVerifiedEmail(email);
+    setIsRendering(3);
+  };
 
   const validatePassword = (password) => {
     const newErrors = [];
@@ -59,13 +63,13 @@ export default function Page() {
         setLoading(true);
         const res = await login(email, password);
         const { exists, access_token } = res.data.data;
-      
+
         if (!exists) {
           alert('아이디 혹은 비밀번호가 올바르지 않습니다.');
           setLoading(false);
           return;
         }
-      
+
         setAccessToken(access_token);
         router.push('/main');
       } catch (error) {
@@ -77,7 +81,7 @@ export default function Page() {
   };
 
   return (
-      <>
+    <>
       <Loader isLoading={loading} />
       <Image src={loginBg} alt='loginBg' fill className='absolute top-0 left-0 -z-10 object-cover opacity-70 blur-sm' />
       <div className='flex justify-center items-center flex-1 relative'>
@@ -120,9 +124,9 @@ export default function Page() {
               : `${isRendering === 3 ? '-translate-x-full' : 'translate-x-full'} opacity-0`
           } flex justify-center items-center`}
         >
-          <AuthResetRequest 
-            handleNextStep={handleResetPasswordNext} 
-            handleBackToLogin={handleBackToLogin} 
+          <AuthResetRequest
+            handleNextStep={handleResetPasswordNext}
+            handleBackToLogin={handleBackToLogin}
             setLoading={setLoading}
           />
         </div>
@@ -135,6 +139,7 @@ export default function Page() {
           } flex justify-center items-center`}
         >
           <AuthResetPassword
+            email={verifiedEmail}
             handleBackToLogin={handleBackToLogin}
             handleBackToResetRequest={handleBackToResetRequest}
             setLoading={setLoading}

src/components/auth/screen/AuthResetPassword.jsx

@@ -6,8 +6,7 @@ import axios from 'axios';
 
 import TransparentInput from '@/components/ui/input/TransparentInput';
 
-export default function AuthResetPassword({ handleBackToLogin, handleBackToResetRequest, setLoading }) {
-  const [email, setEmail] = useState('');
+export default function AuthResetPassword({ email, handleBackToLogin, handleBackToResetRequest, setLoading }) {
   const [newPassword, setNewPassword] = useState('');
   const [verifyNewPassword, setVerifyNewPassword] = useState('');
   const API_AUTH_URL = process.env.NEXT_PUBLIC_BASE_API_URL + '/auth';
@@ -44,34 +43,34 @@ export default function AuthResetPassword({ handleBackToLogin, handleBackToReset
         name='email'
         value={email}
         autoComplete={false}
-        onChange={(e) => setEmail(e.target.value)}
+        isDisabled={true}
         className='!mt-[40px]'
         label='이메일'
         placeholder='이메일을 입력해주세요'
       />
-      <TransparentInput 
+      <TransparentInput
         type='password'
         name='name'
         value={newPassword}
         autoComplete={false}
         onChange={(e) => setNewPassword(e.target.value)}
-        className='!mt-[40px]' 
-        label='새 비밀번호' 
-        placeholder='새 비밀번호를 입력해주세요' 
+        className='!mt-[40px]'
+        label='새 비밀번호'
+        placeholder='새 비밀번호를 입력해주세요'
       />
-      <TransparentInput 
+      <TransparentInput
         type='password'
         name='name'
         value={verifyNewPassword}
         autoComplete={false}
         onChange={(e) => setVerifyNewPassword(e.target.value)}
         className='!mt-[40px]'
-        label='새 비밀번호 확인' 
+        label='새 비밀번호 확인'
         placeholder='새 비밀번호를 확인'
       />
-      <Button 
-        color='primary' 
-        onPress={handleNewPassword} 
+      <Button
+        color='primary'
+        onPress={handleNewPassword}
         className='!mt-[20px] h-[48px] mobile:h-[44px] w-full rounded-full !bg-[#EA4336]'
       >
         비밀번호 변경

src/components/auth/screen/AuthResetRequest.jsx

@@ -84,25 +84,25 @@ export default function AuthResetRequest({ handleNextStep, handleBackToLogin, se
           isDisabled={!isNextDisabled}
         />
 
-        <Button 
-          onPress={handleSendOtp} 
+        <Button
+          onPress={handleSendOtp}
           isDisabled={!isNextDisabled}
-          color='default' 
+          color='default'
           className='!mt-[20px] h-[40px] mobile:h-[44px] w-full rounded-full !bg-[#DCDCDC]'
         >
           {isOtpDisabled ? '인증번호 보내기' : '인증번호 재전송'}
         </Button>
 
-        <OtpInput 
-          label='인증번호' 
-          setOtp={setOtp} 
+        <OtpInput
+          label='인증번호'
+          setOtp={setOtp}
           isDisabled={isOtpDisabled}
           isOtpVerified={!isNextDisabled}
           onSubmitOtp={handleVerifyOtp}
         />
 
         <Button
-          onPress={handleNextStep}
+          onPress={() => handleNextStep(email)}
           isDisabled={isNextDisabled}
           color='primary'
           className='!mt-[20px] h-[48px] mobile:h-[44px] w-full rounded-full !bg-[#EA4336]'