실전 대시보드 UI 만들기 – MUI 또는 Ant Design으로 관리자 화면 구성하기

 

 

지금까지 MUI와 Ant Design의 기본 사용법과 커스터마이징 방법을 배워봤다면,
이번엔 그걸 직접 관리자 페이지 레이아웃에 적용해보는 실습을 해볼 차례입니다.

사이드바 + 상단바 + 콘텐츠 영역으로 구성된 기본적인 대시보드 틀을 구현해볼게요.

---

✅ 구조 설계 미리보기

+-------------------------------+
|          Header Bar           |
+------------+------------------+
| Sidebar    |   Main Content   |
+------------+------------------+

 

---

 

✅ MUI 버전 예제

import { Box, AppBar, Toolbar, Drawer, Typography } from '@mui/material';

const drawerWidth = 240;

function Dashboard() {
  return (
    <Box sx={{ display: 'flex' }}>
      <AppBar position="fixed" sx={{ zIndex: 1201 }}>
        <Toolbar>
          <Typography variant="h6">대시보드</Typography>
        </Toolbar>
      </AppBar>

      <Drawer
        variant="permanent"
        sx={{ width: drawerWidth, [`& .MuiDrawer-paper`]: { width: drawerWidth } }}
      >
        <Toolbar />
        <Box sx={{ p: 2 }}>사이드바 메뉴</Box>
      </Drawer>

      <Box component="main" sx={{ flexGrow: 1, p: 3, mt: 8 }}>
        메인 콘텐츠 영역
      </Box>
    </Box>
  );
}

 

---

 

✅ Ant Design 버전 예제

import { Layout, Menu } from 'antd';
const { Header, Sider, Content } = Layout;

function Dashboard() {
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ color: '#fff', fontSize: 20 }}>대시보드</Header>
      <Layout>
        <Sider width={200}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            items={[
              { key: '1', label: '홈' },
              { key: '2', label: '사용자 관리' },
            ]}
          />
        </Sider>
        <Layout style={{ padding: '24px' }}>
          <Content>메인 콘텐츠 영역</Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

 

---

 

🧩 공통 기능 추천 요소

• 아이콘 메뉴 (@mui/icons-material, @ant-design/icons)
• 반응형 처리 (Drawer or Sider 토글 기능)
• 테이블/카드/그래프 등 컴포넌트 삽입 확장 가능
• 로그인 → 토큰 기반 인증 연동도 이후 확장 가능