diff --git a/com.twin.app.shoptime/src/actions/actionTypes.js b/com.twin.app.shoptime/src/actions/actionTypes.js index 0d84af25..1799c169 100644 --- a/com.twin.app.shoptime/src/actions/actionTypes.js +++ b/com.twin.app.shoptime/src/actions/actionTypes.js @@ -63,6 +63,7 @@ export const types = { CHECK_ENTER_THROUGH_GNB: "CHECK_ENTER_THROUGH_GNB", SET_DEFAULT_FOCUS: "SET_DEFAULT_FOCUS", SET_BANNER_INDEX: "SET_BANNER_INDEX", + RESET_HOME_INFO: "RESET_HOME_INFO", UPDATE_HOME_INFO: "UPDATE_HOME_INFO", // brand actions diff --git a/com.twin.app.shoptime/src/actions/homeActions.js b/com.twin.app.shoptime/src/actions/homeActions.js index 67f68e47..aabc4634 100644 --- a/com.twin.app.shoptime/src/actions/homeActions.js +++ b/com.twin.app.shoptime/src/actions/homeActions.js @@ -256,6 +256,10 @@ export const clearThemeMenuShelfInfo = () => ({ type: types.CLEAR_THEME_MENU_SHELF_INFO, }); +export const resetHomeInfo = () => ({ + type: types.RESET_HOME_INFO, +}); + export const updateHomeInfo = (homeInfo) => { return { type: types.UPDATE_HOME_INFO, diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx index 89a73f47..4caa97f9 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -21,10 +21,7 @@ import shoptimeFullIconRuc from "../../../assets/images/icons/ic-lnb-logo-shopti //이미지 import shoptimeFullIcon from "../../../assets/images/icons/ic-lnb-logo-shoptime@3x.png"; import { gnbOpened } from "../../actions/commonActions"; -import { - checkEnterThroughGNB, - updateHomeInfo, -} from "../../actions/homeActions"; +import { checkEnterThroughGNB, resetHomeInfo } from "../../actions/homeActions"; import { resetPanels } from "../../actions/panelActions"; import usePrevious from "../../hooks/usePrevious"; import useScrollTo from "../../hooks/useScrollTo"; @@ -487,16 +484,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) { spotToPanel(); dispatch(resetPanels()); dispatch(checkEnterThroughGNB(true)); - dispatch( - updateHomeInfo({ - name: panel_names.HOME_PANEL, - panelInfo: { - currentSpot: null, - currentCatCd: null, - y: null, - }, - }) - ); + dispatch(resetHomeInfo()); return; } @@ -509,16 +497,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) { spotToPanel(); } - dispatch( - updateHomeInfo({ - name: panel_names.HOME_PANEL, - panelInfo: { - currentSpot: null, - currentCatCd: null, - y: null, - }, - }) - ); + dispatch(resetHomeInfo()); }, [deActivateTab, dispatch, panels] ); @@ -539,16 +518,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) { spotToPanel(); } - dispatch( - updateHomeInfo({ - name: panel_names.HOME_PANEL, - panelInfo: { - currentSpot: null, - currentCatCd: null, - y: null, - }, - }) - ); + dispatch(resetHomeInfo()); }, [dispatch, deActivateTab, selectedSubItemId] ); diff --git a/com.twin.app.shoptime/src/reducers/homeReducer.js b/com.twin.app.shoptime/src/reducers/homeReducer.js index 88e7e30f..fbcedcad 100644 --- a/com.twin.app.shoptime/src/reducers/homeReducer.js +++ b/com.twin.app.shoptime/src/reducers/homeReducer.js @@ -124,9 +124,23 @@ export const homeReducer = (state = initialState, action) => { case types.UPDATE_HOME_INFO: { return { ...state, - homeInfo: action.payload, + homeInfo: { + ...action.payload, + panelInfo: { + ...state.homeInfo?.panelInfo, + ...action.payload?.panelInfo, + }, + }, }; } + + case types.RESET_HOME_INFO: { + return { + ...state, + homeInfo: {}, + }; + } + case types.CLEAR_THEME_DETAIL: { return { ...state, diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx index 2a23c80a..4e0ac6ef 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx @@ -9,8 +9,10 @@ import React, { import classNames from "classnames"; import { useDispatch, useSelector } from "react-redux"; +import Spotlight from "@enact/spotlight"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import Spottable from "@enact/spotlight/Spottable"; +import { getContainerId } from "@enact/spotlight/src/container"; import btnPlay from "../../../../assets/images/btn/btn-play-thumb-nor.png"; import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png"; @@ -19,6 +21,7 @@ import emptyVerImage from "../../../../assets/images/img-home-banner-empty-ver.p import defaultImageItem from "../../../../assets/images/img-thumb-empty-product@3x.png"; import liveShow from "../../../../assets/images/tag-liveshow.png"; import { changeAppStatus } from "../../../actions/commonActions"; +import { updateHomeInfo } from "../../../actions/homeActions"; import { sendLogTopContents } from "../../../actions/logActions"; import { pushPanel } from "../../../actions/panelActions"; import { @@ -349,6 +352,17 @@ export default function RandomUnit({ // 비디오 클릭 const videoClick = useCallback(() => { + const lastFocusedTargetId = getContainerId(Spotlight.getCurrent()); + + if (lastFocusedTargetId) { + dispatch( + updateHomeInfo({ + name: panel_names.HOME_PANEL, + panelInfo: { lastFocusedTargetId }, + }) + ); + } + dispatch( startVideoPlayer({ showUrl: randomData.showUrl, diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx index 2e62cf05..95a9b29d 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx @@ -9,8 +9,10 @@ import React, { import classNames from "classnames"; import { useDispatch, useSelector } from "react-redux"; +import Spotlight from "@enact/spotlight"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import Spottable from "@enact/spotlight/Spottable"; +import { getContainerId } from "@enact/spotlight/src/container"; import btnPlay from "../../../../assets/images/btn/btn-play-thumb-nor.png"; import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png"; @@ -26,7 +28,6 @@ import CustomImage from "../../../components/CustomImage/CustomImage"; import usePriceInfo from "../../../hooks/usePriceInfo"; import { LOG_MENU, LOG_TP_NO, panel_names } from "../../../utils/Config"; import { $L, formatGMTString } from "../../../utils/helperMethods"; - import css from "./RollingUnit.module.less"; const SpottableComponent = Spottable("div"); @@ -386,6 +387,17 @@ export default function RollingUnit({ ]); const videoClick = useCallback(() => { + const lastFocusedTargetId = getContainerId(Spotlight.getCurrent()); + + if (lastFocusedTargetId) { + dispatch( + updateHomeInfo({ + name: panel_names.HOME_PANEL, + panelInfo: { lastFocusedTargetId }, + }) + ); + } + if (bannerId) { dispatch(setBannerIndex(bannerId, startIndex)); } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index ec4c1b18..f2f8dd91 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -60,7 +60,7 @@ const TEMPLATE_CODE_CONF = { BEST_SELLER: "DSP00105", }; -export default function HomePanel({ isOnTop }) { +const HomePanel = ({ isOnTop }) => { const dispatch = useDispatch(); useDebugKey({ isLandingPage: true }); @@ -491,6 +491,16 @@ export default function HomePanel({ isOnTop }) { } }, [dispatch]); + useEffect(() => { + if ( + isOnTop && + panelInfo?.focusedContainerId === TEMPLATE_CODE_CONF.TOP && + panelInfo?.lastFocusedTargetId + ) { + Spotlight.focus(panelInfo.lastFocusedTargetId); + } + }, [isOnTop]); + useEffect(() => { return () => { const c = Spotlight.getCurrent(); @@ -503,6 +513,8 @@ export default function HomePanel({ isOnTop }) { targetSpotlightCateNm = c.getAttribute("data-catcd-nm"); } + console.log("pyh ~ return ~ targetSpotlightId: ", targetSpotlightId); + const tBody = document.querySelector( `[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]` ); @@ -585,4 +597,6 @@ export default function HomePanel({ isOnTop }) { ); -} +}; + +export default HomePanel; diff --git a/com.twin.app.shoptime/src/views/MainView/MainView.jsx b/com.twin.app.shoptime/src/views/MainView/MainView.jsx index bb798108..a54e9f75 100644 --- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx +++ b/com.twin.app.shoptime/src/views/MainView/MainView.jsx @@ -4,30 +4,23 @@ import React, { useMemo, useRef, useState, -} from 'react'; +} from "react"; -import classNames from 'classnames'; -import { indexOf } from 'ilib/lib/JSUtils'; -import { - useDispatch, - useSelector, -} from 'react-redux'; +import classNames from "classnames"; +import { indexOf } from "ilib/lib/JSUtils"; +import { useDispatch, useSelector } from "react-redux"; -import platform from '@enact/core/platform'; -import Spotlight from '@enact/spotlight'; +import platform from "@enact/core/platform"; +import Spotlight from "@enact/spotlight"; -import defaultWatchItem - from '../../../assets/images/img-alert-banner-st@3x.png'; +import defaultWatchItem from "../../../assets/images/img-alert-banner-st@3x.png"; // 테스트용 - TODO: 메인 홈 화면에 나와야 하는 이미지들 추가 후 preloadImages에 추가 -import testImage from '../../../assets/images/img-banner-myinfo-login@3x.png'; -import defaultImageItem - from '../../../assets/images/img-thumb-empty-product@3x.png'; -import LoadingPreloadImage - from '../../../assets/images/intro/splash_02_stop.webp'; -import LoadingAnimation from '../../../assets/images/intro/splash_03_end.webp'; -import LoadingCompleteImage - from '../../../assets/images/intro/splash_04_end.webp'; -import LoadingShopOnTvImage from '../../../assets/images/intro/splash_end.jpg'; +import testImage from "../../../assets/images/img-banner-myinfo-login@3x.png"; +import defaultImageItem from "../../../assets/images/img-thumb-empty-product@3x.png"; +import LoadingPreloadImage from "../../../assets/images/intro/splash_02_stop.webp"; +import LoadingAnimation from "../../../assets/images/intro/splash_03_end.webp"; +import LoadingCompleteImage from "../../../assets/images/intro/splash_04_end.webp"; +import LoadingShopOnTvImage from "../../../assets/images/intro/splash_end.jpg"; import { alertToast, changeAppStatus, @@ -36,67 +29,58 @@ import { setExitApp, setHidePopup, setShowPopup, -} from '../../actions/commonActions'; -import { - getHomeMenu, - getHomeTerms, -} from '../../actions/homeActions'; +} from "../../actions/commonActions"; +import { getHomeMenu, getHomeTerms } from "../../actions/homeActions"; import { sendLogAlarmClick, sendLogAlarmPop, sendLogLive, sendLogVOD, -} from '../../actions/logActions'; +} from "../../actions/logActions"; import { getMyUpcomingAlertShow, setMyTermsWithdraw, -} from '../../actions/myPageActions'; -import { - popPanel, - pushPanel, - resetPanels, -} from '../../actions/panelActions'; -import EndOfServicePopUp - from '../../components/EndOfServicePopUp/EndOfServicePopUp'; -import Loader from '../../components/Loader/Loader'; -import { convertUtcToLocal } from '../../components/MediaPlayer/util'; -import PreloadImage from '../../components/PreloadImage/PreloadImage'; -import SystemNotification - from '../../components/SystemNotification/SystemNotification'; -import TabLayout from '../../components/TabLayout/TabLayout'; -import TButton from '../../components/TButton/TButton'; -import TPopUp from '../../components/TPopUp/TPopUp'; -import usePrevious from '../../hooks/usePrevious'; -import * as Config from '../../utils/Config'; -import { panel_names } from '../../utils/Config'; +} from "../../actions/myPageActions"; +import { popPanel, pushPanel, resetPanels } from "../../actions/panelActions"; +import EndOfServicePopUp from "../../components/EndOfServicePopUp/EndOfServicePopUp"; +import Loader from "../../components/Loader/Loader"; +import { convertUtcToLocal } from "../../components/MediaPlayer/util"; +import PreloadImage from "../../components/PreloadImage/PreloadImage"; +import SystemNotification from "../../components/SystemNotification/SystemNotification"; +import TabLayout from "../../components/TabLayout/TabLayout"; +import TButton from "../../components/TButton/TButton"; +import TPopUp from "../../components/TPopUp/TPopUp"; +import usePrevious from "../../hooks/usePrevious"; +import * as Config from "../../utils/Config"; +import { panel_names } from "../../utils/Config"; import { $L, getErrorMessage, getSpottableDescendants, -} from '../../utils/helperMethods'; -import { SpotlightIds } from '../../utils/SpotlightIds'; -import CartPanel from '../CartPanel/CartPanel'; -import CategoryPanel from '../CategoryPanel/CategoryPanel'; -import CheckOutPanel from '../CheckOutPanel/CheckOutPanel'; -import ConfirmPanel from '../ConfirmPanel/ConfirmPanel'; -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'; -import HotPicksPanel from '../HotPicksPanel/HotPicksPanel'; -import ImagePanel from '../ImagePanel/ImagePanel'; -import IntroPanel from '../IntroPanel/IntroPanel'; -import LoadingPanel from '../LoadingPanel/LoadingPanel'; -import MyPagePanel from '../MyPagePanel/MyPagePanel'; -import OnSalePanel from '../OnSalePanel/OnSalePanel'; -import PlayerPanel from '../PlayerPanel/PlayerPanel'; -import SearchPanel from '../SearchPanel/SearchPanel'; -import ThemeCurationPanel from '../ThemeCurationPanel/ThemeCurationPanel'; -import TrendingNowPanel from '../TrendingNowPanel/TrendingNowPanel'; -import VideoTestPanel from '../VideoTestPanel/VideoTestPanel'; -import WelcomeEventPanel from '../WelcomeEventPanel/WelcomeEventPanel'; -import css from './MainView.module.less'; +} from "../../utils/helperMethods"; +import { SpotlightIds } from "../../utils/SpotlightIds"; +import CartPanel from "../CartPanel/CartPanel"; +import CategoryPanel from "../CategoryPanel/CategoryPanel"; +import CheckOutPanel from "../CheckOutPanel/CheckOutPanel"; +import ConfirmPanel from "../ConfirmPanel/ConfirmPanel"; +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"; +import HotPicksPanel from "../HotPicksPanel/HotPicksPanel"; +import ImagePanel from "../ImagePanel/ImagePanel"; +import IntroPanel from "../IntroPanel/IntroPanel"; +import LoadingPanel from "../LoadingPanel/LoadingPanel"; +import MyPagePanel from "../MyPagePanel/MyPagePanel"; +import OnSalePanel from "../OnSalePanel/OnSalePanel"; +import PlayerPanel from "../PlayerPanel/PlayerPanel"; +import SearchPanel from "../SearchPanel/SearchPanel"; +import ThemeCurationPanel from "../ThemeCurationPanel/ThemeCurationPanel"; +import TrendingNowPanel from "../TrendingNowPanel/TrendingNowPanel"; +import VideoTestPanel from "../VideoTestPanel/VideoTestPanel"; +import WelcomeEventPanel from "../WelcomeEventPanel/WelcomeEventPanel"; +import css from "./MainView.module.less"; const preloadImages = [ LoadingPreloadImage, @@ -199,19 +183,26 @@ export default function MainView({ className }) { const renderTopPanel = useCallback(() => { if (panels && panels.length > 0) { - let renderringPanels = []; + let renderingPanels = []; if ( panels[panels.length - 1]?.name === Config.panel_names.PLAYER_PANEL || panels[panels.length - 2]?.name === Config.panel_names.PLAYER_PANEL ) { - renderringPanels = panels.slice(-2); + renderingPanels = panels.slice(-2); } else { - renderringPanels = panels.slice(-1); + renderingPanels = panels.slice(-1); } return ( <> - {isHomeOnTop && } - {renderringPanels.map((panel, index) => { + {(isHomeOnTop || + (panels.length === 1 && + panels[0]?.name === Config.panel_names.PLAYER_PANEL)) && ( + + )} + {renderingPanels.map((panel, index) => { const Component = panelMap[panel.name]; // render last two panels if there's videoplayer let isPanelOnTop = false; @@ -219,21 +210,21 @@ export default function MainView({ className }) { { /* if ( index === 0 && - renderringPanels.length === 2 && - renderringPanels[1].name === Config.panel_names.PLAYER_PANEL && - renderringPanels[1].panelInfo.modal + renderingPanels.length === 2 && + renderingPanels[1].name === Config.panel_names.PLAYER_PANEL && + renderingPanels[1].panelInfo.modal ) { */ } if ( index === 0 && - renderringPanels.length === 2 && - renderringPanels[1].name === Config.panel_names.PLAYER_PANEL && - renderringPanels[1].panelInfo.modal + renderingPanels.length === 2 && + renderingPanels[1].name === Config.panel_names.PLAYER_PANEL && + renderingPanels[1].panelInfo.modal ) { isPanelOnTop = true; } // normal case - if (index === renderringPanels.length - 1) { + if (index === renderingPanels.length - 1) { isPanelOnTop = true; } @@ -250,7 +241,9 @@ export default function MainView({ className }) { ); } else if (isHomeOnTop) { - return ; + return ( + + ); } return null;