[251123] fix: OptionalTerms->HomePanel로 이동

🕐 커밋 시간: 2025. 11. 23. 19:18:58

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +281줄
  • 삭제: -483줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/package-lock.json
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()
    ❌ Deleted: callback()
  📄 com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx (javascript):
    ✅ Added: callback()

Performance: 코드 최적화로 성능 개선 기대

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx

@@ -8,19 +8,8 @@ import Spotlight from '@enact/spotlight';
 import { SpotlightContainerDecorator } from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
-import { types } from '../../../actions/actionTypes';
-import {
-  changeAppStatus,
-  handleOptionalTermsAgree as handleOptionalTermsAgreeAction,
-  handleOptionalTermsDecline,
-  setOptionalTermsPopupShown,
-  setOptionalTermsUserDecision,
-  updateOptionalTermsAgreement,
-} from '../../../actions/commonActions';
+import { changeAppStatus } from '../../../actions/commonActions';
 import { justForYou } from '../../../actions/forYouActions';
-import { fetchCurrentUserHomeTerms, setDefaultFocus } from '../../../actions/homeActions';
-import { setMyPageTermsAgree } from '../../../actions/myPageActions';
-import { popPanel, pushPanel } from '../../../actions/panelActions';
 import {
   clearAllVideoTimers,
   releasePlayControl,
@@ -29,9 +18,6 @@ import {
   startVideoPlayerNew,
 } from '../../../actions/playActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
-// import TButtonScroller from "../../../components/TButtonScroller/TButtonScroller";
-import OptionalConfirm from '../../../components/Optional/OptionalConfirm';
-import TNewPopUp from '../../../components/TPopUp/TNewPopUp';
 import { useFocusHistory } from '../../../hooks/useFocusHistory/useFocusHistory';
 // [COMMENTED OUT] useVideoMove 관련 코드 주석 처리 - 향후 사용 검토 필요
 // import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove';
@@ -113,215 +99,9 @@ export default function HomeBanner({
     }
   }, [handleItemFocus]);
 
-  const termsData = useSelector((state) => state.home.termsData);
-  const termsIdMap = useSelector((state) => state.home.termsIdMap);
-  const optionalTermsAvailable = useSelector((state) => state.home.optionalTermsAvailable);
-  const optionalTermsData = useSelector((state) => {
-    // Chromium68 호환성을 위해 Optional Chaining 제거
-    if (state.home.termsData && state.home.termsData.data && state.home.termsData.data.terms) {
-      return state.home.termsData.data.terms.find((term) => term.trmsTpCd === 'MST00405');
-    }
-    return null;
-  });
-  const termsLoading = useSelector((state) => state.common.termsLoading);
-  const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
-  const currentTermsFlag = useSelector((state) => state.common.termsFlag);
-
-  // 새로운 Redux 상태: 선택약관 팝업 플로우 관리
-  const optionalTermsPopupFlow = useSelector((state) => state.common.optionalTermsPopupFlow);
-
   // 🔽 초기 비디오 재생 플래그 (1회만 실행되도록)
   const isInitialVideoPlayRef = useRef(false);
 
-  //------------------------------------------------------------------------------
-  // 팝업표시 상태
-  const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = useState(false);
-  const [isOptionalTermsVisible, setIsOptionalTermsVisible] = useState(false);
-
-  const [optionalTermsAgreed, setOptionalTermsAgreed] = useState(false);
-
-  // 선택약관 팝업 표시 여부 ===================================================
-  const shouldShowOptionalTermsPopup = useMemo(() => {
-    // if (process.env.NODE_ENV === "development") {
-    //   console.log("[HomeBanner] Step 1: 상태 확인", {
-    //     termsLoading,
-    //     isGnbOpened,
-    //     optionalTermsAvailable,
-    //     optionalTermsPopupFlow,
-    //   });
-    // }
-
-    // 1. 기본 조건 확인
-    if (termsLoading || isGnbOpened || !optionalTermsAvailable) {
-      if (process.env.NODE_ENV === 'development') {
-        console.log('[HomeBanner] Early return: 기본 조건 불만족');
-      }
-      return false;
-    }
-
-    // 2. 새로운 Redux 상태 확인 (TV 환경 최적화)
-    if (
-      optionalTermsPopupFlow.popupShown ||
-      optionalTermsPopupFlow.userDecision ||
-      optionalTermsPopupFlow.agreedInSession
-    ) {
-      if (process.env.NODE_ENV === 'development') {
-        console.log('[HomeBanner] Early return: 이미 처리됨', optionalTermsPopupFlow);
-      }
-      return false;
-    }
-
-    // 3. 서버 데이터 확인
-    const terms = termsData && termsData.data && termsData.data.terms;
-    // if (process.env.NODE_ENV === "development") {
-    //   console.log("[HomeBanner] Step 2: termsData 확인", terms);
-    // }
-    if (!terms) {
-      if (process.env.NODE_ENV === 'development') {
-        console.log('[HomeBanner] Early return: terms가 존재하지 않음');
-      }
-      return false;
-    }
-
-    const optionalTerm = terms.find((term) => term.trmsTpCd === 'MST00405');
-    // if (process.env.NODE_ENV === "development") {
-    //   console.log("[HomeBanner] Step 3: optionalTerm 검색 결과", optionalTerm);
-    // }
-
-    const result = optionalTerm
-      ? optionalTerm.trmsPopFlag === 'Y' && optionalTerm.trmsAgrFlag === 'N'
-      : false;
-
-    // if (process.env.NODE_ENV === "development") {
-    //   console.log("[HomeBanner] Step 4: 최종 결과", result);
-    // }
-    return result;
-  }, [
-    termsData.data?.terms,
-    termsLoading,
-    isGnbOpened,
-    optionalTermsAvailable,
-    optionalTermsPopupFlow,
-  ]);
-
-  // 선택약관 팝업 표시 여부 ===================================================
-
-  const handleOptionalAgree = useCallback(() => {
-    // if (process.env.NODE_ENV === "development") {
-    //   console.log("[HomeBanner] handleAgree Click");
-    // }
-
-    if (!termsIdMap || Object.keys(termsIdMap).length === 0) {
-      if (process.env.NODE_ENV === 'development') {
-        console.error('[HomeBanner] termsIdMap이 없습니다:', termsIdMap);
-      }
-      return;
-    }
-
-    const requiredTermTypes = ['MST00401', 'MST00402', 'MST00405'];
-    const missingTerms = requiredTermTypes.filter((type) => !termsIdMap[type]);
-
-    if (missingTerms.length > 0) {
-      if (process.env.NODE_ENV === 'development') {
-        console.error('[HomeBanner] 누락된 약관 타입:', missingTerms);
-      }
-      return;
-    }
-
-    const termsList = [];
-
-    if (termsIdMap['MST00401']) {
-      termsList.push(termsIdMap['MST00401']); // 개인정보처리방침
-    }
-    if (termsIdMap['MST00402']) {
-      termsList.push(termsIdMap['MST00402']); // 이용약관
-    }
-    if (termsIdMap['MST00405']) {
-      termsList.push(termsIdMap['MST00405']); // 선택약관
-    }
-
-    const notTermsList = [];
-
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] 현재 termsIdMap:', termsIdMap);
-      console.log('[HomeBanner] 약관 동의 API 호출 파라미터:', {
-        termsList,
-        notTermsList,
-      });
-    }
-
-    const callback = (response) => {
-      if (response.retCode === '000' || response.retCode === 0) {
-        if (process.env.NODE_ENV === 'development') {
-          console.log('[HomeBanner] 약관 동의 성공:', response);
-        }
-        // ✅ IntroPanel과 동일한 방식으로 Redux 상태 직접 업데이트 (API 호출 없이)
-        dispatch(updateOptionalTermsAgreement(true));
-        // 로컬 상태도 업데이트 (기존 로직 유지)
-        setOptionalTermsAgreed(true);
-      } else {
-        if (process.env.NODE_ENV === 'development') {
-          console.error('[HomeBanner] 약관 동의 실패:', response);
-        }
-      }
-    };
-
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] 약관 동의 API 호출 payload:', {
-        termsList,
-        notTermsList,
-      });
-    }
-
-    dispatch(setMyPageTermsAgree({ termsList, notTermsList }, callback));
-  }, [dispatch, termsIdMap]);
-
-  const handleOptionalTermsClick = useCallback(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] 약관 자세히 보기 클릭');
-    }
-    setIsOptionalConfirmVisible(false);
-    setIsOptionalTermsVisible(true);
-    // 약관 상세 팝업을 띄우는 로직 추가
-  }, []);
-
-  const handleOptionalAgreeClick = useCallback(() => {
-    handleOptionalAgree();
-    setIsOptionalConfirmVisible(false);
-    dispatch({
-      type: types.GET_TERMS_AGREE_YN_SUCCESS,
-      payload: {
-        ...currentTermsFlag,
-        optionalTerms: 'Y',
-      },
-    });
-  }, [handleOptionalAgree]);
-
-  const handleOptionalDeclineClick = useCallback(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] 거절/다음에 하기 버튼 클릭');
-    }
-    // ✅ 거절 상태 업데이트
-    dispatch(updateOptionalTermsAgreement(false));
-    setIsOptionalConfirmVisible(false);
-  }, [dispatch]);
-
-  // 선택약관 팝업 Close
-  const handleTermsPopupClosed = useCallback(() => {
-    setIsOptionalTermsVisible(false);
-    setIsOptionalConfirmVisible(true);
-    Spotlight.focus('optional-confirm-popup');
-  }, []);
-
-  // 선택약관 팝업 Agree
-  const handleTermsPopupAgree = useCallback(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] handleTermsPopupAgree');
-    }
-    handleOptionalAgree();
-    setIsOptionalTermsVisible(false);
-  }, [handleOptionalAgree]);
-
   //------------------------------------------------------------------------------
   const _handleShelfFocus = useCallback(() => {
     if (handleShelfFocus) {
@@ -402,29 +182,6 @@ export default function HomeBanner({
     }
   }, [bannerDataList, defaultFocus, dispatch]);
 
-  // 약관 동의 및 선택 약관 팝업 처리 (TV 환경 최적화)
-  useEffect(() => {
-    if (termsLoading) {
-      // 약관 데이터 로딩 중에는 아무것도 하지 않음
-      return;
-    }
-
-    // 선택 약관 팝업을 띄워야 하는 경우
-    if (shouldShowOptionalTermsPopup && !isOptionalConfirmVisible) {
-      console.log('shouldShowOptionalTermsPopup', shouldShowOptionalTermsPopup);
-      console.log('App.js optionalTermsConfirm 팝업 표시');
-
-      const timer = setTimeout(() => {
-        setIsOptionalConfirmVisible(true);
-        // 팝업이 실제로 표시된 후에 Redux 상태 업데이트
-        dispatch(setOptionalTermsPopupShown(true));
-      }, 1000);
-
-      // 컴포넌트 언마운트 시 타이머 클리어
-      return () => clearTimeout(timer);
-    }
-  }, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]);
-
   const renderItem = useCallback(
     (index, isHorizontal) => {
       const data = bannerDataList?.[index] ?? {};
@@ -560,33 +317,6 @@ export default function HomeBanner({
       <Container className={css.container} spotlightId={spotlightId} data-wheel-point={true}>
         <div className={css.homeTemplateBox}>{renderLayout()}</div>
       </Container>
-      {/* 선택약관 동의 팝업 */}
-      <OptionalConfirm
-        open={isOptionalConfirmVisible}
-        spotlightId="optional-confirm-popup"
-        onClose={handleOptionalDeclineClick}
-        onOptionalTermsClick={handleOptionalTermsClick}
-        onOptionalAgreeClick={handleOptionalAgreeClick}
-        onOptionalDeclineClick={handleOptionalDeclineClick}
-        customPosition={true}
-        position={{
-          position: 'absolute',
-          top: '342px', // 가운데를 기준으로 한 좌표 (1080/2) - 198
-          left: '0px',
-          bottom: 'unset',
-          transform: 'none',
-        }}
-      />
-      {/* 선택약관 자세히 보기 팝업 */}
-      <TNewPopUp
-        kind="figmaTermsPopup"
-        open={isOptionalTermsVisible}
-        title={$L('Optional Terms')}
-        text={optionalTermsData?.trmsCntt || ''}
-        onClose={handleTermsPopupClosed}
-        onAgreeClick={handleTermsPopupAgree}
-        showAgreeButton={true}
-      />
     </>
   );
 }