Merge branch 'main' into GGFE-222-글씨색-수정-api-연결

42organization · Sep 6, 2023 · 2a12017 · 2a12017
2 parents bcbc6c6 + 6ee472b
commit 2a12017
Show file tree

Hide file tree

Showing 53 changed files with 948 additions and 404 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,6 +1,7 @@
 import type { StorybookConfig } from '@storybook/nextjs';
 const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../public'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

diff --git a/components/admin/SideNav.tsx b/components/admin/SideNav.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-icons/gr';
 import { IoGameControllerOutline, IoReceiptOutline } from 'react-icons/io5';
 import { MdOutlineMessage } from 'react-icons/md';
-import { TbCalendarTime, TbCoin } from 'react-icons/tb';
+import { TbCalendarTime, TbCoin, TbPaperBag } from 'react-icons/tb';
 import SideNavContent from 'components/admin/SideNavContent';
 import styles from 'styles/admin/SideNav.module.scss';
 
@@ -84,12 +84,20 @@ export default function SideNav() {
 
       <SideNavContent
         url={'/receipt'}
-        menuName={'거래내역 관리'}
+        menuName={'구매내역 관리'}
         currentPath={currentPath}
       >
         <IoReceiptOutline className={styles.logo} />
       </SideNavContent>
 
+      <SideNavContent
+        url={'/usageHistory'}
+        menuName={'사용내역 관리'}
+        currentPath={currentPath}
+      >
+        <TbPaperBag className={styles.logo} />
+      </SideNavContent>
+
       <SideNavContent
         url={'/store'}
         menuName={'상점 관리'}

diff --git a/components/admin/common/AdminTable.tsx b/components/admin/common/AdminTable.tsx
@@ -39,19 +39,19 @@ export function AdminEmptyItem({ content }: IAdminEmpty) {
 interface IAdminDetailContent {
   content: string;
   maxLen: number;
-  detailTitle: string;
-  detailContent: string;
+  detailTitle?: string;
+  detailContent?: string;
 }
 
 export function AdminContent({
   content,
   maxLen,
-  detailTitle,
-  detailContent,
+  detailTitle = '',
+  detailContent = '',
 }: IAdminDetailContent) {
   const setModal = useSetRecoilState(modalState);
 
-  return content?.length > maxLen ? (
+  return content?.length > maxLen && detailTitle && detailContent ? (
     <div>
       {(content?.toString() || '').slice(0, maxLen)}
       <span

diff --git a/components/admin/receipt/ReceiptList.tsx b/components/admin/receipt/ReceiptList.tsx
@@ -9,8 +9,8 @@ import {
   TableRow,
 } from '@mui/material';
 import { Ireceipt, IreceiptTable } from 'types/admin/adminReceiptType';
+import { instanceInManage } from 'utils/axios';
 import { dateToStringShort } from 'utils/handleTime';
-import { mockInstance } from 'utils/mockAxios';
 import { toastState } from 'utils/recoil/toast';
 import { tableFormat } from 'constants/admin/table';
 import AdminSearchBar from 'components/admin/common/AdminSearchBar';
@@ -26,9 +26,9 @@ const tableTitle: { [key: string]: string } = {
   createdAt: '구매 시간',
   itemName: '아이템 이름',
   itemPrice: '구매 가격',
-  purchaserIntra: '구매자',
-  ownerIntra: '수령자',
-  itemStatus: '상태',
+  purchaserIntraId: '구매자',
+  ownerIntraId: '수령자',
+  itemStatusType: '상태',
 };
 
 function ReceiptList() {
@@ -41,16 +41,15 @@ function ReceiptList() {
   const [intraId, setIntraId] = useState<string>('');
   const setSnackBar = useSetRecoilState(toastState);
 
-  // 특정 유저 확성기 사용내역만 가져오는 api 추가되면 handler 추가 + 유저 검색 컴포넌트 추가
   const initSearch = useCallback((intraId?: string) => {
     setIntraId(intraId || '');
     setCurrentPage(1);
   }, []);
 
   const getUserReceiptHandler = useCallback(async () => {
     try {
-      const res = await mockInstance.get(
-        `/admin/receipt/?intraId=${intraId}&page=${currentPage}&size=10`
+      const res = await instanceInManage.get(
+        `/receipt?intraId=${intraId}&page=${currentPage}&size=10`
       );
       setReceiptData({
         receiptList: res.data.receiptList.map((receipt: Ireceipt) => {
@@ -72,11 +71,10 @@ function ReceiptList() {
     }
   }, [intraId, currentPage]);
 
-  // instanceInManage로 변경
   const getAllReceiptHandler = useCallback(async () => {
     try {
-      const res = await mockInstance.get(
-        `/admin/receipt/?page=${currentPage}&size=10`
+      const res = await instanceInManage.get(
+        `/receipt?&page=${currentPage}&size=10`
       );
       setReceiptData({
         receiptList: res.data.receiptList.map((receipt: Ireceipt) => {
@@ -103,8 +101,9 @@ function ReceiptList() {
   }, [intraId, getUserReceiptHandler, getAllReceiptHandler]);
 
   return (
-    <>
-      <div className={styles.searchWrap}>
+    <div className={styles.receiptListWrap}>
+      <div className={styles.header}>
+        <span className={styles.title}>구매내역 관리</span>
         <AdminSearchBar initSearch={initSearch} />
       </div>
       <TableContainer className={styles.tableContainer} component={Paper}>
@@ -140,7 +139,7 @@ function ReceiptList() {
           }}
         />
       </div>
-    </>
+    </div>
   );
 }
 

diff --git a/components/admin/store/ItemList.tsx b/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,26 @@ function ItemList() {
                       <TableCell className={styles.tableBodyItem} key={index}>
                         {columnName === 'imageUri' ? (
                           <Image
-                            src={item[columnName]}
+                            src={
+                              item.imageUri
+                                ? item[columnName]
+                                : '/public/image/fallBackSrc.jpeg'
+                            }
                             alt='Item Iamge'
                             width={30}
                             height={30}
                           />
+                        ) : columnName === 'content' ? (
+                          <div>
+                            {item.mainContent}
+                            <br />
+                            <span
+                              style={{ cursor: 'pointer', color: 'grey' }}
+                              onClick={() => openDetailModal(item)}
+                            >
+                              ...더보기
+                            </span>
+                          </div>
                         ) : columnName === 'edit' ? (
                           <button
                             className={styles.editBtn}
@@ -109,13 +128,24 @@ function ItemList() {
                           >
                             삭제
                           </button>
+                        ) : columnName === 'content' ? (
+                          <div>
+                            {item.mainContent}
+                            <span
+                              style={{ cursor: 'pointer', color: 'grey' }}
+                              onClick={() =>
+                                setModal({
+                                  modalName: 'ADMIN-DETAIL_CONTENT',
+                                  detailTitle: item.mainContent,
+                                  detailContent: item.subContent,
+                                })
+                              }
+                            >
+                              ...더보기
+                            </span>
+                          </div>
                         ) : (
-                          <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>
                     );

diff --git a/components/admin/store/itemHistory.tsx b/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';
@@ -25,7 +25,7 @@ import styles from 'styles/admin/store/ItemHistory.module.scss';
 const tableTitle: { [key: string]: string } = {
   itemId: 'ID',
   createdAt: '변경 시간',
-  itemName: '이름',
+  name: '이름',
   content: '설명',
   imageUri: '이미지',
   price: '원가',
@@ -35,8 +35,6 @@ const tableTitle: { [key: string]: string } = {
   visible: '상점 노출',
 };
 
-const MAX_CONTENT_LENGTH = 16;
-
 function ItemHistory() {
   const [itemHistoryData, setItemHistoryData] = useState<IitemHistoryList>({
     itemHistoryList: [],
@@ -45,15 +43,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 +72,14 @@ function ItemHistory() {
     }
   }, [currentPage]);
 
+  const openDetailModal = (itemHistory: IitemHistory) => {
+    setModal({
+      modalName: 'ADMIN-DETAIL_CONTENT',
+      detailTitle: itemHistory.mainContent,
+      detailContent: itemHistory.subContent,
+    });
+  };
+
   useEffect(() => {
     getItemHistoryListHandler();
   }, [currentPage]);
@@ -100,20 +106,30 @@ function ItemHistory() {
                           >
                             {columnName === 'imageUri' ? (
                               <Image
-                                src={itemHistory[columnName]}
+                                src={
+                                  itemHistory.imageUri
+                                    ? itemHistory[columnName]
+                                    : '/public/image/fallBackSrc.jpeg'
+                                }
                                 width={30}
                                 height={30}
                                 alt='no'
                               />
+                            ) : columnName === 'content' ? (
+                              <div>
+                                {itemHistory.mainContent}
+                                <br />
+                                <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>
                         );