Comment

댓글 목록을 렌더링하고 페이지네이션·답글 버튼·스크롤 위치 복원 기능을 제공하는 컨테이너 컴포넌트

개요

Comment 컴포넌트는 작성자·작성일·답글 대상자·본문·답글 버튼으로 구성된 댓글 항목을 스크롤 가능한 목록으로 제공합니다.

주요 특징

• ✅ 댓글 목록 렌더링: 작성자·작성일·답글 대상자·본문 구조
• ✅ 더보기 페이지네이션: 버튼 클릭으로 추가 댓글 로드
• ✅ 로딩 상태: 스피너 오버레이 표시
• ✅ 빈 상태: 안내 문구 표시
• ✅ 답글 버튼: 클릭 시 댓글 데이터 콜백 전달
• ✅ 스크롤 위치 관리: initialScrollTop + ref.getScrollTop()

기본 사용

댓글 목록을 렌더링합니다.

import { Comment, type CommentItem } from "@vortex/ui-cals"
 
const comments: CommentItem[] = [
  { id: "1", author: "홍길동", date: "2025-06-01", content: "댓글 내용" },
  { id: "2", author: "김철수", date: "2025-06-02", replyTo: "홍길동", content: "답글 내용" },
]
 
<Comment comments={comments} height={200} />

빈 상태

댓글이 없을 때 안내 문구를 표시합니다.

<Comment comments={[]} emptyText="아직 작성된 댓글이 없습니다." />

로딩 상태

데이터를 불러오는 동안 스피너 오버레이를 표시합니다.

<Comment comments={comments} loading height={180} />

더보기 (페이지네이션)

hasMore=true이면 더보기 버튼이 표시되고, 클릭 시 onLoadMore가 호출됩니다.

const [comments, setComments] = useState(initial)
const [loading, setLoading] = useState(false)
 
<Comment
  comments={comments}
  hasMore={comments.length < total}
  loading={loading}
  onLoadMore={() => { /* fetch next page */ }}
  height={250}
/>

답글 버튼 클릭

답글 버튼 클릭 시 onClickButton 콜백으로 해당 댓글의 index와 데이터가 전달됩니다.

<Comment
  comments={comments}
  onClickButton={(data) => {
    console.log(data.index, data.comment)
  }}
/>

스크롤 위치 관리

initialScrollTop으로 스크롤 위치를 복원하고, ref.getScrollTop()으로 현재 위치를 조회할 수 있습니다.

import { useRef } from "react"
import { Comment, type CommentRef } from "@vortex/ui-cals"
 
function MyPage() {
  const commentRef = useRef<CommentRef>(null)
 
  // 페이지 이탈 시 저장
  const saveScrollPosition = () => {
    const scrollTop = commentRef.current?.getScrollTop() ?? 0
    sessionStorage.setItem("commentScroll", String(scrollTop))
  }
 
  // 복원
  const savedTop = Number(sessionStorage.getItem("commentScroll") || 0)
 
  return <Comment ref={commentRef} comments={comments} initialScrollTop={savedTop} />
}

API Reference

Props

Events

Ref (CommentRef)

Types

interface CommentItem {
  id: string
  author: string
  date: string
  replyTo?: string
  content: string
}
 
interface CommentClickData {
  index: number
  comment: CommentItem
}

접근성

권장 사항

• ✅ 댓글 목록에 role="list" 자동 적용
• ✅ 각 댓글 항목에 role="listitem" 자동 적용
• ✅ 로딩 시 aria-busy="true" 적용
• ✅ 답글 버튼에 작성자 이름 포함 aria-label 제공

관련 컴포넌트

• CommentButton: 댓글 내 개별 버튼 컴포넌트