castad/o2o-infinith-demo
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(supporters): 오시는 길 지도를 카드 높이에 맞춰 늘림 (열 비율 1.5:1, invalidateSize)

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Haewon Kam 2026-09-11 11:48:49 +09:00
parent 587462552b
commit d13ac35365
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
supporters/src/components/VisitMap.astro
View File

@ -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; } }
</style>
@ -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: '&copy; <a href="https://www.openstreetmap.org/copyright" rel="noopener">OpenStreetMap</a> contributors' }).addTo(map);
const icon = L.divIcon({ className: 'vm-pin', html: '<svg width="34" height="44" viewBox="0 0 34 44" aria-hidden="true"><path d="M17 0C7.6 0 0 7.6 0 17c0 12.5 17 27 17 27s17-14.5 17-27C34 7.6 26.4 0 17 0Z" fill="#4F1DA1"/><circle cx="17" cy="17" r="6.5" fill="#fff"/></svg>', iconSize: [34, 44], iconAnchor: [17, 44], popupAnchor: [0, -40] });
L.marker([lat, lng], { icon }).addTo(map).bindPopup(`<b>${el.dataset.name ?? ''}</b>`);
// 카드 높이에 맞춰 늘어난 뒤 타일이 빈 곳 없이 채워지도록
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);