[HomePanel] API 적용 완료

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx

@@ -1,6 +1,4 @@
-import React, {useCallback, useEffect, useState, useMemo,useRef ,memo} from "react";
+import React, { useCallback, useEffect, useState } from "react";
-
-import classNames from "classnames";
 
 import { Job } from "@enact/core/util";
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
@@ -10,10 +8,8 @@ import Marquee from "@enact/sandstone/Marquee";
 import Spottable from "@enact/spotlight/Spottable";
 import CustomImage from "../../../components/CustomImage/CustomImage";
 import css from "./Template.module.less";
-
+import Random from "./RandomUnit";
-import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
+import Rolling from "./RollingUnit";
-import banner3 from "../../../../assets/Image/img-home-banner-v-01.png";
-import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
 
 const SpottableComponent = Spottable("div");
 
@@ -24,92 +20,153 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-export default memo (function HomeBannerTemplate1 ({isOnTop, spotlightId, onScrollTop, onScrollShelf, ...rest}) {
+export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) {
-  
   const dispatch = useDispatch();
-  const homeMainContentsBannerInfos = useSelector((state) => state.home.mainContentsData.homeMainContentsBannerInfos);
-  const homeTopDisplayInfos = useSelector((state) => state.home.mainContentsData.homeTopDisplayInfos[0]);
-
-  const [topImagePath, setTopImagePath] = useState("");
-  const [verticalImage, setVerticalImage] = useState("");
   const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
 
-  // TOP IMAGE
+  const [baner1Index, setBaner1Index] = useState("");
-  const topImgPath = () => {
+  const [baner2Index, setBaner2Index] = useState("");
+  const [baner3Index, setBaner3Index] = useState("");
+  const [baner4Index, setBaner4Index] = useState("");
+
+  const [baner1Data, setBaner1Data] = useState([]);
+  const [baner2Data, setBaner2Data] = useState([]);
+  const [baner3Data, setBaner3Data] = useState([]);
+  const [baner4Data, setBaner4Data] = useState([]);
+
+  const bannerInfos = homeMainContentsBannerInfos[0].bannerInfos;
+
+  // 배너가 없는 경우, 대체용 배너 [수직]
+  const replaceBannerVtctp = useCallback(() => {
     let imgPath = "";
 
-    if(homeTopDisplayInfos.wdthtpImgPath1 == "" || homeTopDisplayInfos.wdthtpImgPath1 == null){
+    if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){
-      imgPath = homeTopDisplayInfos.wdthtpImgPath2;
+      imgPath = homeTopDisplayInfos[0].vtctpImgPath2;
     }else{
-      imgPath = homeTopDisplayInfos.wdthtpImgPath1;
+      imgPath = homeTopDisplayInfos[0].vtctpImgPath1;
     }
+      return imgPath;
+  },[]);
 
-    setTopImagePath(imgPath);
+  // 배너가 없는 경우, 대체용 배너 [수평]
-  };
+  const replaceBannerWdth = useCallback(() => {
-
-  // VerticalImage
-  const vtctpImage = () => {
     let imgPath = "";
 
-    if(homeTopDisplayInfos.vtctpImgPath1 == "" || homeTopDisplayInfos.vtctpImgPath1 == null){
+    if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){
-      imgPath = homeTopDisplayInfos.vtctpImgPath2;
+      imgPath = homeTopDisplayInfos[0].wdthtpImgPath2;
     }else{
-      imgPath = homeTopDisplayInfos.vtctpImgPath1;
+      imgPath = homeTopDisplayInfos[0].wdthtpImgPath1;
     }
-
+      return imgPath;
-    setVerticalImage(imgPath);
+  },[]);
-  };
-
-  useEffect(() => {
-    topImgPath();
-    vtctpImage();
-
-  }, [homeMainContentsBannerInfos, homeTopDisplayInfos]);
 
   const onClickBanner = useCallback(() => {
 
   }, []);
 
+  useEffect(() => {
+    bannerInfos.forEach((el, index) => {
+      if(el.banrLctnNo == "1"){
+        setBaner1Data(el);
+        setBaner1Index(index);
+      }
+      else if(el.banrLctnNo == "2"){
+        setBaner2Data(el);
+        setBaner2Index(index);
+      }
+      else if(el.banrLctnNo == "3"){
+        setBaner3Data(el);
+        setBaner3Index(index);
+      }
+      else if(el.banrLctnNo == "4"){
+        setBaner4Data(el);
+        setBaner4Index(index);
+      }
+    });
+    console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
+    console.log(homeTopDisplayInfos, "탑디스");
+  }, [homeMainContentsBannerInfos]);
+
   return (
     <Container className={(css.container, css.homeTemplateBox)}>
+      <SpottableComponent>
         <div className={css.leftBannerBox}>
+          {/* 배너1 */}
+          {baner1Data.shptmDspyTpNm == "Rolling" ? (
+            <Rolling
+              banerData={baner2Data}
+            />
+            ) : baner1Data.shptmDspyTpNm == "Random" ? (
+              <Random
+                banerData={baner3Data}
+              />
+            ) :
             <CustomImage
-            className={css.banner02}
+              className={""}
               delay={0}
               onClickBanner={onClickBanner}
-            onImageLoaded={setBannerImageLoaded}
+              onImageLoaded={""}
-            src={topImagePath}
+              src={replaceBannerWdth}
               hide={""}
             />
-
+          }
-        <CustomImage
+          {/* 배너2 롤링 테스트 진행중 */}
-          className={css.banner02}
+          {baner2Data.shptmDspyTpNm == "Rolling" ? (
-          delay={0}
+            <Random
-          onClickBanner={onClickBanner}
+              banerData={baner2Data}
-          onImageLoaded={setBannerImageLoaded}
-          src={topImagePath}
-          hide={""}
             />
+            ) : null
+          }
         </div>
+      </SpottableComponent>
 
       <div className={css.bannerFlexRow}>
+        {/* 배너3 */}
+        {baner3Data.shptmDspyTpNm == "Rolling" ? (
+            <Rolling
+              banerData={baner3Data}
+            />
+          ) : baner3Data.shptmDspyTpNm == "Random" ? (
+            <Random
+              banerData={baner3Data}
+            />
+          ) :
+          <SpottableComponent>
             <CustomImage
               className={css.banner03}
               delay={0}
               onClickBanner={onClickBanner}
-          onImageLoaded={setBannerImageLoaded}
+              onImageLoaded={""}
-          src={verticalImage}
+              src={replaceBannerVtctp}
               hide={""}
             />
+          </SpottableComponent>
+       }
+
+      {/* 배너4 */}
+      {baner4Data.shptmDspyTpNm == "Rolling" ? (
+        <SpottableComponent>
+          <Rolling
+            banerData={baner4Data}
+          />
+        </SpottableComponent>    
+        ) : baner4Data.shptmDspyTpNm == "Random" ? (
+          <Random
+            banerData={baner4Data}
+          />
+        ) :
+        <SpottableComponent>
           <CustomImage
-          className={css.banner04}
+            className={css.banner03}
             delay={0}
             onClickBanner={onClickBanner}
-          onImageLoaded={setBannerImageLoaded}
+            onImageLoaded={""}
-          src={verticalImage}
+            src={replaceBannerVtctp}
             hide={""}
           />
+        </SpottableComponent>
+      }
       </div>
     </Container>
   );
-})
+}

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx

@@ -1,8 +1,12 @@
-export default function HomeBannerTemplate2 () {
+import React, {useCallback, useEffect, useState, useMemo,useRef ,memo} from "react";
+
+export default function HomeBannerTemplate2 ({isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest}) {
+
+    useEffect(() => {
+
+    }, [])
 
     return(
         <p>템플릿2</p>
     )
-   
-
 }

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx

@@ -1,16 +1,21 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
-import { useDispatch, useSelector } from "react-redux";
+import { Job } from "@enact/core/util";
-
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
+import Spotlight from "@enact/spotlight";
+import { useDispatch, useSelector } from "react-redux";
+import Marquee from "@enact/sandstone/Marquee";
+import CustomImage from "../../../components/CustomImage/CustomImage";
+import css from "./Template.module.less";
+import Random from "./RandomUnit";
+import Rolling from "./RollingUnit";
 
 import testimg from "../../../../assets/h430054.webp";
 import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
 import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
 import banner3 from "../../../../assets/images/mainTemplate/img-home-banner-td-ver.svg";
 import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
-import css from "./Template.module.less";
 
 const SpottableComponent = Spottable("div");
 
@@ -21,36 +26,166 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-export default function HomeBannerTemplate3() {
+export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) {
   const dispatch = useDispatch();
+  const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
+
+  const [baner1Index, setBaner1Index] = useState("");
+  const [baner2Index, setBaner2Index] = useState("");
+  const [baner3Index, setBaner3Index] = useState("");
+  const [baner4Index, setBaner4Index] = useState("");
+
+  const [baner1Data, setBaner1Data] = useState([]);
+  const [baner2Data, setBaner2Data] = useState([]);
+  const [baner3Data, setBaner3Data] = useState([]);
+  const [baner4Data, setBaner4Data] = useState([]);
+
+  const bannerInfos = homeMainContentsBannerInfos[0].bannerInfos;
+
+  // 배너가 없는 경우, 대체용 배너 [수직]
+  const replaceBannerVtctp = useCallback(() => {
+    let imgPath = "";
+
+    if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){
+      imgPath = homeTopDisplayInfos[0].vtctpImgPath2;
+    }else{
+      imgPath = homeTopDisplayInfos[0].vtctpImgPath1;
+    }
+      return imgPath;
+  },[]);
+
+  // 배너가 없는 경우, 대체용 배너 [수직]
+  const replaceBannerWdth = useCallback(() => {
+    let imgPath = "";
+
+    if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){
+      imgPath = homeTopDisplayInfos[0].wdthtpImgPath2;
+    }else{
+      imgPath = homeTopDisplayInfos[0].wdthtpImgPath1;
+    }
+      return imgPath;
+  },[]);
+
+  const onClickBanner = useCallback(() => {
+
+  }, []);
+
+  useEffect(() => {
+    bannerInfos.forEach((el, index) => {
+      if(el.banrLctnNo == "1"){
+        setBaner1Data(el);
+        setBaner1Index(index);
+      }
+      else if(el.banrLctnNo == "2"){
+        setBaner2Data(el);
+        setBaner2Index(index);
+      }
+      else if(el.banrLctnNo == "3"){        
+        setBaner3Data(el);
+        setBaner3Index(index);
+      }
+      else if(el.banrLctnNo == "4"){
+        setBaner4Data(el);
+        setBaner4Index(index);
+      }
+    });
+
+    console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
+    console.log(homeTopDisplayInfos, "탑디스");
+  }, [homeMainContentsBannerInfos]);
   
-  const homeMainContentsBannerInfos = useSelector(
-    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
-  );
-  const testchk = useSelector((state) => state);
-  console.log("##", testchk);
   return (
     <Container className={css.homeTemplateBox}>
-      {homeMainContentsBannerInfos &&
-        homeMainContentsBannerInfos.map((bannerInfos) => {
-          return (
-            <HomeTodayDeal
-              homeMainContentsBannerInfos={homeMainContentsBannerInfos}
-              //가로형일때는 isHorizontal 넣어주면됨.
-              rolling={false}
-            />
-          );
-        })}
       <div class={css.mainBox}>
         <SpottableComponent className={css.imgBox}>
-          <img src={banner4} />
+          {baner1Data.shptmDspyTpNm == "Rolling" ? (
+            <Rolling
+              banerData={baner1Data}
+            />
+            ) : baner1Data.shptmDspyTpNm == "Random" ? (
+              <Random
+                banerData={baner1Data}
+              />
+            ) :
+            <CustomImage
+              className={""}
+              delay={0}
+              onClickBanner={onClickBanner}
+              onImageLoaded={""}
+              src={replaceBannerVtctp}
+              hide={""}
+            />
+          }
         </SpottableComponent>
+
+        <SpottableComponent className={css.imgBox}>
+          {baner2Data.shptmDspyTpNm == "Rolling" ? (
+             // 롤링으로 변경하기 구현 준비 중 
+            <CustomImage
+              className={""}
+              delay={0}
+              onClickBanner={onClickBanner}
+              onImageLoaded={""}
+              src={replaceBannerVtctp}
+              hide={""}
+            />
+          ) : baner2Data.shptmDspyTpNm == "Random" ? (
+            <Random
+              banerData={baner2Data}
+            />
+          ) :
+          <CustomImage
+            className={""}
+            delay={0}
+            onClickBanner={onClickBanner}
+            onImageLoaded={""}
+            src={replaceBannerVtctp}
+            hide={""}
+          />
+         }
+        </SpottableComponent>
+
         <div className={css.dualBox}>
           <SpottableComponent className={css.videoBox}>
-            <img src={banner2} />
+            {baner3Data.shptmDspyTpNm == "Rolling" ? (
+                <Rolling
+                  banerData={baner3Data}
+                />
+              ) : baner3Data.shptmDspyTpNm == "Random" ? (
+                <Random
+                  banerData={baner3Data}
+                />
+              ) :
+              <CustomImage
+                  className={""}
+                  delay={0}
+                  onClickBanner={onClickBanner}
+                  onImageLoaded={""}
+                  src={replaceBannerWdth}
+                  hide={""}
+              />
+            }
           </SpottableComponent>
+
           <SpottableComponent className={css.slideBox}>
-            <img src={banner2} />
+            {baner4Data.shptmDspyTpNm == "Rolling" ? (
+                <Rolling
+                  banerData={baner4Data}
+                />
+              ) : baner4Data.shptmDspyTpNm == "Random" ? (
+                <Random
+                  banerData={baner4Data}
+                />
+              ) :
+              <CustomImage
+                  className={""}
+                  delay={0}
+                  onClickBanner={onClickBanner}
+                  onImageLoaded={""}
+                  src={replaceBannerWdth}
+                  hide={""}
+              />
+            }
           </SpottableComponent>
         </div>
       </div>

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, memo, useState, useRef, useCallback } from "react";
+import TodayDeal from "../HomeTodayDeal/HomeTodayDeal";
+import CustomImage from "../../../components/CustomImage/CustomImage";
+import css from "./Template.module.less";
+import VideoPlay from "@enact/sandstone/VideoPlayer";
+
+export default function RandomUnit({ banerData }) {
+    
+    const bannerDetailInfos = banerData.bannerDetailInfos;
+    const [randomData, setRandomData] = useState([]);
+
+    useEffect(()=> {
+        if(bannerDetailInfos){
+         const leng = banerData.bannerDetailInfos.length;
+         const num = Math.floor(Math.random() * leng);
+         setRandomData(bannerDetailInfos[num]);
+        }
+    }, [banerData]);
+    
+    return(
+        <>
+        {randomData.shptmBanrTpNm == "Image Banner" ? (
+          <p>TEST</p>
+          ) : randomData.shptmBanrTpNm == "LIVE" ||  randomData.shptmBanrTpNm == "VOD" ? (
+                <p>비디오</p>
+          ) : randomData.shptmBanrTpNm == "Today's Deals" || randomData.shptmBanrTpNm == "" ? (
+                <TodayDeal
+                    banerData={randomData}
+                    isHorizontal={true}
+                />
+          ) : null
+        }
+        </>
+    )
+};

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect, memo, useState, useRef } from "react";
+import CustomImage from "../../../components/CustomImage/CustomImage";
+import banerImage3 from "../../../../assets/Image/img-home-banner-v-01.png";
+import css from "./Template.module.less";
+import VideoPlay from "@enact/sandstone/VideoPlayer";
+
+export default function RollingUnit({ banerData }) {
+
+    useEffect(()=> {
+        
+    }, []);
+
+    return(
+        <p>TEST</p>
+    )
+};

com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

@@ -1,69 +1,98 @@
-import React, { useEffect, useState } from "react";
+import React, {useCallback, useEffect, useState} from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
 import TPanel from "../../components/TPanel/TPanel";
-import { $L } from "../../utils/helperMethods";
 import BestSeller from "../HomePanel/BestSeller/BestSeller";
 import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
 import css from "../HomePanel/HomePanel.module.less";
 import PopularShow from "../HomePanel/PopularShow/PopularShow";
 import SubCategory from "../HomePanel/SubCategory/SubCategory";
-import HomeTemplate from "./HomeTemplate";
+import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
+import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
+import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
 
 export default function HomePanel() {
   const dispatch = useDispatch();
-
+  const homeLayoutInfo = useSelector((state) => state.home.layoutData);
-  const latoutData = useSelector((state) => state.home.layoutData);
   const homeMainContentsBannerInfos = useSelector(
     (state) => state.home.mainContentsData.homeMainContentsBannerInfos
   );
   const homeTopDisplayInfos = useSelector(
     (state) => state.home.mainContentsData.homeTopDisplayInfos
   );
-  const [selectTemplate, setSelectTemplate] = useState(null);
 
-  const getHomeLayout = () => {};
+  const [select, setSelect] = useState(null);
-
+  const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
-  const getHomeContents = () => {
+  // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중
-    // 추후 다시 한번 확인: 코드(DSP00201, 202, 203)
+  const selectSwitch = () =>{
-    // 템플릿 선택
+    switch ("DSP00203") {
-    let tempTemplate = 0;
+      case "DSP00201":
-
+        return(
-    if (homeTopDisplayInfos) {
+          <HomeBannerTemplate1
-      if (homeTopDisplayInfos[0].shptmTmplCd == "DSP00201") {
-        tempTemplate = 1;
-      }
-      if (homeTopDisplayInfos[0].shptmTmplCd == "DSP00202") {
-        tempTemplate = 2;
-      }
-      if (homeTopDisplayInfos[0].shptmTmplCd == "DSP00203") {
-        tempTemplate = 3;
-      }
-    }
-    setSelectTemplate(tempTemplate);
-  };
-
-  useEffect(() => {
-    getHomeLayout();
-    getHomeContents();
-  }, []);
-
-  return (
-    <TPanel className={css.panelDesign}>
-      <HomeTemplate
             isOnTop={""} 
             spotlightId={""} 
             onScrollTop={""} 
             onScrollShelf={""}
-        selectTemplate={selectTemplate}
+            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
-        // homeMainContentsBannerInfos={homeMainContentsBannerInfos}
+            homeTopDisplayInfos={homeTopDisplayInfos}
-        // homeTopDisplayInfos={homeTopDisplayInfos}
         />
+        )
+      case "DSP00202":
+        return(
+          <HomeBannerTemplate2
+            isOnTop={""} 
+            spotlightId={""} 
+            onScrollTop={""} 
+            onScrollShelf={""}
+            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
+            homeTopDisplayInfos={homeTopDisplayInfos}
+          />
+        )
+      case "DSP00203":
+        return(
+          <HomeBannerTemplate3
+            isOnTop={""} 
+            spotlightId={""} 
+            onScrollTop={""} 
+            onScrollShelf={""}
+            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
+            homeTopDisplayInfos={homeTopDisplayInfos}
+          />
+        )
+      default:
+        return null;
+    }
+  }
+
+  useEffect(() => {
+    if(homeTopDisplayInfos){
+      setSelect(homeTopDisplayInfos[0].shptmTmplCd);
+    }
+    if(homeLayoutInfo){
+      setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo);
+    }
+    selectSwitch();
+  }, [homeTopDisplayInfos, homeMainContentsBannerInfos, homeLayoutInfo, select]);
+
+  return (
+    <TPanel className={css.panelDesign}>
+    {homeLayoutInfoDetail &&
+      homeLayoutInfoDetail.map((item, index)=> {
+      return(
+        item.shptmApphmDspyOptCd == "DSP00101" ? (
+        selectSwitch()
+      ) : item.shptmApphmDspyOptCd == "DSP00102" ? (
         <SubCategory />
-      <HomeOnSale />
+      ) : item.shptmApphmDspyOptCd == "DSP00105" ? (
-      <PopularShow />
         <BestSeller />
+      ) : item.shptmApphmDspyOptCd == "DSP00103" ? (
+        <HomeOnSale />
+      ) : item.shptmApphmDspyOptCd == "DSP00104" ? (
+        <PopularShow />
+      ) : null
+      )})
+    }
     </TPanel>
   );
 }

com.twin.app.shoptime/src/views/HomePanel/HomeTemplate.jsx

@@ -1,32 +0,0 @@
-import React, { memo } from "react";
-
-import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
-import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
-import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
-
-export default memo (function HomeTemplate({isOnTop, spotlightId, onScrollTop, onScrollShelf, selectTemplate, ...rest}) {
-    
-
-    let SelectedTemplate = null;
-
-    switch (selectTemplate) {
-        case 1:
-            SelectedTemplate = HomeBannerTemplate1;
-            break;
-        case 2:
-            SelectedTemplate = HomeBannerTemplate2;
-            break;
-        case 3:
-            SelectedTemplate = HomeBannerTemplate3;
-            break;
-    }    
-    
-    return SelectedTemplate ? (
-        <SelectedTemplate
-            isOnTop={""} 
-            spotlightId={""} 
-            onScrollTop={""} 
-            onScrollShelf={""}
-        />
-    ) : null;
-})

com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import classNames from "classnames";
 
@@ -12,22 +12,29 @@ export default function HomeTodayDeal({
   homeMainContentsBannerInfos,
   isHorizontal,
   rolling,
+  banerData,
   ...rest
 }) {
-  const bannerDetailInfos =
+
-    homeMainContentsBannerInfos[0].bannerInfos[0].bannerDetailInfos[0];
+  const [salePrice, setSalePrice] = useState("");
-  const priceInfo = bannerDetailInfos.priceInfo;
+  const [originalPrice, setOriginalPrice] = useState("");
-  let salePrice;
+
-  const originalPrice = priceInfo.split("|")[0];
+  useEffect(() => {
+    if(banerData){
+      const priceInfo = banerData.priceInfo;
+      setOriginalPrice(priceInfo.split("|")[0]);    
       if (priceInfo.split("|")[3] == "") {
-    salePrice = priceInfo.split("|")[1];
+        setSalePrice(priceInfo.split("|")[1]);
       }      
+    }    
+  }, [banerData]);
+
   return (
     <SpottableComponent
       className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
     >
       <div>
-        <div className={css.textBox}>{bannerDetailInfos.prdtNm}</div>
+        <div className={css.textBox}>{banerData.prdtNm}</div>
         <div className={css.accBox}>
           {salePrice}
           {salePrice != originalPrice ? (
@@ -38,7 +45,7 @@ export default function HomeTodayDeal({
         </div>
       </div>
       <div className={css.itemImgBox}>
-        <img src={bannerDetailInfos.tmnlImgNm} />
+        <img src={banerData.tmnlImgNm} />
       </div>
       {rolling == true ? (
         <>
@@ -49,5 +56,6 @@ export default function HomeTodayDeal({
         <></>
       )}
     </SpottableComponent>
+
   );
 }