Feature #145 mutation 결과 toast로 띄우기 (#146)

* fix(#145): lotus update form 기본값 추가 * feat(#145): 코드 실행 버튼 mutation 결과 toast * feat(#145): lotus create form mutation 결과 toast * feat(#145): lotus delete mutation 결과 toast * feat(#145): lotus update mutation 결과 toast * feat(#145): user info form 결과 toast
boostcampwm-2024 · Nov 26, 2024 · a8bbce7 · a8bbce7
1 parent 3839396
commit a8bbce7
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 16 deletions.
diff --git a/apps/frontend/src/feature/user/component.tsx b/apps/frontend/src/feature/user/component.tsx
@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 interface UserEditableInfoProps {
+  disabled?: boolean;
   value: string;
   onToggleIsEdit: () => void;
   onEditValue: (value: string) => void;
@@ -13,7 +14,7 @@ const userInfoInputValue = z.object({
   value: z.string().min(1, { message: '입력값이 존재하지 않습니다.' })
 });
 
-export function UserInfoInputForm({ value, onToggleIsEdit, onEditValue }: UserEditableInfoProps) {
+export function UserInfoInputForm({ value, onToggleIsEdit, onEditValue, disabled }: UserEditableInfoProps) {
   const {
     register,
     reset,
@@ -37,7 +38,9 @@ export function UserInfoInputForm({ value, onToggleIsEdit, onEditValue }: UserEd
   return (
     <form onSubmit={handleSubmit(onSubmit, onError)} className="flex items-center gap-2">
       <Input className={'min-w-80 mr-4'} {...register('value')} placeholder={`값을 입력해주세요.`} />
-      <Button type="submit">수정하기</Button>
+      <Button type="submit" disabled={disabled}>
+        수정하기
+      </Button>
       <Button type="button" onClick={onToggleIsEdit} variant={'secondary'}>
         취소하기
       </Button>

diff --git a/apps/frontend/src/widget/lotusCodeRun/CodeRunButton.tsx b/apps/frontend/src/widget/lotusCodeRun/CodeRunButton.tsx
@@ -4,21 +4,33 @@ import { LotusRunCodeForm } from './LotusRunCodeForm';
 import { lotusHistoryQueryOptions, useCodeRunMutation } from '@/feature/history/query';
 import { ModalBox } from '@/shared';
 import { useOverlay } from '@/shared/overlay';
+import { useToast } from '@/shared/toast';
 
 export function CodeRunButton({ lotusId }: { lotusId: string }) {
   const { open, exit } = useOverlay();
 
-  const { mutate } = useCodeRunMutation();
+  const { toast } = useToast();
+
+  const { mutate, isPending } = useCodeRunMutation();
 
   const queryClient = useQueryClient();
 
   const handleCodeRun = ({ execFileName, inputs }: { execFileName: string; inputs: string[] }) => {
+    exit();
+
     mutate(
       { lotusId, input: inputs, execFileName },
       {
         onSuccess: () => {
-          exit();
           queryClient.invalidateQueries(lotusHistoryQueryOptions.list({ id: lotusId }));
+          toast({ description: '코드가 실행되었습니다.', variant: 'success', duration: 2000 });
+        },
+        onError: () => {
+          toast({
+            description: '코드 실행 중 오류가 발생했습니다. 다시 시도해 주세요.',
+            variant: 'error',
+            duration: 2000
+          });
         }
       }
     );
@@ -31,5 +43,9 @@ export function CodeRunButton({ lotusId }: { lotusId: string }) {
       </ModalBox>
     ));
 
-  return <Button onClick={handleOpenModal}>실행하기</Button>;
+  return (
+    <Button onClick={handleOpenModal} disabled={isPending}>
+      실행하기
+    </Button>
+  );
 }
diff --git a/apps/frontend/src/widget/lotusCreate/LotusCreateForm.tsx b/apps/frontend/src/widget/lotusCreate/LotusCreateForm.tsx
@@ -7,6 +7,7 @@ import { SuspenseUserGistSelect } from './SuspenseUserGistSelect';
 import { useLotusCreateMutation } from '@/feature/lotus';
 import { AsyncBoundary } from '@/shared/boundary';
 import { TagInput } from '@/shared/tagInput/TagInput';
+import { useToast } from '@/shared/toast';
 
 interface LotusCreateFormValue {
   title: string;
@@ -18,6 +19,8 @@ interface LotusCreateFormValue {
 export function LotusCreateForm() {
   const { mutate, isPending } = useLotusCreateMutation();
 
+  const { toast } = useToast({ isCloseOnUnmount: false });
+
   const navigate = useNavigate();
 
   const [formValue, setFormValue] = useState<LotusCreateFormValue>({
@@ -39,6 +42,15 @@ export function LotusCreateForm() {
       {
         onSuccess: ({ id }) => {
           navigate({ to: `/lotus/$lotusId`, params: { lotusId: id } });
+
+          toast({ description: 'Lotus가 생성되었습니다.', variant: 'success', duration: 2000 });
+        },
+        onError: () => {
+          toast({
+            description: 'Lotus 생성 중 오류가 발생했습니다. 다시 시도해 주세요.',
+            variant: 'error',
+            duration: 2000
+          });
         }
       }
     );

diff --git a/apps/frontend/src/widget/lotusDelete/index.tsx b/apps/frontend/src/widget/lotusDelete/index.tsx
@@ -4,24 +4,36 @@ import { RiDeleteBin5Fill } from 'react-icons/ri';
 import { useLotusDeleteMutation } from '@/feature/lotus';
 import { ModalBox } from '@/shared';
 import { useOverlay } from '@/shared/overlay';
+import { useToast } from '@/shared/toast';
 
 export function LotusDeleteButton({ lotusId }: { lotusId: string }) {
-  const { mutate } = useLotusDeleteMutation();
+  const { mutate, isPending } = useLotusDeleteMutation();
+
   const { open, exit } = useOverlay();
+  const { toast } = useToast({ isCloseOnUnmount: false });
 
   const navigate = useNavigate();
 
   const handleDeleteLotus = () => {
+    exit();
+
     mutate(
       { id: lotusId },
       {
         onSuccess: () => {
-          console.log('성공');
+          toast({ description: 'Lotus가 삭제되었습니다.', variant: 'success', duration: 2000 });
+
           navigate({ to: '/lotus' });
+        },
+        onError: () => {
+          toast({
+            description: 'Lotus 삭제 중 오류가 발생했습니다. 다시 시도해 주세요.',
+            variant: 'error',
+            duration: 2000
+          });
         }
       }
     );
-    exit();
   };
 
   const handleOpenDeleteModal = () => {
@@ -45,7 +57,7 @@ export function LotusDeleteButton({ lotusId }: { lotusId: string }) {
   };
 
   return (
-    <Button variant={'destructive'} onClick={handleOpenDeleteModal}>
+    <Button variant={'destructive'} onClick={handleOpenDeleteModal} disabled={isPending}>
       <RiDeleteBin5Fill />
       <Text size="sm">삭제하기</Text>
     </Button>

diff --git a/apps/frontend/src/widget/lotusUpdate/LotusUpdateButton.tsx b/apps/frontend/src/widget/lotusUpdate/LotusUpdateButton.tsx
@@ -5,24 +5,36 @@ import { LotusUpdateForm } from './LotusUpdateForm';
 import { lotusQueryOptions, useLotusUpdateMutation } from '@/feature/lotus';
 import { ModalBox } from '@/shared';
 import { useOverlay } from '@/shared/overlay';
+import { useToast } from '@/shared/toast';
 
 export function LotusUpdateButton({ lotusId }: { lotusId: string }) {
-  const { mutate } = useLotusUpdateMutation();
+  const { mutate, isPending } = useLotusUpdateMutation();
 
   const { open, exit } = useOverlay();
+  const { toast } = useToast();
 
   const queryClient = useQueryClient();
 
   const onSubmit = (body: { title: string; tags: string[] }) => {
+    exit();
+
     mutate(
       { body, id: lotusId },
       {
         onSuccess: () => {
           queryClient.invalidateQueries(lotusQueryOptions.detail({ id: lotusId }));
+
+          toast({ description: 'Lotus가 수정되었습니다.', variant: 'success', duration: 2000 });
+        },
+        onError: () => {
+          toast({
+            description: 'Lotus 수정 중 오류가 발생했습니다. 다시 시도해 주세요.',
+            variant: 'error',
+            duration: 2000
+          });
         }
       }
     );
-    exit();
   };
 
   const handleOpenUpdateModal = () => {
@@ -36,7 +48,7 @@ export function LotusUpdateButton({ lotusId }: { lotusId: string }) {
   };
 
   return (
-    <Button variant={'default'} onClick={handleOpenUpdateModal}>
+    <Button variant={'default'} onClick={handleOpenUpdateModal} disabled={isPending}>
       <IoSettingsSharp />
       <Text size="sm">수정하기</Text>
     </Button>

diff --git a/apps/frontend/src/widget/lotusUpdate/LotusUpdateForm.tsx b/apps/frontend/src/widget/lotusUpdate/LotusUpdateForm.tsx
@@ -15,7 +15,7 @@ export function LotusUpdateForm({ lotusId, onSubmit, onCancel }: LotusUpdateForm
 
   const [title, setTitle] = useState(lotus.title);
 
-  const [tags, setTags] = useState<string[]>([]);
+  const [tags, setTags] = useState<string[]>(lotus.tags);
 
   const handleSubmit = () => {
     onSubmit?.({ title, tags });
@@ -30,7 +30,7 @@ export function LotusUpdateForm({ lotusId, onSubmit, onCancel }: LotusUpdateForm
       <Input
         className={'min-w-80 mr-4 mb-4'}
         placeholder={`제목을 입력해주세요.`}
-        title={title}
+        value={title}
         onChange={(e) => setTitle(e.target.value)}
       />
       <Text className="mb-2">태그</Text>

diff --git a/apps/frontend/src/widget/user/SuspenseUserInfoBox.tsx b/apps/frontend/src/widget/user/SuspenseUserInfoBox.tsx
@@ -11,9 +11,9 @@ export function SuspenseUserInfoBox() {
   const queryClient = useQueryClient();
   const { data: user } = useSuspenseQuery(userQueryOptions.info());
 
-  const { mutate } = useUserMutation();
-  const { toast } = useToast();
+  const { mutate, isPending } = useUserMutation();
 
+  const { toast } = useToast();
   const [isEdit, setIsEdit] = useState(false);
 
   const onToggleIsEdit = () => {
@@ -26,11 +26,19 @@ export function SuspenseUserInfoBox() {
       {
         onSuccess: () => {
           queryClient.invalidateQueries(userQueryOptions.info());
+
           toast({
             variant: 'success',
             description: '닉네임이 수정되었습니다.',
             duration: 2000
           });
+        },
+        onError: () => {
+          toast({
+            variant: 'error',
+            description: '닉네임 수정 중 오류가 발생했습니다. 다시 시도해 주세요.',
+            duration: 2000
+          });
         }
       }
     );
@@ -48,6 +56,7 @@ export function SuspenseUserInfoBox() {
           <div className="col-span-2">
             {isEdit ? (
               <UserInfoInputForm
+                disabled={isPending}
                 value={user.nickname}
                 onToggleIsEdit={onToggleIsEdit}
                 onEditValue={(value) => onEditUserInfo(value)}