[Component] 모달(팝업)창 컴포넌트

이 글은 Next.js, MUI, styled-component 환경에서 작성된 코드를 공유합니다.

 

모달1 ( 주변 어둡게 )

"use client";

import styled from "styled-components";
import Backdrop from "@mui/material/Backdrop";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import Button from "@mui/material/Button";
import { useState } from "react";
import { Box } from "@mui/material";

const InfoModal = () => {
  // React 상태: 모달 열림 여부 관리
  const [open, setOpen] = useState(false);

  // 모달 열기 함수
  const handleOpen = () => setOpen(true);

  // 모달 닫기 함수
  const handleClose = () => setOpen(false);

  return (
    <>
      {/* 모달을 열기 위한 버튼 */}
      <Button onClick={handleOpen}>모달 버튼</Button>

      {/* Modal 컴포넌트 */}
      <Modal
        open={open} // 모달의 열림/닫힘 상태 제어
        onClose={handleClose} // 모달 닫기 이벤트 핸들러
        closeAfterTransition // 트랜지션 종료 후 모달 제거
        slots={{ backdrop: Backdrop }} // Material-UI의 Backdrop 컴포넌트 삽입
        slotProps={{
          backdrop: {
            timeout: 300, // Backdrop 애니메이션 지속 시간 (ms)
          },
        }}
      >
        {/* Fade 애니메이션으로 모달 표시 */}
        <Fade in={open} timeout={300}>
          {/* 모달 내부 내용 */}
          <StyledBox>
            <div>... 모달에 들어갈 내용</div>
            <div>... 모달에 들어갈 내용</div>
            <div>... 모달에 들어갈 내용</div>
          </StyledBox>
        </Fade>
      </Modal>
    </>
  );
};

export default InfoModal;

// Styled Component: 모달 박스 스타일 정의
const StyledBox = styled(Box)`
  position: absolute; // 박스를 화면 중앙에 위치시키기 위한 절대 위치 지정
  top: 50%; // 화면 세로 중앙
  left: 50%; // 화면 가로 중앙
  transform: translate(-50%, -50%); // 박스 크기 고려하여 정확히 중앙에 배치
  width: 200px; // 박스의 너비
  background-color: white;
  border: 2px solid #000; // 검은색 테두리
  box-shadow: 24px 24px 24px rgba(0, 0, 0, 0.2); // 그림자 효과
  padding: 16px; // 내부 여백
`;

 

 

모달2 ( 주변 그대로 )

"use client";

import styled from "styled-components";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import Button from "@mui/material/Button";
import { useState } from "react";
import { Box } from "@mui/material";

const InfoModal = () => {
  // React 상태: 모달 열림 여부 관리
  const [open, setOpen] = useState(false);

  // 모달 열기 함수
  const handleOpen = () => setOpen(true);

  // 모달 닫기 함수
  const handleClose = () => setOpen(false);

  return (
    <>
      {/* 모달을 열기 위한 버튼 */}
      <Button onClick={handleOpen}>모달 버튼</Button>

      {/* Modal 컴포넌트 */}
      <Modal
        open={open} // 모달의 열림/닫힘 상태 제어
        onClose={handleClose} // 모달 닫기 이벤트 핸들러
        closeAfterTransition // 트랜지션 종료 후 모달 제거
        slotProps={{
          backdrop: {
            invisible: true,
          },
        }}
      >
        {/* Fade 애니메이션으로 모달 표시 */}
        <Fade in={open} timeout={300}>
          {/* 모달 내부 내용 */}
          <StyledBox>
            <div>... 모달에 들어갈 내용</div>
            <div>... 모달에 들어갈 내용</div>
            <div>... 모달에 들어갈 내용</div>
          </StyledBox>
        </Fade>
      </Modal>
    </>
  );
};

export default InfoModal;

// Styled Component: 모달 박스 스타일 정의
const StyledBox = styled(Box)`
  position: absolute; // 박스를 화면 중앙에 위치시키기 위한 절대 위치 지정
  top: 50%; // 화면 세로 중앙
  left: 50%; // 화면 가로 중앙
  transform: translate(-50%, -50%); // 박스 크기 고려하여 정확히 중앙에 배치
  width: 200px; // 박스의 너비
  background-color: white;
  border: 2px solid #000; // 검은색 테두리
  box-shadow: 24px 24px 24px rgba(0, 0, 0, 0.2); // 그림자 효과
  padding: 16px; // 내부 여백
`;