저는 radix가 싫어유...

example.tsx

// radix 기준 예시

const { chain, resolve } = useDefer();
return (<Dialog>
  <DialogContent onAnimationEnd={resolve}> 
    {/*...이후 Dialog내용*/}
    <Button onClick={() => chain(onSubmit}}>설정</Button>
  </DialogContent>               
)

useDefer.ts

import { useInsertionEffect, useRef } from "react";

type PromiseHandlers = {
    onResolve: () => void;
    onReject?: () => void;
}

export const useDefer = () => {
    const resolveRef = useRef<() => void>(null);
    const rejectRef = useRef<() => void>(null);
    const promiseRef = useRef<Promise<void> | null>(null);
    useInsertionEffect(() => {
        promiseRef.current = new Promise((resolve, reject) => {
            resolveRef.current = () => resolve(undefined);
            rejectRef.current = () => reject(undefined);
        });
        return () => {
            resolveRef.current = null;
            rejectRef.current = null;
            promiseRef.current = null;
        };
    }, []);

    return {
        chain: (promiseHandlers: PromiseHandlers) => {
            promiseRef.current?.then(promiseHandlers.onResolve, promiseHandlers.onReject);
        },
        resolve: () => resolveRef.current?.(),
        reject: () => rejectRef.current?.(),
    };
}