gnb 마우스 모드일때 동작 수정 && 디테일패널 추가

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

@@ -23,7 +23,7 @@ const TabItemBase = ({
   isSubItem,
   onFocus,
   showSubTab = false,
-  mainSelectedIndex,
+  opened,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
@@ -73,7 +73,7 @@ const TabItemBase = ({
     const Component = icons;
     let iconType = "normal";
 
-    if (expanded && index === mainSelectedIndex) {
+    if (expanded && opened) {
       iconType = "focused";
     } else if (selected) {
       iconType = "selected";
@@ -86,15 +86,7 @@ const TabItemBase = ({
     }
 
     return <Component iconType={iconType} />;
-  }, [
+  }, [focused, expanded, mainSelected, opened, index, icons, selected]);
-    focused,
-    expanded,
-    mainSelected,
-    mainSelectedIndex,
-    index,
-    icons,
-    selected,
-  ]);
 
   delete rest.hasChildren;
   delete rest.getChildren;
@@ -102,11 +94,8 @@ const TabItemBase = ({
     <SpottableComponent
       className={classNames(
         css.tabItem,
-        (focused || index === mainSelectedIndex) && css.focused,
+        (focused || opened) && css.focused,
-        !isSubItem &&
+        !isSubItem && opened && showSubTab && css.arrow,
-          (focused || index === mainSelectedIndex) &&
-          showSubTab &&
-          css.arrow,
         mainSelected && css.selected,
         selected && css.selected
       )}
@@ -116,10 +105,7 @@ const TabItemBase = ({
       onClick={_onClick}
     >
       <div
-        className={classNames(
+        className={classNames(css.itemWrap, (focused || opened) && css.focused)}
-          css.itemWrap,
-          (focused || index === mainSelectedIndex) && css.focused
-        )}
       >
         {icons && <div className={css.icon}>{renderIcon()}</div>}
         {expanded && title && (

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

@@ -4,41 +4,36 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
+} from "react";
 
-import classNames from 'classnames';
+import classNames from "classnames";
-import {
+import { useDispatch, useSelector } from "react-redux";
-  useDispatch,
-  useSelector,
-} from 'react-redux';
 
 //아이콘
-import { Job } from '@enact/core/util';
+import { Job } from "@enact/core/util";
 //enact
-import Skinnable from '@enact/sandstone/Skinnable';
+import Skinnable from "@enact/sandstone/Skinnable";
-import Spotlight from '@enact/spotlight';
+import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import { Cancelable } from "@enact/ui/Cancelable";
-import { Cancelable } from '@enact/ui/Cancelable';
 
 //이미지
-import shoptimeFullIcon
+import shoptimeFullIcon from "../../../assets/icons/ic-lnb-logo-shoptime@3x.png";
-  from '../../../assets/icons/ic-lnb-logo-shoptime@3x.png';
+import shopTimeIcon from "../../../assets/icons/ic-lnb-shoptime-symbol@3x.png";
-import shopTimeIcon from '../../../assets/icons/ic-lnb-shoptime-symbol@3x.png';
+import { resetPanels } from "../../actions/panelActions";
-import { resetPanels } from '../../actions/panelActions';
+import { panel_names } from "../../utils/Config";
-import { panel_names } from '../../utils/Config';
+import CartIcon from "./iconComponents/CartIcon";
-import CartIcon from './iconComponents/CartIcon';
+import CategoryIcon from "./iconComponents/CategoryIcon";
-import CategoryIcon from './iconComponents/CategoryIcon';
+import FeaturedBrandIcon from "./iconComponents/FeaturedBrandIcon";
-import FeaturedBrandIcon from './iconComponents/FeaturedBrandIcon';
+import HomeIcon from "./iconComponents/HomeIcon";
-import HomeIcon from './iconComponents/HomeIcon';
+import HotPicksIcon from "./iconComponents/HotPicksIcon";
-import HotPicksIcon from './iconComponents/HotPicksIcon';
+import MyPageIcon from "./iconComponents/MyPageIcon";
-import MyPageIcon from './iconComponents/MyPageIcon';
+import OnSaleIcon from "./iconComponents/OnSaleIcon";
-import OnSaleIcon from './iconComponents/OnSaleIcon';
+import SearchIcon from "./iconComponents/SearchIcon";
-import SearchIcon from './iconComponents/SearchIcon';
+import TrendingNowIcon from "./iconComponents/TrendingNowIcon";
-import TrendingNowIcon from './iconComponents/TrendingNowIcon';
+import TabItem from "./TabItem";
-import TabItem from './TabItem';
+import TabItemSub from "./TabItemSub";
-import TabItemSub from './TabItemSub';
+import css from "./TabLayout.module.less";
-import css from './TabLayout.module.less';
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element" },
@@ -172,7 +167,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
 
     switch (type) {
       case "Category":
-        result = data?.homeCategory && data.homeCategory.map((item) => ({
+        result =
+          data?.homeCategory &&
+          data.homeCategory.map((item) => ({
             id: item.lgCatCd,
             title: item.lgCatNm,
             target: [
@@ -188,13 +185,17 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
           }));
         break;
       case "GNB":
-        result = data?.gnb && data.gnb.map((item) => ({
+        result =
+          data?.gnb &&
+          data.gnb.map((item) => ({
             title: item.menuNm,
           }));
         break;
 
       case "Featured Brands":
-        result = data?.shortFeaturedBrands && data.shortFeaturedBrands.map((item) => ({
+        result =
+          data?.shortFeaturedBrands &&
+          data.shortFeaturedBrands.map((item) => ({
             Id: item.patnrId,
             path: item.patncLogoPath,
             target: [
@@ -206,7 +207,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
           }));
         break;
       case "My Page":
-        result = data?.mypage && data.mypage.map((item) => ({
+        result =
+          data?.mypage &&
+          data.mypage.map((item) => ({
             title: item.menuNm,
             target: [
               {
@@ -363,7 +366,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   );
 
   const onFocus = (index) => {
-    setMainSelectedIndex(index);
+    // setMainSelectedIndex(index);
 
     if (showSubTab) {
       setSecondDepthReduce((prev) => !prev);
@@ -372,6 +375,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
 
   const handleNavigation = useCallback(
     ({ index, target }) => {
+      setMainSelectedIndex(index);
       if (target && !showSubTab) {
         dispatch(resetPanels(target));
         deActivateTab();
@@ -537,7 +541,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                   }
                   title={item.title}
                   index={index}
-                  mainSelectedIndex={mainSelectedIndex}
+                  opened={mainSelectedIndex === index}
                 />
               ))}
           </MainContainer>

com.twin.app.shoptime/src/reducers/mainReducer.js

@@ -19,11 +19,17 @@ export const mainReducer = (state = initialState, action) => {
         ...state,
         top20ShowData: action.payload,
       };
-    case types.GET_PRODUCT_DETAIL:
+    case types.GET_PRODUCT_DETAIL: {
+      const data = action.payload.product[0];
+      const images = action.payload.product[0].imgUrls;
+
+      console.log("images", images);
       return {
         ...state,
-        productData: action.payload.product[0],
+        productData: data,
+        productImages: images,
       };
+    }
 
     default:
       return state;

com.twin.app.shoptime/src/reducers/panelReducer.js

@@ -2,7 +2,7 @@ import { types } from "../actions/actionTypes";
 import { panel_names } from "../utils/Config";
 
 const initialState = {
-  panels: [],
+  panels: [{ name: panel_names.DETAIL_PANEL }],
   isModalOpen: false,
 };
 

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

@@ -6,7 +6,7 @@ import { getMainCategoryDetail } from "../../actions/mainActions";
 import TBody from "../../components/TBody/TBody";
 import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
-import css from "./ItemDetail.module.less";
+import css from "./DetailPanel.module.less";
 import ItemImage from "./layout/ItemImage";
 import OptionList from "./layout/OptionList";
 
@@ -29,7 +29,6 @@ export default function ItemDetail() {
 
   useEffect(() => {
     setProductData(data);
-    // console.log("#groupInfo", productData);
   }, [data, productData]);
   return (
     <TPanel isTabActivated={false}>

com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from "react";
 
+import { useSelector } from "react-redux";
+
 import Image from "@enact/sandstone/Image";
 import Spottable from "@enact/spotlight/Spottable";
 
@@ -7,10 +9,12 @@ import css from "./Indicator.module.less";
 
 const SpottableComponent = Spottable("button");
 
-export default function Indicator({ images }) {
+export default function Indicator() {
   const [selectedImage, setSelectedImage] = useState(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
+  const images = useSelector((state) => state.main.productImages);
+
   useEffect(() => {
     if (images && images.length > 0) {
       setSelectedImage(images[0]);

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

@@ -16,6 +16,7 @@ import * as Config from "../../utils/Config";
 import CartPanel from "../CartPanel/CartPanel";
 import CategoryPanel from "../CategoryPanel/CategoryPanel";
 import DebugPanel from "../DebugPanel/DebugPanel";
+import DetailPanel from "../DetailPanel/DetailPanel";
 import ErrorPanel from "../ErrorPanel/ErrorPanel";
 import FeaturedBrandsPanel from "../FeaturedBrandsPanel/FeaturedBrandsPanel";
 import HomePanel from "../HomePanel/HomePanel";
@@ -43,6 +44,7 @@ const panelMap = {
   [Config.panel_names.CART_PANEL]: CartPanel,
   [Config.panel_names.ERROR_PANEL]: ErrorPanel,
   [Config.panel_names.DEBUG_PANEL]: DebugPanel,
+  [Config.panel_names.DETAIL_PANEL]: DetailPanel,
 };
 
 export default function MainView() {
@@ -59,7 +61,7 @@ export default function MainView() {
   }, [mainIndex, panels.length]);
 
   const onPreImageLoadComplete = useCallback(() => {
-    console.log('MainView onPreImageLoadComplete');
+    console.log("MainView onPreImageLoadComplete");
     // dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   }, [dispatch]);