api2.js

// 페이지가 로드되면 실행되는 함수
document.addEventListener('DOMContentLoaded', function() {
    // HTML 요소들 가져오기
    var countryListElement = document.getElementById('country-list');
    var countryDetailElement = document.getElementById('country-detail');
    var searchInput = document.getElementById('search-input');
    var regionSelect = document.getElementById('region-select');

    var apiUrl = 'https://restcountries.com/v3.1/all';
    
    // 페이지 로드 시 국가 데이터 가져오기
    fetchCountries();

    // 국가 데이터 불러오는 함수
    async function fetchCountries() {
        try {
            // 서버에 데이터 요청하기
            const response = await fetch(apiUrl);
            const countries = await response.json();
            // 데이터 받아서 화면에 표시
            displayCountries(countries);
        } catch (error) {
            console.log('데이터를 가져오는데 문제가 발생했습니다:', error);
        }
    }

    // 국가 목록 표시하는 함수
    function displayCountries(countries) {
        
        // 각 나라마다 카드 만들기
        for (var i = 0; i < countries.length; i++) {
            var country = countries[i];
            
            // 새로운 div 요소 만들기
            var countryCard = document.createElement('div');
            countryCard.className = 'country-card';
            
            // 카드 내용 채우기 (템플릿 리터럴 사용)
            countryCard.innerHTML = `
                <img src="${country.flags.svg}" alt="${country.name.common}">
                <h3>${country.name.common}</h3>
                <p>${country.region}</p>
            `;
            
            // 클릭 이벤트 추가하기 (이 나라를 클릭하면 상세 정보 보여줌)
            // 여기서 country 변수를 복사해서 사용해야 올바른 데이터가 전달됨
            var currentCountry = country;
            countryCard.onclick = function(countryData) {
                return function() {
                    showCountryDetail(countryData);
                };
            }(currentCountry);
            
            // 만든 카드를 목록에 추가하기
            countryListElement.appendChild(countryCard);
        }
    }

    // 국가 상세 정보 표시하는 함수
    function showCountryDetail(country) {
        // 언어 정보 가져오기
        var languages = '정보 없음';
        if (country.languages) {
            // 객체의 값들만 배열로 변환해서 쉼표로 연결
            var languageArray = [];
            for (var key in country.languages) {
                languageArray.push(country.languages[key]);
            }
            languages = languageArray.join(', ');
        }
        
        // 수도 정보 가져오기
        var capital = '정보 없음';
        if (country.capital) {
            capital = country.capital;
        }
        
        // 시간대 정보 가져오기
        var timezones = '정보 없음';
        if (country.timezones) {
            timezones = country.timezones.join(', ');
        }
        
        // 숫자 형식 변환 (천 단위 콤마)
        var formattedPopulation = country.population.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        
        // 상세 정보 HTML 만들기 (템플릿 리터럴 사용)
        countryDetailElement.innerHTML = `
            <h2>${country.name.common}</h2>
            <img src="${country.flags.svg}" alt="${country.name.common}" width="200">
            <p><strong>공식 명칭:</strong> ${country.name.official}</p>
            <p><strong>수도:</strong> ${capital}</p>
            <p><strong>인구:</strong> ${formattedPopulation}</p>
            <p><strong>언어:</strong> ${languages}</p>
            <p><strong>시간대:</strong> ${timezones}</p>
            <a href="https://www.google.com/maps/search/?q=${country.name.common}" target="_blank">Google 지도에서 보기</a>
        `;
    }

    // 검색 기능
    searchInput.addEventListener('input', function() {
        var searchTerm = searchInput.value.toLowerCase();
        var countryCards = document.querySelectorAll('.country-card');
        
        // 모든 카드를 확인하면서 이름에 검색어가 포함된 것만 표시
        for (var i = 0; i < countryCards.length; i++) {
            var card = countryCards[i];
            var countryName = card.querySelector('h3').textContent.toLowerCase();
            
            if (countryName.indexOf(searchTerm) !== -1) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        }
    });

    // 지역 필터링 기능
    regionSelect.addEventListener('change', async function() {
        var selectedRegion = regionSelect.value;
        
        try {
            // 서버에서 모든 데이터를 다시 가져와서 필터링
            const response = await fetch(apiUrl);
            const countries = await response.json();
            
            var filteredCountries = [];
            
            // 선택된 지역이 있으면 해당 지역만 필터링, 없으면 모든 국가 표시
            if (selectedRegion) {
                for (var i = 0; i < countries.length; i++) {
                    if (countries[i].region == selectedRegion) {
                        filteredCountries.push(countries[i]);
                    }
                }
            } else {
                filteredCountries = countries;
            }
            
            // 필터링된 국가 표시
            displayCountries(filteredCountries);
        } catch (error) {
            console.log('지역 필터링 중 오류 발생:', error);
        }
    });
});