[FIX] App.js merge conflict 해결 (#7)

job1/src/App.js

@@ -5,6 +5,8 @@ import Home from "./View/Home";
 import Laws from "./View/Laws";
 import Board from "./View/Board";
 import News from "./View/News";
+import Login from "./View/Login";
+import MyPage from "./View/MyPage";
 import Write from "./View/Write";
 
 function App() {
@@ -17,6 +19,8 @@ function App() {
           <Route path="/law" element={<Laws />} />
           <Route path="/board" element={<Board />} />
           <Route path="/news" element={<News />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/mypage" element={<MyPage />} />
           <Route path="/write" element={<Write />} />
         </Routes>
       </Router>

job1/src/Main/NavBar.css

@@ -0,0 +1,26 @@
+.nav-container{
+    top: 0;
+    left: 0;
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+}
+
+.navitems-container{
+    display: flex;
+    justify-content: space-between;
+}
+
+.navmenus-list{
+    padding: 1rem;
+}
+
+.navuser-container{
+    display: flex;
+    justify-content: space-between;
+}
+
+.navuser-list{
+    padding: 1rem;
+}

job1/src/Main/NavBar.js

@@ -1,11 +1,29 @@
 import NavItems from "./NavItems";
 import NavUser from "./NavUser";
+import { Link } from "react-router-dom";
+
+import "./NavBar.css";
 
 function NavBar(){
     return(
-        <div>
-            <NavItems/>
-            <NavUser/>
+        <div className="nav-container">
+            <div className="navitems-container">
+                <div className="nav-logo">
+                    <Link to={'/'}>Job 일</Link>
+                </div>
+                <div className="navmenus">
+                    <Link className="navmenus-list" to={'/law'}>법률</Link>
+                    <Link className="navmenus-list" to={'/board'}>게시판</Link>
+                    <Link className="navmenus-list" to={'/news'}>새소식/뉴스</Link>
+                </div>
+            </div>
+
+            <div className="navuser-container">
+                <Link className="navuser-list" to={'/login'} >로그인</Link>
+                <div className="navuser-list">
+                    <Link to={'/mypage'}>마이페이지</Link>
+                </div>
+            </div>
         </div>
     )
 }

job1/src/Main/NavItems.js

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 
 function NavItems(){
     return(
-        <div>
+        <div className="navitems-container">
             <div>
                 <Link to={'/'}>Job 일</Link>
             </div>

job1/src/Main/NavUser.js

@@ -2,10 +2,10 @@ import { Link } from "react-router-dom";
 
 function NavUser(){
     return(
-        <div>
+        <div className="navuser-container">
             <Link to={'/login'} >로그인</Link>
             <div>
-                <Link to={'/mypage'}></Link>
+                <Link to={'/mypage'}>마이페이지</Link>
             </div>
         </div>
     )

job1/src/index.js

@@ -4,7 +4,7 @@ import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
 );