feat(ui/react/components): card 관련 컴포넌트들 추가 (#170)

* feat(ui/react/components/card): Card 컴포넌트 관련 style 추가

* feat(ui/react/components/card): CardBody 컴포넌트 관련 style 추가

* feat(ui/react/components/card): CardFooter 컴포넌트 관련 style 추가

* feat(ui/react/components/card): CardHeader 컴포넌트 관련 style 추가

* feat(ui/react/components/card): Card 컴포넌트 추가

* feat(ui/react/components/card): CardHeader 컴포넌트 추가

* feat(ui/react/components/card): CardBody 컴포넌트 추가

* feat(ui/react/components/card): CardFooter 컴포넌트 추가

* feat(ui/react/components/card): card 관련 컴포넌트들을 모은 index.ts 추가

* feat(ui/react/components/index.ts): card 추가

packages/ui/react/src/components/card/card-body.styles.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const cardBodyBase = style({
+  flex: '1 1 0%',
+  padding: 16,
+});

packages/ui/react/src/components/card/card-body.tsx

@@ -0,0 +1,25 @@
+import {
+  type HTMLFavolinkProps,
+  favolink,
+  forwardRef,
+} from '@favolink-ui/system';
+import { cx } from '@favolink-ui/utils';
+import * as styles from './card-body.styles.css';
+
+export type CardBodyProps = HTMLFavolinkProps<'section'>;
+
+export const CardBody = forwardRef<CardBodyProps, 'section'>(
+  function CardBody(props, ref) {
+    const { children, className, ...restProps } = props;
+
+    return (
+      <favolink.section
+        {...restProps}
+        ref={ref}
+        className={cx('favolink-card__body', styles.cardBodyBase, className)}
+      >
+        {children}
+      </favolink.section>
+    );
+  },
+);

packages/ui/react/src/components/card/card-footer.styles.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+import { flexStyleVars } from '../../styles';
+
+export const cardFooterBase = style({
+  padding: 16,
+  display: 'flex',
+  justifyContent: flexStyleVars.justifyContent,
+});

packages/ui/react/src/components/card/card-footer.tsx

@@ -0,0 +1,40 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import {
+  type HTMLFavolinkProps,
+  favolink,
+  forwardRef,
+} from '@favolink-ui/system';
+import { cx } from '@favolink-ui/utils';
+import * as styles from './card-footer.styles.css';
+import { type FlexStyleProps, flexStyleVars } from '../../styles';
+
+type CardFooterStyleProps = Pick<FlexStyleProps, 'justifyContent'>;
+
+export type CardFooterProps = CardFooterStyleProps &
+  HTMLFavolinkProps<'footer'>;
+
+export const CardFooter = forwardRef<CardFooterProps, 'footer'>(
+  function CardFooter(props, ref) {
+    const { className, style, children, justifyContent, ...restProps } = props;
+
+    return (
+      <favolink.footer
+        {...restProps}
+        ref={ref}
+        className={cx(
+          'favolink-card__footer',
+          styles.cardFooterBase,
+          className,
+        )}
+        style={{
+          ...assignInlineVars({
+            [flexStyleVars.justifyContent]: justifyContent,
+          }),
+          ...style,
+        }}
+      >
+        {children}
+      </favolink.footer>
+    );
+  },
+);

packages/ui/react/src/components/card/card-header.styles.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const cardHeaderBase = style({
+  padding: 16,
+});

packages/ui/react/src/components/card/card-header.tsx

@@ -0,0 +1,29 @@
+import {
+  type HTMLFavolinkProps,
+  favolink,
+  forwardRef,
+} from '@favolink-ui/system';
+import { cx } from '@favolink-ui/utils';
+import * as styles from './card-header.styles.css';
+
+export type CardHeaderProps = HTMLFavolinkProps<'header'>;
+
+export const CardHeader = forwardRef<CardHeaderProps, 'header'>(
+  function CardHeader(props, ref) {
+    const { children, className, ...restProps } = props;
+
+    return (
+      <favolink.header
+        {...restProps}
+        ref={ref}
+        className={cx(
+          'favolink-card__header',
+          styles.cardHeaderBase,
+          className,
+        )}
+      >
+        {children}
+      </favolink.header>
+    );
+  },
+);

packages/ui/react/src/components/card/card.styles.css.ts

@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css';
+import { flexStyleVars } from '../../styles';
+
+export const cardBase = style({
+  minWidth: 0,
+  maxWidth: 310,
+  borderRadius: 12,
+  position: 'relative',
+  display: 'flex',
+  justifyContent: flexStyleVars.justifyContent,
+  alignItems: flexStyleVars.alignItems,
+  flexDirection: flexStyleVars.flexDirection,
+  boxShadow:
+    '0 1px 10px 0 rgba(211, 214, 224, 0.25), 0 1px 10px 0 rgba(211, 214, 224, 0.25)',
+});

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

@@ -0,0 +1,46 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import {
+  type HTMLFavolinkProps,
+  extractProps,
+  favolink,
+  forwardRef,
+} from '@favolink-ui/system';
+import { cx } from '@favolink-ui/utils';
+import * as styles from './card.styles.css';
+import {
+  type FlexStyleProps,
+  flexStyleProps,
+  flexStyleVars,
+} from '../../styles';
+
+type CardStyleProps = Pick<
+  FlexStyleProps,
+  'alignItems' | 'flexDirection' | 'justifyContent'
+>;
+
+export type CardProps = CardStyleProps & HTMLFavolinkProps<'article'>;
+
+export const Card = forwardRef<CardProps, 'article'>(function Card(props, ref) {
+  const { flexDirection = 'column', ...restProps } = props;
+  const { children, className, style, ..._restProps } = extractProps(
+    restProps,
+    flexStyleVars,
+    flexStyleProps,
+  );
+
+  return (
+    <favolink.article
+      {..._restProps}
+      ref={ref}
+      className={cx('favolink-card', styles.cardBase, className)}
+      style={{
+        ...assignInlineVars({
+          [flexStyleVars.flexDirection]: flexDirection,
+        }),
+        ...style,
+      }}
+    >
+      {children}
+    </favolink.article>
+  );
+});

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

@@ -0,0 +1,5 @@
+/* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */
+export { Card, type CardProps } from './card';
+export { CardBody, type CardBodyProps } from './card-body';
+export { CardFooter, type CardFooterProps } from './card-footer';
+export { CardHeader, type CardHeaderProps } from './card-header';

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

@@ -1,5 +1,6 @@
 /* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */
 export * from './button';
+export * from './card';
 export * from './input';
 export * from './layout';
 export * from './link';