From e6815e0885f47ac97936dce77fc770c15d5708b8 Mon Sep 17 00:00:00 2001
From: jaewoongs <dbswodnd5428@gmail.com>
Date: Sat, 22 Jun 2024 14:34:31 +0900
Subject: [PATCH] =?UTF-8?q?fix,=20=EB=A1=9C=EB=94=A9=EC=9D=B4=20=EA=B3=84?=
 =?UTF-8?q?=EC=86=8D=20=EB=96=A0=20=EC=9E=88=EB=8A=94=20=EB=B2=84=EA=B7=B8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/templates/TeamRecommend.tsx    | 20 ++++++++++---------
 .../templates/TeamRecommend/UserCardList.tsx  |  4 +++-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/templates/TeamRecommend.tsx b/src/components/templates/TeamRecommend.tsx
index 3cf39191..539143fd 100644
--- a/src/components/templates/TeamRecommend.tsx
+++ b/src/components/templates/TeamRecommend.tsx
@@ -5,7 +5,6 @@ import { useCallback, useState } from 'react';
 import { RecommendUserQueryOptions, useRecommendUserQuery } from '#/hooks/use-recommend';
 import { RecommendFilter } from './TeamRecommend/RecommendFilter';
 import { UserCardList } from './TeamRecommend/UserCardList';
-import { Loading } from '../atoms';
 
 export const TeamRecommend = () => {
   const [options, setOptions] = useState<RecommendUserQueryOptions>({
@@ -17,6 +16,7 @@ export const TeamRecommend = () => {
     mutate: mutateCachedUsers,
     isValidating,
     setSize,
+    isLoading,
   } = useRecommendUserQuery(options);
 
   const queryTrigger = useCallback(() => setSize((s) => s + 1), [setSize]);
@@ -46,17 +46,19 @@ export const TeamRecommend = () => {
     [mutateCachedUsers, users]
   );
 
-  if (!users) return <Loading />;
   return (
     <>
       <RecommendFilter defaultOptions={options} trigger={setOptions} />
-      <UserCardList
-        users={users?.flat()}
-        isLoadingUsers={isValidating}
-        hasNext={users[users.length - 1].length > 0}
-        queryTrigger={queryTrigger}
-        mutateCachedLike={mutateCachedLike}
-      />
+      {users && (
+        <UserCardList
+          users={users?.flat()}
+          isLoadingUsers={isValidating}
+          hasNext={users[users.length - 1].length > 0}
+          queryTrigger={queryTrigger}
+          mutateCachedLike={mutateCachedLike}
+          isLoading={isLoading}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/templates/TeamRecommend/UserCardList.tsx b/src/components/templates/TeamRecommend/UserCardList.tsx
index 73ebba93..7ce8bcf3 100644
--- a/src/components/templates/TeamRecommend/UserCardList.tsx
+++ b/src/components/templates/TeamRecommend/UserCardList.tsx
@@ -26,6 +26,7 @@ interface UserCardListProps {
     isLiked: boolean | Promise<boolean>,
     optimisticIsLiked: boolean
   ) => void;
+  isLoading: boolean;
 }
 
 export const UserCardList = ({
@@ -34,6 +35,7 @@ export const UserCardList = ({
   hasNext,
   queryTrigger,
   mutateCachedLike,
+  isLoading,
 }: UserCardListProps) => {
   const observerRef = useRef<HTMLDivElement>(null);
 
@@ -74,7 +76,7 @@ export const UserCardList = ({
             mutateCachedLike={mutateCachedLike}
           />
         ))}
-        {hasNext && <Loading ref={observerRef} />}
+        {isLoading && <Loading ref={observerRef} />}
       </GridBlock>
     </>
   );