[Next]Slide-Images 커스텀 컴포넌트- (React, typescript)

 

오늘은 리액트 기반 next 프레임워크를 이용해서 slide-images 컴포넌트를 만들어 보겠습니다.

매번 라이브러리 찾고 사용법 찾느라 지쳐서 만들게 되었습니다. ㅎㅎ

 

 

Main code

---

import { useState } from 'react';
import Image from 'next/image';

import style from '../styles/slideImage.module.scss';
import { fakeSlideImage } from '../fakeData';
import  right  from '../public/images/right.png';
import  left  from '../public/images/left.png';



export default function SlideImage({ size }: { size: number }) {
    const [location, setlocation] = useState(0);

    const images = fakeSlideImage;

    const onMove = (i: number) => {
        if (images.length <= i) {
            setlocation(0);
            return;
        }
        if (i < 0) {
            setlocation(images.length - 1);
            return;
        }
        setlocation(i);
    }

    return (
        <div className={style.slideContainer} style={{ width: `${size.toString()}px` }}>
            <div 
                className={style.slideList}
                style={{
                    transform: `translate3d(
                        ${location * -size}px, 0px, 0px
                    )`,
                    width: `${(size * images.length).toString()}px`
                }}
            >
                {images.map((image, i) => (
                    <div className={style.slide} style={{ width: `${size.toString()}px` }}>
                        <Image
                            key={i}
                            className={style.image}
                            src={image}
                            width={size}
                            height={size}
                        />
                    </div>
                ))}
                
            </div>
            <div className={style.slideButton} style={{ width: `${size.toString()}px`, bottom: `${(size * 0.6).toString()}px`}}>
                    <button 
                        onClick={() => onMove(location - 1)}
                        className={style.btn}
                    >
                        <Image src={left} width={20} height={20}/>
                    </button>
                    <button 
                        className={style.btn} 
                        onClick={() => onMove(location + 1)}
                    >
                        <Image src={right} width={20} height={20}/>
                    </button>
                </div>
        </div>
    )
}

Props에 size를 받아서 size에 따라서 크기 조절을 할 수 있게 만들어 보았습니다.

 

Style code

---

.slideContainer {
  overflow-x: hidden;

  .slideList {
    transition: all 300ms ease 0s;

    .slide {
      display: table;
      float: left;
    }

    &:hover {
      opacity: 0.5;
    }
  }

  .slideButton {
    display: flex;
    justify-content: space-between;
    position: relative;

    .btn {
      border: none;
      background: none;
      cursor: pointer;
      position: relative;
      opacity: 0.4;
    }
  }
}

transition을 사용해서 slideList가 부드럽게 움직이는 게 만들어 보았습니다.

 

 

 

 - 깃 헙 링크: https://github.com/jaehunkim0828/custom-components/tree/master/slide-images

 참고: https://im-developer.tistory.com/97