토스트 팝업 컴포넌트

 

 

 

export enum PopupPosition{
    Top = 'top',
    Bottom = 'bottom',
    Left = 'left',
    Right = 'right',
    Center = 'center'
}

interface ToastPopupProps{
    message: string;
    duration: number;
    position: PopupPosition;
    btnText: string;
    isOpen: boolean;
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const ToastPopup = ({
    message = '토스트 팝업입니다.',
    duration = 3000,
    position,
    btnText = 'x',
    isOpen,
    setIsOpen
}: ToastPopupProps) => {
    useEffect(() => {
        if(!isOpen) return;
        if(duration <= 0) return; // duration이 0이면 자동 닫힘 안함

        const timer = setTimeout(() => {
            setIsOpen(false);
        }, duration);

        return () => clearTimeout(timer);
    }, [duration, isOpen]);

    return(
        <>
            <Button
                text={btnText}
                onClick={() => {
                    setIsOpen(true)
                }}
                className="btn_pop"
            />
            {isOpen && (
                <div className={`
                    toast_popup
                    ${position ? position.toLowerCase() : ''}
                `}>
                    <div className="txt">{message}</div>
                    <Button
                        text={'x'}
                        onClick={() => setIsOpen(false)}
                    />
                </div>
            )}
        </>
    )
}

 

 

사용방법

<ToastPopup
    message="3초후 없어집니다."
    position={PopupPosition.Top}
    btnText="토스트 팝업"
    isOpen={isOpen3}
    setIsOpen={setIsOpen3}
    duration={3000}
/>

 

 

css

/* 토스트 팝업 */
.toast_popup{
  z-index:100;
  position:fixed;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  padding:5px 10px 5px 15px;
  border-radius:10px;
  background:#c0d1f3;
}

.toast_popup .btn{
  padding:5px;
  background:#c0d1f3;
}