From f5f3385c5b6b236857539a44215d1637ed727d23 Mon Sep 17 00:00:00 2001 From: "younghoon100.park" Date: Tue, 13 Feb 2024 16:33:13 +0900 Subject: [PATCH] =?UTF-8?q?[FeaturedBrandsPanel]=20logic=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20TodaysDeals=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Detail Notes : 1. FeaturedBrandsPanel.jsx, brandTsvInfo 추가, 함수 변경 및 추가 (findItemByPatnrId, isNotEmptyObject) 2. QuickMenu.jsx, props 변경 3. TodaysDeals.jsx / TodaysDealsCard.jsx 추가 및 적용 --- .../FeaturedBrandsPanel.jsx | 35 ++-- .../QuickMenu/QuickMenu.jsx | 17 +- .../TodaysDeals/TodaysDeals.jsx | 58 ++++++ .../TodaysDeals/TodaysDeals.module.less | 10 + .../TodaysDealsCard/TodaysDealsCard.jsx | 69 +++++++ .../TodaysDealsCard.module.less | 171 ++++++++++++++++++ .../TodaysDeals/TodaysDealsCard/package.json | 6 + .../TodaysDeals/package.json | 6 + 8 files changed, 353 insertions(+), 19 deletions(-) create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.jsx create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.module.less create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.jsx create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/package.json create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/package.json diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index 44653429..cc624fb8 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; @@ -8,6 +8,7 @@ import { getBrandLayoutInfo, getBrandList, getBrandLiveChannelInfo, + getBrandTSVInfo, } from "../../actions/brandActions"; import TBody from "../../components/TBody/TBody"; import TPanel from "../../components/TPanel/TPanel"; @@ -15,10 +16,15 @@ import Banner from "./Banner/Banner"; import css from "./FeaturedBrandsPanel.module.less"; import LiveChannels from "./LiveChannels/LiveChannels"; import QuickMenu from "./QuickMenu/QuickMenu"; +import TodaysDeals from "./TodaysDeals/TodaysDeals"; import UpComing from "./UpComing/UpComing"; -const getSelectedBrandInfo = (brandInfo, selectedPatnrId) => { - return brandInfo.find((brand) => brand?.patnrId === selectedPatnrId); +const findItemByPatnrId = (array, patnrId) => { + return array.find((item) => item.patnrId === patnrId); +}; + +const isNotEmptyObject = (object) => { + return Object.keys(object).length > 0; }; export default function FeaturedBrandsPanel() { @@ -38,21 +44,13 @@ export default function FeaturedBrandsPanel() { const brandLiveChannelUpcoming = useSelector( (state) => state.brand.brandLiveChannelInfoData.brandLiveChannelUpcoming ); + const brandTsvInfo = useSelector( + (state) => state.brand.brandTsvInfoData.brandTsvInfo + ); const [selectedPatnrId, setSelectedPatnrId] = useState(String(panelInfo)); const [selectedBrandInfo, setSelectedBrandInfo] = useState(); - const handleQuickMenuClick = useCallback( - (patnrId) => { - if (selectedPatnrId === patnrId) { - return; - } - - setSelectedPatnrId(patnrId); - }, - [selectedPatnrId] - ); - useEffect(() => { if (!brandInfo) { dispatch(getBrandList()); @@ -61,9 +59,10 @@ export default function FeaturedBrandsPanel() { useEffect(() => { if (brandInfo && selectedPatnrId) { - setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId)); + setSelectedBrandInfo(findItemByPatnrId(brandInfo, selectedPatnrId)); dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId })); dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId })); + dispatch(getBrandTSVInfo({ patnrId: selectedPatnrId })); } }, [brandInfo, dispatch, selectedPatnrId]); @@ -81,8 +80,8 @@ export default function FeaturedBrandsPanel() { {brandInfo && brandInfo.length > 1 && ( )} @@ -104,6 +103,10 @@ export default function FeaturedBrandsPanel() { {brandLiveChannelUpcoming && brandLiveChannelUpcoming.length > 0 && ( )} + + {brandTsvInfo && isNotEmptyObject(brandTsvInfo) && ( + + )} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx index 00b1a7e8..3e0849de 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx @@ -20,9 +20,20 @@ const Container = SpotlightContainerDecorator( export default function QuickMenu({ brandInfo, selectedPatnrId, - onQuickMenuClick, + setSelectedPatnrId, ...rest }) { + const handleQuickMenuClick = useCallback( + (patnrId) => { + if (selectedPatnrId === patnrId) { + return; + } + + setSelectedPatnrId(patnrId); + }, + [selectedPatnrId] + ); + const renderItem = useCallback( ({ index, ...rest }) => { return ( @@ -30,12 +41,12 @@ export default function QuickMenu({ brandInfo={brandInfo} index={index} selectedPatnrId={selectedPatnrId} - onQuickMenuClick={onQuickMenuClick} + onQuickMenuClick={handleQuickMenuClick} {...rest} /> ); }, - [brandInfo, selectedPatnrId, onQuickMenuClick] + [brandInfo, selectedPatnrId, handleQuickMenuClick] ); return ( diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.jsx new file mode 100644 index 00000000..0a1490dd --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.jsx @@ -0,0 +1,58 @@ +import React, { memo } from "react"; + +import SectionTitle from "../../../components/SectionTitle/SectionTitle"; +import { $L } from "../../../utils/helperMethods"; +import css from "./TodaysDeals.module.less"; +import TodaysDealsCard from "./TodaysDealsCard/TodaysDealsCard"; + +const STRING_CONF = { + TODAYS_DEALS: $L("TODAY'S DEALS"), +}; + +// cpnFlag, // 쿠폰 여부 (Y or N) +// freeShippingFlag, // 무료 배송 여부 (Y or N) +// logoImgAlt, // 로고 이미지 alt 값 +// logoImgNm, // 로고 이미지 이름 +// logoImgPath, // 로고 이미지 경로 +// offerInfo, // 제공 정보 +// patncLogoPath, // 파트너사 로고 이미지 경로 +// patncNm, // 파트너 이름 +// patnrId, // 파트너 아이디 +// prdtId, // 상품 아이디 +// prdtNm, // 상품 이름 +// priceInfo, // 상품 금액 정보, 할인전 금액, 할인 후(최종) 금액, 리워드 여부, save 금액, off(할인 %) +// showId, // 방송 아이디 +// showNm, // 방송 이름 +// showUrl, // 방송 url +// thumbnailImg, // 썸네일 이미지 +// tmpltCd, // 템플릿 코드 +// tmpltNm, // 템플릿 명칭 +// todaySpclFlag, // Today Sepcial Value 여부 (Y or N) + +export default memo(function TodaysDeals({ brandTsvInfo }) { + console.log("@@brandTsvInfo", brandTsvInfo); + + const { + cpnFlag: couponFlag, + freeShippingFlag, + prdtNm: productName, + priceInfo, + thumbnailImg, + todaySpclFlag: todaySpecialFlag, + } = brandTsvInfo; + + return ( +
+ + +
+ ); +}); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.module.less new file mode 100644 index 00000000..2dcfb075 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.module.less @@ -0,0 +1,10 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +.container { + margin-bottom: 58px; + + h2 { + margin-bottom: 24px; + } +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.jsx new file mode 100644 index 00000000..f1ddd860 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.jsx @@ -0,0 +1,69 @@ +import React, { memo } from "react"; + +import Spottable from "@enact/spotlight/Spottable"; + +import usePriceInfo from "../../../../hooks/usePriceInfo"; +import css from "./TodaysDealsCard.module.less"; + +const SpottableComponent = Spottable("div"); + +export default memo(function TodaysDealsCard({ + couponFlag, + freeShippingFlag, + imageAlt, + imageSource, + priceInfo, + productName, + todaySpecialFlag, + ...rest +}) { + const { originalPrice, discountedPrice, discountRate, discountNumeric } = + usePriceInfo(priceInfo); + + return ( + +
+ {imageAlt} +
+ +
+
+
+ {todaySpecialFlag === "N" && } + {freeShippingFlag === "N" && } +
+
+ {true && } + {true && } + {true && } + {true && } + {couponFlag === "N" && ( + // @@pyh Todo, COUPON, image resource 유무에 따라 추후 수정 (언어) + {"COUPON"} + )} +
+
+ +
+

{productName}

+

+ {discountRate ? discountedPrice : originalPrice} + {/* {discountRate && {originalPrice}} */} + {"$ 22.33"} +

+
+
+ + {/* {discountRate && ( +
+ {"18%"} + {"SAVE"} +
+ )} */} +
+ {"18%"} + {"SAVE"} +
+ + ); +}); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less new file mode 100644 index 00000000..add4a0e8 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less @@ -0,0 +1,171 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.item { + /* normal */ + position: relative; + .flex(@justifyCenter: flex-start); + .size(@w: 1680px, @h: 372px); + padding: 30px 60px; + background-image: url("../../../../../assets/images/partners/img-partners-banner-td-hor@3x.png"); + background-position: center; + background-size: contain; + + // image area (left) + > div:nth-child(1) { + overflow: hidden; + margin-right: 30px; + border-radius: 16px; + + img { + .size(@w: 558px, @h: 312px); + } + } + + // product infomation (center) + > div:nth-child(2) { + .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start); + .size(@w: 648px, @h: 100%); + padding: 12px 0; + + // product badge icon area (top) + > div:nth-child(1) { + .size(@w: inherit, @h: 156px); + + .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; + } + } + + .specialPriceType { + .flex(@justifyCenter: flex-start); + overflow: hidden; + .size(@w: inherit, @h: 42px); + 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; + } + } + } + + // product contents area (bottom) + > div:nth-child(2) { + h3 { + overflow: hidden; + width: 540px; + min-height: 80px; + margin-bottom: 4px; + .font(@fontFamily: @baseFontBold, @fontSize: 30px); + .elip(@clamp:2); + word-break: break-all; + color: @COLOR_GRAY06; + } + + p { + .flex(@justifyCenter: flex-start); + .font(@fontFamily: @baseFontBold, @fontSize: 46px); + color: @PRIMARY_COLOR_RED; + + span { + margin-left: 6px; + .font(@fontFamily: @baseFont, @fontSize: 24px); + color: #7f7f7f; + text-decoration: line-through; + } + } + } + } + + // sale percentage area (right) + > div:nth-child(3) { + .flex(@direction: column, @alignCenter: flex-end); + flex-grow: 1; + padding-right: 48px; + + > span:nth-child(1) { + .flex(); + .size(@w: 174px, @h: 90px); + margin-bottom: 6px; + background-color: #f40000; + border-radius: 44px; + .font(@fontFamily: @baseFontBold, @fontSize: 54px); + color: @COLOR_WHITE; + } + + > span:nth-child(2) { + .flex(); + .size(@w: 174px, @h: 72px); + .font(@fontFamily: @baseFontBold, @fontSize: 60px); + } + } + + /* focused */ + &:focus-within { + &::after { + .focused(@boxShadow:50px, @borderRadius:12px); + } + } + + /* selected */ +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/package.json new file mode 100644 index 00000000..04572580 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/package.json @@ -0,0 +1,6 @@ +{ + "main": "TodaysDealsCard.jsx", + "styles": [ + "TodaysDealsCard.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/package.json new file mode 100644 index 00000000..ed10585f --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/package.json @@ -0,0 +1,6 @@ +{ + "main": "TodaysDeals.jsx", + "styles": [ + "TodaysDeals.module.less" + ] +}