체험 상세페이지 UI 리팩토링

apps/what-today/src/components/activities/ActivitiesDescription.tsx

@@ -11,8 +11,8 @@ interface ActivitiesDescriptionProps {
 export default function ActivitiesDescription({ description, className }: ActivitiesDescriptionProps) {
   return (
     <section className={twMerge(`flex h-fit w-full flex-col justify-start gap-8`, className)}>
-      <div className='text-2lg font-bold text-gray-950'>체험 설명</div>
-      <p className='text-lg text-gray-950'>{description}</p>
+      <div className='section-text'>체험 설명</div>
+      <p className='body-text'>{description}</p>
     </section>
   );
 }

apps/what-today/src/components/activities/ActivitiesInformation.tsx

@@ -14,6 +14,7 @@ interface ActivitiesInformationProps {
   className?: string;
   id?: string;
   isAuthor: boolean;
+  price: number;
 }
 
 /**
@@ -28,6 +29,7 @@ export default function ActivitiesInformation({
   address,
   className,
   isAuthor,
+  price,
 }: ActivitiesInformationProps) {
   const navigate = useNavigate();
   const { toast } = useToast();
@@ -60,36 +62,46 @@ export default function ActivitiesInformation({
 
   return (
     <>
-      <section className={twMerge('flex h-fit w-full flex-col items-start gap-8', className)}>
+      <section
+        className={twMerge(
+          'flex h-fit w-full flex-col items-start gap-8 rounded-xl border border-gray-50 p-20',
+          className,
+        )}
+      >
         <div className='flex w-full items-center justify-between'>
-          <p className='text-md text-gray-950'>{category}</p>
+          <p className='caption-text'>{category}</p>
           {isAuthor && (
             <Dropdown.Root>
               <Dropdown.Trigger className='flex size-24 items-center justify-center' />
-              <Dropdown.Menu>
+              <Dropdown.Menu className='-left-95'>
                 <Dropdown.Item onClick={() => navigate(`/experiences/create/${id}`)}>수정하기</Dropdown.Item>
                 <Dropdown.Item onClick={() => setIsDeleteOpen(true)}>삭제하기</Dropdown.Item>
               </Dropdown.Menu>
             </Dropdown.Root>
           )}
         </div>
-        <p className='text-2xl font-bold'>{title}</p>
-        <div className='mt-9 flex items-center gap-6 text-base text-gray-700'>
+        <p className='title-text'>{title}</p>
+        <div className='body-text mt-9 flex items-center gap-6'>
           <StarIcon filled />
           <span>
             {rating.toFixed(1)} ({reviewCount})
           </span>
         </div>
-        <div className='mt-2 ml-2 flex items-center gap-4 text-base text-gray-700'>
+        <div className='body-text mt-2 ml-2 flex items-center gap-4'>
           <LocationIcon />
           <span>{address}</span>
         </div>
+        <div className='body-text mt-2 ml-2 flex items-center gap-4'>
+          <p className='body-text'>
+            <span className='font-bold text-gray-950'>₩ {price.toLocaleString()}</span> / 인
+          </p>
+        </div>
       </section>
       <Modal.Root open={isDeleteOpen} onClose={() => setIsDeleteOpen(false)}>
         <Modal.Content className='flex max-w-300 flex-col items-center gap-6 text-center md:max-w-350 lg:max-w-400'>
           <div className='flex flex-col items-center gap-6 text-center'>
             <WarningLogo className='md:size-110 lg:size-150' size={88} />
-            <p className='text-2lg font-bold'>체험을 삭제하시겠습니까?</p>
+            <p className='section-text'>체험을 삭제하시겠습니까?</p>
           </div>
           <Modal.Actions>
             <Modal.CancelButton>아니요</Modal.CancelButton>

apps/what-today/src/components/activities/ActivitiesMap.tsx

@@ -13,9 +13,9 @@ interface ActivitiesMapProps {
  */
 export default function ActivitiesMap({ address, className }: ActivitiesMapProps) {
   return (
-    <section className={twMerge(`flex h-511 w-full flex-col justify-start text-xl font-bold`, className)}>
-      <div className='text-2lg mb-8 text-left font-bold'>오시는 길</div>
-      <div className='text-md mb-8 text-left font-semibold text-gray-950'>{address}</div>
+    <section className={twMerge(`section-text flex h-511 w-full flex-col justify-start gap-8`, className)}>
+      <div>오시는 길</div>
+      <div className='body-text'>{address}</div>
       <div className='h-full w-full overflow-hidden rounded-3xl'>
         <KakaoMap address={address} />
       </div>

apps/what-today/src/components/activities/ActivitiesReview.tsx

@@ -20,15 +20,15 @@ export default function ActivitiesReview({ review }: ActivitiesReviewProps) {
   });
 
   return (
-    <div className='mb-20 rounded-3xl bg-white px-20 py-20 shadow-[0_2px_12px_rgba(0,0,0,0.1)]'>
+    <div className='mb-20 rounded-xl border border-gray-50 px-20 py-20'>
       <div className='mb-4 flex items-center gap-8'>
-        <div className='text-lg font-bold text-gray-950'>{user.nickname}</div>
-        <div className='text-md text-[#A4A1AA]'>{formattedDate}</div>
+        <div className='body-text font-bold'>{user.nickname}</div>
+        <div className='caption-text text-gray-400'>{formattedDate}</div>
       </div>
       <div className='mb-12'>
         <RatingStars rating={rating} />
       </div>
-      <p className='text-lg whitespace-pre-wrap text-gray-950'>{content}</p>
+      <p className='body-text whitespace-pre-wrap'>{content}</p>
     </div>
   );
 }

apps/what-today/src/components/activities/ActivityImages.tsx

@@ -12,7 +12,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
   return (
     <section className={`grid h-400 grid-cols-${subImageCount === 0 ? '1' : '2'} rounded-xl'} gap-8`}>
       {/* 왼쪽 메인이미지 */}
-      <div className='h-full w-full overflow-hidden rounded-xl border border-gray-200'>
+      <div className='h-full w-full overflow-hidden rounded-xl border border-gray-50'>
         <img alt='배너 이미지' className='h-full w-full object-cover' src={bannerImageUrl} onError={handleImageError} />
       </div>
 
@@ -21,7 +21,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
         <div className='h-full w-full'>
           {/* 1개일 때: 전체 영역 사용 */}
           {subImageCount === 1 && (
-            <div className='h-full w-full overflow-hidden rounded-xl border border-gray-200'>
+            <div className='h-full w-full overflow-hidden rounded-xl border border-gray-50'>
               <img
                 alt='서브 이미지'
                 className='h-full w-full object-cover object-center'
@@ -35,15 +35,15 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
           {subImageCount === 2 && (
             <div className='h-full w-full'>
               <div className='grid h-400 w-full grid-rows-[196px_196px] gap-8'>
-                <div className='overflow-hidden rounded-xl border border-gray-200'>
+                <div className='overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 1'
                     className='h-full w-full object-cover object-center'
                     src={subImages[0].imageUrl}
                     onError={handleImageError}
                   />
                 </div>
-                <div className='overflow-hidden rounded-xl border border-gray-200'>
+                <div className='overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 2'
                     className='h-full w-full object-cover object-center'
@@ -60,7 +60,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
             <div className='h-full w-full'>
               <div className='grid h-400 w-full grid-cols-2 grid-rows-[196px_196px] gap-8'>
                 {/* 이미지 1 */}
-                <div className='overflow-hidden rounded-xl border border-gray-200'>
+                <div className='overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 1'
                     className='h-full w-full object-cover object-center'
@@ -70,7 +70,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
                 </div>
 
                 {/* 이미지 2 */}
-                <div className='overflow-hidden rounded-xl border border-gray-200'>
+                <div className='overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 2'
                     className='h-full w-full object-cover object-center'
@@ -80,7 +80,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
                 </div>
 
                 {/* 이미지 3 - col-span-2 */}
-                <div className='col-span-2 overflow-hidden rounded-xl border border-gray-200'>
+                <div className='col-span-2 overflow-hidden rounded-xl border border-gray-50'>
                   <img
                     alt='서브 이미지 3'
                     className='h-full w-full object-cover object-center'
@@ -97,7 +97,7 @@ export default function ActivityImages({ bannerImageUrl, subImages }: ActivityIm
             <div className='h-full w-full'>
               <div className='grid h-400 w-full grid-cols-2 grid-rows-[196px_196px] gap-8'>
                 {subImages.slice(0, 4).map((img, index) => (
-                  <div key={img.id} className='overflow-hidden rounded-xl border border-gray-200'>
+                  <div key={img.id} className='overflow-hidden rounded-xl border border-gray-50'>
                     <img
                       alt={`서브 이미지 ${index + 1}`}
                       className='h-full w-full object-cover object-center'

apps/what-today/src/components/activities/Divider.tsx

@@ -5,5 +5,5 @@ interface DividerProps {
 }
 
 export default function Divider({ className }: DividerProps) {
-  return <div className={twMerge('rounded-3xl border-t border-gray-100', className)} />;
+  return <div className={twMerge('rounded-3xl border-t border-gray-50', className)} />;
 }

apps/what-today/src/components/activities/ReservationBottomBar.tsx

@@ -25,18 +25,19 @@ export default function ReservationBottomBar({
   else buttonText = '예약하기';
 
   return (
-    <div className='fixed bottom-0 left-0 z-50 w-full border-t border-[#E6E6E6] bg-white px-48 pt-18 pb-18 shadow-[0_-2px_10px_rgba(0,0,0,0.05)]'>
+    <div className='fixed bottom-0 left-0 z-50 w-full border-t border-[#E6E6E6] bg-white px-20 pt-18 pb-18 shadow-[0_-2px_10px_rgba(0,0,0,0.05)]'>
       <div className='mb-12 flex items-center justify-between'>
         <div>
-          <p className='text-2lg font-bold'>
+          <p className='body-text font-bold'>
             ₩ {totalPrice.toLocaleString()}
-            <span className='text-lg font-normal'> / {reservation?.headCount ?? 1}명</span>
+            <span className='font-normal'> / {reservation?.headCount ?? 1}명</span>
           </p>
-          {reservation && <p className='mt-4 text-sm text-gray-500'>{formattedDateTime}</p>}
+          {reservation && <p className='caption-text mt-4 text-gray-400'>{formattedDateTime}</p>}
         </div>
 
         <Button
-          className='text-primary-500 h-fit w-fit p-0 text-lg font-bold underline'
+          className='text-primary-500 body-text font-bold underline'
+          size='none'
           variant='none'
           onClick={onSelectDate}
         >

apps/what-today/src/components/activities/ReviewSection.tsx

@@ -1,5 +1,6 @@
-import { Button, StarIcon } from '@what-today/design-system';
+import { NoResult, StarIcon } from '@what-today/design-system';
 
+import { ReviewCardSkeleton } from '@/components/skeletons/activities';
 import { useActivityReviews } from '@/hooks/activityDetail';
 import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 import type { ActivityReview } from '@/schemas/activityReview';
@@ -38,7 +39,7 @@ export default function ReviewSection({ activityId }: ReviewSectionProps) {
     return (
       <section className='w-full'>
         <div className='mb-8 flex gap-8'>
-          <h2 className='text-2lg font-bold text-gray-900'>체험 후기</h2>
+          <h2 className='section-text'>체험 후기</h2>
         </div>
         <p className='py-8 text-center'>후기를 불러오는 중...</p>
       </section>
@@ -49,7 +50,7 @@ export default function ReviewSection({ activityId }: ReviewSectionProps) {
     return (
       <section className='w-full'>
         <div className='mb-8 flex gap-8'>
-          <h2 className='text-2lg font-bold text-gray-900'>체험 후기</h2>
+          <h2 className='section-text'>체험 후기</h2>
         </div>
         <p className='py-8 text-center text-red-500'>
           후기를 불러오는 중 오류가 발생했습니다: {error instanceof Error ? error.message : '알 수 없는 오류'}
@@ -60,16 +61,16 @@ export default function ReviewSection({ activityId }: ReviewSectionProps) {
 
   return (
     <section className='w-full'>
-      <div className='mb-8 flex gap-8'>
-        <h2 className='text-2lg font-bold text-gray-900'>체험 후기</h2>
-        <span className='text-lg font-bold text-[#79747E]'>{totalCount.toLocaleString()}개</span>
+      <div className='mb-8 flex items-center gap-8'>
+        <h2 className='section-text'>체험 후기</h2>
+        <span className='body-text text-gray-400'>{totalCount.toLocaleString()}개</span>
       </div>
 
       {totalCount > 0 && (
         <div className='mb-34 flex flex-col items-center'>
-          <div className='text-3xl font-bold text-gray-950'>{averageRating.toFixed(1)}</div>
-          <div className='text-lg font-bold text-gray-950'>{getSatisfactionText(averageRating)}</div>
-          <div className='text-md flex items-center gap-2 text-[#79747E]'>
+          <div className='title-text'>{averageRating.toFixed(1)}</div>
+          <div className='section-text'>{getSatisfactionText(averageRating)}</div>
+          <div className='body-text flex items-center gap-4 text-gray-400'>
             <StarIcon filled className='size-16' />
             <span>{totalCount.toLocaleString()}개 후기</span>
           </div>
@@ -80,25 +81,19 @@ export default function ReviewSection({ activityId }: ReviewSectionProps) {
         {allReviews.length > 0 ? (
           allReviews.map((review: ActivityReview) => <ActivitiesReview key={review.id} review={review} />)
         ) : (
-          <p className='py-8 text-center text-gray-500'>아직 등록된 후기가 없습니다.</p>
+          <div className='mt-20 flex items-center justify-center'>
+            <NoResult dataName='후기가' />
+          </div>
         )}
       </div>
 
       {/* 무한스크롤 트리거 */}
       <div ref={observerRef} className='h-4' />
 
-      {/* 더보기 버튼 (옵션) */}
-      {hasNextPage && (
-        <div className='flex justify-center'>
-          <Button className='px-6 py-2' disabled={isFetchingNextPage} variant='outline' onClick={() => fetchNextPage()}>
-            {isFetchingNextPage ? '로딩 중...' : '더 많은 후기 보기'}
-          </Button>
-        </div>
-      )}
-
       {isFetchingNextPage && (
-        <div className='py-4 text-center'>
-          <p className='text-gray-500'>후기를 더 불러오는 중...</p>
+        <div className='flex flex-col gap-16'>
+          <ReviewCardSkeleton />
+          <ReviewCardSkeleton />
         </div>
       )}
     </section>

apps/what-today/src/components/activities/reservation/HeadCountSelector.tsx

@@ -10,15 +10,15 @@ interface HeadCountSelectorProps {
 export default function HeadCountSelector({ headCount, onIncrease, onDecrease }: HeadCountSelectorProps) {
   return (
     <div className='flex items-center justify-between'>
-      <p className='text-lg font-bold text-gray-950'>참여 인원 수</p>
+      <p className='section-text'>참여 인원 수</p>
 
-      <div className='flex items-center gap-23 rounded-3xl border border-[#EEEEEE] px-15'>
-        <Button className='h-fit w-fit p-0' size='sm' variant='none' onClick={onDecrease}>
-          <MinusIcon className='size-20' color='#4B4B4B' />
+      <div className='flex items-center gap-23 rounded-3xl border border-gray-50 px-15'>
+        <Button size='none' variant='none' onClick={onDecrease}>
+          <MinusIcon className='size-14' color='var(--color-gray-600)' />
         </Button>
-        <span className='p-8 text-center text-lg font-bold text-gray-950'>{headCount}</span>
-        <Button className='h-fit w-fit p-0' size='sm' variant='none' onClick={onIncrease}>
-          <PlusIcon className='size-20' color='#4B4B4B' />
+        <span className='body-text p-8 text-center font-bold'>{headCount}</span>
+        <Button size='none' variant='none' onClick={onIncrease}>
+          <PlusIcon className='size-14' color='var(--color-gray-600)' />
         </Button>
       </div>
     </div>