Merge pull request #52 from Dear-project/Refactor/#47-Classification

Refactor/#47 classification
Dear-project · Oct 15, 2024 · 891c2be · 891c2be
2 parents baca357 + 589b5e3
commit 891c2be
Show file tree

Hide file tree

Showing 11 changed files with 249 additions and 71 deletions.
diff --git a/src/app/signup/classification/page.tsx b/src/app/signup/classification/page.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Classification from "@/components/auth/signup/classification";
+
+const Page = () => {
+  return (
+    <Classification/>
+  );
+};
+
+export default Page;
diff --git a/src/components/auth/signup/Email/index.tsx b/src/components/auth/signup/Email/index.tsx
@@ -2,8 +2,8 @@
 
 import React from "react";
 import * as S from "./style";
-import TextField from "src/components/common/textField";
-import useEmail from "src/hooks/auth/signup/useEmail";
+import TextField from "@/components/common/textField";
+import useEmail from "@/hooks/auth/signup/useEmail";
 
 const SignUpEmail = () => {
   const { ...hooks } = useEmail();
@@ -42,9 +42,9 @@ const SignUpEmail = () => {
               </TextField>
               {hooks.resend === true && (
                 <>
-                  <span>{hooks.formmatedTime}</span>
+                  <span style={{ position: "absolute", left: "75%", top: "54%" }}>{hooks.formattedTime}</span>
                   <span
-                    style={{ position: "absolute", left: "53%", top: "55%", cursor: "pointer" }}
+                    style={{ position: "absolute", left: "90%", top: "54%", cursor: "pointer" }}
                     onClick={hooks.onAuthCode}
                   >
                     재 전송
@@ -54,7 +54,7 @@ const SignUpEmail = () => {
             </S.retryVerify>
           </S.VerifyWrap>
           <S.ButtonWrap>
-            <S.BackButton onClick={()=>window.history.back()}>이전</S.BackButton>
+            <S.BackButton onClick={() => window.history.back()}>이전</S.BackButton>
             <S.NextButton onClick={hooks.onCheckAuthCode}>이메일 인증하기</S.NextButton>
           </S.ButtonWrap>
         </S.SignUpEmailWrap>

diff --git a/src/components/auth/signup/Email/style.ts b/src/components/auth/signup/Email/style.ts
@@ -21,9 +21,9 @@ export const SignUpEmailWrap = styled.div`
   align-items: center;
   @media screen and (min-width: 48em) {
     .login-container {
-        padding: 48px;
-    }
+      padding: 48px;
     }
+  }
   padding: 30px;
   border-radius: var(--Large, 12px);
   background: var(--White, #fff);
@@ -38,26 +38,26 @@ export const DearLogo = styled.h1`
   font-weight: 800;
 `;
 
-export const SignBox = styled.div`
-
-`
+export const SignBox = styled.div``;
 export const VerifyWrap = styled.div`
- display: flex;
-flex-direction: column;
-align-items: center;
-gap: 30px;
-padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+  padding: 10px;
 `;
 
 export const Verify = styled.div`
   display: flex;
   width: 485px;
-  
 `;
 export const retryVerify = styled.div`
-width: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
 
-`
+  position: relative;
+`;
 
 export const Span = styled.span`
   font-family: Assistant;
@@ -95,13 +95,14 @@ export const EmailVerifyWrap = styled.div`
 `;
 
 export const VerifyButton = styled.button`
-  width: 180px;
+  width: 160px;
   height: 45px;
 
   display: flex;
   align-items: center;
   align-self: center;
   justify-content: center;
+  z-index: 1;
 
   gap: 10px;
 

diff --git a/src/components/auth/signup/Info/index.tsx b/src/components/auth/signup/Info/index.tsx
@@ -19,40 +19,25 @@ const SignupInfo = () => {
             type="text"
             functions="text"
             value={hooks.infoData.name}
-            onchange={hooks.hanldeDataChnage}
+            onchange={hooks.hanldeDataChange}
             labelStyle={{ top: "41%" }}
           >
             이름
           </TextField>
-
-            <TextField
-              id="text"
-              name="birthday"
-              type="text"
-              functions="text"
-              labelStyle={{ top: "52%" }}
-              value={hooks.infoData.birthday}
-              onchange={hooks.hanldeDataChnage}
-            >
-              생년월일
-            </TextField>
-
-
-            <TextField
-              id="text"
-              name="type"
-              type="text"
-              functions="text"
-              value={hooks.infoData.type}
-              onchange={hooks.hanldeDataChnage}
-              labelStyle={{ top: "63%" }}
-            >
-              분류
-            </TextField>
-
+          <TextField
+            id="date"
+            name="birthday"
+            type="date"
+            functions="date"
+            labelStyle={{ top: "52%" }}
+            value={hooks.infoData.birthday}
+            onchange={hooks.hanldeDataChange}
+          >
+            생년월일
+          </TextField>
         </S.VerifyWrap>
         <S.ButtonWrap>
-          <S.BackButton onClick={()=>window.history.back()}>이전</S.BackButton>
+          <S.BackButton onClick={() => window.history.back()}>이전</S.BackButton>
           <S.NextButton onClick={hooks.onSignup}>완료</S.NextButton>
         </S.ButtonWrap>
       </S.SignUpInfolWrap>

diff --git a/src/components/auth/signup/classification/index.tsx b/src/components/auth/signup/classification/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import * as S from "./style";
+import TextField from "src/components/common/textField";
+import useInfo from "@/hooks/auth/signup/useInfo";
+
+const Classification = () => {
+  const { ...hooks } = useInfo();
+
+  return (
+    <S.Main>
+      <S.SignUpInfolWrap>
+        <S.DearLogo>DEAR.</S.DearLogo>
+        <S.VerifyWrap> 
+
+        </S.VerifyWrap>
+        <S.ButtonWrap>
+          <S.BackButton onClick={()=>window.history.back()}>이전</S.BackButton>
+          <S.NextButton onClick={hooks.onSignup}>완료</S.NextButton>
+        </S.ButtonWrap>
+      </S.SignUpInfolWrap>
+    </S.Main>
+  );
+};
+
+export default Classification;
diff --git a/src/components/auth/signup/classification/style.ts b/src/components/auth/signup/classification/style.ts
@@ -0,0 +1,146 @@
+import styled from "styled-components";
+
+export const Main = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background: var(--Gray100, #f4f5f9);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+`;
+
+export const SignUpInfolWrap = styled.div`
+  min-width: 400px;
+  min-height: 500px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding: 30px;
+  border-radius: var(--Large, 12px);
+  background: var(--White, #fff);
+  box-shadow: 4px 4px 8px 0px var(--Gray300, #e6e6e6);
+`;
+
+export const DearLogo = styled.h1`
+  color: var(--Black, #000);
+  font-family: Assistant;
+  font-size: 4rem;
+  font-style: normal;
+  font-weight: 800;
+`;
+
+export const VerifyWrap = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  justify-content: center;
+  align-items: center;
+
+  gap: 60px;
+`;
+
+export const Input = styled.input`
+  width: 340px;
+  height: 50px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-bottom: 1px solid #d1d1d1;
+
+  color: var(--Gray500, #000);
+  font-family: Akshar;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+
+  margin-bottom: 2wvh;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const VerifyButton = styled.button`
+  width: 180px;
+  height: 45px;
+
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+
+  gap: 10px;
+
+  border-radius: 10px;
+  background: var(--primary-400, #1d2d44);
+  color: #fff;
+
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const ButtonWrap = styled.div`
+  width: 485px;
+  height: 45px;
+
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+
+  gap: 10px;
+`;
+
+export const BackButton = styled.button`
+  display: flex;
+  width: 85px;
+  height: 50px;
+  padding: 11px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 10px;
+  background: var(--Primary800, #ebefff);
+
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const NextButton = styled.button`
+  display: flex;
+  width: 240px;
+  height: 50px;
+  padding: var(--Large, 12px) 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 10px;
+  background: var(--primary-400, #1d2d44);
+  color: #fff;
+
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    background: var(--Primary800, #ebefff);
+  }
+`;
diff --git a/src/components/common/textField/index.tsx b/src/components/common/textField/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import * as S from "./style";
 import { useRecoilState } from "recoil";
 import { ErrorStateAtom } from "src/store/common/common.store";
+import { CSSObject } from "styled-components";
 
 interface TextFieldProps {
   id: string;
@@ -14,7 +15,7 @@ interface TextFieldProps {
   labelStyle?: React.CSSProperties;
 }
 
-const TextField = ({ id, name, type, value, children, onchange, functions, labelStyle }:TextFieldProps) => {
+const TextField = ({ id, name, type, value, children, onchange, functions, labelStyle }: TextFieldProps) => {
   const [errorState] = useRecoilState<Record<string, string>>(ErrorStateAtom);
   const error = errorState[id as keyof typeof errorState];
   return (
@@ -38,7 +39,7 @@ const TextField = ({ id, name, type, value, children, onchange, functions, label
             }
           }}
         />
-        <label style={labelStyle}>{children}</label>
+        <label style={type === "date" ? S.DateLabelStyle : labelStyle}>{children}</label>
       </S.TextField>
       {typeof error === "string" && (
         <S.ErrorText style={{ color: "#ED3B3B", fontSize: "12px" }}>

diff --git a/src/components/common/textField/style.ts b/src/components/common/textField/style.ts
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { CSSObject } from "styled-components";
 
 export const TextField = styled.div`
   width: 100%;
@@ -37,7 +37,7 @@ export const TextFieldInput = styled.input`
   font-style: normal;
   font-weight: 200;
   border: none;
-  
+
   outline: none;
   padding-left: 3%;
 
@@ -71,3 +71,11 @@ export const ErrorText = styled.span`
   margin-left: 75px;
   margin-top: -30px;
 `;
+
+export const DateLabelStyle: CSSObject = {
+  position: "absolute",
+  top: "50%",
+  left: "2%",
+  transform: "translateY(-250%)",
+  fontSize: "1rem",
+};