admin page layout 만들기

이런 admin page layout 을 만들어 봤다. 찾다가 답답해서.

만들어진 admin page layout 을 찾다보면 기능이 마음에 안들거나 불필요한 기능이 많다거나 커스텀이 어렵다거나 또는 돈을 지불해야 해서 그냥 만들었다.

cra에 typescritpt 를 적용했고 material-ui의 grid를 이용해 본문의 내용을 카드 형식으로 담을 수 있게 했다. 요즘 관리자 페이지를 벤치마킹 해 보니 대부분 저런 형태다. 기본적인 반응형 웹을 적용해서 좌측 메뉴도 필요에 따라 사라지게 했다.

참조 : https://github.com/sig003/admin_page_layout

//App.tsx
import React from 'react';
import './layout.css';
import { styled } from '@mui/material/styles';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
function App() {
  const Item = styled(Paper)(({ theme }) => ({
    ...theme.typography.body2,
    padding: theme.spacing(1),
    textAlign: 'center',
    color: theme.palette.text.secondary,
    height: '300px',
  }));
  
  return (
    <>
      <div className="top">TOP</div>
      <div className="content">
        <div className="left">LEFT</div> 
        <div className="center">
          <Grid container spacing={3} className="grid_blank">
            <Grid item xs={4} sm={4.3} md={3} lg={3} xl={4}>
              <Item>abcd</Item>
            </Grid>
            <Grid item xs={6.8} sm={6.8} md={6} lg={6.4} xl={6.2}>
              <Item>
                <div>asdasdasf</div>
                <div>asdasdasf</div>
                <div>asdasdasf</div>
                <div>asdasdasf</div>
                <div>asdasdasf</div>
              </Item>
            </Grid>
          </Grid>
          <Grid container className="grid_blank">
            <Grid item xs={10.7} sm={11.1} md={8.9} lg={9.3} xl={10.2}>
              <Item>abcdffafds</Item>
            </Grid>
          </Grid>
        </div>
      </div>
    </>
  );
}
export default App;

//layout.css
body {
  padding: 0;
  margin: 0;
}
.top {
  width: 100%;
  height: 76px;
  background-color: #0E71FF;
}
.content {
  display: flex;
}
.center {
  background-color: #E9EDF5;
  width: 100%;
  height: 100%;
  left: 200px;
  position: fixed;
  padding-left: 30px;
}
.left {
  width: 203px;
  height: 100%;
  position: fixed;
}
.grid_blank {
 padding-top: 30px;
}
@media (max-width: 900px) {
  .left {
    display: none;
  }
  .center {
    background-color: #E9EDF5;
    width: 100%;
    height: 100%;    
    position: fixed;
    padding-left: 30px;
    left: 0px;
  }
}