SAIGO NO DANTE
Next.js 16TypeScriptTailwind CSS 4Supabase

SAIGO NO DANTE

Limbus Company 팬 아카이브 — 수감자 DB, 덱 빌더, 덱 공유를 한 곳에서.

Role

Full-Stack Developer

Period

2025.06 - Present

Stack

8 Technologies

Created

2026년 3월

Overview

프로젝트 소개

SAIGO NO DANTE(최애의 관리자)는 Limbus Company 팬 커뮤니티를 위한 종합 아카이브 웹 애플리케이션입니다. 수감자 DB, 덱 빌더, 덱 공유를 한 곳에서 제공하며, 게임 데이터를 체계적으로 정리하고 커뮤니티가 함께 소통할 수 있는 플랫폼을 목표로 개발했습니다.


주요 기능

🗃️ 수감자 도감

12인 수감자의 모든 인격, E.G.O 데이터베이스를 제공합니다. 스킬, 패시브, 스탯 정보를 상세하게 조회할 수 있습니다.

🪞 거울 던전

EGO 기프트 도감 408종을 키워드/등급 필터로 검색하고, 조합 레시피를 확인할 수 있습니다.

🃏 덱 빌더 & 공유

인격 + EGO 기프트 조합으로 나만의 덱을 빌드하고, 커뮤니티에 공유 · 추천 · 댓글 기능으로 소통할 수 있습니다.

📦 보유 현황

인격/EGO 체크리스트 기능으로 보유 현황을 관리하고, URL로 간편하게 공유할 수 있습니다.

📊 메타 분석 & 티어 리스트

인격/EGO 사용 통계 차트와 커뮤니티 투표 기반 리세마라 티어표를 제공합니다.

🎰 추출 시뮬레이터

뽑기 시뮬레이션으로 추출 확률을 체험할 수 있습니다.

🔍 전역 검색

Ctrl+K 단축키로 인격, EGO, 수감자, 키워드, EGO 기프트를 통합 검색할 수 있습니다.

🔐 구글 OAuth 인증

NextAuth.js를 통한 구글 소셜 로그인으로 별도 회원가입 없이 커뮤니티 기능을 이용할 수 있습니다.

🛡️ 관리자 패널

데이터 CRUD, 사용자/덱 관리, 감사 로그 등 운영에 필요한 관리 기능을 갖추고 있습니다.


기술적 특징

영역기술설명
FrameworkNext.js 16 (App Router)SSR/SSG 하이브리드 렌더링
LanguageTypeScript엄격한 타입 안전성
StylingTailwind CSS 4 + GSAP다크 테마 기반 반응형 UI, 스크롤 애니메이션
DatabaseSupabase (PostgreSQL)limbus 스키마, Realtime 구독
AuthNextAuth.js + GoogleOAuth 2.0 소셜 로그인
TestingPlaywrightE2E 테스트
DeployVercelEdge Runtime, ISR 캐싱

디자인 시스템

골드 & 다크 테마 기반의 커스텀 디자인 시스템을 구축했습니다.

  • 배경: #0d0b08 / 카드: #1a1510
  • 골드 액센트: #c8900a · #e8b030 · #8a6010
  • 폰트: KotraBold · PerfectDOS · SCDream · Pretendard
  • 죄악 컬러: Tailwind sin.* 커스텀 토큰 + CSS 변수

SEO & 접근성

  • 동적 OG 이미지 생성 (1200x630)
  • 자동 생성 sitemap + robots.txt
  • JSON-LD 구조화 데이터 (WebSite, Organization)
  • 페이지별 동적 메타데이터
  • Skip Navigation + ARIA 접근성
  • PWA 모바일 홈 화면 설치 지원

Gallery

SAIGO NO DANTE screenshot 1
SAIGO NO DANTE screenshot 2
SAIGO NO DANTE screenshot 3
SAIGO NO DANTE screenshot 4
SAIGO NO DANTE screenshot 5

Highlights

  • 수감자 인격 · EGO 도감
  • 거울 던전 EGO 기프트 도감 408종
  • 덱 빌더 & 커뮤니티 공유
  • 보유 현황 체크리스트
  • 메타 분석 & 티어 리스트
  • 추출 시뮬레이터
  • Ctrl+K 전역 통합 검색
  • 구글 OAuth 인증
  • 관리자 패널 (CRUD, 감사 로그)
  • PWA 지원

Tech Stack

Next.js 16TypeScriptTailwind CSS 4SupabaseGSAPNextAuthPlaywrightVercel