feat: 게시글 삭제, 수정 기능 구현 (#225)

price-offer · Jan 21, 2024 · 00b7f1e · 00b7f1e
2 parents 1549d49 + 397ad89
commit 00b7f1e
Show file tree

Hide file tree

Showing 8 changed files with 384 additions and 149 deletions.
diff --git a/src/apis/post/apis.ts b/src/apis/post/apis.ts
@@ -4,7 +4,13 @@ import type {
   CreatePostReq,
   CreatePostRes,
   GetPostsReq,
-  GetPostsRes
+  GetPostsRes,
+  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}`)
diff --git a/src/apis/post/queries.ts b/src/apis/post/queries.ts
@@ -1,23 +1,69 @@
 import { useMutation, useQuery, useInfiniteQuery } from '@tanstack/react-query'
-import { getPost, getCategories, createPost, getPosts } from './apis'
-import type { CreatePostReq, GetPostsReq, GetPostsRes } 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),
+    enabled: typeof id === 'number',
     select: data => ({
       ...data,
-      postImages:
-        data.imageUrls.map((url, idx) => ({
-          id: idx,
+      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
-        })) || []
+        })) || [])
+      ]
     })
   })
 
@@ -43,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)
+  })
diff --git a/src/apis/post/types.ts b/src/apis/post/types.ts
@@ -5,37 +5,36 @@ import type {
   PostSummaries,
   ProductConditionCodes,
   SortOptionsShape,
-  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
 

diff --git a/src/components/common/Dialog/index.tsx b/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>
   )
 }
 

diff --git a/src/components/post/UserProfile/index.tsx b/src/components/post/UserProfile/index.tsx
@@ -27,14 +27,16 @@ const UserProfile = ({
             {level}
           </Badge>
         </Styled.UserName>
-        <Text color="grayScale70" styleType="caption01M" tag="p">
-          {location}
-          {isOfferProfile && ` · ${tradeType}`}
-        </Text>
         {isOfferProfile && (
-          <Text color="grayScale70" styleType="caption01M" tag="p">
-            {date}
-          </Text>
+          <>
+            <Text color="grayScale70" styleType="caption01M" tag="p">
+              {location}
+              {` · ${tradeType}`}
+            </Text>
+            <Text color="grayScale70" styleType="caption01M" tag="p">
+              {date}
+            </Text>
+          </>
         )}
       </Styled.ProfileText>
     </Styled.UserProfile>

diff --git a/src/components/post/UserProfile/types.ts b/src/components/post/UserProfile/types.ts
@@ -3,7 +3,7 @@ import type { TradeTypeNames } from '@types'
 export type UserProfileProps = {
   image?: string
   nickName: string
-  location: string
+  location?: string
   type: 'offer' | 'basic'
   level: number
   date?: string