feat: 쪽지함 api 연결

src/apis/message/apis.ts

@@ -1,5 +1,32 @@
-import type { CreateMessageRoomReq, CreateMessageRoomRes } from './types'
+import type {
+  GetMessageRoomsReq,
+  GetMessageRoomsRes,
+  GetMessageReq,
+  GetMessageRes,
+  CreateMessageReq,
+  CreateMessageRes,
+  CreateMessageRoomReq,
+  CreateMessageRoomRes
+} from './types'
 import { http } from '@utils/http'
 
+export const getMessageRooms = (params: GetMessageRoomsReq) =>
+  http.get<GetMessageRoomsReq, GetMessageRoomsRes>('/msgrooms', params)
+
+export const getMessage = (params: GetMessageReq) =>
+  http.get<GetMessageReq, GetMessageRes>(
+    `/msgrooms/${params.msgRoomId}/msgs`,
+    params
+  )
+
+export const createMessage = ({ messageRoomId, ...params }: CreateMessageReq) =>
+  http.post<Omit<CreateMessageReq, 'messageRoomId'>, CreateMessageRes>(
+    `/msgrooms/${messageRoomId}/msgs`,
+    params
+  )
+
+export const deleteMessageRoom = (messageRoomId: number) =>
+  http.delete<null>(`/msgrooms/${messageRoomId}`)
+
 export const createMessageRoom = (params: CreateMessageRoomReq) =>
   http.post<CreateMessageRoomReq, CreateMessageRoomRes>('/msgrooms', params)

src/apis/message/queries.ts

@@ -1,6 +1,40 @@
-import { useMutation } from '@tanstack/react-query'
-import { createMessageRoom } from './apis'
-import type { CreateMessageRoomReq } from './types'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import {
+  getMessageRooms,
+  getMessage,
+  createMessage,
+  deleteMessageRoom,
+  createMessageRoom
+} from './apis'
+import type {
+  CreateMessageReq,
+  GetMessageReq,
+  GetMessageRoomsReq,
+  CreateMessageRoomReq
+} from './types'
+
+export const useGetMessageRoomsQuery = (params: GetMessageRoomsReq) =>
+  useQuery({
+    queryKey: ['getMessageRooms', params],
+    queryFn: () => getMessageRooms(params)
+  })
+
+export const useGetMessageQuery = (params: GetMessageReq) =>
+  useQuery({
+    queryKey: ['getMessage', params],
+    queryFn: () => getMessage(params),
+    enabled: typeof params.msgRoomId === 'number'
+  })
+
+export const useCreateMessageMutation = () =>
+  useMutation({
+    mutationFn: (params: CreateMessageReq) => createMessage(params)
+  })
+
+export const useDeleteMessageRoomMutation = (messageRoomId: number) =>
+  useMutation({
+    mutationFn: () => deleteMessageRoom(messageRoomId)
+  })
 
 export const useCreateMessageRoomMutation = () =>
   useMutation({

src/apis/message/types.ts

@@ -1,6 +1,12 @@
-import type { CommonCreation, MessageRoomInfo, MessageInfo } from '@types'
+import type {
+  CommonCreation,
+  MessageRoomInfo,
+  MessageInfo,
+  MessageSortTypeCodes
+} from '@types'
 
 export type GetMessageRoomsReq = {
+  sort: MessageSortTypeCodes
   page: number
 }
 export type GetMessageRoomsRes = MessageRoomInfo[]
@@ -17,7 +23,7 @@ export type GetMessageReq = {
 export type GetMessageRes = MessageInfo[]
 
 export type CreateMessageReq = {
-  msgRoomId: number
+  messageRoomId: number
   content: string
 }
 export type CreateMessageRes = CommonCreation

src/components/common/Header/SideBar/index.tsx

@@ -1,5 +1,4 @@
 import { Avatar, Divider, Icon, Badge } from '@offer-ui/react'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import type { ReactElement } from 'react'
 import React from 'react'
@@ -21,7 +20,7 @@ const NAV_DATA: NavDataType = [
   },
   {
     content: '쪽지함',
-    url: '/message',
+    url: '/messagebox',
     iconType: 'message'
   }
 ]
@@ -32,11 +31,19 @@ export const SideBar = ({ isOpen, onClose }: SideBarProps): ReactElement => {
 
   const handleClickLogin = () => {
     router.replace(OAUTH_URL.KAKAO)
+
+    onClose()
+  }
+
+  const handleClickButton = (url: string) => {
+    router.push(url)
+
     onClose()
   }
 
   const handleClickLogout = () => {
     handleLogout()
+
     onClose()
   }
 
@@ -64,14 +71,14 @@ export const SideBar = ({ isOpen, onClose }: SideBarProps): ReactElement => {
           )}
           <Divider direction="horizontal" gap={16} length="259px" />
           <Styled.SidebarMenuSection>
-            {NAV_DATA.map((item, index) => {
+            {NAV_DATA.map(({ iconType, content, url }) => {
               return (
-                <Link key={index} href={item.url}>
-                  <Styled.SidebarMenu>
-                    <Icon size={16} type={item.iconType} />
-                    {item.content}
-                  </Styled.SidebarMenu>
-                </Link>
+                <Styled.SidebarMenu
+                  key={content}
+                  onClick={() => handleClickButton(url)}>
+                  <Icon size={16} type={iconType} />
+                  {content}
+                </Styled.SidebarMenu>
               )
             })}
           </Styled.SidebarMenuSection>

src/components/common/Header/SideBar/styled.ts

@@ -78,6 +78,8 @@ const SidebarMenu = styled.li`
   align-items: center;
   ${({ theme }): string => theme.fonts.body01B};
   color: ${({ theme }): string => theme.colors.grayScale90};
+
+  cursor: pointer;
 `
 
 const SidebarLogoutButton = styled.button`

src/components/messagebox/Chatting/Chatting.stories.tsx

@@ -12,61 +12,74 @@ export default meta
 
 const MESSAGES_MOCK = [
   {
-    id: 10,
     content: 'offer 쪽지1',
-    receiverId: 1,
-    senderId: 2,
-    createdDate: '2021-11-11T00:12:43'
+    member: {
+      id: 1,
+      nickname: '주영',
+      imageUrl: ''
+    },
+    sendTime: '2021-11-11T00:12:43'
   },
   {
-    id: 8,
     content: 'offer 쪽지2',
-    receiverId: 1,
-    senderId: 2,
-    createdDate: '2021-12-15T00:13:49'
+    member: {
+      id: 2,
+      nickname: '수림',
+      imageUrl: ''
+    },
+    sendTime: '2021-12-15T00:13:49'
   },
   {
-    id: 6,
     content:
       ' offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3 offer 쪽지3',
-    receiverId: 1,
-    senderId: 2,
-    createdDate: '2021-12-15T00:25:31'
+    member: {
+      id: 1,
+      nickname: '주영',
+      imageUrl: ''
+    },
+    sendTime: '2021-12-15T00:25:31'
   },
   {
-    id: 61,
     content: 'offer 쪽지3',
-    receiverId: 2,
-    senderId: 1,
-    createdDate: '2021-12-15T01:45:41'
+    member: {
+      id: 2,
+      nickname: '수림',
+      imageUrl: ''
+    },
+    sendTime: '2021-12-15T01:45:41'
   },
   {
-    id: 62,
     content: 'offer 쪽지3',
-    receiverId: 2,
-    senderId: 1,
-    createdDate: '2021-12-15T01:45:41'
+    member: {
+      id: 1,
+      nickname: '주영',
+      imageUrl: ''
+    },
+    sendTime: '2021-12-15T01:45:41'
   },
   {
-    id: 63,
     content: 'offer 쪽지3',
-    receiverId: 2,
-    senderId: 1,
-    createdDate: '2021-12-15T01:45:41'
+    member: {
+      id: 1,
+      nickname: '주영',
+      imageUrl: ''
+    },
+    sendTime: '2021-12-15T01:45:41'
   },
   {
-    id: 64,
     content: 'offer 쪽지3',
-    receiverId: 2,
-    senderId: 1,
-    createdDate: '2021-12-15T01:45:41'
+    member: {
+      id: 1,
+      nickname: '주영',
+      imageUrl: ''
+    },
+    sendTime: '2021-12-15T01:45:41'
   }
 ]
 
 export const Default: StoryObj<Chatting> = {
   args: {
     userId: 1,
-    receiverImageUrl: 'https://picsum.photos/id/237/200/300',
     messages: MESSAGES_MOCK
   },
   render: args => <ChattingComponent {...args} />

src/components/messagebox/Chatting/index.tsx

@@ -4,53 +4,60 @@ import { Styled } from './styled'
 import type { ChattingProps } from './types'
 import { formatDate } from '@utils/format'
 
-export const getDate = (createdDate = '') => createdDate.split('T')[0]
-
 // TODO: 상품 정보 버블 추가
 export const Chatting = ({
   userId,
   messages,
   receiverImageUrl
 }: ChattingProps) => {
-  return (
-    <Styled.Container>
-      {messages.map(({ id, content, senderId, createdDate }, idx, list) => {
-        const prevMessage = list.at(idx - 1)
-        const nextMessage = list.at(idx + 1)
-        const isSender = senderId === userId
+  const renderChattingList = () =>
+    messages.map(({ content, member, sendTime }, idx, list) => {
+      const prevMessage = list.at(idx - 1)
+      const nextMessage = list.at(idx + 1)
+      const isSender = member.id === userId
+
+      const currentDate = formatDate(sendTime, 'YYYY년 M월 D일 dddd')
+      const prevDate = formatDate(
+        prevMessage?.sendTime || '',
+        'YYYY년 M월 D일 dddd'
+      )
+      const nextDate = formatDate(
+        nextMessage?.sendTime || '',
+        'YYYY년 M월 D일 dddd'
+      )
+      const isPrevDateChanged = prevDate !== currentDate
+      const isNextDateChanged = nextDate !== currentDate
+      const currentTime = formatDate(sendTime, 'A H:mm')
+      const nextTime = formatDate(nextMessage?.sendTime || '', 'A H:mm')
 
-        const currentDate = getDate(createdDate)
-        const prevDate = getDate(prevMessage?.createdDate)
-        const nextDate = getDate(nextMessage?.createdDate)
-        const isPrevDateChanged = prevDate !== currentDate
-        const isNextDateChanged = nextDate !== currentDate
+      const commonProps = {
+        time: currentDate,
+        isSectionStart:
+          member.id !== prevMessage?.member.id || isPrevDateChanged,
+        isSectionLast:
+          member.id !== nextMessage?.member.id ||
+          isNextDateChanged ||
+          currentTime !== nextTime
+      }
 
-        const commonProps = {
-          time: formatDate(createdDate, 'A H:m'),
-          isSectionStart:
-            senderId !== prevMessage?.senderId || isPrevDateChanged,
-          isSectionLast: senderId !== nextMessage?.senderId || isNextDateChanged
-        }
+      return (
+        // TODO: 메세지 키값 내려줄 수 있는지 확인하기
+        <div key={`${member.nickname}-${currentDate}`}>
+          {isPrevDateChanged && (
+            <Styled.DateWrapper key={currentDate}>
+              <Styled.ChattingDate>{currentDate}</Styled.ChattingDate>
+            </Styled.DateWrapper>
+          )}
+          {isSender ? (
+            <Send {...commonProps}>{content}</Send>
+          ) : (
+            <Receive avatarUrl={receiverImageUrl} {...commonProps}>
+              {content}
+            </Receive>
+          )}
+        </div>
+      )
+    })
 
-        return (
-          <div key={id}>
-            {isPrevDateChanged && (
-              <Styled.DateWrapper key={createdDate}>
-                <Styled.ChattingDate>
-                  {formatDate(createdDate, 'YYYY년 M월 D일 dddd')}
-                </Styled.ChattingDate>
-              </Styled.DateWrapper>
-            )}
-            {isSender ? (
-              <Send {...commonProps}>{content}</Send>
-            ) : (
-              <Receive avatarUrl={receiverImageUrl} {...commonProps}>
-                {content}
-              </Receive>
-            )}
-          </div>
-        )
-      })}
-    </Styled.Container>
-  )
+  return <Styled.Container>{renderChattingList()}</Styled.Container>
 }

src/components/messagebox/Chatting/types.ts

@@ -1,9 +1,11 @@
 type Message = {
-  id: number
+  member: {
+    id: number
+    nickname: string
+    imageUrl: string
+  }
   content: string
-  receiverId: number
-  senderId: number
-  createdDate: string
+  sendTime: string
 }
 
 export type SendProps = {

src/components/messagebox/ChattingRoom/ChattingRoom.stories.tsx

@@ -11,6 +11,6 @@ const meta: Meta<ChattingRoom> = {
 export default meta
 
 export const Default: StoryObj<ChattingRoom> = {
-  args: { id: 1 },
+  args: { roomId: 1 },
   render: args => <ChattingRoomComponent {...args} />
 }