From 5381d721eef70ac8a1dccafaa6abdaca6e6256ed Mon Sep 17 00:00:00 2001 From: JitHoon Date: Tue, 23 Jan 2024 18:10:40 +0900 Subject: [PATCH 1/9] =?UTF-8?q?fix:=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8?= =?UTF-8?q?=EC=8B=9C=20=EB=88=84=EC=A0=81=20=EB=A6=AC=ED=8F=AC=ED=8A=B8=20?= =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EC=97=90=EB=9F=AC=20=EB=B0=9C=EC=83=9D=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Report/LeftSection/Graph/index.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/Report/LeftSection/Graph/index.tsx b/src/components/Report/LeftSection/Graph/index.tsx index 26539ca1..3ab7165f 100644 --- a/src/components/Report/LeftSection/Graph/index.tsx +++ b/src/components/Report/LeftSection/Graph/index.tsx @@ -1,5 +1,12 @@ import styled from '@emotion/styled'; -import { Bar } from 'react-chartjs-2'; +import { Chart } from 'react-chartjs-2'; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + BarElement +} from 'chart.js'; +ChartJS.register(CategoryScale, LinearScale, BarElement); import { ReportGraphProps } from '@/types/report'; import SelectYear from './SelectYear'; @@ -51,8 +58,9 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => { @@ -142,7 +150,7 @@ const GraphContainer = styled.div` } `; -const BarGraph = styled(Bar)` +const BarGraph = styled(Chart)` border-radius: 16px; padding: 10px 20px; From 779213f74f4b512d036316c6fcaeeffc519dd959 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Tue, 23 Jan 2024 18:34:11 +0900 Subject: [PATCH 2/9] =?UTF-8?q?fix:=20=EB=88=84=EC=A0=81=EB=A6=AC=ED=8F=AC?= =?UTF-8?q?=ED=8A=B8=20=EC=97=B0=EB=8F=84=20=EC=84=A0=ED=83=9D=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Report/LeftSection/Graph/SelectYear/index.tsx | 10 ++++++++-- src/recoil/atoms/selectedYearState.ts | 6 +----- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/Report/LeftSection/Graph/SelectYear/index.tsx b/src/components/Report/LeftSection/Graph/SelectYear/index.tsx index ef3bddda..56e4f1f8 100644 --- a/src/components/Report/LeftSection/Graph/SelectYear/index.tsx +++ b/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, diff --git a/src/recoil/atoms/selectedYearState.ts b/src/recoil/atoms/selectedYearState.ts index 7e29632f..b3c567c0 100644 --- a/src/recoil/atoms/selectedYearState.ts +++ b/src/recoil/atoms/selectedYearState.ts @@ -1,12 +1,8 @@ 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] + default: { year: new Date().getFullYear() } }); export default selectedYearState; From 7979032c4e17cf26abb8265b406b95f25191d793 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Tue, 23 Jan 2024 19:08:00 +0900 Subject: [PATCH 3/9] =?UTF-8?q?fix:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20ON/OFF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Layout/Header/User/UserModal/index.tsx | 12 ++---------- .../common/Layout/Header/User/index.tsx | 19 +++++++++++-------- src/types/layout.ts | 1 - 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/components/common/Layout/Header/User/UserModal/index.tsx b/src/components/common/Layout/Header/User/UserModal/index.tsx index e0acb458..a0a5e6b9 100644 --- a/src/components/common/Layout/Header/User/UserModal/index.tsx +++ b/src/components/common/Layout/Header/User/UserModal/index.tsx @@ -1,23 +1,15 @@ -import { useRef } from 'react'; import styled from '@emotion/styled'; import { UserModal, UserModalStyleProps } from '@/types/layout'; -import { useOutsideClick } from '@hooks/index'; import { getCookies } from '@utils/lib/cookies'; import theme from '@styles/theme'; -const UserModal = ({ isOpen, setIsUserModalOpen }: UserModal) => { - const modalRef = useRef(null); +const UserModal = ({ isOpen }: UserModal) => { const userName = getCookies('userName'); const userEmail = getCookies('userEmail'); - useOutsideClick(modalRef, () => setIsUserModalOpen(false)); - return ( - + {userName} {userEmail} diff --git a/src/components/common/Layout/Header/User/index.tsx b/src/components/common/Layout/Header/User/index.tsx index 27515dd4..b2a093e7 100644 --- a/src/components/common/Layout/Header/User/index.tsx +++ b/src/components/common/Layout/Header/User/index.tsx @@ -1,25 +1,28 @@ -import { useState } from 'react'; +import { useState, useRef } from 'react'; import styled from '@emotion/styled'; import user from '@assets/icons/ic-header-user.svg'; import UserModal from './UserModal'; +import { useOutsideClick } from '@hooks/index'; import theme from '@styles/theme'; const User = () => { + const modalRef = useRef(null); const [isUserModalOpen, setIsUserModalOpen] = useState(false); + useOutsideClick(modalRef, () => setIsUserModalOpen(false)); + return ( - <> +
setIsUserModalOpen(prev => !prev)} - /> - { + setIsUserModalOpen(prev => !prev); + }} /> - + +
); }; diff --git a/src/types/layout.ts b/src/types/layout.ts index aa24c354..e3889131 100644 --- a/src/types/layout.ts +++ b/src/types/layout.ts @@ -46,7 +46,6 @@ export type CustomNavLink = { // User export type UserModal = { isOpen: boolean; - setIsUserModalOpen: React.Dispatch>; }; export type UserModalStyleProps = { From 405870c3d7b9305a0a15ec6d1d86d2fe9d546dd1 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Tue, 23 Jan 2024 19:39:45 +0900 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20=EA=B7=B8=EB=9E=98=ED=94=84=20?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EB=B8=94=EB=9D=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Report/LeftSection/Graph/index.tsx | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/Report/LeftSection/Graph/index.tsx b/src/components/Report/LeftSection/Graph/index.tsx index 3ab7165f..b9c2b732 100644 --- a/src/components/Report/LeftSection/Graph/index.tsx +++ b/src/components/Report/LeftSection/Graph/index.tsx @@ -4,9 +4,23 @@ import { Chart as ChartJS, CategoryScale, LinearScale, - BarElement + BarElement, + LineElement, + Legend, + Tooltip, + Filler, + BarController } from 'chart.js'; -ChartJS.register(CategoryScale, LinearScale, BarElement); +ChartJS.register( + CategoryScale, + LinearScale, + BarElement, + LineElement, + Legend, + Tooltip, + Filler, + BarController +); import { ReportGraphProps } from '@/types/report'; import SelectYear from './SelectYear'; @@ -41,7 +55,12 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => { }; const options = { - maintainAspectRatio: false + maintainAspectRatio: false, + plugins: { + legend: { + onClick: () => undefined + } + } }; return ( From f32ea8687ce40096ee0e450c9c88e9a4f53b2664 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Tue, 23 Jan 2024 19:55:36 +0900 Subject: [PATCH 5/9] =?UTF-8?q?fix:=20=EB=88=84=EC=A0=81=20=EB=A6=AC?= =?UTF-8?q?=ED=8F=AC=ED=8A=B8=20=EC=97=90=EB=9F=AC=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Report/LeftSection/index.error.tsx | 1 + src/pages/Report/index.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Report/LeftSection/index.error.tsx b/src/components/Report/LeftSection/index.error.tsx index 0f30bfaa..c8f187ef 100644 --- a/src/components/Report/LeftSection/index.error.tsx +++ b/src/components/Report/LeftSection/index.error.tsx @@ -14,6 +14,7 @@ const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => { export default ErrorFallback; const Container = styled.div` + width: 100%; min-width: 1016px; height: 880px; diff --git a/src/pages/Report/index.tsx b/src/pages/Report/index.tsx index dd3c8002..9e558927 100644 --- a/src/pages/Report/index.tsx +++ b/src/pages/Report/index.tsx @@ -30,11 +30,13 @@ export default Report; const Container = styled.div` width: 100%; + height: 100%; display: flex; - gap: 10px; + justify-content: space-between; + gap: 25px; - background-color: white; + background-color: #f2f3f5; ${theme.response.tablet} { flex-direction: column-reverse; From 9d04436aa16e5ef98f4bec3348bff1050f559037 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Tue, 23 Jan 2024 20:10:22 +0900 Subject: [PATCH 6/9] =?UTF-8?q?fix:=20=EB=88=84=EC=A0=81=20=EB=A6=AC?= =?UTF-8?q?=ED=8F=AC=ED=8A=B8=20=EC=95=8C=EB=A6=BC=20=EB=AC=B8=EA=B5=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Report/LeftSection/Graph/index.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/Report/LeftSection/Graph/index.tsx b/src/components/Report/LeftSection/Graph/index.tsx index b9c2b732..1a2f2e73 100644 --- a/src/components/Report/LeftSection/Graph/index.tsx +++ b/src/components/Report/LeftSection/Graph/index.tsx @@ -25,11 +25,9 @@ ChartJS.register( 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: [ @@ -70,7 +68,8 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => { 누적 리포트 프로모션 적용 이후 예약 현황을 알려드립니다. - (23.12.29 업데이트) + + 매월 1일 00시 00분에 업데이트 @@ -88,6 +87,10 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => { export default Graph; +const ReloadIcon = styled.img` + margin-left: 10px; +`; + const Container = styled.div` width: 100%; @@ -135,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; @@ -147,7 +153,7 @@ const Notice = styled.p` `; const Update = styled.span` - margin-left: 10px; + margin-left: 3px; `; const GraphContainer = styled.div` From db12ee4f8b81a48afbf9c769988de8714f08a7cf Mon Sep 17 00:00:00 2001 From: JitHoon Date: Tue, 23 Jan 2024 21:47:07 +0900 Subject: [PATCH 7/9] =?UTF-8?q?fix:=20=EB=88=84=EC=A0=81=20=EB=A6=AC?= =?UTF-8?q?=ED=8F=AC=ED=8A=B8=20=EC=97=90=EB=9F=AC=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=B5=9C=EA=B7=BC=20=EB=94=94=EC=9E=90=EC=9D=B8=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ic-error.svg | 21 +++++ src/assets/icons/ic-reload.svg | 4 + .../Report/LeftSection/index.error.tsx | 81 +++++++++++++++++-- .../Report/RightSection/TotalReport/index.tsx | 2 +- src/pages/Report/index.tsx | 6 +- 5 files changed, 106 insertions(+), 8 deletions(-) create mode 100644 src/assets/icons/ic-error.svg create mode 100644 src/assets/icons/ic-reload.svg diff --git a/src/assets/icons/ic-error.svg b/src/assets/icons/ic-error.svg new file mode 100644 index 00000000..9b70ebb4 --- /dev/null +++ b/src/assets/icons/ic-error.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/ic-reload.svg b/src/assets/icons/ic-reload.svg new file mode 100644 index 00000000..229831a8 --- /dev/null +++ b/src/assets/icons/ic-reload.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Report/LeftSection/index.error.tsx b/src/components/Report/LeftSection/index.error.tsx index c8f187ef..e9d47c27 100644 --- a/src/components/Report/LeftSection/index.error.tsx +++ b/src/components/Report/LeftSection/index.error.tsx @@ -1,12 +1,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 ( - 누적 리포트 차트 에러 발생 - + + 누적 리포트 차트를 불러올 수 없습니다. + + + 다시 시도 하기 + ); }; @@ -30,14 +42,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; + } +`; diff --git a/src/components/Report/RightSection/TotalReport/index.tsx b/src/components/Report/RightSection/TotalReport/index.tsx index 8f1c5da6..5b1ea48f 100644 --- a/src/components/Report/RightSection/TotalReport/index.tsx +++ b/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; diff --git a/src/pages/Report/index.tsx b/src/pages/Report/index.tsx index 9e558927..c4bd0437 100644 --- a/src/pages/Report/index.tsx +++ b/src/pages/Report/index.tsx @@ -30,7 +30,7 @@ export default Report; const Container = styled.div` width: 100%; - height: 100%; + height: auto; display: flex; justify-content: space-between; @@ -39,6 +39,10 @@ const Container = styled.div` background-color: #f2f3f5; ${theme.response.tablet} { + height: auto; + flex-direction: column-reverse; + + background-color: white; } `; From 07451d77378f64a6b2c53af723bfbce1dd56fe43 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Tue, 23 Jan 2024 21:49:07 +0900 Subject: [PATCH 8/9] =?UTF-8?q?modify:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=ED=97=A4=EB=8D=94=20z-index=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/MobileDashboardHeader/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/common/MobileDashboardHeader/index.tsx b/src/components/common/MobileDashboardHeader/index.tsx index 0436607f..a237643f 100644 --- a/src/components/common/MobileDashboardHeader/index.tsx +++ b/src/components/common/MobileDashboardHeader/index.tsx @@ -56,6 +56,7 @@ const Container = styled.div` font-size: 11px; font-weight: 700; + z-index: 100; } `; From 6439c8b6fbfb731d221abc7c2ca8ef6fc86794d9 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Tue, 23 Jan 2024 22:07:06 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=EB=98=91=EB=98=91=20=EB=88=84?= =?UTF-8?q?=EC=A0=81=20=ED=98=84=ED=99=A9=20=EC=97=90=EB=9F=AC=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=B5=9C=EC=8B=A0=20=EB=94=94=EC=9E=90=EC=9D=B8?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Report/LeftSection/index.error.tsx | 1 + .../RightSection/TotalReport/index.error.tsx | 76 ++++++++++++++++++- 2 files changed, 75 insertions(+), 2 deletions(-) diff --git a/src/components/Report/LeftSection/index.error.tsx b/src/components/Report/LeftSection/index.error.tsx index e9d47c27..7be28502 100644 --- a/src/components/Report/LeftSection/index.error.tsx +++ b/src/components/Report/LeftSection/index.error.tsx @@ -1,5 +1,6 @@ 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'; diff --git a/src/components/Report/RightSection/TotalReport/index.error.tsx b/src/components/Report/RightSection/TotalReport/index.error.tsx index 8c7752c4..7ebb542a 100644 --- a/src/components/Report/RightSection/TotalReport/index.error.tsx +++ b/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 ( - 누적 똑똑 현황 에러 발생 - + + 똑똑 누적 차트를 불러올 수 없습니다. + + + 다시 시도 하기 + ); }; @@ -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; + } +`;