feat : post 클릭 이벤트 작업

hanghae-plus · Dec 26, 2024 · baf8b81 · baf8b81
1 parent 7d88a44
commit baf8b81
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 2 deletions.
diff --git a/src/components/posts/Post.jsx b/src/components/posts/Post.jsx
@@ -1,14 +1,44 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { userStorage } from "../../storages/userStorage.js";
+import { globalStore } from "../../stores/globalStore.js";
 import { toTimeFormat } from "../../utils/index.js";
 
 export const Post = ({
   author,
   time,
   content,
+  id,
   likeUsers,
   activationLike = false,
 }) => {
+  const addLike = () => {
+    const { posts } = globalStore.getState();
+    const username = userStorage.get("user")?.username;
+
+    if (!username) return;
+
+    globalStore.setState({
+      posts: posts.map((post) => {
+        if (post.id !== id) return post;
+
+        if (post.likeUsers.includes(username)) {
+          return {
+            ...post,
+            likeUsers: post.likeUsers.filter(
+              (likeUser) => likeUser !== username,
+            ),
+          };
+        }
+
+        return {
+          ...post,
+          likeUsers: [username, ...post.likeUsers],
+        };
+      }),
+    });
+  };
+
   return (
     <div className="bg-white rounded-lg shadow p-4 mb-4">
       <div className="flex items-center mb-2">
@@ -21,6 +51,13 @@ export const Post = ({
       <div className="mt-2 flex justify-between text-gray-500">
         <span
           className={`like-button cursor-pointer${activationLike ? " text-blue-500" : ""}`}
+          onClick={() => {
+            if (!userStorage.get("user")) {
+              alert("로그인 후 이용해주세요");
+            } else {
+              addLike();
+            }
+          }}
         >
           좋아요 {likeUsers.length}
         </span>

diff --git a/src/components/posts/PostForm.jsx b/src/components/posts/PostForm.jsx
@@ -1,7 +1,27 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores";
+import { toTimeFormat } from "../../utils";
 
 export const PostForm = () => {
+  const addPost = () => {
+    const content = document.getElementById("post-content").value;
+    const { currentUser, posts } = globalStore.getState();
+
+    globalStore.setState({
+      posts: [
+        {
+          id: Date.now(),
+          author: currentUser.username,
+          time: Date.now(),
+          content: content,
+          likeUsers: [],
+        },
+        ...posts,
+      ],
+    });
+  };
+
   return (
     <div className="mb-4 bg-white rounded-lg shadow p-4">
       <textarea
@@ -12,6 +32,7 @@ export const PostForm = () => {
       <button
         id="post-submit"
         className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={addPost}
       >
         게시
       </button>

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -3,6 +3,7 @@ import { createVNode } from "../lib";
 
 import { Footer, Header, Navigation, Post, PostForm } from "../components";
 import { globalStore } from "../stores";
+import { userStorage } from "../storages";
 
 /**
  * 심화과제
@@ -13,19 +14,30 @@ import { globalStore } from "../stores";
 export const HomePage = () => {
   const { posts } = globalStore.getState();
 
+  const isChecked = (likeUsers) => {
+    return likeUsers.find((postLike) =>
+      postLike.includes(userStorage.get("user")?.username),
+    );
+  };
+
   return (
     <div className="bg-gray-100 min-h-screen flex justify-center">
       <div className="max-w-md w-full">
         <Header />
         <Navigation />
 
         <main className="p-4">
-          <PostForm />
+          {!!userStorage.get("user") && <PostForm />}
           <div id="posts-container" className="space-y-4">
             {[...posts]
               .sort((a, b) => b.time - a.time)
               .map((props) => {
-                return <Post {...props} activationLike={false} />;
+                return (
+                  <Post
+                    {...props}
+                    activationLike={!!isChecked(props.likeUsers)}
+                  />
+                );
               })}
           </div>
         </main>