From 4b28c273a7660077add2e81856cc9046709f3b74 Mon Sep 17 00:00:00 2001
From: typhoon0678 <typhoon0678@gmail.com>
Date: Tue, 18 Feb 2025 16:37:00 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EB=8C=93=EA=B8=80=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header.tsx         |  2 +-
 src/components/common/TextButton.tsx     |  2 +-
 src/components/post/CommentCard.tsx      | 82 ++++++++++++++++++++++++
 src/components/post/CommentTextField.tsx | 37 +++++++++++
 src/layout/LoadingLayout.tsx             |  2 +-
 src/pages/post/PostPage.tsx              | 36 +++++++++--
 6 files changed, 152 insertions(+), 9 deletions(-)
 create mode 100644 src/components/post/CommentCard.tsx
 create mode 100644 src/components/post/CommentTextField.tsx

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index fe8d40e..705e582 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -80,7 +80,7 @@ function Header() {
                     ? <div ref={dashboardRef}>
                         <div
                             className="relative flex justify-around items-center w-full">
-                            <img className="w-10 h-10 rounded-full hover:cursor-pointer"
+                            <img className="size-10 rounded-full hover:cursor-pointer"
                                  onClick={handleDropDown}
                                  src={faker.image.avatar()} alt="user_image"/>
                             <div
diff --git a/src/components/common/TextButton.tsx b/src/components/common/TextButton.tsx
index fd80149..ac444fb 100644
--- a/src/components/common/TextButton.tsx
+++ b/src/components/common/TextButton.tsx
@@ -1,6 +1,6 @@
 import {Link} from "react-router-dom";
 
-const className = " flex justify-center items-center bg-transparent py-2 px-4 hover:cursor-pointer";
+const className = " flex justify-center items-center bg-transparent text-sm py-2 px-4 hover:cursor-pointer";
 
 export function TextButton({text, onClick, addStyle}: { text: string, onClick?: () => void, addStyle?: string }) {
     return (
diff --git a/src/components/post/CommentCard.tsx b/src/components/post/CommentCard.tsx
new file mode 100644
index 0000000..097c06f
--- /dev/null
+++ b/src/components/post/CommentCard.tsx
@@ -0,0 +1,82 @@
+import {faker} from "@faker-js/faker/locale/ko";
+import {dateToKorean} from "../../common/util/date.tsx";
+import {MdOutlineAddComment, MdOutlineComment} from "react-icons/md";
+import {ChangeEvent, useState} from "react";
+import CommentTextField from "./CommentTextField.tsx";
+
+function CommentCard({depth = 0}: { depth?: number }) {
+
+    const [openComment, setOpenComment] = useState(depth !== 0);
+    const [commentInput, setCommentInput] = useState("");
+    const [showTextField, setShowTextField] = useState(false);
+
+    const handleCommentInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+        setCommentInput(e.currentTarget.value);
+    }
+    const handleShowTextField = () => {
+        setShowTextField(prev => !prev);
+    }
+    const handleSubmit = (commentId: string | undefined) => {
+        confirm("댓글을 등록하시겠습니까?");
+        alert("등록되었습니다.");
+        console.log(commentId);
+    }
+
+    return (
+        <div className={`flex ${depth === 0 && "pb-4"}`}>
+            {depth !== 0 && <div className="w-8"/>}
+            <div className="flex-1 flex flex-col justify-center mt-4 text-sm">
+                <div className="flex flex-col gap-y-2 border rounded-2xl border-gray-300 px-4 pt-4 pb-2">
+                    <div className="flex items-center gap-x-2">
+                        <img className="size-6 rounded-full hover:cursor-pointer"
+                             src={faker.image.avatar()} alt="user_image"/>
+                        <p className="font-bold">
+                            {faker.animal.cow()}
+                        </p>
+                        <p className="text-gray-400 text-sm">
+                            {dateToKorean(faker.date.anytime())}
+                        </p>
+                    </div>
+                    <p className="mt-4 text-gray-900">
+                        {faker.lorem.paragraph()}
+                    </p>
+                    <div className="flex justify-between items-center">
+                        {depth === 0 &&
+                        <button
+                            className="w-fit py-2 flex justify-center items-center gap-x-2 text-gray-600 hover:cursor-pointer rounded-md hover:brightness-120"
+                            onClick={() => setOpenComment(prev => !prev)}>
+                            <MdOutlineComment className="text-gray-600 size-4"/>
+                            {!openComment ? "답글 (10)" : "답글 닫기"}
+                        </button>}
+                        <div/>
+                        <button
+                            className="w-fit py-2 flex justify-center items-center gap-x-2 text-gray-600 hover:cursor-pointer rounded-md hover:brightness-120"
+                            onClick={() => setShowTextField(true)}>
+                            <MdOutlineAddComment className="text-gray-600 size-4"/>
+                            댓글 작성하기
+                        </button>
+                    </div>
+                </div>
+                <div className="ml-8">
+                    {showTextField &&
+                        <CommentTextField
+                            value={commentInput}
+                            onChange={handleCommentInput}
+                            handleSubmit={handleSubmit}
+                            commentId={faker.number.int().toString()}
+                            handleShowTextField={handleShowTextField}/>}
+                </div>
+                {openComment &&
+                    <div>
+                        {Array.from({length: 2}).map(() =>
+                            (depth <= 2)
+                                ? <CommentCard key={faker.animal.cow()} depth={depth + 1}/>
+                                : null)}
+                    </div>
+                }
+            </div>
+        </div>
+    );
+}
+
+export default CommentCard;
\ No newline at end of file
diff --git a/src/components/post/CommentTextField.tsx b/src/components/post/CommentTextField.tsx
new file mode 100644
index 0000000..39167d5
--- /dev/null
+++ b/src/components/post/CommentTextField.tsx
@@ -0,0 +1,37 @@
+import {ChangeEventHandler} from 'react';
+import {FillButton} from "../common/FillButton.tsx";
+import {TextButton} from "../common/TextButton.tsx";
+
+interface CommentTextFieldProps {
+    value: string,
+    onChange: ChangeEventHandler<HTMLTextAreaElement>,
+    commentId?: string,
+    handleSubmit: (commentId: string | undefined) => void,
+    handleShowTextField?: () => void,
+}
+
+function CommentTextField(props: CommentTextFieldProps) {
+
+    const {value, onChange, commentId, handleSubmit, handleShowTextField} = props;
+
+    return (
+        <div className="my-2 flex flex-col justify-center gap-y-2">
+            <textarea
+                value={value}
+                onChange={onChange}
+                className="p-2 border border-gray-400"
+                rows={5}
+                minLength={5}/>
+            <div className="flex justify-end gap-x-2">
+                {commentId && <TextButton text={"취소"} onClick={() => {
+                    if (handleShowTextField) {
+                        handleShowTextField();
+                    }
+                }}/>}
+                <FillButton text={"등록"} onClick={() => handleSubmit(commentId)}/>
+            </div>
+        </div>
+    );
+}
+
+export default CommentTextField;
\ No newline at end of file
diff --git a/src/layout/LoadingLayout.tsx b/src/layout/LoadingLayout.tsx
index 0dfa856..a716d8c 100644
--- a/src/layout/LoadingLayout.tsx
+++ b/src/layout/LoadingLayout.tsx
@@ -6,7 +6,7 @@ function LoadingLayout({loading}: { loading: boolean }) {
             className="fixed inset-0 flex items-center justify-center bg-gray-300 opacity-50 z-1000 dark:bg-gray-100 dark:bg-opacity-50">
             <div role="status">
                 <svg aria-hidden="true"
-                     className="inline w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300"
+                     className="inline size-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300"
                      viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
                         d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
diff --git a/src/pages/post/PostPage.tsx b/src/pages/post/PostPage.tsx
index 5ad2f13..e297e9a 100644
--- a/src/pages/post/PostPage.tsx
+++ b/src/pages/post/PostPage.tsx
@@ -4,10 +4,13 @@ import DOMPurify from "dompurify";
 import {fullDateToKorean} from "../../common/util/date.tsx";
 import TagCard from "../../components/post/TagCard.tsx";
 import {getPost} from "../../common/apis/post.tsx";
-import {useEffect, useState} from "react";
+import {ChangeEvent, useEffect, useState} from "react";
 import {PostResponse} from "../../common/types/post.tsx";
 import {checkUUID} from "../../common/util/regex.tsx";
 import {sortTagByName} from "../../common/util/sort.tsx";
+import CommentCard from "../../components/post/CommentCard.tsx";
+import CommentTextField from "../../components/post/CommentTextField.tsx";
+import {LoadMoreButton} from "../../components/common/FillButton.tsx";
 
 function PostPage() {
 
@@ -22,6 +25,19 @@ function PostPage() {
         tags: [],
         createdAt: new Date(),
     });
+    const [commentInput, setCommentInput] = useState("");
+
+    const handleCommentInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+        setCommentInput(e.target.value);
+    }
+    const handleCommentSubmit = (commentId: string | undefined) => {
+        confirm("댓글을 등록하시겠습니까?");
+        alert("등록되었습니다.");
+        console.log(commentId);
+    }
+    const handleLoadMoreCommit = () => {
+
+    }
 
     useEffect(() => {
         if (id === null || id === undefined || !checkUUID(id)) {
@@ -46,7 +62,7 @@ function PostPage() {
 
     return (
         <BasicLayout>
-            <div className="w-full">
+            <div className="w-full flex flex-col">
                 <div className="flex flex-col gap-y-8">
                     <div className="flex justify-between items-center">
                         <div className="flex-1 flex justify-center items-center gap-x-4">
@@ -75,13 +91,21 @@ function PostPage() {
                                 navigate(`/search?word=${tag.name}&option=태그`)
                             }}/>)}
                     </div>
-                    <div className="flex justify-between items-center">
-
-                        <div></div>
-                    </div>
                 </div>
                 <div className="py-8"
                      dangerouslySetInnerHTML={{__html: safeContent}}/>
+                <div className="w-full max-w-4xl mx-auto p-8 rounded-2xl flex flex-col gap-y-0 my-8">
+                    <p>댓글</p>
+                    <CommentTextField
+                        value={commentInput}
+                        onChange={handleCommentInput}
+                        handleSubmit={handleCommentSubmit}/>
+                    {Array.from({length: 10}).map((_, i) =>
+                        <CommentCard key={i}/>)}
+                    <LoadMoreButton
+                        onClick={handleLoadMoreCommit}
+                        addStyle={"!bg-gray-400"}/>
+                </div>
             </div>
         </BasicLayout>
     )