From 36fc6d3bcd4520f33c00b95f4f95a40d28e7089e Mon Sep 17 00:00:00 2001
From: Jeong-Ag <kjungu1105@gmail.com>
Date: Sun, 8 Sep 2024 01:49:47 +0900
Subject: [PATCH] =?UTF-8?q?style(member):=20=ED=99=9C=EB=8F=99=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EB=AA=A8=EB=8B=AC=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActivityInfoModal/ActivityInfoModal.tsx   | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/apps/member/src/components/modal/ActivityInfoModal/ActivityInfoModal.tsx b/apps/member/src/components/modal/ActivityInfoModal/ActivityInfoModal.tsx
index 98b66bd0..70502f06 100644
--- 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>
   );