Phase 2 안정성 향상 적용:
1. sourceUnavailable 함수형 업데이트 (15% → 3%)
- handleUpdate에서 stale closure 방지
- 함수형 업데이트 패턴 사용: setSourceUnavailable((prev) => ...)
- 의존성 배열에서 sourceUnavailable 제거
2. YouTube URL 정규식 검증 (10% → 2%)
- URL 객체로 hostname 파싱 시도
- youtube.com, youtu.be, m.youtube.com 도메인 체크
- 파싱 실패 시 정규식 fallback
- 파일명 충돌 오탐 방지
3. Modal → Fullscreen 전환 시 controls 연장 (20% UX 개선)
- showControls에 timeout 파라미터 추가 (기본 3초)
- Fullscreen 전환 시 10초로 연장
- 사용자가 리모컨 조작 준비할 시간 제공
예상 안정성 개선:
- 기능 저하: 20% → 5%
- 완벽한 작동: 80% → 95%
- UX 만족도: +20%
관련 문서: .docs/MediaPlayer-v2-Risk-Analysis.md (Phase 2)
Phase 1 필수 수정사항 적용:
1. DurationFmt try-catch 추가 (치명적 크래시 방지)
- ilib 로딩 실패 시 fallback formatter 제공
- secondsToTime 기반 간단한 포맷터로 대체
- 실패 확률: 5% → 0.1%
2. seek() duration 검증 강화 (초기 seek 실패 방지)
- NaN, 0, Infinity 모두 체크
- 라이브 스트림 및 메타데이터 로딩 전 상태 처리
- 실패 확률: 25% → 5%
3. proportionLoaded 플랫폼별 계산 (버퍼링 표시 수정)
- Media 컴포넌트: proportionLoaded 속성 사용
- TReactPlayer/HTMLVideoElement: buffered API 사용
- 1초마다 업데이트 (setInterval)
- 실패 확률: 60% → 5%
예상 안정성 개선:
- 완벽한 작동: 20% → 80%
- 기능 저하: 80% → 20%
- 치명적 실패: 5% → 0.1%
Related: .docs/MediaPlayer-v2-Risk-Analysis.md
MediaPanel 실제 사용 컨텍스트 분석 및 필수 수정 사항 문서화
주요 발견사항:
- DetailPanel → ProductVideo → MediaPanel 사용 패턴 분석
- Modal 모드: 오버레이 없음 (정상)
- Fullscreen 모드: MediaSlider 필수 (누락됨)
필수 수정 사항:
- MediaSlider 추가 (리모컨으로 진행 위치 조정)
- Times 컴포넌트 추가 (현재/전체 시간 표시)
- proportionLoaded/Played 상태 추가
- Slider 이벤트 핸들러 구현
조건부 렌더링:
- Modal 모드 (modal=true): Slider 숨김
- Fullscreen 모드 (modal=false): Slider 표시
예상 작업 시간: 1.5시간
MediaPlayer.v2.jsx 최적화 비디오 플레이어 구현
- 함수 컴포넌트 + React Hooks 사용
- 코드 라인 85% 감소 (2,595 → 388)
- 상태 변수 65% 감소 (20+ → 7)
- Modal ↔ Fullscreen 전환 지원
- isPaused 상태 동기화
- 최소한의 Controls UI
- 메모리 효율성 개선 (Job 8개 → setTimeout 1개)
주요 기능:
- 기본 재생/일시정지 제어
- Modal 모드에서 fixed position 적용
- 클릭 시 Fullscreen 전환
- webOS Media / TReactPlayer 자동 선택
- API 제공 (play, pause, seek, getMediaState)
- Spotlight 포커스 관리
제거된 기능:
- MediaSlider (seek bar)
- jumpBy, fastForward, rewind
- 복잡한 피드백 시스템
- FloatingLayer, Redux 통합
문서:
- .docs/MediaPlayer-v2-README.md: 사용법 및 API 문서
## 문제 상황
VoiceInputOverlay에서 listening 모드로 음성 인식 후 새로운 데이터가 도착할 때,
VoiceInputOverlay의 포커스 복원 로직과 SearchPanel의 통합 포커스 로직이 충돌하여
첫 번째 아이템으로 포커스가 이동하지 않는 문제 발생
## 해결 방법
### 1. VoiceInputOverlay - 명시적 데이터 확인 추가
- shopperHouseData prop 추가
- 포커스 복원 로직에서 음성 검색 결과 데이터 유무를 명시적으로 확인
- 데이터가 있으면 포커스 복원하지 않고 SearchPanel에 위임
### 2. SearchPanel - 우선순위 시나리오 타이밍 단축
- NEW_SEARCH_LOADED 시나리오의 포커스 타이밍을 100ms → 50ms로 단축
- VoiceInputOverlay의 포커스 복원(100ms)보다 먼저 실행되어 우선권 확보
- 타이밍 이슈로 인한 경쟁 상태(Race Condition) 방지
## 변경 파일
- VoiceInputOverlay.jsx: shopperHouseData prop 추가 및 포커스 복원 조건 개선
- SearchPanel.new.v2.jsx: shopperHouseData prop 전달 및 포커스 타이밍 최적화
## 테스트 시나리오
1. 음성 검색 실행 (listening 모드)
2. 음성 인식 완료 및 API 응답 수신
3. VoiceInputOverlay 닫힘
4. ✅ 첫 번째 검색 결과 아이템으로 포커스 이동 확인
🕐 커밋 시간: 2025. 11. 06. 20:46:35
📊 변경 통계:
• 총 파일: 7개
• 추가: +398줄
• 삭제: -1줄
📁 추가된 파일:
+ com.twin.app.shoptime/src/utils/advancedAsyncPanelExamples.js
+ com.twin.app.shoptime/src/utils/asyncActionUtils.js
+ com.twin.app.shoptime/src/utils/asyncPanelQueueExamples.js
+ com.twin.app.shoptime/src/utils/compatibleAsyncPanelExamples.js
📝 수정된 파일:
~ com.twin.app.shoptime/src/actions/actionTypes.js
~ com.twin.app.shoptime/src/actions/queuedPanelActions.js
~ com.twin.app.shoptime/src/reducers/panelReducer.js
🔧 주요 변경 내용:
• 타입 시스템 안정성 강화
• 핵심 비즈니스 로직 개선
• 공통 유틸리티 함수 최적화
• 대규모 기능 개발
• 모듈 구조 개선
🕐 커밋 시간: 2025. 11. 06. 18:37:14
📊 변경 통계:
• 총 파일: 4개
• 추가: +97줄
• 삭제: -5줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/actions/checkoutActions.js
~ com.twin.app.shoptime/src/reducers/checkoutReducer.js
~ com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx
🔧 주요 변경 내용:
• 핵심 비즈니스 로직 개선
• UI 컴포넌트 아키텍처 개선
• 소규모 기능 개선
🕐 커밋 시간: 2025. 11. 06. 18:02:13
📊 변경 통계:
• 총 파일: 6개
• 추가: +163줄
• 삭제: -6줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/actions/productActions.js
~ com.twin.app.shoptime/src/actions/toastActions.js
~ com.twin.app.shoptime/src/components/TToast/TToastEnhanced.jsx
~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx
~ com.twin.app.shoptime/src/views/MainView/MainView.jsx
🔧 주요 변경 내용:
• 핵심 비즈니스 로직 개선
• UI 컴포넌트 아키텍처 개선
• 중간 규모 기능 개선
• 모듈 구조 개선
🕐 커밋 시간: 2025. 11. 06. 09:25:09
📊 변경 통계:
• 총 파일: 7개
• 추가: +174줄
• 삭제: -1줄
📁 추가된 파일:
+ com.twin.app.shoptime/src/actions/queuedPanelActions.js
+ com.twin.app.shoptime/src/middleware/panelQueueMiddleware.js
+ com.twin.app.shoptime/src/utils/panelQueueExamples.js
+ com.twin.app.shoptime/src/utils/panelQueueSetupGuide.js
📝 수정된 파일:
~ com.twin.app.shoptime/src/actions/actionTypes.js
~ com.twin.app.shoptime/src/reducers/panelReducer.js
~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx
🔧 주요 변경 내용:
• 타입 시스템 안정성 강화
• 핵심 비즈니스 로직 개선
• 공통 유틸리티 함수 최적화
• 중간 규모 기능 개선
• 모듈 구조 개선
🕐 커밋 시간: 2025. 11. 06. 09:08:46
📊 변경 통계:
• 총 파일: 6개
• 추가: +2줄
📁 추가된 파일:
+ com.twin.app.shoptime/src/components/GlobalPopup/GlobalPopup.jsx
+ com.twin.app.shoptime/src/components/GlobalPopup/index.js
+ com.twin.app.shoptime/src/constants/popupConfig.js
+ com.twin.app.shoptime/src/constants/popupTypes.js
+ com.twin.app.shoptime/src/hooks/usePopupManager.js
📝 수정된 파일:
~ com.twin.app.shoptime/src/App/App.js
🔧 주요 변경 내용:
• 핵심 비즈니스 로직 개선
• UI 컴포넌트 아키텍처 개선
• 설정 관리 시스템 개선
• 타입 시스템 안정성 강화
• 모듈 구조 개선
🕐 커밋 시간: 2025. 11. 05. 11:00:46
📊 변경 통계:
• 총 파일: 2개
• 추가: +29줄
• 삭제: -5줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.v2.jsx
~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.v2.jsx
🔧 주요 변경 내용:
• 소규모 기능 개선
🕐 커밋 시간: 2025. 11. 05. 09:01:18
📊 변경 통계:
• 총 파일: 1개
• 추가: +1줄
• 삭제: -1줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
🔧 주요 변경 내용:
• 코드 정리 및 최적화
- CheckOutPanel Back/Cancel 버튼에서 DetailPanel에 shouldReload 신호 전달
- DetailPanel에 panelShouldReload 플래그 추가
- panelShouldReload useEffect로 데이터 초기화 및 재로딩 구현
- DetailPanel 스택 유지로 자연스러운 네비게이션 제공
Generated with coding tools
Co-Authored-By: Dev Team <noreply@dev.team>
- BuyOption 체크아웃 진입 시 동영상 및 플레이어 패널 정리 로직 추가
- 선택된 옵션 기본값 설정 로직 개선
- SearchResults 썸네일 최적화 옵션 필드 추가
Generated with coding tools
Co-Authored-By: Dev Team <noreply@dev.team>
🕐 커밋 시간: 2025. 11. 05. 07:35:13
📊 변경 통계:
• 총 파일: 4개
• 추가: +94줄
• 삭제: -70줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/utils/BuyNowDataManipulator.js
~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx
~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx
🔧 주요 변경 내용:
• 공통 유틸리티 함수 최적화
• UI 컴포넌트 아키텍처 개선
• 소규모 기능 개선
• 코드 정리 및 최적화
🕐 커밋 시간: 2025. 11. 05. 05:30:32
📊 변경 통계:
• 총 파일: 4개
• 추가: +38줄
• 삭제: -11줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/hooks/useReviews/useReviews.js
~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx
~ com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx
~ com.twin.app.shoptime/src/views/UserReview/UserReviewPanel.jsx
🔧 주요 변경 내용:
• 핵심 비즈니스 로직 개선
• 소규모 기능 개선
🕐 커밋 시간: 2025. 11. 05. 05:06:01
📊 변경 통계:
• 총 파일: 5개
• 추가: +252줄
• 삭제: -89줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/actions/productActions.js
~ com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.bak.js
~ com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.js
~ com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.original.js
~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
🔧 주요 변경 내용:
• 핵심 비즈니스 로직 개선
• 대규모 기능 개발
🕐 커밋 시간: 2025. 11. 04. 19:26:21
📊 변경 통계:
• 총 파일: 1개
• 추가: +3줄
• 삭제: -1줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/reducers/searchReducer.js
🔧 주요 변경 내용:
• 핵심 비즈니스 로직 개선
🕐 커밋 시간: 2025. 11. 04. 19:16:49
📊 변경 통계:
• 총 파일: 1개
• 추가: +30줄
• 삭제: -21줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.jsx
🔧 주요 변경 내용:
• 소규모 기능 개선
• 코드 정리 및 최적화
🕐 커밋 시간: 2025. 11. 04. 19:09:24
📊 변경 통계:
• 총 파일: 6개
• 추가: +89줄
• 삭제: -29줄
📝 수정된 파일:
~ com.twin.app.shoptime/src/actions/actionTypes.js
~ com.twin.app.shoptime/src/actions/searchActions.js
~ com.twin.app.shoptime/src/reducers/searchReducer.js
~ com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.v2.jsx
~ com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.jsx
~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx
🔧 주요 변경 내용:
• 타입 시스템 안정성 강화
• 핵심 비즈니스 로직 개선
• 소규모 기능 개선
• 모듈 구조 개선
