온기 동물보호소 봉사활동 신청: 프론트엔드
동물보호소 봉사 일정을 보고, 신청하고, 취소하는 웹앱의 화면입니다. 과제 Level 2 결과물이에요.
⏳ 백엔드가 무료 서버라서, 오랜만에 접속하면 첫 화면의 일정이 나오기까지 30초~1분 정도 걸릴 수 있어요.
화면
| 주소 | 화면 | 누가 |
|---|
/ | 봉사 일정 목록. 주 버튼(이번 주 / 다음 주 …), 그 주 안의 날짜 버튼, 활동 종류, 신청 가능한 것만 보기로 걸러 볼 수 있어요 | 봉사자 |
/schedules/[번호] | 일정 상세와 신청 (전화번호는 숫자만 넣으면 "-"가 자동으로 들어가요. 미성년자는 보호자 동의서 안내가 나와요). 담당자 모드에서는 아래에 신청자 명단과 **일정 고치기 / 일정 지우기(취소 사유)**가 나와요 | 봉사자 / 담당자 |
/my | 내 신청 찾기와 취소 (이름 + 전화번호). 월별 "봉사 N회 / 신청 M회"와 이번 주 신청·횟수를 먼저 보여 주고, 다른 주 신청은 "다른 주 신청 내역 N건"으로 알려 줘요. 보호소가 취소한 신청은 사유를 보여 주고, 끝난 봉사는 봉사 인정 증서를 보고 인쇄할 수 있어요 | 봉사자 |
/admin/schedules/new | 봉사 일정 등록 | 담당자 (담당자 모드) |
/admin/schedules/[번호]/edit | 봉사 일정 고치기 (신청자가 있으면 날짜·활동은 잠겨요) | 담당자 (담당자 모드) |
/admin/stats | 이번 달 현황 (신청 수, 봉사자 수, 인기 활동, 활동적인 봉사자) | 담당자 (담당자 모드) |
/admin/data | 서버·DB 상태 확인, 가상 데이터 다시 채우기 | 담당자 (담당자 모드) |
확인용 정보
Level 2라서 로그인은 없어요. 봉사자는 이름 + 전화번호로 구분해요.
담당자 화면(일정 등록·현황·데이터 관리)은 담당자 모드에서만 보여요. 위쪽 메뉴의 담당자 모드를 누르고 담당자 비밀번호를 넣으면 메뉴가 나타나요.
-
시연용 담당자 비밀번호: ongi-demo-1234 (과제 확인용으로 공개해요. 비밀번호 칸 아래에도 적혀 있어요.)
-
미리 들어 있는 가상 봉사자: 김봉사 / 010-0000-0001
- "내 신청 찾기"에 넣으면 신청 내역을 볼 수 있어요.
-
새로 신청해 볼 때는 아무 가짜 이름과 010-0000-9999 같은 번호를 쓰면 돼요.
-
오늘부터 2주 뒤까지의 일정은 서버가 저절로 채워서, 날짜가 지나도 신청해 볼 수 있어요.
-
데이터가 지저분해지면 담당자 모드에서 데이터 관리 → 가상 데이터 다시 채우기를 눌러 주세요. 오늘 기준으로 다시 채워져요.
모든 이름과 전화번호는 가상 데이터예요.
내 컴퓨터에서 실행
백엔드를 먼저 켜 주세요. Node.js 22 이상이 필요해요.
cp .env.example .env.local # NEXT_PUBLIC_API_URL에 백엔드 주소
npm install
npm run dev # http://localhost:3000
설정값 (환경 변수)
| 이름 | 뜻 | 예시 |
|---|
NEXT_PUBLIC_API_URL | 백엔드(API) 서버 주소. 끝에 /를 붙이지 않아요 | https://xxx.onrender.com |
Vercel에 올리기
- Vercel에서 Add New → Project를 누르고 이 저장소를 고릅니다.
- Framework는 Next.js로 자동 인식돼요.
- 빌드 명령은 기본값 그대로 둬요.
- Environment Variables에
NEXT_PUBLIC_API_URL을 넣고 배포합니다. 값은 Render 백엔드 주소예요.
- 배포된 주소(
https://xxx.vercel.app)를 백엔드 Render 설정의 FRONTEND_ORIGIN에 넣고, 백엔드를 다시 배포합니다.
