diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index 48ef45ea..08fe6410 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx @@ -307,6 +307,10 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => { const sortedBrandLayoutInfo = useMemo( () => { + if (!panelInfo?.patnrId) { + return []; + } + // NBCU 특별 처리 if (panelInfo?.patnrId === 'NBCU') { return [ @@ -735,7 +739,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => { // effect: layout information fetching due to partner id change useEffect(() => { - if (!fromDetail) { + if (!fromDetail && panelInfo?.patnrId) { dispatch({ type: types.RESET_BRAND_LAYOUT_INFO }); dispatch(getBrandLayoutInfo({ patnrId: panelInfo?.patnrId })); setIsInitialFocusOccurred(false); 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 4603b120..6900692a 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx @@ -5,7 +5,8 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco import TScroller from "../../../components/TScroller/TScroller"; import useScrollTo from "../../../hooks/useScrollTo"; import { scaleW } from "../../../utils/helperMethods"; -import QuickMenuItem from "../QuickMenu/QuickMenuItem/QuickMenuItem"; +import QuickMenuItem from "./QuickMenuItem/QuickMenuItem"; +import QuickMenuItemNBCU from "./QuickMenuItemNBCU/QuickMenuItemNBCU"; import css from "./QuickMenu.module.less"; const Container = SpotlightContainerDecorator( @@ -76,16 +77,25 @@ const QuickMenu = ({ noScrollByWheel > diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItemNBCU/QuickMenuItemNBCU.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItemNBCU/QuickMenuItemNBCU.jsx new file mode 100644 index 00000000..a478a563 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItemNBCU/QuickMenuItemNBCU.jsx @@ -0,0 +1,96 @@ +import React, { memo, useCallback } from "react"; + +import classNames from "classnames"; +import { useDispatch, useSelector } from "react-redux"; + +import Spottable from "@enact/spotlight/Spottable"; + +import IcPartnersDefault from "../../../../../assets/images/ic-tab-partners-default@3x.png"; +import { resetPanels, updatePanel } from "../../../../actions/panelActions"; +import CustomImage from "../../../../components/CustomImage/CustomImage"; +import useScrollReset from "../../../../hooks/useScrollReset"; +import { panel_names } from "../../../../utils/Config"; +import css from "./QuickMenuItemNBCU.module.less"; + +const SpottableComponent = Spottable("li"); + +const QuickMenuItemNBCU = ({ + itemIndex, + handleItemFocus, + resetStates, + scrollLeft, + selectedPatnrId, + label, + ...rest +}) => { + const { handleScrollReset, handleStopScrolling } = useScrollReset( + scrollLeft, + true + ); + + const dispatch = useDispatch(); + + const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo); + + const patnrId = "NBCU"; + + const handleBlur = useCallback(() => { + if (itemIndex !== 0) { + return; + } + + handleStopScrolling(); + }, [handleStopScrolling, itemIndex]); + + const handleClick = useCallback(() => { + if (patnrId === (selectedPatnrId ?? panelInfo?.patnrId)) { + return; + } + + const from = "menu"; + const name = panel_names.FEATURED_BRANDS_PANEL; + + dispatch(resetPanels([{ name }])); + dispatch(updatePanel({ name, panelInfo: { from, patnrId } })); + resetStates(); + }, [dispatch, patnrId, resetStates, selectedPatnrId]); + + const handleFocus = useCallback(() => { + if (handleItemFocus) handleItemFocus(); + + if (itemIndex !== 0) return; + + handleScrollReset(); + }, [handleScrollReset, handleItemFocus, itemIndex]); + + const selected = + (selectedPatnrId ?? panelInfo?.patnrId) === patnrId ? "Selected, " : ""; + const ariaLabel = selected + "Channel NBCU, Tap " + label; + + return ( + +
+ +
+
+ ); +}; + +export default memo(QuickMenuItemNBCU); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItemNBCU/QuickMenuItemNBCU.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItemNBCU/QuickMenuItemNBCU.module.less new file mode 100644 index 00000000..e743db3f --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItemNBCU/QuickMenuItemNBCU.module.less @@ -0,0 +1,54 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.brand { + position: relative; + .flex(); + .size(@w: 144px, @h: 144px); + + > div { + position: relative; + // NBCU image + > img { + .size(@w: 120px, @h: 120px); + border-radius: 50%; + } + } + + &.selected { + // NBCU image + .size(@w: 144px, @h: 144px); + > div { + &:after { + .focused(@boxShadow: 0px, @borderRadius: 50%); + } + + > img { + .size(@w: 144px, @h: 144px); + border-radius: 50%; + } + } + } + + &:focus { + // NBCU image + &:after { + .size(@w:100%, @h:6px); + position: absolute; + left: 0; + bottom: -18px; + background: @PRIMARY_COLOR_RED; + content: ""; + } + > div { + &:after { + .focused(@boxShadow: 0px, @borderRadius: 50%); + border-color: @PRIMARY_COLOR_RED; + } + > img { + .size(@w: 120px, @h: 120px); + border-radius: 50%; + } + } + } +}