카드 내 설명을 최대, 최대 3줄로 고정하여 보여준다. (#7)

* feat: 최대, 최소 라인 수 3인 카드 설명 구현 * refactor: Card를 사용하는 부분 CardDescription 적용
alstn113 · Jan 1, 2025 · 2e497c0 · 2e497c0
1 parent 5a1a81d
commit 2e497c0
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/web/src/components/common/CardDescription.tsx b/web/src/components/common/CardDescription.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface CardDescriptionProps {
+  children: React.ReactNode;
+}
+
+const CardDescription = ({ children }: CardDescriptionProps) => {
+  return <p className="text-default-500 line-clamp-3 text-sm h-[3.75rem]">{children}</p>;
+};
+
+export default CardDescription;
diff --git a/web/src/components/dashboard/DraftExamCard.tsx b/web/src/components/dashboard/DraftExamCard.tsx
@@ -11,6 +11,7 @@ import {
   Image,
   Link,
 } from '@nextui-org/react';
+import CardDescription from '../common/CardDescription';
 
 interface ExamSummaryCardProps {
   exam: ExamSummaryResponse;
@@ -35,7 +36,7 @@ const DraftExamCard = ({ exam }: ExamSummaryCardProps) => {
       <Divider />
       <CardBody>
         <h3 className="text-lg font-semibold">{exam.title}</h3>
-        <p className="text-default-500 line-clamp-3">{exam.description}</p>
+        <CardDescription>{exam.description}</CardDescription>
       </CardBody>
       <Divider />
       <CardFooter className="flex justify-between">

diff --git a/web/src/components/dashboard/SubmittedExamCard.tsx b/web/src/components/dashboard/SubmittedExamCard.tsx
@@ -2,6 +2,7 @@ import { SubmittedExamSummaryResponse } from '@/api/examAPI';
 import { Routes } from '@/constants';
 import { fromNowDate } from '@/lib/date.ts';
 import { Card, CardBody, CardFooter, CardHeader, Divider, Image, Link } from '@nextui-org/react';
+import CardDescription from '../common/CardDescription';
 
 interface SubmittedExamCardProps {
   submittedExam: SubmittedExamSummaryResponse;
@@ -28,7 +29,7 @@ const SubmittedExamCard = ({ submittedExam }: SubmittedExamCardProps) => {
       <Divider />
       <CardBody>
         <h3 className="text-lg font-semibold">{submittedExam.title}</h3>
-        <p className="text-default-500 line-clamp-3">{submittedExam.description}</p>
+        <CardDescription>{submittedExam.description}</CardDescription>
       </CardBody>
       <Divider />
       <CardFooter className="flex justify-between">

diff --git a/web/src/components/exams/ExamSummaryCard.tsx b/web/src/components/exams/ExamSummaryCard.tsx
@@ -14,6 +14,7 @@ import {
 } from '@nextui-org/react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router';
+import CardDescription from '../common/CardDescription';
 
 interface ExamSummaryCardProps {
   exam: ExamSummaryResponse;
@@ -54,7 +55,7 @@ const ExamSummaryCard = ({ exam }: ExamSummaryCardProps) => {
       <Divider />
       <CardBody>
         <h3 className="text-lg font-semibold">{exam.title}</h3>
-        <p className="text-default-500 line-clamp-3">{exam.description}</p>
+        <CardDescription>{exam.description}</CardDescription>
       </CardBody>
       <Divider />
       <CardFooter className="flex justify-between">