Update : 학과 검색 api 연결

src/components/home/HomeSearch.tsx

@@ -7,17 +7,30 @@ import { MajorData } from "../../types/Types";
 
 const HomeSearch = () => {
   const [majorData, setMajorData] = useState<MajorData[]>([]);
+  const [searchKeyword, setSearchKeyword] = useState<string>("");
   const navigate = useNavigate();
 
   useEffect(() => {
     const fetchMajorData = async () => {
-      const data = await fetchNoMajorData("/majors/");
+      let endpoint = "/majors/";
+      if (searchKeyword) {
+        endpoint = `/majors/search/?keyword=${searchKeyword}`;
+      }
+      const data = await fetchNoMajorData(endpoint);
       if (data) {
         setMajorData(data);
       }
     };
+
     fetchMajorData();
-  }, []);
+  }, [searchKeyword]);
+
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setSearchKeyword(event.target.value);
+  };
+
   const goMain = (majorId: number) => {
     localStorage.setItem("selected_major_id", majorId.toString());
     navigate("/main");
@@ -26,19 +39,27 @@ const HomeSearch = () => {
     <div className="home-search-container">
       <h1>나에게 맞는 학과 게시판 찾아보기</h1>
       <div className="home-search-box">
-        <input type="text" placeholder="학과, 전공을 검색하세요." />
+        <input
+          type="text"
+          placeholder="학과, 전공을 검색하세요."
+          onChange={handleSearchInputChange}
+        />
         <SearchIcon />
       </div>
-      {majorData.map((item, index) => (
-        <div
-          key={index}
-          className="home-major-list"
-          onClick={() => goMain(item.id)}
-        >
-          <p>{item.major_category_name}</p>
-          <span>{item.major}</span>
-        </div>
-      ))}
+      {majorData.length > 0 ? (
+        majorData.map((item, index) => (
+          <div
+            key={index}
+            className="home-major-list"
+            onClick={() => goMain(item.id)}
+          >
+            <p>{item.major_category_name}</p>
+            <span>{item.major}</span>
+          </div>
+        ))
+      ) : (
+        <></>
+      )}
     </div>
   );
 };