홈 화면

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

@@ -137,13 +137,33 @@ export const BoxContainer2 = () => {
         <div className="box-wrap two-sales img-customer">
           <h4>평균 객단가</h4>
           <div className="two-account">
-            <span>937,284,000원</span>
+            <span>
+              <NumericFormat
+                value={ averageTransactionAmount }
+                thousandSeparator
+                displayType="text"
+                suffix='원'
+              ></NumericFormat>
+            </span>
           </div>
         </div>
         <div className="box-wrap two-sales img-states">
           <h4>하루 평균 매출 및 건수</h4>
           <div className="two-account">
-            <span>73,000,000원(1,800건)</span>
+            <span>
+              <NumericFormat
+                value={ dailyAverageSales }
+                thousandSeparator
+                displayType="text"
+                suffix='원'
+              ></NumericFormat>
+              (<NumericFormat
+                value={ dailyAverageCount }
+                thousandSeparator
+                displayType="text"
+                suffix='원'
+              ></NumericFormat>)
+            </span>
           </div>
         </div>
       </div>
@@ -151,61 +171,43 @@ export const BoxContainer2 = () => {
         <div className="box-wrap ranking">
           <h4>매출이 가장 높은 요일</h4>
           <ul>
-            <li>
-              <span className="ranking-num-01">1</span>
-              <span>월요일 (354,342,000원)</span>
-              <span className="last-per-01">30%</span>
-            </li>
-            <li>
-              <span className="ranking-num-ot">2</span>
-              <span>화요일 (63,983,000원)</span>
-              <span className="last-per-ot">20%</span>
-            </li>
-            <li>
-              <span className="ranking-num-ot">3</span>
-              <span>수요일 (5,938,000원)</span>
-              <span className="last-per-ot">10%</span>
-            </li>
+            {
+              topSalesDayInfo?.daySalesRatios.map((value, index) => (
+                <li key={`key-day-sales-ratio-${index}`}>
+                  <span className={ `ranking-num-${(index === 0)? '01': 'ot'}` }>{ (index + 1) }</span>
+                  <span>{ value.dayOfWeek }</span>
+                  <span className="last-per-01">{ value.ratio + '%' }</span>
+                </li>
+              ))
+            }
           </ul>
         </div>
         <div className="box-wrap ranking">
           <h4>매출이 가장 높은 시간</h4>
           <ul>
-            <li>
-              <span className="ranking-num-01">1</span>
-              <span>18시 (5,342,000원)</span>
-              <span className="last-per-01">30%</span>
-            </li>
-            <li>
-              <span className="ranking-num-ot">2</span>
-              <span>10시 (994,000원)</span>
-              <span className="last-per-ot">20%</span>
-            </li>
-            <li>
-              <span className="ranking-num-ot">3</span>
-              <span>23시 (478,000원)</span>
-              <span className="last-per-ot">10%</span>
-            </li>
+            {
+              topSalesTimeInfo?.timeSalesRatios.map((value, index) => (
+                <li key={`key-time-sales-ratio-${index}`}>
+                  <span className={ `ranking-num-${(index === 0)? '01': 'ot'}` }>{ (index + 1) }</span>
+                  <span>{ value.hour }</span>
+                  <span className="last-per-01">{ value.ratio + '%' }</span>
+                </li>
+              ))
+            }
           </ul>
         </div>
         <div className="box-wrap ranking">
           <h4>가장 많이쓰인 결제 수단</h4>
           <ul>
-            <li>
-              <span className="ranking-num-01">1</span>
-              <span>신용카드 (354,342,000원)</span>
-              <span className="last-per-01">30%</span>
-            </li>
-            <li>
-              <span className="ranking-num-ot">2</span>
-              <span>가상계좌 (64,094,000원)</span>
-              <span className="last-per-ot">20%</span>
-            </li>
-            <li>
-              <span className="ranking-num-ot">3</span>
-              <span>휴대폰 (478,000원)</span>
-              <span className="last-per-ot">10%</span>
-            </li>
+            {
+              topPaymentMethodInfo?.paymentMethodRatios.map((value, index) => (
+                <li key={`key-payment-method-ratio-${index}`}>
+                  <span className={ `ranking-num-${(index === 0)? '01': 'ot'}` }>{ (index + 1) }</span>
+                  <span>{ value.paymentMethod }</span>
+                  <span className="last-per-01">{ value.ratio + '%' }</span>
+                </li>
+              ))
+            }
           </ul>
         </div>
       </div>

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

@@ -1,48 +1,36 @@
-import { IMAGE_ROOT } from '@/shared/constants/common';
-import { HomeNoticeList } from './home-notice-list'; 
+import moment from 'moment';
+import { useState } from 'react';
 import { BoxContainer1 } from './day-status-box-container1';
 import { BoxContainer2 } from './day-status-box-container2';
+import { HomeBannerList } from './home-banner-list';
+import { HomeNoticeList } from './home-notice-list'; 
+
 export const DayStatusBox = () => {
+  const [tabActive, setTabActive] = useState<1 | 2>(1);
+
   return (
     <>
       <div className="day-status">
         <div className="day-tab">
-          <div>2025.06.16</div>
+          <div>{ moment().format('YYYY.MM.DD') }</div>
           <div>
-            <button className="day-tab-btn active" data-target="one">일</button>
-            <button className="day-tab-btn" data-target="two">월</button>
+            <button 
+              className={ `day-tab-btn ${(tabActive===1)? 'active': ''}` }
+              onClick={ () => setTabActive(1) }
+            >일</button>
+            <button 
+              className={ `day-tab-btn ${(tabActive===2)? 'active': ''}` }
+              onClick={ () => setTabActive(2) }
+            >월</button>
           </div>
         </div>
-        <div className="con-box one active">
+        <div className={ `con-box one ${(tabActive===1)? 'active': ''}` }>
           { <BoxContainer1></BoxContainer1> }
         </div>
-        <div className="con-box two active">
+        <div className={ `con-box two ${(tabActive===2)? 'active': ''}` }>
           { <BoxContainer2></BoxContainer2> }
         </div>
-        <div className="swiper-banner">
-          <div className="banner-wrapper">
-            <div className="banner-slide active">
-              <div className="banner-content">
-                <img src={ IMAGE_ROOT + '/home-banner01.png' } alt="배너 이미지" />
-              </div>
-            </div>
-            <div className="banner-slide">
-              <div className="banner-content">
-                <img src={ IMAGE_ROOT + '/home-banner01.png' } alt="배너 이미지" />
-              </div>
-            </div>
-            <div className="banner-slide">
-              <div className="banner-content">
-                <img src={ IMAGE_ROOT + '/home-banner01.png' } alt="배너 이미지" />
-              </div>
-            </div>
-          </div>
-          <div className="banner-pagination">
-            <span className="banner-dot active" data-slide="0"></span>
-            <span className="banner-dot" data-slide="1"></span>
-            <span className="banner-dot" data-slide="2"></span>
-          </div>
-        </div>
+        { <HomeBannerList></HomeBannerList> }
         { <HomeNoticeList></HomeNoticeList> }
       </div>
     </>

src/entities/home/ui/home-banner-list.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useHomeBannerListMutation } from '../api/use-home-banner-list-mutation';
+import { 
+  HomeBannerListParams,
+  HomeBannerListResponse
+} from '../model/types';
+
+export const HomeBannerList = () => {
+
+  const { mutateAsync: homeBannerList } = useHomeBannerListMutation();
+
+  const [bannerList, setBannerList] = useState<Array<Record<string, any>>>([]);
+
+  const callHomeBannerList = () => {
+    let params: HomeBannerListParams = {};
+
+    homeBannerList(params).then((rs: HomeBannerListResponse) => {
+      console.log(rs);
+      
+    }).finally(() => {
+      let items = [
+        {title: '배너 이미지1', imageUrl: IMAGE_ROOT + '/sample_banner_0.png',  linkUrl: '', order: ''},
+        {title: '배너 이미지2', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: '', order: ''},
+        {title: '배너 이미지3', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: '', order: ''},
+      ];
+      setBannerList(items);
+    });
+  };
+
+  useEffect(() => {
+    callHomeBannerList();
+  }, []);
+
+  const swiperPagination = {
+    bulletClass: 'banner-dot',
+    bulletActiveClass: 'active',
+    el: '.banner-pagination'
+  };
+
+  return (
+    <>
+      <div className="swiper-banner">
+        <div className="banner-wrapper">
+          <Swiper
+            modules={[Pagination, Autoplay]}
+            slidesPerView={1}
+            pagination={ swiperPagination }
+          >
+          {
+            bannerList.map((value, index) => (
+              <SwiperSlide
+                key={ `banner-swiper-key-${index}` }
+              >
+                <img 
+                  src={ value.imageUrl } 
+                  alt={ value.title }
+                  style={{ 
+                    objectFit: 'contain',
+                    width: '100%',
+                    height: '100%'
+                  }}
+                />
+              </SwiperSlide>
+            ))
+          }
+          </Swiper>
+        </div>
+        <div className="banner-pagination"></div>
+      </div>  
+    </>
+  );
+};