Skip to content

Commit 54b6228

Browse files
PaleBlueNotePaleBlueNote
committed
refactor: kakao map fallback으로 naver map 도입
1 parent 45f0756 commit 54b6228

10 files changed

Lines changed: 59 additions & 86 deletions

File tree

‎dev-dist/sw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ define(['./workbox-86c9b217'], (function (workbox) { 'use strict';
8282
"revision": "3ca0b8505b4bec776b69afdba2768812"
8383
}, {
8484
"url": "index.html",
85-
"revision": "0.fgli9fifplg"
85+
"revision": "0.reffsbcgv9g"
8686
}], {});
8787
workbox.cleanupOutdatedCaches();
8888
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
<!-- Kakao OAuth -->
4545
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
4646

47+
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=icy6bd3ip7&submodules=geocoder"></script>
4748
</head>
4849
<body>
4950
<div id="root"></div>

‎src/components/common/GpsMapPreview.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useEffect, useRef } from "react";
2-
import { loadKakaoMapScript } from "../../utils/loadKakaoMapScript.ts";
32

43
interface GpsMapPreviewProps {
54
latitude: number;
@@ -16,36 +15,36 @@ const GpsMapPreview = ({
1615

1716
useEffect(() => {
1817
const initMap = async () => {
19-
await loadKakaoMapScript(); // ✅ 지도 SDK 로딩 보장
18+
if (!window.naver || !mapRef.current) return;
2019

21-
if (!window.kakao || !mapRef.current) return;
20+
const center = new window.naver.maps.LatLng(latitude, longitude);
2221

23-
const kakao = window.kakao;
24-
const center = new kakao.maps.LatLng(latitude, longitude);
25-
26-
const map = new kakao.maps.Map(mapRef.current, {
22+
const map = new window.naver.maps.Map(mapRef.current, {
2723
center,
28-
level: 3,
24+
zoom: 16, // level 3에 대응하는 줌 수준
2925
});
3026

31-
new kakao.maps.Marker({ position: center, map });
27+
new window.naver.maps.Marker({
28+
position: center,
29+
map,
30+
});
3231

3332
if (radiusMeters > 0) {
34-
new kakao.maps.Circle({
33+
new window.naver.maps.Circle({
34+
map,
3535
center,
3636
radius: radiusMeters,
37-
strokeWeight: 2,
3837
strokeColor: "#4A90E2",
3938
strokeOpacity: 0.8,
39+
strokeWeight: 2,
4040
fillColor: "#4A90E2",
4141
fillOpacity: 0.2,
42-
map,
4342
});
4443
}
4544

46-
// DOM 렌더링 완료 후 레이아웃 재계산
45+
// 지도 리사이즈 및 중심 재설정
4746
setTimeout(() => {
48-
map.relayout();
47+
window.naver.maps.Event.trigger(map, "resize");
4948
map.setCenter(center);
5049
}, 100);
5150
};

‎src/pages/mypage/boss/AttendanceSettingPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
} from "../../../api/boss/store.ts";
1919
import { QRCodeCanvas } from "qrcode.react";
2020
import { z } from "zod";
21-
import { getCoordsFromAddress } from "../../../utils/kakaoGeocoder.ts";
21+
import { getCoordsFromAddress } from "../../../utils/naverGeocoder.ts";
2222
import { useForm, Controller } from "react-hook-form";
2323
import { zodResolver } from "@hookform/resolvers/zod";
2424
import GpsMapPreview from "../../../components/common/GpsMapPreview.tsx";

‎src/pages/store/boss/StoreInfoEditPage.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ import TextField from "../../../components/common/TextField.tsx";
1414
import Button from "../../../components/common/Button.tsx";
1515
import SelectField from "../../../components/common/SelectField.tsx";
1616
import { useNavigate } from "react-router-dom";
17-
import { getCoordsFromAddress } from "../../../utils/kakaoGeocoder.ts";
1817
import ResetIcon from "../../../components/icons/ResetIcon.tsx";
1918
import GpsMapPreview from "../../../components/common/GpsMapPreview.tsx";
2019
import { toast } from "react-toastify";
2120
import { showConfirm } from "../../../libs/showConfirm.ts";
21+
import { getCoordsFromAddress } from "../../../utils/naverGeocoder.ts";
2222

2323
const StoreInfoEditPage = () => {
2424
useLayout({
@@ -54,27 +54,29 @@ const StoreInfoEditPage = () => {
5454
});
5555

5656
useEffect(() => {
57-
if (!selectedStore) return;
58-
5957
const fetchData = async () => {
58+
if (!selectedStore) return;
6059
const data = await getStoreInfo(selectedStore.storeId);
60+
6161
setValue("storeName", data.storeName);
6262
setValue("businessNumber", data.businessNumber);
6363
setValue("storeType", data.storeType);
6464
setValue("address", data.address);
6565
setValue("overtimeLimit", data.overtimeLimit);
6666

67-
// 주소 기반 좌표 설정
6867
try {
69-
const coords = await getCoordsFromAddress(data.address);
70-
setValue("latitude", coords.latitude);
71-
setValue("longitude", coords.longitude);
68+
const { latitude, longitude } = await getCoordsFromAddress(
69+
data.address,
70+
);
71+
setValue("latitude", latitude);
72+
setValue("longitude", longitude);
7273
} catch (err) {
7374
console.error("좌표 변환 실패", err);
7475
}
7576
};
77+
7678
fetchData();
77-
}, [selectedStore, setValue]);
79+
}, [selectedStore]);
7880

7981
useEffect(() => {
8082
if (selectedStore) {

‎src/pages/store/boss/StoreRegisterBossPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Navigate, useNavigate } from "react-router-dom";
77
import { useLayout } from "../../../hooks/useLayout.ts";
88
import { useUserStore } from "../../../stores/userStore.ts";
99
import { useAuth } from "../../../hooks/useAuth.ts";
10-
import { getCoordsFromAddress } from "../../../utils/kakaoGeocoder.ts";
10+
import { getCoordsFromAddress } from "../../../utils/naverGeocoder.ts";
1111
import { useEffect, useState } from "react";
1212
import SelectField from "../../../components/common/SelectField.tsx";
1313
import {

‎src/types/naver.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// src/types/naver.d.ts
2+
3+
export {};
4+
5+
declare global {
6+
interface Window {
7+
naver: any; // ✅ 그냥 any로 선언
8+
}
9+
}

‎src/utils/kakaoGeocoder.ts‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/utils/loadKakaoMapScript.ts‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/utils/naverGeocoder.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// src/utils/naverGeocoder.ts
2+
3+
export const getCoordsFromAddress = async (
4+
address: string,
5+
): Promise<{ latitude: number; longitude: number }> => {
6+
return new Promise((resolve, reject) => {
7+
if (!window.naver?.maps?.Service) {
8+
return reject("⚠️ Naver 지도 서비스가 로드되지 않았습니다.");
9+
}
10+
11+
window.naver.maps.Service.geocode(
12+
{ query: address },
13+
(status: any, response: any) => {
14+
if (status === window.naver.maps.Service.Status.ERROR) {
15+
return alert("Something wrong!");
16+
}
17+
18+
const { x, y } = response.v2.addresses[0];
19+
resolve({ latitude: parseFloat(y), longitude: parseFloat(x) });
20+
},
21+
);
22+
});
23+
};

0 commit comments

Comments
 (0)