From 48fd4ced471bea8fe094fd71a3de506af05ad7ff Mon Sep 17 00:00:00 2001
From: "younghoon100.park" <younghoon100.park@lgepartner.com>
Date: Thu, 15 Feb 2024 17:28:57 +0900
Subject: [PATCH] =?UTF-8?q?[components]TItemCard=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Detail Notes :

1. <img /> → <CustomImage /> 변경
2. removeDotAndColon: () => string 추가
3. spotlightId 변경
---
 .../src/components/TItemCard/TItemCard.jsx          | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

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