[search] 탑버튼 적용.

- 검색이후 탑버튼 스팟 포커스 적용

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

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import classNames from 'classnames';
 
@@ -10,14 +16,15 @@ import upBtnImg from '../../../assets/images/btn/search_btn_up_arrow.png';
 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 { $L } from '../../utils/helperMethods';
 import { SpotlightIds } from '../../utils/SpotlightIds';
+import HowAboutThese from './HowAboutThese/HowAboutThese';
+import HowAboutTheseSmall from './HowAboutThese/HowAboutThese.small';
 import css from './SearchResults.new.v2.module.less';
 import ItemCard from './SearchResultsNew/ItemCard';
 import ShowCard from './SearchResultsNew/ShowCard';
-import HowAboutThese from './HowAboutThese/HowAboutThese';
-import HowAboutTheseSmall from './HowAboutThese/HowAboutThese.small';
 
 const ITEMS_PER_PAGE = 10;
 
@@ -62,7 +69,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 = ({
@@ -76,7 +85,11 @@ const SearchResultsNew = ({
 }) => {
   // ShopperHouse 데이터를 ItemCard 형식으로 변환
   const convertedShopperHouseItems = useMemo(() => {
-    if (!shopperHouseInfo || !shopperHouseInfo.results || shopperHouseInfo.results.length === 0) {
+    if (
+      !shopperHouseInfo ||
+      !shopperHouseInfo.results ||
+      shopperHouseInfo.results.length === 0
+    ) {
       return null;
     }
 
@@ -112,7 +125,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 [
@@ -134,7 +148,9 @@ const SearchResultsNew = ({
   const cbChangePageRef = useRef(null);
 
   // HowAboutThese 모드 상태 관리
-  const [howAboutTheseMode, setHowAboutTheseMode] = useState(HOW_ABOUT_THESE_MODES.SMALL);
+  const [howAboutTheseMode, setHowAboutTheseMode] = useState(
+    HOW_ABOUT_THESE_MODES.SMALL
+  );
 
   // HowAboutThese 모드 전환 핸들러
   const handleShowFullHowAboutThese = useCallback(() => {
@@ -150,7 +166,8 @@ const SearchResultsNew = ({
   const buttonTabList = useMemo(() => getButtonTabList(), [getButtonTabList]);
 
   // 현재 탭의 데이터 가져오기 - ShopperHouse 데이터 우선
-  const currentData = tab === 0 ? convertedShopperHouseItems || itemInfo : showInfo;
+  const currentData =
+    tab === 0 ? convertedShopperHouseItems || itemInfo : showInfo;
 
   // 표시할 데이터 (처음부터 visibleCount 개수만큼)
   const displayedData = useMemo(() => {
@@ -206,6 +223,21 @@ const SearchResultsNew = ({
     if (cbChangePageRef.current) {
       cbChangePageRef.current(0, true);
     }
+
+    const targetId =
+      themeInfo?.length > 0
+        ? 'searchProduct-0'
+        : itemInfo?.length > 0
+          ? 'searchItemContents0'
+          : showInfo?.length > 0
+            ? 'categoryShowContents0'
+            : null;
+
+    if (!targetId) {
+      Spotlight.focus('search-input-box');
+    } else {
+      Spotlight.focus(targetId);
+    }
   }, []);
 
   // 10개씩 추가 로드 (아래 버튼)
@@ -223,7 +255,8 @@ const SearchResultsNew = ({
         return null;
       }
 
-      const { bgImgPath, title, partnerLogo, partnerName, keyword } = themeInfo[index];
+      const { bgImgPath, title, partnerLogo, partnerName, keyword } =
+        themeInfo[index];
       return (
         <SpottableDiv
           key={`searchProduct-${index}`}
@@ -232,11 +265,19 @@ const SearchResultsNew = ({
           {...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 && (
@@ -314,7 +355,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
@@ -360,7 +403,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}>