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

[components]TItemCard 수정

Browse Source 
Detail Notes :

1. <img /> → <CustomImage /> 변경
2. removeDotAndColon: () => string 추가
3. spotlightId 변경
This commit is contained in:
younghoon100.park
2024-02-15 17:28:57 +09:00
parent fd08f9f3f7
commit 48fd4ced47
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import Spottable from "@enact/spotlight/Spottable";
import usePriceInfo from "../../hooks/usePriceInfo"; import usePriceInfo from "../../hooks/usePriceInfo";
import { $L } from "../../utils/helperMethods"; import { $L } from "../../utils/helperMethods";
import { SpotlightIds } from "../../utils/SpotlightIds"; import CustomImage from "../CustomImage/CustomImage";
import css from "./TItemCard.module.less"; import css from "./TItemCard.module.less";
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
@@ -22,6 +22,10 @@ const STRING_CONF = {
TOP: $L("TOP"), TOP: $L("TOP"),
}; };
export const removeDotAndColon = (string) => {
return /[.:]/.test(string) ? string.replace(/[.:]/g, "") : string;
};
export default memo(function TItemCard({ export default memo(function TItemCard({
children, children,
imageAlt, imageAlt,
@@ -51,14 +55,13 @@ export default memo(function TItemCard({
{...rest} {...rest}
className={classNames( className={classNames(
type === TYPE_CONF.HORIZONTAL && css.horizontal, type === TYPE_CONF.HORIZONTAL && css.horizontal,
type === TYPE_CONF.VERTICAL && css.vertical, type === TYPE_CONF.VERTICAL && css.vertical
isBestSeller === true && css.homeBestSeller
)} )}
onClick={() => handleClick(productId)} onClick={() => handleClick(productId)}
spotlightId={SpotlightIds.TITEM_CARD + productId} spotlightId={"spotlightId-" + removeDotAndColon(productId)}
> >
<div> <div>
<img src={imageSource} alt={imageAlt} /> <CustomImage alt={imageAlt} delay={0} src={imageSource} />
{discountRate && <span>{discountRate}</span>} {discountRate && <span>{discountRate}</span>}
{soldoutFlag && soldoutFlag === "Y" && ( {soldoutFlag && soldoutFlag === "Y" && (
<div>{STRING_CONF.SOLD_OUT}</div> <div>{STRING_CONF.SOLD_OUT}</div>