From a60ca2bd3419e4c80960a02b81d09d7fe70081ea Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Mon, 20 Feb 2023 21:14:58 +0900
Subject: [PATCH 1/5] feat: implement card component

---
 .../components/CSSBaseline/CSSBaseline.tsx    |  4 ++
 .../src/components/Card/Card.classes.ts       |  9 ++++
 .../src/components/Card/Card.stories.tsx      | 28 +++++++++++++
 .../src/components/Card/Card.styles.ts        | 32 ++++++++++++++
 .../lsd-react/src/components/Card/Card.tsx    | 42 +++++++++++++++++++
 .../lsd-react/src/components/Card/index.ts    |  1 +
 .../components/CardItem/Cardtem.classes.ts    |  7 ++++
 .../components/CardItem/Cardtem.stories.tsx   | 26 ++++++++++++
 .../src/components/CardItem/Cardtem.styles.ts | 30 +++++++++++++
 .../src/components/CardItem/Cardtem.tsx       | 37 ++++++++++++++++
 .../src/components/CardItem/index.ts          |  1 +
 11 files changed, 217 insertions(+)
 create mode 100644 packages/lsd-react/src/components/Card/Card.classes.ts
 create mode 100644 packages/lsd-react/src/components/Card/Card.stories.tsx
 create mode 100644 packages/lsd-react/src/components/Card/Card.styles.ts
 create mode 100644 packages/lsd-react/src/components/Card/Card.tsx
 create mode 100644 packages/lsd-react/src/components/Card/index.ts
 create mode 100644 packages/lsd-react/src/components/CardItem/Cardtem.classes.ts
 create mode 100644 packages/lsd-react/src/components/CardItem/Cardtem.stories.tsx
 create mode 100644 packages/lsd-react/src/components/CardItem/Cardtem.styles.ts
 create mode 100644 packages/lsd-react/src/components/CardItem/Cardtem.tsx
 create mode 100644 packages/lsd-react/src/components/CardItem/index.ts

diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
index bdc53fa..508d250 100644
--- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
+++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
@@ -12,6 +12,8 @@ import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
+import { CardItemStyles } from '../CardItem/Cardtem.styles'
+import { CardStyles } from '../Card/Card.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -26,6 +28,8 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
+    CardItemStyles,
+    CardStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
diff --git a/packages/lsd-react/src/components/Card/Card.classes.ts b/packages/lsd-react/src/components/Card/Card.classes.ts
new file mode 100644
index 0000000..83ce738
--- /dev/null
+++ b/packages/lsd-react/src/components/Card/Card.classes.ts
@@ -0,0 +1,9 @@
+export const cardClasses = {
+  root: `lsd-card`,
+  text: `lsd-card__text`,
+
+  withHeader: 'lsd-card--with-header',
+  small: 'lsd-card--small',
+  medium: 'lsd-card--medium',
+  large: 'lsd-card--large',
+}
diff --git a/packages/lsd-react/src/components/Card/Card.stories.tsx b/packages/lsd-react/src/components/Card/Card.stories.tsx
new file mode 100644
index 0000000..55545ef
--- /dev/null
+++ b/packages/lsd-react/src/components/Card/Card.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, Story } from '@storybook/react'
+import { Card, CardProps } from './Card'
+
+export default {
+  title: 'Card',
+  component: Card,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<CardProps> = (args) => (
+  <div style={{ width: 'fit-content' }}>
+    <Card {...args}></Card>
+  </div>
+)
+
+Root.args = {
+  size: 'large',
+  label: 'Title',
+  text: 'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
+  withHeader: false,
+}
diff --git a/packages/lsd-react/src/components/Card/Card.styles.ts b/packages/lsd-react/src/components/Card/Card.styles.ts
new file mode 100644
index 0000000..c7c6b7b
--- /dev/null
+++ b/packages/lsd-react/src/components/Card/Card.styles.ts
@@ -0,0 +1,32 @@
+import { css } from '@emotion/react'
+import { cardClasses } from './Card.classes'
+
+export const CardStyles = css`
+  .${cardClasses.root} {
+    color: rgb(var(--lsd-text-primary));
+    background: none;
+    border: 1px solid rgb(var(--lsd-border-primary));
+    word-break: keep-all;
+    padding: 8px 16px;
+    box-sizing: border-box;
+  }
+
+  .${cardClasses.large} {
+    width: 600px;
+    padding: 10px 18px;
+  }
+
+  .${cardClasses.medium} {
+    width: 540px;
+    padding: 6px 14px;
+  }
+
+  .${cardClasses.small} {
+    width: 480px;
+    padding: 6px 12px;
+  }
+
+  .${cardClasses.withHeader} {
+    border-top: 1px solid transparent;
+  }
+`
diff --git a/packages/lsd-react/src/components/Card/Card.tsx b/packages/lsd-react/src/components/Card/Card.tsx
new file mode 100644
index 0000000..61fcab6
--- /dev/null
+++ b/packages/lsd-react/src/components/Card/Card.tsx
@@ -0,0 +1,42 @@
+import clsx from 'clsx'
+import React from 'react'
+import { CardItem } from '../CardItem'
+import { Typography } from '../Typography'
+import { cardClasses } from './Card.classes'
+
+export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'label'> & {
+  size?: 'small' | 'medium' | 'large'
+  label?: string
+  text: string
+  withHeader?: boolean
+}
+
+export const Card: React.FC<CardProps> & {
+  classes: typeof cardClasses
+} = ({ label = '', size = 'large', text, withHeader = false, ...props }) => {
+  return (
+    <>
+      {withHeader && <CardItem label={label} size={size} />}
+      <div
+        {...props}
+        className={clsx(
+          props.className,
+          cardClasses.root,
+          cardClasses[size],
+          withHeader && cardClasses.withHeader,
+        )}
+      >
+        <Typography
+          color="primary"
+          component="label"
+          variant={size === 'small' ? 'label2' : 'label1'}
+          className={cardClasses.text}
+        >
+          {text}
+        </Typography>
+      </div>
+    </>
+  )
+}
+
+Card.classes = cardClasses
diff --git a/packages/lsd-react/src/components/Card/index.ts b/packages/lsd-react/src/components/Card/index.ts
new file mode 100644
index 0000000..067a7c2
--- /dev/null
+++ b/packages/lsd-react/src/components/Card/index.ts
@@ -0,0 +1 @@
+export * from './Card'
diff --git a/packages/lsd-react/src/components/CardItem/Cardtem.classes.ts b/packages/lsd-react/src/components/CardItem/Cardtem.classes.ts
new file mode 100644
index 0000000..2a5b73b
--- /dev/null
+++ b/packages/lsd-react/src/components/CardItem/Cardtem.classes.ts
@@ -0,0 +1,7 @@
+export const cardItemClasses = {
+  root: `lsd-card-item`,
+
+  small: `lsd-card-item--small`,
+  medium: `lsd-card-item--medium`,
+  large: `lsd-card-item--large`,
+}
diff --git a/packages/lsd-react/src/components/CardItem/Cardtem.stories.tsx b/packages/lsd-react/src/components/CardItem/Cardtem.stories.tsx
new file mode 100644
index 0000000..566ffee
--- /dev/null
+++ b/packages/lsd-react/src/components/CardItem/Cardtem.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, Story } from '@storybook/react'
+import { CardItem, CardItemProps } from './Cardtem'
+
+export default {
+  title: 'CardItem',
+  component: CardItem,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<CardItemProps> = (args) => (
+  <div style={{ width: 'fit-content' }}>
+    <CardItem {...args}></CardItem>
+  </div>
+)
+
+Root.args = {
+  size: 'large',
+  label: 'Title',
+}
diff --git a/packages/lsd-react/src/components/CardItem/Cardtem.styles.ts b/packages/lsd-react/src/components/CardItem/Cardtem.styles.ts
new file mode 100644
index 0000000..d761bd7
--- /dev/null
+++ b/packages/lsd-react/src/components/CardItem/Cardtem.styles.ts
@@ -0,0 +1,30 @@
+import { css } from '@emotion/react'
+import { cardItemClasses } from './Cardtem.classes'
+
+export const CardItemStyles = css`
+  .${cardItemClasses.root} {
+    box-sizing: border-box;
+    border: 1px solid rgb(var(--lsd-border-primary));
+    text-align: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  .${cardItemClasses.large} {
+    width: 600px;
+    min-height: 40px;
+    padding: 10px 18px;
+  }
+
+  .${cardItemClasses.medium} {
+    width: 540px;
+    min-height: 32px;
+    padding: 6px 14px;
+  }
+
+  .${cardItemClasses.small} {
+    width: 480px;
+    min-height: 28px;
+    padding: 6px 12px;
+  }
+`
diff --git a/packages/lsd-react/src/components/CardItem/Cardtem.tsx b/packages/lsd-react/src/components/CardItem/Cardtem.tsx
new file mode 100644
index 0000000..16709b6
--- /dev/null
+++ b/packages/lsd-react/src/components/CardItem/Cardtem.tsx
@@ -0,0 +1,37 @@
+import clsx from 'clsx'
+import React from 'react'
+import { Typography } from '../Typography'
+import { cardItemClasses } from './Cardtem.classes'
+
+export type CardItemProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label'
+> & {
+  label: string
+  size?: 'small' | 'medium' | 'large'
+}
+
+export const CardItem: React.FC<CardItemProps> & {
+  classes: typeof cardItemClasses
+} = ({ label, size = 'large', ...props }) => {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        cardItemClasses.root,
+        cardItemClasses[size],
+      )}
+    >
+      <Typography
+        color="primary"
+        component="label"
+        variant={size === 'small' ? 'label2' : 'label1'}
+      >
+        {label}
+      </Typography>
+    </div>
+  )
+}
+
+CardItem.classes = cardItemClasses
diff --git a/packages/lsd-react/src/components/CardItem/index.ts b/packages/lsd-react/src/components/CardItem/index.ts
new file mode 100644
index 0000000..73f6b88
--- /dev/null
+++ b/packages/lsd-react/src/components/CardItem/index.ts
@@ -0,0 +1 @@
+export * from './Cardtem'

From 6d9b71d2ca99b22c76dd275ca56b6ac80ff0780a Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 22 Feb 2023 01:02:14 +0900
Subject: [PATCH 2/5] refactor: refactor card and card header component

---
 .../src/components/CSSBaseline/CSSBaseline.tsx     |  4 ++--
 packages/lsd-react/src/components/Card/Card.tsx    | 12 ++++++------
 .../components/CardHeader/CardHeader.classes.ts    |  7 +++++++
 .../CardHeader.stories.tsx}                        | 10 +++++-----
 .../CardHeader.styles.ts}                          | 12 ++++++------
 .../Cardtem.tsx => CardHeader/CardHeader.tsx}      | 14 +++++++-------
 .../lsd-react/src/components/CardHeader/index.ts   |  1 +
 .../src/components/CardItem/Cardtem.classes.ts     |  7 -------
 .../lsd-react/src/components/CardItem/index.ts     |  1 -
 packages/lsd-react/src/index.ts                    |  2 ++
 10 files changed, 36 insertions(+), 34 deletions(-)
 create mode 100644 packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
 rename packages/lsd-react/src/components/{CardItem/Cardtem.stories.tsx => CardHeader/CardHeader.stories.tsx} (60%)
 rename packages/lsd-react/src/components/{CardItem/Cardtem.styles.ts => CardHeader/CardHeader.styles.ts} (64%)
 rename packages/lsd-react/src/components/{CardItem/Cardtem.tsx => CardHeader/CardHeader.tsx} (65%)
 create mode 100644 packages/lsd-react/src/components/CardHeader/index.ts
 delete mode 100644 packages/lsd-react/src/components/CardItem/Cardtem.classes.ts
 delete mode 100644 packages/lsd-react/src/components/CardItem/index.ts

diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
index 508d250..227df62 100644
--- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
+++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
@@ -12,8 +12,8 @@ import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
-import { CardItemStyles } from '../CardItem/Cardtem.styles'
 import { CardStyles } from '../Card/Card.styles'
+import { CardHeaderStyles } from '../CardHeader/CardHeader.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -28,7 +28,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
-    CardItemStyles,
+    CardHeaderStyles,
     CardStyles,
   ]
 
diff --git a/packages/lsd-react/src/components/Card/Card.tsx b/packages/lsd-react/src/components/Card/Card.tsx
index 61fcab6..f0da8f4 100644
--- a/packages/lsd-react/src/components/Card/Card.tsx
+++ b/packages/lsd-react/src/components/Card/Card.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CardItem } from '../CardItem'
+import { CardHeader } from '../CardHeader'
 import { Typography } from '../Typography'
 import { cardClasses } from './Card.classes'
 
@@ -15,27 +15,27 @@ export const Card: React.FC<CardProps> & {
   classes: typeof cardClasses
 } = ({ label = '', size = 'large', text, withHeader = false, ...props }) => {
   return (
-    <>
-      {withHeader && <CardItem label={label} size={size} />}
+    <div>
+      {withHeader && <CardHeader label={label} size={size} />}
       <div
-        {...props}
         className={clsx(
           props.className,
           cardClasses.root,
           cardClasses[size],
           withHeader && cardClasses.withHeader,
         )}
+        {...props}
       >
         <Typography
           color="primary"
           component="label"
           variant={size === 'small' ? 'label2' : 'label1'}
-          className={cardClasses.text}
+          className={clsx(cardClasses.text)}
         >
           {text}
         </Typography>
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
new file mode 100644
index 0000000..8d0d7d1
--- /dev/null
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
@@ -0,0 +1,7 @@
+export const cardHeaderClasses = {
+  root: `lsd-card-header`,
+
+  small: `lsd-card-header--small`,
+  medium: `lsd-card-header--medium`,
+  large: `lsd-card-header--large`,
+}
diff --git a/packages/lsd-react/src/components/CardItem/Cardtem.stories.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
similarity index 60%
rename from packages/lsd-react/src/components/CardItem/Cardtem.stories.tsx
rename to packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
index 566ffee..0fbabd9 100644
--- a/packages/lsd-react/src/components/CardItem/Cardtem.stories.tsx
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
@@ -1,9 +1,9 @@
 import { Meta, Story } from '@storybook/react'
-import { CardItem, CardItemProps } from './Cardtem'
+import { CardHeader, CardHeaderProps } from './CardHeader'
 
 export default {
-  title: 'CardItem',
-  component: CardItem,
+  title: 'CardHeader',
+  component: CardHeader,
   argTypes: {
     size: {
       type: {
@@ -14,9 +14,9 @@ export default {
   },
 } as Meta
 
-export const Root: Story<CardItemProps> = (args) => (
+export const Root: Story<CardHeaderProps> = (args) => (
   <div style={{ width: 'fit-content' }}>
-    <CardItem {...args}></CardItem>
+    <CardHeader {...args}></CardHeader>
   </div>
 )
 
diff --git a/packages/lsd-react/src/components/CardItem/Cardtem.styles.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
similarity index 64%
rename from packages/lsd-react/src/components/CardItem/Cardtem.styles.ts
rename to packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
index d761bd7..8c634af 100644
--- a/packages/lsd-react/src/components/CardItem/Cardtem.styles.ts
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
@@ -1,8 +1,8 @@
 import { css } from '@emotion/react'
-import { cardItemClasses } from './Cardtem.classes'
+import { cardHeaderClasses } from './CardHeader.classes'
 
-export const CardItemStyles = css`
-  .${cardItemClasses.root} {
+export const CardHeaderStyles = css`
+  .${cardHeaderClasses.root} {
     box-sizing: border-box;
     border: 1px solid rgb(var(--lsd-border-primary));
     text-align: center;
@@ -10,19 +10,19 @@ export const CardItemStyles = css`
     justify-content: center;
   }
 
-  .${cardItemClasses.large} {
+  .${cardHeaderClasses.large} {
     width: 600px;
     min-height: 40px;
     padding: 10px 18px;
   }
 
-  .${cardItemClasses.medium} {
+  .${cardHeaderClasses.medium} {
     width: 540px;
     min-height: 32px;
     padding: 6px 14px;
   }
 
-  .${cardItemClasses.small} {
+  .${cardHeaderClasses.small} {
     width: 480px;
     min-height: 28px;
     padding: 6px 12px;
diff --git a/packages/lsd-react/src/components/CardItem/Cardtem.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
similarity index 65%
rename from packages/lsd-react/src/components/CardItem/Cardtem.tsx
rename to packages/lsd-react/src/components/CardHeader/CardHeader.tsx
index 16709b6..d28b1ff 100644
--- a/packages/lsd-react/src/components/CardItem/Cardtem.tsx
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx'
 import React from 'react'
 import { Typography } from '../Typography'
-import { cardItemClasses } from './Cardtem.classes'
+import { cardHeaderClasses } from './CardHeader.classes'
 
-export type CardItemProps = Omit<
+export type CardHeaderProps = Omit<
   React.HTMLAttributes<HTMLDivElement>,
   'label'
 > & {
@@ -11,16 +11,16 @@ export type CardItemProps = Omit<
   size?: 'small' | 'medium' | 'large'
 }
 
-export const CardItem: React.FC<CardItemProps> & {
-  classes: typeof cardItemClasses
+export const CardHeader: React.FC<CardHeaderProps> & {
+  classes: typeof cardHeaderClasses
 } = ({ label, size = 'large', ...props }) => {
   return (
     <div
       {...props}
       className={clsx(
         props.className,
-        cardItemClasses.root,
-        cardItemClasses[size],
+        cardHeaderClasses.root,
+        cardHeaderClasses[size],
       )}
     >
       <Typography
@@ -34,4 +34,4 @@ export const CardItem: React.FC<CardItemProps> & {
   )
 }
 
-CardItem.classes = cardItemClasses
+CardHeader.classes = cardHeaderClasses
diff --git a/packages/lsd-react/src/components/CardHeader/index.ts b/packages/lsd-react/src/components/CardHeader/index.ts
new file mode 100644
index 0000000..f953341
--- /dev/null
+++ b/packages/lsd-react/src/components/CardHeader/index.ts
@@ -0,0 +1 @@
+export * from './CardHeader'
diff --git a/packages/lsd-react/src/components/CardItem/Cardtem.classes.ts b/packages/lsd-react/src/components/CardItem/Cardtem.classes.ts
deleted file mode 100644
index 2a5b73b..0000000
--- a/packages/lsd-react/src/components/CardItem/Cardtem.classes.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const cardItemClasses = {
-  root: `lsd-card-item`,
-
-  small: `lsd-card-item--small`,
-  medium: `lsd-card-item--medium`,
-  large: `lsd-card-item--large`,
-}
diff --git a/packages/lsd-react/src/components/CardItem/index.ts b/packages/lsd-react/src/components/CardItem/index.ts
deleted file mode 100644
index 73f6b88..0000000
--- a/packages/lsd-react/src/components/CardItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Cardtem'
diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts
index 9891a23..e5ff4da 100644
--- a/packages/lsd-react/src/index.ts
+++ b/packages/lsd-react/src/index.ts
@@ -9,3 +9,5 @@ export * from './components/Tabs'
 export * from './components/Theme'
 export * from './components/Breadcrumb'
 export * from './components/BreadcrumbItem'
+export * from './components/Card'
+export * from './components/CardHeader'

From 25d236cbf97b2f87bc8506484fb5c14727cbf849 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 23 Feb 2023 21:30:21 +0900
Subject: [PATCH 3/5] refactor: pass down childeren for card component

---
 .../components/CSSBaseline/CSSBaseline.tsx    |  2 -
 .../src/components/Card/Card.classes.ts       |  3 +-
 .../src/components/Card/Card.context.ts       | 10 +++++
 .../src/components/Card/Card.stories.tsx      | 20 ++++++++--
 .../src/components/Card/Card.styles.ts        | 14 ++-----
 .../lsd-react/src/components/Card/Card.tsx    | 29 +++------------
 .../CardHeader/CardHeader.classes.ts          |  7 ----
 .../CardHeader/CardHeader.stories.tsx         | 26 -------------
 .../CardHeader/CardHeader.styles.ts           | 30 ---------------
 .../src/components/CardHeader/CardHeader.tsx  | 37 -------------------
 .../src/components/CardHeader/index.ts        |  1 -
 packages/lsd-react/src/index.ts               |  1 -
 12 files changed, 36 insertions(+), 144 deletions(-)
 create mode 100644 packages/lsd-react/src/components/Card/Card.context.ts
 delete mode 100644 packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
 delete mode 100644 packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
 delete mode 100644 packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
 delete mode 100644 packages/lsd-react/src/components/CardHeader/CardHeader.tsx
 delete mode 100644 packages/lsd-react/src/components/CardHeader/index.ts

diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
index 227df62..14c3dc4 100644
--- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
+++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
@@ -13,7 +13,6 @@ import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
 import { CardStyles } from '../Card/Card.styles'
-import { CardHeaderStyles } from '../CardHeader/CardHeader.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -28,7 +27,6 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
-    CardHeaderStyles,
     CardStyles,
   ]
 
diff --git a/packages/lsd-react/src/components/Card/Card.classes.ts b/packages/lsd-react/src/components/Card/Card.classes.ts
index 83ce738..84121cb 100644
--- a/packages/lsd-react/src/components/Card/Card.classes.ts
+++ b/packages/lsd-react/src/components/Card/Card.classes.ts
@@ -1,8 +1,7 @@
 export const cardClasses = {
   root: `lsd-card`,
-  text: `lsd-card__text`,
+  body: `lsd-card-body`,
 
-  withHeader: 'lsd-card--with-header',
   small: 'lsd-card--small',
   medium: 'lsd-card--medium',
   large: 'lsd-card--large',
diff --git a/packages/lsd-react/src/components/Card/Card.context.ts b/packages/lsd-react/src/components/Card/Card.context.ts
new file mode 100644
index 0000000..7156aec
--- /dev/null
+++ b/packages/lsd-react/src/components/Card/Card.context.ts
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CardProps } from './Card'
+
+export type CardContextType = {
+  size?: CardProps['size']
+}
+
+export const CardContext = React.createContext<CardContextType>(null as any)
+
+export const useCardContext = () => React.useContext(CardContext)
diff --git a/packages/lsd-react/src/components/Card/Card.stories.tsx b/packages/lsd-react/src/components/Card/Card.stories.tsx
index 55545ef..d50c66c 100644
--- a/packages/lsd-react/src/components/Card/Card.stories.tsx
+++ b/packages/lsd-react/src/components/Card/Card.stories.tsx
@@ -16,13 +16,25 @@ export default {
 
 export const Root: Story<CardProps> = (args) => (
   <div style={{ width: 'fit-content' }}>
-    <Card {...args}></Card>
+    <Card {...args}>
+      <div
+        style={{
+          padding: '10px 18px',
+          borderBottom: '1px solid rgb(var(--lsd-border-primary))',
+          textAlign: 'center',
+          fontSize: '14px',
+        }}
+      >
+        Title
+      </div>
+      <div style={{ padding: '14px 22px', fontSize: '16px' }}>
+        A wise man can learn more from a foolish question than a fool can learn
+        from a wise answer.
+      </div>
+    </Card>
   </div>
 )
 
 Root.args = {
   size: 'large',
-  label: 'Title',
-  text: 'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
-  withHeader: false,
 }
diff --git a/packages/lsd-react/src/components/Card/Card.styles.ts b/packages/lsd-react/src/components/Card/Card.styles.ts
index c7c6b7b..05bc3b5 100644
--- a/packages/lsd-react/src/components/Card/Card.styles.ts
+++ b/packages/lsd-react/src/components/Card/Card.styles.ts
@@ -7,26 +7,18 @@ export const CardStyles = css`
     background: none;
     border: 1px solid rgb(var(--lsd-border-primary));
     word-break: keep-all;
-    padding: 8px 16px;
     box-sizing: border-box;
   }
 
+  .${cardClasses.body} {
+  }
+
   .${cardClasses.large} {
-    width: 600px;
-    padding: 10px 18px;
   }
 
   .${cardClasses.medium} {
-    width: 540px;
-    padding: 6px 14px;
   }
 
   .${cardClasses.small} {
-    width: 480px;
-    padding: 6px 12px;
-  }
-
-  .${cardClasses.withHeader} {
-    border-top: 1px solid transparent;
   }
 `
diff --git a/packages/lsd-react/src/components/Card/Card.tsx b/packages/lsd-react/src/components/Card/Card.tsx
index f0da8f4..9a1b830 100644
--- a/packages/lsd-react/src/components/Card/Card.tsx
+++ b/packages/lsd-react/src/components/Card/Card.tsx
@@ -1,41 +1,24 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CardHeader } from '../CardHeader'
-import { Typography } from '../Typography'
 import { cardClasses } from './Card.classes'
+import { CardContext } from './Card.context'
 
 export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'label'> & {
   size?: 'small' | 'medium' | 'large'
-  label?: string
-  text: string
-  withHeader?: boolean
 }
 
 export const Card: React.FC<CardProps> & {
   classes: typeof cardClasses
-} = ({ label = '', size = 'large', text, withHeader = false, ...props }) => {
+} = ({ size = 'large', children, ...props }) => {
   return (
-    <div>
-      {withHeader && <CardHeader label={label} size={size} />}
+    <CardContext.Provider value={{ size }}>
       <div
-        className={clsx(
-          props.className,
-          cardClasses.root,
-          cardClasses[size],
-          withHeader && cardClasses.withHeader,
-        )}
         {...props}
+        className={clsx(props.className, cardClasses.root, cardClasses[size])}
       >
-        <Typography
-          color="primary"
-          component="label"
-          variant={size === 'small' ? 'label2' : 'label1'}
-          className={clsx(cardClasses.text)}
-        >
-          {text}
-        </Typography>
+        {children}
       </div>
-    </div>
+    </CardContext.Provider>
   )
 }
 
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
deleted file mode 100644
index 8d0d7d1..0000000
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const cardHeaderClasses = {
-  root: `lsd-card-header`,
-
-  small: `lsd-card-header--small`,
-  medium: `lsd-card-header--medium`,
-  large: `lsd-card-header--large`,
-}
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
deleted file mode 100644
index 0fbabd9..0000000
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Meta, Story } from '@storybook/react'
-import { CardHeader, CardHeaderProps } from './CardHeader'
-
-export default {
-  title: 'CardHeader',
-  component: CardHeader,
-  argTypes: {
-    size: {
-      type: {
-        name: 'enum',
-        value: ['small', 'medium', 'large'],
-      },
-    },
-  },
-} as Meta
-
-export const Root: Story<CardHeaderProps> = (args) => (
-  <div style={{ width: 'fit-content' }}>
-    <CardHeader {...args}></CardHeader>
-  </div>
-)
-
-Root.args = {
-  size: 'large',
-  label: 'Title',
-}
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
deleted file mode 100644
index 8c634af..0000000
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { css } from '@emotion/react'
-import { cardHeaderClasses } from './CardHeader.classes'
-
-export const CardHeaderStyles = css`
-  .${cardHeaderClasses.root} {
-    box-sizing: border-box;
-    border: 1px solid rgb(var(--lsd-border-primary));
-    text-align: center;
-    display: flex;
-    justify-content: center;
-  }
-
-  .${cardHeaderClasses.large} {
-    width: 600px;
-    min-height: 40px;
-    padding: 10px 18px;
-  }
-
-  .${cardHeaderClasses.medium} {
-    width: 540px;
-    min-height: 32px;
-    padding: 6px 14px;
-  }
-
-  .${cardHeaderClasses.small} {
-    width: 480px;
-    min-height: 28px;
-    padding: 6px 12px;
-  }
-`
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
deleted file mode 100644
index d28b1ff..0000000
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import clsx from 'clsx'
-import React from 'react'
-import { Typography } from '../Typography'
-import { cardHeaderClasses } from './CardHeader.classes'
-
-export type CardHeaderProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  'label'
-> & {
-  label: string
-  size?: 'small' | 'medium' | 'large'
-}
-
-export const CardHeader: React.FC<CardHeaderProps> & {
-  classes: typeof cardHeaderClasses
-} = ({ label, size = 'large', ...props }) => {
-  return (
-    <div
-      {...props}
-      className={clsx(
-        props.className,
-        cardHeaderClasses.root,
-        cardHeaderClasses[size],
-      )}
-    >
-      <Typography
-        color="primary"
-        component="label"
-        variant={size === 'small' ? 'label2' : 'label1'}
-      >
-        {label}
-      </Typography>
-    </div>
-  )
-}
-
-CardHeader.classes = cardHeaderClasses
diff --git a/packages/lsd-react/src/components/CardHeader/index.ts b/packages/lsd-react/src/components/CardHeader/index.ts
deleted file mode 100644
index f953341..0000000
--- a/packages/lsd-react/src/components/CardHeader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './CardHeader'
diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts
index e5ff4da..20e1306 100644
--- a/packages/lsd-react/src/index.ts
+++ b/packages/lsd-react/src/index.ts
@@ -10,4 +10,3 @@ export * from './components/Theme'
 export * from './components/Breadcrumb'
 export * from './components/BreadcrumbItem'
 export * from './components/Card'
-export * from './components/CardHeader'

From c301b4d1f42dba64b7b23473df4c4814ac743ba6 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Fri, 24 Feb 2023 00:56:43 +0900
Subject: [PATCH 4/5] refactor: add card header and body

---
 .../components/CSSBaseline/CSSBaseline.tsx    |  4 +++
 .../src/components/Card/Card.stories.tsx      | 19 ++++++++---
 .../lsd-react/src/components/Card/Card.tsx    | 13 +++-----
 .../components/CardBody/CardBody.classes.ts   |  7 ++++
 .../components/CardBody/CardBody.stories.tsx  | 28 ++++++++++++++++
 .../components/CardBody/CardBody.styles.ts    | 14 ++++++++
 .../src/components/CardBody/CardBody.tsx      | 32 +++++++++++++++++++
 .../src/components/CardBody/index.ts          |  1 +
 .../CardHeader/CardHeader.classes.ts          |  7 ++++
 .../CardHeader/CardHeader.stories.tsx         | 25 +++++++++++++++
 .../CardHeader/CardHeader.styles.ts           | 14 ++++++++
 .../src/components/CardHeader/CardHeader.tsx  | 32 +++++++++++++++++++
 .../src/components/CardHeader/index.ts        |  1 +
 packages/lsd-react/src/index.ts               |  2 ++
 14 files changed, 185 insertions(+), 14 deletions(-)
 create mode 100644 packages/lsd-react/src/components/CardBody/CardBody.classes.ts
 create mode 100644 packages/lsd-react/src/components/CardBody/CardBody.stories.tsx
 create mode 100644 packages/lsd-react/src/components/CardBody/CardBody.styles.ts
 create mode 100644 packages/lsd-react/src/components/CardBody/CardBody.tsx
 create mode 100644 packages/lsd-react/src/components/CardBody/index.ts
 create mode 100644 packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
 create mode 100644 packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
 create mode 100644 packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
 create mode 100644 packages/lsd-react/src/components/CardHeader/CardHeader.tsx
 create mode 100644 packages/lsd-react/src/components/CardHeader/index.ts

diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
index 14c3dc4..6f348db 100644
--- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
+++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
@@ -13,6 +13,8 @@ import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
 import { CardStyles } from '../Card/Card.styles'
+import { CardHeaderStyles } from '../CardHeader/CardHeader.styles'
+import { CardBodyStyles } from '../CardBody/CardBody.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -28,6 +30,8 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     BreadcrumbStyles,
     BreadcrumbItemStyles,
     CardStyles,
+    CardHeaderStyles,
+    CardBodyStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
diff --git a/packages/lsd-react/src/components/Card/Card.stories.tsx b/packages/lsd-react/src/components/Card/Card.stories.tsx
index d50c66c..43bdeac 100644
--- a/packages/lsd-react/src/components/Card/Card.stories.tsx
+++ b/packages/lsd-react/src/components/Card/Card.stories.tsx
@@ -1,4 +1,6 @@
 import { Meta, Story } from '@storybook/react'
+import { CardBody } from '../CardBody'
+import { CardHeader } from '../CardHeader'
 import { Card, CardProps } from './Card'
 
 export default {
@@ -17,20 +19,27 @@ export default {
 export const Root: Story<CardProps> = (args) => (
   <div style={{ width: 'fit-content' }}>
     <Card {...args}>
-      <div
+      <CardHeader
         style={{
           padding: '10px 18px',
-          borderBottom: '1px solid rgb(var(--lsd-border-primary))',
+          border: '1px solid rgb(var(--lsd-border-primary))',
+          borderBottom: 'none',
           textAlign: 'center',
           fontSize: '14px',
         }}
       >
         Title
-      </div>
-      <div style={{ padding: '14px 22px', fontSize: '16px' }}>
+      </CardHeader>
+      <CardBody
+        style={{
+          padding: '14px 22px',
+          fontSize: '16px',
+          border: '1px solid rgb(var(--lsd-border-primary))',
+        }}
+      >
         A wise man can learn more from a foolish question than a fool can learn
         from a wise answer.
-      </div>
+      </CardBody>
     </Card>
   </div>
 )
diff --git a/packages/lsd-react/src/components/Card/Card.tsx b/packages/lsd-react/src/components/Card/Card.tsx
index 9a1b830..3f4ca34 100644
--- a/packages/lsd-react/src/components/Card/Card.tsx
+++ b/packages/lsd-react/src/components/Card/Card.tsx
@@ -1,5 +1,7 @@
 import clsx from 'clsx'
 import React from 'react'
+import { CardBody } from '../CardBody'
+import { CardHeader } from '../CardHeader'
 import { cardClasses } from './Card.classes'
 import { CardContext } from './Card.context'
 
@@ -9,16 +11,9 @@ export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'label'> & {
 
 export const Card: React.FC<CardProps> & {
   classes: typeof cardClasses
-} = ({ size = 'large', children, ...props }) => {
+} = ({ size = 'large', children }) => {
   return (
-    <CardContext.Provider value={{ size }}>
-      <div
-        {...props}
-        className={clsx(props.className, cardClasses.root, cardClasses[size])}
-      >
-        {children}
-      </div>
-    </CardContext.Provider>
+    <CardContext.Provider value={{ size }}>{children}</CardContext.Provider>
   )
 }
 
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.classes.ts b/packages/lsd-react/src/components/CardBody/CardBody.classes.ts
new file mode 100644
index 0000000..769f34b
--- /dev/null
+++ b/packages/lsd-react/src/components/CardBody/CardBody.classes.ts
@@ -0,0 +1,7 @@
+export const cardBodyClasses = {
+  root: `lsd-card-header`,
+
+  small: `lsd-card-header--small`,
+  medium: `lsd-card-header--medium`,
+  large: `lsd-card-header--large`,
+}
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx b/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx
new file mode 100644
index 0000000..8bb28f1
--- /dev/null
+++ b/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, Story } from '@storybook/react'
+import { CardBody, CardBodyProps } from './CardBody'
+
+export default {
+  title: 'CardBody',
+  component: CardBody,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<CardBodyProps> = (args) => (
+  <div style={{ width: 'fit-content' }}>
+    <CardBody {...args}>
+      A wise man can learn more from a foolish question than a fool can learn
+      from a wise answer.
+    </CardBody>
+  </div>
+)
+
+Root.args = {
+  size: 'large',
+}
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.styles.ts b/packages/lsd-react/src/components/CardBody/CardBody.styles.ts
new file mode 100644
index 0000000..588d36d
--- /dev/null
+++ b/packages/lsd-react/src/components/CardBody/CardBody.styles.ts
@@ -0,0 +1,14 @@
+import { css } from '@emotion/react'
+import { cardBodyClasses } from './CardBody.classes'
+
+export const CardBodyStyles = css`
+  .${cardBodyClasses.root} {
+    box-sizing: border-box;
+  }
+  .${cardBodyClasses.large} {
+  }
+  .${cardBodyClasses.medium} {
+  }
+  .${cardBodyClasses.small} {
+  }
+`
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.tsx b/packages/lsd-react/src/components/CardBody/CardBody.tsx
new file mode 100644
index 0000000..b1f688b
--- /dev/null
+++ b/packages/lsd-react/src/components/CardBody/CardBody.tsx
@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+import React from 'react'
+import { useCardContext } from '../Card/Card.context'
+import { cardBodyClasses } from './CardBody.classes'
+
+export type CardBodyProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label'
+> & {
+  size?: 'small' | 'medium' | 'large'
+}
+
+export const CardBody: React.FC<CardBodyProps> & {
+  classes: typeof cardBodyClasses
+} = ({ size: _size = 'large', children, ...props }) => {
+  const sizeContext = useCardContext()
+  const size = sizeContext?.size ?? _size
+  return (
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        cardBodyClasses.root,
+        cardBodyClasses[size],
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+CardBody.classes = cardBodyClasses
diff --git a/packages/lsd-react/src/components/CardBody/index.ts b/packages/lsd-react/src/components/CardBody/index.ts
new file mode 100644
index 0000000..b81eecf
--- /dev/null
+++ b/packages/lsd-react/src/components/CardBody/index.ts
@@ -0,0 +1 @@
+export * from './CardBody'
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
new file mode 100644
index 0000000..8d0d7d1
--- /dev/null
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
@@ -0,0 +1,7 @@
+export const cardHeaderClasses = {
+  root: `lsd-card-header`,
+
+  small: `lsd-card-header--small`,
+  medium: `lsd-card-header--medium`,
+  large: `lsd-card-header--large`,
+}
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
new file mode 100644
index 0000000..bf379d2
--- /dev/null
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, Story } from '@storybook/react'
+import { CardHeader, CardHeaderProps } from './CardHeader'
+
+export default {
+  title: 'CardHeader',
+  component: CardHeader,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<CardHeaderProps> = (args) => (
+  <div style={{ width: 'fit-content' }}>
+    <CardHeader {...args}>Title</CardHeader>
+  </div>
+)
+
+Root.args = {
+  size: 'large',
+}
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
new file mode 100644
index 0000000..da64300
--- /dev/null
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
@@ -0,0 +1,14 @@
+import { css } from '@emotion/react'
+import { cardHeaderClasses } from './CardHeader.classes'
+
+export const CardHeaderStyles = css`
+  .${cardHeaderClasses.root} {
+    box-sizing: border-box;
+  }
+  .${cardHeaderClasses.large} {
+  }
+  .${cardHeaderClasses.medium} {
+  }
+  .${cardHeaderClasses.small} {
+  }
+`
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
new file mode 100644
index 0000000..b35c70f
--- /dev/null
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+import React from 'react'
+import { useCardContext } from '../Card/Card.context'
+import { cardHeaderClasses } from './CardHeader.classes'
+
+export type CardHeaderProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label'
+> & {
+  size?: 'small' | 'medium' | 'large'
+}
+
+export const CardHeader: React.FC<CardHeaderProps> & {
+  classes: typeof cardHeaderClasses
+} = ({ size: _size = 'large', children, ...props }) => {
+  const sizeContext = useCardContext()
+  const size = sizeContext?.size ?? _size
+  return (
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        cardHeaderClasses.root,
+        cardHeaderClasses[size],
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+CardHeader.classes = cardHeaderClasses
diff --git a/packages/lsd-react/src/components/CardHeader/index.ts b/packages/lsd-react/src/components/CardHeader/index.ts
new file mode 100644
index 0000000..f953341
--- /dev/null
+++ b/packages/lsd-react/src/components/CardHeader/index.ts
@@ -0,0 +1 @@
+export * from './CardHeader'
diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts
index 20e1306..fae6404 100644
--- a/packages/lsd-react/src/index.ts
+++ b/packages/lsd-react/src/index.ts
@@ -10,3 +10,5 @@ export * from './components/Theme'
 export * from './components/Breadcrumb'
 export * from './components/BreadcrumbItem'
 export * from './components/Card'
+export * from './components/CardHeader'
+export * from './components/CardBody'

From a884a056ede49d8459685d2e173c38aba930d291 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Thu, 23 Feb 2023 20:10:01 +0330
Subject: [PATCH 5/5] fix: fix Card component styles

---
 .../src/components/Card/Card.classes.ts       |  1 -
 .../src/components/Card/Card.stories.tsx      | 34 ++++++-------------
 .../src/components/Card/Card.styles.ts        | 10 +++---
 .../lsd-react/src/components/Card/Card.tsx    | 10 +++---
 .../components/CardBody/CardBody.classes.ts   |  6 +---
 .../components/CardBody/CardBody.stories.tsx  | 14 ++++----
 .../components/CardBody/CardBody.styles.ts    |  8 ++---
 .../src/components/CardBody/CardBody.tsx      | 18 ++--------
 .../CardHeader/CardHeader.classes.ts          |  1 +
 .../CardHeader/CardHeader.stories.tsx         | 10 ++++--
 .../CardHeader/CardHeader.styles.ts           | 14 ++++++++
 .../src/components/CardHeader/CardHeader.tsx  | 10 +++++-
 12 files changed, 66 insertions(+), 70 deletions(-)

diff --git a/packages/lsd-react/src/components/Card/Card.classes.ts b/packages/lsd-react/src/components/Card/Card.classes.ts
index 84121cb..a29dadb 100644
--- a/packages/lsd-react/src/components/Card/Card.classes.ts
+++ b/packages/lsd-react/src/components/Card/Card.classes.ts
@@ -1,6 +1,5 @@
 export const cardClasses = {
   root: `lsd-card`,
-  body: `lsd-card-body`,
 
   small: 'lsd-card--small',
   medium: 'lsd-card--medium',
diff --git a/packages/lsd-react/src/components/Card/Card.stories.tsx b/packages/lsd-react/src/components/Card/Card.stories.tsx
index 43bdeac..af381c9 100644
--- a/packages/lsd-react/src/components/Card/Card.stories.tsx
+++ b/packages/lsd-react/src/components/Card/Card.stories.tsx
@@ -16,34 +16,22 @@ export default {
   },
 } as Meta
 
-export const Root: Story<CardProps> = (args) => (
-  <div style={{ width: 'fit-content' }}>
+export const Root: Story<
+  CardProps & {
+    body: string
+    title: string
+  }
+> = ({ title, body, ...args }) => (
+  <div style={{ width: 400 }}>
     <Card {...args}>
-      <CardHeader
-        style={{
-          padding: '10px 18px',
-          border: '1px solid rgb(var(--lsd-border-primary))',
-          borderBottom: 'none',
-          textAlign: 'center',
-          fontSize: '14px',
-        }}
-      >
-        Title
-      </CardHeader>
-      <CardBody
-        style={{
-          padding: '14px 22px',
-          fontSize: '16px',
-          border: '1px solid rgb(var(--lsd-border-primary))',
-        }}
-      >
-        A wise man can learn more from a foolish question than a fool can learn
-        from a wise answer.
-      </CardBody>
+      <CardHeader>{title}</CardHeader>
+      <CardBody>{body}</CardBody>
     </Card>
   </div>
 )
 
 Root.args = {
   size: 'large',
+  title: 'Title',
+  body: 'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
 }
diff --git a/packages/lsd-react/src/components/Card/Card.styles.ts b/packages/lsd-react/src/components/Card/Card.styles.ts
index 05bc3b5..ecdd610 100644
--- a/packages/lsd-react/src/components/Card/Card.styles.ts
+++ b/packages/lsd-react/src/components/Card/Card.styles.ts
@@ -1,16 +1,16 @@
 import { css } from '@emotion/react'
+import { cardHeaderClasses } from '../CardHeader/CardHeader.classes'
 import { cardClasses } from './Card.classes'
 
 export const CardStyles = css`
   .${cardClasses.root} {
-    color: rgb(var(--lsd-text-primary));
-    background: none;
-    border: 1px solid rgb(var(--lsd-border-primary));
-    word-break: keep-all;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
   }
 
-  .${cardClasses.body} {
+  .${cardClasses.root} > .${cardHeaderClasses.root} {
+    margin-bottom: -1px;
   }
 
   .${cardClasses.large} {
diff --git a/packages/lsd-react/src/components/Card/Card.tsx b/packages/lsd-react/src/components/Card/Card.tsx
index 3f4ca34..c09660c 100644
--- a/packages/lsd-react/src/components/Card/Card.tsx
+++ b/packages/lsd-react/src/components/Card/Card.tsx
@@ -1,7 +1,5 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CardBody } from '../CardBody'
-import { CardHeader } from '../CardHeader'
 import { cardClasses } from './Card.classes'
 import { CardContext } from './Card.context'
 
@@ -11,9 +9,13 @@ export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'label'> & {
 
 export const Card: React.FC<CardProps> & {
   classes: typeof cardClasses
-} = ({ size = 'large', children }) => {
+} = ({ size = 'large', children, ...props }) => {
   return (
-    <CardContext.Provider value={{ size }}>{children}</CardContext.Provider>
+    <CardContext.Provider value={{ size }}>
+      <div {...props} className={clsx(cardClasses.root, cardClasses[size])}>
+        {children}
+      </div>
+    </CardContext.Provider>
   )
 }
 
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.classes.ts b/packages/lsd-react/src/components/CardBody/CardBody.classes.ts
index 769f34b..3260adc 100644
--- a/packages/lsd-react/src/components/CardBody/CardBody.classes.ts
+++ b/packages/lsd-react/src/components/CardBody/CardBody.classes.ts
@@ -1,7 +1,3 @@
 export const cardBodyClasses = {
-  root: `lsd-card-header`,
-
-  small: `lsd-card-header--small`,
-  medium: `lsd-card-header--medium`,
-  large: `lsd-card-header--large`,
+  root: `lsd-card-body`,
 }
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx b/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx
index 8bb28f1..bc4d507 100644
--- a/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx
+++ b/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx
@@ -14,15 +14,15 @@ export default {
   },
 } as Meta
 
-export const Root: Story<CardBodyProps> = (args) => (
-  <div style={{ width: 'fit-content' }}>
-    <CardBody {...args}>
-      A wise man can learn more from a foolish question than a fool can learn
-      from a wise answer.
-    </CardBody>
+export const Root: Story<CardBodyProps & { body: string }> = ({
+  body,
+  ...args
+}) => (
+  <div style={{ width: 400 }}>
+    <CardBody {...args}>{body}</CardBody>
   </div>
 )
 
 Root.args = {
-  size: 'large',
+  body: 'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
 }
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.styles.ts b/packages/lsd-react/src/components/CardBody/CardBody.styles.ts
index 588d36d..1797bb8 100644
--- a/packages/lsd-react/src/components/CardBody/CardBody.styles.ts
+++ b/packages/lsd-react/src/components/CardBody/CardBody.styles.ts
@@ -4,11 +4,7 @@ import { cardBodyClasses } from './CardBody.classes'
 export const CardBodyStyles = css`
   .${cardBodyClasses.root} {
     box-sizing: border-box;
-  }
-  .${cardBodyClasses.large} {
-  }
-  .${cardBodyClasses.medium} {
-  }
-  .${cardBodyClasses.small} {
+    padding: 14px 22px;
+    border: 1px solid rgb(var(--lsd-border-primary));
   }
 `
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.tsx b/packages/lsd-react/src/components/CardBody/CardBody.tsx
index b1f688b..a81bb16 100644
--- a/packages/lsd-react/src/components/CardBody/CardBody.tsx
+++ b/packages/lsd-react/src/components/CardBody/CardBody.tsx
@@ -1,29 +1,17 @@
 import clsx from 'clsx'
 import React from 'react'
-import { useCardContext } from '../Card/Card.context'
 import { cardBodyClasses } from './CardBody.classes'
 
 export type CardBodyProps = Omit<
   React.HTMLAttributes<HTMLDivElement>,
   'label'
-> & {
-  size?: 'small' | 'medium' | 'large'
-}
+> & {}
 
 export const CardBody: React.FC<CardBodyProps> & {
   classes: typeof cardBodyClasses
-} = ({ size: _size = 'large', children, ...props }) => {
-  const sizeContext = useCardContext()
-  const size = sizeContext?.size ?? _size
+} = ({ children, ...props }) => {
   return (
-    <div
-      {...props}
-      className={clsx(
-        props.className,
-        cardBodyClasses.root,
-        cardBodyClasses[size],
-      )}
-    >
+    <div {...props} className={clsx(props.className, cardBodyClasses.root)}>
       {children}
     </div>
   )
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
index 8d0d7d1..5a72363 100644
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
@@ -1,5 +1,6 @@
 export const cardHeaderClasses = {
   root: `lsd-card-header`,
+  title: `lsd-card-header__title`,
 
   small: `lsd-card-header--small`,
   medium: `lsd-card-header--medium`,
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
index bf379d2..cec8717 100644
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
@@ -14,12 +14,16 @@ export default {
   },
 } as Meta
 
-export const Root: Story<CardHeaderProps> = (args) => (
-  <div style={{ width: 'fit-content' }}>
-    <CardHeader {...args}>Title</CardHeader>
+export const Root: Story<CardHeaderProps & { title: string }> = ({
+  title,
+  ...args
+}) => (
+  <div style={{ width: 400 }}>
+    <CardHeader {...args}>{title}</CardHeader>
   </div>
 )
 
 Root.args = {
   size: 'large',
+  title: 'Title',
 }
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
index da64300..64bf783 100644
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
@@ -4,11 +4,25 @@ import { cardHeaderClasses } from './CardHeader.classes'
 export const CardHeaderStyles = css`
   .${cardHeaderClasses.root} {
     box-sizing: border-box;
+    padding: 10px 18px;
+    text-align: center;
+    border: 1px solid rgb(var(--lsd-border-primary));
   }
+
+  .${cardHeaderClasses.title} {
+    overflow: hidden;
+    word-break: break-all;
+  }
+
   .${cardHeaderClasses.large} {
+    padding: 10px 18px;
   }
+
   .${cardHeaderClasses.medium} {
+    padding: 6px 14px;
   }
+
   .${cardHeaderClasses.small} {
+    padding: 6px 12px;
   }
 `
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
index b35c70f..8899787 100644
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
+++ b/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import React from 'react'
 import { useCardContext } from '../Card/Card.context'
+import { Typography } from '../Typography'
 import { cardHeaderClasses } from './CardHeader.classes'
 
 export type CardHeaderProps = Omit<
@@ -15,6 +16,7 @@ export const CardHeader: React.FC<CardHeaderProps> & {
 } = ({ size: _size = 'large', children, ...props }) => {
   const sizeContext = useCardContext()
   const size = sizeContext?.size ?? _size
+
   return (
     <div
       {...props}
@@ -24,7 +26,13 @@ export const CardHeader: React.FC<CardHeaderProps> & {
         cardHeaderClasses[size],
       )}
     >
-      {children}
+      <Typography
+        className={cardHeaderClasses.title}
+        component="div"
+        variant={size === 'large' ? 'label1' : 'label2'}
+      >
+        {children}
+      </Typography>
     </div>
   )
 }