[GGFE-199] 관리자 상점관리 - 아이템 조회 수정 api 연결

components/admin/store/ItemList.tsx

@@ -10,12 +10,11 @@ import {
   TableRow,
 } from '@mui/material';
 import { Item, ItemList } from 'types/itemTypes';
-import { mockInstance } from 'utils/mockAxios';
+import { instance } from 'utils/axios';
 import { modalState } from 'utils/recoil/modal';
 import { toastState } from 'utils/recoil/toast';
 import { tableFormat } from 'constants/admin/table';
 import {
-  AdminContent,
   AdminEmptyItem,
   AdminTableHead,
 } from 'components/admin/common/AdminTable';
@@ -34,19 +33,16 @@ const tableTitle: { [key: string]: string } = {
   delete: '삭제',
 };
 
-const MAX_CONTENT_LENGTH = 15;
-
 function ItemList() {
   const [itemListData, setItemListData] = useState<ItemList>({
     itemList: [],
   });
   const setModal = useSetRecoilState(modalState);
   const setSnackBar = useSetRecoilState(toastState);
 
-  // api 연결 시 instanceInManage로 변경
   const getItemListHandler = useCallback(async () => {
     try {
-      const res = await mockInstance.get(`items/store`);
+      const res = await instance.get(`/pingpong/items/store`);
       setItemListData(res.data);
     } catch (e: unknown) {
       setSnackBar({
@@ -72,6 +68,14 @@ function ItemList() {
     });
   };
 
+  const openDetailModal = (item: Item) => {
+    setModal({
+      modalName: 'ADMIN-DETAIL_CONTENT',
+      detailTitle: item.mainContent,
+      detailContent: item.subContent,
+    });
+  };
+
   useEffect(() => {
     getItemListHandler();
   }, []);
@@ -90,11 +94,21 @@ function ItemList() {
                       <TableCell className={styles.tableBodyItem} key={index}>
                         {columnName === 'imageUri' ? (
                           <Image
-                            src={item[columnName]}
+                            src={item.imageUri ? item[columnName] : ''}
                             alt='Item Iamge'
                             width={30}
                             height={30}
                           />
+                        ) : columnName === 'content' ? (
+                          <div>
+                            {item.mainContent}
+                            <span
+                              style={{ cursor: 'pointer', color: 'grey' }}
+                              onClick={() => openDetailModal(item)}
+                            >
+                              ...더보기
+                            </span>
+                          </div>
                         ) : columnName === 'edit' ? (
                           <button
                             className={styles.editBtn}
@@ -110,12 +124,7 @@ function ItemList() {
                             삭제
                           </button>
                         ) : (
-                          <AdminContent
-                            content={item[columnName as keyof Item].toString()}
-                            maxLen={MAX_CONTENT_LENGTH}
-                            detailTitle={item.itemName}
-                            detailContent={item.mainContent}
-                          />
+                          item[columnName as keyof Item]?.toString()
                         )}
                       </TableCell>
                     );

components/admin/store/itemHistory.tsx

@@ -10,12 +10,12 @@ import {
   TableRow,
 } from '@mui/material';
 import { IitemHistory, IitemHistoryList } from 'types/admin/adminStoreTypes';
+import { instanceInManage } from 'utils/axios';
 import { dateToStringShort } from 'utils/handleTime';
-import { mockInstance } from 'utils/mockAxios';
+import { modalState } from 'utils/recoil/modal';
 import { toastState } from 'utils/recoil/toast';
 import { tableFormat } from 'constants/admin/table';
 import {
-  AdminContent,
   AdminEmptyItem,
   AdminTableHead,
 } from 'components/admin/common/AdminTable';
@@ -24,8 +24,8 @@ import styles from 'styles/admin/store/ItemHistory.module.scss';
 
 const tableTitle: { [key: string]: string } = {
   itemId: 'ID',
-  createdAt: '변경 시간',
-  itemName: '이름',
+  createdAt: '변경일',
+  name: '이름',
   content: '설명',
   imageUri: '이미지',
   price: '원가',
@@ -45,15 +45,15 @@ function ItemHistory() {
   });
   const [currentPage, setCurrentPage] = useState<number>(1);
   const setSnackBar = useSetRecoilState(toastState);
+  const setModal = useSetRecoilState(modalState);
 
-  // instanceInManage로 변경
   const getItemHistoryListHandler = useCallback(async () => {
     try {
-      const res = await mockInstance.get(
-        `/admin/items/history?page=${currentPage}&size=5`
+      const res = await instanceInManage.get(
+        `/items/history?page=${currentPage}&size=5`
       );
       setItemHistoryData({
-        itemHistoryList: res.data.itemHistoryList.map(
+        itemHistoryList: res.data.historyList.map(
           (itemHistory: IitemHistory) => {
             return {
               ...itemHistory,
@@ -74,6 +74,14 @@ function ItemHistory() {
     }
   }, [currentPage]);
 
+  const openDetailModal = (itemHistory: IitemHistory) => {
+    setModal({
+      modalName: 'ADMIN-DETAIL_CONTENT',
+      detailTitle: itemHistory.mainContent,
+      detailContent: itemHistory.subContent,
+    });
+  };
+
   useEffect(() => {
     getItemHistoryListHandler();
   }, [currentPage]);
@@ -100,20 +108,29 @@ function ItemHistory() {
                           >
                             {columnName === 'imageUri' ? (
                               <Image
-                                src={itemHistory[columnName]}
+                                src={
+                                  itemHistory.imageUri
+                                    ? itemHistory[columnName]
+                                    : ''
+                                }
                                 width={30}
                                 height={30}
                                 alt='no'
                               />
+                            ) : columnName === 'content' ? (
+                              <div>
+                                {itemHistory.mainContent}
+                                <span
+                                  style={{ cursor: 'pointer', color: 'grey' }}
+                                  onClick={() => openDetailModal(itemHistory)}
+                                >
+                                  ...더보기
+                                </span>
+                              </div>
                             ) : (
-                              <AdminContent
-                                content={itemHistory[
-                                  columnName as keyof IitemHistory
-                                ].toString()}
-                                maxLen={MAX_CONTENT_LENGTH}
-                                detailTitle={itemHistory.itemName}
-                                detailContent={itemHistory.content}
-                              />
+                              itemHistory[
+                                columnName as keyof IitemHistory
+                              ]?.toString()
                             )}
                           </TableCell>
                         );

components/modal/admin/AdminDeleteItem.tsx

@@ -1,28 +1,22 @@
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { Item } from 'types/itemTypes';
-import { mockInstance } from 'utils/mockAxios';
-import { userState } from 'utils/recoil/layout';
+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 } = props;
+  const { itemId, itemName, mainContent, subContent } = props;
   const setModal = useSetRecoilState(modalState);
   const setSnackBar = useSetRecoilState(toastState);
-  const user = useRecoilValue(userState).intraId;
 
-  // instanceInManage로 변경
-  // delete에 body 담기
   const deleteItemHandler = async (itemId: number) => {
     try {
-      await mockInstance.delete(`/admin/items/${itemId}`, {
-        data: { deleterIntraId: user },
-      });
+      await instanceInManage.delete(`/items/${itemId}`);
       setSnackBar({
         toastName: 'delete item',
         severity: 'success',
-        message: `${itemId}번 ${name}이 삭제되었습니다!`,
+        message: `${itemId}번 ${itemName}이 삭제되었습니다!`,
         clicked: true,
       });
     } catch (e: unknown) {
@@ -44,18 +38,41 @@ export default function AdminDeleteItemModal(props: Item) {
       </div>
       <div className={styles.body}>
         <div className={styles.bodyWrap}>
-          <div className={styles.intraWrap}>
-            <div className={styles.bodyText}>아이템명 :</div>
-            <input className={styles.intraBlank} value={itemName} readOnly />
-          </div>
-          <div className={styles.contentWrap}>
-            <div className={styles.bodyText}>설명 :</div>
-            <textarea
-              className={styles.contentBlank}
-              value={mainContent}
+          <div className={styles.itemWrap}>
+            <label htmlFor='itemName' className={styles.bodyText}>
+              아이템명 :
+            </label>
+            <input
+              id='itemName'
+              className={styles.itemBlank}
+              value={itemName}
               readOnly
             />
           </div>
+          <div className={styles.contentWrap}>
+            <div className={styles.mainContentWrap}>
+              <label htmlFor='itemMainContent' className={styles.bodyText}>
+                주설명 :
+              </label>
+              <input
+                id='itemMainContent'
+                className={styles.mainContentBlank}
+                value={mainContent}
+                readOnly
+              />
+            </div>
+            <div className={styles.subContentWrap}>
+              <label htmlFor='itemSubContent' className={styles.bodyText}>
+                부설명 :
+              </label>
+              <textarea
+                id='itemSubContent'
+                className={styles.subContentBlank}
+                value={subContent}
+                readOnly
+              />
+            </div>
+          </div>
           <div className={styles.checkWrap}>
             {itemId} 번 아이템을 삭제하시겠습니까?
           </div>