Next.js SaaS 대시보드 및 온보딩 플로우

다음 지침을 밀접하게 따르십시오: 1. Next.js와 shadcn 설정 2. 회원가입 및 로그인 페이지가 있는 간단한 Supabase 인증 추가 3. 다음 프롬프트에 따라 프론트엔드 설정: <frontend prompt> <summary_title> 다음 요구사항으로 상세 컴포넌트 생성: 1. 클라이언트 사이드 컴포넌트에는 'use client' 지시문 사용 2. 반응형 디자인을 위해 Tailwind CSS 유틸리티 클래스로 스타일링 3. 아이콘은 Lucide React 사용 (lucide-react 패키지). 요청되지 않은 다른 UI 라이브러리는 사용하지 말 것 4. 적절한 경우 https://t.co/kmBMYKBzp0 의 스톡 사진 사용, 존재하는 것으로 알고 있는 유효한 URL만 사용 5. https://t.co/kmBMYKBzp0 의 스톡 사진을 활성화하도록 next.config.js image remotePatterns 구성 6. 모든 페이지에 필요한 내비게이션 항목을 감싸는 루트 layout.tsx 페이지 생성 7. 내비게이션 요소 항목을 제자리에 구현해야 함 (예: 왼쪽 사이드바, 상단 헤더) 8. 필요한 그리드 레이아웃을 정확히 구현 9. 올바른 가져오기 방식 준수: - @/ 경로 별칭 사용 - 컴포넌트 가져오기 정리 유지 - 현재 src/app/page.tsx를 새로운 포괄적인 코드로 업데이트 - 루트 경로 (page.tsx) 처리를 잊지 말 것 - 멈추기 전에 전체 프롬프트를 완료해야 함 온보딩 플로우가 있는 현대적인 SaaS 대시보드 </summary_title> <image_analysis> 1. 내비게이션 요소: - 왼쪽 사이드바: Dashboard, Content, Community, Marketing, Analytics, Sales, Storefront - 하단 보조 내비게이션: Settings, Help - 사이드바 상단의 사용자 프로필 섹션 2. 레이아웃 컴포넌트: - 사이드바 너비: 240px - 메인 콘텐츠 영역: 유연한 너비 - 카드 컨테이너: 약 500px 너비 - 패딩: 24px (전체적으로 일관) - 32px 여백이 있는 반응형 컨테이너 3. 콘텐츠 섹션: - 사용자 인사말이 있는 환영 헤더 - 시작하기 체크리스트 (4단계) - 화상 통화 예약 카드 - 페이지 빌더 미리보기 카드 - 완료된 작업에 대한 진행 표시기 4. 인터랙티브 컨트롤: - 완료 상태가 있는 체크리스트 항목 - "Schedule time" 및 "Try it out" 기본 버튼 - "Learn more" 텍스트 링크 - 호버 상태가 있는 내비게이션 메뉴 항목 - 페이지 빌더의 리치 텍스트 편집기 컨트롤 5. 색상: - 기본 파란색: #0066FF (버튼) - 배경 회색: #F5F5F7 - 텍스트 진한색: #1A1A1A - 성공 초록색: #34C759 - 아바타용 액센트 색상 6. 그리드/레이아웃 구조: - 메인 콘텐츠용 단일 컬럼 레이아웃 - 카드 사이 24px 간격 - 유연한 너비 컨테이너 - 둥근 모서리(12px)가 있는 카드 그리드 시스템 </image_analysis> <development_planning> 1. 프로젝트 구조: ``` src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar │ │ ├── Header │ │ └── MainContent │ ├── features/ │ │ ├── Onboarding │ │ ├── VideoCall │ │ └── PageBuilder │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. 주요 기능: - 온보딩 체크리스트 시스템 - 화상 통화 일정 예약 - 페이지 빌더 인터페이스 - 진행 상황 추적 - 사용자 대시보드 3. 상태 관리: ```typescript interface AppState { ├── onboarding: { │ ├── steps: Step[] │ ├── completedSteps: string[] │ └── currentStep: number ├── user: { │ ├── profile: UserProfile │ ├── preferences: UserPreferences │ └── settings: UserSettings } ``` 4. 라우트: ```typescript const routes = [ ├── '/dashboard', ├── '/content/*', ├── '/community/*', ├── '/marketing/*', ├── '/analytics/*', ├── '/sales/*', └── '/storefront/*' ] ``` 5. 컴포넌트 아키텍처: - DashboardLayout (부모) - OnboardingCard (기능) - VideoCallCard (기능) - PageBuilderPreview (기능) - NavigationMenu (공유) - ActionButton (공유) 6. 반응형 중단점: ```scss $breakpoints: ( ├── 'mobile': 320px, ├── 'tablet': 768px, ├── 'desktop': 1024px, └── 'wide': 1440px ); ``` </development_planning> </frontend prompt> 4. 다음 프롬프트에 따라 페이지 구조 설정: <page structure prompt> 내비게이션 메뉴 항목을 기반으로 한 Next.js 라우트 구조 (메인 라우트 제외). 모든 라우트를 컴포넌트로 감싸야 함: 라우트: - /dashboard - /content - /community - /marketing - /analytics - /sales - /storefront - /settings - /help 페이지 구현: /dashboard: 핵심 목적: 주요 지표 개요 및 주요 기능에 대한 빠른 접근 제공 주요 컴포넌트 - 통계 카드 그리드 - 최근 활동 피드 - 빠른 작업 버튼 - 성과 그래프 - 작업 알림 레이아웃 구조 - 12컬럼 시스템 기반 그리드 레이아웃 - 모바일에서 쌓이는 반응형 카드 - 주요 지표가 있는 고정 헤더 /content: 핵심 목적: 모든 콘텐츠 자산 관리 및 구성 주요 컴포넌트 - 콘텐츠 목록 /그리드 보기 토글 - 검색 및 필터 시스템 - 콘텐츠 편집기 - 미디어 라이브러리 - 버전 기록 레이아웃 구조: - 사이드바 내비게이션이 있는 분할 보기 - 무한 스크롤이 있는 메인 콘텐츠 영역 - 편집용 모달 오버레이 /community: 핵심 목적: 사용자 상호작용 및 커뮤니티 기능 관리 주요 컴포넌트 - 회원 디렉토리 - 토론 게시판 - 중재 도구 - 사용자 신고 - 활동 로그 레이아웃 구조 - 3컬럼 레이아웃 - 접을 수 있는 사이드바 - 스크롤 가능한 메인 콘텐츠 영역 /marketing: 핵심 목적: 캠페인 관리 및 마케팅 도구 주요 컴포넌트 - 캠페인 생성기 - 이메일 템플릿 빌더 - 애널리틱스 대시보드 - 잠재 고객 세그먼트 - A/B 테스트 도구 레이아웃 구조 - 탭 인터페이스 - 편집용 분할 보기 - 미리보기 창 /analytics: 핵심 목적: 데이터 시각화 및 보고 주요 컴포넌트 - 인터랙티브 차트 - 맞춤 보고서 빌더 - 데이터 내보내기 도구 - 지표 비교 - 날짜 범위 선택기 레이아웃 구조 - 전체 너비 그래프 - 고정 필터 헤더 - 반응형 데이터 테이블 /sales: 핵심 목적: 영업 파이프라인 및 주문 관리 주요 컴포넌트 - 주문 대시보드 - 고객 프로필 - 인보이스 생성기 - 결제 처리 - 영업 보고서 레이아웃 구조 - 칸반 보드 보기 - 리스트 보기 옵션 - 상세 패널 /storefront: 핵심 목적: 이커머스 스토어 관리 주요 컴포넌트 - 제품 관리자 - 재고 관리 - 스토어 커스터마이저 - 주문 처리 - 배송 설정 레이아웃 구조 - 그리드 기반 제품 레이아웃 - 빠른 편집 사이드바 - 미리보기 모드 /settings: 핵심 목적: 시스템 구성 및 사용자 환경 설정 주요 컴포넌트 - 계정 설정 - 시스템 환경 설정 - 통합 설정 - 사용자 관리 - 보안 설정 레이아웃 구조 - 분류된 설정 패널 - 폼 기반 레이아웃 - 확인 모달 /help: 핵심 목적: 지원 문서 및 도움말 주요 컴포넌트 - 문서 검색 - FAQ 섹션 - 지원팀 문의 - 튜토리얼 비디오 - 지식 베이스 레이아웃 구조 - 검색 가능한 사이드바 - 아티클 보기 - 빠른 링크 패널 레이아웃: AdminLayout: - 적용 라우트: /help 제외한 모든 경로 - 핵심 컴포넌트 - 상단 내비게이션 바 - 사이드바 내비게이션 - 사용자 프로필 메뉴 - 알림 - 브레드크럼 - 반응형 동작 - 모바일에서 접을 수 있는 사이드바 - 작은 화면에서 내비게이션용 드롭다운 메뉴 - 조절 가능한 콘텐츠 너비 HelpLayout - 적용 라우트: /help - 핵심 컴포넌트 - 문서 사이드바 - 검색 바 - 지원 채팅 위젯 - 관리자로 돌아가기 버튼 - 반응형 동작 - 모바일에서 전체 너비 - 지원용 플로팅 액션 버튼 - 접을 수 있는 섹션 </page structure prompt>