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)
  }}
/>

스크롤 위치 관리

내부 스크롤 영역은 Foundation ScrollArea / ScrollBar를 사용합니다. 기존 height, initialScrollTop, ref.getScrollTop(), onLoadMore API는 그대로이며 실제 Viewport 위치를 조회·복원합니다. 더보기는 기존처럼 버튼 클릭으로 동작합니다.

아래 예제는 초기 64px 위치를 복원하고 현재 위치를 읽습니다. 보라색 12px 스크롤바는 List의 토큰 예제와 같은 방식으로 중첩된 [data-token="scroll-area"] 루트에 --scroll-area-scrollbar-width-vertical과 --scroll-area-thumb-background를 지정한 것입니다.

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: 댓글 내 개별 버튼 컴포넌트