Revert "브랜치 비교 자동로직 추가"

This reverts commit 5df65be218.
Merge feature/si_log: 통합로그 수정사항 적용
2025-12-05 17:16:13 +09:00 · 2025-12-05 17:10:44 +09:00 · 2025-12-05 17:07:16 +09:00 · 2025-12-05 16:19:17 +09:00 · 2025-12-05 16:16:39 +09:00 · 2025-12-05 16:10:21 +09:00
95 changed files with 1322 additions and 14807 deletions
--- a/.docs/MediaPlayer-v2-README.md
+++ b/.docs/MediaPlayer-v2-README.md
@@ -1,413 +0,0 @@
 # MediaPlayer.v2 - 최적화된 비디오 플레이어
 **위치**: `src/components/VideoPlayer/MediaPlayer.v2.jsx`
 ---
 ## 📊 개요
 webOS 환경에 최적화된 경량 비디오 플레이어 컴포넌트입니다.
 기존 MediaPlayer.jsx의 핵심 기능은 유지하면서 불필요한 복잡도를 제거했습니다.
 ### 주요 개선사항
 | 항목 | 기존 | v2 | 개선율 |
 |------|------|-----|--------|
 | **코드 라인** | 2,595 | 388 | **85%↓** |
 | **상태 변수** | 20+ | 7 | **65%↓** |
 | **Props** | 70+ | 18 | **74%↓** |
 | **타이머/Job** | 8 | 1 | **87%↓** |
 | **필수 기능** | 100% | 100% | **✅ 유지** |
 ---
 ## ✨ 주요 기능
 ### 1. Modal ↔ Fullscreen 전환
 ```javascript
 // Modal 모드로 시작
 <MediaPlayerV2
  src="video.mp4"
  panelInfo={{ modal: true, modalContainerId: 'product-123' }}
  onClick={() => dispatch(switchMediaToFullscreen())}
  style={modalStyle}  // MediaPanel에서 계산
 />
 // 클릭 시 자동으로 Fullscreen으로 전환
 ```
 ### 2. 기본 재생 제어
 ```javascript
 const playerRef = useRef();
 // API 메서드
 playerRef.current.play();
 playerRef.current.pause();
 playerRef.current.seek(30);
 playerRef.current.getMediaState();
 playerRef.current.showControls();
 playerRef.current.hideControls();
 ```
 ### 3. isPaused 동기화
 ```javascript
 // Modal 모드에서 다른 패널이 위로 올라오면 자동 일시정지
 <MediaPlayerV2
  panelInfo={{
    modal: true,
    isPaused: true  // 자동으로 pause() 호출
  }}
 />
 ```
 ### 4. webOS / 브라우저 자동 감지
 ```javascript
 // webOS: Media 컴포넌트
 // 브라우저: TReactPlayer
 // YouTube: TReactPlayer
 // 자동으로 적절한 컴포넌트 선택
 <MediaPlayerV2 src="video.mp4" />
 <MediaPlayerV2 src="https://youtube.com/watch?v=xxx" />
 ```
 ---
 ## 📐 Props
 ### 필수 Props
 ```typescript
 interface MediaPlayerV2Props {
  // 비디오 소스 (필수)
  src: string;
 }
 ```
 ### 선택 Props
 ```typescript
 interface MediaPlayerV2Props {
  // 비디오 설정
  type?: string;              // 기본: 'video/mp4'
  thumbnailUrl?: string;
  // 재생 제어
  autoPlay?: boolean;         // 기본: false
  loop?: boolean;             // 기본: false
  muted?: boolean;            // 기본: false
  // Modal 전환
  disabled?: boolean;         // Modal에서 true
  spotlightDisabled?: boolean;
  onClick?: () => void;       // Modal 클릭 시
  style?: CSSProperties;      // Modal fixed position
  modalClassName?: string;
  modalScale?: number;
  // 패널 정보
  panelInfo?: {
    modal?: boolean;
    modalContainerId?: string;
    isPaused?: boolean;
  };
  // 콜백
  onEnded?: (e: Event) => void;
  onError?: (e: Event) => void;
  onBackButton?: (e: Event) => void;
  onLoadStart?: (e: Event) => void;
  onTimeUpdate?: (e: Event) => void;
  onLoadedData?: (e: Event) => void;
  onLoadedMetadata?: (e: Event) => void;
  onDurationChange?: (e: Event) => void;
  // Spotlight
  spotlightId?: string;       // 기본: 'mediaPlayerV2'
  // 비디오 컴포넌트
  videoComponent?: React.ComponentType;
  // ReactPlayer 설정
  reactPlayerConfig?: object;
  // 기타
  children?: React.ReactNode;  // <source>, <track> tags
  className?: string;
 }
 ```
 ---
 ## 💻 사용 예제
 ### 기본 사용
 ```javascript
 import MediaPlayerV2 from '../components/VideoPlayer/MediaPlayer.v2';
 function MyComponent() {
  return (
    <MediaPlayerV2
      src="https://example.com/video.mp4"
      autoPlay
      onEnded={() => console.log('Video ended')}
    />
  );
 }
 ```
 ### Modal 모드 (MediaPanel에서 사용)
 ```javascript
 import MediaPlayerV2 from '../components/VideoPlayer/MediaPlayer.v2';
 function MediaPanel({ panelInfo }) {
  const [modalStyle, setModalStyle] = useState({});
  useEffect(() => {
    if (panelInfo.modal && panelInfo.modalContainerId) {
      const node = document.querySelector(
        `[data-spotlight-id="${panelInfo.modalContainerId}"]`
      );
      const rect = node.getBoundingClientRect();
      setModalStyle({
        position: 'fixed',
        top: rect.top + 'px',
        left: rect.left + 'px',
        width: rect.width + 'px',
        height: rect.height + 'px',
      });
    }
  }, [panelInfo]);
  const handleVideoClick = () => {
    if (panelInfo.modal) {
      dispatch(switchMediaToFullscreen());
    }
  };
  return (
    <MediaPlayerV2
      src={panelInfo.showUrl}
      thumbnailUrl={panelInfo.thumbnailUrl}
      disabled={panelInfo.modal}
      spotlightDisabled={panelInfo.modal}
      onClick={handleVideoClick}
      style={panelInfo.modal ? modalStyle : {}}
      panelInfo={panelInfo}
    />
  );
 }
 ```
 ### API 사용
 ```javascript
 import { useRef } from 'react';
 import MediaPlayerV2 from '../components/VideoPlayer/MediaPlayer.v2';
 function MyComponent() {
  const playerRef = useRef();
  const handlePlay = () => {
    playerRef.current?.play();
  };
  const handlePause = () => {
    playerRef.current?.pause();
  };
  const handleSeek = (time) => {
    playerRef.current?.seek(time);
  };
  const getState = () => {
    const state = playerRef.current?.getMediaState();
    console.log(state);
    // {
    //   currentTime: 10.5,
    //   duration: 120,
    //   paused: false,
    //   loading: false,
    //   error: null,
    //   playbackRate: 1,
    //   proportionPlayed: 0.0875
    // }
  };
  return (
    <>
      <MediaPlayerV2
        ref={playerRef}
        src="video.mp4"
      />
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
      <button onClick={() => handleSeek(30)}>Seek 30s</button>
      <button onClick={getState}>Get State</button>
    </>
  );
 }
 ```
 ### webOS <source> 태그 사용
 ```javascript
 <MediaPlayerV2 src="video.mp4">
  <source src="video.mp4" type="video/mp4" />
  <track kind="subtitles" src="subtitles.vtt" default />
 </MediaPlayerV2>
 ```
 ### YouTube 재생
 ```javascript
 <MediaPlayerV2
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  reactPlayerConfig={{
    youtube: {
      playerVars: {
        controls: 0,
        autoplay: 1,
      }
    }
  }}
 />
 ```
 ---
 ## 🔧 API 메서드
 ref를 통해 다음 메서드에 접근할 수 있습니다:
 ```typescript
 interface MediaPlayerV2API {
  // 재생 제어
  play(): void;
  pause(): void;
  seek(timeIndex: number): void;
  // 상태 조회
  getMediaState(): {
    currentTime: number;
    duration: number;
    paused: boolean;
    loading: boolean;
    error: Error | null;
    playbackRate: number;
    proportionPlayed: number;
  };
  // Controls 제어
  showControls(): void;
  hideControls(): void;
  toggleControls(): void;
  areControlsVisible(): boolean;
  // Video Node 접근
  getVideoNode(): HTMLVideoElement | ReactPlayerInstance;
 }
 ```
 ---
 ## 🎯 제거된 기능
 다음 기능들은 MediaPanel 사용 케이스에 불필요하여 제거되었습니다:
 ```
 ❌ MediaSlider (seek bar)
 ❌ jumpBy, fastForward, rewind
 ❌ playbackRate 조정
 ❌ QR코드 오버레이
 ❌ 전화번호 오버레이
 ❌ 테마 인디케이터
 ❌ 복잡한 피드백 시스템 (8개 Job → 1개 setTimeout)
 ❌ FloatingLayer
 ❌ Redux 통합
 ❌ TabContainer 동기화
 ❌ Announce/Accessibility 복잡계
 ❌ MediaTitle, infoComponents
 ```
 필요하다면 기존 MediaPlayer.jsx를 사용하세요.
 ---
 ## 🚀 성능
 ### 메모리 사용량
 - **타이머**: 8개 Job → 1개 setTimeout
 - **이벤트 리스너**: 최소화 (video element events만)
 - **상태 변수**: 7개 (20+개에서 감소)
 ### 렌더링 성능
 - **useMemo**: 계산 비용이 큰 값 캐싱
 - **useCallback**: 함수 재생성 방지
 - **조건부 렌더링**: 불필요한 DOM 요소 제거
 ---
 ## 🔄 마이그레이션 가이드
 ### 기존 MediaPlayer.jsx에서 마이그레이션
 대부분의 props는 호환됩니다:
 ```javascript
 // 기존
 import { VideoPlayer } from '../components/VideoPlayer/MediaPlayer';
 // 새로운
 import MediaPlayerV2 from '../components/VideoPlayer/MediaPlayer.v2';
 ```
 제거된 props:
 - `jumpBy`, `initialJumpDelay`, `jumpDelay`
 - `playbackRateHash`
 - `onFastForward`, `onRewind`, `onJumpBackward`, `onJumpForward`
 - `feedbackHideDelay`, `miniFeedbackHideDelay`
 - `noMediaSliderFeedback`, `noMiniFeedback`, `noSlider`
 - `title`, `infoComponents`
 - 기타 PlayerPanel 전용 props
 ---
 ## 📝 Notes
 ### Modal 전환 작동 방식
 1. **MediaPanel**이 `getBoundingClientRect()`로 스타일 계산
 2. **MediaPlayerV2**는 받은 `style`을 그대로 적용
 3. `modal` 플래그에 따라 controls/spotlight 활성화 제어
 → **MediaPlayerV2는 전환 로직 구현 불필요**
 ### webOS 호환성
 - `window.PalmSystem` 존재 시 `Media` 컴포넌트 사용
 - 브라우저에서는 `TReactPlayer` 사용
 - YouTube URL은 항상 `TReactPlayer` 사용
 ---
 ## 🐛 알려진 제약사항
 1. **Seek bar 없음**: 단순 재생만 지원
 2. **빠르기 조정 없음**: 배속 재생 미지원
 3. **간단한 Controls**: 재생/일시정지 버튼만
 복잡한 컨트롤이 필요하다면 기존 `MediaPlayer.jsx` 사용을 권장합니다.
 ---
 ## 📚 관련 문서
 - [비디오 플레이어 분석 문서](.docs/video-player-analysis-and-optimization-plan.md)
 - [Modal 전환 상세 분석](.docs/modal-transition-analysis.md)
--- a/.docs/MediaPlayer-v2-Required-Changes.md
+++ b/.docs/MediaPlayer-v2-Required-Changes.md
@@ -1,404 +0,0 @@
 # MediaPlayer.v2 필수 수정 사항
 **작성일**: 2025-11-10
 **발견 사항**: MediaPanel의 실제 사용 컨텍스트 분석
 ---
 ## 🔍 실제 사용 패턴 분석
 ### 사용 위치
 ```
 DetailPanel
  → ProductAllSection
    → ProductVideo
      → startMediaPlayer()
        → MediaPanel
          → MediaPlayer (VideoPlayer)
 ```
 ### 동작 플로우
 #### 1️⃣ **Modal 모드 시작** (작은 화면)
 ```javascript
 // ProductVideo.jsx:174-198
 dispatch(startMediaPlayer({
  modal: true,                           // 작은 화면 모드
  modalContainerId: 'product-video-player',
  showUrl: productInfo.prdtMediaUrl,
  thumbnailUrl: productInfo.thumbnailUrl960,
  // ...
 }));
 ```
 **Modal 모드 특징**:
 - 화면 일부 영역에 fixed position으로 표시
 - **오버레이 없음** (controls, slider 모두 숨김)
 - 클릭만 가능 (전체화면으로 전환)
 #### 2️⃣ **Fullscreen 모드 전환** (최대화면)
 ```javascript
 // ProductVideo.jsx:164-168
 if (isCurrentlyPlayingModal) {
  dispatch(switchMediaToFullscreen());  // modal: false로 변경
 }
 ```
 **Fullscreen 모드 특징**:
 - 전체 화면 표시
 - **리모컨 엔터 키 → 오버레이 표시 필수**
  - ✅ Back 버튼
  - ✅ **비디오 진행 바 (MediaSlider)** ← 필수!
  - ✅ 현재 시간 / 전체 시간 (Times)
  - ✅ Play/Pause 버튼 (MediaControls)
 ---
 ## 🚨 현재 MediaPlayer.v2의 문제점
 ### ❌ 제거된 필수 기능
 ```javascript
 // MediaPlayer.v2.jsx - 현재 상태
 {controlsVisible && !isModal && (
  <div className={css.simpleControls}>
    <button onClick={...}>{paused ? '▶' : '⏸'}</button>  // Play/Pause만
    <button onClick={onBackButton}>← Back</button>
  </div>
 )}
 ```
 **문제**:
 1. ❌ **MediaSlider (seek bar) 없음** - 리모컨으로 진행 위치 조정 불가
 2. ❌ **Times 컴포넌트 없음** - 현재 시간/전체 시간 표시 안 됨
 3. ❌ **proportionLoaded, proportionPlayed 상태 없음**
 ---
 ## ✅ 기존 MediaPlayer.jsx의 올바른 구현
 ### Modal vs Fullscreen 조건부 렌더링
 ```javascript
 // MediaPlayer.jsx:2415-2461
 {noSlider ? null : (
  <div className={css.sliderContainer}>
    {/* Times - 전체 시간 */}
    {this.state.mediaSliderVisible && type ? (
      <Times
        noCurrentTime
        total={this.state.duration}
        formatter={durFmt}
        type={type}
      />
    ) : null}
    {/* Times - 현재 시간 */}
    {this.state.mediaSliderVisible && type ? (
      <Times
        noTotalTime
        current={this.state.currentTime}
        formatter={durFmt}
      />
    ) : null}
    {/* MediaSlider - modal이 아닐 때만 표시 */}
    {!panelInfo.modal && (
      <MediaSlider
        backgroundProgress={this.state.proportionLoaded}
        disabled={disabled || this.state.sourceUnavailable}
        value={this.state.proportionPlayed}
        visible={this.state.mediaSliderVisible}
        spotlightDisabled={
          spotlightDisabled || !this.state.mediaControlsVisible
        }
        onChange={this.onSliderChange}
        onKnobMove={this.handleKnobMove}
        onKeyDown={this.handleSliderKeyDown}
        // ...
      />
    )}
  </div>
 )}
 ```
 **핵심 조건**:
 ```javascript
 !panelInfo.modal  // Modal이 아닐 때만 MediaSlider 표시
 ```
 ---
 ## 📋 MediaPlayer.v2 수정 필요 사항
 ### 1. 상태 추가
 ```javascript
 // 현재 (7개)
 const [currentTime, setCurrentTime] = useState(0);
 const [duration, setDuration] = useState(0);
 const [paused, setPaused] = useState(!autoPlay);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);
 const [controlsVisible, setControlsVisible] = useState(false);
 const [sourceUnavailable, setSourceUnavailable] = useState(true);
 // 추가 필요 (2개)
 const [proportionLoaded, setProportionLoaded] = useState(0);     // 로딩된 비율
 const [proportionPlayed, setProportionPlayed] = useState(0);     // 재생된 비율
 ```
 ### 2. Import 추가
 ```javascript
 import { MediaSlider, Times, secondsToTime } from '../MediaPlayer';
 import DurationFmt from 'ilib/lib/DurationFmt';
 import { memoize } from '@enact/core/util';
 ```
 ### 3. DurationFmt 헬퍼 추가
 ```javascript
 const memoGetDurFmt = memoize(
  () => new DurationFmt({
    length: 'medium',
    style: 'clock',
    useNative: false,
  })
 );
 const getDurFmt = () => {
  if (typeof window === 'undefined') return null;
  return memoGetDurFmt();
 };
 ```
 ### 4. handleUpdate 수정 (proportionLoaded/Played 계산)
 ```javascript
 const handleUpdate = useCallback((ev) => {
  const el = videoRef.current;
  if (!el) return;
  const newCurrentTime = el.currentTime || 0;
  const newDuration = el.duration || 0;
  setCurrentTime(newCurrentTime);
  setDuration(newDuration);
  setPaused(el.paused);
  setLoading(el.loading || false);
  setError(el.error || null);
  setSourceUnavailable((el.loading && sourceUnavailable) || el.error);
  // 추가: proportion 계산
  setProportionLoaded(el.proportionLoaded || 0);
  setProportionPlayed(newDuration > 0 ? newCurrentTime / newDuration : 0);
  // 콜백 호출
  if (ev.type === 'timeupdate' && onTimeUpdate) {
    onTimeUpdate(ev);
  }
  // ...
 }, [onTimeUpdate, sourceUnavailable]);
 ```
 ### 5. Slider 이벤트 핸들러 추가
 ```javascript
 const handleSliderChange = useCallback(({ value }) => {
  const time = value * duration;
  seek(time);
 }, [duration, seek]);
 const handleKnobMove = useCallback((ev) => {
  if (!videoRef.current) return;
  const seconds = Math.floor(ev.proportion * videoRef.current.duration);
  if (!isNaN(seconds)) {
    // 스크럽 시 시간 표시 업데이트 등
    // 필요시 onScrub 콜백 호출
  }
 }, []);
 const handleSliderKeyDown = useCallback((ev) => {
  // Spotlight 키 이벤트 처리
  // 위/아래 키로 controls 이동 등
 }, []);
 ```
 ### 6. Controls UI 수정
 ```javascript
 {/* Modal이 아닐 때만 전체 controls 표시 */}
 {controlsVisible && !isModal && (
  <div className={css.controlsContainer}>
    {/* Slider Section */}
    <div className={css.sliderContainer}>
      {/* Times - 전체 시간 */}
      <Times
        noCurrentTime
        total={duration}
        formatter={getDurFmt()}
        type={type}
      />
      {/* Times - 현재 시간 */}
      <Times
        noTotalTime
        current={currentTime}
        formatter={getDurFmt()}
      />
      {/* MediaSlider */}
      <MediaSlider
        backgroundProgress={proportionLoaded}
        disabled={disabled || sourceUnavailable}
        value={proportionPlayed}
        visible={controlsVisible}
        spotlightDisabled={spotlightDisabled}
        onChange={handleSliderChange}
        onKnobMove={handleKnobMove}
        onKeyDown={handleSliderKeyDown}
        spotlightId="media-slider-v2"
      />
    </div>
    {/* Controls Section */}
    <div className={css.controlsButtons}>
      <button className={css.playPauseBtn} onClick={...}>
        {paused ? '▶' : '⏸'}
      </button>
      {onBackButton && (
        <button className={css.backBtn} onClick={onBackButton}>
          ← Back
        </button>
      )}
    </div>
  </div>
 )}
 ```
 ### 7. CSS 추가
 ```less
 // VideoPlayer.module.less
 .controlsContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 10;
 }
 .sliderContainer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
 }
 .controlsButtons {
  display: flex;
  gap: 20px;
  justify-content: center;
 }
 ```
 ---
 ## 📊 수정 전/후 비교
 ### 현재 MediaPlayer.v2 (문제)
 ```
 Modal 모드 (modal=true):
  ✅ 오버레이 없음 (정상)
  ✅ 클릭으로 전환 (정상)
 Fullscreen 모드 (modal=false):
  ❌ MediaSlider 없음 (문제!)
  ❌ Times 없음 (문제!)
  ✅ Play/Pause 버튼 (정상)
  ✅ Back 버튼 (정상)
 ```
 ### 수정 후 MediaPlayer.v2 (정상)
 ```
 Modal 모드 (modal=true):
  ✅ 오버레이 없음
  ✅ 클릭으로 전환
 Fullscreen 모드 (modal=false):
  ✅ MediaSlider (seek bar)
  ✅ Times (현재/전체 시간)
  ✅ Play/Pause 버튼
  ✅ Back 버튼
 ```
 ---
 ## 🎯 우선순위
 ### High Priority (필수)
 1. ✅ **MediaSlider 추가** - 리모컨으로 진행 위치 조정
 2. ✅ **Times 컴포넌트 추가** - 시간 표시
 3. ✅ **proportionLoaded/Played 상태** - slider 동작
 ### Medium Priority (권장)
 4. Slider 이벤트 핸들러 세부 구현
 5. Spotlight 키 네비게이션 (위/아래로 slider ↔ buttons)
 6. CSS 스타일 개선
 ### Low Priority (선택)
 7. Scrub 시 썸네일 표시 (기존에도 없음)
 8. 추가 피드백 UI
 ---
 ## 🔧 구현 순서
 1. **Phase 1**: 상태 및 import 추가 (10분)
 2. **Phase 2**: MediaSlider 렌더링 (20분)
 3. **Phase 3**: Times 컴포넌트 추가 (10분)
 4. **Phase 4**: 이벤트 핸들러 구현 (20분)
 5. **Phase 5**: CSS 스타일 조정 (10분)
 6. **Phase 6**: 테스트 및 디버깅 (30분)
 **총 예상 시간**: 약 1.5시간
 ---
 ## ✅ 체크리스트
 - [ ] proportionLoaded, proportionPlayed 상태 추가
 - [ ] MediaSlider, Times import
 - [ ] DurationFmt 헬퍼 추가
 - [ ] handleUpdate에서 proportion 계산
 - [ ] handleSliderChange 구현
 - [ ] handleKnobMove 구현
 - [ ] handleSliderKeyDown 구현
 - [ ] Controls UI에 slider 추가
 - [ ] Times 컴포넌트 추가
 - [ ] CSS 스타일 추가
 - [ ] Modal 모드에서 slider 숨김 확인
 - [ ] Fullscreen 모드에서 slider 표시 확인
 - [ ] 리모컨으로 seek 동작 테스트
 ---
 ## 📝 결론
 MediaPlayer.v2는 **MediaSlider와 Times가 필수**입니다.
 이유:
 1. DetailPanel → ProductVideo에서만 사용
 2. Fullscreen 모드에서 리모컨 사용자가 비디오 진행 위치를 조정해야 함
 3. 현재/전체 시간 표시 필요
 **→ "간소화"는 맞지만, "필수 기능 제거"는 아님**
 **→ MediaSlider는 제거 불가, 단 Modal 모드에서만 조건부 숨김**
--- a/.docs/MediaPlayer-v2-Risk-Analysis.md
+++ b/.docs/MediaPlayer-v2-Risk-Analysis.md
@@ -1,789 +0,0 @@
 # MediaPlayer.v2 위험 분석 및 문제 발생 확률
 **분석일**: 2025-11-10
 **대상 파일**: `src/components/VideoPlayer/MediaPlayer.v2.jsx` (586 lines)
 ---
 ## 🎯 분석 방법론
 각 위험 요소에 대해 다음 기준으로 확률 계산:
 ```
 P(failure) = (1 - error_handling) × platform_dependency × complexity_factor
 error_handling: 0.0 (없음) ~ 1.0 (완벽)
 platform_dependency: 1.0 (독립) ~ 2.0 (높은 의존)
 complexity_factor: 1.0 (단순) ~ 1.5 (복잡)
 ```
 ---
 ## 🚨 High Risk Issues (확률 ≥ 20%)
 ### 1. proportionLoaded 계산 실패 (TReactPlayer)
 **위치**: MediaPlayer.v2.jsx:181
 ```javascript
 setProportionLoaded(el.proportionLoaded || 0);
 ```
 **문제**:
 - `el.proportionLoaded`는 webOS Media 컴포넌트 전용 속성
 - TReactPlayer (브라우저/YouTube)에서는 **undefined**
 - MediaSlider의 `backgroundProgress`가 항상 0으로 표시됨
 **영향**:
 - ❌ 로딩 진행 바(버퍼링 표시) 작동 안 함
 - ✅ 재생 자체는 정상 작동 (proportionPlayed는 별도 계산)
 **발생 조건**:
 - 브라우저 환경 (!window.PalmSystem)
 - YouTube URL 재생
 - videoComponent prop으로 TReactPlayer 전달
 **확률 계산**:
 ```
 error_handling = 0.0 (fallback만 있고 실제 계산 없음)
 platform_dependency = 1.8 (TReactPlayer에서 높은 확률로 발생)
 complexity_factor = 1.0
 P(failure) = (1 - 0.0) × 1.8 × 1.0 = 1.8 → 90% (매우 높음)
 ```
 **실제 발생 확률**: **60%** (webOS에서는 정상, 브라우저/YouTube에서만 발생)
 **권장 수정**:
 ```javascript
 // TReactPlayer에서는 buffered 사용
 const calculateProportionLoaded = useCallback(() => {
  if (!videoRef.current) return 0;
  if (ActualVideoComponent === Media) {
    return videoRef.current.proportionLoaded || 0;
  }
  // TReactPlayer/HTMLVideoElement
  const video = videoRef.current;
  if (video.buffered && video.buffered.length > 0 && video.duration) {
    return video.buffered.end(video.buffered.length - 1) / video.duration;
  }
  return 0;
 }, [ActualVideoComponent]);
 ```
 ---
 ### 2. seek() 호출 시 duration 미확정 상태
 **위치**: MediaPlayer.v2.jsx:258-265
 ```javascript
 const seek = useCallback((timeIndex) => {
  if (videoRef.current && !isNaN(videoRef.current.duration)) {
    videoRef.current.currentTime = Math.min(
      Math.max(0, timeIndex),
      videoRef.current.duration
    );
  }
 }, []);
 ```
 **문제**:
 - `isNaN(videoRef.current.duration)` 체크만으로 불충분
 - `duration === Infinity` 상태 (라이브 스트림)
 - `duration === 0` 상태 (메타데이터 로딩 전)
 **영향**:
 - seek() 호출이 무시됨 (조용한 실패)
 - 사용자는 MediaSlider를 움직여도 반응 없음
 **발생 조건**:
 - 비디오 로딩 초기 (loadedmetadata 이전)
 - MediaSlider를 빠르게 조작
 - 라이브 스트림 URL
 **확률 계산**:
 ```
 error_handling = 0.6 (isNaN 체크는 있으나 edge case 미처리)
 platform_dependency = 1.2 (모든 플랫폼에서 발생 가능)
 complexity_factor = 1.2 (타이밍 이슈)
 P(failure) = (1 - 0.6) × 1.2 × 1.2 = 0.576 → 58%
 ```
 **실제 발생 확률**: **25%** (빠른 조작 시, 라이브 스트림 제외)
 **권장 수정**:
 ```javascript
 const seek = useCallback((timeIndex) => {
  if (!videoRef.current) return;
  const video = videoRef.current;
  const dur = video.duration;
  // duration 유효성 체크 강화
  if (isNaN(dur) || dur === 0 || dur === Infinity) {
    console.warn('[MediaPlayer.v2] seek failed: invalid duration', dur);
    return;
  }
  video.currentTime = Math.min(Math.max(0, timeIndex), dur);
 }, []);
 ```
 ---
 ### 3. DurationFmt 로딩 실패 (ilib 의존성)
 **위치**: MediaPlayer.v2.jsx:42-53
 ```javascript
 const memoGetDurFmt = memoize(
  () => new DurationFmt({
    length: 'medium',
    style: 'clock',
    useNative: false,
  })
 );
 const getDurFmt = () => {
  if (typeof window === 'undefined') return null;
  return memoGetDurFmt();
 };
 ```
 **문제**:
 - `ilib/lib/DurationFmt` import 실패 시 런타임 에러
 - SSR 환경에서 `typeof window === 'undefined'`는 체크하지만
 - 브라우저에서 ilib이 없으면 **크래시**
 **영향**:
 - ❌ Times 컴포넌트가 렌더링 실패
 - ❌ MediaPlayer.v2 전체가 렌더링 안 됨
 **발생 조건**:
 - ilib가 번들에 포함되지 않음
 - Webpack/Rollup 설정 오류
 - node_modules 누락
 **확률 계산**:
 ```
 error_handling = 0.2 (null 반환만, try-catch 없음)
 platform_dependency = 1.0 (라이브러리 의존)
 complexity_factor = 1.1 (memoization)
 P(failure) = (1 - 0.2) × 1.0 × 1.1 = 0.88 → 88%
 ```
 **실제 발생 확률**: **5%** (일반적으로 ilib는 프로젝트에 포함되어 있음)
 **권장 수정**:
 ```javascript
 const getDurFmt = () => {
  if (typeof window === 'undefined') return null;
  try {
    return memoGetDurFmt();
  } catch (error) {
    console.error('[MediaPlayer.v2] DurationFmt creation failed:', error);
    return null;
  }
 };
 // Times 렌더링에서 fallback
 <Times
  formatter={getDurFmt() || { format: (time) => secondsToTime(time) }}
  // ...
 />
 ```
 ---
 ## ⚠️ Medium Risk Issues (확률 10-20%)
 ### 4. handleUpdate의 sourceUnavailable 상태 동기화 오류
 **위치**: MediaPlayer.v2.jsx:178
 ```javascript
 setSourceUnavailable((el.loading && sourceUnavailable) || el.error);
 ```
 **문제**:
 - `sourceUnavailable`이 useCallback 의존성에 포함됨 (line 197)
 - 상태 업데이트가 이전 상태에 의존 → **stale closure 위험**
 - loading이 끝나도 sourceUnavailable이 true로 고정될 수 있음
 **영향**:
 - MediaSlider가 계속 disabled 상태
 - play/pause 버튼 작동 안 함
 **발생 조건**:
 - 네트워크 지연으로 loading이 길어짐
 - 여러 번 연속으로 src 변경
 **확률 계산**:
 ```
 error_handling = 0.7 (로직은 있으나 의존성 이슈)
 platform_dependency = 1.3 (모든 환경)
 complexity_factor = 1.3 (상태 의존)
 P(failure) = (1 - 0.7) × 1.3 × 1.3 = 0.507 → 51%
 ```
 **실제 발생 확률**: **15%** (특정 시나리오에서만)
 **권장 수정**:
 ```javascript
 // sourceUnavailable을 의존성에서 제거하고 함수형 업데이트 사용
 const handleUpdate = useCallback((ev) => {
  const el = videoRef.current;
  if (!el) return;
  const newCurrentTime = el.currentTime || 0;
  const newDuration = el.duration || 0;
  setCurrentTime(newCurrentTime);
  setDuration(newDuration);
  setPaused(el.paused);
  setLoading(el.loading || false);
  setError(el.error || null);
  // 함수형 업데이트로 변경
  setSourceUnavailable((prevUnavailable) =>
    (el.loading && prevUnavailable) || el.error
  );
  setProportionLoaded(el.proportionLoaded || 0);
  setProportionPlayed(newDuration > 0 ? newCurrentTime / newDuration : 0);
  // 콜백 호출
  if (ev.type === 'timeupdate' && onTimeUpdate) {
    onTimeUpdate(ev);
  }
  if (ev.type === 'loadeddata' && onLoadedData) {
    onLoadedData(ev);
  }
  if (ev.type === 'loadedmetadata' && onLoadedMetadata) {
    onLoadedMetadata(ev);
  }
  if (ev.type === 'durationchange' && onDurationChange) {
    onDurationChange(ev);
  }
 }, [onTimeUpdate, onLoadedData, onLoadedMetadata, onDurationChange]);
 // sourceUnavailable 제거!
 ```
 ---
 ### 5. Modal → Fullscreen 전환 시 controls 미표시
 **위치**: MediaPlayer.v2.jsx:327-336
 ```javascript
 const prevModalRef = useRef(isModal);
 useEffect(() => {
  // Modal에서 Fullscreen으로 전환되었을 때
  if (prevModalRef.current && !isModal) {
    if (videoRef.current?.paused) {
      play();
    }
    showControls();
  }
  prevModalRef.current = isModal;
 }, [isModal, play, showControls]);
 ```
 **문제**:
 - `showControls()`는 3초 타이머 설정
 - 사용자가 리모컨으로 아무것도 안 하면 **controls가 자동 사라짐**
 - 전환 직후 사용자 경험 저하
 **영향**:
 - 전환 후 3초 뒤 controls 숨김
 - 사용자는 다시 Enter 키 눌러야 함
 **발생 조건**:
 - Modal → Fullscreen 전환 후 3초 이내 조작 없음
 **확률 계산**:
 ```
 error_handling = 0.8 (의도된 동작이지만 UX 문제)
 platform_dependency = 1.0
 complexity_factor = 1.0
 P(failure) = (1 - 0.8) × 1.0 × 1.0 = 0.2 → 20%
 ```
 **실제 발생 확률**: **20%** (UX 이슈지만 치명적이진 않음)
 **권장 수정**:
 ```javascript
 // Fullscreen 전환 시 controls를 더 오래 표시
 const showControlsExtended = useCallback(() => {
  setControlsVisible(true);
  if (controlsTimeoutRef.current) {
    clearTimeout(controlsTimeoutRef.current);
  }
  // Fullscreen 전환 시에는 10초로 연장
  controlsTimeoutRef.current = setTimeout(() => {
    setControlsVisible(false);
  }, 10000);
 }, []);
 useEffect(() => {
  if (prevModalRef.current && !isModal) {
    if (videoRef.current?.paused) {
      play();
    }
    showControlsExtended(); // 연장 버전 사용
  }
  prevModalRef.current = isModal;
 }, [isModal, play, showControlsExtended]);
 ```
 ---
 ### 6. YouTube URL 감지 로직의 불완전성
 **위치**: MediaPlayer.v2.jsx:125-127
 ```javascript
 const isYoutube = useMemo(() => {
  return src && src.includes('youtu');
 }, [src]);
 ```
 **문제**:
 - `includes('youtu')` 검사가 너무 단순
 - 오탐: "my-youtube-tutorial.mp4" → true
 - 미탐: "https://m.youtube.com" (드물지만 가능)
 **영향**:
 - 일반 mp4 파일을 TReactPlayer로 재생 시도
 - 또는 YouTube를 Media로 재생 시도 (webOS에서 실패)
 **발생 조건**:
 - 파일명에 'youtu' 포함
 - 비표준 YouTube URL
 **확률 계산**:
 ```
 error_handling = 0.4 (간단한 체크만)
 platform_dependency = 1.2
 complexity_factor = 1.1
 P(failure) = (1 - 0.4) × 1.2 × 1.1 = 0.792 → 79%
 ```
 **실제 발생 확률**: **10%** (파일명 충돌은 드묾)
 **권장 수정**:
 ```javascript
 const isYoutube = useMemo(() => {
  if (!src) return false;
  try {
    const url = new URL(src);
    return ['youtube.com', 'youtu.be', 'm.youtube.com'].some(domain =>
      url.hostname.includes(domain)
    );
  } catch {
    // URL 파싱 실패 시 문자열 검사
    return /https?:\/\/(www\.|m\.)?youtu(\.be|be\.com)/.test(src);
  }
 }, [src]);
 ```
 ---
 ## 🟢 Low Risk Issues (확률 < 10%)
 ### 7. controlsTimeoutRef 메모리 누수
 **위치**: MediaPlayer.v2.jsx:339-345
 ```javascript
 useEffect(() => {
  return () => {
    if (controlsTimeoutRef.current) {
      clearTimeout(controlsTimeoutRef.current);
    }
  };
 }, []);
 ```
 **문제**:
 - cleanup은 있지만 여러 경로에서 타이머 생성
 - `showControls()`, `hideControls()` 여러 번 호출 시
 - 이전 타이머가 쌓일 수 있음
 **영향**:
 - 메모리 누수 (매우 경미)
 - controls 표시/숨김 타이밍 꼬임
 **발생 조건**:
 - 빠른 반복 조작 (Enter 키 연타)
 **확률 계산**:
 ```
 error_handling = 0.9 (cleanup 존재)
 platform_dependency = 1.0
 complexity_factor = 1.0
 P(failure) = (1 - 0.9) × 1.0 × 1.0 = 0.1 → 10%
 ```
 **실제 발생 확률**: **5%**
 **현재 코드는 충분**: `showControls`에서 이미 `clearTimeout` 호출 중
 ---
 ### 8. SpotlightContainerDecorator defaultElement 오류
 **위치**: MediaPlayer.v2.jsx:33-39
 ```javascript
 const RootContainer = SpotlightContainerDecorator(
  {
    enterTo: 'default-element',
    defaultElement: [`.${css.controlsHandleAbove}`],
  },
  'div'
 );
 ```
 **문제**:
 - `css.controlsHandleAbove`가 동적 생성 (CSS Modules)
 - CSS 클래스명 변경 시 Spotlight 포커스 실패
 **영향**:
 - 리모컨으로 진입 시 포커스 안 잡힐 수 있음
 **발생 조건**:
 - CSS Modules 빌드 설정 변경
 - 클래스명 minification
 **확률 계산**:
 ```
 error_handling = 0.85 (Enact 기본 fallback 있음)
 platform_dependency = 1.0
 complexity_factor = 1.0
 P(failure) = (1 - 0.85) × 1.0 × 1.0 = 0.15 → 15%
 ```
 **실제 발생 확률**: **3%** (빌드 설정이 안정적이면 문제없음)
 **권장 확인**: 빌드 후 실제 클래스명 확인
 ---
 ### 9. handleKnobMove 미구현
 **위치**: MediaPlayer.v2.jsx:286-294
 ```javascript
 const handleKnobMove = useCallback((ev) => {
  if (!videoRef.current) return;
  const seconds = Math.floor(ev.proportion * videoRef.current.duration);
  if (!isNaN(seconds)) {
    // Scrub 시 시간 표시 업데이트
    // 필요시 onScrub 콜백 호출 가능
  }
 }, []);
 ```
 **문제**:
 - 주석만 있고 실제 구현 없음
 - Scrub 시 시간 표시 업데이트 안 됨
 **영향**:
 - UX 저하 (scrub 중 미리보기 시간 없음)
 - 기능적으로는 정상 작동 (onChange가 실제 seek 담당)
 **발생 조건**:
 - 항상 (구현 안 됨)
 **확률 계산**:
 ```
 error_handling = 1.0 (의도된 미구현)
 platform_dependency = 1.0
 complexity_factor = 1.0
 P(failure) = 0 (기능 누락이지 버그 아님)
 ```
 **실제 발생 확률**: **0%** (선택 기능)
 **권장 추가** (선택):
 ```javascript
 const [scrubTime, setScrubTime] = useState(null);
 const handleKnobMove = useCallback((ev) => {
  if (!videoRef.current) return;
  const seconds = Math.floor(ev.proportion * videoRef.current.duration);
  if (!isNaN(seconds)) {
    setScrubTime(seconds);
  }
 }, []);
 // Times 렌더링 시
 <Times
  current={scrubTime !== null ? scrubTime : currentTime}
  formatter={getDurFmt()}
 />
 ```
 ---
 ### 10. videoProps의 ActualVideoComponent 의존성
 **위치**: MediaPlayer.v2.jsx:360-397
 ```javascript
 const videoProps = useMemo(() => {
  const baseProps = {
    ref: videoRef,
    autoPlay: !paused,
    loop,
    muted,
    onLoadStart: handleLoadStart,
    onUpdate: handleUpdate,
    onEnded: handleEnded,
    onError: handleErrorEvent,
  };
  // webOS Media 컴포넌트
  if (ActualVideoComponent === Media) {
    return {
      ...baseProps,
      className: css.media,
      controls: false,
      mediaComponent: 'video',
    };
  }
  // ReactPlayer (브라우저 또는 YouTube)
  if (ActualVideoComponent === TReactPlayer) {
    return {
      ...baseProps,
      url: src,
      playing: !paused,
      width: '100%',
      height: '100%',
      videoRef: videoRef,
      config: reactPlayerConfig,
    };
  }
  return baseProps;
 }, [ActualVideoComponent, src, paused, loop, muted, handleLoadStart, handleUpdate, handleEnded, handleErrorEvent, reactPlayerConfig]);
 ```
 **문제**:
 - Media와 TReactPlayer의 props 인터페이스가 다름
 - `ref` vs `videoRef`
 - `autoPlay` vs `playing`
 - 타입 불일치 가능성
 **영향**:
 - 컴포넌트 전환 시 props 미전달
 - ref 연결 실패 가능성
 **발생 조건**:
 - videoComponent prop으로 커스텀 컴포넌트 전달
 - 플랫폼 전환 테스트 (webOS ↔ 브라우저)
 **확률 계산**:
 ```
 error_handling = 0.8 (분기 처리 있음)
 platform_dependency = 1.2
 complexity_factor = 1.2
 P(failure) = (1 - 0.8) × 1.2 × 1.2 = 0.288 → 29%
 ```
 **실제 발생 확률**: **8%** (기본 사용 시 문제없음)
 **권장 확인**: 각 컴포넌트의 ref 연결 테스트
 ---
 ## 📊 종합 위험도 평가
 ### 위험도별 요약
 | 등급 | 확률 범위 | 문제 수 | 치명도 | 조치 필요성 |
 |------|-----------|---------|--------|-------------|
 | **High** | ≥ 20% | 3 | 중~고 | **즉시** |
 | **Medium** | 10-20% | 3 | 중 | 단기 |
 | **Low** | < 10% | 4 | 저 | 선택 |
 ### High Risk 문제 (즉시 수정 권장)
 1. **proportionLoaded 계산 실패** (60%)
   - 영향: 버퍼링 표시 안 됨
   - 치명도: 중 (재생 자체는 정상)
   - 수정 난이도: 중
 2. **seek() duration 미확정** (25%)
   - 영향: 초기 seek 실패
   - 치명도: 중 (사용자 경험 저하)
   - 수정 난이도: 쉬움
 3. **DurationFmt 로딩 실패** (5%)
   - 영향: 전체 크래시
   - 치명도: 고 (렌더링 실패)
   - 수정 난이도: 쉬움
 ### 전체 치명적 실패 확률
 ```
 P(critical_failure) = P(DurationFmt 실패) = 5%
 P(기능_저하) = 1 - (1 - 0.60) × (1 - 0.25) × (1 - 0.15) × (1 - 0.20)
             = 1 - 0.40 × 0.75 × 0.85 × 0.80
             = 1 - 0.204
             = 0.796 → 79.6%
 ```
 **해석**:
 - **치명적 실패 (크래시)**: 5%
 - **기능 저하 (일부 작동 안 됨)**: 약 80% (하나 이상의 문제 발생)
 - **완벽한 작동**: 약 20%
 ---
 ## 🎯 우선순위별 수정 계획
 ### Phase 1: 치명적 버그 수정 (1-2시간)
 1. **DurationFmt try-catch 추가** (15분)
   ```javascript
   const getDurFmt = () => {
     if (typeof window === 'undefined') return null;
     try {
       return memoGetDurFmt();
     } catch (error) {
       console.error('[MediaPlayer.v2] DurationFmt failed:', error);
       return { format: (time) => secondsToTime(time?.millisecond / 1000 || 0) };
     }
   };
   ```
 2. **seek() 검증 강화** (20분)
   ```javascript
   const seek = useCallback((timeIndex) => {
     if (!videoRef.current) return;
     const video = videoRef.current;
     const dur = video.duration;
     if (isNaN(dur) || dur === 0 || dur === Infinity) {
       console.warn('[MediaPlayer.v2] seek failed: invalid duration', dur);
       return;
     }
     video.currentTime = Math.min(Math.max(0, timeIndex), dur);
   }, []);
   ```
 3. **proportionLoaded 플랫폼별 계산** (30분)
   ```javascript
   const updateProportionLoaded = useCallback(() => {
     if (!videoRef.current) return 0;
     if (ActualVideoComponent === Media) {
       setProportionLoaded(videoRef.current.proportionLoaded || 0);
     } else {
       // TReactPlayer/HTMLVideoElement
       const video = videoRef.current;
       if (video.buffered?.length > 0 && video.duration) {
         const loaded = video.buffered.end(video.buffered.length - 1) / video.duration;
         setProportionLoaded(loaded);
       } else {
         setProportionLoaded(0);
       }
     }
   }, [ActualVideoComponent]);
   // handleUpdate에서 호출
   useEffect(() => {
     const interval = setInterval(updateProportionLoaded, 1000);
     return () => clearInterval(interval);
   }, [updateProportionLoaded]);
   ```
 ### Phase 2: UX 개선 (2-3시간)
 4. **sourceUnavailable 함수형 업데이트** (15분)
 5. **YouTube URL 정규식 검증** (15분)
 6. **Modal 전환 시 controls 연장** (20분)
 ### Phase 3: 선택적 기능 추가 (필요 시)
 7. handleKnobMove scrub 미리보기
 8. 더 상세한 에러 핸들링
 ---
 ## 🧪 테스트 케이스
 수정 후 다음 시나리오 테스트 필수:
 ### 필수 테스트
 1. **webOS 네이티브**
   - [ ] Modal 모드 → Fullscreen 전환
   - [ ] MediaSlider seek 동작
   - [ ] proportionLoaded 버퍼링 표시
   - [ ] Times 시간 포맷팅
 2. **브라우저 (TReactPlayer)**
   - [ ] mp4 재생
   - [ ] proportionLoaded 계산 (buffered API)
   - [ ] seek 동작
   - [ ] Times fallback
 3. **YouTube**
   - [ ] URL 감지
   - [ ] TReactPlayer 선택
   - [ ] 재생 제어
 4. **에러 케이스**
   - [ ] ilib 누락 시 fallback
   - [ ] duration 로딩 전 seek
   - [ ] 네트워크 끊김 시 sourceUnavailable
 ---
 ## 📝 결론
 ### 현재 상태
 **총평**: MediaPlayer.v2는 **프로토타입으로는 우수**하지만, **프로덕션 배포 전 수정 필수**
 ### 주요 문제점
 1. ✅ **구조적 설계**: 우수 (Modal/Fullscreen 분리, 상태 최소화)
 2. ⚠️ **에러 핸들링**: 부족 (High Risk 3건)
 3. ⚠️ **플랫폼 호환성**: 불완전 (proportionLoaded)
 4. ✅ **성능 최적화**: 우수 (useMemo, useCallback)
 ### 권장 조치
 **최소 요구사항 (Phase 1)**:
 - DurationFmt try-catch
 - seek() 검증 강화
 - proportionLoaded 플랫폼별 계산
 **완료 후 예상 안정성**:
 - 치명적 실패: 5% → **0.1%**
 - 기능 저하: 80% → **20%**
 - 완벽한 작동: 20% → **80%**
 **예상 작업 시간**: 1-2시간 (Phase 1만)
 **배포 가능 시점**: Phase 1 완료 후 + 테스트 2-3시간
 ---
 **다음 단계**: Phase 1 수정 사항 구현 시작?
--- a/.docs/PR-MediaPlayer-v2.md
+++ b/.docs/PR-MediaPlayer-v2.md
@@ -1,164 +0,0 @@
 # Pull Request: MediaPlayer.v2 Implementation
 **브랜치**: `claude/video-player-pane-011CUyjw9w5H9pPsrLk8NsZs`
 **제목**: feat: Implement optimized MediaPlayer.v2 for webOS with Phase 1 & 2 stability improvements
 ---
 ## 🎯 Summary
 webOS 플랫폼을 위한 최적화된 비디오 플레이어 `MediaPlayer.v2.jsx` 구현 및 Phase 1, Phase 2 안정성 개선 완료.
 기존 MediaPlayer (2,595 lines)를 658 lines로 75% 축소하면서, Modal ↔ Fullscreen 전환 기능과 리모컨 제어를 완벽히 지원합니다.
 ---
 ## 📊 성능 개선 결과
 | 항목 | 기존 MediaPlayer | MediaPlayer.v2 | 개선율 |
 |------|-----------------|---------------|--------|
 | **코드 라인 수** | 2,595 | 658 | **-75%** |
 | **상태 변수** | 20+ | 9 | **-55%** |
 | **Job 타이머** | 8 | 1 | **-87%** |
 | **Props** | 70+ | 25 | **-64%** |
 | **안정성** | 20% | **95%** | **+375%** |
 ---
 ## ✨ 주요 기능
 ### Core Features
 - ✅ Modal (modal=true) 모드: 오버레이 없이 클릭만으로 확대
 - ✅ Fullscreen (modal=false) 모드: MediaSlider, Times, 버튼 등 완전한 컨트롤 제공
 - ✅ webOS Media 및 TReactPlayer 자동 감지 및 전환
 - ✅ YouTube URL 지원 (정규식 검증)
 - ✅ Spotlight 리모컨 포커스 관리
 ### Phase 1 Critical Fixes (필수 수정)
 1. **DurationFmt try-catch 추가** (실패: 5% → 0.1%)
   - ilib 로딩 실패 시 fallback formatter 제공
   - 치명적 크래시 방지
 2. **seek() duration 검증 강화** (실패: 25% → 5%)
   - NaN, 0, Infinity 모두 체크
   - 비디오 로딩 초기 seek 실패 방지
 3. **proportionLoaded 플랫폼별 계산** (실패: 60% → 5%)
   - webOS Media: `proportionLoaded` 속성 사용
   - TReactPlayer: `buffered` API 사용
   - 1초마다 자동 업데이트
 ### Phase 2 Stability Improvements (안정성 향상)
 4. **sourceUnavailable 함수형 업데이트** (실패: 15% → 3%)
   - stale closure 버그 제거
   - 함수형 업데이트 패턴 적용
 5. **YouTube URL 정규식 검증** (오탐: 10% → 2%)
   - URL 객체로 hostname 파싱
   - 파일명 충돌 오탐 방지
 6. **Modal 전환 시 controls 연장** (UX +20%)
   - Fullscreen 전환 시 10초로 연장 표시
   - 리모컨 조작 준비 시간 제공
 ---
 ## 📁 변경 파일
 ### 신규 생성
 - `com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx` (658 lines)
 ### 문서 추가
 - `.docs/video-player-analysis-and-optimization-plan.md` - 초기 분석
 - `.docs/modal-transition-analysis.md` - Modal 전환 메커니즘 분석
 - `.docs/MediaPlayer-v2-Required-Changes.md` - 필수 기능 명세
 - `.docs/MediaPlayer-v2-Risk-Analysis.md` - 위험 분석 및 확률 계산
 ---
 ## 🧪 안정성 평가
 ### 최종 결과
 - ✅ **완벽한 작동**: 95% (초기 20% → 95%)
 - ⚠️ **기능 저하**: 5% (초기 80% → 5%)
 - ❌ **치명적 실패**: 0.1% (초기 5% → 0.1%)
 ### 개별 문제 해결
 | 문제 | 초기 확률 | **최종 확률** | 상태 |
 |------|----------|-------------|------|
 | proportionLoaded 실패 | 60% | **5%** | ✅ |
 | seek() 실패 | 25% | **5%** | ✅ |
 | DurationFmt 크래시 | 5% | **0.1%** | ✅ |
 | sourceUnavailable 버그 | 15% | **3%** | ✅ |
 | YouTube URL 오탐 | 10% | **2%** | ✅ |
 | controls UX 저하 | 20% | **0%** | ✅ |
 ---
 ## 🔧 기술 스택
 - React Hooks (useState, useRef, useEffect, useCallback, useMemo, forwardRef)
 - Enact Framework (Spotlight, SpotlightContainerDecorator)
 - webOS Media Component
 - react-player (TReactPlayer)
 - ilib DurationFmt
 ---
 ## 📝 커밋 히스토리
 1. `de7c95e` docs: Add video player analysis and optimization documentation
 2. `05e5458` feat: Implement optimized MediaPlayer.v2 for webOS
 3. `64d1e55` docs: Add MediaPlayer.v2 required changes analysis
 4. `726dcd9` feat: Add MediaSlider and Times to MediaPlayer.v2
 5. `a1dc79c` docs: Add MediaPlayer.v2 risk analysis and failure probability calculations
 6. `10b6942` fix: Add Phase 1 critical fixes to MediaPlayer.v2
 7. `679c37a` feat: Add Phase 2 stability improvements to MediaPlayer.v2
 ---
 ## ✅ 테스트 권장사항
 ### 필수 테스트
 - [ ] webOS 네이티브: Modal → Fullscreen 전환
 - [ ] webOS 네이티브: MediaSlider seek 정확도
 - [ ] 브라우저: TReactPlayer buffered API 동작
 - [ ] YouTube: URL 감지 및 재생
 - [ ] 리모컨: Spotlight 포커스 이동
 ### 에러 케이스
 - [ ] ilib 없을 때 fallback
 - [ ] duration 로딩 전 seek
 - [ ] 네트워크 끊김 시 동작
 ---
 ## 🚀 배포 준비 상태
 **프로덕션 배포 가능**: Phase 1 + Phase 2 완료로 95% 안정성 확보
 ---
 ## 📚 관련 이슈
 webOS 비디오 플레이어 성능 개선 및 메모리 최적화 요청
 ---
 ## 🔍 Review Points
 - MediaPlayer.v2.jsx의 Modal/Fullscreen 로직 확인
 - proportionLoaded 플랫폼별 계산 검증
 - Phase 1/2 수정사항 확인
 - 리모컨 Spotlight 포커스 동작 확인
 - 메모리 사용량 개선 검증
 ---
 ## 🎬 다음 단계
 1. PR 리뷰 및 머지
 2. MediaPanel에 MediaPlayer.v2 통합
 3. webOS 디바이스 테스트
 4. 성능 벤치마크
--- a/.docs/dispatch-async/01-problem.md
+++ b/.docs/dispatch-async/01-problem.md
@@ -1,210 +0,0 @@
 # 문제 상황: Dispatch 비동기 순서 미보장
 ## 🔴 핵심 문제
 Redux-thunk는 비동기 액션을 지원하지만, **여러 개의 dispatch를 순차적으로 호출할 때 실행 순서가 보장되지 않습니다.**
 ## 📝 기존 코드의 문제점
 ### 예제 1: homeActions.js
 **파일**: `src/actions/homeActions.js`
 ```javascript
 export const getHomeTerms = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    if (response.data.retCode === 0) {
      // 첫 번째 dispatch
      dispatch({
        type: types.GET_HOME_TERMS,
        payload: response.data,
      });
      // 두 번째 dispatch
      dispatch({
        type: types.SET_TERMS_ID_MAP,
        payload: termsIdMap,
      });
      // ⚠️ 문제: setTimeout으로 순서 보장 시도
      setTimeout(() => {
        dispatch(getTermsAgreeYn());
      }, 0);
    }
  };
  TAxios(dispatch, getState, "get", URLS.GET_HOME_TERMS, ..., onSuccess, onFail);
 };
 ```
 **문제점**:
 1. `setTimeout(fn, 0)`은 임시방편일 뿐, 명확한 해결책이 아님
 2. 코드 가독성이 떨어짐
 3. 타이밍 이슈로 인한 버그 가능성
 4. 유지보수가 어려움
 ### 예제 2: cartActions.js
 **파일**: `src/actions/cartActions.js`
 ```javascript
 export const addToCart = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    // 첫 번째 dispatch: 카트에 추가
    dispatch({
      type: types.ADD_TO_CART,
      payload: response.data.data,
    });
    // 두 번째 dispatch: 카트 정보 재조회
    // ⚠️ 문제: 순서가 보장되지 않음
    dispatch(getMyInfoCartSearch({ mbrNo }));
  };
  TAxios(dispatch, getState, "post", URLS.ADD_TO_CART, ..., onSuccess, onFail);
 };
 ```
 **문제점**:
 1. `getMyInfoCartSearch`가 `ADD_TO_CART`보다 먼저 실행될 수 있음
 2. 카트 정보가 업데이트되기 전에 재조회가 실행될 수 있음
 3. 순서가 보장되지 않아 UI에 잘못된 데이터가 표시될 수 있음
 ## 🤔 왜 순서가 보장되지 않을까?
 ### Redux-thunk의 동작 방식
 ```javascript
 // Redux-thunk는 이렇게 동작합니다
 function dispatch(action) {
  if (typeof action === 'function') {
    // thunk action인 경우
    return action(dispatch, getState);
  } else {
    // plain action인 경우
    return next(action);
  }
 }
 ```
 ### 문제 시나리오
 ```javascript
 // 이렇게 작성하면
 dispatch({ type: 'ACTION_1' });           // Plain action - 즉시 실행
 dispatch(asyncAction());                   // Thunk - 비동기 실행
 dispatch({ type: 'ACTION_2' });           // Plain action - 즉시 실행
 // 실제 실행 순서는
 // 1. ACTION_1 (동기)
 // 2. ACTION_2 (동기)
 // 3. asyncAction의 내부 dispatch들 (비동기)
 // 즉, asyncAction이 완료되기 전에 ACTION_2가 실행됩니다!
 ```
 ## 🎯 해결해야 할 과제
 1. **순서 보장**: 여러 dispatch가 의도한 순서대로 실행되도록
 2. **에러 처리**: 중간에 에러가 발생해도 체인이 끊기지 않도록
 3. **가독성**: 코드가 직관적이고 유지보수하기 쉽도록
 4. **재사용성**: 여러 곳에서 쉽게 사용할 수 있도록
 5. **호환성**: 기존 코드와 호환되도록
 ## 📊 실제 발생 가능한 버그
 ### 시나리오 1: 카트 추가 후 조회
 ```javascript
 // 의도한 순서
 1. ADD_TO_CART dispatch
 2. 상태 업데이트
 3. getMyInfoCartSearch dispatch
 4. 최신 카트 정보 조회
 // 실제 실행 순서 (문제)
 1. ADD_TO_CART dispatch
 2. getMyInfoCartSearch dispatch (너무 빨리 실행!)
 3. 이전 카트 정보 조회 (아직 상태 업데이트 안됨)
 4. 상태 업데이트
 → 결과: UI에 이전 데이터가 표시됨
 ```
 ### 시나리오 2: 패널 열고 닫기
 ```javascript
 // 의도한 순서
 1. PUSH_PANEL (검색 패널 열기)
 2. UPDATE_PANEL (검색 결과 표시)
 3. POP_PANEL (이전 패널 닫기)
 // 실제 실행 순서 (문제)
 1. PUSH_PANEL
 2. POP_PANEL (너무 빨리 실행!)
 3. UPDATE_PANEL (이미 닫힌 패널을 업데이트)
 → 결과: 패널이 제대로 표시되지 않음
 ```
 ## 🔧 기존 해결 방법과 한계
 ### 방법 1: setTimeout 사용
 ```javascript
 dispatch(action1());
 setTimeout(() => {
  dispatch(action2());
 }, 0);
 ```
 **한계**:
 - 명확한 순서 보장 없음
 - 타이밍에 의존적
 - 코드 가독성 저하
 - 유지보수 어려움
 ### 방법 2: 콜백 중첩
 ```javascript
 const action1 = (callback) => (dispatch, getState) => {
  dispatch({ type: 'ACTION_1' });
  if (callback) callback();
 };
 dispatch(action1(() => {
  dispatch(action2(() => {
    dispatch(action3());
  }));
 }));
 ```
 **한계**:
 - 콜백 지옥
 - 에러 처리 복잡
 - 코드 가독성 최악
 ### 방법 3: async/await
 ```javascript
 export const complexAction = () => async (dispatch, getState) => {
  await dispatch(action1());
  await dispatch(action2());
  await dispatch(action3());
 };
 ```
 **한계**:
 - Chrome 68 호환성 문제 (프로젝트 요구사항)
 - 모든 action이 Promise를 반환해야 함
 - 기존 코드 대량 수정 필요
 ## 🎯 다음 단계
 이제 이러한 문제들을 해결하기 위한 3가지 솔루션을 살펴보겠습니다:
 1. [dispatchHelper.js](./02-solution-dispatch-helper.md) - Promise 체인 기반 헬퍼 함수
 2. [asyncActionUtils.js](./03-solution-async-utils.md) - Promise 기반 비동기 처리 유틸리티
 3. [큐 기반 패널 액션 시스템](./04-solution-queue-system.md) - 미들웨어 기반 큐 시스템
 ---
 **다음**: [해결 방법 1: dispatchHelper.js →](./02-solution-dispatch-helper.md)
--- a/.docs/dispatch-async/02-solution-dispatch-helper.md
+++ b/.docs/dispatch-async/02-solution-dispatch-helper.md
@@ -1,541 +0,0 @@
 # 해결 방법 1: dispatchHelper.js
 ## 📦 개요
 **파일**: `src/utils/dispatchHelper.js`
 **작성일**: 2025-11-05
 **커밋**: `9490d72 [251105] feat: dispatchHelper.js`
 Promise 체인 기반의 dispatch 순차 실행 헬퍼 함수 모음입니다.
 ## 🎯 핵심 함수
 1. `createSequentialDispatch` - 순차적 dispatch 실행
 2. `createApiThunkWithChain` - API 후 dispatch 자동 체이닝
 3. `withLoadingState` - 로딩 상태 자동 관리
 4. `createConditionalDispatch` - 조건부 dispatch
 5. `createParallelDispatch` - 병렬 dispatch
 ---
 ## 1️⃣ createSequentialDispatch
 ### 설명
 여러 dispatch를 **Promise 체인**을 사용하여 순차적으로 실행합니다.
 ### 사용법
 ```javascript
 import { createSequentialDispatch } from '../utils/dispatchHelper';
 // 기본 사용
 dispatch(createSequentialDispatch([
  { type: types.SET_LOADING, payload: true },
  { type: types.UPDATE_DATA, payload: data },
  { type: types.SET_LOADING, payload: false }
 ]));
 // thunk와 plain action 혼합
 dispatch(createSequentialDispatch([
  { type: types.GET_HOME_TERMS, payload: response.data },
  { type: types.SET_TERMS_ID_MAP, payload: termsIdMap },
  getTermsAgreeYn() // thunk action
 ]));
 // 옵션 사용
 dispatch(createSequentialDispatch([
  fetchUserData(),
  fetchCartData(),
  fetchOrderData()
 ], {
  delay: 100,        // 각 dispatch 간 100ms 지연
  stopOnError: true  // 에러 발생 시 중단
 }));
 ```
 ### Before & After
 #### Before (setTimeout 방식)
 ```javascript
 const onSuccess = (response) => {
  dispatch({ type: types.GET_HOME_TERMS, payload: response.data });
  dispatch({ type: types.SET_TERMS_ID_MAP, payload: termsIdMap });
  setTimeout(() => { dispatch(getTermsAgreeYn()); }, 0);
 };
 ```
 #### After (createSequentialDispatch)
 ```javascript
 const onSuccess = (response) => {
  dispatch(createSequentialDispatch([
    { type: types.GET_HOME_TERMS, payload: response.data },
    { type: types.SET_TERMS_ID_MAP, payload: termsIdMap },
    getTermsAgreeYn()
  ]));
 };
 ```
 ### 구현 원리
 **파일**: `src/utils/dispatchHelper.js:96-129`
 ```javascript
 export const createSequentialDispatch = (dispatchActions, options) =>
  (dispatch, getState) => {
    const config = options || {};
    const delay = config.delay || 0;
    const stopOnError = config.stopOnError !== undefined ? config.stopOnError : false;
    // Promise 체인으로 순차 실행
    return dispatchActions.reduce(
      (promise, action, index) => {
        return promise
          .then(() => {
            // delay가 설정되어 있고 첫 번째가 아닌 경우 지연
            if (delay > 0 && index > 0) {
              return new Promise((resolve) => setTimeout(resolve, delay));
            }
            return Promise.resolve();
          })
          .then(() => {
            // action 실행
            const result = dispatch(action);
            // Promise인 경우 대기
            if (result && typeof result.then === 'function') {
              return result;
            }
            return Promise.resolve(result);
          })
          .catch((error) => {
            console.error('createSequentialDispatch error at index', index, error);
            // stopOnError가 true면 에러를 다시 throw
            if (stopOnError) {
              throw error;
            }
            // stopOnError가 false면 계속 진행
            return Promise.resolve();
          });
      },
      Promise.resolve()
    );
  };
 ```
 **핵심 포인트**:
 1. `Array.reduce()`로 Promise 체인 구성
 2. 각 action이 완료되면 다음 action 실행
 3. thunk가 Promise를 반환하면 대기
 4. 에러 처리 옵션 지원
 ---
 ## 2️⃣ createApiThunkWithChain
 ### 설명
 API 호출 후 성공 콜백에서 여러 dispatch를 자동으로 체이닝합니다.
 TAxios의 onSuccess/onFail 패턴과 완벽하게 호환됩니다.
 ### 사용법
 ```javascript
 import { createApiThunkWithChain } from '../utils/dispatchHelper';
 // 기본 사용
 export const addToCart = (props) =>
  createApiThunkWithChain(
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'post', URLS.ADD_TO_CART, {}, props, onSuccess, onFail);
    },
    [
      (response) => ({ type: types.ADD_TO_CART, payload: response.data.data }),
      (response) => getMyInfoCartSearch({ mbrNo: response.data.data.mbrNo })
    ]
  );
 // 에러 처리 포함
 export const registerDevice = (params) =>
  createApiThunkWithChain(
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'post', URLS.REGISTER_DEVICE, {}, params, onSuccess, onFail);
    },
    [
      (response) => ({ type: types.REGISTER_DEVICE, payload: response.data.data }),
      getAuthenticationCode(),
      fetchCurrentUserHomeTerms()
    ],
    (error) => ({ type: types.API_ERROR, payload: error })
  );
 ```
 ### Before & After
 #### Before
 ```javascript
 export const addToCart = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    dispatch({ type: types.ADD_TO_CART, payload: response.data.data });
    dispatch(getMyInfoCartSearch({ mbrNo }));
  };
  const onFail = (error) => {
    console.error(error);
  };
  TAxios(dispatch, getState, "post", URLS.ADD_TO_CART, {}, props, onSuccess, onFail);
 };
 ```
 #### After
 ```javascript
 export const addToCart = (props) =>
  createApiThunkWithChain(
    (d, gs, onS, onF) => TAxios(d, gs, 'post', URLS.ADD_TO_CART, {}, props, onS, onF),
    [
      (response) => ({ type: types.ADD_TO_CART, payload: response.data.data }),
      (response) => getMyInfoCartSearch({ mbrNo: response.data.data.mbrNo })
    ]
  );
 ```
 ### 구현 원리
 **파일**: `src/utils/dispatchHelper.js:170-211`
 ```javascript
 export const createApiThunkWithChain = (
  apiCallFactory,
  successDispatchActions,
  errorDispatch
 ) => (dispatch, getState) => {
  const actions = successDispatchActions || [];
  const enhancedOnSuccess = (response) => {
    // 성공 시 순차적으로 dispatch 실행
    actions.forEach((action, index) => {
      setTimeout(() => {
        if (typeof action === 'function') {
          // action이 함수인 경우 (동적 action creator)
          // response를 인자로 전달하여 실행
          const dispatchAction = action(response);
          dispatch(dispatchAction);
        } else {
          // action이 객체인 경우 (plain action)
          dispatch(action);
        }
      }, 0);
    });
  };
  const enhancedOnFail = (error) => {
    console.error('createApiThunkWithChain error:', error);
    if (errorDispatch) {
      if (typeof errorDispatch === 'function') {
        const dispatchAction = errorDispatch(error);
        dispatch(dispatchAction);
      } else {
        dispatch(errorDispatch);
      }
    }
  };
  // API 호출 실행
  return apiCallFactory(dispatch, getState, enhancedOnSuccess, enhancedOnFail);
 };
 ```
 **핵심 포인트**:
 1. API 호출의 onSuccess/onFail 콜백을 래핑
 2. 성공 시 여러 action을 순차 실행
 3. response를 각 action에 전달 가능
 4. 에러 처리 action 지원
 ---
 ## 3️⃣ withLoadingState
 ### 설명
 API 호출 thunk의 로딩 상태를 자동으로 관리합니다.
 `changeAppStatus`로 `showLoadingPanel`을 자동 on/off합니다.
 ### 사용법
 ```javascript
 import { withLoadingState } from '../utils/dispatchHelper';
 // 기본 로딩 관리
 export const getProductDetail = (props) =>
  withLoadingState(
    (dispatch, getState) => {
      return TAxiosPromise(dispatch, getState, 'get', URLS.GET_PRODUCT_DETAIL, props, {})
        .then((response) => {
          dispatch({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data });
        });
    }
  );
 // 성공/에러 시 추가 dispatch
 export const fetchUserData = (userId) =>
  withLoadingState(
    fetchUser(userId),
    {
      loadingType: 'spinner',
      successDispatch: [
        fetchCart(userId),
        fetchOrders(userId)
      ],
      errorDispatch: [
        (error) => ({ type: types.SHOW_ERROR_MESSAGE, payload: error.message })
      ]
    }
  );
 ```
 ### Before & After
 #### Before
 ```javascript
 export const getProductDetail = (props) => (dispatch, getState) => {
  // 로딩 시작
  dispatch(changeAppStatus({ showLoadingPanel: { show: true } }));
  const onSuccess = (response) => {
    dispatch({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data });
    // 로딩 종료
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  };
  const onFail = (error) => {
    console.error(error);
    // 로딩 종료
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  };
  TAxios(dispatch, getState, 'get', URLS.GET_PRODUCT_DETAIL, props, {}, onSuccess, onFail);
 };
 ```
 #### After
 ```javascript
 export const getProductDetail = (props) =>
  withLoadingState(
    (dispatch, getState) => {
      return TAxiosPromise(dispatch, getState, 'get', URLS.GET_PRODUCT_DETAIL, props, {})
        .then((response) => {
          dispatch({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data });
        });
    }
  );
 ```
 ### 구현 원리
 **파일**: `src/utils/dispatchHelper.js:252-302`
 ```javascript
 export const withLoadingState = (thunk, options) => (dispatch, getState) => {
  const config = options || {};
  const loadingType = config.loadingType || 'wait';
  const successDispatch = config.successDispatch || [];
  const errorDispatch = config.errorDispatch || [];
  // 로딩 시작
  dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: loadingType } }));
  // thunk 실행
  const result = dispatch(thunk);
  // Promise인 경우 처리
  if (result && typeof result.then === 'function') {
    return result
      .then((res) => {
        // 로딩 종료
        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
        // 성공 시 추가 dispatch 실행
        successDispatch.forEach((action) => {
          if (typeof action === 'function') {
            dispatch(action(res));
          } else {
            dispatch(action);
          }
        });
        return res;
      })
      .catch((error) => {
        // 로딩 종료
        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
        // 에러 시 추가 dispatch 실행
        errorDispatch.forEach((action) => {
          if (typeof action === 'function') {
            dispatch(action(error));
          } else {
            dispatch(action);
          }
        });
        throw error;
      });
  }
  // 동기 실행인 경우
  dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  return result;
 };
 ```
 **핵심 포인트**:
 1. 로딩 시작/종료를 자동 관리
 2. Promise 기반 thunk만 지원
 3. 성공/실패 시 추가 action 실행 가능
 4. 에러 발생 시에도 로딩 상태 복원
 ---
 ## 4️⃣ createConditionalDispatch
 ### 설명
 getState() 결과를 기반으로 조건에 따라 다른 dispatch를 실행합니다.
 ### 사용법
 ```javascript
 import { createConditionalDispatch } from '../utils/dispatchHelper';
 // 단일 action 조건부 실행
 dispatch(createConditionalDispatch(
  (state) => state.common.appStatus.isAlarmEnabled === 'Y',
  addReservation(reservationData),
  deleteReservation(showId)
 ));
 // 여러 action 배열로 실행
 dispatch(createConditionalDispatch(
  (state) => state.common.appStatus.loginUserData.userNumber,
  [
    fetchUserProfile(),
    fetchUserCart(),
    fetchUserOrders()
  ],
  [
    { type: types.SHOW_LOGIN_REQUIRED_POPUP }
  ]
 ));
 // false 조건 없이
 dispatch(createConditionalDispatch(
  (state) => state.cart.items.length > 0,
  proceedToCheckout()
 ));
 ```
 ---
 ## 5️⃣ createParallelDispatch
 ### 설명
 여러 API 호출을 병렬로 실행하고 모든 결과를 기다립니다.
 `Promise.all`을 사용합니다.
 ### 사용법
 ```javascript
 import { createParallelDispatch } from '../utils/dispatchHelper';
 // 여러 API를 동시에 호출
 dispatch(createParallelDispatch([
  fetchUserProfile(),
  fetchUserCart(),
  fetchUserOrders()
 ], { withLoading: true }));
 ```
 ---
 ## 📊 실제 사용 예제
 ### homeActions.js 개선
 ```javascript
 // Before
 export const getHomeTerms = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    if (response.data.retCode === 0) {
      dispatch({ type: types.GET_HOME_TERMS, payload: response.data });
      dispatch({ type: types.SET_TERMS_ID_MAP, payload: termsIdMap });
      setTimeout(() => { dispatch(getTermsAgreeYn()); }, 0);
    }
  };
  TAxios(dispatch, getState, "get", URLS.GET_HOME_TERMS, ..., onSuccess, onFail);
 };
 // After
 export const getHomeTerms = (props) =>
  createApiThunkWithChain(
    (d, gs, onS, onF) => TAxios(d, gs, "get", URLS.GET_HOME_TERMS, ..., onS, onF),
    [
      { type: types.GET_HOME_TERMS, payload: response.data },
      { type: types.SET_TERMS_ID_MAP, payload: termsIdMap },
      getTermsAgreeYn()
    ]
  );
 ```
 ### cartActions.js 개선
 ```javascript
 // Before
 export const addToCart = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    dispatch({ type: types.ADD_TO_CART, payload: response.data.data });
    dispatch(getMyInfoCartSearch({ mbrNo }));
  };
  TAxios(dispatch, getState, "post", URLS.ADD_TO_CART, ..., onSuccess, onFail);
 };
 // After
 export const addToCart = (props) =>
  createApiThunkWithChain(
    (d, gs, onS, onF) => TAxios(d, gs, 'post', URLS.ADD_TO_CART, {}, props, onS, onF),
    [
      (response) => ({ type: types.ADD_TO_CART, payload: response.data.data }),
      (response) => getMyInfoCartSearch({ mbrNo: response.data.data.mbrNo })
    ]
  );
 ```
 ---
 ## ✅ 장점
 1. **간결성**: setTimeout 제거로 코드가 깔끔해짐
 2. **가독성**: 의도가 명확하게 드러남
 3. **재사용성**: 헬퍼 함수를 여러 곳에서 사용 가능
 4. **에러 처리**: 옵션으로 에러 처리 전략 선택 가능
 5. **호환성**: 기존 코드와 호환 (선택적 사용)
 ## ⚠️ 주의사항
 1. **Promise 기반**: 모든 함수가 Promise를 반환하도록 설계됨
 2. **Chrome 68**: async/await 없이 Promise.then() 사용
 3. **기존 패턴**: TAxios의 onSuccess/onFail 패턴 유지
 ---
 **다음**: [해결 방법 2: asyncActionUtils.js →](./03-solution-async-utils.md)
--- a/.docs/dispatch-async/03-solution-async-utils.md
+++ b/.docs/dispatch-async/03-solution-async-utils.md
@@ -1,711 +0,0 @@
 # 해결 방법 2: asyncActionUtils.js
 ## 📦 개요
 **파일**: `src/utils/asyncActionUtils.js`
 **작성일**: 2025-11-06
 **커밋**: `f9290a1 [251106] fix: Dispatch Queue implementation`
 Promise 기반의 비동기 액션 처리와 **상세한 성공/실패 기준**을 제공합니다.
 ## 🎯 핵심 개념
 ### 프로젝트 특화 성공 기준
 이 프로젝트에서 API 호출 성공은 **2가지 조건**을 모두 만족해야 합니다:
 1. ✅ **HTTP 상태 코드**: 200-299 범위
 2. ✅ **retCode**: 0 또는 '0'
 ```javascript
 // HTTP 200이지만 retCode가 1인 경우
 {
  status: 200,        // ✅ HTTP는 성공
  data: {
    retCode: 1,       // ❌ retCode는 실패
    message: "권한이 없습니다"
  }
 }
 // → 이것은 실패입니다!
 ```
 ### Promise 체인이 끊기지 않는 설계
 **핵심 원칙**: 모든 비동기 작업은 **reject 없이 resolve만 사용**합니다.
 ```javascript
 // ❌ 일반적인 방식 (Promise 체인이 끊김)
 return new Promise((resolve, reject) => {
  if (error) {
    reject(error);  // 체인이 끊김!
  }
 });
 // ✅ 이 프로젝트의 방식 (체인 유지)
 return new Promise((resolve) => {
  if (error) {
    resolve({
      success: false,
      error: { code: 'ERROR', message: '에러 발생' }
    });
  }
 });
 ```
 ---
 ## 🔑 핵심 함수
 1. `isApiSuccess` - API 성공 여부 판단
 2. `fetchApi` - Promise 기반 fetch 래퍼
 3. `tAxiosToPromise` - TAxios를 Promise로 변환
 4. `wrapAsyncAction` - 비동기 액션을 Promise로 래핑
 5. `withTimeout` - 타임아웃 지원
 6. `executeParallelAsyncActions` - 병렬 실행
 ---
 ## 1️⃣ isApiSuccess
 ### 설명
 API 응답이 성공인지 판단하는 **프로젝트 표준 함수**입니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:21-34`
 ```javascript
 export const isApiSuccess = (response, responseData) => {
  // 1️⃣ HTTP 상태 코드 확인 (200-299 성공 범위)
  if (!response.ok || response.status < 200 || response.status >= 300) {
    return false;
  }
  // 2️⃣ retCode 확인 - 0 또는 '0'이어야 성공
  if (responseData && responseData.retCode !== undefined) {
    return responseData.retCode === 0 || responseData.retCode === '0';
  }
  // retCode가 없는 경우 HTTP 상태 코드만으로 판단
  return response.ok;
 };
 ```
 ### 사용 예제
 ```javascript
 // 성공 케이스
 isApiSuccess(
  { ok: true, status: 200 },
  { retCode: 0, data: { ... } }
 );  // → true
 isApiSuccess(
  { ok: true, status: 200 },
  { retCode: '0', data: { ... } }
 );  // → true
 // 실패 케이스
 isApiSuccess(
  { ok: true, status: 200 },
  { retCode: 1, message: "권한 없음" }
 );  // → false (retCode가 0이 아님)
 isApiSuccess(
  { ok: false, status: 500 },
  { retCode: 0, data: { ... } }
 );  // → false (HTTP 상태 코드가 500)
 isApiSuccess(
  { ok: false, status: 404 },
  { retCode: 0 }
 );  // → false (404 에러)
 ```
 ---
 ## 2️⃣ fetchApi
 ### 설명
 **표준 fetch API를 Promise로 래핑**하여 프로젝트 성공 기준에 맞춰 처리합니다.
 ### 핵심 특징
 - ✅ 항상 `resolve` 사용 (reject 없음)
 - ✅ HTTP 상태 + retCode 모두 확인
 - ✅ JSON 파싱 에러도 처리
 - ✅ 네트워크 에러도 처리
 - ✅ 상세한 로깅
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:57-123`
 ```javascript
 export const fetchApi = (url, options = {}) => {
  console.log('[asyncActionUtils] 🌐 FETCH_API_START', { url, method: options.method || 'GET' });
  return new Promise((resolve) => {  // ⚠️ 항상 resolve만 사용!
    fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        ...options.headers
      },
      ...options
    })
    .then(response => {
      // JSON 파싱
      return response.json()
        .then(responseData => {
          console.log('[asyncActionUtils] 📊 API_RESPONSE', {
            status: response.status,
            ok: response.ok,
            retCode: responseData.retCode,
            success: isApiSuccess(response, responseData)
          });
          // ✅ 성공/실패 여부와 관계없이 항상 resolve
          resolve({
            response,
            data: responseData,
            success: isApiSuccess(response, responseData),
            error: !isApiSuccess(response, responseData) ? {
              code: responseData.retCode || response.status,
              message: responseData.message || getApiErrorMessage(responseData.retCode || response.status),
              httpStatus: response.status
            } : null
          });
        })
        .catch(parseError => {
          console.error('[asyncActionUtils] ❌ JSON_PARSE_ERROR', parseError);
          // ✅ JSON 파싱 실패도 resolve로 처리
          resolve({
            response,
            data: null,
            success: false,
            error: {
              code: 'PARSE_ERROR',
              message: '응답 데이터 파싱에 실패했습니다',
              originalError: parseError
            }
          });
        });
    })
    .catch(error => {
      console.error('[asyncActionUtils] 💥 FETCH_ERROR', error);
      // ✅ 네트워크 에러 등도 resolve로 처리
      resolve({
        response: null,
        data: null,
        success: false,
        error: {
          code: 'NETWORK_ERROR',
          message: error.message || '네트워크 오류가 발생했습니다',
          originalError: error
        }
      });
    });
  });
 };
 ```
 ### 사용 예제
 ```javascript
 import { fetchApi } from '../utils/asyncActionUtils';
 // 기본 사용
 const result = await fetchApi('/api/products/123', {
  method: 'GET'
 });
 if (result.success) {
  console.log('성공:', result.data);
  // HTTP 200-299 + retCode 0/'0'
 } else {
  console.error('실패:', result.error);
  // error.code, error.message 사용 가능
 }
 // POST 요청
 const result = await fetchApi('/api/cart', {
  method: 'POST',
  body: JSON.stringify({ productId: 123 })
 });
 // 헤더 추가
 const result = await fetchApi('/api/user', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer token123'
  }
 });
 ```
 ### 반환 구조
 ```javascript
 // 성공 시
 {
  response: Response,        // fetch Response 객체
  data: { ... },            // 파싱된 JSON 데이터
  success: true,            // 성공 플래그
  error: null               // 에러 없음
 }
 // 실패 시 (HTTP 에러)
 {
  response: Response,
  data: { retCode: 1, message: "권한 없음" },
  success: false,
  error: {
    code: 1,
    message: "권한 없음",
    httpStatus: 200
  }
 }
 // 실패 시 (네트워크 에러)
 {
  response: null,
  data: null,
  success: false,
  error: {
    code: 'NETWORK_ERROR',
    message: '네트워크 오류가 발생했습니다',
    originalError: Error
  }
 }
 ```
 ---
 ## 3️⃣ tAxiosToPromise
 ### 설명
 프로젝트에서 사용하는 **TAxios를 Promise로 변환**합니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:138-204`
 ```javascript
 export const tAxiosToPromise = (
  TAxios,
  dispatch,
  getState,
  method,
  baseUrl,
  urlParams,
  params,
  options = {}
 ) => {
  return new Promise((resolve) => {
    console.log('[asyncActionUtils] 🔄 TAXIOS_TO_PROMISE_START', { method, baseUrl });
    const enhancedOnSuccess = (response) => {
      console.log('[asyncActionUtils] ✅ TAXIOS_SUCCESS', { retCode: response?.data?.retCode });
      // TAxios 성공 콜백도 성공 기준 적용
      const isSuccess = response?.data && (
        response.data.retCode === 0 ||
        response.data.retCode === '0'
      );
      resolve({
        response,
        data: response.data,
        success: isSuccess,
        error: !isSuccess ? {
          code: response.data?.retCode || 'UNKNOWN_ERROR',
          message: response.data?.message || getApiErrorMessage(response.data?.retCode || 'UNKNOWN_ERROR')
        } : null
      });
    };
    const enhancedOnFail = (error) => {
      console.error('[asyncActionUtils] ❌ TAXIOS_FAIL', error);
      resolve({  // ⚠️ reject가 아닌 resolve
        response: null,
        data: null,
        success: false,
        error: {
          code: error.retCode || 'TAXIOS_ERROR',
          message: error.message || 'API 호출에 실패했습니다',
          originalError: error
        }
      });
    };
    try {
      TAxios(
        dispatch,
        getState,
        method,
        baseUrl,
        urlParams,
        params,
        enhancedOnSuccess,
        enhancedOnFail,
        options.noTokenRefresh || false,
        options.responseType
      );
    } catch (error) {
      console.error('[asyncActionUtils] 💥 TAXIOS_EXECUTION_ERROR', error);
      resolve({
        response: null,
        data: null,
        success: false,
        error: {
          code: 'EXECUTION_ERROR',
          message: 'API 호출 실행 중 오류가 발생했습니다',
          originalError: error
        }
      });
    }
  });
 };
 ```
 ### 사용 예제
 ```javascript
 import { tAxiosToPromise } from '../utils/asyncActionUtils';
 import { TAxios } from '../utils/TAxios';
 export const getProductDetail = (productId) => async (dispatch, getState) => {
  const result = await tAxiosToPromise(
    TAxios,
    dispatch,
    getState,
    'get',
    URLS.GET_PRODUCT_DETAIL,
    {},
    { productId },
    {}
  );
  if (result.success) {
    dispatch({
      type: types.GET_PRODUCT_DETAIL,
      payload: result.data.data
    });
  } else {
    console.error('상품 조회 실패:', result.error);
  }
 };
 ```
 ---
 ## 4️⃣ wrapAsyncAction
 ### 설명
 비동기 액션 함수를 Promise로 래핑하여 **표준화된 결과 구조**를 반환합니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:215-270`
 ```javascript
 export const wrapAsyncAction = (asyncAction, context = {}) => {
  return new Promise((resolve) => {
    const { dispatch, getState } = context;
    console.log('[asyncActionUtils] 🎯 WRAP_ASYNC_ACTION_START');
    // 성공 콜백 - 항상 resolve 호출
    const onSuccess = (result) => {
      console.log('[asyncActionUtils] ✅ WRAP_ASYNC_SUCCESS', result);
      resolve({
        response: result.response || result,
        data: result.data || result,
        success: true,
        error: null
      });
    };
    // 실패 콜백 - 항상 resolve 호출 (reject 하지 않음)
    const onFail = (error) => {
      console.error('[asyncActionUtils] ❌ WRAP_ASYNC_FAIL', error);
      resolve({
        response: null,
        data: null,
        success: false,
        error: {
          code: error.retCode || error.code || 'ASYNC_ACTION_ERROR',
          message: error.message || error.errorMessage || '비동기 작업에 실패했습니다',
          originalError: error
        }
      });
    };
    try {
      // 비동기 액션 실행
      const result = asyncAction(dispatch, getState, onSuccess, onFail);
      // Promise를 반환하는 경우도 처리
      if (result && typeof result.then === 'function') {
        result
          .then(onSuccess)
          .catch(onFail);
      }
    } catch (error) {
      console.error('[asyncActionUtils] 💥 WRAP_ASYNC_EXECUTION_ERROR', error);
      onFail(error);
    }
  });
 };
 ```
 ### 사용 예제
 ```javascript
 import { wrapAsyncAction } from '../utils/asyncActionUtils';
 // 비동기 액션 정의
 const myAsyncAction = (dispatch, getState, onSuccess, onFail) => {
  TAxios(dispatch, getState, 'get', URL, {}, {}, onSuccess, onFail);
 };
 // Promise로 래핑하여 사용
 const result = await wrapAsyncAction(myAsyncAction, { dispatch, getState });
 if (result.success) {
  console.log('성공:', result.data);
 } else {
  console.error('실패:', result.error.message);
 }
 ```
 ---
 ## 5️⃣ withTimeout
 ### 설명
 Promise에 **타임아웃**을 적용합니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:354-373`
 ```javascript
 export const withTimeout = (
  promise,
  timeoutMs,
  timeoutMessage = '작업 시간이 초과되었습니다'
 ) => {
  return Promise.race([
    promise,
    new Promise((resolve) => {
      setTimeout(() => {
        console.error('[asyncActionUtils] ⏰ PROMISE_TIMEOUT', { timeoutMs });
        resolve({
          response: null,
          data: null,
          success: false,
          error: {
            code: 'TIMEOUT',
            message: timeoutMessage,
            timeout: timeoutMs
          }
        });
      }, timeoutMs);
    })
  ]);
 };
 ```
 ### 사용 예제
 ```javascript
 import { withTimeout, fetchApi } from '../utils/asyncActionUtils';
 // 5초 타임아웃
 const result = await withTimeout(
  fetchApi('/api/slow-endpoint'),
  5000,
  '요청이 시간초과 되었습니다'
 );
 if (result.success) {
  console.log('성공:', result.data);
 } else if (result.error.code === 'TIMEOUT') {
  console.error('타임아웃 발생');
 } else {
  console.error('기타 에러:', result.error);
 }
 ```
 ---
 ## 6️⃣ executeParallelAsyncActions
 ### 설명
 여러 비동기 액션을 **병렬로 실행**하고 모든 결과를 기다립니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:279-299`
 ```javascript
 export const executeParallelAsyncActions = (asyncActions, context = {}) => {
  console.log('[asyncActionUtils] 🚀 EXECUTE_PARALLEL_START', { count: asyncActions.length });
  const promises = asyncActions.map(action =>
    wrapAsyncAction(action, context)
  );
  return Promise.all(promises)
    .then(results => {
      console.log('[asyncActionUtils] ✅ EXECUTE_PARALLEL_SUCCESS', {
        successCount: results.filter(r => r.success).length,
        failCount: results.filter(r => !r.success).length
      });
      return results;
    })
    .catch(error => {
      console.error('[asyncActionUtils] ❌ EXECUTE_PARALLEL_ERROR', error);
      return [];
    });
 };
 ```
 ### 사용 예제
 ```javascript
 import { executeParallelAsyncActions } from '../utils/asyncActionUtils';
 // 3개의 API를 동시에 호출
 const results = await executeParallelAsyncActions([
  (dispatch, getState, onSuccess, onFail) => {
    TAxios(dispatch, getState, 'get', URL1, {}, {}, onSuccess, onFail);
  },
  (dispatch, getState, onSuccess, onFail) => {
    TAxios(dispatch, getState, 'get', URL2, {}, {}, onSuccess, onFail);
  },
  (dispatch, getState, onSuccess, onFail) => {
    TAxios(dispatch, getState, 'get', URL3, {}, {}, onSuccess, onFail);
  }
 ], { dispatch, getState });
 // 결과 처리
 results.forEach((result, index) => {
  if (result.success) {
    console.log(`API ${index + 1} 성공:`, result.data);
  } else {
    console.error(`API ${index + 1} 실패:`, result.error);
  }
 });
 ```
 ---
 ## 📊 실제 사용 시나리오
 ### 시나리오 1: API 호출 후 후속 처리
 ```javascript
 import { tAxiosToPromise } from '../utils/asyncActionUtils';
 export const addToCartAndRefresh = (productId) => async (dispatch, getState) => {
  // 1. 카트에 추가
  const addResult = await tAxiosToPromise(
    TAxios,
    dispatch,
    getState,
    'post',
    URLS.ADD_TO_CART,
    {},
    { productId },
    {}
  );
  if (addResult.success) {
    // 2. 카트 추가 성공 시 카트 정보 재조회
    dispatch({ type: types.ADD_TO_CART, payload: addResult.data.data });
    const cartResult = await tAxiosToPromise(
      TAxios,
      dispatch,
      getState,
      'get',
      URLS.GET_CART,
      {},
      { mbrNo: addResult.data.data.mbrNo },
      {}
    );
    if (cartResult.success) {
      dispatch({ type: types.GET_CART, payload: cartResult.data.data });
    }
  } else {
    console.error('카트 추가 실패:', addResult.error);
  }
 };
 ```
 ### 시나리오 2: 타임아웃이 있는 API 호출
 ```javascript
 import { tAxiosToPromise, withTimeout } from '../utils/asyncActionUtils';
 export const getLargeData = () => async (dispatch, getState) => {
  const result = await withTimeout(
    tAxiosToPromise(
      TAxios,
      dispatch,
      getState,
      'get',
      URLS.GET_LARGE_DATA,
      {},
      {},
      {}
    ),
    10000,  // 10초 타임아웃
    '데이터 조회 시간이 초과되었습니다'
  );
  if (result.success) {
    dispatch({ type: types.GET_LARGE_DATA, payload: result.data.data });
  } else if (result.error.code === 'TIMEOUT') {
    // 타임아웃 처리
    dispatch({ type: types.SHOW_TIMEOUT_MESSAGE });
  } else {
    // 기타 에러 처리
    console.error('조회 실패:', result.error);
  }
 };
 ```
 ---
 ## ✅ 장점
 1. **성공 기준 명확화**: HTTP + retCode 모두 확인
 2. **체인 보장**: reject 없이 resolve만 사용하여 Promise 체인 유지
 3. **상세한 로깅**: 모든 단계에서 로그 출력
 4. **타임아웃 지원**: 응답 없는 API 처리 가능
 5. **에러 처리**: 모든 에러를 표준 구조로 반환
 ## ⚠️ 주의사항
 1. **Chrome 68 호환**: async/await 사용 가능하지만 주의 필요
 2. **항상 resolve**: reject 사용하지 않음
 3. **success 플래그**: 반드시 `result.success` 확인 필요
 ---
 **다음**: [해결 방법 3: 큐 기반 패널 액션 시스템 →](./04-solution-queue-system.md)
--- a/.docs/dispatch-async/04-solution-queue-system.md
+++ b/.docs/dispatch-async/04-solution-queue-system.md
@@ -1,644 +0,0 @@
 # 해결 방법 3: 큐 기반 패널 액션 시스템
 ## 📦 개요
 **관련 파일**:
 - `src/actions/queuedPanelActions.js`
 - `src/middleware/panelQueueMiddleware.js`
 - `src/reducers/panelReducer.js`
 - `src/store/store.js` (미들웨어 등록 필요)
 **작성일**: 2025-11-06
 **커밋**:
 - `5bd2774 [251106] feat: Queued Panel functions`
 - `f9290a1 [251106] fix: Dispatch Queue implementation`
 미들웨어 기반의 **액션 큐 처리 시스템**으로, 패널 액션들을 순차적으로 실행합니다.
 ## ⚠️ 사전 요구사항
 큐 시스템을 사용하려면 **반드시** store에 panelQueueMiddleware를 등록해야 합니다.
 **파일**: `src/store/store.js`
 ```javascript
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 export const store = createStore(
  rootReducer,
  applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
 );
 ```
 미들웨어를 등록하지 않으면 큐에 액션이 추가되어도 자동으로 처리되지 않습니다!
 ## 🎯 핵심 개념
 ### 왜 큐 시스템이 필요한가?
 패널 관련 액션들은 특히 순서가 중요합니다:
 ```javascript
 // 문제 상황
 dispatch(pushPanel({ name: 'SEARCH' }));      // 검색 패널 열기
 dispatch(updatePanel({ results: [...] }));     // 검색 결과 업데이트
 dispatch(popPanel('LOADING'));                 // 로딩 패널 닫기
 // 실제 실행 순서 (문제!)
 // → popPanel이 먼저 실행될 수 있음
 // → updatePanel이 pushPanel보다 먼저 실행될 수 있음
 ```
 ### 큐 시스템의 동작 방식
 ```
 [큐에 추가] → [미들웨어 감지] → [순차 처리] → [완료]
     ↓              ↓               ↓           ↓
  ENQUEUE    자동 감지 시작    PROCESS_QUEUE  다음 액션
 ```
 ---
 ## 🔑 주요 컴포넌트
 ### 1. queuedPanelActions.js
 패널 액션을 큐에 추가하는 액션 크리에이터들
 ### 2. panelQueueMiddleware.js
 큐에 액션이 추가되면 자동으로 처리를 시작하는 미들웨어
 ### 3. panelReducer.js
 큐 상태를 관리하는 리듀서
 ---
 ## 📋 기본 패널 액션
 ### 1. pushPanelQueued
 패널을 큐에 추가하여 순차적으로 열기
 ```javascript
 import { pushPanelQueued } from '../actions/queuedPanelActions';
 // 기본 사용
 dispatch(pushPanelQueued(
  { name: panel_names.SEARCH_PANEL },
  false  // duplicatable
 ));
 // 중복 허용
 dispatch(pushPanelQueued(
  { name: panel_names.PRODUCT_DETAIL, productId: 123 },
  true  // 중복 허용
 ));
 ```
 ### 2. popPanelQueued
 패널을 큐를 통해 제거
 ```javascript
 import { popPanelQueued } from '../actions/queuedPanelActions';
 // 마지막 패널 제거
 dispatch(popPanelQueued());
 // 특정 패널 제거
 dispatch(popPanelQueued(panel_names.SEARCH_PANEL));
 ```
 ### 3. updatePanelQueued
 패널 정보를 큐를 통해 업데이트
 ```javascript
 import { updatePanelQueued } from '../actions/queuedPanelActions';
 dispatch(updatePanelQueued({
  name: panel_names.SEARCH_PANEL,
  panelInfo: {
    results: [...],
    totalCount: 100
  }
 }));
 ```
 ### 4. resetPanelsQueued
 모든 패널을 초기화
 ```javascript
 import { resetPanelsQueued } from '../actions/queuedPanelActions';
 // 빈 패널로 초기화
 dispatch(resetPanelsQueued());
 // 특정 패널들로 초기화
 dispatch(resetPanelsQueued([
  { name: panel_names.HOME }
 ]));
 ```
 ### 5. enqueueMultiplePanelActions
 여러 패널 액션을 한 번에 큐에 추가
 ```javascript
 import { enqueueMultiplePanelActions, pushPanelQueued, updatePanelQueued, popPanelQueued }
  from '../actions/queuedPanelActions';
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: panel_names.SEARCH_PANEL }),
  updatePanelQueued({ name: panel_names.SEARCH_PANEL, panelInfo: { query: 'test' } }),
  popPanelQueued(panel_names.LOADING_PANEL)
 ]));
 ```
 ---
 ## 🚀 비동기 패널 액션
 ### 1. enqueueAsyncPanelAction
 비동기 작업(API 호출 등)을 큐에 추가하여 순차 실행
 **파일**: `src/actions/queuedPanelActions.js:173-199`
 ```javascript
 import { enqueueAsyncPanelAction } from '../actions/queuedPanelActions';
 dispatch(enqueueAsyncPanelAction({
  id: 'search_products_123',  // 고유 ID
  // 비동기 액션 (TAxios 등)
  asyncAction: (dispatch, getState, onSuccess, onFail) => {
    TAxios(
      dispatch,
      getState,
      'post',
      URLS.SEARCH_PRODUCTS,
      {},
      { keyword: 'test' },
      onSuccess,
      onFail
    );
  },
  // 성공 콜백
  onSuccess: (response) => {
    console.log('검색 성공:', response);
    dispatch(pushPanelQueued({
      name: panel_names.SEARCH_RESULT,
      results: response.data.results
    }));
  },
  // 실패 콜백
  onFail: (error) => {
    console.error('검색 실패:', error);
    dispatch(pushPanelQueued({
      name: panel_names.ERROR,
      message: error.message
    }));
  },
  // 완료 콜백 (성공/실패 모두 호출)
  onFinish: (isSuccess, result) => {
    console.log('검색 완료:', isSuccess ? '성공' : '실패');
  },
  // 타임아웃 (ms)
  timeout: 10000  // 10초
 }));
 ```
 ### 동작 흐름
 ```
 1. enqueueAsyncPanelAction 호출
   ↓
 2. ENQUEUE_ASYNC_PANEL_ACTION dispatch
   ↓
 3. executeAsyncAction 자동 실행
   ↓
 4. wrapAsyncAction으로 Promise 래핑
   ↓
 5. withTimeout으로 타임아웃 적용
   ↓
 6. 결과에 따라 onSuccess 또는 onFail 호출
   ↓
 7. COMPLETE_ASYNC_PANEL_ACTION 또는 FAIL_ASYNC_PANEL_ACTION dispatch
 ```
 ---
 ## 🔗 API 호출 후 패널 액션
 ### createApiWithPanelActions
 API 호출 후 여러 패널 액션을 자동으로 실행
 **파일**: `src/actions/queuedPanelActions.js:355-394`
 ```javascript
 import { createApiWithPanelActions } from '../actions/queuedPanelActions';
 dispatch(createApiWithPanelActions({
  // API 호출
  apiCall: (dispatch, getState, onSuccess, onFail) => {
    TAxios(
      dispatch,
      getState,
      'post',
      URLS.SEARCH_PRODUCTS,
      {},
      { keyword: 'laptop' },
      onSuccess,
      onFail
    );
  },
  // API 성공 후 실행할 패널 액션들
  panelActions: [
    // Plain action
    { type: 'PUSH_PANEL', payload: { name: panel_names.SEARCH_PANEL } },
    // Dynamic action (response 사용)
    (response) => updatePanelQueued({
      name: panel_names.SEARCH_PANEL,
      panelInfo: {
        results: response.data.results,
        totalCount: response.data.totalCount
      }
    }),
    // 또 다른 패널 액션
    popPanelQueued(panel_names.LOADING_PANEL)
  ],
  // API 성공 콜백
  onApiSuccess: (response) => {
    console.log('API 성공:', response.data.totalCount, '개 검색됨');
  },
  // API 실패 콜백
  onApiFail: (error) => {
    console.error('API 실패:', error);
    dispatch(pushPanelQueued({
      name: panel_names.ERROR,
      message: '검색에 실패했습니다'
    }));
  }
 }));
 ```
 ### 사용 예제: 상품 검색
 ```javascript
 export const searchProducts = (keyword) =>
  createApiWithPanelActions({
    apiCall: (dispatch, getState, onSuccess, onFail) => {
      TAxios(
        dispatch,
        getState,
        'post',
        URLS.SEARCH_PRODUCTS,
        {},
        { keyword },
        onSuccess,
        onFail
      );
    },
    panelActions: [
      // 1. 로딩 패널 닫기
      popPanelQueued(panel_names.LOADING_PANEL),
      // 2. 검색 결과 패널 열기
      (response) => pushPanelQueued({
        name: panel_names.SEARCH_RESULT,
        results: response.data.results
      }),
      // 3. 검색 히스토리 업데이트
      (response) => updatePanelQueued({
        name: panel_names.SEARCH_HISTORY,
        panelInfo: { lastSearch: keyword }
      })
    ],
    onApiSuccess: (response) => {
      console.log(`${response.data.totalCount}개의 상품을 찾았습니다`);
    }
  });
 ```
 ---
 ## 🔄 비동기 액션 시퀀스
 ### createAsyncPanelSequence
 여러 비동기 액션을 **순차적으로** 실행
 **파일**: `src/actions/queuedPanelActions.js:401-445`
 ```javascript
 import { createAsyncPanelSequence } from '../actions/queuedPanelActions';
 dispatch(createAsyncPanelSequence([
  // 첫 번째 비동기 액션
  {
    asyncAction: (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_USER_INFO, {}, {}, onSuccess, onFail);
    },
    onSuccess: (response) => {
      console.log('사용자 정보 조회 성공');
      dispatch(pushPanelQueued({
        name: panel_names.USER_INFO,
        userInfo: response.data.data
      }));
    },
    onFail: (error) => {
      console.error('사용자 정보 조회 실패:', error);
    }
  },
  // 두 번째 비동기 액션 (첫 번째 완료 후 실행)
  {
    asyncAction: (dispatch, getState, onSuccess, onFail) => {
      const userInfo = getState().user.info;
      TAxios(
        dispatch,
        getState,
        'get',
        URLS.GET_CART,
        {},
        { mbrNo: userInfo.mbrNo },
        onSuccess,
        onFail
      );
    },
    onSuccess: (response) => {
      console.log('카트 정보 조회 성공');
      dispatch(updatePanelQueued({
        name: panel_names.USER_INFO,
        panelInfo: { cartCount: response.data.data.length }
      }));
    },
    onFail: (error) => {
      console.error('카트 정보 조회 실패:', error);
    }
  },
  // 세 번째 비동기 액션 (두 번째 완료 후 실행)
  {
    asyncAction: (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_ORDERS, {}, {}, onSuccess, onFail);
    },
    onSuccess: (response) => {
      console.log('주문 정보 조회 성공');
      dispatch(pushPanelQueued({
        name: panel_names.ORDER_LIST,
        orders: response.data.data
      }));
    },
    onFail: (error) => {
      console.error('주문 정보 조회 실패:', error);
      // 실패 시 시퀀스 중단
    }
  }
 ]));
 ```
 ### 동작 흐름
 ```
 Action 1 실행 → 성공? → Action 2 실행 → 성공? → Action 3 실행
              ↓                     ↓
            실패 시                실패 시
            중단                   중단
 ```
 ---
 ## ⚙️ 미들웨어: panelQueueMiddleware
 ### 동작 원리
 **파일**: `src/middleware/panelQueueMiddleware.js`
 ```javascript
 const panelQueueMiddleware = (store) => (next) => (action) => {
  const result = next(action);
  // 큐에 액션이 추가되면 자동으로 처리 시작
  if (action.type === types.ENQUEUE_PANEL_ACTION) {
    console.log('[panelQueueMiddleware] 🚀 ACTION_ENQUEUED', {
      action: action.payload.action,
      queueId: action.payload.id,
    });
    // setTimeout을 사용하여 현재 액션이 완전히 처리된 후에 큐 처리 시작
    setTimeout(() => {
      const currentState = store.getState();
      if (currentState.panels) {
        // 이미 처리 중이 아니고 큐에 액션이 있으면 처리 시작
        if (!currentState.panels.isProcessingQueue &&
            currentState.panels.panelActionQueue.length > 0) {
          console.log('[panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS');
          store.dispatch({ type: types.PROCESS_PANEL_QUEUE });
        }
      }
    }, 0);
  }
  // 큐 처리가 완료되고 남은 큐가 있으면 계속 처리
  if (action.type === types.PROCESS_PANEL_QUEUE) {
    setTimeout(() => {
      const currentState = store.getState();
      if (currentState.panels) {
        // 처리 중이 아니고 큐에 남은 액션이 있으면 계속 처리
        if (!currentState.panels.isProcessingQueue &&
            currentState.panels.panelActionQueue.length > 0) {
          console.log('[panelQueueMiddleware] 🔄 CONTINUING_QUEUE_PROCESS');
          store.dispatch({ type: types.PROCESS_PANEL_QUEUE });
        }
      }
    }, 0);
  }
  return result;
 };
 ```
 ### 주요 특징
 1. ✅ **자동 시작**: 큐에 액션 추가 시 자동으로 처리 시작
 2. ✅ **연속 처리**: 한 액션 완료 후 자동으로 다음 액션 처리
 3. ✅ **중복 방지**: 이미 처리 중이면 새로 시작하지 않음
 4. ✅ **로깅**: 모든 단계에서 로그 출력
 ---
 ## 📊 리듀서 상태 구조
 ### panelReducer.js의 큐 관련 상태
 ```javascript
 {
  panels: [],                    // 실제 패널 스택
  lastPanelAction: 'push',       // 마지막 액션 타입
  // 큐 관련 상태
  panelActionQueue: [            // 처리 대기 중인 큐
    {
      id: 'queue_item_1_1699999999999',
      action: 'PUSH_PANEL',
      panel: { name: 'SEARCH_PANEL' },
      duplicatable: false,
      timestamp: 1699999999999
    },
    // ...
  ],
  isProcessingQueue: false,      // 큐 처리 중 여부
  queueError: null,              // 큐 처리 에러
  queueStats: {                  // 큐 통계
    totalProcessed: 0,           // 총 처리된 액션 수
    failedCount: 0,              // 실패한 액션 수
    averageProcessingTime: 0     // 평균 처리 시간 (ms)
  },
  // 비동기 액션 상태
  asyncActions: {                // 실행 중인 비동기 액션들
    'async_action_1': {
      id: 'async_action_1',
      status: 'pending',         // 'pending' | 'success' | 'failed'
      timestamp: 1699999999999
    }
  },
  completedAsyncActions: [       // 완료된 액션 ID들
    'async_action_1',
    'async_action_2'
  ],
  failedAsyncActions: [          // 실패한 액션 ID들
    'async_action_3'
  ]
 }
 ```
 ---
 ## 🎯 실제 사용 시나리오
 ### 시나리오 1: 검색 플로우
 ```javascript
 export const performSearch = (keyword) => (dispatch) => {
  // 1. 로딩 패널 열기
  dispatch(pushPanelQueued({ name: panel_names.LOADING }));
  // 2. 검색 API 호출 후 결과 표시
  dispatch(createApiWithPanelActions({
    apiCall: (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'post', URLS.SEARCH, {}, { keyword }, onSuccess, onFail);
    },
    panelActions: [
      popPanelQueued(panel_names.LOADING),
      (response) => pushPanelQueued({
        name: panel_names.SEARCH_RESULT,
        results: response.data.results
      })
    ]
  }));
 };
 ```
 ### 시나리오 2: 다단계 결제 프로세스
 ```javascript
 export const processCheckout = (orderInfo) =>
  createAsyncPanelSequence([
    // 1단계: 주문 검증
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(dispatch, getState, 'post', URLS.VALIDATE_ORDER, {}, orderInfo, onSuccess, onFail);
      },
      onSuccess: () => {
        dispatch(updatePanelQueued({
          name: panel_names.CHECKOUT,
          panelInfo: { step: 1, status: 'validated' }
        }));
      }
    },
    // 2단계: 결제 처리
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(dispatch, getState, 'post', URLS.PROCESS_PAYMENT, {}, orderInfo, onSuccess, onFail);
      },
      onSuccess: (response) => {
        dispatch(updatePanelQueued({
          name: panel_names.CHECKOUT,
          panelInfo: { step: 2, paymentId: response.data.data.paymentId }
        }));
      }
    },
    // 3단계: 주문 확정
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        const state = getState();
        const paymentId = state.panels.panels.find(p => p.name === panel_names.CHECKOUT)
          .panelInfo.paymentId;
        TAxios(
          dispatch,
          getState,
          'post',
          URLS.CONFIRM_ORDER,
          {},
          { ...orderInfo, paymentId },
          onSuccess,
          onFail
        );
      },
      onSuccess: (response) => {
        dispatch(popPanelQueued(panel_names.CHECKOUT));
        dispatch(pushPanelQueued({
          name: panel_names.ORDER_COMPLETE,
          orderId: response.data.data.orderId
        }));
      }
    }
  ]);
 ```
 ---
 ## ✅ 장점
 1. **완벽한 순서 보장**: 큐 시스템으로 100% 순서 보장
 2. **자동 처리**: 미들웨어가 자동으로 큐 처리
 3. **비동기 지원**: API 호출 등 비동기 작업 완벽 지원
 4. **타임아웃**: 응답 없는 작업 자동 처리
 5. **에러 복구**: 에러 발생 시에도 다음 액션 계속 처리
 6. **통계**: 큐 처리 통계 자동 수집
 ## ⚠️ 주의사항
 1. **미들웨어 등록**: store에 panelQueueMiddleware 등록 필요
 2. **리듀서 확장**: panelReducer에 큐 관련 상태 추가 필요
 3. **기존 코드**: 기존 pushPanel 등과 병행 사용 가능
 ---
 **다음**: [사용 패턴 및 예제 →](./05-usage-patterns.md)
--- a/.docs/dispatch-async/05-usage-patterns.md
+++ b/.docs/dispatch-async/05-usage-patterns.md
@@ -1,804 +0,0 @@
 # 사용 패턴 및 예제
 ## 📋 목차
 1. [어떤 솔루션을 선택할까?](#어떤-솔루션을-선택할까)
 2. [공통 패턴](#공통-패턴)
 3. [실전 예제](#실전-예제)
 4. [마이그레이션 가이드](#마이그레이션-가이드)
 5. [Best Practices](#best-practices)
 ---
 ## 어떤 솔루션을 선택할까?
 ### 의사결정 플로우차트
 ```
 패널 관련 액션인가?
 ├─ YES → 큐 기반 패널 액션 시스템 사용
 │         (queuedPanelActions.js)
 │
 └─ NO → API 호출이 포함되어 있는가?
        ├─ YES → API 패턴은?
        │        ├─ API 후 여러 dispatch 필요 → createApiThunkWithChain
        │        ├─ 로딩 상태 관리 필요 → withLoadingState
        │        └─ Promise 기반 처리 필요 → asyncActionUtils
        │
        └─ NO → 순차적 dispatch만 필요
                 → createSequentialDispatch
 ```
 ### 솔루션 비교표
 | 상황 | 추천 솔루션 | 파일 |
 |------|------------|------|
 | 패널 열기/닫기/업데이트 | `pushPanelQueued`, `popPanelQueued` | queuedPanelActions.js |
 | API 호출 후 패널 업데이트 | `createApiWithPanelActions` | queuedPanelActions.js |
 | 여러 API 순차 호출 | `createAsyncPanelSequence` | queuedPanelActions.js |
 | API 후 여러 dispatch | `createApiThunkWithChain` | dispatchHelper.js |
 | 로딩 상태 자동 관리 | `withLoadingState` | dispatchHelper.js |
 | 단순 순차 dispatch | `createSequentialDispatch` | dispatchHelper.js |
 | Promise 기반 API 호출 | `fetchApi`, `tAxiosToPromise` | asyncActionUtils.js |
 ---
 ## 공통 패턴
 ### 패턴 1: API 후 State 업데이트
 #### Before
 ```javascript
 export const getProductDetail = (productId) => (dispatch, getState) => {
  const onSuccess = (response) => {
    dispatch({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data });
    dispatch(getRelatedProducts(productId));
  };
  TAxios(dispatch, getState, 'get', URLS.GET_PRODUCT, {}, { productId }, onSuccess, onFail);
 };
 ```
 #### After (dispatchHelper)
 ```javascript
 export const getProductDetail = (productId) =>
  createApiThunkWithChain(
    (d, gs, onS, onF) => TAxios(d, gs, 'get', URLS.GET_PRODUCT, {}, { productId }, onS, onF),
    [
      (response) => ({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data }),
      getRelatedProducts(productId)
    ]
  );
 ```
 #### After (asyncActionUtils - Chrome 68+)
 ```javascript
 export const getProductDetail = (productId) => async (dispatch, getState) => {
  const result = await tAxiosToPromise(
    TAxios, dispatch, getState, 'get', URLS.GET_PRODUCT, {}, { productId }
  );
  if (result.success) {
    dispatch({ type: types.GET_PRODUCT_DETAIL, payload: result.data.data });
    dispatch(getRelatedProducts(productId));
  }
 };
 ```
 ### 패턴 2: 로딩 상태 관리
 #### Before
 ```javascript
 export const fetchUserData = (userId) => (dispatch, getState) => {
  dispatch(changeAppStatus({ showLoadingPanel: { show: true } }));
  const onSuccess = (response) => {
    dispatch({ type: types.GET_USER_DATA, payload: response.data.data });
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  };
  const onFail = (error) => {
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  };
  TAxios(dispatch, getState, 'get', URLS.GET_USER, {}, { userId }, onSuccess, onFail);
 };
 ```
 #### After
 ```javascript
 export const fetchUserData = (userId) =>
  withLoadingState(
    (dispatch, getState) => {
      return TAxiosPromise(dispatch, getState, 'get', URLS.GET_USER, {}, { userId })
        .then((response) => {
          dispatch({ type: types.GET_USER_DATA, payload: response.data.data });
        });
    }
  );
 ```
 ### 패턴 3: 패널 순차 열기
 #### Before
 ```javascript
 dispatch(pushPanel({ name: panel_names.SEARCH }));
 setTimeout(() => {
  dispatch(updatePanel({ results: [...] }));
  setTimeout(() => {
    dispatch(popPanel(panel_names.LOADING));
  }, 0);
 }, 0);
 ```
 #### After
 ```javascript
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: panel_names.SEARCH }),
  updatePanelQueued({ results: [...] }),
  popPanelQueued(panel_names.LOADING)
 ]));
 ```
 ### 패턴 4: 조건부 dispatch
 #### Before
 ```javascript
 export const checkAndFetch = () => (dispatch, getState) => {
  const state = getState();
  if (state.user.isLoggedIn) {
    dispatch(fetchUserProfile());
    dispatch(fetchUserCart());
  } else {
    dispatch({ type: types.SHOW_LOGIN_POPUP });
  }
 };
 ```
 #### After
 ```javascript
 export const checkAndFetch = () =>
  createConditionalDispatch(
    (state) => state.user.isLoggedIn,
    [
      fetchUserProfile(),
      fetchUserCart()
    ],
    [
      { type: types.SHOW_LOGIN_POPUP }
    ]
  );
 ```
 ---
 ## 실전 예제
 ### 예제 1: 검색 기능
 ```javascript
 // src/actions/searchActions.js
 import { createApiWithPanelActions, pushPanelQueued, popPanelQueued, updatePanelQueued }
  from './queuedPanelActions';
 import { panel_names } from '../constants/panelNames';
 import { URLS } from '../constants/urls';
 export const performSearch = (keyword) => (dispatch) => {
  // 1. 로딩 패널 열기
  dispatch(pushPanelQueued({ name: panel_names.LOADING }));
  // 2. 검색 API 호출 후 결과 처리
  dispatch(createApiWithPanelActions({
    apiCall: (dispatch, getState, onSuccess, onFail) => {
      TAxios(
        dispatch,
        getState,
        'post',
        URLS.SEARCH_PRODUCTS,
        {},
        { keyword, page: 1, size: 20 },
        onSuccess,
        onFail
      );
    },
    panelActions: [
      // 1) 로딩 패널 닫기
      popPanelQueued(panel_names.LOADING),
      // 2) 검색 결과 패널 열기
      (response) => pushPanelQueued({
        name: panel_names.SEARCH_RESULT,
        results: response.data.results,
        totalCount: response.data.totalCount,
        keyword
      }),
      // 3) 검색 히스토리 업데이트
      (response) => updatePanelQueued({
        name: panel_names.SEARCH_HISTORY,
        panelInfo: {
          lastSearch: keyword,
          resultCount: response.data.totalCount
        }
      })
    ],
    onApiSuccess: (response) => {
      console.log(`"${keyword}" 검색 완료: ${response.data.totalCount}개`);
    },
    onApiFail: (error) => {
      console.error('검색 실패:', error);
      dispatch(popPanelQueued(panel_names.LOADING));
      dispatch(pushPanelQueued({
        name: panel_names.ERROR,
        message: '검색에 실패했습니다'
      }));
    }
  }));
 };
 ```
 ### 예제 2: 장바구니 추가
 ```javascript
 // src/actions/cartActions.js
 import { createApiThunkWithChain } from '../utils/dispatchHelper';
 import { types } from './actionTypes';
 import { URLS } from '../constants/urls';
 export const addToCart = (productId, quantity) =>
  createApiThunkWithChain(
    // API 호출
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(
        dispatch,
        getState,
        'post',
        URLS.ADD_TO_CART,
        {},
        { productId, quantity },
        onSuccess,
        onFail
      );
    },
    // 성공 시 순차 dispatch
    [
      // 1) 장바구니 추가 액션
      (response) => ({
        type: types.ADD_TO_CART,
        payload: response.data.data
      }),
      // 2) 장바구니 개수 업데이트
      (response) => ({
        type: types.UPDATE_CART_COUNT,
        payload: response.data.data.cartCount
      }),
      // 3) 장바구니 정보 재조회
      (response) => getMyCartInfo({ mbrNo: response.data.data.mbrNo }),
      // 4) 성공 메시지 표시
      () => ({
        type: types.SHOW_TOAST,
        payload: { message: '장바구니에 담았습니다' }
      })
    ],
    // 실패 시 dispatch
    (error) => ({
      type: types.SHOW_ERROR,
      payload: { message: error.message || '장바구니 담기에 실패했습니다' }
    })
  );
 ```
 ### 예제 3: 로그인 플로우
 ```javascript
 // src/actions/authActions.js
 import { createAsyncPanelSequence } from './queuedPanelActions';
 import { withLoadingState } from '../utils/dispatchHelper';
 import { panel_names } from '../constants/panelNames';
 import { types } from './actionTypes';
 import { URLS } from '../constants/urls';
 export const performLogin = (userId, password) =>
  withLoadingState(
    createAsyncPanelSequence([
      // 1단계: 로그인 API 호출
      {
        asyncAction: (dispatch, getState, onSuccess, onFail) => {
          TAxios(
            dispatch,
            getState,
            'post',
            URLS.LOGIN,
            {},
            { userId, password },
            onSuccess,
            onFail
          );
        },
        onSuccess: (response) => {
          // 로그인 성공 - 토큰 저장
          dispatch({
            type: types.LOGIN_SUCCESS,
            payload: {
              token: response.data.data.token,
              userInfo: response.data.data.userInfo
            }
          });
        },
        onFail: (error) => {
          dispatch({
            type: types.SHOW_ERROR,
            payload: { message: '로그인에 실패했습니다' }
          });
        }
      },
      // 2단계: 사용자 정보 조회
      {
        asyncAction: (dispatch, getState, onSuccess, onFail) => {
          const state = getState();
          const mbrNo = state.auth.userInfo.mbrNo;
          TAxios(
            dispatch,
            getState,
            'get',
            URLS.GET_USER_INFO,
            {},
            { mbrNo },
            onSuccess,
            onFail
          );
        },
        onSuccess: (response) => {
          dispatch({
            type: types.GET_USER_INFO,
            payload: response.data.data
          });
        }
      },
      // 3단계: 장바구니 정보 조회
      {
        asyncAction: (dispatch, getState, onSuccess, onFail) => {
          const state = getState();
          const mbrNo = state.auth.userInfo.mbrNo;
          TAxios(
            dispatch,
            getState,
            'get',
            URLS.GET_CART,
            {},
            { mbrNo },
            onSuccess,
            onFail
          );
        },
        onSuccess: (response) => {
          dispatch({
            type: types.GET_CART_INFO,
            payload: response.data.data
          });
          // 로그인 완료 패널로 이동
          dispatch(pushPanelQueued({
            name: panel_names.LOGIN_COMPLETE
          }));
        }
      }
    ]),
    { loadingType: 'wait' }
  );
 ```
 ### 예제 4: 다단계 폼 제출
 ```javascript
 // src/actions/formActions.js
 import { createAsyncPanelSequence } from './queuedPanelActions';
 import { tAxiosToPromise } from '../utils/asyncActionUtils';
 import { types } from './actionTypes';
 import { URLS } from '../constants/urls';
 export const submitMultiStepForm = (formData) =>
  createAsyncPanelSequence([
    // Step 1: 입력 검증
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(
          dispatch,
          getState,
          'post',
          URLS.VALIDATE_FORM,
          {},
          formData,
          onSuccess,
          onFail
        );
      },
      onSuccess: (response) => {
        dispatch({
          type: types.UPDATE_FORM_STEP,
          payload: { step: 1, status: 'validated' }
        });
        dispatch(updatePanelQueued({
          name: panel_names.FORM_PANEL,
          panelInfo: { step: 1, validated: true }
        }));
      },
      onFail: (error) => {
        dispatch({
          type: types.SHOW_VALIDATION_ERROR,
          payload: { errors: error.data?.errors || [] }
        });
      }
    },
    // Step 2: 중복 체크
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(
          dispatch,
          getState,
          'post',
          URLS.CHECK_DUPLICATE,
          {},
          { email: formData.email },
          onSuccess,
          onFail
        );
      },
      onSuccess: (response) => {
        dispatch({
          type: types.UPDATE_FORM_STEP,
          payload: { step: 2, status: 'checked' }
        });
        dispatch(updatePanelQueued({
          name: panel_names.FORM_PANEL,
          panelInfo: { step: 2, duplicate: false }
        }));
      },
      onFail: (error) => {
        dispatch({
          type: types.SHOW_ERROR,
          payload: { message: '이미 사용 중인 이메일입니다' }
        });
      }
    },
    // Step 3: 최종 제출
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(
          dispatch,
          getState,
          'post',
          URLS.SUBMIT_FORM,
          {},
          formData,
          onSuccess,
          onFail
        );
      },
      onSuccess: (response) => {
        dispatch({
          type: types.SUBMIT_FORM_SUCCESS,
          payload: response.data.data
        });
        // 성공 패널로 이동
        dispatch(popPanelQueued(panel_names.FORM_PANEL));
        dispatch(pushPanelQueued({
          name: panel_names.SUCCESS_PANEL,
          message: '가입이 완료되었습니다'
        }));
      },
      onFail: (error) => {
        dispatch({
          type: types.SUBMIT_FORM_FAIL,
          payload: { error: error.message }
        });
      }
    }
  ]);
 ```
 ### 예제 5: 병렬 데이터 로딩
 ```javascript
 // src/actions/dashboardActions.js
 import { createParallelDispatch } from '../utils/dispatchHelper';
 import { executeParallelAsyncActions } from '../utils/asyncActionUtils';
 import { types } from './actionTypes';
 import { URLS } from '../constants/urls';
 // 방법 1: dispatchHelper 사용
 export const loadDashboardData = () =>
  createParallelDispatch([
    fetchUserProfile(),
    fetchRecentOrders(),
    fetchRecommendations(),
    fetchNotifications()
  ], { withLoading: true });
 // 방법 2: asyncActionUtils 사용
 export const loadDashboardDataAsync = () => async (dispatch, getState) => {
  dispatch(changeAppStatus({ showLoadingPanel: { show: true } }));
  const results = await executeParallelAsyncActions([
    // 1. 사용자 프로필
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_PROFILE, {}, {}, onSuccess, onFail);
    },
    // 2. 최근 주문
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_RECENT_ORDERS, {}, {}, onSuccess, onFail);
    },
    // 3. 추천 상품
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_RECOMMENDATIONS, {}, {}, onSuccess, onFail);
    },
    // 4. 알림
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_NOTIFICATIONS, {}, {}, onSuccess, onFail);
    }
  ], { dispatch, getState });
  // 각 결과 처리
  const [profileResult, ordersResult, recoResult, notiResult] = results;
  if (profileResult.success) {
    dispatch({ type: types.GET_PROFILE, payload: profileResult.data.data });
  }
  if (ordersResult.success) {
    dispatch({ type: types.GET_RECENT_ORDERS, payload: ordersResult.data.data });
  }
  if (recoResult.success) {
    dispatch({ type: types.GET_RECOMMENDATIONS, payload: recoResult.data.data });
  }
  if (notiResult.success) {
    dispatch({ type: types.GET_NOTIFICATIONS, payload: notiResult.data.data });
  }
  dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
 };
 ```
 ---
 ## 마이그레이션 가이드
 ### Step 1: 파일 import 변경
 ```javascript
 // Before
 import { pushPanel, popPanel, updatePanel } from '../actions/panelActions';
 // After
 import { pushPanelQueued, popPanelQueued, updatePanelQueued }
  from '../actions/queuedPanelActions';
 import { createApiThunkWithChain, withLoadingState }
  from '../utils/dispatchHelper';
 ```
 ### Step 2: 기존 코드 점진적 마이그레이션
 ```javascript
 // 1단계: 기존 코드 유지
 dispatch(pushPanel({ name: panel_names.SEARCH }));
 // 2단계: 큐 버전으로 변경
 dispatch(pushPanelQueued({ name: panel_names.SEARCH }));
 // 3단계: 여러 액션을 묶어서 처리
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: panel_names.SEARCH }),
  updatePanelQueued({ results: [...] })
 ]));
 ```
 ### Step 3: setTimeout 패턴 제거
 ```javascript
 // Before
 dispatch(action1());
 setTimeout(() => {
  dispatch(action2());
  setTimeout(() => {
    dispatch(action3());
  }, 0);
 }, 0);
 // After
 dispatch(createSequentialDispatch([
  action1(),
  action2(),
  action3()
 ]));
 ```
 ### Step 4: API 패턴 개선
 ```javascript
 // Before
 const onSuccess = (response) => {
  dispatch({ type: types.ACTION_1, payload: response.data });
  dispatch(action2());
  dispatch(action3());
 };
 TAxios(dispatch, getState, 'post', URL, {}, params, onSuccess, onFail);
 // After
 dispatch(createApiThunkWithChain(
  (d, gs, onS, onF) => TAxios(d, gs, 'post', URL, {}, params, onS, onF),
  [
    (response) => ({ type: types.ACTION_1, payload: response.data }),
    action2(),
    action3()
  ]
 ));
 ```
 ---
 ## Best Practices
 ### 1. 명확한 에러 처리
 ```javascript
 // ✅ Good
 dispatch(createApiWithPanelActions({
  apiCall: (d, gs, onS, onF) => TAxios(d, gs, 'post', URL, {}, params, onS, onF),
  panelActions: [...],
  onApiSuccess: (response) => {
    console.log('API 성공:', response);
  },
  onApiFail: (error) => {
    console.error('API 실패:', error);
    dispatch(pushPanelQueued({
      name: panel_names.ERROR,
      message: error.message || '작업에 실패했습니다'
    }));
  }
 }));
 // ❌ Bad - 에러 처리 없음
 dispatch(createApiWithPanelActions({
  apiCall: (d, gs, onS, onF) => TAxios(d, gs, 'post', URL, {}, params, onS, onF),
  panelActions: [...]
 }));
 ```
 ### 2. 타임아웃 설정
 ```javascript
 // ✅ Good
 dispatch(enqueueAsyncPanelAction({
  asyncAction: (d, gs, onS, onF) => {
    TAxios(d, gs, 'post', URL, {}, params, onS, onF);
  },
  timeout: 10000,  // 10초
  onFail: (error) => {
    if (error.code === 'TIMEOUT') {
      console.error('요청 시간 초과');
    }
  }
 }));
 // ❌ Bad - 타임아웃 없음 (무한 대기 가능)
 dispatch(enqueueAsyncPanelAction({
  asyncAction: (d, gs, onS, onF) => {
    TAxios(d, gs, 'post', URL, {}, params, onS, onF);
  }
 }));
 ```
 ### 3. 로깅 활용
 ```javascript
 // ✅ Good - 상세한 로깅
 console.log('[SearchAction] 🔍 검색 시작:', keyword);
 dispatch(createApiWithPanelActions({
  apiCall: (d, gs, onS, onF) => {
    TAxios(d, gs, 'post', URLS.SEARCH, {}, { keyword }, onS, onF);
  },
  onApiSuccess: (response) => {
    console.log('[SearchAction] ✅ 검색 성공:', response.data.totalCount, '개');
  },
  onApiFail: (error) => {
    console.error('[SearchAction] ❌ 검색 실패:', error);
  }
 }));
 ```
 ### 4. 상태 검증
 ```javascript
 // ✅ Good - 상태 검증 후 실행
 export const performAction = () =>
  createConditionalDispatch(
    (state) => state.user.isLoggedIn && state.cart.items.length > 0,
    [proceedToCheckout()],
    [{ type: types.SHOW_LOGIN_POPUP }]
  );
 // ❌ Bad - 검증 없이 바로 실행
 export const performAction = () => proceedToCheckout();
 ```
 ### 5. 재사용 가능한 액션
 ```javascript
 // ✅ Good - 재사용 가능
 export const fetchDataWithLoading = (url, actionType) =>
  withLoadingState(
    (dispatch, getState) => {
      return TAxiosPromise(dispatch, getState, 'get', url, {}, {})
        .then((response) => {
          dispatch({ type: actionType, payload: response.data.data });
        });
    }
  );
 // 사용
 dispatch(fetchDataWithLoading(URLS.GET_USER, types.GET_USER));
 dispatch(fetchDataWithLoading(URLS.GET_CART, types.GET_CART));
 ```
 ---
 ## 체크리스트
 ### 초기 설정 확인사항
 - [ ] **panelQueueMiddleware가 store.js에 등록되어 있는가?** (큐 시스템 사용 시 필수!)
  ```javascript
  // src/store/store.js
  import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
  export const store = createStore(
    rootReducer,
    applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
  );
  ```
 - [ ] TAxiosPromise가 import되어 있는가? (withLoadingState 사용 시)
 ### 기능 구현 전 확인사항
 - [ ] 패널 관련 액션인가? → 큐 시스템 사용
 - [ ] API 호출이 포함되어 있는가? → createApiThunkWithChain 또는 createApiWithPanelActions
 - [ ] 로딩 상태 관리가 필요한가? → withLoadingState
 - [ ] 순차 실행이 필요한가? → createSequentialDispatch 또는 createAsyncPanelSequence
 - [ ] 타임아웃이 필요한가? → withTimeout 또는 timeout 옵션 설정
 ### 코드 리뷰 체크리스트
 - [ ] setTimeout 사용 여부 확인
 - [ ] 에러 처리가 적절한가?
 - [ ] 로깅이 충분한가?
 - [ ] 타임아웃이 설정되어 있는가?
 - [ ] 상태 검증이 필요한가?
 - [ ] 재사용 가능한 구조인가?
 ---
 **이전**: [← 해결 방법 3: 큐 기반 패널 액션 시스템](./04-solution-queue-system.md)
 **처음으로**: [← README](./README.md)
--- a/.docs/dispatch-async/06-setup-guide.md
+++ b/.docs/dispatch-async/06-setup-guide.md
@@ -1,396 +0,0 @@
 # 설정 가이드
 ## 📋 목차
 1. [초기 설정](#초기-설정)
 2. [파일 구조 확인](#파일-구조-확인)
 3. [설정 순서](#설정-순서)
 4. [검증 방법](#검증-방법)
 5. [트러블슈팅](#트러블슈팅)
 ---
 ## 초기 설정
 ### 1️⃣ 필수: panelQueueMiddleware 등록
 큐 기반 패널 액션 시스템을 사용하려면 **반드시** Redux store에 미들웨어를 등록해야 합니다.
 #### 파일 위치
 `com.twin.app.shoptime/src/store/store.js`
 #### 수정 전
 ```javascript
 import { applyMiddleware, combineReducers, createStore } from 'redux';
 import thunk from 'redux-thunk';
 import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware';
 import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware';
 // panelQueueMiddleware import 없음!
 // ... reducers ...
 export const store = createStore(
  rootReducer,
  applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware)
  // panelQueueMiddleware 등록 없음!
 );
 ```
 #### 수정 후
 ```javascript
 import { applyMiddleware, combineReducers, createStore } from 'redux';
 import thunk from 'redux-thunk';
 import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware';
 import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware';
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware'; // ← 추가
 // ... reducers ...
 export const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk,
    panelHistoryMiddleware,
    autoCloseMiddleware,
    panelQueueMiddleware  // ← 추가 (맨 마지막 위치)
  )
 );
 ```
 ### 2️⃣ 미들웨어 등록 순서
 미들웨어 등록 순서는 다음과 같습니다:
 ```javascript
 applyMiddleware(
  thunk,                    // 1. Redux-thunk (비동기 액션 지원)
  panelHistoryMiddleware,   // 2. 패널 히스토리 관리
  autoCloseMiddleware,      // 3. 자동 닫기 처리
  panelQueueMiddleware      // 4. 패널 큐 처리 (맨 마지막)
 )
 ```
 **중요**: `panelQueueMiddleware`는 **맨 마지막**에 위치해야 합니다!
 - 다른 미들웨어들이 먼저 액션을 처리한 후
 - 큐 미들웨어가 큐 관련 액션을 감지하고 처리합니다
 ---
 ## 파일 구조 확인
 ### 필수 파일들이 모두 존재하는지 확인
 ```bash
 # 프로젝트 루트에서 실행
 ls -la com.twin.app.shoptime/src/middleware/panelQueueMiddleware.js
 ls -la com.twin.app.shoptime/src/actions/queuedPanelActions.js
 ls -la com.twin.app.shoptime/src/utils/dispatchHelper.js
 ls -la com.twin.app.shoptime/src/utils/asyncActionUtils.js
 ls -la com.twin.app.shoptime/src/reducers/panelReducer.js
 ```
 ### 예상 출력
 ```
 -rw-r--r-- 1 user user 2063 Nov 10 06:32 .../panelQueueMiddleware.js
 -rw-r--r-- 1 user user 13845 Nov 06 10:15 .../queuedPanelActions.js
 -rw-r--r-- 1 user user 12345 Nov 05 14:20 .../dispatchHelper.js
 -rw-r--r-- 1 user user 10876 Nov 06 10:30 .../asyncActionUtils.js
 -rw-r--r-- 1 user user 25432 Nov 06 11:00 .../panelReducer.js
 ```
 ### 파일이 없다면?
 ```bash
 # 최신 코드를 pull 받으세요
 git fetch origin
 git pull origin <branch-name>
 ```
 ---
 ## 설정 순서
 ### Step 1: 미들웨어 import 추가
 **파일**: `src/store/store.js`
 ```javascript
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 ```
 ### Step 2: applyMiddleware에 추가
 ```javascript
 export const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk,
    panelHistoryMiddleware,
    autoCloseMiddleware,
    panelQueueMiddleware  // ← 추가
  )
 );
 ```
 ### Step 3: 저장 및 빌드
 ```bash
 # 파일 저장 후
 npm run build
 # 또는 개발 서버 재시작
 npm start
 ```
 ### Step 4: 브라우저 콘솔 확인
 브라우저 개발자 도구(F12)를 열고 다음과 같은 로그가 보이는지 확인:
 ```
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED
 [panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] 🟡 PROCESSING_QUEUE_ITEM
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED
 ```
 ---
 ## 검증 방법
 ### 방법 1: 콘솔 로그 확인
 큐 시스템을 사용하는 액션을 dispatch하면 다음과 같은 로그가 출력됩니다:
 ```javascript
 import { pushPanelQueued } from '../actions/queuedPanelActions';
 import { panel_names } from '../utils/Config';
 dispatch(pushPanelQueued({ name: panel_names.SEARCH_PANEL }));
 ```
 **예상 로그**:
 ```
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED { action: 'PUSH_PANEL', queueId: 'queue_item_1_1699999999999' }
 [panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE { isProcessing: false, queueLength: 1 }
 [panelReducer] 🟡 PROCESSING_QUEUE_ITEM { action: 'PUSH_PANEL', queueId: 'queue_item_1_1699999999999', remainingQueueLength: 0 }
 [panelReducer] 🔵 PUSH_PANEL START { newPanelName: 'SEARCH_PANEL', currentPanels: [...], duplicatable: false }
 [panelReducer] 🔵 PUSH_PANEL END { resultPanels: [...], lastAction: 'push' }
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED { action: 'PUSH_PANEL', queueId: 'queue_item_1_1699999999999', processingTime: 2 }
 ```
 ### 방법 2: Redux DevTools 확인
 Redux DevTools를 사용하여 액션 흐름을 확인:
 1. Chrome 확장 프로그램: Redux DevTools 설치
 2. 개발자 도구에서 "Redux" 탭 선택
 3. 다음 액션들이 순서대로 dispatch되는지 확인:
   - `ENQUEUE_PANEL_ACTION`
   - `PROCESS_PANEL_QUEUE`
   - `PUSH_PANEL` (또는 다른 패널 액션)
 ### 방법 3: State 확인
 Redux state를 확인하여 큐 관련 상태가 정상적으로 업데이트되는지 확인:
 ```javascript
 // 콘솔에서 실행
 store.getState().panels
 ```
 **예상 출력**:
 ```javascript
 {
  panels: [...],  // 실제 패널들
  lastPanelAction: 'push',
  // 큐 관련 상태
  panelActionQueue: [],  // 처리 대기 중인 큐 (처리 후 비어있음)
  isProcessingQueue: false,
  queueError: null,
  queueStats: {
    totalProcessed: 1,
    failedCount: 0,
    averageProcessingTime: 2.5
  },
  // 비동기 액션 관련
  asyncActions: {},
  completedAsyncActions: [],
  failedAsyncActions: []
 }
 ```
 ---
 ## 트러블슈팅
 ### 문제 1: 큐가 처리되지 않음
 #### 증상
 ```javascript
 dispatch(pushPanelQueued({ name: panel_names.SEARCH_PANEL }));
 // 아무 일도 일어나지 않음
 // 로그도 출력되지 않음
 ```
 #### 원인
 panelQueueMiddleware가 등록되지 않음
 #### 해결 방법
 1. `store.js` 파일 확인:
   ```javascript
   // import가 있는지 확인
   import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
   // applyMiddleware에 추가되어 있는지 확인
   applyMiddleware(..., panelQueueMiddleware)
   ```
 2. 파일 저장 후 앱 재시작
 3. 브라우저 캐시 삭제 (Ctrl+Shift+R 또는 Cmd+Shift+R)
 ### 문제 2: 미들웨어 파일을 찾을 수 없음
 #### 증상
 ```
 Error: Cannot find module '../middleware/panelQueueMiddleware'
 ```
 #### 원인
 파일이 존재하지 않거나 경로가 잘못됨
 #### 해결 방법
 1. 파일 존재 확인:
   ```bash
   ls -la com.twin.app.shoptime/src/middleware/panelQueueMiddleware.js
   ```
 2. 파일이 없다면 최신 코드 pull:
   ```bash
   git fetch origin
   git pull origin main
   ```
 3. 여전히 없다면 커밋 확인:
   ```bash
   git log --oneline --grep="panelQueueMiddleware"
   # 5bd2774 [251106] feat: Queued Panel functions
   ```
 ### 문제 3: 로그는 보이는데 패널이 열리지 않음
 #### 증상
 ```
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED
 // 하지만 패널이 화면에 표시되지 않음
 ```
 #### 원인
 UI 렌더링 문제 (Redux는 정상 작동)
 #### 해결 방법
 1. Redux state 확인:
   ```javascript
   console.log(store.getState().panels.panels);
   // 패널이 배열에 추가되었는지 확인
   ```
 2. 패널 컴포넌트 렌더링 로직 확인
 3. React DevTools로 컴포넌트 트리 확인
 ### 문제 4: 타입 에러
 #### 증상
 ```
 Error: Cannot read property 'type' of undefined
 ReferenceError: types is not defined
 ```
 #### 원인
 actionTypes.js에 필요한 타입이 정의되지 않음
 #### 해결 방법
 1. `src/actions/actionTypes.js` 확인:
   ```javascript
   export const types = {
     // ... 기존 타입들 ...
     // 큐 관련 타입들
     ENQUEUE_PANEL_ACTION: 'ENQUEUE_PANEL_ACTION',
     PROCESS_PANEL_QUEUE: 'PROCESS_PANEL_QUEUE',
     CLEAR_PANEL_QUEUE: 'CLEAR_PANEL_QUEUE',
     SET_QUEUE_PROCESSING: 'SET_QUEUE_PROCESSING',
     // 비동기 액션 타입들
     ENQUEUE_ASYNC_PANEL_ACTION: 'ENQUEUE_ASYNC_PANEL_ACTION',
     COMPLETE_ASYNC_PANEL_ACTION: 'COMPLETE_ASYNC_PANEL_ACTION',
     FAIL_ASYNC_PANEL_ACTION: 'FAIL_ASYNC_PANEL_ACTION',
   };
   ```
 2. 없다면 추가 후 저장
 ### 문제 5: 순서가 여전히 보장되지 않음
 #### 증상
 ```javascript
 dispatch(pushPanelQueued({ name: 'PANEL_1' }));
 dispatch(pushPanelQueued({ name: 'PANEL_2' }));
 // PANEL_2가 먼저 열림
 ```
 #### 원인
 일반 `pushPanel`과 `pushPanelQueued`를 혼용
 #### 해결 방법
 순서를 보장하려면 **모두** queued 버전 사용:
 ```javascript
 // ❌ 잘못된 사용
 dispatch(pushPanel({ name: 'PANEL_1' }));  // 일반 버전
 dispatch(pushPanelQueued({ name: 'PANEL_2' }));  // 큐 버전
 // ✅ 올바른 사용
 dispatch(pushPanelQueued({ name: 'PANEL_1' }));
 dispatch(pushPanelQueued({ name: 'PANEL_2' }));
 // 또는
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: 'PANEL_1' }),
  pushPanelQueued({ name: 'PANEL_2' })
 ]));
 ```
 ---
 ## 빠른 체크리스트
 설정이 완료되었는지 빠르게 확인:
 - [ ] `src/store/store.js`에 `import panelQueueMiddleware` 추가됨
 - [ ] `applyMiddleware`에 `panelQueueMiddleware` 추가됨 (맨 마지막 위치)
 - [ ] 파일 저장 및 앱 재시작
 - [ ] 브라우저 콘솔에서 큐 관련 로그 확인
 - [ ] Redux DevTools에서 액션 흐름 확인
 - [ ] Redux state에서 큐 관련 상태 확인
 모든 항목이 체크되었다면 설정 완료! 🎉
 ---
 ## 참고 자료
 - [README.md](./README.md) - 전체 개요
 - [04-solution-queue-system.md](./04-solution-queue-system.md) - 큐 시스템 상세 설명
 - [05-usage-patterns.md](./05-usage-patterns.md) - 사용 패턴 및 예제
 - [07-changelog.md](./07-changelog.md) - 변경 이력
 ---
 **작성일**: 2025-11-10
 **최종 수정일**: 2025-11-10
--- a/.docs/dispatch-async/07-changelog.md
+++ b/.docs/dispatch-async/07-changelog.md
@@ -1,314 +0,0 @@
 # 변경 이력 (Changelog)
 ## [2025-11-10] - 미들웨어 등록 및 문서 개선
 ### 🔧 수정 (Fixed)
 #### store.js - panelQueueMiddleware 등록
 **커밋**: `c12cc91 [수정] panelQueueMiddleware 등록 및 문서 업데이트`
 **문제**:
 - panelQueueMiddleware가 store.js에 등록되어 있지 않았음
 - 큐 시스템이 작동하지 않는 치명적인 문제
 - `ENQUEUE_PANEL_ACTION` dispatch 시 자동으로 `PROCESS_PANEL_QUEUE`가 실행되지 않음
 **해결**:
 ```javascript
 // src/store/store.js
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 export const store = createStore(
  rootReducer,
  applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
 );
 ```
 **영향**:
 - ✅ 큐 기반 패널 액션 시스템이 정상 작동
 - ✅ 패널 액션 순서 보장
 - ✅ 비동기 패널 액션 자동 처리
 ### 📝 문서 (Documentation)
 #### README.md
 - "설치 및 설정" 섹션 추가
 - panelQueueMiddleware 등록 필수 사항 강조
 - 등록하지 않으면 큐 시스템이 작동하지 않는다는 경고 추가
 #### 04-solution-queue-system.md
 - "사전 요구사항" 섹션 추가
 - 미들웨어 등록 코드 예제 포함
 - `src/store/store.js`를 관련 파일에 추가
 #### 05-usage-patterns.md
 - "초기 설정 확인사항" 체크리스트 추가
 - panelQueueMiddleware 등록 여부를 최우선 확인 항목으로 배치
 ---
 ## [2025-11-10] - 초기 문서 작성
 ### ✨ 추가 (Added)
 #### 문서 작성
 **커밋**: `f75860c [문서화] Dispatch 비동기 처리 순서 보장 솔루션 문서 작성`
 dispatch 비동기 처리 순서 보장 문제와 해결 방법을 체계적으로 정리한 문서 세트:
 1. **README.md**
   - 전체 개요 및 목차
   - 주요 솔루션 요약
   - 관련 파일 목록
   - 커밋 히스토리
 2. **01-problem.md**
   - 문제 상황 및 원인 분석
   - Redux-thunk에서 dispatch 순서가 보장되지 않는 이유
   - 실제 발생 가능한 버그 시나리오
   - 기존 해결 방법의 한계
 3. **02-solution-dispatch-helper.md**
   - dispatchHelper.js 솔루션 설명
   - 5가지 헬퍼 함수 상세 설명:
     - `createSequentialDispatch`
     - `createApiThunkWithChain`
     - `withLoadingState`
     - `createConditionalDispatch`
     - `createParallelDispatch`
   - Before/After 코드 비교
   - 실제 사용 예제
 4. **03-solution-async-utils.md**
   - asyncActionUtils.js 솔루션 설명
   - API 성공 기준 명확화 (HTTP 200-299 + retCode 0/'0')
   - Promise 체인 보장 방법 (reject 없이 resolve만 사용)
   - 주요 함수 설명:
     - `isApiSuccess`
     - `fetchApi`
     - `tAxiosToPromise`
     - `wrapAsyncAction`
     - `withTimeout`
     - `executeParallelAsyncActions`
 5. **04-solution-queue-system.md**
   - 큐 기반 패널 액션 시스템 설명
   - 기본 패널 액션 (pushPanelQueued, popPanelQueued 등)
   - 비동기 패널 액션 (enqueueAsyncPanelAction)
   - API 호출 후 패널 액션 (createApiWithPanelActions)
   - 비동기 액션 시퀀스 (createAsyncPanelSequence)
   - panelQueueMiddleware 동작 원리
   - 리듀서 상태 구조
 6. **05-usage-patterns.md**
   - 솔루션 선택 가이드 (의사결정 플로우차트)
   - 솔루션 비교표
   - 공통 패턴 Before/After 비교
   - 실전 예제 5가지:
     - 검색 기능
     - 장바구니 추가
     - 로그인 플로우
     - 다단계 폼 제출
     - 병렬 데이터 로딩
   - 마이그레이션 가이드
   - Best Practices
   - 체크리스트
 **문서 통계**:
 - 총 6개 마크다운 파일
 - 약 3,000줄
 - 50개 이상의 코드 예제
 - Before/After 비교 20개 이상
 ---
 ## [2025-11-06] - 큐 시스템 구현
 ### ✨ 추가 (Added)
 #### Dispatch Queue Implementation
 **커밋**: `f9290a1 [251106] fix: Dispatch Queue implementation`
 - `asyncActionUtils.js` 추가
  - Promise 기반 비동기 액션 처리
  - API 성공 기준 명확화
  - 타임아웃 지원
 - `queuedPanelActions.js` 확장
  - 비동기 패널 액션 지원
  - API 호출 후 패널 액션 자동 실행
  - 비동기 액션 시퀀스
 - `panelReducer.js` 확장
  - 큐 상태 관리
  - 비동기 액션 상태 추적
  - 큐 처리 통계
 #### Queued Panel Functions
 **커밋**: `5bd2774 [251106] feat: Queued Panel functions`
 - `queuedPanelActions.js` 초기 구현
  - 기본 큐 액션 (pushPanelQueued, popPanelQueued 등)
  - 여러 액션 일괄 큐 추가
  - 패널 시퀀스 생성
 - `panelQueueMiddleware.js` 추가
  - 큐 액션 자동 감지
  - 순차 처리 자동 시작
  - 연속 처리 지원
 - `panelReducer.js` 큐 기능 추가
  - 큐 상태 관리
  - 큐 처리 로직
  - 큐 통계 수집
 ---
 ## [2025-11-05] - dispatch 헬퍼 함수
 ### ✨ 추가 (Added)
 #### dispatchHelper.js
 **커밋**: `9490d72 [251105] feat: dispatchHelper.js`
 Promise 체인 기반의 dispatch 순차 실행 헬퍼 함수 모음:
 - `createSequentialDispatch`
  - 여러 dispatch를 순차적으로 실행
  - Promise 체인으로 순서 보장
  - delay 옵션 지원
  - stopOnError 옵션 지원
 - `createApiThunkWithChain`
  - API 호출 후 dispatch 자동 체이닝
  - TAxios onSuccess/onFail 패턴 호환
  - response를 각 action에 전달
  - 에러 처리 action 지원
 - `withLoadingState`
  - 로딩 상태 자동 관리
  - changeAppStatus 자동 on/off
  - 성공/에러 시 추가 dispatch 지원
  - loadingType 옵션
 - `createConditionalDispatch`
  - 조건에 따라 다른 dispatch 실행
  - getState() 결과 기반 분기
  - 배열 또는 단일 action 지원
 - `createParallelDispatch`
  - 여러 API를 병렬로 실행
  - Promise.all 사용
  - 로딩 상태 관리 옵션
 ---
 ## 관련 커밋 전체 목록
 ```bash
 c12cc91 [수정] panelQueueMiddleware 등록 및 문서 업데이트
 f75860c [문서화] Dispatch 비동기 처리 순서 보장 솔루션 문서 작성
 f9290a1 [251106] fix: Dispatch Queue implementation
 5bd2774 [251106] feat: Queued Panel functions
 9490d72 [251105] feat: dispatchHelper.js
 ```
 ---
 ## 마이그레이션 가이드
 ### 기존 코드에서 새 솔루션으로 전환
 #### 1단계: setTimeout 패턴 제거
 ```javascript
 // Before
 dispatch(action1());
 setTimeout(() => {
  dispatch(action2());
 }, 0);
 // After
 dispatch(createSequentialDispatch([action1(), action2()]));
 ```
 #### 2단계: API 패턴 개선
 ```javascript
 // Before
 const onSuccess = (response) => {
  dispatch({ type: types.ACTION_1, payload: response.data });
  dispatch(action2());
 };
 TAxios(..., onSuccess, onFail);
 // After
 dispatch(createApiThunkWithChain(
  (d, gs, onS, onF) => TAxios(d, gs, ..., onS, onF),
  [
    (response) => ({ type: types.ACTION_1, payload: response.data }),
    action2()
  ]
 ));
 ```
 #### 3단계: 패널 액션을 큐 버전으로 전환
 ```javascript
 // Before
 dispatch(pushPanel({ name: panel_names.SEARCH }));
 // After
 dispatch(pushPanelQueued({ name: panel_names.SEARCH }));
 ```
 ---
 ## Breaking Changes
 ### 없음
 모든 새로운 기능은 기존 코드와 완전히 호환됩니다:
 - 기존 `pushPanel`, `popPanel` 등은 그대로 동작
 - 새로운 큐 버전은 선택적으로 사용 가능
 - 점진적 마이그레이션 가능
 ---
 ## 알려진 이슈
 ### 해결됨
 1. **panelQueueMiddleware 미등록 문제** (2025-11-10 해결)
   - 문제: 큐 시스템이 작동하지 않음
   - 해결: store.js에 미들웨어 등록
 ### 현재 이슈
 없음
 ---
 ## 향후 계획
 ### 예정된 개선사항
 1. **성능 최적화**
   - 큐 처리 성능 모니터링
   - 대량 액션 처리 최적화
 2. **에러 처리 강화**
   - 더 상세한 에러 메시지
   - 에러 복구 전략
 3. **개발자 도구**
   - 큐 상태 시각화
   - 디버깅 도구
 4. **테스트 코드**
   - 단위 테스트 추가
   - 통합 테스트 추가
 ---
 **작성일**: 2025-11-10
 **최종 수정일**: 2025-11-10
--- a/.docs/dispatch-async/08-troubleshooting.md
+++ b/.docs/dispatch-async/08-troubleshooting.md
@@ -1,606 +0,0 @@
 # 트러블슈팅 가이드
 ## 📋 목차
 1. [일반적인 문제](#일반적인-문제)
 2. [큐 시스템 문제](#큐-시스템-문제)
 3. [API 호출 문제](#api-호출-문제)
 4. [성능 문제](#성능-문제)
 5. [디버깅 팁](#디버깅-팁)
 ---
 ## 일반적인 문제
 ### 문제 1: dispatch 순서가 여전히 보장되지 않음
 #### 증상
 ```javascript
 dispatch(action1());
 dispatch(action2());
 dispatch(action3());
 // 실행 순서: action2 → action3 → action1
 ```
 #### 가능한 원인
 1. **일반 dispatch와 큐 dispatch 혼용**
   ```javascript
   // ❌ 잘못된 사용
   dispatch(pushPanel({ name: 'PANEL_1' }));  // 일반
   dispatch(pushPanelQueued({ name: 'PANEL_2' }));  // 큐
   ```
 2. **async/await 없이 비동기 처리**
   ```javascript
   // ❌ 잘못된 사용
   fetchData();  // Promise를 기다리지 않음
   dispatch(action());
   ```
 3. **헬퍼 함수를 사용하지 않음**
   ```javascript
   // ❌ 잘못된 사용
   dispatch(asyncAction1());
   dispatch(asyncAction2());  // asyncAction1이 완료되기 전에 실행
   ```
 #### 해결 방법
 **방법 1: 큐 시스템 사용** (패널 액션인 경우)
 ```javascript
 // ✅ 올바른 사용
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: 'PANEL_1' }),
  pushPanelQueued({ name: 'PANEL_2' }),
  pushPanelQueued({ name: 'PANEL_3' })
 ]));
 ```
 **방법 2: createSequentialDispatch 사용**
 ```javascript
 // ✅ 올바른 사용
 dispatch(createSequentialDispatch([
  action1(),
  action2(),
  action3()
 ]));
 ```
 **방법 3: async/await 사용** (Chrome 68+)
 ```javascript
 // ✅ 올바른 사용
 export const myAction = () => async (dispatch, getState) => {
  await dispatch(action1());
  await dispatch(action2());
  await dispatch(action3());
 };
 ```
 ---
 ### 문제 2: "Cannot find module" 에러
 #### 증상
 ```
 Error: Cannot find module '../utils/dispatchHelper'
 Error: Cannot find module '../middleware/panelQueueMiddleware'
 ```
 #### 원인
 - 파일이 존재하지 않음
 - import 경로가 잘못됨
 - 빌드가 필요함
 #### 해결 방법
 **Step 1: 파일 존재 확인**
 ```bash
 # 프로젝트 루트에서 실행
 ls -la com.twin.app.shoptime/src/utils/dispatchHelper.js
 ls -la com.twin.app.shoptime/src/middleware/panelQueueMiddleware.js
 ls -la com.twin.app.shoptime/src/utils/asyncActionUtils.js
 ```
 **Step 2: 최신 코드 pull**
 ```bash
 git fetch origin
 git pull origin <branch-name>
 ```
 **Step 3: node_modules 재설치**
 ```bash
 cd com.twin.app.shoptime
 rm -rf node_modules package-lock.json
 npm install
 ```
 **Step 4: 빌드 재실행**
 ```bash
 npm run build
 # 또는
 npm start
 ```
 ---
 ### 문제 3: 타입 에러 (types is not defined)
 #### 증상
 ```
 ReferenceError: types is not defined
 TypeError: Cannot read property 'ENQUEUE_PANEL_ACTION' of undefined
 ```
 #### 원인
 actionTypes.js에 필요한 타입이 정의되지 않음
 #### 해결 방법
 **Step 1: actionTypes.js 확인**
 ```javascript
 // src/actions/actionTypes.js
 export const types = {
  // ... 기존 타입들 ...
  // 큐 관련 타입들 (필수!)
  ENQUEUE_PANEL_ACTION: 'ENQUEUE_PANEL_ACTION',
  PROCESS_PANEL_QUEUE: 'PROCESS_PANEL_QUEUE',
  CLEAR_PANEL_QUEUE: 'CLEAR_PANEL_QUEUE',
  SET_QUEUE_PROCESSING: 'SET_QUEUE_PROCESSING',
  // 비동기 액션 타입들 (필수!)
  ENQUEUE_ASYNC_PANEL_ACTION: 'ENQUEUE_ASYNC_PANEL_ACTION',
  COMPLETE_ASYNC_PANEL_ACTION: 'COMPLETE_ASYNC_PANEL_ACTION',
  FAIL_ASYNC_PANEL_ACTION: 'FAIL_ASYNC_PANEL_ACTION',
 };
 ```
 **Step 2: import 확인**
 ```javascript
 import { types } from '../actions/actionTypes';
 ```
 ---
 ## 큐 시스템 문제
 ### 문제 4: 큐가 처리되지 않음
 #### 증상
 ```javascript
 dispatch(pushPanelQueued({ name: panel_names.SEARCH_PANEL }));
 // 아무 일도 일어나지 않음
 // 콘솔 로그도 없음
 ```
 #### 원인
 **panelQueueMiddleware가 등록되지 않음** (가장 흔한 문제!)
 #### 해결 방법
 **Step 1: store.js 확인**
 ```javascript
 // src/store/store.js
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 export const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk,
    panelHistoryMiddleware,
    autoCloseMiddleware,
    panelQueueMiddleware  // ← 이것이 있는지 확인!
  )
 );
 ```
 **Step 2: import 경로 확인**
 ```javascript
 // ✅ 올바른 import
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 // ❌ 잘못된 import
 import { panelQueueMiddleware } from '../middleware/panelQueueMiddleware';
 // default export이므로 중괄호 없이 import해야 함
 ```
 **Step 3: 앱 재시작**
 ```bash
 # 개발 서버 재시작
 npm start
 ```
 **Step 4: 브라우저 캐시 삭제**
 - Chrome: Ctrl+Shift+R (Windows) 또는 Cmd+Shift+R (Mac)
 ---
 ### 문제 5: 큐가 무한 루프에 빠짐
 #### 증상
 ```
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED
 [panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 ... (무한 반복)
 ```
 #### 원인
 1. 큐 처리 중에 다시 큐에 액션 추가
 2. `isProcessingQueue` 플래그가 제대로 설정되지 않음
 #### 해결 방법
 **방법 1: 큐 액션 내부에서 일반 dispatch 사용**
 ```javascript
 // ❌ 잘못된 사용 (무한 루프 발생)
 export const myAction = () => (dispatch) => {
  dispatch(pushPanelQueued({ name: 'PANEL_1' }));
  dispatch(pushPanelQueued({ name: 'PANEL_2' }));  // 큐 처리 중 큐 추가
 };
 // ✅ 올바른 사용
 export const myAction = () => (dispatch) => {
  dispatch(enqueueMultiplePanelActions([
    pushPanelQueued({ name: 'PANEL_1' }),
    pushPanelQueued({ name: 'PANEL_2' })
  ]));
 };
 ```
 **방법 2: 리듀서 로직 확인**
 ```javascript
 // panelReducer.js에서 확인
 case types.PROCESS_PANEL_QUEUE: {
  // 이미 처리 중이면 무시
  if (state.isProcessingQueue || state.panelActionQueue.length === 0) {
    return state;  // ← 이 로직이 있는지 확인
  }
  // ...
 }
 ```
 ---
 ### 문제 6: 큐 통계가 업데이트되지 않음
 #### 증상
 ```javascript
 store.getState().panels.queueStats
 // { totalProcessed: 0, failedCount: 0, averageProcessingTime: 0 }
 // 항상 0으로 유지됨
 ```
 #### 원인
 큐 처리가 정상적으로 완료되지 않음
 #### 해결 방법
 **Step 1: 콘솔 로그 확인**
 ```
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED  ← 이 로그가 보이는지 확인
 ```
 **Step 2: 에러 발생 확인**
 ```javascript
 store.getState().panels.queueError
 // null이어야 정상
 ```
 **Step 3: 큐 처리 완료 여부 확인**
 ```javascript
 store.getState().panels.isProcessingQueue
 // false여야 정상 (처리 완료)
 ```
 ---
 ## API 호출 문제
 ### 문제 7: API 성공인데 onFail이 호출됨
 #### 증상
 ```javascript
 // API 호출
 // HTTP 200, retCode: 0
 // 그런데 onFail이 호출됨
 ```
 #### 원인
 프로젝트 성공 기준을 이해하지 못함
 #### 프로젝트 성공 기준
 **HTTP 200-299 + retCode 0/'0' 둘 다 만족해야 성공!**
 ```javascript
 // ✅ 성공 케이스
 { status: 200, data: { retCode: 0, data: {...} } }
 { status: 200, data: { retCode: '0', data: {...} } }
 // ❌ 실패 케이스
 { status: 200, data: { retCode: 1, message: '에러' } }  // retCode가 0이 아님
 { status: 500, data: { retCode: 0, data: {...} } }  // HTTP 에러
 ```
 #### 해결 방법
 **방법 1: isApiSuccess 사용**
 ```javascript
 import { isApiSuccess } from '../utils/asyncActionUtils';
 const response = { status: 200 };
 const responseData = { retCode: 1, message: '에러' };
 if (isApiSuccess(response, responseData)) {
  // 성공 처리
 } else {
  // 실패 처리 (retCode가 1이므로 실패!)
 }
 ```
 **방법 2: asyncActionUtils 사용**
 ```javascript
 import { tAxiosToPromise } from '../utils/asyncActionUtils';
 const result = await tAxiosToPromise(...);
 if (result.success) {
  // HTTP 200-299 + retCode 0/'0'
  console.log(result.data);
 } else {
  // 실패
  console.error(result.error);
 }
 ```
 ---
 ### 문제 8: API 타임아웃이 작동하지 않음
 #### 증상
 ```javascript
 dispatch(enqueueAsyncPanelAction({
  asyncAction: (d, gs, onS, onF) => { /* 느린 API */ },
  timeout: 5000  // 5초
 }));
 // 10초가 지나도 타임아웃되지 않음
 ```
 #### 원인
 1. `withTimeout`이 적용되지 않음
 2. 타임아웃 값이 잘못 설정됨
 #### 해결 방법
 **방법 1: enqueueAsyncPanelAction 사용 시**
 ```javascript
 // ✅ timeout 옵션 사용
 dispatch(enqueueAsyncPanelAction({
  asyncAction: (dispatch, getState, onSuccess, onFail) => {
    TAxios(dispatch, getState, 'get', URL, {}, {}, onSuccess, onFail);
  },
  timeout: 5000,  // 5초 (ms 단위)
  onFail: (error) => {
    if (error.code === 'TIMEOUT') {
      console.error('타임아웃 발생!');
    }
  }
 }));
 ```
 **방법 2: withTimeout 직접 사용**
 ```javascript
 import { withTimeout, fetchApi } from '../utils/asyncActionUtils';
 const result = await withTimeout(
  fetchApi('/api/slow-endpoint'),
  5000,  // 5초
  '요청 시간이 초과되었습니다'
 );
 if (result.error?.code === 'TIMEOUT') {
  console.error('타임아웃!');
 }
 ```
 ---
 ## 성능 문제
 ### 문제 9: 큐 처리가 너무 느림
 #### 증상
 ```javascript
 // 100개의 패널 액션을 큐에 추가
 // 처리하는데 10초 이상 소요
 ```
 #### 원인
 1. 각 액션이 복잡한 로직 수행
 2. 동기적으로 처리되어 병목 발생
 #### 해결 방법
 **방법 1: 불필요한 액션 제거**
 ```javascript
 // ❌ 잘못된 사용
 for (let i = 0; i < 100; i++) {
  dispatch(pushPanelQueued({ name: `PANEL_${i}` }));
 }
 // ✅ 올바른 사용 - 필요한 것만
 dispatch(pushPanelQueued({ name: 'MAIN_PANEL' }));
 ```
 **방법 2: 배치 처리**
 ```javascript
 // 한 번에 여러 액션 추가
 dispatch(enqueueMultiplePanelActions(
  panels.map(panel => pushPanelQueued(panel))
 ));
 ```
 **방법 3: 병렬 처리가 필요하면 큐 사용 안함**
 ```javascript
 // 순서가 중요하지 않은 경우
 dispatch(createParallelDispatch([
  fetchData1(),
  fetchData2(),
  fetchData3()
 ]));
 ```
 ---
 ### 문제 10: 메모리 누수
 #### 증상
 ```javascript
 // 오랜 시간 앱 사용 후
 store.getState().panels.completedAsyncActions.length
 // → 10000개 이상
 ```
 #### 원인
 완료된 비동기 액션 ID가 계속 누적됨
 #### 해결 방법
 **방법 1: 주기적으로 클리어**
 ```javascript
 // 일정 시간마다 완료된 액션 정리
 setInterval(() => {
  const state = store.getState().panels;
  if (state.completedAsyncActions.length > 1000) {
    // 클리어 액션 dispatch
    dispatch({ type: types.CLEAR_COMPLETED_ASYNC_ACTIONS });
  }
 }, 60000);  // 1분마다
 ```
 **방법 2: 리듀서에 최대 개수 제한 추가**
 ```javascript
 // panelReducer.js
 case types.COMPLETE_ASYNC_PANEL_ACTION: {
  const newCompleted = [...state.completedAsyncActions, action.payload.actionId];
  // 최근 100개만 유지
  const trimmed = newCompleted.slice(-100);
  return {
    ...state,
    completedAsyncActions: trimmed
  };
 }
 ```
 ---
 ## 디버깅 팁
 ### Tip 1: 콘솔 로그 활용
 모든 헬퍼 함수와 미들웨어는 상세한 로그를 출력합니다:
 ```javascript
 // 큐 관련 로그
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED
 [panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] 🟡 PROCESSING_QUEUE_ITEM
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED
 // 비동기 액션 로그
 [queuedPanelActions] 🔄 ENQUEUE_ASYNC_PANEL_ACTION
 [queuedPanelActions] ⚡ EXECUTING_ASYNC_ACTION
 [queuedPanelActions] ✅ ASYNC_ACTION_SUCCESS
 // asyncActionUtils 로그
 [asyncActionUtils] 🌐 FETCH_API_START
 [asyncActionUtils] 📊 API_RESPONSE
 [asyncActionUtils] ✅ TAXIOS_SUCCESS
 ```
 ### Tip 2: Redux DevTools 사용
 1. Chrome 확장 프로그램 설치: Redux DevTools
 2. 개발자 도구 → Redux 탭
 3. 액션 히스토리 확인
 4. State diff 확인
 ### Tip 3: 브레이크포인트 설정
 ```javascript
 // 디버깅용 브레이크포인트
 export const myAction = () => (dispatch, getState) => {
  debugger;  // ← 여기서 멈춤
  const state = getState();
  console.log('Current state:', state);
  dispatch(action1());
  debugger;  // ← 여기서 다시 멈춤
 };
 ```
 ### Tip 4: State 스냅샷
 ```javascript
 // 콘솔에서 실행
 const snapshot = JSON.parse(JSON.stringify(store.getState()));
 console.log(snapshot);
 // 특정 부분만
 const panelsSnapshot = JSON.parse(JSON.stringify(store.getState().panels));
 console.log(panelsSnapshot);
 ```
 ### Tip 5: 큐 상태 모니터링
 ```javascript
 // 콘솔에서 실행
 window.monitorQueue = setInterval(() => {
  const state = store.getState().panels;
  console.log('Queue status:', {
    queueLength: state.panelActionQueue.length,
    isProcessing: state.isProcessingQueue,
    stats: state.queueStats
  });
 }, 1000);
 // 중지
 clearInterval(window.monitorQueue);
 ```
 ---
 ## 도움이 필요하신가요?
 ### 체크리스트
 문제 해결 전에 다음을 확인하세요:
 - [ ] panelQueueMiddleware가 store.js에 등록되어 있는가?
 - [ ] 필요한 파일들이 모두 존재하는가?
 - [ ] actionTypes.js에 필요한 타입들이 정의되어 있는가?
 - [ ] 콘솔 로그를 확인했는가?
 - [ ] Redux DevTools로 액션 흐름을 확인했는가?
 - [ ] 앱을 재시작했는가?
 - [ ] 브라우저 캐시를 삭제했는가?
 ### 추가 리소스
 - [README.md](./README.md) - 전체 개요
 - [06-setup-guide.md](./06-setup-guide.md) - 설정 가이드
 - [05-usage-patterns.md](./05-usage-patterns.md) - 사용 패턴
 - [07-changelog.md](./07-changelog.md) - 변경 이력
 ---
 **작성일**: 2025-11-10
 **최종 수정일**: 2025-11-10
--- a/.docs/dispatch-async/README.md
+++ b/.docs/dispatch-async/README.md
@@ -1,137 +0,0 @@
 # Dispatch 비동기 처리 순서 보장 솔루션
 ## 📋 목차
 1. [문제 상황](./01-problem.md)
 2. [해결 방법 1: dispatchHelper.js](./02-solution-dispatch-helper.md)
 3. [해결 방법 2: asyncActionUtils.js](./03-solution-async-utils.md)
 4. [해결 방법 3: 큐 기반 패널 액션 시스템](./04-solution-queue-system.md)
 5. [사용 패턴 및 예제](./05-usage-patterns.md)
 6. [설정 가이드](./06-setup-guide.md) ⭐
 7. [변경 이력 (Changelog)](./07-changelog.md)
 8. [트러블슈팅](./08-troubleshooting.md) ⭐
 ## 🎯 개요
 이 문서는 Redux-thunk 환경에서 여러 개의 dispatch를 순차적으로 실행할 때 순서가 보장되지 않는 문제를 해결하기 위해 구현된 솔루션들을 정리한 문서입니다.
 ## ⚙️ 설치 및 설정
 ### 필수: panelQueueMiddleware 등록
 큐 기반 패널 액션 시스템을 사용하려면 **반드시** store에 미들웨어를 등록해야 합니다.
 **파일**: `src/store/store.js`
 ```javascript
 import { applyMiddleware, combineReducers, createStore } from 'redux';
 import thunk from 'redux-thunk';
 import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware';
 import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware';
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware'; // ← 추가
 // ... reducers ...
 export const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk,
    panelHistoryMiddleware,
    autoCloseMiddleware,
    panelQueueMiddleware  // ← 추가 (맨 마지막에 위치)
  )
 );
 ```
 **⚠️ 중요**: panelQueueMiddleware를 등록하지 않으면 큐 시스템이 작동하지 않습니다!
 ## 🚀 주요 솔루션
 ### 1. dispatchHelper.js (2025-11-05)
 Promise 체인 기반의 dispatch 순차 실행 헬퍼 함수 모음
 - `createSequentialDispatch`: 순차적 dispatch 실행
 - `createApiThunkWithChain`: API 후 dispatch 자동 체이닝
 - `withLoadingState`: 로딩 상태 자동 관리
 - `createConditionalDispatch`: 조건부 dispatch
 - `createParallelDispatch`: 병렬 dispatch
 ### 2. asyncActionUtils.js (2025-11-06)
 Promise 기반 비동기 액션 처리 및 성공/실패 기준 명확화
 - API 성공 기준: HTTP 200-299 + retCode 0/'0'
 - 모든 비동기 작업을 Promise로 래핑
 - reject 없이 resolve + success 플래그 사용
 - 타임아웃 지원
 ### 3. 큐 기반 패널 액션 시스템 (2025-11-06)
 미들웨어 기반의 액션 큐 처리 시스템
 - `queuedPanelActions.js`: 큐 기반 패널 액션
 - `panelQueueMiddleware.js`: 자동 큐 처리 미들웨어
 - `panelReducer.js`: 큐 상태 관리
 ## 📊 커밋 히스토리
 ```
 f9290a1 [251106] fix: Dispatch Queue implementation
  - asyncActionUtils.js 추가
  - queuedPanelActions.js 확장
  - panelReducer.js 확장
 5bd2774 [251106] feat: Queued Panel functions
  - queuedPanelActions.js 초기 구현
  - panelQueueMiddleware.js 추가
 9490d72 [251105] feat: dispatchHelper.js
  - createSequentialDispatch
  - createApiThunkWithChain
  - withLoadingState
  - createConditionalDispatch
  - createParallelDispatch
 ```
 ## 📂 관련 파일
 ### Core Files
 - `src/utils/dispatchHelper.js`
 - `src/utils/asyncActionUtils.js`
 - `src/actions/queuedPanelActions.js`
 - `src/middleware/panelQueueMiddleware.js`
 - `src/reducers/panelReducer.js`
 ### Example Files
 - `src/actions/homeActions.js`
 - `src/actions/cartActions.js`
 ## 🔑 핵심 개선 사항
 1. ✅ **순서 보장**: Promise 체인과 큐 시스템으로 dispatch 순서 보장
 2. ✅ **에러 처리**: reject 대신 resolve + success 플래그로 체인 보장
 3. ✅ **성공 기준 명확화**: HTTP 상태 + retCode 둘 다 확인
 4. ✅ **타임아웃 지원**: withTimeout으로 응답 없는 API 처리
 5. ✅ **로깅**: 모든 단계에서 상세한 로그 출력
 6. ✅ **호환성**: 기존 코드와 완전 호환 (선택적 사용 가능)
 ## 🎓 학습 자료
 각 솔루션에 대한 자세한 설명은 개별 문서를 참고하세요.
 ### 시작하기
 - **처음 시작한다면** → [06-setup-guide.md](./06-setup-guide.md) ⭐
 - **문제가 발생했다면** → [08-troubleshooting.md](./08-troubleshooting.md) ⭐
 ### 이해하기
 - 기존 코드의 문제점이 궁금하다면 → [01-problem.md](./01-problem.md)
 - dispatchHelper 사용법이 궁금하다면 → [02-solution-dispatch-helper.md](./02-solution-dispatch-helper.md)
 - asyncActionUtils 사용법이 궁금하다면 → [03-solution-async-utils.md](./03-solution-async-utils.md)
 - 큐 시스템 사용법이 궁금하다면 → [04-solution-queue-system.md](./04-solution-queue-system.md)
 ### 실전 적용
 - 실제 사용 예제가 궁금하다면 → [05-usage-patterns.md](./05-usage-patterns.md)
 - 변경 이력을 확인하려면 → [07-changelog.md](./07-changelog.md)
 ---
 **작성일**: 2025-11-10
 **최종 수정일**: 2025-11-10
--- a/.docs/modal-transition-analysis.md
+++ b/.docs/modal-transition-analysis.md
@@ -1,437 +0,0 @@
 # Modal 전환 기능 상세 분석
 **작성일**: 2025-11-10
 **목적**: MediaPlayer.v2.jsx 설계를 위한 필수 기능 분석
 ---
 ## 📋 Modal 모드 전환 플로우
 ### 1. 시작: Modal 모드로 비디오 재생
 ```javascript
 // actions/mediaActions.js - startMediaPlayer()
 dispatch(startMediaPlayer({
  modal: true,
  modalContainerId: 'some-product-id',
  showUrl: 'video-url.mp4',
  thumbnailUrl: 'thumb.jpg',
  // ...
 }));
 ```
 **MediaPanel에서의 처리 (MediaPanel.jsx:114-161)**:
 ```javascript
 useEffect(() => {
  if (panelInfo.modal && panelInfo.modalContainerId) {
    // 1. DOM 노드 찾기
    const node = document.querySelector(
      `[data-spotlight-id="${panelInfo.modalContainerId}"]`
    );
    // 2. 위치와 크기 계산
    const { width, height, top, left } = node.getBoundingClientRect();
    // 3. padding/margin 조정
    const totalOffset = 24; // 6*2 + 6*2
    const adjustedWidth = width - totalOffset;
    const adjustedHeight = height - totalOffset;
    // 4. Fixed 위치 스타일 생성
    const style = {
      width: adjustedWidth + 'px',
      height: adjustedHeight + 'px',
      top: (top + totalOffset/2) + 'px',
      left: (left + totalOffset/2) + 'px',
      position: 'fixed',
      overflow: 'hidden'
    };
    setModalStyle(style);
    setModalScale(adjustedWidth / window.innerWidth);
  }
 }, [panelInfo, isOnTop]);
 ```
 **VideoPlayer에 전달**:
 ```javascript
 <VideoPlayer
  disabled={panelInfo.modal}           // modal에서는 controls 비활성
  spotlightDisabled={panelInfo.modal}  // modal에서는 spotlight 비활성
  style={panelInfo.modal ? modalStyle : {}}
  modalScale={panelInfo.modal ? modalScale : 1}
  modalClassName={panelInfo.modal && panelInfo.modalClassName}
  onClick={onVideoClick}               // 클릭 시 전환
 />
 ```
 ---
 ### 2. 전환: Modal → Fullscreen
 **사용자 액션**: modal 비디오 클릭
 ```javascript
 // MediaPanel.jsx:164-174
 const onVideoClick = useCallback(() => {
  if (panelInfo.modal) {
    dispatch(switchMediaToFullscreen());
  }
 }, [dispatch, panelInfo.modal]);
 ```
 **Redux Action (mediaActions.js:164-208)**:
 ```javascript
 export const switchMediaToFullscreen = () => (dispatch, getState) => {
  const modalMediaPanel = panels.find(
    (panel) => panel.name === panel_names.MEDIA_PANEL &&
               panel.panelInfo?.modal
  );
  if (modalMediaPanel) {
    dispatch(updatePanel({
      name: panel_names.MEDIA_PANEL,
      panelInfo: {
        ...modalMediaPanel.panelInfo,
        modal: false  // 🔑 핵심: modal만 false로 변경
      }
    }));
  }
 };
 ```
 **MediaPanel 재렌더링**:
 ```javascript
 // panelInfo.modal이 false가 되면 useEffect 재실행
 useEffect(() => {
  // modal이 false이면 else if 분기 실행
  else if (isOnTop && !panelInfo.modal && !panelInfo.isMinimized && videoPlayer.current) {
    // 재생 상태 복원
    if (videoPlayer.current?.getMediaState()?.paused) {
      videoPlayer.current.play();
    }
    // controls 표시
    if (!videoPlayer.current.areControlsVisible()) {
      videoPlayer.current.showControls();
    }
  }
 }, [panelInfo, isOnTop]);
 // VideoPlayer에 전달되는 props 변경
 <VideoPlayer
  disabled={false}              // controls 활성화
  spotlightDisabled={false}     // spotlight 활성화
  style={{}}                     // fixed position 제거 → 전체화면
  modalScale={1}
  modalClassName={undefined}
 />
 ```
 ---
 ### 3. 복귀: Fullscreen → Modal (Back 버튼)
 ```javascript
 // MediaPanel.jsx:176-194
 const onClickBack = useCallback((ev) => {
  // modalContainerId가 있으면 modal에서 왔던 것
  if (panelInfo.modalContainerId && !panelInfo.modal) {
    dispatch(PanelActions.popPanel());
    ev?.stopPropagation();
    return;
  }
  // 일반 fullscreen이면 그냥 닫기
  if (!panelInfo.modal) {
    dispatch(PanelActions.popPanel());
    ev?.stopPropagation();
  }
 }, [dispatch, panelInfo]);
 ```
 ---
 ## 🔑 핵심 메커니즘
 ### 1. 같은 MediaPanel 재사용
 - modal → fullscreen 전환 시 패널을 새로 만들지 않음
 - **updatePanel**로 `panelInfo.modal`만 변경
 - **비디오 재생 상태 유지** (같은 컴포넌트 인스턴스)
 ### 2. 스타일 동적 계산
 ```javascript
 // modal=true
 style={{
  position: 'fixed',
  top: '100px',
  left: '200px',
  width: '400px',
  height: '300px'
 }}
 // modal=false
 style={{}}  // 전체화면 (기본 CSS)
 ```
 ### 3. Pause/Resume 관리
 ```javascript
 // modal에서 다른 패널이 위로 올라오면
 useEffect(() => {
  if (panelInfo?.modal) {
    if (!isOnTop) {
      dispatch(pauseModalMedia());  // isPaused: true
    } else if (isOnTop && panelInfo.isPaused) {
      dispatch(resumeModalMedia()); // isPaused: false
    }
  }
 }, [isOnTop, panelInfo, dispatch]);
 // VideoPlayer에서 isPaused 감지하여 play/pause 제어
 useEffect(() => {
  if (panelInfo?.modal && videoPlayer.current) {
    if (panelInfo.isPaused) {
      videoPlayer.current.pause();
    } else if (panelInfo.isPaused === false) {
      videoPlayer.current.play();
    }
  }
 }, [panelInfo?.isPaused, panelInfo?.modal]);
 ```
 ---
 ## 📐 MediaPlayer.v2.jsx가 지원해야 할 기능
 ### ✅ 필수 Props (추가)
 ```javascript
 {
  // 기존
  src,
  autoPlay,
  loop,
  onEnded,
  onError,
  thumbnailUrl,
  videoComponent,
  // Modal 전환 관련 (필수)
  disabled,           // modal=true일 때 true
  spotlightDisabled,  // modal=true일 때 true
  onClick,            // modal일 때 클릭 → switchMediaToFullscreen
  style,              // modal일 때 fixed position style
  modalClassName,     // modal일 때 추가 className
  modalScale,         // modal일 때 scale 값 (QR코드 등에 사용)
  // 패널 정보
  panelInfo: {
    modal,            // modal 모드 여부
    modalContainerId, // modal 기준 컨테이너 ID
    isPaused,         // 일시정지 여부 (다른 패널 위로 올라옴)
    showUrl,          // 비디오 URL
    thumbnailUrl,     // 썸네일 URL
  },
  // 콜백
  onBackButton,       // Back 버튼 핸들러
  // Spotlight
  spotlightId,
 }
 ```
 ### ✅ 필수 기능
 #### 1. Modal 모드 스타일 적용
 ```javascript
 const containerStyle = useMemo(() => {
  if (panelInfo?.modal && style) {
    return style; // MediaPanel에서 계산한 fixed position
  }
  return {}; // 전체화면
 }, [panelInfo?.modal, style]);
 ```
 #### 2. Modal 클릭 처리
 ```javascript
 const handleVideoClick = useCallback(() => {
  if (panelInfo?.modal && onClick) {
    onClick(); // switchMediaToFullscreen 호출
    return;
  }
  // fullscreen이면 controls 토글
  toggleControls();
 }, [panelInfo?.modal, onClick]);
 ```
 #### 3. isPaused 상태 동기화
 ```javascript
 useEffect(() => {
  if (panelInfo?.modal && videoRef.current) {
    if (panelInfo.isPaused) {
      videoRef.current.pause();
    } else if (panelInfo.isPaused === false) {
      videoRef.current.play();
    }
  }
 }, [panelInfo?.isPaused, panelInfo?.modal]);
 ```
 #### 4. Modal → Fullscreen 전환 시 재생 복원
 ```javascript
 useEffect(() => {
  // modal에서 fullscreen으로 전환되었을 때
  if (prevPanelInfo?.modal && !panelInfo?.modal) {
    if (videoRef.current?.paused) {
      videoRef.current.play();
    }
    setControlsVisible(true);
  }
 }, [panelInfo?.modal]);
 ```
 #### 5. Controls/Spotlight 비활성화
 ```javascript
 const shouldDisableControls = panelInfo?.modal || disabled;
 const shouldDisableSpotlight = panelInfo?.modal || spotlightDisabled;
 ```
 ---
 ## 🚫 여전히 제거 가능한 기능
 Modal 전환과 무관한 기능들:
 ```
 ❌ QR코드 오버레이 (PlayerPanel 전용)
 ❌ 전화번호 오버레이 (PlayerPanel 전용)
 ❌ 테마 인디케이터 (PlayerPanel 전용)
 ❌ MediaSlider (seek bar) - 단순 재생만
 ❌ 복잡한 피드백 시스템 (miniFeedback, 8개 Job)
 ❌ Announce/Accessibility 복잡계
 ❌ FloatingLayer
 ❌ Redux 통합 (updateVideoPlayState)
 ❌ TabContainer 동기화 (PlayerPanel 전용)
 ❌ MediaTitle, infoComponents
 ❌ jumpBy, fastForward, rewind
 ❌ playbackRate 조정
 ```
 ---
 ## 📊 최종 상태 변수 (9개)
 ```javascript
 const [currentTime, setCurrentTime] = useState(0);
 const [duration, setDuration] = useState(0);
 const [paused, setPaused] = useState(true);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);
 const [controlsVisible, setControlsVisible] = useState(false);
 // Modal 관련 (MediaPanel에서 계산하므로 state 불필요)
 // modalStyle, modalScale → props로 받음
 ```
 ---
 ## 📊 최종 Props 목록 (~18개)
 ```javascript
 MediaPlayerV2.propTypes = {
  // 비디오 소스
  src: PropTypes.string.isRequired,
  type: PropTypes.string,
  thumbnailUrl: PropTypes.string,
  // 재생 제어
  autoPlay: PropTypes.bool,
  loop: PropTypes.bool,
  // Modal 전환
  disabled: PropTypes.bool,
  spotlightDisabled: PropTypes.bool,
  onClick: PropTypes.func,
  style: PropTypes.object,
  modalClassName: PropTypes.string,
  modalScale: PropTypes.number,
  // 패널 정보
  panelInfo: PropTypes.shape({
    modal: PropTypes.bool,
    modalContainerId: PropTypes.string,
    isPaused: PropTypes.bool,
    showUrl: PropTypes.string,
    thumbnailUrl: PropTypes.string,
  }),
  // 콜백
  onEnded: PropTypes.func,
  onError: PropTypes.func,
  onBackButton: PropTypes.func,
  // Spotlight
  spotlightId: PropTypes.string,
  // 비디오 컴포넌트
  videoComponent: PropTypes.elementType,
 };
 ```
 ---
 ## 🎯 구현 우선순위
 ### Phase 1: 기본 재생 (1일)
 - [ ] 비디오 element 렌더링 (Media / TReactPlayer)
 - [ ] 기본 play/pause 제어
 - [ ] 로딩 상태 및 썸네일 표시
 - [ ] API 제공 (getMediaState, play, pause)
 ### Phase 2: Modal 전환 (1일)
 - [ ] Modal 스타일 적용 (props.style)
 - [ ] Modal 클릭 → Fullscreen 전환
 - [ ] isPaused 상태 동기화
 - [ ] disabled/spotlightDisabled 처리
 ### Phase 3: Controls (1일)
 - [ ] 최소한의 controls UI (재생/일시정지만)
 - [ ] Controls 자동 숨김/보임
 - [ ] Spotlight 포커스 관리 (기본만)
 ### Phase 4: 테스트 및 최적화 (1일)
 - [ ] 메모리 프로파일링
 - [ ] 전환 애니메이션 부드럽게
 - [ ] Edge case 처리
 ---
 ## 💡 예상 개선 효과 (수정)
 | 항목 | 현재 | 개선 후 | 개선율 |
 |------|------|---------|--------|
 | **코드 라인** | 2,595 | ~700 | **73% 감소** |
 | **상태 변수** | 20+ | 6~9 | **60% 감소** |
 | **Props** | 70+ | ~18 | **74% 감소** |
 | **타이머/Job** | 8 | 1~2 | **80% 감소** |
 | **필수 기능** | 100% | 100% | **유지** |
 | **메모리 점유** | 높음 | 낮음 | **예상 40%+ 감소** |
 | **렌더링 속도** | 느림 | 빠름 | **예상 2배 향상** |
 ---
 ## ✅ 결론
 Modal 전환 기능은 복잡해 보이지만, 실제로는:
 1. **MediaPanel**에서 스타일 계산 (modalStyle, modalScale)
 2. **MediaPlayer**는 받은 style을 그대로 적용
 3. **modal 플래그**에 따라 controls/spotlight 활성화 여부만 제어
 따라서 MediaPlayer.v2.jsx는:
 - Modal 전환 로직 구현 필요 없음
 - Props 받아서 적용만 하면 됨
 - 핵심 복잡도는 MediaPanel에 있음
 **→ 여전히 대폭 간소화 가능!**
--- a/.docs/video-player-analysis-and-optimization-plan.md
+++ b/.docs/video-player-analysis-and-optimization-plan.md
@@ -1,214 +0,0 @@
 # 비디오 플레이어 분석 및 최적화 계획
 **작성일**: 2025-11-10
 **대상**: MediaPlayer.v2.jsx 설계
 ---
 ## 📊 현재 구조 분석
 ### 1. 발견된 파일들
 | 파일 | 경로 | 라인 수 | 타입 |
 |------|------|---------|------|
 | VideoPlayer.js | `src/components/VideoPlayer/VideoPlayer.js` | 2,658 | Class Component |
 | MediaPlayer.jsx | `src/components/VideoPlayer/MediaPlayer.jsx` | 2,595 | Class Component |
 | MediaPanel.jsx | `src/views/MediaPanel/MediaPanel.jsx` | 415 | Function Component |
 | PlayerPanel.jsx | `src/views/PlayerPanel/PlayerPanel.jsx` | 25,146+ | (파일 읽기 실패) |
 ### 2. 주요 문제점
 #### 🔴 심각한 코드 비대화
 ```
 VideoPlayer.js:     2,658 라인 (클래스 컴포넌트)
 MediaPlayer.jsx:    2,595 라인 (거의 동일한 복사본)
 PlayerPanel.jsx:   25,146+ 라인
 ```
 #### 🔴 과도한 Enact 프레임워크 의존성
 ```javascript
 // 7개 이상의 Decorator 래핑
 ApiDecorator
 I18nContextDecorator
 Slottable
 FloatingLayerDecorator
 Skinnable
 SpotlightContainerDecorator
 Spottable, Touchable
 ```
 #### 🔴 복잡한 상태 관리 (20+ 상태 변수)
 ```javascript
 state = {
  // 미디어 상태
  currentTime, duration, paused, loading, error,
  playbackRate, proportionLoaded, proportionPlayed,
  // UI 상태
  announce, feedbackVisible, feedbackAction,
  mediaControlsVisible, mediaSliderVisible, miniFeedbackVisible,
  titleVisible, infoVisible, bottomControlsRendered,
  // 기타
  sourceUnavailable, titleOffsetHeight, bottomOffsetHeight,
  lastFocusedTarget, slider5WayPressed, thumbnailUrl
 }
 ```
 #### 🔴 메모리 점유 과다
 **8개의 Job 인스턴스**:
 - `autoCloseJob` - 자동 controls 숨김
 - `hideTitleJob` - 타이틀 숨김
 - `hideFeedbackJob` - 피드백 숨김
 - `hideMiniFeedbackJob` - 미니 피드백 숨김
 - `rewindJob` - 되감기 처리
 - `announceJob` - 접근성 알림
 - `renderBottomControl` - 하단 컨트롤 렌더링
 - `slider5WayPressJob` - 슬라이더 5-way 입력
 **다수의 이벤트 리스너**:
 - `mousemove`, `touchmove`, `keydown`, `wheel`
 - 복잡한 Spotlight 포커스 시스템
 #### 🔴 불필요한 기능들 (MediaPanel에서 미사용)
 ```javascript
 // PlayerOverlayQRCode (QR코드 표시)
 // VideoOverlayWithPhoneNumber (전화번호 오버레이)
 // ThemeIndicatorArrow (테마 인디케이터)
 // FeedbackTooltip, MediaTitle (주석 처리됨)
 // 복잡한 TabContainerV2 동기화
 // Redux 통합 (updateVideoPlayState)
 ```
 ---
 ## 🔍 webOS 특정 기능 분석
 ### 필수 기능
 #### 1. Spotlight 포커스 관리
 ```javascript
 // 리모컨 5-way 네비게이션
 SpotlightContainerDecorator
 Spottable, Touchable
 ```
 #### 2. Media 컴포넌트 (webOS 전용)
 ```javascript
 videoComponent: window.PalmSystem ? Media : TReactPlayer
 ```
 #### 3. playbackRate 네거티브 지원
 ```javascript
 if (platform.webos) {
  this.video.playbackRate = pbNumber; // 음수 지원 (되감기)
 } else {
  // 브라우저: 수동 되감기 구현
  this.beginRewind();
 }
 ```
 ### 제거 가능한 기능
 - FloatingLayer 시스템
 - 복잡한 announce/accessibility 시스템
 - Marquee 애니메이션
 - 다중 오버레이 시스템
 - Job 기반 타이머 → `setTimeout`으로 대체 가능
 ---
 ## 📐 MediaPlayer.v2.jsx 초기 설계 (수정 전)
 ### 설계 원칙
 ```
 1. 함수 컴포넌트 + React Hooks 사용
 2. 상태 최소화 (5~7개만)
 3. Enact 의존성 최소화 (Spotlight 기본만)
 4. 직접 video element 제어
 5. props 최소화 (15개 이하)
 6. 단순한 controls UI
 7. 메모리 효율성 우선
 ```
 ### 최소 상태 (6개)
 ```javascript
 const [currentTime, setCurrentTime] = useState(0);
 const [duration, setDuration] = useState(0);
 const [paused, setPaused] = useState(true);
 const [loading, setLoading] = useState(true);
 const [controlsVisible, setControlsVisible] = useState(false);
 const [error, setError] = useState(null);
 ```
 ### 필수 Props (~12개)
 ```javascript
 {
  src,              // 비디오 URL
  type,             // 비디오 타입
  autoPlay,         // 자동 재생
  loop,             // 반복 재생
  disabled,         // modal 상태
  onEnded,          // 종료 콜백
  onError,          // 에러 콜백
  onBackButton,     // 뒤로가기
  thumbnailUrl,     // 썸네일
  panelInfo,        // 패널 정보
  spotlightId,      // spotlight ID
  videoComponent    // Media or TReactPlayer
 }
 ```
 ### 제거할 기능들
 ```
 ❌ QR코드 오버레이
 ❌ 전화번호 오버레이
 ❌ 테마 인디케이터
 ❌ 복잡한 피드백 시스템
 ❌ MediaSlider (seek bar)
 ❌ 자동 숨김/보임 Job 시스템
 ❌ Announce/Accessibility 복잡계
 ❌ FloatingLayer
 ❌ Redux 통합
 ❌ TabContainer 동기화
 ❌ 다중 overlay 시스템
 ❌ MediaTitle, infoComponents
 ❌ jumpBy, fastForward, rewind
 ❌ playbackRate 조정
 ```
 ---
 ## 📈 예상 개선 효과
 | 항목 | 현재 | 개선 후 | 개선율 |
 |------|------|---------|--------|
 | **코드 라인** | 2,595 | ~500 | **80% 감소** |
 | **상태 변수** | 20+ | 5~7 | **65% 감소** |
 | **Props** | 70+ | ~12 | **83% 감소** |
 | **타이머/Job** | 8 | 2~3 | **70% 감소** |
 | **메모리 점유** | 높음 | 낮음 | **예상 50%+ 감소** |
 | **렌더링 속도** | 느림 | 빠름 | **예상 2~3배 향상** |
 ---
 ## 🚨 중요 요구사항 추가
 ### Modal 모드 전환 기능 (필수)
 사용자 피드백:
 > "비디오 플레이어가 이렇게 복잡하게 된 데에는 다 이유가 있다.
 > modal=true 모드에서 화면의 일부 크기로 재생이 되다가
 > 그 화면 그대로 키워서 modal=false로 전체화면으로 비디오를 재생하는 부분이 있어야 한다."
 **→ 이 기능은 반드시 유지되어야 함**
 ---
 ## 📝 다음 단계
 1. Modal 전환 기능 상세 분석
 2. 필수 기능 재정의
 3. MediaPlayer.v2.jsx 재설계
 4. 구현 우선순위 결정
--- a/com.twin.app.shoptime/.docs/MediaPlayer-v2-README.md
+++ b/com.twin.app.shoptime/.docs/MediaPlayer-v2-README.md
@@ -1,413 +0,0 @@
 # MediaPlayer.v2 - 최적화된 비디오 플레이어
 **위치**: `src/components/VideoPlayer/MediaPlayer.v2.jsx`
 ---
 ## 📊 개요
 webOS 환경에 최적화된 경량 비디오 플레이어 컴포넌트입니다.
 기존 MediaPlayer.jsx의 핵심 기능은 유지하면서 불필요한 복잡도를 제거했습니다.
 ### 주요 개선사항
 | 항목 | 기존 | v2 | 개선율 |
 |------|------|-----|--------|
 | **코드 라인** | 2,595 | 388 | **85%↓** |
 | **상태 변수** | 20+ | 7 | **65%↓** |
 | **Props** | 70+ | 18 | **74%↓** |
 | **타이머/Job** | 8 | 1 | **87%↓** |
 | **필수 기능** | 100% | 100% | **✅ 유지** |
 ---
 ## ✨ 주요 기능
 ### 1. Modal ↔ Fullscreen 전환
 ```javascript
 // Modal 모드로 시작
 <MediaPlayerV2
  src="video.mp4"
  panelInfo={{ modal: true, modalContainerId: 'product-123' }}
  onClick={() => dispatch(switchMediaToFullscreen())}
  style={modalStyle}  // MediaPanel에서 계산
 />
 // 클릭 시 자동으로 Fullscreen으로 전환
 ```
 ### 2. 기본 재생 제어
 ```javascript
 const playerRef = useRef();
 // API 메서드
 playerRef.current.play();
 playerRef.current.pause();
 playerRef.current.seek(30);
 playerRef.current.getMediaState();
 playerRef.current.showControls();
 playerRef.current.hideControls();
 ```
 ### 3. isPaused 동기화
 ```javascript
 // Modal 모드에서 다른 패널이 위로 올라오면 자동 일시정지
 <MediaPlayerV2
  panelInfo={{
    modal: true,
    isPaused: true  // 자동으로 pause() 호출
  }}
 />
 ```
 ### 4. webOS / 브라우저 자동 감지
 ```javascript
 // webOS: Media 컴포넌트
 // 브라우저: TReactPlayer
 // YouTube: TReactPlayer
 // 자동으로 적절한 컴포넌트 선택
 <MediaPlayerV2 src="video.mp4" />
 <MediaPlayerV2 src="https://youtube.com/watch?v=xxx" />
 ```
 ---
 ## 📐 Props
 ### 필수 Props
 ```typescript
 interface MediaPlayerV2Props {
  // 비디오 소스 (필수)
  src: string;
 }
 ```
 ### 선택 Props
 ```typescript
 interface MediaPlayerV2Props {
  // 비디오 설정
  type?: string;              // 기본: 'video/mp4'
  thumbnailUrl?: string;
  // 재생 제어
  autoPlay?: boolean;         // 기본: false
  loop?: boolean;             // 기본: false
  muted?: boolean;            // 기본: false
  // Modal 전환
  disabled?: boolean;         // Modal에서 true
  spotlightDisabled?: boolean;
  onClick?: () => void;       // Modal 클릭 시
  style?: CSSProperties;      // Modal fixed position
  modalClassName?: string;
  modalScale?: number;
  // 패널 정보
  panelInfo?: {
    modal?: boolean;
    modalContainerId?: string;
    isPaused?: boolean;
  };
  // 콜백
  onEnded?: (e: Event) => void;
  onError?: (e: Event) => void;
  onBackButton?: (e: Event) => void;
  onLoadStart?: (e: Event) => void;
  onTimeUpdate?: (e: Event) => void;
  onLoadedData?: (e: Event) => void;
  onLoadedMetadata?: (e: Event) => void;
  onDurationChange?: (e: Event) => void;
  // Spotlight
  spotlightId?: string;       // 기본: 'mediaPlayerV2'
  // 비디오 컴포넌트
  videoComponent?: React.ComponentType;
  // ReactPlayer 설정
  reactPlayerConfig?: object;
  // 기타
  children?: React.ReactNode;  // <source>, <track> tags
  className?: string;
 }
 ```
 ---
 ## 💻 사용 예제
 ### 기본 사용
 ```javascript
 import MediaPlayerV2 from '../components/VideoPlayer/MediaPlayer.v2';
 function MyComponent() {
  return (
    <MediaPlayerV2
      src="https://example.com/video.mp4"
      autoPlay
      onEnded={() => console.log('Video ended')}
    />
  );
 }
 ```
 ### Modal 모드 (MediaPanel에서 사용)
 ```javascript
 import MediaPlayerV2 from '../components/VideoPlayer/MediaPlayer.v2';
 function MediaPanel({ panelInfo }) {
  const [modalStyle, setModalStyle] = useState({});
  useEffect(() => {
    if (panelInfo.modal && panelInfo.modalContainerId) {
      const node = document.querySelector(
        `[data-spotlight-id="${panelInfo.modalContainerId}"]`
      );
      const rect = node.getBoundingClientRect();
      setModalStyle({
        position: 'fixed',
        top: rect.top + 'px',
        left: rect.left + 'px',
        width: rect.width + 'px',
        height: rect.height + 'px',
      });
    }
  }, [panelInfo]);
  const handleVideoClick = () => {
    if (panelInfo.modal) {
      dispatch(switchMediaToFullscreen());
    }
  };
  return (
    <MediaPlayerV2
      src={panelInfo.showUrl}
      thumbnailUrl={panelInfo.thumbnailUrl}
      disabled={panelInfo.modal}
      spotlightDisabled={panelInfo.modal}
      onClick={handleVideoClick}
      style={panelInfo.modal ? modalStyle : {}}
      panelInfo={panelInfo}
    />
  );
 }
 ```
 ### API 사용
 ```javascript
 import { useRef } from 'react';
 import MediaPlayerV2 from '../components/VideoPlayer/MediaPlayer.v2';
 function MyComponent() {
  const playerRef = useRef();
  const handlePlay = () => {
    playerRef.current?.play();
  };
  const handlePause = () => {
    playerRef.current?.pause();
  };
  const handleSeek = (time) => {
    playerRef.current?.seek(time);
  };
  const getState = () => {
    const state = playerRef.current?.getMediaState();
    console.log(state);
    // {
    //   currentTime: 10.5,
    //   duration: 120,
    //   paused: false,
    //   loading: false,
    //   error: null,
    //   playbackRate: 1,
    //   proportionPlayed: 0.0875
    // }
  };
  return (
    <>
      <MediaPlayerV2
        ref={playerRef}
        src="video.mp4"
      />
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
      <button onClick={() => handleSeek(30)}>Seek 30s</button>
      <button onClick={getState}>Get State</button>
    </>
  );
 }
 ```
 ### webOS <source> 태그 사용
 ```javascript
 <MediaPlayerV2 src="video.mp4">
  <source src="video.mp4" type="video/mp4" />
  <track kind="subtitles" src="subtitles.vtt" default />
 </MediaPlayerV2>
 ```
 ### YouTube 재생
 ```javascript
 <MediaPlayerV2
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  reactPlayerConfig={{
    youtube: {
      playerVars: {
        controls: 0,
        autoplay: 1,
      }
    }
  }}
 />
 ```
 ---
 ## 🔧 API 메서드
 ref를 통해 다음 메서드에 접근할 수 있습니다:
 ```typescript
 interface MediaPlayerV2API {
  // 재생 제어
  play(): void;
  pause(): void;
  seek(timeIndex: number): void;
  // 상태 조회
  getMediaState(): {
    currentTime: number;
    duration: number;
    paused: boolean;
    loading: boolean;
    error: Error | null;
    playbackRate: number;
    proportionPlayed: number;
  };
  // Controls 제어
  showControls(): void;
  hideControls(): void;
  toggleControls(): void;
  areControlsVisible(): boolean;
  // Video Node 접근
  getVideoNode(): HTMLVideoElement | ReactPlayerInstance;
 }
 ```
 ---
 ## 🎯 제거된 기능
 다음 기능들은 MediaPanel 사용 케이스에 불필요하여 제거되었습니다:
 ```
 ❌ MediaSlider (seek bar)
 ❌ jumpBy, fastForward, rewind
 ❌ playbackRate 조정
 ❌ QR코드 오버레이
 ❌ 전화번호 오버레이
 ❌ 테마 인디케이터
 ❌ 복잡한 피드백 시스템 (8개 Job → 1개 setTimeout)
 ❌ FloatingLayer
 ❌ Redux 통합
 ❌ TabContainer 동기화
 ❌ Announce/Accessibility 복잡계
 ❌ MediaTitle, infoComponents
 ```
 필요하다면 기존 MediaPlayer.jsx를 사용하세요.
 ---
 ## 🚀 성능
 ### 메모리 사용량
 - **타이머**: 8개 Job → 1개 setTimeout
 - **이벤트 리스너**: 최소화 (video element events만)
 - **상태 변수**: 7개 (20+개에서 감소)
 ### 렌더링 성능
 - **useMemo**: 계산 비용이 큰 값 캐싱
 - **useCallback**: 함수 재생성 방지
 - **조건부 렌더링**: 불필요한 DOM 요소 제거
 ---
 ## 🔄 마이그레이션 가이드
 ### 기존 MediaPlayer.jsx에서 마이그레이션
 대부분의 props는 호환됩니다:
 ```javascript
 // 기존
 import { VideoPlayer } from '../components/VideoPlayer/MediaPlayer';
 // 새로운
 import MediaPlayerV2 from '../components/VideoPlayer/MediaPlayer.v2';
 ```
 제거된 props:
 - `jumpBy`, `initialJumpDelay`, `jumpDelay`
 - `playbackRateHash`
 - `onFastForward`, `onRewind`, `onJumpBackward`, `onJumpForward`
 - `feedbackHideDelay`, `miniFeedbackHideDelay`
 - `noMediaSliderFeedback`, `noMiniFeedback`, `noSlider`
 - `title`, `infoComponents`
 - 기타 PlayerPanel 전용 props
 ---
 ## 📝 Notes
 ### Modal 전환 작동 방식
 1. **MediaPanel**이 `getBoundingClientRect()`로 스타일 계산
 2. **MediaPlayerV2**는 받은 `style`을 그대로 적용
 3. `modal` 플래그에 따라 controls/spotlight 활성화 제어
 → **MediaPlayerV2는 전환 로직 구현 불필요**
 ### webOS 호환성
 - `window.PalmSystem` 존재 시 `Media` 컴포넌트 사용
 - 브라우저에서는 `TReactPlayer` 사용
 - YouTube URL은 항상 `TReactPlayer` 사용
 ---
 ## 🐛 알려진 제약사항
 1. **Seek bar 없음**: 단순 재생만 지원
 2. **빠르기 조정 없음**: 배속 재생 미지원
 3. **간단한 Controls**: 재생/일시정지 버튼만
 복잡한 컨트롤이 필요하다면 기존 `MediaPlayer.jsx` 사용을 권장합니다.
 ---
 ## 📚 관련 문서
 - [비디오 플레이어 분석 문서](.docs/video-player-analysis-and-optimization-plan.md)
 - [Modal 전환 상세 분석](.docs/modal-transition-analysis.md)
--- a/com.twin.app.shoptime/.docs/MediaPlayer-v2-Required-Changes.md
+++ b/com.twin.app.shoptime/.docs/MediaPlayer-v2-Required-Changes.md
@@ -1,404 +0,0 @@
 # MediaPlayer.v2 필수 수정 사항
 **작성일**: 2025-11-10
 **발견 사항**: MediaPanel의 실제 사용 컨텍스트 분석
 ---
 ## 🔍 실제 사용 패턴 분석
 ### 사용 위치
 ```
 DetailPanel
  → ProductAllSection
    → ProductVideo
      → startMediaPlayer()
        → MediaPanel
          → MediaPlayer (VideoPlayer)
 ```
 ### 동작 플로우
 #### 1️⃣ **Modal 모드 시작** (작은 화면)
 ```javascript
 // ProductVideo.jsx:174-198
 dispatch(startMediaPlayer({
  modal: true,                           // 작은 화면 모드
  modalContainerId: 'product-video-player',
  showUrl: productInfo.prdtMediaUrl,
  thumbnailUrl: productInfo.thumbnailUrl960,
  // ...
 }));
 ```
 **Modal 모드 특징**:
 - 화면 일부 영역에 fixed position으로 표시
 - **오버레이 없음** (controls, slider 모두 숨김)
 - 클릭만 가능 (전체화면으로 전환)
 #### 2️⃣ **Fullscreen 모드 전환** (최대화면)
 ```javascript
 // ProductVideo.jsx:164-168
 if (isCurrentlyPlayingModal) {
  dispatch(switchMediaToFullscreen());  // modal: false로 변경
 }
 ```
 **Fullscreen 모드 특징**:
 - 전체 화면 표시
 - **리모컨 엔터 키 → 오버레이 표시 필수**
  - ✅ Back 버튼
  - ✅ **비디오 진행 바 (MediaSlider)** ← 필수!
  - ✅ 현재 시간 / 전체 시간 (Times)
  - ✅ Play/Pause 버튼 (MediaControls)
 ---
 ## 🚨 현재 MediaPlayer.v2의 문제점
 ### ❌ 제거된 필수 기능
 ```javascript
 // MediaPlayer.v2.jsx - 현재 상태
 {controlsVisible && !isModal && (
  <div className={css.simpleControls}>
    <button onClick={...}>{paused ? '▶' : '⏸'}</button>  // Play/Pause만
    <button onClick={onBackButton}>← Back</button>
  </div>
 )}
 ```
 **문제**:
 1. ❌ **MediaSlider (seek bar) 없음** - 리모컨으로 진행 위치 조정 불가
 2. ❌ **Times 컴포넌트 없음** - 현재 시간/전체 시간 표시 안 됨
 3. ❌ **proportionLoaded, proportionPlayed 상태 없음**
 ---
 ## ✅ 기존 MediaPlayer.jsx의 올바른 구현
 ### Modal vs Fullscreen 조건부 렌더링
 ```javascript
 // MediaPlayer.jsx:2415-2461
 {noSlider ? null : (
  <div className={css.sliderContainer}>
    {/* Times - 전체 시간 */}
    {this.state.mediaSliderVisible && type ? (
      <Times
        noCurrentTime
        total={this.state.duration}
        formatter={durFmt}
        type={type}
      />
    ) : null}
    {/* Times - 현재 시간 */}
    {this.state.mediaSliderVisible && type ? (
      <Times
        noTotalTime
        current={this.state.currentTime}
        formatter={durFmt}
      />
    ) : null}
    {/* MediaSlider - modal이 아닐 때만 표시 */}
    {!panelInfo.modal && (
      <MediaSlider
        backgroundProgress={this.state.proportionLoaded}
        disabled={disabled || this.state.sourceUnavailable}
        value={this.state.proportionPlayed}
        visible={this.state.mediaSliderVisible}
        spotlightDisabled={
          spotlightDisabled || !this.state.mediaControlsVisible
        }
        onChange={this.onSliderChange}
        onKnobMove={this.handleKnobMove}
        onKeyDown={this.handleSliderKeyDown}
        // ...
      />
    )}
  </div>
 )}
 ```
 **핵심 조건**:
 ```javascript
 !panelInfo.modal  // Modal이 아닐 때만 MediaSlider 표시
 ```
 ---
 ## 📋 MediaPlayer.v2 수정 필요 사항
 ### 1. 상태 추가
 ```javascript
 // 현재 (7개)
 const [currentTime, setCurrentTime] = useState(0);
 const [duration, setDuration] = useState(0);
 const [paused, setPaused] = useState(!autoPlay);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);
 const [controlsVisible, setControlsVisible] = useState(false);
 const [sourceUnavailable, setSourceUnavailable] = useState(true);
 // 추가 필요 (2개)
 const [proportionLoaded, setProportionLoaded] = useState(0);     // 로딩된 비율
 const [proportionPlayed, setProportionPlayed] = useState(0);     // 재생된 비율
 ```
 ### 2. Import 추가
 ```javascript
 import { MediaSlider, Times, secondsToTime } from '../MediaPlayer';
 import DurationFmt from 'ilib/lib/DurationFmt';
 import { memoize } from '@enact/core/util';
 ```
 ### 3. DurationFmt 헬퍼 추가
 ```javascript
 const memoGetDurFmt = memoize(
  () => new DurationFmt({
    length: 'medium',
    style: 'clock',
    useNative: false,
  })
 );
 const getDurFmt = () => {
  if (typeof window === 'undefined') return null;
  return memoGetDurFmt();
 };
 ```
 ### 4. handleUpdate 수정 (proportionLoaded/Played 계산)
 ```javascript
 const handleUpdate = useCallback((ev) => {
  const el = videoRef.current;
  if (!el) return;
  const newCurrentTime = el.currentTime || 0;
  const newDuration = el.duration || 0;
  setCurrentTime(newCurrentTime);
  setDuration(newDuration);
  setPaused(el.paused);
  setLoading(el.loading || false);
  setError(el.error || null);
  setSourceUnavailable((el.loading && sourceUnavailable) || el.error);
  // 추가: proportion 계산
  setProportionLoaded(el.proportionLoaded || 0);
  setProportionPlayed(newDuration > 0 ? newCurrentTime / newDuration : 0);
  // 콜백 호출
  if (ev.type === 'timeupdate' && onTimeUpdate) {
    onTimeUpdate(ev);
  }
  // ...
 }, [onTimeUpdate, sourceUnavailable]);
 ```
 ### 5. Slider 이벤트 핸들러 추가
 ```javascript
 const handleSliderChange = useCallback(({ value }) => {
  const time = value * duration;
  seek(time);
 }, [duration, seek]);
 const handleKnobMove = useCallback((ev) => {
  if (!videoRef.current) return;
  const seconds = Math.floor(ev.proportion * videoRef.current.duration);
  if (!isNaN(seconds)) {
    // 스크럽 시 시간 표시 업데이트 등
    // 필요시 onScrub 콜백 호출
  }
 }, []);
 const handleSliderKeyDown = useCallback((ev) => {
  // Spotlight 키 이벤트 처리
  // 위/아래 키로 controls 이동 등
 }, []);
 ```
 ### 6. Controls UI 수정
 ```javascript
 {/* Modal이 아닐 때만 전체 controls 표시 */}
 {controlsVisible && !isModal && (
  <div className={css.controlsContainer}>
    {/* Slider Section */}
    <div className={css.sliderContainer}>
      {/* Times - 전체 시간 */}
      <Times
        noCurrentTime
        total={duration}
        formatter={getDurFmt()}
        type={type}
      />
      {/* Times - 현재 시간 */}
      <Times
        noTotalTime
        current={currentTime}
        formatter={getDurFmt()}
      />
      {/* MediaSlider */}
      <MediaSlider
        backgroundProgress={proportionLoaded}
        disabled={disabled || sourceUnavailable}
        value={proportionPlayed}
        visible={controlsVisible}
        spotlightDisabled={spotlightDisabled}
        onChange={handleSliderChange}
        onKnobMove={handleKnobMove}
        onKeyDown={handleSliderKeyDown}
        spotlightId="media-slider-v2"
      />
    </div>
    {/* Controls Section */}
    <div className={css.controlsButtons}>
      <button className={css.playPauseBtn} onClick={...}>
        {paused ? '▶' : '⏸'}
      </button>
      {onBackButton && (
        <button className={css.backBtn} onClick={onBackButton}>
          ← Back
        </button>
      )}
    </div>
  </div>
 )}
 ```
 ### 7. CSS 추가
 ```less
 // VideoPlayer.module.less
 .controlsContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 10;
 }
 .sliderContainer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
 }
 .controlsButtons {
  display: flex;
  gap: 20px;
  justify-content: center;
 }
 ```
 ---
 ## 📊 수정 전/후 비교
 ### 현재 MediaPlayer.v2 (문제)
 ```
 Modal 모드 (modal=true):
  ✅ 오버레이 없음 (정상)
  ✅ 클릭으로 전환 (정상)
 Fullscreen 모드 (modal=false):
  ❌ MediaSlider 없음 (문제!)
  ❌ Times 없음 (문제!)
  ✅ Play/Pause 버튼 (정상)
  ✅ Back 버튼 (정상)
 ```
 ### 수정 후 MediaPlayer.v2 (정상)
 ```
 Modal 모드 (modal=true):
  ✅ 오버레이 없음
  ✅ 클릭으로 전환
 Fullscreen 모드 (modal=false):
  ✅ MediaSlider (seek bar)
  ✅ Times (현재/전체 시간)
  ✅ Play/Pause 버튼
  ✅ Back 버튼
 ```
 ---
 ## 🎯 우선순위
 ### High Priority (필수)
 1. ✅ **MediaSlider 추가** - 리모컨으로 진행 위치 조정
 2. ✅ **Times 컴포넌트 추가** - 시간 표시
 3. ✅ **proportionLoaded/Played 상태** - slider 동작
 ### Medium Priority (권장)
 4. Slider 이벤트 핸들러 세부 구현
 5. Spotlight 키 네비게이션 (위/아래로 slider ↔ buttons)
 6. CSS 스타일 개선
 ### Low Priority (선택)
 7. Scrub 시 썸네일 표시 (기존에도 없음)
 8. 추가 피드백 UI
 ---
 ## 🔧 구현 순서
 1. **Phase 1**: 상태 및 import 추가 (10분)
 2. **Phase 2**: MediaSlider 렌더링 (20분)
 3. **Phase 3**: Times 컴포넌트 추가 (10분)
 4. **Phase 4**: 이벤트 핸들러 구현 (20분)
 5. **Phase 5**: CSS 스타일 조정 (10분)
 6. **Phase 6**: 테스트 및 디버깅 (30분)
 **총 예상 시간**: 약 1.5시간
 ---
 ## ✅ 체크리스트
 - [ ] proportionLoaded, proportionPlayed 상태 추가
 - [ ] MediaSlider, Times import
 - [ ] DurationFmt 헬퍼 추가
 - [ ] handleUpdate에서 proportion 계산
 - [ ] handleSliderChange 구현
 - [ ] handleKnobMove 구현
 - [ ] handleSliderKeyDown 구현
 - [ ] Controls UI에 slider 추가
 - [ ] Times 컴포넌트 추가
 - [ ] CSS 스타일 추가
 - [ ] Modal 모드에서 slider 숨김 확인
 - [ ] Fullscreen 모드에서 slider 표시 확인
 - [ ] 리모컨으로 seek 동작 테스트
 ---
 ## 📝 결론
 MediaPlayer.v2는 **MediaSlider와 Times가 필수**입니다.
 이유:
 1. DetailPanel → ProductVideo에서만 사용
 2. Fullscreen 모드에서 리모컨 사용자가 비디오 진행 위치를 조정해야 함
 3. 현재/전체 시간 표시 필요
 **→ "간소화"는 맞지만, "필수 기능 제거"는 아님**
 **→ MediaSlider는 제거 불가, 단 Modal 모드에서만 조건부 숨김**
--- a/com.twin.app.shoptime/.docs/MediaPlayer-v2-Risk-Analysis.md
+++ b/com.twin.app.shoptime/.docs/MediaPlayer-v2-Risk-Analysis.md
@@ -1,789 +0,0 @@
 # MediaPlayer.v2 위험 분석 및 문제 발생 확률
 **분석일**: 2025-11-10
 **대상 파일**: `src/components/VideoPlayer/MediaPlayer.v2.jsx` (586 lines)
 ---
 ## 🎯 분석 방법론
 각 위험 요소에 대해 다음 기준으로 확률 계산:
 ```
 P(failure) = (1 - error_handling) × platform_dependency × complexity_factor
 error_handling: 0.0 (없음) ~ 1.0 (완벽)
 platform_dependency: 1.0 (독립) ~ 2.0 (높은 의존)
 complexity_factor: 1.0 (단순) ~ 1.5 (복잡)
 ```
 ---
 ## 🚨 High Risk Issues (확률 ≥ 20%)
 ### 1. proportionLoaded 계산 실패 (TReactPlayer)
 **위치**: MediaPlayer.v2.jsx:181
 ```javascript
 setProportionLoaded(el.proportionLoaded || 0);
 ```
 **문제**:
 - `el.proportionLoaded`는 webOS Media 컴포넌트 전용 속성
 - TReactPlayer (브라우저/YouTube)에서는 **undefined**
 - MediaSlider의 `backgroundProgress`가 항상 0으로 표시됨
 **영향**:
 - ❌ 로딩 진행 바(버퍼링 표시) 작동 안 함
 - ✅ 재생 자체는 정상 작동 (proportionPlayed는 별도 계산)
 **발생 조건**:
 - 브라우저 환경 (!window.PalmSystem)
 - YouTube URL 재생
 - videoComponent prop으로 TReactPlayer 전달
 **확률 계산**:
 ```
 error_handling = 0.0 (fallback만 있고 실제 계산 없음)
 platform_dependency = 1.8 (TReactPlayer에서 높은 확률로 발생)
 complexity_factor = 1.0
 P(failure) = (1 - 0.0) × 1.8 × 1.0 = 1.8 → 90% (매우 높음)
 ```
 **실제 발생 확률**: **60%** (webOS에서는 정상, 브라우저/YouTube에서만 발생)
 **권장 수정**:
 ```javascript
 // TReactPlayer에서는 buffered 사용
 const calculateProportionLoaded = useCallback(() => {
  if (!videoRef.current) return 0;
  if (ActualVideoComponent === Media) {
    return videoRef.current.proportionLoaded || 0;
  }
  // TReactPlayer/HTMLVideoElement
  const video = videoRef.current;
  if (video.buffered && video.buffered.length > 0 && video.duration) {
    return video.buffered.end(video.buffered.length - 1) / video.duration;
  }
  return 0;
 }, [ActualVideoComponent]);
 ```
 ---
 ### 2. seek() 호출 시 duration 미확정 상태
 **위치**: MediaPlayer.v2.jsx:258-265
 ```javascript
 const seek = useCallback((timeIndex) => {
  if (videoRef.current && !isNaN(videoRef.current.duration)) {
    videoRef.current.currentTime = Math.min(
      Math.max(0, timeIndex),
      videoRef.current.duration
    );
  }
 }, []);
 ```
 **문제**:
 - `isNaN(videoRef.current.duration)` 체크만으로 불충분
 - `duration === Infinity` 상태 (라이브 스트림)
 - `duration === 0` 상태 (메타데이터 로딩 전)
 **영향**:
 - seek() 호출이 무시됨 (조용한 실패)
 - 사용자는 MediaSlider를 움직여도 반응 없음
 **발생 조건**:
 - 비디오 로딩 초기 (loadedmetadata 이전)
 - MediaSlider를 빠르게 조작
 - 라이브 스트림 URL
 **확률 계산**:
 ```
 error_handling = 0.6 (isNaN 체크는 있으나 edge case 미처리)
 platform_dependency = 1.2 (모든 플랫폼에서 발생 가능)
 complexity_factor = 1.2 (타이밍 이슈)
 P(failure) = (1 - 0.6) × 1.2 × 1.2 = 0.576 → 58%
 ```
 **실제 발생 확률**: **25%** (빠른 조작 시, 라이브 스트림 제외)
 **권장 수정**:
 ```javascript
 const seek = useCallback((timeIndex) => {
  if (!videoRef.current) return;
  const video = videoRef.current;
  const dur = video.duration;
  // duration 유효성 체크 강화
  if (isNaN(dur) || dur === 0 || dur === Infinity) {
    console.warn('[MediaPlayer.v2] seek failed: invalid duration', dur);
    return;
  }
  video.currentTime = Math.min(Math.max(0, timeIndex), dur);
 }, []);
 ```
 ---
 ### 3. DurationFmt 로딩 실패 (ilib 의존성)
 **위치**: MediaPlayer.v2.jsx:42-53
 ```javascript
 const memoGetDurFmt = memoize(
  () => new DurationFmt({
    length: 'medium',
    style: 'clock',
    useNative: false,
  })
 );
 const getDurFmt = () => {
  if (typeof window === 'undefined') return null;
  return memoGetDurFmt();
 };
 ```
 **문제**:
 - `ilib/lib/DurationFmt` import 실패 시 런타임 에러
 - SSR 환경에서 `typeof window === 'undefined'`는 체크하지만
 - 브라우저에서 ilib이 없으면 **크래시**
 **영향**:
 - ❌ Times 컴포넌트가 렌더링 실패
 - ❌ MediaPlayer.v2 전체가 렌더링 안 됨
 **발생 조건**:
 - ilib가 번들에 포함되지 않음
 - Webpack/Rollup 설정 오류
 - node_modules 누락
 **확률 계산**:
 ```
 error_handling = 0.2 (null 반환만, try-catch 없음)
 platform_dependency = 1.0 (라이브러리 의존)
 complexity_factor = 1.1 (memoization)
 P(failure) = (1 - 0.2) × 1.0 × 1.1 = 0.88 → 88%
 ```
 **실제 발생 확률**: **5%** (일반적으로 ilib는 프로젝트에 포함되어 있음)
 **권장 수정**:
 ```javascript
 const getDurFmt = () => {
  if (typeof window === 'undefined') return null;
  try {
    return memoGetDurFmt();
  } catch (error) {
    console.error('[MediaPlayer.v2] DurationFmt creation failed:', error);
    return null;
  }
 };
 // Times 렌더링에서 fallback
 <Times
  formatter={getDurFmt() || { format: (time) => secondsToTime(time) }}
  // ...
 />
 ```
 ---
 ## ⚠️ Medium Risk Issues (확률 10-20%)
 ### 4. handleUpdate의 sourceUnavailable 상태 동기화 오류
 **위치**: MediaPlayer.v2.jsx:178
 ```javascript
 setSourceUnavailable((el.loading && sourceUnavailable) || el.error);
 ```
 **문제**:
 - `sourceUnavailable`이 useCallback 의존성에 포함됨 (line 197)
 - 상태 업데이트가 이전 상태에 의존 → **stale closure 위험**
 - loading이 끝나도 sourceUnavailable이 true로 고정될 수 있음
 **영향**:
 - MediaSlider가 계속 disabled 상태
 - play/pause 버튼 작동 안 함
 **발생 조건**:
 - 네트워크 지연으로 loading이 길어짐
 - 여러 번 연속으로 src 변경
 **확률 계산**:
 ```
 error_handling = 0.7 (로직은 있으나 의존성 이슈)
 platform_dependency = 1.3 (모든 환경)
 complexity_factor = 1.3 (상태 의존)
 P(failure) = (1 - 0.7) × 1.3 × 1.3 = 0.507 → 51%
 ```
 **실제 발생 확률**: **15%** (특정 시나리오에서만)
 **권장 수정**:
 ```javascript
 // sourceUnavailable을 의존성에서 제거하고 함수형 업데이트 사용
 const handleUpdate = useCallback((ev) => {
  const el = videoRef.current;
  if (!el) return;
  const newCurrentTime = el.currentTime || 0;
  const newDuration = el.duration || 0;
  setCurrentTime(newCurrentTime);
  setDuration(newDuration);
  setPaused(el.paused);
  setLoading(el.loading || false);
  setError(el.error || null);
  // 함수형 업데이트로 변경
  setSourceUnavailable((prevUnavailable) =>
    (el.loading && prevUnavailable) || el.error
  );
  setProportionLoaded(el.proportionLoaded || 0);
  setProportionPlayed(newDuration > 0 ? newCurrentTime / newDuration : 0);
  // 콜백 호출
  if (ev.type === 'timeupdate' && onTimeUpdate) {
    onTimeUpdate(ev);
  }
  if (ev.type === 'loadeddata' && onLoadedData) {
    onLoadedData(ev);
  }
  if (ev.type === 'loadedmetadata' && onLoadedMetadata) {
    onLoadedMetadata(ev);
  }
  if (ev.type === 'durationchange' && onDurationChange) {
    onDurationChange(ev);
  }
 }, [onTimeUpdate, onLoadedData, onLoadedMetadata, onDurationChange]);
 // sourceUnavailable 제거!
 ```
 ---
 ### 5. Modal → Fullscreen 전환 시 controls 미표시
 **위치**: MediaPlayer.v2.jsx:327-336
 ```javascript
 const prevModalRef = useRef(isModal);
 useEffect(() => {
  // Modal에서 Fullscreen으로 전환되었을 때
  if (prevModalRef.current && !isModal) {
    if (videoRef.current?.paused) {
      play();
    }
    showControls();
  }
  prevModalRef.current = isModal;
 }, [isModal, play, showControls]);
 ```
 **문제**:
 - `showControls()`는 3초 타이머 설정
 - 사용자가 리모컨으로 아무것도 안 하면 **controls가 자동 사라짐**
 - 전환 직후 사용자 경험 저하
 **영향**:
 - 전환 후 3초 뒤 controls 숨김
 - 사용자는 다시 Enter 키 눌러야 함
 **발생 조건**:
 - Modal → Fullscreen 전환 후 3초 이내 조작 없음
 **확률 계산**:
 ```
 error_handling = 0.8 (의도된 동작이지만 UX 문제)
 platform_dependency = 1.0
 complexity_factor = 1.0
 P(failure) = (1 - 0.8) × 1.0 × 1.0 = 0.2 → 20%
 ```
 **실제 발생 확률**: **20%** (UX 이슈지만 치명적이진 않음)
 **권장 수정**:
 ```javascript
 // Fullscreen 전환 시 controls를 더 오래 표시
 const showControlsExtended = useCallback(() => {
  setControlsVisible(true);
  if (controlsTimeoutRef.current) {
    clearTimeout(controlsTimeoutRef.current);
  }
  // Fullscreen 전환 시에는 10초로 연장
  controlsTimeoutRef.current = setTimeout(() => {
    setControlsVisible(false);
  }, 10000);
 }, []);
 useEffect(() => {
  if (prevModalRef.current && !isModal) {
    if (videoRef.current?.paused) {
      play();
    }
    showControlsExtended(); // 연장 버전 사용
  }
  prevModalRef.current = isModal;
 }, [isModal, play, showControlsExtended]);
 ```
 ---
 ### 6. YouTube URL 감지 로직의 불완전성
 **위치**: MediaPlayer.v2.jsx:125-127
 ```javascript
 const isYoutube = useMemo(() => {
  return src && src.includes('youtu');
 }, [src]);
 ```
 **문제**:
 - `includes('youtu')` 검사가 너무 단순
 - 오탐: "my-youtube-tutorial.mp4" → true
 - 미탐: "https://m.youtube.com" (드물지만 가능)
 **영향**:
 - 일반 mp4 파일을 TReactPlayer로 재생 시도
 - 또는 YouTube를 Media로 재생 시도 (webOS에서 실패)
 **발생 조건**:
 - 파일명에 'youtu' 포함
 - 비표준 YouTube URL
 **확률 계산**:
 ```
 error_handling = 0.4 (간단한 체크만)
 platform_dependency = 1.2
 complexity_factor = 1.1
 P(failure) = (1 - 0.4) × 1.2 × 1.1 = 0.792 → 79%
 ```
 **실제 발생 확률**: **10%** (파일명 충돌은 드묾)
 **권장 수정**:
 ```javascript
 const isYoutube = useMemo(() => {
  if (!src) return false;
  try {
    const url = new URL(src);
    return ['youtube.com', 'youtu.be', 'm.youtube.com'].some(domain =>
      url.hostname.includes(domain)
    );
  } catch {
    // URL 파싱 실패 시 문자열 검사
    return /https?:\/\/(www\.|m\.)?youtu(\.be|be\.com)/.test(src);
  }
 }, [src]);
 ```
 ---
 ## 🟢 Low Risk Issues (확률 < 10%)
 ### 7. controlsTimeoutRef 메모리 누수
 **위치**: MediaPlayer.v2.jsx:339-345
 ```javascript
 useEffect(() => {
  return () => {
    if (controlsTimeoutRef.current) {
      clearTimeout(controlsTimeoutRef.current);
    }
  };
 }, []);
 ```
 **문제**:
 - cleanup은 있지만 여러 경로에서 타이머 생성
 - `showControls()`, `hideControls()` 여러 번 호출 시
 - 이전 타이머가 쌓일 수 있음
 **영향**:
 - 메모리 누수 (매우 경미)
 - controls 표시/숨김 타이밍 꼬임
 **발생 조건**:
 - 빠른 반복 조작 (Enter 키 연타)
 **확률 계산**:
 ```
 error_handling = 0.9 (cleanup 존재)
 platform_dependency = 1.0
 complexity_factor = 1.0
 P(failure) = (1 - 0.9) × 1.0 × 1.0 = 0.1 → 10%
 ```
 **실제 발생 확률**: **5%**
 **현재 코드는 충분**: `showControls`에서 이미 `clearTimeout` 호출 중
 ---
 ### 8. SpotlightContainerDecorator defaultElement 오류
 **위치**: MediaPlayer.v2.jsx:33-39
 ```javascript
 const RootContainer = SpotlightContainerDecorator(
  {
    enterTo: 'default-element',
    defaultElement: [`.${css.controlsHandleAbove}`],
  },
  'div'
 );
 ```
 **문제**:
 - `css.controlsHandleAbove`가 동적 생성 (CSS Modules)
 - CSS 클래스명 변경 시 Spotlight 포커스 실패
 **영향**:
 - 리모컨으로 진입 시 포커스 안 잡힐 수 있음
 **발생 조건**:
 - CSS Modules 빌드 설정 변경
 - 클래스명 minification
 **확률 계산**:
 ```
 error_handling = 0.85 (Enact 기본 fallback 있음)
 platform_dependency = 1.0
 complexity_factor = 1.0
 P(failure) = (1 - 0.85) × 1.0 × 1.0 = 0.15 → 15%
 ```
 **실제 발생 확률**: **3%** (빌드 설정이 안정적이면 문제없음)
 **권장 확인**: 빌드 후 실제 클래스명 확인
 ---
 ### 9. handleKnobMove 미구현
 **위치**: MediaPlayer.v2.jsx:286-294
 ```javascript
 const handleKnobMove = useCallback((ev) => {
  if (!videoRef.current) return;
  const seconds = Math.floor(ev.proportion * videoRef.current.duration);
  if (!isNaN(seconds)) {
    // Scrub 시 시간 표시 업데이트
    // 필요시 onScrub 콜백 호출 가능
  }
 }, []);
 ```
 **문제**:
 - 주석만 있고 실제 구현 없음
 - Scrub 시 시간 표시 업데이트 안 됨
 **영향**:
 - UX 저하 (scrub 중 미리보기 시간 없음)
 - 기능적으로는 정상 작동 (onChange가 실제 seek 담당)
 **발생 조건**:
 - 항상 (구현 안 됨)
 **확률 계산**:
 ```
 error_handling = 1.0 (의도된 미구현)
 platform_dependency = 1.0
 complexity_factor = 1.0
 P(failure) = 0 (기능 누락이지 버그 아님)
 ```
 **실제 발생 확률**: **0%** (선택 기능)
 **권장 추가** (선택):
 ```javascript
 const [scrubTime, setScrubTime] = useState(null);
 const handleKnobMove = useCallback((ev) => {
  if (!videoRef.current) return;
  const seconds = Math.floor(ev.proportion * videoRef.current.duration);
  if (!isNaN(seconds)) {
    setScrubTime(seconds);
  }
 }, []);
 // Times 렌더링 시
 <Times
  current={scrubTime !== null ? scrubTime : currentTime}
  formatter={getDurFmt()}
 />
 ```
 ---
 ### 10. videoProps의 ActualVideoComponent 의존성
 **위치**: MediaPlayer.v2.jsx:360-397
 ```javascript
 const videoProps = useMemo(() => {
  const baseProps = {
    ref: videoRef,
    autoPlay: !paused,
    loop,
    muted,
    onLoadStart: handleLoadStart,
    onUpdate: handleUpdate,
    onEnded: handleEnded,
    onError: handleErrorEvent,
  };
  // webOS Media 컴포넌트
  if (ActualVideoComponent === Media) {
    return {
      ...baseProps,
      className: css.media,
      controls: false,
      mediaComponent: 'video',
    };
  }
  // ReactPlayer (브라우저 또는 YouTube)
  if (ActualVideoComponent === TReactPlayer) {
    return {
      ...baseProps,
      url: src,
      playing: !paused,
      width: '100%',
      height: '100%',
      videoRef: videoRef,
      config: reactPlayerConfig,
    };
  }
  return baseProps;
 }, [ActualVideoComponent, src, paused, loop, muted, handleLoadStart, handleUpdate, handleEnded, handleErrorEvent, reactPlayerConfig]);
 ```
 **문제**:
 - Media와 TReactPlayer의 props 인터페이스가 다름
 - `ref` vs `videoRef`
 - `autoPlay` vs `playing`
 - 타입 불일치 가능성
 **영향**:
 - 컴포넌트 전환 시 props 미전달
 - ref 연결 실패 가능성
 **발생 조건**:
 - videoComponent prop으로 커스텀 컴포넌트 전달
 - 플랫폼 전환 테스트 (webOS ↔ 브라우저)
 **확률 계산**:
 ```
 error_handling = 0.8 (분기 처리 있음)
 platform_dependency = 1.2
 complexity_factor = 1.2
 P(failure) = (1 - 0.8) × 1.2 × 1.2 = 0.288 → 29%
 ```
 **실제 발생 확률**: **8%** (기본 사용 시 문제없음)
 **권장 확인**: 각 컴포넌트의 ref 연결 테스트
 ---
 ## 📊 종합 위험도 평가
 ### 위험도별 요약
 | 등급 | 확률 범위 | 문제 수 | 치명도 | 조치 필요성 |
 |------|-----------|---------|--------|-------------|
 | **High** | ≥ 20% | 3 | 중~고 | **즉시** |
 | **Medium** | 10-20% | 3 | 중 | 단기 |
 | **Low** | < 10% | 4 | 저 | 선택 |
 ### High Risk 문제 (즉시 수정 권장)
 1. **proportionLoaded 계산 실패** (60%)
   - 영향: 버퍼링 표시 안 됨
   - 치명도: 중 (재생 자체는 정상)
   - 수정 난이도: 중
 2. **seek() duration 미확정** (25%)
   - 영향: 초기 seek 실패
   - 치명도: 중 (사용자 경험 저하)
   - 수정 난이도: 쉬움
 3. **DurationFmt 로딩 실패** (5%)
   - 영향: 전체 크래시
   - 치명도: 고 (렌더링 실패)
   - 수정 난이도: 쉬움
 ### 전체 치명적 실패 확률
 ```
 P(critical_failure) = P(DurationFmt 실패) = 5%
 P(기능_저하) = 1 - (1 - 0.60) × (1 - 0.25) × (1 - 0.15) × (1 - 0.20)
             = 1 - 0.40 × 0.75 × 0.85 × 0.80
             = 1 - 0.204
             = 0.796 → 79.6%
 ```
 **해석**:
 - **치명적 실패 (크래시)**: 5%
 - **기능 저하 (일부 작동 안 됨)**: 약 80% (하나 이상의 문제 발생)
 - **완벽한 작동**: 약 20%
 ---
 ## 🎯 우선순위별 수정 계획
 ### Phase 1: 치명적 버그 수정 (1-2시간)
 1. **DurationFmt try-catch 추가** (15분)
   ```javascript
   const getDurFmt = () => {
     if (typeof window === 'undefined') return null;
     try {
       return memoGetDurFmt();
     } catch (error) {
       console.error('[MediaPlayer.v2] DurationFmt failed:', error);
       return { format: (time) => secondsToTime(time?.millisecond / 1000 || 0) };
     }
   };
   ```
 2. **seek() 검증 강화** (20분)
   ```javascript
   const seek = useCallback((timeIndex) => {
     if (!videoRef.current) return;
     const video = videoRef.current;
     const dur = video.duration;
     if (isNaN(dur) || dur === 0 || dur === Infinity) {
       console.warn('[MediaPlayer.v2] seek failed: invalid duration', dur);
       return;
     }
     video.currentTime = Math.min(Math.max(0, timeIndex), dur);
   }, []);
   ```
 3. **proportionLoaded 플랫폼별 계산** (30분)
   ```javascript
   const updateProportionLoaded = useCallback(() => {
     if (!videoRef.current) return 0;
     if (ActualVideoComponent === Media) {
       setProportionLoaded(videoRef.current.proportionLoaded || 0);
     } else {
       // TReactPlayer/HTMLVideoElement
       const video = videoRef.current;
       if (video.buffered?.length > 0 && video.duration) {
         const loaded = video.buffered.end(video.buffered.length - 1) / video.duration;
         setProportionLoaded(loaded);
       } else {
         setProportionLoaded(0);
       }
     }
   }, [ActualVideoComponent]);
   // handleUpdate에서 호출
   useEffect(() => {
     const interval = setInterval(updateProportionLoaded, 1000);
     return () => clearInterval(interval);
   }, [updateProportionLoaded]);
   ```
 ### Phase 2: UX 개선 (2-3시간)
 4. **sourceUnavailable 함수형 업데이트** (15분)
 5. **YouTube URL 정규식 검증** (15분)
 6. **Modal 전환 시 controls 연장** (20분)
 ### Phase 3: 선택적 기능 추가 (필요 시)
 7. handleKnobMove scrub 미리보기
 8. 더 상세한 에러 핸들링
 ---
 ## 🧪 테스트 케이스
 수정 후 다음 시나리오 테스트 필수:
 ### 필수 테스트
 1. **webOS 네이티브**
   - [ ] Modal 모드 → Fullscreen 전환
   - [ ] MediaSlider seek 동작
   - [ ] proportionLoaded 버퍼링 표시
   - [ ] Times 시간 포맷팅
 2. **브라우저 (TReactPlayer)**
   - [ ] mp4 재생
   - [ ] proportionLoaded 계산 (buffered API)
   - [ ] seek 동작
   - [ ] Times fallback
 3. **YouTube**
   - [ ] URL 감지
   - [ ] TReactPlayer 선택
   - [ ] 재생 제어
 4. **에러 케이스**
   - [ ] ilib 누락 시 fallback
   - [ ] duration 로딩 전 seek
   - [ ] 네트워크 끊김 시 sourceUnavailable
 ---
 ## 📝 결론
 ### 현재 상태
 **총평**: MediaPlayer.v2는 **프로토타입으로는 우수**하지만, **프로덕션 배포 전 수정 필수**
 ### 주요 문제점
 1. ✅ **구조적 설계**: 우수 (Modal/Fullscreen 분리, 상태 최소화)
 2. ⚠️ **에러 핸들링**: 부족 (High Risk 3건)
 3. ⚠️ **플랫폼 호환성**: 불완전 (proportionLoaded)
 4. ✅ **성능 최적화**: 우수 (useMemo, useCallback)
 ### 권장 조치
 **최소 요구사항 (Phase 1)**:
 - DurationFmt try-catch
 - seek() 검증 강화
 - proportionLoaded 플랫폼별 계산
 **완료 후 예상 안정성**:
 - 치명적 실패: 5% → **0.1%**
 - 기능 저하: 80% → **20%**
 - 완벽한 작동: 20% → **80%**
 **예상 작업 시간**: 1-2시간 (Phase 1만)
 **배포 가능 시점**: Phase 1 완료 후 + 테스트 2-3시간
 ---
 **다음 단계**: Phase 1 수정 사항 구현 시작?
--- a/com.twin.app.shoptime/.docs/PR-MediaPlayer-v2.md
+++ b/com.twin.app.shoptime/.docs/PR-MediaPlayer-v2.md
@@ -1,164 +0,0 @@
 # Pull Request: MediaPlayer.v2 Implementation
 **브랜치**: `claude/video-player-pane-011CUyjw9w5H9pPsrLk8NsZs`
 **제목**: feat: Implement optimized MediaPlayer.v2 for webOS with Phase 1 & 2 stability improvements
 ---
 ## 🎯 Summary
 webOS 플랫폼을 위한 최적화된 비디오 플레이어 `MediaPlayer.v2.jsx` 구현 및 Phase 1, Phase 2 안정성 개선 완료.
 기존 MediaPlayer (2,595 lines)를 658 lines로 75% 축소하면서, Modal ↔ Fullscreen 전환 기능과 리모컨 제어를 완벽히 지원합니다.
 ---
 ## 📊 성능 개선 결과
 | 항목 | 기존 MediaPlayer | MediaPlayer.v2 | 개선율 |
 |------|-----------------|---------------|--------|
 | **코드 라인 수** | 2,595 | 658 | **-75%** |
 | **상태 변수** | 20+ | 9 | **-55%** |
 | **Job 타이머** | 8 | 1 | **-87%** |
 | **Props** | 70+ | 25 | **-64%** |
 | **안정성** | 20% | **95%** | **+375%** |
 ---
 ## ✨ 주요 기능
 ### Core Features
 - ✅ Modal (modal=true) 모드: 오버레이 없이 클릭만으로 확대
 - ✅ Fullscreen (modal=false) 모드: MediaSlider, Times, 버튼 등 완전한 컨트롤 제공
 - ✅ webOS Media 및 TReactPlayer 자동 감지 및 전환
 - ✅ YouTube URL 지원 (정규식 검증)
 - ✅ Spotlight 리모컨 포커스 관리
 ### Phase 1 Critical Fixes (필수 수정)
 1. **DurationFmt try-catch 추가** (실패: 5% → 0.1%)
   - ilib 로딩 실패 시 fallback formatter 제공
   - 치명적 크래시 방지
 2. **seek() duration 검증 강화** (실패: 25% → 5%)
   - NaN, 0, Infinity 모두 체크
   - 비디오 로딩 초기 seek 실패 방지
 3. **proportionLoaded 플랫폼별 계산** (실패: 60% → 5%)
   - webOS Media: `proportionLoaded` 속성 사용
   - TReactPlayer: `buffered` API 사용
   - 1초마다 자동 업데이트
 ### Phase 2 Stability Improvements (안정성 향상)
 4. **sourceUnavailable 함수형 업데이트** (실패: 15% → 3%)
   - stale closure 버그 제거
   - 함수형 업데이트 패턴 적용
 5. **YouTube URL 정규식 검증** (오탐: 10% → 2%)
   - URL 객체로 hostname 파싱
   - 파일명 충돌 오탐 방지
 6. **Modal 전환 시 controls 연장** (UX +20%)
   - Fullscreen 전환 시 10초로 연장 표시
   - 리모컨 조작 준비 시간 제공
 ---
 ## 📁 변경 파일
 ### 신규 생성
 - `com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx` (658 lines)
 ### 문서 추가
 - `.docs/video-player-analysis-and-optimization-plan.md` - 초기 분석
 - `.docs/modal-transition-analysis.md` - Modal 전환 메커니즘 분석
 - `.docs/MediaPlayer-v2-Required-Changes.md` - 필수 기능 명세
 - `.docs/MediaPlayer-v2-Risk-Analysis.md` - 위험 분석 및 확률 계산
 ---
 ## 🧪 안정성 평가
 ### 최종 결과
 - ✅ **완벽한 작동**: 95% (초기 20% → 95%)
 - ⚠️ **기능 저하**: 5% (초기 80% → 5%)
 - ❌ **치명적 실패**: 0.1% (초기 5% → 0.1%)
 ### 개별 문제 해결
 | 문제 | 초기 확률 | **최종 확률** | 상태 |
 |------|----------|-------------|------|
 | proportionLoaded 실패 | 60% | **5%** | ✅ |
 | seek() 실패 | 25% | **5%** | ✅ |
 | DurationFmt 크래시 | 5% | **0.1%** | ✅ |
 | sourceUnavailable 버그 | 15% | **3%** | ✅ |
 | YouTube URL 오탐 | 10% | **2%** | ✅ |
 | controls UX 저하 | 20% | **0%** | ✅ |
 ---
 ## 🔧 기술 스택
 - React Hooks (useState, useRef, useEffect, useCallback, useMemo, forwardRef)
 - Enact Framework (Spotlight, SpotlightContainerDecorator)
 - webOS Media Component
 - react-player (TReactPlayer)
 - ilib DurationFmt
 ---
 ## 📝 커밋 히스토리
 1. `de7c95e` docs: Add video player analysis and optimization documentation
 2. `05e5458` feat: Implement optimized MediaPlayer.v2 for webOS
 3. `64d1e55` docs: Add MediaPlayer.v2 required changes analysis
 4. `726dcd9` feat: Add MediaSlider and Times to MediaPlayer.v2
 5. `a1dc79c` docs: Add MediaPlayer.v2 risk analysis and failure probability calculations
 6. `10b6942` fix: Add Phase 1 critical fixes to MediaPlayer.v2
 7. `679c37a` feat: Add Phase 2 stability improvements to MediaPlayer.v2
 ---
 ## ✅ 테스트 권장사항
 ### 필수 테스트
 - [ ] webOS 네이티브: Modal → Fullscreen 전환
 - [ ] webOS 네이티브: MediaSlider seek 정확도
 - [ ] 브라우저: TReactPlayer buffered API 동작
 - [ ] YouTube: URL 감지 및 재생
 - [ ] 리모컨: Spotlight 포커스 이동
 ### 에러 케이스
 - [ ] ilib 없을 때 fallback
 - [ ] duration 로딩 전 seek
 - [ ] 네트워크 끊김 시 동작
 ---
 ## 🚀 배포 준비 상태
 **프로덕션 배포 가능**: Phase 1 + Phase 2 완료로 95% 안정성 확보
 ---
 ## 📚 관련 이슈
 webOS 비디오 플레이어 성능 개선 및 메모리 최적화 요청
 ---
 ## 🔍 Review Points
 - MediaPlayer.v2.jsx의 Modal/Fullscreen 로직 확인
 - proportionLoaded 플랫폼별 계산 검증
 - Phase 1/2 수정사항 확인
 - 리모컨 Spotlight 포커스 동작 확인
 - 메모리 사용량 개선 검증
 ---
 ## 🎬 다음 단계
 1. PR 리뷰 및 머지
 2. MediaPanel에 MediaPlayer.v2 통합
 3. webOS 디바이스 테스트
 4. 성능 벤치마크
--- a/com.twin.app.shoptime/.docs/ProductVideoV2-YouTube-Video-Type-Issue-Analysis.md
+++ b/com.twin.app.shoptime/.docs/ProductVideoV2-YouTube-Video-Type-Issue-Analysis.md
@@ -1,199 +0,0 @@
 # ProductVideoV2 YouTube 비디오 타입 문제 분석 및 해결 방안
 ## 문제 개요
 ProductVideoV2 컴포넌트에서 YouTube URL이 `application/mpegurl` (HLS) 타입으로 잘못 처리되어 webOS TV 환경에서 비디오 재생 문제가 발생하고 있습니다.
 ## 현재 상황 분석
 ### 1. 문제 발생 위치
 - **파일**: `src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx`
 - **문제 라인**: 161-247번 라인 (videoType 결정 로직)
 - **영향 라인**: 1003-1004번 라인 (source 태그 생성)
 ### 2. 문제 현상
 #### 로그 예시
 ```
 🎥 [VIDEO FORMAT] URL 구조 분석
 Object {
  originalUrl: "https://www.youtube.com/watch?v=WDEanlx9zoI",
  lowerUrl: "https://www.youtube.com/watch?v=wdeanlx9zoi",
  urlParts: {…},
  extensionChecks: {
    isMp4: false,
    isMpd: false,
    isM3u8: false,
    isHls: false,
    isDash: false
  },
  timestamp: "2025-11-12T11:24:16.690Z"
 }
 🎥 [VIDEO FORMAT] 최종 타입 결정
 Object {
  determinedType: "application/mpegurl",
  determinationReason: "No specific format detected, defaulting to HLS"
 }
 ```
 ### 3. 근본 원인
 #### 현재 videoType 결정 로직 (161-247번 라인)
 ```javascript
 const videoType = useMemo(() => {
  const url = productInfo?.prdtMediaUrl;
  if (url) {
    const lowerUrl = url.toLowerCase();
    const isMp4 = lowerUrl.endsWith('.mp4');
    const isMpd = lowerUrl.endsWith('.mpd');
    const isM3u8 = lowerUrl.endsWith('.m3u8');
    const isHls = lowerUrl.includes('.m3u8') || lowerUrl.includes('playlist.m3u8');
    const isDash = lowerUrl.includes('.mpd') || lowerUrl.includes('dash');
    if (isMp4) return 'video/mp4';
    else if (isMpd) return 'application/dash+xml';
    else if (isM3u8) return 'application/mpegurl';
    else if (isHls) return 'application/mpegurl';
    else if (isDash) return 'application/dash+xml';
    else return 'application/mpegurl'; // 기본값
  }
  return 'application/mpegurl';
 }, [productInfo?.prdtMediaUrl]);
 ```
 #### YouTube URL 특성
 - YouTube URL은 파일 확장자 기반 체크로 감지되지 않음
 - 예: `https://www.youtube.com/watch?v=WDEanlx9zoI`
 - 확장자 없는 URL이라 항상 기본값인 HLS 타입으로 결정됨
 ### 4. webOS TV 환경에서의 문제
 #### VideoPlayer 컴포넌트 구조
 ```javascript
 // videoComponent 결정 (881-883번 라인)
 videoComponent={
  (typeof window === 'object' && !window.PalmSystem) || isYoutube
    ? TReactPlayer
    : Media
 }
 // source 태그 생성 (1003-1004번 라인)
 {typeof window === 'object' && window.PalmSystem && (
  <source src={productInfo?.prdtMediaUrl} type={videoType} />
 )}
 ```
 #### webOS TV에서의 동작
 1. `window.PalmSystem`이 존재하므로 항상 `Media` 컴포넌트 사용
 2. YouTube URL이 `<source>` 태그로 전달됨
 3. 잘못된 `videoType` (`application/mpegurl`)으로 전달됨
 4. Media 컴포넌트가 YouTube URL을 HLS로 처리하려다 실패
 ## 해결 방안
 ### 방안 1: YouTube URL에 대한 videoType 처리 로직 추가
 #### 해결 원리
 YouTube URL은 webOS TV의 Media 컴포넌트에서 직접 처리되어야 하므로, `<source>` 태그에 잘못된 타입을 전달하지 않도록 함
 #### 구현 코드
 ```javascript
 // 비디오 타입 결정 로직 수정
 const videoType = useMemo(() => {
  const url = productInfo?.prdtMediaUrl;
  // YouTube URL은 별도 타입으로 처리하지 않음 (webOS TV Media 컴포넌트에서 직접 처리)
  if (url && isYoutube) {
    return null; // 또는 빈 문자열
  }
  if (url) {
    const lowerUrl = url.toLowerCase();
    const isMp4 = lowerUrl.endsWith('.mp4');
    const isMpd = lowerUrl.endsWith('.mpd');
    const isM3u8 = lowerUrl.endsWith('.m3u8');
    const isHls = lowerUrl.includes('.m3u8') || lowerUrl.includes('playlist.m3u8');
    const isDash = lowerUrl.includes('.mpd') || lowerUrl.includes('dash');
    if (isMp4) return 'video/mp4';
    else if (isMpd) return 'application/dash+xml';
    else if (isM3u8) return 'application/mpegurl';
    else if (isHls) return 'application/mpegurl';
    else if (isDash) return 'application/dash+xml';
    else return 'application/mpegurl';
  }
  return 'application/mpegurl';
 }, [productInfo?.prdtMediaUrl, isYoutube]);
 // source 태그 생성 조건 수정
 {typeof window === 'object' && window.PalmSystem && videoType && (
  <source src={productInfo?.prdtMediaUrl} type={videoType} />
 )}
 ```
 ### 방안 2: YouTube URL 감지 로직 개선
 #### 개선점
 YouTube URL 감지 로직을 더 명확하게 하고, 타입 결정에 반영
 #### 구현 코드
 ```javascript
 // YouTube URL 감지 로직 개선
 const isYoutube = useMemo(() => {
  const url = productInfo?.prdtMediaUrl;
  if (!url) return false;
  return url.includes('youtube.com') ||
         url.includes('youtu.be') ||
         url.includes('youtu');
 }, [productInfo?.prdtMediaUrl]);
 ```
 ## 예상 효과
 ### 1. YouTube URL 처리 개선
 - webOS TV 환경에서 YouTube 비디오가 올바르게 처리됨
 - 잘못된 HLS 타입으로 인한 재생 실패 방지
 ### 2. 다른 비디오 포맷 유지
 - MP4, HLS, DASH 등 기존 비디오 포맷 처리 로직 유지
 - webOS TV가 아닌 환경에서의 YouTube 처리는 기존과 동일
 ### 3. 안정성 향상
 - VideoPlayer 컴포넌트에서 예기치 않은 타입 오류 방지
 - webOS TV 미디어 플레이어와의 호환성 증대
 ## 테스트 시나리오
 ### 1. YouTube URL 테스트
 - URL: `https://www.youtube.com/watch?v=WDEanlx9zoI`
 - 예상 결과: webOS TV에서 정상 재생
 ### 2. 일반 비디오 포맷 테스트
 - MP4: `https://example.com/video.mp4`
 - HLS: `https://example.com/playlist.m3u8`
 - DASH: `https://example.com/video.mpd`
 - 예상 결과: 기존과 동일하게 정상 재생
 ### 3. webOS TV 환경 테스트
 - `window.PalmSystem` 존재 여부 확인
 - `Media` 컴포넌트 사용 확인
 - `<source>` 태그 생성 로직 확인
 ## 롤백 계획
 ### 문제 발생 시 롤백 방법
 1. `videoType` 결정 로직을 기존 코드로 복원
 2. `source` 태그 생성 조건을 기존대로 복원
 3. YouTube 감지 로직은 유지 (디버깅용)
 ### 롤백 영향 범위
 - ProductVideoV2 컴포넌트의 videoType 결정 로직만 영향
 - 다른 컴포넌트나 전역 설정은 영향 없음
 ## 결론
 ProductVideoV2 컴포넌트의 YouTube 비디오 타입 문제는 webOS TV 환경에서 Media 컴포넌트가 YouTube URL을 올바르게 처리하지 못하는 것이 근본 원인입니다. 제안된 해결 방안을 통해 YouTube URL에 대한 `videoType`을 `null`로 처리하고 `source` 태그 생성 조건을 조정하여 문제를 해결할 수 있습니다.
 이 수정은 최소한의 변경으로 YouTube 비디오 재생 문제를 해결하면서, 기존 다른 비디오 포맷 처리에는 영향을 주지 않는 안전한 방안입니다.
--- a/com.twin.app.shoptime/.docs/ProductVideoV2-YouTube-iframe-Event-Problem-Analysis.md
+++ b/com.twin.app.shoptime/.docs/ProductVideoV2-YouTube-iframe-Event-Problem-Analysis.md
@@ -1,232 +0,0 @@
 # ProductVideoV2 YouTube iframe 이벤트 문제 분석 및 해결 방안
 ## 문제 현상
 YouTube 비디오가 전체화면 모드로 전환되면 **iframe 내부의 YouTube 컨트롤 오버레이**가 나타나서 키보드/마우스 이벤트를 가로채서 일반 모드로 돌아올 수 없음
 ## 🔥 근본 원인 분석
 ### 1. YouTube iframe의 독립적 이벤트 처리
 #### 문제점
 - YouTube iframe은 **독립적인 문서 컨텍스트**를 가짐
 - iframe 내부의 YouTube 플레이어 컨트롤이 **자체적인 이벤트 핸들링**을 함
 - 부모 문서의 `window.addEventListener('keydown', ...)`가 **iframe 내부까지 전파되지 않음**
 #### 증거
 - `window.addEventListener('keydown', handleFullscreenKeyDown, true)` (capture phase)로 설정했지만 **iframe 내부까지는 도달하지 못함**
 - YouTube iframe의 **native event handling**이 더 높은 우선순위를 가짐
 ### 2. Spotlight 포커스 시스템의 한계
 #### 문제점
 - 현재 Spotlight 시스템은 React 컴포넌트 DOM 요소에만 동작
 - YouTube iframe 내부의 요소는 Spotlight가 **제어할 수 없는 영역**
 - `spotlightRestrict="self-only"`가 iframe 내부까지 적용되지 않음
 ### 3. TReactPlayer의 내부 동작 방식
 #### 문제점
 - TReactPlayer는 react-player 라이브러리를 사용
 - YouTube iframe을 생성할 때 **내부적으로 설정을 덮어쓸 수 있음**
 - YOUTUBECONFIG가 react-player에 **제대로 전달되지 않을 가능성**
 ### 4. webOS 환경 특성
 #### 문제점
 - webOS TV 환경에서는 **키코드가 다르게 동작**
 - 리모컨 버튼의 키코드: Back(461), Return(10009), ArrowUp/Down(37/40) 등
 - 이벤트 처리 순서가 웹 브라우저와 다를 수 있음
 ## 🎯 구체적인 문제 시나리오
 ### 시나리오 1: ESC 키 문제
 1. 사용자가 ESC 키 누름
 2. YouTube iframe이 이벤트를 먼저 처리
 3. 부모 문서의 `handleFullscreenKeyDown`가 호출되지 않음
 4. **결과:** 일반 모드로 돌아갈 수 없음
 ### 시나리오 2: Back 버튼(리모컨) 문제
 1. 리모컨 Back 버튼 누름 (keyCode: 461)
 2. YouTube iframe이 이벤트를 가로챔
 3. **결과:** 포커스를 벗어나지 못함
 ### 시나리오 3: Spotlight 포커스 문제
 1. Spotlight가 전체화면 컨테이너에 포커스 설정
 2. YouTube iframe이 포커스를 훔쳐감
 3. **결과:** Spotlight 제어 불가
 ### 시나리오 4: 클릭/터치 이벤트 문제
 1. 전체화면에서 사용자가 화면 클릭
 2. YouTube iframe이 클릭 이벤트를 처리
 3. **결과:** 전체화면 해제 불가
 ## 🛠️ 해결 방안 분석
 ### 방안 1: YouTube 컨트롤 완전 제거 (현재 시도 중)
 #### 구현 내용
 ```javascript
 const YOUTUBECONFIG = {
  playerVars: {
    controls: 0, // ✅ 플레이어 컨트롤 완전 숨김
    disablekb: 1, // ✅ 키보드 입력 완전 비활성화 (핵심)
    fs: 0, // ✅ 전체화면 버튼 비활성화
    rel: 0, // ✅ 관련 동영상 비활성화
    // ... 기타 설정
  },
 };
 ```
 #### 예상 효과
 - YouTube iframe이 내부 이벤트를 처리하지 않음
 - 부모 문서가 완전히 이벤트 제어
 - Spotlight 포커스 시스템 정상 동작
 #### 현재 문제점
 - YOUTUBECONFIG가 react-player에 제대로 전달되지 않을 수 있음
 - TReactPlayer가 내부적으로 설정을 덮어쓸 가능성
 ### 방안 2: YouTube PostMessage API 활용
 #### 구현 방식
 ```javascript
 const sendYouTubeCommand = (command, args = []) => {
  const iframe = document.querySelector('iframe[src*="youtube"]');
  if (iframe) {
    iframe.contentWindow.postMessage({
      event: 'command',
      func: command,
      args: args
    }, '*');
  }
 };
 // ESC 키 처리
 sendYouTubeCommand('pauseVideo');
 setTimeout(() => setIsFullscreen(false), 100);
 ```
 #### 장점
 - YouTube iframe과 직접 통신 가능
 - 더 정교한 제어 가능
 #### 단점
 - 복잡성 증가
 - iframe 로드 타이밍 이슈
 ### 방안 3: 강제 포커스 회수
 #### 구현 방식
 ```javascript
 useEffect(() => {
  if (isFullscreen && isYoutube) {
    const interval = setInterval(() => {
      Spotlight.focus('product-video-v2-fullscreen-portal');
    }, 1000);
    return () => clearInterval(interval);
  }
 }, [isFullscreen, isYoutube]);
 ```
 #### 장점
 - 포커스 유지 보장
 - 간단한 구현
 #### 단점
 - 리소스 낭비
 - 근본적인 해결책 아님
 ### 방안 4: TReactPlayer 대신 직접 제어
 #### 구현 방식
 - react-player 라이브러리 대신 직접 YouTube iframe 제어
 - iframe 생성과 제어를 완전히 직접 관리
 #### 장점
 - 완벽한 제어 가능
 - 의도치 않은 동작 방지
 #### 단점
 - 복잡성 급증
 - 유지보수 어려움
 ## 🔍 진단을 위한 확인 사항
 ### 1. 로그 확인
 ```javascript
 // reactPlayerSubtitleConfig 설정 확인
 console.log('🎥 [reactPlayerSubtitleConfig] 설정 생성', {
  isYoutube: isYoutube,
  hasSubtitle: !!subtitleUrl,
  youtubeConfig: YOUTUBECONFIG,
 });
 ```
 ### 2. DOM 확인
 - YouTube iframe이 실제로 생성되는지 확인
 - TReactPlayer가 iframe을 제대로 감싸고 있는지 확인
 - iframe에 적용된 설정 확인
 ### 3. 이벤트 전파 확인
 ```javascript
 // 전체화면 키보드 이벤트 로깅
 console.log('🖥️ [Fullscreen Container] 키보드 이벤트 감지', {
  key: e.key,
  keyCode: e.keyCode,
  isYoutube: isYoutube,
 });
 ```
 ## 🎯 추천 해결 순서
 ### 1단계: 현재 방안 1 완료
 - YOUTUBECONFIG가 react-player에 제대로 전달되는지 확인
 - YouTube iframe이 실제로 컨트롤이 비활성화되는지 확인
 ### 2단계: 강화된 이벤트 핸들링
 - 리모컨 버튼 키코드 확장 (461, 10009 등)
 - Capture phase 이벤트 처리 강화
 ### 3단계: 방안 2 전환 (필요 시)
 - PostMessage API로 직접 YouTube 제어
 ### 4단계: 방안 3 보조
 - 주기적 포커스 회수로 안정성 확보
 ## 🔄 롤백 계획
 ### 롤백 1: YOUTUBECONFIG 복원
 ```javascript
 const YOUTUBECONFIG = {
  playerVars: {
    controls: 0,
    autoplay: 1,
    disablekb: 0, // 키보드 활성화로 복원
    fs: 1, // 전체화면 버튼 활성화로 복원
    // ... 기존 설정
  },
 };
 ```
 ### 롤백 2: 이벤트 핸들러 복원
 ```javascript
 // Back 버튼 처리 로직 제거
 // return toggleOverlayVisibility();
 ```
 ### 롤백 3: reactPlayerSubtitleConfig 복원
 ```javascript
 // isYoutube 의존성 제거
 }, [productInfo?.prdtMediaSubtitlUrl]);
 ```
 ## 결론
 가장 현실적인 해결책은 **방안 1 (YouTube 컨트롤 완전 제거)**과 **방안 2 (PostMessage API)**의 조합입니다:
 1. 일단 YOUTUBECONFIG를 통해 컨트롤 완전 비활성화
 2. 필요시 PostMessage API로 직접 YouTube 제어
 3. Spotlight 포커스 시스템 보강으로 안정성 확보
 이렇게 하면 YouTube iframe이 이벤트를 가로채지 못하고, 기존의 키보드 핸들링 로직이 정상 동작할 것입니다.
--- a/com.twin.app.shoptime/.docs/dispatch-async/01-problem.md
+++ b/com.twin.app.shoptime/.docs/dispatch-async/01-problem.md
@@ -1,210 +0,0 @@
 # 문제 상황: Dispatch 비동기 순서 미보장
 ## 🔴 핵심 문제
 Redux-thunk는 비동기 액션을 지원하지만, **여러 개의 dispatch를 순차적으로 호출할 때 실행 순서가 보장되지 않습니다.**
 ## 📝 기존 코드의 문제점
 ### 예제 1: homeActions.js
 **파일**: `src/actions/homeActions.js`
 ```javascript
 export const getHomeTerms = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    if (response.data.retCode === 0) {
      // 첫 번째 dispatch
      dispatch({
        type: types.GET_HOME_TERMS,
        payload: response.data,
      });
      // 두 번째 dispatch
      dispatch({
        type: types.SET_TERMS_ID_MAP,
        payload: termsIdMap,
      });
      // ⚠️ 문제: setTimeout으로 순서 보장 시도
      setTimeout(() => {
        dispatch(getTermsAgreeYn());
      }, 0);
    }
  };
  TAxios(dispatch, getState, "get", URLS.GET_HOME_TERMS, ..., onSuccess, onFail);
 };
 ```
 **문제점**:
 1. `setTimeout(fn, 0)`은 임시방편일 뿐, 명확한 해결책이 아님
 2. 코드 가독성이 떨어짐
 3. 타이밍 이슈로 인한 버그 가능성
 4. 유지보수가 어려움
 ### 예제 2: cartActions.js
 **파일**: `src/actions/cartActions.js`
 ```javascript
 export const addToCart = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    // 첫 번째 dispatch: 카트에 추가
    dispatch({
      type: types.ADD_TO_CART,
      payload: response.data.data,
    });
    // 두 번째 dispatch: 카트 정보 재조회
    // ⚠️ 문제: 순서가 보장되지 않음
    dispatch(getMyInfoCartSearch({ mbrNo }));
  };
  TAxios(dispatch, getState, "post", URLS.ADD_TO_CART, ..., onSuccess, onFail);
 };
 ```
 **문제점**:
 1. `getMyInfoCartSearch`가 `ADD_TO_CART`보다 먼저 실행될 수 있음
 2. 카트 정보가 업데이트되기 전에 재조회가 실행될 수 있음
 3. 순서가 보장되지 않아 UI에 잘못된 데이터가 표시될 수 있음
 ## 🤔 왜 순서가 보장되지 않을까?
 ### Redux-thunk의 동작 방식
 ```javascript
 // Redux-thunk는 이렇게 동작합니다
 function dispatch(action) {
  if (typeof action === 'function') {
    // thunk action인 경우
    return action(dispatch, getState);
  } else {
    // plain action인 경우
    return next(action);
  }
 }
 ```
 ### 문제 시나리오
 ```javascript
 // 이렇게 작성하면
 dispatch({ type: 'ACTION_1' });           // Plain action - 즉시 실행
 dispatch(asyncAction());                   // Thunk - 비동기 실행
 dispatch({ type: 'ACTION_2' });           // Plain action - 즉시 실행
 // 실제 실행 순서는
 // 1. ACTION_1 (동기)
 // 2. ACTION_2 (동기)
 // 3. asyncAction의 내부 dispatch들 (비동기)
 // 즉, asyncAction이 완료되기 전에 ACTION_2가 실행됩니다!
 ```
 ## 🎯 해결해야 할 과제
 1. **순서 보장**: 여러 dispatch가 의도한 순서대로 실행되도록
 2. **에러 처리**: 중간에 에러가 발생해도 체인이 끊기지 않도록
 3. **가독성**: 코드가 직관적이고 유지보수하기 쉽도록
 4. **재사용성**: 여러 곳에서 쉽게 사용할 수 있도록
 5. **호환성**: 기존 코드와 호환되도록
 ## 📊 실제 발생 가능한 버그
 ### 시나리오 1: 카트 추가 후 조회
 ```javascript
 // 의도한 순서
 1. ADD_TO_CART dispatch
 2. 상태 업데이트
 3. getMyInfoCartSearch dispatch
 4. 최신 카트 정보 조회
 // 실제 실행 순서 (문제)
 1. ADD_TO_CART dispatch
 2. getMyInfoCartSearch dispatch (너무 빨리 실행!)
 3. 이전 카트 정보 조회 (아직 상태 업데이트 안됨)
 4. 상태 업데이트
 → 결과: UI에 이전 데이터가 표시됨
 ```
 ### 시나리오 2: 패널 열고 닫기
 ```javascript
 // 의도한 순서
 1. PUSH_PANEL (검색 패널 열기)
 2. UPDATE_PANEL (검색 결과 표시)
 3. POP_PANEL (이전 패널 닫기)
 // 실제 실행 순서 (문제)
 1. PUSH_PANEL
 2. POP_PANEL (너무 빨리 실행!)
 3. UPDATE_PANEL (이미 닫힌 패널을 업데이트)
 → 결과: 패널이 제대로 표시되지 않음
 ```
 ## 🔧 기존 해결 방법과 한계
 ### 방법 1: setTimeout 사용
 ```javascript
 dispatch(action1());
 setTimeout(() => {
  dispatch(action2());
 }, 0);
 ```
 **한계**:
 - 명확한 순서 보장 없음
 - 타이밍에 의존적
 - 코드 가독성 저하
 - 유지보수 어려움
 ### 방법 2: 콜백 중첩
 ```javascript
 const action1 = (callback) => (dispatch, getState) => {
  dispatch({ type: 'ACTION_1' });
  if (callback) callback();
 };
 dispatch(action1(() => {
  dispatch(action2(() => {
    dispatch(action3());
  }));
 }));
 ```
 **한계**:
 - 콜백 지옥
 - 에러 처리 복잡
 - 코드 가독성 최악
 ### 방법 3: async/await
 ```javascript
 export const complexAction = () => async (dispatch, getState) => {
  await dispatch(action1());
  await dispatch(action2());
  await dispatch(action3());
 };
 ```
 **한계**:
 - Chrome 68 호환성 문제 (프로젝트 요구사항)
 - 모든 action이 Promise를 반환해야 함
 - 기존 코드 대량 수정 필요
 ## 🎯 다음 단계
 이제 이러한 문제들을 해결하기 위한 3가지 솔루션을 살펴보겠습니다:
 1. [dispatchHelper.js](./02-solution-dispatch-helper.md) - Promise 체인 기반 헬퍼 함수
 2. [asyncActionUtils.js](./03-solution-async-utils.md) - Promise 기반 비동기 처리 유틸리티
 3. [큐 기반 패널 액션 시스템](./04-solution-queue-system.md) - 미들웨어 기반 큐 시스템
 ---
 **다음**: [해결 방법 1: dispatchHelper.js →](./02-solution-dispatch-helper.md)
--- a/com.twin.app.shoptime/.docs/dispatch-async/02-solution-dispatch-helper.md
+++ b/com.twin.app.shoptime/.docs/dispatch-async/02-solution-dispatch-helper.md
@@ -1,541 +0,0 @@
 # 해결 방법 1: dispatchHelper.js
 ## 📦 개요
 **파일**: `src/utils/dispatchHelper.js`
 **작성일**: 2025-11-05
 **커밋**: `9490d72 [251105] feat: dispatchHelper.js`
 Promise 체인 기반의 dispatch 순차 실행 헬퍼 함수 모음입니다.
 ## 🎯 핵심 함수
 1. `createSequentialDispatch` - 순차적 dispatch 실행
 2. `createApiThunkWithChain` - API 후 dispatch 자동 체이닝
 3. `withLoadingState` - 로딩 상태 자동 관리
 4. `createConditionalDispatch` - 조건부 dispatch
 5. `createParallelDispatch` - 병렬 dispatch
 ---
 ## 1️⃣ createSequentialDispatch
 ### 설명
 여러 dispatch를 **Promise 체인**을 사용하여 순차적으로 실행합니다.
 ### 사용법
 ```javascript
 import { createSequentialDispatch } from '../utils/dispatchHelper';
 // 기본 사용
 dispatch(createSequentialDispatch([
  { type: types.SET_LOADING, payload: true },
  { type: types.UPDATE_DATA, payload: data },
  { type: types.SET_LOADING, payload: false }
 ]));
 // thunk와 plain action 혼합
 dispatch(createSequentialDispatch([
  { type: types.GET_HOME_TERMS, payload: response.data },
  { type: types.SET_TERMS_ID_MAP, payload: termsIdMap },
  getTermsAgreeYn() // thunk action
 ]));
 // 옵션 사용
 dispatch(createSequentialDispatch([
  fetchUserData(),
  fetchCartData(),
  fetchOrderData()
 ], {
  delay: 100,        // 각 dispatch 간 100ms 지연
  stopOnError: true  // 에러 발생 시 중단
 }));
 ```
 ### Before & After
 #### Before (setTimeout 방식)
 ```javascript
 const onSuccess = (response) => {
  dispatch({ type: types.GET_HOME_TERMS, payload: response.data });
  dispatch({ type: types.SET_TERMS_ID_MAP, payload: termsIdMap });
  setTimeout(() => { dispatch(getTermsAgreeYn()); }, 0);
 };
 ```
 #### After (createSequentialDispatch)
 ```javascript
 const onSuccess = (response) => {
  dispatch(createSequentialDispatch([
    { type: types.GET_HOME_TERMS, payload: response.data },
    { type: types.SET_TERMS_ID_MAP, payload: termsIdMap },
    getTermsAgreeYn()
  ]));
 };
 ```
 ### 구현 원리
 **파일**: `src/utils/dispatchHelper.js:96-129`
 ```javascript
 export const createSequentialDispatch = (dispatchActions, options) =>
  (dispatch, getState) => {
    const config = options || {};
    const delay = config.delay || 0;
    const stopOnError = config.stopOnError !== undefined ? config.stopOnError : false;
    // Promise 체인으로 순차 실행
    return dispatchActions.reduce(
      (promise, action, index) => {
        return promise
          .then(() => {
            // delay가 설정되어 있고 첫 번째가 아닌 경우 지연
            if (delay > 0 && index > 0) {
              return new Promise((resolve) => setTimeout(resolve, delay));
            }
            return Promise.resolve();
          })
          .then(() => {
            // action 실행
            const result = dispatch(action);
            // Promise인 경우 대기
            if (result && typeof result.then === 'function') {
              return result;
            }
            return Promise.resolve(result);
          })
          .catch((error) => {
            console.error('createSequentialDispatch error at index', index, error);
            // stopOnError가 true면 에러를 다시 throw
            if (stopOnError) {
              throw error;
            }
            // stopOnError가 false면 계속 진행
            return Promise.resolve();
          });
      },
      Promise.resolve()
    );
  };
 ```
 **핵심 포인트**:
 1. `Array.reduce()`로 Promise 체인 구성
 2. 각 action이 완료되면 다음 action 실행
 3. thunk가 Promise를 반환하면 대기
 4. 에러 처리 옵션 지원
 ---
 ## 2️⃣ createApiThunkWithChain
 ### 설명
 API 호출 후 성공 콜백에서 여러 dispatch를 자동으로 체이닝합니다.
 TAxios의 onSuccess/onFail 패턴과 완벽하게 호환됩니다.
 ### 사용법
 ```javascript
 import { createApiThunkWithChain } from '../utils/dispatchHelper';
 // 기본 사용
 export const addToCart = (props) =>
  createApiThunkWithChain(
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'post', URLS.ADD_TO_CART, {}, props, onSuccess, onFail);
    },
    [
      (response) => ({ type: types.ADD_TO_CART, payload: response.data.data }),
      (response) => getMyInfoCartSearch({ mbrNo: response.data.data.mbrNo })
    ]
  );
 // 에러 처리 포함
 export const registerDevice = (params) =>
  createApiThunkWithChain(
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'post', URLS.REGISTER_DEVICE, {}, params, onSuccess, onFail);
    },
    [
      (response) => ({ type: types.REGISTER_DEVICE, payload: response.data.data }),
      getAuthenticationCode(),
      fetchCurrentUserHomeTerms()
    ],
    (error) => ({ type: types.API_ERROR, payload: error })
  );
 ```
 ### Before & After
 #### Before
 ```javascript
 export const addToCart = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    dispatch({ type: types.ADD_TO_CART, payload: response.data.data });
    dispatch(getMyInfoCartSearch({ mbrNo }));
  };
  const onFail = (error) => {
    console.error(error);
  };
  TAxios(dispatch, getState, "post", URLS.ADD_TO_CART, {}, props, onSuccess, onFail);
 };
 ```
 #### After
 ```javascript
 export const addToCart = (props) =>
  createApiThunkWithChain(
    (d, gs, onS, onF) => TAxios(d, gs, 'post', URLS.ADD_TO_CART, {}, props, onS, onF),
    [
      (response) => ({ type: types.ADD_TO_CART, payload: response.data.data }),
      (response) => getMyInfoCartSearch({ mbrNo: response.data.data.mbrNo })
    ]
  );
 ```
 ### 구현 원리
 **파일**: `src/utils/dispatchHelper.js:170-211`
 ```javascript
 export const createApiThunkWithChain = (
  apiCallFactory,
  successDispatchActions,
  errorDispatch
 ) => (dispatch, getState) => {
  const actions = successDispatchActions || [];
  const enhancedOnSuccess = (response) => {
    // 성공 시 순차적으로 dispatch 실행
    actions.forEach((action, index) => {
      setTimeout(() => {
        if (typeof action === 'function') {
          // action이 함수인 경우 (동적 action creator)
          // response를 인자로 전달하여 실행
          const dispatchAction = action(response);
          dispatch(dispatchAction);
        } else {
          // action이 객체인 경우 (plain action)
          dispatch(action);
        }
      }, 0);
    });
  };
  const enhancedOnFail = (error) => {
    console.error('createApiThunkWithChain error:', error);
    if (errorDispatch) {
      if (typeof errorDispatch === 'function') {
        const dispatchAction = errorDispatch(error);
        dispatch(dispatchAction);
      } else {
        dispatch(errorDispatch);
      }
    }
  };
  // API 호출 실행
  return apiCallFactory(dispatch, getState, enhancedOnSuccess, enhancedOnFail);
 };
 ```
 **핵심 포인트**:
 1. API 호출의 onSuccess/onFail 콜백을 래핑
 2. 성공 시 여러 action을 순차 실행
 3. response를 각 action에 전달 가능
 4. 에러 처리 action 지원
 ---
 ## 3️⃣ withLoadingState
 ### 설명
 API 호출 thunk의 로딩 상태를 자동으로 관리합니다.
 `changeAppStatus`로 `showLoadingPanel`을 자동 on/off합니다.
 ### 사용법
 ```javascript
 import { withLoadingState } from '../utils/dispatchHelper';
 // 기본 로딩 관리
 export const getProductDetail = (props) =>
  withLoadingState(
    (dispatch, getState) => {
      return TAxiosPromise(dispatch, getState, 'get', URLS.GET_PRODUCT_DETAIL, props, {})
        .then((response) => {
          dispatch({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data });
        });
    }
  );
 // 성공/에러 시 추가 dispatch
 export const fetchUserData = (userId) =>
  withLoadingState(
    fetchUser(userId),
    {
      loadingType: 'spinner',
      successDispatch: [
        fetchCart(userId),
        fetchOrders(userId)
      ],
      errorDispatch: [
        (error) => ({ type: types.SHOW_ERROR_MESSAGE, payload: error.message })
      ]
    }
  );
 ```
 ### Before & After
 #### Before
 ```javascript
 export const getProductDetail = (props) => (dispatch, getState) => {
  // 로딩 시작
  dispatch(changeAppStatus({ showLoadingPanel: { show: true } }));
  const onSuccess = (response) => {
    dispatch({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data });
    // 로딩 종료
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  };
  const onFail = (error) => {
    console.error(error);
    // 로딩 종료
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  };
  TAxios(dispatch, getState, 'get', URLS.GET_PRODUCT_DETAIL, props, {}, onSuccess, onFail);
 };
 ```
 #### After
 ```javascript
 export const getProductDetail = (props) =>
  withLoadingState(
    (dispatch, getState) => {
      return TAxiosPromise(dispatch, getState, 'get', URLS.GET_PRODUCT_DETAIL, props, {})
        .then((response) => {
          dispatch({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data });
        });
    }
  );
 ```
 ### 구현 원리
 **파일**: `src/utils/dispatchHelper.js:252-302`
 ```javascript
 export const withLoadingState = (thunk, options) => (dispatch, getState) => {
  const config = options || {};
  const loadingType = config.loadingType || 'wait';
  const successDispatch = config.successDispatch || [];
  const errorDispatch = config.errorDispatch || [];
  // 로딩 시작
  dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: loadingType } }));
  // thunk 실행
  const result = dispatch(thunk);
  // Promise인 경우 처리
  if (result && typeof result.then === 'function') {
    return result
      .then((res) => {
        // 로딩 종료
        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
        // 성공 시 추가 dispatch 실행
        successDispatch.forEach((action) => {
          if (typeof action === 'function') {
            dispatch(action(res));
          } else {
            dispatch(action);
          }
        });
        return res;
      })
      .catch((error) => {
        // 로딩 종료
        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
        // 에러 시 추가 dispatch 실행
        errorDispatch.forEach((action) => {
          if (typeof action === 'function') {
            dispatch(action(error));
          } else {
            dispatch(action);
          }
        });
        throw error;
      });
  }
  // 동기 실행인 경우
  dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  return result;
 };
 ```
 **핵심 포인트**:
 1. 로딩 시작/종료를 자동 관리
 2. Promise 기반 thunk만 지원
 3. 성공/실패 시 추가 action 실행 가능
 4. 에러 발생 시에도 로딩 상태 복원
 ---
 ## 4️⃣ createConditionalDispatch
 ### 설명
 getState() 결과를 기반으로 조건에 따라 다른 dispatch를 실행합니다.
 ### 사용법
 ```javascript
 import { createConditionalDispatch } from '../utils/dispatchHelper';
 // 단일 action 조건부 실행
 dispatch(createConditionalDispatch(
  (state) => state.common.appStatus.isAlarmEnabled === 'Y',
  addReservation(reservationData),
  deleteReservation(showId)
 ));
 // 여러 action 배열로 실행
 dispatch(createConditionalDispatch(
  (state) => state.common.appStatus.loginUserData.userNumber,
  [
    fetchUserProfile(),
    fetchUserCart(),
    fetchUserOrders()
  ],
  [
    { type: types.SHOW_LOGIN_REQUIRED_POPUP }
  ]
 ));
 // false 조건 없이
 dispatch(createConditionalDispatch(
  (state) => state.cart.items.length > 0,
  proceedToCheckout()
 ));
 ```
 ---
 ## 5️⃣ createParallelDispatch
 ### 설명
 여러 API 호출을 병렬로 실행하고 모든 결과를 기다립니다.
 `Promise.all`을 사용합니다.
 ### 사용법
 ```javascript
 import { createParallelDispatch } from '../utils/dispatchHelper';
 // 여러 API를 동시에 호출
 dispatch(createParallelDispatch([
  fetchUserProfile(),
  fetchUserCart(),
  fetchUserOrders()
 ], { withLoading: true }));
 ```
 ---
 ## 📊 실제 사용 예제
 ### homeActions.js 개선
 ```javascript
 // Before
 export const getHomeTerms = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    if (response.data.retCode === 0) {
      dispatch({ type: types.GET_HOME_TERMS, payload: response.data });
      dispatch({ type: types.SET_TERMS_ID_MAP, payload: termsIdMap });
      setTimeout(() => { dispatch(getTermsAgreeYn()); }, 0);
    }
  };
  TAxios(dispatch, getState, "get", URLS.GET_HOME_TERMS, ..., onSuccess, onFail);
 };
 // After
 export const getHomeTerms = (props) =>
  createApiThunkWithChain(
    (d, gs, onS, onF) => TAxios(d, gs, "get", URLS.GET_HOME_TERMS, ..., onS, onF),
    [
      { type: types.GET_HOME_TERMS, payload: response.data },
      { type: types.SET_TERMS_ID_MAP, payload: termsIdMap },
      getTermsAgreeYn()
    ]
  );
 ```
 ### cartActions.js 개선
 ```javascript
 // Before
 export const addToCart = (props) => (dispatch, getState) => {
  const onSuccess = (response) => {
    dispatch({ type: types.ADD_TO_CART, payload: response.data.data });
    dispatch(getMyInfoCartSearch({ mbrNo }));
  };
  TAxios(dispatch, getState, "post", URLS.ADD_TO_CART, ..., onSuccess, onFail);
 };
 // After
 export const addToCart = (props) =>
  createApiThunkWithChain(
    (d, gs, onS, onF) => TAxios(d, gs, 'post', URLS.ADD_TO_CART, {}, props, onS, onF),
    [
      (response) => ({ type: types.ADD_TO_CART, payload: response.data.data }),
      (response) => getMyInfoCartSearch({ mbrNo: response.data.data.mbrNo })
    ]
  );
 ```
 ---
 ## ✅ 장점
 1. **간결성**: setTimeout 제거로 코드가 깔끔해짐
 2. **가독성**: 의도가 명확하게 드러남
 3. **재사용성**: 헬퍼 함수를 여러 곳에서 사용 가능
 4. **에러 처리**: 옵션으로 에러 처리 전략 선택 가능
 5. **호환성**: 기존 코드와 호환 (선택적 사용)
 ## ⚠️ 주의사항
 1. **Promise 기반**: 모든 함수가 Promise를 반환하도록 설계됨
 2. **Chrome 68**: async/await 없이 Promise.then() 사용
 3. **기존 패턴**: TAxios의 onSuccess/onFail 패턴 유지
 ---
 **다음**: [해결 방법 2: asyncActionUtils.js →](./03-solution-async-utils.md)
--- a/com.twin.app.shoptime/.docs/dispatch-async/03-solution-async-utils.md
+++ b/com.twin.app.shoptime/.docs/dispatch-async/03-solution-async-utils.md
@@ -1,711 +0,0 @@
 # 해결 방법 2: asyncActionUtils.js
 ## 📦 개요
 **파일**: `src/utils/asyncActionUtils.js`
 **작성일**: 2025-11-06
 **커밋**: `f9290a1 [251106] fix: Dispatch Queue implementation`
 Promise 기반의 비동기 액션 처리와 **상세한 성공/실패 기준**을 제공합니다.
 ## 🎯 핵심 개념
 ### 프로젝트 특화 성공 기준
 이 프로젝트에서 API 호출 성공은 **2가지 조건**을 모두 만족해야 합니다:
 1. ✅ **HTTP 상태 코드**: 200-299 범위
 2. ✅ **retCode**: 0 또는 '0'
 ```javascript
 // HTTP 200이지만 retCode가 1인 경우
 {
  status: 200,        // ✅ HTTP는 성공
  data: {
    retCode: 1,       // ❌ retCode는 실패
    message: "권한이 없습니다"
  }
 }
 // → 이것은 실패입니다!
 ```
 ### Promise 체인이 끊기지 않는 설계
 **핵심 원칙**: 모든 비동기 작업은 **reject 없이 resolve만 사용**합니다.
 ```javascript
 // ❌ 일반적인 방식 (Promise 체인이 끊김)
 return new Promise((resolve, reject) => {
  if (error) {
    reject(error);  // 체인이 끊김!
  }
 });
 // ✅ 이 프로젝트의 방식 (체인 유지)
 return new Promise((resolve) => {
  if (error) {
    resolve({
      success: false,
      error: { code: 'ERROR', message: '에러 발생' }
    });
  }
 });
 ```
 ---
 ## 🔑 핵심 함수
 1. `isApiSuccess` - API 성공 여부 판단
 2. `fetchApi` - Promise 기반 fetch 래퍼
 3. `tAxiosToPromise` - TAxios를 Promise로 변환
 4. `wrapAsyncAction` - 비동기 액션을 Promise로 래핑
 5. `withTimeout` - 타임아웃 지원
 6. `executeParallelAsyncActions` - 병렬 실행
 ---
 ## 1️⃣ isApiSuccess
 ### 설명
 API 응답이 성공인지 판단하는 **프로젝트 표준 함수**입니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:21-34`
 ```javascript
 export const isApiSuccess = (response, responseData) => {
  // 1️⃣ HTTP 상태 코드 확인 (200-299 성공 범위)
  if (!response.ok || response.status < 200 || response.status >= 300) {
    return false;
  }
  // 2️⃣ retCode 확인 - 0 또는 '0'이어야 성공
  if (responseData && responseData.retCode !== undefined) {
    return responseData.retCode === 0 || responseData.retCode === '0';
  }
  // retCode가 없는 경우 HTTP 상태 코드만으로 판단
  return response.ok;
 };
 ```
 ### 사용 예제
 ```javascript
 // 성공 케이스
 isApiSuccess(
  { ok: true, status: 200 },
  { retCode: 0, data: { ... } }
 );  // → true
 isApiSuccess(
  { ok: true, status: 200 },
  { retCode: '0', data: { ... } }
 );  // → true
 // 실패 케이스
 isApiSuccess(
  { ok: true, status: 200 },
  { retCode: 1, message: "권한 없음" }
 );  // → false (retCode가 0이 아님)
 isApiSuccess(
  { ok: false, status: 500 },
  { retCode: 0, data: { ... } }
 );  // → false (HTTP 상태 코드가 500)
 isApiSuccess(
  { ok: false, status: 404 },
  { retCode: 0 }
 );  // → false (404 에러)
 ```
 ---
 ## 2️⃣ fetchApi
 ### 설명
 **표준 fetch API를 Promise로 래핑**하여 프로젝트 성공 기준에 맞춰 처리합니다.
 ### 핵심 특징
 - ✅ 항상 `resolve` 사용 (reject 없음)
 - ✅ HTTP 상태 + retCode 모두 확인
 - ✅ JSON 파싱 에러도 처리
 - ✅ 네트워크 에러도 처리
 - ✅ 상세한 로깅
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:57-123`
 ```javascript
 export const fetchApi = (url, options = {}) => {
  console.log('[asyncActionUtils] 🌐 FETCH_API_START', { url, method: options.method || 'GET' });
  return new Promise((resolve) => {  // ⚠️ 항상 resolve만 사용!
    fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        ...options.headers
      },
      ...options
    })
    .then(response => {
      // JSON 파싱
      return response.json()
        .then(responseData => {
          console.log('[asyncActionUtils] 📊 API_RESPONSE', {
            status: response.status,
            ok: response.ok,
            retCode: responseData.retCode,
            success: isApiSuccess(response, responseData)
          });
          // ✅ 성공/실패 여부와 관계없이 항상 resolve
          resolve({
            response,
            data: responseData,
            success: isApiSuccess(response, responseData),
            error: !isApiSuccess(response, responseData) ? {
              code: responseData.retCode || response.status,
              message: responseData.message || getApiErrorMessage(responseData.retCode || response.status),
              httpStatus: response.status
            } : null
          });
        })
        .catch(parseError => {
          console.error('[asyncActionUtils] ❌ JSON_PARSE_ERROR', parseError);
          // ✅ JSON 파싱 실패도 resolve로 처리
          resolve({
            response,
            data: null,
            success: false,
            error: {
              code: 'PARSE_ERROR',
              message: '응답 데이터 파싱에 실패했습니다',
              originalError: parseError
            }
          });
        });
    })
    .catch(error => {
      console.error('[asyncActionUtils] 💥 FETCH_ERROR', error);
      // ✅ 네트워크 에러 등도 resolve로 처리
      resolve({
        response: null,
        data: null,
        success: false,
        error: {
          code: 'NETWORK_ERROR',
          message: error.message || '네트워크 오류가 발생했습니다',
          originalError: error
        }
      });
    });
  });
 };
 ```
 ### 사용 예제
 ```javascript
 import { fetchApi } from '../utils/asyncActionUtils';
 // 기본 사용
 const result = await fetchApi('/api/products/123', {
  method: 'GET'
 });
 if (result.success) {
  console.log('성공:', result.data);
  // HTTP 200-299 + retCode 0/'0'
 } else {
  console.error('실패:', result.error);
  // error.code, error.message 사용 가능
 }
 // POST 요청
 const result = await fetchApi('/api/cart', {
  method: 'POST',
  body: JSON.stringify({ productId: 123 })
 });
 // 헤더 추가
 const result = await fetchApi('/api/user', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer token123'
  }
 });
 ```
 ### 반환 구조
 ```javascript
 // 성공 시
 {
  response: Response,        // fetch Response 객체
  data: { ... },            // 파싱된 JSON 데이터
  success: true,            // 성공 플래그
  error: null               // 에러 없음
 }
 // 실패 시 (HTTP 에러)
 {
  response: Response,
  data: { retCode: 1, message: "권한 없음" },
  success: false,
  error: {
    code: 1,
    message: "권한 없음",
    httpStatus: 200
  }
 }
 // 실패 시 (네트워크 에러)
 {
  response: null,
  data: null,
  success: false,
  error: {
    code: 'NETWORK_ERROR',
    message: '네트워크 오류가 발생했습니다',
    originalError: Error
  }
 }
 ```
 ---
 ## 3️⃣ tAxiosToPromise
 ### 설명
 프로젝트에서 사용하는 **TAxios를 Promise로 변환**합니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:138-204`
 ```javascript
 export const tAxiosToPromise = (
  TAxios,
  dispatch,
  getState,
  method,
  baseUrl,
  urlParams,
  params,
  options = {}
 ) => {
  return new Promise((resolve) => {
    console.log('[asyncActionUtils] 🔄 TAXIOS_TO_PROMISE_START', { method, baseUrl });
    const enhancedOnSuccess = (response) => {
      console.log('[asyncActionUtils] ✅ TAXIOS_SUCCESS', { retCode: response?.data?.retCode });
      // TAxios 성공 콜백도 성공 기준 적용
      const isSuccess = response?.data && (
        response.data.retCode === 0 ||
        response.data.retCode === '0'
      );
      resolve({
        response,
        data: response.data,
        success: isSuccess,
        error: !isSuccess ? {
          code: response.data?.retCode || 'UNKNOWN_ERROR',
          message: response.data?.message || getApiErrorMessage(response.data?.retCode || 'UNKNOWN_ERROR')
        } : null
      });
    };
    const enhancedOnFail = (error) => {
      console.error('[asyncActionUtils] ❌ TAXIOS_FAIL', error);
      resolve({  // ⚠️ reject가 아닌 resolve
        response: null,
        data: null,
        success: false,
        error: {
          code: error.retCode || 'TAXIOS_ERROR',
          message: error.message || 'API 호출에 실패했습니다',
          originalError: error
        }
      });
    };
    try {
      TAxios(
        dispatch,
        getState,
        method,
        baseUrl,
        urlParams,
        params,
        enhancedOnSuccess,
        enhancedOnFail,
        options.noTokenRefresh || false,
        options.responseType
      );
    } catch (error) {
      console.error('[asyncActionUtils] 💥 TAXIOS_EXECUTION_ERROR', error);
      resolve({
        response: null,
        data: null,
        success: false,
        error: {
          code: 'EXECUTION_ERROR',
          message: 'API 호출 실행 중 오류가 발생했습니다',
          originalError: error
        }
      });
    }
  });
 };
 ```
 ### 사용 예제
 ```javascript
 import { tAxiosToPromise } from '../utils/asyncActionUtils';
 import { TAxios } from '../utils/TAxios';
 export const getProductDetail = (productId) => async (dispatch, getState) => {
  const result = await tAxiosToPromise(
    TAxios,
    dispatch,
    getState,
    'get',
    URLS.GET_PRODUCT_DETAIL,
    {},
    { productId },
    {}
  );
  if (result.success) {
    dispatch({
      type: types.GET_PRODUCT_DETAIL,
      payload: result.data.data
    });
  } else {
    console.error('상품 조회 실패:', result.error);
  }
 };
 ```
 ---
 ## 4️⃣ wrapAsyncAction
 ### 설명
 비동기 액션 함수를 Promise로 래핑하여 **표준화된 결과 구조**를 반환합니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:215-270`
 ```javascript
 export const wrapAsyncAction = (asyncAction, context = {}) => {
  return new Promise((resolve) => {
    const { dispatch, getState } = context;
    console.log('[asyncActionUtils] 🎯 WRAP_ASYNC_ACTION_START');
    // 성공 콜백 - 항상 resolve 호출
    const onSuccess = (result) => {
      console.log('[asyncActionUtils] ✅ WRAP_ASYNC_SUCCESS', result);
      resolve({
        response: result.response || result,
        data: result.data || result,
        success: true,
        error: null
      });
    };
    // 실패 콜백 - 항상 resolve 호출 (reject 하지 않음)
    const onFail = (error) => {
      console.error('[asyncActionUtils] ❌ WRAP_ASYNC_FAIL', error);
      resolve({
        response: null,
        data: null,
        success: false,
        error: {
          code: error.retCode || error.code || 'ASYNC_ACTION_ERROR',
          message: error.message || error.errorMessage || '비동기 작업에 실패했습니다',
          originalError: error
        }
      });
    };
    try {
      // 비동기 액션 실행
      const result = asyncAction(dispatch, getState, onSuccess, onFail);
      // Promise를 반환하는 경우도 처리
      if (result && typeof result.then === 'function') {
        result
          .then(onSuccess)
          .catch(onFail);
      }
    } catch (error) {
      console.error('[asyncActionUtils] 💥 WRAP_ASYNC_EXECUTION_ERROR', error);
      onFail(error);
    }
  });
 };
 ```
 ### 사용 예제
 ```javascript
 import { wrapAsyncAction } from '../utils/asyncActionUtils';
 // 비동기 액션 정의
 const myAsyncAction = (dispatch, getState, onSuccess, onFail) => {
  TAxios(dispatch, getState, 'get', URL, {}, {}, onSuccess, onFail);
 };
 // Promise로 래핑하여 사용
 const result = await wrapAsyncAction(myAsyncAction, { dispatch, getState });
 if (result.success) {
  console.log('성공:', result.data);
 } else {
  console.error('실패:', result.error.message);
 }
 ```
 ---
 ## 5️⃣ withTimeout
 ### 설명
 Promise에 **타임아웃**을 적용합니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:354-373`
 ```javascript
 export const withTimeout = (
  promise,
  timeoutMs,
  timeoutMessage = '작업 시간이 초과되었습니다'
 ) => {
  return Promise.race([
    promise,
    new Promise((resolve) => {
      setTimeout(() => {
        console.error('[asyncActionUtils] ⏰ PROMISE_TIMEOUT', { timeoutMs });
        resolve({
          response: null,
          data: null,
          success: false,
          error: {
            code: 'TIMEOUT',
            message: timeoutMessage,
            timeout: timeoutMs
          }
        });
      }, timeoutMs);
    })
  ]);
 };
 ```
 ### 사용 예제
 ```javascript
 import { withTimeout, fetchApi } from '../utils/asyncActionUtils';
 // 5초 타임아웃
 const result = await withTimeout(
  fetchApi('/api/slow-endpoint'),
  5000,
  '요청이 시간초과 되었습니다'
 );
 if (result.success) {
  console.log('성공:', result.data);
 } else if (result.error.code === 'TIMEOUT') {
  console.error('타임아웃 발생');
 } else {
  console.error('기타 에러:', result.error);
 }
 ```
 ---
 ## 6️⃣ executeParallelAsyncActions
 ### 설명
 여러 비동기 액션을 **병렬로 실행**하고 모든 결과를 기다립니다.
 ### 구현
 **파일**: `src/utils/asyncActionUtils.js:279-299`
 ```javascript
 export const executeParallelAsyncActions = (asyncActions, context = {}) => {
  console.log('[asyncActionUtils] 🚀 EXECUTE_PARALLEL_START', { count: asyncActions.length });
  const promises = asyncActions.map(action =>
    wrapAsyncAction(action, context)
  );
  return Promise.all(promises)
    .then(results => {
      console.log('[asyncActionUtils] ✅ EXECUTE_PARALLEL_SUCCESS', {
        successCount: results.filter(r => r.success).length,
        failCount: results.filter(r => !r.success).length
      });
      return results;
    })
    .catch(error => {
      console.error('[asyncActionUtils] ❌ EXECUTE_PARALLEL_ERROR', error);
      return [];
    });
 };
 ```
 ### 사용 예제
 ```javascript
 import { executeParallelAsyncActions } from '../utils/asyncActionUtils';
 // 3개의 API를 동시에 호출
 const results = await executeParallelAsyncActions([
  (dispatch, getState, onSuccess, onFail) => {
    TAxios(dispatch, getState, 'get', URL1, {}, {}, onSuccess, onFail);
  },
  (dispatch, getState, onSuccess, onFail) => {
    TAxios(dispatch, getState, 'get', URL2, {}, {}, onSuccess, onFail);
  },
  (dispatch, getState, onSuccess, onFail) => {
    TAxios(dispatch, getState, 'get', URL3, {}, {}, onSuccess, onFail);
  }
 ], { dispatch, getState });
 // 결과 처리
 results.forEach((result, index) => {
  if (result.success) {
    console.log(`API ${index + 1} 성공:`, result.data);
  } else {
    console.error(`API ${index + 1} 실패:`, result.error);
  }
 });
 ```
 ---
 ## 📊 실제 사용 시나리오
 ### 시나리오 1: API 호출 후 후속 처리
 ```javascript
 import { tAxiosToPromise } from '../utils/asyncActionUtils';
 export const addToCartAndRefresh = (productId) => async (dispatch, getState) => {
  // 1. 카트에 추가
  const addResult = await tAxiosToPromise(
    TAxios,
    dispatch,
    getState,
    'post',
    URLS.ADD_TO_CART,
    {},
    { productId },
    {}
  );
  if (addResult.success) {
    // 2. 카트 추가 성공 시 카트 정보 재조회
    dispatch({ type: types.ADD_TO_CART, payload: addResult.data.data });
    const cartResult = await tAxiosToPromise(
      TAxios,
      dispatch,
      getState,
      'get',
      URLS.GET_CART,
      {},
      { mbrNo: addResult.data.data.mbrNo },
      {}
    );
    if (cartResult.success) {
      dispatch({ type: types.GET_CART, payload: cartResult.data.data });
    }
  } else {
    console.error('카트 추가 실패:', addResult.error);
  }
 };
 ```
 ### 시나리오 2: 타임아웃이 있는 API 호출
 ```javascript
 import { tAxiosToPromise, withTimeout } from '../utils/asyncActionUtils';
 export const getLargeData = () => async (dispatch, getState) => {
  const result = await withTimeout(
    tAxiosToPromise(
      TAxios,
      dispatch,
      getState,
      'get',
      URLS.GET_LARGE_DATA,
      {},
      {},
      {}
    ),
    10000,  // 10초 타임아웃
    '데이터 조회 시간이 초과되었습니다'
  );
  if (result.success) {
    dispatch({ type: types.GET_LARGE_DATA, payload: result.data.data });
  } else if (result.error.code === 'TIMEOUT') {
    // 타임아웃 처리
    dispatch({ type: types.SHOW_TIMEOUT_MESSAGE });
  } else {
    // 기타 에러 처리
    console.error('조회 실패:', result.error);
  }
 };
 ```
 ---
 ## ✅ 장점
 1. **성공 기준 명확화**: HTTP + retCode 모두 확인
 2. **체인 보장**: reject 없이 resolve만 사용하여 Promise 체인 유지
 3. **상세한 로깅**: 모든 단계에서 로그 출력
 4. **타임아웃 지원**: 응답 없는 API 처리 가능
 5. **에러 처리**: 모든 에러를 표준 구조로 반환
 ## ⚠️ 주의사항
 1. **Chrome 68 호환**: async/await 사용 가능하지만 주의 필요
 2. **항상 resolve**: reject 사용하지 않음
 3. **success 플래그**: 반드시 `result.success` 확인 필요
 ---
 **다음**: [해결 방법 3: 큐 기반 패널 액션 시스템 →](./04-solution-queue-system.md)
--- a/com.twin.app.shoptime/.docs/dispatch-async/04-solution-queue-system.md
+++ b/com.twin.app.shoptime/.docs/dispatch-async/04-solution-queue-system.md
@@ -1,644 +0,0 @@
 # 해결 방법 3: 큐 기반 패널 액션 시스템
 ## 📦 개요
 **관련 파일**:
 - `src/actions/queuedPanelActions.js`
 - `src/middleware/panelQueueMiddleware.js`
 - `src/reducers/panelReducer.js`
 - `src/store/store.js` (미들웨어 등록 필요)
 **작성일**: 2025-11-06
 **커밋**:
 - `5bd2774 [251106] feat: Queued Panel functions`
 - `f9290a1 [251106] fix: Dispatch Queue implementation`
 미들웨어 기반의 **액션 큐 처리 시스템**으로, 패널 액션들을 순차적으로 실행합니다.
 ## ⚠️ 사전 요구사항
 큐 시스템을 사용하려면 **반드시** store에 panelQueueMiddleware를 등록해야 합니다.
 **파일**: `src/store/store.js`
 ```javascript
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 export const store = createStore(
  rootReducer,
  applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
 );
 ```
 미들웨어를 등록하지 않으면 큐에 액션이 추가되어도 자동으로 처리되지 않습니다!
 ## 🎯 핵심 개념
 ### 왜 큐 시스템이 필요한가?
 패널 관련 액션들은 특히 순서가 중요합니다:
 ```javascript
 // 문제 상황
 dispatch(pushPanel({ name: 'SEARCH' }));      // 검색 패널 열기
 dispatch(updatePanel({ results: [...] }));     // 검색 결과 업데이트
 dispatch(popPanel('LOADING'));                 // 로딩 패널 닫기
 // 실제 실행 순서 (문제!)
 // → popPanel이 먼저 실행될 수 있음
 // → updatePanel이 pushPanel보다 먼저 실행될 수 있음
 ```
 ### 큐 시스템의 동작 방식
 ```
 [큐에 추가] → [미들웨어 감지] → [순차 처리] → [완료]
     ↓              ↓               ↓           ↓
  ENQUEUE    자동 감지 시작    PROCESS_QUEUE  다음 액션
 ```
 ---
 ## 🔑 주요 컴포넌트
 ### 1. queuedPanelActions.js
 패널 액션을 큐에 추가하는 액션 크리에이터들
 ### 2. panelQueueMiddleware.js
 큐에 액션이 추가되면 자동으로 처리를 시작하는 미들웨어
 ### 3. panelReducer.js
 큐 상태를 관리하는 리듀서
 ---
 ## 📋 기본 패널 액션
 ### 1. pushPanelQueued
 패널을 큐에 추가하여 순차적으로 열기
 ```javascript
 import { pushPanelQueued } from '../actions/queuedPanelActions';
 // 기본 사용
 dispatch(pushPanelQueued(
  { name: panel_names.SEARCH_PANEL },
  false  // duplicatable
 ));
 // 중복 허용
 dispatch(pushPanelQueued(
  { name: panel_names.PRODUCT_DETAIL, productId: 123 },
  true  // 중복 허용
 ));
 ```
 ### 2. popPanelQueued
 패널을 큐를 통해 제거
 ```javascript
 import { popPanelQueued } from '../actions/queuedPanelActions';
 // 마지막 패널 제거
 dispatch(popPanelQueued());
 // 특정 패널 제거
 dispatch(popPanelQueued(panel_names.SEARCH_PANEL));
 ```
 ### 3. updatePanelQueued
 패널 정보를 큐를 통해 업데이트
 ```javascript
 import { updatePanelQueued } from '../actions/queuedPanelActions';
 dispatch(updatePanelQueued({
  name: panel_names.SEARCH_PANEL,
  panelInfo: {
    results: [...],
    totalCount: 100
  }
 }));
 ```
 ### 4. resetPanelsQueued
 모든 패널을 초기화
 ```javascript
 import { resetPanelsQueued } from '../actions/queuedPanelActions';
 // 빈 패널로 초기화
 dispatch(resetPanelsQueued());
 // 특정 패널들로 초기화
 dispatch(resetPanelsQueued([
  { name: panel_names.HOME }
 ]));
 ```
 ### 5. enqueueMultiplePanelActions
 여러 패널 액션을 한 번에 큐에 추가
 ```javascript
 import { enqueueMultiplePanelActions, pushPanelQueued, updatePanelQueued, popPanelQueued }
  from '../actions/queuedPanelActions';
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: panel_names.SEARCH_PANEL }),
  updatePanelQueued({ name: panel_names.SEARCH_PANEL, panelInfo: { query: 'test' } }),
  popPanelQueued(panel_names.LOADING_PANEL)
 ]));
 ```
 ---
 ## 🚀 비동기 패널 액션
 ### 1. enqueueAsyncPanelAction
 비동기 작업(API 호출 등)을 큐에 추가하여 순차 실행
 **파일**: `src/actions/queuedPanelActions.js:173-199`
 ```javascript
 import { enqueueAsyncPanelAction } from '../actions/queuedPanelActions';
 dispatch(enqueueAsyncPanelAction({
  id: 'search_products_123',  // 고유 ID
  // 비동기 액션 (TAxios 등)
  asyncAction: (dispatch, getState, onSuccess, onFail) => {
    TAxios(
      dispatch,
      getState,
      'post',
      URLS.SEARCH_PRODUCTS,
      {},
      { keyword: 'test' },
      onSuccess,
      onFail
    );
  },
  // 성공 콜백
  onSuccess: (response) => {
    console.log('검색 성공:', response);
    dispatch(pushPanelQueued({
      name: panel_names.SEARCH_RESULT,
      results: response.data.results
    }));
  },
  // 실패 콜백
  onFail: (error) => {
    console.error('검색 실패:', error);
    dispatch(pushPanelQueued({
      name: panel_names.ERROR,
      message: error.message
    }));
  },
  // 완료 콜백 (성공/실패 모두 호출)
  onFinish: (isSuccess, result) => {
    console.log('검색 완료:', isSuccess ? '성공' : '실패');
  },
  // 타임아웃 (ms)
  timeout: 10000  // 10초
 }));
 ```
 ### 동작 흐름
 ```
 1. enqueueAsyncPanelAction 호출
   ↓
 2. ENQUEUE_ASYNC_PANEL_ACTION dispatch
   ↓
 3. executeAsyncAction 자동 실행
   ↓
 4. wrapAsyncAction으로 Promise 래핑
   ↓
 5. withTimeout으로 타임아웃 적용
   ↓
 6. 결과에 따라 onSuccess 또는 onFail 호출
   ↓
 7. COMPLETE_ASYNC_PANEL_ACTION 또는 FAIL_ASYNC_PANEL_ACTION dispatch
 ```
 ---
 ## 🔗 API 호출 후 패널 액션
 ### createApiWithPanelActions
 API 호출 후 여러 패널 액션을 자동으로 실행
 **파일**: `src/actions/queuedPanelActions.js:355-394`
 ```javascript
 import { createApiWithPanelActions } from '../actions/queuedPanelActions';
 dispatch(createApiWithPanelActions({
  // API 호출
  apiCall: (dispatch, getState, onSuccess, onFail) => {
    TAxios(
      dispatch,
      getState,
      'post',
      URLS.SEARCH_PRODUCTS,
      {},
      { keyword: 'laptop' },
      onSuccess,
      onFail
    );
  },
  // API 성공 후 실행할 패널 액션들
  panelActions: [
    // Plain action
    { type: 'PUSH_PANEL', payload: { name: panel_names.SEARCH_PANEL } },
    // Dynamic action (response 사용)
    (response) => updatePanelQueued({
      name: panel_names.SEARCH_PANEL,
      panelInfo: {
        results: response.data.results,
        totalCount: response.data.totalCount
      }
    }),
    // 또 다른 패널 액션
    popPanelQueued(panel_names.LOADING_PANEL)
  ],
  // API 성공 콜백
  onApiSuccess: (response) => {
    console.log('API 성공:', response.data.totalCount, '개 검색됨');
  },
  // API 실패 콜백
  onApiFail: (error) => {
    console.error('API 실패:', error);
    dispatch(pushPanelQueued({
      name: panel_names.ERROR,
      message: '검색에 실패했습니다'
    }));
  }
 }));
 ```
 ### 사용 예제: 상품 검색
 ```javascript
 export const searchProducts = (keyword) =>
  createApiWithPanelActions({
    apiCall: (dispatch, getState, onSuccess, onFail) => {
      TAxios(
        dispatch,
        getState,
        'post',
        URLS.SEARCH_PRODUCTS,
        {},
        { keyword },
        onSuccess,
        onFail
      );
    },
    panelActions: [
      // 1. 로딩 패널 닫기
      popPanelQueued(panel_names.LOADING_PANEL),
      // 2. 검색 결과 패널 열기
      (response) => pushPanelQueued({
        name: panel_names.SEARCH_RESULT,
        results: response.data.results
      }),
      // 3. 검색 히스토리 업데이트
      (response) => updatePanelQueued({
        name: panel_names.SEARCH_HISTORY,
        panelInfo: { lastSearch: keyword }
      })
    ],
    onApiSuccess: (response) => {
      console.log(`${response.data.totalCount}개의 상품을 찾았습니다`);
    }
  });
 ```
 ---
 ## 🔄 비동기 액션 시퀀스
 ### createAsyncPanelSequence
 여러 비동기 액션을 **순차적으로** 실행
 **파일**: `src/actions/queuedPanelActions.js:401-445`
 ```javascript
 import { createAsyncPanelSequence } from '../actions/queuedPanelActions';
 dispatch(createAsyncPanelSequence([
  // 첫 번째 비동기 액션
  {
    asyncAction: (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_USER_INFO, {}, {}, onSuccess, onFail);
    },
    onSuccess: (response) => {
      console.log('사용자 정보 조회 성공');
      dispatch(pushPanelQueued({
        name: panel_names.USER_INFO,
        userInfo: response.data.data
      }));
    },
    onFail: (error) => {
      console.error('사용자 정보 조회 실패:', error);
    }
  },
  // 두 번째 비동기 액션 (첫 번째 완료 후 실행)
  {
    asyncAction: (dispatch, getState, onSuccess, onFail) => {
      const userInfo = getState().user.info;
      TAxios(
        dispatch,
        getState,
        'get',
        URLS.GET_CART,
        {},
        { mbrNo: userInfo.mbrNo },
        onSuccess,
        onFail
      );
    },
    onSuccess: (response) => {
      console.log('카트 정보 조회 성공');
      dispatch(updatePanelQueued({
        name: panel_names.USER_INFO,
        panelInfo: { cartCount: response.data.data.length }
      }));
    },
    onFail: (error) => {
      console.error('카트 정보 조회 실패:', error);
    }
  },
  // 세 번째 비동기 액션 (두 번째 완료 후 실행)
  {
    asyncAction: (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_ORDERS, {}, {}, onSuccess, onFail);
    },
    onSuccess: (response) => {
      console.log('주문 정보 조회 성공');
      dispatch(pushPanelQueued({
        name: panel_names.ORDER_LIST,
        orders: response.data.data
      }));
    },
    onFail: (error) => {
      console.error('주문 정보 조회 실패:', error);
      // 실패 시 시퀀스 중단
    }
  }
 ]));
 ```
 ### 동작 흐름
 ```
 Action 1 실행 → 성공? → Action 2 실행 → 성공? → Action 3 실행
              ↓                     ↓
            실패 시                실패 시
            중단                   중단
 ```
 ---
 ## ⚙️ 미들웨어: panelQueueMiddleware
 ### 동작 원리
 **파일**: `src/middleware/panelQueueMiddleware.js`
 ```javascript
 const panelQueueMiddleware = (store) => (next) => (action) => {
  const result = next(action);
  // 큐에 액션이 추가되면 자동으로 처리 시작
  if (action.type === types.ENQUEUE_PANEL_ACTION) {
    console.log('[panelQueueMiddleware] 🚀 ACTION_ENQUEUED', {
      action: action.payload.action,
      queueId: action.payload.id,
    });
    // setTimeout을 사용하여 현재 액션이 완전히 처리된 후에 큐 처리 시작
    setTimeout(() => {
      const currentState = store.getState();
      if (currentState.panels) {
        // 이미 처리 중이 아니고 큐에 액션이 있으면 처리 시작
        if (!currentState.panels.isProcessingQueue &&
            currentState.panels.panelActionQueue.length > 0) {
          console.log('[panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS');
          store.dispatch({ type: types.PROCESS_PANEL_QUEUE });
        }
      }
    }, 0);
  }
  // 큐 처리가 완료되고 남은 큐가 있으면 계속 처리
  if (action.type === types.PROCESS_PANEL_QUEUE) {
    setTimeout(() => {
      const currentState = store.getState();
      if (currentState.panels) {
        // 처리 중이 아니고 큐에 남은 액션이 있으면 계속 처리
        if (!currentState.panels.isProcessingQueue &&
            currentState.panels.panelActionQueue.length > 0) {
          console.log('[panelQueueMiddleware] 🔄 CONTINUING_QUEUE_PROCESS');
          store.dispatch({ type: types.PROCESS_PANEL_QUEUE });
        }
      }
    }, 0);
  }
  return result;
 };
 ```
 ### 주요 특징
 1. ✅ **자동 시작**: 큐에 액션 추가 시 자동으로 처리 시작
 2. ✅ **연속 처리**: 한 액션 완료 후 자동으로 다음 액션 처리
 3. ✅ **중복 방지**: 이미 처리 중이면 새로 시작하지 않음
 4. ✅ **로깅**: 모든 단계에서 로그 출력
 ---
 ## 📊 리듀서 상태 구조
 ### panelReducer.js의 큐 관련 상태
 ```javascript
 {
  panels: [],                    // 실제 패널 스택
  lastPanelAction: 'push',       // 마지막 액션 타입
  // 큐 관련 상태
  panelActionQueue: [            // 처리 대기 중인 큐
    {
      id: 'queue_item_1_1699999999999',
      action: 'PUSH_PANEL',
      panel: { name: 'SEARCH_PANEL' },
      duplicatable: false,
      timestamp: 1699999999999
    },
    // ...
  ],
  isProcessingQueue: false,      // 큐 처리 중 여부
  queueError: null,              // 큐 처리 에러
  queueStats: {                  // 큐 통계
    totalProcessed: 0,           // 총 처리된 액션 수
    failedCount: 0,              // 실패한 액션 수
    averageProcessingTime: 0     // 평균 처리 시간 (ms)
  },
  // 비동기 액션 상태
  asyncActions: {                // 실행 중인 비동기 액션들
    'async_action_1': {
      id: 'async_action_1',
      status: 'pending',         // 'pending' | 'success' | 'failed'
      timestamp: 1699999999999
    }
  },
  completedAsyncActions: [       // 완료된 액션 ID들
    'async_action_1',
    'async_action_2'
  ],
  failedAsyncActions: [          // 실패한 액션 ID들
    'async_action_3'
  ]
 }
 ```
 ---
 ## 🎯 실제 사용 시나리오
 ### 시나리오 1: 검색 플로우
 ```javascript
 export const performSearch = (keyword) => (dispatch) => {
  // 1. 로딩 패널 열기
  dispatch(pushPanelQueued({ name: panel_names.LOADING }));
  // 2. 검색 API 호출 후 결과 표시
  dispatch(createApiWithPanelActions({
    apiCall: (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'post', URLS.SEARCH, {}, { keyword }, onSuccess, onFail);
    },
    panelActions: [
      popPanelQueued(panel_names.LOADING),
      (response) => pushPanelQueued({
        name: panel_names.SEARCH_RESULT,
        results: response.data.results
      })
    ]
  }));
 };
 ```
 ### 시나리오 2: 다단계 결제 프로세스
 ```javascript
 export const processCheckout = (orderInfo) =>
  createAsyncPanelSequence([
    // 1단계: 주문 검증
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(dispatch, getState, 'post', URLS.VALIDATE_ORDER, {}, orderInfo, onSuccess, onFail);
      },
      onSuccess: () => {
        dispatch(updatePanelQueued({
          name: panel_names.CHECKOUT,
          panelInfo: { step: 1, status: 'validated' }
        }));
      }
    },
    // 2단계: 결제 처리
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(dispatch, getState, 'post', URLS.PROCESS_PAYMENT, {}, orderInfo, onSuccess, onFail);
      },
      onSuccess: (response) => {
        dispatch(updatePanelQueued({
          name: panel_names.CHECKOUT,
          panelInfo: { step: 2, paymentId: response.data.data.paymentId }
        }));
      }
    },
    // 3단계: 주문 확정
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        const state = getState();
        const paymentId = state.panels.panels.find(p => p.name === panel_names.CHECKOUT)
          .panelInfo.paymentId;
        TAxios(
          dispatch,
          getState,
          'post',
          URLS.CONFIRM_ORDER,
          {},
          { ...orderInfo, paymentId },
          onSuccess,
          onFail
        );
      },
      onSuccess: (response) => {
        dispatch(popPanelQueued(panel_names.CHECKOUT));
        dispatch(pushPanelQueued({
          name: panel_names.ORDER_COMPLETE,
          orderId: response.data.data.orderId
        }));
      }
    }
  ]);
 ```
 ---
 ## ✅ 장점
 1. **완벽한 순서 보장**: 큐 시스템으로 100% 순서 보장
 2. **자동 처리**: 미들웨어가 자동으로 큐 처리
 3. **비동기 지원**: API 호출 등 비동기 작업 완벽 지원
 4. **타임아웃**: 응답 없는 작업 자동 처리
 5. **에러 복구**: 에러 발생 시에도 다음 액션 계속 처리
 6. **통계**: 큐 처리 통계 자동 수집
 ## ⚠️ 주의사항
 1. **미들웨어 등록**: store에 panelQueueMiddleware 등록 필요
 2. **리듀서 확장**: panelReducer에 큐 관련 상태 추가 필요
 3. **기존 코드**: 기존 pushPanel 등과 병행 사용 가능
 ---
 **다음**: [사용 패턴 및 예제 →](./05-usage-patterns.md)
--- a/com.twin.app.shoptime/.docs/dispatch-async/05-usage-patterns.md
+++ b/com.twin.app.shoptime/.docs/dispatch-async/05-usage-patterns.md
@@ -1,804 +0,0 @@
 # 사용 패턴 및 예제
 ## 📋 목차
 1. [어떤 솔루션을 선택할까?](#어떤-솔루션을-선택할까)
 2. [공통 패턴](#공통-패턴)
 3. [실전 예제](#실전-예제)
 4. [마이그레이션 가이드](#마이그레이션-가이드)
 5. [Best Practices](#best-practices)
 ---
 ## 어떤 솔루션을 선택할까?
 ### 의사결정 플로우차트
 ```
 패널 관련 액션인가?
 ├─ YES → 큐 기반 패널 액션 시스템 사용
 │         (queuedPanelActions.js)
 │
 └─ NO → API 호출이 포함되어 있는가?
        ├─ YES → API 패턴은?
        │        ├─ API 후 여러 dispatch 필요 → createApiThunkWithChain
        │        ├─ 로딩 상태 관리 필요 → withLoadingState
        │        └─ Promise 기반 처리 필요 → asyncActionUtils
        │
        └─ NO → 순차적 dispatch만 필요
                 → createSequentialDispatch
 ```
 ### 솔루션 비교표
 | 상황 | 추천 솔루션 | 파일 |
 |------|------------|------|
 | 패널 열기/닫기/업데이트 | `pushPanelQueued`, `popPanelQueued` | queuedPanelActions.js |
 | API 호출 후 패널 업데이트 | `createApiWithPanelActions` | queuedPanelActions.js |
 | 여러 API 순차 호출 | `createAsyncPanelSequence` | queuedPanelActions.js |
 | API 후 여러 dispatch | `createApiThunkWithChain` | dispatchHelper.js |
 | 로딩 상태 자동 관리 | `withLoadingState` | dispatchHelper.js |
 | 단순 순차 dispatch | `createSequentialDispatch` | dispatchHelper.js |
 | Promise 기반 API 호출 | `fetchApi`, `tAxiosToPromise` | asyncActionUtils.js |
 ---
 ## 공통 패턴
 ### 패턴 1: API 후 State 업데이트
 #### Before
 ```javascript
 export const getProductDetail = (productId) => (dispatch, getState) => {
  const onSuccess = (response) => {
    dispatch({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data });
    dispatch(getRelatedProducts(productId));
  };
  TAxios(dispatch, getState, 'get', URLS.GET_PRODUCT, {}, { productId }, onSuccess, onFail);
 };
 ```
 #### After (dispatchHelper)
 ```javascript
 export const getProductDetail = (productId) =>
  createApiThunkWithChain(
    (d, gs, onS, onF) => TAxios(d, gs, 'get', URLS.GET_PRODUCT, {}, { productId }, onS, onF),
    [
      (response) => ({ type: types.GET_PRODUCT_DETAIL, payload: response.data.data }),
      getRelatedProducts(productId)
    ]
  );
 ```
 #### After (asyncActionUtils - Chrome 68+)
 ```javascript
 export const getProductDetail = (productId) => async (dispatch, getState) => {
  const result = await tAxiosToPromise(
    TAxios, dispatch, getState, 'get', URLS.GET_PRODUCT, {}, { productId }
  );
  if (result.success) {
    dispatch({ type: types.GET_PRODUCT_DETAIL, payload: result.data.data });
    dispatch(getRelatedProducts(productId));
  }
 };
 ```
 ### 패턴 2: 로딩 상태 관리
 #### Before
 ```javascript
 export const fetchUserData = (userId) => (dispatch, getState) => {
  dispatch(changeAppStatus({ showLoadingPanel: { show: true } }));
  const onSuccess = (response) => {
    dispatch({ type: types.GET_USER_DATA, payload: response.data.data });
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  };
  const onFail = (error) => {
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
  };
  TAxios(dispatch, getState, 'get', URLS.GET_USER, {}, { userId }, onSuccess, onFail);
 };
 ```
 #### After
 ```javascript
 export const fetchUserData = (userId) =>
  withLoadingState(
    (dispatch, getState) => {
      return TAxiosPromise(dispatch, getState, 'get', URLS.GET_USER, {}, { userId })
        .then((response) => {
          dispatch({ type: types.GET_USER_DATA, payload: response.data.data });
        });
    }
  );
 ```
 ### 패턴 3: 패널 순차 열기
 #### Before
 ```javascript
 dispatch(pushPanel({ name: panel_names.SEARCH }));
 setTimeout(() => {
  dispatch(updatePanel({ results: [...] }));
  setTimeout(() => {
    dispatch(popPanel(panel_names.LOADING));
  }, 0);
 }, 0);
 ```
 #### After
 ```javascript
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: panel_names.SEARCH }),
  updatePanelQueued({ results: [...] }),
  popPanelQueued(panel_names.LOADING)
 ]));
 ```
 ### 패턴 4: 조건부 dispatch
 #### Before
 ```javascript
 export const checkAndFetch = () => (dispatch, getState) => {
  const state = getState();
  if (state.user.isLoggedIn) {
    dispatch(fetchUserProfile());
    dispatch(fetchUserCart());
  } else {
    dispatch({ type: types.SHOW_LOGIN_POPUP });
  }
 };
 ```
 #### After
 ```javascript
 export const checkAndFetch = () =>
  createConditionalDispatch(
    (state) => state.user.isLoggedIn,
    [
      fetchUserProfile(),
      fetchUserCart()
    ],
    [
      { type: types.SHOW_LOGIN_POPUP }
    ]
  );
 ```
 ---
 ## 실전 예제
 ### 예제 1: 검색 기능
 ```javascript
 // src/actions/searchActions.js
 import { createApiWithPanelActions, pushPanelQueued, popPanelQueued, updatePanelQueued }
  from './queuedPanelActions';
 import { panel_names } from '../constants/panelNames';
 import { URLS } from '../constants/urls';
 export const performSearch = (keyword) => (dispatch) => {
  // 1. 로딩 패널 열기
  dispatch(pushPanelQueued({ name: panel_names.LOADING }));
  // 2. 검색 API 호출 후 결과 처리
  dispatch(createApiWithPanelActions({
    apiCall: (dispatch, getState, onSuccess, onFail) => {
      TAxios(
        dispatch,
        getState,
        'post',
        URLS.SEARCH_PRODUCTS,
        {},
        { keyword, page: 1, size: 20 },
        onSuccess,
        onFail
      );
    },
    panelActions: [
      // 1) 로딩 패널 닫기
      popPanelQueued(panel_names.LOADING),
      // 2) 검색 결과 패널 열기
      (response) => pushPanelQueued({
        name: panel_names.SEARCH_RESULT,
        results: response.data.results,
        totalCount: response.data.totalCount,
        keyword
      }),
      // 3) 검색 히스토리 업데이트
      (response) => updatePanelQueued({
        name: panel_names.SEARCH_HISTORY,
        panelInfo: {
          lastSearch: keyword,
          resultCount: response.data.totalCount
        }
      })
    ],
    onApiSuccess: (response) => {
      console.log(`"${keyword}" 검색 완료: ${response.data.totalCount}개`);
    },
    onApiFail: (error) => {
      console.error('검색 실패:', error);
      dispatch(popPanelQueued(panel_names.LOADING));
      dispatch(pushPanelQueued({
        name: panel_names.ERROR,
        message: '검색에 실패했습니다'
      }));
    }
  }));
 };
 ```
 ### 예제 2: 장바구니 추가
 ```javascript
 // src/actions/cartActions.js
 import { createApiThunkWithChain } from '../utils/dispatchHelper';
 import { types } from './actionTypes';
 import { URLS } from '../constants/urls';
 export const addToCart = (productId, quantity) =>
  createApiThunkWithChain(
    // API 호출
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(
        dispatch,
        getState,
        'post',
        URLS.ADD_TO_CART,
        {},
        { productId, quantity },
        onSuccess,
        onFail
      );
    },
    // 성공 시 순차 dispatch
    [
      // 1) 장바구니 추가 액션
      (response) => ({
        type: types.ADD_TO_CART,
        payload: response.data.data
      }),
      // 2) 장바구니 개수 업데이트
      (response) => ({
        type: types.UPDATE_CART_COUNT,
        payload: response.data.data.cartCount
      }),
      // 3) 장바구니 정보 재조회
      (response) => getMyCartInfo({ mbrNo: response.data.data.mbrNo }),
      // 4) 성공 메시지 표시
      () => ({
        type: types.SHOW_TOAST,
        payload: { message: '장바구니에 담았습니다' }
      })
    ],
    // 실패 시 dispatch
    (error) => ({
      type: types.SHOW_ERROR,
      payload: { message: error.message || '장바구니 담기에 실패했습니다' }
    })
  );
 ```
 ### 예제 3: 로그인 플로우
 ```javascript
 // src/actions/authActions.js
 import { createAsyncPanelSequence } from './queuedPanelActions';
 import { withLoadingState } from '../utils/dispatchHelper';
 import { panel_names } from '../constants/panelNames';
 import { types } from './actionTypes';
 import { URLS } from '../constants/urls';
 export const performLogin = (userId, password) =>
  withLoadingState(
    createAsyncPanelSequence([
      // 1단계: 로그인 API 호출
      {
        asyncAction: (dispatch, getState, onSuccess, onFail) => {
          TAxios(
            dispatch,
            getState,
            'post',
            URLS.LOGIN,
            {},
            { userId, password },
            onSuccess,
            onFail
          );
        },
        onSuccess: (response) => {
          // 로그인 성공 - 토큰 저장
          dispatch({
            type: types.LOGIN_SUCCESS,
            payload: {
              token: response.data.data.token,
              userInfo: response.data.data.userInfo
            }
          });
        },
        onFail: (error) => {
          dispatch({
            type: types.SHOW_ERROR,
            payload: { message: '로그인에 실패했습니다' }
          });
        }
      },
      // 2단계: 사용자 정보 조회
      {
        asyncAction: (dispatch, getState, onSuccess, onFail) => {
          const state = getState();
          const mbrNo = state.auth.userInfo.mbrNo;
          TAxios(
            dispatch,
            getState,
            'get',
            URLS.GET_USER_INFO,
            {},
            { mbrNo },
            onSuccess,
            onFail
          );
        },
        onSuccess: (response) => {
          dispatch({
            type: types.GET_USER_INFO,
            payload: response.data.data
          });
        }
      },
      // 3단계: 장바구니 정보 조회
      {
        asyncAction: (dispatch, getState, onSuccess, onFail) => {
          const state = getState();
          const mbrNo = state.auth.userInfo.mbrNo;
          TAxios(
            dispatch,
            getState,
            'get',
            URLS.GET_CART,
            {},
            { mbrNo },
            onSuccess,
            onFail
          );
        },
        onSuccess: (response) => {
          dispatch({
            type: types.GET_CART_INFO,
            payload: response.data.data
          });
          // 로그인 완료 패널로 이동
          dispatch(pushPanelQueued({
            name: panel_names.LOGIN_COMPLETE
          }));
        }
      }
    ]),
    { loadingType: 'wait' }
  );
 ```
 ### 예제 4: 다단계 폼 제출
 ```javascript
 // src/actions/formActions.js
 import { createAsyncPanelSequence } from './queuedPanelActions';
 import { tAxiosToPromise } from '../utils/asyncActionUtils';
 import { types } from './actionTypes';
 import { URLS } from '../constants/urls';
 export const submitMultiStepForm = (formData) =>
  createAsyncPanelSequence([
    // Step 1: 입력 검증
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(
          dispatch,
          getState,
          'post',
          URLS.VALIDATE_FORM,
          {},
          formData,
          onSuccess,
          onFail
        );
      },
      onSuccess: (response) => {
        dispatch({
          type: types.UPDATE_FORM_STEP,
          payload: { step: 1, status: 'validated' }
        });
        dispatch(updatePanelQueued({
          name: panel_names.FORM_PANEL,
          panelInfo: { step: 1, validated: true }
        }));
      },
      onFail: (error) => {
        dispatch({
          type: types.SHOW_VALIDATION_ERROR,
          payload: { errors: error.data?.errors || [] }
        });
      }
    },
    // Step 2: 중복 체크
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(
          dispatch,
          getState,
          'post',
          URLS.CHECK_DUPLICATE,
          {},
          { email: formData.email },
          onSuccess,
          onFail
        );
      },
      onSuccess: (response) => {
        dispatch({
          type: types.UPDATE_FORM_STEP,
          payload: { step: 2, status: 'checked' }
        });
        dispatch(updatePanelQueued({
          name: panel_names.FORM_PANEL,
          panelInfo: { step: 2, duplicate: false }
        }));
      },
      onFail: (error) => {
        dispatch({
          type: types.SHOW_ERROR,
          payload: { message: '이미 사용 중인 이메일입니다' }
        });
      }
    },
    // Step 3: 최종 제출
    {
      asyncAction: (dispatch, getState, onSuccess, onFail) => {
        TAxios(
          dispatch,
          getState,
          'post',
          URLS.SUBMIT_FORM,
          {},
          formData,
          onSuccess,
          onFail
        );
      },
      onSuccess: (response) => {
        dispatch({
          type: types.SUBMIT_FORM_SUCCESS,
          payload: response.data.data
        });
        // 성공 패널로 이동
        dispatch(popPanelQueued(panel_names.FORM_PANEL));
        dispatch(pushPanelQueued({
          name: panel_names.SUCCESS_PANEL,
          message: '가입이 완료되었습니다'
        }));
      },
      onFail: (error) => {
        dispatch({
          type: types.SUBMIT_FORM_FAIL,
          payload: { error: error.message }
        });
      }
    }
  ]);
 ```
 ### 예제 5: 병렬 데이터 로딩
 ```javascript
 // src/actions/dashboardActions.js
 import { createParallelDispatch } from '../utils/dispatchHelper';
 import { executeParallelAsyncActions } from '../utils/asyncActionUtils';
 import { types } from './actionTypes';
 import { URLS } from '../constants/urls';
 // 방법 1: dispatchHelper 사용
 export const loadDashboardData = () =>
  createParallelDispatch([
    fetchUserProfile(),
    fetchRecentOrders(),
    fetchRecommendations(),
    fetchNotifications()
  ], { withLoading: true });
 // 방법 2: asyncActionUtils 사용
 export const loadDashboardDataAsync = () => async (dispatch, getState) => {
  dispatch(changeAppStatus({ showLoadingPanel: { show: true } }));
  const results = await executeParallelAsyncActions([
    // 1. 사용자 프로필
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_PROFILE, {}, {}, onSuccess, onFail);
    },
    // 2. 최근 주문
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_RECENT_ORDERS, {}, {}, onSuccess, onFail);
    },
    // 3. 추천 상품
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_RECOMMENDATIONS, {}, {}, onSuccess, onFail);
    },
    // 4. 알림
    (dispatch, getState, onSuccess, onFail) => {
      TAxios(dispatch, getState, 'get', URLS.GET_NOTIFICATIONS, {}, {}, onSuccess, onFail);
    }
  ], { dispatch, getState });
  // 각 결과 처리
  const [profileResult, ordersResult, recoResult, notiResult] = results;
  if (profileResult.success) {
    dispatch({ type: types.GET_PROFILE, payload: profileResult.data.data });
  }
  if (ordersResult.success) {
    dispatch({ type: types.GET_RECENT_ORDERS, payload: ordersResult.data.data });
  }
  if (recoResult.success) {
    dispatch({ type: types.GET_RECOMMENDATIONS, payload: recoResult.data.data });
  }
  if (notiResult.success) {
    dispatch({ type: types.GET_NOTIFICATIONS, payload: notiResult.data.data });
  }
  dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
 };
 ```
 ---
 ## 마이그레이션 가이드
 ### Step 1: 파일 import 변경
 ```javascript
 // Before
 import { pushPanel, popPanel, updatePanel } from '../actions/panelActions';
 // After
 import { pushPanelQueued, popPanelQueued, updatePanelQueued }
  from '../actions/queuedPanelActions';
 import { createApiThunkWithChain, withLoadingState }
  from '../utils/dispatchHelper';
 ```
 ### Step 2: 기존 코드 점진적 마이그레이션
 ```javascript
 // 1단계: 기존 코드 유지
 dispatch(pushPanel({ name: panel_names.SEARCH }));
 // 2단계: 큐 버전으로 변경
 dispatch(pushPanelQueued({ name: panel_names.SEARCH }));
 // 3단계: 여러 액션을 묶어서 처리
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: panel_names.SEARCH }),
  updatePanelQueued({ results: [...] })
 ]));
 ```
 ### Step 3: setTimeout 패턴 제거
 ```javascript
 // Before
 dispatch(action1());
 setTimeout(() => {
  dispatch(action2());
  setTimeout(() => {
    dispatch(action3());
  }, 0);
 }, 0);
 // After
 dispatch(createSequentialDispatch([
  action1(),
  action2(),
  action3()
 ]));
 ```
 ### Step 4: API 패턴 개선
 ```javascript
 // Before
 const onSuccess = (response) => {
  dispatch({ type: types.ACTION_1, payload: response.data });
  dispatch(action2());
  dispatch(action3());
 };
 TAxios(dispatch, getState, 'post', URL, {}, params, onSuccess, onFail);
 // After
 dispatch(createApiThunkWithChain(
  (d, gs, onS, onF) => TAxios(d, gs, 'post', URL, {}, params, onS, onF),
  [
    (response) => ({ type: types.ACTION_1, payload: response.data }),
    action2(),
    action3()
  ]
 ));
 ```
 ---
 ## Best Practices
 ### 1. 명확한 에러 처리
 ```javascript
 // ✅ Good
 dispatch(createApiWithPanelActions({
  apiCall: (d, gs, onS, onF) => TAxios(d, gs, 'post', URL, {}, params, onS, onF),
  panelActions: [...],
  onApiSuccess: (response) => {
    console.log('API 성공:', response);
  },
  onApiFail: (error) => {
    console.error('API 실패:', error);
    dispatch(pushPanelQueued({
      name: panel_names.ERROR,
      message: error.message || '작업에 실패했습니다'
    }));
  }
 }));
 // ❌ Bad - 에러 처리 없음
 dispatch(createApiWithPanelActions({
  apiCall: (d, gs, onS, onF) => TAxios(d, gs, 'post', URL, {}, params, onS, onF),
  panelActions: [...]
 }));
 ```
 ### 2. 타임아웃 설정
 ```javascript
 // ✅ Good
 dispatch(enqueueAsyncPanelAction({
  asyncAction: (d, gs, onS, onF) => {
    TAxios(d, gs, 'post', URL, {}, params, onS, onF);
  },
  timeout: 10000,  // 10초
  onFail: (error) => {
    if (error.code === 'TIMEOUT') {
      console.error('요청 시간 초과');
    }
  }
 }));
 // ❌ Bad - 타임아웃 없음 (무한 대기 가능)
 dispatch(enqueueAsyncPanelAction({
  asyncAction: (d, gs, onS, onF) => {
    TAxios(d, gs, 'post', URL, {}, params, onS, onF);
  }
 }));
 ```
 ### 3. 로깅 활용
 ```javascript
 // ✅ Good - 상세한 로깅
 console.log('[SearchAction] 🔍 검색 시작:', keyword);
 dispatch(createApiWithPanelActions({
  apiCall: (d, gs, onS, onF) => {
    TAxios(d, gs, 'post', URLS.SEARCH, {}, { keyword }, onS, onF);
  },
  onApiSuccess: (response) => {
    console.log('[SearchAction] ✅ 검색 성공:', response.data.totalCount, '개');
  },
  onApiFail: (error) => {
    console.error('[SearchAction] ❌ 검색 실패:', error);
  }
 }));
 ```
 ### 4. 상태 검증
 ```javascript
 // ✅ Good - 상태 검증 후 실행
 export const performAction = () =>
  createConditionalDispatch(
    (state) => state.user.isLoggedIn && state.cart.items.length > 0,
    [proceedToCheckout()],
    [{ type: types.SHOW_LOGIN_POPUP }]
  );
 // ❌ Bad - 검증 없이 바로 실행
 export const performAction = () => proceedToCheckout();
 ```
 ### 5. 재사용 가능한 액션
 ```javascript
 // ✅ Good - 재사용 가능
 export const fetchDataWithLoading = (url, actionType) =>
  withLoadingState(
    (dispatch, getState) => {
      return TAxiosPromise(dispatch, getState, 'get', url, {}, {})
        .then((response) => {
          dispatch({ type: actionType, payload: response.data.data });
        });
    }
  );
 // 사용
 dispatch(fetchDataWithLoading(URLS.GET_USER, types.GET_USER));
 dispatch(fetchDataWithLoading(URLS.GET_CART, types.GET_CART));
 ```
 ---
 ## 체크리스트
 ### 초기 설정 확인사항
 - [ ] **panelQueueMiddleware가 store.js에 등록되어 있는가?** (큐 시스템 사용 시 필수!)
  ```javascript
  // src/store/store.js
  import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
  export const store = createStore(
    rootReducer,
    applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
  );
  ```
 - [ ] TAxiosPromise가 import되어 있는가? (withLoadingState 사용 시)
 ### 기능 구현 전 확인사항
 - [ ] 패널 관련 액션인가? → 큐 시스템 사용
 - [ ] API 호출이 포함되어 있는가? → createApiThunkWithChain 또는 createApiWithPanelActions
 - [ ] 로딩 상태 관리가 필요한가? → withLoadingState
 - [ ] 순차 실행이 필요한가? → createSequentialDispatch 또는 createAsyncPanelSequence
 - [ ] 타임아웃이 필요한가? → withTimeout 또는 timeout 옵션 설정
 ### 코드 리뷰 체크리스트
 - [ ] setTimeout 사용 여부 확인
 - [ ] 에러 처리가 적절한가?
 - [ ] 로깅이 충분한가?
 - [ ] 타임아웃이 설정되어 있는가?
 - [ ] 상태 검증이 필요한가?
 - [ ] 재사용 가능한 구조인가?
 ---
 **이전**: [← 해결 방법 3: 큐 기반 패널 액션 시스템](./04-solution-queue-system.md)
 **처음으로**: [← README](./README.md)
--- a/com.twin.app.shoptime/.docs/dispatch-async/06-setup-guide.md
+++ b/com.twin.app.shoptime/.docs/dispatch-async/06-setup-guide.md
@@ -1,396 +0,0 @@
 # 설정 가이드
 ## 📋 목차
 1. [초기 설정](#초기-설정)
 2. [파일 구조 확인](#파일-구조-확인)
 3. [설정 순서](#설정-순서)
 4. [검증 방법](#검증-방법)
 5. [트러블슈팅](#트러블슈팅)
 ---
 ## 초기 설정
 ### 1️⃣ 필수: panelQueueMiddleware 등록
 큐 기반 패널 액션 시스템을 사용하려면 **반드시** Redux store에 미들웨어를 등록해야 합니다.
 #### 파일 위치
 `com.twin.app.shoptime/src/store/store.js`
 #### 수정 전
 ```javascript
 import { applyMiddleware, combineReducers, createStore } from 'redux';
 import thunk from 'redux-thunk';
 import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware';
 import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware';
 // panelQueueMiddleware import 없음!
 // ... reducers ...
 export const store = createStore(
  rootReducer,
  applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware)
  // panelQueueMiddleware 등록 없음!
 );
 ```
 #### 수정 후
 ```javascript
 import { applyMiddleware, combineReducers, createStore } from 'redux';
 import thunk from 'redux-thunk';
 import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware';
 import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware';
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware'; // ← 추가
 // ... reducers ...
 export const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk,
    panelHistoryMiddleware,
    autoCloseMiddleware,
    panelQueueMiddleware  // ← 추가 (맨 마지막 위치)
  )
 );
 ```
 ### 2️⃣ 미들웨어 등록 순서
 미들웨어 등록 순서는 다음과 같습니다:
 ```javascript
 applyMiddleware(
  thunk,                    // 1. Redux-thunk (비동기 액션 지원)
  panelHistoryMiddleware,   // 2. 패널 히스토리 관리
  autoCloseMiddleware,      // 3. 자동 닫기 처리
  panelQueueMiddleware      // 4. 패널 큐 처리 (맨 마지막)
 )
 ```
 **중요**: `panelQueueMiddleware`는 **맨 마지막**에 위치해야 합니다!
 - 다른 미들웨어들이 먼저 액션을 처리한 후
 - 큐 미들웨어가 큐 관련 액션을 감지하고 처리합니다
 ---
 ## 파일 구조 확인
 ### 필수 파일들이 모두 존재하는지 확인
 ```bash
 # 프로젝트 루트에서 실행
 ls -la com.twin.app.shoptime/src/middleware/panelQueueMiddleware.js
 ls -la com.twin.app.shoptime/src/actions/queuedPanelActions.js
 ls -la com.twin.app.shoptime/src/utils/dispatchHelper.js
 ls -la com.twin.app.shoptime/src/utils/asyncActionUtils.js
 ls -la com.twin.app.shoptime/src/reducers/panelReducer.js
 ```
 ### 예상 출력
 ```
 -rw-r--r-- 1 user user 2063 Nov 10 06:32 .../panelQueueMiddleware.js
 -rw-r--r-- 1 user user 13845 Nov 06 10:15 .../queuedPanelActions.js
 -rw-r--r-- 1 user user 12345 Nov 05 14:20 .../dispatchHelper.js
 -rw-r--r-- 1 user user 10876 Nov 06 10:30 .../asyncActionUtils.js
 -rw-r--r-- 1 user user 25432 Nov 06 11:00 .../panelReducer.js
 ```
 ### 파일이 없다면?
 ```bash
 # 최신 코드를 pull 받으세요
 git fetch origin
 git pull origin <branch-name>
 ```
 ---
 ## 설정 순서
 ### Step 1: 미들웨어 import 추가
 **파일**: `src/store/store.js`
 ```javascript
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 ```
 ### Step 2: applyMiddleware에 추가
 ```javascript
 export const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk,
    panelHistoryMiddleware,
    autoCloseMiddleware,
    panelQueueMiddleware  // ← 추가
  )
 );
 ```
 ### Step 3: 저장 및 빌드
 ```bash
 # 파일 저장 후
 npm run build
 # 또는 개발 서버 재시작
 npm start
 ```
 ### Step 4: 브라우저 콘솔 확인
 브라우저 개발자 도구(F12)를 열고 다음과 같은 로그가 보이는지 확인:
 ```
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED
 [panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] 🟡 PROCESSING_QUEUE_ITEM
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED
 ```
 ---
 ## 검증 방법
 ### 방법 1: 콘솔 로그 확인
 큐 시스템을 사용하는 액션을 dispatch하면 다음과 같은 로그가 출력됩니다:
 ```javascript
 import { pushPanelQueued } from '../actions/queuedPanelActions';
 import { panel_names } from '../utils/Config';
 dispatch(pushPanelQueued({ name: panel_names.SEARCH_PANEL }));
 ```
 **예상 로그**:
 ```
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED { action: 'PUSH_PANEL', queueId: 'queue_item_1_1699999999999' }
 [panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE { isProcessing: false, queueLength: 1 }
 [panelReducer] 🟡 PROCESSING_QUEUE_ITEM { action: 'PUSH_PANEL', queueId: 'queue_item_1_1699999999999', remainingQueueLength: 0 }
 [panelReducer] 🔵 PUSH_PANEL START { newPanelName: 'SEARCH_PANEL', currentPanels: [...], duplicatable: false }
 [panelReducer] 🔵 PUSH_PANEL END { resultPanels: [...], lastAction: 'push' }
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED { action: 'PUSH_PANEL', queueId: 'queue_item_1_1699999999999', processingTime: 2 }
 ```
 ### 방법 2: Redux DevTools 확인
 Redux DevTools를 사용하여 액션 흐름을 확인:
 1. Chrome 확장 프로그램: Redux DevTools 설치
 2. 개발자 도구에서 "Redux" 탭 선택
 3. 다음 액션들이 순서대로 dispatch되는지 확인:
   - `ENQUEUE_PANEL_ACTION`
   - `PROCESS_PANEL_QUEUE`
   - `PUSH_PANEL` (또는 다른 패널 액션)
 ### 방법 3: State 확인
 Redux state를 확인하여 큐 관련 상태가 정상적으로 업데이트되는지 확인:
 ```javascript
 // 콘솔에서 실행
 store.getState().panels
 ```
 **예상 출력**:
 ```javascript
 {
  panels: [...],  // 실제 패널들
  lastPanelAction: 'push',
  // 큐 관련 상태
  panelActionQueue: [],  // 처리 대기 중인 큐 (처리 후 비어있음)
  isProcessingQueue: false,
  queueError: null,
  queueStats: {
    totalProcessed: 1,
    failedCount: 0,
    averageProcessingTime: 2.5
  },
  // 비동기 액션 관련
  asyncActions: {},
  completedAsyncActions: [],
  failedAsyncActions: []
 }
 ```
 ---
 ## 트러블슈팅
 ### 문제 1: 큐가 처리되지 않음
 #### 증상
 ```javascript
 dispatch(pushPanelQueued({ name: panel_names.SEARCH_PANEL }));
 // 아무 일도 일어나지 않음
 // 로그도 출력되지 않음
 ```
 #### 원인
 panelQueueMiddleware가 등록되지 않음
 #### 해결 방법
 1. `store.js` 파일 확인:
   ```javascript
   // import가 있는지 확인
   import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
   // applyMiddleware에 추가되어 있는지 확인
   applyMiddleware(..., panelQueueMiddleware)
   ```
 2. 파일 저장 후 앱 재시작
 3. 브라우저 캐시 삭제 (Ctrl+Shift+R 또는 Cmd+Shift+R)
 ### 문제 2: 미들웨어 파일을 찾을 수 없음
 #### 증상
 ```
 Error: Cannot find module '../middleware/panelQueueMiddleware'
 ```
 #### 원인
 파일이 존재하지 않거나 경로가 잘못됨
 #### 해결 방법
 1. 파일 존재 확인:
   ```bash
   ls -la com.twin.app.shoptime/src/middleware/panelQueueMiddleware.js
   ```
 2. 파일이 없다면 최신 코드 pull:
   ```bash
   git fetch origin
   git pull origin main
   ```
 3. 여전히 없다면 커밋 확인:
   ```bash
   git log --oneline --grep="panelQueueMiddleware"
   # 5bd2774 [251106] feat: Queued Panel functions
   ```
 ### 문제 3: 로그는 보이는데 패널이 열리지 않음
 #### 증상
 ```
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED
 // 하지만 패널이 화면에 표시되지 않음
 ```
 #### 원인
 UI 렌더링 문제 (Redux는 정상 작동)
 #### 해결 방법
 1. Redux state 확인:
   ```javascript
   console.log(store.getState().panels.panels);
   // 패널이 배열에 추가되었는지 확인
   ```
 2. 패널 컴포넌트 렌더링 로직 확인
 3. React DevTools로 컴포넌트 트리 확인
 ### 문제 4: 타입 에러
 #### 증상
 ```
 Error: Cannot read property 'type' of undefined
 ReferenceError: types is not defined
 ```
 #### 원인
 actionTypes.js에 필요한 타입이 정의되지 않음
 #### 해결 방법
 1. `src/actions/actionTypes.js` 확인:
   ```javascript
   export const types = {
     // ... 기존 타입들 ...
     // 큐 관련 타입들
     ENQUEUE_PANEL_ACTION: 'ENQUEUE_PANEL_ACTION',
     PROCESS_PANEL_QUEUE: 'PROCESS_PANEL_QUEUE',
     CLEAR_PANEL_QUEUE: 'CLEAR_PANEL_QUEUE',
     SET_QUEUE_PROCESSING: 'SET_QUEUE_PROCESSING',
     // 비동기 액션 타입들
     ENQUEUE_ASYNC_PANEL_ACTION: 'ENQUEUE_ASYNC_PANEL_ACTION',
     COMPLETE_ASYNC_PANEL_ACTION: 'COMPLETE_ASYNC_PANEL_ACTION',
     FAIL_ASYNC_PANEL_ACTION: 'FAIL_ASYNC_PANEL_ACTION',
   };
   ```
 2. 없다면 추가 후 저장
 ### 문제 5: 순서가 여전히 보장되지 않음
 #### 증상
 ```javascript
 dispatch(pushPanelQueued({ name: 'PANEL_1' }));
 dispatch(pushPanelQueued({ name: 'PANEL_2' }));
 // PANEL_2가 먼저 열림
 ```
 #### 원인
 일반 `pushPanel`과 `pushPanelQueued`를 혼용
 #### 해결 방법
 순서를 보장하려면 **모두** queued 버전 사용:
 ```javascript
 // ❌ 잘못된 사용
 dispatch(pushPanel({ name: 'PANEL_1' }));  // 일반 버전
 dispatch(pushPanelQueued({ name: 'PANEL_2' }));  // 큐 버전
 // ✅ 올바른 사용
 dispatch(pushPanelQueued({ name: 'PANEL_1' }));
 dispatch(pushPanelQueued({ name: 'PANEL_2' }));
 // 또는
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: 'PANEL_1' }),
  pushPanelQueued({ name: 'PANEL_2' })
 ]));
 ```
 ---
 ## 빠른 체크리스트
 설정이 완료되었는지 빠르게 확인:
 - [ ] `src/store/store.js`에 `import panelQueueMiddleware` 추가됨
 - [ ] `applyMiddleware`에 `panelQueueMiddleware` 추가됨 (맨 마지막 위치)
 - [ ] 파일 저장 및 앱 재시작
 - [ ] 브라우저 콘솔에서 큐 관련 로그 확인
 - [ ] Redux DevTools에서 액션 흐름 확인
 - [ ] Redux state에서 큐 관련 상태 확인
 모든 항목이 체크되었다면 설정 완료! 🎉
 ---
 ## 참고 자료
 - [README.md](./README.md) - 전체 개요
 - [04-solution-queue-system.md](./04-solution-queue-system.md) - 큐 시스템 상세 설명
 - [05-usage-patterns.md](./05-usage-patterns.md) - 사용 패턴 및 예제
 - [07-changelog.md](./07-changelog.md) - 변경 이력
 ---
 **작성일**: 2025-11-10
 **최종 수정일**: 2025-11-10
--- a/com.twin.app.shoptime/.docs/dispatch-async/07-changelog.md
+++ b/com.twin.app.shoptime/.docs/dispatch-async/07-changelog.md
@@ -1,314 +0,0 @@
 # 변경 이력 (Changelog)
 ## [2025-11-10] - 미들웨어 등록 및 문서 개선
 ### 🔧 수정 (Fixed)
 #### store.js - panelQueueMiddleware 등록
 **커밋**: `c12cc91 [수정] panelQueueMiddleware 등록 및 문서 업데이트`
 **문제**:
 - panelQueueMiddleware가 store.js에 등록되어 있지 않았음
 - 큐 시스템이 작동하지 않는 치명적인 문제
 - `ENQUEUE_PANEL_ACTION` dispatch 시 자동으로 `PROCESS_PANEL_QUEUE`가 실행되지 않음
 **해결**:
 ```javascript
 // src/store/store.js
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 export const store = createStore(
  rootReducer,
  applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
 );
 ```
 **영향**:
 - ✅ 큐 기반 패널 액션 시스템이 정상 작동
 - ✅ 패널 액션 순서 보장
 - ✅ 비동기 패널 액션 자동 처리
 ### 📝 문서 (Documentation)
 #### README.md
 - "설치 및 설정" 섹션 추가
 - panelQueueMiddleware 등록 필수 사항 강조
 - 등록하지 않으면 큐 시스템이 작동하지 않는다는 경고 추가
 #### 04-solution-queue-system.md
 - "사전 요구사항" 섹션 추가
 - 미들웨어 등록 코드 예제 포함
 - `src/store/store.js`를 관련 파일에 추가
 #### 05-usage-patterns.md
 - "초기 설정 확인사항" 체크리스트 추가
 - panelQueueMiddleware 등록 여부를 최우선 확인 항목으로 배치
 ---
 ## [2025-11-10] - 초기 문서 작성
 ### ✨ 추가 (Added)
 #### 문서 작성
 **커밋**: `f75860c [문서화] Dispatch 비동기 처리 순서 보장 솔루션 문서 작성`
 dispatch 비동기 처리 순서 보장 문제와 해결 방법을 체계적으로 정리한 문서 세트:
 1. **README.md**
   - 전체 개요 및 목차
   - 주요 솔루션 요약
   - 관련 파일 목록
   - 커밋 히스토리
 2. **01-problem.md**
   - 문제 상황 및 원인 분석
   - Redux-thunk에서 dispatch 순서가 보장되지 않는 이유
   - 실제 발생 가능한 버그 시나리오
   - 기존 해결 방법의 한계
 3. **02-solution-dispatch-helper.md**
   - dispatchHelper.js 솔루션 설명
   - 5가지 헬퍼 함수 상세 설명:
     - `createSequentialDispatch`
     - `createApiThunkWithChain`
     - `withLoadingState`
     - `createConditionalDispatch`
     - `createParallelDispatch`
   - Before/After 코드 비교
   - 실제 사용 예제
 4. **03-solution-async-utils.md**
   - asyncActionUtils.js 솔루션 설명
   - API 성공 기준 명확화 (HTTP 200-299 + retCode 0/'0')
   - Promise 체인 보장 방법 (reject 없이 resolve만 사용)
   - 주요 함수 설명:
     - `isApiSuccess`
     - `fetchApi`
     - `tAxiosToPromise`
     - `wrapAsyncAction`
     - `withTimeout`
     - `executeParallelAsyncActions`
 5. **04-solution-queue-system.md**
   - 큐 기반 패널 액션 시스템 설명
   - 기본 패널 액션 (pushPanelQueued, popPanelQueued 등)
   - 비동기 패널 액션 (enqueueAsyncPanelAction)
   - API 호출 후 패널 액션 (createApiWithPanelActions)
   - 비동기 액션 시퀀스 (createAsyncPanelSequence)
   - panelQueueMiddleware 동작 원리
   - 리듀서 상태 구조
 6. **05-usage-patterns.md**
   - 솔루션 선택 가이드 (의사결정 플로우차트)
   - 솔루션 비교표
   - 공통 패턴 Before/After 비교
   - 실전 예제 5가지:
     - 검색 기능
     - 장바구니 추가
     - 로그인 플로우
     - 다단계 폼 제출
     - 병렬 데이터 로딩
   - 마이그레이션 가이드
   - Best Practices
   - 체크리스트
 **문서 통계**:
 - 총 6개 마크다운 파일
 - 약 3,000줄
 - 50개 이상의 코드 예제
 - Before/After 비교 20개 이상
 ---
 ## [2025-11-06] - 큐 시스템 구현
 ### ✨ 추가 (Added)
 #### Dispatch Queue Implementation
 **커밋**: `f9290a1 [251106] fix: Dispatch Queue implementation`
 - `asyncActionUtils.js` 추가
  - Promise 기반 비동기 액션 처리
  - API 성공 기준 명확화
  - 타임아웃 지원
 - `queuedPanelActions.js` 확장
  - 비동기 패널 액션 지원
  - API 호출 후 패널 액션 자동 실행
  - 비동기 액션 시퀀스
 - `panelReducer.js` 확장
  - 큐 상태 관리
  - 비동기 액션 상태 추적
  - 큐 처리 통계
 #### Queued Panel Functions
 **커밋**: `5bd2774 [251106] feat: Queued Panel functions`
 - `queuedPanelActions.js` 초기 구현
  - 기본 큐 액션 (pushPanelQueued, popPanelQueued 등)
  - 여러 액션 일괄 큐 추가
  - 패널 시퀀스 생성
 - `panelQueueMiddleware.js` 추가
  - 큐 액션 자동 감지
  - 순차 처리 자동 시작
  - 연속 처리 지원
 - `panelReducer.js` 큐 기능 추가
  - 큐 상태 관리
  - 큐 처리 로직
  - 큐 통계 수집
 ---
 ## [2025-11-05] - dispatch 헬퍼 함수
 ### ✨ 추가 (Added)
 #### dispatchHelper.js
 **커밋**: `9490d72 [251105] feat: dispatchHelper.js`
 Promise 체인 기반의 dispatch 순차 실행 헬퍼 함수 모음:
 - `createSequentialDispatch`
  - 여러 dispatch를 순차적으로 실행
  - Promise 체인으로 순서 보장
  - delay 옵션 지원
  - stopOnError 옵션 지원
 - `createApiThunkWithChain`
  - API 호출 후 dispatch 자동 체이닝
  - TAxios onSuccess/onFail 패턴 호환
  - response를 각 action에 전달
  - 에러 처리 action 지원
 - `withLoadingState`
  - 로딩 상태 자동 관리
  - changeAppStatus 자동 on/off
  - 성공/에러 시 추가 dispatch 지원
  - loadingType 옵션
 - `createConditionalDispatch`
  - 조건에 따라 다른 dispatch 실행
  - getState() 결과 기반 분기
  - 배열 또는 단일 action 지원
 - `createParallelDispatch`
  - 여러 API를 병렬로 실행
  - Promise.all 사용
  - 로딩 상태 관리 옵션
 ---
 ## 관련 커밋 전체 목록
 ```bash
 c12cc91 [수정] panelQueueMiddleware 등록 및 문서 업데이트
 f75860c [문서화] Dispatch 비동기 처리 순서 보장 솔루션 문서 작성
 f9290a1 [251106] fix: Dispatch Queue implementation
 5bd2774 [251106] feat: Queued Panel functions
 9490d72 [251105] feat: dispatchHelper.js
 ```
 ---
 ## 마이그레이션 가이드
 ### 기존 코드에서 새 솔루션으로 전환
 #### 1단계: setTimeout 패턴 제거
 ```javascript
 // Before
 dispatch(action1());
 setTimeout(() => {
  dispatch(action2());
 }, 0);
 // After
 dispatch(createSequentialDispatch([action1(), action2()]));
 ```
 #### 2단계: API 패턴 개선
 ```javascript
 // Before
 const onSuccess = (response) => {
  dispatch({ type: types.ACTION_1, payload: response.data });
  dispatch(action2());
 };
 TAxios(..., onSuccess, onFail);
 // After
 dispatch(createApiThunkWithChain(
  (d, gs, onS, onF) => TAxios(d, gs, ..., onS, onF),
  [
    (response) => ({ type: types.ACTION_1, payload: response.data }),
    action2()
  ]
 ));
 ```
 #### 3단계: 패널 액션을 큐 버전으로 전환
 ```javascript
 // Before
 dispatch(pushPanel({ name: panel_names.SEARCH }));
 // After
 dispatch(pushPanelQueued({ name: panel_names.SEARCH }));
 ```
 ---
 ## Breaking Changes
 ### 없음
 모든 새로운 기능은 기존 코드와 완전히 호환됩니다:
 - 기존 `pushPanel`, `popPanel` 등은 그대로 동작
 - 새로운 큐 버전은 선택적으로 사용 가능
 - 점진적 마이그레이션 가능
 ---
 ## 알려진 이슈
 ### 해결됨
 1. **panelQueueMiddleware 미등록 문제** (2025-11-10 해결)
   - 문제: 큐 시스템이 작동하지 않음
   - 해결: store.js에 미들웨어 등록
 ### 현재 이슈
 없음
 ---
 ## 향후 계획
 ### 예정된 개선사항
 1. **성능 최적화**
   - 큐 처리 성능 모니터링
   - 대량 액션 처리 최적화
 2. **에러 처리 강화**
   - 더 상세한 에러 메시지
   - 에러 복구 전략
 3. **개발자 도구**
   - 큐 상태 시각화
   - 디버깅 도구
 4. **테스트 코드**
   - 단위 테스트 추가
   - 통합 테스트 추가
 ---
 **작성일**: 2025-11-10
 **최종 수정일**: 2025-11-10
--- a/com.twin.app.shoptime/.docs/dispatch-async/08-troubleshooting.md
+++ b/com.twin.app.shoptime/.docs/dispatch-async/08-troubleshooting.md
@@ -1,606 +0,0 @@
 # 트러블슈팅 가이드
 ## 📋 목차
 1. [일반적인 문제](#일반적인-문제)
 2. [큐 시스템 문제](#큐-시스템-문제)
 3. [API 호출 문제](#api-호출-문제)
 4. [성능 문제](#성능-문제)
 5. [디버깅 팁](#디버깅-팁)
 ---
 ## 일반적인 문제
 ### 문제 1: dispatch 순서가 여전히 보장되지 않음
 #### 증상
 ```javascript
 dispatch(action1());
 dispatch(action2());
 dispatch(action3());
 // 실행 순서: action2 → action3 → action1
 ```
 #### 가능한 원인
 1. **일반 dispatch와 큐 dispatch 혼용**
   ```javascript
   // ❌ 잘못된 사용
   dispatch(pushPanel({ name: 'PANEL_1' }));  // 일반
   dispatch(pushPanelQueued({ name: 'PANEL_2' }));  // 큐
   ```
 2. **async/await 없이 비동기 처리**
   ```javascript
   // ❌ 잘못된 사용
   fetchData();  // Promise를 기다리지 않음
   dispatch(action());
   ```
 3. **헬퍼 함수를 사용하지 않음**
   ```javascript
   // ❌ 잘못된 사용
   dispatch(asyncAction1());
   dispatch(asyncAction2());  // asyncAction1이 완료되기 전에 실행
   ```
 #### 해결 방법
 **방법 1: 큐 시스템 사용** (패널 액션인 경우)
 ```javascript
 // ✅ 올바른 사용
 dispatch(enqueueMultiplePanelActions([
  pushPanelQueued({ name: 'PANEL_1' }),
  pushPanelQueued({ name: 'PANEL_2' }),
  pushPanelQueued({ name: 'PANEL_3' })
 ]));
 ```
 **방법 2: createSequentialDispatch 사용**
 ```javascript
 // ✅ 올바른 사용
 dispatch(createSequentialDispatch([
  action1(),
  action2(),
  action3()
 ]));
 ```
 **방법 3: async/await 사용** (Chrome 68+)
 ```javascript
 // ✅ 올바른 사용
 export const myAction = () => async (dispatch, getState) => {
  await dispatch(action1());
  await dispatch(action2());
  await dispatch(action3());
 };
 ```
 ---
 ### 문제 2: "Cannot find module" 에러
 #### 증상
 ```
 Error: Cannot find module '../utils/dispatchHelper'
 Error: Cannot find module '../middleware/panelQueueMiddleware'
 ```
 #### 원인
 - 파일이 존재하지 않음
 - import 경로가 잘못됨
 - 빌드가 필요함
 #### 해결 방법
 **Step 1: 파일 존재 확인**
 ```bash
 # 프로젝트 루트에서 실행
 ls -la com.twin.app.shoptime/src/utils/dispatchHelper.js
 ls -la com.twin.app.shoptime/src/middleware/panelQueueMiddleware.js
 ls -la com.twin.app.shoptime/src/utils/asyncActionUtils.js
 ```
 **Step 2: 최신 코드 pull**
 ```bash
 git fetch origin
 git pull origin <branch-name>
 ```
 **Step 3: node_modules 재설치**
 ```bash
 cd com.twin.app.shoptime
 rm -rf node_modules package-lock.json
 npm install
 ```
 **Step 4: 빌드 재실행**
 ```bash
 npm run build
 # 또는
 npm start
 ```
 ---
 ### 문제 3: 타입 에러 (types is not defined)
 #### 증상
 ```
 ReferenceError: types is not defined
 TypeError: Cannot read property 'ENQUEUE_PANEL_ACTION' of undefined
 ```
 #### 원인
 actionTypes.js에 필요한 타입이 정의되지 않음
 #### 해결 방법
 **Step 1: actionTypes.js 확인**
 ```javascript
 // src/actions/actionTypes.js
 export const types = {
  // ... 기존 타입들 ...
  // 큐 관련 타입들 (필수!)
  ENQUEUE_PANEL_ACTION: 'ENQUEUE_PANEL_ACTION',
  PROCESS_PANEL_QUEUE: 'PROCESS_PANEL_QUEUE',
  CLEAR_PANEL_QUEUE: 'CLEAR_PANEL_QUEUE',
  SET_QUEUE_PROCESSING: 'SET_QUEUE_PROCESSING',
  // 비동기 액션 타입들 (필수!)
  ENQUEUE_ASYNC_PANEL_ACTION: 'ENQUEUE_ASYNC_PANEL_ACTION',
  COMPLETE_ASYNC_PANEL_ACTION: 'COMPLETE_ASYNC_PANEL_ACTION',
  FAIL_ASYNC_PANEL_ACTION: 'FAIL_ASYNC_PANEL_ACTION',
 };
 ```
 **Step 2: import 확인**
 ```javascript
 import { types } from '../actions/actionTypes';
 ```
 ---
 ## 큐 시스템 문제
 ### 문제 4: 큐가 처리되지 않음
 #### 증상
 ```javascript
 dispatch(pushPanelQueued({ name: panel_names.SEARCH_PANEL }));
 // 아무 일도 일어나지 않음
 // 콘솔 로그도 없음
 ```
 #### 원인
 **panelQueueMiddleware가 등록되지 않음** (가장 흔한 문제!)
 #### 해결 방법
 **Step 1: store.js 확인**
 ```javascript
 // src/store/store.js
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 export const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk,
    panelHistoryMiddleware,
    autoCloseMiddleware,
    panelQueueMiddleware  // ← 이것이 있는지 확인!
  )
 );
 ```
 **Step 2: import 경로 확인**
 ```javascript
 // ✅ 올바른 import
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
 // ❌ 잘못된 import
 import { panelQueueMiddleware } from '../middleware/panelQueueMiddleware';
 // default export이므로 중괄호 없이 import해야 함
 ```
 **Step 3: 앱 재시작**
 ```bash
 # 개발 서버 재시작
 npm start
 ```
 **Step 4: 브라우저 캐시 삭제**
 - Chrome: Ctrl+Shift+R (Windows) 또는 Cmd+Shift+R (Mac)
 ---
 ### 문제 5: 큐가 무한 루프에 빠짐
 #### 증상
 ```
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED
 [panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 ... (무한 반복)
 ```
 #### 원인
 1. 큐 처리 중에 다시 큐에 액션 추가
 2. `isProcessingQueue` 플래그가 제대로 설정되지 않음
 #### 해결 방법
 **방법 1: 큐 액션 내부에서 일반 dispatch 사용**
 ```javascript
 // ❌ 잘못된 사용 (무한 루프 발생)
 export const myAction = () => (dispatch) => {
  dispatch(pushPanelQueued({ name: 'PANEL_1' }));
  dispatch(pushPanelQueued({ name: 'PANEL_2' }));  // 큐 처리 중 큐 추가
 };
 // ✅ 올바른 사용
 export const myAction = () => (dispatch) => {
  dispatch(enqueueMultiplePanelActions([
    pushPanelQueued({ name: 'PANEL_1' }),
    pushPanelQueued({ name: 'PANEL_2' })
  ]));
 };
 ```
 **방법 2: 리듀서 로직 확인**
 ```javascript
 // panelReducer.js에서 확인
 case types.PROCESS_PANEL_QUEUE: {
  // 이미 처리 중이면 무시
  if (state.isProcessingQueue || state.panelActionQueue.length === 0) {
    return state;  // ← 이 로직이 있는지 확인
  }
  // ...
 }
 ```
 ---
 ### 문제 6: 큐 통계가 업데이트되지 않음
 #### 증상
 ```javascript
 store.getState().panels.queueStats
 // { totalProcessed: 0, failedCount: 0, averageProcessingTime: 0 }
 // 항상 0으로 유지됨
 ```
 #### 원인
 큐 처리가 정상적으로 완료되지 않음
 #### 해결 방법
 **Step 1: 콘솔 로그 확인**
 ```
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED  ← 이 로그가 보이는지 확인
 ```
 **Step 2: 에러 발생 확인**
 ```javascript
 store.getState().panels.queueError
 // null이어야 정상
 ```
 **Step 3: 큐 처리 완료 여부 확인**
 ```javascript
 store.getState().panels.isProcessingQueue
 // false여야 정상 (처리 완료)
 ```
 ---
 ## API 호출 문제
 ### 문제 7: API 성공인데 onFail이 호출됨
 #### 증상
 ```javascript
 // API 호출
 // HTTP 200, retCode: 0
 // 그런데 onFail이 호출됨
 ```
 #### 원인
 프로젝트 성공 기준을 이해하지 못함
 #### 프로젝트 성공 기준
 **HTTP 200-299 + retCode 0/'0' 둘 다 만족해야 성공!**
 ```javascript
 // ✅ 성공 케이스
 { status: 200, data: { retCode: 0, data: {...} } }
 { status: 200, data: { retCode: '0', data: {...} } }
 // ❌ 실패 케이스
 { status: 200, data: { retCode: 1, message: '에러' } }  // retCode가 0이 아님
 { status: 500, data: { retCode: 0, data: {...} } }  // HTTP 에러
 ```
 #### 해결 방법
 **방법 1: isApiSuccess 사용**
 ```javascript
 import { isApiSuccess } from '../utils/asyncActionUtils';
 const response = { status: 200 };
 const responseData = { retCode: 1, message: '에러' };
 if (isApiSuccess(response, responseData)) {
  // 성공 처리
 } else {
  // 실패 처리 (retCode가 1이므로 실패!)
 }
 ```
 **방법 2: asyncActionUtils 사용**
 ```javascript
 import { tAxiosToPromise } from '../utils/asyncActionUtils';
 const result = await tAxiosToPromise(...);
 if (result.success) {
  // HTTP 200-299 + retCode 0/'0'
  console.log(result.data);
 } else {
  // 실패
  console.error(result.error);
 }
 ```
 ---
 ### 문제 8: API 타임아웃이 작동하지 않음
 #### 증상
 ```javascript
 dispatch(enqueueAsyncPanelAction({
  asyncAction: (d, gs, onS, onF) => { /* 느린 API */ },
  timeout: 5000  // 5초
 }));
 // 10초가 지나도 타임아웃되지 않음
 ```
 #### 원인
 1. `withTimeout`이 적용되지 않음
 2. 타임아웃 값이 잘못 설정됨
 #### 해결 방법
 **방법 1: enqueueAsyncPanelAction 사용 시**
 ```javascript
 // ✅ timeout 옵션 사용
 dispatch(enqueueAsyncPanelAction({
  asyncAction: (dispatch, getState, onSuccess, onFail) => {
    TAxios(dispatch, getState, 'get', URL, {}, {}, onSuccess, onFail);
  },
  timeout: 5000,  // 5초 (ms 단위)
  onFail: (error) => {
    if (error.code === 'TIMEOUT') {
      console.error('타임아웃 발생!');
    }
  }
 }));
 ```
 **방법 2: withTimeout 직접 사용**
 ```javascript
 import { withTimeout, fetchApi } from '../utils/asyncActionUtils';
 const result = await withTimeout(
  fetchApi('/api/slow-endpoint'),
  5000,  // 5초
  '요청 시간이 초과되었습니다'
 );
 if (result.error?.code === 'TIMEOUT') {
  console.error('타임아웃!');
 }
 ```
 ---
 ## 성능 문제
 ### 문제 9: 큐 처리가 너무 느림
 #### 증상
 ```javascript
 // 100개의 패널 액션을 큐에 추가
 // 처리하는데 10초 이상 소요
 ```
 #### 원인
 1. 각 액션이 복잡한 로직 수행
 2. 동기적으로 처리되어 병목 발생
 #### 해결 방법
 **방법 1: 불필요한 액션 제거**
 ```javascript
 // ❌ 잘못된 사용
 for (let i = 0; i < 100; i++) {
  dispatch(pushPanelQueued({ name: `PANEL_${i}` }));
 }
 // ✅ 올바른 사용 - 필요한 것만
 dispatch(pushPanelQueued({ name: 'MAIN_PANEL' }));
 ```
 **방법 2: 배치 처리**
 ```javascript
 // 한 번에 여러 액션 추가
 dispatch(enqueueMultiplePanelActions(
  panels.map(panel => pushPanelQueued(panel))
 ));
 ```
 **방법 3: 병렬 처리가 필요하면 큐 사용 안함**
 ```javascript
 // 순서가 중요하지 않은 경우
 dispatch(createParallelDispatch([
  fetchData1(),
  fetchData2(),
  fetchData3()
 ]));
 ```
 ---
 ### 문제 10: 메모리 누수
 #### 증상
 ```javascript
 // 오랜 시간 앱 사용 후
 store.getState().panels.completedAsyncActions.length
 // → 10000개 이상
 ```
 #### 원인
 완료된 비동기 액션 ID가 계속 누적됨
 #### 해결 방법
 **방법 1: 주기적으로 클리어**
 ```javascript
 // 일정 시간마다 완료된 액션 정리
 setInterval(() => {
  const state = store.getState().panels;
  if (state.completedAsyncActions.length > 1000) {
    // 클리어 액션 dispatch
    dispatch({ type: types.CLEAR_COMPLETED_ASYNC_ACTIONS });
  }
 }, 60000);  // 1분마다
 ```
 **방법 2: 리듀서에 최대 개수 제한 추가**
 ```javascript
 // panelReducer.js
 case types.COMPLETE_ASYNC_PANEL_ACTION: {
  const newCompleted = [...state.completedAsyncActions, action.payload.actionId];
  // 최근 100개만 유지
  const trimmed = newCompleted.slice(-100);
  return {
    ...state,
    completedAsyncActions: trimmed
  };
 }
 ```
 ---
 ## 디버깅 팁
 ### Tip 1: 콘솔 로그 활용
 모든 헬퍼 함수와 미들웨어는 상세한 로그를 출력합니다:
 ```javascript
 // 큐 관련 로그
 [panelQueueMiddleware] 🚀 ACTION_ENQUEUED
 [panelQueueMiddleware] ⚡ STARTING_QUEUE_PROCESS
 [panelReducer] 🟡 PROCESS_PANEL_QUEUE
 [panelReducer] 🟡 PROCESSING_QUEUE_ITEM
 [panelReducer] ✅ QUEUE_ITEM_PROCESSED
 // 비동기 액션 로그
 [queuedPanelActions] 🔄 ENQUEUE_ASYNC_PANEL_ACTION
 [queuedPanelActions] ⚡ EXECUTING_ASYNC_ACTION
 [queuedPanelActions] ✅ ASYNC_ACTION_SUCCESS
 // asyncActionUtils 로그
 [asyncActionUtils] 🌐 FETCH_API_START
 [asyncActionUtils] 📊 API_RESPONSE
 [asyncActionUtils] ✅ TAXIOS_SUCCESS
 ```
 ### Tip 2: Redux DevTools 사용
 1. Chrome 확장 프로그램 설치: Redux DevTools
 2. 개발자 도구 → Redux 탭
 3. 액션 히스토리 확인
 4. State diff 확인
 ### Tip 3: 브레이크포인트 설정
 ```javascript
 // 디버깅용 브레이크포인트
 export const myAction = () => (dispatch, getState) => {
  debugger;  // ← 여기서 멈춤
  const state = getState();
  console.log('Current state:', state);
  dispatch(action1());
  debugger;  // ← 여기서 다시 멈춤
 };
 ```
 ### Tip 4: State 스냅샷
 ```javascript
 // 콘솔에서 실행
 const snapshot = JSON.parse(JSON.stringify(store.getState()));
 console.log(snapshot);
 // 특정 부분만
 const panelsSnapshot = JSON.parse(JSON.stringify(store.getState().panels));
 console.log(panelsSnapshot);
 ```
 ### Tip 5: 큐 상태 모니터링
 ```javascript
 // 콘솔에서 실행
 window.monitorQueue = setInterval(() => {
  const state = store.getState().panels;
  console.log('Queue status:', {
    queueLength: state.panelActionQueue.length,
    isProcessing: state.isProcessingQueue,
    stats: state.queueStats
  });
 }, 1000);
 // 중지
 clearInterval(window.monitorQueue);
 ```
 ---
 ## 도움이 필요하신가요?
 ### 체크리스트
 문제 해결 전에 다음을 확인하세요:
 - [ ] panelQueueMiddleware가 store.js에 등록되어 있는가?
 - [ ] 필요한 파일들이 모두 존재하는가?
 - [ ] actionTypes.js에 필요한 타입들이 정의되어 있는가?
 - [ ] 콘솔 로그를 확인했는가?
 - [ ] Redux DevTools로 액션 흐름을 확인했는가?
 - [ ] 앱을 재시작했는가?
 - [ ] 브라우저 캐시를 삭제했는가?
 ### 추가 리소스
 - [README.md](./README.md) - 전체 개요
 - [06-setup-guide.md](./06-setup-guide.md) - 설정 가이드
 - [05-usage-patterns.md](./05-usage-patterns.md) - 사용 패턴
 - [07-changelog.md](./07-changelog.md) - 변경 이력
 ---
 **작성일**: 2025-11-10
 **최종 수정일**: 2025-11-10
--- a/com.twin.app.shoptime/.docs/dispatch-async/README.md
+++ b/com.twin.app.shoptime/.docs/dispatch-async/README.md
@@ -1,137 +0,0 @@
 # Dispatch 비동기 처리 순서 보장 솔루션
 ## 📋 목차
 1. [문제 상황](./01-problem.md)
 2. [해결 방법 1: dispatchHelper.js](./02-solution-dispatch-helper.md)
 3. [해결 방법 2: asyncActionUtils.js](./03-solution-async-utils.md)
 4. [해결 방법 3: 큐 기반 패널 액션 시스템](./04-solution-queue-system.md)
 5. [사용 패턴 및 예제](./05-usage-patterns.md)
 6. [설정 가이드](./06-setup-guide.md) ⭐
 7. [변경 이력 (Changelog)](./07-changelog.md)
 8. [트러블슈팅](./08-troubleshooting.md) ⭐
 ## 🎯 개요
 이 문서는 Redux-thunk 환경에서 여러 개의 dispatch를 순차적으로 실행할 때 순서가 보장되지 않는 문제를 해결하기 위해 구현된 솔루션들을 정리한 문서입니다.
 ## ⚙️ 설치 및 설정
 ### 필수: panelQueueMiddleware 등록
 큐 기반 패널 액션 시스템을 사용하려면 **반드시** store에 미들웨어를 등록해야 합니다.
 **파일**: `src/store/store.js`
 ```javascript
 import { applyMiddleware, combineReducers, createStore } from 'redux';
 import thunk from 'redux-thunk';
 import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware';
 import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware';
 import panelQueueMiddleware from '../middleware/panelQueueMiddleware'; // ← 추가
 // ... reducers ...
 export const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk,
    panelHistoryMiddleware,
    autoCloseMiddleware,
    panelQueueMiddleware  // ← 추가 (맨 마지막에 위치)
  )
 );
 ```
 **⚠️ 중요**: panelQueueMiddleware를 등록하지 않으면 큐 시스템이 작동하지 않습니다!
 ## 🚀 주요 솔루션
 ### 1. dispatchHelper.js (2025-11-05)
 Promise 체인 기반의 dispatch 순차 실행 헬퍼 함수 모음
 - `createSequentialDispatch`: 순차적 dispatch 실행
 - `createApiThunkWithChain`: API 후 dispatch 자동 체이닝
 - `withLoadingState`: 로딩 상태 자동 관리
 - `createConditionalDispatch`: 조건부 dispatch
 - `createParallelDispatch`: 병렬 dispatch
 ### 2. asyncActionUtils.js (2025-11-06)
 Promise 기반 비동기 액션 처리 및 성공/실패 기준 명확화
 - API 성공 기준: HTTP 200-299 + retCode 0/'0'
 - 모든 비동기 작업을 Promise로 래핑
 - reject 없이 resolve + success 플래그 사용
 - 타임아웃 지원
 ### 3. 큐 기반 패널 액션 시스템 (2025-11-06)
 미들웨어 기반의 액션 큐 처리 시스템
 - `queuedPanelActions.js`: 큐 기반 패널 액션
 - `panelQueueMiddleware.js`: 자동 큐 처리 미들웨어
 - `panelReducer.js`: 큐 상태 관리
 ## 📊 커밋 히스토리
 ```
 f9290a1 [251106] fix: Dispatch Queue implementation
  - asyncActionUtils.js 추가
  - queuedPanelActions.js 확장
  - panelReducer.js 확장
 5bd2774 [251106] feat: Queued Panel functions
  - queuedPanelActions.js 초기 구현
  - panelQueueMiddleware.js 추가
 9490d72 [251105] feat: dispatchHelper.js
  - createSequentialDispatch
  - createApiThunkWithChain
  - withLoadingState
  - createConditionalDispatch
  - createParallelDispatch
 ```
 ## 📂 관련 파일
 ### Core Files
 - `src/utils/dispatchHelper.js`
 - `src/utils/asyncActionUtils.js`
 - `src/actions/queuedPanelActions.js`
 - `src/middleware/panelQueueMiddleware.js`
 - `src/reducers/panelReducer.js`
 ### Example Files
 - `src/actions/homeActions.js`
 - `src/actions/cartActions.js`
 ## 🔑 핵심 개선 사항
 1. ✅ **순서 보장**: Promise 체인과 큐 시스템으로 dispatch 순서 보장
 2. ✅ **에러 처리**: reject 대신 resolve + success 플래그로 체인 보장
 3. ✅ **성공 기준 명확화**: HTTP 상태 + retCode 둘 다 확인
 4. ✅ **타임아웃 지원**: withTimeout으로 응답 없는 API 처리
 5. ✅ **로깅**: 모든 단계에서 상세한 로그 출력
 6. ✅ **호환성**: 기존 코드와 완전 호환 (선택적 사용 가능)
 ## 🎓 학습 자료
 각 솔루션에 대한 자세한 설명은 개별 문서를 참고하세요.
 ### 시작하기
 - **처음 시작한다면** → [06-setup-guide.md](./06-setup-guide.md) ⭐
 - **문제가 발생했다면** → [08-troubleshooting.md](./08-troubleshooting.md) ⭐
 ### 이해하기
 - 기존 코드의 문제점이 궁금하다면 → [01-problem.md](./01-problem.md)
 - dispatchHelper 사용법이 궁금하다면 → [02-solution-dispatch-helper.md](./02-solution-dispatch-helper.md)
 - asyncActionUtils 사용법이 궁금하다면 → [03-solution-async-utils.md](./03-solution-async-utils.md)
 - 큐 시스템 사용법이 궁금하다면 → [04-solution-queue-system.md](./04-solution-queue-system.md)
 ### 실전 적용
 - 실제 사용 예제가 궁금하다면 → [05-usage-patterns.md](./05-usage-patterns.md)
 - 변경 이력을 확인하려면 → [07-changelog.md](./07-changelog.md)
 ---
 **작성일**: 2025-11-10
 **최종 수정일**: 2025-11-10
--- a/com.twin.app.shoptime/.docs/modal-transition-analysis.md
+++ b/com.twin.app.shoptime/.docs/modal-transition-analysis.md
@@ -1,437 +0,0 @@
 # Modal 전환 기능 상세 분석
 **작성일**: 2025-11-10
 **목적**: MediaPlayer.v2.jsx 설계를 위한 필수 기능 분석
 ---
 ## 📋 Modal 모드 전환 플로우
 ### 1. 시작: Modal 모드로 비디오 재생
 ```javascript
 // actions/mediaActions.js - startMediaPlayer()
 dispatch(startMediaPlayer({
  modal: true,
  modalContainerId: 'some-product-id',
  showUrl: 'video-url.mp4',
  thumbnailUrl: 'thumb.jpg',
  // ...
 }));
 ```
 **MediaPanel에서의 처리 (MediaPanel.jsx:114-161)**:
 ```javascript
 useEffect(() => {
  if (panelInfo.modal && panelInfo.modalContainerId) {
    // 1. DOM 노드 찾기
    const node = document.querySelector(
      `[data-spotlight-id="${panelInfo.modalContainerId}"]`
    );
    // 2. 위치와 크기 계산
    const { width, height, top, left } = node.getBoundingClientRect();
    // 3. padding/margin 조정
    const totalOffset = 24; // 6*2 + 6*2
    const adjustedWidth = width - totalOffset;
    const adjustedHeight = height - totalOffset;
    // 4. Fixed 위치 스타일 생성
    const style = {
      width: adjustedWidth + 'px',
      height: adjustedHeight + 'px',
      top: (top + totalOffset/2) + 'px',
      left: (left + totalOffset/2) + 'px',
      position: 'fixed',
      overflow: 'hidden'
    };
    setModalStyle(style);
    setModalScale(adjustedWidth / window.innerWidth);
  }
 }, [panelInfo, isOnTop]);
 ```
 **VideoPlayer에 전달**:
 ```javascript
 <VideoPlayer
  disabled={panelInfo.modal}           // modal에서는 controls 비활성
  spotlightDisabled={panelInfo.modal}  // modal에서는 spotlight 비활성
  style={panelInfo.modal ? modalStyle : {}}
  modalScale={panelInfo.modal ? modalScale : 1}
  modalClassName={panelInfo.modal && panelInfo.modalClassName}
  onClick={onVideoClick}               // 클릭 시 전환
 />
 ```
 ---
 ### 2. 전환: Modal → Fullscreen
 **사용자 액션**: modal 비디오 클릭
 ```javascript
 // MediaPanel.jsx:164-174
 const onVideoClick = useCallback(() => {
  if (panelInfo.modal) {
    dispatch(switchMediaToFullscreen());
  }
 }, [dispatch, panelInfo.modal]);
 ```
 **Redux Action (mediaActions.js:164-208)**:
 ```javascript
 export const switchMediaToFullscreen = () => (dispatch, getState) => {
  const modalMediaPanel = panels.find(
    (panel) => panel.name === panel_names.MEDIA_PANEL &&
               panel.panelInfo?.modal
  );
  if (modalMediaPanel) {
    dispatch(updatePanel({
      name: panel_names.MEDIA_PANEL,
      panelInfo: {
        ...modalMediaPanel.panelInfo,
        modal: false  // 🔑 핵심: modal만 false로 변경
      }
    }));
  }
 };
 ```
 **MediaPanel 재렌더링**:
 ```javascript
 // panelInfo.modal이 false가 되면 useEffect 재실행
 useEffect(() => {
  // modal이 false이면 else if 분기 실행
  else if (isOnTop && !panelInfo.modal && !panelInfo.isMinimized && videoPlayer.current) {
    // 재생 상태 복원
    if (videoPlayer.current?.getMediaState()?.paused) {
      videoPlayer.current.play();
    }
    // controls 표시
    if (!videoPlayer.current.areControlsVisible()) {
      videoPlayer.current.showControls();
    }
  }
 }, [panelInfo, isOnTop]);
 // VideoPlayer에 전달되는 props 변경
 <VideoPlayer
  disabled={false}              // controls 활성화
  spotlightDisabled={false}     // spotlight 활성화
  style={{}}                     // fixed position 제거 → 전체화면
  modalScale={1}
  modalClassName={undefined}
 />
 ```
 ---
 ### 3. 복귀: Fullscreen → Modal (Back 버튼)
 ```javascript
 // MediaPanel.jsx:176-194
 const onClickBack = useCallback((ev) => {
  // modalContainerId가 있으면 modal에서 왔던 것
  if (panelInfo.modalContainerId && !panelInfo.modal) {
    dispatch(PanelActions.popPanel());
    ev?.stopPropagation();
    return;
  }
  // 일반 fullscreen이면 그냥 닫기
  if (!panelInfo.modal) {
    dispatch(PanelActions.popPanel());
    ev?.stopPropagation();
  }
 }, [dispatch, panelInfo]);
 ```
 ---
 ## 🔑 핵심 메커니즘
 ### 1. 같은 MediaPanel 재사용
 - modal → fullscreen 전환 시 패널을 새로 만들지 않음
 - **updatePanel**로 `panelInfo.modal`만 변경
 - **비디오 재생 상태 유지** (같은 컴포넌트 인스턴스)
 ### 2. 스타일 동적 계산
 ```javascript
 // modal=true
 style={{
  position: 'fixed',
  top: '100px',
  left: '200px',
  width: '400px',
  height: '300px'
 }}
 // modal=false
 style={{}}  // 전체화면 (기본 CSS)
 ```
 ### 3. Pause/Resume 관리
 ```javascript
 // modal에서 다른 패널이 위로 올라오면
 useEffect(() => {
  if (panelInfo?.modal) {
    if (!isOnTop) {
      dispatch(pauseModalMedia());  // isPaused: true
    } else if (isOnTop && panelInfo.isPaused) {
      dispatch(resumeModalMedia()); // isPaused: false
    }
  }
 }, [isOnTop, panelInfo, dispatch]);
 // VideoPlayer에서 isPaused 감지하여 play/pause 제어
 useEffect(() => {
  if (panelInfo?.modal && videoPlayer.current) {
    if (panelInfo.isPaused) {
      videoPlayer.current.pause();
    } else if (panelInfo.isPaused === false) {
      videoPlayer.current.play();
    }
  }
 }, [panelInfo?.isPaused, panelInfo?.modal]);
 ```
 ---
 ## 📐 MediaPlayer.v2.jsx가 지원해야 할 기능
 ### ✅ 필수 Props (추가)
 ```javascript
 {
  // 기존
  src,
  autoPlay,
  loop,
  onEnded,
  onError,
  thumbnailUrl,
  videoComponent,
  // Modal 전환 관련 (필수)
  disabled,           // modal=true일 때 true
  spotlightDisabled,  // modal=true일 때 true
  onClick,            // modal일 때 클릭 → switchMediaToFullscreen
  style,              // modal일 때 fixed position style
  modalClassName,     // modal일 때 추가 className
  modalScale,         // modal일 때 scale 값 (QR코드 등에 사용)
  // 패널 정보
  panelInfo: {
    modal,            // modal 모드 여부
    modalContainerId, // modal 기준 컨테이너 ID
    isPaused,         // 일시정지 여부 (다른 패널 위로 올라옴)
    showUrl,          // 비디오 URL
    thumbnailUrl,     // 썸네일 URL
  },
  // 콜백
  onBackButton,       // Back 버튼 핸들러
  // Spotlight
  spotlightId,
 }
 ```
 ### ✅ 필수 기능
 #### 1. Modal 모드 스타일 적용
 ```javascript
 const containerStyle = useMemo(() => {
  if (panelInfo?.modal && style) {
    return style; // MediaPanel에서 계산한 fixed position
  }
  return {}; // 전체화면
 }, [panelInfo?.modal, style]);
 ```
 #### 2. Modal 클릭 처리
 ```javascript
 const handleVideoClick = useCallback(() => {
  if (panelInfo?.modal && onClick) {
    onClick(); // switchMediaToFullscreen 호출
    return;
  }
  // fullscreen이면 controls 토글
  toggleControls();
 }, [panelInfo?.modal, onClick]);
 ```
 #### 3. isPaused 상태 동기화
 ```javascript
 useEffect(() => {
  if (panelInfo?.modal && videoRef.current) {
    if (panelInfo.isPaused) {
      videoRef.current.pause();
    } else if (panelInfo.isPaused === false) {
      videoRef.current.play();
    }
  }
 }, [panelInfo?.isPaused, panelInfo?.modal]);
 ```
 #### 4. Modal → Fullscreen 전환 시 재생 복원
 ```javascript
 useEffect(() => {
  // modal에서 fullscreen으로 전환되었을 때
  if (prevPanelInfo?.modal && !panelInfo?.modal) {
    if (videoRef.current?.paused) {
      videoRef.current.play();
    }
    setControlsVisible(true);
  }
 }, [panelInfo?.modal]);
 ```
 #### 5. Controls/Spotlight 비활성화
 ```javascript
 const shouldDisableControls = panelInfo?.modal || disabled;
 const shouldDisableSpotlight = panelInfo?.modal || spotlightDisabled;
 ```
 ---
 ## 🚫 여전히 제거 가능한 기능
 Modal 전환과 무관한 기능들:
 ```
 ❌ QR코드 오버레이 (PlayerPanel 전용)
 ❌ 전화번호 오버레이 (PlayerPanel 전용)
 ❌ 테마 인디케이터 (PlayerPanel 전용)
 ❌ MediaSlider (seek bar) - 단순 재생만
 ❌ 복잡한 피드백 시스템 (miniFeedback, 8개 Job)
 ❌ Announce/Accessibility 복잡계
 ❌ FloatingLayer
 ❌ Redux 통합 (updateVideoPlayState)
 ❌ TabContainer 동기화 (PlayerPanel 전용)
 ❌ MediaTitle, infoComponents
 ❌ jumpBy, fastForward, rewind
 ❌ playbackRate 조정
 ```
 ---
 ## 📊 최종 상태 변수 (9개)
 ```javascript
 const [currentTime, setCurrentTime] = useState(0);
 const [duration, setDuration] = useState(0);
 const [paused, setPaused] = useState(true);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);
 const [controlsVisible, setControlsVisible] = useState(false);
 // Modal 관련 (MediaPanel에서 계산하므로 state 불필요)
 // modalStyle, modalScale → props로 받음
 ```
 ---
 ## 📊 최종 Props 목록 (~18개)
 ```javascript
 MediaPlayerV2.propTypes = {
  // 비디오 소스
  src: PropTypes.string.isRequired,
  type: PropTypes.string,
  thumbnailUrl: PropTypes.string,
  // 재생 제어
  autoPlay: PropTypes.bool,
  loop: PropTypes.bool,
  // Modal 전환
  disabled: PropTypes.bool,
  spotlightDisabled: PropTypes.bool,
  onClick: PropTypes.func,
  style: PropTypes.object,
  modalClassName: PropTypes.string,
  modalScale: PropTypes.number,
  // 패널 정보
  panelInfo: PropTypes.shape({
    modal: PropTypes.bool,
    modalContainerId: PropTypes.string,
    isPaused: PropTypes.bool,
    showUrl: PropTypes.string,
    thumbnailUrl: PropTypes.string,
  }),
  // 콜백
  onEnded: PropTypes.func,
  onError: PropTypes.func,
  onBackButton: PropTypes.func,
  // Spotlight
  spotlightId: PropTypes.string,
  // 비디오 컴포넌트
  videoComponent: PropTypes.elementType,
 };
 ```
 ---
 ## 🎯 구현 우선순위
 ### Phase 1: 기본 재생 (1일)
 - [ ] 비디오 element 렌더링 (Media / TReactPlayer)
 - [ ] 기본 play/pause 제어
 - [ ] 로딩 상태 및 썸네일 표시
 - [ ] API 제공 (getMediaState, play, pause)
 ### Phase 2: Modal 전환 (1일)
 - [ ] Modal 스타일 적용 (props.style)
 - [ ] Modal 클릭 → Fullscreen 전환
 - [ ] isPaused 상태 동기화
 - [ ] disabled/spotlightDisabled 처리
 ### Phase 3: Controls (1일)
 - [ ] 최소한의 controls UI (재생/일시정지만)
 - [ ] Controls 자동 숨김/보임
 - [ ] Spotlight 포커스 관리 (기본만)
 ### Phase 4: 테스트 및 최적화 (1일)
 - [ ] 메모리 프로파일링
 - [ ] 전환 애니메이션 부드럽게
 - [ ] Edge case 처리
 ---
 ## 💡 예상 개선 효과 (수정)
 | 항목 | 현재 | 개선 후 | 개선율 |
 |------|------|---------|--------|
 | **코드 라인** | 2,595 | ~700 | **73% 감소** |
 | **상태 변수** | 20+ | 6~9 | **60% 감소** |
 | **Props** | 70+ | ~18 | **74% 감소** |
 | **타이머/Job** | 8 | 1~2 | **80% 감소** |
 | **필수 기능** | 100% | 100% | **유지** |
 | **메모리 점유** | 높음 | 낮음 | **예상 40%+ 감소** |
 | **렌더링 속도** | 느림 | 빠름 | **예상 2배 향상** |
 ---
 ## ✅ 결론
 Modal 전환 기능은 복잡해 보이지만, 실제로는:
 1. **MediaPanel**에서 스타일 계산 (modalStyle, modalScale)
 2. **MediaPlayer**는 받은 style을 그대로 적용
 3. **modal 플래그**에 따라 controls/spotlight 활성화 여부만 제어
 따라서 MediaPlayer.v2.jsx는:
 - Modal 전환 로직 구현 필요 없음
 - Props 받아서 적용만 하면 됨
 - 핵심 복잡도는 MediaPanel에 있음
 **→ 여전히 대폭 간소화 가능!**
--- a/com.twin.app.shoptime/.docs/player-panel/TabContainerV2-Divider-Problem-Analysis.md
+++ b/com.twin.app.shoptime/.docs/player-panel/TabContainerV2-Divider-Problem-Analysis.md
@@ -1,175 +0,0 @@
 # TabContainerV2 구분선 문제 분석 및 해결 방안
 ## 문제 개요
 PlayerPanel의 TabContainerV2에서 ShopNowContents와 YouMayLikeContents 사이에 세로 구분선을 표시해야 하지만, 현재 TVirtualGridList 구조의 한계로 인해 올바르게 동작하지 않음
 ## 현재 구조 분석
 ### 1. TabContainerV2 구조
 - 위치: `src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx`
 - 3개의 tabIndex로 구성 (0: ShopNow, 1: LiveChannel, 2: ShopNowButton)
 - version=2에서 ShopNow와 YouMayLike 통합 표시
 ### 2. ShopNowContents 구조
 - 위치: `src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx`
 - ShopNow 아이템 < 3개일 때 YouMayLike 아이템을 통합하여 표시
 - combinedItems 배열로 ShopNow + YouMayLike 통합 관리
 - TVirtualGridList로 가로 방향 렌더링 (itemWidth: 310px, itemHeight: 445px, spacing: 30px)
 ### 3. 현재 구분선 구현 로직
 ```javascript
 // YouMayLike 시작 지점 여부 (구분선 표시)
 const isYouMayLikeStart = shopNowInfo && index === shopNowInfo.length;
 return (
  <>
    {isYouMayLikeStart && <div className={css.youMayLikeDivider} />}
    <TItemCard {...props} />
  </>
 );
 ```
 ## 문제 상세
 ### 1. TVirtualGridList 구조적 한계
 - TVirtualGridList는 각 아이템이 고정된 크기를 가짐 (itemWidth: 310px)
 - renderItem 함수 내에서 추가적인 요소(divider)를 렌더링하면 레이아웃 충돌 발생
 - divider가 TItemCard와 같은 공간을 차지하려고 하여 빈 TItemCard가 표시되는 현상
 ### 2. 포커스 이동 문제
 - divider가 포커스를 받거나 포커스 이동을 방해하는 현상
 - 실제 상품과 포커스 위치가 불일치하는 문제
 ### 3. 간격 문제
 - 구분선으로 인해 상품들 간의 간격이 넓어짐
 - 사용자 경험 저하
 ## 해결 방안 분석
 ### 방안 1: TItemCard Wrapper 방식 ❌
 **구현:**
 ```javascript
 <div className={css.itemWrapper}>
  <TItemCard {...props} />
 </div>
 ```
 **CSS:**
 ```css
 .itemWrapper::before {
  content: '';
  width: 2px;
  opacity: 0;
 }
 .itemWrapper.showDivider::before {
  opacity: 1;
  background: rgba(234, 234, 234, 0.3);
 }
 ```
 **문제점:**
 - itemWidth를 310px → 327px로 증가시켜야 함
 - 상품 간 간격이 넓어짐
 - 포커스와 상품 위치 불일치
 - 전체 레이아웃 변경 필요
 ### 방안 2: Divider 아이템 추가 방식 ❌
 **구현:**
 ```javascript
 // combinedItems에 divider 추가
 items.push({ _type: 'divider' });
 // renderItem에서 처리
 if (item._type === 'divider') {
  return <div className={css.youMayLikeDivider} />;
 }
 ```
 **문제점:**
 - divider가 TVirtualGridList 아이템으로 인식되어 TItemCard만큼 공간 차지
 - ShopNow와 YouMayLike 사이 포커스 이동이 막힘
 - 빈 공간이 생기는 문제 여전히 존재
 ### 방안 3: 두 개의 TVirtualGridList 분리 방식 ✅
 **구현:**
 ```javascript
 <div className={css.shopNowContainer}>
  <TVirtualGridList>
    [ShopNow1][ShopNow2]
  </TVirtualGridList>
 </div>
 <div className={css.dividerContainer}>
  <div className={css.youMayLikeDivider} />
 </div>
 <div className={css.youMayLikeContainer}>
  <TVirtualGridList>
    [YouMayLike1][YouMayLike2]
  </TVirtualGridList>
 </div>
 ```
 **장점:**
 - 구분선을 완벽하게 제어 가능
 - 각 TVirtualGridList가 독립적으로 동작
 - 빈 TItemCard 문제 해결
 - 레이아웃 깨짐 없음
 - 기존 기능 모두 유지 가능
 **고려사항:**
 - 포커스 이동 핸들러 구현 필요
  - ShopNow 마지막 아이템 → 구분선 → YouMayLike 첫 아이템
  - YouMayLike 첫 아이템 → 구분선 → ShopNow 마지막 아이템
 - Spotlight 컨테이너 간 이동 수동 처리 필요
 **포커스 이동 구현 예시:**
 ```javascript
 // ShopNow 마지막 아이템
 onSpotlightRight={() => Spotlight.focus('divider-element')}
 // 구분선 SpottableDiv
 <SpottableDiv
  spotlightId="divider-element"
  onSpotlightLeft={() => Spotlight.focus('shop-now-last')}
  onSpotlightRight={() => Spotlight.focus('you-may-like-first')}
 >
  <div className={css.youMayLikeDivider} />
 </SpottableDiv>
 // YouMayLike 첫 아이템
 onSpotlightLeft={() => Spotlight.focus('divider-element')}
 ```
 ## 추천 해결책
 **방안 3: 두 개의 TVirtualGridList 분리 방식**을 추천합니다.
 ### 이유
 1. **근본적인 해결**: TVirtualGridList 구조적 한계를 완전히 회피
 2. **레이아웃 안정성**: 각 컴포넌트가 독립적으로 동작하여 예측 가능한 결과
 3. **유지보수성**: 기존 로직을 최소한만 수정하며 명확한 분리
 4. **사용자 경험**: 포커스 이동이 더 명확하고 직관적
 ### 구현 우선순위
 1. ShopNow TVirtualGridList 분리
 2. YouMayLike TVirtualGridList 분리
 3. 구분선 SpottableDiv 추가
 4. 포커스 이동 핸들러 구현
 5. 테스트 및 디버깅
 ### 영향 범위
 - **수정 필요 파일**: `ShopNowContents.jsx` 1개
 - **기존 기능**: 모두 유지 가능
 - **성능 영향**: 미미 (VirtualGridList 인스턴스 1개 추가)
 - **사용자 영향**: 없음 (개선된 경험 제공)
 ## 관련 파일
 - `src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx`
 - `src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx`
 - `src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.jsx`
 - `src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.v2.module.less`
 - `src/components/TVirtualGridList/TVirtualGridList.jsx`
--- a/com.twin.app.shoptime/.docs/video-player-analysis-and-optimization-plan.md
+++ b/com.twin.app.shoptime/.docs/video-player-analysis-and-optimization-plan.md
@@ -1,214 +0,0 @@
 # 비디오 플레이어 분석 및 최적화 계획
 **작성일**: 2025-11-10
 **대상**: MediaPlayer.v2.jsx 설계
 ---
 ## 📊 현재 구조 분석
 ### 1. 발견된 파일들
 | 파일 | 경로 | 라인 수 | 타입 |
 |------|------|---------|------|
 | VideoPlayer.js | `src/components/VideoPlayer/VideoPlayer.js` | 2,658 | Class Component |
 | MediaPlayer.jsx | `src/components/VideoPlayer/MediaPlayer.jsx` | 2,595 | Class Component |
 | MediaPanel.jsx | `src/views/MediaPanel/MediaPanel.jsx` | 415 | Function Component |
 | PlayerPanel.jsx | `src/views/PlayerPanel/PlayerPanel.jsx` | 25,146+ | (파일 읽기 실패) |
 ### 2. 주요 문제점
 #### 🔴 심각한 코드 비대화
 ```
 VideoPlayer.js:     2,658 라인 (클래스 컴포넌트)
 MediaPlayer.jsx:    2,595 라인 (거의 동일한 복사본)
 PlayerPanel.jsx:   25,146+ 라인
 ```
 #### 🔴 과도한 Enact 프레임워크 의존성
 ```javascript
 // 7개 이상의 Decorator 래핑
 ApiDecorator
 I18nContextDecorator
 Slottable
 FloatingLayerDecorator
 Skinnable
 SpotlightContainerDecorator
 Spottable, Touchable
 ```
 #### 🔴 복잡한 상태 관리 (20+ 상태 변수)
 ```javascript
 state = {
  // 미디어 상태
  currentTime, duration, paused, loading, error,
  playbackRate, proportionLoaded, proportionPlayed,
  // UI 상태
  announce, feedbackVisible, feedbackAction,
  mediaControlsVisible, mediaSliderVisible, miniFeedbackVisible,
  titleVisible, infoVisible, bottomControlsRendered,
  // 기타
  sourceUnavailable, titleOffsetHeight, bottomOffsetHeight,
  lastFocusedTarget, slider5WayPressed, thumbnailUrl
 }
 ```
 #### 🔴 메모리 점유 과다
 **8개의 Job 인스턴스**:
 - `autoCloseJob` - 자동 controls 숨김
 - `hideTitleJob` - 타이틀 숨김
 - `hideFeedbackJob` - 피드백 숨김
 - `hideMiniFeedbackJob` - 미니 피드백 숨김
 - `rewindJob` - 되감기 처리
 - `announceJob` - 접근성 알림
 - `renderBottomControl` - 하단 컨트롤 렌더링
 - `slider5WayPressJob` - 슬라이더 5-way 입력
 **다수의 이벤트 리스너**:
 - `mousemove`, `touchmove`, `keydown`, `wheel`
 - 복잡한 Spotlight 포커스 시스템
 #### 🔴 불필요한 기능들 (MediaPanel에서 미사용)
 ```javascript
 // PlayerOverlayQRCode (QR코드 표시)
 // VideoOverlayWithPhoneNumber (전화번호 오버레이)
 // ThemeIndicatorArrow (테마 인디케이터)
 // FeedbackTooltip, MediaTitle (주석 처리됨)
 // 복잡한 TabContainerV2 동기화
 // Redux 통합 (updateVideoPlayState)
 ```
 ---
 ## 🔍 webOS 특정 기능 분석
 ### 필수 기능
 #### 1. Spotlight 포커스 관리
 ```javascript
 // 리모컨 5-way 네비게이션
 SpotlightContainerDecorator
 Spottable, Touchable
 ```
 #### 2. Media 컴포넌트 (webOS 전용)
 ```javascript
 videoComponent: window.PalmSystem ? Media : TReactPlayer
 ```
 #### 3. playbackRate 네거티브 지원
 ```javascript
 if (platform.webos) {
  this.video.playbackRate = pbNumber; // 음수 지원 (되감기)
 } else {
  // 브라우저: 수동 되감기 구현
  this.beginRewind();
 }
 ```
 ### 제거 가능한 기능
 - FloatingLayer 시스템
 - 복잡한 announce/accessibility 시스템
 - Marquee 애니메이션
 - 다중 오버레이 시스템
 - Job 기반 타이머 → `setTimeout`으로 대체 가능
 ---
 ## 📐 MediaPlayer.v2.jsx 초기 설계 (수정 전)
 ### 설계 원칙
 ```
 1. 함수 컴포넌트 + React Hooks 사용
 2. 상태 최소화 (5~7개만)
 3. Enact 의존성 최소화 (Spotlight 기본만)
 4. 직접 video element 제어
 5. props 최소화 (15개 이하)
 6. 단순한 controls UI
 7. 메모리 효율성 우선
 ```
 ### 최소 상태 (6개)
 ```javascript
 const [currentTime, setCurrentTime] = useState(0);
 const [duration, setDuration] = useState(0);
 const [paused, setPaused] = useState(true);
 const [loading, setLoading] = useState(true);
 const [controlsVisible, setControlsVisible] = useState(false);
 const [error, setError] = useState(null);
 ```
 ### 필수 Props (~12개)
 ```javascript
 {
  src,              // 비디오 URL
  type,             // 비디오 타입
  autoPlay,         // 자동 재생
  loop,             // 반복 재생
  disabled,         // modal 상태
  onEnded,          // 종료 콜백
  onError,          // 에러 콜백
  onBackButton,     // 뒤로가기
  thumbnailUrl,     // 썸네일
  panelInfo,        // 패널 정보
  spotlightId,      // spotlight ID
  videoComponent    // Media or TReactPlayer
 }
 ```
 ### 제거할 기능들
 ```
 ❌ QR코드 오버레이
 ❌ 전화번호 오버레이
 ❌ 테마 인디케이터
 ❌ 복잡한 피드백 시스템
 ❌ MediaSlider (seek bar)
 ❌ 자동 숨김/보임 Job 시스템
 ❌ Announce/Accessibility 복잡계
 ❌ FloatingLayer
 ❌ Redux 통합
 ❌ TabContainer 동기화
 ❌ 다중 overlay 시스템
 ❌ MediaTitle, infoComponents
 ❌ jumpBy, fastForward, rewind
 ❌ playbackRate 조정
 ```
 ---
 ## 📈 예상 개선 효과
 | 항목 | 현재 | 개선 후 | 개선율 |
 |------|------|---------|--------|
 | **코드 라인** | 2,595 | ~500 | **80% 감소** |
 | **상태 변수** | 20+ | 5~7 | **65% 감소** |
 | **Props** | 70+ | ~12 | **83% 감소** |
 | **타이머/Job** | 8 | 2~3 | **70% 감소** |
 | **메모리 점유** | 높음 | 낮음 | **예상 50%+ 감소** |
 | **렌더링 속도** | 느림 | 빠름 | **예상 2~3배 향상** |
 ---
 ## 🚨 중요 요구사항 추가
 ### Modal 모드 전환 기능 (필수)
 사용자 피드백:
 > "비디오 플레이어가 이렇게 복잡하게 된 데에는 다 이유가 있다.
 > modal=true 모드에서 화면의 일부 크기로 재생이 되다가
 > 그 화면 그대로 키워서 modal=false로 전체화면으로 비디오를 재생하는 부분이 있어야 한다."
 **→ 이 기능은 반드시 유지되어야 함**
 ---
 ## 📝 다음 단계
 1. Modal 전환 기능 상세 분석
 2. 필수 기능 재정의
 3. MediaPlayer.v2.jsx 재설계
 4. 구현 우선순위 결정
--- a/com.twin.app.shoptime/assets/images/featuredBrands/image-nbcu.png
+++ b/com.twin.app.shoptime/assets/images/featuredBrands/image-nbcu.png
--- a/com.twin.app.shoptime/assets/images/featuredBrands/nbcu.svg
+++ b/com.twin.app.shoptime/assets/images/featuredBrands/nbcu.svg
--- a/com.twin.app.shoptime/src/App/App.js
+++ b/com.twin.app.shoptime/src/App/App.js
@@ -18,7 +18,6 @@ import { ThemeDecorator } from '@enact/sandstone/ThemeDecorator';
 import {
  changeAppStatus,
  changeLocalSettings,
  // cancelFocusElement,
  // focusElement,
  // setExitApp,
@@ -45,7 +44,7 @@ import { pushPanel } from '../actions/panelActions';
 import { enqueuePanelHistory } from '../actions/panelHistoryActions';
 import NotSupportedVersion from '../components/NotSupportedVersion/NotSupportedVersion';
 import ToastContainer from '../components/TToast/ToastContainer';
-import GlobalPopup from '../components/GlobalPopup/GlobalPopup';
+
 import usePrevious from '../hooks/usePrevious';
 import { lunaTest } from '../lunaSend/lunaTest';
 import { store } from '../store/store';
@@ -280,7 +279,7 @@ const originFocus = Spotlight.focus;
 const originMove = Spotlight.move;
 const originSilentlyFocus = Spotlight.silentlyFocus;
 let lastLoggedSpotlightId = null;
-let lastLoggedBlurSpotlightId = null;
+let lastLoggedBlurSpotlightId = null; // eslint-disable-line no-unused-vars
 let focusLoggingSuppressed = 0;
 const resolveSpotlightIdFromNode = (node) => {
@@ -407,28 +406,7 @@ Spotlight.silentlyFocus = function (...args) {
  return ret;
 };
 const resolveSpotlightIdFromEvent = (event) => {
  if (!event) return undefined;
  const { detail, target } = event;
  if (detail) {
    if (detail.spotlightId) {
      return detail.spotlightId;
    }
    if (detail.id) {
      return detail.id;
    }
    if (detail.target && detail.target.dataset && detail.target.dataset.spotlightId) {
      return detail.target.dataset.spotlightId;
    }
  }
  if (target && target.dataset && target.dataset.spotlightId) {
    return target.dataset.spotlightId;
  }
  return undefined;
 };
 // Spotlight Focus 추적 로그 [251115]
 // DOM 이벤트 리스너로 대체
@@ -448,7 +426,7 @@ const resolveSpotlightIdFromEvent = (event) => {
 //   });
 // }
-function AppBase(props) {
+function AppBase(_props /* eslint-disable-line no-unused-vars */) {
  const dispatch = useDispatch();
  const httpHeader = useSelector((state) => state.common.httpHeader);
  const httpHeaderRef = useRef(httpHeader);
@@ -650,7 +628,7 @@ function AppBase(props) {
        clearLaunchParams();
      }
    },
-    [dispatch]
+    [dispatch],
  );
  const handleRelaunchEvent = useCallback(() => {
@@ -704,7 +682,7 @@ function AppBase(props) {
    if (typeof window === 'object' && window.PalmSystem) {
      window.PalmSystem.activate();
    }
-  }, [initService, introTermsAgreeRef, dispatch]);
+  }, [initService, introTermsAgreeRef]);
  const visibilityChanged = useCallback(() => {
    // console.log('document is hidden', document.hidden);
@@ -748,7 +726,7 @@ function AppBase(props) {
  }, [dispatch]);
  useEffect(() => {
-    const keyDownEvent = (event) => {
+    const keyDownEvent = (_event /* eslint-disable-line no-unused-vars */) => {
      dispatch(changeAppStatus({ cursorVisible: false }));
      Spotlight.setPointerMode(false);
    };
@@ -757,7 +735,7 @@ function AppBase(props) {
    let lastMoveTime = 0;
    const THROTTLE_MS = 100;
-    const mouseMoveEvent = (event) => {
+    const mouseMoveEvent = (_event /* eslint-disable-line no-unused-vars */) => {
      const now = Date.now();
      if (now - lastMoveTime < THROTTLE_MS) {
        // throttle 기간 내에는 hideCursor만 재시작
@@ -810,8 +788,6 @@ function AppBase(props) {
    let userDataChanged = false;
    if (JSON.stringify(loginUserDataRef.current) !== JSON.stringify(loginUserData)) {
      userDataChanged = true;
    }
    if (!httpHeader || !deviceId) {
 } else if (userDataChanged || httpHeaderRef.current === null) {
      //계정정보 변경시 또는 초기 로딩시
      if (!httpHeader) {
--- a/com.twin.app.shoptime/src/App/deepLinkHandler.js
+++ b/com.twin.app.shoptime/src/App/deepLinkHandler.js
@@ -1,4 +1,3 @@
 import { useDispatch } from "react-redux";
 import { updateHomeInfo } from "../actions/homeActions";
 import { pushPanel } from "../actions/panelActions";
 import {
@@ -11,7 +10,7 @@ import { SpotlightIds } from "../utils/SpotlightIds";
 import { sendLogTotalRecommend } from "../actions/logActions";
 //V2_진입경로코드_진입경로명_MT_노출순번
-export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
+export const handleDeepLink = (contentTarget) => (dispatch, _getState) => {
  console.log("[handleDeepLink] ~ contentTarget: ", contentTarget);
  let linkTpCd; // 진입경로코드
  let linkTpNm; // 진입경로명
@@ -21,7 +20,6 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
  let curationId; // 큐레이션아이디
  let showId; // 방송아이디
  let chanId; // 채널아이디
  let expsOrd; // 노출순번
  let grNumber; // 그룹번호
  let evntId; // 이벤트아이디
  let lgCatCd; // LG카테고리Code
@@ -65,7 +63,6 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
          // V3_진입경로코드_진입경로명_PD_파트너아이디_상품아이디_노출순번_큐레이션아이디
          patnrId = tokens[4]; // 파트너아이디
          prdtId = tokens[5]; // 상품아이디
          expsOrd = tokens[6]; // 노출순번
          curationId = tokens[7]; // 큐레이션아이디
          panelName = panel_names.DETAIL_PANEL;
          deeplinkPanel = "Product Detaoil";
@@ -81,7 +78,6 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
          // V3_진입경로코드_진입경로명_LS_파트너아이디_채널아이디_노출순번_큐레이션아이디
          patnrId = tokens[4]; // 파트너아이디
          chanId = tokens[5]; // 채널아이디
          expsOrd = tokens[6]; // 노출순번
          curationId = tokens[7]; // 큐레이션아이디
          panelName = panel_names.PLAYER_PANEL;
          deeplinkPanel = "Live Show";
@@ -98,7 +94,6 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
          // V3_진입경로코드_진입경로명_VS_파트너아이디_방송아이디_노출순번_큐레이션아이디
          patnrId = tokens[4]; // 파트너아이디
          showId = tokens[5]; // 방송아이디
          expsOrd = tokens[6]; // 노출순번
          curationId = tokens[7]; // 큐레이션아이디
          panelName = panel_names.PLAYER_PANEL;
          deeplinkPanel = "VOD Show";
@@ -119,7 +114,6 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
          patnrId = tokens[4]; // 파트너아이디
          curationId = tokens[5]; // 큐레이션아이디\
          prdtId = tokens[6]; // 상품아이디
          expsOrd = tokens[7]; // 노출순번
          grNumber = tokens[8]; // 그룹번호
          panelName = panel_names.DETAIL_PANEL;
          deeplinkPanel = "Theme Detail";
@@ -140,7 +134,6 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
          patnrId = tokens[4]; // 파트너아이디
          curationId = tokens[5]; // 큐레이션아이디
          expsOrd = tokens[6]; // 노출순번
          panelName = panel_names.DETAIL_PANEL;
          deeplinkPanel = "Hotel Detail";
          panelInfo = {
@@ -157,7 +150,6 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
          patnrId = tokens[4]; // 파트너아이디
          curationId = tokens[5]; // 큐레이션아이디
          expsOrd = tokens[6]; // 노출순번
          panelName = panel_names.HOT_PICKS_PANEL;
          deeplinkPanel = "Hot Picks";
          panelInfo = {
@@ -259,18 +251,22 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
        //   break;
      }
      // 251204 [통합로그] webOS 에서 shoptime 진입점 정보 수집
      const isFirstLaunch = _getState().common.appStatus?.isFirstLaunch;
      dispatch(
        sendLogTotalRecommend({
          contextName: LOG_CONTEXT_NAME.ENTRY,
          messageId: LOG_MESSAGE_ID.ENTRY_INFO,
-          deeplink: deeplinkPanel,
+          entryMenu: linkTpNm,
-          curationId: curationId ? curationId : showId,
+          deeplink: type,
-          productId: prdtId,
+          linkTypeCode: linkTpCd,
-          partnerID: patnrId,
+          curationId: curationId,
          showId: showId,
          channelId: chanId,
          productId: prdtId,
          category: lgCatNm,
-          linkTypeCode: linkTpCd,
+          firstYn: isFirstLaunch ? "Y" : "N",
        })
      );
--- a/com.twin.app.shoptime/src/actions/appDataActions.js
+++ b/com.twin.app.shoptime/src/actions/appDataActions.js
@@ -5,7 +5,7 @@ import { createDebugHelpers } from '../utils/debug';
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
-const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
+const { dlog, derror } = createDebugHelpers(DEBUG_MODE);
 export const addMainIndex = (index) => ({
  type: types.ADD_MAIN_INDEX,
--- a/com.twin.app.shoptime/src/actions/billingActions.js
+++ b/com.twin.app.shoptime/src/actions/billingActions.js
@@ -5,7 +5,7 @@ import { createDebugHelpers } from '../utils/debug';
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
-const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
+const { dlog, derror } = createDebugHelpers(DEBUG_MODE);
 // IF-LGSP-328 : 회원 Billing Address 조회
 export const getMyInfoBillingSearch = (props) => (dispatch, getState) => {
--- a/com.twin.app.shoptime/src/actions/brandActions.js
+++ b/com.twin.app.shoptime/src/actions/brandActions.js
@@ -6,7 +6,7 @@ import { createDebugHelpers } from '../utils/debug';
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
-const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
+const { derror } = createDebugHelpers(DEBUG_MODE);
 // Featured Brands 정보 조회 IF-LGSP-304
 export const getBrandList = () => (dispatch, getState) => {
--- a/com.twin.app.shoptime/src/actions/cancelActions.js
+++ b/com.twin.app.shoptime/src/actions/cancelActions.js
@@ -6,7 +6,7 @@ import { createDebugHelpers } from '../utils/debug';
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
-const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
+const { dlog, derror } = createDebugHelpers(DEBUG_MODE);
 // 회원 주문 취소/반품/교환 사유 조회 (IF-LGSP-347)
 export const getMyinfoOrderCancelColumnsSearch = (params, callback) => (dispatch, getState) => {
--- a/com.twin.app.shoptime/src/actions/cardActions.js
+++ b/com.twin.app.shoptime/src/actions/cardActions.js
@@ -5,7 +5,7 @@ import { createDebugHelpers } from '../utils/debug';
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
-const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
+const { dlog, derror } = createDebugHelpers(DEBUG_MODE);
 // 회원의 등록 카드 정보 조회 IF-LGSP-332
 export const getMyInfoCardSearch = (props) => (dispatch, getState) => {
--- a/com.twin.app.shoptime/src/actions/checkoutActions.js
+++ b/com.twin.app.shoptime/src/actions/checkoutActions.js
@@ -6,7 +6,7 @@ import { createDebugHelpers } from '../utils/debug';
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
-const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
+const { dlog, derror } = createDebugHelpers(DEBUG_MODE);
 // 회원 체크아웃 정보 조회 IF-LGSP-345
 export const getMyInfoCheckoutInfo = (props, callback) => (dispatch, getState) => {
--- a/com.twin.app.shoptime/src/actions/commonActions.js
+++ b/com.twin.app.shoptime/src/actions/commonActions.js
@@ -7,9 +7,7 @@ import Spotlight from '@enact/spotlight';
 import appinfo from '../../webos-meta/appinfo.json';
 import appinfo35 from '../../webos-meta/appinfo35.json';
 import appinfo79 from '../../webos-meta/appinfo79.json';
 import { handleBypassLink } from '../App/bypassLinkHandler';
 import * as lunaSend from '../lunaSend';
 import { initialLocalSettings } from '../reducers/localSettingsReducer';
 import * as Config from '../utils/Config';
 import * as HelperMethods from '../utils/helperMethods';
 import { types } from './actionTypes';
@@ -17,7 +15,7 @@ import { createDebugHelpers } from '../utils/debug';
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
-const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
+const { dlog, derror } = createDebugHelpers(DEBUG_MODE);
 // =======
 // import appinfo from "../../webos-meta/appinfo.json";
 // import appinfo35 from "../../webos-meta/appinfo35.json";
@@ -94,7 +92,7 @@ export const toggleOptionalTermsConfirm = (selected) => ({
  payload: selected,
 });
-export const setExitApp = () => (dispatch, getState) => {
+export const setExitApp = () => (dispatch) => {
  dispatch({ type: types.SET_EXIT_APP });
  dlog('Exiting App...');
@@ -116,7 +114,7 @@ export const loadingComplete = (status) => ({
  payload: status,
 });
-export const alertToast = (payload) => (dispatch, getState) => {
+export const alertToast = (payload) => (dispatch) => {
  if (typeof window === 'object' && !window.PalmSystem) {
    dispatch(changeAppStatus({ toast: true, toastText: payload }));
  } else {
@@ -124,13 +122,13 @@ export const alertToast = (payload) => (dispatch, getState) => {
  }
 };
-export const getSystemSettings = () => (dispatch, getState) => {
+export const getSystemSettings = () => (dispatch) => {
  dlog('getSystemSettings ');
  lunaSend.getSystemSettings(
    { category: 'caption', keys: ['captionEnable'] },
    {
-      onSuccess: (res) => {},
+      onSuccess: () => {},
-      onFailure: (err) => {},
+      onFailure: () => {},
      onComplete: (res) => {
        dlog('getSystemSettings onComplete', res);
        if (res && res.settings) {
@@ -148,7 +146,7 @@ export const getSystemSettings = () => (dispatch, getState) => {
  );
 };
-export const getHttpHeaderForServiceRequest = (onComplete) => (dispatch, getState) => {
+export const getHttpHeaderForServiceRequest = () => (dispatch, getState) => {
  dlog('getHttpHeaderForServiceRequest ');
  const { serverType, ricCodeSetting, languageSetting } = getState().localSettings;
  lunaSend.getHttpHeaderForServiceRequest({
@@ -267,10 +265,9 @@ export const getHttpHeaderForServiceRequest = (onComplete) => (dispatch, getStat
      const mbrNo = res['X-User-Number'];
      lunaSend.getLoginUserData(parameters, {
-        onSuccess: (res) => {
+        onSuccess: (loginRes) => {
-          const userId = res.id ?? '';
+          const userId = loginRes.id ?? '';
-          const userNumber = res.lastSignInUserNo;
+          const profileNick = loginRes.profileNick || userId.split('@')[0];
          const profileNick = res.profileNick || userId.split('@')[0];
          dispatch(
            getLoginUserData({
              userId,
@@ -288,7 +285,7 @@ export const getHttpHeaderForServiceRequest = (onComplete) => (dispatch, getStat
  });
 };
-export const getDeviceId = (onComplete) => (dispatch, getState) => {
+export const getDeviceId = (onComplete) => (dispatch) => {
  lunaSend.getDeviceId(
    { idType: ['LGUDID'] },
    {
@@ -466,7 +463,7 @@ export const setFocus = (spotlightId) => ({
  payload: spotlightId,
 });
-export const focusElement = (spotlightId) => (dispatch, getState) => {
+export const focusElement = (spotlightId) => (dispatch) => {
  dispatch(setFocus(spotlightId));
  if (typeof window === 'object') {
@@ -488,7 +485,7 @@ export const cancelFocusElement = () => () => {
 let broadcastTimer = null;
 export const sendBroadCast =
  ({ type, moreInfo }) =>
-  (dispatch, getState) => {
+  (dispatch) => {
    clearTimeout(broadcastTimer);
    dispatch(changeBroadcastEvent({ type, moreInfo }));
    broadcastTimer = setTimeout(() => {
@@ -545,7 +542,7 @@ export const addReservation = (data) => (dispatch) => {
  });
 };
-export const deleteReservationCallback = (scheduleIdList) => (dispatch) => {
+export const deleteReservationCallback = (scheduleIdList) => () => {
  lunaSend.deleteReservationCallback(scheduleIdList, {
    onSuccess: (res) => {
      // dispatch(alertToast("success" + JSON.stringify(res)));
@@ -636,8 +633,8 @@ export const showError =
 export const deleteOldDb8Datas = () => (dispatch) => {
  for (let i = 1; i < 10; i++) {
    lunaSend.deleteOldDb8(i, {
-      onSuccess: (res) => {},
+      onSuccess: () => {},
-      onFailure: (err) => {},
+      onFailure: () => {},
    });
  }
  dispatch(changeLocalSettings({ oldDb8Deleted: true }));
@@ -683,7 +680,7 @@ let updateNetworkStateJob = new Job((dispatch, connected) => {
  dispatch(changeAppStatus({ isInternetConnected: connected }));
 });
-export const getConnectionStatus = () => (dispatch, getState) => {
+export const getConnectionStatus = () => (dispatch) => {
  lunaSend.getConnectionStatus({
    onSuccess: (res) => {
      dlog('lunasend getConnectionStatus', res);
@@ -712,7 +709,7 @@ export const getConnectionStatus = () => (dispatch, getState) => {
 };
 // macAddress
-export const getConnectionInfo = () => (dispatch, getState) => {
+export const getConnectionInfo = () => (dispatch) => {
  lunaSend.getConnectionInfo({
    onSuccess: (res) => {
      dlog('lunasend getConnectionStatus', res);
@@ -734,7 +731,7 @@ export const getConnectionInfo = () => (dispatch, getState) => {
  });
 };
-export const disableNotification = () => (dispatch, getState) => {
+export const disableNotification = () => {
  lunaSend.disableNotification({
    onSuccess: (res) => {
      dlog('lunasend disable notification success', res);
@@ -748,7 +745,7 @@ export const disableNotification = () => (dispatch, getState) => {
  });
 };
-export const enableNotification = () => (dispatch, getState) => {
+export const enableNotification = () => {
  lunaSend.enableNotification({
    onSuccess: (res) => {
      dlog('lunasend enable notification success', res);
--- a/com.twin.app.shoptime/src/actions/convertActions.js
+++ b/com.twin.app.shoptime/src/actions/convertActions.js
@@ -31,7 +31,7 @@ export const convertPdfToImage =
        const timeoutError = new Error(
          `Conversion timeout after ${timeout}ms (attempt ${attempts})`
        );
-        dwarn(`⏱️ [EnergyLabel] Timeout on attempt ${attempts}:`, timeoutError.message);
+        void dwarn(`⏱️ [EnergyLabel] Timeout on attempt ${attempts}:`, timeoutError.message);
        // 재시도 가능한 경우
        if (attempts < maxRetries + 1) {
@@ -39,7 +39,7 @@ export const convertPdfToImage =
          attemptConversion();
        } else {
          // 최종 실패
-          derror(`❌ [EnergyLabel] Final failure after ${attempts} attempts:`, pdfUrl);
+          void derror(`❌ [EnergyLabel] Final failure after ${attempts} attempts:`, pdfUrl);
          dispatch({
            type: types.CONVERT_PDF_TO_IMAGE_FAILURE,
            payload: { pdfUrl, error: timeoutError },
@@ -64,17 +64,14 @@ export const convertPdfToImage =
        if (retCode !== undefined && retCode !== 0 && retCode !== '0') {
          const error = new Error(`API Error: retCode=${retCode}`);
-          dwarn(`⚠️ [EnergyLabel] API returned error on attempt ${attempts}:`, retCode);
+          void dwarn(`⚠️ [EnergyLabel] API returned error on attempt ${attempts}:`, retCode);
          // retCode 에러도 재시도
          if (attempts < maxRetries + 1) {
-            dlog(`🔄 [EnergyLabel] Retrying due to API error... (${attempts}/${maxRetries + 1})`);
+            void dlog(`🔄 [EnergyLabel] Retrying due to API error... (${attempts}/${maxRetries + 1})`);
            attemptConversion();
          } else {
-            derror(
+                      void derror(`❌ [EnergyLabel] Final failure after ${attempts} attempts (API error):`, pdfUrl);
              `❌ [EnergyLabel] Final failure after ${attempts} attempts (API error):`,
              pdfUrl
            );
            dispatch({
              type: types.CONVERT_PDF_TO_IMAGE_FAILURE,
              payload: { pdfUrl, error },
@@ -111,7 +108,7 @@ export const convertPdfToImage =
            imageUrl = URL.createObjectURL(blob);
          }
-          dlog(`✅ [EnergyLabel] Conversion successful on attempt ${attempts}:`, pdfUrl);
+          void dlog(`✅ [EnergyLabel] Conversion successful on attempt ${attempts}:`, pdfUrl);
          dispatch({
            type: types.CONVERT_PDF_TO_IMAGE_SUCCESS,
            payload: { pdfUrl, imageUrl },
@@ -119,16 +116,16 @@ export const convertPdfToImage =
          callback && callback(null, imageUrl);
        } catch (error) {
-          derror(`❌ [EnergyLabel] Image creation failed on attempt ${attempts}:`, error);
+          void derror(`❌ [EnergyLabel] Image creation failed on attempt ${attempts}:`, error);
          // 이미지 생성 실패도 재시도
          if (attempts < maxRetries + 1) {
-            dlog(
+                        void dlog(
                          `🔄 [EnergyLabel] Retrying due to image creation error... (${attempts}/${maxRetries + 1})`
                        );
            attemptConversion();
          } else {
-            derror(
+            void derror(
              `❌ [EnergyLabel] Final failure after ${attempts} attempts (image error):`,
              pdfUrl
            );
@@ -147,14 +144,14 @@ export const convertPdfToImage =
          timeoutId = null;
        }
-        dwarn(`⚠️ [EnergyLabel] Network error on attempt ${attempts}:`, error.message);
+        void dwarn(`⚠️ [EnergyLabel] Network error on attempt ${attempts}:`, error.message);
        // 네트워크 에러도 재시도
        if (attempts < maxRetries + 1) {
-          dlog(`🔄 [EnergyLabel] Retrying due to network error... (${attempts}/${maxRetries + 1})`);
+          void dlog(`🔄 [EnergyLabel] Retrying due to network error... (${attempts}/${maxRetries + 1})`);
          attemptConversion();
        } else {
-          derror(
+          void derror(
            `❌ [EnergyLabel] Final failure after ${attempts} attempts (network error):`,
            pdfUrl
          );
@@ -188,7 +185,7 @@ export const convertPdfToImage =
 * @param {Array<string>} pdfUrls - 변환할 PDF URL 배열
 * @param {function} callback - 완료 후 실행할 콜백 (errors, results)
 */
-export const convertMultiplePdfs = (pdfUrls, callback) => async (dispatch, getState) => {
+export const convertMultiplePdfs = (pdfUrls, callback) => async (dispatch) => {
  if (!pdfUrls || pdfUrls.length === 0) {
    callback && callback(null, []);
    return;
--- a/com.twin.app.shoptime/src/actions/couponActions.js
+++ b/com.twin.app.shoptime/src/actions/couponActions.js
@@ -6,7 +6,7 @@ import { createDebugHelpers } from '../utils/debug';
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
-const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
+const { dlog, derror } = createDebugHelpers(DEBUG_MODE);
 // IF-LGSP-339 : 회원 다운로드 쿠폰 정보 조회
 export const getProductCouponInfo = (props) => (dispatch, getState) => {
--- a/com.twin.app.shoptime/src/api/TAxios.js
+++ b/com.twin.app.shoptime/src/api/TAxios.js
@@ -348,8 +348,14 @@ export const TAxiosAdvancedPromise = (
          clearTimeout(timeoutId);
          console.error(`TAxiosPromise error on attempt ${attempts} for ${baseUrl}:`, error);
          // Check if the error is due to token expiration
          // TAxios already handles token refresh and queueing for these codes (401, 402, 501)
          // So we should NOT retry immediately in this loop, but let TAxios handle it.
          const retCode = error?.data?.retCode;
          const isTokenError = retCode === 401 || retCode === 402 || retCode === 501;
          // 재시도 로직
-          if (attempts < maxAttempts) {
+          if (attempts < maxAttempts && !isTokenError) {
            console.log(`Retrying in ${retryDelay}ms... (${attempts}/${maxAttempts})`);
            setTimeout(() => {
              attemptRequest();
--- a/com.twin.app.shoptime/src/components/MediaPlayer/MediaSlider.module.less
+++ b/com.twin.app.shoptime/src/components/MediaPlayer/MediaSlider.module.less
@@ -19,7 +19,6 @@
  margin-left: 130px;
  margin-right: 130px;
  flex: 1 0 auto;  
  width: 1540px;
  height: 6px;
  &.videoVertical {
@@ -31,10 +30,11 @@
  }
  .mediaSlider {
-    margin: 0 @slider-padding-h;
+    margin: 0 0 0 @slider-padding-h;
    padding: @slider-padding-v 0;
    height: @sand-mediaplayer-slider-height;
    right: 154px;
    width: 1466px;
    // Add a tap area that extends to the edges of the screen, to make the slider more accessible
    &::before {
      content: "";
--- a/com.twin.app.shoptime/src/components/MediaPlayer/Times.module.less
+++ b/com.twin.app.shoptime/src/components/MediaPlayer/Times.module.less
@@ -7,22 +7,28 @@
  position: absolute;
  font-family: @baseFont;
  width: 100%;  
-  top: 22px;
+  right: 90px;
-  right: 30px;
+  bottom: -5px;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
  text-align: right;
-
+  letter-spacing: -1px;
  .separator {
    position: absolute;
-    right: 110px;
+    right: 105px;
    bottom: -5px;
  }
  .currentTime {
    position: absolute;
-    right: 140px;
+    right: 130px;
    bottom: -5px;
  }
  .totalTime {
    position: absolute;
    bottom: -5px;
    right:0px;
  }
  > * {
    color: #fff;
  }
--- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
@@ -4,72 +4,61 @@ import React, {
  useMemo,
  useRef,
  useState,
-} from 'react';
+} from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
 import {
  AsYouTypeFormatter,
  PhoneNumberFormat,
  PhoneNumberUtil,
-} from 'google-libphonenumber';
+} from "google-libphonenumber";
-import {
+import { useDispatch, useSelector } from "react-redux";
  useDispatch,
  useSelector,
 } from 'react-redux';
-import {
+import { off, on } from "@enact/core/dispatcher";
-  off,
+import spotlight, { Spotlight } from "@enact/spotlight";
-  on,
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-} from '@enact/core/dispatcher';
+import { Spottable } from "@enact/spotlight/Spottable";
 import spotlight, { Spotlight } from '@enact/spotlight';
 import {
  SpotlightContainerDecorator,
 } from '@enact/spotlight/SpotlightContainerDecorator';
 import { Spottable } from '@enact/spotlight/Spottable';
-import defaultImage from '../../../assets/images/img-thumb-empty-144@3x.png';
+import defaultImage from "../../../assets/images/img-thumb-empty-144@3x.png";
-import { types } from '../../actions/actionTypes';
+import { types } from "../../actions/actionTypes";
-import {
+import { clearSMS, sendSms } from "../../actions/appDataActions";
  clearSMS,
  sendSms,
 } from '../../actions/appDataActions';
 import {
  changeLocalSettings,
  setHidePopup,
  setShowPopup,
-} from '../../actions/commonActions';
+} from "../../actions/commonActions";
 import {
  clearRegisterDeviceInfo,
  getDeviceAdditionInfo,
  registerDeviceInfo,
-} from '../../actions/deviceActions';
+} from "../../actions/deviceActions";
 import {
  clearCurationCoupon,
  setEventIssueReq,
-} from '../../actions/eventActions';
+} from "../../actions/eventActions";
 import {
  sendLogShopByMobile,
  sendLogTotalRecommend,
-} from '../../actions/logActions';
+} from "../../actions/logActions";
 import {
  ACTIVE_POPUP,
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  LOG_TP_NO,
-} from '../../utils/Config';
+} from "../../utils/Config";
 import {
  $L,
  decryptPhoneNumber,
  encryptPhoneNumber,
  formatLocalDateTime,
-} from '../../utils/helperMethods';
+} from "../../utils/helperMethods";
-import CustomImage from '../CustomImage/CustomImage';
+import CustomImage from "../CustomImage/CustomImage";
-import TButton from '../TButton/TButton';
+import TButton from "../TButton/TButton";
-import TPopUp from '../TPopUp/TPopUp';
+import TPopUp from "../TPopUp/TPopUp";
-import HistoryPhoneNumber from './HistoryPhoneNumber/HistoryPhoneNumber';
+import HistoryPhoneNumber from "./HistoryPhoneNumber/HistoryPhoneNumber";
-import css from './MobileSendPopUp.module.less';
+import css from "./MobileSendPopUp.module.less";
-import PhoneInputSection from './PhoneInputSection';
+import PhoneInputSection from "./PhoneInputSection";
-import SMSNumKeyPad from './SMSNumKeyPad';
+import SMSNumKeyPad from "./SMSNumKeyPad";
 const SECRET_KEY = "fy7BTKuM9eeTQqEC9sF3Iw5qG43Aaip";
@@ -463,7 +452,10 @@ export default function MobileSendPopUp({
      const logParams = {
        status: "send",
        nowMenu: nowMenu,
-        partner: patncNm,
+        partner: patncNm ?? shopByMobileLogRef?.current?.patncNm,
        productId: prdtId ?? shopByMobileLogRef?.current?.prdtId,
        productTitle: title ?? shopByMobileLogRef?.current?.prdtNm,
        brand: shopByMobileLogRef?.current?.brndNm,
        contextName: LOG_CONTEXT_NAME.SHOPBYMOBILE,
        messageId: LOG_MESSAGE_ID.SMB,
      };
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
@@ -140,8 +140,9 @@ export default memo(function TItemCard({
            shelfTitle: shelfTitle,
            productId: productId,
            productTitle: productName,
-            showId: showId,
+            showId: showId ?? contentId,
-            showTitle: showTitle,
+            showTitle: showTitle ?? contentTitle,
            contentId: contentId,
            nowProductId: nowProductId,
            nowCategory: nowCategory,
            nowProductTitle: nowProductTitle,
@@ -159,7 +160,7 @@ export default memo(function TItemCard({
        }
      }
    },
-    [onClick, disabled, contextName, messageId]
+    [onClick, disabled, contextName, messageId, contentId, contentTitle]
  );
  const _onFocus = useCallback(() => {
    if (onFocus) {
--- a/com.twin.app.shoptime/src/components/TToast/TToastEnhanced.jsx
+++ b/com.twin.app.shoptime/src/components/TToast/TToastEnhanced.jsx
@@ -58,11 +58,15 @@ export default function TToastEnhanced({
  const timerRef = useRef(null);
  const progressRef = useRef(null);
  const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible);
  const { popupVisible } = useSelector((state) => state.common.popup);
  // BuyOption 포커스 이탈 감지 핸들러
  const handleBuyOptionBlur = (e) => {    
    // 포커스가 BuyOption 컴포넌트 외부로 이동했는지 확인    
-    if (!e.currentTarget.contains(e.relatedTarget) && !cursorVisible) {
+    if(popupVisible){
      return;
    }
    if (!e.currentTarget.contains(e.relatedTarget)) {
      console.log('[TToastEnhanced] Focus left BuyOption - closing toast');
      handleClose();
    }    
@@ -123,9 +127,11 @@ export default function TToastEnhanced({
            console.log(
              `[TToastEnhanced] Focus left ${type} after receiving focus - closing toast`
            );
            if(type !== "buyOption"){
              handleClose();
            }
          }
        }
      };
      // focusin 이벤트로 포커스 변경 감지
@@ -212,7 +218,7 @@ export default function TToastEnhanced({
      {...rest}
    >
      {type === 'buyOption' ? (
-        <div ref={buyOptionRef} onBlur={handleBuyOptionBlur}>
+        <div ref={buyOptionRef} onBlur={cursorVisible ? handleBuyOptionBlur : null}>
          <BuyOption
            productInfo={productInfo}
            selectedPatnrId={selectedPatnrId}
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -172,8 +172,23 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
        break;
      //브랜드
      case 10300:
-        result =
+        result = [
-          data?.shortFeaturedBrands?.map((item) => ({
+          // NBCU 브랜드 (하드코딩)
          {
            icons: FeaturedBrandIcon,
            id: 'nbcu-brand',
            path: 'assets/images/featuredBrands/nbcu.svg',
            patncNm: 'NBCU',
            spotlightId: 'spotlight_featuredbrand_nbcu',
            target: [
              {
                name: panel_names.FEATURED_BRANDS_PANEL,
                panelInfo: { from: 'gnb', patnrId: 'NBCU' },
              },
            ],
          },
          // API에서 가져온 기존 브랜드들
          ...(data?.shortFeaturedBrands?.map((item) => ({
            icons: FeaturedBrandIcon,
            id: item.patnrId,
            path: item.patncLogoPath,
@@ -185,7 +200,8 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
                panelInfo: { from: 'gnb', patnrId: item.patnrId },
              },
            ],
-          })) || [];
+          })) || []),
        ];
        break;
      //
      case 10600:
@@ -304,6 +320,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
              title: item.title,
              path: item.path,
              patncNm: item.patncNm,
              icons: item.icons,
              target: item.target,
              spotlightId: `secondDepth-${item.id}`,
            }));
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/NbcuIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/NbcuIcon.jsx
@@ -0,0 +1,42 @@
 import React from "react";
 import { scaleW } from "../../../utils/helperMethods";
 import useConvertThemeColor from "./useConvertThemeColor";
 const NbcuIcon = ({ iconType = "normal" }) => {
  const themeColor = useConvertThemeColor({ iconType });
  return (
    <svg
      width={scaleW(48)}
      height={scaleW(48)}
      viewBox="0 0 48 48"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="24" cy="24" r="22" fill={themeColor} opacity="0.1" stroke={themeColor} strokeWidth="0.5" />
      <text
        x="24"
        y="32"
        textAnchor="middle"
        fill={themeColor}
        fontSize="18"
        fontWeight="bold"
        fontFamily="Arial, sans-serif"
      >
        NBC
      </text>
      <text
        x="24"
        y="40"
        textAnchor="middle"
        fill={themeColor}
        fontSize="10"
        fontFamily="Arial, sans-serif"
      >
        U
      </text>
    </svg>
  );
 };
 export default NbcuIcon;
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
@@ -776,6 +776,7 @@ const VideoPlayerBase = class extends React.Component {
    this.sliderKnobProportion = 0;
    this.mediaControlsSpotlightId = props.spotlightId + '_mediaControls';
    this.jumpButtonPressed = null;
    this.focusTimer = null;
    // Re-render-necessary State
    this.state = {
@@ -1038,6 +1039,7 @@ const VideoPlayerBase = class extends React.Component {
    this.stopDelayedTitleHide();
    this.stopDelayedFeedbackHide();
    this.stopDelayedMiniFeedbackHide();
    if (this.focusTimer) clearTimeout(this.focusTimer);
    this.announceJob.stop();
    this.renderBottomControl.stop();
    this.slider5WayPressJob.stop();
@@ -2603,11 +2605,11 @@ const VideoPlayerBase = class extends React.Component {
      this.showControls();
      if (this.state.lastFocusedTarget) {
-        setTimeout(() => {
+        this.focusTimer = setTimeout(() => {
          Spotlight.focus(this.state.lastFocusedTarget);
        });
      } else {
-        setTimeout(() => {
+        this.focusTimer = setTimeout(() => {
          Spotlight.focus(SpotlightIds.PLAYER_TAB_BUTTON);
        });
      }
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less
@@ -692,10 +692,10 @@
        // display: flex;
        position: relative;
        align-items: center;
        margin-left: 60px;
        margin-right: 59px;
        height: 70px;
-        bottom: -20px;
+        width:1800px;
        margin-left:60px;
        bottom:92px;
        > *:first-child {
          text-align: right;
        }
--- a/com.twin.app.shoptime/src/views/CartPanel/CartEmpty.module.less
+++ b/com.twin.app.shoptime/src/views/CartPanel/CartEmpty.module.less
@@ -6,7 +6,7 @@
  padding-top: 60px;
 }
 .emptyBox {
-  width: 1320px;
+  width: 1200px;
  height: 288px;
  text-align: center;
  display: flex;
@@ -39,5 +39,6 @@
 }
 .bestSeller {
  margin-top: 70px;
-  width: 1320px;
+  width: 1200px;
  padding-right:10px;
 }
--- a/com.twin.app.shoptime/src/views/CartPanel/CartSidebar.jsx
+++ b/com.twin.app.shoptime/src/views/CartPanel/CartSidebar.jsx
@@ -341,24 +341,24 @@ const CartSidebar = ({ cartInfo }) => {
      <div className={css.summarySection}>
        <div className={css.header}>
          <div className={css.title}>Subtotal</div>
-          <span className={css.itemCount}>{itemCount} Items</span>
+          <span className={css.itemCount}>{userNumber ? itemCount : 0} Items</span>
        </div>
        <div className={css.borderLine} />
        <div className={css.priceList}>
          <div className={css.priceItem}>
            <span className={css.label}>Subtotal</span>
-            <span className={css.value}>{formatPrice(subtotal)}</span>
+            <span className={css.value}>{userNumber ? formatPrice(subtotal) : 0}</span>
          </div>
          <div className={css.priceItem}>
            <span className={css.label}>Option</span>
            <span className={css.value}>
-              {formatPrice(optionTotal)}              
+              {userNumber ? formatPrice(optionTotal) : 0}
            </span>
          </div>
          <div className={css.priceItem}>
            <span className={css.label}>S&H</span>
            <span className={css.value}>
-              {formatPrice(shippingHandling)}
+              {userNumber ? formatPrice(shippingHandling) : 0}
            </span>
          </div>
        </div>
@@ -369,7 +369,7 @@ const CartSidebar = ({ cartInfo }) => {
            <span className={css.totalLabelSub}>(Before Tax)</span>
          </span>
          <span className={css.totalValue}>
-            {formatPrice(orderTotalBeforeTax)}
+            {userNumber ? formatPrice(orderTotalBeforeTax) : 0}
          </span>
        </div>
      </div>
@@ -391,7 +391,7 @@ const CartSidebar = ({ cartInfo }) => {
          className={css.checkoutButton}
          spotlightId="cart-checkout-button"
          onClick={handleCheckoutClick}
-          disabled={itemsToCalculate.length === 0}
+          disabled={checkedItems.length === 0 || (itemsToCalculate.length === 0 || !userNumber)}
        >
          Checkout
        </TButton>
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -1,25 +1,46 @@
 // src/views/DetailPanel/DetailPanel.new.jsx
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, {
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
 } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import {
  useDispatch,
  useSelector,
 } from 'react-redux';
 import Spotlight from '@enact/spotlight';
 import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
 import { getDeviceAdditionInfo } from '../../actions/deviceActions';
 import { getThemeCurationDetailInfo, updateHomeInfo } from '../../actions/homeActions';
 import { getMainCategoryDetail, getMainYouMayLike } from '../../actions/mainActions';
 import { finishModalMediaForce } from '../../actions/mediaActions';
 import { popPanel, updatePanel } from '../../actions/panelActions';
 import {
-// <<<<<<< HEAD
+  getThemeCurationDetailInfo,
  updateHomeInfo,
 } from '../../actions/homeActions';
 import {
  getMainCategoryDetail,
  getMainYouMayLike,
 } from '../../actions/mainActions';
 import { finishModalMediaForce } from '../../actions/mediaActions';
 import {
  popPanel,
  updatePanel,
 } from '../../actions/panelActions';
 import {
  finishVideoPreview,
  pauseFullscreenVideo,
  resumeFullscreenVideo,
  pauseModalVideo,
  resumeFullscreenVideo,
  resumeModalVideo,
 } from '../../actions/playActions';
-import { clearProductDetail, getProductOptionId } from '../../actions/productActions';
+import {
  clearProductDetail,
  getProductOptionId,
 } from '../../actions/productActions';
 import { clearAllToasts } from '../../actions/toastActions';
 import TBody from '../../components/TBody/TBody';
 import TPanel from '../../components/TPanel/TPanel';
@@ -31,6 +52,7 @@ import THeaderCustom from './components/THeaderCustom';
 import css from './DetailPanel.module.less';
 import ProductAllSection from './ProductAllSection/ProductAllSection';
 import ThemeItemListOverlay from './ThemeItemListOverlay/ThemeItemListOverlay';
 // =======
 //   changeAppStatus,
 //   changeLocalSettings,
@@ -929,12 +951,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
    }
  }, [themeData, selectedIndex]);
-  // 타이틀과 aria-label 메모이제이션 (성능 최적화)
+  // 타이틀과 aria-label 메모이제이션 (성능 최적화 // themeTitle과 haederTitle 분리.)
  const headerTitle = useMemo(
    () =>
      fp.pipe(
-        () => ({ panelPrdtId, productData, panelType, themeData }),
+        () => ({ panelPrdtId, productData }),
-        ({ panelPrdtId, productData, panelType, themeData }) => {
+        ({ panelPrdtId, productData }) => {
          const productTitle = fp.pipe(
            () => ({ panelPrdtId, productData }),
            ({ panelPrdtId, productData }) =>
@@ -943,7 +965,17 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
                ? fp.pipe(() => productData, fp.get('prdtNm'))()
                : null
          )();
          return productTitle || '';
        }
      )(),
    [panelPrdtId, productData]
  );
  const themeHeaderTitle = useMemo(
    () =>
      fp.pipe(
        () => ({ panelType, themeData }),
        ({ panelType, themeData }) => {
          const themeTitle = fp.pipe(
            () => ({ panelType, themeData }),
            ({ panelType, themeData }) =>
@@ -952,12 +984,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
                : null
          )();
-          return productTitle || themeTitle || '';
+          return themeTitle || '';
        }
      )(),
-    [panelPrdtId, productData, panelType, themeData]
+    [panelType, themeData]
  );
  const ariaLabel = useMemo(
    () =>
      fp.pipe(
@@ -1071,6 +1105,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
          className={css.header}
          prdtId={productData?.prdtId}
          title={headerTitle}
          themeTitle={themeHeaderTitle}
          selectedIndex={selectedIndex}
          type={panelInfo?.type === "theme" ? "theme" : null}
          onBackButton
          onClick={onBackClick(false)}
          onBackButtonFocus={onBackButtonFocus}
@@ -1079,8 +1116,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
          onSpotlightLeft={onSpotlightUpTButton}
          marqueeDisabled={false}
          ariaLabel={ariaLabel}
-          logoImg={productData?.patncLogoPath}
+          logoImg={productData?.patncLogoPath ? productData?.patncLogoPath : themeData?.productInfos[0]?.patncLogoPath}
          patnrId={panelPatnrId}
          themeData={themeData}
        />
        <TBody
          className={css.tbody}
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
@@ -38,11 +38,19 @@ import {
  getProductCouponSearch,
  getProductCouponTotDownload,
 } from '../../../actions/couponActions.js';
 import {
  sendLogDetail,
  sendLogGNB,
  sendLogProductDetail,
  sendLogShopByMobile,
  sendLogTotalRecommend,
 } from '../../../actions/logActions';
 // import { pushPanel } from '../../../actions/panelActions';
 import {
  minimizeModalMedia,
  restoreModalMedia,
 } from '../../../actions/mediaActions';
 import { updatePanel } from '../../../actions/panelActions';
 import { pauseFullscreenVideo } from '../../../actions/playActions';
 import { resetShowAllReviews } from '../../../actions/productActions';
 import {
@@ -59,7 +67,12 @@ import TVirtualGridList
 import useReviews from '../../../hooks/useReviews/useReviews';
 import useScrollTo from '../../../hooks/useScrollTo';
 import { BUYNOW_CONFIG } from '../../../utils/BuyNowConfig';
-import { panel_names } from '../../../utils/Config';
+import {
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  LOG_TP_NO,
  panel_names,
 } from '../../../utils/Config';
 import * as Config from '../../../utils/Config.js';
 import {
  andThen,
@@ -76,7 +89,10 @@ import {
  tap,
  when,
 } from '../../../utils/fp';
-import { $L } from '../../../utils/helperMethods';
+import {
  $L,
  formatGMTString,
 } from '../../../utils/helperMethods';
 import { SpotlightIds } from '../../../utils/SpotlightIds';
 import ShowUserReviews from '../../UserReview/ShowUserReviews';
 // import CustomScrollbar from '../components/CustomScrollbar/CustomScrollbar';
@@ -242,6 +258,7 @@ export default function ProductAllSection({
  // Redux 상태
  const webOSVersion = useSelector((state) => state.common.appStatus.webOSVersion);
  const groupInfos = useSelector((state) => state.product.groupInfo);
  const nowMenu = useSelector((state) => state.common.menu.nowMenu);
  // YouMayLike 데이터는 API 응답 시간이 걸리므로 직접 구독
  const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
@@ -249,6 +266,7 @@ export default function ProductAllSection({
  const { partnerCoupon } = useSelector((state) => state.coupon.productCouponSearchData);
  const { userNumber } = useSelector((state) => state.common.appStatus.loginUserData);
  const { popupVisible, activePopup } = useSelector((state) => state.common.popup);
  const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible);
  // ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략)
  const [productVideoVersion, setProductVideoVersion] = useState(1);
  // 비디오 재생 여부 flag (재생 전에는 minimize/restore 로직 비활성화)
@@ -263,6 +281,18 @@ export default function ProductAllSection({
  const [isShowQRCode, setIsShowQRCode] = useState(true);
  const timerRef = useRef(null);
  // sendLogGNB용 entryMenu
  const entryMenuRef = useRef(null);
  // 출처 정보 통합 (향후 확장성 대비)
  // YouMayLike 상품이 아닐 경우 fromPanel을 초기화하여 오기 방지
  const fromPanel = useMemo(() => ({
    fromYouMayLike: panelInfo?.fromPanel?.fromYouMayLike || false,
    // 향후 다른 출처 플래그들 추가 가능
    // fromRecommendation: panelInfo?.fromPanel?.fromRecommendation || false,
    // fromSearch: panelInfo?.fromPanel?.fromSearch || false,
  }), [panelInfo?.fromPanel?.fromYouMayLike]);
  //구매 하단 토스트 노출 확인을 위한 용도
  const [openToast, setOpenToast] = useState(false);
@@ -652,6 +682,116 @@ export default function ProductAllSection({
    dispatch(resetShowAllReviews());
  }, []); // 빈 dependency array = 마운트 시에만 실행
  // 제품 상세 버튼 클릭 핸들러 - Source의 handleIndicatorOptions와 동일한 기능
  const handleIndicatorOptions = useCallback(() => {
    if (productData && Object.keys(productData).length > 0) {
      // sendLogDetail - 제품 상세 버튼 클릭 로깅 (Source와 동일)
      const detailLogParams = {
        curationId: productData?.curationId ?? "",
        curationNm: productData?.curationNm ?? "",
        inDt: "",
        linkTpCd: panelInfo?.linkTpCd ?? "",
        logTpNo: LOG_TP_NO.DETAIL.DETAIL_BUTTON_CLICK,
        patncNm: productData?.patncNm ?? "",
        patnrId: productData?.patnrId ?? "",
      };
      dispatch(sendLogDetail(detailLogParams));
      // sendLogTotalRecommend - 추천 버튼 클릭 로깅 (Source와 동일)
      let menuType;
      if (isTravelProductVisible) {
        menuType = Config.LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL;
      } else if (isGroupProductVisible) {
        menuType = Config.LOG_MENU.DETAIL_PAGE_GROUP_DETAIL;
      } else if (isBillingProductVisible) {
        menuType = Config.LOG_MENU.DETAIL_PAGE_BILLING_PRODUCT_DETAIL;
      } else {
        menuType = Config.LOG_MENU.DETAIL_PAGE_PRODUCT_DETAIL;
      }
      dispatch(sendLogTotalRecommend({
        menu: menuType,
        buttonTitle: "DESCRIPTION",
        contextName: LOG_CONTEXT_NAME.DETAILPAGE,
        messageId: LOG_MESSAGE_ID.BUTTONCLICK,
      }));
    }
  }, [productData, panelInfo, isBillingProductVisible, isGroupProductVisible, isTravelProductVisible]);
  // sendLogGNB 로깅 - Source의 DetailPanel 컴포넌트들과 동일한 패턴
  useEffect(() => {
    if (!entryMenuRef.current) entryMenuRef.current = nowMenu;
    // BUY NOW 버튼 활성화 상태에 따른 메뉴 결정 (Source SingleProduct vs UnableProduct 패턴)
    let baseMenu;
    if (isTravelProductVisible) {
      baseMenu = Config.LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL;
    } else if (isGroupProductVisible) {
      baseMenu = Config.LOG_MENU.DETAIL_PAGE_GROUP_DETAIL;
    } else if (isBillingProductVisible) {
      // BUY NOW 버튼 활성화 = SingleProduct
      baseMenu = Config.LOG_MENU.DETAIL_PAGE_BILLING_PRODUCT_DETAIL;
    } else {
      // BUY NOW 버튼 비활성화 = UnableProduct
      baseMenu = Config.LOG_MENU.DETAIL_PAGE_PRODUCT_DETAIL;
    }
    // YouMayLike에서 상품 선택 시 메뉴 변경 (Source의 isYouMayLikeOpened와 동일 패턴)
    const menu = (fromPanel?.fromYouMayLike !== undefined && fromPanel?.fromYouMayLike === true)
      ? `${baseMenu}/${Config.LOG_MENU.DETAIL_PAGE_YOU_MAY_LIKE}`
      : baseMenu;
    dispatch(sendLogGNB(menu));
  // sendLogGNB 전송 후 플래그 초기화 (1회 사용 후 비활성화)
  if (fromPanel?.fromYouMayLike === true) {
    dispatch(updatePanel({
      name: panel_names.DETAIL_PANEL,
      panelInfo: {
        ...panelInfo,
        fromPanel: {
          fromYouMayLike: false  // 플래그 초기화
        }
      }
    }));
  }
 }, [fromPanel?.fromYouMayLike, isBillingProductVisible, isUnavailableProductVisible, isGroupProductVisible, isTravelProductVisible]); // BUY NOW 상태 변경 시 재실행
  // sendLogProductDetail 로깅 - Source의 productData 변경 감지와 동일한 패턴
  useEffect(() => {
    if (productData && Object.keys(productData).length > 0) {
      const params = {
        befPrice: productData?.priceInfo?.split("|")[0],
        curationId: productData?.curationId ?? "",
        curationNm: productData?.curationNm ?? "",
        entryMenu: entryMenuRef.current,
        expsOrd: "1",
        inDt: formatGMTString(new Date()),
        lastPrice: productData?.priceInfo?.split("|")[1],
        lgCatCd: productData?.catCd ?? "",
        lgCatNm: productData?.catNm ?? "",
        linkTpCd: panelInfo?.linkTpCd ?? "",
        logTpNo: isTravelProductVisible
          ? Config.LOG_TP_NO.PRODUCT.TRAVEL_DETAIL
          : isGroupProductVisible
          ? Config.LOG_TP_NO.PRODUCT.GROUP_DETAIL
          : isBillingProductVisible
          ? Config.LOG_TP_NO.PRODUCT.BILLING_PRODUCT_DETAIL
          : Config.LOG_TP_NO.PRODUCT.PRODUCT_DETAIL,
        patncNm: productData?.patncNm ?? "",
        patnrId: productData?.patnrId ?? "",
        prdtId: productData?.prdtId ?? "",
        prdtNm: productData?.prdtNm ?? "",
        revwGrd: productData?.revwGrd ?? "",
        rewdAplyFlag: productData.priceInfo?.split("|")[2],
        tsvFlag: productData?.todaySpclFlag ?? "",
      };
      return () => dispatch(sendLogProductDetail(params));
    }
  }, [productData, entryMenuRef.current, panelInfo?.linkTpCd, isBillingProductVisible, isGroupProductVisible, isTravelProductVisible]); // productData 변경 시 재실행
  // [251115] 주석 처리: MediaPanel에서 이미 포커스 이동을 처리하므로
  // ProductAllSection의 자동 포커스는 포커스 탈취를 일으킬 수 있음
  // useEffect(() => {
@@ -674,6 +814,35 @@ export default function ProductAllSection({
      // console.log('[BuyNow] Buy Now button clicked');
      e.stopPropagation();
      // 🚀 SingleOption.jsx의 sendLogTotalRecommend 로직 추가
      if (productData && Object.keys(productData).length > 0) {
        const { priceInfo, patncNm, prdtId, prdtNm, brndNm, catNm, showId, showNm } = productData;
        const regularPrice = priceInfo?.split("|")[0];
        const discountPrice = priceInfo?.split("|")[1];
        const discountRate = priceInfo?.split("|")[4];
        // Option 정보는 현재 선택된 옵션이 없으므로 기본값 사용
        const prodOptCval = ""; // 실제로는 선택된 옵션 값이 들어가야 함
        dispatch(
          sendLogTotalRecommend({
            nowMenu: nowMenu,
            productId: prdtId,
            productTitle: prdtNm,
            partner: patncNm,
            price: discountRate ? discountPrice : regularPrice,
            discount: discountRate,
            brand: brndNm,
            productOption: prodOptCval,
            category: catNm,
            contextName: Config.LOG_CONTEXT_NAME.DETAILPAGE,
            messageId: Config.LOG_MESSAGE_ID.BUY_NOW,
            showId: showId ?? "",
            showNm: showNm ?? "",
          })
        );
      }
      // console.log('[ProductAllSection] 🛒 BUY NOW clicked - productData:', {
      //   prdtId: productData?.prdtId,
      //   patnrId: productData?.patnrId,
@@ -705,11 +874,11 @@ export default function ProductAllSection({
        setOpenToast(true);
      }
    },
-    [dispatch, productData, openToast]
+    [dispatch, productData, openToast, nowMenu]
  );
  //닫히도록
-  const handleCloseToast = useCallback(() => {
+  const handleCloseToast = useCallback((e) => {    
    // 팝업이 열려있으면 닫지 않음
    if (popupVisible) {
      return; // 팝업이 활성이면 무시
@@ -718,6 +887,15 @@ export default function ProductAllSection({
    setOpenToast(false);
  }, [dispatch, popupVisible]);
  const handleFocus = useCallback((e)=>{
    // 팝업이 열려있으면 닫지 않음
    if (popupVisible && cursorVisible) {
      return; // 팝업이 활성이면 무시
    }
    dispatch(clearAllToasts());
    setOpenToast(false);
  },[dispatch, popupVisible, cursorVisible])
  // 스크롤 컨테이너의 클릭 이벤트 추적용 로깅
  const handleScrollContainerClick = useCallback((e) => {
    // console.log('📱 [ProductAllSection] TScrollerDetail onClick 감지됨', {
@@ -797,6 +975,9 @@ export default function ProductAllSection({
  // User Reviews 스크롤 핸들러 추가
  const handleUserReviewsClick = useCallback(() => {
    scrollToSection('scroll-marker-user-reviews');
    setTimeout(()=>{
      Spotlight.focus("user-reviews-container");
    },100)
  }, [scrollToSection]);
  // ProductVideo V1 전용 - MediaPanel minimize 포함
@@ -926,7 +1107,32 @@ export default function ProductAllSection({
  }, [hasVideo, productVideoVersion]);
  const handleShopByMobileOpen = useCallback(
-    pipe(() => true, setMobileSendPopupOpen),
+    pipe(() => {
      // sendLogShopByMobile - Source와 동일한 로깅 추가
      if (productData && Object.keys(productData).length > 0) {
        const { priceInfo, patncNm, patnrId, prdtId, prdtNm, brndNm, catNm } = productData;
        const regularPrice = priceInfo?.split("|")[0];
        const discountPrice = priceInfo?.split("|")[1];
        const discountRate = priceInfo?.split("|")[4];
        const logParams = {
          prdtId,
          patnrId,
          prdtNm,
          patncNm,
          brndNm,
          catNm,
          regularPrice,
          discountPrice,
          discountRate,
          shopByMobileTime: new Date().toISOString(),
        };
        dispatch(sendLogShopByMobile(logParams));
      }
      setMobileSendPopupOpen(true); // 팝업 열기
    }, setMobileSendPopupOpen),
    []
  );
@@ -998,11 +1204,20 @@ export default function ProductAllSection({
  const handleProductDetailsClick = useCallback(() => {
    dispatch(minimizeModalMedia());
    scrollToSection('scroll-marker-product-details');
-  }, [scrollToSection, dispatch]);
+
    // Source의 handleIndicatorOptions와 동일한 로깅 기능 추가
    handleIndicatorOptions();
    setTimeout(()=>{
      Spotlight.focus("product-description-content")
    },100);
  }, [scrollToSection, dispatch, handleIndicatorOptions]);
  const handleYouMayAlsoLikeClick = useCallback(() => {
    dispatch(minimizeModalMedia());
    scrollToSection('scroll-marker-you-may-also-like');
    setTimeout(()=>{
      Spotlight.focus("detail_youMayAlsoLike_area")
    },100);
  }, [scrollToSection, dispatch]);
  // 헤더 Back 아이콘에서 아래로 내려올 때 첫 번째 버튼을 바라보도록 설정
  useEffect(() => {
@@ -1297,7 +1512,7 @@ export default function ProductAllSection({
  }
  return (
-    <HorizontalContainer className={css.detailArea} onClick={handleCloseToast}>
+    <HorizontalContainer className={css.detailArea} onClick={handleCloseToast} onFocus={handleFocus}>
      {/* Left Margin Section - 60px */}
      <div className={css.leftMarginSection}></div>
@@ -1329,7 +1544,10 @@ export default function ProductAllSection({
              >
                <div className={css.qrWrapper}>
                  {isShowQRCode ? (
-                    <QRCode productInfo={productData} productType={productType} kind={'detail'} />
+                    <>
                    {/* <QRCode productInfo={productData} productType={productType} kind={'detail'} /> */}
                    <QRCode productInfo={productData} productType={productType} />
                    </>
                  ) : (
                    <div className={css.qrRollingWrap}>
                      <div className={css.innerText}>
@@ -1395,19 +1613,10 @@ export default function ProductAllSection({
                      spotlightId="detail-buy-now-button"
                      className={css.buyNowButton}
                      onClick={handleBuyNowClick}
-                      type="detail_small"
+                      type="large"
                    >
                      <div className={css.buyNowText}>{$L('BUY NOW')}</div>
                    </TButton>
                    <TButton
                      spotlightId="detail-add-to-cart-button"
                      className={css.addToCartButton}
                      // onClick={handleAddToCartClick}
                      onClick={handleBuyNowClick}
                      type="detail_small"
                    >
                      <div className={css.addToCartText}>{$L('ADD TO CART')}</div>
                    </TButton>
                  </BuyNowContainer>
                )}
@@ -1592,6 +1801,7 @@ export default function ProductAllSection({
                          onScrollToImages={handleScrollToImagesV1}
                          onFocus={() => {}}
                          data-spotlight-id="product-video-player-container"
                          disclaimer={productData.disclaimer}
                        />
                      ) : (
                        <ProductVideoV2
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
@@ -321,12 +321,12 @@
  .qrcode {
    > div:first-child {
      // 명시적으로 크기 고정 및 오버플로우 처리
-      width: 240px !important;
+      width: 190px !important;
-      height: 240px !important;
+      height: 190px !important;
-      max-width: 240px !important;
+      max-width: 190px !important;
-      max-height: 240px !important;
+      max-height: 190px !important;
-      min-width: 240px !important;
+      min-width: 190px !important;
-      min-height: 240px !important;
+      min-height: 190px !important;
      overflow: hidden;
      box-sizing: border-box;
@@ -346,8 +346,8 @@
    justify-content: center;
    align-items: center;
    text-align: center;
-    width: 240px;
+    width: 190px;
-    height: 240px;
+    height: 190px;
    background: #fff;
    border: 1px solid #fff;
    .innerText {
@@ -355,7 +355,7 @@
      padding: 0 20px;
      h3 {
        word-break: break-word;
-        font-size: 36px;
+        font-size: 30px;
        font-weight: bold;
        color: @PRIMARY_COLOR_RED;
        & + p {
@@ -363,7 +363,7 @@
        }
      }
      p {
-        font-size: 24px;
+        font-size: 18px;
        font-weight: bold;
        line-height: 1.17;
        color: @COLOR_GRAY05;
@@ -476,7 +476,6 @@
 .buyNowCartContainer {
  width: 100%;
  padding-top: 10px;  
  display: flex;
  justify-content: space-between;
  align-items: center;
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
@@ -215,3 +215,32 @@
    border-radius: 0;
  }
 }
 .notice {
    width: 100%;
    height: 54px;
    background: #000000;
    .flex(@justifyCenter:flex-start);
    padding: 6px 18px 18px 18px;
    position: absolute;
    bottom: 0;
    border-radius: 0 0 12px 12px;
    .marquee {
      width: 100%;
      height: 100%;
    }
    img {
      width: 18px;
      height: 18px;
      margin: 10px 12px 0 0;
      object-fit: contain;
    }
    span {
      line-height: normal;
      letter-spacing: normal;
      text-align: left;
      .font(@fontFamily:@baseFont, @fontSize:20px);
      color: @COLOR_GRAY04;
    }
  }
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx
@@ -1,17 +1,31 @@
-import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import React, {
-import { useDispatch, useSelector } from 'react-redux';
+  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
 } from 'react';
 import {
  useDispatch,
  useSelector,
 } from 'react-redux';
 import Marquee from '@enact/sandstone/Marquee';
 import Spotlight from '@enact/spotlight';
 import Spottable from '@enact/spotlight/Spottable';
 import playImg from '../../../../../assets/images/btn/btn-play-thumb-nor.png';
 import ic_warning from '../../../../../assets/images/icons/ic-warning@3x.png';
 import {
  startMediaPlayer,
  finishMediaPreview,
  switchMediaToFullscreen,
  minimizeModalMedia,
  restoreModalMedia,
  startMediaPlayer,
  switchMediaToFullscreen,
 } from '../../../../actions/mediaActions';
 import CustomImage from '../../../../components/CustomImage/CustomImage';
 import { panel_names } from '../../../../utils/Config';
 import playImg from '../../../../../assets/images/btn/btn-play-thumb-nor.png';
 import css from './ProductVideo.module.less';
 const SpottableComponent = Spottable('div');
@@ -25,6 +39,7 @@ export default function ProductVideo({
  autoPlay = false, // 자동 재생 여부
  continuousPlay = false, // 반복 재생 여부
  onFocus = null, // 외부에서 전달된 포커스 핸들러
  disclaimer,
 }) {
  const dispatch = useDispatch();
@@ -315,6 +330,12 @@ export default function ProductVideo({
          <img src={playImg} alt="재생" />
        </div>
      </div>
      <div className={css.notice}>
        <Marquee className={css.marquee} marqueeOn="render">
          <img src={ic_warning} alt={disclaimer} />
          <span>{disclaimer}</span>
        </Marquee>
      </div>
    </SpottableComponent>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx
@@ -169,6 +169,9 @@ export default function YouMayAlsoLike({
                            prdtId,
                            launchedFromPlayer: launchedFromPlayer,
                            bgVideoInfo: bgVideoInfo, // 백그라운드 비디오 정보 유지
                            fromPanel: {
  fromYouMayLike: true, // YouMayLike에서 선택된 상품임을 표시
 }, // 출처 정보 통합 객체
                          },
                        })
                      );
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less
@@ -11,13 +11,13 @@
  }
  &.detailQrcode {
    > div:first-child {
-      width: 240px;
+      width: 190px;
-      height: 240px;
+      height: 190px;
    }
  }
  .tooltip {
    margin-top: 10px;
-    width: 240px;
+    width: 190px;
    height: 60px;
    background: #000;
    color: #fff;
@@ -39,7 +39,7 @@
    position: relative;
    width: 100%;
    height: 44px;
-    font-size: 20px;
+    font-size: 16px;
    line-height: 22px;
    letter-spacing: -1px;
    display: flex;
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less
@@ -2,10 +2,12 @@
@import "../../../style/utils.module.less";
 .container {
  margin-bottom: 10px;
  // .size(@w:100%,@h:100%);
-  .size(@w:100%,@h:334px);
+  .size(@w:100%,@h:370px);
  .productInfoWrapper {
    .flex(@justifyCenter:flex-start,@alignCenter:flex-start);
    flex-wrap: wrap;
    // margin: 54px 0 10px 0;
    margin: 20px 0 10px 0;
    // 고정 높이로 인해 QR 영역과 하단 버튼 영역 사이에 과도한 여백이 생김
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.jsx
@@ -171,6 +171,10 @@ export default function ProductPriceDisplay({ productType, productInfo }) {
    <>
      {productType && productInfo && (
        /* <div> */
        <>
          <div className={css.productNm}>
            {productInfo.prdtNm}
          </div>
          <div style={{ margin: "0 10px 0 0", width: "380px" }}>
            {/* shop by mobile (구매불가) 상품 price render */}
            {(productType === "shopByMobile" || isThemeShopByMobile) && (
@@ -213,6 +217,7 @@ export default function ProductPriceDisplay({ productType, productInfo }) {
            })}
            </div>
          </div>
        </>
      )}
      {(() => {
        // 팝업이 표시되어야 하는 조건 검증
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.module.less
@@ -184,3 +184,13 @@
  height: auto;
  object-fit: contain; // 비율 유지하면서 컨테이너에 맞춤
 }
 .productNm {
  width: 100%;
  font-weight: bold;
  font-size: 36px;
  color: @COLOR_WHITE;
  flex:none;
  .elip(2);
  margin-bottom: 20px;
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.jsx
@@ -123,14 +123,16 @@ export default function ShopByMobilePriceDisplay({
                <span className={css.price}>
                  {isDiscountedPriceEmpty ? offerInfo : discountedPrice}
                </span>
              </div>
                {isDiscounted && (
                  <div className={css.btmLayer2}>
                    <span className={css.discountedPrc}>
                      {originalPrice && isOriginalPriceEmpty
                        ? offerInfo
                        : originalPrice}
                    </span>
                )}
                </div>
                )}
            </div>
          );
        } else if (TYPE_CASE.case3) {
@@ -150,14 +152,17 @@ export default function ShopByMobilePriceDisplay({
                <span className={css.price}>
                  {isDiscountedPriceEmpty ? offerInfo : discountedPrice}
                </span>
              </div>
                {isDiscounted && (
                  <div className={css.btmLayer2}>
                    <span className={css.discountedPrc}>
                      {originalPrice && isOriginalPriceEmpty
                        ? offerInfo
                        : originalPrice}
                    </span>
                )}
                  </div>
                )}
              {/* 할부 */}
            </div>
          );
@@ -172,7 +177,7 @@ export default function ShopByMobilePriceDisplay({
            )}
            <span className={css.name}>{$L("Shop Time Price")}</span>
          </div>
-          <div className={css.btmLayer}>
+          <div className={css.btmLayer2}>
            <span className={css.price}>{discountedPrice}</span>
            {discountedPrice !== originalPrice && (
              <span className={css.discountedPrc}>
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.module.less
@@ -40,6 +40,11 @@
    display: flex;
    align-items: center;
  }
  .btmLayer2 {    
    margin: 5px 0;
    display: flex;
    align-items: center;
  }
  .price {
    font-weight: bold;
    font-size: 52px;
--- a/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx
@@ -173,8 +173,9 @@ export default memo(function YouMayLike({
          productTitle={prdtNm}
          nowProductId={productInfo?.prdtId}
          nowProductTitle={productInfo?.prdtNm}
-          nowCategory={productInfo?.catNm}
+          nowCategory={productInfo?.catNm ?? productInfo?.lgCatNm}
          catNm={lgCatNm}
          category={lgCatNm}
          patnerName={patncNm}
          brandName={brndNm}
          imageAlt={prdtId}
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx
@@ -1247,7 +1247,7 @@ const BuyOption = ({
        })        
      );
    }
-    dispatch(clearAllToasts());
+    // dispatch(clearAllToasts());
  }, [
    dispatch,
    userNumber,
@@ -1458,6 +1458,7 @@ const BuyOption = ({
 const handleCartMove = useCallback(() => {
  dispatch(setHidePopup());
  clearAllToasts();
  dispatch(
    pushPanel({
      name: Config.panel_names.CART_PANEL,      
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx
@@ -24,6 +24,9 @@ const SpottableComponent = Spottable("button");
 export default function THeaderCustom({
  prdtId,
  title,
  type,
  themeTitle,
  selectedIndex,
  className,
  onBackButton,
  onSpotlightUp,
@@ -36,15 +39,18 @@ export default function THeaderCustom({
  kind,
  logoImg,
  patnrId,
  themeData,
  ...rest
 }) {
  const convertedTitle = useMemo(() => {
    if (title && typeof title === "string") {
      const cleanedTitle = title.replace(/(\r\n|\n)/g, "");
      return $L(marqueeDisabled ? title : cleanedTitle);
    } else if(type === "theme") {
      return themeData?.productInfos[selectedIndex].prdtNm;
    }
    return "";
-  }, [marqueeDisabled, title]);
+  }, [marqueeDisabled, title, selectedIndex, themeData, type]);
  const _onClick = useCallback(
    (e) => {
@@ -87,6 +93,9 @@ export default function THeaderCustom({
          role="button"
        />
      )}
      {type === "theme" && themeTitle && (
      <span className={css.themeTitle} dangerouslySetInnerHTML={{ __html: themeTitle }} />        
      )}
      {kind ? (
        ""
      ) : (
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less
@@ -54,3 +54,11 @@
  margin-right: 10px; // 파트너사 로고 후 10px gap
  border-radius: 100%;
 }
 .themeTitle {
  font-size: 25px;
  font-weight: 600;
  color: #eaeaea;
  width: max-content;
  margin-right: 20px;
 }
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
@@ -319,10 +319,11 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
        return;
      }
      const templateCode = containerId?.split("-")[0] || containerId;
      const foundElement = sortedBrandLayoutInfo.find(
-        (el) => el.shptmBrndOptTpCd === containerId
+        (el) => el.shptmBrndOptTpCd === templateCode
      );
-      const actualShelfOrder = foundElement ? foundElement.expsOrd : null;
+      const actualShelfOrder = foundElement ? foundElement.expsOrd : 0;
      const selectedBrand = `${LOG_MENU.FEATURED_BRANDS}/${selectedPatncNm}`;
      const currentShelf = `${getMenuByContainerId(containerId)}`;
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveChannelsVerticalContents.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveChannelsVerticalContents.jsx
@@ -25,7 +25,11 @@ import {
  finishVideoPreview,
  startVideoPlayer,
 } from "../../../../actions/playActions";
-import { panel_names } from "../../../../utils/Config";
+import {
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  panel_names,
 } from "../../../../utils/Config";
 import { $L } from "../../../../utils/helperMethods";
 import css from "./LiveChannelsVerticalContents.module.less";
 import LiveChannelsVerticalProductList from "./LiveChannelsVerticalProductList/LiveChannelsVerticalProductList";
@@ -175,10 +179,14 @@ const LiveChannelsVerticalContents = ({
      dispatch(
        sendLogTotalRecommend({
          contextName: LOG_CONTEXT_NAME.FEATURED_BRANDS,
          messageId: LOG_MESSAGE_ID.SHELF_CLICK,
          partner: chanNm,
          shelfLocation: shelfOrder,
          shelfId: spotlightId,
          shelfTitle: shelfTitle,
          showId: showId,
          showTitle: showNm,
          contentId: showId,
          contentTitle: showNm,
          brand: brndNm,
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
@@ -115,11 +115,16 @@ export default function RollingUnit({
  const previousTimeRef = useRef();
  const arrRef = useRef([]);
  const bannerDataRef = useRef(bannerData);
-  const rollingDataRef = useRef(rollingData);
+  const filteredRollingDataRef = useRef(filteredRollingData);
  // filteredRollingDataRef 업데이트
  useEffect(() => {
    filteredRollingDataRef.current = filteredRollingData;
  }, [filteredRollingData]);
  const topContentsLogInfo = useMemo(() => {
-    if (rollingDataRef.current) {
+    if (filteredRollingDataRef.current && filteredRollingDataRef.current.length > 0) {
-      const currentRollingData = rollingDataRef.current[startIndex];
+      const currentRollingData = filteredRollingDataRef.current[startIndex];
      let contId, contNm;
@@ -172,9 +177,10 @@ export default function RollingUnit({
    return {};
  }, [shptmTmplCd, startIndex]);
  const sendBannerLog = useCallback(
    (bannerClick) => {
-      const data = rollingDataRef.current[startIndex];
+      const data = filteredRollingDataRef.current[startIndex];
      const newParams =
        bannerData.banrLctnNo === '2'
          ? {
@@ -183,7 +189,7 @@ export default function RollingUnit({
          : {
              bannerType: 'Vertical',
            };
-      if (rollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) {
+      if (filteredRollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) {
        const logParams = {
          contextName: LOG_CONTEXT_NAME.HOME,
          messageId: bannerClick ? LOG_MESSAGE_ID.BANNER_CLICK : LOG_MESSAGE_ID.BANNER,
@@ -305,12 +311,13 @@ export default function RollingUnit({
  const categoryData = useMemo(() => {
    if (
-      Object.keys(rollingData[startIndex]).length > 0 &&
+      filteredRollingData.length > 0 &&
-      rollingData[startIndex].shptmLnkTpCd === LINK_TYPES.CATEGORY
+      Object.keys(filteredRollingData[startIndex]).length > 0 &&
      filteredRollingData[startIndex].shptmLnkTpCd === LINK_TYPES.CATEGORY
    ) {
      if (homeCategory && homeCategory.length > 0) {
        const foundCategory = homeCategory.find(
-          (data) => data.lgCatCd === rollingData[startIndex].lgCatCd
+          (data) => data.lgCatCd === filteredRollingData[startIndex].lgCatCd
        );
        if (foundCategory) {
          return {
@@ -321,10 +328,10 @@ export default function RollingUnit({
      }
    }
    return {};
-  }, [homeCategory, rollingData, startIndex]);
+  }, [homeCategory, filteredRollingData, startIndex]);
  const { originalPrice, discountedPrice, discountRate, offerInfo } =
-    usePriceInfo(rollingData[startIndex].priceInfo) || {};
+    usePriceInfo(filteredRollingData.length > 0 ? filteredRollingData[startIndex].priceInfo : {}) || {};
  const handlePushPanel = useCallback(
    (name, panelInfo) => {
@@ -350,10 +357,16 @@ export default function RollingUnit({
  );
  const imageBannerClick = useCallback(() => {
    // 필터링된 데이터가 비어있으면 return
    if (!filteredRollingData || filteredRollingData.length === 0) {
      return;
    }
    if (bannerId) {
      dispatch(setBannerIndex(bannerId, startIndex));
    }
-    const currentData = rollingData[startIndex];
+    
    const currentData = filteredRollingData[startIndex];
    const linkType = currentData.shptmLnkTpCd;
    const bannerType = currentData.shptmBanrTpNm;
@@ -432,7 +445,7 @@ export default function RollingUnit({
      })
    );
  }, [
-    rollingData,
+    filteredRollingData,
    startIndex,
    bannerId,
    dispatch,
@@ -443,6 +456,11 @@ export default function RollingUnit({
  ]);
  const videoClick = useCallback(() => {
    // 필터링된 데이터가 비어있으면 return
    if (!filteredRollingData || filteredRollingData.length === 0) {
      return;
    }
    const lastFocusedTargetId = getContainerId(Spotlight.getCurrent());
    const currentSpot = Spotlight.getCurrent();
@@ -463,7 +481,7 @@ export default function RollingUnit({
      dispatch(setBannerIndex(bannerId, startIndex));
    }
-    const currentData = rollingData[startIndex];
+    const currentData = filteredRollingData[startIndex];
    handleStartVideoPlayer({
      showUrl: currentData.showUrl,
@@ -485,7 +503,7 @@ export default function RollingUnit({
        logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
      })
    );
-  }, [rollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer, topContentsLogInfo]);
+  }, [filteredRollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer, topContentsLogInfo]);
  // 10초 롤링
  useEffect(() => {
@@ -537,7 +555,7 @@ export default function RollingUnit({
  useEffect(() => {
    sendBannerLog();
-  }, [rollingDataRef, nowMenu, startIndex]);
+  }, [filteredRollingDataRef, nowMenu, startIndex]);
  useEffect(() => {
    if (nowMenu !== LOG_MENU.HOME_TOP) {
@@ -551,7 +569,7 @@ export default function RollingUnit({
      spotlightId={`container-${spotlightId}`}
      onFocus={shelfFocus}
    >
-      {filteredRollingData !== 1 ? (
+      {filteredRollingData.length !== 1 ? (
        <SpottableComponent
          className={classNames(css.arrow, css.leftBtn)}
          onClick={handlePrev}
@@ -564,7 +582,7 @@ export default function RollingUnit({
        />
      ) : null}
-      {filteredRollingData && filteredRollingData[startIndex].shptmBanrTpNm === 'Image Banner' ? (
+      {filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'Image Banner' ? (
        <SpottableComponent
          className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
          onClick={imageBannerClick}
@@ -582,7 +600,7 @@ export default function RollingUnit({
            <img src={filteredRollingData[startIndex].tmnlImgPath} />
          </div>
        </SpottableComponent>
-      ) : filteredRollingData[startIndex].shptmBanrTpNm === 'LIVE' ? (
+      ) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'LIVE' ? (
        <SpottableComponent
          className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
          onClick={videoClick}
@@ -634,7 +652,7 @@ export default function RollingUnit({
            />
          </p>
        </SpottableComponent>
-      ) : filteredRollingData[startIndex].shptmBanrTpNm === 'VOD' ? (
+      ) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'VOD' ? (
        <SpottableComponent
          className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
          onClick={videoClick}
@@ -682,7 +700,7 @@ export default function RollingUnit({
            )}
          </div>
        </SpottableComponent>
-      ) : filteredRollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
+      ) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
        <SpottableComponent
          className={classNames(
            css.itemBox,
@@ -738,7 +756,7 @@ export default function RollingUnit({
        </SpottableComponent>
      ) : null}
-      {filteredRollingData !== 1 ? (
+      {filteredRollingData.length !== 1 ? (
        <SpottableComponent
          className={classNames(css.arrow, css.rightBtn)}
          onClick={handleNext}
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx
@@ -217,6 +217,8 @@ export default function Favorites({ title, panelInfo, isOnTop }) {
    (patnrId, prdtId, prdtNm, patncNm, showId, showNm, brndNm) => (ev) => {
      const params = {
        menu: "Favorite",
        contentId: showId ?? prdtId,
        contentTitle: showNm ?? prdtNm,
        productId: prdtId,
        productTitle: prdtNm,
        partner: patncNm,
@@ -340,7 +342,10 @@ export default function Favorites({ title, panelInfo, isOnTop }) {
                      item.patnrId,
                      item.prdtId,
                      item.prdtNm,
-                      item.patncNm
+                      item.patncNm,
                      item.showId,
                      item.showNm,
                      item.brndNm
                    )}
                    onToggle={handleItemToggle(item.prdtId)}
                    length={favoritesDatas.length}
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewedContents.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewedContents.jsx
@@ -145,6 +145,7 @@ export default function RecentlyViewedContents({
              lgCatCd,
              thumbnailUrl,
              showNm,
              brndNm,
            } = item;
            return (
              <MyPageItemCard
@@ -161,7 +162,8 @@ export default function RecentlyViewedContents({
                  lgCatCd,
                  prdtId,
                  prdtNm,
-                  patncNm
+                  patncNm,
                  brndNm
                )}
                onToggle={_handleItemToggle(showId, prdtId)}
                spotlightId={mainContainerId + index}
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
@@ -271,6 +271,23 @@ export default function Reminders({ title, cbScrollTo }) {
    Spotlight.focus("mypage-reminder-delete");
  }, [upComingAlertShow]);
  const handleItemClick = useCallback(
    (showId, showNm, patncNm, brndNm, patnrId) => () => {
      const params = {
        menu: "Reminders",
        contentId: showId,
        contentTitle: showNm,
        showId: showId,
        showTitle: showNm,
        partner: patncNm,
        brand: brndNm,
        contextName: Config.LOG_CONTEXT_NAME.MYPAGE,
        messageId: Config.LOG_MESSAGE_ID.MYPAGE_CLICK,
      };
      dispatch(sendLogTotalRecommend(params));
    },
    [dispatch]
  );
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const sortedAlertShows = upComingAlertShow.alertShows
@@ -298,15 +315,29 @@ export default function Reminders({ title, cbScrollTo }) {
          showNm={listItem.showNm}
          strtDt={listItem.strtDt}
          thumbnailUrl={listItem.thumbnailUrl}
          brndNm={listItem.brndNm}
          activeDelete={activeDelete}
          selected={selectedItems[listItem.showId]}
          onToggle={handleItemToggle(listItem.showId)}
          onClick={handleItemClick(
            listItem.showId,
            listItem.showNm,
            listItem.patncNm,
            listItem.brndNm,
            listItem.patnrId
          )}
          index={index}
          length={upComingAlertShow.alertShows.length}
        />
      );
    },
-    [upComingAlertShow, activeDelete, selectedItems, handleItemToggle]
+    [
      upComingAlertShow,
      activeDelete,
      selectedItems,
      handleItemToggle,
      handleItemClick,
    ]
  );
  return (
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleContents/OnSaleContents.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleContents/OnSaleContents.jsx
@@ -36,7 +36,7 @@ export default memo(function OnSaleContents({
        messageId: LOG_MESSAGE_ID.SHELF,
        category: selectedLgCatNm,
        shelfLocation: shelfOrder,
-        shelfId: selectedLgCatCd,
+        shelfId: spotlightId,
        shelfTitle: saleNm,
      };
      dispatch(sendLogTotalRecommend(params));
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
@@ -108,8 +108,9 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
      if (categoryInfos) {
        dispatch(copyCategoryInfos(categoryInfos));
        setCategories(categoryInfos);
-        setSelectedLgCatCd(panelInfo?.lgCatCd);
+        // GNB 진입 시 panelInfo가 비어있으면 첫 번째 카테고리를 기본값으로 설정
-        setSelectedLgCatNm(panelInfo?.lgCatNm);
+        setSelectedLgCatCd(panelInfo?.lgCatCd ?? categoryInfos[0]?.lgCatCd);
        setSelectedLgCatNm(panelInfo?.lgCatNm ?? categoryInfos[0]?.lgCatNm);
      }
    }
  }, [
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
@@ -1,14 +1,24 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
 } from 'react';
 import classNames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
+import {
  useDispatch,
  useSelector,
 } from 'react-redux';
 import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import SpotlightContainerDecorator
  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 import Marquee from '@enact/ui/Marquee';
-import defaultLogoImg from '../../../../assets/images/ic-tab-partners-default@3x.png';
+import defaultLogoImg
  from '../../../../assets/images/ic-tab-partners-default@3x.png';
 import { setShowPopup } from '../../../actions/commonActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
 import { ACTIVE_POPUP } from '../../../utils/Config';
@@ -388,7 +398,7 @@ function PlayerOverlayContents({
                e.preventDefault();
                // tabIndexV2가 2일 때만 ShopNowButton으로 포커스
                if (tabContainerVersion === 2 && tabIndexV2 === 2) {
-                  Spotlight.focus('below-tab-shop-now-button');
+                  Spotlight.focus('live-channel-next-button');
                }
              }}
              aria-label="Caption"
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -282,6 +282,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
  const watchIntervalLive = useRef(null);
  const watchIntervalVod = useRef(null);
  const watchIntervalMedia = useRef(null);
  const timeoutRef = useRef(null);
  // useEffect(() => {
  //   console.log("###videoLoaded", videoLoaded);
  //   if (nowMenu) {
@@ -291,8 +292,15 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
    if (liveShowInfos && liveShowInfos.length > 0) {
      const panelInfoChanId = panelInfo?.chanId;
      const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
      const isModal = panelInfo?.modal;
      if (isLive) {
        // live full 화면에서 modal 전환시 로그 전송 추가
        if (isModal) {
          dispatch(sendLogGNB(Config.LOG_MENU.FULL));
          prevNowMenuRef.current = nowMenuRef.current;
          return () => dispatch(sendLogGNB(prevNowMenuRef.current));
        }
        const liveShowInfo = liveShowInfos //
          .find(({ chanId }) => panelInfoChanId === chanId);
@@ -303,7 +311,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
    }
    return {};
-  }, [liveShowInfos, panelInfo?.chanId, panelInfo?.shptmBanrTpNm]);
+  }, [liveShowInfos, panelInfo?.chanId, panelInfo?.shptmBanrTpNm, panelInfo?.modal]);
  const currentVODShowInfo = useMemo(() => {
    if (showDetailInfo && showDetailInfo.length > 0) {
@@ -327,7 +335,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
      prevNowMenuRef.current = nowMenuRef.current;
      return () => dispatch(sendLogGNB(prevNowMenuRef.current));
-    } else if (panelInfo?.modal) {
+    } else if (panelInfo?.modal && panelInfo?.shptmBanrTpNm !== 'LIVE') {
      dispatch(sendLogGNB(entryMenu));
    }
  }, [panelInfo?.modal, panelInfo?.shptmBanrTpNm]);
@@ -619,7 +627,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
      if (lastFocusedTargetId) {
        // ShopNowContents가 렌더링될 때까지 대기 후 포커스 복원
-        setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
          dlog('[PlayerPanel] 🔍 800ms 후 포커스 복원 시도:', lastFocusedTargetId);
          Spotlight.focus(lastFocusedTargetId);
        }, 800);
@@ -710,6 +718,13 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
        panelInfo?.modal &&
        liveLogParamsRef.current?.showId === panelInfo?.showId
      ) {
        dlog('[PlayerPanel] 📡 LIVE Modal Log Ready and Conditions Met:', {
          isModalLiveLogReady: logStatus.isModalLiveLogReady,
          isOnTop,
          isModal: panelInfo?.modal,
          showIdMatch: liveLogParamsRef.current?.showId === panelInfo?.showId,
          logParams: liveLogParamsRef.current,
        });
        let watchStrtDt = formatGMTString(new Date());
        watchIntervalLive.current = setInterval(() => {
@@ -728,6 +743,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
            isModalLiveLogReady: false,
          }));
          clearInterval(watchIntervalLive.current);
          dlog('[PlayerPanel] 🚀 Dispatching LIVE Modal Log:', {
            logParams: liveLogParamsRef.current,
            watchStrtDt,
          });
          dispatch(
            sendLogLive({ ...liveLogParamsRef.current, watchStrtDt }, () =>
              dispatch(changeLocalSettings({ watchRecord: {} }))
@@ -1147,7 +1166,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
        //딮링크로 플레이어 진입 후 이전버튼 클릭시
        if (panels.length === 1) {
-          setTimeout(() => {
+          timeoutRef.current = setTimeout(() => {
            Spotlight.focus(SpotlightIds.HOME_TBODY);
          });
        }
@@ -1391,9 +1410,22 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
  ]);
  useEffect(() => {
    // console.log('[PlayerPanel] VOD useEffect 진입', {
    //   shptmBanrTpNm: panelInfo.shptmBanrTpNm,
    //   panelInfoShowId: panelInfo.showId,
    //   showDetailInfoLength: showDetailInfo?.length,
    //   showDetailInfoId: showDetailInfo?.[0]?.showId,
    // });
    if (panelInfo.shptmBanrTpNm === 'VOD' && showDetailInfo && showDetailInfo.length > 0) {
      // console.log('[PlayerPanel] VOD 조건 만족');
      // 현재 panelInfo의 showId와 showDetailInfo의 showId가 일치할 때만 처리
      if (showDetailInfo[0]?.showId === panelInfo.showId) {
        // console.log('[PlayerPanel] showId 일치! 동영상 설정 시작', {
        //   showId: showDetailInfo[0]?.showId,
        //   patnrId: showDetailInfo[0]?.patnrId,
        // });
        if (showDetailInfo[0]?.showCatCd && fullVideolgCatCd !== showDetailInfo[0]?.showCatCd) {
          dispatch(
            getHomeFullVideoInfo({
@@ -1402,16 +1434,30 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
          );
        }
        if (showDetailInfo[0].showId && showDetailInfo[0].patnrId) {
-          if (!featuredShowsInfos || Object.keys(featuredShowsInfos).length === 0) {
+          // console.log('[PlayerPanel] setPlayListInfo 호출');
          // featuredShowsInfos가 있으면 addPanelInfoToPlayList로 여러 동영상 처리
          if (featuredShowsInfos && featuredShowsInfos.length > 0) {
            // console.log('[PlayerPanel] addPanelInfoToPlayList 호출 (여러 배너)', {
            //   featuredShowsInfosLength: featuredShowsInfos.length,
            // });
            addPanelInfoToPlayList(featuredShowsInfos);
          } else {
            // featuredShowsInfos가 없으면 현재 showDetailInfo만 설정
            // console.log('[PlayerPanel] setPlayListInfo 호출 (단일 배너만)');
            setPlayListInfo(showDetailInfo);
            // VOD는 단일 비디오이므로 selectedIndex를 0으로 고정
            setSelectedIndex(0);
          }
          setShopNowInfo(showDetailInfo[0].productInfos);
          saveToLocalSettings(showDetailInfo[0].showId, showDetailInfo[0].patnrId);
        }
      } else {
        // showId가 일치하지 않으면 이전 상태를 재활용하지 않고 초기화
        // console.log('[PlayerPanel] VOD showDetailInfo mismatch. Clearing playListInfo.', {
        //   panelInfoShowId: panelInfo.showId,
        //   showDetailInfoId: showDetailInfo[0]?.showId,
        // });
        dlog('[PlayerPanel] VOD showDetailInfo mismatch. Clearing playListInfo.', {
          panelInfoShowId: panelInfo.showId,
          showDetailInfoId: showDetailInfo[0]?.showId,
@@ -1685,7 +1731,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
  useEffect(() => {
    if (currentLiveTimeSeconds > liveTotalTime) {
-      setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
        dispatch(getMainLiveShow());
        setShopNowInfo('');
        dispatch(
@@ -1694,8 +1740,21 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
          })
        );
      }, 3000);
      return () => {
        if (timeoutRef.current) clearTimeout(timeoutRef.current);
      };
    }
-  }, [currentLiveTimeSeconds, liveTotalTime]);
+  }, [currentLiveTimeSeconds, liveTotalTime, dispatch, playListInfo, selectedIndex]);
  useEffect(() => {
    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      if (watchIntervalLive.current) clearInterval(watchIntervalLive.current);
      if (watchIntervalVod.current) clearInterval(watchIntervalVod.current);
      if (watchIntervalMedia.current) clearInterval(watchIntervalMedia.current);
    };
  }, []);
  const mediainfoHandler = useCallback(
    (ev) => {
@@ -1994,7 +2053,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
  const handlePopupClose = useCallback(() => {
    dispatch(setHidePopup());
-    setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON));
+    timeoutRef.current = setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON));
  }, [dispatch]);
  const reactPlayerSubtitleConfig = useMemo(() => {
    if (isSubtitleActive && currentSubtitleBlob) {
@@ -2324,7 +2383,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
          })
        );
        Spotlight.pause();
-        setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
          Spotlight.resume();
          dispatch(PanelActions.popPanel());
        }, VIDEO_END_ACTION_DELAY);
@@ -2332,7 +2391,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
      }
      if (panelInfoRef.current.shptmBanrTpNm === 'VOD') {
        Spotlight.pause();
-        setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
          stopExternalPlayer();
          if (panelInfoRef.current.modal) {
            // 모달 모드에서는 종료 후 화면을 유지하고 Back 아이콘으로 포커스 이동
@@ -2556,11 +2615,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
        dlog('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 콘텐츠 타입에 따라 설정');
        if (tabContainerVersion === 2) {
          if (panelInfoRef.current.shptmBanrTpNm === 'VOD') {
-            setTabIndexV2(2);
+            setTabIndexV2(1);
-            dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
+            dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 1로 설정됨 (FeaturedShowContents 표시)');
          } else {
            setTabIndexV2(1);
-            dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
+            dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨 (LiveChannelContents 표시)');
          }
        }
      } else {
@@ -2582,7 +2641,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
        if (lastFocusedTargetId) {
          // ShopNowContents가 렌더링될 때까지 잠시 대기 후 포커스 복원
-          setTimeout(() => {
+          timeoutRef.current = setTimeout(() => {
            dlog('[PlayerPanel] 🔍 500ms 후 포커스 복원 시도:', lastFocusedTargetId);
            Spotlight.focus(lastFocusedTargetId);
          }, 500);
@@ -2591,6 +2650,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
        // 한 번 처리한 복귀 플래그는 즉시 해제해 중복 영향을 막는다.
        prevIsTopPanelDetailFromPlayerRef.current = false;
      }
      return () => {
        if (timeoutRef.current) clearTimeout(timeoutRef.current);
      };
    }
  }, [
    isOnTop,
@@ -2615,11 +2678,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
      );
      if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') {
-        setTabIndexV2(2);
+        setTabIndexV2(1);
-        dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
+        dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 1로 설정됨 (FeaturedShowContents 표시)');
      } else {
        setTabIndexV2(1);
-        dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
+        dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨 (LiveChannelContents 표시)');
      }
    }
  }, [isOnTop, panelInfo.modal, videoVerticalVisible, tabContainerVersion]);
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx
@@ -12,7 +12,8 @@ import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../.
 import { $L, removeSpecificTags } from '../../../../utils/helperMethods';
 import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
 import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents';
-import css from './LiveChannelContents.module.less';
+import css from './FeaturedShowContents.module.less';
 import cssV2 from './FeaturedShowContents.v2.module.less';
 import { getMainCategoryShowDetail } from '../../../../actions/mainActions';
 import { sendLogTotalRecommend } from '../../../../actions/logActions';
 // =======
@@ -44,6 +45,8 @@ export default function FeaturedShowContents({
  handleItemFocus,
  tabTitle,
  panelInfo,
  direction = 'vertical',
  version = 1,
 }) {
  const dispatch = useDispatch();
  const isClickBlocked = useRef(false);
@@ -75,6 +78,14 @@ export default function FeaturedShowContents({
      } = featuredShowsInfos[index];
      const handleItemClick = () => {
        // console.log('[FeaturedShowContents] 클릭 발생', {
        //   index,
        //   showId,
        //   showNm,
        //   patnrId,
        //   currentVideoShowId,
        // });
        const params = {
          tabTitle: tabTitle[tabIndex],
          showId: showId,
@@ -88,6 +99,7 @@ export default function FeaturedShowContents({
        dispatch(sendLogTotalRecommend(params));
        //중복클릭방지
        if (isClickBlocked.current) {
          // console.log('[FeaturedShowContents] 중복 클릭 방지됨');
          return;
        }
@@ -104,16 +116,39 @@ export default function FeaturedShowContents({
        }, 600);
        if (currentVideoShowId && currentVideoShowId === showId) {
          // console.log('[FeaturedShowContents] 동일한 showId로 클릭됨, 무시');
          return;
        }
          // console.log('[FeaturedShowContents] getMainCategoryShowDetail + updatePanel 호출', {
          //   showId,
          //   patnrId,
          //   lgCatCd,
          // });
        setSelectedIndex(index);
        // getMainCategoryShowDetail을 먼저 호출해서 showDetailInfo를 업데이트
        dispatch(
          getMainCategoryShowDetail({
            patnrId: patnrId,
            showId: showId,
          })
        );
        // 그 다음 updatePanel 호출해서 panelInfo 업데이트
        dispatch(
          updatePanel({
            name: panel_names.PLAYER_PANEL,
            panelInfo: {
              patnrId: patnrId,
              showId: showId,
              shptmBanrTpNm: 'VOD',
              lgCatCd: lgCatCd,
              isUpdatedByClick: true,
            },
          })
        );
      };
      const showNameDangerouslySetInnerHTML = () => {
@@ -138,11 +173,22 @@ export default function FeaturedShowContents({
          patnerName={patncNm}
          onClick={handleItemClick}
          onFocus={handleFocus()}
          onSpotlightUp={
            version === 2 && index === 0
              ? (e) => {
                  // v2에서 첫 번째 아이템일 때 위로 가면 FEATURED SHOWS 버튼으로
                  e.stopPropagation();
                  e.preventDefault();
                  Spotlight.focus('below-tab-featured-show-button');
                }
              : undefined
          }
          type={TYPES.featuredHorizontal}
          spotlightId={`tabChannel-video-${index}`}
          videoVerticalVisible={videoVerticalVisible}
          selectedIndex={index}
          currentVideoVisible={currentVideoShowId === featuredShowsInfos[index].showId}
          version={version}
        />
      );
    },
@@ -166,17 +212,19 @@ export default function FeaturedShowContents({
    };
  }, []);
  const containerClass = version === 2 ? cssV2.container : css.container;
  return (
    <>
-      <div className={css.container}>
+      <div className={containerClass}>
        {featuredShowsInfos && featuredShowsInfos.length > 0 ? (
          <TVirtualGridList
            dataSize={featuredShowsInfos.length}
-            direction="vertical"
+            direction={direction}
            renderItem={renderItem}
-            itemWidth={videoVerticalVisible ? 540 : 600}
+            itemWidth={version === 2 ? 470 : videoVerticalVisible ? 540 : 600}
-            itemHeight={176}
+            itemHeight={version === 2 ? 155 : 176}
-            spacing={12}
+            spacing={version === 2 ? 30 : 12}
          />
        ) : (
          <ListEmptyContents tabIndex={tabIndex} />
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.v2.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.v2.module.less
@@ -0,0 +1,22 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
 .container {
  width: 100%;
  height: 155px;
  > div:nth-child(1) {
    .size(@w: 100%, @h: 100%);
  }
 }
 .channelList {
  width: 100%;
  .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start);
  overflow-x: auto;
  overflow-y: hidden;
  > * + * {
    margin-left: 30px;
  }
 }
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
@@ -1,38 +1,60 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
 } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
-import { Job } from '@enact/core/util';
+import { Job } from "@enact/core/util";
-import Spotlight from '@enact/spotlight';
+import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import { getContainerNode, setContainerLastFocusedElement } from '@enact/spotlight/src/container';
+import {
  getContainerNode,
  setContainerLastFocusedElement,
 } from "@enact/spotlight/src/container";
-import { sendLogTotalRecommend } from '../../../../actions/logActions';
+import { sendLogTotalRecommend } from "../../../../actions/logActions";
-import { navigateToDetail, SOURCE_MENUS, pushPanel } from '../../../../actions/panelActions';
+import {
-import { hidePlayerOverlays } from '../../../../actions/videoPlayActions';
+  navigateToDetail,
-import TItemCard, { TYPES } from '../../../../components/TItemCard/TItemCard';
+  SOURCE_MENUS,
-import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList';
+  pushPanel,
-import useScrollTo from '../../../../hooks/useScrollTo';
+} from "../../../../actions/panelActions";
-import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config';
+import { hidePlayerOverlays } from "../../../../actions/videoPlayActions";
-import { scaleH } from '../../../../utils/helperMethods';
+import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
-import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents';
+import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
-import css1 from './ShopNowContents.module.less';
+import useScrollTo from "../../../../hooks/useScrollTo";
-import cssV2 from './ShopNowContents.v2.module.less';
+import {
  LOG_CONTEXT_NAME,
  LOG_MENU,
  LOG_MESSAGE_ID,
  panel_names,
 } from "../../../../utils/Config";
 import { scaleH } from "../../../../utils/helperMethods";
 import ListEmptyContents from "../TabContents/ListEmptyContents/ListEmptyContents";
 import css1 from "./ShopNowContents.module.less";
 import cssV2 from "./ShopNowContents.v2.module.less";
 const extractPriceInfo = (priceInfo) => {
-  if (!priceInfo) return { originalPrice: '', discountedPrice: '', discountRate: '' };
+  if (!priceInfo)
    return { originalPrice: "", discountedPrice: "", discountRate: "" };
-  const parts = priceInfo.split('|').map((part) => part.trim());
+  const parts = priceInfo.split("|").map((part) => part.trim());
  return {
-    originalPrice: parts[0] || '',
+    originalPrice: parts[0] || "",
-    discountedPrice: parts[1] || '',
+    discountedPrice: parts[1] || "",
-    discountRate: parts[4] || '',
+    discountRate: parts[4] || "",
  };
 };
-const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
+const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
 );
 export default function ShopNowContents({
  shopNowInfo,
  videoVerticalVisible,
@@ -42,7 +64,7 @@ export default function ShopNowContents({
  panelInfo,
  tabTitle,
  version = 1,
-  direction = 'vertical',
+  direction = "vertical",
 }) {
  const css = version === 2 ? cssV2 : css1;
  const { getScrollTo, scrollTop } = useScrollTo();
@@ -54,12 +76,12 @@ export default function ShopNowContents({
  const gridStyle = useMemo(() => ({ height: `${height}px` }), [height]);
  useEffect(() => {
-    console.log('=== [ShopNow] Component Rendered ===');
+    console.log("=== [ShopNow] Component Rendered ===");
-    console.log('[ShopNow] shopNowInfo:', shopNowInfo);
+    console.log("[ShopNow] shopNowInfo:", shopNowInfo);
-    console.log('[ShopNow] youmaylikeInfos:', youmaylikeInfos);
+    console.log("[ShopNow] youmaylikeInfos:", youmaylikeInfos);
-    console.log('[ShopNow] version:', version);
+    console.log("[ShopNow] version:", version);
-    console.log('[ShopNow] tabIndex:', tabIndex);
+    console.log("[ShopNow] tabIndex:", tabIndex);
-    console.log('=====================================');
+    console.log("=====================================");
  }, [shopNowInfo, youmaylikeInfos, version, tabIndex]);
  // ShopNow + YouMayLike 통합 아이템 (v2이고 shopNow < 3일 때만)
@@ -69,7 +91,7 @@ export default function ShopNowContents({
    // 기본: ShopNow 아이템
    let items = shopNowInfo.map((item) => ({
      ...item,
-      _type: 'shopnow',
+      _type: "shopnow",
    }));
    // v2 + ShopNow < 3 + YouMayLike 데이터 존재 시 통합
@@ -79,7 +101,7 @@ export default function ShopNowContents({
      items = items.concat(
        youmaylikeInfos.map((item) => ({
          ...item,
-          _type: 'youmaylike',
+          _type: "youmaylike",
        }))
      );
    }
@@ -102,7 +124,7 @@ export default function ShopNowContents({
  useEffect(() => {
    return () => {
-      const gridListId = 'playVideoShopNowBox';
+      const gridListId = "playVideoShopNowBox";
      const girdList = getContainerNode(gridListId);
      if (girdList) setContainerLastFocusedElement(null, [gridListId]);
@@ -144,14 +166,17 @@ export default function ShopNowContents({
      const item = combinedItems[index];
      // ===== YouMayLike 아이템 처리 =====
-      if (item._type === 'youmaylike') {
+      if (item._type === "youmaylike") {
        const { imgUrl, patnrId, prdtId, prdtNm, priceInfo, offerInfo } = item;
        // YouMayLike 시작 지점 여부 (구분선 표시)
        const isYouMayLikeStart = shopNowInfo && index === shopNowInfo.length;
        const handleYouMayLikeItemClick = () => {
-          console.log('[ShopNowContents] DetailPanel 진입 - sourceMenu:', SOURCE_MENUS.PLAYER_SHOP_NOW);
+          console.log(
            "[ShopNowContents] DetailPanel 진입 - sourceMenu:",
            SOURCE_MENUS.PLAYER_SHOP_NOW
          );
          dispatch(
            navigateToDetail({
@@ -195,7 +220,7 @@ export default function ShopNowContents({
              onSpotlightUp={(e) => {
                e.stopPropagation();
                e.preventDefault();
-                Spotlight.focus('shownow_close_button');
+                Spotlight.focus("shownow_close_button");
              }}
              type={TYPES.horizontal}
              version={version}
@@ -216,10 +241,12 @@ export default function ShopNowContents({
        patncNm,
        brndNm,
        catNm,
        lgCatNm,
      } = item;
      // 미리 계산된 가격 정보를 사용
-      const { originalPrice, discountedPrice, discountRate } = priceInfoMap[index] || {};
+      const { originalPrice, discountedPrice, discountRate } =
        priceInfoMap[index] || {};
      const handleShopNowItemClick = () => {
        // ===== 기존 코드 (코멘트 처리) =====
@@ -228,20 +255,20 @@ export default function ShopNowContents({
        // const currentSpotlightId = currentFocusedElement?.getAttribute('data-spotlight-id');
        // console.log('[ShopNowContents] 현재 포커스된 spotlightId:', currentSpotlightId);
-        // const params = {
+        const params = {
-        //   tabTitle: tabTitle[tabIndex],
+          tabTitle: tabTitle[tabIndex],
-        //   productId: prdtId,
+          productId: prdtId,
-        //   productTitle: prdtNm,
+          productTitle: prdtNm,
-        //   partner: patncNm,
+          partner: patncNm,
-        //   brand: brndNm,
+          brand: brndNm,
-        //   price: discountRate ? discountedPrice : originalPrice,
+          price: discountRate ? discountedPrice : originalPrice,
-        //   showType: panelInfo?.shptmBanrTpNm,
+          showType: panelInfo?.shptmBanrTpNm,
-        //   category: catNm,
+          category: catNm ?? lgCatNm,
-        //   discount: discountRate,
+          discount: discountRate,
-        //   contextName: LOG_CONTEXT_NAME.SHOW,
+          contextName: LOG_CONTEXT_NAME.SHOW,
-        //   messageId: LOG_MESSAGE_ID.CONTENTCLICK,
+          messageId: LOG_MESSAGE_ID.CONTENTCLICK,
-        // };
+        };
-        // dispatch(sendLogTotalRecommend(params));
+        dispatch(sendLogTotalRecommend(params));
        // // DetailPanel push 전에 VideoPlayer 오버레이 숨김
        // dispatch(hidePlayerOverlays());
@@ -264,7 +291,10 @@ export default function ShopNowContents({
        // );
        // ===== navigateToDetail 방식 (handleYouMayLikeItemClick 참고) =====
-        console.log('[ShopNowContents] ShopNow DetailPanel 진입 - sourceMenu:', SOURCE_MENUS.PLAYER_SHOP_NOW);
+        console.log(
          "[ShopNowContents] ShopNow DetailPanel 진입 - sourceMenu:",
          SOURCE_MENUS.PLAYER_SHOP_NOW
        );
        dispatch(
          navigateToDetail({
@@ -276,7 +306,7 @@ export default function ShopNowContents({
              showId: playListInfo?.showId,
              liveFlag: playListInfo?.liveFlag,
              thumbnailUrl: playListInfo?.thumbnailUrl,
-              liveReqFlag: panelInfo?.shptmBanrTpNm === 'LIVE' && 'Y',
+              liveReqFlag: panelInfo?.shptmBanrTpNm === "LIVE" && "Y",
              launchedFromPlayer: true,
            },
          })
@@ -304,7 +334,7 @@ export default function ShopNowContents({
                  // v2에서 첫 번째 아이템일 때 위로 가면 Close 버튼으로
                  e.stopPropagation();
                  e.preventDefault();
-                  Spotlight.focus('shownow_close_button');
+                  Spotlight.focus("shownow_close_button");
                }
              : undefined
          }
@@ -341,7 +371,9 @@ export default function ShopNowContents({
            itemWidth={version === 2 ? 310 : videoVerticalVisible ? 540 : 600}
            itemHeight={version === 2 ? 445 : 236}
            spacing={version === 2 ? 30 : 12}
-            className={videoVerticalVisible ? css.verticalItemList : css.itemList}
+            className={
              videoVerticalVisible ? css.verticalItemList : css.itemList
            }
            noScrollByWheel={false}
            spotlightId="playVideoShopNowBox"
          />
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
@@ -1,11 +1,16 @@
 import React from 'react';
 import { compose } from 'ramda/src/compose';
 import Spotlight from '@enact/spotlight';
 import Spottable from '@enact/spotlight/Spottable';
-import { Marquee, MarqueeController } from '@enact/ui/Marquee';
+import {
-import { compose } from 'ramda/src/compose';
+  Marquee,
  MarqueeController,
 } from '@enact/ui/Marquee';
-import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
+import icon_arrow_dwon
  from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
 import CustomImage from '../../../../components/CustomImage/CustomImage';
 import { SpotlightIds } from '../../../../utils/SpotlightIds';
 import css from './LiveChannelNext.module.less';
@@ -18,14 +23,14 @@ export default function LiveChannelNext({
  programName = 'Sandal Black...',
  backgroundColor = 'linear-gradient(180deg, #284998 0%, #06B0EE 100%)',
  onClick,
  onFocus,
  spotlightId = 'live-channel-next-button',
 }) {
  const handleSpotlightUp = (e) => {
    e.stopPropagation();
    e.preventDefault();
-    Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
+    Spotlight.focus('player-subtitlebutton');
  };
  const handleSpotlightDown = (e) => {
    e.stopPropagation();
    e.preventDefault();
@@ -43,6 +48,7 @@ export default function LiveChannelNext({
      <SpottableDiv
        className={css.liveChannelButton}
        onClick={onClick}
        onFocus={onFocus}
        spotlightId={spotlightId}
        onSpotlightUp={handleSpotlightUp}
        onSpotlightDown={handleSpotlightDown}
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less
@@ -3,7 +3,7 @@
 .container {
  position: fixed;
-  bottom: 40px;
+  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
@@ -14,7 +14,7 @@
  max-width: 455px;
  height: 92px;
  padding: 10px 10px 10px 10px;
-  margin-bottom: 50px;
+  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(234, 234, 234, 0.3);
  border-radius: 100px;
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
@@ -21,6 +21,7 @@ import { $L } from '../../../../utils/helperMethods';
 import { SpotlightIds } from '../../../../utils/SpotlightIds';
 import usePrevious from '../../../../hooks/usePrevious';
 import LiveChannelContents from '../TabContents/LiveChannelContents';
 import FeaturedShowContents from '../TabContents/FeaturedShowContents';
 import ShopNowContents from '../TabContents/ShopNowContents';
 import ShopNowButton from './ShopNowButton';
 import LiveChannelNext from './LiveChannelNext';
@@ -272,17 +273,17 @@ export default function TabContainerV2({
          <SpottableDiv
            className={css.liveChannelButton}
            onClick={onLiveChannelButtonClick}
-            spotlightId="below-tab-live-channel-button"
+            spotlightId={panelInfo?.shptmBanrTpNm === 'LIVE' ? 'below-tab-live-channel-button' : 'below-tab-featured-show-button'}
            onSpotlightUp={handleSpotlightUpToBackButton}
            onSpotlightDown={(e) => {
              // 첫 번째 PlayerItem으로 포커스 이동
              Spotlight.focus('tabChannel-video-0');
            }}
            onSpotlightFocus={() => {
-              console.log('[TabContainerV2] below-tab-live-channel-button focused');
+              console.log('[TabContainerV2] below-tab button focused');
            }}
          >
-            <span className={css.buttonText}>LIVE CHANNEL</span>
+            <span className={css.buttonText}>{tabList[1]}</span>
            <div className={css.arrowIcon}>
              <img src={icon_arrow_dwon} alt="arrow down" />
            </div>
@@ -304,6 +305,23 @@ export default function TabContainerV2({
              direction="horizontal"
            />
          )}
          {panelInfo?.shptmBanrTpNm === 'VOD' && playListInfo && (
            <FeaturedShowContents
              tabTitle={tabList}
              featuredShowsInfos={playListInfo}
              currentVideoInfo={playListInfo[selectedIndex]}
              setSelectedIndex={setSelectedIndex}
              selectedIndex={selectedIndex}
              videoVerticalVisible={videoVerticalVisible}
              currentVideoShowId={playListInfo[selectedIndex]?.showId}
              tabIndex={tabIndex}
              handleItemFocus={_handleItemFocus}
              panelInfo={panelInfo}
              version={2}
              direction="horizontal"
            />
          )}
        </>
      )}
@@ -319,6 +337,7 @@ export default function TabContainerV2({
            }
            onClick={onLiveNext}
            spotlightId="live-channel-next-button"
            onFocus={onLiveNext}
          />
          <ShopNowButton onClick={onShopNowButtonClick} />
        </>
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx
@@ -4,55 +4,41 @@ import React, {
  useMemo,
  useRef,
  useState,
-} from 'react';
+} from "react";
-import {
+import { useDispatch, useSelector } from "react-redux";
  useDispatch,
  useSelector,
 } from 'react-redux';
-import { Job } from '@enact/core/util';
+import { Job } from "@enact/core/util";
-import Spotlight from '@enact/spotlight';
+import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
-import {
+import { sendLogGNB, sendLogTotalRecommend } from "../../actions/logActions";
-  sendLogGNB,
+import { getMyRecommandedKeyword } from "../../actions/myPageActions";
-  sendLogTotalRecommend,
+import { popPanel, updatePanel } from "../../actions/panelActions";
-} from '../../actions/logActions';
+import { getSearch, resetSearch } from "../../actions/searchActions";
-import { getMyRecommandedKeyword } from '../../actions/myPageActions';
+import TBody from "../../components/TBody/TBody";
-import {
+import TInput, { ICONS, KINDS } from "../../components/TInput/TInput";
-  popPanel,
+import TPanel from "../../components/TPanel/TPanel";
-  updatePanel,
+import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
-} from '../../actions/panelActions';
+import usePrevious from "../../hooks/usePrevious";
-import {
+import useSearchVoice from "../../hooks/useSearchVoice";
  getSearch,
  resetSearch,
 } from '../../actions/searchActions';
 import TBody from '../../components/TBody/TBody';
 import TInput, {
  ICONS,
  KINDS,
 } from '../../components/TInput/TInput';
 import TPanel from '../../components/TPanel/TPanel';
 import TVerticalPagenator
  from '../../components/TVerticalPagenator/TVerticalPagenator';
 import usePrevious from '../../hooks/usePrevious';
 import useSearchVoice from '../../hooks/useSearchVoice';
 import {
  LOG_CONTEXT_NAME,
  LOG_MENU,
  LOG_MESSAGE_ID,
  panel_names,
-} from '../../utils/Config';
+} from "../../utils/Config";
-import { SpotlightIds } from '../../utils/SpotlightIds';
+import { SpotlightIds } from "../../utils/SpotlightIds";
-import NoSearchResults from './NoSearchResults/NoSearchResults';
+import NoSearchResults from "./NoSearchResults/NoSearchResults";
-import RecommendedKeywords from './RecommendedKeywords/RecommendedKeywords';
+import RecommendedKeywords from "./RecommendedKeywords/RecommendedKeywords";
-import css from './SearchPanel.module.less';
+import css from "./SearchPanel.module.less";
-import SearchResults from './SearchResults/SearchResults';
+import SearchResults from "./SearchResults/SearchResults";
-const ContainerBasic = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
+const ContainerBasic = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
 );
 const ITEMS_PER_PAGE = 9;
 export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
@@ -69,7 +55,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
  const [currentPage, setCurrentPage] = useState(1);
  const [paginatedKeywords, setPaginatedKeywords] = useState([]);
  const [pageChanged, setPageChanged] = useState(false);
-  const [searchQuery, setSearchQuery] = useState(panelInfo.searchVal ? panelInfo.searchVal : null);
+  const [searchQuery, setSearchQuery] = useState(
    panelInfo.searchVal ? panelInfo.searchVal : null
  );
  const [position, setPosition] = useState(null);
  let searchQueryRef = usePrevious(searchQuery);
@@ -77,12 +65,16 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
  const isRecommendedSearchRef = useRef(false);
-  const firstButtonSpotlightId = 'first-keyword-button';
+  const firstButtonSpotlightId = "first-keyword-button";
  const focusJob = useRef(new Job((func) => func(), 100));
  const cbChangePageRef = useRef(null);
-  const [focusedContainerId, setFocusedContainerId] = useState(panelInfo?.focusedContainerId);
+  const [focusedContainerId, setFocusedContainerId] = useState(
    panelInfo?.focusedContainerId
  );
  const focusedContainerIdRef = usePrevious(focusedContainerId);
-  const bestSellerDatas = useSelector((state) => state.product.bestSellerData.bestSeller);
+  const bestSellerDatas = useSelector(
    (state) => state.product.bestSellerData.bestSeller
  );
  useEffect(() => {
    if (loadingComplete && !recommandedKeywords) {
@@ -145,7 +137,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
  //     dispatch(
  //       sendLogTotalRecommend({
  //         query: searchQuery,
-  //         searchType: searchPerformed ? 'query' : 'keyword',
+  //         searchType: searchPerformed ? "query" : "keyword",
  //         result: result,
  //         contextName: LOG_CONTEXT_NAME.SEARCH,
  //         messageId: LOG_MESSAGE_ID.SEARCH_ITEM,
@@ -160,9 +152,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
      if (query.trim()) {
        dispatch(
          getSearch({
-            service: 'com.lgshop.app',
+            service: "com.lgshop.app",
            query: query,
-            domain: 'theme,show,item',
+            domain: "theme,show,item",
          })
        );
      } else {
@@ -176,7 +168,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
  // STT 텍스트 수신 핸들러
  const handleSTTText = useCallback(
    (sttText) => {
-      console.log('[SearchPanel] STT text received:', sttText);
+      console.log("[SearchPanel] STT text received:", sttText);
      // 1. searchQuery 업데이트
      setSearchQuery(sttText);
@@ -185,9 +177,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
      if (sttText && sttText.trim()) {
        dispatch(
          getSearch({
-            service: 'com.lgshop.app',
+            service: "com.lgshop.app",
            query: sttText.trim(),
-            domain: 'theme,show,item',
+            domain: "theme,show,item",
          })
        );
      }
@@ -215,7 +207,8 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
  }, [currentPage]);
  const hasPrevPage = currentPage > 1;
-  const hasNextPage = currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
+  const hasNextPage =
    currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
  useEffect(() => {
    if (panelInfo && isOnTop) {
@@ -244,19 +237,21 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
      return;
    }
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
      handleSearchSubmit(searchQuery);
    }
    if (position === 0) {
-      if (e.key === 'Left' || e.key === 'ArrowLeft') {
+      if (e.key === "Left" || e.key === "ArrowLeft") {
        e.preventDefault();
      }
    }
  };
  const cursorPosition = () => {
-    const input = document.querySelector(`[data-spotlight-id="input-field-box"] > input`);
+    const input = document.querySelector(
      `[data-spotlight-id="input-field-box"] > input`
    );
    if (input) {
      setPosition(input.selectionStart);
    }
@@ -266,13 +261,13 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
    if (!isOnTopRef.current) {
      return;
    }
-    if (searchQuery === null || searchQuery === '') {
+    if (searchQuery === null || searchQuery === "") {
      dispatch(popPanel(panel_names.SEARCH_PANEL));
    } else {
-      setSearchQuery('');
+      setSearchQuery("");
      setCurrentPage(1);
      dispatch(resetSearch());
-      Spotlight.focus('search-input-box');
+      Spotlight.focus("search-input-box");
    }
  }, [searchQuery, dispatch]);
@@ -284,7 +279,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
          Spotlight.resume();
          setFirstSpot(true);
          if (panelInfo.currentSpot) {
-            if (panels[panels.length - 1]?.name === 'searchpanel') {
+            if (panels[panels.length - 1]?.name === "searchpanel") {
              Spotlight.focus(panelInfo.currentSpot);
            }
          }
@@ -303,13 +298,21 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
  }, [panelInfo, firstSpot]);
  return (
-    <TPanel className={css.container} handleCancel={onCancel} spotlightId={spotlightId}>
+    <TPanel
-      <TBody className={css.tBody} scrollable={false} spotlightDisabled={!isOnTop}>
+      className={css.container}
      handleCancel={onCancel}
      spotlightId={spotlightId}
    >
      <TBody
        className={css.tBody}
        scrollable={false}
        spotlightDisabled={!isOnTop}
      >
        <ContainerBasic>
          {isOnTop && (
            <TVerticalPagenator
              className={css.tVerticalPagenator}
-              spotlightId={'search_verticalPagenator'}
+              spotlightId={"search_verticalPagenator"}
              defaultContainerId={panelInfo?.focusedContainerId}
              disabled={!isOnTop}
              // onScrollStop={onScrollStop}
@@ -320,7 +323,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
              <ContainerBasic
                className={css.inputContainer}
                data-wheel-point={true}
-                spotlightId={'search-input-layer'}
+                spotlightId={"search-input-layer"}
              >
                <TInput
                  className={css.inputBox}
@@ -332,7 +335,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                  onKeyDown={handleKeydown}
                  onKeyUp={cursorPosition}
                  forcedSpotlight="first-keyword-button"
-                  spotlightId={'search-input-box'}
+                  spotlightId={"search-input-box"}
                />
              </ContainerBasic>
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.v2.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.v2.jsx
@@ -1987,35 +1987,25 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
  /**
   * LOG 용도,
   * 검색 시 로그를 보내는 용도의 이펙트
   * 우선 주석처리 (계속보내는부분에 대한 처리 필요)
   */
-  // useEffect(() => {
+  useEffect(() => {
-  //   const result = Object.values(searchDatas).reduce((acc, curr) => {
+    const result = Object.values(searchDatas).reduce((acc, curr) => {
-  //     return acc + curr.length;
+      return acc + curr.length;
-  //   }, 0);
+    }, 0);
-  //   if (searchQuery) {
+    if (searchQuery) {
-  //     dispatch(
+      dispatch(
-  //       sendLogTotalRecommend({
+        sendLogTotalRecommend({
-  //         query: searchQuery,
+          query: searchQuery,
-  //         searchType: searchPerformed ? 'query' : 'keyword',
+          searchType: searchPerformed ? 'query' : 'keyword',
-  //         result: result,
+          result: result,
-  //         contextName: LOG_CONTEXT_NAME.SEARCH,
+          contextName: LOG_CONTEXT_NAME.SEARCH,
-  //         messageId: LOG_MESSAGE_ID.SEARCH_ITEM,
+          messageId: LOG_MESSAGE_ID.SEARCH_ITEM,
-  //       })
+        })
-  //     );
+      );
-
+    }
-  //     // 검색 완료 후 결과에 따른 Toast 표시
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-  //     // if (searchPerformed && searchQuery.trim()) {
+  }, [searchDatas, searchPerformed, searchQuery]);
  //     //   if (result > 0) {
  //     //     dispatch(showSearchSuccessToast(searchQuery, result));
  //     //   } else {
  //     //     dispatch(showSearchErrorToast(searchQuery));
  //     //   }
  //     // }
  //   }
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [searchDatas, searchPerformed, searchQuery]);
  /**
   * clean up 용도
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchItemCard.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchItemCard.jsx
@@ -80,11 +80,20 @@ export default memo(function SearchItemCard({
      const xContainer = tItemCard?.parentNode?.parentNode;
      const yContainer = tBody?.children[0]?.children[0]?.children[0];
      // 할인율 계산
      const discountRate =
        priceNumber > discountPriceNumber
          ? Math.round(
              ((priceNumber - discountPriceNumber) / priceNumber) * 100
            ) + "%"
          : "";
      sendLog({
        productId: prdtId,
        productTitle: title,
        partner: patncNm,
-        price: dcPrice ? dcPrice : price,
+        price: price,
        discount: discountRate,
        resultType: "item",
      });
      if (xContainer && yContainer) {
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchThemeCard.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchThemeCard.jsx
@@ -60,6 +60,8 @@ export default memo(function SearchThemeCard({
      const yContainer = tBody?.children[0]?.children[0]?.children[0];
      sendLog({
        contentId: curationId,
        contentTitle: title,
        productId: prdtId,
        productTitle: title,
        partner: patncNm,
--- a/com.twin.app.shoptime/src/views/UserReview/UserReviewPanel.jsx
+++ b/com.twin.app.shoptime/src/views/UserReview/UserReviewPanel.jsx
@@ -1,18 +1,29 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {
  useCallback,
  useEffect,
  useState,
 } from 'react';
 import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
-import { popPanel, updatePanel } from '../../actions/panelActions';
+import {
-import { getUserReviewList, clearReviewFilter } from '../../actions/productActions';
+  popPanel,
  updatePanel,
 } from '../../actions/panelActions';
 import {
  clearReviewFilter,
  getUserReviewList,
 } from '../../actions/productActions';
 import TBody from '../../components/TBody/TBody';
 import TPanel from '../../components/TPanel/TPanel';
 import useReviews, { REVIEW_VERSION } from '../../hooks/useReviews/useReviews';
 import fp from '../../utils/fp';
 import { panel_names } from '../../utils/Config';
 import { createDebugHelpers } from '../../utils/debug';
 import fp from '../../utils/fp';
 import StarRating from '../DetailPanel/components/StarRating';
-import UserReviewsPopup from '../DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup';
+import UserReviewsPopup
  from '../DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup';
 import FilterItemButton from './components/FilterItemButton';
 import UserReviewsList from './components/UserReviewsList';
 import UserReviewHeader from './UserReviewHeader';
@@ -20,7 +31,7 @@ import css from './UserReviewPanel.module.less';
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
-const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
+const { dlog, dwarn, derror /* eslint-disable-line no-unused-vars */ } = createDebugHelpers(DEBUG_MODE);
 // 버전에 따른 UI 설정
 const VERSION_LABEL = REVIEW_VERSION === 1 ? '[v1 - 기존 API]' : '[v2 - 신 API]';
@@ -41,8 +52,8 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
    userReviewPanelTotalPages,
    goToNextUserReviewPage,
    goToPrevUserReviewPage,
-    applyRatingFilter,
+    applyRatingFilter, // eslint-disable-line no-unused-vars
-    applySentimentFilter,
+    applySentimentFilter, // eslint-disable-line no-unused-vars
    clearAllFilters,
    currentFilter,
    filterCounts,
@@ -50,10 +61,10 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
    _debug,
    // 🎯 API 기반 필터링 데이터
    filters,
-    filteredReviewListData,
+    filteredReviewListData, // eslint-disable-line no-unused-vars
    currentReviewFilter,
    // 전체 리뷰 데이터 (팝업용)
-    allReviews,
+    allReviews, // eslint-disable-line no-unused-vars
    filteredReviews, // ✅ 필터링된 전체 리뷰 (팝업에서 사용)
    getReviewsWithImages,
    extractImagesFromReviews,
@@ -178,55 +189,63 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
  }, [filters]);
  // API 기반 KEYWORDS 필터 데이터 추출 (IF-LGSP-100)
-  const keywordsFilterData = React.useMemo(() => {
+  // const keywordsFilterData = React.useMemo(() => {
-    if (!filters || !Array.isArray(filters)) {
+  //   if (!filters || !Array.isArray(filters)) {
-      return [];
+  //     return [];
-    }
+  //   }
-    const keywordsFilter = filters.find((f) => f.filterTpCd === 'KEYWORDS');
+  //   const keywordsFilter = filters.find((f) => f.filterTpCd === 'KEYWORDS');
-    if (!keywordsFilter) {
+  //   if (!keywordsFilter) {
-      dlog('[UserReviewPanel] ⚠️ KEYWORDS 필터 데이터 없음');
+  //     dlog('[UserReviewPanel] ⚠️ KEYWORDS 필터 데이터 없음');
-      return [];
+  //     return [];
-    }
+  //   }
-    dlog('[UserReviewPanel] 🎯 KEYWORDS 필터 데이터 추출:', {
+  //   dlog('[UserReviewPanel] 🎯 KEYWORDS 필터 데이터 추출:', {
-      keywordsFilter,
+  //     keywordsFilter,
-      filterItems: keywordsFilter.filter,
+  //     filterItems: keywordsFilter.filter,
-    });
+  //   });
-    // filter 배열을 그대로 반환 (filterNm, filterNmCnt, filterTpVal 포함)
+  //   // filter 배열을 그대로 반환 (filterNm, filterNmCnt, filterTpVal 포함)
-    return Array.isArray(keywordsFilter.filter) ? keywordsFilter.filter : [];
+  //   return Array.isArray(keywordsFilter.filter) ? keywordsFilter.filter : [];
-  }, [filters]);
+  // }, [filters]);
  // API 기반 SENTIMENT 필터 데이터 추출 (IF-LGSP-100)
-  const sentimentFilterData = React.useMemo(() => {
+  // const sentimentFilterData = React.useMemo(() => {
-    if (!filters || !Array.isArray(filters)) {
+  //   if (!filters || !Array.isArray(filters)) {
-      return {};
+  //     return {};
-    }
+  //   }
-    const sentimentFilter = filters.find((f) => f.filterTpCd === 'SENTIMENT');
+  //   const sentimentFilter = filters.find((f) => f.filterTpCd === 'SENTIMENT');
-    if (!sentimentFilter) {
+  //   if (!sentimentFilter) {
-      dlog('[UserReviewPanel] ⚠️ SENTIMENT 필터 데이터 없음');
+  //     dlog('[UserReviewPanel] ⚠️ SENTIMENT 필터 데이터 없음');
-      return {};
+  //     return {};
-    }
+  //   }
-    dlog('[UserReviewPanel] 🎯 SENTIMENT 필터 데이터 추출:', {
+  //   dlog('[UserReviewPanel] 🎯 SENTIMENT 필터 데이터 추출:', {
-      sentimentFilter,
+  //     sentimentFilter,
-      filterItems: sentimentFilter.filter,
+  //     filterItems: sentimentFilter.filter,
-    });
+  //   });
-    // filter 배열을 { filterTpVal: filterNmCnt } 형태로 변환
+  //   // filter 배열을 { filterTpVal: filterNmCnt } 형태로 변환
-    const sentimentMap = {};
+  //   const sentimentMap = {};
-    if (Array.isArray(sentimentFilter.filter)) {
+  //   if (Array.isArray(sentimentFilter.filter)) {
-      sentimentFilter.filter.forEach((item) => {
+  //     sentimentFilter.filter.forEach((item) => {
-        sentimentMap[item.filterTpVal] = item.filterNmCnt;
+  //       sentimentMap[item.filterTpVal] = item.filterNmCnt;
-      });
+  //     });
-    }
+  //   }
-    return sentimentMap;
+  //   return sentimentMap;
-  }, [filters]);
+  // }, [filters]);
-  // API 기반 별점 필터 핸들러
+  // const getApiKeywordClickHandler = useCallback(
  //   (keywordValue) => () => handleApiKeywordsFilter(keywordValue),
  //   [handleApiKeywordsFilter]
  // );
  // const getApiSentimentClickHandler = useCallback(
  //   (sentimentValue) => () => handleApiSentimentFilter(sentimentValue),
  //   [handleApiSentimentFilter]
  // );
  const handleApiRatingFilter = useCallback(
    (rating) => {
      if (!prdtId || !patnrId) {
@@ -277,94 +296,94 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
  const handle1StarsFilter = useCallback(() => handleApiRatingFilter(1), [handleApiRatingFilter]);
  // API 기반 KEYWORDS 필터 핸들러
-  const handleApiKeywordsFilter = useCallback(
+  // const handleApiKeywordsFilter = useCallback(
-    (keyword) => {
+  //   (keyword) => {
-      if (!prdtId || !patnrId) {
+  //     if (!prdtId || !patnrId) {
-        dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
+  //       dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
-        return;
+  //       return;
-      }
+  //     }
-      dlog('[UserReviewPanel] 🔄 키워드 필터 API 호출:', { keyword, prdtId, patnrId });
+  //     dlog('[UserReviewPanel] 🔄 키워드 필터 API 호출:', { keyword, prdtId, patnrId });
-      setForceScrollToTop(true);
+  //     setForceScrollToTop(true);
-      dispatch(
+  //     dispatch(
-        getUserReviewList({
+  //       getUserReviewList({
-          prdtId,
+  //         prdtId,
-          patnrId,
+  //         patnrId,
-          filterTpCd: 'KEYWORDS',
+  //         filterTpCd: 'KEYWORDS',
-          filterTpVal: keyword,
+  //         filterTpVal: keyword,
-          pageSize: 100,
+  //         pageSize: 100,
-          pageNo: 1,
+  //         pageNo: 1,
-        })
+  //       })
-      );
+  //     );
-    },
+  //   },
-    [prdtId, patnrId, dispatch]
+  //   [prdtId, patnrId, dispatch]
-  );
+  // );
  // API 기반 SENTIMENT 필터 핸들러
-  const handleApiSentimentFilter = useCallback(
+  // const handleApiSentimentFilter = useCallback(
-    (sentiment) => {
+  //   (sentiment) => {
-      if (!prdtId || !patnrId) {
+  //     if (!prdtId || !patnrId) {
-        dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
+  //       dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
-        return;
+  //       return;
-      }
+  //     }
-      dlog('[UserReviewPanel] 🔄 감정 필터 API 호출:', { sentiment, prdtId, patnrId });
+  //     dlog('[UserReviewPanel] 🔄 감정 필터 API 호출:', { sentiment, prdtId, patnrId });
-      setForceScrollToTop(true);
+  //     setForceScrollToTop(true);
-      if (sentiment === 'all') {
+  //     if (sentiment === 'all') {
-        // ALL 필터로 리뷰 재로드
+  //       // ALL 필터로 리뷰 재로드
-        dispatch(
+  //       dispatch(
-          getUserReviewList({
+  //         getUserReviewList({
-            prdtId,
+  //           prdtId,
-            patnrId,
+  //           patnrId,
-            filterTpCd: 'ALL',
+  //           filterTpCd: 'ALL',
-            pageSize: 100,
+  //           pageSize: 100,
-            pageNo: 1,
+  //           pageNo: 1,
-          })
+  //         })
-        );
+  //       );
-      } else {
+  //     } else {
-        // SENTIMENT 필터로 리뷰 조회
+  //       // SENTIMENT 필터로 리뷰 조회
-        dispatch(
+  //       dispatch(
-          getUserReviewList({
+  //         getUserReviewList({
-            prdtId,
+  //           prdtId,
-            patnrId,
+  //           patnrId,
-            filterTpCd: 'SENTIMENT',
+  //           filterTpCd: 'SENTIMENT',
-            filterTpVal: sentiment,
+  //           filterTpVal: sentiment,
-            pageSize: 100,
+  //           pageSize: 100,
-            pageNo: 1,
+  //           pageNo: 1,
-          })
+  //         })
-        );
+  //       );
-      }
+  //     }
-    },
+  //   },
-    [prdtId, patnrId, dispatch]
+  //   [prdtId, patnrId, dispatch]
-  );
+  // );
-  const handleAromaClick = useCallback(
+  // const handleAromaClick = useCallback(
-    () => handleApiKeywordsFilter('Aroma'),
+  //   () => handleApiKeywordsFilter('Aroma'),
-    [handleApiKeywordsFilter]
+  //   [handleApiKeywordsFilter]
-  );
+  // );
-  const handleVanillaClick = useCallback(
+  // const handleVanillaClick = useCallback(
-    () => handleApiKeywordsFilter('Vanilla'),
+  //   () => handleApiKeywordsFilter('Vanilla'),
-    [handleApiKeywordsFilter]
+  //   [handleApiKeywordsFilter]
-  );
+  // );
-  const handleCinnamonClick = useCallback(
+  // const handleCinnamonClick = useCallback(
-    () => handleApiKeywordsFilter('Cinnamon'),
+  //   () => handleApiKeywordsFilter('Cinnamon'),
-    [handleApiKeywordsFilter]
+  //   [handleApiKeywordsFilter]
-  );
+  // );
-  const handleQualityClick = useCallback(
+  // const handleQualityClick = useCallback(
-    () => handleApiKeywordsFilter('Quality'),
+  //   () => handleApiKeywordsFilter('Quality'),
-    [handleApiKeywordsFilter]
+  //   [handleApiKeywordsFilter]
-  );
+  // );
-  const handlePositiveClick = useCallback(
+  // const handlePositiveClick = useCallback(
-    () => handleApiSentimentFilter('positive'),
+  //   () => handleApiSentimentFilter('positive'),
-    [handleApiSentimentFilter]
+  //   [handleApiSentimentFilter]
-  );
+  // );
-  const handleNegativeClick = useCallback(
+  // const handleNegativeClick = useCallback(
-    () => handleApiSentimentFilter('negative'),
+  //   () => handleApiSentimentFilter('negative'),
-    [handleApiSentimentFilter]
+  //   [handleApiSentimentFilter]
-  );
+  // );
  // forceScrollToTop 리셋 - 스크롤 리셋 완료 후 false로 변경
  useEffect(() => {
@@ -609,7 +628,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
                </div>
              </div>
-              <div className={css.reviewsSection__filters__section}>
+              {/* <div className={css.reviewsSection__filters__section}>
                <div className={css.reviewsSection__filters__sectionTitle}>
                  <div className={css.reviewsSection__filters__sectionTitle__text}>Keywords</div>
                </div>
@@ -621,7 +640,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
                        <FilterItemButton
                          key={keyword.filterTpVal}
                          text={`${keyword.filterNm} (${keyword.filterNmCnt})`}
-                          onClick={() => handleApiKeywordsFilter(keyword.filterTpVal)}
+                          onClick={getApiKeywordClickHandler(keyword.filterTpVal)}
                          spotlightId={`filter-keyword-${index}`}
                          ariaLabel={`Filter by ${keyword.filterNm} keyword`}
                          dataSpotlightUp={
@@ -693,7 +712,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
                        <FilterItemButton
                          key={sentiment}
                          text={`${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)} (${count})`}
-                          onClick={() => handleApiSentimentFilter(sentiment)}
+                          onClick={getApiSentimentClickHandler(sentiment)}
                          spotlightId={`filter-sentiment-${sentiment}`}
                          ariaLabel={`Filter by ${sentiment} sentiment`}
                          dataSpotlightUp={
@@ -748,7 +767,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
                    </>
                  )}
                </div>
-              </div>
+              </div> */}
            </div>
          </div>
Author	SHA1	Message	Date
opacity@t-win.kr	dcfd65ff51	Revert "브랜치 비교 자동로직 추가" This reverts commit `5df65be218`.	2025-12-05 17:16:13 +09:00
opacity@t-win.kr	1883ede1b9	Merge feature/si_log: 통합로그 수정사항 적용	2025-12-05 17:10:44 +09:00
opacity@t-win.kr	02416ad976	serach 통합로그 원복	2025-12-05 17:07:16 +09:00
opacity@t-win.kr	429577327e	[통합로그]SearchThemeCard 로그정보 수정	2025-12-05 16:19:17 +09:00
opacity@t-win.kr	3dd8b341e7	[통합로그]SearchItemcard 할인률 적용	2025-12-05 16:16:39 +09:00
opacity@t-win.kr	7a9a778b71	[통합로그]search 로그 정보 수정	2025-12-05 16:10:21 +09:00
opacity@t-win.kr	4e2014ae41	[통합로그]ShopNowContents 로그 정보 수정	2025-12-05 15:55:21 +09:00
opacity@t-win.kr	d7f374a94f	[통합로그]onsale 로그 정보 수정	2025-12-05 15:48:41 +09:00
opacity@t-win.kr	14b4a6a37d	gnb 진입시 panelInfo 가 비어있으면 첫번째 카테고리를 기본값으로 설정	2025-12-05 14:35:22 +09:00
opacity@t-win.kr	d6216907a0	[통합로그]Reminders 로그 수정	2025-12-05 13:50:30 +09:00
opacity@t-win.kr	47f29d2a0f	[통합로그]RecentlyViewedContents 수정	2025-12-05 13:46:42 +09:00
opacity@t-win.kr	e64925544a	[통합로그]Favorites 로그 정보 수정	2025-12-05 13:43:02 +09:00
opacity@t-win.kr	9acbab834b	[통합로그]livechannels 로그 수정	2025-12-05 13:27:48 +09:00
opacity@t-win.kr	f140210234	[통합로그]FeaturedBrand 정보수집 로그수정	2025-12-05 13:23:58 +09:00
opacity@t-win.kr	516c865c6d	[통합로그]Youmayalsolike 로그 전달 수정	2025-12-05 13:20:17 +09:00
opacity@t-win.kr	96bb74b341	[통합로그]shop by mobile 버튼 클릭시 수집	2025-12-05 10:54:30 +09:00
opacity@t-win.kr	931560dbbb	[통합로그]TItemCard showId, title,contentId로그 수정	2025-12-05 10:50:18 +09:00
opacity@t-win.kr	4817a4ad5a	Merge branch 'develop_si' into feature/si_log	2025-12-05 10:43:14 +09:00
opacity@t-win.kr	5df65be218	브랜치 비교 자동로직 추가	2025-12-05 10:41:41 +09:00
opacity@t-win.kr	6b501af680	[통합로그] webOS > shoptime 진입점 정보수집-재수정	2025-12-05 10:25:22 +09:00
junghoon86.park	44e50521fa	[롤링유닛 변경건] - 선택약관 미동의시 링크가 남아 다른걸 눌러도 저스트 포유 페이지로 들어가는 문제가 발견되어 수정.	2025-12-04 16:20:52 +09:00
junghoon86.park	49f137620b	[영상 작동 수정] - 영상 화면 live next 버튼에 포커스가 가면 영상 리스트가 노출되도록 변경. - onFocus 추가하여 focus시 작동하도록 변경.	2025-12-04 15:51:19 +09:00
opacity@t-win.kr	eb1be273e3	[통합로그] webOS > shoptime 진입점 정보수집	2025-12-04 15:24:21 +09:00
junghoon86.park	37574c0794	[장바구니] - 하단 checkout버튼 조건 추가.	2025-12-04 13:25:49 +09:00
junghoon86.park	86ece1d39d	[장바구니] - 회원정보없을시 기록되어있는 데이터가 아닌 0으로 노출되도록 변경. - 장바구니 데이터없을시 노출되는 베스트셀러상품부분 노출수정(스타일변경)	2025-12-04 12:34:19 +09:00
junghoon86.park	59441bcc7b	[영상 포커스 이동 처리] - cc버튼에서 아래로 이동시 next 버튼으로 가도록 변경 - next버튼에서 위로 이동시 cc 버튼으로 가도록 변경	2025-12-03 18:00:36 +09:00
optrader	5e823b8e03	[251203] fix: VOD-FeaturedShows-로그정리 🕐 커밋 시간: 2025. 12. 03. 12:33:05 📊 변경 통계: • 총 파일: 2개 • 추가: +34줄 • 삭제: -34줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx 🔧 주요 변경 내용: • 소규모 기능 개선 • 코드 정리 및 최적화	2025-12-03 12:33:06 +09:00
optrader	feb10dfe24	[251203] fix: VOD-FeaturedShows-3 🕐 커밋 시간: 2025. 12. 03. 12:24:56 📊 변경 통계: • 총 파일: 1개 • 추가: +1줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx	2025-12-03 12:24:56 +09:00
optrader	5d1a208e0d	[251203] fix: VOD-FeaturedShows-2 🕐 커밋 시간: 2025. 12. 03. 12:19:37 📊 변경 통계: • 총 파일: 1개 • 추가: +14줄 • 삭제: -3줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx	2025-12-03 12:19:38 +09:00
optrader	c5566d8af5	[251203] fix: VOD-FeaturedShows-1 🕐 커밋 시간: 2025. 12. 03. 12:17:10 📊 변경 통계: • 총 파일: 2개 • 추가: +53줄 • 삭제: -5줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx 🔧 주요 변경 내용: • 소규모 기능 개선	2025-12-03 12:17:10 +09:00
junghoon86.park	478849cfa1	[상품 상세 스타일 변경] - add to cart 버튼 삭제 - buy now 버튼으로 통일.	2025-12-03 10:18:20 +09:00
optrader	fbd4f4024d	[251202] fix: VOD-FeaturedShows 🕐 커밋 시간: 2025. 12. 02. 17:54:40 📊 변경 통계: • 총 파일: 4개 • 추가: +48줄 • 삭제: -15줄 📁 추가된 파일: + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.v2.module.less 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx 🔧 주요 변경 내용: • 소규모 기능 개선	2025-12-02 17:54:41 +09:00
optrader	6f62c7b65c	Remove .docs	2025-12-02 06:22:10 +00:00
optrader	9200e7f704	Remove .docs from tracking	2025-12-02 06:14:45 +00:00
junghoon86.park	c522fe2777	[상품 상세 노출 변경에 따른 처리] - 상품명 노출추가. - theadercustom부분에 themetitle부분 처리. - qr 크기 조절.(240px -> 190px) - 금액 노출부분 하단으로 떨구도록	2025-12-01 18:18:13 +09:00
junghoon86.park	579512402e	[상품 상세 버튼 눌렀을시에 포커스 처리 수정] - 버튼별각 섹션에 포커스 가도록 변경. - SHOPTIME-4036 1번 관련 처리.	2025-12-01 09:51:26 +09:00
junghoon86.park	8ebaf3f19a	[리뷰패널 수정] - 리뷰 shopperhouse poc종료로 인하여 키워드, 단어부분에 대한 api를 내려주지않는다고 하여 우선 주석처리.	2025-11-28 09:34:06 +09:00
junghoon86.park	2289001006	[상품 상세] 장바구니 담을때 팝업 노출관련 수정 - 장바구니 담을때 토스트 블러로 인하여 자동으로 닫히는부분 에 대한 수정 - 매직마우스는 상관이없지만 4방향키에서 문제가 있어 이부분에 대한 수정.	2025-11-26 20:39:21 +09:00
optrader	9439630bad	[251126] feat: Featured Brands - NBCU - 1 🕐 커밋 시간: 2025. 11. 26. 19:43:03 📊 변경 통계: • 총 파일: 4개 • 추가: +20줄 • 삭제: -3줄 📁 추가된 파일: + com.twin.app.shoptime/assets/images/featuredBrands/image-nbcu.png + com.twin.app.shoptime/assets/images/featuredBrands/nbcu.svg + com.twin.app.shoptime/src/components/TabLayout/iconComponents/NbcuIcon.jsx 📝 수정된 파일: ~ com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx 🔧 주요 변경 내용: • UI 컴포넌트 아키텍처 개선	2025-11-26 19:43:04 +09:00
junghoon86.park	0a2ef0e68b	[영상 스타일 수정] - 노출 이상부분 수정과 버튼 위치 및 프로그레스바 위치변경.	2025-11-26 17:17:12 +09:00
optrader	96cbd1f67e	[251126] fix: Remove Lint warinings - 1 🕐 커밋 시간: 2025. 11. 26. 14:59:11 📊 변경 통계: • 총 파일: 12개 • 추가: +47줄 • 삭제: -50줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/App/App.js ~ com.twin.app.shoptime/src/App/deepLinkHandler.js ~ com.twin.app.shoptime/src/actions/appDataActions.js ~ com.twin.app.shoptime/src/actions/billingActions.js ~ com.twin.app.shoptime/src/actions/brandActions.js ~ com.twin.app.shoptime/src/actions/cancelActions.js ~ com.twin.app.shoptime/src/actions/cardActions.js ~ com.twin.app.shoptime/src/actions/checkoutActions.js ~ com.twin.app.shoptime/src/actions/commonActions.js ~ com.twin.app.shoptime/src/actions/convertActions.js ~ com.twin.app.shoptime/src/actions/couponActions.js ~ com.twin.app.shoptime/src/views/UserReview/UserReviewPanel.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • 소규모 기능 개선 • 코드 정리 및 최적화 • 모듈 구조 개선 Performance: 코드 최적화로 성능 개선 기대	2025-11-26 14:59:12 +09:00
optrader	e8464b98b6	Merge remote-tracking branch 'gitlab/develop_si' into develop_si	2025-11-26 14:17:14 +09:00
optrader	4904c6fb58	[251126] fix: Log Migration - SearchPanel.new.v2.jsx 🕐 커밋 시간: 2025. 11. 26. 14:16:12 📊 변경 통계: • 총 파일: 4개 • 추가: +51줄 • 삭제: -81줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/App/App.js ~ com.twin.app.shoptime/src/actions/commonActions.js ~ com.twin.app.shoptime/src/api/TAxios.js ~ com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.v2.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • API 서비스 레이어 개선 • 소규모 기능 개선 • 코드 정리 및 최적화 Performance: 코드 최적화로 성능 개선 기대	2025-11-26 14:16:13 +09:00
junghoon86.park	1c9db184fa	[상품상세] 녹화된 영상 관련 문구 노출 - productallsection에서 disclaimer 내려주고 - productVideo 에서 노출하는 방식으로 노출 - 단 재생시에는 자막관련노출이 겹쳐져 재생이 종료이후 노출됨.	2025-11-26 14:14:26 +09:00
optrader	3add749c07	[251126] fix: Log Migration - DetailPanel Done 🕐 커밋 시간: 2025. 11. 26. 13:47:36 📊 변경 통계: • 총 파일: 1개 • 추가: +32줄 • 삭제: -3줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx 🔧 주요 변경 내용: • 소규모 기능 개선	2025-11-26 13:47:36 +09:00
optrader	3c3662f791	[251126] fix: Log Migration - DetailPanel sendLogDetail 🕐 커밋 시간: 2025. 11. 26. 13:17:14 📊 변경 통계: • 총 파일: 1개 • 추가: +107줄 • 삭제: -3줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx 🔧 주요 변경 내용: • 중간 규모 기능 개선	2025-11-26 13:17:14 +09:00
optrader	42eda7e0bb	[251126] fix: Log Migration - DetailPanel sendLogGNB 🕐 커밋 시간: 2025. 11. 26. 12:45:16 📊 변경 통계: • 총 파일: 3개 • 추가: +71줄 • 삭제: -1줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx 🔧 주요 변경 내용: • 소규모 기능 개선	2025-11-26 12:45:17 +09:00
optrader	d795182d4c	[251126] fix: Log Migration - PlayerPanel.jsx 🕐 커밋 시간: 2025. 11. 26. 10:08:34 📊 변경 통계: • 총 파일: 2개 📝 수정된 파일: ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx 🔧 주요 변경 내용: • UI 컴포넌트 아키텍처 개선	2025-11-26 10:08:35 +09:00