Refactor/home (#206)

* fix : serverFetch 반환값이 더이상 error를 throw하지 않도록 수정했습니다

* refactor : home 페이지가 revalidate가 정상 작동하도록 수정했습니다

* refactor : 클라이언트 컴포넌트 분해했습니다

* refactor : home의 테일윈드 고정값 모두 수정했습니다

* refactor : 전체적인 홈페이지 개선했습니다
1. revalidate 작동하도록 isr로 수정했습니다
2. 컴포넌트 중 레거시 삭제 및 college -> university로 통일작업했습니다
3. 레거시 컴포넌트의 분리 및 테일윈드 값 PR 내용 반영하도록 했습니다

* refactor : 홈페이지의 추천 영역 react-query로 수정했습니다

* refactor : 레거시 삭제했습니다

* refactor : productuin 상태일때는 universities를 사용하도록 수정했습니다

* refactor : unoptimized 설정 삭제했습니다

* refactor : PR 내용 반영했습니다

---------

Co-authored-by: 한만욱 <manwook-han@hanman-ug-ui-MacBookPro.local>

Author: manNomi

next.config.mjs

@@ -5,7 +5,7 @@ import { withSentryConfig } from "@sentry/nextjs";
 const nextConfig = {
   swcMinify: true,
   images: {
-    unoptimized: true,
+    // unoptimized: true,
     domains: [
       "solid-connection.s3.ap-northeast-2.amazonaws.com",
       "solid-connection-uploaded.s3.ap-northeast-2.amazonaws.com",

package-lock.json

@@ -17,6 +17,8 @@
     "@radix-ui/react-select": "^2.1.6",
     "@react-google-maps/api": "^2.19.2",
     "@sentry/nextjs": "^7.107.0",
+    "@tanstack/react-query": "^5.84.1",
+    "@tanstack/react-query-devtools": "^5.84.1",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package.json

@@ -7,7 +7,13 @@ Sentry.init({
 
   integrations: [
     Sentry.browserTracingIntegration({
-      tracePropagationTargets: ["localhost", /^https:\/\/(www\.)?solid\-connection\.com/],
+      tracePropagationTargets: [
+        "localhost",
+        "solid-connection.com",
+        "solid-connect-web",
+        "solid-connect",
+        /^https:\/\/(www\.)?solid[\-]?connection\.com/,
+      ],
     }),
     Sentry.replayIntegration({
       maskAllText: true,

sentry.client.config.ts

@@ -4,7 +4,6 @@ import { axiosInstance, publicAxiosInstance } from "@/utils/axiosInstance";
 
 import {
   ListUniversity,
-  RecommendedUniversitiesResponse,
   RegionEnum,
   University,
   UniversityFavoriteResponse,
@@ -37,6 +36,3 @@ export const deleteUniversityFavoriteApi = (
   universityInfoForApplyId: number,
 ): Promise<AxiosResponse<UniversityFavoriteResponse>> =>
   axiosInstance.delete(`/universities/${universityInfoForApplyId}/like`);
-
-export const getRecommendedUniversitiesApi = (): Promise<AxiosResponse<RecommendedUniversitiesResponse>> =>
-  axiosInstance.get("/universities/recommend");

src/api/university.ts

@@ -0,0 +1,28 @@
+import { axiosInstance, publicAxiosInstance } from "@/utils/axiosInstance";
+
+import { RecommendedUniversityResponse } from "../type/response";
+
+import { useQuery } from "@tanstack/react-query";
+
+const getRecommendedUniversity = async ({
+  queryKey,
+}: {
+  queryKey: [string, boolean];
+}): Promise<RecommendedUniversityResponse> => {
+  const endpoint = process.env.NODE_ENV === "development" ? "/univ-apply-infos/recommend" : "/universities/recommend";
+
+  const [, isLogin] = queryKey;
+  const instance = isLogin ? axiosInstance : publicAxiosInstance;
+  const res = await instance.get(endpoint);
+  return res.data;
+};
+
+const useGetRecommendedUniversity = (isLogin: boolean) =>
+  useQuery({
+    queryKey: ["recommended-university", isLogin],
+    queryFn: getRecommendedUniversity,
+    enabled: isLogin, // 쿼리는 로그인 상태일 때만 활성화
+    staleTime: 1000 * 60 * 5,
+  });
+
+export default useGetRecommendedUniversity;

src/api/university/client/useGetRecommendedUniversity.ts

@@ -0,0 +1,14 @@
+import serverFetch from "@/utils/serverFetchUtil";
+
+import { RecommendedUniversityResponse } from "../type/response";
+
+const getRecommendedUniversity = async () => {
+  const endpoint = process.env.NODE_ENV === "development" ? "/univ-apply-infos/recommend" : "/universities/recommend";
+
+  const res = await serverFetch<RecommendedUniversityResponse>(endpoint, {
+    isAuth: false, // 인증이 필요 없는 API로 설정
+  });
+  return res;
+};
+
+export default getRecommendedUniversity;

src/api/university/server/getRecommendedUniversity.ts

@@ -0,0 +1,68 @@
+import serverFetch from "@/utils/serverFetchUtil";
+
+import { SearchUniversityListResponse } from "../type/response";
+
+import { AllRegionsUniversityList, RegionEnum, RegionEnumExtend } from "@/types/university";
+
+/**
+ * 검색 파라미터 정의
+ */
+interface SearchParams {
+  region?: RegionEnum | null;
+  keyword?: string;
+  testType?: string;
+  testScore?: string;
+}
+
+/**
+ * 단일 권역 또는 조건별 대학 검색 API
+ * - 기본 경로: /univ-apply-infos/search
+ * - 필요 시 query string 을 동적으로 붙인다.
+ */
+const getSearchUniversityList = async ({ region, keyword, testType, testScore }: SearchParams = {}) => {
+  const endpoint = process.env.NODE_ENV === "development" ? "/univ-apply-infos/search" : "/universities/search";
+
+  const params = new URLSearchParams();
+
+  if (region) params.append("region", region);
+  if (keyword) params.append("keyword", keyword);
+  if (testType) params.append("testType", testType);
+  if (testScore) params.append("testScore", testScore);
+
+  const url = params.size ? `${endpoint}?${params.toString()}` : endpoint;
+
+  return serverFetch<SearchUniversityListResponse>(url, { isAuth: false });
+};
+
+/**
+ * 전체·미주·유럽·아시아·중국 데이터를 병렬로 가져와
+ * Record<RegionEnumExtend, ListUniversity[]> 형태로 반환한다.
+ */
+export async function getAllRegionsUniversityList(): Promise<AllRegionsUniversityList> {
+  const regionOrder: (RegionEnum | null)[] = [
+    null,
+    RegionEnum.AMERICAS,
+    RegionEnum.EUROPE,
+    RegionEnum.ASIA,
+    RegionEnum.CHINA,
+  ];
+
+  // ALL(전체)은 region 파라미터를 넘기지 않는다.
+  const responses = await Promise.all(regionOrder.map((region) => getSearchUniversityList({ region })));
+
+  const regionEnumExtendedOrder: RegionEnumExtend[] = [
+    RegionEnumExtend.ALL,
+    RegionEnumExtend.AMERICAS,
+    RegionEnumExtend.EUROPE,
+    RegionEnumExtend.ASIA,
+    RegionEnumExtend.CHINA,
+  ];
+
+  return regionEnumExtendedOrder.reduce((acc, key, idx) => {
+    const response = responses[idx];
+    acc[key] = response.ok ? response.data : [];
+    return acc;
+  }, {} as AllRegionsUniversityList);
+}
+
+export default getSearchUniversityList;

src/api/university/server/getSearchUniversityList.ts

@@ -0,0 +1,7 @@
+import { AllRegionsUniversityList, ListUniversity } from "@/types/university";
+
+export type RecommendedUniversityResponse = { recommendedUniversities: ListUniversity[] };
+
+export type SearchUniversityListResponse = ListUniversity[];
+
+export type AllRegionsUniversityListResponse = AllRegionsUniversityList;