From 02086fbba9b1be88a9d50da75c008892bc8dbdf7 Mon Sep 17 00:00:00 2001
From: jangheon Pyo <ifheone@gmail.com>
Date: Fri, 16 Feb 2024 17:38:06 +0900
Subject: [PATCH] =?UTF-8?q?[HomePanel]=20=ED=99=88=ED=8C=A8=EB=84=90=20?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EB=B0=B0=EB=84=88=20=C2=A0=20Detail=20Not?=
 =?UTF-8?q?es=20:=20=C2=A0=201.=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=9E=AC=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HomeBanner/HomeBannerTemplate1.jsx        |  28 +--
 .../HomeBannerTemplate1.module.less           | 172 ++++------------
 .../HomeBanner/HomeBannerTemplate2.jsx        | 130 ++++++-------
 .../HomeBannerTemplate2.module.less           | 153 ++++-----------
 .../HomeBanner/HomeBannerTemplate3.jsx        |  22 +--
 .../HomeBannerTemplate3.module.less           | 184 ++++--------------
 .../src/views/HomePanel/HomePanel.module.less |   3 +-
 .../HomePanel/HomeTodayDeal/HomeTodayDeal.jsx |   7 +-
 .../HomeTodayDeal/HomeTodayDeal.module.less   |  71 +++----
 9 files changed, 234 insertions(+), 536 deletions(-)

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 a1d647b2..9c87ed19 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
@@ -77,16 +77,12 @@ export default function HomeBannerTemplate1() {
         <div className={css.mainBox}>
           <div className={css.dualBox}>
             {/* 배너1 */}
-            <div
-              className={classNames(css.videoBox, css.topBox)}
-              onKeyDown={keyDown}
-            >
+            <div className={css.smallBox} onKeyDown={keyDown}>
               {bannerInfos &&
                 bannerInfos.map((item, index) => {
                   return item.banrLctnNo === "1" &&
                     item.shptmDspyTpNm == "Rolling" ? (
                     <Rolling
-                      className={css.smallBox}
                       bannerData={item}
                       index={index}
                       key={index}
@@ -95,7 +91,6 @@ export default function HomeBannerTemplate1() {
                   ) : item.banrLctnNo === "1" &&
                     item.shptmDspyTpNm == "Random" ? (
                     <Random
-                      className={css.smallBox}
                       bannerData={item}
                       index={index}
                       key={index}
@@ -104,7 +99,6 @@ export default function HomeBannerTemplate1() {
                   ) : (
                     <CustomImage
                       key={index}
-                      className={css.smallBox}
                       onClickBanner={onClickBanner}
                       delay={0}
                       src={wdthImage1}
@@ -114,30 +108,22 @@ export default function HomeBannerTemplate1() {
             </div>
 
             {/* 배너2 */}
-            <div className={classNames(css.videoBox, css.underBox)}>
+            <div className={css.smallBox}>
               {bannerInfos &&
                 bannerInfos.map((item, index) => {
                   return item.banrLctnNo === "2" &&
                     item.shptmDspyTpNm == "Rolling" ? (
                     <Rolling
-                      className={css.smallBox}
                       bannerData={item}
                       index={index}
                       key={index}
                       imageType={true}
-                      // spotlightId={"roll02"}
                     />
                   ) : item.banrLctnNo === "2" &&
                     item.shptmDspyTpNm == "Random" ? (
-                    <Random
-                      className={css.smallBox}
-                      bannerData={item}
-                      key={index}
-                      imageType={true}
-                    />
+                    <Random bannerData={item} key={index} imageType={true} />
                   ) : (
                     <CustomImage
-                      className={css.smallBox}
                       key={index}
                       onClickBanner={onClickBanner}
                       delay={0}
@@ -149,7 +135,7 @@ export default function HomeBannerTemplate1() {
           </div>
 
           {/* 배너3 */}
-          <SpottableComponent className={classNames(css.imgBox, css.mr18)}>
+          <div className={css.imgBox}>
             {bannerInfos &&
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "3" &&
@@ -177,10 +163,10 @@ export default function HomeBannerTemplate1() {
                   />
                 );
               })}
-          </SpottableComponent>
+          </div>
 
           {/* 배너4 */}
-          <SpottableComponent className={classNames(css.imgBox)}>
+          <div className={css.imgBox}>
             {bannerInfos &&
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "4" &&
@@ -208,7 +194,7 @@ export default function HomeBannerTemplate1() {
                   />
                 );
               })}
-          </SpottableComponent>
+          </div>
         </div>
       </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 8b7255cf..6a9f7728 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
@@ -1,10 +1,6 @@
 @import "../../../style/CommonStyle.module.less";
 @import "../../../style/utils.module.less";
 
-.container {
-  background-color: @BG_COLOR_01;
-}
-
 .homeTemplateBox {
   padding: 24px;
   img,
@@ -12,144 +8,44 @@
     .size(@w: 100%, @h: 100%);
     object-fit: cover;
   }
-}
-.leftBannerBox {
-  .size(@w: 744px, @h: 858px);
-  &.dualBox {
-    .topBox {
-      .size(@w: 744px, @h: 420px);
-      .border-solid(@size:4px, @color:transparent);
-      margin-bottom: 18px;
-      border-radius: 12px;
-      overflow: hidden;
-      &:focus,
-      &:focus-within {
-        .focused(@boxShadow: 22px, @borderRadius: 12px);
-        position: unset;
+
+  .mainBox {
+    display: flex;
+    justify-content: space-between;
+
+    .dualBox {
+      .size(@w: 744px, @h: 858px);
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      .smallBox {
+        .size(@w: 744px, @h: 420px);
+        border-radius: 12px;
+        position: relative;
+        > img {
+          border-radius: 12px;
+        }
+        &:focus {
+          &::after {
+            .focused(@boxShadow:22px, @borderRadius:12px);
+          }
+        }
       }
     }
-    .underBox {
-      .size(@w: 744px, @h: 420px);
-      .border-solid(@size:4px, @color:transparent);
-      border-radius: 12px;
-      overflow: hidden;
-      &:focus,
-      &:focus-within {
-        .focused(@boxShadow: 22px, @borderRadius: 12px);
-        position: unset;
-      }
-    }
-  }
-}
-.videoBox {
-  .size(@w: 744px, @h: 420px);
-  .border-solid(@size:4px, @color:transparent);
-  margin: 0 18px 18px 0;
-  border-radius: 12px;
-  overflow: hidden;
-  // &:focus,
-  // &:focus-within {
-  //   .focused(@boxShadow: 22px, @borderRadius: 12px);
-  //   position: unset;
-  // }
-  .videoPlayer {
-    .size(@w: 744px, @h: 420px);
-    outline: "teal dashed 1px";
-    transform: "scale(1)";
-    border-radius: 12px;
-  }
-}
 
-.banner02 {
-  .size(@w: 744px, @h: 420px);
-  .border-solid(@size:4px, @color:transparent);
-  border-radius: 12px;
-  box-sizing: border-box;
-  &:focus,
-  &:focus-within {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
-    border-radius: 12px;
-  }
-}
-
-.banner03 {
-  .size(@w: 486px, @h: 858px);
-  .border-solid(@size:4px, @color:transparent);
-  border-radius: 12px;
-  margin-right: 18px;
-  &:focus,
-  &:focus-within {
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-    position: unset;
-  }
-}
-
-.banner04 {
-  .size(@w: 486px, @h: 858px);
-  .border-solid(@size:4px, @color:transparent);
-  &:focus,
-  &:focus-within {
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-    position: unset;
-  }
-}
-
-.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;
-  justify-content: space-between;
-}
-
-.mainBox {
-  display: flex;
-
-  .imgBox {
-    .size(@w: 486px, @h: 858px);
-    .border-solid(@size:4px, @color:transparent);
-    margin-right: 18px;
-    border-radius: 12px;
-    overflow: hidden;
-    &:focus,
-    &:focus-within {
-      .focused(@boxShadow: 22px, @borderRadius: 12px);
-      position: unset;
-    }
-    > img {
+    .imgBox {
       .size(@w: 486px, @h: 858px);
-      object-fit: contain;
+      position: relative;
+      &:focus {
+        &::after {
+          .focused(@boxShadow:22px, @borderRadius:12px);
+        }
+      }
+      > img {
+        .size(@w: 486px, @h: 858px);
+        border-radius: 12px;
+        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 2c2e660a..a965eb57 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
@@ -73,7 +73,7 @@ export default function HomeBannerTemplate2() {
       <div className={css.homeTemplateBox}>
         <div className={css.mainBox}>
           {/* 배너1 */}
-          <SpottableComponent className={classNames(css.longBanner, css.mr18)}>
+          <div className={css.imgBox}>
             {bannerInfos &&
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "1" &&
@@ -101,76 +101,74 @@ export default function HomeBannerTemplate2() {
                   />
                 );
               })}
-          </SpottableComponent>
+          </div>
 
-          <div className={classNames(css.dualBox, css.mr18)}>
-            <div className={css.dualBox}>
-              {/* 배너2 */}
-              <SpottableComponent className={css.smallBox}>
-                {bannerInfos &&
-                  bannerInfos.map((item, index) => {
-                    return item.banrLctnNo === "2" &&
-                      item.shptmDspyTpNm == "Rolling" ? (
-                      <Rolling
-                        bannerData={item}
-                        index={index}
-                        key={index}
-                        imageType={true}
-                      />
-                    ) : item.banrLctnNo === "2" &&
-                      item.shptmDspyTpNm == "Random" ? (
-                      <Random
-                        bannerData={item}
-                        index={index}
-                        key={index}
-                        imageType={true}
-                      />
-                    ) : (
-                      <CustomImage
-                        key={index}
-                        onClickBanner={onClickBanner}
-                        delay={0}
-                        src={wdthImage1}
-                      />
-                    );
-                  })}
-              </SpottableComponent>
+          <div className={css.dualBox}>
+            {/* 배너2 */}
+            <div className={css.smallBox}>
+              {bannerInfos &&
+                bannerInfos.map((item, index) => {
+                  return item.banrLctnNo === "2" &&
+                    item.shptmDspyTpNm == "Rolling" ? (
+                    <Rolling
+                      bannerData={item}
+                      index={index}
+                      key={index}
+                      imageType={true}
+                    />
+                  ) : item.banrLctnNo === "2" &&
+                    item.shptmDspyTpNm == "Random" ? (
+                    <Random
+                      bannerData={item}
+                      index={index}
+                      key={index}
+                      imageType={true}
+                    />
+                  ) : (
+                    <CustomImage
+                      key={index}
+                      onClickBanner={onClickBanner}
+                      delay={0}
+                      src={wdthImage1}
+                    />
+                  );
+                })}
+            </div>
 
-              {/* 배너3 */}
-              <SpottableComponent className={css.smallBox}>
-                {bannerInfos &&
-                  bannerInfos.map((item, index) => {
-                    return item.banrLctnNo === "3" &&
-                      item.shptmDspyTpNm == "Rolling" ? (
-                      <Rolling
-                        bannerData={item}
-                        index={index}
-                        key={index}
-                        imageType={true}
-                      />
-                    ) : item.banrLctnNo === "3" &&
-                      item.shptmDspyTpNm == "Random" ? (
-                      <Random
-                        bannerData={item}
-                        index={index}
-                        key={index}
-                        imageType={true}
-                      />
-                    ) : (
-                      <CustomImage
-                        key={index}
-                        onClickBanner={onClickBanner}
-                        delay={0}
-                        src={wdthImage2}
-                      />
-                    );
-                  })}
-              </SpottableComponent>
+            {/* 배너3 */}
+            <div className={css.smallBox}>
+              {bannerInfos &&
+                bannerInfos.map((item, index) => {
+                  return item.banrLctnNo === "3" &&
+                    item.shptmDspyTpNm == "Rolling" ? (
+                    <Rolling
+                      bannerData={item}
+                      index={index}
+                      key={index}
+                      imageType={true}
+                    />
+                  ) : item.banrLctnNo === "3" &&
+                    item.shptmDspyTpNm == "Random" ? (
+                    <Random
+                      bannerData={item}
+                      index={index}
+                      key={index}
+                      imageType={true}
+                    />
+                  ) : (
+                    <CustomImage
+                      key={index}
+                      onClickBanner={onClickBanner}
+                      delay={0}
+                      src={wdthImage2}
+                    />
+                  );
+                })}
             </div>
           </div>
 
           {/* 배너4 */}
-          <SpottableComponent className={css.longBanner}>
+          <div className={css.imgBox}>
             {bannerInfos &&
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "4" &&
@@ -198,7 +196,7 @@ export default function HomeBannerTemplate2() {
                   />
                 );
               })}
-          </SpottableComponent>
+          </div>
         </div>
       </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 9c438843..f60fd795 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
@@ -1,121 +1,52 @@
 @import "../../../style/CommonStyle.module.less";
 @import "../../../style/utils.module.less";
 
-.container {
-  background-color: @BG_COLOR_01;
-  .homeTemplateBox {
-    margin: 24px 24px 0px;
-    .mainBox {
-      display: flex;
-      img,
-      video {
-        .size(@w: 100%, @h: 100%);
-        object-fit: cover;
-      }
-      .longBanner {
-        position: relative;
-        .size(@w: 486px, @h: 858px);
-        .border-solid(@size:4px, @color:transparent);
-        border-radius: 12px;
-        overflow: hidden;
-        &:focus,
-        &:active,
-        &:hover,
-        &:focus-within {
-          .focused(@boxShadow: 22px, @borderRadius: 12px);
-          position: unset;
-        }
-        &.rollingBox {
-          position: relative;
-          .rightBtn {
-            .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto);
-            z-index: 1;
-            .size(@w: 42px, @h: 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(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px);
-            z-index: 1;
-            .size(@w: 42px, @h: 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 {
-          .size(@w: 744px, @h: 420px);
-          border-radius: 12px;
-          .border-solid(@size:4px, @color:transparent);
-          overflow: hidden;
+.homeTemplateBox {
+  padding: 24px;
+  img,
+  video {
+    .size(@w: 100%, @h: 100%);
+    object-fit: cover;
+  }
 
-          &:focus,
-          &:active,
-          &:hover,
-          &:focus-within {
-            .focused(@boxShadow: 22px, @borderRadius: 12px);
-            position: unset;
-          }
-          &:nth-child(1) {
-            margin-bottom: 18px;
-          }
-          &.rollingBox {
-            position: relative;
-            .rightBtn {
-              .position(@position: absolute, @top: 190px, @right: 18px, @bottom: auto, @left: auto);
-              z-index: 1;
-              .size(@w: 42px, @h: 42px);
-              background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
-              background-size: 42px 42px;
-              background-repeat: no-repeat;
-              &:focus-within,
-              &:focus {
-                background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
-              }
-            }
-            .leftBtn {
-              .position(@position: absolute, @top: 190px, @right: auto, @bottom: auto, @left: 18px);
-              z-index: 1;
-              .size(@w: 42px, @h: 42px);
-              background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
-              background-size: 42px 42px;
-              background-repeat: no-repeat;
-              &:focus-within,
-              &:focus {
-                background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
-              }
-            }
+  .mainBox {
+    display: flex;
+    justify-content: space-between;
+
+    .dualBox {
+      .size(@w: 744px, @h: 858px);
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      .smallBox {
+        .size(@w: 744px, @h: 420px);
+        border-radius: 12px;
+        position: relative;
+        > img {
+          border-radius: 12px;
+        }
+        &:focus {
+          &::after {
+            .focused(@boxShadow:22px, @borderRadius:12px);
           }
         }
       }
     }
-  }
-  /* margin전용 */
-  .mt18 {
-    margin-top: 18px;
-  }
-  .ml18 {
-    margin-left: 18px;
-  }
-  .mr18 {
-    margin-right: 18px;
-  }
-  .mb18 {
-    margin-bottom: 18px;
+
+    .imgBox {
+      .size(@w: 486px, @h: 858px);
+      position: relative;
+
+      &:focus {
+        &::after {
+          .focused(@boxShadow:22px, @borderRadius:12px);
+        }
+      }
+      > img {
+        .size(@w: 486px, @h: 858px);
+        border-radius: 12px;
+        object-fit: contain;
+      }
+    }
   }
 }
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
index 5f3adac1..83a323c2 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
@@ -89,7 +89,7 @@ export default function HomeBannerTemplate3() {
       <div className={css.mainBox}>
         {/* 배너1 */}
 
-        <SpottableComponent className={css.imgBox} spotlightId="banner01">
+        <div className={css.imgBox} spotlightId="banner01">
           {bannerInfos &&
             bannerInfos.map((item, index) => {
               return item.banrLctnNo === "1" &&
@@ -116,10 +116,10 @@ export default function HomeBannerTemplate3() {
                 />
               );
             })}
-        </SpottableComponent>
+        </div>
 
         {/* 배너2 */}
-        <SpottableComponent
+        <div
           className={css.imgBox}
           spotlightId="banner02"
           onFocus={_onFocus}
@@ -152,15 +152,12 @@ export default function HomeBannerTemplate3() {
                 />
               );
             })}
-        </SpottableComponent>
+        </div>
 
         <div className={css.dualBox}>
           {/* 배너3 */}
 
-          <SpottableComponent
-            className={classNames(css.videoBox, css.topBox)}
-            spotlightId="banner03"
-          >
+          <div className={css.smallBox} spotlightId="banner03">
             {bannerInfos &&
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "3" &&
@@ -188,13 +185,10 @@ export default function HomeBannerTemplate3() {
                   />
                 );
               })}
-          </SpottableComponent>
+          </div>
 
           {/* 배너4 */}
-          <SpottableComponent
-            className={classNames(css.videoBox, css.underBox)}
-            spotlightId="banner04"
-          >
+          <div className={css.smallBox} spotlightId="banner04">
             {bannerInfos &&
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "4" &&
@@ -222,7 +216,7 @@ export default function HomeBannerTemplate3() {
                   />
                 );
               })}
-          </SpottableComponent>
+          </div>
         </div>
       </div>
     </Container>
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less
index cda4b7f4..6a9f7728 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less
@@ -1,165 +1,51 @@
 @import "../../../style/CommonStyle.module.less";
 @import "../../../style/utils.module.less";
 
-.container {
-  background-color: @BG_COLOR_01;
-  display: flex;
-}
-
 .homeTemplateBox {
-  margin: 24px 24px 0px;
-  display: flex;
+  padding: 24px;
   img,
   video {
     .size(@w: 100%, @h: 100%);
     object-fit: cover;
   }
-}
-.leftBannerBox {
-  .size(@w: 744px, @h: 858px);
-  margin-right: 18px;
-  &.dualBox {
-    position: relative;
-    .topBox {
-      .size(@w: 744px, @h: 420px);
-      .border-solid(@size:4px, @color:transparent);
-      margin-bottom: 18px;
-      border-radius: 12px;
-      &:focus,
-      &:hover,
-      &:focus-within,
-      &:active {
-        .focused(@boxShadow: 22px, @borderRadius: 12px);
-        position: unset;
+
+  .mainBox {
+    display: flex;
+    justify-content: space-between;
+
+    .dualBox {
+      .size(@w: 744px, @h: 858px);
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      .smallBox {
+        .size(@w: 744px, @h: 420px);
+        border-radius: 12px;
+        position: relative;
+        > img {
+          border-radius: 12px;
+        }
+        &:focus {
+          &::after {
+            .focused(@boxShadow:22px, @borderRadius:12px);
+          }
+        }
       }
     }
-    .underBox {
-      .size(@w: 744px, @h: 420px);
-      .border-solid(@size:4px, @color:transparent);
-      border-radius: 12px;
-      &:focus,
-      &:hover,
-      &:focus-within,
-      &:active {
-        .focused(@boxShadow: 22px, @borderRadius: 12px);
-        position: unset;
-      }
-    }
-  }
-}
-.videoBox {
-  .size(@w: 744px, @h: 420px);
-  .border-solid(@size:4px, @color:transparent);
-  margin: 0 18px 18px 0;
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &:active {
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-    position: unset;
-  }
-  .videoPlayer {
-    .size(@w: 744px, @h: 420px);
-    outline: "teal dashed 1px";
-    transform: "scale(1)";
-    border-radius: 12px;
-  }
-}
 
-.banner02 {
-  .size(@w: 744px, @h: 420px);
-  .border-solid(@size:4px, @color:transparent);
-  border-radius: 12px;
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &:active {
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-  }
-}
-
-.banner03 {
-  .size(@w: 486px, @h: 858px);
-  .border-solid(@size:4px, @color:transparent);
-  border-radius: 12px;
-  margin-right: 18px;
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &:active {
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-    position: unset;
-  }
-}
-
-.banner04 {
-  .size(@w: 486px, @h: 858px);
-  .border-solid(@size:4px, @color:transparent);
-  box-sizing: border-box;
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &:active {
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-    position: unset;
-  }
-}
-
-.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;
-  position: relative;
-  .imgBox {
-    .size(@w: 486px, @h: 858px);
-    .border-solid(@size:4px, @color:transparent);
-    margin-right: 18px;
-    border-radius: 12px;
-    overflow: hidden;
-    &:focus,
-    &:hover,
-    &:focus-within,
-    &:active {
-      .focused(@boxShadow: 22px, @borderRadius: 12px);
-      position: unset;
-    }
-    > img {
+    .imgBox {
       .size(@w: 486px, @h: 858px);
-      object-fit: contain;
+      position: relative;
+      &:focus {
+        &::after {
+          .focused(@boxShadow:22px, @borderRadius:12px);
+        }
+      }
+      > img {
+        .size(@w: 486px, @h: 858px);
+        border-radius: 12px;
+        object-fit: contain;
+      }
     }
   }
 }
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less
index 68580492..1f4b3d99 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less
@@ -2,8 +2,7 @@
 @import "../../style/utils.module.less";
 
 .panel {
-  overflow-y: auto;
-  background-color: #f8f8f8;
+  background-color: @BG_COLOR_01;
 }
 
 .tBody {
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
index 3d824e22..33a44a47 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
@@ -61,7 +61,12 @@ export default function HomeTodayDeal({
   useEffect(() => {});
 
   return (
-    <div className={css.rollingWrap}>
+    <div
+      className={classNames(
+        css.rollingWrap,
+        isHorizontal && css.isHorizontalWrap
+      )}
+    >
       {rolling === true && (
         <SpottableComponent
           className={classNames(css.arrow, css.leftBtn)}
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
index f3b9d3ef..a153d6de 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
@@ -3,110 +3,113 @@
 .rollingWrap {
   position: relative;
   .itemBox {
+    .size(@w: 486px, @h: 858px);
     background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_ver.png);
-    background-repeat: no-repeat;
     background-size: 486px 858px;
-    background-position: center center;
-    .size(@w: 744px, @h: 420px);
-    .border-solid(@size:4px, @color:transparent);
+    background-position: left top;
     border-radius: 12px;
     position: relative;
-
+    padding: 268px 36px 0;
     img {
       width: 100%;
       object-fit: contain;
     }
+    text-align: center;
     .textBox {
-      margin: 268px 36px 0;
-      .size(@w: 406px, @h: 80px);
+      .size(@w: 100%, @h: 80px);
       .elip(@clamp:2);
-      font-weight: bold;
       .font (@fontFamily:@baseFontBold, @fontSize:30px);
       color: @COLOR_GRAY06;
       line-height: 1.27;
+      margin-bottom: 6px;
     }
 
     .accBox {
-      .size(@w: 406px, @h: 50px);
-      margin: 6px 36px 0;
-      text-align: center;
+      .size(@w: 100%, @h: 50px);
       .font (@fontFamily:@baseFontBold, @fontSize:42px);
       color: @PRIMARY_COLOR_RED;
-      font-weight: bold;
       line-height: 1.14;
+      margin-bottom: 35px;
       .saleAccBox {
-        .font (@fontFamily:@baseFontBold, @fontSize:24px);
+        .font (@fontFamily:@baseFont, @fontSize:24px);
         color: @COLOR_GRAY04;
         vertical-align: middle;
         text-decoration: line-through;
+        margin-left: 9px;
       }
     }
     .itemImgBox {
-      margin: 29px 62px 60px;
-      .size(@w: 354px, @h: 354px);
       > img {
-        width: 100%;
+        .size(@w: 354px, @h: 354px);
       }
     }
 
     &.isHorizontal {
+      .size(@w: 744px, @h: 420px);
       background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_hor.png);
       background-size: 744px 420px;
+      background-position: center center;
       display: flex;
+      padding: 0 30px 0 0;
       > div {
         flex: none;
       }
       .textBox {
-        margin: 230px 8px 0 46px;
-        .size(@w: 320px, @h: 80px);
+        .size(@w: 294px, @h: 80px);
+        margin: 234px 0 5px 50px;
         .elip(@clamp:2);
-        font-weight: bold;
-        .font (@fontFamily:@baseFontBold, @fontSize:30px);
-        color: @COLOR_GRAY06;
-        line-height: 1.27;
+        text-align: left;
       }
-
       .accBox {
         .size(@w: 320px, @h: 50px);
-        margin: 6px 8px 0 46px;
+        margin-left: 50px;
         text-align: left;
-
         .saleAccBox {
           color: #767676;
         }
       }
       .itemImgBox {
-        margin: 44px 26px 44px 0;
-        .size(@w: 324px, @h: 324px);
+        margin: 47px 0 0 8px;
+        > img {
+          .size(@w: 324px, @h: 324px);
+        }
       }
     }
   }
-  &:focus-within,
   &:focus {
     &::after {
       .focused(@borderRadius: 12px);
     }
   }
+
   .arrow {
     z-index: 10;
     .size(@w: 42px, @h: 42px);
     background-size: 42px 42px;
     background-position: center center;
     &.leftBtn {
-      .position(@position: absolute, @top: 200px, @left: 18px);
+      .position(@position: absolute, @top: 429px, @left: 18px);
       background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
-      &:focus,
-      &:focus-within {
+      &:focus {
         background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
       }
     }
     &.rightBtn {
-      .position(@position: absolute, @top: 200px, @right: 18px);
+      .position(@position: absolute, @top: 429px, @right: 18px);
       background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
-      &:focus,
-      &:focus-within {
+      &:focus {
         background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
       }
     }
   }
+  &.isHorizontalWrap {
+    .arrow {
+      &.leftBtn {
+        .position(@position: absolute, @top: 189px, @left: 18px);
+      }
+      &.rightBtn {
+        .position(@position: absolute, @top: 189px, @right: 18px);
+      }
+    }
+  }
 }