[URH-47] useOutsideInteraction 기능 업데이트

[Choozii]

👾 Pull Request

• 티켓: useOutsideInteraction 기능 업데이트

• 상태: 기능 업데이트이자 신규....

1️⃣ Spec

• useOutsideInteraction을 useOutsideClick과 useKeyDown으로 분리

2️⃣ 변경 사항

#22 (comment)

useOutsideInteraction 작성 시 마우스 클릭과 키보드 인터랙션을 분리하면 좋겠다는 코멘트가 있어서 반영

• useOutsideClick
  • 요소의 바깥 부분 클릭을 감지하고 콜백 함수 실행하는 훅
• useKeyDown
  • 주어진 키가 눌려지면 콜백 함수 실행하는 훅

3️⃣ 예시 코드

import React, { useState } from 'react';
import useOutsideClick from './useOutsideClick';
import useKeyDown from './useKeyDown';

const Modal = ({ closeModal }: { closeModal: () => void }) => {
  const modalRef = useOutsideClick(closeModal);
  useKeyDown({ key: 'Escape', onKeyPress: closeModal });

  return (
    <div className="modal-backdrop">
      <div ref={modalRef} className="modal">
        <p>모달 내요오옹</p>
        <button onClick={closeModal}>닫기</button>
      </div>
    </div>
  );
};

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>모달 열기</button>
      {isModalOpen && <Modal closeModal={closeModal} />}
    </div>
  );
};

export default App;

[suhyeoonn]

고생하셨습니다!! 🤩👍