display equip reservation statistics

components/statistics/new-equip-reservation.bar.jsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { ResponsiveBar } from '@nivo/bar';
+
+import { PoPoAxios } from '@/utils/axios.instance';
+
+const NewEquipReservationBar = ({ year }) => {
+  const [barData, setBarData] = useState([]);
+
+  useEffect(() => {
+    PoPoAxios.get(
+      `/statistics/reservation/equipment?start=${year}01&end=${year + 1}01`,
+    ).then((res) => {
+      // process data format
+      const barData = [];
+      for (const [key, value] of Object.entries(res.data.data)) {
+        barData.push({
+          month: key,
+          'new-reservation': value,
+        });
+      }
+      setBarData(barData);
+    });
+  }, [year]);
+
+  return (
+    <>
+      <ResponsiveBar
+        data={barData}
+        keys={['new-reservation']}
+        indexBy={'month'}
+        minValue={0}
+        isInteractive={false}
+        colors={{ scheme: 'dark2' }}
+        margin={{ top: 10, right: 50, bottom: 30, left: 50 }}
+      />
+    </>
+  );
+};
+
+export default NewEquipReservationBar;

pages/reservation/index.jsx

@@ -8,9 +8,12 @@ import PlaceReservationWaitTable from '@/components/place/place.reservation.wait
 import EquipmentReservationWaitTable from '@/components/equipment/equipment.reservation.wait.table';
 
 const ReservationPage = ({
-  totalReservationCnt,
-  todayReservationCnt,
-  thisWeekReservationCnt,
+  totalPlaceReservationCnt,
+  todayPlaceReservationCnt,
+  thisWeekPlaceReservationCnt,
+  totalEquipReservationCnt,
+  todayEquipReservationCnt,
+  thisWeekEquipReservationCnt,
 }) => {
   const [isLoading, setIsLoading] = useState(true);
 
@@ -52,10 +55,17 @@ const ReservationPage = ({
     <ReservationLayout>
       <h3>예약 대기 목록</h3>
       <ul style={{ padding: '0 0 0 20px' }}>
-        <li>총 예약 수: {Number(totalReservationCnt).toLocaleString()}건</li>
-        <li>오늘 예약 수: {Number(todayReservationCnt).toLocaleString()}건</li>
+        <li>총 장소 예약 수: {Number(totalPlaceReservationCnt).toLocaleString()}건</li>
+        <li>오늘 장소 예약 수: {Number(todayPlaceReservationCnt).toLocaleString()}건</li>
         <li>
-          이번 주 예약 수: {Number(thisWeekReservationCnt).toLocaleString()}건
+          이번 주 장소 예약 수: {Number(thisWeekPlaceReservationCnt).toLocaleString()}건
+        </li>
+      </ul>
+      <ul style={{ padding: '0 0 0 20px' }}>
+        <li>총 장비 예약 수: {Number(totalEquipReservationCnt).toLocaleString()}건</li>
+        <li>오늘 장비 예약 수: {Number(todayEquipReservationCnt).toLocaleString()}건</li>
+        <li>
+          이번 주 장비 예약 수: {Number(thisWeekEquipReservationCnt).toLocaleString()}건
         </li>
       </ul>
       <p>
@@ -126,17 +136,20 @@ const ReservationPage = ({
 export default ReservationPage;
 
 export async function getServerSideProps() {
-  const res1 = await PoPoAxios.get('statistics/reservation/count');
+  const res1 = await PoPoAxios.get('statistics/reservation/place/count');
   const placeReservationCntStats = res1.data;
 
-  const { totalReservationCnt, todayReservationCnt, thisWeekReservationCnt } =
-    placeReservationCntStats;
+  const res2 = await PoPoAxios.get('statistics/reservation/equipment/count');
+  const equipReservationCntStats = res2.data;
 
   return {
     props: {
-      totalReservationCnt,
-      todayReservationCnt,
-      thisWeekReservationCnt,
+      totalPlaceReservationCnt: placeReservationCntStats.totalReservationCnt,
+      todayPlaceReservationCnt: placeReservationCntStats.todayReservationCnt,
+      thisWeekPlaceReservationCnt: placeReservationCntStats.thisWeekReservationCnt,
+      totalEquipReservationCnt: equipReservationCntStats.totalReservationCnt,
+      todayEquipReservationCnt: equipReservationCntStats.todayReservationCnt,
+      thisWeekEquipReservationCnt: equipReservationCntStats.thisWeekReservationCnt,
     },
   };
 }

pages/statistics/index.jsx

@@ -15,7 +15,7 @@ const NewPlaceReservationBar = dynamic(
   { ssr: false },
 );
 const NewEquipmentReservationBar = dynamic(
-  () => import('../../components/statistics/new-place-reservation.bar'),
+  () => import('../../components/statistics/new-equip-reservation.bar'),
   { ssr: false },
 );