Edit 기능

📎 edit 상태 관리

const editId = ref(null);
const editTitle = ref("");

📎 저장

async function saveEdit(id) {
  await editTodoApi({
    id,
    title: editTitle.value,
    authHeader: authHeaderFn(),
  });

  cancelEdit();
  await loadTodoList();
  await loadMonthSummary(currentMonth.value);
}

v-calendar

📎 설치

npm i v-calendar@next

📎 main.js 전역 등록

import VCalendar from "v-calendar";
import "v-calendar/style.css";

createApp(App)
  .use(router)
  .use(VCalendar, {})
  .mount("#app");

📎 VDatePicker 사용

<VDatePicker
  v-model="dateProxy"
  mode="date"
  is-required
  :columns="1"
  :attributes="calendarAttrs"
  :initial-page="initialPage"
  @update:pages="onUpdatePages"
/>

📎 날짜 선택

• selectedDateObj를 부모와 양방향 바인딩함

  const dateProxy = computed({
    get: () => props.selectedDateObj,
    set: (v) => emit("update:selectedDateObj", v),
  });
  

📎 월 이동

• update:pages 이벤트 사용

  function onUpdatePages(pages) {
    const first = pages[0];
    const monthStr = toMonthStr(first.year, first.month);
  
    if (monthStr === lastEmittedMonth.value) return;
    lastEmittedMonth.value = monthStr;
  
    emit("monthChange", monthStr);
  }
  

• 부모(MainView)에서 loadMonthSummary 호출

  <MainCalendar
    @monthChange="loadMonthSummary"
  />
  

📎 Dot 표시 로직

• monthRemainingMap 기반 attribute 생성

  for (const [dateStr, v] of Object.entries(monthRemainingMap.value)) {
    if (v.total <= 0) continue;
  
    attrs.push({
      key: `rem-${dateStr}`,
      dates: new Date(dateStr + "T00:00:00"),
      dot: { color: v.remaining === 0 ? "green" : "red" },
    });
  }
  

• 초록: 모두 완료

• 빨강: 남은 할 일 있음

  남은 할 일 <strong>{{ remaining }}</strong>개
  

📎 상태 흐름 구조

selectedDateObj
selectedDate (computed)
monthRemainingMap
currentMonth