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) => (
}
-
+