[4팀 장철희] [Chapter 1-2] 프레임워크 없이 SPA 만들기

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>

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>

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);
+  });
+}

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;
+    }),
+  };
 }

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);
+  }
+}

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;
 }

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);
 }