Merge pull request #27 from team-nabi/NABI-82

🎉 제안 카드 컴포넌트 구현

src/components/domain/card/suggest-card/SuggestCard.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import SuggestCard from './SuggestCard'
+
+const meta = {
+  title: 'DOMAIN/SuggestCard',
+  component: SuggestCard,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof SuggestCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {
+    cardTitle: '에어팟 맥스 교환해요',
+    itemName: '에어팟 맥스',
+    priceRange: '30만원대',
+    suggestionType: '오퍼하기',
+  },
+  render: () => {
+    return (
+      <SuggestCard
+        cardTitle={'에어팟 맥스 교환해요'}
+        itemName={'에어팟 맥스'}
+        priceRange={'30만원대'}
+        suggestionType={'offer'}
+      />
+    )
+  },
+}

src/components/domain/card/suggest-card/SuggestCard.tsx

@@ -0,0 +1,52 @@
+import Button from '@/components/ui/Button'
+import Card from '@/components/ui/Card'
+import { CardFlex, CardImage, CardText } from '@/components/ui/Card/Card'
+import { DEFAULT_ITEM_THUMBNAIL_IMG } from '@/constants/image'
+
+type SuggestCardProps = {
+  thumbNail?: string
+  cardTitle: string
+  itemName: string
+  priceRange: string
+  suggestionType: string
+}
+
+const SuggestCard = ({
+  thumbNail = DEFAULT_ITEM_THUMBNAIL_IMG,
+  cardTitle,
+  itemName,
+  priceRange,
+  suggestionType,
+}: SuggestCardProps) => {
+  return (
+    <Card size="md">
+      <CardFlex
+        direction={'row'}
+        justify={'start'}
+        align={'center'}
+        gap={'space'}
+      >
+        <div className="h-full w-36 relative">
+          <CardImage
+            src={thumbNail}
+            alt="thumbNail"
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
+        <CardFlex direction={'col'} justify={'between'} className="h-full grow">
+          <CardText type={'title'}>{cardTitle}</CardText>
+          <CardText type={'description'}>{itemName}</CardText>
+          <CardText type={'description'}>{priceRange}</CardText>
+          <div className="flex justify-end">
+            <Button variant={'gradation'} size={'sm'}>
+              {suggestionType === 'poke' ? '찔러보기' : '오퍼하기'}
+            </Button>
+          </div>
+        </CardFlex>
+      </CardFlex>
+    </Card>
+  )
+}
+
+export default SuggestCard

src/components/domain/card/suggest-card/index.tsx

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

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',
+        sm: 'h-6 px-4 text-xs',
       },
       rounded: {
         default: 'rounded-md',

src/constants/image.ts

@@ -1,4 +1,4 @@
 const DEFAULT_PROFILE_IMG = 'https://github.com/shadcn.png'
-const DEFAULT_ITEM_IMG = '';
+const DEFAULT_ITEM_THUMBNAIL_IMG = 'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg';
 
-export {DEFAULT_PROFILE_IMG, DEFAULT_ITEM_IMG}
+export {DEFAULT_PROFILE_IMG, DEFAULT_ITEM_THUMBNAIL_IMG}