Yeonghun week5 hw

src/components/Comment/CommentElement.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+
+const CommentElement = ({
+  id,
+  content,
+  createdAt,
+  handleCommentDelete,
+  handleCommentEdit,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedContent, setEditedContent] = useState(content);
+
+  const date = new Date(createdAt);
+  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 = () => {
+    if (editedContent.trim() !== "") {
+      handleCommentEdit(id, editedContent);
+      setIsEditing(false);
+      alert("댓글 수정 완료");
+    } else {
+      alert("댓글 내용을 입력해주세요.");
+    }
+  };
+
+  return (
+    <div className="w-full mb-5">
+      <div className="flex justify-between items-center">
+        {isEditing ? (
+          <input
+            type="text"
+            value={editedContent}
+            onChange={(e) => setEditedContent(e.target.value)}
+            className="flex-grow border p-2 rounded mr-2 text-black"
+          />
+        ) : (
+          <div className="flex-grow">
+            <p className="text-white">{content}</p>
+          </div>
+        )}
+
+        {isEditing ? (
+          <>
+            <button
+              onClick={() => setIsEditing(false)}
+              className="text-red-500 mx-1 p-2"
+            >
+              취소
+            </button>
+            <button onClick={handleEditComment} className="text-white mx-1 p-2">
+              완료
+            </button>
+          </>
+        ) : (
+          <div>
+            <button
+              onClick={() => setIsEditing(true)}
+              className="text-white mx-1 p-2"
+            >
+              수정
+            </button>
+            <button
+              onClick={() => handleCommentDelete(id)}
+              className="text-white mx-1 p-2"
+            >
+              삭제
+            </button>
+          </div>
+        )}
+      </div>
+      <div className="text-gray-300 text-sm mt-2">
+        {year}.{month}.{day}
+      </div>
+    </div>
+  );
+};
+
+export default CommentElement;

src/components/Comment/index.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import commentsData from "../../data/comments";
+import CommentElement from "./CommentElement";
+
+const Comment = ({ postId }) => {
+  // 댓글들을 저장하기 위한 state
+  const [comments, setComments] = useState(commentsData);
+  // 새로운 댓글을 추가하기 위한 state
+  const [newComment, setNewComment] = useState("");
+
+  const handleCommentSubmit = (e) => {
+    e.preventDefault();
+    // 현재 날짜와 시간을 포함하는 새 댓글 객체 생성
+    const now = new Date();
+    const createdAt = now.toISOString().split("T")[0];
+
+    const commentToAdd = {
+      id: comments.length + 1,
+      content: newComment,
+      created_at: createdAt,
+      author: { id: "1", username: "currentUser" },
+    };
+    setComments([...comments, commentToAdd]);
+    setNewComment("");
+    alert("댓글 작성");
+  };
+
+  const handleCommentEdit = (id, editedContent) => {
+    setComments(
+      comments.map((comment) => {
+        if (comment.id === id) {
+          return { ...comment, content: editedContent };
+        }
+        return comment;
+      })
+    );
+  };
+
+  const handleCommentDelete = (commentId) => {
+    const updatedComments = comments.filter(
+      (comment) => comment.id !== commentId
+    );
+    setComments(updatedComments);
+    alert("댓글 삭제");
+  };
+
+  return (
+    <div className="w-full mt-5 self-start">
+      <h1 className="text-3xl font-bold my-5">Comments</h1>
+      {comments.map((comment) => (
+        <CommentElement
+          key={comment.id}
+          id={comment.id}
+          content={comment.content}
+          createdAt={comment.created_at}
+          postId={comment.post}
+          author={comment.author}
+          handleCommentDelete={handleCommentDelete}
+          handleCommentEdit={handleCommentEdit}
+        />
+      ))}
+
+      <form
+        className="flex flex-row items-center justify-center mt-10 gap-2"
+        onSubmit={handleCommentSubmit}
+      >
+        <div className="flex w-full gap-2">
+          <input
+            type="text"
+            placeholder="댓글을 입력해주세요"
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            className="border p-2 rounded flex-grow text-black"
+          />
+          <button
+            type="submit"
+            className="bg-orange-400 text-white p-2 rounded"
+          >
+            작성
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default Comment;

src/components/Header/index.jsx

@@ -1,21 +1,39 @@
+import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 
 import lion from "../../assets/images/lion.jpeg";
 
 const Header = () => {
+  const [isUserLoggedIn, setIsUserLoggedIn] = useState(false); // 로그인 여부 상태, 우선 false로 초기화
+
+  useEffect(() => {
+    // TODO: 이후 api 연결 시 유효한 token이 있다면 setIsUserLoggedIn(true)로 상태 변경하는 코드 작성
+  }, []);
+
+  const handleSignOut = () => {
+    // TODO: 이후 api 연결 시 token 제거
+  };
   return (
     <div className="flex items-center justify-between w-full gap-5 bg-black px-5 py-2.5 h-20">
       <Link to="/" className="flex flex-row items-center gap-5">
         <img src={lion} alt="lion" className="max-h-16 rounded-full" />
         <div className="text-white text-xl">SNULION BLOG</div>
       </Link>
       <div className="flex">
-        <Link to="/signin" className="mr-10 p-3 uppercase text-lg">
-          sign in
-        </Link>
-        <Link to="/signup" className="mr-10 p-3 uppercase text-lg">
-          sign up
-        </Link>
+        {isUserLoggedIn ? (
+          <Link to="/" className="mr-10 p-3 uppercase text-lg">
+            sign out
+          </Link>
+        ) : (
+          <>
+            <Link to="/signin" className="mr-10 p-3 uppercase text-lg">
+              sign in
+            </Link>
+            <Link to="/signup" className="mr-10 p-3 uppercase text-lg">
+              sign up
+            </Link>
+          </>
+        )}
       </div>
     </div>
   );

src/components/Posts/index.jsx

@@ -1,6 +1,12 @@
 import { Link } from "react-router-dom";
 
 export const SmallPost = ({ post }) => {
+  const onClickLike = (e) => {
+    e.preventDefault();
+    alert("나도 좋아!");
+    // add api call for liking post here
+  };
+
   return (
     <Link
       to={`/${post.id}`}
@@ -15,14 +21,18 @@ export const SmallPost = ({ post }) => {
           </span>
         ))}
       </div>
-      <span className="cursor-pointer">
+      <span onClick={onClickLike} className="cursor-pointer">
         {post.like_users.length > 0 && `❤️ ${post.like_users.length}`}
       </span>
     </Link>
   );
 };
 
 export const BigPost = ({ post }) => {
+  const onClickLike = () => {
+    alert("나도 좋아!");
+    // add api call for liking post here
+  };
   return (
     <div className="flex flex-col px-8 py-5 w-full bg-orange-400 ring-4 ring-orange-300 rounded-xl gap-5">
       <div className="flex flex-row items-center justify-between gap-3">
@@ -44,7 +54,10 @@ export const BigPost = ({ post }) => {
             </span>
           ))}
       </div>
-      <span className="flex flex-row text-black cursor-pointer">
+      <span
+        onClick={onClickLike}
+        className="flex flex-row text-black cursor-pointer"
+      >
         ❤️ {post.like_users.length > 0 ? post.like_users.length : "0"}
       </span>
     </div>

src/data/comments.js

@@ -0,0 +1,35 @@
+// dummy data
+const comments = [
+  {
+    id: 1,
+    content: "새해 복 많이 받으세요^^",
+    created_at: "2024-01-01T15:09:43Z",
+    post: 1,
+    author: {
+      id: 2,
+      username: "user2",
+    },
+  },
+  {
+    id: 2,
+    content: "축구 2대 0;;;",
+    created_at: "2024-02-07T15:09:43Z",
+    post: 1,
+    author: {
+      id: 3,
+      username: "user3",
+    },
+  },
+  {
+    id: 3,
+    content: "망할 개강이야...",
+    created_at: "2024-03-02T15:09:43Z",
+    post: 1,
+    author: {
+      id: 4,
+      username: "user4",
+    },
+  },
+];
+
+export default comments;

src/routes/HomePage.jsx

@@ -1,11 +1,43 @@
+import { useState, useEffect } from "react";
 import { SmallPost } from "../components/Posts";
 import { Link } from "react-router-dom";
 import posts from "../data/posts";
 
 const HomePage = () => {
-  const postList = posts;
+  const [postList, setPostList] = useState(posts);
+  const [tags, setTags] = useState([]);
+  const [searchTags, setSearchTags] = useState([]);
+  const [searchValue, setSearchValue] = useState("");
 
-  const handleChange = (e) => {};
+  useEffect(() => {
+    const tagList = posts.reduce((acc, post) => {
+      for (let tag of post.tags) {
+        acc.add(tag.content);
+      }
+      return acc;
+    }, new Set());
+    setTags([...tagList]);
+    setSearchTags([...tagList]);
+  }, []);
+  const handleTagFilter = (e) => {
+    const { innerText } = e.target;
+    if (searchValue === innerText.substring(1)) {
+      setSearchValue("");
+      setPostList(posts);
+    } else {
+      const activeTag = innerText.substring(1);
+      setSearchValue(activeTag);
+      const newPosts = posts.filter((post) =>
+        post.tags.find((tag) => tag.content === activeTag)
+      );
+      setPostList(newPosts);
+    }
+  };
+  const handleChange = (e) => {
+    const { value } = e.target;
+    const newTags = tags.filter((tag) => tag.includes(value));
+    setSearchTags(newTags);
+  };
 
   return (
     <div>
@@ -20,6 +52,19 @@ const HomePage = () => {
           className="border border-orange-400 outline-none rounded-2xl text-center py-2 px-20 text-orange-400 bg-transparent"
         />
       </div>
+      <div className="flex mt-5 justify-center">
+        {searchTags.map((tag) => {
+          return (
+            <button
+              key={tag}
+              className={tag === searchValue ? "tag active mr-2" : "tag mr-2"}
+              onClick={handleTagFilter}
+            >
+              #{tag}
+            </button>
+          );
+        })}
+      </div>
       <div className="grid grid-cols-3 px-10 mt-10">
         {postList.map((post) => (
           <SmallPost key={post.id} post={post} />