[FE] 컴포넌트 API

Drawer

API

Drawer

Property	Description	Type	Default
open	true일 경우 Drawer가 열립니다.	boolean	false
onClose	open을 false 상태로 변경하는 함수를 지정한다.	() => void
placement	Drawer가 나올 위치를 지정합니다.	'left' | 'right' | 'top' | 'bottom'?	'bottom'
maxwidth	Drawer의 최대 가로 길이를 지정합니다.	number | string?	'64rem'

Drawer.CloseButton

• 닫기 버튼 컴포넌트이며, 원하는 위치에 두면 됩니다. 클릭 시 Drawer가 닫힙니다.

Drawer.Inner

• padding이 적용된 Wrapper 컴포넌트입니다.

Drawer.Header

• Drawer의 상단에 Header를 배치할 수 있는 컴포넌트입니다. Row Flexbox이며 justify-content: space-between이 적용되어 있습니다.

Drawer.HeaderText

• Drawer.Header 내부에서 사용하기 좋은 텍스트 컴포넌트입니다.

Panel

API

Panel

Property	Description	Type	Default
expandable	해당 속성이 true일 경우 Panel을 펼쳤다가 닫을 수 있는 UI로 변경된다.	boolean?	false
initialExpanded	Panel이 초기에 펼쳐져 있는 상태인지 정의한다. 해당 속성이 true일 경우 Panel 컴포넌트가 처음 렌더될 때부터 펼쳐져 있는 형태로 보여준다. expandable이 true일 때만 동작한다.	boolean?	false
children	Panel.Header로 Panel의 헤더 영역, Panel.Content로 Panel의 내용 영역을 정의할 수 있다.	ReactNode

Panel.Header

• Panel 컴포넌트에서 상단 헤더 영역을 정의합니다.

Property	Description	Type	Default
bgColor	배경 색상을 지정한다. 배경 색에 따라 텍스트 색상이 검은색 혹은 흰색으로 자동으로 변경된다.	string?
children		ReactNode

Panel.Content

• Panel 컴포넌트에서 내용 영역을 정의합니다.

Property	Description	Type	Default
children		ReactNode

Panel.Inner

• Panel.Header 및 Panel.Content 내에서 적절한 padding 값을 지니는 Container 역할의 컴포넌트입니다.

Property	Description	Type	Default
children		ReactNode

Table

예시 코드

<Table>
  <Table.Head>
    <Table.Row>
      <Table.Header>이름</Table.Header>
      <Table.Header>주제</Table.Header>
      <Table.Header>시간</Table.Header>
      <Table.Header wordWrap>삭제</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell wordWrap>체프</Table.Cell>
      <Table.Cell align="left">맛있는 커피를 내리는 법</Table.Cell>
      <Table.Cell>13:00 - 15:00</Table.Cell>
      <Table.Cell></Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell wordWrap>썬</Table.Cell>
      <Table.Cell align="left">태양을 피하는 방법</Table.Cell>
      <Table.Cell>15:00 - 17:00</Table.Cell>
      <Table.Cell></Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

• wordWrap prop은 표에서 해당 단어가 반드시 줄바꿈 되지 않고 보여주어야 할 필요가 있을 때 사용합니다.
• align prop은 표에서 해당 cell의 텍스트 정렬을 정의할 때 사용합니다.

API

Table

• <table>과 동일합니다. 관련 attribute들을 그대로 사용할 수 있습니다.

Table.Head

• <thead>와 동일합니다. 관련 attribute들을 그대로 사용할 수 있습니다.

Table.Body

• <tbody>와 동일합니다. 관련 attribute들을 그대로 사용할 수 있습니다.

Table.Row

• <tr>과 동일합니다. 관련 attribute들을 그대로 사용할 수 있습니다.

Table.Header

• <th> 와 동일합니다. 관련 attribute들을 그대로 사용할 수 있습니다.

Property	Description	Type	Default
wordWrap	true일 경우 텍스트를 줄바꿈하지 않고 한 줄에 보여준다. 모든 cell에 적용할 경우 표의 레이아웃이 의도하지 않게 깨질 수 있으므로 꼭 필요한 곳에만 사용해야 한다.	boolean?
align	해당 셀의 텍스트 정렬을 지정한다. 기본 정렬은 가운데 정렬이다.	'left' | 'center' | 'right' | 'justify'	center

Table.Cell

• <td> 와 동일합니다. 관련 attribute들을 그대로 사용할 수 있습니다.

Property	Description	Type	Default
wordWrap	true일 경우 텍스트를 줄바꿈하지 않고 한 줄에 보여준다. 모든 cell에 적용할 경우 표의 레이아웃이 의도하지 않게 깨질 수 있으므로 꼭 필요한 곳에만 사용해야 한다.	boolean?
align	해당 셀의 텍스트 정렬을 지정한다. 기본 정렬은 가운데 정렬이다.	'left' | 'center' | 'right' | 'justify'	center

ReservationListItem

API

ReservationListItem

Property	Description	Type	Default
reservation	예약 정보를 담는다.	name: string description: string startDateTime: Date endDateTime: Date
control	해당 예약과 관련된 조작 버튼을 위치할 수 있으며, 다음과 같이 우측 중앙에 배치된다.	ReactNode?