나만의 게임 앱 창작 [자바스크립트]

이번에는 상품의 상세 설명을 추가해보겠습니다. 이 기능을 구현하기 위해 먼저 사용자가 클릭한 상품의 정보를 가져와야 합니다. 이후에는 그 상품의 상세 설명을 보여주는 모달 창을 만들어 사용자에게 보여줄 수 있습니다. 먼저, 각 상품에 대한 상세 정보를 담고 있는 객체를 생성해야 합니다. 이 객체는 상품의 이름, 가격, 이미지 등의 속성을 포함할 수 있습니다. 예를 들어, ```javascript const products = [ { id: 1, name: '청바지', price: 30000, description: '이 청바지는 편안한 착용감과 슬림한 핏으로 인기를 끌고 있습니다.' }, { id: 2, name: '흰 티셔츠', price: 15000, description: '편안한 면 소재로 제작된 티셔츠로 데일리로 입기에 적합합니다.' }, // 추가 상품 정보 ]; ``` 다음으로, 사용자가 특정 상품을 클릭했을 때 그 상품의 상세 정보를 보여주는 함수를 작성해야 합니다. ```javascript function showProductDetail(productId) { const product = products.find(product => product.id === productId); const modal = document.createElement('div'); modal.classList.add('modal'); modal.innerHTML = ` ${product.name} ${product.description} ${product.price}원 `; document.body.appendChild(modal); } ``` 위 코드에서는 사용자의 클릭 이벤트를 감지하여 해당 상품의 id를 인자로 받아와서, 그 id에 해당하는 상품 객체를 찾은 뒤 모달 창에 상세 정보를 보여주는 기능을 구현했습니다. 마지막으로, 상품을 클릭했을 때 위 함수를 호출하기 위해 해당 상품을 클릭하면 `showProductDetail` 함수를 호출하도록 이벤트를 등록해줍니다. ```javascript const productElements = document.querySelectorAll('.product'); productElements.forEach(productElement => { productElement.addEventListener('click', () => { showProductDetail(parseInt(productElement.dataset.id)); }); }); ``` 위 코드에서는 각 상품 요소를 선택하여 각 상품을 클릭했을 때 `showProductDetail` 함수를 호출하도록 이벤트를 등록해주었습니다. 이제 사용자가 상품을 클릭하면 해당 상품의 상세 정보를 보여주는 기능을 구현할 수 있습니다. 이를 통해 사용자에게 더 자세한 정보를 제공하여 상품에 대한 이해도를 높일 수 있습니다.