From d443ffe54462be412f5a1e324e2765dda4a8c1c3 Mon Sep 17 00:00:00 2001
From: juyeon-park <lpjy1107@gmail.com>
Date: Wed, 1 Nov 2023 19:47:04 +0900
Subject: [PATCH] =?UTF-8?q?:tada:=20=EC=A0=9C=EC=95=88=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../card/suggest-card/SuggestCard.stories.tsx | 31 ++++++++++++++
 .../domain/card/suggest-card/SuggestCard.tsx  | 42 +++++++++++++++----
 src/components/ui/Button/Button.tsx           |  1 +
 3 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 src/components/domain/card/suggest-card/SuggestCard.stories.tsx

diff --git a/src/components/domain/card/suggest-card/SuggestCard.stories.tsx b/src/components/domain/card/suggest-card/SuggestCard.stories.tsx
new file mode 100644
index 00000000..de6b0705
--- /dev/null
+++ b/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'}
+      />
+    )
+  },
+}
diff --git a/src/components/domain/card/suggest-card/SuggestCard.tsx b/src/components/domain/card/suggest-card/SuggestCard.tsx
index 60ff1f89..e6bfee73 100644
--- a/src/components/domain/card/suggest-card/SuggestCard.tsx
+++ b/src/components/domain/card/suggest-card/SuggestCard.tsx
@@ -1,20 +1,48 @@
+import Button from '@/components/ui/Button'
 import Card from '@/components/ui/Card'
-import { CardFlex, CardImage } from '@/components/ui/Card/Card'
+import { CardFlex, CardImage, CardText } from '@/components/ui/Card/Card'
 
-const SuggestCard = () => {
+type SuggestCardProps = {
+  thumbNail?: string
+  cardTitle: string
+  itemName: string
+  priceRange: string
+  suggestionType: string
+}
+
+const SuggestCard = ({
+  thumbNail = 'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg',
+  cardTitle,
+  itemName,
+  priceRange,
+  suggestionType,
+}: SuggestCardProps) => {
   return (
     <Card size="md">
-      <CardFlex>
+      <CardFlex
+        direction={'row'}
+        justify={'start'}
+        align={'center'}
+        gap={'space'}
+      >
         <div className="h-full w-36 relative">
           <CardImage
-            src={
-              'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg'
-            }
-            alt="Picture of the author"
+            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>
   )
diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx
index ccb3dbc5..5839e4cc 100644
--- a/src/components/ui/Button/Button.tsx
+++ b/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',