[8팀 김도운] [Chapter 1-2] 프레임워크 없이 SPA 만들기

src/components/posts/Post.jsx

@@ -1,14 +1,22 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
 import { toTimeFormat } from "../../utils/index.js";
+import { globalStore } from "../../stores/index.js";
+
+export const Post = ({ id, author, time, content, likeUsers, loggedIn }) => {
+  const { toggleLike } = globalStore.actions;
+  const { currentUser } = globalStore.getState();
+  const activationLike =
+    currentUser && likeUsers.includes(currentUser.username);
+
+  const handleToggleLike = () => {
+    if (!loggedIn) {
+      alert("로그인 후 이용해주세요");
+      return;
+    }
+    toggleLike(id);
+  };
 
-export const Post = ({
-  author,
-  time,
-  content,
-  likeUsers,
-  activationLike = false,
-}) => {
   return (
     <div className="bg-white rounded-lg shadow p-4 mb-4">
       <div className="flex items-center mb-2">
@@ -20,6 +28,7 @@ export const Post = ({
       <p>{content}</p>
       <div className="mt-2 flex justify-between text-gray-500">
         <span
+          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/lib/createElement.js

@@ -1,5 +1,53 @@
-import { addEvent } from "./eventManager";
+import { addEvent } from "./eventManager.js";
+import { supportedEventNames } from "./extractEvent.js";
 
-export function createElement(vNode) {}
+/**
+ * DOM API를 이용하여 Virtual DOM을 실제 DOM으로 변환한다.
+ */
+export function createElement(vNode) {
+  // 문자열이나 숫자 처리
+  if (typeof vNode === "string" || typeof vNode === "number") {
+    return document.createTextNode(String(vNode));
+  }
 
-function updateAttributes($el, props) {}
+  // null, undefined, boolean 처리
+  if (vNode == null || typeof vNode === "boolean") {
+    return document.createTextNode("");
+  }
+
+  // 배열(fragment) 처리
+  if (Array.isArray(vNode)) {
+    const fragment = document.createDocumentFragment();
+    vNode.forEach((child) => {
+      const childElement = createElement(child);
+      fragment.appendChild(childElement);
+    });
+    return fragment;
+  }
+
+  const element = document.createElement(vNode.type);
+
+  // props 처리
+  if (vNode.props) {
+    Object.entries(vNode.props).forEach(([key, value]) => {
+      if (key === "className") {
+        element.setAttribute("class", value);
+      } else if (key.startsWith("on") && typeof value === "function") {
+        const eventType = key.slice(2).toLowerCase();
+        if (supportedEventNames.has(eventType)) {
+          addEvent(element, eventType, value);
+        }
+      } else if (key !== "key" && key !== "children") {
+        element.setAttribute(key, value);
+      }
+    });
+  }
+
+  // 자식 노드 처리
+  vNode.children.forEach((child) => {
+    const childElement = createElement(child);
+    element.appendChild(childElement);
+  });
+
+  return element;
+}

src/lib/createSyntheticEvent.js

@@ -0,0 +1,138 @@
+/**
+ * 합성 이벤트 생성자 함수를 반환하는 팩토리 함수
+ * @param Interface Interface 이벤트 타입 별 속성 정의
+ * @returns {function(*, *, *, *): SyntheticBaseEvent} 합성 이벤트 생성자 함수
+ */
+function createSyntheticEvent(Interface) {
+  // 기본 합성 이벤트 생성자
+  function SyntheticBaseEvent(name, eventType, nativeEvent, nativeEventTarget) {
+    this._name = name;
+    this.nativeEvent = nativeEvent;
+    this.target = nativeEventTarget;
+    this.currentTarget = null;
+
+    // Interface에 정의된 속성들을 인스턴스에 복사
+    for (let prop in Interface) {
+      if (Object.hasOwn(Interface, prop)) {
+        this[prop] = Interface[prop];
+      }
+    }
+
+    // 이벤트 취소/전파 중단 상태 초기화
+    const defaultPrevented = nativeEvent.defaultPrevented ?? false;
+    this.isDefaultPrevented = () => defaultPrevented;
+    this.isPropagationStopped = () => false;
+
+    return this;
+  }
+
+  // 이벤트 제어(전파 중단 등)를 위한 메서드 정의
+  Object.assign(SyntheticBaseEvent.prototype, {
+    preventDefault: function () {
+      this.defaultPrevented = true;
+      const event = this.nativeEvent;
+      if (!event) return;
+      if (event.preventDefault) {
+        event.preventDefault();
+      }
+    },
+    stopPropagation: function () {
+      const event = this.nativeEvent;
+      if (!event) return;
+      if (event.stopPropagation) {
+        event.stopPropagation();
+      }
+      this.isPropagationStopped = () => true;
+    },
+  });
+
+  return SyntheticBaseEvent;
+}
+
+// 기본 이벤트 인터페이스 정의
+const EventInterface = {
+  eventPhase: 0,
+  bubbles: 0,
+  cancelable: 0,
+  defaultPrevented: 0,
+};
+
+// UI 이벤트 (click, focus 등의 기본이 되는 이벤트)
+const UIEventInterface = {
+  ...EventInterface,
+  view: 0,
+  detail: 0,
+};
+
+// 터치 이벤트
+const TouchEventInterface = {
+  ...UIEventInterface,
+  touches: 0,
+  targetTouches: 0,
+  changedTouches: 0,
+  altKey: 0,
+  metaKey: 0,
+  ctrlKey: 0,
+  shiftKey: 0,
+};
+
+// 마우스 이벤트 (click, hover 등)
+const MouseEventInterface = {
+  ...UIEventInterface,
+  screenX: 0,
+  screenY: 0,
+  clientX: 0,
+  clientY: 0,
+  pageX: 0,
+  pageY: 0,
+  ctrlKey: 0,
+  shiftKey: 0,
+  altKey: 0,
+  metaKey: 0,
+  button: 0,
+  buttons: 0,
+};
+
+// 드래그 이벤트
+const DragEventInterface = {
+  ...MouseEventInterface,
+  dataTransfer: 0,
+};
+
+// 터치 이벤트
+const FocusEventInterface = {
+  ...UIEventInterface,
+  relatedTarget: 0,
+};
+
+// 휠 이벤트 (마우스 휠, 트랙 패드)
+const WheelEventInterface = {
+  ...MouseEventInterface,
+  deltaX(event) {
+    return "deltaX" in event
+      ? event.deltaX
+      : "wheelDeltaX" in event
+        ? -event.wheelDeltaX
+        : 0;
+  },
+  deltaY(event) {
+    return "deltaY" in event
+      ? event.deltaY
+      : "wheelDeltaY" in event
+        ? -event.wheelDeltaY
+        : "wheelDelta" in event
+          ? -event.wheelDelta
+          : 0;
+  },
+  deltaZ: 0,
+  deltaMode: 0,
+};
+
+// 각 이벤트 타입별 합성 이벤트 생성자 export
+export const SyntheticEvent = createSyntheticEvent(EventInterface);
+export const SyntheticUIEvent = createSyntheticEvent(UIEventInterface);
+export const SyntheticTouchEvent = createSyntheticEvent(TouchEventInterface);
+export const SyntheticMouseEvent = createSyntheticEvent(MouseEventInterface);
+export const SyntheticDragEvent = createSyntheticEvent(DragEventInterface);
+export const SyntheticFocusEvent = createSyntheticEvent(FocusEventInterface);
+export const SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);

src/lib/createVNode.js

@@ -1,3 +1,13 @@
+/**
+ * Virtual DOM 노드를 생성
+ * 자식 요소는 모두 평탄화하며, 유효하지 않은 자식 요소는 제거
+ */
 export function createVNode(type, props, ...children) {
-  return {};
+  return {
+    type,
+    props: props || null,
+    children: children
+      .flat(Infinity)
+      .filter((child) => child != null && child !== false && child !== true),
+  };
 }