MainView

📎 메인 레이아웃

• 상단 헤더(브랜딩/세션/로그아웃)
• 좌측 캘린더, 우측 리스트 구조

<div class="dash-body">
  <aside class="dash-left">
    <MainCalendar ... />
  </aside>

  <main class="dash-right">
    <MainList ... />
  </main>
</div>

📎 인증 만료 처리(Unauthorized Logout)

• API에서 401이 오면 공통으로 로그아웃 처리
• 세션 타이머 정지, auth 상태 초기화, 라우팅 이동

function unauthorizedLogout() {
  setAuthMessage({ error: "세션이 만료되었습니다. 다시 로그인해주세요.", info: "" });
  timer.stop();
  clearAuth();
  router.replace("/auth");
}

📎 useTodos 연결 구조

• MainView는 UI 조립만 담당
• 로직은 useTodos로 위임
• onUnauthorized 콜백으로 인증 만료 대응

const {
  todoList,
  newTitle,
  editId,
  editTitle,
  startEdit,
  cancelEdit,
  saveEdit,
  selectedDateObj,
  selectedDate,
  calendarAttrs,
  remainingForSelectedDate,
  loadMonthSummary,
  initialPage,
  addTodo,
  toggleTodo,
  deleteTodo,
} = useTodos({
  tokenRef: token,
  authHeaderFn: authHeader,
  onUnauthorized: unauthorizedLogout,
});

📎 캘린더 이벤트 연결

• 캘린더 월 이동 이벤트(monthChange) → 월 summary API 호출(loadMonthSummary)

<MainCalendar
  v-model:selectedDateObj="selectedDateObj"
  :calendar-attrs="calendarAttrs"
  :selected-date="selectedDate"
  :remaining="remainingForSelectedDate"
  :initial-page="initialPage"
  @monthChange="loadMonthSummary"
/>

📎 세션 타이머

• 로그인 상태면 timer.start()
• 연장 버튼 클릭 시 60분 reset

if (token.value) timer.start();

function extendSession() {
  timer.reset(60 * 60);
  setAuthMessage({ info: "세션이 60분으로 연장되었습니다.", error: "" });
}