오늘의 잔디

---

📅 일정 관리 캘린더 - 지난 일정 필터링 기능 구현 (2025.06.26)

✅ 오늘 작업한 핵심 기능

1. 지난 일정 자동 숨기기 / 보기 토글 기능 추가

• 기능 설명:

  • 지난 일정(오늘보다 이전 날짜의 이벤트)을 자동으로 숨기고, 버튼 클릭으로 다시 보이도록 토글할 수 있게 했습니다.

• 적용 방식:

  • filterEvents(events) 함수에서 현재 날짜 기준으로 지난 일정 필터링.
  • renderCalendar() 호출 시 showPastEvents 상태에 따라 필터링 적용 여부 결정.
  • 토글 버튼 텍스트: 지난 일정 보기 ↔ 지난 일정 숨기기

• 관련 JS 코드:

let showPastEvents = false;

function filterEvents(events) {
  if (!showPastEvents) {
    const today = moment().startOf("day");
    return events.filter(event => moment(event.date).isSameOrAfter(today));
  }
  return events;
}

document.getElementById("togglePastBtn").addEventListener("click", () => {
  showPastEvents = !showPastEvents;
  document.getElementById("togglePastBtn").innerText = showPastEvents
    ? "지난 일정 숨기기"
    : "👁️ 지난 일정 보기";
  renderCalendar();
});

---

2. 💄 "지난 일정 보기" 버튼 UI 위치 조정

• 기능 설명:

  • 기존 오른쪽 상단에 있던 버튼을 보라색 통계 버튼 아래 왼쪽으로 이동.

• CSS 수정 내용:

.filter-toggle-wrapper {
  position: fixed;
  top: 270px;      /* 보라색 버튼보다 아래 */
  right: 40px;     /* 보라색 버튼 기준 맞춤 */
  z-index: 6;
}

#togglePastBtn {
  padding: 8px 14px;
  font-size: 14px;
  background-color: #4446;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

#togglePastBtn:hover {
  background-color: #5557;
}

---

3. 📸 캡처 화면

• ✅ 기본 상태 (숨김)
  

• ✅ 지난 일정 보기 토글 후 상태

---

📌 마무리

• 필터링 기능 덕분에 UX가 한층 개선됨.
• 다음 목표로는 🔔 알림 기능, 📂 카테고리별 보기, ✅ 완료 상태 분리 등의 기능 추가 고려!

---