From 023723cef105ab0c1ae085088675baf799642b05 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, 23 Feb 2024 23:52:10 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=B9=9C=EA=B5=AC=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EC=88=98=EC=A0=95=20(#29)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 친구 목록 조회 API profileImage Enum 필드값 추가 대응

* fix: 친구목록 조회 무한 스크롤 수정

* fix: 친구 목록 조회 탭 삭제하기 CTA 버튼 분기처리
---
 src/components/organisms/FriendListItem.tsx   |  3 +-
 .../templates/FriendListTemplate.tsx          | 29 +++++++++++--------
 src/types/friendship/index.d.ts               |  3 ++
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/organisms/FriendListItem.tsx b/src/components/organisms/FriendListItem.tsx
index 852733c..7e39dc9 100644
--- a/src/components/organisms/FriendListItem.tsx
+++ b/src/components/organisms/FriendListItem.tsx
@@ -14,9 +14,8 @@ const FriendListItem: React.FC<{
   return (
     <div className="flex p-[16px] mb-[12px] justify-between items-center bg-white rounded-[12px]">
       <div className="flex items-center">
-        {/* TODO profile img ENUM res 데이터로 교체  */}
         <Image
-          src={returnProfileImg('GREEN')}
+          src={returnProfileImg(data.profileImage)}
           width={40}
           height={40}
           className="w-[40px] h-[40px] aspect-square"
diff --git a/src/components/templates/FriendListTemplate.tsx b/src/components/templates/FriendListTemplate.tsx
index 82a3bf2..a2918ab 100644
--- a/src/components/templates/FriendListTemplate.tsx
+++ b/src/components/templates/FriendListTemplate.tsx
@@ -37,7 +37,7 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({
   const [selectedFriendIds, setSelectedFriendIds] = useState<number[]>([]);
   const {
     data: friendsData,
-    fetchNextPage: friendsNextPage,
+    fetchNextPage: fetchFriendsNextPage,
     isFetchingNextPage: isFetchingfriendsNextPage,
     refetch: friendsRefetch,
   } = useGetFriendships({
@@ -53,7 +53,7 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({
 
   const onIntersect: IntersectionObserverCallback = ([entry]) => {
     if (entry.isIntersecting) {
-      void friendsNextPage();
+      void fetchFriendsNextPage();
     }
   };
 
@@ -116,18 +116,23 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({
             />
           )),
         )}
+        {isFetchingfriendsNextPage ? (
+          <SuspenseFallback />
+        ) : (
+          <div ref={bottom} />
+        )}
       </div>
 
-      {isFetchingfriendsNextPage ? <SuspenseFallback /> : <div ref={bottom} />}
-
-      <div className="fixed w-screen max-w-[480px] bottom-0 px-[20px] py-[26px]">
-        <Button
-          text={'삭제하기'}
-          className={`w-full ${selectedFriendIds.length === 0 ? 'bg-gray3 text-gray1' : 'bg-primary2 text-white'}`}
-          onClick={deleteOnOpen}
-          disabled={selectedFriendIds.length === 0}
-        />
-      </div>
+      {possibleDelete ? (
+        <div className="fixed w-screen max-w-[480px] bottom-0 px-[20px] py-[26px]">
+          <Button
+            text={'삭제하기'}
+            className={`w-full ${selectedFriendIds.length === 0 ? 'bg-gray3 text-gray1' : 'bg-primary2 text-white'}`}
+            onClick={deleteOnOpen}
+            disabled={selectedFriendIds.length === 0}
+          />
+        </div>
+      ) : null}
 
       <Modal
         onClose={deleteOnClose}
diff --git a/src/types/friendship/index.d.ts b/src/types/friendship/index.d.ts
index da634f8..e86ba8a 100644
--- a/src/types/friendship/index.d.ts
+++ b/src/types/friendship/index.d.ts
@@ -1,7 +1,10 @@
+import type { ProfileEnum } from '../common';
+
 export interface FriendshipData {
   userId: number;
   nickname: string;
   ingredientCount: number;
+  profileImage: ProfileEnum;
 }
 
 export type FriendshipSortType = 'nickname' | 'createdAt';