Merge pull request #127 from teamViNO/feature-006

로고 클릭시 홈화면 이동, 인증번호 재전송 기능 수정
teamViNO · Feb 20, 2024 · c25eae5 · c25eae5
2 parents e99c493 + 4e5cf7d
commit c25eae5
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 384 deletions.
diff --git a/src/components/PhoneCheck.tsx b/src/components/PhoneCheck.tsx
@@ -85,7 +85,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
@@ -11,6 +11,7 @@ import NotFindUserModal from '@/components/modals/NotFindUserModal';
 import PhoneCheck from '@/components/PhoneCheck';
 import FindEmail from '@/components/FindEmail';
 import ImageSlider from '@/components/ImageSlider';
+import { useNavigate } from 'react-router-dom';
 
 import theme from '@/styles/theme';
 
@@ -41,6 +42,12 @@ const FindEmailPage = () => {
     }
   };
 
+  const navigate = useNavigate();
+
+  const tohome = () => {
+    navigate('/');
+  };
+
   if (isFind) {
     return (
       <FindEmailPageStyles.Container>
@@ -49,41 +56,46 @@ const FindEmailPage = () => {
     );
   }
   return (
-    <Container>
-      <Wrapper>
+    <FindEmailPageStyles.Container>
+      <FindEmailPageStyles.Wrapper>
         <ImageSlider />
-        <MainSection>
-          <Intro>
-            <LogoIcon />
+        <FindEmailPageStyles.MainSection>
+          <FindEmailPageStyles.Intro>
+            <LogoIcon onClick={tohome} />
             <h3>이메일 찾기</h3>
             <p>이메일이 기억나지 않으시나요?</p>
-          </Intro>
-          <InputSection>
-            <Label>
+          </FindEmailPageStyles.Intro>
+          <FindEmailPageStyles.InputSection>
+            <FindEmailPageStyles.Label>
               <span>이름</span>
-              <InputBox
+              <FindEmailPageStyles.InputBox
                 type="text"
                 id="name"
                 name="name"
                 value={name}
                 placeholder="홍길동"
                 onChange={onChangeName}
                 readOnly={allChecked}
-              ></InputBox>
-            </Label>
-            <TwoLabel>
+              ></FindEmailPageStyles.InputBox>
+            </FindEmailPageStyles.Label>
+            <FindEmailPageStyles.TwoLabel>
               <PhoneCheck
                 setCheck={setAllChecked}
                 tel={tel}
                 setTel={setTel}
                 type={false}
               />
-            </TwoLabel>
-            <FindButton disabled={!allChecked} onClick={findBtnHandler}>
+            </FindEmailPageStyles.TwoLabel>
+            <FindEmailPageStyles.FindButton
+              disabled={!allChecked}
+              onClick={findBtnHandler}
+            >
               찾아보기
-            </FindButton>
-            <TextTotalComponent style={{ margin: '40px 0px 0px 0px' }}>
-              <TextDiv
+            </FindEmailPageStyles.FindButton>
+            <FindEmailPageStyles.TextTotalComponent
+              style={{ margin: '40px 0px 0px 0px' }}
+            >
+              <FindEmailPageStyles.TextDiv
                 style={{
                   fontSize: '14px',
                   color: '#BBB',
@@ -92,11 +104,13 @@ const FindEmailPage = () => {
                 }}
               >
                 계정이 기억나시나요?
-              </TextDiv>
+              </FindEmailPageStyles.TextDiv>
               <StyledLink to="/sign-in">로그인</StyledLink>
-            </TextTotalComponent>
-            <TextTotalComponent style={{ margin: '12px 0px 0px 0px' }}>
-              <TextDiv
+            </FindEmailPageStyles.TextTotalComponent>
+            <FindEmailPageStyles.TextTotalComponent
+              style={{ margin: '12px 0px 0px 0px' }}
+            >
+              <FindEmailPageStyles.TextDiv
                 style={{
                   fontSize: '14px',
                   color: '#BBB',
@@ -105,179 +119,19 @@ const FindEmailPage = () => {
                 }}
               >
                 아직 계정이 없으신가요?
-              </TextDiv>
+              </FindEmailPageStyles.TextDiv>
               <StyledLink to="/sign-up">이메일로 회원가입</StyledLink>
-            </TextTotalComponent>
-          </InputSection>
-        </MainSection>
-      </Wrapper>
+            </FindEmailPageStyles.TextTotalComponent>
+          </FindEmailPageStyles.InputSection>
+        </FindEmailPageStyles.MainSection>
+      </FindEmailPageStyles.Wrapper>
       {isModal && <NotFindUserModal setIsShow={setIsModal} type={true} />}
-    </Container>
+    </FindEmailPageStyles.Container>
   );
 };
 
 export default FindEmailPage;
 
-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;
-  justify-content: center;
-  width: auto;
-  height: 840px;
-`;
-
-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`
-  span {
-    font-size: 16px;
-    color: #787878;
-    font-family: Pretendard;
-    margin-bottom: 8px;
-    font-weight: 500;
-    line-height: 160%;
-  }
-
-  &:not(:first-of-type) {
-    margin-top: 20px;
-  }
-`;
-
-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%;
-  }
-
-  &:not(:first-of-type) {
-    margin-top: 20px;
-  }
-`;
-
-const InputBox = styled.input`
-  display: flex;
-  align-items: center;
-  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};