feat: OPIc 스피킹 테스트 기능 구현

[DDINGJOO]

📋 개요

OPIc 스피킹 테스트 프로토타입을 기반으로 실제 프로젝트에 OPIc 학습 기능을 구현합니다.

🎯 주요 기능

1. 세션 관리

• 세션 생성 (Topic, SubTopic, Target Level 선택)
• 세션 진행 상태 표시
• 세션 완료 및 종합 리포트

2. 질문/답변 플로우

• 질문 텍스트 + 음성 재생 (TTS)
• 음성 녹음 (Web Audio API)
• S3 업로드 및 STT 변환
• AI 피드백 수신

3. AI 피드백 표시

• 원본 답변 (STT 변환)
• 교정된 답변
• 모범 답변
• 문법 오류 상세

🏗️ 구현 범위

API 레이어

• src/api/opicApi.js - API 클라이언트
• src/domains/opic/services/opicService.js - 비즈니스 로직

컴포넌트

• OPIcPage.jsx - 메인 페이지 (세션 생성, 질문, 녹음, 피드백)
• SessionSetup.jsx - 세션 설정 컴포넌트
• QuestionCard.jsx - 질문 표시 + 오디오
• AudioRecorder.jsx - 녹음 컴포넌트
• FeedbackDisplay.jsx - AI 피드백 표시
• SessionReport.jsx - 종합 리포트

라우팅

• /opic - OPIc 메인 페이지 추가

📝 참고

• 프로토타입: docs/opic-test.html
• 기존 grammar 도메인 패턴 참고

✅ 완료 조건

• 세션 생성 및 질문 조회 동작
• 음성 녹음 및 S3 업로드 동작
• AI 피드백 정상 표시
• 반응형 UI (모바일/데스크톱)
• 기존 디자인 시스템 준수

[github-actions]

Jira: MESP-167