fix : 로그인 직후 친구 목록 반영 안 되는 문제 + 즐겨찾기 시 즐겨찾기 목록, 친구 목록 중복 현상

src/apis/getFriendList.ts

@@ -1,15 +1,10 @@
 import { customedAxios } from './customedAxios';
 import api from '../service/TokenService';
 
-const accessToken = api.getAccessToken();
-
-export const getFriendList = async (data: FriendListReq): Promise<FriendListRes> => {
+export const getFriendList = async (): Promise<FriendListRes> => {
   const res = await customedAxios.get('/members/friends', {
-    params: {
-      page: data.page,
-    },
     headers: {
-      Authorization: `Bearer ${accessToken}`,
+      Authorization: `Bearer ${api.getAccessToken()}`,
     },
   });
   return res.data;

src/apis/postLike.ts

@@ -1,8 +1,6 @@
 import { customedAxios } from './customedAxios';
 import api from '../service/TokenService';
 
-const accessToken = api.getAccessToken();
-
 export const postLike = async (data: PostLikeReq): Promise<PostLikeRes> => {
   const res = await customedAxios.post(
     `/members/friends/${data.friendId}/likes`,
@@ -12,9 +10,9 @@ export const postLike = async (data: PostLikeReq): Promise<PostLikeRes> => {
         isLiked: data.isLiked,
       },
       headers: {
-        Authorization: `Bearer ${accessToken}`,
+        Authorization: `Bearer ${api.getAccessToken()}`,
       },
     }
   );
-  return res.data;
+  return { status: res.status };
 };

src/components/Friend/UserFriend/UserFriend.style.ts

@@ -6,6 +6,7 @@ export const FriendContainer = styled.div`
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
+  cursor: pointer;
 
   // 스크롤 바 안 생기게
   -ms-overflow-style: none;

src/components/Friend/UserFriend/UserFriend.tsx

@@ -10,7 +10,6 @@ import { postLike } from '../../../apis/postLike';
 const UserFriend = () => {
   const [friendList, setFriendList] = useState<Friend[]>([]);
   const [favoriteFriendList, setFavoriteFriendList] = useState<Friend[]>([]);
-  const currentPage = 0; // <------------------ 페이징 처리 위한 임시 변수
   const [trigger, setTrigger] = useState(false); // 트리거 상태 추가
 
   const onLikeToggle = async (friendId: number, isLiked: boolean) => {
@@ -20,28 +19,31 @@ const UserFriend = () => {
     };
 
     try {
-      await postLike(params);
-      setTrigger((prevTrigger) => !prevTrigger);
+      const response = await postLike(params);
+      if (response.status === 200) {
+        setTrigger((prevTrigger) => !prevTrigger);
+      } else {
+        console.error('postLike 요청이 실패했습니다.');
+      }
     } catch (error) {
-      console.error('즐겨찾기 실패:', error);
+      console.error('postLike 요청이 실패했습니다:', error);
     }
   };
 
   useEffect(() => {
     const fetchFriendList = async () => {
       try {
-        const params = { page: currentPage };
-        const data = await getFriendList(params);
+        const data = await getFriendList();
         setFriendList(data.friends);
         const favoriteFriends = data.friends.filter((friend: Friend) => friend.isStarred);
-        setFavoriteFriendList(favoriteFriends); // 기존 목록에 새로운 목록 추가
+        setFavoriteFriendList(favoriteFriends);
       } catch (error) {
         console.error('친구 목록 가져오기 실패:', error);
       }
     };
 
     fetchFriendList();
-  }, [currentPage, trigger]);
+  }, [trigger]);
 
   return (
     <FriendContainer>
@@ -50,7 +52,11 @@ const UserFriend = () => {
         friends={favoriteFriendList}
         onLikeToggle={onLikeToggle}
       />
-      <FriendList sum={friendList.length} friends={friendList} onLikeToggle={onLikeToggle} />
+      <FriendList
+        sum={friendList.length - favoriteFriendList.length}
+        friends={friendList.filter((friend) => !favoriteFriendList.includes(friend))}
+        onLikeToggle={onLikeToggle}
+      />
     </FriendContainer>
   );
 };

src/types/Friend.ts

@@ -17,17 +17,12 @@ interface Friend {
   onLikeToggle: (friendId: number, isLiked: boolean) => void;
 }
 
-interface FriendListReq {
-  page: number;
-}
-
 interface PostLikeReq {
   friendId: number;
   isLiked: boolean;
 }
 interface PostLikeRes {
   status: number;
-  message: string;
 }
 
 interface FriendDetail {