로고 클릭시 홈화면 이동, 인증번호 재전송 기능 수정

teamViNO · Feb 20, 2024 · 582a381 · 582a381
1 parent aee2d61
commit 582a381
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 196 deletions.
diff --git a/src/components/PhoneCheck.tsx b/src/components/PhoneCheck.tsx
@@ -84,7 +84,7 @@ const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel, type}) =
       const handleCertifyNum = async () => {
             if(isSend){
                 SetIsCheck(false);
-                setTime(10);
+                setTime(5*60);
             }
             try{
                 const {data} = type === true ? (await sendSMSAPI({

diff --git a/src/pages/FindEmailPage.tsx b/src/pages/FindEmailPage.tsx
@@ -9,6 +9,7 @@ import PhoneCheck from '@/components/PhoneCheck';
 import { findEmailAPI } from '@/apis/user';
 import FindEmail from '@/components/FindEmail';
 import ImageSlider from '@/components/ImageSlider';
+import { useNavigate } from 'react-router-dom';
 
 const FindEmailPage = () => {
   const [name, setName] = useState<string>("");
@@ -37,6 +38,12 @@ const FindEmailPage = () => {
   }
 }
 
+const navigate = useNavigate();
+
+const tohome = () => {
+  navigate('/');
+}
+
 if(isFind){
   return (
     <FindEmailPageStyles.Container>
@@ -50,7 +57,7 @@ return (
             <ImageSlider/>
             <FindEmailPageStyles.MainSection>
               <FindEmailPageStyles.Intro>
-                <img src={smallLogo} alt="로고 이미지" />
+                <img src={smallLogo} alt="로고 이미지" onClick={tohome} />
                 <h3>이메일 찾기</h3>
                 <p>이메일이 기억나지 않으시나요?</p>
               </FindEmailPageStyles.Intro>

diff --git a/src/pages/FindPasswordPage.tsx b/src/pages/FindPasswordPage.tsx
@@ -1,5 +1,6 @@
 import React, { useState} from 'react';
 import styled from 'styled-components';
+import * as FindPasswordPageStyles from '@/styles/find/FindPasswordPageStyle';
 import { Link } from 'react-router-dom';
 import smallLogo from "../assets/logo.png";
 import theme from '@/styles/theme';
@@ -8,6 +9,7 @@ import PhoneCheck from '@/components/PhoneCheck';
 import { findPasswordAPI } from '@/apis/user';
 import FindPassword from '@/components/FindPassword';
 import ImageSlider from '@/components/ImageSlider';
+import { useNavigate } from 'react-router-dom';
 
 const FindPasswordPage = () => {
   const [name, setName] = useState<string>("");
@@ -44,232 +46,81 @@ const FindPasswordPage = () => {
   }
 }
 
+const navigate = useNavigate();
+
+const tohome = () => {
+  navigate('/');
+}
+
 if(isFind){
   return (
-    <Container>
+    <FindPasswordPageStyles.Container>
       <FindPassword email={email}/>
-    </Container>
+    </FindPasswordPageStyles.Container>
   );
 }
 return (
-  <Container>
-          <Wrapper>
+  <FindPasswordPageStyles.Container>
+          <FindPasswordPageStyles.Wrapper>
             <ImageSlider/>
-            <MainSection>
-              <Intro>
-                <img src={smallLogo} alt="로고 이미지" />
+            <FindPasswordPageStyles.MainSection>
+              <FindPasswordPageStyles.Intro>
+                <img src={smallLogo} alt="로고 이미지" onClick={tohome} />
                 <h3>비밀번호 찾기</h3>
                 <p>비밀번호가 기억나지 않으시나요?</p>
-              </Intro>
-              <InputSection>
-                  <Label>
+              </FindPasswordPageStyles.Intro>
+              <FindPasswordPageStyles.InputSection>
+                  <FindPasswordPageStyles.Label>
                     <span>이메일 주소</span>
-                    <InputBox
+                    <FindPasswordPageStyles.InputBox
                       type="text"
                       id="email"
                       name="email"
                       value={email}
                       placeholder="abcd@email.com"
                       onChange={onChangeEmail}
-                    ></InputBox>
-                  </Label>
-                  <Label>
+                    ></FindPasswordPageStyles.InputBox>
+                  </FindPasswordPageStyles.Label>
+                  <FindPasswordPageStyles.Label>
                     <span>이름</span>
-                    <InputBox
+                    <FindPasswordPageStyles.InputBox
                       type="text"
                       id="name"
                       name="name"
                       value={name}
                       placeholder="홍길동"
                       onChange={onChangeName}
                       readOnly={allChecked}
-                  ></InputBox>
-                  </Label>
-                  <TwoLabel>
+                  ></FindPasswordPageStyles.InputBox>
+                  </FindPasswordPageStyles.Label>
+                  <FindPasswordPageStyles.TwoLabel>
                     <PhoneCheck setCheck={setAllChecked} tel={tel} setTel={setTel} type={false}/>
-                    </TwoLabel>
-                  <FindButton disabled={!allChecked} onClick={findBtnHandler}>
+                    </FindPasswordPageStyles.TwoLabel>
+                  <FindPasswordPageStyles.FindButton disabled={!allChecked} onClick={findBtnHandler}>
                     찾아보기
-                  </FindButton>
-              <TextTotalComponent style={{margin: "40px 0px 0px 0px"}}>
-              <TextDiv style={{fontSize:"14px", color:"#BBB", fontWeight: "500", lineHeight: "1.6"}}>
+                  </FindPasswordPageStyles.FindButton>
+              <FindPasswordPageStyles.TextTotalComponent style={{margin: "40px 0px 0px 0px"}}>
+              <FindPasswordPageStyles.TextDiv style={{fontSize:"14px", color:"#BBB", fontWeight: "500", lineHeight: "1.6"}}>
                 계정이 기억나시나요?
-              </TextDiv>
+              </FindPasswordPageStyles.TextDiv>
               <StyledLink to="/sign-in">로그인</StyledLink>
-              </TextTotalComponent>
-              <TextTotalComponent style={{margin: "12px 0px 0px 0px"}}>
-              <TextDiv style={{fontSize:"14px", color:"#BBB", fontWeight: "500", lineHeight: "1.6"}}>
+              </FindPasswordPageStyles.TextTotalComponent>
+              <FindPasswordPageStyles.TextTotalComponent style={{margin: "12px 0px 0px 0px"}}>
+              <FindPasswordPageStyles.TextDiv style={{fontSize:"14px", color:"#BBB", fontWeight: "500", lineHeight: "1.6"}}>
                     아직 계정이 없으신가요?
-              </TextDiv>
+              </FindPasswordPageStyles.TextDiv>
               <StyledLink to="/sign-up">이메일로 회원가입</StyledLink>
-              </TextTotalComponent>
-              </InputSection>
-            </MainSection>
-          </Wrapper>
+              </FindPasswordPageStyles.TextTotalComponent>
+              </FindPasswordPageStyles.InputSection>
+            </FindPasswordPageStyles.MainSection>
+          </FindPasswordPageStyles.Wrapper>
       {isModal && <NotFindUserModal setIsShow={setIsModal} type={true}/>}
-      </Container>
+      </FindPasswordPageStyles.Container>
   );
 };
 
 export default FindPasswordPage;
 
-
-const Container = styled.div`
-  display: flex;
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 1440px;
-  width: 100%;
-  min-height: 100vh;
-  gap: 124px;
-`;
-
-
-const MainSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: auto;
-  height: 840px;
-  margin-top: 300px;
-`;
-
-const Intro = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 40px;
-  img {
-    width: 64.55px;
-    height: 20px;
-    margin-bottom: 4px;
-  }
-  h3 {
-    color: #1e1e1e;
-    font-family: Pretendard;
-    font-size: 36px;
-    font-weight: bold;
-    line-height: 160%;
-    margin: 0;
-  }
-  p {
-    color: #bbb;
-    font-size: 16px;
-    font-weight: 500;
-    margin-top: 10px;
-    line-height: 160%;
-  }
-`;
-
-const InputSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 600px;
-  height: auto;
-`;
-
-
-const Label = styled.label`
-  margin-bottom: 20px;
-  span {
-    font-size: 16px;
-    color: #787878;
-    font-family: Pretendard;
-    margin-bottom: 8px;
-    font-weight: 500;
-    line-height: 160%;
-  }
-`;
-
-const TwoLabel = styled.label`
-  display : flex;
-  flex-direction : column;
-  margin-bottom: 8px;
-  span {
-    font-size: 16px;
-    font-family: Pretendard;
-    margin-bottom: 8px;
-    font-weight: 500;
-    line-height: 160%;
-  }
-`;
-
-const InputBox = styled.input`
-  display: flex;
-  align-items: center;
-  margin-bottom : 8px;
-  justify-content: center;
-  width: 494px;
-  height: 56px;
-  padding: 0px 0px 0px 20px;
-  gap: 20px;
-  flex: 1 0 0;
-  font-size: 16px;
-  font-style: normal;
-  color: var(--Main, #1E1E1E);
-  font-family: Pretendard;
-  font-weight: 500;
-  line-height: 160%;
-  border-radius: 12px;
-  border: 1.5px solid var(--gray-200, #e8e8e8);
-  outline: none;
-  
-  &:hover {
-    border: 1.5px solid #1e1e1e;
-  }
-  &:focus {
-    border: 1.5px solid #1e1e1e;
-    border-color: #1e1e1e;
-  }
-  &::placeholder {
-    color: #bbb;
-
-    ${theme.typography.Body1};
-  }
-`;
-
-const FindButton = styled.button`
-  width: 494px;
-  height: 56px;
-  background: #1E1E1E;
-  color: #EEEEEE;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 160%;
-  border-radius: 12px;
-  border: none;
-  font-family: Pretendard;
-  &:hover {
-    cursor: pointer;
-  }
-  &:disabled {
-    background-color : #F3F3F3;
-    color : #BBBBBB;
-  }
-`;
-
-const TextTotalComponent = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin: "0px";
-`;
-
-const TextDiv = styled.div`
-  color: ${(props) => props.color || "#1e1e1e"};
-  text-transform: capitalize;
-  font-size: 36px;
-  font-weight: bold;
-  font-style: normal;
-  line-height: 160%; /* 57.6px */
-  font-family: Pretendard;
-  margin: "0px";
-`;
-
 const StyledLink = styled(Link)`
   color: ${({ theme }) => theme.color.gray500};
   ${ theme.typography.Body3 };

diff --git a/src/pages/SignInPage.tsx b/src/pages/SignInPage.tsx
@@ -102,10 +102,14 @@ const SignInPage: React.FC = () => {
     window.location.href = kakaoURL;
   };
 
+  const tohome = () => {
+    navigate('/');
+  }
+
   return (
     <SignInPageStyles.PageComponent>
       <SignInPageStyles.LoginTotalComponent>
-        <SignInPageStyles.Image src={smallLogo} alt="logo" width={'auto'} height={20} />
+        <SignInPageStyles.Image src={smallLogo} alt="logo" width={'auto'} height={20} onClick={tohome} />
         <SignInPageStyles.TextDiv>로그인</SignInPageStyles.TextDiv>
         <SignInPageStyles.TextDiv
           style={{

diff --git a/src/pages/SignUpPage.tsx b/src/pages/SignUpPage.tsx
@@ -35,7 +35,7 @@ const SignUp = () => {
     '*8자 이상으로 입력 *대문자 사용 *숫자 사용 *특수문자 사용',
   );
   const [passwordcheckMessage, setPasswordCheckMessage] = useState<string>(
-    '비밀번호 확인을 위해 다시 한 번 입력해주세요',
+    '',
   );
   const [mismatchError, setMismatchError] = useState<boolean>(false);
   const [isEmailSuccess, setIsEmailSuccess] = useState(false);
@@ -99,7 +99,7 @@ const SignUp = () => {
 
   const onChangePasswordCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPasswordCheck(e.target.value);
-    if (e.target.value === '') {
+    if (!password) {
       setPasswordCheckMessage('비밀번호를 재입력해주세요');
     } else if (password && e.target.value !== password) {
       setMismatchError(true);
@@ -117,6 +117,11 @@ const SignUp = () => {
   };
 
   const navigate = useNavigate();
+
+  const tohome = () => {
+    navigate('/');
+  }
+
   const onApply = () => {
     if (
       name &&
@@ -175,7 +180,7 @@ const SignUp = () => {
       <SignupPageStyles.MainSection>
         <SignupPageStyles.InputSection>
           <SignupPageStyles.Intro>
-            <img src={logo} alt="로고 이미지" />
+            <img src={logo} alt="로고 이미지" onClick={tohome} />
             <h3>회원가입</h3>
             <p>새로운 계정을 생성하고 나만의 영상 아카이빙을 시작해요</p>
           </SignupPageStyles.Intro>

diff --git a/src/styles/find/FindEmailPageStyle.ts b/src/styles/find/FindEmailPageStyle.ts
@@ -34,6 +34,7 @@ export const Intro = styled.div`
     width: 64.55px;
     height: 20px;
     margin-bottom: 4px;
+    cursor: pointer;
   }
   h3 {
     color: #1e1e1e;

diff --git a/src/styles/find/FindPasswordPageStyle.ts b/src/styles/find/FindPasswordPageStyle.ts
@@ -34,6 +34,7 @@ export const Intro = styled.div`
     width: 64.55px;
     height: 20px;
     margin-bottom: 4px;
+    cursor: pointer;
   }
   h3 {
     color: #1e1e1e;