로그인 시 홈페이지의 로그아웃 버튼이 새로고침 시에 보이는 문제

로그아웃&로그인 여부에 따라 화면 다르게 하기 강의까지 듣고 프로젝트에 적용 중입니다.

로그인을 하고 홈페이지로 이동하는데, me data 에 null 값이 들어와서 로그아웃 버튼이 보이지 않습니다.

그런데 새로고침을 하면 다시 원하는 화면이 그려지더라구요. 아래에 비슷한 질문이 있어서 확인해봤는데 해결이 안됐습니다.

//LogoutButton.tsx

'use client'

import { signOut, useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'

export default function LogoutButton() {
  const router = useRouter()
  const { data: me } = useSession()

  const onLogout = () => {
    signOut({ redirect: false }).then(() => {
      router.replace('/')
    })
  }

  // 내 정보 없으면 로그아웃 버튼 안 보여주기
  if (!me?.user) {
    return null
  }

  return (
    <button onClick={onLogout}>
      <div>
        <div>🔙로그아웃🔙</div>
        <img src={me.user?.image!} alt={me.user?.email as string} />
      </div>
      <div>
        <div>{me.user?.name}</div>
        <div>@{me.user?.email}</div>
      </div>
    </button>
  )
}