Merge pull request #116 from softeerbootcamp4th/feat/#114/IndicatorApi

Feat/#114/indicator api

admin/src/api/AdminEventStatus/index.js

@@ -0,0 +1,8 @@
+import { get } from '@/api/index';
+
+const getDrawHistory = (page, limit, sort = 'desc') =>
+  get(`/admin/draw-history?page=${page}&limit=${limit}&sort=${sort}`);
+
+const getDrawRemaining = () => get('/admin/draw-remaining');
+
+export { getDrawHistory, getDrawRemaining };

admin/src/api/Indicator/index.js

@@ -0,0 +1,5 @@
+import { get } from '@/api/index';
+
+const getIndicator = () => get('/admin/indicator');
+
+export { getIndicator };

admin/src/api/UploadPrize/index.js

@@ -1,14 +1,6 @@
-import { post, get } from '@/api/_index';
+import { post, get } from '@/api/index';
 
-const postPrize = (file, ranking) =>
-  post(
-    '/admin/draw-prize',
-    {
-      file,
-      ranking,
-    },
-    true,
-  );
+const postPrize = body => post('/admin/draw-prize', body);
 
 const getProbability = () => get('/admin/draw-probability');
 

admin/src/api/UploadReward/index.js

@@ -1,13 +1,5 @@
-import { post } from '@/api/_index';
+import { post } from '@/api/index';
 
-const postQuizReward = (file, quizDate) =>
-  post(
-    '/admin/quiz-reward',
-    {
-      file,
-      quizDate,
-    },
-    true,
-  );
+const postQuizReward = body => post('/admin/quiz-reward', body);
 
 export { postQuizReward };

admin/src/components/header/TabHeader.jsx

@@ -8,10 +8,10 @@ function TabHeader() {
       <NavLinkItem path="/miniQuizAnswer" value="미니퀴즈 답변" />
       <NavLinkItem path="/draw" value="응모 결과" />
       <NavLinkItem path="/reward" value="상품 목록" />
-      <NavLinkItem path="/adminEventStatus" value="이벤트 현황" />
       <NavLinkItem path="/uploadReward" value="선착순 업로드" />
       <NavLinkItem path="/uploadPrize" value="경품 업로드" />
-      <NavLinkItem path="/analyticsPage" value="지표 분석" />
+      <NavLinkItem path="/adminEventStatus" value="이벤트 현황" />
+      <NavLinkItem path="/indicator" value="지표 분석" />
     </div>
   );
 }

admin/src/pages/AdminEventStatus/EntryRow.jsx

@@ -17,7 +17,7 @@ EntryRow.propTypes = {
   id: PropTypes.number.isRequired,
   phoneNumber: PropTypes.string.isRequired,
   time: PropTypes.string.isRequired,
-  result: PropTypes.string.isRequired,
+  result: PropTypes.number.isRequired,
 };
 
 export default EntryRow;

admin/src/pages/AdminEventStatus/EntryTable.jsx

@@ -1,32 +1,30 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import EntryRow from '@/pages/AdminEventStatus/EntryRow';
 import RadioButton from '@/pages/AdminEventStatus/RadioButton';
 import PageButton from '@/pages/AdminEventStatus/PageButton';
+import { getDrawHistory } from '@/api/AdminEventStatus';
 
 const EntryTable = () => {
   const [rowsPerPage, setRowsPerPage] = useState(10);
-  const [totalRows, setTotalRows] = useState(-1);
+  const [totalRows, setTotalRows] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageData, setPageData] = useState([
-    { id: 1, phoneNumber: '10', time: 's', result: '1' },
-    { id: 2, phoneNumber: '10', time: 's', result: '1' },
-    { id: 3, phoneNumber: '10', time: 's', result: '1' },
-    { id: 4, phoneNumber: '10', time: 's', result: '1' },
-    { id: 5, phoneNumber: '10', time: 's', result: '1' },
-    { id: 6, phoneNumber: '10', time: 's', result: '1' },
-    { id: 7, phoneNumber: '10', time: 's', result: '1' },
-    { id: 8, phoneNumber: '10', time: 's', result: '1' },
-  ]);
+  const [pageData, setPageData] = useState([]);
+  const [totalPages, setTotalPages] = useState(0);
+  const [sort, setSort] = useState('desc');
+  const table = useRef(null);
 
   useEffect(() => {
-    getCurrentPageData(currentPage);
-  }, [rowsPerPage, currentPage]);
+    const getData = async () => {
+      const response = await getDrawHistory(currentPage - 1, rowsPerPage, sort);
+      const { drawHistories, totalPages, totalItems } = response;
+      setPageData(drawHistories);
+      setTotalPages(totalPages);
+      //setTotalRows(response.totalItems);
+      setTotalRows(totalPages * rowsPerPage);
+    };
+    getData();
+  }, [rowsPerPage, currentPage, sort]);
 
-  useEffect(() => {
-    setTotalRows(156); //TODO API 통신으로 가져오기 및 데이터를 가져오기
-  }, []);
-
-  const totalPages = Math.ceil(totalRows / rowsPerPage);
   const startPage = Math.floor((currentPage - 1) / 10) * 10 + 1;
   const endPage = Math.min(startPage + 9, totalPages);
 
@@ -37,17 +35,11 @@ const EntryTable = () => {
 
   const handlePageChange = newPage => {
     setCurrentPage(newPage);
-  };
-
-  const getCurrentPageData = currentPage => {
-    // try{
-    // const data //API 통신
-    // }
-    //setPageData(data); // data의 정보 array 가져오기
+    table.current.scrollIntoView();
   };
 
   return (
-    <div className="flex flex-col h-screen">
+    <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">
@@ -69,7 +61,11 @@ const EntryTable = () => {
         </div>
       </div>
       <div className="flex">
-        <div className="set-center w-[275px] border border-black">순번</div>
+        <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>
@@ -78,8 +74,8 @@ const EntryTable = () => {
         <EntryRow
           id={item.id}
           phoneNumber={item.phoneNumber}
-          time={item.time}
-          result={item.result}
+          time={item.createdDate}
+          result={item.drawResult}
           key={item.id}
         />
       ))}

admin/src/pages/AdminEventStatus/PrizeTable.jsx

@@ -1,39 +1,46 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { getDrawRemaining } from '@/api/AdminEventStatus';
 
 function PrizeTable() {
-  //TODO api 통신으로 정보 가져오기
+  const [remaining, setRemaining] = useState([]);
+
+  useEffect(() => {
+    const getData = async () => {
+      const remaining = await getDrawRemaining();
+      setRemaining(remaining.drawRemaining);
+    };
+    getData();
+  }, []);
+
   return (
     <table className="w-full border border-collapse table-auto">
       <thead>
         <tr>
-          <th className="px-4 py-2 text-center border" rowSpan="2">
-            잔여 상품 수 / 전체 개수
-          </th>
-          <th className="px-4 py-2 text-center border">1등</th>
-          <th className="px-4 py-2 text-center border">2등</th>
-          <th className="px-4 py-2 text-center border">3등</th>
-          <th className="px-4 py-2 text-center border">4등</th>
-          <th className="px-4 py-2 text-center border">5등</th>
+          <th
+            className="px-4 py-2 text-center border border-black"
+            rowSpan="2"
+          ></th>
+          <th className="px-4 py-2 text-center border border-black">2등</th>
+          <th className="px-4 py-2 text-center border border-black">3등</th>
+          <th className="px-4 py-2 text-center border border-black">4등</th>
+          <th className="px-4 py-2 text-center border border-black">5등</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td className="px-4 py-2 text-center border bg-neutral-white"></td>
-          <td className="px-4 py-2 text-center border bg-neutral-white">
-            nn/nn
-          </td>
-          <td className="px-4 py-2 text-center border bg-neutral-white">
-            nn/nn
-          </td>
-          <td className="px-4 py-2 text-center border bg-neutral-white">
-            nn/nn
-          </td>
-          <td className="px-4 py-2 text-center border bg-neutral-white">
-            nn/nn
-          </td>
-          <td className="px-4 py-2 text-center border bg-neutral-white">
-            nn/nn
+          <td className="px-4 py-2 text-center border border-black">
+            잔여 상품 수 / 전체 개수
           </td>
+          {remaining
+            .filter(item => item.ranking > 1)
+            .map(value => (
+              <td
+                key={value.ranking}
+                className="px-4 py-2 text-center border border-black bg-neutral-white"
+              >
+                {value.nowStock} / {value.totalStock}
+              </td>
+            ))}
         </tr>
       </tbody>
     </table>

admin/src/pages/Indicator/Dau.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Dau({ data }) {
+  return (
+    <div className="flex bg-[#363636] text-neutral-white">
+      <div className="set-center min-w-[157px] min-h-[70px] border">Dau</div>
+      <div className="set-center min-w-[157px] min-h-[70px] border">
+        시작일 기준
+      </div>
+      {data.map((value, index) => (
+        <div
+          key={index}
+          className="set-center bg-[#363636] min-w-[157px] min-h-[70px] border"
+        >
+          {/* 추후 null은 0으로 변경되어 올 예정 지금은 임시방편 */}
+          {value === null ? 0 : value}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+Dau.propTypes = {
+  data: PropTypes.array.isRequired,
+};
+
+export default Dau;