[HomePanel] 로직 변경

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

@@ -6,7 +6,6 @@ import React, {
 
 import classNames from 'classnames';
 import {
-  shallowEqual,
   useDispatch,
   useSelector,
 } from 'react-redux';
@@ -19,6 +18,7 @@ import {
 } from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
+import { getHomeMainContents } from '../../../actions/homeActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
 import Random from './RandomUnit';
 import Rolling from './RollingUnit';
@@ -33,158 +33,188 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-export default function HomeBannerTemplate1({
-  isOnTop,
-  spotlightId,
-  onScrollTop,
-  onScrollShelf,
-  homeMainContentsBannerInfos,
-  homeTopDisplayInfos,
-  ...rest
-}) {
+export default function HomeBannerTemplate1() {
   const dispatch = useDispatch();
   const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
+  const [bannerInfos, setBannerInfos] = useState([]);
+  const [vctpImage1, setVctpImage1] = useState(null);
+  const [vctpImage2, setVctpImage2] = useState(null);
+  const [wdthImage1, setWdthImage1] = useState(null);
+  const [wdthImage2, setWdthImage2] = useState(null);
 
-  const [baner1Index, setBaner1Index] = useState("");
-  const [baner2Index, setBaner2Index] = useState("");
-  const [baner3Index, setBaner3Index] = useState("");
-  const [baner4Index, setBaner4Index] = useState("");
+  const homeMainContentsBannerInfos = useSelector(
+    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
+  );
 
-  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(() => {}, []);
+  const homeTopDisplayInfos = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos
+  );
 
   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, "탑디스");
+    if (homeTopDisplayInfos) {
+      const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1;
+      const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2;
+      const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1;
+      const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2;
+      setVctpImage1(vctpImage1);
+      setVctpImage2(vctpImage2);
+      setWdthImage1(wdthImage1);
+      setWdthImage2(wdthImage2);
+    }
+  }, [homeTopDisplayInfos]);
+
+  useEffect(() => {
+    if (homeMainContentsBannerInfos) {
+      const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
+      setBannerInfos(banerInfo);
+    }
   }, [homeMainContentsBannerInfos]);
 
+  useEffect(() => {
+    // console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
+    // console.log(homeTopDisplayInfos, "탑디스");
+    dispatch(getHomeMainContents);
+  }, [dispatch]);
+
+  const onClickBanner = useCallback(() => {}, []);
   return (
     <Container className={(css.container, css.homeTemplateBox)}>
       <SpottableComponent>
         <div className={classNames(css.leftBannerBox, css.dualBox)}>
           {/* 배너1 */}
-          {baner1Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling bannerData={baner2Data} className={css.topBox} />
-          ) : baner1Data.shptmDspyTpNm == "Random" ? (
-            <Random bannerData={baner3Data} className={css.topBox} />
-          ) : (
-            <CustomImage
-              delay={0}
-              onClickBanner={onClickBanner}
-              onImageLoaded={""}
-              src={replaceBannerWdth}
-              hide={""}
-              className={css.topBox}
-            />
-          )}
+          {bannerInfos &&
+            bannerInfos.map((item, index) => {
+              return item.banrLctnNo === "1" &&
+                item.shptmDspyTpNm == "Rolling" ? (
+                <Rolling
+                  bannerData={item}
+                  className={css.topBox}
+                  key={index}
+                  imageType={true}
+                />
+              ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
+                <Random
+                  bannerData={item}
+                  className={css.topBox}
+                  key={index}
+                  imageType={true}
+                />
+              ) : (
+                <CustomImage
+                  key={index}
+                  className={css.topBox}
+                  onClickBanner={onClickBanner}
+                  delay={0}
+                  src={
+                    wdthImage1 === "" || wdthImage1 === null
+                      ? wdthImage2
+                      : wdthImage1
+                  }
+                />
+              );
+            })}
           {/* 배너2 */}
-          {baner2Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling bannerData={baner2Data} className={css.underBox} />
-          ) : baner2Data.shptmDspyTpNm == "Random" ? (
-            <Random bannerData={baner2Data} className={css.underBox} />
-          ) : (
-            <CustomImage
-              delay={0}
-              onClickBanner={onClickBanner}
-              onImageLoaded={""}
-              src={replaceBannerWdth}
-              hide={""}
-              className={css.topBox}
-            />
-          )}
+          {bannerInfos &&
+            bannerInfos.map((item, index) => {
+              return item.banrLctnNo === "2" &&
+                item.shptmDspyTpNm == "Rolling" ? (
+                <Rolling
+                  bannerData={item}
+                  className={css.underBox}
+                  key={index}
+                  imageType={true}
+                />
+              ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
+                <Random
+                  bannerData={item}
+                  className={css.underBox}
+                  key={index}
+                  imageType={true}
+                />
+              ) : (
+                <CustomImage
+                  key={index}
+                  className={""}
+                  onClickBanner={onClickBanner}
+                  delay={0}
+                  src={
+                    wdthImage1 === "" || wdthImage1 === null
+                      ? wdthImage2
+                      : wdthImage1
+                  }
+                />
+              );
+            })}
+        </div>
+
+        <div className={css.bannerFlexRow}>
+          {/* 배너3 */}
+          {bannerInfos &&
+            bannerInfos.map((item, index) => {
+              return item.banrLctnNo === "3" &&
+                item.shptmDspyTpNm == "Rolling" ? (
+                <Rolling
+                  bannerData={item}
+                  className={css.banner03}
+                  key={index}
+                  imageType={false}
+                />
+              ) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? (
+                <Random
+                  bannerData={item}
+                  className={css.banner03}
+                  key={index}
+                  imageType={false}
+                />
+              ) : (
+                <CustomImage
+                  key={index}
+                  className={css.banner03}
+                  onClickBanner={onClickBanner}
+                  delay={0}
+                  src={
+                    wdthImage1 === "" || wdthImage1 === null
+                      ? wdthImage2
+                      : wdthImage1
+                  }
+                />
+              );
+            })}
+
+          {/* 배너4 */}
+          {bannerInfos &&
+            bannerInfos.map((item, index) => {
+              return item.banrLctnNo === "4" &&
+                item.shptmDspyTpNm == "Rolling" ? (
+                <Rolling
+                  bannerData={item}
+                  key={index}
+                  className={""}
+                  imageType={false}
+                />
+              ) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
+                <Random
+                  bannerData={item}
+                  key={index}
+                  className={""}
+                  imageType={false}
+                />
+              ) : (
+                <CustomImage
+                  key={index}
+                  className={""}
+                  onClickBanner={onClickBanner}
+                  delay={0}
+                  src={
+                    wdthImage1 === "" || wdthImage1 === null
+                      ? wdthImage2
+                      : wdthImage1
+                  }
+                />
+              );
+            })}
         </div>
       </SpottableComponent>
-
-      <div className={css.bannerFlexRow}>
-        {/* 배너3 */}
-        {baner3Data.shptmDspyTpNm == "Rolling" ? (
-          <Rolling bannerData={baner3Data} />
-        ) : baner3Data.shptmDspyTpNm == "Random" ? (
-          <Random bannerData={baner3Data} />
-        ) : (
-          <SpottableComponent>
-            <CustomImage
-              className={css.banner03}
-              delay={0}
-              onClickBanner={onClickBanner}
-              onImageLoaded={""}
-              src={replaceBannerVtctp}
-              hide={""}
-            />
-          </SpottableComponent>
-        )}
-
-        {/* 배너4 */}
-        {baner4Data.shptmDspyTpNm == "Rolling" ? (
-          <SpottableComponent>
-            <Rolling bannerData={baner4Data} />
-          </SpottableComponent>
-        ) : baner4Data.shptmDspyTpNm == "Random" ? (
-          <Random bannerData={baner4Data} />
-        ) : (
-          <SpottableComponent>
-            <CustomImage
-              className={css.banner03}
-              delay={0}
-              onClickBanner={onClickBanner}
-              onImageLoaded={""}
-              src={replaceBannerVtctp}
-              hide={""}
-            />
-          </SpottableComponent>
-        )}
-      </div>
     </Container>
   );
 }

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

@@ -1,24 +1,28 @@
 import React, {
-  memo,
   useCallback,
   useEffect,
-  useMemo,
-  useRef,
   useState,
-} from "react";
+} from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import Spotlight from "@enact/spotlight";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import { Job } from '@enact/core/util';
+import Marquee from '@enact/sandstone/Marquee';
+import Spotlight from '@enact/spotlight';
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
-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";
+import { getHomeMainContents } from '../../../actions/homeActions';
+import CustomImage from '../../../components/CustomImage/CustomImage';
+import Random from './RandomUnit';
+import Rolling from './RollingUnit';
+import css from './Template.module.less';
 
 const SpottableComponent = Spottable("div");
 
@@ -28,30 +32,188 @@ const Container = SpotlightContainerDecorator(
   },
   "div"
 );
-export default function HomeBannerTemplate2({
-  isOnTop,
-  spotlightId,
-  onScrollTop,
-  onScrollShelf,
-  homeMainContentsBannerInfos,
-  homeTopDisplayInfos,
-  ...rest
-}) {
+
+export default function HomeBannerTemplate2() {
+  const dispatch = useDispatch();
+  const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
+  const [bannerInfos, setBannerInfos] = useState([]);
+  const [vctpImage1, setVctpImage1] = useState(null);
+  const [vctpImage2, setVctpImage2] = useState(null);
+  const [wdthImage1, setWdthImage1] = useState(null);
+  const [wdthImage2, setWdthImage2] = useState(null);
+
+  const homeMainContentsBannerInfos = useSelector(
+    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
+  );
+
+  const homeTopDisplayInfos = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos
+  );
+
+  useEffect(() => {
+    if (homeTopDisplayInfos) {
+      const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1;
+      const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2;
+      const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1;
+      const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2;
+      setVctpImage1(vctpImage1);
+      setVctpImage2(vctpImage2);
+      setWdthImage1(wdthImage1);
+      setWdthImage2(wdthImage2);
+    }
+  }, [homeTopDisplayInfos]);
+
+  useEffect(() => {
+    if (homeMainContentsBannerInfos) {
+      const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
+      setBannerInfos(banerInfo);
+    }
+  }, [homeMainContentsBannerInfos]);
+
+  useEffect(() => {
+    console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
+    console.log(homeTopDisplayInfos, "탑디스");
+    dispatch(getHomeMainContents);
+  }, [dispatch]);
+
+  const onClickBanner = useCallback(() => {}, []);
   return (
     <Container className={css.homeTemplateBox}>
       <SpottableComponent className={css.banner03}>
-        <img src={banner4} />
+        {bannerInfos &&
+          bannerInfos.map((item, index) => {
+            return item.banrLctnNo === "1" &&
+              item.shptmDspyTpNm == "Rolling" ? (
+              <Rolling
+                bannerData={item}
+                key={index}
+                className={""}
+                imageType={false}
+              />
+            ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
+              <Random
+                bannerData={item}
+                key={index}
+                className={""}
+                imageType={false}
+              />
+            ) : (
+              <CustomImage
+                key={index}
+                className={""}
+                onClickBanner={onClickBanner}
+                delay={0}
+                src={
+                  vctpImage1 === "" || vctpImage1 === null
+                    ? vctpImage2
+                    : vctpImage1
+                }
+              />
+            );
+          })}
       </SpottableComponent>
+
       <SpottableComponent className={classNames(css.leftBox, css.dualBox)}>
         <div className={classNames(css.topBox, css.videoBox)}>
-          <img src={banner2} />
+          {bannerInfos &&
+            bannerInfos.map((item, index) => {
+              return item.banrLctnNo === "2" &&
+                item.shptmDspyTpNm == "Rolling" ? (
+                <Rolling
+                  bannerData={item}
+                  key={index}
+                  className={""}
+                  imageType={true}
+                />
+              ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
+                <Random
+                  bannerData={item}
+                  key={index}
+                  className={""}
+                  imageType={true}
+                />
+              ) : (
+                <CustomImage
+                  key={index}
+                  className={""}
+                  onClickBanner={onClickBanner}
+                  delay={0}
+                  src={
+                    vctpImage1 === "" || vctpImage1 === null
+                      ? vctpImage2
+                      : vctpImage1
+                  }
+                />
+              );
+            })}
         </div>
         <div className={classNames(css.underBox, css.videoBox)}>
-          <img src={banner2} />
+          {bannerInfos &&
+            bannerInfos.map((item, index) => {
+              return item.banrLctnNo === "3" &&
+                item.shptmDspyTpNm == "Rolling" ? (
+                <Rolling
+                  bannerData={item}
+                  key={index}
+                  className={""}
+                  imageType={true}
+                />
+              ) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? (
+                <Random
+                  bannerData={item}
+                  key={index}
+                  className={""}
+                  imageType={true}
+                />
+              ) : (
+                <CustomImage
+                  key={index}
+                  className={""}
+                  onClickBanner={onClickBanner}
+                  delay={0}
+                  src={
+                    wdthImage1 === "" || wdthImage1 === null
+                      ? wdthImage2
+                      : wdthImage1
+                  }
+                />
+              );
+            })}
         </div>
       </SpottableComponent>
+
       <SpottableComponent className={css.banner03}>
-        <img src={banner4} />
+        {bannerInfos &&
+          bannerInfos.map((item, index) => {
+            return item.banrLctnNo === "4" &&
+              item.shptmDspyTpNm == "Rolling" ? (
+              <Rolling
+                bannerData={item}
+                key={index}
+                className={""}
+                imageType={false}
+              />
+            ) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
+              <Random
+                bannerData={item}
+                key={index}
+                className={""}
+                imageType={false}
+              />
+            ) : (
+              <CustomImage
+                key={index}
+                className={""}
+                onClickBanner={onClickBanner}
+                delay={0}
+                src={
+                  vctpImage1 === "" || vctpImage1 === null
+                    ? vctpImage2
+                    : vctpImage1
+                }
+              />
+            );
+          })}
       </SpottableComponent>
     </Container>
   );

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

@@ -18,13 +18,8 @@ import {
 } from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
-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 { getHomeMainContents } from '../../../actions/homeActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
-import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
 import Random from './RandomUnit';
 import Rolling from './RollingUnit';
 import css from './Template.module.less';
@@ -38,155 +33,154 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-export default function HomeBannerTemplate3({
-  isOnTop,
-  spotlightId,
-  onScrollTop,
-  onScrollShelf,
-  homeMainContentsBannerInfos,
-  homeTopDisplayInfos,
-  ...rest
-}) {
+export default function HomeBannerTemplate3() {
   const dispatch = useDispatch();
   const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
+  const [bannerInfos, setBannerInfos] = useState([]);
+  const [vctpImage1, setVctpImage1] = useState(null);
+  const [vctpImage2, setVctpImage2] = useState(null);
+  const [wdthImage1, setWdthImage1] = useState(null);
+  const [wdthImage2, setWdthImage2] = useState(null);
 
-  const [baner1Index, setBaner1Index] = useState("");
-  const [baner2Index, setBaner2Index] = useState("");
-  const [baner3Index, setBaner3Index] = useState("");
-  const [baner4Index, setBaner4Index] = useState("");
+  const homeMainContentsBannerInfos = useSelector(
+    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
+  );
 
-  const [baner1Data, setBaner1Data] = useState([]);
-  const [baner2Data, setBaner2Data] = useState([]);
-  const [baner3Data, setBaner3Data] = useState([]);
-  const [baner4Data, setBaner4Data] = useState([]);
+  const homeTopDisplayInfos = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos
+  );
 
-  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;
+  useEffect(() => {
+    if (homeTopDisplayInfos) {
+      const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1;
+      const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2;
+      const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1;
+      const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2;
+      setVctpImage1(vctpImage1);
+      setVctpImage2(vctpImage2);
+      setWdthImage1(wdthImage1);
+      setWdthImage2(wdthImage2);
     }
-    return imgPath;
-  }, []);
+  }, [homeTopDisplayInfos]);
 
-  // 배너가 없는 경우, 대체용 배너 [수직]
-  const replaceBannerWdth = useCallback(() => {
-    let imgPath = "";
-
-    if (
-      homeTopDisplayInfos[0].wdthtpImgPath1 == "" ||
-      homeTopDisplayInfos[0].wdthtpImgPath1 == null
-    ) {
-      imgPath = homeTopDisplayInfos[0].wdthtpImgPath2;
-    } else {
-      imgPath = homeTopDisplayInfos[0].wdthtpImgPath1;
+  useEffect(() => {
+    if (homeMainContentsBannerInfos) {
+      const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
+      setBannerInfos(banerInfo);
     }
-    return imgPath;
-  }, []);
+  }, [homeMainContentsBannerInfos]);
+
+  useEffect(() => {
+    console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
+    console.log(homeTopDisplayInfos, "탑디스");
+    dispatch(getHomeMainContents);
+  }, [dispatch]);
 
   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.homeTemplateBox}>
-      <div class={css.mainBox}>
+      <div className={css.mainBox}>
+        {/* 배너1 */}
         <SpottableComponent className={css.imgBox}>
-          {baner1Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling bannerData={baner1Data} />
-          ) : baner1Data.shptmDspyTpNm == "Random" ? (
-            <Random bannerData={baner1Data} />
-          ) : (
-            <CustomImage
-              className={""}
-              delay={0}
-              onClickBanner={onClickBanner}
-              onImageLoaded={""}
-              src={replaceBannerVtctp}
-              hide={""}
-            />
-          )}
+          {bannerInfos &&
+            bannerInfos.map((item, index) => {
+              return item.banrLctnNo === "1" &&
+                item.shptmDspyTpNm == "Rolling" ? (
+                <Rolling bannerData={item} key={index} />
+              ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
+                <Random bannerData={item} key={index} />
+              ) : (
+                <CustomImage
+                  key={index}
+                  className={""}
+                  onClickBanner={onClickBanner}
+                  src={
+                    vctpImage1 === "" || vctpImage1 === null
+                      ? vctpImage2
+                      : vctpImage1
+                  }
+                  delay={0}
+                />
+              );
+            })}
         </SpottableComponent>
-
+        {/* 배너2 */}
         <SpottableComponent className={css.imgBox}>
-          {baner2Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling bannerData={baner2Data} />
-          ) : baner2Data.shptmDspyTpNm == "Random" ? (
-            <Random bannerData={baner2Data} />
-          ) : (
-            <CustomImage
-              className={""}
-              delay={0}
-              onClickBanner={onClickBanner}
-              onImageLoaded={""}
-              src={replaceBannerVtctp}
-              hide={""}
-            />
-          )}
+          {bannerInfos &&
+            bannerInfos.map((item, index) => {
+              return item.banrLctnNo === "2" &&
+                item.shptmDspyTpNm == "Rolling" ? (
+                <Rolling bannerData={item} key={index} />
+              ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
+                <Random bannerData={item} key={index} />
+              ) : (
+                <CustomImage
+                  key={index}
+                  className={""}
+                  onClickBanner={onClickBanner}
+                  src={
+                    vctpImage1 === "" || vctpImage1 === null
+                      ? vctpImage2
+                      : vctpImage1
+                  }
+                  delay={0}
+                />
+              );
+            })}
         </SpottableComponent>
-
+        {/* 배너3 */}
         <div className={css.dualBox}>
           <SpottableComponent className={classNames(css.videoBox, css.topBox)}>
-            {baner3Data.shptmDspyTpNm == "Rolling" ? (
-              <Rolling bannerData={baner3Data} />
-            ) : baner3Data.shptmDspyTpNm == "Random" ? (
-              <Random bannerData={baner3Data} />
-            ) : (
-              <CustomImage
-                className={""}
-                delay={0}
-                onClickBanner={onClickBanner}
-                onImageLoaded={""}
-                src={replaceBannerWdth}
-                hide={""}
-              />
-            )}
+            {bannerInfos &&
+              bannerInfos.map((item, index) => {
+                return item.banrLctnNo === "3" &&
+                  item.shptmDspyTpNm == "Rolling" ? (
+                  <Rolling bannerData={item} key={index} />
+                ) : item.banrLctnNo === "3" &&
+                  item.shptmDspyTpNm == "Random" ? (
+                  <Random bannerData={item} key={index} />
+                ) : (
+                  <CustomImage
+                    key={index}
+                    className={""}
+                    onClickBanner={onClickBanner}
+                    src={
+                      wdthImage1 === "" || wdthImage1 === null
+                        ? wdthImage2
+                        : wdthImage1
+                    }
+                    delay={0}
+                  />
+                );
+              })}
           </SpottableComponent>
-
+          {/* 배너4 */}
           <SpottableComponent
             className={classNames(css.videoBox, css.underBox)}
           >
-            {baner4Data.shptmDspyTpNm == "Rolling" ? (
-              <Rolling bannerData={baner4Data} />
-            ) : baner4Data.shptmDspyTpNm == "Random" ? (
-              <Random bannerData={baner4Data} />
-            ) : (
-              <CustomImage
-                className={""}
-                delay={0}
-                onClickBanner={onClickBanner}
-                onImageLoaded={""}
-                src={replaceBannerWdth}
-                hide={""}
-              />
-            )}
+            {bannerInfos &&
+              bannerInfos.map((item, index) => {
+                return item.banrLctnNo === "4" &&
+                  item.shptmDspyTpNm == "Rolling" ? (
+                  <Rolling bannerData={item} key={index} />
+                ) : item.banrLctnNo === "4" &&
+                  item.shptmDspyTpNm == "Random" ? (
+                  <Random bannerData={item} key={index} />
+                ) : (
+                  <CustomImage
+                    key={index}
+                    className={""}
+                    onClickBanner={onClickBanner}
+                    src={
+                      wdthImage1 === "" || wdthImage1 === null
+                        ? wdthImage2
+                        : wdthImage1
+                    }
+                    delay={0}
+                  />
+                );
+              })}
           </SpottableComponent>
         </div>
       </div>

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

@@ -1,18 +1,11 @@
 import React, {
-  memo,
-  useCallback,
   useEffect,
-  useRef,
   useState,
 } from 'react';
 
-import VideoPlay from '@enact/sandstone/VideoPlayer';
-
-import CustomImage from '../../../components/CustomImage/CustomImage';
 import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
-import css from './Template.module.less';
 
-export default function RandomUnit({ bannerData }) {
+export default function RandomUnit({ bannerData, imageType }) {
   const bannerDetailInfos = bannerData.bannerDetailInfos;
   const [randomData, setRandomData] = useState([]);
 
@@ -41,7 +34,7 @@ export default function RandomUnit({ bannerData }) {
           productId={randomData.prdtId}
           productName={randomData.prdtNm}
           soldoutFlag={randomData.soldoutFlag}
-          isHorizontal={true}
+          isHorizontal={imageType}
         />
       ) : null}
     </>

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

@@ -21,7 +21,11 @@ const LIST_ITEM_CONF = {
   SPACING: 30 * 2,
 };
 
-export default function RollingUnit({ bannerData }) {
+export default function RollingUnit({ bannerData, imageType }) {
+  useEffect(() => {
+    console.log("롤링");
+  }, []);
+
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       //   const itemData = itemDatas[index];
@@ -43,7 +47,7 @@ export default function RollingUnit({ bannerData }) {
             productId={bannerData.bannerDetailInfos[index].prdtId}
             productName={bannerData.bannerDetailInfos[index].prdtNm}
             soldoutFlag={bannerData.bannerDetailInfos[index].soldoutFlag}
-            // isHorizontal={true}
+            isHorizontal={imageType} // TRUE, FALSE
           />
         );
       }

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

@@ -1,5 +1,4 @@
 import React, {
-  useCallback,
   useEffect,
   useState,
 } from 'react';
@@ -9,6 +8,10 @@ import {
   useSelector,
 } from 'react-redux';
 
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+
 import TPanel from '../../components/TPanel/TPanel';
 import BestSeller from '../HomePanel/BestSeller/BestSeller';
 import HomeBannerTemplate1 from '../HomePanel/HomeBanner/HomeBannerTemplate1';
@@ -19,54 +22,32 @@ import css from '../HomePanel/HomePanel.module.less';
 import PopularShow from '../HomePanel/PopularShow/PopularShow';
 import SubCategory from '../HomePanel/SubCategory/SubCategory';
 
+// const SpottableComponent = Spottable("div");
+
+const Container = SpotlightContainerDecorator(
+  {
+    enterTo: "default-element",
+  },
+  "div"
+);
+
 export default function HomePanel() {
   const dispatch = useDispatch();
   const homeLayoutInfo = useSelector((state) => state.home.layoutData);
-  const homeMainContentsBannerInfos = useSelector(
-    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
-  );
   const homeTopDisplayInfos = useSelector(
     (state) => state.home.mainContentsData.homeTopDisplayInfos
   );
-
   const [select, setSelect] = useState(null);
   const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
   // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중
-  const selectSwitch = () => {
+  const selectSwitch = (index) => {
     switch ("DSP00203") {
       case "DSP00201":
-        return (
-          <HomeBannerTemplate1
-            isOnTop={""}
-            spotlightId={""}
-            onScrollTop={""}
-            onScrollShelf={""}
-            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
-            homeTopDisplayInfos={homeTopDisplayInfos}
-          />
-        );
+        return <HomeBannerTemplate1 key={index} />;
       case "DSP00202":
-        return (
-          <HomeBannerTemplate2
-            isOnTop={""}
-            spotlightId={""}
-            onScrollTop={""}
-            onScrollShelf={""}
-            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
-            homeTopDisplayInfos={homeTopDisplayInfos}
-          />
-        );
+        return <HomeBannerTemplate2 key={index} />;
       case "DSP00203":
-        return (
-          <HomeBannerTemplate3
-            isOnTop={""}
-            spotlightId={""}
-            onScrollTop={""}
-            onScrollShelf={""}
-            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
-            homeTopDisplayInfos={homeTopDisplayInfos}
-          />
-        );
+        return <HomeBannerTemplate3 key={index} />;
       default:
         return null;
     }
@@ -80,29 +61,26 @@ export default function HomePanel() {
       setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo);
     }
     selectSwitch();
-  }, [
-    homeTopDisplayInfos,
-    homeMainContentsBannerInfos,
-    homeLayoutInfo,
-    select,
-  ]);
+  }, [homeTopDisplayInfos, homeLayoutInfo]);
 
   return (
     <TPanel className={css.panelDesign}>
-      {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;
-        })}
+      <Container>
+        {homeLayoutInfoDetail &&
+          homeLayoutInfoDetail.map((item, index) => {
+            return item.shptmApphmDspyOptCd == "DSP00101" ? (
+              selectSwitch(index)
+            ) : item.shptmApphmDspyOptCd == "DSP00102" ? (
+              <SubCategory key={index} />
+            ) : item.shptmApphmDspyOptCd == "DSP00105" ? (
+              <BestSeller key={index} />
+            ) : item.shptmApphmDspyOptCd == "DSP00103" ? (
+              <HomeOnSale key={index} />
+            ) : item.shptmApphmDspyOptCd == "DSP00104" ? (
+              <PopularShow key={index} />
+            ) : null;
+          })}
+      </Container>
     </TPanel>
   );
 }

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

@@ -1,20 +1,30 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import VirtualGridList from "@enact/sandstone/VirtualList";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
-import ri from "@enact/ui/resolution";
+import VirtualGridList from '@enact/sandstone/VirtualList';
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
+import ri from '@enact/ui/resolution';
 
-import { getSubCategory } from "../../../actions/mainActions";
-import { getOnSaleInfo } from "../../../actions/onSaleActions";
-import TGrid from "../../../components/TGrid/TGrid";
-import TItemCard from "../../../components/TItemCard/TItemCard";
-import css from "../../HomePanel/SubCategory/SubCategory.module.less";
-import CategoryNav from "../../OnSalePanel/CategoryNav/CategoryNav";
-import SubCategoryItem from "../SubCategoryItem/SubCategoryItem";
+import { getSubCategory } from '../../../actions/mainActions';
+import { getOnSaleInfo } from '../../../actions/onSaleActions';
+import TGrid from '../../../components/TGrid/TGrid';
+import TItemCard from '../../../components/TItemCard/TItemCard';
+import css from '../../HomePanel/SubCategory/SubCategory.module.less';
+import CategoryNav from '../../OnSalePanel/CategoryNav/CategoryNav';
+import SubCategoryItem from '../SubCategoryItem/SubCategoryItem';
 
+const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
   {
     leaveFor: { left: "", right: "" },
@@ -79,10 +89,10 @@ const SubCategory = () => {
     [categoryItemInfos]
   );
   return (
-    <Container>
+    <SpottableComponent>
       <CategoryNav
         categoryInfos={categoryInfos}
-        currentLgCatCd={currentLgCatCd}
+        currentCategoryCode={currentLgCatCd}
         onCategoryNavClick={handleCategoryNav}
         type="home"
       />
@@ -103,7 +113,7 @@ const SubCategory = () => {
           />
         )}
       </TGrid>
-    </Container>
+    </SpottableComponent>
   );
 };