feat : 편지 상세보기 페이지 1차 수정 완료

prgrms-web-devcourse-final-project · Nov 28, 2024 · d4b68a4 · d4b68a4
1 parent 2e7786c
commit d4b68a4
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 6 deletions.
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
@@ -4,8 +4,17 @@ 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 }>();
 
     const imageItem = {
@@ -28,6 +37,12 @@ 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 onDeleteClick = (letterId: string) => {
@@ -78,7 +93,14 @@ export const LetterDetailPage = () => {
                     )}
                 </div>
             </div>
-            {type === 'map' ? (
+
+            {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]">
                         보관하기