[RESAT] 5일차 미션 - 달력 만들기

 

오늘은 RESAT 파밍 챌린지 5일 차다.

어제 미션은 To-Do List를 만드는 미션이었다.

단순하게 할 일만 적는 게 아니라 이것저것 추가 미션이 있어서 조금 복잡하긴 했지만

이거 까지는 꽤 괜찮은 것 같다.

 

근데 이번 미션인 [달력 만들기]가 상당히 빡셀것 같다..

 

---

미션 내용

- 캘린더 구현
- 화살표를 누르면 현재 월 기준 전 달 혹은 다음 달로 넘어가는 기능 구현
- 일마다 선택 가능하고, 선택 시 메모를 작을 수 있는 창 띄우기
- 메모 작성 및 저장 기능 구현
- 작성한 날짜에는 메모가 있다는 표시가 되도록 구현
- 메모를 작성한 날을 누를 경우 이전에 작성한 메모장 노출
- 메모장에 기록한 내용 수정

 

이번 미션은 단순 캘린더를 구현하는 것을 벗어나,

일자 별로 메모를 기록할 수 있도록 구현하는 기능도 있었다.

지금 든 생각이지만, 지금 하고 있는 모든 기능들을 하나로 합쳐서

어떤 앱을 만들 수도 있지 않을까? 하는 생각도 들었다.

 

아무튼 이 캘린더 미션에서 가장 기본이 되는 것은

- [ 월별 달력 구현 ]

- [ 일자별 메모 기능 ]

이게 가장 핵심이 되는 기능이 아닐까 싶다.

 

그 외로는 메모 수정과 해당 일자에 메모가 있다는 표시를 하는 기능이지 않을까 싶다.

 

여기서 요구하는 조건 외에 나중에 추가하면 좋을 기능을 리스트업 해보면

 

- 오늘 날짜 달력 표시
- 메모 삭제
- 여러 일자 한 번에 선택 후 메모 남기기
- 여러 일자 메모에서 일자 수정

 

중간중간 생각나는 대로 추가해 보고 기능 구현할 때마다 새로운 글을 써봐야겠다.

 

728x90

중점 구현 사항

아무래도 캘린더 같은 경우 대부분 라이브러리를 썼던 터라 달력을 직접 만드는 게 가장 큰 구현 사항이었다.

여기서 고려했던 부분은 현재 달을 기준으로 앞과 뒤의 달의 잔여 일자를 보여줄지 아닐지가 문제였다.

사실 구현하지 않아도 되지만, 레이아웃 상 비어있는 게 내 기준에는 좀 어색해 보여서

채워 넣는 것으로 방향을 잡았는데, 이게 시간을 잡아먹는 아주 큰 이유가 되었다.

 

const createPresentMonth = (year, month, memo) => {
  let presentMonthEndDay = new Date(year, month, 0);
  let presentMonthEndDate = presentMonthEndDay.getDate();

  for (let i = 1; i <= presentMonthEndDate; i++) {
    const day = document.createElement("div");
    day.classList.add("day");

    if (memo.filter((el) => el.date === `${year}-${month}-${i}`).length > 0) {
      day.innerHTML = `${i} <span>📝</span>`;
    } else {
      day.innerText = i;
    }

    dayList.appendChild(day);

    day.addEventListener("click", () => handleMemoModal(year, month, i));
  }
};

 

우선 현재 달의 일자는 이렇게 생성할 수 있었다.

반복문을 이용해서 일자마다 하나하나 다 요소를 만들어주고 삽입했다.

아 물론 정렬하는 건 css에서 grid를 이용해서 정렬했다.

 

const createPrevMonth = (year, month, memo) => {
  let prevMonthEndDay = new Date(year, month - 1, 0);
  let prevMonthEndDate = prevMonthEndDay.getDate();
  let prevMonthEndDayOfWeek = prevMonthEndDay.getDay();

  if (prevMonthEndDayOfWeek === 6) return;

  for (let i = prevMonthEndDate - prevMonthEndDayOfWeek; i <= prevMonthEndDate; i++) {
    const day = document.createElement("div");
    day.classList.add("day");

    if (memo.filter((el) => el.date === `${year}-${month - 1}-${i}`).length > 0) {
      day.innerHTML = `${i} <span>📝</span>`;
    } else {
      day.innerText = i;
    }

    dayList.appendChild(day);

    day.addEventListener("click", () => handleMemoModal(year, month - 1, i));
  }
};

 

그다음으로는 현재 달 기준 이전 달의 뒤쪽 일자를 계산해서 넣는 로직이다.

현재 달을 만들었던 반복문과는 달리 뒤부터 세어서 내려가는 형태로 로직을 구성해서 구현했다.

또 가장 첫 줄이 해당 달의 첫 날짜가 되어야 하기 때문에 마지막 일자가 토요일을 가리키면

생성되지 않도록 구현했다.

 

const createNextMonth = (year, month, memo) => {
  let nextMonthFirstDay = new Date(year, month, 1);
  let nextMonthFirstDayOfWeek = nextMonthFirstDay.getDay();

  if (nextMonthFirstDayOfWeek === 0) return;

  let setDay = 1;
  for (let i = nextMonthFirstDayOfWeek; i <= 6; i++) {
    const day = document.createElement("div");
    day.classList.add("day");

    let nextYear;
    let nextMonth;

    if (month === 12) {
      nextMonth = 1;
      nextYear = year + 1;
    } else {
      nextYear = year;
      nextMonth = month + 1;
    }

    if (memo.filter((el) => el.date === `${nextYear}-${nextMonth}-${setDay}`).length > 0) {
      day.innerHTML = `${setDay} <span>📝</span>`;
    } else {
      day.innerText = setDay;
    }

    const targetDay = setDay;
    dayList.appendChild(day);

    day.addEventListener("click", () => handleMemoModal(nextYear, nextMonth, targetDay));

    setDay = setDay + 1;
  }
};

 

다음 달의 달력을 구현할 때는 조금 더 신경 써야 할 부분이 있었다.

이전 달을 구현하는 것과 전반적인 로직은 비슷했는데, 다음 달이 만약 다음 해로 넘어가는 첫 달이라면

고려해야 할 부분이 생겨서 그 로직이 하나 추가가 됐다.

 

구현 화면

색도 좀 넣어보고, 메모장 띄우는 것도 마치 모달 창처럼 만들어 봤다 ㅋㅋㅋㅋ

원래 미션 내용 중에서는 메모가 있으면 작은 원을 표시하라고 했는데, 깔꼼하게 메모 이모지로 넣었다 ㅋㅋㅋㅋ

달력 UI는 좀 별로긴 한데, 그래도 뭔가 모달창으로 띄운 걸로 나름 만족하고 있다 ㅋㅋㅋ

 

하다 보니까 느낀 건데, 디자이너 없으면 아무고토 못하는 프론트엔드 개발자인 듯하다.

 

 

현재 상금 현황

현재 시간 기준 5일 차 과제 제출 기간이 종료됐다.

일차별 제출 인원을 조사해 본 결과 아래와 같이 확인이 되었다.

 

일차	제출 인원 (총 34명)	현재 상금	1인당 상금
1	31	15,000원	약 500원
2	12	110,000원	약 9천원
3	12	110,000원	약 9천원
4	12	110,000원	약 9천원
5	10	120,000원	12,000원

 

이제 10명으로 줄어들었다.

중간중간 미션을 제대로 수행하지 않고, 링크만 제출한 분이 있긴 한데

이걸 어떻게 관리하는지 명확하게 얘길 해주지 않은 부분이 있어서 어떻게 될지는 모르지만

드디어 상금이 1만 원을 넘어갔다!

보증금 투자 대비 2배의 수익인데 이렇게 되면 욕심난다 정말 ㅋㅋㅋ

 

---

 

배포 링크

▶ [RESAT] 달력 만들기