Merge branch 'develop' into NABI-62

src/app/(root)/(routes)/items/[itemId]/components/description-section/DescriptionSection.tsx

@@ -0,0 +1,92 @@
+import Image from 'next/image'
+import Badge from '@/components/ui/Badge'
+import Button from '@/components/ui/Button'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+} from '@/components/ui/DropdownMenu'
+import Assets from '@/config/assets'
+import { TYPHOGRAPHY } from '@/styles/sizes'
+import { ItemDetail } from '@/types'
+import { cn } from '@/utils'
+import Dibs from './Dibs'
+
+type DescriptionSectionProps = {
+  itemData: ItemDetail
+}
+
+type TradeStateMap = {
+  [key: string]: {
+    style: 'primary' | 'secondary' | 'gradation' | 'information'
+    text: '거래가능' | '예약중' | '거래성사'
+  }
+}
+
+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={tradeStateMap[status].style}>
+          {tradeStateMap[status].text}
+        </Badge>
+        <h3 className={cn('ml-2', TYPHOGRAPHY.title)}>{cardTitle}</h3>
+        <MoreButton />
+      </div>
+      <div className="flex flex-row items-center">
+        <p
+          className={cn(
+            'mr-2 text-text-secondary-color',
+            TYPHOGRAPHY.description,
+          )}
+        >
+          <u>{category}</u>
+        </p>
+        <p className={cn('text-text-secondary-color', TYPHOGRAPHY.description)}>
+          {createdAt}
+        </p>
+        <Dibs count={dibsCount} />
+      </div>
+      <p className="">{content}</p>
+    </article>
+  )
+}
+
+export default DescriptionSection
+
+const MoreButton = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="ml-auto" size="icon_sm" variant={null}>
+          <Image src={Assets.vMoreIcon} alt="more" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>수정하기</DropdownMenuItem>
+          <DropdownMenuItem>삭제하기</DropdownMenuItem>
+          <DropdownMenuItem>거래완료</DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/app/(root)/(routes)/items/[itemId]/components/description-section/Dibs.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import Assets from '@/config/assets'
+
+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">{count}</p>
+    </div>
+  )
+}
+
+export default Dibs

src/app/(root)/(routes)/items/[itemId]/components/description-section/index.tsx

@@ -0,0 +1,3 @@
+import DescriptionSection from './DescriptionSection'
+
+export default DescriptionSection

src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeInfo.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image'
+import Badge from '@/components/ui/Badge'
+import Assets from '@/config/assets'
+
+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">{title}</div>
+      <Badge size={'lg'} variant={variant} className="ml-auto">
+        {content}
+      </Badge>
+    </div>
+  )
+}
+
+export default TradeInfo

src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeSection.tsx

@@ -0,0 +1,45 @@
+import Button from '@/components/ui/Button'
+import TradeInfo from './TradeInfo'
+
+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' },
+  ]
+
+  return (
+    <section className="flex flex-col gap-2 w-full pt-4">
+      {tradeInfo.map((v, i) => (
+        <TradeInfo
+          key={i}
+          title={v.title}
+          content={v.content}
+          variant={v.variant}
+        />
+      ))}
+
+      <Button className="mt-6" variant={'primary'}>
+        제안 확인하기
+      </Button>
+    </section>
+  )
+}
+
+export default TradeSection

src/app/(root)/(routes)/items/[itemId]/components/trade-section/index.tsx

@@ -0,0 +1,3 @@
+import TradeSection from './TradeSection'
+
+export default TradeSection

src/app/(root)/(routes)/items/[itemId]/page.tsx

@@ -1,17 +1,42 @@
+import { getItemInfo } from '@/services/item/item'
 import ProfileSection from './components/ProfileSection'
+import DescriptionSection from './components/description-section'
+import TradeSection from './components/trade-section'
 
 type ItemPageProps = {
   params: {
     itemId: string
   }
 }
 
-const ItemPage = ({ params }: ItemPageProps) => {
+async function getItemValue(itemId: string) {
+  try {
+    const res = await getItemInfo(itemId)
+    const data = await res.json()
+
+    return data.data.cardResponseDto
+  } catch (e) {
+    console.log(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">
+    <main className="flex-col min-h-screen bg-background-color">
       <div>이미지 슬라이더 영역</div>
-      <ProfileSection profileImg={null} userName="임시이름" />
-      <div>아이템 상세정보 영역</div>
+      <div className="p-4">
+        <ProfileSection profileImg={null} userName={userName} />
+        <DescriptionSection itemData={data} />
+        <TradeSection
+          priceRange={priceRange}
+          tradeType={tradeType}
+          tradeArea={tradeArea}
+        />
+      </div>
     </main>
   )
 }

src/components/ui/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full px-2 font-medium',
+  'inline-flex items-center rounded-full px-2 font-normal',
   {
     variants: {
       variant: {

src/components/ui/Button/Button.tsx

@@ -17,6 +17,7 @@ const buttonVariants = cva(
       size: {
         default: 'h-8 px-4 py-2',
         icon: 'h-10 w-10',
+        icon_sm: 'h-6 w-6',
         sm: 'h-6 px-4 text-xs',
       },
       rounded: {

src/components/ui/Card/Card.stories.tsx

@@ -99,7 +99,7 @@ export const Trade: Story = {
           priceRange: '10000-50000',
           image:
             'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg',
-          status: 'impossible',
+          status: 'EXCHANGEABLE',
         }}
         className={''}
       />

src/components/ui/DropdownMenu/DropdownMenu.tsx

@@ -87,7 +87,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-background-secondary-color/30 focus:text-text-color data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-pointer select-none justify-center items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-background-secondary-color/30 focus:text-text-color data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className,
     )}

src/config/apiEndPoint.ts

@@ -1,9 +1,8 @@
-import { GetItems } from '@/services/item/item'
-
 const ApiEndPoint = {
   kakaoLogin: () => '/oauth2/authorize/kakao/login',
   googleLogin: () => '/oauth2/authorize/google/login',
   test: () => '/test',
+  item: (itemId:string) => `/${itemId}`,
   items: (cursorId: number) => `/items?cursorId=${cursorId}`,
 } as const
 

src/config/assets.ts

@@ -7,6 +7,11 @@ import Logo from '/public/images/logo.svg'
 import MenuIcon from '/public/images/menu-icon.svg'
 import Search from '/public/images/search.svg'
 import XIcon from '/public/images/x-icon.svg'
+import HeartIcon from '/public/images/icon-heart.svg'
+import VMoreIcon from '/public/images/more-vertical.svg'
+import UsersIcon from '/public/images/icon-users.svg'
+import MarkerIcon from '/public/images/icon-marker.svg'
+import MoneyIcon from '/public/images/icon-money.svg'
 
 const Assets = {
   search: Search,
@@ -18,6 +23,11 @@ const Assets = {
   kakaoIcon: KakaoIcon,
   logo: Logo,
   xIcon: XIcon,
+  heartIcon: HeartIcon,
+  vMoreIcon: VMoreIcon,
+  usersIcon: UsersIcon,
+  markerIcon: MarkerIcon,
+  moneyIcon: MoneyIcon
 } as const
 
 export default Assets

src/lib/msw/mocks/handlers.ts

@@ -1,5 +1,5 @@
 import authHandlers from './authHandlers'
-import { itemHandlers } from './itemHandler'
+import { itemHandlers } from './itemHandlers'
 import { testHandlers } from './testHandler'
 
 export const handlers = [...testHandlers, ...authHandlers, ...itemHandlers]