feat(main): main page 작업

[SeolJaeHyeok]

📌 이슈 링크

• close #

📖 작업 배경

• 프로젝트 내의 apollo 버전이 너무 낮아 현재 메이저 버전으로 맞춰주기 위해 작업을 진행했습니다.

🛠️ 구현 내용

• 기존 apollo server(v3)를 apollo server(v4) + express로 migration 했습니다.
• 메인 페이지의 기능(리스트 불러오기, 페이지네이션, 태그 필터링)을 작업했습니다.
• 런타임 에러 처리를 위해 Error Boundary 적용

💡 참고사항

• 세
• Suspense를 적용했다가 생각해보니 server fetching의 경우 suspense가 필요없을 것 같아 지워줬습니다.
• next12 -> next 13으로 넘어오면서 next/router 가 아닌 next/navigation 모듈을 사용하지 않으면 에러를 뱉어줍니다.
  기존 useRouter Hook이 하는 일이 너무 많다고 생각해서 당연히 분리되어야 된다고 생각했는데 하나의 Hook에서 했던 작업을 usePathname, useSearchParams, useRouter로 분리해서 작성하려다 보니 코드량이 늘어나고 같은 코드를 반복하는 경우가 많아 useCustomNavigate 라는 Hook을 만들어 로직을 한 공간에서 관리하려고 했습니다.
  근데 작성하면서도 best practice는 아닌거 같다는 생각이 들어 다른 분들은 next13에서 navigation을 어떻게 우아하게 처리하시는지 궁굼합니다!!

🖼️ 스크린샷