[Log] Log, IF-LGSP-LOG-017, Live 방송 알람 팝업 반영

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

@@ -65,6 +65,10 @@ export const getUrlByLogTpNo = (logTpNo) => {
     case LOG_TP_NO.UPCOMING_FLAG:
       return URLS.LOG_UPCOMING_FLAG;
 
+    // IF-LGSP-LOG-017 / 알람 팝업
+    case LOG_TP_NO.ALARM_POP:
+      return URLS.LOG_ALARM_POP;
+
     // IF-LGSP-LOG-110 / Featured Brands View 이력
     case LOG_TP_NO.BRANDS:
       return URLS.LOG_BRANDS;

com.twin.app.shoptime/src/api/apiConfig.js

@@ -176,8 +176,8 @@ export const URLS = {
   // IF-LGSP-LOG-015 log upcoming flag controller
   LOG_UPCOMING_FLAG: "/lgsp/v1/log/upcoming/upcomingflag.lge",
 
-  // IF-LGSP-LOG-016 log keyword flag controller
-  LOG_KEYWORD_FLAG: "/lgsp/v1/log/upcoming/keywordflag.lge",
+  // IF-LGSP-LOG-016 log keyword flag controller, 미사용
+  // LOG_KEYWORD_FLAG: "/lgsp/v1/log/upcoming/keywordflag.lge",
 
   // IF-LGSP-LOG-017 log alarm pop controller
   LOG_ALARM_POP: "/lgsp/v1/log/alarm/alarmpop.lge",
@@ -209,11 +209,11 @@ export const URLS = {
   // IF-LGSP-LOG-105 log coupon use controller
   LOG_COUPON_USE: "/lgsp/v1/log/coupon/use.lge",
 
-  // IF-LGSP-LOG-106 log cart add controller
-  LOG_CART_ADD: "/lgsp/v1/log/cart/add.lge",
+  // IF-LGSP-LOG-106 log cart add controller, 미사용
+  // LOG_CART_ADD: "/lgsp/v1/log/cart/add.lge",
 
-  // IF-LGSP-LOG-107 log cart delete controller
-  LOG_CART_DELETE: "/lgsp/v1/log/cart/delete.lge",
+  // IF-LGSP-LOG-107 log cart delete controller, 미사용
+  // LOG_CART_DELETE: "/lgsp/v1/log/cart/delete.lge",
 
   // IF-LGSP-LOG-108 log payment entry controller
   LOG_PAYMENT_ENTRY: "/lgsp/v1/log/payment/entry.lge",

com.twin.app.shoptime/src/hooks/useLogService.js

@@ -587,6 +587,70 @@ export default function useLogService() {
     [dispatch, entryMenuRef, nowMenuRef]
   );
 
+  /**
+   * IF-LGSP-LOG-017 / 알람 팝업
+   *
+   * (M) alarmDt 알람 방생 시간
+   *
+   * (M) alarmType 알람 유형 Upcoming/Keyword
+   *
+   * (M) cnt 키워드 개수
+   *
+   * (M) entryMenu 진입 메뉴
+   *
+   * (O) hstNm 호스트 이름
+   *
+   * (M) keywordList 키워드 리스트 (콤마 구분자)
+   *
+   * (O) lgCatCd 카테고리 코드
+   *
+   * (O) lgCatNm 카테고리 이름
+   *
+   * (M) logTpNo 로그 타입 넘버
+   *
+   * (M) nowMenu 현재 메뉴
+   *
+   * (M) patncNm 파트너 이름
+   *
+   * (M) patnrId 파트너 아이디
+   *
+   * (M) showId 방송 아이디
+   *
+   * (M) showNm 방송 이름
+   */
+  const sendLogAlarmPop = useCallback(
+    (params) => {
+      const { alarmDt, alarmType, cnt, patncNm, patnrId, showId, showNm } =
+        params;
+
+      if (
+        !alarmDt ||
+        !alarmType ||
+        !cnt ||
+        !patncNm ||
+        !patnrId ||
+        !showId ||
+        !showNm
+      ) {
+        console.error("sendLogAlarmPop invalid params", params);
+        return;
+      }
+
+      const newParams = {
+        ...params,
+        entryMenu: entryMenuRef.current,
+        hstNm: params?.hstNm ?? "",
+        lgCatCd: params?.lgCatCd ?? "",
+        lgCatNm: params?.lgCatNm ?? "",
+        logTpNo: LOG_TP_NO.ALARM_POP,
+        nowMenu: nowMenuRef.current,
+      };
+
+      dispatch(postLog(newParams));
+    },
+    [dispatch, entryMenuRef, nowMenuRef]
+  );
+
   /**
    * IF-LGSP-LOG-110 / Featured Brands View 이력
    *
@@ -681,6 +745,7 @@ export default function useLogService() {
     sendLogSearchClick,
     sendLogUpcomingFlag,
     sendLogPartners,
+    sendLogAlarmPop,
     sendLogFeaturedBrands,
     sendLogTerms,
   };

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

@@ -99,6 +99,8 @@ export const LOG_TP_NO = {
 
   SECOND_LAYER: {},
 
+  ALARM_POP: "281",
+
   BRANDS: "290",
 
   PARTNERS: "500",

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

@@ -42,6 +42,7 @@ import TrendingNowPanel from "../TrendingNowPanel/TrendingNowPanel";
 import WelcomeEventPanel from "../WelcomeEventPanel/WelcomeEventPanel";
 import css from "./MainView.module.less";
 import ServiceUnavailableNoticePanel from "../ServiceUnavailableNoticePanel/ServiceUnavailableNoticePanel";
+import useLogService from "../../hooks/useLogService";
 
 const preloadImages = [testImage];
 
@@ -67,7 +68,8 @@ const panelMap = {
   [Config.panel_names.SERVICE_UNAVAILABLE]: ServiceUnavailableNoticePanel,
 };
 
-export default function MainView({className}) {
+export default function MainView({ className }) {
+  const { sendLogAlarmPop } = useLogService();
   const dispatch = useDispatch();
   const mainIndex = useSelector((state) => state.appData.mainIndex);
   const panels = useSelector((state) => state.panels.panels);
@@ -217,13 +219,9 @@ export default function MainView({className}) {
   }, []);
 
   const [watchPopOpen, setWatchPopOpen] = useState(false);
-  const onWatchClose = useCallback(() => {
-    setIntervalActive((prev) => !prev);
-    setWatchPopOpen(false);
-  }, []);
 
   const [intervalActive, setIntervalActive] = useState(true);
-  const [alertItems, setAlertItems] = useState({});
+  const [alertItems, setAlertItems] = useState([]);
   const [popupTimer, setPopupTimer] = useState(null); // 타이머 ID를 저장할 상태 변수
 
   const appStatus = useSelector((state) => state.common.appStatus);
@@ -232,6 +230,35 @@ export default function MainView({className}) {
     (state) => state.myPage.upComingData
   );
 
+  useEffect(() => {
+    if (alertItems && alertItems.length > 0 && watchPopOpen) {
+      const {
+        hstNm,
+        lgCatCd,
+        lgCatNm,
+        patncNm,
+        patnrId,
+        showId,
+        showNm,
+        strtDt: alarmDt,
+      } = alertItems[0];
+
+      sendLogAlarmPop({
+        alarmDt,
+        alarmType: "Upcoming",
+        cnt: "0",
+        hstNm,
+        keywordList: "",
+        lgCatCd,
+        lgCatNm,
+        patncNm,
+        patnrId: patnrId.toString(),
+        showId,
+        showNm,
+      });
+    }
+  }, [alertItems, sendLogAlarmPop, watchPopOpen]);
+
   // 팝업 30초 후 종료
   useEffect(() => {
     if (watchPopOpen === true) {
@@ -309,11 +336,17 @@ export default function MainView({className}) {
     );
     setWatchPopOpen(false);
     setIntervalActive((prev) => !prev);
+
     if (popupTimer) {
       clearTimeout(popupTimer); // 버튼 클릭 시 타이머 제거
     }
   }, [dispatch, alertItems, popupTimer]);
 
+  const onWatchClose = useCallback(() => {
+    setIntervalActive((prev) => !prev);
+    setWatchPopOpen(false);
+  }, []);
+
   return (
     <div className={classNames(css.mainViewWrap, className)}>
       <PreloadImage