🐛 tailwind 글자색 적용 오류 해결

src/components/ui/Card/Card.stories.tsx

@@ -35,10 +35,10 @@ export const Small: Story = {
           </div>
 
           <CardFlex direction={'col'} justify={'between'}>
-            <CardText type={'h3'}>스위치 팜</CardText>
-            <CardText type={'p2'}>스위치</CardText>
-            <CardText type={'p2'}>10만원대</CardText>
-            <CardText type={'p3'}>25분전</CardText>
+            <CardText type={'title'}>스위치 팜</CardText>
+            <CardText type={'description'}>스위치</CardText>
+            <CardText type={'description'}>10만원대</CardText>
+            <CardText type={'date'}>25분전</CardText>
           </CardFlex>
         </CardFlex>
       </Card>
@@ -69,11 +69,11 @@ export const Large: Story = {
           </div>
 
           <CardFlex direction={'col'} justify={'between'}>
-            <CardText type={'h3'}>스위치 팜</CardText>
-            <CardText type={'p2'}>스위치</CardText>
-            <CardText type={'p2'}>10만원대</CardText>
+            <CardText type={'title'}>스위치 팜</CardText>
+            <CardText type={'description'}>스위치</CardText>
+            <CardText type={'description'}>10만원대</CardText>
             <Button>대기중</Button>
-            <CardText type={'p3'}>25분전</CardText>
+            <CardText type={'date'}>25분전</CardText>
           </CardFlex>
         </CardFlex>
       </Card>

src/components/ui/Card/Card.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import Image from 'next/image'
+import COLORS from '@/styles/colors'
+import { TYPHOGRAPHY } from '@/styles/sizes'
 import { cn } from '@/utils'
 
 const cardVariants = cva(
@@ -93,22 +95,14 @@ CardImage.displayName = 'CardImage'
 const cardTextVariants = cva('', {
   variants: {
     type: {
-      h1: 'text-h1 font-bold',
-      h2: 'text-h2 font-bold',
-      h3: 'text-h3 font-bold',
-      h4: 'text-h4 font-bold',
-      p1: 'text-p1',
-      p2: 'text-p2',
-      p3: 'text-p3',
-    },
-    color: {
-      black: 'text-text-color',
-      gray: 'text-background-secondary-color',
+      title: TYPHOGRAPHY.title,
+      description: TYPHOGRAPHY.description,
+      date: TYPHOGRAPHY.date,
+      icon: TYPHOGRAPHY.icon,
     },
   },
   defaultVariants: {
-    type: 'h1',
-    // color: 'black',
+    type: 'description',
   },
 })
 
@@ -118,10 +112,10 @@ export type CardTextProps = React.HTMLAttributes<HTMLDivElement> &
   }
 
 const CardText = React.forwardRef<HTMLDivElement, CardTextProps>(
-  ({ type, color, className, ...props }, ref) => (
+  ({ type, className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(cardTextVariants({ type, color, className }))}
+      className={cn(cardTextVariants({ type, className }))}
       {...props}
     />
   ),

src/styles/sizes.ts

@@ -1,33 +1,16 @@
-const SIZE = {
-  font_24: '24px',
-  font_20: '20px',
-  font_14: '14px',
-  font_12: '12px',
-  font_10: '10px',
-  card_lg: '161px',
-  card_md: '118px',
-  card_sm: '106px',
-  card_radius: '6px',
-} as const
-
-const FONT_SIZE = {
-  h1: SIZE.font_24,
-  h2: SIZE.font_20,
-  h3: SIZE.font_14,
-  h4: SIZE.font_12,
-  p1: SIZE.font_14,
-  p2: SIZE.font_12,
-  p3: SIZE.font_10,
+const TYPHOGRAPHY = {
+  title: 'text-[14px] font-bold',
+  description: 'text-[12px]',
+  date: 'text-[10px] text-[#BFBFBF]',
+  icon: 'text-[10px]',
 }
-const FONT_WEIGHT = {}
 const HEIGHT = {
-  'card-lg': SIZE.card_lg,
-  'card-md': SIZE.card_md,
-  'card-sm': SIZE.card_sm,
+  'card-lg': '161px',
+  'card-md': '118px',
+  'card-sm': '106px',
 }
 const BORDER_RADIUS = {
-  card: SIZE.card_radius,
+  card: '6px',
 }
 
-export default SIZE
-export { FONT_SIZE, FONT_WEIGHT, HEIGHT, BORDER_RADIUS }
+export { TYPHOGRAPHY, HEIGHT, BORDER_RADIUS }

tailwind.config.js

@@ -1,11 +1,6 @@
 const { createThemes } = require('tw-colors')
 const { LIGHT_THEMES, DARK_THEMES } = require('./src/styles/colors')
-const {
-  HEIGHT,
-  FONT_SIZE,
-  FONT_WEIGHT,
-  BORDER_RADIUS,
-} = require('./src/styles/sizes')
+const { HEIGHT, BORDER_RADIUS } = require('./src/styles/sizes')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -26,15 +21,6 @@ module.exports = {
         'gradient-secondary':
           'linear-gradient(to right, #7C54D1 0%, #534CD0 100%)',
       }),
-      fontSize: {
-        ...FONT_SIZE,
-      },
-      fontWeight: {
-        ...FONT_WEIGHT,
-      },
-      colors: {
-        ...LIGHT_THEMES,
-      },
       height: {
         ...HEIGHT,
       },