feat: 쪽지함 api 연결

src/apis/message/apis.ts

@@ -17,11 +17,8 @@ export const getMessage = (params: GetMessageReq) =>
     params
   )
 
-export const createMessage = (
-  messageRoomId: number,
-  params: CreateMessageReq
-) =>
-  http.post<CreateMessageReq, CreateMessageRes>(
+export const createMessage = ({ messageRoomId, ...params }: CreateMessageReq) =>
+  http.post<Omit<CreateMessageReq, 'messageRoomId'>, CreateMessageRes>(
     `/msgrooms/${messageRoomId}/msgs`,
     params
   )

src/apis/message/queries.ts

@@ -11,7 +11,7 @@ import type {
   GetMessageRoomsReq
 } from './types'
 
-export const useGetMessageRooms = (params: GetMessageRoomsReq) =>
+export const useGetMessageRoomsQuery = (params: GetMessageRoomsReq) =>
   useQuery({
     queryKey: ['getMessageRooms'],
     queryFn: () => getMessageRooms(params)
@@ -25,13 +25,12 @@ export const useGetMessageQuery = ({ msgRoomId, ...res }: GetMessageReq) =>
         msgRoomId,
         ...res
       }),
-    enabled: Boolean(msgRoomId)
+    enabled: typeof msgRoomId === 'number'
   })
 
-export const useCreateMessageMutation = (messageRoomId: number) =>
+export const useCreateMessageMutation = () =>
   useMutation({
-    mutationFn: (params: CreateMessageReq) =>
-      createMessage(messageRoomId, params)
+    mutationFn: (params: CreateMessageReq) => createMessage(params)
   })
 
 export const useDeleteMessageRoomMutation = (messageRoomId: number) =>

src/apis/message/types.ts

@@ -23,6 +23,7 @@ export type GetMessageReq = {
 export type GetMessageRes = MessageInfo[]
 
 export type CreateMessageReq = {
+  messageRoomId: number
   content: string
 }
 export type CreateMessageRes = CommonCreation

src/components/messagebox/ChattingRoom/index.tsx

@@ -28,14 +28,17 @@ export const ChattingRoom = ({ roomId, onClose }: ChattingRoomProps) => {
     msgRoomId: roomId,
     page: 0
   })
-  const createMessageMutation = useCreateMessageMutation(roomId)
+  const createMessageMutation = useCreateMessageMutation()
   const deleteMessageRoomMutation = useDeleteMessageRoomMutation(roomId)
+
   const chattingBoxRef = useRef<HTMLDivElement | null>(null)
   const inputRef = useRef<HTMLInputElement | null>(null)
-  const { desktop, tablet, mobile } = useMedia()
+
   const [messages, setMessages] = useState<ChattingProps['messages']>([])
+  const { desktop, tablet, mobile } = useMedia()
   const { isOpen, openModal, closeModal } = useModal()
   const { user } = useAuth()
+
   const senderInfo = {
     id: user.id,
     nickname: user.nickname,
@@ -62,13 +65,10 @@ export const ChattingRoom = ({ roomId, onClose }: ChattingRoomProps) => {
     handleCloseRoom()
   }
 
-  const refetchMessage = async () => {
-    await getMessageQuery.refetch()
-  }
-
-  const handleSubmitMessage = async (message: string) => {
+  const handleSubmitMessage = async (content: string) => {
     const res = await createMessageMutation.mutateAsync({
-      content: message
+      messageRoomId: roomId,
+      content
     })
 
     if (inputRef.current) {
@@ -79,11 +79,11 @@ export const ChattingRoom = ({ roomId, onClose }: ChattingRoomProps) => {
       ...prev,
       {
         member: senderInfo,
-        content: message,
+        content,
         sendTime: res.createdAt
       }
     ])
-    await refetchMessage()
+    await getMessageQuery.refetch()
   }
 
   useEffect(() => {
@@ -100,7 +100,11 @@ export const ChattingRoom = ({ roomId, onClose }: ChattingRoomProps) => {
         <IconButton icon="arrowLeft" size={24} onClick={handleCloseRoom} />
         <Styled.Nickname>{user.nickname}</Styled.Nickname>
         <Styled.IconButtonContainer>
-          <IconButton icon="refresh" size={24} onClick={refetchMessage} />
+          <IconButton
+            icon="refresh"
+            size={24}
+            onClick={async () => await getMessageQuery.refetch()}
+          />
           <Styled.MoreButtonWrapper>
             <IconButton icon="more" size={24} onClick={openModal} />
             {isOpen && (