From b9f518ce63bda5157e1c7e5ebe95d117e463ea61 Mon Sep 17 00:00:00 2001 From: jun <68260093+jee-eun-k@users.noreply.github.com> Date: Mon, 1 Apr 2024 16:36:42 +0900 Subject: [PATCH] DD-113-responsive web design (#52) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Upt. Login logic fix * Del. remove comments * Del. remove temp data * Upt. fix * Upt. time label fix * Add. 로그아웃 / 회원탈퇴 임시 처리 * Add. fix 인증코드 재요청 button align * Upt. reset to default value * Add. fix account setting page align * Add. fix chevron align * Add. * Del. remove console.log * Add. set overflow scroll * Add. add key prop * Add. fix stats error * Add. update import * Add. fix instruction error * DD-113-FE-responsive-web-design (#49) * Upt. Login logic fix * Del. remove comments * Del. remove temp data * Upt. fix * Upt. time label fix * Add. 로그아웃 / 회원탈퇴 임시 처리 * Add. fix 인증코드 재요청 button align * Upt. reset to default value * Add. improve scroll * Add. fix custom calendar err * Add. remove console.log * Add. --- src/App.tsx | 3 +- src/components/common/CustomCalendar.tsx | 32 ++- src/components/common/FolderTop.tsx | 6 +- src/pages/auth/common/Wrapper.tsx | 19 +- src/pages/category/CategoryPage.tsx | 115 ++++---- src/pages/record/RecordPage.tsx | 4 +- src/pages/statistics/ChartContainer.tsx | 321 ++++++++++++----------- src/pages/statistics/StatisticsPage.tsx | 22 +- 8 files changed, 268 insertions(+), 254 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5bd6fb6..adeab4d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -36,7 +36,7 @@ function App() { width: '100vw', }} > - + } /> } /> @@ -75,7 +75,6 @@ function App() { } /> } /> - } /> } /> } /> diff --git a/src/components/common/CustomCalendar.tsx b/src/components/common/CustomCalendar.tsx index fc532be..b9d4d7f 100755 --- a/src/components/common/CustomCalendar.tsx +++ b/src/components/common/CustomCalendar.tsx @@ -269,13 +269,16 @@ export const CustomCalendar = (pickerProps: any) => { return ( @@ -287,15 +290,21 @@ export const CustomCalendar = (pickerProps: any) => { : date.month() + 1; const isSelected = elem === selected; - const isPrevDate = - switchView === 'BY_YEAR' || periodType === 'BY_YEAR' - ? elem < currentYear - : elem < currentMonth || date.year() < currentYear; + let isPrevDate; + + if (switchView === 'BY_YEAR' || periodType === 'BY_YEAR') { + isPrevDate = elem < currentYear; + } else { + isPrevDate = + date.year() === currentYear + ? elem < currentMonth + : date.year() < currentYear; + } + const isCurrentDate = switchView === 'BY_YEAR' || periodType === 'BY_YEAR' ? elem === currentYear : date.year() === currentYear && currentMonth + 1 === elem; - return ( { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - flex: '0 1 25%', position: 'relative', }} > diff --git a/src/components/common/FolderTop.tsx b/src/components/common/FolderTop.tsx index 4eaf2fc..c0f14d1 100644 --- a/src/components/common/FolderTop.tsx +++ b/src/components/common/FolderTop.tsx @@ -1,4 +1,4 @@ -const FolderTop = (props: { color: string }) => { +const FolderTop = (props: { color: string; text: string }) => { return ( { d="M99.875 12.75C100.496 12.75 101 12.2463 101 11.625C101 11.0037 100.496 10.5 99.875 10.5C99.2537 10.5 98.75 11.0037 98.75 11.625C98.75 12.2463 99.2537 12.75 99.875 12.75Z" fill="white" /> + + + {props.text} + {} | void; headerComp?: ReactNode; children: ReactNode; -}) => { + }) => { return ( { > - + { justifyContent: 'center', }} > - - - - {category.name} - - - - {category.subCategories.map((sub, subIdx) => { - if (subIdx < 5) { - return ( - - {getCategoryIcon(sub)} - - ); - } - return <>; - })} - {category.subCategories.length < 5 && ( - - { - setSelectedMainCategory(category); - setSelectedSubCategory({ name: '', iconFile: {} }); - navigation('/category/edit', { - state: { - mode: 'add', - }, - }); - }} - /> - - )} - + + + + {category.subCategories.map((sub, subIdx) => { + if (subIdx < 5) { + return ( + + {getCategoryIcon(sub)} + + ); + } + return <>; + })} + {category.subCategories.length < 5 && ( + + { + setSelectedMainCategory(category); + setSelectedSubCategory({ + name: '', + iconFile: {}, + }); + navigation('/category/edit', { + state: { + mode: 'add', + }, + }); + }} + /> + + )} + + + - + + {/* */} ); })} diff --git a/src/pages/record/RecordPage.tsx b/src/pages/record/RecordPage.tsx index ca25568..0bc68eb 100644 --- a/src/pages/record/RecordPage.tsx +++ b/src/pages/record/RecordPage.tsx @@ -240,11 +240,11 @@ const RecordPage = () => { }, []); return ( - }> + }> diff --git a/src/pages/statistics/ChartContainer.tsx b/src/pages/statistics/ChartContainer.tsx index 4485e1b..0a847e0 100644 --- a/src/pages/statistics/ChartContainer.tsx +++ b/src/pages/statistics/ChartContainer.tsx @@ -434,11 +434,12 @@ const ChartContainer = () => { > { } else { setCategoryDetailData(statisticsResult); setTotalSumTitle(addPostposition(periodTypeTitle)); + setClickedIndex(-1); } setCategorySum( () => - (subCategoryData ?? statisticsResult)?.reduce( + (subCategoryData + ? categoryDetailData + : statisticsResult + )?.reduce( + (accu: number, curr: StatisticsDetail) => accu + curr.timeSum, 0, @@ -532,6 +538,16 @@ const ChartContainer = () => { statisticsResult = statisticsResult.length ? statisticsResult : []; }, []); + useEffect(() => { + const timeSum = statisticsResult.length + ? statisticsResult.reduce( + (accumulator, currentValue) => accumulator + currentValue.timeSum, + 0, + ) + : 0; + setTotalSum(() => timeSum); + }, [totalSumTitle]); + useEffect(() => { const timeSum = statisticsResult.length ? statisticsResult.reduce( @@ -557,188 +573,185 @@ const ChartContainer = () => { }, [statisticsResult, periodType]); return ( - <> - - + + + + {totalSumTitle} {'‎'} + + + {timeFormatter(categorySum).time} + + + {!!totalSum && ( - - {totalSumTitle} {'‎'} - - { + // first page label is 1 + const indicator: any = activePageIndicator.current; + if ( + Number( + indicator.getAttribute('aria-label').match(/\d+/)[0], + ) !== 1 + ) { + const inactiveIndicator: any = inactivePageIndicator.current; + inactiveIndicator.click(); + setIsFirstPage(true); + } + if (clickedIndex > -1) { + const pieChart = pieChartRef.current; + pieChart?.setActiveElements([ + { datasetIndex: 0, index: clickedIndex }, + ]); + } + }} + sx={{ + border: '1px solid', + borderColor: isFirstPage ? pink700 : paletteGrey[500], + borderRightColor: pink700, + borderRadius: '3px 0 0 3px', + flex: '1 1 50%', + height: '50%', + padding: 'auto', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', }} > - {timeFormatter(categorySum).time} - - - {!!totalSum && ( + + { + // second page label is 2 + const indicator: any = activePageIndicator.current; + if ( + Number( + indicator.getAttribute('aria-label').match(/\d+/)[0], + ) !== 2 + ) { + const inactiveIndicator: any = inactivePageIndicator.current; + inactiveIndicator.click(); + setIsFirstPage(false); + } + }} sx={{ - position: 'absolute', + border: `1px solid ${isFirstPage ? paletteGrey[500] : pink700}`, + borderLeft: 'none', + borderRadius: '0 3px 3px 0', + flex: '1 1 50%', + height: '50%', display: 'flex', - flexDirection: 'row', + justifyContent: 'center', alignItems: 'center', - top: 0, - right: '5%', - width: '72px', - height: 'calc(100% - 3px)', }} > - { - // first page label is 1 - const indicator: any = activePageIndicator.current; - if ( - Number( - indicator.getAttribute('aria-label').match(/\d+/)[0], - ) !== 1 - ) { - const inactiveIndicator: any = - inactivePageIndicator.current; - inactiveIndicator.click(); - setIsFirstPage(true); - } - if (clickedIndex > -1) { - const pieChart = pieChartRef.current; - pieChart?.setActiveElements([ - { datasetIndex: 0, index: clickedIndex }, - ]); - } - }} - sx={{ - border: '1px solid', - borderColor: isFirstPage ? pink700 : paletteGrey[500], - borderRightColor: pink700, - borderRadius: '3px 0 0 3px', - flex: '1 1 50%', - height: '50%', - padding: 'auto', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }} - > - - - { - // second page label is 2 - const indicator: any = activePageIndicator.current; - if ( - Number( - indicator.getAttribute('aria-label').match(/\d+/)[0], - ) !== 2 - ) { - const inactiveIndicator: any = - inactivePageIndicator.current; - inactiveIndicator.click(); - setIsFirstPage(false); - } - }} - sx={{ - border: `1px solid ${ - isFirstPage ? paletteGrey[500] : pink700 - }`, - borderLeft: 'none', - borderRadius: '0 3px 3px 0', - flex: '1 1 50%', - height: '50%', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }} - > - - + - )} - - {!!totalSum && ( - + + )} + + {!!totalSum && ( + + + + + - - - - - - - )} - {!!!totalSum && ( - - + + )} + {!!!totalSum && ( + + + - - {'아직 데이터가 없어요'} -
- {'기록을 남겨보세요 :)'} - - - - )} - + {'아직 데이터가 없어요'} +
+ {'기록을 남겨보세요 :)'} + + + + )} { totalSum ? categoryDetailData : statisticsResult, )} - + ); }; diff --git a/src/pages/statistics/StatisticsPage.tsx b/src/pages/statistics/StatisticsPage.tsx index c792c11..17b851a 100644 --- a/src/pages/statistics/StatisticsPage.tsx +++ b/src/pages/statistics/StatisticsPage.tsx @@ -6,8 +6,6 @@ import ChartContainer from '@/pages/statistics/ChartContainer'; import { bottomNavigation } from '@/store/common'; import { useEffect } from 'react'; import { useSetRecoilState } from 'recoil'; -import Wrapper from '../auth/common/Wrapper'; -import { Box } from '@mui/material'; const StatisticsPage = () => { const setNavPage = useSetRecoilState(bottomNavigation); @@ -17,21 +15,11 @@ const StatisticsPage = () => { }, []); return ( - } - > - - - - - + <> + + + + ); };