캘린더 근무시간 색상 구분과 설정 미저장 감지

🤖 878 in / 732 out / 1610 total tokens

캘린더에 근무시간을 한눈에 파악할 수 있도록 색상 구분을 추가했다. 정규 근무는 초록, 자동 공제 구간은 회색, 초과 근무는 주황색으로 표시된다. 주말과 공휴일은 별도 색상으로 구분해 시각적 혼선을 줄였다.

설정 페이지에서 변경사항이 저장되지 않은 상태로 탭을 이동하면 확인 팝업이 뜨도록 했다. settingsDirty 스토어를 추가해 dirty state를 추적하고, BottomBar와 페이지 이동 시 이를 체크한다. 의도치 않은 설정 변경을 방지하는 데 도움이 될 것.

모바일에서 버튼 연타 시 화면이 확대되는 문제도 touch-action: pan-x pan-y로 해결했다.

function workZoneColor(workMin, dateStr) {
  if (isWeekend(dateStr) || isHoliday(dateStr)) return 'var(--ot-c)';
  const bufferStart = 540 - $settings.bufferMin;
  if (workMin <= bufferStart) return 'var(--meal-c)';
  if (workMin <= 540) return '#64748b';
  return 'var(--ot-c)';
}

버퍼 시간 계산이 540분(9시간) 기준이라 나중에 설정 가능하도록 리팩토링 필요할 듯.