설정 UX 개선: 테마 실시간 프리뷰와 뒤로가기 처리

🤖 1044 in / 863 out / 1907 total tokens

설정 화면에서 테마를 변경할 때 바로 미리볼 수 있게 했다. 기존엔 저장해야 적용돼서 어떤 색상인지 확인하기 번거로웠는데, 이제 클릭 즉시 화면에 반영되고 실제 저장은 저장 버튼으로 한다. themePreview 스토어를 새로 만들고 레이아웃에서 기존 설정과 프리뷰 값을 병합해서 보여주는 방식이다.

뒤로가기 동작도 자연스럽게 다듬었다. 설정이나 통계 탭에서 뒤로가기를 누르면 캘린더로 돌아간다. popstate 이벤트를 잡아서 현재 뷰가 캘린더가 아니면 캘린더로 전환하고 히스토리를 다시 쌓는 식이다. 로그아웃에도 확인 팝업을 추가해서 실수로 튕기는 걸 방지했다.

// 테마 실시간 프리뷰
function previewAcc(key) {
  s.accTheme = key;
  themePreview.set({ accTheme: s.accTheme, bgTheme: s.bgTheme });
}
 
// 뒤로가기 시 탭 전환
function handlePopState() {
  if ($currentView !== 'cal') {
    currentView.set('cal');
    history.pushState({ view: 'cal' }, '');
  }
}

설정 하단 여백도 80px에서 140px로 늘려서 저장 버튼이 스크롤 영역에 안 끼이게 했다. 작은 디테일인데 사용자 입장에선 꽤 거슬리는 부분이었다.