Repository navigation
[user] 사용자 홈 화면 v1 디자인 이식 - #32
Conversation
- 통계 카드, 이용 제한 알림, 내 예약 현황 카드 - 예약 취소(예약 확정 버튼 제거), 당겨서 새로고침, polling Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![inryeok-bot[bot]](https://avatars.githubusercontent.com/in/4815249?s=60&v=4){kind=small}
|
|
||
| // 초 단위 카운트다운을 위해 현재 시각을 주기적으로 갱신한다. | ||
| export function useNow(intervalMs = 1000): number { | ||
| const [now, setNow] = useState(() => Date.now()); |
There was a problem hiding this comment.
UserMainPage에서 useNow()로 받은 값을 MyReservationCard의 남은 시간 계산에 바로 사용하고 있는데, 초기값이 Date.now()로 설정되어 있습니다.
Next.js의 Client Component도 초기 HTML은 서버에서 pre-render될 수 있기 때문에 서버 렌더 시각과 브라우저 hydration 시각이 달라질 수 있습니다. 활성 예약이 있는 경우 서버와 클라이언트의 formatCountdown() 결과가 달라져 hydration mismatch가 발생할 가능성이 있습니다.
초기 now를 null로 두고 mount 이후 Date.now()를 설정하거나, mount가 완료되기 전에는 카운트다운을 렌더링하지 않는 방식이 안전해 보입니다.
There was a problem hiding this comment.
반영했습니다. useNow가 mount 전에는 null을 반환하도록 바꾸고, now가 null이면 남은 시간을 렌더링하지 않도록 했습니다. 수정 커밋: 0c4cf08
| if (!value) return "-"; | ||
| const date = new Date(value); | ||
| if (Number.isNaN(date.getTime())) return "-"; | ||
| return date.toLocaleTimeString("ko-KR", { |
There was a problem hiding this comment.
formatDateTime()과 formatClock()에서 toLocaleString/toLocaleTimeString에 timeZone을 지정하지 않고 있습니다.
백엔드 응답은 timezone 정보가 없는 LocalDateTime 문자열이고, 서버와 브라우저가 서로 다른 timezone으로 실행될 수 있어 예약 시간이 서버 렌더링과 브라우저 렌더링에서 다르게 표시될 가능성이 있습니다.
서비스 기준 timezone이 한국 시간이라면 Asia/Seoul을 명시하거나, 공통 날짜 포맷터에서 timezone을 일관되게 처리하는 방향을 확인 부탁드립니다.
There was a problem hiding this comment.
반영했습니다. shared/lib/kstDateTime.ts를 추가해 offset 없는 LocalDateTime은 +09:00(한국 시간)으로 해석하고, 표시는 timeZone: "Asia/Seoul"로 통일했습니다. 남은 시간 계산(getReservedDeadline)도 같은 파서로 해석한 값을 받도록 바꿨고, UTC · America/New_York 환경에서도 테스트가 통과하는 것 확인했습니다. 수정 커밋: 0c4cf08
- useNow는 mount 전 null을 반환하고 카운트다운은 mount 후에만 표시 - 백엔드 LocalDateTime을 한국 시간(+09:00)으로 해석, Asia/Seoul로 표시 - getReservedDeadline은 해석된 Date를 받도록 변경 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 룸메이트 예약을 내 예약으로 표시하지 않도록 활성 예약 ID와 기기 reservationId 비교 - 호실 예약의 기기 종류를 machineId로 조회하고 이름 추정은 대체 수단으로만 사용 - 카운트다운 · 예약 만료 계산에 한국 시간 해석 적용 (#32 수정 반영) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
개요 💡
v1 사용자 웹 홈 화면을 디자인 그대로 옮기고, 데이터는 v2 API로 연결합니다. (#31 위에 쌓은 PR입니다)
작업내용 ⌨️
widgets/user-main-page/UserMainPage(v1app/page.tsx기준)GET /reservations/availability의canReserve = false일 때 해제 시각과 사유(예약 패널티 / 호실 세탁 금지) 표시GET /reservations/active/room)을 v1 예약 카드로 표시widgets/user-main-page/ui/MyReservationCard(v1reservation-card기준)RESERVED: 예약 후 5분까지 남은 시간,RUNNING: 완료 예정까지 남은 시간RUNNING으로 전환RESERVED)에만 표시features/reservation/cancel-my-reservation: 예약 취소 버튼, 패널티 적용 시 재예약 가능 시각 안내shared/hooks/usePullToRefresh,shared/hooks/useNow,shared/lib/formatCountdown추가검증:
node --experimental-strip-types --test tests/*.test.mjs: 25 tests 통과biome lint .,tsc --noEmit: 통과참고:
(user)/main)는(user)그룹과 사용자 레이아웃이 추가된 뒤 연결합니다./(관리자 레이아웃)로 이동해 학생 계정은/app-download로 보내지므로,(user)분리 시 콜백 이동 경로도 함께 조정이 필요합니다.🤖 Generated with Claude Code