[서치] 검색 결과 핫픽스 링크 연결

- 연결 부분 제거되어있어 추가 .

com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.jsx

@@ -1,17 +1,28 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import classNames from 'classnames';
+import { useDispatch } from 'react-redux';
 
 import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 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 TVirtualGridList
+  from '../../components/TVirtualGridList/TVirtualGridList';
+import { panel_names } from '../../utils/Config';
 import { $L } from '../../utils/helperMethods';
 import { SpotlightIds } from '../../utils/SpotlightIds';
 import HowAboutThese from './HowAboutThese/HowAboutThese';
@@ -63,7 +74,9 @@ const SafeImage = ({ src, alt, className, ...props }) => {
     };
   }, []);
 
-  return <img ref={imgRef} src={src} alt={alt} className={className} {...props} />;
+  return (
+    <img ref={imgRef} src={src} alt={alt} className={className} {...props} />
+  );
 };
 
 const SearchResultsNew = ({
@@ -78,9 +91,14 @@ const SearchResultsNew = ({
   cbChangePageRef,
   onSearchInputFocus = false,
 }) => {
+  const dispatch = useDispatch();
   // ShopperHouse 데이터를 ItemCard 형식으로 변환
   const convertedShopperHouseItems = useMemo(() => {
-    if (!shopperHouseInfo || !shopperHouseInfo.results || shopperHouseInfo.results.length === 0) {
+    if (
+      !shopperHouseInfo ||
+      !shopperHouseInfo.results ||
+      shopperHouseInfo.results.length === 0
+    ) {
       return null;
     }
 
@@ -116,7 +134,8 @@ const SearchResultsNew = ({
 
   const getButtonTabList = () => {
     // ShopperHouse 데이터가 있으면 그것을 사용, 없으면 기존 검색 결과 사용
-    const itemLength = convertedShopperHouseItems?.length || itemInfo?.length || 0;
+    const itemLength =
+      convertedShopperHouseItems?.length || itemInfo?.length || 0;
     const showLength = showInfo?.length || 0;
 
     return [
@@ -126,7 +145,7 @@ const SearchResultsNew = ({
   };
 
   //탭
-  const [tab, setTab] = useState(0);
+  const [tab, setTab] = useState(panelInfo?.tab ? panelInfo?.tab : 0);
   //드롭다운
   const [dropDownTab, setDropDownTab] = useState(0);
   //표시할 아이템 개수
@@ -140,7 +159,9 @@ const SearchResultsNew = ({
   const [pendingFocusIndex, setPendingFocusIndex] = useState(null);
 
   // HowAboutThese 모드 상태 관리
-  const [howAboutTheseMode, setHowAboutTheseMode] = useState(HOW_ABOUT_THESE_MODES.SMALL);
+  const [howAboutTheseMode, setHowAboutTheseMode] = useState(
+    HOW_ABOUT_THESE_MODES.SMALL
+  );
 
   // HowAboutThese 모드 전환 핸들러
   const handleShowFullHowAboutThese = useCallback(() => {
@@ -154,8 +175,13 @@ const SearchResultsNew = ({
 
   // 🎯 HowAboutThese 포커스 관리 - 검색 입력 영역 포커스 감지 시 SMALL 모드로 전환
   useEffect(() => {
-    if (onSearchInputFocus && howAboutTheseMode === HOW_ABOUT_THESE_MODES.FULL) {
-      console.log('[SearchResultsNew] 검색 입력 영역 포커스 감지 - HowAboutThese를 SMALL 모드로 전환');
+    if (
+      onSearchInputFocus &&
+      howAboutTheseMode === HOW_ABOUT_THESE_MODES.FULL
+    ) {
+      console.log(
+        '[SearchResultsNew] 검색 입력 영역 포커스 감지 - HowAboutThese를 SMALL 모드로 전환'
+      );
       setHowAboutTheseMode(HOW_ABOUT_THESE_MODES.SMALL);
     }
   }, [onSearchInputFocus, howAboutTheseMode]);
@@ -165,7 +191,8 @@ const SearchResultsNew = ({
 
   // 현재 탭의 데이터 가져오기 - ShopperHouse 데이터 우선
   const hasShopperHouseItems = convertedShopperHouseItems?.length > 0;
-  const currentData = tab === 0 ? convertedShopperHouseItems || itemInfo : showInfo;
+  const currentData =
+    tab === 0 ? convertedShopperHouseItems || itemInfo : showInfo;
 
   // 표시할 데이터 (처음부터 visibleCount 개수만큼)
   const displayedData = useMemo(() => {
@@ -299,7 +326,9 @@ const SearchResultsNew = ({
     const spotlightId = `searchItemContents${pendingFocusIndex}`;
 
     const focusTimer = setTimeout(() => {
-      const targetElement = document.querySelector(`[data-spotlight-id="${spotlightId}"]`);
+      const targetElement = document.querySelector(
+        `[data-spotlight-id="${spotlightId}"]`
+      );
 
       if (effectiveChangePageRef && effectiveChangePageRef.current) {
         effectiveChangePageRef.current(spotlightId, true, true);
@@ -322,21 +351,43 @@ const SearchResultsNew = ({
       if (!themeInfo || !themeInfo[index]) {
         return null;
       }
+      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],
+            },
+          })
+        );
+      };
 
-      const { bgImgPath, title, partnerLogo, partnerName, keyword } = themeInfo[index];
       return (
         <SpottableDiv
           key={`searchProduct-${index}`}
           className={css.productCard}
           spotlightId={`searchProduct-${index}`}
+          onClick={onClick}
           {...rest}
         >
           <div className={css.productImageWrapper}>
-            <SafeImage src={bgImgPath} alt={title} className={css.productImage} />
+            <SafeImage
+              src={bgImgPath}
+              alt={title}
+              className={css.productImage}
+            />
           </div>
           <div className={css.productInfo}>
             <div className={css.productBrandWrapper}>
-              <SafeImage src={partnerLogo} alt={partnerName} className={css.brandLogo} />
+              <SafeImage
+                src={partnerLogo}
+                alt={partnerName}
+                className={css.brandLogo}
+              />
             </div>
             <div className={css.productDetails}>
               {keyword && (
@@ -409,7 +460,9 @@ const SearchResultsNew = ({
         <div className={css.hotpicksSection} data-wheel-point="true">
           <div className={css.sectionHeader}>
             <div className={css.sectionIndicator} />
-            <div className={css.sectionTitle}>Hot Picks ({themeInfo?.length})</div>
+            <div className={css.sectionTitle}>
+              Hot Picks ({themeInfo?.length})
+            </div>
           </div>
           <div className={css.productList}>
             <TVirtualGridList
@@ -458,7 +511,11 @@ const SearchResultsNew = ({
       <div className={css.buttonContainer}>
         {hasMore && (
           <SpottableDiv onClick={downBtnClick} className={css.downBtn}>
-            <CustomImage className={css.btnImg} src={downBtnImg} alt="Down arrow" />
+            <CustomImage
+              className={css.btnImg}
+              src={downBtnImg}
+              alt="Down arrow"
+            />
           </SpottableDiv>
         )}
         <SpottableDiv onClick={upBtnClick} className={css.upBtn}>