Merge pull request #397 from solid-connection/feat/univ-page

fix :  대학 페이지 스크롤 및 검색 로직 수정 및 멘토 페이지 무한 스피너 버그 해결

Author: manNomi

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

@@ -47,7 +47,7 @@ const UniversityList = ({ allRegionsUniversityList }: UniversityListProps) => {
           background: "white",
         }}
       />
-      <UniversityCards colleges={previewUniversities} showCapacity={false} enableVirtualization={false} />
+      <UniversityCards colleges={previewUniversities} showCapacity={false} />
     </div>
   );
 };

apps/web/src/app/university/SearchBar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -27,6 +27,7 @@ interface SearchBarProps {
 // --- 폼 로직을 관리하는 부모 컴포넌트 ---
 const SearchForm = ({ initText }: SearchBarProps) => {
   const router = useRouter();
+  const pathname = usePathname();
 
   const {
     register,
@@ -48,12 +49,13 @@ const SearchForm = ({ initText }: SearchBarProps) => {
 
     const queryString = queryParams.toString();
 
-    router.push(`/university?${queryString}`);
+    // 현재 경로에서 쿼리 파라미터만 업데이트
+    router.push(`${pathname}?${queryString}`);
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="w-full">
-      <div className="relative mb-2">
+    <form onSubmit={handleSubmit(onSubmit)} className="sticky top-14 z-10 w-full bg-white pb-2">
+      <div className="relative">
         <input
           type="text"
           placeholder={"대학명을 검색해보세요..."}

apps/web/src/app/university/list/[homeUniversityName]/SearchResultsContent.tsx

@@ -83,7 +83,7 @@ const SearchResultsContentInner = ({ homeUniversityName }: SearchResultsContentI
   }, [searchParams]);
 
   return (
-    <div className="pt-4">
+    <div>
       <SearchBar initText={searchText || undefined} />
 
       {/* 지역 필터 */}

apps/web/src/app/university/list/[homeUniversityName]/page.tsx

@@ -49,9 +49,7 @@ const UniversityListPage = async ({ params }: PageProps) => {
   return (
     <>
       <TopDetailNavigation title={`${universityName} 파견학교`} />
-      <div className="mt-14 w-full px-5">
-        <SearchResultsContent homeUniversityName={universityName} />
-      </div>
+      <SearchResultsContent homeUniversityName={universityName} />
     </>
   );
 };

apps/web/src/app/university/page.tsx

@@ -19,12 +19,9 @@ const UniversityOnboardingPage = () => {
   return (
     <>
       <TopDetailNavigation title="대학교 선택" />
-      <div className="mt-14 w-full px-5 py-6">
-        <h1 className="mb-2 text-k-800 typo-bold-1">파견 대학교를 선택해주세요</h1>
-        <p className="mb-6 text-k-500 typo-medium-4">
-          소속 대학교를 선택하면 해당 대학교의 교환학생 파견 정보를 확인할 수 있습니다.
-        </p>
-
+      <div className="mt-14 w-full px-5">
+        <h1 className="mb-2 text-k-800 typo-bold-1">출신 학교 정보를 선택해주세요</h1>
+        <p className="mb-6 text-k-500 typo-medium-4">해당 학교에서 제공되는 교환학생 파견 정보를 확인할 수 있습니다.</p>
         <div className="flex flex-col gap-2.5">
           {HOME_UNIVERSITIES.map((university) => (
             <Link key={university.slug} href={`/university/list/${university.slug}`} className="block">

apps/web/src/components/university/UniversityCards/index.tsx

@@ -1,9 +1,6 @@
 "use client";
 
-import { useVirtualizer } from "@tanstack/react-virtual";
-
 import clsx from "clsx";
-import { useRef } from "react";
 
 import type { ListUniversity } from "@/types/university";
 import UniversityCard from "../../ui/UniverSityCard";
@@ -13,69 +10,16 @@ type UniversityCardsProps = {
   style?: React.CSSProperties;
   className?: string;
   showCapacity?: boolean;
-  enableVirtualization?: boolean;
 };
 
-const ITEM_HEIGHT = 101;
-
-const UniversityCards = ({
-  colleges,
-  style,
-  className,
-  showCapacity = true,
-  enableVirtualization = true,
-}: UniversityCardsProps) => {
-  // 훅은 항상 컴포넌트 상단에서 호출해야 함 (React Hooks 규칙)
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  const virtualizer = useVirtualizer({
-    count: colleges.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => ITEM_HEIGHT,
-    overscan: 5,
-  });
-
-  // 가상화가 비활성화된 경우 일반 렌더링
-  if (!enableVirtualization) {
-    return (
-      <div className={clsx("flex flex-col gap-2.5", className)} style={style}>
-        {colleges.map((college) => (
-          <div key={college.id} className="pb-2.5">
-            <UniversityCard university={college} showCapacity={showCapacity} />
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  // 가상화 사용
+const UniversityCards = ({ colleges, style, className, showCapacity = true }: UniversityCardsProps) => {
   return (
-    <div ref={parentRef} className={clsx("h-[calc(100vh-200px)] overflow-auto", className)} style={style}>
-      <div
-        style={{
-          height: `${virtualizer.getTotalSize()}px`,
-          width: "100%",
-          position: "relative",
-        }}
-      >
-        {virtualizer.getVirtualItems().map((virtualItem) => (
-          <div
-            key={colleges[virtualItem.index].id}
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: `${virtualItem.size}px`,
-              transform: `translateY(${virtualItem.start}px)`,
-            }}
-          >
-            <div className="pb-2.5">
-              <UniversityCard university={colleges[virtualItem.index]} showCapacity={showCapacity} />
-            </div>
-          </div>
-        ))}
-      </div>
+    <div className={clsx("flex flex-col gap-2.5", className)} style={style}>
+      {colleges.map((college) => (
+        <div key={college.id} className="pb-2.5">
+          <UniversityCard university={college} showCapacity={showCapacity} />
+        </div>
+      ))}
     </div>
   );
 };

apps/web/src/lib/zustand/useAuthStore.ts

@@ -63,6 +63,12 @@ const useAuthStore = create<AuthState>()(
         accessToken: state.accessToken,
         isAuthenticated: state.isAuthenticated,
       }),
+      onRehydrateStorage: () => (state) => {
+        // hydration 완료 후 isInitialized를 true로 설정
+        if (state) {
+          state.isInitialized = true;
+        }
+      },
     },
   ),
 );