팝업 컴포넌트 4차 (외부 감지 + 버튼에 토글 동작 겹치는 이슈 해결하기)

 

 

팝업 컴포넌트 3차 (버튼 props로 받기)

 

이전 소스 사용

 

+ 팝업이 뜨는 버튼을 토글 동작으로 변경하니 외부 감지했을 때 팝업 닫는 부분과 부딪힘 현상 발견

<div className="btn_pop_wrap" ref={outsideRef}> 💛
    <Button
        text={text}
        onClick={() => setIsOpen(prev => !prev)}
    />
    {isOpen && (
        <div className="pop_wrap">

 

1번 방법 => .pop_wrap에 있던 ref를 .btn_pop_wrap으로 옮기기

 

// 외부 클릭시
const handleClickOutside = (e: MouseEvent) => {
    const target = e.target as HTMLElement;
    if(target.closest(".btn_pop")) return; // 특정 버튼 제외
    if(outsideRef.current && !outsideRef.current.contains(e.target as Node)){
        setIsOpen(false);
    }
}

 

2번 방법 => 외부 클릭시 특정 버튼 제외하는 조건 추가

 

 

2번 방법 재사용성이 더 높을 것 같아 2번으로 전체코드

"use client";

import React, { useEffect, useRef } from "react";
import { Button } from "./Buttons";

interface ButtonProps{
    text: string;
    className?: string;
    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

interface DefaultPopupProps{
    text: string;
    isOpen: boolean;
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
    buttons?: ButtonProps[];
}

const DefaultPopup = ({
    text,
    isOpen,
    setIsOpen,
    buttons
}: DefaultPopupProps) => {

    const outsideRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        // 외부 클릭시
        const handleClickOutside = (e: MouseEvent) => {
            const target = e.target as HTMLElement;
            if(target.closest(".btn_pop")) return; // 특정 버튼 제외
            if(outsideRef.current && !outsideRef.current.contains(e.target as Node)){
                setIsOpen(false);
            }
        }

        // esc 눌렀을 시
        const handleEsc = (e: KeyboardEvent) => {
            console.log(e.key);
            console.log(e.code);
            if(e.key === "Escape"){
                setIsOpen(false);
            }
        }

        document.addEventListener('mousedown', handleClickOutside);
        document.addEventListener('keydown', handleEsc);
        return() => {
            document.removeEventListener('mousedown', handleClickOutside);
            document.removeEventListener('keydown', handleEsc);
        }
    }, [setIsOpen]);

    return (
        <div className="btn_pop_wrap">
            <Button
                text={text}
                onClick={(e) => {
                    setIsOpen(prev => !prev)
                }}
                className="btn_pop"
            />
            {isOpen && (
                <div className="pop_wrap" ref={outsideRef}>
                    <div className="pop_header">
                        <Button
                            text="X"
                            onClick={() => setIsOpen(false)}
                        />
                    </div>
                    <div className="pop_content">
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                    </div>
                    {buttons && buttons.length > 0 && (
                        <div className="pop_footer">
                            {buttons.map((v, index) => (
                                <Button
                                    key={index}
                                    className={v.className}
                                    text={v.text}
                                    onClick={() => v.onClick}
                                />
                            ))}
                        </div>
                    )}
                </div>
            )}
        </div>
    )
}

export { DefaultPopup };