2021년 4월 25일 코드스테이츠(Twittler 목업 modal update) 미해결

2021년 4월 22일 코드스테이츠 DAY-18(자료형, 스코프, 클로저 + twittler 목업 update)

 

오늘은 지난 4월 22일 이후 업로드하지 못했던 twittler 목업에 모달기능을 추가해 보겠다. 

 

모달을 추가하기 전에

 

comment-area에 hover하면 cursor : point;로 변경하였으며,

 

그와 동시에 해당 comment-area를 선택하였음을 알기 쉽도록

 

comment-area의 bakcground가 바뀌게 하였다.

 

모달 구현을 위해 생각을 정리해 보겠다. (pseudo code)

 

• 내가 구현하려는 모달은 정해져있는 문장이나 컨텐츠를 불러오는 것이 아니고, 내가 클릭한 comment-area에 있는 내용을 가져와서 이를 바탕으로 만들어져야한다는 점.
• 그렇게 되려면 내가 클릭을 했을 때 createElement를 통해 div를 만들고
• 이를 어딘가에 appendChild로 넣어서 user의 눈에 나타나게 해야한다.
• 그리고 새롭게 만들어진 div에 class를 붙여줘서 이 class를 통해 CSS를 수정해야한다.

우선 위 까지의 과정을 javascript로 작성해보았다.

 

const mainLeft = document.querySelector('.main-left')
const commentArea = document.querySelector('.comment-area');

commentArea.addEventListener('click', function(){
    const modalWrapper =  document.createElement('div');
    mainLeft.appendChild(modalWrapper);
    modalWrapper.classList.add('modal-active-wrapper')
})

 

그리고 만들어 진것을 확인하기 쉽게 만들어진 div에 못생긴 CSS를 입혔다. 

 

.modal-active-wrapper{
  width: 30vw;
  height: 30vw;
  border: 1px red solid;
}

 

 

일단은 위에서 계획한 부분까지 만들었다.

 

자 여기에 이제 무엇을 더 추가해야할까

 

• 만들어진 div에 내가 클릭한 comment-area의 innerText들이 들어오게 해야한다.(innerText들은 comment-area의 구성과 비슷하게 넣어주자) 
• modal은 보여지는 부분과 가려지는 부분이 있어야한다.
• 가려지는 부분에 대한 CSS와 보여지는 부분을 가운데로 정렬하는 CSS를  .modal-active-wrapper에 추가하자.
• 가려지는 부분이 blur된다면 예쁠까?

이 와중에 문제가 생겼다. 

 

위에 있는 모든 기능을 다 마련하였으나, ul(.comment-area)중 맨 위에 있는 녀석만 눌러야 작동을 하는 것이다. 

그렇다......그래서 코드를 갈아엎었다. 

 

어떻게 해결해야할까?

 

이벤트 위임을 적용시켜서 이 문제를 해결 해보자라는게 나의 아이디어였다.

 

결과는....

 

보시다시피 ul안에 있는 각각의 내용을 잘 가지고 온다. 

 

코드는 아래와 같다.

 

Javascript

const mainLeft = document.querySelector('.main-left');
const commentContainer = document.querySelector('.comment-container');


function clickHandler(e){
    const targetCommentArea = e.target;
    if(targetCommentArea.classList.contains('username') || targetCommentArea.classList.contains('content') || targetCommentArea.classList.contains('below-content')){
        const divElem = document.createElement('div');
        mainLeft.appendChild(divElem);
        divElem.classList.add('modal-container');
        const modalCon = document.querySelector('.modal-container');
        const modalWrapper = modalCon.appendChild(targetCommentArea.parentNode);
        modalWrapper.classList.add('modal-wrapper');
    }
}

commentContainer.addEventListener('click', clickHandler);

CSS

.modal-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(200px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-wrapper{
  background: #55ACEE;
  color: #ffffff;
  font-size: 1.5vw;
  padding: 1rem;
  border-radius: 15px;
  width: 30vw;
  height: 30vw;
}

하지만 여기서 또다른 문제가 발생했으니, 

 

modal에서 나갈 수가 없다라는 것.

 

그리고 못생기게 갑자기 팍 튀어나오는 modal.

 

 

 

modal에다가 animation을 넣어서 자연스럽게 올라오는 효과를 만들었으나, 

 

삭제를하는 방법이 마땅치가 않다. 

 

어떻게 해야할지 계속 고민을 해봐야겠다.

 

너무 찝찝하다.