스파르타 AI-8기 TIL(1/20)-TeamProject

현재 Loging, signup 템플릿에서 오류발생,

<script>
    document.getElementById('signupForm').addEventListener('submit', function(event) {
        event.preventDefault();  // 폼 제출 기본 동작을 막음
        
        const full_name = document.getElementById('fullname').value;
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        const confirmpassword = document.getElementById('confirmPassword').value;

        // 비밀번호 확인
        if (password !== confirmpassword) {
            alert('비밀번호가 일치하지 않습니다.');
            return;
        }

        // 회원가입 API 요청
        fetch('http://127.0.0.1:8000/api/signup/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ full_name, email, password, confirmpassword }),
        })
        .then(response => {
            if (response.ok) {
                return response.json();  // 성공한 응답을 JSON으로 변환
            } else {
                throw new Error('회원가입 요청 실패');
            }
        })
        .then(data => {
            alert('회원가입에 성공했습니다! 환영합니다.');
            window.location.href = 'http://127.0.0.1:8000/api/login';  // 회원가입 후 로그인 페이지로 리디렉션
        })
        .catch(error => {
            console.error('Error:', error);
            alert('회원가입 중 문제가 발생했습니다. 다시 시도해주세요.');
        });
    });
</script>

알고보니 위에 HTML 코드에서 ID와 Form의 이름이 각각 다르다는 것을 확인.

 

full_name, email, password, confirmpassword를 확인 후 문제가 없다는 것을 API를 쏘고 확인 및 정상 작동 완료 확인.