개요
TheDashboard는 다양한 통계 및 차트 데이터를 제공하는 대시보드 페이지를 구현한 웹 애플리케이션입니다. 사용자는 이 대시보드에서 인보이스, 고객, 매출, 환불 사유 및 국가별 매출 등의 정보를 시각적으로 확인할 수 있습니다.
<aside>
<img src="/icons/laptop_gray.svg" alt="/icons/laptop_gray.svg" width="40px" />
기술적 스택
</aside>
| 선택 기술 |
선택이유 및 근거 |
| Next.js |
* 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 및 클라이언트 사이드 렌더링(CSR) 을 모두 지원 |
- 성능 최적화: SSR과 SSG를 활용하여 SEO(검색 엔진 최적화) 및 로딩 속도 개선
- 내장 API 라우트: 별도의 백엔드 서버 없이 API를 구축 가능
- 자동 코드 분할(Code Splitting) 및 정적 최적화로 빠른 페이지 렌더링 |
| NextAuth.js | * 인증 기능 간소화: Credentials, OAuth 등 다양한 인증 제공
- JWT 기반 인증 지원: 보안 강화
- 세션 관리 기능 제공: 별도의 백엔드 설정 없이 사용 가능
- Next.js API 라우트와 완벽한 연동 |
| Neon | * PostgreSQL 기반의 클라우드 데이터베이스 서비스
- GitHub과 연동 가능: CI/CD 파이프라인 구축 시 편리
- Vercel과 궁합이 좋음: Vercel을 통해 배포된 Next.js 앱과 원활하게 통신 가능
- Next.js API 라우트와 직접 연결하여 백엔드 없이도 데이터 조작 가능
- Vercel과 함께 사용하기 최적화되어 있어 빠른 배포 가능
- 보안과 확장성이 뛰어나므로 향후 프로젝트 확장 시 유리 |
| Tailwind CSS | * 유틸리티 클래스 기반의 CSS 프레임워크
- 인라인 스타일처럼 빠른 개발 가능
- 유지보수가 쉬운 클래스 네이밍
- 다크 모드 및 반응형 디자인 지원 |
| shadcn/ui | * Radix UI를 기반으로 한 UI 컴포넌트 라이브러리
- Tailwind CSS와 완벽하게 호환
- 접근성(Accessibility) 최적화
- 필요할 때만 설치하여 불필요한 코드가 적음 |
<aside>
<img src="/icons/code_gray.svg" alt="/icons/code_gray.svg" width="40px" />
주요 기능
</aside>
1️⃣ 사용자 인증 (NextAuth.js)
2️⃣ 데이터 관리 (PostgreSQL & Neon)
3️⃣ 반응형 UI 및 접근성 향상
4️⃣ 동적 로딩 (Suspense와 Fallback 사용)
대시보드 주요 기능
📊 홈 대시보드
- 인보이스, 고객, 매출, 환불 사유, 국가별 매출 데이터를 시각적으로 확인 가능
- 차트 및 그래프 활용으로 한눈에 핵심 정보 파악
📂 인보이스 & 고객 관리
- 사이드바 내비게이션을 통해 인보이스 및 고객 페이지 이동
- 전체 리스트 확인 및 상세 정보 조회 가능
🔍 검색 & 페이지네이션