Merge pull request #91 from CoolPeace-yanolza/feature/#83

[#83] 누적 리포트 QA 피드백 반영

src/components/Report/LeftSection/Graph/SelectYear/index.tsx

@@ -1,14 +1,20 @@
-import { useRecoilState } from 'recoil';
+import { useEffect } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { Dropdown, DropdownProps } from 'semantic-ui-react';
 import styled from '@emotion/styled';
 
-import { selectedYearState } from '@recoil/index';
+import { headerAccommodationState, selectedYearState } from '@recoil/index';
 import { initYearSelectList } from '@utils/index';
 import theme from '@styles/theme';
 
 const SelectYear = () => {
   const selectYearReport = initYearSelectList();
   const [selectedYear, setSelectedYear] = useRecoilState(selectedYearState);
+  const headerAccommodation = useRecoilValue(headerAccommodationState);
+
+  useEffect(() => {
+    setSelectedYear({ year: selectYearReport[0] });
+  }, [headerAccommodation]);
 
   const handleSelect = (
     _e: React.SyntheticEvent<HTMLElement>,

src/components/Report/LeftSection/Graph/index.tsx

@@ -1,14 +1,33 @@
 import styled from '@emotion/styled';
-import { Bar } from 'react-chartjs-2';
+import { Chart } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  Legend,
+  Tooltip,
+  Filler,
+  BarController
+} from 'chart.js';
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  Legend,
+  Tooltip,
+  Filler,
+  BarController
+);
 
 import { ReportGraphProps } from '@/types/report';
 import SelectYear from './SelectYear';
 import theme from '@styles/theme';
+import reloadIcon from '@assets/icons/ic-dashboard-reload.svg';
 
 const Graph = ({ graphData }: { graphData: ReportGraphProps }) => {
-  // HACK: Notice 업데이트 정책 변경
-  // utils/calculation.ts 파일 사용하여 마지막 날짜 불러오기
-
   const chartData = {
     labels: graphData.map(data => `${data.statistics_month} 월`),
     datasets: [
@@ -34,7 +53,12 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => {
   };
 
   const options = {
-    maintainAspectRatio: false
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        onClick: () => undefined
+      }
+    }
   };
 
   return (
@@ -44,15 +68,17 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => {
           <Title>누적 리포트</Title>
           <Notice>
             프로모션 적용 이후 예약 현황을 알려드립니다.
-            <Update>(23.12.29 업데이트)</Update>
+            <ReloadIcon src={reloadIcon} />
+            <Update>매월 1일 00시 00분에 업데이트</Update>
           </Notice>
         </Content>
         <SelectYear />
       </HeaderContainer>
       <GraphContainer>
         <BarGraph
-          data={chartData}
           options={options}
+          type={'bar'}
+          data={chartData}
         />
       </GraphContainer>
     </Container>
@@ -61,6 +87,10 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => {
 
 export default Graph;
 
+const ReloadIcon = styled.img`
+  margin-left: 10px;
+`;
+
 const Container = styled.div`
   width: 100%;
 
@@ -108,6 +138,9 @@ const Notice = styled.p`
   font-size: 12.5px;
   font-weight: 700;
 
+  display: flex;
+  align-items: flex-end;
+
   & > span {
     color: #8e8e8e;
     font-size: 10.5px;
@@ -120,7 +153,7 @@ const Notice = styled.p`
 `;
 
 const Update = styled.span`
-  margin-left: 10px;
+  margin-left: 3px;
 `;
 
 const GraphContainer = styled.div`
@@ -142,7 +175,7 @@ const GraphContainer = styled.div`
   }
 `;
 
-const BarGraph = styled(Bar)`
+const BarGraph = styled(Chart)`
   border-radius: 16px;
   padding: 10px 20px;
 

src/components/Report/LeftSection/index.error.tsx

@@ -1,19 +1,33 @@
 import { FallbackProps } from 'react-error-boundary';
 import styled from '@emotion/styled';
+
 import theme from '@styles/theme';
+import errorIcon from '@assets/icons/ic-error.svg';
+import reloadIcon from '@assets/icons/ic-reload.svg';
 
 const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
   return (
     <Container>
-      <span>누적 리포트 차트 에러 발생</span>
-      <button onClick={resetErrorBoundary}>다시 시도</button>
+      <ErrorIcon
+        src={errorIcon}
+        alt="에러 발생"
+      />
+      <ErrorWord>누적 리포트 차트를 불러올 수 없습니다.</ErrorWord>
+      <ReLoadButton onClick={resetErrorBoundary}>
+        <ReloadIcon
+          src={reloadIcon}
+          alt="에러 발생"
+        />
+        다시 시도 하기
+      </ReLoadButton>
     </Container>
   );
 };
 
 export default ErrorFallback;
 
 const Container = styled.div`
+  width: 100%;
   min-width: 1016px;
   height: 880px;
 
@@ -29,14 +43,71 @@ const Container = styled.div`
   background-color: white;
 
   ${theme.response.tablet} {
+    width: 95%;
     min-width: auto;
-    height: 100vw;
+    height: 300px;
 
-    margin: 30px 15px;
+    margin: 20px 0 30px 0;
     padding: 12px 15px;
 
-    justify-content: center;
-    align-items: center;
+    align-self: center;
     background-color: #f2f4f5;
   }
 `;
+
+const ErrorIcon = styled.img`
+  width: 60px;
+  height: 60px;
+
+  ${theme.response.tablet} {
+    width: 40px;
+    height: 40px;
+  }
+`;
+
+const ErrorWord = styled.span`
+  font-size: 18px;
+  font-weight: 500;
+
+  ${theme.response.tablet} {
+    font-size: 13px;
+  }
+`;
+
+const ReLoadButton = styled.button`
+  margin-top: 15px;
+  margin-left: 3px;
+  border: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: transparent;
+  font-size: 15px;
+  text-align: center;
+
+  transition: all 0.5s;
+
+  &:hover {
+    color: gray;
+  }
+
+  ${theme.response.tablet} {
+    margin-top: 10px;
+
+    font-size: 10px;
+  }
+`;
+
+const ReloadIcon = styled.img`
+  width: 25px;
+  height: 25px;
+
+  margin-right: 10px;
+
+  ${theme.response.tablet} {
+    width: 15px;
+    height: 15px;
+  }
+`;

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

@@ -2,12 +2,24 @@ import { FallbackProps } from 'react-error-boundary';
 import styled from '@emotion/styled';
 
 import theme from '@styles/theme';
+import errorIcon from '@assets/icons/ic-error.svg';
+import reloadIcon from '@assets/icons/ic-reload.svg';
 
 const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
   return (
     <Container>
-      <span>누적 똑똑 현황 에러 발생</span>
-      <button onClick={resetErrorBoundary}>다시 시도</button>
+      <ErrorIcon
+        src={errorIcon}
+        alt="에러 발생"
+      />
+      <ErrorWord>똑똑 누적 차트를 불러올 수 없습니다.</ErrorWord>
+      <ReLoadButton onClick={resetErrorBoundary}>
+        <ReloadIcon
+          src={reloadIcon}
+          alt="에러 발생"
+        />
+        다시 시도 하기
+      </ReLoadButton>
     </Container>
   );
 };
@@ -34,9 +46,69 @@ const Container = styled.div`
     width: 90%;
     max-height: 250px;
 
+    margin: 20px 0;
     padding: 15px 15px;
     border-radius: 10px;
 
+    gap: 15px;
+
     background-color: #f2f4f5;
   }
 `;
+
+const ErrorIcon = styled.img`
+  width: 35px;
+  height: 35px;
+
+  ${theme.response.tablet} {
+    width: 40px;
+    height: 40px;
+  }
+`;
+
+const ErrorWord = styled.span`
+  font-size: 14px;
+  font-weight: 500;
+
+  ${theme.response.tablet} {
+    font-size: 13px;
+  }
+`;
+
+const ReLoadButton = styled.button`
+  margin-top: 15px;
+  margin-left: 3px;
+  border: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: transparent;
+  font-size: 12px;
+  text-align: center;
+
+  transition: all 0.5s;
+
+  &:hover {
+    color: gray;
+  }
+
+  ${theme.response.tablet} {
+    margin: 0;
+
+    font-size: 10px;
+  }
+`;
+
+const ReloadIcon = styled.img`
+  width: 20px;
+  height: 20px;
+
+  margin-right: 10px;
+
+  ${theme.response.tablet} {
+    width: 15px;
+    height: 15px;
+  }
+`;

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

@@ -31,7 +31,7 @@ export default TotalReport;
 
 const Container = styled.div`
   width: 100%;
-  height: 100%;
+  height: auto;
 
   padding: 30px 15px;
   border-radius: 20px;