diff --git a/frontend/src/components/common/SearchBox/SearchBox.tsx b/frontend/src/components/common/SearchBox/SearchBox.tsx index 5d98a9091..be9c5917f 100644 --- a/frontend/src/components/common/SearchBox/SearchBox.tsx +++ b/frontend/src/components/common/SearchBox/SearchBox.tsx @@ -1,5 +1,6 @@ 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'; @@ -7,7 +8,8 @@ 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 ( + onSubmit={handleSubmit} + > { + aria-label='검색' + > Search Button diff --git a/frontend/src/context/SearchContext.tsx b/frontend/src/context/SearchContext.tsx index d20af1f39..24296326f 100644 --- a/frontend/src/context/SearchContext.tsx +++ b/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(undefined); export const SearchProvider = ({ children }: SearchProviderProps) => { const [keyword, setKeyword] = useState(''); const [inputValue, setInputValue] = useState(''); + const [isSearching, setIsSearching] = useState(false); return ( { setKeyword, inputValue, setInputValue, - }}> + isSearching, + setIsSearching, + }} + > {children} ); diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx index c49dae1be..0f8857380 100644 --- a/frontend/src/pages/MainPage/MainPage.tsx +++ b/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; diff --git a/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx b/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx index cdaeafaff..b5a568108 100644 --- a/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx +++ b/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 (