fix: eventName에 따라 og태그가 변경되도록 수정 (#739)

* fix: meta tag 수정

* feat: 행사 이름에 따라 meta tag가 변경되도록 수정

* fix: EventPageLayout이 사용되지 않는 경우, 기존 meta 태그가 보이도록 변경

* fix: unmount시 기존의 태그로 변경되도록 적용

* style: lint 적용

client/index.html

@@ -5,18 +5,15 @@
 
     <title>행동대장 - 쉽고 빠른 모임 정산 및 송금 서비스</title>
 
-    <meta name="description" content="모임에서 발생한 비용을 손쉽게 정산하고 간편하게 송금할 수 있는 행동대장" />
+    <meta name="description" content="행동대장으로 모임에서 발생한 비용을 손쉽게 정산하고 간편하게 송금해요" />
     <meta
       name="keywords"
       content="행동대장, 행대동장, 행댕이, 흔듯, 행사, 정산, 모임, 송금, 더치페이, 더치페이 서비스, 더치페이 앱, 간편 정산, 간편한 정산, 쉬운 정산, 정산 앱, 정산 서비스, 엔빵, 엔빵계산기, 엔빵 앱, 엔빵 서비스, 우아한테크코스, 우테코, 우테코 프로젝트, 우테코 6기, 우아한테크코스 6기"
     />
 
     <meta property="og:url" content="https://haengdong.pro/" />
     <meta property="og:title" content="행동대장 - 쉽고 빠른 모임 정산 및 송금 서비스" />
-    <meta
-      property="og:description"
-      content="모임에서 발생한 비용을 실시간으로 기록하고 정산하여 더치페이 결과를 간편하게 송금할 수 있는 행동대장"
-    />
+    <meta property="og:description" content="행동대장으로 모임에서 발생한 비용을 손쉽게 정산하고 간편하게 송금해요" />
     <meta property="og:type" content="website" />
     <meta
       property="og:image"

client/src/pages/EventPage/EventPageLayout.tsx

@@ -1,6 +1,7 @@
 import type {Event} from 'types/serviceType';
 
 import {Outlet} from 'react-router-dom';
+import {useEffect} from 'react';
 
 import useEventPageLayout from '@hooks/useEventPageLayout';
 import useShareEvent from '@hooks/useShareEvent';
@@ -12,6 +13,7 @@ import {DesktopShareEventButton, MobileShareEventButton} from '@components/Share
 import {Flex, Icon, IconButton, MainLayout, TopNav} from '@HDesign/index';
 
 import {isMobileDevice} from '@utils/detectDevice';
+import {updateMetaTag} from '@utils/udpateMetaTag';
 
 export type EventPageContextProps = Event & {
   isAdmin: boolean;
@@ -40,6 +42,16 @@ const EventPageLayout = () => {
     kakaoShare();
   };
 
+  useEffect(() => {
+    console.log('mount');
+    updateMetaTag('og:title', `행동대장이 "${eventSummary.eventName}"에 대한 정산을 요청했어요`);
+
+    return () => {
+      console.log('unmount');
+      updateMetaTag('og:title', '행동대장 - 쉽고 빠른 모임 정산 및 송금 서비스');
+    };
+  }, []);
+
   return (
     <MainLayout backgroundColor="gray">
       <Flex justifyContent="spaceBetween" alignItems="center">