[비즈니스팀] 로깅 추가

public/index.html

@@ -14,7 +14,6 @@
     <link rel="apple-touch-icon" href="https://static.koreatech.in/assets/favicons/favicon-32x32.png" />
     <link rel="shortcut icon" href="https://static.koreatech.in/assets/favicons/favicon-32x32.png">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-B9VPQ37GNT"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -30,6 +29,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=%REACT_APP_NAVER_MAPS_CLIENT_ID%"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}

src/component/common/CustomModal/index.tsx

@@ -3,11 +3,13 @@ import CustomButton from 'page/Auth/Signup/CustomButton';
 import { createPortal } from 'react-dom';
 import cn from 'utils/ts/className';
 import { useEffect } from 'react';
+import useLogger from 'utils/hooks/useLogger';
 import styles from './CustomModal.module.scss';
 
 interface CustomModalProps {
   buttonText?: string;
   title: string;
+  eventTitle?:string;
   modalSize: string;
   hasFooter: boolean;
   isOpen: boolean;
@@ -17,8 +19,9 @@ interface CustomModalProps {
 }
 
 export default function CustomModal({
-  buttonText = '', title, modalSize, hasFooter, isOpen, isOverflowVisible, onCancel, children,
+  buttonText = '', title, eventTitle = '', modalSize, hasFooter, isOpen, isOverflowVisible, onCancel, children,
 }: CustomModalProps) {
+  const logger = useLogger();
   useEffect(() => {
     if (isOpen) {
       document.body.style.cssText = `
@@ -47,7 +50,12 @@ export default function CustomModal({
         <div className={styles[`container__header--${modalSize}`]}>
           <span className={styles.container__title}>{title}</span>
           <XClose
-            onClick={onCancel}
+            onClick={() => {
+              onCancel();
+              if (title === '가게 정보 수정') {
+                logger.actionEventClick({ actionTitle: 'OWNER', title: `${eventTitle}_close`, value: `${title} 닫기` });
+              }
+            }}
             className={styles['container__close-button']}
           />
         </div>
@@ -56,7 +64,11 @@ export default function CustomModal({
         </div>
         {hasFooter && (
           <div className={styles.container__footer}>
-            <CustomButton content={buttonText} buttonSize="large" onClick={onCancel} />
+            <CustomButton
+              content={buttonText}
+              buttonSize="large"
+              onClick={onCancel}
+            />
           </div>
         )}
       </div>

src/component/common/Modal/alertModal/index.tsx

@@ -1,3 +1,4 @@
+import useLogger from 'utils/hooks/useLogger';
 import styles from './alertModal.module.scss';
 
 interface AlertModalProps {
@@ -12,6 +13,7 @@ interface AlertModalProps {
 export default function AlertModal({
   title, content, setIsOpen, callBack, cancelText, acceptText,
 }: AlertModalProps) {
+  const logger = useLogger();
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter' || event.key === ' ') {
       setIsOpen(false);
@@ -52,6 +54,7 @@ export default function AlertModal({
               if (callBack) {
                 callBack();
               }
+              logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_event_cancel', value: '이벤트 추가 취소' });
             }}
             onKeyDown={handleKeyDown}
           >

src/lib/gtag.ts

@@ -26,4 +26,8 @@ export const event = ({
     event_label: label,
     value,
   });
+  // eslint-disable-next-line no-console
+  console.table({
+    팀: action, '이벤트 Category': category, '이벤트 Title': label, 값: value,
+  });
 };

src/page/AddMenu/components/AddMenuImgModal/index.tsx

@@ -5,6 +5,7 @@ import useAddMenuStore from 'store/addMenu';
 import ErrorMessage from 'component/common/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import { UploadError } from 'utils/hooks/useImagesUpload';
+import useLogger from 'utils/hooks/useLogger';
 import styles from './AddMenuImgModal.module.scss';
 
 interface AddMenuImgModalProps {
@@ -20,13 +21,15 @@ interface AddMenuImgModalProps {
 }
 
 export default function AddMenuImgModal({ isOpen, closeModal, imageObject }: AddMenuImgModalProps) {
+  const logger = useLogger();
   const { setImageUrls } = useAddMenuStore();
 
   const triggerFileInput = () => {
     imageObject.imgRef.current?.click();
   };
   const handleImageChange = async () => {
     await imageObject.saveImgFile();
+    logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu_image', value: '메뉴 이미지 추가' });
   };
   const triggerCameraInput = () => {
     imageObject.imgRef.current?.click();

src/page/AddMenu/components/MenuImage/index.tsx

@@ -8,13 +8,15 @@ import useAddMenuStore from 'store/addMenu';
 import ErrorMessage from 'component/common/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import useImagesUpload from 'utils/hooks/useImagesUpload';
+import useLogger from 'utils/hooks/useLogger';
 import styles from './MenuImage.module.scss';
 
 interface MenuImageProps {
   isComplete: boolean;
 }
 
 export default function MenuImage({ isComplete }: MenuImageProps) {
+  const logger = useLogger();
   const { isMobile } = useMediaQuery();
   const { imageUrl, setImageUrls, removeImageUrl } = useAddMenuStore();
   const {
@@ -39,6 +41,7 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
 
   const handleImageChange = async () => {
     await saveImgFile();
+    logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu_image', value: '메뉴 이미지 추가' });
   };
 
   useEffect(() => {

src/page/AddMenu/components/MenuPrice/components/PriceInput/PriceInput.module.scss

@@ -124,7 +124,7 @@
     text-align: right;
     box-sizing: border-box;
     width: 95%;
-    height: 60px;
+    height: 100%;
     padding: 16px;
     color: #252525;
     font-size: 20px;
@@ -139,6 +139,7 @@
       padding: 8px;
       text-align: left;
       box-sizing: border-box;
+      font-size: 14px;
     }
   }
 

src/page/AddMenu/index.tsx

@@ -6,6 +6,7 @@ import useMyShop from 'query/shop';
 import useAddMenuStore from 'store/addMenu';
 import { useErrorMessageStore } from 'store/errorMessageStore';
 import useScrollToTop from 'utils/hooks/useScrollToTop';
+import useLogger from 'utils/hooks/useLogger';
 import MenuImage from './components/MenuImage';
 import MenuName from './components/MenuName';
 import MenuPrice from './components/MenuPrice';
@@ -28,6 +29,9 @@ export default function AddMenu() {
     setTrue: openGoMyShopModal,
     setFalse: closeGoMyShopModal,
   } = useBooleanState(false);
+
+  const logger = useLogger();
+
   const {
     categoryIds,
     description,
@@ -65,17 +69,20 @@ export default function AddMenu() {
     if (isComplete) {
       toggleConfirmClick();
     } else {
-      navigate('/owners');
+      navigate('/owner');
+      logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu_cancel', value: '메뉴 추가 취소' });
     }
   };
 
   const onClickMenuAddConfirmHandler = () => {
     if (isComplete) {
       if (!isMobile) {
         openGoMyShopModal();
+        logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu_confirm', value: '메뉴 추가 완료' });
         return;
       }
       addMenuMutationEvent();
+      logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu_confirm', value: '메뉴 추가 완료' });
     } else {
       toggleConfirmClick();
     }

src/page/ManageEvent/AddingEvent/index.tsx

@@ -14,6 +14,7 @@ import { ReactComponent as Picture } from 'assets/svg/common/picture.svg';
 import { ReactComponent as PictureDisalbe } from 'assets/svg/common/picture-disable.svg';
 import { createPortal } from 'react-dom';
 import AlertModal from 'component/common/Modal/alertModal';
+import useLogger from 'utils/hooks/useLogger';
 
 /* eslint-disable no-await-in-loop */
 /* eslint-disable jsx-a11y/label-has-associated-control */
@@ -101,6 +102,7 @@ export default function AddingEvent() {
 
   const { mutate: addEvent, isPending } = useAddEvent(param.id!);
   const navigate = useNavigate();
+  const logger = useLogger();
 
   const changeInput = (
     e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>,
@@ -200,6 +202,7 @@ export default function AddingEvent() {
     };
 
     addEvent(requestData);
+    logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_event_register', value: '이벤트 추가' });
   };
 
   return (

src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss

@@ -1,7 +1,6 @@
 .container {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
   width: 752px;
   height: calc(80vh - 78px);
   margin-left: 40px;