[Feat]비밀번호 확인 및 환영 모달 구현

-비밀번호 컴포넌트에서 서버와의 통신 문제로 에러가 발생
-비밀번호 모달의 다음 창으로 환영합니다 모달이 뜨도록 구현
-환영합니다 다음에는 모달창이 닫히도록 구현
Issues #15

client/src/components/Signups/Password.tsx

@@ -13,7 +13,7 @@ const strings = {
     passwordMismatch: "비밀번호와 비밀번호 확인이 일치하지 않습니다."
 };
 
-const PasswordSettingModal: React.FC<{ onClose: () => void, email: string }> = ({ onClose, email }) => {
+const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, onNext, email }) => {
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
     const [name, setName] = useState('');
@@ -62,9 +62,8 @@ const PasswordSettingModal: React.FC<{ onClose: () => void, email: string }> = (
 
             if (response.status === 200) {
                 console.log('Data sent successfully');
-                // JWT 토큰을 localStorage에 저장
-                localStorage.setItem('jwtToken', response.data.token);
                 onClose();
+                onNext();
             } else {
                 console.error('Error sending data');
             }
@@ -94,7 +93,11 @@ const PasswordSettingModal: React.FC<{ onClose: () => void, email: string }> = (
     );
 };
 
-
+interface PasswordSettingModalProps {
+  onClose: () => void;
+  onNext: () => void; 
+  email: string;
+}
 export default PasswordSettingModal;
 
 // 모달 배경 스타일

client/src/components/Signups/Welcome.tsx

@@ -0,0 +1,74 @@
+// client/src/components/Signups/Welcome.tsx
+import React from 'react';
+import styled from 'styled-components';
+import StockHolmLogo from '../../asset/images/StockHolmLogo.png';
+
+const Welcome: React.FC<WelcomeProps> = ({ onClose }) => {
+    return (
+        <ModalBackground>
+            <ModalContainer>
+                <Title>환영합니다.</Title>
+                <Logo src={StockHolmLogo} alt="StockHolm Logo" />
+                <ConfirmButton onClick={onClose}>시작하기</ConfirmButton> 
+            </ModalContainer>
+        </ModalBackground>
+    );
+};
+
+export default Welcome;
+
+type WelcomeProps = {
+    onClose: () => void;
+  };
+
+// 모달 배경 스타일
+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 Title = styled.h2`
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+  font-weight: 400;
+`;
+
+// 스톡홀름 로고 스타일
+const Logo = styled.img`
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 150px;  // 이미지 크기 조절을 위해 추가
+  height: auto;
+`;
+
+// 시작하기 버튼 스타일
+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/page/MainPage.tsx

@@ -14,6 +14,7 @@ import WatchList from "../components/watchlist/WatchList";
 import Holdings from "../components/watchlist/Holdings"; // Assuming you have a Holdings component
 import CompareChartSection from "../components/CompareChartSection/Index";
 import StockOrderSection from "../components/StockOrderSection/Index";
+import Welcome from "../components/Signups/Welcome";
 
 import { StateProps } from "../models/stateProps";
 
@@ -25,6 +26,7 @@ const MainPage = () => {
   const [isEmailLoginModalOpen, setEmailLoginModalOpen] = useState(false);
   const [isEmailSignupModalOpen, setEmailSignupModalOpen] = useState(false);
   const [userEmail, setUserEmail] = useState('');
+  const [isWelcomeModalOpen, setWelcomeModalOpen] = useState(false);
 
   const openOAuthModal = useCallback(() => {
     setOAuthModalOpen(true);
@@ -52,6 +54,7 @@ const MainPage = () => {
     setEmailSignupModalOpen(false);
   }, []);
 
+
   const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false);
 
   // 이메일 인증 모달을 열 때 사용자가 입력한 이메일을 저장하도록 변경
@@ -74,6 +77,15 @@ const MainPage = () => {
 
   const closePasswordSettingModal = useCallback(() => {
     setPasswordSettingModalOpen(false);
+}, []);
+
+  const openWelcomeModal = useCallback(() => {
+    setPasswordSettingModalOpen(false); // 비밀번호 설정 모달 닫기
+    setWelcomeModalOpen(true); // Welcome 모달 열기
+  }, []);
+
+  const closeWelcomeModal = useCallback(() => {
+    setWelcomeModalOpen(false);
   }, []);
 
   const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태 관리
@@ -114,11 +126,16 @@ const MainPage = () => {
 
       {isPasswordSettingModalOpen && (
         <PasswordSettingModal
+          onClose={closePasswordSettingModal} // Password 모달을 닫는다.
+          onNext={openWelcomeModal} // Welcome 모달을 연다.
+          email={userEmail} // email을 userEmail로 설정
+        />
+      )}
+      {isWelcomeModalOpen && (
+        <Welcome
           onClose={() => {
-            handleLogin();
-            closePasswordSettingModal();
+            closeWelcomeModal();
           }}
-          email="[email protected]"
         />
       )}
     </Container>