feat: 디자인 시스템 - Card 컴포넌트 구현

packages/jds/.storybook/preview.tsx

@@ -1,7 +1,6 @@
 import type { Preview } from '@storybook/react';
 import { Global, ThemeProvider } from '@emotion/react';
 import { theme } from '../src/tokens/theme';
-import { globalStyles } from '../src/tokens/globalStyles';
 import { GlobalStyles } from '../src/style/globalStyle';
 
 const preview: Preview = {

packages/jds/src/components/Badge/contentBadge/ContentBadge.style.ts

@@ -20,6 +20,7 @@ import {
 } from './contentBadge.variants';
 
 import { Icon } from '@/components/Icon';
+import { Label } from '@/components/Label';
 
 interface ContentBasicBadgeDivProps {
   hierarchy: BasicHierarchy;
@@ -34,9 +35,6 @@ export const ContentBadgeBasicDiv = styled.div<ContentBasicBadgeDivProps>(
     const backgroundColor = isMuted
       ? contentBadgeBasicMutedStylesMap(theme)[badgeStyle].bg
       : contentBadgeBasicStylesMap(theme)[badgeStyle][hierarchy].bg;
-    const color = isMuted
-      ? contentBadgeBasicMutedStylesMap(theme)[badgeStyle].color
-      : contentBadgeBasicStylesMap(theme)[badgeStyle][hierarchy].color;
     const border = isMuted
       ? contentBadgeBasicMutedStylesMap(theme)[badgeStyle].border
       : contentBadgeBasicStylesMap(theme)[badgeStyle][hierarchy].border;
@@ -49,13 +47,33 @@ export const ContentBadgeBasicDiv = styled.div<ContentBasicBadgeDivProps>(
       alignItems: 'center',
       gap: withIcon ? pxToRem(4) : '0',
       backgroundColor,
-      color,
       border: `1px solid ${border}`,
       borderRadius: theme.scheme.semantic.radius[4],
     };
   },
 );
 
+interface ContentBadgeBasicLabelProps {
+  hierarchy: BasicHierarchy;
+  badgeStyle: ContentBadgeStyle;
+  isMuted: boolean;
+}
+
+export const ContentBadgeBasicLabel = styled(Label)<ContentBadgeBasicLabelProps>(({
+  theme,
+  hierarchy,
+  badgeStyle,
+  isMuted,
+}) => {
+  const color = isMuted
+    ? contentBadgeBasicMutedStylesMap(theme)[badgeStyle].color
+    : contentBadgeBasicStylesMap(theme)[badgeStyle][hierarchy].color;
+
+  return {
+    color,
+  };
+});
+
 interface BadgeIconProps {
   hierarchy: BasicHierarchy;
   badgeStyle: ContentBadgeStyle;
@@ -89,9 +107,6 @@ export const ContentBadgeFeedbackDiv = styled.div<ContentBadgeFeedbackDivProps>(
     const backgroundColor = isMuted
       ? contentBadgeFeedbackMutedStylesMap(theme)[badgeStyle][variant].bg
       : contentBadgeFeedbackStylesMap(theme)[badgeStyle][variant].bg;
-    const color = isMuted
-      ? contentBadgeFeedbackMutedStylesMap(theme)[badgeStyle][variant].color
-      : contentBadgeFeedbackStylesMap(theme)[badgeStyle][variant].color;
     const border = isMuted
       ? contentBadgeFeedbackMutedStylesMap(theme)[badgeStyle][variant].border
       : contentBadgeFeedbackStylesMap(theme)[badgeStyle][variant].border;
@@ -104,13 +119,33 @@ export const ContentBadgeFeedbackDiv = styled.div<ContentBadgeFeedbackDivProps>(
       alignItems: 'center',
       gap: '0px',
       backgroundColor,
-      color,
       border: `1px solid ${border}`,
       borderRadius: theme.scheme.semantic.radius['4'],
     };
   },
 );
 
+interface ContentBadgeFeedbackLabelProps {
+  variant: FeedbackVariant;
+  badgeStyle: ContentBadgeStyle;
+  isMuted: boolean;
+}
+
+export const ContentBadgeFeedbackLabel = styled(Label)<ContentBadgeFeedbackLabelProps>(({
+  theme,
+  variant,
+  badgeStyle,
+  isMuted,
+}) => {
+  const color = isMuted
+    ? contentBadgeFeedbackMutedStylesMap(theme)[badgeStyle][variant].color
+    : contentBadgeFeedbackStylesMap(theme)[badgeStyle][variant].color;
+
+  return {
+    color,
+  };
+});
+
 interface ContentBadgeThemeDivProps {
   variant: ThemeVariant;
   size: BadgeSize;
@@ -123,9 +158,6 @@ export const ContentBadgeThemeDiv = styled.div<ContentBadgeThemeDivProps>(
     const backgroundColor = isMuted
       ? contentBadgeThemeMutedStylesMap(theme)[badgeStyle][variant].bg
       : contentBadgeThemeStylesMap(theme)[badgeStyle][variant].bg;
-    const color = isMuted
-      ? contentBadgeThemeMutedStylesMap(theme)[badgeStyle][variant].color
-      : contentBadgeThemeStylesMap(theme)[badgeStyle][variant].color;
     const border = isMuted
       ? contentBadgeThemeMutedStylesMap(theme)[badgeStyle][variant].border
       : contentBadgeThemeStylesMap(theme)[badgeStyle][variant].border;
@@ -138,9 +170,29 @@ export const ContentBadgeThemeDiv = styled.div<ContentBadgeThemeDivProps>(
       alignItems: 'center',
       gap: '0px',
       backgroundColor,
-      color,
       border: `1px solid ${border}`,
       borderRadius: theme.scheme.semantic.radius[4],
     };
   },
 );
+
+interface ContentBadgeThemeLabelProps {
+  variant: ThemeVariant;
+  badgeStyle: ContentBadgeStyle;
+  isMuted: boolean;
+}
+
+export const ContentBadgeThemeLabel = styled(Label)<ContentBadgeThemeLabelProps>(({
+  theme,
+  variant,
+  badgeStyle,
+  isMuted,
+}) => {
+  const color = isMuted
+    ? contentBadgeThemeMutedStylesMap(theme)[badgeStyle][variant].color
+    : contentBadgeThemeStylesMap(theme)[badgeStyle][variant].color;
+
+  return {
+    color,
+  };
+});

packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx

@@ -3,8 +3,11 @@ import type { ReactNode } from 'react';
 import {
   BadgeIcon,
   ContentBadgeBasicDiv,
+  ContentBadgeBasicLabel,
   ContentBadgeFeedbackDiv,
+  ContentBadgeFeedbackLabel,
   ContentBadgeThemeDiv,
+  ContentBadgeThemeLabel,
 } from './ContentBadge.style';
 import type {
   BadgeSize,
@@ -15,8 +18,6 @@ import type {
 } from '../badge.types';
 import { iconSizeMap } from './contentBadge.variants';
 
-import { Label } from '@/components/Label';
-
 export interface ContentBadgeBasicProps {
   hierarchy?: BasicHierarchy;
   size?: BadgeSize;
@@ -44,9 +45,16 @@ const ContentBadgeBasic = ({
       isMuted={isMuted}
       withIcon={withIcon}
     >
-      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
+      <ContentBadgeBasicLabel
+        size={size}
+        textAlign='center'
+        weight='normal'
+        hierarchy={hierarchy}
+        badgeStyle={badgeStyle}
+        isMuted={isMuted}
+      >
         {children}
-      </Label>
+      </ContentBadgeBasicLabel>
       {withIcon && (
         <BadgeIcon
           name='close-line'
@@ -84,9 +92,16 @@ const ContentBadgeFeedback = ({
       badgeStyle={badgeStyle}
       isMuted={isMuted}
     >
-      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
+      <ContentBadgeFeedbackLabel
+        size={size}
+        textAlign='center'
+        weight='normal'
+        variant={variant}
+        badgeStyle={badgeStyle}
+        isMuted={isMuted}
+      >
         {children}
-      </Label>
+      </ContentBadgeFeedbackLabel>
     </ContentBadgeFeedbackDiv>
   );
 };
@@ -110,9 +125,16 @@ const ContentBadgeTheme = ({
 }: ContentThemeBadgeProps) => {
   return (
     <ContentBadgeThemeDiv variant={variant} size={size} badgeStyle={badgeStyle} isMuted={isMuted}>
-      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
+      <ContentBadgeThemeLabel
+        size={size}
+        textAlign='center'
+        weight='normal'
+        variant={variant}
+        badgeStyle={badgeStyle}
+        isMuted={isMuted}
+      >
         {children}
-      </Label>
+      </ContentBadgeThemeLabel>
     </ContentBadgeThemeDiv>
   );
 };

packages/jds/src/components/Badge/numericBadge/NumericBadge.style.ts

@@ -10,6 +10,8 @@ import {
   numericBadgeFeedbacksMutedStylesMap,
 } from './numericBadge.variants';
 
+import { Label } from '@/components/Label';
+
 interface NumericBadgeBasicDivProps {
   hierarchy: BasicHierarchy;
   size: BadgeSize;
@@ -22,9 +24,6 @@ export const NumericBadgeBasicDiv = styled.div<NumericBadgeBasicDivProps>(
     const backgroundColor = isMuted
       ? numericBadgeBasicMutedStylesMap(theme)[badgeStyle].bg
       : numericBadgeBasicStylesMap(theme)[badgeStyle][hierarchy].bg;
-    const color = isMuted
-      ? numericBadgeBasicMutedStylesMap(theme)[badgeStyle].color
-      : numericBadgeBasicStylesMap(theme)[badgeStyle][hierarchy].color;
 
     return {
       minWidth: pxToRem(numericBadgeSizeMap[size].minWidth),
@@ -33,12 +32,32 @@ export const NumericBadgeBasicDiv = styled.div<NumericBadgeBasicDivProps>(
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor,
-      color,
       borderRadius: theme.scheme.semantic.radius.max,
     };
   },
 );
 
+interface NumericBadgeBasicLabelProps {
+  hierarchy: BasicHierarchy;
+  badgeStyle: NumericBadgeStyle;
+  isMuted: boolean;
+}
+
+export const NumericBadgeBasicLabel = styled(Label)<NumericBadgeBasicLabelProps>(({
+  theme,
+  hierarchy,
+  badgeStyle,
+  isMuted,
+}) => {
+  const color = isMuted
+    ? numericBadgeBasicMutedStylesMap(theme)[badgeStyle].color
+    : numericBadgeBasicStylesMap(theme)[badgeStyle][hierarchy].color;
+
+  return {
+    color,
+  };
+});
+
 interface NumericBadgeFeedbackDivProps {
   variant: FeedbackVariant;
   size: BadgeSize;
@@ -51,9 +70,6 @@ export const NumericBadgeFeedbackDiv = styled.div<NumericBadgeFeedbackDivProps>(
     const backgroundColor = isMuted
       ? numericBadgeFeedbacksMutedStylesMap(theme)[badgeStyle][variant].bg
       : numericBadgeFeedbackStylesMap(theme)[badgeStyle][variant].bg;
-    const color = isMuted
-      ? numericBadgeFeedbacksMutedStylesMap(theme)[badgeStyle][variant].color
-      : numericBadgeFeedbackStylesMap(theme)[badgeStyle][variant].color;
 
     return {
       minWidth: pxToRem(numericBadgeSizeMap[size].minWidth),
@@ -62,8 +78,28 @@ export const NumericBadgeFeedbackDiv = styled.div<NumericBadgeFeedbackDivProps>(
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor,
-      color,
       borderRadius: theme.scheme.semantic.radius.max,
     };
   },
 );
+
+interface NumericBadgeFeedbackLabelProps {
+  variant: FeedbackVariant;
+  badgeStyle: NumericBadgeStyle;
+  isMuted: boolean;
+}
+
+export const NumericBadgeFeedbackLabel = styled(Label)<NumericBadgeFeedbackLabelProps>(({
+  theme,
+  variant,
+  badgeStyle,
+  isMuted,
+}) => {
+  const color = isMuted
+    ? numericBadgeFeedbacksMutedStylesMap(theme)[badgeStyle][variant].color
+    : numericBadgeFeedbackStylesMap(theme)[badgeStyle][variant].color;
+
+  return {
+    color,
+  };
+});

packages/jds/src/components/Badge/numericBadge/NumericBadge.tsx

@@ -1,9 +1,12 @@
 import type { ReactNode } from 'react';
 
 import type { BadgeSize, BasicHierarchy, FeedbackVariant, NumericBadgeStyle } from '../badge.types';
-import { NumericBadgeBasicDiv, NumericBadgeFeedbackDiv } from './NumericBadge.style';
-
-import { Label } from '@/components/Label';
+import {
+  NumericBadgeBasicDiv,
+  NumericBadgeBasicLabel,
+  NumericBadgeFeedbackDiv,
+  NumericBadgeFeedbackLabel,
+} from './NumericBadge.style';
 
 export interface NumericBadgeBasicProps {
   hierarchy?: BasicHierarchy;
@@ -27,9 +30,16 @@ const NumericBadgeBasic = ({
       badgeStyle={badgeStyle}
       isMuted={isMuted}
     >
-      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
+      <NumericBadgeBasicLabel
+        size={size}
+        textAlign='center'
+        weight='normal'
+        hierarchy={hierarchy}
+        badgeStyle={badgeStyle}
+        isMuted={isMuted}
+      >
         {children}
-      </Label>
+      </NumericBadgeBasicLabel>
     </NumericBadgeBasicDiv>
   );
 };
@@ -58,9 +68,16 @@ const NumericBadgeFeedback = ({
       badgeStyle={badgeStyle}
       isMuted={isMuted}
     >
-      <Label as='span' size={size} textAlign='center' weight='normal' color='inherit'>
+      <NumericBadgeFeedbackLabel
+        size={size}
+        textAlign='center'
+        weight='normal'
+        variant={variant}
+        badgeStyle={badgeStyle}
+        isMuted={isMuted}
+      >
         {children}
-      </Label>
+      </NumericBadgeFeedbackLabel>
     </NumericBadgeFeedbackDiv>
   );
 };

packages/jds/src/components/Card/Card.context.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+
+import type { CardLayout, CardVariant, CardStyle } from './Card.types';
+
+export interface CardContextValue {
+  layout: CardLayout;
+  variant: CardVariant;
+  cardStyle?: CardStyle;
+  isDisabled: boolean;
+  interactive: boolean;
+}
+
+export const CardContext = createContext<CardContextValue | null>(null);
+
+export const useCardContext = (): CardContextValue => {
+  const context = useContext(CardContext);
+
+  if (!context) {
+    throw new Error('must be used within Card.Root');
+  }
+
+  return context;
+};