feat: put/임시 저장 시 toast 메시지 띄우기

softeerbootcamp4th · Aug 12, 2024 · 3235ebd · 3235ebd
1 parent 08938ee
commit 3235ebd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/admin/src/features/Rush/EventList.tsx b/admin/src/features/Rush/EventList.tsx
@@ -10,22 +10,26 @@ import { EVENT_LIST_HEADER, QUERY_OPTION } from "@/constants/rush";
 import useFetch from "@/hooks/useFetch";
 import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
 import useRushEventStateContext from "@/hooks/useRushEventStateContext";
+import useToast from "@/hooks/useToast";
 import { RUSH_ACTION } from "@/types/rush";
 import { PutRushEventResponse } from "@/types/rushApi";
 import { getTimeDifference } from "@/utils/getTimeDifference";
 
 export default function EventList() {
     const navigate = useNavigate();
 
+    const { showToast, ToastComponent } = useToast("수정 사항이 반영되었습니다!");
+
     const { rushList } = useRushEventStateContext();
     const dispatch = useRushEventDispatchContext();
 
-    const { isSuccess: isSuccessPutRush } = useFetch<PutRushEventResponse>(() =>
+    const { isSuccess: isSuccessPutRush, fetchData: putRush } = useFetch<PutRushEventResponse>(() =>
         RushAPI.putRush(rushList)
     );
 
     useEffect(() => {
         if (isSuccessPutRush) {
+            showToast();
         }
     }, [isSuccessPutRush]);
 
@@ -40,6 +44,10 @@ export default function EventList() {
         dispatch({ type: RUSH_ACTION.SET_EVENT_LIST, payload: updatedTableItemList });
     };
 
+    const handleUpdate = () => {
+        putRush();
+    };
+
     const getTableData = () => {
         return rushList.map((item, idx) => {
             const canEdit = item.status !== EVENT_STATUS.BEFORE;
@@ -103,7 +111,11 @@ export default function EventList() {
                 <Table headers={EVENT_LIST_HEADER} data={getTableData()} />
             </div>
 
-            <Button buttonSize="lg">수정사항 업데이트</Button>
+            <Button buttonSize="lg" onClick={handleUpdate}>
+                수정사항 업데이트
+            </Button>
+
+            {ToastComponent}
         </div>
     );
 }
diff --git a/admin/src/features/Rush/RushPrizeForm.tsx b/admin/src/features/Rush/RushPrizeForm.tsx
@@ -2,10 +2,10 @@ import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import Button from "@/components/Button";
 import SelectForm from "@/components/SelectForm";
-import TabHeader from "@/components/TabHeader";
 import TextField from "@/components/TextField";
 import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
 import useRushEventStateContext from "@/hooks/useRushEventStateContext";
+import useToast from "@/hooks/useToast";
 import { RUSH_ACTION, RushPrizeType } from "@/types/rush";
 
 export default function RushPrizeForm() {
@@ -17,6 +17,8 @@ export default function RushPrizeForm() {
     const { rushList } = useRushEventStateContext();
     const dispatch = useRushEventDispatchContext();
 
+    const { showToast, ToastComponent } = useToast("입력한 내용이 임시 저장되었습니다!");
+
     const [prizeState, setPrizeState] = useState<RushPrizeType>({} as RushPrizeType);
 
     useEffect(() => {
@@ -40,6 +42,8 @@ export default function RushPrizeForm() {
             type: RUSH_ACTION.SET_EVENT_LIST,
             payload: updatedTableItemList,
         });
+
+        showToast();
     };
 
     const option = [
@@ -70,6 +74,8 @@ export default function RushPrizeForm() {
             <Button buttonSize="lg" onClick={handleUpdate}>
                 임시 저장
             </Button>
+
+            {ToastComponent}
         </div>
     );
 }
diff --git a/admin/src/features/Rush/RushSelectForm.tsx b/admin/src/features/Rush/RushSelectForm.tsx
@@ -5,6 +5,7 @@ import SelectForm from "@/components/SelectForm";
 import TextField from "@/components/TextField";
 import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
 import useRushEventStateContext from "@/hooks/useRushEventStateContext";
+import useToast from "@/hooks/useToast";
 import { RUSH_ACTION, RushOptionType } from "@/types/rush";
 
 export default function RushSelectForm() {
@@ -16,6 +17,8 @@ export default function RushSelectForm() {
     const { rushList } = useRushEventStateContext();
     const dispatch = useRushEventDispatchContext();
 
+    const { showToast, ToastComponent } = useToast("입력한 내용이 임시 저장되었습니다!");
+
     const [selectOptionState, setSelectOptionState] = useState<RushOptionType[]>([]);
 
     useEffect(() => {
@@ -40,6 +43,8 @@ export default function RushSelectForm() {
             type: RUSH_ACTION.SET_EVENT_LIST,
             payload: updatedTableItemList,
         });
+
+        showToast();
     };
 
     const handleChangeItem = (key: string, changeIdx: number, text: string) => {
@@ -123,6 +128,8 @@ export default function RushSelectForm() {
             <Button buttonSize="lg" onClick={handleUpdate}>
                 임시 저장
             </Button>
+
+            {ToastComponent}
         </div>
     );
 }