[TBody] selectedContainer 추가

com.twin.app.shoptime/src/components/TBody/TBody.jsx

@@ -9,10 +9,14 @@ import TScroller from "../TScroller/TScroller";
 import css from "./TBody.module.less";
 
 const Container = SpotlightContainerDecorator(
-  { enterTo: "last-focused"},
+  { enterTo: "last-focused" },
   "div"
 );
 
+const DefaultContainer = SpotlightContainerDecorator(
+  { enterTo: "default-element" },
+  "div"
+);
 export default function TBody({
   cbScrollTo,
   children,
@@ -22,10 +26,13 @@ export default function TBody({
   scrollOptions = {},
   onScrollStop,
   onScroll,
+  isDefaultContainer = false,
   ...rest
 }) {
+  const SelectedContainer = isDefaultContainer ? DefaultContainer : Container;
+
   return (
-    <Container
+    <SelectedContainer
       spotlightId={spotlightId}
       id={SpotlightIds.TBODY}
       {...rest}
@@ -44,6 +51,6 @@ export default function TBody({
       ) : (
         children
       )}
-    </Container>
+    </SelectedContainer>
   );
 }

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

@@ -4,48 +4,45 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
+} from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import Spotlight from '@enact/spotlight';
+import Spotlight from "@enact/spotlight";
 
 import {
   changeAppStatus,
   changeLocalSettings,
   setHidePopup,
-} from '../../actions/commonActions';
-import { clearCouponInfo } from '../../actions/couponActions';
-import { getDeviceAdditionInfo } from '../../actions/deviceActions';
+} from "../../actions/commonActions";
+import { clearCouponInfo } from "../../actions/couponActions";
+import { getDeviceAdditionInfo } from "../../actions/deviceActions";
 import {
   clearThemeDetail,
   getThemeCurationDetailInfo,
   getThemeHotelDetailInfo,
-} from '../../actions/homeActions';
-import { getMainCategoryDetail } from '../../actions/mainActions';
-import { popPanel } from '../../actions/panelActions';
-import { finishVideoPreview } from '../../actions/playActions';
+} from "../../actions/homeActions";
+import { getMainCategoryDetail } from "../../actions/mainActions";
+import { popPanel } from "../../actions/panelActions";
+import { finishVideoPreview } from "../../actions/playActions";
 import {
   clearProductDetail,
   getProductGroup,
   getProductImageLength,
-} from '../../actions/productActions';
-import MobileSendPopUp from '../../components/MobileSend/MobileSendPopUp';
-import TBody from '../../components/TBody/TBody';
-import THeader from '../../components/THeader/THeader';
-import TPanel from '../../components/TPanel/TPanel';
-import * as Config from '../../utils/Config';
-import { panel_names } from '../../utils/Config';
-import { $L } from '../../utils/helperMethods';
-import css from './DetailPanel.module.less';
-import GroupProduct from './GroupProduct/GroupProduct';
-import SingleProduct from './SingleProduct/SingleProduct';
-import ThemeProduct from './ThemeProduct/ThemeProduct';
-import UnableProduct from './UnableProduct/UnableProduct';
-import YouMayLike from './YouMayLike/YouMayLike';
+} from "../../actions/productActions";
+import MobileSendPopUp from "../../components/MobileSend/MobileSendPopUp";
+import TBody from "../../components/TBody/TBody";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import * as Config from "../../utils/Config";
+import { panel_names } from "../../utils/Config";
+import { $L } from "../../utils/helperMethods";
+import css from "./DetailPanel.module.less";
+import GroupProduct from "./GroupProduct/GroupProduct";
+import SingleProduct from "./SingleProduct/SingleProduct";
+import ThemeProduct from "./ThemeProduct/ThemeProduct";
+import UnableProduct from "./UnableProduct/UnableProduct";
+import YouMayLike from "./YouMayLike/YouMayLike";
 
 export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   const [lgCatCd, setLgCatCd] = useState("");
@@ -334,6 +331,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
           className={css.tbody}
           scrollable={false}
           spotlightDisabled={!isOnTop}
+          isDefaultContainer
         >
           {/* 결제가능상품 영역 */}
           {isBillingProductVisible && (