[TIL 2023.05.18] 팀소개 프로젝트 오류수정

❓발생한 이슈/고민 💡해결과정

서버와 합치는 과정에서 이전과 같은 문제가 발생!😱

동적으로 추가되는 카드라서 형제요소를 찾지 못한 것이 원인이었다.

card.innerHTML = temp_html;

// 컨테이너 생성 및 카드 추가
const container = document.createElement('li');
container.classList.add('card-container');
container.appendChild(card);
list.appendChild(container);

$('.js-click-modal').click(function () {
  const container = $(this).closest('.card-container');
  container.addClass('modal-open');
  container.siblings().fadeOut(300);
});

$('.js-close-modal').click(function () {
  const container = $(this).closest('.card-container');
  container.removeClass('modal-open');
  setTimeout(function () {
    container.siblings().fadeIn(300);
  }, 100);
});

이를 해결하기 위해 클릭시 새로운 변수를 만들어서 카드들을 감싸는 부모요소(container)를 만들고 각각의 카드에 새로운 클래스를 부여하여 자식요소(.card-container)로 만든 뒤,

.appendChild()메소드를 이용해서 카드들이 생성되는 상태로 두고 이후 똑같은 함수를 적용했더니 해결되었다.

 

동작은 잘하지만 글이 길어지면 빽빽한 것이 보기 어지럽다.

기본 텍스트에 볼드값을 줘보자.

css에서 해결하려 하니 왜인지 적용이 안되서 html태그에 스타일 값을 입력해 버렸다.

<li class="MBTI"><span style="font-weight:bold;">MBTI |</span> ${member.mbti}</li></br>

태그가 길어지면서 지저분해지긴 했지만 볼드값이 적용은 된다.

그런데 이렇게 바꿔도 딱히… 가독성이 좋아지거나 하진 않은 것 같다.

디자인 감각을 좀 기르는 편이 좋을듯…