Merge pull request #456 from FunD-StockProject/feat/stock-zipyo-real-api

feat: Replace mock data with real API calls in StockZipyoPanel

Author: minsukim-29cm

src/components/Page/Stock/Tab/Zipyo/Zipyo.tsx

@@ -1,9 +1,8 @@
-import { STOCK_SECTOR_MAP, StockSectorKey } from '@ts/StockSector';
 import { getDiffText } from '@utils/Number';
 import { deltaToCaret } from '@utils/ScoreConvert';
 import useAboutHumanZipyo from '@components/Modal/CenterTutorial/AboutHumanZipyo/useAboutHumanZipyo';
 import GuageChart from '@components/Search/GuageChart/GuageChart';
-import { useScoreQuery } from '@controllers/stocks/query';
+import { useScoreQuery, useStockZipyoDataQuery } from '@controllers/stocks/query';
 import { StockDetailInfo } from '@controllers/stocks/types';
 import { StockItemContainer } from '../../Common.Style';
 import StockItemTitle from '../../ItemTitle';
@@ -17,25 +16,12 @@ import {
 
 const StockZipyoPanel = ({ stockInfo: { stockId, country, symbolName } }: { stockInfo: StockDetailInfo }) => {
   const { data: stockScore } = useScoreQuery(stockId, country);
+  const { data: zipyoData } = useStockZipyoDataQuery(stockId, country);
   const { Modal: AboutHumanZipyoModal, openModal: openAboutHumanZipyoModal } = useAboutHumanZipyo();
 
-  if (!stockScore) return null;
+  if (!stockScore || !zipyoData) return null;
 
-  // 목업 데이터 (실제로는 API에서 가져와야 함)
-  const mock: {
-    industryType: StockSectorKey;
-    industryAverage: number;
-    stockRanking: number;
-    monthlyAverage: number;
-  } = {
-    industryType: 'IT_SERVICE',
-    industryAverage: 45,
-    stockRanking: 68,
-    monthlyAverage: 51,
-  };
-
-  const { industryType, industryAverage, stockRanking, monthlyAverage } = mock;
-  const industryName = STOCK_SECTOR_MAP[industryType].text;
+  const { industryName, industryAverage, stockRanking, monthlyAverage } = zipyoData;
   const monthlyAverageDiff = stockScore.score - monthlyAverage;
   const monthlyAverageDiffText = getDiffText({ valueDiff: monthlyAverageDiff });
   const sentiment = !monthlyAverageDiff ? '유지되고' : monthlyAverageDiff > 0 ? '개선되고' : '약화되고';

src/controllers/stocks/api.ts

@@ -11,7 +11,14 @@ import {
   fetchSearchSymbolNameMock,
   fetchSearchWordCloudMock,
 } from './mock';
-import { PERIOD_CODE, PopularStocks, StockDetailInfo } from './types';
+import {
+  MonthlyAverageResponse,
+  PERIOD_CODE,
+  PopularStocks,
+  SectorAverageResponse,
+  SectorPercentileResponse,
+  StockDetailInfo,
+} from './types';
 
 export const fetchScore = async (id: number, country: string) => {
   if (enableMock) return fetchScoreMock;
@@ -87,3 +94,16 @@ export const fetchPopularKeywords = (country: string): Promise<string[]> => {
   if (enableMock) return Promise.resolve(fetchKeywordsMock);
   return fetchData(`/keyword/popular/${country}`);
 };
+
+export const fetchSectorAverage = (country: string, sector: string): Promise<SectorAverageResponse> => {
+  return fetchData(`/stock/sector/average/${country}/${sector}`);
+};
+
+export const fetchSectorPercentile = (stockId: number): Promise<SectorPercentileResponse> => {
+  return fetchData(`/stock/${stockId}/sector/percentile`);
+};
+
+export const fetchMonthlyAverage = (stockId: number, yearMonth?: string): Promise<MonthlyAverageResponse> => {
+  const queryParam = yearMonth ? `?yearMonth=${yearMonth}` : '';
+  return fetchData(`/stock/${stockId}/average/month${queryParam}`);
+};

src/controllers/stocks/query.ts

@@ -8,19 +8,23 @@ import { STOCK_FETCH_FUNCTIONS, queryOptions } from '../common/query';
 import {
   fetchAutoComplete,
   fetchKeywordRankings,
+  fetchMonthlyAverage,
   fetchPopularKeywords,
   fetchPopularStocks,
   fetchRelevant,
   fetchScore,
   fetchSearchKeyword,
   fetchSearchSymbolName,
   fetchSearchWordCloud,
+  fetchSectorAverage,
+  fetchSectorPercentile,
   fetchStockChart,
   fetchStockInfo,
   fetchStockSummary,
   fetchStockTable,
 } from './api';
-import { AutoCompleteItem, PERIOD_CODE, PopularItems, StockDetailInfo, StockInfo, StockTableInfo } from './types';
+import type { AutoCompleteItem, PopularItems, StockDetailInfo, StockInfo, StockTableInfo } from './types';
+import { PERIOD_CODE } from './types';
 
 export const useSymbolNameSearchQuery = (name: string, country: StockCountryKey) => {
   return useQuery<StockDetailInfo>(['symbolNameSearch', name, country], () => fetchSearchSymbolName(name, country), {
@@ -291,3 +295,29 @@ export const useKeywordRankingsQuery = () => {
     placeholderData: [],
   });
 };
+
+export const useStockZipyoDataQuery = (stockId: number, country: StockCountryKey) => {
+  return useQuery(
+    ['stockZipyoData', stockId, country],
+    async () => {
+      const [sectorPercentile, monthlyAverage] = await Promise.all([
+        fetchSectorPercentile(stockId),
+        fetchMonthlyAverage(stockId),
+      ]);
+
+      const sectorAverage = await fetchSectorAverage(country, sectorPercentile.sector);
+
+      return {
+        industryType: sectorPercentile.sector,
+        industryName: sectorPercentile.sectorName,
+        industryAverage: sectorAverage.averageScore,
+        stockRanking: sectorPercentile.topPercent,
+        monthlyAverage: monthlyAverage.averageScore,
+      };
+    },
+    {
+      ...queryOptions,
+      enabled: !!stockId && !!country,
+    },
+  );
+};

src/controllers/stocks/types.ts

@@ -105,3 +105,29 @@ export interface StockPreferenceStatus {
   isBookmarked: boolean;
   isNotificationOn: boolean;
 }
+
+export interface SectorAverageResponse {
+  sector: string;
+  sectorName: string;
+  averageScore: number;
+  count: number;
+}
+
+export interface SectorPercentileResponse {
+  stockId: number;
+  sector: string;
+  sectorName: string;
+  score: number;
+  rank: number;
+  total: number;
+  topPercent: number;
+}
+
+export interface MonthlyAverageResponse {
+  stockId: number;
+  symbolName: string;
+  country: StockCountryKey;
+  yearMonth: string;
+  dataCount: number;
+  averageScore: number;
+}