Merge branch 'main' into GGFE-239-트로피-이미지-확성기-기본문구

components/admin/store/ItemList.tsx

@@ -10,6 +10,7 @@ import {
   TableRow,
 } from '@mui/material';
 import { Item, ItemList } from 'types/itemTypes';
+import { IUpdate } from 'types/modalTypes';
 import { instance } from 'utils/axios';
 import { modalState } from 'utils/recoil/modal';
 import { toastState } from 'utils/recoil/toast';
@@ -33,7 +34,7 @@ const tableTitle: { [key: string]: string } = {
   delete: '삭제',
 };
 
-function ItemList() {
+function ItemList({ update, setUpdate }: IUpdate) {
   const [itemListData, setItemListData] = useState<ItemList>({
     itemList: [],
   });
@@ -58,6 +59,7 @@ function ItemList() {
     setModal({
       modalName: 'ADMIN-ITEM_EDIT',
       item: item,
+      update: { update: update, setUpdate: setUpdate },
     });
   };
 
@@ -80,6 +82,13 @@ function ItemList() {
     getItemListHandler();
   }, []);
 
+  useEffect(() => {
+    if (update) {
+      getItemListHandler();
+      setUpdate(false);
+    }
+  }, [update, getItemListHandler]);
+
   return (
     <TableContainer className={styles.tableContainer} component={Paper}>
       <Table className={styles.table} aria-label='customized table'>

components/admin/store/StoreMain.tsx

@@ -1,17 +1,20 @@
+import { useState } from 'react';
 import ChangeHistory from 'components/admin/store/itemHistory';
 import ItemList from 'components/admin/store/ItemList';
 import styles from 'styles/admin/store/StoreMain.module.scss';
 
 function StoreMain() {
+  const [update, setUpdate] = useState(false);
+
   return (
     <div className={styles.mainContainer}>
       <div className={styles.subContainer}>
         <div className={styles.sectionTitle}>아이템 목록</div>
-        <ItemList />
+        <ItemList update={update} setUpdate={setUpdate} />
       </div>
       <div className={styles.subContainer}>
         <div className={styles.sectionTitle}>변경 이력</div>
-        <ChangeHistory />
+        <ChangeHistory update={update} setUpdate={setUpdate} />
       </div>
     </div>
   );

components/admin/store/itemHistory.tsx

@@ -10,6 +10,7 @@ import {
   TableRow,
 } from '@mui/material';
 import { IitemHistory, IitemHistoryList } from 'types/admin/adminStoreTypes';
+import { IUpdate } from 'types/modalTypes';
 import { instanceInManage } from 'utils/axios';
 import { dateToStringShort } from 'utils/handleTime';
 import { modalState } from 'utils/recoil/modal';
@@ -35,7 +36,7 @@ const tableTitle: { [key: string]: string } = {
   visible: '상점 노출',
 };
 
-function ItemHistory() {
+function ItemHistory({ update, setUpdate }: IUpdate) {
   const [itemHistoryData, setItemHistoryData] = useState<IitemHistoryList>({
     itemHistoryList: [],
     totalPage: 0,
@@ -81,8 +82,11 @@ function ItemHistory() {
   };
 
   useEffect(() => {
-    getItemHistoryListHandler();
-  }, [currentPage]);
+    if (update) {
+      getItemHistoryListHandler();
+      setUpdate(false);
+    }
+  }, [currentPage, update]);
 
   return (
     <>

components/modal/admin/AdminDeleteItem.tsx

@@ -1,12 +1,20 @@
 import { useSetRecoilState } from 'recoil';
 import { Item } from 'types/itemTypes';
+import { IUpdate } from 'types/modalTypes';
 import { instanceInManage } from 'utils/axios';
 import { modalState } from 'utils/recoil/modal';
 import { toastState } from 'utils/recoil/toast';
 import styles from 'styles/admin/modal/AdminDeleteItem.module.scss';
 
-export default function AdminDeleteItemModal(props: Item) {
-  const { itemId, itemName, mainContent, subContent } = props;
+export default function AdminDeleteItemModal({
+  item,
+  state,
+}: {
+  item: Item;
+  state: IUpdate;
+}) {
+  const { itemId, itemName, mainContent, subContent } = item;
+  const { setUpdate } = state;
   const setModal = useSetRecoilState(modalState);
   const setSnackBar = useSetRecoilState(toastState);
 
@@ -27,6 +35,7 @@ export default function AdminDeleteItemModal(props: Item) {
         clicked: true,
       });
     }
+    setUpdate(true);
     setModal({ modalName: null });
   };
 

components/modal/admin/AdminEditItem.tsx

@@ -1,13 +1,20 @@
 import Image from 'next/image';
 import { useSetRecoilState } from 'recoil';
 import { Item } from 'types/itemTypes';
+import { IUpdate } from 'types/modalTypes';
 import { instanceInManage } from 'utils/axios';
 import { modalState } from 'utils/recoil/modal';
 import { toastState } from 'utils/recoil/toast';
 import useUploadImg from 'hooks/useUploadImg';
 import styles from 'styles/admin/modal/AdminEditItem.module.scss';
 
-export default function AdminEditItemModal(props: Item) {
+export default function AdminEditItemModal({
+  item,
+  state,
+}: {
+  item: Item;
+  state: IUpdate;
+}) {
   const {
     itemId,
     itemName,
@@ -17,16 +24,18 @@ export default function AdminEditItemModal(props: Item) {
     originalPrice,
     discount,
     itemType,
-  } = props;
+  } = item;
+  const { setUpdate } = state;
   const setModal = useSetRecoilState(modalState);
   const setSnackBar = useSetRecoilState(toastState);
   const { imgData, imgPreview, uploadImg } = useUploadImg({
     maxSizeMB: 0.03,
-    maxWidthOrHeight: 250,
+    maxWidthOrHeight: 300,
   });
 
   const editErrorResponse: { [key: string]: string } = {
     IT200: '아이템 타입이 일치하지 않습니다.',
+    IT205: '해당 아이템에 접근할 수 없습니다.',
     IT413: '아이템 이미지가 너무 큽니다.',
     IT415: '아이템 이미지 타입이 jpeg가 아닙니다.',
   };
@@ -94,6 +103,7 @@ export default function AdminEditItemModal(props: Item) {
         });
       }
     }
+    setUpdate(true);
     setModal({ modalName: null });
   };
 

components/modal/modalType/AdminModal.tsx

@@ -29,6 +29,7 @@ export default function AdminModal() {
     profile,
     item,
     coinPolicy,
+    update,
   } = useRecoilValue(modalState);
 
   const content: { [key: string]: JSX.Element | null } = {
@@ -67,8 +68,12 @@ export default function AdminModal() {
     'ADMIN-PROFILE_DELETE': profile ? (
       <AdminDeleteProfileModal {...profile} />
     ) : null,
-    'ADMIN-ITEM_EDIT': item ? <AdminEditItemModal {...item} /> : null,
-    'ADMIN-ITEM_DELETE': item ? <AdminDeleteItemModal {...item} /> : null,
+    'ADMIN-ITEM_EDIT':
+      item && update ? <AdminEditItemModal item={item} state={update} /> : null,
+    'ADMIN-ITEM_DELETE':
+      item && update ? (
+        <AdminDeleteItemModal item={item} state={update} />
+      ) : null,
     'ADMIN-COINPOLICY_EDIT': coinPolicy ? (
       <AdminEditCoinPolicyModal {...coinPolicy} />
     ) : null,

types/modalTypes.ts

@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from 'react';
 import { Value } from 'react-quill';
 import { IcoinPolicy } from 'types/admin/adminCoinTypes';
 import { IFeedback } from 'types/admin/adminFeedbackTypes';
@@ -101,6 +102,11 @@ export interface IRandomItem {
   color: string;
 }
 
+export interface IUpdate {
+  update: boolean;
+  setUpdate: Dispatch<SetStateAction<boolean>>;
+}
+
 export interface Modal {
   modalName: ModalName;
   manual?: Manual;
@@ -127,4 +133,5 @@ export interface Modal {
   isAttended?: boolean;
   totalCoin?: ICoin;
   randomItem?: IRandomItem;
+  update?: IUpdate;
 }