자바스크립트 모달창만들기

1. 모달창 작성 

import styled from "styled-components";
import { Button } from "components";
import { myTheme } from "style";
const { fonts, colors } = myTheme;

function POPUP(props) {
//프롭스로 set hook등을 받아와야함 매우중요 
  const { open, close, title, content } = props;
  return (
// 아래에 open?을 물어보는 삼항 연산자로 인해 modal창이 열림 매우중요 ! 
    <Wrapper className={open ? "openModal" : ""}>
      <Container>
        <Header>
          {title}
          <CloseButton onClick={close}>x</CloseButton>
        </Header>
        {content}{" "}
      </Container>
    </Wrapper>
  );
}

export default POPUP;

//위치 고정과 배경이 검정색이 됨 그리고 z-index가 컴포넌트 맨위로 올려줌 매우 중요 
const Wrapper = styled.div`
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  background-color: rgba(0, 0, 0, 0.6);

  &.openModal {
    display: flex;
    align-items: center;
  }
`;

const Container = styled.div`
  width: 90%;
  max-width: 450px;
  margin: 0 auto;
  border-radius: 0.3rem;
  background-color: ${colors.bg};
`;

const Header = styled.div`
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 1rem;
  background-color: ${colors.gray};
  font-weight: 700;
  line-height: 2rem;
`;

const CloseButton = styled.button`
  border: none;
  font-size: large;
  cursor: pointer;
`;

2. 모달창 부모컴포넌트에서 적용

import React, { useState } from "react";

//-----import 내부 소스
import POPUP from "./ModalTest";  /// 모달창 기본 컴포넌트 
import DbChkPop from "./ChkPopup"; // 모달창 내부에 있을 콘텐츠 컴포넌트 

//function

function DoubleCheck() {
  const [modal, setModal] = useState(false);

  const onClosePop = () => {
    setModal(false);
  };
  
....생략 
  return (
    <Wrapper>
//modal값이 true가 되면 열리게끔 하는 코드 매우중요 
      {modal && (
        <POPUP
          title="아이디 중복확인"
          open={modal}
          close={onClosePop}
          content={<DbChkPop close={onClosePop} />}
        />
      )}
      
// 버튼 클릭시 모달 true값이 되면서 팝업 생성 
      
			 <Button
            onClick={() => {
              setModal(true);
              console.log("팝업생성");
            }}
    
    </Wrapper>
  );
}

export default DoubleCheck;

3. 모달컨텐츠 (용도에 따라 변경가능)

import styled from "styled-components";
import { Button } from "components";
import { myTheme } from "style";
const { fonts, colors } = myTheme;
function DbChkPop(props) {
  const { close } = props;
  return (
    <>
      <Main>사용가능한 아이디입니다</Main>
      <Footer>
        <Button bgColor={colors.m1} onClick={close}>
          사용하기
        </Button>
      </Footer>
    </>
  );
}

export default DbChkPop;

const Main = styled.div`
  padding: 16px;
  border-bottom: 1px solid #dee2e6;
  border-top: 1px solid #dee2e6;
`;

const Footer = styled.div`
  padding: 12px 16px;
  text-align: right;
`;