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

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

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