[Fix]잔버그 수정

로그인 창, 캐쉬 모달창에 라우터 지정 입력창에 엔터 키 입력하면 다음 입력창/버튼으로 이동시키도록 구현 문자열 수정 Issues #70
codestates-seb · Sep 19, 2023 · 11be3ee · 11be3ee
1 parent 2e29de6
commit 11be3ee
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 27 deletions.
diff --git a/client/src/components/Logins/OAuthLogin.tsx b/client/src/components/Logins/OAuthLogin.tsx
@@ -1,12 +1,10 @@
 
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 import GoogleLoginButton from "./GoogleLoginButton";
 import KakaoLoginButton from "./KakaoLoginButton";
-import { useSelector } from "react-redux";
-import { RootState } from "../../store/config";
 
-const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick, onEmailSignupClick, onLoginSuccess }) => {
+const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick, onEmailSignupClick }) => {
   const titleText = "로그인";
   const orText = "또는";
   const emailLoginText = "이메일로 로그인";
@@ -16,17 +14,6 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick
   const GOOGLE_BACKEND_URL = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/google";
   const KAKAO_BACKEND_URL = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/kakao";
 
-  //로그인 전역변수 불러오기
-  const loginState = useSelector((state: RootState) => state.login);
-
-  // 이미 로그인상태라면 모달창 닫기
-  useEffect(() => {
-    if (loginState === 1) {
-      onLoginSuccess();
-      onClose();
-    }
-  }, [loginState, onClose]);
-
   return (
     <ModalBackground>
       <ModalContainer>
@@ -52,9 +39,8 @@ interface LoginModalProps {
   onClose: () => void;
   onEmailLoginClick: () => void;
   onEmailSignupClick: () => void;
-  onLoginSuccess: () => void;
-  onWatchListClick: () => void;
-  onHoldingsClick: () => void;
+  onWatchListClick?: () => void;  // '?'를 사용하여 선택적으로 만듭니다.
+  onHoldingsClick?: () => void;   // '?'를 사용하여 선택적으로 만듭니다.
 }
 
 // 모달창 띄웠을 때 배경 스타일

diff --git a/client/src/components/Profile/cashModal.tsx b/client/src/components/Profile/cashModal.tsx
@@ -11,11 +11,11 @@ import { setCashId, setMoney } from '../../reducer/cash/cashSlice';
 const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
 
     // 상태 및 변수 초기화
-    const titleText = "현금생성/리셋";
-    const cashCreationPlaceholder = "생성할 현금 입력";
+    const titleText = "현금생성/재생성";
+    const cashCreationPlaceholder = "1백만원~5억원 사이를 입력하세요";
     const createCashButtonText = "현금 생성";
-    const cashInputPlaceholder = "현금 입력";
-    const resetButtonText = "현금 리셋";
+    const cashInputPlaceholder = "1백만원~5억원 사이를 입력하세요";
+    const resetButtonText = "현금 재생성";
     // const refreshButtonText ="새로고침";
 
     const dispatch = useDispatch();

diff --git a/client/src/components/Signups/EmailSignup.tsx b/client/src/components/Signups/EmailSignup.tsx
@@ -11,13 +11,15 @@ const strings = {
   emailLabelText: "이메일",
   requestVerificationText: "이메일 인증요청",
   invalidEmailText: "유효하지 않은 이메일입니다",
+  emailSend : "이메일이 전송되었습니다"
 };
 
 const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ onClose, onRequestVerification }) => {
   const dispatch = useDispatch();
   const [email, setEmail] = useState("");
   const [isInvalidEmail, setIsInvalidEmail] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [emailSent, setEmailSent] = useState(false);
 
   // 이메일 입력값 변경 핸들러
   const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -59,6 +61,7 @@ const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ onClose, onRequestV
       if (response.status === 200) {
         dispatch(setEmailForVerification(email));
         onRequestVerification(email);
+        setEmailSent(true);  // 이 부분 추가
       } else if (response.status === 400) {
         setErrorMessage(response.data.message);
       } else if (response.status === 500) {
@@ -85,6 +88,7 @@ const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ onClose, onRequestV
         <Title>{strings.titleText}</Title>
         <Label>{strings.emailLabelText}</Label>
         <Input type="email" placeholder="이메일을 입력하세요" value={email} onChange={handleEmailChange} onKeyDown={handleKeyPress} />
+        {emailSent && <SuccessMessage>{strings.emailSend}</SuccessMessage>}
         {isInvalidEmail && <ErrorMessage>{strings.invalidEmailText}</ErrorMessage>}
         <SignupButton onClick={handleVerificationRequest}>{strings.requestVerificationText}</SignupButton>
         {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
@@ -186,3 +190,8 @@ const SignupButton = styled.button`
     background-color: rgba(47, 79, 79, 0.8);
   }
 `;
+const SuccessMessage = styled.p`
+  color: #e22926;  // 빨간색
+  margin-top: 5px;
+  font-size: 0.8rem;
+`;
diff --git a/client/src/components/Signups/Password.tsx b/client/src/components/Signups/Password.tsx
@@ -21,6 +21,8 @@ const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, on
   const [name, setName] = useState("");
   const [passwordError, setPasswordError] = useState("");
   const [confirmPasswordError, setConfirmPasswordError] = useState("");
+  // 요청 중인지 확인하는 상태 변수 추가
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const dispatch = useDispatch();
 
     // 각 입력 필드에 대한 ref를 생성합니다.
@@ -51,7 +53,6 @@ const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, on
   // 일반적인 오류 메시지 상태 추가
   const [generalError, setGeneralError] = useState("");
 
-
   const handleEnterPress = (event: React.KeyboardEvent<HTMLInputElement>, target?: "confirmPassword" | "name" | "confirmButton") => {
 
 
@@ -67,6 +68,12 @@ const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, on
   };
 
   const handleConfirmClick = async () => {
+
+    if (isSubmitting) {
+      // 이미 요청 중이라면 추가 요청을 방지
+      return;
+    }
+    setIsSubmitting(true);  // 요청 시작 전에 상태를 '요청 중'으로 설정
     //비밀번호 유효성 에러 메시지
     if (!isValidPassword(password)) {
       setPasswordError(strings.passwordError);
@@ -82,7 +89,6 @@ const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, on
     } else {
       setConfirmPasswordError("");
     }
-
     try {
       const response = await axios.post(
         "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/members",
@@ -113,7 +119,10 @@ const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, on
       } else {
         console.error("Error sending data");
       }
+      // 요청 완료 후 상태를 '요청 중 아님'으로 설정
+      setIsSubmitting(false);
     } catch (error) {
+      setIsSubmitting(false);  // 예외 발생 시 상태를 '요청 중 아님'으로 설정
       if (axios.isAxiosError(error)) {
         console.error("Error during data submission:", error);
         if (error.response) {
@@ -139,7 +148,7 @@ const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, on
         {confirmPasswordError && <ErrorMessage>{confirmPasswordError}</ErrorMessage>}
 
         <Label>{strings.nicknameLabelText}</Label>
-        <Input type="text" ref={nameRef} placeholder="닉네임을 입력해주세요" value={name} onChange={handleNameChange} onKeyDown={(event) => handleEnterPress(event, "confirmButton")}/>
+        <Input type="text" ref={nameRef} placeholder="이름을 입력해주세요" value={name} onChange={handleNameChange} onKeyDown={(event) => handleEnterPress(event, "confirmButton")}/>
 
         {generalError && <ErrorMessage>{generalError}</ErrorMessage>}
 

diff --git a/client/src/components/stockinfoComponents/stockinfoChart.tsx b/client/src/components/stockinfoComponents/stockinfoChart.tsx
@@ -1,6 +1,6 @@
 import { useSelector } from "react-redux";
 import { RootState } from "../../store/config";
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 
 const PortFolioChart = () => {
   const companyId = useSelector((state: RootState) => state.companyId);
@@ -555,7 +555,7 @@ const Ratio = styled.div`
   margin-top: 20px;
   width: 360px;
   display: flex;
-  borer: 1px solid#333;
+  border: 1px solid#333;
   text-align: center;
 `;
 

diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { BrowserRouter as Router, Route, Routes  } from "react-router-dom";
 import styled from "styled-components";
 
 import LogoutHeader from "../components/Headers/LogoutHeader";
@@ -24,6 +25,7 @@ import CompareChartSection from "../components/CompareChartSection/Index";
 import StockOrderSection from "../components/StockOrderSection/Index";
 
 import ProfileModal from "../components/Profile/profileModal";
+import CashModal from "../components/Profile/cashModal";
 import { StateProps } from "../models/stateProps";
 import { TabContainerPage } from "./TabPages/TabContainerPage";
 import { RootState } from "../store/config";
@@ -219,6 +221,24 @@ const MainPage = () => {
       )}
       {isGuideModalOpen && <GuideModal onClose={closeGuideModal} />}
       {isProfileModalOpen && <ProfileModal onClose={() => setProfileModalOpen(false)} />}
+      <Router>
+        <Routes>
+        <Route path="/membercash" element={<CashModal onClose={() => { /* 닫기 동작을 여기에 정의 */ }} />} />
+        <Route 
+          path="/OAuthLogin" 
+          element={
+            <OAuthLoginModal 
+              onClose={() => {}} 
+              onEmailLoginClick={() => {}} 
+              onEmailSignupClick={() => {}} 
+              onWatchListClick={() => {}} 
+              onHoldingsClick={() => {}} 
+        />
+  } 
+/>
+        {/* ... 다른 라우팅 경로 ... */}
+        </Routes>
+      </Router>
     </Container>
   );
 };