Feat: 초기 레이아웃 설정

client/.eslintrc.json

@@ -20,6 +20,12 @@
   },
   "rules": {
     "react/react-in-jsx-scope": 0,
-    "react/jsx-uses-react": 0
+    "react/jsx-uses-react": 0,
+    "prettier/prettier":[
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ]
   }
 }

client/package.json

@@ -9,6 +9,7 @@
     "node-sass": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

client/src/App.js

@@ -1,10 +1,17 @@
 import './App.scss';
+import { Route, Routes } from 'react-router-dom';
+import Layout from './components/layout/js/Layout';
+import Home from './components/home/js/Home';
 
 function App() {
   return (
-    <div className="App">
-      <div></div>
-    </div>
+    <>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+        </Route>
+      </Routes>
+    </>
   );
 }
 

client/src/components/footer/css/footer.scss

@@ -0,0 +1,8 @@
+footer{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid black;
+}

client/src/components/footer/js/Footer.js

@@ -0,0 +1,9 @@
+import '../css/footer.scss';
+
+export default function Footer() {
+  return (
+    <>
+      <footer>Footer</footer>
+    </>
+  );
+}

client/src/components/header/css/header.scss

@@ -0,0 +1,14 @@
+header{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  width: 100%;
+  height: 53px;
+  border: 1px solid black;
+  z-index: 5050;
+  top: 0;
+  left: 0;
+  right: 0;
+}

client/src/components/header/css/nav.scss

@@ -0,0 +1,8 @@
+nav{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  max-width: 1264px;
+  border: 1px solid red;
+}

client/src/components/header/js/Header.js

@@ -0,0 +1,12 @@
+import '../css/header.scss';
+import Nav from './Nav';
+
+export default function Header() {
+  return (
+    <>
+      <header>
+        <Nav />
+      </header>
+    </>
+  );
+}

client/src/components/header/js/Nav.js

@@ -0,0 +1,9 @@
+import '../css/nav.scss';
+
+export default function Nav() {
+  return (
+    <>
+      <nav>Nav</nav>
+    </>
+  );
+}

client/src/components/home/js/Home.js

@@ -0,0 +1,9 @@
+import '../css/home.scss';
+
+export default function Home() {
+  return (
+    <>
+      <div>Home</div>
+    </>
+  );
+}

client/src/components/layout/css/layout.scss

@@ -0,0 +1,8 @@
+.appLayout{
+  box-sizing: border-box;
+	width: 100vw;
+  height: 100vh;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 53px 1fr 250px;
+}

client/src/components/layout/js/Layout.js

@@ -0,0 +1,20 @@
+import '../css/layout.scss';
+import { Outlet } from 'react-router-dom';
+import Header from '../../header/js/Header';
+import Main from '../../main/js/Main';
+import Footer from '../../footer/js/Footer';
+
+export default function Layout() {
+  return (
+    <>
+      <div className="appLayout">
+        <Header />
+        <div />
+        <Main>
+          <Outlet />
+        </Main>
+        <Footer />
+      </div>
+    </>
+  );
+}

client/src/components/main/css/main.scss

@@ -0,0 +1,10 @@
+main{
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  min-height: calc(100vh - 53px - 250px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid black;
+}

client/src/components/main/js/Main.js

@@ -0,0 +1,12 @@
+import '../css/main.scss';
+import { Outlet } from 'react-router-dom';
+
+export default function Main() {
+  return (
+    <>
+      <main>
+        <Outlet />
+      </main>
+    </>
+  );
+}

client/src/index.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );