feat(web): 비로그인 홈 학교 검색 UI 추가

apps/web/src/app/(home)/_ui/HomeActionLinks/index.tsx

@@ -0,0 +1,58 @@
+import Link from "next/link";
+
+import { IconIdCard, IconMagnifyingGlass, IconMuseum, IconPaper } from "@/public/svgs/home";
+
+const HomeActionLinks = () => {
+  return (
+    <div className="flex flex-col gap-2.5 px-5 py-3.5">
+      <div className="flex gap-2">
+        <Link className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-bg-accent-blue p-2.5" href="/university/search">
+          <div className="flex flex-col">
+            <span className="text-secondary typo-bold-5">학교 검색하기</span>
+            <span className="text-k-700 typo-medium-4">모든 학교 목록을 확인해보세요</span>
+          </div>
+          <div className="flex justify-end">
+            <IconMagnifyingGlass />
+          </div>
+        </Link>
+        <Link className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-bg-accent-sky p-2.5" href="/university/score">
+          <div className="flex flex-col">
+            <span className="text-sub-a typo-bold-5">성적 입력하기</span>
+            <span className="text-k-700 typo-medium-4">성적을 입력해보세요</span>
+          </div>
+          <div className="flex justify-end">
+            <IconPaper />
+          </div>
+        </Link>
+      </div>
+      <div className="flex gap-2">
+        <Link
+          className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-bg-accent-orange p-2.5"
+          href="/university/application/apply"
+        >
+          <div className="flex flex-col">
+            <span className="text-accent-custom-orange typo-bold-5">학교 지원하기</span>
+            <span className="text-k-700 typo-medium-4">학교를 지원해주세요</span>
+          </div>
+          <div className="flex justify-end">
+            <IconMuseum />
+          </div>
+        </Link>
+        <Link
+          className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-bg-accent-green p-2.5"
+          href="/university/application"
+        >
+          <div className="flex flex-col">
+            <span className="text-accent-custom-green typo-bold-5">지원자 현황 확인</span>
+            <span className="text-k-700 typo-medium-4">경쟁률을 바로 분석해드려요</span>
+          </div>
+          <div className="flex justify-end">
+            <IconIdCard />
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default HomeActionLinks;

apps/web/src/app/(home)/_ui/HomeEntrySection/index.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import useAuthStore from "@/lib/zustand/useAuthStore";
+import HomeActionLinks from "../HomeActionLinks";
+import HomeUniversitySearchSection from "../HomeUniversitySearchSection";
+import HomeEntrySectionSkeleton from "./skeleton";
+
+const HomeEntrySection = () => {
+  const { isAuthenticated, isInitialized } = useAuthStore();
+
+  if (!isInitialized) {
+    return <HomeEntrySectionSkeleton />;
+  }
+
+  return isAuthenticated ? <HomeActionLinks /> : <HomeUniversitySearchSection />;
+};
+
+export default HomeEntrySection;

apps/web/src/app/(home)/_ui/HomeEntrySection/skeleton/index.tsx

@@ -0,0 +1,20 @@
+const HomeEntrySectionSkeleton = () => (
+  <div className="px-5 py-5">
+    <div className="mb-4 h-7 w-32 animate-pulse rounded bg-k-50" />
+
+    <div className="mb-3 flex gap-2 overflow-x-auto">
+      {[...Array(3)].map((_, index) => (
+        <div key={index} className="h-9 w-16 shrink-0 animate-pulse rounded-full bg-k-50" />
+      ))}
+    </div>
+
+    <div className="flex flex-col gap-2">
+      <div className="h-[52px] animate-pulse rounded-lg bg-k-50" />
+      <div className="h-[52px] animate-pulse rounded-lg bg-k-50" />
+    </div>
+
+    <div className="mt-3 h-14 animate-pulse rounded-lg bg-k-50" />
+  </div>
+);
+
+export default HomeEntrySectionSkeleton;

apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/_hooks/useHomeUniversitySearch.ts

@@ -0,0 +1,69 @@
+import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
+
+import { HOME_UNIVERSITY_LIST } from "@/constants/university";
+import type { HomeUniversitySlug } from "@/types/university";
+import {
+  buildUniversitySearchQuery,
+  getCountryOptionsByIndex,
+  getLanguageTestOptions,
+  getVisibleCountrySelectIndexes,
+} from "@/utils/universitySearchQuery";
+
+const MAX_COUNTRY_SELECT_COUNT = 3;
+
+const createEmptyCountries = () => Array<string>(MAX_COUNTRY_SELECT_COUNT).fill("");
+
+const useHomeUniversitySearch = () => {
+  const router = useRouter();
+  const [selectedHomeUniversitySlug, setSelectedHomeUniversitySlug] = useState<HomeUniversitySlug>(
+    HOME_UNIVERSITY_LIST[0].slug,
+  );
+  const [languageTestType, setLanguageTestType] = useState("");
+  const [countries, setCountries] = useState<string[]>(createEmptyCountries);
+
+  const languageOptions = useMemo(() => getLanguageTestOptions(), []);
+
+  const visibleCountryCount = useMemo(() => {
+    return getVisibleCountrySelectIndexes(countries, MAX_COUNTRY_SELECT_COUNT).length;
+  }, [countries]);
+
+  const countryOptionsByIndex = useMemo(
+    () => getCountryOptionsByIndex({ countries, visibleCount: visibleCountryCount }),
+    [countries, visibleCountryCount],
+  );
+
+  const handleCountryChange = (index: number, value: string) => {
+    setCountries((prevCountries) =>
+      prevCountries.map((country, countryIndex) => {
+        if (countryIndex < index) return country;
+        if (countryIndex === index) return value;
+        return value ? country : "";
+      }),
+    );
+  };
+
+  const submitSearch = () => {
+    const queryString = buildUniversitySearchQuery({
+      languageTestType,
+      countryCodes: countries,
+    }).toString();
+
+    router.push(`/university/${selectedHomeUniversitySlug}${queryString ? `?${queryString}` : ""}`);
+  };
+
+  return {
+    homeUniversities: HOME_UNIVERSITY_LIST,
+    selectedHomeUniversitySlug,
+    setSelectedHomeUniversitySlug,
+    languageTestType,
+    setLanguageTestType,
+    countries,
+    languageOptions,
+    countryOptionsByIndex,
+    handleCountryChange,
+    submitSearch,
+  };
+};
+
+export default useHomeUniversitySearch;

apps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import clsx from "clsx";
+
+import CustomDropdown from "@/components/search/CustomDropdown";
+import { IconHatColor, IconHatGray, IconLocationColor, IconLocationGray } from "@/public/svgs/search";
+import useHomeUniversitySearch from "./_hooks/useHomeUniversitySearch";
+
+const HomeUniversitySearchSection = () => {
+  const {
+    homeUniversities,
+    selectedHomeUniversitySlug,
+    setSelectedHomeUniversitySlug,
+    languageTestType,
+    setLanguageTestType,
+    countries,
+    languageOptions,
+    countryOptionsByIndex,
+    handleCountryChange,
+    submitSearch,
+  } = useHomeUniversitySearch();
+
+  return (
+    <section className="px-5 py-5">
+      <h2 className="mb-4 text-k-900 typo-bold-1">파견 학교 찾기</h2>
+
+      <div className="mb-3 flex gap-2 overflow-x-auto">
+        {homeUniversities.map((university) => {
+          const isSelected = university.slug === selectedHomeUniversitySlug;
+
+          return (
+            <button
+              key={university.slug}
+              type="button"
+              onClick={() => setSelectedHomeUniversitySlug(university.slug)}
+              className={clsx(
+                "min-w-fit whitespace-nowrap rounded-full border px-4 py-2 transition-colors typo-medium-2",
+                isSelected
+                  ? "border-primary bg-primary-100 text-primary-900"
+                  : "border-k-50 bg-k-50 text-k-300 hover:border-k-100 hover:bg-k-100",
+              )}
+              aria-pressed={isSelected}
+            >
+              {university.shortName}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <CustomDropdown
+          value={languageTestType}
+          onChange={setLanguageTestType}
+          placeholder="어학"
+          placeholderSelect="선택"
+          placeholderIcon={<IconHatGray />}
+          icon={<IconHatColor />}
+          options={languageOptions}
+        />
+
+        {countryOptionsByIndex.map((countryOptions, index) => {
+          return (
+            <CustomDropdown
+              key={index}
+              value={countries[index]}
+              onChange={(value) => handleCountryChange(index, value)}
+              placeholder="관심있는 나라"
+              placeholderSelect="나라"
+              placeholderIcon={<IconLocationGray />}
+              icon={<IconLocationColor />}
+              options={countryOptions}
+            />
+          );
+        })}
+      </div>
+
+      <button
+        type="button"
+        onClick={submitSearch}
+        className="mt-3 w-full rounded-lg bg-primary px-4 py-4 text-center text-k-0 transition-colors typo-sb-9 hover:bg-primary-600"
+      >
+        학교 검색하기
+      </button>
+    </section>
+  );
+};
+
+export default HomeUniversitySearchSection;

apps/web/src/app/(home)/_ui/UniversityList/_hooks/useHomeUniversityList.ts

@@ -0,0 +1,50 @@
+import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
+
+import { HOME_UNIVERSITY_LIST, isMatchedHomeUniversityName } from "@/constants/university";
+import { type AllRegionsUniversityList, type ListUniversity, RegionEnumExtend } from "@/types/university";
+
+const ALL_HOME_UNIVERSITY_CHOICE = "전체";
+const PREVIEW_UNIVERSITY_COUNT = 3;
+
+const useHomeUniversityList = (allRegionsUniversityList: AllRegionsUniversityList) => {
+  const [selectedHomeUniversity, setSelectedHomeUniversity] = useState<string | null>(ALL_HOME_UNIVERSITY_CHOICE);
+  const handleHomeUniversityChange: Dispatch<SetStateAction<string | null>> = (nextHomeUniversity) => {
+    setSelectedHomeUniversity((prevHomeUniversity) => {
+      const resolvedHomeUniversity =
+        typeof nextHomeUniversity === "function" ? nextHomeUniversity(prevHomeUniversity) : nextHomeUniversity;
+
+      return resolvedHomeUniversity ?? ALL_HOME_UNIVERSITY_CHOICE;
+    });
+  };
+  const homeUniversityChoices = useMemo(
+    () => [ALL_HOME_UNIVERSITY_CHOICE, ...HOME_UNIVERSITY_LIST.map((university) => university.shortName)],
+    [],
+  );
+
+  const allUniversities = allRegionsUniversityList[RegionEnumExtend.ALL] ?? [];
+  const selectedUniversityInfo = useMemo(
+    () => HOME_UNIVERSITY_LIST.find((university) => university.shortName === selectedHomeUniversity),
+    [selectedHomeUniversity],
+  );
+
+  const universities: ListUniversity[] = useMemo(() => {
+    if (!selectedUniversityInfo) return allUniversities;
+
+    return allUniversities.filter((university) =>
+      isMatchedHomeUniversityName(university.homeUniversityName, selectedUniversityInfo.name),
+    );
+  }, [allUniversities, selectedUniversityInfo]);
+
+  const previewUniversities = useMemo(() => universities.slice(0, PREVIEW_UNIVERSITY_COUNT), [universities]);
+  const moreHref = selectedUniversityInfo ? `/university/${selectedUniversityInfo.slug}` : "/university";
+
+  return {
+    selectedHomeUniversity,
+    setSelectedHomeUniversity: handleHomeUniversityChange,
+    homeUniversityChoices,
+    previewUniversities,
+    moreHref,
+  };
+};
+
+export default useHomeUniversityList;

apps/web/src/app/(home)/_ui/UniversityList/index.tsx

@@ -1,50 +1,43 @@
 "use client";
 
 import Link from "next/link";
-import { useMemo } from "react";
 
 import ButtonTab from "@/components/ui/ButtonTab";
 import UniversityCards from "@/components/university/UniversityCards";
 import { IconDirectionRight } from "@/public/svgs/mentor";
 
-import { type AllRegionsUniversityList, type ListUniversity, RegionEnumExtend } from "@/types/university";
-import useRegionHandler from "./_hooks/useRegionHandler";
+import type { AllRegionsUniversityList } from "@/types/university";
+import useHomeUniversityList from "./_hooks/useHomeUniversityList";
 
 interface UniversityListProps {
   allRegionsUniversityList: AllRegionsUniversityList;
 }
 
 const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => {
-  const { region, handleRegionChange } = useRegionHandler();
-  const choices = Object.values(RegionEnumExtend);
+  const { selectedHomeUniversity, setSelectedHomeUniversity, homeUniversityChoices, previewUniversities, moreHref } =
+    useHomeUniversityList(allRegionsUniversityList);
 
-  const universities: ListUniversity[] = useMemo(
-    () => allRegionsUniversityList[region || RegionEnumExtend.ALL] ?? [],
-    [allRegionsUniversityList, region],
-  );
-  // 홈 카드 영역에는 최대 3개만 노출
-  const previewUniversities: ListUniversity[] = useMemo(() => universities.slice(0, 3), [universities]);
   return (
     <div className="flex flex-col gap-2">
       <div className="flex justify-between">
         <span className="text-k-700 typo-sb-5">전체 학교 리스트</span>
-        <Link href="/university">
+        <Link href={moreHref}>
           <span className="flex items-center gap-1 text-k-500 typo-sb-9">
             더보기
             <IconDirectionRight className="h-4 w-4" />
           </span>
         </Link>
       </div>
       <ButtonTab
-        choices={choices}
-        choice={region}
-        setChoice={handleRegionChange}
+        choices={homeUniversityChoices}
+        choice={selectedHomeUniversity}
+        setChoice={setSelectedHomeUniversity}
         color={{
           activeBtn: "bg-primary-100",
           deactiveBtn: "bg-k-50",
           activeBtnFont: "text-primary",
           deactiveBtnFont: "text-k-300",
-          background: "white",
+          background: "bg-white",
         }}
       />
       <UniversityCards colleges={previewUniversities} showCapacity={false} />