Skip to content

Commit 658ba01

Browse files
LeeCh0129LeeCh0129
authored
Merge pull request #124 from codeit-2team/feat/123
Feat/123 예약내역, 체험관리 반응형 및 레이아웃 개선
2 parents 3e6e758 + 8a7af51 commit 658ba01

3 files changed

Lines changed: 40 additions & 28 deletions

File tree

‎src/app/(with-header)/mypage/activities/components/ActivityCard.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,33 +31,37 @@ export default function ActivityCard({
3131
};
3232

3333
return (
34-
<div className='flex h-204 w-792 rounded-3xl border border-gray-300 bg-white'>
34+
<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'>
3535
{/* 이미지 영역 */}
36-
<div className='relative h-204 w-204 flex-shrink-0 overflow-hidden rounded-l-xl'>
36+
<div className='relative h-full w-128 flex-shrink-0 overflow-hidden rounded-l-3xl sm:w-156 lg:w-204'>
3737
<Image src={bannerImageUrl} alt={title} fill className='object-cover' />
3838
</div>
3939

4040
{/* 콘텐츠 영역 */}
41-
<div className='flex flex-1 flex-col justify-start px-24 py-14'>
41+
<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'>
4242
{/* 별점 및 리뷰 */}
4343
<div className='flex items-center gap-6'>
4444
<div className='flex items-center gap-2'>
4545
<Star size={19} />
46-
<span className='font-base font-normal text-black'>{rating}</span>
47-
<span className='font-base font-normal text-black'>
46+
<span className='text-sm font-normal text-black sm:text-base'>
47+
{rating}
48+
</span>
49+
<span className='text-sm font-normal text-black sm:text-base'>
4850
({reviewCount})
4951
</span>
5052
</div>
5153
</div>
5254

5355
{/* 제목 */}
54-
<div className='mt-6'>
55-
<h3 className='text-nomad text-xl font-bold'>{title}</h3>
56+
<div className='mt-2 sm:mt-4 lg:mt-6'>
57+
<h3 className='text-nomad truncate text-sm font-bold sm:text-lg lg:text-xl'>
58+
{title}
59+
</h3>
5660
</div>
5761

5862
<div className='mt-auto flex items-center justify-between'>
5963
{/* 가격 */}
60-
<p className='text-2xl font-medium text-gray-900'>
64+
<p className='text-base font-medium text-gray-900 sm:text-xl lg:text-2xl'>
6165
₩{price.toLocaleString()} / 인
6266
</p>
6367

@@ -76,18 +80,17 @@ export default function ActivityCard({
7680
className='fixed inset-0 z-40'
7781
onClick={() => setIsMenuOpen(false)}
7882
/>
79-
8083
{/* 드롭다운 메뉴 */}
81-
<div className='absolute top-full right-0 z-50 w-160 rounded-md border border-gray-300 bg-white shadow-lg'>
84+
<div className='absolute top-full right-0 z-50 w-120 rounded-md border border-gray-300 bg-white shadow-lg sm:w-160'>
8285
<button
8386
onClick={handleEdit}
84-
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'
87+
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'
8588
>
8689
수정하기
8790
</button>
8891
<button
8992
onClick={handleDelete}
90-
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'
93+
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'
9194
>
9295
삭제하기
9396
</button>

‎src/app/(with-header)/mypage/reservations/components/ReservationCard.tsx‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ export default function ReservationCard({
4141
const showReviewCompleted = isCompleted && reviewSubmitted;
4242

4343
return (
44-
<div className='rounded-24 flex h-204 w-792 overflow-hidden border border-gray-300 bg-white'>
44+
<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'>
4545
{/* 이미지 영역 */}
46-
<div className='relative h-204 w-204 flex-shrink-0'>
46+
<div className='relative h-full w-128 flex-shrink-0 overflow-hidden rounded-l-3xl sm:w-156 lg:w-204'>
4747
<Image
4848
src={activity.bannerImageUrl}
4949
alt={activity.title}
@@ -53,39 +53,46 @@ export default function ReservationCard({
5353
</div>
5454

5555
{/* 콘텐츠 영역 */}
56-
<div className='flex flex-1 flex-col justify-start py-21 pr-24 pl-24'>
56+
<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'>
5757
{/* 상태 라벨 */}
5858
<div>
59-
<span className={cn('text-lg font-bold', STATUS_COLORS[status])}>
59+
<span
60+
className={cn(
61+
'text-sm font-bold sm:text-lg',
62+
STATUS_COLORS[status],
63+
)}
64+
>
6065
{STATUS_LABELS[status]}
6166
</span>
6267
</div>
6368

6469
{/* 제목 */}
65-
<div className='mt-8'>
66-
<h3 className='text-nomad text-xl font-bold'>{activity.title}</h3>
70+
<div className='mt-4 sm:mt-6 lg:mt-8'>
71+
<h3 className='text-nomad truncate text-sm font-bold sm:text-lg lg:text-xl'>
72+
{activity.title}
73+
</h3>
6774
</div>
6875

6976
{/* 날짜 및 인원 정보 */}
70-
<div className='mt-12'>
71-
<p className='text-2lg text-nomad'>
77+
<div className='mt-6 sm:mt-8 lg:mt-12'>
78+
<p className='text-nomad lg:text-2lg text-xs sm:text-sm'>
7279
{date} · {startTime} - {endTime} · {headCount}명
7380
</p>
7481
</div>
7582

7683
{/* 가격 + 버튼 */}
77-
<div className='mt-21 flex items-center justify-between'>
84+
<div className='mt-auto flex items-center justify-between pt-4 sm:pt-6 lg:pt-8'>
7885
{/* 가격 */}
79-
<p className='text-2xl font-bold text-black'>
86+
<p className='text-base font-bold text-black sm:text-xl lg:text-2xl'>
8087
₩{totalPrice.toLocaleString()}
8188
</p>
8289

8390
{/* 버튼/상태 */}
84-
<div className='flex h-43 w-144 items-center justify-center'>
91+
<div className='flex h-32 w-80 items-center justify-center sm:h-40 sm:w-112 lg:h-43 lg:w-144'>
8592
{showCancelButton && (
8693
<Button
8794
variant='secondary'
88-
className='h-43 w-144 rounded-md text-lg font-bold'
95+
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'
8996
onClick={() => onCancel?.(id)}
9097
>
9198
예약 취소
@@ -94,14 +101,16 @@ export default function ReservationCard({
94101
{showReviewButton && (
95102
<Button
96103
variant='primary'
97-
className='bg-nomad h-43 w-144 rounded-md text-lg font-bold'
104+
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'
98105
onClick={() => onReview?.(id)}
99106
>
100107
후기 작성
101108
</Button>
102109
)}
103110
{showReviewCompleted && (
104-
<div className='text-lg font-bold text-gray-500'>후기 완료</div>
111+
<div className='text-sm font-bold text-gray-500 sm:text-lg'>
112+
후기 완료
113+
</div>
105114
)}
106115
</div>
107116
</div>

‎src/app/(with-header)/mypage/reservations/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export default function MyReservationsPage() {
157157
if (isLoading) {
158158
return (
159159
<div className='w-full max-w-none lg:max-w-792'>
160-
<div className='mb-24 flex items-center justify-between'>
160+
<div className='mb-48 flex items-center justify-between'>
161161
<h1 className='text-nomad text-3xl leading-42 font-bold'>
162162
예약 내역
163163
</h1>
@@ -179,7 +179,7 @@ export default function MyReservationsPage() {
179179
if (error) {
180180
return (
181181
<div className='w-full max-w-none lg:max-w-792'>
182-
<div className='mb-24 flex items-center justify-between'>
182+
<div className='mb-48 flex items-center justify-between'>
183183
<h1 className='text-nomad text-3xl leading-42 font-bold'>
184184
예약 내역
185185
</h1>

0 commit comments

Comments
 (0)