Skip to content

Commit

Permalink
Add. feature/DD-52-시간 파라미터 생성 및 디자인 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@jee-eun-k
jee-eun-k committed Jul 30, 2023
1 parent 3e462bc commit dce3e89
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 44 deletions.
20 changes: 11 additions & 9 deletions src/pages/record/RecordPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import timeGridPlugin from '@fullcalendar/timegrid';
import { Container } from '@mui/system';
import React, { useState,useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { useRecoilValue, useSetRecoilState } from 'recoil';

import { SelectedRangeData } from './CreateRecordPage';

import { getRecord } from '../../api/record.api';
import Spacer from '@/components/common/Spacer';
import CommonHeader from '@/components/layout/CommonHeader';
import { selectedTimeRangeState } from '@/store/record';
import { statisticsStartHour } from '@/store/statistics';

import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
Expand Down Expand Up @@ -44,6 +45,9 @@ const RecordPage = () => {
const setSelectedDate = useSetRecoilState<SelectedRangeData>(
selectedTimeRangeState,
);
const startHour = useRecoilValue(statisticsStartHour);
const endHour = `${Number(startHour.substring(0, 2)) + 24}:${startHour.substring(3, 5)}:00`;
const interval = '00:30:00';

const handleDateSelect = (e: any) => {
const selectedDate: SelectedRangeData = {
Expand All @@ -69,14 +73,12 @@ const RecordPage = () => {
function renderTitle(info: any) {
const startDate = dayjs(info.start.marker).day(0).format('M월 D일 일요일');
const endDate = dayjs(info.start.marker).day(6).format('M월 D일 토요일');
return `${startDate} ~ ${endDate}`;
return `${startDate} ~ ${endDate}`;
}

const getAllRecords = async (info: any) => {
const startedAt = dayjs(info.start).day(0).hour(4).format('YYYY-MM-DDT04:00:00');
const finishedAt = dayjs(info.start).day(6).hour(23).add(1, 'week').day(0).hour(3).minute(59).second(59).format('YYYY-MM-DDT03:59:59');
//console.log(startedAt);
//console.log(finishedAt);
const startedAt = dayjs(info.start).day(0).format(`YYYY-MM-DDT${startHour}`);
const finishedAt = dayjs(info.start).add(1, 'week').day(0).format(`YYYY-MM-DDT${startHour}`);
try {
const response = await getRecord(member, startedAt, finishedAt);

Expand Down Expand Up @@ -211,9 +213,9 @@ const RecordPage = () => {
eventChange={function(){}}
eventRemove={function(){}}
*/
slotMinTime={'04:00:00'} // 시작시간
slotMaxTime={'28:00:00'} // 끝시간
slotDuration={'00:30:00'} // 시간 간격
slotMinTime={startHour} // 시작시간
slotMaxTime={endHour} // 끝시간
slotDuration={interval} // 시간 간격
/>

</Container>
Expand Down
98 changes: 65 additions & 33 deletions src/pages/statistics/Period.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import utc from 'dayjs/plugin/utc';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import 'dayjs/locale/ko';
import { useState, SyntheticEvent, useEffect } from 'react';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import WeekPicker from './WeekPicker';
import { selectedStartDate } from '@/store/statistics';
import { selectedStartDate, statisticsStartHour } from '@/store/statistics';

dayjs.extend(utc);
dayjs.extend(localizedFormat);
Expand Down Expand Up @@ -50,7 +50,6 @@ interface StyledTabProps {
value: string;
}


/**
* render date input
*/
Expand All @@ -76,18 +75,26 @@ export const renderDateInput = ({params, width}: any) => {
}}
sx={{
display: 'flex',
color: '#4B4B4B',
fontWeight: '600',
fontSize: '14px',
' .MuiInputBase-root': { justifyContent: 'center', p: 0 },
' .MuiInputBase-input': { p: '16px 0', flex: '1 1 auto', overflow: 'auto', width: width + 'px' },
' .MuiInputAdornment-root' : {flex: '0 0 auto'},
' .MuiInputBase-input': {
p: '16px 0',
flex: '1 1 auto',
overflow: 'auto',
color: '#4B4B4B',
fontWeight: '600',
fontSize: '14px',
width: width + 'px',
},
' .MuiInputAdornment-root' : {flex: '0 0 auto', pb: '1px'},
'& input': { pl: 0 },
'& fieldset': { border: 'none' }
}}
/>
)};

/**
* custom styled tab group
*/
const StyledTabs = styled((props: StyledTabsProps) => (
<Tabs
{...props}
Expand All @@ -113,12 +120,15 @@ const StyledTabs = styled((props: StyledTabsProps) => (
},
});

/**
* custom styled tab
*/
const StyledTab = styled((props: StyledTabProps) => (
<Tab disableRipple {...props} />
))(({ theme }) => ({
))(() => ({
textTransform: 'none',
fontSize: 14,
marginRight: theme.spacing(1),
lineHeight: 3,
color: '#949494',
fontWeight: 600,
'&.Mui-selected': {
Expand All @@ -129,13 +139,13 @@ const StyledTab = styled((props: StyledTabProps) => (
},
}));


const Period = () => {
const [periodType, setPeriodType] = useState<PeriodType>(
periodTypeList[0].id,
);
const currDate = new Date().toISOString().slice(0, 10);
const [selectedDate, setSelectedDate] = useRecoilState(selectedStartDate);
const startHour = useRecoilValue(statisticsStartHour);

const setStatisticsResult = useSetRecoilState<StatisticsDetail[]>(
statisticsResultState,
Expand All @@ -145,6 +155,26 @@ const Period = () => {
setPeriodType(selectedDate);
};


/**
* get period string
* @returns period string
*/
const getPeriodString = (): ManipulateType | undefined => {
switch (periodType) {
case 'BY_DAY':
return 'day';
case 'BY_WEEK':
return 'week';
case 'BY_MONTH':
return 'month';
case 'BY_YEAR':
return 'year';
default:
break;
}
};

/**
* set data search range with newly selected date
* @param newValue newly selected date
Expand All @@ -166,30 +196,31 @@ const Period = () => {
setStatisticsResult(response.result);
};

/**
* get period string
* @returns period string
*/
const getPeriodString = (): ManipulateType | undefined => {

useEffect(() => {
let startDate = selectedDate[periodType];
let endDate = startDate.add(1, getPeriodString());

switch (periodType) {
case 'BY_DAY':
return 'day';
case 'BY_WEEK':
return 'week';
case 'BY_WEEK':
startDate = startDate.day(0);
endDate = endDate.day(0);
break;
case 'BY_MONTH':
return 'month';
startDate = startDate.date(1);
endDate = endDate.date(1);
break;
case 'BY_YEAR':
return 'year';
startDate = startDate.month(0).date(1);
endDate = endDate.month(0).date(1);
break;
default:
break;
}
};

useEffect(() => {
let date = selectedDate[periodType];
getStatistics({
fromStartedAt: `${date.format('YYYY-MM-DD')}T00:00:00`,
toFinishedAt: `${date.add(1, getPeriodString()).format('YYYY-MM-DD')}T00:00:00`,

getStatistics({
fromStartedAt: `${startDate.format('YYYY-MM-DD')}T${startHour}`,
toFinishedAt: `${endDate.format('YYYY-MM-DD')}T${startHour}`
});
}, [selectedDate, periodType]);

Expand Down Expand Up @@ -241,7 +272,7 @@ const Period = () => {
<Box
sx={{
width: '100%',
height: '70%',
height: '79%',
position: 'absolute',
boxShadow: '0px 4px 15px 0px rgba(0,0,0,0.04)',
}}
Expand Down Expand Up @@ -274,7 +305,7 @@ const Period = () => {
<DatePicker
value={selectedDate[periodType].locale('ko')}
inputFormat='MM월 DD일 dddd'
renderInput={(params: any) => renderDateInput({params, width: 120})}
renderInput={(params: any) => renderDateInput({params, width: 100})}
disableMaskedInput
onChange={setNewDateRange}
/>
Expand All @@ -290,7 +321,7 @@ const Period = () => {
<DatePicker
value={selectedDate[periodType].locale('ko')}
inputFormat='YYYY년 MM월'
renderInput={(params: any) => renderDateInput({params, width: 95})}
renderInput={(params: any) => renderDateInput({params, width: 80})}
onChange={setNewDateRange}
views={['year', 'month']}
openTo='month'
Expand All @@ -300,11 +331,12 @@ const Period = () => {
<DatePicker
value={selectedDate[periodType].locale('ko')}
inputFormat='YYYY년'
renderInput={(params: any) => renderDateInput({params, width: 55})}
renderInput={(params: any) => renderDateInput({params, width: 45})}
onChange={setNewDateRange}
views={['year']}
minDate={dayjs('2023-01-01')}
maxDate={dayjs(currDate)}

/>
)}

Expand Down
2 changes: 1 addition & 1 deletion src/pages/statistics/WeekPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const WeekPicker = ({ value, setValue, onChange }: any): JSX.Element => {
}}
renderDay={renderWeekPickerDay}
inputFormat={renderDayInputFormat(value)}
renderInput={(params: any) => renderDateInput({params, width: 250})}
renderInput={(params: any) => renderDateInput({params, width: 220})}
/>
);
};
Expand Down
15 changes: 14 additions & 1 deletion src/store/statistics.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,17 @@ export const dateTypeState = atom({
} as IModalState,
});

/**
* statistic data
*/
export const statisticsResultState = atom({
key: 'statisticsResult',
default: [] as StatisticsDetail[],
});


/**
* current date range for each type of statistics
*/
const currDate = dayjs(new Date().toISOString().slice(0, 10));
export const selectedStartDate = atom({
key: 'selectedStartDate',
Expand All @@ -32,4 +37,12 @@ export const selectedStartDate = atom({
BY_MONTH: currDate,
BY_YEAR: currDate,
},
});

/**
* start hour of each day for statistics
*/
export const statisticsStartHour = atom({
key: 'statisticsStartHour',
default: '04:00:00'
});

0 comments on commit dce3e89

Please sign in to comment.