diff --git a/com.twin.app.shoptime/assets/images/featuredBrands/image-bg.png b/com.twin.app.shoptime/assets/images/featuredBrands/image-bg.png
new file mode 100644
index 00000000..8e9d71a5
Binary files /dev/null and b/com.twin.app.shoptime/assets/images/featuredBrands/image-bg.png differ
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx
index 8666f37a..c391a199 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx
@@ -1,6 +1,7 @@
import React, { memo } from "react";
import IcPartnersDefault from "../../../../assets/images/ic-tab-partners-default@3x.png";
+import NBCULogoImage from "../../../../assets/images/featuredBrands/image-nbcu.png";
import CustomImage from "../../../components/CustomImage/CustomImage";
import css from "./Banner.module.less";
@@ -15,16 +16,20 @@ export default memo(function Banner({
const { patncLogoPath, patncNm } = selectedBrandInfo;
const { topImgAlt, topImgPath } = brandTopImgInfo;
+ // NBCU 로고 이미지 처리
+ const logoSrc = panelPatnrId === 'NBCU' ? NBCULogoImage : patncLogoPath;
+ const logoName = panelPatnrId === 'NBCU' ? 'Peacock' : patncNm;
+
return (
- {patncNm}
+ {logoName}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
index 08fe6410..b7cf57e0 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
@@ -69,6 +69,7 @@ import TodaysDeals from "./TodaysDeals/TodaysDeals";
import UpComing from "./UpComing/UpComing";
import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
import { sortedIndexOf } from "lodash";
+import NBCUBgImage from "../../../assets/images/featuredBrands/image-bg.png";
const STRING_CONF = {
CANCEL: "CANCEL",
@@ -326,6 +327,24 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
[brandLayoutInfo, panelInfo?.patnrId]
);
+ const processedBrandTopImgInfo = useMemo(
+ () => {
+ // NBCU 특별 처리
+ if (panelInfo?.patnrId === 'NBCU') {
+ return {
+ topImgPath: NBCUBgImage,
+ topImgAlt: 'NBCU Background Image',
+ };
+ }
+ // 다른 브랜드: brandTopImgInfo가 유효한 객체여야 함
+ if (brandTopImgInfo && brandTopImgInfo.topImgPath) {
+ return brandTopImgInfo;
+ }
+ return null;
+ },
+ [brandTopImgInfo, panelInfo?.patnrId]
+ );
+
const doSendLogGNB = useCallback(
(containerId, shelfOrder) => {
if (
@@ -440,6 +459,9 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
handleItemFocus={handleItemFocus}
spotlightId={TEMPLATE_CODE_CONF.NBCU}
shelfOrder={el.expsOrd}
+ shelfTitle={el.shptmBrndOptTpNm}
+ selectedPatnrId={selectedPatnrId}
+ order={idx + 1}
/>
);
@@ -995,10 +1017,10 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
/>
)}
- {brandInfo && brandTopImgInfo && (
+ {((brandInfo && processedBrandTopImgInfo) || panelInfo?.patnrId === 'NBCU') && processedBrandTopImgInfo && (
)}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx
index 2b4ca69b..ba21da68 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx
@@ -1,14 +1,78 @@
-import React, { memo } from 'react';
-import css from './NBCUContent.module.less';
+import React, { memo, useCallback, useState } from "react";
+
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import { $L } from "../../../utils/helperMethods";
+import css from "./NBCUContent.module.less";
+import NBCUList from "./NBCUList/NBCUList";
+
+const STRING_CONF = {
+ NBCU: "NBCU",
+};
+
+const Container = SpotlightContainerDecorator(
+ { leaveFor: { right: "" }, enterTo: "last-focused" },
+ "div"
+);
+
+const NBCUContent = ({
+ handleItemFocus,
+ spotlightId,
+ shelfOrder,
+ selectedPatnrId,
+ shelfTitle,
+ order,
+}) => {
+ const [firstChk, setFirstChk] = useState(0);
+
+ const _handleItemFocus = useCallback(() => {
+ if (handleItemFocus) handleItemFocus(spotlightId, shelfOrder);
+
+ const c = Spotlight.getCurrent();
+ if (firstChk === 0) {
+ if (c) {
+ let cAriaLabel = c.getAttribute("aria-label");
+ if (cAriaLabel) {
+ cAriaLabel = "NBCU, Heading1," + cAriaLabel;
+ c.setAttribute("aria-label", cAriaLabel);
+ }
+ }
+ setFirstChk(1);
+ } else if (firstChk === 1) {
+ if (c) {
+ let cAriaLabel = c.getAttribute("aria-label");
+ if (cAriaLabel) {
+ const newcAriaLabel = cAriaLabel.replace("NBCU, Heading1,", "");
+ c.setAttribute("aria-label", newcAriaLabel);
+ }
+ }
+ } else {
+ return;
+ }
+ }, [handleItemFocus, firstChk, spotlightId, shelfOrder]);
-const NBCUContent = ({ handleItemFocus, spotlightId, shelfOrder = 1 }) => {
return (
-
-
-
NBCU
-
Content Coming Soon
-
-
-
- {brandInfo.map((brandInfoItem, itemIndex) => (
-
- ))}
+ {panelPatnrId === 'NBCU' ? (
+ <>
+
+ {brandInfo.map((brandInfoItem, itemIndex) => (
+
+ ))}
+
+ ) : (
+ brandInfo.map((brandInfoItem, itemIndex) => (
+
+ ))
+ )}