프로젝트 개요
단순한 정적 페이지를 넘어, 개발자의 프로젝트 경험과 기술 역량을 실시간으로 관리하고 업데이트할 수 있는 콘텐츠 관리 플랫폼입니다. 실제 서비스의 운영 환경을 모의하여 인증 기반의 어드민 대시보드를 직접 구축했으며, 클라우드 스토리지(R2)와 ORM을 활용한 데이터 흐름 최적화에 집중했습니다.
주요 기능
- 콘텐츠 대시보드: 프로젝트, 프로필, 보유 스킬에 대한 CRUD(생성·조회·수정·삭제) 기능 제공
- 보안 인증 시스템: NextAuth를 활용한 로그인 및 권한(Admin) 기반의 접근 제어
- 인터랙티브 UI: 사용자 편의를 위한 다크모드 및 반응형 디자인 지원
- 커뮤니케이션 채널: 방문자로부터 협업 및 프로젝트 제안 메시지를 수신하는 연락 기능
- 미디어 자산 관리: Cloudflare R2를 활용한 효율적인 이미지 업로드 및 최적화
프로젝트 구성원
인원1명역할풀스택 개발담당 업무
- Next.js 기반의 프론트엔드 아키텍처 설계 및 반응형 UI 구현
- Drizzle ORM을 활용한 데이터베이스 스키마 설계 및 마이그레이션
- NextAuth 및 Middleware(proxy)를 이용한 관리자 권한 보안 로직 구축
- Cloudflare R2 연동을 통한 이미지 업로드 및 관리 파이프라인 구성
사용 기술
Front-end
Next.jsReactTypeScriptTailwind CSSShadcn UI
Back-end
SupabasePostgreSQLDrizzleORM
Tools
NextAuthCloudflare R2React-Hook-FormZod
목표
- 데이터 주도형 아카이빙: 하드코딩이 아닌 DB 기반의 데이터 연동으로 유지보수 효율 극대화
- 풀스택 역량 강화: 프론트엔드부터 백엔드, 클라우드 인프라까지 서비스의 전체 생명주기 경험
- 확장성 고려: 기능 추가나 UI 변경이 용이하도록 컴포넌트 단위의 구조 설계
성과
- 운영 효율성 확보: 관리자 페이지를 통해 별도의 코드 수정 없이 실시간 포트폴리오 최신화 가능
- 데이터 무결성 검증: Zod와 React-Hook-Form을 결합하여 엄격한 데이터 유효성 검사 프로세스 확립
- 성능 최적화: Next.js의 서버 사이드 렌더링과 Cloudflare R2를 활용한 빠른 콘텐츠 로딩 실현