퀵 액션을 바텀시트로 개편하고 식사 금액 입력 팝업 추가

🤖 1164 in / 643 out / 1807 total tokens

기존 인라인 퀵 액션 버튼들을 별도 바텀시트로 분리했다. 오늘 날짜 선택 시 자동으로 슬라이드업되며, 오버레이 클릭이나 닫기 버튼으로 닫을 수 있다. 식사 버튼은 이제 금액 입력 팝업을 띄운다. 기본값이 자동 입력되지만 수정 가능하도록 했다.

CSS는 fixed 포지션 오버레이에 backdrop-filter 블러 효과를 줬다. 바텀시트가 아래에서 올라오는 느낌을 위해 flex + align-items: flex-end 조합을 썼다.

.qs-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

Svelte 컴포넌트에서 showQuickSheet, showMealPopup, mealInputAmount 상태를 추가로 관리한다. 오늘 날짜인지 감지해서 reactive하게 시트를 열어주는 로직도 넣었다.

UX가 훨씬 깔끔해졌다. 버튼이 화면을 잡아먹던 게 사라지고 필요할 때만 올라오니까.