[#66] 헤더 Select 상태 API 연결

src/api/index.ts

@@ -4,3 +4,4 @@ export { default as postRefreshToken } from './lib/postRefreshToken';
 export { default as getTotalReport } from './lib/getTotalReport';
 export { default as getYearReport } from './lib/getYearReport';
 export { default as getCouponList } from './lib/getCouponList';
+export { default as getHeaderAccommodation } from './lib/getHeaderAccommodation';

src/api/lib/getHeaderAccommodation.ts

@@ -0,0 +1,13 @@
+import { AxiosResponse } from 'axios';
+
+import { instance } from '..';
+import { HeaderAccommodationResult } from '@/types/layout';
+
+const getHeaderAccommodation = async (): Promise<HeaderAccommodationResult> => {
+  const response: AxiosResponse<HeaderAccommodationResult, Error> =
+    await instance.get(`/v1/accommodation`);
+
+  return response.data;
+};
+
+export default getHeaderAccommodation;

src/api/lib/getTotalReport.ts

@@ -1,10 +1,12 @@
+import { AxiosResponse } from 'axios';
+
 import { instance } from '..';
 import { TotalReportResult } from '@/types/report';
 
 const getTotalReport = async (
   accommodation_id: number
 ): Promise<TotalReportResult> => {
-  const response = await instance.get(
+  const response: AxiosResponse<TotalReportResult, Error> = await instance.get(
     `/v1/dashboards/${accommodation_id}/reports/total`
   );
 

src/components/Report/LeftSection/index.tsx

@@ -9,12 +9,8 @@ import Graph from './Graph';
 
 const LeftSection = () => {
   const headerSelectState = useRecoilValue(headerAccommodationState);
-  // HACK: recoil로 쿼리 정보 가져오기, 이슈 #67 에서 작업중
-  const { data: yearReportData } = useGetYearReport(
-    headerSelectState.accommodationId
-  );
+  const { data: yearReportData } = useGetYearReport(headerSelectState.id);
   const { coupon_sales_list: graphProps, ...yearReportProps } = yearReportData;
-  // HACK: 배열 순서 변경 필요, 이슈 #67 에서 작업중
   const yearReport = Object.entries(yearReportProps);
 
   return (

src/components/Report/RightSection/TotalReport/index.tsx

@@ -8,9 +8,7 @@ import { AmountStyleProps } from '@/types/report';
 
 const TotalReport = () => {
   const headerSelectState = useRecoilValue(headerAccommodationState);
-  const { data: TotalReportResult } = useGetTotalReport(
-    headerSelectState.accommodationId
-  );
+  const { data: TotalReportResult } = useGetTotalReport(headerSelectState.id);
   const TotalReportArray = Object.entries(TotalReportResult);
 
   return (

src/components/common/Layout/Header/Select/index.tsx

@@ -3,59 +3,43 @@ import theme from '@styles/theme';
 
 import { useRecoilState } from 'recoil';
 import { headerAccommodationState } from '@recoil/index';
+import useGetHeaderAccommodation from '@hooks/queries/useGetHeaderAccommodation';
+import { useEffect } from 'react';
 
 const Select = () => {
-  /* HACK: 예시 데이터, 리액트 쿼리를 활용하여 넘겨 selectList 배열을 받음
-
-    const { data: selectList } = useFetchAccommodation();
-
-  */
-
-  const selectList = [
-    {
-      accommodationId: 1,
-      accommodationName: '영덕 아이스 풀빌라'
-    },
-    {
-      accommodationId: 2,
-      accommodationName: '영덕 아이스 풀빌라2'
-    },
-    {
-      accommodationId: 3,
-      accommodationName: '영덕 아이스 풀빌라3'
-    },
-    {
-      accommodationId: 4,
-      accommodationName: '영덕 아이스 풀빌라4'
-    }
-  ];
+  const { data: selectList } = useGetHeaderAccommodation();
 
   const [headerAccommodation, setHeaderAccommodation] = useRecoilState(
     headerAccommodationState
   );
 
+  useEffect(() => {
+    setHeaderAccommodation(selectList[0]);
+  }, []);
+
   const handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const accommodationId = Number(e.target.value);
+    const selectId = Number(e.target.value);
+
+    const selectAccommodation = selectList.find(
+      select => select.id === selectId
+    );
 
-    setHeaderAccommodation({
-      accommodationId,
-      accommodationName: `${e.target.children[accommodationId - 1].textContent}`
-    });
+    selectAccommodation ? setHeaderAccommodation(selectAccommodation) : null;
   };
 
   return (
     <Container>
       <Accommodations
         name="Accommodations"
         onChange={handleSelect}
-        value={headerAccommodation.accommodationId}
+        value={headerAccommodation.id}
       >
         {selectList.map(item => (
           <Accommodation
-            value={item.accommodationId}
-            key={item.accommodationId}
+            value={item.id}
+            key={item.id}
           >
-            {item.accommodationName}
+            {item.name}
           </Accommodation>
         ))}
       </Accommodations>

src/hooks/queries/useGetHeaderAccommodation.ts

@@ -0,0 +1,12 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getHeaderAccommodation } from 'src/api';
+import { HeaderAccommodationResult } from '@/types/layout';
+
+const useGetHeaderAccommodation = () =>
+  useSuspenseQuery<HeaderAccommodationResult, Error>({
+    queryKey: ['Accommodation'],
+    queryFn: () => getHeaderAccommodation()
+  });
+
+export default useGetHeaderAccommodation;

src/hooks/queries/useGetTotalReport.ts

@@ -1,8 +1,10 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
+
 import { getTotalReport } from 'src/api';
+import { TotalReportResult } from '@/types/report';
 
 const useGetTotalReport = (accommodation_id: number) =>
-  useSuspenseQuery({
+  useSuspenseQuery<TotalReportResult, Error>({
     queryKey: ['TotalReport', accommodation_id],
     queryFn: () => getTotalReport(accommodation_id)
   });

src/hooks/queries/useGetYearReport.ts

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

src/recoil/atoms/headerAccommodationState.ts

@@ -1,22 +1,22 @@
 import { atom } from 'recoil';
 import { recoilPersist } from 'recoil-persist';
 
-import { headerAccommodationAtom } from '@/types/header';
+import { HeaderAccommodation } from '@/types/layout';
 
 const { persistAtom } = recoilPersist();
 
-const headerAccommodationState = atom<headerAccommodationAtom>({
+const headerAccommodationState = atom<HeaderAccommodation>({
   key: 'headerAccommodationState',
   default: {
-    /* HACK: 로그인 구현 완료 후 리코일 초기값 설정 방법
-
-      1. React Query에서 API 요청을 성공하면, 
-      2. recoil 상태를 체크하여 비어있는 경우에만 setRecoilState로 업데이트
-
-     */
-    accommodationId: 1,
-    accommodationName: '영덕 아이스 풀빌라'
+    id: 0,
+    name: '',
+    sido_id: 0,
+    sido: '',
+    sigungu_id: 0,
+    sigungu: '',
+    address: ''
   },
+
   effects_UNSTABLE: [persistAtom]
 });
 

src/types/layout.ts

@@ -1,6 +1,20 @@
 // Layout
 export type LayoutStyleProps = { $pathname: string };
 
+// Header
+
+export type HeaderAccommodation = {
+  id: number;
+  name: string;
+  sido_id: number;
+  sido: string;
+  sigungu_id: number;
+  sigungu: string;
+  address: string;
+};
+
+export type HeaderAccommodationResult = HeaderAccommodation[];
+
 // Sidebar
 export type SidebarHeader = {
   isSidebarOpen: boolean;