From 582a3812e66bf055fcc472384bd7a2715c4f0d6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=9A=B0?= Date: Wed, 21 Feb 2024 01:00:15 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B3=A0=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=ED=99=88=ED=99=94=EB=A9=B4=20=EC=9D=B4=EB=8F=99,?= =?UTF-8?q?=20=EC=9D=B8=EC=A6=9D=EB=B2=88=ED=98=B8=20=EC=9E=AC=EC=A0=84?= =?UTF-8?q?=EC=86=A1=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PhoneCheck.tsx | 2 +- src/pages/FindEmailPage.tsx | 9 +- src/pages/FindPasswordPage.tsx | 231 ++++------------------- src/pages/SignInPage.tsx | 6 +- src/pages/SignUpPage.tsx | 11 +- src/styles/find/FindEmailPageStyle.ts | 1 + src/styles/find/FindPasswordPageStyle.ts | 1 + src/styles/signin/SigninpageStyle.ts | 1 + src/styles/signup/SignuppageStyle.ts | 1 + 9 files changed, 67 insertions(+), 196 deletions(-) diff --git a/src/components/PhoneCheck.tsx b/src/components/PhoneCheck.tsx index 51edf6b..0857d31 100644 --- a/src/components/PhoneCheck.tsx +++ b/src/components/PhoneCheck.tsx @@ -84,7 +84,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 4f8a65b..66ab9f4 100644 --- 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(""); @@ -37,6 +38,12 @@ const FindEmailPage = () => { } } +const navigate = useNavigate(); + +const tohome = () => { + navigate('/'); +} + if(isFind){ return ( @@ -50,7 +57,7 @@ return ( - 로고 이미지 + 로고 이미지

이메일 찾기

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

 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 4b316fd..ca494a2 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 ( - + 로그인 { '*8자 이상으로 입력 *대문자 사용 *숫자 사용 *특수문자 사용', ); const [passwordcheckMessage, setPasswordCheckMessage] = useState( - '비밀번호 확인을 위해 다시 한 번 입력해주세요', + '', ); const [mismatchError, setMismatchError] = useState(false); const [isEmailSuccess, setIsEmailSuccess] = useState(false); @@ -99,7 +99,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); @@ -117,6 +117,11 @@ const SignUp = () => { }; const navigate = useNavigate(); + + const tohome = () => { + navigate('/'); + } + const onApply = () => { if ( name && @@ -175,7 +180,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 d302af7..d1ba235 100644 --- a/src/styles/signup/SignuppageStyle.ts +++ b/src/styles/signup/SignuppageStyle.ts @@ -57,6 +57,7 @@ export const Intro = styled.div` width: 64.55px; height: 20px; margin-bottom: 4px; + cursor: pointer; } h3 { color: #1e1e1e;