feat(average): 평균 자세 점수 ui 구현

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<number>(Date.now());
   const framesRef = useRef<
     Array<{

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 = () => {
                   <div className="custom-scrollbar flex h-full min-h-full w-full flex-col overflow-y-auto overscroll-y-contain pr-4">
                     {/* 상단 부분 */}
                     <div className="mb-4 grid h-[268px] shrink-0 grid-cols-[1fr_2fr] gap-4">
-                      <div className="bg-amber-700"></div>
+                      {/* 평균 자세 점수 부분 */}
+                      <AveragePosturePanel />
                       <div className="bg-grey-0 rounded-3xl">
                         <AttendacePanel />
                       </div>

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 (
+    <div className="relative h-full w-full rounded-3xl bg-[image:var(--color-average-score)] p-4">
+      <div className="items center flex justify-between">
+        <p className="text-caption-sm-medium flex min-w-[120px] flex-col text-yellow-100">
+          <span>평균 자세 점수</span>
+          <span className="text-title-4xl-bold text-grey-0 mb-4">47점</span>
+          <span className="text-caption-xs-meidum text-yellow-50">
+            목 평균 기울기 약 23.1도
+            <br />
+            예상 부하 하중 약 6kg
+          </span>
+        </p>
+        <p className="flex flex-col items-end gap-1">
+          <span className="text-caption-xs-meidum h-[26px] w-[61px] rounded-full bg-yellow-50 px-2 py-1 text-yellow-500">
+            쑥쑥 기린
+          </span>
+          <Character className="aspect-[114.3/127] w-full" />
+        </p>
+      </div>
+
+      <div className="absolute inset-x-4 bottom-4 flex flex-col">
+        <p className="text-caption-body-md-meidum text-yellow text-yellow-200">
+          Level
+        </p>
+        <div className="mb-1 flex h-[11px] w-full items-end justify-center">
+          <LevelMarker className="[&>path]:fill-yellow-50" />
+        </div>
+        <div className="flex gap-1">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <span
+              key={index}
+              className="h-[6px] flex-[1_0_0] rounded-full bg-yellow-50"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AveragePosturePanel;

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<HighlightPeriod>('weekly');
@@ -38,7 +41,7 @@ const HighlightsPanel = () => {
   };
 
   return (
-    <div className=" flex h-full flex-col rounded-2xl p-5">
+    <div className="flex h-full flex-col rounded-2xl p-5">
       <div className="mb-4 flex items-center justify-between">
         <PannelHeader>하이라이트</PannelHeader>
         <ToggleSwitch
@@ -63,11 +66,23 @@ const HighlightsPanel = () => {
           >
             {weeklyColors ? (
               <defs>
-                <linearGradient id="previousBarGradient" x1="0" y1="1" x2="0" y2="0">
+                <linearGradient
+                  id="previousBarGradient"
+                  x1="0"
+                  y1="1"
+                  x2="0"
+                  y2="0"
+                >
                   <stop offset="0%" stopColor={weeklyColors.previous} />
                   <stop offset="100%" stopColor={weeklyColors.previous} />
                 </linearGradient>
-                <linearGradient id="currentBarGradient" x1="0" y1="1" x2="0" y2="0">
+                <linearGradient
+                  id="currentBarGradient"
+                  x1="0"
+                  y1="1"
+                  x2="0"
+                  y2="0"
+                >
                   <stop offset="0%" stopColor={weeklyColors.current} />
                   <stop offset="100%" stopColor={weeklyColors.current} />
                 </linearGradient>
@@ -92,11 +107,7 @@ const HighlightsPanel = () => {
               ticks={yAxisTicks}
               width={30}
             />
-            <Bar
-              dataKey="value"
-              radius={barRadius}
-              background={false}
-            >
+            <Bar dataKey="value" radius={barRadius} background={false}>
               {data.map((datum: HighlightDatum) => (
                 <Cell
                   key={datum.periodLabel}
@@ -105,7 +116,7 @@ const HighlightsPanel = () => {
                       ? datum.barKey === 'current'
                         ? 'url(#currentBarGradient)'
                         : 'url(#previousBarGradient)'
-                      : monthlyColor ?? undefined
+                      : (monthlyColor ?? undefined)
                   }
                 />
               ))}

src/renderer/src/pages/Main/components/RunningPanel.tsx

@@ -129,7 +129,7 @@ const RunningPanel = () => {
         {/* 움직이는 동영상 영역 */}
         <div
           className={cn(
-            'relative z-10 flex items-center justify-center px-4 mt-12',
+            'relative z-10 mt-12 flex items-center justify-center px-4',
           )}
         >
           <video

src/renderer/src/styles/colors.css

@@ -126,6 +126,14 @@
   /* widget-color*/
   --color-olive-green: var(--color-olive-green);
   --color-coral-red: var(--color-coral-red);
+
+  /* main page color */
+  --color-average-score: linear-gradient(
+    130deg,
+    var(--color-yellow-500) -9.87%,
+    var(--color-yellow-400) 25.52%,
+    var(--color-yellow-200) 97.31%
+  );
 }
 
 /* Dark mode colors */
@@ -178,4 +186,12 @@
   /* widget-color*/
   --color-olive-green: #477d00;
   --color-coral-red: #f15232;
+
+  /* main page color */
+  --color-average-score: linear-gradient(
+    130deg,
+    var(--color-yellow-500) -9.87%,
+    var(--color-yellow-400) 25.52%,
+    var(--color-yellow-200) 97.31%
+  );
 }