체험 상세페이지 추가 디자인 수정

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

@@ -64,12 +64,12 @@ export default function ActivitiesInformation({
     <>
       <section
         className={twMerge(
-          'flex h-fit w-full flex-col items-start gap-8 rounded-xl border border-gray-50 p-20',
+          'bg-gray-25 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='caption-text'>{category}</p>
+          <p className='caption-text text-gray-400'>{category}</p>
           {isAuthor && (
             <Dropdown.Root>
               <Dropdown.Trigger className='flex size-24 items-center justify-center' />
@@ -84,16 +84,17 @@ export default function ActivitiesInformation({
         <div className='body-text mt-9 flex items-center gap-6'>
           <StarIcon filled />
           <span>
-            {rating.toFixed(1)} ({reviewCount})
+            {rating.toFixed(1)} <span className='text-gray-400'>({reviewCount})</span>
           </span>
         </div>
         <div className='body-text mt-2 ml-2 flex items-center gap-4'>
-          <LocationIcon />
-          <span>{address}</span>
+          <LocationIcon className='shrink-0' color='var(--color-gray-400)' />
+          <span className='break-words'>{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 className='body-text text-gray-400'>
+            <span className='font-bold text-gray-400'>₩</span>
+            <span className='font-bold text-gray-950'> {price.toLocaleString()}</span> / 인
           </p>
         </div>
       </section>

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

@@ -20,7 +20,7 @@ export default function ActivitiesReview({ review }: ActivitiesReviewProps) {
   });
 
   return (
-    <div className='mb-20 rounded-xl border border-gray-50 px-20 py-20'>
+    <div className='rounded-xl border border-gray-50 px-20 py-20'>
       <div className='mb-4 flex items-center gap-8'>
         <div className='body-text font-bold'>{user.nickname}</div>
         <div className='caption-text text-gray-400'>{formattedDate}</div>

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

@@ -25,12 +25,12 @@ 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-20 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-gray-50 bg-white px-20 pt-18 pb-18 shadow-[0px_-4px_24px_rgba(156,180,202,0.2)]'>
       <div className='mb-12 flex items-center justify-between'>
         <div>
           <p className='body-text font-bold'>
             ₩ {totalPrice.toLocaleString()}
-            <span className='font-normal'> / {reservation?.headCount ?? 1}명</span>
+            <span className='font-normal text-gray-400'> / {reservation?.headCount ?? 1}명</span>
           </p>
           {reservation && <p className='caption-text mt-4 text-gray-400'>{formattedDateTime}</p>}
         </div>

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

@@ -57,7 +57,7 @@ export default function ReviewSection({ activityId }: ReviewSectionProps) {
         </div>
       )}
 
-      <div className='mb-24'>
+      <div className='flex flex-col gap-12'>
         {allReviews.length > 0 ? (
           allReviews.map((review: ActivityReview) => <ActivitiesReview key={review.id} review={review} />)
         ) : (
@@ -71,7 +71,7 @@ export default function ReviewSection({ activityId }: ReviewSectionProps) {
       <div ref={observerRef} className='h-4' />
 
       {isFetchingNextPage && (
-        <div className='flex flex-col gap-16'>
+        <div className='flex flex-col gap-12'>
           <ReviewCardSkeleton />
           <ReviewCardSkeleton />
         </div>

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

@@ -10,9 +10,9 @@ interface HeadCountSelectorProps {
 export default function HeadCountSelector({ headCount, onIncrease, onDecrease }: HeadCountSelectorProps) {
   return (
     <div className='flex items-center justify-between'>
-      <p className='section-text'>참여 인원 수</p>
+      <p className='body-text font-bold'>참여 인원 수</p>
 
-      <div className='flex items-center gap-23 rounded-3xl border border-gray-50 px-15'>
+      <div className='flex w-138 items-center justify-between 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>

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

@@ -1,5 +1,4 @@
-import { BottomSheet, Button, ClockIcon } from '@what-today/design-system';
-import { ArrowIcon } from '@what-today/design-system';
+import { BottomSheet, Button, ChevronIcon, ClockIcon } from '@what-today/design-system';
 import { useState } from 'react';
 
 import CalendarSelector from './CalendarSelector';
@@ -131,7 +130,7 @@ export default function MobileReservationSheet({
             <div className='mb-20'>
               <div className='flex items-center gap-12'>
                 <Button className='h-fit w-fit p-0' variant='none' onClick={handleBackToDateTime}>
-                  <ArrowIcon />
+                  <ChevronIcon color='var(--color-gray-400)' direction='left' />
                 </Button>
                 <h2 className='subtitle-text text-gray-950'>참여 인원 선택</h2>
               </div>
@@ -140,7 +139,7 @@ export default function MobileReservationSheet({
             <div className='flex flex-col gap-20'>
               {/* 선택된 날짜/시간 요약 */}
               {selectedDate && selectedScheduleId && (
-                <div className='rounded-lg bg-gray-50 p-16'>
+                <div className='bg-gray-25 rounded-lg p-16'>
                   <p className='caption-text flex items-center gap-4 text-gray-600'>
                     <ClockIcon className='size-14' color='var(--color-gray-600)' />
                     선택된 날짜/시간
@@ -159,7 +158,7 @@ export default function MobileReservationSheet({
               {/* 총 금액 */}
 
               <div className='flex items-center justify-between'>
-                <span className='section-text'>총 금액</span>
+                <span className='body-text font-bold'>총 금액</span>
                 <span className='section-text'>₩ {totalPrice.toLocaleString()}</span>
               </div>
             </div>

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

@@ -88,7 +88,7 @@ export default function ReservationForm({
   else buttonText = '예약하기';
 
   const content = (
-    <div className='flex flex-col gap-24'>
+    <div className='flex flex-col gap-16'>
       {/* 가격 표시 */}
       {/* <p className='text-xl text-[#79747E]'>
         <span className='font-bold text-gray-950'>₩ {price.toLocaleString()}</span> / 인
@@ -100,7 +100,7 @@ export default function ReservationForm({
       {/* 시간 선택 */}
       {selectedDate && (
         <>
-          <p className='section-text'>예약 가능한 시간</p>
+          <p className='body-text mt-8 font-bold'>예약 가능한 시간</p>
           <div className='max-h-350 overflow-y-auto pr-4'>
             <TimeSelector
               availableTimes={availableTimes}
@@ -117,7 +117,8 @@ export default function ReservationForm({
       {/* 총 합계 */}
       <div className='flex items-center justify-between'>
         <p className='section-text flex max-w-155 flex-col'>
-          총 합계 <span className='inline-block max-w-full truncate'>₩ {totalPrice.toLocaleString()}</span>
+          <span className='body-text font-bold'>총 합계</span>
+          <span className='inline-block max-w-full truncate'>₩ {totalPrice.toLocaleString()}</span>
         </p>
 
         {showSubmitButton && (

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

@@ -52,7 +52,7 @@ export default function TabletReservationSheet({
           {/* 우측: 시간 & 인원 */}
           <div className='flex flex-col justify-between'>
             <div className='flex flex-col gap-20'>
-              <p className='section-text'>예약 가능한 시간</p>
+              <p className='body-text font-bold'>예약 가능한 시간</p>
               {selectedDate ? (
                 <div className='max-h-290 overflow-y-auto pr-4'>
                   <TimeSelector
@@ -67,8 +67,8 @@ export default function TabletReservationSheet({
 
               <HeadCountSelector headCount={headCount} onDecrease={decreaseHeadCount} onIncrease={increaseHeadCount} />
 
-              <p className='section-text'>
-                총 합계 <span>₩ {totalPrice.toLocaleString()}</span>
+              <p className='section-text flex items-center gap-6'>
+                <span className='body-text font-bold'>총 합계</span> <span>₩ {totalPrice.toLocaleString()}</span>
               </p>
             </div>
           </div>

apps/what-today/src/pages/activities/index.tsx

@@ -124,7 +124,6 @@ export default function ActivityDetailPage() {
         ) : (
           <div className='flex flex-col gap-30'>
             <ActivityImages bannerImageUrl={activity.bannerImageUrl} subImages={activity.subImages} />
-            <Divider className='border-gray-200' />
             <ActivitiesInformation
               address={activity.address}
               category={activity.category}