IceCraft - skeleton라이브러리 추가하기

 

[Refactor #285] - 메인페이지 리팩토링, skeleton라이브러리 추가 by seokachu · Pull Request #289 · ice-craft/ice

 

 

데이터 로딩중 스켈레톤 모션을 보여주고 싶어서 스켈레톤 라이브러리를 사용하게 되었다.

그냥 구현해도 되지만 여러페이지에 모션을 추가하려고 생각하니 라이브러리를 쓰는게 더 효율적이라고 생각되서 채택하게 되었다.

팀원분들의 요청으로 + loading 애니메이션을 추가했다.

 

스켈레톤 라이브러리의 장점은

기존 css스타일을 그대로 유지하고 새로 스타일을 작성할 필요가 없어

편리하고 빠르게 작업할 수 있다는 장점이 있고
추후 페이지에 스켈레톤 라이브러리를 사용하여 추가하면 좋을 것 같았다.

 

 

 

 

스켈레톤 라이브러리 공식문서

react-loading-skeleton

 

 

 

 

사용방법

yarn add react-loading-skeleton
npm install react-loading-skeleton

 

 

 

 

필요한 스켈레톤 영역에 Skeleton 태그를 불러오면 된다.
세부적으로 width, height를 조절하고 싶으면 공식문서 따라 조절이 가능하다.

<div className={S.MainGnb}>
    <p>
    <Skeleton width={200} height={40} />
    </p>
    <div className={S.roomSearchAndButton}>
        <Skeleton width={350} height={40} />
        <div className={S.gameGoButton}>
        <Skeleton width={100} height={40} />
        <div className={S.makeRoomButton}>
        <Skeleton width={100} height={40} />
    </div>
</div>

 

 

 

 

 

 

결과물

 

라이브러리를 적용하니 간단하게 구현을 완료하였다.