[TItemCard] 호스트 네임추가건.

- 호스트네임 노출 추가건입니다.
This commit is contained in:
junghoon86.park
2024-03-27 18:16:57 +09:00
parent 5122ed1894
commit 8e40aab4d1
2 changed files with 49 additions and 13 deletions

View File

@@ -4,7 +4,7 @@ import classNames from "classnames";
import Spottable from "@enact/spotlight/Spottable";
import IcLiveShow from "../../../assets/images/tag/tag-liveshow.png";
import IcLiveShow from "../../../assets/images/tag/tag-liveshow.svg";
import usePriceInfo from "../../hooks/usePriceInfo";
import { $L } from "../../utils/helperMethods";
import CustomImage from "../CustomImage/CustomImage";
@@ -50,6 +50,7 @@ export default memo(function TItemCard({
priceInfo,
productId,
productName,
hstNm,
rank,
soldoutFlag,
spotlightId,
@@ -107,17 +108,32 @@ export default memo(function TItemCard({
<div>{STRING_CONF.SOLD_OUT}</div>
)}
</div>
<div className={css.descWrap}>
<h3 className={css.title}>{productName}</h3>
{!offerInfo ? (
<p className={css.priceInfo}>
{discountRate ? discountedPrice : originalPrice}
{discountRate && <span>{originalPrice}</span>}
</p>
) : (
<p className={css.offerInfo}>{offerInfo}</p>
)}
</div>
{hstNm ? (
<div className={classNames(css.descWrap, css.hstNmWrap)}>
<h3 className={css.title}>{productName}</h3>
<h4 className={css.hstmNmTitle}>{hstNm}</h4>
{!offerInfo ? (
<p className={css.priceInfo}>
{discountRate ? discountedPrice : originalPrice}
{discountRate && <span>{originalPrice}</span>}
</p>
) : (
<p className={css.offerInfo}>{offerInfo}</p>
)}
</div>
) : (
<div className={css.descWrap}>
<h3 className={css.title}>{productName}</h3>
{!offerInfo ? (
<p className={css.priceInfo}>
{discountRate ? discountedPrice : originalPrice}
{discountRate && <span>{originalPrice}</span>}
</p>
) : (
<p className={css.offerInfo}>{offerInfo}</p>
)}
</div>
)}
{isBestSeller && rank && (
<div className={css.bestSeller}>
{STRING_CONF.TOP}

View File

@@ -252,13 +252,33 @@
margin-top: 35px;
color: @COLOR_GRAY06;
font-size: 24px;
flex-wrap: wrap;
.title {
align-self: center;
font-weight: bold;
line-height: 1.33;
.elip(@clamp: 2);
}
&.hstNmWrap {
margin-top: 12px;
.size(@w: 510px, @h: 107px);
.title {
.size(@w: 510px, @h: 64px);
align-self: center;
font-weight: bold;
line-height: 1.33;
.elip(@clamp: 2);
}
.hstmNmTitle {
margin-top: 11px;
.size(@w: 100%, @h: 36px);
color: #767676;
font-size: 24px;
.elip(@clamp: 1);
font-weight: normal;
}
}
}
}