홈

src/entities/home/ui/day-status-box-container2.tsx

@@ -1,6 +1,76 @@
+import moment from 'moment';
+import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { HomeMonthParams, HomeMonthResponse, HomeOverviewParams, HomeOverviewResponse, Sales, Settlement, TopPaymentMethodInfo, TopSalesDayInfo, TopSalesTimeInfo } from '../model/types';
+import { useHomeOverviewMutation } from '../api/use-home-overview-mutation';
+import { useHomeMonthwMutation } from '../api/use-home-month-mutation';
+import { NumericFormat } from 'react-number-format';
 
 export const BoxContainer2 = () => {
+
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [searchDate, setSearchDate] = useState<string>(moment().format('YYYY-MM-DD'));
+  
+  const [sales, setSales] = useState<Sales>();
+  const [settlement, setSettlement] = useState<Settlement>();
+  const [salesIncrease, setSalesIncrease] = useState<number>();
+  const [settlementIncrease, setSettlementIncrease] = useState<number>();
+  
+  const [averageTransactionAmount, setAverageTransactionAmount] = useState<number>();
+  const [dailyAverageSales, setDailyAverageSales] = useState<number>();
+  const [dailyAverageCount, setDailyAverageCount] = useState<number>();
+  const [topSalesDayInfo, setTopSalesDayInfo] = useState<TopSalesDayInfo>();
+  const [topSalesTimeInfo, setTopSalesTimeInfo] = useState<TopSalesTimeInfo>();
+  const [topPaymentMethodInfo, setTopPaymentMethodInfo] = useState<TopPaymentMethodInfo>();
+  
+  const { mutateAsync: homeMonth } = useHomeMonthwMutation();
+  const { mutateAsync: homeOverview } = useHomeOverviewMutation();
+  
+  const callMonth = () => {
+    let params: HomeMonthParams = {
+      searchDate: searchDate,
+      mid: mid,
+    };
+    homeMonth(params).then((rs: HomeMonthResponse) => {
+      setSales(rs.sales);
+      setSettlement(rs.settlement);
+
+      let currentMonthAmount = rs.sales.currentMonthAmount;
+      let previousMonthAmount = rs.sales.previousMonthAmount;
+      if(currentMonthAmount && previousMonthAmount){
+        let increase = (currentMonthAmount - previousMonthAmount) / previousMonthAmount * 100;
+        setSalesIncrease(increase);
+      }
+
+      let currentMonthSettlementAmount = rs.settlement.currentMonthSettlementAmount;
+      let previousMonthSettlementAmount = rs.settlement.previousMonthSettlementAmount;
+      if(currentMonthSettlementAmount && previousMonthSettlementAmount){
+        let increase = (currentMonthSettlementAmount - previousMonthSettlementAmount) / previousMonthSettlementAmount * 100;
+        setSettlementIncrease(increase);
+      }
+    });
+  };
+
+  const callOverview = () => {
+    let params: HomeOverviewParams = {
+      searchDate: searchDate,
+      mid: mid,
+    };
+    homeOverview(params).then((rs: HomeOverviewResponse) => {
+      setAverageTransactionAmount(rs.averageTransactionAmount);
+      setDailyAverageSales(rs.dailyAverageSales);
+      setDailyAverageCount(rs.dailyAverageCount);
+      setTopSalesDayInfo(rs.topSalesDayInfo);
+      setTopSalesTimeInfo(rs.topSalesTimeInfo);
+      setTopPaymentMethodInfo(rs.topPaymentMethodInfo);
+    });
+  };
+
+  useEffect(() => {
+    // callMonth();
+    callOverview();
+  }, []);
+
   return (
     <>
       <div>
@@ -11,8 +81,23 @@ export const BoxContainer2 = () => {
         <div className="box-wrap two-sales">
           <h4>총 매출액</h4>
           <div className="today-sales mt-sty">
-            <span className="won01">937,284,000원</span>
-            <span className="per">↑ 43.6%</span>
+            <span className="won01">
+              <NumericFormat
+                value={ sales?.currentMonthAmount }
+                thousandSeparator
+                displayType="text"
+                suffix='원'
+              ></NumericFormat>
+            </span>
+            <span className={ `per ${(salesIncrease && salesIncrease >= 0)? 'plus': 'minus'}` }>
+              <NumericFormat
+                value={ salesIncrease }
+                thousandSeparator
+                displayType="text"
+                prefix={ `${(salesIncrease && salesIncrease >= 0)? '↑ ': '↓ '}` }
+                suffix='%'
+              ></NumericFormat>
+            </span>
             <a className="arrow">
               <img src={ IMAGE_ROOT + '/ico_arrow.svg' } alt="오늘 매출 바로가기" />
             </a>
@@ -21,8 +106,23 @@ export const BoxContainer2 = () => {
         <div className="box-wrap two-sales">
           <h4>총 정산액</h4>
           <div className="today-sales mt-sty">
-            <span className="won02">24,734,000원</span>
-            <span className="per">↑ 26.8%</span>
+            <span className="won02">
+              <NumericFormat
+                value={ settlement?.currentMonthSettlementAmount }
+                thousandSeparator
+                displayType="text"
+                suffix='원'
+              ></NumericFormat>
+            </span>
+            <span className={ `per ${(settlementIncrease && settlementIncrease >= 0)? 'plus': 'minus'}` }>
+              <NumericFormat
+                value={ settlementIncrease }
+                thousandSeparator
+                displayType="text"
+                prefix={ `${(settlementIncrease && settlementIncrease >= 0)? '↑ ': '↓ '}` }
+                suffix='%'
+              ></NumericFormat>
+            </span>
             <a className="arrow">
               <img src={ IMAGE_ROOT + '/ico_arrow.svg' } alt="오늘 매출 바로가기" />
             </a>

src/entities/home/ui/day-status-box.tsx

@@ -16,7 +16,7 @@ export const DayStatusBox = () => {
         <div className="con-box one active">
           { <BoxContainer1></BoxContainer1> }
         </div>
-        <div className="con-box two">
+        <div className="con-box two active">
           { <BoxContainer2></BoxContainer2> }
         </div>
         <div className="swiper-banner">