CRUD

📎 조회

• selectedDateObj 변경 시 loadTodoList 호출

  watch(selectedDateObj, () => {
    if (!tokenRef.value) return;
    loadTodoList();
  });
  

• fetchTodosApi 호출

  async function loadTodoList() {
    const res = await fetchTodosApi({
      date: selectedDate.value,
      authHeader: authHeaderFn(),
    });
    todoList.value = Array.isArray(res) ? res : [];
  }
  

• 월별 summary 조회

  async function loadMonthSummary(monthStr) {
    currentMonth.value = monthStr;
  
    const data = await fetchMonthSummaryApi({
      monthStr,
      authHeader: authHeaderFn(),
    });
  
    const map = {};
    data.forEach(row => {
      map[row.date] = {
        total: row.total,
        remaining: row.remaining,
      };
    });
  
    monthRemainingMap.value = map;
  }
  

• 선택한 날짜가 변경될 때마다 해당 날짜 Todo 조회

  watch(selectedDateObj, () => {
    if (!tokenRef.value) return;
    loadTodoList();
  });
  

• 최초 진입 시 mounted에서 초기 조회

  onMounted(async () => {
    const { year, month } = getYMFromDate(selectedDateObj.value);
    const initMonth = toMonthStr(year, month);
  
    await loadTodoList();
    await loadMonthSummary(initMonth);
  });
  

📎 추가

• input에서 엔터 누르면 addTodo 실행

  <input
    type="text"
    v-model="newTitle"
    @keydown.enter="addTodo"
  />
  

• title, date를 param으로 전달

  const res = await addTodoApi({
    title,
    date: selectedDate.value,
    authHeader: authHeaderFn(),
  });
  

• 추가 후 목록 + 월 summary 재조회

  newTitle.value = "";
  await loadTodoList();
  await loadMonthSummary(currentMonth.value);
  

📎 내용 수정

• edit 상태에서 엔터 시 saveEdit 실행

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

• 수정 후 목록 + 월 summary 재조회

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

📎 일정 완료(체크)

• 체크 시 toggleTodo 실행

  async function toggleTodo(todo) {
    await toggleTodoApi({
      id: todo._id,
      done: !todo.done,
      authHeader: authHeaderFn(),
    });
  }
  

• 이후 목록 + 월 summary 재조회

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

📎 삭제

async function deleteTodo(id) {
  await deleteTodoApi({
    id,
    authHeader: authHeaderFn(),
  });
}

• 삭제 후 재조회

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