diff --git a/package.json b/package.json index 3bdb4ec..fba7525 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@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", @@ -23,6 +24,7 @@ "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" }, diff --git a/src/api/analysis.ts b/src/api/analysis.ts index 75c0b68..fe4ace5 100644 --- a/src/api/analysis.ts +++ b/src/api/analysis.ts @@ -31,9 +31,10 @@ export const getTodayPoseAnalysis = async (): Promise => { } } -export const getTotalPoseAnalysis = async (): Promise => { +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 diff --git a/src/hooks/useDashBoard.ts b/src/hooks/useDashBoard.ts index c0b315b..6aae3b7 100644 --- a/src/hooks/useDashBoard.ts +++ b/src/hooks/useDashBoard.ts @@ -1,7 +1,9 @@ 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: [ { @@ -9,8 +11,20 @@ export const usePoseAnalysis = () => { 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) + }, }, ], }) diff --git a/src/pages/AnalysisDashboard.tsx b/src/pages/AnalysisDashboard.tsx index f25a43d..eb2d566 100644 --- a/src/pages/AnalysisDashboard.tsx +++ b/src/pages/AnalysisDashboard.tsx @@ -1,7 +1,7 @@ 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" @@ -9,14 +9,19 @@ 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({ + 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 = () => { )} -
-
-
- {/* 차트 섹션 */} -
-
-
- - 7월 첫째주 추이 - -
-
- - {"2024-09-09"} -
-
-
- {totalAnalysis && } -
-
)} +
+
+
+ {/* 차트 섹션 */} +
+
+ setDateRange(value)} + /> +
+
+
+ {totalAnalysis && } +
) } diff --git a/tailwind.config.js b/tailwind.config.js index 68bbe27..b0863ca 100644 --- a/tailwind.config.js +++ b/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"] }, diff --git a/yarn.lock b/yarn.lock index 074ce3a..c0c240e 100644 --- a/yarn.lock +++ b/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"