바텀바

• 모바일 레이아웃 페이지 참고해주세요.
• lottie 애니메이션 적용되어 있어 관련 스크립트 필요합니다. 코드 블록 내 하이라이트 참고 바랍니다.

<script type="module">
  if (!window.customElements.get("lottie-player")) {
    import("/ui/lib/lottie/lottie-player.js");
  }
</script>

<div class="v-bottom-bar">
  <div class="v-bottom-bar__inner">
    <nav class="v-bottom-bar__nav">
      <a href="/mo/hamburger-menu" class="v-button v-bottom-bar__button">
        <svg class="v-bottom-bar__icon" fill="none" viewBox="0 0 24 24">
          <title>검색</title>
          <path
            stroke="currentColor"
            stroke-miterlimit="10"
            d="M4 6h16M4 12h16M4 18h16"
          ></path>
        </svg>
      </a>
      <button type="button" class="v-button v-bottom-bar__button">
        <svg class="v-bottom-bar__icon" fill="none" viewBox="0 0 24 24">
          <title>위시리스트</title>
          <path
            stroke="currentColor"
            d="m5.246 11.352-.017-.018c-1.503-1.564-1.503-4.106 0-5.67 1.494-1.552 3.947-1.51 5.44.043l1.432 1.49 1.457-1.515c1.493-1.552 3.923-1.57 5.416-.017 1.504 1.563 1.504 4.106 0 5.669L12.1 19.238z"
          ></path>
        </svg>
      </button>
      <a aria-label="홈" href="/mo/home/" class="v-button v-bottom-bar__button">
        <lottie-player
          class="v-bottom-bar__logo"
          src="/ui/lib/lottie/data/gnb_logo.json"
          autoplay=""
          mode="normal"
          background="transparent"
        ></lottie-player>
      </a>
      <button type="button" class="v-button v-bottom-bar__button">
        <svg class="v-bottom-bar__icon" fill="none" viewBox="0 0 24 24">
          <title>마이</title>
          <path
            stroke="currentColor"
            d="M15.3047 8c0 1.933-1.567 3.5-3.5 3.5-1.93301 0-3.50001-1.567-3.50001-3.5s1.567-3.5 3.50001-3.5c1.933 0 3.5 1.567 3.5 3.5ZM3.80469 20c0-1.766 2.04429-8 8.00001-8 5.9557 0 8 6.234 8 8"
          ></path>
        </svg>
      </button>
      <button type="button" class="v-button v-bottom-bar__button">
        <svg class="v-bottom-bar__icon" fill="none" viewBox="0 0 24 24">
          <title>히스토리</title>
          <path
            stroke="currentColor"
            d="M12 7.15625v5.19145l3.4609 1.7304"
          ></path>
          <circle cx="12" cy="12" r="8.5" stroke="currentColor"></circle>
        </svg>
      </button>
    </nav>
  </div>
</div>