feat: 비밀번호 변경 커스텀 훅 개발

Author: gihwan-dev

src/apis/authApis.ts

@@ -15,3 +15,11 @@ export const signIn = async ({ email, password }: SignInParams) => {
 
   return data;
 };
+
+export const isLogIn = async () => {
+  const { data, error } = await supabase.auth.getSession();
+  if (error) {
+    throw error;
+  }
+  return data;
+};

src/react-queries/queryKeys.ts

@@ -1,3 +1,7 @@
 import { createQueryKeyStore } from '@lukemorales/query-key-factory';
 
-export const queries = createQueryKeyStore({});
+export const queries = createQueryKeyStore({
+  auth: {
+    isLogin: null,
+  },
+});

src/react-queries/useUpdateUser.ts

@@ -0,0 +1,55 @@
+import { isLogIn } from '@/apis/authApis';
+import updateUser from '@/apis/updateUserApi';
+import { useChangePasswordState } from '@/stores/changePasswordStore';
+import supabase from '@/supabase';
+import { LooseValidation, ValidateProcessor } from '@/utils/authUtils';
+import { useMutation } from '@tanstack/react-query';
+import { useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface DialogElement {
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const useUpdateUser = () => {
+  const { mutate, isPending } = useMutation({
+    mutationKey: ['updateUser'],
+    mutationFn: updateUser,
+  });
+  const [dialogMessage, setDialogMessage] = useState('');
+  const { password } = useChangePasswordState();
+  const dialogRef = useRef<DialogElement | null>(null);
+  const navigate = useNavigate();
+
+  const validator = new ValidateProcessor(new LooseValidation());
+
+  const onClick = () => {
+    if (!validator.isValidPassword(password)) {
+      setDialogMessage('유효하지 않은 패스워드 입니다.');
+      dialogRef.current?.openModal();
+    }
+
+    mutate(password, {
+      onSuccess: async () => {
+        const { session } = await isLogIn();
+        if (session) {
+          await supabase.auth.signOut();
+        }
+        navigate('/login');
+      },
+      onError: (e) => {
+        setDialogMessage(e.message);
+        dialogRef.current?.openModal();
+      },
+    });
+  };
+  return {
+    isPending,
+    onClick,
+    dialogRef,
+    dialogMessage,
+  };
+};
+
+export default useUpdateUser;