[FE] refactor: 클릭 이벤트가 있는 요소 드래그 막기

[soosoo22]

• resolves [FE] 클릭 이벤트가 있는 요소들의 드래그를 막는다. #560

---

🚀 어떤 기능을 구현했나요 ?

• 클릭 이벤트가 있는 요소의 드래그를 막았습니다.

드래그 막은 요소

• REVIEW ME (헤더 로고)
• Breadcrumb (좌측 상단 이동 경로 표시)
• 리뷰 작성 페이지
  • 체크박스
• 리뷰 목록 페이지
  • 리뷰 카드

🔥 어떻게 해결했나요 ?

일단, 3가지 막는 방식을 생각했습니다.

1. 일일이 클릭 요소에 user-select: none;을 추가하는 방식
2. body에 cursor: pointer가 있는 요소는 모두 user-select: none;을 넣는 방식
3. user-select: none 클래스를 만들어서 클릭 요소에 클래스 이름 추가하기

여러 방법을 고민해봤는데 일단 첫 번째 방식은 일일이 아래의 코드를 모두 넣어줘야 한다는 단점이 있어서 선택하지 않았습니다.

   -webkit-user-select: none; // WebKit 기반 브라우저(Google Chrome, Safari)
   -moz-user-select: none; // Mozilla Firefox 브라우저
   -ms-user-select: none; // 이전 버전의 Internet Explorer와 Microsoft Edge
   user-select: none;

원래 제가 생각했던 두번째 방식이 아래 코드를 추가하면 cursor: pointer 속성이 있는 모든 요소에 적용이 될 줄 알았는데... 인라인 스타일로 설정된 요소만 적용이 된다고 해서 선택하지 않았습니다.

*[style*="cursor: pointer"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

결국은 세번째 방식으로 드래그 방지 클래스를 만들어서 클릭 요소에 클래스를 적용하는 방식으로 진행했습니다.

  .prevent-drag {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

   <S.Logo className="prevent-drag">
    {/* <img src={LogoIcon} alt="로고 아이콘" /> */}
    // ....
   </S.Logo>

결론

드래그를 막아주는 prevent-drag를 클래스로 관리할 경우, 기능이 많아지고 파일이 많아지면서 다소 헷갈릴 수 있다는 점을 우려하여, 컴포넌트로 빼서 children에 클릭 요소들을 넣는 방식으로 변경했습니다.

const UndraggableWrapper = ({ children }: EssentialPropsWithChildren) => {
  return <S.Wrapper>{children}</S.Wrapper>;
};

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 드래그 막는 방식이 효율적일지? 궁금하네요... 그리고 저희 브라우저 지원 범위에 오페라?도 있었던 것 같은데 함께 고려해야 할까요?? 사파리만 해도 고려해야 할 점이 은근히 많아서 오페라까지 고려하기 힘들 것 같다는 생각이 드네요!
• PreventDrag가 children 요소를 감싸서 드래그를 막는 위치가 적절한지?

📚 참고 자료, 할 말

css-real 드래그(drag) 막기

[BadaHertz52]

꿋!!! 👍👍👍👍👍👍👍

[chysis]

깔끔한 방법으로 해결하게 되어 좋네요!

[ImxYJL]

번거로운 작업이었을텐데 수고 많았어요!

[ImxYJL]

굿!!!!

[ImxYJL]

EssentialPropsWithChildren도 잊지 않고 챙겨주셨네요!