247 feat 편지 상세 보기 페이지 삭제 버튼 모달 컴포넌트 (#249)

* chore : 파일 경로 수정 * style : report 모달 열릴 때스타일 수정 * feat : 편지 상세 보기 페이지 삭제 버튼 모달 컴포넌트 완료
prgrms-web-devcourse-final-project · Dec 5, 2024 · 02f1b2b · 02f1b2b
1 parent 16a6824
commit 02f1b2b
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 62 deletions.
diff --git a/src/components/LetterDetailPage/Delete/DeleteButton.tsx b/src/components/LetterDetailPage/Delete/DeleteButton.tsx
@@ -0,0 +1,40 @@
+import { RiDeleteBin5Line } from 'react-icons/ri';
+import { useState } from 'react';
+import { DeleteModal } from './DeleteModal';
+type DeleteButtonProps = {
+    id: string;
+};
+
+export const DeleteButton = ({ id }: DeleteButtonProps) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const openModal = () => {
+        setIsModalOpen(true);
+    };
+
+    const closeModal = () => {
+        setIsModalOpen(false);
+    };
+
+    return (
+        <>
+            <button className=" flex-center gap-1 p-2" onClick={openModal}>
+                <RiDeleteBin5Line />
+            </button>
+
+            {isModalOpen && (
+                <div
+                    className="fixed inset-0 mx-auto min-w-[375px] max-w-[475px] bg-black bg-opacity-50 flex-center z-50"
+                    onClick={closeModal}
+                >
+                    <div
+                        onClick={(e) => e.stopPropagation()}
+                        className="bg-white rounded-lg p-6"
+                    >
+                        <DeleteModal id={id} closeModal={closeModal} />
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
diff --git a/src/components/LetterDetailPage/Delete/DeleteModal.stories.tsx b/src/components/LetterDetailPage/Delete/DeleteModal.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DeleteModal } from './DeleteModal';
+
+const meta: Meta<typeof DeleteModal> = {
+    component: DeleteModal,
+    title: 'molecule/DeleteModal',
+    tags: ['autodocs'],
+    argTypes: {
+        id: {
+            control: 'text',
+            description: '삭제할 편지 ID.',
+            defaultValue: '1234'
+        },
+        closeModal: {
+            action: 'closeModal',
+            description: '모달 닫기 이벤트 핸들러'
+        }
+    }
+};
+export default meta;
+
+type Story = StoryObj<typeof DeleteModal>;
+
+export const Default: Story = {
+    args: {
+        id: '1234'
+    }
+};
diff --git a/src/components/LetterDetailPage/Delete/DeleteModal.tsx b/src/components/LetterDetailPage/Delete/DeleteModal.tsx
@@ -0,0 +1,29 @@
+import { Margin } from '@/components/Common/Margin/Margin';
+
+type DeleteModalProps = {
+    id: string;
+    closeModal: () => void;
+};
+
+export const DeleteModal = ({ id, closeModal }: DeleteModalProps) => {
+    return (
+        <div className="flex flex-col bg-white rounded-2xl items-center justify-center w-full h-full p-4">
+            <Margin top={10} />
+            <span className="font-bold mb-4 text-2xl">
+                {id}편지를 삭제하시겠습니까?
+            </span>
+
+            <div className="flex-center gap-2">
+                <button
+                    onClick={closeModal}
+                    className="mt-6 bg-slate-300 w-24 text-white px-4 py-2 rounded-lg"
+                >
+                    닫기
+                </button>
+                <button className="mt-6 bg-slate-500 w-24 text-white px-4 py-2 rounded-lg">
+                    삭제하기
+                </button>
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/LetterDetailPage/DeleteButton/DeleteButton.stories.tsx b/src/components/LetterDetailPage/DeleteButton/DeleteButton.stories.tsx
diff --git a/src/components/LetterDetailPage/DeleteButton/DeleteButton.tsx b/src/components/LetterDetailPage/DeleteButton/DeleteButton.tsx
diff --git a/src/components/LetterDetailPage/Report/ReportButton.tsx b/src/components/LetterDetailPage/Report/ReportButton.tsx
@@ -19,13 +19,21 @@ export const ReportButton = ({ id }: ReportButtonProps) => {
 
     return (
         <>
-            <button className="flex-center gap-1 p-2 " onClick={openModal}>
+            <button className="flex-center gap-1 p-2" onClick={openModal}>
                 <AiOutlineAlert />
             </button>
 
             {isModalOpen && (
-                <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
-                    <ReportModal id={id} closeModal={closeModal} />
+                <div
+                    className="fixed inset-0 mx-auto min-w-[375px] max-w-[475px] bg-black bg-opacity-50 flex-center z-50"
+                    onClick={closeModal}
+                >
+                    <div
+                        onClick={(e) => e.stopPropagation()}
+                        className="bg-white rounded-lg p-6"
+                    >
+                        <ReportModal id={id} closeModal={closeModal} />
+                    </div>
                 </div>
             )}
         </>

diff --git a/src/pages/Letter/Detail/LetterDetailPage.tsx b/src/pages/Letter/Detail/LetterDetailPage.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { MapLetterDetail } from '@/components/LetterDetailPage/MapLetterDetail';
 import { KeywordLetterDetail } from '@/components/LetterDetailPage/KeywordLetterDetail';
 import { useParams } from 'react-router-dom';
-import { DeleteButton } from '@/components/LetterDetailPage/DeleteButton/DeleteButton';
+import { DeleteButton } from '@/components/LetterDetailPage/Delete/DeleteButton';
 import { ReplyList } from '@/components/LetterDetailPage/ReplyList/ReplyList';
 import { ReportButton } from '@/components/LetterDetailPage/Report/ReportButton';
 
@@ -46,11 +46,6 @@ export const LetterDetailPage = ({
     ];
     const navigate = useNavigate();
 
-    const onDeleteClick = (letterId: string) => {
-        console.log(`편지 ID ${letterId} 삭제`);
-        alert('편지를 삭제하시겠습니까?');
-        navigate(-1);
-    };
     const onBackClick = () => {
         navigate(-1);
     };
@@ -63,7 +58,7 @@ export const LetterDetailPage = ({
                 </div>
                 {id && (
                     <div className="mt-10 flex absolute top-0 right-8">
-                        <DeleteButton id={id} onClick={onDeleteClick} />
+                        <DeleteButton id={id} />
                         <ReportButton id={id} />
                     </div>
                 )}

diff --git a/src/pages/Letter/Detail/ReplyLetterDetailPage.tsx b/src/pages/Letter/Detail/ReplyLetterDetailPage.tsx
@@ -1,8 +1,9 @@
 import { BackButton } from '@/components/Common/BackButton/BackButton';
 import { useNavigate } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
-import { DeleteButton } from '@/components/LetterDetailPage/DeleteButton/DeleteButton';
+import { DeleteButton } from '@/components/LetterDetailPage/Delete/DeleteButton';
 import { ReplyLetterDetail } from '@/components/LetterDetailPage/ReplyLetterDetail';
+import { ReportButton } from '@/components/LetterDetailPage/Report/ReportButton';
 
 export const ReplyLetterDetailPage = () => {
     const { id } = useParams<{ id: string }>();
@@ -20,11 +21,6 @@ export const ReplyLetterDetailPage = () => {
 
     const navigate = useNavigate();
 
-    const onDeleteClick = (letterId: string) => {
-        console.log(`편지 ID ${letterId} 삭제`);
-        alert('편지를 삭제하시겠습니까?');
-        navigate(-1);
-    };
     const onBackClick = () => {
         navigate(-1);
     };
@@ -36,8 +32,9 @@ export const ReplyLetterDetailPage = () => {
                     <BackButton onClick={onBackClick} />
                 </div>
                 {id && (
-                    <div className="mt-10 absolute top-0 right-8">
-                        <DeleteButton id={id} onClick={onDeleteClick} />
+                    <div className="mt-10 flex absolute top-0 right-8">
+                        <DeleteButton id={id} />
+                        <ReportButton id={id} />
                     </div>
                 )}
                 <div className="mt-16 flex-center relative">