feat(answer-list): 질문 목록 컴포넌트를 분리한다 (#471)

src/components/panel/AnswerList.tsx

@@ -0,0 +1,37 @@
+import type { Answer } from '@/lib/api/answer';
+
+import React from 'react';
+
+import { Account } from '@/components/vectors';
+import { formatDistance } from '@/lib/format-date';
+
+interface Props {
+  nickname: string;
+  answers: Answer[];
+  now: Date;
+}
+export function AnswerList({ nickname, answers, now }: Props): JSX.Element {
+  return (
+    <ul>
+      {answers.map((answer) => (
+        <li
+          key={answer.id}
+          className="flex flex-col gap-3 p-5 w-full border-y border-grey-light"
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex justify-start items-center gap-1 overflow-hidden">
+              <div role="img" aria-hidden>
+                <Account className="fill-grey-darkest" />
+              </div>
+              <div className="font-bold whitespace-nowrap">{nickname}</div>
+              <div className="text-grey-dark">
+                {formatDistance(now, new Date(answer.createdAt))}
+              </div>
+            </div>
+          </div>
+          <div className="whitespace-pre-wrap">{answer.content}</div>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/components/panel/__tests__/AnswerList.test.tsx

@@ -0,0 +1,25 @@
+import type { Answer } from '@/lib/api/answer';
+
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { createMockAnswer } from '@/mocks/data/answer';
+
+import { AnswerList } from '../AnswerList';
+
+describe('AnswerList', () => {
+  it('답변 내용과 답변자 닉네임을 보여준다', () => {
+    const answers: Answer[] = [
+      { ...createMockAnswer(), content: '안녕하세요' },
+      { ...createMockAnswer(), content: '반가워요' },
+    ];
+    render(
+      <AnswerList nickname={'닉네임'} answers={answers} now={new Date()} />,
+    );
+
+    expect(screen.getByText(/안녕하세요/)).toBeInTheDocument();
+    expect(screen.getByText(/반가워요/)).toBeInTheDocument();
+    expect(screen.getByText(/닉네임/)).toBeInTheDocument();
+  });
+});