feat: 학교 검색 페이지 /search 추가 (#194)

* remove: 레거시 파일 삭제

* feat: SearchPage 추가

* feat: 메인 홈 검색 기능 리다이렉트 변경

* feat: SearchContent 추가, 하위 컴포넌트 추가

SearchContent 분리의 이유: use client 사용을 위해

* design: UniversitySearchInput 디자인 수정

* fix: import 오류 수정

* feat: UniversityRegionTabs 구현, SearchContent 리팩토링

* feat: 학교 검색 버튼 변경

* feat: UniversityFfilterSection 다중 어학/국가 지원하게 변경

* feat: svg 추가

* feat: 어학/관심있는 나라 디자인 추가

* feat: search UniversityFilterSection의 어학성적 선택부분 수정

* feat: UniversityFilterSection 나라 디자인 추가

* feat: 이전 나라가 선택되어야 다음 나라를 선택할 수 있게 변경

* refactor: UniversitySearchInput ref 방식으로 전환하여 부모 컴포넌트 리렌더링 막기

* refactor: 어학/국가 전달을 핸들러 함수로 추상화

* refactor: 이름 통일

* refactor: changeRegion 추상화

* refactor: regions를 바깥으로 분리

Author: wibaek

public/svgs/search/down-arrow.svg

@@ -0,0 +1,8 @@
+import IconDownArrow from "./down-arrow.svg";
+import IconHatColor from "./hat-color.svg";
+import IconHatGray from "./hat-gray.svg";
+import IconLocationColor from "./location-color.svg";
+import IconLocationGray from "./location-gray.svg";
+import IconSearch from "./search.svg";
+
+export { IconSearch, IconHatColor, IconHatGray, IconLocationColor, IconLocationGray, IconDownArrow };

public/svgs/search/hat-color.svg

@@ -62,7 +62,7 @@ const Home = ({ newsList }: HomeProps) => {
 
       <div className="flex flex-col gap-2.5 px-5 py-3.5">
         <div className="flex gap-[7px]">
-          <Link className="flex h-[102px] flex-1 flex-col gap-2 rounded-lg bg-[#F0F5FF] p-2.5" href="/university">
+          <Link className="flex h-[102px] flex-1 flex-col gap-2 rounded-lg bg-[#F0F5FF] p-2.5" href="/search">
             <div className="flex flex-col">
               <span className="text-sm font-bold text-secondary-900">학교 검색하기</span>
               <span className="text-[11px] font-medium leading-[14px] text-k-700">모든 학교 목록을 확인해보세요</span>

public/svgs/search/hat-gray.svg

@@ -0,0 +1,85 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+import BlockBtn from "@/components/button/BlockBtn";
+import UniversityFilterSection from "@/components/search/UniversityFilterSection";
+import UniversityRegionTabs from "@/components/search/UniversityRegionTabs";
+import UniversitySearchInput from "@/components/search/UniversitySearchInput";
+
+import { LanguageTestEnum } from "@/types/score";
+import { RegionKo } from "@/types/university";
+
+export interface RegionOption {
+  label: string;
+  value: RegionKo;
+}
+
+const regions: RegionOption[] = [
+  { label: "유럽권", value: "유럽권" },
+  { label: "미주권", value: "미주권" },
+  { label: "아시아권", value: "아시아권" },
+];
+
+const SearchContent = () => {
+  // 권역 필터링
+  const searchQueryRef = useRef<HTMLInputElement>(null);
+  const [region, setRegion] = useState<RegionKo | null>(null);
+
+  const changeRegion = (value: string | null) => {
+    if (value === null) {
+      setRegion(null);
+      return;
+    }
+    if (!["유럽권", "미주권", "아시아권"].includes(value)) {
+      console.error("유효하지 않은 지역 선택");
+    }
+    setRegion(value as RegionKo);
+  };
+
+  // 어학/국가 필터링
+  const [language, setLanguage] = useState<string>("");
+  const [countries, setCountries] = useState<string[]>(["", "", ""]);
+
+  const changeLanguage = (newLanguage: string) => {
+    if (!Object.values(LanguageTestEnum).includes(newLanguage as LanguageTestEnum)) {
+      console.error("유효하지 않은 어학 성적 선택");
+    }
+    setLanguage(newLanguage);
+  };
+
+  const changeCountry = (index: number, newCountry: string) => {
+    setCountries((prevCountries) => {
+      // TODO: 이후 나라 체크 로직 추가하기
+      const updatedCountries = [...prevCountries];
+      updatedCountries[index] = newCountry;
+      return updatedCountries;
+    });
+  };
+
+  const handleSearch = () => {
+    const query = searchQueryRef.current?.value ?? "";
+    console.log({ query, region, language, countries });
+  };
+
+  return (
+    <div className="flex flex-col gap-4 px-5 pb-8">
+      <UniversitySearchInput ref={searchQueryRef} placeholder="해외 파견 학교를 검색하세요." />
+
+      <UniversityRegionTabs regions={regions} region={region} changeRegion={changeRegion} />
+
+      <UniversityFilterSection
+        language={language}
+        changeLanguage={changeLanguage}
+        languageOptions={Object.values(LanguageTestEnum)}
+        countries={countries}
+        changeCountry={changeCountry}
+        countryOptions={["오스트레일리아", "체코", "캐나다"]}
+      />
+
+      <BlockBtn onClick={handleSearch}>학교 검색</BlockBtn>
+    </div>
+  );
+};
+
+export default SearchContent;

public/svgs/search/index.ts

@@ -0,0 +1,29 @@
+import { Metadata } from "next";
+
+import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
+
+import SearchContent from "./SearchContent";
+
+export const metadata: Metadata = {
+  title: "파견학교 검색",
+};
+
+const SearchPage = () => {
+  return (
+    <>
+      <TopDetailNavigation title="파견학교 검색" />
+      <div>
+        <div className="px-5 py-6">
+          <span className="text-[22px] font-bold leading-normal text-k-900">
+            오직 나를 위한
+            <br />
+            맞춤 파견 학교 찾기
+          </span>
+        </div>
+        <SearchContent />
+      </div>
+    </>
+  );
+};
+
+export default SearchPage;