[팀] 겸상 - 토글된 모달창이 사용할 수 없는(비활성) 상태 ㅠ_ㅠ HTML-Vue.js는 template-에서 모달이 작성된 위치를 다시 살펴야!

숟갈이 원하는 밥상에 숟갈을 얹을 때 밥장에게 구애(?)의 메시지를 함께 보내려고 한다. 여러 방법이 있겠지만 모달을 띄우고 textarea에 메시지를 작성하는 방법으로 구현하고자 했다. 모달은 다른 곳에서도 사용할 수 도 있으므로 slot으로 만들어 재사용 가능하게 했다. id도 정확하게 잘 맞춘 후 작동을 시켰는데 헐, [그림 1]과 같은 결과가 발생했다. 모달을 아무리 클릭해도 반응하지 않았고 코드를 다시 살펴봐도 문제라곤 보이지 않았다. 테스트 코드를 만들고 거기서 작동시키면 잘된다. 뭐가 문제 일까?

 

[그림 1] 토글된 모달창을 사용할 수 없는 상태

 

한참을 삽질하다가 [그림 2]와 같은 정상적인 결과를 얻었다. 문제의 원인은 HTML에서 모달을 작성한 위치였다. "현재 신청한 숟갈들"을 모니터링해주는 div 안에 작성했던 게 문제였던 것이다. 거기에 작성한 별다른 이유가 있었던 건 아니고 "숟갈 얹기" 버튼을 클릭하면 모달이 토글 되게 하려고 하다 보니 연관된 것들을 가까이에 두어야겠다고 생각하며 작성하다 보니 그렇게 되었다.

모달 코드를 상위 div 내에 작성하자 [그림 2]와 같은 정상적인 결과를 얻게되었다. 당시에는 모니터에 어두운 부분을 지우개로 지우고 싶은-환장할-심정이었으나 지나고 보면 한심할 정도로 별일 아니다!

 

[그림 2] 정상적으로 토글된 모달창