From cfee554bf619a844df9beeb1f9edac7638a99cb4 Mon Sep 17 00:00:00 2001 From: optrader Date: Thu, 27 Nov 2025 10:42:59 +0900 Subject: [PATCH] [251127] feat: Featured Brands - NBCU Series MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit πŸ• 컀밋 μ‹œκ°„: 2025. 11. 27. 10:42:58 πŸ“Š λ³€κ²½ 톡계: β€’ 총 파일: 7개 β€’ μΆ”κ°€: +137쀄 β€’ μ‚­μ œ: -1쀄 πŸ“ μΆ”κ°€λœ 파일: + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.jsx + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.module.less + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.jsx + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.module.less πŸ“ μˆ˜μ •λœ 파일: ~ com.twin.app.shoptime/.gitignore ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.module.less πŸ”§ μ£Όμš” λ³€κ²½ λ‚΄μš©: β€’ 쀑간 규λͺ¨ κΈ°λŠ₯ κ°œμ„  β€’ λͺ¨λ“ˆ ꡬ쑰 κ°œμ„  --- com.twin.app.shoptime/.gitignore | 2 + .../NBCUContent/NBCUContent.jsx | 101 +++++++++++++- .../NBCUContent/NBCUContent.module.less | 35 +++++ .../NBCUSectionTitle/NBCUSectionTitle.jsx | 28 ++++ .../NBCUSectionTitle.module.less | 31 +++++ .../NBCUContent/NBCUSeries/NBCUSeries.jsx | 131 ++++++++++++++++++ .../NBCUSeries/NBCUSeries.module.less | 12 ++ 7 files changed, 339 insertions(+), 1 deletion(-) create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.jsx create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.module.less create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.jsx create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.module.less diff --git a/com.twin.app.shoptime/.gitignore b/com.twin.app.shoptime/.gitignore index 1aed66d8..1c68370d 100644 --- a/com.twin.app.shoptime/.gitignore +++ b/com.twin.app.shoptime/.gitignore @@ -22,3 +22,5 @@ nul OPTIMAL.md .docs +GEMINI.md + 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 ba21da68..0796669f 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx @@ -1,17 +1,69 @@ -import React, { memo, useCallback, useState } from "react"; +import React, { memo, useCallback, useState, useEffect } from "react"; import Spotlight from "@enact/spotlight"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; import SectionTitle from "../../../components/SectionTitle/SectionTitle"; +import NBCUSectionTitle from "./NBCUSectionTitle/NBCUSectionTitle"; import { $L } from "../../../utils/helperMethods"; import css from "./NBCUContent.module.less"; import NBCUList from "./NBCUList/NBCUList"; +import NBCUSeries from "./NBCUSeries/NBCUSeries"; const STRING_CONF = { NBCU: "NBCU", + PICKED_FOR_YOU: "PICKED FOR YOU", }; +// Mock data for Series +const MOCK_BRAND_SERIES_GROUP_INFO = [ + { + seriesId: "series-1", + seriesNm: "Drama Collection", + seriesImgUrl: "assets/images/img-thumb-empty-product@3x.png", + patnrId: "nbcu-partner-1", + brandSeriesProductInfo: Array.from({ length: 6 }).map((_, i) => ({ + productId: `drama-${i}`, + productNm: `Drama Show ${i + 1}`, + imageUrl: "assets/images/img-thumb-empty-product@3x.png", + priceInfo: "$15.00|$10.00|N|$5.00|33%|PROMO|2025-12-31", + })), + }, + { + seriesId: "series-2", + seriesNm: "Comedy Series", + seriesImgUrl: "assets/images/img-thumb-empty-product@3x.png", + patnrId: "nbcu-partner-1", + brandSeriesProductInfo: Array.from({ length: 6 }).map((_, i) => ({ + productId: `comedy-${i}`, + productNm: `Comedy Show ${i + 1}`, + imageUrl: "assets/images/img-thumb-empty-product@3x.png", + priceInfo: "$12.00|$8.00|N|$4.00|33%|PROMO|2025-12-31", + })), + }, + { + seriesId: "series-3", + seriesNm: "Sci-Fi Originals", + seriesImgUrl: "assets/images/img-thumb-empty-product@3x.png", + patnrId: "nbcu-partner-1", + brandSeriesProductInfo: Array.from({ length: 6 }).map((_, i) => ({ + productId: `scifi-${i}`, + productNm: `Sci-Fi Show ${i + 1}`, + imageUrl: "assets/images/img-thumb-empty-product@3x.png", + priceInfo: "$18.00|$12.00|N|$6.00|33%|PROMO|2025-12-31", + })), + }, +]; + +const MOCK_BRAND_SERIES_INFO = [ + { seriesId: "series-1", seriesNm: "LOVE ISLAND" }, + { seriesId: "series-2", seriesNm: "TOP CHEF" }, + { seriesId: "series-3", seriesNm: "BELOW DECK" }, +]; + +const SpottableDiv = Spottable('div'); + const Container = SpotlightContainerDecorator( { leaveFor: { right: "" }, enterTo: "last-focused" }, "div" @@ -26,6 +78,11 @@ const NBCUContent = ({ order, }) => { const [firstChk, setFirstChk] = useState(0); + const [selectedSeriesId, setSelectedSeriesId] = useState(null); + + useEffect(() => { + console.log('[NBCUContent] Rendered. order:', order); + }, [order]); const _handleItemFocus = useCallback(() => { if (handleItemFocus) handleItemFocus(spotlightId, shelfOrder); @@ -65,6 +122,9 @@ const NBCUContent = ({ data-title="nbcu" label="NBCU Heading 1" /> + + + + + {/* Keyword Bubble Section (Dummy) */} + {/*
+ {['Action', 'Comedy', 'Drama', 'Sci-Fi', 'Thriller', 'Romance', 'Documentary'].map((keyword, index) => ( + console.log(`Clicked keyword: ${keyword}`)} + > + {keyword} + + ))} +
*/} + + {/* Picked For You Section Title */} + + + {/* Series Component with Mock Data */} + + ); }; 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 index ef0f8e01..ee6965a0 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.module.less @@ -1 +1,36 @@ @import "../../../style/CommonStyle.module.less"; + +.container { + display: flex; + flex-direction: column; + padding: 50px 0; // Adjust padding as needed +} + +.keywordContainer { + display: flex; + flex-wrap: wrap; + gap: 12px; + padding: 0 60px; // Match side padding of other contents + margin-bottom: 30px; +} + +.keywordBubble { + display: flex; + align-items: center; + justify-content: center; + padding: 10px 24px; + border-radius: 30px; + background-color: rgba(255, 255, 255, 0.1); + color: #ffffff; + font-size: 24px; + font-weight: 500; + cursor: pointer; + border: 2px solid transparent; + transition: all 0.2s ease-in-out; + + &:focus, &:hover { + background-color: rgba(255, 255, 255, 0.2); + border-color: #ffffff; + transform: scale(1.05); + } +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.jsx new file mode 100644 index 00000000..a2421856 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.jsx @@ -0,0 +1,28 @@ +import React, { memo } from "react"; + +import classNames from "classnames"; + +import css from "./NBCUSectionTitle.module.less"; + +export default memo(function NBCUSectionTitle({ + className, + itemCount, + title, + label, + isBlack = false, + ...rest +}) { + return ( +

+ {title} + {itemCount && ({itemCount})} +

+ ); +}); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.module.less new file mode 100644 index 00000000..bb3c6c89 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSectionTitle/NBCUSectionTitle.module.less @@ -0,0 +1,31 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.sectionTitle { + position: relative; + .flex(@justifyCenter: flex-start); + min-height: 50px; + font-weight: bold; + font-size: 42px; + color: #000000 !important; + + &::before { + display: inline-block; + content: ""; + .size(@w: 6px, @h: 36px); + margin-right: 12px; + background-color: #000000 !important; + } + + span { + margin-left: 10px; + } +} + +.blackTitle { + color: #000000; + + &::before { + background-color: #000000; + } +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.jsx new file mode 100644 index 00000000..3e6cba3a --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.jsx @@ -0,0 +1,131 @@ +import React, { memo, useCallback, useEffect, useState } from "react"; + +import Spotlight from "@enact/spotlight"; +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; + +import NBCUSectionTitle from "../NBCUSectionTitle/NBCUSectionTitle"; +import { $L } from "../../../../utils/helperMethods"; +import css from "./NBCUSeries.module.less"; +import SeriesContents from "../../Series/SeriesContents/SeriesContents"; +import SeriesNav from "../../Series/SeriesNav/SeriesNav"; + +const STRING_CONF = { + SERIES: "SERIES", +}; + +const Container = SpotlightContainerDecorator( + { leaveFor: { right: "" }, enterTo: "last-focused" }, + "div" +); + +const NBCUSeries = ({ + brandSeriesGroupInfo, + brandSeriesInfo, + fromGNB, + fromQuickMenu, + handleItemFocus, + order, + shelfOrder, + shelfTitle, + spotlightId, + selectedPatncNm, + selectedPatnrId, + selectedSeriesId, + setSelectedSeriesId, +}) => { + const [filteredBrandSeriesGroupInfo, setFilteredSeriesGroupInfo] = useState(); + const [firstChk, setFirstChk] = useState(0); + + useEffect(() => { + if (!selectedSeriesId) { + return setFilteredSeriesGroupInfo(brandSeriesGroupInfo); + } + + setFilteredSeriesGroupInfo( + brandSeriesGroupInfo.filter( + ({ seriesId }) => seriesId === selectedSeriesId + ) + ); + }, [brandSeriesGroupInfo, selectedSeriesId]); + + 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 = "series, 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("series, Heading1,", ""); + c.setAttribute("aria-label", newcAriaLabel); + } + } + } else { + return; + } + }, [handleItemFocus, firstChk]); + + return ( + + {/* */} + + {filteredBrandSeriesGroupInfo && + filteredBrandSeriesGroupInfo.map( + ( + { + brandSeriesProductInfo, + patnrId, + seriesId, + seriesImgUrl, + seriesNm, + }, + contentsIndex + ) => ( + + ) + )} + + ); +}; + +export default memo(NBCUSeries); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.module.less new file mode 100644 index 00000000..fb139ec3 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUSeries/NBCUSeries.module.less @@ -0,0 +1,12 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.container { + width: 100%; + margin-bottom: 36px; + + h2 { + margin-bottom: 24px; + padding-left: 60px; + } +}