오늘의 잔디

---

🎯 캘린더 웹앱 개발 기록 – 6월 28일 작업 정리

오늘은 캘린더 웹앱의 프론트엔드 UI 개선과 기능 정리를 중심으로 작업을 진행했다. 사용성, 시인성 모두를 고려하여 깔끔하고 직관적인 캘린더를 만드는 데 집중했다.

---

✅ 주요 작업 내역

1. 🔴 주말(토, 일) 날짜 색상 통일

• 토요일과 일요일 모두 .weekend 클래스를 적용해 빨간색 텍스트로 표시

• Calendar.prototype.drawDay() 함수 내부에 요일 판단 로직 추가

  const dow = day.day();
  if (dow === 0 || dow === 6) {
    outer.classList.add('weekend');
  }

• CSS에서 스타일 지정:

  .day.weekend .day-number {
    color: #f87171; /* 빨간색 */
  }

---

2. 🔵 오늘 날짜 스타일 개선

• .today 클래스가 적용된 날짜에 대해 파란색 강조

• CSS 스타일링:

  .day.today .day-number {
    color: #60a5fa;        /* 파란색 */
    font-weight: bold;     /* 굵게 */
    transform: scale(1.05); /* 살짝 키움 */
    display: inline-block;  /* transform 적용 위해 필수 */
  }

---

3. 🧹 코드 구조 정리 및 최적화

• 기존 drawDay() 함수 내 드래그 & 드롭, 클릭 이벤트 로직을 정돈
• today, weekend, selected 등의 CSS 클래스를 구분해서 적용
• 이벤트 표시를 위한 스타일과 DOM 렌더링 위치 개선

---

💬 느낀 점

조금의 스타일 수정만으로도 캘린더의 가독성과 완성도가 훨씬 좋아지는 걸 느꼈다.
앞으로는 월간/주간 뷰 토글, 일정 검색 필터, 다크모드 토글 같은 기능도 고려해보고 싶다.

---

⏭️ 다음 목표

• 일정 완료 체크 UI 개선 (애니메이션 등)
• 카카오톡 알림 기능 리팩토링
• 통계 UI 스타일링 개선 (모달 위치 조정 등)
• 일정 복사/이동 기능 UI 명확화

---