[251126] feat: Featured Brands - NBCU QuickItem Icon

🕐 커밋 시간: 2025. 11. 26. 20:26:07

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +18줄
  • 삭제: -4줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItemNBCU/QuickMenuItemNBCU.jsx
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItemNBCU/QuickMenuItemNBCU.module.less

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx

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);

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
       >
         <ul ref={ulRef}>
+          <QuickMenuItemNBCU
+            itemIndex={0}
+            handleItemFocus={_handleItemFocus}
+            key="nbcu-item"
+            resetStates={resetStates}
+            scrollLeft={scrollLeft}
+            selectedPatnrId={selectedPatnrId}
+            label={"1 of " + (brandInfo.length + 1)}
+          />
           {brandInfo.map((brandInfoItem, itemIndex) => (
             <QuickMenuItem
               brandInfoItem={brandInfoItem}
-              itemIndex={itemIndex}
+              itemIndex={itemIndex + 1}
               handleItemFocus={_handleItemFocus}
               key={"brand-info" + itemIndex}
               resetStates={resetStates}
               scrollLeft={scrollLeft}
               selectedPatnrId={selectedPatnrId}
-              label={itemIndex * 1 + 1 + " of " + brandInfo.length}
+              label={(itemIndex + 2) + " of " + (brandInfo.length + 1)}
             />
           ))}
         </ul>

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 (
+    <SpottableComponent
+      className={classNames(
+        css.brand,
+        (selectedPatnrId ?? panelInfo?.patnrId) === patnrId && css.selected
+      )}
+      data-menu-index={itemIndex}
+      onBlur={handleBlur}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      spotlightId={"spotlightId-NBCU"}
+      aria-label={ariaLabel}
+      {...rest}
+    >
+      <div>
+        <CustomImage
+          src="assets/images/featuredBrands/image-nbcu.png"
+          alt="NBCU"
+          fallbackSrc={IcPartnersDefault}
+          ariaLabel="NBCU"
+        />
+      </div>
+    </SpottableComponent>
+  );
+};
+
+export default memo(QuickMenuItemNBCU);

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