반응형
아무리 dark모드 버튼을 바꿔도 Comment.js 컴포넌트 내에서는 값이 잘 변경이 되지만,
layout.js에 오면 값이 undefined 되어서 쓰는 에러 ..
로그아웃을 하고 세션 정보가 없을 떄에는 제대로 잘 동작하는 걸로 보아서 session 에서가 문제다
import { Inter } from "next/font/google";
import "./globals.css";
import Link from 'next/link'
import LoginBtn from "./LoginBtn";
import LogoutBtn from "./LogoutBtn";
import { cookies } from 'next/headers'
import { getServerSession } from "next-auth";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import DarkMode from './DarkMode';
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default async function RootLayout({ children }) {
let session = await getServerSession(authOptions)
let cookie = cookies().get('mode')
console.log("쿠키 : ", cookie)
return (
<html lang="en">
<body className={cookie != undefined && cookie.value == 'dark'
? 'dark-mode'
: ''}>
<div className="navbar">
<Link href="/" className="logo">Nepes SPC Monitoring </Link>
<Link href="/list">List</Link>
{
session? <span>{session.user.name}<img src = {session.user.image}/><LogoutBtn /></span>: <LoginBtn></LoginBtn>
}
<DarkMode/>
</div>
{children}
</body>
</html>
);
}
router.refresh () 사용하는 이유
: cookie 값을 바꾸면 재렌더링이 되지 않음 / state가 바뀌면 재렌더링이 됨
재렌더링이 되지 않기 때문에 refresh 새로고침을 해줘야 내가 임의로 새로고침을 하지 않아도 dark모드로 전환이 됨
'use client'
import { useRouter } from "next/navigation"
import { useEffect } from "react"
export default function DarkMode(){
let router = useRouter()
useEffect(()=>{
let 쿠키값 = ('; '+document.cookie).split(`; mode=`).pop().split(';')[0]
if (쿠키값 == '') {
document.cookie = 'mode=light; max-age=' + (3600 * 24 * 400)
}
},[])
return (
<span onClick={()=>{
let 쿠키값 = ('; '+document.cookie).split(`; mode=`).pop().split(';')[0]
if (쿠키값 == 'light') {
console.log("지금 쿠키 : ", 쿠키값 )
document.cookie = 'mode=dark; max-age=' + (3600 * 24 * 400)
router.refresh()
} else {
console.log("지금 쿠키 : ", 쿠키값 )
document.cookie = 'mode=light; max-age=' + (3600 * 24 * 400)
router.refresh()
}
}}> 🌙 </span>
)
}
ui 만들때 state를 사용 하면 되는데, 재 접속시 유지되게 하려면 DB/localStorage/cookie 를 사용해서 만들 수 있음
반응형