const weekArr = ['일', '월', '화', '수', '목', '금', '토']

const [year, setYear] = useState('')
const [month, setMonth] = useState('')
const [day, setDay] = useState('')
const [week, setWeek] = useState('')

const [hours, setHours] = useState('')
const [minutes, setMinutes] = useState('')
const [seconds, setSeconds] = useState('')

useEffect(() => {
  clock()
  setInterval(clock, 1000)
})

const clock = () => {
  const date = new Date()

  // setTodayDate(date)
  setYear(date.getFullYear())
  setMonth(date.getMonth())
  setDay(date.getDate())
  setWeek(date.getDay())

  setHours(date.getHours())
  setMinutes(date.getMinutes())
  setSeconds(date.getSeconds())
}

<>
  <div style={{ marginTop: '5px', fontSize: '18px', fontFamily: 'escore7' }}>
    {year}년 {month + 1}월 {day}일 {weekArr[week]}요일
  </div>
  <div style={{ marginTop: '10px', fontSize: '60px', color: 'orange' }}>
    {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}:
    {seconds < 10 ? `0${seconds}` : seconds}
  </div>
</>

const [temp, setTemp] = useState('')
const [humidity, setHumidity] = useState('')
const [weather, setWeather] = useState('')
const [weatherIcon, setWeatherIcon] = useState('')
const [country, setCountry] = useState('')
const [city, setCity] = useState('')
const [cloud, setCloud] = useState('')

useEffect(() => {
  weather_clock()
})

const weather_clock = () => {
  const url =
    'https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=5a852cca928001166e0c28dca72c5987'
  fetch(url)
    .then(res => {
      return res.json()
    })
    .then(json => {
      setTemp(Math.round(json.main.temp - 273.15))
      setHumidity(json.main.humidity)
      setWeather(json.weather[0].main)
      setWeatherIcon(json.weather[0].icon)
      setCountry(json.sys.country)
      setCity(json.name)
      setCloud(json.clouds.all + '%')
    })
}

<>
  <div
    style={{
      marginTop: '4px',
      fontFamily: 'escore8',
      fontSize: '16px',
      textShadow: '2px 2px #ccc',
    }}
  >
    {weather}
  </div>
  <img src={`http://openweathermap.org/img/w/${weatherIcon}.png`} />
  <div
    style={{
      fontSize: '10px',
      fontFamily: 'escore9',
    }}
  >
    {country}, {city},
  </div>
  <div style={{ marginTop: '20px', fontSize: '14px' }}>현재온도 : {temp}℃</div>
  <div style={{ marginTop: '10px', fontSize: '14px' }}>
    현재습도 : {humidity}%
  </div>
  <div style={{ marginTop: '10px', fontSize: '14px' }}>
    구 &nbsp; &nbsp; &nbsp; 름 : {cloud}
  </div>
</>

// today > layout.js
import React from 'react'
import styled from 'styled-components'
import Weather from './Weather'
import Clock from './Clock'
import ContentsMenubar from '../ContentsMenubar'

const BackgroundContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: #f5f6f7;
`

const TodayContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  box-shadow: -4px -2px 4px 0px white, 4px 2px 6px 0px #dfe4ea;
  padding: 0px 40px 60px 40px;
`

const Layout = () => {
  return (
    <>
      <BackgroundContainer>
        <TodayContainer>
          <ContentsMenubar name="today" />
          <Clock />
          <Weather />
        </TodayContainer>
      </BackgroundContainer>
    </>
  )
}

export default Layout