Feat/123 예약내역, 체험관리 반응형 및 레이아웃 개선 #124
Conversation
Walkthrough본 변경사항은 예약 내역 및 내 체험 관리 페이지의 카드 컴포넌트와 관련된 레이아웃 및 스타일을 반응형으로 개선하는 작업입니다. Tailwind CSS의 반응형 클래스가 적용되어 다양한 화면 크기에서 레이아웃, 이미지, 타이포그래피, 버튼 등이 유동적으로 조정됩니다. 기능적 로직 변경은 없습니다. Changes
Sequence Diagram(s)(해당 변경은 스타일 및 레이아웃에 한정되어 있으므로 시퀀스 다이어그램 생략) Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes(요구사항 외의 기능적 코드 변경 없음) Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/app/(with-header)/mypage/activities/components/ActivityCard.tsx (1)
70-75:button요소에type="button"명시 필요
<button>의 기본type은submit이라 폼 내부에 포함될 경우 예기치 않게 submit 이벤트를 발생시킬 수 있습니다.
메뉴 토글 버튼과 드롭다운 내 두 개의 액션 버튼 모두 form 컨텍스트에서 안전하게 동작하도록 아래처럼 명시적인 타입을 지정해 주세요.-<button - onClick={() => setIsMenuOpen(!isMenuOpen)} - className='flex h-40 w-40 items-center justify-center rounded-full hover:bg-gray-100' -> +<button + type="button" + onClick={() => setIsMenuOpen(!isMenuOpen)} + className='flex h-40 w-40 items-center justify-center rounded-full hover:bg-gray-100' +> ... -<button - onClick={handleEdit} - 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 + type="button" + onClick={handleEdit} + 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 - onClick={handleDelete} - 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 + type="button" + onClick={handleDelete} + 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' +>Also applies to: 85-96
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
src/app/(with-header)/mypage/activities/components/ActivityCard.tsx(2 hunks)src/app/(with-header)/mypage/reservations/components/ReservationCard.tsx(3 hunks)src/app/(with-header)/mypage/reservations/page.tsx(2 hunks)
🧰 Additional context used
🪛 Biome (2.1.2)
src/app/(with-header)/mypage/activities/components/ActivityCard.tsx
[error] 87-91: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🔇 Additional comments (3)
src/app/(with-header)/mypage/reservations/components/ReservationCard.tsx (2)
78-87:text-2lg유틸리티가 Tailwind 설정에 존재하는지 확인 필요Tailwind 기본 preset에는
text-2lg가 없습니다.
커스텀 사이즈가 설정되지 않았다면 컴파일 시 해당 클래스가 제거되어 글자가 기본 크기로 표시됩니다.
tailwind.config.js의theme.fontSize에2lg가 정의되어 있는지 확인해 주세요.
91-96: 커스텀 사이징(h-43,w-144) 사용 시 공통 유틸리티 정의 여부 확인
h-43,w-144등은 Tailwind 기본 스케일에 존재하지 않는 값입니다.
사내 디자인 시스템에서 공통 유틸리티로 확장한 것이라면 문제 없지만, 아니라면 CSS가 적용되지 않을 수 있습니다.
동일한 이유로lg:h-43,lg:w-144도 함께 확인해 주세요.src/app/(with-header)/mypage/reservations/page.tsx (1)
160-166: 마진 증가는 OK – 로딩·에러 UI 일관성 유지 확인
mb-24→mb-48로 변경하여 여백을 확장한 것은 시각적으로 더 여유로운 레이아웃을 제공합니다.
로딩·에러·정상 렌더링 세 곳 모두 동일한 여백을 적용했으므로 UI 일관성 측면에서도 문제 없습니다.Also applies to: 182-188
| <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> |
There was a problem hiding this comment.
🧹 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.
evaain706
left a comment
evaain706
left a comment
There was a problem hiding this comment.
수고하셨습니다!
반응형도 잘 해주셨고
truncate라는것으로 글자길이를 해결할수있었군요
📌 변경 사항 개요
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
💡 참고 사항
Summary by CodeRabbit