[Vue.js/개발일지] 3. Footer 만들기 및 라우팅 트랜지션

푸터를 직접 만들까 생각하다가, 부트스트랩 example을 활용하여 개발했다. 전부 라우터 링크로 묶어주어 라우팅 될 수 있도록 노가다 해주었다.

<template>
  <!-- Footer -->
  <footer class="bg-dark text-center text-white">
    <!-- Grid container -->
    <div class="container p-4">
      <!-- Section: Text -->
      <section class="mb-4">
        <p>
          (50595) 경상남도 양산시 물금읍 황산로 733-21 | TEL: 055-387-2941
        </p>
      </section>
      <!-- Section: Text -->

      <!-- Section: Links -->
      <section class="">
        <!--Grid row-->
        <div class="row">
          <!--Grid column-->
          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
            <h5 class="text-uppercase">
              학교 소개
            </h5>

            <ul class="list-unstyled mb-0">
              <li>
                <RouterLink
                  :to="'/SchoolIntroduction/PastorGreeting'"
                  class="text-white nav-link">
                  이사장 인사말
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/SchoolIntroduction/SchoolHistory'"
                  class="text-white nav-link">
                  학교 연혁
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/SchoolIntroduction/PhilosophyEducation'"
                  class="text-white nav-link">
                  교육 철학
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/SchoolIntroduction/SchoolFacilities'"
                  class="text-white nav-link">
                  학교 시설
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/SchoolIntroduction/SchoolHistory'"
                  class="text-white nav-link">
                  학교 연혁
                </RouterLink>
              </li>
            </ul>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
            <h5 class="text-uppercase">
              교육 정보
            </h5>

            <ul class="list-unstyled mb-0">
              <li>
                <RouterLink
                  :to="'/EducationInfo/AcademicCalendar'"
                  class="text-white nav-link">
                  학사 일정
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/EducationInfo/Curriculum'"
                  class="text-white nav-link">
                  커리큘럼
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/AdmissionGuide/RecruitmentGuide'"
                  class="text-white nav-link">
                  입학 FAQ
                </RouterLink>
              </li>
            </ul>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
            <h5 class="text-uppercase">
              입학 안내
            </h5>

            <ul class="list-unstyled mb-0">
              <li>
                <RouterLink
                  :to="'/AdmissionGuide/RecruitmentGuide'"
                  class="text-white nav-link">
                  모집 요강
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/AdmissionGuide/EducationExpenses'"
                  class="text-white nav-link">
                  교육비 안내
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/AdmissionGuide/ConsultationInquiry'"
                  class="text-white nav-link">
                  상담 문의
                </RouterLink>
              </li>
            </ul>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
            <h5 class="text-uppercase">
              국크 이야기
            </h5>

            <ul class="list-unstyled mb-0">
              <li>
                <RouterLink
                  :to="'/SchoolStory/SchoolNews'"
                  class="text-white nav-link">
                  학교 소식
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/SchoolStory/SchoolActivities'"
                  class="text-white nav-link">
                  학교 활동
                </RouterLink>
              </li>
              <li>
                <RouterLink
                  :to="'/SchoolStory/NoticeBoard'"
                  class="text-white nav-link">
                  학생 마당
                </RouterLink>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </div>
    <div
      class="text-center p-3"
      style="background-color: rgba(0, 0, 0, 0.2);">
      © 2021 Copyright Onnuri International Christian School. ALL RIGHT RESERVED
    </div>
  </footer>
</template>

<style scoped lang="scss">
    li{
        margin-bottom: 5px;
        &:first-child{
            margin-top: 20px;
        }
    }
    h5 {
        font-weight: bold;
    }
    @media (max-width: 1000px) {
        li{
            margin-bottom: 0px;
        }
    }
</style>

모바일 웹 대응도 가능한 부트스트랩으로 만든 푸터이다. 

다음은 트랜지션인데, 다른 화면으로 넘어갈때의 트랜지션을 지정해주었다. 내 사랑 fade로 넣어주었다. 

이 또한 공식 문서를 참고했다.

https://router.vuejs.org/kr/guide/advanced/transitions.html

트랜지션 | Vue Router

 

모든 화면을 넘어 갈때 트랜지션 되도록 작업 해 주었다.

<router-view v-slot="{ Component }" class="router">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>

컴포넌트로 만들어 준 뒤 공식 문서에 나와있는 대로 css를 추가해주면 된다.

  .router{
    padding-bottom: 100px;
  }
  .fade-enter-active,
  .fade-leave-active {
  transition: opacity 0.5s ease;
  }


.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}