디렉토리 구조

• @main: 메인 페이지의 클라이언트 컴포넌트
• @layout: 전체 페이지의 레이아웃 컴포넌트
• search: 검색 페이지의 라우트 컴포넌트
• page: 메인 페이지의 라우트 컴포넌트

라우트 컴포넌트는 서버 컴포넌트이고 그 하위에는 클라이언트 컴포넌트인 경우가 대부분이라 라우팅 컴포넌트와 클라이언트 컴포넌트로 나눔

상태관리

next.js에서 제공하는 fetch 함수를 통해 캐싱기능을 이용하지 않고 tanstack query를 이용하는 이유는 fetch 함수는 mutation 기능을 제공하지 않고 캐시 무효화 기능만 제공하므로 빈번한 api 호출을 발생시킴
반면에 tansteack query는 mutation 기능을 제공하고 캐시 무효화 기능도 제공하므로 빈번한 api 호출을 방지할 수 있음

Mantine 디자인 시스템

전문적인 디자인을 하지 않은 상태에서 ui를 개발할때에 xs, md, lg 등과 같은 사이즈만 입력하면 전체적으로 비율이 맞출 수 있어
ui를 쉽게 개발할 수 있음, 그리고 레이아웃 컴포넌트를 이용해서 css 작성을 최소한으로 할 수 있음