『Server 06 』[React] 상단 메뉴바

📖 개요

Client 에서는 사이드 메뉴를 만들어 봤다.

『Client 02 』 [React] [Electron] React 사이드 메뉴, Electron Icon 변경하기

Server 웹페이지는 상단 메뉴바로 만들어 보자!

 

완성된 화면 보기 👉 React

 

📁 폴더 구조

 

💻 App.js

Route를 먼저 설정하자. 로그인 페이지 제외하고는 모든 페이지에서 메뉴바를 보여주고 싶어서 다음과 같이 라우트 설정을 했다. 

이 때 사용한 것을 "Path Parameter" 라고 한다. Path Parameter란 localhost/main, localhost/1234 와 같이, 라우트 경로 끝에 들어가는 각기 다른 idx 값들을 저장하는 매개 변수를 말한다.

•  :  는 Path Parameter가 올 것임을 의미한다.
•  idx  는 해당 Path Parameter의 이름을 의미한다. 변수 명을 짓듯이 임의의 이름을 지정해줄 수 있다.

따라서 아래 코드는 localhost:3000/ 은 로그인 페이지를 보여주고, 그 외 페이지에서는 메뉴바를 보여줄 수 있다.

import React from "react";
import {Route, Routes} from "react-router-dom";
import LoginPage from "./pages/Login/Login_Page";
import Menu from './pages/Menubar'


function App() {

  return (
    <>
      <Routes>
        <Route path ="/" element ={<LoginPage/>}/>
        <Route path =":idx" element ={<Menu/>}/>
      </Routes>

    </>
  );
}

export default App;

💻 Menubar.js

메뉴바의 위치는 css에 의해 정해지기 때문에, js파일은 Client와 똑같다. 

import React from 'react';
import "../css/menu.css";
import Logo from '../image/Logo.png';
import { NavLink } from 'react-router-dom';

const Menu = () => {
  return(
    <>    
      <img src={Logo} width="200" className='logo' alt='logo'/>
      
      <div className='Top-menu'>

          <NavLink to="/main" activeClassName="active"  className='panel' >MAIN</NavLink>
          <NavLink to ="/server"className='panel'>서버 점검 안내</NavLink>
          <NavLink to ="/service"className='panel'>전체 공지 사항</NavLink>
          <NavLink to ="/etc"className='panel'>개인 공지 사항</NavLink>
          <NavLink to ="/template"className='panel'>Template</NavLink>

      </div>
    </>
  );
};


export default Menu;

 

💻 CSS

.logo{
    display: block;
    margin: 30px auto;
}
.Top-menu{
    font-weight: bold;
    display: flex;
    /* flex-direction: row; */
    justify-items: center;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin :0 0px 40px 0px;
    text-decoration: none;
    margin-bottom:50px;
}

.panel {
    width: 150px;
    /* border-radius: 5px; */
    height: 50px;
    display: inline-block;
    background-color: white;
    text-align: center;
    /* margin: 0 auto; */
    line-height: 50px;
    color: black;
    font-size: 14px;

    text-decoration: none;
}

.Top-menu>.active {
    background-color: #0073c1 !important;
    color: white !important;
    box-shadow: 0 0 24px 0 rgb(0 0 0 / 10%), 0 0px 0px 1px rgb(0 0 0 / 2%);

}

.content {
    display: none;
}

.on {
    display: block !important;
}

a{
    transition: box-shadow 1s ;
}

 

🌈 참고 사이트

누락된 사이트 있으면 말씀 부탁드립니다:)

 👉 동적-라우팅Path-Parameter