[URH-22] useOutsideInteraction 신규

[Choozii]

👾 Pull Request

• 작업명:

• 티켓: useOnClickOutside

• 상태: 신규

1️⃣ Spec

• 특정 엘리먼트의 외부 영역을 터치, 클릭하는 경우 인자로 전달받은 함수 실행
• 키보드 사용자를 위한 접근성 개선 - 모달에 주로 사용되는 hook이기 때문에 좋은 스펙이라고 생각하여 추가
  • esc 키 클릭 시 인자로 전달받은 함수 실행

2️⃣ 변경 사항

• 이벤트 타입이 click 뿐만 아니라 다른 타입들도 추가되며 이름을 useOutsideInteraction으로 변경
• 키보드 이벤트(esc)도 받아 처리하도록 수정

3️⃣ 예시 코드

const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOutsideInteraction = () => {
    setIsOpen(false);
  };

  const modalRef = useOutsideInteraction({ handleOutsideInteraction });

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>modal open</button>

      {isOpen && (
        <div ref={modalRef}>
            <h2>모달</h2>
            <p>모달 외부를 클릭하거나 esc키를 누르면 modal close</p>
        </div>
      )}
    </div>
  );
};

4️⃣ 관련 문서 (선택 사항)

[bicochan]

[P2] esc 키를 누르는 상황과 ref 영역 외부를 클릭하는 상황을 분리하는 건 어떨까요?

사용자 입장에서 생각해 볼 때 esc 키를 눌렀다는 건 '아무것도 하지 않겠다'는 의도에 좀 더 가깝다고 생각하는데 그 때 이벤트가 발생하면 버그처럼 느껴질 수도 있지 않을까요?🤔

아래 예시처럼 스타일로 ref를 숨겨볼 수도 있을 것 같습니다!

ref.current.style.visibility = "hidden";

[foresec]

저는 esc가 escape인 만큼 현재상황을 빠져나간다는 느낌으로 받아들여져서 괜찮은 것 같다고 생각합니다. 대신 문서에 keydown 및 escape키의 작동 여부를 확실히 명시해두면 좋을 것 같네요
덧붙이자면 keyboard이벤트 관련해서 분리하는 것도 나쁘지 않을 것 같습니다...너무 한정된 단위(키 하나)라 고민되긴 하네요

[Choozii]

흠... @bicochan @foresec
useOutsideClick과 useEscapeElement 두개 훅으로 나눠볼까요?

useOutsideClick은 마우스/터치 이벤트로 발생
useEscapeElement는 useOutsideClick+esc 클릭 시 발생 이런식으루...?

[bicochan]

오 이렇게 훅 하나 추가...?!😎

소현 님 말씀도 일리가 있어서 해당 부분은 지예 님이 판단하셔서 좋은 방향으로 반영하면 좋을 것 같아요!

[foresec]

네 저도 좋습니다! 분리하는 방식도 괜찮을것 같아요

[foresec]

고생하셨습니다👍 해당 코드를 보다보니 덕분에 ref를 저장할때 어떤 방법을 쓸지 다시한번 고민해보게 되었네요