모바일 UI 리팩토링 #252
Merged
모바일 UI 리팩토링 #252
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 5 commits
August 4, 2025 15:27
Closed
📝 WalkthroughWalkthrough사이드바에서 프로필 이미지 렌더링이 제거되고, 여러 컴포넌트 및 CSS에서 오버플로우와 텍스트 처리, 뱃지 스타일, 카드 레이아웃 등이 개선되었습니다. 일부 컴포넌트는 새로운 뱃지 컴포넌트를 사용하도록 변경되었으며, 초기 애니메이션 상태와 접근성 클래스도 조정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ReservationCard
participant UserBadge
User->>ReservationCard: 예약 카드 렌더링 요청
ReservationCard->>UserBadge: 상태(status) prop 전달하여 뱃지 렌더링
UserBadge-->>ReservationCard: 스타일 적용된 뱃지 반환
ReservationCard-->>User: 카드와 상태 뱃지 표시
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
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. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
🚀 오늘뭐해 Preview Deploy 완료! |
![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
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/what-today/src/components/MypageSidebar.tsx(0 hunks)apps/what-today/src/index.css(1 hunks)apps/what-today/src/layouts/Mypage.tsx(1 hunks)apps/what-today/src/pages/mypage/reservations-list/index.tsx(1 hunks)packages/design-system/src/components/RadioGroup/RadioGroup.tsx(2 hunks)packages/design-system/src/components/ReservationCard.tsx(2 hunks)packages/design-system/src/components/UserBadge.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- apps/what-today/src/components/MypageSidebar.tsx
🧰 Additional context used
🧠 Learnings (13)
📓 Common learnings
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#169
File: apps/what-today/src/hooks/useMyActivitiesQuery.ts:23-25
Timestamp: 2025-07-29T14:50:14.117Z
Learning: kjhyun0830은 What-Today 프로젝트에서 토스터 알림과 같은 UI 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#178
File: apps/what-today/src/index.css:63-83
Timestamp: 2025-07-30T13:22:43.195Z
Learning: kjhyun0830은 What-Today 프로젝트에서 기능적으로 문제가 없는 코드에 대해서는 장기적인 유지보수 개선사항보다는 현재 작동하는 상태를 유지하는 것을 선호하는 실용적인 접근 방식을 취한다.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#119
File: apps/what-today/src/pages/mypage/edit-profile/index.tsx:63-92
Timestamp: 2025-07-24T08:30:12.556Z
Learning: MyungJiwoo indicated they will implement validation checks for the edit profile page (password confirmation validation) immediately after PR #119 is merged, following their incremental development approach.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#205
File: apps/what-today/src/pages/mypage/reservations-status/index.tsx:17-0
Timestamp: 2025-08-02T03:36:31.249Z
Learning: kjhyun0830은 What-Today 프로젝트에서 여러 페이지 간 일관성을 위해 동일한 쿼리 훅(예: useInfiniteMyActivitiesQuery)을 사용하는 것을 선호하며, 기능적으로 문제없이 작동하는 코드는 최적화보다는 현재 상태를 유지하는 실용적인 접근 방식을 취한다.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:2-37
Timestamp: 2025-07-19T01:02:08.026Z
Learning: User kjhyun0830 prefers to keep temporary mock data inline in components when API integration is planned soon, rather than creating separate files for short-term code that will be deleted.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: packages/design-system/src/components/OngoingExperienceCard.tsx:6-11
Timestamp: 2025-08-03T00:45:09.414Z
Learning: kjhyun0830은 What-Today 프로젝트에서 TypeScript 인터페이스 정의 시 컴포넌트에서 실제 사용하는 속성만 정의하는 것을 선호하며, 전체 객체의 모든 속성을 다 정의하는 것에 대한 우려를 표현했다. 구조적 타이핑을 활용한 최소한의 인터페이스 정의 방식을 권장받았다.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#96
File: packages/design-system/src/components/ExperienceImageUpload/IntroduceInput.tsx:30-35
Timestamp: 2025-07-22T03:09:16.142Z
Learning: kjhyun0830은 현재 이미지 업로드 컴포넌트의 파일 검증 로직(타입, 크기 검증)을 나중에 zod 스키마에서 이미지 URL 정의할 때 참고할 예정입니다. 이는 일관된 이미지 검증 체계 구축을 위한 계획입니다.
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/layouts/Mypage.tsxpackages/design-system/src/components/UserBadge.tsxpackages/design-system/src/components/ReservationCard.tsx
📚 Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 reservationstatus 타입이 calendar/index.ts에서 re-export...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#91
File: apps/what-today/src/pages/mypage/reservations-status/index.tsx:2-2
Timestamp: 2025-07-22T03:59:52.657Z
Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 ReservationStatus 타입이 calendar/index.ts에서 re-export되지 않아 메인 엔트리 포인트에서 접근할 수 없는 문제가 있음. DayCell.tsx에서 정의된 타입들을 calendar 모듈에서 명시적으로 export해야 함.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsxpackages/design-system/src/components/ReservationCard.tsx
📚 Learning: packages/design-system/src/components/datepicker.tsx에서 taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#125
File: packages/design-system/src/components/DatePicker.tsx:25-28
Timestamp: 2025-07-24T13:33:33.202Z
Learning: packages/design-system/src/components/DatePicker.tsx에서 Taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/layouts/Mypage.tsxpackages/design-system/src/components/RadioGroup/RadioGroup.tsxpackages/design-system/src/components/ReservationCard.tsx
📚 Learning: kjhyun0830은 what-today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 u...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/layouts/Mypage.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), when using type=...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:33:19.860Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), when using type="checkbox" for toggle behavior, adding role="radio" maintains proper semantic meaning for screen readers while preserving the desired UX functionality where users can click to deselect options.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsxpackages/design-system/src/components/RadioGroup/RadioGroup.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), the input type s...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:18:33.545Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), the input type should be 'checkbox' rather than 'radio' to support the intended toggle behavior where users can click a selected option again to deselect it. The handleChange function already implements this toggle logic with `onSelect?.(isSelected ? '' : value);`.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsxpackages/design-system/src/components/RadioGroup/RadioGroup.tsx
📚 Learning: harryseop encountered a scroll restoration issue in the usebodyscrolllock hook where the base page j...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#89
File: packages/design-system/src/components/bottomsheet/hooks/index.ts:44-51
Timestamp: 2025-07-21T04:36:28.477Z
Learning: HarrySeop encountered a scroll restoration issue in the useBodyScrollLock hook where the base page jumps to the top during mount/unmount of the bottom sheet component. They tried adding isLocked check in cleanup function and ref-based approaches but both failed to resolve the issue. They decided to defer this fix to a later refactoring.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/layouts/Mypage.tsx
📚 Learning: in packages/design-system/src/components/button/index.tsx, harryseop uses handleclick wrapper for se...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:32-41
Timestamp: 2025-07-16T06:51:15.152Z
Learning: In packages/design-system/src/components/button/index.tsx, HarrySeop uses handleClick wrapper for security purposes to prevent execution when users remove disabled attributes via developer tools. The onClick handler should be extracted from rest props before spreading to avoid being overwritten.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/layouts/Mypage.tsxpackages/design-system/src/components/RadioGroup/RadioGroup.tsxpackages/design-system/src/components/UserBadge.tsx
📚 Learning: in the button component (packages/design-system/src/components/button/index.tsx), the children filte...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:63-70
Timestamp: 2025-07-15T16:38:40.310Z
Learning: In the Button component (packages/design-system/src/components/button/index.tsx), the children filtering logic that only allows strings and Icon components is intentional design decision by HarrySeop. The validChildren filter is meant to restrict button content to only text strings and Icon components for consistency and to prevent component misuse.
Applied to files:
apps/what-today/src/layouts/Mypage.tsxpackages/design-system/src/components/RadioGroup/RadioGroup.tsx
📚 Learning: in the selectroot component (packages/design-system/src/components/select/selectroot.tsx), myungjiwo...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#57
File: packages/design-system/src/components/select/SelectRoot.tsx:37-38
Timestamp: 2025-07-17T01:20:26.915Z
Learning: In the SelectRoot component (packages/design-system/src/components/select/SelectRoot.tsx), MyungJiwoo questioned the need for implementing controlled component pattern. The current implementation only handles internal→external state changes via onChangeValue callback, but doesn't handle external→internal changes when the value prop is updated, which breaks the typical React controlled component contract.
Applied to files:
packages/design-system/src/components/RadioGroup/RadioGroup.tsx
📚 Learning: taeil08 prefers using translate-x-1/2 and translate-x-1/2 for carousel navigation button positioning...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#237
File: packages/design-system/src/components/Carousel/Carousel.tsx:19-25
Timestamp: 2025-08-04T04:16:10.940Z
Learning: Taeil08 prefers using translate-x-1/2 and translate-x-1/2 for carousel navigation button positioning in packages/design-system/src/components/Carousel/Carousel.tsx as it provides better flexibility for button positioning compared to fixed positioning without transforms.
Applied to files:
packages/design-system/src/components/RadioGroup/RadioGroup.tsx
📚 Learning: harryseop 프로젝트에서 예약 플로우는 디바이스별로 다르게 구현됨: 데스크톱은 reservationform 컴포넌트의 내부 토스트를 사용하고, 태블릿/모바일은 바텀시트 → h...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#220
File: apps/what-today/src/pages/activities/index.tsx:64-70
Timestamp: 2025-08-02T20:26:03.149Z
Learning: HarrySeop 프로젝트에서 예약 플로우는 디바이스별로 다르게 구현됨: 데스크톱은 ReservationForm 컴포넌트의 내부 토스트를 사용하고, 태블릿/모바일은 바텀시트 → handleSubmitReservation → 페이지 레벨 토스트를 사용하는 구조임.
Applied to files:
packages/design-system/src/components/ReservationCard.tsx
🧬 Code Graph Analysis (1)
packages/design-system/src/components/ReservationCard.tsx (1)
packages/design-system/src/components/UserBadge.tsx (1)
UserBadge(31-42)
🔇 Additional comments (9)
packages/design-system/src/components/UserBadge.tsx (1)
35-35: 모바일 UI 개선이 적절함
w-auto에서w-fit으로 변경하고 패딩을 증가시킨 것은 모바일 환경에서 뱃지의 터치 영역과 시각적 균형을 개선하는 좋은 변경입니다.w-fit이 플렉스박스 컨텍스트에서 더 명확한 의미를 제공합니다.packages/design-system/src/components/RadioGroup/RadioGroup.tsx (2)
104-104: 애니메이션 초기 상태 명시로 플리커 방지
initial속성을 명시적으로 설정하여 컴포넌트 마운트 시 애니메이션 플리커를 방지하는 좋은 개선입니다.
174-174: 접근성 개선을 위한 이중 숨김 처리
sr-only와hidden클래스를 함께 사용하여 다양한 브라우저와 스크린 리더 환경에서 일관된 숨김 처리를 보장하는 방어적 접근법입니다.apps/what-today/src/pages/mypage/reservations-list/index.tsx (1)
233-233: 모바일 레이아웃 개선을 위한 수평 오버플로우 방지
overflow-x-hidden추가로 RadioGroup 영역에서 발생할 수 있는 수평 스크롤을 방지하여 모바일 UI 안정성을 개선했습니다. PR 목표에 부합하는 적절한 수정입니다.apps/what-today/src/layouts/Mypage.tsx (1)
51-51: 반응형 레이아웃 개선과 오버플로우 제어
overflow-x-hidden추가와 반응형 최대 너비 제약(md:max-w-768 xl:max-w-635)을 통해 다양한 화면 크기에서 안정적인 레이아웃을 보장합니다. 모바일 UI 리팩토링의 핵심 목표를 달성하는 포괄적인 개선입니다.packages/design-system/src/components/ReservationCard.tsx (4)
1-1: 컴포넌트 분리로 코드 재사용성 향상UserBadge 컴포넌트를 별도로 분리하여 배지 렌더링 로직을 재사용 가능한 형태로 개선한 점이 좋습니다.
81-81: 동적 크기 조정으로 모바일 반응형 개선고정 크기에서
h-fit w-auto로 변경하여 다양한 화면 크기와 콘텐츠 길이에 유연하게 대응할 수 있도록 개선되었습니다. 모바일 UI 리팩토링 목표에 잘 부합합니다.
86-86: 배지 컴포넌트 활용으로 코드 구조 개선인라인 배지 렌더링 로직을 UserBadge 컴포넌트로 대체하여 코드 중복을 줄이고 유지보수성을 향상시켰습니다. UserBadge 컴포넌트의 접근성 지원(role='status')도 함께 활용할 수 있어 좋습니다.
87-87: 반응형 텍스트 오버플로우 처리로 레이아웃 안정성 강화모바일에서는 7줄, 중간 크기 이상 화면에서는 3줄로 제한하는 반응형 line-clamp를 적용하여 다양한 언어와 화면 크기에서 레이아웃이 깨지지 않도록 개선했습니다. PR 목표에 정확히 부합하는 개선사항입니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
스타일
버그 수정
리팩터