✨:: #7 아이디/비밀번호 찾기 페이지 추가

GroupBy-Side-Project-GSP · Mar 7, 2022 · d58f4cf · d58f4cf
1 parent efdcd34
commit d58f4cf
Show file tree

Hide file tree

Showing 4 changed files with 278 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,19 +2,17 @@ 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 = () => {
   return (
     <Router>
       <Routes>
         <Route path="/auth/login" element={<Loginpage />} />
-        {/*
         <Route path="/find/login" element={<FindIdandPwpage />} />
         <Route path="/find/id" element={<FindIdpage />} />
-        <Route path="/find/pw" element={<FindPWpage />} />
-        */}
+        <Route path="/find/pw" element={<FindPwpage />} />
         <Route path="/auth/register" element={<Registerpage />} />
       </Routes>
     </Router>

diff --git a/src/page/Auth/FindIdandPwpage.tsx 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 (
+    <Wrapper>
+      <AuthContent title="아이디 / 비밀번호 찾기" />
+      <div className="info">아이디 / 비밀번호를 찾아보세요</div>
+      <div className="find-button" onClick={() => navigate(`/find/id`)}>
+        아이디 찾기
+      </div>
+      <div className="find-button" onClick={() => navigate(`/find/pw`)}>
+        비밀번호 찾기
+      </div>
+    </Wrapper>
+  );
+};
+
+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
@@ -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<Form>({
+    mode: 'onSubmit',
+    defaultValues: initValue,
+  });
+
+  const onSubmit = (data: Form) => {
+    console.log(data);
+  };
+  return (
+    <Wrapper>
+      <AuthContent title="아이디 찾기" />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <InputWrapper>
+          <div className="label">대표 이메일</div>
+          <Input
+            placeholder="[email protected]"
+            {...register('email', {
+              required: '대표 이메일을 입력해주세요.',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: '이메일을 형식에 맞게 작성해주세요',
+              },
+            })}
+          />
+          <button className="email-auth">인증</button>
+          {errors.email && (
+            <SubmitMessage>{errors.email.message}</SubmitMessage>
+          )}
+        </InputWrapper>
+        <InputWrapper>
+          <div className="label">기업명</div>
+          <Input
+            placeholder="기업명"
+            {...register('company_name', {
+              required: '기업명을 입력해주세요.',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: '기업명을 형식에 맞게 작성해주세요',
+              },
+            })}
+          />
+          {errors.company_name && (
+            <SubmitMessage>{errors.company_name.message}</SubmitMessage>
+          )}
+        </InputWrapper>
+        <LoginButton
+          value="확인"
+          isDisabled={!errors.company_name && !errors.email ? false : true}
+        />
+      </form>
+    </Wrapper>
+  );
+};
+
+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
@@ -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<Form>({
+    mode: 'onSubmit',
+    defaultValues: initValue,
+  });
+
+  const onSubmit = (data: Form) => {
+    console.log(data);
+  };
+  return (
+    <Wrapper>
+      <AuthContent title="비밀번호 찾기" />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <InputWrapper>
+          <div className="label">대표 이메일</div>
+          <Input
+            placeholder="[email protected]"
+            {...register('email', {
+              required: '대표 이메일을 입력해주세요.',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: '이메일을 형식에 맞게 작성해주세요',
+              },
+            })}
+          />
+          <button className="email-auth">인증</button>
+          {errors.email && (
+            <SubmitMessage>{errors.email.message}</SubmitMessage>
+          )}
+        </InputWrapper>
+        <InputWrapper>
+          <div className="label">아이디</div>
+          <Input
+            placeholder="아이디"
+            {...register('id', {
+              required: '아이디를 입력해주세요.',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: '아이디를 형식에 맞게 작성해주세요',
+              },
+            })}
+          />
+          {errors.id && <SubmitMessage>{errors.id.message}</SubmitMessage>}
+        </InputWrapper>
+        <LoginButton
+          value="확인"
+          isDisabled={!errors.id && !errors.email ? false : true}
+        />
+      </form>
+    </Wrapper>
+  );
+};
+
+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}
+`;