From a166dab38b6492ad0f107ae14e3d17196a6ea8d7 Mon Sep 17 00:00:00 2001
From: seoyeon08 <silversun0808@gmail.com>
Date: Mon, 8 Jul 2024 14:55:23 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20lesson=20card=20title=20=EA=B8=B4=20?=
 =?UTF-8?q?=EA=B8=80=EC=9E=90=20=EC=88=98=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/LessonCard.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/LessonCard.tsx b/src/components/molecules/LessonCard.tsx
index 47d8011..3aa5c40 100644
--- 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>