서울 풋살 매칭 - 프론트엔드 (Next.js) · Level 2 + 로그인·기록·후기

서울 풋살장별 모집글을 검색·필터로 찾고 바로 참가 신청·취소를 하는 서비스입니다. (Level 2) 기획 내용은 기획서.md(Level 2)와 기획서_확장.md(로그인·참가 기록·매너 후기)를 보세요. 서버는 futsal-match-level2-backend 저장소입니다.

⏳ 서버가 Render 무료 서버라서 첫 접속 때 목록이 뜨기까지 30초~1분 걸릴 수 있습니다. 잠시 기다려 주세요.

확인용 계정 (가상)

역할	이메일	비밀번호
관리자	[email protected]	admin1234
일반	[email protected] (user2, user3도 같음)	user1234

이렇게 확인해 보세요

• 로그인 후 상단의 닉네임을 누르면 /me에서 참가한 경기 수, 출석률, 노쇼, 매너 점수와 내 기록이 보입니다.
• 끝난 경기(지난주 마포 저녁 풋살 (후기 예시))에서 민지(user1) 로 로그인하면 참석/불참 표시를, 영희(user3) 로 로그인하면 후기 남기기를 해 볼 수 있습니다.
• / 모집글 목록: 검색창과 구·실력·상태 필터. 글마다 "신청 3 / 6명"이 보입니다.
• 글을 눌러 상세에서 신청하기 (이름, 연락 방법, 취소용 비밀번호 4자리). 신청 명단에서 신청 취소.
• "정원 마감" 글과 "경기 종료" 글에서는 신청이 거절되고 이유가 나옵니다. 같은 연락 방법으로 두 번 신청해도 거절됩니다.
• /stats 현황: 숫자 3개 + 가상 데이터 다시 채우기 버튼(관리자 비밀번호 필요).
• 가상 글과 신청의 비밀번호는 1234입니다. 모든 모집글·신청자·연락처는 가상 데이터입니다.

화면

주소	화면
/	모집글 목록 (검색·필터)
/posts/[id]	모집글 상세, 참가 신청·취소, 신청 명단
/posts/new · /posts/[id]/edit	모집글 올리기·수정
/stadiums · /stadiums/new · /stadiums/[id]/edit	경기장 목록·등록·수정 (관리자 비밀번호 필요)
/login · /signup	로그인 · 회원가입
/me	내 기록 (참가 횟수·출석률·노쇼·매너 점수)
/users/[id]	사용자 프로필
/stats	현황과 가상 데이터 다시 채우기 (관리자)

내 컴퓨터에서 실행

서버를 먼저 켠 뒤 실행합니다.

npm install
cp .env.example .env.local   # 서버 주소를 확인한다
npm run dev

접속: http://localhost:3000

Vercel에 올리기

1. Add New → Project로 이 저장소를 가져옵니다. 설정은 기본값 그대로 둡니다.
2. Environment Variables에 아래 값을 넣고 Deploy 합니다.

이름	뜻	예시
NEXT_PUBLIC_API_URL	백엔드(Render) 주소. 끝에 / 없이	https://내서비스.onrender.com

3. 나온 Vercel 주소를 백엔드의 FRONTEND_URL 값으로 넣어야 화면에서 서버에 접속할 수 있습니다.