feat: 상품 상세 페이지 api 연결 (#192)

src/apis/offer/apis.ts

@@ -0,0 +1,7 @@
+import type { GetPostOffersReq, GetPostOffersRes } from './types'
+import { http } from '@utils/http'
+
+export const getPostOffers = (postId: number) =>
+  http.get<GetPostOffersReq, GetPostOffersRes>(`/posts/${postId}/offers`, {
+    postId
+  })

src/apis/offer/index.ts

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

src/apis/offer/queries.ts

@@ -0,0 +1,8 @@
+import { useQuery } from '@tanstack/react-query'
+import { getPostOffers } from './apis'
+
+export const useGetPostOffersQuery = (postId: number) =>
+  useQuery({
+    queryKey: ['getPostOffers', postId],
+    queryFn: () => getPostOffers(postId)
+  })

src/apis/offer/types.ts

@@ -2,7 +2,6 @@ import type { CommonCreation, Offers, OfferSummaries } from '@types'
 
 export type GetPostOffersReq = {
   postId: number
-  page: number
 }
 export type GetPostOffersRes = Offers
 

src/apis/post/apis.ts

@@ -1,12 +1,16 @@
 import type {
+  GetCategoriesRes,
+  GetPostRes,
   CreatePostReq,
   CreatePostRes,
-  GetCategoriesRes,
   GetPostsReq,
   GetPostsRes
 } from './types'
 import { http } from '@utils/http'
 
+export const getPost = (id: number) =>
+  http.get<null, GetPostRes>(`/posts/${id}`)
+
 export const createPost = (param: CreatePostReq) =>
   http.post<CreatePostReq, CreatePostRes>('/posts', param)
 

src/apis/post/index.ts

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

src/apis/post/queries.ts

@@ -1,12 +1,18 @@
 import { useMutation, useQuery, useInfiniteQuery } from '@tanstack/react-query'
-import { getCategories, createPost, getPosts } from './apis'
+import { getPost, getCategories, createPost, getPosts } from './apis'
 import type { CreatePostReq, GetPostsReq, GetPostsRes } from './types'
 
 export const useCreatePostMutation = () =>
   useMutation({
     mutationFn: (param: CreatePostReq) => createPost(param)
   })
 
+export const useGetPostQuery = (id: number) =>
+  useQuery({
+    queryKey: ['getPost', id],
+    queryFn: () => getPost(id)
+  })
+
 export const useGetCategoriesQuery = () =>
   useQuery({
     queryKey: ['getCategories'],

src/components/post/PostFieldList/PostFieldList.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { PostFieldList as PostFieldListComponent } from './index'
+
+type PostFieldList = typeof PostFieldListComponent
+
+const meta: Meta<PostFieldList> = {
+  component: PostFieldListComponent,
+  title: 'Post/PostFieldList'
+}
+
+export default meta
+
+export const Default: StoryObj<PostFieldList> = {
+  args: {
+    date: '1시간 전',
+    productCondition: '새상품',
+    tradeType: '직거래',
+    location: '관악구'
+  },
+  render: args => <PostFieldListComponent {...args} />
+}

src/components/post/PostFieldList/index.tsx

@@ -0,0 +1,46 @@
+import { Divider, Text } from '@offer-ui/react'
+import type { ReactElement } from 'react'
+import { Styled } from './styled'
+import type { PostFieldListProps } from './types'
+
+const PostFieldList = ({
+  productCondition,
+  tradeType,
+  date,
+  location,
+  height = 50
+}: PostFieldListProps): ReactElement => {
+  const fields = [
+    {
+      label: '작성일',
+      value: date
+    },
+    {
+      label: '상품 상태',
+      value: productCondition
+    },
+    {
+      label: '거래 방식',
+      value: tradeType
+    },
+    { label: '거래 지역', value: location }
+  ]
+
+  return (
+    <>
+      {fields.map(({ label, value }) => (
+        <Styled.PostFieldList key={label}>
+          <Divider direction="vertical" length={`${height}px`} />
+          <Styled.TextWrapper height={height}>
+            <Text color="grayScale70" styleType="body02M">
+              {label}
+            </Text>
+            <Text styleType="subtitle01B">{value}</Text>
+          </Styled.TextWrapper>
+        </Styled.PostFieldList>
+      ))}
+    </>
+  )
+}
+
+export { PostFieldListProps, PostFieldList }

src/components/post/PostField/styled.ts → src/components/post/PostFieldList/styled.ts

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 import type { StyledTextWrapperProps } from './types'
 
-const PostField = styled.div`
+const PostFieldList = styled.div`
   display: flex;
   gap: 12px;
 `
@@ -15,6 +15,6 @@ const TextWrapper = styled.div<StyledTextWrapperProps>`
 `
 
 export const Styled = {
-  PostField,
+  PostFieldList,
   TextWrapper
 }

src/components/post/PostFieldList/types.ts

@@ -0,0 +1,14 @@
+export type PostField = {
+  label: string
+  value: string
+}
+
+export type PostFieldListProps = {
+  date: string
+  location: string
+  productCondition: string
+  tradeType: string
+  height?: number
+}
+
+export type StyledTextWrapperProps = StyledProps<PostFieldListProps, 'height'>