윤년 기준으로 날짜 선택 옵션을 자동 변경하는 함수

2019.06.26 - [Programing/javascript] - JavaScript 윤년(leap year) 체크 글의 응용 버전입니다.

php 윤년 체크는 2019.06.26 - [Programing/PHP] - PHP 윤년(leap year)체크 글을 참조해주세요.

 

웹 서비스에서 날짜를 기준으로 기간을 선택하는 UI를 제공할 때, 윤년(Leap Year)에 따라 '365일'이 아닌 '366일'로 바뀌어야 할 때가 있습니다. 이 글에서는 JavaScript를 활용해 윤년인 경우 자동으로 '일 수'를 변경해주는 함수 leapYearChangeTerm의 동작 방식을 소개합니다.

---

✨ 함수 전체 코드

function isLeapYear(year) {
    return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

function leapYearChangeTerm(startDate) {
    if (!startDate) return false;

    const date = new Date(`${startDate}T00:00:00`);
    const year = date.getFullYear();

    const isCurrentLeap = isLeapYear(year);
    const isNextLeap = isLeapYear(year + 1);

    const time = date.getTime();
    const march1ThisYear = new Date(`${year}-03-01T00:00:00`).getTime();
    const feb29NextYear = new Date(`${year + 1}-02-29T23:59:59`).getTime();

    const $option = $("select[name=date_term] option[value=365]");
    $option.text("365일");

    const inFirstLeapWindow = isCurrentLeap && time > 0 && time < march1ThisYear;
    const inNextLeapWindow = isNextLeap && time > march1ThisYear && time < feb29NextYear;

    if (inFirstLeapWindow || inNextLeapWindow) {
        $option.text("366일");
    }
}

 

✨ 함수 구조 및 주요 기능

function isLeapYear(year) {
    return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

• 윤년 계산 공식에 따라 해당 연도가 윤년인지 확인합니다.
• 4년마다 윤년이지만, 100으로 나누어지는 해는 윤년이 아니고, 400으로 나누어지는 해는 윤년입니다.

function leapYearChangeTerm(startDate) {
    if (!startDate) return false;

• 인자로 받은 startDate가 존재하지 않으면 함수를 종료합니다.

    const date = new Date(`${startDate}T00:00:00`);
    const year = date.getFullYear();

    const isCurrentLeap = isLeapYear(year);
    const isNextLeap = isLeapYear(year + 1);

• 입력된 날짜로부터 연도를 추출한 뒤, 현재 연도와 다음 연도가 윤년인지 각각 판별합니다.

    const time = date.getTime();
    const march1ThisYear = new Date(`${year}-03-01T00:00:00`).getTime();
    const feb29NextYear = new Date(`${year + 1}-02-29T23:59:59`).getTime();

• 기준 날짜가 3월 1일 이전인지, 다음 해의 2월 29일 이전인지 확인하기 위한 타임스탬프 계산입니다.

    const $option = $("select[name=date_term] option[value=365]");
    $option.text("365일");

• 기본적으로 select 박스 내 '365일' 옵션을 선택하여 텍스트를 설정합니다.

    const inFirstLeapWindow = isCurrentLeap && time > 0 && time < march1ThisYear;
    const inNextLeapWindow = isNextLeap && time > march1ThisYear && time < feb29NextYear;

    if (inFirstLeapWindow || inNextLeapWindow) {
        $option.text("366일");
    }

• 현재 연도가 윤년이고 3월 1일 이전이거나, 다음 해가 윤년이며 3월 1일 이후이면서 다음 해 2월 29일 전이라면, 해당 기간을 윤년 기간으로 간주하고 '366일'로 텍스트를 변경합니다.

---

✨ 사용 예시

leapYearChangeTerm("2024-02-20"); // 2024년은 윤년이며 3월 1일 이전 → 366일
leapYearChangeTerm("2023-12-10"); // 2024년은 윤년이며 아직 2월 29일 전 → 366일
leapYearChangeTerm("2025-04-01"); // 윤년 아님 → 365일

---

✨ 활용 예시

• 날짜 기반 기간 설정 UI: '1년'이라는 텍스트 대신 실제 날짜 계산 결과를 반영해 '365일' 또는 '366일'로 표시할 수 있음
• 사용자 경험 개선: 윤년 처리를 통해 잘못된 일 수 계산을 사전에 방지 가능
• 자동화: 특정 년도 로직이 아닌 실제 달력 기준 계산이라 유연성 확보 가능

---

✨ 결론

leapYearChangeTerm 함수는 날짜 입력값을 바탕으로 윤년 여부를 정밀하게 판단하고, 기간 선택 옵션을 동적으로 변경하는 데 유용한 함수입니다. 사용자의 선택 시기와 해의 경계에 따라 유동적으로 '365일' 또는 '366일'을 적용함으로써 UX 정확성을 높일 수 있습니다.