diff --git a/assets/icons/arrow_outward.svg b/assets/icons/arrow_outward.svg new file mode 100644 index 0000000..5034313 --- /dev/null +++ b/assets/icons/arrow_outward.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/chevron_forward.svg b/assets/icons/chevron_forward.svg index 6d07d52..97c11a4 100644 --- a/assets/icons/chevron_forward.svg +++ b/assets/icons/chevron_forward.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/assets/icons/location_on.svg b/assets/icons/location_on.svg new file mode 100644 index 0000000..dad5b83 --- /dev/null +++ b/assets/icons/location_on.svg @@ -0,0 +1 @@ + diff --git a/contact.html b/contact.html index 9417908..426fc10 100644 --- a/contact.html +++ b/contact.html @@ -44,15 +44,39 @@
-
- Head Office -

대구 본사

-

대구광역시 북구 경대로17길 47, 8층 803호
(복현동, IT융합산업빌딩)

+
+
+ Head Office +

대구 본사

+

대구광역시 북구 경대로17길 47, 8층 803호
(복현동, IT융합산업빌딩)

+
+
-
- Seoul Office -

서울 사무소

-

서울특별시 강남구 논현로 416
운기빌딩 6층

+
+
+ Seoul Office +

서울 사무소

+

서울특별시 강남구 논현로 416
운기빌딩 6층

+
+
Office Hour diff --git a/css/styles.css b/css/styles.css index 8d2d98b..317d111 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1579,6 +1579,39 @@ code { border: 1px solid var(--line); } +.office-location { + display: grid; + grid-template-columns: minmax(0, 1fr) 40px; + gap: 18px; + align-items: center; +} + +.office-map-button { + display: grid; + place-items: center; + width: 40px; + height: 40px; + padding: 0; + color: var(--text); + border: 1px solid var(--line-strong); + border-radius: 4px; + background: rgba(255, 255, 255, .05); + cursor: pointer; + transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); +} + +.office-map-button img { + width: 20px; + height: 20px; +} + +.office-map-button:hover, +.office-map-button:focus-visible { + border-color: var(--accent); + background: rgba(158, 233, 255, .12); + transform: translateX(2px); +} + .office-list h2 { margin-bottom: 10px; } @@ -1948,6 +1981,50 @@ html.has-site-dialog, font-size: 12px; } +.location-dialog { + width: min(960px, calc(100% - 32px)); +} + +.location-map-content { + padding: 0; + overflow: hidden; +} + +.location-map-frame { + display: block; + width: 100%; + height: min(58dvh, 560px); + min-height: 360px; + border: 0; + background: #0b1013; +} + +.location-map-meta { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + padding: 16px 24px; + border-top: 1px solid var(--line); +} + +.location-map-meta p { + margin: 0; +} + +.location-map-meta a { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + gap: 6px; + font-weight: 750; +} + +.location-map-meta img { + width: 18px; + height: 18px; +} + .sitemap-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -1977,6 +2054,22 @@ html.has-site-dialog, .site-dialog-content { padding: 16px; } + + .location-map-content { + padding: 0; + } + + .location-map-frame { + height: 52dvh; + min-height: 280px; + } + + .location-map-meta { + align-items: flex-start; + flex-direction: column; + gap: 10px; + padding: 14px 16px; + } } .contact-body button:disabled { diff --git a/js/main.js b/js/main.js index 1c42be7..43cf925 100644 --- a/js/main.js +++ b/js/main.js @@ -276,6 +276,20 @@ `, }, }; + + 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 @@
${content.body}
`; 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 = ` +
+

오시는 길

+ +
+
+ +
+

+ + Google 지도에서 크게 보기 + + +
+
`; + 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) {