도장

초대된 멤버끼리 매일의 인증 기록을 제출하고 확인하는 스터디 서비스입니다. 코딩 테스트, 기상, 운동처럼 무엇을 인증할지는 그룹이 정합니다. 기록과 사진은 멤버만 보고, 공개로 연 스터디의 순위는 로그인 없이 볼 수 있습니다.

진행 중인 Vercel 배포 상태는 docs/DEPLOYMENT_HANDOFF.md에서 확인합니다.

현재 범위

• GitHub OAuth 로그인을 위한 Supabase SSR 클라이언트
• 초대·멤버십·플랫폼 계정·기록·검수 데이터 모델
• ACTIVE 그룹 멤버 기준 PostgreSQL RLS
• 증빙 이미지·영상용 비공개 Storage 정책
• 그룹 생성, 5자리 초대코드 공유·가입 신청, 소유자 가입 승인과 그룹별 가입 자동 승인
• 플랫폼 계정 없이 사진으로 도장 찍기, 승인·반려 검수 화면, 그룹별 자동 인정 설정
• 그룹별 사진 필수·코딩 테스트 스터디·기록 종류 설정과 그에 따라 달라지는 입력·문구
• 기상·착석 스터디의 시각·시간 기록과 멤버별 목표
• 로그인 없이 보는 스터디 목록과 공개 그룹의 리더보드
• 풀이에 남긴 문제 링크와 그룹이 푼 문제 모음, 소유자·검수자의 문제 제목 수정
• 코딩 테스트 스터디가 아닌 그룹의 최근 활동 — 도장·착석·퇴근·응원·검수를 시간순으로 모은 오른쪽 칸
• 그룹 현황판: 오늘 참여 인원, 멤버별 주간·누적 승인과 검수 대기, 주간 인증 매트릭스와 지난 주 이동
• 풀이 기록 탭·필터와 사진·검수를 한 화면에서 처리하는 상세 모달
• 소유자의 검수자 지정·해제, 초대 링크를 유지하는 로그인 재시도·계정 전환
• 본인 닉네임·한 줄 소개를 정하는 프로필 화면과 신원 확인용 GitHub 아이디 표시
• Vercel 배포가 가능한 Next.js 기본 화면

그룹 생성과 초대 수락은 인증 사용자를 확인하는 PostgreSQL 함수에서 원자적으로 처리합니다. 그룹 데이터는 서버와 RLS에서 모두 ACTIVE 멤버십을 확인합니다.

사진을 올리면 인증 기록이 생성됩니다. 자동 인정을 켠 그룹은 바로 인정되고, 꺼져 있으면 검수 대기로 들어갑니다. 등록 창 아래 안내도 이 설정을 따라갑니다. 플랫폼 계정은 필요하지 않고 제목과 문제 링크는 선택입니다. JPG·PNG·WebP 원본을 20MB까지 선택할 수 있습니다. 브라우저에서 긴 변 최대 1,440px, 120KB 목표로 WebP 압축하며 필요하면 1,200px·1,024px까지 줄입니다. 대부분 화면 캡처라 이 정도로 줄여도 문제명·아이디·통과 결과가 읽힙니다. 작은 원본은 확대하지 않고, WebP 미지원 브라우저는 JPEG를 사용합니다. 파일 선택 대신 캡처를 복사해 등록 창에 붙여넣어도 됩니다. 압축이 끝나면 바로 등록할 수 있고, 압축본 미리보기와 ‘크게 열어 글자 확인’으로 글자를 확인할 수 있습니다. 저장 한도는 300KB이며, 초과하면 필요한 부분만 잘라 다시 선택해야 합니다. 새 업로드는 Storage 버킷에서도 같은 한도를 적용합니다. 기존 사진은 변경하지 않습니다.

사진의 문제명·풀이 날짜를 자동 추출하지 않으며 등록 시각을 기록합니다. 사진 확인은 그룹의 OWNER와 REVIEWER가 합니다.

디자인 시스템

바탕은 종이, 글자는 잉크입니다. 도장은 종이에 찍는 것이라 화면을 장부처럼 다룹니다. 아주 약하게 따뜻한 종이색 위에 브랜드 파랑을 잉크로 쓰고, 제목과 큰 숫자는 명조(Noto Serif KR), 본문은 IBM Plex Sans KR, 날짜·아이디는 IBM Plex Mono입니다.

브랜드는 파랑입니다. 예전에는 초록 하나가 브랜드 정체성이면서 동시에 ‘승인·성공’이라는 의미색이었습니다. 도장판이 초록으로 차오를 때 그게 우리 색이라서인지 다들 잘해서인지 구분되지 않았습니다. 브랜드를 파랑으로 옮기면서 두 축을 갈랐고, 승인은 색이 아니라 도장이 찍혔다는 사실이 지게 했습니다. 별도의 ‘성공 초록’이 사라져 색이 하나 줄었습니다.

값과 규칙은 docs/DESIGN_SYSTEM.md에 있습니다. 색 토큰, 도장, 상태 표현, 타이포, 모서리, 확장 프로그램의 제약을 다룹니다.

크롬 확장 프로그램

extension/은 GitHub 자동 업로드 전용입니다. 팝업에서 GitHub로 로그인하고 공개 저장소를 선택하면, 프로그래머스·LeetCode·NeetCode에서 정답을 맞힐 때 풀이 코드와 README를 자동으로 올립니다. 스터디 가입은 필요하지 않으며 Vercel 기록 API나 Supabase DB·Storage에 풀이를 저장하지 않습니다. Supabase는 GitHub 로그인에만 사용합니다.

프로그래머스 연습 문제와 LeetCode는 사용자가 연 문제의 본문을 출처와 함께 README에 싣습니다. NeetCode 본문, 힌트·에디토리얼·다른 사람의 풀이·채점용 테스트케이스는 읽지 않습니다. LeetCode 본문 재게시의 공식 허용은 확인되지 않았습니다.

설치·사용·권한·본문 게시 조건은 확장 안내를 확인합니다. 릴리스 페이지에서 배포용 ZIP을 받습니다.

릴리스 노트

첫 화면과 대시보드가 같은 카드를 씁니다. 웹과 크롬 확장의 가장 최근 릴리스 하나씩을 나란히 둡니다 — 둘을 따로 두면 화면도 둘이 되고, 정작 자주 바뀌는 웹은 소식이 없는 제품처럼 보입니다. 로그인 전에도 보입니다. 확장이 웹스토어 등록 전이라 자동 갱신이 되지 않아 새 버전을 알릴 자리가 필요하고, 들어오기 전 사람에게도 이 서비스가 살아 있다는 것이 보여야 합니다.

전부는 /releases가 집니다. 카드의 ‘지난 기록’이 여기로 옵니다 — GitHub 릴리스로 보내면 거기엔 확장 이야기밖에 없어 웹 기록을 볼 데가 없습니다. 이 페이지도 로그인 없이 봅니다. 확장의 더 지난 버전과 내려받을 파일만 GitHub 릴리스로 넘깁니다.

내용은 src/lib/release-notes.ts의 RELEASES 한 곳에 있고 최신이 위입니다. 카드는 latestReleases()로 면마다 하나씩 고르고, 두 화면이 어긋나지 않도록 릴리스 한 건을 그리는 일은 ReleaseEntry가 함께 씁니다. 확장 버전은 extension/manifest.json에서 직접 읽습니다 — 손으로 옮겨 적으면 릴리스를 낸 뒤 여기만 옛 번호로 남습니다. 지난 확장 릴리스를 더할 때만 그 항목에 version을 적고, 가장 최근 것은 비워 둡니다. 받기 단추도 그 기준으로 최신 확장에만 붙습니다. 웹은 번호가 없어 배포한 날짜로 가릅니다.

구성

• Next.js App Router, TypeScript, Tailwind CSS
• Supabase Auth, PostgreSQL, Storage
• Vercel
• Node.js 24, pnpm 11

별도 서버를 운영하지 않습니다. GitHub의 main 브랜치를 Vercel Production에 연결하고, 다른 브랜치와 Pull Request는 Preview 배포로 확인합니다.

로컬 실행

nvm install
nvm use
corepack enable
pnpm install
cp .env.example .env.local
pnpm dev

http://localhost:3000에서 확인합니다. Supabase 환경변수가 비어 있으면 화면은 열리지만 GitHub 로그인 버튼은 비활성화됩니다.

환경변수

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
NEXT_PUBLIC_SITE_URL=http://localhost:3000

프로젝트 URL과 Publishable Key는 Supabase의 Connect 화면에서 확인합니다. 관리자 키는 현재 필요하지 않으며 브라우저 환경변수로 추가하면 안 됩니다.

명령어

pnpm dev
pnpm lint
pnpm typecheck
pnpm build
pnpm check
pnpm test

용어

같은 것을 여러 말로 부르면 화면마다 다른 제품처럼 보입니다. 문구를 쓸 때 이 표를 따릅니다.

말	무엇
도장 찍기	기록을 남기는 행동. 버튼과 진행·완료 문구에 씁니다
인증	남은 기록. 일반 스터디에서 부르는 이름
풀이	남은 기록. 코딩 테스트 스터디에서 부르는 이름
도장판	멤버를 행, 요일을 열로 놓은 주간 현황표
검수	다른 멤버가 기록을 확인하는 일
승인 · 반려	검수 결과
자동 인정	검수 없이 바로 승인되게 하는 그룹 설정. 그렇게 통과한 기록은 ‘자동 인정’으로 표시합니다
가입 자동 승인	초대코드로 가입을 신청하는 순간 멤버가 되게 하는 그룹 설정. 기록에 쓰는 ‘자동 인정’과 다릅니다
응원	멤버가 남의 기록에 남기는 하트 하나. 검수가 아니고 집계에도 들어가지 않습니다
기록 종류	도장과 함께 무엇을 적을지 정하는 그룹 설정 — 도장만 찍기·몇 시에 했는지(시각)·얼마나 했는지(시간)
디스코드 알림	도장·착석·퇴근·응원·검수를 그룹의 디스코드 채널에 한 줄씩 보내는 그룹 설정. 설정이 끝났다는 표시는 ‘연동됨’입니다
목표	멤버가 자기 그룹에서만 쓰는 기준값. 기상 시각이나 하루 착석 시간
착석 도장 · 퇴근 도장	착석 스터디에서 앉을 때와 일어날 때 찍는 도장. 둘의 차이가 그날의 시간입니다
등록	장부 표현에만 씁니다 — 등록 시각, 최근 등록순, 플랫폼 계정 등록
저장소 · 올리기	확장이 풀이를 커밋하는 GitHub 저장소와 그 일. ‘레포’·‘푸시’라고 쓰지 않습니다
로그인 · 로그아웃	GitHub 계정으로 들어오고 나가는 일. 웹과 확장이 같은 말을 씁니다
연결 · 연결 끊기	확장이 GitHub 저장소에 쓸 권한을 받고 버리는 일. 로그인을 ‘연결’이라고 부르지 않습니다
소유자 · 검수자 · 멤버	그룹 안의 역할. ‘방장’·‘스터디원’·‘회원’이라고 쓰지 않습니다
주제 태그	기록에 다는 주제. ‘태그’·‘주제’만 따로 쓰지 않습니다
초대코드 · 초대 링크	그룹에 들이는 5자리 코드와 링크. 디스코드 쪽은 ‘디스코드 초대 링크’로 가릅니다

가르는 기준은 행동이냐 결과물이냐입니다. 누르는 것은 언제나 도장 찍기 하나이고, 남는 것을 부를 때만 인증·풀이로 갈립니다. ‘인증하기’, ‘풀이 인증하기’, ‘인증 등록하기’처럼 둘을 붙여 부르지 않습니다.

행동에는 그룹 종류가 상관없습니다. 코딩 테스트든 기상이든 누르는 버튼은 같습니다. 그룹 종류를 모르는 자리(서버 오류 같은 곳)에서는 둘 대신 ‘기록’이라고 씁니다.

말투는 합니다체가 기본입니다. 빈 상태(‘아직 … 없어요’)와 서로 독려하는 문장(‘N명 남았어요’, ‘응원했어요’)만 해요체로 둡니다. 부탁은 ‘~해주세요’로 붙여 쓰고 ‘~하세요’는 쓰지 않습니다. 진행 중인 일은 ‘~하는 중…’처럼 말줄임표 문자 ‘…’ 하나로 적습니다.

인증 종류

무엇을 인증하는 스터디인지는 유형 목록이 아니라 그룹 설정 두 개가 정합니다.

This is the beginning of the README. Read the rest at the original. Read the full README ↗