타입스크립트 리액트 UI

클릭시 노출되는 레이어팝업

import React, { CSSProperties, FC, PropsWithChildren, useCallback } from 'react';

interface Props {
  show: boolean;
  onCloseModal: (e: any) => void;
  style: CSSProperties;
  closeButton?: boolean;
}

const Layer: FC<PropsWithChildren<Props>> = ({ closeButton, style, show, children, onCloseModal }) => {
  const stopPropagation = useCallback((e) => {
    e.stopPropagation();
  }, []);

  if (!show) {
    return null;
  }
  return (
    <div onClick={onCloseModal}>
      <div onClick={stopPropagation} style={style}>
        {closeButton && <button onClick={onCloseModal}>&times;</button>}
        {children}
      </div>
    </div>
  );
};

Layer.defaultProps = {
  closeButton: true,
};

export default Layer;