Merge pull request #247 from manNomi/refactor/applicant

Refactor/applicant

Author: manNomi

src/api/applications/client/usePostSubmitApplication.ts

@@ -0,0 +1,58 @@
+import { useRouter } from "next/navigation";
+
+import { AxiosResponse } from "axios";
+
+import { axiosInstance } from "@/utils/axiosInstance";
+
+import { useMutation } from "@tanstack/react-query";
+
+// API 함수 경로
+export interface UseSubmitApplicationResponse {
+  isSuccess: boolean;
+}
+
+export interface UseSubmitApplicationRequest {
+  gpaScoreId: number;
+  languageTestScoreId: number;
+  universityChoiceRequest: {
+    firstChoiceUniversityId: number | null;
+    secondChoiceUniversityId: number | null;
+    thirdChoiceUniversityId: number | null;
+  };
+}
+
+export const postSubmitApplication = (
+  request: UseSubmitApplicationRequest,
+): Promise<AxiosResponse<UseSubmitApplicationResponse>> => axiosInstance.post("/applications", request);
+
+// 타입 경로
+
+const usePostSubmitApplication = () => {
+  const router = useRouter();
+
+  return useMutation({
+    // 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("지원 중 오류가 발생했습니다. 다시 시도해주세요.");
+    },
+  });
+};
+
+export default usePostSubmitApplication;

src/api/reports/client/usePostReport.ts

@@ -4,14 +4,14 @@ import { AxiosResponse } from "axios";
 
 import { axiosInstance } from "@/utils/axiosInstance";
 
-import { ReasonType } from "@/types/reports";
+import { ReportType } from "@/types/reports";
 
 import { useMutation } from "@tanstack/react-query";
 
 interface UsePostReportsRequest {
   targetType: "POST"; // 지금은 게시글 신고 기능만 존재
   targetId: number; // 신고하려는 리소스의 ID
-  reasonType: ReasonType; // Docs 참고
+  reportType: ReportType; // Docs 참고
 }
 
 const postReports = async (body: UsePostReportsRequest): Promise<void> => {

src/api/score/client/queryKey.ts

@@ -0,0 +1,4 @@
+export enum QueryKeys {
+  myGpaScore = "myGpaScore",
+  myLanguageTestScore = "myLanguageTestScore",
+}

src/api/score/client/useGetMyGpaScore.ts

@@ -0,0 +1,26 @@
+import { AxiosResponse } from "axios";
+
+import { axiosInstance } from "@/utils/axiosInstance";
+
+import { QueryKeys } from "./queryKey";
+
+import { GpaScore } from "@/types/score";
+
+import { useQuery } from "@tanstack/react-query";
+
+interface UseMyGpaScoreResponse {
+  gpaScoreStatusResponseList: GpaScore[];
+}
+
+export const getMyGpaScore = (): Promise<AxiosResponse<UseMyGpaScoreResponse>> => axiosInstance.get("/scores/gpas");
+
+const useGetMyGpaScore = () => {
+  return useQuery({
+    queryKey: [QueryKeys.myGpaScore],
+    queryFn: getMyGpaScore,
+    staleTime: Infinity, // 5분간 캐시
+    select: (data) => data.data.gpaScoreStatusResponseList,
+  });
+};
+
+export default useGetMyGpaScore;

src/api/score/client/useGetMyLanguageTestScore.ts

@@ -0,0 +1,27 @@
+import { AxiosResponse } from "axios";
+
+import { axiosInstance } from "@/utils/axiosInstance";
+
+import { QueryKeys } from "./queryKey";
+
+import { LanguageTestScore } from "@/types/score";
+
+import { useQuery } from "@tanstack/react-query";
+
+interface UseGetMyLanguageTestScoreResponse {
+  languageTestScoreStatusResponseList: LanguageTestScore[];
+}
+
+export const getMyLanguageTestScore = (): Promise<AxiosResponse<UseGetMyLanguageTestScoreResponse>> =>
+  axiosInstance.get("/scores/language-tests");
+
+const useGetMyLanguageTestScore = () => {
+  return useQuery({
+    queryKey: [QueryKeys.myLanguageTestScore],
+    queryFn: getMyLanguageTestScore,
+    staleTime: Infinity,
+    select: (data) => data.data.languageTestScoreStatusResponseList,
+  });
+};
+
+export default useGetMyLanguageTestScore;

src/app/application/ScorePageContent.tsx

@@ -16,7 +16,7 @@ import { REGIONS_KO } from "@/constants/university";
 import { ApplicationListResponse } from "@/types/application";
 import { RegionKo } from "@/types/university";
 
-import { getApplicationListApi, getCompetitorsApplicationListApi } from "@/api/application";
+import { getCompetitorsApplicationListApi } from "@/api/application";
 
 const PREFERENCE_CHOICE: string[] = ["1순위", "2순위", "3순위"];
 

src/app/application/apply/ApplyPageContent.tsx

@@ -1,87 +1,39 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 import ProgressBar from "@/components/ui/ProgressBar";
 
 import ConfirmStep from "./ConfirmStep";
 import DoneStep from "./DoneStep";
+import EmptyGPA from "./EmptyGPA";
 import GpaStep from "./GpaStep";
 import LanguageStep from "./LanguageStep";
 import UniversityStep from "./UniversityStep";
 
-import { GpaScore, LanguageTestScore } from "@/types/score";
 import { ListUniversity } from "@/types/university";
 
-import { postApplicationApi } from "@/api/application";
-import { getMyGpaScoreApi, getMyLanguageTestScoreApi } from "@/api/score";
-import { getUniversityListPublicApi } from "@/api/university";
+import usePostSubmitApplication from "@/api/applications/client/usePostSubmitApplication";
+import useGetMyGpaScore from "@/api/score/client/useGetMyGpaScore";
+import useGetMyLanguageTestScore from "@/api/score/client/useGetMyLanguageTestScore";
+import useGetUniversitySearchByText from "@/api/university/client/useGetUniversitySearchByText";
 
 const ApplyPageContent = () => {
   const router = useRouter();
   const [step, setStep] = useState<number>(1);
 
-  const [languageTestScoreList, setLanguageTestScoreList] = useState<LanguageTestScore[]>([]);
-  const [gpaScoreList, setGpaScoreList] = useState<GpaScore[]>([]);
-  const [universityList, setUniversityList] = useState<ListUniversity[]>([]);
+  const { data: universityList = [] } = useGetUniversitySearchByText("");
+
+  const { data: gpaScoreList = [] } = useGetMyGpaScore();
+  const { data: languageTestScoreList = [] } = useGetMyLanguageTestScore();
+  const { mutate: postSubmitApplication } = usePostSubmitApplication();
 
   const [curLanguageTestScore, setCurLanguageTestScore] = useState<number | null>(null);
   const [curGpaScore, setCurGpaScore] = useState<number | null>(null);
   const [curUniversityList, setCurUniversityList] = useState<number[]>([]);
 
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-
-  useEffect(() => {
-    const fetchAll = async () => {
-      try {
-        const [gpaRes, languageRes, universityRes] = await Promise.all([
-          getMyGpaScoreApi(),
-          getMyLanguageTestScoreApi(),
-          getUniversityListPublicApi(),
-        ]);
-        setGpaScoreList(
-          gpaRes.data.gpaScoreStatusResponseList.filter((score: GpaScore) => score.verifyStatus === "APPROVED"),
-        );
-        setLanguageTestScoreList(
-          languageRes.data.languageTestScoreStatusResponseList.filter(
-            (score: LanguageTestScore) => score.verifyStatus === "APPROVED",
-          ),
-        );
-
-        // 대학명을 지역/나라, 대학명 가나다 순으로 정렬합니다
-        const sortedUniversityList = [...universityRes.data].sort((a, b) => {
-          // 1) region 비교
-          const regionCompare = a.region.localeCompare(b.region);
-          if (regionCompare !== 0) return regionCompare;
-
-          // 2) country 비교
-          const countryCompare = a.country.localeCompare(b.country);
-          if (countryCompare !== 0) return countryCompare;
-
-          // 3) 같은 region, country라면 대학명을 비교(가나다 순)
-          return a.koreanName.localeCompare(b.koreanName);
-        });
-        setUniversityList(sortedUniversityList);
-      } catch (err) {
-        if (err.response) {
-          console.error("Axios response error", err.response);
-          if (err.response.status === 401 || err.response.status === 403) {
-            alert("로그인이 필요합니다");
-            document.location.href = "/login";
-          } else {
-            alert(err.response.data?.message);
-          }
-        } else {
-          console.error("Error", err.message);
-          alert(err.message);
-        }
-      }
-    };
-    fetchAll();
-  }, []);
-
   // 다음 스텝으로 넘어가기
   const goNextStep = () => setStep((prev) => prev + 1);
   // 이전 스텝으로 돌아가기
@@ -108,69 +60,68 @@ const ApplyPageContent = () => {
       return;
     }
 
-    if (isSubmitting) return;
-    setIsSubmitting(true); // TODO: 현재 임시 submit 처리, 이후에 통합 처리 추가
-    try {
-      await postApplicationApi({
-        gpaScoreId: curGpaScore,
-        languageTestScoreId: curLanguageTestScore,
-        universityChoiceRequest: {
-          firstChoiceUniversityId: curUniversityList[0] || null,
-          secondChoiceUniversityId: curUniversityList[1] || null,
-          thirdChoiceUniversityId: curUniversityList[2] || null,
-        },
-      });
-      setStep(99);
-    } catch (err) {
-      alert(err.response.data.message);
-    } finally {
-      setIsSubmitting(false);
-    }
+    postSubmitApplication({
+      gpaScoreId: curGpaScore,
+      languageTestScoreId: curLanguageTestScore,
+      universityChoiceRequest: {
+        firstChoiceUniversityId: curUniversityList[0] || null,
+        secondChoiceUniversityId: curUniversityList[1] || null,
+        thirdChoiceUniversityId: curUniversityList[2] || null,
+      },
+    });
+    setStep(99);
   };
 
+  const isDataExist = gpaScoreList.length === 0 || languageTestScoreList.length === 0;
   return (
     <>
       <TopDetailNavigation title="지원하기" handleBack={goPrevStep} />
-      <div className="px-5">
-        {(step === 1 || step === 2 || step === 3) && <ProgressBar currentStep={step} totalSteps={3} />}
+      <div className="mt-1 px-5">
+        {(step === 1 || step === 2 || step === 3) && <ProgressBar currentStep={step} totalSteps={4} />}
       </div>
-      {step === 1 && (
-        <LanguageStep
-          languageTestScoreList={languageTestScoreList}
-          curLanguageTestScore={curLanguageTestScore}
-          setCurLanguageTestScore={setCurLanguageTestScore}
-          onNext={goNextStep}
-        />
-      )}
-      {step === 2 && (
-        <GpaStep
-          gpaScoreList={gpaScoreList}
-          curGpaScore={curGpaScore}
-          setCurGpaScore={setCurGpaScore}
-          onNext={goNextStep}
-        />
-      )}
-      {step === 3 && (
-        <UniversityStep
-          universityList={universityList}
-          curUniversityList={curUniversityList}
-          setCurUniversityList={setCurUniversityList}
-          onNext={goNextStep}
-        />
-      )}
-      {step === 4 && (
-        <ConfirmStep
-          languageTestScore={languageTestScoreList.find((score) => score.id === curLanguageTestScore)}
-          gpaScore={gpaScoreList.find((score) => score.id === curGpaScore)}
-          universityList={
-            curUniversityList
-              .map((id) => universityList.find((university) => university.id === id))
-              .filter(Boolean) as ListUniversity[]
-          }
-          onNext={handleSubmit}
-        />
+      {isDataExist ? (
+        <EmptyGPA />
+      ) : (
+        <>
+          {step === 1 && (
+            <LanguageStep
+              languageTestScoreList={languageTestScoreList}
+              curLanguageTestScore={curLanguageTestScore}
+              setCurLanguageTestScore={setCurLanguageTestScore}
+              onNext={goNextStep}
+            />
+          )}
+          {step === 2 && (
+            <GpaStep
+              gpaScoreList={gpaScoreList}
+              curGpaScore={curGpaScore}
+              setCurGpaScore={setCurGpaScore}
+              onNext={goNextStep}
+            />
+          )}
+          {step === 3 && (
+            <UniversityStep
+              universityList={universityList}
+              curUniversityList={curUniversityList}
+              setCurUniversityList={setCurUniversityList}
+              onNext={goNextStep}
+            />
+          )}
+          {step === 4 && (
+            <ConfirmStep
+              languageTestScore={languageTestScoreList.find((score) => score.id === curLanguageTestScore)}
+              gpaScore={gpaScoreList.find((score) => score.id === curGpaScore)}
+              universityList={
+                curUniversityList
+                  .map((id) => universityList.find((university) => university.id === id))
+                  .filter(Boolean) as ListUniversity[]
+              }
+              onNext={handleSubmit}
+            />
+          )}
+          {step === 99 && <DoneStep />}
+        </>
       )}
-      {step === 99 && <DoneStep />}
     </>
   );
 };

src/app/application/apply/EmptyGPA.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+import { IconSolidConnectionSmallLogo } from "@/public/svgs/my";
+
+const EmptyGPA = () => {
+  return (
+    <div className="mt-52 flex flex-col items-center justify-center gap-2 rounded-lg text-center">
+      <IconSolidConnectionSmallLogo />
+      <p className="text-k-300">
+        지원할 수 있는 성적이 없어요.
+        <br />
+        성적부터 입력해 볼까요?
+      </p>
+      <Link
+        href="/score"
+        className="h- mt-2 h-13 w-60 rounded-full bg-gradient-to-l from-primary to-secondary p-4 text-sm font-semibold text-white"
+      >
+        성적 등록하러가기
+      </Link>
+    </div>
+  );
+};
+export default EmptyGPA;