객체지향 설계를 기반으로 윤년 및 날짜 유효성 처리 기능 개발

1. 구현 목표

목표 기능 : 사용자가 년,월,일 데이터를 초기 입력 후 수정 가능 하도록하고 아래 조건들에 따라 입력 또는 수정한 년,월,일 데이터를 처리하여 화면에 띄워주는 기능

 

조건 1 . 년 데이터가 음수거나 0이면 1년으로 처리

조건 2-1 . 월 데이터가 음수거나 0이면 1월로 처리

조건 2-2 .  월이 13월 이상으로 입력되면 12월로 처리

 

조건 3-1 .일 데이터가 음수거나 0이면 1월로 처리

조건 3-2 . 일이 입력된 월의 최대일을 벗어나면 입력된 월의 최대 일로 처리

EX) 1월로 입력됐을때 1월 최대일은 31일이기 때문에 32일로 입력하면 31일로 처리

조건 3-3 . 입력된 년이 윤년일 경우에는 2월은 29일까지 처리 가능하도록 하기

 

 

2. 개발

 

2-1. 입력된 년/월/일 값을 하나의 객체로 관리하기 위한 MyDate 클래스 구현. 해당 클래스에서 위 조건들에 따른 데이터 처리가 가능하도록 개발

 

Date.js

export class MyDate {
 
    constructor(year, month, day) {
      
      this.year = year;
      this.month = month;
      this.day = day;
    }
 
    get daysInMonth() {
      return [
        31, this.isLeapYear() ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31
      ];
    }
 
 
    getFormattedDate() {
        
        // 조건 1. 년 데이터가 음수거나 0이면 1년으로 처리
        if(this.year <= 0){ 
            this.year = 1
        }
 
        // 조건 2-1. 월 데이터가 음수거나 0이면 1월로 처리
        // 조건 2-2.  월이 13월 이상으로 입력되면 12월로 처리
        if(this.month <= 0 ){
            this.month = 1
        } else if(this.month > 12){ 
            this.month = 12
        }
 
        // 조건 3-1. 일 데이터가 음수거나 0이면 1월로 처리
        // 조건 3-2. 일이 입력된 월의 최대일을 벗어나면 입력된 월의 최대 일로 처리
        if(this.day <= 0 ){
            this.day = 1
        }else if(this.daysInMonth[(this.month - 1)] < this.day){ 
            this.day = this.daysInMonth[(this.month - 1)]
        }
 
        return `${this.year}년 ${this.month}월 ${this.day}일`;
    }
  
    isValid() {
      return !isNaN(this.date.getTime());
    }
  
    isLeapYear() {
      return (this.year % 4 === 0 && this.year % 100 !== 0) || this.year % 400 === 0;
    }
  }

 

 

 

2-2. App 컴포넌트 부분에서 사용자에게 입력 받은 년월일 데이터를 기준으로 MyDate 객체를 생성하여 데이터에 맞는 조건들을 처리한 후 렌더링    

 

DateApp.js

import React, { useState } from 'react';
import { MyDate } from './Date';
 
function App() {
 
  const [year, setYear] = useState('');
  const [month, setMonth] = useState('');
  const [day, setDay] = useState('');
  const [isAdd, setIsAdd] = useState(false); // 등록 버튼 클릭 여부
  const [message, setMessage] = useState('');
 
  const handleClick = () => {
 
    const dateObj = new MyDate(Number(year), Number(month), Number(day));
 
    if (!isAdd) {
      setMessage(dateObj.getFormattedDate());
      setIsAdd(true);
    } else {
      setMessage(dateObj.getFormattedDate());
    }
  };
 
  return (
    <>
      <div>
        <label>년:</label>
        <input type="number" value={year}
          onChange={(e) => setYear(e.target.value)}></input>
      </div>
      <div>
        <label>월:</label>
        <input type="number" value={month}
          onChange={(e) => setMonth(e.target.value)}></input>
      </div>
      <div>
        <label>일:</label>
        <input type="number" value={day}
          onChange={(e) => setDay(e.target.value)}></input>
      </div>
 
      <button onClick={handleClick}>
          {isAdd ? '수정' : '등록'}
      </button>
 
      {message && <p>{message}</p>}
 
    </>  
    
  );
}
 
export default App;
 

 

 

 

3. 결과

 

- 2000년은 윤년이기 때문에 2월일 경우 29일로 처리돼어 출력

 

 

 

- 2001년은 윤년이 아니기 때문에 28일로 처리돼어 출력