한빛구 공공 생활물품 대여소 · 프론트엔드 (Level 2)
한빛구(가상) 거점 4곳의 공구, 캠핑, 생활, 행사 물품을 한곳에서 찾고, 예약하고, 반납하는 웹앱의 화면입니다.
기획 내용은 기획서.md에 있습니다. 모든 기관, 인물, 연락처는 가상이며 실제 개인정보를 다루지 않습니다.
⏳ 백엔드가 Render 무료 서버라, 한동안 아무도 쓰지 않았다면 첫 화면에 "서버를 깨우는 중" 안내가 뜨고 1분 가까이 걸릴 수 있어요. 고장이 아니에요.
화면
| 화면 | 주소 | 하는 일 |
|---|
| 물품 목록 | /items | 이름 검색, 거점·분류 필터, "지금 빌릴 수 있는 것만" |
| 물품 상세 | /items/[id] | 7일 예약 현황표(이름은 숨김), 예약 신청, 고장 신고 |
| 내 예약 | /my | 이름·연락처로 조회, 취소, 반납 |
| QR 반납 | /return?location=거점코드 | 거점 QR을 찍으면 열리는 반납 화면 (추가 기능) |
| 직원: 대여 현황 | /admin/dashboard | 대여 중 / 예약 / 대여 가능 숫자, 반납 지연·점검 필요, 거점별 보기 |
| 직원 홈 | /admin | 물품 상태 관리, 가상 데이터 다시 채우기, 거점 QR 코드 |
| 물품 등록 | /admin/items/new | 새 물품 등록, 잘못된 입력은 쉬운 말로 안내 |
| 예약 관리 | /admin/reservations | 전체 예약과 이름·연락처, 반납 지연 목록, 반납 처리 |
| 고장 신고 관리 | /admin/reports | 수리 시작, 처리 완료 |
현황은 운영 정보라 주민 메뉴가 아니라 직원 화면 안에 있어요. Level 2에는 로그인이 없어서 직원 화면을 막지는 않아요(기획서에 적은 한계).
직접 확인해 보기 (가상 주민)
| 이름 / 연락처 | 확인할 수 있는 것 |
|---|
| 박민수 / 010-3333-3333 | 내 예약에서 취소와 반납 |
| 김하늘 / 010-1111-1111 | 새로 예약하면 규칙 R3 거절 (이미 3건) |
| 이지연 / 010-2222-2222 | 새로 예약하면 규칙 R7 거절 (반납 지연 중) |
| 새 이름 아무거나 | 무선 전동드릴 상세에서 "예약됨" 시간을 고르면 규칙 R1 거절 |
확인이 끝나면 직원 → 가상 데이터 다시 채우기로 처음 상태로 되돌릴 수 있어요.
기술
Next.js 16 (App Router), React 19, Tailwind CSS 4. 데이터는 브라우저에서 백엔드 API를 직접 불러옵니다.
설정값
| 이름 | 뜻 | 예시 |
|---|
NEXT_PUBLIC_API_URL | 백엔드 주소 (끝에 / 없이) | https://public-rental-level2-backend.onrender.com |
Vercel에서는 Settings → Environment Variables에 넣고 다시 배포합니다. 이 값은 빌드할 때 화면 코드에 들어가므로, 바꾼 뒤에는 꼭 다시 배포해야 해요.
내 컴퓨터에서 실행
npm install
cp .env.example .env.local # NEXT_PUBLIC_API_URL=http://localhost:4000
npm run dev # http://localhost:3000
