fix: lesson card title 긴 글자 수 처리

HanaFun · Jul 8, 2024 · a166dab · a166dab
1 parent 4e09eb4
commit a166dab
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/components/molecules/LessonCard.tsx b/src/components/molecules/LessonCard.tsx
@@ -17,6 +17,10 @@ export const LessonCard = ({
   show,
   handleClick,
 }: IProps) => {
+  const truncateTitle = (title: string, maxLength: number) => {
+    return title.length > maxLength ? `${title.slice(0, maxLength)}...` : title;
+  };
+
   return (
     <div className='relative w-[108px] h-[156px] px-4 pt-5 mr-[15px] bg-white font-hanaRegular rounded-2xl shadow-md lesson-card'>
       {show && (
@@ -26,7 +30,7 @@ export const LessonCard = ({
         />
       )}
       <img src={image} alt='cardImg' className='w-20 h-20 relative' />
-      <p className='text-xs mt-1'>{title}</p>
+      <p className='text-xs mt-1'>{truncateTitle(title, 7)}</p>
       <div className='flex justify-between mt-4 text-[6px]'>
         <p># {category}</p>
         <p>{date}</p>