콘텍스트 메뉴를 사용하여 편리한 기능을 구현하면 사용자 경험이 향상됩니다. 이번에는 페이스북 또는 __인스타그램__과 같은 소셜 미디어 앱에서 주로 사용되는 콘텍스트 메뉴를 구현하는 방법에 대해 알아보겠습니다.

콘텍스트 메뉴란?

콘텍스트 메뉴는 사용자가 앱의 특정 아이템을 선택했을 때 나타나는 메뉴로, 해당 아이템에 대해 수행할 수 있는 작업을 나타냅니다. 예를 들어, 사진을 선택했을 때 편집, 삭제, 공유 등의 작업을 제공하는 메뉴가 콘텍스트 메뉴입니다.

기능 구현

1. 터치 이벤트 리스너 등록하기

가장 먼저, 콘텍스트 메뉴가 나타나야 하는 지점에 터치 이벤트 리스너를 등록해야 합니다. 사용자가 터치할 때마다 해당 지점에 콘텍스트 메뉴를 표시하도록 구현해야 합니다.

document.getElementById('item').addEventListener('longpress', function() {
  // 콘텍스트 메뉴 표시하기
});

2. 콘텍스트 메뉴 표시하기

터치 이벤트가 발생하면, 해당 지점에 콘텍스트 메뉴를 동적으로 생성하여 표시해야 합니다. CSS를 사용하여 메뉴의 디자인을 꾸밀 수 있습니다.

function showContextMenu(x, y) {
  var contextMenu = document.createElement('div');
  contextMenu.innerHTML = `
    <ul>
      <li>편집</li>
      <li>삭제</li>
      <li>공유</li>
    </ul>
  `;
  contextMenu.style.left = x + 'px';
  contextMenu.style.top = y + 'px';
  document.body.appendChild(contextMenu);
}

3. 작업 수행 처리하기

사용자가 콘텍스트 메뉴에서 작업을 선택하면, 해당 작업을 수행하는 함수를 호출해야 합니다.

contextMenu.addEventListener('click', function(e) {
  if (e.target.textContent === '편집') {
    // 편집 작업 수행
  } else if (e.target.textContent === '삭제') {
    // 삭제 작업 수행
  } else if (e.target.textContent === '공유') {
    // 공유 작업 수행
  }
});

마무리

콘텍스트 메뉴를 사용하여 앱의 기능을 확장할 수 있습니다. 편집, 삭제, 공유 등의 기능을 콘텍스트 메뉴로 제공함으로써, 사용자가 원하는 작업을 빠르게 수행할 수 있게 됩니다. 여기서는 간단한 예제로 소개했지만, 실제 앱에서는 디자인과 사용성을 고려하여 콘텍스트 메뉴를 구현해야 합니다.

더 많은 정보는 MDN Web Docs에서 찾아볼 수 있습니다.

본 포스팅은 Web Dev Simplified의 영상을 참고하여 작성되었습니다.