Feat/kbo landingpage

src/api/feeds/queries.ts

@@ -5,6 +5,8 @@ import type { FeedListResponse } from "./types";
 export const useGetFeeds = (playerId: number, size: number = 5) => {
   return useInfiniteQuery<FeedListResponse>({
     queryKey: ["feeds", playerId],
+    retry: false,
+    refetchOnWindowFocus: false,
     queryFn: async ({ pageParam }) => {
       const searchParams: Record<string, string> = { size: String(size) };
       if (pageParam) {

src/api/instance.ts

@@ -1,16 +1,70 @@
 import ky from "ky";
+import { refreshAccessToken } from "./auth";
+
+let refreshPromise: Promise<string | undefined> | null = null;
+
+const getFreshAccessToken = async () => {
+  if (!refreshPromise) {
+    refreshPromise = refreshAccessToken().finally(() => {
+      refreshPromise = null;
+    });
+  }
+
+  return refreshPromise;
+};
 
 const api = ky.create({
   prefixUrl: "/api",
   hooks: {
     beforeRequest: [
       (request) => {
-        const token = localStorage.getItem("accessToken"); // TODO: 실제 토큰 관리 로직으로 교체
+        const token = localStorage.getItem("accessToken");
         if (token) {
           request.headers.set("Authorization", `Bearer ${token}`);
         }
       },
     ],
+    afterResponse: [
+      async (request, options, response) => {
+        if (response.status !== 401) {
+          return response;
+        }
+
+        const isRefreshRequest = request.url.includes("/auth/refresh");
+        const alreadyRetried = request.headers.get("x-refresh-retry") === "1";
+        const hasRefreshToken = !!localStorage.getItem("refreshToken");
+
+        if (isRefreshRequest || alreadyRetried || !hasRefreshToken) {
+          return response;
+        }
+
+        try {
+          const newAccessToken = await getFreshAccessToken();
+
+          if (!newAccessToken) {
+            return response;
+          }
+
+          const headers = new Headers(request.headers);
+          headers.set("Authorization", `Bearer ${newAccessToken}`);
+          headers.set("x-refresh-retry", "1");
+
+          return ky(request, {
+            ...options,
+            headers,
+          });
+        } catch {
+          localStorage.removeItem("accessToken");
+          localStorage.removeItem("refreshToken");
+
+          if (window.location.pathname !== "/login") {
+            window.location.href = "/login?error=true";
+          }
+
+          return response;
+        }
+      },
+    ],
   },
 });
 

src/api/match/queries.ts

@@ -9,6 +9,8 @@ import type { MatchSummaryResponse } from "./types";
 export const useGetMatchSummary = (playerId: number) => {
   return useQuery<MatchSummaryResponse>({
     queryKey: ["match", playerId],
+    retry: false,
+    refetchOnWindowFocus: false,
     queryFn: async () => {
       // API 경로가 /api/match/{player_id} 형태이면서
       // 쿼리 파라미터 ?player_id=...도 함께 요구하는 경우를 모두 고려한 작성법입니다.

src/api/stats/queries.ts

@@ -9,6 +9,8 @@ import type { PlayerStatsResponse } from "./types";
 export const useGetPlayerStats = (playerId: number) => {
   return useQuery<PlayerStatsResponse>({
     queryKey: ["stats", playerId],
+    retry: false,
+    refetchOnWindowFocus: false,
     queryFn: async () => {
       // 경로 파라미터와 쿼리 파라미터를 모두 포함하는 예시 주소 대응
       return api.get(`stats/${playerId}`).json<PlayerStatsResponse>();

src/api/stats/types.ts

@@ -1,4 +1,3 @@
-//TODO : 투수의 경우는 다를 거임
 export interface PlayerStatsSummary {
   batting_avg_rank: number;
   war_rank: number;
@@ -7,8 +6,7 @@ export interface PlayerStatsSummary {
   home_run_rank: number;
 }
 
-//TODO : 투수의 경우는 다를 거임
-export interface PlayerStatsMetrics {
+export interface BatterStatsMetrics {
   batting_avg: number;
   home_runs: number;
   hits: number;
@@ -18,9 +16,21 @@ export interface PlayerStatsMetrics {
   on_base_percentage: number;
   ops: number;
 }
+
+export interface PitcherStatsMetrics {
+  era: number;
+  games: number;
+  win_loss: string;
+  save_hold: string;
+  innings_pitched: number;
+  strikeouts: number;
+  walks: number;
+  whip: number;
+}
+
 export interface PlayerStatsResponse {
   season: number;
-  player_type: string;
+  player_type: "BATTER" | "PITCHER";
   summary: PlayerStatsSummary;
-  metrics: PlayerStatsMetrics;
+  metrics: BatterStatsMetrics | PitcherStatsMetrics;
 }