[searchpanel] 스팟이동 관련 처리건 및 검색결과 핫픽스 링크 연결

- 검색결과에서 상세갔다가 돌아왔을때 스팟저장및 이동 처리건.
 - 검색결과에서의 핫픽스 노출링크 연결.

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}
                   />
                 ) : (
                   <NoSearchResults />

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 (
         <SpottableDiv
           key={`searchProduct-${index}`}
           className={css.productCard}
           spotlightId={`searchProduct-${index}`}
+          onClick={onClick}
           {...rest}
         >
           <div className={css.productImageWrapper}>
@@ -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 (
     <div className={css.searchBox}>
@@ -300,10 +320,18 @@ const SearchResultsNew = ({
           )}
         </div>
         {tab === 0 && (
-          <ItemCard itemInfo={displayedData} panelInfo={panelInfo} />
+          <ItemCard
+            itemInfo={displayedData}
+            panelInfo={panelInfo}
+            searchQuery={searchQuery}
+          />
         )}
         {tab === 1 && (
-          <ShowCard showInfo={displayedData} panelInfo={panelInfo} />
+          <ShowCard
+            showInfo={displayedData}
+            panelInfo={panelInfo}
+            searchQuery={searchQuery}
+          />
         )}
       </div>
       <div className={css.buttonContainer}>

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,

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({