확장 컴포넌트

페이지 컴포넌트

추가 컴포넌트

import HeaderContainer from 'src/components/core/header-container'
import AddContainer from 'src/components/core/add-container'
import SearchContainer from 'src/components/core/search-container'
import ListContainer from 'src/components/core/list-container'
import Content from 'src/components/admin/content'

{/* 헤더 컨테이너 */}
<HeaderContainer />

{/* 추가 컨테이너 */}
<AddContainer />

{/* 검색 컨테이너 */}
<SearchContainer />

{/* 리스트 컨테이너 */}
<ListContainer>
  <Content />
</ListContainer>

<AddContainer /> 를 추가하면 추가 버튼이 생성됩니다.

컨텐츠 컴포넌트

액션 컴포넌트

import ActionContainer from 'src/components/core/action-container'

<TableCell>
  <ActionContainer
    id={row.id}
    detailAction={true}
    deleteAction={true}
  />
</TableCell>

Props	설명	비고
detailAction	true, 상세 액션 메뉴 활성화 false, 상세 액션 메뉴 비활성화
deleteAction	true, 삭제 액션 메뉴 활성화 false, 삭제 액션 메뉴 비활성화

날짜 포맷

import moment from 'moment'

<TableCell>
  {row?.createdAt
    ? moment(row?.createdAt).format(DATE.DATETIME)
    : '-'}
</TableCell>

에디터 뷰어

import ModalEditorViewerContainer from 'src/components/core/modal-editor-viewer-container'

<TableCell>
  <ModalEditorViewerContainer
    title="제목"
    content={row.intro}
  />
</TableCell>

사진

import CustomAvatar from 'src/@core/components/mui/avatar'

<TableCell>
  <CustomAvatar
    src={row.url}
    variant="rounded"
    sx={{ width: 40, height: 40 }}
  />
</TableCell>

분기에 의한 칩

import Chip from '@mui/material/Chip'

<TableCell>
  {Number(row.level) === 1 ? (
    <Chip label="시스템관리자" color="primary" variant="outlined" />
  ) : (
    <Chip label="관리자" color="secondary" variant="outlined" />
  )}
</TableCell>

스낵바

import Snackbar from '@mui/material/Snackbar'

const [state, setState] = useState({
  openSnack: false,
  snackContent: ''
})

const { openSnack, snackContent } = state

const handleClickSnack = (password: string) => {
  setState({
    openSnack: true,
    snackContent: password
  })
}

const handleCloseSnack = () => {
  setState({ ...state, openSnack: false })
}

<TableCell>
  <Button
    variant="text"
    onClick={() => handleClickSnack(row.password)}
  >
    비밀번호
  </Button>
</TableCell>

<Snackbar
  open={openSnack}
  onClose={handleCloseSnack}
  message={snackContent}
  autoHideDuration={3000}
  anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
/>