⚡️ :: (#118) chart 유틸 함수 및 hook 추가

src/components/chart/index.tsx

@@ -16,9 +16,12 @@ import {
   NameType,
 } from "@walkhub/recharts/src/component/DefaultTooltipContent";
 import getChartData from "../../utils/function/getChartData";
+import { cp } from "fs/promises";
+import dayjs from "dayjs";
 
 interface Props {
   countList: number[];
+  endAt: dayjs.Dayjs;
 }
 
 const colors: string[] = [
@@ -29,9 +32,8 @@ const colors: string[] = [
   "#57B4F1",
 ];
 
-const chart: FC<Props> = ({ countList }) => {
-  const chartData = getChartData(countList);
-
+const chart: FC<Props> = ({ countList, endAt }) => {
+  const chartData = getChartData(countList, endAt).reverse();
   const CustomTooltip = ({ payload }: TooltipProps<ValueType, NameType>) => {
     if (payload && payload.length) {
       return (

src/hooks/useDays.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import dayjs from "dayjs";
+type Days = Record<"startAt" | "endAt", dayjs.Dayjs>;
+
+const useDays = () => {
+  const [days, setDays] = useState<Days>({
+    startAt: dayjs().subtract(6, "day"),
+    endAt: dayjs(),
+  });
+
+  const addWeek = () => {
+    setDays(state => ({
+      endAt: state.endAt.add(7, "day"),
+      startAt: state.endAt.add(1, "day"),
+    }));
+  };
+
+  const subWeek = () => {
+    setDays(state => ({
+      endAt: state.startAt.subtract(1, "day"),
+      startAt: state.startAt.subtract(7, "day"),
+    }));
+  };
+
+  const resetWeekDays = () => {
+    setDays({ startAt: dayjs().subtract(6, "day"), endAt: dayjs() });
+  };
+
+  const resetMonthDays = () => {
+    setDays({
+      startAt: dayjs().startOf("month"),
+      endAt: dayjs().endOf("month"),
+    });
+  };
+
+  const subMonth = () => {
+    setDays(state => ({
+      startAt: state.startAt.subtract(1, "month").startOf("month"),
+      endAt: state.endAt.subtract(1, "month").endOf("month"),
+    }));
+  };
+
+  const addMonth = () => {
+    setDays(state => ({
+      startAt: state.startAt.add(1, "month").startOf("month"),
+      endAt: state.endAt.add(1, "month").endOf("month"),
+    }));
+  };
+
+  return {
+    days,
+    addMonth,
+    addWeek,
+    subMonth,
+    subWeek,
+    resetMonthDays,
+    resetWeekDays,
+  };
+};
+
+export default useDays;

src/utils/function/getChartData.ts

@@ -1,20 +1,23 @@
-const getChartData = (data: number[]) => {
+import dayjs, { Dayjs } from "dayjs";
+
+const getChartData = (data: number[], endAt: dayjs.Dayjs) => {
   return data.map((i: number, idx) => {
-    const now = new Date();
-    const chartDate = new Date(
-      now.setDate(now.getDate() - (data.length - idx - 1))
-    );
+    const now = endAt;
+    // const chartDate = new Date(
+    //   now.setDate(now.getDate() - (data.length - idx - 1))
+    // );
+    const chartDate = endAt.add(data.length - idx - 1, "day");
     return {
-      date: `${chartDate.getMonth() + 1}/${chartDate.getDate()}`,
+      date: `${chartDate.get("month")}/${chartDate.get("date")}`,
       count: i,
       color: getWeek(chartDate),
     };
   });
 };
 
-function getWeek(paramDate: Date) {
-  const day = paramDate.getDay();
-  const diff = paramDate.getDate() - day + (day == 0 ? -6 : 1);
+function getWeek(paramDate: dayjs.Dayjs) {
+  const day = paramDate.get("day");
+  const diff = paramDate.get("date") - day + (day == 0 ? -6 : 1);
   return Math.ceil(diff / 7);
 }