성락 출석관리 시스템 (Sungrak Check)

성도들의 일일 출석과 정기·비정기 행사 출석을 관리하는 웹 시스템. 대시보드에서 출석 현황·통계를 실시간으로 확인하고, 행사 생성·출석 그룹 관리·미제출 알림까지 처리한다.

내가 한 역할

프론트엔드(Next.js + Mantine + Clerk 인증)를 주도적으로 개발했고, 백엔드(Spring Boot + PostgreSQL)에도 직접 커밋하며 API 설계에 참여했다. 여러 개발자가 함께하는 팀 프로젝트로, 현재도 계속 기능이 추가되고 있다. 레거시 Shadcn(Radix) 컴포넌트에서 Mantine 8 으로 넘어가는 과도기라, 기존 화면은 그대로 두고 신규 화면은 Mantine 으로 붙이는 컨벤션을 팀과 맞췄다.

배운 점

• 통합 출석 조회가 그룹마다 반복 쿼리를 날려 N+1 로 터지는 걸 발견하고 배치 조회로 정리했다. 화면 하나에서 그룹 수만큼 쿼리가 늘어나는 패턴은 로컬 시드 데이터로는 잘 안 드러나서, 운영 데이터 규모로 확인하고 나서야 잡았다.
• 출석체크 검색에서 사용자 입력을 그대로 new RegExp() 에 넣어 하이라이트하고 있었는데, 정규식 인젝션이 가능한 취약점이었다. 특수문자를 이스케이프하도록 고쳤다.
• Next.js 16 으로 올리며 Turbopack 프로덕션 빌드가 next.config 의 레거시 webpack 커스텀 설정과 충돌해 깨졌다. webpack 전용 설정을 걷어내고 Turbopack 기준으로 다시 정리했다.

스택

• FE: Next.js, Clerk(인증), Mantine, Radix UI, TanStack Query
• BE: Spring Boot 3, Gradle, PostgreSQL