페이지 기능: 회원가입 페이지 쿼리훅 제작

src/app/signup/page.tsx

@@ -1,10 +1,9 @@
-/* eslint-disable max-len */
+/* eslint-disable @typescript-eslint/no-misused-promises */
 
 'use client';
 
 import { useForm } from 'react-hook-form';
 
-// import VALIDATION_MESSAGE_MAP from '@constants/validationMessage';
 import classNames from 'classnames/bind';
 
 import Button from '@components/shared/button/Button';
@@ -15,47 +14,39 @@ import Spacing from '@components/shared/spacing/Spacing';
 import Text from '@components/shared/text/Text';
 import TextField from '@components/shared/text-field/TextField';
 import Title from '@components/shared/title/Title';
+import VALIDATION_MESSAGE_MAP from '@constants/validationMessage';
+import { ISignUp } from '@remote/api/types/auth';
+import useSignup from '@remote/queries/auth/useSignup';
 
 import styles from './page.module.scss';
 
 const cx = classNames.bind(styles);
 
-const VALIDATION_MESSAGE_MAP: {
-  [key: string]: {
-    value?: RegExp,
-    message: string
-  }
-} = {
-  id: {
-    value: /^(?=.*[a-z])(?=.*\d)[a-z\d]{8,}$/,
-    message: '영문 소문자, 숫자 조합 8자 이상 입력해주세요',
-  },
-  email: {
-    value: /^[_a-zA-Z0-9-.]+@[.a-zA-Z0-9-]+\.[a-zA-Z]+$/,
-    message: '이메일 형식을 확인해주세요',
-  },
-  password: {
-    value: /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/,
-    message: '8~16자의 영문 대/소문자, 숫자, 특수문자를 사용해 주세요.',
-  },
-  confirmingPassword: {
-    message: '비밀번호를 확인해주세요.',
-  },
-};
+type SignUpFormType = {
+  confirmPassword: string
+} & ISignUp;
 
 function SignupPage() {
   const {
-    register, handleSubmit, formState: { errors }, watch,
-  } = useForm({
+    register, handleSubmit, formState: { errors, isValid }, watch,
+  } = useForm<SignUpFormType>({
     mode: 'onBlur',
   });
 
-  const onSubmit = () => {
-    // console.log(data);
+  const { mutate } = useSignup();
+
+  const onSubmit = (data: SignUpFormType) => {
+    const {
+      id, password, email, gender, age,
+    } = data;
+    mutate({
+      id, password, email, gender, age,
+    });
   };
 
+  // TODO: 아이디 textfield onBlur 시 중복된 아이디 검사
+
   return (
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     <form onSubmit={handleSubmit(onSubmit)}>
       <Header displayLogo={false} />
       <Spacing size={20} />
@@ -88,17 +79,17 @@ function SignupPage() {
         required
         placeholder="비밀번호 확인"
         isPasswordType
-        {...register('confirmingPassword', {
+        {...register('confirmPassword', {
           required: true,
-          // eslint-disable-next-line consistent-return
-          validate: (confirmingPassword: string) => {
-            if (watch('password') !== confirmingPassword) {
+          validate: (confirmPassword: string) => {
+            if (watch('password') !== confirmPassword) {
               return false;
             }
+            return true;
           },
         })}
-        hasError={!!errors.confirmingPassword}
-        helpMessage={VALIDATION_MESSAGE_MAP.confirmingPassword.message}
+        hasError={!!errors.confirmPassword}
+        helpMessage={VALIDATION_MESSAGE_MAP.confirmPassword.message}
       />
       <TextField
         label="이메일"
@@ -128,7 +119,7 @@ function SignupPage() {
         <Radio type="ageGroup" label="60대 이상" value="60" {...register('age')} />
       </div>
       <Spacing size={50} />
-      <Button type="submit" size="medium" full>약관 동의하러 가기</Button>
+      <Button type="submit" disabled={!isValid} size="medium" full>약관 동의하러 가기</Button>
       <Spacing size={20} />
     </form>
   );

src/constants/validationMessage.ts

@@ -13,12 +13,12 @@ const VALIDATION_MESSAGE_MAP: {
     message: '이메일 형식을 확인해주세요',
   },
   password: {
-    value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]{8,}$/,
+    value: /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/,
     message: '8~16자의 영문 대/소문자, 숫자, 특수문자를 사용해 주세요.',
   },
-  confirmingPassword: {
+  confirmPassword: {
     message: '비밀번호를 확인해주세요.',
   },
-};
+} as const;
 
 export default VALIDATION_MESSAGE_MAP;

src/mocks/authHandler/index.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { http, HttpResponse } from 'msw';
+
+export const authHandlers = [
+  /* ----- 회원가입 api ----- */
+  http.post(`${process.env.NEXT_PUBLIC_BASE_URL}/member/join`, () => {
+    return HttpResponse.json('회원가입 성공!!');
+  }),
+];

src/mocks/handlers.ts

@@ -1,8 +1,5 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { http, HttpResponse } from 'msw';
+import { authHandlers } from './authHandler';
 
 export const handlers = [
-  http.get('http://localhost:3030/test', () => {
-    return HttpResponse.json(['사과', '배']);
-  }),
+  ...authHandlers,
 ];

src/remote/api/instance.api.ts

@@ -2,6 +2,7 @@ import axios, { Axios } from 'axios';
 
 export const axiosInstance: Axios = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+  withCredentials: true,
   headers: {
     'Content-Type': 'application/json',
     Accept: '*/*',

src/remote/api/requests/auth/auth.post.api.ts

@@ -0,0 +1,12 @@
+import { ISignUp } from '../../types/auth';
+import { postRequest } from '../requests.api';
+
+export const signup = async ({
+  id, password, email, gender, age,
+}: ISignUp) => {
+  const response = postRequest<null, ISignUp>('/member/join', {
+    id, password, email, gender, age,
+  });
+
+  return response;
+};

src/remote/api/types/auth.ts

@@ -0,0 +1,10 @@
+export interface ISignIn {
+  id: string
+  password: string
+}
+
+export interface ISignUp extends ISignIn {
+  email: string
+  gender: string | null
+  age: string | null
+}

src/remote/queries/auth/useSignup.ts

@@ -0,0 +1,9 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { signup } from '@remote/api/requests/auth/auth.post.api';
+
+function useSignup() {
+  return useMutation({ mutationFn: signup });
+}
+
+export default useSignup;

tsconfig.json

@@ -71,6 +71,9 @@
       ],
       "@mocks/*": [
         "src/mocks/*"
+      ],
+      "@types/*": [
+        "src/types/*"
       ]
     }
   },