✨ Card Component

src/Card/Card.stories.tsx

@@ -0,0 +1,31 @@
+import Card from './Card';
+import { Story, Meta } from '@storybook/react';
+import { CardProps } from './Card.types';
+import { Heading } from '../@foundations/Typography';
+import { Paragraph } from '../@foundations/Typography';
+
+export default {
+  title: 'Components/Card/DefaultCard',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+    viewport: 'responsive',
+  },
+} as Meta;
+
+const Template: Story<CardProps> = ({ ...args }) => {
+  return (
+    <Card {...args} flexDirection="column" padding={20} display="flex">
+      <Heading size={200}>Heading</Heading>
+      <Paragraph size={300}>Paragraph</Paragraph>
+    </Card>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};

src/Card/Card.styled.ts

@@ -0,0 +1,74 @@
+import styled, { css } from 'styled-components';
+import { Box } from '../Layout';
+
+const CommonStyle = css`
+  ${({ theme }) => css`
+    border: 1px solid ${theme.colors.N400};
+    background-color: ${theme.colors.N0};
+    border-radius: 8px;
+    width: fit-content;
+    height: fit-content;
+    box-sizing: border-box;
+  `}
+`;
+
+export const DefaultCard = styled(Box)<{ disabled?: boolean }>`
+  ${({ theme, disabled }) => css`
+    ${CommonStyle}
+    &:hover {
+      box-shadow: 0px 4px 8px rgba(16, 24, 64, 0.08);
+    }
+    &:focus,
+    &:active {
+      border: 1px solid ${theme.colors.B400};
+      background-color: ${theme.colors.N50};
+    }
+    ${disabled &&
+    css`
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        box-shadow: none;
+        border-color: transparent;
+        background-color: ${theme.colors.N50};
+      }
+    `}
+  `}
+`;
+
+export const SelectableCard = styled(Box)<{
+  disabled?: boolean;
+  selected?: boolean;
+}>`
+  ${({ theme, disabled, selected }) => css`
+    ${CommonStyle}
+    cursor: pointer;
+    &:hover {
+      box-shadow: 0px 4px 8px rgba(16, 24, 64, 0.08);
+    }
+    &:focus,
+    &:active {
+      ${theme.commonStyles.outline};
+      box-shadow: 0px 4px 8px rgba(16, 24, 64, 0.08);
+    }
+    ${disabled &&
+    css`
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        cursor: default;
+        box-shadow: none;
+        outline: none;
+        border-color: transparent;
+        background-color: ${theme.colors.N75};
+      }
+    `}
+    ${selected &&
+    css`
+      border-color: ${theme.colors.B400};
+      background-color: ${theme.colors.N50};
+    `}
+  `}
+`;

src/Card/Card.tsx

@@ -0,0 +1,11 @@
+import * as Styled from './Card.styled';
+import { CardProps } from './Card.types';
+
+const Card = ({ type = 'default', children, ...props }: CardProps) => {
+  const CardComponent =
+    type === 'default' ? Styled.DefaultCard : Styled.SelectableCard;
+
+  return <CardComponent {...props}>{children}</CardComponent>;
+};
+
+export default Card;

src/Card/Card.types.ts

@@ -0,0 +1,16 @@
+import { BoxProps } from '../Layout/Box.types';
+
+type CommonCardProps = BoxProps & {
+  disabled?: boolean;
+};
+
+export type DefaultCardProps = CommonCardProps & {
+  type?: 'default';
+};
+
+export type SelectableCardProps = CommonCardProps & {
+  type: 'selectable';
+  selected?: boolean;
+};
+
+export type CardProps = DefaultCardProps | SelectableCardProps;

src/Card/SelectableCard.stories.tsx

@@ -0,0 +1,40 @@
+import Card from './Card';
+import { Story, Meta } from '@storybook/react';
+import { CardProps } from './Card.types';
+import { useState } from 'react';
+import { Heading, Paragraph } from '../@foundations/Typography';
+
+export default {
+  title: 'Components/Card/SelectableCard',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+    viewport: 'responsive',
+  },
+} as Meta;
+
+const Template: Story<CardProps> = ({ ...args }) => {
+  const [selected, setSelected] = useState(false);
+  return (
+    <Card
+      flexDirection="column"
+      padding={20}
+      display="flex"
+      type="selectable"
+      selected={selected}
+      onClick={() => setSelected((prev) => !prev)}
+      {...args}
+    >
+      <Heading size={200}>Heading</Heading>
+      <Paragraph size={300}>Paragraph</Paragraph>
+    </Card>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};

src/Card/index.ts

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

src/index.ts

@@ -8,6 +8,7 @@ export * from './Alerts';
 export * from './Avatar';
 export * from './Badge';
 export * from './Button';
+export * from './Card';
 export * from './Checkbox';
 export * from './CornerDialog';
 export * from './Dialog';