refactor: 잘못된 이벤트 제거 및 addMenuMutation onError 추가

BCSDLab · Jun 17, 2024 · 0a988a1 · 0a988a1
1 parent 6cfb580
commit 0a988a1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/src/page/AddMenu/index.tsx b/src/page/AddMenu/index.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useMyShop from 'query/shop';
 import useAddMenuStore from 'store/addMenu';
-import showToast from 'utils/ts/showToast';
 import { useErrorMessageStore } from 'store/errorMessageStore';
 import useScrollToTop from 'utils/hooks/useScrollToTop';
 import MenuImage from './components/MenuImage';
@@ -38,7 +37,7 @@ export default function AddMenu() {
     optionPrices,
     singlePrice,
   } = useAddMenuStore();
-  const { addMenuMutation, addMenuError } = useMyShop();
+  const { addMenuMutation } = useMyShop();
   const { validateFields } = useFormValidation();
   const toggleConfirmClick = () => {
     if (validateFields()) {
@@ -60,24 +59,17 @@ export default function AddMenu() {
       single_price: typeof singlePrice === 'string' ? parseInt(singlePrice, 10) : singlePrice || 0,
     };
     addMenuMutation(newMenuData);
-    if (addMenuError) {
-      showToast('error', '메뉴 추가에 실패했습니다.');
-    } else {
-      navigate('/owner');
-    }
   };
 
-  const onClickMenuAddCancelHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
+  const onClickMenuAddCancelHandler = () => {
     if (isComplete) {
       toggleConfirmClick();
     } else {
       navigate('/owners');
     }
   };
 
-  const onClickMenuAddConfirmHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
+  const onClickMenuAddConfirmHandler = () => {
     if (isComplete) {
       if (isMobile) {
         openGoMyShopModal();
@@ -127,14 +119,14 @@ export default function AddMenu() {
             <button
               className={styles['mobile__button-cancel']}
               type="button"
-              onClick={(e) => onClickMenuAddCancelHandler(e)}
+              onClick={() => onClickMenuAddCancelHandler()}
             >
               취소
             </button>
             <button
               className={styles['mobile__button-check']}
               type="button"
-              onClick={(e) => onClickMenuAddConfirmHandler(e)}
+              onClick={() => onClickMenuAddConfirmHandler()}
             >
               확인
             </button>
@@ -148,14 +140,14 @@ export default function AddMenu() {
               <button
                 className={styles['header__button-cancel']}
                 type="button"
-                onClick={(e) => onClickMenuAddCancelHandler(e)}
+                onClick={() => onClickMenuAddCancelHandler()}
               >
                 취소
               </button>
               <button
                 className={styles['header__button-check']}
                 type="button"
-                onClick={(e) => onClickMenuAddConfirmHandler(e)}
+                onClick={() => onClickMenuAddConfirmHandler()}
               >
                 확인
               </button>

diff --git a/src/query/shop.ts b/src/query/shop.ts
@@ -4,14 +4,18 @@ import {
 import {
   getMyShopList, getShopInfo, getMenuInfoList, addMenu, getShopEventList,
 } from 'api/shop';
+import { isKoinError } from '@bcsdlab/koin';
+import showToast from 'utils/ts/showToast';
 import useAddMenuStore from 'store/addMenu';
 import { NewMenu } from 'model/shopInfo/newMenu';
+import { useNavigate } from 'react-router-dom';
 import getShopCategory from 'api/category';
 import useSuspenseUser from 'utils/hooks/useSuspenseUser';
 import { shopKeys } from './KeyFactory/shopKeys';
 
 const useMyShop = () => {
   let myShopQueryKey = '';
+  const navigate = useNavigate();
   const { data: user } = useSuspenseUser();
   if (user && 'company_number' in user) {
     myShopQueryKey = user.company_number;
@@ -57,6 +61,12 @@ const useMyShop = () => {
     onSuccess: () => {
       resetAddMenuStore();
       queryClient.invalidateQueries({ queryKey: shopKeys.myMenuInfo(shopId) });
+      navigate('/owner');
+    },
+    onError: (e) => {
+      if (isKoinError(e)) {
+        showToast('error', e.message);
+      }
     },
   });