[251123] fix: FavoriteButton , YouMayAlsoClickj

🕐 커밋 시간: 2025. 11. 23. 20:51:57

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +64줄
  • 삭제: -28줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/FavoriteBtn.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()
  📄 com.twin.app.shoptime/src/views/DetailPanel/components/FavoriteBtn.jsx (javascript):
    🔄 Modified: Spottable()

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선

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

@@ -141,13 +141,19 @@ export default function YouMayAlsoLike({
                 } = product;
 
                 const handleItemClick = () => {
+                  // Promise 체이닝으로 순서 보장 (Chrome 68, 87 호환성)
+                  Promise.resolve()
+                    .then(() => {
+                      // 1. 기존 비디오 강제 종료
                       dispatch(finishVideoPreview());
                       dispatch(finishModalMediaForce());
 
                       if (themeProductInfos && themeProductInfos.length > 0) {
                         dispatch(clearThemeDetail());
                       }
-
+                    })
+                    .then(() => {
+                      // 2. 비디오 종료 후 새로운 상품으로 업데이트
                       // popPanel + pushPanel 대신 updatePanel 사용
                       // DetailPanel을 언마운트하지 않고 상품 정보만 업데이트
                       // 이렇게 하면 백그라운드 비디오 제어 상태가 유지됨
@@ -167,6 +173,7 @@ export default function YouMayAlsoLike({
                         })
                       );
                       cursorOpen.current.stop();
+                    });
                 };
                 // prdtId가 없는 경우를 대비한 안정적인 key 생성
                 const itemKey = prdtId ? `${patnrId}-${prdtId}` : `product-${index}`;

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
@@ -30,8 +30,12 @@ export default function FavoriteBtn({
 }) {
   const dispatch = useDispatch();
   const { popupVisible, activePopup } = useSelector((state) => state.common.popup);
+  const clickLockRef = useRef(false);
+
+  const handleFavoriteActivate = useCallback(() => {
+    if (clickLockRef.current) return;
+    clickLockRef.current = true;
 
-  const handleFavoriteClick = useCallback(() => {
     dispatch(
       sendLogTotalRecommend({
         menu: logMenu,
@@ -61,10 +65,34 @@ export default function FavoriteBtn({
     }
   }, [dispatch, favoriteFlag, selectedPatnrId, selectedPrdtId, logMenu]);
 
+  const handleMouseUp = useCallback(
+    (event) => {
+      // 실제 마우스 클릭(detail > 0)만 처리하고 키보드에서 전달된 mouse 이벤트(detail === 0)는 무시
+      if (event?.detail === 0) return;
+      if (event.button !== 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      handleFavoriteActivate();
+    },
+    [handleFavoriteActivate]
+  );
+
+  const handleClick = useCallback(
+    (event) => {
+      // 키보드(Enter)에서 발생하는 click(detail === 0)만 처리
+      if (event?.detail !== 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      handleFavoriteActivate();
+    },
+    [handleFavoriteActivate]
+  );
+
   const PopUpOnClick = useCallback(() => {
     setTimeout(() => Spotlight.focus('favoriteBtn'));
     dispatch(setHidePopup());
     onFavoriteFlagChanged(favoriteFlag === 'Y' ? 'N' : 'Y');
+    clickLockRef.current = false;
   }, [dispatch, favoriteFlag, onFavoriteFlagChanged]);
 
   const handleSpotlightDown = useCallback(
@@ -96,7 +124,8 @@ export default function FavoriteBtn({
       role="button"
       aria-label="Register in Favorites"
       tabIndex={0}
-      onClick={handleFavoriteClick}
+      onMouseUp={handleMouseUp}
+      onClick={handleClick}
       onSpotlightDown={handleSpotlightDown}
       data-spotlight-next-down={
         kind === 'item_detail' ? nextDownId || 'product-details-button' : undefined