diff --git a/src/renderer/src/assets/info-circle.svg b/src/renderer/src/assets/info-circle.svg index 5b8432e..e8593a2 100644 --- a/src/renderer/src/assets/info-circle.svg +++ b/src/renderer/src/assets/info-circle.svg @@ -1,3 +1,3 @@ - + diff --git a/src/renderer/src/assets/main/achivement_meadl.svg b/src/renderer/src/assets/main/achivement_meadl.svg new file mode 100644 index 0000000..6e086d5 --- /dev/null +++ b/src/renderer/src/assets/main/achivement_meadl.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/renderer/src/components/PannelHeader/PannelHeader.tsx b/src/renderer/src/components/PannelHeader/PannelHeader.tsx index 2801d73..84917bd 100644 --- a/src/renderer/src/components/PannelHeader/PannelHeader.tsx +++ b/src/renderer/src/components/PannelHeader/PannelHeader.tsx @@ -13,7 +13,7 @@ const PannelHeader = React.forwardRef( className="text-caption-sm-medium text-grey-400 flex items-center gap-1" > {children} - + ); }, diff --git a/src/renderer/src/pages/Main/MainPage.tsx b/src/renderer/src/pages/Main/MainPage.tsx index 3dc79c0..0ebc561 100644 --- a/src/renderer/src/pages/Main/MainPage.tsx +++ b/src/renderer/src/pages/Main/MainPage.tsx @@ -17,6 +17,7 @@ import MainHeader from './components/MainHeader'; import MiniRunningPanel from './components/MiniRunningPanel'; import PosePatternPanel from './components/PosePatternPanel'; import WebcamPanel from './components/WebcamPanel'; +import TotalDistancePanel from './components/TotalDistancePanel'; import { Button } from '@ui/index'; const LOCAL_STORAGE_KEY = 'calibration_result_v1'; @@ -176,9 +177,11 @@ const MainPage = () => { {/* 하단 부분 */}
-
- 레벨 거부기 + {/*레벨 및 이동거리 section */} +
+
+
시계열 그래프 diff --git a/src/renderer/src/pages/Main/components/TotalDistancePanel.tsx b/src/renderer/src/pages/Main/components/TotalDistancePanel.tsx new file mode 100644 index 0000000..8f7b515 --- /dev/null +++ b/src/renderer/src/pages/Main/components/TotalDistancePanel.tsx @@ -0,0 +1,34 @@ +import { PannelHeader } from '@ui/PannelHeader/PannelHeader'; +import AchivementMedal from '../../../assets/main/achivement_meadl.svg?react'; + +const TotalDistance = () => { + return ( +
+ LV.2 거부기까지 +

+ 400 + / 1,200m +

+ {/*게이지 바*/} +
+
+
+ {/*진행바 */} +
+
+
+ +
+
+ {Array.from({ length: 4 }, (_, i) => i * (1200 / 3)).map((value) => ( + {value} + ))} +
+
+ ); +}; + +export default TotalDistance;