TIL: 크로셀 구현 - 220611

앞으로의 과제

• 숫자 콤마 찍기
• 여백 조절

Keyword

CSS

button 태그는 flex, grid 등을 사용할 수 없다

크로셀

inline style을 사용하고 싶지 않았는데
안쓰자니 코드 길이가 너무 길어진다
다음엔 라이브러리를 고려해보는 것도 좋을듯

import styles from './billboard.module.scss'

import { useEffect, useState } from 'react'

import coin1 from 'assets/imgs/coin1.jpg'
import coin2 from 'assets/imgs/coin2.jpg'
import coin3 from 'assets/imgs/coin3.jpg'

const menuList = [1, 2, 3]

interface IIMAGES {
  [key: string]: string
}

let setSliding: NodeJS.Timer
const Billboard = () => {
  const IMAGES: IIMAGES = {
    coin1,
    coin2,
    coin3,
  }

  const [clicked, setClicked] = useState(0)
  const menuSliding = () => {
    setClicked((prev) => {
      if (prev === menuList.length - 1) return 0
      return prev + 1
    })
  }

  const buttonSlidingClick = () => {
    clearInterval(setSliding)
    menuSliding()
    setSliding = setInterval(menuSliding, 1700)
  }

  useEffect(() => {
    setSliding = setInterval(menuSliding, 1700)
    return () => clearInterval(setSliding)
  }, [])

  return (
    <div className={styles.view}>
      <ul
        className={styles.menuListContainer}
        style={{ transform: `translateY(${-180 * clicked}px)`, transition: '0.7s' }}
      >
        {menuList.map((item, idx) => {
          const tag = `coin${idx + 1}`
          return (
            <li className={styles.menuList} key={item}>
              <button type='button' onClick={buttonSlidingClick}>
                {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
                <img className={styles.viewImage} src={IMAGES[tag]} alt={`coin image ${idx + 1}`} />
              </button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default Billboard

모든 일에는 이유가 있다

세상은 언제나 나를 더 좋은 곳으로 이끈다

당장은 굴곡진 삶을 살고 있다고 생각하지만
훗날 돌아보면 그래도 잘 왔다고 느끼게 된다