baby-rental-level2-frontend
햇빛구 육아용품 대여실 관리 웹앱의 프론트엔드(Next.js)입니다.
직원이 용품 현황을 보고, 용품을 검색·거르고, 대여 신청을 받아 대여 처리하거나 취소하며, 반납·소독 기록을 남기는 화면입니다. 모든 데이터는 가상입니다.
첫 접속 안내 — 백엔드가 Render 무료 서버라서 한동안 쓰지 않으면 잠듭니다. 첫 접속 때 데이터가 나오기까지 1분쯤 걸릴 수 있어요. 연결 안내가 보이면 잠시 뒤 "다시 시도"를 눌러 주세요.
화면
| 번호 | 화면 | 주소 |
|---|
| S0 | 현황 (전체·대여 중·대여 가능 숫자, 가상 데이터 초기화) | / |
| S1 | 용품 목록 (검색·분류·지금 상태·아기 월령으로 거르기, "신청 중" 표시) | /items |
| S2 | 용품 상세 (신청 안내, 신청·대여·소독 기록, 반납 처리) | /items/[id] |
| S3 | 용품 등록 | /items/new |
| S4 | 대여 기록 직접 등록 | /items/[id]/rentals/new |
| S5 | 소독 기록 등록 | /items/[id]/sanitizations/new |
| S6 | 대여 신청 등록 | /items/[id]/requests/new |
| S7 | 신청 목록 (대여 처리·신청 취소) | /requests |
업무 규칙(R1~R6)은 백엔드가 지키고, 화면은 백엔드가 돌려준 안내 문구를 그대로 보여 줍니다.
가상 데이터 초기화
현황 화면 아래 "가상 데이터 초기화"에서 토큰을 입력하면 시연 중 바뀐 내용을 처음 가상 데이터로 되돌립니다. 토큰은 서버(Render)에만 있고, 이 화면은 입력받은 값을 보내기만 하며 저장하지 않습니다.
물품 사진과 제품 정보
- 대표 사진은 업로드하지 않고
public/items/의 직접 만든 데모 그림(SVG) 15종 중에서 고릅니다. 실제 제품 사진이 아닙니다.
- 브랜드·모델명은 실제 제품과 헷갈리지 않도록 지어낸 가상 이름입니다.
- 화면 글꼴은 Pretendard(jsDelivr CDN)를 씁니다.
설치
Node.js 20.9 이상이 필요합니다.
npm install
실행 (내 컴퓨터)
-
백엔드를 먼저 켭니다 (백엔드 저장소 README 참고, 기본 주소 http://localhost:4000).
-
환경변수 파일을 만듭니다.
cp .env.example .env.local
-
개발 서버를 켜고 브라우저에서 http://localhost:3000 을 엽니다.
npm run dev
환경변수
| 이름 | 뜻 | 예시 |
|---|
NEXT_PUBLIC_API_URL | 백엔드 주소 | http://localhost:4000 |
.env.local은 GitHub에 올라가지 않습니다. 이 값은 브라우저에 노출되는 공개 주소이므로 비밀값을 넣지 않습니다.
배포 (Vercel)
| 항목 | 값 |
|---|
| 프레임워크 | Next.js (자동 인식) |
| 빌드 명령 | npm run build (기본값) |
| 환경변수 | NEXT_PUBLIC_API_URL = 백엔드(Render) 주소 |
- Vercel에서 이 저장소를 Import 합니다.
- Environment Variables에
NEXT_PUBLIC_API_URL을 넣습니다.
- Deploy 합니다. 이후
main에 push하면 자동으로 다시 배포됩니다.
- 배포된 주소를 백엔드(Render)의
FRONTEND_ORIGIN에 넣어야 화면에서 API를 부를 수 있습니다.
빌드 확인
npm run build
