Feat#4 hee jung/calender

[parkheeddong]

🔥 Related Issues

• close [ Heejung ] 캘린더 구현 #4

💙 작업 내용

• 1. 요일 + 시간 데이터를 가지고 달력에 표기
• 2. 학생마다 다른 색깔로 표기
• 3. 시간순서대로 표기
• 4. 심화 ( 일정 추가 )

✅ PR Point

저는 캘린더 라이브러리는 이용하지 않고, 자바스크립트 날짜 관련 라이브러리 date-fns를 설치해서 일부 함수들을 이용했습니다!

라이브러리를 이용하지 않고 구현한 케이스들을 많이 살펴봤는데, https://sennieworld.tistory.com/61 요 글을 레퍼런스로 참조해서 구현했습니다.

✨ 전체 구조

Header -> 이전 달 (prevMonth) , 현재 달, 이후 달(nextMonth) 이동

Days -> 요일

Body -> 달력 전체 구조 & 스케줄 입력

✨ 달력 뷰

달력뷰는 레퍼런스의 로직을 참조해서 구현했습니다.
달은 언제나 1일부터 시작하지만, 요일은 항상 월요일부터 시작하는것이 아니므로, 해당 달의 1일이 월요일이 아니라면 그 전 달의 후반부 날짜들이 달력에 포함될 수 있어서 monthStart가 해당 달의 시작/마지막일이라면, startDate는 monthStart가 속한 주의 마지막 일, endDate는 monthEnd가 속한 달의 마지막 일입니다.

for문으로 monthStart부터 monthEnd까지 월화수목금토일 총 7개의 값을 받아서 days를 구성하고, 전체 달력에 대한 배열 rows에 넣어주는 방식입니다.

for (let i = 0; i < 7; i++) {
 // 생략
           calenderDate = format(day, 'dd');
            days.push(
                <Day isThisMonth = {isThisMonth}>
                    {calenderDate}
                    {isThisMonth === true ? 
                        daySchedule.map((item)=> (
                            <ScheduleText key = {item.id} color = {item.color}>
                                {item.student} {item.time}
                            </ScheduleText>
                        )) 
                        : null
                    }
                </Day>
            );
            day = addDays(day, 1);
        }
        rows.push(
            <Row>
                {days}
            </Row>
        );
        days = [];

✨ 데이터 달력에 표시

서버에서 받아온 데이터를 달력에 표시하기 위해서, 해당 날짜를 표기할 때 이번달의 날짜인지 검사하는 로직을 아래와 같이 구현했어요!

            // 이번달 날짜인지 검사 후, 이번달 날짜일 경우 스케줄 체크
            if (isThisMonth === false && format(day, 'dd') === '01') { 
                isThisMonth = true; // 지난달이었는데, 1일로 넘어오면 true 
            } else if (isThisMonth === true && format(day, 'dd') === '01') {
                isThisMonth = false; // 이번달이었는데, 다음달로 넘어가면 false
            }

그리고 만약 이번 달인 것이 확인되면, 아래와 같이 비교할 날짜 포맷을 만들어 줍니다. 그리고 전체 스케줄 데이터에서 filter함수로 해당 날짜가 포함된 값을 가져오고, 그 값 을 시간 순대로 정렬해줍니다.

            if (isThisMonth === true) {
                let compareDate = format(monthStart, 'yyyy.MM') + "." + format(day, 'dd');
                daySchedule = schedule.filter((items) => items.date.includes(compareDate));
                daySchedule = daySchedule.sort((a, b)=> a.time.localeCompare(b.time));
            }

😡 Trouble Shooting

큰 트러블 슈팅은 없었고 종종 타입스크립트 관련 오류가 많이 발생했는데 금방 해결했습니다! 심화과제는 리팩토링 할게요!! 🌱🌱

👀 스크린샷 / GIF / 링크

📚 Reference

• 구현에 참고한 링크 (필요한 경우만 작성하고 없으면 지우기)
  https://sennieworld.tistory.com/61
  https://eunhee-programming.tistory.com/267
  https://velog.io/@ljo094822/react-%EB%8B%AC%EB%A0%A5%EB%A7%8C%EB%93%A4%EA%B8%B0-calendar
  https://diary-blockchain.tistory.com/114
  https://eundol1113.tistory.com/686
  https://velog.io/@shrewslampe/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EC%BA%98%EB%A6%B0%EB%8D%94-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%A1%9C%EC%A7%81%ED%8E%B8