스마트 출퇴근 버튼으로 기록 입력 UX 개선

🤖 1052 in / 805 out / 1857 total tokens

출퇴근 기록 앱의 핵심 기능인 하단바 버튼을 상태에 따라 스마트하게 전환되도록 만들었다. 오늘 날짜를 기준으로 출근 기록이 없으면 '출근', 있으면 '퇴근', 둘 다 있으면 '기록수정' 버튼이 노출된다. 오늘이 아닌 날짜를 선택하면 버튼을 아예 감춰서 잘못된 날짜에 기록하는 실수를 방지했다. 캘린더 뷰가 아닐 때는 기존처럼 + 버튼으로 직접 입력할 수 있게 했다. 기록 완료 후 토스트 알림으로 확인 및 수정 링크를 제공하고, 헤더에는 오늘 날짜 스트립을 추가해 현재 날짜를 한눈에 볼 수 있게 했다.

function todayStr() {
  const d = new Date();
  return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
}
 
$: todayRecord = $records.find(r => r.date === todayStr());
$: btnState = !todayRecord ? 'checkin' : !todayRecord.checkout ? 'checkout' : 'edit';

상태에 따른 버튼 전환 로직을 반응형 선언으로 깔끔하게 처리했다. records 스토어 구독 값이 바뀌면 자동으로 버튼 상태도 갱신된다.