Merge pull request #60 from Kim-s-Crew/feat/auth

이메일 인증 기능 추가(#10)
Kim-s-Crew · Aug 26, 2024 · 58ed724 · 58ed724
2 parents 1e015c7 + fc32bc0
commit 58ed724
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 26 deletions.
diff --git a/src/apis/auth.ts b/src/apis/auth.ts
@@ -140,3 +140,38 @@ export const updatePassword = async (
     }
   }
 };
+
+//verify user email
+export const verifyUserEmail = async (email: string) => {
+  try {
+    const response = await axios.post(
+      `${process.env.NEXT_PUBLIC_SERVER_URL}/api/auths/send-user-verification-link`,
+      { email },
+    );
+    console.log(response);
+    return response.data;
+  } catch (err: any) {
+    if (err.response && err.response.data && err.response.data.message) {
+      throw new Error(err.response.data.message);
+    }
+  }
+};
+
+//verify recommend email
+export const verifyRecommendEmail = async (
+  email: string,
+  recommendEmail: string,
+) => {
+  try {
+    const response = await axios.post(
+      `${process.env.NEXT_PUBLIC_SERVER_URL}/api/auths/send-recommend-verification-link`,
+      { email, recommendEmail },
+    );
+    console.log(response);
+    return response.data;
+  } catch (err: any) {
+    if (err.response && err.response.data && err.response.data.message) {
+      throw new Error(err.response.data.message);
+    }
+  }
+};
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -97,7 +97,7 @@ const LoginPage = () => {
                 color='danger'
                 isDisabled={!watchEmail || !watchPassword}
               >
-                로그인 test
+                로그인
               </Button>
               <Link href='/register'>
                 <Button>회원가입</Button>

diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
@@ -5,7 +5,12 @@ import nbcIcon from '@/assets/images/spaghetti_logo.png';
 import { Button, Checkbox, Input, Select, SelectItem } from '@nextui-org/react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { useRouter } from 'next/navigation';
-import { registerUser } from '../../apis/auth';
+import {
+  registerUser,
+  verifyRecommendEmail,
+  verifyUserEmail,
+} from '../../apis/auth';
+import Swal from 'sweetalert2';
 
 interface FormValues {
   username: string;
@@ -33,6 +38,7 @@ const RegisterPage = () => {
     handleSubmit,
     watch,
     formState: { errors },
+    getValues,
   } = useForm<FormValues>({ mode: 'onChange' });
 
   const watchName = watch('username');
@@ -119,18 +125,36 @@ const RegisterPage = () => {
             {errors.username.message}
           </p>
         )}
-        <Input
-          aria-label='이메일'
-          type='text'
-          placeholder='email'
-          {...register('email', {
-            required: '이메일을 입력하세요',
-            pattern: {
-              value: /^\S+@\S+$/i,
-              message: '올바른 메일 형식이 아닙니다',
-            },
-          })}
-        />
+        <div className='flex w-full gap-1'>
+          <Input
+            aria-label='이메일'
+            type='text'
+            placeholder='email'
+            {...register('email', {
+              required: '이메일을 입력하세요',
+              pattern: {
+                value: /^\S+@\S+$/i,
+                message: '올바른 메일 형식이 아닙니다',
+              },
+            })}
+          />
+          <Button
+            size='md'
+            color='danger'
+            onClick={async () => {
+              const result = await verifyUserEmail(getValues('email'));
+              console.log(result.message);
+              Swal.fire({
+                icon: 'success',
+                title: '이메일이 발송되었습니다',
+                html: `${result.message}. <br>
+                이메일 인증 완료 후 회원가입을 진행해주세요`,
+              });
+            }}
+          >
+            인증하기
+          </Button>
+        </div>
         {errors.email && (
           <p className='text-red-500 text-xs text-center'>
             {errors.email.message}
@@ -196,18 +220,39 @@ const RegisterPage = () => {
             관리자이신가요?
           </Checkbox>
         </div>
-        <Input
-          aria-label='추천인 메일'
-          type='text'
-          placeholder='추천인 email'
-          {...register('recommend', {
-            // required: '이메일을 입력하세요',
-            pattern: {
-              value: /^\S+@\S+$/i,
-              message: '올바른 메일 형식이 아닙니다',
-            },
-          })}
-        />
+        <div className='flex w-full gap-1'>
+          <Input
+            aria-label='추천인 메일'
+            type='text'
+            placeholder='추천인 email'
+            {...register('recommend', {
+              // required: '이메일을 입력하세요',
+              pattern: {
+                value: /^\S+@\S+$/i,
+                message: '올바른 메일 형식이 아닙니다',
+              },
+            })}
+          />
+          <Button
+            size='md'
+            color='danger'
+            onClick={async () => {
+              const result = await verifyRecommendEmail(
+                getValues('email'),
+                getValues('recommend'),
+              );
+              console.log(result);
+              Swal.fire({
+                icon: 'success',
+                title: '이메일이 발송되었습니다',
+                html: `${result.message}. <br>
+                  추천인이 이메일 인증 후 회원가입 버튼을 누르세요.`,
+              });
+            }}
+          >
+            인증하기
+          </Button>
+        </div>
         {errors.recommend && (
           <p className='text-red-500 text-xs text-center'>
             {errors.recommend.message}