WP-FIGMA-RENT-MAP-01 — Map đầu trang · pin ảnh phòng
Domain: D-RENTAL · Surface: CON · Status: IMP · Date: 2026-08-17
Audit (vs Figma JPG 0ea6… + yêu cầu)
Figma MCP rate-limit → JPG 0ea609678e9a0fc4568b23.jpg + user: map đầu trang, ảnh phòng / địa điểm trên pin để đánh giá trực quan.
| Mục | Trước (PIXEL-02) | Lệch / gap | Sau |
|---|---|---|---|
| Map | Ẩn; chỉ khi bấm «Bản đồ» | User cần map đầu trang | Peek 280px luôn trên list |
| Pin | Circle nhỏ MapImagePin 40px, không giá |
Không đọc được phòng trên map | Vuông ảnh + caption 3.5tr · 4.5★ |
| Peek card | Chỉ khi expand · text only | Không xem ảnh khi chạm pin | Card ảnh 64px + sao + giá + quận · luôn hiện khi chọn |
| Camera | Region 1 điểm | Không thấy hết tin | fitToCoordinates mọi listing |
| Bán kính | 15 km | Thiếu tin xa | 50 km (max DTO) |
| «Bản đồ» | Bật/tắt map | — | Mở lớn / thu về peek + list |
Change
RentalListScreen: map luôn đầu trang; pinthumb; card peek; «Bản đồ» = expand.NearbyMapSheet:pinKind: 'thumb'·peekHeight·fitAllMarkers·peekCardAlways.
Files
mobile/src/features/rentals/screens/RentalListScreen.tsxmobile/src/shared/maps/NearbyMapSheet.tsx
N/A
- Cluster khi chồng pin (nhiều tin cùng tòa)
- Figma MCP pixel
25:1686(rate-limit)
Verify
- Phòng trọ → map trên đầu, mọi tin có ảnh + giá/sao trên pin.
- Chạm pin → card ảnh/giá/sao; chạm card → chi tiết.
- «Bản đồ» / vuốt navbar → map lớn; vuốt lên → list.
- Camera zoom vừa đủ thấy hết pin.