optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
고동영
2024-02-15 17:24:19 +09:00
parent 0bb117edfd
commit 49d8ef8fa6
8 changed files with 94 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
View File

@@ -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,
mainSelectedIndex,
index,
icons,
selected,
]);
}, [focused, expanded, mainSelected, opened, 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,
!isSubItem &&
(focused || index === mainSelectedIndex) &&
showSubTab &&
css.arrow,
(focused || opened) && css.focused,
!isSubItem && opened && showSubTab && css.arrow,
mainSelected && css.selected,
selected && css.selected
)}
@@ -116,10 +105,7 @@ const TabItemBase = ({
onClick={_onClick}
>
<div
className={classNames(
css.itemWrap,
(focused || index === mainSelectedIndex) && css.focused
)}
className={classNames(css.itemWrap, (focused || opened) && css.focused)}
>
{icons && <div className={css.icon}>{renderIcon()}</div>}
{expanded && title && (

136
com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
View File

@@ -4,41 +4,36 @@ 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 { resetPanels } from '../../actions/panelActions';
import { panel_names } from '../../utils/Config';
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 TabItemSub from './TabItemSub';
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 { resetPanels } from "../../actions/panelActions";
import { panel_names } from "../../utils/Config";
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 TabItemSub from "./TabItemSub";
import css from "./TabLayout.module.less";
const Container = SpotlightContainerDecorator(
{ enterTo: "default-element" },
@@ -172,49 +167,57 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
switch (type) {
case "Category":
result = data?.homeCategory && data.homeCategory.map((item) => ({
id: item.lgCatCd,
title: item.lgCatNm,
target: [
{
name: panel_names.CATEGORY_PANEL,
panelInfo: {
lgCatNm: item.lgCatNm,
lgCatCd: item.lgCatCd,
COUNT: item.COUNT,
result =
data?.homeCategory &&
data.homeCategory.map((item) => ({
id: item.lgCatCd,
title: item.lgCatNm,
target: [
{
name: panel_names.CATEGORY_PANEL,
panelInfo: {
lgCatNm: item.lgCatNm,
lgCatCd: item.lgCatCd,
COUNT: item.COUNT,
},
},
},
],
}));
],
}));
break;
case "GNB":
result = data?.gnb && data.gnb.map((item) => ({
title: item.menuNm,
}));
result =
data?.gnb &&
data.gnb.map((item) => ({
title: item.menuNm,
}));
break;
case "Featured Brands":
result = data?.shortFeaturedBrands && data.shortFeaturedBrands.map((item) => ({
Id: item.patnrId,
path: item.patncLogoPath,
target: [
{
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: item.patnrId,
},
],
}));
result =
data?.shortFeaturedBrands &&
data.shortFeaturedBrands.map((item) => ({
Id: item.patnrId,
path: item.patncLogoPath,
target: [
{
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: item.patnrId,
},
],
}));
break;
case "My Page":
result = data?.mypage && data.mypage.map((item) => ({
title: item.menuNm,
target: [
{
name: panel_names.MY_PAGE_PANEL,
panelInfo: item.menuOrd,
},
],
}));
result =
data?.mypage &&
data.mypage.map((item) => ({
title: item.menuNm,
target: [
{
name: panel_names.MY_PAGE_PANEL,
panelInfo: item.menuOrd,
},
],
}));
break;
}
//console.log("#data", data);
@@ -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>

10
com.twin.app.shoptime/src/reducers/mainReducer.js
View File

@@ -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;

2
com.twin.app.shoptime/src/reducers/panelReducer.js
View File

@@ -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,
};

3
com.twin.app.shoptime/src/views/DetailPanel/ItemDetail.jsx → com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -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}>

0
com.twin.app.shoptime/src/views/DetailPanel/ItemDetail.module.less → com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.module.less
View File

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

@@ -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]);

4
com.twin.app.shoptime/src/views/MainView/MainView.jsx
View File

@@ -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]);