게임모드공유웹 <ModHub> 제작기 - 상단 네비게이션바 구현하기

부트스트랩 설치

CSS를 위해 부트스트랩을 설치

npm install react-bootstrap bootstrap

부트스트랩이란?
웹사이트를 쉽고 빠르게 만들 수 있는 CSS 프레임워크. 반응형 그리드 시스템, 완성된 UI 컴포넌트(버튼, 폼, 네비게이션 등), 자바스크립트 플러그인을 제공해 프론트엔드 개발에 편의성과 효율성을 제공한다.

App.jsx 수정

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>\
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/users">Users</Link></li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/users" element={<Users />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}

function App() {
  return (
    <BrowserRouter>
    <div style={{ paddingTop: '40px' }}>
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />} />
      </Routes>
      </div>
    </BrowserRouter>
  )
}

• 네비게이션을 별도의 Navigation 컴포넌트로 분리해 모듈화했다.
• CSS를 Bootstrap으로 변경하였다.

Navigation.jsx 수정

function Navigation() {
  return (
    <nav style={{ background: '#f0f0f0', padding: '1rem' }}>
      <ul style={{ listStyle: 'none', display: 'flex', gap: '1rem' }}>
        <li><Link to="/">홈</Link></li>
        <li><Link to="/about">소개</Link></li>
        <li><Link to="/users">사용자 목록</Link></li>
      </ul>
    </nav>
  );
}

function Navigation() {
  return (
    <Navbar expand="lg" className="bg-body-tertiary fixed-top">
      <Container>
        <Navbar.Brand as={Link} to="/">모드 허브!</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link as={Link} to="/">모드허브 소개</Nav.Link>
            <Nav.Link as={Link} to="/about">게임 목록</Nav.Link>
            <Nav.Link as={Link} to="/users">개발진</Nav.Link>
            <NavDropdown title="회원가입/로그인" id="basic-nav-dropdown">
              <NavDropdown.Item as={Link} to="/action/3.1">로그인</NavDropdown.Item>
              <NavDropdown.Item as={Link} to="/action/3.2">카카오로 로그인</NavDropdown.Item>
              <NavDropdown.Item as={Link} to="/action/3.3">회원가입</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item as={Link} to="/action/3.4">로그인 문제 해결</NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

• Bootstrap 적용
• 토글버튼, 드롭다운, 로고 영역 추가
• 화면 크기에 따라 창 조절되도록 설정 추가
  • <Navbar expand="lg">
  • <Navbar.Toggle>
  • <Navbar.Collapse>