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; + } + } + } +}