Merge pull request #1510 from 42organization/Feat/#1456-admin-page-la…

…yout [Feat] admin page #1456
42organization · Aug 30, 2024 · 42e84e0 · 42e84e0
2 parents 80a3f40 + 0136871
commit 42e84e0
Show file tree

Hide file tree

Showing 25 changed files with 699 additions and 254 deletions.
diff --git a/components/admin/agenda/SideNavAgenda.tsx b/components/admin/agenda/SideNavAgenda.tsx
@@ -40,14 +40,6 @@ export default function SideNavParty() {
       >
         <TbMessageReport className={styles.logo} />
       </SideNavContent>
-      <SideNavContent
-        type={'agenda'}
-        url={'ticket'}
-        menuName={'티켓 관리'}
-        currentPath={currentPath}
-      >
-        <TbMessageReport className={styles.logo} />
-      </SideNavContent>
     </>
   );
 }
diff --git a/components/admin/agenda/agendaList/AgendaTable.tsx b/components/admin/agenda/agendaList/AgendaTable.tsx
@@ -85,7 +85,6 @@ export default function AgendaTable({ status, isOfficial }: AgendaTableProps) {
   });
 
   const [currentPage, setCurrentPage] = useState<number>(1);
-  const setSnackBar = useSetRecoilState(toastState);
   const { openModal, closeModal } = useModal();
 
   const buttonList: string[] = [
@@ -165,13 +164,6 @@ export default function AgendaTable({ status, isOfficial }: AgendaTableProps) {
       const getData = await instanceInAgenda.get(
         `/admin/request/list?page=${currentPage}&size=${itemsPerPage}`
       );
-      // setSnackBar({
-      //   toastName: 'GET request',
-      //   message: 'agenda List를 가져오는데 실패했습니다.',
-      //   severity: 'error',
-      //   clicked: true,
-      // });
-
       const filteredAgendaList = getData.data.content.filter(
         (agenda: IAgenda) => {
           const matchesStatus = status ? agenda.agendaStatus === status : true;

diff --git a/components/admin/agenda/teamList/TeamTable.tsx b/components/admin/agenda/teamList/TeamTable.tsx
@@ -11,7 +11,6 @@ import {
   TableContainer,
   TableRow,
 } from '@mui/material';
-import { TeamDetailProps } from 'types/agenda/teamDetail/TeamDetailTypes';
 import { instance } from 'utils/axios';
 import { toastState } from 'utils/recoil/toast';
 import { agendaTableFormat } from 'constants/admin/agendaTable';
@@ -33,6 +32,7 @@ const tableTitle: { [key: string]: string } = {
   teamAward: '상',
   teamAwardPriority: '등수',
   teamStatus: '상태',
+  teamLocation: '위치',
   etc: '기타',
 };
 
@@ -45,6 +45,7 @@ export interface ITeam {
   teamAward: string;
   teamAwardPriority: number;
   teamStatus: string;
+  teamLocation: string;
   coalitions: string[];
 }
 
@@ -72,34 +73,28 @@ export default function TeamTable() {
 
   const buttonList: string[] = [styles.coin, styles.penalty];
 
-  const deleteTeam = async (teamInfo: TeamDetailProps) => {
-    const updateTeam = {
-      teamKey: teamInfo.teamKey,
-      teamName: teamInfo.teamName,
-      teamContent: 'content', // 이후 제거
-      teamStatus: TeamStatus.CANCEL,
-      teamIsPrivate: teamInfo.teamIsPrivate,
-      teamLocation: 'SEOUL', // 이후 제거
-      teamAward: teamInfo.teamAward,
-      teamAwardPriority: teamInfo.teamAwardPriority,
-      teamMates: [{ intraId: 'jihylim' }],
-    };
-    await sendRequest('PATCH', 'admin/team', updateTeam, {}, () => {
-      getTeamList();
-    });
+  const deleteTeam = async (teamKey: string) => {
+    await sendRequest(
+      'PATCH',
+      'admin/team/cancel',
+      {},
+      { team_key: teamKey },
+      () => {
+        getTeamList();
+      }
+    );
   };
 
-  const handleButtonAction = (
-    buttonName: string,
-    teamInfo: TeamDetailProps
-  ) => {
-    const teamKey = teamInfo.teamKey;
+  const handleButtonAction = (buttonName: string, team: ITeam) => {
+    const teamKey = team.teamKey;
     switch (buttonName) {
       case '수정':
-        router.push(`/admin/agenda/teamModify?team_key=${teamKey}`);
+        router.push(
+          `/admin/agenda/teamModify?team_key=${teamKey}&location=${team.teamLocation}`
+        );
         break;
       case '취소':
-        deleteTeam(teamInfo);
+        deleteTeam(teamKey as string);
         break;
     }
   };

diff --git a/components/admin/agenda/ticket/TicketTable.tsx b/components/admin/agenda/ticket/TicketTable.tsx
@@ -1,4 +1,3 @@
-import router, { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
 import {
   Paper,
@@ -8,161 +7,91 @@ import {
   TableContainer,
   TableRow,
 } from '@mui/material';
-// import { instance } from 'utils/axios';
-// import { dateToStringShort } from 'utils/handleTime';
+import { ITicket } from 'types/agenda/ticket/ticketTypes';
+import { instance } from 'utils/axios';
 import { agendaTableFormat } from 'constants/admin/agendaTable';
 import { NoContent } from 'components/admin/agenda/utils';
 import { AdminAgendaTableHead } from 'components/admin/takgu/common/AdminTable';
+import AdminTicketForm from 'components/agenda/Form/AdminTicketForm';
+import { useModal } from 'components/agenda/modal/useModal';
 import PageNation from 'components/Pagination';
-// import useFetchGet from 'hooks/agenda/useFetchGet';
 import styles from 'styles/admin/agenda/agendaList/AgendaTable.module.scss';
-import ticketStyles from 'styles/admin/agenda/TicketTable.module.scss';
 
 const itemsPerPage = 10; // 한 페이지에 보여줄 항목 수
 
-export const mockAgendaList = [
-  {
-    ticketId: 1,
-    createdAt: '2024-08-01',
-    issuedFrom: '대회 1',
-    issuedFromKey: '1',
-    usedTo: '대회 2',
-    usedToKey: '2',
-    isApproved: true,
-    approvedAt: '2024-08-01',
-    isUsed: true,
-    usedAt: '2024-08-01',
-  },
-  {
-    ticketId: 2,
-    createdAt: '2024-08-02',
-    issuedFrom: '대회 2',
-    issuedFromKey: '2',
-    usedTo: '대회 1',
-    usedToKey: '1',
-    isApproved: false,
-    approvedAt: '2024-08-02',
-    isUsed: false,
-    usedAt: '2024-08-02',
-  },
-  {
-    ticketId: 3,
-    createdAt: '2024-08-03',
-    issuedFrom: '대회 3',
-    issuedFromKey: '3',
-    usedTo: '대회 4',
-    usedToKey: '4',
-    isApproved: true,
-    approvedAt: '2024-08-03',
-    isUsed: true,
-    usedAt: '2024-08-03',
-  },
-];
-
 const tableTitle: { [key: string]: string } = {
   ticketId: '티켓 ID',
-  createdAt: '발급 시작 시간',
-  issuedFrom: '발급된 곳',
-  // issuedFromKey: '발급된 곳 키',
+  createdAt: '발급 시간',
+  issuedFrom: '발급처',
   usedTo: '사용처',
-  // usedToKey: '사용처 키',
-  isApproved: '발급 여부',
-  approvedAt: '발급된 시간',
+  isApproved: '승인 여부',
+  approvedAt: '승인 시간',
   isUsed: '사용 여부',
-  usedAt: '사용된 시간',
+  usedAt: '사용 시간',
   etc: '기타',
 };
 
-export interface ITicket {
-  ticketId: number;
-  createdAt: string;
-  issuedFrom: string;
-  issuedFromKey: string;
-  usedTo: string;
-  usedToKey: string;
-  isApproved: boolean;
-  approvedAt: string;
-  isUsed: boolean;
-  usedAt: string;
-}
-
 export interface ITicketTable {
   ticketList: ITicket[];
   totalPage: number;
   currentPage: number;
 }
 
-export default function TicketTable() {
+interface TicketTableProps {
+  intraId: string;
+}
+
+const TicketTable = ({ intraId }: TicketTableProps) => {
   const [ticketInfo, setTicketInfo] = useState<ITicketTable>({
     ticketList: [],
     totalPage: 0,
     currentPage: 0,
   });
   const [currentPage, setCurrentPage] = useState<number>(1);
+  const { openModal, closeModal } = useModal();
 
-  // const modal = useRecoilValue(modalState);
-  const buttonList: string[] = [styles.detail, styles.coin, styles.penalty];
-
-  const handleButtonAction = (buttonName: string) => {
-    switch (buttonName) {
-      case '자세히':
-        // setModal({ modalName: 'ADMIN-PROFILE', intraId });
-        alert('자세히');
-        break;
-      case '대회 수정':
-        // setModal({ modalName: 'ADMIN-PROFILE', intraId });
-        alert('대회 수정');
-        break;
-      case '대회 삭제':
-        // 모달 추가
-        alert('대회 삭제');
-        break;
-    }
-  };
-
-  const handleCellClick = (agedaKey) => {
-    router.push(`/admin/agenda/${agedaKey}`);
+  const handleButtonAction = (ticket: ITicket) => {
+    openModal({
+      type: 'modify',
+      title: '티켓 수정',
+      description: '변경 후 수정 버튼을 눌러주세요.',
+      FormComponent: AdminTicketForm,
+      data: ticket,
+      isAdmin: true,
+      stringKey: intraId,
+      onProceed: () => {
+        closeModal();
+        getTicketList();
+      },
+    });
   };
 
   const getTicketList = useCallback(async () => {
-    try {
-      // const res = await instance.get(`/agenda/admin/request/list`, {
-      //   params: { page: currentPage, size: 10 },
-      // });
-      // const res = await instance.get(
-      //   `/agenda/admin/request/list?page=${currentPage}&size=10`
-      // );
-      const res = mockAgendaList;
-      // const params = {
-      //   page: currentPage,
-      //   size: itemsPerPage,
-      // };
-      // const res = useFetchGet(`/agenda/admin/request/list`, params).data;
-
-      const totalPage = Math.ceil(res.length / itemsPerPage);
-      const paginatedList = res.slice(
-        (currentPage - 1) * itemsPerPage,
-        currentPage * itemsPerPage
-      );
+    const response = await instance.get(
+      `/agenda/admin/ticket/list/${intraId}`,
+      {
+        params: {
+          page: currentPage,
+          size: itemsPerPage,
+        },
+      }
+    );
 
-      setTicketInfo({
-        ticketList: paginatedList,
-        totalPage: totalPage,
-        currentPage: currentPage,
-      });
-    } catch (e) {
-      console.error('MS00');
-    }
-  }, [currentPage]);
+    setTicketInfo({
+      ticketList: response.data.content,
+      totalPage: Math.ceil(response.data.totalSize / itemsPerPage),
+      currentPage: currentPage,
+    });
+  }, [currentPage, intraId]);
 
   useEffect(() => {
     getTicketList();
   }, [getTicketList]);
 
-  const renderApprove = (isApproved: boolean) => {
+  const renderApprove = (isApproved?: boolean) => {
     return isApproved ? '발급완료' : '발급대기';
   };
-  const renderUsed = (isUsed: boolean) => {
+  const renderUsed = (isUsed?: boolean) => {
     return isUsed ? '사용완료' : '사용대기';
   };
 
@@ -180,43 +109,25 @@ export default function TicketTable() {
                 <TableRow key={ticket.ticketId} className={styles.tableRow}>
                   {agendaTableFormat['ticket'].columns.map(
                     (columnName: string, index: number) => {
-                      const isClickable =
-                        columnName === 'issuedFrom' || columnName === 'usedTo';
                       return (
                         <TableCell
-                          className={`${styles.tableBodyItem} ${
-                            isClickable ? ticketStyles.clickableCell : ''
-                          }`}
+                          className={`${styles.tableBodyItem} `}
                           key={index}
-                          onClick={() => {
-                            if (isClickable) {
-                              handleCellClick(
-                                columnName === 'issuedFrom'
-                                  ? ticket.issuedFromKey
-                                  : ticket.usedToKey
-                              );
-                            }
-                          }}
                         >
-                          {columnName === 'isApproved'
-                            ? renderApprove(ticket.isApproved) // 상태 표시
-                            : columnName === 'isUsed'
-                            ? renderUsed(ticket.isUsed) // 사용 여부 표시
-                            : columnName !== 'etc'
-                            ? ticket[columnName as keyof ITicket] // 다른 열의 기본 값 표시
-                            : agendaTableFormat['ticket'].etc?.value.map(
-                                (buttonName: string, index: number) => (
-                                  <button
-                                    key={buttonName}
-                                    className={`${styles.button} ${buttonList[index]}`}
-                                    onClick={() =>
-                                      handleButtonAction(buttonName)
-                                    }
-                                  >
-                                    {buttonName}
-                                  </button>
-                                )
-                              )}
+                          {columnName === 'isApproved' ? (
+                            renderApprove(ticket.isApproved) // 상태 표시
+                          ) : columnName === 'isUsed' ? (
+                            renderUsed(ticket.isUsed) // 사용 여부 표시
+                          ) : columnName !== 'etc' ? (
+                            ticket[columnName as keyof ITicket]
+                          ) : (
+                            <button
+                              className={`${styles.button} ${styles.coin}`}
+                              onClick={() => handleButtonAction(ticket)}
+                            >
+                              수정
+                            </button>
+                          )}
                         </TableCell>
                       );
                     }
@@ -241,4 +152,6 @@ export default function TicketTable() {
       </div>
     </div>
   );
-}
+};
+
+export default TicketTable;