[ Feat ] router 연결

src/App.tsx

@@ -2,6 +2,7 @@ import { Global, ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useEffect } from 'react';
 
+import { Outlet } from 'react-router-dom';
 import globalStyle from './styles/globalStyle';
 import theme from './styles/theme';
 
@@ -30,6 +31,7 @@ const App = () => {
     <Wrapper>
       <ThemeProvider theme={theme}>
         <Global styles={globalStyle} />
+        <Outlet />
       </ThemeProvider>
     </Wrapper>
   );
@@ -38,6 +40,7 @@ const App = () => {
 export default App;
 
 const Wrapper = styled.div`
+  width: 100vw;
   min-height: calc(var(--vh, 1vh) * 100);
   border: none;
 

src/Router.tsx

@@ -1,5 +1,42 @@
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import App from './App';
+import HomePage from './pages/home/Home';
+import JuniorPromisePage from './pages/juniorPromise/JuniorPromise';
+import JuniorOnboardingPath from './pages/onboarding/juniorOnboarding/JuniorOnboarding';
+import SeniorOnboardingPage from './pages/onboarding/seniorOnboarding/SeniorOnboarding';
+import SeniorProfilePage from './pages/seniorProfile/SeniorProfile';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: 'seniorOnboarding',
+        element: <SeniorOnboardingPage />,
+      },
+      {
+        path: 'juniorOnboarding',
+        element: <JuniorOnboardingPath />,
+      },
+      {
+        path: 'seniorProfile',
+        element: <SeniorProfilePage />,
+      },
+      {
+        path: 'juniorPromise',
+        element: <JuniorPromisePage />,
+      },
+    ],
+  },
+]);
+
 const Router = () => {
-  return <div>Router</div>;
+  return <RouterProvider router={router} />;
 };
 
 export default Router;

src/main.tsx

@@ -1,4 +1,9 @@
+import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
+import Router from './Router.tsx';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Router />
+  </React.StrictMode>,
+);

src/pages/home/Home.tsx

@@ -0,0 +1,5 @@
+const HomePage = () => {
+  return <div>Home</div>;
+};
+
+export default HomePage;

src/pages/juniorPromise/JuniorPromise.tsx

@@ -0,0 +1,5 @@
+const JuniorPromisePage = () => {
+  return <div>JuniorPromise</div>;
+};
+
+export default JuniorPromisePage;

src/pages/onboarding/juniorOnboarding/JuniorOnboarding.tsx

@@ -0,0 +1,5 @@
+const JuniorOnboardingPath = () => {
+  return <div>JuniorOnboarding</div>;
+};
+
+export default JuniorOnboardingPath;

src/pages/onboarding/seniorOnboarding/SeniorOnboarding.tsx

@@ -0,0 +1,5 @@
+const SeniorOnboardingPage = () => {
+  return <div>SeniorOnboarding</div>;
+};
+
+export default SeniorOnboardingPage;

src/pages/seniorProfile/SeniorProfile.tsx

@@ -0,0 +1,5 @@
+const SeniorProfilePage = () => {
+  return <div>SeniorProfile</div>;
+};
+
+export default SeniorProfilePage;