From c7aaa595b5ed173ea72d505b62917bc56cacfd03 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Tue, 20 Feb 2024 17:52:19 +0900 Subject: [PATCH] =?UTF-8?q?[HomePanel]=20Spot=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=20-=20PopularshowItem=EC=82=AD=EC=A0=9C.?= =?UTF-8?q?=20=20-=20svg=ED=8C=8C=EC=9D=BC=20png=EB=A1=9C=20=EA=B5=90?= =?UTF-8?q?=EC=B2=B4.=20=20-=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/images/btn/ic-more-nor@3x.png | Bin 0 -> 851 bytes .../assets/images/btn/ic-more-sel@3x.png | Bin 0 -> 859 bytes .../BestSeller/BestSeller.module.less | 15 +-- .../HomePanel/PopularShow/PopularShow.jsx | 4 +- .../PopularShow/PopularShow.module.less | 27 +++--- .../PopularShowItem/PopularShowItem.jsx | 36 ------- .../PopularShowItem.module.less | 91 ------------------ 7 files changed, 21 insertions(+), 152 deletions(-) create mode 100644 com.twin.app.shoptime/assets/images/btn/ic-more-nor@3x.png create mode 100644 com.twin.app.shoptime/assets/images/btn/ic-more-sel@3x.png delete mode 100644 com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.jsx delete mode 100644 com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less 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 0000000000000000000000000000000000000000..8d93fc4d61e404495fa47e020e4bc8e4966f03f4 GIT binary patch literal 851 zcmeAS@N?(olHy`uVBq!ia0vp^$3U2a4M=v*{vQjZBuiW)N`mv#O3D+9QW+dm@{>{( zJaZG%Q-e|yQz{EjrrIztFn#rOaSW-r_2#Z))@=uohQ!t1)ONb?>~+0%PBo~g_d#g; zNwu?w~ux#1f88F{rcG+c*qn#$d>?$N?MYgE_y>X~9%=fZRgMIBrCIL1M z<`%|742cZ}4iXAHa4rL;5KIMxhG`nPA~8@`^A`hBt0Gl9>>&)mIU zUfpIF_w@hIe^WHhJ$`EW?328Exna2A@r&1Lrp#)7YrQCs! zHmhvw&Yz;6uiXs^p0B9rTYGO;_Ke-xR#~ej{;zv(c;0aOy*ujplAleVRi9CNruFQF zWb%x)8eLc7E=Tj6k!#!_HeQflmImPRjE}zo!aIpxAS5YDm;Z;!dVvAys3RG2yM9_SB zrGJT7qR*{`$8UR>w}OJ=073f4$h{ z?%(L&n|;ft@rRlECUZZK#hR=d3@}m}!UFVdQ I&MBb@0DmYtA^-pY literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..6c17e2b4945042c15a40aee934ea80b651f2045f GIT binary patch literal 859 zcmeAS@N?(olHy`uVBq!ia0vp^$3U2a4M=v*{vQjZBuiW)N`mv#O3D+9QW+dm@{>{( zJaZG%Q-e|yQz{EjrrIztF#Yv(aSW-r_2#Z&*6jp|hQ!t17R4yF#T`m1<9lGLdYxll z)FjojmQE*MFsGQ?x$vm9Z!L52^3Hai}pZG}O1jzIG#% z02>E$3*#Y%#0CQg2?ZWFmjP1oHmvQR{>-Kn%I?k2uc`KIoH6f(4yH3ma~Z^Um_BSsJiThwtEc+gPKRs0-~0B`<`D6X8fNzl ztxhH9CC4S*n>9P@#bwnc3(rRv^XAXazLmXs-v7FE!}EsX_wKOgOMNzdR(;0knbETs zl8a|=)tD3#e_5LU{@vJ}?UPD%d)_^JH$P=A_v8O|(EcQgP4p)HAVX{;hxB zvFYdbU+Jfx>B#G>UUf?BfHhST7YFmCZ_y2m46hFE 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); - } -}