feat: 쪽지함 api 연결

src/apis/message/apis.ts

@@ -0,0 +1,27 @@
+import type {
+  GetMessageRoomsReq,
+  GetMessageRoomsRes,
+  GetMessageReq,
+  GetMessageRes,
+  CreateMessageReq,
+  CreateMessageRes
+} 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}`)

src/apis/message/index.ts

@@ -1 +1,2 @@
 export * from './types'
+export * from './queries'

src/apis/message/queries.ts

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

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,59 @@ import { Styled } from './styled'
 import type { ChattingProps } from './types'
 import { formatDate } from '@utils/format'
 
-export const getDate = (createdDate = '') => createdDate.split('T')[0]
+export const getDate = (sendTime = '') => sendTime.split('T')[0]
+export const getTime = (sendTime = '') => formatDate(sendTime, 'A H:mm')
 
 // 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 renderChattingItem = () =>
+    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 = getDate(createdDate)
-        const prevDate = getDate(prevMessage?.createdDate)
-        const nextDate = getDate(nextMessage?.createdDate)
-        const isPrevDateChanged = prevDate !== currentDate
-        const isNextDateChanged = nextDate !== currentDate
+      const currentDate = getDate(sendTime)
+      const prevDate = getDate(prevMessage?.sendTime)
+      const nextDate = getDate(nextMessage?.sendTime)
+      const isPrevDateChanged = prevDate !== currentDate
+      const isNextDateChanged = nextDate !== currentDate
+      const currentTime = getTime(sendTime)
+      const nextTime = getTime(nextMessage?.sendTime)
 
-        const commonProps = {
-          time: formatDate(createdDate, 'A H:m'),
-          isSectionStart:
-            senderId !== prevMessage?.senderId || isPrevDateChanged,
-          isSectionLast: senderId !== nextMessage?.senderId || isNextDateChanged
-        }
+      const commonProps = {
+        time: formatDate(sendTime, 'A H:mm'),
+        isSectionStart:
+          member.id !== prevMessage?.member.id || isPrevDateChanged,
+        isSectionLast:
+          member.id !== nextMessage?.member.id ||
+          isNextDateChanged ||
+          currentTime !== nextTime
+      }
 
-        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 (
+        // TODO: 메세지 키값 내려줄 수 있는지 확인하기
+        <div key={`${member.nickname}-${sendTime}`}>
+          {isPrevDateChanged && (
+            <Styled.DateWrapper key={sendTime}>
+              <Styled.ChattingDate>
+                {formatDate(sendTime, 'YYYY년 M월 D일 dddd')}
+              </Styled.ChattingDate>
+            </Styled.DateWrapper>
+          )}
+          {isSender ? (
+            <Send {...commonProps}>{content}</Send>
+          ) : (
+            <Receive avatarUrl={receiverImageUrl} {...commonProps}>
+              {content}
+            </Receive>
+          )}
+        </div>
+      )
+    })
+
+  return <Styled.Container>{renderChattingItem()}</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} />
 }