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

이번에는 상품의 상세 설명을 추가해보겠습니다. 이 기능을 구현하기 위해 먼저 사용자가 클릭한 상품의 정보를 가져와야 합니다. 이후에는 그 상품의 상세 설명을 보여주는 모달 창을 만들어 사용자에게 보여줄 수 있습니다.

먼저, 각 상품에 대한 상세 정보를 담고 있는 객체를 생성해야 합니다. 이 객체는 상품의 이름, 가격, 이미지 등의 속성을 포함할 수 있습니다. 예를 들어,

```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` 함수를 호출하도록 이벤트를 등록해주었습니다.

이제 사용자가 상품을 클릭하면 해당 상품의 상세 정보를 보여주는 기능을 구현할 수 있습니다. 이를 통해 사용자에게 더 자세한 정보를 제공하여 상품에 대한 이해도를 높일 수 있습니다.