feat: header state management using HoC

src/hocs/with-header.tsx

@@ -0,0 +1,18 @@
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import currentPage from '../atoms/current-page';
+import { WithHeaderProps } from '../types/hocs';
+
+export const WithHeader: React.FC<WithHeaderProps> = ({ children, datum }) => {
+    const location = useLocation();
+    const [, setPage] = useAtom(currentPage);
+
+    useEffect(() => {
+        if (location.pathname === datum.uri) {
+            setPage(datum);
+        }
+    }, [datum, location.pathname]);
+
+    return <>{children}</>;
+};

src/types/hocs/index.ts

@@ -1,3 +1,9 @@
+import IRouterDatum from '../../interfaces/router';
+
 export type HoCProps = {
     children?: React.ReactNode;
 };
+
+export type WithHeaderProps = HoCProps & {
+    datum: IRouterDatum;
+};