[Deploy] 배포

src/components/common/sidebar/logtoutModal/logoutModal.tsx

@@ -1,42 +1,43 @@
-import { useNavigate } from 'react-router-dom';
-
 import useUserAuth from '@/hooks/auth/useUserAuth';
 
 import Button from '@/components/common/button/button';
 import Modal from '@/components/common/modal/modal';
 import * as S from '@/components/common/sidebar/logtoutModal/logoutModal.style';
 
+import ModalLoading from '../../loading/modalLoading';
+
 type TLogoutModalProps = {
   onClose: () => void;
 };
 
 export default function LogoutModal({ onClose }: TLogoutModalProps) {
-  const navigate = useNavigate();
   const { useLogout } = useUserAuth();
-  const { mutate: logoutMutate } = useLogout;
+  const { mutate: logoutMutate, isPending } = useLogout;
   const handleLogout = () => {
     logoutMutate(
       {},
       {
         onSuccess: () => {
-          navigate('/', { replace: true });
+          window.location.replace('/');
           onClose();
         },
         onError: () => {
-          navigate('/', { replace: true });
+          window.location.replace('/');
           onClose();
         },
       },
     );
   };
+
   return (
     <Modal title="Are you sure you want to log out?" onClose={onClose}>
+      {isPending && <ModalLoading />}
       <S.ModalBox>
         <S.BtnWrapper>
-          <Button type="normal" color="white_square" onClick={onClose}>
+          <Button type="normal" color="white_square" onClick={onClose} disabled={isPending}>
             No
           </Button>
-          <Button type="normal" color="blue" onClick={handleLogout}>
+          <Button type="normal" color="blue" onClick={handleLogout} disabled={isPending}>
             Yes
           </Button>
         </S.BtnWrapper>

src/components/projectInfo/ChangeOwnerModal/changeOwnerModal.tsx

@@ -5,6 +5,7 @@ import { useChangeOwner } from '@/hooks/projectInfo/useChangeOwner';
 
 import Button from '@/components/common/button/button';
 import ValidationMessage from '@/components/common/input/validationMessage';
+import ModalLoading from '@/components/common/loading/modalLoading';
 import Modal from '@/components/common/modal/modal';
 import * as S from '@/components/projectInfo/ChangeOwnerModal/changeOwnerModal.style';
 
@@ -16,7 +17,7 @@ type TModalProps = {
 export default function ChangeOwnerModal({ onClose, projectId = 0, userId = 0 }: TModalProps) {
   const { useChangeOwn } = useChangeOwner();
   const queryClient = useQueryClient();
-  const { mutate: changeOwner } = useChangeOwn;
+  const { mutate: changeOwner, isPending } = useChangeOwn;
   const [errorMessage, setErrorMessage] = useState('');
   const handleChange = () => {
     changeOwner(
@@ -28,8 +29,8 @@ export default function ChangeOwnerModal({ onClose, projectId = 0, userId = 0 }:
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: ['getProjectMember', projectId] });
           queryClient.invalidateQueries({ queryKey: ['getMemberEmail', projectId] });
+          queryClient.invalidateQueries({ queryKey: ['getProjectInfo', projectId] });
           onClose();
-          window.location.reload();
         },
         onError: (err) => {
           setErrorMessage(err.response?.data.message || 'An error occurred.');
@@ -39,6 +40,7 @@ export default function ChangeOwnerModal({ onClose, projectId = 0, userId = 0 }:
   };
   return (
     <Modal title="Do you want to delegate the room manager authority?" onClose={onClose}>
+      {isPending && <ModalLoading />}
       <S.ModalBox>
         <S.Content>As soon as you lose the room manager authority, you lose the right to modify or remove the project.</S.Content>
       </S.ModalBox>
@@ -47,7 +49,7 @@ export default function ChangeOwnerModal({ onClose, projectId = 0, userId = 0 }:
         <Button type="normal" color="white_square" onClick={onClose}>
           Cancel
         </Button>
-        <Button type="normal" color="blue" onClick={handleChange}>
+        <Button type="normal" color="blue" onClick={handleChange} disabled={isPending}>
           Delegrate
         </Button>
       </S.BtnWrapper>

src/components/projectInfo/deleteProjectModal/deleteProjectModal.tsx

@@ -1,9 +1,14 @@
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { QUERY_KEYS } from '@/constants/querykeys/queryKeys';
+
+import { queryClient } from '@/apis/queryClient';
 
 import { useProjectInfo } from '@/hooks/projectInfo/useProjectInfo';
 
 import Button from '@/components/common/button/button';
+import ModalLoading from '@/components/common/loading/modalLoading';
 import Modal from '@/components/common/modal/modal';
 
 import * as S from './deleteProjectModal.style';
@@ -14,15 +19,18 @@ type TAuthModalProps = {
 };
 export default function DeleteProjectModal({ onClose }: TAuthModalProps) {
   const { projectId } = useParams();
+  const navigate = useNavigate();
   const { useDeleteProject } = useProjectInfo({ projectId: Number(projectId) });
-  const { mutate: deleteProjectMutate } = useDeleteProject;
+  const { mutate: deleteProjectMutate, isPending } = useDeleteProject;
   const [errorMessage, setErrorMessage] = useState('');
   const handleDelete = () => {
     deleteProjectMutate(
       { projectId: Number(projectId) },
       {
         onSuccess: () => {
-          window.location.href = '/project';
+          queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROJECT_LIST });
+          navigate('/project');
+          onClose();
         },
         onError: (error) => {
           setErrorMessage(error.response?.data.message || 'An error occurred.');
@@ -32,13 +40,14 @@ export default function DeleteProjectModal({ onClose }: TAuthModalProps) {
   };
   return (
     <Modal title={'Are you sure you want to remove the page?'} onClose={onClose} isExitButtonVisible={false}>
+      {isPending && <ModalLoading />}
       <S.Container>If you press the Remove button, it will never recover again and all data will be deleted.</S.Container>
       <S.ButtonBox>
         {errorMessage && <ValidataionMessage message={errorMessage} isError={true} />}
         <Button color={'white_square'} onClick={onClose}>
           Cancel
         </Button>
-        <Button color={'blue'} onClick={handleDelete}>
+        <Button color={'blue'} onClick={handleDelete} disabled={isPending}>
           Delete
         </Button>
       </S.ButtonBox>

src/components/projectInfo/deleteTeamMember/deleteTeamMemberModal.tsx

@@ -5,6 +5,7 @@ import { useChangeOwner } from '@/hooks/projectInfo/useChangeOwner';
 
 import Button from '@/components/common/button/button';
 import ValidationMessage from '@/components/common/input/validationMessage';
+import ModalLoading from '@/components/common/loading/modalLoading';
 import Modal from '@/components/common/modal/modal';
 import * as S from '@/components/projectInfo/deleteTeamMember/deleteTeamMemberModal.style';
 
@@ -16,7 +17,7 @@ type TModalProps = {
 export default function DeleteTeamMember({ onClose, projectId = 0, email = '' }: TModalProps) {
   const { useDeleteMember } = useChangeOwner();
   const queryClient = useQueryClient();
-  const { mutate: deleteMember } = useDeleteMember;
+  const { mutate: deleteMember, isPending } = useDeleteMember;
   const [errorMessage, setErrorMessage] = useState('');
   const handleChange = () => {
     deleteMember(
@@ -37,6 +38,7 @@ export default function DeleteTeamMember({ onClose, projectId = 0, email = '' }:
   };
   return (
     <Modal title="Are you sure to remove the team member?" onClose={onClose}>
+      {isPending && <ModalLoading />}
       <S.ModalBox>
         <S.Content>If you press the Remove button, it will never recover again and all data will be deleted.</S.Content>
       </S.ModalBox>
@@ -45,7 +47,7 @@ export default function DeleteTeamMember({ onClose, projectId = 0, email = '' }:
         <Button type="normal" color="white_square" onClick={onClose}>
           Cancel
         </Button>
-        <Button type="normal" color="blue" onClick={handleChange}>
+        <Button type="normal" color="blue" onClick={handleChange} disabled={isPending}>
           Delete
         </Button>
       </S.BtnWrapper>

src/pages/login/login.tsx

@@ -29,9 +29,9 @@ export default function LoginPage() {
   const navigate = useNavigate();
 
   const { useGetUserEmail } = useInvite();
-  const { data: emailData } = useGetUserEmail;
+  const { isSuccess } = useGetUserEmail;
 
-  if (emailData) {
+  if (isSuccess) {
     navigate('/project');
   }
 

src/pages/signup/signup.tsx

@@ -37,9 +37,9 @@ type TAPIFormValues = {
 function SignupPage() {
   const navigate = useNavigate();
   const { useGetUserEmail } = useInvite();
-  const { data: emailData } = useGetUserEmail;
+  const { isSuccess } = useGetUserEmail;
 
-  if (emailData) {
+  if (isSuccess) {
     navigate('/project');
   }