React ( Next js ) long press (버튼 꾹누르기)

서론

진행하고 있는 사이드 프로젝트에서 고객센터를 카카오톡 오픈채팅으로 따로 운영하고 있는데,
채팅 기능을 작업하던 도중
고객문의채널에서 채팅방 메세지 삭제 기능을 요청주셨다.

현재 내가 진행하고 있는부분은 채팅방 부분을 작업하고 있는데 웹으로 개발하여 웹뷰에 붙이고 있다.

longPress 기능

보통 앱에서 채팅방에서 메세지를 삭제하려면 카카오톡 처럼 해당 메세지를 꾹 누르면 삭제/유무를 나타내준다.
우리의 웹사이트는 Next js로 개발하고 있어서 long Press 라이브러리가 있나 찾아보던 도중
괜찮은것을 발견하여 소개하고 싶었다.

바로! 아래 링크인데
npm 문서
use-long-press 라는 라이브러리 및 hooks 이다
사용방법도 매우 간결하다.

사용방법

import { LongPressDetectEvents, useLongPress } from 'use-long-press';
const App = () => {
	const [selectDeleteMsgId, setSelectDeleteMsgId] = useState('');
	const callback = React.useCallback(() => {
    if (confirm('해당 메세지를 삭제하시겠습니까? \n삭제한 메세지는 복구가 불가능합니다.')) {
      mutate(selectDeleteMsgId);
    }
  }, [selectDeleteMsgId]);
  const onDeleteMsg = useLongPress(callback, {
    onStart: (e, meta: any) => setSelectDeleteMsgId(meta.context), //누른것이 시작되면 호출되는 함수
    threshold: 500, // press 시간 /ms 초 단위이다.
    captureEvent: true, // 첫번째 인자로 들어온 callback 함수가 react MouseEvent를 도와주게 설정
    cancelOnMovement: false, // 확실하진않지만 꾹 눌렀다가 옆으로 이동했을때 취소여부 옵션인것같다
    detect: LongPressDetectEvents.BOTH, // pc의 mouse 혹은 mobile touch 둘다가능하게
  });
} 
return (
	<button {...onDeleteMsg(chat.id)}>
	메세지...
</button>
)
export default App;

useLongPress hook은 첫번쨰 인자로 콜백함수를 전달받고, 두번째 인자로 옵션을 설정할 수 있는데,
onStart: (e, meta: any) => setSelectDeleteMsgId(meta.context), //press 시작을 감지하여 삭제할 msgId를 전달해준다.
threshold: 500, // press 시간 /ms 초 단위이다.
captureEvent: true, // 첫번째 인자로 들어온 callback 함수가 react MouseEvent를 도와줄 수있게 설정
cancelOnMovement: false,
detect: LongPressDetectEvents.BOTH, // pc의 mouse 혹은 mobile touch 둘다가능하게

button을 0.5초이상 꾹누를시
위와같은 confirm 창이 나타난다.

확인 버튼을 클릭할 시 callback 함수에서 mutate를 실행해주기 때문에 메세지를 정상적으로 삭제할 수 있었다.

마무리하면서

2월 중으로 채팅방 업데이트를 할 예정인데 이렇게 사용자 피드백을 하나씩 수용하는 재미가 있는것같다.
많은의견을 주신만큼 보답해보고싶다!