[FE admin] 재사용되는 컴포넌트 사용법(input, table, grid) - innovationacademy-kr/slabs-munetic GitHub Wiki

import CustomInput from '../'

const [email, setEmail] = useState('');
<CustomInput
   width="20rem" //input width값
   text="Email" //input 상단 텍스트
   fontSize="1.5rem" // font-size값
   name="Email" // label for, input id 값
   value={email} // input-value 값, 보통 state 변수
   onChangeEvent={e => { //changeEvent
     setEmail(e.target.value);
     setButtonText('중복');
   }}
   error={buttonText === '❌'} // input value가 invalid한 경우 true, valid한 경우 false
/>

import CustomPasswordInput from '../'

const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false)
<CustomPasswordInput
  width="15rem" // input width 값
  fontSize="1.5rem" // input font-size 값
  showPassword={showPassword} // boolean
  clickEvent={() => setShowPassword(!showPassword)} // password 텍스트로 보여줄지에 대한 이벤트
  value={password} // input value값
  onChangeEvent={e => setPassword(e.target.value)} //onChange event
/>

import CustomPasswordInput from '../'

const [auth, setAuth] = useState('Admin');
<CustomSelect
  width="15rem" //width값
  fontSize="1.5rem" //font-size값
  value={auth} // value값
  items={['Admin', 'Owner']} // 리스트에 들어갈 요소들
  onChangeEvent={(e: SelectChangeEvent) => //changeEvent
    setAuth(e.target.value)
  }
/>

export type TableProps = {
  page: number; // 현재 페이지 number, 첫번째 페이지는 0부터 시작합니다.
  count: number; // 총 row(데이터)의 수
  rows: []; // api로 받아온 데이터 리스트
  rowsPerPage: number; // 한 페이지에 노출되는 row의 수
  handleChangePage: (
    event: React.MouseEvent<HTMLButtonElement> | null,
    newPage: number,
  ) => void; // 페이지 전환 이벤트
  handleChangeRowsPerPage: (event:  React.ChangeEvent<HTMLInputElement>) => void; // 한 페이지에 보여줄 row 수 변경 이벤트
};

export default function LessonListPage() {
  const [page, setPage] = useState<number>(0);
  const [rowsPerPage, setRowsPerPage] = useState<number>(10);
  const [rows, setRows] = useState<[]>([]);
  const [count, setCount] = useState(0);

  /**
   * Page 전환
   */
  const handleChangePage = (
    event: React.MouseEvent<HTMLButtonElement> | null,
    newPage: number,
  ) => {
    setPage(newPage);
  };

  /**
   * 한 페이지에 노출하는 row수
   */
  const handleChangeRowsPerPage = (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  useEffect(() => {
    const limit = 10;
    const offset = page * limit;
    Api.getAllLessons(offset, limit).then(({ data }: any) => {
      setRows(data.data.rows);
      setCount(parseInt(data.data.count, 10));
    });
  }, [page]);

  return (
    <MUITable
      page={page}
      count={count}
      rows={rows}
      rowsPerPage={rowsPerPage}
      handleChangePage={handleChangePage}
      handleChangeRowsPerPage={handleChangeRowsPerPage}
    />
  );
}

// Table/MUITableToolbar.tsx line 44~54
<Typography
  sx={{ flex: '1 1 100%' }}
  variant="h4"
  id="tableTitle"
  component="div"
  >
  {path === '/users' && 'App User'}
  {path === '/admin_users' && 'Admin User'}
  {(path === '/lessons' || path === `/users/${info!.id}`) && 'Lesson'}
</Typography>

// Table/MUITableRow.tsx
export default function MUITableRow(){
 //line 59 ~ 62
 {path === '/users' && <UserTableCell row={row} />}
 {path === '/admin_users' && <AdminUserTableCell row={row} />}
 {(path === '/lessons' || path === `/users/${info!.id}`) && (
    <LessonTableCell row={row} />
  )}
}

//Table/User/UserTableCell.tsx

export default function UserTableCell({ row }: any) {
  return (
    <>
      <TableCell align="left" sx={{ fontSize: '1.25rem' }} padding="none">
        {row.login_id}
      </TableCell>
      <TableCell sx={{ fontSize: '1.25rem' }}>{row.name}</TableCell>
      <TableCell align="left" sx={{ fontSize: '1.25rem' }}>
        {row.type}
      </TableCell>
      <TableCell align="left" sx={{ fontSize: '1.25rem' }}>
        {row.lastLogin}
      </TableCell>
      <TableCell align="left" sx={{ fontSize: '1.25rem' }}>
        {row.createdAt}
      </TableCell>
      <TableCell align="left" sx={{ fontSize: '1.25rem' }}>
        {row.deletedAt}
      </TableCell>
    </>
  );
}