문제 상황

window 이벤트로 각 캔버스의 이벤트를 관리할 수 있도록 해놨지만, 다른 키들을 사용하게 되면 옆 textinput에 제대로 이벤트가 먹히지 않는 현상 발생

해당 문제는 이벤트 버블링에 대한 문제로 여겨진다.

현재 우리는 window에서 캔버스의 이벤트를 관리하고 있다.

이 이벤트는 아래로 내려가면서 이벤트에 대해서 캡처링 단계를 거친다.

그런데 window에 이벤트를 걸었던 canvas에서 아래로 내려주다보니 이벤트 캡처링 단계에서 이벤트가 잡힌 후 input으로 넘어가는 흐름이다???!

바보모먼트

<Textarea
          className="h-full w-full resize-none rounded-xl bg-grayscale-600 p-4"
          placeholder="Text를 넣어주세요. (500자 이상 2000자 이하)"
          onKeyDown={(e) => e.stopPropagation()}
          onChange={(e) => setContent(e.target.value)}
        />

바보는 onKeyDown에 stopPropagation을 안 걸고 onChange에 걸었던 나..