Merge pull request #174 from softeerbootcamp4th/fix/#154/code

Fix/#154/code
softeerbootcamp4th · Aug 24, 2024 · ff3ea49 · ff3ea49
2 parents 5b4a44d + d61360c
commit ff3ea49
Show file tree

Hide file tree

Showing 30 changed files with 498 additions and 391 deletions.
diff --git a/.github/workflows/admin-cicd.yml b/.github/workflows/admin-cicd.yml
@@ -1,4 +1,4 @@
-name: Deploy to S3 and CloudFront
+name: admin Deploy to S3 and CloudFront
 
 on:
   push:

diff --git a/.github/workflows/service-cicd.yml b/.github/workflows/service-cicd.yml
@@ -1,4 +1,4 @@
-name: Deploy to S3 and CloudFront
+name: admin Deploy to S3 and CloudFront
 
 on:
   push:

diff --git a/admin/src/components/header/AdminHeader.jsx b/admin/src/components/header/AdminHeader.jsx
@@ -15,70 +15,80 @@ function AdminHeader() {
   const [isPreviousDayDisabled, setIsPreviousDayDisabled] = useState(false);
   const [selectedDate, setSelectedDate] = useState('');
 
-  useEffect(() => {
+  const checkAuthorization = () => {
     const token = sessionStorage.getItem('userInfo');
-    if (token) {
-      try {
-        const decodedToken = jwtDecode(token);
+    if (!token) {
+      navigate('/login');
+      return;
+    }
 
-        if (decodedToken && decodedToken.role === 'ADMIN') {
-          // Do Nothing
-        } else {
-          navigate('/error');
-        }
-      } catch (error) {
-        console.error(error);
+    try {
+      const decodedToken = jwtDecode(token);
+      if (decodedToken?.role !== 'ADMIN') {
         navigate('/error');
       }
-    } else {
-      navigate('/login');
+    } catch (error) {
+      navigate('/error');
     }
-  }, []);
+  };
 
   useEffect(() => {
-    const getDate = async () => {
+    checkAuthorization();
+  }, []);
+
+  const fetchEventSchedules = async () => {
+    try {
       const response = await getEventSchedules();
       if (response.code === 'UNAUTHORIZED') {
         navigate('/error');
-      } else {
-        const startDate = new Date(response[0].date);
-        const finishDate = new Date(response[13].date);
-        const currentDate = new Date(dateInfo);
-        setIsPreviousDayDisabled(currentDate.getTime() === startDate.getTime());
-        setIsNextDayDisabled(currentDate.getTime() === finishDate.getTime());
+        return;
       }
-    };
-    getDate();
-  }, [dateInfo]);
 
-  const handleDateChange = event => {
-    setSelectedDate(event.target.value);
+      const startDate = new Date(response[0]?.date);
+      const finishDate = new Date(response[response.length - 1]?.date);
+      const currentDate = new Date(dateInfo);
+
+      setIsPreviousDayDisabled(currentDate.getTime() === startDate.getTime());
+      setIsNextDayDisabled(currentDate.getTime() === finishDate.getTime());
+    } catch (error) {
+      navigate('/error');
+    }
+  };
+
+  useEffect(() => {
+    fetchEventSchedules();
+  }, []);
+
+  const handleDateChange = event => setSelectedDate(event.target.value);
+
+  const navigateToDate = newDate => {
+    const [, , tabName] = location.pathname.split('/');
+    const newPath = `/${dateFormatting(newDate)}${tabName ? `/${tabName}` : ''}`;
+    navigate(newPath);
   };
 
   const handlePreviousDay = () => {
     if (!isPreviousDayDisabled) {
       const previousDay = new Date(dateInfo);
       previousDay.setDate(previousDay.getDate() - 1);
-      const [, , tabName] = location.pathname.split('/');
-      navigate(
-        `/${dateFormatting(previousDay)}${tabName !== undefined ? `/${tabName}` : ''}`,
-      );
+      navigateToDate(previousDay);
     }
   };
 
   const handleNextDay = () => {
     if (!isNextDayDisabled) {
       const nextDay = new Date(dateInfo);
       nextDay.setDate(nextDay.getDate() + 1);
-      const [, , tabName] = location.pathname.split('/');
-      navigate(
-        `/${dateFormatting(nextDay)}${tabName !== undefined ? `/${tabName}` : ''}`,
-      );
+      navigateToDate(nextDay);
     }
   };
 
-  const handleSubmit = () => {
-    putEventSchedules(selectedDate);
+  const handleSubmit = async () => {
+    try {
+      await putEventSchedules(selectedDate);
+    } catch (error) {
+      console.error(error);
+    }
   };
 
   return (

diff --git a/admin/src/pages/AdminEventStatus/EntryTable.jsx b/admin/src/pages/AdminEventStatus/EntryTable.jsx
@@ -1,39 +1,82 @@
 import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
 import EntryRow from '@/pages/AdminEventStatus/EntryRow';
 import RadioButton from '@/pages/AdminEventStatus/RadioButton';
 import PageButton from '@/pages/AdminEventStatus/PageButton';
 import { getDrawHistory } from '@/api/AdminEventStatus';
 
+const RADIO_BUTTON_VALUES = [10, 30, 50]; //버튼의 경우의 수가 3개라 상수로 선언
+
+const EntryHeader = ({ totalRows, rowsPerPage, handleRowsPerPageChange }) => (
+  <div className="flex justify-between py-400">
+    <div className="text-body-3-regular">전체 {totalRows}</div>
+    <div className="flex gap-6">
+      {RADIO_BUTTON_VALUES.map(value => (
+        <RadioButton
+          key={value}
+          value={value}
+          checked={rowsPerPage === value}
+          onChange={handleRowsPerPageChange}
+        />
+      ))}
+    </div>
+  </div>
+);
+
+EntryHeader.propTypes = {
+  totalRows: PropTypes.number.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+  handleRowsPerPageChange: PropTypes.func.isRequired,
+};
+
+const TableHeader = ({ desc, asc }) => (
+  <div className="flex">
+    <div className="set-center w-[275px] border border-black">
+      순번
+      <button onClick={desc}>▼</button>
+      <button onClick={asc}>▲</button>
+    </div>
+    <div className="flex-1 border border-black set-center">전화번호</div>
+    <div className="flex-1 border border-black set-center">응모 시간</div>
+    <div className="flex-1 border border-black set-center">응모 결과</div>
+  </div>
+);
+
+TableHeader.propTypes = {
+  desc: PropTypes.func.isRequired,
+  asc: PropTypes.func.isRequired,
+};
+
 const EntryTable = () => {
-  const [rowsPerPage, setRowsPerPage] = useState(10);
-  const [totalRows, setTotalRows] = useState(0);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageData, setPageData] = useState([]);
-  const [totalPages, setTotalPages] = useState(0);
-  const [sort, setSort] = useState('desc');
-  const table = useRef(null);
+  const [rowsPerPage, setRowsPerPage] = useState(RADIO_BUTTON_VALUES[0]); //초기는 10개 보기
+  const [totalRows, setTotalRows] = useState(0); //전체 데이터 수(표의 행) 설정
+  const [currentPage, setCurrentPage] = useState(1); //현재 페이지 설정
+  const [pageData, setPageData] = useState([]); //해당 페이지에 있는 데이터 저장하는 배열
+  const [totalPages, setTotalPages] = useState(0); //총 페이지 수를 설정
+  const [sort, setSort] = useState('desc'); //내림차순, 오름차순 설정
+  const tableRef = useRef(null); //page 변경 시 맨 위로 돌아가기 위한 table DOM을 저장
 
   useEffect(() => {
-    const getData = async () => {
+    const fetchData = async () => {
       try {
-        const response = await getDrawHistory(
-          currentPage - 1,
+        const { drawHistories, totalPages, totalItems } = await getDrawHistory(
+          currentPage - 1, //api는 0 페이지부터 시작이기에 -1해서 가져옴
           rowsPerPage,
           sort,
-        );
-        const { drawHistories, totalPages, totalItems } = response;
+        ); //응모 내역 가져오기
         setPageData(drawHistories);
         setTotalPages(totalPages);
         setTotalRows(totalItems);
       } catch (error) {
-        console.error(error);
+        console.error('Failed to fetch data:', error);
       }
     };
-    getData();
+    fetchData();
   }, [rowsPerPage, currentPage, sort]);
 
-  const startPage = Math.floor((currentPage - 1) / 10) * 10 + 1;
-  const endPage = Math.min(startPage + 9, totalPages);
+  //10페이지 단위로 페이지 버튼 생성
+  const startPage = Math.floor((currentPage - 1) / 10) * 10 + 1; // 1이상 10이하의 페이지면 페이지 버튼 1부터 시작, 11이상 20 이하 페이지면 페이지 버튼 11부터 시작
+  const endPage = Math.min(startPage + 9, totalPages); //끝 버튼 설정
 
   const handleRowsPerPageChange = event => {
     setRowsPerPage(Number(event.target.value));
@@ -42,56 +85,32 @@ const EntryTable = () => {
 
   const handlePageChange = newPage => {
     setCurrentPage(newPage);
-    table.current.scrollIntoView();
+    tableRef.current.scrollIntoView(); //table 위로 스크롤
   };
 
   return (
-    <div className="flex flex-col h-full" ref={table}>
-      <div className="flex justify-between py-400">
-        <div className="text-body-3-regular">전체 {totalRows}</div>
-        <div className="flex gap-6">
-          <RadioButton
-            value={10}
-            rowsPerPage={rowsPerPage}
-            onChange={handleRowsPerPageChange}
-          />
-          <RadioButton
-            value={30}
-            rowsPerPage={rowsPerPage}
-            onChange={handleRowsPerPageChange}
-          />
-          <RadioButton
-            value={50}
-            rowsPerPage={rowsPerPage}
-            onChange={handleRowsPerPageChange}
-          />
-        </div>
-      </div>
-      <div className="flex">
-        <div className="set-center w-[275px] border border-black">
-          순번
-          <button onClick={() => setSort('desc')}>▼</button>
-          <button onClick={() => setSort('asc')}>▲</button>
-        </div>
-        <div className="flex-1 border border-black set-center">전화번호</div>
-        <div className="flex-1 border border-black set-center">응모 시간</div>
-        <div className="flex-1 border border-black set-center">응모 결과</div>
-      </div>
+    <div className="flex flex-col h-full" ref={tableRef}>
+      <EntryHeader
+        totalRows={totalRows}
+        rowsPerPage={rowsPerPage}
+        handleRowsPerPageChange={handleRowsPerPageChange}
+      />
+      <TableHeader desc={() => setSort('desc')} asc={() => setSort('asc')} />
       {pageData.map(item => (
         <EntryRow
+          key={item.id}
           id={item.id}
           phoneNumber={item.phoneNumber}
           time={item.createdDate}
           result={item.drawResult}
-          key={item.id}
         />
       ))}
       <PageButton
         startPage={startPage}
         endPage={endPage}
         currentPage={currentPage}
         totalPages={totalPages}
-        handlePageChange={handlePageChange}
+        onPageChange={handlePageChange}
       />
     </div>
   );

diff --git a/admin/src/pages/AdminEventStatus/PageButton.jsx b/admin/src/pages/AdminEventStatus/PageButton.jsx
@@ -1,60 +1,65 @@
 import React from 'react';
-import Proptypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 function PageButton({
   startPage,
   endPage,
   currentPage,
   totalPages,
-  handlePageChange,
+  onPageChange,
 }) {
+  const createPageButtons = () =>
+    Array.from({ length: endPage - startPage + 1 }).map((_, index) => {
+      const pageIndex = startPage + index;
+      return (
+        <button
+          key={pageIndex}
+          onClick={() => onPageChange(pageIndex)}
+          className={`${currentPage === pageIndex ? 'text-detail-1-bold' : 'text-detail-1-regular'}`}
+        >
+          {pageIndex}
+        </button>
+      );
+    });
+
   return (
     <div className="flex justify-center gap-2 mt-10">
       {/* 10칸씩 이동하는 버튼*/}
       <button
-        onClick={() => handlePageChange(Math.max(1, currentPage - 10))}
-        disabled={1 === currentPage}
+        onClick={() => onPageChange(Math.max(1, currentPage - 10))}
+        disabled={currentPage === 1}
       >
-        &laquo; {/* << 기호 */}
+        &laquo;{/* << 기호 */}
       </button>
       <button
-        onClick={() => handlePageChange(currentPage - 1)}
+        onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage === 1}
       >
         &lt;
       </button>
-      {Array.from({ length: endPage - startPage + 1 }).map((_, index) => (
-        <button
-          key={index}
-          onClick={() => handlePageChange(startPage + index)}
-          className={`${
-            currentPage === startPage + index ? 'font-bold' : 'font-normal'
-          }`}
-        >
-          {startPage + index}
-        </button>
-      ))}
+      {createPageButtons()}
       <button
-        onClick={() => handlePageChange(currentPage + 1)}
+        onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage === totalPages}
       >
         &gt;
       </button>
       <button
-        onClick={() => handlePageChange(Math.min(totalPages, currentPage + 10))}
+        onClick={() => onPageChange(Math.min(totalPages, currentPage + 10))}
         disabled={currentPage === totalPages}
       >
-        &raquo; {/* >> 기호 */}
+        &raquo;{/* >> 기호 */}
       </button>
     </div>
   );
 }
 
 PageButton.propTypes = {
-  startPage: Proptypes.number.isRequired,
-  endPage: Proptypes.number.isRequired,
-  currentPage: Proptypes.number.isRequired,
-  totalPages: Proptypes.number.isRequired,
-  handlePageChange: Proptypes.func.isRequired,
+  startPage: PropTypes.number.isRequired,
+  endPage: PropTypes.number.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  totalPages: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
 };
+
 export default PageButton;