[HomePanel] Spot관련 수정

- PopularshowItem삭제.
 - svg파일 png로 교체.
 - 스타일 수정

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

@@ -10,16 +10,9 @@
   > ul {
     height: 438px;
   }
-  .grid {
-    overflow: unset;
-    > div {
-      overflow: unset !important;
-    }
-    &:last-child {
-      padding-right: 60px;
-    }
-  }
+
   .homeBestSeller {
+    --scroll-overscroll-translate-horizontal: translateX(-1px);
     > div {
       padding: 20px 60px 30px 60px;
       display: flex;
@@ -38,7 +31,7 @@
   background-color: @COLOR_WHITE;
   border: 1px solid #e4e4e4;
   border-radius: 12px;
-  background-image: url("../../../../assets/images/btn/ic-more-nor.svg");
+  background-image: url("../../../../assets/images/btn/ic-more-nor@3x.png");
   background-size: 66px 66px;
   background-position: center center;
   background-repeat: no-repeat;
@@ -47,6 +40,6 @@
     border: 4px solid @PRIMARY_COLOR_RED;
     box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
     border-radius: 12px;
-    background-image: url("../../../../assets/images/btn/ic-more-sel.svg");
+    background-image: url("../../../../assets/images/btn/ic-more-sel@3x.png");
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 
 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
@@ -10,7 +10,6 @@ import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TScroller from "../../../components/TScroller/TScroller";
 import { $L } from "../../../utils/helperMethods";
 import css from "../PopularShow/PopularShow.module.less";
-import PopularShowItem from "./PopularShowItem/PopularShowItem";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -51,6 +50,7 @@ const PopularShow = ({ ...rest }) => {
               </div>
             </SpottableComponent>
           ))}
+
         <SpottableComponent className={css.addItem}></SpottableComponent>
       </TScroller>
     </Container>

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

@@ -5,25 +5,20 @@
     margin: 60px 0 0px 60px;
     font-size: 42px;
   }
-  .grid {
-    height: 438px;
-    overflow: unset;
-    > div {
-      overflow: unset !important;
-    }
-  }
   .showList {
-    display: flex;
+    --scroll-overscroll-translate-horizontal: translateX(-1px);
     > div {
       padding: 20px 60px 30px 60px;
       display: flex;
+
       .addItem {
         flex: none;
         .size(@w: 198px, @h: 438px);
         background-color: @COLOR_WHITE;
         border: 1px solid #e4e4e4;
+        box-sizing: border-box;
         border-radius: 12px;
-        background-image: url("../../../../assets/images/btn/ic-more-nor.svg");
+        background-image: url("../../../../assets/images/btn/ic-more-nor@3x.png");
         background-size: 66px 66px;
         background-position: center center;
         background-repeat: no-repeat;
@@ -31,7 +26,13 @@
           box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
           .border-solid(@size:4px, @color:@PRIMARY_COLOR_RED);
           border-radius: 12px;
-          background-image: url("../../../../assets/images/btn/ic-more-sel.svg");
+          background-image: url("../../../../assets/images/btn/ic-more-sel@3x.png");
+        }
+      }
+      > div {
+        margin-right: 18px;
+        &:last-child {
+          margin-right: 0;
         }
       }
     }
@@ -39,6 +40,7 @@
 }
 
 .listItem {
+  flex: 1 1 auto;
   position: relative;
   .size(@w:546px,@h:438px);
   padding: 14px;
@@ -47,7 +49,6 @@
   .border-solid(@size:4px,@color:transparent);
   font-weight: bold;
   font-family: @baseFontBold;
-  margin-right: 18px;
 
   &:focus {
     border: 4px solid @PRIMARY_COLOR_RED;
@@ -86,18 +87,20 @@
 }
 .listItemVertical {
   display: flex;
+  flex: 1 1 auto;
   .size(@w:546px,@h:438px);
   padding: 14px;
   background-color: @COLOR_WHITE;
   border-radius: 12px;
-  margin-right: 18px;
   .border-solid(@size:4px,@color:transparent);
+  box-sizing: border-box;
   font-weight: bold;
   font-family: @baseFontBold;
   &:focus {
     border: 4px solid @PRIMARY_COLOR_RED;
     box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
     border-radius: 12px;
+    box-sizing: border-box;
   }
   > img {
     .size(@w:228px,@h:402px);

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

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import Spottable from '@enact/spotlight/Spottable';
-
-import css from './PopularShowItem.module.less';
-
-const SpottableComponent = Spottable("li");
-
-export default function PopularShowItem({ topInfosData, itemNum, ...rest }) {
-  return (
-    <SpottableComponent
-      className={classNames(
-        itemNum.thumbnailUrl960 == itemNum.thumbnailUrl
-          ? css.listItemVertical
-          : css.listItem
-      )}
-      {...rest}
-    >
-      <img src={itemNum.thumbnailUrl960} className={css.itemImg} />
-      <div
-        className={classNames(
-          itemNum.thumbnailUrl960 == itemNum.thumbnailUrl
-            ? css.verticalItem
-            : css.horizonItem
-        )}
-      >
-        <span className={css.logo}>
-          <img src={itemNum.patncLogoPath} className={css.logoPath} />
-        </span>
-        <span className={css.showNm}>{itemNum.showNm}</span>
-      </div>
-    </SpottableComponent>
-  );
-}

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

@@ -1,91 +0,0 @@
-@import "../../../../style/CommonStyle.module.less";
-@import "../../../../style/utils.module.less";
-
-.listItem {
-  .size(@w:546px,@h:438px);
-  padding: 14px;
-  background-color: @COLOR_WHITE;
-  border-radius: 12px;
-  .border-solid(@size:4px,@color:transparent);
-  font-weight: bold;
-  font-family: @baseFontBold;
-  margin-right: 18px;
-  position: relative;
-  &:focus {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-  }
-
-  > img {
-    .size(@w:510px,@h:288px);
-    object-fit: contain;
-  }
-  .horizonItem {
-    .size(@w:510px,@h:61px);
-    margin-top: 38px;
-    color: #333;
-    font-size: 24px;
-    .elip(@clamp:2);
-    display: flex;
-  }
-  .logo {
-    display: inline-block;
-    .size(@w:60px,@h:60px);
-    margin-right: 12px;
-    .logoPath {
-      width: 100%;
-      height: auto;
-    }
-  }
-  .showNm {
-    display: inline-block;
-    color: #333;
-    font-size: 24px;
-    .elip(@clamp:2);
-    .size(@w:438px,@h:61px);
-  }
-}
-.listItemVertical {
-  display: flex;
-  .size(@w:546px,@h:438px);
-  padding: 14px;
-  background-color: @COLOR_WHITE;
-  border-radius: 12px;
-  margin-right: 18px;
-  .border-solid(@size:4px,@color:transparent);
-  font-weight: bold;
-  font-family: @baseFontBold;
-  &:focus {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-  }
-  > img {
-    .size(@w:228px,@h:402px);
-    object-fit: contain;
-  }
-  .verticalItem {
-    margin-left: 11px;
-    color: #333;
-    font-size: 24px;
-    .size(@w:270px,@h:402px);
-    .elip(@clamp:12);
-  }
-  .logo {
-    display: block;
-    .size(@w:60px,@h:60px);
-    margin-right: 12px;
-    .logoPath {
-      width: 100%;
-      height: auto;
-    }
-  }
-  .showNm {
-    margin-left: 11px;
-    color: #333;
-    font-size: 24px;
-    .size(@w:270px,@h:402px);
-    .elip(@clamp:12);
-  }
-}