@dssp/dkpi 1.0.0-alpha.58 → 1.0.0-alpha.59

package/dist-client/components/kpi-trend-chart.js

@@ -0,0 +1,220 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let SvKpiTrendChart = class SvKpiTrendChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.valueKey = 'value';
+        this.dateKey = 'date';
+        this.width = 400;
+        this.height = 200;
+        this.lineColor = '#2196f3';
+        this.strokeWidth = 2;
+        this.showPoints = true;
+        this.pointRadius = 4;
+        this.chartWidth = 0;
+        this.chartHeight = 0;
+    }
+    render() {
+        return html `
+      <div class="chart-container">
+        <svg
+          id="trend-chart"
+          width=${this.chartWidth || this.width}
+          height=${this.chartHeight || this.height}
+          viewBox="0 0 ${this.chartWidth || this.width} ${this.chartHeight || this.height}"
+          preserveAspectRatio="xMidYMid meet"
+        ></svg>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const rect = entry.contentRect;
+                this.chartWidth = rect.width;
+                this.chartHeight = rect.height;
+                this.requestUpdate();
+            }
+        });
+        this.resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        super.disconnectedCallback();
+    }
+    updated() {
+        this.drawTrendChart();
+    }
+    drawTrendChart() {
+        if (!this.data || this.data.length === 0)
+            return;
+        const svg = d3.select(this.renderRoot.querySelector('#trend-chart'));
+        svg.selectAll('*').remove();
+        const margin = { top: 20, right: 20, bottom: 50, left: 40 };
+        const width = this.chartWidth || this.width;
+        const height = this.chartHeight || this.height;
+        const chartWidth = width - margin.left - margin.right;
+        const chartHeight = height - margin.top - margin.bottom;
+        // 데이터 파싱
+        const parsedData = this.data.map(d => ({
+            date: new Date(d[this.dateKey]),
+            value: +d[this.valueKey],
+            color: d.color || this.lineColor
+        }));
+        // 스케일 설정
+        const xScale = d3
+            .scaleTime()
+            .domain(d3.extent(parsedData, d => d.date))
+            .range([0, chartWidth]);
+        const yScale = d3
+            .scaleLinear()
+            .domain([0, d3.max(parsedData, d => d.value) || 100])
+            .range([chartHeight, 0]);
+        // SVG 설정
+        svg.attr('width', width).attr('height', height);
+        const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+        // 축 생성 - 연도가 바뀌면 연도 포함
+        const timeFormat = (date) => {
+            const dates = parsedData.map(d => d.date);
+            const years = [...new Set(dates.map(d => d.getFullYear()))];
+            // 여러 연도가 있으면 연도 포함
+            if (years.length > 1) {
+                return d3.timeFormat('%Y-%m')(date);
+            }
+            else {
+                return d3.timeFormat('%m/%d')(date);
+            }
+        };
+        const xAxis = d3.axisBottom(xScale).tickFormat(timeFormat).ticks(Math.min(parsedData.length, 10));
+        const yAxis = d3.axisLeft(yScale).ticks(5);
+        // X축 그리드 라인 추가
+        g.append('g')
+            .attr('class', 'grid')
+            .attr('transform', `translate(0,${chartHeight})`)
+            .call(d3
+            .axisBottom(xScale)
+            .ticks(Math.min(parsedData.length, 10))
+            .tickSize(-chartHeight)
+            .tickFormat(() => ''));
+        g.append('g')
+            .attr('class', 'axis')
+            .attr('transform', `translate(0,${chartHeight})`)
+            .call(xAxis)
+            .selectAll('text')
+            .style('text-anchor', 'end')
+            .attr('dx', '-.5em')
+            .attr('dy', '.3em')
+            .attr('transform', 'rotate(-30)');
+        g.append('g').attr('class', 'axis').call(yAxis);
+        // 라인 생성기
+        const line = d3
+            .line()
+            .x(d => xScale(d.date))
+            .y(d => yScale(d.value))
+            .curve(d3.curveMonotoneX);
+        // 트렌드 라인 그리기
+        g.append('path')
+            .datum(parsedData)
+            .attr('class', 'trend-line')
+            .attr('d', line)
+            .attr('stroke', this.lineColor)
+            .attr('stroke-width', this.strokeWidth);
+        // 데이터 포인트 그리기
+        if (this.showPoints) {
+            g.selectAll('.data-point')
+                .data(parsedData)
+                .enter()
+                .append('circle')
+                .attr('class', 'data-point')
+                .attr('cx', d => xScale(d.date))
+                .attr('cy', d => yScale(d.value))
+                .attr('r', this.pointRadius)
+                .attr('stroke', d => d.color)
+                .attr('fill', 'white');
+        }
+    }
+};
+SvKpiTrendChart.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .chart-container {
+      width: 100%;
+      height: 100%;
+    }
+
+    .trend-line {
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .data-point {
+      fill: white;
+      stroke-width: 2;
+    }
+
+    .axis line,
+    .axis path,
+    .grid line {
+      stroke: #ddd;
+    }
+
+    .grid path {
+      stroke: none;
+    }
+
+    .axis text {
+      font-size: 10px;
+      fill: #666;
+    }
+  `;
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], SvKpiTrendChart.prototype, "data", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiTrendChart.prototype, "valueKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiTrendChart.prototype, "dateKey", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], SvKpiTrendChart.prototype, "width", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], SvKpiTrendChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiTrendChart.prototype, "lineColor", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], SvKpiTrendChart.prototype, "strokeWidth", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], SvKpiTrendChart.prototype, "showPoints", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], SvKpiTrendChart.prototype, "pointRadius", void 0);
+SvKpiTrendChart = __decorate([
+    customElement('sv-kpi-trend-chart')
+], SvKpiTrendChart);
+export { SvKpiTrendChart };
+//# sourceMappingURL=kpi-trend-chart.js.map

package/dist-client/components/kpi-trend-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-trend-chart.js","sourceRoot":"","sources":["../../client/components/kpi-trend-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('sv-kpi-trend-chart')\nexport class SvKpiTrendChart extends LitElement {\n  @property({ type: Array }) data: { date: string; value: number; color?: string }[] = []\n  @property({ type: String }) valueKey: string = 'value'\n  @property({ type: String }) dateKey: string = 'date'\n  @property({ type: Number }) width: number = 400\n  @property({ type: Number }) height: number = 200\n  @property({ type: String }) lineColor: string = '#2196f3'\n  @property({ type: Number }) strokeWidth: number = 2\n  @property({ type: Boolean }) showPoints: boolean = true\n  @property({ type: Number }) pointRadius: number = 4\n\n  private chartWidth = 0\n  private chartHeight = 0\n  private resizeObserver?: ResizeObserver\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-container {\n      width: 100%;\n      height: 100%;\n    }\n\n    .trend-line {\n      fill: none;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    .data-point {\n      fill: white;\n      stroke-width: 2;\n    }\n\n    .axis line,\n    .axis path,\n    .grid line {\n      stroke: #ddd;\n    }\n\n    .grid path {\n      stroke: none;\n    }\n\n    .axis text {\n      font-size: 10px;\n      fill: #666;\n    }\n  `\n\n  render() {\n    return html`\n      <div class=\"chart-container\">\n        <svg\n          id=\"trend-chart\"\n          width=${this.chartWidth || this.width}\n          height=${this.chartHeight || this.height}\n          viewBox=\"0 0 ${this.chartWidth || this.width} ${this.chartHeight || this.height}\"\n          preserveAspectRatio=\"xMidYMid meet\"\n        ></svg>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        const rect = entry.contentRect\n        this.chartWidth = rect.width\n        this.chartHeight = rect.height\n        this.requestUpdate()\n      }\n    })\n    this.resizeObserver.observe(this)\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect()\n    super.disconnectedCallback()\n  }\n\n  updated() {\n    this.drawTrendChart()\n  }\n\n  drawTrendChart() {\n    if (!this.data || this.data.length === 0) return\n\n    const svg = d3.select(this.renderRoot.querySelector('#trend-chart'))\n    svg.selectAll('*').remove()\n\n    const margin = { top: 20, right: 20, bottom: 50, left: 40 }\n    const width = this.chartWidth || this.width\n    const height = this.chartHeight || this.height\n    const chartWidth = width - margin.left - margin.right\n    const chartHeight = height - margin.top - margin.bottom\n\n    // 데이터 파싱\n    const parsedData = this.data.map(d => ({\n      date: new Date(d[this.dateKey]),\n      value: +d[this.valueKey],\n      color: d.color || this.lineColor\n    }))\n\n    // 스케일 설정\n    const xScale = d3\n      .scaleTime()\n      .domain(d3.extent(parsedData, d => d.date) as [Date, Date])\n      .range([0, chartWidth])\n\n    const yScale = d3\n      .scaleLinear()\n      .domain([0, d3.max(parsedData, d => d.value) || 100])\n      .range([chartHeight, 0])\n\n    // SVG 설정\n    svg.attr('width', width).attr('height', height)\n    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n\n    // 축 생성 - 연도가 바뀌면 연도 포함\n    const timeFormat = (date: Date) => {\n      const dates = parsedData.map(d => d.date)\n      const years = [...new Set(dates.map(d => d.getFullYear()))]\n\n      // 여러 연도가 있으면 연도 포함\n      if (years.length > 1) {\n        return d3.timeFormat('%Y-%m')(date)\n      } else {\n        return d3.timeFormat('%m/%d')(date)\n      }\n    }\n\n    const xAxis = d3.axisBottom(xScale).tickFormat(timeFormat as any).ticks(Math.min(parsedData.length, 10))\n\n    const yAxis = d3.axisLeft(yScale).ticks(5)\n\n    // X축 그리드 라인 추가\n    g.append('g')\n      .attr('class', 'grid')\n      .attr('transform', `translate(0,${chartHeight})`)\n      .call(\n        d3\n          .axisBottom(xScale)\n          .ticks(Math.min(parsedData.length, 10))\n          .tickSize(-chartHeight)\n          .tickFormat(() => '')\n      )\n\n    g.append('g')\n      .attr('class', 'axis')\n      .attr('transform', `translate(0,${chartHeight})`)\n      .call(xAxis)\n      .selectAll('text')\n      .style('text-anchor', 'end')\n      .attr('dx', '-.5em')\n      .attr('dy', '.3em')\n      .attr('transform', 'rotate(-30)')\n\n    g.append('g').attr('class', 'axis').call(yAxis)\n\n    // 라인 생성기\n    const line = d3\n      .line<{ date: Date; value: number; color: string }>()\n      .x(d => xScale(d.date))\n      .y(d => yScale(d.value))\n      .curve(d3.curveMonotoneX)\n\n    // 트렌드 라인 그리기\n    g.append('path')\n      .datum(parsedData)\n      .attr('class', 'trend-line')\n      .attr('d', line as any)\n      .attr('stroke', this.lineColor)\n      .attr('stroke-width', this.strokeWidth)\n\n    // 데이터 포인트 그리기\n    if (this.showPoints) {\n      g.selectAll('.data-point')\n        .data(parsedData)\n        .enter()\n        .append('circle')\n        .attr('class', 'data-point')\n        .attr('cx', d => xScale(d.date))\n        .attr('cy', d => yScale(d.value))\n        .attr('r', this.pointRadius)\n        .attr('stroke', d => d.color)\n        .attr('fill', 'white')\n    }\n  }\n}\n"]}

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,343 @@
+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
+                }));
+                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 => {
+            // 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 사용
+            const marker = new AdvancedMarkerElement({
+                position: position,
+                map: null, // 클러스터에서 관리하므로 지도에 직접 추가하지 않음
+                content: markerElement
+            });
+            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 마커 제거
+        // Google Maps 공식 MarkerClusterer 사용 (예시와 동일한 방식)
+        if (this.markers.length > 0 && window.markerClusterer) {
+            this._markerClusterer = new window.markerClusterer.MarkerClusterer({
+                markers: this.markers,
+                map: this.map
+            });
+        }
+    }
+    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        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        const marker = new AdvancedMarkerElement({\n          position: position,\n          map: null, // 클러스터에서 관리하므로 지도에 직접 추가하지 않음\n          content: markerElement\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    // Google Maps 공식 MarkerClusterer 사용 (예시와 동일한 방식)\n    if (this.markers.length > 0 && window.markerClusterer) {\n      this._markerClusterer = new window.markerClusterer.MarkerClusterer({\n        markers: this.markers,\n        map: this.map\n      })\n    }\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"]}