[리액트] 네비게이션 바 적용하기 (화면 구성 구현)

[리액트] 네비게이션 바 적용하기 (화면 구성 구현)

2025. 8. 9. 22:25ㆍReact

병원 예약 및 커뮤니케이션 플랫폼 프로젝트에서 로그인, 회원가입을 제외한 모든 페이지에 적용될 네비게이션 바 개발을 담당했습니다.

이 글에서는 네비게이션 바의 설계부터 구현, 그리고 문제 해결 과정을 정리하였습니다.

DocQ 프로젝트 GitHub

DocQProject

DocQProject has 2 repositories available. Follow their code on GitHub.

github.com

네비게이션 바 설계

🎨 UI 설계

마우스를 메뉴 위에 올리면 색상이 변경됩니다.
서브 메뉴가 드롭다운 형태로 나타나도록 설계하였습니다.
메인(Home)과 게시판은 하위 항목이 없으므로 서브 메뉴를 비웁니다.

📍 네비게이션 바 위치

페이지 상단에 고정됩니다.
<header> 태그로 영역 정의하였습니다.

💡 <head>와 <header> 차이

head: 문서 정보를 담아 브라우저나 검색엔진이 해석하지만, 사용자에게는 보이지 않는 영역

header: 웹페이지 상단의 콘텐츠 영역 (로고, 네비게이션, 제목 등)

📗 HTML header 구조 및 예시 간단 설명

HTML header 구조 및 예시 간단 설명

HTML 헤더 구조에 대한 자세한 설명HTML(하이퍼텍스트 마크업 언어)은 웹 페이지의 뼈대를 구성하는 언어입니다. 이 중 HTML 문서의 헤더(Header) 부분은 문서의 메타데이터(metadata)를 정의하며, 브라

play-with.tistory.com

네비게이션 바 기초 구성

주요 항목

로고
메인(Home)
게시판
병원
마이페이지
검색 입력창과 검색 버튼

네비게이션 바 구현

로고 넣기

<Link to="/">
  <img
    src="src/assets/Doc-Q.png"
    className="w-20 h-20 me-20"
    style={{ clipPath: "inset(20% 0 20% 0)" }}
    alt="icon"
  />
</Link>

로고 클릭 시 메인 페이지로 이동됩니다.

메인 메뉴 만들기

💡 서브 메뉴 URL은 아직 없어 배열로만 표시하였습니다.

NavbarMenu.jsx

function NavbarMenu({ url, menuName, subMenu = [] }) {
    return (
        <li>
            <Link to={url}>
                <span className="font-bold text-2xl px-10 py-10">{menuName}</span>
            </Link>
        </li>
    );
}

NavigationBar.jsx

<div className="flex flex-1 flex-row h-full">
    <ul className="flex flex-row h-full">
        <NavbarMenu url="/" menuName="메인" />
        <NavbarMenu url="/board" menuName="게시판" />
        <NavbarMenu
            url="/mypage"
            menuName="마이 페이지"
            subMenu={["내 정보", "내 예약", "내 병원"]}
        />
        <NavbarMenu
            url="/"
            menuName="병원"
            subMenu={["치과", "안과", "이비인후과", "피부과"]} 
        />
    </ul>
</div>

검색 만들기

💡 아직 백엔드 연동이 안 되어 submit 기능은 구현되지 않았습니다.

<div className="flex flex-row">
    <form role="search" className="flex max-w-md px-5">
        <input
            type="search"
            placeholder="검색..."
            aria-label="Search"
            className="w-full px-3 py-2 border border-gray-300 rounded"
        />
    </form>
    <button className="px-4 py-2 text-white bg-black rounded">
        검색
    </button>
</div>

마우스 오버 효과

📗 [Javascript] 마우스 이벤트(event) 종류

[Javascript] 마우스 이벤트(event) 종류

마우스 이벤트의 종류를 알아보고, 각 이벤트들이 언제 어떻게 동작하는지 정리해 보았습니다. 0. 마우스 이벤트의 종류 1. click, mousedown, mouseup 2. dblclick 3. mousemove 4. mouseover, mouseout 5. mouseenter, mous

hianna.tistory.com

onMouseEnter와 onMouseLeave를 통해 마우스 오버 시 색상 변경되도록 하였습니다.

function NavbarMenu({ url, menuName, isSubMenu = false}) {
    const [isActiveSection, setIsActiveSection] = useState(false);

    return (
        <li
            onMouseEnter={() => setIsActiveSection(true)}
            onMouseLeave={() => setIsActiveSection(false)}
        >
            <Link to={url}>
                <span
                    className={`font-bold text-2xl px-10 py-10 transition-colors ${isActiveSection ? "text-blue-600 border-b-4 border-blue-600 pb-4" : ""}`}
                >
                    {menuName}
                </span>
            </Link>
        </li>
    );
}

⚠️ 깜빡거림 문제

border-b-4와 pb-4가 함께 적용되어 높이가 변해 마우스 경계면에서 깜빡거림 발생하였습니다.
pb-4 제거 + border-transparent 사용 ➡️ 높이 변화 없이 색상만 변경

수정 코드

<Link to={url} className="">
    <span
        className={`
            font-bold text-2xl px-10 py-3 border-b-4 transition-colors 
            ${isActiveSection ? "text-blue-600 border-blue-600" : "border-transparent"}
        `}
    >
        {menuName}
    </span>
</Link>

하위 메뉴(서브 메뉴) 드롭다운

부모 메뉴: relative
서브 메뉴: absolute
마우스 오버 시 하위 메뉴를 표시합니다.

function NavbarMenu({ url, menuName, subMenu = [] }) {
  const [isActiveSection, setIsActiveSection] = useState(false);
  const isSubMenuActive = isActiveSection && subMenu.length !== 0;

  return (
    <li
      className={`flex items-center h-full ${isSubMenuActive ? "relative" : ""}`}
      onMouseEnter={() => setIsActiveSection(true)}
      onMouseLeave={() => setIsActiveSection(false)}
    >
      <Link to={url}>
        <span
          className={`font-bold text-2xl px-10 py-3 border-b-4 transition-colors ${
            isActiveSection ? "text-blue-600 border-blue-600" : "border-transparent"
          }`}
        >
          {menuName}
        </span>
      </Link>

      {isSubMenuActive && (
        <ul className="absolute top-full left-0 flex flex-col justify-center items-center bg-white shadow w-full">
          {subMenu.map((item, index) => (
            <li key={index} className="font-bold my-5 mx-3">
              {item}
            </li>
          ))}
        </ul>
      )}
    </li>
  );
}

보완점 및 향후 계획

이번 구현에서는 네비게이션 바의 전반적인 구조 설계 ➡️ 시맨틱 태그 적용 ➡️ hover까지 구현 완료했습니다.
다만 서브 메뉴 항목은 현재 페이지 이동 불가, 검색 기능도 UI만 구현된 상태입니다.

앞으로 개선할 점

백엔드 연동
- 서버에서 서브 메뉴 데이터 동적 렌더링
- 서브 메뉴 클릭 시 해당 페이지로 이동 가능하도록 라우팅 설정
검색 기능
- 검색어 입력 후 버튼 클릭 또는 Enter 시 /search 페이지로 이동
- 서버에서 검색 결과 받아 병원 리스트 출력

'React' 카테고리의 다른 글

useInfiniteQuery ➕ useInView로 무한 스크롤 구현하기 (0)	2025.08.26
[리액트] 내비게이션 바 검색 구현 (feat. <form> 태그 , 필요한 순간은?) (0)	2025.08.19
[리액트] 로그인 이벤트 처리하기 (API 연동, 에러 처리, 비밀번호 암호화, 페이지 이동) (0)	2025.08.13
[리액트] 백엔드 API 호출 (feat. Get 요청) (0)	2025.08.11
[리액트] fetch와 axios 차이 (2)	2025.08.11

한걸음 🌱