akanjs 2.2.4-rc.4 → 2.2.4

package/ui/InfiniteScroll.test.tsx

@@ -0,0 +1,155 @@
+import { afterEach, beforeAll, describe, expect, mock, test } from "bun:test";
+import type { InfiniteScrollProps } from "./InfiniteScroll";
+
+type Effect = () => (() => void) | undefined;
+
+const effectQueue: Effect[] = [];
+const effectCleanups: Array<() => void> = [];
+let hookIndex = 0;
+const hookStates: unknown[] = [];
+let latestObserver: FakeIntersectionObserver | undefined;
+const originalIntersectionObserver = globalThis.IntersectionObserver;
+
+const fakeElement = { nodeType: 1, nodeName: "DIV" } as Element;
+
+const resetHooks = () => {
+  hookIndex = 0;
+  hookStates.length = 0;
+  effectQueue.length = 0;
+};
+
+const flushEffects = () => {
+  for (const effect of effectQueue.splice(0)) {
+    const cleanup = effect();
+    if (cleanup) effectCleanups.push(cleanup);
+  }
+};
+
+const tick = async () => {
+  await Promise.resolve();
+  await Promise.resolve();
+};
+
+class FakeIntersectionObserver {
+  observed: Element[] = [];
+
+  constructor(private readonly callback: IntersectionObserverCallback) {
+    latestObserver = this;
+  }
+
+  observe = (element: Element) => {
+    this.observed.push(element);
+  };
+
+  disconnect = () => {
+    this.observed = [];
+  };
+
+  emit = (isIntersecting = true) => {
+    this.callback(
+      [{ isIntersecting, target: this.observed[0] ?? fakeElement } as IntersectionObserverEntry],
+      this as unknown as IntersectionObserver,
+    );
+  };
+}
+
+const assignRef = (ref: unknown) => {
+  if (typeof ref === "function") {
+    ref(fakeElement);
+    return;
+  }
+  if (ref && typeof ref === "object" && "current" in ref) {
+    (ref as { current: Element | null }).current = fakeElement;
+  }
+};
+
+const createElement = (type: unknown, props: Record<string, unknown> = {}) => {
+  assignRef(props.ref);
+  return { type, props };
+};
+
+beforeAll(() => {
+  mock.module("react", () => ({
+    Fragment: ({ children }: { children: unknown }) => children,
+    useEffect: (effect: Effect) => {
+      effectQueue.push(effect);
+    },
+    useRef: <T,>(initial: T) => {
+      const index = hookIndex++;
+      if (!hookStates[index]) hookStates[index] = { current: initial };
+      return hookStates[index] as { current: T };
+    },
+    useState: <T,>(initial: T) => {
+      const index = hookIndex++;
+      if (hookStates[index] === undefined)
+        hookStates[index] = typeof initial === "function" ? (initial as () => T)() : initial;
+      const setState = (next: T | ((prev: T) => T)) => {
+        const prev = hookStates[index] as T;
+        hookStates[index] = typeof next === "function" ? (next as (value: T) => T)(prev) : next;
+      };
+      return [hookStates[index] as T, setState] as const;
+    },
+  }));
+  mock.module("react/jsx-dev-runtime", () => ({
+    Fragment: ({ children }: { children: unknown }) => children,
+    jsxDEV: createElement,
+  }));
+  mock.module("react/jsx-runtime", () => ({
+    Fragment: ({ children }: { children: unknown }) => children,
+    jsx: createElement,
+    jsxs: createElement,
+  }));
+  mock.module("react-icons/bi", () => ({
+    BiLoaderAlt: (props: Record<string, unknown>) => createElement("BiLoaderAlt", props),
+  }));
+});
+
+afterEach(() => {
+  for (const cleanup of effectCleanups.splice(0)) cleanup();
+  latestObserver = undefined;
+  resetHooks();
+  Object.defineProperty(globalThis, "IntersectionObserver", {
+    value: originalIntersectionObserver,
+    configurable: true,
+  });
+});
+
+const renderInfiniteScroll = async (props: InfiniteScrollProps) => {
+  Object.defineProperty(globalThis, "IntersectionObserver", {
+    value: FakeIntersectionObserver,
+    configurable: true,
+  });
+  const { InfiniteScroll } = await import("./InfiniteScroll");
+  hookIndex = 0;
+  const result = InfiniteScroll(props);
+  flushEffects();
+  return result;
+};
+
+describe("InfiniteScroll", () => {
+  test("loads the next page once when the sentinel intersects", async () => {
+    const addPageCalls: number[] = [];
+    const pageSelections: number[] = [];
+
+    await renderInfiniteScroll({
+      total: 30,
+      currentPage: 1,
+      itemsPerPage: 10,
+      onAddPage: async (page) => {
+        addPageCalls.push(page);
+      },
+      onPageSelect: (page) => {
+        pageSelections.push(page);
+      },
+      children: "items",
+    });
+
+    expect(latestObserver?.observed).toHaveLength(1);
+
+    latestObserver?.emit();
+    await tick();
+
+    expect(addPageCalls).toEqual([2]);
+    expect(pageSelections).toEqual([2]);
+  });
+});

package/ui/InfiniteScroll.tsx

@@ -37,6 +37,7 @@ export const InfiniteScroll = ({
     };
   }, []);
 
+  // TODO: 여기 작동구조 이상함. 수정 필요
   const fetchMoreItems = async () => {
     if (isFetching) return;
     const nextPage = page.current + 1;

package/ui/Input.tsx

@@ -66,7 +66,7 @@ export const Input = ({
       : validateResult === false
         ? l("base.invalidValueError")
         : validateResult;
-  
+  // const invalidMessage = l("base.invalidValueError");
   const statusClass =
     inputStyleType === "bordered"
       ? status === "error"
@@ -117,6 +117,7 @@ export const Input = ({
         className={clsx(
           `b-5 text-base-content outline-hidden duration-300 focus:border-primary focus:outline-hidden ${icon && ""}`,
           inputType,
+          // statusClass,
           inputClassName,
         )}
       />
@@ -589,9 +590,15 @@ const Number = ({
           value={formatValue}
           onKeyDown={handleKeyDown}
           onBlur={(e) => {
+            // if (rest.max !== undefined && parsedValue > parseFloat(rest.max as string)) {
+            //   e.target.value = formatter ? formatter(String(rest.max)) : String(rest.max);
+            // } else if (rest.min !== undefined && parsedValue < parseFloat(rest.min as string)) {
+            //   e.target.value = formatter ? formatter(String(rest.min)) : String(rest.min);
+            // }
             if (firstFocus && value) setFirstFocus(false);
           }}
           onChange={(e) => {
+            //string만 허용
             const parsedValue = parser ? parser(e.target.value) : e.target.value;
             setFormatValue(formatter ? formatter(parsedValue) : e.target.value);
             onChange(parser ? parseFloat(parsedValue) : parseFloat(e.target.value), e);

package/ui/Layout/BottomTab.tsx

@@ -21,7 +21,7 @@ export interface BottomTabProps {
 
 export const BottomTab = ({ className, tabs, height = 64 }: BottomTabProps) => {
   const { lang, path } = usePage();
-  
+  //ssr 에러나서 꼼짝없이 쓴거임. 페이지 이동에 대응안됨.
   const [isRendered, setIsRendered] = useState<boolean>(false);
   const isActiveTab = (tabHref: string) => {
     if (!isRendered) return false;
@@ -56,7 +56,7 @@ export const BottomTab = ({ className, tabs, height = 64 }: BottomTabProps) => {
             <div className="indicator">
               {isActiveTab(tab.href) ? (tab.activeIcon ?? tab.icon) : tab.icon}
               {tab.notiCount && tab.notiCount > 0 ? (
-                
+                // <div className="absolute top-1 right-2 bg-error  w-5 h-5 rounded-full flex items-center justify-center text-base-100">
                 <div className="indicator-item flex size-2 items-center justify-center rounded-full bg-secondary text-[10px] text-base-100">
                   {/* {tab.notiCount > 99 ? "99+" : tab.notiCount} */}
                 </div>

package/ui/Link/SsrLink.tsx

@@ -44,7 +44,8 @@ export default function SsrLink({
         [activeClassName ?? ""]: activeExact ? currentPath === path : currentPath.startsWith(path),
       })}
       href={isExternal ? href : href.startsWith("#") ? href : requestHref}
-
+      // passHref
+      // replace={replace}
       {...props}
       onClick={(event) => {
         props.onClick?.(event);

package/ui/Load/Page.tsx

@@ -29,7 +29,7 @@ const Page: <Return>(props: PageProps<Return>) => ReactNode =
                 error instanceof Error ? error.message : typeof error === "string" ? error : "Unknown error";
               if (message === "NEXT_REDIRECT") reject(error);
               else {
-                
+                // eslint-disable-next-line no-console
                 console.error(error);
                 resolve(<div className="text-red-500">{message}</div>);
               }

package/ui/Load/PageCSR.tsx

@@ -31,6 +31,7 @@ export const PageCSR = <Return,>({ of, loader, render, loading, noCache = false
         setFetchState({ fulfilled: true, value: ret });
         setFetchedData(of, ret, location.pathname);
       } catch {
+        // onError?.(content);
       }
     })();
   }, []);

package/ui/Load/Units.tsx

@@ -158,9 +158,10 @@ function Render<RefName extends string, Light extends { id: string }>({
     },
     onPageSelect: (page: number) => {
       void storeDo[namesOfSlice.setPageOfModel](page);
-      
+      // if (scrollToTop) {
       window.parent.postMessage({ type: "pathChange", page }, "*");
       window.scrollTo({ top: 0, behavior: "instant" });
+      // }
     },
     reverse,
   };

package/ui/Load/View.tsx

@@ -78,6 +78,7 @@ function Render<T extends string, Full extends { id: string }>({
   ) : renderModel ? (
     <div className={clsx("w-full", className)}>{renderView(renderModel)}</div>
   ) : null;
+  // <>{loading}</>
 }
 
 export default function View<T extends string, Full extends { id: string }>({
@@ -87,7 +88,7 @@ export default function View<T extends string, Full extends { id: string }>({
   loading,
   renderView,
 }: ViewProps<T, Full>) {
-  
+  //get Props
   const props: ViewProps<T, Full> = {
     className,
     view,

package/ui/Menu.tsx

@@ -45,8 +45,8 @@ export const Menu = ({
   onMouseOver,
   onMouseLeave,
 }: MenuProps) => {
-  const [expandedKey, setExpandedKey] = useState<string>(); 
-  const [currentKey, setCurrentKey] = useState<string | null>(defaultSelectedKeys?.[0] ?? null); 
+  const [expandedKey, setExpandedKey] = useState<string>(); // 서브메뉴
+  const [currentKey, setCurrentKey] = useState<string | null>(defaultSelectedKeys?.[0] ?? null); // 선택된 메뉴
   const modeClassName = mode === "horizontal" ? "menu-horizontal flex-row " : "bg-base-200";
   const menuRef = useRef<HTMLDivElement | null>(null);
   const LiRefs = useRef<HTMLLIElement[]>([]);
@@ -64,6 +64,7 @@ export const Menu = ({
       ? "w-full h-full bg-red-500 btn btn-ghost px-2 m-0 hover:bg-primary/20 btn btn-ghost text-primary-focus font-normal"
       : "w-full text-center duration-300 whitespace-nowrap btn btn-ghost text-primary-focus font-normal";
 
+  // const activeClassName = activeStyle === "active" ? "[&>div]:bg-primary/20 [&>div]:text-primary-focus" : "bordered";
   const activeClassName =
     activeStyle === "active"
       ? "bg-primary text-primary-focus"
@@ -73,6 +74,7 @@ export const Menu = ({
 
   const [overflowMenuItems, setOverflowMenuItems] = useState<MenuItem[]>([]);
 
+  // 초기화. 각각 아이템의 너비를 구함
   useLayoutEffect(() => {
     if (mode !== "horizontal") return;
     const menu = menuRef.current;
@@ -86,6 +88,7 @@ export const Menu = ({
     checkOverflow();
   }, []);
 
+  // 브라우저 너비가 줄어들면, overflowMenuItems에 추가
   useEffect(() => {
     checkOverflow();
   }, [innerWidth]);
@@ -94,7 +97,7 @@ export const Menu = ({
     if (mode !== "horizontal" || !itemWidthsRef.current.length) return;
     const menu = menuRef.current;
     if (!menu) return;
-    
+    // const overflowLiWidth = overflowLiRef?.current?.getBoundingClientRect().width || 0;
     const totalWidth = menu.getBoundingClientRect().width;
     const widths = itemWidthsRef.current;
     const overflowItems: MenuItem[] = [];
@@ -219,7 +222,7 @@ interface OverflowMenuProps {
 
 const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [expandedKey, setExpandedKey] = useState<string>(); 
+  const [expandedKey, setExpandedKey] = useState<string>(); // 서브메뉴
   const handleMouseEnter = () => {
     setIsOpen(true);
   };
@@ -257,7 +260,7 @@ const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
                       }}
                       key={child.key}
                       className="btn btn-ghost flex items-center justify-center text-center font-normal text-primary-focus"
-                      
+                      // className="block font-normal text-center btn-sm text-primary-focus h-fit btn btn-ghost "
                     >
                       {child.label}
                     </div>

package/ui/Model/EditModal.tsx

@@ -80,6 +80,7 @@ const EditModel = <Full,>({
           };
   }, []);
 
+  // if (type === "empty") return null;
   return <LoadingWrapper className={clsx("w-full", className)}>{children}</LoadingWrapper>;
 };
 
@@ -180,18 +181,19 @@ export default function EditModal<Full extends { id: string }>({
         [names.modelViewAt]: (modelEdit as any)[names.modelViewAt] as Date,
       });
     } else {
-      
+      // new
       const crystal = new modelRef().set(modelEdit as Full) as unknown as Full;
       void storeDo[names.newModel](crystal, { modal, setDefault: true, sliceName });
     }
     return () => {
+      // st.do[names.resetModel]();
     };
   }, [modelEdit]);
 
   const handleCancel = useCallback(() => {
     const modelForm = (st.get() as any)[names.modelForm] as Full;
     const form = deepObjectify({ ...modelForm });
-    
+    // await st.do[names.resetModel]();
     void storeDo[names.setModelModal](null);
     if (typeof onCancel === "function") onCancel(form);
     else if (onCancel === "back") router.back();
@@ -244,6 +246,7 @@ export default function EditModal<Full extends { id: string }>({
                     await handleSubmit({ onError });
                   }}
                   onSuccess={() => {
+                    //
                   }}
                 >
                   {modelFormId ? <AiOutlineSave /> : <AiOutlinePlus />}

package/ui/Popconfirm.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useSpring } from "@react-spring/web";
-
+// TODO: 디자인 수정, 테마 적용 안됨
 import { clsx, usePage } from "akanjs/client";
 import { type ButtonHTMLAttributes, type ReactNode, useEffect, useState } from "react";
 import { BiMessageRoundedError } from "react-icons/bi";
@@ -56,16 +56,18 @@ export const Popconfirm = ({
     },
   });
 
+  // popconfirm 위치 조정 (x 좌표가 음수인 경우)
   useEffect(() => {
     const popconfirm = document.querySelector(".popconfirm");
     const popconfirmRect = popconfirm?.getBoundingClientRect();
     const popconfirmDeco = document.querySelector(".popconfirm-deco");
 
+    // popconfirmRect.x 가 좌측 화면 밖으로 나가는 경우
     if (popconfirmRect && popconfirmRect.x < 0) {
       popconfirm?.classList.add("left-0", "right-auto");
       popconfirmDeco?.classList.add("left-10", "left-auto");
     }
-    
+    // popconfirmRect.x 가 우측 화면 밖으로 나가는 경우
     if (popconfirmRect && popconfirmRect.x + popconfirmRect.width > window.innerWidth) {
       popconfirm?.classList.add("left-auto", "right-0");
     }

package/ui/ScreenNavigator.tsx

@@ -24,7 +24,7 @@ const ScreenNavigatorContext = createContext<ScreenNavigatorContextType>({
 });
 
 interface ScreenNavigatorProps {
-  
+  // currentMenu: string;
   children: React.ReactNode;
   setMenu?: (menu: string) => void;
   menus: string[];
@@ -33,6 +33,7 @@ interface ScreenNavigatorProps {
 export const ScreenNavigator = ({
   children,
   setMenu = () => {
+    //
   },
   menus,
 }: ScreenNavigatorProps) => {
@@ -50,7 +51,7 @@ export const ScreenNavigator = ({
   const bind = useDrag(
     ({ first, last, offset: [x], velocity: [vx], direction: [dx], movement: [mx], cancel }) => {
       if (!ref.current) return;
-      
+      //! 메뉴가 3개 이상일 경우 고려해야함
       const deviceWidth = ref.current.clientWidth / 2;
       if (x > 0 || x < -deviceWidth) return;
       if (dx < 1) {

package/ui/Signal/Message.tsx

@@ -1,11 +1,12 @@
 "use client";
 import { PrimitiveRegistry } from "akanjs/base";
-
+// import { isGqlScalar } from "akanjs/base";
 import { fetch, usePage } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import { type ConstantCls, ConstantRegistry } from "akanjs/constant";
 import type { SerializedEndpoint } from "akanjs/signal";
-
+// import { Cnst, constantInfo } from "akanjs/constant";
+// import { fetch, makeRequestExample, SerializedEndpoint } from "akanjs/signal";
 import { useEffect, useMemo, useState } from "react";
 import { AiOutlineDisconnect, AiOutlineFileWord, AiOutlineSend, AiOutlineSwap } from "react-icons/ai";
 import { BiSolidNetworkChart } from "react-icons/bi";

package/ui/Signal/PubSub.tsx

@@ -86,6 +86,8 @@ interface PubSubInterfaceProps {
   refName: string;
   endpointKey: string;
   endpoint: SerializedEndpoint;
+  // gqlArgMetas: ArgMeta[];
+  // uploadArgMetas: ArgMeta[];
 }
 const PubSubInterface = ({ refName, endpointKey, endpoint }: PubSubInterfaceProps) => {
   const returnRef = ConstantRegistry.getModelRef(endpoint.returns.refName, endpoint.returns.modelType);

package/ui/Signal/Response.tsx

@@ -1,4 +1,4 @@
-
+// import { makeResponseExample, SerializedEndpoint } from "akanjs/signal";
 
 import type { SerializedEndpoint } from "akanjs/signal";
 import { useMemo } from "react";

package/ui/Signal/WebSocket.tsx

@@ -14,12 +14,21 @@ interface WebSocketEndpointsProps {
 }
 const WebSocketEndpoints = ({ refName, fetch, openAll }: WebSocketEndpointsProps) => {
   const signal = fetch.serializedSignal[refName];
-  
+  // const tryRoles = st.use.tryRoles();
   const endpointEntries = Object.entries(signal.endpoint)
     .sort(([keyA], [keyB]) => (keyA > keyB ? 1 : -1))
     .filter(([key, endpoint]) => {
       if (endpoint.type === "query" || endpoint.type === "mutation") return false;
-
+      // if (endpoint.guards?.includes("Public") && tryRoles.includes("Public")) return true;
+      // if ((endpoint.guards?.includes("User") || endpoint.guards?.includes("Every")) && tryRoles.includes("User"))
+      //   return true;
+      // if ((endpoint.guards?.includes("Admin") || endpoint.guards?.includes("Every")) && tryRoles.includes("Admin"))
+      //   return true;
+      // if (
+      //   (endpoint.guards?.includes("SuperAdmin") || endpoint.guards?.includes("Every")) &&
+      //   tryRoles.includes("SuperAdmin")
+      // )
+      //   return true;
       return false;
     });
   return (

package/ui/System/Client.tsx

@@ -54,10 +54,16 @@ export const ClientWrapper = ({
   signals = [],
   reconnect = true,
 }: ClientWrapperProps) => {
-
+  // Seed the active locale into the shared Translator before children render.
+  // SSR provides the active-locale dictionary as a prop (serialized via the RSC Flight payload);
+  // this runs in both the SSR render process and the browser, so the first paint is translated
+  // without shipping every locale in the client JS bundle. CSR seeds via the build-time macro instead.
   if (dictionary) {
     Translator.seed(lang, dictionary);
-
+    // On the browser, record the server-resolved locale as the source of truth for usePage()/l().
+    // This keeps client lookups aligned with the seeded + server-rendered locale (no hydration
+    // mismatch) for base-path / cloud routing where the URL segment is not a reliable locale.
+    // Skipped on the server (typeof window === "undefined") where locale is request-scoped.
     if (typeof window !== "undefined") Translator.setActiveLocale(lang);
   }
   useLayoutEffect(() => {
@@ -96,9 +102,9 @@ export const ClientPathWrapper = ({
 }: ClientPathWrapperProps) => {
   const href = location?.href ?? (typeof window !== "undefined" ? window.location.href : "");
   const hash = location?.hash ?? (typeof window !== "undefined" ? window.location.hash : "");
-  const pathname = location?.pathname ?? "/"; 
-  const params = location?.params ?? {}; 
-  const searchParams = location?.searchParams ?? {}; 
+  const pathname = location?.pathname ?? "/"; // ?? usePathname();
+  const params = location?.params ?? {}; // ?? (useParams() as unknown as Record<string, string>);
+  const searchParams = location?.searchParams ?? {}; //?? Object.fromEntries(useSearchParams());
   const search = location?.search ?? (typeof window !== "undefined" ? window.location.search : "");
   const lang = params.lang;
   const firstPath = pathname.split("/")[2];
@@ -111,8 +117,14 @@ export const ClientPathWrapper = ({
     renderLayouts: [],
   };
 
-  const [gestureEnabled, setGestureEnabled] = useState(true);
+  // const { initialize, codepush, statManager } = useCodepush({ serverUrl: process.env.AKAN_PUBLIC_SERVER_URL ?? "" });
 
+  const [gestureEnabled, setGestureEnabled] = useState(true);
+  // useEffect(() => {
+  //   void initialize();
+  //   void codepush();
+  //   void statManager();
+  // }, []);
   return (
     <pathContext.Provider
       value={{
@@ -161,10 +173,24 @@ export const ClientBridge = ({ env, lang, theme, prefix, gaTrackingId }: ClientB
   const searchParams = st.use.searchParams();
   const language = (params.lang as string | undefined) ?? lang;
   const path = `/${pathname.split("/").slice(2).join("/")}`;
-  
+  // const { setTheme, themes, theme: nextTheme } = useTheme();
   useEffect(() => {
     if (uiOperation !== "sleep") return;
+    // const initTheme = async () => {
+    //   console.log("initTheme1", theme);
+    //   if (theme) {
+    //     setTheme(theme);
+    //     return;
+    //   }
+    //   const localTheme = await storage.getItem("theme");
+    //   console.log("localTheme2", localTheme);
+    //   if (typeof localTheme === "string" && themes.includes(localTheme)) {
+    //     console.log("setTheme3", localTheme);
+    //     setTheme(localTheme);
+    //   } else setTheme("system");
+    // };
 
+    // void initTheme();
     setCookie("siteurl", window.location.origin);
     dayjs.locale(language);
     initAuth({ jwt: getBaseSearchParam(searchParams, "jwt") });
@@ -179,7 +205,15 @@ export const ClientBridge = ({ env, lang, theme, prefix, gaTrackingId }: ClientB
     applyThemePolicy(theme ?? "system");
   }, [theme]);
 
+  // useEffect(() => {
+  //   if (storeTheme !== nextTheme) setTheme(storeTheme);
+  // }, [nextTheme]);
+
   useEffect(() => {
+    //theme가 잇으면 theme부터
+    //theme가 있는데 nextTheme가 있으면
+    // if (nextTheme) setTheme(nextTheme);
+    // else if (theme) setTheme(theme);
   }, []);
 
   useEffect(() => {

package/ui/System/Common.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from "bun:test";
+import { createManifestDataUrl, toManifestJson } from "./Common";
+
+describe("manifest helpers", () => {
+  test("converts author-facing camelCase keys to manifest snake_case", () => {
+    expect(
+      toManifestJson({
+        name: "Akan App",
+        shortName: "Akan",
+        startUrl: "/",
+        themeColor: "#ffffff",
+        backgroundColor: "#000000",
+        displayOverride: ["standalone"],
+        icons: [{ src: "/icon.png", sizes: "192x192", type: "image/png" }],
+      }),
+    ).toEqual({
+      name: "Akan App",
+      short_name: "Akan",
+      start_url: "/",
+      theme_color: "#ffffff",
+      background_color: "#000000",
+      display_override: ["standalone"],
+      icons: [{ src: "/icon.png", sizes: "192x192", type: "image/png" }],
+    });
+  });
+
+  test("encodes manifest JSON as a base64 data URL", () => {
+    const href = createManifestDataUrl({ name: "Akan App", shortName: "Akan" });
+    expect(href.startsWith("data:application/manifest+json;base64,")).toBe(true);
+
+    const encoded = href.slice("data:application/manifest+json;base64,".length);
+    expect(JSON.parse(Buffer.from(encoded, "base64").toString("utf8"))).toEqual({
+      name: "Akan App",
+      short_name: "Akan",
+    });
+  });
+});

package/ui/System/Gtag.tsx

@@ -10,11 +10,12 @@ declare const window: {
 export const Gtag = ({ trackingId, debugMode = false }: { trackingId: string; debugMode?: boolean }) => {
   const pathname = st.use.pathname();
   const searchParams = st.use.searchParams();
-  
+  // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
   const pageview = (url: string) => {
     window.gtag?.("config", trackingId, { page_path: url });
   };
 
+  // https://developers.google.com/analytics/devguides/collection/gtagjs/events
   const event = ({
     action,
     category,
@@ -45,13 +46,15 @@ export const Gtag = ({ trackingId, debugMode = false }: { trackingId: string; de
       } else urlSearchParams.set(key, value);
     }
     handleRouteChange(pathname + (urlSearchParams.size ? urlSearchParams.toString() : ""));
+    // const url = pathname + searchParams?.toString();
+    // handleRouteChange(url);
   }, [pathname, searchParams]);
 
   return (
     <>
       <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} />
       <script
-        
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
         dangerouslySetInnerHTML={{
           __html: `
     window.dataLayer = window.dataLayer || [];

package/ui/System/Messages.tsx

@@ -15,7 +15,7 @@ type MessageType = "success" | "error" | "info" | "warning" | "loading";
 interface MessageProps {
   content: ReactNode;
   type?: MessageType;
-  duration: number; 
+  duration: number; // in seconds
   keyForMessage: string;
 }
 
@@ -36,7 +36,7 @@ const Message = ({ content, type = "info" as MessageType, duration, keyForMessag
   const [preBlind, setPreBlind] = useState(false);
   useEffect(() => {
     if (!content) return;
-    
+    // 기존의 timeouts에 key가 있으면, 기존의 timeout을 제거하고 새로운 timeout을 추가한다.
     const existingTimeOut = timeOuts.find((item) => item.key === keyForMessage);
     if (existingTimeOut) {
       clearTimeout(existingTimeOut.timeoutId);