[css] tailwind dialog 창 사용 예제

 

부모 컴포넌트

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

 

 

자식 컴포넌트 AlertDialog.tsx

import React from 'react';

const AlertDialog = ({ openAlert, onOpenAlert }: any) => {

    return (
        <div className={'fixed inset-0 z-10 bg-gray-700 transition duration-300 ease-in-out' + (openAlert ? ' bg-opacity-50' : ' bg-opacity-0')}>
            <section className={'fixed inset-y-0 z-20 w-full max-w-xs bg-white sm:max-w-md focus:outline-none transition transform duration-300 ease-in-out'
                + (openAlert ? '' : ' -translate-x-full')}>
                <div className='absolute right-0 p-2 transform translate-x-full transition duration-300 ease-in-out transform sm:duration-500'>
                    <button onClick={onOpenAlert} className={'p-2 text-white rounded-md focus:outline-none focus:ring' + (openAlert ? '' : ' hidden')}>
                        <svg className='w-5 h-5' xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </section>
        </div>
    );
};

export default AlertDialog;