[feat/#32] 대시보드 date range 선택을 위한, date picker 추가

package.json

@@ -16,13 +16,15 @@
     "@tanstack/react-query": "^5.51.23",
     "axios": "1.7.3",
     "core-js": "^3.28.0",
+    "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
     "lucide-react": "^0.435.0",
     "p5": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1",
+    "react-tailwindcss-datepicker": "^1.7.2",
     "socket.io-client": "^4.7.5",
     "zustand": "^4.5.5"
   },

src/api/analysis.ts

@@ -1,3 +1,4 @@
+import { DateValueType } from "react-tailwindcss-datepicker"
 import axiosInstance from "./axiosInstance"
 import { poseType } from "./pose"
 
@@ -31,9 +32,10 @@ export const getTodayPoseAnalysis = async (): Promise<TodayAnalysisData> => {
   }
 }
 
-export const getTotalPoseAnalysis = async (): Promise<TodayAnalysisData[]> => {
+export const getTotalPoseAnalysis = async (params: { fromDate?: string; toDate?: string }) => {
+  const queryString = new URLSearchParams(params).toString()
   try {
-    const res = await axiosInstance.get("/pose-counts?sort=date,asc")
+    const res = await axiosInstance.get(`/pose-counts?${queryString ? `${queryString}` : ""}&sort=date,asc`)
     return res.data.data
   } catch (e) {
     throw e

src/hooks/useDashBoard.ts

@@ -1,16 +1,30 @@
 import { getTodayPoseAnalysis, getTotalPoseAnalysis } from "@/api/analysis"
 import { useQueries } from "@tanstack/react-query"
+import dayjs from "dayjs"
+import { DateValueType } from "react-tailwindcss-datepicker"
 
-export const usePoseAnalysis = () => {
+export const usePoseAnalysis = (dateRange: DateValueType) => {
   const results = useQueries({
     queries: [
       {
         queryKey: ["todayAnalysis"],
         queryFn: getTodayPoseAnalysis,
       },
       {
-        queryKey: ["totalAnalysis"],
-        queryFn: getTotalPoseAnalysis,
+        queryKey: ["totalAnalysis", dateRange],
+        queryFn: () => {
+          const params: { fromDate?: string; toDate?: string } = {}
+
+          if (dateRange?.startDate) {
+            params.fromDate = dayjs(dateRange.startDate).format("YYYY-MM-DD")
+          }
+
+          if (dateRange?.endDate) {
+            params.toDate = dayjs(dateRange.endDate).format("YYYY-MM-DD")
+          }
+
+          return getTotalPoseAnalysis(params)
+        },
       },
     ],
   })

src/pages/AnalysisDashboard.tsx

@@ -1,22 +1,27 @@
 import { poseType } from "@/api/pose"
-import { Calendar, ChevronLeft, ChevronRight } from "lucide-react"
-import { useEffect, useRef, useState } from "react"
 import { usePoseAnalysis } from "@/hooks/useDashBoard"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
 
 import TotalCountChartIcon from "@/assets/icons/dash-board-total-count.svg?react"
 import ChinUpImage from "@/assets/images/chin-up.png"
 import ShoulderTwistImage from "@/assets/images/shoulder-twist.png"
 import TailBoneSitImage from "@/assets/images/tail-bone-sit.png"
 import TurtleNeckImage from "@/assets/images/tutle-neck.png"
 import PoseAnalysisChart from "@/components/Dashboard/Chart"
+import Datepicker, { DateValueType } from "react-tailwindcss-datepicker"
 
 const AnalysisDashboard = () => {
-  const [currentIndex, setCurrentIndex] = useState(0)
   const carouselRef = useRef(null)
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [dateRange, setDateRange] = useState<DateValueType>({
+    startDate: null,
+    endDate: null,
+  })
 
-  const { todayAnalysis, totalAnalysis, isLoading, isError } = usePoseAnalysis()
+  const { todayAnalysis, totalAnalysis, isLoading, isError } = usePoseAnalysis(dateRange)
 
-  console.log("totalAnalysis: ", totalAnalysis)
+  console.log("totalAnalysis: ", dateRange)
 
   const getPoseCount = (type: poseType) => {
     return todayAnalysis?.count.find((item: any) => item.type === type)?.count || 0
@@ -125,28 +130,25 @@ const AnalysisDashboard = () => {
               )}
             </div>
           </div>
-          <div className="mb-12 mt-8">
-            <hr />
-          </div>
-          {/* 차트 섹션 */}
-          <div className="rounded-lg shadow">
-            <div className="mb-4 flex items-center justify-between">
-              <div className="flex items-center space-x-2">
-                <ChevronLeft size={20} />
-                <span className="rounded-full bg-zinc-800 px-4 py-2 text-white">7월 첫째주 추이</span>
-                <ChevronRight size={20} />
-              </div>
-              <div className="flex items-center text-sm text-gray-600">
-                <Calendar size={16} className="mr-2" />
-                {"2024-09-09"}
-              </div>
-            </div>
-            <div className="h-[340px] rounded-[10px] border-[1px] border-solid border-gray-200 bg-white">
-              {totalAnalysis && <PoseAnalysisChart data={totalAnalysis} />}
-            </div>
-          </div>
         </div>
       )}
+      <div className="mb-12 mt-8">
+        <hr />
+      </div>
+      {/* 차트 섹션 */}
+      <div className="mb-4 flex items-end justify-end">
+        <div className="text-sm text-gray-600">
+          <Datepicker
+            inputClassName="w-[270px] py-2 rounded-full bg-zinc-800 text-white px-[24px]"
+            maxDate={new Date()}
+            value={dateRange}
+            onChange={(value) => setDateRange(value)}
+          />
+        </div>
+      </div>
+      <div className="h-[340px] rounded-[10px] border-[1px] border-solid border-gray-200 bg-white">
+        {totalAnalysis && <PoseAnalysisChart data={totalAnalysis} />}
+      </div>
     </div>
   )
 }

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{ts,tsx,js,jsx}"],
+  content: ["./src/**/*.{ts,tsx,js,jsx}", "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"],
   theme: {
     extend: {
       fontFamily: { sans: ["Pretendard"] },

yarn.lock

@@ -1179,6 +1179,11 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+dayjs@^1.11.13:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
@@ -2834,6 +2839,11 @@ react-router@6.26.0:
   dependencies:
     "@remix-run/router" "1.19.0"
 
+react-tailwindcss-datepicker@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/react-tailwindcss-datepicker/-/react-tailwindcss-datepicker-1.7.2.tgz#ee2525b2a82211fc5756285265feaa459e102301"
+  integrity sha512-/NIRLB1evT69pt3Syol3cZpsAnLZlGvFWav98/Rr77Gey382C1fjKW2Emgu+SC4NtiRt6CBFwx/0Wbkn4iI+nA==
+
 react@^18.2.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"