HackerNews JS(5) - 댓글,대댓글,상태

댓글, 대댓글 구조

let template = `
    <div class="bg-gray-600 min-h-screen pb-8">

      <div class="bg-white text-xl">
        <div class="mx-6 px-4">
          <div class="flex justify-between items-center py-6">
            <div class="flex justify-start">
              <h1 class="font-extrabold">Hacker News</h1>
            </div>
            <div class="items-center justify-end">
              <a href="#/page/${store.currentPage}" class="text-gray-500">
                <i class="fa fa-times"></i>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="h-full border rounded-xl bg-white m-6 p-4 ">
        <h2>${newsContent.title}</h2>
        <div class="text-gray-400 h-20">
          ${newsContent.content}
        </div>

        {{__comments__}}

      </div>
    </div>
  `;

대댓글 재귀구조

function makeComment(comments, called = 0) {
    const commentString = [];

    for(let i = 0; i < comments.length; i++) {
      commentString.push(`
        <div style="padding-left:${called * 40}px;" class="mt-4">
          <div class="text-gray-400">
            <i class="fa fa-sort-up mr-2"></i>
            <strong>${comments[i].user}</strong> ${comments[i].time_ago}
          </div>
          <p class="text-gray-700">${comments[i].content}</p>
        </div>      
      `);
	    // 대댓글 확인
      if (comments[i].comments.length > 0) {
        // 재귀 호출 방식 (끝을 알 수 없는 경우 자주 사용되는 테크닉)
        commentString.push(makeComment(comments[i].comments, called + 1)); 
      }
    }
    return commentString.join('');
  }

읽음 상태 저장
-읽어온 전체 데이터를 feeds 배열에 read상태와 함께 저장
-feedDetail 페이지 방문 시 id와 비교 -> read= true로 변경하여 방문표시반영

const store = {
  currentPage: 1,
  feeds:[],
};

function makeFeeds(feeds) {
  for (let i = 0; i < feeds.length; i++){
    feeds[i].read = false;
  }
  return feeds;
}

newsList.push(`
      <div class="p-6 ${newsFeed[i].read ? 'bg-red-300' : 'bg-white'} mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100">

for (let i = 0; i < store.feeds.length; i++){
    if (store.feeds[i].id === Number(id)) {
      store.feeds[i].read = true;
      break;
    }
  }