[검색] 스타일 및 변경 작업#1

- Figma 기준 02-1 작업완료.
    (관련 내용 주석으로 메모달아둠, 분리 필요)
 - 02-2작업완료
    (관련 내용 주석으로 메모달아둠, 분리 필요)
 - 02-3 (카테고리 부분에대한 문의점으로 오현주 팀장님에게 문의넣어둠)

com.twin.app.shoptime/src/components/TInput/TInput.jsx

@@ -1,14 +1,17 @@
-import React, { useCallback, useState } from "react";
+import React, {
+  useCallback,
+  useState,
+} from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
-import { InputField } from "@enact/sandstone/Input";
+import { InputField } from '@enact/sandstone/Input';
-import Spotlight from "@enact/spotlight";
+import Spotlight from '@enact/spotlight';
-import Spottable from "@enact/spotlight/Spottable";
+import Spottable from '@enact/spotlight/Spottable';
 
-import useScrollReset from "../../hooks/useScrollReset";
+import useScrollReset from '../../hooks/useScrollReset';
-import TIconButton from "../TIconButton/TIconButton";
+import TIconButton from '../TIconButton/TIconButton';
-import css from "./TInput.module.less";
+import css from './TInput.module.less';
 
 const KINDS = { withIcon: "withIcon" };
 const ICONS = { search: "search" };
@@ -30,6 +33,8 @@ export default function TInput({
   scrollTop,
   onIconClick,
   forcedSpotlight,
+  onFocus,
+  onBlur,
   ...rest
 }) {
   const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
@@ -66,6 +71,20 @@ export default function TInput({
     }
   }, []);
 
+  //focus,blur 추가
+  const _onFocus = useCallback(() => {
+    if (onFocus) {
+      onFocus();
+    }
+    handleScrollReset();
+  }, [onFocus]);
+  const _onBlur = useCallback(() => {
+    if (onBlur) {
+      onBlur();
+    }
+    handleStopScrolling();
+  }, [onBlur]);
+
   return (
     <Container
       className={classNames(css.container, className ? className : null)}
@@ -78,8 +97,8 @@ export default function TInput({
         spotlightDisabled={spotlightDisabled}
         className={classNames(css.input)}
         autoFocus
-        onFocus={handleScrollReset}
+        onFocus={_onFocus}
-        onBlur={handleStopScrolling}
+        onBlur={_onBlur}
         onKeyDown={onKeyDown}
         spotlightId={"input-field-box"}
         aria-label="Keyword edit box"

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

@@ -5,49 +5,71 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from "react";
+} from 'react';
 
-import micIcon from "../../../assets/images/searchpanel/image-mic.png";
+import classNames from 'classnames';
-import hotPicksImage from "../../../assets/images/searchpanel/img-hotpicks.png";
+import {
-import hotPicksBrandImage from "../../../assets/images/searchpanel/img-search-hotpicks.png";
+  useDispatch,
-
+  useSelector,
-import { useDispatch, useSelector } from "react-redux";
+} from 'react-redux';
-
+
-import { Job } from "@enact/core/util";
+import { Job } from '@enact/core/util';
-import Spotlight from "@enact/spotlight";
+import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import SpotlightContainerDecorator
-import Spottable from "@enact/spotlight/Spottable";
+  from '@enact/spotlight/SpotlightContainerDecorator';
-import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
+import Spottable from '@enact/spotlight/Spottable';
-
+import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
-import { sendLogGNB, sendLogTotalRecommend } from "../../actions/logActions";
+
-import { getMyRecommandedKeyword } from "../../actions/myPageActions";
+import micIcon from '../../../assets/images/searchpanel/image-mic.png';
-import { popPanel, updatePanel } from "../../actions/panelActions";
+import hotPicksImage from '../../../assets/images/searchpanel/img-hotpicks.png';
-import { getSearch, resetSearch } from "../../actions/searchActions";
+import hotPicksBrandImage
+  from '../../../assets/images/searchpanel/img-search-hotpicks.png';
+import {
+  sendLogGNB,
+  sendLogTotalRecommend,
+} from '../../actions/logActions';
+import { getMyRecommandedKeyword } from '../../actions/myPageActions';
+import {
+  popPanel,
+  updatePanel,
+} from '../../actions/panelActions';
+import {
+  getSearch,
+  resetSearch,
+} from '../../actions/searchActions';
 import {
-  showSuccessToast, 
   showErrorToast,
-  showSearchSuccessToast, 
+  showInfoToast,
   showSearchErrorToast,
+  showSearchSuccessToast,
+  showSuccessToast,
   showWarningToast,
-  showInfoToast
+} from '../../actions/toastActions';
-} from "../../actions/toastActions";
+import TBody from '../../components/TBody/TBody';
-import TBody from "../../components/TBody/TBody";
+import TInput, {
-import TInput, { ICONS, KINDS } from "../../components/TInput/TInput";
+  ICONS,
-import TPanel from "../../components/TPanel/TPanel";
+  KINDS,
-import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
+} from '../../components/TInput/TInput';
-import VirtualKeyboardContainer from "../../components/TToast/VirtualKeyboardContainer";
+import TPanel from '../../components/TPanel/TPanel';
-import usePrevious from "../../hooks/usePrevious";
+import TScroller from '../../components/TScroller/TScroller';
+import TVerticalPagenator
+  from '../../components/TVerticalPagenator/TVerticalPagenator';
+import TVirtualGridList
+  from '../../components/TVirtualGridList/TVirtualGridList';
+// import VirtualKeyboardContainer from "../../components/TToast/VirtualKeyboardContainer";
+import usePrevious from '../../hooks/usePrevious';
 import {
   LOG_CONTEXT_NAME,
   LOG_MENU,
   LOG_MESSAGE_ID,
   panel_names,
-} from "../../utils/Config";
+} from '../../utils/Config';
-import { SpotlightIds } from "../../utils/SpotlightIds";
+import { SpotlightIds } from '../../utils/SpotlightIds';
-import NoSearchResults from "./NoSearchResults/NoSearchResults";
+import NoSearchResults from './NoSearchResults/NoSearchResults';
-import RecommendedKeywords from "./RecommendedKeywords/RecommendedKeywords";
+import RecommendedKeywords from './RecommendedKeywords/RecommendedKeywords';
-import css from "./SearchPanel.new.module.less";
+import css from './SearchPanel.new.module.less';
-import SearchResults from "./SearchResults/SearchResults";
+import SearchResultsNew from './SearchResults.new';
+import SearchResults from './SearchResults/SearchResults';
 
 const ContainerBasic = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -82,10 +104,15 @@ const SPOTLIGHT_IDS = {
   TOP_SEARCHES_SECTION: "top-searches-section",
   POPULAR_BRANDS_SECTION: "popular-brands-section",
   HOT_PICKS_SECTION: "hot-picks-section",
-  SEARCH_VERTICAL_PAGENATOR: "search_verticalPagenator"
+  SEARCH_VERTICAL_PAGENATOR: "search_verticalPagenator",
 };
 
-export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
+export default function SearchPanel({
+  panelInfo,
+  isOnTop,
+  spotlightId,
+  scrollOptions = [],
+}) {
   const dispatch = useDispatch();
   const loadingComplete = useSelector((state) => state.common?.loadingComplete);
   const recommandedKeywords = useSelector(
@@ -105,6 +132,18 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
   const [position, setPosition] = useState(null);
   const [showVirtualKeyboard, setShowVirtualKeyboard] = useState(false);
 
+  //인풋창 포커스 구분을 위함
+  const [inputFocus, setInputFocus] = useState(false);
+  const _onFocus = () => {
+    setInputFocus(true);
+  };
+  const _onBlur = () => {
+    setInputFocus(false);
+  };
+  useEffect(() => {
+    console.log("###inputFocus", inputFocus);
+  }, [inputFocus]);
+
   let searchQueryRef = usePrevious(searchQuery);
   let isOnTopRef = usePrevious(isOnTop);
 
@@ -122,17 +161,34 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
   );
 
   // 가짜 데이터 - 실제로는 Redux store나 API에서 가져와야 함
-  const recentSearches = useMemo(() => ["Puppy food", "Dog toy", "Fitness"], []);
+  const recentSearches = useMemo(
-  const topSearches = useMemo(() => ["Mather's Day", "Gift", "Easter Day", "Royal Canin puppy food", "Fitness", "Parrot"], []);
+    () => ["Puppy food", "Dog toy", "Fitness"],
-  const popularBrands = useMemo(() => ["Shark", "Ninja", "Skechers", "LocknLock", "8Greens", "LGE"], []);
+    []
-  const hotPicks = useMemo(() => [
+  );
+  const topSearches = useMemo(
+    () => [
+      "Mather's Day",
+      "Gift",
+      "Easter Day",
+      "Royal Canin puppy food",
+      "Fitness",
+      "Parrot",
+    ],
+    []
+  );
+  const popularBrands = useMemo(
+    () => ["Shark", "Ninja", "Skechers", "LocknLock", "8Greens", "LGE"],
+    []
+  );
+  const hotPicks = useMemo(
+    () => [
       {
         id: 1,
         image: hotPicksImage,
         brandLogo: hotPicksBrandImage,
         brandName: "Product Name",
         title: "New Shark Vacuum! Your pet Hair Solution!",
-      isForYou: false
+        isForYou: false,
       },
       {
         id: 2,
@@ -140,7 +196,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
         brandLogo: hotPicksBrandImage,
         brandName: "Product Name",
         title: "New Shark Vacuum! Your pet Hair Solution!",
-      isForYou: false
+        isForYou: false,
       },
       {
         id: 3,
@@ -148,7 +204,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
         brandLogo: hotPicksBrandImage,
         brandName: "Product Name",
         title: "New Shark Vacuum! Your pet Hair Solution!",
-      isForYou: false
+        isForYou: false,
       },
       {
         id: 4,
@@ -156,9 +212,11 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
         brandLogo: hotPicksBrandImage,
         brandName: "Product Name",
         title: "New Shark Vacuum! Your pet Hair Solution!",
-      isForYou: true
+        isForYou: true,
-    }
+      },
-  ], []);
+    ],
+    []
+  );
 
   useEffect(() => {
     if (loadingComplete && !recommandedKeywords) {
@@ -305,7 +363,8 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
     };
   }, []);
 
-  const handleKeydown = useCallback((e) => {
+  const handleKeydown = useCallback(
+    (e) => {
       if (!isOnTopRef.current) {
         return;
       }
@@ -324,10 +383,23 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
       }
 
       // 방향키 처리 - Spotlight 네비게이션 허용
-    const arrowKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Left", "Right", "Up", "Down"];
+      const arrowKeys = [
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Left",
+        "Right",
+        "Up",
+        "Down",
+      ];
       if (arrowKeys.includes(e.key)) {
         // 입력 필드가 비어있고 왼쪽 화살표인 경우에만 방지
-      if (position === 0 && (e.key === "Left" || e.key === "ArrowLeft") && !searchQuery) {
+        if (
+          position === 0 &&
+          (e.key === "Left" || e.key === "ArrowLeft") &&
+          !searchQuery
+        ) {
           e.preventDefault();
           return;
         }
@@ -335,7 +407,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
         // 오른쪽 화살표 키 처리 - 포커스 이동 허용
         if (e.key === "ArrowRight" || e.key === "Right") {
           // 커서가 텍스트 끝에 있을 때만 포커스 이동 허용
-        const input = document.querySelector(`[data-spotlight-id="input-field-box"] > input`);
+          const input = document.querySelector(
+            `[data-spotlight-id="input-field-box"] > input`
+          );
           if (input && position === input.value.length) {
             // 커서가 텍스트 끝에 있으면 포커스 이동 허용
             return;
@@ -345,7 +419,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
         // 나머지 방향키는 Spotlight가 처리하도록 허용
         return;
       }
-  }, [searchQuery, position, handleSearchSubmit, showVirtualKeyboard]);
+    },
+    [searchQuery, position, handleSearchSubmit, showVirtualKeyboard]
+  );
 
   const cursorPosition = useCallback(() => {
     const input = document.querySelector(
@@ -397,12 +473,19 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
   }, [panelInfo, firstSpot]);
 
   // 키워드 클릭 핸들러
-  const handleKeywordClick = useCallback((keyword) => {
+  const handleKeywordClick = useCallback(
+    (keyword) => {
       setSearchQuery(keyword);
       handleSearchSubmit(keyword);
       // 키워드 선택 알림
-    dispatch(showSuccessToast(`"${keyword}" 키워드로 검색합니다.`, { duration: 2000 }));
+      dispatch(
-  }, [handleSearchSubmit, dispatch]);
+        showSuccessToast(`"${keyword}" 키워드로 검색합니다.`, {
+          duration: 2000,
+        })
+      );
+    },
+    [handleSearchSubmit, dispatch]
+  );
 
   // 상품 클릭 핸들러
   const handleProductClick = useCallback((product) => {
@@ -417,58 +500,62 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
   }, [dispatch]);
 
   // ProductCard 컴포넌트
-  const ProductCard = useCallback(({ 
+  const renderItem = useCallback(
-    product, 
+    (
-    index, 
+      //   {
-    onClick, 
+      //   product,
-    showForYouBadge = true,
+      //   index,
+      //   onClick,
+      //   showBrandLogo = true,
+      //   showBrandName = true,
+      //   showProductTitle = true,
+      //   ...rest
+      // }
+      { index, ...rest }
+    ) => {
+      const {
         showBrandLogo = true,
         showBrandName = true,
         showProductTitle = true,
-    badgeText = "For You",
+        image,
-    badgePosition = "top-right"
+        title,
-  }) => {
+        brandLogo,
+        brandName,
+      } = hotPicks[index];
       return (
         <SpottableProduct
           key={`product-${index}`}
           className={css.productCard}
-        onClick={() => onClick?.(product)}
           spotlightId={`product-${index}`}
+          {...rest}
         >
           <div className={css.productImageWrapper}>
-          <img
+            <img src={image} alt={title} className={css.productImage} />
-            src={product.image}
-            alt={product.title}
-            className={css.productImage}
-          />
-          {showForYouBadge && product.isForYou && (
-            <div className={`${css.forYouBadge} ${css[badgePosition]}`}>
-              {badgeText}
-            </div>
-          )}
           </div>
           <div className={css.productInfo}>
             {showBrandLogo && (
               <div className={css.productBrandWrapper}>
                 <img
-                src={product.brandLogo}
+                  src={brandLogo}
-                alt={product.brandName}
+                  alt={brandName}
                   className={css.brandLogo}
                 />
               </div>
             )}
             <div className={css.productDetails}>
               {showBrandName && (
-              <div className={css.brandName}>{product.brandName}</div>
+                <div className={css.brandName}>{brandName}</div>
               )}
               {showProductTitle && (
-              <div className={css.productTitle}>{product.title}</div>
+                <div className={css.productTitle}>{title}</div>
               )}
             </div>
           </div>
         </SpottableProduct>
       );
-  }, []);
+    },
+    []
+  );
 
   return (
     <TPanel
@@ -495,7 +582,11 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
             >
               {/* 검색 입력 영역 */}
               <InputContainer
-                className={css.inputContainer}
+                className={classNames(
+                  css.inputContainer,
+                  inputFocus === true && css.inputFocus,
+                  css.searchValue /* 이건 결과값 있을때만. 조건 추가필요 */
+                )}
                 data-wheel-point={true}
                 spotlightId={SPOTLIGHT_IDS.SEARCH_INPUT_LAYER}
               >
@@ -520,6 +611,8 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                     tabIndex={0}
                     spotlightDisabled={false}
                     spotlightBoxDisabled={true}
+                    onFocus={_onFocus}
+                    onBlur={_onBlur}
                   />
                   <SpottableMicButton
                     className={css.microphoneButton}
@@ -536,19 +629,19 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                   </SpottableMicButton>
 
                   {/* 테스트용 Toast 버튼 (개발용) */}
-                  <SpottableMicButton 
+                  {/* <SpottableMicButton
                     className={css.testToastButton}
                     onClick={handleTestToasts}
                     spotlightId="test-toast-button"
                   >
-                    <div className={css.testButtonCircle}>
+                    <div className={css.testButtonCircle}>🧪</div>
-                      🧪
+                  </SpottableMicButton> */}
-                    </div>
-                  </SpottableMicButton>
                 </div>
               </InputContainer>
-
+              {/* 결과갑 부분 작업중 */}
-              {/* 검색 결과 표시 영역 */}
+              <SearchResultsNew />
+              {/* //결과갑 부분 작업중 */}
+              {/* 검색 결과 표시 영역 
               {searchPerformed && searchQuery !== null ? (
                 Object.keys(searchDatas).length > 0 ? (
                   <SearchResults
@@ -561,7 +654,10 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                 )
               ) : (
                 <ContainerBasic className={css.contentContainer}>
-                  {/* 최근 검색어 섹션 */}
+                  {/* 노출 조건 변경 필요. 포커스 블러만으로는 안됌.(가상 키보드 노출시가 맞을듯) 
+                  {inputFocus === false ? (
+                    <>
+                      {/* 최근 검색어 섹션  
                       <SectionContainer
                         className={css.section}
                         data-wheel-point={true}
@@ -569,7 +665,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                       >
                         <div className={css.sectionHeader}>
                           <div className={css.sectionIndicator}></div>
-                      <div className={css.sectionTitle}>Your Recent Searches</div>
+                          <div className={css.sectionTitle}>
+                            Your Recent Searches
+                          </div>
                         </div>
                         <div className={css.keywordList}>
                           {recentSearches.map((keyword, index) => (
@@ -585,7 +683,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                         </div>
                       </SectionContainer>
 
-                  {/* 인기 검색어 섹션 */}
+                      {/* 인기 검색어 섹션  
                       <SectionContainer
                         className={css.section}
                         data-wheel-point={true}
@@ -609,7 +707,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                         </div>
                       </SectionContainer>
 
-                  {/* 인기 브랜드 섹션 */}
+                      {/* 인기 브랜드 섹션  
                       <SectionContainer
                         className={css.section}
                         data-wheel-point={true}
@@ -633,45 +731,62 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                         </div>
                       </SectionContainer>
 
-                  {/* Hot Picks for You 섹션 */}
+                      {/* Hot Picks for You 섹션  
                       <SectionContainer
-                    className={css.section}
+                        className={css.hotpicksSection}
                         data-wheel-point={true}
                         spotlightId={SPOTLIGHT_IDS.HOT_PICKS_SECTION}
                       >
                         <div className={css.sectionHeader}>
                           <div className={css.sectionIndicator}></div>
-                      <div className={css.sectionTitle}>Hot Picks for You</div>
+                          <div className={css.sectionTitle}>
+                            Hot Picks for You
+                          </div>
                         </div>
                         <div className={css.productList}>
-                      {hotPicks.map((product, index) => (
+                          {hotPicks && hotPicks.length > 0 && (
-                        <ProductCard
+                            <TVirtualGridList
-                          key={`product-${index}`}
+                              dataSize={hotPicks.length}
-                          product={product}
+                              direction="horizontal"
-                          index={index}
+                              renderItem={renderItem}
-                          onClick={handleProductClick}
+                              // itemWidth={546}
-                          showForYouBadge={true}
+                              itemWidth={416}
-                          showBrandLogo={true}
+                              itemHeight={436}
-                          showBrandName={true}
+                              spacing={20}
-                          showProductTitle={true}
-                          badgeText="For You"
-                          badgePosition="top-right"
                             />
-                      ))}
+                          )}
                         </div>
                       </SectionContainer>
+                    </>
+                  ) : (
+                    <div className={css.inputFocusBox}>
+                      <div className={css.keywordList}>
+                        {recentSearches.map((keyword, index) => (
+                          <SpottableKeyword
+                            key={`recent-${index}`}
+                            className={css.keywordButton}
+                            onClick={() => handleKeywordClick(keyword)}
+                            spotlightId={`recent-keyword-${index}`}
+                          >
+                            {keyword}
+                          </SpottableKeyword>
+                        ))}
+                      </div>
+                    </div>
+                  )}
                 </ContainerBasic>
               )}
+              */}
             </TVerticalPagenator>
           )}
         </ContainerBasic>
       </TBody>
 
       {/* Virtual Keyboard */}
-      <VirtualKeyboardContainer 
+      {/* <VirtualKeyboardContainer
         isVisible={showVirtualKeyboard}
         onClose={() => setShowVirtualKeyboard(false)}
-      />
+      /> */}
     </TPanel>
   );
 }

com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less

@@ -26,7 +26,13 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-
+    &.inputFocus {
+      padding-bottom: 10px;
+    }
+    &.searchValue {
+      padding-bottom: 55px;
+      padding-top: 55px;
+    }
     > * {
       margin-bottom: 10px;
 
@@ -73,10 +79,10 @@
           background-color: #fff !important;
 
           input {
-            text-align: center;
+            text-align: left;
             color: black;
             font-size: 42px;
-            font-family: 'LG Smart UI';
+            font-family: "LG Smart UI";
             font-weight: 700;
             line-height: 42px;
             outline: none;
@@ -166,13 +172,13 @@
           position: relative;
 
           &::before {
-            content: '';
+            content: "";
             width: 36.27px;
             height: 36.27px;
             position: absolute;
             left: 1.95px;
             top: 1.95px;
-            border: 3.90px solid black;
+            border: 3.9px solid black;
             border-radius: 50%;
           }
         }
@@ -202,10 +208,7 @@
           align-items: center;
 
           .microphoneIcon {
-            width: 100%;
+            height: 50px;
-            height: 100%;
-            object-fit: contain;
-            padding: 10px;
             box-sizing: border-box;
           }
         }
@@ -277,6 +280,64 @@
     justify-content: flex-start;
     align-items: flex-start;
     display: inline-flex;
+    .inputFocusBox {
+      width: 995px;
+      height: 355px;
+      margin: 0 auto;
+      .keywordList {
+        align-self: stretch;
+        padding-top: 10px;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: inline-flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        > * {
+          margin-bottom: 5px;
+        }
+
+        .keywordButton {
+          padding: 20px;
+          background: white;
+          border-radius: 100px;
+          border: 5px solid #dadada;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-start;
+          display: inline-flex;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          height: 64px;
+          > * {
+            margin-bottom: 10px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+
+          color: black;
+          font-size: 24px;
+          font-family: "LG Smart UI";
+          font-weight: 700;
+          line-height: 24px;
+          text-align: center;
+          word-wrap: break-word;
+
+          &:hover {
+            border-color: @PRIMARY_COLOR_RED;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            transform: translateY(-2px);
+          }
+
+          &:focus {
+            border: 5px solid @PRIMARY_COLOR_RED;
+            box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+            outline: none;
+          }
+        }
+      }
+    }
   }
 
   // 섹션 공통 스타일
@@ -315,14 +376,14 @@
       .sectionIndicator {
         width: 6px;
         height: 36px;
-        background: #C70850;
+        background: #c70850;
       }
 
       .sectionTitle {
         text-align: center;
         color: black;
         font-size: 42px;
-        font-family: 'LG Smart UI';
+        font-family: "LG Smart UI";
         font-weight: 700;
         line-height: 42px;
         word-wrap: break-word;
@@ -341,17 +402,13 @@
       > * {
         margin-right: 19px;
         margin-bottom: 19px;
-        
-        &:nth-child(3n) {
-          margin-right: 0;
-        }
       }
 
       .keywordButton {
         padding: 20px;
         background: white;
         border-radius: 100px;
-        border: 5px solid #DADADA;
+        border: 5px solid #dadada;
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
@@ -369,7 +426,7 @@
 
         color: black;
         font-size: 24px;
-        font-family: 'LG Smart UI';
+        font-family: "LG Smart UI";
         font-weight: 700;
         line-height: 24px;
         text-align: center;
@@ -388,50 +445,68 @@
         }
       }
     }
+  }
 
-    // 상품 리스트 스타일 (Hot Picks for You)
+  .hotpicksSection {
-    .productList {
+    padding-top: 63px;
-      align-self: stretch;
+    padding-left: 60px;
-      padding-top: 30px;
+    width: 1800px;
+    height: 580px;
+    .sectionHeader {
+      width: 1800px;
+      height: 42px;
       justify-content: flex-start;
-      align-items: flex-start;
+      align-items: center;
       display: inline-flex;
-      flex-wrap: wrap;
 
       > * {
-        margin-right: 19px;
+        margin-right: 12px;
-        margin-bottom: 19px;
 
-        &:nth-child(2n) {
+        &:last-child {
           margin-right: 0;
         }
       }
 
+      .sectionIndicator {
+        width: 6px;
+        height: 36px;
+        background: #c70850;
+      }
+
+      .sectionTitle {
+        text-align: center;
+        color: black;
+        font-size: 42px;
+        font-family: "LG Smart UI";
+        font-weight: 700;
+        line-height: 42px;
+        word-wrap: break-word;
+      }
+    }
+    // 상품 리스트 스타일 (Hot Picks for You)
+    .productList {
+      padding-top: 30px;
+      .size(@w: 100%, @h: inherit);
+      > div:nth-child(1) {
+        .size(@w: 100%, @h: inherit);
+      }
+
       .productCard {
         width: 546px;
         padding: 18px;
         background: white;
         border-radius: 12px;
-        border: 5px solid #DADADA;
+        border: 5px solid #dadada;
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
         display: inline-flex;
-
-        > * {
-          margin-bottom: 10px;
-          
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
         cursor: pointer;
         transition: all 0.2s ease;
 
         &:hover {
           border-color: @PRIMARY_COLOR_RED;
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-          transform: translateY(-2px);
         }
 
         &:focus {
@@ -454,51 +529,6 @@
             object-fit: cover;
             border-radius: 8px;
           }
-
-          .forYouBadge {
-            height: 29.33px;
-            padding-left: 5.33px;
-            padding-right: 5.33px;
-            position: absolute;
-            background: #C70850;
-            border-radius: 5.33px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: white;
-            font-size: 21.33px;
-            font-family: 'LG Smart UI';
-            font-weight: 700;
-            word-wrap: break-word;
-            z-index: 10;
-            
-            // 위치별 스타일
-            &.top-right {
-              right: 10px;
-              top: 10px;
-            }
-            
-            &.top-left {
-              left: 10px;
-              top: 10px;
-            }
-            
-            &.bottom-right {
-              right: 10px;
-              bottom: 10px;
-            }
-            
-            &.bottom-left {
-              left: 10px;
-              bottom: 10px;
-            }
-            
-            &.center {
-              left: 50%;
-              top: 50%;
-              transform: translate(-50%, -50%);
-            }
-          }
         }
 
         .productInfo {
@@ -557,7 +587,7 @@
               text-align: center;
               color: #808080;
               font-size: 18px;
-              font-family: 'LG Smart UI';
+              font-family: "LG Smart UI";
               font-weight: 700;
               line-height: 18px;
               word-wrap: break-word;
@@ -567,7 +597,7 @@
               align-self: stretch;
               color: black;
               font-size: 24px;
-              font-family: 'LG Smart UI';
+              font-family: "LG Smart UI";
               font-weight: 400;
               line-height: 24px;
               word-wrap: break-word;
@@ -606,7 +636,6 @@
   [data-spotlight-id] {
     &:focus {
       outline: 2px solid @PRIMARY_COLOR_RED;
-      outline-offset: 2px;
     }
   }
 }

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

@@ -0,0 +1,135 @@
+import React, {
+  useCallback,
+  useMemo,
+} from 'react';
+
+import { useDispatch } from 'react-redux';
+
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
+
+import hotPicksImage from '../../../assets/images/searchpanel/img-hotpicks.png';
+import hotPicksBrandImage
+  from '../../../assets/images/searchpanel/img-search-hotpicks.png';
+import TVirtualGridList
+  from '../../components/TVirtualGridList/TVirtualGridList';
+import css from './SearchResults.new.module.less';
+
+const SearchResultsNew = () => {
+  const Container = SpotlightContainerDecorator("div");
+  const SectionContainer = SpotlightContainerDecorator("div");
+  const SpottableLi = Spottable("li");
+  const SpottableDiv = Spottable("div");
+  const hotPicks = useMemo(
+    () => [
+      {
+        id: 1,
+        image: hotPicksImage,
+        brandLogo: hotPicksBrandImage,
+        brandName: "Product Name",
+        title: "New Shark Vacuum! Your pet Hair Solution!",
+        isForYou: false,
+      },
+      {
+        id: 2,
+        image: hotPicksImage,
+        brandLogo: hotPicksBrandImage,
+        brandName: "Product Name",
+        title: "New Shark Vacuum! Your pet Hair Solution!",
+        isForYou: false,
+      },
+      {
+        id: 3,
+        image: hotPicksImage,
+        brandLogo: hotPicksBrandImage,
+        brandName: "Product Name",
+        title: "New Shark Vacuum! Your pet Hair Solution!",
+        isForYou: false,
+      },
+      {
+        id: 4,
+        image: hotPicksImage,
+        brandLogo: hotPicksBrandImage,
+        brandName: "Product Name",
+        title: "New Shark Vacuum! Your pet Hair Solution!",
+        isForYou: true,
+      },
+    ],
+    []
+  );
+
+  // ProductCard 컴포넌트
+  const renderItem = useCallback(({ index, ...rest }) => {
+    const {
+      showBrandLogo = true,
+      showBrandName = true,
+      showProductTitle = true,
+      image,
+      title,
+      brandLogo,
+      brandName,
+    } = hotPicks[index];
+    return (
+      <SpottableDiv
+        key={`product-${index}`}
+        className={css.productCard}
+        spotlightId={`product-${index}`}
+        {...rest}
+      >
+        <div className={css.productImageWrapper}>
+          <img src={image} alt={title} className={css.productImage} />
+        </div>
+        <div className={css.productInfo}>
+          {showBrandLogo && (
+            <div className={css.productBrandWrapper}>
+              <img src={brandLogo} alt={brandName} className={css.brandLogo} />
+            </div>
+          )}
+          <div className={css.productDetails}>
+            {showBrandName && <div className={css.brandName}>{brandName}</div>}
+            {showProductTitle && (
+              <div className={css.productTitle}>{title}</div>
+            )}
+          </div>
+        </div>
+      </SpottableDiv>
+    );
+  }, []);
+  return (
+    <Container className={css.searchBox}>
+      <SectionContainer className={css.topBox}>
+        <span className={css.topBoxTitle}>How about these?</span>
+        <ul className={css.topBoxList}>
+          <SpottableLi className={css.topBoxListItem}>Puppy food</SpottableLi>
+          <SpottableLi className={css.topBoxListItem}>Dog toy</SpottableLi>
+          <SpottableLi className={css.topBoxListItem}>Fitness</SpottableLi>
+        </ul>
+      </SectionContainer>
+      <SectionContainer
+        className={css.hotpicksSection}
+        data-wheel-point={true}
+        spotlightId={"hot-picks-section"}
+      >
+        <div className={css.sectionHeader}>
+          <div className={css.sectionIndicator}></div>
+          <div className={css.sectionTitle}>Hot Picks (#)</div>
+        </div>
+        <div className={css.productList}>
+          {hotPicks && hotPicks.length > 0 && (
+            <TVirtualGridList
+              dataSize={hotPicks.length}
+              direction="horizontal"
+              renderItem={renderItem}
+              itemWidth={416}
+              itemHeight={436}
+              spacing={20}
+            />
+          )}
+        </div>
+      </SectionContainer>
+    </Container>
+  );
+};
+
+export default SearchResultsNew;

com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.module.less

@@ -0,0 +1,203 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.searchBox {
+  width: 100%;
+  height: 100%;
+  .topBox {
+    width: 100%;
+    height: 124px;
+    background-color: #ddd;
+    display: flex;
+    align-items: center;
+    .topBoxTitle {
+      margin-left: 60px;
+      font-size: 24px;
+      font-weight: 700;
+      color: #272727;
+      text-decoration: underline;
+    }
+    .topBoxList {
+      margin-left: 20px;
+      display: flex;
+      .topBoxListItem {
+        margin-right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 64px;
+        padding: 0 20px;
+        background-color: @COLOR_WHITE;
+        border-radius: 32px;
+        color: #000;
+        font-weight: 700;
+        font-size: 24px;
+        border: 4px solid @COLOR_WHITE;
+        &:focus {
+          border: 4px solid @PRIMARY_COLOR_RED;
+          box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+        }
+      }
+    }
+  }
+  .hotpicksSection {
+    padding-top: 63px;
+    padding-left: 60px;
+    width: 1800px;
+    height: 580px;
+    .sectionHeader {
+      width: 1800px;
+      height: 42px;
+      justify-content: flex-start;
+      align-items: center;
+      display: inline-flex;
+
+      > * {
+        margin-right: 12px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      .sectionIndicator {
+        width: 6px;
+        height: 36px;
+        background: #c70850;
+      }
+
+      .sectionTitle {
+        text-align: center;
+        color: black;
+        font-size: 42px;
+        font-family: "LG Smart UI";
+        font-weight: 700;
+        line-height: 42px;
+        word-wrap: break-word;
+      }
+    }
+    // 상품 리스트 스타일 (Hot Picks for You)
+    .productList {
+      padding-top: 30px;
+      .size(@w: 100%, @h: inherit);
+      > div:nth-child(1) {
+        .size(@w: 100%, @h: inherit);
+      }
+
+      .productCard {
+        width: 546px;
+        padding: 18px;
+        background: white;
+        border-radius: 12px;
+        border: 5px solid #dadada;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: inline-flex;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+          border-color: @PRIMARY_COLOR_RED;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        &:focus {
+          border: 5px solid @PRIMARY_COLOR_RED;
+          box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+          outline: none;
+        }
+
+        .productImageWrapper {
+          align-self: stretch;
+          height: 287px;
+          position: relative;
+
+          .productImage {
+            width: 510px;
+            height: 287px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            object-fit: cover;
+            border-radius: 8px;
+          }
+        }
+
+        .productInfo {
+          align-self: stretch;
+          padding-top: 15px;
+          padding-bottom: 15px;
+          justify-content: flex-start;
+          align-items: flex-start;
+          display: inline-flex;
+
+          > * {
+            margin-right: 10px;
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+
+          .productBrandWrapper {
+            justify-content: flex-start;
+            align-items: center;
+            display: flex;
+
+            > * {
+              margin-right: 10px;
+
+              &:last-child {
+                margin-right: 0;
+              }
+            }
+
+            .brandLogo {
+              width: 60px;
+              height: 60px;
+              border-radius: 8px;
+              object-fit: cover;
+            }
+          }
+
+          .productDetails {
+            flex: 1;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            display: inline-flex;
+
+            > * {
+              margin-bottom: 10px;
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+
+            .brandName {
+              text-align: center;
+              color: #808080;
+              font-size: 18px;
+              font-family: "LG Smart UI";
+              font-weight: 700;
+              line-height: 18px;
+              word-wrap: break-word;
+            }
+
+            .productTitle {
+              align-self: stretch;
+              color: black;
+              font-size: 24px;
+              font-family: "LG Smart UI";
+              font-weight: 400;
+              line-height: 24px;
+              word-wrap: break-word;
+            }
+          }
+        }
+      }
+    }
+  }
+}