fix: 친구목록 조회 수정 (#29)

* feat: 친구 목록 조회 API profileImage Enum 필드값 추가 대응 * fix: 친구목록 조회 무한 스크롤 수정 * fix: 친구 목록 조회 탭 삭제하기 CTA 버튼 분기처리
DDD-Community · Feb 23, 2024 · 023723c · 023723c
1 parent f588dd2
commit 023723c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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';