feat(ui): card component

packages/ui/src/components/card/Card.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode } from 'react';
+import { wrapperStyle } from './cardStyle.css';
+
+export interface CardProps extends ComponentProps<'div'> {
+  children: ReactNode | ReactNode[];
+}
+
+export function Card({ children, ...rest }: CardProps) {
+  return (
+    <div className={wrapperStyle} {...rest}>
+      {children}
+    </div>
+  );
+}

packages/ui/src/components/card/cardStyle.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+import { colors, radius, spacings } from '../../foundations';
+
+export const wrapperStyle = style({
+  width: '100%',
+  backgroundColor: colors.white100,
+  border: `1px solid ${colors.neutral300}`,
+  padding: `${spacings.xl} ${spacings.md}`,
+  gap: spacings.xl,
+  borderRadius: radius.xl,
+  display: 'flex',
+  flexDirection: 'column',
+});

packages/ui/src/components/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';

packages/ui/src/components/index.ts

@@ -2,6 +2,8 @@ export { Button } from './button';
 export type { ButtonProps } from './button';
 export { Bubble } from './bubble';
 export type { BubbleProps } from './bubble';
+export { Card } from './card';
+export type { CardProps } from './card';
 export { ImageButton } from './image-button';
 export type { ImageButtonProps } from './image-button';
 export { CTAButton, isVariantOne } from './cta-button';

packages/ui/src/index.ts

@@ -13,6 +13,7 @@ export {
   WheelPickerItem,
   BottomSheet,
   Chip,
+  Card,
   TextField,
   Agreement,
 } from './components';
@@ -30,6 +31,7 @@ export type {
   WheelPickerItemProps,
   BottomSheetProps,
   ChipProps,
+  CardProps,
   TextFieldProps,
   AgreementProps,
   AgreementItemProps,