[React] MUI를 이용해 React 화면 꾸미기(Modal팝업창 띄워 보기)

https://mui.com/

MUI: The React component library you always wanted

들어가며

    - Mui 는 JQwidget 과 같이 유용하게 사용 되는 UI 를 미리 만들어 둔 tool 이다.

    - 원하는 디자인의 버튼이나 이번에 진행할 팝업창, 아이콘 등등 사용하고 싶은 UI 를 따로 개발 하지 않고 편하게 끌어다쓸 수 있다.

---

    

사용법

    - 처음 접속 하면 다음과 같은 화면이 뜨는데 여기서 "Get started" 를 눌러 준다.

    - 그럼 좌측에 사용법 부터 각 UI 들의 상세 코드를 볼 수 있게 카테고리 별로 정리 되어 있다. 

    - 이번에는 Modal 을 추가 해야 하기 때문에 "Component API -> Modal" 을 클릭 하여 들어 간다.

    - 그럼 이렇게 상세한 사용법과 Import 해야 할코드가 뜨는데 설명을 보고 코드를 짜는것 보다는 예시를 보고 짜는게 훨씬 편하기 때문에 "Demos->Modal" 링크를 눌러 예시 코드 페이지로 들어 가 준다.

 

    - 그럼 이렇게 실제로 실행 해 볼수도 있고(빨간 버튼 누르면 Popup이 뜨는걸 확인 가능) 예시 코드도 나오게 된다.

 

    - 전체 코드를 보기 위해 빨갛게 표시한 버튼을 눌러 풀코드로 변환 해 주고 코드 그대로 자신의 코드에 적용 해 주면 된다.

---

실제 코드

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Modal from '@mui/material/Modal';

import { useVideoPageStore } from '@/libs/stores/page/reportPage.store';
import { colors } from '@/theme/colors';
import { styled } from '@mui/material/styles';
//==================상단의 import 부분==================

//.
//.중략
//.

const HeatmapGraphModalBox = styled(Box)(({ theme }) => ({
  position: 'absolute' as 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 500,
  [theme.breakpoints.down('sm')]: {
    width: 300,
  },
})) as typeof Box;
//==================중단의 style 부분==================


export const HeatmapGraph = ({ data, color }: HeatmapGraphType) => {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

//.
//.중략
//.

  return (
    <HeatmapGraphBox>
      <HeatmapSvg width={'200'} />
      <MagnifyButton onClick={handleOpen}>🔍 자세히 보기</MagnifyButton>
      <Modal open={open} onClose={handleClose}>
      //==================하단의 Modal 부분==================
        <HeatmapGraphModalBox>
          <HeatmapSvg width={'100%'} />
        </HeatmapGraphModalBox>
      </Modal>
    </HeatmapGraphBox>
  );
};

export default HeatmapGraph;

    - 실제로 적용 한 모습이다.

---

결과

"자세히 보기" 누르기 전

"자세히 보기" 누른 후