From ef9c93853105f0e047501d04252dbe94c811ba1e Mon Sep 17 00:00:00 2001
From: TaehunLee <85233397+Todari@users.noreply.github.com>
Date: Thu, 10 Oct 2024 20:43:55 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20eventName=EC=97=90=20=EB=94=B0=EB=9D=BC?=
 =?UTF-8?q?=20og=ED=83=9C=EA=B7=B8=EA=B0=80=20=EB=B3=80=EA=B2=BD=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20(#739)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: meta tag 수정

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

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

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

* style: lint 적용
---
 client/index.html                              |  7 ++-----
 client/src/pages/EventPage/EventPageLayout.tsx | 12 ++++++++++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/client/index.html b/client/index.html
index 6ca0b92c..7f96b23c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -5,7 +5,7 @@
 
     <title>행동대장 - 쉽고 빠른 모임 정산 및 송금 서비스</title>
 
-    <meta name="description" content="모임에서 발생한 비용을 손쉽게 정산하고 간편하게 송금할 수 있는 행동대장" />
+    <meta name="description" content="행동대장으로 모임에서 발생한 비용을 손쉽게 정산하고 간편하게 송금해요" />
     <meta
       name="keywords"
       content="행동대장, 행대동장, 행댕이, 흔듯, 행사, 정산, 모임, 송금, 더치페이, 더치페이 서비스, 더치페이 앱, 간편 정산, 간편한 정산, 쉬운 정산, 정산 앱, 정산 서비스, 엔빵, 엔빵계산기, 엔빵 앱, 엔빵 서비스, 우아한테크코스, 우테코, 우테코 프로젝트, 우테코 6기, 우아한테크코스 6기"
@@ -13,10 +13,7 @@
 
     <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"
diff --git a/client/src/pages/EventPage/EventPageLayout.tsx b/client/src/pages/EventPage/EventPageLayout.tsx
index 6a16208d..7361992b 100644
--- a/client/src/pages/EventPage/EventPageLayout.tsx
+++ b/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">