refactor(frontend): extract reusable hooks and page helper modules

vite-frontend/src/hooks/useH5Mode.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+import { DEFAULT_MOBILE_BREAKPOINT } from "@/hooks/useMobileBreakpoint";
+
+const detectH5Mode = (): boolean => {
+  const isMobile = window.innerWidth <= DEFAULT_MOBILE_BREAKPOINT;
+  const isMobileBrowser =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    );
+  const urlParams = new URLSearchParams(window.location.search);
+  const isH5Param = urlParams.get("h5") === "true";
+
+  return isMobile || isMobileBrowser || isH5Param;
+};
+
+export const useH5Mode = (): boolean => {
+  const [isH5, setIsH5] = useState(detectH5Mode);
+
+  useEffect(() => {
+    const checkH5Mode = () => {
+      setIsH5(detectH5Mode());
+    };
+
+    window.addEventListener("resize", checkH5Mode);
+
+    return () => window.removeEventListener("resize", checkH5Mode);
+  }, []);
+
+  return isH5;
+};

vite-frontend/src/hooks/useMobileBreakpoint.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+export const DEFAULT_MOBILE_BREAKPOINT = 768;
+
+export const useMobileBreakpoint = (
+  breakpoint = DEFAULT_MOBILE_BREAKPOINT,
+): boolean => {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+
+    return window.innerWidth < breakpoint;
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const onResize = () => {
+      setIsMobile(window.innerWidth < breakpoint);
+    };
+
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [breakpoint]);
+
+  return isMobile;
+};

vite-frontend/src/hooks/useScrollTopOnPathChange.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const useScrollTopOnPathChange = (): void => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    if (!pathname) {
+      return;
+    }
+
+    try {
+      window.scrollTo({ top: 0, left: 0, behavior: "auto" });
+    } catch {
+      window.scrollTo(0, 0);
+    }
+
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }, [pathname]);
+};

vite-frontend/src/hooks/useWebViewMode.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+import { isWebViewFunc } from "@/utils/panel";
+
+export const useWebViewMode = (): boolean => {
+  const [isWebView, setIsWebView] = useState(false);
+
+  useEffect(() => {
+    setIsWebView(isWebViewFunc());
+  }, []);
+
+  return isWebView;
+};