From 14c08de5541be5a61454d3d3b0d9ff0f4eb7c563 Mon Sep 17 00:00:00 2001
From: neko113 <alstn113@gmail.com>
Date: Sun, 25 Sep 2022 15:54:29 +0900
Subject: [PATCH] =?UTF-8?q?Issue=20#15=20feat=20:=20Card=20Component=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/Card/Card.stories.tsx | 52 +++++++++++++++++++++++
 packages/components/Card/Card.styles.ts   | 37 ++++++++++++++++
 packages/components/Card/Card.tsx         | 22 ++++++++++
 packages/components/Card/index.ts         |  1 +
 4 files changed, 112 insertions(+)
 create mode 100644 packages/components/Card/Card.stories.tsx
 create mode 100644 packages/components/Card/Card.styles.ts
 create mode 100644 packages/components/Card/Card.tsx
 create mode 100644 packages/components/Card/index.ts

diff --git a/packages/components/Card/Card.stories.tsx b/packages/components/Card/Card.stories.tsx
new file mode 100644
index 0000000..84e01a1
--- /dev/null
+++ b/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',
+};
diff --git a/packages/components/Card/Card.styles.ts b/packages/components/Card/Card.styles.ts
new file mode 100644
index 0000000..6e900a7
--- /dev/null
+++ b/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;
+    `}
+`;
diff --git a/packages/components/Card/Card.tsx b/packages/components/Card/Card.tsx
new file mode 100644
index 0000000..eca4240
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/components/Card/index.ts b/packages/components/Card/index.ts
new file mode 100644
index 0000000..1e15afd
--- /dev/null
+++ b/packages/components/Card/index.ts
@@ -0,0 +1 @@
+export { Card } from './Card';