diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx index 75fcaf80..8902f683 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx @@ -399,7 +399,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { spotlightResumeTimerRef.current = setTimeout(() => { Spotlight.resume(); setFirstSpot(true); - if (panelInfo.currentSpot) { + if (panelInfo?.currentSpot) { if (panels[panels.length - 1]?.name === "searchpanel") { Spotlight.focus(panelInfo.currentSpot); } @@ -730,13 +730,14 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { useEffect(() => { return () => { const currentSearchVal = searchQueryRef.current; - const currentFocusedId = focusedContainerIdRef.current; + const currentSpot = + Spotlight.getCurrent()?.getAttribute("data-spotlight-id") || null; dispatch( updatePanel({ name: panel_names.SEARCH_PANEL, panelInfo: { searchVal: currentSearchVal, - focusedContainerId: currentFocusedId, + currentSpot, }, }) ); @@ -875,6 +876,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { shopperHouseInfo={shopperHouseData} keywordClick={handleKeywordClick} panelInfo={panelInfo} + searchQuery={searchQuery} /> ) : ( diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx index 1b0a8ae3..84122ff2 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx @@ -7,17 +7,20 @@ import React, { } from 'react'; import classNames from 'classnames'; +import { useDispatch } from 'react-redux'; import Spotlight from '@enact/spotlight'; import Spottable from '@enact/spotlight/Spottable'; import downBtnImg from '../../../assets/images/btn/search_btn_down_arrow.png'; import upBtnImg from '../../../assets/images/btn/search_btn_up_arrow.png'; +import { pushPanel } from '../../actions/panelActions'; import CustomImage from '../../components/CustomImage/CustomImage'; import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab'; import TDropDown from '../../components/TDropDown/TDropDown'; import TVirtualGridList from '../../components/TVirtualGridList/TVirtualGridList'; +import { panel_names } from '../../utils/Config'; import { $L } from '../../utils/helperMethods'; import { SpotlightIds } from '../../utils/SpotlightIds'; import css from './SearchResults.new.module.less'; @@ -33,6 +36,7 @@ const SearchResultsNew = ({ themeInfo, shopperHouseInfo, keywordClick, + searchQuery, }) => { // ShopperHouse 데이터를 ItemCard 형식으로 변환 const convertedShopperHouseItems = useMemo(() => { @@ -88,12 +92,14 @@ const SearchResultsNew = ({ let buttonTabList = null; //탭 - const [tab, setTab] = useState(0); + const [tab, setTab] = useState(panelInfo?.tab ? panelInfo?.tab : 0); //드롭다운 const [dropDownTab, setDropDownTab] = useState(0); //표시할 아이템 개수 const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE); + const dispatch = useDispatch(); + const [styleChange, setStyleChange] = useState(false); const filterMethods = []; const cbChangePageRef = useRef(null); @@ -172,13 +178,26 @@ const SearchResultsNew = ({ // ProductCard 컴포넌트 const renderItem = useCallback( ({ index, ...rest }) => { - const { bgImgPath, title, partnerLogo, partnerName, keyword } = + const { bgImgPath, title, partnerLogo, partnerName, keyword, contentId } = themeInfo[index]; + const tokens = contentId.split("_"); + const onClick = () => { + dispatch( + pushPanel({ + name: panel_names.HOT_PICKS_PANEL, + panelInfo: { + curationId: tokens[5], + patnrId: tokens[4], + }, + }) + ); + }; return (
@@ -217,8 +236,9 @@ const SearchResultsNew = ({ }, [shopperHouseInfo]); useEffect(() => { - const targetId = - themeInfo?.length > 0 + const targetId = panelInfo?.currentSpot + ? panelInfo?.currentSpot + : themeInfo?.length > 0 ? "searchProduct-0" : itemInfo?.length > 0 ? "searchItemContents0" @@ -230,7 +250,7 @@ const SearchResultsNew = ({ const spotTimeout = setTimeout(() => Spotlight.focus(targetId), 100); return () => clearTimeout(spotTimeout); - }, [themeInfo?.length, itemInfo?.length, showInfo?.length]); + }, [themeInfo?.length, itemInfo?.length, showInfo?.length, shopperHouseInfo]); return (
@@ -300,10 +320,18 @@ const SearchResultsNew = ({ )}
{tab === 0 && ( - + )} {tab === 1 && ( - + )}
diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx index e4b02768..925f3952 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx @@ -17,14 +17,25 @@ import { panel_names } from '../../../utils/Config'; import { SpotlightIds } from '../../../utils/SpotlightIds'; import css from './ItemCard.module.less'; -const ItemCard = ({ panelInfo, onClick, itemInfo }) => { +const ItemCard = ({ panelInfo, onClick, itemInfo, searchQuery }) => { const dispatch = useDispatch(); - const focusedContainerIdRef = useRef(panelInfo?.focusedContainerId); const _handleItemClick = useCallback( (patnrId, prdtId) => (ev) => { + const currentSpot = + Spotlight.getCurrent()?.getAttribute("data-spotlight-id") || null; if (onClick) { onClick(ev); } + dispatch( + updatePanel({ + name: panel_names.SEARCH_PANEL, + panelInfo: { + searchVal: searchQuery, + currentSpot, + tab: 0, + }, + }) + ); dispatch( pushPanel({ name: panel_names.DETAIL_PANEL, diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx index 0d701b5d..8c4c5e48 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx @@ -2,10 +2,14 @@ import React, { useCallback } from 'react'; import { useDispatch } from 'react-redux'; +import Spotlight from '@enact/spotlight'; import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; -import { pushPanel } from '../../../actions/panelActions'; +import { + pushPanel, + updatePanel, +} from '../../../actions/panelActions'; import TItemCardNew, { TYPES, } from '../../../components/TItemCard/TItemCard.new'; @@ -14,7 +18,7 @@ import { SpotlightIds } from '../../../utils/SpotlightIds'; import css from './ShowCard.module.less'; const Container = SpotlightContainerDecorator({ enterTo: null }, "div"); -const ShowCard = ({ panelInfo, onClick, showInfo }) => { +const ShowCard = ({ panelInfo, onClick, showInfo, searchQuery }) => { const dispatch = useDispatch(); const handleClick = useCallback( @@ -24,10 +28,22 @@ const ShowCard = ({ panelInfo, onClick, showInfo }) => { const linkTpCd = tokens[1] || ""; const patnrId = tokens[4] || ""; const showId = tokens[5] || ""; + const currentSpot = + Spotlight.getCurrent()?.getAttribute("data-spotlight-id") || null; if (onClick) { onClick(); } + dispatch( + updatePanel({ + name: panel_names.SEARCH_PANEL, + panelInfo: { + searchVal: searchQuery, + currentSpot, + tab: 1, + }, + }) + ); dispatch( pushPanel({