[react & typescript] MUI Popover 사용기(Delete confirm 기능)

삭제 버튼을 누르면 바로 DELETE 요청이 처리되며 post 또는 comment가 삭제되는 과정에서, 유저가 실수로 삭제 버튼을 눌러 원치않는 삭제를 하게 될 경우가 발생할 가능성이 있겠다는 생각이 들었다. 

그래서 버튼 클릭시 유저가 삭제를 원하는지 재확인하여 처리하는 기능을 추가하기로 결심했다.

구글링을 해보니 Delete confirm 기능을 구현하는 데에는 tooltip, window confirm 등 여러 가지 방법이 있었는데, 나는 그 중 MUI의 Popover 라이브러리를 사용하여 구현하게 되었다.

https://mui.com/material-ui/api/popover/

Popover API - Material UI

 

사용법을 간단히 살펴보자.

먼저 npm 설치를 해준다.

npm install @mui/material @emotion/react @emotion/styled

설치가 끝나면 import를 해준다.

import { Popover, Typography } from "@mui/material";

import가 완료되면 먼저, 팝오버 컴포넌트를 추가해준다.

<Popover
          open={Boolean(anchorEL)}
          onClose={handleClose}
          anchorEl={anchorEL}
          anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
          transformOrigin={{ vertical: "top", horizontal: "right" }}
          style={PopoverStyle}
      >
      <Typography variant="body2" p={3} style={PopoverTStyle}>
               정말 삭제하시겠습니까?
            <button style={PopoverBtnStyle} onClick={handleDelete}>
                Yes
            </button>
            <button style={PopoverBtnStyle} onClick={handleClose}>
                No
            </button>
       </Typography>
</Popover>

Typography는 UI 요소를 시멘틱하게 작성할 수 있도록 도와주는 아이인 듯 하다. (시간이 부족해 이해하는데에 시간 투자를 많이 못했다는 것이 너무 아쉽다. 이 부분은 나중에 추가적으로 알아보는 걸로 해야겠다)

영어 잘하고 싶다고..

https://mui.com/material-ui/react-typography/

React Typography component - Material UI

팝오버의 css는 Inline-styling을 사용하여 작성해주었다.

  // popover styling
  const PopoverStyle = {
    zIndex: 10000,
    top: "10px",
  };

  const PopoverTStyle = {
    backgroundColor: "#e9e9e9",
    fontSize: "15px",
  };

  const PopoverBtnStyle = {
    backgroundColor: "#874356",
    color: "#ffffff",
    border: "none",
    marginLeft: "5px",
    borderRadius: "30px",
    cursor: "pointer",
    width: "40px",
    height: "20px",
  };

다음으로 원하는 html 요소를 클릭하면 팝오버가 뜨도록 만들기 위해 ref를 선언해준다.

// popover ref
const [anchorEL, setAnchorEL] = useState(null);

삭제 버튼을 누르면 ref가 이 버튼을 가르켜서 팝오버가 삭제 버튼 하단에 뜨도록 만들기 위해

  // popover post 삭제
  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    setAnchorEL(e.currentTarget);
  };

 

삭제 버튼에 onClick 핸들러 함수를 연결하고, 클릭 시 ref가 삭제 버튼을 가리키도록 만든다.

뿌듯하다!

 

참고한 영상)

https://www.youtube.com/watch?v=NzXAJSOcAdE