반응형 내비게이션 - Navbar, lucide-react

 

이전에 만든 Header에 반응형 내비게이션을 추가해서 모바일에도 대응하도록 하기 위한 필수적인 작업이다.

 

 

| Navbar 추가

레이아웃 뼈대는 갖췄으니 이제 사용자가 실제로 페이지 이동이나 사용자 경험(UX)을 할 수 있도록 구성해야 한다.

 

 

frontend/src/componets/Navbar.js

import React, { useState } from 'react';
import { Menu, X } from 'lucide-react'; // 아이콘 (lucide-react 설치 필요)

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="flex items-center justify-between flex-wrap bg-white px-4 py-2 shadow-md">
      <div className="text-xl font-bold text-blue-600">My Project</div>

      <div className="md:hidden">
        <button onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      <div className={`w-full md:flex md:items-center md:w-auto ${isOpen ? "block" : "hidden"}`}>
        <ul className="md:flex md:space-x-6">
          <li><a href="/" className="block py-2 px-3 text-gray-700 hover:text-blue-500">홈</a></li>
          <li><a href="/board" className="block py-2 px-3 text-gray-700 hover:text-blue-500">게시판</a></li>
          <li><a href="/about" className="block py-2 px-3 text-gray-700 hover:text-blue-500">소개</a></li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

 

 

/ lucide-react : 아이콘 컴포넌트 라이브러리이다. 설치가 필요하다. ( npm install lucide-react ) <공식>

Lucide Icons는 Feather Icons에서 파생된 것으로, 깔끔한 벡터 아이콘을 React 컴포넌트로 사용할 수 있게 해준다.

 

/ md:hidden : 화면 폭이 768px 이상일 때 숨김

/ md:flex : 화면 폭이 768px 이상일 때 flex 적용

/ block / hidden : 일반 상태에서 보이거나 숨기기

 

 

| Navbar 적용

 

frontend/src/components/Header.js

import React from 'react';
import Navbar from './Navbar';

const Header = () => {
  return (
    <header>
      <Navbar />
    </header>
  );
};

export default Header;

 

 

브라우저 화면이 768px 이하가 되니 이처럼 메뉴가 아이콘으로 바뀐다. 768px 이상일때 메뉴가 flex했다가 이하가 되면 햄버거 버튼으로 바뀐다.

아이콘을 클릭하면 세로 형태로 메뉴가 보인다. 모바일이나 작은 화면에 반응하도록 한 것이다.