diff --git a/src/components/posts/Post.jsx b/src/components/posts/Post.jsx
index 67af756..cb198a9 100644
--- a/src/components/posts/Post.jsx
+++ b/src/components/posts/Post.jsx
@@ -1,14 +1,37 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores/globalStore.js";
 import { toTimeFormat } from "../../utils/index.js";
 
-export const Post = ({
-  author,
-  time,
-  content,
-  likeUsers,
-  activationLike = false,
-}) => {
+export const Post = ({ id, author, time, content, likeUsers }) => {
+  const { loggedIn, currentUser, posts } = globalStore.getState();
+
+  const handleLikeClick = () => {
+    if (!loggedIn) {
+      alert("로그인 후 이용해주세요");
+      return;
+    }
+
+    let newLikeUsers = [];
+    if (!likeUsers.includes(currentUser.author)) {
+      newLikeUsers = [...likeUsers, currentUser.author];
+    } else {
+      newLikeUsers = likeUsers.filter((user) => user !== currentUser.author);
+    }
+
+    globalStore.setState({
+      posts: posts.map((post) => {
+        if (post.id === id) {
+          return {
+            ...post,
+            likeUsers: newLikeUsers,
+          };
+        }
+        return post;
+      }),
+    });
+  };
+
   return (
     <div className="bg-white rounded-lg shadow p-4 mb-4">
       <div className="flex items-center mb-2">
@@ -20,7 +43,8 @@ export const Post = ({
       <p>{content}</p>
       <div className="mt-2 flex justify-between text-gray-500">
         <span
-          className={`like-button cursor-pointer${activationLike ? " text-blue-500" : ""}`}
+          className={`like-button cursor-pointer${likeUsers.length ? " text-blue-500" : ""}`}
+          onClick={handleLikeClick}
         >
           좋아요 {likeUsers.length}
         </span>
diff --git a/src/components/posts/PostForm.jsx b/src/components/posts/PostForm.jsx
index 36a2513..4d73149 100644
--- a/src/components/posts/PostForm.jsx
+++ b/src/components/posts/PostForm.jsx
@@ -1,7 +1,25 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores";
 
 export const PostForm = () => {
+  const { posts, currentUser } = globalStore.getState();
+
+  const handleClick = () => {
+    globalStore.setState({
+      posts: [
+        ...posts,
+        {
+          id: posts.length + 1,
+          author: currentUser.username,
+          time: Date.now(),
+          content: document.getElementById("post-content").value,
+          likeUsers: [],
+        },
+      ],
+    });
+  };
+
   return (
     <div className="mb-4 bg-white rounded-lg shadow p-4">
       <textarea
@@ -12,6 +30,7 @@ export const PostForm = () => {
       <button
         id="post-submit"
         className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={handleClick}
       >
         게시
       </button>
diff --git a/src/lib/createElement.js b/src/lib/createElement.js
index 5d39ae7..5d8f3f6 100644
--- a/src/lib/createElement.js
+++ b/src/lib/createElement.js
@@ -1,5 +1,56 @@
 import { addEvent } from "./eventManager";
 
-export function createElement(vNode) {}
+export function createElement(vNode) {
+  if (typeof vNode === "function") {
+    throw new Error("invalid vNode");
+  }
 
-function updateAttributes($el, props) {}
+  if (
+    typeof vNode === "boolean" ||
+    typeof vNode === "undefined" ||
+    vNode === null
+  ) {
+    return new Text("");
+  }
+
+  if (typeof vNode === "number" || typeof vNode === "string") {
+    return new Text(String(vNode));
+  }
+
+  if (Array.isArray(vNode)) {
+    const fragment = new DocumentFragment();
+
+    vNode.forEach((node) => fragment.append(createElement(node)));
+
+    return fragment;
+  }
+
+  if (!Array.isArray(vNode) && typeof vNode === "object") {
+    const container = document.createElement(vNode.type);
+
+    updateAttributes(container, vNode?.props);
+    container.append(createElement(vNode.children));
+
+    return container;
+  }
+
+  return vNode;
+}
+
+function updateAttributes($el, props = {}) {
+  if (props === null) return;
+
+  Object.entries(props).forEach(([attr, value]) => {
+    if (attr === "className") {
+      $el.setAttribute("class", value);
+      return;
+    }
+
+    if (attr.startsWith("on")) {
+      addEvent($el, attr.slice(2).toLowerCase(), value);
+      return;
+    }
+
+    $el.setAttribute(attr, value);
+  });
+}
diff --git a/src/lib/createVNode.js b/src/lib/createVNode.js
index 9991337..fbf5dc4 100644
--- a/src/lib/createVNode.js
+++ b/src/lib/createVNode.js
@@ -1,3 +1,9 @@
 export function createVNode(type, props, ...children) {
-  return {};
+  return {
+    type,
+    props,
+    children: children.flat(Infinity).filter((item) => {
+      return item === 0 || item;
+    }),
+  };
 }
diff --git a/src/lib/eventManager.js b/src/lib/eventManager.js
index 24e4240..d0e37a4 100644
--- a/src/lib/eventManager.js
+++ b/src/lib/eventManager.js
@@ -1,5 +1,83 @@
-export function setupEventListeners(root) {}
+/**
+ * DOM 이벤트 리스너들을 관리하는 중첩된 Map 구조입니다.
+ *
+ * @type {Map<HTMLElement, Map<string, Map<Function, Function>>>}
+ *
+ * @description
+ * 3중 중첩 Map 구조로 되어있습니다:
+ * - 첫 번째 레벨: DOM 엘리먼트를 키로 가지는 Map
+ * - 두 번째 레벨: 이벤트 타입(예: 'click', 'mouseover')을 키로 가지는 Map
+ * - 세 번째 레벨: 원본 핸들러 함수를 키로 가지고, 래핑된 핸들러 함수를 값으로 가지는 Map
+ *
+ * @example
+ * // Map 구조 예시
+ * Map(HTMLElement) => {
+ *   Map(eventType: string) => {
+ *     Map(originalHandler: Function => wrappedHandler: Function)
+ *   }
+ * }
+ */
+const eventListeners = new Map();
+let root = null;
 
-export function addEvent(element, eventType, handler) {}
+export function setupEventListeners(_root) {
+  if (!_root) {
+    throw new Error("이벤트 리스너 설정을 위해 root 엘리먼트가 필요합니다.");
+  }
 
-export function removeEvent(element, eventType, handler) {}
+  root = _root;
+
+  eventListeners.forEach((eventTypeMap) => {
+    eventTypeMap?.forEach((handlers, eventType) => {
+      handlers?.forEach((handler) => {
+        root.addEventListener(eventType, handler);
+      });
+    });
+  });
+}
+
+export function addEvent(element, eventType, handler) {
+  if (!eventListeners.has(element)) {
+    eventListeners.set(element, new Map());
+  }
+
+  const elementEvents = eventListeners.get(element);
+
+  if (!elementEvents.has(eventType)) {
+    elementEvents.set(eventType, new Map());
+  }
+
+  const wrappedHandler =
+    typeof handler === "function"
+      ? (e) => {
+          if (e.target === element) {
+            handler(e);
+          }
+        }
+      : undefined;
+
+  elementEvents.get(eventType).set(handler, wrappedHandler);
+}
+
+export function removeEvent(element, eventType, handler) {
+  if (!eventListeners.has(element)) return;
+
+  const eventsTypes = eventListeners.get(element);
+  if (!eventsTypes.has(eventType)) return;
+
+  const handlers = eventsTypes.get(eventType);
+  if (!handlers.has(handler)) return;
+
+  // dom에 등록된 이벤트 제거
+  const registeredHandler = handlers.get(handler);
+  root.removeEventListener(eventType, registeredHandler);
+
+  // eventListeners에 등록된 이벤트 제거
+  handlers.delete(handler);
+  if (handlers.size === 0) {
+    eventsTypes.delete(eventType);
+  }
+  if (eventsTypes.size === 0) {
+    eventListeners.delete(element);
+  }
+}
diff --git a/src/lib/normalizeVNode.js b/src/lib/normalizeVNode.js
index 7dc6f17..1ca7448 100644
--- a/src/lib/normalizeVNode.js
+++ b/src/lib/normalizeVNode.js
@@ -1,3 +1,28 @@
 export function normalizeVNode(vNode) {
+  if (
+    typeof vNode === "boolean" ||
+    typeof vNode === "undefined" ||
+    vNode === null
+  ) {
+    return "";
+  }
+
+  if (typeof vNode === "number" || typeof vNode === "string") {
+    return String(vNode);
+  }
+
+  if (typeof vNode.type === "function") {
+    return normalizeVNode(
+      vNode.type({
+        ...vNode.props,
+        children: vNode.children,
+      }),
+    );
+  }
+
+  if (Array.isArray(vNode.children)) {
+    vNode.children = vNode.children.filter(normalizeVNode).map(normalizeVNode);
+  }
+
   return vNode;
 }
diff --git a/src/lib/renderElement.js b/src/lib/renderElement.js
index 0429572..c79a6f2 100644
--- a/src/lib/renderElement.js
+++ b/src/lib/renderElement.js
@@ -4,7 +4,14 @@ import { normalizeVNode } from "./normalizeVNode";
 import { updateElement } from "./updateElement";
 
 export function renderElement(vNode, container) {
-  // 최초 렌더링시에는 createElement로 DOM을 생성하고
-  // 이후에는 updateElement로 기존 DOM을 업데이트한다.
-  // 렌더링이 완료되면 container에 이벤트를 등록한다.
+  const newVNode = normalizeVNode(vNode);
+
+  if (container.oldVNode) {
+    updateElement(container, newVNode, container.oldVNode);
+  } else {
+    container.append(createElement(newVNode));
+  }
+
+  container.oldVNode = newVNode;
+  setupEventListeners(container);
 }
diff --git a/src/lib/updateElement.js b/src/lib/updateElement.js
index ac32186..e89866e 100644
--- a/src/lib/updateElement.js
+++ b/src/lib/updateElement.js
@@ -1,6 +1,109 @@
 import { addEvent, removeEvent } from "./eventManager";
 import { createElement } from "./createElement.js";
 
-function updateAttributes(target, originNewProps, originOldProps) {}
+function updateAttributes(target, originNewProps, originOldProps) {
+  // update 되지 않아도 되는 경우
+  if (originNewProps === originOldProps) return;
 
-export function updateElement(parentElement, newNode, oldNode, index = 0) {}
+  const allAttrs = new Set([
+    ...Object.keys(originNewProps),
+    ...Object.keys(originOldProps),
+  ]);
+
+  allAttrs.forEach((attr) => {
+    const isEvent = attr.startsWith("on");
+    // newProps에 없고, oldProps에 있는거 제거
+    if (!originNewProps[attr] && originOldProps[attr]) {
+      if (isEvent) {
+        const eventType = attr.slice(2).toLowerCase();
+        removeEvent(target, eventType, originOldProps[attr]);
+        return;
+      }
+
+      const _attr = attr === "className" ? "class" : attr;
+      target.removeAttribute(_attr);
+    }
+    // newProps에 있고, oldProps에 없는거 등록
+    if (originNewProps[attr] && !originOldProps[attr]) {
+      if (isEvent) {
+        const eventType = attr.slice(2).toLowerCase();
+        addEvent(target, eventType, originNewProps[attr]);
+        return;
+      }
+
+      target[attr] = originNewProps[attr];
+    }
+    // newProps에 있고, oldProps에 있을 때 값이 다르면 oldProps제거 후 newProps 등록
+    if (originNewProps[attr] !== originOldProps[attr]) {
+      if (isEvent) {
+        const eventType = attr.slice(2).toLowerCase();
+        removeEvent(target, eventType, originOldProps[attr]);
+        addEvent(target, eventType, originNewProps[attr]);
+        return;
+      }
+
+      target[attr] = originNewProps[attr];
+    }
+  });
+}
+
+function mergeConsecutiveStrings(arr) {
+  return arr.reduce((acc, curr, i) => {
+    if (typeof curr !== "string") {
+      acc.push(curr);
+      return acc;
+    }
+
+    if (i > 0 && typeof acc[acc.length - 1] === "string") {
+      acc[acc.length - 1] += curr;
+    } else {
+      acc.push(curr);
+    }
+    return acc;
+  }, []);
+}
+
+export function updateElement(parentElement, newVNode, oldVNode, index = 0) {
+  const targetElement = parentElement.children[index];
+
+  // 노드 제거 (newNode가 없고 oldNode가 있는 경우)
+  if (!newVNode && oldVNode) {
+    targetElement?.remove();
+    return;
+  }
+  // 새 노드 추가 (newNode가 있고 oldNode가 없는 경우)
+  if (newVNode && !oldVNode) {
+    parentElement.appendChild(createElement(newVNode));
+    return;
+  }
+  // 텍스트 노드 업데이트
+  if (typeof newVNode === "string" && typeof oldVNode === "string") {
+    parentElement.textContent = newVNode;
+    return;
+  }
+  // 노드 교체 (newNode와 oldNode의 타입이 다른 경우)
+  if (newVNode.type !== oldVNode.type) {
+    parentElement.replaceChild(createElement(newVNode), targetElement);
+    return;
+  }
+  // 같은 타입의 노드 업데이트
+  if (targetElement && newVNode.type === oldVNode.type) {
+    updateAttributes(targetElement, newVNode.props ?? {}, oldVNode.props ?? {});
+
+    const newVNodeChildren = mergeConsecutiveStrings(newVNode.children ?? []);
+    const oldVNodeChildren = mergeConsecutiveStrings(oldVNode.children ?? []);
+
+    const maxLength = Math.max(
+      newVNodeChildren.length,
+      oldVNodeChildren.length,
+    );
+
+    for (let i = 0; i < maxLength; i++) {
+      updateElement(targetElement, newVNodeChildren[i], oldVNodeChildren[i], i);
+    }
+
+    while (targetElement.childNodes.length > newVNodeChildren.length) {
+      targetElement.removeChild(targetElement.lastChild);
+    }
+  }
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 376fe12..c5dde42 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -11,7 +11,7 @@ import { globalStore } from "../stores";
  * - 로그인하지 않은 사용자가 게시물에 좋아요를 누를 경우, "로그인 후 이용해주세요"를 alert로 띄운다.
  */
 export const HomePage = () => {
-  const { posts } = globalStore.getState();
+  const { posts, loggedIn } = globalStore.getState();
 
   return (
     <div className="bg-gray-100 min-h-screen flex justify-center">
@@ -20,7 +20,7 @@ export const HomePage = () => {
         <Navigation />
 
         <main className="p-4">
-          <PostForm />
+          {loggedIn && <PostForm />}
           <div id="posts-container" className="space-y-4">
             {[...posts]
               .sort((a, b) => b.time - a.time)