🖱️ 드래그 영역 - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

구분

• 날짜 : 2025.05.15
• 종류 : 버그
• 우선순위 : 🔴

---

1. 문제 상황

드래그 박스를 그리는데 시작점 위치를 마우스가 인식은 잘하지만 클릭하고 그냥 마우스를 움직여도 박스가 생성되는 문제가 발생되었다.

클릭 … 하고 클릭해도 박스가 생겨버리는 문제 뿐만 아니라, 이전 박스 영역이 남아있어서 이 부분이 렌더링이 되고 현재 박스 영역이 렌더링 되는 문제도 발생했다.

또, 캔버스 영역 안에서 첫 클릭을 해야만 박스가 생성되는데, 그 이후 바깥 영역을 넘어서 드래그 해도 영역이 생성되는 문제가 발생했다.

---

2. 원인

canvas.addEventListener에 각각 mousedown, mousemove, mouseup, mouseleave를 등록했는데, 드래그 상태임을 구별하기 위한 변수가 없었다.

따라서 내가 현재 드래그 중인지, 드래그가 가능한지 판단이 불가능해서 클릭 → 클릭 했을 때도, 클릭 → 마우스 이동해도 박스가 생성되는 현상이 발생했던 것이다.

또한 드래그 박스도 캔버스를 통해 그리는데, 이 부분을 초기화 안 했던 점 때문에 이전 영역이 남아있던 것이다.

---

3. 해결 과정

먼저 드래그 시작 위치와 상태를 다음과 같이 설정했다.

 // 마우스 클릭 유지 상태 나타내기
  canvas.addEventListener('mousedown', e => {
    if (isGameOver) return;

    startX = e.offsetX;
    startY = e.offsetY;
    draggable = true; // 추가
    isDragging = false; // 추가
  });

추가한 부분을 드래그일 때 반영하여서 수정했다.

canvas.addEventListener('mousemove', e => {
    if (!draggable || isGameOver) return;

    endX = e.offsetX;
    endY = e.offsetY;

if (!isDragging && (Math.abs(endX - startX) > dragThreshold || Math.abs(endY - startY) > dragThreshold)) {
      isDragging = true;
    }

    if (!isDragging) return;
    
    ...
    });

조건문을 통해 드래그 상태를 리턴하고, 드래그 중이며, dragThreshold를 5로 조정해, 마지막 드래그 위치와 시작 위치가 5를 넘는 경우, 또는 dragThreshold이 5를 넘는 경우면 드래그 중이라고 판단하게 설정하여 상태를 바꿔주었다.

해당 부분 이후, mouseup에서 토마토 선택 및 제거 로직을 수행하고 나면 드래그 상태를 나타내는 변수들의 값을 false로 초기화하도록 설정했다.

canvas.addEventListener('mouseup', e => {
    if (isGameOver) return;

    endX = e.offsetX;
    endY = e.offsetY;
    
    ...선택 로직
    
    draggable = false;
    isDragging = false;

    clearSelect();

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    redrawGrid();
  });

그런 다음, 선택을 초기화 하는 함수를 호출하고, 캔버스로 그린 영역도 초기화한 다음, 선택 로직 이후 상태를 업데이트 하기 위해 캔버스를 다시 그리는 함수를 호출했다.

캔버스를 그릴 때, 이어서 그릴 것이 아니라면 꼭 초기화를 해주기. 특히 드래그일 때는 상태를 꼭 전달하여 계속 조건을 확인하도록 설정해야 함을 잊지 않도록 해야한다는 것을 배우게 되었다.