Merge pull request #161 from IT-Cotato/feat/COT-54-change-global-back…

…ground

Feat/cot 54 change global background

src/App.tsx

@@ -14,7 +14,6 @@ import ReadyState from '@components/ReadyState';
 import NotFound from '@components/NotFound';
 
 import CotatoThemeProvider from '@theme/context/CotatoThemeProvider';
-import GlobalBackgroundSvgComponent from '@components/GlobalBackgroundSvgComponent';
 import { FAQ } from '@pages/FAQ';
 import { CotatoGlobalFab } from '@components/CotatoGlobalFab';
 import Projects from '@pages/Projects/Projects';
@@ -25,6 +24,7 @@ import CSRoutes from '@pages/CS/CSRoutes';
 import { About } from '@pages/About';
 import 'react-toastify/dist/ReactToastify.css';
 import { ToastContainer } from 'react-toastify';
+import Background from '@components/Background';
 
 function App() {
   //
@@ -54,9 +54,10 @@ function App() {
       <CotatoThemeProvider>
         <GlobalStyle />
         <ToastContainer position="bottom-right" autoClose={3000} />
+        <Background />
+
         <Header />
         <AgreementConfirmDialog />
-        <GlobalBackgroundSvgComponent />
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/projects" element={<Projects />} />
@@ -74,6 +75,7 @@ function App() {
           <Route path="/signin" element={<Login />} />
           <Route path="/*" element={<NotFound />} />
         </Routes>
+
         {isInAttendanceList ? <AttendanceFab /> : <CotatoGlobalFab />}
       </CotatoThemeProvider>
     </div>

src/components/Background.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box, Stack } from '@mui/material';
+import { THEME_CHANGE_TRANSITION } from '@theme/constants/constants';
+import { useTheme } from 'styled-components';
+import lightBackgroundImage from '@/assets/light_background.svg';
+import darkBackgroundImage from '@/assets/dark_background.svg';
+import useCotatoTheme from '@/hooks/useCotatoTheme';
+
+//
+//
+//
+
+const Background = () => {
+  const theme = useTheme();
+
+  //
+  const { theme: cotatoTheme } = useCotatoTheme();
+
+  //
+  //
+  //
+
+  return (
+    <Stack
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100vh',
+        zIndex: -1,
+        backgroundRepeat: 'repeat',
+        backgroundSize: 'cover',
+        backgroundColor: theme.colors.common.white,
+        transition: THEME_CHANGE_TRANSITION,
+      }}
+    >
+      <Box
+        component="img"
+        src={cotatoTheme === 'light' ? lightBackgroundImage : darkBackgroundImage}
+        sx={{
+          objectFit: 'cover',
+          height: '100vh',
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default Background;