[components] TItermCard 수정

Detail Notes :

1. 다국어 처리 관련 TOP 마크 css 수정

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

@@ -1,24 +1,26 @@
-import React, {
-  memo,
-  useCallback,
-} from 'react';
+import React, { memo, useCallback } from "react";
 
-import classNames from 'classnames';
+import classNames from "classnames";
 
-import Spottable from '@enact/spotlight/Spottable';
+import Spottable from "@enact/spotlight/Spottable";
 
-import usePriceInfo from '../../hooks/usePriceInfo';
-import { $L } from '../../utils/helperMethods';
-import { SpotlightIds } from '../../utils/SpotlightIds';
-import css from './TItemCard.module.less';
+import usePriceInfo from "../../hooks/usePriceInfo";
+import { $L } from "../../utils/helperMethods";
+import { SpotlightIds } from "../../utils/SpotlightIds";
+import css from "./TItemCard.module.less";
 
 const SpottableComponent = Spottable("div");
 
-const TYPE_VERTICAL = "vertical";
-const TYPE_HORIZONTAL = "horizontal";
+const TYPE_CONF = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal",
+};
 
-const SOLD_OUT_STRING = "SOLD OUT";
-const TOP_STRING = "TOP";
+// @@pyh Todo, 추후 다국어 resource 추가
+const STRING_CONF = {
+  SOLD_OUT: $L("SOLD OUT"),
+  TOP: $L("TOP"),
+};
 
 export default memo(function TItemCard({
   children,
@@ -31,7 +33,7 @@ export default memo(function TItemCard({
   productName,
   rank,
   soldoutFlag,
-  type = TYPE_VERTICAL,
+  type = TYPE_CONF.VERTICAL,
   ...rest
 }) {
   const { originalPrice, discountedPrice, discountRate } =
@@ -48,8 +50,8 @@ export default memo(function TItemCard({
     <SpottableComponent
       {...rest}
       className={classNames(
-        type === TYPE_HORIZONTAL && css.horizontal,
-        type === TYPE_VERTICAL && css.vertical,
+        type === TYPE_CONF.HORIZONTAL && css.horizontal,
+        type === TYPE_CONF.VERTICAL && css.vertical,
         isBestSeller === true && css.homeBestSeller
       )}
       onClick={() => handleClick(productId)}
@@ -58,7 +60,9 @@ export default memo(function TItemCard({
       <div>
         <img src={imageSource} alt={imageAlt} />
         {discountRate && <span>{discountRate}</span>}
-        {soldoutFlag && soldoutFlag === "Y" && <div>{$L(SOLD_OUT_STRING)}</div>}
+        {soldoutFlag && soldoutFlag === "Y" && (
+          <div>{STRING_CONF.SOLD_OUT}</div>
+        )}
       </div>
       <div>
         <h3>{productName}</h3>
@@ -69,7 +73,7 @@ export default memo(function TItemCard({
       </div>
       {isBestSeller && rank && (
         <div>
-          {$L(TOP_STRING)}
+          {STRING_CONF.TOP}
           <span>{rank}</span>
         </div>
       )}

com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less

@@ -154,12 +154,11 @@
     }
   }
 
-  // best seller
+  // best seller (TOP mark)
   > 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;
+    padding: 15px 16px 21px;
     background-color: @COLOR_GRAY07;
     .font(@fontFamily: @robotoFontBold, @fontSize: 24px);
     color: @COLOR_WHITE;