feat-fe: 이메일 인증 훅 구현

frontend/src/api/domain/email.ts

@@ -20,6 +20,18 @@ const emailApis = {
       body: { clubId, applicantIds, subject, content },
       isFormData: true,
     }),
+
+  postVerifyMail: async ({ email }: { email: string }) =>
+    apiClient.post({
+      path: '/verification-code',
+      body: { email },
+    }),
+
+  confirmVerifyCode: async ({ email, verificationCode }: { email: string; verificationCode: string }) =>
+    apiClient.post({
+      path: '/verify-code',
+      body: { email, verificationCode },
+    }),
 };
 
 export default emailApis;

frontend/src/hooks/useEmail/index.tsx

@@ -4,6 +4,7 @@ import { useMutation } from '@tanstack/react-query';
 
 export default function useEmail() {
   const { success } = useToast();
+
   return useMutation({
     mutationFn: (prop: { clubId: string; applicantIds: number[]; subject: string; content: string }) =>
       emailApis.send(prop),

frontend/src/hooks/useEmailVerify/index.tsx

@@ -0,0 +1,23 @@
+import emailApis from '@api/domain/email';
+import { useToast } from '@contexts/ToastContext';
+import { useMutation } from '@tanstack/react-query';
+
+export default function useEmailVerify() {
+  const { success } = useToast();
+
+  const { mutate: postVerifyEmailMutate } = useMutation({
+    mutationFn: (prop: { email: string }) => emailApis.postVerifyMail(prop),
+    onSuccess: () => {
+      success('메일 전송에 성공했습니다!');
+    },
+  });
+
+  const { mutate: confirmEmailVerifyMutate } = useMutation({
+    mutationFn: (prop: { email: string; verificationCode: string }) => emailApis.confirmVerifyCode(prop),
+    onSuccess: () => {
+      success('이메일 인증에 성공했습니다!');
+    },
+  });
+
+  return { postVerifyEmailMutate, confirmEmailVerifyMutate };
+}

frontend/src/mocks/handlers/emailHandler.ts

@@ -19,6 +19,40 @@ const emailHandlers = [
       status: 200,
     });
   }),
+
+  http.post(`${EMAILS}/verification-code`, async ({ request }) => {
+    const { email } = (await request.json()) as { email: string };
+
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    if (!email) {
+      return new Response(null, {
+        status: 400,
+        statusText: 'malformed request body syntax',
+      });
+    }
+
+    return new Response(null, {
+      status: 200,
+    });
+  }),
+
+  http.post(`${EMAILS}/verify-code`, async ({ request }) => {
+    const { email, verificationCode } = (await request.json()) as { email: string; verificationCode: string };
+
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    if (!email || !verificationCode) {
+      return new Response(null, {
+        status: 400,
+        statusText: 'malformed request body syntax',
+      });
+    }
+
+    return new Response(null, {
+      status: 200,
+    });
+  }),
 ];
 
 export default emailHandlers;