design: #13 초대하기 버튼 이미지 추가

Leets-Official · Jan 24, 2025 · d49965f · d49965f
1 parent 9a68779
commit d49965f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/assets/images/ic_invite_mail.svg b/src/assets/images/ic_invite_mail.svg
diff --git 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>
   );