From aae303ea2ed0f3965c8305cc7d73670d02b4e287 Mon Sep 17 00:00:00 2001
From: "junghoon86.park" <junghoon86.park@lgepartner.com>
Date: Tue, 13 Feb 2024 16:57:14 +0900
Subject: [PATCH] =?UTF-8?q?[HomePanel]=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EB=B0=8F=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=EA=B1=B4.=20=20-=20=EA=B0=81=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=B3=84=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=20-=20=EC=84=9C=EB=B8=8C=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EB=82=B4=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=2010=EA=B0=9C=EB=A7=8C=20=EB=B6=88?=
 =?UTF-8?q?=EB=9F=AC=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TGrid/TGrid.module.less    |   1 -
 .../HomeBanner/HomeBannerTemplate1.jsx        | 285 ++++++++--------
 .../HomeBannerTemplate1.module.less           | 311 ++++++++++--------
 .../HomeBanner/HomeBannerTemplate2.jsx        | 214 +++++-------
 .../HomeBannerTemplate2.module.less           |   5 +-
 .../HomePanel/SubCategory/SubCategory.jsx     |   2 +-
 .../SubCategory/SubCategory.module.less       |   2 +-
 7 files changed, 412 insertions(+), 408 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less b/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less
index 8b89ee5a..68bf059f 100644
--- a/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less
+++ b/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less
@@ -17,7 +17,6 @@
     border: 1px solid #dadada;
   }
   &.homeBestSeller {
-    padding-right: 24px;
   }
   &.onSaleItem {
     margin-top: 20px;
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
index bd007a40..8c321728 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
@@ -74,128 +74,128 @@ export default function HomeBannerTemplate1() {
   const onClickBanner = useCallback(() => {}, []);
   return (
     <Container className={css.container}>
-      <SpottableComponent className={css.homeTemplateBox}>
+      <div className={css.homeTemplateBox}>
         <div className={css.mainBox}>
-          <div className={classNames(css.dualBox, css.mr18)}>
-            {/* 배너1 */}
-            {bannerInfos &&
-              bannerInfos.map((item, index) => {
-                return item.banrLctnNo === "1" &&
-                  item.shptmDspyTpNm == "Rolling" ? (
-                  <Rolling
+          <div className={css.dualBox}>
+            <SpottableComponent
+              className={classNames(css.videoBox, css.topBox)}
+            >
+              {/* 배너1 */}
+              {bannerInfos &&
+                bannerInfos.map((item, index) => {
+                  return item.banrLctnNo === "1" &&
+                    item.shptmDspyTpNm == "Rolling" ? (
+                    <Rolling
+                      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}
+                  /> */
+                    <CustomImage
+                      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
+                      }
+                    />
+                  );
+                })}
+            </SpottableComponent>
+            {/* 배너4 */}
+            <SpottableComponent
+              className={classNames(css.videoBox, css.underBox)}
+            >
+              {/* 배너2 */}
+              {bannerInfos &&
+                bannerInfos.map((item, index) => {
+                  return item.banrLctnNo === "2" &&
+                    item.shptmDspyTpNm == "Rolling" ? (
+                    /* <Rolling
                     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}
-                /> */
-                  <CustomImage
-                    key={index}
+                  /> */
+                    <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}
                     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.smallBox}
-                  key={index}
-                  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}
-                  className={css.smallBox}
-                  key={index}
-                  imageType={true}
-                /> */
-                  <CustomImage
-                    key={index}
-                    className={css.smallBox}
-                    onClickBanner={onClickBanner}
-                    delay={0}
-                    src={
-                      wdthImage1 === "" || wdthImage1 === null
-                        ? wdthImage2
-                        : wdthImage1
-                    }
-                  />
-                ) : (
-                  <CustomImage
-                    key={index}
-                    className={css.smallBox}
-                    onClickBanner={onClickBanner}
-                    delay={0}
-                    src={
-                      wdthImage1 === "" || wdthImage1 === null
-                        ? wdthImage2
-                        : wdthImage1
-                    }
-                  />
-                );
-              })}
+                    imageType={true}
+                  /> */
+                    <CustomImage
+                      key={index}
+                      className={css.smallBox}
+                      onClickBanner={onClickBanner}
+                      delay={0}
+                      src={
+                        wdthImage1 === "" || wdthImage1 === null
+                          ? wdthImage2
+                          : wdthImage1
+                      }
+                    />
+                  ) : (
+                    <CustomImage
+                      key={index}
+                      className={css.smallBox}
+                      onClickBanner={onClickBanner}
+                      delay={0}
+                      src={
+                        wdthImage1 === "" || wdthImage1 === null
+                          ? wdthImage2
+                          : wdthImage1
+                      }
+                    />
+                  );
+                })}
+            </SpottableComponent>
           </div>
 
-          {/* 배너3 */}
-          {bannerInfos &&
-            bannerInfos.map((item, index) => {
-              return item.banrLctnNo === "3" &&
-                item.shptmDspyTpNm == "Rolling" ? (
-                <Rolling
-                  bannerData={item}
-                  className={classNames(css.longBanner, css.mr18)}
-                  key={index}
-                  imageType={false}
-                />
-              ) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? (
-                <Random
-                  bannerData={item}
-                  className={classNames(css.longBanner, css.mr18)}
-                  key={index}
-                  imageType={false}
-                />
-              ) : (
-                /* <CustomImage
-                key={index}
-                className={classNames(css.longBanner, css.mr18)}
+          <SpottableComponent className={classNames(css.imgBox, css.mr18)}>
+            {/* 배너3 */}
+            {bannerInfos &&
+              bannerInfos.map((item, index) => {
+                return item.banrLctnNo === "3" &&
+                  item.shptmDspyTpNm == "Rolling" ? (
+                  <Rolling bannerData={item} key={index} imageType={false} />
+                ) : item.banrLctnNo === "3" &&
+                  item.shptmDspyTpNm == "Random" ? (
+                  <Random bannerData={item} key={index} imageType={false} />
+                ) : (
+                  /* <CustomImage
+                key={index}                
                 onClickBanner={onClickBanner}
                 delay={0}
                 src={
@@ -204,37 +204,24 @@ export default function HomeBannerTemplate1() {
                     : wdthImage1
                 }
               /> */
-                <Random
-                  bannerData={item}
-                  key={index}
-                  className={css.longBanner}
-                  imageType={false}
-                />
-              );
-            })}
-
+                  <Random bannerData={item} key={index} imageType={false} />
+                );
+              })}
+          </SpottableComponent>
           {/* 배너4 */}
-          {bannerInfos &&
-            bannerInfos.map((item, index) => {
-              return item.banrLctnNo === "4" &&
-                item.shptmDspyTpNm == "Rolling" ? (
-                <Rolling
-                  bannerData={item}
-                  key={index}
-                  className={css.longBanner}
-                  imageType={false}
-                />
-              ) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
-                <Random
-                  bannerData={item}
-                  key={index}
-                  className={css.longBanner}
-                  imageType={false}
-                />
-              ) : (
-                /* <CustomImage
+          <SpottableComponent className={classNames(css.imgBox)}>
+            {bannerInfos &&
+              bannerInfos.map((item, index) => {
+                return item.banrLctnNo === "4" &&
+                  item.shptmDspyTpNm == "Rolling" ? (
+                  <Rolling bannerData={item} key={index} imageType={false} />
+                ) : item.banrLctnNo === "4" &&
+                  item.shptmDspyTpNm == "Random" ? (
+                  <Random bannerData={item} key={index} imageType={false} />
+                ) : (
+                  /* <CustomImage
                 key={index}
-                className={css.longBanner}
+                
                 onClickBanner={onClickBanner}
                 delay={0}
                 src={
@@ -243,16 +230,12 @@ export default function HomeBannerTemplate1() {
                     : wdthImage1
                 }
               /> */
-                <Random
-                  bannerData={item}
-                  key={index}
-                  className={css.longBanner}
-                  imageType={false}
-                />
-              );
-            })}
+                  <Random bannerData={item} key={index} imageType={false} />
+                );
+              })}
+          </SpottableComponent>
         </div>
-      </SpottableComponent>
+      </div>
     </Container>
   );
 }
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
index f5a35f39..b2ef41e6 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
@@ -2,142 +2,195 @@
 
 .container {
   background-color: #f8f8f8;
+  display: flex;
+}
 
-  .homeTemplateBox {
-    margin: 24px 24px 0px;
-    .mainBox {
-      display: flex;
+.homeTemplateBox {
+  margin: 24px 24px 0px;
+  display: flex;
+  img,
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.leftBannerBox {
+  width: 744px;
+  height: 858px;
+  margin-right: 18px;
+  &.dualBox {
+    .topBox {
+      width: 744px;
+      height: 420px;
 
-      .longBanner {
-        width: 486px;
-        height: 858px;
-        border: 4px solid transparent;
+      margin-bottom: 18px;
+      border: 4px solid transparent;
+      border-radius: 12px;
+      overflow: hidden;
+      &:focus,
+      &:hover,
+      &:focus-within,
+      &:active {
+        border: 4px solid @PRIMARY_COLOR_RED;
         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");
-            }
-          }
-        }
+        .focusDropShadow();
+        border-radius: 12px;
       }
-      .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");
-              }
-            }
-          }
-        }
+    }
+    .underBox {
+      width: 744px;
+      height: 420px;
+
+      border: 4px solid transparent;
+      border-radius: 12px;
+      overflow: hidden;
+      &:focus,
+      &:hover,
+      &:focus-within,
+      &:active {
+        border: 4px solid @PRIMARY_COLOR_RED;
+        box-sizing: border-box;
+        .focusDropShadow();
+        border-radius: 12px;
       }
     }
   }
-  /* margin전용 */
-  .mt18 {
-    margin-top: 18px;
+}
+.videoBox {
+  width: 744px;
+  height: 420px;
+  margin: 0 18px 18px 0;
+  border: 4px solid transparent;
+
+  border-radius: 12px;
+  overflow: hidden;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    .focusDropShadow();
+    border-radius: 12px;
   }
-  .ml18 {
-    margin-left: 18px;
-  }
-  .mr18 {
-    margin-right: 18px;
-  }
-  .mb18 {
-    margin-bottom: 18px;
+  .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;
+    margin-right: 18px;
+    border: 4px solid transparent;
+    border-radius: 12px;
+    overflow: hidden;
+    &:focus,
+    &:hover,
+    &:focus-within,
+    &:active {
+      border: 4px solid @PRIMARY_COLOR_RED;
+      box-sizing: border-box;
+      .focusDropShadow();
+    }
+    > img {
+      width: 486px;
+      height: 858px;
+      object-fit: contain;
+    }
   }
 }
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
index 664b2f02..b4148982 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
@@ -73,152 +73,120 @@ export default function HomeBannerTemplate2() {
   const onClickBanner = useCallback(() => {}, []);
   return (
     <Container className={css.container}>
-      <SpottableComponent className={css.homeTemplateBox}>
+      <div className={css.homeTemplateBox}>
         <div className={css.mainBox}>
-          {bannerInfos &&
-            bannerInfos.map((item, index) => {
-              return item.banrLctnNo === "1" &&
-                item.shptmDspyTpNm == "Rolling" ? (
-                <Rolling
-                  bannerData={item}
-                  key={index}
-                  className={classNames(css.longBanner, css.mr18)}
-                  imageType={false}
-                />
-              ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
-                <Random
-                  bannerData={item}
-                  key={index}
-                  className={classNames(css.longBanner, css.mr18)}
-                  imageType={false}
-                />
-              ) : (
-                <CustomImage
-                  key={index}
-                  className={classNames(css.longBanner, css.mr18)}
-                  onClickBanner={onClickBanner}
-                  delay={0}
-                  src={
-                    vctpImage1 === "" || vctpImage1 === null
-                      ? vctpImage2
-                      : vctpImage1
-                  }
-                />
-              );
-            })}
-
-          <div className={css.dualBox}>
+          <SpottableComponent className={classNames(css.longBanner, css.mr18)}>
             {bannerInfos &&
               bannerInfos.map((item, index) => {
-                return item.banrLctnNo === "2" &&
+                return item.banrLctnNo === "1" &&
                   item.shptmDspyTpNm == "Rolling" ? (
-                  /* <Rolling
+                  <Rolling bannerData={item} key={index} imageType={false} />
+                ) : item.banrLctnNo === "1" &&
+                  item.shptmDspyTpNm == "Random" ? (
+                  <Random bannerData={item} key={index} imageType={false} />
+                ) : (
+                  <CustomImage
+                    key={index}
+                    onClickBanner={onClickBanner}
+                    delay={0}
+                    src={
+                      vctpImage1 === "" || vctpImage1 === null
+                        ? vctpImage2
+                        : vctpImage1
+                    }
+                  />
+                );
+              })}
+          </SpottableComponent>
+          <div className={classNames(css.dualBox, css.mr18)}>
+            <div className={css.dualBox}>
+              <SpottableComponent className={css.smallBox}>
+                {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
-                    }
-                  />
-                );
-              })}
-
+                      <CustomImage
+                        key={index}
+                        onClickBanner={onClickBanner}
+                        delay={0}
+                        src={
+                          wdthImage1 === "" || wdthImage1 === null
+                            ? wdthImage2
+                            : wdthImage1
+                        }
+                      />
+                    ) : item.banrLctnNo === "2" &&
+                      item.shptmDspyTpNm == "Random" ? (
+                      <Random bannerData={item} key={index} imageType={true} />
+                    ) : (
+                      <CustomImage
+                        key={index}
+                        onClickBanner={onClickBanner}
+                        delay={0}
+                        src={
+                          wdthImage1 === "" || wdthImage1 === null
+                            ? wdthImage2
+                            : wdthImage1
+                        }
+                      />
+                    );
+                  })}
+              </SpottableComponent>
+              <SpottableComponent className={css.smallBox}>
+                {bannerInfos &&
+                  bannerInfos.map((item, index) => {
+                    return item.banrLctnNo === "3" &&
+                      item.shptmDspyTpNm == "Rolling" ? (
+                      <Rolling bannerData={item} key={index} imageType={true} />
+                    ) : item.banrLctnNo === "3" &&
+                      item.shptmDspyTpNm == "Random" ? (
+                      <Random bannerData={item} key={index} imageType={true} />
+                    ) : (
+                      <CustomImage
+                        key={index}
+                        onClickBanner={onClickBanner}
+                        delay={0}
+                        src={
+                          wdthImage1 === "" || wdthImage1 === null
+                            ? wdthImage2
+                            : wdthImage1
+                        }
+                      />
+                    );
+                  })}
+              </SpottableComponent>
+            </div>
+          </div>
+          <SpottableComponent className={css.longBanner}>
             {bannerInfos &&
               bannerInfos.map((item, index) => {
-                return item.banrLctnNo === "3" &&
+                return item.banrLctnNo === "4" &&
                   item.shptmDspyTpNm == "Rolling" ? (
-                  <Rolling
-                    bannerData={item}
-                    key={index}
-                    className={css.smallBox}
-                    imageType={true}
-                  />
-                ) : item.banrLctnNo === "3" &&
+                  <Rolling bannerData={item} key={index} imageType={false} />
+                ) : item.banrLctnNo === "4" &&
                   item.shptmDspyTpNm == "Random" ? (
-                  <Random
-                    bannerData={item}
-                    key={index}
-                    className={css.smallBox}
-                    imageType={true}
-                  />
+                  <Random bannerData={item} key={index} imageType={false} />
                 ) : (
                   <CustomImage
                     key={index}
-                    className={css.smallBox}
                     onClickBanner={onClickBanner}
                     delay={0}
                     src={
-                      wdthImage1 === "" || wdthImage1 === null
-                        ? wdthImage2
-                        : wdthImage1
+                      vctpImage1 === "" || vctpImage1 === null
+                        ? vctpImage2
+                        : vctpImage1
                     }
                   />
                 );
               })}
-          </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={
-                    vctpImage1 === "" || vctpImage1 === null
-                      ? vctpImage2
-                      : vctpImage1
-                  }
-                />
-              );
-            })}
+          </SpottableComponent>
         </div>
-      </SpottableComponent>
+      </div>
     </Container>
   );
 }
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less
index 67d83e8c..6ed8c4f6 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less
@@ -12,13 +12,14 @@
         width: 100%;
         height: 100%;
         object-fit: cover;
-        border-radius: 12px;
       }
       .longBanner {
         width: 486px;
         height: 858px;
         border: 4px solid transparent;
         box-sizing: border-box;
+        border-radius: 12px;
+        overflow: hidden;
         &:focus,
         &:active,
         &:hover,
@@ -72,7 +73,7 @@
           height: 420px;
           border: 4px solid transparent;
           border-radius: 12px;
-
+          overflow: hidden;
           &:focus,
           &:active,
           &:hover,
diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
index c6244393..f0244607 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
@@ -67,7 +67,7 @@ const SubCategory = () => {
         getSubCategory({
           lgCatCd: currentLgCatCd,
           patnrIdList: null,
-          pageSize: null,
+          pageSize: 10,
           tabType: "CAT00102",
           filterType: "CAT00202",
         })
diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
index a3c78be6..1a5853a8 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
@@ -16,6 +16,6 @@
     overflow: unset !important;
   }
   &:last-child {
-    padding-right: 60px;
+    padding-right: 31px;
   }
 }