refactor(ui): SearchField 공통 스타일 분리 및 종속성 제거

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';

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;

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;