From 6e359e5763ae8102ad04322f701eee8b5cc4b944 Mon Sep 17 00:00:00 2001
From: Daeeui Kim <kimeodml@gmail.com>
Date: Wed, 26 Jun 2024 18:41:56 +0900
Subject: [PATCH] =?UTF-8?q?[=EB=B9=84=EC=A6=88=EB=8B=88=EC=8A=A4=ED=8C=80]?=
 =?UTF-8?q?=20=EB=A1=9C=EA=B9=85=20=EC=B6=94=EA=B0=80=20(#360)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 로깅 추가

* fix: 스크립트 중복 제거
---
 public/index.html                             |   2 +-
 src/component/common/CustomModal/index.tsx    |  18 ++-
 .../common/Modal/alertModal/index.tsx         |   3 +
 src/lib/gtag.ts                               |   4 +
 .../components/AddMenuImgModal/index.tsx      |   3 +
 .../AddMenu/components/MenuImage/index.tsx    |   3 +
 .../PriceInput/PriceInput.module.scss         |   3 +-
 src/page/AddMenu/index.tsx                    |   9 +-
 src/page/ManageEvent/AddingEvent/index.tsx    |   3 +
 .../EditShopInfoModal.module.scss             |   1 -
 .../components/EditShopInfoModal/index.tsx    | 140 +++++++++---------
 .../components/EventTable/index.tsx           |   7 +-
 .../MyShopPage/components/ShopInfo/index.tsx  |  13 +-
 src/page/MyShopPage/index.tsx                 |  12 ++
 14 files changed, 144 insertions(+), 77 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4a6d84d2..44336fa2 100644
--- a/public/index.html
+++ b/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);}
diff --git a/src/component/common/CustomModal/index.tsx b/src/component/common/CustomModal/index.tsx
index d0c5817a..9d85449c 100644
--- a/src/component/common/CustomModal/index.tsx
+++ b/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>
diff --git a/src/component/common/Modal/alertModal/index.tsx b/src/component/common/Modal/alertModal/index.tsx
index a0a1b8a0..53cb5cec 100644
--- a/src/component/common/Modal/alertModal/index.tsx
+++ b/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}
           >
diff --git a/src/lib/gtag.ts b/src/lib/gtag.ts
index 0162888a..5fee1bf1 100644
--- a/src/lib/gtag.ts
+++ b/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,
+  });
 };
diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
index d6cb6b99..fd2d909f 100644
--- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx
+++ b/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,6 +21,7 @@ interface AddMenuImgModalProps {
 }
 
 export default function AddMenuImgModal({ isOpen, closeModal, imageObject }: AddMenuImgModalProps) {
+  const logger = useLogger();
   const { setImageUrls } = useAddMenuStore();
 
   const triggerFileInput = () => {
@@ -27,6 +29,7 @@ export default function AddMenuImgModal({ isOpen, closeModal, imageObject }: Add
   };
   const handleImageChange = async () => {
     await imageObject.saveImgFile();
+    logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu_image', value: '메뉴 이미지 추가' });
   };
   const triggerCameraInput = () => {
     imageObject.imgRef.current?.click();
diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
index 76466f1e..91a99a93 100644
--- a/src/page/AddMenu/components/MenuImage/index.tsx
+++ b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -8,6 +8,7 @@ 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 {
@@ -15,6 +16,7 @@ interface MenuImageProps {
 }
 
 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(() => {
diff --git a/src/page/AddMenu/components/MenuPrice/components/PriceInput/PriceInput.module.scss b/src/page/AddMenu/components/MenuPrice/components/PriceInput/PriceInput.module.scss
index 881d4e31..e7cf086f 100644
--- a/src/page/AddMenu/components/MenuPrice/components/PriceInput/PriceInput.module.scss
+++ b/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;
     }
   }
 
diff --git a/src/page/AddMenu/index.tsx b/src/page/AddMenu/index.tsx
index 498fa0d9..949b11da 100644
--- a/src/page/AddMenu/index.tsx
+++ b/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,7 +69,8 @@ export default function AddMenu() {
     if (isComplete) {
       toggleConfirmClick();
     } else {
-      navigate('/owners');
+      navigate('/owner');
+      logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu_cancel', value: '메뉴 추가 취소' });
     }
   };
 
@@ -73,9 +78,11 @@ export default function AddMenu() {
     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();
     }
diff --git a/src/page/ManageEvent/AddingEvent/index.tsx b/src/page/ManageEvent/AddingEvent/index.tsx
index c7b46b61..0c840956 100644
--- a/src/page/ManageEvent/AddingEvent/index.tsx
+++ b/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 (
diff --git a/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss b/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss
index eb591186..41ce47e4 100644
--- a/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss
+++ b/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;
diff --git a/src/page/MyShopPage/components/EditShopInfoModal/index.tsx b/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
index dc3ce700..5ecc8026 100644
--- a/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
+++ b/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
@@ -23,6 +23,7 @@ import showToast from 'utils/ts/showToast';
 import cn from 'utils/ts/className';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import ErrorMessage from 'component/common/ErrorMessage';
+import useLogger from 'utils/hooks/useLogger';
 import styles from './EditShopInfoModal.module.scss';
 
 interface EditShopInfoModalProps {
@@ -37,6 +38,7 @@ export default function EditShopInfoModal({
   setIsSuccess,
 }: EditShopInfoModalProps) {
   const { isMobile } = useMediaQuery();
+  const logger = useLogger();
   const {
     setTrue: openOperateTimeModal,
     setFalse: closeOperateTimeModal,
@@ -171,6 +173,7 @@ export default function EditShopInfoModal({
 
   const onSubmit: SubmitHandler<OwnerShop> = (data) => {
     mutation.mutate(data);
+    logger.actionEventClick({ actionTitle: 'OWNER', title: 'store_info_edit_confirm', value: '가게 정보 수정 완료' });
   };
 
   if (isMobile && isOperateTimeModalOpen) {
@@ -210,7 +213,10 @@ export default function EditShopInfoModal({
                 multiple
                 className={styles['mobile-container__add-file']}
                 {...register('image_urls')}
-                onChange={saveImgFile}
+                onChange={() => {
+                  saveImgFile();
+                  logger.actionEventClick({ actionTitle: 'OWNER', title: 'store_info_edit_add_image', value: '가게 정보 이미지 추가' });
+                }}
                 ref={imgRef}
               />
               <span className={styles['mobile-container__modify-image-caption']}>사진변경</span>
@@ -256,42 +262,36 @@ export default function EditShopInfoModal({
               <span className={styles['mobile-main-info__header']}>운영시간</span>
               <div className={styles['mobile-operate-time']}>
                 <div className={styles['mobile-operate-time__content']}>
-                  {
-                    isAllSameTime && !hasClosedDay ? (
-                      <div>
-                        {operateTimeState.time}
+                  {isAllSameTime && !hasClosedDay && (
+                  <div>
+                    {operateTimeState.time}
+                  </div>
+                  )}
+                  {isSpecificDayClosedAndAllSameTime && (
+                  <div>
+                    <div>{operateTimeState.time}</div>
+                    <div>{operateTimeState.holiday}</div>
+                  </div>
+                  )}
+                  {!isAllSameTime && !isSpecificDayClosedAndAllSameTime && !isAllClosed && (
+                  <>
+                    {WEEK.map((day) => (
+                      <div key={day}>
+                        {shopClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`}
                       </div>
-                    )
-                      : null
-                  }
-                  {
-                    isSpecificDayClosedAndAllSameTime ? (
-                      <div>
-                        <div>{operateTimeState.time}</div>
-                        <div>{operateTimeState.holiday}</div>
-                      </div>
-                    ) : null
-                  }
-                  {
-                    !isAllSameTime && !isSpecificDayClosedAndAllSameTime && !isAllClosed ? (
-                      <>
-                        {WEEK.map((day) => (
-                          <div key={day}>
-                            {shopClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`}
-                          </div>
-                        ))}
-                      </>
-                    ) : null
-                  }
-                  {
-                    isAllClosed ? (
-                      <span>매일 휴무</span>
-                    ) : null
-                  }
+                    ))}
+                  </>
+                  )}
+                  {isAllClosed && (
+                  <span>매일 휴무</span>
+                  )}
                 </div>
                 <button
                   type="button"
-                  onClick={openOperateTimeModal}
+                  onClick={() => {
+                    openOperateTimeModal();
+                    logger.actionEventClick({ actionTitle: 'OWNER', title: 'store_info_edit_time', value: '가게 정보 시간 수정' });
+                  }}
                   className={styles['mobile-operate-time__button']}
                 >
                   수정
@@ -404,7 +404,10 @@ export default function EditShopInfoModal({
                   id="mainMenuImage"
                   className={styles['main-image__add-file']}
                   {...register('image_urls')}
-                  onChange={saveImgFile}
+                  onChange={() => {
+                    saveImgFile();
+                    logger.actionEventClick({ actionTitle: 'OWNER', title: 'store_info_edit_add_image', value: '가게 정보 이미지 추가' });
+                  }}
                   ref={imgRef}
                 />
                 <ImgPlusIcon className={styles['main-image__add-image-icon']} />
@@ -476,42 +479,36 @@ export default function EditShopInfoModal({
               <span className={styles['main-info__header']}>운영시간</span>
               <div className={styles['main-info__operate-time']}>
                 <div className={styles['main-info__operate-time--content']}>
-                  {
-                    isAllSameTime && !hasClosedDay ? (
-                      <div>
-                        {operateTimeState.time}
-                      </div>
-                    )
-                      : null
-                  }
-                  {
-                    isSpecificDayClosedAndAllSameTime ? (
-                      <div>
-                        <div>{operateTimeState.time}</div>
-                        <div>{operateTimeState.holiday}</div>
+                  {isAllSameTime && !hasClosedDay && (
+                  <div>
+                    {operateTimeState.time}
+                  </div>
+                  )}
+                  {isSpecificDayClosedAndAllSameTime && (
+                  <div>
+                    <div>{operateTimeState.time}</div>
+                    <div>{operateTimeState.holiday}</div>
+                  </div>
+                  )}
+                  {!isAllSameTime && !isSpecificDayClosedAndAllSameTime && !isAllClosed && (
+                  <>
+                    {WEEK.map((day) => (
+                      <div key={day}>
+                        {shopClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`}
                       </div>
-                    ) : null
-                  }
-                  {
-                    !isAllSameTime && !isSpecificDayClosedAndAllSameTime && !isAllClosed ? (
-                      <>
-                        {WEEK.map((day) => (
-                          <div key={day}>
-                            {shopClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`}
-                          </div>
-                        ))}
-                      </>
-                    ) : null
-                  }
-                  {
-                    isAllClosed ? (
-                      <span>매일 휴무</span>
-                    ) : null
-                  }
+                    ))}
+                  </>
+                  )}
+                  {isAllClosed && (
+                  <span>매일 휴무</span>
+                  )}
                 </div>
                 <button
                   type="button"
-                  onClick={openOperateTimeModal}
+                  onClick={() => {
+                    openOperateTimeModal();
+                    logger.actionEventClick({ actionTitle: 'OWNER', title: 'store_info_edit_time', value: '가게 정보 시간 수정' });
+                  }}
                   className={styles['main-info__operate-time--button']}
                 >
                   시간수정
@@ -585,7 +582,16 @@ export default function EditShopInfoModal({
             </div>
           </div>
           <div className={styles.container__buttons}>
-            <button type="button" onClick={closeModal} className={styles['container__buttons--cancel']}>취소</button>
+            <button
+              type="button"
+              onClick={() => {
+                closeModal();
+                logger.actionEventClick({ actionTitle: 'OWNER', title: 'store_info_edit_cancel', value: '가게 정보 수정 취소' });
+              }}
+              className={styles['container__buttons--cancel']}
+            >
+              취소
+            </button>
             <button type="submit" className={styles['container__buttons--confirm']}>확인</button>
           </div>
         </form>
diff --git a/src/page/MyShopPage/components/EventTable/index.tsx b/src/page/MyShopPage/components/EventTable/index.tsx
index 8cb4ed0a..d5aae898 100644
--- a/src/page/MyShopPage/components/EventTable/index.tsx
+++ b/src/page/MyShopPage/components/EventTable/index.tsx
@@ -11,6 +11,7 @@ import { ReactComponent as DeleteIcon } from 'assets/svg/myshop/delete-icon.svg'
 import { ReactComponent as Check } from 'assets/svg/myshop/check.svg';
 import { ReactComponent as CompleteIcon } from 'assets/svg/myshop/complete-icon.svg';
 import DeleteAlertModal from 'component/common/Modal/alertModal';
+import useLogger from 'utils/hooks/useLogger';
 import EventCard from './components/EventCard';
 import EventErrorModal from './components/EventErrorModal';
 import styles from './EventTable.module.scss';
@@ -25,6 +26,7 @@ export default function EventTable() {
   const [isDeleteErrorModalOpen, setIsDeleteErrorModalOpen] = useState(false);
   const [modalMessage, setModalMessage] = useState('');
   const { mutate: deleteEvents } = useDeleteEvent(shopData!.id, selectedEventIds);
+  const logger = useLogger();
 
   const toggleSelectEvent = (id: number): void => {
     setSelectedEventIds((prev: number[]) => (
@@ -121,7 +123,10 @@ export default function EventTable() {
             <button
               type="button"
               className={styles['manage-event-button']}
-              onClick={() => navigate(`/owner/event-add/${shopData?.id}`)}
+              onClick={() => {
+                navigate(`/owner/event-add/${shopData?.id}`);
+                logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_event', value: '이벤트 추가' });
+              }}
             >
               추가하기
               <AddEventIcon />
diff --git a/src/page/MyShopPage/components/ShopInfo/index.tsx b/src/page/MyShopPage/components/ShopInfo/index.tsx
index 979b1b51..1da28220 100644
--- a/src/page/MyShopPage/components/ShopInfo/index.tsx
+++ b/src/page/MyShopPage/components/ShopInfo/index.tsx
@@ -6,6 +6,7 @@ import { DAY_OF_WEEK, WEEK } from 'utils/constant/week';
 import CustomModal from 'component/common/CustomModal';
 import EditShopInfoModal from 'page/MyShopPage/components/EditShopInfoModal';
 import { Dispatch, SetStateAction, useState } from 'react';
+import useLogger from 'utils/hooks/useLogger';
 import styles from './ShopInfo.module.scss';
 
 interface ShopInfoProps {
@@ -28,6 +29,7 @@ export default function ShopInfo({
   const [closeTime, setCloseTime] = useState<string | null>(
     shopInfo.open[todayIndex].close_time,
   );
+  const logger = useLogger();
 
   const holidayIndex = shopInfo.open.filter((day) => day.closed)
     .map((day) => DAY_OF_WEEK.indexOf(day.day_of_week));
@@ -88,7 +90,10 @@ export default function ShopInfo({
             <button
               type="button"
               className={styles['mobileshop__update-btn']}
-              onClick={openEditShopInfoModal}
+              onClick={() => {
+                openEditShopInfoModal();
+                logger.actionEventClick({ actionTitle: 'OWNER', title: 'store_info_edit', value: '가게 정보 수정' });
+              }}
             >
               가게 관리하기
               <GearIcon />
@@ -136,13 +141,17 @@ export default function ShopInfo({
               <button
                 type="button"
                 className={styles['shop__update-btn']}
-                onClick={openEditShopInfoModal}
+                onClick={() => {
+                  openEditShopInfoModal();
+                  logger.actionEventClick({ actionTitle: 'OWNER', title: 'store_info_edit', value: '가게 정보 수정' });
+                }}
               >
                 가게 정보 수정
               </button>
               {isEditShopInfoModalOpen && (
                 <CustomModal
                   title="가게 정보 수정"
+                  eventTitle="store_info_edit"
                   modalSize="extra-large"
                   hasFooter={false}
                   isOpen={isEditShopInfoModalOpen}
diff --git a/src/page/MyShopPage/index.tsx b/src/page/MyShopPage/index.tsx
index 2e1dce4d..8aa0fc06 100644
--- a/src/page/MyShopPage/index.tsx
+++ b/src/page/MyShopPage/index.tsx
@@ -9,6 +9,7 @@ import { Portal } from 'component/common/Modal/PortalProvider';
 import useModalPortal from 'utils/hooks/useModalPortal';
 import showToast from 'utils/ts/showToast';
 import ImageModal from 'component/common/Modal/ImageModal';
+import useLogger from 'utils/hooks/useLogger';
 import CatagoryMenuList from './components/CatagoryMenuList';
 import ShopInfo from './components/ShopInfo';
 import styles from './MyShopPage.module.scss';
@@ -34,6 +35,8 @@ export default function MyShopPage() {
     value: isEditShopInfoModalOpen,
   } = useBooleanState(false);
 
+  const logger = useLogger();
+
   const [isSuccess, setIsSuccess] = useState(false);
   if (isSuccess) {
     showToast('success', '가게정보가 수정되었습니다.');
@@ -89,6 +92,9 @@ export default function MyShopPage() {
               <button
                 type="button"
                 className={styles['mobile-header__btn-add']}
+                onClick={() => {
+                  logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu', value: '메뉴 추가' });
+                }}
               >
                 메뉴추가
               </button>
@@ -146,6 +152,9 @@ export default function MyShopPage() {
               <button
                 type="button"
                 className={styles['header__btn-add']}
+                onClick={() => {
+                  logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_event', value: '이벤트 추가' });
+                }}
               >
                 이벤트 추가
               </button>
@@ -154,6 +163,9 @@ export default function MyShopPage() {
               <button
                 type="button"
                 className={styles['header__btn-add']}
+                onClick={() => {
+                  logger.actionEventClick({ actionTitle: 'OWNER', title: 'add_menu', value: '메뉴 추가' });
+                }}
               >
                 메뉴추가
               </button>