Feat/파티어드민 모달음수처리 css처리 #1320

components/Layout/Layout.tsx

@@ -68,7 +68,8 @@ export default function AppLayout({ children }: AppLayoutProps) {
                 </HeaderStateContext>
                 {presentPath !== '/match' &&
                   presentPath !== '/manual' &&
-                  presentPath !== '/store' && (
+                  presentPath !== '/store' &&
+                  !presentPath.startsWith('/party') && (
                     <div className={styles.buttonContainer}>
                       <div className={styles.buttonWrapper}>
                         <StyledButton onClick={onClickMatch} width={'5.5rem'}>

components/admin/SideNav.tsx

@@ -9,7 +9,13 @@ import {
 } from 'react-icons/gr';
 import { IoGameControllerOutline, IoReceiptOutline } from 'react-icons/io5';
 import { MdOutlineMessage } from 'react-icons/md';
-import { TbCalendarTime, TbCoin, TbPaperBag, TbTrophy } from 'react-icons/tb';
+import {
+  TbCalendarTime,
+  TbCoin,
+  TbPaperBag,
+  TbTrophy,
+  TbNote,
+} from 'react-icons/tb';
 import SideNavContent from 'components/admin/SideNavContent';
 import styles from 'styles/admin/SideNav.module.scss';
 
@@ -121,6 +127,14 @@ export default function SideNav() {
       >
         <TbTrophy className={styles.logo} />
       </SideNavContent>
+
+      <SideNavContent
+        url={'/party'}
+        menuName={'파티관리'}
+        currentPath={currentPath}
+      >
+        <TbNote className={styles.logo} />
+      </SideNavContent>
     </div>
   );
 }

components/admin/party/AdminCommentReport.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { PartyCommentReport, PartyCommentReportTable } from 'types/partyTypes';
+import { instanceInPartyManage } from 'utils/axios';
+import { toastState } from 'utils/recoil/toast';
+import { tableFormat } from 'constants/admin/table';
+import {
+  AdminEmptyItem,
+  AdminTableHead,
+} from 'components/admin/common/AdminTable';
+import PageNation from 'components/Pagination';
+import styles from 'styles/admin/Party/AdminPartyCommon.module.scss';
+
+const tableTitle: { [key: string]: string } = {
+  id: '번호',
+  reporterIntraId: '신고자 이름',
+  commentsId: '댓글 번호',
+  roomId: '방',
+  message: '메세지',
+  createdAt: '시간',
+};
+
+export default function AdminCommentReport() {
+  const [commentInfo, setCommentInfo] = useState<PartyCommentReportTable>({
+    commentReportList: [],
+    totalPage: 0,
+    currentPage: 0,
+  });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const setSnackBar = useSetRecoilState(toastState);
+
+  useEffect(() => {
+    instanceInPartyManage
+      .get(`/reports/comments?page=${currentPage}&size=10`)
+      .then((res) => {
+        setCommentInfo({
+          commentReportList: res.data.commentReportList,
+          totalPage: res.data.totalPage,
+          currentPage: currentPage,
+        });
+      })
+      .catch((error) => {
+        setSnackBar({
+          toastName: 'GET request',
+          message: '댓글신고를 가져오는데 실패했습니다.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  }, [currentPage]);
+
+  return (
+    <div className={styles.AdminTableWrap}>
+      <div className={styles.header}>
+        <span className={styles.title}>댓글 신고리스트</span>
+      </div>
+      <TableContainer className={styles.tableContainer} component={Paper}>
+        <Table className={styles.table} aria-label='UserManagementTable'>
+          <AdminTableHead tableName={'partyCommentReport'} table={tableTitle} />
+          <TableBody className={styles.tableBody}>
+            {commentInfo.commentReportList &&
+            commentInfo.commentReportList.length > 0 ? (
+              commentInfo.commentReportList.map(
+                (report: PartyCommentReport, index: number) => (
+                  <TableRow key={index}>
+                    {tableFormat['partyCommentReport'].columns.map(
+                      (columnName) => {
+                        return (
+                          <TableCell
+                            key={columnName}
+                            className={styles.tableBodyItem}
+                          >
+                            {report[
+                              columnName as keyof PartyCommentReport
+                            ]?.toString()}
+                          </TableCell>
+                        );
+                      }
+                    )}
+                  </TableRow>
+                )
+              )
+            ) : (
+              <AdminEmptyItem content={'패널티 기록이 비어있습니다'} />
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pageNationContainer}>
+        <PageNation
+          curPage={commentInfo.currentPage}
+          totalPages={commentInfo.totalPage}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

components/admin/party/AdminPartyNoShow.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { PartyNoshowReport, PartyNoshowReportTable } from 'types/partyTypes';
+import { instanceInPartyManage } from 'utils/axios';
+import { toastState } from 'utils/recoil/toast';
+import { tableFormat } from 'constants/admin/table';
+import {
+  AdminEmptyItem,
+  AdminTableHead,
+} from 'components/admin/common/AdminTable';
+import PageNation from 'components/Pagination';
+import styles from 'styles/admin/Party/AdminPartyCommon.module.scss';
+
+const tableTitle: { [key: string]: string } = {
+  id: '번호',
+  reporterIntraId: '신고자 이름',
+  reporteeIntraId: '피신고자 이름',
+  roomId: '방',
+  message: '메세지',
+  createdAt: '시간',
+};
+
+export default function AdminPartyNoShow() {
+  const [noShowInfo, setNoShowInfo] = useState<PartyNoshowReportTable>({
+    noShowReportList: [],
+    totalPages: 0,
+    currentPage: 0,
+  });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const setSnackBar = useSetRecoilState(toastState);
+
+  useEffect(() => {
+    instanceInPartyManage
+      .get(`/reports/users?page=${currentPage}&size=10`)
+      .then((res) => {
+        setNoShowInfo({
+          noShowReportList: res.data.noShowReportList,
+          totalPages: res.data.totalPage,
+          currentPage: currentPage,
+        });
+      })
+      .catch((error) => {
+        setSnackBar({
+          toastName: 'GET request',
+          message: '댓글신고를 가져오는데 실패했습니다.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  }, [currentPage]);
+
+  return (
+    <div className={styles.AdminTableWrap}>
+      <div className={styles.header}>
+        <span className={styles.title}>노쇼 신고리스트</span>
+      </div>
+      <TableContainer className={styles.tableContainer} component={Paper}>
+        <Table className={styles.table} aria-label='UserManagementTable'>
+          <AdminTableHead tableName={'partyNoshowReport'} table={tableTitle} />
+          <TableBody className={styles.tableBody}>
+            {noShowInfo.noShowReportList &&
+            noShowInfo.noShowReportList.length > 0 ? (
+              noShowInfo.noShowReportList.map(
+                (report: PartyNoshowReport, index: number) => (
+                  <TableRow key={index}>
+                    {tableFormat['partyNoshowReport'].columns.map(
+                      (columnName) => {
+                        return (
+                          <TableCell
+                            key={columnName}
+                            className={styles.tableBodyItem}
+                          >
+                            {report[
+                              columnName as keyof PartyNoshowReport
+                            ]?.toString()}
+                          </TableCell>
+                        );
+                      }
+                    )}
+                  </TableRow>
+                )
+              )
+            ) : (
+              <AdminEmptyItem content={'패널티 기록이 비어있습니다'} />
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pageNationContainer}>
+        <PageNation
+          curPage={noShowInfo.currentPage}
+          totalPages={noShowInfo.totalPages}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

components/admin/party/AdminPartyPenalty.tsx

@@ -0,0 +1,133 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { PartyPenaltyAdmin, PartyPenaltyTable } from 'types/partyTypes';
+import { instanceInPartyManage } from 'utils/axios';
+import { modalState } from 'utils/recoil/modal';
+import { toastState } from 'utils/recoil/toast';
+import { tableFormat } from 'constants/admin/table';
+import {
+  AdminEmptyItem,
+  AdminTableHead,
+} from 'components/admin/common/AdminTable';
+import PageNation from 'components/Pagination';
+import styles from 'styles/admin/Party/AdminPartyCommon.module.scss';
+
+const tableTitle: { [key: string]: string } = {
+  id: '번호',
+  userIntraId: '유저',
+  penaltyType: '패널티 타입',
+  message: '내용',
+  startTime: '시작 시간',
+  penaltyTime: '패널티 시간',
+  edit: '수정',
+};
+
+export default function AdminCommentReport() {
+  const [penaltyInfo, setPenaltyInfo] = useState<PartyPenaltyTable>({
+    penaltyList: [],
+    totalPage: 0,
+    currentPage: 0,
+  });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const setModal = useSetRecoilState(modalState);
+  const setSnackBar = useSetRecoilState(toastState);
+
+  useEffect(() => {
+    instanceInPartyManage
+      .get(`/penalties?page=${currentPage}&size=10`)
+      .then((res) => {
+        setPenaltyInfo({
+          penaltyList: res.data.penaltyList,
+          totalPage: res.data.totalPage,
+          currentPage: currentPage,
+        });
+      })
+      .catch((error) => {
+        setSnackBar({
+          toastName: 'GET request',
+          message: '댓글신고를 가져오는데 실패했습니다.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  }, [currentPage]);
+
+  const handleAddpenalty = () => {
+    setModal({ modalName: 'ADMIN-PARTY_ADMIN_PENALTY' });
+  };
+
+  const handleEditpenalty = (partyPenalty?: PartyPenaltyAdmin) => {
+    setModal({ modalName: 'ADMIN-PARTY_ADMIN_PENALTY', partyPenalty });
+  };
+
+  return (
+    <div className={styles.AdminTableWrap}>
+      <div className={styles.header}>
+        <span className={styles.title}>패널티 리스트</span>
+      </div>
+      <button
+        onClick={handleAddpenalty}
+        className={`${styles.button_1} ${styles.add}`}
+      >
+        추가
+      </button>
+      <TableContainer component={Paper} className={styles.tableContainer}>
+        <Table aria-label='UserManagementTable' className={styles.table}>
+          <AdminTableHead tableName={'partyPenaltyAdmin'} table={tableTitle} />
+          <TableBody className={styles.tableBody}>
+            {penaltyInfo.penaltyList && penaltyInfo.penaltyList.length > 0 ? (
+              penaltyInfo.penaltyList.map(
+                (penalty: PartyPenaltyAdmin, index: number) => (
+                  <TableRow key={index}>
+                    {tableFormat['partyPenaltyAdmin'].columns.map(
+                      (columnName) => {
+                        return (
+                          <TableCell
+                            key={columnName}
+                            className={styles.tableBodyItem}
+                          >
+                            {columnName === 'edit' ? (
+                              <button
+                                onClick={() => handleEditpenalty(penalty)}
+                                className={`${styles.button_1} ${styles.add}`}
+                              >
+                                수정
+                              </button>
+                            ) : (
+                              penalty[
+                                columnName as keyof PartyPenaltyAdmin
+                              ]?.toString()
+                            )}
+                          </TableCell>
+                        );
+                      }
+                    )}
+                  </TableRow>
+                )
+              )
+            ) : (
+              <AdminEmptyItem content={'패널티 기록이 비어있습니다'} />
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pageNationContainer}>
+        <PageNation
+          curPage={penaltyInfo.currentPage}
+          totalPages={penaltyInfo.totalPage}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </div>
+  );
+}