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
>
+
{brandInfo.map((brandInfoItem, itemIndex) => (
))}
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%;
+ }
+ }
+ }
+}