Card 컴포넌트 ESLint 적용

packages/card/src/components/Card.tsx

@@ -9,16 +9,16 @@ import { REQUIRED_CARD_PROPS } from '../constants';
 import omitProps from '../utils/omitProps';
 import type { CardProps } from '../types';
 
-export const Card = (props: CardProps) => {
-  const { children, ...propsWithoutChildren } = props;
-  const domAttributes = omitProps(propsWithoutChildren, REQUIRED_CARD_PROPS);
+export const Card = ({ children, ...restProps }: CardProps) => {
+  const domAttributes = omitProps(restProps, REQUIRED_CARD_PROPS);
 
   return (
-    <CardProvider cardProps={propsWithoutChildren}>
-      <CardContainer {...domAttributes}>{props.children}</CardContainer>
+    <CardProvider cardProps={restProps}>
+      <CardContainer {...domAttributes}>{children}</CardContainer>
     </CardProvider>
   );
 };
+
 Card.displayName = 'Card';
 Card.Header = CardHeader;
 Card.Body = CardBody;

packages/card/src/components/CardBody.tsx

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/react';
 import { useContext } from 'react';
 import { createClassVariant } from '@jdesignlab/theme';
 import { CardContext } from '../context';
-import createContentStyle from '../styles/createContentStyle';
+import * as Style from '../styles';
 import { DEFAULT_BORDER_COLOR } from '../constants';
 import type { CardBodyProps } from '../types';
 
@@ -13,7 +13,7 @@ export const CardBody = (props: CardBodyProps) => {
   return jsx(
     as,
     {
-      css: createContentStyle(direction, DEFAULT_BORDER_COLOR),
+      css: Style.createBorderDirection(direction, DEFAULT_BORDER_COLOR),
       className: `${createClassVariant('card', 'content')} ${className}`,
       ...restProps
     },

packages/card/src/components/CardContainer.tsx

@@ -4,15 +4,14 @@ import { useContext } from 'react';
 import { createClassVariant } from '@jdesignlab/theme';
 import { DEFAULT_BORDER_COLOR } from '../constants';
 import { CardContext } from '../context';
-import createCardStyle from '../styles/createCardStyle';
-import createFlexStyle from '../styles/createFlexStyle';
+import * as Style from '../styles';
 import { CardProps, CardStyle } from '../types';
 
 export const CardContainer = (props: Omit<CardProps, CardStyle>) => {
   const { children, as = 'div', role = 'article', className = '', ...restProps } = props;
   const { size, variant, color, justify, align, direction } = useContext(CardContext).styleProps;
-  const cardBaseStyle = createCardStyle(size, variant, color, DEFAULT_BORDER_COLOR);
-  const flexStyle = createFlexStyle(justify, align, direction);
+  const cardBaseStyle = Style.createCardVariant(size, variant, color, DEFAULT_BORDER_COLOR);
+  const flexStyle = Style.createFlexStyle(justify, align, direction);
   return jsx(
     as,
     {

packages/card/src/components/CardDivider.tsx

@@ -1,14 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import { useContext } from 'react';
 import { createClassVariant } from '@jdesignlab/theme';
-import createDividerStyle from '../styles/createDividerStyle';
+import * as Style from '../styles';
 import { CardContext } from '../context';
 
 export const CardDivider = () => {
   const { direction } = useContext(CardContext).styleProps;
   return (
     <div
-      css={createDividerStyle(direction)}
+      css={Style.createDivider(direction)}
       role="presentation"
       className={createClassVariant('card', 'content', 'divider')}
     />

packages/card/src/components/CardFooter.tsx

@@ -2,9 +2,9 @@
 import { jsx } from '@emotion/react';
 import { useContext } from 'react';
 import { createClassVariant } from '@jdesignlab/theme';
+import * as Style from '../styles';
 import { DEFAULT_BORDER_COLOR } from '../constants';
 import { CardContext } from '../context';
-import createContentStyle from '../styles/createContentStyle';
 import type { CardFooterProps } from '../types';
 
 export const CardFooter = (props: CardFooterProps) => {
@@ -13,7 +13,7 @@ export const CardFooter = (props: CardFooterProps) => {
   return jsx(
     as,
     {
-      css: createContentStyle(direction, DEFAULT_BORDER_COLOR),
+      css: Style.createBorderDirection(direction, DEFAULT_BORDER_COLOR),
       className: `${className} ${createClassVariant('card', 'footer')}`,
       ...restProps
     },

packages/card/src/components/CardHeader.tsx

@@ -1,20 +1,20 @@
 /** @jsxImportSource @emotion/react */
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { useContext } from 'react';
 import { createClassVariant } from '@jdesignlab/theme';
+import * as Style from '../styles';
 import { CardContext } from '../context';
-import createContentStyle from '../styles/createContentStyle';
-import type { CardHeaderProps } from '../types';
 import { DEFAULT_BORDER_COLOR } from '../constants';
+import type { CardHeaderProps } from '../types';
 
 export const CardHeader = (props: CardHeaderProps) => {
-  const { children, as = 'header', role = 'heading', className = '', ...restProps } = props;
+  const { children, as = 'header', className = '', ...restProps } = props;
   const { direction } = useContext(CardContext).styleProps;
 
   return jsx(
     as,
     {
-      css: [createContentStyle(direction, DEFAULT_BORDER_COLOR)],
+      css: [Style.createBorderDirection(direction, DEFAULT_BORDER_COLOR)],
       className: `${className} ${createClassVariant('card', 'footer')}`,
       ...restProps
     },

packages/card/src/components/CardProvider.tsx

@@ -1,6 +1,23 @@
+import { useMemo } from 'react';
 import { defaultContextValues, CardContext } from '../context';
+import type { FlexToken, Direction, Size, Variant } from '../types';
+import type { ColorToken } from '@jdesignlab/theme';
 
-export const CardProvider = ({ ...props }) => {
+interface CardProps {
+  align?: FlexToken;
+  justify?: FlexToken;
+  color?: ColorToken;
+  direction?: Direction;
+  size?: Size;
+  variant?: Variant;
+}
+
+interface CardProviderProps {
+  cardProps: CardProps;
+  children: React.ReactNode;
+}
+
+export const CardProvider = ({ ...props }: CardProviderProps) => {
   const { cardProps } = props;
   const defaultStyleProps = defaultContextValues.styleProps;
 
@@ -14,14 +31,20 @@ export const CardProvider = ({ ...props }) => {
     ...restProps
   } = cardProps;
 
-  return (
-    <CardContext.Provider
-      value={{
-        styleProps: { align, color, direction, justify, size, variant },
-        cardProps: restProps
-      }}
-    >
-      {props.children}
-    </CardContext.Provider>
+  const providerValue = useMemo(
+    () => ({
+      styleProps: {
+        align,
+        color,
+        direction,
+        justify,
+        size,
+        variant
+      },
+      cardProps: restProps
+    }),
+    [align, color, direction, justify, restProps, size, variant]
   );
+
+  return <CardContext.Provider value={providerValue}>{props.children}</CardContext.Provider>;
 };

packages/card/src/styles.ts

@@ -0,0 +1,113 @@
+import { css } from '@emotion/react';
+import { hexToRgba, getColorByToken } from '@jdesignlab/theme';
+import { DEFAULT_BORDER_COLOR } from './constants';
+import type { ColorToken } from '@jdesignlab/theme';
+import type { Size, Variant, Direction, FlexMap, FlexToken } from './types';
+
+export const createCardVariant = (
+  size: Size,
+  variant: Variant,
+  backgroundColor: ColorToken,
+  borderColor: ColorToken
+) => {
+  const hexBorderColor = getColorByToken(borderColor);
+
+  const baseStyle = css({
+    boxSizing: 'border-box',
+    padding: '12px 24px'
+  });
+
+  const variantStyle = () => {
+    switch (variant) {
+      case 'filled':
+        return css({
+          boxSizing: 'border-box',
+          boxShadow: 'none',
+          backgroundColor: `${getColorByToken(backgroundColor)}`
+        });
+      case 'outlined':
+        return css({ boxSizing: 'border-box', border: `1px solid ${hexBorderColor}` });
+      default:
+        return css({
+          boxSizing: 'border-box',
+          boxShadow: `0 3px 6px ${hexToRgba(hexBorderColor, 0.16)}, 0 3px 6px ${hexToRgba(hexBorderColor, 0.2)}`
+        });
+    }
+  };
+
+  const sizeStyle = () => {
+    switch (size) {
+      case 'lg':
+        return css({
+          maxWidth: '720px'
+        });
+      case 'sm':
+        return css({
+          maxWidth: '200px'
+        });
+      // medium
+      default:
+        return css({
+          maxWidth: '440px'
+        });
+    }
+  };
+
+  return [baseStyle, variantStyle(), sizeStyle()];
+};
+
+export const createBorderDirection = (direction: Direction, borderColor: ColorToken) => {
+  if (direction === 'horizontal') {
+    return css({
+      boxSizing: 'border-box',
+      borderRight: `1px solid ${borderColor}`,
+      maxWidth: '33%',
+      wordWrap: 'break-word'
+    });
+  }
+
+  return css({
+    borderTop: `1px solid ${borderColor}`,
+    wordWrap: 'break-word',
+    maxWidth: '100%',
+    boxSizing: 'border-box'
+  });
+};
+
+export const createDivider = (direction: Direction) => {
+  const dividerColor = getColorByToken(DEFAULT_BORDER_COLOR);
+
+  if (direction === 'vertical') {
+    return css({
+      width: '100%',
+      height: 0,
+      margin: '12px 0',
+      borderTop: `${dividerColor} solid 1px`
+    });
+  }
+  return css({
+    height: '64px',
+    width: '1px',
+    margin: '0 4px',
+    borderLeft: `${dividerColor} solid 1px`
+  });
+};
+
+export const createFlexStyle = (justify: FlexToken, align: FlexToken, direction: Direction) => {
+  const flexMap: FlexMap = {
+    stretch: 'stretch',
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    between: 'space-between',
+    around: 'space-around'
+  };
+
+  return css({
+    display: 'flex',
+    flexDirection: direction === 'horizontal' ? 'row' : 'column',
+    alignItems: `${flexMap[align]}`,
+    justifyContent: `${flexMap[justify]}`,
+    borderRadius: '8px'
+  });
+};