[components]TItemCard 수정

Detail Notes :

1. <img /> → <CustomImage /> 변경
2. removeDotAndColon: () => string 추가
3. spotlightId 변경

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>