Merge pull request #141 from softeerbootcamp4th/fix/#138/adminNavigat…

…ionError Fix/#138/admin navigation error
softeerbootcamp4th · Aug 20, 2024 · af94eda · af94eda
2 parents 5414ba5 + 1e1ecc9
commit af94eda
Show file tree

Hide file tree

Showing 26 changed files with 117 additions and 44 deletions.
diff --git a/admin/package.json b/admin/package.json
@@ -19,6 +19,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "json-server": "^1.0.0-beta.1",
     "jszip": "^3.10.1",
+    "jwt-decode": "^4.0.0",
     "micro-slider": "^1.1.0",
     "postcss": "^8.4.39",
     "prop-types": "^15.8.1",

diff --git a/admin/src/api/DrawCasper/index.js b/admin/src/api/DrawCasper/index.js
@@ -0,0 +1,5 @@
+import { get } from '@/api/index';
+
+const draw = () => get('/admin/topPrizeWinner');
+
+export { draw };
diff --git a/admin/src/components/header/AdminHeader.jsx b/admin/src/components/header/AdminHeader.jsx
@@ -8,20 +8,41 @@ import { putEventSchedules, getEventSchedules } from '@/api/header/index';
 
 function AdminHeader() {
   const location = useLocation();
-  const navigator = useNavigate();
+  const navigate = useNavigate();
   const { dateInfo } = useContext(DateContext);
   const [isNextDayDisabled, setIsNextDayDisabled] = useState(false);
   const [isPreviousDayDisabled, setIsPreviousDayDisabled] = useState(false);
   const [selectedDate, setSelectedDate] = useState('');
 
   useEffect(() => {
+    const token = sessionStorage.getItem('token');
+    if (token) {
+      try {
+        const decodedToken = jwtDecode(token);
+
+        if (decodedToken && decodedToken.role === 'ADMIN') {
+          // Do Nothing
+        } else {
+          navigate('/error');
+        }
+      } catch (error) {
+        console.error(error);
+        navigate('/error');
+      }
+    } else {
+      navigate('/login');
+    }
     const getDate = async () => {
       const response = await getEventSchedules();
-      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());
+      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());
+      }
     };
     getDate();
   }, [dateInfo]);
@@ -36,7 +57,9 @@ function AdminHeader() {
       previousDay.setDate(previousDay.getDate() - 1);
       const pathSegments = location.pathname.split('/');
       const tabName = pathSegments[2];
-      navigator(`/${dateFormatting(previousDay)}/${tabName}`);
+      navigate(
+        `/${dateFormatting(previousDay)}${tabName !== undefined ? `/${tabName}` : ''}`,
+      );
     }
   };
 
@@ -46,7 +69,9 @@ function AdminHeader() {
       nextDay.setDate(nextDay.getDate() + 1);
       const pathSegments = location.pathname.split('/');
       const tabName = pathSegments[2];
-      navigator(`/${dateFormatting(nextDay)}/${tabName}`);
+      navigate(
+        `/${dateFormatting(nextDay)}${tabName !== undefined ? `/${tabName}` : ''}`,
+      );
     }
   };
 

diff --git a/admin/src/components/header/TabHeader.jsx b/admin/src/components/header/TabHeader.jsx
@@ -13,6 +13,7 @@ function TabHeader() {
       <NavLinkItem path="/uploadPrize" value="경품 코드 업로드" />
       <NavLinkItem path="/adminEventStatus" value="이벤트 현황" />
       <NavLinkItem path="/indicator" value="지표 분석" />
+      <NavLinkItem path="/drawCasper" value="1등 추첨" />
     </div>
   );
 }

diff --git a/admin/src/hooks/useFetch.js b/admin/src/hooks/useFetch.js
@@ -1,8 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 function useFetch(api, params) {
-  const navigate = useNavigate();
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -11,11 +9,7 @@ function useFetch(api, params) {
     try {
       const response = await api(params);
       if (typeof response === 'object') {
-        if (response.code === 'UNAUTHORIZED') {
-          navigate('/error');
-        } else {
-          setData(response);
-        }
+        setData(response);
       } else if (typeof response === 'string') {
         setData({ message: response });
       } else {

diff --git a/admin/src/pages/AdminEventStatus/EntryRow.jsx b/admin/src/pages/AdminEventStatus/EntryRow.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import '@/styles/global.css';
 
 function EntryRow({ id, phoneNumber, time, result }) {
   return (

diff --git a/admin/src/pages/Indicator/TableHeader.jsx b/admin/src/pages/Indicator/TableHeader.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import '@/styles/global.css';
 
 function TableHeader({ col }) {
   return (

diff --git a/admin/src/pages/UploadPrize/UploadPrize.jsx b/admin/src/pages/UploadPrize/UploadPrize.jsx
@@ -4,7 +4,6 @@ import ModalFrame from '@/components/modal/ModalFrame';
 import { postPrize, getProbability } from '@/api/UploadPrize';
 import useNavigationBlocker from '@/hooks/useNavigationBlocker';
 import useFormData from '@/hooks/useFormData';
-import '@/styles/global.css';
 import JSZip from 'jszip';
 
 function UploadPrize() {
@@ -20,15 +19,16 @@ function UploadPrize() {
   const [totalPrize, setTotalPrize] = useState({});
   const [openChangeModal, setOpenChangeModal] = useState(false);
   const [openSubmitModal, setOpenSubmitModal] = useState(false);
+  const [modified, setModified] = useState(false);
 
   const createFormData = useFormData();
 
   const {
     unsavedChangesModal,
     handleConfirmNavigation,
     handleCancelNavigation,
-  } = useNavigationBlocker(selectedFile, () => {
-    setSelectedFile(null);
+  } = useNavigationBlocker(modified, () => {
+    setModified(false);
   });
 
   useEffect(() => {
@@ -44,7 +44,7 @@ function UploadPrize() {
   }, []);
 
   const handleRank = rank => {
-    if (!selectedFile) {
+    if (!modified) {
       setRank(rank);
     } else {
       tempRank.current = rank;
@@ -79,6 +79,7 @@ function UploadPrize() {
       file: selectedFile,
       ranking: rank,
     });
+
     try {
       setIsLoading(true);
       const response = await postPrize(body);
@@ -92,11 +93,13 @@ function UploadPrize() {
       setErrorMessage('파일 업로드 중 오류가 발생했습니다.');
     } finally {
       setIsLoading(false);
+      setModified(false);
     }
   };
 
   const handleFileChange = async files => {
     if (!files.length) return;
+    setModified(true);
     setErrorMessage('');
     setIsLoading(true);
 
@@ -228,7 +231,7 @@ function UploadPrize() {
       {openChangeModal && (
         <ModalFrame
           text="지금 이동하면 등록한 파일이 삭제됩니다. 이동하시겠습니까??"
-          onClickNo={() => setOpenSubmitModal(false)}
+          onClickNo={() => setOpenChangeModal(false)}
           onClickYes={() => handleMove()}
         />
       )}

diff --git a/admin/src/pages/UploadReward/UploadReward.jsx b/admin/src/pages/UploadReward/UploadReward.jsx
@@ -6,7 +6,6 @@ import { postQuizReward } from '@/api/UploadReward';
 import { DateContext } from '@/context/dateContext';
 import useFormData from '@/hooks/useFormData';
 import useNavigationBlocker from '@/hooks/useNavigationBlocker';
-import '@/styles/global.css';
 import JSZip from 'jszip';
 
 function UploadReward() {
@@ -19,6 +18,7 @@ function UploadReward() {
   const [processMessage, setProcessMessage] = useState(
     '폴더 안에 들어가서 파일만을 선택하여 압축한 zip 파일을 업로드해주세요.',
   );
+  const [modified, setModified] = useState(false);
 
   const totalReward = 500;
   const createFormData = useFormData();
@@ -27,8 +27,8 @@ function UploadReward() {
     unsavedChangesModal,
     handleConfirmNavigation,
     handleCancelNavigation,
-  } = useNavigationBlocker(selectedFile, () => {
-    setSelectedFile(null);
+  } = useNavigationBlocker(modified, () => {
+    setModified(false);
   });
 
   const handleClick = () => {
@@ -44,24 +44,28 @@ function UploadReward() {
       file: selectedFile,
       quizDate: dateInfo,
     });
+    console.log(body);
     try {
       setIsLoading(true);
       const response = await postQuizReward(body);
+      console.log(response);
       setOpenModal(false);
       if (response.message === 'success') {
         setProcessMessage('파일 업로드를 완료했습니다.');
       } else {
-        setErrorMessage('파일 업로드에 실패했습니다.');
+        setErrorMessage(`${response.message}`);
       }
     } catch (error) {
       setErrorMessage('파일 업로드 중 오류가 발생했습니다.');
     } finally {
       setIsLoading(false);
+      setModified(false);
     }
   };
 
   const handleFileChange = async files => {
     if (!files.length) return;
+    setModified(true);
     setErrorMessage('');
     setIsLoading(true);
 

diff --git a/admin/src/pages/drawCasper/DrawCasper.jsx b/admin/src/pages/drawCasper/DrawCasper.jsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import AdminEditHeader from '@/components/header/AdminEditHeader';
+import BlackButton from '@/components/buttons/BlackButton';
+import ModalFrame from '@/components/modal/ModalFrame';
+import { draw } from '@/api/DrawCasper/index';
+
+function DrawCasper() {
+  const [openSubmitModal, setOpenSubmitModal] = useState(false);
+  const [winner, setWinner] = useState('');
+
+  const handleSubmit = async () => {
+    try {
+      const response = await draw();
+      setWinner(response.phoneNumber);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setOpenSubmitModal(false);
+    }
+  };
+
+  return (
+    <div className="w-full mt-10">
+      <AdminEditHeader info="1등 경품 추첨" />
+      <div className="set-center h-[400px] w-full bg-neutral-white rounded-b-[10px] py-4">
+        {winner === '' ? (
+          <BlackButton
+            value="추첨하기"
+            onClickFunc={() => setOpenSubmitModal(true)}
+          />
+        ) : (
+          <div className="text-heading-banner-title-3">{winner}</div>
+        )}
+      </div>
+      {openSubmitModal && (
+        <ModalFrame
+          text="정말로 추첨하시겠습니까??"
+          onClickNo={() => setOpenSubmitModal(false)}
+          onClickYes={() => handleSubmit()}
+        />
+      )}
+    </div>
+  );
+}
+
+export default DrawCasper;
diff --git a/admin/src/router.jsx b/admin/src/router.jsx
@@ -13,6 +13,7 @@ import Login from '@/pages/login/Login';
 import ProtectedRoute from '@/pages/ProtectedRoute';
 import ErrorPage from '@/pages/ErrorPage';
 import Indicator from '@/pages/Indicator/Indicator';
+import DrawCasper from '@/pages/drawCasper/DrawCasper';
 
 const router = createBrowserRouter([
   {
@@ -66,9 +67,13 @@ const router = createBrowserRouter([
             element: <UploadPrize />,
           },
           {
-            path: 'Indicator',
+            path: 'indicator',
             element: <Indicator />,
           },
+          {
+            path: 'drawCasper',
+            element: <DrawCasper />,
+          },
         ],
       },
     ],

diff --git a/admin/yarn.lock b/admin/yarn.lock
@@ -3553,6 +3553,11 @@ jszip@^3.10.1:
     readable-stream "~2.3.6"
     setimmediate "^1.0.5"
 
+jwt-decode@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-4.0.0.tgz#2270352425fd413785b2faf11f6e755c5151bd4b"
+  integrity sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==
+
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz"
@@ -4684,6 +4689,7 @@ tailwindcss@^3.4.6:
     resolve "^1.22.2"
     sucrase "^3.32.0"
 
+
 tar@^7.4.3:
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/tar/-/tar-7.4.3.tgz#88bbe9286a3fcd900e94592cda7a22b192e80571"

diff --git a/service/src/components/buttons/BlueButton.jsx b/service/src/components/buttons/BlueButton.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import '@/styles/global.css';
 
 function BlueButton({ value, styles, onClickFunc, disabled = false }) {
   return (

diff --git a/service/src/components/buttons/BluePurpleButton.jsx b/service/src/components/buttons/BluePurpleButton.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import '@/styles/global.css';
 
 function BluePurpleButton({ value, onClickFunc, styles, disabled = false }) {
   return (

diff --git a/service/src/components/buttons/WhiteButton.jsx b/service/src/components/buttons/WhiteButton.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import '@/styles/global.css';
 
 function WhiteButton({ value, onClickFunc, styles, disabled = false }) {
   return (

diff --git a/service/src/pages/joinEvent/CarCard.jsx b/service/src/pages/joinEvent/CarCard.jsx
@@ -5,7 +5,6 @@ import BlueButton from '@/components/buttons/BlueButton';
 import questionMark from '@/assets/images/questionMark.svg';
 import { AuthContext } from '@/context/authContext';
 import { useNavigate } from 'react-router-dom';
-import '@/styles/global.css';
 
 function CarCard() {
   const { userInfo } = useContext(AuthContext);

diff --git a/service/src/pages/joinEvent/MiniQuiz.jsx b/service/src/pages/joinEvent/MiniQuiz.jsx
@@ -10,7 +10,6 @@ import {
 } from '@/utils/miniQuizUtils';
 
 import { useNavigate } from 'react-router-dom';
-import '@/styles/global.css';
 
 function MiniQuiz() {
   const navigate = useNavigate();

diff --git a/service/src/pages/joinEvent/ToolBoxCard.jsx b/service/src/pages/joinEvent/ToolBoxCard.jsx
@@ -5,7 +5,6 @@ import toolBoxImage from '@/assets/images/toolBoxImage.svg';
 import questionMark from '@/assets/images/questionMark.svg';
 import { AuthContext } from '@/context/authContext';
 import { useNavigate } from 'react-router-dom';
-import '@/styles/global.css';
 
 function ToolBoxCard() {
   const navigate = useNavigate();

diff --git a/service/src/pages/miniquiz/ClickBox.jsx b/service/src/pages/miniquiz/ClickBox.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import '@/styles/global.css';
 
 function ClickBox({ id, value, isChosen, onClick }) {
   let className =