Merge pull request #60 from CoolPeace-yanolza/feature/#50

[#50] API GET 예시 (axios, 리액트 쿼리, 로딩, 에러)

package.json

@@ -23,6 +23,7 @@
     "react-datepicker": "^4.25.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",
+    "react-loading-skeleton": "^3.3.1",
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.21.1",
     "recoil": "^0.7.7",

src/App.tsx

@@ -18,14 +18,6 @@ import { LoadingApp } from '@components/Loading';
 
 const queryClient = new QueryClient();
 
-/* HACK: logError 논의 필요
-
-  const logError = (error: Error, info: { componentStack: string }) => {
-    // Do something with the error, e.g. log to an external API
-  };
-  
- */
-
 const App = () => {
   const { reset } = useQueryErrorResetBoundary();
 
@@ -37,12 +29,6 @@ const App = () => {
           <ErrorBoundary
             onReset={reset}
             FallbackComponent={ErrorApp}
-
-            /* HACK: logError 논의 필요
-
-              onError={logError}
-
-            */
           >
             <Suspense fallback={<LoadingApp />}>
               <BrowserRouter>

src/api/index.ts

@@ -1,5 +1,6 @@
 export { default as instance } from './lib/instance';
-export { default as getExample } from './lib/getExample';
 export { default as postLogin } from './lib/postLogin';
 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';

src/api/lib/getTotalReport.ts

@@ -0,0 +1,14 @@
+import { instance } from '..';
+import { TotalReportResult } from '@/types/report';
+
+const getTotalReport = async (
+  accommodation_id: number
+): Promise<TotalReportResult> => {
+  const response = await instance.get(
+    `/v1/dashboards/${accommodation_id}/reports/total`
+  );
+
+  return response.data;
+};
+
+export default getTotalReport;

src/api/lib/getYearReport.ts

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

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

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+const SelectYear = () => {
+  return <Container>select</Container>;
+};
+
+export default SelectYear;
+
+const Container = styled.div`
+  // HACK: 이슈 #67에서 작업중
+`;

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

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { Bar } from 'react-chartjs-2';
 
 import { ReportGraphProps } from '@/types/report';
+import SelectYear from './SelectYear';
 
 const Graph = ({ graphData }: { graphData: ReportGraphProps }) => {
   // HACK: Notice 업데이트 정책 변경
@@ -35,19 +36,22 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => {
 
   return (
     <Container>
-      <Content>
-        <Title>누적 리포트</Title>
-        <Notice>
-          프로모션 적용 이후 예약 현황을 알려드립니다.
-          <Update>(23.12.29 업데이트)</Update>
-        </Notice>
-      </Content>
-      <InnerContainer>
+      <HeaderContainer>
+        <Content>
+          <Title>누적 리포트</Title>
+          <Notice>
+            프로모션 적용 이후 예약 현황을 알려드립니다.
+            <Update>(23.12.29 업데이트)</Update>
+          </Notice>
+        </Content>
+        <SelectYear />
+      </HeaderContainer>
+      <GraphContainer>
         <BarGraph
           data={chartData}
           options={options}
         />
-      </InnerContainer>
+      </GraphContainer>
     </Container>
   );
 };
@@ -63,9 +67,15 @@ const Container = styled.div`
   flex-direction: column;
 `;
 
-const Content = styled.div`
+const HeaderContainer = styled.div`
   padding: 25px 0;
 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Content = styled.div`
   display: flex;
   align-items: flex-end;
 `;
@@ -94,7 +104,7 @@ const Update = styled.span`
   margin-left: 10px;
 `;
 
-const InnerContainer = styled.div`
+const GraphContainer = styled.div`
   position: relative;
 
   width: 100%;

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

@@ -3,15 +3,11 @@ import styled from '@emotion/styled';
 import { renderCouponAmount, renderCouponText } from '@utils/index';
 import { YearReportProps } from '@/types/report';
 
-const YearReport = ({
-  yearReportData
-}: {
-  yearReportData: YearReportProps;
-}) => {
+const YearReport = ({ yearReport }: { yearReport: YearReportProps }) => {
   return (
     <Container>
       <InnerContainer>
-        {yearReportData.map((data, index) => (
+        {yearReport.map((data, index) => (
           <Contents key={index}>
             <Text>{renderCouponText(data[0])}</Text>
             <Amount>{renderCouponAmount(data)}</Amount>
@@ -27,14 +23,13 @@ export default YearReport;
 const Container = styled.div`
   width: 100%;
 
+  margin-top: 30px;
   border-radius: 16px;
 
   background-color: #fafafb;
 `;
 
 const InnerContainer = styled.div`
-  height: 100%;
-
   padding: 25px 30px;
 
   display: flex;

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

@@ -0,0 +1,31 @@
+import { FallbackProps } from 'react-error-boundary';
+import styled from '@emotion/styled';
+
+const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
+  console.log(error);
+
+  return (
+    <Container>
+      <span>누적 리포트 차트 에러 발생</span>
+      <button onClick={resetErrorBoundary}>다시 시도</button>
+    </Container>
+  );
+};
+
+export default ErrorFallback;
+
+const Container = styled.div`
+  min-width: 1016px;
+  height: 880px;
+
+  border-radius: 20px;
+  padding: 20px 30px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  background-color: white;
+`;

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

@@ -0,0 +1,98 @@
+import styled from '@emotion/styled';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+import { DashboardHeader } from '@components/common';
+
+const Loading = () => {
+  return (
+    <Container>
+      <DashboardHeader />
+      <Graph>
+        <HeaderContainer />
+        <ChartContainer>
+          <Chart />
+        </ChartContainer>
+      </Graph>
+      <Report>
+        <Content />
+        <Content />
+        <Content />
+      </Report>
+    </Container>
+  );
+};
+
+export default Loading;
+
+const Container = styled.div`
+  min-width: 1016px;
+  height: auto;
+
+  border-radius: 20px;
+  padding: 20px 30px;
+
+  display: flex;
+  flex-direction: column;
+  flex: 2;
+
+  background-color: white;
+`;
+
+const BaseSkeleton = styled(Skeleton)`
+  width: 100%;
+
+  border-radius: 16px;
+
+  background-color: #f2f4f5;
+`;
+
+const Graph = styled.div`
+  width: 100%;
+
+  border-radius: 16px;
+
+  display: flex;
+  flex-direction: column;
+`;
+
+const HeaderContainer = styled(BaseSkeleton)`
+  margin: 12px 0;
+  padding: 18px 0;
+`;
+
+const ChartContainer = styled.div`
+  min-height: 500px;
+
+  padding: 30px;
+
+  background-color: #f2f4f5;
+`;
+
+const Chart = styled(BaseSkeleton)`
+  height: 100%;
+
+  background-color: white;
+`;
+
+const Report = styled.div`
+  width: 100%;
+  height: 100%;
+
+  margin-top: 30px;
+  border-radius: 16px;
+  padding: 25px 30px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background-color: #fafafb;
+`;
+
+const Content = styled(BaseSkeleton)`
+  width: 270px;
+  height: 130px;
+
+  border-radius: 18.5px;
+`;