Add office location map dialogs

js/main.js

@@ -276,6 +276,20 @@
       </nav>`,
     },
   };
+
+  function prepareDialog(dialog) {
+    dialog.querySelector(".dialog-close")?.addEventListener("click", () => dialog.close());
+    dialog.addEventListener("click", (event) => {
+      const rect = dialog.getBoundingClientRect();
+      const clickedOutside = event.target === dialog && (
+        event.clientX < rect.left || event.clientX > rect.right ||
+        event.clientY < rect.top || event.clientY > rect.bottom
+      );
+      if (clickedOutside) dialog.close();
+    });
+    dialog.addEventListener("close", () => document.documentElement.classList.remove("has-site-dialog"));
+  }
+
   Object.entries(modalContent).forEach(([key, content]) => {
     const dialog = document.createElement("dialog");
     dialog.className = "site-dialog";
@@ -288,19 +302,10 @@
       </header>
       <div class="site-dialog-content">${content.body}</div>`;
     document.body.appendChild(dialog);
-    dialog.querySelector(".dialog-close").addEventListener("click", () => dialog.close());
-    dialog.addEventListener("click", (event) => {
-      const rect = dialog.getBoundingClientRect();
-      const clickedOutside = event.target === dialog && (
-        event.clientX < rect.left || event.clientX > rect.right ||
-        event.clientY < rect.top || event.clientY > rect.bottom
-      );
-      if (clickedOutside) dialog.close();
-    });
+    prepareDialog(dialog);
     dialog.querySelectorAll(".sitemap-groups a").forEach((link) => {
       link.addEventListener("click", () => dialog.close());
     });
-    dialog.addEventListener("close", () => document.documentElement.classList.remove("has-site-dialog"));
     document.querySelectorAll(`[data-site-modal="${key}"]`).forEach((trigger) => {
       trigger.setAttribute("aria-haspopup", "dialog");
       trigger.setAttribute("aria-controls", dialog.id);
@@ -312,6 +317,53 @@
     });
   });
 
+  const mapTriggers = document.querySelectorAll("[data-map-address]");
+  if (mapTriggers.length) {
+    const dialog = document.createElement("dialog");
+    dialog.className = "site-dialog location-dialog";
+    dialog.id = "office-map-dialog";
+    dialog.setAttribute("aria-labelledby", "office-map-title");
+    dialog.innerHTML = `
+      <header class="site-dialog-header">
+        <h2 id="office-map-title">오시는 길</h2>
+        <button type="button" class="dialog-close" aria-label="닫기" title="닫기">&#215;</button>
+      </header>
+      <div class="site-dialog-content location-map-content">
+        <iframe class="location-map-frame" title="회사 위치 지도" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
+        <div class="location-map-meta">
+          <p data-location-address></p>
+          <a data-location-link href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer">
+            Google 지도에서 크게 보기
+            <img src="assets/icons/arrow_outward.svg" alt="" />
+          </a>
+        </div>
+      </div>`;
+    document.body.appendChild(dialog);
+    prepareDialog(dialog);
+
+    const title = dialog.querySelector("#office-map-title");
+    const frame = dialog.querySelector(".location-map-frame");
+    const addressLabel = dialog.querySelector("[data-location-address]");
+    const mapLink = dialog.querySelector("[data-location-link]");
+    mapTriggers.forEach((trigger) => {
+      trigger.setAttribute("aria-haspopup", "dialog");
+      trigger.setAttribute("aria-controls", dialog.id);
+      trigger.addEventListener("click", () => {
+        const office = trigger.dataset.mapTitle;
+        const address = trigger.dataset.mapAddress;
+        const query = encodeURIComponent(address);
+        title.textContent = `${office} 오시는 길`;
+        frame.title = `${office} 위치 지도`;
+        frame.src = `https://maps.google.com/maps?q=${query}&z=16&output=embed`;
+        addressLabel.textContent = address;
+        mapLink.href = `https://www.google.com/maps/search/?api=1&query=${query}`;
+        dialog.showModal();
+        document.documentElement.classList.add("has-site-dialog");
+      });
+    });
+    dialog.addEventListener("close", () => frame.removeAttribute("src"));
+  }
+
   // 문의하기: PocketBase에 문의와 첨부파일을 저장.
   const form = document.querySelector("[data-contact-form]");
   if (form) {