Skip to content

Feat/123 예약내역, 체험관리 반응형 및 레이아웃 개선 #124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LeeCh0129 merged 3 commits into from
Aug 3, 2025
Merged

Feat/123 예약내역, 체험관리 반응형 및 레이아웃 개선 #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a8776b
feat: 예약내역 및 체험관리 반응형 및 레이아웃 개선
LeeCh0129 Aug 2, 2025
b036ad8
fix: 예약 내역 드롭다운 상태별 동일 마진 적용
LeeCh0129 Aug 2, 2025
8a7af51
Merge branch 'develop' into feat/123
LeeCh0129 Aug 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions src/app/(with-header)/mypage/activities/components/ActivityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Comment on lines +56 to 60
Copy link

@coderabbitai coderabbitai bot Aug 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

잘린(title) 텍스트에 대한 접근성 보완 제안

truncate로 긴 제목을 숨기면 키보드·스크린리더 사용자는 전체 제목을 알 수 없습니다.
title 속성이나 aria-label, 혹은 Tooltip 컴포넌트를 활용해 전체 제목을 노출해 주시면 접근성이 향상됩니다.

🤖 Prompt for AI Agents 
In src/app/(with-header)/mypage/activities/components/ActivityCard.tsx around
lines 56 to 60, the title text is truncated visually but lacks accessibility
support for keyboard and screen reader users. To fix this, add a title attribute
or aria-label to the h3 element or wrap the title with a Tooltip component so
that the full title is accessible and can be read by assistive technologies.


<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>

Expand All @@ -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>
Expand Down
37 changes: 23 additions & 14 deletions src/app/(with-header)/mypage/reservations/components/ReservationCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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)}
>
예약 취소
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/app/(with-header)/mypage/reservations/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down