feat: 총 이동거리 부분 ui 구현

src/renderer/src/components/PannelHeader/PannelHeader.tsx

@@ -13,7 +13,7 @@ const PannelHeader = React.forwardRef<HTMLDivElement, PannelHeaderProps>(
         className="text-caption-sm-medium text-grey-400 flex items-center gap-1"
       >
         {children}
-        <InfoIcon className="cursor-pointer" />
+        <InfoIcon className="[&_path]:stroke-grey-200 cursor-pointer" />
       </div>
     );
   },

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 = () => {
                     {/* 하단 부분 */}
                     <div className="flex min-h-max flex-1 items-stretch gap-4">
                       <div className="@container flex min-h-0 w-full min-w-[552px] flex-1 flex-col items-start gap-4 self-stretch">
-                        <div className="bg-grey-0 h-[170px] w-full shrink-0 rounded-3xl">
-                          레벨 거부기
+                        {/*레벨 및 이동거리 section */}
+                        <div className="bg-grey-0 relative h-[170px] w-full shrink-0 rounded-3xl py-5 pr-4 pl-2">
+                          <TotalDistancePanel />
                         </div>
+
                         <div className="grid min-h-0 w-full flex-1 grid-cols-1 gap-4 @[562px]:grid-cols-2">
                           <div className="bg-grey-0 h-full min-h-[224px] w-full min-w-[270px] rounded-3xl @[552px]:min-h-[210px]">
                             시계열 그래프

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 (
+    <div className="flex flex-col pl-3">
+      <PannelHeader>LV.2 거부기까지</PannelHeader>
+      <p className="flex items-center gap-2">
+        <span className="text-title-4xl-bold text-grey-700">400</span>
+        <span className="text-body-lg-meidum text-grey-500">/ 1,200m</span>
+      </p>
+      {/*게이지 바*/}
+      <div className="bg-grey-50 relative my-[13.5px] h-3 w-[calc(100%-16px)] items-center rounded-full">
+        <div className="bg-grey-100 absolute top-[2px] left-1/3 z-0 h-2 w-2 -translate-x-1/3 rounded-full"></div>
+        <div className="bg-grey-100 absolute top-[2px] left-2/3 z-0 h-2 w-2 -translate-x-2/3 rounded-full"></div>
+        {/*진행바 */}
+        <div
+          className="relative z-10 flex h-full items-center justify-end rounded-full bg-yellow-400 py-[3px] pr-[3px] transition-all duration-1000"
+          style={{ width: '25%' }}
+        >
+          <div className="h-2 w-2 rounded-full bg-yellow-100 opacity-100" />
+        </div>
+        <AchivementMedal className="absolute top-1/2 right-[-16px] z-10000 -translate-y-1/2" />
+      </div>
+      <div className="text-caption-xs-regular text-grey-300 flex w-full items-center justify-between">
+        {Array.from({ length: 4 }, (_, i) => i * (1200 / 3)).map((value) => (
+          <span key={value}>{value}</span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TotalDistance;