이거 병합하세요

client/src/Components/Menu.js

+import React from 'react'
+import { Navbar, Nav, Button } from 'react-bootstrap';
+
+function Menu() {
+  const userName = "정연우";
+
+  return (
+    <Navbar bg="dark" variant="dark">
+      <Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
+      <div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div>
+      <Nav className="mr-auto">
+        <Nav.Link href="/home">Home</Nav.Link>
+        <Nav.Link href="/profile">Profile</Nav.Link>
+        <Nav.Link href="/hello">Hello</Nav.Link>
+      </Nav>
+      <Button variant="light" className="ml-3">Logout</Button>
+    </Navbar>
+  )
+}
+
+export default Menu

client/src/Pages/HomePage.js

 import React, { useState } from 'react';
-import { Row, Col, Modal, Button, Navbar, Nav } from 'react-bootstrap';
+import { Row, Col, Modal, Button } from 'react-bootstrap';
 import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import ClosedList from '../Components/ClosedList';
 import OpenList from '../Components/OpenList';
 import Chat from '../Components/Chat';
+import Menu from '../Components/Menu';
 // import styled from 'styled-components';
 
 // const List = styled.div`
 //   background: #FFFAFA;
 // `
-const userName = "정연우";
 
 
 function Home() {
@@ -25,20 +25,7 @@ function Home() {
 
   return (
     <>
-      <Navbar bg="dark" variant="dark">
-        <Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand>
-        <div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div>
-        <Nav className="mr-auto">
-          <Nav.Link href="/homepage">Home</Nav.Link>
-          <Nav.Link href="/profilepage">Profile</Nav.Link>
-          <Nav.Link href="/hello">Hello</Nav.Link>
-        </Nav>
-        {/* <Form inline>
-                    <FormControl type="text" placeholder="Search" className="mr-sm-2" />
-                    <Button variant="outline-info">Search</Button>
-                </Form> */}
-        <Button variant="light" className="ml-3">Logout</Button>
-      </Navbar>
+      <Menu />
       <Row className="mr-0">
         <Col className="list" md={5}>
           <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">

client/src/Pages/LogInPage.js

 import React, { useState } from 'react';
 import { Button, Form, Container, Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
+import Menu from '../Components/Menu';
 
 function LogIn() {
     const [validated, setValidated] = useState(false);
@@ -17,10 +18,7 @@ function LogIn() {
 
     return (
         <>
-            <Navbar bg="dark" variant="dark">
-                <Navbar.Brand>YDK Messenger</Navbar.Brand>
-            </Navbar>
-
+            <Menu />
             <Form noValidate validated={validated} onSubmit={handleSubmit}>
                 <Container className="d-flex justify-content-center">
                     <div className="mt-5 p-5 shadow w-75">

client/src/Pages/LoginForm.js

-import React, { useState } from "react";
-import Joi, { validate } from "joi-browser";
-
-const LoginForm = () => {
-  const userSchema = {
-    username: Joi.string().required(),
-    password: Joi.string().required(),
-  };
-
-  const [userInfo, setUserInfo] = useState({
-    username: "",
-    password: "",
-  });
-
-  const handleSubmit = (e) => {
-    e.preventDefault(); // 기본 동작 방지
-  };
-
-  const handleChange = (e) => {
-    // e.target.id: 변경이 일어난 input 태그의 id
-    // e.target.value: 변경이 일어난 input 태그의 값
-    const { id, value } = e.target;
-    const errors = { ...userInfo.errors };
-
-    /* 입력받은 값 유효성 검증 */
-    const obj = { [id]: value }; // 입력받은 값에 
-    const schema = { [id]: userSchema[id] }; // Joi 스키마를 적용하여
-    const { error } = validate(obj, schema); // 유효성 검증
-
-    if(error) errors[id] = error;
-    else delete errors[id];
-
-    /* 입력받은 username 및 password를 state에 저장 */
-    const data = userInfo;
-    data[id] = value; // 점(.) 표기법을 대괄호([]) 표기법으로 사용
-    setUserInfo({ ...data, errors });
-  };
-
-  const buttonValidate = () => {
-    const options = { abortEarly: false, allowUnknown:true };
-    const { error } = Joi.validate(userInfo, userSchema, options);
-
-    // 에러 미발생 시 null 반환
-    if (!error) return null;
-
-    // 에러 발생 시 에러 정보 반환
-    const errors = {};
-    for (let item of error.details) {
-      errors[item.path[0]] = item.message;
-    }
-    return errors;
-  }
-
-  const handleClick = (e) => {
-    e.preventDefault();
-    const validUsername = 'ingyeo';
-    const validPassword = '1234';
-
-    if(validUsername === userInfo.username && validPassword === userInfo.password)
-      alert('로그인 성공!')
-    else 
-      alert('로그인 실패...');
-  }
-
-  return (
-    <div>
-      <h1>Login</h1>
-      <form onSubmit={handleSubmit}>
-        <div className="form-group">
-          <label htmlFor="username">Username</label>{" "}
-          {/* 이 label 태그는 아래 input 태그를 참조함  */}
-          <input
-            onChange={handleChange}
-            id="username"
-            type="text"
-            className="form-control"
-          />
-        </div>
-        <div className="form-group">
-          <label htmlFor="password">Password</label>
-          <input
-            onChange={handleChange}
-            id="password"
-            type="password"
-            className="form-control"
-          />
-        </div>
-        <button 
-          disabled={buttonValidate()}
-          onClick={handleClick}
-          className="btn btn-primary">Login</button>
-      </form>
-    </div>
-  );
-};
-
-export default LoginForm;
\ No newline at end of file

client/src/Pages/ProfilePage.js

 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-
+import Menu from '../Components/Menu';
 import { Image, Button, Container, Form, FormControl, Navbar, Nav } from 'react-bootstrap';
 import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
 
@@ -89,16 +89,7 @@ function ProfilePage() {
 
     return (
         <div>
-            <Navbar bg="dark" variant="dark">
-                <Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand>
-                <div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div>
-                <Nav className="mr-auto">
-                    <Nav.Link href="/homepage">Home</Nav.Link>
-                    <Nav.Link href="/profilepage">Profile</Nav.Link>
-                    <Nav.Link href="/hello">Hello</Nav.Link>
-                </Nav>
-                <Button variant="light" className="ml-3">Logout</Button>
-            </Navbar>
+            <Menu />
 
             {tohome ? <Redirect to='/homepage' /> : ''}
             <Container className="d-flex justify-content-center">

client/src/Pages/SignUpPage.js

 import React, { useState } from 'react';
 import { Button, Form, Container, Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
+import Menu from '../Components/Menu';
 
 function SingUp() {
     const [validated, setValidated] = useState(false);
@@ -17,9 +18,7 @@ function SingUp() {
 
     return (
         <>
-            <Navbar bg="dark" variant="dark">
-                <Navbar.Brand>YDK Messenger</Navbar.Brand>
-            </Navbar>
+            <Menu />
 
             <div>
                 <Form noValidate validated={validated} onSubmit={handleSubmit}>

client/src/index.js

@@ -7,7 +7,7 @@ import ProfilePage from './Pages/ProfilePage';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import LogInPage from './Pages/LogInPage';
-import LoginForm from './Pages/LoginForm';
+// import LoginForm from './Pages/LoginForm';
 import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
 import Hello from './Hello'
 import HomePage from './Pages/HomePage'
@@ -16,11 +16,12 @@ import HomePage from './Pages/HomePage'
 ReactDOM.render(
   <Router>
     <Switch>
-      <Route exact path="/" component={LogInPage} />
-      <Route path="/signuppage" component={SignUpPage} />
-      <Route path="/profilepage" component={ProfilePage} />
+      <Route exact path="/" component={HomePage} />
+      <Route path="/login" component={LogInPage} />
+      <Route path="/signup" component={SignUpPage} />
+      <Route path="/profile" component={ProfilePage} />
       <Route path="/hello" component={Hello} />
-      <Route path="/homepage" component={HomePage} />
+      <Route path="/home" component={HomePage} />
       <Redirect path='/hello' to='/hello' />
     </Switch>
   </Router>,