SectionHeader

각 섹션 상단에 위치하는 헤더 컴포넌트입니다. 섹션 접기/펼치기 기능과 함께 섹션 내 정보 수 뱃지, 최근 업데이트 시각, 편집 버튼을 포함합니다.

import { SectionHeader } from "@/shared/ui/widget"

인터랙티브 데모

기업명

디캠프

대표자

홍길동

Options

tsx

<SectionHeader
  title="기업 기본 정보"
  count={2}
  updatedAt="2026.3.11"
  onEditClick={() => {}}
>
  <div className="p-4">
    <Info label="기업명">디캠프</Info>
    <Info label="대표자">홍길동</Info>
  </div>
</SectionHeader>

Variants

뱃지, 업데이트 시각, 편집 버튼 유무에 따른 다양한 조합입니다.

기업명

디캠프

대표자

홍길동

총 투자 금액

10억 원

매출액

50억 원

영업이익

8억 원

다중 섹션

여러 SectionHeader를 세로로 배치하면 아코디언 형태의 섹션 구조를 만들 수 있습니다.

기업명

디캠프

대표자

홍길동

총 투자 금액

10억 원

투자 라운드

Series A

투자 기관

D벤처캐피탈

Props

SectionHeader

Prop	Type	Required	Default	설명
`title`	`string`	✓	—	섹션 제목
`count`	`number`	—	—	섹션 내 정보 수 뱃지
`updatedAt`	`string`	—	—	최근 업데이트 시각 (e.g. "2026.3.11")
`defaultOpen`	`boolean`	—	true	초기 펼침 상태
`onEditClick`	`() => void`	—	—	편집 버튼 클릭 핸들러 (미전달 시 편집 버튼 숨김)
`children`	`ReactNode`	—	—	접기/펼치기 대상 콘텐츠
`className`	`string`	—	—	추가 CSS 클래스