댓글 로딩 방식

[punchdrunkard]

댓글 API 명세

댓글 조회

200 Success

{
	message: "댓글 조회 성공",
	status: 200,
	data: {
        comments: {
						content: [
								{
		                commentId: 0,
		                content: "꼭 가고 싶네요. 근데 시간이 될지ㅠㅠ",
		                createdAt: "2022-07-26T11:26:24",
		                updatedAt: "2022-07-26T11:28:49",
		                isEdited: true,
										isDeleted: false,
		                user: {
		                    userId: 0,
		                    nickname: "미스터공공",
		                    profileImage: "www.naver.com"
		                },
										likeCount: 0,//좋아요 갯수
										isLiked: false,//좋아요 여부, 로그인 안되어 있을 시 항상 false
										childrenCount: 1 //자식댓글 갯수
			            }
							],
							numberOfElements: 1, //content의 요소가 몇개인지
			        offset: 0, // 현재 페이지에서 시작하는 요소의 index 번호
			        pageNumber: 0, //페이지 넘버
			        pageSize: 20, //페이지 사이즈
				      totalElements: 1, // 전체 요소 수
				      totalPages: 1 //전체 페이지 수
				},
				commentCount: 1 //대댓글 포함 전체 댓글 수
    }
}

대댓글 조회

200 Success

{
	message: "대댓글 조회 성공",
	status: 200,
	data: {
        content: [
            {
                commentId: 1,
                content: "같이가요~~",
                createdAt: "2022-07-26T11:26:24",
                updatedAt: "2022-07-26T11:28:49",
                isEdited: true,
								isDeleted: false,
                user: {
                    userId: 0,
                    nickname: "그린",
                    profileImage: "www.naver.com"
                },
								likeCount: 0,//좋아요 갯수
								isLiked: false//좋아요 여부, 로그인 안되어 있을 시 항상 false
            }
        ],
        numberOfElements: 1, //content의 요소가 몇개인지
        offset: 0, // 현재 페이지에서 시작하는 요소의 index 번호
        pageNumber: 0, //페이지 넘버
        pageSize: 10, //페이지 사이즈
        totalElements: 1, // 전체 요소 수
        totalPages: 1 //전체 페이지 수
    }
}

댓글 로딩 방식

처음에 getServersideProps로 받아오는 댓글의 개수와 댓글 조회에서 불러오는 댓글의 개수가 다르고,
댓글의 경우 interaction이 자주 일어나기 때문에 댓글은 CSR 로 렌더링 한다.

댓글의 경우, 상위 20개를 보여주고 그 뒤로 무한 스크롤
대댓글의 경우 댓글에서 대댓글을 불러오면 대댓글을 fetch를 시작하여 더보기 버튼으로 무한 스크롤 한다.