From cdd6a774b6ed3d8e2789abd15cd0651c41996144 Mon Sep 17 00:00:00 2001 From: "hyunwoo93.cha" Date: Thu, 25 Jan 2024 21:24:04 +0900 Subject: [PATCH] =?UTF-8?q?merge=20from=20feature/gnb,=20TODO:=20tabLayout?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TabLayout/TabItem.jsx | 25 ++ .../components/TabLayout/TabItem.module.less | 2 +- .../src/components/TabLayout/TabLayout.jsx | 228 +++++++++++------- .../TabLayout/TabLayout.module.less | 28 ++- .../src/features/home/homeSlice.js | 1 + .../src/views/MainView/MainView.jsx | 32 ++- 6 files changed, 229 insertions(+), 87 deletions(-) diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx index 146b9764..b9c08dab 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx @@ -1,3 +1,4 @@ +import { Job } from "@enact/core/util"; import { Marquee, MarqueeController } from "@enact/sandstone/Marquee"; import Spottable from "@enact/spotlight/Spottable"; import { getTargetByDirectionFromElement } from "@enact/spotlight/src/target"; @@ -13,13 +14,36 @@ const TabItemBase = ({ expanded = false, selected = false, index = 0, + target, + panel, deActivateTab, className, + onClick, ...rest }) => { const [focused, setFocused] = useState(false); const itemRef = useRef(); + const clearPressedJob = useRef( + new Job((func) => { + // setPressed(false); + setTimeout(func, 100); + }, 100) + ); + const _onClick = useCallback( + (ev) => { + // if(ev?.target?.nodeName === 'IMG'){ + // return; + // } + clearPressedJob.current.start(() => { + if (onClick) { + onClick({ index, target }); + } + }); + onClick({ index, target }); + }, + [target, index, onClick] + ); const _onFocus = useCallback(() => { setFocused(true); }, [index]); @@ -64,6 +88,7 @@ const TabItemBase = ({ onKeyDown={onKeyDown} onFocus={_onFocus} onBlur={_onBlur} + onClick={_onClick} spotlightDisabled={isDivider} > {icons &&
{renderIcon()}
} diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less index 7808b987..7926577f 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less @@ -8,7 +8,7 @@ &.focused { - color: #ffffff; + color: #eee; background: linear-gradient(#cb1253, #e15ba1); border-radius: 42px; width: 402px; diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx index d5406cc4..09ff5b07 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -9,13 +9,16 @@ import React, { import classNames from "classnames"; import { useDispatch, useSelector } from "react-redux"; -//아이콘 -import { Job } from "@enact/core/util"; +import { panel_names } from "../../utils/Config"; +import TabItem from "./TabItem"; +import css from "./TabLayout.module.less"; //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 { Job } from "@enact/core/util"; //이미지 import shoptimeFullIcon from "../../../assets/icons/ic-lnb-logo-shoptime@3x.png"; @@ -29,9 +32,9 @@ 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"; + +//이미지 +import { resetPanels } from "../../features/panels/panelsSlice"; const Container = SpotlightContainerDecorator( { enterTo: "default-element" }, @@ -84,6 +87,9 @@ const ACTIVATED_MAIN = 1; const ACTIVATED_SUB = 2; const EXTRA_AREA = 3; +const MAIN_TITLE = 0; +const SUB_TITLE = 1; + const PANELS_HAS_TAB = [ panel_names.CART_PANEL, panel_names.CATEGORY_PANEL, @@ -104,91 +110,149 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB const panelSwitching = useRef(null); const { cursorVisible } = useSelector((state) => state.common.appStatus); - const titles = useSelector((state) => state.home.menuData); - - console.log("titles", titles); - // const items = useSelector((state) => state.menu.items); + const data = useSelector((state) => state.home.menuData?.data); const menuItems = useMemo( () => [ { - title: titles[1], icons: CategoryIcon, - children: [ - { - title: "123123", - target: [], - }, - ], - }, - { - title: titles[0], - icons: MyPageIcon, - children: [ - { - title: "123123", - target: [], - }, - ], - }, - { - title: titles[2], - icons: SearchIcon, - children: [ - { - title: "12323232", - target: [], - }, - ], - }, - { - title: titles[3], - icons: HomeIcon, - children: [ - { - title: "43534543", - target: [], - }, - ], - }, - { - title: titles[8], - icons: FeaturedBrandIcon, - children: [ - { - title: "dsadasd", - target: [], - }, - ], - }, - { - title: titles[4], - icons: OnSaleIcon, + title: "", children: [ { title: "", - target: [], + target: [{ name: panel_names.CATEGORY_PANEL }], + }, + ], + }, + { + icons: MyPageIcon, + title: "", + children: [ + { + title: "", + target: [{ name: panel_names.MY_PAGE_PANEL }], + }, + ], + }, + { + icons: SearchIcon, + title: "", + children: [ + { + title: "12323232", + target: [{ name: panel_names.SEARCH_PANEL }], + }, + ], + }, + { + icons: HomeIcon, + title: "", + children: [ + { + title: "43534543", + target: [{ name: panel_names.HOME_PANEL }], + }, + ], + }, + { + icons: FeaturedBrandIcon, + title: "", + children: [ + { + title: "dsadasd", + target: [{ name: panel_names.FEATURED_BRANDS_PANEL }], + }, + ], + }, + { + icons: OnSaleIcon, + title: "", + children: [ + { + title: "", + target: [{ name: panel_names.ON_SALE_PANEL }], }, ], }, { - title: titles[5], icons: TrendingNowIcon, + title: "", + children: [ + { + title: "", + target: [{ name: panel_names.TRENDING_NOW_PANEL }], + }, + ], }, { - title: titles[6], icons: HotPicksIcon, + title: "", + children: [ + { + title: "", + target: [{ name: panel_names.HOT_PICKS_PANEL }], + }, + ], }, { - title: titles[7], icons: CartIcon, + title: "", + children: [ + { + title: "", + target: [{ name: panel_names.CART_PANEL }], + }, + ], }, - // 메뉴 추가 필요 20240112 chw + //메뉴 추가 필요 20240112 chw ], - [mainExpanded] + [data] ); + const getMenuData = (type) => { + let result = []; + + switch (type) { + case "gnb": + data?.gnb.map((item) => { + result.push(item.menuNm); + }); + console.log("#result", result); + return result; + case "homeCategory": + return "123123"; + case "msgInfos": + return result; + case "mypage": + return result; + case "shortCategory": + return result; + case "shortFeaturedBrands": + return result; + } + }; + + const dataDivide = () => { + if (data) { + // console.log("data", data); + // Object.keys(data).map((key) => { + // title = getMenuData(key); + // return title; + // }); + + const title = getMenuData("gnb"); + // const subTitle = getMenuData(menu); + + for (let i = 0; i < menuItems.length; i++) { + menuItems[i].title = title[i]; + menuItems[i].children.title = title[i]; + } + } + console.log("#menuItems", menuItems); + return menuItems; + }; + const makeTabmenu = useCallback(() => { const t = []; @@ -203,11 +267,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) { } return t; - }, []); + }, [data]); useEffect(() => { + dataDivide(); setTabs(makeTabmenu()); - }, []); + }, [data]); const deActivateTab = useCallback(() => { setTabFocused([false, false, false, false]); @@ -220,7 +285,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) { switch (type) { case COLLABSED_MAIN: case ACTIVATED_MAIN: { - console.log("#tabs[mainSelectedIndex]", tabs[mainSelectedIndex]); if (!cursorVisible) { const parent = event.target.parentNode; const children = parent.childNodes; @@ -288,22 +352,23 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const handleNavigation = useCallback( ({ index, target }) => { - console.log(index, target); setMainSelectedIndex(index); if (target) { - // dispatch(resetPanels(target)); + dispatch(resetPanels(target)); deActivateTab(); + // panelSwitching.current = true; + // panelSwitchingJob.start(panelSwitching); } else if (cursorVisible) { setMainExpanded(true); } }, - [cursorVisible, deActivateTab, dispatch] + [deActivateTab, dispatch] ); const onClickSubItem = useCallback( ({ index, target }) => { if (target) { - // dispatch(resetPanels(target)); + dispatch(resetPanels(target)); deActivateTab(); panelSwitching.current = true; // panelSwitchingJob.start(panelSwitching); @@ -370,7 +435,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { } return ( - <> +
{/* collabsed Main */} - +

+ +

+ {tabActivated && tabs.map((item, index) => ( } - +
); } diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less index 8b66d12e..d311b7d9 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less @@ -1,3 +1,11 @@ +.tabLayoutWrap{ + width:100%; + height:100%; + position:absolute; + left:0; + top:0; + display:flex; +} .expandedRootContainer { position: absolute; display: flex; @@ -14,8 +22,11 @@ } .tabWrap { + width: 120px;height:100%; + //position:fixed; + left:0; + top:0; background-color: #222222; - width: 120px; display: flex; flex-direction: column; @@ -36,6 +47,7 @@ box-shadow: 8px 0 36px rgba(33, 33, 32, 0.08); padding-bottom: unset; justify-content: flex-start; + left:402px; } &.extraArea { flex-grow: 1; @@ -50,13 +62,21 @@ .logo { width: 54px; height: 54px; - - margin-left: 42px; - margin-bottom: 84px; + margin:0 0 84px 42px; + transition: width 0.5s ease; + overflow:hidden; &.expanded { width: 234px; height: 54px; + > img{ + width:234px; + height:54px; + } + } + > img{ + width:54px; + height:54px; } } \ No newline at end of file diff --git a/com.twin.app.shoptime/src/features/home/homeSlice.js b/com.twin.app.shoptime/src/features/home/homeSlice.js index 8d202ec4..28ff0717 100644 --- a/com.twin.app.shoptime/src/features/home/homeSlice.js +++ b/com.twin.app.shoptime/src/features/home/homeSlice.js @@ -73,6 +73,7 @@ export const homeSlice = createSlice({ state.termsData = action.payload; }, updateMenuData: (state, action) => { + //임시코드 state.menuData = action.payload; }, }, diff --git a/com.twin.app.shoptime/src/views/MainView/MainView.jsx b/com.twin.app.shoptime/src/views/MainView/MainView.jsx index 480ee726..744e6210 100644 --- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx +++ b/com.twin.app.shoptime/src/views/MainView/MainView.jsx @@ -1,4 +1,6 @@ import Panels from "@enact/sandstone/Panels"; +import platform from "@enact/core/platform"; + import React, { useCallback, useEffect, useMemo, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { addPanels, popPanel } from "../../features/panels/panelsSlice"; @@ -69,7 +71,7 @@ export default function MainView() { return ( @@ -110,6 +112,34 @@ export default function MainView() { } }, [showLoadingPanel.show, isTermAgreed, dispatch]); + const cursorStateChange = useCallback( + (ev) => { + dispatch( + changeAppStatus({ + cursorVisible: ev.visibility || ev.detail.visibility, + }) + ); + }, + [dispatch] + ); + + useEffect(() => { + document.addEventListener("cursorStateChange", cursorStateChange, false); + if (platform.platformName !== "webos") { + //for debug + dispatch(changeAppStatus({ cursorVisible: !platform.touchscreen })); + } else { + dispatch( + changeAppStatus({ + cursorVisible: window.cursorEvent && window.cursorEvent.visibility, + }) + ); + } + return () => { + document.removeEventListener("cursorStateChange", cursorStateChange); + }; + }, []); + return ( <>