fix: 친구 목록 프로필 이미지 적용, isFetchingNextPage 에 따라 로딩스피너 추가

DDD-Community · Feb 22, 2024 · afc8dd4 · afc8dd4
1 parent 6d58d81
commit afc8dd4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/src/components/organisms/FriendListItem.tsx b/src/components/organisms/FriendListItem.tsx
@@ -1,24 +1,37 @@
 import { AngleIcon } from '@/assets/icons';
+import { type ProfileEnum } from '@/types/common';
+import { returnProfileImg } from '@/utils/returnProfileImg';
+import Image from 'next/image';
 import React from 'react';
 
-const FriendListItem: React.FC<{ name: string; count: number }> = ({
-  name,
-  count,
-}) => {
+const FriendListItem: React.FC<{
+  name: string;
+  count: number;
+  profileEnum: ProfileEnum;
+}> = ({ name, count, profileEnum }) => {
   return (
     <div className="flex p-[16px] mb-[12px] justify-between items-center bg-white rounded-[12px]">
-      <div className="flex">
-        <div className="w-10 h-10 aspect-square rounded-full bg-gray3" />
+      <div className="flex items-center">
+        <Image
+          src={returnProfileImg(profileEnum)}
+          width={40}
+          height={40}
+          className="w-[40px] h-[40px] aspect-square"
+          alt="친구 프로필"
+        />
         <div className="ml-[16px]">
           <p className="mb-[4px] heading4-semibold text-gray7">{name}</p>
-          <p className="body2-medium text-gray5">{count}</p>
+          <p className="body2-medium text-gray5">
+            냉장고 식자재 목록 {count}개
+          </p>
         </div>
       </div>
       <AngleIcon
         width={16}
         height={16}
         fill="#CCCFD7"
         transform="rotate(180)"
+        className="z-0"
       />
     </div>
   );

diff --git a/src/components/templates/FriendListTemplate.tsx b/src/components/templates/FriendListTemplate.tsx
@@ -24,15 +24,17 @@ const FriendListTemplate: React.FC = () => {
   const bottom = useRef<HTMLDivElement>(null);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [curSortType, setCurSortType] = useState<SortLabel>(SORT_TYPES[0]);
-  const { data: friendsData, fetchNextPage: friendsNextPage } =
-    useGetFriendships({
-      sort: curSortType.value as FriendshipSortType,
-    });
+  const {
+    data: friendsData,
+    fetchNextPage: friendsNextPage,
+    isFetchingNextPage: isFetchingfriendsNextPage,
+  } = useGetFriendships({
+    sort: curSortType.value as FriendshipSortType,
+  });
 
   const onIntersect: IntersectionObserverCallback = ([entry]) => {
     if (entry.isIntersecting) {
       void friendsNextPage();
-      console.log('next gogo');
     }
   };
 
@@ -47,7 +49,7 @@ const FriendListTemplate: React.FC = () => {
 
   return (
     <div className="h-screen flex flex-col">
-      <div className="mt-[57px] fixed w-screen max-w-[480px]">
+      <div className="mt-[57px] fixed w-screen max-w-[480px] z-10">
         <div className="h-[1px] mt-[-1px] bg-gray1" />
         <div className="flex justify-between px-[20px] py-[18px] bg-white body1-medium">
           <p className="body1-medium">
@@ -57,18 +59,20 @@ const FriendListTemplate: React.FC = () => {
         </div>
       </div>
 
-      <div className="flex flex-1 overflow-y-auto pt-[128px] px-[20px]">
+      <div className="flex flex-col flex-1 overflow-y-auto pt-[128px] px-[20px]">
         {friendsData.pages.map((page) =>
           page.content.map((ele: FriendshipData) => (
             <FriendListItem
               key={ele.userId}
-              name={ele.nickName}
+              name={ele.nickname}
               count={ele.ingredientCount}
+              // TODO profileEnum api res 필드값으로 대체
+              profileEnum={'GREEN'}
             />
           )),
         )}
       </div>
-      <div ref={bottom} />
+      {isFetchingfriendsNextPage ? <SuspenseFallback /> : <div ref={bottom} />}
 
       <Modal
         onClose={onClose}

diff --git a/src/types/friendship/index.d.ts b/src/types/friendship/index.d.ts
@@ -1,6 +1,6 @@
 export interface FriendshipData {
   userId: number;
-  nickName: string;
+  nickname: string;
   ingredientCount: number;
 }