Merge pull request #250 from manNomi/refactor/applicant

Hot fix  : applicant 페이지

Author: manNomi

src/api/applications/client/queryKeys.ts

@@ -0,0 +1,3 @@
+export enum QueryKeys {
+  competitorsApplicationList = "competitorsApplicationList",
+}

src/api/applications/client/useGetCompetitorsApplicationList.ts

@@ -0,0 +1,38 @@
+import { AxiosError, AxiosResponse } from "axios";
+
+import { axiosInstance } from "@/utils/axiosInstance";
+
+import { QueryKeys } from "./queryKeys";
+
+import { ApplicationListResponse } from "@/types/application";
+
+// UseQueryResult는 useQuery의 반환 타입을 명시할 때 유용합니다.
+import { UseQueryOptions, UseQueryResult, useQuery } from "@tanstack/react-query";
+
+export const getCompetitorsApplicationList = (): Promise<AxiosResponse<ApplicationListResponse>> =>
+  axiosInstance.get("/applications/competitors");
+
+// 커스텀 훅의 props 타입 정의를 개선하여 queryKey와 queryFn을 제외시킵니다.
+type UseGetCompetitorsApplicationListOptions = Omit<
+  UseQueryOptions<
+    AxiosResponse<ApplicationListResponse>, // queryFn이 반환하는 원본 데이터 타입
+    AxiosError<{ message: string }>, // 에러 타입
+    ApplicationListResponse // select를 통해 최종적으로 반환될 데이터 타입
+  >,
+  "queryKey" | "queryFn" // 훅 내부에서 지정하므로 props에서는 제외
+>;
+
+const useGetCompetitorsApplicationList = (
+  props?: UseGetCompetitorsApplicationListOptions,
+): UseQueryResult<ApplicationListResponse, AxiosError<{ message: string }>> => {
+  // 반환 타입 명시
+  return useQuery({
+    queryKey: [QueryKeys.competitorsApplicationList],
+    queryFn: getCompetitorsApplicationList,
+    staleTime: 1000 * 60 * 5,
+    select: (response) => response.data,
+    ...props,
+  });
+};
+
+export default useGetCompetitorsApplicationList;

src/api/applications/client/usePostSubmitApplication.ts

@@ -1,10 +1,12 @@
 import { useRouter } from "next/navigation";
 
-import { AxiosResponse } from "axios";
+import { AxiosError, AxiosResponse } from "axios";
 
 import { axiosInstance } from "@/utils/axiosInstance";
 
 import { useMutation } from "@tanstack/react-query";
+// 타입 경로
+import { UseMutationOptions, UseMutationResult } from "@tanstack/react-query";
 
 // API 함수 경로
 export interface UseSubmitApplicationResponse {
@@ -25,32 +27,32 @@ export const postSubmitApplication = (
   request: UseSubmitApplicationRequest,
 ): Promise<AxiosResponse<UseSubmitApplicationResponse>> => axiosInstance.post("/applications", request);
 
-// 타입 경로
-
-const usePostSubmitApplication = () => {
-  const router = useRouter();
-
-  return useMutation({
+const usePostSubmitApplication = (
+  props?: UseMutationOptions<
+    AxiosResponse<UseSubmitApplicationResponse>, // TData
+    AxiosError<{ message: string }>, // TError
+    UseSubmitApplicationRequest, // TVariables
+    unknown // TContext
+  >,
+): UseMutationResult<
+  AxiosResponse<UseSubmitApplicationResponse>,
+  AxiosError<{ message: string }>,
+  UseSubmitApplicationRequest,
+  unknown
+> => {
+  return useMutation<
+    AxiosResponse<UseSubmitApplicationResponse>, // TData: 성공 시 반환 타입
+    AxiosError<{ message: string }>, // TError: 에러 타입
+    UseSubmitApplicationRequest // TVariables: 요청 body 타입
+  >({
+    ...props,
     // mutationFn: API 요청을 수행할 비동기 함수를 지정합니다.
     mutationFn: (request: UseSubmitApplicationRequest) => postSubmitApplication(request),
 
-    // onSuccess: API 요청이 성공했을 때 실행할 콜백 함수입니다.
-    onSuccess: (data) => {
-      console.log("지원이 성공적으로 완료되었습니다.", data);
-      alert("지원이 완료되었습니다.");
-
-      // 성공 후, 관련된 다른 데이터들을 최신 상태로 업데이트하고 싶을 때 사용합니다.
-      // 예를 들어, '내 지원 목록' 데이터를 다시 불러옵니다.
-      // queryClient.invalidateQueries({ queryKey: ['myApplications'] });
-
-      // 지원 완료 페이지로 이동합니다.
-      router.push("/application/complete");
-    },
-
     // onError: API 요청이 실패했을 때 실행할 콜백 함수입니다.
     onError: (error) => {
-      console.error("지원 중 오류가 발생했습니다.", error);
-      alert("지원 중 오류가 발생했습니다. 다시 시도해주세요.");
+      const errorMessage = error?.response?.data?.message;
+      alert(errorMessage || "지원 중 오류가 발생했습니다. 다시 시도해주세요.");
     },
   });
 };

src/api/university/client/useGetUniversitySearchByText.ts

@@ -1,13 +1,13 @@
+import { useMemo } from "react";
+
 import { AxiosResponse } from "axios";
 
 import { publicAxiosInstance } from "@/utils/axiosInstance";
 
 import { QueryKeys } from "./queryKey";
 
-// QueryKeys에 universitySearchText 추가 필요
 import { ListUniversity } from "@/types/university";
 
-// ListUniversity 타입 경로
 import { useQuery } from "@tanstack/react-query";
 
 // --- 타입 정의 ---
@@ -16,26 +16,54 @@ interface UniversitySearchTextResponse {
 }
 
 // --- API 호출 함수 ---
-const getUniversitySearchByText = async (value: string): Promise<UniversitySearchTextResponse> => {
+const getAllUniversitiesApi = async (): Promise<UniversitySearchTextResponse> => {
   const response: AxiosResponse<UniversitySearchTextResponse> = await publicAxiosInstance.get(
     "/univ-apply-infos/search/text",
     {
-      params: { value },
+      params: { value: "" }, // 항상 빈 값으로 호출
     },
   );
   return response.data;
 };
 
-// --- 커스텀 훅 ---
-const useGetUniversitySearchByText = (searchValue: string) => {
-  const staleTime = searchValue === "" ? Infinity : 1000 * 60 * 5;
-
-  return useQuery<UniversitySearchTextResponse, Error, ListUniversity[]>({
-    queryKey: [QueryKeys.universitySearchText, searchValue],
-    queryFn: () => getUniversitySearchByText(searchValue),
-    staleTime,
+const useUniversitySearch = (searchValue: string) => {
+  // 1. 모든 대학 데이터를 한 번만 가져와 'Infinity' 캐시로 저장합니다.
+  const {
+    data: allUniversities, // 모든 대학 목록
+    isLoading,
+    isError,
+    error,
+  } = useQuery<UniversitySearchTextResponse, Error, ListUniversity[]>({
+    queryKey: [QueryKeys.universitySearchText], // "모든 대학"을 위한 고유 키
+    queryFn: getAllUniversitiesApi,
+    staleTime: Infinity, // 한번 가져오면 절대 다시 요청하지 않음
+    gcTime: Infinity, // 캐시가 절대 삭제되지 않음 (선택 사항)
     select: (data) => data.univApplyInfoPreviews,
   });
-};
 
-export default useGetUniversitySearchByText;
+  // 2. 검색어가 변경될 때만 캐시된 데이터를 필터링합니다.
+  const filteredUniversities = useMemo(() => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+
+    if (!normalizedSearchValue) {
+      return allUniversities; // 검색어가 없으면 전체 목록 반환
+    }
+
+    // allUniversities가 아직 로드되지 않았으면 빈 배열 반환
+    if (!allUniversities) {
+      return [];
+    }
+
+    // 대학 이름(koreanName)에 검색어가 포함되어 있는지 확인하여 필터링
+    return allUniversities.filter((university) => university.koreanName.toLowerCase().includes(normalizedSearchValue));
+  }, [allUniversities, searchValue]); // allUniversities나 searchValue가 바뀔 때만 재계산
+
+  return {
+    data: filteredUniversities, // 필터링된 결과
+    isLoading, // 초기 데이터 로딩 상태
+    isError,
+    error,
+    totalCount: allUniversities?.length || 0, // 전체 대학 수 (필요시 사용)
+  };
+};
+export default useUniversitySearch;

src/app/(home)/page.tsx

@@ -57,7 +57,10 @@ const HomePage = async () => {
           </Link>
         </div>
         <div className="flex gap-2">
-          <Link className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-[#FFF3E5] p-2.5" href="/application/apply">
+          <Link
+            className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-[#FFF3E5] p-2.5"
+            href="/university/application/apply"
+          >
             <div className="flex flex-col">
               <span className="text-sm font-bold text-[#FF7300]">학교 지원하기</span>
               <span className="text-xs font-medium leading-tight text-k-700">학교를 지원해주세요</span>
@@ -66,7 +69,10 @@ const HomePage = async () => {
               <IconMuseum />
             </div>
           </Link>
-          <Link className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-[#E9F7EC] p-2.5" href="/application">
+          <Link
+            className="h-26 flex flex-1 flex-col gap-2 rounded-lg bg-[#E9F7EC] p-2.5"
+            href="/university/application"
+          >
             <div className="flex flex-col">
               <span className="text-sm font-bold text-[#15A861]">지원자 현황 확인</span>
               <span className="text-xs font-medium leading-tight text-k-700">경쟁률을 바로 분석해드려요</span>