[실습1] 댓글 UI 만들기

이짜젠·2021년 9월 22일
0
post-custom-banner

UI 작성의 필요한 요소

  1. 디자인
  2. 아이콘, 이미지 리소스
  3. 폰트

FontAwesome

아이콘에 해당하는 부분을 폰트형식으로 제공해준다.
cdnjs 통해 다운로드하자
https://cdnjs.com/libraries/font-awesome

대댓글 출력

재귀호출을 대댓글을 출력한다.

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('');
  }
profile
오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.
post-custom-banner

0개의 댓글