resolve conflict

src/apis/message/apis.ts

@@ -0,0 +1,32 @@
+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/index.ts

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

src/apis/message/queries.ts

@@ -0,0 +1,42 @@
+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({
+    mutationFn: (params: CreateMessageRoomReq) => createMessageRoom(params)
+  })

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/apis/post/apis.ts

@@ -4,7 +4,13 @@ import type {
   GetPostsRes,
   GetPostRes,
   CreatePostReq,
-  CreatePostRes
+  CreatePostRes,
+  UpdateTradeStatusReq,
+  UpdateTradeStatusRes,
+  DeletePostReq,
+  DeletePostRes,
+  UpdatePostReq,
+  UpdatePostRes
 } from './types'
 import { http } from '@utils/http'
 
@@ -14,8 +20,26 @@ export const getPost = (id: number) =>
 export const createPost = (param: CreatePostReq) =>
   http.post<CreatePostReq, CreatePostRes>('/posts', param)
 
+export const updatePost = ({ postId, ...params }: UpdatePostReq) =>
+  http.put<Omit<UpdatePostReq, 'postId'>, UpdatePostRes>(
+    `/posts/${postId}`,
+    params
+  )
+
 export const getCategories = () =>
   http.get<null, GetCategoriesRes>('/categories')
 
 export const getPosts = (params: GetPostsReq) =>
   http.get<GetPostsReq, GetPostsRes>('/posts', params)
+
+export const updateTradeStatus = ({
+  postId,
+  ...params
+}: UpdateTradeStatusReq) =>
+  http.put<Omit<UpdateTradeStatusReq, 'postId'>, UpdateTradeStatusRes>(
+    `/posts/trade-status/${postId}`,
+    params
+  )
+
+export const deletePost = (postId: DeletePostReq) =>
+  http.delete<DeletePostRes>(`/posts/${postId}`)

src/apis/post/queries.ts

@@ -1,16 +1,70 @@
 import { useMutation, useQuery, useInfiniteQuery } from '@tanstack/react-query'
-import { getCategories, getPosts, getPost, createPost } from './apis'
-import type { GetPostsReq, GetPostsRes, CreatePostReq } from './types'
+import {
+  getPost,
+  getCategories,
+  createPost,
+  getPosts,
+  updateTradeStatus,
+  deletePost,
+  updatePost
+} from './apis'
+import type {
+  CreatePostReq,
+  DeletePostReq,
+  GetPostsReq,
+  GetPostsRes,
+  UpdatePostReq,
+  UpdateTradeStatusReq
+} from './types'
 
 export const useCreatePostMutation = () =>
   useMutation({
     mutationFn: (param: CreatePostReq) => createPost(param)
   })
 
+export const useUpdatePostMutation = () =>
+  useMutation({
+    mutationFn: (params: UpdatePostReq) => updatePost(params)
+  })
+
 export const useGetPostQuery = (id: number) =>
   useQuery({
     queryKey: ['getPost', id],
-    queryFn: () => getPost(id)
+    queryFn: () => getPost(id),
+    enabled: typeof id === 'number',
+    select: data => ({
+      ...data,
+      postForm: {
+        category: data.category.code,
+        tradeType: data.tradeType.code,
+        productCondition: data.productCondition.code,
+        price: String(data.price),
+        imageInfos: [
+          {
+            id: '0',
+            isRepresent: true,
+            url: data.thumbnailImageUrl || ''
+          },
+          ...(data.imageUrls.map((url, idx) => ({
+            id: String(idx + 1),
+            url
+          })) || [])
+        ],
+        title: data.title,
+        description: data.description,
+        location: data.location
+      },
+      postImages: [
+        {
+          id: 0,
+          src: data.thumbnailImageUrl || ''
+        },
+        ...(data.imageUrls.map((url, idx) => ({
+          id: idx + 1,
+          src: url
+        })) || [])
+      ]
+    })
   })
 
 export const useGetCategoriesQuery = () =>
@@ -35,3 +89,13 @@ export const useGetInfinitePostsQuery = (params: GetPostsReq) =>
         ? lastPage.posts[lastPage.posts.length - 1].id
         : undefined
   })
+
+export const useUpdateTradeStatusMutation = () =>
+  useMutation({
+    mutationFn: (params: UpdateTradeStatusReq) => updateTradeStatus(params)
+  })
+
+export const useDeletePostMutation = (postId: DeletePostReq) =>
+  useMutation({
+    mutationFn: () => deletePost(postId)
+  })

src/apis/post/types.ts

@@ -4,37 +4,36 @@ import type {
   PostDetail,
   PostSummaries,
   ProductConditionCodes,
-  TradeStatusType,
+  TradeStatusCodes,
   TradeTypeCodes
 } from '@types'
 
 export type GetPostRes = PostDetail
 
 export type UpdatePostReq = {
+  postId: number
   title: string
   category: string
   price: number
   location: string
   productCondition: ProductConditionCodes
-  tradeStatus: TradeStatusType
+  tradeStatus: TradeStatusCodes
   tradeType: TradeTypeCodes
   thumbnailImageUrl: string
   imageUrls: string[]
   description: string
 }
 export type UpdatePostRes = PostDetail
 
-export type DeletePostReq = {
-  postId: number
-}
+export type DeletePostReq = number
 export type DeletePostRes = {
   // TODO: 정확한 타입 BE 확인 필요
 }
 
 // TODO: 정확한 타입 BE 확인 필요
 export type UpdateTradeStatusReq = {
   postId: number
-  request: TradeStatusType
+  tradeStatus: TradeStatusCodes
 }
 export type UpdateTradeStatusRes = number
 

src/components/common/Dialog/index.tsx

@@ -3,14 +3,12 @@ import type { DialogProps } from './types'
 
 const Dialog = ({ onClose, dialogPositionStyle, children }: DialogProps) => {
   return (
-    <>
-      <Styled.DialogWrapper style={dialogPositionStyle}>
-        <Styled.DialogOverlay onClick={onClose} />
-        <Styled.DialogBox>
-          <Styled.DialogContent>{children}</Styled.DialogContent>
-        </Styled.DialogBox>
-      </Styled.DialogWrapper>
-    </>
+    <Styled.DialogWrapper style={dialogPositionStyle}>
+      <Styled.DialogOverlay onClick={onClose} />
+      <Styled.DialogBox>
+        <Styled.DialogContent>{children}</Styled.DialogContent>
+      </Styled.DialogBox>
+    </Styled.DialogWrapper>
   )
 }
 

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`