← 포트폴리오 목록

이너서클 회원제 커뮤니티

카카오·네이버 소셜로그인과 관리자 승인 절차를 거쳐 가입하는 회원제 커뮤니티 플랫폼입니다.

제네릭 게시판 엔진 설계게시판 타입 컬럼 하나로 6종 게시판 공통 로직(댓글·첨부·북마크·신고)을 재사용하는 엔진 구조 설계
Supabase RLS 3단계 권한 정책 구축회원 등급별 게시글 조회·작성 권한을 PostgreSQL RLS 정책 8개로 세분화해 DB 레벨에서 강제하는 구조 구현
소셜로그인 승인 상태머신 설계카카오·네이버 OAuth 연동과 pending/approved/rejected 3단계 승인 상태머신을 결합한 가입 플로우 구현
서비스 타입Web
업종플랫폼
기술 스택
React 18TypeScriptTailwind CSSNode.jsExpressPostgreSQL (Supabase)Supabase AuthSupabase RLS
주요 기능
  • 통합 커뮤니티 피드
  • 회원가입 및 승인심사
  • 권한 관리 및 등급별 게시판 접근제어
  • 강의영상 & 갤러리 게시판
Overview

프로젝트 개요

범위: 개발, 디자인, 기획
카카오·네이버 소셜로그인과 관리자 승인 절차를 거쳐 가입하는 회원제 커뮤니티 플랫폼입니다. 6종 게시판, 강의영상, 갤러리 콘텐츠를 하나의 피드로 통합하고 3단계 권한 관리를 Supabase RLS 기반으로 제어하며, React 18 + Node.js/Express + PostgreSQL(Supabase) 스택으로 구현합니다.
이너서클 회원제 커뮤니티
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

회원 등급별 게시판 접근 권한을 RLS 정책과 프론트엔드 가드 양쪽에서 일관되게 유지하는 설계가 필요합니다

가입 승인 대기 중 회원의 부분적 접근 범위(예

공지 열람만 허용)를 세밀하게 제어하는 로직 설계가 필요합니다

게시판 6종의 서로 다른 콘텐츠 특성(텍스트/영상/이미지)을 하나의 제네릭 엔진으로 통합하면서 확장성을 유지하는 스키마 설계가 필요합니다

워터마크 삽입 시 이미지·PDF 등 자료 형식별로 오버레이 처리 방식이 달라 렌더링 성능을 고려한 설계가 필요합니다

핵심 기능 1

통합 커뮤니티 피드

회원 등급에 따라 노출되는 6종 게시판(일반/공지/Q&A 등) 콘텐츠를 하나의 피드에 통합해 보여주는 커뮤니티 메인 화면. 게시판 타입 컬럼을 가진 제네릭 포스트 엔진을 단일 피드 컴포넌트로 렌더링
통합 커뮤니티 피드
핵심 기능 2

회원가입 및 승인심사

회원이 가입 신청 후 관리자 승인을 거쳐야 정식 활동이 가능한 승인제 가입 플로우 관리 화면. pending/approved/rejected 상태머신 + 카카오·네이버 소셜로그인
회원가입 및 승인심사
핵심 기능 3

권한 관리 및 등급별 게시판 접근제어

회원 등급별 권한 관리를 통해 게시판 열람과 기능 접근 범위를 세분화하는 3단계 접근제어 화면. Supabase RLS 행 수준 접근제어 정책
권한 관리 및 등급별 게시판 접근제어
핵심 기능 4

강의영상 & 갤러리 게시판

유튜브 영상을 임베드하는 강의영상 게시판과 이미지 중심의 갤러리 게시판을 함께 제공하는 미디어 콘텐츠 화면. 유튜브 iframe 임베드 + 라이트박스 + 워터마크 오버레이 + 열람이력 로그
강의영상 & 갤러리 게시판
구현 과정

프로젝트 진행 단계

STEP 1

회원/권한 DB 스키마 및 RLS 정책 설계

회원 등급·게시판 타입 ERD 설계, Supabase RLS 정책 8개 정의

STEP 2

소셜로그인 및 가입승인 API 개발

카카오·네이버 OAuth 연동, pending/approved/rejected 가입 상태머신 API 구현

STEP 3

제네릭 게시판 엔진 및 프론트엔드 구현

6종 게시판 공통 컴포넌트, 강의영상·갤러리 화면 구현

STEP 4

보안 기능 및 통합 테스트

워터마크·열람이력·마스킹 적용, 권한 시나리오 및 크로스 브라우저 테스트

프로젝트 성과
제네릭 게시판 엔진 설계게시판 타입 컬럼 하나로 6종 게시판 공통 로직(댓글·첨부·북마크·신고)을 재사용하는 엔진 구조 설계
Supabase RLS 3단계 권한 정책 구축회원 등급별 게시글 조회·작성 권한을 PostgreSQL RLS 정책 8개로 세분화해 DB 레벨에서 강제하는 구조 구현
소셜로그인 승인 상태머신 설계카카오·네이버 OAuth 연동과 pending/approved/rejected 3단계 승인 상태머신을 결합한 가입 플로우 구현
워터마크·열람이력 자료보호 구조 구현canvas 오버레이 워터마크와 열람 로그 테이블을 연동해 게시물 열람 이력을 추적하는 보호 구조 설계
Review

기술적 주안점

  • 커뮤니티 피드의 좋아요·댓글·북마크·조회수 인터랙션을 Optimistic UI 패턴으로 구현하여 체감 지연 없이 처리하는 구조를 설계합니다
  • 관리자 승인 전까지 가입 상태에 따라 접근 가능한 화면을 서버 단에서 강제하는 상태 기반 접근제어를 설계합니다
  • 행 수준 보안(RLS)을 코드와 SQL 정책 양쪽에서 이중으로 검증해 권한 우회 가능성을 낮추는 접근제어 구조를 설계합니다

유사한 프로젝트를 기획하고 계신가요?

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기