[DetailPanel] indicator focus

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

@@ -21,6 +21,7 @@ import { clearProductDetail } from '../../actions/productActions';
 import TBody from '../../components/TBody/TBody';
 import THeader from '../../components/THeader/THeader';
 import TPanel from '../../components/TPanel/TPanel';
+import { panel_names } from '../../utils/Config';
 import css from './DetailPanel.module.less';
 import GroupProduct from './GroupProduct/GroupProduct';
 import SingleProduct from './SingleProduct/SingleProduct';
@@ -28,7 +29,7 @@ import ThemeProduct from './ThemeProduct/ThemeProduct';
 import UnableProduct from './UnableProduct/UnableProduct';
 import YouMayLike from './YouMayLike/YouMayLike';
 
-export default function DetailPanel({ panelInfo }) {
+export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   const [lgCatCd, setLgCatCd] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const productData = useSelector((state) => state.main.productData);
@@ -78,7 +79,7 @@ export default function DetailPanel({ panelInfo }) {
 
   const onClick = useCallback(() => {
     dispatch(finishVideoPreview());
-    dispatch(popPanel());
+    dispatch(popPanel(panel_names.DETAIL_PANEL));
   }, [dispatch]);
 
   useEffect(() => {
@@ -149,7 +150,12 @@ export default function DetailPanel({ panelInfo }) {
 
   return (
     <>
-      <TPanel isTabActivated={false} className={css.detailPanelWrap}>
+      <TPanel
+        isTabActivated={false}
+        className={css.detailPanelWrap}
+        handleCancel={onClick}
+        spotlightId={spotlightId}
+      >
         <THeader
           className={css.header}
           title={
@@ -171,6 +177,7 @@ export default function DetailPanel({ panelInfo }) {
                 selectedIndex={selectedIndex}
                 setSelectedIndex={setSelectedIndex}
                 launchedFromPlayer={panelInfo.launchedFromPlayer}
+                isOnTop={isOnTop}
               />
             )}
           {/* 그룹상품 영역 */}
@@ -182,6 +189,7 @@ export default function DetailPanel({ panelInfo }) {
                 selectedIndex={selectedIndex}
                 setSelectedIndex={setSelectedIndex}
                 launchedFromPlayer={panelInfo.launchedFromPlayer}
+                isOnTop={isOnTop}
               />
             )}
           {/* 구매불가상품 영역 */}
@@ -192,6 +200,7 @@ export default function DetailPanel({ panelInfo }) {
               selectedIndex={selectedIndex}
               setSelectedIndex={setSelectedIndex}
               launchedFromPlayer={panelInfo.launchedFromPlayer}
+              isOnTop={isOnTop}
             />
           )}
           {/* 테마그룹상품 영역*/}
@@ -203,6 +212,7 @@ export default function DetailPanel({ panelInfo }) {
               selectedPatnrId={patnrId}
               themeType={type}
               launchedFromPlayer={panelInfo.launchedFromPlayer}
+              isOnTop={isOnTop}
             />
           )}
         </TBody>