[Error Handling] 컴포넌트가 렌더링 되지 않는(것처럼 보이는) 문제

### 어떤 에러인가요?
```jsx
// admin.tsx
import { NextPage } from 'next';
import Head from 'next/head';
import { useState, useEffect } from 'react';
import axios from 'axios';
import styles from '../styles/Admin.module.css';

axios.defaults.withCredentials = true;

const Admin: NextPage = () => {
const [userlist, setUserlist] = useState([]);

useEffect(() => {
axios
.get(`${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/admin`)
.then((data) => {
console.log(data.data);
});
});

return (
<>

BanThing

);
};

export default Admin;
```
위 코드블록과 같이 `admin.tsx`를 작성해 주었고, `div`의 스타일에는 `width: 100%`, `height: 100%`, `background-color: tomato`를 정해주었음에도 아래 사진과 같이 `_app.tsx`에서 전역으로 렌더링해준 `header`를 제외하고는 아무것도 렌더링되지 않는 것 같습니다. Next.js의 문제인지 아니면 제가 특별히 실수한 것이 있는지는 아직 잘 모르겠습니다.


### 에러 핸들링 방법
CSS 쪽의 중요한 개념 중 하나인 요소 쌓임순서 ,쌓임 문맥을 이해하고 있었다면 금방 해결할 수 있었던 문제였습니다.
해당 페이지에서 `header` 부분은 `position: fixed;` 였고, 제가 작성한 `

`는 `position`이 따로 명시되지 않았기 때문에 밑에 쌓이게 되고, 그후 `position`이 명시된 `header`가 나중에 쌓이게 되는 것입니다.
이를 확인해 보기 위해 `header`의 `height`이 `75px`이므로 `div`의 `height`을 `76px`로 작성해 보았더니 아래 사진과 같았습니다.

### 교훈
쌓임 문맥(stacking context)에 대한 충분한 이해가 있어야 이후로도 CSS를 능숙하게 다룰 수 있을 것 같습니다!

### 에러 핸들링을 위해 참고한 레퍼런스 링크
[MDN 링크](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)