Feat/71/add modal

src/app/(crew)/crew/detail/[id]/_components/create-gathering.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useDisclosure } from '@mantine/hooks';
+import CreateGatheringModalContainer from '@/src/app/(crew)/crew/_components/create-gathering-modal/container';
+import Button from '@/src/components/common/input/button';
+import { CreateGatheringRequestType } from '@/src/types/gathering-data';
+
+export default function CreateGathering() {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  const initialValue: CreateGatheringRequestType = {
+    title: '',
+    introduce: '',
+    dateTime: '',
+    location: '',
+    totalCount: 0,
+    imageUrl: null,
+  };
+
+  return (
+    <>
+      <Button type="button" className="btn-filled px-4" onClick={open}>
+        약속 만들기
+      </Button>
+      <CreateGatheringModalContainer opened={opened} close={close} data={initialValue} />
+    </>
+  );
+}

src/app/(crew)/crew/detail/[id]/page.tsx

@@ -1,8 +1,8 @@
 import { getCrewDetail } from '@/src/_apis/detail/get-crew-detail';
 import { getGatheringList } from '@/src/_apis/detail/get-gathering-list';
 import DetailCrewCard from '@/src/components/common/crew-list/detail-crew-card';
-import Button from '@/src/components/common/input/button';
 import GatheringCardCarousel from '@/src/components/gathering-list/gathering-card-carousel';
+import CreateGathering from './_components/create-gathering';
 import CrewReviewSection from './_components/review-section';
 
 export default async function CrewDetailPage() {
@@ -21,9 +21,7 @@ export default async function CrewDetailPage() {
           <article className="space-y-6">
             <div className="flex items-center justify-between">
               <h2 className="text-2xl font-semibold">크루 약속 잡기</h2>
-              <Button type="button" className="btn-filled px-4">
-                약속 만들기
-              </Button>
+              <CreateGathering />
             </div>
             <div className="flex w-full">
               <GatheringCardCarousel gatheringData={gatheringList} />

src/app/(crew)/my-crew/page.tsx

@@ -7,7 +7,7 @@ import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
 import Tabs from '@/src/components/common/tab';
 import { CrewCardInformResponse } from '@/src/types/crew-card';
 
-export default function MyCrePage() {
+export default function MyCrewPage() {
   const myPageTabs = [
     { label: '내가 참여한 크루', id: 'joined-crew' },
     { label: '내가 만든 크루', id: 'made-crew' },

src/components/common/crew-list/detail-crew-card.tsx

@@ -73,7 +73,7 @@ export default function DetailCrewCard({
             </div>
           </Menu.Target>
           <Menu.Dropdown>
-            <Menu.Item component="a" href="/crew/edit" className="font-pretendard">
+            <Menu.Item component="a" href={`/crew/detail/${id}/edit`} className="font-pretendard">
               크루 수정하기
             </Menu.Item>
             <Menu.Item
@@ -136,7 +136,7 @@ export default function DetailCrewCard({
 
               {isConfirmed && (
                 <span className="flex items-center gap-[1px] text-blue-600">
-                  <Image src={Check} alt="확인" width={24} height={24} />{' '}
+                  <Image src={Check} alt="확인" width={24} height={24} />
                   <span className="text-sm font-medium"> 개설 확정</span>
                 </span>
               )}

src/components/common/review-list/review-card.tsx

@@ -3,7 +3,9 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { formatDateWithYear } from '@/src/utils/format-date';
+import ConfirmCancelModal from '@/src/components/common/modal/confirm-cancel-modal';
 import { ReviewerType } from '@/src/types/review';
 import { Profile } from '../profile';
 import ReviewHearts from '../review-heart/hearts';
@@ -41,6 +43,11 @@ export default function ReviewCard({
   gatheringLocation,
   reviewer,
 }: ReviewCardProps) {
+  const [
+    confirmDeleteModalOpened,
+    { open: openConfirmDeleteModal, close: closeConfirmDeleteModal },
+  ] = useDisclosure(false);
+
   const [prefetched, setPrefetched] = useState(new Set());
   const CREWPAGE = `crew/detail/${crewId}`;
   const router = useRouter();
@@ -55,8 +62,9 @@ export default function ReviewCard({
     setPrefetched(new Set(prefetched).add(CREWPAGE));
   };
 
-  const handleDelete = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleDelete = () => {
+    // TODO: 삭제 로직
+    closeConfirmDeleteModal();
   };
 
   const { year, month, day } = formatDateWithYear(createdAt);
@@ -102,12 +110,24 @@ export default function ReviewCard({
           <Button
             variant="outline"
             className="flex-shrink-0 p-[6px_14px] text-base font-semibold"
-            onClick={handleDelete}
+            onClick={(e) => {
+              e.stopPropagation();
+              openConfirmDeleteModal();
+            }}
           >
             리뷰 삭제하기
           </Button>
         )}
       </div>
+
+      {/* 삭제 확인 모달 */}
+      <ConfirmCancelModal
+        opened={confirmDeleteModalOpened}
+        onClose={closeConfirmDeleteModal}
+        onConfirm={handleDelete}
+      >
+        리뷰를 삭제하시겠습니까?
+      </ConfirmCancelModal>
     </div>
   );
 }