slick-address-kr 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/API-KEY-GUIDE.md +428 -0
- package/AUTOCOMPLETE-GUIDE.md +399 -0
- package/HOW-TO-USE.md +416 -0
- package/LICENSE +21 -0
- package/README.ko.md +88 -0
- package/README.md +434 -0
- package/config.example.js +16 -0
- package/dist/address-finder.d.ts +68 -0
- package/dist/address-finder.js +262 -0
- package/dist/api-client.d.ts +25 -0
- package/dist/api-client.js +79 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +8 -0
- package/dist/styles.css +279 -0
- package/dist/types.d.ts +83 -0
- package/dist/types.js +1 -0
- package/index.html +85 -0
- package/korean-address-finder.js +360 -0
- package/package.json +58 -0
package/README.md
ADDED
|
@@ -0,0 +1,434 @@
|
|
|
1
|
+
# Slick Address KR
|
|
2
|
+
|
|
3
|
+
행정안전부 도로명주소 API 기반 팝업 없는 한국 주소 검색 라이브러리
|
|
4
|
+
|
|
5
|
+
Korean address search library using official road address API - No popup required
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/slick-address-kr)
|
|
8
|
+
[](https://github.com/Devguru-J/slick-address-kr/blob/main/LICENSE)
|
|
9
|
+
|
|
10
|
+
## 특징
|
|
11
|
+
|
|
12
|
+
- ✨ **팝업 없는 인라인 UI**: 다음 주소 API처럼 새 창이 열리지 않습니다
|
|
13
|
+
- 🚀 **가벼운 용량**: 외부 의존성 없이 순수 TypeScript로 작성
|
|
14
|
+
- 📱 **반응형 디자인**: 모바일부터 데스크톱까지 완벽 지원
|
|
15
|
+
- 🎨 **커스터마이징 가능**: CSS로 쉽게 스타일 변경 가능
|
|
16
|
+
- ⚡ **자동완성 모드**: 타이핑하는 즉시 검색 결과 표시
|
|
17
|
+
- 🔒 **TypeScript 지원**: 완전한 타입 정의 제공
|
|
18
|
+
- 🌐 **프레임워크 무관**: Vanilla JS, React, Vue 등 어디서나 사용 가능
|
|
19
|
+
|
|
20
|
+
## 설치
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install slick-address-kr
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
또는
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
yarn add slick-address-kr
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 빠른 시작
|
|
33
|
+
|
|
34
|
+
### 1. 기본 사용 (Vanilla JavaScript)
|
|
35
|
+
|
|
36
|
+
**간단한 방법:**
|
|
37
|
+
|
|
38
|
+
1. 프로젝트 폴더의 `examples/index.html` 파일을 참조하세요
|
|
39
|
+
2. 로컬 서버 실행:
|
|
40
|
+
```bash
|
|
41
|
+
python -m http.server 8000
|
|
42
|
+
```
|
|
43
|
+
3. 브라우저에서 열기:
|
|
44
|
+
```
|
|
45
|
+
http://localhost:8000/examples/
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
**코드 예제:** [examples/index.html](./examples/index.html)
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<!DOCTYPE html>
|
|
52
|
+
<html lang="ko">
|
|
53
|
+
<head>
|
|
54
|
+
<meta charset="UTF-8">
|
|
55
|
+
<title>주소 검색</title>
|
|
56
|
+
</head>
|
|
57
|
+
<body>
|
|
58
|
+
<div id="address-search"></div>
|
|
59
|
+
|
|
60
|
+
<script type="module">
|
|
61
|
+
// config.js에서 API 키 로드
|
|
62
|
+
import { config } from './config.js';
|
|
63
|
+
|
|
64
|
+
// 주소 검색 API 호출 함수
|
|
65
|
+
async function searchAddress(keyword) {
|
|
66
|
+
const response = await fetch(
|
|
67
|
+
`https://business.juso.go.kr/addrlink/addrLinkApi.do?` +
|
|
68
|
+
`confmKey=${config.jusoApiKey}&keyword=${keyword}&resultType=json`
|
|
69
|
+
);
|
|
70
|
+
const data = await response.json();
|
|
71
|
+
return data.results.juso;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// 검색 UI 구현...
|
|
75
|
+
</script>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### 2. React에서 사용
|
|
81
|
+
|
|
82
|
+
```jsx
|
|
83
|
+
import React, { useEffect, useRef } from 'react';
|
|
84
|
+
import { KoreanAddressFinder } from 'korean-address-finder';
|
|
85
|
+
import 'korean-address-finder/dist/styles.css';
|
|
86
|
+
|
|
87
|
+
function AddressInput() {
|
|
88
|
+
const containerRef = useRef(null);
|
|
89
|
+
const finderRef = useRef(null);
|
|
90
|
+
|
|
91
|
+
useEffect(() => {
|
|
92
|
+
if (containerRef.current && !finderRef.current) {
|
|
93
|
+
finderRef.current = new KoreanAddressFinder({
|
|
94
|
+
onSelect: (address) => {
|
|
95
|
+
console.log('선택된 주소:', address);
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
finderRef.current.init(containerRef.current);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return () => {
|
|
103
|
+
if (finderRef.current) {
|
|
104
|
+
finderRef.current.destroy();
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
}, []);
|
|
108
|
+
|
|
109
|
+
return <div ref={containerRef}></div>;
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### 3. Vue에서 사용
|
|
114
|
+
|
|
115
|
+
```vue
|
|
116
|
+
<template>
|
|
117
|
+
<div ref="addressContainer"></div>
|
|
118
|
+
</template>
|
|
119
|
+
|
|
120
|
+
<script>
|
|
121
|
+
import { KoreanAddressFinder } from 'korean-address-finder';
|
|
122
|
+
import 'korean-address-finder/dist/styles.css';
|
|
123
|
+
|
|
124
|
+
export default {
|
|
125
|
+
mounted() {
|
|
126
|
+
this.finder = new KoreanAddressFinder({
|
|
127
|
+
onSelect: (address) => {
|
|
128
|
+
console.log('선택된 주소:', address);
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
this.finder.init(this.$refs.addressContainer);
|
|
133
|
+
},
|
|
134
|
+
|
|
135
|
+
beforeUnmount() {
|
|
136
|
+
if (this.finder) {
|
|
137
|
+
this.finder.destroy();
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
</script>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## API 문서
|
|
145
|
+
|
|
146
|
+
### Options
|
|
147
|
+
|
|
148
|
+
```typescript
|
|
149
|
+
interface AddressFinderOptions {
|
|
150
|
+
/** 행정안전부 API 키 (선택사항) */
|
|
151
|
+
apiKey?: string;
|
|
152
|
+
|
|
153
|
+
/** 한 페이지에 표시할 결과 수 (기본값: 10) */
|
|
154
|
+
countPerPage?: number;
|
|
155
|
+
|
|
156
|
+
/** 현재 페이지 번호 (기본값: 1) */
|
|
157
|
+
currentPage?: number;
|
|
158
|
+
|
|
159
|
+
/** 검색 결과를 표시할 컨테이너 ID */
|
|
160
|
+
containerId?: string;
|
|
161
|
+
|
|
162
|
+
/** 주소 선택 시 콜백 함수 */
|
|
163
|
+
onSelect?: (address: AddressResult) => void;
|
|
164
|
+
|
|
165
|
+
/** 상세주소 입력 필드 표시 여부 (기본값: true) */
|
|
166
|
+
showDetailInput?: boolean;
|
|
167
|
+
|
|
168
|
+
/** 커스텀 스타일 클래스 */
|
|
169
|
+
customClass?: string;
|
|
170
|
+
|
|
171
|
+
/** 자동완성 모드 사용 여부 (기본값: false) */
|
|
172
|
+
autocompleteMode?: boolean;
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### AddressResult
|
|
177
|
+
|
|
178
|
+
```typescript
|
|
179
|
+
interface AddressResult {
|
|
180
|
+
/** 도로명 주소 */
|
|
181
|
+
roadAddress: string;
|
|
182
|
+
|
|
183
|
+
/** 지번 주소 */
|
|
184
|
+
jibunAddress: string;
|
|
185
|
+
|
|
186
|
+
/** 우편번호 */
|
|
187
|
+
zipCode: string;
|
|
188
|
+
|
|
189
|
+
/** 건물명 */
|
|
190
|
+
buildingName?: string;
|
|
191
|
+
|
|
192
|
+
/** 상세 주소 */
|
|
193
|
+
detailAddress?: string;
|
|
194
|
+
|
|
195
|
+
/** 참고 항목 */
|
|
196
|
+
extraAddress?: string;
|
|
197
|
+
|
|
198
|
+
/** 시도명 */
|
|
199
|
+
sido?: string;
|
|
200
|
+
|
|
201
|
+
/** 시군구명 */
|
|
202
|
+
sigungu?: string;
|
|
203
|
+
|
|
204
|
+
/** 읍면동명 */
|
|
205
|
+
bname?: string;
|
|
206
|
+
}
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
### Methods
|
|
210
|
+
|
|
211
|
+
#### `init(targetElement?: HTMLElement): void`
|
|
212
|
+
|
|
213
|
+
주소 검색 UI를 초기화합니다.
|
|
214
|
+
|
|
215
|
+
```javascript
|
|
216
|
+
const finder = new KoreanAddressFinder(options);
|
|
217
|
+
finder.init(); // containerId 사용
|
|
218
|
+
// 또는
|
|
219
|
+
finder.init(document.getElementById('my-container')); // 직접 엘리먼트 전달
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
#### `destroy(): void`
|
|
223
|
+
|
|
224
|
+
컴포넌트를 제거하고 이벤트 리스너를 정리합니다.
|
|
225
|
+
|
|
226
|
+
```javascript
|
|
227
|
+
finder.destroy();
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
#### `getSelectedAddress(): Object | null`
|
|
231
|
+
|
|
232
|
+
현재 선택된 주소 정보를 반환합니다.
|
|
233
|
+
|
|
234
|
+
```javascript
|
|
235
|
+
const selected = finder.getSelectedAddress();
|
|
236
|
+
console.log(selected); // { roadAddress, zipCode, detailAddress }
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
## 사용 예제
|
|
240
|
+
|
|
241
|
+
### 자동완성 모드
|
|
242
|
+
|
|
243
|
+
입력하는 즉시 검색 결과를 표시합니다.
|
|
244
|
+
|
|
245
|
+
```javascript
|
|
246
|
+
const finder = new KoreanAddressFinder({
|
|
247
|
+
autocompleteMode: true,
|
|
248
|
+
onSelect: (address) => {
|
|
249
|
+
console.log(address);
|
|
250
|
+
}
|
|
251
|
+
});
|
|
252
|
+
|
|
253
|
+
finder.init();
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
### 상세주소 입력 없이 사용
|
|
257
|
+
|
|
258
|
+
```javascript
|
|
259
|
+
const finder = new KoreanAddressFinder({
|
|
260
|
+
showDetailInput: false,
|
|
261
|
+
onSelect: (address) => {
|
|
262
|
+
console.log(address);
|
|
263
|
+
}
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
finder.init();
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### 커스텀 스타일 적용
|
|
270
|
+
|
|
271
|
+
```javascript
|
|
272
|
+
const finder = new KoreanAddressFinder({
|
|
273
|
+
customClass: 'my-custom-class',
|
|
274
|
+
onSelect: (address) => {
|
|
275
|
+
console.log(address);
|
|
276
|
+
}
|
|
277
|
+
});
|
|
278
|
+
|
|
279
|
+
finder.init();
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
```css
|
|
283
|
+
.my-custom-class .kaf-search-btn {
|
|
284
|
+
background-color: #ff6b6b;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.my-custom-class .kaf-search-input:focus {
|
|
288
|
+
border-color: #ff6b6b;
|
|
289
|
+
}
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
## API 키 발급 및 관리
|
|
293
|
+
|
|
294
|
+
이 라이브러리는 행정안전부 주소기반산업지원서비스 API를 사용합니다.
|
|
295
|
+
|
|
296
|
+
### 1. API 키 발급
|
|
297
|
+
|
|
298
|
+
1. [주소기반산업지원서비스](https://business.juso.go.kr/) 접속
|
|
299
|
+
2. 회원가입 및 로그인
|
|
300
|
+
3. 승인키 신청
|
|
301
|
+
4. 사용할 도메인 등록 (보안 강화)
|
|
302
|
+
|
|
303
|
+
### 2. API 키 안전하게 사용하기
|
|
304
|
+
|
|
305
|
+
**⚠️ 중요: API 키를 코드에 직접 넣으면 누구나 볼 수 있습니다!**
|
|
306
|
+
|
|
307
|
+
프로젝트 규모에 맞는 방법을 선택하세요:
|
|
308
|
+
|
|
309
|
+
#### 방법 A: 설정 파일 사용 (간단한 프로젝트)
|
|
310
|
+
|
|
311
|
+
```javascript
|
|
312
|
+
// config.js (Git에 올리지 않음)
|
|
313
|
+
export const config = {
|
|
314
|
+
jusoApiKey: 'your_actual_api_key_here'
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
// main.js
|
|
318
|
+
import { config } from './config.js';
|
|
319
|
+
|
|
320
|
+
const finder = new KoreanAddressFinder({
|
|
321
|
+
apiKey: config.jusoApiKey,
|
|
322
|
+
onSelect: (address) => console.log(address)
|
|
323
|
+
});
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
#### 방법 B: 환경 변수 사용 (React, Vue 등)
|
|
327
|
+
|
|
328
|
+
```bash
|
|
329
|
+
# .env
|
|
330
|
+
REACT_APP_JUSO_API_KEY=your_key_here
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
```javascript
|
|
334
|
+
const finder = new KoreanAddressFinder({
|
|
335
|
+
apiKey: process.env.REACT_APP_JUSO_API_KEY,
|
|
336
|
+
onSelect: (address) => console.log(address)
|
|
337
|
+
});
|
|
338
|
+
```
|
|
339
|
+
|
|
340
|
+
#### 방법 C: 백엔드 프록시 서버 (상용 서비스 ⭐ 추천)
|
|
341
|
+
|
|
342
|
+
API 키를 서버에만 저장하고 클라이언트는 자체 서버를 통해 API 호출:
|
|
343
|
+
|
|
344
|
+
```javascript
|
|
345
|
+
// 클라이언트에서는 apiKey 불필요
|
|
346
|
+
const finder = new KoreanAddressFinder({
|
|
347
|
+
// 자체 서버 URL 설정 (api-client.ts 수정 필요)
|
|
348
|
+
onSelect: (address) => console.log(address)
|
|
349
|
+
});
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
자세한 내용은 `API-KEY-GUIDE.md` 및 `examples/backend-proxy/` 참조
|
|
353
|
+
|
|
354
|
+
## 다음 주소 API와의 비교
|
|
355
|
+
|
|
356
|
+
| 기능 | Korean Address Finder | 다음 주소 API |
|
|
357
|
+
|------|----------------------|--------------|
|
|
358
|
+
| 팝업 | ❌ 없음 | ✅ 있음 (새 창) |
|
|
359
|
+
| 인라인 UI | ✅ 지원 | ❌ 미지원 |
|
|
360
|
+
| 커스터마이징 | ✅ 자유롭게 가능 | ⚠️ 제한적 |
|
|
361
|
+
| 자동완성 | ✅ 지원 | ❌ 미지원 |
|
|
362
|
+
| 데이터 소스 | 행정안전부 공공 API | 다음 자체 DB |
|
|
363
|
+
| 의존성 | ✅ 독립적 | ⚠️ 다음 의존 |
|
|
364
|
+
| 모바일 최적화 | ✅ 완벽 지원 | ✅ 지원 |
|
|
365
|
+
|
|
366
|
+
## 브라우저 지원
|
|
367
|
+
|
|
368
|
+
- Chrome (최신 2개 버전)
|
|
369
|
+
- Firefox (최신 2개 버전)
|
|
370
|
+
- Safari (최신 2개 버전)
|
|
371
|
+
- Edge (최신 2개 버전)
|
|
372
|
+
- iOS Safari (12+)
|
|
373
|
+
- Android Chrome (최신)
|
|
374
|
+
|
|
375
|
+
## 라이선스
|
|
376
|
+
|
|
377
|
+
MIT License - 자유롭게 사용하세요!
|
|
378
|
+
|
|
379
|
+
## 기여하기
|
|
380
|
+
|
|
381
|
+
이슈와 PR은 언제나 환영합니다!
|
|
382
|
+
|
|
383
|
+
1. Fork the repository
|
|
384
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
385
|
+
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
|
386
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
387
|
+
5. Open a Pull Request
|
|
388
|
+
|
|
389
|
+
## 독립 데이터베이스 버전
|
|
390
|
+
|
|
391
|
+
완전히 독립적인 데이터베이스를 구축하고 싶다면, 다음 옵션을 고려해보세요:
|
|
392
|
+
|
|
393
|
+
### 1. Postcodify 사용
|
|
394
|
+
|
|
395
|
+
오픈소스 도로명주소 검색 시스템입니다.
|
|
396
|
+
|
|
397
|
+
- [Postcodify GitHub](https://github.com/poesis/postcodify)
|
|
398
|
+
- LGPLv3 라이선스
|
|
399
|
+
- 자체 서버에 DB 구축 가능
|
|
400
|
+
|
|
401
|
+
### 2. 직접 DB 구축
|
|
402
|
+
|
|
403
|
+
행정안전부에서 제공하는 도로명주소 데이터를 다운로드하여 자체 DB 구축:
|
|
404
|
+
|
|
405
|
+
1. [공공데이터포털](https://www.data.go.kr/) 접속
|
|
406
|
+
2. "도로명주소 건물DB" 검색
|
|
407
|
+
3. 데이터 다운로드 (CSV, TXT 형식)
|
|
408
|
+
4. MySQL, PostgreSQL 등에 임포트
|
|
409
|
+
5. 자체 API 서버 구축
|
|
410
|
+
|
|
411
|
+
## 문제 해결
|
|
412
|
+
|
|
413
|
+
### CORS 에러가 발생해요
|
|
414
|
+
|
|
415
|
+
행정안전부 API는 CORS를 지원합니다. 만약 에러가 발생한다면:
|
|
416
|
+
|
|
417
|
+
1. API 키가 올바른지 확인
|
|
418
|
+
2. 도메인이 승인된 도메인인지 확인
|
|
419
|
+
3. HTTPS 사용 권장
|
|
420
|
+
|
|
421
|
+
### 검색 결과가 나오지 않아요
|
|
422
|
+
|
|
423
|
+
1. 인터넷 연결 확인
|
|
424
|
+
2. API 키 확인
|
|
425
|
+
3. 콘솔에서 에러 메시지 확인
|
|
426
|
+
|
|
427
|
+
## 지원
|
|
428
|
+
|
|
429
|
+
- 이슈: [GitHub Issues](https://github.com/Devguru-J/slick-address-kr/issues)
|
|
430
|
+
- GitHub: [@Devguru-J](https://github.com/Devguru-J)
|
|
431
|
+
|
|
432
|
+
---
|
|
433
|
+
|
|
434
|
+
Made with ❤️ for Korean developers
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 설정 파일 템플릿
|
|
3
|
+
*
|
|
4
|
+
* 사용 방법:
|
|
5
|
+
* 1. 이 파일을 config.js로 복사
|
|
6
|
+
* 2. YOUR_API_KEY_HERE를 실제 API 키로 교체
|
|
7
|
+
* 3. .gitignore에 config.js 추가 (이미 추가됨)
|
|
8
|
+
*
|
|
9
|
+
* API 키 발급:
|
|
10
|
+
* https://business.juso.go.kr/ 에서 "검색 API" 키 발급
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
window.CONFIG = {
|
|
14
|
+
// 여기에 발급받은 API 키를 입력하세요
|
|
15
|
+
jusoApiKey: 'YOUR_API_KEY_HERE'
|
|
16
|
+
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { AddressFinderOptions } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* 주소 검색 컴포넌트
|
|
4
|
+
* 팝업 없이 인라인으로 주소를 검색하고 선택할 수 있는 UI를 제공합니다.
|
|
5
|
+
*/
|
|
6
|
+
export declare class KoreanAddressFinder {
|
|
7
|
+
private apiClient;
|
|
8
|
+
private options;
|
|
9
|
+
private container;
|
|
10
|
+
private searchInput;
|
|
11
|
+
private resultsContainer;
|
|
12
|
+
private detailInput;
|
|
13
|
+
private isOpen;
|
|
14
|
+
private debounceTimer;
|
|
15
|
+
constructor(options?: AddressFinderOptions);
|
|
16
|
+
/**
|
|
17
|
+
* 주소 검색 UI 초기화
|
|
18
|
+
*/
|
|
19
|
+
init(targetElement?: HTMLElement): void;
|
|
20
|
+
/**
|
|
21
|
+
* UI 렌더링
|
|
22
|
+
*/
|
|
23
|
+
private render;
|
|
24
|
+
/**
|
|
25
|
+
* 이벤트 리스너 등록
|
|
26
|
+
*/
|
|
27
|
+
private attachEventListeners;
|
|
28
|
+
/**
|
|
29
|
+
* 자동완성 처리 (디바운스 적용)
|
|
30
|
+
*/
|
|
31
|
+
private handleAutocomplete;
|
|
32
|
+
/**
|
|
33
|
+
* 주소 검색 실행
|
|
34
|
+
*/
|
|
35
|
+
private handleSearch;
|
|
36
|
+
/**
|
|
37
|
+
* 검색 결과 표시
|
|
38
|
+
*/
|
|
39
|
+
private displayResults;
|
|
40
|
+
/**
|
|
41
|
+
* 주소 선택 처리
|
|
42
|
+
*/
|
|
43
|
+
private selectAddress;
|
|
44
|
+
/**
|
|
45
|
+
* 검색 결과 열기
|
|
46
|
+
*/
|
|
47
|
+
private openResults;
|
|
48
|
+
/**
|
|
49
|
+
* 검색 결과 닫기
|
|
50
|
+
*/
|
|
51
|
+
private closeResults;
|
|
52
|
+
/**
|
|
53
|
+
* 에러 표시
|
|
54
|
+
*/
|
|
55
|
+
private showError;
|
|
56
|
+
/**
|
|
57
|
+
* 컴포넌트 제거
|
|
58
|
+
*/
|
|
59
|
+
destroy(): void;
|
|
60
|
+
/**
|
|
61
|
+
* 선택된 주소 가져오기
|
|
62
|
+
*/
|
|
63
|
+
getSelectedAddress(): {
|
|
64
|
+
roadAddress: string;
|
|
65
|
+
zipCode: string;
|
|
66
|
+
detailAddress: string;
|
|
67
|
+
} | null;
|
|
68
|
+
}
|