[HomePanel] API 적용 완료

2024-02-04 16:23:53 +09:00
parent c9dc8abdd8
commit 4fdff10285
8 changed files with 439 additions and 187 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
+++ b/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 classNames from "classnames";
+import React, { useCallback, useEffect, useState } from "react";

 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 banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
-import banner3 from "../../../../assets/Image/img-home-banner-v-01.png";
-import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
+import Random from "./RandomUnit";
+import Rolling from "./RollingUnit";

 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 topImgPath = () => {
+  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.wdthtpImgPath1 == "" || homeTopDisplayInfos.wdthtpImgPath1 == null){
-      imgPath = homeTopDisplayInfos.wdthtpImgPath2;
+    if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){
+      imgPath = homeTopDisplayInfos[0].vtctpImgPath2;
    }else{
-      imgPath = homeTopDisplayInfos.wdthtpImgPath1;
+      imgPath = homeTopDisplayInfos[0].vtctpImgPath1;
    }
+      return imgPath;
+  },[]);

-    setTopImagePath(imgPath);
-  };
-
-  // VerticalImage
-  const vtctpImage = () => {
+  // 배너가 없는 경우, 대체용 배너 [수평]
+  const replaceBannerWdth = useCallback(() => {
    let imgPath = "";

-    if(homeTopDisplayInfos.vtctpImgPath1 == "" || homeTopDisplayInfos.vtctpImgPath1 == null){
-      imgPath = homeTopDisplayInfos.vtctpImgPath2;
+    if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){
+      imgPath = homeTopDisplayInfos[0].wdthtpImgPath2;
    }else{
-      imgPath = homeTopDisplayInfos.vtctpImgPath1;
+      imgPath = homeTopDisplayInfos[0].wdthtpImgPath1;
    }
-
-    setVerticalImage(imgPath);
-  };
-
-  useEffect(() => {
-    topImgPath();
-    vtctpImage();
-
-  }, [homeMainContentsBannerInfos, homeTopDisplayInfos]);
+      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]);
+
  return (
    <Container className={(css.container, css.homeTemplateBox)}>
-      <div className={css.leftBannerBox}>
-        <CustomImage
-            className={css.banner02}
-            delay={0}
-            onClickBanner={onClickBanner}
-            onImageLoaded={setBannerImageLoaded}
-            src={topImagePath}
-            hide={""}
-        />
-
-        <CustomImage
-          className={css.banner02}
-          delay={0}
-          onClickBanner={onClickBanner}
-          onImageLoaded={setBannerImageLoaded}
-          src={topImagePath}
-          hide={""}
-        />
-      </div>
+      <SpottableComponent>
+        <div className={css.leftBannerBox}>
+          {/* 배너1 */}
+          {baner1Data.shptmDspyTpNm == "Rolling" ? (
+            <Rolling
+              banerData={baner2Data}
+            />
+            ) : baner1Data.shptmDspyTpNm == "Random" ? (
+              <Random
+                banerData={baner3Data}
+              />
+            ) :
+            <CustomImage
+              className={""}
+              delay={0}
+              onClickBanner={onClickBanner}
+              onImageLoaded={""}
+              src={replaceBannerWdth}
+              hide={""}
+            />
+          }
+          {/* 배너2 롤링 테스트 진행중 */}
+          {baner2Data.shptmDspyTpNm == "Rolling" ? (
+            <Random
+              banerData={baner2Data}
+            />
+            ) : null
+          }
+        </div>
+      </SpottableComponent>

      <div className={css.bannerFlexRow}>
-        <CustomImage
-          className={css.banner03}
-          delay={0}
-          onClickBanner={onClickBanner}
-          onImageLoaded={setBannerImageLoaded}
-          src={verticalImage}
-          hide={""}
-        />
-        <CustomImage
-          className={css.banner04}
-          delay={0}
-          onClickBanner={onClickBanner}
-          onImageLoaded={setBannerImageLoaded}
-          src={verticalImage}
-          hide={""}
-        />
+        {/* 배너3 */}
+        {baner3Data.shptmDspyTpNm == "Rolling" ? (
+            <Rolling
+              banerData={baner3Data}
+            />
+          ) : baner3Data.shptmDspyTpNm == "Random" ? (
+            <Random
+              banerData={baner3Data}
+            />
+          ) :
+          <SpottableComponent>
+            <CustomImage
+              className={css.banner03}
+              delay={0}
+              onClickBanner={onClickBanner}
+              onImageLoaded={""}
+              src={replaceBannerVtctp}
+              hide={""}
+            />
+          </SpottableComponent>
+       }
+
+      {/* 배너4 */}
+      {baner4Data.shptmDspyTpNm == "Rolling" ? (
+        <SpottableComponent>
+          <Rolling
+            banerData={baner4Data}
+          />
+        </SpottableComponent>    
+        ) : baner4Data.shptmDspyTpNm == "Random" ? (
+          <Random
+            banerData={baner4Data}
+          />
+        ) :
+        <SpottableComponent>
+          <CustomImage
+            className={css.banner03}
+            delay={0}
+            onClickBanner={onClickBanner}
+            onImageLoaded={""}
+            src={replaceBannerVtctp}
+            hide={""}
+          />
+        </SpottableComponent>
+      }
      </div>
    </Container>
  );
-})
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
+++ b/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>
    )
-   
-
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
+++ b/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 SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import { Job } from "@enact/core/util";
+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>
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
+++ b/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
+        }
+        </>
+    )
+};
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
+++ b/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>
+    )
+};
--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
+++ b/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 latoutData = useSelector((state) => state.home.layoutData);
+  const homeLayoutInfo = 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 getHomeContents = () => {
-    // 추후 다시 한번 확인: 코드(DSP00201, 202, 203)
-    // 템플릿 선택
-    let tempTemplate = 0;
-
-    if (homeTopDisplayInfos) {
-      if (homeTopDisplayInfos[0].shptmTmplCd == "DSP00201") {
-        tempTemplate = 1;
-      }
-      if (homeTopDisplayInfos[0].shptmTmplCd == "DSP00202") {
-        tempTemplate = 2;
-      }
-      if (homeTopDisplayInfos[0].shptmTmplCd == "DSP00203") {
-        tempTemplate = 3;
-      }
+  const [select, setSelect] = useState(null);
+  const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
+  // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중
+  const selectSwitch = () =>{
+    switch ("DSP00203") {
+      case "DSP00201":
+        return(
+          <HomeBannerTemplate1
+            isOnTop={""} 
+            spotlightId={""} 
+            onScrollTop={""} 
+            onScrollShelf={""}
+            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
+            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;
    }
-    setSelectTemplate(tempTemplate);
-  };
+  }

  useEffect(() => {
-    getHomeLayout();
-    getHomeContents();
-  }, []);
+    if(homeTopDisplayInfos){
+      setSelect(homeTopDisplayInfos[0].shptmTmplCd);
+    }
+    if(homeLayoutInfo){
+      setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo);
+    }
+    selectSwitch();
+  }, [homeTopDisplayInfos, homeMainContentsBannerInfos, homeLayoutInfo, select]);

  return (
    <TPanel className={css.panelDesign}>
-      <HomeTemplate
-        isOnTop={""}
-        spotlightId={""}
-        onScrollTop={""}
-        onScrollShelf={""}
-        selectTemplate={selectTemplate}
-        // homeMainContentsBannerInfos={homeMainContentsBannerInfos}
-        // homeTopDisplayInfos={homeTopDisplayInfos}
-      />
-      <SubCategory />
-      <HomeOnSale />
-      <PopularShow />
-      <BestSeller />
+    {homeLayoutInfoDetail &&
+      homeLayoutInfoDetail.map((item, index)=> {
+      return(
+        item.shptmApphmDspyOptCd == "DSP00101" ? (
+        selectSwitch()
+      ) : item.shptmApphmDspyOptCd == "DSP00102" ? (
+        <SubCategory />
+      ) : item.shptmApphmDspyOptCd == "DSP00105" ? (
+        <BestSeller />
+      ) : item.shptmApphmDspyOptCd == "DSP00103" ? (
+        <HomeOnSale />
+      ) : item.shptmApphmDspyOptCd == "DSP00104" ? (
+        <PopularShow />
+      ) : null
+      )})
+    }
    </TPanel>
  );
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTemplate.jsx
+++ b/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;
-})
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
+++ b/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 priceInfo = bannerDetailInfos.priceInfo;
-  let salePrice;
-  const originalPrice = priceInfo.split("|")[0];
-  if (priceInfo.split("|")[3] == "") {
-    salePrice = priceInfo.split("|")[1];
-  }
+
+  const [salePrice, setSalePrice] = useState("");
+  const [originalPrice, setOriginalPrice] = useState("");
+
+  useEffect(() => {
+    if(banerData){
+      const priceInfo = banerData.priceInfo;
+      setOriginalPrice(priceInfo.split("|")[0]);    
+      if (priceInfo.split("|")[3] == "") {
+        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>
+
  );
 }