From 51a8364ab8512206ae8970adb1b028a2c80fdeaf Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Fri, 10 May 2024 12:33:09 +0900
Subject: [PATCH 1/3] feat: implement NoComment

---
 ui/src/components/comment/server/no-comment.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 ui/src/components/comment/server/no-comment.tsx

diff --git a/ui/src/components/comment/server/no-comment.tsx b/ui/src/components/comment/server/no-comment.tsx
new file mode 100644
index 00000000..5d80be3c
--- /dev/null
+++ b/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>
+  );
+}

From 31d218d7cd6d70b4ec815179d5f284a8303288da Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Fri, 10 May 2024 12:33:27 +0900
Subject: [PATCH 2/3] feat: implement CommentCardList

---
 .../comment/server/comment-cards-list.tsx     | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 ui/src/components/comment/server/comment-cards-list.tsx

diff --git a/ui/src/components/comment/server/comment-cards-list.tsx b/ui/src/components/comment/server/comment-cards-list.tsx
new file mode 100644
index 00000000..9a948c3c
--- /dev/null
+++ b/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>
+  );
+}

From 02390fc1ee078afe50c4a84e7825fa93f4402fc8 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Fri, 10 May 2024 12:33:51 +0900
Subject: [PATCH 3/3] feat: implement Comment Board

---
 ui/src/app/(board)/comment/page.tsx | 37 +++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/(board)/comment/page.tsx b/ui/src/app/(board)/comment/page.tsx
index 4db577f4..43da0552 100644
--- a/ui/src/app/(board)/comment/page.tsx
+++ b/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>
+  );
 }