Table of contents
Issue Point
월간 조회를 하고 일간, 주간 조회시 해당 달의 1일(일간), 첫 주(주간)의 API 요청을 보냄 (잘못된 데이터)
1.
월간 → 주간 조회 시 해당 월의 첫 주 데이터를 불러옴 (필터 항목이 바뀌지 않음)
2.
월간 → 일간 조회 시 해당 월의 1일 데이터를 불러옴 (필터 항목 적용 X)
3.
주간 → 일간 조회 시 해당 주의 첫 날 데이터를 불러옴
4.
일간 → 주간 조회 시 해당 일이 들어있는 주의 데이터를 불러옴
5.
일간 → 월간 조회 시 해당 일이 들어있는 월의 데이터를 불러옴
6.
일단 현재는 Full
7.
달력에서 정확하게 월, 주, 일을 선택 시에만 정확한 데이터를 불러오게 됨
UI/UX 수정
스크롤 아래로 하면서 서비스 헤더가 동아일보 메인 헤더에 먹힘.
1.
목표 서비스 헤더(ArticleSearchBar, DReportHeader, IssuePageHeader, TopPageHeader)를 sticky로 설정해서 노는거 방지. (웹에서는 해결. 모바일은 그대로 오류 발생)
2.
동아일보 헤더의 z-index 확인(50), 서비스 헤더의 z-index 확인(40)
3.
동아일보 헤더가 서비스 헤더보다 상위 블록에 있어서 먹어버림. 때문에 동아일보 헤더 z-index도 50으로 동일하게 조정.
a.
위와 같이 설정하니까 sticky 설정때문에 tailwind의 동일 z-index 상에 있는 블록들간 충돌로 서비스 헤더가 왼쪽 MobileMenu를 가려버림.
→ 전체적인 z-index 값 조정
요소 | z-index |
Header (MobileMenu 포함) | z-[60] (따로 tailwind.config.js에 등록 X, 커스텀 값 즉시 적용) |
오버레이 | z-[55] |
서비스 헤더 | z-50 |
동아일보 헤더 | z-50 |
아래로 내리면 상단바에 하위 레이어(주요 데이터가 있는 파티션?)가 먹히는 현상도 발생함.
날짜 선택 시 일간, 주간, 월간 모두에서 해당 api 호출 날짜 이외의 날이 함께 선택되어 있는 듯한 효과.
일간 조회 시 (02.04 조회)
1월에서도 4일이 색칠되어 있음
월간 조회 (2월 선택시 1월도 색칠)
1.
DateRangePicker.jsx (일간 모드)
정확한 날짜 비교 (년, 월, 일 모두 일치해야 선택):
dayClassName={(date) => {
const isSelected = date.getFullYear() === startDate.getFullYear() &&
date.getMonth() === startDate.getMonth() &&
date.getDate() === startDate.getDate();
// ...
if (isSelected) classes.push('daily-selected');
}}
JavaScript
복사
2.
DatePicker.css
•
커스텀 daily-selected 클래스에 선택 스타일 적용
•
react-datepicker 기본 --selected 스타일을 .custom-calendar 내에서 무시
이거 위쪽 bar 내려오는거 패딩 늘린거 Commit a478f16 로컬에서는 어떻게 돌아가는지 비교해보기. 내꺼에서 돌리니까 이상하게 돌아감. 차트간 간격이 너무 넓어짐
필터링
일간, 주간, 월간 세개로 내보내는건 너무 활용범위가 애매하다는 느낌
필터에서 기간을 직접 설정할 수 있게 하면 더 좋을 것 같음. 꼭 1주단위 1달단위가 아니라 설정한 기간따라 유동적으로 api 쏴주면 되니까