Merge branch 'develop' into NABI-78

next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    domains: ['cdn.cetizen.com'],
+  },
+}
 
 module.exports = nextConfig

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
@@ -27,6 +28,7 @@
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
+    "lucide-react": "^0.291.0",
     "date-fns": "^2.30.0",
     "js-cookie": "^3.0.5",
     "next": "14.0.1",
@@ -59,6 +61,7 @@
     "@types/react-dom": "^18",
     "@types/tailwindcss": "^3.1.0",
     "chromatic": "^7.5.4",
+    "encoding": "^0.1.13",
     "eslint": "^8",
     "eslint-config-next": "13.5.6",
     "eslint-plugin-storybook": "^0.6.15",

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>
   )
 }