날짜 구분선

피드형 화면에서 날짜(그룹) 경계를 표시하는 구분선이다. 라벨 + 보조 메타 + 우측을 채우는 수평선으로 구성된 표현 전용 컴포넌트로, 오늘/어제 판별 같은 라벨 문자열 생성 로직은 받지 않고 호출자가 만들어 넘긴다.

상태

오늘

기본

어제

5건

메타 포함

meta 는 ReactNode: 건수·요약 등 라벨 옆 보조 정보를 자유롭게 넣는다.

활용 방법

피드 목록과 조합

날짜별로 묶인 피드 항목 위에 구분선을 반복 배치한다. 항목 자체는 호출자가 구성한다.

Preview

오늘

2건

새 문의가 도착했습니다

답변이 등록되었습니다

어제

1건

일정이 변경되었습니다

tsx

{groups.map((group) => (
  <div key={group.date}>
    <DateDivider label={group.label} meta={`${group.items.length}건`} />
    {group.items.map((item) => <FeedItem key={item.id} {...item} />)}
  </div>
))}

사용 지침

· 오늘/어제 판별, 날짜 포맷 같은 로직은 호출자 몫이다: 컴포넌트는 받은 라벨을 그대로 표시만 한다.
· 피드·타임라인처럼 시간순 목록을 날짜 단위로 묶어 보여줄 때 쓴다.
· 표·그리드처럼 2차원 데이터의 구분에는 쓰지 않는다: 그런 경우는 Table·DataGrid를 쓴다.

속성

이름	타입	기본값	설명
label	ReactNode	-	날짜(그룹) 라벨: 필수. "오늘"·"2026-07-06" 등 호출자가 만들어 전달
meta	ReactNode	-	라벨 옆 보조 정보(건수 등)
className	string	""	래퍼 여백·폭 조정