[비즈니스] 리뷰하기 로깅 추가 및 기존 로깅 수정

src/components/common/Header/MobileHeader/index.tsx

@@ -19,7 +19,7 @@ interface MobileHeaderProps {
 
 export default function MobileHeader({ openModal }: MobileHeaderProps) {
   useResetHeaderButton();
-  const { pathname } = useLocation();
+  const { pathname, search } = useLocation();
   const { openSidebar } = useMobileSidebar();
   const buttonState = useHeaderButtonStore((state) => state.buttonState);
 
@@ -30,10 +30,15 @@ export default function MobileHeader({ openModal }: MobileHeaderProps) {
   const params = useParams();
 
   const backInDetailPage = async () => {
-    if (pathname.includes('/store/') && params) {
+    if (pathname.includes('/store/') && !search.includes('state') && params) {
       const response = await api.store.getStoreDetailInfo(params.id!);
       logger.actionEventClick({
-        actionTitle: 'BUSINESS', title: 'shop_detail_view_back', value: response.name, event_category: 'click',
+        actionTitle: 'BUSINESS',
+        title: 'shop_detail_view_back',
+        value: response.name,
+        event_category: 'click',
+        current_page: sessionStorage.getItem('cameFrom') || '',
+        duration_time: (new Date().getTime() - Number(sessionStorage.getItem('enter_storeDetail'))) / 1000,
       }); // 상점 내 뒤로가기 버튼 로깅
     }
     if (pathname === '/timetable') {
@@ -46,6 +51,7 @@ export default function MobileHeader({ openModal }: MobileHeaderProps) {
         duration_time: (new Date().getTime() - Number(sessionStorage.getItem('enterTimetablePage'))) / 1000,
       });
     }
+    navigate(-1);
   };
 
   const handleHamburgerClick = () => {
@@ -65,7 +71,6 @@ export default function MobileHeader({ openModal }: MobileHeaderProps) {
             aria-label="뒤로가기 버튼"
             onClick={() => {
               backInDetailPage();
-              navigate(-1);
             }}
           >
             <WhiteArrowBackIcon />

src/components/common/LoginRequiredModal/index.tsx

@@ -1,16 +1,45 @@
 import { useLocation, useNavigate } from 'react-router-dom';
+import useLogger from 'utils/hooks/analytics/useLogger';
 import { setRedirectPath } from 'utils/ts/auth';
 import styles from './LoginRequiredModal.module.scss';
 
 interface Props {
   title: string;
   description:string;
   closeModal:()=>void;
+  type?: string;
+  shopName?: string;
 }
 
-export default function LoginRequiredModal({ title = '', description = '', closeModal }: Props) {
+export default function LoginRequiredModal({
+  title = '', description = '', closeModal, type, shopName,
+}: Props) {
   const navigate = useNavigate();
   const location = useLocation();
+  const logger = useLogger();
+
+  const loggingLoginClick = () => {
+    if (shopName) {
+      logger.actionEventClick({
+        actionTitle: 'BUSINESS',
+        title: `shop_detail_view_review_${type}_login`,
+        value: shopName,
+        event_category: 'click',
+      });
+    }
+  };
+
+  const loggingCancelClick = () => {
+    if (shopName) {
+      logger.actionEventClick({
+        actionTitle: 'BUSINESS',
+        title: `shop_detail_view_review_${type}_cancel`,
+        value: shopName,
+        event_category: 'click',
+      });
+    }
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
@@ -22,11 +51,20 @@ export default function LoginRequiredModal({ title = '', description = '', close
         <div className={styles.modal__description}>{description}</div>
         <div className={styles.modal__description}>회원가입 또는 로그인 후 이용해주세요 :-)</div>
         <div className={styles.modal__button}>
-          <button type="button" onClick={closeModal}>취소하기</button>
+          <button
+            type="button"
+            onClick={() => {
+              loggingCancelClick();
+              closeModal();
+            }}
+          >
+            취소하기
+          </button>
           <button
             type="button"
             onClick={() => {
               setRedirectPath(`${location.pathname}${location.search}`);
+              loggingLoginClick();
               navigate('/auth');
             }}
           >
@@ -37,3 +75,8 @@ export default function LoginRequiredModal({ title = '', description = '', close
     </div>
   );
 }
+
+LoginRequiredModal.defaultProps = {
+  type: undefined,
+  shopName: undefined,
+};

src/pages/Store/StoreDetailPage/EventTable/index.tsx

@@ -1,6 +1,5 @@
 import { useParams } from 'react-router-dom';
 import { StoreEvent } from 'api/store/entity';
-import { useScorllLogging } from 'utils/hooks/analytics/useScrollLogging';
 import EventCard from './components/EventCard';
 import useStoreMenus from './hooks/useStoreEventList';
 import styles from './EventTable.module.scss';
@@ -9,8 +8,6 @@ export default function EventTable() {
   const params = useParams();
   const { storeEventList } = useStoreMenus(params.id!);
 
-  useScorllLogging('shop_detail_view_event', storeEventList);
-
   return (
     <div className={styles.eventContainer}>
       {storeEventList

src/pages/Store/StoreDetailPage/Review/components/DeleteModal/DeleteModal.tsx

@@ -1,12 +1,34 @@
 import { UseMutateFunction } from '@tanstack/react-query';
+import { StoreDetailResponse } from 'api/store/entity';
+import useLogger from 'utils/hooks/analytics/useLogger';
 import styles from './DeleteModal.module.scss';
 
 interface Props {
   close: () => void;
-  deleteMyReview: UseMutateFunction
+  deleteMyReview: UseMutateFunction;
+  storeDetail: StoreDetailResponse;
 }
 
-export default function DeleteModal({ close, deleteMyReview }: Props) {
+export default function DeleteModal({ close, deleteMyReview, storeDetail }: Props) {
+  const logger = useLogger();
+
+  const loggingConfirmDeleteClick = () => {
+    logger.actionEventClick({
+      actionTitle: 'BUSINSESS',
+      title: 'shop_detail_view_review_delete_done',
+      value: storeDetail.name,
+      event_category: 'click',
+    });
+  };
+  const loggingCancelDeleteClick = () => {
+    logger.actionEventClick({
+      actionTitle: 'BUSINSESS',
+      title: 'shop_detail_view_review_delete_cancel',
+      value: storeDetail.name,
+      event_category: 'click',
+    });
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
@@ -19,11 +41,20 @@ export default function DeleteModal({ close, deleteMyReview }: Props) {
         </div>
         <div className={styles.modal__description}>삭제한 리뷰를 되돌릴 수 없습니다.</div>
         <div className={styles.modal__button}>
-          <button type="button" onClick={close}>취소하기</button>
+          <button
+            type="button"
+            onClick={() => {
+              loggingCancelDeleteClick();
+              close();
+            }}
+          >
+            취소하기
+          </button>
           <button
             type="button"
             onClick={() => {
               deleteMyReview();
+              loggingConfirmDeleteClick();
               close();
             }}
           >

src/pages/Store/StoreDetailPage/Review/components/ReviewButton/index.tsx

@@ -3,6 +3,9 @@ import LoginRequiredModal from 'components/common/LoginRequiredModal';
 
 import { useUser } from 'utils/hooks/state/useUser';
 import useModalPortal from 'utils/hooks/layout/useModalPortal';
+import useLogger from 'utils/hooks/analytics/useLogger';
+import { useParams } from 'react-router-dom';
+import useStoreDetail from 'pages/Store/StoreDetailPage/hooks/useStoreDetail';
 import styles from './index.module.scss';
 
 export const REVEIW_LOGIN = [
@@ -13,23 +16,39 @@ export const REVEIW_LOGIN = [
 export default function ReviewButton({ goReviewPage }: { goReviewPage: ()=> void }) {
   const { data: userInfo } = useUser();
   const portalManager = useModalPortal();
+  const logger = useLogger();
+  const params = useParams();
+  const { storeDetail } = useStoreDetail(params.id!);
 
   const openLoginModal = () => {
     portalManager.open((portalOption: Portal) => (
       <LoginRequiredModal
         title={REVEIW_LOGIN[0]}
         description={REVEIW_LOGIN[1]}
         closeModal={portalOption.close}
+        type="write"
+        shopName={storeDetail.name}
       />
     ));
   };
 
+  const goReviewPageLogging = () => {
+    logger.actionEventClick({
+      actionTitle: 'BUSINESS',
+      title: 'shop_detail_view_review_write',
+      event_category: 'click',
+      value: storeDetail.name,
+    });
+    sessionStorage.setItem('enterReview', new Date().getTime().toString());
+  };
+
   return (
     <button
       type="button"
       className={styles.container}
       onClick={() => {
         if (userInfo) {
+          goReviewPageLogging();
           goReviewPage();
         } else {
           openLoginModal();

src/pages/Store/StoreDetailPage/Review/components/ReviewList/ReviewList.tsx

@@ -104,8 +104,8 @@ export default function ReviewList() {
             isSticky
               ? (
                 <div className={styles.point}>
-                  <StarList average_rating={data.pages[0].statistics.average_rating} />
-                  {`${data.pages[0].statistics.average_rating.toFixed()}점`}
+                  <StarList average_rating={Math.floor(data.pages[0].statistics.average_rating)} />
+                  {`${Math.floor(data.pages[0].statistics.average_rating).toFixed()}점`}
                 </div>
               )
               : (

src/pages/Store/StoreDetailPage/Review/components/ReviewReporting/index.tsx

@@ -3,6 +3,8 @@ import { cn } from '@bcsdlab/utils';
 import { useNavigate, useParams } from 'react-router-dom';
 import CheckBox from 'components/common/CommonCheckBox';
 import { toast } from 'react-toastify';
+import useLogger from 'utils/hooks/analytics/useLogger';
+import useStoreDetail from 'pages/Store/StoreDetailPage/hooks/useStoreDetail';
 import ReportingLabel from './components/ReportingLabel';
 import styles from './ReviewReporting.module.scss';
 import useReviewReport from './query/useReviewReport';
@@ -43,6 +45,8 @@ export default function ReviewReportingPage() {
   const params = useParams<{ shopid: string; reviewid: string }>();
   const { mutate } = useReviewReport(params.shopid!, params.reviewid!);
   const navigate = useNavigate();
+  const logger = useLogger();
+  const { storeDetail } = useStoreDetail(params.shopid!);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
@@ -81,6 +85,15 @@ export default function ReviewReportingPage() {
     );
   }, [etcDescription]);
 
+  const loggingReportDone = () => {
+    logger.actionEventClick({
+      actionTitle: 'BUSINESS',
+      title: 'shop_detail_view_review_report_done',
+      value: storeDetail.name,
+      event_category: 'click',
+    });
+  };
+
   const handleReport = () => {
     if (selectOptions.includes('etc') && etcDescription.trim() === '') {
       toast.error('신고 사유를 입력해주세요.');
@@ -89,6 +102,7 @@ export default function ReviewReportingPage() {
     }
     const reportData = { reports: requestOptions };
     mutate(reportData);
+    loggingReportDone();
     navigate(`/store/${params.shopid!}?state=리뷰`, { replace: true });
   };
 

src/pages/Store/StoreDetailPage/Review/components/SelectButton/SelectButton.tsx

@@ -10,6 +10,8 @@ import { useUser } from 'utils/hooks/state/useUser';
 import LoginRequiredModal from 'components/common/LoginRequiredModal';
 
 import showToast from 'utils/ts/showToast';
+import useLogger from 'utils/hooks/analytics/useLogger';
+import useStoreDetail from 'pages/Store/StoreDetailPage/hooks/useStoreDetail';
 import styles from './SelectButton.module.scss';
 
 interface Props {
@@ -27,10 +29,22 @@ export default function SelectButton({ is_mine, review_id, is_reported }: Props)
   const portalManager = useModalPortal();
   const param = useParams();
   const mutation = useDeleteReview(param.id!, review_id);
+  const logger = useLogger();
+  const { storeDetail } = useStoreDetail(params.id!);
 
   const openDeleteModal = () => {
+    logger.actionEventClick({
+      actionTitle: 'BUSINESS',
+      title: 'shop_detail_view_review_delete',
+      value: storeDetail.name,
+      event_category: 'click',
+    });
     portalManager.open((portalOption: Portal) => (
-      <DeleteModal close={portalOption.close} deleteMyReview={mutation.mutate} />
+      <DeleteModal
+        close={portalOption.close}
+        deleteMyReview={mutation.mutate}
+        storeDetail={storeDetail}
+      />
     ));
   };
 
@@ -42,9 +56,21 @@ export default function SelectButton({ is_mine, review_id, is_reported }: Props)
         title={REVEIW_REPORT_LOGIN[0]}
         description={REVEIW_REPORT_LOGIN[1]}
         closeModal={portalOption.close}
+        type="report"
+        shopName={storeDetail.name}
       />
     ));
   };
+
+  const loggingReportClick = () => {
+    logger.actionEventClick({
+      actionTitle: 'BUSINESS',
+      title: 'shop_detail_view_review_report',
+      value: storeDetail.name,
+      event_category: 'click',
+    });
+  };
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
@@ -80,6 +106,7 @@ export default function SelectButton({ is_mine, review_id, is_reported }: Props)
                 return;
               }
               if (userInfo) {
+                loggingReportClick();
                 navigate(`/report/review/shopid/${params.id!}/reviewid/${review_id}`);
               } else {
                 openLoginModal();

src/pages/Store/StoreDetailPage/Review/index.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { DropdownProvider } from 'pages/Store/StoreDetailPage/hooks/useDropdown';
 import AverageRating from './components/AverageRating/AverageRating';
@@ -9,6 +9,11 @@ import styles from './index.module.scss';
 export default function ReviewPage({ id }: { id: string }) {
   const navigate = useNavigate();
 
+  useEffect(() => {
+    // 리뷰 페이지 진입 시간 기록
+    sessionStorage.setItem('enterReviewPage', new Date().getTime().toString());
+  }, []);
+
   return (
     <Suspense fallback={<div />}>
       <div className={styles.container}>