[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 🔧 주요 변경 내용: • 소규모 기능 개선
2025-11-26 20:11:40 +09:00
parent 9439630bad
commit 74d2b827b0
5 changed files with 171 additions and 7 deletions
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
+++ b/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
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.jsx
+++ b/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);
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUContent.module.less
+++ b/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;
+}
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.jsx
+++ b/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);
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/NBCUContent/NBCUList/NBCUList.module.less
+++ b/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;
+      }
+    }
+  }
+}