<BackgroundContainer>
  <ContentsMenubar name="loading" />
  <MainLoader id="main_loader">
    <MainLoaderText transX="12px" delay="0.35s" color="firebrick">
      LOADING
    </MainLoaderText>
    <MainLoaderText transX="10px" delay="0.28s" color="darkgoldenrod">
      LOADING
    </MainLoaderText>
    <MainLoaderText transX="8px" delay="0.21s" color="darkolivegreen">
      LOADING
    </MainLoaderText>
    <MainLoaderText transX="6px" delay="0.14s" color="darksalmon">
      LOADING
    </MainLoaderText>
    <MainLoaderText transX="4px" delay="0.07s" color="cornflowerblue">
      LOADING
    </MainLoaderText>
    <MainLoaderText delay="0s" color="white">
      LOADING
    </MainLoaderText>
  </MainLoader>
  <Loader id="first_loader"></Loader>
  <Description>
    <p
      style={{
        fontSize: '20px',
        fontFamily: 'escore7',
        color: 'pink',
        textShadow: '2px 2px 4px black',
        textAlign: 'center',
      }}
    >
      버튼을 클릭하여 크롤링데이터를 불러오세요
    </p>
    <p style={{ fontSize: '10px', fontFamily: 'escore5', marginTop: '10px' }}>
      Image data from{'  '}
      <a href="https://wall.alphacoders.com/" target="_blank">
        alphacoders.com
      </a>
    </p>
  </Description>
  <ButtonContainer>
    <button id="cat_button">고양이(default)</button>
    <button id="dog_button">강아지</button>
  </ButtonContainer>
  <TextContainer id="myDiv" style={{ display: 'none' }}>
    {imgArr.map((item, i) => {
      return <img key={i} src={item.img}></img>
    })}
  </TextContainer>
</BackgroundContainer>

const [imgLoadToggle, setImgLoadToggle] = useState(false)
const [imgArr, setImgArr] = useState([])

const showFull = () => {
  document.getElementById('main_loader').style.display = 'none'
}

useEffect(() => {
  if (!imgLoadToggle) {
    crawling('cat')
    setImgLoadToggle(true)
    setTimeout(showFull, 3000)
  }
})

document.getElementById('cat_button').addEventListener('click', e => {
  e.stopImmediatePropagation()
  loadPage()
  crawling('cat')
})
document.getElementById('dog_button').addEventListener('click', e => {
  e.stopImmediatePropagation()
  loadPage()
  crawling('dog')
})

event.preventDefault()
// 현재 이벤트의 기본 동작을 중단합니다.

event.stopPropagation()
// 현재 이벤트가 상위로 전파되지 않도록 중단합니다.

event.stopImmediatePropagation()
// 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 합니다.

const loadPage = () => {
  document.getElementById('first_loader').style.display = 'block'
  document.getElementById('myDiv').style.display = 'none'
}
const showPage = () => {
  document.getElementById('first_loader').style.display = 'none'
  document.getElementById('myDiv').style.display = 'flex'
}

fetch(url)
  .then //...
  ()
  .then(json => {
    setImgArr(json)
    showPage()
  })

const customAni = keyframes`
0%, 100% {
  transform: translatey(0); 
 }
 50% {
  transform: translatey(20px);
 }
`

const MainLoaderText = styled.div`
  position: absolute;
  font-size: 32px;
  text-shadow: 2px 2px 4px black;
  font-family: escore9;
  color: ${props => {
    return props.color
  }};
  animation: ${customAni} 1.5s ease-in-out infinite;
  animation-delay: ${props => {
    return props.delay
  }};
  margin-left: ${props => {
    return props.transX
  }};
`

<MainLoaderText transX="12px" delay="0.35s" color="firebrick">
  LOADING
</MainLoaderText>

const spin = keyframes`
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
`

const Loader = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  animation: ${spin} 2s linear infinite;
`

<Loader id="first_loader"></Loader>

const positionbottom = keyframes`
  from{ margin-top:150px; opacity:0 } 
  to{ margin-top:100px; opacity:1 }
`

const TextContainer = styled.div`
  margin-top: 100px;
  width: 100vw;
  justify-content: center;
  flex-wrap: wrap;
  animation: ${positionbottom} 1s linear;
`

<TextContainer id="myDiv" style={{ display: 'none' }}>
  {imgArr.map((item, i) => {
    return <img key={i} src={item.img}></img>
  })}
</TextContainer>