mobile deploy

mobile-src/src/views/common/modals/SiteAddressMapModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<sgc-modal :title="title" @sgcCloseModal="closeModal" :toolbars="toolbars"  scrollMode="fix">
+	<sgc-modal :title="title" @sgcCloseModal="closeModal" :toolbars="toolbars"  scrollMode="fix" :noPadding="true">
 		<div class="map-container" ref="map"></div>
 		<div class="site-info" slot="fixed" :class="{ open : params.showStatus }">
 			<ion-icon slot="icon-only" :icon="Icon.close" @click="setMarker(null)"></ion-icon>
@@ -7,6 +7,7 @@
 				<sgc-item-view label="DEFT.LBL_SITE_NM" :text="params.selectedSite.siteNm"></sgc-item-view>
 				<sgc-item-view label="ROOM.LBL_LOCATION"  :text="'' + params.selectedSite.latitude + ' x' + params.selectedSite.longtude"></sgc-item-view>
 			</ion-list>
+			<ion-button size="small"></ion-button>
 		</div>
 	</sgc-modal>
 </template>
@@ -22,8 +23,6 @@ import {
 	Icon
 } from '../../../services/index';
 
-let kakaoApi: any = null;
-
 export default defineComponent({
 	name: 'SiteAddressMapModal',
 	components: {
@@ -31,8 +30,8 @@ export default defineComponent({
 		...IonFormModules,
 	},
 	mounted() {
-		kakaoApi = (window as any).kakao;
-		if (!kakaoApi || !kakaoApi?.maps) {
+		this.params.kakaoApi = (window as any).kakao;
+		if (!this.params.kakaoApi || !this.params.kakaoApi?.maps) {
 			const script = document.createElement('script')
 			script.type = 'text/javascript';
 			switch(window.location.port) {
@@ -45,8 +44,8 @@ export default defineComponent({
 			}
 			script.src = 'https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=' + this.params.appKey + '&libraries=clusterer,drawing,services'
 			script.addEventListener('load', () => {
-				kakaoApi = (window as any).kakao;
-				kakaoApi.maps.load(() => {
+				this.params.kakaoApi = (window as any).kakao;
+				this.params.kakaoApi.maps.load(() => {
 					this.loadData()
 				});
 			})
@@ -64,6 +63,7 @@ export default defineComponent({
 	data(): ListDataVo<ZehrSiteAddressVo, any, {
 		appKey: string,
 		map : any;
+		kakaoApi : any;
 		selectedSite : ZehrSiteAddressVo;
 		showStatus : boolean; 
 	}> {
@@ -74,6 +74,7 @@ export default defineComponent({
 			params: {
 				appKey: '3443996df2f3d0707054c709a04cee8a',
 				map : null,
+				kakaoApi : null,
 				selectedSite : null,
 				showStatus : false
 			},
@@ -96,31 +97,37 @@ export default defineComponent({
 					this.params.selectedSite = null;
 				}, 2000);
 			}
-
-
-
 		},
-		loadData() {
-			if (kakaoApi) {
-				const container = this.$refs.map;
-				const options = {
-					center: new kakaoApi.maps.LatLng(36.777216136269935, 127.7034943641997),
-					level: 13
-				}
-				this.params.map = new kakaoApi.maps.Map(container, options)	;
-			} 
-			if (commonService.isNotNull(this.siteList)  && this.params.map) {
-				this.dataList = this.siteList;
+		drawMaker() {
+			if (commonService.isNotNull(this.dataList)  && this.params.map) {
 				this.dataList.forEach((site) => {
-					var marker = new kakaoApi.maps.Marker({
-						position: new kakaoApi.maps.LatLng(site.latitude, site.longtude)
+					var marker = new this.params.kakaoApi.maps.Marker({
+						position: new this.params.kakaoApi.maps.LatLng(site.latitude, site.longtude)
 					});
 					marker.setMap(this.params.map);
-					kakaoApi.maps.event.addListener(marker, 'click', () => {
+					this.params.kakaoApi.maps.event.addListener(marker, 'click', () => {
 						this.setMarker(site);
 					});
 				});
 			}
+		},
+		loadData() {
+			if (this.params.kakaoApi !== null && this.params.map !== undefined) {
+				window.setTimeout(() => {
+					if (this.params.map === null) {
+						const container = this.$refs.map;
+						const options = {
+							center: new this.params.kakaoApi.maps.LatLng(36.777216136269935, 127.7034943641997),
+							level: 13
+						}
+						this.params.map = new this.params.kakaoApi.maps.Map(container, options)	;
+					}
+					if (commonService.isNotNull(this.siteList)  && this.params.map) {
+						this.dataList = this.siteList;
+						this.drawMaker();
+					}
+				}, 500);
+			}
 		}
 	},
 });