api 추가 연결 및 디자인 수정

src/api/ai/apis.tsx

@@ -1,5 +1,9 @@
 import axiosInstance from "../axiosInstance";
-import { AIPredictionResponse } from "../../types/ai";
+import {
+  AIPredictionResponse,
+  FinalRankingResponse,
+  GamePredictionResponse,
+} from "../../types/ai";
 
 export const aiApi = {
   getWinProbability: async (date: string): Promise<AIPredictionResponse> => {
@@ -12,4 +16,29 @@ export const aiApi = {
       winProbability: item.winProbability,
     }));
   },
+  getFinalRank: async (): Promise<FinalRankingResponse> => {
+    const { data: raw } =
+      await axiosInstance.get<FinalRankingResponse>("/final-rankings");
+    return raw.map((item: any) => ({
+      id: item.id,
+      teamName: item.teamName,
+      rank: item.rank,
+      currentRank: item.currentRank,
+    }));
+  },
+  getGamePrediction: async (): Promise<GamePredictionResponse> => {
+    const { data: raw } = await axiosInstance.get<GamePredictionResponse>(
+      "/api/win-rates/live-prediction",
+    );
+    return raw.map((item: any) => ({
+      gameId: item.gameId,
+      awayTeam: item.awayTeam,
+      homeTeam: item.homeTeam,
+      inning: item.inning,
+      winProbability: item.winProbability,
+      homeAccumScore: item.homeAccumScore,
+      awayAccumScore: item.awayAccumScore,
+      predictedAt: item.predictedAt,
+    }));
+  },
 };

src/api/ranking/apis.tsx

@@ -4,6 +4,10 @@ import {
   PitcherSaveDto,
   PitcherStrikeoutDto,
   PitcherWinRateDto,
+  PlayerAVGDto,
+  PlayerHitDto,
+  PlayerHRDto,
+  PlayerRBIDto,
   RankingDto,
 } from "../../types/ranking";
 import {
@@ -41,7 +45,7 @@ export const rankingApi = {
     return response.data.data.map(item => ({
       playerName: item.playerName,
       backNumber: item.backNumber,
-      wpct: item.wpct,
+      wpct: item.value,
       playerImageUrl: item.playerImageUrl,
     }));
   },
@@ -52,7 +56,7 @@ export const rankingApi = {
     return response.data.data.map(item => ({
       playerName: item.playerName,
       backNumber: item.backNumber,
-      sv: item.sv,
+      sv: item.value,
       playerImageUrl: item.playerImageUrl,
     }));
   },
@@ -63,7 +67,7 @@ export const rankingApi = {
     return response.data.data.map(item => ({
       playerName: item.playerName,
       backNumber: item.backNumber,
-      so: item.so,
+      so: item.value,
       playerImageUrl: item.playerImageUrl,
     }));
   },
@@ -74,7 +78,51 @@ export const rankingApi = {
     return response.data.data.map(item => ({
       playerName: item.playerName,
       backNumber: item.backNumber,
-      era: item.era,
+      era: item.value,
+      playerImageUrl: item.playerImageUrl,
+    }));
+  },
+  getRankPlayerHR: async () => {
+    const response = await axiosInstance.get<PlayerHRDto>(
+      "/record/personalRank/hitter/HR",
+    );
+    return response.data.data.map(item => ({
+      playerName: item.playerName,
+      backNumber: item.backNumber,
+      hr: item.value,
+      playerImageUrl: item.playerImageUrl,
+    }));
+  },
+  getRankPlayerRBI: async () => {
+    const response = await axiosInstance.get<PlayerRBIDto>(
+      "/record/personalRank/hitter/rbi",
+    );
+    return response.data.data.map(item => ({
+      playerName: item.playerName,
+      backNumber: item.backNumber,
+      rbi: item.value,
+      playerImageUrl: item.playerImageUrl,
+    }));
+  },
+  getRankPlayerAVG: async () => {
+    const response = await axiosInstance.get<PlayerAVGDto>(
+      "/record/personalRank/hitter/avg",
+    );
+    return response.data.data.map(item => ({
+      playerName: item.playerName,
+      backNumber: item.backNumber,
+      avg: item.value,
+      playerImageUrl: item.playerImageUrl,
+    }));
+  },
+  getRankPlayerHit: async () => {
+    const response = await axiosInstance.get<PlayerHitDto>(
+      "/record/personalRank/hitter/H",
+    );
+    return response.data.data.map(item => ({
+      playerName: item.playerName,
+      backNumber: item.backNumber,
+      hit: item.value,
       playerImageUrl: item.playerImageUrl,
     }));
   },

src/pages/Home/components/KoreaMap.tsx

@@ -307,6 +307,10 @@ export default function KoreaMap({
             )}
           </a>
         </div>
+        {/* 데이터 출처 */}
+        <div className="absolute right-0 bottom-0 text-[10px] text-[var(--on-surface-grey2)]">
+          (공공데이터 포털 한국환경공단 데이터를 사용 중입니다.)
+        </div>
       </div>
     </div>
   );