Merge branch 'main' into GGFE-164-구매-선물-모달

components/admin/SideNav.tsx

@@ -10,6 +10,9 @@ import {
   GrAnnounce,
 } from 'react-icons/gr';
 import { IoGameControllerOutline } from 'react-icons/io5';
+import { IoReceiptOutline } from 'react-icons/io5';
+import { BsShop } from 'react-icons/bs';
+import { TbCoin } from 'react-icons/tb';
 import styles from 'styles/admin/SideNav.module.scss';
 
 export default function SideNav() {
@@ -80,6 +83,30 @@ export default function SideNav() {
       >
         <TbCalendarTime className={styles.logo} />
       </SideNavContent>
+
+      <SideNavContent
+        url={'/receipt'}
+        menuName={'거래내역 관리'}
+        currentPath={currentPath}
+      >
+        <IoReceiptOutline className={styles.logo} />
+      </SideNavContent>
+
+      <SideNavContent
+        url={'/store'}
+        menuName={'상점 관리'}
+        currentPath={currentPath}
+      >
+        <BsShop className={styles.logo} />
+      </SideNavContent>
+
+      <SideNavContent
+        url={'/coin'}
+        menuName={'재화 정책 관리'}
+        currentPath={currentPath}
+      >
+        <TbCoin className={styles.logo} />
+      </SideNavContent>
     </div>
   );
 }

components/admin/coin/CoinMain.tsx

@@ -0,0 +1,21 @@
+import CoinPolicy from './CoinPolicy';
+import CoinPolicyHistory from './CoinPolicyHistory';
+import styles from 'styles/admin/coin/CoinMain.module.scss';
+
+export default function CoinMain() {
+  return (
+    <div className={styles.mainContainer}>
+      <div className={styles.title}>
+        <h2>재화 정책 관리</h2>
+      </div>
+      <div className={styles.subContainer}>
+        <h4>재화 정책 변경</h4>
+        <CoinPolicy />
+      </div>
+      <div className={styles.subContainer}>
+        <h4>재화 정책 변경 이력</h4>
+        <CoinPolicyHistory />
+      </div>
+    </div>
+  );
+}

components/admin/coin/CoinPolicy.tsx

@@ -0,0 +1,87 @@
+import { useRef } from 'react';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material';
+import styles from 'styles/admin/coin/CoinPolicy.module.scss';
+import { IcoinPolicy } from 'types/admin/adminCoinTypes';
+import { useSetRecoilState } from 'recoil';
+import { modalState } from 'utils/recoil/modal';
+
+const coinPolicyTableTitle: { [key: string]: string } = {
+  attendance: '출석 획득',
+  normal: '일반게임 획득',
+  rankWin: '랭크게임 승리 획득',
+  rankLose: '랭크게임 패배 획득',
+  edit: '정책 변경',
+};
+
+const tableColumnName = ['attendance', 'normal', 'rankWin', 'rankLose', 'edit'];
+
+function CoinPolicy() {
+  // any 타입말고 다른 방식 있으면 적용
+  const inputRef = useRef<any>([]);
+  const setModal = useSetRecoilState(modalState);
+
+  // inputRef 적용
+  const editCoinPolicy = (coinPolicy: IcoinPolicy) => {
+    setModal({
+      modalName: 'ADMIN-COINPOLICY_EDIT',
+      coinPolicy: coinPolicy,
+    });
+  };
+
+  return (
+    <>
+      <TableContainer component={Paper}>
+        <Table aria-label='customized table'>
+          <TableHead>
+            <TableRow>
+              {tableColumnName.map((column, idx) => (
+                <TableCell key={idx}>{coinPolicyTableTitle[column]}</TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              {tableColumnName
+                .slice(0, 4)
+                .map((column: string, index: number) => (
+                  <TableCell key={index}>
+                    <input
+                      key={index}
+                      type='number'
+                      ref={(el) => {
+                        inputRef.current[index] = el;
+                      }}
+                    ></input>
+                  </TableCell>
+                ))}
+              <TableCell>
+                <button
+                  onClick={() => {
+                    editCoinPolicy({
+                      attendance: inputRef.current[0]?.value,
+                      normal: inputRef.current[1]?.value,
+                      rankWin: inputRef.current[2]?.value,
+                      rankLose: inputRef.current[3]?.value,
+                    });
+                  }}
+                >
+                  등록
+                </button>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
+  );
+}
+
+export default CoinPolicy;

components/admin/coin/CoinPolicyHistory.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react';
+import {
+  IcoinPolicyHistory,
+  IcoinPolicyHistoryTable,
+} from 'types/admin/adminCoinTypes';
+import { tableFormat } from 'constants/admin/table';
+import { getFormattedDateToString } from 'utils/handleTime';
+import { useMockAxiosGet } from 'hooks/useAxiosGet';
+import PageNation from 'components/Pagination';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material';
+import styles from 'styles/admin/coin/CoinPolicyHistory.module.scss';
+
+const coinPolicyHistoryTableTitle: { [key: string]: string } = {
+  coinPolicyId: 'ID',
+  createdAt: '등록 날짜',
+  createUser: '등록 유저',
+  attendance: '출석 획득',
+  normal: '일반게임 획득',
+  rankWin: '랭크게임 승리 획득',
+  rankLose: '랭크게임 패배 획득',
+};
+
+const tableColumnName = [
+  'coinPolicyId',
+  'createdAt',
+  'createUser',
+  'attendance',
+  'normal',
+  'rankWin',
+  'rankLose',
+];
+
+function CoinPolicyHistory() {
+  const [coinPolicyHistoryData, setCoinPolicyHistoryData] =
+    useState<IcoinPolicyHistoryTable>({
+      coinPolicyList: [],
+      totalPage: 0,
+      currentPage: 0,
+    });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  // api 연결 시 useCallback, instanceInManage, try catch로 변경
+  const getCoinPolicyHistoryHandler = useMockAxiosGet<any>({
+    url: `/admin/coinpolicy?page=${currentPage}&size=5`,
+    setState: (data) => {
+      setCoinPolicyHistoryData({
+        coinPolicyList: data.coinPolicyList.map(
+          (coinPolicyHistory: IcoinPolicyHistory) => {
+            const { year, month, date, hour, min } = getFormattedDateToString(
+              new Date(coinPolicyHistory.createdAt)
+            );
+            return {
+              ...coinPolicyHistory,
+              createdAt: `${year}-${month}-${date} ${hour}:${min}`,
+            };
+          }
+        ),
+        totalPage: data.totalPage,
+        currentPage: currentPage,
+      });
+    },
+    err: 'HJ08',
+    type: 'setError',
+  });
+
+  useEffect(() => {
+    getCoinPolicyHistoryHandler();
+  }, [currentPage]);
+
+  return (
+    <>
+      <TableContainer component={Paper}>
+        <Table aria-label='customized table'>
+          <TableHead>
+            <TableRow>
+              {tableColumnName.map((column, idx) => (
+                <TableCell key={idx}>
+                  {coinPolicyHistoryTableTitle[column]}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {coinPolicyHistoryData.coinPolicyList.length > 0 ? (
+              coinPolicyHistoryData.coinPolicyList.map(
+                (coinPolicyHistory: IcoinPolicyHistory) => (
+                  <TableRow key={coinPolicyHistory.coinPolicyId}>
+                    {tableFormat['coinPolicyHistory'].columns.map(
+                      (columnName: string, index: number) => {
+                        return (
+                          <TableCell key={index}>
+                            {coinPolicyHistory[
+                              columnName as keyof IcoinPolicyHistory
+                            ].toString()}
+                          </TableCell>
+                        );
+                      }
+                    )}
+                  </TableRow>
+                )
+              )
+            ) : (
+              <TableRow>
+                <TableCell>비어있습니다</TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div>
+        <PageNation
+          curPage={coinPolicyHistoryData.currentPage}
+          totalPages={coinPolicyHistoryData.totalPage}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </>
+  );
+}
+
+export default CoinPolicyHistory;