Merge branch 'dev' into feat/#334-redirect

src/api/chat/getPersonalChatRoomExisted.ts

@@ -9,7 +9,7 @@ export const getPersonalChatRoomExisted = async ({
   receiverId,
 }: GetPersonalChatRoomExistedRequest) => {
   const { data } = await axiosInstance.get<GetPersonalChatRoomExistedResponse>(
-    '/rooms/personal/existed',
+    '/rooms/personal',
     { params: { receiver: receiverId } }
   );
 

src/hooks/useChatOnButtonClick.ts

@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import SockJS from 'sockjs-client';
 import Stomp from 'stompjs';
 
-import { getAllChatRoomList } from '@api/chat/getAllChatRoomList';
 import { getPersonalChatRoomExisted } from '@api/chat/getPersonalChatRoomExisted';
 
 import {
@@ -19,7 +19,6 @@ import { Member } from '@type/models';
 import { ChatMessage } from '@type/models/ChatMessage';
 import { ChatRoom } from '@type/models/ChatRoom';
 
-import { CHAT_ROOM_TAB_TITLE } from '@consts/chatRoomTabTitle';
 import { PATH_NAME } from '@consts/pathName';
 
 type useChatOnButtonClickProps = {
@@ -31,7 +30,6 @@ type useChatOnButtonClickProps = {
 
 export const useChatOnButtonClick = ({
   targetId,
-  targetNickname,
   myId = null,
   navigate: moveToPage,
 }: useChatOnButtonClickProps) => {
@@ -41,60 +39,38 @@ export const useChatOnButtonClick = ({
     enabled: false,
   });
 
-  const { refetch: fetchAllChatRoomList } = useQuery({
-    queryKey: ['all-chat-room-list', CHAT_ROOM_TAB_TITLE.INDIVIDUAL],
-    queryFn: () => getAllChatRoomList({ type: CHAT_ROOM_TAB_TITLE.INDIVIDUAL }),
-    enabled: false,
-  });
-
   const { mutateAsync } = useCreatePersonalChatRoomMutation();
 
-  const handleExistingRoom = async (
-    individualRooms: ChatRoom[],
-    isSenderActive: boolean
-  ) => {
-    const { id: roomId } =
-      individualRooms.find(
-        ({ roomName }: { roomName: string }) => roomName === targetNickname
-      ) || {};
-    if (!roomId) {
-      return;
-    }
-
-    if (isSenderActive) {
-      moveToPage(PATH_NAME.GET_CHAT_PATH(String(roomId)));
-    } else {
-      const sock = new SockJS(stompConfig.webSocketEndpoint);
-      const stompClient = Stomp.over(sock);
-
-      connect({
-        stompClient,
-        connectEvent: () => {
-          subscribe({
-            stompClient,
-            roomId,
-            subscribeEvent: (received: ChatMessage) => {
-              const {
-                type,
-                sender: { id: senderId },
-              } = received;
-
-              if (type === '입장' && senderId === myId) {
-                moveToPage(PATH_NAME.GET_CHAT_PATH(String(received.roomId)));
-                sock.close();
-              }
-            },
-          });
-
-          const sendData: SendMessageRequest = {
-            senderId: myId!,
-            content: null,
-          };
-
-          enter({ stompClient, roomId, sendData });
-        },
-      });
-    }
+  const enterChatRoom = async (roomId: ChatRoom['id']) => {
+    const sock = new SockJS(stompConfig.webSocketEndpoint);
+    const stompClient = Stomp.over(sock);
+
+    connect({
+      stompClient,
+      connectEvent: () => {
+        subscribe({
+          stompClient,
+          roomId,
+          subscribeEvent: (received: ChatMessage) => {
+            const {
+              type,
+              sender: { id: senderId },
+            } = received;
+
+            if (type === '입장' && senderId === myId) {
+              sock.close();
+            }
+          },
+        });
+
+        const sendData: SendMessageRequest = {
+          senderId: myId!,
+          content: null,
+        };
+
+        enter({ stompClient, roomId, sendData });
+      },
+    });
   };
 
   const handleClickChattingButton = async () => {
@@ -103,21 +79,24 @@ export const useChatOnButtonClick = ({
       return;
     }
 
-    const { data } = await fetchPersonalChatRoomExisted();
-    if (!data) return;
+    const { data, error } = await fetchPersonalChatRoomExisted();
 
-    const { isRoomExisted, isSenderActive } = data;
+    if (data) {
+      const { roomId } = data;
+
+      await enterChatRoom(roomId);
 
-    if (isRoomExisted) {
-      const { data: individualRooms } = await fetchAllChatRoomList();
-      if (individualRooms) {
-        handleExistingRoom(individualRooms, isSenderActive);
-      }
-    } else {
-      const { id: roomId } = await mutateAsync({
-        receiverId: targetId,
-      });
       moveToPage(PATH_NAME.GET_CHAT_PATH(String(roomId)));
+    } else {
+      if (error instanceof AxiosError) {
+        if (error.response?.data.code === 'CHT-003') {
+          const { id: roomId } = await mutateAsync({
+            receiverId: targetId,
+          });
+
+          moveToPage(PATH_NAME.GET_CHAT_PATH(String(roomId)));
+        }
+      }
     }
   };
 

src/pages/ChatRoomListPage/ChatRoomList.tsx

@@ -0,0 +1,37 @@
+import { Flex } from '@components/shared/Flex';
+
+import { theme } from '@styles/theme.ts';
+
+import { ChatRoom } from '@type/models/ChatRoom.ts';
+
+import { PATH_NAME } from '@consts/pathName.ts';
+
+import { ChatRoomItem } from './ChatRoomItem.tsx';
+import { InformText } from './ChatRoomListPage.style.ts';
+import { useChatRoomList } from './useChatRoomList.ts';
+
+export const ChatRoomList = () => {
+  const { selectedTabChatRoomList, moveToPage } = useChatRoomList();
+
+  return (
+    <>
+      {selectedTabChatRoomList.length !== 0 ? (
+        selectedTabChatRoomList.map((chatRoomItem: ChatRoom) => (
+          <ChatRoomItem
+            chatRoomItem={chatRoomItem}
+            key={chatRoomItem.id}
+            onClickChatRoomItem={() =>
+              moveToPage(PATH_NAME.GET_CHAT_PATH(String(chatRoomItem.id)))
+            }
+          />
+        ))
+      ) : (
+        <Flex justify="center" gap={16}>
+          <InformText size={theme.FONT_SIZE.XS} weight={300}>
+            채팅 내역이 없습니다.
+          </InformText>
+        </Flex>
+      )}
+    </>
+  );
+};

src/pages/ChatRoomListPage/ChatRoomListPage.tsx

@@ -1,26 +1,22 @@
-import { Header } from '@components/Header';
-import { Flex } from '@components/shared/Flex';
+import { Suspense } from 'react';
 
-import { theme } from '@styles/theme.ts';
+import { Header } from '@components/Header';
 
-import { ChatRoom } from '@type/models/ChatRoom.ts';
+import { useChatRoomTabStore } from '@stores/chatRoomTab.store.ts';
 
 import { CHAT_ROOM_TAB_TITLE } from '@consts/chatRoomTabTitle.ts';
-import { PATH_NAME } from '@consts/pathName.ts';
 
-import { ChatRoomItem } from './ChatRoomItem.tsx';
+import { ChatRoomList } from './ChatRoomList.tsx';
 import {
-  InformText,
   Main,
   MessagePageContainer,
   TabBar,
   TabBarButton,
 } from './ChatRoomListPage.style.ts';
-import { useChatRoomListPage } from './useChatRoomListPage.ts';
+import { SkeletonChatRoomList } from './SkeletonChatRoomList.tsx';
 
 export const ChatRoomListPage = () => {
-  const { selectedTabChatRoomList, chatRoomTab, moveToPage, handleClickTab } =
-    useChatRoomListPage();
+  const { chatRoomTab, setChatRoomTab } = useChatRoomTabStore();
 
   return (
     <MessagePageContainer>
@@ -29,31 +25,17 @@ export const ChatRoomListPage = () => {
         <TabBar>
           {Object.values(CHAT_ROOM_TAB_TITLE).map((tab) => (
             <TabBarButton
-              onClick={() => handleClickTab(tab)}
+              onClick={() => setChatRoomTab(tab)}
               isSelected={chatRoomTab === tab}
               key={tab}
             >
               {tab}
             </TabBarButton>
           ))}
         </TabBar>
-        {selectedTabChatRoomList.length !== 0 ? (
-          selectedTabChatRoomList.map((chatRoomItem: ChatRoom) => (
-            <ChatRoomItem
-              chatRoomItem={chatRoomItem}
-              key={chatRoomItem.id}
-              onClickChatRoomItem={() =>
-                moveToPage(PATH_NAME.GET_CHAT_PATH(String(chatRoomItem.id)))
-              }
-            />
-          ))
-        ) : (
-          <Flex justify="center" gap={16}>
-            <InformText size={theme.FONT_SIZE.XS} weight={300}>
-              채팅 내역이 없습니다.
-            </InformText>
-          </Flex>
-        )}
+        <Suspense fallback={<SkeletonChatRoomList />}>
+          <ChatRoomList />
+        </Suspense>
       </Main>
     </MessagePageContainer>
   );

src/pages/ChatRoomListPage/SkeletonChatRoomList.tsx

@@ -0,0 +1,31 @@
+import { Skeleton } from '@components/Skeleton';
+import { Flex } from '@components/shared/Flex';
+
+import { theme } from '@styles/theme';
+
+export const SkeletonChatRoomList = () => (
+  <Skeleton
+    width="100%"
+    height="12px"
+    radius="5px"
+    defaultColor={theme.PALETTE.GRAY_100}
+    gradientColor={theme.PALETTE.GRAY_200}
+  >
+    <Flex direction="column" gap={16}>
+      {Array(5)
+        .fill(null)
+        .map((_, index) => (
+          <Flex gap={10} key={index}>
+            <Skeleton.Item width="40px" height="40px" />
+            <Flex direction="column" grow justify="space-between">
+              <Flex justify="space-between">
+                <Skeleton.Item width="20%" height="14px" />
+                <Skeleton.Item width="10%" height="14px" />
+              </Flex>
+              <Skeleton.Item width="75%" />
+            </Flex>
+          </Flex>
+        ))}
+    </Flex>
+  </Skeleton>
+);

src/pages/ChatRoomListPage/useChatRoomListPage.ts → src/pages/ChatRoomListPage/useChatRoomList.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { LoginRequireError } from '@routes/LoginRequireBoundary';
@@ -9,17 +10,17 @@ import { useLoginInfoStore } from '@stores/loginInfo.store';
 
 import { ChatRoom } from '@type/models/ChatRoom.ts';
 
-export const useChatRoomListPage = () => {
+export const useChatRoomList = () => {
   const navigate = useNavigate();
 
   const loginInfo = useLoginInfoStore((state) => state.loginInfo);
   if (!loginInfo?.id) {
     throw new LoginRequireError();
   }
 
-  const { chatRoomTab, setChatRoomTab } = useChatRoomTabStore();
+  const { chatRoomTab } = useChatRoomTabStore();
 
-  const { data: selectedTabChatRoomList, refetch: refetchChatList } =
+  const { data: selectedTabChatRoomList, refetch: refetchChatRoomList } =
     useAllChatRoomListQuery({
       type: chatRoomTab,
     });
@@ -28,17 +29,14 @@ export const useChatRoomListPage = () => {
     navigate(pathName);
   };
 
-  const handleClickTab = (tab: ChatRoom['type']) => {
-    setChatRoomTab(tab);
-
-    refetchChatList();
-  };
+  useEffect(() => {
+    refetchChatRoomList();
+  }, [refetchChatRoomList]);
 
   return {
     selectedTabChatRoomList: sortDate(selectedTabChatRoomList),
     chatRoomTab,
     moveToPage,
-    handleClickTab,
   };
 };