[javascript] 콘텍스트 메뉴를 사용한 할일 관리 앱 개발하기
이번에는 콘텍스트 메뉴를 활용하여 할일 관리 앱을 개발해보겠습니다. 콘텍스트 메뉴는 마우스 우클릭 시 나타나는 메뉴를 말합니다. 이 기능을 이용하여 할일을 추가하고 삭제하는 기능을 구현해보겠습니다.
1. 프로젝트 설정
먼저, 새로운 프로젝트를 생성하고 필요한 라이브러리를 설치합니다. 우리는 React를 사용할 것이기 때문에 create-react-app을 통해 프로젝트를 생성하겠습니다.
npx create-react-app todo-app
cd todo-app
npm install react-icons
2. 콘텍스트 메뉴 구현
할일 목록 컴포넌트를 생성하고, 각 항목에 콘텍스트 메뉴를 추가합니다. 이를 위해 react-icons 라이브러리를 활용하여 우클릭 시 나타날 아이콘을 설정하겠습니다.
import React, { useState } from 'react';
import { FaEllipsisV } from 'react-icons/fa';
const TodoItem = ({ text, onContextMenu }) => {
return (
<div onContextMenu={onContextMenu}>
{text}
<FaEllipsisV />
</div>
);
};
const TodoList = () => {
const handleContextMenu = (e) => {
e.preventDefault();
// 콘텍스트 메뉴를 띄우는 로직 구현
};
return (
<div>
<TodoItem text="할일 1" onContextMenu={handleContextMenu} />
<TodoItem text="할일 2" onContextMenu={handleContextMenu} />
<TodoItem text="할일 3" onContextMenu={handleContextMenu} />
</div>
);
};
export default TodoList;
3. 콘텍스트 메뉴 스타일링
콘텍스트 메뉴의 스타일링을 위해 CSS를 추가합니다.
.context-menu {
position: absolute;
background: #fff;
border: 1px solid #ccc;
padding: 5px 0;
}
4. 콘텍스트 메뉴 동작 구현
마지막으로, 콘텍스트 메뉴가 나타났을 때의 동작을 구현합니다. 여기서는 간단히 alert를 이용하여 콘텍스트 메뉴가 동작하는 것을 확인해보겠습니다.
const handleContextMenu = (e) => {
e.preventDefault();
const contextMenu = document.createElement('div');
contextMenu.className = 'context-menu';
contextMenu.innerHTML = '메뉴 항목 1<br>메뉴 항목 2';
contextMenu.style.left = `${e.pageX}px`;
contextMenu.style.top = `${e.pageY}px`;
document.body.appendChild(contextMenu);
document.addEventListener('click', () => {
document.body.removeChild(contextMenu);
});
};
이제 콘텍스트 메뉴를 사용하여 할일을 추가하고 삭제하는 앱을 만들었습니다. 콘텍스트 메뉴의 외관과 동작을 더욱 다양하게 커스터마이징하여 실제 애플리케이션에 적용해보세요.