75-lcp_reduce

[Pyotato]

Description & Technical Solution

• 성능 최적화를 위해 inline-css를 최소화했습니다.
  • 다만 ReactFlow.tsx 컴포넌트에서 로드맵을 그려주기 위해서는 반드시 픽셀로 계산한 높이가 필요합니다.
  • 노드의 최상과 최하단의 높이차의 데이터를 가지고 계산하기 위해서 인라인으로 width/height 스타일을 주었습니다.
• suspense로 로딩 중인 요소를 감싸주고 skeleton-ui로 fallback을 제공했습니다.
• 메인페이지의 무한 스크롤링으로 인해 푸터의 위치가 가변적인 현상이 발생합니다.
• 해당 문제로 인해 cumulative-layout-shift 척도가 나쁜 문제가 있습니다.
• 따라서 이를 해결하기 위해 layout에서 footer 컴포넌트를 제거하고, 쿼리의hasNextPage가 false일 경우에만 해당 컴포넌트를 보이도록 했습니다.

Checklist

• I have commented my code, particularly in hard-to-understand areas.
• Already rebased against main branch.

Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
roadmaker-fe	✅ Ready (Inspect)	Visit Preview	Apr 17, 2024 10:27am