11. 시간에 따른 Title

<추가 사항>

※시간에 따라 사용자에게 Title로 인사 하기

 

componenet

  -Input.jsx

  -Button.jsx

  -Checkbox.jsx

module

  -Login.jsx

  -Clock.jsx

  -Weather.jsx

  -ToDoList.jsx

page

  -ChromeApp.jsx

css

  -List.css

img

  -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg

 

module - <Login.jsx>

import React, {useEffect, useState} from 'react'
import '../css/List.css'
import Input from '../component/Input'
import Button from '../component/Button'

function Login() {
  const checkUsername = localStorage.getItem('username')

  const [loginValue, setLoginValue] = useState(checkUsername)
  const [loginBool, setLoginBool] = useState(true)
  const [timeTitle, setTimeTitle] = useState('') //시간에 따른 Title 변수, 함수

  const time = new Date().getHours() //0 ~ 23시까지의 시간

  const onChangeLogin = event => {
    setLoginValue(event.target.value)
  }

  const handleLogin = e => {
    e.preventDefault()
    setLoginBool(false)
    localStorage.setItem('username', loginValue)
  }

  const handleLogout = () => {
    setLoginBool(true)
    setLoginValue('')
    localStorage.removeItem('username')
  }

  useEffect(() => {
    if (checkUsername === null) {
      setLoginBool(true)
    } else {
      setLoginBool(false)
    }
  }, [checkUsername])

  useEffect(() => {
    if (6 <= time && time < 12) { //6 ~ 11시까지 Good Morning
      setTimeTitle('Good Morning')
    } else if (12 <= time && time < 18) { //12 ~ 15시까지 Good Afternoon
      setTimeTitle('Good Afternoon')
    } else if (18 <= time && time < 21) { //18 ~ 20시까지 Good Evening
      setTimeTitle('Good Evening')
    } else if ((21 <= time && time <= 23) || (0 <= time && time < 6)) { //21 ~ 5시까지 Good Night
      setTimeTitle('Good Night')
    }
  }, [time])

  return (
    <div>
      {loginBool ? (
        <div>
          <form className="loginDiv" onSubmit={handleLogin}>
            <Input
              type={'text'}
              value={loginValue}
              onChange={onChangeLogin}
              maxLength={15}
            />
            <Button className={'loginButton'} name={'Login'} />
          </form>
        </div>
      ) : (
        <div className="loginDiv">
          <h1>{`${timeTitle}, ${loginValue}`}</h1>
          <Button className={'loginButton'} name={'Logout'} onClick={handleLogout} />
        </div>
      )}
    </div>
  )
}

export default Login

 

App.js

import React from 'react'
import Login from './module/Login.jsx'

function App() {
  return (
    <div>
      <Login />
    </div>
  )
}

export default App

 

당시 포스팅 작성 시간이 22시였으므로 Good Night, 천사로 Title 표시