[홈패널] TBODY 적용

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

@@ -19,9 +19,9 @@ import Spottable from '@enact/spotlight/Spottable';
 
 import { getHomeMainContents } from '../../../actions/homeActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
+import css from './HomeBannerTemplate1.module.less';
 import Random from './RandomUnit';
 import Rolling from './RollingUnit';
-import css from './Template.module.less';
 
 const SpottableComponent = Spottable("div");
 
@@ -59,94 +59,121 @@ export default function HomeBannerTemplate1() {
       setVctpImage2(vctpImage2);
       setWdthImage1(wdthImage1);
       setWdthImage2(wdthImage2);
+      dispatch(getHomeMainContents);
     }
-  }, [homeTopDisplayInfos]);
+  }, [homeTopDisplayInfos, dispatch]);
 
   useEffect(() => {
     if (homeMainContentsBannerInfos) {
       const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
       setBannerInfos(banerInfo);
+      dispatch(getHomeMainContents);
     }
-  }, [homeMainContentsBannerInfos]);
+  }, [homeMainContentsBannerInfos, dispatch]);
-
-  useEffect(() => {
-    // console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
-    // console.log(homeTopDisplayInfos, "탑디스");
-    dispatch(getHomeMainContents);
-  }, [dispatch]);
 
   const onClickBanner = useCallback(() => {}, []);
   return (
-    <Container className={(css.container, css.homeTemplateBox)}>
+    <Container className={css.container}>
-      <SpottableComponent>
+      <SpottableComponent className={css.homeTemplateBox}>
-        <div className={classNames(css.leftBannerBox, css.dualBox)}>
+        <div className={css.mainBox}>
-          {/* 배너1 */}
+          <div className={classNames(css.dualBox, css.mr18)}>
-          {bannerInfos &&
+            {/* 배너1 */}
-            bannerInfos.map((item, index) => {
+            {bannerInfos &&
-              return item.banrLctnNo === "1" &&
+              bannerInfos.map((item, index) => {
-                item.shptmDspyTpNm == "Rolling" ? (
+                return item.banrLctnNo === "1" &&
-                <Rolling
+                  item.shptmDspyTpNm == "Rolling" ? (
-                  bannerData={item}
+                  <Rolling
-                  className={css.topBox}
+                    bannerData={item}
+                    className={css.smallBox}
+                    key={index}
+                    imageType={true}
+                  />
+                ) : item.banrLctnNo === "1" &&
+                  item.shptmDspyTpNm == "Random" ? (
+                  /* <Random
+                 bannerData={item}
+                  className={css.smallBox}
                   key={index}
                   imageType={true}
-                />
+                /> */
-              ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
+                  <CustomImage
-                <Random
+                    key={index}
+                    className={css.smallBox}
+                    onClickBanner={onClickBanner}
+                    delay={0}
+                    src={wdthImage2}
+                  />
+                ) : (
+                  <CustomImage
+                    key={index}
+                    className={css.smallBox}
+                    onClickBanner={onClickBanner}
+                    delay={0}
+                    src={
+                      wdthImage1 === "" || wdthImage1 === null
+                        ? wdthImage2
+                        : wdthImage1
+                    }
+                  />
+                );
+              })}
+            {/* 배너2 */}
+            {bannerInfos &&
+              bannerInfos.map((item, index) => {
+                return item.banrLctnNo === "2" &&
+                  item.shptmDspyTpNm == "Rolling" ? (
+                  /* <Rolling
                   bannerData={item}
-                  className={css.topBox}
+                  className={css.smallBox}
                   key={index}
                   imageType={true}
-                />
+                /> */
-              ) : (
+                  <CustomImage
-                <CustomImage
+                    key={index}
-                  key={index}
+                    className={css.smallBox}
-                  className={css.topBox}
+                    onClickBanner={onClickBanner}
-                  onClickBanner={onClickBanner}
+                    delay={0}
-                  delay={0}
+                    src={
-                  src={
+                      wdthImage1 === "" || wdthImage1 === null
-                    wdthImage1 === "" || wdthImage1 === null
+                        ? wdthImage2
-                      ? wdthImage2
+                        : wdthImage1
-                      : wdthImage1
+                    }
-                  }
+                  />
-                />
+                ) : item.banrLctnNo === "2" &&
-              );
+                  item.shptmDspyTpNm == "Random" ? (
-            })}
+                  /* <Random
-          {/* 배너2 */}
-          {bannerInfos &&
-            bannerInfos.map((item, index) => {
-              return item.banrLctnNo === "2" &&
-                item.shptmDspyTpNm == "Rolling" ? (
-                <Rolling
                   bannerData={item}
-                  className={css.underBox}
+                  className={css.smallBox}
                   key={index}
                   imageType={true}
-                />
+                /> */
-              ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
+                  <CustomImage
-                <Random
+                    key={index}
-                  bannerData={item}
+                    className={css.smallBox}
-                  className={css.underBox}
+                    onClickBanner={onClickBanner}
-                  key={index}
+                    delay={0}
-                  imageType={true}
+                    src={
-                />
+                      wdthImage1 === "" || wdthImage1 === null
-              ) : (
+                        ? wdthImage2
-                <CustomImage
+                        : wdthImage1
-                  key={index}
+                    }
-                  className={""}
+                  />
-                  onClickBanner={onClickBanner}
+                ) : (
-                  delay={0}
+                  <CustomImage
-                  src={
+                    key={index}
-                    wdthImage1 === "" || wdthImage1 === null
+                    className={css.smallBox}
-                      ? wdthImage2
+                    onClickBanner={onClickBanner}
-                      : wdthImage1
+                    delay={0}
-                  }
+                    src={
-                />
+                      wdthImage1 === "" || wdthImage1 === null
-              );
+                        ? wdthImage2
-            })}
+                        : wdthImage1
-        </div>
+                    }
+                  />
+                );
+              })}
+          </div>
 
-        <div className={css.bannerFlexRow}>
           {/* 배너3 */}
           {bannerInfos &&
             bannerInfos.map((item, index) => {
@@ -154,28 +181,34 @@ export default function HomeBannerTemplate1() {
                 item.shptmDspyTpNm == "Rolling" ? (
                 <Rolling
                   bannerData={item}
-                  className={css.banner03}
+                  className={classNames(css.longBanner, css.mr18)}
                   key={index}
                   imageType={false}
                 />
               ) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? (
                 <Random
                   bannerData={item}
-                  className={css.banner03}
+                  className={classNames(css.longBanner, css.mr18)}
                   key={index}
                   imageType={false}
                 />
               ) : (
-                <CustomImage
+                /* <CustomImage
+                key={index}
+                className={classNames(css.longBanner, css.mr18)}
+                onClickBanner={onClickBanner}
+                delay={0}
+                src={
+                  wdthImage1 === "" || wdthImage1 === null
+                    ? wdthImage2
+                    : wdthImage1
+                }
+              /> */
+                <Random
+                  bannerData={item}
                   key={index}
-                  className={css.banner03}
+                  className={css.longBanner}
-                  onClickBanner={onClickBanner}
+                  imageType={false}
-                  delay={0}
-                  src={
-                    wdthImage1 === "" || wdthImage1 === null
-                      ? wdthImage2
-                      : wdthImage1
-                  }
                 />
               );
             })}
@@ -188,27 +221,33 @@ export default function HomeBannerTemplate1() {
                 <Rolling
                   bannerData={item}
                   key={index}
-                  className={""}
+                  className={css.longBanner}
                   imageType={false}
                 />
               ) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
                 <Random
                   bannerData={item}
                   key={index}
-                  className={""}
+                  className={css.longBanner}
                   imageType={false}
                 />
               ) : (
-                <CustomImage
+                /* <CustomImage
+                key={index}
+                className={css.longBanner}
+                onClickBanner={onClickBanner}
+                delay={0}
+                src={
+                  wdthImage1 === "" || wdthImage1 === null
+                    ? wdthImage2
+                    : wdthImage1
+                }
+              /> */
+                <Random
+                  bannerData={item}
                   key={index}
-                  className={""}
+                  className={css.longBanner}
-                  onClickBanner={onClickBanner}
+                  imageType={false}
-                  delay={0}
-                  src={
-                    wdthImage1 === "" || wdthImage1 === null
-                      ? wdthImage2
-                      : wdthImage1
-                  }
                 />
               );
             })}

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less

@@ -0,0 +1,143 @@
+@import "../../../style/CommonStyle.module.less";
+
+.container {
+  background-color: #f8f8f8;
+
+  .homeTemplateBox {
+    margin: 24px 24px 0px;
+    .mainBox {
+      display: flex;
+
+      .longBanner {
+        width: 486px;
+        height: 858px;
+        border: 4px solid transparent;
+        box-sizing: border-box;
+        img,
+        video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 12px;
+        }
+        &:focus,
+        &:active,
+        &:hover,
+        &:focus-within {
+          border: 4px solid @PRIMARY_COLOR_RED;
+          box-sizing: border-box;
+          .focusDropShadow();
+          border-radius: 12px;
+        }
+        &.rollingBox {
+          position: relative;
+          .rightBtn {
+            position: absolute;
+            right: 18px;
+            top: 408px;
+            z-index: 1;
+            width: 42px;
+            height: 42px;
+            background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
+            background-size: 42px 42px;
+            background-repeat: no-repeat;
+            &:focus,
+            &:active,
+            &:hover,
+            &:focus-within {
+              background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
+            }
+          }
+          .leftBtn {
+            position: absolute;
+            left: 18px;
+            top: 408px;
+            z-index: 1;
+            width: 42px;
+            height: 42px;
+            background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
+            background-size: 42px 42px;
+            background-repeat: no-repeat;
+            &:focus,
+            &:active,
+            &:hover,
+            &:focus-within {
+              background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
+            }
+          }
+        }
+      }
+      .dualBox {
+        .smallBox {
+          width: 744px;
+          height: 420px;
+          border: 4px solid transparent;
+          border-radius: 12px;
+          img,
+          video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 12px;
+          }
+          &:focus,
+          &:active,
+          &:hover,
+          &:focus-within {
+            border: 4px solid @PRIMARY_COLOR_RED;
+            box-sizing: border-box;
+            .focusDropShadow();
+            border-radius: 12px;
+          }
+          &:nth-child(1) {
+            margin-bottom: 18px;
+          }
+          &.rollingBox {
+            position: relative;
+            .rightBtn {
+              position: absolute;
+              right: 18px;
+              top: 190px;
+              z-index: 1;
+              width: 42px;
+              height: 42px;
+              background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
+              background-size: 42px 42px;
+              background-repeat: no-repeat;
+              &:focus-within {
+                background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
+              }
+            }
+            .leftBtn {
+              position: absolute;
+              left: 18px;
+              top: 190px;
+              z-index: 1;
+              width: 42px;
+              height: 42px;
+              background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
+              background-size: 42px 42px;
+              background-repeat: no-repeat;
+              &:focus-within {
+                background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  /* margin전용 */
+  .mt18 {
+    margin-top: 18px;
+  }
+  .ml18 {
+    margin-left: 18px;
+  }
+  .mr18 {
+    margin-right: 18px;
+  }
+  .mb18 {
+    margin-bottom: 18px;
+  }
+}

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

@@ -10,7 +10,6 @@ import {
   useSelector,
 } from 'react-redux';
 
-import Marquee from '@enact/sandstone/Marquee';
 import Spotlight from '@enact/spotlight';
 import {
   SpotlightContainerDecorator,
@@ -19,9 +18,9 @@ import Spottable from '@enact/spotlight/Spottable';
 
 import { getHomeMainContents } from '../../../actions/homeActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
+import css from './HomeBannerTemplate2.module.less';
 import Random from './RandomUnit';
 import Rolling from './RollingUnit';
-import css from './Template.module.less';
 
 const SpottableComponent = Spottable("div");
 
@@ -59,82 +58,155 @@ export default function HomeBannerTemplate2() {
       setVctpImage2(vctpImage2);
       setWdthImage1(wdthImage1);
       setWdthImage2(wdthImage2);
+      dispatch(getHomeMainContents);
     }
-  }, [homeTopDisplayInfos]);
+  }, [homeTopDisplayInfos, dispatch]);
 
   useEffect(() => {
     if (homeMainContentsBannerInfos) {
       const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
       setBannerInfos(banerInfo);
+      dispatch(getHomeMainContents);
     }
-  }, [homeMainContentsBannerInfos]);
+  }, [homeMainContentsBannerInfos, dispatch]);
-
-  useEffect(() => {
-    console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
-    console.log(homeTopDisplayInfos, "탑디스");
-    dispatch(getHomeMainContents);
-  }, [dispatch]);
 
   const onClickBanner = useCallback(() => {}, []);
   return (
-    <Container className={css.homeTemplateBox}>
+    <Container className={css.container}>
-      <SpottableComponent className={css.banner03}>
+      <SpottableComponent className={css.homeTemplateBox}>
-        {bannerInfos &&
+        <div className={css.mainBox}>
-          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)}>
           {bannerInfos &&
             bannerInfos.map((item, index) => {
-              return item.banrLctnNo === "2" &&
+              return item.banrLctnNo === "1" &&
                 item.shptmDspyTpNm == "Rolling" ? (
                 <Rolling
                   bannerData={item}
                   key={index}
-                  className={""}
+                  className={classNames(css.longBanner, css.mr18)}
-                  imageType={true}
+                  imageType={false}
                 />
-              ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
+              ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
                 <Random
                   bannerData={item}
                   key={index}
-                  className={""}
+                  className={classNames(css.longBanner, css.mr18)}
-                  imageType={true}
+                  imageType={false}
                 />
               ) : (
                 <CustomImage
                   key={index}
-                  className={""}
+                  className={classNames(css.longBanner, css.mr18)}
+                  onClickBanner={onClickBanner}
+                  delay={0}
+                  src={
+                    vctpImage1 === "" || vctpImage1 === null
+                      ? vctpImage2
+                      : vctpImage1
+                  }
+                />
+              );
+            })}
+
+          <div className={css.dualBox}>
+            {bannerInfos &&
+              bannerInfos.map((item, index) => {
+                return item.banrLctnNo === "2" &&
+                  item.shptmDspyTpNm == "Rolling" ? (
+                  /* <Rolling
+                    bannerData={item}
+                    key={index}
+                    className={css.smallBox}
+                    imageType={true}
+                  /> */
+                  <CustomImage
+                    key={index}
+                    className={css.smallBox}
+                    onClickBanner={onClickBanner}
+                    delay={0}
+                    src={
+                      wdthImage1 === "" || wdthImage1 === null
+                        ? wdthImage2
+                        : wdthImage1
+                    }
+                  />
+                ) : item.banrLctnNo === "2" &&
+                  item.shptmDspyTpNm == "Random" ? (
+                  <Random
+                    bannerData={item}
+                    key={index}
+                    className={css.smallBox}
+                    imageType={true}
+                  />
+                ) : (
+                  <CustomImage
+                    key={index}
+                    className={css.smallBox}
+                    onClickBanner={onClickBanner}
+                    delay={0}
+                    src={
+                      wdthImage1 === "" || wdthImage1 === null
+                        ? wdthImage2
+                        : wdthImage1
+                    }
+                  />
+                );
+              })}
+
+            {bannerInfos &&
+              bannerInfos.map((item, index) => {
+                return item.banrLctnNo === "3" &&
+                  item.shptmDspyTpNm == "Rolling" ? (
+                  <Rolling
+                    bannerData={item}
+                    key={index}
+                    className={css.smallBox}
+                    imageType={true}
+                  />
+                ) : item.banrLctnNo === "3" &&
+                  item.shptmDspyTpNm == "Random" ? (
+                  <Random
+                    bannerData={item}
+                    key={index}
+                    className={css.smallBox}
+                    imageType={true}
+                  />
+                ) : (
+                  <CustomImage
+                    key={index}
+                    className={css.smallBox}
+                    onClickBanner={onClickBanner}
+                    delay={0}
+                    src={
+                      wdthImage1 === "" || wdthImage1 === null
+                        ? wdthImage2
+                        : wdthImage1
+                    }
+                  />
+                );
+              })}
+          </div>
+
+          {bannerInfos &&
+            bannerInfos.map((item, index) => {
+              return item.banrLctnNo === "4" &&
+                item.shptmDspyTpNm == "Rolling" ? (
+                <Rolling
+                  bannerData={item}
+                  key={index}
+                  className={classNames(css.longBanner, css.ml18)}
+                  imageType={false}
+                />
+              ) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
+                <Random
+                  bannerData={item}
+                  key={index}
+                  className={classNames(css.longBanner, css.ml18)}
+                  imageType={false}
+                />
+              ) : (
+                <CustomImage
+                  key={index}
+                  className={classNames(css.longBanner, css.ml18)}
                   onClickBanner={onClickBanner}
                   delay={0}
                   src={
@@ -146,73 +218,6 @@ export default function HomeBannerTemplate2() {
               );
             })}
         </div>
-        <div className={classNames(css.underBox, css.videoBox)}>
-          {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}>
-        {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/HomeBannerTemplate2.module.less

@@ -0,0 +1,136 @@
+@import "../../../style/CommonStyle.module.less";
+
+.container {
+  background-color: #f8f8f8;
+
+  .homeTemplateBox {
+    margin: 24px 24px 0px;
+    .mainBox {
+      display: flex;
+      img,
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 12px;
+      }
+      .longBanner {
+        width: 486px;
+        height: 858px;
+        border: 4px solid transparent;
+        box-sizing: border-box;
+        &:focus,
+        &:active,
+        &:hover,
+        &:focus-within {
+          border: 4px solid @PRIMARY_COLOR_RED;
+          box-sizing: border-box;
+          .focusDropShadow();
+          border-radius: 12px;
+        }
+        &.rollingBox {
+          position: relative;
+          .rightBtn {
+            position: absolute;
+            right: 18px;
+            top: 408px;
+            z-index: 1;
+            width: 42px;
+            height: 42px;
+            background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
+            background-size: 42px 42px;
+            background-repeat: no-repeat;
+            &:focus,
+            &:active,
+            &:hover,
+            &:focus-within {
+              background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
+            }
+          }
+          .leftBtn {
+            position: absolute;
+            left: 18px;
+            top: 408px;
+            z-index: 1;
+            width: 42px;
+            height: 42px;
+            background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
+            background-size: 42px 42px;
+            background-repeat: no-repeat;
+            &:focus,
+            &:active,
+            &:hover,
+            &:focus-within {
+              background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
+            }
+          }
+        }
+      }
+      .dualBox {
+        .smallBox {
+          width: 744px;
+          height: 420px;
+          border: 4px solid transparent;
+          border-radius: 12px;
+
+          &:focus,
+          &:active,
+          &:hover,
+          &:focus-within {
+            border: 4px solid @PRIMARY_COLOR_RED;
+            box-sizing: border-box;
+            .focusDropShadow();
+            border-radius: 12px;
+          }
+          &:nth-child(1) {
+            margin-bottom: 18px;
+          }
+          &.rollingBox {
+            position: relative;
+            .rightBtn {
+              position: absolute;
+              right: 18px;
+              top: 190px;
+              z-index: 1;
+              width: 42px;
+              height: 42px;
+              background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
+              background-size: 42px 42px;
+              background-repeat: no-repeat;
+              &:focus-within {
+                background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
+              }
+            }
+            .leftBtn {
+              position: absolute;
+              left: 18px;
+              top: 190px;
+              z-index: 1;
+              width: 42px;
+              height: 42px;
+              background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
+              background-size: 42px 42px;
+              background-repeat: no-repeat;
+              &:focus-within {
+                background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  /* margin전용 */
+  .mt18 {
+    margin-top: 18px;
+  }
+  .ml18 {
+    margin-left: 18px;
+  }
+  .mr18 {
+    margin-right: 18px;
+  }
+  .mb18 {
+    margin-bottom: 18px;
+  }
+}

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

@@ -10,7 +10,6 @@ import {
   useSelector,
 } from 'react-redux';
 
-import Marquee from '@enact/sandstone/Marquee';
 import Spotlight from '@enact/spotlight';
 import {
   SpotlightContainerDecorator,
@@ -19,27 +18,22 @@ import Spottable from '@enact/spotlight/Spottable';
 
 import { getHomeMainContents } from '../../../actions/homeActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
+import css from './HomeBannerTemplate3.module.less';
 import Random from './RandomUnit';
 import Rolling from './RollingUnit';
-import css from './Template.module.less';
 
 const SpottableComponent = Spottable("div");
 
 const Container = SpotlightContainerDecorator(
-  {
+  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
-    enterTo: "default-element",
-  },
   "div"
 );
 
 export default function HomeBannerTemplate3() {
   const dispatch = useDispatch();
-  const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
   const [bannerInfos, setBannerInfos] = useState([]);
-  const [vctpImage1, setVctpImage1] = useState(null);
+  const [vctpImage, setVctpImage] = useState(null);
-  const [vctpImage2, setVctpImage2] = useState(null);
+  const [wdthImage, setWdthImage] = useState(null);
-  const [wdthImage1, setWdthImage1] = useState(null);
-  const [wdthImage2, setWdthImage2] = useState(null);
 
   const homeMainContentsBannerInfos = useSelector(
     (state) => state.home.mainContentsData.homeMainContentsBannerInfos
@@ -55,25 +49,32 @@ export default function HomeBannerTemplate3() {
       const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2;
       const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1;
       const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2;
-      setVctpImage1(vctpImage1);
+
-      setVctpImage2(vctpImage2);
+      if (vctpImage1 === "" || vctpImage1 == null) {
-      setWdthImage1(wdthImage1);
+        setVctpImage(vctpImage2);
-      setWdthImage2(wdthImage2);
+      } else {
+        setVctpImage(vctpImage1);
+      }
+
+      if (wdthImage1 === "" || wdthImage1 === null) {
+        setWdthImage(wdthImage2);
+      } else {
+        setWdthImage(wdthImage1);
+      }
+
+      dispatch(getHomeMainContents);
     }
-  }, [homeTopDisplayInfos]);
+  }, [homeTopDisplayInfos, dispatch]);
 
   useEffect(() => {
     if (homeMainContentsBannerInfos) {
       const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
       setBannerInfos(banerInfo);
+      dispatch(getHomeMainContents);
+      console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
+      console.log(homeTopDisplayInfos, "탑디스");
     }
-  }, [homeMainContentsBannerInfos]);
+  }, [homeMainContentsBannerInfos, dispatch]);
-
-  useEffect(() => {
-    console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
-    console.log(homeTopDisplayInfos, "탑디스");
-    dispatch(getHomeMainContents);
-  }, [dispatch]);
 
   const onClickBanner = useCallback(() => {}, []);
 
@@ -86,48 +87,50 @@ export default function HomeBannerTemplate3() {
             bannerInfos.map((item, index) => {
               return item.banrLctnNo === "1" &&
                 item.shptmDspyTpNm == "Rolling" ? (
-                <Rolling bannerData={item} key={index} />
+                <Rolling bannerData={item} key={index} imageType={false} />
               ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
-                <Random bannerData={item} key={index} />
+                <Random bannerData={item} key={index} imageType={false} />
               ) : (
                 <CustomImage
                   key={index}
-                  className={""}
                   onClickBanner={onClickBanner}
-                  src={
-                    vctpImage1 === "" || vctpImage1 === null
-                      ? vctpImage2
-                      : vctpImage1
-                  }
                   delay={0}
+                  src={vctpImage}
                 />
               );
             })}
         </SpottableComponent>
+
         {/* 배너2 */}
         <SpottableComponent className={css.imgBox}>
           {bannerInfos &&
             bannerInfos.map((item, index) => {
               return item.banrLctnNo === "2" &&
                 item.shptmDspyTpNm == "Rolling" ? (
-                <Rolling bannerData={item} key={index} />
+                <Rolling
+                  bannerData={item}
+                  index={index}
+                  key={index}
+                  imageType={false}
+                />
               ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
-                <Random bannerData={item} key={index} />
+                <Random
+                  bannerData={item}
+                  index={index}
+                  key={index}
+                  imageType={false}
+                />
               ) : (
                 <CustomImage
                   key={index}
-                  className={""}
                   onClickBanner={onClickBanner}
-                  src={
-                    vctpImage1 === "" || vctpImage1 === null
-                      ? vctpImage2
-                      : vctpImage1
-                  }
                   delay={0}
+                  src={vctpImage}
                 />
               );
             })}
         </SpottableComponent>
+
         {/* 배너3 */}
         <div className={css.dualBox}>
           <SpottableComponent className={classNames(css.videoBox, css.topBox)}>
@@ -135,25 +138,21 @@ export default function HomeBannerTemplate3() {
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "3" &&
                   item.shptmDspyTpNm == "Rolling" ? (
-                  <Rolling bannerData={item} key={index} />
+                  <Rolling bannerData={item} key={index} imageType={true} />
                 ) : item.banrLctnNo === "3" &&
                   item.shptmDspyTpNm == "Random" ? (
-                  <Random bannerData={item} key={index} />
+                  <Random bannerData={item} key={index} imageType={true} />
                 ) : (
                   <CustomImage
                     key={index}
-                    className={""}
                     onClickBanner={onClickBanner}
-                    src={
-                      wdthImage1 === "" || wdthImage1 === null
-                        ? wdthImage2
-                        : wdthImage1
-                    }
                     delay={0}
+                    src={wdthImage}
                   />
                 );
               })}
           </SpottableComponent>
+
           {/* 배너4 */}
           <SpottableComponent
             className={classNames(css.videoBox, css.underBox)}
@@ -162,21 +161,16 @@ export default function HomeBannerTemplate3() {
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "4" &&
                   item.shptmDspyTpNm == "Rolling" ? (
-                  <Rolling bannerData={item} key={index} />
+                  <Rolling bannerData={item} key={index} imageType={true} />
                 ) : item.banrLctnNo === "4" &&
                   item.shptmDspyTpNm == "Random" ? (
-                  <Random bannerData={item} key={index} />
+                  <Random bannerData={item} key={index} imageType={true} />
                 ) : (
                   <CustomImage
                     key={index}
-                    className={""}
                     onClickBanner={onClickBanner}
-                    src={
-                      wdthImage1 === "" || wdthImage1 === null
-                        ? wdthImage2
-                        : wdthImage1
-                    }
                     delay={0}
+                    src={wdthImage}
                   />
                 );
               })}

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less

@@ -0,0 +1,191 @@
+@import "../../../style/CommonStyle.module.less";
+
+.container {
+  background-color: #f8f8f8;
+  display: flex;
+}
+
+.homeTemplateBox {
+  margin: 24px 24px 50px;
+  display: flex;
+  img,
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+  }
+}
+.leftBannerBox {
+  width: 744px;
+  height: 858px;
+  margin-right: 18px;
+  &.dualBox {
+    .topBox {
+      width: 744px;
+      height: 420px;
+
+      margin-bottom: 18px;
+      border: 4px solid transparent;
+      border-radius: 12px;
+      &:focus,
+      &:hover,
+      &:focus-within,
+      &:active {
+        border: 4px solid @PRIMARY_COLOR_RED;
+        box-sizing: border-box;
+        .focusDropShadow();
+        border-radius: 12px;
+      }
+    }
+    .underBox {
+      width: 744px;
+      height: 420px;
+
+      border: 4px solid transparent;
+      border-radius: 12px;
+      &:focus,
+      &:hover,
+      &:focus-within,
+      &:active {
+        border: 4px solid @PRIMARY_COLOR_RED;
+        box-sizing: border-box;
+        .focusDropShadow();
+        border-radius: 12px;
+      }
+    }
+  }
+}
+.videoBox {
+  width: 744px;
+  height: 420px;
+  margin: 0 18px 18px 0;
+  border: 4px solid transparent;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    .focusDropShadow();
+    border-radius: 12px;
+  }
+  .videoPlayer {
+    width: 744px;
+    height: 420px;
+    outline: "teal dashed 1px";
+    transform: "scale(1)";
+    border-radius: 12px;
+  }
+}
+
+.banner02 {
+  width: 744px;
+  height: 420px;
+  border-radius: 12px;
+  border: 4px solid transparent;
+  box-sizing: border-box;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    .focusDropShadow();
+    border-radius: 12px;
+  }
+}
+
+.banner03 {
+  width: 486px;
+  height: 858px;
+  border: 4px solid transparent;
+  border-radius: 12px;
+  box-sizing: border-box;
+  margin-right: 18px;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    .focusDropShadow();
+  }
+}
+
+.banner04 {
+  width: 486px;
+  height: 858px;
+  border: 4px solid transparent;
+  box-sizing: border-box;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    .focusDropShadow();
+    border-radius: 12px;
+  }
+}
+
+.bannerFlexCol {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.bannerFlexRow {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.mainBox {
+  display: flex;
+}
+
+.mainBox {
+  display: flex;
+
+  .imgBox {
+    width: 486px;
+    height: 858px;
+    background: beige;
+    margin-right: 18px;
+    border: 4px solid transparent;
+    border-radius: 12px;
+    &:focus,
+    &:hover,
+    &:focus-within,
+    &:active {
+      border: 4px solid @PRIMARY_COLOR_RED;
+      box-sizing: border-box;
+      .focusDropShadow();
+    }
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+}

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

@@ -11,7 +11,7 @@ export default function RandomUnit({ bannerData, imageType }) {
 
   useEffect(() => {
     if (bannerData) {
-      const leng = bannerData.bannerDetailInfos.length;
+      const leng = bannerDetailInfos.length;
       const num = Math.floor(Math.random() * leng);
       setRandomData(bannerDetailInfos[num]);
     }

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

@@ -1,74 +1,45 @@
 import React, {
   useCallback,
   useEffect,
+  useState,
 } from 'react';
 
 import VideoPlay from '@enact/sandstone/VideoPlayer';
-import { VirtualGridList } from '@enact/sandstone/VirtualList';
-import ri from '@enact/ui/resolution';
 
 import CustomImage from '../../../components/CustomImage/CustomImage';
 import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
-import css from './Template.module.less';
 
-const LIST_ITEM_CONF = {
+export default function RollingUnit({ bannerData, index, imageType }) {
-  ITEM_WIDTH: 561 * 2,
+  const bannerDetailInfos = bannerData.bannerDetailInfos[index];
-  ITEM_HEIGHT: 150 * 2,
+  const [rollingData, setRollingData] = useState();
-  SPACING: 30 * 2,
+  const [shptmBanrTpNm, setShptmBanrTpNm] = useState();
-};
 
-export default function RollingUnit({ bannerData, imageType }) {
   useEffect(() => {
-    console.log("롤링");
+    if (bannerData) {
-  }, []);
+      setRollingData(bannerDetailInfos);
-
+      setShptmBanrTpNm(bannerDetailInfos.shptmBanrTpNm);
-  const renderItem = useCallback(
+    }
-    ({ index, ...rest }) => {
+  }, [bannerData, index]);
-      //   const itemData = itemDatas[index];
-      const shptmBanrTpNm = bannerData.bannerDetailInfos[index].shptmBanrTpNm;
-
-      if (shptmBanrTpNm === "Image Banner") {
-        return <CustomImage></CustomImage>;
-      }
-      if (shptmBanrTpNm === "LIVE" || shptmBanrTpNm === "VOD") {
-        return <VideoPlay></VideoPlay>;
-      }
-      if (shptmBanrTpNm === "Today's Deals") {
-        return (
-          <HomeTodayDeal
-            imgAlt={bannerData.bannerDetailInfos[index].imgAlt}
-            imageName={bannerData.bannerDetailInfos[index].tmnlImgNm}
-            imgPath={bannerData.bannerDetailInfos[index].tmnlImgPath}
-            priceInfo={bannerData.bannerDetailInfos[index].priceInfo}
-            productId={bannerData.bannerDetailInfos[index].prdtId}
-            productName={bannerData.bannerDetailInfos[index].prdtNm}
-            soldoutFlag={bannerData.bannerDetailInfos[index].soldoutFlag}
-            isHorizontal={imageType} // TRUE, FALSE
-          />
-        );
-      }
-    },
-    [bannerData]
-  );
 
   return (
     <>
-      {bannerData && (
+      {shptmBanrTpNm &&
-        <VirtualGridList
+        (shptmBanrTpNm === "Image Banner" ? (
-          className={""}
+          <CustomImage></CustomImage>
-          dataSize={bannerData.bannerDetailInfos.length}
+        ) : shptmBanrTpNm === "LIVE" || shptmBanrTpNm === "VOD" ? (
-          direction="horizontal"
+          <VideoPlay></VideoPlay>
-          itemRenderer={renderItem}
+        ) : shptmBanrTpNm === "Today's Deals" ? (
-          itemSize={{
+          <HomeTodayDeal
-            minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
+            imgAlt={rollingData.imgAlt}
-            minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
+            imageName={rollingData.tmnlImgNm}
-          }}
+            imgPath={rollingData.tmnlImgPath}
-          spacing={ri.scale(LIST_ITEM_CONF.SPACING)}
+            priceInfo={rollingData.priceInfo}
-          scrollMode="translate"
+            productId={rollingData.prdtId}
-          horizontalScrollbar="hidden"
+            productName={rollingData.prdtNm}
-          noScrollByWheel
+            soldoutFlag={rollingData.soldoutFlag}
-        />
+            isHorizontal={imageType} // TRUE, FALSE
-      )}
+          />
+        ) : null)}
     </>
   );
 }

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

@@ -8,10 +8,7 @@ import {
   useSelector,
 } from 'react-redux';
 
-import {
+import TBody from '../../components/TBody/TBody';
-  SpotlightContainerDecorator,
-} from '@enact/spotlight/SpotlightContainerDecorator';
-
 import TPanel from '../../components/TPanel/TPanel';
 import BestSeller from '../HomePanel/BestSeller/BestSeller';
 import HomeBannerTemplate1 from '../HomePanel/HomeBanner/HomeBannerTemplate1';
@@ -22,15 +19,6 @@ 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);
@@ -39,6 +27,7 @@ export default function HomePanel() {
   );
   const [select, setSelect] = useState(null);
   const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
+
   // 추후 변경
   const selectSwitch = (index) => {
     switch ("DSP00203") {
@@ -64,8 +53,8 @@ export default function HomePanel() {
   }, [homeTopDisplayInfos, homeLayoutInfo]);
 
   return (
-    <TPanel className={css.panelDesign}>
+    <TPanel className={css.panel}>
-      <Container>
+      <TBody className={css.tBody}>
         {homeLayoutInfoDetail &&
           homeLayoutInfoDetail.map((item, index) => {
             return item.shptmApphmDspyOptCd == "DSP00101" ? (
@@ -80,7 +69,7 @@ export default function HomePanel() {
               <PopularShow key={index} />
             ) : null;
           })}
-      </Container>
+      </TBody>
     </TPanel>
   );
 }

com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less

@@ -1,4 +1,11 @@
-.panelDesign {
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.panel {
   overflow-y: auto;
   background-color: #f8f8f8;
 }
+
+.tBody {
+  height: 100%;
+}

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

@@ -55,7 +55,7 @@ export default function HomeTodayDeal({
     parsePriceInfo(priceInfo);
 
   return (
-    <SpottableComponent
+    <div
       className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
       onClick={() => handleClick(productId)}
     >
@@ -82,6 +82,6 @@ export default function HomeTodayDeal({
       ) : (
         <></>
       )} */}
-    </SpottableComponent>
+    </div>
   );
 }