From e82971e95e3907454f32a84d80177c8a033401cf Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Wed, 28 Feb 2024 05:24:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A4=91?=
 =?UTF-8?q?=20=EB=A1=9C=ED=8B=B0=20=EC=95=84=ED=86=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atoms/Lottie.tsx          | 10 +++++++++-
 src/components/organisms/FridgeBoard.tsx |  9 ++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/atoms/Lottie.tsx b/src/components/atoms/Lottie.tsx
index cc1d35c..68ea74f 100644
--- a/src/components/atoms/Lottie.tsx
+++ b/src/components/atoms/Lottie.tsx
@@ -3,7 +3,15 @@ import animationData from './../../assets/lottie.webp';
 import Image from 'next/image';
 
 const LottieComponent = () => {
-  return <Image src={animationData} alt="로딩중" width={167} height={156} />;
+  return (
+    <Image
+      className="m-auto"
+      src={animationData}
+      alt="로딩중"
+      width={167}
+      height={156}
+    />
+  );
 };
 
 export default LottieComponent;
diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx
index 7a5200e..9813274 100644
--- a/src/components/organisms/FridgeBoard.tsx
+++ b/src/components/organisms/FridgeBoard.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Container } from '@/components/atoms';
+import { Container, Lottie } from '@/components/atoms';
 import { EmptyBox, FridgeTab, IngredientItemBox } from '@/components/molecules';
 import { IngredientModal } from '.';
 import {
@@ -11,7 +11,6 @@ import {
 } from '@chakra-ui/react';
 import { useGetFridgeContentById } from '@/hooks/queries/fridge';
 import { useObserver } from '@/hooks/useObserver';
-import { SuspenseFallback } from '../templates';
 import { useRouter } from 'next/router';
 
 const FridgeBoard: React.FC = () => {
@@ -109,11 +108,7 @@ const FridgeBoard: React.FC = () => {
               </div>
             ),
           )}
-          {isFetchingIngredientNextPage ? (
-            <SuspenseFallback />
-          ) : (
-            <div ref={bottom} />
-          )}
+          {isFetchingIngredientNextPage ? <Lottie /> : <div ref={bottom} />}
         </div>
       </Container>
     </>