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
🔧 주요 변경 내용:
• 타입 시스템 안정성 강화
• 핵심 비즈니스 로직 개선
• 소규모 기능 개선
• 모듈 구조 개선
