From df6ad3bbd27642d15c9eac7ec1e3ebae5b2c0f31 Mon Sep 17 00:00:00 2001 From: Haewon Kam Date: Fri, 11 Sep 2026 11:49:37 +0900 Subject: [PATCH] =?UTF-8?q?style(supporters):=20=EC=98=A4=EC=8B=9C?= =?UTF-8?q?=EB=8A=94=20=EA=B8=B8=20=EC=A7=80=EB=8F=84=EB=A5=BC=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EB=86=92=EC=9D=B4=EC=97=90=20=EB=A7=9E=EC=B6=B0=20?= =?UTF-8?q?=EB=8A=98=EB=A6=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5.1 --- supporters/src/components/VisitMap.astro | 10 +++++++--- .../supporters-astro/src/components/VisitMap.astro | 10 +++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/supporters/src/components/VisitMap.astro b/supporters/src/components/VisitMap.astro index 91ee282..757410c 100644 --- a/supporters/src/components/VisitMap.astro +++ b/supporters/src/components/VisitMap.astro @@ -51,8 +51,9 @@ const mapId = `visit-map-${Math.random().toString(36).slice(2, 8)}`; .vm-head { margin-bottom: 1.2rem; } .vm-head h2 { margin: 0.2rem 0 0.2rem; font-size: 1.6rem; } .vm-head .sub { margin: 0; color: var(--slate-600); } - .vm-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.9fr); gap: 1.25rem; align-items: start; } - .vm-map { width: 100%; aspect-ratio: 16 / 10; min-height: 260px; border-radius: 16px; overflow: hidden; border: 1px solid var(--slate-100); box-shadow: var(--shadow); background: var(--primary-50); z-index: 0; } + .vm-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 1.25rem; align-items: stretch; } + .vm-map-wrap { display: flex; flex-direction: column; min-height: 0; } + .vm-map { width: 100%; flex: 1 1 auto; min-height: 340px; border-radius: 16px; overflow: hidden; border: 1px solid var(--slate-100); box-shadow: var(--shadow); background: var(--primary-50); z-index: 0; } .vm-empty { display: grid; place-items: center; color: var(--slate-500); font-size: 0.92rem; padding: 1rem; text-align: center; } .vm-empty p { margin: 0; } .vm-attr { font-size: 0.74rem; color: var(--slate-500); margin: 0.45rem 0 0; } @@ -69,7 +70,7 @@ const mapId = `visit-map-${Math.random().toString(36).slice(2, 8)}`; .vm-btn.kakao { background: #FEE500; color: #191919; } .vm-btn.google { background: var(--primary-900); } .visit-map.compact .vm-grid { grid-template-columns: 1fr; } - @media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; } .vm-map { aspect-ratio: 4 / 3; } } + @media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; } .vm-map { flex: none; aspect-ratio: 4 / 3; min-height: 0; } } @media print { .vm-map { break-inside: avoid; } .vm-actions { display: none; } } @@ -92,6 +93,9 @@ const mapId = `visit-map-${Math.random().toString(36).slice(2, 8)}`; L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); const icon = L.divIcon({ className: 'vm-pin', html: '', iconSize: [34, 44], iconAnchor: [17, 44], popupAnchor: [0, -40] }); L.marker([lat, lng], { icon }).addTo(map).bindPopup(`${el.dataset.name ?? ''}`); + // 카드 높이에 맞춰 늘어난 뒤 타일이 빈 곳 없이 채워지도록 + const fix = () => map.invalidateSize(); + requestAnimationFrame(fix); window.addEventListener('resize', fix, { passive: true }); if ('ResizeObserver' in window) new ResizeObserver(fix).observe(el); } }; document.head.appendChild(s); diff --git a/templates/supporters-astro/src/components/VisitMap.astro b/templates/supporters-astro/src/components/VisitMap.astro index 91ee282..757410c 100644 --- a/templates/supporters-astro/src/components/VisitMap.astro +++ b/templates/supporters-astro/src/components/VisitMap.astro @@ -51,8 +51,9 @@ const mapId = `visit-map-${Math.random().toString(36).slice(2, 8)}`; .vm-head { margin-bottom: 1.2rem; } .vm-head h2 { margin: 0.2rem 0 0.2rem; font-size: 1.6rem; } .vm-head .sub { margin: 0; color: var(--slate-600); } - .vm-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.9fr); gap: 1.25rem; align-items: start; } - .vm-map { width: 100%; aspect-ratio: 16 / 10; min-height: 260px; border-radius: 16px; overflow: hidden; border: 1px solid var(--slate-100); box-shadow: var(--shadow); background: var(--primary-50); z-index: 0; } + .vm-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 1.25rem; align-items: stretch; } + .vm-map-wrap { display: flex; flex-direction: column; min-height: 0; } + .vm-map { width: 100%; flex: 1 1 auto; min-height: 340px; border-radius: 16px; overflow: hidden; border: 1px solid var(--slate-100); box-shadow: var(--shadow); background: var(--primary-50); z-index: 0; } .vm-empty { display: grid; place-items: center; color: var(--slate-500); font-size: 0.92rem; padding: 1rem; text-align: center; } .vm-empty p { margin: 0; } .vm-attr { font-size: 0.74rem; color: var(--slate-500); margin: 0.45rem 0 0; } @@ -69,7 +70,7 @@ const mapId = `visit-map-${Math.random().toString(36).slice(2, 8)}`; .vm-btn.kakao { background: #FEE500; color: #191919; } .vm-btn.google { background: var(--primary-900); } .visit-map.compact .vm-grid { grid-template-columns: 1fr; } - @media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; } .vm-map { aspect-ratio: 4 / 3; } } + @media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; } .vm-map { flex: none; aspect-ratio: 4 / 3; min-height: 0; } } @media print { .vm-map { break-inside: avoid; } .vm-actions { display: none; } } @@ -92,6 +93,9 @@ const mapId = `visit-map-${Math.random().toString(36).slice(2, 8)}`; L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); const icon = L.divIcon({ className: 'vm-pin', html: '', iconSize: [34, 44], iconAnchor: [17, 44], popupAnchor: [0, -40] }); L.marker([lat, lng], { icon }).addTo(map).bindPopup(`${el.dataset.name ?? ''}`); + // 카드 높이에 맞춰 늘어난 뒤 타일이 빈 곳 없이 채워지도록 + const fix = () => map.invalidateSize(); + requestAnimationFrame(fix); window.addEventListener('resize', fix, { passive: true }); if ('ResizeObserver' in window) new ResizeObserver(fix).observe(el); } }; document.head.appendChild(s);