From 3fcec64d069cdbff0bc10aefb6e460e345748d30 Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Sat, 24 Feb 2024 16:28:12 +0900
Subject: [PATCH] Add guestbook page

---
 apps/blog/app/guestbook/page.module.scss      |  9 +++++
 apps/blog/app/guestbook/page.tsx              | 39 +++++++++++++++++++
 .../blog/src/components/PostComment/index.tsx |  4 +-
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 apps/blog/app/guestbook/page.module.scss
 create mode 100644 apps/blog/app/guestbook/page.tsx

diff --git a/apps/blog/app/guestbook/page.module.scss b/apps/blog/app/guestbook/page.module.scss
new file mode 100644
index 00000000..efdb9222
--- /dev/null
+++ b/apps/blog/app/guestbook/page.module.scss
@@ -0,0 +1,9 @@
+.guestbook {
+    width: clamp(0px, map-get($container-width, small), 100%);
+    margin: $global-navigation-height auto 0;
+
+    &__title {
+        margin: 24px 12px;
+        text-align: center;
+    }
+}
diff --git a/apps/blog/app/guestbook/page.tsx b/apps/blog/app/guestbook/page.tsx
new file mode 100644
index 00000000..11d7647d
--- /dev/null
+++ b/apps/blog/app/guestbook/page.tsx
@@ -0,0 +1,39 @@
+import { revalidateTag } from "next/cache";
+import { Suspense } from "react";
+import { classNames } from "@marshallku/utils";
+import { getComments, postComment } from "#api/comment/api.server";
+import CommentForm from "#components/CommentForm";
+import CommentList from "#components/CommentList";
+import Typography from "#components/Typography";
+import styles from "./page.module.scss";
+
+const SLUG = "/guestbook";
+
+const cx = classNames(styles, "guestbook");
+
+async function Comments() {
+    const data = await getComments(SLUG);
+    return <CommentList data={data} />;
+}
+
+export default async function GuestbookPage() {
+    return (
+        <div className={cx()}>
+            <Typography variant="h1" component="h1" className={cx("__title")} fontWeight={700}>
+                방명록
+            </Typography>
+            <CommentForm
+                slug={SLUG}
+                submit={async (data) => {
+                    "use server";
+
+                    await postComment(data);
+                    revalidateTag(SLUG);
+                }}
+            />
+            <Suspense fallback={<p>Loading...</p>}>
+                <Comments />
+            </Suspense>
+        </div>
+    );
+}
diff --git a/apps/blog/src/components/PostComment/index.tsx b/apps/blog/src/components/PostComment/index.tsx
index 8ab5ed75..cac350ed 100644
--- a/apps/blog/src/components/PostComment/index.tsx
+++ b/apps/blog/src/components/PostComment/index.tsx
@@ -4,7 +4,7 @@ import { Suspense, useEffect, useMemo, useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ErrorBoundary } from "@marshallku/react-error-boundary";
 import { classNames } from "@marshallku/utils";
-import CommentList from "#components/CommentList";
+import Comments from "#components/Comments";
 import PostCommentForm from "#components/PostCommentForm";
 import styles from "./index.module.scss";
 
@@ -31,7 +31,7 @@ function PostComment({ slug }: PostCommentProps) {
                         <PostCommentForm slug={slug} />
                         <ErrorBoundary fallback={null}>
                             <Suspense fallback={null}>
-                                <CommentList slug={slug} />
+                                <Comments slug={slug} />
                             </Suspense>
                         </ErrorBoundary>
                     </>