moment.js uninstall && LiveChannel new Date로 로직 수정

com.twin.app.shoptime/package.json

@@ -41,7 +41,6 @@
     "@enact/webos": "^3.3.0",
     "axios": "^0.21.1",
     "ilib": "^14.3.0",
-    "moment": "^2.30.1",
     "prop-types": "^15.6.2",
     "qrcode": "^1.5.3",
     "raw-loader": "^4.0.2",

com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx

@@ -1,7 +1,6 @@
 import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
 
 import classNames from "classnames";
-import moment from "moment";
 
 import Spottable from "@enact/spotlight/Spottable";
 
@@ -82,23 +81,25 @@ export default memo(function PlayerItemCard({
   }, [onFocus]);
 
   useEffect(() => {
-    const today = moment();
-    const startDtMoment = moment(startDt);
-    const endDtMoment = moment(endDt);
+    const today = new Date();
+    const startDtMoment = new Date(startDt);
+    const endDtMoment = new Date(endDt);
 
-    //라이브 영상 시간 (분)
-    const liveTime = endDtMoment.diff(startDtMoment, "minutes");
-    //경과시간 (분)
-    const elapsedTime = today.diff(startDtMoment, "minutes");
+    // 라이브 영상 시간 (분)
+    const liveTime = Math.floor((endDtMoment - startDtMoment) / (1000 * 60));
+    // 경과시간 (분)
+    const elapsedTime = Math.floor((today - startDtMoment) / (1000 * 60));
 
     const progressPercentage = (elapsedTime / liveTime) * 100;
 
+    console.log("#progressPercentage", progressPercentage);
     if (elapsedTime > 0) {
       setGaugeWidth(progressPercentage);
     } else {
       setGaugeWidth(0);
     }
-  }, [gaugeWidth]);
+  }, [startDt, endDt, gaugeWidth]);
+
   const progressStyle = useMemo(
     () => ({ width: `${gaugeWidth}%` }),
     [gaugeWidth]

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

@@ -215,7 +215,7 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
       <div className={classNames(css.overIcon, css.backLiveicon)}>
         <SpottableBtn onClick={onClickBack} className={css.backIcon} />
         <div className={panelInfo?.type === "LIVE" && css.liveIcon} />
-        {/* <div className={css.logo}>{"123"}</div> */}
+        <div className={css.logo}>{"123"}</div>
       </div>
       <div className={classNames(css.overIcon, css.topIcon)} />
       <div className={classNames(css.overIcon, css.downIcon)} />

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

@@ -26,7 +26,7 @@
       cursor: pointer;
     }
     &.arrowClose {
-      right: 0px;
+      right: -2px;
       > button {
         &.button {
           background-image: url(../../../assets/images/btn/btn-toopen-nor.svg);