[SHOPTIME-3412] Full Player / Live / Live Channel / 다른 방송을 연속으로 계속 클릭 할 경우 잠시 멈춤 현상

[원인] showId가 같다면 클릭을 하지 않는 로직이 존재하지만 티비로 테스트시 속도 문제로 해당 로직이 정상적인 타이밍에 읽지않는것으로 판단

[대책] 중복으로 클릭이 안되도록 setTimeout을 이용해 로직 추가

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
 import { useDispatch } from "react-redux";
 
@@ -25,7 +25,7 @@ export default function FeaturedShowContents({
   handleItemFocus,
 }) {
   const dispatch = useDispatch();
-
+  const isClickBlocked = useRef(false);
   const handleFocus = useCallback(
     () => () => {
       if (handleItemFocus) {
@@ -49,6 +49,16 @@ export default function FeaturedShowContents({
       } = featuredShowsInfos[index];
 
       const handleItemClick = () => {
+        //중복클릭방지
+        if (isClickBlocked.current) {
+          return;
+        }
+
+        isClickBlocked.current = true;
+        setTimeout(() => {
+          isClickBlocked.current = false;
+        }, 600);
+
         if (currentVideoShowId && currentVideoShowId === showId) {
           return;
         }
@@ -93,6 +103,7 @@ export default function FeaturedShowContents({
       currentVideoInfo,
       currentVideoShowId,
       videoVerticalVisible,
+      isClickBlocked,
     ]
   );
 

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { useDispatch } from "react-redux";
 
@@ -22,7 +22,7 @@ export default function LiveChannelContents({
   handleItemFocus,
 }) {
   const dispatch = useDispatch();
-
+  const isClickBlocked = useRef(false);
   const handleFocus = useCallback(
     () => () => {
       if (handleItemFocus) {
@@ -51,6 +51,16 @@ export default function LiveChannelContents({
       } = liveInfos[index];
 
       const handleItemClick = () => {
+        //중복클릭방지
+        if (isClickBlocked.current) {
+          return;
+        }
+
+        isClickBlocked.current = true;
+        setTimeout(() => {
+          isClickBlocked.current = false;
+        }, 600);
+
         if (!showId) return;
 
         if (currentVideoShowId && currentVideoShowId === showId) {
@@ -100,7 +110,14 @@ export default function LiveChannelContents({
         />
       );
     },
-    [liveInfos, currentTime, currentVideoShowId, dispatch, handleFocus]
+    [
+      liveInfos,
+      currentTime,
+      currentVideoShowId,
+      isClickBlocked,
+      dispatch,
+      handleFocus,
+    ]
   );
 
   return (