layout.tsx 적용

http://localhost:3000/에 접속할 때 보여지는 파일은 app/page.tsx인데, 이 파일에서는 MainPage 컴포넌트를 직접 임포트해서 사용하고 있습니다. 이 방식은 Next.js의 레이아웃 시스템을 우회하게 됩니다.

문제 원인

app/page.tsx에서 import MainPage from "./(providers)/(root)/(main)/page";로 메인 페이지 컴포넌트를 직접 가져와서 사용하고 있습니다.
이렇게 하면 MainPage는 단순히 React 컴포넌트로서 렌더링되며, Next.js의 레이아웃 계층 구조(app/(providers)/layout.tsx → app/(providers)/(root)/layout.tsx → app/(providers)/(root)/(main)/layout.tsx)를 통과하지 않습니다.
결과적으로 app/(providers)/(root)/(main)/layout.tsx에 정의된 레이아웃이 적용되지 않는 것입니다.