🎉 제안 카드 컴포넌트 구현

team-nabi · Nov 1, 2023 · d443ffe · d443ffe
1 parent 9b4ddd9
commit d443ffe
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 7 deletions.
diff --git a/src/components/domain/card/suggest-card/SuggestCard.stories.tsx 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
@@ -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
@@ -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',