From 2af19ecc032477e124e15db3f9fa18e67532ab0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?=
 <gimbyeonghyeon@gimbyeonghyeon-ui-MacBookAir.local>
Date: Mon, 11 Sep 2023 02:33:38 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=99=84=EB=A3=8C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20=EC=9D=B4=EB=A9=94?=
 =?UTF-8?q?=EC=9D=BC=EB=A1=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=9B=84=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=98=A4?=
 =?UTF-8?q?=ED=94=88=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=99=84=EB=A3=8C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=81=B4=EB=A1=9C=EC=A6=88=20?=
 =?UTF-8?q?=ED=9B=84=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94->=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=97=A4=EB=8D=94=20I?=
 =?UTF-8?q?ssues=20#15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Headers/LoginHeader.tsx |  3 +-
 .../Logins/LoginConfirmatationModal.tsx       | 66 +++++++++++++++++++
 client/src/components/Signups/Welcome.tsx     | 47 ++++++++++---
 client/src/page/MainPage.tsx                  | 14 ++++
 4 files changed, 119 insertions(+), 11 deletions(-)
 create mode 100644 client/src/components/Logins/LoginConfirmatationModal.tsx

diff --git a/client/src/components/Headers/LoginHeader.tsx b/client/src/components/Headers/LoginHeader.tsx
index 2229a786..87925c97 100644
--- a/client/src/components/Headers/LoginHeader.tsx
+++ b/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 }) => {
diff --git a/client/src/components/Logins/LoginConfirmatationModal.tsx b/client/src/components/Logins/LoginConfirmatationModal.tsx
new file mode 100644
index 00000000..8aa63659
--- /dev/null
+++ b/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;
+`;
diff --git a/client/src/components/Signups/Welcome.tsx b/client/src/components/Signups/Welcome.tsx
index aa5c788f..057c9b37 100644
--- a/client/src/components/Signups/Welcome.tsx
+++ b/client/src/components/Signups/Welcome.tsx
@@ -1,15 +1,24 @@
-// 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>
     );
@@ -17,11 +26,25 @@ const Welcome: React.FC<WelcomeProps> = ({ onClose }) => {
 
 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;
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
index 9316bc12..e09e2824 100644
--- a/client/src/page/MainPage.tsx
+++ b/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} />}