feat: 게시글 추가 기능

src/components/posts/Post.jsx

@@ -9,13 +9,13 @@ export const Post = ({ id, author, time, content, likeUsers, loggedIn }) => {
   const activationLike =
     currentUser && likeUsers.includes(currentUser.username);
 
-  function onClickLike() {
+  const handleToggleLike = () => {
     if (!loggedIn) {
       alert("로그인 후 이용해주세요");
       return;
     }
     toggleLike(id);
-  }
+  };
 
   return (
     <div className="bg-white rounded-lg shadow p-4 mb-4">
@@ -28,7 +28,7 @@ export const Post = ({ id, author, time, content, likeUsers, loggedIn }) => {
       <p>{content}</p>
       <div className="mt-2 flex justify-between text-gray-500">
         <span
-          onClick={onClickLike}
+          onClick={handleToggleLike}
           className={`like-button cursor-pointer${activationLike ? " text-blue-500" : ""}`}
         >
           좋아요 {likeUsers.length}

src/components/posts/PostForm.jsx

@@ -1,20 +1,37 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores/index.js";
 
 export const PostForm = () => {
+  const { addPost } = globalStore.actions;
+
+  const handlePostSubmit = (e) => {
+    e.preventDefault();
+    const contentInput = document.getElementById("post-content");
+    const content = contentInput.value.trim();
+    if (!content) return;
+
+    addPost(content);
+    contentInput.value = "";
+  };
   return (
-    <div className="mb-4 bg-white rounded-lg shadow p-4">
+    <form
+      onSubmit={handlePostSubmit}
+      className="mb-4 bg-white rounded-lg shadow p-4"
+    >
       <textarea
         id="post-content"
+        name="content"
         placeholder="무슨 생각을 하고 계신가요?"
         className="w-full p-2 border rounded"
       />
       <button
         id="post-submit"
+        type="submit"
         className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
       >
         게시
       </button>
-    </div>
+    </form>
   );
 };

src/pages/HomePage.jsx

@@ -29,7 +29,6 @@ export const HomePage = () => {
               })}
           </div>
         </main>
-
         <Footer />
       </div>
     </div>

src/stores/globalStore.js

@@ -75,5 +75,22 @@ export const globalStore = createStore(
         }),
       };
     },
+    addPost(state, content) {
+      const currentUser = state.currentUser;
+      if (!currentUser) return state;
+
+      const newPost = {
+        id: Date.now(),
+        author: currentUser.username,
+        time: Date.now(),
+        content,
+        likeUsers: [],
+      };
+
+      return {
+        ...state,
+        posts: [newPost, ...state.posts],
+      };
+    },
   },
 );