Merge pull request #365 from MovieReviewComment/feature/issue-327/com…

…ment-card-board

ui/src/app/(board)/comment/page.tsx

@@ -1,3 +1,36 @@
-export default function Page() {
-  return <>comment board</>;
+import { Suspense } from 'react';
+
+import { CommentBoardHeader } from '@/components/comment/client/comment-board-header';
+import { CommentCardsList } from '@/components/comment/server/comment-cards-list';
+
+import { COMMENT_FILTERS } from '@/lib/constants/comment';
+import type { ListCommentsQuery } from '@/lib/definitions/comment';
+
+export default function Page({
+  searchParams,
+}: {
+  searchParams?: Omit<ListCommentsQuery, 'pageOffset' | 'pageSize'> & {
+    page?: string;
+  };
+}) {
+  const query: ListCommentsQuery = {
+    movieName: searchParams?.movieName,
+    nickname: searchParams?.nickname,
+    pageOffset: Number(searchParams?.page),
+  };
+
+  const SEARCH_OPEN_KEY = COMMENT_FILTERS.reduce((acc, filter) => acc + (query[filter] ?? ''), '');
+
+  return (
+    <main className="container mx-auto flex max-w-5xl flex-col items-center">
+      <CommentBoardHeader SEARCH_OPEN_KEY={SEARCH_OPEN_KEY} />
+
+      <section className="w-full py-4">
+        {/* todo skeleton */}
+        <Suspense key={JSON.stringify(query)}>
+          <CommentCardsList query={query} />
+        </Suspense>
+      </section>
+    </main>
+  );
 }

ui/src/components/comment/server/comment-cards-list.tsx

@@ -0,0 +1,23 @@
+import { CommentCard } from '@/components/comment/client/comment-card';
+import { NoComment } from '@/components/comment/server/no-comment';
+import Pagination from '@/components/common/client/pagination';
+
+import { listComments } from '@/lib/apis/comment/server';
+import type { ListCommentsQuery } from '@/lib/definitions/comment';
+
+export async function CommentCardsList({ query }: { query: ListCommentsQuery }) {
+  const { comments, pagination } = await listComments(query);
+
+  return (
+    <div className="flex w-full flex-col items-center space-y-6">
+      <div className="w-full">
+        {comments.length > 0 &&
+          comments.map((comment) => <CommentCard key={comment.id} comment={comment} />)}
+
+        {comments.length === 0 && <NoComment />}
+      </div>
+
+      <Pagination totalPages={pagination.totalPageCount} />
+    </div>
+  );
+}

ui/src/components/comment/server/no-comment.tsx

@@ -0,0 +1,13 @@
+import { XCircleIcon } from '@heroicons/react/24/outline';
+
+import Text from '@/components/common/server/text';
+
+export function NoComment() {
+  return (
+    <div className="flex flex-col p-6 items-center gap-8">
+      <XCircleIcon className="w-6 h-6 text-gray-500" />
+
+      <Text>해당하는 코멘트가 없습니다.</Text>
+    </div>
+  );
+}