Repository navigation
feat(calendar): 여행 날짜 선택 달력 적용 - #240
KangShinGyu98 wants to merge 5 commits into
Conversation
- 날짜 input 대신 날짜 칸 클릭 → 날짜 선택 → 확인 순서로 변경 - 날짜 칸 접근성 이름을 "시작 날짜·종료 날짜 + 날짜"로 확인 - showPicker 키보드 테스트를 달력 열기·취소 테스트로 교체 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review: 1
Please check the settings in the CodeRabbit UI or the ⚙️ Run configuration
You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
minbros
left a comment
minbros
left a comment
There was a problem hiding this comment.
외부 갱신 후 이전 날짜 재적용과, 낮은 화면에서 달력 조작 영역에 접근할 수 없는 문제를 수정해 주세요.
| confirm() { | ||
| if (session?.range.start) { | ||
| const { start, end } = session.range; | ||
| onConfirm({ start, end: end || start }); |
There was a problem hiding this comment.
[P2] 변경하지 않은 달력을 닫을 때 최신 날짜를 되돌리지 않도록 해주세요
달력을 열어 둔 사이 다른 멤버의 날짜 변경이 도착하면, RoomTripEditForm은 새 날짜를 반영하지만 이 훅의 session.range는 열 때 복사한 값을 유지합니다. 이후 날짜를 고르지 않고 확인하거나 배경을 눌러 닫아도 onConfirm({ start, end: end || start })가 이전 날짜를 부모 폼에 다시 넣습니다.
예를 들어 종료일이 다른 멤버에 의해 22일에서 24일로 연장되었는데, 열린 달력을 닫으면 폼은 다시 22일이 됩니다. 닫기 자체가 서버에 저장하는 것은 아니지만, 이후 ‘적용하기’를 누르면 다른 멤버의 변경을 되돌릴 수 있습니다. 외부 날짜 갱신과 열린 임시 값을 조정하고, 사용자가 수정하지 않은 사본으로 최신 폼 값을 덮어쓰지 않도록 해주세요.
There was a problem hiding this comment.
반영했습니다 (eed90b4)
- 달력은 열 때 날짜를 복사해 두지 않고, 이번에 고른 날짜만 기억합니다. 닫을 때(확인·바깥 클릭) 고른 쪽만 폼에 반영하고, 아무것도 고르지 않았으면 바꾸지 않습니다.
- 근본 원인은 폼이 서버 값이 바뀌면 모든 칸을 다시 채우던 동작(
savedSignature)이었습니다. 그래서 여행 정보 수정 폼이 모달을 연 순간 값을 유지하도록 바꿨습니다.- 열어 둔 사이 다른 멤버가 바꿔도 입력 칸은 그대로입니다. 바꾼 게 없으면 적용하기는 꺼져 있습니다.
- 헤더에는 새 값이 보이고, 다시 열면 최신 값으로 시작합니다.
- 저장은 화면 값 그대로 보냅니다(마지막에 저장한 사람의 화면 값이 남는 것으로 정했습니다). 기간 축소 확인은 서버 최신 기간을 기준으로 계산합니다.
- 예: 다른 멤버가 종료일을 22일→24일로 늘린 뒤 A가 22일 화면 그대로 다른 칸을 고쳐 저장하면, 24→22 축소를 먼저 확인받습니다.
| return ( | ||
| <div | ||
| role="presentation" | ||
| className="fixed inset-0 z-[220] flex items-center justify-center bg-black/40 px-4" |
There was a problem hiding this comment.
[P2] 낮은 화면에서도 달력 전체를 조작할 수 있도록 해주세요
이 팝업은 달력을 화면 중앙에 고정하지만, 팝업과 내부 dialog에 높이 제한이나 스크롤 처리가 없습니다. DatePicker는 날짜 행에 h-11을 사용하므로 6주가 표시되는 달은 여백과 헤더·푸터를 합쳐 약 460px 높이가 됩니다. 모바일 가로 화면처럼 가용 높이가 320px이면 상단 월 이동과 하단 취소·확인 영역이 화면 밖으로 나갑니다.
배경 페이지를 스크롤해도 고정된 팝업의 가려진 영역에는 접근할 수 없습니다. 가용 화면 높이에 맞춰 팝업 높이를 제한하고 필요한 영역을 스크롤할 수 있게 해, 날짜 선택과 월 이동·취소·확인을 모두 사용할 수 있도록 해주세요.
There was a problem hiding this comment.
반영했습니다 (eed90b4)
- 팝업 카드 높이를 화면 높이(위아래 여백 16px 제외)로 제한하고, 넘치면 카드 안에서 세로로 스크롤합니다(
max-h-full overflow-y-auto overscroll-contain). - 가로는 최소 300px입니다. 화면이 그보다 좁으면 가운데 정렬이 양옆을 자르지 않게 왼쪽부터 놓고 가로로 스크롤합니다(
justify-center-safe). - 6주짜리 달(2027년 1월)로 확인했습니다.
- 780×360 가로 화면: 카드 높이가 328px로 줄고, 안을 스크롤하면 취소·확인까지 닿습니다.
- 360×780: 스크롤 없이 다 보입니다.
- 280×653: 폭 300px이 유지됩니다.
- 모달을 연 뒤 서버 값이 바뀌어도 입력 칸을 다시 채우지 않고, 바꾼 게 없으면 적용하기 비활성 - 저장은 화면 값 그대로, 기간 축소 확인은 서버 최신 기간 기준 - 달력은 고른 쪽만 바뀌고 아무것도 고르지 않고 닫으면 그대로 - 모바일 달력 팝업 가로 최소 300px, 화면보다 높으면 안에서 세로 스크롤 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…nto feature/calendar-design
|
This branch was successfully deployed
2 participants
노션
변경 내용
TripDateField)을 디자인 시스템 Date Picker로 교체: 시작·종료 칸(Text Field Emphasis)과 기간 달력, 년·월 휠endDateMin계산 제거)변경 이유
테스트
npm run lint(에러 0, 기존 경고 4)npm test(187개 파일, 1491개 테스트 통과)npm run buildnpm run screens)🤖 Generated with Claude Code