댓글 달기 Part 3

수정기능 추가하기.

 

모달창을 띄워서 수정을 해줄 것이다.

 

기존 값에 변경을 해줘야한다. 

 

왜? 결국엔 수정을 하려면, 삭제와, 투표버튼 처럼, 크롬이 클릭된 곳의 id를 알아야 에러없이 추가할 수 있기 때문.

 

나는 기존에 만든 배열 안에 있는 객체에다가 inputValue값을 추가해서 id를 관리하기로 했다.

 

function showComment(comment){
   //생략
    inputValue.id = newId;  //추가
   
   //생략
    //아이디에 따른 투표수카운트. 배열에 접근해서 수정하는 방식으로 해야함.
    let IdAccordingToVoteCount ={
        "commentId" : newId,
        "voteUpCount" : 0,
        "voteDownCount" : 0,
        "commentValue" : comment   //추가
    }
    
   //생략

}

모달창에 대한 CSS를 만들었다.

.modal{
    
    /* 모달 css 정보는 https://codepen.io/sdthornton/pen/wBZdXq 여기참고하면 됨 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    /* 모달창 크기 100% 만들기 위한 설정 => 스크린에 꽉채운거. */
    position: fixed;  
    top : 0;
    left : 0;
    width: 100%;
    height : 100%;
    display: flex;   
    justify-content: center;    
    align-items: center;   
}
/* 모달창 뜨면서 뒤에 오버레이 배경준거. 모달창하고 같이 끌어옴. */
.modal__overlay{
    background-color: rgba(0,0,0,0.6);
    width: 100%;
    height : 100%;
    position: absolute;
    
}

.modal__content{    
    background-color: white;
    padding: 50px 100px;
    text-align: center;
    position: relative;
    width : 15%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    border-radius: 15px;
      
}

.modal__content #modifyVal{
   margin-bottom: 1em;   
   width: 100%;
   height: 3.3em;  
}



#inBtn{
    display: flex;
    justify-content: center; 
}
#inBtn #ok {    
    all : unset;
    background-color: steelblue;
    color: white;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-right : 10px;
    
}

#inBtn #cancle {    
    all : unset;
    background-color: steelblue;
    color: white;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer; 
   
}

.hidden{
    display: none;
}

그리고 모달창에 대한 생성과 모달창 안에 있는 수정버튼, 취소 버튼에 대한 이벤트 효과를 주었다.

//수정창 모달로 만들기
function modifyComments(event){ 
    
    const mBtn = event.target;

    //모달창 만들기
      const modal = document.createElement('div')
      const modalOverlay = document.createElement('div');
      const modalContent = document.createElement('div');
      const cancleBtn = document.createElement('button');
      const okBtn = document.createElement('button');
      const input = document.createElement('input');
      const span = document.createElement('span');
      modal.className = "modal hidden";
      modalOverlay.className ="modal__overlay";
      modalContent.className ="modal__content";
      okBtn.id = "ok";
      okBtn.innerHTML="수정";
      cancleBtn.id = "cancle";
      cancleBtn.innerHTML = "취소";
      input.id = "modifyVal";
      input.placeholder = "변경할 내용을 입력하세요";
      span.id ="inBtn";

      span.appendChild(okBtn);
      span.appendChild(cancleBtn);
      modalContent.appendChild(input);
      modalContent.appendChild(span);
      modal.appendChild(modalOverlay);
      modal.appendChild(modalContent);
      rootDiv.appendChild(modal);  

      modal.classList.remove("hidden");
      
      cancleBtn.addEventListener("click",function(){
        modal.classList.add("hidden");
      });
      
     
      okBtn.addEventListener("click",function(event){       
        console.dir(mBtn.parentNode.parentNode.children[1]);       

        for(var i=0; i<idOrVoteCountList.length; i++){                  
            if(idOrVoteCountList[i]["commentId"].toString() === mBtn.parentNode.id){                
                idOrVoteCountList[i]["commentValue"] = input.value;  
                //수정버튼누르면 변경.              
                mBtn.parentNode.parentNode.children[1].innerHTML = input.value;
                modal.classList.add("hidden");                 
            }    
        }
      });

}