아이디 확인 및 유효성 검사

likelionDigimon · Aug 9, 2023 · 5ee53ca · 5ee53ca
1 parent 30339b8
commit 5ee53ca
Show file tree

Hide file tree

Showing 12 changed files with 275 additions and 80 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,4 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+* {
+  padding: 0px;
+  text-decoration: none;
 }
diff --git a/src/App.js b/src/App.js
@@ -8,6 +8,9 @@ import Sellerboard from "./component/project/board/sellerboard";
 import Agriboard from "./component/project/board/agricultboard";
 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 "./App.css";
 import Header from "./component/project/header/header";
 
@@ -26,6 +29,8 @@ function App() {
           <Route path="/agriboard" element={<Agriboard />} />
           <Route path="/community" element={<Community />} />
           <Route path="/Inquiry/personal" element={<PersonalInquiry />} />
+          <Route path="/findid" element={<Findid />} />
+          <Route path="/findpass" element={<Findpassword />} />
         </Routes>
       </BrowserRouter>
     </div>

diff --git a/src/component/emotion/component.js b/src/component/emotion/component.js
@@ -2,7 +2,9 @@
 import { css } from "@emotion/react";
 
 import styled from "@emotion/styled";
+import { type } from "@testing-library/user-event/dist/type";
 import { Link } from "react-router-dom";
+import theme from "../../styles/theme";
 
 const StyledProjectBox = styled.div`
   display: flex;
@@ -331,3 +333,118 @@ export const StyledLinkNavItem = styled(Link)`
     margin: 0;
   }
 `;
+
+export const Inners = ({ children }) => (
+  <div
+    css={css`
+      width: 120rem;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+    `}
+  >
+    {children}
+  </div>
+);
+
+export const InnerContainer = ({ width, children }) => (
+  <section
+    css={css`
+      width: ${width};
+      height: auto;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      padding: 4.5rem;
+      background: #76c56f;
+      border-radius: 2rem;
+    `}
+  >
+    {children}
+  </section>
+);
+export const InputContainer = ({ width, children }) => (
+  <section
+    css={css`
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      gap: 2.5rem;
+    `}
+  >
+    {children}
+  </section>
+);
+
+export const SignTitle = styled.div`
+  color: #fff;
+  ${theme.textVariants.body6_bold}
+  margin-bottom: 3.6rem;
+`;
+
+export const SignButton = styled.div`
+  width: 40rem;
+  height: 4.8rem;
+  border-radius: 5rem;
+  background: #3a6e67;
+  color: #fff;
+  ${theme.textVariants.body1}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const SignInput = styled.input`
+  width: 39.75rem;
+  border-radius: 0.6rem;
+  border: 0px;
+  padding: 1.6rem 2.5rem;
+  margin-bottom: 1rem;
+  ${theme.textVariants.body5_bold}
+
+  ::placeholder {
+    border: 0px;
+    color: lightgray;
+    ${theme.textVariants.body5_bold}
+  }
+`;
+
+export const CheckContainer = ({ children }) => (
+  <div
+    css={css`
+      margin: 0 auto;
+      display: flex;
+      flex-direction: row;
+      align-items: start;
+      position: relative;
+      left: 200px;
+      gap: 2rem;
+    `}
+  >
+    {children}
+  </div>
+);
+
+export const Cblock = ({ width, background, color, children }) => (
+  <div
+    css={css`
+      width: ${width};
+      margin: 0 auto;
+      display: flex;
+      text-align: center;
+      align-items: center; /* 수직 가운데 정렬 */
+      justify-content: center;
+      flex-direction: column;
+      border-radius: 5px 5px 0px 0px;
+      padding: 0.5rem 1.5rem;
+      background: ${background};
+      color: ${color};
+      ${theme.textVariants.body5_bold}
+    `}
+  >
+    {children}
+  </div>
+);
diff --git a/src/component/project/find/findid/component.js b/src/component/project/find/findid/component.js
@@ -0,0 +1,2 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
diff --git a/src/component/project/find/findid/index.js b/src/component/project/find/findid/index.js
@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "@emotion/styled";
+import {
+  InnerContainer,
+  Inners,
+  SignTitle,
+  InputContainer,
+  SignButton,
+  SignInput,
+  Cblock,
+  CheckContainer,
+} from "../../../emotion/component";
+import { Link } from "react-router-dom";
+const Findid = () => {
+  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>
+            <SignInput placeholder="이름을 입력하세요" />
+            <SignInput placeholder="가입시 입력한 휴대폰 번호를 입력하세요" />
+            <SignButton>아이디 찾기</SignButton>
+          </InputContainer>
+        </InnerContainer>
+      </Inners>
+    </>
+  );
+};
+
+export default Findid;
diff --git a/src/component/project/find/findpassword/component.js b/src/component/project/find/findpassword/component.js
diff --git a/src/component/project/find/findpassword/index.js b/src/component/project/find/findpassword/index.js
@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "@emotion/styled";
+import {
+  InnerContainer,
+  Inners,
+  SignTitle,
+  InputContainer,
+  SignButton,
+  SignInput,
+  Cblock,
+  CheckContainer,
+} from "../../../emotion/component";
+import { Link } from "react-router-dom";
+const Findid = () => {
+  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>
+            <SignInput placeholder="아이디를 입력하세요" />
+            <SignInput placeholder="이름을 입력하세요" />
+            <SignInput placeholder="가입시 입력한 휴대폰 번호를 입력하세요" />
+            <SignButton>아이디 찾기</SignButton>
+          </InputContainer>
+        </InnerContainer>
+      </Inners>
+    </>
+  );
+};
+
+export default Findid;
diff --git a/src/component/project/header/component.js b/src/component/project/header/component.js
@@ -1,15 +1,16 @@
-import styled from 'styled-components';
-import searchLogo from '../../../img/header/searchLogo.svg'
-import searchslideLogo from '../../../img/header/searchslideLogo.svg'
+import styled from "styled-components";
+import searchLogo from "../../../img/header/searchLogo.svg";
+import searchslideLogo from "../../../img/header/searchslideLogo.svg";
 
 export const HeaderContainer = styled.header`
   position: relative;
   width: 1920px;
   height: 66px;
-  background-color: #76C56F;
+  background-color: #76c56f;
   display: flex;
   align-items: center;
   margin: 0 auto;
+  margin-bottom: 100px;
 `;
 
 export const Logo = styled.div`
@@ -26,9 +27,9 @@ export const Nav = styled.nav`
 `;
 
 export const NavItem = styled.a`
-  color: #FFF;
+  color: #fff;
   width: 179px;
-  font-feature-settings: 'clig' off, 'liga' off;
+  font-feature-settings: "clig" off, "liga" off;
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -37,17 +38,16 @@ export const NavItem = styled.a`
   text-decoration: none;
 `;
 
-
 export const SearchBar = styled.input.attrs({
-    type: 'text'
-  })`
+  type: "text",
+})`
   width: 333px;
   height: 33px;
   flex-shrink: 0;
   border-radius: 4px;
   border: none;
   margin-left: 80px;
-  padding-left: 30px; 
+  padding-left: 30px;
   padding-right: 30px;
   background-image: url(${searchLogo}), url(${searchslideLogo});
   background-position: 10px center, calc(100% - 10px) center;
@@ -60,7 +60,7 @@ export const LoginButton = styled.div`
   height: 33px;
   flex-shrink: 0;
   border-radius: 55px;
-  border: 1px solid #FFF;
+  border: 1px solid #fff;
   color: white;
   display: flex;
   justify-content: center;
@@ -72,29 +72,29 @@ export const LoginButton = styled.div`
 
 export const DropdownMenu = styled.div`
   position: absolute;
-  top: 66px; 
+  top: 66px;
   width: 1920px;
   left: 0;
   height: 210px;
-  background-color: #76C56F;
-  z-index: 10;  
+  background-color: #76c56f;
+  z-index: 10;
 `;
 
 export const DropNav = styled.nav`
   display: flex;
   justify-content: space-between;
   width: 914px;
-  background-color: #76C56F;
+  background-color: #76c56f;
   margin-left: 254px;
-  `;
+`;
 
 export const DropNavGroup = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 37px;
   width: 179px;
-  background-color: #76C56F;
-  `;
+  background-color: #76c56f;
+`;
 
 export const DropItem = styled.a`
   color: white;

diff --git a/src/component/project/signin/component.js b/src/component/project/signin/component.js
@@ -116,7 +116,7 @@ export const Signcheck = styled.div`
   display: flex;
   margin-left: 50px;
   justify-content: center;
-  p {
+  a {
     margin: 60px 50px; /* 원하는 간격 크기로 설정 */
   }
 `;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/** @jsxImportSource @emotion/react */
		import { css } from "@emotion/react";