feat: CardDisplay 컴포넌트 추가

src/components/CardDisplay/CardDisplay.tsx

@@ -0,0 +1,134 @@
+import { Grid, HStack, Typography, VStack } from '@/shared/components';
+import { styleToken } from '@/shared/styles';
+import { removeAllSpaces, replaceMaskText } from '@/shared/utils';
+
+type CardSize = 'big' | 'small';
+type CardTypographyVariant = 'headline' | 'body';
+type CardDisplayProps = {
+  size: CardSize;
+  label?: string;
+  backgroundColor: string;
+  cardNumber: string;
+  expirationDate: string;
+  ownerName: string;
+};
+
+export const CardDisplay = ({
+  size,
+  label,
+  backgroundColor,
+  cardNumber,
+  expirationDate,
+  ownerName,
+}: CardDisplayProps) => {
+  const { cardDisplayProps, cardChipProps, typographyVariant, maskFontSize } = getCardStyles(size);
+  const cardDateString = removeAllSpaces(expirationDate);
+  const expirationMonth = cardDateString.slice(0, 2) || 'MM';
+  const expirationYear = cardDateString.slice(2, 4) || 'YY';
+  return (
+    <VStack alignItems="center" justifyContent="center">
+      <VStack
+        alignItems="center"
+        justifyContent="center"
+        color={styleToken.color.gray600}
+        backgroundColor={backgroundColor || styleToken.color.body}
+        boxShadow={`3px 3px 5px ${styleToken.color.shadow}`}
+        borderRadius="5px"
+        padding="10px 14px"
+        gap="0"
+        {...cardDisplayProps}
+      >
+        <VStack width="100%">
+          <VStack>{label && <Typography variant="body">{label}</Typography>}</VStack>
+          <VStack backgroundColor={styleToken.color.mustard} borderRadius="4px" {...cardChipProps} />
+        </VStack>
+        <VStack alignItems="center" justifyContent="space-between" width="100%" flexGrow={1}>
+          <VStack width="100%" />
+          <CardNumberDisplay cardNumber={cardNumber} variant={typographyVariant} maskFontSize={maskFontSize} />
+          <CardOwnerDisplay
+            ownerName={ownerName}
+            variant={typographyVariant}
+            expirationMonth={expirationMonth}
+            expirationYear={expirationYear}
+          />
+        </VStack>
+      </VStack>
+    </VStack>
+  );
+};
+
+const CardNumberDisplay = ({
+  cardNumber,
+  variant,
+  maskFontSize,
+}: {
+  cardNumber: string;
+  variant: CardTypographyVariant;
+  maskFontSize: string;
+}) => (
+  <Grid gridTemplateColumns="repeat(4, 1fr)" width="100%" paddingLeft="20px">
+    {cardNumber.split(' ').map((number, index) => {
+      const isTextMaskIndex = index > 1;
+      const text = isTextMaskIndex ? replaceMaskText(number) : number;
+      return (
+        <Typography
+          key={`card-number-${index}`}
+          variant={variant}
+          whiteSpace="nowrap"
+          overflow="hidden"
+          textOverflow="ellipsis"
+          {...(isTextMaskIndex && { fontSize: maskFontSize })}
+        >
+          {text}
+        </Typography>
+      );
+    })}
+  </Grid>
+);
+
+const CardOwnerDisplay = ({
+  ownerName,
+  variant,
+  expirationMonth,
+  expirationYear,
+}: {
+  variant: CardTypographyVariant;
+  ownerName: string;
+  expirationMonth: string;
+  expirationYear: string;
+}) => (
+  <HStack width="100%" justifyContent="space-between" gap="10px">
+    <Typography variant={variant} whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" lineHeight={1}>
+      {ownerName}
+    </Typography>
+    <HStack width="40px" justifyContent="flex-end" alignItems="center">
+      <Typography variant={variant} lineHeight={1}>
+        {expirationMonth}
+      </Typography>
+      <Typography variant={variant} lineHeight={1} textAlign="center">
+        /
+      </Typography>
+      <Typography variant={variant} lineHeight={1}>
+        {expirationYear}
+      </Typography>
+    </HStack>
+  </HStack>
+);
+
+const getCardStyles = (size: CardSize) => {
+  const cardDisplayProps = {
+    width: size === 'big' ? '290px' : '208px',
+    height: size === 'big' ? '180px' : '130px',
+    fontSize: size === 'big' ? '24px' : '14px',
+  };
+  const cardChipProps = {
+    width: size === 'big' ? '55px' : '40px',
+    height: size === 'big' ? '36px' : '26px',
+    marginTop: size === 'big' ? '24px' : '9px',
+  };
+  const typographyVariant: CardTypographyVariant = size === 'big' ? 'headline' : 'body';
+  const maskFontSize = size === 'big' ? '14px' : '10px';
+  return { cardDisplayProps, cardChipProps, typographyVariant, maskFontSize };
+};
+
+CardDisplay.displayName = 'CardDisplay';

src/components/CardDisplay/index.ts

@@ -0,0 +1 @@
+export * from './CardDisplay';

src/components/index.ts

@@ -1 +1,3 @@
 export * from './AppLayout';
+export * from './CardInput';
+export * from './CardDisplay';