Repository navigation
[user] 세탁기 · 건조기 목록과 배치도, 예약하기 v1 디자인 이식 - #33
Conversation
- 홈 하단 기기 예약 카드(세탁기 / 건조기 탭) - 층별 기기 카드 그리드, 배치도 모달, 예약하기와 예약 불가 안내 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}
| </CardContent> | ||
| </Card> | ||
| )} | ||
|
|
There was a problem hiding this comment.
🔴 필수 수정 · HIGH
예약 섹션이 어떤 호출부에서도 주입되지 않습니다
machineSection은 선택적 prop이라 전달되지 않으면 이 위치에서 아무것도 렌더링하지 않습니다. 이번 PR에는 MachineReservationSection을 생성해 이 prop으로 넘기는 호출부 변경이 없으므로, 추가된 예약 목록과 예약 버튼 전체가 사용자에게 노출되지 않습니다.
이유: 구현된 기능이 런타임 화면에서 완전히 도달 불가능한 상태입니다.
제안: 실제 사용자 라우트에서 예약 섹션을 연결하고 화면에 표시되는지 확인하는 렌더링 테스트를 추가하세요.
| <MachineReservationSection /> |
There was a problem hiding this comment.
(user) 라우트 그룹이 아직 없어서 의도적으로 호출부를 넣지 않았습니다. (user) 그룹과 사용자 레이아웃이 추가되면 <UserMainPage machineSection={<MachineReservationSection />} />로 라우트를 연결할 예정이고, 그 전까지는 로컬 임시 경로에서 렌더링을 확인했습니다.
| machine={machine} | ||
| now={now} | ||
| isMyRoomMachine={ | ||
| myRoomNumber !== null && machine.roomNumber === myRoomNumber |
There was a problem hiding this comment.
isMyRoomMachine을 machine.roomNumber === myRoomNumber로 판별하고 있는데, /api/v2/reservations/active/room은 현재 사용자 본인뿐 아니라 같은 호실 룸메이트의 활성 예약도 반환합니다.
따라서 같은 호실 룸메이트가 예약한 기기도 MachineCard에서 (내 예약)으로 표시될 수 있습니다. 실제 표시 위치는 MachineCard의 isMyRoomMachine ? "(내 예약)" : "예약" 분기입니다.
activeReservationQuery.data?.id === machine.reservationId 또는 현재 사용자 ID와 machine.userId를 비교해서 본인 예약 여부를 판단하는 게 맞는지 확인 부탁드립니다.
There was a problem hiding this comment.
맞습니다, 반영했습니다. 호실 번호 대신 activeReservation.id === machine.reservationId로 본인 예약 여부를 판단하도록 바꿔서 룸메이트 예약은 "예약"으로만 표시됩니다. 수정 커밋: 9ad9b80
| canReserve: availability.canReserve, | ||
| isBanned: availability.isBanned, | ||
| hasMyActiveReservation: activeReservationQuery.data !== null, | ||
| roomReservationTypes: roomReservations.map((reservation) => |
There was a problem hiding this comment.
호실 내 동일 종류 예약 제한을 getMachineTypeFromName(reservation.machineName)으로 판단하고 있습니다.
그런데 백엔드의 호실 활성 예약 응답은 machineId와 machineName을 제공하고, 기기 타입을 별도 필드로 제공하지 않습니다. 기기명이 Washer-3F-L1이 아닌 세탁기 1처럼 내려오면 getMachineTypeFromName()이 null을 반환합니다.
이후 getReserveBlockReason()에서 roomReservationTypes.includes(machineType)를 검사하기 때문에, 같은 호실에 이미 세탁기 예약이 있어도 동일 종류 예약 제한이 적용되지 않을 수 있습니다.
machineId로 allMachines의 타입을 조회하거나, 백엔드 응답에 machineType을 포함하는 방식이 안전해 보입니다.
There was a problem hiding this comment.
반영했습니다. 호실 예약의 기기 종류는 machineId로 기기 현황 목록에서 먼저 찾고, 찾지 못할 때만 이름으로 추정하도록 바꿨습니다. 수정 커밋: 9ad9b80
- 룸메이트 예약을 내 예약으로 표시하지 않도록 활성 예약 ID와 기기 reservationId 비교 - 호실 예약의 기기 종류를 machineId로 조회하고 이름 추정은 대체 수단으로만 사용 - 카운트다운 · 예약 만료 계산에 한국 시간 해석 적용 (#32 수정 반영) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
개요 💡
v1 홈 하단의 "기기 예약" 카드(세탁기 / 건조기 탭)를 디자인 그대로 옮기고, 예약은 v2 API로 연결합니다. (#32 위에 쌓은 PR입니다)
작업내용 ⌨️
widgets/user-machine-listMachineReservationSection: v1 "기기 예약" 카드와 세탁기 / 건조기 탭MachineList: 층별 그룹, 층 헤더(대수 배지 · 새로고침 5초 쿨다운 · 배치도), 카드 그리드MachineCard: v1 기기 카드 (상태 배지, 위치, 작업 상태, 예약 호실 · 내 예약 표시, 남은 시간, 예약 불가 안내)LayoutModal: v1 배치도 모달 (건조기 위 / 세탁기 아래, 입구 표시). 층에 기기가 더 있으면 칸이 늘어나도록 처리features/reservation/reserve-machine: 예약하기 버튼 (POST /api/v2/reservations)UserMainPage에machineSection슬롯 추가<UserMainPage machineSection={<MachineReservationSection />} />로 조립검증:
node --experimental-strip-types --test tests/*.test.mjs: 25 tests 통과biome lint .,tsc --noEmit: 통과참고:
renderActions)에 추가합니다.🤖 Generated with Claude Code