feat: Sidebar 스타일 및 이벤트 구현, router 개선

client/src/App.tsx

@@ -1,26 +1,29 @@
 import { ReactElement } from 'react';
-import { RouterProvider } from 'react-router-dom';
-import { router } from './Router';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Provider } from 'jotai';
 import styled from 'styled-components';
+
 import Header from './container/Header';
 import Menubar from './container/Menubar';
-import { Provider } from 'jotai';
 
 const Wrapper = styled.div`
   width: 100%;
 `;
 
 const App = (): ReactElement => {
   return (
-    <>
-      <Provider>
+    <Provider>
+      <BrowserRouter>
         <Menubar />
         <Wrapper>
           <Header />
-          <RouterProvider router={router} />
+          <Routes>
+            <Route path="/" element={<div>main</div>}></Route>
+            <Route path="/table" element={<div>table</div>}></Route>
+          </Routes>
         </Wrapper>
-      </Provider>
-    </>
+      </BrowserRouter>
+    </Provider>
   );
 };
 

client/src/container/Header.tsx

@@ -1,10 +1,14 @@
 import { ReactElement } from 'react';
 import styled from 'styled-components';
+
 import Button from '../components/Button';
 import Text from '../components/Text';
-import LongLogo from '../components/LongLogo';
+import LongLogo from '../images/LongLogo.svg';
+
 import { useAtom } from 'jotai';
 import { loginStateAtom } from '../util/GlobalState';
+import { useNavigate } from 'react-router-dom';
+// import { goHome } from '../util/Common';
 
 const Wrapper = styled.div`
   display: flex;
@@ -21,11 +25,15 @@ const FlexGrow3 = styled.div`
 
 const Header = (): ReactElement => {
   const [login, setUserLogin] = useAtom(loginStateAtom);
+  const navigate = useNavigate();
 
+  const goHome = (): void => {
+    navigate('/');
+  };
   return (
     <Wrapper>
       <FlexGrow3>
-        <Button context={<LongLogo />} />
+        <Button context={<img src={LongLogo} />} onClick={goHome} />
       </FlexGrow3>
       {!login && (
         <Button

client/src/container/Menubar.tsx

@@ -1,12 +1,36 @@
 import { ReactElement } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
+import Button from '../components/Button';
+
+import Home from '../images/Home.svg';
+import Table from '../images/Table.svg';
+
 const Wrapper = styled.div`
   height: 100vh;
+  background: #fcfcfc;
+  box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.25);
+  text-align: center;
 `;
 
 const Menubar = (): ReactElement => {
-  return <Wrapper>menu</Wrapper>;
+  const navigate = useNavigate();
+
+  const goHome = (): void => {
+    navigate('/');
+  };
+
+  const goTable = (): void => {
+    navigate('/table');
+  };
+
+  return (
+    <Wrapper>
+      <Button context={<img src={Home} />} margin={'30px 0 0 0'} onClick={goHome} />
+      <Button context={<img src={Table} />} margin={'30px 0 0 0'} onClick={goTable} />
+    </Wrapper>
+  );
 };
 
 export default Menubar;