[251017] feat: VideoTestPanel removed

🕐 커밋 시간: 2025. 10. 17. 20:58:30

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +1줄
  • 삭제: -196줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/utils/Config.js
  ~ com.twin.app.shoptime/src/views/MainView/MainView.jsx

🗑️ 삭제된 파일:
  - com.twin.app.shoptime/src/views/VideoTestPanel/VideoTestPanel.jsx
  - com.twin.app.shoptime/src/views/VideoTestPanel/VideoTestPanel.module.less

🔧 주요 변경 내용:
  • 공통 유틸리티 함수 최적화
  • 테스트 커버리지 및 안정성 향상
  • 코드 정리 및 최적화

Performance: 코드 최적화로 성능 개선 기대

com.twin.app.shoptime/src/utils/Config.js

@@ -37,11 +37,8 @@ export const panel_names = {
   JUST_FOR_YOU_TEST_PANEL: 'justforyoutestpanel', //justforyoutest
   // error
   ERROR_PANEL: 'errorpanel',
-
   // debug
   DEBUG_PANEL: 'debugpanel',
-  VIDEO_TEST_PANEL: 'videotestpanel',
-
   // user review
   USER_REVIEW_PANEL: 'userreviewpanel',
 };

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

@@ -76,7 +76,6 @@ import SearchPanel from '../SearchPanel/SearchPanel.new';
 import ThemeCurationPanel from '../ThemeCurationPanel/ThemeCurationPanel';
 import TrendingNowPanel from '../TrendingNowPanel/TrendingNowPanel';
 import UserReviewPanel from '../UserReview/UserReviewPanel';
-import VideoTestPanel from '../VideoTestPanel/VideoTestPanel';
 import WelcomeEventPanel from '../WelcomeEventPanel/WelcomeEventPanel';
 import css from './MainView.module.less';
 
@@ -103,7 +102,6 @@ const panelMap = {
   [Config.panel_names.CART_PANEL]: CartPanel,
   [Config.panel_names.ERROR_PANEL]: ErrorPanel,
   [Config.panel_names.DEBUG_PANEL]: DebugPanel,
-  [Config.panel_names.VIDEO_TEST_PANEL]: VideoTestPanel,
   [Config.panel_names.DETAIL_PANEL]: DetailPanel,
   [Config.panel_names.PLAYER_PANEL]: PlayerPanel,
   [Config.panel_names.PLAYER_PANEL_NEW]: PlayerPanelNew,

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

@@ -1,118 +0,0 @@
-import React, {
-  useCallback,
-  useRef,
-  useState,
-} from "react";
-
-import { useDispatch } from "react-redux";
-
-import { popPanel } from "../../actions/panelActions";
-import TButton from "../../components/TButton/TButton";
-import THeader from "../../components/THeader/THeader";
-import TPanel from "../../components/TPanel/TPanel";
-import TReactPlayer from "../../components/VideoPlayer/TReactPlayer";
-import usePrevious from "../../hooks/usePrevious";
-
-const YOUTUBECONFIG = {
-  playerVars: {
-    controls: 0, // 플레이어 컨트롤 표시
-    disablekb: 1,
-    // enablejsapi: 1,
-    listType: "user_uploads",
-    fs: 0,
-    rel: 0, // 관련 동영상 표시 안 함
-    showinfo: 0,
-    loop: 0,
-    iv_load_policy: 3,
-    modestbranding: 1,
-    wmode: "opaque",
-    // origin: origin,
-    cc_lang_pref: "en",
-    cc_load_policy: 0,
-  },
-};
-
-const TEST_URLS = [
-  "https://www.youtube.com/watch?v=A1cmsCO4LvY",
-  "https://www.youtube.com/watch?v=IfHA3zOE6dQ",
-  "https://www.youtube.com/watch?v=Mef85O8gYIA",
-  "https://youtu.be/bSgjf7nF5CU",
-  "https://www.youtube.com/embed/mqGEVNYiqxw?autoplay=1&mute=0&controls=0&origin=http%3A%2F%2Flocalhost%3A3000&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&disablekb=1&enablejsapi=1&listType=user_uploads&fs=0&loop=0&wmode=opaque&cc_lang_pref=en&cc_load_policy=1&widgetid=3",
-];
-export default function VideoTestPanel({ spotlightId }) {
-  const dispatch = useDispatch();
-  const [videoIndex, setVideoIndex] = useState(0);
-  const [captionEnabled, setCaptionEnabled] = useState(false);
-  const [showCaption, setShowCaption] = useState(true);
-  const videoNode = useRef(null);
-  const showCaptionRef = usePrevious(showCaption);
-
-  const setVideoRef = useCallback(
-    (video) => {
-      videoNode.current = video;
-    },
-    []
-  );
-
-  const handleCaption = useCallback(() => {
-    if (!captionEnabled) {
-      return;
-    }
-    if (videoNode.current) {
-      if (!showCaption) {
-        videoNode.current.loadModule("captions");
-        videoNode.current.setOption("captions", "track", {
-          languageCode: "en",
-        });
-      } else {
-        videoNode.current.unloadModule("captions");
-      }
-    }
-    setShowCaption(!showCaption);
-  }, [showCaption, captionEnabled]);
-
-  const changeVideo = useCallback(() => {
-    // setShowCaption(false);
-    setVideoIndex((videoIndex + 1) % TEST_URLS.length);
-  }, [videoIndex]);
-
-  const onStart = useCallback(() => {
-    if (videoNode.current.getOptions("captions").length > 0) {
-      setCaptionEnabled(true);
-      if (showCaptionRef.current) {
-        videoNode.current.loadModule("captions");
-        videoNode.current.setOption("captions", "track", {
-          languageCode: "en",
-        });
-      }
-    } else {
-      setCaptionEnabled(false);
-    }
-  }, [showCaptionRef]);
-
-  const onBackClick = useCallback(() => {
-    dispatch(popPanel());
-  }, [dispatch]);
-
-  return (
-    <TPanel isTabActivated={false} spotlightId={spotlightId}>
-      <THeader onBackButton title={"VideoTest"} onClick={onBackClick} />
-      <div>{"url: " + videoIndex + " " + TEST_URLS[videoIndex]}</div>
-      <div>{"caption Enabled: " + (videoNode.current && captionEnabled)}</div>
-      <div>{"caption is On: " + showCaption}</div>
-      <TReactPlayer
-        url={TEST_URLS[videoIndex]}
-        playing
-        config={{
-          youtube: YOUTUBECONFIG,
-        }}
-        videoRef={setVideoRef}
-        onStart={onStart}
-      />
-      <TButton onClick={changeVideo}>{"changeVideo"}</TButton>
-      <TButton onClick={handleCaption} disabled={!captionEnabled}>
-        {"ToggleCaption"}
-      </TButton>
-    </TPanel>
-  );
-}

com.twin.app.shoptime/src/views/VideoTestPanel/VideoTestPanel.module.less

@@ -1,72 +0,0 @@
-.scroller{
-    height:650px;
-  }
-  .settingLayer{
-    width: 100%;
-    height: auto;
-    padding-bottom: 30px;
-  }
-.titleArea {
-    position: relative;
-    display: block;
-    color: black;
-    font-size: 28px;
-    .titleBox {
-        position: relative;
-        display: inline-block;
-        width: 420px;
-        height: auto;
-        left: 75px;
-        top: 0rem;
-        .text {
-          position: relative;
-          top: 0rem;
-          text-align: start;
-          margin-top: 13px;
-          font-weight: bold;
-        }
-    }
-    .textArea {
-        position: relative;
-        display: inline-block;
-        width: 1000px;
-        height: auto;
-        left: 60px;
-        background-color: rgba(174, 0, 255, 0.0);
-        .text {
-          position: relative;
-          color: rgb(252, 252, 252);
-          text-align: start;
-          margin-top: 13px;
-          color: black;
-        }
-    }
-    .title {
-        position: relative;
-        width:100%;
-        text-align: center;
-        font-size: 36px;
-        font-weight: 'bold';
-    }
-    .switchs {
-      position: relative;
-      display: inline-flex;
-      width: 100%;
-      .switchTitle {
-        position: relative;
-        width: 660px;
-        height: 72px;
-        line-height: 72px;
-        margin-left: 75px;
-        font-size: 30px;
-        font-weight: bold;
-        color: black;
-        background-color: bisque;
-      }
-      .switch{
-        width: 250px;
-        color: black;
-        margin-bottom: 0px;
-      }
-    }
-  }