hanghae-plus · Songchangyeop · Dec 22, 2024 · Dec 22, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/index.hash.html b/index.hash.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.hash.jsx"></script>
+    <script type="module" src="/src/main.hash.tsx"></script>
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,8 +34,8 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.5.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/ui": "^2.1.8",
     "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
@@ -44,6 +44,7 @@
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.11",
     "prettier": "^3.4.2",
+    "typescript": "^5.7.2",
     "vite": "^6.0.3",
     "vitest": "^2.1.8"
   }

diff --git a/src/__tests__/chapter1-1/advanced.hashRouter.test.js b/src/__tests__/chapter1-1/advanced.hashRouter.test.js
@@ -4,7 +4,7 @@ beforeAll(async () => {
   // DOM 초기화
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
-  await import("../../main.hash.jsx");
+  await import("../../main.hash.tsx");
 });
 
 afterAll(() => {

diff --git a/src/__tests__/chapter1-1/advanced.test.js b/src/__tests__/chapter1-1/advanced.test.js
@@ -13,7 +13,7 @@ beforeAll(async () => {
   // DOM 초기화
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
-  await import("../../main.jsx");
+  await import("../../main.tsx");
 });
 
 afterAll(() => {

diff --git a/src/__tests__/chapter1-1/basic.test.js b/src/__tests__/chapter1-1/basic.test.js
@@ -14,7 +14,7 @@ beforeAll(async () => {
   // DOM 초기화
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
-  await import("../../main.jsx");
+  await import("../../main.tsx");
 });
 
 afterAll(() => {

diff --git a/src/__tests__/chapter1-2/advanced.post.test.jsx b/src/__tests__/chapter1-2/advanced.post.test.jsx
@@ -18,7 +18,7 @@ beforeAll(async () => {
   // DOM 초기화
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
-  await import("../../main.jsx");
+  await import("../../main.tsx");
 });
 
 afterAll(() => {

diff --git a/src/components/index.js → src/components/index.ts b/src/components/index.js → src/components/index.ts
diff --git a/src/components/posts/Post.jsx → src/components/posts/Post.tsx b/src/components/posts/Post.jsx → src/components/posts/Post.tsx
@@ -1,14 +1,36 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore, PostType } from "../../stores/globalStore.js";
 import { toTimeFormat } from "../../utils/index.js";
 
+interface PostProps extends PostType {
+  activationLike?: boolean;
+}
+
 export const Post = ({
   author,
   time,
   content,
   likeUsers,
   activationLike = false,
-}) => {
+  id,
+}: PostProps) => {
+  const { loggedIn } = globalStore.getState();
+  const { toggleLike } = globalStore.actions;
+
+  const handleToggleLike = () => {
+    if (!loggedIn) {
+      window.alert("로그인 후 이용해주세요");
+      return;
+    }
+
+    if (!id) {
+      return;
+    }
+
+    toggleLike(id);
+  };
+
   return (
     <div className="bg-white rounded-lg shadow p-4 mb-4">
       <div className="flex items-center mb-2">
@@ -21,8 +43,9 @@ export const Post = ({
       <div className="mt-2 flex justify-between text-gray-500">
         <span
           className={`like-button cursor-pointer${activationLike ? " text-blue-500" : ""}`}
+          onClick={handleToggleLike}
         >
-          좋아요 {likeUsers.length}
+          좋아요 {likeUsers?.length}
         </span>
         <span>댓글</span>
         <span>공유</span>

diff --git a/src/components/posts/PostForm.jsx b/src/components/posts/PostForm.jsx
diff --git a/src/components/posts/PostForm.tsx b/src/components/posts/PostForm.tsx
@@ -0,0 +1,46 @@
+/** @jsx createVNode */
+import { createVNode } from "../../lib";
+import { globalStore } from "../../stores";
+import { getCurrentTime } from "../../utils";
+
+export const PostForm = () => {
+  const { addPost } = globalStore.actions;
+  const { currentUser } = globalStore.getState();
+
+  const handleSubmit = (event: SubmitEvent) => {
+    event.preventDefault();
+
+    if (!currentUser) return;
+
+    const postContent = document.getElementById(
+      "post-content",
+    ) as HTMLTextAreaElement;
+
+    const contentValue = postContent ? postContent.value : "";
+
+    addPost({
+      author: currentUser.username,
+      content: contentValue,
+      time: getCurrentTime(),
+    });
+  };
+
+  return (
+    <form
+      className="mb-4 bg-white rounded-lg shadow p-4"
+      onSubmit={handleSubmit}
+    >
+      <textarea
+        id="post-content"
+        placeholder="무슨 생각을 하고 계신가요?"
+        className="w-full p-2 border rounded"
+      />
+      <button
+        id="post-submit"
+        className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
+      >
+        게시
+      </button>
+    </form>
+  );
+};
diff --git a/src/components/posts/index.js b/src/components/posts/index.js
diff --git a/src/components/posts/index.ts b/src/components/posts/index.ts
@@ -0,0 +1,2 @@
+export * from "./Post.tsx";
+export * from "./PostForm.tsx";
diff --git a/src/components/templates/Footer.jsx → src/components/templates/Footer.tsx b/src/components/templates/Footer.jsx → src/components/templates/Footer.tsx
diff --git a/src/components/templates/Header.jsx → src/components/templates/Header.tsx b/src/components/templates/Header.jsx → src/components/templates/Header.tsx
diff --git a/src/components/templates/Link.tsx b/src/components/templates/Link.tsx
@@ -0,0 +1,23 @@
+/** @jsx createVNode */
+import { createVNode } from "../../lib";
+import { router } from "../../router";
+
+interface LinkProps {
+  onClick?: () => void;
+  children?: unknown;
+  href: string;
+  className?: string;
+}
+
+export function Link({ onClick, children, ...props }: LinkProps) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onClick?.();
+    router.get().push(e.target.href.replace(window.location.origin, ""));
+  };
+  return (
+    <a onClick={handleClick} {...props}>
+      {children}
+    </a>
+  );
+}
diff --git a/src/components/templates/Navigation.jsx → src/components/templates/Navigation.tsx b/src/components/templates/Navigation.jsx → src/components/templates/Navigation.tsx
@@ -2,25 +2,13 @@
 import { createVNode } from "../../lib";
 import { router } from "../../router";
 import { globalStore } from "../../stores";
+import { Link } from "./Link";
 
 const getNavItemClass = (path) => {
   const currentPath = window.location.pathname;
   return currentPath === path ? "text-blue-600 font-bold" : "text-gray-600";
 };
 
-function Link({ onClick, children, ...props }) {
-  const handleClick = (e) => {
-    e.preventDefault();
-    onClick?.();
-    router.get().push(e.target.href.replace(window.location.origin, ""));
-  };
-  return (
-    <a onClick={handleClick} {...props}>
-      {children}
-    </a>
-  );
-}
-
 export const Navigation = () => {
   const { loggedIn } = globalStore.getState();
   const { logout } = globalStore.actions;

diff --git a/src/components/templates/index.js → src/components/templates/index.ts b/src/components/templates/index.js → src/components/templates/index.ts
diff --git a/src/lib/createElement.js b/src/lib/createElement.js
diff --git a/src/lib/createElement.ts b/src/lib/createElement.ts
@@ -0,0 +1,79 @@
+import { addEvent } from "./eventManager";
+import { normalizeVNode } from "./normalizeVNode";
+
+export interface VNode {
+  type: string | Function;
+  props: Record<string, any>;
+  children?: Array<VNode | string | number>;
+}
+
+export function createElement(vNode: VNode) {
+  if (vNode && typeof vNode.type === "function") {
+    throw new Error("Function component is not supported");
+  }
+
+  // vNode 정규화
+  let normalizedVNode = normalizeVNode(vNode);
+
+  // null, undefined, boolean 빈 텍스트 노드 변환
+  if (
+    typeof normalizedVNode === "boolean" ||
+    normalizedVNode === null ||
+    normalizedVNode === undefined
+  ) {
+    return document.createTextNode("");
+  }
+
+  if (
+    typeof normalizedVNode === "string" ||
+    typeof normalizedVNode === "number"
+  ) {
+    return document.createTextNode(String(normalizedVNode));
+  }
+
+  if (Array.isArray(normalizedVNode)) {
+    const fragment = document.createDocumentFragment();
+
+    normalizedVNode.forEach((child) => {
+      fragment.appendChild(createElement(child));
+    });
+
+    return fragment;
+  }
+
+  // 일반 DOM 요소 생성
+  const { type, props = {}, children = [] } = normalizedVNode;
+  const $element = document.createElement(type) as HTMLElement;
+
+  // props 적용
+  updateAttributes($element, props);
+
+  // children 추가
+  children.forEach((child) => {
+    $element.appendChild(createElement(child));
+  });
+
+  return $element;
+}
+
+function updateAttributes($element: HTMLElement, props: Record<string, any>) {
+  if (!props) return;
+
+  Object.entries(props).forEach(([key, value]) => {
+    // 이벤트 핸들러 등록
+    if (key.startsWith("on") && typeof value === "function") {
+      const eventType = key.toLowerCase().substring(2);
+      addEvent($element, eventType, value);
+      return;
+    }
+
+    // className 등록
+    if (key === "className") {
+      $element.setAttribute("class", value);
+      return;
+    }
+
+    // 일반 속성 등록
+    $element.setAttribute(key, value);
+  });
+}
diff --git a/src/lib/createHashRouter.js → src/lib/createHashRouter.ts b/src/lib/createHashRouter.js → src/lib/createHashRouter.ts
diff --git a/src/lib/createObserver.js → src/lib/createObserver.ts b/src/lib/createObserver.js → src/lib/createObserver.ts
diff --git a/src/lib/createRouter.js → src/lib/createRouter.ts b/src/lib/createRouter.js → src/lib/createRouter.ts
@@ -8,7 +8,7 @@ export const createRouter = (routes) => {
   const getTarget = () => routes[getPath()];
 
   const push = (path) => {
-    window.history.pushState(null, null, path);
+    window.history.pushState(null, "", path);
     notify();
   };
 

diff --git a/src/lib/createStorage.js → src/lib/createStorage.ts b/src/lib/createStorage.js → src/lib/createStorage.ts
diff --git a/src/lib/createStore.js b/src/lib/createStore.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./Post.tsx";
		export * from "./PostForm.tsx";