Merge pull request #192 from prgrms-web-devcourse-final-project/feat/#…

…188

✨Feat : 메이트 채팅방 동작 처리

package.json

@@ -16,6 +16,7 @@
     "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.60.2",
     "dayjs": "^1.11.13",
+    "history": "^5.3.0",
     "ky": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/apis/mateChatService.ts

@@ -34,8 +34,6 @@ const mateChatService = {
 
   //  메이트 채팅방 상세 조회
   getMateChatRoomDetail: async (chatroomId: string) => {
-    console.log(123, chatroomId)
-
     const response = await fetchApi
       .get<MateChatRoomDetail>(`mates/chat/${chatroomId}/messages?page=0`)
       .json()

src/hooks/useChatExit.ts

@@ -2,6 +2,8 @@ import goodsChatService from '@apis/goodsChatService'
 import mateChatService from '@apis/mateChatService'
 import queryClient, { QUERY_KEY } from '@apis/queryClient'
 import { useMutation } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
 
 export const useGoodsChatExit = (chatRoomId: string) => {
   const { mutate, isPending, isError, error } = useMutation({
@@ -11,11 +13,8 @@ export const useGoodsChatExit = (chatRoomId: string) => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.GOODS_CHAT_LIST] })
     },
 
-    onSettled: (data, error) => {
-      if (error) {
-        console.error(error)
-      }
-      console.log(data)
+    onError: (error) => {
+      toast.error(error.message)
     },
   })
 
@@ -27,13 +26,22 @@ export const useGoodsChatExit = (chatRoomId: string) => {
   }
 }
 
-export const useMateChatExit = (chatRoomId: string) => {
-  console.log(chatRoomId)
+export const useMateChatExit = (chatRoomId: string, isChatRoom?: boolean) => {
+  const navigate = useNavigate()
+
   const { mutate, isPending, isError, error } = useMutation({
     mutationFn: () => mateChatService.exitMateChat(chatRoomId),
 
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MATE_CHAT_LIST] })
+
+      if (isChatRoom) {
+        navigate('/chat')
+      }
+    },
+
+    onError: (error) => {
+      toast.error(error.message)
     },
   })
 

src/hooks/useCompleteMate.ts

@@ -3,13 +3,14 @@ import { useMutation } from '@tanstack/react-query'
 import { RecruitStatus } from '@pages/ChatRoom/Rooms/MateChatRoom/RecruitStatusSection'
 import queryClient, { QUERY_KEY } from '@apis/queryClient'
 import { useLocation } from 'react-router-dom'
+import { toast } from 'react-toastify'
 
 interface RecruitData {
   status: RecruitStatus
   participantIds: number[]
 }
 
-export const useCompleteMate = () => {
+export const useChangeMateRecruitStatus = () => {
   const {
     state: { postId },
   } = useLocation()
@@ -22,6 +23,10 @@ export const useCompleteMate = () => {
       queryClient.invalidateQueries({
         queryKey: [QUERY_KEY.MATE_POST, postId],
       })
+
+      toast.success('모임 상태가 변경되었습니다.', {
+        position: 'top-right',
+      })
     },
   })
 
@@ -38,6 +43,10 @@ export const useCompleteMatePost = (postId: string) => {
     mutationFn: (data: { participantIds: number[] }) =>
       mateChatService.completeMate(postId, data),
 
+    onError: (error) => {
+      toast.error(error.message)
+    },
+
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [QUERY_KEY.MATE_POST, postId],

src/hooks/useCreateChatRoom.ts

@@ -2,13 +2,21 @@ import { useMutation } from '@tanstack/react-query'
 import mateChatService from '@apis/mateChatService'
 import queryClient, { QUERY_KEY } from '@apis/queryClient'
 import goodsChatService from '@apis/goodsChatService'
+import { useNavigate } from 'react-router-dom'
 
 export const useCreateMateChatRoom = (matePostId: string) => {
+  const navigate = useNavigate()
   const { mutate, isPending, isError, error } = useMutation({
     mutationFn: () => mateChatService.createMateChat(matePostId),
 
-    onSuccess: () => {
+    onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MATE_CHAT_LIST] })
+
+      if (data.status === 'SUCCESS') {
+        navigate(`/chat-room/메이트/${data.data.roomId}`, {
+          state: { postId: matePostId },
+        })
+      }
     },
 
     onSettled: (data, error) => {

src/hooks/useNavigatChatRoom.ts

@@ -13,15 +13,11 @@ const useNavigatChatRoom = (currentTab: ChatType) => {
     if (currentTab === '굿즈') {
       navigate(`/chat-room/${currentTab}/${chatRoomId}`)
     }
-    if (currentTab === '일반') {
-      navigate(`/chat-room/${currentTab}/${chatRoomId}`)
-    }
   }
 
   const isGoods = currentTab === '굿즈'
-  const isGeneral = currentTab === '일반'
 
-  return { handleChatCardClick, isGoods, isGeneral }
+  return { handleChatCardClick, isGoods }
 }
 
 export default useNavigatChatRoom

src/hooks/useSocket.ts

@@ -25,14 +25,10 @@ export const useSocket = ({
     const client = new Client({
       webSocketFactory: () => new SockJS(wsUrl),
 
-      debug: (str: string) => console.log('STOMP Debug:', str),
-
       heartbeatIncoming: 0,
       heartbeatOutgoing: 0,
 
-      onConnect: (frame) => {
-        console.log('연결 성공:', frame)
-
+      onConnect: () => {
         // 연결 성공 후 구독 설정
         client.subscribe(subscribePoint, (message) => {
           const receivedMessage = JSON.parse(message.body)

src/layouts/SubLayout/index.tsx

@@ -1,10 +1,12 @@
 import { SubGlobalContainer } from '@styles/globalStyle'
 import { Outlet } from 'react-router-dom'
+import { ToastContainer } from 'react-toastify'
 
 const SubLayout = () => {
   return (
     <>
       <SubGlobalContainer>
+        <ToastContainer />
         <Outlet />
       </SubGlobalContainer>
     </>

src/pages/ChatPage/index.tsx

@@ -16,7 +16,7 @@ import { useGoodsChatExit, useMateChatExit } from '@hooks/useChatExit'
 import MateCardList from './ChatPageList/MateCardList'
 import { useMateChatStore } from '@store/useMateChatStore'
 
-export const CHAT_TAB_LIST = ['메이트', '굿즈', '일반'] as const
+export const CHAT_TAB_LIST = ['메이트', '굿즈'] as const
 export type ChatType = (typeof CHAT_TAB_LIST)[number]
 
 const ChatPage = () => {

src/pages/ChatRoom/Rooms/MateChatRoom/MateModalContent/index.tsx

@@ -25,6 +25,7 @@ const MateModalContent = ({ handleAlertClick }: ChatBottomModalProps) => {
   const {
     isOwner,
     recruitStatus,
+    currentPostStatus,
     setCurrentAlertStatus,
     setParticipants,
     setMateChatRoomId,
@@ -55,8 +56,10 @@ const MateModalContent = ({ handleAlertClick }: ChatBottomModalProps) => {
    * 추후 로그인 기능 추가 시 변경 필요
    */
   const cuurentMemberList = members
-    .map((member) => member.memberId)
-    .filter((memberId) => memberId !== Number(localStorage.getItem('memberId')))
+    .map((member: any) => member.memberId)
+    .filter(
+      (memberId: any) => memberId !== Number(localStorage.getItem('memberId')),
+    )
 
   /**
    * 각 버튼 클릭 시 현재 알럿창 상태 변경
@@ -66,6 +69,7 @@ const MateModalContent = ({ handleAlertClick }: ChatBottomModalProps) => {
     switch (recruitStatus) {
       case '모집완료':
         setCurrentAlertStatus({ type: 'MATE_COMPLETE' })
+        setParticipants(cuurentMemberList)
         break
 
       case '모집중':
@@ -88,24 +92,23 @@ const MateModalContent = ({ handleAlertClick }: ChatBottomModalProps) => {
       <Section>
         <h2>대화상대</h2>
         <div>
-          {members.map((member) => (
+          {members.map((member: any) => (
             <MateUserCard
               key={member.memberId}
               member={member}
-              handleAlertClick={handleAlertClick}
             />
           ))}
         </div>
       </Section>
 
-      <SubmitButtonContainer $isOwner={isOwner}>
+      <SubmitButtonContainer
+        $isOwner={isOwner}
+        $isRecruitStatus={currentPostStatus === recruitStatus}
+      >
         <button onClick={handleExitChatClick}>채팅방 나가기</button>
-        <button
-          disabled={!isOwner}
-          onClick={handleCompleteClick}
-        >
-          {recruitStatus}
-        </button>
+        {currentPostStatus !== recruitStatus && (
+          <button onClick={handleCompleteClick}>{recruitStatus}</button>
+        )}
       </SubmitButtonContainer>
     </ChatBottomModalContainer>
   )

src/pages/ChatRoom/Rooms/MateChatRoom/MateUserCard/index.tsx

@@ -10,17 +10,16 @@ import { MateChatMember } from '@typings/mateChat'
 
 interface MateUserCardProps {
   member: MateChatMember
-  handleAlertClick: () => void
 }
 
-const MateUserCard = ({ member, handleAlertClick }: MateUserCardProps) => {
+const MateUserCard = ({ member }: MateUserCardProps) => {
   const {
-    isOwner,
     recruitStatus,
-    setCurrentAlertStatus,
     confirmedParticipants,
     setConfirmedParticipants,
+    isOwner,
   } = useMateChatStore()
+
   const { imageUrl, nickname, memberId } = member
 
   // 추후 API 연동 시 추가 예정
@@ -41,7 +40,9 @@ const MateUserCard = ({ member, handleAlertClick }: MateUserCardProps) => {
     }
   }
 
+  const isUser = memberId === Number(localStorage.getItem('memberId'))
   const isCompleteRecruit = isOwner && recruitStatus === '직관완료'
+  const isMemberOwner = memberId === Number(localStorage.getItem('memberId'))
 
   return (
     <UserListCardContainer>
@@ -53,20 +54,24 @@ const MateUserCard = ({ member, handleAlertClick }: MateUserCardProps) => {
           isChat
         />
         <p>
-          {nickname} {isOwner && <span>(모임장)</span>}
+          {nickname} {isUser && <span>(나)</span>}
         </p>
       </UserInfo>
       <ButtonContainer>
         {isCompleteRecruit && (
           <ConfirmationContainer>
-            <input
-              type='checkbox'
-              id={`confirm-${memberId}`}
-              name={`confirm-${memberId}`}
-              checked={confirmedParticipants.includes(memberId)}
-              onChange={handleConfirmation}
-            />
-            <label htmlFor={`confirm-${memberId}`}>참가확인</label>
+            {!isMemberOwner && (
+              <>
+                <input
+                  type='checkbox'
+                  id={`confirm-${memberId}`}
+                  name={`confirm-${memberId}`}
+                  checked={confirmedParticipants.includes(memberId)}
+                  onChange={handleConfirmation}
+                />
+                <label htmlFor={`confirm-${memberId}`}>참가확인</label>
+              </>
+            )}
           </ConfirmationContainer>
         )}
       </ButtonContainer>