고스트 CMS 다국어 블로그: 6. Tag 페이지 포스트 설명이 보이지 않는 문제 수정

앞선 버전에서 Tag 페이지에도 다국어 필터링을 적용했다. Language selector에서 선택한 언어와 일치하는 포스트 카드만 보여주고, 카드가 부드럽게 나타나도록 opacity transition도 추가했다.

그런데 실제로 사용해보니 포스트 카드의 제목과 이미지는 보이지만 포스트 설명은 투명한 상태로 남는 문제가 있었다.

카드 제목과 이미지는 보이지만 설명은 나타나지 않는다.

0.0.6 · Fix Tag page excerpt fade-in

원인

Tag 페이지에서는 처음에 모든 포스트 카드를 투명하게 만든다.

.post-card-excerpt,
div.post-card {
    opacity: 0;
    transition: opacity 0.5s ease;
}

그다음 선택한 언어와 일치하는 카드만 opacity: 1로 변경한다.

setTimeout(() => {
    card.style.opacity = 1;
}, 10);

문제는 .post-card-excerpt에도 별도로 opacity: 0이 적용되어 있다는 점이다. 부모인 card를 보이게 바꾸더라도 자식인 .post-card-excerpt의 opacity는 여전히 0이다.

즉 카드 전체와 excerpt를 모두 투명하게 만들어 놓고 카드만 다시 보이게 만든 것이 원인이었다.

tag.hbs 수정

카드를 표시할 때 해당 카드 안의 .post-card-excerpt도 함께 찾아 opacity: 1로 변경한다.

setTimeout(() => {
    card.style.opacity = 1;

    const excerpts = card.querySelectorAll('.post-card-excerpt');
    excerpts.forEach(excerpt => {
        excerpt.style.opacity = 1;
    });
}, 10);

• card.style.opacity = 1: 카드 전체를 표시한다.
• excerpt.style.opacity = 1: 카드 안의 포스트 설명을 표시한다.
• 같은 setTimeout 안에서 처리해 카드와 설명이 함께 나타나게 한다.

결과

이제 Tag 페이지에서 Language selector를 변경하면 선택한 언어의 포스트 카드와 설명이 함께 나타난다.

같은 콘텐츠와 언어를 유지한 채 0.0.6 테마를 적용했다. 카드가 나타날 때 설명의 opacity도 함께 복구되어 제목과 본문 요약이 모두 보인다.

다국어 처리 자체의 문제는 아니었다. CSS에서 부모와 자식에 각각 opacity를 적용했는데 JavaScript에서는 부모만 복구하면서 생긴 작은 UI 버그였다.