Apps Script로 공공데이터 API 데이터 호출하여 Tableau로 시각화 대시보드 제작하기

// code.gs

/**
 * 국토교통부 아파트 매매 실거래가 조회 웹앱
 * 
 * 작성자: Claude
 * 작성일: 2025-03-28
 * 
 * 이 스크립트는 국토교통부에서 제공하는 아파트 매매 실거래가 정보 오픈 API를 활용하여
 * 지역별, 계약년월별 실거래 정보를 조회하는 Google Apps Script 웹 애플리케이션입니다.
 */

// API 기본 설정
const API_BASE_URL = 'https://apis.data.go.kr/1613000/RTMSDataSvcAptTrade/getRTMSDataSvcAptTrade';

/**
 * 웹 애플리케이션의 진입점
 * 사용자에게 HTML 페이지를 제공합니다.
 */
function doGet() {
  return HtmlService.createTemplateFromFile('Index')
    .evaluate()
    .setTitle('국토교통부 아파트 실거래가 조회')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

/**
 * HTML 파일에 포함할 JavaScript와 CSS를 가져옵니다.
 */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

/**
 * API 키 저장 함수
 */
function saveApiKey(apiKey) {
  PropertiesService.getUserProperties().setProperty('API_KEY', apiKey);
  return true;
}

/**
 * API 키 조회 함수
 */
function getApiKey() {
  return PropertiesService.getUserProperties().getProperty('API_KEY') || '';
}

/**
 * API 키 삭제 함수
 */
function deleteApiKey() {
  PropertiesService.getUserProperties().deleteProperty('API_KEY');
  return true;
}

/**
 * API 키 존재 여부 확인 함수
 */
function hasApiKey() {
  const apiKey = getApiKey();
  return apiKey !== null && apiKey !== '';
}

/**
 * 지역 코드 목록을 반환합니다.
 * 주요 지역만 포함하고 있습니다.
 */
function getRegionCodes() {
  return [
    // 서울특별시
    { code: '11110', name: '서울특별시 종로구' },
    { code: '11140', name: '서울특별시 중구' },
    { code: '11170', name: '서울특별시 용산구' },
    { code: '11200', name: '서울특별시 성동구' },
    { code: '11215', name: '서울특별시 광진구' },
    { code: '11230', name: '서울특별시 동대문구' },
    { code: '11260', name: '서울특별시 중랑구' },
    { code: '11290', name: '서울특별시 성북구' },
    { code: '11305', name: '서울특별시 강북구' },
    { code: '11320', name: '서울특별시 도봉구' },
    { code: '11350', name: '서울특별시 노원구' },
    { code: '11380', name: '서울특별시 은평구' },
    { code: '11410', name: '서울특별시 서대문구' },
    { code: '11440', name: '서울특별시 마포구' },
    { code: '11470', name: '서울특별시 양천구' },
    { code: '11500', name: '서울특별시 강서구' },
    { code: '11530', name: '서울특별시 구로구' },
    { code: '11545', name: '서울특별시 금천구' },
    { code: '11560', name: '서울특별시 영등포구' },
    { code: '11590', name: '서울특별시 동작구' },
    { code: '11620', name: '서울특별시 관악구' },
    { code: '11650', name: '서울특별시 서초구' },
    { code: '11680', name: '서울특별시 강남구' },
    { code: '11710', name: '서울특별시 송파구' },
    { code: '11740', name: '서울특별시 강동구' },
    
    // 부산광역시
    { code: '26110', name: '부산광역시 중구' },
    { code: '26140', name: '부산광역시 서구' },
    { code: '26170', name: '부산광역시 동구' },
    { code: '26200', name: '부산광역시 영도구' },
    { code: '26230', name: '부산광역시 부산진구' },
    { code: '26260', name: '부산광역시 동래구' },
    { code: '26290', name: '부산광역시 남구' },
    { code: '26320', name: '부산광역시 북구' },
    { code: '26350', name: '부산광역시 해운대구' },
    { code: '26380', name: '부산광역시 사하구' },
    { code: '26410', name: '부산광역시 금정구' },
    { code: '26440', name: '부산광역시 강서구' },
    { code: '26470', name: '부산광역시 연제구' },
    { code: '26500', name: '부산광역시 수영구' },
    { code: '26530', name: '부산광역시 사상구' },
    { code: '26710', name: '부산광역시 기장군' },
    
    // 기타 주요 지역
    { code: '27110', name: '대구광역시 중구' },
    { code: '28110', name: '인천광역시 중구' },
    { code: '29110', name: '광주광역시 동구' },
    { code: '30110', name: '대전광역시 동구' },
    { code: '31110', name: '울산광역시 중구' },
    { code: '36110', name: '세종특별자치시' },
    { code: '41110', name: '경기도 수원시 장안구' },
    { code: '41111', name: '경기도 수원시 권선구' },
    { code: '41113', name: '경기도 수원시 팔달구' },
    { code: '41115', name: '경기도 수원시 영통구' },
    { code: '41130', name: '경기도 성남시 수정구' },
    { code: '41131', name: '경기도 성남시 중원구' },
    { code: '41133', name: '경기도 성남시 분당구' },
    { code: '41280', name: '경기도 고양시 덕양구' },
    { code: '41281', name: '경기도 고양시 일산동구' },
    { code: '41285', name: '경기도 고양시 일산서구' },
    { code: '41360', name: '경기도 남양주시' },
    { code: '41461', name: '경기도 용인시 기흥구' },
    { code: '41463', name: '경기도 용인시 수지구' },
    { code: '41590', name: '경기도 화성시' }
  ];
}

/**
 * 아파트 매매 실거래가 정보를 조회합니다.
 */
function getAptTradeInfo(regionCode, yearMonth) {
  try {
    // API 키 확인
    const apiKey = getApiKey();
    if (!apiKey) {
      return {
        success: false,
        message: 'API 키가 설정되지 않았습니다. 먼저 API 키를 설정해주세요.',
        data: null
      };
    }
    
    // API 요청 URL 구성
    const url = `${API_BASE_URL}?serviceKey=${encodeURIComponent(apiKey)}&LAWD_CD=${regionCode}&DEAL_YMD=${yearMonth}&numOfRows=1000&pageNo=1`;
    
    // API 요청 수행
    const response = UrlFetchApp.fetch(url, { muteHttpExceptions: true });
    
    // 응답 확인
    const responseCode = response.getResponseCode();
    
    if (responseCode !== 200) {
      return {
        success: false,
        message: `API 호출 실패: HTTP 상태 코드 ${responseCode}`,
        data: null
      };
    }
    
    // XML 응답 파싱
    const xmlContent = response.getContentText();
    const document = XmlService.parse(xmlContent);
    const root = document.getRootElement();
    
    // 응답 결과 코드 확인
    const header = root.getChild('header');
    if (header) {
      const resultCode = header.getChildText('resultCode');
      const resultMsg = header.getChildText('resultMsg');
      
      if (resultCode !== '00' && resultCode !== '000') {
        return {
          success: false,
          message: `API 오류: ${resultMsg} (코드: ${resultCode})`,
          data: null
        };
      }
    }
    
    // 데이터 추출
    const items = [];
    const body = root.getChild('body');
    if (body) {
      const itemsElement = body.getChild('items');
      if (itemsElement) {
        const itemElements = itemsElement.getChildren('item');
        
        for (const item of itemElements) {
          const aptData = {
            거래금액: item.getChildText('거래금액'),
            건축년도: item.getChildText('건축년도'),
            년: item.getChildText('년'),
            월: item.getChildText('월'),
            일: item.getChildText('일'),
            아파트: item.getChildText('아파트'),
            전용면적: item.getChildText('전용면적'),
            지번: item.getChildText('지번'),
            지역코드: item.getChildText('지역코드'),
            층: item.getChildText('층'),
            법정동: item.getChildText('법정동'),
            중개사소재지: item.getChildText('중개사소재지')
          };
          
          items.push(aptData);
        }
      }
    }
    
    return {
      success: true,
      message: '데이터를 성공적으로 조회했습니다.',
      data: items
    };
  } catch (error) {
    console.log("API 호출 중 오류:", error.toString());
    return {
      success: false,
      message: `오류 발생: ${error.message}`,
      data: null
    };
  }
}

/**
 * 거래금액 등의 값을 정리하는 함수
 */
function cleanupValue(value) {
  if (!value) return value;
  // 쉼표와 공백 제거
  return value.replace(/,|\s/g, '');
}


/**
 * XML 요소에서 특정 이름을 가진 모든 하위 요소를 찾는 헬퍼 함수
 */
function getElements(element, name) {
  const result = [];
  
  function traverse(elm) {
    // 현재 요소 이름 확인
    if (elm.getName && elm.getName() === name) {
      result.push(elm);
    }
    
    // 자식 요소 확인
    const children = elm.getChildren ? elm.getChildren() : [];
    for (let i = 0; i < children.length; i++) {
      traverse(children[i]);
    }
  }
  
  traverse(element);
  return result;
}

/**
 * XML 요소에서 특정 이름을 가진 하위 요소의 텍스트 내용을 가져오는 헬퍼 함수
 */
function getElementText(element, name) {
  try {
    // 직접 자식요소 확인
    const children = element.getChildren();
    for (let i = 0; i < children.length; i++) {
      const child = children[i];
      if (child.getName() === name) {
        return child.getText() || '';
      }
    }
    
    // 네임스페이스 고려
    const namespaces = element.getNamespaces();
    for (let j = 0; j < namespaces.length; j++) {
      const ns = namespaces[j];
      const child = element.getChild(name, ns);
      if (child) {
        return child.getText() || '';
      }
    }
    
    return '';
  } catch (e) {
    console.log(`${name} 요소 텍스트 가져오기 오류:`, e.toString());
    return '';
  }
}

/**
 * 테스트 API 호출
 * 개발 및 디버깅 용도
 */
function testApiCall() {
  const regionCode = '11680'; // 서울특별시 강남구
  const yearMonth = '202401'; // 2024년 1월
  
  const result = getAptTradeInfo(regionCode, yearMonth);
  console.log(result);
  
  return result;
}

// index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
    <title>국토교통부 아파트 실거래가 조회</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    
    <style>
      body {
        font-family: 'Noto Sans KR', sans-serif;
        background-color: #f8f9fa;
        padding: 20px;
      }
      .card {
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      .api-key-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
      }
      .api-key-modal-content {
        position: relative;
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        border-radius: 8px;
        width: 80%;
        max-width: 600px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      .close-button {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 24px;
        cursor: pointer;
      }
      .loading {
        display: none;
        text-align: center;
        padding: 20px;
      }
      #resultCount {
        font-weight: bold;
        color: #0d6efd;
      }
      .no-data {
        text-align: center;
        padding: 50px;
        color: #6c757d;
      }
    </style>
  </head>
  
  <body>
    <div class="container">
      <!-- 헤더 -->
      <div class="row mb-4">
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <h1 class="card-title text-center">국토교통부 아파트 실거래가 조회</h1>
              <p class="card-text text-center text-muted">
                국토교통부 실거래가 정보 오픈 API를 활용한 아파트 매매 실거래가 조회 서비스
              </p>
              <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="openApiKeyModal()">
                  <i class="bi bi-key"></i> API 키 설정
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 검색 폼 -->
      <div class="row mb-4">
        <div class="col-12">
          <div class="card">
            <div class="card-header bg-primary text-white">
              <h5 class="mb-0">검색 조건</h5>
            </div>
            <div class="card-body">
              <form id="searchForm">
                <div class="row g-3">
                  <!-- 지역 선택 -->
                  <div class="col-md-6">
                    <label for="regionCode" class="form-label">지역 선택</label>
                    <select class="form-select" id="regionCode" required>
                      <option value="" selected disabled>지역을 선택하세요</option>
                      <!-- 지역 코드는 JavaScript에서 동적으로 추가됩니다 -->
                    </select>
                  </div>
                  
                  <!-- 계약년월 선택 -->
                  <div class="col-md-6">
                    <label for="yearMonth" class="form-label">계약년월 (YYYYMM)</label>
                    <input type="month" class="form-control" id="yearMonth" required>
                    <small class="form-text text-muted">예: 2024년 1월</small>
                  </div>
                </div>
                
                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
                  <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search"></i> 검색
                  </button>
                  <button type="reset" class="btn btn-secondary">
                    <i class="bi bi-arrow-counterclockwise"></i> 초기화
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 로딩 표시 -->
      <div id="loading" class="loading">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">로딩 중...</span>
        </div>
        <p class="mt-2">데이터를 불러오는 중입니다...</p>
      </div>
      
      <!-- 결과 메시지 -->
      <div id="resultMessage" class="alert" style="display: none;"></div>
      
      <!-- 검색 결과 -->
      <div id="resultSection" style="display: none;">
        <div class="card">
          <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">검색 결과</h5>
            <span>총 <span id="resultCount">0</span>건</span>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped table-hover">
                <thead class="table-light">
                  <tr>
                    <th>아파트명</th>
                    <th>법정동</th>
                    <th>거래금액(만원)</th>
                    <th>전용면적(㎡)</th>
                    <th>층</th>
                    <th>건축년도</th>
                    <th>계약일</th>
                  </tr>
                </thead>
                <tbody id="resultTable">
                  <!-- 결과 데이터가 여기에 동적으로 추가됩니다 -->
                </tbody>
              </table>
            </div>
            <div id="noData" class="no-data" style="display: none;">
              <p>검색 결과가 없습니다.</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- API 키 설정 모달 -->
      <div id="apiKeyModal" class="api-key-modal">
        <div class="api-key-modal-content">
          <span class="close-button" onclick="closeApiKeyModal()">&times;</span>
          <h2 class="mb-4">API 키 설정</h2>
          <p>국토교통부 실거래가 정보 오픈 API 사용을 위한 인증키를 설정합니다.</p>
          
          <form id="apiKeyForm">
            <div class="mb-3">
              <label for="apiKey" class="form-label">API 키 (서비스 키)</label>
              <input type="text" class="form-control" id="apiKey" placeholder="공공데이터포털에서 발급받은 API 키를 입력하세요">
              <div class="form-text">
                공공데이터포털(data.go.kr)에서 발급받은 인증키를 입력하세요. 
                <a href="https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15126469" target="_blank">API 신청 바로가기</a>
              </div>
            </div>
            
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
              <button type="button" class="btn btn-danger" onclick="deleteApiKey()">
                <i class="bi bi-trash"></i> 삭제
              </button>
              <button type="button" class="btn btn-primary" onclick="saveApiKey()">
                <i class="bi bi-save"></i> 저장
              </button>
            </div>
          </form>
          
          <div id="apiKeyMessage" class="alert mt-3" style="display: none;"></div>
          
          <hr class="my-4">
          
          <h5>API 키 발급 방법</h5>
          <ol>
            <li>공공데이터포털(<a href="https://www.data.go.kr" target="_blank">data.go.kr</a>)에 회원가입 및 로그인합니다.</li>
            <li><a href="https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15126469" target="_blank">국토교통부_아파트 매매 실거래가 자료</a> 페이지에서 '활용신청' 버튼을 클릭합니다.</li>
            <li>활용 목적과 상세 기능을 입력하고 신청합니다.</li>
            <li>승인 후 '마이페이지 > 오픈API > 개발계정'에서 인증키를 확인합니다.</li>
            <li>발급받은 인증키를 위 입력란에 붙여넣고 저장합니다.</li>
          </ol>
        </div>
      </div>
      
      <!-- 푸터 -->
      <footer class="mt-5 text-center text-muted">
        <p>본 서비스는 <a href="https://www.data.go.kr" target="_blank">공공데이터포털</a>에서 제공하는 국토교통부 실거래가 정보 오픈 API를 활용합니다.</p>
        <p>&copy; 2025 국토교통부 실거래가 정보 조회 서비스</p>
      </footer>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
      // 페이지 로드 시 실행
      document.addEventListener('DOMContentLoaded', function() {
        // API 키 확인
        checkApiKey();
        
        // 지역 코드 목록 로드
        loadRegionCodes();
        
        // 현재 날짜로 계약년월 기본값 설정
        setDefaultDate();
        
        // 검색 폼 제출 이벤트 처리
        document.getElementById('searchForm').addEventListener('submit', function(e) {
          e.preventDefault();
          searchAptTradeInfo();
        });
      });
      
      // API 키 확인 함수
      function checkApiKey() {
        google.script.run
          .withSuccessHandler(function(hasKey) {
            if (!hasKey) {
              showMessage('API 키가 설정되지 않았습니다. API 키 설정 버튼을 클릭하여 API 키를 설정해주세요.', 'warning');
            }
          })
          .withFailureHandler(function(error) {
            console.error('API 키 확인 오류:', error);
          })
          .hasApiKey();
      }
      
      // 지역 코드 목록 로드 함수
      function loadRegionCodes() {
        google.script.run
          .withSuccessHandler(function(regionCodes) {
            const select = document.getElementById('regionCode');
            
            // 지역 코드를 시/도별로 그룹화
            const groupedCodes = {};
            
            regionCodes.forEach(function(region) {
              const parts = region.name.split(' ');
              const cityName = parts[0]; // 첫 번째 부분을 시/도 이름으로 사용
              
              if (!groupedCodes[cityName]) {
                groupedCodes[cityName] = [];
              }
              
              groupedCodes[cityName].push(region);
            });
            
            // 그룹별로 옵션 추가
            Object.keys(groupedCodes).sort().forEach(function(cityName) {
              const optgroup = document.createElement('optgroup');
              optgroup.label = cityName;
              
              groupedCodes[cityName].forEach(function(region) {
                const option = document.createElement('option');
                option.value = region.code;
                option.textContent = region.name;
                optgroup.appendChild(option);
              });
              
              select.appendChild(optgroup);
            });
          })
          .withFailureHandler(function(error) {
            console.error('지역 코드 로드 오류:', error);
            showMessage('지역 코드를 불러오는 중 오류가 발생했습니다.', 'error');
          })
          .getRegionCodes();
      }
      
      // 현재 날짜로 계약년월 기본값 설정 함수
      function setDefaultDate() {
        const today = new Date();
        const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1);
        const year = lastMonth.getFullYear();
        const month = String(lastMonth.getMonth() + 1).padStart(2, '0');
        
        document.getElementById('yearMonth').value = `${year}-${month}`;
      }
      
      // API 키 모달 열기
      function openApiKeyModal() {
        // 저장된 API 키 가져오기
        google.script.run
          .withSuccessHandler(function(apiKey) {
            document.getElementById('apiKey').value = apiKey;
          })
          .getApiKey();
        
        document.getElementById('apiKeyModal').style.display = 'block';
      }
      
      // API 키 모달 닫기
      function closeApiKeyModal() {
        document.getElementById('apiKeyModal').style.display = 'none';
        document.getElementById('apiKeyMessage').style.display = 'none';
      }
      
      // API 키 저장
      function saveApiKey() {
        const apiKey = document.getElementById('apiKey').value.trim();
        
        if (!apiKey) {
          showApiKeyMessage('API 키를 입력해주세요.', 'warning');
          return;
        }
        
        google.script.run
          .withSuccessHandler(function() {
            showApiKeyMessage('API 키가 성공적으로 저장되었습니다.', 'success');
            // 3초 후 모달 닫기
            setTimeout(closeApiKeyModal, 3000);
          })
          .withFailureHandler(function(error) {
            showApiKeyMessage('API 키 저장 중 오류가 발생했습니다: ' + error, 'danger');
          })
          .saveApiKey(apiKey);
      }
      
      // API 키 삭제
      function deleteApiKey() {
        if (confirm('정말로 API 키를 삭제하시겠습니까?')) {
          google.script.run
            .withSuccessHandler(function() {
              document.getElementById('apiKey').value = '';
              showApiKeyMessage('API 키가 삭제되었습니다.', 'success');
            })
            .withFailureHandler(function(error) {
              showApiKeyMessage('API 키 삭제 중 오류가 발생했습니다: ' + error, 'danger');
            })
            .deleteApiKey();
        }
      }
      
      // API 키 모달 메시지 표시
      function showApiKeyMessage(message, type) {
        const messageElement = document.getElementById('apiKeyMessage');
        messageElement.textContent = message;
        messageElement.style.display = 'block';
        
        messageElement.className = 'alert mt-3';
        switch (type) {
          case 'success':
            messageElement.classList.add('alert-success');
            break;
          case 'warning':
            messageElement.classList.add('alert-warning');
            break;
          case 'danger':
            messageElement.classList.add('alert-danger');
            break;
          default:
            messageElement.classList.add('alert-info');
        }
      }
      
      // 아파트 매매 실거래가 정보 검색
      function searchAptTradeInfo() {
        // 입력값 가져오기
        const regionCode = document.getElementById('regionCode').value;
        const yearMonthInput = document.getElementById('yearMonth').value;
        
        // 입력값 검증
        if (!regionCode || !yearMonthInput) {
          showMessage('모든 검색 조건을 입력해주세요.', 'error');
          return;
        }
        
        // YYYY-MM 형식을 YYYYMM 형식으로 변환
        const yearMonthParts = yearMonthInput.split('-');
        const yearMonth = yearMonthParts[0] + yearMonthParts[1];
        
        // 로딩 표시 및 결과 영역 초기화
        showLoading(true);
        hideResults();
        
        // 서버에 API 요청
        google.script.run
          .withSuccessHandler(handleSearchResults)
          .withFailureHandler(function(error) {
            showLoading(false);
            showMessage('오류가 발생했습니다: ' + error, 'error');
          })
          .getAptTradeInfo(regionCode, yearMonth);
      }
      
      // 검색 결과 처리
      function handleSearchResults(response) {
        showLoading(false);
        
        console.log("API 응답:", JSON.stringify(response));
        
        if (!response.success) {
          showMessage(response.message, 'error');
          return;
        }
        
        const data = response.data;
        
        if (!data || data.length === 0) {
          showMessage('검색 결과가 없습니다.', 'info');
          document.getElementById('resultSection').style.display = 'block';
          document.getElementById('noData').style.display = 'block';
          document.getElementById('resultCount').textContent = '0';
          return;
        }
        
        // 결과 테이블에 데이터 표시
        const tbody = document.getElementById('resultTable');
        tbody.innerHTML = '';
        
        data.forEach(function(item) {
          const row = document.createElement('tr');
          
          // 값이 없는 경우 처리
          const aptName = item.아파트 || '-';
          const dong = item.법정동 || '-';
          const price = item.거래금액 ? formatNumber(item.거래금액) : '-';
          const area = item.전용면적 ? parseFloat(item.전용면적).toFixed(2) : '-';
          const floor = item.층 || '-';
          const buildYear = item.건축년도 || '-';
          const dealDate = (item.년 && item.월 && item.일) ? 
            `${item.년}.${item.월}.${item.일}` : '-';
          
          row.innerHTML = `
            <td>${aptName}</td>
            <td>${dong}</td>
            <td class="text-end">${price}</td>
            <td class="text-end">${area}</td>
            <td class="text-center">${floor}</td>
            <td class="text-center">${buildYear}</td>
            <td class="text-center">${dealDate}</td>
          `;
          
          tbody.appendChild(row);
        });
        
        // 결과 개수 표시 및 결과 영역 표시
        document.getElementById('resultCount').textContent = data.length;
        document.getElementById('resultSection').style.display = 'block';
        document.getElementById('noData').style.display = 'none';
        
        showMessage(`${data.length}건의 실거래가 정보를 조회했습니다.`, 'success');
      }
      
      // 메시지 표시
      function showMessage(message, type) {
        const messageElement = document.getElementById('resultMessage');
        messageElement.textContent = message;
        messageElement.style.display = 'block';
        
        // 메시지 타입에 따른 스타일 설정
        messageElement.className = 'alert';
        switch (type) {
          case 'success':
            messageElement.classList.add('alert-success');
            break;
          case 'error':
            messageElement.classList.add('alert-danger');
            break;
          case 'warning':
            messageElement.classList.add('alert-warning');
            break;
          default:
            messageElement.classList.add('alert-info');
        }
        
        // 5초 후 메시지 자동 숨김
        setTimeout(function() {
          messageElement.style.display = 'none';
        }, 5000);
      }
      
      // 로딩 표시
      function showLoading(show) {
        document.getElementById('loading').style.display = show ? 'block' : 'none';
      }
      
      // 결과 영역 숨김
      function hideResults() {
        document.getElementById('resultSection').style.display = 'none';
        document.getElementById('resultMessage').style.display = 'none';
      }
      
      // 숫자 포맷팅 (천 단위 쉼표)
      function formatNumber(num) {
        return parseInt(num).toLocaleString();
      }
    </script>
  </body>
</html>

# 국토교통부 아파트 실거래가 조회 웹앱 사용 가이드

## 1. 시작하기

### 1.1 API 키 발급받기
1. [국토교통부 공공데이터 포털](https://www.data.go.kr/data/15058747/openapi.do)에 접속합니다.
2. 회원가입 후 로그인합니다.
3. "활용신청" 버튼을 클릭하여 API 키를 발급받습니다.
4. 발급받은 API 키를 복사합니다.

### 1.2 웹앱 설정하기
1. Google Apps Script 프로젝트를 생성합니다.
2. 제공된 코드를 복사하여 붙여넣습니다.
3. 웹앱을 배포합니다:
   - "배포" > "새 배포" 클릭
   - "액세스 권한" 설정에서 "모든 사용자" 선택
   - "배포" 버튼 클릭

## 2. 웹앱 사용하기

### 2.1 API 키 등록
1. 웹앱에 처음 접속하면 API 키를 입력하라는 메시지가 표시됩니다.
2. 발급받은 API 키를 입력하고 "저장" 버튼을 클릭합니다.

### 2.2 거래 정보 조회
1. "지역 선택" 드롭다운에서 원하는 지역을 선택합니다.
2. "년월 선택" 드롭다운에서 조회하고 싶은 년월을 선택합니다.
3. "조회" 버튼을 클릭합니다.

### 2.3 조회 결과 확인
- 조회된 아파트 거래 정보는 테이블 형태로 표시됩니다.
- 각 행에는 다음 정보가 포함됩니다:
  - 거래금액
  - 건축년도
  - 거래일자 (년/월/일)
  - 아파트명
  - 전용면적
  - 지번
  - 층수
  - 법정동
  - 중개사소재지

## 3. 주의사항
1. API 키는 안전하게 보관하세요.
2. API 호출 횟수에 제한이 있을 수 있습니다.
3. 데이터는 매월 업데이트됩니다.

## 4. 문제 해결
1. API 키 오류
   - API 키가 올바르게 입력되었는지 확인
   - API 키가 활성화되어 있는지 확인

2. 데이터가 표시되지 않는 경우
   - 선택한 지역과 년월에 거래 데이터가 있는지 확인
   - 인터넷 연결 상태 확인

3. 기타 문제
   - 브라우저 캐시 삭제 후 재시도
   - 다른 브라우저로 시도

## 5. 지원
문제가 발생하면 다음 정보를 확인해주세요:
- 선택한 지역 코드
- 선택한 년월
- 표시되는 오류 메시지