optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[components] TItemCard, props 추가

Browse Source 
Detail Notes :

1. props: offerInfo 추가
2. 추가에 따른 css 변경
This commit is contained in:
younghoon100.park
2024-03-15 15:12:04 +09:00
parent e22b4e2cc7
commit 1d9e98d9bb
2 changed files with 52 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
View File

@@ -46,6 +46,7 @@ export default memo(function TItemCard({
onBlur,
onClick,
onFocus,
offerInfo,
priceInfo,
productId,
productName,
@@ -101,17 +102,21 @@ export default memo(function TItemCard({
>
<div className={css.imageWrap}>
<CustomImage alt={imageAlt} delay={0} src={imageSource} />
{discountRate && <span>{discountRate}</span>}
{!offerInfo && discountRate && <span>{discountRate}</span>}
{soldoutFlag && soldoutFlag === "Y" && (
<div>{STRING_CONF.SOLD_OUT}</div>
)}
</div>
<div className={css.descWrap}>
<h3 className={css.title}>{productName}</h3>
<p>
{discountRate ? discountedPrice : originalPrice}
{discountRate && <span>{originalPrice}</span>}
</p>
{!offerInfo ? (
<p className={css.priceInfo}>
{discountRate ? discountedPrice : originalPrice}
{discountRate && <span>{originalPrice}</span>}
</p>
) : (
<p className={css.offerInfo}>{offerInfo}</p>
)}
</div>
{isBestSeller && rank && (
<div>

65
com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
View File

@@ -18,14 +18,14 @@
margin-right: 20px;
color: @COLOR_WHITE;
img {
> img {
.size(@w: inherit, @h: inherit);
object-fit: cover;
border: solid 1px #f0f0f0;
}
// discount rate
span {
> span {
.position(@position: absolute, @right: 12px, @bottom: 12px);
.size(@w: 60px, @h: 60px);
border-radius: 60px;
@@ -36,7 +36,7 @@
}
// sold out
div {
> div {
.position(@position: absolute, @top: 0, @right: 0);
.flex();
.size(@w: 200px, @h: 200px);
@@ -62,18 +62,27 @@
overflow: hidden;
}
p {
.flex(@justifyCenter: flex-start);
> p {
font-weight: bold;
font-size: 30px;
color: @PRIMARY_COLOR_RED;
span {
margin-left: 5px;
font-weight: bold;
font-size: 18px;
color: @COLOR_GRAY04;
text-decoration: line-through;
&.offerInfo {
overflow: hidden;
.elip(@clamp:1);
word-break: break-all;
}
&.priceInfo {
.flex(@justifyCenter: flex-start);
> span {
margin-left: 5px;
font-weight: bold;
font-size: 18px;
color: @COLOR_GRAY04;
text-decoration: line-through;
}
}
}
}
@@ -105,14 +114,14 @@
margin-bottom: 12px;
color: @COLOR_WHITE;
img {
> img {
.size(@w: 288px, @h: 288px);
object-fit: contain;
border: solid 1px #f0f0f0;
}
// discount rate
span {
> span {
.position(@position: absolute, @right: 12px, @bottom: 12px);
.size(@w: 60px, @h: 60px);
border-radius: 60px;
@@ -149,17 +158,27 @@
overflow: hidden;
}
p {
.flex(@justifyCenter: flex-start);
> p {
font-weight: bold;
font-size: 30px;
color: @PRIMARY_COLOR_RED;
letter-spacing: -1px;
span {
margin-left: 5px;
font-size: 18px;
color: @COLOR_GRAY04;
text-decoration: line-through;
&.offerInfo {
overflow: hidden;
.elip(@clamp:1);
word-break: break-all;
}
&.priceInfo {
.flex(@justifyCenter: flex-start);
> span {
margin-left: 5px;
font-weight: bold;
font-size: 18px;
color: @COLOR_GRAY04;
text-decoration: line-through;
}
}
}
}
@@ -175,7 +194,7 @@
border-bottom-left-radius: 79px;
border-bottom-right-radius: 79px;
span {
> span {
.font(@fontFamily: @arialFontBold, @fontSize: 42px);
font-size: 42px;
}
@@ -188,7 +207,7 @@
}
// best seller
div:nth-child(3) {
> div:nth-child(3) {
background-color: @PRIMARY_COLOR_RED;
}
}