[AI 감성 일기장] Home 페이지 날짜 관리 및 정렬 기능 구현

Home 페이지에서 월별 일기 데이터를 관리하고 정렬하는 기능을 구현했다. 사용자가 월을 전환하며 해당 기간의 일기만 볼 수 있고, 최신순 또는 오래된순으로 정렬할 수 있다.

날짜 및 기간 관리

현재 날짜 표시 및 월 변경

pivotDate상태로 현재 표시 중인 월을 관리하고, 좌우 버튼으로 이전/다음 달로 이동할 수 있도록 구현했다.

const [pivotDate, setPivotDate] = useState(new Date());

const onIncreaseMonth = () => {
  setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1));
};

const onDecreaseMonth = () => {
  setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1));
};

<Header
  title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`}
  leftChild={<Button onClick={onDecreaseMonth} text={"<"} />}
  rightChild={<Button onClick={onIncreaseMonth} text={">"} />}
/>

 

날짜 범위 계산 및 데이터 필터링

선택된 월의 시작 시간과 종료 시간을 계산하여 해당 기간의 일기 데이터만 필터링했다.

const getMonthlyData = (pivotDate: Date, data: DiaryType[]) => {
  // 해당 월의 시작 시간
  const beginTime = new Date(
    pivotDate.getFullYear(),
    pivotDate.getMonth(),
    1,
    0,
    0,
    0
  ).getTime();

  // 해당 월의 종료 시간
  const endTime = new Date(
    pivotDate.getFullYear(),
    pivotDate.getMonth() + 1,
    0,
    23,
    59,
    59
  ).getTime();

  // 해당 월에 속하는 데이터만 필터링
  return data.filter(
    (item) => beginTime <= item.createdDate && item.createdDate <= endTime
  );
};

const data = useContext(DiaryStateContext);
const monthlyData = getMonthlyData(pivotDate, data);

// ...
<DiaryList data={monthlyData} />

DiaryStateContext에서 받아온 전체 데이터 중 현재 pivotDate에 해당하는 월의 데이터만 렌더링한다.

 

정렬 기능

정렬 상태 관리

최신순과 오래된순 두 가지 정렬 방식을 sortType상태로 관리했다.

const [sortType, setSortType] = useState<"latest" | "oldest">("latest");

const onChangeSortType = (e: React.ChangeEvent<HTMLSelectElement>) => {
  setSortType(e.target.value as "latest" | "oldest");
};

 

데이터 정렬

toSorted 메서드를 사용하여 원본 데이터를 변경하지 않고 정렬된 새 배열을 생성했다.

const getSortedData = () => {
  return data.toSorted((a, b) => {
    if (sortType === "oldest") {
      return Number(a.createdDate) - Number(b.createdDate);
    } else {
      return Number(b.createdDate) - Number(a.createdDate);
    }
  });
};

const sortedData = getSortedData();

<select onChange={onChangeSortType}>
  {/* ... */}
</select>

{sortedData.map((item) => (
  <DiaryItem key={item.id} {...item} />
))}

선택된 sortType에 따라 createdDate 기준으로 일기 데이터를 오름차순 또는 내림차순으로 정렬한다.