[HomePanel] 홈패널 상단 배너

Detail Notes : 1. 불필요한 코드 삭제 및 스타일 재정리
2024-02-16 17:38:06 +09:00
parent da8e2fae1a
commit 02086fbba9
9 changed files with 234 additions and 536 deletions
--- 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>
--- 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;
+      }
    }
  }
 }
--- 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>
--- 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;
+      }
+    }
  }
 }
--- 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>
--- 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;
+      }
    }
  }
 }
--- 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 {
--- 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)}
--- 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);
+      }
+    }
+  }
 }