{icons &&
{renderIcon()}
}
{expanded && title && (
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
index 3dd7855d..64f6e23e 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -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}
/>
))}
diff --git a/com.twin.app.shoptime/src/reducers/mainReducer.js b/com.twin.app.shoptime/src/reducers/mainReducer.js
index f839e228..7eb8e74e 100644
--- a/com.twin.app.shoptime/src/reducers/mainReducer.js
+++ b/com.twin.app.shoptime/src/reducers/mainReducer.js
@@ -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;
diff --git a/com.twin.app.shoptime/src/reducers/panelReducer.js b/com.twin.app.shoptime/src/reducers/panelReducer.js
index eb23f66b..4d1f7035 100644
--- a/com.twin.app.shoptime/src/reducers/panelReducer.js
+++ b/com.twin.app.shoptime/src/reducers/panelReducer.js
@@ -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,
};
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ItemDetail.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
similarity index 93%
rename from com.twin.app.shoptime/src/views/DetailPanel/ItemDetail.jsx
rename to com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
index af83aa2f..25402e74 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ItemDetail.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -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 (
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ItemDetail.module.less b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.module.less
similarity index 100%
rename from com.twin.app.shoptime/src/views/DetailPanel/ItemDetail.module.less
rename to com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.module.less
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx
index 9aba30c4..5914e413 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx
@@ -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]);
diff --git a/com.twin.app.shoptime/src/views/MainView/MainView.jsx b/com.twin.app.shoptime/src/views/MainView/MainView.jsx
index a21f6d94..1d5df7ee 100644
--- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx
+++ b/com.twin.app.shoptime/src/views/MainView/MainView.jsx
@@ -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]);