드래그 앤 드롭 기능을 사용하여 사용자가 웹 사이트의 가계부에 항목을 추가하고 관리할 수 있는 기능을 구현하는 방법에 대해 알아보겠습니다. 이 기능은 자바스크립트를 사용하여 구현할 수 있으며, HTML과 CSS를 이용해 프론트엔드를 구현할 수 있습니다.

1. HTML 구조 설정

먼저, 가계부를 구현하기 위해 HTML의 구조를 설정해야 합니다. 예를 들어, 가계부 항목을 나타내는 HTML 요소에는 드래그 앤 드롭 기능을 적용해야 합니다. 이를 위해 <div>나 <ul>과 같은 컨테이너 요소를 사용할 수 있습니다.

<div id="income" class="category">
  <h2>수입</h2>
  <ul id="income-list" class="list"></ul>
</div>

<div id="expense" class="category">
  <h2>지출</h2>
  <ul id="expense-list" class="list"></ul>
</div>

위의 예시는 수입과 지출을 나타내는 두 개의 카테고리를 가지는 가계부의 구조를 보여줍니다. 각 카테고리는 <ul> 요소로 구성되어 있으며, 항목은 이 <ul> 요소에 추가될 것입니다.

2. CSS 스타일링

HTML 구조를 설정한 후에는 CSS를 사용하여 가계부의 스타일을 정의해야 합니다. 이 단계에서는 드래그 앤 드롭 기능을 적용할 요소에 적절한 스타일을 추가해야 합니다.

.list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  cursor: grab;
}

.list-item:active {
  cursor: grabbing;
}

.category {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
  margin-right: 20px;
}

.category h2 {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

위의 예시는 가계부의 스타일을 정의하는 CSS입니다. .list 클래스는 가계부의 항목 목록을 스타일링하고, .list-item 클래스는 각 항목의 스타일을 정의합니다. .category 클래스는 카테고리의 스타일을 지정합니다.

3. 자바스크립트로 드래그 앤 드롭 기능 구현

드래그 앤 드롭 기능을 구현하기 위해서는 자바스크립트의 이벤트 처리 기능을 활용해야 합니다. 드래그 앤 드롭 기능을 구현하는 방법은 다양하지만, 여기에서는 HTML5에서 제공하는 dragstart, dragenter, dragover, drop 이벤트를 사용하여 구현해보겠습니다.

const items = document.getElementsByClassName('list-item');

for (const item of items) {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragenter', handleDragEnter);
  item.addEventListener('dragover', handleDragOver);
  item.addEventListener('drop', handleDrop);
  item.addEventListener('dragend', handleDragEnd);
}

위의 코드는 .list-item 클래스를 가진 요소들에 대해 드래그 앤 드롭 이벤트를 처리하는 리스너를 추가하는 예시입니다. 각 이벤트 핸들러 함수는 이벤트의 세부적인 처리를 담당합니다.

function handleDragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
  event.target.style.opacity = '0.6';
}

function handleDragEnter(event) {
  event.preventDefault();
  event.target.classList.add('dragover');
}

function handleDragOver(event) {
  event.preventDefault();
}

function handleDrop(event) {
  event.preventDefault();
  const itemId = event.dataTransfer.getData('text/plain');
  const item = document.getElementById(itemId);
  event.target.appendChild(item);
  event.target.classList.remove('dragover');
}

function handleDragEnd(event) {
  event.target.style.opacity = '1';
}

위의 예시는 드래그 앤 드롭 이벤트를 처리하는 기능을 구현한 코드입니다. 예를 들어 handleDragStart 함수는 드래그가 시작될 때 실행되며, 드래그된 요소의 id를 데이터로 저장하고 스타일을 변경합니다. handleDrop 함수는 드롭이 발생할 때 실행되며, 드래그된 항목을 드롭된 위치로 옮깁니다.

결론

이렇게 자바스크립트를 사용하여 드래그 앤 드롭을 활용한 가계부 기능을 구현할 수 있습니다. 위의 예시 코드를 참고하여 자신만의 가계부 기록 기능을 웹 사이트에 추가해보세요.