hanghae-plus · chan9yu · Jul 20, 2025 · Jul 20, 2025 · Jul 20, 2025 · Jul 20, 2025
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,40 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+        env:
+          NODE_ENV: production
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        if: github.ref == 'refs/heads/main'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./packages/app/dist
diff --git a/packages/app/404.html b/packages/app/404.html
@@ -0,0 +1,18 @@
+<script>
+  var segmentCount = 1;
+  var l = window.location;
+  l.replace(
+    l.protocol +
+      "//" +
+      l.hostname +
+      (l.port ? ":" + l.port : "") +
+      l.pathname
+        .split("/")
+        .slice(0, 1 + segmentCount)
+        .join("/") +
+      "/?p=/" +
+      l.pathname.slice(1).split("/").slice(segmentCount).join("/").replace(/&/g, "~and~") +
+      (l.search ? "&q=" + l.search.slice(1).replace(/&/g, "~and~") : "") +
+      l.hash,
+  );
+</script>
diff --git a/packages/app/index.html b/packages/app/index.html
@@ -1,26 +1,44 @@
 <!doctype html>
 <html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>상품 쇼핑몰</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link rel="stylesheet" href="/src/styles.css">
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            primary: "#3b82f6",
-            secondary: "#6b7280"
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>상품 쇼핑몰</title>
+    <link rel="stylesheet" href="/src/styles.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: "#3b82f6",
+              secondary: "#6b7280"
+            }
           }
         }
-      }
-    };
-  </script>
-</head>
-<body class="bg-gray-50">
-<div id="root"></div>
-<script type="module" src="/src/main.tsx"></script>
-</body>
+      };
+    </script>
+    <script>
+      (function (l) {
+        if (l.search) {
+          var q = {};
+          l.search
+            .slice(1)
+            .split("&")
+            .forEach(function (v) {
+              var a = v.split("=");
+              q[a[0]] = a.slice(1).join("=").replace(/~and~/g, "&");
+            });
+          if (q.p !== undefined) {
+            window.history.replaceState(null, null, q.p + (q.q ? "?" + q.q : "") + l.hash);
+          }
+        }
+      })(window.location);
+    </script>
+  </head>
+
+  <body class="bg-gray-50">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/packages/app/src/components/modal/ModalProvider.tsx b/packages/app/src/components/modal/ModalProvider.tsx
@@ -1,27 +1,42 @@
 /* eslint-disable react-refresh/only-export-components */
-import { createContext, memo, type PropsWithChildren, type ReactNode, useContext, useState } from "react";
+
+import { createContext, memo, type PropsWithChildren, type ReactNode, useContext, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
+
 import { Modal } from "./Modal";
 
-export const ModalContext = createContext<{
-  open: (content: ReactNode) => void;
+type ModalContextValue = {
   close: () => void;
-}>({
-  open: () => null,
+  open: (content: ReactNode) => void;
+};
+
+const ModalContext = createContext<ModalContextValue>({
   close: () => null,
+  open: () => null,
 });
 
-export const useModalContext = () => useContext(ModalContext);
+export const useModalContext = () => {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("ModalProvider 내에서 useModalContext을 사용해야 합니다!");
+  }
+
+  return context;
+};
 
 export const ModalProvider = memo(({ children }: PropsWithChildren) => {
   const [content, setContent] = useState<ReactNode>(null);
 
-  const open = (newContent: ReactNode) => setContent(newContent);
-
-  const close = () => setContent(null);
+  const modalContextValue = useMemo<ModalContextValue>(
+    () => ({
+      close: () => setContent(null),
+      open: setContent,
+    }),
+    [],
+  );
 
   return (
-    <ModalContext value={{ open, close }}>
+    <ModalContext value={modalContextValue}>
       {children}
       {content && createPortal(<Modal>{content}</Modal>, document.body)}
     </ModalContext>

diff --git a/packages/app/src/components/toast/ToastProvider.tsx b/packages/app/src/components/toast/ToastProvider.tsx
@@ -1,52 +1,87 @@
 /* eslint-disable react-refresh/only-export-components */
-import { createContext, memo, type PropsWithChildren, useContext, useReducer } from "react";
+
+import { useAutoCallback } from "@hanghae-plus/lib";
+import { createContext, memo, type PropsWithChildren, useContext, useMemo, useReducer } from "react";
 import { createPortal } from "react-dom";
+
+import { debounce } from "../../utils";
 import { Toast } from "./Toast";
 import { createActions, initialState, toastReducer, type ToastType } from "./toastReducer";
-import { debounce } from "../../utils";
 
-type ShowToast = (message: string, type: ToastType) => void;
-type Hide = () => void;
+type ToastCommandContextValue = {
+  hide: () => void;
+  show: (message: string, type: ToastType) => void;
+};
 
-const ToastContext = createContext<{
+type ToastStateContextValue = {
   message: string;
   type: ToastType;
-  show: ShowToast;
-  hide: Hide;
-}>({
-  ...initialState,
+};
+
+const ToastCommandContext = createContext<ToastCommandContextValue>({
   show: () => null,
   hide: () => null,
 });
 
+const ToastStateContext = createContext<ToastStateContextValue>({
+  ...initialState,
+});
+
 const DEFAULT_DELAY = 3000;
 
-const useToastContext = () => useContext(ToastContext);
 export const useToastCommand = () => {
-  const { show, hide } = useToastContext();
-  return { show, hide };
+  const context = useContext(ToastCommandContext);
+  if (!context) {
+    throw new Error("ToastProvider 내에서 useToastCommand을 사용해야 합니다!");
+  }
+
+  return context;
 };
+
 export const useToastState = () => {
-  const { message, type } = useToastContext();
-  return { message, type };
+  const context = useContext(ToastStateContext);
+  if (!context) {
+    throw new Error("ToastProvider 내에서 useToastState을 사용해야 합니다!");
+  }
+
+  return context;
 };
 
 export const ToastProvider = memo(({ children }: PropsWithChildren) => {
   const [state, dispatch] = useReducer(toastReducer, initialState);
-  const { show, hide } = createActions(dispatch);
-  const visible = state.message !== "";
 
-  const hideAfter = debounce(hide, DEFAULT_DELAY);
+  const { show, hide } = useMemo(() => createActions(dispatch), [dispatch]);
+  const hideAfter = useMemo(() => debounce(hide, DEFAULT_DELAY), [hide]);
+
+  const visible = state.message !== "";
 
-  const showWithHide: ShowToast = (...args) => {
-    show(...args);
+  const showWithHide = useAutoCallback((message: string, type: ToastType) => {
+    show(message, type);
     hideAfter();
-  };
+  });
+
+  const toastCommandContextValue: ToastCommandContextValue = useMemo(
+    () => ({
+      hide,
+      show: showWithHide,
+    }),
+    [hide, showWithHide],
+  );
+
+  const toastStateContextValue: ToastStateContextValue = useMemo(
+    () => ({
+      message: state.message,
+      type: state.type,
+    }),
+    [state.message, state.type],
+  );
 
   return (
-    <ToastContext value={{ show: showWithHide, hide, ...state }}>
-      {children}
-      {visible && createPortal(<Toast />, document.body)}
-    </ToastContext>
+    <ToastCommandContext.Provider value={toastCommandContextValue}>
+      <ToastStateContext.Provider value={toastStateContextValue}>
+        {children}
+        {visible && createPortal(<Toast />, document.body)}
+      </ToastStateContext.Provider>
+    </ToastCommandContext.Provider>
   );
 });
diff --git a/packages/lib/src/createObserver.ts b/packages/lib/src/createObserver.ts
@@ -3,16 +3,24 @@ type Listener = () => void;
 export const createObserver = () => {
   const listeners = new Set<Listener>();
 
-  // useSyncExternalStore 에서 활용할 수 있도록 subscribe 함수를 수정합니다.
   const subscribe = (fn: Listener) => {
     listeners.add(fn);
+
+    return () => {
+      unsubscribe(fn);
+    };
   };
 
   const unsubscribe = (fn: Listener) => {
     listeners.delete(fn);
   };
 
-  const notify = () => listeners.forEach((listener) => listener());
+  const notify = () => {
+    listeners.forEach((listener) => listener());
+  };
 
-  return { subscribe, notify };
+  return {
+    subscribe,
+    notify,
+  };
 };
diff --git a/packages/lib/src/equals/deepEquals.ts b/packages/lib/src/equals/deepEquals.ts
@@ -1,3 +1,24 @@
+import { compareArrays, compareObjects, dispatchWithCondition, isArray, isObject } from "../utils";
+
+/**
+ * 두 값의 깊은 비교를 수행
+ *
+ * - 기본 타입 값들을 정확히 비교해야 한다
+ * - 배열을 정확히 비교해야 한다
+ * - 객체를 정확히 비교해야 한다
+ * - 중첩된 구조를 정확히 비교해야 한다
+ */
 export const deepEquals = (a: unknown, b: unknown) => {
-  return a === b;
+  return dispatchWithCondition<[typeof a, typeof b], boolean>(
+    // 두 값이 정확히 같은지 확인 (참조가 같은 경우)
+    [([a, b]) => Object.is(a, b), () => true],
+    // 둘 다 객체가 아니면 false
+    [([a, b]) => !isObject(a) || !isObject(b), () => false],
+    // 서로 다른 타입을 받을 경우 false (ex: a: [], b: {} 인 경우 false)
+    [([a, b]) => isArray(a) !== isArray(b), () => false],
+    // 둘 다 배열이면 배열 비교
+    [([a, b]) => isArray(a) && isArray(b), ([a, b]) => compareArrays(a as unknown[], b as unknown[], deepEquals)],
+    // 둘 다 객체면 객체 비교
+    ([a, b]) => compareObjects(a as object, b as object, deepEquals),
+  )([a, b]);
 };
diff --git a/packages/lib/src/equals/shallowEquals.ts b/packages/lib/src/equals/shallowEquals.ts
@@ -1,3 +1,23 @@
+import { compareArrays, compareObjects, dispatchWithCondition, isArray, isObject } from "../utils";
+
+/**
+ * 두 값의 얕은 비교를 수행
+ *
+ * - 기본 타입 값들을 정확히 비교해야 한다
+ * - 배열을 얕게 비교해야 한다
+ * - 중첩된 구조를 깊게 비교하지 않아야 한다
+ */
 export const shallowEquals = (a: unknown, b: unknown) => {
-  return a === b;
+  return dispatchWithCondition<[typeof a, typeof b], boolean>(
+    // 두 값이 정확히 같은지 확인 (참조가 같은 경우)
+    [([a, b]) => Object.is(a, b), () => true],
+    // 둘 다 객체가 아니면 false
+    [([a, b]) => !isObject(a) || !isObject(b), () => false],
+    // 서로 다른 타입을 받을 경우 false (ex: a: [], b: {} 인 경우 false)
+    [([a, b]) => isArray(a) !== isArray(b), () => false],
+    // 둘 다 배열이면 배열 비교
+    [([a, b]) => isArray(a) && isArray(b), ([a, b]) => compareArrays(a as unknown[], b as unknown[])],
+    // 둘 다 객체면 객체 비교
+    ([a, b]) => compareObjects(a as object, b as object),
+  )([a, b]);
 };
diff --git a/packages/lib/src/hocs/deepMemo.ts b/packages/lib/src/hocs/deepMemo.ts
@@ -1,5 +1,8 @@
 import type { FunctionComponent } from "react";
 
+import { deepEquals } from "../equals";
+import { memo } from "./memo";
+
 export function deepMemo<P extends object>(Component: FunctionComponent<P>) {
-  return Component;
+  return memo(Component, deepEquals);
 }