탭 레이아웃 조건부 렌더링 / 마진값

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

@@ -16,7 +16,7 @@ const TPanel = ({
   className,
   children,
   handleCancel,
-  isTabActivated,
+  isTabActivated = true,
   ...rest
 }) => {
   const dispatch = useDispatch();
@@ -37,11 +37,17 @@ const TPanel = ({
     [dispatch, handleCancel, isTabActivated]
   );
 
+  console.log(isTabActivated);
+
   return (
     <CancelablePanel
       {...rest}
       handleCancel={onCancel}
-      className={classNames(css.tpanelmain, className)}
+      className={classNames(
+        css.tpanelmain,
+        isTabActivated && css.isTabActivated,
+        className
+      )}
     >
       {children}
     </CancelablePanel>

com.twin.app.shoptime/src/components/TPanel/TPanel.module.less

@@ -10,4 +10,9 @@
     padding: 0 !important;
     word-break: keep-all;
   }
+
+  &.isTabActivated {
+    width: calc(100% - 120px);
+    margin-left: 120px;
+  }
 }

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

@@ -78,4 +78,5 @@ const TabItemBase = ({
 };
 const ItemDecorator = compose(MarqueeController({ marqueeOnFocus: true }));
 const TabItem = ItemDecorator(TabItemBase);
+
 export default TabItem;

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

@@ -4,38 +4,34 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
+} from "react";
 
-import classNames from 'classnames';
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import classNames from "classnames";
+import { 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 Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import { Cancelable } from '@enact/ui/Cancelable';
+import Skinnable from "@enact/sandstone/Skinnable";
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import { Cancelable } from "@enact/ui/Cancelable";
 
 //이미지
-import shoptimeFullIcon
-  from '../../../assets/icons/ic-lnb-logo-shoptime@3x.png';
-import shopTimeIcon from '../../../assets/icons/ic-lnb-shoptime-symbol@3x.png';
-import CartIcon from './iconComponents/CartIcon';
-import CategoryIcon from './iconComponents/CategoryIcon';
-import FeaturedBrandIcon from './iconComponents/FeaturedBrandIcon';
-import HomeIcon from './iconComponents/HomeIcon';
-import HotPicksIcon from './iconComponents/HotPicksIcon';
-import MyPageIcon from './iconComponents/MyPageIcon';
-import OnSaleIcon from './iconComponents/OnSaleIcon';
-import SearchIcon from './iconComponents/SearchIcon';
-import TrendingNowIcon from './iconComponents/TrendingNowIcon';
-import TabItem from './TabItem';
-import css from './TabLayout.module.less';
+import shoptimeFullIcon from "../../../assets/icons/ic-lnb-logo-shoptime@3x.png";
+import shopTimeIcon from "../../../assets/icons/ic-lnb-shoptime-symbol@3x.png";
+import CartIcon from "./iconComponents/CartIcon";
+import CategoryIcon from "./iconComponents/CategoryIcon";
+import FeaturedBrandIcon from "./iconComponents/FeaturedBrandIcon";
+import HomeIcon from "./iconComponents/HomeIcon";
+import HotPicksIcon from "./iconComponents/HotPicksIcon";
+import MyPageIcon from "./iconComponents/MyPageIcon";
+import OnSaleIcon from "./iconComponents/OnSaleIcon";
+import SearchIcon from "./iconComponents/SearchIcon";
+import TrendingNowIcon from "./iconComponents/TrendingNowIcon";
+import TabItem from "./TabItem";
+import css from "./TabLayout.module.less";
+import { panel_names } from "../../utils/Config";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element" },
@@ -88,6 +84,18 @@ const ACTIVATED_MAIN = 1;
 const ACTIVATED_SUB = 2;
 const EXTRA_AREA = 3;
 
+const PANELS_HAS_TAB = [
+  panel_names.CART_PANEL,
+  panel_names.CATEGORY_PANEL,
+  panel_names.FEATURED_BRANDS_PANEL,
+  panel_names.HOME_PANEL,
+  panel_names.HOT_PICKS_PANEL,
+  panel_names.MY_PAGE_PANEL,
+  panel_names.ON_SALE_PANEL,
+  panel_names.SEARCH_PANEL,
+  panel_names.TRENDING_NOW_PANEL,
+];
+
 export default function TabLayout({ topPanelName, onTabActivated }) {
   const dispatch = useDispatch();
   const [mainExpanded, setMainExpanded] = useState(false);
@@ -313,11 +321,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   }, [mainExpanded, mainSelectedIndex]);
 
   const showTab = useMemo(() => {
-    if (!topPanelName) {
+    if (!topPanelName || PANELS_HAS_TAB.indexOf(topPanelName) >= 0) {
       return true;
     }
     return false;
   }, [topPanelName]);
+
   const showSubTab = useMemo(() => {
     if (
       tabActivated &&
@@ -353,6 +362,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   }, [tabActivated, showTab]);
 
   useEffect(() => {}, [showSubTab, mainSelectedIndex]);
+
   if (!showTab) {
     return null;
   }

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

@@ -66,7 +66,7 @@ export default function IntroPanel({ children, ...rest }) {
 
   return (
     <>
-      <TPanel className={css.panel}>
+      <TPanel className={css.panel} isTabActivated={false}>
         <Container {...rest} className={css.introLayout}>
           <div className={css.title}>
             {`Welcome to `}

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

@@ -67,12 +67,22 @@ export default function MainView() {
       const panel = panels[panels.length - 1];
       const Component = panelMap[panel.name];
 
-      return <Component {...panel.panelInfo} spotlightId={panel.name} />;
+      return (
+        <Component
+          {...panel.panelInfo}
+          spotlightId={panel.name}
+          isTabActivated={tabActivated}
+        />
+      );
     } else {
       return null;
     }
   }, [panels]);
 
+  const onTabActivated = useCallback((activated) => {
+    setTabActivated(activated);
+  }, []);
+
   const topPanelName = useMemo(() => {
     if (panels && panels.length > 0) {
       return panels[panels.length - 1].name;
@@ -92,7 +102,6 @@ export default function MainView() {
   useEffect(() => {
     if (!showLoadingPanel.show) {
       if (isTermAgreed) {
-
       } else {
         dispatch(
           addPanels({ name: Config.panel_names.INTRO_PANEL, panelInfo: {} })
@@ -101,19 +110,15 @@ export default function MainView() {
     }
   }, [showLoadingPanel.show, isTermAgreed, dispatch]);
 
-  const isIntroPanel =
-    panels.length === 0 ||
-    panels[panels.length - 1].name === Config.panel_names.INTRO_PANEL;
-
   return (
     <>
       <PreloadImage
         preloadImages={preloadImages}
         onLoadComplete={onPreImageLoadComplete}
       />
-      {isOnTop ?
+      {isOnTop ? (
         <HomePanel />
-        :
+      ) : (
         <div
           className={classNames(
             css.mainlayout,
@@ -122,8 +127,8 @@ export default function MainView() {
         >
           {renderTopPanel()}
         </div>
-      }
-        <TabLayout />
+      )}
+      <TabLayout topPanelName={topPanelName} onTabActivated={onTabActivated} />
       <LoadingPanel showLoadingPanel={showLoadingPanel} />
     </>
   );