3.기본 기능 구현하기[일지 조회하기]

작동 흐름

기간 내 일지'들' 조회하기

1. 브라우저에서 달력의 '<' , '>' , '<<' , '>>' 버튼을 클릭한다. 해당 이벤트가 발생할 경우 findDiariesBetweenTime()이 호출된다.
2. 현재 화면에 출력된 달력의 날짜 정보를 읽어온 후, ajax로 호출한다.
3. 컨트롤러 -> 서비스 호출
4. 서비스 -> 리포지토리 호출 후 리턴

(예시)
현재 달력이 2022년 2월인 경우, 연도 = 2021, 월 = 2, 시작일 = 1(고정), 끝일 = 28 이다.

'작성'되어 있는 일지의 경우 ✅ 표시하기

2.의 ajax 호출 리턴 값인 DTO가 존재할 경우, 해당 DTO의 날짜에 해당하는 곳에 ✅를 그려주면 끝이다.

function findDiariesBetweenTime(year, month, startDay, endDay) {
    $.ajax({
        type: 'GET',
        url: '/api/diary/user/diabetes-diary/list?year=' + year + "&month=" + month + "&startDay=1" + "&endDay=" + endDay,
        contentType: 'application/json; charset=utf-8'
    }).done(function (e) {
        for (let i = 0; i < e.response.length; i++) {
            const diaryId = e.response[i].diaryId;
            const tdId = '#' + String(e.response[i].year) + String(e.response[i].month) + String(e.response[i].day);
            $(tdId).append("<input type='hidden' value='" + diaryId + "'/><span id=\"check\" class=\"fas fa-check\"></span>");
        }
    });
}