style(member): 활동 정보 모달 크기 조정

kgu-clab · Sep 7, 2024 · 36fc6d3 · 36fc6d3
1 parent b6f4a35
commit 36fc6d3
Showing 1 changed file with 24 additions and 6 deletions.
diff --git a/apps/member/src/components/modal/ActivityInfoModal/ActivityInfoModal.tsx b/apps/member/src/components/modal/ActivityInfoModal/ActivityInfoModal.tsx
@@ -8,6 +8,19 @@ import { createImageUrl } from '@utils/api';
 interface MemberInfoModalProps {
   id: number;
 }
+interface LongTextItemProps {
+  label: string;
+  text?: string;
+}
+
+const LongTextItem = ({ label, text }: LongTextItemProps) => {
+  return (
+    <li className="flex justify-between gap-4">
+      <span>{label}</span>
+      <span className="text-right font-semibold">{text || '-'}</span>
+    </li>
+  );
+};
 
 const ActivityInfoModal = ({ id }: MemberInfoModalProps) => {
   const { data, isLoading } = useActivityGroup(+id);
@@ -18,17 +31,22 @@ const ActivityInfoModal = ({ id }: MemberInfoModalProps) => {
     data;
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 overflow-auto ">
       <div className="scrollbar-hide max-h-[480px] overflow-auto rounded-lg border">
-        <Image src={createImageUrl(imageUrl)} alt={name} />
+        <Image
+          src={createImageUrl(imageUrl)}
+          alt={name}
+          height="max-h-[30vh]"
+          className="object-cover"
+        />
       </div>
-      <DetailsList>
+      <DetailsList className="h-full max-h-[50vh] overflow-scroll">
         <DetailsList.Item label="분류">{category}</DetailsList.Item>
         <DetailsList.Item label="이름">{name}</DetailsList.Item>
         <DetailsList.Item label="대상">{subject}</DetailsList.Item>
-        <DetailsList.Item label="설명">{content}</DetailsList.Item>
-        <DetailsList.Item label="커리큘럼">{curriculum}</DetailsList.Item>
-        <DetailsList.Item label="기술스텍">{techStack}</DetailsList.Item>
+        <LongTextItem label="설명" text={content} />
+        <LongTextItem label="커리큘럼" text={curriculum} />
+        <DetailsList.Item label="기술스텍">{techStack || '-'}</DetailsList.Item>
       </DetailsList>
     </div>
   );