[SearchPanel] Log, IF-LGSP-LOG-014, 검색 클릭 이력 반영

2024-05-16 16:28:37 +09:00
parent e1d6b6202c
commit f17676a1ea
8 changed files with 216 additions and 95 deletions
--- a/com.twin.app.shoptime/src/actions/logActions.js
+++ b/com.twin.app.shoptime/src/actions/logActions.js
@@ -67,7 +67,7 @@ export const postLog = (params) => (dispatch, getState) => {

  const onSuccess = (response) => {
    console.log(
-      `postLog onSuccess, ${logTpNo}`,
+      `pyh postLog onSuccess, ${logTpNo}`,
      JSON.parse(response.config.data)
    );
  };
--- a/com.twin.app.shoptime/src/hooks/useLogService.js
+++ b/com.twin.app.shoptime/src/hooks/useLogService.js
@@ -349,6 +349,66 @@ export default function useLogService() {
    [dispatch]
  );

+  /**
+   * IF-LGSP-LOG-014 / 검색 결과 클릭 이력
+   *
+   * (M) curationId 큐레이션 아이디
+   *
+   * (M) curationNm 큐레이션 이름
+   *
+   * (M) dcAfPrice 할인후 가격
+   *
+   * (M) entryMenu 진입 메뉴
+   *
+   * (M) keyword 검색어
+   *
+   * (M) lgCatNm LG 카테고리 이름
+   *
+   * (M) logTpNo 로그 타입 넘버
+   *
+   * (M) nowMenu 현재 메뉴
+   *
+   * (M) patncNm 파트너 이름
+   *
+   * (M) patnrId 파트너 아이디
+   *
+   * (M) prdtId 상품 아이디
+   *
+   * (M) prdtNm 상품 이름
+   *
+   * (M) showId 방송 아이디
+   *
+   * (M) showNm 방송 이름
+   */
+  const sendLogSearchClick = useCallback(
+    (params) => {
+      const { logTpNo, showId, showNm } = params;
+
+      const entryMenu = LOG_MENU.SEARCH;
+      const nowMenu = showId && showNm ? LOG_MENU.PLAYER : LOG_MENU.DETAIL;
+
+      const newParams = {
+        curationId: params?.curationId ?? "",
+        curationNm: params?.curationNm ?? "",
+        dcAfPrice: params?.dcAfPrice ?? "",
+        entryMenu,
+        keyword: params?.keyword ?? "",
+        lgCatNm: params?.lgCatNm ?? "",
+        logTpNo,
+        nowMenu,
+        patncNm: params?.patncNm ?? "",
+        patnrId: params?.patnrId ?? "",
+        prdtId: params?.prdtId ?? "",
+        prdtNm: params?.prdtNm ?? "",
+        showId: params?.showId ?? "",
+        showNm: params?.showNm ?? "",
+      };
+
+      dispatch(postLog(newParams));
+    },
+    [dispatch]
+  );
+
  /**
   * IF-LGSP-LOG-110 / Featured Brands View 이력
   *
@@ -433,6 +493,7 @@ export default function useLogService() {
    sendLogGNB,
    sendLogShopByMobile,
    sendLogSearch,
+    sendLogSearchClick,
    sendLogPartners,
    sendLogFeaturedBrands,
    sendLogTerms,
--- a/com.twin.app.shoptime/src/utils/Config.js
+++ b/com.twin.app.shoptime/src/utils/Config.js
@@ -145,6 +145,8 @@ export const LOG_MENU = {
  SEARCH: "Search",
  HOT_PICKS: "Hot Picks",
  PARTNERS: "Partners",
+  DETAIL: "Detail",
+  PLAYER: "Player",

  LIVE_CHANNELS: "WatchNow/Live Channels",
  LIVE_CHANNELS_BANNER: "WatchNow/Live Channels/Banner",
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchItemCard.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchItemCard.jsx
@@ -13,29 +13,28 @@ import defaultImageItem from "../../../../../assets/images/img-thumb-empty-produ
 import { pushPanel, updatePanel } from "../../../../actions/panelActions";
 import CustomImage from "../../../../components/CustomImage/CustomImage";
 import useScrollTo from "../../../../hooks/useScrollTo";
-import { panel_names } from "../../../../utils/Config";
+import { LOG_TP_NO, panel_names } from "../../../../utils/Config";
 import { getTranslate3dValueByDirection } from "../../../../utils/helperMethods";
 import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import css from "./SearchItemCard.module.less";
+import useLogService from "../../../../hooks/useLogService";

 const ItemContainer = Spottable("div");

 export default memo(function SearchItemCard({
+  contentId,
  dcPrice,
-  partnerLogo,
-  partnerName,
+  idx,
+  patncNm,
  price,
-  reviewGrade,
-  soldout,
+  searchQueryRef,
+  spotlightId,
  thumbnail,
  title,
-  contentId,
-  spotlightId,
-  patnrId,
-  prdtId,
-  idx,
  ...rest
 }) {
+  const { sendLogSearchClick } = useLogService();
+
  const dispatch = useDispatch();

  const { scrollLeft } = useScrollTo();
@@ -56,10 +55,10 @@ export default memo(function SearchItemCard({
  }, [scrollLeft]);

  const handleItemClick = useCallback(
-    (contentId) => (e) => {
-      const str = contentId;
-      const partnerId = str.split("_")[4];
-      const prdtId = str.split("_")[5];
+    (e) => {
+      const tokkens = contentId && contentId.split("_");
+      const patnrId = tokkens[4] || "";
+      const prdtId = tokkens[5] || "";

      const tItemCard = e.currentTarget;
      const tBody = document.querySelector(
@@ -98,19 +97,39 @@ export default memo(function SearchItemCard({
        pushPanel({
          name: panel_names.DETAIL_PANEL,
          panelInfo: {
-            patnrId: partnerId,
-            prdtId: prdtId,
+            patnrId,
+            prdtId,
          },
        })
      );
+
+      sendLogSearchClick({
+        dcAfPrice: dcPrice,
+        keyword: searchQueryRef.current,
+        logTpNo: LOG_TP_NO.SEACH_CLICK,
+        patncNm,
+        patnrId,
+        prdtId,
+        prdtNm: title,
+      });
    },
-    [dispatch, idx]
+    [
+      contentId,
+      dcPrice,
+      dispatch,
+      idx,
+      patncNm,
+      searchQueryRef,
+      sendLogSearchClick,
+      title,
+    ]
  );
+
  return (
    <ItemContainer
      className={css.card}
      {...rest}
-      onClick={handleItemClick(contentId)}
+      onClick={handleItemClick}
      spotlightId={spotlightId}
    >
      <div className={css.imageBox}>
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx
@@ -9,34 +9,34 @@ import defaultShowImage from "../../../../../assets/images/img-thumb-empty-produ
 import IcLiveShow from "../../../../../assets/images/tag/tag-liveshow.svg";
 import { pushPanel, updatePanel } from "../../../../actions/panelActions";
 import CustomImage from "../../../../components/CustomImage/CustomImage";
-import { panel_names } from "../../../../utils/Config";
+import { LOG_TP_NO, panel_names } from "../../../../utils/Config";
 import { getTranslate3dValueByDirection } from "../../../../utils/helperMethods";
 import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import css from "./SearchShowCard.module.less";
+import useLogService from "../../../../hooks/useLogService";

 const CardContainer = Spottable("div");

 export default memo(function SearchShowCard({
-  endTime,
+  contentId,
+  idx,
  liveFlag,
-  partnerId,
-  partnerLogo,
-  partnerName,
-  startTime,
+  patncNm,
+  searchQueryRef,
+  spotlightId,
  thumbnail,
  title,
-  contentId,
-  spotlightId,
-  idx,
  ...rest
 }) {
+  const { sendLogSearchClick } = useLogService();
+
  const dispatch = useDispatch();

  const handleShowClick = useCallback(
-    (contentId) => (e) => {
-      const str = contentId;
-      const partnerId = str.split("_")[4];
-      const showId = str.split("_")[5];
+    (e) => {
+      const tokkens = contentId && contentId.split("_");
+      const patnrId = tokkens[4] || "";
+      const showId = tokkens[5] || "";

      const tItemCard = e.currentTarget;
      const tBody = document.querySelector(
@@ -75,20 +75,37 @@ export default memo(function SearchShowCard({
        pushPanel({
          name: panel_names.PLAYER_PANEL,
          panelInfo: {
-            patnrId: partnerId,
-            showId: showId,
+            patnrId,
+            showId,
            shptmBanrTpNm: "VOD",
          },
        })
      );
+
+      sendLogSearchClick({
+        keyword: searchQueryRef.current,
+        logTpNo: LOG_TP_NO.SEACH_CLICK,
+        patncNm,
+        patnrId,
+        showId,
+        showNm: title,
+      });
    },
-    [dispatch, idx]
+    [
+      contentId,
+      dispatch,
+      idx,
+      patncNm,
+      searchQueryRef,
+      sendLogSearchClick,
+      title,
+    ]
  );

  return (
    <CardContainer
      className={css.card}
-      onClick={handleShowClick(contentId)}
+      onClick={handleShowClick}
      spotlightId={spotlightId}
      {...rest}
    >
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchThemeCard.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchThemeCard.jsx
@@ -6,33 +6,34 @@ import Spotlight from "@enact/spotlight";
 import Spottable from "@enact/spotlight/Spottable";

 import { pushPanel, updatePanel } from "../../../../actions/panelActions";
-import { panel_names } from "../../../../utils/Config";
+import { LOG_TP_NO, panel_names } from "../../../../utils/Config";
 import { getTranslate3dValueByDirection } from "../../../../utils/helperMethods";
 import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import css from "./SearchThemeCard.module.less";
+import useLogService from "../../../../hooks/useLogService";

 const ThemeContainer = Spottable("div");

 export default memo(function SearchThemeCard({
-  endTime,
-  keyword,
-  partnerLogo,
-  partnerName,
-  startTime,
-  title,
  contentId,
-  spotlightId,
-  type,
  idx,
+  keyword,
+  patncNm,
+  searchQueryRef,
+  spotlightId,
+  title,
+  type,
  ...rest
 }) {
+  const { sendLogSearchClick } = useLogService();
+
  const dispatch = useDispatch();

  const handleThemeClick = useCallback(
-    (contentId) => (e) => {
-      const str = contentId;
-      const patnrId = str.split("_")[4];
-      const curationId = str.split("_")[5];
+    (e) => {
+      const tokkens = contentId && contentId.split("_");
+      const patnrId = tokkens[4] || "";
+      const curationId = tokkens[5] || "";

      const tItemCard = e.currentTarget;
      const tBody = document.querySelector(
@@ -71,20 +72,39 @@ export default memo(function SearchThemeCard({
        pushPanel({
          name: panel_names.DETAIL_PANEL,
          panelInfo: {
-            patnrId: patnrId,
-            curationId: curationId,
-            type: type,
+            patnrId,
+            curationId,
+            type,
          },
        })
      );
+
+      sendLogSearchClick({
+        curationId,
+        curationNm: title,
+        keyword: searchQueryRef.current,
+        lgCatNm: "",
+        logTpNo: LOG_TP_NO.SEACH_CLICK,
+        patncNm,
+        patnrId,
+      });
    },
-    [dispatch, idx, type]
+    [
+      contentId,
+      dispatch,
+      idx,
+      patncNm,
+      searchQueryRef,
+      sendLogSearchClick,
+      title,
+      type,
+    ]
  );

  return (
    <ThemeContainer
      className={css.card}
-      onClick={handleThemeClick(contentId)}
+      onClick={handleThemeClick}
      spotlightId={spotlightId}
      {...rest}
    >
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResults.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResults.jsx
@@ -69,7 +69,7 @@ export default memo(function SearchResults({
  }, [searchDatas]);

  useEffect(() => {
-    if (Object.keys(totalCount).length > 0) {
+    if (Object.keys(totalCount).length > 0 && searchQueryRef.current) {
      const { item = 0, show = 0, theme = 0 } = totalCount;

      const params = {
@@ -91,13 +91,14 @@ export default memo(function SearchResults({
      {results &&
        results.map(({ title, category, data, count }, index) => (
          <SearchResultsType
-            key={title + index}
-            title={title}
-            data={data}
-            count={count}
            category={category}
+            count={count}
+            data={data}
            idx={index}
+            key={title + index}
            panelInfo={panelInfo}
+            searchQueryRef={searchQueryRef}
+            sectionTitle={title}
          />
        ))}
    </Container>
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.jsx
@@ -43,12 +43,13 @@ const ITEM_SIZE = {
 };

 export default function SearchResultsType({
-  title,
-  data,
-  count,
  category,
+  count,
+  data,
  idx,
  panelInfo,
+  searchQueryRef,
+  sectionTitle,
 }) {
  const dispatch = useDispatch();
  const { getScrollTo, scrollLeft } = useScrollTo();
@@ -104,24 +105,25 @@ export default function SearchResultsType({
        case "theme": {
          const {
            contentId,
-            endTime,
+            // endTime,
            keyword,
-            partnerLogo,
+            // partnerLogo,
            partnerName,
-            startTime,
+            // startTime,
            title,
-            type,
          } = targetItem;

          return (
            <SearchThemeCard
-              key={"theme" + index}
-              title={title}
-              keyword={keyword}
-              contentId={contentId ? contentId : ""}
-              spotlightId={"searchThemeItem" + index}
-              type={"theme"}
+              contentId={contentId}
              idx={idx}
+              key={"theme" + index}
+              keyword={keyword}
+              patncNm={partnerName}
+              searchQueryRef={searchQueryRef}
+              spotlightId={"searchThemeItem" + index}
+              title={title}
+              type={"theme"}
              {...rest}
            />
          );
@@ -130,25 +132,27 @@ export default function SearchResultsType({
        case "show": {
          const {
            contentId,
-            endTime,
+            // endTime,
            liveFlag,
-            partnerId,
-            partnerLogo,
+            // partnerId,
+            // partnerLogo,
            partnerName,
-            startTime,
+            // startTime,
            thumbnail,
            title,
          } = targetItem;

          return (
            <SearchShowCard
+              contentId={contentId}
+              idx={idx}
              key={"show" + index}
              liveFlag={liveFlag}
+              patncNm={partnerName}
+              searchQueryRef={searchQueryRef}
+              spotlightId={"searchShowItem" + index}
              thumbnail={thumbnail}
              title={title}
-              contentId={contentId ? contentId : ""}
-              spotlightId={"searchShowItem" + index}
-              idx={idx}
              {...rest}
            />
          );
@@ -158,29 +162,26 @@ export default function SearchResultsType({
          const {
            contentId,
            dcPrice,
-            partnerLogo,
+            // partnerLogo,
            partnerName,
            price,
-            reviewGrade,
-            soldout,
+            // reviewGrade,
+            // soldout,
            thumbnail,
-            patnrId,
-            prdtId,
            title,
          } = targetItem;
-
          return (
            <SearchItemCard
+              contentId={contentId}
+              dcPrice={dcPrice}
+              idx={idx}
              key={"item" + index}
+              patncNm={partnerName}
+              price={price}
+              searchQueryRef={searchQueryRef}
+              spotlightId={"searchItem" + index}
              thumbnail={thumbnail}
              title={title}
-              price={price}
-              patnrId={patnrId}
-              prdtId={prdtId}
-              dcPrice={dcPrice}
-              contentId={contentId ? contentId : ""}
-              spotlightId={"searchItem" + index}
-              idx={idx}
              {...rest}
            />
          );
@@ -190,7 +191,7 @@ export default function SearchResultsType({
          return;
      }
    },
-    [data, category]
+    [category, data, idx, searchQueryRef]
  );

  const { itemWidth, itemHeight, spacing } = ITEM_SIZE[category] || {};
@@ -199,14 +200,14 @@ export default function SearchResultsType({
    <>
      <SectionTitle
        className={css.sectionTitle}
-        title={title}
+        title={sectionTitle}
        itemCount={count ? count : null}
      />
      <Container
        className={classNames(css.container, category && css[category])}
      >
        <TVirtualGridList
-          key={title}
+          key={sectionTitle}
          cbScrollTo={getScrollTo}
          className={css.grid}
          dataSize={count ? count : 0}