YouMayLike 마우스모드일때는 포커스가 되어도 확장되지 않게 수정

com.twin.app.shoptime/src/actions/mainActions.js

@@ -117,6 +117,7 @@ export const getTop20Show = () => (dispatch, getState) => {
   );
 };
 
+// 유메이라이크 아이템 리스트 IF-LGSP-201
 export const getMainYouMayLike =
   ({ lgCatCd }) =>
   (dispatch, getState) => {

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

@@ -16,7 +16,6 @@ import YouMayLike from "./container/YouMayLike";
 import css from "./DetailPanel.module.less";
 
 export default function ItemDetail() {
-  const [productData, setProductData] = useState();
   const [panelInfo, setPaneInfo] = useState();
   const data = useSelector((state) => state.main.productData);
   const panels = useSelector((state) => state.panels.panels);
@@ -41,24 +40,8 @@ export default function ItemDetail() {
           prdtId: panelInfo?.prdtId,
         })
       );
-      // dispatch(
-      //   getMainCategoryDetail({
-      //     patnrId: 1,
-      //     prdtId: "A523924",
-      //   })
-      // );
     }
-  }, [dispatch, panelInfo]);
-
-  useEffect(() => {
-    setProductData(data);
-    // dispatch(
-    //   getMainYouMayLike({
-    //     lgCatCd: productData?.catCd,
-    //   })
-    // );
-    //console.log("#productdata", productData);
-  }, [data, dispatch]);
+  }, [dispatch, panels, panelInfo]);
 
   const onClick = () => {
     dispatch(popPanel());
@@ -67,7 +50,7 @@ export default function ItemDetail() {
     <TPanel isTabActivated={false}>
       <THeader
         className={css.header}
-        title={productData?.prdtNm}
+        title={data?.prdtNm}
         onBackButton
         onClick={onClick}
       />

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

@@ -123,7 +123,14 @@ export default function ProductThumbnail() {
             </SpottableComponent>
           ))}
         </div>
-        <div className={css.qrcode} />
+        <div className={css.qrcode}>
+          <img
+            src={
+              "https://qt3-m.shoptime.lgappstv.com/purchase?cntryCd=US&patnrId=9&prdtId=LDPH5554S&shopTpNm=product"
+            }
+            alt=""
+          />
+        </div>
       </div>
     </Container>
   );

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

@@ -18,7 +18,7 @@ import { SpotlightIds } from "../../../utils/SpotlightIds";
 import css from "./YouMayLike.module.less";
 
 const Container = SpotlightContainerDecorator(
-  { enterTo: "last-focused" },
+  { enterTo: "default-element", preserveId: true },
   "div"
 );
 
@@ -26,7 +26,7 @@ const SpottableComponent = Spottable("div");
 export default function YouMayLike() {
   const [focused, setFocused] = useState(false);
   const [expanded, setExpanded] = useState(false);
-
+  const { cursorVisible } = useSelector((state) => state.common.appStatus);
   const dispatch = useDispatch();
   const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
   const data = useSelector((state) => state.main.productData);
@@ -38,10 +38,14 @@ export default function YouMayLike() {
       })
     );
   }, [dispatch, data]);
-  const onFocus = () => {
+
+  const onFocus = useCallback(() => {
     setFocused(true);
-    setExpanded(true);
-  };
+
+    if (!cursorVisible) {
+      setExpanded(true);
+    }
+  }, []);
 
   const onBlur = () => {
     setFocused(false);
@@ -57,21 +61,30 @@ export default function YouMayLike() {
       Spotlight.focus("tbody");
     }
   }, []);
-  const handleItemClick = () => {
-    // dispatch(
-    //   pushPanel({
-    //     name: panel_names.DETAIL_PANEL,
-    //     panelInfo: {
-    //       patnrId,
-    //       prdtId,
-    //     },
-    //   })
-    // );
-  };
+
+  const onButtonClick = useCallback(() => {
+    if (cursorVisible) {
+      setExpanded(true);
+    }
+  }, [cursorVisible]);
 
   const renderItem = useCallback(
     ({ index, ...rest }) => {
-      const { imgUrl, prdtId, prdtNm, priceInfo } = youmaylikeData[index];
+      const { imgUrl, patnrId, prdtId, prdtNm, priceInfo } =
+        youmaylikeData[index];
+
+      const handleItemClick = () => {
+        setExpanded(false);
+        dispatch(
+          pushPanel({
+            name: panel_names.DETAIL_PANEL,
+            panelInfo: {
+              patnrId,
+              prdtId,
+            },
+          })
+        );
+      };
 
       return (
         <TItemCard
@@ -102,6 +115,7 @@ export default function YouMayLike() {
           onKeyDown={onKeyDown}
           onFocus={onFocus}
           onBlur={onBlur}
+          onClick={onButtonClick}
         >
           {$L("YOU MAY LIKE")}{" "}
           <span className={classNames(css.arrow, expanded && css.expanded)} />
@@ -109,7 +123,7 @@ export default function YouMayLike() {
         <Container className={css.itemWrap}>
           {youmaylikeData && youmaylikeData.length > 0 && (
             <TVirtualGridList
-              spotlightId={SpotlightIds.CATEGORY_CONTENTS_BOX}
+              // spotlightId={SpotlightIds.CATEGORY_CONTENTS_BOX}
               dataSize={youmaylikeData.length}
               direction="horizontal"
               autoScroll
@@ -117,7 +131,6 @@ export default function YouMayLike() {
               itemWidth={324}
               itemHeight={438}
               spacing={15}
-              onClick={handleItemClick}
               className={css.itemList}
             />
           )}