) - 이미지, 스크립트 제거 3. YouTube 처리: - YouTube Data API v3로 자막/트랜스크립트 추출 - 자막 없는 영상: 오류 메시지 표시 - 메타데이터: 제목, 설명, 길이 4. 텍스트 처리: - 직접 저장 (최소 처리) - 최대 500,000 characters 5. 공통 후처리: - Gemini로 요약 생성 (summary 필드) - 임베딩 생성 (embedding 필드, text-embedding-004 모델) - processing_status 업데이트 - "공유" 버튼 클릭 → share_token 생성 (crypto.randomUUID()) - 공유 URL: /shared/[share_token] - 공유 페이지: 읽기 전용 3패널 뷰 (채팅 비활성, 소스/스튜디오 출력물만 조회) - 공유 취소: share_token = null, is_shared = false - AI API 실패: 재시도 (최대 3회, exponential backoff) + 사용자 에러 메시지 - 파일 업로드 실패: 토스트 알림 + 재시도 버튼 - 인포그래픽/슬라이드 생성 실패: generation_status = "failed", error_message 표시, 재생성 옵션 - 네트워크 오류: 오프라인 감지 → 배너 알림 - Rate limiting: 429 응답 시 대기 시간 표시 - 소스 임베딩 기반 관련 청크 검색 (RAG): 전체 소스 텍스트 대신 관련 부분만 AI에 전달 - 이미지 최적화: Next.js Image 컴포넌트로 Supabase Storage 이미지 최적화 서빙 - 채팅 히스토리: 커서 기반 페이지네이션 (최신 50개씩) - 노트북 목록: 무한 스크롤 (페이지당 20개) - 스튜디오 이미지: lazy loading + blur placeholder 신규 사용자 온보딩 및 첫 노트북 생성 1. /login 페이지 접속 → "Google로 계속하기" 버튼 표시 확인 2. Google 로그인 완료 → 홈(/)으로 redirect 확인 3. 사용자 아바타와 이름이 네비게이션에 표시 확인 4. 빈 상태 메시지 표시 확인 ("노트북을 만들어 시작하세요") 5. "새 노트북 만들기" 버튼 클릭 → 노트북 생성 확인 6. 노트북 상세 페이지 (/notebook/[id])로 이동 확인 7. 3패널 레이아웃 표시 확인 (출처 / 채팅 / 스튜디오) 8. 출처 패널 빈 상태 확인 ("소스를 추가하여 시작하세요") 소스 추가 및 AI 채팅 1. "+ 소스 추가" 클릭 → 소스 추가 모달 오픈 확인 2. PDF 파일 드래그&드롭 → 업로드 진행 확인 3. 소스 목록에 processing 상태 (스피너) 표시 확인 4. 처리 완료 → completed 상태 (✓ 체크) 표시 확인 5. "복사된 텍스트" 버튼 → 텍스트 입력 → 소스 추가 확인 6. 채팅 패널에 AI 요약 카드 표시 확인 7. 추천 질문 클릭 → AI 응답 스트리밍 확인 8. AI 응답에 인용([1]) 표시 확인 9. 인용 클릭 → 소스 패널에서 해당 소스 하이라이트 확인 10. "메모에 저장" 클릭 → 저장 확인 토스트 인포그래픽 생성 전체 플로우 1. 노트북에 소스 2개 이상 추가된 상태 확인 2. 스튜디오 패널 → "인포그래픽" 타일 클릭 3. 인포그래픽 맞춤설정 모달 오픈 확인 4. 언어: 한국어 / 방향: 가로 / 세부정보: 표준 선택 5. 프롬프트 입력: "파란색 테마로 핵심 통계를 강조해 줘" 6. "생성" 클릭 → 모달 닫힘, 스튜디오 목록에 "생성 중..." 표시 7. 생성 완료 → 스튜디오 목록에 인포그래픽 아이템 표시 8. 아이템 클릭 → 인포그래픽 뷰어 오픈 확인 9. 인포그래픽 이미지에 한국어 텍스트 포함 확인 10. "다운로드" 클릭 → PNG 파일 다운로드 확인 11. "편집 프롬프트" 클릭 → 추가 지시사항 입력 → 수정된 이미지 생성 확인 슬라이드 생성 및 캐러셀 뷰 1. 스튜디오 패널 → "슬라이드 자료" 타일 클릭 2. 슬라이드 맞춤설정 모달 오픈 확인 3. 형식: "발표자 슬라이드" 선택, 깊이: "기본값" 4. 프롬프트 입력 후 "생성" 클릭 5. 생성 완료 → 슬라이드 뷰어 오픈 6. 캐러셀에서 좌/우 화살표로 슬라이드 탐색 확인 7. 하단 썸네일 스트립 표시 확인 8. 각 슬라이드에 일관된 디자인 스타일 확인 9. "전체 다운로드" → ZIP 파일 다운로드 확인 10. 개별 슬라이드 재생성 기능 동작 확인 패널 리사이즈 및 키보드 단축키 1. 출처-채팅 패널 구분선 드래그 → 출처 패널 리사이즈 확인 2. 채팅-스튜디오 패널 구분선 드래그 → 스튜디오 패널 리사이즈 확인 3. Ctrl+Shift+L → 출처 패널 collapse/expand 확인 4. Ctrl+Shift+S → 스튜디오 패널 collapse/expand 확인 5. 채팅 입력에서 Enter → 메시지 전송 확인 6. 채팅 입력에서 Shift+Enter → 줄바꿈 확인 7. Ctrl+K → 글로벌 검색 오픈 확인 8. 슬라이드 뷰어에서 ←/→ → 이전/다음 슬라이드 확인 9. Esc → 모달/뷰어 닫기 확인 노트북 공유 및 접근 제어 1. 노트북 상단 "공유" 버튼 클릭 2. 공유 링크 생성 확인 (/shared/[token]) 3. 로그아웃 상태에서 공유 링크 접속 4. 읽기 전용 3패널 뷰 표시 확인 5. 채팅 입력 비활성화 확인 6. 소스 목록 조회 가능 확인 7. 스튜디오 생성 콘텐츠 조회 가능 확인 8. 원본 소유자 계정에서 공유 취소 9. 공유 링크 재접속 → 404 또는 접근 거부 확인 에러 핸들링 및 엣지 케이스 1. 10MB 초과 파일 업로드 시도 → 에러 메시지 확인 2. 잘못된 URL 소스 추가 → 처리 실패 표시 확인 3. 소스 0개 상태에서 인포그래픽 생성 시도 → disabled 상태 확인 4. 인포그래픽 생성 중 네트워크 오류 → "failed" 상태 + 재생성 옵션 확인 5. 자막 없는 YouTube URL 추가 → 에러 메시지 확인 6. 300개 소스 도달 시 추가 불가 메시지 확인 7. 다른 사용자의 노트북 URL 직접 접근 → 403 확인 8. 로그인 세션 만료 → /login redirect 확인 - Google OAuth 로그인/로그아웃이 정상 동작한다 - PDF, URL, YouTube, 텍스트 소스 추가 및 텍스트 추출이 정상 동작한다 - 소스 기반 AI 채팅이 스트리밍으로 동작하며 인용이 정확히 표시된다 - Nano Banana Pro로 인포그래픽을 3가지 방향(가로/세로/정사각형) × 3가지 세부 수준으로 생성할 수 있다 - Nano Banana Pro로 슬라이드를 2가지 형식(자세한 자료/발표자) × 2가지 깊이로 생성할 수 있다 - 생성된 인포그래픽/슬라이드를 편집 프롬프트로 수정 재생성할 수 있다 - 생성된 콘텐츠를 PNG/JPG/ZIP으로 다운로드할 수 있다 - 노트북 공유 링크가 읽기 전용으로 정상 동작한다 - RLS 정책이 사용자별 데이터를 완전히 격리한다 - 홈 페이지 초기 로드: 1.5초 이내 (LCP) - 노트북 상세 페이지 진입: 2초 이내 - AI 채팅 첫 토큰 응답: 1초 이내 (TTFB) - 인포그래픽 생성: 15초 이내 - 슬라이드 생성 (5장): 60초 이내 - 소스 추가 → 처리 완료: PDF 10MB 기준 30초 이내 - 패널 리사이즈: 지연 없이 부드럽게 동작 (60fps) - 모달 열기/닫기 애니메이션: 200ms 이내 - TypeScript strict mode, 빌드 에러 0개 - Supabase RLS 정책 100% 적용 (모든 테이블) - API Route에서 모든 AI API 호출 (클라이언트 직접 호출 0건) - 환경 변수로 모든 시크릿 관리 (하드코딩 0건) - 에러 바운더리: 모든 주요 컴포넌트에 적용 - Lighthouse Performance 점수: 90+ - 디자인 시스템 일관성: 정의된 컬러 팔레트, 타이포그래피, 스페이싱만 사용 - 반응형: 최소 1024px 데스크톱 지원 (모바일은 MVP 이후) - 접근성: WCAG 2.1 AA 명암비 준수 - 모든 모달에 애니메이션 적용 - 로딩 상태: 모든 비동기 작업에 시각적 피드백 제공 - npm run build 성공 - Vercel 배포 가능 - 환경 변수 4개만으로 동작: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY, GEMINI_API_KEY npm run build .next/ - Vercel (recommended): vercel CLI 또는 GitHub 연동 자동 배포 - 대안: Docker 컨테이너 (Node.js 20 base image) - Supabase: 클라우드 인스턴스 (supabase.com) NEXT_PUBLIC_SUPABASE_URL=https://[project-ref].supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=[anon-key] SUPABASE_SERVICE_ROLE_KEY=[service-role-key] GEMINI_API_KEY=[google-ai-studio-api-key] 1. Supabase Auth + Google OAuth 연동: 인증이 모든 기능의 기반 2. 소스 텍스트 추출 파이프라인: AI 기능의 품질을 결정 3. Nano Banana Pro API 통합: 프롬프트 엔지니어링이 결과물 품질을 결정 4. RLS 정책: 보안의 핵심, 초기부터 설정 필수 Phase 1: 기반 설정 (1-2일) 1. Next.js 프로젝트 초기화 (App Router, TypeScript, Tailwind, shadcn/ui) 2. Supabase 프로젝트 설정 (DB 스키마, RLS 정책, Storage 버킷) 3. Supabase Auth + Google OAuth 설정 + 미들웨어 4. 로그인/콜백 페이지 구현 5. 글로벌 레이아웃 (네비게이션, 사용자 메뉴) Phase 2: 노트북 & 소스 (2-3일) 6. 홈 페이지 (노트북 그리드/리스트 뷰, CRUD) 7. 노트북 상세 페이지 (3패널 리사이저블 레이아웃) 8. 출처 패널 UI (소스 목록, 체크박스, 드래그&드롭) 9. 소스 추가 모달 (파일 업로드, URL, 텍스트 입력) 10. 소스 처리 API Route (PDF 텍스트 추출, URL 크롤링) Phase 3: AI 채팅 (2일) 11. Gemini API 연동 (API Route, 스트리밍) 12. 채팅 패널 UI (메시지 목록, 스트리밍 표시, 인용) 13. 추천 질문 생성 14. 채팅 히스토리 저장 및 로드 Phase 4: 인포그래픽 & 슬라이드 - 메인 기능 (3-4일) 15. 스튜디오 패널 UI (타일 그리드, 생성 콘텐츠 목록) 16. 인포그래픽 맞춤설정 모달 UI 17. Nano Banana Pro API 연동 (인포그래픽 생성 API Route) 18. 인포그래픽 뷰어 (이미지 표시, 줌, 다운로드) 19. 슬라이드 맞춤설정 모달 UI 20. 슬라이드 생성 API Route (아웃라인 생성 → 개별 슬라이드 이미지 생성) 21. 슬라이드 캐러셀 뷰어 (탐색, 썸네일) 22. 편집 프롬프트 / 재생성 기능 Phase 5: 마무리 (1-2일) 23. 노트북 공유 기능 24. 설정 페이지 25. 키보드 단축키 26. 에러 핸들링 및 빈 상태 27. 성능 최적화 (이미지 최적화, 페이지네이션) 28. Vercel 배포 설정 ```sql -- Enable extensions CREATE EXTENSION IF NOT EXISTS "pgvector"; CREATE EXTENSION IF NOT EXISTS "uuid-ossp"; -- Users table (synced from Supabase Auth) CREATE TABLE public.users ( id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE, email TEXT NOT NULL, display_name TEXT, avatar_url TEXT, created_at TIMESTAMPTZ DEFAULT now(), updated_at TIMESTAMPTZ DEFAULT now() ); -- Notebooks CREATE TABLE public.notebooks ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES public.users(id) ON DELETE CASCADE, title TEXT NOT NULL DEFAULT '제목 없는 노트북', emoji TEXT DEFAULT '📓', description TEXT, is_shared BOOLEAN DEFAULT false, share_token TEXT UNIQUE, source_count INTEGER DEFAULT 0, created_at TIMESTAMPTZ DEFAULT now(), updated_at TIMESTAMPTZ DEFAULT now() ); CREATE INDEX idx_notebooks_user_created ON public.notebooks(user_id, created_at DESC); CREATE INDEX idx_notebooks_share_token ON public.notebooks(share_token) WHERE share_token IS NOT NULL; -- Sources CREATE TYPE source_type AS ENUM ('pdf', 'text', 'url', 'youtube', 'google_doc', 'google_slide', 'google_sheet', 'image', 'audio'); CREATE TYPE processing_status AS ENUM ('pending', 'processing', 'completed', 'failed'); CREATE TABLE public.sources ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), notebook_id UUID NOT NULL REFERENCES public.notebooks(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES public.users(id) ON DELETE CASCADE, type source_type NOT NULL, title TEXT NOT NULL, original_url TEXT, file_path TEXT, file_size INTEGER, mime_type TEXT, extracted_text TEXT, summary TEXT, embedding vector(1536), metadata JSONB DEFAULT '{}', sort_order INTEGER DEFAULT 0, is_enabled BOOLEAN DEFAULT true, processing_status processing_status DEFAULT 'pending', created_at TIMESTAMPTZ DEFAULT now(), updated_at TIMESTAMPTZ DEFAULT now() ); CREATE INDEX idx_sources_notebook_order ON public.sources(notebook_id, sort_order); CREATE INDEX idx_sources_notebook_enabled ON public.sources(notebook_id, is_enabled); CREATE INDEX idx_sources_embedding ON public.sources USING ivfflat (embedding vector_cosine_ops); -- Chat Messages CREATE TABLE public.chat_messages ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), notebook_id UUID NOT NULL REFERENCES public.notebooks(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES public.users(id) ON DELETE CASCADE, role TEXT NOT NULL CHECK (role IN ('user', 'assistant')), content TEXT NOT NULL, citations JSONB DEFAULT '[]', model TEXT, tokens_used INTEGER, created_at TIMESTAMPTZ DEFAULT now() ); CREATE INDEX idx_chat_notebook_created ON public.chat_messages(notebook_id, created_at ASC); -- Studio Outputs CREATE TYPE studio_output_type AS ENUM ('audio_overview', 'video_overview', 'mind_map', 'report', 'flashcard', 'quiz', 'infographic', 'slide_deck', 'data_table'); CREATE TYPE generation_status AS ENUM ('pending', 'generating', 'completed', 'failed'); CREATE TABLE public.studio_outputs ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), notebook_id UUID NOT NULL REFERENCES public.notebooks(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES public.users(id) ON DELETE CASCADE, type studio_output_type NOT NULL, title TEXT NOT NULL, content JSONB DEFAULT '{}', image_urls TEXT[] DEFAULT '{}', settings JSONB DEFAULT '{}', generation_status generation_status DEFAULT 'pending', error_message TEXT, source_ids UUID[] DEFAULT '{}', created_at TIMESTAMPTZ DEFAULT now(), updated_at TIMESTAMPTZ DEFAULT now() ); CREATE INDEX idx_studio_notebook_type ON public.studio_outputs(notebook_id, type, created_at DESC); -- Notes CREATE TABLE public.notes ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), notebook_id UUID NOT NULL REFERENCES public.notebooks(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES public.users(id) ON DELETE CASCADE, content TEXT NOT NULL, pinned BOOLEAN DEFAULT false, created_at TIMESTAMPTZ DEFAULT now(), updated_at TIMESTAMPTZ DEFAULT now() ); CREATE INDEX idx_notes_notebook ON public.notes(notebook_id, pinned DESC, created_at DESC); -- RLS Policies ALTER TABLE public.users ENABLE ROW LEVEL SECURITY; ALTER TABLE public.notebooks ENABLE ROW LEVEL SECURITY; ALTER TABLE public.sources ENABLE ROW LEVEL SECURITY; ALTER TABLE public.chat_messages ENABLE ROW LEVEL SECURITY; ALTER TABLE public.studio_outputs ENABLE ROW LEVEL SECURITY; ALTER TABLE public.notes ENABLE ROW LEVEL SECURITY; -- Users: own profile only CREATE POLICY users_select ON public.users FOR SELECT USING (auth.uid() = id); CREATE POLICY users_update ON public.users FOR UPDATE USING (auth.uid() = id); -- Notebooks: own notebooks + shared notebooks CREATE POLICY notebooks_select ON public.notebooks FOR SELECT USING ( user_id = auth.uid() OR (is_shared = true AND share_token IS NOT NULL) ); CREATE POLICY notebooks_insert ON public.notebooks FOR INSERT WITH CHECK (user_id = auth.uid()); CREATE POLICY notebooks_update ON public.notebooks FOR UPDATE USING (user_id = auth.uid()); CREATE POLICY notebooks_delete ON public.notebooks FOR DELETE USING (user_id = auth.uid()); -- Sources: own sources only (shared access via notebook policy) CREATE POLICY sources_select ON public.sources FOR SELECT USING (user_id = auth.uid()); CREATE POLICY sources_insert ON public.sources FOR INSERT WITH CHECK (user_id = auth.uid()); CREATE POLICY sources_update ON public.sources FOR UPDATE USING (user_id = auth.uid()); CREATE POLICY sources_delete ON public.sources FOR DELETE USING (user_id = auth.uid()); -- Chat Messages: own messages CREATE POLICY chat_select ON public.chat_messages FOR SELECT USING (user_id = auth.uid()); CREATE POLICY chat_insert ON public.chat_messages FOR INSERT WITH CHECK (user_id = auth.uid()); -- Studio Outputs: own outputs CREATE POLICY studio_select ON public.studio_outputs FOR SELECT USING (user_id = auth.uid()); CREATE POLICY studio_insert ON public.studio_outputs FOR INSERT WITH CHECK (user_id = auth.uid()); CREATE POLICY studio_update ON public.studio_outputs FOR UPDATE USING (user_id = auth.uid()); CREATE POLICY studio_delete ON public.studio_outputs FOR DELETE USING (user_id = auth.uid()); -- Notes: own notes CREATE POLICY notes_select ON public.notes FOR SELECT USING (user_id = auth.uid()); CREATE POLICY notes_insert ON public.notes FOR INSERT WITH CHECK (user_id = auth.uid()); CREATE POLICY notes_update ON public.notes FOR UPDATE USING (user_id = auth.uid()); CREATE POLICY notes_delete ON public.notes FOR DELETE USING (user_id = auth.uid()); -- Trigger: auto-update updated_at CREATE OR REPLACE FUNCTION update_updated_at() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = now(); RETURN NEW; END; $$ LANGUAGE plpgsql; CREATE TRIGGER notebooks_updated_at BEFORE UPDATE ON public.notebooks FOR EACH ROW EXECUTE FUNCTION update_updated_at(); CREATE TRIGGER sources_updated_at BEFORE UPDATE ON public.sources FOR EACH ROW EXECUTE FUNCTION update_updated_at(); CREATE TRIGGER studio_outputs_updated_at BEFORE UPDATE ON public.studio_outputs FOR EACH ROW EXECUTE FUNCTION update_updated_at(); CREATE TRIGGER notes_updated_at BEFORE UPDATE ON public.notes FOR EACH ROW EXECUTE FUNCTION update_updated_at(); -- Trigger: auto-create user profile on auth signup CREATE OR REPLACE FUNCTION handle_new_user() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.users (id, email, display_name, avatar_url) VALUES ( NEW.id, NEW.email, COALESCE(NEW.raw_user_meta_data->>'full_name', NEW.raw_user_meta_data->>'name', ''), COALESCE(NEW.raw_user_meta_data->>'avatar_url', NEW.raw_user_meta_data->>'picture', '') ) ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, display_name = EXCLUDED.display_name, avatar_url = EXCLUDED.avatar_url, updated_at = now(); RETURN NEW; END; $$ LANGUAGE plpgsql SECURITY DEFINER; CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION handle_new_user(); -- Trigger: update source_count on notebooks CREATE OR REPLACE FUNCTION update_source_count() RETURNS TRIGGER AS $$ BEGIN IF TG_OP = 'INSERT' THEN UPDATE public.notebooks SET source_count = source_count + 1 WHERE id = NEW.notebook_id; ELSIF TG_OP = 'DELETE' THEN UPDATE public.notebooks SET source_count = source_count - 1 WHERE id = OLD.notebook_id; END IF; RETURN NULL; END; $$ LANGUAGE plpgsql; CREATE TRIGGER sources_count_trigger AFTER INSERT OR DELETE ON public.sources FOR EACH ROW EXECUTE FUNCTION update_source_count(); ``` - Nano Banana Pro API 호출은 비용이 높으므로, 슬라이드 생성 시 병렬 호출 대신 순차 호출 (rate limit 고려) - 소스 텍스트 추출은 무거운 작업이므로 API Route에서 비동기 처리 + 상태 폴링 - pgvector 인덱스: ivfflat 타입, probes=10으로 설정하여 검색 속도와 정확도 균형 - 이미지 저장: Supabase Storage + CDN 캐싱 활용 - AI 응답 스트리밍: Edge Runtime + ReadableStream으로 TTFB 최소화 - 대형 노트북 (소스 100개+): 가상화 리스트 또는 페이지네이션 적용 - Unit: 유틸리티 함수, 프롬프트 빌더 함수 (Vitest) - Integration: API Route 테스트 (Supabase mock) - E2E: 핵심 플로우 (Playwright) - 로그인, 소스 추가, 채팅, 인포그래픽 생성 - Visual: Storybook으로 주요 컴포넌트 카탈로그 ``` satang/ ├── app/ │ ├── (auth)/ │ │ ├── login/page.tsx │ │ └── auth/callback/route.ts │ ├── (main)/ │ │ ├── layout.tsx # 메인 레이아웃 (네비게이션) │ │ ├── page.tsx # 홈 (노트북 목록) │ │ ├── notebook/[id]/page.tsx # 노트북 상세 (3패널) │ │ └── settings/page.tsx # 설정 │ ├── shared/[token]/page.tsx # 공유 노트북 │ ├── api/ │ │ ├── chat/route.ts # AI 채팅 (스트리밍) │ │ ├── sources/ │ │ │ ├── process/route.ts # 소스 텍스트 추출 │ │ │ └── upload/route.ts # 파일 업로드 │ │ └── studio/ │ │ ├── infographic/route.ts # 인포그래픽 생성 │ │ └── slides/route.ts # 슬라이드 생성 │ ├── layout.tsx # 루트 레이아웃 │ └── globals.css ├── components/ │ ├── ui/ # shadcn/ui 컴포넌트 │ ├── auth/ # 로그인 관련 │ ├── notebook/ # 노트북 카드, 그리드 │ ├── sources/ # 소스 패널, 모달 │ ├── chat/ # 채팅 패널, 메시지 │ ├── studio/ # 스튜디오 패널, 타일, 모달, 뷰어 │ └── shared/ # 공통 (레이아웃, 네비게이션) ├── lib/ │ ├── supabase/ │ │ ├── client.ts # 브라우저 클라이언트 │ │ ├── server.ts # 서버 클라이언트 │ │ ├── middleware.ts # Auth 미들웨어 │ │ └── types.ts # 생성된 DB 타입 │ ├── ai/ │ │ ├── gemini.ts # Gemini API 유틸 │ │ ├── nano-banana.ts # Nano Banana Pro API 유틸 │ │ └── prompts.ts # 프롬프트 템플릿 │ └── utils/ │ ├── source-processor.ts # 소스 처리 유틸 │ └── helpers.ts # 공통 헬퍼 ├── stores/ │ ├── notebook-store.ts # 노트북 상태 │ └── ui-store.ts # UI 상태 (패널 토글 등) ├── hooks/ │ ├── use-notebook.ts │ ├── use-sources.ts │ ├── use-chat.ts │ └── use-studio.ts ├── middleware.ts # Next.js 미들웨어 (Auth 보호) ├── supabase/ │ └── migrations/ # DB 마이그레이션 SQL ├── package.json ├── tsconfig.json ├── tailwind.config.ts └── next.config.ts ```