[#74] 누적 리포트 연도 select recoil로 상태 관리

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/Graph/SelectYear/index.tsx

@@ -1,11 +1,67 @@
+import { useRecoilState } from 'recoil';
+import { Dropdown, DropdownProps } from 'semantic-ui-react';
 import styled from '@emotion/styled';
 
+import { selectedYearState } from '@recoil/index';
+import { initYearSelectList } from '@utils/index';
+import theme from '@styles/theme';
+
 const SelectYear = () => {
-  return <Container>select</Container>;
+  const selectYearReport = initYearSelectList();
+  const [selectedYear, setSelectedYear] = useRecoilState(selectedYearState);
+
+  const handleSelect = (
+    _e: React.SyntheticEvent<HTMLElement>,
+    data: DropdownProps
+  ) => {
+    setSelectedYear({ year: Number(data.value) });
+  };
+
+  return (
+    <StyledDropdown
+      selection
+      options={selectYearReport.map(item => ({
+        key: item,
+        text: item,
+        value: item
+      }))}
+      onChange={handleSelect}
+      value={selectedYear.year}
+    />
+  );
 };
 
 export default SelectYear;
 
-const Container = styled.div`
-  // HACK: 이슈 #67에서 작업중
+const StyledDropdown = styled(Dropdown)`
+  &.ui.dropdown {
+    min-width: 200px;
+
+    border-radius: 12px;
+    padding: 10px 20px;
+
+    display: flex;
+    align-items: center;
+
+    color: rgba(60, 60, 67, 0.6);
+    background-color: rgba(247, 248, 252, 1);
+    font-weight: 500;
+
+    .text {
+      color: rgba(60, 60, 67, 0.6);
+    }
+  }
+
+  ${theme.response.tablet} {
+    &.ui.dropdown {
+      min-width: 180px;
+      padding: 5px 15px;
+
+      font-size: 12px;
+    }
+
+    .text {
+      color: rgba(60, 60, 67, 0.6);
+    }
+  }
 `;

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/components/common/Layout/Header/index.tsx

@@ -45,7 +45,7 @@ const Container = styled.header`
   align-items: center;
 
   background-color: ${theme.colors.white};
-  z-index: 90;
+  z-index: 80;
 
   ${theme.response.tablet} {
     height: 65px;

src/components/common/Layout/index.tsx

@@ -78,7 +78,7 @@ const OutletLayout = styled.div<LayoutStyleProps>`
     }
   }};
 
-  overflow: scroll;
+  overflow: auto;
 
   ${theme.response.tablet} {
     width: 100vw;
@@ -87,6 +87,6 @@ const OutletLayout = styled.div<LayoutStyleProps>`
     border-radius: 0;
 
     overflow-x: hidden;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 `;

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;

src/recoil/atoms/selectedYearState.ts

@@ -0,0 +1,12 @@
+import { atom } from 'recoil';
+import { recoilPersist } from 'recoil-persist';
+
+const { persistAtom } = recoilPersist();
+
+const selectedYearState = atom<{ year: number }>({
+  key: 'selectYearState',
+  default: { year: 0 },
+  effects_UNSTABLE: [persistAtom]
+});
+
+export default selectedYearState;

src/recoil/index.ts

@@ -1,2 +1,3 @@
 export { default as headerAccommodationState } from './atoms/headerAccommodationState';
 export { default as couponListState } from './atoms/couponListState';
+export { default as selectedYearState } from './atoms/selectedYearState';

src/utils/index.ts

@@ -3,7 +3,8 @@ export {
   renderCouponText,
   renderCouponAmount,
   renderTotalText,
-  renderTotalAmount
+  renderTotalAmount,
+  initYearSelectList
 } from './lib/report';
 export { getUpdatedDate } from './lib/calculation';
 export { getStatusToLocaleString } from './lib/dashboard';

src/utils/lib/report.ts

@@ -53,3 +53,11 @@ export const renderTotalAmount = (informationText: [string, number]) => {
       throw new Error();
   }
 };
+
+export const initYearSelectList = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const yearList = [year, year - 1, year - 2, year - 3, year - 4];
+
+  return yearList;
+};