Merge pull request #130 from imaginer-dev/9-회원가입-클릭시-회원가입을-할-수-있어야-한다

9 회원가입 클릭시 회원가입을 할 수 있어야 한다

Author: gihwan-dev

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,
@@ -16,6 +28,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;
+  }
+
 export const recoveryPasswd = async (email: string) => {
   const { data, error } = await supabase.auth.resetPasswordForEmail(email);
   if (error) {

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,23 +1,99 @@
 import { useJoinState } from '../../stores/joinStore';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
+import { FormatPhone } from './FormatPhone.tsx';
+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 { nickName, name, phone, email, password, pwCheck, useTermsCheck, privacyTermsCheck } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
+  const { mutate, isPending } = useSignUp();
+  const navigate = useNavigate();
+  const dialogRef = useRef<DialogElement | null>(null);
+  const [dialogMessage, setDialogMessage] = useState('');
 
   const onClick = () => {
-    console.log('nickName: ', nickName);
-    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 (!validator.isValidEmail(email) || !validator.isValidPassword(password)) {
+      setDialogMessage(messages.EMAIL_PASSWORD_ISVAILD_ERROR);
+      dialogRef.current?.openModal();
+      return;
+    }
+
+    if (!validator.isValidName(name)) {
+      setDialogMessage(messages.NAME_ISVAILD_ERROR);
+      dialogRef.current?.openModal();
+      return;
+    }
+
+    if (!FormatPhone(phone)) {
+      setDialogMessage(messages.PHONE_ISVAILD_ERROR);
+      dialogRef.current?.openModal();
+      return;
+    }
+
+    if (!validator.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('/login');
+        },
+      },
+    );
   };
 
   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;