앵커 이용 Guide_Nav 만들어서 해당 section 이동

# 사용 가이드 페이지 구현

const GUIDE_NAV = [
  { id: "start", label: "시작하기" },
  { id: "mail-to-schedule", label: "메일 → 일정 변환" },
  { id: "calendar", label: "캘린더 사용법" },
  { id: "todo", label: "할 일(Todo)" },
  { id: "addressbook", label: "주소록" },
];

function Guide() {
  return (
    <div className="mb-guide-page">
      <div className="mb-guide-inner">
        {/* 상단 헤더 */}
        <header className="mb-guide-header">
          <h1>사용 가이드</h1>
          <p> ... </p>
        </header>

        {/* 상단 빠른 이동 메뉴 */}
        <nav className="mb-guide-nav">
          {GUIDE_NAV.map((item) => (
            <a key={item.id} href={`#${item.id}`} className="mb-guide-nav-link">
              {item.label}
            </a>
          ))}
        </nav>

        {/* 섹션 1  */}
        <section id="start" className="mb-guide-section">
          ...
        </section>

        {/* 섹션 2 */}
        <section id="mail-to-schedule" className="mb-guide-section">
         ...
        </section>

        {/* 섹션 3 */}
        <section id="calendar" className="mb-guide-section">
          ...
        </section>

        {/* 섹션 4 */}
        <section id="todo" className="mb-guide-section">
         ...
        </section>

        {/* 섹션 5 */}
        <section id="addressbook" className="mb-guide-section">
         ...
        </section>

        {/* 마지막 안내 */}
        <section className="mb-guide-section mb-guide-section-last">
         ...
        </section>
      </div>
    </div>
  );
}

export default Guide;

 

 

 

GUIDE_NAV 예시

const GUIDE_NAV = [
  { id: "start", label: "시작하기" },
  { id: "mail-to-schedule", label: "메일 → 일정 변환" },
  { id: "calendar", label: "캘린더 사용법" },
  { id: "todo", label: "할 일(Todo)" },
  { id: "addressbook", label: "주소록" },
];

 

• 가이드 상단 빠른 이동 메뉴에 쓸 데이터 목록을 모아 둔 배열 상수
• 배열 안에는 객체가 들어 있고, 각 객체는 하나의 메뉴(=한 섹션으로 점프하는 버튼)를 의미
• id: 실제 섹션의 id 값 (<section id="start"> 와 매칭)
• label: 화면에 보이는 텍스트

 

 

어디서 어떻게 사용할까?

 

네비게이션 에서 사용 (GUIDE_NAV.map(...) 부분)

<nav className="mb-guide-nav">
  {GUIDE_NAV.map((item) => (
    <a key={item.id} href={`#${item.id}`} className="mb-guide-nav-link">
      {item.label}
    </a>
  ))}
</nav>

 

 

 

item 안에는 id, label 존재

• GUIDE_NAV 배열을 돌면서(map) → 각 요소(item)에 대해 <a> 태그 하나씩 렌더링

 

href={`#${item.id}`}   // #start, #mail-to-schedule, #calendar ...
{item.label}           // "시작하기", "메일 → 일정 변환", ...

 

• 클릭하면 href="#start" → 브라우저가 <section id="start"> 위치로 스크롤
• 클릭하면 href="#calendar" → <section id="calendar"> 로 스크롤
  이런 식의 해시 앵커 이동이 되는 구조
• #는 페이지 안의 위치(앵커) → 지금 이 페이지에서 id="start" 인 요소 위치로 스크롤
  
  

아래쪽 섹션(이동해야할 섹션) 동일하게 이름 설정 → 이곳으로 위치 이동

<section id="start" className="mb-guide-section"> ... </section>
<section id="mail-to-schedule" className="mb-guide-section"> ... </section>
<section id="calendar" className="mb-guide-section"> ... </section>
...

 

 

---

 

💡정리 요약

• GUIDE_NAV = 가이드 상단 네비 메뉴 정의해 둔 배열
• id = 점프할 섹션의 id와 연결
• label = 사용자에게 보여줄 이름
• map으로 돌려서 <a>를 자동 렌더 → 수정/추가가 쉬움 → 유지보수 좋음