통계·설정 탭 첫 진입 시 튜토리얼 자동 시작 기능 추가

🤖 785 in / 695 out / 1480 total tokens

사용자가 통계와 설정 탭에 처음 진입할 때 튜토리얼이 자동으로 실행되도록 구현했다. 기존 대시보드 튜토리얼과 동일한 패턴을 따라가며, 각 탭별로 적절한 가이드를 제공한다.

FLAG_BITS에 stats(4)와 settings(8) 플래그를 추가했다. createHasSeenStore 함수를 활용해 각 탭의 방문 여부를 추적하고, 한 번 튜토리얼을 본 사용자에게는 다시 표시하지 않는다. 서버 API의 VALID_FLAGS 배열도 새 플래그 값을 포함하도록 업데이트했다.

Settings.svelte에서는 테마 섹션, Stats.svelte에서는 통계 그리드를 타겟으로 하는 튜토리얼 스텝을 정의했다. Tutorial 컴포넌트를 import하고 onMount 시점에 hasSeen 스토어 값을 체크해 자동으로 튜토리얼을 시작한다.

const tutorialSteps = [
  {
    target: '#sect-theme',
    title: '앱 테마',
    content: '다크모드와 라이트모드를 전환할 수 있다.'
  }
];
 
const hasSeenSettings = createHasSeenStore('settings');

비트 플래그 방식 덕분에 확장이 깔끔하다. 다음엔 리포트 탭도 추가해야겠다.