=> mui를 활용하여 위 디자인을 만들고자 함

---

1.전체 영역 크기 잡기

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
    components: {
        MuiCssBaseline: {
            styleOverrides: {
                "*": {
                    boxSizing: "border-box",
                    margin: 0,
                    padding: 0
                },
                html: {
                    height: "100%",
                    width: "100%"
                },
                body: {
                    height: "100%",
                    width: "100%"
                },
                a: {
                    textDecoration: "none",
                    color: "inherit"
                },
                "#root": {
                    height: "100%",
                    width: "100%"
                }
            }
        }
    }
});

export default theme;

기본적으로 body의 크기가 잡혀있지 않기 때문에 전체 넓이로 크기를 잡기 위한 설정을 해준다.

2. box 만들기

import { Box, Grid } from "@mui/material";
import React from "react";

const Login = () => {
    return (
        <Box sx={{ width: "100%", height: "100%", bgcolor: "primary.main", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Grid sx={{ width: "480px", height: "570px", bgcolor: "rgba(255,255,255,0.05)" }} container direction="column" justifyContent="center" alignItems="center">
                D
            </Grid>
        </Box>
    );
};

export default Login;

box를 하나 만들어서 body의 크기와 동일하게 100% 로 설정하고 background를 깔아준다.

그 안에 grid로 박스를 만들어서 내부 영역의 크기를 잡아 주었다.

기본적으로 grid의 경우 display가 flex 로 잡혀있다.
내부 item들을 가운데 정렬 및 세로로 배열하기 위해 설정을 추가해준다.

---

mui를 쓰지 않는 html tag에 스타일 주기

mui를 사용하지 않는 곳에 그냥 emotion을 사용하고 싶지만...
회사의 코드를 보아하니 그렇게 사용하고 있지가 않네ㅋㅋㅋ
전부다 mui를 사용하고 있는 것으로 보인다.

보아하니

const StyledBox = styled(Box)(({ theme: { palette } }) => ({
   "& form": {
       padding: "20px 20px 0",
       "& table": {
           "& tr": {
           },
           "& th": {
           }
       }
   }
}));


  <StyledBox>
 	<table>
     <tbody>
     ...
     </tbody>
	</table>
</StyledBox>

요렇게 mui를 사용하는 컴포넌트를 하나 만들어서 거기서 스타일을 해주고 있는 것으로 보인다.

나의 경우 img태그를 스타일링을 하고 싶었는데ㅋㅋㅋㅋ

              <Box
                    component="img"
                    sx={{
                        marginBottom: "68px"
                    }}
                    src={LogoIcon}
                    alt="로고"
                />

고냥 mui Box를 활용해서 img를 만들었다.
공식 문서

---

header 만들기

AppBar 사용 예시

헤더를 만들기 위해서는 mui의 AppBar를 사용한다.
appbar vs toolbar
AppBar 내부에는 ToolBar를 사용하고 있는데 이 둘에 대한 차이에 대해 설명해주는 글이다.

sidebar 만들기

Drawer 사용함