diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx index 9b1293e9..505f7df5 100644 --- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx +++ b/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({ handleClick(productId)} @@ -58,7 +60,9 @@ export default memo(function TItemCard({
{imageAlt} {discountRate && {discountRate}} - {soldoutFlag && soldoutFlag === "Y" &&
{$L(SOLD_OUT_STRING)}
} + {soldoutFlag && soldoutFlag === "Y" && ( +
{STRING_CONF.SOLD_OUT}
+ )}

{productName}

@@ -69,7 +73,7 @@ export default memo(function TItemCard({
{isBestSeller && rank && (
- {$L(TOP_STRING)} + {STRING_CONF.TOP} {rank}
)} diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less index 1b2fa1fe..51e20076 100644 --- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less +++ b/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;