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

[FeaturedBrandsPanel] TodayDeals 수정

Browse Source 
Detail Notes :

1. 추후에 변경 될 시나리오에 따른 조건 및 css 수정
This commit is contained in:
younghoon100.park
2024-02-15 18:17:34 +09:00
parent 438e650d26
commit 0115b0414a
3 changed files with 35 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.jsx
View File

@@ -9,6 +9,7 @@ const STRING_CONF = {
TODAYS_DEALS: $L("TODAY'S DEALS"),
};
// @@pyh, Todo 추후 삭제
// cpnFlag, // 쿠폰 여부 (Y or N)
// freeShippingFlag, // 무료 배송 여부 (Y or N)
// logoImgAlt, // 로고 이미지 alt 값
@@ -30,10 +31,7 @@ const STRING_CONF = {
// todaySpclFlag, // Today Sepcial Value 여부 (Y or N)
export default memo(function TodaysDeals({ brandTsvInfo }) {
console.log("@@brandTsvInfo", brandTsvInfo);
const {
cpnFlag: couponFlag,
freeShippingFlag,
prdtNm: productName,
priceInfo,
@@ -45,10 +43,8 @@ export default memo(function TodaysDeals({ brandTsvInfo }) {
<div className={css.container}>
<SectionTitle title={STRING_CONF.TODAYS_DEALS} />
<TodaysDealsCard
couponFlag={couponFlag}
freeShippingFlag={freeShippingFlag}
imageSource={thumbnailImg}
imageAlt={productName}
priceInfo={priceInfo}
productName={productName}
todaySpecialFlag={todaySpecialFlag}

43
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.jsx
View File

@@ -2,68 +2,55 @@ import React, { memo } from "react";
import Spottable from "@enact/spotlight/Spottable";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import { $L } from "../../../../utils/helperMethods";
import css from "./TodaysDealsCard.module.less";
const SpottableComponent = Spottable("div");
const STRING_CONF = {
SAVE: $L("SAVE"),
};
export default memo(function TodaysDealsCard({
couponFlag,
freeShippingFlag,
imageAlt,
imageSource,
priceInfo,
productName,
todaySpecialFlag,
...rest
}) {
const { originalPrice, discountedPrice, discountRate, discountNumeric } =
const { originalPrice, discountedPrice, discountRate } =
usePriceInfo(priceInfo);
return (
<SpottableComponent className={css.item} {...rest}>
<div>
<img src={imageSource} alt={imageAlt} />
<CustomImage src={imageSource} delay={0} alt="" />
</div>
<div>
<div>
<div className={css.todaysDealsTag}>
{todaySpecialFlag === "N" && <span className={css.specialValue} />}
{freeShippingFlag === "N" && <span className={css.freeShipping} />}
</div>
<div className={css.specialPriceType}>
{true && <span className={css.tsv} />}
{true && <span className={css.frees} />}
{true && <span className={css.bigSale} />}
{true && <span className={css.shopTimePrice} />}
{couponFlag === "N" && (
// @@pyh Todo, COUPON, image resource 유무에 따라 추후 수정 (언어)
<span className={css.coupon}>{"COUPON"}</span>
)}
</div>
{todaySpecialFlag === "Y" && <span className={css.specialValue} />}
{freeShippingFlag === "Y" && <span className={css.freeShipping} />}
</div>
<div>
<h3>{productName}</h3>
<p>
{discountRate ? discountedPrice : originalPrice}
{/* {discountRate && <span>{originalPrice}</span>} */}
<span>{"$ 22.33"}</span>
{discountRate && <span>{originalPrice}</span>}
</p>
</div>
</div>
{/* {discountRate && (
{discountRate && (
<div>
<span>{"18%"}</span>
<span>{"SAVE"}</span>
<span>{discountRate}</span>
<span>{STRING_CONF.SAVE}</span>
</div>
)} */}
<div>
<span>{"18%"}</span>
<span>{"SAVE"}</span>
</div>
)}
</SpottableComponent>
);
});

97
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less
View File

@@ -28,94 +28,37 @@
.size(@w: 648px, @h: 100%);
padding: 12px 0;
// product badge icon area (top)
// top
> div:nth-child(1) {
.size(@w: inherit, @h: 156px);
.size(@w: inherit, @h: 112px);
.todaysDealsTag {
.size(@w: inherit, @h: 112px);
.specialValue {
display: block;
.size(@w: 240px, @h: 48px);
margin-bottom: 6px;
background-image: url("../../../../../assets/icon/badge/badge-td-specialvalue@3x.png");
background-position: center;
background-size: contain;
}
.freeShipping {
display: block;
.size(@w: 240px, @h: 48px);
margin-bottom: 6px;
background-image: url("../../../../../assets/icon/badge/badge-td-freesh@3x.png");
background-position: center;
background-size: contain;
}
.specialValue {
display: block;
.size(@w: 240px, @h: 48px);
margin-bottom: 6px;
background-image: url("../../../../../assets/icon/badge/badge-td-specialvalue@3x.png");
background-position: center;
background-size: contain;
}
.specialPriceType {
.flex(@justifyCenter: flex-start);
overflow: hidden;
.size(@w: inherit, @h: 42px);
.freeShipping {
display: block;
.size(@w: 240px, @h: 48px);
margin-bottom: 6px;
.tsv {
display: inline-block;
.size(@w: 80px, @h: 42px);
margin-right: 6px;
background-image: url("../../../../../assets/icon/badge/badge-tsv@3x.png");
background-position: center;
background-size: contain;
}
.frees {
display: inline-block;
.size(@w: 130px, @h: 42px);
margin-right: 6px;
background-image: url("../../../../../assets/icon/badge/badge-frees-h@3x.png");
background-position: center;
background-size: contain;
}
.bigSale {
display: inline-block;
.size(@w: 120px, @h: 42px);
margin-right: 6px;
background-image: url("../../../../../assets/icon/badge/badge-bigsale@3x.png");
background-position: center;
background-size: contain;
}
.shopTimePrice {
display: inline-block;
.size(@w: 200px, @h: 42px);
margin-right: 6px;
background-image: url("../../../../../assets/icon/badge/badge-shoptimeprice@3x.png");
background-position: center;
background-size: contain;
}
.coupon {
display: inline-block;
.size(@w: 120px, @h: 42px);
border-radius: 4px;
background-color: #7a808d;
.font(@fontFamily: @baseFontBold, @fontSize: 24px);
text-align: center;
line-height: 42px;
color: @COLOR_WHITE;
}
background-image: url("../../../../../assets/icon/badge/badge-td-freesh@3x.png");
background-position: center;
background-size: contain;
}
}
// product contents area (bottom)
// bottom
> div:nth-child(2) {
.flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
h3 {
overflow: hidden;
width: 540px;
min-height: 80px;
margin-bottom: 4px;
margin-bottom: 18px;
.font(@fontFamily: @baseFontBold, @fontSize: 30px);
.elip(@clamp:2);
word-break: break-all;
@@ -167,6 +110,4 @@
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
/* selected */
}