[251126] feat: Featured Brands - NBCU Basic Page

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

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +40줄
  • 삭제: -7줄

📁 추가된 파일:
  + 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/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.jsx
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.module.less

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

🔧 주요 변경 내용:
  • 소규모 기능 개선

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

@@ -60,6 +60,7 @@ import css from "./FeaturedBrandsPanel.module.less";
 import FeaturedCategory from "./FeaturedCategory/FeaturedCategory";
 import FeaturedCreators from "./FeaturedCreators/FeaturedCreators";
 import LiveChannels from "./LiveChannels/LiveChannels";
+import NBCUContent from "./NBCUContent/NBCUContent";
 import QuickMenu from "./QuickMenu/QuickMenu";
 import RecommendedShows from "./RecommendedShows/RecommendedShows";
 import Series from "./Series/Series";
@@ -81,6 +82,7 @@ const STRING_CONF = {
 };
 
 const TEMPLATE_CODE_CONF = {
+  NBCU: "NBU00100",
   LIVE_CHANNELS: "BRD00101",
   UP_COMING: "BRD00102",
   TODAYS_DEALS: "BRD00103",
@@ -304,8 +306,20 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
   );
 
   const sortedBrandLayoutInfo = useMemo(
-    () => brandLayoutInfo?.sort((a, b) => a.expsOrd - b.expsOrd) ?? [],
+    () => {
-    [brandLayoutInfo]
+      // NBCU 특별 처리
+      if (panelInfo?.patnrId === 'NBCU') {
+        return [
+          {
+            shptmBrndOptTpCd: TEMPLATE_CODE_CONF.NBCU,
+            shptmBrndOptTpNm: 'NBCU',
+            expsOrd: 1,
+          },
+        ];
+      }
+      return brandLayoutInfo?.sort((a, b) => a.expsOrd - b.expsOrd) ?? [];
+    },
+    [brandLayoutInfo, panelInfo?.patnrId]
   );
 
   const doSendLogGNB = useCallback(
@@ -415,6 +429,18 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
       <>
         {sortedBrandLayoutInfo.map((el, idx) => {
           switch (el.shptmBrndOptTpCd) {
+            case TEMPLATE_CODE_CONF.NBCU: {
+              return (
+                <React.Fragment key={el.shptmBrndOptTpCd}>
+                  <NBCUContent
+                    handleItemFocus={handleItemFocus}
+                    spotlightId={TEMPLATE_CODE_CONF.NBCU}
+                    shelfOrder={el.expsOrd}
+                  />
+                </React.Fragment>
+              );
+            }
+
             case TEMPLATE_CODE_CONF.LIVE_CHANNELS: {
               return (
                 <React.Fragment key={el.shptmBrndOptTpCd}>
@@ -719,14 +745,21 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
 
   // effect: set selectedPatnrId and selectedPatncNm
   useEffect(() => {
-    if (brandInfo) {
+    if (brandInfo || panelInfo?.patnrId) {
       const patnrId = panelInfo?.patnrId;
-      const patncNm = brandInfo.find((b) => b?.patnrId === patnrId).patncNm;
-
-      setSelectedPatncNm(patncNm);
 
+      // NBCU 특별 처리
+      if (patnrId === 'NBCU') {
+        setSelectedPatncNm('NBCU');
+        if (!fromDetail) setSelectedPatnrId('NBCU');
+      } else if (brandInfo) {
+        const brandItem = brandInfo.find((b) => b?.patnrId === patnrId);
+        if (brandItem) {
+          setSelectedPatncNm(brandItem.patncNm);
           if (!fromDetail) setSelectedPatnrId(patnrId);
         }
+      }
+    }
   }, [brandInfo, panelInfo?.patnrId]);
 
   // effect: data fetching based on brandLayoutInfo and selectedPatnrId

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+import css from './NBCUContent.module.less';
+
+const NBCUContent = ({ handleItemFocus, spotlightId, shelfOrder = 1 }) => {
+  return (
+    <div className={css.container} data-wheel-point>
+      <div className={css.content}>
+        <h2 className={css.title}>NBCU</h2>
+        <p className={css.message}>Content Coming Soon</p>
+      </div>
+    </div>
+  );
+};
+
+export default memo(NBCUContent);

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.module.less

@@ -0,0 +1,28 @@
+@import "../../../style/CommonStyle.module.less";
+
+.container {
+  width: 100%;
+  padding: 40px 60px;
+  margin-bottom: 58px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+.title {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.message {
+  font-size: 18px;
+  color: #666;
+  margin: 0;
+}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.jsx

@@ -0,0 +1,66 @@
+import React, { useCallback, useMemo } from 'react';
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+
+import TItemCardNew from '../../../../components/TItemCard/TItemCard.new';
+import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList';
+import css from './NBCUList.module.less';
+
+// 더미 데이터 생성
+// priceInfo format: originalPrice|discountedPrice|rewardFlag|discountAmount|discountRate|promotionCode|promotionDate
+const DUMMY_DATA = Array.from({ length: 10 }).map((_, index) => ({
+  id: `nbcu-item-${index}`,
+  title: `NBCU Content ${index + 1}`,
+  imgUrl: 'assets/images/img-thumb-empty-product@3x.png',
+  priceInfo: '$20.00|$10.00|N|$10.00|50%|PROMO|2025-12-31',
+}));
+
+const Container = SpotlightContainerDecorator(
+  { leaveFor: { right: '' }, enterTo: 'last-focused' },
+  'div'
+);
+
+const NBCUList = ({ handleItemFocus, spotlightId, shelfTitle, shelfOrder }) => {
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const item = DUMMY_DATA[index];
+      const labelText = `${index + 1} of ${DUMMY_DATA.length}`;
+
+      return (
+        <TItemCardNew
+          {...rest}
+          key={item.id}
+          imageSource={item.imgUrl}
+          productName={item.title}
+          priceInfo={item.priceInfo}
+          spotlightId={`nbcu-spotlightId-${index}`}
+          shelfId={spotlightId}
+          shelfLocation={shelfOrder}
+          shelfTitle={shelfTitle}
+          label={labelText}
+          onFocus={handleItemFocus}
+          onClick={() => {
+            console.log('Clicked NBCU item:', item.title);
+          }}
+        />
+      );
+    },
+    [handleItemFocus, spotlightId, shelfOrder, shelfTitle]
+  );
+
+  return (
+    <Container className={css.container} spotlightId={spotlightId}>
+      <TVirtualGridList
+        dataSize={DUMMY_DATA.length}
+        direction="horizontal"
+        itemHeight={438}
+        itemWidth={324}
+        spacing={18}
+        renderItem={renderItem}
+        className={css.tVirtualGridList}
+      />
+    </Container>
+  );
+};
+
+export default React.memo(NBCUList);

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.module.less

@@ -0,0 +1,22 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  display: flex;
+  position: relative;
+  .size(@w: 100%, @h: 438px);
+  padding-right: 18px;
+
+  // tVirtualGridListContainer
+  > div:nth-child(1) {
+    .size(@w: 100%, @h: inherit);
+
+    &.tVirtualGridList {
+      padding-left: 60px;
+
+      > div:nth-child(3) {
+        right: -18px;
+      }
+    }
+  }
+}