[components] TItemCard, type 및 props 추가
Detail Notes : 1. vertical(thumbnail) type, horisontal type 추가 2. soldoutFlag props 추가 (“Y” 일경우 rendering) 3. rank 및 isBestSeller props 추가 4. onCardClick() return productId, props 추가
This commit is contained in:
younghoon100.park
@@ -1,21 +1,43 @@
|
||||
import React from "react";
|
||||
import React, { memo, useCallback } from "react";
|
||||
|
||||
import classNames from "classnames";
|
||||
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import { $L } from "../../utils/helperMethods";
|
||||
import css from "./TItemCard.module.less";
|
||||
|
||||
const SpottableItemList = Spottable("li");
|
||||
const SpottableComponent = Spottable("li");
|
||||
|
||||
export default function TItemCard({
|
||||
const TYPE_VERTICAL = "vertical";
|
||||
const TYPE_HORIZONTAL = "horizontal";
|
||||
|
||||
const SOLD_OUT_STRING = "SOLD OUT";
|
||||
const TOP_STRING = "TOP";
|
||||
|
||||
export default memo(function ProductCard({
|
||||
children,
|
||||
imageSource,
|
||||
imageAlt,
|
||||
productName,
|
||||
imageSource,
|
||||
isBestSeller = false,
|
||||
onCardClick,
|
||||
priceInfo,
|
||||
rankOrd,
|
||||
productId,
|
||||
productName,
|
||||
rank,
|
||||
soldoutFlag,
|
||||
type = TYPE_HORIZONTAL,
|
||||
...rest
|
||||
}) {
|
||||
const parsePriceInfo = (priceInfo) => {
|
||||
const handleClick = useCallback(
|
||||
(productId) => {
|
||||
onCardClick && onCardClick(productId);
|
||||
},
|
||||
[onCardClick, productId]
|
||||
);
|
||||
|
||||
const parsePriceInfo = useCallback(
|
||||
(priceInfo) => {
|
||||
const priceParts = priceInfo
|
||||
.split("|")
|
||||
.filter((part) => part !== "N")
|
||||
@@ -35,34 +57,40 @@ export default function TItemCard({
|
||||
}
|
||||
|
||||
return { originalPrice, discountedPrice, discountRate };
|
||||
};
|
||||
},
|
||||
[priceInfo]
|
||||
);
|
||||
|
||||
const { originalPrice, discountedPrice, discountRate } =
|
||||
parsePriceInfo(priceInfo);
|
||||
|
||||
return (
|
||||
<SpottableItemList {...rest} className={css.container}>
|
||||
{rankOrd && (
|
||||
<div className={css.rankOrd}>
|
||||
<span>TOP</span>
|
||||
<strong>{rankOrd}</strong>
|
||||
</div>
|
||||
<SpottableComponent
|
||||
{...rest}
|
||||
className={classNames(
|
||||
type === TYPE_HORIZONTAL && css.horizontal,
|
||||
type === TYPE_VERTICAL && css.vertical
|
||||
)}
|
||||
<div className={css.imageContainer}>
|
||||
onClick={() => handleClick(productId)}
|
||||
>
|
||||
<div>
|
||||
<img src={imageSource} alt={imageAlt} />
|
||||
{discountRate && (
|
||||
<div className={css.discountBanner}>{discountRate}</div>
|
||||
)}
|
||||
{discountRate && <span>{discountRate}</span>}
|
||||
{soldoutFlag && soldoutFlag === "N" && <div>{$L(SOLD_OUT_STRING)}</div>}
|
||||
</div>
|
||||
<div className={css.descContainer}>
|
||||
<h1 className={css.productName}>{productName}</h1>
|
||||
<p className={css.priceInfo}>
|
||||
{discountedPrice}
|
||||
{originalPrice !== discountedPrice && (
|
||||
<span className={css.originalPrice}>{originalPrice}</span>
|
||||
)}
|
||||
<div>
|
||||
<h3>{productName}</h3>
|
||||
<p>
|
||||
{discountRate ? discountedPrice : originalPrice}
|
||||
{discountRate && <span>{discountRate}</span>}
|
||||
</p>
|
||||
</div>
|
||||
</SpottableItemList>
|
||||
{isBestSeller && rank && (
|
||||
<div>
|
||||
{$L(TOP_STRING)}
|
||||
<span>{rank}</span>
|
||||
</div>
|
||||
)}
|
||||
</SpottableComponent>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,90 +1,186 @@
|
||||
@import "../../style/CommonStyle.module.less";
|
||||
@import "../../style/utils.module.less";
|
||||
|
||||
.container {
|
||||
/* horizontal type */
|
||||
.horizontal {
|
||||
/* normal */
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
.size(@w: 600px, @h: 236px);
|
||||
padding: 18px;
|
||||
border-radius: 12px;
|
||||
border: solid 1px @COLOR_GRAY02;
|
||||
background-color: @COLOR_WHITE;
|
||||
|
||||
// left contents (image contetns)
|
||||
> div:nth-child(1) {
|
||||
position: relative;
|
||||
color: @COLOR_WHITE;
|
||||
|
||||
img {
|
||||
.size(@w: 200px, @h: 200px);
|
||||
object-fit: cover;
|
||||
border: solid 1px #f0f0f0;
|
||||
}
|
||||
|
||||
// discount rate
|
||||
span {
|
||||
.position(@position: absolute, @right: 12px, @bottom: 12px);
|
||||
.size(@w: 60px, @h: 60px);
|
||||
border-radius: 60px;
|
||||
background-color: @PRIMARY_COLOR_RED;
|
||||
.font(@fontFamily: "ArialBold", @fontSize:26px);
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
// sold out
|
||||
div {
|
||||
.position(@position: absolute, @top: 0, @right: 0);
|
||||
.flex();
|
||||
.size(@w: 200px, @h: 200px);
|
||||
background-color: rgba(26, 26, 26, 0.6);
|
||||
.font(@fontFamily: @baseFontBold, @fontSize: 36px);
|
||||
}
|
||||
}
|
||||
|
||||
// right contents
|
||||
> div:nth-child(2) {
|
||||
.flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
|
||||
flex-grow: 1;
|
||||
padding: 12px 0;
|
||||
|
||||
h3 {
|
||||
.font(@fontFamily: @baseFontBold, @fontSize: 24px);
|
||||
color: @COLOR_GRAY06;
|
||||
.elip(@clamp:2);
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
.flex(@justifyCenter: flex-start);
|
||||
gap: 5px;
|
||||
.font(@fontFamily: @baseFontBold, @fontSize: 30px);
|
||||
color: @PRIMARY_COLOR_RED;
|
||||
|
||||
span {
|
||||
.font(@fontFamily: @baseFont, @fontSize: 18px);
|
||||
color: @COLOR_GRAY04;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* focused */
|
||||
&:focus-within {
|
||||
border: solid 1px @PRIMARY_COLOR_RED;
|
||||
box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED,
|
||||
0 0 50px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* vertical type (Thumbnail) */
|
||||
.vertical {
|
||||
/* normal */
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
.size(@w: 324px, @h: 438px);
|
||||
padding: 18px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid @COLOR_GRAY02;
|
||||
border: solid 1px @COLOR_GRAY02;
|
||||
background-color: @COLOR_WHITE;
|
||||
|
||||
// top contents (image contetns)
|
||||
> div:nth-child(1) {
|
||||
position: relative;
|
||||
|
||||
&:focus-within {
|
||||
border: 4px solid @PRIMARY_COLOR_RED;
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.rankOrd {
|
||||
.size(@w:78px, @h:102px);
|
||||
.position(@position: absolute, @top: 0, @left: 18px);
|
||||
.flex(@justifyCenter: space-between, @direction: column);
|
||||
padding: 12px 12px 18px;
|
||||
background: @COLOR_GRAY07;
|
||||
z-index: 2;
|
||||
border-radius: 0 0 50px 50px;
|
||||
font-weight: bold;
|
||||
color: @COLOR_WHITE;
|
||||
> span {
|
||||
.font (@fontFamily:Roboto, @fontSize:24px);
|
||||
}
|
||||
> strong {
|
||||
.font (@fontFamily:Arial, @fontSize:42px);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
.rankOrd {
|
||||
top: -3px;
|
||||
left: 15px;
|
||||
background: @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
.size(@w: 288px, @h: 288px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: @COLOR_WHITE;
|
||||
|
||||
img {
|
||||
.size(@w: 100%, @h: 100%);
|
||||
.size(@w: 288px, @h: 288px);
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border: solid 1px #f0f0f0;
|
||||
}
|
||||
|
||||
.discountBanner {
|
||||
// discount rate
|
||||
span {
|
||||
.position(@position: absolute, @right: 12px, @bottom: 12px);
|
||||
.size(@w: 60px, @h: 60px);
|
||||
.flex();
|
||||
.position(@position: absolute, @bottom: 12px, @right: 12px);
|
||||
border-radius: 60px;
|
||||
background-color: @PRIMARY_COLOR_RED;
|
||||
color: @COLOR_WHITE;
|
||||
border-radius: 50%;
|
||||
padding: 5px 10px;
|
||||
font-size: 26px;
|
||||
.font(@fontFamily: "ArialBold", @fontSize:26px);
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
// sold out
|
||||
> div:nth-child(3) {
|
||||
.position(@position: absolute, @top: 0, @right: 0);
|
||||
.flex();
|
||||
.size(@w: 288px, @h: 288px);
|
||||
background-color: rgba(26, 26, 26, 0.6);
|
||||
.font(@fontFamily: @baseFontBold, @fontSize: 36px);
|
||||
}
|
||||
}
|
||||
|
||||
.descContainer {
|
||||
.productName {
|
||||
// bottom contents
|
||||
> div:nth-child(2) {
|
||||
.flex(@direction: column, @alignCenter: flex-start);
|
||||
gap: 6px;
|
||||
flex-grow: 1;
|
||||
|
||||
h3 {
|
||||
.font(@fontFamily: @baseFontBold, @fontSize: 24px);
|
||||
.elip(@clamp:2);
|
||||
line-height: 1.33;
|
||||
color: @COLOR_GRAY06;
|
||||
margin-top: 14px;
|
||||
.elip(@clamp:2);
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.priceInfo {
|
||||
p {
|
||||
.flex(@justifyCenter: flex-start);
|
||||
gap: 5px;
|
||||
.font(@fontFamily: @baseFontBold, @fontSize: 30px);
|
||||
margin-top: 9px;
|
||||
color: @PRIMARY_COLOR_RED;
|
||||
line-height: 0.93;
|
||||
|
||||
.originalPrice {
|
||||
span {
|
||||
.font(@fontFamily: @baseFont, @fontSize: 18px);
|
||||
margin-left: 5px;
|
||||
text-decoration: line-through;
|
||||
color: @COLOR_GRAY04;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// best sellet
|
||||
> div:nth-child(3) {
|
||||
.position(@position: absolute, @top: -1px, @left: 18px);
|
||||
.flex(@direction: column, @justifyCenter: space-between);
|
||||
.size(@w: 79px, @h: 102px);
|
||||
padding: 12px 12px 18px;
|
||||
background-color: @COLOR_GRAY07;
|
||||
.font(@fontFamily: @robotoFontBold, @fontSize: 24px);
|
||||
color: @COLOR_WHITE;
|
||||
border-bottom-left-radius: 79px;
|
||||
border-bottom-right-radius: 79px;
|
||||
|
||||
span {
|
||||
.font(@fontFamily: @arialFontBold, @fontSize: 42px);
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
/* focused */
|
||||
&:focus-within {
|
||||
border: solid 1px @PRIMARY_COLOR_RED;
|
||||
box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED,
|
||||
0 0 50px 0 rgba(0, 0, 0, 0.5);
|
||||
|
||||
// best seller
|
||||
div:nth-child(3) {
|
||||
background-color: @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user