[Feat]로그인 완료 페이지 구현

로그인 완료 페이지 구현
이메일로 로그인 페이지 후 로그인 완료 페이지 오픈
로그인 완료 페이지 클로즈 후 로그아웃헤더->로그인 헤더
Issues #15

client/src/components/Headers/LoginHeader.tsx

@@ -2,8 +2,9 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
 import SampleProfile from "../../asset/images/ProfileSample.png"; 
+import { useNavigate } from "react-router-dom";  
 import AlarmImage from "../../asset/images/alarm.png"; 
-import { useNavigate } from "react-router-dom";  // 페이지 이동을 위한 훅 가져오기
+
 
 // 로그인 상태일 때의 헤더 컴포넌트
 const LoginHeader: React.FC<LoginHeaderProps> = ({ onLogoutClick }) => {

client/src/components/Logins/LoginConfirmatationModal.tsx

@@ -0,0 +1,66 @@
+// LoginConfirmationModal.tsx
+import React from 'react';
+import styled from 'styled-components';
+
+const LoginConfirmationModal: React.FC<LoginConfirmationProps> = ({ onClose }) => {
+  const messageText = "로그인이 성공적으로 완료되었습니다!";
+  const confirmText = "확인"
+
+  return (
+    <ModalBackground>
+      <ModalContainer>
+        <Message>{messageText}</Message>
+        <ConfirmButton onClick={onClose}>{confirmText}</ConfirmButton>
+      </ModalContainer>
+    </ModalBackground>
+  );
+};
+
+export default LoginConfirmationModal;
+
+interface LoginConfirmationProps {
+  onClose: () => void;
+}
+
+// ... Styled Components for ModalBackground, ModalContainer, Message, ConfirmButton ...
+const ModalBackground = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+`;
+
+const ModalContainer = styled.div`
+  position: relative;
+  background-color: white;
+  padding: 20px;
+  width: 400px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Message = styled.h2`
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+  font-weight: 400;
+`;
+
+
+// 확인 버튼 스타일
+const ConfirmButton = styled.button`
+  width: 100%;
+  padding: 10px;
+  margin-top: 10px;
+  background-color: darkslategray;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+`;

client/src/components/Signups/Welcome.tsx

@@ -1,27 +1,50 @@
-// client/src/components/Signups/Welcome.tsx
 import React from 'react';
 import styled from 'styled-components';
+import { useSelector } from 'react-redux';
 import StockHolmLogo from '../../asset/images/StockHolmLogo.png';
 
+// Constants for the text strings
+const WELCOME_TEXT = "환영합니다, ";
+const START_TEXT = "시작하기";
+const JOINED_DATE_TEXT = "가입일: ";
+
 const Welcome: React.FC<WelcomeProps> = ({ onClose }) => {
+    // Access the memberInfo state from the Redux store
+    const memberInfo = useSelector((state: RootState) => state.memberInfo.memberInfo);
+
     return (
         <ModalBackground>
             <ModalContainer>
-                <Title>환영합니다.</Title>
+                <Title>{WELCOME_TEXT}{memberInfo?.name}님!</Title>  {/* Display the member's name */}
+                <Subtitle>{JOINED_DATE_TEXT}{memberInfo?.createdAt}</Subtitle> {/* Display the member's createdAt */}
                 <Logo src={StockHolmLogo} alt="StockHolm Logo" />
-                <ConfirmButton onClick={onClose}>시작하기</ConfirmButton> 
+                <ConfirmButton onClick={onClose}>{START_TEXT}</ConfirmButton> 
             </ModalContainer>
         </ModalBackground>
     );
 };
 
 export default Welcome;
 
-type WelcomeProps = {
+interface WelcomeProps {
     onClose: () => void;
+}
+
+// State type definition
+interface MemberInfo {
+  email: string;
+  name: string;
+  password: string;
+  confirmPassword: string;
+  createdAt: string;  // Assuming createdAt is a string in the format "YYYY-MM-DD" or similar
+}
+
+interface RootState {
+  memberInfo: {
+    memberInfo: MemberInfo | null;
   };
+}
 
-// 모달 배경 스타일
 const ModalBackground = styled.div`
   display: flex;
   justify-content: center;
@@ -34,7 +57,6 @@ const ModalBackground = styled.div`
   background-color: rgba(0, 0, 0, 0.5);
 `;
 
-// 모달 컨테이너 스타일
 const ModalContainer = styled.div`
   position: relative;
   background-color: white;
@@ -46,22 +68,27 @@ const ModalContainer = styled.div`
   align-items: center;
 `;
 
-// 모달 제목 스타일
 const Title = styled.h2`
   margin-bottom: 20px;
   font-size: 1.6rem;
   font-weight: 400;
 `;
 
-// 스톡홀름 로고 스타일
+const Subtitle = styled.h3`
+  margin-top: 10px;
+  margin-bottom: 20px;
+  font-size: 1.2rem;
+  font-weight: 300;
+  color: gray;
+`;
+
 const Logo = styled.img`
   margin-top: 20px;
   margin-bottom: 20px;
-  width: 150px;  // 이미지 크기 조절을 위해 추가
+  width: 150px;
   height: auto;
 `;
 
-// 시작하기 버튼 스타일
 const ConfirmButton = styled.button`
   width: 100%;
   padding: 10px;

client/src/page/MainPage.tsx

@@ -6,6 +6,7 @@ import LogoutHeader from "../components/Headers/LogoutHeader";
 import LoginHeader from "../components/Headers/LoginHeader";
 import OAuthLoginModal from "../components/Logins/OAuthLogin";
 import EmailLoginModal from "../components/Logins/EmailLogin";
+import LoginConfirmationModal from "../components/Logins/LoginConfirmatationModal";
 import EmailSignupModal from "../components/Signups/EmailSignup";
 import EmailVerificationModal from "../components/Signups/EmailCertify";
 import PasswordSettingModal from "../components/Signups/Password";
@@ -90,7 +91,17 @@ const MainPage = () => {
 
   const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태 관리
 
+
+
+  const [isLoginConfirmationModalOpen, setLoginConfirmationModalOpen] = useState(false);
+
   const handleLogin = () => {
+    closeEmailLoginModal();
+    setLoginConfirmationModalOpen(true);
+  };
+
+  const handleLoginConfirmationClose = () => {
+    setLoginConfirmationModalOpen(false);
     setIsLoggedIn(true);
   };
 
@@ -121,6 +132,9 @@ const MainPage = () => {
       )}
 
       {isEmailLoginModalOpen && <EmailLoginModal onClose={closeEmailLoginModal} onLogin={handleLogin} />}
+      {isLoginConfirmationModalOpen && (
+        <LoginConfirmationModal onClose={handleLoginConfirmationClose} />
+      )}
 
       {isEmailSignupModalOpen && <EmailSignupModal onClose={closeEmailSignupModal} onRequestVerification={openEmailVerificationModal} />}
       {isEmailVerificationModalOpen && <EmailVerificationModal onClose={closeEmailVerificationModal} onNextStep={openPasswordSettingModal} initialEmail={userEmail} />}