[FE] refactor: 검색 페이지 이슈 수정

frontend/src/components/Search/RecommendList/RecommendList.tsx

@@ -1,18 +1,18 @@
-import { Link, Text } from '@fun-eat/design-system';
+import { Button, Text } from '@fun-eat/design-system';
+import type { MouseEventHandler } from 'react';
 import { useRef } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { MarkedText } from '@/components/Common';
-import { PATH } from '@/constants/path';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductSearchAutocompleteQuery } from '@/hooks/queries/search';
 
 interface RecommendListProps {
   searchQuery: string;
+  handleSearchClick: MouseEventHandler<HTMLButtonElement>;
 }
 
-const RecommendList = ({ searchQuery }: RecommendListProps) => {
+const RecommendList = ({ searchQuery, handleSearchClick }: RecommendListProps) => {
   const { data: searchResponse, fetchNextPage, hasNextPage } = useInfiniteProductSearchAutocompleteQuery(searchQuery);
   const scrollRef = useRef<HTMLDivElement>(null);
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
@@ -26,11 +26,18 @@ const RecommendList = ({ searchQuery }: RecommendListProps) => {
   return (
     <>
       <RecommendListContainer>
-        {products.map(({ id, name, categoryType }) => (
+        {products.map(({ id, name }) => (
           <li key={id}>
-            <Link as={RouterLink} to={`${PATH.PRODUCT_LIST}/${categoryType}/${id}`} block>
+            <ProductButton
+              type="button"
+              customWidth="100%"
+              customHeight="100%"
+              color="white"
+              value={name}
+              onClick={handleSearchClick}
+            >
               <MarkedText text={name} mark={searchQuery} />
-            </Link>
+            </ProductButton>
           </li>
         ))}
       </RecommendListContainer>
@@ -51,6 +58,10 @@ const RecommendListContainer = styled.ul`
   }
 `;
 
+const ProductButton = styled(Button)`
+  text-align: left;
+`;
+
 const ErrorText = styled(Text)`
   height: 36px;
   padding: 0 10px;

frontend/src/hooks/search/useSearch.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler, FormEventHandler } from 'react';
+import type { ChangeEventHandler, FormEventHandler, MouseEventHandler } from 'react';
 import { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
@@ -16,21 +16,32 @@ const useSearch = () => {
 
   const handleSearch: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
+    const trimmedSearchQuery = searchQuery.trim();
 
-    if (!searchQuery) {
+    if (!trimmedSearchQuery) {
       alert('검색어를 입력해주세요');
+      setSearchQuery('');
       return;
     }
 
-    if (currentSearchQuery === searchQuery) {
+    if (currentSearchQuery === trimmedSearchQuery) {
       return;
     }
 
+    setSearchQuery(trimmedSearchQuery);
     setIsSubmitted(true);
-    setSearchParams({ query: searchQuery });
+    setSearchParams({ query: trimmedSearchQuery });
   };
 
-  return { searchQuery, isSubmitted, handleSearchQuery, handleSearch };
+  const handleSearchClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    const { value } = event.currentTarget;
+
+    setSearchQuery(value);
+    setIsSubmitted(true);
+    setSearchParams({ query: value });
+  };
+
+  return { searchQuery, isSubmitted, handleSearchQuery, handleSearch, handleSearchClick };
 };
 
 export default useSearch;

frontend/src/pages/SearchPage.tsx

@@ -1,7 +1,7 @@
 import { Button, Heading, Spacing, Text } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import type { MouseEventHandler } from 'react';
-import { Suspense, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { ErrorBoundary, ErrorComponent, Input, Loading, SvgIcon, TabMenu } from '@/components/Common';
@@ -10,11 +10,16 @@ import { SEARCH_PAGE_TABS } from '@/constants';
 import { useDebounce } from '@/hooks/common';
 import { useSearch } from '@/hooks/search';
 
+const isProductSearchTab = (tabMenu: string) => tabMenu === SEARCH_PAGE_TABS[0];
+const getInputPlaceholder = (tabMenu: string) =>
+  isProductSearchTab(tabMenu) ? '상품 이름을 검색해보세요.' : '꿀조합에 포함된 상품을 입력해보세요.';
+
 const SearchPage = () => {
-  const { searchQuery, isSubmitted, handleSearchQuery, handleSearch } = useSearch();
+  const { searchQuery, isSubmitted, handleSearchQuery, handleSearch, handleSearchClick } = useSearch();
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery || '');
   const [selectedTabMenu, setSelectedTabMenu] = useState<string>(SEARCH_PAGE_TABS[0]);
   const { reset } = useQueryErrorResetBoundary();
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const handleTabMenuSelect: MouseEventHandler<HTMLButtonElement> = (event) => {
     setSelectedTabMenu(event.currentTarget.value);
@@ -28,27 +33,34 @@ const SearchPage = () => {
     [searchQuery]
   );
 
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
   return (
     <>
       <SearchSection>
         <form onSubmit={handleSearch}>
           <Input
             customWidth="100%"
-            placeholder="상품 이름을 검색해보세요."
+            placeholder={getInputPlaceholder(selectedTabMenu)}
             rightIcon={
               <Button customHeight="36px" color="white">
                 <SvgIcon variant="search" />
               </Button>
             }
             value={searchQuery}
             onChange={handleSearchQuery}
+            ref={inputRef}
           />
         </form>
         {!isSubmitted && debouncedSearchQuery && (
           <RecommendWrapper>
             <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
               <Suspense fallback={<Loading />}>
-                <RecommendList searchQuery={debouncedSearchQuery} />
+                <RecommendList searchQuery={debouncedSearchQuery} handleSearchClick={handleSearchClick} />
               </Suspense>
             </ErrorBoundary>
           </RecommendWrapper>
@@ -69,7 +81,7 @@ const SearchPage = () => {
             <ErrorBoundary fallback={ErrorComponent}>
               <Suspense fallback={<Loading />}>
                 <Spacing size={20} />
-                {selectedTabMenu === SEARCH_PAGE_TABS[0] ? (
+                {isProductSearchTab(selectedTabMenu) ? (
                   <ProductSearchResultList searchQuery={debouncedSearchQuery} />
                 ) : (
                   <RecipeSearchResultList searchQuery={debouncedSearchQuery} />
@@ -96,7 +108,6 @@ const RecommendWrapper = styled.div`
   top: 100%;
   left: 0;
   right: 0;
-  height: fit-content;
   max-height: 150px;
   padding: 10px 0;
   background-color: ${({ theme }) => theme.backgroundColors.default};