diglog-project · typhoon0678 · Feb 18, 2025 · Feb 18, 2025
diff --git 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
@@ -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
@@ -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;
diff --git a/src/components/post/CommentTextField.tsx 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;
diff --git 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
@@ -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>
     )