헤더 레이아웃 정리와 뷰 전환 시 스크롤 초기화

🤖 1126 in / 1633 out / 2759 total tokens

달력 헤더의 물음표 버튼과 오늘 날짜 표시를 왼쪽 상단으로 재배치했다. 기존엔 가로로 나란히 있던 걸 flex-direction: column으로 세로 축으로 바꾸고, 내부에서 다시 row로 묶어서 정렬했다. UI가 한층 정돈된 느낌이다.

탭 전환할 때 스크롤 위치가 그대로 남아있는 게 거슬렸다. currentView 구독 안에서 requestAnimationFrame으로 .view-scroll 영역을 최상단으로 리셋한다. 튜토리얼 종료 시에도 동일하게 처리해서 사용자가 항상 화면 맨 위부터 콘텐츠를 볼 수 있게 했다.

const unsubView = currentView.subscribe(v => {
  if (typeof window !== 'undefined' && v !== 'cal') {
    history.pushState({ view: v }, '');
  }
  if (typeof window !== 'undefined') {
    requestAnimationFrame(() => {
      document.querySelector('.view-scroll')?.scrollTo({ top: 0 });
    });
  }
});

Stats와 Settings 컴포넌트의 스크롤 컨테이너에 view-scroll 클래스를 추가했다. 공통 클래스로 묶어두니 한 번에 제어할 수 있어 편하다. requestAnimationFrame을 쓴 건 DOM 업데이트 이후 시점을 보장하기 위해서다.