[FEAT] 카드 큐레이션 컴포넌트 구현

.storybook/preview.tsx

@@ -1,3 +1,7 @@
+import '../src/styles/fonts.css';
+import '../src/styles/global.css';
+import '../src/styles/reset.css';
+
 import type { Preview } from '@storybook/react';
 
 const preview: Preview = {

src/components/curation/CurationCard/CurationCard.tsx

@@ -0,0 +1,24 @@
+import * as styles from './curationCard.css';
+
+interface CurationCardProps {
+  bgImage: string;
+  title: string;
+  subtitle: string;
+  onClick: () => void;
+}
+
+const CurationCard = ({ bgImage, title, subtitle, onClick }: CurationCardProps) => {
+  return (
+    <button
+      className={styles.cardContainer}
+      style={{ backgroundImage: `url(${bgImage})` }}
+      onClick={onClick}>
+      <div className={styles.textbox}>
+        <p className={styles.title}>{title}</p>
+        <p className={styles.subtitle}>{subtitle}</p>
+      </div>
+    </button>
+  );
+};
+
+export default CurationCard;

src/components/curation/CurationCard/curationCard.css.ts

@@ -0,0 +1,30 @@
+import theme from '@styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const cardContainer = style({
+  width: '28.5rem',
+  height: '26.8rem',
+  borderRadius: '8px',
+  overflow: 'hidden',
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  display: 'flex',
+  alignItems: 'flex-end',
+
+  padding: '1.6rem',
+  color: theme.COLORS.white,
+});
+
+export const textbox = style({
+  display: 'flex',
+  flexDirection: 'column',
+  textAlign: 'start',
+});
+
+export const title = style({
+  ...theme.FONTS.h3Sb18,
+});
+
+export const subtitle = style({
+  ...theme.FONTS.b9R15,
+});

src/stories/CurationCard.stories.ts

@@ -0,0 +1,37 @@
+import CurationCard from '@components/curation/CurationCard/CurationCard';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Curation/CurationCard',
+  component: CurationCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    bgImage: {
+      control: { type: 'text' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    subtitle: {
+      control: { type: 'text' },
+    },
+    onClick: {
+      action: 'clicked',
+    },
+  },
+  args: {
+    bgImage: 'https://img.danawa.com/images/descFiles/6/110/5109431_agiLaciMHn_1659098198501.jpeg',
+    title: '고양이 있는 절 봤어?',
+    subtitle: '용문사에 있는 고양이 좀 봐. 귀엽지?',
+    onClick: () => alert('click !'),
+  },
+} satisfies Meta<typeof CurationCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};