Feat: 미션 영상 업로드 및 미션 디테일 페이지 UI 구현

[JKyEun]

개요

미션 시도 후 영상 업로드 기능을 새로 구현하고, 성공/실패 상태에 따른 UI를 구현했습니다. 또한 코드 중복을 제거하고 재사용성을 높이는 리팩토링을 진행했습니다.

주요 기능

영상 업로드 시스템 구현

• 4단계 업로드 프로세스: 초기화 → 청크 업로드 → 완료 → 상태 확인
• useUploadAttemptVideo 훅: 업로드 로직을 캡슐화한 커스텀 훅
• 진행률 표시: 업로드 중 오버레이로 진행 상황 표시
• API 모킹: MSW를 활용한 업로드 API 모킹 구현

UI/UX 구현

• MissionGridCard: 성공/실패/미도전 상태별 다른 UI 표시
• MissionListCard: 상태별 이미지, 배지, 메시지 동적 변경
• MissionSuccess/Failed: Figma 디자인 기반 영상 뷰어 구현
• 탭 기능: "내 영상"과 "답지" 간 전환 가능

기술적 구현

컴포넌트 공통화

• MissionDetailHeader: 상단 헤더 공통 컴포넌트
• MissionResultView: 성공/실패 뷰 공통화
• useCarousel 훅: 캐러셀 로직 재사용 가능한 커스텀 훅

주요 파일 변경사항

신규 파일

• useUploadAttemptVideo.ts: 영상 업로드 로직
• useCarousel.ts: 캐러셀 커스텀 훅
• MissionDetailHeader.tsx: 공통 헤더 컴포넌트
• MissionResultView.tsx: 공통 결과 뷰 컴포넌트
• MissionVideoUploadOverlay.tsx: 업로드 진행률 표시

구현된 파일

• MissionGridCard.tsx: 상태별 UI 분기 처리
• MissionListCard.tsx: 상태별 데이터 표시
• MissionSuccess/Failed.tsx: Figma 디자인 기반 구현
• handlers.ts: 업로드 API 모킹 추가

사용자 경험

• 미션 시도 후 자동 영상 업로드
• 실시간 업로드 진행률 확인
• 성공/실패 상태별 맞춤형 UI
• 내 영상과 답지 영상 간 쉬운 전환
• 직관적인 상태 표시 (색상, 아이콘, 메시지)

[JKyEun]

c1181fe 리뷰 적용했습니다~ @minsgy