Home에서 onSale 진입시 진입한 패널로 TabLayout이 포커스 되지 않는 현상 수정

com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx

@@ -1,21 +1,13 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import classNames from 'classnames';
-import compose from 'ramda/src/compose';
+import classNames from "classnames";
+import compose from "ramda/src/compose";
 
-import { Job } from '@enact/core/util';
-import {
-  Marquee,
-  MarqueeController,
-} from '@enact/sandstone/Marquee';
-import Spottable from '@enact/spotlight/Spottable';
+import { Job } from "@enact/core/util";
+import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
+import Spottable from "@enact/spotlight/Spottable";
 
-import css from './TabItemSub.module.less';
+import css from "./TabItemSub.module.less";
 
 const SpottableComponent = Spottable("div");
 const TabItemBase = ({
@@ -47,8 +39,8 @@ const TabItemBase = ({
     (ev) => {
       clearPressedJob.current.start(() => {
         if (onClick) {
-          onClick({ index, target, title });
-          setSelectedTitle(title);
+          onClick({ index, target, title, path });
+          setSelectedTitle(title || path);
           if (spotlightId) {
             setLastFocusId(spotlightId);
           }

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

@@ -395,20 +395,28 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   };
 
   const handleNavigation = useCallback(
-    ({ index, target, title }) => {
+    ({ index, target }) => {
       setMainSelectedIndex(index);
 
-      if (selectedTitle === title) {
-        Spotlight.focus(SpotlightIds.TPANEL);
+      //같은패널로 클릭이벤트가 호출될때
+      if (
+        Array.isArray(target) &&
+        target[0]?.name &&
+        panels[0]?.name &&
+        panels[0]?.name === target[0]?.name
+      ) {
         deActivateTab();
+        Spotlight.focus(SpotlightIds.TPANEL);
         return;
       }
+      // 홈패널일 경우
       if (index === 3) {
         dispatch(resetPanels());
         deActivateTab();
         Spotlight.focus(SpotlightIds.TPANEL);
         return;
       }
+      //그 외 나머지
       if (target) {
         dispatch(resetPanels(target));
         deActivateTab();
@@ -418,12 +426,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         setMainExpanded(true);
       }
     },
-    [cursorVisible, deActivateTab, dispatch, selectedTitle]
+    [cursorVisible, deActivateTab, dispatch, panels]
   );
 
   const onClickSubItem = useCallback(
-    ({ index, target, title }) => {
-      if (selectedTitle === title) {
+    ({ index, target, title, path }) => {
+      if (selectedTitle === (title || path)) {
         Spotlight.focus(SpotlightIds.TPANEL);
         deActivateTab();
         return;
@@ -481,6 +489,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   useEffect(() => {
     if (tabActivated) {
       if (lastFocusId) {
+        console.log("##########", lastFocusId);
         Spotlight.focus(lastFocusId);
       } else {
         Spotlight.focus("spotlight_home");
@@ -511,6 +520,16 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
     }
   }, [secondDepthReduce, showSubTab, mainSelectedIndex]);
 
+  useEffect(() => {
+    if (panels && panels[0]?.panelInfo.spotlightId && !tabActivated) {
+      console.log("######@@@@@@@@@");
+      setLastFocusId(panels[0]?.panelInfo.spotlightId);
+      Spotlight.focus(lastFocusId);
+
+      return () => setLastFocusId();
+    }
+  }, [panels, lastFocusId, tabActivated]);
+
   if (!showTab) {
     return null;
   }
@@ -530,6 +549,8 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         </h1>
         {tabs.map((item, index) => (
           <TabItem
+            // spotlight={item.spotlightId}
+            // setLastFocusId={setLastFocusId}
             key={"tabitem" + index}
             expanded={false}
             mainSelected={

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

@@ -70,8 +70,8 @@ export default function SingleOption({
   useEffect(() => {
     dispatch(
       getProductOption({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPrdtId,
+        patnrId: 11,
+        prdtId: 7280567,
       })
     );
     dispatch(
@@ -84,6 +84,10 @@ export default function SingleOption({
 
   const handleOptionsClick = useCallback(
     (e, optionValIdx) => {
+      console.log(
+        "#productOptionInfos",
+        productOptionInfos[selectedBtnOptIdx].prdtOptDtl[optionValIdx]
+      );
       setSelectedOptions((prevOptions) => {
         const updatedOptions = [...prevOptions];
         updatedOptions[selectedBtnOptIdx] = optionValIdx;
@@ -92,7 +96,7 @@ export default function SingleOption({
       Spotlight.focus("optionButton");
       onClose();
     },
-    [selectedBtnOptIdx]
+    [selectedBtnOptIdx, productOptionInfos]
   );
 
   const handleIncrement = useCallback(() => {

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

@@ -32,6 +32,7 @@ export default function HotelOption({
     (state) => state.common.popup
   );
 
+  console.log("#hotelData", hotelData);
   useEffect(() => {
     let label = "";
     let rating = hotelInfos[selectedIndex]?.hotelDetailInfo.revwGrd;
@@ -94,7 +95,10 @@ export default function HotelOption({
             <span className={css.line} /> <div>{label}</div>
           </div>
         </div>
-        <div className={css.title}>{hotelInfos[selectedIndex]?.hotelNm}</div>
+        <div className={css.title}>
+          [{hotelInfos[selectedIndex]?.hotelDetailInfo.hotelType}]&nbsp;
+          {hotelInfos[selectedIndex]?.hotelNm}
+        </div>
         <div className={css.amenities}></div>
         <div className={css.bottomLayer}>
           <div>

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less

@@ -50,6 +50,9 @@
     .size(@w: 846px , @h: 344px);
     background-color: #f2f2f2;
     margin: 0 0 20px 0;
+    border-top: 1px solid #dadada;
+    border-bottom: 1px solid #dadada;
+    border-radius: 0.5px;
   }
 
   .bottomLayer {

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

@@ -28,7 +28,11 @@ export default function HomeOnSaleItem({ homeOnSaleInfos, itemData, ...rest }) {
       dispatch(
         pushPanel({
           name: panel_names.ON_SALE_PANEL,
-          panelInfo: { categoryIncFlag: "Y", lgCatCd: itemData.lgCatCd },
+          panelInfo: {
+            categoryIncFlag: "Y",
+            lgCatCd: itemData.lgCatCd,
+            spotlightId: "spotlight_onsale",
+          },
         })
       );
     },