PDF Evidence AI
바이브코딩 완전 가이드

다음 설정을 해줘. Next.js 16 App Router + TypeScript 프로젝트야. 1. next.config.ts 설정: - serverExternalPackages: ["@napi-rs/canvas"] - webpack: canvas 관련 빌드 에러 방지 (pdfjs-dist가 캔버스를 optional로 처리) - outputFileTracingIncludes: PDF 렌더링 API 라우트에 pdfjs worker 포함 2. src/lib/types.ts 에 공통 타입 정의: - PdfPage { pageNumber, text, preview, charCount, aiSummary?, pageImageUrl? } - PdfDocument { id, fileName, pageCount, totalCharacters, pages, geminiFileUri?, geminiFileName?, geminiFileMimeType?, uploadedAt } - PdfDocumentSummary (pages에 full text 없이 preview, aiSummary만 포함) - EvidenceItem { kind: "figure"|"table"|"chart"|"text", page, title, quote, why } - AskResponse { answer, confidence: "high"|"medium"|"low", pdfSufficient, usedWeb, evidence, webSources, selectedPages, model, warning? } - WebSource { url, title, snippet } 3. src/lib/errors.ts: - safeErrorMessage(error, fallback): Error면 message 반환, 아니면 fallback 4. src/components/pdf-cache.ts: - getCachedPdfDoc(url): pdfjs-dist로 PDF 로드, 같은 URL이면 캐시 재사용 - 브라우저 전용 (client component에서만 호출)

CREATE TABLE IF NOT EXISTS users (
  id    TEXT PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  name  TEXT,
  image TEXT
);

CREATE TABLE IF NOT EXISTS pdf_sessions (
  id                    TEXT PRIMARY KEY,
  user_id               TEXT REFERENCES users(id) ON DELETE CASCADE,
  filename              TEXT NOT NULL,
  page_count            INTEGER DEFAULT 0,
  total_characters      INTEGER DEFAULT 0,
  gemini_file_uri       TEXT,
  gemini_file_name      TEXT,
  gemini_file_mime_type TEXT,
  pdf_url               TEXT,
  created_at            TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE IF NOT EXISTS pdf_pages (
  session_id      TEXT REFERENCES pdf_sessions(id) ON DELETE CASCADE,
  page_number     INTEGER,
  text_content    TEXT DEFAULT '',
  preview         TEXT DEFAULT '',
  char_count      INTEGER DEFAULT 0,
  ai_summary      TEXT,
  page_image_url  TEXT,
  PRIMARY KEY (session_id, page_number)
);

CREATE TABLE IF NOT EXISTS chat_messages (
  id         TEXT PRIMARY KEY,
  session_id TEXT REFERENCES pdf_sessions(id) ON DELETE CASCADE,
  role       TEXT NOT NULL,
  content    JSONB NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

구글 OAuth 로그인과 NeonDB 연결을 만들어줘. 1. src/auth.ts — NextAuth 설정: - Google provider 사용 - session에 user.id 포함 (callbacks.session에서 session.user.id = token.sub) - signIn 콜백에서 DB에 users upsert (upsertUser 함수 호출) - GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, NEXTAUTH_SECRET 환경변수 사용 2. src/lib/db.ts — NeonDB CRUD: - sql() helper: process.env.DATABASE_URL로 neon() 연결 - upsertUser(user): users 테이블 INSERT ON CONFLICT DO UPDATE - createSession(data): pdf_sessions INSERT - getSessionsByUser(userId): 최근 50개 세션 목록 - getSession(sessionId, userId): 세션 + 페이지 전체 조회 - getPdfUrl(sessionId, userId): pdf_url만 조회 - deleteSession(sessionId, userId): DELETE - savePdfPages(sessionId, pages[]): UNNEST batch INSERT (page_image_url 포함) - getPageImageUrl(sessionId, pageNum): page_image_url 조회 - setPageImageUrl(sessionId, pageNum, url): UPDATE - getMessages(sessionId): 채팅 메시지 목록 - saveMessage(sessionId, message): INSERT - sessionToDocument(session): FullSession → PdfDocument 변환 3. src/app/api/auth/[...nextauth]/route.ts — NextAuth API 핸들러 4. src/middleware.ts — 로그인 안 하면 /login으로 리다이렉트 (단, /login, /api/auth/* 제외) 5. src/app/login/page.tsx — 구글 로그인 버튼 페이지

PDF 업로드 처리 시스템을 만들어줘. 1. src/lib/pdf.ts — PDF 텍스트 추출: - pdfjs-dist legacy 빌드 사용 (Node.js 서버 호환) - extractPdfDocument(buffer, fileName): Buffer → PdfDocument - 각 페이지 text 추출, preview(100자), charCount 계산 - GlobalWorkerOptions.workerSrc 설정 (서버사이드) 2. src/lib/pdf-render.ts — 서버사이드 PDF 이미지 렌더링: - @napi-rs/canvas 동적 import 사용 - renderPdfPageToJpeg(buffer, pageNum, scale=2): Buffer → JPEG Buffer - renderAndUploadAllPages(buffer, sessionId, pageCount, scale=1.5): 4페이지씩 배치로 렌더링 → Vercel Blob에 업로드 → Map 반환 - pdfjs-dist canvasFactory 커스텀 구현 3. src/lib/ai.ts (일부): - uploadPdfToGemini(buffer, filename): @google/genai로 파일 업로드 → {uri, name, mimeType} - generatePageSummaries(pages, geminiFile?): 각 페이지 1~2문장 요약 생성 → Map 4. src/lib/pdf-store.ts: - pdfEvidenceStore: Map (서버 메모리 캐시) - summarizeDocument(doc): PdfDocumentSummary 반환 5. POST /api/analyze-pdf: - FormData로 PDF 파일 수신 (최대 200MB) - 병렬 처리: uploadPdfToGemini + extractPdfDocument + put(Vercel Blob) - 병렬 처리: generatePageSummaries + renderAndUploadAllPages - DB에 세션 + 페이지 저장 - { sessionId, document, warning? } 반환 6. GET /api/sessions — 내 세션 목록 POST /api/sessions — (미사용, 위에서 생성) GET /api/sessions/[id] — 세션 + 문서 정보 GET /api/sessions/[id]/pdf — PDF 바이너리 프록시 DELETE /api/sessions/[id] — 세션 삭제 GET /api/sessions/[id]/messages — 채팅 히스토리

AI 질문 답변 시스템을 SSE 스트리밍으로 만들어줘. 1. src/lib/ai.ts 완성: selectRelevantPages(question, pages, maxPages=6): - 키워드 매칭 + 텍스트 유사도로 관련 페이지 선택 - 최소 3페이지 보장 buildPdfPrompt(question, pages, geminiFile?): - 선택된 페이지 텍스트 포함한 프롬프트 구성 - 시스템 규칙 포함: 그림/표 설명 시 반드시  태그 출력 streamAnswerText(prompt, onChunk): - gemini-2.0-flash 모델로 스트리밍 생성 - systemInstruction 필수: "【필수 규칙】 너는 이미지를 직접 표시하는 것이 아니다. 그림·그래프·차트를 설명할 때는 설명 바로 위 줄에 아래 형식의 텍스트 태그를 반드시 출력하라. 이 태그는 웹 앱 프론트엔드가 해석해서 이미지를 자동 표시한다:  — N은 그림이 있는 쪽 번호(정수). 이탤릭이나 텍스트로만 대체하는 것은 금지." - 각 청크를 onChunk 콜백으로 전달 extractEvidence(answer, pages): EvidenceItem[] 추출 - answer 텍스트에서 쪽수 참조 파싱 - 해당 페이지 텍스트로 근거 항목 구성 webSearch(question): WebSource[] (선택적, 구글 Custom Search API) buildWebSupplementPrompt(question, pdfAnswer, webResults): string 2. POST /api/ask: - { documentId, question, allowWeb } 수신 - pdfEvidenceStore에서 문서 로드 (없으면 DB에서 복원) - SSE 스트림 반환 (Content-Type: text/event-stream) - 스트림 이벤트: data: {"type":"chunk","text":"..."} data: {"type":"meta","evidence":[...],"confidence":"high","pdfSufficient":true} data: {"type":"done","selectedPages":[3,5],"usedWeb":false,"model":"gemini-2.0-flash"} data: {"type":"error","message":"..."} - allowWeb=true이면 웹 검색 병행 후 답변 보강 - 완료 후 DB에 질문/답변 저장

채팅 인터페이스를 만들어줘. src/app/chat/[id]/page.tsx가 메인 페이지야. 레이아웃 (그리드 3영역): - 왼쪽 사이드바: 채팅방 목록 탭 + 페이지 목록 탭, 접고 펼치기 가능 - 가운데: 채팅 패널 (질문 입력, 메시지 스트림, 근거 카드) - 오른쪽: PDF 미리보기 패널 (pdfjs 렌더링, 줌, 페이지 네비게이션) 컴포넌트: 1. PdfViewer (src/components/PdfViewer.tsx): - pdfjs-dist 브라우저 빌드 사용 - url, page, scaleMultiplier props - 페이지 렌더링 + 드래그 팬 지원 2. PdfPageThumb (src/components/PdfPageThumb.tsx): - 200px 고정 너비 썸네일 - 클릭 시 해당 페이지로 이동 3. PdfImageCrop (src/components/PdfImageCrop.tsx): - sessionId + pdfUrl props - /api/sessions/{id}/pages/{N}/image API 시도 → 실패 시 pdfjs로 직접 렌더링 - bbox [x1,y1,x2,y2] 좌표로 canvas 크롭 4. AssistantMessage 컴포넌트: - react-markdown으로 답변 렌더링 (remarkGfm, remarkMath, rehypeKatex) - img 렌더러 커스텀: src가 "page:N"이면 PdfPageThumb으로 변환 src가 "page:N,x1,y1,x2,y2"이면 PdfImageCrop으로 변환 - 근거 카드 (EvidenceCard) 그리드 표시 - figure/chart 근거는 페이지 썸네일 이미지도 함께 표시 - 웹 출처 링크 행 5. /api/sessions/[id]/pages/[pageNum]/image: - GET: DB에서 page_image_url 확인 → 있으면 redirect - 없으면: PDF 다운로드 → 서버사이드 렌더링 → Blob 업로드 → redirect 스타일: src/app/globals.css에 CSS 변수 기반 다크/라이트 테마. Tailwind 없이 순수 CSS.

src/app/chat/page.tsx — PDF 업로드 홈 페이지를 만들어줘. 기능: 1. 드래그앤드롭 + 클릭으로 PDF 파일 선택 2. 파일 선택 후 /api/analyze-pdf로 POST (FormData) 3. 업로드 진행 상황 표시 (분석 중 스피너 + 상태 메시지) 4. 완료되면 /chat/{sessionId}로 자동 이동 5. 이전 채팅방 목록도 사이드바에 표시 6. 파일 크기 제한 안내 (200MB 이하) 7. PDF만 허용 (다른 형식 드롭 시 에러 메시지) 디자인: - 업로드 영역: 점선 테두리, 드래그 시 강조 효과 - lucide-react 아이콘 사용 - 로딩 중에는 업로드 비활성화

You are an elite frontend designer and developer. Your job is to create production-grade, visually stunning web interfaces that look like they were handcrafted by a top-tier design studio — NOT like generic AI output. Follow these design principles: - NEVER use Inter, Roboto, Arial as the only font. Use distinctive Google Fonts with display/body pairing. - Define cohesive CSS custom properties (--color-primary, --bg, etc.) - Use dominant color + sharp accent strategy. Never timid, evenly-distributed palettes. - Break out of boring centered-card layouts. Use asymmetry, negative space, grid-breaking elements. - Add depth: gradient meshes, subtle noise, layered transparencies. - Animation: staggered fade-ins, hover micro-interactions, smooth transitions. --- 이제 이 Next.js 앱의 globals.css를 전면 개선해줘: 목표: - 다크 테마 기준 (딥 네이비 배경, 따뜻한 오렌지 액센트) - 현재 레이아웃 구조는 유지하면서 시각적 품질만 올리기 - 채팅 메시지, 근거 카드, PDF 뷰어 패널, 사이드바 디자인 개선 - 로딩 스켈레톤 애니메이션 추가 - 모바일 반응형 (768px 이하에서 PDF 뷰어 숨김, 채팅만 표시) - 스크롤바 커스텀 스타일 CSS 변수 팔레트 예시: --bg: #080c18 --surface: #111827 --accent: #f97316 --text: #e8edf5 --border: #1e2d47