Feat[#THKV-116] : InfoCard 리디자인, typography variants 수정

src/components/common/InfoCard/index.tsx

@@ -1,25 +1,26 @@
 import { cn } from '@/utils/core';
+import { InfoCardTypo } from '../Typography';
 import Icon from '@/components/common/Icon';
 
 type InfoCardProps = {
   message: string;
   className?: string;
 };
 
-const ICON_SIZE = 16;
+const ICON_SIZE = 24;
 
 const InfoCard = ({ message, className }: InfoCardProps) => {
   return (
     <div
       className={cn(
-        'whitespace-wrap flex h-fit w-full min-w-60 max-w-80 items-center gap-2 overflow-hidden break-all rounded-md border-[1px] border-green-300 bg-white-100 p-4',
+        'whitespace-wrap flex h-fit w-full min-w-60 max-w-80 items-center gap-2 overflow-hidden break-all rounded-md border border-grey-100 bg-blue-50 p-4',
         className,
       )}
     >
       <div className='h-fit w-fit'>
-        <Icon name='normal' width={ICON_SIZE} height={ICON_SIZE} />
+        <Icon name='info' color='black' width={ICON_SIZE} height={ICON_SIZE} />
       </div>
-      <span className='text-sm'>{message}</span>
+      <InfoCardTypo>{message}</InfoCardTypo>
     </div>
   );
 };

src/components/common/Typography/Typography.variant.tsx

@@ -53,6 +53,7 @@ export const typographyVariants = cva('whitespace-pre-line text-wrap', {
       darken: 'text-dark-200',
       dark: 'text-dark-100',
       gray: 'text-gray-500',
+      black: 'text-black-100',
     },
   },
   defaultVariants: {

src/components/common/Typography/index.tsx

@@ -38,6 +38,11 @@ export const TableBodyTypo = customTypography('span', {
   color: 'dark',
 });
 
+export const InfoCardTypo = customTypography('span', {
+  type: 'Body2',
+  color: 'black',
+});
+
 // 리디자인 변경 전 Typography
 export const HeadPrimary = customTypography('h1', {
   type: 'heading1',