[감성82] 프로젝트 시작 / 게시글 이미지 숨김처리 및 모달창

🎉프로젝트 시작

팀원들과 당근마켓을 클론하는 감성82를 만들어보기로 했다. 디자인 figma는 주어졌고, 내가 맡은 부분은 프로필 페이지다 !

✨게시글 이미지 숨김 처리

프로필 페이지에 들어오면, 프로필 설명과 판매중인 상품, 게시글이 보인다. 아래는 샘플 데이터를 넣은 게시글의 모습이다.

이미지가 여러 장일 때, 하나의 게시글이 너무 길어질 수가 있다. 이를 방지하기 위해서 첫 이미지만 보여주고, 버튼을 클릭 했을 때, 나머지 이미지들도 보여주려한다.

.imagelist_feed > img:nth-child(1) ~ img {
  display: none;
}

// <div class="more_image"></div>

.more_image {
  position: absolute;
  background: url(../images/icon/iccon-img-layers.png);
  width: 20px;
  height: 20px;
  top: 142px;
  right: 6px;
  cursor: pointer;
}

게시글의 두번째 img태그 부터 display: none을 주어 안보이게 처리했고, more_image에 position: absolute 와 background: url() 로 이미지가 숨겨져 있다는 표시를 해두었다.

✨이미지 모달창

이제 숨김 처리 이미지를 눌렀을 때, 모달창을 열고 모든 이미지를 볼 수 있도록 해보자

<div class="modal modal-overlay modal_active">
  <div class="modal-window">
    <div class="close-area">X</div>
    <div class="content"></div>
  </div>
</div>

.modal-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.modal-window {
  background: transparent;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(13.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  height: 282px;
  position: fixed;
  padding: 10px;
  border-radius: 10px;
  top: 50%;
}

modal을 게시글 영역 전체로 지정하고, display: none을 주었고 그 안의 modal-window에 이미지들을 출력할 것이다. modal이 게시글 영역 전체인 이유는 나중에 설명할 닫기 버튼을 위함이다. 이제 이미지 더 보기를 클릭하면 해당 게시글의 숨겨진 이미지를 modal에 띄워보자.

moreImageBtn.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    modal.style.display = "flex";
    const imagesParent = e.target.parentNode;
    const images = imagesParent.querySelectorAll("img");
    images.forEach((img) => {
      const tempImg = document.createElement("img");
      tempImg.src = img.src;
      tempImg.alt = img.alt;
      tempImg.className = img.className;
      modalContent.appendChild(tempImg);
    });
    feedSection.classList.add("modal_active");
    body.classList.add("modal_active");
  });
});

moreImage 버튼을 누를 때 해당 게시글의 모든 이미지를 modalContent 안의 자식으로 넣어주는 방식으로 구현했다. feedSection과 body의 modal_active는 모달이 켜졌을 때, 스크롤을 방지하기 위해 넣어둔 클래스이다. 이번에는 열어 둔 모달을 꺼보자.

closeBtn.addEventListener("click", (e) => {
  modal.style.display = "none";
  modalContent.innerHTML = "";
  feedSection.classList.remove("modal_active");
  body.classList.remove("modal_active");
});

modal.addEventListener("click", (e) => {
  const evTarget = e.target;
  if (evTarget.classList.contains("modal-overlay")) {
    modal.style.display = "none";
    modalContent.innerHTML = "";
    feedSection.classList.remove("modal_active");
    body.classList.remove("modal_active");
  }
});

닫기 버튼 클릭시 modal에 display: none을 주어 사라지게 처리했다. 위에서 modal이 게시글 전체 영역이고 그 안의 modal-window에서 이미지를 보여주게 했는지 여기서 그 이유가 나온다. 바로, 모달 닫기 버튼이 아닌 게시글의 다른 영역을 눌러도 모달이 사라지게 하기 위함이다.

이렇게 이미지 숨김 처리와 모달창 구현이 끝났다 ! (끝난 줄 알았다.)

🐛버그 발생

위 gif파일을 보면서 뭔가 이상함을 짐작하신 분이 있을 것이다. 모달을 끄고 다시 켰을 때, 모달의 scroll이 맨 앞으로 이동하지 않고, 그 자리에 머물러있다. 대체 어떻게 해야할까..?

to be continued...