diff --git a/src/App.tsx b/src/App.tsx index 09d4b85..9bf65de 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import Loginpage from './page/Auth/Loginpage'; import Registerpage from './page/Auth/Registerpage'; import FindIdandPwpage from './page/Auth/FindIdandPwpage'; import FindIdpage from './page/Auth/FindIdpage'; -import FindPWpage from './page/Auth/FindPWpage'; +import FindPwpage from './page/Auth/FindPwpage'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; const App = () => { @@ -10,11 +10,9 @@ const App = () => { } /> - {/* } /> } /> - } /> - */} + } /> } /> diff --git a/src/page/Auth/FindIdandPwpage.tsx b/src/page/Auth/FindIdandPwpage.tsx new file mode 100644 index 0000000..d42e390 --- /dev/null +++ b/src/page/Auth/FindIdandPwpage.tsx @@ -0,0 +1,54 @@ +import { AuthContent } from '../../component/Auth/.'; +import styled from 'styled-components'; +import { theme, flexCenter } from '../../style/theme'; +import { useNavigate } from 'react-router-dom'; + +const FindIdandPwpage = () => { + const navigate = useNavigate(); + return ( + + +
아이디 / 비밀번호를 찾아보세요
+
navigate(`/find/id`)}> + 아이디 찾기 +
+
navigate(`/find/pw`)}> + 비밀번호 찾기 +
+
+ ); +}; + +export default FindIdandPwpage; + +const Wrapper = styled.div` + width: 100%; + ${flexCenter} + flex-direction: column; + min-height: 100vh; + .info { + ${flexCenter} + color: #bdbdbd; + font-size: 2.4rem; + text-align: center; + margin-bottom: 8rem; + } + .find-button { + box-shadow: 1px 1px ${theme.color.light_gray}; + ${flexCenter} + width: 58rem; + border: 2px solid ${theme.color.Main}; + border-radius: 5px; + cursor: pointer; + height: 7rem; + margin-bottom: 2rem; + font-weight: bold; + background: ${theme.color.white}; + color: ${theme.color.Main}; + font-size: 1.6rem; + &:hover { + background: ${theme.color.Main}; + color: white; + } + } +`; diff --git a/src/page/Auth/FindIdpage.tsx b/src/page/Auth/FindIdpage.tsx new file mode 100644 index 0000000..89e53a9 --- /dev/null +++ b/src/page/Auth/FindIdpage.tsx @@ -0,0 +1,112 @@ +import styled from 'styled-components'; +import { useForm } from 'react-hook-form'; +import { AuthContent, LoginButton } from '../../component/Auth/.'; +import { theme, flexCenter, inputlabel, inputForm } from '../../style/theme'; + +const FindIdpage = () => { + interface Form { + email: string; + company_name: string; + } + const initValue: Form = { + email: '', + company_name: '', + }; + const { + handleSubmit, + register, + formState: { errors }, + } = useForm
({ + mode: 'onSubmit', + defaultValues: initValue, + }); + + const onSubmit = (data: Form) => { + console.log(data); + }; + return ( + + + + +
대표 이메일
+ + + {errors.email && ( + {errors.email.message} + )} +
+ +
기업명
+ + {errors.company_name && ( + {errors.company_name.message} + )} +
+ + +
+ ); +}; + +export default FindIdpage; + +const SubmitMessage = styled.div` + font-size: 1.2rem; + height: 2rem; + color: #ff1717; +`; + +const Wrapper = styled.div` + ${flexCenter} + width: 100%; + flex-direction: column; + min-height: 100vh; + & + & { + margin-bottom: 5rem; + } +`; + +const InputWrapper = styled.div` + position: relative; + .label { + ${inputlabel} + } + .email-auth { + position: absolute; + right: 0; + width: 7rem; + height: 3.4rem; + color: ${theme.color.Main}; + border-radius: 7px; + border: 2px solid ${theme.color.Main}; + } + & + & { + margin-top: 1rem; + } +`; + +const Input = styled.input` + ${inputForm} +`; diff --git a/src/page/Auth/FindPwpage.tsx b/src/page/Auth/FindPwpage.tsx new file mode 100644 index 0000000..30c11a8 --- /dev/null +++ b/src/page/Auth/FindPwpage.tsx @@ -0,0 +1,110 @@ +import { useForm } from 'react-hook-form'; +import { AuthContent, LoginButton } from '../../component/Auth/.'; +import styled from 'styled-components'; +import { theme, flexCenter, inputlabel, inputForm } from '../../style/theme'; + +const FindIdpage = () => { + interface Form { + email: string; + id: string; + } + const initValue: Form = { + email: '', + id: '', + }; + const { + handleSubmit, + register, + formState: { errors }, + } = useForm
({ + mode: 'onSubmit', + defaultValues: initValue, + }); + + const onSubmit = (data: Form) => { + console.log(data); + }; + return ( + + + + +
대표 이메일
+ + + {errors.email && ( + {errors.email.message} + )} +
+ +
아이디
+ + {errors.id && {errors.id.message}} +
+ + +
+ ); +}; + +export default FindIdpage; + +const SubmitMessage = styled.div` + font-size: 1.2rem; + height: 2rem; + color: #ff1717; +`; + +const Wrapper = styled.div` + ${flexCenter} + width: 100%; + flex-direction: column; + min-height: 100vh; + & + & { + margin-bottom: 5rem; + } +`; + +const InputWrapper = styled.div` + position: relative; + .label { + ${inputlabel} + } + .email-auth { + position: absolute; + right: 0; + width: 7rem; + height: 3.4rem; + color: ${theme.color.Main}; + border-radius: 7px; + border: 2px solid ${theme.color.Main}; + } + & + & { + margin-top: 1rem; + } +`; + +const Input = styled.input` + ${inputForm} +`;