로그인 관련 모든 페이지 및 유효성 검사 완료 #10

likelionDigimon · Aug 10, 2023 · 64c8ca8 · 64c8ca8
1 parent 5ee53ca
commit 64c8ca8
Show file tree

Hide file tree

Showing 13 changed files with 681 additions and 83 deletions.
diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.4",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.7",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/App.js b/src/App.js
@@ -10,7 +10,8 @@ import Community from "./component/project/community";
 import PersonalInquiry from "./component/project/Inquiry/personInquiry";
 import Findid from "./component/project/find/findid";
 import Findpassword from "./component/project/find/findpassword";
-
+import Findresultid from "./component/project/find/findid/result";
+import Findresultpass from "./component/project/find/findpassword/result";
 import "./App.css";
 import Header from "./component/project/header/header";
 
@@ -31,6 +32,8 @@ function App() {
           <Route path="/Inquiry/personal" element={<PersonalInquiry />} />
           <Route path="/findid" element={<Findid />} />
           <Route path="/findpass" element={<Findpassword />} />
+          <Route path="/findid/result" element={<Findresultid />} />
+          <Route path="/findpass/result" element={<Findresultpass />} />
         </Routes>
       </BrowserRouter>
     </div>

diff --git a/src/component/emotion/component.js b/src/component/emotion/component.js
@@ -360,6 +360,10 @@ export const InnerContainer = ({ width, children }) => (
       padding: 4.5rem;
       background: #76c56f;
       border-radius: 2rem;
+      color: #fff;
+      gap: 3.6rem;
+
+      ${theme.textVariants.body1}
     `}
   >
     {children}
@@ -383,7 +387,6 @@ export const InputContainer = ({ width, children }) => (
 export const SignTitle = styled.div`
   color: #fff;
   ${theme.textVariants.body6_bold}
-  margin-bottom: 3.6rem;
 `;
 
 export const SignButton = styled.div`
@@ -411,7 +414,20 @@ export const SignInput = styled.input`
     ${theme.textVariants.body5_bold}
   }
 `;
-
+export const SignP = ({ children }) => (
+  <p
+    css={css`
+      ${theme.textVariants.body5_bold}
+      margin: 0rem;
+      color: #ff0000;
+      marginbottom: -16px;
+      marginleft: 11px;
+      position: absolute;
+    `}
+  >
+    {children}
+  </p>
+);
 export const CheckContainer = ({ children }) => (
   <div
     css={css`

diff --git a/src/component/project/find/findid/component.js b/src/component/project/find/findid/component.js
@@ -1,2 +1,25 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
+import theme from "../../../../styles/theme";
+
+export const Resultblock = ({ children }) => (
+  <div
+    css={css`
+      width: 100%;
+      margin: 0 auto;
+      display: flex;
+      text-align: center;
+      align-items: center; /* 수직 가운데 정렬 */
+      justify-content: center;
+      flex-direction: column;
+      border-radius: 5px 5px 0px 0px;
+      padding: 4rem;
+      color: #76c56f;
+      background: #fff;
+      box-sizing: border-box;
+      ${theme.textVariants.body3_bold}
+    `}
+  >
+    {children}
+  </div>
+);
diff --git a/src/component/project/find/findid/index.js b/src/component/project/find/findid/index.js
@@ -31,8 +31,10 @@ const Findid = () => {
           <SignTitle>아이디 찾기</SignTitle>
           <InputContainer>
             <SignInput placeholder="이름을 입력하세요" />
-            <SignInput placeholder="가입시 입력한 휴대폰 번호를 입력하세요" />
-            <SignButton>아이디 찾기</SignButton>
+            <SignInput placeholder="가입 시 입력한 휴대폰 번호를 입력하세요" />
+            <Link to="/findid/result">
+              <SignButton>아이디 찾기</SignButton>
+            </Link>
           </InputContainer>
         </InnerContainer>
       </Inners>

diff --git a/src/component/project/find/findid/result/component.js b/src/component/project/find/findid/result/component.js
@@ -0,0 +1,25 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import theme from "../../../../../styles/theme";
+
+export const Resultblock = ({ children }) => (
+  <div
+    css={css`
+      width: 100%;
+      margin: 0 auto;
+      display: flex;
+      text-align: center;
+      align-items: center; /* 수직 가운데 정렬 */
+      justify-content: center;
+      flex-direction: column;
+      border-radius: 5px 5px 0px 0px;
+      padding: 4rem;
+      color: #76c56f;
+      background: #fff;
+      box-sizing: border-box;
+      ${theme.textVariants.body3_bold}
+    `}
+  >
+    {children}
+  </div>
+);
diff --git a/src/component/project/find/findid/result/index.js b/src/component/project/find/findid/result/index.js
@@ -0,0 +1,46 @@
+import React from "react";
+import {
+  InnerContainer,
+  Inners,
+  SignTitle,
+  InputContainer,
+  SignButton,
+  SignInput,
+  Cblock,
+  CheckContainer,
+} from "../../../../emotion/component";
+import { Link } from "react-router-dom";
+import { Resultblock } from "./component";
+
+const Findresultid = () => {
+  return (
+    <>
+      <Inners>
+        <CheckContainer>
+          <Link to="/findid">
+            <Cblock width="10rem" background="#A1D99D" color="#F8F9E3">
+              아이디 찾기
+            </Cblock>
+          </Link>
+          <Link to="/findpass">
+            <Cblock width="10rem" background="#E1F0DF" color="#76C56F">
+              비밀번호 찾기
+            </Cblock>
+          </Link>
+        </CheckContainer>
+        <InnerContainer width={"50rem"}>
+          <SignTitle>아이디 찾기</SignTitle>
+          입력하신 정보와 일치하는 아이디는 아래와 같습니다.
+          <InputContainer>
+            <Resultblock>000000</Resultblock>
+            <Link to="/">
+              <SignButton>로그인 하러 가기</SignButton>
+            </Link>
+          </InputContainer>
+        </InnerContainer>
+      </Inners>
+    </>
+  );
+};
+
+export default Findresultid;
diff --git a/src/component/project/find/findpassword/index.js b/src/component/project/find/findpassword/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "@emotion/styled";
 import {
   InnerContainer,
   Inners,
@@ -17,12 +16,12 @@ const Findid = () => {
       <Inners>
         <CheckContainer>
           <Link to="/findid">
-            <Cblock width="10rem" background="#A1D99D" color="#F8F9E3">
+            <Cblock width="10rem" background="#E1F0DF" color="#76C56F">
               아이디 찾기
             </Cblock>
           </Link>
           <Link to="/findpass">
-            <Cblock width="10rem" background="#E1F0DF" color="#76C56F">
+            <Cblock width="10rem" background="#A1D99D" color="#F8F9E3">
               비밀번호 찾기
             </Cblock>
           </Link>
@@ -32,8 +31,10 @@ const Findid = () => {
           <InputContainer>
             <SignInput placeholder="아이디를 입력하세요" />
             <SignInput placeholder="이름을 입력하세요" />
-            <SignInput placeholder="가입시 입력한 휴대폰 번호를 입력하세요" />
-            <SignButton>아이디 찾기</SignButton>
+            <SignInput placeholder="가입 시 입력한 휴대폰 번호를 입력하세요" />
+            <Link to="/findpass/result">
+              <SignButton>비밀번호 찾기</SignButton>
+            </Link>
           </InputContainer>
         </InnerContainer>
       </Inners>

diff --git a/src/component/project/find/findpassword/result/component.js b/src/component/project/find/findpassword/result/component.js
@@ -0,0 +1,25 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import theme from "../../../../../styles/theme";
+
+export const Resultblock = ({ children }) => (
+  <div
+    css={css`
+      width: 100%;
+      margin: 0 auto;
+      display: flex;
+      text-align: center;
+      align-items: center; /* 수직 가운데 정렬 */
+      justify-content: center;
+      flex-direction: column;
+      border-radius: 5px 5px 0px 0px;
+      padding: 4rem;
+      color: #76c56f;
+      background: #fff;
+      box-sizing: border-box;
+      ${theme.textVariants.body3_bold}
+    `}
+  >
+    {children}
+  </div>
+);
diff --git a/src/component/project/find/findpassword/result/index.js b/src/component/project/find/findpassword/result/index.js
@@ -0,0 +1,46 @@
+import React from "react";
+import {
+  InnerContainer,
+  Inners,
+  SignTitle,
+  InputContainer,
+  SignButton,
+  SignInput,
+  Cblock,
+  CheckContainer,
+} from "../../../../emotion/component";
+import { Link } from "react-router-dom";
+import { Resultblock } from "./component";
+
+const Findresultpass = () => {
+  return (
+    <>
+      <Inners>
+        <CheckContainer>
+          <Link to="/findid">
+            <Cblock width="10rem" background="#E1F0DF" color="#76C56F">
+              아이디 찾기
+            </Cblock>
+          </Link>
+          <Link to="/findpass">
+            <Cblock width="10rem" background="#A1D99D" color="#F8F9E3">
+              비밀번호 찾기
+            </Cblock>
+          </Link>
+        </CheckContainer>
+        <InnerContainer width={"50rem"}>
+          <SignTitle>비밀번호 찾기</SignTitle>
+          입력하신 정보와 일치하는 비밀번호는 아래와 같습니다.
+          <InputContainer>
+            <Resultblock>000***</Resultblock>
+            <Link to="/">
+              <SignButton>로그인 하러 가기</SignButton>
+            </Link>
+          </InputContainer>
+        </InnerContainer>
+      </Inners>
+    </>
+  );
+};
+
+export default Findresultpass;
diff --git a/src/component/project/signup/component.js b/src/component/project/signup/component.js
@@ -20,22 +20,3 @@ export const InnerContainer = styled.div`
   background: #76c56f;
   padding: 64px;
 `;
-export const SignButton = styled.div`
-  width: 636px;
-  height: 77px;
-  flex-shrink: 0;
-  border-radius: 59px;
-  background: #3a6e67;
-  color: #fff;
-  text-align: center;
-  font-feature-settings: "clig" off, "liga" off;
-  font-family: Inter;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 30px;
-`;