Kakao 로그인 버튼이 안 나오는 문제

Kakao 로그인 버튼을 이용해서 php 파일로 사용자의 로그인 데이터 정보(닉네임, 이메일, 카카오 ID번호)를 보내고싶어서 input 태그의 hidden을 필요한 만큼 생성하고 (여기서는 3개) ajax를 이용해서 form을 전송하는 방식을 사용하려고 했는데, 이놈의 Kakao 로그인 버튼이 안 나와서 지금 전송 못하고 있네요 ㅠㅠ.
참고로 제가 짠 소스 코드를 이것입니다.
(메인 로그인 화면인 login.php)
<!doctype html>

<link rel="apple-touch-icon" href="img/f7-icon-square.png">
<link rel="icon" href="img/f7-icon.png">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="vendor/bootstrap-4.1.3/css/bootstrap.min.css">

<!-- Material design icons CSS -->
<link rel="stylesheet" href="vendor/materializeicon/material-icons.css">

<!-- swiper carousel CSS -->
<link rel="stylesheet" href="vendor/swiper/css/swiper.min.css">

<!-- app CSS -->
<link id="theme" rel="stylesheet" href="css/style.css" type="text/css">

<title>로그인 화면</title>

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

안녕하세요!

            <div class="row mx-0">
                <div class="col">

                    <!-- tabs content start here -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="signin" role="tabpanel">
                            
                            <small> 일반 로그인 : </small>
                            
                            <br>
                            
                            <form name="login_form" action="../login/login_check.php" method="post">

                                <div class="login-input-content">
                                    
                                    <input name="login_name" type="text" class="form-control" placeholder="이름" value=""/>

                                    <br>
                                    
                                    <input name="login_email" type="text" class="form-control" placeholder="이메일" value="" />
                                    
                                </div>
                                
                                <input type="submit" name="login" value="로그인하기" class="btn btn-block gradient border-0 z-3"/>

                            </form>
                            
                            <br>
                            
                            <small> 카카오톡 로그인 : </small>
                            
                            <br>
                            
                            <form name="kakao_login" enctype="multipart/form-data" action="../login/login_process.php" method="post">
                                
                                <input type="hidden" name="data[user_id]" id="data_user_id" value="" />
                                <input type="hidden" name="data[user_nick]" id="data_user_nick" value="" />
                                <input type="hidden" name="data[user_email]" id="data_user_email" value="" />
                            
                                <a id="kakao-login-btn" class="col-12"></a>
                                
                            </form>

                            <a href="../signup.html"><button type="button" class="btn btn-block gradient border-0 z-3">회원가입하기</button></a>
                            
                        </div>
                    </div>
                    <!-- tabs content end here -->
                </div>
            </div>

            <br>

        </div>

    </div>
    <!-- page main ends -->

</div>




<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="vendor/bootstrap-4.1.3/js/bootstrap.min.js"></script>

<!-- Cookie jquery file -->
<script src="vendor/cookie/jquery.cookie.js"></script>

<!-- sparklines chart jquery file -->
<script src="vendor/sparklines/jquery.sparkline.min.js"></script>

<!-- Circular progress gauge jquery file -->
<script src="vendor/circle-progress/circle-progress.min.js"></script>

<!-- Swiper carousel jquery file -->
<script src="vendor/swiper/js/swiper.min.js"></script>

<!-- Application main common jquery file -->
<script src="js/main.js"></script>

<!-- page specific script -->
<script>
    $(window).on('load', function() {
        /* sparklines */
        $(".dynamicsparkline").sparkline([5, 6, 7, 2, 0, 4, 2, 5, 6, 7, 2, 0, 4, 2, 4], {
            type: 'bar',
            height: '25',
            barSpacing: 2,
            barColor: '#a9d7fe',
            negBarColor: '#ef4055',
            zeroColor: '#ffffff'
        });

        /* gauge chart circular progress */
        $('.progress_profile1').circleProgress({
            fill: '#169cf1',
            lineCap: 'butt'
        });
        $('.progress_profile2').circleProgress({
            fill: '#f4465e',
            lineCap: 'butt'
        });
        $('.progress_profile4').circleProgress({
            fill: '#ffc000',
            lineCap: 'butt'
        });
        $('.progress_profile3').circleProgress({
            fill: '#00c473',
            lineCap: 'butt'
        });

        /*Swiper carousel */
        var mySwiper = new Swiper('.swiper-container', {
            slidesPerView: 2,
            spaceBetween: 0,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });
    });
    
    Kakao.init('06bfaf32feec07197db27cfecb097bce');
    
    Kakao.Auth.createLoginButton({
        container: '#kakao-login-btn',
        success: function(authObj) {
            
            Kakao.API.request({
                
                url: '/v1/user/me',
                success: function(res) {
                    
                    alert(JSON.stringify(res));
                    alert(JSON.stringify(authObj));
                    
                    console.log(res.id);
                    console.log(res.kaccount_email);
                    console.log(res.properties['nickname']);
                    console.log(authObj.access_token);
                    
                    var form = $('#kakao_login')[0];
                    
                    $('#data_user_id').val(res.id);
                    $('#data_user_nick').val(res.properties['nickname']);
                    $('#data_user_email').val(res.kaccount_email);
                    
                    $.ajax({
                        type: "POST",
                        enctype: 'multipart/form-data',
                        url: "../login_process.php",
                        data: res,
                        success: function(res) {
                            alert(res.id+res.kaccount_email+res.properties['nickname']"이 전송 성공되었습니다.");
                        }, error: function(){
                            alert("전송 실패하였습니다.")
                        }
                    });
                    
                }
                
            })
            
        },
        fail: function(err) {
            alert(JSON.stringify(err));
        }
    });
    
</script>
(전송하고픈 php 파일 login_process.php) <?php include ("../database/connect.php"); //여기서 가져온다.
//저장
$kakao_id = $_POST["data[user_id]"];
$kakao_nick = $_POST["data[user_nick]"];
$kakao_email = $_POST["data[user_email]"];

//카카오 로그인을 통해 사용자 정보를 전송 받았을 경우에는…
if($kakao_id != “” || $kakao_nick != “” || $kakao_email != “”){

$sql = "INSERT INTO user_table (name, email, nick, kakao_id, intro) VALUES('', '".$kakao_email."', '".$kakao_nick."', '".$kakao_id."', '')";
$result = mysqli_query($conn, $sql);
mysqli_close($conn);
header ('location: ../login_check.php?email='.$kakao_email);

}
//그렇지 않고 일반 회원으로 회원 가입을 하는 경우에는
else {

//저장
$standard_nick = $_POST["user_nick"];
$standard_email = $_POST["user_email"];

$sql = "INSERT INTO user_table (name, email, nick, kakao_id, intro) VALUES('', '".$standard_email."', '".$standard_nick."', '', '')";
$result = mysqli_query($conn, $sql);
mysqli_close($conn);
header ('location: ../index.php');

}

?>

글 작성 이후 사용자 정보 요청이 성공한 것이 확인됩니다.
현재도 동일한 문제가 발생하고 있을까요?

아니요. 지금은 잘 되고 있어요.
천천히 살펴보니 Javascript가 제한적이긴 하더라구요 ㅎㅎ
그래서 REST API로 다시 시도해봤더니 잘 됬네요.
그래도 일단 답변해주셔서 정말 고맙습니다.