[feature] 검색 시 전체동아리 기준으로 검색된다

frontend/src/components/common/SearchBox/SearchBox.tsx

@@ -1,13 +1,15 @@
 import { useRef, useState } from 'react';
 import { useSearch } from '@/context/SearchContext';
+import { useCategory } from '@/context/CategoryContext';
 import useMixpanelTrack from '@/hooks/useMixpanelTrack';
 import * as Styled from './SearchBox.styles';
 import SearchIcon from '@/assets/images/icons/search_button_icon.svg';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 const SearchBox = () => {
   const [isSearchBoxClicked, setIsSearchBoxClicked] = useState(false);
-  const { setKeyword, inputValue, setInputValue } = useSearch();
+  const { setKeyword, inputValue, setInputValue, setIsSearching } = useSearch();
+  const { setSelectedCategory } = useCategory();
   const trackEvent = useMixpanelTrack();
   const navigate = useNavigate();
   const location = useLocation();
@@ -23,6 +25,8 @@ const SearchBox = () => {
   const handleSearch = () => {
     redirectToHome();
     setKeyword(inputValue);
+    setSelectedCategory('all');
+    setIsSearching(true);
 
     inputRef.current?.blur();
 
@@ -40,7 +44,8 @@ const SearchBox = () => {
   return (
     <Styled.SearchBoxContainer
       $isFocused={isSearchBoxClicked}
-      onSubmit={handleSubmit}>
+      onSubmit={handleSubmit}
+    >
       <Styled.SearchInputStyles
         ref={inputRef}
         type='text'
@@ -54,7 +59,8 @@ const SearchBox = () => {
       <Styled.SearchButton
         type='submit'
         $isFocused={isSearchBoxClicked}
-        aria-label='검색'>
+        aria-label='검색'
+      >
         <img src={SearchIcon} alt='Search Button' />
       </Styled.SearchButton>
     </Styled.SearchBoxContainer>

frontend/src/context/SearchContext.tsx

@@ -5,6 +5,8 @@ interface SearchContextType {
   setKeyword: (keyword: string) => void;
   inputValue: string;
   setInputValue: (value: string) => void;
+  isSearching: boolean;
+  setIsSearching: (isSearching: boolean) => void;
 }
 
 interface SearchProviderProps {
@@ -16,6 +18,7 @@ const SearchContext = createContext<SearchContextType | undefined>(undefined);
 export const SearchProvider = ({ children }: SearchProviderProps) => {
   const [keyword, setKeyword] = useState<string>('');
   const [inputValue, setInputValue] = useState('');
+  const [isSearching, setIsSearching] = useState(false);
 
   return (
     <SearchContext.Provider
@@ -24,7 +27,10 @@ export const SearchProvider = ({ children }: SearchProviderProps) => {
         setKeyword,
         inputValue,
         setInputValue,
-      }}>
+        isSearching,
+        setIsSearching,
+      }}
+    >
       {children}
     </SearchContext.Provider>
   );

frontend/src/pages/MainPage/MainPage.tsx

@@ -21,15 +21,16 @@ const MainPage = () => {
   const [isFilterActive, setIsFilterActive] = useState(false);
   const { selectedCategory, setSelectedCategory } = useCategory();
 
-  const { keyword } = useSearch();
+  const { keyword, isSearching } = useSearch();
   const recruitmentStatus = isFilterActive ? 'OPEN' : 'all';
   const division = 'all';
+  const searchCategory = isSearching ? 'all' : selectedCategory;
 
   const {
     data: clubs,
     error,
     isLoading,
-  } = useGetCardList(keyword, recruitmentStatus, division, selectedCategory);
+  } = useGetCardList(keyword, recruitmentStatus, division, searchCategory);
   const isEmpty = !isLoading && (!clubs || clubs.length === 0);
   const hasData = clubs && clubs.length > 0;
 

frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx

@@ -58,7 +58,7 @@ const clubCategories: Category[] = [
 ];
 
 const CategoryButtonList = () => {
-  const { setKeyword, setInputValue } = useSearch();
+  const { setKeyword, setInputValue, setIsSearching } = useSearch();
   const { setSelectedCategory } = useCategory();
 
   const handleCategoryClick = (category: Category) => {
@@ -71,9 +71,9 @@ const CategoryButtonList = () => {
 
     setKeyword('');
     setInputValue('');
+    setIsSearching(false);
 
     setSelectedCategory(category.id);
-
   };
 
   return (