116 feat 편지 상세보기 페이지1차 수정 완료 (#119)

* feat : 편지 상세보기 페이지 삭제하기 버튼 완료 * feat : 편지 상세보기 페이지 1차 수정 완료
prgrms-web-devcourse-final-project · Nov 28, 2024 · 04f04b4 · 04f04b4
1 parent 67fea51
commit 04f04b4
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 23 deletions.
diff --git a/src/components/LetterDetailPage/DeleteButton/DeleteButton.tsx b/src/components/LetterDetailPage/DeleteButton/DeleteButton.tsx
@@ -1,11 +1,15 @@
 import { RiDeleteBin5Line } from 'react-icons/ri';
 type DeleteButtonProps = {
-    onClick: () => void;
+    id: string;
+    onClick: (id: string) => void;
 };
 
-export const DeleteButton = ({ onClick }: DeleteButtonProps) => {
+export const DeleteButton = ({ id, onClick }: DeleteButtonProps) => {
     return (
-        <button onClick={onClick} className="btn-base flex-center gap-1 p-2 ">
+        <button
+            onClick={() => onClick(id)}
+            className="btn-base flex-center gap-1 p-2 "
+        >
             <RiDeleteBin5Line />
             삭제하기
         </button>

diff --git a/src/components/LetterDetailPage/ReplyList/ReplyList.tsx b/src/components/LetterDetailPage/ReplyList/ReplyList.tsx
@@ -21,10 +21,10 @@ export const ReplyList = ({ replies }: ReplyListProps) => {
                     <div
                         className={`flex items-center justify-between w-full hover:opacity-70 `}
                     >
-                        <span className="font-bold w-52 truncate mr-4">
+                        <span className="font-bold w-44 truncate mr-4">
                             Re: {reply.title}
                         </span>
-                        <span className="text-sm truncate text-gray-600">
+                        <span className="text-sm truncate flex-1 text-gray-600">
                             {reply.date}
                         </span>
                         <div className="text-2xl">{'>'}</div>

diff --git a/src/pages/Letter/Detail/LetterDetailPage.stories.tsx b/src/pages/Letter/Detail/LetterDetailPage.stories.tsx
@@ -13,7 +13,10 @@ export default meta;
 type Story = StoryObj<typeof LetterDetailPage>;
 
 export const MapLetter: Story = {
-    args: {},
+    args: {
+        isAuthor: false,
+        hasReplies: false
+    },
     decorators: [
         (Story) => {
             return (
@@ -28,7 +31,80 @@ export const MapLetter: Story = {
 };
 
 export const KeywordLetter: Story = {
-    args: {},
+    args: {
+        isAuthor: false,
+        hasReplies: false
+    },
+    decorators: [
+        (Story) => {
+            return (
+                <MemoryRouter initialEntries={['/letter/keyword/456']}>
+                    <Routes>
+                        <Route path="/letter/:type/:id" element={<Story />} />
+                    </Routes>
+                </MemoryRouter>
+            );
+        }
+    ]
+};
+
+export const MapLetterWithoutReplies: Story = {
+    args: {
+        isAuthor: true,
+        hasReplies: false
+    },
+    decorators: [
+        (Story) => {
+            return (
+                <MemoryRouter initialEntries={['/letter/map/123']}>
+                    <Routes>
+                        <Route path="/letter/:type/:id" element={<Story />} />
+                    </Routes>
+                </MemoryRouter>
+            );
+        }
+    ]
+};
+export const MapLetterWithReplies: Story = {
+    args: {
+        isAuthor: true,
+        hasReplies: true
+    },
+    decorators: [
+        (Story) => {
+            return (
+                <MemoryRouter initialEntries={['/letter/map/123']}>
+                    <Routes>
+                        <Route path="/letter/:type/:id" element={<Story />} />
+                    </Routes>
+                </MemoryRouter>
+            );
+        }
+    ]
+};
+
+export const KeywordLetterWithoutReplies: Story = {
+    args: {
+        isAuthor: true,
+        hasReplies: false
+    },
+    decorators: [
+        (Story) => {
+            return (
+                <MemoryRouter initialEntries={['/letter/keyword/456']}>
+                    <Routes>
+                        <Route path="/letter/:type/:id" element={<Story />} />
+                    </Routes>
+                </MemoryRouter>
+            );
+        }
+    ]
+};
+export const KeywordLetterWithReplies: Story = {
+    args: {
+        isAuthor: true,
+        hasReplies: true
+    },
     decorators: [
         (Story) => {
             return (

diff --git a/src/pages/Letter/Detail/LetterDetailPage.tsx b/src/pages/Letter/Detail/LetterDetailPage.tsx
@@ -3,10 +3,20 @@ 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 { ReplyList } from '@/components/LetterDetailPage/ReplyList/ReplyList';
 
-export const LetterDetailPage = () => {
+type LetterDetailPageProps = {
+    isAuthor: boolean;
+    hasReplies: boolean;
+};
+
+export const LetterDetailPage = ({
+    isAuthor,
+    hasReplies
+}: LetterDetailPageProps) => {
     const { type, id } = useParams<{ type: 'map' | 'keyword'; id: string }>();
-    console.log(type, id);
+
     const imageItem = {
         id: '편지지_샘플_1',
         name: '이미지',
@@ -27,23 +37,39 @@ export const LetterDetailPage = () => {
         '키워드',
         '키워드'
     ];
+
+    const sampleReplies = [
+        { id: 1, title: '답장 제목 1', date: '24.11.28' },
+        { id: 2, title: '답장 제목 2', date: '24.11.29' },
+        { id: 3, title: '답장 제목 3', date: '24.11.30' }
+    ];
     const navigate = useNavigate();
 
-    const handleBackClick = () => {
+    const onDeleteClick = (letterId: string) => {
+        console.log(`편지 ID ${letterId} 삭제`);
+        alert('편지를 삭제하시겠습니까?');
+        navigate(-1);
+    };
+    const onBackClick = () => {
         navigate(-1);
     };
 
     return (
         <>
-            <div className="mt-4 mx-auto max-w">
-                <div className="ml-6">
-                    <BackButton onClick={handleBackClick} />
+            <div className="mt-4 mx-auto max-w relative">
+                <div className="mx-auto w-[710px]">
+                    <BackButton onClick={onBackClick} />
                 </div>
-                <div className="mt-4 flex-center relative">
+                {id && (
+                    <div className="mt-10 absolute top-0 right-8">
+                        <DeleteButton id={id} onClick={onDeleteClick} />
+                    </div>
+                )}
+                <div className="mt-16 flex-center relative">
                     <img
                         src={imageItem.src}
                         alt={imageItem.name}
-                        className="w-[710.72px] h-[900px] relative"
+                        className="w-[710px] h-[900px] relative"
                     />
                     <img
                         src={labelItem.src}
@@ -68,14 +94,28 @@ export const LetterDetailPage = () => {
                 </div>
             </div>
 
-            <div className="mt-4 flex-center mx-auto max-w gap-4">
-                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
-                    보관하기
-                </button>
-                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
-                    답장하기
-                </button>
-            </div>
+            {isAuthor ? (
+                hasReplies ? (
+                    <div className="mt-16 w-[710px]  mx-auto">
+                        <ReplyList replies={sampleReplies} />
+                    </div>
+                ) : null
+            ) : type === 'map' ? (
+                <div className="mt-4 flex-center mx-auto max-w gap-4">
+                    <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
+                        보관하기
+                    </button>
+                    <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
+                        편지에 답장하기
+                    </button>
+                </div>
+            ) : (
+                <div className="mt-4 flex-center mx-auto max-w gap-4">
+                    <button className="btn-base rounded-3xl w-[700px] h-[80px]">
+                        편지에 답장하기
+                    </button>
+                </div>
+            )}
         </>
     );
 };