diff --git a/src/components/PhoneCheck.tsx b/src/components/PhoneCheck.tsx index 1b13755..66e6879 100644 --- a/src/components/PhoneCheck.tsx +++ b/src/components/PhoneCheck.tsx @@ -85,7 +85,7 @@ const PhoneCheck : React.FC = ({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 index 7b03d71..8d29e34 100644 --- 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 ( @@ -49,19 +56,19 @@ const FindEmailPage = () => { ); } return ( - - + + - - - + + +

이메일 찾기

이메일이 기억나지 않으시나요?

- - - - + > + + - - + + 찾아보기 - - - + + { }} > 계정이 기억나시나요? - + 로그인 - - - + + { }} > 아직 계정이 없으신가요? - + 이메일로 회원가입 - - - - + + + + {isModal && } - + ); }; 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}; diff --git a/src/pages/FindPasswordPage.tsx b/src/pages/FindPasswordPage.tsx index 57aa097..e23810f 100644 --- 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(""); @@ -44,38 +46,44 @@ const FindPasswordPage = () => { } } +const navigate = useNavigate(); + +const tohome = () => { + navigate('/'); +} + if(isFind){ return ( - + - + ); } return ( - - + + - - - 로고 이미지 + + + 로고 이미지

비밀번호 찾기

비밀번호가 기억나지 않으시나요?

- - - - - + > + + - - + + 찾아보기 - - - + + + 계정이 기억나시나요? - + 로그인 - - - + + + 아직 계정이 없으신가요? - + 이메일로 회원가입 - - - - + + + + {isModal && } - + ); }; 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 index 1e76da9..d902dc9 100644 --- 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 ( - + 로그인 { const [passwordMessage, setPasswordMessage] = useState( '*8자 이상으로 입력 *대문자 사용 *숫자 사용 *특수문자 사용', ); - const [passwordcheckMessage, setPasswordCheckMessage] = useState( - '비밀번호 확인을 위해 다시 한 번 입력해주세요', - ); + const [passwordcheckMessage, setPasswordCheckMessage] = useState(''); const [mismatchError, setMismatchError] = useState(false); const [isEmailSuccess, setIsEmailSuccess] = useState(false); @@ -102,7 +100,7 @@ const SignUp = () => { const onChangePasswordCheck = (e: React.ChangeEvent) => { setPasswordCheck(e.target.value); - if (e.target.value === '') { + if (!password) { setPasswordCheckMessage('비밀번호를 재입력해주세요'); } else if (password && e.target.value !== password) { setMismatchError(true); @@ -120,6 +118,11 @@ const SignUp = () => { }; const navigate = useNavigate(); + + const tohome = () => { + navigate('/'); + }; + const onApply = () => { if ( name && @@ -178,7 +181,7 @@ const SignUp = () => { - +

회원가입

새로운 계정을 생성하고 나만의 영상 아카이빙을 시작해요

 diff --git a/src/styles/find/FindEmailPageStyle.ts b/src/styles/find/FindEmailPageStyle.ts index ce3baf6..54c1fe5 100644 --- 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 index 33a8f6d..837c7b3 100644 --- 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; diff --git a/src/styles/signin/SigninpageStyle.ts b/src/styles/signin/SigninpageStyle.ts index a27888d..8c95cb5 100644 --- a/src/styles/signin/SigninpageStyle.ts +++ b/src/styles/signin/SigninpageStyle.ts @@ -27,6 +27,7 @@ export const LoginTotalComponent = styled.div` export const Image = styled.img` width: ${(props) => props.width || '68px'}; height: ${(props) => props.height || '39.667px'}; + cursor: pointer; `; export const TextTotalComponent = styled.div` diff --git a/src/styles/signup/SignuppageStyle.ts b/src/styles/signup/SignuppageStyle.ts index 15178e1..7177635 100644 --- a/src/styles/signup/SignuppageStyle.ts +++ b/src/styles/signup/SignuppageStyle.ts @@ -58,6 +58,7 @@ export const Intro = styled.div` width: 64.55px; height: 20px; margin-bottom: 4px; + cursor: pointer; } h3 { color: #1e1e1e;