diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx index f2e23752..1a33763c 100644 --- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx +++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx @@ -17,6 +17,11 @@ const TYPES = { videoShow: "videoShow", }; +const IMAGETYPES = { + imgHorizontal: "imgHorizontal", + imgVertical: "imgVertical", +}; + // @@pyh Todo, 추후 다국어 resource 추가 const STRING_CONF = { SOLD_OUT: $L("SOLD OUT"), @@ -32,6 +37,7 @@ export default memo(function TItemCard({ disabled, imageAlt, imageSource, + imgType = IMAGETYPES.imgHorizontal, logo, logoDisplay = false, isBestSeller = false, @@ -78,14 +84,18 @@ export default memo(function TItemCard({ return (
@@ -111,4 +121,4 @@ export default memo(function TItemCard({ ); }); -export { TYPES }; +export { IMAGETYPES, TYPES }; 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 efa9cfd5..9f00b7c1 100644 --- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less +++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less @@ -186,43 +186,89 @@ /* videoShow */ .videoShow { - .size(@w: 546px, @h:438px); - padding: 14px; - background-color: @COLOR_WHITE; - border-radius: 12px; - .border-solid(@size:1px,@color:@COLOR_GRAY02); - font-family: @baseFontBold; - position: relative; + &.imgHorizontal { + .size(@w: 546px, @h:438px); + padding: 18px; + background-color: @COLOR_WHITE; + border-radius: 12px; + .border-solid(@size:1px,@color:@COLOR_GRAY02); + font-family: @baseFontBold; + position: relative; - &:focus { - &::after { - .focused(@boxShadow: 22px, @borderRadius: 12px); - } - } - &.nonPosition { &:focus { &::after { .focused(@boxShadow: 22px, @borderRadius: 12px); } } - } - .imageWrap { - > img { - .size(@w: 100%, @h: 288px); - object-fit: cover; + &.nonPosition { + &:focus { + &::after { + .focused(@boxShadow: 22px, @borderRadius: 12px); + } + } + } + .imageWrap { + > img { + .size(@w: 100%, @h: 288px); + object-fit: cover; + } + } + + .descWrap { + margin-top: 38px; + color: @COLOR_GRAY06; + font-size: 24px; + .size(@w: 510px, @h: 61px); + display: flex; + + .title { + width: calc(100% - 72px); + .elip(@clamp: 2); + } } } - - .descWrap { - margin-top: 38px; - color: @COLOR_GRAY06; - font-size: 24px; - .size(@w: 510px, @h: 61px); + &.imgVertical { + .size(@w: 546px, @h:438px); + padding: 18px; + background-color: @COLOR_WHITE; + border-radius: 12px; + .border-solid(@size:1px,@color:@COLOR_GRAY02); + font-family: @baseFontBold; + position: relative; display: flex; + &:focus { + &::after { + .focused(@boxShadow: 22px, @borderRadius: 12px); + } + } + &.nonPosition { + &:focus { + &::after { + .focused(@boxShadow: 22px, @borderRadius: 12px); + } + } + } + .imageWrap { + flex: none; + > img { + .size(@w: 228px, @h: 402px); + object-fit: cover; + } + } - .title { - width: calc(100% - 72px); - .elip(@clamp: 2); + .descWrap { + flex: none; + color: @COLOR_GRAY06; + font-size: 24px; + .size(@w: 510px, @h: 61px); + display: flex; + + .title { + margin-left: 11px; + width: 270px; + height: 402px; + .elip(@clamp: 12); + } } } } 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 637da986..d5a530be 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -7,7 +7,10 @@ import Spottable from "@enact/spotlight/Spottable"; import { pushPanel } from "../../../actions/panelActions"; import SectionTitle from "../../../components/SectionTitle/SectionTitle"; -import TItemCard, { TYPES } from "../../../components/TItemCard/TItemCard"; +import TItemCard, { + IMAGETYPES, + TYPES, +} from "../../../components/TItemCard/TItemCard"; import TScroller from "../../../components/TScroller/TScroller"; import useScrollReset from "../../../hooks/useScrollReset"; import useScrollTo from "../../../hooks/useScrollTo"; @@ -66,6 +69,11 @@ const PopularShow = ({ ...rest }) => { productName={item.showNm} nonPosition={true} type={TYPES.videoShow} + imgType={ + item.vtctpYn !== "Y" + ? IMAGETYPES.imgHorizontal + : IMAGETYPES.imgVertical + } onFocus={index === 0 ? handleScrollReset : null} onBlur={handleStopScrolling} onClick={handleCardClick}