diff --git a/com.twin.app.shoptime/src/components/TPanel/TPanel.jsx b/com.twin.app.shoptime/src/components/TPanel/TPanel.jsx index bb3e62a7..818d8c33 100644 --- a/com.twin.app.shoptime/src/components/TPanel/TPanel.jsx +++ b/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 ( {children} diff --git a/com.twin.app.shoptime/src/components/TPanel/TPanel.module.less b/com.twin.app.shoptime/src/components/TPanel/TPanel.module.less index 7d44b2ca..6512a930 100644 --- a/com.twin.app.shoptime/src/components/TPanel/TPanel.module.less +++ b/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; + } } diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx index c5e0576e..146b9764 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx +++ b/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; diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx index 78dc203f..b617ca37 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/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; } diff --git a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.jsx b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.jsx index 5bc5c878..66bc4731 100644 --- a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.jsx +++ b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.jsx @@ -66,7 +66,7 @@ export default function IntroPanel({ children, ...rest }) { return ( <> - +
{`Welcome to `} diff --git a/com.twin.app.shoptime/src/views/MainView/MainView.jsx b/com.twin.app.shoptime/src/views/MainView/MainView.jsx index c107bde8..480ee726 100644 --- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx +++ b/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 ; + return ( + + ); } 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 ( <> - {isOnTop ? - - : + {isOnTop ? ( + + ) : (
{renderTopPanel()}
- } - + )} + );