DefaultLayout 통일하기 #267
Merged
DefaultLayout 통일하기 #267
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
Closed
📝 WalkthroughWalkthrough이번 변경은 FloatingTranslateButton의 언어 선택 드롭다운 컨테이너 너비를 늘리고, DefaultLayout의 Tailwind CSS 클래스 결합 방식을 개선하며, 활동 상세 페이지에서 예약 폼의 sticky 위치 지정 방식을 조정하는 등 레이아웃 및 스타일링 관련 수정을 포함합니다. 기능적 로직 변경은 없습니다. Changes
Sequence Diagram(s)(해당 변경들은 레이아웃 및 스타일링 중심으로, 제어 흐름이나 기능적 상호작용에 변화가 없어 시퀀스 다이어그램 생략) Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes 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. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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: 0
🧹 Nitpick comments (1)
apps/what-today/src/layouts/DefaultLayout.tsx (1)
14-14: 주석 처리된 코드 제거 권장기존 문자열 방식의 코드가 주석 처리되어 있습니다. 새로운
twJoin방식이 정상 작동한다면 주석 처리된 코드를 제거하는 것이 좋겠습니다.- // const footerMarginBottom = isActivityDetailPage && !isDesktop ? 'w-full mb-120' : 'w-full';
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/what-today/src/components/FloatingTranslateButton.tsx(1 hunks)apps/what-today/src/layouts/DefaultLayout.tsx(2 hunks)apps/what-today/src/pages/activities/index.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
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.
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: 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 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
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 → 페이지 레벨 토스트를 사용하는 구조임.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#129
File: apps/what-today/src/pages/mypage/reservations-list/index.tsx:13-25
Timestamp: 2025-07-24T19:36:15.516Z
Learning: HarrySeop은 What-Today 프로젝트에서 API 에러 처리를 토스터(toast notification)로 처리하는 방식을 선호하며, 핸들러 함수 구현 시점에 함께 연결하는 접근 방식을 취함.
📚 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/layouts/DefaultLayout.tsxapps/what-today/src/components/FloatingTranslateButton.tsxapps/what-today/src/pages/activities/index.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/layouts/DefaultLayout.tsxapps/what-today/src/components/FloatingTranslateButton.tsxapps/what-today/src/pages/activities/index.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/layouts/DefaultLayout.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:
apps/what-today/src/layouts/DefaultLayout.tsxapps/what-today/src/components/FloatingTranslateButton.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/activities/index.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/activities/index.tsx
🔇 Additional comments (7)
apps/what-today/src/layouts/DefaultLayout.tsx (4)
3-3: twJoin import 추가 승인조건부 클래스 결합을 위한
twJoin유틸리티 함수 import가 적절하며, 아래 코드에서 사용되고 있습니다.
25-25: main 요소 클래스 단순화 승인조건부 로직을 제거하고 고정된 반응형 클래스를 적용한 변경이 적절합니다. 레이아웃 일관성 향상에 도움이 됩니다.
29-29: twJoin을 활용한 조건부 클래스 적용 승인
twJoin을 사용하여 조건부로mb-120마진을 적용하는 방식이 깔끔하고 가독성이 좋습니다. activity detail 페이지에서 데스크톱이 아닌 경우에만 하단 마진을 추가하는 로직이 적절합니다.
20-20: overflow-x-hidden 제거 확인 요청
DefaultLayout.tsx에서overflow-x-hidden클래스가 제거되어 있습니다. 이 변경으로 인해 플로팅 버튼으로 인한 x축 스크롤 이슈가 완전히 해소되었는지 확인이 필요합니다.
파일:
apps/what-today/src/layouts/DefaultLayout.tsx
위치: 약 20행 부근
변경 내용: 기존에 적용되었던overflow-x-hidden클래스가 제거됨확인 방법:
- 브라우저에서 플로팅 번역 버튼을 토글(+ 펼치기/닫기)하며 페이지 전체의 x축 스크롤바가 나타나지 않는지 검증
- 필요 시 아래 스크립트로 의도치 않은
overflow-x-*클래스 잔여물을 검색rg "overflow-x-" apps/what-today/src/layouts/DefaultLayout.tsx위 사항을 검토하시고, 스크롤 이슈가 재발되지 않는지 확인해 주세요.
apps/what-today/src/components/FloatingTranslateButton.tsx (1)
333-333: 드롭다운 너비 증가 승인언어 선택 드롭다운의 너비를
w-160에서w-170으로 10 단위 증가시킨 변경이 적절합니다. PR 목적인 x-scroll 문제 해결과 연관된 것으로 보이며, 드롭다운 내 텍스트가 더 여유롭게 표시될 것입니다.apps/what-today/src/pages/activities/index.tsx (2)
104-104: 컨테이너 div 클래스 단순화 승인외부 컨테이너에서 sticky 관련 클래스를 제거하고 단순한 flex 레이아웃으로 변경한 것이 적절합니다.
115-123: ReservationForm sticky 포지셔닝 개선 승인ReservationForm 컴포넌트만을 대상으로 하는 sticky 포지셔닝 구조로 개선되었습니다. 이는 레이아웃 제어를 더욱 정밀하게 하며, PR 목적인 레이아웃 통일화에 부합합니다.
|
🚀 오늘뭐해 Preview Deploy 완료! |
|
🚀 오늘뭐해 Preview Deploy 완료! |
Taeil08
approved these changes
Aug 4, 2025
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