• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

2분 36초와 같은 에러로 고쳤지만...

20.05.20 12:21 작성 조회수 176

1

혹시나해서 복사 붙여넣기 와확인을 여러번 해봤지만 안됩니다ㅠㅠ

course-thumbnail

인스타그램 클론 - full stack 웹 개발

ajax - 댓글달기

강의실 바로가기

답변 3

·

답변을 작성해보세요.

0

이주홍님의 프로필

이주홍

질문자

2020.06.01

.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_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;
}

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

.s_text{
    font-size: 12px;
}

body{
    background: #fafafa;
}

#header{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#header.on{
    position: fixed;
}


#header .inner{
    width: 975px;
    height: 77px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 1s;
}

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





#header .inner .logo > a{
    color: transparent;
}

#header .inner .logo .sprite_insta_icon{
    position: relative;
    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 .inner .logo div{
    vertical-align: middle;
}

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

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

#header.on .inner .logo div:nth-child(2){
    opacity: 0;
}
#header .search_box{

    position: relative;

}

#search-field{
    width: 185px;
    height: 28px;
    background: #fafafa;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    padding:3px 38px;
    color: #999;
    font-weight: 400;
    text-align: left;
    font-size: 14px;
    outline:none;
}

#search-field::placeholder{
    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;
}

#search-field:focus ~ .fake_field > span:nth-child(1){
    transform:translateX(-80px);
}

#search-field:focus ~ .fake_field > span:nth-child(2){
    display: none;
}


#header .right_icons{
    width: 132px;
    display: flex;
    justify-content: space-between;
}

#header .right_icons > div{

}

#main_container{
    padding-top: 130px;
    display: flex;
    justify-content: center;
}

#main_container .inner {
    width: 935px;
    /* height: 500px; */
    /* background: red; */
    position: relative;
}

.contents_box{

}

.contents{
    max-width: 614px;
    /* height: 500px; */
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 5px;
    margin-bottom: 60px;
    background: white;
}

.contents .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.contents .top .profile_img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.contents .top .profile_img img{
    width: 100%;
}

.contents .top .user_container{
    display: flex;
}

.contents .sprite_more_icon{
    position: relative;
}

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

.contents .toggle_box{
    text-align: center;
    position: absolute;
    right: 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 .toggle_box > li input{
    border: none;
    font-size: inherit;

}

.contents .img_section img{
    width: 100%;
}
.contents .bottom_icons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.contents .bottom_icons .left_icons{
    display: flex;
}

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

.contents .bottom_icons .right_icon > div{
    cursor: pointer;
}

.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 .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;
} 

.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%);
    cursor: pointer;
    /* pointer-events: none; */
    opacity: 0.6;
}

.side_box{
    width: 293px;
    /* height: 388; */
    /* background: rgba(255,0,0,0.16); */
    position: absolute;
    right: 0;
    top: 0;
}

.side_box.on{
    position: fixed;
    top: 88px;
}

.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.7px;
    color: #999;
}

.side_box .scroll_inner{
    height: 182px;
    overflow-x: hidden;
    overflow-y: auto;
    /* overflow: hidden auto; */
}

.hidden_menu{
    width: 600px;
    /* background: red; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    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;
    }
}

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

0

이주홍님의 프로필

이주홍

질문자

2020.06.01




const header = document.querySelector('#header');
const sidebox = document.querySelector('.side_box');
const variableWidth = document.querySelectorAll('.contents_box .contents');
const delegation = document.querySelector('.contents_box');




function delegationFunc(e){

    let elem = e.target;

    console.log(elem);

    while(!elem.getAttribute('data-name')){
        elem = elem.parentNode;

        if(elem.nodeName === 'BODY'){
         elem = null;
         return;   
        }
    }

    if(elem.matches('[data-name="heartbeat"]')) {

        console.log('하트!');
        let pk = elem.getAttribute('name');

        $.ajax({
                type:'POST',
                url:'data/like.json',
                data:{pk}, // pk(primary key)프라이머리 키: 넘버링을 찍어냄, 각 유저들이 가지고 있는 고유한 pk값을 이용하기 위함
                dataType: 'json',
                success: function(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');

        $.ajax({

            type: 'POST',
            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; //value=나오는 글자들을 다 벨류값으로 처리함

        console.log(content);    

        if(content.length > 140){
            alert('댓글은 최대 140자 입력 가능합니다. 현재 글자수 : ' + content.length);
            return;
        }

        $.ajax({

            type: 'POST',
            url:'./commetn.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('comment_delete!');

        $.ajax({
            type: 'POST',
            url:'data/delete.json',
            data:{
                'pk':37,
            },
            dataType:'json',
            success:function(response){
                if(response.status){
                    let comt = document.querySelector('.comment-detail');
                    comt.remove();
                }
            },
            error:function(request,status,error){
                    alert("문제가 발생했습니다.");
                }
        });



    }else if(elem.matches('[data-name="follow"]')){

        console.log('팔로우!');

        $.ajax({
            type:'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('공유!');

    }else if(elem.matches('[data-name="more"]')){

        console.log('더보기!');
    }

    elem.classList.toggle('on');
}
function resizeFunc(){

    // console.log('resize!!');
    if(pageYOffset >= 10){

        let colcWidth = (window.innerWidth *0.5)+167;
        // console.log(window.innerWidth *0.5);
        
        sidebox.style.left = colcWidth + '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){
                variableWidth[i].removeAttribute('style');   
            }
        }
    }
}

function scrollFunc(){


    let scrollHeight = pageYOffset + window.innerHeight;
    let documentHeight = document.body.scrollHeight;

    console.log('scrollHeight : ' + scrollHeight);
    console.log('documentHeight : ' + documentHeight);

    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');
        }

    }

    if(scrollHeight >= documentHeight){
        let page = document.querySelector('#page').value;
        document.querySelector('#page').value = parseInt(page) + 1;


        callMorePostAjax(page);

        if( page > 5){
            return;
        }

    }
}

function callMorePostAjax(page){

    if( page > 5){
        return;
    }

    $.ajax({
        type: 'POST',
        url: './post.html',
        data:{
            'page':page,
        },
        dataType:'html',
        success: addMorePostAjax,
        error:function(request,status,error){
            alert("문제가 발생했습니다.");
            window.location.replace('https://www.naver.com');
        }
    })
}

function addMorePostAjax(data){

    delegation.insertAdjacentHTML('beforeend',data);

}




setTimeout(function(){
    scrollTo(0,0)
},100);


if(delegation){
    window.addEventListener('click', delegationFunc);
}

window.addEventListener('resize', resizeFunc);
window.addEventListener('scroll' ,scrollFunc);

0

범쌤 님의 프로필

범쌤

지식공유자

2020.05.28

안녕하세요 이주홍님 kindtiger입니다 :)

본업에 치여 답변이 많이 늦어진점 대단히 죄송합니다 ~~ ㅠㅠ...

해당 파일로는 문제점을 확인하기가 어려워  파일을 공유해주시면 확인하고 답변 드리도록 하겠습니다 :) 

이 글과 비슷한 Q&A