첫 커밋

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>
+  );
+};