Next Loading UI 구현하기

 

 

svg 애니메이션과 사용자 경험을 끌어올릴 수 있는 로딩 애니메이션을 구현했습니다.

LoadingBouce 컴포넌트 📖

const LoadingBounce = () => (
  <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-backgroundGradient">
    <svg
      {...}
      className="animate-bounceLoading"
    >
      <path
        {...}
      />
    </svg>
    <div className="mt-4 text-lg leading-[27px] text-secondary-900">모아가 여행을 준비중이에요</div>
  </div>
);

export default LoadingBounce;

 

 

아래 스타일을 사용해 고정 위치를 설정해 화면 가운데 UI가 보이게 했습니다.

className="fixed inset-0 z-50"

 

 

`animate-bounceLoading`클래스는 애니메이션 속성을 부여해 svg가 자연스럽게 반응하도록 했습니다.

animate-bounceLoading

 

 

LoadingBouce 컴포넌트 재사용 📖

Loading UI는 다양한 페이지에서 재사용될 수 있도록 `Loading`컴포넌트를 별도로 생성했습니다. 

// app/loading.tsx
import LoadingBounce from '@/components/common/Loading/Loading';

const Loading = () => {
  return <LoadingBounce />;
};

export default Loading;

 

결과 화면 📖

 

회고 🧐

next에서 사용자 경험 제공을 위한 로딩 애니메이션 UI를 구현해 사용자 경험이 한층 더 향상했습니다.