✨ Feature: SignUpForm markUp(#14)

components/SignUpAndSignInModal/SignUpForm/index.tsx

@@ -0,0 +1,80 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { CLIENT_ERROR } from '../../../apis/constants';
+
+import * as S from '../styles';
+import { Props } from './types';
+
+const SignUpForm = ({ email }: Props) => {
+  const verifySignUpData = yup.object().shape({
+    password: yup
+      .string()
+      .required('비밀번호를 입력해 주세요.')
+      .min(8, '8자 이상이어야 합니다.')
+      .max(30, '30자 이하여야 합니다.')
+      .matches(/[0-9]{1,}/, { message: '숫자는 1개 이상이어야 합니다.' })
+      .matches(/[a-z || A-Z]{1,}/, { message: '영어는 1개 이상이어야 합니다.' })
+      .matches(/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/, {
+        message: '특수문자는 1개 이상이어야 합니다.',
+      }),
+    passwordConfirm: yup
+      .string()
+      .required('비밀번호를 확인해주세요')
+      .oneOf([yup.ref('password')], '비밀번호가 일치하지 않습니다.'),
+    studentId: yup
+      .string()
+      .required('학번을 입력해주세요.')
+      .matches(/^[0-9]+$/g, { message: '숫자만 입력해주세요.' }),
+    name: yup
+      .string()
+      .required('이름을 입력해주세요.')
+      .matches(/^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]+$/, { message: '한글만 입력해주세요' }),
+    nickname: yup.string().required('닉네임을 입력해주세요.'),
+  });
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(verifySignUpData),
+  });
+
+  const onSubmit: SubmitHandler<FieldValues> = async ({ password, studentId, name, nickname }) => {
+    console.log(password, studentId, name, nickname);
+  };
+
+  return (
+    <S.Form onSubmit={handleSubmit(onSubmit)}>
+      <S.Title>회원 가입</S.Title>
+      <S.Label htmlFor="password">비밀 번호</S.Label>
+      <S.Input
+        id="password"
+        placeholder="비밀번호를 입력해 주세요"
+        type="password"
+        {...register('password')}
+      />
+      {errors.password && <S.ErrorMsg>{errors.password.message}</S.ErrorMsg>}
+      <S.Label htmlFor="passwordConfirm">비밀 번호 확인</S.Label>
+      <S.Input
+        id="passwordConfirm"
+        placeholder="비밀번호 확인"
+        type="password"
+        {...register('passwordConfirm')}
+      />
+      {errors.passwordConfirm && <S.ErrorMsg>{errors.passwordConfirm.message}</S.ErrorMsg>}
+      <S.Label htmlFor="studentId">학번</S.Label>
+      <S.Input id="studentId" placeholder="학번을 입력해 주세요" {...register('studentId')} />
+      {errors.studentId && <S.ErrorMsg>{errors.studentId.message}</S.ErrorMsg>}
+      <S.Label htmlFor="name">이름</S.Label>
+      <S.Input id="name" placeholder="이름을 입력해 주세요" {...register('name')} />
+      {errors.name && <S.ErrorMsg>{errors.name.message}</S.ErrorMsg>}
+      <S.Label htmlFor="nickname">닉네임</S.Label>
+      <S.Input id="nickname" placeholder="닉네임을 입력해 주세요" {...register('nickname')} />
+      {errors.nickname && <S.ErrorMsg>{errors.nickname.message}</S.ErrorMsg>}
+      <S.SubmitBtn>회원가입 하기</S.SubmitBtn>
+    </S.Form>
+  );
+};
+export default SignUpForm;

components/SignUpAndSignInModal/SignUpForm/types.ts

@@ -0,0 +1,3 @@
+export interface Props {
+  email: string;
+}

components/SignUpAndSignInModal/VerifyIsMemberModal/types.ts

@@ -2,4 +2,5 @@ import { Dispatch, SetStateAction } from 'react';
 
 export interface Props {
   setStep: Dispatch<SetStateAction<number>>;
+  setEmail: Dispatch<SetStateAction<string>>;
 }

components/SignUpAndSignInModal/index.tsx

@@ -1,46 +1,25 @@
-import { FormEvent, useState } from 'react';
-import Modal from '../Modal';
+import { useState } from 'react';
 import { Props } from './types';
 import * as S from './styles';
-import VerifyIsMember from './VerifyIsMember';
+import VerifyIsMemberModal from './VerifyIsMemberModal';
+import SignUpForm from './SignUpForm';
+import SignInForm from './SignInForm';
 
 const SignUpAndSignInModal = ({ setIsModalOpen }: Props) => {
   const [step, setStep] = useState(0);
+  const [email, setEmail] = useState('');
 
   const handleCloseBtn = () => {
     setIsModalOpen(false);
   };
 
   return (
-    <Modal setIsModalOpen={setIsModalOpen}>
+    <S.CuModal setIsModalOpen={setIsModalOpen}>
       <S.CloseBtn onClick={handleCloseBtn}>x</S.CloseBtn>
-      {step === 0 && <VerifyIsMember />}
-      {/* <form>
-        <label htmlFor="email" />
-        <input id="email" placeholder="이메일을 입력해주세요" />
-
-        <label htmlFor="studentId" />
-        <input id="studentId" placeholder="학번을 입력해주세요" />
-
-        <label htmlFor="name" />
-        <input id="name" placeholder="이름을 입력해주세요" />
-
-        <label htmlFor="password" />
-        <input id="password" placeholder="비밀번호를 입력해주세요" />
-
-        <label htmlFor="pwdConfirm" />
-        <input id="pwdConfirm" placeholder="비밀번호 확인" />
-
-        <label htmlFor="nickname" />
-        <input id="nickname" placeholder="닉네임을 입력해주세요" />
-
-        <label htmlFor="pwdConfirm" />
-        <input id="pwdConfirm" placeholder="비밀번호 확인" />
-
-        <label htmlFor="pwdConfirm" />
-        <input id="pwdConfirm" placeholder="비밀번호 확인" type="file" />
-      </form> */}
-    </Modal>
+      {step === 0 && <VerifyIsMemberModal setStep={setStep} setEmail={setEmail} />}
+      {step === 1 && <SignInForm email={email} />}
+      {step === 2 && <SignUpForm email={email} />}
+    </S.CuModal>
   );
 };
 export default SignUpAndSignInModal;