[251126] feat: Featured Brands - NBCU - 1

🕐 커밋 시간: 2025. 11. 26. 19:43:03

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

📁 추가된 파일:
  + com.twin.app.shoptime/assets/images/featuredBrands/image-nbcu.png
  + com.twin.app.shoptime/assets/images/featuredBrands/nbcu.svg
  + com.twin.app.shoptime/src/components/TabLayout/iconComponents/NbcuIcon.jsx

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선

com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx

@@ -172,8 +172,23 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
         break;
       //브랜드
       case 10300:
-        result =
+        result = [
-          data?.shortFeaturedBrands?.map((item) => ({
+          // NBCU 브랜드 (하드코딩)
+          {
+            icons: FeaturedBrandIcon,
+            id: 'nbcu-brand',
+            path: 'assets/images/featuredBrands/nbcu.svg',
+            patncNm: 'NBCU',
+            spotlightId: 'spotlight_featuredbrand_nbcu',
+            target: [
+              {
+                name: panel_names.FEATURED_BRANDS_PANEL,
+                panelInfo: { from: 'gnb', patnrId: 'NBCU' },
+              },
+            ],
+          },
+          // API에서 가져온 기존 브랜드들
+          ...(data?.shortFeaturedBrands?.map((item) => ({
             icons: FeaturedBrandIcon,
             id: item.patnrId,
             path: item.patncLogoPath,
@@ -185,7 +200,8 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
                 panelInfo: { from: 'gnb', patnrId: item.patnrId },
               },
             ],
-          })) || [];
+          })) || []),
+        ];
         break;
       //
       case 10600:
@@ -304,6 +320,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
               title: item.title,
               path: item.path,
               patncNm: item.patncNm,
+              icons: item.icons,
               target: item.target,
               spotlightId: `secondDepth-${item.id}`,
             }));

com.twin.app.shoptime/src/components/TabLayout/iconComponents/NbcuIcon.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { scaleW } from "../../../utils/helperMethods";
+import useConvertThemeColor from "./useConvertThemeColor";
+
+const NbcuIcon = ({ iconType = "normal" }) => {
+  const themeColor = useConvertThemeColor({ iconType });
+  return (
+    <svg
+      width={scaleW(48)}
+      height={scaleW(48)}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="24" cy="24" r="22" fill={themeColor} opacity="0.1" stroke={themeColor} strokeWidth="0.5" />
+      <text
+        x="24"
+        y="32"
+        textAnchor="middle"
+        fill={themeColor}
+        fontSize="18"
+        fontWeight="bold"
+        fontFamily="Arial, sans-serif"
+      >
+        NBC
+      </text>
+      <text
+        x="24"
+        y="40"
+        textAnchor="middle"
+        fill={themeColor}
+        fontSize="10"
+        fontFamily="Arial, sans-serif"
+      >
+        U
+      </text>
+    </svg>
+  );
+};
+
+export default NbcuIcon;