[ETC] Confirm 모달

[SEMINSEMINSEMIN]

Confirm 모달

• [x] 합성 컴포넌트, 스타일(클래스): 589064ca89d824470587043b86ead053e2341252

[github-actions[bot]]

Branch markup/issue-36 created for issue: [ETC] Confirm 모달

[SEMINSEMINSEMIN]

사용 예시

import { useState } from "react";
import ConfirmModal from "../../components/shared/ConfirmModal/ConfirmModal";

export default function Splash() {
    const [isVisible, setIsVisible] = useState(false);

    const onClickHandle = () => {
        setIsVisible(true);
    };

    const onCancleHandle = () => {
        setIsVisible(false);
    };

    const onConfirmHandle = () => {
        alert("로그아웃 되었습니다.");
    };

    const ConfirmBtn = <button type="click" onClick={onConfirmHandle}>로그아웃</button>

    return (
        // <div>Splash</div>
        <>
            <button type="submit" onClick={onClickHandle}>모달창 띄우기</button>
            {isVisible && 
            <ConfirmModal 
                confirmMsg={"로그아웃하시겠어요?"}
                onCancle={onCancleHandle}
                buttonRight={ConfirmBtn}
            />}
        </>
    );
}

https://www.notion.so/seminkang/8721013e4fe544cda84163290fa8da7a