Javascript 시작하기 - 국기콤보#2

국기 콤보 ISO 데이터 기준으로 만들어 보자.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체 ISO 국기 콤보박스</title>

<style>
    body{
        margin:0;
        padding:40px;
        background:#edf2f7;
        font-family:Arial, sans-serif;
    }

    .flag-combo{
        position:relative;
        width:360px;
        user-select:none;
    }

    .flag-selected{
        display:flex;
        align-items:center;
        justify-content:space-between;
        background:white;
        border:1px solid #ccc;
        border-radius:14px;
        padding:12px 14px;
        cursor:pointer;
        box-shadow:0 4px 10px rgba(0,0,0,0.08);
    }

    .flag-left{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .flag-left img,
    .flag-option img{
        width:42px;
        height:28px;
        object-fit:cover;
        border-radius:4px;
        border:1px solid #ddd;
    }

    .flag-arrow{
        transition:0.2s;
    }

    .flag-combo.open .flag-arrow{
        transform:rotate(180deg);
    }

    .flag-options{
        position:absolute;
        width:100%;
        background:white;
        margin-top:8px;
        border-radius:14px;
        overflow:hidden;
        box-shadow:0 10px 25px rgba(0,0,0,0.15);
        display:none;
        z-index:100;
        max-height:420px;
        overflow-y:auto;
    }

    .flag-option{
        display:flex;
        align-items:center;
        gap:12px;
        padding:12px 14px;
        cursor:pointer;
        transition:0.15s;
    }

    .flag-option:hover{
        background:#f3f7fd;
    }

    .result{
        margin-top:30px;
        width:360px;
        background:white;
        border-radius:18px;
        padding:20px;
        box-shadow:0 4px 10px rgba(0,0,0,0.08);
    }

    .result img{
        width:240px;
        margin-top:10px;
        border-radius:10px;
        border:1px solid #ddd;
    }

    .result h2{
        margin:0;
    }

    .result p{
        color:#666;
        font-size:18px;
    }
</style>
</head>
<body>

<div id="countryCombo"></div>

<div class="result">
    <h2 id="resultName"></h2>
    <img id="resultImg">
    <p id="resultISO"></p>
</div>

<script>
/* =========================================
   ISO 국가 전체 데이터
========================================= */

const isoCountryList = [

["AF","아프가니스탄"],
["AL","알바니아"],
["DZ","알제리"],
["AD","안도라"],
["AO","앙골라"],
["AR","아르헨티나"],
["AM","아르메니아"],
["AU","호주"],
["AT","오스트리아"],
["AZ","아제르바이잔"],
["BH","바레인"],
["BD","방글라데시"],
["BY","벨라루스"],
["BE","벨기에"],
["BZ","벨리즈"],
["BJ","베냉"],
["BT","부탄"],
["BO","볼리비아"],
["BA","보스니아 헤르체고비나"],
["BW","보츠와나"],
["BR","브라질"],
["BN","브루나이"],
["BG","불가리아"],
["BF","부르키나파소"],
["BI","부룬디"],
["KH","캄보디아"],
["CM","카메룬"],
["CA","캐나다"],
["CL","칠레"],
["CN","중국"],
["CO","콜롬비아"],
["CR","코스타리카"],
["HR","크로아티아"],
["CU","쿠바"],
["CY","키프로스"],
["CZ","체코"],
["DK","덴마크"],
["DO","도미니카공화국"],
["EC","에콰도르"],
["EG","이집트"],
["SV","엘살바도르"],
["EE","에스토니아"],
["ET","에티오피아"],
["FI","핀란드"],
["FR","프랑스"],
["GE","조지아"],
["DE","독일"],
["GH","가나"],
["GR","그리스"],
["GT","과테말라"],
["HT","아이티"],
["HN","온두라스"],
["HK","홍콩"],
["HU","헝가리"],
["IS","아이슬란드"],
["IN","인도"],
["ID","인도네시아"],
["IR","이란"],
["IQ","이라크"],
["IE","아일랜드"],
["IL","이스라엘"],
["IT","이탈리아"],
["JM","자메이카"],
["JP","일본"],
["JO","요르단"],
["KZ","카자흐스탄"],
["KE","케냐"],
["KW","쿠웨이트"],
["KG","키르기스스탄"],
["LA","라오스"],
["LV","라트비아"],
["LB","레바논"],
["LY","리비아"],
["LT","리투아니아"],
["LU","룩셈부르크"],
["MO","마카오"],
["MG","마다가스카르"],
["MY","말레이시아"],
["MV","몰디브"],
["MX","멕시코"],
["MD","몰도바"],
["MC","모나코"],
["MN","몽골"],
["ME","몬테네그로"],
["MA","모로코"],
["MM","미얀마"],
["NP","네팔"],
["NL","네덜란드"],
["NZ","뉴질랜드"],
["NG","나이지리아"],
["KP","북한"],
["MK","북마케도니아"],
["NO","노르웨이"],
["OM","오만"],
["PK","파키스탄"],
["PA","파나마"],
["PY","파라과이"],
["PE","페루"],
["PH","필리핀"],
["PL","폴란드"],
["PT","포르투갈"],
["QA","카타르"],
["RO","루마니아"],
["RU","러시아"],
["SA","사우디아라비아"],
["RS","세르비아"],
["SG","싱가포르"],
["SK","슬로바키아"],
["SI","슬로베니아"],
["ZA","남아프리카공화국"],
["KR","대한민국"],
["ES","스페인"],
["LK","스리랑카"],
["SE","스웨덴"],
["CH","스위스"],
["SY","시리아"],
["TW","대만"],
["TH","태국"],
["TR","튀르키예"],
["UA","우크라이나"],
["AE","아랍에미리트"],
["GB","영국"],
["US","미국"],
["UY","우루과이"],
["UZ","우즈베키스탄"],
["VE","베네수엘라"],
["VN","베트남"],
["YE","예멘"],
["ZM","잠비아"],
["ZW","짐바브웨"]

];

/* =========================================
   객체 데이터 생성
========================================= */

const countryData = isoCountryList.map(item => {

    return {

        iso  : item[0],

        name : item[1],

        img  :
            `https://flagcdn.com/w320/${item[0].toLowerCase()}.png`
    };

});

/* =========================================
   국기 콤보 생성 함수
========================================= */

function createFlagCombo({

    targetId,
    data,
    defaultISO = "KR",
    onChange = null

}){

    const target = document.getElementById(targetId);

    const combo = document.createElement("div");

    combo.className = "flag-combo";

    combo.innerHTML = `
        <div class="flag-selected">

            <div class="flag-left"></div>

            <div class="flag-arrow">▼</div>

        </div>

        <div class="flag-options"></div>
    `;

    target.appendChild(combo);

    const selected = combo.querySelector(".flag-selected");

    const left = combo.querySelector(".flag-left");

    const options = combo.querySelector(".flag-options");

    /* 선택 */
    function selectItem(item){

        left.innerHTML = `
            <img src="${item.img}">
            <span>${item.name}</span>
        `;

        combo.dataset.iso = item.iso;

        if(onChange){
            onChange(item);
        }
    }

    /* 옵션 */
    data.forEach(item => {

        const option = document.createElement("div");

        option.className = "flag-option";

        option.innerHTML = `
            <img src="${item.img}">
            <span>${item.name} (${item.iso})</span>
        `;

        option.addEventListener("click", () => {

            selectItem(item);

            options.style.display = "none";

            combo.classList.remove("open");
        });

        options.appendChild(option);

    });

    /* 열기 닫기 */
    selected.addEventListener("click", () => {

        const isOpen =
            options.style.display === "block";

        options.style.display =
            isOpen ? "none" : "block";

        combo.classList.toggle("open");
    });

    /* 외부 클릭 */
    document.addEventListener("click", (e) => {

        if(!e.target.closest(".flag-combo")){

            options.style.display = "none";

            combo.classList.remove("open");
        }

    });

    /* 기본값 */
    const defaultItem =
        data.find(x => x.iso === defaultISO)
        || data[0];

    selectItem(defaultItem);

    /* API */
    return {

        getValue(){

            return combo.dataset.iso;
        },

        setValue(iso){

            const item =
                data.find(x => x.iso === iso);

            if(item){
                selectItem(item);
            }
        }

    };

}

/* =========================================
   실행
========================================= */

const combo = createFlagCombo({

    targetId : "countryCombo",

    data : countryData,

    defaultISO : "KR",

    onChange : (item) => {

        document.getElementById("resultName")
            .textContent = item.name;

        document.getElementById("resultImg")
            .src = item.img;

        document.getElementById("resultISO")
            .textContent =
            `ISO CODE : ${item.iso}`;

        console.log(item);

    }

});

</script>

</body>
</html>