♻️ 채팅 리스트 페이지 코드 리팩토링 (#255)

BookwooriAlpineClub · Jan 21, 2025 · 166a24a · 166a24a
1 parent 4f2ced4
commit 166a24a
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/src/pages/chatting/ChattingListPage.tsx b/src/pages/chatting/ChattingListPage.tsx
@@ -2,29 +2,33 @@ import styled from 'styled-components';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { ROUTE_PATH } from '@src/constants/routePath';
-import { useDm } from '@src/hooks/query/useDm';
+import { useGetMessageRoomList } from '@src/hooks/query/chat';
 import useEncodedNavigation from '@src/hooks/useEncodedNavigate';
 import { formatChatListItemTime } from '@src/utils/formatters';
 import StatusBadgeListItem from '@src/components/common/StatusBadgeListItem';
 import Header from '@src/components/common/Header';
 
 const ChattingListPage = () => {
+  const navigate = useEncodedNavigation();
   const { data, isFetchingNextPage, fetchNextPage, isLoading, hasNextPage } =
-    useDm();
+    useGetMessageRoomList();
   const { ref, inView } = useInView();
-  const navigate = useEncodedNavigation();
+
+  const handleNavigateChattingRoom = (memberId: number) => {
+    navigate(ROUTE_PATH.dmChat, memberId);
+  };
 
   useEffect(() => {
-    if (inView && !isLoading && hasNextPage) {
-      fetchNextPage();
-    }
-  }, [inView, isLoading, hasNextPage, fetchNextPage]);
+    if (!inView) return;
+
+    if (hasNextPage) fetchNextPage();
+  }, [inView, hasNextPage]);
 
   return (
     <>
       <Header text='문자' headerType='hamburger' />
       <Layout>
-        {data?.pages?.map((page) =>
+        {data?.map((page) =>
           page.messageRooms.map((it) => (
             <StatusBadgeListItem
               key={it.messageRoomId}
@@ -37,12 +41,12 @@ const ChattingListPage = () => {
                   : '알 수 없음'
               }
               message={it.recentMessage}
-              isRead={false}
-              onClick={() => navigate(ROUTE_PATH.dmChat, it.memberId)}
+              isRead
+              onClick={() => handleNavigateChattingRoom(it.memberId)}
             />
           )),
         )}
-        {!isLoading && data?.pages?.length === 0 && (
+        {!isLoading && data?.length === 0 && (
           <Wrapper>
             <Span>주고 받은 문자가 없습니다.</Span>
           </Wrapper>
@@ -63,7 +67,7 @@ export default ChattingListPage;
 const Layout = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 0.625rem;
+  gap: ${({ theme }) => theme.gap[10]};
 
   height: calc(100% - 4.375rem);
   padding: 0.9375rem;
@@ -76,6 +80,6 @@ const Wrapper = styled.div`
 `;
 const Span = styled.span`
   margin: auto;
-  ${({ theme }) => theme.fonts.body}
+
   color: ${({ theme }) => theme.colors.neutral400};
 `;