diff --git a/package.json b/package.json index 7ecb1cc..3bdb4ec 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,8 @@ "@tanstack/react-query": "^5.51.23", "axios": "1.7.3", "core-js": "^3.28.0", + "echarts": "^5.5.1", + "echarts-for-react": "^3.0.2", "lucide-react": "^0.435.0", "p5": "^1.9.4", "react": "^18.2.0", diff --git a/src/api/analysis.ts b/src/api/analysis.ts index b61ae35..9c43589 100644 --- a/src/api/analysis.ts +++ b/src/api/analysis.ts @@ -9,7 +9,20 @@ export interface TodayAnalysisData { }[] } -export const getTodayAnalysis = async (): Promise => { +export interface TotalAnalysisData { + data: TodayAnalysisData[] + page: number + size: number + totalPage: number + totalCount: number + sort: { + empty: boolean + sorted: boolean + unsorted: boolean + } +} + +export const getTodayPoseAnalysis = async (): Promise => { try { const res = await axiosInstance.get("/pose-counts/daily") return res.data.data @@ -17,3 +30,12 @@ export const getTodayAnalysis = async (): Promise => { throw e } } + +export const getTotalPoseAnalysis = async (): Promise => { + try { + const res = await axiosInstance.get("/pose-counts?sort=date,desc") + return res.data.data + } catch (e) { + throw e + } +} diff --git a/src/assets/icons/dash-board-total-count.svg b/src/assets/icons/dash-board-total-count.svg new file mode 100644 index 0000000..78720c3 --- /dev/null +++ b/src/assets/icons/dash-board-total-count.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Dashboard/Chart.tsx b/src/components/Dashboard/Chart.tsx new file mode 100644 index 0000000..193c523 --- /dev/null +++ b/src/components/Dashboard/Chart.tsx @@ -0,0 +1,53 @@ +import ECharts from "echarts-for-react" + +const poseTypeLabels: any = { + TURTLE_NECK: "거북목", + SHOULDER_TWIST: "어깨 틀어짐", + CHIN_UTP: "턱 괴기", + TAILBONE_SIT: "꼬리뼈로 앉기", +} + +const PoseAnalysisChart = ({ data }: { data: any[] }) => { + const options = { + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + }, + legend: { + data: Object.values(poseTypeLabels), + top: 20, + }, + grid: { + left: "3%", + right: "3%", + bottom: "5%", + top: "25%", + containLabel: true, + }, + xAxis: { + type: "category", + data: data.map((item) => item.date), + }, + yAxis: { + type: "value", + minInterval: 1, + axisLabel: { + formatter: "{value}", + }, + }, + series: Object.keys(poseTypeLabels).map((poseType) => ({ + name: poseTypeLabels[poseType], + type: "line", + data: data.map((item) => { + const poseCount = item.count.find((c: any) => c.type === poseType) + return poseCount ? poseCount.count : 0 + }), + })), + } + + return +} + +export default PoseAnalysisChart diff --git a/src/hooks/useDashBoard.ts b/src/hooks/useDashBoard.ts new file mode 100644 index 0000000..c0b315b --- /dev/null +++ b/src/hooks/useDashBoard.ts @@ -0,0 +1,27 @@ +import { getTodayPoseAnalysis, getTotalPoseAnalysis } from "@/api/analysis" +import { useQueries } from "@tanstack/react-query" + +export const usePoseAnalysis = () => { + const results = useQueries({ + queries: [ + { + queryKey: ["todayAnalysis"], + queryFn: getTodayPoseAnalysis, + }, + { + queryKey: ["totalAnalysis"], + queryFn: getTotalPoseAnalysis, + }, + ], + }) + + const [todayAnalysis, totalAnalysis] = results + + return { + todayAnalysis: todayAnalysis.data, + totalAnalysis: totalAnalysis.data, + isLoading: results.some((result) => result.isLoading), + isError: results.some((result) => result.isError), + errors: results.map((result) => result.error).filter(Boolean), + } +} diff --git a/src/layouts/AnalysisLayout.tsx b/src/layouts/AnalysisLayout.tsx index e2fa2d9..19cf049 100644 --- a/src/layouts/AnalysisLayout.tsx +++ b/src/layouts/AnalysisLayout.tsx @@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom" export default function AnalysisLayout() { return ( -
+
) diff --git a/src/pages/AnalysisDashboard.tsx b/src/pages/AnalysisDashboard.tsx index 09b8e29..f25a43d 100644 --- a/src/pages/AnalysisDashboard.tsx +++ b/src/pages/AnalysisDashboard.tsx @@ -1,28 +1,28 @@ -import { useState, useRef, useEffect } from "react" -import { useQuery } from "@tanstack/react-query" -import { getTodayAnalysis, TodayAnalysisData } from "@/api/analysis" import { poseType } from "@/api/pose" import { Calendar, ChevronLeft, ChevronRight } from "lucide-react" +import { useEffect, useRef, useState } from "react" +import { usePoseAnalysis } from "@/hooks/useDashBoard" -import TurtleNeckImage from "@/assets/images/tutle-neck.png" -import ShoulderTwistImage from "@/assets/images/shoulder-twist.png" +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" const AnalysisDashboard = () => { const [currentIndex, setCurrentIndex] = useState(0) const carouselRef = useRef(null) - const { data, isLoading, isError } = useQuery({ - queryKey: ["todayAnalysis"], - queryFn: getTodayAnalysis, - }) + const { todayAnalysis, totalAnalysis, isLoading, isError } = usePoseAnalysis() + + console.log("totalAnalysis: ", totalAnalysis) const getPoseCount = (type: poseType) => { - return data?.count.find((item: any) => item.type === type)?.count || 0 + return todayAnalysis?.count.find((item: any) => item.type === type)?.count || 0 } - const totalCount = data?.count.reduce((acc, item) => acc + item.count, 0) || 0 + const totalCount = todayAnalysis?.count.reduce((acc, item) => acc + item.count, 0) || 0 const carouselItems = [ { title: "거북목", type: "TURTLE_NECK" as poseType, image: TurtleNeckImage }, @@ -75,14 +75,19 @@ const AnalysisDashboard = () => { {isLoading &&
로딩 중입니다...
} {isError &&
데이터를 불러오는 것에 실패했습니다
} - {!isLoading && !isError && data && ( + {!isLoading && !isError && todayAnalysis && (
{/* 고정된 전체 틀어짐 횟수 카드 */} -
-

전체 틀어짐 횟수

-

{totalCount}회

-
{/* 차트 이미지 삽입 */}
+
+

전체 틀어짐 횟수

+
+ {totalCount} + 회 +
+
+ +
{/* 캐러셀 컨테이너 */} @@ -99,7 +104,7 @@ const AnalysisDashboard = () => { style={{ width: `${(carouselItems.length / 3) * 100}%` }} > {carouselItems.map(({ title, type, image }, index) => ( -
+
{title}
@@ -120,29 +125,24 @@ const AnalysisDashboard = () => { )}
+
+
+
{/* 차트 섹션 */} -
+
- + 7월 첫째주 추이
- {data?.date} + {"2024-09-09"}
-
{/* 실제 차트 컴포넌트 삽입 */}
-
- {["거북목", "어깨 틀어짐", "턱 괴기", "고개숙여 보기"].map((item, index) => ( -
-
- {item} -
- ))} +
+ {totalAnalysis && }
diff --git a/yarn.lock b/yarn.lock index 3703b22..074ce3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1270,6 +1270,22 @@ eastasianwidth@^0.2.0: resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz" integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== +echarts-for-react@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz#ac5859157048a1066d4553e34b328abb24f2b7c1" + integrity sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA== + dependencies: + fast-deep-equal "^3.1.3" + size-sensor "^1.0.1" + +echarts@^5.5.1: + version "5.5.1" + resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.1.tgz#8dc9c68d0c548934bedcb5f633db07ed1dd2101c" + integrity sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA== + dependencies: + tslib "2.3.0" + zrender "5.6.0" + electron-to-chromium@^1.5.4: version "1.5.6" resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.6.tgz" @@ -3001,6 +3017,11 @@ signal-exit@^4.0.1: resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz" integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== +size-sensor@^1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.2.tgz#b8f8da029683cf2b4e22f12bf8b8f0a1145e8471" + integrity sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw== + slash@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz" @@ -3289,6 +3310,11 @@ tsconfig-paths@^3.15.0: minimist "^1.2.6" strip-bom "^3.0.0" +tslib@2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e" + integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg== + tslib@^1.8.1: version "1.14.1" resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz" @@ -3556,6 +3582,13 @@ yocto-queue@^0.1.0: resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== +zrender@5.6.0: + version "5.6.0" + resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.0.tgz#01325b0bb38332dd5e87a8dbee7336cafc0f4a5b" + integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg== + dependencies: + tslib "2.3.0" + zustand@^4.5.5: version "4.5.5" resolved "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz"