feat: week5

src/components/Header/index.jsx

@@ -1,21 +1,37 @@
 import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
 
 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,19 @@ 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 = (e) => {
+    e.preventDefault();
+    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 +55,7 @@ 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/routes/HomePage.jsx

@@ -1,11 +1,46 @@
 import { SmallPost } from "../components/Posts";
 import { Link } from "react-router-dom";
 import posts from "../data/posts";
+import { useEffect, useState } from "react";
 
 const HomePage = () => {
-  const postList = posts;
+  const [postList, setPostList] = useState(posts);
 
-  const handleChange = (e) => {};
+  const [tags, setTags] = useState([]);
+  const [searchTags, setSearchTags] = useState([]);
+  const [searchValue, setSearchValue] = useState("");
+
+  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 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)) {
+      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);
+    }
+  };
 
   return (
     <div>
@@ -20,6 +55,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} />

src/routes/PostCreatePage.jsx

@@ -1,22 +1,99 @@
+import { useEffect, useState } from "react";
 import posts from "../data/posts";
+import { BigPost } from "../components/Posts";
 
 const PostCreatePage = () => {
-  const post = {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [tags, setTags] = useState([]);
+  const [tagInputValue, setTagInputValue] = useState("");
+  const [autoCompletes, setAutoCompletes] = useState([]);
+  const [post, setPost] = useState({
     id: posts.length,
     title: "",
     content: "",
     author: { id: posts.length, username: "아기사자" },
     tags: [],
     like_users: [],
     created_at: "2024-02-04T07:42:50.658501Z",
+  });
+
+  const addTag = (e) => {
+    e.preventDefault();
+    if (post.tags.find((tag) => tag === tagInputValue)) return;
+    setPost({
+      ...post,
+      tags: [...post.tags, tagInputValue],
+    });
+    setTagInputValue("");
+    setAutoCompletes([]);
+  };
+
+  const deleteTag = (tag) => {
+    setPost({
+      ...post,
+      tags: post.tags.filter((t) => t !== tag),
+    });
+  };
+
+  const handleChange = (e) => {
+    setPost({ ...post, [e.target.id]: e.target.value });
   };
 
   const onSubmit = (e) => {
+    e.preventDefault();
+    const createdPost = {
+      ...post,
+      like_users: [],
+      tags: post.tags.map((tag, idx) => {
+        return { id: idx + 1, content: tag };
+      }),
+    };
+    setPost(createdPost);
+    setIsSubmitted(true);
+
     alert("게시글을 등록합니다.");
     //TODO : api connect(create post)
   };
 
-  return (
+  useEffect(() => {
+    const duplicatedTagList = posts.reduce((acc, post) => {
+      for (let tag of post.tags) {
+        acc.add(tag.content);
+      }
+      return acc;
+    }, new Set());
+    const tagList = [...duplicatedTagList];
+    setTags([...tagList]);
+  }, []);
+
+  const handleAutoCompletes = (autoComplete) => {
+    const selectedTag = tags.find((tag) => tag === autoComplete);
+    if (post.tags.includes(selectedTag)) return; // 입력한 내용이 이미 등록된 태그면 그냥 등록 안됨
+    setPost({
+      ...post,
+      tags: [...post.tags, selectedTag],
+    });
+    setTagInputValue("");
+    setAutoCompletes([]);
+  };
+
+  const handleTag = (e) => {
+    setTagInputValue(e.target.value);
+    if (e.target.value) {
+      const autoCompleteData = tags.filter((tag) =>
+        tag.includes(e.target.value)
+      );
+      setAutoCompletes(autoCompleteData);
+    } else {
+      setAutoCompletes([]);
+    }
+  };
+
+  return isSubmitted ? (
+    <div className="flex flex-col items-center w-[60%] p-8">
+      <BigPost post={post} />
+    </div>
+  ) : (
     <div className="flex flex-col items-center w-3/5">
       <h3 className="font-bold text-4xl">게시글 작성</h3>
       <form className="form" onSubmit={onSubmit}>
@@ -26,21 +103,23 @@ const PostCreatePage = () => {
         <input
           type="text"
           placeholder="제목을 입력하세요"
-          defaultValue={post.title}
           id="title"
           className="input"
           required
+          value={post.title}
+          onChange={handleChange}
         />
         <label htmlFor="content" className="label">
           내용
         </label>
         <textarea
           placeholder="내용을 입력하세요"
           id="content"
-          defaultValue={post.content}
+          value={post.content}
           cols="30"
           rows="10"
           className="input"
+          onChange={handleChange}
           required
         ></textarea>
         <label htmlFor="tags" className="label">
@@ -53,20 +132,41 @@ const PostCreatePage = () => {
               placeholder="태그를 추가하세요"
               id="tags"
               className="input grow"
+              value={tagInputValue}
+              onChange={handleTag}
             />
-            <button type="button" className="small-button w-16">
+            <button
+              type="button"
+              className="small-button w-16"
+              onClick={addTag}
+            >
               추가
             </button>
           </div>
         </div>
+        <div className="flex mt-2 bg-black border-gray-500 rounded-2xl w-full">
+          {autoCompletes &&
+            autoCompletes.map((autoComplete) => (
+              <button
+                className="tag rounded-2xl text-start border-gray-500 py-2 px-3 text-white focus:bg-gray"
+                key={autoComplete}
+                onClick={() => handleAutoCompletes(autoComplete)}
+              >
+                #{autoComplete}
+              </button>
+            ))}
+        </div>
         {post.tags && (
           <div className="flex w-full mt-3 gap-x-1 flew-nowrap">
             {post.tags.map((tag) => (
               <div key={tag} className="flex">
                 <span className="tag active m-1 flex flex-row items-center gap-x-2">
                   <p>#{tag}</p>
                 </span>
-                <button className="after:content-['\00d7'] text-xl" />
+                <button
+                  onClick={() => deleteTag(tag)}
+                  className="after:content-['\00d7'] text-xl"
+                />
               </div>
             ))}
           </div>
@@ -77,6 +177,6 @@ const PostCreatePage = () => {
       </form>
     </div>
   );
-};
+            };
 
 export default PostCreatePage;

src/routes/PostDetailPage.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useParams, Link } from "react-router-dom";
+import { useParams, Link, useNavigate } from "react-router-dom";
 import { BigPost } from "../components/Posts";
 import posts from "../data/posts";
 
@@ -11,9 +11,11 @@ const PostDetailPage = () => {
     setPost(post);
   }, [postId]);
 
+  const navigate = useNavigate();
   const onClickDelete = () => {
-    alert("삭제");
-    //TODO : api connect(delete post)
+    alert("게시물을 삭제합니다.");
+    navigate("/");
+    // add api call for deleting post
   };
 
   return (