온기 동물보호소 봉사활동 신청: 프론트엔드

동물보호소 봉사 일정을 보고, 신청하고, 취소하는 웹앱의 화면입니다. 과제 Level 2 결과물이에요.

• 백엔드 저장소: https://github.com/sohe-commit/animal-shelter-volunteer-level2-backend
• 기획서: 기획서.md
• 기술: Next.js / 배포: Vercel

⏳ 백엔드가 무료 서버라서, 오랜만에 접속하면 첫 화면의 일정이 나오기까지 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에 올리기

1. Vercel에서 Add New → Project를 누르고 이 저장소를 고릅니다.
   • Framework는 Next.js로 자동 인식돼요.
   • 빌드 명령은 기본값 그대로 둬요.
2. Environment Variables에 NEXT_PUBLIC_API_URL을 넣고 배포합니다. 값은 Render 백엔드 주소예요.
3. 배포된 주소(https://xxx.vercel.app)를 백엔드 Render 설정의 FRONTEND_ORIGIN에 넣고, 백엔드를 다시 배포합니다.
   • 이걸 해야 화면에서 서버를 부를 수 있어요.