From d49965fcbbcae583831ab39ddefdf0f0a181437d Mon Sep 17 00:00:00 2001
From: JIN921 <wlslwlsl808@gmail.com>
Date: Fri, 24 Jan 2025 15:00:28 +0900
Subject: [PATCH] =?UTF-8?q?design:=20#13=20=EC=B4=88=EB=8C=80=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/ic_invite_mail.svg |  4 ++++
 src/pages/MeetingDetail.tsx          | 27 +++++++++++++++++++++++----
 2 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/images/ic_invite_mail.svg

diff --git a/src/assets/images/ic_invite_mail.svg b/src/assets/images/ic_invite_mail.svg
new file mode 100644
index 0000000..eefefd0
--- /dev/null
+++ b/src/assets/images/ic_invite_mail.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6H6C4.89543 6 4 6.89543 4 8V16C4 17.1046 4.89543 18 6 18H18C19.1046 18 20 17.1046 20 16V8C20 6.89543 19.1046 6 18 6Z" stroke="#EB5916"/>
+<path d="M4 9L11.106 12.553C11.3836 12.6917 11.6897 12.7639 12 12.7639C12.3103 12.7639 12.6164 12.6917 12.894 12.553L20 9" stroke="#EB5916"/>
+</svg>
diff --git a/src/pages/MeetingDetail.tsx b/src/pages/MeetingDetail.tsx
index 05cddaa..1492e5e 100644
--- a/src/pages/MeetingDetail.tsx
+++ b/src/pages/MeetingDetail.tsx
@@ -2,6 +2,7 @@ import Button from '@/components/common/Button/Button';
 import Header from '@/components/common/Header/Header';
 import MeetingDetailMain from '@/components/MeetingDetail/MeetingDetailMain';
 import styled from 'styled-components';
+import MailIcon from '@/assets/images/ic_invite_mail.svg';
 
 const Container = styled.div`
   margin: 0 auto;
@@ -20,6 +21,11 @@ const ButtonContainer = styled.div`
   justify-content: center;
   align-items: center;
 `;
+const Icon = styled.img`
+  width: 24px;
+  height: 24px;
+  display: block;
+`;
 
 const meetingMockData = {
   title: '마라탕 맛나게 냠냠냠 ٩( ᐛ )و 모임',
@@ -32,7 +38,11 @@ const meetingMockData = {
   chatTime: '30분',
 };
 
-const MeetingDetail = () => {
+interface MeetingDetailProps {
+  isOwner: boolean; // 게시물 소유 여부를 판별할 prop 추가
+}
+
+const MeetingDetail = ({ isOwner }: MeetingDetailProps) => {
   const handleLeave = () => {
     alert('모임에서 나갔습니다.');
   };
@@ -57,11 +67,20 @@ const MeetingDetail = () => {
       />
       <ButtonContainer>
         <Button variant="primary-outline" size="sm" rounded="sm">
+          <Icon src={MailIcon} alt="초대" />
           초대하기
         </Button>
-        <Button size="sm" rounded="sm">
-          수정하기
-        </Button>
+        {isOwner ? (
+          <>
+            <Button size="sm" rounded="sm">
+              수정하기
+            </Button>
+          </>
+        ) : (
+          <Button size="sm" rounded="sm">
+            참여하기
+          </Button>
+        )}
       </ButtonContainer>
     </Container>
   );