이번 시간에는 팔로우 기능과 무한 스크롤 기능을 추가해보도록 하겠습니다.

아직 팔로우 버튼이 만들어지지 않았습니다. 그렇기 때문에 팔로우를 나타내는 toggle_box를 만들고 팔로우와 수정, 삭제를 만들어 보도록 하겠습니다.

파일명 : js/main.js

**...**

    }else if(elem.matches('[data-name="comment_delete"]')){
        $.ajax({
            Method:'POST', /* 에러날 경우 GET으로 변경하기 */
            url:'data/delete.json',
            data: { 
                'pk': 37, /* 'pk':pk */
            },
            dataType:'json',
            success: function(response){
                if(response.status){
                    let comt = document.querySelector('.comment-detail');
                    comt.remove();
                }
            },
            error:function(request, status ,error){
                alert('문제가 발생했습니다..');
                window.location.replace('<https://www.naver.com>'); // 임시 에러 웹 페이지
            }
        })
    }**else if(elem.matches('[data-name="follow"]')){**
        **$.ajax({**
            **Method:'POST',**
            **url:'data/follow.json',**
            **data: {** 
                '**pk': 37,**
            **},**
            **dataType:'json',**
            **success: function(response){**
                **if(response.status){**
                    **document.querySelector('input.follow').value="팔로잉";**
                **}else{**
                    **document.querySelector('input.follow').value="팔로워 ";**
                **}**
            **},**
            **error: function(request, status, error){**
                **alert('문제가 발생했습니다..');**
                **window.location.replace('<https://www.naver.com>'); // 임시 에러 웹 페이지**
            **}**		
        **})**
    }else if(elem.matches('[data-name="share"]')){
        console.log("공유!");
    }if(elem.matches('[data-name="more"]')){
        console.log("더보기!");
    }
	
    elem.classList.toggle('on'); // on 클래스 주기
}

**...**

여기서 input의 값은 팔로잉, 팔로워 갖고있는 이유는 input의 submit이라는 태그를 활용할 것입니다. submit은 버튼인데 값에 따라 글자가 바뀝니다.

파일명 : index.html

**...**

                        <header class="top">
                            <div class="user_container">
                                <div class="profile_img">
                                    <img src="imgs/thumb.jpeg" alt="프로필이미지">
                                </div>
	                              <div class="user_name">
                                    <div class="nick_name m_text">KindTiger</div>
                                    <div class="country s_text">Seoul, South Korea</div>
                                </div>
                            </div>
                            <div class="sprite_more_icon" data-name="more">
                                **<ul class='toggle_box'>**
                                    **<li><input type="submit" class="follow" value="팔로우" data-name="follow"></li>**
                                    **<li>수정</li>**
                                    **<li>삭제</li>** 
                                **</ul>**
                            </div>
                        </header>

**...**

파일명 : css/style.css

**...**

**.contents .sprite_more_icon.on .toggle_box{
    display:block;
}**

**.contents .toggle_box{
    text-align:center;
    position:absolute;
    height:0;
    top:20px;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px;
    display:none;
}

.contents .toggle_box > li{
    padding: 5px 10px;
    background: #fff; 
}**

.contents .img_section{
    ****overflow:hidden; /* 자식이 부모의 크기를 넘지 않도록 한다 */
}

.contents .img_section img{
    ****width: 100%; 
}

**.contents .toggle_box > li input{
    border:none;
    font-size: inherit;
}**

**...**

파일명 : data/follow.json

{
    ****"message": "팔로우",
    ****"status": "0"
**}**