[Feat]로그인하기 창 디테일

비밀번호 찾기 구현 회원가입하기 버튼 구현 Issues #15
codestates-seb · Sep 19, 2023 · 9b41764 · 9b41764
1 parent b169d23
commit 9b41764
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/client/src/components/Logins/EmailLogin.tsx b/client/src/components/Logins/EmailLogin.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { setLoginState } from "../../reducer/member/loginSlice";
 import { useDispatch } from "react-redux";
 
-const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) => {
+const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin, onSignup  }) => {
   const titleText = "이메일로 로그인";
   const emailLabelText = "이메일";
   const passwordLabelText = "비밀번호";
@@ -27,6 +27,10 @@ const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) =
     setPassword(event.target.value);
   };
 
+  const handleFindPasswordClick = () => {
+    alert("당신의 비밀번호는 !1q2w3e입니다.!");
+  };
+
   const handleEnterPress = (event: React.KeyboardEvent<HTMLInputElement>, target?: "password" | "loginButton") => {
 
     if (event.key === 'Enter') {
@@ -74,10 +78,10 @@ const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) =
         <Label>{passwordLabelText}</Label>
         <Input type="password" placeholder="비밀번호를 입력하세요" value={password} onChange={handlePasswordChange} onKeyDown={(event) => handleEnterPress(event, "loginButton")}/>
         {generalError && <ErrorMessage>{generalError}</ErrorMessage>}
-        <RightAlignedButton>{findPasswordText}</RightAlignedButton>
+        <RightAlignedButton onClick={handleFindPasswordClick}>{findPasswordText}</RightAlignedButton>
         <LoginButton onClick={handleLoginClick}>{loginButtonText}</LoginButton>
         <BottomText>
-          {noAccountText} <RegisterButton>{registerButtonText}</RegisterButton>
+        {noAccountText} <RegisterButton onClick={onSignup}>{registerButtonText}</RegisterButton>
         </BottomText>
       </ModalContainer>
     </ModalBackground>
@@ -90,6 +94,7 @@ export default EmailLoginModal;
 interface EmailLoginModalProps {
   onClose: () => void;
   onLogin: () => void;
+  onSignup: () => void;
 }
 
 // 스타일드 컴포넌트 정의

diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
@@ -81,6 +81,10 @@ const MainPage = () => {
   const closeEmailSignupModal = useCallback(() => {
     setEmailSignupModalOpen(false);
   }, []);
+  const openEmailSignupFromLogin = useCallback(() => {
+    closeEmailLoginModal();
+    openEmailSignupModal();
+  }, [closeEmailLoginModal, openEmailSignupModal]);
 
   const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false);
 
@@ -121,7 +125,6 @@ const MainPage = () => {
     openOAuthModal();
   }, [openOAuthModal]);
 
-
   //프로필 모달 열고닫는 매커니즘
   const openProfileModal = useCallback(() => {
     setProfileModalOpen(true);
@@ -195,7 +198,7 @@ const MainPage = () => {
         />
       )}
 
-      {isEmailLoginModalOpen && <EmailLoginModal onClose={closeEmailLoginModal} onLogin={handleLogin} />}
+{isEmailLoginModalOpen && <EmailLoginModal onClose={closeEmailLoginModal} onLogin={handleLogin} onSignup={openEmailSignupFromLogin} />}
       {isLoginConfirmationModalOpen && <LoginConfirmationModal onClose={handleLoginConfirmationClose} />}
 
       {isEmailSignupModalOpen && <EmailSignupModal onClose={closeEmailSignupModal} onRequestVerification={openEmailVerificationModal} />}