useTodos.js

📎 상태 정의

const todoList = ref([]);
const newTitle = ref("");

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

const selectedDateObj = ref(new Date());

// 현재 달력에서 보고 있는 월(YYYY-MM)
const currentMonth = ref(toMonthStr(new Date().getFullYear(), new Date().getMonth() + 1));

// summary map: YYYY-MM-DD -> { total, remaining }
const monthRemainingMap = ref({});

📎 선택 날짜 문자열(selectedDate)

• selectedDateObj(Date 또는 문자열)를 안전하게 Date로 변환
• YYYY-MM-DD 형태로 가공

const selectedDate = computed(() => {
  const raw = selectedDateObj.value;
  const d = raw instanceof Date ? raw : new Date(raw);
  if (isNaN(d)) return new Date().toISOString().slice(0, 10);

  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${y}-${m}-${day}`;
});

📎 선택 날짜 remaining 계산(remainingForSelectedDate)

• monthRemainingMap에서 해당 날짜 remaining을 찾아 사용
• 없으면 0으로 처리

const remainingForSelectedDate = computed(() => {
  return monthRemainingMap.value[selectedDate.value]?.remaining ?? 0;
});

📎 캘린더 attribute 생성(calendarAttrs)

• today highlight
• selected highlight
• monthRemainingMap 기반 dot 표시

const calendarAttrs = computed(() => {
  const attrs = [
    {
      key: "today",
      dates: new Date(todayStr + "T00:00:00"),
      highlight: { outline: true },
    },
    {
      key: "selected",
      dates:
        selectedDateObj.value instanceof Date
          ? selectedDateObj.value
          : new Date(selectedDateObj.value),
      highlight: true,
    },
  ];

  for (const [dateStr, v] of Object.entries(monthRemainingMap.value)) {
    const total = v?.total ?? 0;
    const remaining = v?.remaining ?? 0;
    if (total <= 0) continue;

    attrs.push({
      key: `rem-${dateStr}`,
      dates: new Date(dateStr + "T00:00:00"),
      dot: { color: remaining === 0 ? "green" : "red" },
    });
  }

  return attrs;
});

📎 날짜별 Todo 조회(loadTodoList)

• token 없으면 리스트 비움
• fetchTodosApi 호출 시 date=selectedDate로 조회

async function loadTodoList() {
  if (!tokenRef.value) {
    todoList.value = [];
    return;
  }

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

  if (res?.__unauthorized) return onUnauthorized?.();
  todoList.value = Array.isArray(res) ? res : [];
}

📎 월 summary 조회(loadMonthSummary)

• currentMonth 갱신
• fetchMonthSummaryApi 호출
• date별 map으로 변환해서 monthRemainingMap 저장

async function loadMonthSummary(monthStr) {
  if (!tokenRef.value) return;

  currentMonth.value = monthStr;

  const data = await fetchMonthSummaryApi({
    monthStr,
    authHeader: authHeaderFn(),
  });

  if (data?.__unauthorized) return onUnauthorized?.();

  const map = {};
  (Array.isArray(data) ? data : []).forEach((row) => {
    map[row.date] = { total: row.total, remaining: row.remaining };
  });

  monthRemainingMap.value = map;
}

📎 추가(addTodo)

• newTitle trim → 빈 값 방지
• addTodoApi 호출
• 이후 리스트/summary 동기화

async function addTodo() {
  if (!tokenRef.value) return;
  const title = newTitle.value.trim();
  if (!title) return;

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

  if (res?.__unauthorized) return onUnauthorized?.();

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

📎 완료(toggleTodo)

• done을 반전해서 전송
• 이후 리스트/summary 동기화

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

  if (res?.__unauthorized) return onUnauthorized?.();

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

📎 수정(startEdit / cancelEdit / saveEdit)

• startEdit에서 id/title 세팅
• cancelEdit로 초기화
• saveEdit에서 editTodoApi 호출 후 동기화

📎 완료(toggleTodo)

• done을 반전해서 전송
• 이후 리스트/summary 동기화