From e2531cff7f931d0d7ed6d99e510088e432cf1b7d Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Wed, 21 Feb 2024 11:09:54 +0900 Subject: [PATCH] =?UTF-8?q?[TItemCard]=20=EB=A1=9C=EA=B3=A0=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20TItemCard=20=EC=A0=81=EC=9A=A9=20=20-?= =?UTF-8?q?=20TItemCard=20=EB=A1=9C=EA=B3=A0=EC=A0=9C=EA=B1=B0=20=EB=B0=8F?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=EC=88=98=EC=A0=95=20=20-=20?= =?UTF-8?q?=ED=8F=AC=EC=A7=80=EC=85=98=20=EC=95=B1=EC=86=94=20=EA=B1=B8?= =?UTF-8?q?=EC=88=98=EC=97=86=EC=9D=84=EB=95=8C=20=EC=B2=98=EB=A6=AC?= =?UTF-8?q?=EC=B6=94=EA=B0=80.=20=20-=20homepanel=20popularshow=20titemcar?= =?UTF-8?q?d=EC=A0=81=EC=9A=A9.=20=20-=20categorypanel=20showlist=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EB=A1=9C=EA=B3=A0=20=EC=A0=9C=EA=B1=B0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TItemCard/TItemCard.jsx | 8 +--- .../TItemCard/TItemCard.module.less | 20 ++++----- .../ShowContents/ShowLists/ShowLists.jsx | 1 - .../ShowContents/ShowLists/ShowListsItem.jsx | 3 +- .../HomePanel/PopularShow/PopularShow.jsx | 31 +++++-------- .../PopularShow/PopularShow.module.less | 45 ------------------- 6 files changed, 23 insertions(+), 85 deletions(-) diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx index 5aa0870d..f4ade33c 100644 --- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx +++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx @@ -40,6 +40,7 @@ export default memo(function TItemCard({ productName, rank, soldoutFlag, + nonPosition = false, type = TYPES.vertical, ...rest }) { @@ -56,7 +57,7 @@ export default memo(function TItemCard({ return ( handleClick(productId)} spotlightId={"spotlightId-" + removeDotAndColon(productId)} > @@ -68,11 +69,6 @@ export default memo(function TItemCard({ )}
- {logo && logoDisplay && ( -
- {productName} -
- )}

{productName}

{discountRate ? discountedPrice : originalPrice} diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less index 66b3e402..62d9988d 100644 --- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less +++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less @@ -199,7 +199,14 @@ box-sizing: border-box; .focused(@boxShadow: 22px, @borderRadius: 12px); } - + &.nonPosition { + &:focus { + position: unset; + border: 4px solid @PRIMARY_COLOR_RED; + box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5); + border-radius: 12px; + } + } .imageWrap { > img { .size(@w: 100%, @h: 288px); @@ -214,17 +221,6 @@ .size(@w: 510px, @h: 61px); display: flex; - .logo { - .size(@w: 60px, @h: 60px); - margin-right: 12px; - - > img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - .title { width: calc(100% - 72px); .elip(@clamp: 2); diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.jsx index a8929eaa..a37e04f9 100644 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.jsx +++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.jsx @@ -29,7 +29,6 @@ export default function ShowLists() { itemWidth={546} itemHeight={438} spacing={18} - logoDisplay /> )} diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.jsx index 567e3149..9c62d006 100644 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.jsx +++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.jsx @@ -5,14 +5,13 @@ import TItemCard, { } from "../../../../../components/TItemCard/TItemCard"; import css from "./ShowListsItem.module.less"; -export default function ShowListsItem({ thumbnail, title, logo }) { +export default function ShowListsItem({ thumbnail, title }) { return ( ); 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 11610eac..2b4b364f 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -7,6 +7,7 @@ import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainer import Spottable from "@enact/spotlight/Spottable"; import SectionTitle from "../../../components/SectionTitle/SectionTitle"; +import TItemCard, { TYPES } from "../../../components/TItemCard/TItemCard"; import TScroller from "../../../components/TScroller/TScroller"; import { $L } from "../../../utils/helperMethods"; import css from "../PopularShow/PopularShow.module.less"; @@ -26,26 +27,18 @@ const PopularShow = ({ ...rest }) => { {topInfos && topInfos.map((item, index) => ( - - -

- {item.showNm} -
- + imageSource={ + item.thumbnailUrl !== item.thumbnailUrl960 + ? item.thumbnailUrl960 + : item.thumbnailUrl + } + imageAlt={item.showNm} + productName={item.showNm} + nonPosition={true} + type={TYPES.videoShow} + /> ))} 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 023955ec..fd9e8422 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 @@ -41,51 +41,6 @@ } } -.listItem { - position: relative; - .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; - flex: none; - &:focus { - border: 4px solid @PRIMARY_COLOR_RED; - box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5); - border-radius: 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:510px,@h:61px); - } -} .listItemVertical { display: flex; flex: none;