동네장터 공동구매 · 프론트엔드 (Next.js) · Level 3

동네 로컬푸드 마켓의 농산물 공동구매 신청·취소 화면입니다. 공동구매를 찾아보고, 로그인해서 박스 수만 정해 신청하고, 내 신청만 모아 보고 마감 전까지 취소할 수 있습니다. 관리자는 현황을 보고 AI 요약을 받을 수 있습니다. 고객 요청과 설계 내용은 기획서.md에 있습니다. (Level 3 과제)

• 백엔드 저장소: local-groupbuy-level3-backend
• 기술: Next.js · Vercel
• 모든 이름·연락처·계정은 가상 데이터입니다. 결제는 하지 않고 신청만 받습니다.

⏳ 백엔드가 무료 서버라서 처음 열면 목록이 뜨기까지 30초~1분 걸릴 수 있어요. 한 번 깨어나면 빨라집니다.

확인용 계정 (가상)

로그인 화면에서 아래 버튼을 누르면 입력칸이 자동으로 채워집니다.

역할	아이디	비밀번호	할 수 있는 일
관리자	admin	admin1234	공동구매 등록, 모든 신청 보기, 현황, AI 요약, 가상 데이터 채우기
일반 사용자	user01	user1234	신청, 내 신청만 보기, 내 신청 취소

일반 사용자는 user01 ~ user20까지 있고 비밀번호는 모두 user1234입니다. 확인해 볼 만한 것: 일반 사용자로 /admin에 들어가 보면 "관리자만 볼 수 있어요"가 나옵니다.

화면

주소	누가	설명
/	모두	공동구매 목록 (상품명 검색, 종류·산지·상태 필터)
/group-buys/[id]	모두	상세
/login	모두	로그인
/group-buys/[id]/apply	로그인	신청 → 신청번호 발급
/my	로그인	내 신청 목록, 취소
/admin	관리자	현황 숫자 3개, AI 현황 요약, 가상 데이터 다시 채우기
/admin/orders	관리자	전체 신청 목록 (이름·연락처·신청번호 검색)
/admin/group-buys/new	관리자	공동구매 등록

화면에서 막는 것은 안내용이고, 진짜 권한 확인은 백엔드가 합니다.

내 컴퓨터에서 실행

백엔드를 먼저 켠 뒤:

npm install
cp .env.example .env.local   # NEXT_PUBLIC_API_URL을 채운다
npm run dev                  # http://localhost:3000

설정값 (환경변수)

이름	뜻	예시
NEXT_PUBLIC_API_URL	백엔드 서버 주소. 끝에 /를 붙이지 않습니다	내 컴퓨터: http://localhost:4000 / 배포: https://서비스이름.onrender.com

NEXT_PUBLIC_으로 시작하는 값은 브라우저에 그대로 보입니다. 비밀 값(DB 주소, GPT 키 등)은 여기에 넣지 마세요. 이런 값은 백엔드에만 있습니다.

Vercel에 올리기

1. Vercel → Add New → Project → 이 저장소를 가져옵니다. Framework는 Next.js로 자동 인식됩니다.
2. Environment Variables에 NEXT_PUBLIC_API_URL을 넣습니다 (Render 백엔드 주소).
3. Deploy를 누릅니다. 빌드 명령 등은 기본값 그대로 두면 됩니다.
4. 나온 주소(https://….vercel.app)를 백엔드의 FRONTEND_ORIGIN에 넣고 백엔드를 다시 배포합니다. 그래야 브라우저가 서버에 접속할 수 있어요.