본문으로 건너뛰기
블로그 목록
개발

Next.js + Supabase로 대시보드 만들기

예약, 주문, 통계 기능을 갖춘 관리자 대시보드를 Next.js와 Supabase로 구축한 경험을 정리합니다.

프로젝트 배경

이끼 전문 브랜드 "치후"의 관리자 대시보드를 개발했습니다. 예약 관리, 주문 처리, 매출 통계 등 핵심 비즈니스 로직을 하나의 웹앱에 담아야 했습니다.

기술 선택

Next.js 선택 이유

  • App Router의 서버 컴포넌트로 초기 로딩 최적화
  • API Routes로 백엔드 로직 통합
  • Vercel 배포로 인프라 관리 최소화

    • Supabase 선택 이유

  • PostgreSQL 기반으로 관계형 데이터 처리에 적합
  • Row Level Security(RLS)로 데이터 보안
  • 실시간 구독으로 대시보드 라이브 업데이트

    • 주요 기능

    1. 예약 캘린더

  • 캘린더 뷰에서 예약 현황 한눈에 파악
  • 시간대별 슬롯 관리

    • 2. 주문 관리

  • 7단계 상태 흐름 (주문접수 → 결제확인 → 준비중 → 배송중 → 배송완료 → 구매확정 → 완료)
  • 환불/교환 처리
  • 자동 구매확정 cron job

    • 3. 매출 통계

  • recharts 라이브러리로 시각화
  • 일별/월별/기간별 매출 리포트

    • 배운 점

    Supabase JS 클라이언트가 특정 환경에서 행이 걸리는 이슈를 경험했습니다. 이를 직접 REST API 호출로 우회하는 패턴을 적용했고, 이후 다른 프로젝트에서도 유용하게 사용하고 있습니다.

    #Next.js#Supabase#TypeScript#대시보드