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;