hanghae-plus · YeongseoYoon-hanghae · Sep 1, 2025 · Sep 1, 2025 · Sep 1, 2025 · Sep 1, 2025
diff --git a/packages/lib/src/Router.ts b/packages/lib/src/Router.ts
@@ -1,61 +1,88 @@
+import type { FC } from "react";
 import { createObserver } from "./createObserver";
 import type { AnyFunction, StringRecord } from "./types";
 
-interface Route<Handler extends AnyFunction> {
+interface Route<Handler extends FC> {
   regex: RegExp;
   paramNames: string[];
   handler: Handler;
   params?: StringRecord;
 }
 
+const isClient = typeof window !== "undefined";
+
 type QueryPayload = Record<string, string | number | undefined>;
 
 export type RouterInstance<T extends AnyFunction> = InstanceType<typeof Router<T>>;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export class Router<Handler extends (...args: any[]) => any> {
+export class Router<Handler extends FC> {
   readonly #routes: Map<string, Route<Handler>>;
   readonly #observer = createObserver();
   readonly #baseUrl;
+  #serverQuery: StringRecord = {};
 
   #route: null | (Route<Handler> & { params: StringRecord; path: string });
 
-  constructor(baseUrl = "") {
+  constructor(initRoutes: Record<string, Handler>, baseUrl = "") {
     this.#routes = new Map();
     this.#route = null;
     this.#baseUrl = baseUrl.replace(/\/$/, "");
 
-    window.addEventListener("popstate", () => {
-      this.#route = this.#findRoute();
-      this.#observer.notify();
+    Object.entries(initRoutes).forEach(([path, page]) => {
+      this.addRoute(path, page);
     });
 
-    document.addEventListener("click", (e) => {
-      const target = e.target as HTMLElement;
-      if (!target?.closest("[data-link]")) {
-        return;
-      }
-      e.preventDefault();
-      const url = target.getAttribute("href") ?? target.closest("[data-link]")?.getAttribute("href");
-      if (url) {
-        this.push(url);
-      }
-    });
+    if (isClient) {
+      window.addEventListener("popstate", () => {
+        this.#route = this.#findRoute();
+        this.#observer.notify();
+      });
+
+      document.addEventListener("click", (e) => {
+        const target = e.target as HTMLElement;
+        if (!target?.closest("[data-link]")) {
+          return;
+        }
+        e.preventDefault();
+        const url = target.getAttribute("href") ?? target.closest("[data-link]")?.getAttribute("href");
+        if (url) {
+          this.push(url);
+        }
+      });
+    }
   }
 
   get query(): StringRecord {
-    return Router.parseQuery(window.location.search);
+    if (typeof window !== "undefined") {
+      return Router.parseQuery(window.location.search);
+    }
+    return this.#serverQuery;
   }
 
   set query(newQuery: QueryPayload) {
-    const newUrl = Router.getUrl(newQuery, this.#baseUrl);
-    this.push(newUrl);
+    if (isClient) {
+      const newUrl = Router.getUrl(newQuery, this.#baseUrl);
+      this.push(newUrl);
+    } else {
+      this.#serverQuery = Object.entries(newQuery).reduce((acc, [key, value]) => {
+        if (value !== null && value !== undefined && value !== "") {
+          acc[key] = String(value);
+          return acc;
+        }
+        return acc;
+      }, {} as StringRecord);
+    }
   }
 
   get params() {
     return this.#route?.params ?? {};
   }
 
+  set params(newParams: StringRecord) {
+    this.#route ??= {} as Route<Handler> & { params: StringRecord; path: string };
+    this.#route.params = newParams;
+  }
+
   get route() {
     return this.#route;
   }
@@ -66,7 +93,18 @@ export class Router<Handler extends (...args: any[]) => any> {
 
   readonly subscribe = this.#observer.subscribe;
 
-  addRoute(path: string, handler: Handler) {
+  addRoute<T>(path: string, handler: FC<T>) {
+    // * 경로 처리 (와일드카드)
+    if (path === "*") {
+      const regex = new RegExp(".*");
+      this.#routes.set(path, {
+        regex,
+        paramNames: [],
+        handler: handler as Handler,
+      });
+      return;
+    }
+
     // 경로 패턴을 정규식으로 변환
     const paramNames: string[] = [];
     const regexPath = path
@@ -76,21 +114,25 @@ export class Router<Handler extends (...args: any[]) => any> {
       })
       .replace(/\//g, "\\/");
 
-    const regex = new RegExp(`^${this.#baseUrl}${regexPath}$`);
+    const regex = isClient ? new RegExp(`^${this.#baseUrl}${regexPath}$`) : new RegExp(`^${regexPath}$`);
 
     this.#routes.set(path, {
       regex,
       paramNames,
-      handler,
+      handler: handler as Handler,
     });
   }
 
-  #findRoute(url = window.location.pathname) {
-    const { pathname } = new URL(url, window.location.origin);
+  #findRoute(url?: string) {
+    const pathname = url
+      ? new URL(url, "http://localhost").pathname
+      : typeof window !== "undefined"
+        ? window.location.pathname
+        : "/";
+
     for (const [routePath, route] of this.#routes) {
       const match = pathname.match(route.regex);
       if (match) {
-        // 매치된 파라미터들을 객체로 변환
         const params: StringRecord = {};
         route.paramNames.forEach((name, index) => {
           params[name] = match[index + 1];
@@ -107,13 +149,13 @@ export class Router<Handler extends (...args: any[]) => any> {
   }
 
   push(url: string) {
+    if (!isClient) return;
+
     try {
-      // baseUrl이 없으면 자동으로 붙여줌
       const fullUrl = url.startsWith(this.#baseUrl) ? url : this.#baseUrl + (url.startsWith("/") ? url : "/" + url);
 
       const prevFullUrl = `${window.location.pathname}${window.location.search}`;
 
-      // 히스토리 업데이트
       if (prevFullUrl !== fullUrl) {
         window.history.pushState(null, "", fullUrl);
       }
@@ -125,13 +167,14 @@ export class Router<Handler extends (...args: any[]) => any> {
     }
   }
 
-  start() {
-    this.#route = this.#findRoute();
+  start(url?: string) {
+    this.#route = this.#findRoute(url);
     this.#observer.notify();
   }
 
-  static parseQuery = (search = window.location.search) => {
-    const params = new URLSearchParams(search);
+  static parseQuery = (search?: string) => {
+    const searchString = search || (isClient ? window.location.search : "");
+    const params = new URLSearchParams(searchString);
     const query: StringRecord = {};
     for (const [key, value] of params) {
       query[key] = value;
@@ -161,6 +204,7 @@ export class Router<Handler extends (...args: any[]) => any> {
     });
 
     const queryString = Router.stringifyQuery(updatedQuery);
-    return `${baseUrl}${window.location.pathname.replace(baseUrl, "")}${queryString ? `?${queryString}` : ""}`;
+    const pathname = isClient ? window.location.pathname : "/";
+    return `${baseUrl}${pathname.replace(baseUrl, "")}${queryString ? `?${queryString}` : ""}`;
   };
 }
diff --git a/packages/lib/src/createStorage.ts b/packages/lib/src/createStorage.ts
@@ -1,15 +1,26 @@
 import { createObserver } from "./createObserver.ts";
 
-export const createStorage = <T>(key: string, storage = window.localStorage) => {
-  let data: T | null = JSON.parse(storage.getItem(key) ?? "null");
+const memoryStorage = (() => {
+  const map = new Map<string, string>();
+  return {
+    getItem: (k: string) => (map.has(k) ? map.get(k) : null),
+    setItem: (k: string, v: string) => map.set(k, v),
+    removeItem: (k: string) => map.delete(k),
+  };
+})();
+
+export const createStorage = <T>(key: string, storage?: Storage) => {
+  const storageImpl =
+    storage ?? (typeof window !== "undefined" && window?.localStorage ? window.localStorage : memoryStorage);
+  let data: T | null = JSON.parse(storageImpl.getItem(key) ?? "null");
   const { subscribe, notify } = createObserver();
 
   const get = () => data;
 
   const set = (value: T) => {
     try {
       data = value;
-      storage.setItem(key, JSON.stringify(data));
+      storageImpl.setItem(key, JSON.stringify(data));
       notify();
     } catch (error) {
       console.error(`Error setting storage item for key "${key}":`, error);
@@ -19,7 +30,7 @@ export const createStorage = <T>(key: string, storage = window.localStorage) =>
   const reset = () => {
     try {
       data = null;
-      storage.removeItem(key);
+      storageImpl.removeItem(key);
       notify();
     } catch (error) {
       console.error(`Error removing storage item for key "${key}":`, error);

diff --git a/packages/lib/src/hooks/useRouter.ts b/packages/lib/src/hooks/useRouter.ts
@@ -7,5 +7,9 @@ const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 
 export const useRouter = <T extends RouterInstance<AnyFunction>, S>(router: T, selector = defaultSelector<T, S>) => {
   const shallowSelector = useShallowSelector(selector);
-  return useSyncExternalStore(router.subscribe, () => shallowSelector(router));
+  return useSyncExternalStore(
+    router.subscribe,
+    () => shallowSelector(router),
+    () => shallowSelector(router),
+  );
 };
diff --git a/packages/lib/src/hooks/useStorage.ts b/packages/lib/src/hooks/useStorage.ts
@@ -4,5 +4,5 @@ import type { createStorage } from "../createStorage";
 type Storage<T> = ReturnType<typeof createStorage<T>>;
 
 export const useStorage = <T>(storage: Storage<T>) => {
-  return useSyncExternalStore(storage.subscribe, storage.get);
+  return useSyncExternalStore(storage.subscribe, storage.get, storage.get);
 };
diff --git a/packages/lib/src/hooks/useStore.ts b/packages/lib/src/hooks/useStore.ts
@@ -8,5 +8,9 @@ const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 
 export const useStore = <T, S = T>(store: Store<T>, selector: (state: T) => S = defaultSelector<T, S>) => {
   const shallowSelector = useShallowSelector(selector);
-  return useSyncExternalStore(store.subscribe, () => shallowSelector(store.getState()));
+  return useSyncExternalStore(
+    store.subscribe,
+    () => shallowSelector(store.getState()),
+    () => shallowSelector(store.getState()),
+  );
 };
diff --git a/packages/react/index.html b/packages/react/index.html
@@ -1,26 +1,27 @@
 <!doctype html>
 <html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!--app-head-->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link rel="stylesheet" href="/src/styles.css">
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            primary: "#3b82f6",
-            secondary: "#6b7280"
-          }
-        }
-      }
-    };
-  </script>
-</head>
-<body class="bg-gray-50">
-<div id="root"><!--app-html--></div>
-<script type="module" src="/src/main.tsx"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--app-head-->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/src/styles.css" />
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: "#3b82f6",
+              secondary: "#6b7280",
+            },
+          },
+        },
+      };
+    </script>
+  </head>
+  <body class="bg-gray-50">
+    <div id="root"><!--app-html--></div>
+    <!--app-data-->
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -8,7 +8,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 5175",
-    "dev:ssr": "PORT=5176 node server.js",
+    "dev:ssr": "PORT=5176 nodemon --watch src --ext ts,tsx,js,json --exec \"tsx server.ts\"",
     "build:client": "rm -rf ./dist/react && vite build --outDir ./dist/react && cp ./dist/react/index.html ./dist/react/404.html",
     "build:client-for-ssg": "rm -rf ../../dist/react && vite build --outDir ../../dist/react",
     "build:server": "vite build --outDir ./dist/react-ssr --ssr src/main-server.tsx",
@@ -17,7 +17,7 @@
     "build": "npm run build:client && npm run build:server && npm run build:ssg",
     "preview:csr": "vite preview --outDir ./dist/react --port 4175",
     "preview:csr-with-build": "pnpm run build:client && pnpm run preview:csr",
-    "preview:ssr": "PORT=4176 NODE_ENV=production node server.js",
+    "preview:ssr": "PORT=4176 NODE_ENV=production tsx server.ts",
     "preview:ssr-with-build": "pnpm run build:without-ssg && pnpm run preview:ssr",
     "preview:ssg": "NODE_ENV=production vite preview --outDir ../../dist/react --port 4179",
     "preview:ssg-with-build": "pnpm run build:ssg && pnpm run preview:ssg",
@@ -27,30 +27,34 @@
     "prettier:write": "prettier --write ./src"
   },
   "dependencies": {
+    "@hanghae-plus/lib": "workspace:*",
     "react": "latest",
-    "react-dom": "latest",
-    "@hanghae-plus/lib": "workspace:*"
+    "react-dom": "latest"
   },
   "devDependencies": {
     "@babel/core": "latest",
     "@babel/plugin-transform-react-jsx": "latest",
     "@eslint/js": "^9.16.0",
+    "@types/compression": "^1.8.1",
+    "@types/express": "^5.0.3",
+    "@types/node": "^24.0.13",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@types/use-sync-external-store": "latest",
     "@vitejs/plugin-react": "latest",
-    "@types/node": "^24.0.13",
+    "compression": "^1.7.5",
     "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "express": "^5.1.0",
     "msw": "^2.10.2",
     "prettier": "^3.4.2",
+    "nodemon": "^3.1.7",
+    "sirv": "^3.0.0",
+    "tsx": "^4.20.5",
     "typescript": "^5.8.3",
-    "vite": "npm:rolldown-vite@latest",
-    "express": "^5.1.0",
-    "compression": "^1.7.5",
-    "sirv": "^3.0.0"
+    "vite": "npm:rolldown-vite@latest"
   }
 }