설정 탭 이탈 시 미저장 변경사항 확인 팝업 구현

🤖 845 in / 687 out / 1532 total tokens

사용자가 설정을 변경하고 저장하지 않은 채 다른 탭으로 이동하려 할 때 확인 팝업을 띄워주는 기능을 추가했다. settingsDirty 스토어를 새로 만들어 설정 변경 여부를 추적한다. Settings 컴포넌트에서 초기 설정값을 JSON으로 저장해두고, 현재 값과 비교하여 변경사항이 있으면 dirty 상태를 true로 설정한다. 탭 전환과 뒤로가기 두 가지 이탈 경로 모두에서 확인 다이얼로그가 작동하도록 처리했다.

변경 감지는 반응형 선언($:)으로 구현했다. 설정 객체를 JSON 문자열로 변환해 비교하는데, 시간 관련 필드는 분 단위로 변환 후 비교한다. BottomBar의 탭 전환 함수와 페이지의 popstate 핸들러 모두에서 dirty 상태를 체크하고, 변경사항이 있으면 customConfirm 스토어를 통해 확인 팝업을 띄운다.

let initial = JSON.stringify($settings);
 
$: {
  const current = JSON.stringify({
    ...s,
    mealMorningStart: toMin(morningStart),
    mealMorningEnd: toMin(morningEnd),
    mealEveningStart: toMin(eveningStart),
    mealEveningEnd: toMin(eveningEnd)
  });
  settingsDirty.set(current !== initial);
}

이제 사용자가 실수로 설정을 잃어버릴 일이 없다. Claude와 페어 프로그래밍으로 구현했다.