piratezon_new/app/components/footer.vue

<template>
  <footer>
    <div class="footer--wrap" v-if="!isIndexPage">
      <div class="footer--btn--wrap" :class="{ active: isScrolled80 }">
        <div
          class="quick--wrap"
          :class="{ active: isQuickMenuActive, lincoln: isLincolnPage }"
        >
          <ul class="inner--wrap">
            <li v-if="!isLincolnPage">
              <NuxtLink :to="linkName + '/vehicle/explorer'">explorer</NuxtLink>
            </li>
            <li v-if="!isLincolnPage">
              <NuxtLink :to="linkName + '/vehicle/expedition'">expedition</NuxtLink>
            </li>
            <li v-if="!isLincolnPage">
              <NuxtLink :to="linkName + '/vehicle/bronco'">bronco</NuxtLink>
            </li>
            <li v-if="!isLincolnPage">
              <NuxtLink :to="linkName + '/vehicle/mustang'">mustang</NuxtLink>
            </li>
            <li v-if="!isLincolnPage">
              <NuxtLink :to="linkName + '/vehicle/ranger'">RANGER</NuxtLink>
            </li>
             <li v-if="isLincolnPage">
              <NuxtLink to="/lincoln/vehicle/nautilus">NAUTILUS</NuxtLink>
            </li>
            <li v-if="isLincolnPage">
              <NuxtLink to="/lincoln/vehicle/navigator">NAVIGATOR</NuxtLink>
            </li>
            <li v-if="isLincolnPage">
              <NuxtLink to="/lincoln/vehicle/aviator">AVIATOR</NuxtLink>
            </li>
           
            <li><NuxtLink :to="linkName + '/network'">전시장</NuxtLink></li>
            <li><NuxtLink :to="linkName + '/network'">서비스 센터</NuxtLink></li>
          </ul>
        </div>
        <button
          class="quick--menu"
          :class="{ lincoln: isLincolnPage, active: isQuickMenuActive }"
          @click.stop="toggleQuickMenu"
        >
          <i class="ico"></i>
          QUICK
        </button>
        <button class="scroll--to--top" @click="scrollToTop" aria-label="맨 위로">
          <i class="ico"></i>
          TOP
        </button>
      </div>
      <div class="footer--site--map">
        <ul :class="{ lincoln: isLincolnPage }">
          <li v-if="isLincolnPage == false">
            <h2 @click="toggleMenu(0)">VEHICLE</h2>
            <ul :class="{ active: activeMenu === 0 }">
              <li><NuxtLink to="/ford/vehicle/explorer">explorer</NuxtLink></li>
              <li><NuxtLink to="/ford/vehicle/expedition">expedition</NuxtLink></li>
              <li><NuxtLink to="/ford/vehicle/bronco">bronco</NuxtLink></li>
              <li><NuxtLink to="/ford/vehicle/mustang">mustang</NuxtLink></li>
              <li><NuxtLink to="/ford/vehicle/ranger">RANGER</NuxtLink></li>
            </ul>
          </li>
          <li v-else>
            <h2 @click="toggleMenu(0)">VEHICLE</h2>
            <ul :class="{ active: activeMenu === 0 }">
              <li><NuxtLink to='/lincoln/vehicle/nautilus'>NAUTILUS</NuxtLink></li>
              <li><NuxtLink to="/lincoln/vehicle/navigator">NAVIGATOR</NuxtLink></li>
              <li><NuxtLink to="/lincoln/vehicle/aviator">AVIATOR</NuxtLink></li>
            </ul>
          </li>

          <li>
            <h2 @click="toggleMenu(1)">NETWORK</h2>
            <ul :class="{ active: activeMenu === 1 }">
              <li>
                <NuxtLink :to="linkName + '/network'">전시장 및 서비스센터</NuxtLink>
              </li>
              <!-- <li>
                <NuxtLink :to="linkName + '/network'"
                  >서비스 센터 찾기</NuxtLink
                >
              </li> -->
              <li>
                <NuxtLink :to="linkName + '/owner/contact'"
                  >{{ isLincolnPage == true ? "링컨" : "포드" }} 고객 센터</NuxtLink
                >
              </li>
            </ul>
          </li>

          <li>
            <h2 @click="toggleMenu(2)">SHOPPING</h2>
            <ul :class="{ active: activeMenu === 2 }">
              <li>
                <NuxtLink :to="linkName + '/shopping/brochure'"
                  >브로슈어 다운로드</NuxtLink
                >
              </li>
              <li>
                <NuxtLink :to="linkName + '/shopping/tire'"
                  >타이어 에너지 소비 효율</NuxtLink
                >
              </li>
              <!-- <li><NuxtLink :to="linkName + '/shopping/apply'">신청하기</NuxtLink></li> -->
            </ul>
          </li>
          <li>
            <h2 @click="toggleMenu(3)">OWNER</h2>
            <ul :class="{ active: activeMenu === 3 }">
              <h3>서비스</h3>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner'">공인 서비스</NuxtLink>
              </li>
              <li class="inner--style" v-if="isLincolnPage == true">
                <NuxtLink :to="linkName + '/owner/pickup'"
                  >픽업 & 딜리버리 서비스</NuxtLink
                >
              </li>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner/consumableParts'"
                  >소모성 부품 무상 교환 서비스</NuxtLink
                >
              </li>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner/tfService'"
                  >24시간 긴급 출동 서비스</NuxtLink
                >
              </li>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner/genuine'">순정 부품</NuxtLink>
              </li>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner/recall'">리콜 안내</NuxtLink>
              </li>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner/navigation'">내비게이션</NuxtLink>
              </li>
              <!-- <li class="inner--style" v-if="isLincolnPage == true">
                <NuxtLink :to="linkName + '/owner/warranty'">보증 및 서비스</NuxtLink>
              </li> -->
              <!-- <li class="inner--style" v-if="isLincolnPage == false">
                <NuxtLink :to="linkName + '/owner/accident'"
                  >사고 수리를 위한 포드 서비스 부품</NuxtLink
                >
              </li> -->
            </ul>

            <ul :class="{ active: activeMenu === 3 }">              
                <h3 class="mb--40">
                  <NuxtLink :to="linkName + '/owner/event'"
                    >프로모션</NuxtLink>
                </h3>
              
            </ul>

            <!-- <ul :class="{ active: activeMenu === 3 }" v-if="isLincolnPage == false">
              <h3>보증 및 서비스</h3>
              <li class="inner--style"><NuxtLink to="/">온라인 서비스 예약</NuxtLink></li>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner/warranty'">보증 및 서비스</NuxtLink>
              </li>
            </ul> -->
            <!-- <ul :class="{ active: activeMenu === 3 }" v-if="isLincolnPage == true">
              <h3>부품 및 차량 관리</h3>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner/genuine'">순정 부품</NuxtLink>
              </li>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner/navigation'">내비게이션</NuxtLink>
              </li>
            </ul> -->

            <!-- <ul :class="{ active: activeMenu === 3 }">
              <h3>Contact Us</h3>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/owner/contact'">포드 고객 센터</NuxtLink>
              </li>
            </ul> -->
          </li>

          <li v-if="isLincolnPage == false">
            <h2 @click="toggleMenu(4)">ABOUT FORD</h2>
            <!-- <ul :class="{ active: activeMenu === 4 }">
              <h3>About Ford</h3>
            </ul> -->
            <ul :class="{ active: activeMenu === 4 }">
              <h3>Global Sites</h3>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/about/company'">Company</NuxtLink>
              </li>
              <li class="inner--style">
                <NuxtLink :to="linkName + '/about/ourPurpose'">Our Purpose</NuxtLink>
              </li>
              <li class="inner--style">
                <NuxtLink
                  to="https://corporate.ford.com/careers/inclusive-hiring/diversity/?intcmp=corporate-seconNav-diversity"
                  target="_blank"
                  >Corporate</NuxtLink
                >
              </li>
              <li class="inner--style">
                <NuxtLink to="https://corporate.ford.com/about/history/" target="_blank"
                  >Heritage</NuxtLink
                >
              </li>
              <li class="inner--style">
                <NuxtLink
                  to="https://corporate.ford.com//social-impact/sustainability/"
                  target="_blank"
                  >Sustanability</NuxtLink
                >
              </li>
            </ul>
          </li>
          <li v-if="isLincolnPage">
            <h2 @click="toggleMenu(4)">ABOUT LINCOLN</h2>
            <!-- <ul :class="{ active: activeMenu === 4 }">
              <h3>About Ford</h3>
            </ul> -->
            <ul :class="{ active: activeMenu === 4 }">
              <NuxtLink to="https://www.lincoln.com" target="_blank"
                ><h3 class="">Global Sites</h3></NuxtLink
              >
            </ul>
          </li>
          <li>
            <h2
              v-if="linkName == '/ford'"
              @click="navigateTo('/lincoln')"
              style="cursor: pointer"
            >
              LINCOLN
            </h2>
            <h2 v-else @click="navigateTo('/ford')" style="cursor: pointer">FORD</h2>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer--info--wrapper">
      <div class="footer--info--wrap">
        <div class="copy--wrap">
          <!-- <ul class="link--list">
            <li><NuxtLink to="/">사이트 맵</NuxtLink></li>
            <li><NuxtLink to="/">개인정보처리방침</NuxtLink></li>
            <li><NuxtLink to="/" target="_blank">글로벌 사이트</NuxtLink></li>
          </ul> -->
          <div>
            회사명 : 에프엘오토코리아 유한회사&nbsp;&nbsp;&nbsp;사업소재지 : 서울특별시 성동구 자동차시장1길 104-13&nbsp;&nbsp;&nbsp;대표이사 : 이윤동<br/>
            이메일 : customercenter@flak.co.kr&nbsp;&nbsp;&nbsp;대표전화번호 : 1600-6003<br/>
            통신판매업신고번호 : 2026-서울성동-0319<br />
            등록번호 : 211-86-57145
          </div>
          <br/>
          <p>Copyright © 2025 FL Auto Korea Company. All Rights Reserved.</p>

          <div class="sns--wrap">
            <NuxtLink
              v-if="isLincolnPage == false"
              to="https://www.facebook.com/fordkorea"
              target="_blank"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="8"
                height="15"
                viewBox="0 0 8 15"
                fill="none"
              >
                <path
                  d="M5.33333 5V3.51172C5.33333 2.83984 5.49167 2.5 6.60417 2.5H8V0H5.67083C2.81667 0 1.875 1.22656 1.875 3.33203V5H0V7.5H1.875V15H5.33333V7.5H7.68333L8 5H5.33333Z"
                  fill="black"
                />
              </svg>
            </NuxtLink>
            <NuxtLink v-else to="https://www.facebook.com/lincolnkorea" target="_blank">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="8"
                height="15"
                viewBox="0 0 8 15"
                fill="none"
              >
                <path
                  d="M5.33333 5V3.51172C5.33333 2.83984 5.49167 2.5 6.60417 2.5H8V0H5.67083C2.81667 0 1.875 1.22656 1.875 3.33203V5H0V7.5H1.875V15H5.33333V7.5H7.68333L8 5H5.33333Z"
                  fill="black"
                />
              </svg>
            </NuxtLink>
            <NuxtLink
              v-if="isLincolnPage == false"
              to="https://www.instagram.com/fordkorea"
              target="_blank"
            >
              <img src="/img/ico--insta.png" />
            </NuxtLink>
            <NuxtLink
              v-else
              to="https://www.instagram.com/lincolnmotorcompanykr"
              target="_blank"
            >
              <img src="/img/ico--insta.png" />
            </NuxtLink>

            <NuxtLink
              v-if="isLincolnPage == false"
              to="https://www.youtube.com/@fordkorea1/featured"
              target="_blank"
            >
              <!-- <img src="/img/ico--youtube.png" /> -->
            </NuxtLink>
            <NuxtLink v-else to="https://www.youtube.com/@LincolnKorea" target="_blank">
              <!-- <img src="/img/ico--youtube.png" /> -->
            </NuxtLink>
            <NuxtLink
              v-if="isLincolnPage == false"
              to="https://pf.kakao.com/_PGPWz"
              target="_blank"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
              >
                <path
                  d="M12.0043 2C6.48085 2 2 5.91412 2 10.7454C2 15.5767 3.58298 16.0152 5.74468 17.568H5.75319V21.7597C5.75319 21.9568 5.99149 22.0694 6.15745 21.9528L9.94894 19.2897L10.0298 19.3219C10.6638 19.4345 11.3234 19.4908 11.9957 19.4908C17.5191 19.4908 22 15.5727 22 10.7414C22 5.9101 17.5277 2 12.0043 2ZM8.48511 13.0102C9.51489 13.0102 10.3957 12.4269 10.6596 11.5299H12.183C11.8128 13.2637 10.383 14.3981 8.48511 14.3981C6.58723 14.3981 4.52766 12.8413 4.52766 10.677C4.52766 8.51281 6.2766 6.95601 8.48511 6.95601C10.6936 6.95601 11.8383 8.11455 12.1957 9.87651H10.6766C10.4468 8.9191 9.53617 8.31971 8.48511 8.31971C7 8.31971 6.01277 9.32137 6.01277 10.677C6.01277 12.0327 7.13617 13.0142 8.48511 13.0142V13.0102ZM18.5191 14.2532H17.1234V11.2764C17.1234 10.5926 16.7021 10.2225 16.0511 10.2225C15.4 10.2225 14.8596 10.6408 14.8596 11.4896V14.2492H13.4638V6.9721H14.8596V9.71158C15.1957 9.23287 15.7362 8.99553 16.4723 8.99553C17.2085 8.99553 17.5532 9.18058 17.9319 9.55872C18.3234 9.93685 18.5149 10.4477 18.5149 11.1115V14.2532H18.5191Z"
                  fill="#161616"
                />
              </svg>
            </NuxtLink>
            <NuxtLink v-else to="https://pf.kakao.com/_xoybzG" target="_blank">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
              >
                <path
                  d="M12.0043 2C6.48085 2 2 5.91412 2 10.7454C2 15.5767 3.58298 16.0152 5.74468 17.568H5.75319V21.7597C5.75319 21.9568 5.99149 22.0694 6.15745 21.9528L9.94894 19.2897L10.0298 19.3219C10.6638 19.4345 11.3234 19.4908 11.9957 19.4908C17.5191 19.4908 22 15.5727 22 10.7414C22 5.9101 17.5277 2 12.0043 2ZM8.48511 13.0102C9.51489 13.0102 10.3957 12.4269 10.6596 11.5299H12.183C11.8128 13.2637 10.383 14.3981 8.48511 14.3981C6.58723 14.3981 4.52766 12.8413 4.52766 10.677C4.52766 8.51281 6.2766 6.95601 8.48511 6.95601C10.6936 6.95601 11.8383 8.11455 12.1957 9.87651H10.6766C10.4468 8.9191 9.53617 8.31971 8.48511 8.31971C7 8.31971 6.01277 9.32137 6.01277 10.677C6.01277 12.0327 7.13617 13.0142 8.48511 13.0142V13.0102ZM18.5191 14.2532H17.1234V11.2764C17.1234 10.5926 16.7021 10.2225 16.0511 10.2225C15.4 10.2225 14.8596 10.6408 14.8596 11.4896V14.2492H13.4638V6.9721H14.8596V9.71158C15.1957 9.23287 15.7362 8.99553 16.4723 8.99553C17.2085 8.99553 17.5532 9.18058 17.9319 9.55872C18.3234 9.93685 18.5149 10.4477 18.5149 11.1115V14.2532H18.5191Z"
                  fill="#161616"
                />
              </svg>
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
  import { ref, onMounted, onUnmounted, computed } from "vue";
  import { useRoute } from "vue-router";

  const config = useRuntimeConfig();
  const route = useRoute();
  const activeMenu = ref(null);
  const isScrolled80 = ref(false);
  const isQuickMenuActive = ref(false);

  // URL에 'lincoln'이 포함되어 있는지 확인
  const isLincolnPage = computed(() => {
    return route.path.includes("lincoln");
  });

  // 인덱스 페이지인지 확인
  const isIndexPage = computed(() => {
    return route.path === "/";
  });

  // 브랜드명을 동적으로 반환
  const linkName = computed(() => {
    return route.path.includes("lincoln") ? "/lincoln" : "/ford";
  });

  const toggleMenu = (index) => {
    if (activeMenu.value === index) {
      activeMenu.value = null;
    } else {
      activeMenu.value = index;
    }
  };

  const toggleQuickMenu = () => {
    isQuickMenuActive.value = !isQuickMenuActive.value;
  };

  const closeQuickMenu = () => {
    isQuickMenuActive.value = false;
  };

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  const handleScroll = () => {
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const scrollHeight =
      document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrollPercent = (scrollTop / scrollHeight) * 100;

    isScrolled80.value = scrollPercent !== 0;
  };

  onMounted(() => {
    window.addEventListener("scroll", handleScroll);
    document.addEventListener("click", closeQuickMenu);
  });

  onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
    document.removeEventListener("click", closeQuickMenu);
  });
</script>