오늘은 어제 하던 과제 이어서 진행했다.
카테고리 nav 바를 계속 화면 상단에 고정시켜두고 싶었는데 nextjs에 layouts이라는게 있어서 사용해보았다.
Layouts는 페이지간에 재사용되는 컴포넌트들을 관리(?)해준다.
그래서 Layouts 컴포넌트를 따로 만들고 props로 children을 넘겨준다음에 여기에 navbar나 footer를 같이 사용해주면 된다.
그리고 map을 사용할 때 key 값을 넣어주어야하는걸 계속 깜빡해서 오늘 map 사용하는 부분에 key 값을 다 넣어주었다.
nextjs에는 404 페이지를 커스텀 할 수가 있다는 걸 알게되었다.
그래서 404 페이지에 진입하게 된 경우 5초 후에 메인페이지로 이동하는 기능을 추가해주었다.
모달 팝업에서 close 버튼을 오른쪽 상단으로 이동하게 하고 싶다면 이 버튼의 부모에다가 position: relative를 주고
버튼에는 position: absolute, right:0을 해주면 된다는걸 알게 되었다.
과제를 할 수록 css가 중요하다는 것을 더욱 느끼는 것 같다.
평소에 css 공부를 해둬야겠다.
댓글