Merge pull request #24 from team-nabi/NABI-60

🎉  TradeStateCard 컴포넌트 구현

package.json

@@ -27,6 +27,7 @@
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
+    "date-fns": "^2.30.0",
     "next": "13.5.6",
     "next-themes": "^0.2.1",
     "react": "^18",

src/components/domain/card/trade-state-card/TradeStateCard.tsx

@@ -0,0 +1,74 @@
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+import koLocale from 'date-fns/locale/ko'
+import Badge from '@/components/ui/Badge'
+import Card from '@/components/ui/Card'
+import { CardFlex, CardImage, CardText } from '@/components/ui/Card/Card'
+import { Item } from '@/types'
+
+type TradeStateCardProps = {
+  item: Item
+}
+type TradeStateMap = {
+  [key: string]: {
+    style:
+      | 'primary'
+      | 'secondary'
+      | 'gradation'
+      | 'information'
+      | null
+      | undefined
+    text: string
+  }
+}
+
+const TradeStateCard = ({
+  item: { image, cardTitle, tradeState, itemName, priceRange, createdAt },
+}: TradeStateCardProps) => {
+  const tradeStateMap: TradeStateMap = {
+    possible: {
+      style: 'primary',
+      text: '거래가능',
+    },
+    impossible: {
+      style: 'secondary',
+      text: '예약중',
+    },
+  }
+
+  return (
+    <Card size={'sm'}>
+      <CardFlex
+        direction={'row'}
+        justify={'start'}
+        align={'center'}
+        gap={'space'}
+        className="h-full"
+      >
+        <div className="h-full w-32 relative">
+          <CardImage
+            src={image}
+            alt="이미지가 없습니다."
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
+
+        <CardFlex direction={'col'} justify={'between'} className="h-full">
+          <CardFlex align={'center'} gap={'space'}>
+            <CardText type={'title'}>{cardTitle}</CardText>
+            <Badge variant={tradeStateMap[tradeState].style}>
+              {tradeStateMap[tradeState].text}
+            </Badge>
+          </CardFlex>
+          <CardText type={'description'}>{itemName}</CardText>
+          <CardText type={'description'}>{priceRange}</CardText>
+          <CardText type={'date'}>
+            {formatDistanceToNow(new Date(createdAt), { locale: koLocale })}
+          </CardText>
+        </CardFlex>
+      </CardFlex>
+    </Card>
+  )
+}
+
+export default TradeStateCard

src/components/domain/card/trade-state-card/index.tsx

@@ -0,0 +1,3 @@
+import { default as TradeStateCard } from './TradeStateCard'
+
+export default TradeStateCard

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import TradeStateCard from '@/components/domain/card/trade-state-card'
 import Button from '../Button'
 import { Card, CardFlex, CardImage, CardText } from './Card'
 
@@ -22,6 +23,7 @@ export const Small: Story = {
           justify={'start'}
           align={'center'}
           gap={'space'}
+          className="h-full"
         >
           <div className="h-full w-32 relative">
             <CardImage
@@ -34,7 +36,7 @@ export const Small: Story = {
             />
           </div>
 
-          <CardFlex direction={'col'} justify={'between'}>
+          <CardFlex direction={'col'} justify={'between'} className="h-full">
             <CardText type={'title'}>스위치 팜</CardText>
             <CardText type={'description'}>스위치</CardText>
             <CardText type={'description'}>10만원대</CardText>
@@ -52,6 +54,7 @@ export const Large: Story = {
     return (
       <Card size={'lg'}>
         <CardFlex
+          className="h-full"
           direction={'row'}
           justify={'start'}
           align={'center'}
@@ -68,7 +71,7 @@ export const Large: Story = {
             />
           </div>
 
-          <CardFlex direction={'col'} justify={'between'}>
+          <CardFlex direction={'col'} justify={'between'} className="h-full">
             <CardText type={'title'}>스위치 팜</CardText>
             <CardText type={'description'}>스위치</CardText>
             <CardText type={'description'}>10만원대</CardText>
@@ -80,3 +83,25 @@ export const Large: Story = {
     )
   },
 }
+export const Trade: Story = {
+  args: {},
+  render: () => {
+    return (
+      <TradeStateCard
+        item={{
+          _id: 1, // 내려줄 때 리스트 순서
+          cardId: 1,
+          cardTitle: '아이폰 16 팝니다',
+          itemName: '아이폰 16',
+          createdAt: '2023-11-01T08:08:00',
+          modifiedAt: '2023-11-01T08:08:00',
+          dibCount: 19,
+          priceRange: '10000-50000',
+          image:
+            'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg',
+          tradeState: 'impossible',
+        }}
+      />
+    )
+  },
+}

src/components/ui/Card/Card.tsx

@@ -37,7 +37,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
 )
 Card.displayName = 'Card'
 
-const cardFlexVariants = cva('flex h-full', {
+const cardFlexVariants = cva('flex', {
   variants: {
     direction: {
       row: 'flex-row',

src/types/index.ts

@@ -0,0 +1,12 @@
+export interface Item {
+  _id: number
+  cardId: number
+  cardTitle: string
+  itemName: string
+  createdAt: string
+  modifiedAt: string
+  dibCount: number
+  priceRange: string
+  image: string
+  tradeState: 'possible' | 'impossible'
+}