feat(ui-kit): 카드 컴포넌트 추가 (#39)

* feat(ui-kit): 카드 컴포넌트 추가

* feat(ui-kit): 모듈 관계 재정의

* feat(ui-kit): 카드 타입 수정

.eslintrc.js

@@ -22,5 +22,6 @@ module.exports = {
   rules: {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-empty-function': 'off',
+    'react/prop-types': 'off',
   },
 };

ui-kit/src/components/Card/CardContent.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import classnames from 'classnames';
+
+interface CardContentProps {
+  children?: ReactNode;
+}
+const CardContent = ({ children }: CardContentProps) => {
+  return <div className={classnames('lubycon-card__content')}>{children}</div>;
+};
+
+export default CardContent;

ui-kit/src/components/Card/CardFooter.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import classnames from 'classnames';
+
+interface CardFooterProps {
+  children?: ReactNode;
+  justifyContent?: 'flex-start' | 'center' | 'flex-end';
+}
+const CardFooter = ({ children, justifyContent = 'flex-start' }: CardFooterProps) => {
+  return (
+    <div
+      className={classnames(
+        'lubycon-card__footer',
+        `lubycon-card__footer--align-${justifyContent}`
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CardFooter;

ui-kit/src/components/Card/CardHeader.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode, isValidElement } from 'react';
+import classnames from 'classnames';
+import Text from '../Text';
+
+interface CardHeaderProps {
+  children?: ReactNode;
+}
+const CardHeader = ({ children }: CardHeaderProps) => {
+  return (
+    <div className={classnames('lubycon-card__header')}>
+      {isValidElement(children) ? children : <Text typography="h6">{children}</Text>}
+    </div>
+  );
+};
+
+export default CardHeader;

ui-kit/src/components/Card/CardImageContent.tsx

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { Combine } from 'src/types/utils';
+
+type CardImageContentProps = Combine<
+  {
+    src: string;
+    alt: string;
+  },
+  HTMLAttributes<HTMLImageElement>
+>;
+const CardImageContent = ({ className, ...props }: CardImageContentProps) => {
+  return (
+    <div className={`${classnames('lubycon-card__image-content')} ${className}`}>
+      <img {...props} />
+    </div>
+  );
+};
+
+export default CardImageContent;

ui-kit/src/components/Card/index.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { ReactNode } from 'react';
+import classnames from 'classnames';
+
+interface Props {
+  children: ReactNode;
+}
+
+const Card = forwardRef<HTMLDivElement, Props>(function Card({ children }, ref) {
+  return (
+    <div ref={ref} className={classnames('lubycon-card', 'lubycon-shadow--2')}>
+      {children}
+    </div>
+  );
+});
+
+export default Card;
+export { default as CardHeader } from './CardHeader';
+export { default as CardContent } from './CardContent';
+export { default as CardImageContent } from './CardImageContent';
+export { default as CardFooter } from './CardFooter';

ui-kit/src/components/index.ts

@@ -9,4 +9,5 @@ export { default as LubyconUIKitProvider } from './LubyconUIKitProvider';
 export { default as Toast } from './Toast';
 export { default as Tooltip } from './Tooltip';
 export { Tabs, TabPane } from './Tabs';
+export { default as Card, CardHeader, CardContent, CardImageContent, CardFooter } from './Card';
 export { default as Snackbar } from './Snackbar';

ui-kit/src/sass/components/_Card.scss

@@ -0,0 +1,40 @@
+$card-padding: 16px 20px;
+$default-radius: 4px;
+
+.lubycon-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: $default-radius;
+  overflow: hidden;
+  background-color: get-color('white');
+  &__header {
+    order: 0;
+    padding: $card-padding;
+    border-bottom: 1px solid get-color('gray30');
+    overflow: hidden;
+  }
+  &__content {
+    order: 1;
+    padding: $card-padding;
+  }
+  &__image-content {
+    img {
+      width: 100%;
+      vertical-align: top;
+    }
+  }
+  &__footer {
+    display: flex;
+    order: 2;
+    padding: $card-padding;
+    &--align-flex-start {
+      justify-content: flex-start;
+    }
+    &--align-center {
+      justify-content: center;
+    }
+    &--align-flex-end {
+      justify-content: flex-end;
+    }
+  }
+}

ui-kit/src/sass/components/_index.scss

@@ -10,4 +10,5 @@
 @import './Toast';
 @import './Tooltip';
 @import './Tabs';
+@import './Card';
 @import './Snackbar';

ui-kit/src/sass/utils/_colors.scss

@@ -1,23 +1,18 @@
 $colors: (
-  /*
-  Semantic Color
-  Positive
- */ 'green50': #13bc4c,
+  // Positive
+  'green50': #13bc4c,
   'green40': #78cf81,
   'green60': #0f933c,
-  /*
-  Informative
- */ 'blue50': #135ce9,
+  // Informative
+  'blue50': #135ce9,
   'blue40': #87adf5,
   'blue60': #013cad,
-  /*
-  Negative
- */ 'red50': #cb121c,
+  // Negative
+  'red50': #cb121c,
   'red40': #f29ca1,
   'red60': #9b0b13,
-  /*
-  Notice
- */ 'yellow50': #f0cb08,
+  // Notice
+  'yellow50': #f0cb08,
   'yellow40': #f9e681,
   'yellow60': #aa8f00,
   /*
@@ -32,7 +27,10 @@ $colors: (
   'gray40': #d0d1d3,
   'gray30': #e3e4e5,
   'gray20': #f3f4f5,
-  'gray10': #fcfcfd
+  'gray10': #fcfcfd,
+  // Mono Tone
+  'white': #ffffff,
+  'black': #000000
 );
 
 @mixin color($name, $value) {

ui-kit/src/stories/Card.stories.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardImageContent,
+  CardFooter,
+  Text,
+  Button,
+  Column,
+  Row,
+} from 'components/index';
+import Icon from 'components/Icon';
+import { Meta } from '@storybook/react/types-6-0';
+import { colors } from 'constants/colors';
+import { arrowForward } from 'ionicons/icons';
+
+export default {
+  title: 'Lubycon UI Kit/Card',
+} as Meta;
+
+export const Default = () => {
+  return (
+    <div style={{ width: 240 }}>
+      <Card>
+        <CardHeader>제목</CardHeader>
+        <CardContent>
+          <Text
+            style={{
+              color: colors.gray70,
+            }}
+          >
+            내용을 입력하세요.
+            <br />
+            내용을 입력하세요.
+            <br />
+            내용을 입력하세요.
+            <br />
+            내용을 입력하세요.
+          </Text>
+        </CardContent>
+        <CardFooter>
+          <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} role="button">
+            <Text typography="caption" style={{ color: colors.gray60, marginRight: 5 }}>
+              더보기
+            </Text>
+            <Icon icon={arrowForward} type="outline" color={colors.gray60} />
+          </span>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export const ImageCard = () => {
+  return (
+    <Row style={{ width: 900 }}>
+      <Column>
+        <Card>
+          <CardHeader>제목</CardHeader>
+          <CardImageContent src="http://cogulmars.cafe24.com/img/04about_img01.png" alt="에비츄" />
+          <CardFooter>
+            <span
+              style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
+              role="button"
+            >
+              <Text typography="caption" style={{ color: colors.gray60, marginRight: 5 }}>
+                더보기
+              </Text>
+              <Icon icon={arrowForward} type="outline" color={colors.gray60} />
+            </span>
+          </CardFooter>
+        </Card>
+      </Column>
+      <Column>
+        <Card>
+          <CardHeader>춤추는 에비츄</CardHeader>
+          <CardImageContent
+            src="https://cdn.univ20.com/wp-content/uploads/2015/08/c4ca4238a0b923820dcc509a6f75849b.gif"
+            alt="춤추는 에비츄"
+          />
+          <CardFooter justifyContent="flex-end">
+            <Button size="small">더보기</Button>
+          </CardFooter>
+        </Card>
+      </Column>
+      <Column>
+        <Card>
+          <CardHeader>장보는 에비츄</CardHeader>
+          <CardImageContent
+            src="http://cogulmars.cafe24.com/img/04about_img04.png"
+            alt="장보는 에비츄"
+          />
+        </Card>
+      </Column>
+    </Row>
+  );
+};