Merge pull request #105 from softeerbootcamp4th/feat/adminUploadReward

Feat/admin upload reward

admin/package.json

@@ -18,6 +18,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "json-server": "^1.0.0-beta.1",
+    "jszip": "^3.10.1",
     "micro-slider": "^1.1.0",
     "postcss": "^8.4.39",
     "prop-types": "^15.8.1",

admin/src/api/UploadReward/index.js

@@ -0,0 +1,9 @@
+import { post } from '@/api/indexFormData';
+
+const postQuizReward = (file, quizDate) =>
+  post('/admin/quizReward', {
+    file,
+    quizDate,
+  });
+
+export { postQuizReward };

admin/src/api/indexFormData.js

@@ -0,0 +1,51 @@
+const ApiRequest = async (url, method, body) => {
+  const accessToken = localStorage.getItem('userInfo');
+
+  try {
+    const options = {
+      method,
+      headers: {
+        ...(accessToken && {
+          Authorization: `Bearer ${accessToken}`,
+        }),
+      },
+      credentials: 'include',
+    };
+
+    const formData = new FormData();
+    for (const key in body) {
+      formData.append(key, body[key]);
+    }
+    options.body = formData;
+
+    const response = await fetch(
+      `${import.meta.env.VITE_API_URL}${url}`,
+      options,
+    );
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    console.log('API 통신 실패 : ', error);
+    throw error;
+  }
+};
+
+export const post = (url, body) => {
+  return ApiRequest(url, 'POST', body);
+};
+
+export const get = url => {
+  return ApiRequest(url, 'GET', null);
+};
+
+export const put = (url, body) => {
+  return ApiRequest(url, 'PUT', body);
+};
+
+export const patch = (url, body) => {
+  return ApiRequest(url, 'PATCH', body);
+};
+
+export const del = (url, body, header) => {
+  return ApiRequest(url, 'DELETE', body, header);
+};

admin/src/components/buttons/BlackButton.jsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function BlackButton({ onClickFunc }) {
+function BlackButton({ value, onClickFunc }) {
   return (
     <button
       onClick={onClickFunc}
       className={`text-body-3-semibold text-white rounded py-200 px-1000 bg-neutral-700 hover:bg-neutral-black`}
     >
-      수정하기
+      {value}
     </button>
   );
 }
 
 BlackButton.propTypes = {
+  value: PropTypes.string.isRequired,
   onClickFunc: PropTypes.func.isRequired,
 };
 

admin/src/components/header/NavLinkItem.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+
+function NavLinkItem({ path, value }) {
+  return (
+    <NavLink
+      to={path}
+      className={({ isActive }) =>
+        `${
+          isActive
+            ? 'text-body-3-bold text-neutral-black border-b-black border-b-solid border-b-[3px]'
+            : 'text-detail-1-regular text-neutral-500 hover:scale-110 transition-transform duration-300'
+        }`
+      }
+    >
+      {value}
+    </NavLink>
+  );
+}
+
+NavLinkItem.propTypes = {
+  path: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default NavLinkItem;

admin/src/components/header/TabHeader.jsx

@@ -1,57 +1,15 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import NavLinkItem from '@/components/header/NavLinkItem';
 
 function TabHeader() {
   return (
     <div className="pt-1000 flex justify-start items-center gap-500 w-[90%]">
-      <NavLink
-        to="/"
-        className={({ isActive }) =>
-          `${
-            isActive
-              ? 'text-body-3-bold text-neutral-black border-b-black border-b-solid border-b-[3px]'
-              : 'text-detail-1-regular text-neutral-500 hover:scale-110 transition-transform duration-300'
-          }`
-        }
-      >
-        미니퀴즈 질문
-      </NavLink>
-      <NavLink
-        to="/miniQuizAnswer"
-        className={({ isActive }) =>
-          `${
-            isActive
-              ? 'text-body-3-bold text-neutral-black border-b-black border-b-solid border-b-[3px]'
-              : 'text-detail-1-regular text-neutral-500 hover:scale-110 transition-transform duration-300'
-          }`
-        }
-      >
-        미니퀴즈 답변
-      </NavLink>
-      <NavLink
-        to="/draw"
-        className={({ isActive }) =>
-          `${
-            isActive
-              ? 'text-body-3-bold text-neutral-black border-b-black border-b-solid border-b-[3px]'
-              : 'text-detail-1-regular text-neutral-500 hover:scale-110 transition-transform duration-300'
-          }`
-        }
-      >
-        응모 결과
-      </NavLink>
-      <NavLink
-        to="/reward"
-        className={({ isActive }) =>
-          `${
-            isActive
-              ? 'text-body-3-bold text-neutral-black border-b-black border-b-solid border-b-[3px]'
-              : 'text-detail-1-regular text-neutral-500 hover:scale-110 transition-transform duration-300'
-          }`
-        }
-      >
-        상품 목록
-      </NavLink>
+      <NavLinkItem path="/" value="미니퀴즈 질문" />
+      <NavLinkItem path="/miniQuizAnswer" value="미니퀴즈 답변" />
+      <NavLinkItem path="/draw" value="응모 결과" />
+      <NavLinkItem path="/reward" value="상품 목록" />
+      <NavLinkItem path="/adminEventStatus" value="이벤트 현황" />
+      <NavLinkItem path="/uploadReward" value="선착순 업로드" />
     </div>
   );
 }

admin/src/pages/AdminEventStatus/AdminEventStatus.jsx

@@ -4,8 +4,9 @@ import PrizeTable from '@/pages/AdminEventStatus/PrizeTable';
 
 function AdminEventStatus() {
   return (
-    <div className="px-[5%] flex flex-col text-nowrap w-screen">
+    <div className="mt-10 px-[5%] flex flex-col text-nowrap w-screen">
       <PrizeTable />
+      <div className="mt-10 border-[1px] border-[#b5b3b3]"></div>
       <EntryTable />
     </div>
   );