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

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

Last updated