🎉 상세정보페이지 ui 최종 완성

team-nabi · Nov 2, 2023 · 0f17fbd · 0f17fbd
1 parent 15dad05
commit 0f17fbd
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 43 deletions.
diff --git a/src/app/(root)/(routes)/items/[itemId]/components/description-section/DescriptionSection.tsx b/src/app/(root)/(routes)/items/[itemId]/components/description-section/DescriptionSection.tsx
@@ -10,36 +10,64 @@ import {
 } from '@/components/ui/DropdownMenu'
 import Assets from '@/config/assets'
 import { TYPHOGRAPHY } from '@/styles/sizes'
+import { ItemDetail } from '@/types'
 import Dibs from './Dibs'
 
-type DescriptionSectionProps = {}
+type DescriptionSectionProps = {
+  itemData: ItemDetail
+}
+
+type TradeStateMap = {
+  [key: string]: {
+    style:
+      | 'primary'
+      | 'secondary'
+      | 'gradation'
+      | 'information'
+      | null
+      | undefined
+    text: string
+  }
+}
 
-const DescriptionSection = ({}: DescriptionSectionProps) => {
+const DescriptionSection = ({
+  itemData: { status, cardTitle, category, createdAt, dibsCount, content },
+}: DescriptionSectionProps) => {
+  const tradeStateMap: TradeStateMap = {
+    TRADE_AVAILABLE: {
+      style: 'primary',
+      text: '거래가능',
+    },
+    RESERVED: {
+      style: 'secondary',
+      text: '예약중',
+    },
+    TRADE_COMPLETE: {
+      style: 'gradation',
+      text: '거래성사',
+    },
+  }
   return (
     <article className="flex flex-col w-full pt-4 pb-8  border-b-[1px] gap-4">
       <div className="flex flex-row items-center">
-        <Badge variant={'gradation'} size={'sm'} className="mr-2">
-          거래가능
+        <Badge variant={tradeStateMap[status].style}>
+          {tradeStateMap[status].text}
         </Badge>
-        <h3 className={`${TYPHOGRAPHY.title}`}>스위치 교환가능합니다</h3>
+        <h3 className={`${TYPHOGRAPHY.title} ml-2`}>{cardTitle}</h3>
         <MoreButton />
       </div>
       <div className="flex flex-row items-center">
         <p
           className={`${TYPHOGRAPHY.description} mr-2 text-text-secondary-color`}
         >
-          <u>전자기기</u>
+          <u>{category}</u>
         </p>
         <p className={`${TYPHOGRAPHY.description} text-text-secondary-color`}>
-          25분 전
+          {createdAt}
         </p>
-        <Dibs />
+        <Dibs count={dibsCount} />
       </div>
-      <p className="">
-        닌텐도 스위치 팝니다. 구매 후에 쭉 투명케이스 쓰고 사용해서 상태 정말
-        좋아요~ 박스는 이사가면서 버려서 없지만 구성품은 다 있고 스위치 프로콘
-        같이 드립니다.
-      </p>
+      <p className="">{content}</p>
     </article>
   )
 }

diff --git a/src/app/(root)/(routes)/items/[itemId]/components/description-section/Dibs.tsx b/src/app/(root)/(routes)/items/[itemId]/components/description-section/Dibs.tsx
@@ -2,13 +2,16 @@ import Image from 'next/image'
 import Button from '@/components/ui/Button'
 import Assets from '@/config/assets'
 
-const Dibs = () => {
+type DibsProps = {
+  count: number
+}
+const Dibs = ({ count }: DibsProps) => {
   return (
     <div className="flex flex-row gap-0 items-center ml-auto">
       <Button size="icon_sm" variant={null}>
         <Image src={Assets.heartIcon} alt="dibs" />
       </Button>
-      <p className="ml-1">12</p>
+      <p className="ml-1">{count}</p>
     </div>
   )
 }

diff --git a/src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeInfo.tsx b/src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeInfo.tsx
@@ -2,13 +2,19 @@ import Image from 'next/image'
 import Badge from '@/components/ui/Badge'
 import Assets from '@/config/assets'
 
-const TradeInfo = () => {
+type TradeInfoProps = {
+  title: string
+  content: string
+  variant: 'primary' | 'information'
+}
+
+const TradeInfo = ({ title, content, variant }: TradeInfoProps) => {
   return (
     <div className="flex flex-row items-center">
       <Image src={Assets.moneyIcon} alt="infoImg" />
-      <div className="text-sm ml-2 font-normal">가격대</div>
-      <Badge size={'lg'} variant={'primary'} className="ml-auto">
-        30만원대
+      <div className="text-sm ml-2 font-normal">{title}</div>
+      <Badge size={'lg'} variant={variant} className="ml-auto">
+        {content}
       </Badge>
     </div>
   )

diff --git a/src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeSection.tsx b/src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeSection.tsx
@@ -1,14 +1,40 @@
 import Button from '@/components/ui/Button'
 import TradeInfo from './TradeInfo'
 
-type TradeSectionProps = {}
+type TradeSectionProps = {
+  priceRange: string
+  tradeType: string
+  tradeArea: string
+}
+
+type TradeInfo = {
+  title: string
+  content: string
+  variant: 'primary' | 'information'
+}
+
+const TradeSection = ({
+  priceRange,
+  tradeType,
+  tradeArea,
+}: TradeSectionProps) => {
+  const tradeInfo: TradeInfo[] = [
+    { title: '가격대', content: priceRange, variant: 'primary' },
+    { title: '거래 방식', content: tradeType, variant: 'information' },
+    { title: '거래 지역', content: tradeArea, variant: 'information' },
+  ]
 
-const TradeSection = ({}: TradeSectionProps) => {
   return (
     <section className="flex flex-col gap-2 w-full pt-4">
-      <TradeInfo />
-      <TradeInfo />
-      <TradeInfo />
+      {tradeInfo.map((v, i) => (
+        <TradeInfo
+          key={i}
+          title={v.title}
+          content={v.content}
+          variant={v.variant}
+        />
+      ))}
+
       <Button className="mt-6" variant={'primary'}>
         제안 확인하기
       </Button>

diff --git a/src/app/(root)/(routes)/items/[itemId]/page.tsx b/src/app/(root)/(routes)/items/[itemId]/page.tsx
@@ -13,24 +13,29 @@ async function getItemValue(itemId: string) {
   try {
     const res = await getItemInfo(itemId)
     const data = await res.json()
-    return data
+
+    return data.data.cardResponseDto
   } catch (e) {
-    console.log(e)
-    return null
+    console.error(e)
   }
 }
 
 const ItemPage = async ({ params }: ItemPageProps) => {
   const data = await getItemValue(params.itemId)
   console.log(data)
+  const { userName, priceRange, tradeType, tradeArea } = data
 
   return (
     <main className="flex-col min-h-screen bg-background-color">
       <div>이미지 슬라이더 영역</div>
       <div className="p-4">
-        <ProfileSection profileImg={null} userName="임시이름" />
-        <DescriptionSection />
-        <TradeSection />
+        <ProfileSection profileImg={null} userName={userName} />
+        <DescriptionSection itemData={data} />
+        <TradeSection
+          priceRange={priceRange}
+          tradeType={tradeType}
+          tradeArea={tradeArea}
+        />
       </div>
     </main>
   )

diff --git a/src/lib/msw/mocks/handlers.ts b/src/lib/msw/mocks/handlers.ts
@@ -1,4 +1,4 @@
-import { itemHandler } from './itemHandlers'
+import { itemHandlers } from './itemHandlers'
 import { testHandlers } from './testHandler'
 
-export const handlers = [...testHandlers, ...itemHandler]
+export const handlers = [...testHandlers, ...itemHandlers]
diff --git a/src/lib/msw/mocks/itemHandlers.ts b/src/lib/msw/mocks/itemHandlers.ts
@@ -4,7 +4,7 @@ import ApiEndPoint from '@/config/apiEndPoint'
 
 const baseUrl = Environment.apiAddress()
 
-export const itemHandler = [
+export const itemHandlers = [
   rest.get(`${baseUrl}${ApiEndPoint.item('3')}`, async (_req, res, ctx) => {
     return res(
       ctx.status(200),
@@ -15,15 +15,15 @@ export const itemHandler = [
 			"cardResponseDto": {
 					"cardId": 1,
 					"cardTitle": "아이폰 16 팝니다",
-					"category": "electro",
+					"category": "전자기기",
 					"itemName": "아이폰 16",
 					"pokeAvailable": true,
 					"createdAt": '2023-10-23-20:08',
 					"modifiedAt": '2023-10-24-20:08',
 					"viewCount": 19,
-					"priceRange": "10000-50000",
+					"priceRange": "10만원대",
 					"content": "이거 진짜 쩔어요",
-					"status": "can_exchange",
+					"status": "TRADE_AVAILABLE",
 					"images": [
 						{
 							"_id": 1,
@@ -34,7 +34,7 @@ export const itemHandler = [
 							"image": "이미지 url"
 						}
 					],
-					"dibsCount": 1,
+					"dibsCount": 14,
 					"userId": 1,
 					"userName": "왕쩌는 구범모",
 					"tradeType": "직거래",

diff --git a/src/services/item/item.ts b/src/services/item/item.ts
@@ -2,12 +2,7 @@ import apiClient from "../apiClient"
 import ApiEndPoint from "@/config/apiEndPoint"
 
 const getItemInfo = async(itemId:string) =>{
-    console.log(itemId)
-        const response = await apiClient.get(ApiEndPoint.item(itemId), { next: { revalidate: 10 } },
-        {
-          'Content-Type': 'application/json',
-        }
-        )
+        const response = await apiClient.get(ApiEndPoint.item(itemId))
         return response    
 }