[#140] fix: UI수정

Author: evaain706

src/app/(with-header)/activities/[id]/components/ReviewSection.tsx

@@ -8,6 +8,7 @@ import { useQuery } from '@tanstack/react-query';
 import { privateInstance } from '@/apis/privateInstance';
 import ReviewTitle from './ReviewTitle';
 import useUserStore from '@/stores/authStore';
+import cn from '@/lib/cn';
 
 import ReviewCardSkeleton from './Skeletons/ReviewCardSkeleton';
 
@@ -67,7 +68,7 @@ function ReviewSection({
   if (isLoading) {
     return (
       <div className='mt-10 flex flex-col space-y-8'>
-        <div className='relative min-h-350 flex-col'>
+        <div className='relative min-h-300 flex-col'>
           <ReviewTitle reviewCount={reviewCount} rating={rating} />
           {[...Array(3)].map((_, index) => (
             <ReviewCardSkeleton key={index} />
@@ -80,7 +81,7 @@ function ReviewSection({
   if (!reviewData || reviewData.reviews.length === 0) {
     return (
       <div className='mt-10 flex flex-col space-y-8'>
-        <div className='relative min-h-350'>
+        <div className='relative min-h-300'>
           <ReviewTitle reviewCount={reviewCount} rating={rating} />
 
           <div className='pointer-events-none absolute inset-0 z-10 flex h-full items-center justify-center select-none'>
@@ -103,8 +104,10 @@ function ReviewSection({
     <div className='mt-10 flex flex-col space-y-8'>
       <ReviewTitle reviewCount={reviewCount} rating={rating} />
 
-      <div className='pointer-events-none relative min-h-350 select-none'>
-        <div className={user ? '' : 'blur-sm'}>{ReviewComponent()}</div>
+      <div className='pointer-events-none relative min-h-300 select-none'>
+        <div className={cn(user ? '' : 'blur-sm', 'mt-10')}>
+          {ReviewComponent()}
+        </div>
 
         {!user && (
           <div className='pointer-events-none absolute inset-0 z-10 flex h-full items-center justify-center select-none'>

src/app/(with-header)/myactivity/components/InfoSection.tsx

@@ -39,6 +39,7 @@ export function InfoSection({
           placeholder='제목'
           className='w-full'
           value={title}
+          maxLength={20}
           onChange={(e) => onTitleChange(e.target.value)}
         />
       </div>

src/components/Button.tsx

@@ -45,7 +45,7 @@ export default function Button({
       )}
       {...props}
     >
-      {isLoading ? <span className='animate-pulse'>로딩중...</span> : children}
+      {isLoading ? <span className='animate-pulse'>...</span> : children}
     </button>
   );
 }

src/components/FloatingBox/BookingButton.tsx

@@ -31,7 +31,7 @@ export default function BookingButton({
       {onBooking ? (
         <div className='flex items-center justify-center gap-2'>
           <span className='h-10 w-10 animate-spin rounded-full border-2 border-white border-t-transparent' />
-          <p>...</p>
+          <p>요청전송중...</p>
         </div>
       ) : (
         children