[2024.01.27] confirm 창에서 취소 클릭 시 submit 되는 버그

confirm 시, 취소를 눌러도 submit이 되어서 회원가입이 되어버리는 버그가 있습니다. return false도 줘보고, e.preventDefault()가 새로고침, 페이지 이동을 막는 거라....

BaseSyntheticEvent e.preventDefault()가 들어가는 SubmitHandler도 조언을 받아서 사용해보았지만, 제가 잘못 사용을했는지.. 잘 되지 않았습니다.....🥲

// import 한 부분

const SignUpForm: FC<ShowProps> = ({ setShowSignUpForm }) => {
    const {
        register,
        handleSubmit,
        formState: { errors, isValid },
    } = useForm<SignUpType>({
        resolver: zodResolver(SignUpSchema),
        mode: 'all',
        defaultValues: {
            nickname: '',
            userId: '',
            password: '',
            checkPw: '',
        },
    });

    /**
     * @todo ... confirm취소시 submit이 자동으로 되어서 취소 버튼을 눌러도 데이터가 넘어가는 문제
     *
     * @param data e.preventDefault default
     * @returns
     */
    const onSubmitSignUp: SubmitHandler<SignUpType> = async (data) => {
        try {
            await AuthApi.SignUp(data);
            let result = window.confirm('모든 정보는 수정이 불가능합니다. \n 정말 이대로 제출하시겠습니까?');
            if (result) {
                alert('CHAP CHAP의 회원이 되신걸 축하합니다!');
                setShowSignUpForm(false);
            } else {
                return false;
            }
        } catch (error) {
            alert('회원가입이 정상적으로 이뤄지지 못했습니다!');
        }
    };

    return (
        <div className="flex h-full w-full flex-col items-center justify-center rounded-l-3xl">
            <FormHeader />
            <form className="flex w-full flex-col items-center justify-center" onSubmit={handleSubmit(onSubmitSignUp)}>
                {SignUpIn[0].map((el) => {
                    const { id, label, type } = el;
                    // fieldName의 타입을 FormField 타입으로 단언
                    const fieldName = id as SignUpField;
                    /**
                     * register에  함수의 동작에 대한 타입 정보를 제공
                     * 사용하지않으면 명확한 타입 정보를 알 수 없음
                     */
                    return (
                        <ChapInput
                            key={id}
                            id={id}
                            label={label}
                            type={type}
                            register={register}
                            error={errors[fieldName]?.message}
                        />
                    );
                })}

                <ChapButton variant={'peanut'} size={'rounded'} type={'submit'} disabled={!isValid}>
                    회원가입
                </ChapButton>
            </form>
        </div>
    );
};

export default SignUpForm;

저는 이 문제를 정말 해결하고싶습니다!

그러나 안된다면, 어쩔 수 없이 confirm을 쓰지 않고 구현을 해야할 거 같아요.ㅜ 다른 기능들도 구현을 해야하니 일단 이렇게 남겨둡니다!

많은 아이디어와 조언 환영 필요하시다면 라이브쉐어도 좋습니다!

🥹 I wanna resolve this too, Kimi

issue에 댓글 달기 위해 PR에선 응원의 글만 남겨봤습니다.. ㅎㅎ

위 코드에서 onSubmitSignUp 함수에서 사용자가 확인 대화상자에서 "취소"를 클릭하면 함수에서 false를 반환하고 있는데 그것만으로는 폼 제출이 막히지 않아서 생기는 문제인 것 같습니다.

폼 제출을 방지하려면 e.preventDefault() 메서드를 사용해야 하는데 함수 위에 param 값으로 메소드가 적용 돼 있는 걸까요?

e.preventDefault() 메서드는 기본 폼 제출 동작을 방지하며, 사용자의 선택에 따라 조건적으로 호출할 수 있습니다.

만약 e.preventDefault 가 적용돼 있지 않다면 아래처럼 한 번만 해봐주실 수 있나요??

const onSubmitSignUp: SubmitHandler<SignUpType> = async (data, e: FormEvent) => {
    e.preventDefault();   //  👉 기본 폼 제출 방지

    try {
        await AuthApi.SignUp(data);
        let result = window.confirm('확인 메세지');
        if (result) {
            alert('성공 메세지');
            setShowSignUpForm(false);
        } 
    } catch (error) {
        alert('실패 메세지');
    }
};

💌 Thank you for your help, Amy

이렇게 알아봐주셔서 감사합니다!!!

음 제가 잘못하고 있는진 모르겠지만 그렇게해도 계속 다양한 type Errror들이 발생하며 submit은 그대로 되더라구요ㅠㅠ

1

    const onSubmitSignUp: SubmitHandler<SignUpType> = async (data, e : BaseSyntheticEvent) => {
        e.preventDefault();

type error

2

    const onSubmitSignUp: SubmitHandler<SignUpType> = async (data, e : BaseSyntheticEvent | undefined) => {
        e.preventDefault();

type errror

3

그래서 여기에 옵셔널 체이닝을 주면 type에러는 나지않지만, 똑같이 submit이 되어버립니다ㅠ

🥜 Awesoem, Peanut!

await AuthApi.SignUp(data); 부분이 if문 밖에 설정이 되어있던 문제였습니다.. 피낫님 짱,, true일때만 실행이 되어야하는데ㅠ 저렇게 해놓으니.. 당연히.. 실행이 언제나 submit이 될 수 밖에 없었습니다!

    const onSubmitSignUp: SubmitHandler<SignUpType> = async (data, e : BaseSyntheticEvent | undefined) => {
        e?.preventDefault();
        try {
            let result = window.confirm('모든 정보는 수정이 불가능합니다. \n 정말 이대로 제출하시겠습니까?');
            console.log(result)
            if (result) {
                await AuthApi.SignUp(data);
                alert('CHAP CHAP의 회원이 되신걸 축하합니다!');
                setShowSignUpForm(false);
            } else {
                alert('실패하였습니다')
                return false
            }
        } catch (error) {
            alert('회원가입이 정상적으로 이뤄지지 못했습니다!');
        }
    };

mobi-chap-chap / chap-chap