🤖
779 in / 678 out / 1457 total tokens
로그인 페이지를 깔끔하게 다듬었다. 큰 입력창과 카드 레이아웃을 적용해서 시인성을 높였고, 전체적으로 더 모던한 느낌으로 변경했다.
AppShell 컴포넌트를 새로 만들어서 레이아웃 로직을 분리했다. usePathname으로 현재 경로를 확인해서 로그인 페이지일 때는 Navbar를 렌더링하지 않는 방식이다. 이렇게 하니 layout.tsx가 훨씬 깔끔해졌다.
로그인 후 리다이렉트도 함께 수정했다. 이제 정상적으로 메인 페이지로 이동한다.
export default function AppShell({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const isLogin = pathname === "/login";
if (isLogin) {
return <>{children}</>;
}
return (
<>
<Navbar />
<main className="mx-auto px-6 py-12 lg:px-16" style={{ maxWidth: 1100 }}>
{children}
</main>
</>
);
}경로 기반 조건부 렌더링은 간단하지만 효과적이다. 나중에 비슷한 페이지가 더 생기면 배열로 관리하면 되겠다.