audi/app/components/footer.vue

<template>
  <footer>
    <div class="footer--wrap">
      <button class="scroll--to--top" @click="scrollToTop" aria-label="맨 위로">
        위로 <i class="ico"></i>
      </button>
      <div class="footer--site--map">
        <ul>
          <li>
            <h2 @click="toggleMenu(0)">Models</h2>
            <ul :class="{ active: activeMenu === 0 }">
              <li><NuxtLink to="/models/sedan">아우디 코리아 Sedan</NuxtLink></li>
              <li><NuxtLink to="/models/suv">아우디 코리아 SUV</NuxtLink></li>
              <li><NuxtLink to="/models/coupe">아우디 코리아 Coupe</NuxtLink></li>
              <li><NuxtLink to="/models/sportback">아우디 코리아 Sportback</NuxtLink></li>
              <li><NuxtLink to="/models/etron">아우디 코리아 전기차</NuxtLink></li>
              <li><NuxtLink to="/models/srange">아우디 코리아 S range</NuxtLink></li>
              <li><NuxtLink to="/models/rsrange">아우디 코리아 RS range</NuxtLink></li>
            </ul>
          </li>
          <li>
            <h2 @click="toggleMenu(1)">About Audi</h2>
            <ul :class="{ active: activeMenu === 1 }">
              <li><NuxtLink to="/service/careprogram/diesel">고객안내</NuxtLink></li>
              <li>
                <NuxtLink to="/aboutaudi/audi-brand-2023">아우디 브랜드 소개</NuxtLink>
              </li>
              <li><NuxtLink to="/aboutaudi">아우디 브랜드 히스토리</NuxtLink></li>
              <li><NuxtLink to="/aboutaudi/quattro">quattro 시스템</NuxtLink></li>
              <li><NuxtLink to="/aboutaudi/audi_connect">Audi Connect</NuxtLink></li>
              <li>
                <NuxtLink to="/aboutaudi/morepossibilities">More possibilities</NuxtLink>
              </li>
              <li>
                <NuxtLink to="/aboutaudi/futureisanattitude"
                  >Future is an attitude</NuxtLink
                >
              </li>
              <li><NuxtLink to="/aboutaudi/myaudiworld">myAudiworld</NuxtLink></li>
              <li><NuxtLink to="/etronms/">Audi e-tron 모빌리티 서비스</NuxtLink></li>
              <li>
                <NuxtLink to="/aboutaudi/auditoyou"
                  >Audi to you 찾아가는 시승 서비스</NuxtLink
                >
              </li>
            </ul>
          </li>
          <li>
            <h2 @click="toggleMenu(2)">About Service</h2>
            <ul :class="{ active: activeMenu === 2 }">
              <li><NuxtLink to="/service">아우디 서비스</NuxtLink></li>
              <li><NuxtLink to="/service/program">서비스 프로그램</NuxtLink></li>
              <li>
                <NuxtLink to="/service/careprogram/"
                  >아우디 e-tron 케어 프로그램</NuxtLink
                >
              </li>
              <li>
                <NuxtLink to="/service/program/dealersearch?filter=as">AS센터</NuxtLink>
              </li>
              <li>
                <NuxtLink
                  to="https://www.audikoreaevent.co.kr/app/rsvt/applyServiceReservation.do"
                  target="_blank"
                  >서비스 예약</NuxtLink
                >
              </li>
              <li>
                <NuxtLink to="/service/careprogram/carecenter">고객지원센터</NuxtLink>
              </li>
              <li><NuxtLink to="/service/genuineparts">아우디 순정부품</NuxtLink></li>
              <li><NuxtLink to="/service/acc">아우디 순정 액세서리</NuxtLink></li>
              <li>
                <NuxtLink to="/service/navigationdown"
                  >내비게이션 데이터 다운로드</NuxtLink
                >
              </li>
              <li>
                <NuxtLink
                  to="https://www.audikoreaevent.co.kr/etc/component/index1.jsp"
                  target="_blank"
                  >부품 가격 정보</NuxtLink
                >
              </li>
              <li>
                <NuxtLink to="/service/advisor">사설수리업체를 위한 권고사항</NuxtLink>
              </li>
              <li><NuxtLink to="/service/videomenual">아우디 영상 매뉴얼</NuxtLink></li>
              <li><NuxtLink to="/service/qna">아우디 차량 Q&A</NuxtLink></li>
            </ul>
          </li>
          <li>
            <h2 @click="toggleMenu(3)">About exclusive</h2>
            <ul :class="{ active: activeMenu === 3 }">
              <li>
                <NuxtLink to="/exclusive/exclusive-order">exclusive order</NuxtLink>
              </li>
              <li>
                <NuxtLink to="/exclusive/exclusive-edition">exclusive edition</NuxtLink>
              </li>
            </ul>
          </li>
          <li>
            <h2 @click="toggleMenu(4)">Stories of Progress</h2>
            <ul :class="{ active: activeMenu === 4 }">
              <li><NuxtLink to="/stories/technology">Technology</NuxtLink></li>
              <li><NuxtLink to="/stories/future">Future</NuxtLink></li>
              <li><NuxtLink to="/stories/design">Design</NuxtLink></li>
              <li><NuxtLink to="/stories/sustainability">Sustainability</NuxtLink></li>
              <li><NuxtLink to="/stories/lifestyle">Lifestyle</NuxtLink></li>
              <li><NuxtLink to="/stories/audi-sport">Audi Sport</NuxtLink></li>
            </ul>
          </li>
        </ul>
        <ul>
            <li>
                <h2 @click="toggleMenu(5)">Company</h2>
                <ul :class="{ active: activeMenu === 5 }">
                    <li><NuxtLink to="/company/about">About Gojin Motors</NuxtLink></li>
                    <li><NuxtLink to="/company/ceo">CEO</NuxtLink></li>
                    <li><NuxtLink to="/company/history">History</NuxtLink></li>
                    <li><NuxtLink to="/company/ir">IR</NuxtLink></li>
                    <li><NuxtLink to="/company/showroom">Showroom</NuxtLink></li>
                    <li><NuxtLink to="/company/serviceCenter">Service Center</NuxtLink></li>
                    <li><NuxtLink to="/company/career">Career</NuxtLink></li>
                    <li><NuxtLink to="/company/salesAdvisor">Sales Advisor</NuxtLink></li>
                    <li><NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" target="_blank">견적요청</NuxtLink></li>
                    <li><NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" target="_blank">시승요청</NuxtLink></li>
                    <li><NuxtLink to="/company/event">Event</NuxtLink></li>
                    <li><NuxtLink to="/company/news">Audi News</NuxtLink></li>
                </ul>
            </li>
            <li>
              <h2 @click="toggleMenu(6)">Used Car(AAP)</h2>
              <ul :class="{ active: activeMenu === 6 }">
                <li><NuxtLink to="http://www.audiusedcar.co.kr/index.php" target="_blank">Used Car(AAP)</NuxtLink></li>
              </ul>
            </li>
        </ul>
      </div>
      <div class="footer--info--wrap">
        <div class="sns--wrap">
          <NuxtLink class="fb" to="https://www.facebook.com/audikorea.kr" target="_blank"></NuxtLink>
          <NuxtLink class="ins" to="https://www.instagram.com/audi_gojinmotors" target="_blank"></NuxtLink>
        </div>
        <div class="copy--wrap">
          <p>© 2025 Gojin Motors. All rights reserved</p>
          <ul class="link--list">
            <li><NuxtLink to="/agree/terms">Terms of use</NuxtLink></li>
            <li><NuxtLink to="/agree/privacy">Privacy policy</NuxtLink></li>
            <li><NuxtLink to="https://www.audikoreaevent.co.kr/etc/component/index2.jsp" target="_blank">타이어 에너지 소비 효율 등급 정보 조회</NuxtLink></li>
            <li><NuxtLink to="https://www.audikoreaevent.co.kr/etc/component/index3.jsp" target="_blank">스마트키 KC인증 정보조회</NuxtLink></li>
          </ul>
          <ul class="info--list mt--30">
            <li>(주)고진모터스</li>
            <li>주소: 서울특별시 강남구 청담동 92-9</li>
            <li>전화: 02-516-2468</li>
          </ul>
          <p>본 웹사이트에서 제공되는 정보는 실제 판매 차량과 다를 수 있습니다</p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ref } from 'vue';

const activeMenu = ref(null);

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

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};
</script>