파이보의 기초 공사가 마무리되었으니 이제 본격적으로 파이보를 만들 차례이다. 이 장을 마치면 파이보는 꽤 괜찮은 모습으로 거듭날 것.

이 장의 목표

3-01 내비게이션 바

지금까지 만든 파이보의 기능(질문 등록·조회, 답변 등록·조회)을 사용해 봤다면 편의 기능이 없어서 이런저런 불편함을 느꼈을 것이다. 그중에서 메인 페이지로 돌아갈 수 있는 장치가 없다는 것이 가장 불편한 점이다. 여기서는 이런 불편함을 해소하기 위해 내비게이션 바를 추가할 것

내비게이션 바는 모든 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트이다.

내비게이션 바 컴포넌트 작성하기

[파일명: myapi/frontend/src/components/Navigation.svelte]

<script>
    import { link } from 'svelte-spa-router'
</script>

<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <div class="container-fluid">
        <a use:link class="navbar-brand" href="/">Pybo</a>
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon" />
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a use:link class="nav-link" href="/user-create">회원가입</a>
                </li>
                <li class="nav-item">
                    <a use:link class="nav-link" href="/user-login">로그인</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

내비게이션 바에는 질문 목록(/)으로 이동할수 있는 "Pybo" 로고(클래스값 navbar-brand)를 가장 왼쪽에 배치했고, 오른쪽에는 "회원가입"과 "로그인" 링크를 추가 [후에 추가 예정이므로 경로만 지정]

내비게이션 바 표시하기

모든 페이지에 내비게이션바가 보이도록 하려면 다음과 같이 App 컴포넌트에 Navigation 컴포넌트를 추가해야 함.

[파일명: projects/myapi/frontend/src/App.svelte]

<script>
  import Router from 'svelte-spa-router'
  import Home from "./routes/Home.svelte"
  import Detail from "./routes/Detail.svelte"
  import QuestionCreate from "./routes/QuestionCreate.svelte"
  import Navigation from "./components/Navigation.svelte"

  const routes = {
    '/': Home,
    '/detail/:question_id': Detail,
    '/question-create': QuestionCreate,
  }
</script>

<Navigation />
<Router {routes}/>

Navigation 컴포넌트가 모든 페이지에 표시되도록 App 컴포넌트에 추가

내비게이션 바 확인하기