008 Ajax

• 비동기적인 방식 : 여러가지 일들을 분업화하여 처리하는 것을 말합니다.

• 동기적인 방식 : 서버와 연결하지 않고 웹 사이트를 만들게 되는 경우 말합니다.

...

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <!--<script src="js/jquery-3.5.1.js"></script>-->
    <script src="js/main.js"></script>
</body>
</html>

• GET : 데이터를 url 경로를 뒤에 붙여서 보낸다

• POST : 데이터를 보낼 때, url 경로 생략하고 보낸다

...

function deligationFunc(e){
    let elem = e.target; // 클릭한 요소 가져오기
    // console.log(e.target);
    // console.log(elem);

    // 잘못 클릭한 경우
    while(!elem.getAttribute('data-name')){ 
        // elem의 부모를 찾음
        elem = elem.parentNode;
        if(elem.nodeName ==='BODY'){ // body까지 이벤트가 없는 경우
            elem=null;
            return;
        } // data-name을 가진 속성을 찾을때까지 부모에게 접근을 반복
    }

    if(elem.matches('[data-name="heartbeat"]')){
        // console.log("하트!");
        $.ajax({
            Method:'POST', // 에러날 경우 GET으로 변경하기
            url:'data/like.json',
            data: 37, 
            dataType:'json', // 어떻게 들어올지 설정
            success: function(response){ // 통신에 성공한 데이터가 response로 들어온다
                let likeCount =document.querySelector('#like-count-37');
                likeCount.innerHTML = '좋아요' + response.like_count +'개';
            }
        })
    }else if(elem.matches('[data-name="bookmark"]')){
        console.log("북마크!");
    }else if(elem.matches('[data-name="share"]')){
        console.log("공유!");
    }if(elem.matches('[data-name="more"]')){
        console.log("더보기!");
    }
	
    elem.classList.toggle('on'); // on 클래스 주기
}

...

{
    "like_count": 1,
    "message": "좋아요"
}

...	

                        <div class="likes m_text">
                            좋아요
                            <span id="like-count-37">2,346</span>
                            개
                        </div>

...

...	

                        <div class="likes m_text">
                            <span id="like-count-37">2,346</span>
                        </div>

...

...

function deligationFunc(e){
    let elem = e.target; // 클릭한 요소 가져오기
    // console.log(e.target);
    // console.log(elem);

    // 잘못 클릭한 경우
    while(!elem.getAttribute('data-name')){ 
        // elem의 부모를 찾음
        elem = elem.parentNode;
        if(elem.nodeName ==='BODY'){ // body까지 이벤트가 없는 경우
            elem=null;
            return;
        } // data-name을 가진 속성을 찾을때까지 부모에게 접근을 반복
    }

    if(elem.matches('[data-name="heartbeat"]')){
        // console.log("하트!");
        $.ajax({
            Method:'POST', // 에러날 경우 GET으로 변경하기
            url:'data/like.json',
            data: 37, 
            dataType:'json', // 어떻게 들어올지 설정
            success: function(response){ // 통신에 성공한 데이터가 response로 들어온다
                let likeCount =document.querySelector('#like-count-37');
                likeCount.innerHTML = '좋아요' + response.like_count +'개';
            },
            error: function(request,status,error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="bookmark"]')){
        console.log("북마크!");
    }else if(elem.matches('[data-name="share"]')){
        console.log("공유!");
    }if(elem.matches('[data-name="more"]')){
        console.log("더보기!");
    }
	
    elem.classList.toggle('on'); // on 클래스 주기
}

...

...

                        <div class="bottom_icons">
                            <div class="left_icons">
                                <div class="heart_btn">
                                    <div class="sprite_heart_icon_outline" name="37" data-name="heartbeat"></div>
                                </div>
                                <div class="sprite_bubble_icon"></div>
                                <div class="sprite_share_icon" data-name="share"></div>
                            </div>

                            <div class="right_icon">
                                <div class="sprite_bookmark_outline" name ="37" data-name="bookmark"></div>
                            </div>
                        </div>

                        <div class="likes m_text">
                            <span id="like-count-37">2,346</span>
                            <span id="bookmark-count-37"></span>
                        </div>

...

...

function deligationFunc(e){
    let elem = e.target; // 클릭한 요소 가져오기
    // console.log(e.target);
    // console.log(elem);

    // 잘못 클릭한 경우
    while(!elem.getAttribute('data-name')){ 
        // elem의 부모를 찾음
        elem = elem.parentNode;
        if(elem.nodeName ==='BODY'){ // body까지 이벤트가 없는 경우
            elem=null;
            return;
        } // data-name을 가진 속성을 찾을때까지 부모에게 접근을 반복
    }

    if(elem.matches('[data-name="heartbeat"]')){
        // console.log("하트!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', // 에러날 경우 GET으로 변경하기
            url:'data/like.json',
            data: {pk}, 
            dataType:'json', // 어떻게 들어올지 설정
            success: function(response){ // 통신에 성공한 데이터가 response로 들어온다
                let likeCount =document.querySelector('#like-count-37');
                likeCount.innerHTML = '좋아요' + response.like_count +'개';
            },
            error: function(request,status,error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="bookmark"]')){ // 북마크 클릭 시 실행
        // console.log("북마크!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', /* 에러날 경우 GET으로 변경하기 */
            url: 'data/bookmark.json',
            data: {pk},
            dataType: 'json',
            success: function(response){
                let bookmarkCount=document.querySelector('#bookmark-count-37');
                bookmarkCount.innerHTML = '북마크' + response.bookmark_count +'개';
            },
            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 클래스 주기
}

...

{
    "bookmark_count": 1,
    "message": "북마크"
}

...

                        <div class="comment_field" id="add-comment-post37">
                            <input type="text" placeholder="댓글달기...">
                            <div class="upload_btn m_text" data-name="comment">게시</div>
                        </div>

...

...

.contents .comment_field .upload_btn{
    color: #3897f0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* y축으로 중앙 정렬 */
    cursor: pointer;
    /* pointer-events: none; 처음에는 클릭이 되지 않도록 한다 */
    opacity: 0.6;
}

...

...

function deligationFunc(e){
    let elem = e.target; // 클릭한 요소 가져오기
    // console.log(e.target);
    // console.log(elem);

    // 잘못 클릭한 경우
    while(!elem.getAttribute('data-name')){ 
        // elem의 부모를 찾음
        elem = elem.parentNode;
        if(elem.nodeName ==='BODY'){ // body까지 이벤트가 없는 경우
            elem=null;
            return;
        } // data-name을 가진 속성을 찾을때까지 부모에게 접근을 반복
    }

    if(elem.matches('[data-name="heartbeat"]')){
        // console.log("하트!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', // 에러날 경우 GET으로 변경하기
            url:'data/like.json',
            data: {pk}, 
            dataType:'json', // 어떻게 들어올지 설정
            success: function(response){ // 통신에 성공한 데이터가 response로 들어온다
                let likeCount =document.querySelector('#like-count-37');
                likeCount.innerHTML = '좋아요' + response.like_count +'개';
            },
            error: function(request,status,error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="bookmark"]')){ // 북마크 클릭 시 실행
        // console.log("북마크!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', /* 에러날 경우 GET으로 변경하기 */
            url: 'data/bookmark.json',
            data: {pk},
            dataType: 'json',
            success: function(response){
                let bookmarkCount=document.querySelector('#bookmark-count-37');
                bookmarkCount.innerHTML = '북마크' + response.bookmark_count +'개';
            },
            error:function(request, status, error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="comment"]')){
        let content = document.querySelector('#add-comment-post37 > input[type=text]').value;

        console.log(content);
		
        if(content.length >140){
            alert('댓글은 최대 140자 입력 가능합니다. 현재 글자수 : ' +  content.length);
            return;
        }
		
        $.ajax({
            Method:'POST',
            url:'./comment.html', // ./는 현재 폴더를 뜻함
            data: { 
                'pk': 37,
                'content': content
            },
            dataType:'html',
            success: function(data){
                document.querySelector('#comment-list-ajax-post37').insertAdjacentHTML('afterbegin',data);
            },
            error:function(request,status,error){
                alert('문제가 발생했습니다.');
            }
        })
    }else if(elem.matches('[data-name="comment_delete"]')){
        // console.log("더보기!");
    }else if(elem.matches('[data-name="share"]')){
        console.log("공유!");
    }if(elem.matches('[data-name="more"]')){
        console.log("더보기!");
    }
	
    elem.classList.toggle('on'); // on 클래스 주기
}

...

element.insertAdjacentHTML(position, text);

• position : 어느 부분에다 추가할지

• text : 추가할 데이터

<div class="comment-detail">
    <div class="nick_name m_text">kindtiger</div>
    <div>강아지가 너무 귀여워~!~! <button data-name="comment_delete">삭제</button></div>
</div>

...

                        <div class="comment_container">
                            <div class="comment" id="comment-list-ajax-post37">
                                <div class="nick_name m_text">dongdong2</div>
                                <div>강아지가 너무 귀여워요~!</div>
                            </div>
                            <div class="small_heart">
                                <div class="sprite_small_heart_icon_outline"></div>
                            </div>
                        </div>

...

...

                        <div class="comment_container">
                            <div class="comment" id="comment-list-ajax-post37">
                                <div class="comment-detail">
                                    <div class="nick_name m_text">dongdong2</div>
                                    <div>강아지가 너무 귀여워요~!</div>
                                </div>
                            </div>
                            <div class="small_heart">
                                <div class="sprite_small_heart_icon_outline"></div>
                            </div>
                        </div>

...

...

.contents .comment_container{
    display:flex; /* 가로배치 */
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
}

.contents .comment_container .comment{
    display:flex; /* 가로배치 */
    flex-direction: column;
    font-size: 14px;
}

.contents .comment_container .comment-detail{
    display: flex; /* 가로배치 */
}

.contents .comment_container .comment .nick_name{
    margin-right: 10px; /* 아이디와 댓글 간의 거리 설정 */
}

...

...

function deligationFunc(e){
    let elem = e.target; // 클릭한 요소 가져오기
    // console.log(e.target);
    // console.log(elem);

    // 잘못 클릭한 경우
    while(!elem.getAttribute('data-name')){ 
        // elem의 부모를 찾음
        elem = elem.parentNode;
        if(elem.nodeName ==='BODY'){ // body까지 이벤트가 없는 경우
            elem=null;
            return;
        } // data-name을 가진 속성을 찾을때까지 부모에게 접근을 반복
    }

    if(elem.matches('[data-name="heartbeat"]')){
        // console.log("하트!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', // 에러날 경우 GET으로 변경하기
            url:'data/like.json',
            data: {pk}, 
            dataType:'json', // 어떻게 들어올지 설정
            success: function(response){ // 통신에 성공한 데이터가 response로 들어온다
                let likeCount =document.querySelector('#like-count-37');
                likeCount.innerHTML = '좋아요' + response.like_count +'개';
            },
            error: function(request,status,error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="bookmark"]')){ // 북마크 클릭 시 실행
        // console.log("북마크!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', /* 에러날 경우 GET으로 변경하기 */
            url: 'data/bookmark.json',
            data: {pk},
            dataType: 'json',
            success: function(response){
                let bookmarkCount=document.querySelector('#bookmark-count-37');
                bookmarkCount.innerHTML = '북마크' + response.bookmark_count +'개';
            },
            error:function(request, status, error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="comment"]')){
        let content = document.querySelector('#add-comment-post37 > input[type=text]').value;

        console.log(content);
		
        if(content.length >140){
            alert('댓글은 최대 140자 입력 가능합니다. 현재 글자수 : ' +  content.length);
            return;
        }
		
        $.ajax({
            Method:'POST',
            url:'./comment.html', // ./는 현재 폴더를 뜻함
            data: { 
                'pk': 37,
                'content': content
            },
            dataType:'html',
            success: function(data){
                document.querySelector('#comment-list-ajax-post37').insertAdjacentHTML('afterbegin',data);
            },
            error:function(request,status,error){
                alert('문제가 발생했습니다.');
            }
        })
        document.querySelector('#add-comment-post37>input[type=text]').value='';
    }else if(elem.matches('[data-name="comment_delete"]')){
        // console.log("더보기!");
    }else if(elem.matches('[data-name="share"]')){
        console.log("공유!");
    }if(elem.matches('[data-name="more"]')){
        console.log("더보기!");
    }
	
    elem.classList.toggle('on'); // on 클래스 주기
}

...

...

function deligationFunc(e){
    let elem = e.target; // 클릭한 요소 가져오기
    // console.log(e.target);
    // console.log(elem);

    // 잘못 클릭한 경우
    while(!elem.getAttribute('data-name')){ 
        // elem의 부모를 찾음
        elem = elem.parentNode;
        if(elem.nodeName ==='BODY'){ // body까지 이벤트가 없는 경우
            elem=null;
            return;
        } // data-name을 가진 속성을 찾을때까지 부모에게 접근을 반복
    }

    if(elem.matches('[data-name="heartbeat"]')){
        // console.log("하트!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', // 에러날 경우 GET으로 변경하기
            url:'data/like.json',
            data: {pk}, 
            dataType:'json', // 어떻게 들어올지 설정
            success: function(response){ // 통신에 성공한 데이터가 response로 들어온다
                let likeCount =document.querySelector('#like-count-37');
                likeCount.innerHTML = '좋아요' + response.like_count +'개';
            },
            error: function(request,status,error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="bookmark"]')){ // 북마크 클릭 시 실행
        // console.log("북마크!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', /* 에러날 경우 GET으로 변경하기 */
            url: 'data/bookmark.json',
            data: {pk},
            dataType: 'json',
            success: function(response){
                let bookmarkCount=document.querySelector('#bookmark-count-37');
                bookmarkCount.innerHTML = '북마크' + response.bookmark_count +'개';
            },
            error:function(request, status, error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="comment"]')){
        let content = document.querySelector('#add-comment-post37 > input[type=text]').value;

        console.log(content);
		
        if(content.length >140){
            alert('댓글은 최대 140자 입력 가능합니다. 현재 글자수 : ' +  content.length);
            return;
        }
		
        $.ajax({
            Method:'POST',
            url:'./comment.html', // ./는 현재 폴더를 뜻함
            data: { 
                'pk': 37,
                'content': content
            },
            dataType:'html',
            success: function(data){
                document.querySelector('#comment-list-ajax-post37').insertAdjacentHTML('afterbegin',data);
            },
            error:function(request,status,error){
                alert('문제가 발생했습니다.');
            }
        })
        document.querySelector('#add-comment-post37>input[type=text]').value='';

    }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="share"]')){
        console.log("공유!");
    }if(elem.matches('[data-name="more"]')){
        console.log("더보기!");
    }
	
    elem.classList.toggle('on'); // on 클래스 주기
}

...

{
    "message": "삭제완료",
    "status": "1"
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <section id="container">
        <header id="header">
            <section class="inner">
					      <h1 class="logo">
						        <a herf="index.html">
                        <div class="sprite_insta_icon"></div>
                        <div class="sprite_write_logo"></div>
						        </a>
					      </h1>

                <div class="search_box">
                    <input type="text" placeholder="검색" id="search-field">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>

                <div class="right_icons">
                    <div class="sprite_camera_icon"></div>
                    <div class="sprite_compass_icon"></div>
                    <div class="sprite_heart_icon_outline"></div>
                    <div class="sprite_user_icon_outline"></div>
                </div>
            </section>
        </header>

        <!--**표시까지 반복-->
        <div class="hidden_menu">
            <div class="scroll_inner">
                <div class="user">
                    <div class="thumb_img"><img src="imgs/thumb.jpeg" alt="프로필사진"></div>
                    <div class="id">kindtigerrr</div>
                </div>
            </div>
        </div>
        <!--**-->

        <section id="main_container">
            <div class="inner">
                <div class="contents_box">
                    <article class="contents">
                      <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"></div>
                        </header>	

                        <div class="img_section">
                            <div class="trans_inner">
                                <div>
                                    <img src="imgs/img_section/img01.jpg" alt="visual01">
                                </div>
                            </div>
                        </div>

                        <div class="bottom_icons">
                            <div class="left_icons">
                                <div class="heart_btn">
                                    <div class="sprite_heart_icon_outline" name="39" data-name="heartbeat"></div>
                                </div>
                                <div class="sprite_bubble_icon"></div>
                                <div class="sprite_share_icon" data-name="share"></div>
                            </div>
                            <div class="right_icon">
                                <div class="sprite_bookmark_outline" data-name="bookmark"></div>
                            </div>
                        </div>

                        <div class="likes m_text">
                            <span id="like-count-37">2,346</span>
                            <span id="bookmark-count-37"></span>
                        </div>

                        <div class="comment_container">
                            <div class="comment" id="comment-list-ajax-post37">
                                <div class="comment-detail">
                                    <div class="nick_name m_text">dongdong2</div>
                                    <div>강아지가 너무 귀여워요~!</div>
                                </div>
                            </div>
                            <div class="small_heart">
                                <div class="sprite_small_heart_icon_outline"></div>
                            </div>
                        </div>

                        <div class="timer">1시간 전</div>

                        <div class="comment_field" id="add-comment-post37">
                            <input type="text" placeholder="댓글달기...">
                            <div class="upload_btn m_text" data-name="comment">게시</div>
                        </div>

                    </article>
                </div>

                <div class="side_box">
                    <div class="user_profile">
                        <div class="profile_thumb">
                            <img src="imgs/thumb.jpeg" alt="프로필사진">
                        </div>
                        <div class="detail">
                            <div class="id m_text">KindTiger</div>
                            <div class="ko_name">심선범</div>
                        </div>
                    </div>

                    <article class="story">
                        <header class="story_header">
                            <div>스토리</div>
                            <div class="more">모두 보기</div>
                        </header>

                        <div class="scroll_inner">
                            <div class="thumb_user">
                                <!--**표시까지 반복-->
                                <div class="profile_thumb">
                                    <img src="imgs/thumb02.jpg" alt="프로필사진">
                                </div>

                                <div class="detail">
                                    <div class="id">kind_tigerrrr</div>
                                    <div class="time">1시간 전</div>
                                </div>
                                <!--**-->
                            </div>
                        </div>
                    </article>

                    <article class="recommend">
                        <header class="reco_header">
                            <div>회원님을 위한 추천</div>
                            <div class="more">모두 보기</div>
                        </header>
                    </article>
                </div>
            </div>
        </section>	
    </section>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <!--<script src="js/jquery-3.5.1.js"></script>-->
    <script src="js/main.js"></script>
</body>
</html>

.sprite_insta_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -53px -235px;
    width: 22px;
    height: 22px;
}

.sprite_write_logo{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -94px -72px;
    width: 103px;
    height: 29px;
}

.sprite_compass_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -130px -286px;
    width: 23px;
    height: 23px;
}

.sprite_user_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -272px -182px;
    width: 22px;
    height: 24px;
}

.sprite_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -52px -261px;
    width: 24px;
    height: 22px;
}

.sprite_small_search_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -337px -246px;
    width: 10px;
    height: 10px;
}

.sprite_more_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -301px -218px;
    width: 15px;
    height: 3px;
}

.sprite_bubble_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -239px -202px;
    width: 24px;
    height: 24px;
}

.sprite_share_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -324px -52px;
    width: 21px;
    height: 24px;
}

.sprite_bookmark_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -237px -286px;
    width: 19px;
    height: 24px;
}

.sprite_bookmark_outline.on {
    background: url('../imgs/background01.png') no-repeat -159px -286px;
    width: 19px;
    height: 24px;
}

.sprite_bookmark_outline.on{
    background: url('../imgs/background01.png') no-repeat -159px -286px;
    width: 19px;
    height: 24px;
}

.sprite_small_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -323px -274px;
    width: 12px;
    height: 11px;
}

.sprite_camera_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -271px -104px;
    width: 24px;
    height: 22px;
}

.sprite_insta_big_logo{
    display: inline-block;
    background: url('../imgs/background02.png') no-repeat -98px -150px;
    width: 175px;
    height: 51px;
}

.sprite_plus_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -187px -202px;
    width: 23px;
    height: 23px;
}

body{
    background: #fafafa;
}

#header{
    width: 100%; /* 공중에 뜨기 위함 */
    position: absolute; /* 가장 위에 올라가 있어야 하기 위함 */
    z-index: 999; /* absolute의 경우 최소 x축에서 1개 y축에서 1개의 값을 주어야 함 */
    left: 0; top: 0;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#header.on{
    position: fixed; /* 상단에 고정되서 같이 움직임 */
}

#header .inner{ /* inner 안에 컨텐츠를 넣으면 안에 값이 들어옴 */
    width: 975px;
    height: 77px;
    margin: 0 auto; /* 가운데 정렬 */
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 정렬 */
    transition: all 1s; /* 자연스러운 효과 */
}

#header.on .inner{
    height: 52px;
}  

#header .inner .logo > a{
    color: transparent; /* 배경색을 투명하게 만듬 */
}

#header .inner .logo div{
    vertical-align: middle;
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#header .inner .logo .sprite_insta_icon:after{
    content: ''; /* 공백을 받아옴 */
    width: 1px;
    height: 28px;
    background: #000;
    position: absolute; /* 부모를 기준으로 위치를 잡음 */
    right: -15px;
    top: -4px;
    transition: all .5s;
}

#header .search_box{
    position: relative; /* 기준점을 잡고 가로 배치 */
}

#search-field{
    width: 185px;
    height: 28px;
    background: #fafafa;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    padding: 3px 30px; /* 위아래 양쪽 */
    color: #999;
    font-weight: 400;
    text-align: left; /* 글자 입력 시 왼쪽부터 보이도록 하기 위함 */
    font-size: 14px;
    outline: none; /* 포커스 했을 때 나타나는 파란선 */
}

#search-field::placeholder{ /* 콜론2개(::) - 속성선택자 */
    font-size: 0; /* 포커스가 되지 않을 때 검색 글자가 보이지 않도록 하기 위함 */
}

#search-field:focus::placeholder{
    font-size: 14px; /* 포커스 되었을 때 검색 글자가 보이도록 한다 */
}

#header .search_box .fake_field{
    position: absolute; /* 검색 창 위에 글자를 보이기 위함 */
  	/* 가운데 배치하는 공식 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 검색을 눌렀을 때에는 포인터 인식이 안 됨 */
}

/* 물결(~) - 근처에 있는 fake_field */
#search-field:focus~.fake_field > span:nth-child(1){ 
    transform: translateX(-105px); /* 돋보기를 왼쪽으로 이동 */
}

#search-field:focus~.fake_field > span:nth-child(2){ 
    display: none; /* 포커스 되었을 때 글자 숨기기 */
}

#header .right_icons{
    width: 132px; /* 부모값 좌우값 고정 */
    display: flex;
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
}

#header .inner .logo div:nth-child(2){
    transform: translateY(2px);
    transition:all .5s;
}

#header.on .inner .logo .sprite_insta_icon:after{
    opacity:0; 
}

#header.on .inner .logo div:nth-child(2){
    opacity:0;
} /* 아이콘 사라지게 하는 부분 */

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#main_container{
    padding-top: 130px;
    display: flex; /* 컨텐츠가 가운데에 위치할 수 있도록 함 */
    justify-content: center; /* x축 가운데 정렬 */
}

#main_container .inner{
    width: 935px;
    /* height: 500px; */
    /* background: red; */
    position: relative; /* 기준점을 inner로 변경하기 위함 */
}

.contents_box{

}

.contents{
    width: 614px;
    /* height: 500px; */
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px; /* 테두리를 둥글게 만듬 */
    margin-bottom: 60px; /* 다른 contents들이 밀려야 되기 때문에 사이에 여백을 준다 */
    background: white;
}

.contents .top{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배 */
    align-items: center;
    padding: 10px 20px; /* 위아래 양쪽 */
}

.contents .top .profile_img{
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 테두리를 둥글게 설정 50% -> 원의 형태 */
    overflow: hidden; /* 자식이 크기가 넘치지 않도록 한다 */
    margin-right: 10px;
}

.contents .top .profile_img img{
    width: 100%; /* 100%가 없을 경우 이미지가 들어가지 않음 */
}

.contents .top .user_container{
    display: flex; /* 가로 배치 */
}

.m_text{
    font-size: 14px;
    font-weight: bold;
}

.s_text{
    font-size: 12px;
}

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

.contents .img_section img{
    width: 100%; /* 부모의 크기 100%를 받는다 */
}

.contents .bottom_icons{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 가운데 정렬 */
    padding: 10px 20px;
}

.contents .bottom_icons .left_icons{
    display: flex; /* 가로 배치 */
}

.contents .bottom_icons .left_icons > div{
    margin-right: 10px;
}

/* .heart_btn.on .sprite_heart_icon_outline */.sprite_heart_icon_outline.on{
	background: url('../imgs/background01.png') no-repeat -26px -261px;
}

.contents .likes{
    padding: 5px 20px;
    color: #262626;
}

.contents .comment_container{
    display: flex; /* 가로 배치 */
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
}

.contents .comment_container .comment{
    display: flex; /* 가로 배치 */
    flex-direction: column;
    font-size: 14px;
}

.contents .comment_container .comment-detail{
    display: flex; /* 가로배치 */
}

.contents .comment_container .comment .nick_name{
    margin-right: 10px; /* 아이디와 댓글 간의 거리 설정 */
}

.contents .comment_container .comment .nick_name{
    margin-right: 10px; /* 아이디와 댓글 간의 거리 설정 */
}

.contents .timer{
    font-size: 10px;
    letter-spacing: 0.2px; /* 자간 조정 */
    color: #999;
    border-bottom: 1px solid rgba(0,0,0,0.09); /* 아래쪽 실선 추가 */
    padding: 10px 20px;
}

.contents .comment_field{
    min-height: 56px;
    padding: 0 20px;
    position: relative; /* 자식들이 absolute로 자리를 잡기 위함 */ 
}

.contents .comment_field input{
    width: 100%;
    height: 56px;
    border: none;
    outline: none;
    background: transparent; /* 투명하게 설정 */
}

.contents .comment_field input:focus ~ .upload_btn{
    pointer-events: initial; /* 포인터 이벤트 초기화 */ 
    opacity: 1;
}

.contents .comment_field .upload_btn{
    color: #3897f0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* y축으로 중앙 정렬 */
    cursor: pointer;
    /* pointer-events: none; 처음에는 클릭이 되지 않도록 한다 */
    opacity: 0.6;
}

.contents .bottom_icons .right_icon > div{
    cursor: pointer; /* 누를 수 있도록 하기 위함 */
}

.side_box{
    width: 293px;
    /* height: 300px; */
    /* background: rgba(255,0,0,0.16); */
    position: absolute; /* 부모를 갖는 기준점을 잡지 않으면 꼭대기까지 올라감 */
    right: 0;
    top: 0;
}

.side_box.on{
    position: fixed; /* 화면에 고정 */
    top: 80px;
}

.side_box .profile_thumb{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden; /* 이미지가 넘치지 않도록 한다 */
    margin-right: 10px;
}

.side_box .profile_thumb img{
    width: 100%;
    height: 100%;
}

.side_box .user_profile{
    display: flex; /* 가로 배치 */
    align-items: center;
    font-size: 14px;
    color: #262626;
}

.side_box .detail .id{
    margin-bottom: 5px;
}

.side_box .detail .ko_name{
    font-size: 12px;
    color: #999;
}

.side_box > article{
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px;
    margin-bottom: 20px;
    width: 291px;
    font-size: 14px;
    color: #262626;
    font-weight: bold;
    background: white;
}

.side_box > article > header{
    display: flex; /* 가로 배치 */
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    color: #999;
}

.side_box > article > header .more{
    font-size: 12px;
    color: #262626;
    cursor: pointer;
}

.thumb_user{
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

.thumb_user .profile_thumb{
    width: 34px; /* 크기가 좀 더 작게 만듬 */
    height: 34px;
}

.thumb_user .time{
    font-size: 10px; 
    letter-spacing: 0.2px;
    color: #999;
}

.side_box .scroll_inner{
    height: 182px;
    overflow-x: hidden; /* x축_자식이 부모 넘지 못하게 한다 */
    overflow-y: auto; /* 자동으로 스크롤을 보여주거나 숨김 */
    /* overflow: hidden auto; x축, y축 한번에 설정 */
}

.hidden_menu{
    display: none;
    width: 600px;
    /* background: red; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* x축 가운데 정렬 */
    top: 100px;
    overflow: hidden; /* 자식들이 넘치지 않도록 한다 */
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px;
}

.hidden_menu .scroll_inner{
    height: 100px; /* 높이값을 자식에게 준다 */
    width: auto;
    overflow-x: auto; /* 항목이 많아질 경우 알아서 스크롤이 생성 */
    overflow-y: hidden;
    display: flex; /* 가로배치 */
    align-items: center;
    padding: 0 10px;
}

.hidden_menu .scroll_inner .user{
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column; /* 가로 중앙 정렬을 세로 중앙 정렬로 변경 */
    align-items: center;
    margin-right: 15px;
    justify-content: space-between; /* 이미지는 위로 아이디는 아래로 설정 */
}

.hidden_menu .scroll_inner .user .id{
    font-size: 12px;
    color: #262626;
}

.hidden_menu .thumb_img{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
}

.hidden_menu .thumb_img img{
    width: 100%;
    height: 100%;
}

@media screen and (max-width:1000px){
    #header .inner{
        width: 97.5%;
    }

    #main_container{
        padding-top: 220px;
    }

    #main_container .inner{
        width: 93.5%;
    }

    .contents_box{
        display: flex;
        flex-direction: column; /* 세로 배치 받도록 한다 */
        align-items: center; /* 왼쪽으로 치우쳐 지는 걸 방지 */
    }

    .side_box{ /* 사이드 박스 숨기기 */
        display: none;
    }

    .hidden_menu{
        display: block;
    }
}

@media screen and (max-width:650px){
    #header .search_box{
        display: none;
    }

    .hidden_menu{
        width: 95%;
    }
}

/* const heart = document.querySelector( '.heart_btn'); // 하트 요소 부분을 선택해서 가져옴 */
const header = document.querySelector('#header');
const sidebox = document.querySelector( '.side_box'); 
// SelectorAll을 활용해 모든 요소를 가져옴
const variableWidth = document.querySelectorAll(".contents_box .contents");
const deligation = document.querySelector(".contents_box");

/* heart.addEventListener('click', function(){
    console.log('hit');
    heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
}); */

function deligationFunc(e){
    let elem = e.target; // 클릭한 요소 가져오기
    // console.log(e.target);
    // console.log(elem);

    // 잘못 클릭한 경우
    while(!elem.getAttribute('data-name')){ 
        // elem의 부모를 찾음
        elem = elem.parentNode;
        if(elem.nodeName ==='BODY'){ // body까지 이벤트가 없는 경우
            elem=null;
            return;
        } // data-name을 가진 속성을 찾을때까지 부모에게 접근을 반복
    }

    if(elem.matches('[data-name="heartbeat"]')){
        // console.log("하트!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', // 에러날 경우 GET으로 변경하기
            url:'data/like.json',
            data: {pk}, 
            dataType:'json', // 어떻게 들어올지 설정
            success: function(response){ // 통신에 성공한 데이터가 response로 들어온다
                let likeCount =document.querySelector('#like-count-37');
                likeCount.innerHTML = '좋아요' + response.like_count +'개';
            },
            error: function(request,status,error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="bookmark"]')){ // 북마크 클릭 시 실행
        // console.log("북마크!");
        let pk=elem.getAttribute('name'); // pk값을 받아온다
        $.ajax({
            Method:'POST', /* 에러날 경우 GET으로 변경하기 */
            url: 'data/bookmark.json',
            data: {pk},
            dataType: 'json',
            success: function(response){
                let bookmarkCount=document.querySelector('#bookmark-count-37');
                bookmarkCount.innerHTML = '북마크' + response.bookmark_count +'개';
            },
            error:function(request, status, error){
                alert('로그인이 필요합니다.');
                window.location.replace('https://www.naver.com'); // 임시 에러 웹 페이지
            }
        })
    }else if(elem.matches('[data-name="comment"]')){
        let content = document.querySelector('#add-comment-post37 > input[type=text]').value;

        console.log(content);
		
        if(content.length >140){
            alert('댓글은 최대 140자 입력 가능합니다. 현재 글자수 : ' +  content.length);
            return;
        }
		
        $.ajax({
            Method:'POST',
            url:'./comment.html', // ./는 현재 폴더를 뜻함
            data: { 
                'pk': 37,
                'content': content
            },
            dataType:'html',
            success: function(data){
                document.querySelector('#comment-list-ajax-post37').insertAdjacentHTML('afterbegin',data);
            },
            error:function(request,status,error){
                alert('문제가 발생했습니다.');
            }
        })
        document.querySelector('#add-comment-post37>input[type=text]').value='';
    }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="share"]')){
        console.log("공유!");
    }if(elem.matches('[data-name="more"]')){
        console.log("더보기!");
    }
	
    elem.classList.toggle('on'); // on 클래스 주기
}

function resizeFunc(){
    // console.log('resize!!');
    if(pageYOffset >= 10){ 
        let calcWidth = (window.innerWidth *0.5) +167; // 웹 페이지 기반으로 위치 재조정
        // console.log(window.innerWidth);
        sidebox.style.left = calcWidth +'px';
    }

    if(matchMedia('screen and (max-width : 800px)').matches){
        // 여러개의 컨텐츠 박스가 있으므로 배열 활용	
        for(let i=0; i<variableWidth.length; i++){
            variableWidth[i].style.width = window.innerWidth -20 +'px'; 
        }
    }else{
        for(let i=0; i<variableWidth.length; i++){		
            if(window.innerWidth >600) // 디폴트 값이 614 이므로 614 이상 커지지 않게 하기 위함
                variableWidth[i].removeAttribute('style');
        }
    }
}

function scrollFunc(){
    // console.log(pageYOffset);
    if(pageYOffset >= 10){  // 드래그할 경우 
        header.classList.add('on');
        if(sidebox){
            sidebox.classList.add('on');
        }resizeFunc();
    }else{
        header.classList.remove('on');
        if(sidebox){
            sidebox.classList.remove('on');
            sidebox.removeAttribute('style');
        }
    }
}

setTimeout(function (){
    scrollTo(0,0);
},100); // 새로고침하면 화면이 젤 위로 가도록 한다

if(deligation){
    deligation.addEventListener('click',deligationFunc);
}

window.addEventListener( 'resize', resizeFunc);
window.addEventListener('scroll', scrollFunc); // 스크롤 이벤트 발생 시 scrollFunc 실행