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='검색'
+ >
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 (