info-card
등록 페이지에서 주로 사용되는 Form이 포함된 형태의 컴포넌트

기본 구조
<InfoCard>
<InfoCard.Header /> // 좌측 상단 타이틀
<InfoCard.Body> // 테이블 Tbody 영역
<InfoCard.Row> // 테이블 Row 영역
<InfoCard.Row.Head /> // 테이블 Row Th 영역
<InfoCard.Row.Cell /> // 테이블 Row Td 영역
</InfoCard.Row>
</InfoCard.Body>
</InfoCard>
Props
InfoCard
Prop
Type
Default
Description
type
'default'
InfoCard 타입
children
React.ReactNode
-
자식 컴포넌트
InfoCard.Header
Prop
Type
Default
Description
title
string
-
카드 타이틀
onClickSave
function
-
InfoCard의 type이 'edit-multi' 일 경우 저장 버튼 클릭 핸들러
InfoCard.Body
Prop
Type
Default
Description
children
React.ReactNode
-
자식 컴포넌트
InfoCard.Row
Prop
Type
Default
Description
children
React.ReactNode
-
자식 컴포넌트
InfoCard.Row.Head
Prop
Type
Default
Description
headText
string
-
헤더 텍스트
isRequired
boolean
-
필수값 여부
InfoCard.Row.Cell
Prop
Type
Default
Description
render
React.ReactNode
-
기본 랜더할 컴포넌트
editRender
React.ReactNode
-
수정 상태에서 랜더링할 컴포넌트
isEditable
boolean
false
InfoCard의 type이 'edit-single' 일 때, 해당 Cell의 수정 가능 여부
onClickSave
function
-
InfoCard의 type이 'edit-single' 일 때, 해당 Cell의 데이터 저장 핸들러
Usage
import { InfoCard } from '@/src/components/layout'
export function InfoCardDemo() {
return (
// 개별 수정 InfoCard
<InfoCard type={'edit-single'}>
<InfoCard.Header title="계정 정보" />
<InfoCard.Body>
<InfoCard.Row>
<InfoCard.Row.Head headText="아이디" />
<InfoCard.Row.Cell render={} />
</InfoCard.Row>
<InfoCard.Row>
<InfoCard.Row.Head headText="사용여부" isRequired />
<InfoCard.Row.Cell
isEditable
render={
<Badge variant={'secondary'}>{'사용'}</Badge>
}
editRender={
<Toggle
name={'isActive'}
value={true}
onChange={() => {}}
/>
}
onClickSave={() => {}}
/>
</InfoCard.Row>
</InfoCard.Body>
</InfoCard>
// 일괄 수정 InfoCard
<InfoCard type={'edit-multi'}>
<InfoCard.Header title="관리자 정보" onClickSave={() => {}} />
<InfoCard.Body>
<InfoCard.Row>
<InfoCard.Row.Head headText="이름" />
<InfoCard.Row.Cell
render={'홍길동'}
editRender={
<InputBox
name={'name'}
value={'홍길동'}
onChange={() => {}}
/>
}
/>
</InfoCard.Row>
</InfoCard.Body>
</InfoCard>
)
}
Last updated