Add guestbook page

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;
+    }
+}

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>
+    );
+}

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>
                     </>