year&month State Management

📅 연월 상태 관리 훅 설계 (year/month State Management)

이 문서는 FSD 구조 기반 가계부 프로젝트에서 사용되는
연월(year, month) 관련 상태 관리 로직을 모아 정리한 문서입니다.

---

🧩 역할 분리 개요

훅 이름	책임	위치
useDateParams	URL에서 연/월 파싱 및 변경	shared/hooks/
useTransactionData	연월 기반 데이터 fetch + 상태 관리	entities/transaction/hooks/
useChangeMonth	유저 인터랙션 기반 연월 변경	features/changeMonth/hooks/

---

🔹 1. useDateParams – URL 기반 연월 파싱 및 설정

위치: shared/hooks/useDateParams.ts

import { useSearchParams } from 'react-router-dom';

export const useDateParams = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const now = new Date();

  const year = parseInt(searchParams.get('year') || now.getFullYear().toString(), 10);
  const month = parseInt(searchParams.get('month') || (now.getMonth() + 1).toString(), 10);

  const setYearMonth = (newYear: number, newMonth: number) => {
    searchParams.set('year', newYear.toString());
    searchParams.set('month', newMonth.toString());
    setSearchParams(searchParams);
  };

  return { year, month, setYearMonth };
};

• URLSearchParams는 Map 유사 객체로 동작합니다.
• 쿼리 파라미터 순서는 set() 순서대로 직렬화됩니다.
• 내부 클로저로 searchParams를 참조하기 때문에 콜백으로 전달 가능하며 안전합니다.

---

🔹 2. useTransactionData – 연월 기반 데이터 패칭

위치: entities/transaction/hooks/useTransactionData.ts

import { useEffect, useState } from 'react';
import { useDateParams } from '@/shared/hooks/useDateParams';
import { fetchTransactionData } from '../api';

export const useTransactionData = () => {
  const { year, month } = useDateParams();
  const [data, setData] = useState<Transaction[]>([]);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetchTransactionData({ year, month })
      .then(setData)
      .finally(() => setLoading(false));
  }, [year, month]);

  return { data, isLoading };
};

• year/month가 바뀔 때마다 서버에 fetch 요청이 발생합니다.
• fetchTransactionData는 [📄 수입/지출 API 설계 문서]로 연결 예정입니다.

---

🔹 3. useChangeMonth – 유저 인터랙션을 통한 월 변경

위치: features/changeMonth/hooks/useChangeMonth.ts

import { useDateParams } from '@/shared/hooks/useDateParams';

export const useChangeMonth = () => {
  const { year, month, setYearMonth } = useDateParams();

  const nextMonth = () => {
    const newMonth = month === 12 ? 1 : month + 1;
    const newYear = month === 12 ? year + 1 : year;
    setYearMonth(newYear, newMonth);
  };

  const prevMonth = () => {
    const newMonth = month === 1 ? 12 : month - 1;
    const newYear = month === 1 ? year - 1 : year;
    setYearMonth(newYear, newMonth);
  };

  return { nextMonth, prevMonth };
};

• 단순한 연월 증감 로직을 추상화한 인터랙션용 훅입니다.
• Header 등에서 이 훅을 통해 연월을 변경합니다.

---

🔗 관련 문서

• fetchTransactionData 정의 및 API 연동 설계 ← 연결 예정

---