Merge pull request #22 from Sopo2023/origin/feat/main/#12

Origin/feat/main/#12

package.json

@@ -9,7 +9,7 @@
     "@types/jest": "^27.0.1",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.0.0",
     "axios": "^1.7.2",
     "concurrently": "^8.2.2",
@@ -19,13 +19,15 @@
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "react-query": "^3.39.3",
+    "react-query-devtools": "^2.6.3",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
     "styled-components": "^6.1.11",
     "styled-reset": "^4.5.2",
     "sweetalert2": "^11.11.1",
+    "swiper": "^11.1.8",
     "typescript": "^4.4.2",
     "unified": "^11.0.5",
     "unist-util-position": "^5.0.0",
@@ -53,6 +55,7 @@
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "devDependencies": {
-    "@types/react-syntax-highlighter": "^15.5.13"
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/swiper": "^6.0.0"
   }
 }

src/components/auth/Login/index.tsx

@@ -23,8 +23,8 @@ const LoginComponent = ({ setIsLogin }: Props) => {
               아이디 <p>*</p>
             </span>
             <TextField
-              name="id"
-              value={auth.LoginData.id}
+              name="memberId"
+              value={auth.LoginData.memberId}
               type="text"
               onChange={auth.handleSignUpData}
               placeholder="아이디를 입력해주세요"
@@ -37,8 +37,8 @@ const LoginComponent = ({ setIsLogin }: Props) => {
               비밀번호 <p>*</p>
             </span>
             <TextField
-              name="password"
-              value={auth.LoginData.password}
+              name="memberPassword"
+              value={auth.LoginData.memberPassword}
               type={"password"}
               onChange={auth.handleSignUpData}
               placeholder="비밀번호를 입력해주세요"

src/components/auth/Signup/index.tsx

@@ -13,17 +13,22 @@ const Signup = ({ setIsLogin }: Props) => {
 
   const signupComponents: ReactNode[] = [
     <SignupFirst
-      signupData={sign.signUpData}
-      handleSignupData={sign.handleSigUpData}
+      signupData={sign.signupData}
+      handleSignupData={sign.handleSignupData}
       submitSignupDataFirst={sign.submitSignupDataFirst}
       keydownButton={sign.firstHandleKeyDown}
+      key="signupFirst"
     />,
     <SignupSecond
       setSection={sign.setSection}
-      signupData={sign.signUpData}
-      handleSignupData={sign.handleSigUpData}
+      signupData={sign.signupData}
+      handleSignupData={sign.handleSignupData}
       submitSignupDataSecond={sign.submitSignupDataSecond}
-      keydownButton={sign.firstHandleKeyDown}
+      keydownButton={sign.secondHandleKeyDown}
+      emailKeydownButton={sign.emailKeydownButton}
+      chckEmailAuthCode={sign.checkEmailAuthCode}
+      isWaiting={sign.isWaiting}
+      key="signupSecond"
     />,
   ];
 

src/components/auth/Signup/signupFirst/index.tsx

@@ -27,8 +27,8 @@ const SignupFirst = ({
             아이디<p>*</p>
           </span>
           <TextField
-            name="id"
-            value={signupData.id}
+            name="memberId"
+            value={signupData.memberId}
             type="text"
             onChange={handleSignupData}
             placeholder="아이디를 입력해주세요"
@@ -41,8 +41,8 @@ const SignupFirst = ({
             비밀번호<p>*</p>
           </span>
           <TextField
-            name="password"
-            value={signupData.password}
+            name="memberPassword"
+            value={signupData.memberPassword}
             type={"password"}
             onChange={handleSignupData}
             placeholder="비밀번호를 입력해주세요"
@@ -55,8 +55,8 @@ const SignupFirst = ({
             비밀번호 확인<p>*</p>
           </span>
           <TextField
-            name="checkPasswrod"
-            value={signupData.checkPasswrod}
+            name="memberChckPassword"
+            value={signupData.memberChckPassword}
             type={"password"}
             onChange={handleSignupData}
             placeholder="비밀번호을 입력해주세요"

src/components/auth/Signup/signupSecond/index.tsx

@@ -1,38 +1,47 @@
-import React,{ Dispatch, SetStateAction} from "react";
+import React, { Dispatch, SetStateAction, useState } from "react";
 import * as S from "./style";
 import TextField from "src/components/textFields";
 import { Sign } from "src/types/auth/signup.type";
 import Button from "src/components/button/index";
 import arrowLeft from "src/assets/imgs/Signimg/arrow-left.svg";
 
-
 interface Props {
-    setSection: Dispatch<SetStateAction<string>>;
-    signupData: Sign;
-    handleSignupData: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    submitSignupDataSecond: () => void;
-    keydownButton: (e: React.KeyboardEvent) => void;
-  }
+  setSection: Dispatch<SetStateAction<string>>;
+  signupData: Sign;
+  handleSignupData: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => void;
+  emailKeydownButton: (e: React.KeyboardEvent) => void;
+  submitSignupDataSecond: () => void;
+  keydownButton: (e: React.KeyboardEvent) => void;
+  chckEmailAuthCode: () => void;
+  isWaiting: string;
+}
 
-const SignupSecond = ({ setSection,signupData,
-    handleSignupData,
-    keydownButton,
-    submitSignupDataSecond,
-    }:Props) => {
+const SignupSecond = ({
+  setSection,
+  signupData,
+  handleSignupData,
+  keydownButton,
+  submitSignupDataSecond,
+  chckEmailAuthCode,
+  emailKeydownButton,
+  isWaiting,
+}: Props) => {
   return (
     <>
       <S.InputContainer>
-        <S.SignBack onClick={()=>setSection("first")}>
-            <img src={arrowLeft} alt="돌아가라 어리석은것" />
-            <span>돌아가기</span>
+        <S.SignBack onClick={() => setSection("first")}>
+          <img src={arrowLeft} alt="돌아가라 어리석은것" />
+          <span>돌아가기</span>
         </S.SignBack>
         <S.InputText>
           <span>
             이름<p>*</p>
           </span>
           <TextField
-            name="name"
-            value={signupData.name}
+            name="memberName"
+            value={signupData.memberName}
             type="text"
             onChange={handleSignupData}
             placeholder="이름을 입력해주세요"
@@ -42,34 +51,76 @@ const SignupSecond = ({ setSection,signupData,
         </S.InputText>
         <S.InputText>
           <span>
-            이메일<p>*</p>
+            학교<p>*</p>
           </span>
-          <TextField
-            name="email"
-            value={signupData.email}
-            type="text"
+          <S.selectButton
+            name="memberSchool"
+            value={signupData.memberSchool}
             onChange={handleSignupData}
-            placeholder="이메일을 입력해주세요"
-            onKeyDown={keydownButton}
-            style={{}}
-          />
+          >
+            <option value="" selected >학교를 선택해주세요</option>
+            <option value="대구소프트웨어마이스터고">
+              대구소프트웨어마이스터고
+            </option>
+            <option value="부산소프트웨어마이스터고">
+              부산소프트웨어마이스터고
+            </option>
+            <option value="광주소프트웨어마이스터고">
+              광주소프트웨어마이스터고
+            </option>
+            <option value="대덕소프트웨어마이스터고">
+              대덕소프트웨어마이스터고
+            </option>
+            <option value="기타" >
+              기타
+            </option>
+          </S.selectButton>
         </S.InputText>
         <S.InputText>
           <span>
-            이메일 인증번호<p>*</p>
+            이메일<p>*</p>
           </span>
+          <S.emailTextField>
+            <TextField
+              name="memberEmail"
+              value={signupData.memberEmail}
+              type="text"
+              onChange={handleSignupData}
+              placeholder="이메일을 입력해주세요"
+              onKeyDown={emailKeydownButton}
+              style={{ width: "70%" }}
+            />
+            <S.emailNumberButton onClick={chckEmailAuthCode}>
+              <span>인증하기</span>
+            </S.emailNumberButton>
+          </S.emailTextField>
+        </S.InputText>
+        <S.InputText>
+          <S.emailPostField>
+            <span>
+              {" "}
+              이메일 인증번호<p>*</p>
+            </span>
+            <p>
+            {isWaiting === "전송중"
+              ? "이메일 전송중.."
+              : isWaiting === "전송성공"
+              ? "이메일 전송성공"
+              : ""}
+              </p>
+          </S.emailPostField>
           <TextField
-            name="email"
-            value={signupData.checkNumber}
-            type="password"
+            name="authCode"
+            value={signupData.authCode}
+            type="text"
             onChange={handleSignupData}
-            placeholder="이메일을 입력해주세요"
+            placeholder="인증번호를 입력해주세요"
             onKeyDown={keydownButton}
             style={{}}
           />
         </S.InputText>
       </S.InputContainer>
-      <Button text="회원가입" style={{}} onClick={submitSignupDataSecond}/>
+      <Button text="회원가입" style={{}} onClick={submitSignupDataSecond} />
     </>
   );
 };

src/components/auth/Signup/signupSecond/style.ts

@@ -1,12 +1,13 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+import ExpandDown from "src/assets/imgs/Signimg/Expand_down.svg";
 import color from "src/styles/color";
 
 export const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 350px;
-  gap: 16px;
+  height: 420px;
+  gap: 12px;
 `;
 export const InputText = styled.div`
   display: flex;
@@ -42,10 +43,84 @@ export const SignBack = styled.div`
     height: 25px;
   }
   span {
-    font-family: Pretendard;
+    display: flex;
+    justify-content: space-between;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
-    line-height: 130%; 
+    line-height: 130%;
+  }
+`;
+
+export const selectButton = styled.select`
+  height: 48px;
+  border-radius: 12px;
+  border: 1px solid ${color.Label.Disable};
+  outline: none;
+  padding: 0 40px 0 10px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: url(${ExpandDown}) no-repeat right 10px center;
+  background-size: 24px 24px;
+  color: ${color.Label.Disable};
+
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+`;
+
+export const CertificationNumber = styled.div`
+  width: 120px;
+  height: 20px;
+  display: inline-block;
+  color: ${color.Primary.Light};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  cursor: pointer;
+`;
+
+export const emailNumberButton = styled.div`
+  display: flex;
+  width: 100px;
+  height: 50px;
+  background: ${color.Primary.Light};
+  border-radius: 12px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  span {
+    color: #fff;
+  }
+`;
+
+export const emailTextField = styled.div`
+  display: flex;
+  width: 100%;
+  height: 48px;
+  justify-content: space-between;
+`;
+export const emailPostField = styled.div`
+  display: flex;
+  justify-content: space-between;
+  color: ${color.Label.Strong};
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  span {
+    
+    p {
+      display: inline-block;
+      color: ${color.Status.Destructive};
+    }
+  }
+  p{
+    color: ${color.Primary.Light};
   }
 `;

src/components/auth/Signup/style.ts

@@ -57,7 +57,7 @@ export const buttonBox = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 30px;
+  height: 20px;
   align-items: center;
   span {
     color: ${color.Label.Disable};