slick-address-kr 1.0.0

package/dist/address-finder.js

@@ -0,0 +1,262 @@
+import { AddressApiClient } from './api-client';
+/**
+ * 주소 검색 컴포넌트
+ * 팝업 없이 인라인으로 주소를 검색하고 선택할 수 있는 UI를 제공합니다.
+ */
+export class KoreanAddressFinder {
+    constructor(options = {}) {
+        this.container = null;
+        this.searchInput = null;
+        this.resultsContainer = null;
+        this.detailInput = null;
+        this.isOpen = false;
+        this.debounceTimer = null;
+        this.apiClient = new AddressApiClient(options.apiKey);
+        // 기본 옵션 설정
+        this.options = {
+            apiKey: options.apiKey || '',
+            countPerPage: options.countPerPage || 10,
+            currentPage: options.currentPage || 1,
+            containerId: options.containerId || 'address-finder-container',
+            onSelect: options.onSelect || (() => { }),
+            showDetailInput: options.showDetailInput !== false,
+            customClass: options.customClass || '',
+            autocompleteMode: options.autocompleteMode || false,
+        };
+    }
+    /**
+     * 주소 검색 UI 초기화
+     */
+    init(targetElement) {
+        if (targetElement) {
+            this.container = targetElement;
+        }
+        else {
+            this.container = document.getElementById(this.options.containerId);
+        }
+        if (!this.container) {
+            throw new Error(`Container element not found: ${this.options.containerId}`);
+        }
+        this.render();
+        this.attachEventListeners();
+    }
+    /**
+     * UI 렌더링
+     */
+    render() {
+        if (!this.container)
+            return;
+        const className = this.options.customClass ? ` ${this.options.customClass}` : '';
+        this.container.innerHTML = `
+      <div class="kaf-wrapper${className}">
+        <div class="kaf-search-box">
+          <input
+            type="text"
+            class="kaf-search-input"
+            placeholder="주소를 입력하세요 (예: 판교역로 235)"
+            autocomplete="off"
+          />
+          <button type="button" class="kaf-search-btn">검색</button>
+        </div>
+        <div class="kaf-results" style="display: none;">
+          <div class="kaf-results-header">
+            <span class="kaf-results-count">검색 결과</span>
+            <button type="button" class="kaf-close-btn">×</button>
+          </div>
+          <div class="kaf-results-list"></div>
+        </div>
+        ${this.options.showDetailInput ? `
+          <div class="kaf-detail-box" style="display: none;">
+            <input
+              type="text"
+              class="kaf-detail-input"
+              placeholder="상세주소를 입력하세요"
+            />
+          </div>
+        ` : ''}
+        <div class="kaf-selected-address" style="display: none;"></div>
+      </div>
+    `;
+        this.searchInput = this.container.querySelector('.kaf-search-input');
+        this.resultsContainer = this.container.querySelector('.kaf-results');
+        this.detailInput = this.container.querySelector('.kaf-detail-input');
+    }
+    /**
+     * 이벤트 리스너 등록
+     */
+    attachEventListeners() {
+        if (!this.container)
+            return;
+        // 검색 버튼 클릭
+        const searchBtn = this.container.querySelector('.kaf-search-btn');
+        searchBtn?.addEventListener('click', () => this.handleSearch());
+        // 검색 입력 엔터키
+        this.searchInput?.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this.handleSearch();
+            }
+        });
+        // 자동완성 모드
+        if (this.options.autocompleteMode) {
+            this.searchInput?.addEventListener('input', () => {
+                this.handleAutocomplete();
+            });
+        }
+        // 닫기 버튼
+        const closeBtn = this.container.querySelector('.kaf-close-btn');
+        closeBtn?.addEventListener('click', () => this.closeResults());
+        // 외부 클릭 시 닫기
+        document.addEventListener('click', (e) => {
+            if (this.isOpen && !this.container?.contains(e.target)) {
+                this.closeResults();
+            }
+        });
+    }
+    /**
+     * 자동완성 처리 (디바운스 적용)
+     */
+    handleAutocomplete() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.debounceTimer = window.setTimeout(() => {
+            this.handleSearch();
+        }, 300);
+    }
+    /**
+     * 주소 검색 실행
+     */
+    async handleSearch() {
+        const keyword = this.searchInput?.value.trim();
+        if (!keyword)
+            return;
+        try {
+            const { results, totalCount } = await this.apiClient.search(keyword, this.options.currentPage, this.options.countPerPage);
+            this.displayResults(results, totalCount);
+        }
+        catch (error) {
+            console.error('Search error:', error);
+            this.showError('주소 검색 중 오류가 발생했습니다.');
+        }
+    }
+    /**
+     * 검색 결과 표시
+     */
+    displayResults(results, totalCount) {
+        const resultsList = this.container?.querySelector('.kaf-results-list');
+        const resultsCount = this.container?.querySelector('.kaf-results-count');
+        if (!resultsList || !resultsCount)
+            return;
+        if (results.length === 0) {
+            resultsList.innerHTML = '<div class="kaf-no-results">검색 결과가 없습니다.</div>';
+        }
+        else {
+            resultsCount.textContent = `검색 결과 (${totalCount}건)`;
+            resultsList.innerHTML = results.map((result, index) => `
+        <div class="kaf-result-item" data-index="${index}">
+          <div class="kaf-result-main">
+            <span class="kaf-result-type">도로명</span>
+            <span class="kaf-result-address">${result.roadAddress}</span>
+          </div>
+          <div class="kaf-result-sub">
+            <span class="kaf-result-type">지번</span>
+            <span class="kaf-result-address">${result.jibunAddress}</span>
+          </div>
+          <div class="kaf-result-zipcode">우편번호: ${result.zipCode}</div>
+          ${result.buildingName ? `<div class="kaf-result-building">${result.buildingName}</div>` : ''}
+        </div>
+      `).join('');
+            // 결과 항목 클릭 이벤트
+            resultsList.querySelectorAll('.kaf-result-item').forEach((item, index) => {
+                item.addEventListener('click', () => this.selectAddress(results[index]));
+            });
+        }
+        this.openResults();
+    }
+    /**
+     * 주소 선택 처리
+     */
+    selectAddress(address) {
+        const selectedContainer = this.container?.querySelector('.kaf-selected-address');
+        if (selectedContainer) {
+            selectedContainer.innerHTML = `
+        <div class="kaf-selected-content">
+          <div class="kaf-selected-main">
+            <strong>도로명:</strong> ${address.roadAddress}
+          </div>
+          <div class="kaf-selected-sub">
+            <strong>우편번호:</strong> ${address.zipCode}
+          </div>
+        </div>
+      `;
+            selectedContainer.style.display = 'block';
+        }
+        // 상세주소 입력 표시
+        if (this.options.showDetailInput && this.detailInput) {
+            const detailBox = this.container?.querySelector('.kaf-detail-box');
+            if (detailBox) {
+                detailBox.style.display = 'block';
+                this.detailInput.focus();
+            }
+        }
+        this.closeResults();
+        // 콜백 실행
+        const detailAddress = this.detailInput?.value || '';
+        this.options.onSelect({
+            ...address,
+            detailAddress,
+        });
+    }
+    /**
+     * 검색 결과 열기
+     */
+    openResults() {
+        if (this.resultsContainer) {
+            this.resultsContainer.style.display = 'block';
+            this.isOpen = true;
+        }
+    }
+    /**
+     * 검색 결과 닫기
+     */
+    closeResults() {
+        if (this.resultsContainer) {
+            this.resultsContainer.style.display = 'none';
+            this.isOpen = false;
+        }
+    }
+    /**
+     * 에러 표시
+     */
+    showError(message) {
+        const resultsList = this.container?.querySelector('.kaf-results-list');
+        if (resultsList) {
+            resultsList.innerHTML = `<div class="kaf-error">${message}</div>`;
+            this.openResults();
+        }
+    }
+    /**
+     * 컴포넌트 제거
+     */
+    destroy() {
+        if (this.container) {
+            this.container.innerHTML = '';
+        }
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+    }
+    /**
+     * 선택된 주소 가져오기
+     */
+    getSelectedAddress() {
+        const selectedContainer = this.container?.querySelector('.kaf-selected-address');
+        if (!selectedContainer || selectedContainer.innerHTML === '') {
+            return null;
+        }
+        const roadAddress = selectedContainer.querySelector('.kaf-selected-main')?.textContent?.replace('도로명:', '').trim() || '';
+        const zipCode = selectedContainer.querySelector('.kaf-selected-sub')?.textContent?.replace('우편번호:', '').trim() || '';
+        const detailAddress = this.detailInput?.value || '';
+        return { roadAddress, zipCode, detailAddress };
+    }
+}

package/dist/api-client.d.ts

@@ -0,0 +1,25 @@
+import { AddressResult } from './types';
+/**
+ * 주소 검색 API 클라이언트
+ * 행정안전부 주소 API를 사용하여 주소를 검색합니다.
+ */
+export declare class AddressApiClient {
+    private apiUrl;
+    private confmKey;
+    constructor(apiKey?: string);
+    /**
+     * 주소 검색
+     * @param keyword 검색 키워드
+     * @param currentPage 현재 페이지 번호
+     * @param countPerPage 페이지당 결과 수
+     * @returns 주소 검색 결과
+     */
+    search(keyword: string, currentPage?: number, countPerPage?: number): Promise<{
+        results: AddressResult[];
+        totalCount: number;
+    }>;
+    /**
+     * 참고항목 생성
+     */
+    private buildExtraAddress;
+}

package/dist/api-client.js

@@ -0,0 +1,79 @@
+/**
+ * 주소 검색 API 클라이언트
+ * 행정안전부 주소 API를 사용하여 주소를 검색합니다.
+ */
+export class AddressApiClient {
+    constructor(apiKey) {
+        this.apiUrl = 'https://business.juso.go.kr/addrlink/addrLinkApi.do';
+        // API 키가 없는 경우 공개 테스트 키 사용 (실제 서비스에서는 발급받아야 함)
+        this.confmKey = apiKey || 'devU01TX0FVVEgyMDI1MDExMDE1MTY0MTExNTM2MjY=';
+    }
+    /**
+     * 주소 검색
+     * @param keyword 검색 키워드
+     * @param currentPage 현재 페이지 번호
+     * @param countPerPage 페이지당 결과 수
+     * @returns 주소 검색 결과
+     */
+    async search(keyword, currentPage = 1, countPerPage = 10) {
+        if (!keyword || keyword.trim().length === 0) {
+            return { results: [], totalCount: 0 };
+        }
+        try {
+            const params = new URLSearchParams({
+                confmKey: this.confmKey,
+                currentPage: currentPage.toString(),
+                countPerPage: countPerPage.toString(),
+                keyword: keyword.trim(),
+                resultType: 'json',
+            });
+            const response = await fetch(`${this.apiUrl}?${params.toString()}`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            // 에러 체크
+            if (data.results.common.errorCode !== '0') {
+                console.error('API Error:', data.results.common.errorMessage);
+                return { results: [], totalCount: 0 };
+            }
+            // 결과 변환
+            const results = data.results.juso.map((item) => ({
+                roadAddress: item.roadAddr,
+                jibunAddress: item.jibunAddr,
+                zipCode: item.zipNo,
+                buildingName: item.bdNm || '',
+                sido: item.siNm,
+                sigungu: item.sggNm,
+                bname: item.emdNm,
+                extraAddress: this.buildExtraAddress(item),
+            }));
+            return {
+                results,
+                totalCount: parseInt(data.results.common.totalCount, 10),
+            };
+        }
+        catch (error) {
+            console.error('Address search error:', error);
+            throw error;
+        }
+    }
+    /**
+     * 참고항목 생성
+     */
+    buildExtraAddress(item) {
+        const extras = [];
+        if (item.bdNm) {
+            extras.push(item.bdNm);
+        }
+        if (item.detBdNmList) {
+            extras.push(item.detBdNmList);
+        }
+        return extras.join(', ');
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Korean Address Finder
+ * 팝업 없는 한국 주소 검색 라이브러리
+ */
+export { KoreanAddressFinder } from './address-finder';
+export { AddressApiClient } from './api-client';
+export type { AddressResult, AddressFinderOptions, JusoApiResponse } from './types';
+export { KoreanAddressFinder as default } from './address-finder';

package/dist/index.js

@@ -0,0 +1,8 @@
+/**
+ * Korean Address Finder
+ * 팝업 없는 한국 주소 검색 라이브러리
+ */
+export { KoreanAddressFinder } from './address-finder';
+export { AddressApiClient } from './api-client';
+// 기본 export
+export { KoreanAddressFinder as default } from './address-finder';

package/dist/styles.css

@@ -0,0 +1,279 @@
+/**
+ * Korean Address Finder Styles
+ * 팝업 없는 한국 주소 검색 컴포넌트 스타일
+ */
+
+.kaf-wrapper {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  position: relative;
+}
+
+/* 검색 박스 */
+.kaf-search-box {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.kaf-search-input {
+  flex: 1;
+  padding: 12px 16px;
+  font-size: 14px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.kaf-search-input:focus {
+  border-color: #4a90e2;
+}
+
+.kaf-search-input::placeholder {
+  color: #999;
+}
+
+.kaf-search-btn {
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
+  background-color: #4a90e2;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+}
+
+.kaf-search-btn:hover {
+  background-color: #357abd;
+}
+
+.kaf-search-btn:active {
+  background-color: #2a6299;
+}
+
+/* 검색 결과 컨테이너 */
+.kaf-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  max-height: 400px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.kaf-results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #f8f9fa;
+}
+
+.kaf-results-count {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.kaf-close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #666;
+  cursor: pointer;
+  padding: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.kaf-close-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.kaf-results-list {
+  overflow-y: auto;
+  max-height: 340px;
+}
+
+/* 검색 결과 항목 */
+.kaf-result-item {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.kaf-result-item:hover {
+  background-color: #f8f9fa;
+}
+
+.kaf-result-item:last-child {
+  border-bottom: none;
+}
+
+.kaf-result-main,
+.kaf-result-sub {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.kaf-result-type {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: white;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.kaf-result-main .kaf-result-type {
+  background-color: #4a90e2;
+}
+
+.kaf-result-sub .kaf-result-type {
+  background-color: #999;
+}
+
+.kaf-result-address {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+}
+
+.kaf-result-zipcode {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.kaf-result-building {
+  font-size: 12px;
+  color: #4a90e2;
+  margin-top: 4px;
+  font-weight: 500;
+}
+
+/* 결과 없음 / 에러 */
+.kaf-no-results,
+.kaf-error {
+  padding: 32px 16px;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+
+.kaf-error {
+  color: #e74c3c;
+}
+
+/* 상세주소 입력 */
+.kaf-detail-box {
+  margin-top: 12px;
+}
+
+.kaf-detail-input {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.kaf-detail-input:focus {
+  border-color: #4a90e2;
+}
+
+/* 선택된 주소 */
+.kaf-selected-address {
+  margin-top: 12px;
+  padding: 16px;
+  background-color: #f0f8ff;
+  border: 1px solid #4a90e2;
+  border-radius: 8px;
+}
+
+.kaf-selected-content {
+  font-size: 14px;
+}
+
+.kaf-selected-main,
+.kaf-selected-sub {
+  margin-bottom: 4px;
+}
+
+.kaf-selected-main strong,
+.kaf-selected-sub strong {
+  color: #4a90e2;
+  margin-right: 8px;
+}
+
+/* 스크롤바 스타일 */
+.kaf-results-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.kaf-results-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.kaf-results-list::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+.kaf-results-list::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* 반응형 */
+@media (max-width: 640px) {
+  .kaf-wrapper {
+    max-width: 100%;
+  }
+
+  .kaf-search-box {
+    flex-direction: column;
+  }
+
+  .kaf-search-btn {
+    width: 100%;
+  }
+
+  .kaf-results {
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: 16px 16px 0 0;
+    max-height: 70vh;
+  }
+}