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

1. InfoCard

Prop	Type	Default	Description
type	enum	'default'	InfoCard 타입
children	React.ReactNode	-	자식 컴포넌트

1. InfoCard.Header

Prop	Type	Default	Description
title	string	-	카드 타이틀
onClickSave	function	-	InfoCard의 type이 'edit-multi' 일 경우 저장 버튼 클릭 핸들러

1. InfoCard.Body

Prop	Type	Default	Description
children	React.ReactNode	-	자식 컴포넌트

1. InfoCard.Row

Prop	Type	Default	Description
children	React.ReactNode	-	자식 컴포넌트

1. InfoCard.Row.Head

Prop	Type	Default	Description
headText	string	-	헤더 텍스트
isRequired	boolean	-	필수값 여부

1. 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>
  )
}