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 (
+
+
+

+
+
+
+
+
+ {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"
+ ]
+}