refactor(front): merge state to useDynStyle

frontend/src/components/pages/converter.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import { Toaster } from "react-hot-toast";
-import { useDynStyle, useStorageState, useToastLimit } from "@/hooks";
 import { ConvertForm } from "@/components/form";
+import { useDynStyle, useToastLimit } from "@/hooks";
 import { Box } from "@mui/material";
+import { Toaster } from "react-hot-toast";
 
 export default function Converter() {
   useToastLimit(1);
-  const [style, _setStyle] = useStorageState("customCSS");
-  useDynStyle(style);
+  useDynStyle();
 
   return (
     <>

frontend/src/components/pages/settings.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import { Box, Button, TextField } from "@mui/material";
-import { useDynStyle, useStorageState } from "@/hooks";
+import { useDynStyle } from "@/hooks";
 
 export default function Settings() {
-  const [style, setStyle] = useStorageState("customCSS");
-  useDynStyle(style);
+  const [style, setStyle] = useDynStyle();
 
   return (
     <Box

frontend/src/hooks/dyn_style.ts

@@ -1,20 +1,24 @@
 import { useInsertionEffect } from "react";
+import { useStorageState } from "@/hooks";
 
 /**
  * Inject CSS dynamically on the client side.
  * # NOTE
  * Frequent style recalculation is inevitable,
  * but this hook can solve the delay problem caused by style injection lifecycle discrepancies.
  *  - See: [useInsertionEffect](https://react.dev/reference/react/useInsertionEffect)
- * @param css
  */
-export function useDynStyle(css: string) {
+export function useDynStyle() {
+  const [style, setStyle] = useStorageState("customCSS");
+
   useInsertionEffect(() => {
     const styleElement = document.createElement("style");
-    styleElement.innerHTML = css;
+    styleElement.innerHTML = style;
     document.head.appendChild(styleElement);
     return () => {
       document.head.removeChild(styleElement);
     };
-  }, [css]);
+  }, [style]);
+
+  return [style, setStyle] as const;
 }