feat: 누적 리포트 연도 select 리코일 atom에서 받아온 값으로 연도 별 그래프 API 요청하기

src/api/lib/getYearReport.ts

@@ -2,11 +2,11 @@ import { instance } from '..';
 import { YearReportResult } from '@/types/report';
 
 const getYearReport = async (
-  accommodation_id: number
-  // recoil로 쿼리 정보 가져오기
+  accommodation_id: number,
+  year: number
 ): Promise<YearReportResult> => {
   const response = await instance.get(
-    `/v1/dashboards/${accommodation_id}/reports/year?year=${2023}`
+    `/v1/dashboards/${accommodation_id}/reports/year?year=${year}`
   );
 
   return response.data;

src/components/Report/LeftSection/index.tsx

@@ -1,15 +1,19 @@
 import { useRecoilValue } from 'recoil';
 import styled from '@emotion/styled';
 
-import { headerAccommodationState } from '@recoil/index';
+import { headerAccommodationState, selectedYearState } from '@recoil/index';
 import { useGetYearReport } from '@hooks/index';
 import { DashboardHeader } from '@components/common';
 import YearReport from './YearReport';
 import Graph from './Graph';
 
 const LeftSection = () => {
-  const headerSelectState = useRecoilValue(headerAccommodationState);
-  const { data: yearReportData } = useGetYearReport(headerSelectState.id);
+  const selectedAccommodation = useRecoilValue(headerAccommodationState);
+  const selectedYear = useRecoilValue(selectedYearState);
+  const { data: yearReportData } = useGetYearReport(
+    selectedAccommodation.id,
+    selectedYear.year
+  );
   const { coupon_sales_list: graphProps, ...yearReportProps } = yearReportData;
   const yearReport = Object.entries(yearReportProps);
 

src/hooks/queries/useGetYearReport.ts

@@ -3,11 +3,10 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import { getYearReport } from 'src/api';
 import { YearReportResult } from '@/types/report';
 
-// recoil로 쿼리 정보 가져오기
-const useGetYearReport = (accommodation_id: number) =>
+const useGetYearReport = (accommodation_id: number, year: number) =>
   useSuspenseQuery<YearReportResult, Error>({
-    queryKey: ['YearReport', accommodation_id],
-    queryFn: () => getYearReport(accommodation_id)
+    queryKey: ['YearReport', accommodation_id, year],
+    queryFn: () => getYearReport(accommodation_id, year)
   });
 
 export default useGetYearReport;