@dssp/dkpi 1.0.0-y.0 → 1.0.1

package/dist-client/google-map/common-google-map.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+declare global {
+    interface Window {
+        google: any;
+        markerClusterer?: any;
+    }
+}
+export declare class CommonGoogleMap extends LitElement {
+    static styles: import("lit").CSSResult[];
+    center: any;
+    zoom: any;
+    locations: any[];
+    focused: any;
+    polygons: any;
+    polylines: any;
+    markers: any;
+    boundCoords: any;
+    controls: any;
+    clusterZoom: number;
+    map: any;
+    defaultCenter: any;
+    private _infoWindow;
+    private _markerClusterer;
+    private _buildMarkersTimer;
+    get anchor(): Element | null;
+    readyMap(): Promise<void>;
+    buildMarkers(locations?: any[]): Promise<void>;
+    get infoWindow(): any;
+    setFocus(focus: any, icon: any): void;
+    resetFocus(focus: any, icon: any): void;
+    changeFocus(after: any, before: any): Promise<void>;
+    updated(changes: any): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    resetBounds(): void;
+}

package/dist-client/google-map/common-google-map.js

@@ -0,0 +1,349 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import GoogleMapLoader from './google-map-loader.js';
+let CommonGoogleMap = class CommonGoogleMap extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.locations = [];
+        this.clusterZoom = 10;
+        this.map = null;
+        this.defaultCenter = { lat: 36.5, lng: 127.5 };
+        this._infoWindow = null;
+        this._markerClusterer = null;
+        this._buildMarkersTimer = null;
+    }
+    get anchor() {
+        return this.renderRoot.querySelector('[map]');
+    }
+    async readyMap() {
+        var _a;
+        await GoogleMapLoader.load();
+        // MarkerClusterer 라이브러리 로드
+        if (!window.markerClusterer) {
+            await GoogleMapLoader.loadMarkerClusterer();
+        }
+        if (this.map) {
+            return;
+        }
+        // DOM이 준비될 때까지 기다림
+        await this.updateComplete;
+        // anchor가 준비될 때까지 기다림
+        let attempts = 0;
+        const maxAttempts = 20;
+        while (attempts < maxAttempts) {
+            const anchor = this.anchor;
+            if (anchor && anchor.offsetWidth > 0) {
+                break;
+            }
+            await new Promise(resolve => setTimeout(resolve, 50));
+            attempts++;
+        }
+        if (!this.anchor) {
+            console.error('Map anchor element not found');
+            return;
+        }
+        var show = async (center, zoom) => {
+            try {
+                // Google Maps 최신 API 사용
+                const { Map } = (await google.maps.importLibrary('maps'));
+                const mapOptions = {
+                    zoom,
+                    center,
+                    mapId: 'DEMO_MAP_ID'
+                };
+                // controls 속성이 있으면 지도 옵션에 추가
+                if (this.controls) {
+                    Object.assign(mapOptions, this.controls);
+                }
+                const map = new Map(this.anchor, mapOptions);
+                this.markers && this.markers.forEach(marker => marker.setMap(map));
+                this.map = map;
+                this.dispatchEvent(new CustomEvent('map-change', {
+                    detail: this.map
+                }));
+                // 줌 변경 이벤트 전달
+                map.addListener('zoom_changed', () => {
+                    this.dispatchEvent(new CustomEvent('zoom-changed', {
+                        detail: { zoom: map.getZoom() },
+                        bubbles: true,
+                        composed: true
+                    }));
+                });
+                this.resetBounds();
+            }
+            catch (e) {
+                console.error(e);
+            }
+        };
+        var { center, zoom = 10 } = this;
+        /* center 속성이 설정되어있지 않으면, 현재 위치를 구해서 지도의 center로 설정한다. */
+        if (!center && 'geolocation' in navigator && !((_a = this.boundCoords) === null || _a === void 0 ? void 0 : _a.length)) {
+            navigator.geolocation.getCurrentPosition(({ coords: { latitude: lat, longitude: lng } }) => show({ lat, lng }, zoom), err => {
+                console.warn(`navigator.geolocation.getCurrentPosition failed. (${err.code}): ${err.message}`);
+                show(this.defaultCenter, zoom);
+            }, {
+                /* https://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt */
+                timeout: 500
+            });
+        }
+        else {
+            show(center, zoom);
+        }
+    }
+    async buildMarkers(locations = []) {
+        if (!this.map) {
+            return;
+        }
+        if (this.markers) {
+            this.markers.forEach(marker => marker.setMap(null));
+            this.markers = [];
+        }
+        // 기존 클러스터 제거
+        if (this._markerClusterer) {
+            this._markerClusterer.clearMarkers();
+            this._markerClusterer = null;
+        }
+        // Google Maps 최신 API 사용
+        const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary('marker'));
+        this.markers = locations
+            .map(location => {
+            var _a;
+            // location 객체가 유효한지 확인
+            if (!location || typeof location !== 'object') {
+                console.warn('Invalid location object:', location);
+                return null;
+            }
+            // lat, lng 값이 유효한지 확인
+            const lat = parseFloat(location.lat);
+            const lng = parseFloat(location.lng);
+            if (isNaN(lat) || isNaN(lng)) {
+                console.warn('Invalid lat/lng values:', location);
+                return null;
+            }
+            // LatLng 객체 생성
+            const position = new google.maps.LatLng(lat, lng);
+            // 커스텀 마커 콘텐츠가 있으면 사용
+            let markerElement;
+            if (location.markerContent) {
+                // HTML 문자열을 DOM 요소로 변환
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = location.markerContent;
+                markerElement = tempDiv.firstElementChild;
+            }
+            else {
+                // 기본 핀 사용
+                markerElement = new PinElement({
+                    background: '#1976d2',
+                    borderColor: '#1565c0',
+                    glyphColor: '#ffffff',
+                    scale: 1.2
+                });
+            }
+            // AdvancedMarkerElement 사용
+            // collisionBehavior: 레이블(마커)이 서로 겹치면 우선순위 낮은 쪽을 자동 숨김 →
+            // 시도/시군구 레이블이 축척에 따라 겹쳐 보이는 문제 완화.
+            const marker = new AdvancedMarkerElement({
+                position: position,
+                map: this.map,
+                content: markerElement,
+                collisionBehavior: (_a = google.maps.CollisionBehavior) === null || _a === void 0 ? void 0 : _a.OPTIONAL_AND_HIDES_LOWER_PRIORITY
+            });
+            marker.addListener('click', () => {
+                // InfoWindow 대신 커스텀 이벤트 발생
+                if (location === null || location === void 0 ? void 0 : location.region) {
+                    this.dispatchEvent(new CustomEvent('region-click', {
+                        detail: { region: location.region },
+                        bubbles: true,
+                        composed: true
+                    }));
+                }
+            });
+            return marker;
+        })
+            .filter(marker => marker !== null); // null 마커 제거
+        // MarkerClusterer 미사용 — 마커 수가 적으므로 직접 지도에 표시
+    }
+    get infoWindow() {
+        if (!this._infoWindow && this.map) {
+            this._infoWindow = new google.maps.InfoWindow({
+                content: 'loading...'
+            });
+        }
+        return this._infoWindow;
+    }
+    setFocus(focus, icon) {
+        focus.setZIndex(1);
+        focus.setIcon(icon);
+    }
+    resetFocus(focus, icon) {
+        focus.setZIndex(0);
+        focus.setIcon(icon);
+    }
+    async changeFocus(after, before) {
+        var _a;
+        await this.readyMap();
+        // map이 준비되지 않았으면 포커스 변경하지 않음
+        if (!this.map) {
+            return;
+        }
+        var locations = this.locations || [];
+        if (before) {
+            var idx = locations.findIndex(location => {
+                // location 객체의 구조를 안전하게 확인
+                const beforePos = before === null || before === void 0 ? void 0 : before.position;
+                const locationPos = location === null || location === void 0 ? void 0 : location.position;
+                return ((location === null || location === void 0 ? void 0 : location.name) == (before === null || before === void 0 ? void 0 : before.name) && (locationPos === null || locationPos === void 0 ? void 0 : locationPos.lat) == (beforePos === null || beforePos === void 0 ? void 0 : beforePos.lat) && (locationPos === null || locationPos === void 0 ? void 0 : locationPos.lng) == (beforePos === null || beforePos === void 0 ? void 0 : beforePos.lng));
+            });
+            idx !== -1 && this.markers && this.resetFocus(this.markers[idx], (_a = locations[idx]) === null || _a === void 0 ? void 0 : _a.icon);
+        }
+        if (after) {
+            var idx = locations.findIndex(location => {
+                // location 객체의 구조를 안전하게 확인
+                const afterPos = after === null || after === void 0 ? void 0 : after.position;
+                const locationPos = location === null || location === void 0 ? void 0 : location.position;
+                return (location === null || location === void 0 ? void 0 : location.name) == (after === null || after === void 0 ? void 0 : after.name) && (locationPos === null || locationPos === void 0 ? void 0 : locationPos.lat) == (afterPos === null || afterPos === void 0 ? void 0 : afterPos.lat) && (locationPos === null || locationPos === void 0 ? void 0 : locationPos.lng) == (afterPos === null || afterPos === void 0 ? void 0 : afterPos.lng);
+            });
+            idx !== -1 && this.markers && this.setFocus(this.markers[idx], after === null || after === void 0 ? void 0 : after.icon);
+        }
+    }
+    async updated(changes) {
+        if (!this.map) {
+            await this.readyMap();
+        }
+        if (changes.has('locations')) {
+            // 디바운스: 연속된 업데이트를 하나로 묶음
+            if (this._buildMarkersTimer) {
+                clearTimeout(this._buildMarkersTimer);
+            }
+            this._buildMarkersTimer = setTimeout(() => {
+                this.buildMarkers(this.locations);
+                this._buildMarkersTimer = null;
+            }, 500);
+        }
+        if (changes.has('focused')) {
+            this.changeFocus(this.focused, changes.get('focused'));
+        }
+        if (changes.has('center')) {
+            this.map.setCenter(this.center);
+        }
+        if (changes.has('controls')) {
+            // controls가 변경되면 기존 지도의 옵션만 업데이트
+            if (this.map && this.controls) {
+                // Google Maps API의 setOptions 메서드 사용
+                this.map.setOptions(this.controls);
+            }
+        }
+        if (changes.has('polygons')) {
+            ;
+            (changes.get('polygons') || []).forEach(geofence => geofence.setMap(null));
+            (this.polygons || []).forEach(geofence => geofence.setMap(this.map));
+        }
+        if (changes.has('polylines')) {
+            ;
+            (changes.get('polylines') || []).forEach(polyline => polyline.setMap(null));
+            (this.polylines || []).forEach(polyline => polyline.setMap(this.map));
+        }
+        if (changes.has('markers')) {
+            ;
+            (changes.get('markers') || []).forEach(marker => marker.setMap(null));
+            (this.markers || []).forEach(marker => marker.setMap(this.map));
+        }
+        if (changes.has('boundCoords')) {
+            this.resetBounds();
+        }
+        // 클러스터링 설정 변경 시 마커 재구성
+        if (changes.has('clusterZoom')) {
+            this.buildMarkers(this.locations);
+        }
+    }
+    render() {
+        return html ` <div map></div> `;
+    }
+    resetBounds() {
+        if (!this.boundCoords || this.boundCoords.length < 1 || !this.map) {
+            return;
+        }
+        var bounds = new google.maps.LatLngBounds();
+        this.boundCoords.forEach(coord => bounds.extend(coord));
+        this.map.fitBounds(bounds);
+    }
+};
+CommonGoogleMap.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+      }
+
+      [map] {
+        flex: 1;
+      }
+
+      .gm-style .gm-style-iw-c {
+        padding: 0;
+      }
+
+      .gm-style .gm-style-iw-d {
+        overflow: auto !important;
+      }
+      .gm-style .gm-style-iw-d + button {
+        top: 0 !important;
+        right: 0 !important;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "center", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "zoom", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], CommonGoogleMap.prototype, "locations", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "focused", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "polygons", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "polylines", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "markers", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "boundCoords", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "controls", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "clusterZoom", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "map", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "defaultCenter", void 0);
+CommonGoogleMap = __decorate([
+    customElement('common-google-map')
+], CommonGoogleMap);
+export { CommonGoogleMap };
+//# sourceMappingURL=common-google-map.js.map

package/dist-client/google-map/common-google-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-google-map.js","sourceRoot":"","sources":["../../client/google-map/common-google-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport GoogleMapLoader from './google-map-loader.js'\n\ndeclare global {\n  interface Window {\n    google: any\n    markerClusterer?: any\n  }\n}\n\ndeclare const google: any\n\ndeclare namespace google.maps {\n  interface MapsLibrary {\n    Map: any\n    InfoWindow: any\n  }\n\n  interface MarkerLibrary {\n    AdvancedMarkerElement: any\n    PinElement: any\n  }\n}\n\n@customElement('common-google-map')\nexport class CommonGoogleMap extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      [map] {\n        flex: 1;\n      }\n\n      .gm-style .gm-style-iw-c {\n        padding: 0;\n      }\n\n      .gm-style .gm-style-iw-d {\n        overflow: auto !important;\n      }\n      .gm-style .gm-style-iw-d + button {\n        top: 0 !important;\n        right: 0 !important;\n      }\n    `\n  ]\n\n  @property({ type: Object }) center\n  @property({ type: Number }) zoom\n  @property({ type: Array }) locations: any[] = []\n  @property({ type: Object }) focused\n  @property({ type: Array }) polygons\n  @property({ type: Array }) polylines\n  @property({ type: Array }) markers\n  @property({ type: Array }) boundCoords\n  @property({ type: Object }) controls\n  @property({ type: Number }) clusterZoom = 10\n\n  @state() map: any = null\n  @state() defaultCenter: any = { lat: 36.5, lng: 127.5 }\n  private _infoWindow: any = null\n  private _markerClusterer: any = null\n  private _buildMarkersTimer: any = null\n\n  get anchor() {\n    return this.renderRoot.querySelector('[map]')\n  }\n\n  async readyMap() {\n    await GoogleMapLoader.load()\n\n    // MarkerClusterer 라이브러리 로드\n    if (!window.markerClusterer) {\n      await GoogleMapLoader.loadMarkerClusterer()\n    }\n\n    if (this.map) {\n      return\n    }\n\n    // DOM이 준비될 때까지 기다림\n    await this.updateComplete\n\n    // anchor가 준비될 때까지 기다림\n    let attempts = 0\n    const maxAttempts = 20\n    while (attempts < maxAttempts) {\n      const anchor = this.anchor as HTMLElement\n      if (anchor && anchor.offsetWidth > 0) {\n        break\n      }\n      await new Promise(resolve => setTimeout(resolve, 50))\n      attempts++\n    }\n\n    if (!this.anchor) {\n      console.error('Map anchor element not found')\n      return\n    }\n\n    var show = async (center, zoom) => {\n      try {\n        // Google Maps 최신 API 사용\n        const { Map } = (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary\n\n        const mapOptions = {\n          zoom,\n          center,\n          mapId: 'DEMO_MAP_ID'\n        }\n\n        // controls 속성이 있으면 지도 옵션에 추가\n        if (this.controls) {\n          Object.assign(mapOptions, this.controls)\n        }\n\n        const map = new Map(this.anchor, mapOptions)\n\n        this.markers && this.markers.forEach(marker => marker.setMap(map))\n\n        this.map = map\n\n        this.dispatchEvent(\n          new CustomEvent('map-change', {\n            detail: this.map\n          })\n        )\n\n        // 줌 변경 이벤트 전달\n        map.addListener('zoom_changed', () => {\n          this.dispatchEvent(\n            new CustomEvent('zoom-changed', {\n              detail: { zoom: map.getZoom() },\n              bubbles: true,\n              composed: true\n            })\n          )\n        })\n\n        this.resetBounds()\n      } catch (e) {\n        console.error(e)\n      }\n    }\n\n    var { center, zoom = 10 } = this\n\n    /* center 속성이 설정되어있지 않으면, 현재 위치를 구해서 지도의 center로 설정한다. */\n    if (!center && 'geolocation' in navigator && !this.boundCoords?.length) {\n      navigator.geolocation.getCurrentPosition(\n        ({ coords: { latitude: lat, longitude: lng } }) => show({ lat, lng }, zoom),\n        err => {\n          console.warn(`navigator.geolocation.getCurrentPosition failed. (${err.code}): ${err.message}`)\n          show(this.defaultCenter, zoom)\n        },\n        {\n          /* https://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt */\n          timeout: 500\n        }\n      )\n    } else {\n      show(center, zoom)\n    }\n  }\n\n  async buildMarkers(locations: any[] = []) {\n    if (!this.map) {\n      return\n    }\n\n    if (this.markers) {\n      this.markers.forEach(marker => marker.setMap(null))\n      this.markers = []\n    }\n\n    // 기존 클러스터 제거\n    if (this._markerClusterer) {\n      this._markerClusterer.clearMarkers()\n      this._markerClusterer = null\n    }\n\n    // Google Maps 최신 API 사용\n    const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary(\n      'marker'\n    )) as google.maps.MarkerLibrary\n\n    this.markers = locations\n      .map(location => {\n        // location 객체가 유효한지 확인\n        if (!location || typeof location !== 'object') {\n          console.warn('Invalid location object:', location)\n          return null\n        }\n\n        // lat, lng 값이 유효한지 확인\n        const lat = parseFloat(location.lat)\n        const lng = parseFloat(location.lng)\n\n        if (isNaN(lat) || isNaN(lng)) {\n          console.warn('Invalid lat/lng values:', location)\n          return null\n        }\n\n        // LatLng 객체 생성\n        const position = new google.maps.LatLng(lat, lng)\n\n        // 커스텀 마커 콘텐츠가 있으면 사용\n        let markerElement\n        if (location.markerContent) {\n          // HTML 문자열을 DOM 요소로 변환\n          const tempDiv = document.createElement('div')\n          tempDiv.innerHTML = location.markerContent\n          markerElement = tempDiv.firstElementChild\n        } else {\n          // 기본 핀 사용\n          markerElement = new PinElement({\n            background: '#1976d2',\n            borderColor: '#1565c0',\n            glyphColor: '#ffffff',\n            scale: 1.2\n          })\n        }\n\n        // AdvancedMarkerElement 사용\n        // collisionBehavior: 레이블(마커)이 서로 겹치면 우선순위 낮은 쪽을 자동 숨김 →\n        // 시도/시군구 레이블이 축척에 따라 겹쳐 보이는 문제 완화.\n        const marker = new AdvancedMarkerElement({\n          position: position,\n          map: this.map,\n          content: markerElement,\n          collisionBehavior: (google.maps as any).CollisionBehavior?.OPTIONAL_AND_HIDES_LOWER_PRIORITY\n        })\n\n        marker.addListener('click', () => {\n          // InfoWindow 대신 커스텀 이벤트 발생\n          if (location?.region) {\n            this.dispatchEvent(\n              new CustomEvent('region-click', {\n                detail: { region: location.region },\n                bubbles: true,\n                composed: true\n              })\n            )\n          }\n        })\n\n        return marker\n      })\n      .filter(marker => marker !== null) // null 마커 제거\n\n    // MarkerClusterer 미사용 — 마커 수가 적으므로 직접 지도에 표시\n  }\n\n  get infoWindow() {\n    if (!this._infoWindow && this.map) {\n      this._infoWindow = new google.maps.InfoWindow({\n        content: 'loading...'\n      })\n    }\n\n    return this._infoWindow\n  }\n\n  setFocus(focus, icon) {\n    focus.setZIndex(1)\n    focus.setIcon(icon)\n  }\n\n  resetFocus(focus, icon) {\n    focus.setZIndex(0)\n    focus.setIcon(icon)\n  }\n\n  async changeFocus(after, before) {\n    await this.readyMap()\n\n    // map이 준비되지 않았으면 포커스 변경하지 않음\n    if (!this.map) {\n      return\n    }\n\n    var locations = this.locations || []\n\n    if (before) {\n      var idx = locations.findIndex(location => {\n        // location 객체의 구조를 안전하게 확인\n        const beforePos = before?.position\n        const locationPos = location?.position\n\n        return (\n          location?.name == before?.name && locationPos?.lat == beforePos?.lat && locationPos?.lng == beforePos?.lng\n        )\n      })\n      idx !== -1 && this.markers && this.resetFocus(this.markers[idx], locations[idx]?.icon)\n    }\n\n    if (after) {\n      var idx = locations.findIndex(location => {\n        // location 객체의 구조를 안전하게 확인\n        const afterPos = after?.position\n        const locationPos = location?.position\n\n        return location?.name == after?.name && locationPos?.lat == afterPos?.lat && locationPos?.lng == afterPos?.lng\n      })\n      idx !== -1 && this.markers && this.setFocus(this.markers[idx], after?.icon)\n    }\n  }\n\n  async updated(changes) {\n    if (!this.map) {\n      await this.readyMap()\n    }\n\n    if (changes.has('locations')) {\n      // 디바운스: 연속된 업데이트를 하나로 묶음\n      if (this._buildMarkersTimer) {\n        clearTimeout(this._buildMarkersTimer)\n      }\n      this._buildMarkersTimer = setTimeout(() => {\n        this.buildMarkers(this.locations)\n        this._buildMarkersTimer = null\n      }, 500)\n    }\n\n    if (changes.has('focused')) {\n      this.changeFocus(this.focused, changes.get('focused'))\n    }\n\n    if (changes.has('center')) {\n      this.map.setCenter(this.center)\n    }\n\n    if (changes.has('controls')) {\n      // controls가 변경되면 기존 지도의 옵션만 업데이트\n      if (this.map && this.controls) {\n        // Google Maps API의 setOptions 메서드 사용\n        this.map.setOptions(this.controls)\n      }\n    }\n\n    if (changes.has('polygons')) {\n      ;(changes.get('polygons') || []).forEach(geofence => geofence.setMap(null))\n      ;(this.polygons || []).forEach(geofence => geofence.setMap(this.map))\n    }\n\n    if (changes.has('polylines')) {\n      ;(changes.get('polylines') || []).forEach(polyline => polyline.setMap(null))\n      ;(this.polylines || []).forEach(polyline => polyline.setMap(this.map))\n    }\n\n    if (changes.has('markers')) {\n      ;(changes.get('markers') || []).forEach(marker => marker.setMap(null))\n      ;(this.markers || []).forEach(marker => marker.setMap(this.map))\n    }\n\n    if (changes.has('boundCoords')) {\n      this.resetBounds()\n    }\n\n    // 클러스터링 설정 변경 시 마커 재구성\n    if (changes.has('clusterZoom')) {\n      this.buildMarkers(this.locations)\n    }\n  }\n\n  render() {\n    return html` <div map></div> `\n  }\n\n  resetBounds() {\n    if (!this.boundCoords || this.boundCoords.length < 1 || !this.map) {\n      return\n    }\n\n    var bounds = new google.maps.LatLngBounds()\n    this.boundCoords.forEach(coord => bounds.extend(coord))\n    this.map.fitBounds(bounds)\n  }\n}\n"]}

package/dist-client/google-map/google-map-loader.d.ts

@@ -0,0 +1,6 @@
+export default class GoogleMapLoader {
+    static loaded: boolean;
+    static markerClustererLoaded: boolean;
+    static load(): Promise<void>;
+    static loadMarkerClusterer(): Promise<void>;
+}

package/dist-client/google-map/google-map-loader.js

@@ -0,0 +1,23 @@
+import ScriptLoader from '@operato/utils/script-loader.js';
+class GoogleMapLoader {
+    static async load() {
+        if (GoogleMapLoader.loaded) {
+            return;
+        }
+        var key = 'AIzaSyBgQZb-SFqjQBC_XTxNiz0XapejNwV9PgA';
+        await ScriptLoader.load('https://maps.googleapis.com/maps/api/js' + (key ? '?key=' + key : '') + '&libraries=places');
+        GoogleMapLoader.loaded = true;
+    }
+    static async loadMarkerClusterer() {
+        if (GoogleMapLoader.markerClustererLoaded) {
+            return;
+        }
+        // Google Maps 공식 MarkerClusterer 라이브러리 로드
+        await ScriptLoader.load('https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js');
+        GoogleMapLoader.markerClustererLoaded = true;
+    }
+}
+GoogleMapLoader.loaded = false;
+GoogleMapLoader.markerClustererLoaded = false;
+export default GoogleMapLoader;
+//# sourceMappingURL=google-map-loader.js.map

package/dist-client/google-map/google-map-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-map-loader.js","sourceRoot":"","sources":["../../client/google-map/google-map-loader.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,iCAAiC,CAAA;AAE1D,MAAqB,eAAe;IAIlC,MAAM,CAAC,KAAK,CAAC,IAAI;QACf,IAAI,eAAe,CAAC,MAAM,EAAE,CAAC;YAC3B,OAAM;QACR,CAAC;QACD,IAAI,GAAG,GAAG,yCAAyC,CAAA;QAEnD,MAAM,YAAY,CAAC,IAAI,CACrB,yCAAyC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,mBAAmB,CAC7F,CAAA;QACD,eAAe,CAAC,MAAM,GAAG,IAAI,CAAA;IAC/B,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,mBAAmB;QAC9B,IAAI,eAAe,CAAC,qBAAqB,EAAE,CAAC;YAC1C,OAAM;QACR,CAAC;QAED,0CAA0C;QAC1C,MAAM,YAAY,CAAC,IAAI,CAAC,iEAAiE,CAAC,CAAA;QAE1F,eAAe,CAAC,qBAAqB,GAAG,IAAI,CAAA;IAC9C,CAAC;;AAxBM,sBAAM,GAAG,KAAK,CAAA;AACd,qCAAqB,GAAG,KAAK,CAAA;eAFjB,eAAe","sourcesContent":["import ScriptLoader from '@operato/utils/script-loader.js'\n\nexport default class GoogleMapLoader {\n  static loaded = false\n  static markerClustererLoaded = false\n\n  static async load() {\n    if (GoogleMapLoader.loaded) {\n      return\n    }\n    var key = 'AIzaSyBgQZb-SFqjQBC_XTxNiz0XapejNwV9PgA'\n\n    await ScriptLoader.load(\n      'https://maps.googleapis.com/maps/api/js' + (key ? '?key=' + key : '') + '&libraries=places'\n    )\n    GoogleMapLoader.loaded = true\n  }\n\n  static async loadMarkerClusterer() {\n    if (GoogleMapLoader.markerClustererLoaded) {\n      return\n    }\n\n    // Google Maps 공식 MarkerClusterer 라이브러리 로드\n    await ScriptLoader.load('https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js')\n\n    GoogleMapLoader.markerClustererLoaded = true\n  }\n}\n"]}

package/dist-client/pages/component/project-update-header.d.ts

@@ -0,0 +1 @@
+import '@material/web/icon/icon.js';

package/dist-client/pages/component/project-update-header.js

@@ -0,0 +1,127 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+let DkpiProjectUpdateHeader = class DkpiProjectUpdateHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.projectId = '';
+        this.title = '';
+    }
+    render() {
+        const path = window.location.pathname;
+        const isCompleted = this.projectState === '20';
+        return html `
+      <div header>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          ${this.title}
+        </h2>
+
+        <div button-container>
+          ${isCompleted
+            ? html `
+                <md-elevated-button warn @click=${this._onUnfinalize} ?disabled=${!this.projectId}>
+                  <md-icon slot="icon">undo</md-icon>완료 상태 해제
+                </md-elevated-button>
+              `
+            : ''}
+          <md-elevated-button green @click=${this._dispatchEvent} ?disabled=${!this.projectId}>
+            <md-icon slot="icon">save</md-icon>정보 저장
+          </md-elevated-button>
+        </div>
+      </div>
+    `;
+    }
+    _dispatchEvent() {
+        this.dispatchEvent(new CustomEvent('custom-click'));
+    }
+    _onUnfinalize() {
+        this.dispatchEvent(new CustomEvent('unfinalize'));
+    }
+};
+DkpiProjectUpdateHeader.styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css `
+      div[header] {
+        display: flex;
+        margin: 0px var(--spacing-large, 12px);
+
+        h2 {
+          display: flex;
+          gap: 7px;
+          flex: 1;
+          margin-bottom: var(--spacing-medium, 8px);
+          color: #3f71a0;
+          font-size: 18px;
+
+          md-icon[back] {
+            background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);
+            color: white;
+            padding: 8px;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 2px 8px rgba(63, 113, 160, 0.3);
+            width: 14px;
+            height: 14px;
+            --md-icon-size: 20px;
+          }
+
+          md-icon[back]:hover {
+            background: linear-gradient(135deg, #2e5c89 0%, #4a7bb0 100%);
+            box-shadow: 0 4px 12px rgba(63, 113, 160, 0.4);
+          }
+        }
+      }
+
+      div[button-container] {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        flex: 1;
+        padding-top: var(--spacing-medium, 8px);
+
+        md-elevated-button {
+          margin: 0 var(--spacing-small, 4px);
+
+          --md-elevated-button-container-height: 32px;
+          --md-elevated-button-label-text-size: 16px;
+          --md-elevated-button-container-color: #0595e5;
+
+          --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-icon-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);
+
+          &[green] {
+            --md-elevated-button-container-color: #42b382;
+          }
+          &[warn] {
+            --md-elevated-button-container-color: #e67e22;
+          }
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], DkpiProjectUpdateHeader.prototype, "projectId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], DkpiProjectUpdateHeader.prototype, "title", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], DkpiProjectUpdateHeader.prototype, "projectState", void 0);
+DkpiProjectUpdateHeader = __decorate([
+    customElement('dkpi-project-update-header')
+], DkpiProjectUpdateHeader);
+//# sourceMappingURL=project-update-header.js.map

package/dist-client/pages/component/project-update-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-update-header.js","sourceRoot":"","sources":["../../../client/pages/component/project-update-header.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGxE,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAsE8B,cAAS,GAAW,EAAE,CAAA;QACtB,UAAK,GAAW,EAAE,CAAA;IAsChD,CAAC;IAlCC,MAAM;QACJ,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAA;QACrC,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAA;QAE9C,OAAO,IAAI,CAAA;;;6CAG8B,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;YACrD,IAAI,CAAC,KAAK;;;;YAIV,WAAW;YACX,CAAC,CAAC,IAAI,CAAA;kDACgC,IAAI,CAAC,aAAa,cAAc,CAAC,IAAI,CAAC,SAAS;;;eAGlF;YACH,CAAC,CAAC,EAAE;6CAC6B,IAAI,CAAC,cAAc,cAAc,CAAC,IAAI,CAAC,SAAS;;;;;KAKxF,CAAA;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAA;IACrD,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;IACnD,CAAC;;AA3GM,8BAAM,GAAG;IACd,qBAAqB;IACrB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;CACF,AAnEY,CAmEZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAsB;AAzE7C,uBAAuB;IAD5B,aAAa,CAAC,4BAA4B,CAAC;GACtC,uBAAuB,CA6G5B","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('dkpi-project-update-header')\nclass DkpiProjectUpdateHeader extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      div[header] {\n        display: flex;\n        margin: 0px var(--spacing-large, 12px);\n\n        h2 {\n          display: flex;\n          gap: 7px;\n          flex: 1;\n          margin-bottom: var(--spacing-medium, 8px);\n          color: #3f71a0;\n          font-size: 18px;\n\n          md-icon[back] {\n            background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);\n            color: white;\n            padding: 8px;\n            border-radius: 50%;\n            cursor: pointer;\n            box-shadow: 0 2px 8px rgba(63, 113, 160, 0.3);\n            width: 14px;\n            height: 14px;\n            --md-icon-size: 20px;\n          }\n\n          md-icon[back]:hover {\n            background: linear-gradient(135deg, #2e5c89 0%, #4a7bb0 100%);\n            box-shadow: 0 4px 12px rgba(63, 113, 160, 0.4);\n          }\n        }\n      }\n\n      div[button-container] {\n        display: flex;\n        align-items: center;\n        justify-content: end;\n        flex: 1;\n        padding-top: var(--spacing-medium, 8px);\n\n        md-elevated-button {\n          margin: 0 var(--spacing-small, 4px);\n\n          --md-elevated-button-container-height: 32px;\n          --md-elevated-button-label-text-size: 16px;\n          --md-elevated-button-container-color: #0595e5;\n\n          --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n\n          &[green] {\n            --md-elevated-button-container-color: #42b382;\n          }\n          &[warn] {\n            --md-elevated-button-container-color: #e67e22;\n          }\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) projectId: string = ''\n  @property({ type: String }) title: string = ''\n  /** ProjectState. '20' (COMPLETED) 면 \"완료 상태 해제\" 버튼 노출. */\n  @property({ type: String }) projectState?: string\n\n  render() {\n    const path = window.location.pathname\n    const isCompleted = this.projectState === '20'\n\n    return html`\n      <div header>\n        <h2>\n          <md-icon slot=\"icon\" back @click=${() => history.back()}>arrow_back</md-icon>\n          ${this.title}\n        </h2>\n\n        <div button-container>\n          ${isCompleted\n            ? html`\n                <md-elevated-button warn @click=${this._onUnfinalize} ?disabled=${!this.projectId}>\n                  <md-icon slot=\"icon\">undo</md-icon>완료 상태 해제\n                </md-elevated-button>\n              `\n            : ''}\n          <md-elevated-button green @click=${this._dispatchEvent} ?disabled=${!this.projectId}>\n            <md-icon slot=\"icon\">save</md-icon>정보 저장\n          </md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n\n  private _dispatchEvent() {\n    this.dispatchEvent(new CustomEvent('custom-click'))\n  }\n\n  private _onUnfinalize() {\n    this.dispatchEvent(new CustomEvent('unfinalize'))\n  }\n}\n"]}

package/dist-client/pages/kpi-admin/dssp-kpi-list-page.d.ts

@@ -0,0 +1,22 @@
+import './kpi-grade-2d-editor.js';
+import { TemplateResult } from 'lit';
+import { KpiListPage } from '@things-factory/kpi/dist-client/pages/kpi/kpi-list-page.js';
+import { KpiGrade2dEditor } from './kpi-grade-2d-editor.js';
+export declare class DsspKpiListPage extends KpiListPage {
+    static get scopedElements(): {
+        'kpi-grade-2d-editor': typeof KpiGrade2dEditor;
+        'kpi-importer': typeof import("@things-factory/kpi/dist-client/pages/kpi/kpi-importer.js").KpiImporter;
+        'kpi-grade-editor': typeof import("@things-factory/kpi/dist-client/pages/kpi/kpi-grade-editor.js").KpiGradeEditor;
+        'kpi-viz-editor': typeof import("@things-factory/kpi/dist-client/pages/kpi/kpi-viz-editor.js").KpiVizEditor;
+    };
+    /**
+     * CUSTOM scoreType 셀 렌더러.
+     * 2D 룩업 구조인 경우 행 수와 함께 표시.
+     */
+    protected renderCustomGradesCell(kpi: any): TemplateResult;
+    /**
+     * CUSTOM scoreType 편집.
+     * 2D 룩업이면 kpi-grade-2d-editor 팝업을 연다.
+     */
+    protected _editCustomGrades(kpi: any): Promise<void>;
+}