greenwhale/app/pages/contact/location.vue

<template>
  <div>
    <topVisual />
    <div class="sub-content">
      <div class="container">
        <h2 class="sub-title">오시는 길</h2>
        <div class="location-info">
          <div class="map-container">
            <div id="map" style="width:100%; height:400px;"></div>
          </div>
          <div class="info-box">
            <h3>그린웨일글로벌</h3>
            <ul>
              <li>주소: 서울특별시 강남구 테헤란로 123</li>
              <li>전화: 02-1234-5678</li>
              <li>팩스: 02-1234-5679</li>
              <li>이메일: info@greenwhale.com</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import topVisual from '~/components/topVisual.vue';

onMounted(() => {
  if (window.naver && window.naver.maps) {
    const mapOptions = {
      center: new window.naver.maps.LatLng(37.5665, 126.9780),
      zoom: 15
    };
    new window.naver.maps.Map('map', mapOptions);
  }
});
</script>

<style scoped>
.location-info {
  padding: 40px 0;
}
.map-container {
  margin-bottom: 40px;
}
.info-box {
  background: #f8f8f8;
  padding: 30px;
  border-radius: 8px;
}
.info-box h3 {
  font-size: 24px;
  margin-bottom: 20px;
}
.info-box ul {
  list-style: none;
  padding: 0;
}
.info-box li {
  padding: 8px 0;
  font-size: 16px;
}
</style>