esc 를 눌렀을 경우 동작

안녕하세요 혹시 상세 페이지에 들어갔을 경우 esc를 누르면 ImagesZoom 컴포넌트를 끄게 하고 싶다면 어떻게 할 수 있을까요? onKeyDown을 이용하여 로직을 짜보았는데 동작을 하지않습니다..

import React, { useState, useCallback } from "react";
import PropTypes from "prop-types";
import Slick from "react-slick";
import {
  Global,
  Overlay,
  Header,
  SlickWrapper,
  Indicator,
  ImageWrapper,
  CloseBtn,
} from "./styles";

const Imageszoom = ({ images, onClose }) => {
  // 현재 슬라이드 위치를 표시하기 위한 state
  const [currentSlide, setCurrentSlide] = useState(0);
  const handleKeyPress = useCallback((e) => {
    if (e.key == 27) {
      onClose();
    }
  }, []);

  return (
    <Overlay>
      <Global />
      <Header>
        <h1>상세 이미지</h1>
        <CloseBtn onClick={onClose} onKeyDown={handleKeyPress} />
      </Header>
      <SlickWrapper>
        <Slick
          initialSlide={0}
          beforeChange={(slide) => setCurrentSlide(slide)}
          infinite
          arrows={false}
          slidesToShow={1}
          slidesToScroll={1}
        >
          {images.map((v) => (
            <ImageWrapper key={v.src}>
              <img src={v.src} alt={v.src} />
            </ImageWrapper>
          ))}
        </Slick>
        <Indicator>
          <span>
            {currentSlide + 1} / {images.length}
          </span>
        </Indicator>
      </SlickWrapper>
    </Overlay>
  );
};

Imageszoom.propTypes = {
  images: PropTypes.arrayOf(PropTypes.object.isRequired),
  onClose: PropTypes.func.isRequired,
};

export default Imageszoom;

인프런 커뮤니티 질문&답변