TabLayout 데이터 가공 로직 수정

2024-04-08 20:15:52 +09:00
parent aa73a0ed1d
commit bd5563ca59
5 changed files with 183 additions and 165 deletions
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
@@ -1,13 +1,21 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';

-import classNames from "classnames";
-import compose from "ramda/src/compose";
+import classNames from 'classnames';
+import compose from 'ramda/src/compose';

-import { Job } from "@enact/core/util";
-import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
-import Spottable from "@enact/spotlight/Spottable";
+import { Job } from '@enact/core/util';
+import {
+  Marquee,
+  MarqueeController,
+} from '@enact/sandstone/Marquee';
+import Spottable from '@enact/spotlight/Spottable';

-import css from "./TabItemSub.module.less";
+import css from './TabItemSub.module.less';

 const SpottableComponent = Spottable("div");
 const TabItemBase = ({
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -60,37 +60,35 @@ class TabMenuItem {
  constructor(
    icons = "",
    title = "",
-    id = "",
    spotlightId,
    path,
    target,
+    id,
    children = []
  ) {
    this.icons = icons;
    this.title = title;
-    this.id = id;
    this.spotlightId = spotlightId;
    this.path = path;
    this.target = target;
-    this.children = []; //TabMenuItem
-    if (children && children.length > 0) {
-      for (let i = 0; i < children.length; i++) {
-        const tabmenu = new TabMenuItem(
-          children[i].icons,
-          children[i].title,
-          children[i].id,
-          children[i].spotlightId,
-          children[i].path,
-          children[i].target,
-          children[i].children
-        );
-        this.children.push(tabmenu);
-      }
-    }
+    this.id = id;
+    this.children = children.map(
+      (child) =>
+        new TabMenuItem(
+          child.icons,
+          child.title,
+          child.spotlightId,
+          child.path,
+          child.target,
+          child.id
+        )
+    );
  }
+
  hasChildren = () => {
-    return this.children.length > 0;
+    return this.children.length > 1;
  };
+
  getChildren = () => {
    return this.children;
  };
@@ -139,59 +137,30 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
  const data = useSelector((state) => state.home.menuData?.data);
  const panels = useSelector((state) => state.panels.panels);
  const { loginUserData } = useSelector((state) => state.common.appStatus);
+  const menuItems = useSelector((state) => state.home.menuItems);

-  const menuItems = useMemo(() => {
-    return [
-      {
-        icons: CategoryIcon,
-        spotlightId: "spotlight_category",
-      },
-      {
-        icons: MyPageIcon,
-        spotlightId: "spotlight_mypage",
-      },
-      {
-        icons: SearchIcon,
-        target: [{ name: panel_names.SEARCH_PANEL }],
-        spotlightId: "spotlight_search",
-      },
-      {
-        icons: HomeIcon,
-        target: [{ name: panel_names.HOME_PANEL }],
-        spotlightId: "spotlight_home",
-      },
-      {
-        icons: FeaturedBrandIcon,
-        spotlightId: "spotlight_featuredbrand",
-      },
-      {
-        icons: OnSaleIcon,
-        target: [{ name: panel_names.ON_SALE_PANEL }],
-        spotlightId: "spotlight_onsale",
-      },
-      {
-        icons: TrendingNowIcon,
-        target: [{ name: panel_names.TRENDING_NOW_PANEL }],
-        spotlightId: "spotlight_trendingnow",
-      },
-      {
-        icons: HotPicksIcon,
-        target: [{ name: panel_names.HOT_PICKS_PANEL }],
-        spotlightId: "spotlight_hotpicks",
-      },
-    ];
-  }, []);
-
+  const menuData = useMemo(() => {}, []);
  const getMenuData = (type) => {
    let result = [];

    switch (type) {
-      case "Category":
+      case "GNB":
+        result =
+          data?.gnb &&
+          data.gnb.map((item) => ({
+            title: item.menuNm,
+          }));
+        break;
+
+      //카테고리
+      case 10500:
        result =
          data?.homeCategory &&
          data.homeCategory.map((item) => ({
+            icons: CategoryIcon,
            id: item.lgCatCd,
            title: item.lgCatNm,
+            spotlightId: "spotlight_category",
            target: [
              {
                name: panel_names.CATEGORY_PANEL,
@@ -204,20 +173,15 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
            ],
          }));
        break;
-      case "GNB":
-        result =
-          data?.gnb &&
-          data.gnb.map((item) => ({
-            title: item.menuNm,
-          }));
-        break;
-
-      case "Featured Brands":
+      //브랜드
+      case 10300:
        result =
          data?.shortFeaturedBrands &&
          data.shortFeaturedBrands.map((item) => ({
+            icons: FeaturedBrandIcon,
            id: item.patnrId,
            path: item.patncLogoPath,
+            spotlightId: "spotlight_featuredbrand",
            target: [
              {
                name: panel_names.FEATURED_BRANDS_PANEL,
@@ -226,11 +190,14 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
            ],
          }));
        break;
-      case "My Page":
+      //
+      case 10600:
        result = data.mypage
          .map((item) => ({
+            icons: MyPageIcon,
            id: item.menuId,
            title: item.menuNm,
+            spotlightId: "spotlight_mypage",
            target: [
              {
                name: panel_names.MY_PAGE_PANEL,
@@ -246,53 +213,89 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
          });

        break;
+      case 10700:
+        result = [
+          {
+            icons: SearchIcon,
+            spotlightId: "spotlight_search",
+            target: [{ name: panel_names.SEARCH_PANEL }],
+          },
+        ];
+        break;
+
+      case 10100:
+        result = [
+          {
+            icons: HomeIcon,
+            spotlightId: "spotlight_home",
+            target: [{ name: panel_names.HOME_PANEL }],
+          },
+        ];
+        break;
+
+      case 10400:
+        result = [
+          {
+            icons: OnSaleIcon,
+            spotlightId: "spotlight_onsale",
+            target: [{ name: panel_names.ON_SALE_PANEL }],
+          },
+        ];
+        break;
+
+      case 10150:
+        result = [
+          {
+            icons: TrendingNowIcon,
+            spotlightId: "spotlight_trendingnow",
+            target: [{ name: panel_names.TRENDING_NOW_PANEL }],
+          },
+        ];
+        break;
+
+      case 10200:
+        result = [
+          {
+            icons: HotPicksIcon,
+            spotlightId: "spotlight_hotpicks",
+            target: [{ name: panel_names.HOT_PICKS_PANEL }],
+          },
+        ];
+        break;
    }

    return result;
  };

  const dataDivide = useCallback(() => {
-    let keys = ["Category", "Featured Brands", "My Page"];
-
    if (data) {
-      let mainTitle = getMenuData("GNB");
+      for (let i = 0; i < menuItems.length; i++) {
+        const currentKey = menuItems[i].menuId;
+        const menuInfo = getMenuData(currentKey || "GNB");

-      mainTitle = mainTitle.sort((a, b) => {
-        const order = {
-          Category: 0,
-          "My Page": 1,
-          Search: 2,
-          Home: 3,
-          "Featured Brands": 4,
-          "On sale": 5,
-          "Trending Now": 6,
-          "Hot Picks": 7,
-        };
+        for (let j = 0; j < menuInfo.length; j++) {
+          if (![10600, 10500, 10300].includes(currentKey)) {
+            menuItems[i].target = menuInfo[j].target;
+          }
+          menuItems[i].spotlightId = menuInfo[j].spotlightId;
+          menuItems[i].icons = menuInfo[j].icons;

-        return order[a.title] - order[b.title];
-      });
-
-      for (let j = 0; j < keys.length; j++) {
-        const currentKey = keys[j];
-        const subData = getMenuData(currentKey);
-
-        if (subData && subData.length > 0) {
-          for (let i = 0; i < mainTitle.length; i++) {
-            menuItems[i].title = mainTitle[i].title;
-            if (mainTitle[i].title === currentKey) {
-              menuItems[i].children = subData.map((subItem) => ({
-                id: subItem.id,
-                title: subItem.title,
-                path: subItem.path,
-                target: subItem.target,
-                spotlightId: `secondDetph-${subItem.id}`,
-              }));
-            }
+          if (currentKey === 10600 || 10500 || 10300) {
+            menuItems[i].children = menuInfo.map((item) => ({
+              id: item.id,
+              title: item.title,
+              path: item.path,
+              target: item.target,
+              spotlightId: `secondDepth-${item.id}`,
+            }));
          }
        }
      }
    }
-  }, [data, menuItems, loginUserData]);
+    if (menuItems) {
+      setTabs(makeTabmenu());
+    }
+  }, [menuItems, loginUserData]);

  const makeTabmenu = useCallback(() => {
    const t = [];
@@ -301,22 +304,21 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
      const tabmenu = new TabMenuItem(
        menuItems[i].icons,
        menuItems[i].title,
-        menuItems[i].id,
        menuItems[i].spotlightId,
        menuItems[i].path,
        menuItems[i].target,
+        menuItems[i].id,
        menuItems[i].children
      );
      t.push(tabmenu);
    }

    return t;
-  }, [data]);
+  }, [menuItems]);

  useEffect(() => {
    dataDivide();
-    setTabs(makeTabmenu());
-  }, [data, loginUserData]);
+  }, [menuItems, loginUserData]);

  const deActivateTab = useCallback(() => {
    setTabFocused([false, false, false, false]);
@@ -475,10 +477,10 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
      tabs[mainSelectedIndex] &&
      tabs[mainSelectedIndex].hasChildren()
    ) {
-      return true;
+      return true; // 서브 탭이 있는 경우
    }
-    return false;
-  }, [tabActivated, mainSelectedIndex]);
+    return false; // 서브 탭이 없는 경우
+  }, [tabActivated, mainSelectedIndex, tabs]);

  const backKeyHandler = useCallback(
    (ev) => {
--- a/com.twin.app.shoptime/src/reducers/homeReducer.js
+++ b/com.twin.app.shoptime/src/reducers/homeReducer.js
@@ -1,4 +1,5 @@
-import { types } from "../actions/actionTypes";
+import { types } from '../actions/actionTypes';
+import { panel_names } from '../utils/Config';

 const initialState = {
  termsData: {},
@@ -25,11 +26,32 @@ export const homeReducer = (state = initialState, action) => {
        termsData: action.payload,
      };

-    case types.GET_HOME_MENU:
+    case types.GET_HOME_MENU: {
+      let menuItems = [];
+
+      const menuData = action.payload.data;
+      const info = menuData.gnb.map((item) => {
+        return {
+          menuNm: item.menuNm,
+          menuId: item.menuId,
+        };
+      });
+
+      for (let i = 0; i < info.length; i++) {
+        const title = info[i].menuNm;
+        const menuId = info[i].menuId;
+        menuItems.push({
+          title: title,
+          menuId: menuId,
+        });
+      }
+
      return {
        ...state,
        menuData: action.payload,
+        menuItems: menuItems,
      };
+    }

    case types.GET_HOME_LAYOUT:
      return {
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -19,8 +19,6 @@ import SpotlightContainerDecorator
  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';

-import playButton from '../../../assets/images/btn/btn-video-play-nor@3x.png';
-import subtitleVTT from '../../../assets/mock/video.vtt';
 import * as CommonActions from '../../actions/commonActions';
 import {
  getHomeFullVideoInfo,
@@ -56,7 +54,7 @@ import YouMayLikeContents from './PlayerTabContents/YouMayLikeContents';

 const SpottableBtn = Spottable("button");
 const Container = SpotlightContainerDecorator(
-  { enterTo: "default-element", preserveId: true },
+  { enterTo: "default-element" },
  "div"
 );

@@ -74,7 +72,6 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
  const [sideOpen, setSideOpen] = useState(true);
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [isHide, setIsHide] = useState(true);
-  const [subtitle, setSubtitle] = useState("");
  const panels = useSelector((state) => state.panels.panels);
  const chatData = useSelector((state) => state.play.chatData);
  const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);
@@ -93,7 +90,9 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
    $L(panelInfo?.shptmBanrTpNm === "LIVE" ? "LIVE CHANNEL" : "FEATURED SHOWS"),
  ];

-  console.log("#vodSubtitleData", vodSubtitleData);
+  // console.log("#shopNowInfo", shopNowInfo);
+  // console.log("#showDetailInfo", showDetailInfo);
+  // console.log("#playList", playListInfo);
  // 패널 정보 받기
  const getPanelInfo = useCallback(() => {
    if (panels) {
@@ -186,27 +185,6 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
      );
    }
  }, [dispatch, playListInfo]);
-  // 10초후 탭 닫기
-  useEffect(() => {
-    let timer = setTimeout(() => {
-      setSideOpen(false);
-    }, 10000);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [selectedIndex]);
-
-  // 3초후 아이콘 버튼 닫기
-  useEffect(() => {
-    let timer = setTimeout(() => {
-      setIsHide(false);
-    }, 3000);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [selectedIndex]);

  useEffect(() => {
    if (panelInfo?.shptmBanrTpNm === "VOD" && showDetailInfo) {
@@ -251,21 +229,6 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
    }
  }, []);

-  useEffect(() => {
-    if (showDetailInfo) {
-      const { showId, patnrId } = showDetailInfo[0];
-
-      dispatch(
-        updatePanel({
-          name: panel_names.PLAYER_PANEL,
-          panelInfo: {
-            showId,
-            patnrId,
-          },
-        })
-      );
-    }
-  }, []);
  useEffect(() => {
    if (!isActive) {
      unableToPlay.start(toastUnableToPlay);
@@ -274,6 +237,21 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
    }
  }, [isActive]);

+  useEffect(() => {
+    console.log("@@@@@사이드탭 버튼 포커스");
+  }, []);
+
+  useEffect(() => {
+    if (panelInfo && shopNowInfo) {
+      console.log("#paenlInfo", panelInfo);
+      Spotlight.focus("playVideoShopNowBox");
+      Spotlight.focus(`spotlightId-video-${panelInfo.index}`);
+      return;
+    }
+    console.log("#paenlInfo", panelInfo.index);
+    Spotlight.focus("hotpicks-close-arrow");
+  }, [panelInfo, shopNowInfo, playListInfo]);
+
  delete props.panelInfo;

  return (
@@ -330,7 +308,6 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
          onEnded={onClickBack} // 플레이어가 끝날때 호출
        />
      )}{" "}
-      */
      {/* 리액트 플레이어 테스트용 */}
      {typeof window === "object" && window.PalmSystem ? (
        ""
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/ShopNowContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/ShopNowContents.jsx
@@ -10,6 +10,9 @@ import {
  useSelector,
 } from 'react-redux';

+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+
 import {
  pushPanel,
  updatePanel,
@@ -21,6 +24,10 @@ import { panel_names } from '../../../utils/Config';
 import PlayerTabLoading from './PlayerTabLoading';
 import css from './ShopNowContents.module.less';

+const Container = SpotlightContainerDecorator(
+  { enterTo: "default-element", preserveId: true },
+  "div"
+);
 export default function ShopNowContents({ shopNowInfo }) {
  const dispatch = useDispatch();
  const [height, setHeight] = useState();
@@ -63,6 +70,7 @@ export default function ShopNowContents({ shopNowInfo }) {
          productName={prdtNm}
          onClick={handleItemClick}
          type={TYPES.horizontal}
+          spotlightId={`spotlightId-video-${index}`}
        />
      );
    },
@@ -70,7 +78,7 @@ export default function ShopNowContents({ shopNowInfo }) {
  );
  return (
    <>
-      <div className={css.container}>
+      <Container className={css.container}>
        {shopNowInfo && shopNowInfo.length > 0 ? (
          <TVirtualGridList
            style={gridStyle}
@@ -81,11 +89,12 @@ export default function ShopNowContents({ shopNowInfo }) {
            itemHeight={236}
            spacing={12}
            className={css.itemList}
+            spotlightId={"playVideoShopNowBox"}
          />
        ) : (
          <PlayerTabLoading />
        )}
-      </div>
+      </Container>
    </>
  );
 }