모바일 캘린더 상세 영역, 바텀시트로 전환

🤖 1439 in / 687 out / 2126 total tokens

모바일에서 날짜 클릭 후 상세 정보가 보이지 않던 문제를 해결했다. 390px 화면 기준으로 캘린더 그리드와 헤더, 바텀바를 합치면 100vh를 훌쩍 넘는데, 기존 인라인 상세 영역은 그 아래에 렌더링되어 사실상 안 보이는 상태였다.

해결책으로 DaySheet를 인라인 배치에서 슬라이드업 바텀시트 오버레이로 전환했다. 날짜 선택 시 캘린더 위로 상세 정보가 올라오는 구조다. Calendar.svelte에 closeDetail 함수를 추가해서 바텀시트 외부 영역 터치 시 닫히도록 처리했고, DaySheet.svelte는 바텀시트 전용 구조로 전면 리라이트했다. CSS도 기존 qs-* 스타일을 정리하고 ds-* 바텀시트 스타일로 교체했다.

function closeDetail() {
  selectedDate.set(null);
}

이제 날짜 탭하면 오버레이가 떠서 가려도 캘린더 컨텍스트를 유지하면서 상세 정보를 확인할 수 있다.