From 3a8776b51de1cfe7e4e5b0b0508337c24016cc77 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 3 Aug 2025 05:00:44 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=EB=82=B4?=
 =?UTF-8?q?=EC=97=AD=20=EB=B0=8F=20=EC=B2=B4=ED=97=98=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=B0=8F=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../activities/components/ActivityCard.tsx    | 27 ++++++++------
 .../components/ReservationCard.tsx            | 37 ++++++++++++-------
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/app/(with-header)/mypage/activities/components/ActivityCard.tsx b/src/app/(with-header)/mypage/activities/components/ActivityCard.tsx
index 9d6ca404..47b3e1af 100644
--- a/src/app/(with-header)/mypage/activities/components/ActivityCard.tsx
+++ b/src/app/(with-header)/mypage/activities/components/ActivityCard.tsx
@@ -31,33 +31,37 @@ export default function ActivityCard({
   };
 
   return (
-    <div className='flex h-204 w-792 rounded-3xl border border-gray-300 bg-white'>
+    <div className='flex h-128 w-full max-w-792 flex-row rounded-3xl border border-gray-300 bg-white sm:h-156 lg:h-204'>
       {/* 이미지 영역 */}
-      <div className='relative h-204 w-204 flex-shrink-0 overflow-hidden rounded-l-xl'>
+      <div className='relative h-full w-128 flex-shrink-0 overflow-hidden rounded-l-3xl sm:w-156 lg:w-204'>
         <Image src={bannerImageUrl} alt={title} fill className='object-cover' />
       </div>
 
       {/* 콘텐츠 영역 */}
-      <div className='flex flex-1 flex-col justify-start px-24 py-14'>
+      <div className='flex w-0 flex-grow flex-col justify-start px-12 py-10 sm:px-16 sm:py-12 lg:px-24 lg:py-14'>
         {/* 별점 및 리뷰 */}
         <div className='flex items-center gap-6'>
           <div className='flex items-center gap-2'>
             <Star size={19} />
-            <span className='font-base font-normal text-black'>{rating}</span>
-            <span className='font-base font-normal text-black'>
+            <span className='text-sm font-normal text-black sm:text-base'>
+              {rating}
+            </span>
+            <span className='text-sm font-normal text-black sm:text-base'>
               ({reviewCount})
             </span>
           </div>
         </div>
 
         {/* 제목 */}
-        <div className='mt-6'>
-          <h3 className='text-nomad text-xl font-bold'>{title}</h3>
+        <div className='mt-2 sm:mt-4 lg:mt-6'>
+          <h3 className='text-nomad truncate text-sm font-bold sm:text-lg lg:text-xl'>
+            {title}
+          </h3>
         </div>
 
         <div className='mt-auto flex items-center justify-between'>
           {/* 가격 */}
-          <p className='text-2xl font-medium text-gray-900'>
+          <p className='text-base font-medium text-gray-900 sm:text-xl lg:text-2xl'>
             ₩{price.toLocaleString()} / 인
           </p>
 
@@ -76,18 +80,17 @@ export default function ActivityCard({
                   className='fixed inset-0 z-40'
                   onClick={() => setIsMenuOpen(false)}
                 />
-
                 {/* 드롭다운 메뉴 */}
-                <div className='absolute top-full right-0 z-50 w-160 rounded-md border border-gray-300 bg-white shadow-lg'>
+                <div className='absolute top-full right-0 z-50 w-120 rounded-md border border-gray-300 bg-white shadow-lg sm:w-160'>
                   <button
                     onClick={handleEdit}
-                    className='flex h-62 w-full items-center justify-center border-b border-gray-300 px-46 py-18 text-center text-lg font-medium text-gray-900 hover:bg-gray-50'
+                    className='flex h-50 w-full items-center justify-center border-b border-gray-300 px-4 py-3 text-center text-base font-medium text-gray-900 hover:bg-gray-50 sm:h-62 sm:px-46 sm:py-18 sm:text-lg'
                   >
                     수정하기
                   </button>
                   <button
                     onClick={handleDelete}
-                    className='flex h-62 w-full items-center justify-center px-46 py-18 text-center text-lg font-medium text-gray-900 hover:bg-gray-50'
+                    className='flex h-50 w-full items-center justify-center px-4 py-3 text-center text-base font-medium text-gray-900 hover:bg-gray-50 sm:h-62 sm:px-46 sm:py-18 sm:text-lg'
                   >
                     삭제하기
                   </button>
diff --git a/src/app/(with-header)/mypage/reservations/components/ReservationCard.tsx b/src/app/(with-header)/mypage/reservations/components/ReservationCard.tsx
index 2c6fcc58..a5482e91 100644
--- a/src/app/(with-header)/mypage/reservations/components/ReservationCard.tsx
+++ b/src/app/(with-header)/mypage/reservations/components/ReservationCard.tsx
@@ -41,9 +41,9 @@ export default function ReservationCard({
   const showReviewCompleted = isCompleted && reviewSubmitted;
 
   return (
-    <div className='rounded-24 flex h-204 w-792 overflow-hidden border border-gray-300 bg-white'>
+    <div className='flex h-128 w-full max-w-792 flex-row rounded-3xl border border-gray-300 bg-white sm:h-156 lg:h-204'>
       {/* 이미지 영역 */}
-      <div className='relative h-204 w-204 flex-shrink-0'>
+      <div className='relative h-full w-128 flex-shrink-0 overflow-hidden rounded-l-3xl sm:w-156 lg:w-204'>
         <Image
           src={activity.bannerImageUrl}
           alt={activity.title}
@@ -53,39 +53,46 @@ export default function ReservationCard({
       </div>
 
       {/* 콘텐츠 영역 */}
-      <div className='flex flex-1 flex-col justify-start py-21 pr-24 pl-24'>
+      <div className='flex w-0 flex-grow flex-col justify-start px-12 py-10 sm:px-16 sm:py-12 lg:px-24 lg:py-14'>
         {/* 상태 라벨 */}
         <div>
-          <span className={cn('text-lg font-bold', STATUS_COLORS[status])}>
+          <span
+            className={cn(
+              'text-sm font-bold sm:text-lg',
+              STATUS_COLORS[status],
+            )}
+          >
             {STATUS_LABELS[status]}
           </span>
         </div>
 
         {/* 제목 */}
-        <div className='mt-8'>
-          <h3 className='text-nomad text-xl font-bold'>{activity.title}</h3>
+        <div className='mt-4 sm:mt-6 lg:mt-8'>
+          <h3 className='text-nomad truncate text-sm font-bold sm:text-lg lg:text-xl'>
+            {activity.title}
+          </h3>
         </div>
 
         {/* 날짜 및 인원 정보 */}
-        <div className='mt-12'>
-          <p className='text-2lg text-nomad'>
+        <div className='mt-6 sm:mt-8 lg:mt-12'>
+          <p className='text-nomad lg:text-2lg text-xs sm:text-sm'>
             {date} · {startTime} - {endTime} · {headCount}명
           </p>
         </div>
 
         {/* 가격 + 버튼  */}
-        <div className='mt-21 flex items-center justify-between'>
+        <div className='mt-auto flex items-center justify-between pt-4 sm:pt-6 lg:pt-8'>
           {/* 가격 */}
-          <p className='text-2xl font-bold text-black'>
+          <p className='text-base font-bold text-black sm:text-xl lg:text-2xl'>
             ₩{totalPrice.toLocaleString()}
           </p>
 
           {/* 버튼/상태 */}
-          <div className='flex h-43 w-144 items-center justify-center'>
+          <div className='flex h-32 w-80 items-center justify-center sm:h-40 sm:w-112 lg:h-43 lg:w-144'>
             {showCancelButton && (
               <Button
                 variant='secondary'
-                className='h-43 w-144 rounded-md text-lg font-bold'
+                className='h-32 w-80 rounded-md text-sm font-bold sm:h-40 sm:w-112 sm:text-lg lg:h-43 lg:w-144'
                 onClick={() => onCancel?.(id)}
               >
                 예약 취소
@@ -94,14 +101,16 @@ export default function ReservationCard({
             {showReviewButton && (
               <Button
                 variant='primary'
-                className='bg-nomad h-43 w-144 rounded-md text-lg font-bold'
+                className='bg-nomad h-32 w-80 rounded-md text-sm font-bold sm:h-40 sm:w-112 sm:text-lg lg:h-43 lg:w-144'
                 onClick={() => onReview?.(id)}
               >
                 후기 작성
               </Button>
             )}
             {showReviewCompleted && (
-              <div className='text-lg font-bold text-gray-500'>후기 완료</div>
+              <div className='text-sm font-bold text-gray-500 sm:text-lg'>
+                후기 완료
+              </div>
             )}
           </div>
         </div>

From b036ad8d28826898580219991ef0b1b48a68eef5 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 3 Aug 2025 05:09:13 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=98=88=EC=95=BD=20=EB=82=B4?=
 =?UTF-8?q?=EC=97=AD=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EB=B3=84=20=EB=8F=99=EC=9D=BC=20=EB=A7=88=EC=A7=84=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(with-header)/mypage/reservations/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(with-header)/mypage/reservations/page.tsx b/src/app/(with-header)/mypage/reservations/page.tsx
index 42182d20..979c1ba5 100644
--- a/src/app/(with-header)/mypage/reservations/page.tsx
+++ b/src/app/(with-header)/mypage/reservations/page.tsx
@@ -157,7 +157,7 @@ export default function MyReservationsPage() {
   if (isLoading) {
     return (
       <div className='w-full max-w-none lg:max-w-792'>
-        <div className='mb-24 flex items-center justify-between'>
+        <div className='mb-48 flex items-center justify-between'>
           <h1 className='text-nomad text-3xl leading-42 font-bold'>
             예약 내역
           </h1>
@@ -179,7 +179,7 @@ export default function MyReservationsPage() {
   if (error) {
     return (
       <div className='w-full max-w-none lg:max-w-792'>
-        <div className='mb-24 flex items-center justify-between'>
+        <div className='mb-48 flex items-center justify-between'>
           <h1 className='text-nomad text-3xl leading-42 font-bold'>
             예약 내역
           </h1>