javascript 클릭시 변하는 이미지

index.html

    <div class="container">
        <div class="big"></div>
        <div class="nav">
            <img src="1.png" class="icon-img" data-icon="pill"/>
            <img src="2.png" class="icon-img" data-icon="color"/>
            <img src="3.png" class="icon-img" data-icon="images"/>
        </div>
    </div>

app.js

const icons = [
    {
        id: `pill`,
        img: `1.png`
    },
        {
        id: `color`,
        img: `2`
    },
        {
        id: `images`,
        img: `3`
    }
]

const mainImg = document.querySelector('.big');
const bottomImgs = document.querySelectorAll('.icon-img');

mainImg.innerHTML = `<img src="${icons[0].img}" />`

bottomImgs.forEach(e=>{
    e.addEventListener('click',()=>{
        const IconDataset = e.dataset.icon;
        let IconImg = icons.map(ev=>{
            if(ev.id === IconDataset){
                return `<img src="${ev.img}"/>`
            }
        }).join('');
        mainImg.innerHTML = IconImg;
    })
})