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

Java-and-Script · Nov 27, 2023 · 48d2fd1 · 48d2fd1
2 parents 3fdc6f3 + 58984fd
commit 48d2fd1
Show file tree

Hide file tree

Showing 26 changed files with 578 additions and 168 deletions.
diff --git a/src/api/chat/getPersonalChatRoomExisted.ts b/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 } }
   );
 

diff --git a/src/api/member/getCrewRegistrationStatus.ts b/src/api/member/getCrewRegistrationStatus.ts
@@ -0,0 +1,17 @@
+import { axiosInstance } from '@api/axiosInstance';
+
+import {
+  GetCrewRegistrationStatusRequest,
+  GetRegistrationStatusResponse,
+} from '@type/api/member';
+
+export const getCrewRegistrationStatus = async ({
+  memberId,
+  crewId,
+}: GetCrewRegistrationStatusRequest) => {
+  const { data } = await axiosInstance.get<GetRegistrationStatusResponse>(
+    `/members/${memberId}/crews/${crewId}/registration-status`
+  );
+
+  return data;
+};
diff --git a/src/api/member/getGameRegistrationStatus.ts b/src/api/member/getGameRegistrationStatus.ts
@@ -0,0 +1,17 @@
+import { axiosInstance } from '@api/axiosInstance';
+
+import {
+  GetGameRegistrationStatusRequest,
+  GetRegistrationStatusResponse,
+} from '@type/api/member';
+
+export const getGameRegistrationStatus = async ({
+  memberId,
+  gameId,
+}: GetGameRegistrationStatusRequest) => {
+  const { data } = await axiosInstance.get<GetRegistrationStatusResponse>(
+    `/members/${memberId}/games/${gameId}/registration-status`
+  );
+
+  return data;
+};
diff --git a/src/components/Participation/Participation.style.ts b/src/components/Participation/Participation.style.ts
@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import { Text } from '@components/shared/Text';
+
 export const ManageContainer = styled.div`
   ${({ theme }) => theme.STYLES.LAYOUT}
   min-height: 100dvh;
@@ -15,3 +17,7 @@ export const AllowCardGroup = styled.div`
   flex-wrap: wrap;
   gap: 0.75rem;
 `;
+
+export const InformText = styled(Text)`
+  padding: 16px;
+`;
diff --git a/src/components/Participation/Participation.tsx b/src/components/Participation/Participation.tsx
@@ -4,12 +4,15 @@ import { useNavigate } from 'react-router-dom';
 import { useLoginInfoStore } from '@/stores/loginInfo.store';
 
 import { AllowCard } from '@components/Participation/components/AllowCard';
+import { Flex } from '@components/shared/Flex';
+
+import { theme } from '@styles/theme';
 
 import { Member } from '@type/models';
 
 import { PATH_NAME } from '@consts/pathName';
 
-import { AllowCardGroup, Main } from './Participation.style';
+import { AllowCardGroup, InformText, Main } from './Participation.style';
 
 type ParticipationProps = {
   id: Member['id'];
@@ -36,25 +39,33 @@ export const Participation = ({
       navigate(PATH_NAME.LOGIN);
       return;
     }
-  }, [id, navigate]);
+  }, [id, loginInfo, navigate]);
 
   const moveToProfile = (memberId: number) => {
     navigate(PATH_NAME.GET_PROFILE_PATH(String(memberId)));
   };
 
   return (
     <Main>
-      <AllowCardGroup>
-        {waitingMembers.map(({ ...props }: Member) => (
-          <AllowCard
-            key={props.id}
-            member={props}
-            onClickProfile={() => moveToProfile(props.id)}
-            onClickAllowButton={() => handleGuestAction(props.id, '확정')}
-            onClickDisallowButton={() => handleGuestAction(props.id, '거절')}
-          />
-        ))}
-      </AllowCardGroup>{' '}
+      {waitingMembers.length > 0 ? (
+        <AllowCardGroup>
+          {waitingMembers.map(({ ...props }: Member) => (
+            <AllowCard
+              key={props.id}
+              member={props}
+              onClickProfile={() => moveToProfile(props.id)}
+              onClickAllowButton={() => handleGuestAction(props.id, '확정')}
+              onClickDisallowButton={() => handleGuestAction(props.id, '거절')}
+            />
+          ))}
+        </AllowCardGroup>
+      ) : (
+        <Flex justify="center" gap={16}>
+          <InformText size={theme.FONT_SIZE.XS} weight={300}>
+            수락 대기중인 인원이 없습니다
+          </InformText>
+        </Flex>
+      )}
     </Main>
   );
 };
diff --git a/src/components/Participation/components/AllowCard/AllowCard.tsx b/src/components/Participation/components/AllowCard/AllowCard.tsx
@@ -37,6 +37,7 @@ export const AllowCard = ({
           size={40}
           onClick={onClickProfile}
         />
+        &nbsp;
         <Text
           size={12}
           weight={500}

diff --git a/src/hooks/mutations/useCrewParticipateCreateMutation.ts b/src/hooks/mutations/useCrewParticipateCreateMutation.ts
@@ -1,9 +1,23 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { postCrewParticipate } from '@api/crews/postCrewParticipate';
 
+import { useLoginInfoStore } from '@stores/loginInfo.store';
+
 export const useCrewParticipateCreateMutation = () => {
+  const queryClient = useQueryClient();
+  const id = useLoginInfoStore((state) => state.loginInfo?.id);
+
   return useMutation({
     mutationFn: postCrewParticipate,
+    onSuccess: (_, { crewId }) => {
+      queryClient.invalidateQueries({
+        queryKey: ['crew-detail', crewId],
+      });
+      id &&
+        queryClient.invalidateQueries({
+          queryKey: ['crew-registration', id, crewId],
+        });
+    },
   });
 };
diff --git a/src/hooks/mutations/useGameParticipateCreateMutation.ts b/src/hooks/mutations/useGameParticipateCreateMutation.ts
@@ -1,9 +1,23 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { postGameParticipate } from '@api/games/postGameParticipate';
 
+import { useLoginInfoStore } from '@stores/loginInfo.store';
+
 export const useGameParticipateCreateMutation = () => {
+  const queryClient = useQueryClient();
+  const id = useLoginInfoStore((state) => state.loginInfo?.id);
+
   return useMutation({
     mutationFn: postGameParticipate,
+    onSuccess: (_, { gameId }) => {
+      queryClient.invalidateQueries({
+        queryKey: ['game-detail', gameId],
+      });
+      id &&
+        queryClient.invalidateQueries({
+          queryKey: ['game-registration', id, gameId],
+        });
+    },
   });
 };
diff --git a/src/hooks/queries/useCrewRegistrationStatusQuery.ts b/src/hooks/queries/useCrewRegistrationStatusQuery.ts
@@ -0,0 +1,15 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getCrewRegistrationStatus } from '@api/member/getCrewRegistrationStatus';
+
+import { GetCrewRegistrationStatusRequest } from '@type/api/member';
+
+export const useCrewRegistrationStatusQuery = ({
+  memberId,
+  crewId,
+}: GetCrewRegistrationStatusRequest) => {
+  return useSuspenseQuery({
+    queryKey: ['crew-registration', memberId, crewId],
+    queryFn: () => getCrewRegistrationStatus({ memberId, crewId }),
+  });
+};
diff --git a/src/hooks/queries/useGameRegistrationStatusQuery.ts b/src/hooks/queries/useGameRegistrationStatusQuery.ts
@@ -0,0 +1,15 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getGameRegistrationStatus } from '@api/member/getGameRegistrationStatus';
+
+import { GetGameRegistrationStatusRequest } from '@type/api/member';
+
+export const useGameRegistrationStatusQuery = ({
+  memberId,
+  gameId,
+}: GetGameRegistrationStatusRequest) => {
+  return useSuspenseQuery({
+    queryKey: ['game-registration', memberId, gameId],
+    queryFn: () => getGameRegistrationStatus({ memberId, gameId }),
+  });
+};
diff --git a/src/hooks/useChatOnButtonClick.ts b/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)));
+        }
+      }
     }
   };