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); - } -}