[foryou] 로그인, 비로그인시 노출 차이 수정

- 포유 아이콘 관련 처리부분 비로그인시 노출안되도록 처리.
 - 픽포유는 홈패널에서 노출로 처리.

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

@@ -6,7 +6,11 @@ import Spotlight from '@enact/spotlight';
 import { SpotlightContainerDecorator } from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
-import { pushPanel, updatePanel, navigateFromBestSeller } from '../../../actions/panelActions';
+import {
+  navigateFromBestSeller,
+  pushPanel,
+  updatePanel,
+} from '../../../actions/panelActions';
 import { navigateToDetailFromHome } from '../../../actions/panelNavigationActions';
 import SectionTitle from '../../../components/SectionTitle/SectionTitle';
 import Tag from '../../../components/TItemCard/Tag';
@@ -15,13 +19,20 @@ import TItemCardNew from '../../../components/TItemCard/TItemCard.new';
 import TScroller from '../../../components/TScroller/TScroller';
 import useScrollReset from '../../../hooks/useScrollReset';
 import useScrollTo from '../../../hooks/useScrollTo';
-import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, panel_names } from '../../../utils/Config';
+import {
+  LOG_CONTEXT_NAME,
+  LOG_MESSAGE_ID,
+  panel_names,
+} from '../../../utils/Config';
 import { $L, scaleW } from '../../../utils/helperMethods';
 import { SpotlightIds } from '../../../utils/SpotlightIds';
 import css from './BestSeller.module.less';
 
 const SpottableComponent = Spottable('div');
-const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
+const Container = SpotlightContainerDecorator(
+  { enterTo: 'last-focused' },
+  'div'
+);
 
 const BestSeller = ({
   order,
@@ -33,15 +44,26 @@ const BestSeller = ({
   shelfTitle,
 }) => {
   const { getScrollTo, scrollLeft } = useScrollTo();
-  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollLeft, true);
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(
+    scrollLeft,
+    true
+  );
 
   const dispatch = useDispatch();
 
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
 
-  const bestSellerDatas = useSelector((state) => state.product.bestSellerData?.bestSeller);
+  const bestSellerDatas = useSelector(
+    (state) => state.product.bestSellerData?.bestSeller
+  );
 
-  const bestSellerNewDatas = useSelector((state) => state.foryou?.recommendInfo?.recommendProduct);
+  const bestSellerNewDatas = useSelector(
+    (state) => state.foryou?.recommendInfo?.recommendProduct
+  );
+
+  const { userNumber } = useSelector(
+    (state) => state.common.appStatus.loginUserData
+  );
 
   const [drawChk, setDrawChk] = useState(false);
   const [firstChk, setFirstChk] = useState(0);
@@ -51,37 +73,45 @@ const BestSeller = ({
 
   useEffect(() => {
     setBestInfos(
-      bestSellerNewDatas?.filter((item) => item.recommendTpCd === 'BESTSELLER') || [] // 기본값으로 빈 배열 설정
+      bestSellerNewDatas?.filter(
+        (item) => item.recommendTpCd === 'BESTSELLER'
+      ) || [] // 기본값으로 빈 배열 설정
     );
   }, [bestSellerNewDatas]);
 
   useEffect(() => {
-    if (!bestInfos || bestInfos.length === 0) {
+    if (userNumber) {
+      if (!bestInfos || bestInfos.length === 0) {
+        const baseData =
+          bestSellerDatas?.map((item) => ({
+            ...item,
+            foryou: false,
+          })) || [];
+        setBestItemNewData(baseData);
+        return;
+      }
+
+      const recommendedData =
+        bestInfos[0].productInfos?.map((item) => ({
+          ...item,
+          foryou: true,
+        })) || [];
+
+      const recommendedPrdtIds = new Set(
+        recommendedData.map((item) => item.prdtId)
+      );
+
       const baseData =
         bestSellerDatas?.map((item) => ({
           ...item,
-          foryou: false,
+          foryou: recommendedPrdtIds.has(item.prdtId),
         })) || [];
+
       setBestItemNewData(baseData);
-      return;
+    } else {
+      setBestItemNewData(bestSellerDatas);
     }
-
+  }, [bestSellerDatas, bestInfos, userNumber]);
-    const recommendedData =
-      bestInfos[0].productInfos?.map((item) => ({
-        ...item,
-        foryou: true,
-      })) || [];
-
-    const recommendedPrdtIds = new Set(recommendedData.map((item) => item.prdtId));
-
-    const baseData =
-      bestSellerDatas?.map((item) => ({
-        ...item,
-        foryou: recommendedPrdtIds.has(item.prdtId),
-      })) || [];
-
-    setBestItemNewData(baseData);
-  }, [bestSellerDatas, bestInfos]);
 
   const orderStyle = useMemo(() => ({ order: order }), [order]);
 
@@ -144,7 +174,10 @@ const BestSeller = ({
         if (c) {
           let cAriaLabel = c.getAttribute('aria-label');
           if (cAriaLabel) {
-            const newcAriaLabel = cAriaLabel.replace('Best Seller, Heading 1,', '');
+            const newcAriaLabel = cAriaLabel.replace(
+              'Best Seller, Heading 1,',
+              ''
+            );
             c.setAttribute('aria-label', newcAriaLabel);
           }
         }

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

@@ -7,10 +7,7 @@ import React, {
 } from 'react';
 
 import classNames from 'classnames';
-import {
+import { useDispatch, useSelector } from 'react-redux';
-  useDispatch,
-  useSelector,
-} from 'react-redux';
 import { applyMiddleware } from 'redux';
 
 import Spotlight from '@enact/spotlight';
@@ -23,11 +20,11 @@ import {
 import hsn from '../../../assets/images/bg/hsn_new.png';
 import koreaKiosk from '../../../assets/images/bg/koreaKiosk_new.png';
 import lgelectronics from '../../../assets/images/bg/lgelectronics_new.png';
+import nbcu from '../../../assets/images/bg/nbcu_new.png';
 import ontv4u from '../../../assets/images/bg/ontv4u_new.png';
 import Pinkfong from '../../../assets/images/bg/Pinkfong_new.png';
 import qvc from '../../../assets/images/bg/qvc_new.png';
 import shoplc from '../../../assets/images/bg/shoplc_new.png';
-import nbcu from '../../../assets/images/bg/nbcu_new.png';
 import { types } from '../../actions/actionTypes';
 import {
   changeAppStatus,
@@ -45,14 +42,8 @@ import {
   getHomeMainContents,
   updateHomeInfo,
 } from '../../actions/homeActions';
-import {
+import { sendLogGNB, sendLogTotalRecommend } from '../../actions/logActions';
-  sendLogGNB,
+import { getSubCategory, getTop20Show } from '../../actions/mainActions';
-  sendLogTotalRecommend,
-} from '../../actions/logActions';
-import {
-  getSubCategory,
-  getTop20Show,
-} from '../../actions/mainActions';
 import { setMyPageTermsAgree } from '../../actions/myPageActions';
 import { getHomeOnSaleInfo } from '../../actions/onSaleActions';
 import { updatePanel } from '../../actions/panelActions';
@@ -69,8 +60,7 @@ import TButton, { TYPES } from '../../components/TButton/TButton';
 import TPanel from '../../components/TPanel/TPanel';
 import TNewPopUp from '../../components/TPopUp/TNewPopUp';
 import TPopUp from '../../components/TPopUp/TPopUp';
-import TVerticalPagenator
+import TVerticalPagenator from '../../components/TVerticalPagenator/TVerticalPagenator';
-  from '../../components/TVerticalPagenator/TVerticalPagenator';
 import useDebugKey from '../../hooks/useDebugKey';
 import { useFocusHistory } from '../../hooks/useFocusHistory/useFocusHistory';
 import usePrevious from '../../hooks/usePrevious';
@@ -178,68 +168,113 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
   // });
   const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
   const homeLayoutInfo = useSelector((state) => state.home.layoutData);
-  const panelInfo = useSelector((state) => state.home.homeInfo?.panelInfo ?? {});
+  const panelInfo = useSelector(
+    (state) => state.home.homeInfo?.panelInfo ?? {}
+  );
   const panels = useSelector((state) => state.panels.panels);
-  const webOSVersion = useSelector((state) => state.common.appStatus?.webOSVersion);
+  const webOSVersion = useSelector(
+    (state) => state.common.appStatus?.webOSVersion
+  );
   const enterThroughGNB = useSelector((state) => state.home.enterThroughGNB);
   const defaultFocus = useSelector((state) => state.home.defaultFocus);
-  const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
+  const bannerDataList = useSelector(
+    (state) => state.home.bannerData?.bannerInfos
+  );
 
   // ✅ PlayerPanel의 shouldShrinkTo1px 상태 추적
   const playerPanelShouldShrink = useSelector((state) => {
-    const playerPanel = state.panels.panels.find((p) => p.name === panel_names.PLAYER_PANEL);
+    const playerPanel = state.panels.panels.find(
+      (p) => p.name === panel_names.PLAYER_PANEL
+    );
     return playerPanel?.panelInfo?.shouldShrinkTo1px ?? false;
   });
 
   // ✅ PlayerPanel의 modal 상태 추적 (false → true 감지용)
   const playerModalState = useSelector((state) => {
-    const playerPanel = state.panels.panels.find((p) => p.name === panel_names.PLAYER_PANEL);
+    const playerPanel = state.panels.panels.find(
+      (p) => p.name === panel_names.PLAYER_PANEL
+    );
     return playerPanel?.panelInfo?.modal ?? false;
   });
   const prevPlayerModalStateRef = useRef(false);
 
-  const categoryInfos = useSelector((state) => state.onSale.homeOnSaleData?.data?.categoryInfos);
+  const categoryInfos = useSelector(
+    (state) => state.onSale.homeOnSaleData?.data?.categoryInfos
+  );
 
-  const categoryItemInfos = useSelector((state) => state.main.subCategoryData?.categoryItemInfos);
+  const categoryItemInfos = useSelector(
+    (state) => state.main.subCategoryData?.categoryItemInfos
+  );
 
-  const { popupVisible, activePopup } = useSelector((state) => state.common.popup);
+  const { popupVisible, activePopup } = useSelector(
+    (state) => state.common.popup
+  );
 
-  const eventPopInfosData = useSelector((state) => state.event.eventData.eventPopInfo);
+  const eventPopInfosData = useSelector(
+    (state) => state.event.eventData.eventPopInfo
+  );
   const eventData = useSelector((state) => state.event.eventData);
-  const eventClickSuccess = useSelector((state) => state.event.eventClickSuccess);
+  const eventClickSuccess = useSelector(
-  const homeOnSaleInfos = useSelector((state) => state.onSale.homeOnSaleData?.data.homeOnSaleInfos);
+    (state) => state.event.eventClickSuccess
-  const bestSellerDatas = useSelector((state) => state.product.bestSellerData?.bestSeller);
+  );
+  const homeOnSaleInfos = useSelector(
+    (state) => state.onSale.homeOnSaleData?.data.homeOnSaleInfos
+  );
+  const bestSellerDatas = useSelector(
+    (state) => state.product.bestSellerData?.bestSeller
+  );
   const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
-  const isDeepLink = useSelector((state) => state.common.deepLinkInfo.isDeepLink);
+  const isDeepLink = useSelector(
+    (state) => state.common.deepLinkInfo.isDeepLink
+  );
 
   // 선택약관 관련 Redux 상태
   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) => {
-    if (state.home.termsData && state.home.termsData.data && state.home.termsData.data.terms) {
+    if (
-      return state.home.termsData.data.terms.find((term) => term.trmsTpCd === 'MST00405');
+      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 currentTermsFlag = useSelector((state) => state.common.termsFlag);
-  const optionalTermsPopupFlow = useSelector((state) => state.common.optionalTermsPopupFlow);
+  const optionalTermsPopupFlow = useSelector(
+    (state) => state.common.optionalTermsPopupFlow
+  );
+
+  const { userNumber } = useSelector(
+    (state) => state.common.appStatus.loginUserData
+  );
 
   const [btnDisabled, setBtnDisabled] = useState(true);
   const [arrowBottom, setArrowBottom] = useState(true);
   const [firstSpot, setFirstSpot] = useState(false);
   const [eventPopOpen, setEventPopOpen] = useState(false);
   const [nowShelf, setNowShelf] = useState(panelInfo.nowShelf);
-  const [firstLgCatCd, setFirstLgCatCd] = useState(panelInfo.currentCatCd ?? null);
+  const [firstLgCatCd, setFirstLgCatCd] = useState(
+    panelInfo.currentCatCd ?? null
+  );
   const [cateCd, setCateCd] = useState(panelInfo.currentCatCd ?? null);
   const [cateNm, setCateNm] = useState(panelInfo.currentCateName ?? null);
   // 선택약관 팝업 상태
-  const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = useState(false);
+  const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] =
+    useState(false);
   const [isOptionalTermsVisible, setIsOptionalTermsVisible] = useState(false);
   const [optionalTermsAgreed, setOptionalTermsAgreed] = useState(false);
   const { entryMenu, nowMenu } = useSelector((state) => state.common.menu);
-  const [focusedContainerId, setFocusedContainerId] = useState(panelInfo.focusedContainerId);
+  const [focusedContainerId, setFocusedContainerId] = useState(
+    panelInfo.focusedContainerId
+  );
   // DetailPanel 진입 시 포커스 대상 저장
   const lastFocusedTargetRef = useRef(panelInfo.lastFocusedTargetId || null);
 
@@ -254,7 +289,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
   useEffect(() => {
     if (prevIsOnTopRef.current && !isOnTop) {
       const current = Spotlight.getCurrent();
-      const tBody = document.querySelector(`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`);
+      const tBody = document.querySelector(
+        `[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`
+      );
 
       if (current && tBody && tBody.contains(current)) {
         const targetId = current.getAttribute('data-spotlight-id');
@@ -286,7 +323,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
       ImagePreloader.preloadAllImages(BACKGROUND_IMAGES)
         .then((results) => {
           const successCount = results.filter((r) => r !== null).length;
-          dlog(`[HomePanel] Background images preloaded: ${successCount}/${results.length} images`);
+          dlog(
+            `[HomePanel] Background images preloaded: ${successCount}/${results.length} images`
+          );
 
           // 프리로딩 통계 정보 로깅 (디버깅용)
           const stats = ImagePreloader.getStats();
@@ -312,7 +351,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
 
   const sortedHomeLayoutInfo = useMemo(() => {
     if (homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) {
-      const sorted = [...homeLayoutInfo.homeLayoutInfo].sort((x, y) => x.expsOrd - y.expsOrd);
+      const sorted = [...homeLayoutInfo.homeLayoutInfo].sort(
+        (x, y) => x.expsOrd - y.expsOrd
+      );
       return sorted;
     }
     return [];
@@ -337,7 +378,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
   const expandAttemptRef = useRef(0); // 복구 시도 횟수
 
   const loadingComplete = useSelector((state) => state.common?.loadingComplete);
-  const isVideoTransitionLocked = useSelector((state) => state.home.videoTransitionLocked);
+  const isVideoTransitionLocked = useSelector(
+    (state) => state.home.videoTransitionLocked
+  );
 
   // 선택약관 동의 핸들러
   const handleOptionalAgree = useCallback(() => {
@@ -415,9 +458,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
         optionalTerms: 'Y',
       },
     });
-    setTimeout(()=>{
+    setTimeout(() => {
       Spotlight.focus('home_tbody');
-    },100)
+    }, 100);
   }, [handleOptionalAgree, dispatch, currentTermsFlag]);
 
   const handleOptionalDeclineClick = useCallback(() => {
@@ -426,9 +469,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
     }
     dispatch(updateOptionalTermsAgreement(false));
     setIsOptionalConfirmVisible(false);
-    setTimeout(()=>{
+    setTimeout(() => {
       Spotlight.focus('home_tbody');
-    },100)
+    }, 100);
   }, [dispatch]);
 
   const handleTermsPopupClosed = useCallback(() => {
@@ -499,7 +542,12 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
 
       return () => clearTimeout(timer);
     }
-  }, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]);
+  }, [
+    shouldShowOptionalTermsPopup,
+    termsLoading,
+    isOptionalConfirmVisible,
+    dispatch,
+  ]);
 
   const onCancel = useCallback(() => {
     const currentSpot = Spotlight.getCurrent();
@@ -550,7 +598,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
       const containerId = sortedHomeLayoutInfo[0].shptmApphmDspyOptCd;
       const navigableEls = getContainerNavigableElements(containerId);
       const navigableIds = navigableEls.filter((el) => typeof el === 'string');
-      const target = containerId === TEMPLATE_CODE_CONF.TOP ? 'banner0' : containerId;
+      const target =
+        containerId === TEMPLATE_CODE_CONF.TOP ? 'banner0' : containerId;
 
       if (navigableIds.length > 0) {
         setContainerLastFocusedElement(null, navigableIds);
@@ -626,7 +675,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
                 <HomeBanner
                   key={el.shptmApphmDspyOptCd}
                   spotlightId={el.shptmApphmDspyOptCd}
-                  firstSpot={!panelInfo.focusedContainerId && !panelInfo.currentSpot}
+                  firstSpot={
+                    !panelInfo.focusedContainerId && !panelInfo.currentSpot
+                  }
                   className={css.homeBannerWrap}
                   handleShelfFocus={handleItemFocus(
                     el.shptmApphmDspyOptCd,
@@ -718,7 +769,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
               } else break;
             }
             case TEMPLATE_CODE_CONF.PICK_FOR_YOU: {
-              if (bestSellerDatas && bestSellerDatas.length > 0) {
+              if (userNumber) {
                 return (
                   <PickedForYou
                     key={el.shptmApphmDspyOptCd}
@@ -737,18 +788,20 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
             }
           }
         })}
-        {loadingComplete && sortedHomeLayoutInfo && sortedHomeLayoutInfo.length > 0 && (
+        {loadingComplete &&
-          <TButton
+          sortedHomeLayoutInfo &&
-            className={css.tButton}
+          sortedHomeLayoutInfo.length > 0 && (
-            onClick={handleTopButtonClick}
+            <TButton
-            size={null}
+              className={css.tButton}
-            type={TYPES.topButton}
+              onClick={handleTopButtonClick}
-            spotlightId={'home-top-btn'}
+              size={null}
-            spotlightDisabled={btnDisabled}
+              type={TYPES.topButton}
-            data-wheel-point={true}
+              spotlightId={'home-top-btn'}
-            aria-label="Move to Top, Button"
+              spotlightDisabled={btnDisabled}
-          />
+              data-wheel-point={true}
-        )}
+              aria-label="Move to Top, Button"
+            />
+          )}
       </>
     );
   }, [
@@ -914,7 +967,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
       // console.log('[HomePanel] playVideo 호출 완료');
 
       if (isDeepLink || (!panels.length && !panelInfo.focusedContainerId)) {
-        dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
+        dispatch(
+          changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } })
+        );
         dispatch(getHomeMainContents());
         dispatch(getHomeLayout());
         dispatch(
@@ -1084,7 +1139,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
 
       // 🔽 videoPlayIntentRef가 null인 경우: 비디오 재생 가능한 첫 번째 배너 찾기
       if (!videoPlayIntentRef.current && bannerDataList) {
-        dlog('[HomePanel] *** videoPlayIntentRef가 null - 첫 번째 비디오 배너 검색');
+        dlog(
+          '[HomePanel] *** videoPlayIntentRef가 null - 첫 번째 비디오 배너 검색'
+        );
 
         // HomeBanner.jsx의 defaultFocus 계산 로직과 동일
         let targetIndex = 0;
@@ -1138,7 +1195,10 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
           };
 
           lastPlayedBannerIdRef.current = bannerId;
-          dlog('[HomePanel] *** videoPlayIntentRef 설정 완료:', videoPlayIntentRef.current);
+          dlog(
+            '[HomePanel] *** videoPlayIntentRef 설정 완료:',
+            videoPlayIntentRef.current
+          );
         } else {
           dlog('[HomePanel] *** ⚠️ 비디오 재생 가능한 배너를 찾지 못함');
         }
@@ -1181,7 +1241,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
 
         // 🔽 DetailPanel에서 돌아온 뒤 포커스를 마지막 포커스 대상에 복원
         dlog('[HomePanel] *** 🎯 Focus 복원 준비');
-        const targetFocusId = panelInfo.lastFocusedTargetId || lastFocusedTargetRef.current;
+        const targetFocusId =
+          panelInfo.lastFocusedTargetId || lastFocusedTargetRef.current;
         dlog(
           '[HomePanel] *** 📍 targetFocusId:',
           targetFocusId,
@@ -1250,7 +1311,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
         targetSpotlightCateNm = c.getAttribute('data-catcd-nm');
       }
 
-      const tBody = document.querySelector(`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`);
+      const tBody = document.querySelector(
+        `[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`
+      );
       const currentSpot = c && tBody.contains(c) ? targetSpotlightId : null;
 
       dispatch(checkEnterThroughGNB(false));
@@ -1263,7 +1326,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
             currentCateName: targetSpotlightCateNm,
             // <<<<<<< HEAD
             focusedContainerId: focusedContainerIdRef.current,
-            lastFocusedTargetId: lastFocusedTargetRef.current || panelInfo.lastFocusedTargetId,
+            lastFocusedTargetId:
+              lastFocusedTargetRef.current || panelInfo.lastFocusedTargetId,
             // =======
             //             focusedContainerId: focusedContainerId,
             // >>>>>>> gitlab/develop
@@ -1339,7 +1403,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
     <>
       {/* HomePanel용 메모리 상주 그라데이션 배경 */}
       <div
-        className={classNames(css.gradientBackground, { [css.visible]: showGradientBackground })}
+        className={classNames(css.gradientBackground, {
+          [css.visible]: showGradientBackground,
+        })}
         aria-hidden="true"
       />
 
@@ -1369,7 +1435,10 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
         )}
 
         {arrowBottom && (
-          <p className={classNames(css.arrow, css.arrowBottom)} onClick={handleArrowClick} />
+          <p
+            className={classNames(css.arrow, css.arrowBottom)}
+            onClick={handleArrowClick}
+          />
         )}
 
         {activePopup === ACTIVE_POPUP.exitPopup && (
@@ -1386,9 +1455,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
             text={$L('Are you sure you want to exit Shop Time?')}
           />
         )}
-        {(activePopup === ACTIVE_POPUP.eventPopup || activePopup === ACTIVE_POPUP.smsPopup) && (
+        {(activePopup === ACTIVE_POPUP.eventPopup ||
-          <EventPopUpBanner />
+          activePopup === ACTIVE_POPUP.smsPopup) && <EventPopUpBanner />}
-        )}
         {/* 선택약관 동의 팝업 */}
         <OptionalConfirm
           open={isOptionalConfirmVisible}

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

@@ -1,24 +1,14 @@
-import React, {
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
 
-import {
+import { useDispatch, useSelector } from 'react-redux';
-  useDispatch,
-  useSelector,
-} from 'react-redux';
 
 import Spotlight from '@enact/spotlight';
-import {
+import { SpotlightContainerDecorator } from '@enact/spotlight/SpotlightContainerDecorator';
-  SpotlightContainerDecorator,
-} from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 import { getContainerId } from '@enact/spotlight/src/container';
 
 import { updateHomeInfo } from '../../../actions/homeActions';
-import { pushPanel, popPanel } from '../../../actions/panelActions';
+import { popPanel, pushPanel } from '../../../actions/panelActions';
 import { startVideoPlayer } from '../../../actions/playActions';
 import SectionTitle from '../../../components/SectionTitle/SectionTitle';
 import Tag from '../../../components/TItemCard/Tag';
@@ -35,18 +25,15 @@ import {
   LOG_MESSAGE_ID,
   panel_names,
 } from '../../../utils/Config';
-import {
+import { $L, scaleW } from '../../../utils/helperMethods';
-  $L,
-  scaleW,
-} from '../../../utils/helperMethods';
 import { SpotlightIds } from '../../../utils/SpotlightIds';
 import { TEMPLATE_CODE_CONF } from '../HomePanel';
 import css from '../PopularShow/PopularShow.module.less';
 
-const SpottableComponent = Spottable("div");
+const SpottableComponent = Spottable('div');
 const Container = SpotlightContainerDecorator(
-  { enterTo: "last-focused" },
+  { enterTo: 'last-focused' },
-  "div"
+  'div'
 );
 
 const PopularShow = ({
@@ -72,9 +59,13 @@ const PopularShow = ({
   const panels = useSelector((state) => state.panels.panels);
 
   const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
-  const recommendInfo = useSelector((state) => state.foryou?.recommendInfo?.recommendShow);
+  const recommendInfo = useSelector(
-
+    (state) => state.foryou?.recommendInfo?.recommendShow
+  );
 
+  const { userNumber } = useSelector(
+    (state) => state.common.appStatus.loginUserData
+  );
 
   const orderStyle = useMemo(() => ({ order: order }), [order]);
   const [drawChk, setDrawChk] = useState(false);
@@ -87,41 +78,46 @@ const PopularShow = ({
     setDrawChk(true);
   }, [topInfos]);
 
-  useEffect(()=>{
+  useEffect(() => {
     setShowInfos(
-      recommendInfo?.filter(
+      recommendInfo?.filter((item) => item.recommendTpCd === 'POPULARSHOW') ||
-        (item) => item.recommendTpCd === "POPULARSHOW"
+        []
-      ) || []
+    );
-    )
+  }, [recommendInfo]);
-  },[recommendInfo])
 
   useEffect(() => {
-    if (!showInfos || showInfos.length === 0) {
+    if (userNumber) {
-      const baseData = topInfos?.map((item) => ({
+      if (!showInfos || showInfos.length === 0) {
-        ...item,
+        const baseData =
-        foryou: false,
+          topInfos?.map((item) => ({
-      })) || [];
+            ...item,
-      setShowNewInfos(baseData);
+            foryou: false,
-      return;
+          })) || [];
+        setShowNewInfos(baseData);
+        return;
+      }
+
+      const recommendedData =
+        showInfos[0].showInfos?.map((item) => ({
+          ...item,
+          foryou: true,
+        })) || [];
+
+      const recommendedPrdtIds = new Set(
+        recommendedData?.map((item) => item.showId)
+      );
+
+      const baseData =
+        topInfos?.map((item) => ({
+          ...item,
+          foryou: recommendedPrdtIds.has(item.showId),
+        })) || [];
+
+      setShowNewInfos([...baseData]);
+    } else {
+      setShowNewInfos(topInfos);
     }
-
+  }, [topInfos, showInfos, userNumber]);
-    const recommendedData = showInfos[0].showInfos?.map((item) => ({
-      ...item,
-      foryou: true,
-    })) || [];
-
-    const recommendedPrdtIds = new Set(recommendedData?.map(item => item.showId));
-
-    const baseData = topInfos?.map((item) => ({
-      ...item,
-      foryou: recommendedPrdtIds.has(item.showId),
-    })) || [];
-
-    setShowNewInfos([ ...baseData]);
-
-  }, [topInfos, showInfos]);
-
-
 
   const handleCardClick = useCallback(
     (patnrId, showId, catCd, showUrl) => () => {
@@ -135,7 +131,7 @@ const PopularShow = ({
         startVideoPlayer({
           showId,
           patnrId,
-          shptmBanrTpNm: "VOD",
+          shptmBanrTpNm: 'VOD',
           lgCatCd: catCd,
           modal: false,
           showUrl: showUrl,
@@ -151,7 +147,7 @@ const PopularShow = ({
         {
           name: panel_names.TRENDING_NOW_PANEL,
           panelInfo: {
-            pageName: "PS",
+            pageName: 'PS',
             focusedContainerId: SpotlightIds.TRENDING_NOW_POPULAR_SHOW,
           },
         },
@@ -179,23 +175,23 @@ const PopularShow = ({
 
       if (firstChk === 0 && itemIndex === 0) {
         const c = Spotlight.getCurrent();
-        const getAriaLabel = c.getAttribute("aria-label");
+        const getAriaLabel = c.getAttribute('aria-label');
         if (c) {
-          let cAriaLabel = c.getAttribute("aria-label");
+          let cAriaLabel = c.getAttribute('aria-label');
-          cAriaLabel = "POPULAR SHOW, Heading 1," + cAriaLabel;
+          cAriaLabel = 'POPULAR SHOW, Heading 1,' + cAriaLabel;
-          c.setAttribute("aria-label", cAriaLabel);
+          c.setAttribute('aria-label', cAriaLabel);
         }
         setFirstChk(1);
       } else if (firstChk === 1 && itemIndex === 0) {
         const c = Spotlight.getCurrent();
         if (c) {
-          let cAriaLabel = c.getAttribute("aria-label");
+          let cAriaLabel = c.getAttribute('aria-label');
           if (cAriaLabel) {
             const newcAriaLabel = cAriaLabel.replace(
-              "POPULAR SHOW, Heading 1,",
+              'POPULAR SHOW, Heading 1,',
-              ""
+              ''
             );
-            c.setAttribute("aria-label", newcAriaLabel);
+            c.setAttribute('aria-label', newcAriaLabel);
           }
         }
       } else {
@@ -246,7 +242,7 @@ const PopularShow = ({
     >
       <SectionTitle
         className={css.subTitle}
-        title={$L("POPULAR SHOW")}
+        title={$L('POPULAR SHOW')}
         data-title-index="homePopularShow"
         label="POPULAR SHOW"
       />
@@ -271,11 +267,11 @@ const PopularShow = ({
                 patncNm,
                 catCd,
                 showUrl,
-// <<<<<<< HEAD
+                // <<<<<<< HEAD
                 foryou,
-// =======
+                // =======
                 productInfos,
-// >>>>>>> gitlab/develop
+                // >>>>>>> gitlab/develop
               },
               itemIndex
             ) => {
@@ -293,18 +289,18 @@ const PopularShow = ({
                   showId={showId}
                   showTitle={showNm}
                   imageSource={
-                    (thumbnailUrl && thumbnailUrl960) ?
+                    thumbnailUrl && thumbnailUrl960
-                    thumbnailUrl !== thumbnailUrl960
+                      ? thumbnailUrl !== thumbnailUrl960
-                      ? thumbnailUrl960
+                        ? thumbnailUrl960
+                        : thumbnailUrl
                       : thumbnailUrl
-                    : thumbnailUrl
                   }
                   imageAlt={showNm}
                   productName={productInfos[0].prdtNm}
                   nonPosition={true}
                   type={TYPES.videoShow}
                   imgType={
-                    vtctpYn !== "Y"
+                    vtctpYn !== 'Y'
                       ? IMAGETYPES.imgHorizontal
                       : IMAGETYPES.imgVertical
                   }
@@ -313,11 +309,11 @@ const PopularShow = ({
                   onFocus={handleFocus(itemIndex)}
                   onBlur={handleBlur(itemIndex)}
                   onClick={handleCardClick(patnrId, showId, catCd, showUrl)}
-                  firstLabel={patncNm + " "}
+                  firstLabel={patncNm + ' '}
-                  label={itemIndex * 1 + 1 + " of " + showNewInfos.length}
+                  label={itemIndex * 1 + 1 + ' of ' + showNewInfos.length}
                   lastLabel=" go to detail, button"
                 >
-                  {foryou === true && <Tag text={"For You"} />}
+                  {foryou === true && <Tag text={'For You'} />}
                 </TItemCardNew>
               );
             }
@@ -329,7 +325,7 @@ const PopularShow = ({
               className={css.displayBox}
               onClick={handleMoreCardClick}
               onFocus={_handleItemFocus}
-              spotlightId={"home-popularshow-more-btn"}
+              spotlightId={'home-popularshow-more-btn'}
             ></SpottableComponent>
           </div>
         )}

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

@@ -8,21 +8,32 @@ import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
 
 import { sendLogCuration } from '../../../actions/logActions';
 import { getSubCategory } from '../../../actions/mainActions';
-import { pushPanel, navigateFromSubCategory } from '../../../actions/panelActions';
+import {
+  navigateFromSubCategory,
+  pushPanel,
+} from '../../../actions/panelActions';
 import Tag from '../../../components/TItemCard/Tag';
 import TItemCardNew from '../../../components/TItemCard/TItemCard.new';
 import TScroller from '../../../components/TScroller/TScroller';
 import usePrevious from '../../../hooks/usePrevious';
 import useScrollReset from '../../../hooks/useScrollReset';
 import useScrollTo from '../../../hooks/useScrollTo';
-import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, LOG_TP_NO, panel_names } from '../../../utils/Config';
+import {
+  LOG_CONTEXT_NAME,
+  LOG_MESSAGE_ID,
+  LOG_TP_NO,
+  panel_names,
+} from '../../../utils/Config';
 import { SpotlightIds } from '../../../utils/SpotlightIds';
 import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav';
 import css from '../../HomePanel/SubCategory/SubCategory.module.less';
 
 const SpottableComponent = Spottable('div');
 const Container = SpotlightContainerDecorator({ enterTo: null }, 'div');
-const ContainerBasic = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
+const ContainerBasic = SpotlightContainerDecorator(
+  { enterTo: 'last-focused' },
+  'div'
+);
 
 const getExpsOrdByLgCatCd = (array, value) => {
   const expsOrd = array.findIndex(({ lgCatCd }) => value === lgCatCd) + 1;
@@ -40,12 +51,24 @@ export default memo(function SubCategory({
 }) {
   const dispatch = useDispatch();
   const { getScrollTo, scrollLeft } = useScrollTo();
-  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollLeft, false);
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(
+    scrollLeft,
+    false
+  );
 
-  const categoryInfos = useSelector((state) => state.home.menuData?.data?.homeCategory);
+  const categoryInfos = useSelector(
-  const categoryItemInfos = useSelector((state) => state.main.subCategoryData?.categoryItemInfos);
+    (state) => state.home.menuData?.data?.homeCategory
+  );
+  const categoryItemInfos = useSelector(
+    (state) => state.main.subCategoryData?.categoryItemInfos
+  );
 
-  const foruItemInfos = useSelector((state) => state.main.recommendProduct[0]?.productInfos);
+  const foruItemInfos = useSelector(
+    (state) => state.main.recommendProduct[0]?.productInfos
+  );
+  const { userNumber } = useSelector(
+    (state) => state.common.appStatus.loginUserData
+  );
 
   const nowMenu = useSelector((state) => state.common.menu.nowMenu);
 
@@ -207,35 +230,45 @@ export default memo(function SubCategory({
   }, [handleShelfFocus]);
 
   useEffect(() => {
-    if (!foruItemInfos || foruItemInfos.length === 0) {
+    if (userNumber) {
+      if (!foruItemInfos || foruItemInfos.length === 0) {
+        const baseData =
+          categoryItemInfos?.subCatItemList?.map((item) => ({
+            ...item,
+            foryou: false,
+          })) || [];
+        setCategoryItemNewData(baseData);
+        return;
+      }
+
+      const recommendedData =
+        foruItemInfos?.map((item) => ({
+          ...item,
+          foryou: true,
+        })) || [];
+
+      const recommendedPrdtIds = new Set(
+        recommendedData.map((item) => item.prdtId)
+      );
+
       const baseData =
         categoryItemInfos?.subCatItemList?.map((item) => ({
           ...item,
-          foryou: false,
+          foryou: recommendedPrdtIds.has(item.prdtId),
         })) || [];
-      setCategoryItemNewData(baseData);
+
-      return;
+      setCategoryItemNewData([...baseData]);
+    } else {
+      setCategoryItemNewData(categoryItemInfos?.subCatItemList);
     }
-
+  }, [categoryItemInfos?.subCatItemList, foruItemInfos, userNumber]);
-    const recommendedData =
-      foruItemInfos?.map((item) => ({
-        ...item,
-        foryou: true,
-      })) || [];
-
-    const recommendedPrdtIds = new Set(recommendedData.map((item) => item.prdtId));
-
-    const baseData =
-      categoryItemInfos?.subCatItemList?.map((item) => ({
-        ...item,
-        foryou: recommendedPrdtIds.has(item.prdtId),
-      })) || [];
-
-    setCategoryItemNewData([...baseData]);
-  }, [categoryItemInfos?.subCatItemList, foruItemInfos]);
 
   return (
-    <Container spotlightId={spotlightId} data-wheel-point onFocus={_handleShelfFocus}>
+    <Container
+      spotlightId={spotlightId}
+      data-wheel-point
+      onFocus={_handleShelfFocus}
+    >
       <CategoryNav
         categoryInfos={categoryInfos}
         currentCategoryCode={currentLgCatCd}
@@ -293,7 +326,12 @@ export default memo(function SubCategory({
                     offerInfo={offerInfo}
                     data-catcd-num={currentLgCatCd}
                     data-catcd-nm={currentLgCatNm}
-                    label={itemIndex * 1 + 1 + ' of ' + (categoryItemNewData?.length || 0)}
+                    label={
+                      itemIndex * 1 +
+                      1 +
+                      ' of ' +
+                      (categoryItemNewData?.length || 0)
+                    }
                     lastLabel=" go to detail, button"
                     euEnrgLblInfos={euEnrgLblInfos}
                   >