diff --git a/com.twin.app.shoptime/assets/images/btn/ic-more-nor@3x.png b/com.twin.app.shoptime/assets/images/btn/ic-more-nor@3x.png
new file mode 100644
index 00000000..8d93fc4d
Binary files /dev/null and b/com.twin.app.shoptime/assets/images/btn/ic-more-nor@3x.png differ
diff --git a/com.twin.app.shoptime/assets/images/btn/ic-more-sel@3x.png b/com.twin.app.shoptime/assets/images/btn/ic-more-sel@3x.png
new file mode 100644
index 00000000..6c17e2b4
Binary files /dev/null and b/com.twin.app.shoptime/assets/images/btn/ic-more-sel@3x.png differ
diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less
index bef46b1e..58731af2 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less
+++ b/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");
}
}
diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
index 11d52128..57bf324d 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/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 }) => {
))}
+
diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
index 30143edf..f0d66c68 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
+++ b/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);
diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.jsx
deleted file mode 100644
index 9a07bdce..00000000
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.jsx
+++ /dev/null
@@ -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 (
-
-
-
-
-
-
-
{itemNum.showNm}
-
-
- );
-}
diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less
deleted file mode 100644
index 89394623..00000000
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less
+++ /dev/null
@@ -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);
- }
-}