[SHOPTIME-3419] "TM" 텍스트 표시 오류

[수정파일]

[수정내용]

  특수문자가 이상하게 표시되는 현상 수정

[원인]

  독일국가에서만 발생하는 현상으로 서버에서 내려온 데이터가 인코딩 제대로 되지 않는것으로 파악됨

[대책]

  dangerousHTML을 이용하여 특수문자 처리

com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
 
 import classNames from "classnames";
 
@@ -10,7 +10,7 @@ import defaultImageItem from "../../../assets/images/img-thumb-empty-product@3x.
 import defaultimgVertical from "../../../assets/images/img-thumb-empty-ver@3x.png";
 import IcLiveShow from "../../../assets/images/tag/tag-liveshow.png";
 import usePriceInfo from "../../hooks/usePriceInfo";
-import { $L } from "../../utils/helperMethods";
+import { $L, removeSpecificTags } from "../../utils/helperMethods";
 import CustomImage from "../CustomImage/CustomImage";
 import css from "./TItemCard.module.less";
 
@@ -139,6 +139,11 @@ export default memo(function TItemCard({
     prdtNum +
     lastLabeltext;
 
+  const productNameDangerousHTML = useMemo(() => {
+    const sanitizedString = removeSpecificTags(productName);
+
+    return sanitizedString;
+  }, [productName]);
   return (
     <SpottableComponent
       className={classNames(
@@ -187,7 +192,10 @@ export default memo(function TItemCard({
 
         <div className={css.title}>
           {catNm !== null && <p className={css.hstmNmTitle}>{catNm}</p>}
-          <h3 className={css.productNameTitle}>{productName}</h3>
+          <h3
+            className={css.productNameTitle}
+            dangerouslySetInnerHTML={{ __html: productNameDangerousHTML }}
+          />
         </div>
 
         {priceInfo ? (

com.twin.app.shoptime/src/views/MyPagePanel/MyPageItemCard/MyPageItemCard.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState } from "react";
+import React, { memo, useCallback, useMemo, useState } from "react";
 
 import classNames from "classnames";
 
@@ -8,7 +8,7 @@ import Spottable from "@enact/spotlight/Spottable";
 import defaultImageItem from "../../../../assets/images/img-thumb-empty-product@3x.png";
 import CustomImage from "../../../components/CustomImage/CustomImage";
 import TCheckBox from "../../../components/TCheckBox/TCheckBox";
-import { $L } from "../../../utils/helperMethods";
+import { $L, removeSpecificTags } from "../../../utils/helperMethods";
 import css from "./MyPageItemCard.module.less";
 
 const Container = SpotlightContainerDecorator({ enterTo: null }, "div");
@@ -77,6 +77,11 @@ export default memo(function MyPageItemCard({
     length +
     ", go to details, button";
 
+  const productNameDangerousHTML = useMemo(() => {
+    const sanitizedString = removeSpecificTags(title);
+
+    return sanitizedString;
+  }, [title]);
   return (
     <Container
       className={css.boxWrap}
@@ -108,7 +113,10 @@ export default memo(function MyPageItemCard({
           />
         </div>
         <div className={css.titleWrap}>
-          <p className={css.title}>{title}</p>
+          <p
+            className={css.title}
+            dangerouslySetInnerHTML={{ __html: productNameDangerousHTML }}
+          />
         </div>
       </ItemContainer>