[Feat]이메일 props에 저장

client/src/components/Signups/EmailCertify.tsx

@@ -1,3 +1,4 @@
+// /client/src/components/Signups/EmailCertify.tsx
 import axios from 'axios';
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -13,9 +14,9 @@ const strings = {
 };
 
 // 이메일 인증 모달 컴포넌트
-const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose, onNextStep }) => {
-    // 이메일 및 인증코드에 대한 상태를 선언합니다.
-    const [email, setEmail] = useState('[email protected]');
+const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose, onNextStep, initialEmail }) => {
+  // 이메일 및 인증코드에 대한 상태를 선언합니다.
+    const [email, setEmail] = useState(initialEmail);
     const [verificationCode, setVerificationCode] = useState('');
 
     // 이메일 입력값을 처리하는 함수
@@ -68,8 +69,9 @@ export default EmailVerificationModal;
 
 // 이메일 인증 모달의 Props 타입
 type EmailVerificationModalProps = {
-    onClose: () => void;
-    onNextStep: () => void;
+  onClose: () => void;
+  onNextStep: () => void;
+  initialEmail: string;  // 추가된 부분
 };
 
 // 모달의 배경 스타일

client/src/components/Signups/EmailSignup.tsx

@@ -29,17 +29,15 @@ const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ onClose, onRequestV
 
   // 이메일 인증 요청 핸들러
   const handleVerificationRequest = async () => {
-
     if (!validateEmail(email)) {
       setIsInvalidEmail(true);
       return;
     }
 
     try {
-      // 백엔드 배포 주소로 입력받은 이메일 전송
       const response = await axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/email/send', { email });
       if (response.status === 200) {
-        onRequestVerification();
+        onRequestVerification(email);
       } else {
         console.error('Error sending verification email');
       }
@@ -69,7 +67,7 @@ export default EmailSignupModal;
 // 프롭 타입 정의
 type EmailSignupModalProps = {
   onClose: () => void;
-  onRequestVerification: () => void;
+  onRequestVerification: (email: string) => void;
 };
 
 

client/src/page/MainPage.tsx

@@ -1,3 +1,4 @@
+// /client/src/pages/MainPage.tsx
 import { useState, useCallback } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
@@ -23,6 +24,7 @@ const MainPage = () => {
   const [isOAuthModalOpen, setOAuthModalOpen] = useState(false);
   const [isEmailLoginModalOpen, setEmailLoginModalOpen] = useState(false);
   const [isEmailSignupModalOpen, setEmailSignupModalOpen] = useState(false);
+  const [userEmail, setUserEmail] = useState('');
 
   const openOAuthModal = useCallback(() => {
     setOAuthModalOpen(true);
@@ -52,9 +54,11 @@ const MainPage = () => {
 
   const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false);
 
-  const openEmailVerificationModal = useCallback(() => {
-    setEmailSignupModalOpen(false); // 이메일 회원가입 모달 닫기
-    setEmailVerificationModalOpen(true); // 이메일 인증 모달 열기
+  // 이메일 인증 모달을 열 때 사용자가 입력한 이메일을 저장하도록 변경
+  const openEmailVerificationModal = useCallback((enteredEmail: string) => {
+    setEmailSignupModalOpen(false); 
+    setEmailVerificationModalOpen(true);
+    setUserEmail(enteredEmail);  // 사용자가 입력한 이메일을 저장
   }, []);
 
   const closeEmailVerificationModal = useCallback(() => {
@@ -104,15 +108,17 @@ const MainPage = () => {
         <OAuthLoginModal onClose={closeOAuthModal} onEmailLoginClick={openEmailLoginModal} onEmailSignupClick={openEmailSignupModal} onWatchListClick={() => handleMenuChange("관심목록")} onHoldingsClick={() => handleMenuChange("투자목록")} />
       )}
       {isEmailLoginModalOpen && <EmailLoginModal onClose={closeEmailLoginModal} onLogin={handleLogin} />}
+
       {isEmailSignupModalOpen && <EmailSignupModal onClose={closeEmailSignupModal} onRequestVerification={openEmailVerificationModal} />}
-      {isEmailVerificationModalOpen && <EmailVerificationModal onClose={closeEmailVerificationModal} onNextStep={openPasswordSettingModal} />}
+      {isEmailVerificationModalOpen && <EmailVerificationModal onClose={closeEmailVerificationModal} onNextStep={openPasswordSettingModal} initialEmail={userEmail} />}
+
       {isPasswordSettingModalOpen && (
         <PasswordSettingModal
-        onClose={() => {
-          handleLogin();
-          closePasswordSettingModal();
-        }}
-        email="[email protected]"  // 예시 email 값을 전달. 실제 필요한 email 값을 사용하세요.
+          onClose={() => {
+            handleLogin();
+            closePasswordSettingModal();
+          }}
+          email="[email protected]"
         />
       )}
     </Container>