From c9cfa26b6f96029042bca0bbd2cfe5c94964085e Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sat, 20 Jan 2024 00:36:37 +0900 Subject: [PATCH 01/23] =?UTF-8?q?feat:=20=EC=B4=9D=20=EB=88=84=EC=A0=81=20?= =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20api=20queryFn=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.ts | 2 +- src/api/lib/getExample.ts | 5 ----- src/api/lib/getTotalReport.ts | 14 ++++++++++++++ 3 files changed, 15 insertions(+), 6 deletions(-) delete mode 100644 src/api/lib/getExample.ts create mode 100644 src/api/lib/getTotalReport.ts diff --git a/src/api/index.ts b/src/api/index.ts index c1cda60e..d61fc3b5 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,4 +1,4 @@ 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'; diff --git a/src/api/lib/getExample.ts b/src/api/lib/getExample.ts deleted file mode 100644 index b533fd34..00000000 --- a/src/api/lib/getExample.ts +++ /dev/null @@ -1,5 +0,0 @@ -const getExample = () => { - return 'getExample'; -}; - -export default getExample; diff --git a/src/api/lib/getTotalReport.ts b/src/api/lib/getTotalReport.ts new file mode 100644 index 00000000..8b6e369d --- /dev/null +++ b/src/api/lib/getTotalReport.ts @@ -0,0 +1,14 @@ +import { instance } from '..'; +import { TotalReportResult } from '@/types/report'; + +const getTotalReport = async ( + accommodation_id: number +): Promise => { + const response = await instance.get( + `/v1/dashboards/${accommodation_id}/reports/total` + ); + + return response.data; +}; + +export default getTotalReport; From 1f163047412ea23975feb07eb7a13eb52b8aa0c5 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sat, 20 Jan 2024 00:37:06 +0900 Subject: [PATCH 02/23] =?UTF-8?q?feat:=20=EC=B4=9D=20=EB=88=84=EC=A0=81=20?= =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20useSuspenseQuery=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/useGetTotalReport.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/hooks/queries/useGetTotalReport.ts diff --git a/src/hooks/queries/useGetTotalReport.ts b/src/hooks/queries/useGetTotalReport.ts new file mode 100644 index 00000000..6e3fe0dc --- /dev/null +++ b/src/hooks/queries/useGetTotalReport.ts @@ -0,0 +1,8 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; +import getTotalReport from 'src/api/lib/getTotalReport'; + +export const useGetTotalReport = (accommodation_id: number) => + useSuspenseQuery({ + queryKey: ['TotalReport', accommodation_id], + queryFn: () => getTotalReport(accommodation_id) + }); From 9d33c1e11d74f3ee8421e654cc543e504fca4656 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sat, 20 Jan 2024 00:37:57 +0900 Subject: [PATCH 03/23] =?UTF-8?q?feat:=20=EC=B4=9D=20=EB=88=84=EC=A0=81=20?= =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20api=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20=EC=84=B1=EA=B3=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Report/RightSection/TotalReport/index.tsx | 42 ++++--------------- 1 file changed, 9 insertions(+), 33 deletions(-) diff --git a/src/components/Report/RightSection/TotalReport/index.tsx b/src/components/Report/RightSection/TotalReport/index.tsx index 9a487816..2fac1ba4 100644 --- a/src/components/Report/RightSection/TotalReport/index.tsx +++ b/src/components/Report/RightSection/TotalReport/index.tsx @@ -1,47 +1,23 @@ +import { useRecoilValue } from 'recoil'; import styled from '@emotion/styled'; +import { headerAccommodationState } from '@recoil/index'; +import { useGetTotalReport } from '@hooks/queries/useGetTotalReport'; import { renderTotalAmount, renderTotalText } from '@utils/index'; import { AmountStyleProps } from '@/types/report'; const TotalReport = () => { - /* - // react-query : API 요청으로 TotalReportData fetch - // url : /v1/dashboards/{accommodation_id}/reports/total - - const { data: TotalReportData } = useFetchTotalReportData; - - // TODO: 아래 객체 형태의 TotalReportData를 배열로 바꿔 map으로 동적 컴포넌트 생성 - - { - "coupon_total_sales" : "80600000", - "coupon_use_sales" : "10000000", - "coupon_total_used_count" : "3843201", - "coupon_total_download_count" : "400000", - } - - // 방법 1: 렌더링마다 새 객체 하지 않도록 React-Query에서 OnSuccess에서 변환 -> 순서 보장 X - const InfoArray = Object.values(TotalReportData); - const InfoArray = Object.entries(strObj); - - // 방법 2: 클라이언트에서 변경하는 것보다 처음부터 순서가 보장되도록 배열로 달라고 요청하기 - // 멘토링 질문 : 이럴경우 백에서 배열로 넘겨주는 것이 비즈니스 요청사항이 수정되었을 때 유지 보수 측면에서 좋은지 - - */ - - // HACK: 순서가 보장된 배열로 받기 - // HACK: key 값이 변경되어 에러가 발생했을 때 대응하기 (에러 바운더리) - const TotalReportData = [ - ['coupon_total_sales', '80600000'], - ['coupon_use_sales', '10000000'], - ['coupon_total_used_count', '3843201'], - ['coupon_total_download_count', '400000'] - ]; + const headerSelectState = useRecoilValue(headerAccommodationState); + const { data: TotalReportResult } = useGetTotalReport( + headerSelectState.accommodationId + ); + const TotalReportArray = Object.entries(TotalReportResult); return ( 누적 똑똑 현황 - {TotalReportData.map((data, index) => ( + {TotalReportArray.map((data, index) => ( {renderTotalText(data[0])} {renderTotalAmount(data)} From fc22616ec74e58da48f7831e13396ab05536aca1 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sat, 20 Jan 2024 00:38:14 +0900 Subject: [PATCH 04/23] =?UTF-8?q?feat:=20=EB=88=84=EC=A0=81=20=EB=98=91?= =?UTF-8?q?=EB=98=91=20=ED=98=84=ED=99=A9=20=EB=A0=8C=EB=8D=94=20util=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/lib/report.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/utils/lib/report.ts b/src/utils/lib/report.ts index ffef453e..6b30600d 100644 --- a/src/utils/lib/report.ts +++ b/src/utils/lib/report.ts @@ -39,16 +39,16 @@ export const renderTotalText = (informationText: string) => { } }; -export const renderTotalAmount = (informationText: string[]) => { +export const renderTotalAmount = (informationText: [string, number]) => { switch (informationText[0]) { case 'coupon_total_sales': - return `${Number(informationText[1]).toLocaleString()} 원`; + return `${informationText[1].toLocaleString()} 원`; case 'coupon_use_sales': - return `${Number(informationText[1]).toLocaleString()} 원`; + return `${informationText[1].toLocaleString()} 원`; case 'coupon_total_used_count': - return `${Number(informationText[1]).toLocaleString()} 회`; + return `${informationText[1].toLocaleString()} 회`; case 'coupon_total_download_count': - return `${Number(informationText[1]).toLocaleString()} 개`; + return `${informationText[1].toLocaleString()} 개`; default: throw new Error(); } From 6a5d7163308f9434bd592a4052aa15a56d0ccce0 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sat, 20 Jan 2024 00:38:35 +0900 Subject: [PATCH 05/23] =?UTF-8?q?feat:=20=EC=B4=9D=20=EB=88=84=EC=A0=81=20?= =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20api=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20=EC=84=B1=EA=B3=B5=20=ED=83=80=EC=9E=85=20=EC=A7=80?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/report.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/types/report.ts b/src/types/report.ts index 7120a107..65a096f9 100644 --- a/src/types/report.ts +++ b/src/types/report.ts @@ -7,3 +7,10 @@ export type ReportGraphProps = { export type YearReportProps = [string, string][]; export type AmountStyleProps = { $isfirstamount: number }; + +export type TotalReportResult = { + coupon_total_sales: number; + coupon_use_sales: number; + coupon_total_used_count: number; + coupon_total_download_count: number; +}; From ecc9a87c3d8259a353903f4ecaa8a8fb919e352f Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sat, 20 Jan 2024 00:38:57 +0900 Subject: [PATCH 06/23] =?UTF-8?q?feat:=20=EC=B4=9D=20=EB=88=84=EC=A0=81=20?= =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20api=20=EB=A1=9C?= =?UTF-8?q?=EB=94=A9=20=EB=B0=8F=20=EC=97=90=EB=9F=AC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RightSection/TotalReport/index.error.tsx | 15 +++++++++++++++ .../RightSection/TotalReport/index.loading.tsx | 5 +++++ src/components/Report/RightSection/index.tsx | 16 +++++++++++++++- 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 src/components/Report/RightSection/TotalReport/index.error.tsx create mode 100644 src/components/Report/RightSection/TotalReport/index.loading.tsx diff --git a/src/components/Report/RightSection/TotalReport/index.error.tsx b/src/components/Report/RightSection/TotalReport/index.error.tsx new file mode 100644 index 00000000..45ca16d6 --- /dev/null +++ b/src/components/Report/RightSection/TotalReport/index.error.tsx @@ -0,0 +1,15 @@ +import { FallbackProps } from 'react-error-boundary'; + +const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => { + return ( +
+
+ 누적 똑똑 현황 에러 발생 + {error.message} + +
+
+ ); +}; + +export default ErrorFallback; diff --git a/src/components/Report/RightSection/TotalReport/index.loading.tsx b/src/components/Report/RightSection/TotalReport/index.loading.tsx new file mode 100644 index 00000000..df9efb39 --- /dev/null +++ b/src/components/Report/RightSection/TotalReport/index.loading.tsx @@ -0,0 +1,5 @@ +const Loading = () => { + return

누적 똑똑 현황 리포트 로딩중!

; +}; + +export default Loading; diff --git a/src/components/Report/RightSection/index.tsx b/src/components/Report/RightSection/index.tsx index 827777cc..64c1ca9b 100644 --- a/src/components/Report/RightSection/index.tsx +++ b/src/components/Report/RightSection/index.tsx @@ -1,12 +1,26 @@ +import { Suspense } from 'react'; +import { useQueryErrorResetBoundary } from '@tanstack/react-query'; +import { ErrorBoundary } from 'react-error-boundary'; import styled from '@emotion/styled'; import TotalReport from './TotalReport'; import Catchphrase from './Catchphrase'; +import Loading from './TotalReport/index.loading'; +import ErrorFallback from './TotalReport/index.error'; const RightSection = () => { + const { reset } = useQueryErrorResetBoundary(); + return (
- + + }> + + +
); From 9136d1fef605310167310364ef5aace0ae90c299 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sat, 20 Jan 2024 02:40:48 +0900 Subject: [PATCH 07/23] =?UTF-8?q?chore:=20react-loading-skeleton=20?= =?UTF-8?q?=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 9 +++++++++ package.json | 1 + 2 files changed, 10 insertions(+) diff --git a/package-lock.json b/package-lock.json index d8fa7510..77a29f8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.12", + "react-loading-skeleton": "^3.3.1", "react-router-dom": "^6.21.1", "recoil": "^0.7.7", "recoil-persist": "^5.1.0" @@ -6382,6 +6383,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-loading-skeleton": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.3.1.tgz", + "integrity": "sha512-NilqqwMh2v9omN7LteiDloEVpFyMIa0VGqF+ukqp0ncVlYu1sKYbYGX9JEl+GtOT9TKsh04zCHAbavnQ2USldA==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-router": { "version": "6.21.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", diff --git a/package.json b/package.json index de44ddf7..8c7218e7 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.12", + "react-loading-skeleton": "^3.3.1", "react-router-dom": "^6.21.1", "recoil": "^0.7.7", "recoil-persist": "^5.1.0" From 6abd7609614ca53e4d91fca3960845252788eea8 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sat, 20 Jan 2024 02:41:17 +0900 Subject: [PATCH 08/23] =?UTF-8?q?modify:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 7048611b..423e2815 100644 --- a/src/App.tsx +++ b/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 = () => { }> From e1ac8e4c9bd5a49abfda7f61b66a8de1f30cb954 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sat, 20 Jan 2024 03:27:46 +0900 Subject: [PATCH 09/23] =?UTF-8?q?feat:=20=EC=B4=9D=20=EB=88=84=EC=A0=81=20?= =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20=EC=8A=A4=EC=BC=88?= =?UTF-8?q?=EB=A0=88=ED=86=A4=20=EB=A1=9C=EB=94=A9=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TotalReport/index.loading.tsx | 59 ++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/src/components/Report/RightSection/TotalReport/index.loading.tsx b/src/components/Report/RightSection/TotalReport/index.loading.tsx index df9efb39..c3e989a5 100644 --- a/src/components/Report/RightSection/TotalReport/index.loading.tsx +++ b/src/components/Report/RightSection/TotalReport/index.loading.tsx @@ -1,5 +1,62 @@ +import styled from '@emotion/styled'; +import Skeleton from 'react-loading-skeleton'; +import 'react-loading-skeleton/dist/skeleton.css'; + const Loading = () => { - return

누적 똑똑 현황 리포트 로딩중!

; + return ( + + + <ContentsWrapper> + <Contents count={4} /> + </ContentsWrapper> + </Container> + ); }; export default Loading; + +const Container = styled.div` + width: 100%; + height: 100%; + + padding: 30px 15px; + border-radius: 20px; + + display: flex; + flex-direction: column; + + background-color: white; +`; + +const Title = styled(Skeleton)` + width: 60%; + + margin: 10px 0 20px 0; + padding: 5px 0; + border-radius: 12px; + + background-color: #f2f4f5; +`; + +const ContentsWrapper = styled.div` + width: 100%; + + border-radius: 16px; + + display: flex; + flex-direction: column; + gap: 10px; +`; + +const Contents = styled(Skeleton)` + width: 100%; + height: 100px; + + border-radius: 16px; + padding: 10px; + + display: flex; + flex-direction: column; + + background-color: #f2f4f5; +`; From 6ea180a472500b44920bda738f5a1b27a6991b44 Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sat, 20 Jan 2024 03:30:10 +0900 Subject: [PATCH 10/23] =?UTF-8?q?feat:=20=EC=B4=9D=20=EB=88=84=EC=A0=81=20?= =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RightSection/TotalReport/index.error.tsx | 34 +++++++++++++++---- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/src/components/Report/RightSection/TotalReport/index.error.tsx b/src/components/Report/RightSection/TotalReport/index.error.tsx index 45ca16d6..8ab02146 100644 --- a/src/components/Report/RightSection/TotalReport/index.error.tsx +++ b/src/components/Report/RightSection/TotalReport/index.error.tsx @@ -1,15 +1,35 @@ import { FallbackProps } from 'react-error-boundary'; +import styled from '@emotion/styled'; const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => { + console.log(error); + return ( - <div> - <div> - <span>누적 똑똑 현황 에러 발생</span> - <span>{error.message}</span> - <button onClick={resetErrorBoundary}>다시 시도</button> - </div> - </div> + <Container> + <ErrorMessage>누적 똑똑 현황 에러 발생</ErrorMessage> + <RetryButton onClick={resetErrorBoundary}>다시 시도</RetryButton> + </Container> ); }; export default ErrorFallback; + +const Container = styled.div` + width: 100%; + height: 580px; + + padding: 30px 15px; + border-radius: 20px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + + background-color: white; +`; + +const ErrorMessage = styled.span``; + +const RetryButton = styled.button``; From 2e43f82c37e36dc54c5b458a3b7a2508c9771a99 Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sat, 20 Jan 2024 03:30:16 +0900 Subject: [PATCH 11/23] =?UTF-8?q?feat:=20=EC=B4=9D=20=EB=88=84=EC=A0=81=20?= =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EB=B6=84=ED=95=A0=EB=A1=9C=20=EB=8F=99=EC=A0=81=20=EB=B2=88?= =?UTF-8?q?=EB=93=A4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Report/RightSection/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Report/RightSection/index.tsx b/src/components/Report/RightSection/index.tsx index 64c1ca9b..3da65932 100644 --- a/src/components/Report/RightSection/index.tsx +++ b/src/components/Report/RightSection/index.tsx @@ -1,9 +1,9 @@ -import { Suspense } from 'react'; +import React, { Suspense } from 'react'; import { useQueryErrorResetBoundary } from '@tanstack/react-query'; import { ErrorBoundary } from 'react-error-boundary'; import styled from '@emotion/styled'; -import TotalReport from './TotalReport'; +const TotalReport = React.lazy(() => import('./TotalReport')); import Catchphrase from './Catchphrase'; import Loading from './TotalReport/index.loading'; import ErrorFallback from './TotalReport/index.error'; From 000e708eac1f4bdca889a0175edf51ac50694b91 Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sat, 20 Jan 2024 21:53:39 +0900 Subject: [PATCH 12/23] =?UTF-8?q?design:=20=EC=B4=9D=20=EB=88=84=EC=A0=81?= =?UTF-8?q?=20=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20=EB=A1=9C=EB=94=A9?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TotalReport/index.loading.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/Report/RightSection/TotalReport/index.loading.tsx b/src/components/Report/RightSection/TotalReport/index.loading.tsx index c3e989a5..2f4959fd 100644 --- a/src/components/Report/RightSection/TotalReport/index.loading.tsx +++ b/src/components/Report/RightSection/TotalReport/index.loading.tsx @@ -28,14 +28,21 @@ const Container = styled.div` background-color: white; `; -const Title = styled(Skeleton)` +const BaseSkeleton = styled(Skeleton)` + width: 100%; + + border-radius: 16px; + + background-color: #f2f4f5; +`; + +const Title = styled(BaseSkeleton)` width: 60%; margin: 10px 0 20px 0; padding: 5px 0; - border-radius: 12px; - background-color: #f2f4f5; + border-radius: 12px; `; const ContentsWrapper = styled.div` @@ -48,15 +55,10 @@ const ContentsWrapper = styled.div` gap: 10px; `; -const Contents = styled(Skeleton)` - width: 100%; +const Contents = styled(BaseSkeleton)` height: 100px; - - border-radius: 16px; padding: 10px; display: flex; flex-direction: column; - - background-color: #f2f4f5; `; From c6db37d2bd46648f5eb47ea459bced8fe7f8199b Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sat, 20 Jan 2024 21:54:17 +0900 Subject: [PATCH 13/23] =?UTF-8?q?modify:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/MainRouter/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/MainRouter/index.tsx b/src/routes/MainRouter/index.tsx index 25b7b21f..8c6f8357 100644 --- a/src/routes/MainRouter/index.tsx +++ b/src/routes/MainRouter/index.tsx @@ -1,4 +1,3 @@ -// import CouponList from '@pages/CouponList'; import { Route, Routes } from 'react-router-dom'; import { Layout } from '@components/common'; From 11ce2474d779e216c10e227af0f5824415b1431d Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sat, 20 Jan 2024 21:59:40 +0900 Subject: [PATCH 14/23] =?UTF-8?q?design:=20=EC=B4=9D=20=EB=88=84=EC=A0=81?= =?UTF-8?q?=20=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Report/RightSection/TotalReport/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Report/RightSection/TotalReport/index.tsx b/src/components/Report/RightSection/TotalReport/index.tsx index 2fac1ba4..9f8ef7a3 100644 --- a/src/components/Report/RightSection/TotalReport/index.tsx +++ b/src/components/Report/RightSection/TotalReport/index.tsx @@ -80,7 +80,6 @@ const Text = styled.span` `; const Amount = styled.span<AmountStyleProps>` - width: 100%; height: 100px; border-radius: 16px; From 1c382da23d25b556c274d0568426b253096e578b Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sat, 20 Jan 2024 22:12:22 +0900 Subject: [PATCH 15/23] =?UTF-8?q?design:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=20=EC=8B=9C=20html=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=EC=BB=A8=EB=B2=A4=EC=85=98=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Report/RightSection/TotalReport/index.error.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/Report/RightSection/TotalReport/index.error.tsx b/src/components/Report/RightSection/TotalReport/index.error.tsx index 8ab02146..5ffe0aab 100644 --- a/src/components/Report/RightSection/TotalReport/index.error.tsx +++ b/src/components/Report/RightSection/TotalReport/index.error.tsx @@ -6,8 +6,8 @@ const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => { return ( <Container> - <ErrorMessage>누적 똑똑 현황 에러 발생</ErrorMessage> - <RetryButton onClick={resetErrorBoundary}>다시 시도</RetryButton> + <span>누적 똑똑 현황 에러 발생</span> + <button onClick={resetErrorBoundary}>다시 시도</button> </Container> ); }; @@ -29,7 +29,3 @@ const Container = styled.div` background-color: white; `; - -const ErrorMessage = styled.span``; - -const RetryButton = styled.button``; From 91279a08a0711ca7ec30158970172d930beba4fb Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sun, 21 Jan 2024 00:49:07 +0900 Subject: [PATCH 16/23] =?UTF-8?q?remove:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20query=20hook=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/useGetExample.ts | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 src/hooks/queries/useGetExample.ts diff --git a/src/hooks/queries/useGetExample.ts b/src/hooks/queries/useGetExample.ts deleted file mode 100644 index fa5dd91c..00000000 --- a/src/hooks/queries/useGetExample.ts +++ /dev/null @@ -1,5 +0,0 @@ -const useExample = () => { - return '리액트 쿼리 훅 로직 작성'; -}; - -export default useExample; From d418c6b3faf8611ab8010721459592ba26c8c590 Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sun, 21 Jan 2024 00:51:20 +0900 Subject: [PATCH 17/23] =?UTF-8?q?feat:=20=EB=88=84=EC=A0=81=20=EC=97=B0?= =?UTF-8?q?=EB=8F=84=20=EB=A6=AC=ED=8F=AC=ED=8A=B8=20api=20queryFn=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.ts | 1 + src/api/lib/getYearReport.ts | 15 +++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 src/api/lib/getYearReport.ts diff --git a/src/api/index.ts b/src/api/index.ts index d61fc3b5..cecb4d8f 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -2,3 +2,4 @@ export { default as instance } from './lib/instance'; 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'; diff --git a/src/api/lib/getYearReport.ts b/src/api/lib/getYearReport.ts new file mode 100644 index 00000000..42a4d44e --- /dev/null +++ b/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; From 9146c79e9e3b2ec4fc95a38ff918ee16a2ea1237 Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sun, 21 Jan 2024 00:52:07 +0900 Subject: [PATCH 18/23] =?UTF-8?q?feat:=20=EB=88=84=EC=A0=81=20=EC=97=B0?= =?UTF-8?q?=EB=8F=84=20=EB=A6=AC=ED=8F=AC=ED=8A=B8=20useSuspenseQuery=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/useGetYearReport.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/hooks/queries/useGetYearReport.ts diff --git a/src/hooks/queries/useGetYearReport.ts b/src/hooks/queries/useGetYearReport.ts new file mode 100644 index 00000000..4b88415b --- /dev/null +++ b/src/hooks/queries/useGetYearReport.ts @@ -0,0 +1,11 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; +import { getYearReport } from 'src/api'; + +// recoil로 쿼리 정보 가져오기 +const useGetYearReport = (accommodation_id: number) => + useSuspenseQuery({ + queryKey: ['YearReport', accommodation_id], + queryFn: () => getYearReport(accommodation_id) + }); + +export default useGetYearReport; From c4dbc68cc392d856e40df20e4bbbc14a266802cf Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sun, 21 Jan 2024 00:53:03 +0900 Subject: [PATCH 19/23] =?UTF-8?q?modify:=20=EA=B8=B0=EC=A1=B4=20query=20ho?= =?UTF-8?q?ok=20=ED=8C=8C=EC=9D=BC=20=EC=BB=A8=EB=B2=A4=EC=85=98=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/index.ts | 3 ++- src/hooks/queries/useGetTotalReport.ts | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 6a7cf292..8da9dfdf 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -2,4 +2,5 @@ export { default as useOutsideClick } from './lib/useOutsideClick'; /* quries hooks */ -export { default as useGetExample } from './queries/useGetExample'; +export { default as useGetTotalReport } from './queries/useGetTotalReport'; +export { default as useGetYearReport } from './queries/useGetYearReport'; diff --git a/src/hooks/queries/useGetTotalReport.ts b/src/hooks/queries/useGetTotalReport.ts index 6e3fe0dc..1e450c11 100644 --- a/src/hooks/queries/useGetTotalReport.ts +++ b/src/hooks/queries/useGetTotalReport.ts @@ -1,8 +1,10 @@ import { useSuspenseQuery } from '@tanstack/react-query'; -import getTotalReport from 'src/api/lib/getTotalReport'; +import { getTotalReport } from 'src/api'; -export const useGetTotalReport = (accommodation_id: number) => +const useGetTotalReport = (accommodation_id: number) => useSuspenseQuery({ queryKey: ['TotalReport', accommodation_id], queryFn: () => getTotalReport(accommodation_id) }); + +export default useGetTotalReport; From c6e052a9fa9610f0692449f7a7e87882a4672f9d Mon Sep 17 00:00:00 2001 From: JitHoon <imessi0336@gmail.com> Date: Sun, 21 Jan 2024 00:54:35 +0900 Subject: [PATCH 20/23] =?UTF-8?q?feat:=20=EB=88=84=EC=A0=81=20=EC=97=B0?= =?UTF-8?q?=EB=8F=84=20=EB=A6=AC=ED=8F=AC=ED=8A=B8=20api=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20=EC=84=B1=EA=B3=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LeftSection/Graph/SelectYear/index.tsx | 11 ++ .../Report/LeftSection/Graph/index.tsx | 32 +++-- .../Report/LeftSection/YearReport/index.tsx | 11 +- src/components/Report/LeftSection/index.tsx | 113 ++---------------- 4 files changed, 47 insertions(+), 120 deletions(-) create mode 100644 src/components/Report/LeftSection/Graph/SelectYear/index.tsx diff --git a/src/components/Report/LeftSection/Graph/SelectYear/index.tsx b/src/components/Report/LeftSection/Graph/SelectYear/index.tsx new file mode 100644 index 00000000..1c87ba93 --- /dev/null +++ b/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에서 작업중 +`; diff --git a/src/components/Report/LeftSection/Graph/index.tsx b/src/components/Report/LeftSection/Graph/index.tsx index af6a9998..161d3a15 100644 --- a/src/components/Report/LeftSection/Graph/index.tsx +++ b/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>누적 리포트 - - 프로모션 적용 이후 예약 현황을 알려드립니다. - (23.12.29 업데이트) - - - + + + 누적 리포트 + + 프로모션 적용 이후 예약 현황을 알려드립니다. + (23.12.29 업데이트) + + + + + - + ); }; @@ -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%; diff --git a/src/components/Report/LeftSection/YearReport/index.tsx b/src/components/Report/LeftSection/YearReport/index.tsx index 2801fe0a..642b9a9b 100644 --- a/src/components/Report/LeftSection/YearReport/index.tsx +++ b/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 ( - {yearReportData.map((data, index) => ( + {yearReport.map((data, index) => ( {renderCouponText(data[0])} {renderCouponAmount(data)} @@ -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; diff --git a/src/components/Report/LeftSection/index.tsx b/src/components/Report/LeftSection/index.tsx index b8b3cd90..633dedb9 100644 --- a/src/components/Report/LeftSection/index.tsx +++ b/src/components/Report/LeftSection/index.tsx @@ -1,116 +1,27 @@ +import { useRecoilValue } from 'recoil'; import styled from '@emotion/styled'; +import { headerAccommodationState } from '@recoil/index'; +import { useGetYearReport } from '@hooks/index'; import { DashboardHeader } from '@components/common'; import YearReport from './YearReport'; import Graph from './Graph'; const LeftSection = () => { - /* - // react-query : API 요청으로 TotalReportInfo fetch - // url : /v1/dashboards/{accommodation_id}/reports/year - - // const { data: yearReportData } = useFetchYearReportData; - - { - "coupon_total_sales" : "80600000", - "coupon_use_sales" : "10000000", - "coupon_total_used_count" : "3843201", - "coupon_sales_list": [{ - "statistics_month":"1", - "total_sales":"4000000", - "coupon_total_sales":"3500000" - },{ - "statistics_month":"2", - "total_sales":"3000000", - "coupon_total_sales":"3100000" - } - ...] - } - - // 데이터 비구조화 할당으로 props 분리 - const { coupon_sales_list: GraphProps, ...YearReportProps } = yearReportData - - */ - - const yearReportFetchData = { - coupon_total_sales: '42000000', - coupon_use_sales: '365', - coupon_total_used_count: '9800000', - coupon_sales_list: [ - { - statistics_month: '1', - total_sales: '4000000', - coupon_total_sales: '3500000' - }, - { - statistics_month: '2', - total_sales: '3000000', - coupon_total_sales: '3100000' - }, - { - statistics_month: '3', - total_sales: '4500000', - coupon_total_sales: '4000000' - }, - { - statistics_month: '4', - total_sales: '5000000', - coupon_total_sales: '4200000' - }, - { - statistics_month: '5', - total_sales: '6000000', - coupon_total_sales: '5100000' - }, - { - statistics_month: '6', - total_sales: '7000000', - coupon_total_sales: '6200000' - }, - { - statistics_month: '7', - total_sales: '8000000', - coupon_total_sales: '7300000' - }, - { - statistics_month: '8', - total_sales: '9000000', - coupon_total_sales: '8400000' - }, - { - statistics_month: '9', - total_sales: '9500000', - coupon_total_sales: '9100000' - }, - { - statistics_month: '10', - total_sales: '10000000', - coupon_total_sales: '10500000' - }, - { - statistics_month: '11', - total_sales: '11500000', - coupon_total_sales: '11000000' - }, - { - statistics_month: '12', - total_sales: '12500000', - coupon_total_sales: '12000000' - } - ] - }; - - const { coupon_sales_list: graphProps, ...yearReportProps } = - yearReportFetchData; - - // HACK: [string, string][]으로 데이터 변환 - const yearReportData = Object.entries(yearReportProps); + const headerSelectState = useRecoilValue(headerAccommodationState); + // HACK: recoil로 쿼리 정보 가져오기, 이슈 #67 에서 작업중 + const { data: yearReportData } = useGetYearReport( + headerSelectState.accommodationId + ); + const { coupon_sales_list: graphProps, ...yearReportProps } = yearReportData; + // HACK: 배열 순서 변경 필요, 이슈 #67 에서 작업중 + const yearReport = Object.entries(yearReportProps); return ( - + ); }; From 04e3153f048d428216bd419dd6c49d83781e7a3b Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 00:55:35 +0900 Subject: [PATCH 21/23] =?UTF-8?q?fix:=20=EB=88=84=EC=A0=81=20=EC=97=B0?= =?UTF-8?q?=EB=8F=84=20=EB=A6=AC=ED=8F=AC=ED=8A=B8=20util=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EB=B0=8F=20import=20=EC=97=90=EB=9F=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Report/RightSection/TotalReport/index.tsx | 2 +- src/utils/lib/report.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Report/RightSection/TotalReport/index.tsx b/src/components/Report/RightSection/TotalReport/index.tsx index 9f8ef7a3..6c009466 100644 --- a/src/components/Report/RightSection/TotalReport/index.tsx +++ b/src/components/Report/RightSection/TotalReport/index.tsx @@ -2,7 +2,7 @@ import { useRecoilValue } from 'recoil'; import styled from '@emotion/styled'; import { headerAccommodationState } from '@recoil/index'; -import { useGetTotalReport } from '@hooks/queries/useGetTotalReport'; +import useGetTotalReport from '@hooks/queries/useGetTotalReport'; import { renderTotalAmount, renderTotalText } from '@utils/index'; import { AmountStyleProps } from '@/types/report'; diff --git a/src/utils/lib/report.ts b/src/utils/lib/report.ts index 6b30600d..a00495c2 100644 --- a/src/utils/lib/report.ts +++ b/src/utils/lib/report.ts @@ -3,9 +3,9 @@ export const renderCouponText = (informationText: string) => { case 'coupon_total_sales': return '쿠폰 사용 총 매출'; case 'coupon_use_sales': - return '쿠폰 사용 총 횟수'; - case 'coupon_total_used_count': return '쿠폰 사용 금액'; + case 'coupon_total_used_count': + return '쿠폰 사용 총 횟수'; default: throw new Error(); } @@ -14,11 +14,11 @@ export const renderCouponText = (informationText: string) => { export const renderCouponAmount = (informationText: string[]) => { switch (informationText[0]) { case 'coupon_total_sales': - return `${Number(informationText[1]).toLocaleString()} 원`; + return `${informationText[1].toLocaleString()} 원`; case 'coupon_use_sales': - return `${Number(informationText[1]).toLocaleString()} 회`; + return `${informationText[1].toLocaleString()} 원`; case 'coupon_total_used_count': - return `${Number(informationText[1]).toLocaleString()} 원`; + return `${informationText[1].toLocaleString()} 회`; default: throw new Error(); } From a97b02ad89854273d647238ba1973f60d99169f7 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 00:56:01 +0900 Subject: [PATCH 22/23] =?UTF-8?q?feat:=20=EB=88=84=EC=A0=81=20=EC=97=B0?= =?UTF-8?q?=EB=8F=84=20=EB=A6=AC=ED=8F=AC=ED=8A=B8=20api=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20=EC=84=B1=EA=B3=B5=20=ED=83=80=EC=9E=85=20=EC=A7=80?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/report.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/types/report.ts b/src/types/report.ts index 65a096f9..f30be4a5 100644 --- a/src/types/report.ts +++ b/src/types/report.ts @@ -14,3 +14,16 @@ export type TotalReportResult = { coupon_total_used_count: number; coupon_total_download_count: number; }; + +type CouponSalesItem = { + statistics_month: string; + total_sales: string; + coupon_total_sales: string; +}; + +export type YearReportResult = { + coupon_total_sales: string; + coupon_use_sales: string; + coupon_total_used_count: string; + coupon_sales_list: CouponSalesItem[]; +}; From 54af717bbc802c5d58cbdca9b7ef5796e9de85cd Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 00:56:19 +0900 Subject: [PATCH 23/23] =?UTF-8?q?feat:=20=EB=88=84=EC=A0=81=20=EC=97=B0?= =?UTF-8?q?=EB=8F=84=20=EB=A6=AC=ED=8F=AC=ED=8A=B8=20api=20=EB=A1=9C?= =?UTF-8?q?=EB=94=A9=20=EB=B0=8F=20=EC=97=90=EB=9F=AC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Report/LeftSection/index.error.tsx | 31 ++++++ .../Report/LeftSection/index.loading.tsx | 98 +++++++++++++++++++ src/pages/Report/index.tsx | 17 +++- 3 files changed, 144 insertions(+), 2 deletions(-) create mode 100644 src/components/Report/LeftSection/index.error.tsx create mode 100644 src/components/Report/LeftSection/index.loading.tsx diff --git a/src/components/Report/LeftSection/index.error.tsx b/src/components/Report/LeftSection/index.error.tsx new file mode 100644 index 00000000..2cb336f6 --- /dev/null +++ b/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 ( + + 누적 리포트 차트 에러 발생 + + + ); +}; + +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; +`; diff --git a/src/components/Report/LeftSection/index.loading.tsx b/src/components/Report/LeftSection/index.loading.tsx new file mode 100644 index 00000000..bfe744c2 --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + + ); +}; + +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; +`; diff --git a/src/pages/Report/index.tsx b/src/pages/Report/index.tsx index 84ef12ba..d25a69f6 100644 --- a/src/pages/Report/index.tsx +++ b/src/pages/Report/index.tsx @@ -1,12 +1,25 @@ +import { Suspense } from 'react'; +import { useQueryErrorResetBoundary } from '@tanstack/react-query'; +import { ErrorBoundary } from 'react-error-boundary'; import styled from '@emotion/styled'; import { LeftSection, RightSection } from '@components/Report'; +import ErrorFallback from '@components/Report/LeftSection/index.error'; +import Loading from '@components/Report/LeftSection/index.loading'; const Report = () => { + const { reset } = useQueryErrorResetBoundary(); + return ( - // HACK: 로딩 화면 구현 (Suspense) // 로딩 감싸는 기준 정하기 - + + }> + + + );