Repository navigation
feat(calendar): 여행 날짜 선택 달력 적용 - #240
Merged
Merged
Conversation
- CONTRIBUTING에 브랜치 종류 표(fix·refactor·chore·docs 추가), PR 전 검증, 작업 공유 기준 정리 - PR 템플릿에 노션 링크 칸 추가 - Claude Code 스킬 start-work, open-pr 추가 - vitest에 테스트용 NEXT_PUBLIC 환경 변수를 넣어 36개 파일 로드 실패 수정 - .claude/settings.local.json을 gitignore에 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- npm run screens: Playwright로 PC 크롬·사파리(WebKit)·안드로이드(Galaxy S24 에뮬레이션), simctl로 아이폰 시뮬레이터 스크린샷 - 전용 크롬 프로필에서 로그인해 localhost 인증 쿠키만 저장 - 3000번 dev 서버가 현재 폴더 코드인지 검사 - open-pr 검증에 화면 확인 단계, PR 템플릿에 화면 확인 항목 추가 - CONTRIBUTING에 화면 확인 기준 표 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 날짜 input 대신 날짜 칸 클릭 → 날짜 선택 → 확인 순서로 변경 - 날짜 칸 접근성 이름을 "시작 날짜·종료 날짜 + 날짜"로 확인 - showPicker 키보드 테스트를 달력 열기·취소 테스트로 교체 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 59 minutes. View limit details
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
reviewed
Oct 16, 2026
minbros
left a comment
minbros
left a comment
Member
There was a problem hiding this comment.
외부 갱신 후 이전 날짜 재적용과, 낮은 화면에서 달력 조작 영역에 접근할 수 없는 문제를 수정해 주세요.
Comment on lines
+42
to
+45
| confirm() { | ||
| if (session?.range.start) { | ||
| const { start, end } = session.range; | ||
| onConfirm({ start, end: end || start }); |
Member
There was a problem hiding this comment.
[P2] 변경하지 않은 달력을 닫을 때 최신 날짜를 되돌리지 않도록 해주세요
달력을 열어 둔 사이 다른 멤버의 날짜 변경이 도착하면, RoomTripEditForm은 새 날짜를 반영하지만 이 훅의 session.range는 열 때 복사한 값을 유지합니다. 이후 날짜를 고르지 않고 확인하거나 배경을 눌러 닫아도 onConfirm({ start, end: end || start })가 이전 날짜를 부모 폼에 다시 넣습니다.
예를 들어 종료일이 다른 멤버에 의해 22일에서 24일로 연장되었는데, 열린 달력을 닫으면 폼은 다시 22일이 됩니다. 닫기 자체가 서버에 저장하는 것은 아니지만, 이후 ‘적용하기’를 누르면 다른 멤버의 변경을 되돌릴 수 있습니다. 외부 날짜 갱신과 열린 임시 값을 조정하고, 사용자가 수정하지 않은 사본으로 최신 폼 값을 덮어쓰지 않도록 해주세요.
Collaborator
Author
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" |
Member
There was a problem hiding this comment.
[P2] 낮은 화면에서도 달력 전체를 조작할 수 있도록 해주세요
이 팝업은 달력을 화면 중앙에 고정하지만, 팝업과 내부 dialog에 높이 제한이나 스크롤 처리가 없습니다. DatePicker는 날짜 행에 h-11을 사용하므로 6주가 표시되는 달은 여백과 헤더·푸터를 합쳐 약 460px 높이가 됩니다. 모바일 가로 화면처럼 가용 높이가 320px이면 상단 월 이동과 하단 취소·확인 영역이 화면 밖으로 나갑니다.
배경 페이지를 스크롤해도 고정된 팝업의 가려진 영역에는 접근할 수 없습니다. 가용 화면 높이에 맞춰 팝업 높이를 제한하고 필요한 영역을 스크롤할 수 있게 해, 날짜 선택과 월 이동·취소·확인을 모두 사용할 수 있도록 해주세요.
Collaborator
Author
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이 유지됩니다.
- --label은 .screens 바로 아래 폴더 이름만, --base는 로컬 http 주소만, --path는 앱 안 경로만 허용 - login이 고정 포트 대신 빈 포트로 띄운 전용 프로필 크롬에만 연결·저장·종료 - 외부 명령(lsof·git·open·xcrun·xcode-select)을 절대 경로로 호출 - open-pr: 기존 PR 갱신도 push 전에 커밋 목록을 보여 주고 확인 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- --base는 허용한 호스트 이름과 숫자 포트로 주소를 다시 만들어 크롬 인자로 넘김 - 결과 파일은 쓰기 직전에 .screens 안인지 확인하고, 사용법 오류는 ✖ 메시지로 출력 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 모달을 연 뒤 서버 값이 바뀌어도 입력 칸을 다시 채우지 않고, 바꾼 게 없으면 적용하기 비활성 - 저장은 화면 값 그대로, 기간 축소 확인은 서버 최신 기간 기준 - 달력은 고른 쪽만 바뀌고 아무것도 고르지 않고 닫으면 그대로 - 모바일 달력 팝업 가로 최소 300px, 화면보다 높으면 안에서 세로 스크롤 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…nto feature/calendar-design
|
minbros
added a commit
that referenced
this pull request
Oct 22, 2026
* chore(workflow): github 자동화·화면 테스트 자동화 (#239) * chore(workflow): 브랜치 종류 정리와 작업 시작·PR 스킬 추가 - CONTRIBUTING에 브랜치 종류 표(fix·refactor·chore·docs 추가), PR 전 검증, 작업 공유 기준 정리 - PR 템플릿에 노션 링크 칸 추가 - Claude Code 스킬 start-work, open-pr 추가 - vitest에 테스트용 NEXT_PUBLIC 환경 변수를 넣어 36개 파일 로드 실패 수정 - .claude/settings.local.json을 gitignore에 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * chore(workflow): 화면 확인 스크립트와 check-screens 스킬 추가 - npm run screens: Playwright로 PC 크롬·사파리(WebKit)·안드로이드(Galaxy S24 에뮬레이션), simctl로 아이폰 시뮬레이터 스크린샷 - 전용 크롬 프로필에서 로그인해 localhost 인증 쿠키만 저장 - 3000번 dev 서버가 현재 폴더 코드인지 검사 - open-pr 검증에 화면 확인 단계, PR 템플릿에 화면 확인 항목 추가 - CONTRIBUTING에 화면 확인 기준 표 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(workflow): 화면 확인 스크립트 입력 검증과 PR 스킬 확인 단계 보완 - --label은 .screens 바로 아래 폴더 이름만, --base는 로컬 http 주소만, --path는 앱 안 경로만 허용 - login이 고정 포트 대신 빈 포트로 띄운 전용 프로필 크롬에만 연결·저장·종료 - 외부 명령(lsof·git·open·xcrun·xcode-select)을 절대 경로로 호출 - open-pr: 기존 PR 갱신도 push 전에 커밋 목록을 보여 주고 확인 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(workflow): 화면 확인 스크립트 경로·인자 검증을 사용 지점에서 확인 - --base는 허용한 호스트 이름과 숫자 포트로 주소를 다시 만들어 크롬 인자로 넘김 - 결과 파일은 쓰기 직전에 .screens 안인지 확인하고, 사용법 오류는 ✖ 메시지로 출력 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> * feat(calendar): 여행 날짜 선택 달력 적용 (#240) * chore(workflow): 브랜치 종류 정리와 작업 시작·PR 스킬 추가 - CONTRIBUTING에 브랜치 종류 표(fix·refactor·chore·docs 추가), PR 전 검증, 작업 공유 기준 정리 - PR 템플릿에 노션 링크 칸 추가 - Claude Code 스킬 start-work, open-pr 추가 - vitest에 테스트용 NEXT_PUBLIC 환경 변수를 넣어 36개 파일 로드 실패 수정 - .claude/settings.local.json을 gitignore에 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * chore(workflow): 화면 확인 스크립트와 check-screens 스킬 추가 - npm run screens: Playwright로 PC 크롬·사파리(WebKit)·안드로이드(Galaxy S24 에뮬레이션), simctl로 아이폰 시뮬레이터 스크린샷 - 전용 크롬 프로필에서 로그인해 localhost 인증 쿠키만 저장 - 3000번 dev 서버가 현재 폴더 코드인지 검사 - open-pr 검증에 화면 확인 단계, PR 템플릿에 화면 확인 항목 추가 - CONTRIBUTING에 화면 확인 기준 표 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * feat(calendar): 날짜 선택 디자인 작업 중 (WIP) * feat(calendar): 캘린더 주변 박스 제거 * test(calendar): 날짜 선택 달력에 맞춰 여행 정보 수정 테스트 갱신 - 날짜 input 대신 날짜 칸 클릭 → 날짜 선택 → 확인 순서로 변경 - 날짜 칸 접근성 이름을 "시작 날짜·종료 날짜 + 날짜"로 확인 - showPicker 키보드 테스트를 달력 열기·취소 테스트로 교체 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(workflow): 화면 확인 스크립트 입력 검증과 PR 스킬 확인 단계 보완 - --label은 .screens 바로 아래 폴더 이름만, --base는 로컬 http 주소만, --path는 앱 안 경로만 허용 - login이 고정 포트 대신 빈 포트로 띄운 전용 프로필 크롬에만 연결·저장·종료 - 외부 명령(lsof·git·open·xcrun·xcode-select)을 절대 경로로 호출 - open-pr: 기존 PR 갱신도 push 전에 커밋 목록을 보여 주고 확인 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(workflow): 화면 확인 스크립트 경로·인자 검증을 사용 지점에서 확인 - --base는 허용한 호스트 이름과 숫자 포트로 주소를 다시 만들어 크롬 인자로 넘김 - 결과 파일은 쓰기 직전에 .screens 안인지 확인하고, 사용법 오류는 ✖ 메시지로 출력 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(calendar): 여행 정보 수정 폼을 연 순간 값으로 유지하고 달력은 고른 날짜만 반영 - 모달을 연 뒤 서버 값이 바뀌어도 입력 칸을 다시 채우지 않고, 바꾼 게 없으면 적용하기 비활성 - 저장은 화면 값 그대로, 기간 축소 확인은 서버 최신 기간 기준 - 달력은 고른 쪽만 바뀌고 아무것도 고르지 않고 닫으면 그대로 - 모바일 달력 팝업 가로 최소 300px, 화면보다 높으면 안에서 세로 스크롤 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> * docs(AX): AI 코드 품질 지침 추가와 개인 작업 스킬 분리 (#242) - AI 프론트엔드 코드 품질 지침과 문서 연결 추가 - 개인 개발 스킬과 화면 확인 도구를 저장소에서 분리 * feat(route): 웹 동선보기 장소 이동 네비게이션 추가 (#241) - 웹 동선보기의 이전·다음 장소 탐색과 지도·일정 카드 연동 추가 * feat(map): 장소 검색 UI를 피그마 디자인에 맞게 개편 (#243) * feat(map): 장소 검색 UI를 피그마 디자인에 맞게 개편 - 검색 칩과 가로 스크롤 툴바, 검색 상태 및 장소 미리보기 정리 - 선택 핀 이름 우선순위와 경로 복귀 상태 유지 - 로그인 페이지 내부 헬퍼의 잘못된 export와 관련 테스트 수정 * fix(map): 검색창 포커스 중 지우기 버튼 숨김 * fix(map): 장소 말풍선을 선택 핀 상단에 연결 * fix(map): 장소 말풍선과 핀 사이 여백 조정 * fix(map): 검색 모드 충돌과 검색 UI 상호작용 개선 - 카테고리 검색과 텍스트 검색을 상호 배타적으로 전환 - 빈 검색창과 지우기 동작에서 검색 아이콘으로 복귀 - 툴바 높이 고정 및 자동완성 강조 상태 통합 - 닫기 버튼 영역 정렬과 말풍선 자동 포커스 제거 * fix(map): 검색어 삭제 시 피그마 기본 검색창 상태 유지 - Filled 상태에서 지우면 펼쳐진 빈 검색창으로 복귀 - 포커스가 없는 빈 검색창도 바깥 클릭 시 접기 * fix(map): 자동완성 선택 시 상세정보 바로 표시 * fix(place): 사진 한 장 조회 시 단건 API 사용 - 단건 사진 훅의 batch 선행 호출 제거 - 공유 캐시와 사진 없음 만료 및 재시도 동작 검증 * fix(map): 현 위치 검색 후 필터 변경 시 Places 중복 검색 제거 (#245) * docs(workflow): 화면 확인 지침 삭제 --------- Co-authored-by: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com> Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This branch was successfully deployed
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
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.
노션
변경 내용
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