[ToyProject] 내비게이션 바

화면 상단 내비게이션 바 코드 리뷰 🚀

이번 포스팅에서는 노벨상 탐색기 프로젝트의 내비게이션 바 구현과 관련된 주요 파일들의 코드 리뷰를 할 것입니다.내비게이션 바는 사용자 경험을 높이고 페이지 간의 이동을 직관적으로 만들어주는 중요한 UI 요소입니다. 리뷰 대상은 다음과 같습니다:

• Nav.js: 내비게이션 바의 구조를 정의한 컴포넌트
• Nav.css: 내비게이션 바의 스타일링
• About.js: "About" 페이지의 콘텐츠를 제공하는 컴포넌트
• Contact.js: "Contact" 페이지의 콘텐츠를 제공하는 컴포넌트
• App.js: 내비게이션 바 및 라우팅 설정 적용

---

1️⃣ Nav.js - 내비게이션 바 구조

import React from "react";
import { Link } from "react-router-dom";
import "./Nav.css";

function Nav() {
  return (
    <div className="navbar">
      <Link to="/" className="navbarTitle">
        <h1>Nobel Winners</h1>
      </Link>
      <Link className="navbarMenu" to="/about">
        About
      </Link>
      <Link className="navbarMenu" to="/contact">
        Contact
      </Link>
    </div>
  );
}

export default Nav;

📌 리뷰 포인트

1. 컴포넌트 구조

   • <Link>를 사용하여 React Router와의 통합을 매끄럽게 구현하였습니다.
   • 각 메뉴는 의미에 맞는 클래스 이름을 부여받아 스타일링 및 식별이 용이합니다.

2. UI/UX 고려

   • Nobel Winners는 h1 태그로 정의되어 화면의 중심 요소로 자리 잡습니다.
   • "About"와 "Contact" 링크는 적절한 텍스트로 표현되어 내비게이션 용도를 명확히 합니다.

3. 코드 개선 제안

   • 활성화된 메뉴 표시: NavLink를 사용해 현재 활성화된 메뉴를 강조하면 UX가 더욱 향상됩니다.

     import { NavLink } from "react-router-dom";
     
     <NavLink 
       to="/about" 
       className={({ isActive }) => isActive ? "navbarMenu active" : "navbarMenu"}
     >
       About
     </NavLink>

     위와 같이 활성 상태에 따라 추가 클래스(active)를 적용하면 현재 페이지를 직관적으로 표시할 수 있습니다.

---

2️⃣ Nav.css - 내비게이션 바 스타일링

.navbar {
  width: 100%;
  background-color: white;
  padding: 15px 0;
  display: flex;
  align-items: center; /* 수직 중앙 정렬 */
  text-align: left;
}

.navbarTitle {
  text-decoration: none; /* Link 태그의 기본 밑줄 제거 */
}

.navbarTitle h1 {
  font-size: 36px; /* Nobel Winners의 크기를 더 크게 설정 */
  font-weight: bold; /* 글자 굵게 설정 */
  margin-left: 20px;
  color: black;
  text-decoration: none; /* h1 태그의 밑줄도 제거 */
}

.navbarTitle h1:hover {
  text-decoration: underline; /* 마우스를 올리면 밑줄 표시 */
}

.navbarMenu {
  color: black;
  margin-left: 20px;
  font-size: 18px; /* 나머지 메뉴의 크기는 기본보다 작게 설정 */
  text-decoration: none;
}

.navbarMenu:hover {
  text-decoration: underline;
}

📌 리뷰 포인트

1. 레이아웃 설계

   • flexbox를 사용해 메뉴를 수평 정렬하고, 텍스트가 가운데 정렬되도록 구현했습니다.

2. 디자인 세부사항

   • Nobel Winners는 더 크고 굵은 글씨로 설정하여 헤더 역할을 강조했습니다.
   • 메뉴 항목(About, Contact)에는 호버 시 밑줄 효과를 추가하여 시각적인 피드백을 제공합니다.

3. 코드 개선 제안

   • 반응형 고려: 모바일 화면에서는 메뉴가 좁게 보일 수 있으므로 미디어 쿼리를 추가해 메뉴를 드롭다운 형식으로 전환하거나 폰트를 조정하는 것이 좋습니다.

     @media (max-width: 768px) {
       .navbar {
         flex-direction: column;
         align-items: flex-start;
         padding: 10px;
       }
       .navbarMenu {
         font-size: 16px;
         margin-left: 0;
         margin-top: 10px;
       }
     }

---

3️⃣ About.js - About 페이지 구현

function About() {
  return (
    <div>
      <h1>About</h1>
      <p>
        The Nobel Prize is a set of prestigious international awards given
        annually in several categories. The prizes were established by the 1895
        will of Alfred Nobel, the inventor of dynamite. The prizes in Physics,
        Chemistry, Physiology or Medicine, Literature, and Peace were first
        awarded in 1901.
      </p>
    </div>
  );
}
export default About;

📌 리뷰 포인트

1. 구조적 완성도

   • 간결하고 명확한 구조로 About 페이지를 설명합니다.

2. 코드 개선 제안

   • 스타일링 추가: About.css 파일을 만들어 텍스트 정렬, 폰트 스타일 등을 세부적으로 지정하면 더욱 완성도를 높일 수 있습니다.
   • 예시:

     .aboutContainer {
       padding: 20px;
       font-family: Arial, sans-serif;
     }

---

4️⃣ Contact.js - Contact 페이지 구현

function Contact() {
  return (
    <div>
      <h1>Contact</h1>
    </div>
  );
}
export default Contact;

📌 리뷰 포인트

1. 구조의 간소화

   • Contact 페이지는 기본적인 틀만 구현되어 있습니다.

2. 코드 개선 제안

   • 폼 추가: 사용자가 연락처나 이메일을 입력할 수 있는 폼을 추가하면 실용성이 향상됩니다.

     function Contact() {
       return (
         <div>
           <h1>Contact</h1>
           <form>
             <label htmlFor="email">Email:</label>
             <input type="email" id="email" name="email" />
             <label htmlFor="message">Message:</label>
             <textarea id="message" name="message"></textarea>
             <button type="submit">Send</button>
           </form>
         </div>
       );
     }

---

5️⃣ App.js - 내비게이션 바 적용

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Nav from "./Nav";
import About from "./About";
import Contact from "./Contact";

function App() {
  return (
    <Router>
      <Nav />
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

📌 리뷰 포인트

1. 라우팅 통합

   • React Router의 <Routes>와 <Route>를 활용해 페이지 간 이동을 간단히 구성했습니다.

2. 구성의 명확성

   • Nav 컴포넌트를 모든 페이지에서 공유하도록 설정하여 일관된 내비게이션 경험을 제공합니다.

---

완성본

이제 이 코드를 기반으로 내비게이션 바와 페이지 전환의 세부 구현을 학습해 보세요! 😊