optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[components] TItermCard 수정

Browse Source 
Detail Notes :

1. 다국어 처리 관련 TOP 마크 css 수정
This commit is contained in:
younghoon100.park
2024-02-14 16:28:57 +09:00
parent aeadd94941
commit 4230f7e04b
2 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
View File

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

5
com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
View File

@@ -154,12 +154,11 @@
} }
} }
// best seller // best seller (TOP mark)
> div:nth-child(3) { > div:nth-child(3) {
.position(@position: absolute, @top: -1px, @left: 18px); .position(@position: absolute, @top: -1px, @left: 18px);
.flex(@direction: column, @justifyCenter: space-between); .flex(@direction: column, @justifyCenter: space-between);
.size(@w: 79px, @h: 102px); padding: 15px 16px 21px;
padding: 12px 12px 18px;
background-color: @COLOR_GRAY07; background-color: @COLOR_GRAY07;
.font(@fontFamily: @robotoFontBold, @fontSize: 24px); .font(@fontFamily: @robotoFontBold, @fontSize: 24px);
color: @COLOR_WHITE; color: @COLOR_WHITE;