hw done

src/components/Comment/CommentElement.jsx

@@ -0,0 +1,85 @@
+import { useState, useEffect } from "react";
+
+const CommentElement = (props) => {
+  /* TODO: props 받기
+       Hint: src/components/Comment/index.jsx에서 어떠한 props를 넘겨주는지 확인해보세요! */
+  const { comment, handleCommentDelete, handleCommentEdit } = props;
+
+  /* TODO: 댓글을 수정하는 input의 value를 관리하기 위한 state 작성
+       Hint: 댓글의 내용을 저장하는 state와 수정 중인지 여부를 저장하는 state를 따로 만드는 게 좋겠죠? */
+
+  const [content, setContent] = useState(comment.content);
+  const [isEdit, setIsEdit] = useState(false);
+  // comment created_at 전처리
+  const date = new Date(comment.created_at);
+  const year = date.getFullYear();
+  let month = date.getMonth() + 1;
+  month = month < 10 ? `0${month}` : month;
+  let day = date.getDate();
+  day = day < 10 ? `0${day}` : day;
+
+  const handleEditComment = (e) => {
+    // 댓글 수정 API 호출
+    // alert("댓글 수정");
+    setIsEdit(!isEdit);
+    handleCommentEdit(comment.id, content);
+  };
+
+  useEffect(() => {
+    // add api call to check if user is the author of the comment
+  }, []);
+
+  return (
+    <div className="w-full flex flex-row justify-between items-center mb-5">
+      <div className="w-3/4 flex flex-col gap-1">
+        {/* // TODO: 수정 중일 때와 아닐 때를 나눠서 보여줘야 해요!
+                {수정 중 ? <input ... /> : <p ...>댓글 내용</p>} */}
+        {isEdit ? (
+          <input
+            type="text"
+            className="input mr-4"
+            value={content}
+            onChange={(e) => {
+              setContent(e.target.value);
+            }}
+          />
+        ) : (
+          <p className="text-lg mr-4">{comment.content}</p>
+        )}
+
+        <span className="text-base text-gray-300">
+          {year}.{month}.{day}
+        </span>
+      </div>
+
+      <div className="flex flex-row items-center gap-3">
+        {isEdit ? (
+          <>
+            <button
+              className="mr-3"
+              onClick={() => {
+                setIsEdit(!isEdit);
+                setContent(comment.content);
+              }}
+            >
+              취소
+            </button>
+            <button className="mr-3" onClick={handleEditComment}>
+              완료
+            </button>
+          </>
+        ) : (
+          <>
+            <button onClick={() => handleCommentDelete(comment.id)}>
+              삭제
+            </button>
+            <button className="mr-3" onClick={() => setIsEdit(!isEdit)}>
+              수정
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+export default CommentElement;

src/components/Comment/index.jsx

@@ -4,27 +4,79 @@ import CommentElement from "./CommentElement";
 
 const Comment = ({ postId }) => {
   // TODO: comments를 저장하기 위한 state를 만들어주세요
+  const [commentList, setCommentList] = useState(comments);
   // TODO: 새로운 댓글을 추가하기 위한 state를 만들어주세요
+  const [newContent, setNewContent] = useState("");
 
   const handleCommentSubmit = (e) => {
     e.preventDefault();
-    alert("댓글 작성"); // add api call for creating comment
-    // TODO: 댓글을 추가했으니 새로운 댓글을 저장하는 state를 초기화해야겠죠?
-  };
 
+    let maxId = 0;
+    commentList.forEach((comment) => {
+      if (comment.id > maxId) {
+        maxId = comment.id;
+      }
+    });
+
+    const newComment = {
+      id: maxId + 1,
+      postId,
+      content: newContent,
+      created_at: "2024-04-08T15:09:43Z",
+    };
+
+    setCommentList([...commentList, newComment]);
+    setNewContent("");
+  };
   const handleCommentDelete = (commentId) => {
-    console.log(commentId);
-    alert("댓글 삭제"); // add api call for deleting comment
+    // console.log(commentId);
+    // alert("댓글 삭제"); // add api call for deleting comment
+    const updatedComments = commentList.filter(
+      (comment) => comment.id !== commentId
+    );
+    setCommentList(updatedComments);
   };
 
+  const handleCommentEdit = (commentId, editedComment) => {
+    const filteredComment = commentList.map((comment) => {
+      if (comment.id === commentId) {
+        comment.content = editedComment;
+        return comment;
+      }
+      return comment;
+    });
+    setCommentList(filteredComment);
+  };
   return (
     <div className="w-full mt-5 self-start">
       <h1 className="text-3xl font-bold my-5">Comments</h1>
-      // TODO: comments 더미데이터를 돌며 각 댓글마다 CommentElement를
-      만들어주세요! // Hint: CommentElement에는 댓글인 comment와 댓글 삭제를
+      {/* // TODO: comments 더미데이터를 돌며 각 댓글마다 CommentElement를 만들어주세요! // Hint: CommentElement에는 댓글인 comment와 댓글 삭제를
       하는 handleCommentDelete라는 props가 필요합니다. // TODO: 새로운 댓글을
-      작성하는 form을 만들어주세요!
-      <form className="flex flex-row items-center justify-center mt-10 gap-2"></form>
+      작성하는 form을 만들어주세요! */}
+      {commentList.map((comment) => (
+        <CommentElement
+          comment={comment}
+          key={comment.id}
+          handleCommentDelete={handleCommentDelete}
+          handleCommentEdit={handleCommentEdit}
+        />
+      ))}
+      <form
+        className="flex items-center justify-center mt-10 gap-2"
+        onSubmit={handleCommentSubmit}
+      >
+        <input
+          type="text"
+          value={newContent}
+          placeholder="댓글을 입력해주세요"
+          className="input h-14"
+          onChange={(e) => setNewContent(e.target.value)}
+        />
+
+        <button type="submit" className="button flex-none ">
+          작성
+        </button>
+      </form>
     </div>
   );
 };

src/components/Header/index.jsx

@@ -20,6 +20,7 @@ const Header = () => {
       </Link>
       <div className="flex">
         {isUserLoggedIn ? (
+
           <Link to="/" className="mr-10 p-3 uppercase text-lg">
             sign out
           </Link>

src/routes/HomePage.jsx

@@ -19,7 +19,11 @@ const HomePage = () => {
     setTags([...tagList]);
     setSearchTags([...tagList]);
   }, []);
-  const handleChange = (e) => {};
+  const handleChange = (e) => {
+    const { value } = e.target;
+    const newTags = tags.filter((tag) => tag.includes(value));
+    setSearchTags(newTags);
+  };
   const handleTagFilter = (e) => {
     const { innerText } = e.target;
     if (searchValue === innerText.substring(1)) {

src/routes/PostDetailPage.jsx

@@ -1,25 +1,32 @@
 import { useState, useEffect } from "react";
-import { useParams, Link } from "react-router-dom";
+
+import { useParams, Link, useNavigate } from "react-router-dom";
+import Comment from "../components/Comment";
 import { BigPost } from "../components/Posts";
 import posts from "../data/posts";
 
 const PostDetailPage = () => {
   const { postId } = useParams();
+
   const [post, setPost] = useState(null);
+
   useEffect(() => {
     const post = posts.find((post) => post.id === parseInt(postId));
     setPost(post);
   }, [postId]);
 
+  const navigate = useNavigate();
   const onClickDelete = () => {
-    alert("삭제");
-    //TODO : api connect(delete post)
+    alert("게시물을 삭제합니다.");
+    navigate("/");
+    // add api call for deleting post
   };
 
   return (
     post && (
       <div className="flex flex-col items-center w-[60%] p-8">
         <BigPost post={post} />
+        <Comment postId={postId} />
         <div className="flex flex-row gap-3">
           <Link to={`/${post.id}/edit`}>
             <button className="button mt-10 py-2 px-10">수정</button>