fix: 클래스 상세 정보-상세 설명 글자수 수정

HanaFun · Jul 8, 2024 · b84f720 · b84f720
1 parent b70288f
commit b84f720
Showing 1 changed file with 23 additions and 2 deletions.
diff --git a/src/components/molecules/LessonDetail.tsx b/src/components/molecules/LessonDetail.tsx
@@ -1,21 +1,29 @@
+import { useState } from 'react';
+
 interface Iprops {
   lessonDetail: BaseResponseType<LessonDetailType> | null | undefined;
 }
 
 export const LessonDetail = ({ lessonDetail }: Iprops) => {
+  const [isDescriptionExpanded, setDescriptionExpanded] = useState(false);
+
   const category = lessonDetail?.data?.categoryName;
   const people = lessonDetail?.data?.capacity;
   const price = lessonDetail?.data?.price;
   const place = lessonDetail?.data?.location;
   const materials = lessonDetail?.data?.materials;
   const description = lessonDetail?.data?.description;
 
+  const toggleDescription = () => {
+    setDescriptionExpanded(!isDescriptionExpanded);
+  };
+
   const formatNumber = (value: number) => {
     return new Intl.NumberFormat('ko-KR').format(value);
   };
 
   return (
-    <div className='mt-3 mb-32 px-5 py-3 w-[351px] h-[122px] font-hanaRegular text-xs bg-white rounded-2xl border-[1px] border-hanaSilver'>
+    <div className='mt-3 mb-32 px-5 py-3 w-[351px] font-hanaRegular text-xs bg-white rounded-2xl border-[1px] border-hanaSilver'>
       <div className='flex flex-row'>
         {lessonDetail?.data?.image ? (
           <img
@@ -33,7 +41,20 @@ export const LessonDetail = ({ lessonDetail }: Iprops) => {
           <p>가격 : {formatNumber(Number(price) || 0)} 원</p>
           <p>장소 : {place}</p>
           <p>준비물 : {materials} </p>
-          <p>상세설명 : {description}</p>
+          <p>
+            상세설명 :{' '}
+            {description && description.length > 20 && !isDescriptionExpanded
+              ? `${description.substring(0, 15)} ...`
+              : description}
+            {description && description.length > 20 && (
+              <button
+                onClick={toggleDescription}
+                className='text-hanaSilver ml-1'
+              >
+                {isDescriptionExpanded ? '접기' : '더보기'}
+              </button>
+            )}
+          </p>
         </div>
       </div>
     </div>