Issue #15 feat : Card Component 생성

packages/components/Card/Card.stories.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Spacer } from '../../layouts/Spacer';
+import { Card, Props } from './Card';
+import React from 'react';
+
+export default {
+  title: 'Components/Card',
+  component: Card,
+} as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = (args: Props) => {
+  return (
+    <FlexColumn>
+      <Card {...args} />
+      <Spacer />
+      <Card variant="bordered">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima officia
+        eius velit excepturi distinctio, blanditiis sunt, quod architecto
+        voluptate perspiciatis ea corporis voluptatum, reprehenderit vero harum
+        ratione animi hic cum.
+      </Card>
+      <Spacer />
+      <Card variant="flat">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima officia
+        eius velit excepturi distinctio, blanditiis sunt, quod architecto
+        voluptate perspiciatis ea corporis voluptatum, reprehenderit vero harum
+        ratione animi hic cum.
+      </Card>
+      <Spacer />
+      <Card variant="shadow">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima officia
+        eius velit excepturi distinctio, blanditiis sunt, quod architecto
+        voluptate perspiciatis ea corporis voluptatum, reprehenderit vero harum
+        ratione animi hic cum.
+      </Card>
+    </FlexColumn>
+  );
+};
+
+const FlexColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 250px;
+`;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'A Basic Card',
+};

packages/components/Card/Card.styles.ts

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { CardVariantType } from './Card';
+
+export const StyledCard = styled.div<{
+  variant: CardVariantType;
+  isPressable: boolean;
+}>`
+  padding: 20px 12px;
+  border-radius: 14px;
+  color: #000;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  ${({ variant }) =>
+    variant === 'shadow' &&
+    css`
+      box-shadow: 0 12px 20px 6px rgba(0, 0, 0, 0.1);
+    `};
+  ${({ variant }) =>
+    variant === 'bordered' &&
+    css`
+      border: 1px solid #dfe3e6;
+    `};
+  ${({ variant }) =>
+    variant === 'flat' &&
+    css`
+      background-color: #dfe3e6;
+    `};
+  ${({ isPressable }) =>
+    isPressable &&
+    css`
+      cursor: pointer;
+    `}
+`;

packages/components/Card/Card.tsx

@@ -0,0 +1,22 @@
+import * as S from './Card.styles';
+import React from 'react';
+
+export type CardVariantType = 'shadow' | 'flat' | 'bordered';
+
+export interface Props {
+  children: React.ReactNode;
+  variant?: CardVariantType;
+  isPressable?: boolean;
+}
+
+export const Card = ({
+  children,
+  variant = 'shadow',
+  isPressable = false,
+}: Props) => {
+  return (
+    <S.StyledCard variant={variant} isPressable={isPressable}>
+      {children}
+    </S.StyledCard>
+  );
+};

packages/components/Card/index.ts

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