[Next.js / JS] 라이브러리 없이 캘린더뷰 구현하기

들어가며,

UX/UI 디자이너님이 캘린더뷰를 예쁘게 디자인해주셨다🥰
프론트엔드 개발을 진행해야하는데, 라이브러리 없이 금방 만들 수 있을 것 같았다
그래서 만들었다 (gpt 최고...)

달력의 날짜를 생성하고, 이전/다음 버튼을 클릭할 때 년도와 월이 바뀌는 코드는 gpt의 도움을 받았다
(gpt에게 코드를 짜달라고 하는 건 처음이었는데 생각보다 쓸만하게 나와서 놀람)

gpt 코드를 적용하고, 뷰 레이아웃 대충 그리는데에 한시간 걸렸고,
디자이너님이 잡아주신 디자인 그대로 적용하여 완성하는데에 한시간 정도 걸렸다
대충 2시간만에 작업한 것 같은데...

라이브러리 찾아보고 설치해서 커스텀하는 것보다 빠르고 디자인 적용하기엔 편한 듯? (지극히 개인적인 생각입니다)

코드 공유

캘린더 뷰를 그리는 컴포넌트에서 generateCalendar 함수와 changeMonth 함수를 호출하여 코드를 짰다

genterateCalendar 함수

7열 6행으로, 비어있는 칸이 없도록 지난달 날짜와 다음달 날짜를 추가하고, isCurrentMonth 트리거로 이번달 일자인지, 지난달/다음달 일자인지 확인한다

// Calendar Generation Function
export default function generateCalendar(year, month) {
    const result = [];
    const currentDate = new Date(year, month - 1, 1);
    const daysInMonth = new Date(year, month, 0).getDate();
    const startDay = currentDate.getDay(); // The day of the week the month starts (0: Sunday, 1: Monday, ..., 6: Saturday)

    let date = 1 - startDay; // Start date of the first week
    for (let row = 0; row < 6; row++) {
        const week = [];
        for (let i = 0; i < 7; i++) {
            let currentMonth = month;
            let currentYear = year;
            if (date <= 0) {
                currentMonth = month - 1;
                if (currentMonth === 0) {
                    currentMonth = 12;
                    currentYear = year - 1;
                }
                const prevMonthDays = new Date(year, month - 1, 0).getDate();
                week.push({ year: currentYear, month: currentMonth, day: prevMonthDays + date, isCurrentMonth: false });
            } else if (date > daysInMonth) {
                currentMonth = month + 1;
                if (currentMonth === 13) {
                    currentMonth = 1;
                    currentYear = year + 1;
                }
                week.push({ year: currentYear, month: currentMonth, day: date - daysInMonth, isCurrentMonth: false });
            } else {
                week.push({ year: currentYear, month: currentMonth, day: date, isCurrentMonth: true });
            }
            date++;
        }
        result.push(week);
    }

    return result;
}  

사용 예시

// 2024년 3월의 날짜가 반환됨
genterateCalendar(2024, 3)

---

changeMonth 함수

2024년 1월일 때,

• 이전달 = 2023년 12월
• 다음달 = 2024년 2월

위 내용을 담은 코드이다
direction 값으로 이전달로 바꾸는지, 다음달로 바꾸는지를 확인하는데,
direction == "prev"이면 이전 달,
dirction == "next"이면 다음 달로 바뀌도록 한다

export default function changeMonth(year, month, direction) {
    let currentYear = year;
    let currentMonth = month;

    if (direction === 'prev') {
        currentMonth--;
        if (currentMonth === 0) {
            currentYear--;
            currentMonth = 12;
        }
    } else if (direction === 'next') {
        currentMonth++;
        if (currentMonth === 13) {
            currentYear++;
            currentMonth = 1;
        }
    }

    return { "year": currentYear, "month": currentMonth }
}

사용 예시

// 2024년 1월 -> 이전달 = 2023년 12월
changeMonth(2024, 1, prev)

// 2024년 1월 -> 이전달 = 2023년 12월
changeMonth(2024, 1, next) 

---

마치며.

라이브러리 없이 직접 구현하게 된 게 사실 디자인 커스텀하기 편할 것 같아서였는데, 뭐 어쨌든 해결
gpt 최고다
아예 처음부터 완벽하게 gpt가 짜주는 걸 바라기엔 어려울 것 같고, 진짜 간단한 틀 정도만 잡기엔 좋을 것 같다
틀 잡아서 코드 짜준거에 살을 덧붙이는 게 처음부터 개발하는 것보다는 훨씬 빠르기도 하고, 코드 이해만 잘 한다면 이것저것 더 추가해서 다시 코드 짜줘! 할 수도 있어서 편리했다
(근데 개발 실력이 늘지는 의문이라 남용하면 안될듯,,,)

끝