🚀 해커톤 보드

중학생 해커톤 수업용 실시간 웹페이지입니다. (Nuxt 3 + Vue + Tailwind CSS + shadcn 스타일 UI + Supabase + Vercel)

기능

• 닉네임 + 팀 선택으로 입장 (가입 없음)
• 팀별 아이디어 보드 (실시간 카드, 좋아요)
• 작품 갤러리 (이미지, 발표 자료 PPT·PDF 업로드, 링크, 투표)
• 발표 모드 (교사가 넘기면 모든 화면이 동기화, 팀 이름 배너와 초시계, PDF는 화면에서 바로 보기, PPT는 다운로드·웹 뷰어)
• 평가하기 (학생·교사가 작품마다 항목별 별점 1~5, 교사 50% + 학생 50% 합산 순위, 교사가 공개할 때 결과 표시)
• 교사 관리자 (행사 제목 변경, 팀 수·이름·색상 변경, 부적절한 카드 삭제, 발표 시작, 평가 관리, CSV 내려받기)

1. Supabase 설정

1. https://supabase.com 에서 새 프로젝트를 만든다.
2. SQL Editor 에 supabase/schema.sql 전체를 붙여넣고 실행한다.
3. Project Settings > API 에서 URL, anon key, service_role key 를 확인한다.

팀은 기본값 없이 시작합니다. 제목과 팀은 배포 후 교사 메뉴(/admin)에서 정합니다. schema.sql은 여러 번 실행해도 안전합니다. 예전 버전을 실행했거나 중간에 오류가 났다면 새 파일 전체를 다시 실행하세요. 실행 후 왼쪽 Table Editor에 teams, ideas, projects, presentation_state, site_settings, eval_settings, evaluations 7개 테이블이 보여야 합니다.

2. 로컬 실행

npm install
cp .env.example .env   # 값을 채운다
npm run dev

http://localhost:3000 에서 확인한다.

3. Vercel 배포

1. 프로젝트를 GitHub 에 올리고 Vercel 에서 Import 한다. (Nuxt 자동 인식)
2. Environment Variables 에 .env.example 의 4개 값을 등록한다.
3. Deploy 후 나온 주소를 학생들에게 공유한다.

NUXT_SUPABASE_SERVICE_KEY, NUXT_ADMIN_PASSWORD 는 서버 전용이므로 절대 공개하지 않는다.

수업 진행 팁

1. 교사 메뉴에서 행사 제목(예: 부춘중 해커톤)을 정하고 팀 수·이름을 만든다 → 2. 학생들이 닉네임과 팀을 골라 입장 → 3. 아이디어 보드에서 브레인스토밍 → 4. 작품을 갤러리에 올림 → 5. 교사 메뉴 또는 발표 화면에서 ←/→ 키로 발표를 진행한다 → 6. 발표가 끝나면 평가를 진행한다.

발표 자료(PPT·PDF) 올리기

• 작품 갤러리 → 작품 올리기에서 발표 자료 칸에 .ppt, .pptx, .pdf 파일(30MB까지)을 고르면 된다. 대표 이미지와 따로 올린다.
• 발표 탭에서 그 작품 차례가 되면 PDF는 화면 안에서 바로 보이고, PPT는 다운로드 또는 브라우저에서 보기(Microsoft Office 웹 뷰어)로 연다.
• 다른 형식의 파일은 저장소에서 거부된다. 작품을 삭제하면 올린 파일도 함께 삭제된다.
• 처음 쓰려면 Supabase에서 갱신된 schema.sql을 다시 실행해야 한다. (작품 테이블에 자료 칸을 추가하고 project-files 저장소를 만든다.)

평가하기 사용법

1. 교사 메뉴(/admin) → 평가 관리에서 평가 항목(기본: 창의성·완성도·발표력·협력, 2~6개), 교사 반영 비율(기본 50%)을 정한다.
2. 평가 시작하기를 누르면 학생들의 평가하기 탭에 작품이 나타난다. 학생은 우리 팀 작품을 뺀 작품마다 별점을 눌러 제출하고, 제출 후에도 수정할 수 있다.
3. 교사는 /admin에 로그인한 상태로 평가하기 탭에서 교사 점수를 제출한다. (모든 팀 평가 가능)
4. 평가 마감하기 → 결과 미리보기로 확인 → 결과 공개하기를 누르면 모든 화면에 순위가 나타난다.
5. 결과 CSV로 점수를 저장한다. 다음 수업 전에는 평가 초기화로 점수를 지운다.

학생은 점수 데이터를 직접 읽거나 쓸 수 없고 서버를 통해서만 제출합니다. 결과가 공개되기 전에는 다른 사람의 점수를 볼 수 없습니다. 학생 구분은 브라우저에 저장한 키로 하므로, 같은 기기에서 저장소를 지우면 다시 평가할 수 있습니다.