diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
index 598f6c4c..48ef45ea 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
@@ -60,6 +60,7 @@ import css from "./FeaturedBrandsPanel.module.less";
import FeaturedCategory from "./FeaturedCategory/FeaturedCategory";
import FeaturedCreators from "./FeaturedCreators/FeaturedCreators";
import LiveChannels from "./LiveChannels/LiveChannels";
+import NBCUContent from "./NBCUContent/NBCUContent";
import QuickMenu from "./QuickMenu/QuickMenu";
import RecommendedShows from "./RecommendedShows/RecommendedShows";
import Series from "./Series/Series";
@@ -81,6 +82,7 @@ const STRING_CONF = {
};
const TEMPLATE_CODE_CONF = {
+ NBCU: "NBU00100",
LIVE_CHANNELS: "BRD00101",
UP_COMING: "BRD00102",
TODAYS_DEALS: "BRD00103",
@@ -304,8 +306,20 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
);
const sortedBrandLayoutInfo = useMemo(
- () => brandLayoutInfo?.sort((a, b) => a.expsOrd - b.expsOrd) ?? [],
- [brandLayoutInfo]
+ () => {
+ // NBCU 특별 처리
+ if (panelInfo?.patnrId === 'NBCU') {
+ return [
+ {
+ shptmBrndOptTpCd: TEMPLATE_CODE_CONF.NBCU,
+ shptmBrndOptTpNm: 'NBCU',
+ expsOrd: 1,
+ },
+ ];
+ }
+ return brandLayoutInfo?.sort((a, b) => a.expsOrd - b.expsOrd) ?? [];
+ },
+ [brandLayoutInfo, panelInfo?.patnrId]
);
const doSendLogGNB = useCallback(
@@ -415,6 +429,18 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
<>
{sortedBrandLayoutInfo.map((el, idx) => {
switch (el.shptmBrndOptTpCd) {
+ case TEMPLATE_CODE_CONF.NBCU: {
+ return (
+
+
+
+ );
+ }
+
case TEMPLATE_CODE_CONF.LIVE_CHANNELS: {
return (
@@ -719,13 +745,20 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// effect: set selectedPatnrId and selectedPatncNm
useEffect(() => {
- if (brandInfo) {
+ if (brandInfo || panelInfo?.patnrId) {
const patnrId = panelInfo?.patnrId;
- const patncNm = brandInfo.find((b) => b?.patnrId === patnrId).patncNm;
- setSelectedPatncNm(patncNm);
-
- if (!fromDetail) setSelectedPatnrId(patnrId);
+ // NBCU 특별 처리
+ if (patnrId === 'NBCU') {
+ setSelectedPatncNm('NBCU');
+ if (!fromDetail) setSelectedPatnrId('NBCU');
+ } else if (brandInfo) {
+ const brandItem = brandInfo.find((b) => b?.patnrId === patnrId);
+ if (brandItem) {
+ setSelectedPatncNm(brandItem.patncNm);
+ if (!fromDetail) setSelectedPatnrId(patnrId);
+ }
+ }
}
}, [brandInfo, panelInfo?.patnrId]);
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx
new file mode 100644
index 00000000..2b4ca69b
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx
@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+import css from './NBCUContent.module.less';
+
+const NBCUContent = ({ handleItemFocus, spotlightId, shelfOrder = 1 }) => {
+ return (
+
+
+
NBCU
+
Content Coming Soon
+
+
+ );
+};
+
+export default memo(NBCUContent);
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.module.less
new file mode 100644
index 00000000..521148a2
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.module.less
@@ -0,0 +1,28 @@
+@import "../../../style/CommonStyle.module.less";
+
+.container {
+ width: 100%;
+ padding: 40px 60px;
+ margin-bottom: 58px;
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+}
+
+.title {
+ font-size: 32px;
+ font-weight: bold;
+ margin-bottom: 20px;
+ color: #333;
+}
+
+.message {
+ font-size: 18px;
+ color: #666;
+ margin: 0;
+}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.jsx
new file mode 100644
index 00000000..21fc9214
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.jsx
@@ -0,0 +1,66 @@
+import React, { useCallback, useMemo } from 'react';
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+
+import TItemCardNew from '../../../../components/TItemCard/TItemCard.new';
+import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList';
+import css from './NBCUList.module.less';
+
+// 더미 데이터 생성
+// priceInfo format: originalPrice|discountedPrice|rewardFlag|discountAmount|discountRate|promotionCode|promotionDate
+const DUMMY_DATA = Array.from({ length: 10 }).map((_, index) => ({
+ id: `nbcu-item-${index}`,
+ title: `NBCU Content ${index + 1}`,
+ imgUrl: 'assets/images/img-thumb-empty-product@3x.png',
+ priceInfo: '$20.00|$10.00|N|$10.00|50%|PROMO|2025-12-31',
+}));
+
+const Container = SpotlightContainerDecorator(
+ { leaveFor: { right: '' }, enterTo: 'last-focused' },
+ 'div'
+);
+
+const NBCUList = ({ handleItemFocus, spotlightId, shelfTitle, shelfOrder }) => {
+ const renderItem = useCallback(
+ ({ index, ...rest }) => {
+ const item = DUMMY_DATA[index];
+ const labelText = `${index + 1} of ${DUMMY_DATA.length}`;
+
+ return (
+ {
+ console.log('Clicked NBCU item:', item.title);
+ }}
+ />
+ );
+ },
+ [handleItemFocus, spotlightId, shelfOrder, shelfTitle]
+ );
+
+ return (
+
+
+
+ );
+};
+
+export default React.memo(NBCUList);
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.module.less
new file mode 100644
index 00000000..9dc623cb
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.module.less
@@ -0,0 +1,22 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+ display: flex;
+ position: relative;
+ .size(@w: 100%, @h: 438px);
+ padding-right: 18px;
+
+ // tVirtualGridListContainer
+ > div:nth-child(1) {
+ .size(@w: 100%, @h: inherit);
+
+ &.tVirtualGridList {
+ padding-left: 60px;
+
+ > div:nth-child(3) {
+ right: -18px;
+ }
+ }
+ }
+}