[#408] [모임 상세] 게시글 컴포넌트 (#429)

* feat: 게시글 목록 컴포넌트 작성

* feat: 게시글 목록 컴포넌트 스토리 작성

* refactor: 스토리북 이름 수정

* refactor: 파일 및 컴포넌트명 수정

src/stories/bookgroup/detail/CommentList.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import CommentList from '@/ui/bookgroup/detail/CommentList';
+
+const meta: Meta<typeof CommentList> = {
+  title: 'bookgroup/detail/CommentList',
+  component: CommentList,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CommentList>;
+
+export const Default: Story = {
+  args: {
+    comments: [
+      {
+        id: 1,
+        writer: { id: 10, name: '소피아', profileImageSrc: '/icons/logo.svg' },
+        createdAt: '2023.10.22',
+        content: '프론트엔드 개발자라면 꼭 읽어봐야 할 책이라고 생각해요.',
+      },
+      {
+        id: 2,
+        writer: { id: 21, name: '다독이', profileImageSrc: '' },
+        createdAt: '2023.10.18',
+        content: '이 책 덕분에 프로젝트 리팩터링에 도전할 수 있었어요.',
+      },
+    ],
+  },
+};

src/ui/bookgroup/detail/CommentList.tsx

@@ -0,0 +1,88 @@
+import Image from 'next/image';
+
+import { IconHamburger } from '@public/icons';
+
+type Comment = {
+  id: number;
+  writer: { id: number; profileImageSrc: string; name: string };
+  createdAt: string;
+  content: string;
+};
+
+interface CommentListProps {
+  comments: Comment[];
+}
+
+const CommentList = ({ comments }: CommentListProps) => {
+  return (
+    <div className="flex flex-col gap-[1rem]">
+      {/* FIXME: Heading 컴포넌트 페이지 단으로 빼기 */}
+      <Heading text="게시글" />
+
+      {comments.map(({ id, writer, createdAt, content }) => (
+        <div className="flex flex-col gap-[2rem] pt-[1rem]" key={id}>
+          <div className="flex gap-[1rem]">
+            <Avatar
+              profileImageSrc={writer.profileImageSrc}
+              name={writer.name}
+            />
+            <div className="flex flex-grow flex-col">
+              <Name name={writer.name} />
+              <Date date={createdAt} />
+            </div>
+            <MenuButton />
+          </div>
+          <Comment content={content} />
+          <Divider />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CommentList;
+
+const Heading = ({ text }: { text: string }) => (
+  <p className="text-xl font-bold">{text}</p>
+);
+
+// FIXME: Avatar Base 컴포넌트로 변경
+const Avatar = ({
+  profileImageSrc,
+  name,
+}: {
+  profileImageSrc: string;
+  name: string;
+}) => (
+  <span
+    className={`relative h-[3.5rem] w-[3.5rem] self-center rounded-full ${
+      profileImageSrc ? 'bg-white' : 'bg-black-400'
+    }`}
+  >
+    {profileImageSrc && (
+      <Image alt={name} src={profileImageSrc} fill className="rounded-full" />
+    )}
+  </span>
+);
+
+const Name = ({ name }: { name: string }) => (
+  <p className="text-sm font-bold">{name}</p>
+);
+
+const Date = ({ date }: { date: string }) => (
+  <p className="text-xs text-placeholder">{date}</p>
+);
+
+const MenuButton = () => {
+  return (
+    <span className="inline-block h-[2rem] w-[2rem] cursor-pointer">
+      <IconHamburger />
+    </span>
+  );
+};
+
+const Comment = ({ content }: { content: string }) => (
+  <p className="text-justify text-md">{content}</p>
+);
+
+const Divider = () => <p className=" border-b-black100 border-[0.05rem]"></p>;