feat : 편지 상세보기 페이지 답장 리스트 컴포넌트 개발 완료 (#111)

src/components/LetterDetailPage/ReplyList/ReplyList.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReplyList } from './ReplyList';
+
+const meta: Meta<typeof ReplyList> = {
+    component: ReplyList,
+    title: 'atoms/ReplyList',
+    tags: ['autodocs'],
+    argTypes: {
+        replies: {
+            description: '답장 목록 데이터',
+            table: {
+                type: {
+                    summary: '{ id: number; title: string; date: string }[]'
+                }
+            }
+        }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ReplyList>;
+
+export const Default: Story = {
+    args: {
+        replies: [
+            {
+                id: 1,
+                title: '친구의 여행 이야기cccccccccccccccccccccccc',
+                date: '2024-11-15'
+            },
+            {
+                id: 2,
+                title: '업무 관련 답장',
+                date: '2024-11-16'
+            },
+            {
+                id: 3,
+                title: '가족 근황',
+                date: '2024-11-17'
+            },
+            {
+                id: 4,
+                title: '가족 근황',
+                date: '2024-11-17'
+            }
+        ]
+    }
+};
+
+export const EmptyList: Story = {
+    args: {
+        replies: []
+    }
+};

src/components/LetterDetailPage/ReplyList/ReplyList.tsx

@@ -0,0 +1,36 @@
+type ReplyListProps = {
+    replies: {
+        id: number;
+        title: string;
+        date: string;
+    }[];
+};
+
+export const ReplyList = ({ replies }: ReplyListProps) => {
+    return (
+        <div className="bg-gray-300 rounded-2xl w-auto">
+            {replies.map((reply, index) => (
+                <div
+                    key={reply.id}
+                    className={`flex items-center cursor-pointer h-1 p-6 ${
+                        index < replies.length - 1
+                            ? 'border-b border-l-neutral-300'
+                            : ''
+                    }`}
+                >
+                    <div
+                        className={`flex items-center justify-between w-full hover:opacity-70 `}
+                    >
+                        <span className="font-bold w-52 truncate mr-4">
+                            Re: {reply.title}
+                        </span>
+                        <span className="text-sm truncate text-gray-600">
+                            {reply.date}
+                        </span>
+                        <div className="text-2xl">{'>'}</div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};