160 feat 답장 편지 상세보기 페이지 레이아웃 개발 완료 (#163)

* feat : 답장 편지 상세보기 페이지 레이아웃 개발 완료 * feat : 답장 상세보기 페이지 라우팅 * chore : ReplyList.stories 수정 * chore : HomePage.stories 수정
prgrms-web-devcourse-final-project · Dec 2, 2024 · f7b29aa · f7b29aa
1 parent cf8e8f2
commit f7b29aa
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 6 deletions.
diff --git a/src/components/LetterDetailPage/ReplyList/ReplyList.stories.tsx b/src/components/LetterDetailPage/ReplyList/ReplyList.stories.tsx
@@ -1,9 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import { BrowserRouter } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
 import { ReplyList } from './ReplyList';
 
 const meta: Meta<typeof ReplyList> = {
     component: ReplyList,
     title: 'atoms/ReplyList',
+    decorators: [
+        (Story) => (
+            <BrowserRouter>
+                <Story />
+            </BrowserRouter>
+        )
+    ],
     tags: ['autodocs'],
     argTypes: {
         replies: {

diff --git a/src/components/LetterDetailPage/ReplyList/ReplyList.tsx b/src/components/LetterDetailPage/ReplyList/ReplyList.tsx
@@ -1,3 +1,4 @@
+import { NavLink } from 'react-router-dom';
 type ReplyListProps = {
     replies: {
         id: number;
@@ -8,7 +9,10 @@ type ReplyListProps = {
 
 export const ReplyList = ({ replies }: ReplyListProps) => {
     return (
-        <div className="bg-gray-300 rounded-2xl w-auto">
+        <NavLink
+            to="/letter/reply/:id"
+            className="bg-gray-300 rounded-2xl w-auto"
+        >
             {replies.map((reply, index) => (
                 <div
                     key={reply.id}
@@ -31,6 +35,6 @@ export const ReplyList = ({ replies }: ReplyListProps) => {
                     </div>
                 </div>
             ))}
-        </div>
+        </NavLink>
     );
 };
diff --git a/src/pages/Home/HomePage.stories.tsx b/src/pages/Home/HomePage.stories.tsx
@@ -1,13 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
+import { MemoryRouter } from 'react-router-dom';
 import { HomePage } from './HomePage';
 
 const meta: Meta<typeof HomePage> = {
     component: HomePage,
     title: 'pages/HomePage',
     tags: ['autodocs'],
+    argTypes: {},
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
     argTypes: {}
 };
+
 export default meta;
 
 type Story = StoryObj<typeof HomePage>;

diff --git a/src/pages/Letter/Detail/LetterDetailPage.tsx b/src/pages/Letter/Detail/LetterDetailPage.tsx
@@ -7,8 +7,8 @@ import { DeleteButton } from '@/components/LetterDetailPage/DeleteButton/DeleteB
 import { ReplyList } from '@/components/LetterDetailPage/ReplyList/ReplyList';
 
 type LetterDetailPageProps = {
-    isAuthor: boolean;
-    hasReplies: boolean;
+    isAuthor?: boolean;
+    hasReplies?: boolean;
 };
 
 export const LetterDetailPage = ({

diff --git a/src/pages/Letter/Detail/ReplyLetterDetailPage.stories.tsx b/src/pages/Letter/Detail/ReplyLetterDetailPage.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ReplyLetterDetailPage } from './ReplyLetterDetailPage';
+import { Route, Routes, MemoryRouter } from 'react-router-dom';
+
+const meta: Meta<typeof ReplyLetterDetailPage> = {
+    component: ReplyLetterDetailPage,
+    title: 'Pages/ReplyLetterDetailPage',
+    tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ReplyLetterDetailPage>;
+
+export const Default: Story = {
+    args: {},
+    decorators: [
+        (Story) => {
+            return (
+                <MemoryRouter initialEntries={['/letter/reply/123']}>
+                    <Routes>
+                        <Route path="/letter/reply/:id" element={<Story />} />
+                    </Routes>
+                </MemoryRouter>
+            );
+        }
+    ]
+};
diff --git a/src/pages/Letter/Detail/ReplyLetterDetailPage.tsx b/src/pages/Letter/Detail/ReplyLetterDetailPage.tsx
@@ -0,0 +1,64 @@
+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 { ReplyLetterDetail } from '@/components/LetterDetailPage/ReplyLetterDetail';
+
+export const ReplyLetterDetailPage = () => {
+    const { id } = useParams<{ id: string }>();
+
+    const imageItem = {
+        id: '편지지_샘플_1',
+        name: '이미지',
+        src: '/편지지_샘플_1.png'
+    };
+    const labelItem = {
+        id: '라벨_샘플',
+        name: '이미지',
+        src: '/라벨_샘플.png'
+    };
+
+    const navigate = useNavigate();
+
+    const onDeleteClick = (letterId: string) => {
+        console.log(`편지 ID ${letterId} 삭제`);
+        alert('편지를 삭제하시겠습니까?');
+        navigate(-1);
+    };
+    const onBackClick = () => {
+        navigate(-1);
+    };
+
+    return (
+        <>
+            <div className="mt-4 mx-auto max-w relative">
+                <div className="mx-auto w-[710px]">
+                    <BackButton onClick={onBackClick} />
+                </div>
+                {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-[710px] h-[900px] relative"
+                    />
+                    <img
+                        src={labelItem.src}
+                        alt={labelItem.name}
+                        className="absolute top-4 translate-x-40 w-[125.32px] h-[201.1px]"
+                    />
+
+                    <ReplyLetterDetail
+                        title="편지제목"
+                        content="편지내용"
+                        date="24.11.18"
+                    />
+                </div>
+            </div>
+        </>
+    );
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -7,6 +7,7 @@ import { RegisterPage } from '@/pages/User/Register/RegisterPage';
 import { ArchivedPage } from '@/pages/ArchivedPage';
 import { LabelCollectionsPage } from '@/pages/LabelCollectionsPage';
 import { LetterDetailPage } from '@/pages/Letter/Detail/LetterDetailPage';
+import { ReplyLetterDetailPage } from '@/pages/Letter/Detail/ReplyLetterDetailPage';
 import { NotificationPage } from '@/pages/NotificationPage';
 import { SentPage } from '@/pages/SentPage';
 import { SharePage } from '@/pages/SharePage';
@@ -26,6 +27,7 @@ export {
     ArchivedPage,
     LabelCollectionsPage,
     LetterDetailPage,
+    ReplyLetterDetailPage,
     NotificationPage,
     SentPage,
     SharePage,

diff --git a/src/router.tsx b/src/router.tsx
@@ -11,6 +11,7 @@ import {
     ArchivedPage,
     LabelCollectionsPage,
     LetterDetailPage,
+    ReplyLetterDetailPage,
     NotificationPage,
     SentPage,
     SharePage,
@@ -104,6 +105,10 @@ export const router = createBrowserRouter([
         path: '/letter/:type/:id',
         element: <LetterDetailPage />
     },
+    {
+        path: '/letter/reply/:id',
+        element: <ReplyLetterDetailPage />
+    },
     {
         path: '/lottery',
         element: <LabelLotteryPage />