Flunti

만든 이유

빠르게 바뀌는 사업 방향과 수시로 추가되는 스펙·기능 요구에 대응하기 위해 만들었습니다.

코멘트

입사 후부터 계속 고도화해 오다 결국 SaaS 라는 종착점에 도달한 솔루션입니다. Flunti 사이트의 중추이며, 지금도 고도화를 이어가고 있는 프로젝트입니다.

주요 특징

• 01멀티테넌트 라우팅: URL 스코프 (/[vendor]/[workspace]) 로 기업·기관별 진입점 분리 + 미들웨어 URL 리라이팅 / 권한 분기
• 02서버 사이드 기업 정보 기반의 동적 메인 페이지·테마 (브랜드 컬러는 Material Color Utilities 로 런타임 생성)
• 03권한 그룹 (Role) 기반 기능 on/off: RoleProvider / RoleSweep / usePermission 으로 페이지·컴포넌트 단위 접근 제어
• 04TanStack Query + Next.js fetch API 통합 (serverPararellFetcher + HydrationBoundary) + 벤더 prefix query key 로 멀티테넌트 캐시 격리
• 05다양한 콘텐츠 유형 지원: 동영상 강의, 퀴즈, 프로젝트, 오프라인 코스, 세미나, 학습 로드맵
• 06관리자 어드민 (코스 / 강의 / 태그 / 콘텐츠 모더레이션 + 권한 + 수강 통계) + 콘텐츠 리셀러 B2B 입점 플로우

맡은 역할

• 01프로젝트 세팅, 구현, 아키텍처 정의
• 02proxy.ts (middleware) 를 통한 권한 · 기업 정보 · 인증 정보 fetching 및 page header 로 전달
• 03TanStack Query + Next.js fetch API 통합용 fetcher 작성, 각 페이지 fetcher 를 통한 SSR / hydration 단순화
• 04entities 단의 API 자동 생성 스크립트 작성 및 전체 적용
• 05주요 기능 구현: 로드맵 리스트 / 상세, 강의 리스트 / 상세, VOD, Quiz, Project, 게시판 (QNA / 공지사항 / FAQ) 등