From 9c299fc9b621619c5cef34de53bd9259edfe33d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=95=9C=ED=98=9C=EC=84=A0?= <hyeseon405@gmail.com>
Date: Fri, 1 Mar 2024 21:41:46 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20loading=EC=8B=9C=20SuspenseFallback?=
 =?UTF-8?q?=20component=20->=20Lottie=EB=A1=9C=20=EC=88=98=EC=A0=95=20(#38?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/templates/FriendListTemplate.tsx | 7 +++----
 src/pages/mypage/share/index.tsx                | 5 ++---
 src/pages/share/index.tsx                       | 9 ++++++---
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/templates/FriendListTemplate.tsx b/src/components/templates/FriendListTemplate.tsx
index 62b7607..0b3f52c 100644
--- a/src/components/templates/FriendListTemplate.tsx
+++ b/src/components/templates/FriendListTemplate.tsx
@@ -2,11 +2,10 @@ import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@ch
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { type SortLabel } from '@/types/common';
-import { Button, RadioButtonField, SortButton } from '@/components/atoms';
+import { Button, Lottie, RadioButtonField, SortButton } from '@/components/atoms';
 import { FriendListItem } from '../organisms';
 import { useDeleteFriendship, useGetFriendships } from '@/hooks/queries/friendship';
 import type { FriendshipData, FriendshipSortType } from '@/types/friendship';
-import { SuspenseFallback } from '.';
 import { useObserver } from '@/hooks/useObserver';
 
 export const SORT_TYPES: SortLabel[] = [
@@ -72,7 +71,7 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({ possibleDel
   }, [possibleDelete]);
 
   if (!friendsData?.pages[0].content) {
-    return <SuspenseFallback />;
+    return <Lottie />;
   }
 
   return (
@@ -99,7 +98,7 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({ possibleDel
             />
           )),
         )}
-        {isFetchingfriendsNextPage ? <SuspenseFallback /> : <div ref={bottom} />}
+        {isFetchingfriendsNextPage ? <Lottie /> : <div ref={bottom} />}
       </div>
 
       {possibleDelete ? (
diff --git a/src/pages/mypage/share/index.tsx b/src/pages/mypage/share/index.tsx
index 9fba3c6..1398c63 100644
--- a/src/pages/mypage/share/index.tsx
+++ b/src/pages/mypage/share/index.tsx
@@ -1,5 +1,5 @@
 import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
-import { RadioButtonField, SortButton, TabButton } from '@/components/atoms';
+import { Lottie, RadioButtonField, SortButton, TabButton } from '@/components/atoms';
 import type { ShareStatusType } from '@/types/friendship';
 import type { SortLabel, TabLabel } from '@/types/common';
 import { useRef, useState } from 'react';
@@ -8,7 +8,6 @@ import Header from '@/components/organisms/Header';
 import type { NextPage } from 'next';
 import { type ShareData } from '@/types/share';
 import ShareListItem from '@/components/organisms/ShareListItem';
-import { SuspenseFallback } from '@/components/templates';
 import { useObserver } from '@/hooks/useObserver';
 import { useGetMyShares } from '@/hooks/queries/mypage';
 import type { MySharesSortType } from '@/types/mypage';
@@ -73,7 +72,7 @@ const MySharePage: NextPage = () => {
           {data?.pages.map((page) =>
             page.content.map((ele: ShareData) => <ShareListItem key={ele.shareId} data={ele} />),
           )}
-          {isFetchingNextPage ? <SuspenseFallback /> : <div ref={bottom} />}
+          {isFetchingNextPage ? <Lottie /> : <div ref={bottom} />}
         </div>
         <Modal onClose={onClose} isOpen={isOpen} motionPreset="slideInBottom" trapFocus={false}>
           <ModalOverlay height="100vh" onClick={onClose} />
diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx
index b26d6ba..6d77fcb 100644
--- a/src/pages/share/index.tsx
+++ b/src/pages/share/index.tsx
@@ -1,5 +1,5 @@
 import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
-import { RadioButtonField, SortButton, TabButton } from '@/components/atoms';
+import { Lottie, RadioButtonField, SortButton, TabButton } from '@/components/atoms';
 import type { ShareSortType, ShareStatusType } from '@/types/friendship';
 import type { SortLabel, TabLabel } from '@/types/common';
 import { useRef, useState } from 'react';
@@ -10,7 +10,6 @@ import type { NextPage } from 'next';
 import { PlusIcon } from '@/assets/icons';
 import { type ShareData } from '@/types/share';
 import ShareListItem from '@/components/organisms/ShareListItem';
-import { SuspenseFallback } from '@/components/templates';
 import { useGetShares } from '@/hooks/queries/share';
 import { useObserver } from '@/hooks/useObserver';
 
@@ -46,6 +45,10 @@ const SharePage: NextPage = () => {
     onIntersect,
   });
 
+  if (!data?.pages[0].content) {
+    return <Lottie />;
+  }
+
   return (
     <>
       <div className={'pt-[52px] min-h-screen'}>
@@ -74,7 +77,7 @@ const SharePage: NextPage = () => {
           {data?.pages.map((page) =>
             page.content.map((ele: ShareData) => <ShareListItem key={ele.shareId} data={ele} />),
           )}
-          {isFetchingNextPage ? <SuspenseFallback /> : <div ref={bottom} />}
+          {isFetchingNextPage ? <Lottie /> : <div ref={bottom} />}
         </div>
 
         <div className="flex justify-end pr-[20px]">