Merge pull request #127 from softeerbootcamp4th/feat/#124/adminDateCh…

…ange Feat/#124/admin date change
softeerbootcamp4th · Aug 19, 2024 · 928e7ca · 928e7ca
2 parents 8bc83cf + e5e3abd
commit 928e7ca
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 37 deletions.
diff --git a/admin/src/App.jsx b/admin/src/App.jsx
@@ -1,23 +1,42 @@
-import React from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
+import React, { useEffect, useContext } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import AdminHeader from '@/components/header/AdminHeader';
 import TabHeader from '@/components/header/TabHeader';
-import { DateProvider } from '@/context/dateContext';
+import { DateContext } from '@/context/dateContext';
+import dateFormatting from '@/utils/dateFormatting';
 
 function App() {
   const location = useLocation();
+  const navigate = useNavigate();
   const hideHeader = ['/login', '/error'].includes(location.pathname);
+  const { setDateInfo } = useContext(DateContext);
+
+  useEffect(() => {
+    if (location.pathname === '/') {
+      const today = new Date();
+      const formattedDate = dateFormatting(today);
+      navigate(`/${formattedDate}`);
+    }
+  }, [location, navigate]);
+
+  useEffect(() => {
+    const pathSegments = location.pathname.split('/');
+    const potentialDateSegment = pathSegments[1];
+
+    if (potentialDateSegment && !isNaN(Date.parse(potentialDateSegment))) {
+      const parsedDate = new Date(potentialDateSegment);
+      setDateInfo(dateFormatting(parsedDate));
+    }
+  }, [location.pathname, setDateInfo]);
 
   return (
-    <DateProvider>
-      <div className="bg-[#DADADA] flex flex-col items-center min-w-[700px] text-nowrap">
-        {!hideHeader && <AdminHeader />}
-        {!hideHeader && <TabHeader />}
-        <div className="w-[90%] flex flex-col items-center pb-2000">
-          <Outlet />
-        </div>
+    <div className="bg-[#DADADA] flex flex-col items-center min-w-[700px] text-nowrap">
+      {!hideHeader && <AdminHeader />}
+      {!hideHeader && <TabHeader />}
+      <div className="w-[90%] flex flex-col items-center pb-2000">
+        <Outlet />
       </div>
-    </DateProvider>
+    </div>
   );
 }
 

diff --git a/admin/src/api/header/index.js b/admin/src/api/header/index.js
@@ -0,0 +1,8 @@
+import { put, get } from '@/api/index';
+
+const putEventSchedules = startDate =>
+  put('/admin/event-schedules', { startDate });
+
+const getEventSchedules = () => get('/admin/event-schedules');
+
+export { putEventSchedules, getEventSchedules };
diff --git a/admin/src/components/header/AdminHeader.jsx b/admin/src/components/header/AdminHeader.jsx
@@ -3,34 +3,59 @@ import NextDayArrow from '@/assets/icons/nextDayArrow.svg';
 import PreviousDayArrow from '@/assets/icons/previousDayArrow.svg';
 import dateFormatting from '@/utils/dateFormatting';
 import { DateContext } from '@/context/dateContext';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { putEventSchedules, getEventSchedules } from '@/api/header/index';
 
 function AdminHeader() {
-  const { dateInfo, setDateInfo } = useContext(DateContext);
+  const location = useLocation();
+  const navigator = useNavigate();
+  const { dateInfo } = useContext(DateContext);
   const [isNextDayDisabled, setIsNextDayDisabled] = useState(false);
   const [isPreviousDayDisabled, setIsPreviousDayDisabled] = useState(false);
+  const [selectedDate, setSelectedDate] = useState('');
 
   useEffect(() => {
-    setIsNextDayDisabled(dateInfo === '2024-08-31');
-    setIsPreviousDayDisabled(dateInfo === '2024-07-28');
+    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());
+    };
+    getDate();
   }, [dateInfo]);
 
+  const handleDateChange = event => {
+    setSelectedDate(event.target.value);
+  };
+
   const handlePreviousDay = () => {
     if (!isPreviousDayDisabled) {
       const previousDay = new Date(dateInfo);
       previousDay.setDate(previousDay.getDate() - 1);
-      setDateInfo(dateFormatting(previousDay));
+      const pathSegments = location.pathname.split('/');
+      const tabName = pathSegments[2];
+      navigator(`/${dateFormatting(previousDay)}/${tabName}`);
     }
   };
 
   const handleNextDay = () => {
     if (!isNextDayDisabled) {
       const nextDay = new Date(dateInfo);
       nextDay.setDate(nextDay.getDate() + 1);
-      setDateInfo(dateFormatting(nextDay));
+      const pathSegments = location.pathname.split('/');
+      const tabName = pathSegments[2];
+      navigator(`/${dateFormatting(nextDay)}/${tabName}`);
     }
   };
+
+  const handleSubmit = () => {
+    putEventSchedules(selectedDate);
+  };
+
   return (
-    <div className="pt-1000 flex justify-between w-[90%]">
+    <div className="pt-1000 flex justify-between w-[90%] items-center">
       <div className="set-center gap-500">
         <span className="text-heading-2-bold text-neutral-black">
           이벤트 관리
@@ -54,6 +79,23 @@ function AdminHeader() {
           />
         </div>
       </div>
+      <div>
+        <div className="flex gap-300">
+          <label htmlFor="date">시작일 설정: </label>
+          <input
+            type="date"
+            id="date"
+            value={selectedDate}
+            onChange={handleDateChange}
+          />
+          <button
+            className="text-white bg-neutral-black"
+            onClick={handleSubmit}
+          >
+            전송
+          </button>
+        </div>
+      </div>
     </div>
   );
 }

diff --git a/admin/src/components/header/NavLinkItem.jsx b/admin/src/components/header/NavLinkItem.jsx
@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
+import { DateContext } from '@/context/dateContext';
 
 function NavLinkItem({ path, value }) {
+  const { dateInfo } = useContext(DateContext);
+
+  const fullPath = `/${dateInfo}${path}`;
+
   return (
     <NavLink
-      to={path}
+      to={fullPath}
+      end
       className={({ isActive }) =>
         `${
           isActive

diff --git a/admin/src/components/header/TabHeader.jsx b/admin/src/components/header/TabHeader.jsx
@@ -4,7 +4,7 @@ import NavLinkItem from '@/components/header/NavLinkItem';
 function TabHeader() {
   return (
     <div className="pt-1000 flex justify-between items-center w-[90%]">
-      <NavLinkItem path="/" value="미니퀴즈 질문" />
+      <NavLinkItem path="" value="미니퀴즈 질문" />
       <NavLinkItem path="/miniQuizAnswer" value="미니퀴즈 답변" />
       <NavLinkItem path="/draw" value="응모 결과" />
       <NavLinkItem path="/reward" value="상품 목록" />

diff --git a/admin/src/main.jsx b/admin/src/main.jsx
@@ -1,9 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import '@/styles/global.css';
+import { DateProvider } from '@/context/dateContext';
 import { RouterProvider } from 'react-router-dom';
+import ReactDOM from 'react-dom/client';
 import router from '@/router';
+import '@/styles/global.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <RouterProvider router={router} />,
+  <DateProvider>
+    <RouterProvider router={router} />,
+  </DateProvider>,
 );
diff --git a/admin/src/pages/UploadPrize/UploadPrize.jsx b/admin/src/pages/UploadPrize/UploadPrize.jsx
@@ -129,9 +129,6 @@ function UploadPrize() {
       const zipContent = await zip.loadAsync(file);
       const fileKeys = Object.keys(zipContent.files);
 
-      // 허용된 확장자 목록
-      const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg'];
-
       // 디렉토리 파일이 포함되어 있거나, 허용되지 않은 확장자가 포함된 경우 체크
       const hasInvalidFiles = fileKeys.some(key => {
         if (zipContent.files[key].dir) {
@@ -142,9 +139,9 @@ function UploadPrize() {
         }
 
         const fileExt = key.split('.').pop().toLowerCase();
-        if (!allowedExtensions.includes(fileExt)) {
+        if ('jpg' !== fileExt) {
           setErrorMessage(
-            `파일 형식은 'jpg', 'jpeg', 'png', 'gif', 'svg'만 가능합니다. ${fileExt} 해당 형식이 있습니다.`,
+            `파일 형식은 'jpg'만 가능합니다. ${fileExt} 형식 파일이 있습니다.`,
           );
           return true; // 허용되지 않은 확장자 포함
         }

diff --git a/admin/src/pages/UploadReward/UploadReward.jsx b/admin/src/pages/UploadReward/UploadReward.jsx
@@ -94,9 +94,6 @@ function UploadReward() {
       const zipContent = await zip.loadAsync(file);
       const fileKeys = Object.keys(zipContent.files);
 
-      // 허용된 확장자 목록
-      const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg'];
-
       // 디렉토리 파일이 포함되어 있거나, 허용되지 않은 확장자가 포함된 경우 체크
       const hasInvalidFiles = fileKeys.some(key => {
         if (zipContent.files[key].dir) {
@@ -107,9 +104,9 @@ function UploadReward() {
         }
 
         const fileExt = key.split('.').pop().toLowerCase();
-        if (!allowedExtensions.includes(fileExt)) {
+        if ('jpg' !== fileExt) {
           setErrorMessage(
-            `파일 형식은 'jpg', 'jpeg', 'png', 'gif', 'svg'만 가능합니다. ${fileExt} 해당 형식이 있습니다.`,
+            `파일 형식은 'jpg'만 가능합니다. ${fileExt} 형식 파일이 있습니다.`,
           );
           return true; // 허용되지 않은 확장자 포함
         }

diff --git a/admin/src/router.jsx b/admin/src/router.jsx
@@ -22,6 +22,16 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
+    children: [
+      {
+        path: 'error',
+        element: <ErrorPage />,
+      },
+    ],
+  },
+  {
+    path: '/:date',
+    element: <App />,
     children: [
       {
         element: <ProtectedRoute />,
@@ -55,10 +65,6 @@ const router = createBrowserRouter([
             path: 'uploadPrize',
             element: <UploadPrize />,
           },
-          {
-            path: 'error',
-            element: <ErrorPage />,
-          },
           {
             path: 'Indicator',
             element: <Indicator />,