Next.js에서 시간대마다 다른 텍스트 띄우기

next js(타입스크립트) 에서 시간대마다 다른 텍스트와 이모지 등을 띄우려 시도해 봤는데요..

'use client'
import { useEffect } from 'react'

const date = new Date()
const hour = date.getHours()
const day = {
  dawn: {
    main: '상쾌한 새벽이에요',
    emoji: '🌛',
    sub: '미리 책가방을 챙겨놓는 것은 어떤가요?',
    button: 'timetable'
  },
  morning: {
    main: '좋은 아침이에요',
    emoji: '🌞',
    sub: '학교에 갈 준비를 하세요.',
    button: 'timetable'
  },
  afternoon: {
    main: '즐거운 수업시간이에요.',
    emoji: '🏫',
    sub: '다른 학교 친구들은 무엇을 하고 있는지 알아볼까요?',
    button: 'community'
  },
  lunch: {
    main: '신나는 점심시간이에요',
    emoji: '🍱',
    sub: '오늘 우리 학교 급식이 뭔지 확인해보세요.',
    button: 'lunch'
  },
  evening: {
    main: '학원에 갈 시간이에요',
    emoji: '📖',
    sub: '우리 학교 학생들은 무슨 학원에 다니는지 알아봐요.',
    button: 'community'
  },
  night: {
    main: '안녕히 주무세요',
    emoji: '😴',
    sub: '잠들기 전에 내일의 시간표를 확인하세요.',
    button: 'timetable'
  },
}

let time: {main: string, emoji: string, sub: string, button: string}

const Home = () => {
  useEffect(() => {
    time = hour >= 0 && hour < 5 ? day.dawn : (hour >= 5 && hour < 9 ? day.morning : ((hour >= 9 && hour < 11) || (hour >= 13 && hour < 16) ? day.afternoon : (hour >= 11 && hour < 13 ? day.lunch : (hour >= 16 && hour < 21 ? day.evening : day.night))))
  })
  return (
    <div className='py-14'>
      <div className='space-y-8 bg-slate-700 text-gray-200 p-10 rounded-md'>
        <div className='space-y-2'>
          <h1 className='font-black text-4xl'>{time.main}, 임준석님. {time.emoji}</h1>
          <p className='text-xl'>{time.sub}</p>
        </div>
        <button className='bg-gray-200 py-2 px-4 text-black text-lg font-bold rounded-md'>시간표 확인하러 가기</button>
      </div>
    </div>
  )
}

export default Home

아래 코드와 같이 써보왔는데 사진과 같이 값이 undefined라고 에러가 뜹니다..
그래서 왜 이와 같은 에러가 뜨는지 여쭈어보아요..