[react] 리액트 tailwind 다이얼로그(모달, 팝업) 구현

tailwind dialog

 

style 라이브러리, tailwind를 적용하여 

모달창 띄우기를 구현합니다. 

 

구현 화면

 

구현 내용

react, hooks 방식
스타일 라이브러리,  tailwind로 스타일 적용
확인 클릭시 다이얼로그 출현
X 버튼, 확인 버튼 클릭시 다이얼로그 화면 사라짐

 

tailwind로 다이얼로그 구현

부모 컴포넌트

import React, { useState, useContext } from "react";
import ModalAlert from "./ModalAlert";

const Parent = () => {
  const [openAlert, setOpenAlert] = useState(false);
  const onModalAlert = () => {
    setOpenAlert(!openAlert);
  }

  return (
    <>
      {openAlert && <ModalAlert onOpenAlert={onModalAlert} />}
       .....
    </>
  );
};

export default Parent;

 

모달 컴포넌트, 자식 컴포넌트

import React from 'react';

const ModalAlert = ({ onOpenAlert }: any) => {
    return (
        <div className="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-70 text-center">
            <div className="bg-white rounded w-10/12 md:w-1/3">
                <div className="border-b px-4 py-2 flex justify-between items-center">
                    <h3 className="font-extrabold">경고</h3>
                    <span onClick={onOpenAlert}>
                        <svg
                            className="w-6 h-6"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth="2"
                                d="M6 18L18 6M6 6l12 12"
                            ></path>
                        </svg>
                    </span>
                </div>
                <div className="text-gray-500 text-sm px-4 py-8">
                    1개 이상의 항목을 선택하시기 바랍니다.
                </div>
                <div className="flex justify-end items-center w-100 border-t p-3 text-gray-500">
                    <button onClick={onOpenAlert} className="bg-gray-600 hover:bg-gray-700 px-3 py-1 rounded text-white">
                        확인
                    </button>
                </div>
            </div>
        </div>
    );
};

export default ModalAlert;

 

결과 화면

 

tailwind 적용 팝업 컴포넌트(다른 예시)

import React from 'react'

const Dialog = ({openDialog}) => {

  return (
    <>
      <div onClick={() => setOpenDialog(false)} className={openDialog ? 'z-10 fixed top-0 left-0 w-full h-full bg-black opacity-70' : ''}></div>
      <div className='min-w-[320px] bg-white rounded-2xl p-4'>...</div>
    </>
  )
}

export default Dialog;