[foryou] foryou패널 노출관련 처리 및 에너지라벨 노출 처리#1

- homebanner에서 justforyou dispatch처리. - 포유부분 노출 처리 - TITEMCARD videoshow 부분 에너지라벨 미노출 변경. - foryou패널에서 10000자리 넘어가는부분에 대한 스타일 수정 및 금액에따른 스타일변경 처리 변경. - 롤링 배너쪽 미작업
2025-10-20 13:27:49 +09:00
parent f70e2b1a21
commit 6c0830f3f8
5 changed files with 354 additions and 216 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
@@ -1,11 +1,21 @@
 // src/views/HomePanel/HomeBanner/HomeBanner.jsx

-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';

-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 { types } from '../../../actions/actionTypes';
@@ -17,9 +27,16 @@ import {
  setOptionalTermsUserDecision,
  updateOptionalTermsAgreement,
 } from '../../../actions/commonActions';
-import { fetchCurrentUserHomeTerms, setDefaultFocus } from '../../../actions/homeActions';
+import { getJustForYouInfo } from '../../../actions/forYouActions';
+import {
+  fetchCurrentUserHomeTerms,
+  setDefaultFocus,
+} from '../../../actions/homeActions';
 import { setMyPageTermsAgree } from '../../../actions/myPageActions';
-import { popPanel, pushPanel } from '../../../actions/panelActions';
+import {
+  popPanel,
+  pushPanel,
+} from '../../../actions/panelActions';
 import {
  releasePlayControl,
  requestPlayControl,
@@ -29,6 +46,11 @@ 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';
+import { useVideoPlay } from '../../../hooks/useVideoPlay/useVideoPlay';
+import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove';
 import { panel_names } from '../../../utils/Config';
 import { $L } from '../../../utils/helperMethods';
 import css from './HomeBanner.module.less';
@@ -40,38 +62,53 @@ import Random from './RandomUnit';
 import RandomUnitNew from './RandomUnit';
 import Rolling from './RollingUnit';
 import SimpleVideoContainer from './SimpleVideoContainer';
-import { useFocusHistory } from '../../../hooks/useFocusHistory/useFocusHistory';
-import { useVideoPlay } from '../../../hooks/useVideoPlay/useVideoPlay';
-import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove';

-const SpottableComponent = Spottable('div');
-const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
-const ContainerBasic = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
+const SpottableComponent = Spottable("div");
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+const ContainerBasic = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);

-export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, handleShelfFocus }) {
+export default function HomeBanner({
+  firstSpot,
+  spotlightId,
+  handleItemFocus,
+  handleShelfFocus,
+}) {
  const dispatch = useDispatch();
-  const homeTopDisplayInfo = useSelector((state) => state.home.homeTopDisplayInfo);
+  useEffect(() => {
+    dispatch(getJustForYouInfo());
+  }, [dispatch]);
+  const homeTopDisplayInfo = useSelector(
+    (state) => state.home.homeTopDisplayInfo
+  );

-  const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
+  const bannerDataList = useSelector(
+    (state) => state.home.bannerData?.bannerInfos
+  );

  const popupVisible = useSelector((state) => state.common.popup.popupVisible);
  // 🔽 useFocusHistory - 경량화된 범용 포커스 히스토리
  const focusHistory = useFocusHistory({
    enableLogging: true,
    useGlobalState: true,
-    logPrefix: '[HomeBanner-Focus]',
+    logPrefix: "[HomeBanner-Focus]",
  });

  // 🔽 useVideoPlay - 동영상 재생 제어
  const videoPlay = useVideoPlay({
    enableLogging: true,
-    logPrefix: '[HomeBanner-VideoPlay]',
+    logPrefix: "[HomeBanner-VideoPlay]",
  });

  // 🔽 useVideoMove - 포커스 전환 기반 동영상 제어
  const { playByTransition, cleanup } = useVideoMove({
    enableLogging: true,
-    logPrefix: '[HomeBanner-VideoMove]',
+    logPrefix: "[HomeBanner-VideoMove]",
  });

  const selectTemplate = useMemo(() => {
@@ -86,11 +123,19 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha

  const termsData = useSelector((state) => state.home.termsData);
  const termsIdMap = useSelector((state) => state.home.termsIdMap);
-  const optionalTermsAvailable = useSelector((state) => state.home.optionalTermsAvailable);
+  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');
+    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;
  });
@@ -98,22 +143,27 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
  const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
  const currentTermsFlag = useSelector((state) => state.common.termsFlag);
  // 선택약관 동의여부
-  const introTermsAgree = useSelector((state) => state.common.termsFlag.optionalTerms);
+  const introTermsAgree = useSelector(
+    (state) => state.common.termsFlag.optionalTerms
+  );

  // 새로운 Redux 상태: 선택약관 팝업 플로우 관리
-  const optionalTermsPopupFlow = useSelector((state) => state.common.optionalTermsPopupFlow);
+  const optionalTermsPopupFlow = useSelector(
+    (state) => state.common.optionalTermsPopupFlow
+  );

  //------------------------------------------------------------------------------
  // 팝업표시 상태
-  const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = useState(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: 상태 확인', {
+    if (process.env.NODE_ENV === "development") {
+      console.log("[HomeBanner] Step 1: 상태 확인", {
        termsLoading,
        isGnbOpened,
        optionalTermsAvailable,
@@ -123,8 +173,8 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha

    // 1. 기본 조건 확인
    if (termsLoading || isGnbOpened || !optionalTermsAvailable) {
-      if (process.env.NODE_ENV === 'development') {
-        console.log('[HomeBanner] Early return: 기본 조건 불만족');
+      if (process.env.NODE_ENV === "development") {
+        console.log("[HomeBanner] Early return: 기본 조건 불만족");
      }
      return false;
    }
@@ -135,35 +185,38 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
      optionalTermsPopupFlow.userDecision ||
      optionalTermsPopupFlow.agreedInSession
    ) {
-      if (process.env.NODE_ENV === 'development') {
-        console.log('[HomeBanner] Early return: 이미 처리됨', optionalTermsPopupFlow);
+      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 (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가 존재하지 않음');
+      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 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'
+      ? optionalTerm.trmsPopFlag === "Y" && optionalTerm.trmsAgrFlag === "N"
      : false;

-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] Step 4: 최종 결과', result);
+    if (process.env.NODE_ENV === "development") {
+      console.log("[HomeBanner] Step 4: 최종 결과", result);
    }
    return result;
  }, [
@@ -177,67 +230,67 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
  // 선택약관 팝업 표시 여부 ===================================================

  const handleOptionalAgree = useCallback(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] handleAgree Click');
+    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);
+      if (process.env.NODE_ENV === "development") {
+        console.error("[HomeBanner] termsIdMap이 없습니다:", termsIdMap);
      }
      return;
    }

-    const requiredTermTypes = ['MST00401', 'MST00402', 'MST00405'];
+    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);
+      if (process.env.NODE_ENV === "development") {
+        console.error("[HomeBanner] 누락된 약관 타입:", missingTerms);
      }
      return;
    }

    const termsList = [];

-    if (termsIdMap['MST00401']) {
-      termsList.push(termsIdMap['MST00401']); // 개인정보처리방침
+    if (termsIdMap["MST00401"]) {
+      termsList.push(termsIdMap["MST00401"]); // 개인정보처리방침
    }
-    if (termsIdMap['MST00402']) {
-      termsList.push(termsIdMap['MST00402']); // 이용약관
+    if (termsIdMap["MST00402"]) {
+      termsList.push(termsIdMap["MST00402"]); // 이용약관
    }
-    if (termsIdMap['MST00405']) {
-      termsList.push(termsIdMap['MST00405']); // 선택약관
+    if (termsIdMap["MST00405"]) {
+      termsList.push(termsIdMap["MST00405"]); // 선택약관
    }

    const notTermsList = [];

-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] 현재 termsIdMap:', termsIdMap);
-      console.log('[HomeBanner] 약관 동의 API 호출 파라미터:', {
+    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);
+      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.error("[HomeBanner] 약관 동의 실패:", response);
        }
      }
    };

-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] 약관 동의 API 호출 payload:', {
+    if (process.env.NODE_ENV === "development") {
+      console.log("[HomeBanner] 약관 동의 API 호출 payload:", {
        termsList,
        notTermsList,
      });
@@ -247,8 +300,8 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
  }, [dispatch, termsIdMap]);

  const handleOptionalTermsClick = useCallback(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] 약관 자세히 보기 클릭');
+    if (process.env.NODE_ENV === "development") {
+      console.log("[HomeBanner] 약관 자세히 보기 클릭");
    }
    setIsOptionalConfirmVisible(false);
    setIsOptionalTermsVisible(true);
@@ -262,14 +315,14 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
      type: types.GET_TERMS_AGREE_YN_SUCCESS,
      payload: {
        ...currentTermsFlag,
-        optionalTerms: 'Y',
+        optionalTerms: "Y",
      },
    });
  }, [handleOptionalAgree]);

  const handleOptionalDeclineClick = useCallback(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] 거절/다음에 하기 버튼 클릭');
+    if (process.env.NODE_ENV === "development") {
+      console.log("[HomeBanner] 거절/다음에 하기 버튼 클릭");
    }
    // ✅ 거절 상태 업데이트
    dispatch(updateOptionalTermsAgreement(false));
@@ -280,13 +333,13 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
  const handleTermsPopupClosed = useCallback(() => {
    setIsOptionalTermsVisible(false);
    setIsOptionalConfirmVisible(true);
-    Spotlight.focus('optional-confirm-popup');
+    Spotlight.focus("optional-confirm-popup");
  }, []);

  // 선택약관 팝업 Agree
  const handleTermsPopupAgree = useCallback(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[HomeBanner] handleTermsPopupAgree');
+    if (process.env.NODE_ENV === "development") {
+      console.log("[HomeBanner] handleTermsPopupAgree");
    }
    handleOptionalAgree();
    setIsOptionalTermsVisible(false);
@@ -306,22 +359,24 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
        const data = bannerDataList[i];
        let bannerDetailInfos = data.bannerDetailInfos;

-        if (data.shptmDspyTpNm === 'Random') {
+        if (data.shptmDspyTpNm === "Random") {
          if (
-            bannerDetailInfos[data.randomIndex].shptmBanrTpNm === 'LIVE' ||
-            bannerDetailInfos[data.randomIndex].shptmBanrTpNm === 'VOD'
+            bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "LIVE" ||
+            bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "VOD"
          ) {
            targetIndex = i;
            break;
          }
        } else if (
-          bannerDetailInfos.find((el) => el.shptmBanrTpNm === 'LIVE' || el.shptmBanrTpNm === 'VOD')
+          bannerDetailInfos.find(
+            (el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
+          )
        ) {
          targetIndex = i;
          break;
        }
      }
-      return 'banner' + targetIndex;
+      return "banner" + targetIndex;
    }

    return null;
@@ -336,8 +391,8 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha

    // 선택 약관 팝업을 띄워야 하는 경우
    if (shouldShowOptionalTermsPopup && !isOptionalConfirmVisible) {
-      console.log('shouldShowOptionalTermsPopup', shouldShowOptionalTermsPopup);
-      console.log('App.js optionalTermsConfirm 팝업 표시');
+      console.log("shouldShowOptionalTermsPopup", shouldShowOptionalTermsPopup);
+      console.log("App.js optionalTermsConfirm 팝업 표시");

      const timer = setTimeout(() => {
        setIsOptionalConfirmVisible(true);
@@ -348,36 +403,41 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
      // 컴포넌트 언마운트 시 타이머 클리어
      return () => clearTimeout(timer);
    }
-  }, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]);
+  }, [
+    shouldShowOptionalTermsPopup,
+    termsLoading,
+    isOptionalConfirmVisible,
+    dispatch,
+  ]);

  const renderItem = useCallback(
    (index, isHorizontal, videoPlayerable = false) => {
      const data = bannerDataList?.[index] ?? {};
      return (
        <div className={!isHorizontal ? css.imgBox : undefined}>
-          {data.shptmDspyTpNm === 'Rolling' ? (
+          {data.shptmDspyTpNm === "Rolling" ? (
            <Rolling
              bannerData={data}
              isHorizontal={isHorizontal}
-              key={'banner' + index}
-              spotlightId={'banner' + index}
+              key={"banner" + index}
+              spotlightId={"banner" + index}
              handleShelfFocus={_handleShelfFocus}
              handleItemFocus={_handleItemFocus}
              videoPlayerable={videoPlayerable}
            />
-          ) : data.shptmDspyTpNm === 'Random' ? (
+          ) : data.shptmDspyTpNm === "Random" ? (
            <Random
              bannerData={data}
              isHorizontal={isHorizontal}
-              key={'banner' + index}
-              spotlightId={'banner' + index}
+              key={"banner" + index}
+              spotlightId={"banner" + index}
              handleShelfFocus={_handleShelfFocus}
              handleItemFocus={_handleItemFocus}
              randomNumber={data.randomIndex}
              videoPlayerable={videoPlayerable}
            />
          ) : (
-            <SpottableComponent spotlightId={'banner' + index}>
+            <SpottableComponent spotlightId={"banner" + index}>
              <CustomImage
                delay={0}
                src={
@@ -386,7 +446,9 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
                    : homeTopDisplayInfo.vtctpImgPath1
                }
                aria-label={
-                  isHorizontal ? homeTopDisplayInfo.wdthtpImgNm1 : homeTopDisplayInfo.vtctpImgNm1
+                  isHorizontal
+                    ? homeTopDisplayInfo.wdthtpImgNm1
+                    : homeTopDisplayInfo.vtctpImgNm1
                }
              />
            </SpottableComponent>
@@ -403,14 +465,14 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
      const data = bannerDataList?.[index] ?? {};

      // DSP00201 레이아웃의 두 번째 배너는 새로운 RandomUnitNew를 사용
-      if (selectTemplate === 'DSP00201' && index === 1) {
+      if (selectTemplate === "DSP00201" && index === 1) {
        return (
          <div className={!isHorizontal ? css.imgBox : undefined}>
            <RandomUnitNew
              bannerData={data}
              isHorizontal={isHorizontal}
-              key={'banner' + index}
-              spotlightId={'banner' + index}
+              key={"banner" + index}
+              spotlightId={"banner" + index}
              handleShelfFocus={_handleShelfFocus}
              handleItemFocus={_handleItemFocus}
              randomNumber={data.randomIndex}
@@ -420,14 +482,14 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
      }

      // 다른 타입의 유닛 렌더링 (예: RollingUnit)
-      if (data.shptmDspyTpNm === 'Rolling') {
+      if (data.shptmDspyTpNm === "Rolling") {
        return (
          <div className={!isHorizontal ? css.imgBox : undefined}>
            <RollingUnit
              bannerData={data}
              isHorizontal={isHorizontal}
-              key={'banner' + index}
-              spotlightId={'banner' + index}
+              key={"banner" + index}
+              spotlightId={"banner" + index}
              handleShelfFocus={_handleShelfFocus}
              handleItemFocus={_handleItemFocus}
            />
@@ -436,8 +498,11 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
      }
      // 기본 이미지만 있는 배너 등 다른 케이스 처리
      return (
-        <div className={!isHorizontal ? css.imgBox : undefined} key={'banner' + index}>
-          <SpottableComponent spotlightId={'banner' + index}>
+        <div
+          className={!isHorizontal ? css.imgBox : undefined}
+          key={"banner" + index}
+        >
+          <SpottableComponent spotlightId={"banner" + index}>
            {/* ... 정적 이미지 렌더링 로직 ... */}
          </SpottableComponent>
        </div>
@@ -452,7 +517,7 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
      return (
        <div className={!isHorizontal ? css.imgBox : undefined}>
          <SimpleVideoContainer
-            spotlightId={'banner' + index} // "banner0"
+            spotlightId={"banner" + index} // "banner0"
            isHorizontal={isHorizontal}
            handleShelfFocus={_handleShelfFocus}
          />
@@ -467,7 +532,7 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
      return (
        <div className={!isHorizontal ? css.imgBox : undefined}>
          <SimpleVideoContainer
-            spotlightId={'banner' + index}
+            spotlightId={"banner" + index}
            isHorizontal={isHorizontal}
            handleShelfFocus={_handleShelfFocus}
          />
@@ -478,12 +543,12 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
  );

  useEffect(() => {
-    console.log('####introTermsAgree', introTermsAgree);
+    console.log("####introTermsAgree", introTermsAgree);
  }, [introTermsAgree]);

  const renderLayout = useCallback(() => {
    switch (selectTemplate) {
-      case 'DSP00201': {
+      case "DSP00201": {
        return (
          <>
            <ContainerBasic className={css.smallBox}>
@@ -492,14 +557,14 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
            </ContainerBasic>
            {renderItem(2, false, false)}
            {/* //NOTE - 약관 동의 여부 & 추후 API 따라 팝업 표시 여부 결정 */}
-            {introTermsAgree === 'Y' ? (
+            {introTermsAgree === "Y" ? (
              <div className={css.imgBox}>
                <JustForSwitchBanner
                  renderItem={renderItem}
                  handleShelfFocus={_handleShelfFocus}
                  handleItemFocus={_handleItemFocus}
                  isHorizontal={false}
-                  spotlightId={'banner3'}
+                  spotlightId={"banner3"}
                />
              </div>
            ) : (
@@ -508,7 +573,7 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
          </>
        );
      }
-      case 'DSP00202': {
+      case "DSP00202": {
        return (
          <>
            {renderItem(0, false, false)}
@@ -520,7 +585,7 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
          </>
        );
      }
-      case 'DSP00203': {
+      case "DSP00203": {
        return (
          <>
            {renderItem(0, false, false)}
@@ -538,7 +603,11 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha

  return (
    <>
-      <Container className={css.container} spotlightId={spotlightId} data-wheel-point={true}>
+      <Container
+        className={css.container}
+        spotlightId={spotlightId}
+        data-wheel-point={true}
+      >
        <div className={css.homeTemplateBox}>{renderLayout()}</div>
      </Container>
      {/* 선택약관 동의 팝업 */}
@@ -551,19 +620,19 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
        onOptionalDeclineClick={handleOptionalDeclineClick}
        customPosition={true}
        position={{
-          position: 'absolute',
-          top: '342px', // 가운데를 기준으로 한 좌표 (1080/2) - 198
-          left: '0px',
-          bottom: 'unset',
-          transform: 'none',
+          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 || ''}
+        title={$L("Optional Terms")}
+        text={optionalTermsData?.trmsCntt || ""}
        onClose={handleTermsPopupClosed}
        onAgreeClick={handleTermsPopupAgree}
        showAgreeButton={true}