a8afaf4af2
표 디자인 - 모든 표를 가벼운 스타일로 통일(.data-table 경량화: 작은 회색 헤더·연한 구분선·hover) - 표/패널 바깥 테두리 둥글게(rounded-lg) 일괄 적용, 표 래퍼에 패딩 카드(p-4) 통일 - 표 헤더·데이터 정렬을 전 화면 좌측 기준으로 통일 - .data-table th/td text-align:left (전역), 흩어진 center/right 정렬 정리 - 재디자인 Tailwind 표(포장단위·단가·기본코드·담당자·업체·판매대행소·무료대상자·지정판매소)도 셀 좌측화 - 기본정보관리 등 나머지 소메뉴 표를 기본 코드 관리 스타일(가벼운 표·상태 pill)로 재디자인 워크스페이스/공통 - "이 화면 설명" → 새 탭 대신 우측 드로어 팝업(현재 화면과 동시에 보기, Esc·드래그 폭조절) - 상단바 글씨 크기 조절(A−/A+), 작업 내용에 zoom 적용 - 탭 최대치 도달 시 자동 삭제 대신 안내 토스트, "모두 닫기"(업무 현황 탭은 보존) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
57 lines
3.0 KiB
PHP
57 lines
3.0 KiB
PHP
<?= view('components/print_header', ['printTitle' => '지정판매소 지도']) ?>
|
|
<section class="border-b border-gray-300 p-2 shrink-0 bg-control-panel">
|
|
<div class="flex flex-wrap items-center justify-between gap-y-2">
|
|
<span class="text-sm font-bold text-gray-700">지정판매소 지도</span>
|
|
<a href="<?= mgmt_url('designated-shops') ?>" class="border border-gray-300 text-gray-600 px-3 py-1 rounded-sm text-sm hover:bg-gray-50">목록으로</a>
|
|
</div>
|
|
</section>
|
|
<div id="kakao-map" class="w-full border border-gray-300 rounded-lg mt-2" style="height:600px;"></div>
|
|
<div class="mt-2 text-sm text-gray-500">총 <?= count($shops) ?>개 판매소 표시</div>
|
|
|
|
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?= esc($kakaoJavascriptKey ?? '', 'attr') ?>&libraries=services"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var mapContainer = document.getElementById('kakao-map');
|
|
if (typeof kakao === 'undefined' || typeof kakao.maps === 'undefined') {
|
|
mapContainer.innerHTML = '<div class="flex items-center justify-center h-full text-gray-500 text-sm px-4 text-center">카카오맵을 불러올 수 없습니다. Kakao Developers → 제품 설정에서 「Kakao Map」을 켜고, 플랫폼(Web)에 이 사이트 URL을 등록했는지 확인하세요.</div>';
|
|
return;
|
|
}
|
|
|
|
var mapOption = {
|
|
center: new kakao.maps.LatLng(35.8714, 128.6014), // 대구 기본 좌표
|
|
level: 8
|
|
};
|
|
var map = new kakao.maps.Map(mapContainer, mapOption);
|
|
|
|
var geocoder = new kakao.maps.services.Geocoder();
|
|
var shops = <?= json_encode(array_map(function($s) {
|
|
return ['name' => $s->ds_name, 'addr' => $s->ds_addr ?? '', 'rep' => $s->ds_rep_name ?? '', 'tel' => $s->ds_tel ?? ''];
|
|
}, $shops), JSON_UNESCAPED_UNICODE) ?>;
|
|
|
|
var bounds = new kakao.maps.LatLngBounds();
|
|
var markerCount = 0;
|
|
|
|
shops.forEach(function(shop) {
|
|
if (!shop.addr) return;
|
|
geocoder.addressSearch(shop.addr, function(result, status) {
|
|
if (status === kakao.maps.services.Status.OK) {
|
|
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
|
|
var marker = new kakao.maps.Marker({ map: map, position: coords });
|
|
var infoContent = '<div style="padding:5px;font-size:12px;min-width:150px;">' +
|
|
'<strong>' + shop.name + '</strong><br/>' +
|
|
(shop.rep ? '대표: ' + shop.rep + '<br/>' : '') +
|
|
(shop.tel ? 'TEL: ' + shop.tel + '<br/>' : '') +
|
|
'<span style="color:#888;">' + shop.addr + '</span></div>';
|
|
var infowindow = new kakao.maps.InfoWindow({ content: infoContent });
|
|
kakao.maps.event.addListener(marker, 'click', function() {
|
|
infowindow.open(map, marker);
|
|
});
|
|
bounds.extend(coords);
|
|
markerCount++;
|
|
if (markerCount > 0) map.setBounds(bounds);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|