From f23cdcbdec549a354ddc6fa9bb3770b8e9433aed Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Mon, 12 Feb 2024 13:50:35 +0900
Subject: [PATCH] Add comment submit form

---
 apps/blog/app/[category]/[...slug]/page.tsx   |  2 +-
 .../src/components/CommentAvatar/index.tsx    |  6 +-
 .../components/CommentForm/index.module.scss  | 75 +++++++++++++++++++
 .../blog/src/components/CommentForm/index.tsx | 65 ++++++++++++++++
 .../components/CommentList/index.module.scss  |  2 +-
 .../components/PostComment/index.module.scss  |  2 +
 .../blog/src/components/PostComment/index.tsx |  6 +-
 apps/blog/src/styles/reset.scss               |  5 +-
 8 files changed, 157 insertions(+), 6 deletions(-)
 create mode 100644 apps/blog/src/components/CommentForm/index.module.scss
 create mode 100644 apps/blog/src/components/CommentForm/index.tsx

diff --git a/apps/blog/app/[category]/[...slug]/page.tsx b/apps/blog/app/[category]/[...slug]/page.tsx
index 1a9e8b87..20816ff6 100644
--- a/apps/blog/app/[category]/[...slug]/page.tsx
+++ b/apps/blog/app/[category]/[...slug]/page.tsx
@@ -175,7 +175,7 @@ export default async function Post({ params: { category, slug } }: PostProps) {
                 </Typography>
             </main>
             <InteractPost className={cx("__interact")} title={post.data.title} slug={post.slug} />
-            <Suspense fallback={<p>Loading...</p>}>
+            <Suspense fallback={<PostComment />}>
                 <Comments slug={`/${postSlug}`} />
             </Suspense>
             <PrevNextPost previousPost={posts[postIndex + 1]} nextPost={posts[postIndex - 1]} />
diff --git a/apps/blog/src/components/CommentAvatar/index.tsx b/apps/blog/src/components/CommentAvatar/index.tsx
index 6ce2dbcd..79384847 100644
--- a/apps/blog/src/components/CommentAvatar/index.tsx
+++ b/apps/blog/src/components/CommentAvatar/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toURL } from "#utils/url";
 
 const AVATAR_SIZE = 40;
@@ -32,6 +32,10 @@ const getAvatar = (name: string, link?: string) => {
 function CommentAvatar({ name, url, postAuthor }: CommentAvatarProps) {
     const [src, setSrc] = useState(getAvatar(name, url));
 
+    useEffect(() => {
+        setSrc(getAvatar(name, url));
+    }, [name, url]);
+
     if (postAuthor) {
         return (
             <img
diff --git a/apps/blog/src/components/CommentForm/index.module.scss b/apps/blog/src/components/CommentForm/index.module.scss
new file mode 100644
index 00000000..b6d07b20
--- /dev/null
+++ b/apps/blog/src/components/CommentForm/index.module.scss
@@ -0,0 +1,75 @@
+.comment-form {
+    display: flex;
+    width: clamp(0px, map-get($container-width, small), 100%);
+    margin: 24px auto;
+    padding: 0 12px;
+
+    &__avatar {
+        margin: 12px 12px 0 0;
+    }
+
+    &__form {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        margin-top: 24px;
+        padding: 12px;
+        background-color: color(comment-2);
+        border-radius: 8px;
+
+        &::after {
+            content: "";
+            box-sizing: content-box;
+            position: absolute;
+            width: 17.5px;
+            height: 25px;
+            border: 0 solid color(comment-2);
+            border-width: 0 20px;
+            border-radius: 50%;
+            clip: rect(0, 41px, 15px, 28px);
+            display: block;
+            z-index: 1;
+            left: -37.4px;
+            top: 5px;
+        }
+    }
+
+    &__input {
+        @include typography(b2);
+        margin-bottom: 12px;
+        padding: 4px 12px;
+        background-color: color(comment);
+        border-radius: 4px;
+    }
+
+    &__textarea {
+        @include typography(b1);
+        height: 7em;
+        margin-top: 12px;
+        padding: 8px 12px;
+        background-color: color(comment);
+        border-radius: 4px;
+        resize: none;
+    }
+
+    &__buttons {
+        margin-top: 24px;
+        text-align: right;
+    }
+
+    &__submit {
+        display: inline-flex;
+        padding: 8px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        color: color(comment-2);
+        background-color: color(theme);
+        transition: background-color 0.3s $ease-in-out-cubic;
+
+        &:disabled {
+            background-color: color(comment);
+        }
+    }
+}
diff --git a/apps/blog/src/components/CommentForm/index.tsx b/apps/blog/src/components/CommentForm/index.tsx
new file mode 100644
index 00000000..346736b2
--- /dev/null
+++ b/apps/blog/src/components/CommentForm/index.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useFormState } from "react-dom";
+import { classNames } from "@marshallku/utils";
+import { submitComment } from "app/[category]/[...slug]/action";
+import Button from "#components/Button";
+import styles from "./index.module.scss";
+import Typography from "#components/Typography";
+import CommentAvatar from "#components/CommentAvatar";
+import { useState } from "react";
+import { Icon } from "@marshallku/icon";
+
+const cx = classNames(styles, "comment-form");
+
+const initialState = {
+    message: "",
+};
+
+function CommentForm() {
+    const [state, formAction] = useFormState(submitComment, initialState);
+    const [name, setName] = useState("");
+    const [body, setBody] = useState("");
+
+    return (
+        <div className={cx()}>
+            <figure className={cx("__avatar")}>
+                <CommentAvatar name={name} />
+            </figure>
+            <form action={formAction} className={cx("__form")}>
+                <Typography variant="c1" marginBottom={16}>
+                    댓글을 남겨주세요. (이메일 주소는 공개되지 않습니다.)
+                </Typography>
+                <input
+                    className={cx("__input")}
+                    name="name"
+                    placeholder="이름 (미입력시 '익명')"
+                    value={name}
+                    onChange={({ currentTarget: { value } }) => {
+                        setName(value);
+                    }}
+                />
+                <input className={cx("__input")} name="url" inputMode="url" placeholder="주소" />
+                <input className={cx("__input")} name="email" inputMode="email" placeholder="이메일 (비공개)" />
+                <textarea
+                    className={cx("__textarea")}
+                    name="body"
+                    value={body}
+                    placeholder="댓글을 입력해 주세요."
+                    onChange={({ currentTarget: { value } }) => {
+                        setBody(value);
+                    }}
+                />
+                {state.message && <Typography variant="c2">{state.message}</Typography>}
+                <div className={cx("__buttons")}>
+                    <button type="submit" disabled={!body} className={cx("__submit")}>
+                        <Icon name="arrow-downward" size={24} />
+                        <span className="sr-only">댓글 남기기</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
+}
+
+export default CommentForm;
diff --git a/apps/blog/src/components/CommentList/index.module.scss b/apps/blog/src/components/CommentList/index.module.scss
index 16821952..62ba6255 100644
--- a/apps/blog/src/components/CommentList/index.module.scss
+++ b/apps/blog/src/components/CommentList/index.module.scss
@@ -1,5 +1,5 @@
 .comment-list {
     width: clamp(0px, map-get($container-width, small), 100%);
-    margin: 24px auto 36px;
+    margin: 24px auto;
     padding: 0 12px;
 }
diff --git a/apps/blog/src/components/PostComment/index.module.scss b/apps/blog/src/components/PostComment/index.module.scss
index 44bd0d57..ea7494d6 100644
--- a/apps/blog/src/components/PostComment/index.module.scss
+++ b/apps/blog/src/components/PostComment/index.module.scss
@@ -1,2 +1,4 @@
 .post-comment {
+    border-top: 2px solid color(main);
+    border-bottom: 2px solid color(main);
 }
diff --git a/apps/blog/src/components/PostComment/index.tsx b/apps/blog/src/components/PostComment/index.tsx
index 6217a3d2..34762d11 100644
--- a/apps/blog/src/components/PostComment/index.tsx
+++ b/apps/blog/src/components/PostComment/index.tsx
@@ -1,10 +1,11 @@
 import { classNames } from "@marshallku/utils";
 import { type CommentListResponse } from "#api";
+import CommentForm from "#components/CommentForm";
 import CommentList from "#components/CommentList";
 import styles from "./index.module.scss";
 
 export interface PostCommentProps {
-    data: CommentListResponse;
+    data?: CommentListResponse;
 }
 
 const cx = classNames(styles, "post-comment");
@@ -12,7 +13,8 @@ const cx = classNames(styles, "post-comment");
 function PostComment({ data }: PostCommentProps) {
     return (
         <div className={cx()}>
-            <CommentList data={data} />
+            <CommentForm />
+            {data && <CommentList data={data} />}
         </div>
     );
 }
diff --git a/apps/blog/src/styles/reset.scss b/apps/blog/src/styles/reset.scss
index b041fe5a..7c5253da 100644
--- a/apps/blog/src/styles/reset.scss
+++ b/apps/blog/src/styles/reset.scss
@@ -59,6 +59,7 @@ caption,
 tbody,
 tfoot,
 thead,
+textarea,
 tr,
 th,
 td,
@@ -94,7 +95,9 @@ video {
     vertical-align: baseline;
 }
 
-html {
+html,
+input,
+textarea {
     font-family:
         "Pretendard Variable",
         Pretendard,