diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx
index ef23c91ee..6a571ca54 100644
--- a/frontend/src/components/common/Header/Header.tsx
+++ b/frontend/src/components/common/Header/Header.tsx
@@ -1,6 +1,6 @@
 import { useLocation } from 'react-router-dom';
 import * as Styled from './Header.styles';
-import SearchBox from '@/components/common/SearchBox/SearchBox';
+import SearchBox from '@/pages/MainPage/components/SearchBox/SearchBox';
 import useHeaderService from '@/services/header/useHeaderService';
 import useMobileMenu from '@/services/header/useMobileMenu';
 import useIsMobile from '@/hooks/useIsMobile';
diff --git a/frontend/src/components/common/SearchBox/SearchBox.tsx b/frontend/src/components/common/SearchBox/SearchBox.tsx
deleted file mode 100644
index be9c5917f..000000000
--- a/frontend/src/components/common/SearchBox/SearchBox.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-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, setIsSearching } = useSearch();
-  const { setSelectedCategory } = useCategory();
-  const trackEvent = useMixpanelTrack();
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const redirectToHome = () => {
-    if (location.pathname !== '/') {
-      navigate('/');
-    }
-  };
-
-  const handleSearch = () => {
-    redirectToHome();
-    setKeyword(inputValue);
-    setSelectedCategory('all');
-    setIsSearching(true);
-
-    inputRef.current?.blur();
-
-    trackEvent('Search Executed', {
-      inputValue: inputValue,
-      page: window.location.pathname,
-    });
-  };
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleSearch();
-  };
-
-  return (
-    <Styled.SearchBoxContainer
-      $isFocused={isSearchBoxClicked}
-      onSubmit={handleSubmit}
-    >
-      <Styled.SearchInputStyles
-        ref={inputRef}
-        type='text'
-        placeholder='어떤 동아리를 찾으세요?'
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
-        onFocus={() => setIsSearchBoxClicked(true)}
-        onBlur={() => setIsSearchBoxClicked(false)}
-        aria-label='동아리 검색창'
-      />
-      <Styled.SearchButton
-        type='submit'
-        $isFocused={isSearchBoxClicked}
-        aria-label='검색'
-      >
-        <img src={SearchIcon} alt='Search Button' />
-      </Styled.SearchButton>
-    </Styled.SearchBoxContainer>
-  );
-};
-
-export default SearchBox;
diff --git a/frontend/src/components/common/SearchBox/SearchBox.styles.ts b/frontend/src/components/common/SearchField/SearchField.styles.ts
similarity index 100%
rename from frontend/src/components/common/SearchBox/SearchBox.styles.ts
rename to frontend/src/components/common/SearchField/SearchField.styles.ts
diff --git a/frontend/src/components/common/SearchField/SearchField.tsx b/frontend/src/components/common/SearchField/SearchField.tsx
new file mode 100644
index 000000000..a515ca25e
--- /dev/null
+++ b/frontend/src/components/common/SearchField/SearchField.tsx
@@ -0,0 +1,54 @@
+import React, { useRef, useState } from 'react';
+import * as Styled from '@/components/common/SearchField/SearchField.styles';
+import searchButtonIcon from '@/assets/images/icons/search_button_icon.svg';
+
+interface SearchFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  placeholder?: string;
+  ariaLabel?: string;
+  autoBlur?: boolean;
+}
+
+const SearchField = ({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = '검색어를 입력하세요',
+  ariaLabel = '검색 입력창',
+  autoBlur = true,
+}: SearchFieldProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit();
+    if (autoBlur) inputRef.current?.blur();
+  };
+
+  return (
+    <Styled.SearchBoxContainer $isFocused={isFocused} onSubmit={handleSubmit}>
+      <Styled.SearchInputStyles
+        ref={inputRef}
+        type='text'
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        aria-label={ariaLabel}
+      />
+      <Styled.SearchButton
+        type='submit'
+        $isFocused={isFocused}
+        aria-label='검색'
+      >
+        <img src={searchButtonIcon} alt='Search Button' />
+      </Styled.SearchButton>
+    </Styled.SearchBoxContainer>
+  );
+};
+
+export default SearchField;
diff --git a/frontend/src/pages/MainPage/components/SearchBox/SearchBox.tsx b/frontend/src/pages/MainPage/components/SearchBox/SearchBox.tsx
new file mode 100644
index 000000000..f71df418c
--- /dev/null
+++ b/frontend/src/pages/MainPage/components/SearchBox/SearchBox.tsx
@@ -0,0 +1,43 @@
+import { useSearch } from '@/context/SearchContext';
+import { useCategory } from '@/context/CategoryContext';
+import useMixpanelTrack from '@/hooks/useMixpanelTrack';
+import SearchField from '@/components/common/SearchField/SearchField';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const SearchBox = () => {
+  const { setKeyword, inputValue, setInputValue, setIsSearching } = useSearch();
+  const { setSelectedCategory } = useCategory();
+  const trackEvent = useMixpanelTrack();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const redirectToHome = () => {
+    if (location.pathname !== '/') {
+      navigate('/');
+    }
+  };
+
+  const handleSearch = () => {
+    redirectToHome();
+    setKeyword(inputValue);
+    setSelectedCategory('all');
+    setIsSearching(true);
+
+    trackEvent('Search Executed', {
+      inputValue: inputValue,
+      page: window.location.pathname,
+    });
+  };
+
+  return (
+    <SearchField
+      value={inputValue}
+      onChange={(v) => setInputValue(v)}
+      onSubmit={handleSearch}
+      placeholder='어떤 동아리를 찾으세요?'
+      ariaLabel='동아리 검색창'
+    />
+  );
+};
+
+export default SearchBox;