기본 프레임 작성

Next.js는 디렉토리 기반 라우팅입니다.

컨텐츠 템플릿

frontend/src/components/sample/content.tsx 디렉토리 하위에 디렉토리와 파일을 생성합니다.

본 예시는 sample/content.tsx 를 작성하였습니다.

아래의 파일 내용을 복사하여 사용하십시오.

// ** Module
import moment from 'moment'

// ** MUI
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableRow from '@mui/material/TableRow'

// ** Const
import DATE from 'src/common/constants/date'

// ** Redux
import { RootState } from 'src/store'
import { useSelector } from 'react-redux'

const Content = () => {
  // ** Hooks
  const crud = useSelector((state: RootState) => state.crud)
  const pagination = crud.pagination

  return (
    <>
      <TableBody>
        {pagination.data.map((row: any, idx: number) => (
          <TableRow key={idx}>
            <TableCell>{row.id}</TableCell>
            <TableCell>
              {row?.createdAt
                ? moment(row?.createdAt).format(DATE.DATETIME)
                : '-'}
            </TableCell>
            <TableCell>
              {row?.updatedAt
                ? moment(row?.updatedAt).format(DATE.DATETIME)
                : '-'}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </>
  )
}

export default Content

페이지 템플릿

frontend/src/pages 디렉토리 하위에 디렉토리와 파일을 생성합니다.

본 예시는 sample/index.tsx 를 작성하였습니다.

아래의 파일 내용을 복사하여 사용하십시오.

// ** Module
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'

// ** Core
import HeaderContainer from 'src/components/core/header-container'
import SearchContainer from 'src/components/core/search-container'
import ListContainer from 'src/components/core/list-container'
import Content from 'src/components/sample/content'

// ** API

// ** Redux
import {
  setPageHeader,
  setTableHeader,
  setSearchForm,
  setDetailForm,
  setListAPI,
  setActionList,
  initData,
  setCreateAPI,
  setDetailAPI,
  setDeleteAPI,
  setAddForm
} from 'src/store/apps/crud'
import { AppDispatch } from 'src/store'

const Sample = () => {
  // ** Hooks
  const dispatch = useDispatch<AppDispatch>()

  useEffect(() => {
    // NOTE 리스트 조회 API 정의
    dispatch(setListAPI(null))

    // NOTE 생성 API 정의
    dispatch(setCreateAPI(null))

    // NOTE 상세 API 정의
    dispatch(setDetailAPI(null))

    // NOTE 삭제 API 정의
    dispatch(setDeleteAPI(null))

    // NOTE 페이지 헤더 정의
    dispatch(
      setPageHeader({
        title: '샘플',
        subTitle: '샘플입니다.'
      })
    )

    // NOTE 테이블 헤더 정의
    dispatch(
      setTableHeader([
        '아이디',
        '샘플1',
        '샘플2',
        '샘플3',
        '생성일자',
        '수정일자'
      ])
    )

    // NOTE 추가 폼 설정
    dispatch(setAddForm([]))

    // NOTE 상세 폼 설정
    dispatch(setDetailForm([]))

    // NOTE 검색 폼 설정
    dispatch(setSearchForm([]))

    // NOTE 액션 정의
    dispatch(setActionList([]))

    dispatch(initData())
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

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

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

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

export default Sample

결과

커스텀 가이드

1. 컴포넌트 명칭을 변경합니다

// 아래의 컴포넌트 명 변경
const User = () => {

// export 부분의 컴포넌트 명 변경
export default User

1. 페이지 헤더를 변경합니다.

// NOTE 페이지 헤더 정의
dispatch(
  setPageHeader({
    title: '사용자',
    subTitle: '사용자를 관리할 수 있습니다.'
  })
)

1. 테이블 헤더를 변경합니다.

// NOTE 테이블 헤더 정의
dispatch(
  setTableHeader([
    '아이디',
    '계정',
    '사용자명',
    '비밀번호',
    '권한',
    '생성일자',
    '수정일자'
  ])
)

결과