첫 커밋

src/widgets/sub-layout/index.tsx

@@ -0,0 +1,71 @@
+import { 
+  Fragment,
+  useState
+} from 'react';
+import { Outlet } from 'react-router-dom';
+import { HeaderNavigation } from '@/widgets/navigation/header';
+import { FooterNavigation } from '@/widgets/navigation/footer';
+import { PullToRefresh } from '@/widgets/pull-to-refresh/pull-to-refresh';
+import { useNavigate } from '@/shared/lib/hooks';
+import { useScrollToTop } from '@/shared/lib/hooks/use-scroll-to-top';
+import { HeaderType } from '@/entities/common/model/types';
+export interface ContextType {
+  setOnBack: (onBack: () => void) => void;
+  setHeaderTitle: (title: string) => void;
+  setIsPullToRefreshEnabled: (enabled: boolean) => void;
+  setMenuOn:(on: boolean) => void;
+  setHeaderType: (headerType: HeaderType) => void;
+  setFooterMode:(footMode: boolean) => void;
+  setFooterCurrentPage:(currentPage?: string | null) => void;
+};
+
+export const SubLayout = () => {
+  const { reload } = useNavigate();
+  useScrollToTop();
+  const [onBack, setOnBack] = useState(undefined);
+  const [headerTitle, setHeaderTitle] = useState<string>('');
+  const [isPullToRefreshEnabled, setIsPullToRefreshEnabled] = useState<boolean>(false);
+  const [menuOn, setMenuOn] = useState<boolean>(false);
+  const [headerType, setHeaderType] = useState<HeaderType>(HeaderType.NoHeader);
+  const [footerMode, setFooterMode] = useState<boolean>(false);
+  const [footerCurrentPage, setFooterCurrentPage] = useState<undefined | string | null>(undefined);
+  
+  const wrapperClassName = 'wrapper';
+
+  return (
+    <PullToRefresh 
+      className={ wrapperClassName }
+      onRefresh={ reload } 
+      isPullable={ isPullToRefreshEnabled }
+    >
+      <Fragment>
+        <HeaderNavigation 
+          onBack={ onBack } 
+          headerTitle={ headerTitle } 
+          menuOn={ menuOn }
+          setMenuOn={ setMenuOn } 
+          headerType={ headerType }
+        />
+        <Outlet
+          context={{
+            setOnBack,
+            setHeaderTitle,
+            setIsPullToRefreshEnabled,
+            setMenuOn,
+            setHeaderType,
+            setFooterMode,
+            setFooterCurrentPage
+          }}
+        />
+        {
+          footerMode && 
+          <FooterNavigation
+            setMenuOn={ setMenuOn }
+            footerCurrentPage={ footerCurrentPage }
+          ></FooterNavigation>
+        }
+        
+      </Fragment>
+    </PullToRefresh>
+  );
+};

src/widgets/sub-layout/use-sub-layout.ts

@@ -0,0 +1,75 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ReactNode, useEffect } from 'react';
+import { useOutletContext } from 'react-router';
+import { ContextType } from '.';
+import { FooterItemActiveKey } from '@/entities/common/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+
+export const useSubLayoutContext = () => {
+  return useOutletContext<ContextType>();
+};
+
+export const useSetOnBack = (fn: any) => {
+  const { setOnBack } = useSubLayoutContext();
+  useEffect(() => {
+    setOnBack(() => fn);
+    return () => {
+      setOnBack(() => undefined);
+    };
+  }, [setOnBack]);
+  return { setOnBack };
+};
+
+export const useSetHeaderTitle = (title: string) => {
+  const { setHeaderTitle } = useSubLayoutContext();
+  useEffect(() => {
+    setHeaderTitle(title);
+    return () => setHeaderTitle('');
+  }, [setHeaderTitle]);
+  return { setHeaderTitle };
+};
+
+export const useSetIsPullToRefreshEnabled = (enabled: boolean) => {
+  const { setIsPullToRefreshEnabled } = useSubLayoutContext();
+  useEffect(() => {
+    setIsPullToRefreshEnabled(enabled);
+    return () => setIsPullToRefreshEnabled(false);
+  }, [setIsPullToRefreshEnabled, enabled]);
+  return { setIsPullToRefreshEnabled };
+};
+
+export const useSetMenuOn = (on: boolean) => {
+  const { setMenuOn } = useSubLayoutContext();
+  useEffect(() => {
+    setMenuOn(on);
+    return () => setMenuOn(false);
+  }, [setMenuOn, on]);
+  return { setMenuOn };
+};
+
+export const useSetHeaderType = (headerType: HeaderType) => {
+  const { setHeaderType } = useSubLayoutContext();
+  useEffect(() => {
+    setHeaderType(headerType);
+    return () => setHeaderType(HeaderType.NoHeader);
+  }, [setHeaderType]);
+  return { setHeaderType };
+};
+
+export const useSetFooterMode = (footerMode: boolean) => {
+  const { setFooterMode } = useSubLayoutContext();
+  useEffect(() => {
+    setFooterMode(footerMode);
+    return () => setFooterMode(false);
+  }, [setFooterMode, footerMode]);
+  return { setFooterMode };
+};
+
+export const useSetFooterCurrentPage = (footerCurrentPage?: FooterItemActiveKey | null) => {
+  const { setFooterCurrentPage } = useSubLayoutContext();
+  useEffect(() => {
+    setFooterCurrentPage(footerCurrentPage);
+    return () => setFooterCurrentPage(undefined);
+  }, [setFooterCurrentPage, footerCurrentPage]);
+  return { setFooterCurrentPage };
+};