first commit

front/src/layouts/MainLayout.tsx

@@ -0,0 +1,69 @@
+import { makeStyles, tokens, FluentProvider, webLightTheme, webDarkTheme, Toaster, useId } from '@fluentui/react-components';
+import { Outlet } from 'react-router-dom';
+import Header from './components/Header';
+import Sidebar from './components/Sidebar';
+import Footer from './components/Footer';
+import { LayoutProvider, useLayout } from '../context/LayoutContext';
+
+const useStyles = makeStyles({
+  root: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: tokens.colorNeutralBackground2,
+    overflow: 'hidden',
+    height: '100vh',
+  },
+  container: {
+    display: 'flex',
+    flex: '1 1 auto',
+    position: 'relative',
+  },
+  content: {
+    flex: '1 1 auto',
+    padding: '20px',
+    paddingBottom: '64px',
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    height: '100%',
+    width: '100%',
+    minHeight: 0,
+    boxSizing: 'border-box',
+  },
+});
+
+const LayoutContent = ({ toasterId }: { toasterId: string }) => {
+  const styles = useStyles();
+  const { isDarkMode } = useLayout();
+
+  return (
+    <FluentProvider theme={isDarkMode ? webDarkTheme : webLightTheme}>
+      <div className={styles.root}>
+        <Header />
+        <div className={styles.container}>
+          <Sidebar />
+          <main className={styles.content}>
+            <Outlet />
+          </main>
+        </div>
+        <Footer />
+        <Toaster toasterId={toasterId} position="top-end" />
+      </div>
+    </FluentProvider>
+  );
+};
+
+export const MainLayout = () => {
+  const toasterId = useId('toaster');
+  return (
+    <LayoutProvider toasterId={toasterId}>
+      <LayoutContent toasterId={toasterId} />
+    </LayoutProvider>
+  );
+};