Merge : 회원가입 통신 코드

frontend/package.json

@@ -1,6 +1,7 @@
 {
   "name": "frontend",
   "version": "0.1.0",
+  "proxy": "https://api.doit-toeic.xyz",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

frontend/src/apis/BaseUrl.ts

@@ -0,0 +1,3 @@
+import axios from 'axios';
+
+export default axios.create({ baseURL: 'https://api.doit-toeic.xyz' });

frontend/src/apis/FetchRegister.ts

@@ -0,0 +1,19 @@
+import { RegisterData } from '../types/RegisterData';
+import url from './BaseUrl';
+
+export const FetchRegister = async (register: RegisterData) => {
+  const data = { email: register.email, password: register.password };
+
+  const headers = {
+    'Content-Type': 'application/json',
+  };
+
+  try {
+    const res = await url.post('/auth/register', data, { headers });
+    res && alert('회원가입이 완료되었습니다.');
+    return res.data;
+  } catch (error) {
+    alert('회원가입이 실패하였습니다.');
+    throw new Error();
+  }
+};

frontend/src/components/common/SubmitBtn.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { SubmitBtnCSS } from '../../style/components/common/SubmitBtnCSS';
 import { SubmitBtnProps } from '../../types/SubmitBtnProps';
 
-function SubmitBtn({ children, bgColor, color }: SubmitBtnProps) {
-  return <SubmitBtnCSS children={children} bgColor={bgColor} color={color} />;
+function SubmitBtn({ children, bgcolor, color }: SubmitBtnProps) {
+  return <SubmitBtnCSS children={children} bgcolor={bgcolor} color={color} />;
 }
 
 export default SubmitBtn;

frontend/src/components/register/RegisterForm.tsx

@@ -1,57 +1,54 @@
-import { useEffect } from 'react';
 import { RegisterFormCSS } from '../../style/components/register/RegisterFormCSS';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { RegisterData } from '../../types/RegisterData';
-import DoubleCheck from './DoubleCheck';
 import Agreement from './Agreement';
 import SubmitBtn from '../common/SubmitBtn';
+import { FetchRegister } from '../../apis/FetchRegister';
+import { useNavigate } from 'react-router-dom';
 
 function RegisterForm() {
   const {
     register,
     handleSubmit,
     watch,
     formState: { errors },
-    setError,
-    clearErrors,
   } = useForm<RegisterData>();
+  const navigate = useNavigate();
 
-  const onsubmit: SubmitHandler<RegisterData> = (data) => console.log(data);
+  const onsubmit: SubmitHandler<RegisterData> = async (Register) => {
+    await FetchRegister(Register);
+    navigate('/login');
+  };
 
-  useEffect(() => {
-    if (
-      watch('password') !== watch('password_confirm') &&
-      watch('password_confirm')
-    ) {
-      setError('password_confirm', {
-        type: 'password-mismatch',
-        message: '비밀번호가 일치하지 않습니다.',
-      });
-    } else {
-      clearErrors('password_confirm');
-    }
-  }, [watch('password'), watch('password_confirm')]);
+  const passwordRef = watch('password');
 
   return (
     <>
       <RegisterFormCSS onSubmit={handleSubmit(onsubmit)}>
         <fieldset>
           <input
-            placeholder="아이디"
-            {...register('username', { required: true })}
+            placeholder="이메일"
+            {...register('email', {
+              required: true,
+              pattern: {
+                value:
+                  /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,}$/ as RegExp,
+                message: '유효하지 않은 이메일입니다.',
+              },
+            })}
           />
-          <DoubleCheck children={'중복'} />
         </fieldset>
-        {errors.username && <span>잘못된 아이디입니다</span>}
+        {errors.email && <span>유효하지 않은 이메일입니다.</span>}
 
         <fieldset>
           <input
-            placeholder="비밀번호(영문, 숫자, 특수문자 포함 8 ~ 20자)"
+            placeholder="비밀번호(영문, 영문 대문자, 숫자, 특수문자 포함 8 ~ 20자)"
             type="password"
             {...register('password', {
-              required: true,
+              required: '비밀번호를 작성해주세요.',
               pattern: {
-                value: /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,20}$/,
+                value:
+                  /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,20}$/,
                 message: '유효하지 않은 비밀번호 입니다.',
               },
             })}
@@ -64,34 +61,17 @@ function RegisterForm() {
             placeholder="비밀번호 확인"
             type="password"
             {...register('password_confirm', {
-              required: true,
+              required: '비밀번호를 확인해주세요.',
+              validate: (value) =>
+                value === passwordRef || '비밀번호가 일치하지 않습니다.',
             })}
           />
         </fieldset>
-        {(errors.password_confirm?.message && (
+        {errors.password_confirm && (
           <span>{errors.password_confirm.message}</span>
-        )) ||
-          (watch('password') !== watch('password_confirm') &&
-            watch('password_confirm') && (
-              <span>{errors.password_confirm?.message}</span>
-            ))}
-
-        <fieldset>
-          <input
-            placeholder="이메일"
-            {...register('email', { required: true })}
-          />
-          <DoubleCheck children={'인증'} />
-        </fieldset>
-        {errors.email && <span>유효하지 않은 이메일입니다.</span>}
-
-        <fieldset>
-          <input placeholder="인증번호" />
-          <DoubleCheck children={'확인'} />
-        </fieldset>
+        )}
 
         <Agreement />
-
         <fieldset className="radio-filed">
           <label>
             <input
@@ -103,13 +83,13 @@ function RegisterForm() {
           </label>
 
           <label>
-            <input type="radio" name="agree" checked={true} value="false" />
+            <input type="radio" name="agree" defaultChecked value="false" />
             비동의
           </label>
         </fieldset>
         {errors.agree && <span>개인정보 동의서를 읽고 동의해주세요</span>}
 
-        <SubmitBtn children={'회원가입'} bgColor="#7AC3CE" color="#fff" />
+        <SubmitBtn children={'회원가입'} bgcolor="#7AC3CE" color="#fff" />
       </RegisterFormCSS>
     </>
   );

frontend/src/style/components/common/SubmitBtnCSS.ts

@@ -3,14 +3,14 @@ import { SubmitBtnProps } from '../../../types/SubmitBtnProps';
 import { media } from '../../mediaQuery';
 
 export const SubmitBtnCSS = styled.button<SubmitBtnProps>`
-  background: ${(props) => props.bgColor || '#fff'};
+  background: ${(props) => props.bgcolor || '#fff'};
   color: ${(props) => props.color || '#7AC3CE'};
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.35);
   margin-top: 10px;
 
   &:hover {
     background-color: ${(props) => props.color || '#7AC3CE'};
-    color: ${(props) => props.bgColor || '#fff'};
+    color: ${(props) => props.bgcolor || '#fff'};
   }
 
   ${media.smallMobile`

frontend/src/types/RegisterData.ts

@@ -1,5 +1,4 @@
 export type RegisterData = {
-  username: string;
   password: string;
   password_confirm: string;
   email: string;

frontend/src/types/SubmitBtnProps.ts

@@ -2,6 +2,6 @@ import { ReactNode } from 'react';
 
 export type SubmitBtnProps = {
   children: ReactNode;
-  bgColor?: string;
+  bgcolor?: string;
   color?: string;
 };