feat: 회원가입 기능 구현

Author: CreatorDodo

src/apis/authApis.ts

@@ -4,6 +4,18 @@ interface SignInParams {
   email: string;
   password: string;
 }
+
+interface SignUpParams {
+  name: string;
+  nickName: string;
+  phone: string;
+  email: string;
+  password: string;
+  pwCheck: string;
+  useTermsCheck: boolean;
+  privacyTermsCheck: boolean;
+}
+
 export const signIn = async ({ email, password }: SignInParams) => {
   const { data, error } = await supabase.auth.signInWithPassword({
     email: email,
@@ -15,3 +27,22 @@ export const signIn = async ({ email, password }: SignInParams) => {
 
   return data;
 };
+
+export const signUp = async ({ name, nickName, phone, email, password }: SignUpParams) => {
+  const { data, error } = await supabase.auth.signUp({
+    email: email,
+    password: password,
+    options: {
+      data: {
+        name: name,
+        nickName: nickName,
+        phone: phone,
+      },
+    },
+  });
+  if (error) {
+    throw error;
+  }
+
+  return data;
+};

src/apis/index.ts

@@ -1 +1 @@
-export { signIn as signIn } from './authApis.ts';
+export { signIn as signIn, signUp as signUp } from './authApis.ts';

src/components/Join/JoinButton.tsx

@@ -1,22 +1,97 @@
 import { useJoinState } from '../../stores/joinStore';
+import { isValidName, isValidFormatPhone, isValidEmail, isValidPassword, isValidPwCheck } from '@/utils/authUtils.ts';
+import { useRef, useState } from 'react';
+import useSignUp from '@/react-queries/useSignUp';
+import { isAuthError } from '@supabase/supabase-js';
+import { useNavigate } from 'react-router-dom';
+import { Loading } from '@/pages';
+import Dialog from '../Dialog';
+
+interface DialogElement {
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const messages = {
+  NAME_ISVAILD_ERROR: '이름은 두글자 이상 입력 가능합니다.',
+  PHONE_ISVAILD_ERROR: '휴대폰 번호를 정확히 입력해주세요.',
+  PWCHECK_ISVAILD_ERROR: '비밀번호 확인을 진행해주세요.',
+  EMAIL_PASSWORD_ISVAILD_ERROR: '이메일 또는 비밀번호 형식이 잘못되었습니다.',
+  TERMS_ISVAILD_ERROR: '개인정보 수집 및 이용약관에 동의해주세요.',
+  AUTH_ERROR: '이미 가입한 계정이 있습니다. 계정을 확인해주세요.',
+};
 
 const JoinButton = () => {
-  const { name, phone, email, password, pwCheck, useTermsCheck, privacyTermsCheck } = useJoinState();
+  const { nickName, name, phone, email, password, pwCheck, useTermsCheck, privacyTermsCheck } = useJoinState();
+  const { mutate, isPending } = useSignUp();
+  const navigate = useNavigate();
+  const dialogRef = useRef<DialogElement | null>(null);
+  const [dialogMessage, setDialogMessage] = useState('');
 
   const onClick = () => {
-    console.log('name: ', name);
-    console.log('phone: ', phone);
-    console.log('email: ', email);
-    console.log('password: ', password);
-    console.log('pwCheck: ', pwCheck);
-    console.log('useTermsCheck: ', useTermsCheck);
-    console.log('privacyTermsCheck: ', privacyTermsCheck);
+    if (!isValidEmail(email) || !isValidPassword(password)) {
+      setDialogMessage(messages.EMAIL_PASSWORD_ISVAILD_ERROR);
+      dialogRef.current?.openModal();
+      return;
+    }
+
+    if (!isValidName(name)) {
+      setDialogMessage(messages.NAME_ISVAILD_ERROR);
+      dialogRef.current?.openModal();
+      return;
+    }
+
+    if (!isValidFormatPhone(phone)) {
+      setDialogMessage(messages.PHONE_ISVAILD_ERROR);
+      dialogRef.current?.openModal();
+      return;
+    }
+
+    if (!isValidPwCheck(password, pwCheck)) {
+      setDialogMessage(messages.PWCHECK_ISVAILD_ERROR);
+      dialogRef.current?.openModal();
+      return;
+    }
+
+    if (!useTermsCheck || !privacyTermsCheck) {
+      setDialogMessage(messages.TERMS_ISVAILD_ERROR);
+      dialogRef.current?.openModal();
+      return;
+    }
+
+    mutate(
+      {
+        name,
+        nickName,
+        phone,
+        email,
+        password,
+        pwCheck: '',
+        useTermsCheck: false,
+        privacyTermsCheck: false,
+      },
+      {
+        onError: (error) => {
+          if (isAuthError(error)) {
+            setDialogMessage(messages.AUTH_ERROR);
+            dialogRef.current?.openModal();
+          }
+        },
+        onSuccess: () => {
+          navigate('/*');
+        },
+      },
+    );
   };
 
   return (
-    <button type={'submit'} onClick={onClick} className="btn btn-outline btn-primary w-full">
-      회원가입 하기
-    </button>
+    <>
+      <button type={'submit'} onClick={onClick} className="btn btn-outline btn-primary w-full">
+        회원가입 하기
+      </button>
+      <Dialog ref={dialogRef} desc={dialogMessage}></Dialog>
+      {isPending && <Loading size={'lg'} color={'primary'} display={'spinner'} />}
+    </>
   );
 };
 

src/react-queries/useSignUp.ts

@@ -0,0 +1,10 @@
+import { useMutation } from '@tanstack/react-query';
+import { signUp } from '@/apis';
+
+const useSignUp = () =>
+  useMutation({
+    mutationKey: ['signUp'],
+    mutationFn: signUp,
+  });
+
+export default useSignUp;