Reactor: 체험 상세

src/domain/Activity/components/detail/Review/ExpandableReview.tsx → src/domain/Activity/components/detail/Review/ExpandableText.tsx

@@ -6,9 +6,13 @@ import TriangleArrow from '@/shared/assets/icons/TriangleArrow';
 
 interface ExpandableReviewProps {
   text: string;
+  maxHeight?: number;
 }
 
-export default function ExpandableReview({ text }: ExpandableReviewProps) {
+export default function ExpandableText({
+  text,
+  maxHeight = 1000,
+}: ExpandableReviewProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [showToggle, setShowToggle] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -45,15 +49,12 @@ export default function ExpandableReview({ text }: ExpandableReviewProps) {
       <div
         ref={contentRef}
         className={`font-size-16 relative overflow-hidden font-medium break-words whitespace-pre-line text-gray-950 transition-all duration-900 ease-in-out ${
-          isExpanded ? 'max-h-[1000px] opacity-80' : 'max-h-[120px] opacity-100'
+          isExpanded
+            ? `max-h-[${maxHeight}px] opacity-80`
+            : `max-h-[120px] opacity-100`
         }`}
       >
         {text}
-
-        {/* 말줄임용 그라디언트 */}
-        {!isExpanded && showToggle && (
-          <div className='pointer-events-none absolute bottom-0 left-0 h-10 w-full bg-gradient-to-t from-white via-white/100 to-transparent transition-opacity duration-500' />
-        )}
       </div>
 
       {/* 더보기 버튼 */}

src/domain/Activity/components/detail/Review/ReviewCard.tsx

@@ -1,6 +1,7 @@
 import { Star } from 'lucide-react';
 
-import ExpandableReview from '@/domain/Activity/components/detail/Review/ExpandableReview';
+import ExpandableText from '@/domain/Activity/components/detail/Review/ExpandableText';
+import Avatar from '@/shared/components/ui/avatar';
 
 import { Review } from '../../../types/detail/types';
 import { getTimeAgo } from '../../../utils/getTimeAgo';
@@ -37,8 +38,9 @@ export default function ReviewCard(review: Review) {
 
   return (
     <article className='flex h-fit flex-col gap-[1.2rem] rounded-4xl bg-white p-20 shadow-[0_4px_20px_rgba(0,0,0,0.05)]'>
-      <div className='flex flex-col gap-4'>
+      <div className='flex flex-col gap-10'>
         <div className='flex items-center justify-start gap-10'>
+          <Avatar profileImageUrl={user.profileImageUrl} />
           <span className='font-size-16 font-bold text-gray-950'>
             {user.nickname}
           </span>
@@ -61,7 +63,7 @@ export default function ReviewCard(review: Review) {
           })}
         </div>
       </div>
-      <ExpandableReview text={content} />
+      <ExpandableText text={content} />
     </article>
   );
 }

src/domain/Activity/components/detail/description/DescriptionSection.tsx

@@ -1,3 +1,5 @@
+import ExpandableText from '@/domain/Activity/components/detail/Review/ExpandableText';
+
 /**
  * DescriptionSection
  * 체험 상세 페이지에서 체험 설명을 보여주는 컴포넌트
@@ -16,9 +18,7 @@ export default function DescriptionSection({
   return (
     <section className='flex w-full flex-col gap-8 border-b border-gray-100 pb-40'>
       <h2 className='font-size-18 font-bold'>체험 설명</h2>
-      <p className='font-size-16 font-medium break-words whitespace-pre-line'>
-        {description}
-      </p>
+      <ExpandableText text={description} />
     </section>
   );
 }