Feat/관리자 토너먼트 페이지 레이아웃#1075

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, TbPaperBag } from 'react-icons/tb';
+import { TbCalendarTime, TbCoin, TbPaperBag, TbTrophy } from 'react-icons/tb';
 import SideNavContent from 'components/admin/SideNavContent';
 import styles from 'styles/admin/SideNav.module.scss';
 
@@ -113,6 +113,14 @@ export default function SideNav() {
       >
         <TbCoin className={styles.logo} />
       </SideNavContent>
+
+      <SideNavContent
+        url={'/tournament'}
+        menuName={'토너먼트 관리'}
+        currentPath={currentPath}
+      >
+        <TbTrophy className={styles.logo} />
+      </SideNavContent>
     </div>
   );
 }

components/admin/tournament/TournamentEdit.tsx

@@ -0,0 +1,193 @@
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { QUILL_EDIT_MODULES, QUILL_FORMATS } from 'types/quillTypes';
+import { toastState } from 'utils/recoil/toast';
+import { useUser } from 'hooks/Layout/useUser';
+import styles from 'styles/admin/announcement/AnnounceEdit.module.scss';
+import 'react-quill/dist/quill.snow.css';
+import 'react-quill/dist/quill.bubble.css';
+import { AdminTableHead } from '../common/AdminTable';
+
+const Quill = dynamic(() => import('react-quill'), {
+  ssr: false,
+  loading: () => <p>Loading ...</p>,
+});
+
+const tableTitle: { [key: string]: string } = {
+  tournamentName: '토너먼트 이름',
+  startTime: '시작 시간',
+  endTime: '종료 시간',
+  tournamentType: '토너먼트 유형',
+};
+
+export default function TournamentEdit() {
+  const user = useUser();
+  const setSnackbar = useSetRecoilState(toastState);
+  const [content, setContent] = useState('');
+  const announceCreateResponse: { [key: string]: string } = {
+    SUCCESS: '공지사항이 성공적으로 등록되었습니다.',
+    AN300:
+      '이미 활성화된 공지사항이 있습니다. 새로운 공지사항을 등록하시려면 활성화된 공지사항을 삭제해 주세요.',
+  };
+  const announceDeleteResponse: { [key: string]: string } = {
+    SUCCESS: '공지사항이 성공적으로 삭제되었습니다.',
+    AN100: '삭제 할 활성화된 공지사항이 없습니다.',
+  };
+
+  useEffect(() => {
+    resetHandler();
+  }, []);
+
+  const resetHandler = async () => {
+    try {
+      //const res = await instance.get('/pingpong/announcement');
+      setContent('가장 최근 토너먼트 내용'); //setContent(res?.data.content);
+    } catch (e) {
+      alert(e);
+    }
+  };
+
+  if (!user) return null;
+
+  const currentUserId = user.intraId;
+
+  const postHandler = async () => {
+    // try {
+    //   await instanceInManage.post(`/announcement`, {
+    //     content,
+    //     creatorIntraId: currentUserId,
+    //   });
+    //   setSnackbar({
+    //     toastName: `post request`,
+    //     severity: 'success',
+    //     message: `🔥 ${announceCreateResponse.SUCCESS} 🔥`,
+    //     clicked: true,
+    //   });
+    // } catch (e: any) {
+    //   setSnackbar({
+    //     toastName: `bad request`,
+    //     severity: 'error',
+    //     message: `🔥 ${announceCreateResponse[e.response.data.code]} 🔥`,
+    //     clicked: true,
+    //   });
+    // }
+  };
+
+  const deleteHandler = async () => {
+    // try {
+    //   await instanceInManage.delete(`/announcement/${currentUserId}`);
+    //   setSnackbar({
+    //     toastName: `delete request`,
+    //     severity: 'success',
+    //     message: `🔥 ${announceDeleteResponse.SUCCESS} 🔥`,
+    //     clicked: true,
+    //   });
+    // } catch (e: any) {
+    //   setSnackbar({
+    //     toastName: `bad request`,
+    //     severity: 'error',
+    //     message: `🔥 ${announceDeleteResponse[e.response.data.code]} 🔥`,
+    //     clicked: true,
+    //   });
+    // }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.announceModal}>
+        <h1>추후 토너먼트 페이지 모달 완성시 추가 예정</h1>
+        {/* {content ? (
+          <div className={styles.announceModalContainer}>
+            <div className={styles.modalTitle}>Notice!</div>
+            <Quill
+              className={styles.quillViewer}
+              readOnly={true}
+              formats={QUILL_FORMATS}
+              value={content}
+              theme='bubble'
+            />
+            <div className={styles.checkBox}>
+              <input type='checkbox' id='neverSeeAgain' name='neverSeeAgain' />
+              <label htmlFor='neverSeeAgain'>
+                <div>하루 동안 열지 않기</div>
+              </label>
+            </div>
+            <div className={styles.buttons}>
+              <div className={styles.positive}>
+                <input type='button' value='닫기' />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className={styles.noActive}>활성화된 공지사항이 없습니다 !</div>
+        )} */}
+      </div>
+      <div className={styles.editorContainer}>
+        <TableContainer className={styles.tableContainer} component={Paper}>
+          <Table className={styles.table} aria-label='customized table'>
+            <AdminTableHead tableName={'tournamentCreate'} table={tableTitle} />
+            <TableBody className={styles.tableBody}>
+              <TableRow>
+                <TableCell className={styles.tableBodyItem}>
+                  <input
+                    type='text'
+                    name='tournamentName'
+                    // onChange={inputChangeHandler}
+                  />
+                </TableCell>
+                <TableCell className={styles.tableBodyItem}>
+                  <input
+                    type='datetime-local'
+                    name='startTime'
+                    // onChange={inputChangeHandler}
+                  />
+                </TableCell>
+                <TableCell className={styles.tableBodyItem}>
+                  <input
+                    type='datetime-local'
+                    name='endTime'
+                    // onChange={inputChangeHandler}
+                  />
+                </TableCell>
+                <TableCell className={styles.tableBodyItem}>
+                  <select
+                    name='tournamentType'
+                    // value={selectedValue}
+                    // onChange={handleSelectChange}
+                  >
+                    <option value='CUSTOM'>CUSTOM</option>
+                    <option value='ROOKIE'>ROOKIE</option>
+                    <option value='MASTER'>MASTER</option>
+                    {/* You can add more options here */}
+                  </select>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <Quill
+          className={styles.quillEditor}
+          modules={QUILL_EDIT_MODULES}
+          formats={QUILL_FORMATS}
+          theme='snow'
+          value={content}
+          onChange={(content) => setContent(content)}
+        />
+        <div className={styles.editorBtnContainer}>
+          <button onClick={resetHandler}>초기화</button>
+          <button onClick={postHandler}>생성</button>
+          <button onClick={deleteHandler}>토너먼트 삭제</button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/admin/tournament/TournamentList.tsx

@@ -0,0 +1,136 @@
+import dynamic from 'next/dynamic';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import {
+  ITournament,
+  ITournamentTable,
+} from 'types/admin/adminTournamentTypes';
+import { tableFormat } from 'constants/admin/table';
+import {
+  AdminEmptyItem,
+  AdminTableHead,
+} from 'components/admin/common/AdminTable';
+import PageNation from 'components/Pagination';
+import styles from 'styles/admin/announcement/AnnounceList.module.scss';
+import 'react-quill/dist/quill.snow.css';
+import 'react-quill/dist/quill.bubble.css';
+
+const Quill = dynamic(() => import('react-quill'), {
+  ssr: false,
+  loading: () => <p>Loading ...</p>,
+});
+
+const tableTitle: { [key: string]: string } = {
+  tournamentName: '토너먼트 이름',
+  startTime: '시작 시간',
+  endTime: '종료 시간',
+  tournamentType: '토너먼트 타입',
+  edit: '수정하기',
+};
+
+const smapleTournamentList: ITournament[] = Array.from({ length: 10 }, () => ({
+  tournamentName: '샘플토너먼트제목',
+  content: '샘플내용',
+  startTime: new Date(),
+  endTime: new Date(),
+  tournamentType: 'CUSTOM',
+}));
+
+export default function TournamentList() {
+  const [tournamentInfo, setTournamentInfo] = useState<ITournamentTable>({
+    tournamentList: [],
+    totalPage: 0,
+    currentPage: 0,
+  });
+
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const getTournaments = useCallback(async () => {
+    try {
+      // const res = await instanceInManage.get(
+      //   `/announcement?page=${currentPage}&size=3`
+      // );
+      setTournamentInfo({
+        tournamentList: smapleTournamentList, //res.data.tournamentList,
+        totalPage: 10, //res.data.totalPage,
+        currentPage: currentPage,
+      });
+    } catch (e) {
+      console.error('MS01');
+    }
+  }, [currentPage]);
+
+  useEffect(() => {
+    getTournaments();
+  }, [getTournaments]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <span className={styles.title}>토너먼트 리스트</span>
+      </div>
+      <TableContainer className={styles.tableContainer} component={Paper}>
+        <Table className={styles.table} aria-label='customized table'>
+          <AdminTableHead tableName={'tournament'} table={tableTitle} />
+          <TableBody className={styles.tableBody}>
+            {tournamentInfo.tournamentList.length > 0 ? (
+              tournamentInfo.tournamentList.map(
+                (tournament: ITournament, index: number) => (
+                  <TableRow key={index}>
+                    {tableFormat['tournament'].columns.map(
+                      (columnName: string, index: number) => {
+                        return (
+                          <TableCell
+                            className={styles.tableBodyItem}
+                            key={index}
+                          >
+                            {columnName === 'startTime' ||
+                            columnName === 'endTime'
+                              ? tournament[
+                                  columnName as keyof ITournament
+                                ]?.toLocaleString()
+                              : tournament[
+                                  columnName as keyof ITournament
+                                ]?.toString()}
+                          </TableCell>
+                        );
+                      }
+                    )}
+                    <TableCell>
+                      <div>
+                        <button
+                          className={styles.editBtn}
+                          // onClick={() => deleteHandler(seasonL.seasonId)}
+                        >
+                          삭제
+                        </button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                )
+              )
+            ) : (
+              <AdminEmptyItem content={'기존 토너먼트가 없습니다'} />
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pageNationContainer}>
+        <PageNation
+          curPage={tournamentInfo.currentPage}
+          totalPages={tournamentInfo.totalPage}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

constants/admin/table.ts

@@ -150,4 +150,19 @@ export const tableFormat: TableFormat = {
       'rankLose',
     ],
   },
+  tournament: {
+    name: '토너먼트',
+    columns: [
+      'tournamentName',
+      'content',
+      'startTime',
+      'endTime',
+      'tournamentType',
+      'edit',
+    ],
+  },
+  tournamentCreate: {
+    name: '토너먼트 생성',
+    columns: ['tournamentName', 'startTime', 'endTime', 'tournamentType'],
+  },
 };

pages/admin/tournament.tsx

@@ -0,0 +1,12 @@
+import TournamentEdit from 'components/admin/tournament/TournamentEdit';
+import TournamentList from 'components/admin/tournament/TournamentList';
+import styles from 'styles/admin/announcement/Announcement.module.scss';
+
+export default function Tournament() {
+  return (
+    <div className={styles.container}>
+      <TournamentEdit />
+      <TournamentList />
+    </div>
+  );
+}