diff --git a/src/renderer/src/assets/main/downward_caret.svg b/src/renderer/src/assets/main/downward_caret.svg new file mode 100644 index 0000000..c6d2e4a --- /dev/null +++ b/src/renderer/src/assets/main/downward_caret.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/renderer/src/assets/main/level1_character.svg b/src/renderer/src/assets/main/level1_character.svg new file mode 100644 index 0000000..5dc636c --- /dev/null +++ b/src/renderer/src/assets/main/level1_character.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/renderer/src/pages/Calibration/CalibrationPage.tsx b/src/renderer/src/pages/Calibration/CalibrationPage.tsx index 2c0c88d..b0c4a10 100644 --- a/src/renderer/src/pages/Calibration/CalibrationPage.tsx +++ b/src/renderer/src/pages/Calibration/CalibrationPage.tsx @@ -131,6 +131,7 @@ const CalibrationPage = () => { }, [detectedLandmarks.length, step1Error, startCalibration]); // 캘리브레이션 처리 + /* eslint-disable react-hooks/purity */ const startTimeRef = useRef(Date.now()); const framesRef = useRef< Array<{ diff --git a/src/renderer/src/pages/Main/MainPage.tsx b/src/renderer/src/pages/Main/MainPage.tsx index 5ffd795..3dc79c0 100644 --- a/src/renderer/src/pages/Main/MainPage.tsx +++ b/src/renderer/src/pages/Main/MainPage.tsx @@ -10,12 +10,14 @@ import { import { useCameraStore } from '../../store/useCameraStore'; import { usePostureStore } from '../../store/usePostureStore'; import { MetricData } from '../../types/main/session'; +import AveragePosturePanel from './components/AveragePosturePanel'; import AttendacePanel from './components/AttendacePanel'; import HighlightsPanel from './components/HighlightsPanel'; import MainHeader from './components/MainHeader'; import MiniRunningPanel from './components/MiniRunningPanel'; import PosePatternPanel from './components/PosePatternPanel'; import WebcamPanel from './components/WebcamPanel'; +import { Button } from '@ui/index'; const LOCAL_STORAGE_KEY = 'calibration_result_v1'; @@ -164,7 +166,8 @@ const MainPage = () => {
{/* 상단 부분 */}
-
+ {/* 평균 자세 점수 부분 */} +
diff --git a/src/renderer/src/pages/Main/components/AveragePosturePanel.tsx b/src/renderer/src/pages/Main/components/AveragePosturePanel.tsx new file mode 100644 index 0000000..f3ac1f7 --- /dev/null +++ b/src/renderer/src/pages/Main/components/AveragePosturePanel.tsx @@ -0,0 +1,45 @@ +import LevelMarker from '../../../assets/main/downward_caret.svg?react'; +import Character from '../../../assets/main/level1_character.svg?react'; + +const AveragePosturePanel = () => { + return ( +
+
+

+ 평균 자세 점수 + 47점 + + 목 평균 기울기 약 23.1도 +
+ 예상 부하 하중 약 6kg +
+

+

+ + 쑥쑥 기린 + + +

+
+ +
+

+ Level +

+
+ +
+
+ {Array.from({ length: 5 }).map((_, index) => ( + + ))} +
+
+
+ ); +}; + +export default AveragePosturePanel; diff --git a/src/renderer/src/pages/Main/components/HighlightsPanel.tsx b/src/renderer/src/pages/Main/components/HighlightsPanel.tsx index 41b1e9b..f3c1c2e 100644 --- a/src/renderer/src/pages/Main/components/HighlightsPanel.tsx +++ b/src/renderer/src/pages/Main/components/HighlightsPanel.tsx @@ -13,7 +13,10 @@ import { import { PannelHeader } from '../../../components/PannelHeader/PannelHeader'; import { ToggleSwitch } from '../../../components/ToggleSwitch/ToggleSwitch'; import type { HighlightDatum } from './HighlightsPanel/data'; -import { useHighlightsChart, type HighlightPeriod } from './HighlightsPanel/hooks/useHighlightsChart'; +import { + useHighlightsChart, + type HighlightPeriod, +} from './HighlightsPanel/hooks/useHighlightsChart'; const HighlightsPanel = () => { const [activePeriod, setActivePeriod] = useState('weekly'); @@ -38,7 +41,7 @@ const HighlightsPanel = () => { }; return ( -
+
하이라이트 { > {weeklyColors ? ( - + - + @@ -92,11 +107,7 @@ const HighlightsPanel = () => { ticks={yAxisTicks} width={30} /> - + {data.map((datum: HighlightDatum) => ( { ? datum.barKey === 'current' ? 'url(#currentBarGradient)' : 'url(#previousBarGradient)' - : monthlyColor ?? undefined + : (monthlyColor ?? undefined) } /> ))} diff --git a/src/renderer/src/pages/Main/components/RunningPanel.tsx b/src/renderer/src/pages/Main/components/RunningPanel.tsx index a1a2e76..f3ee0bc 100644 --- a/src/renderer/src/pages/Main/components/RunningPanel.tsx +++ b/src/renderer/src/pages/Main/components/RunningPanel.tsx @@ -129,7 +129,7 @@ const RunningPanel = () => { {/* 움직이는 동영상 영역 */}