그래프 스와이프 이슈
•
moment 사용 시 일요일 기준으로 계산되어 오류나던 부분 아래 방식으로 수정했습니다.
•
common.js에 추가한 setMomentWeekStartDay 함수
// common.js
// 운동량 변화 관련 일주일의 시작점 처리
export const setMomentWeekStartDay = (weekStartDay) => {
if (weekStartDay === 1) {
// 0 일요일, 1 월요일.
return 'isoWeek'; // 주의 시작이 월요일로 설정된다
}
return 'week'; // 기본 moment 활용법대로 주의 시작이 일요일로 설정된다
};
JavaScript
복사
•
해당 함수를 이용해서 endOf(’week’), startOf(’week’) 사용 시 일주일의 시작점이 월, 일로 변경되도록 처리했습니다.
◦
예시
// getTimeListFor5Weeks 함수에서 사용
const weekEnd = moment(lastDateOfGraph).endOf(isMomentWeekStartMonday(weekStartDay)).format('YYYY-MM-DD');
const weekStart = moment(lastDateOfGraph)
.subtract(4, 'weeks')
.startOf(isMomentWeekStartMonday(weekStartDay)) // 시작 요일 반영
.format('YYYY-MM-DD');
JavaScript
복사
•
위 방식으로 시간, 볼륨, 밀도 그래프 변경 후 아래 그래프 시작 주 기준대로 그래프가 제대로 그려지는지 확인했습니다. (과거, 미래 둘 다 테스트)
그래프 시작 주 정리 (월요일 기준)
그래프 시작 주 정리 (일요일 기준)
•
그 외 간간히 “운동 데이터가 없습니다” 라고 스와이프 도중에 뜨던 문구는 콘솔을 찍어보니 순간순간 데이터가 0으로 나오는 구간이 있었습니다.
// filteredData가 빠르게 스와이프 하다보니 빈 배열로 나오는 것 확인
const filteredData = dataList.filter((item) => item.durationExist);
const maxRes = filteredData.reduce((max, item) => Math.max(max, Number(item.timeSum)), 0);
if (filteredData?.length === 0) {
// filteredData length가 0으로 나와서 해당 부분이 실행됨
setTimeGraphAverage(0);
setMaxStickHeight(0);
setNoDataToShow(true);
//
} else {
setNoDataToShow(false);
const timeSum = filteredData.reduce((sum, item) => Number(sum) + Number(item.timeSum), 0);
if (Number(timeSum) === 0 || filteredData?.length === 0) {
setTimeGraphAverage(0);
} else {
setTimeGraphAverage(setDecimalPlace(Number(timeSum / filteredData.length)));
}
}
JavaScript
복사
•
위 케이스는 스와이프 시 로딩중일땐 스와이프 액션을 막는 방식으로 수정했습니다.
<PanGestureHandler
style={{ borderWidth: 1 }}
onHandlerStateChange={onHandlerStateChange}
// 스와이프 시작 시, isLoading을 true로 변경
// isLoading 상태가 아닐 경우에만 스와이프 가능하도록 설정
enabled={!isLoading}>
JavaScript
복사