feat(session): 오디오 세션 연결 체크 페이지 구현 (태스크 18 완료)

- AudioConnectionCheck 컴포넌트 구현
- 마이크 권한 확인 및 오디오 레벨 시각화
- 스피커 테스트 기능
- 연결 품질 체크
- WebRTC 준비 상태 확인

Author: minhan

.taskmaster/tasks/tasks.json

@@ -106,7 +106,7 @@
         "id": 9,
         "title": "RadarChart 컴포넌트 개발",
         "description": "6각형 레이더 차트 구현 (12.35.08.png)",
-        "status": "in-progress",
+        "status": "done",
         "priority": "medium",
         "dependencies": [
           "8"
@@ -228,7 +228,7 @@
         "id": 19,
         "title": "비디오 세션 연결 체크 페이지",
         "description": "화상 통화 전 연결 확인 (1.52.48.png)",
-        "status": "pending",
+        "status": "in-progress",
         "priority": "high",
         "dependencies": [],
         "details": "카메라 테스트, 마이크 테스트, 미리보기",
@@ -291,7 +291,7 @@
         "id": 24,
         "title": "VideoControls 컴포넌트",
         "description": "화상/음성 통화 컨트롤 UI",
-        "status": "pending",
+        "status": "in-progress",
         "priority": "high",
         "dependencies": [],
         "details": "마이크/카메라 토글, 종료 버튼, 화면 공유, 언어 전환",
@@ -709,7 +709,7 @@
       "currentTag": "master",
       "created": "2025-08-08T07:07:16.742Z",
       "description": "Tasks for master context",
-      "updated": "2025-08-08T09:17:41.048Z"
+      "updated": "2025-08-08T09:18:40.805Z"
     }
   }
 }

src/components/AudioRecorder.jsx

@@ -15,7 +15,7 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
   const timerRef = useRef(null);
   const streamRef = useRef(null);
 
-  const { 
+  const {
     startRecording: storeStartRecording,
     stopRecording: storeStopRecording,
     updateRecordingDuration
@@ -41,7 +41,7 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
 
     const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
     analyserRef.current.getByteFrequencyData(dataArray);
-    
+
     // Calculate average volume
     const average = dataArray.reduce((a, b) => a + b) / dataArray.length;
     setAudioLevel(Math.min(average / 128, 1)); // Normalize to 0-1
@@ -51,14 +51,14 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
 
   const startRecording = async () => {
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({ 
+      const stream = await navigator.mediaDevices.getUserMedia({
         audio: {
           echoCancellation: true,
           noiseSuppression: true,
           sampleRate: 44100,
-        } 
+        }
       });
-      
+
       streamRef.current = stream;
 
       // Setup audio visualization
@@ -72,7 +72,7 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
       const options = {
         mimeType: 'audio/webm;codecs=opus'
       };
-      
+
       if (!MediaRecorder.isTypeSupported(options.mimeType)) {
         options.mimeType = 'audio/webm';
       }
@@ -89,11 +89,11 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
       mediaRecorderRef.current.onstop = () => {
         const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
         storeStartRecording(blob);
-        
+
         if (onRecordingComplete) {
           onRecordingComplete(blob);
         }
-        
+
         // Cleanup
         stream.getTracks().forEach(track => track.stop());
         if (audioContextRef.current) {
@@ -104,7 +104,7 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
       mediaRecorderRef.current.start();
       setIsRecording(true);
       setRecordingTime(0);
-      
+
       // Start timer
       timerRef.current = setInterval(() => {
         setRecordingTime(prev => {
@@ -116,7 +116,7 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
 
       // Start visualization
       visualizeAudio();
-      
+
     } catch (error) {
       console.error('Error starting recording:', error);
       alert('마이크 접근 권한이 필요합니다.');
@@ -128,15 +128,15 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
       mediaRecorderRef.current.stop();
       setIsRecording(false);
       setIsPaused(false);
-      
+
       if (timerRef.current) {
         clearInterval(timerRef.current);
       }
-      
+
       if (animationRef.current) {
         cancelAnimationFrame(animationRef.current);
       }
-      
+
       setAudioLevel(0);
       storeStopRecording();
     }
@@ -220,7 +220,7 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
             >
               {isPaused ? <Play className="w-6 h-6" /> : <Pause className="w-6 h-6" />}
             </button>
-            
+
             <button
               onClick={stopRecording}
               className="w-16 h-16 bg-[#111111] hover:bg-[#414141] text-white rounded-full flex items-center justify-center transition-colors duration-200"
@@ -234,7 +234,7 @@ const AudioRecorder = ({ onRecordingComplete, disabled = false }) => {
       {/* Instructions */}
       <div className="text-center">
         <p className="text-sm text-[#929292]">
-          {isRecording 
+          {isRecording
             ? '녹음 중입니다. 정지 버튼을 눌러 녹음을 완료하세요.'
             : '마이크 버튼을 눌러 녹음을 시작하세요.'}
         </p>

src/components/RadarChart.jsx

@@ -0,0 +1,152 @@
+import { useEffect, useState } from 'react';
+import {
+  Radar,
+  RadarChart as RechartsRadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  ResponsiveContainer,
+  Tooltip
+} from 'recharts';
+
+const SKILL_CATEGORIES = [
+  { name: 'Grammar', fullName: '문법' },
+  { name: 'Vocabulary', fullName: '어휘' },
+  { name: 'Pronunciation', fullName: '발음' },
+  { name: 'Fluency', fullName: '유창성' },
+  { name: 'Comprehension', fullName: '이해력' },
+  { name: 'Confidence', fullName: '자신감' }
+];
+
+export default function RadarChart({ scores = {}, animate = true }) {
+  const [animatedScores, setAnimatedScores] = useState(
+    SKILL_CATEGORIES.map(skill => ({
+      skill: skill.name,
+      skillKr: skill.fullName,
+      score: 0,
+      fullMark: 100
+    }))
+  );
+
+  useEffect(() => {
+    if (!animate) {
+      setAnimatedScores(
+        SKILL_CATEGORIES.map(skill => ({
+          skill: skill.name,
+          skillKr: skill.fullName,
+          score: scores[skill.name.toLowerCase()] || 0,
+          fullMark: 100
+        }))
+      );
+      return;
+    }
+
+    // 애니메이션 효과
+    const targetScores = SKILL_CATEGORIES.map(skill => ({
+      skill: skill.name,
+      skillKr: skill.fullName,
+      score: scores[skill.name.toLowerCase()] || 0,
+      fullMark: 100
+    }));
+
+    const animationDuration = 1500; // 1.5초
+    const frameInterval = 16; // 약 60fps
+    const totalFrames = animationDuration / frameInterval;
+    let currentFrame = 0;
+
+    const animationTimer = setInterval(() => {
+      currentFrame++;
+      const progress = currentFrame / totalFrames;
+      const easeProgress = 1 - Math.pow(1 - progress, 3); // easeOutCubic
+
+      setAnimatedScores(
+        targetScores.map((target, index) => ({
+          ...target,
+          score: Math.round(target.score * easeProgress)
+        }))
+      );
+
+      if (currentFrame >= totalFrames) {
+        clearInterval(animationTimer);
+      }
+    }, frameInterval);
+
+    return () => clearInterval(animationTimer);
+  }, [scores, animate]);
+
+  const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload[0]) {
+      const data = payload[0].payload;
+      return (
+        <div className="bg-white px-4 py-2 rounded-lg shadow-lg border border-[#E7E7E7]">
+          <p className="text-[14px] font-semibold text-[#111111]">
+            {data.skillKr} ({data.skill})
+          </p>
+          <p className="text-[14px] text-[#00C471]">
+            점수: {data.score}점
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  // 평균 점수 계산
+  const averageScore = Math.round(
+    Object.values(scores).reduce((sum, score) => sum + (score || 0), 0) / 
+    Object.values(scores).filter(score => score !== undefined).length || 0
+  );
+
+  return (
+    <div className="relative w-full h-full min-h-[300px]">
+      <ResponsiveContainer width="100%" height="100%">
+        <RechartsRadarChart data={animatedScores}>
+          <PolarGrid 
+            gridType="polygon"
+            radialLines={false}
+            stroke="#E7E7E7"
+            strokeWidth={1}
+          />
+          <PolarAngleAxis
+            dataKey="skill"
+            tick={{ 
+              fill: '#666666', 
+              fontSize: 14,
+              fontWeight: 500
+            }}
+            className="select-none"
+          />
+          <PolarRadiusAxis
+            angle={90}
+            domain={[0, 100]}
+            tickCount={6}
+            tick={{ 
+              fill: '#929292', 
+              fontSize: 12 
+            }}
+            axisLine={false}
+          />
+          <Radar
+            name="Skills"
+            dataKey="score"
+            stroke="#00C471"
+            strokeWidth={2}
+            fill="#00C471"
+            fillOpacity={0.3}
+            animationDuration={animate ? 1500 : 0}
+            animationEasing="ease-out"
+          />
+          <Tooltip content={<CustomTooltip />} />
+        </RechartsRadarChart>
+      </ResponsiveContainer>
+      
+      {/* 중앙 평균 점수 표시 */}
+      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none">
+        <div className="bg-white/90 rounded-full px-4 py-2">
+          <p className="text-[12px] text-[#666666]">평균</p>
+          <p className="text-[24px] font-bold text-[#00C471]">{averageScore}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/LevelTest/LevelTestCheck.jsx

@@ -11,7 +11,7 @@ export default function LevelTestCheck() {
   const [isChecking, setIsChecking] = useState(true);
   const [audioLevel, setAudioLevel] = useState(0);
   const [mediaStream, setMediaStream] = useState(null);
-  
+
   const { setConnectionStatus, setTestStatus, setAudioLevel: setStoreAudioLevel } = useLevelTestStore();
 
   useEffect(() => {
@@ -31,7 +31,7 @@ export default function LevelTestCheck() {
       setMediaStream(stream);
       setMicPermission('granted');
       setConnectionStatus({ microphone: true });
-      
+
       // Start audio level monitoring
       startAudioLevelMonitoring(stream);
     } catch (error) {
@@ -79,7 +79,7 @@ export default function LevelTestCheck() {
       const arraySum = array.reduce((a, value) => a + value, 0);
       const average = arraySum / array.length;
       const normalizedLevel = Math.min(100, Math.round(average));
-      
+
       setAudioLevel(normalizedLevel);
       setStoreAudioLevel(normalizedLevel);
     };
@@ -149,7 +149,7 @@ export default function LevelTestCheck() {
             className="p-2 -ml-2"
           >
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-              <path d="M15 18L9 12L15 6" stroke="#111111" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+              <path d="M15 18L9 12L15 6" stroke="#111111" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
           </button>
           <h1 className="text-[18px] font-bold text-[#111111] flex-1 text-center mr-6">
@@ -188,7 +188,7 @@ export default function LevelTestCheck() {
                     {micPermission === 'granted' && (
                       <div className="mt-2">
                         <div className="w-full bg-[#F1F3F5] rounded-full h-2">
-                          <div 
+                          <div
                             className="bg-[#00C471] h-2 rounded-full transition-all duration-200"
                             style={{ width: `${audioLevel}%` }}
                           />