Initial "flickering" issue with zustand theme #3
Description
문제
현재 테마 상태가 바로 적용이 안되고 초기값으로 "깜빡"이는 문제.
해결 방법
테마를 변경할 때 쿠키에 값을 저장해놓고 서버 사이드에서 현재 테마를 읽을 수 있게 적용.
layout.ts
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const cookieStore = await cookies();
const theme = (cookieStore.get("theme")?.value as "dark" | "light") || "light";
return (
<html className={theme}>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<ThemeStoreProvider initialTheme={theme}>
<Home>{children}</Home>
</ThemeStoreProvider>
</body>
</html>
);
}