5v5
지인끼리 주말 롤 5대5 내전 날짜와 자리를 잡는 모바일 웹앱.
| 메인 (티켓 목록) | 티켓 상세 | 빈 칸 들어가기 | 댓글로 조율 |
|---|
| | | |
| 달력 참여/불참 | 매치 종료 (관리자) | MVP · 범인 투표 | 이전 매치 |
| | | |
| 응원하기 (멤버 목록) | 개인 페이지 | 판돈 설정 | |
| | | |
이렇게 씁니다
- 관리자가 계정 생성 → 친구는 닉네임 선택 + PIN
0000으로 첫 로그인 → 새 PIN 설정
- 달력에서 되는 날 참여 → 그날 티켓이 생김
- 티켓의 1팀/2팀 × 탑·정글·미드·원딜·서폿 10칸 중 빈 칸을 눌러 내 자리 잡기 (조율은 댓글로)
- 10칸이 다 차면 확정 → 경기 후 관리자가 승리팀을 골라 종료
- 경기한 10명이 MVP(이긴 팀)·범인(진 팀) 투표, 결과 스크린샷 공유
- 응원 탭에서 멤버별 통산 전적·판돈 수익·MVP/범인 횟수를 보고 응원 남기기
기능
계정
- 계정 생성: 관리자만 할 수 있습니다(관리 탭 → 멤버 추가). 초기 PIN은
0000이고, 첫 로그인 때 새 PIN을 정해야 다른 화면을 쓸 수 있습니다.
- 첫 관리자: 멤버가 0명일 때만 로그인 화면에서 직접 가입할 수 있고, 그 사람이 관리자가 됩니다.
- 로그인: 닉네임 선택 → 4자리 PIN. 5번 틀리면 5분 잠금, 로그인은 30일 유지됩니다.
- 공유 링크 복귀: 로그인 전에 티켓 링크로 들어오면 로그인 후 그 화면으로 돌아갑니다.
- 프로필(내 정보): 티어 + 디비전(I~IV, 마스터 이상·언랭은 없음), 가능 라인(중복 선택), PIN 변경
달력
- 날짜를 누르면 그날 참여 / 불참을 저장합니다. 불참하면 티켓 자리도 비워집니다.
- 날짜 색: 티켓 있음 / 10자리 확정. 내가 자리 잡은 날엔 라인 아이콘, 불참한 날엔 빨간 점이 보입니다.
- 시트의 티켓에서 자리 고르기로 그날 티켓으로 바로 이동합니다.
티켓
- 그날 참여자가 1명이라도 있으면 생깁니다.
- 메인: 오늘 이후 티켓을 요약 카드로 보여줍니다(게이지, 내 자리, 빈 자리, 최신 댓글). 누르면 상세로 갑니다.
- 상세(
/ticket/날짜): 링크로 단톡방에 공유할 수 있습니다.
- 자리 10칸: 빈 칸을 누르면 참여 + 자리 확정, 다른 칸이면 이동, 내 칸을 누르면 자리 비우기
- 한 칸에 한 명만 들어갈 수 있고, 동시에 누르면 먼저 저장된 사람이 들어갑니다.
- 칸을 아직 안 고른 참여자는 자리 미정으로 보입니다(10칸이 다 차면 대기).
- 방식·판돈: 누구나 수정할 수 있고, 마지막 수정자가 표시됩니다. 지난/종료된 매치는 관리자만 수정할 수 있습니다.
- 판돈: 1인당 금액(원)입니다. 없음 / 30,000 / 50,000 / 70,000원 중에서 고르거나 숫자로 직접 입력합니다(최대 1,000,000원).
- 댓글: 티켓이 생길 때부터 누구나 쓸 수 있습니다(300자). 삭제는 작성자나 관리자만 할 수 있고, 작성자 이름을 누르면 그 사람의 개인 페이지로 갑니다.
- 게이지(N/10)와 확정은 채워진 칸 수 기준입니다.
매치 종료와 결과
- 종료(관리자): 10칸이 다 차고 경기 당일부터 종료 · 승리팀 선택 → 그 시점의 자리가 그대로 팀으로 기록됩니다.
- 종료된 매치는 자리와 참여를 바꿀 수 없습니다(관리자 포함). 고치려면 종료 취소 후 수정합니다.
- 투표: 경기한 10명만, 본인 제외, 종류별 1표(다시 누르면 취소)
- MVP는 이긴 팀에서, 범인은 진 팀에서 고르고, 화면에는 득표수만 보입니다.
- 스크린샷: 매치당 10장까지 올릴 수 있습니다. 업로드할 때 자동으로 압축하고, 로그인한 멤버만 볼 수 있습니다.
- 이전 매치: 메인 하단 이전 매치 보기 → 승리팀, 나의 승패, MVP·범인 요약
응원하기
- 응원 탭: 전체 멤버 목록에 각자 **N승 N패와 판돈 수익(+/−)**이 보입니다. 누르면 개인 페이지로 갑니다.
- 개인 페이지(
/players/ID):
- 통산 전적(승률, 경기 수)과 판돈 수익: 이긴 경기는 +판돈, 진 경기는 −판돈. 판돈이 미정인 경기는 빼고 계산합니다.
- MVP / 범인 횟수: 그 경기에서 가장 많은 표를 받은 횟수입니다(동점이면 모두 인정, 표가 없는 경기는 제외).
- 경기 기록: 최근 3경기가 보이고, 더 있으면 전체 경기 보기로 펼칩니다. 그 경기에서 MVP나 범인이었으면 표시가 붙고, 누르면 그 티켓으로 갑니다.
- 응원: 동작은 티켓 댓글과 같습니다(누구나 작성, 작성자/관리자 삭제).
- 내 정보 → 내 전적 · 받은 응원 보기로 내 페이지에 바로 갈 수 있습니다.
관리자
- 멤버 추가 / 정보·관리자 권한 수정 / PIN 초기화(0000으로) / 삭제
- 티켓 빈 칸에 다른 멤버 넣기, 다른 멤버 빼기, 달력에서 대신 참여/불참 등록
- 매치 종료 / 종료 취소 / 티켓 삭제(그날의 자리·댓글·투표·사진 전부 삭제)
- 지난/종료된 매치의 방식·판돈 수정 (판돈을 바꾸면 수익도 다시 계산)
사용감
- 모든 버튼과 링크는 누르는 순간 살짝 줄어들고 흐려집니다(아이폰 포함).
- 화면을 이동할 때 맨 위에 금색 진행 바가 바로 떠서 눌렸는지 알 수 있습니다.
바로 실행 (DB 없이)
npm install
npm run dev:mock # http://localhost:3000
- 가짜 멤버 11명이 들어 있고 모든 PIN은
0000, 관리자는 김가렌입니다.
오제드로 로그인하면 첫 로그인 PIN 재설정 화면을 볼 수 있습니다.- 지난 12주치 경기 결과가 있어서 응원 탭에서 전적·수익·MVP/범인 횟수를 볼 수 있습니다.
- 오늘 티켓은 10칸이 다 차 있어 종료와 투표를, 내일 티켓은 빈 칸이 있어 자리 잡기와 댓글을 해볼 수 있습니다. 지난주 결과는 이전 매치에 있습니다.
- 데이터는 메모리에만 있어서 서버를 재시작하면 처음 상태로 돌아갑니다. 배포 환경에서는 자동으로 꺼집니다.
배포
Vercel에 저장소를 연결하고, Vercel 안에서 **Neon(DB)**과 **Blob(스크린샷)**을 만들어 붙인 뒤 db/schema.sql을 실행하면 됩니다. 모두 무료 플랜으로 충분하고, 오래 안 써도 멈추지 않습니다.
| 환경변수 | 설명 |
|---|
DATABASE_URL | Neon 연결 문자열 (Neon 연결 시 자동) |
BLOB_READ_WRITE_TOKEN | Vercel Blob 토큰 (Blob 연결 시 자동) |
SESSION_SECRET | openssl rand -base64 32 |
스택
Next.js 16 (App Router, Server Actions), React 19, Tailwind CSS v4, shadcn/ui, Neon (Postgres), Vercel Blob, Vercel
구조
src/
├── app/
│ ├── login/ # 닉네임 + PIN, 첫 관리자 가입
│ ├── change-pin/ # 첫 로그인 PIN 재설정
│ ├── (app)/ # 로그인 필요
│ │ ├── page.tsx # 메인: 티켓 요약 목록
│ │ ├── ticket/[date]/ # 티켓 상세
│ │ ├── history/ # 이전 매치
│ │ ├── players/ # 응원하기 (멤버 목록, 개인 페이지)
│ │ ├── calendar/ # 달력
│ │ ├── profile/ # 내 정보
│ │ └── admin/ # 관리 (멤버)
│ ├── api/screenshots/ # 비공개 스크린샷 보기 (로그인 확인)
│ └── actions/ # Server Actions (쓰기 + 권한 체크)
├── components/
│ ├── match/ # 티켓 요약/상세, 자리표, 댓글, 종료, 결과
│ ├── players/ # 경기 기록, 응원
│ ├── thread/ # 댓글/응원 공용 목록
│ ├── calendar/ # 달력, 참여 시트
│ └── icons/ # [라인] 닉네임 [티어] 표시
├── lib/
│ ├── repo/ # DB 접근 (postgres.ts = Neon, memory.ts = 목업)
│ └── ... # 세션, PIN 해시, 스크린샷 저장소, 상수
└── proxy.ts # 로그인 후 원래 경로로 복귀
db/schema.sql # DB 스키마 (처음 설치용, 재실행 안전)
db/migrations/ # 운영 중인 DB 업데이트용 SQL (배포 전에 실행)
public/icons/ # 라인/티어 아이콘 (같은 파일명으로 교체 가능)
보안 메모
- 브라우저는 DB에 직접 접근하지 않습니다. 모든 읽기와 쓰기는 서버에서 처리하고, 권한도 서버에서 확인합니다.
- PIN은 scrypt로 해시해서 저장합니다. 새 계정과 초기화된 계정은 첫 로그인 전까지
0000이니, 만들고 나면 바로 로그인하라고 알려 주세요.
- 계정은 관리자만 만들 수 있어서 링크가 퍼져도 모르는 사람이 가입할 수 없습니다.
- 스크린샷은 비공개 Blob에 저장하고, 로그인한 멤버에게만 보여줍니다.
- 투표는 화면에서만 익명입니다. DB에는 누가 누구에게 투표했는지 저장됩니다.
