mirror of
https://github.com/nad4-su/meeting-minutes.git
synced 2026-10-11 15:50:13 +09:00
Phase 2: 액션 아이템 + Google Docs 호환 복사 (#4)
* feat(phase-1): 저장/목록/상세 UI + 마크다운 라이브러리 + 검색 ROADMAP Phase 1 #3~#7 완료. ## Markdown 렌더링 (#6) - marked + isomorphic-dompurify 도입 - src/lib/markdown.ts 공용 유틸 (renderMarkdownToSafeHtml + markdownToPlainText) - 기존 커스텀 파서(export-minutes.ts) 교체 — 표/리스트/인용/코드블록 정상 렌더 - globals.css에 .prose-minutes 스타일 추가 ## 저장 버튼 (#3) - MinutesViewer에 📌 저장 버튼 + 상태별 피드백 - 미리보기/원문 토글 - 저장 성공 시 /meetings/[id] 상세 링크 배너 - URL.revokeObjectURL 타이밍을 setTimeout으로 지연 (Firefox/Safari 호환) ## 목록 페이지 (#4) - /meetings 서버 컴포넌트, 페이지네이션 (prev/next) - MeetingCard: 제목/날짜/템플릿 배지/참석자/태그/preview - 빈 상태 UI (검색 결과 없음 / 첫 녹음 안내) - preview는 markdown → plain text 변환 후 160자로 자르기 ## 상세 페이지 + 편집 (#5) - /meetings/[id] 서버 컴포넌트 + 클라이언트 편집 island - 제목/본문/참석자/태그 인라인 편집 - 편집 모드에서 좌(textarea) · 우(live preview) 분할 - 삭제 버튼 (confirm) - 원본 transcript는 <details>로 접어둠 ## 검색 (#7) - MeetingSearchBar 클라이언트 컴포넌트 - 300ms debounce + useTransition + URL query 동기화 (replace, scroll false) - 서버에서 ILIKE contains로 title/transcript/markdown 검색 - tsvector GIN 인덱스는 후속 최적화로 분리 (개인용 규모에서 ILIKE 충분) ## Prisma 7 호환 - @prisma/adapter-pg + pg 추가 (driver adapter 필수) - generator를 prisma-client-js로 전환 (안정적 레거시) - src/lib/db.ts에 PrismaPg 어댑터 사용 + DATABASE_URL 누락 시 placeholder로 fallback - DB 접근 페이지/라우트에 export const dynamic = 'force-dynamic' 추가 (Next 16 pre-render 시 Prisma 초기화 회피) - Dockerfile에서 src/generated 복사 제거, .gitignore도 정리 ## UX - 메인 페이지 우상단 "📚 저장된 회의록" 링크 추가 ## 테스트 - src/__tests__/markdown.test.ts 9개 신규 (렌더/sanitize/plain text) - 전체: 80 tests passing (이전 71 + 9) * docs: PR#2 본문 드래프트 추가 * feat(phase-1.5): 웹에서 Gemini API 키 설정 (LocalStorage) .env를 만지지 않고도 브라우저에서 키를 설정·관리할 수 있게 함. 개인용 단일 인스턴스 가정으로 LocalStorage만 사용 (DB 미관여). ## 구조 - src/lib/api-keys.ts (서버): resolveGeminiApiKey() 우선순위 요청 body 키 → process.env.GEMINI_API_KEY → null - src/lib/api-key-storage.ts (클라이언트): get/set/clear/maskApiKey - /api/settings/status: 환경변수 키 존재 여부만 노출 (값 X) - /api/settings/test: 키로 짧은 Gemini 호출 → 200/401/403/429 분류 - /settings 페이지: 입력/저장/삭제/마스킹 표시/테스트 호출 ## 라우트 변경 - /api/summarize, /api/summarize-live가 body.apiKey 수용 - 키 없을 때 summarize는 단순 변환으로 폴백 (UX 보존) - summarize-live는 503 + 안내 메시지 (라이브 요약은 키 필수) ## UI - 메인 헤더에 ⚙️ 설정 링크 추가 - 설정 페이지에 현재 키 소스 배지 (브라우저 / 환경변수 / 없음) - 보이기/숨기기 토글, 테스트 호출 버튼, 보안 안내 ## 테스트 - api-keys.test.ts: 7개 (요청>env, 공백 처리, env 미설정 시 null) - api-key-storage.test.ts: 7개 (LocalStorage CRUD + 마스킹) - 전체: 94 tests (이전 80 + 14) ## 비목표 (개인용 가정) - 다중 사용자 / 권한 - DB 영속화 / 키 암호화 * docs: PR#3 본문 드래프트 추가 * feat(phase-2): 액션 아이템 추출/체크리스트 + Google Docs 호환 복사 ## 액션 아이템 (ROADMAP #8~#11) ROADMAP의 Gemini JSON 출력 대신 마크다운 체크박스 휴리스틱 채택. 모든 템플릿이 이미 - [ ] 형식 출력하므로 Gemini 호출 비용 0. ### Schema - ActionItem 테이블 추가 (Meeting 1:N, cascade delete) - 필드: id, meetingId, task, isDone, position, createdAt, updatedAt - 인덱스: (meetingId, position) / isDone - 마이그레이션 20260428071709_add_action_items ### 추출 (src/lib/action-items.ts) - /^\s*[-*]\s+\[(x|X|\s)\]\s+(.+)/ 매칭 - 빈/짧은(<2자)/점만(...) task 노이즈 제거 - 들여쓰기/대문자 X 모두 허용 - 단위 테스트 8개 ### API - POST /api/meetings: 마크다운에서 액션 아이템 자동 추출 후 함께 저장 - GET /api/meetings (목록): _count로 미완료 액션 카운트 포함 - GET /api/meetings/[id] (상세): actionItems include - PATCH /api/action-items/[id]: isDone 토글, task 수정 - DELETE /api/action-items/[id] - POST /api/meetings/[id]/reparse-action-items: 마크다운 재파싱으로 교체 ### UI - ActionItemList 컴포넌트: 체크박스 + 낙관적 업데이트 + 진행률(완료/전체) + 개별 삭제 (hover ✕) + 🔄 재추출 버튼 - MeetingDetail에 통합 (조회 모드에서만 노출, 편집 중에는 숨김) - MeetingCard에 미완료 카운트 배지 (✅ N 미완료) - /meetings 상단에 "내 미완료 액션 (최근 5)" 위젯 ### 비목표 (이번 단계) - assignee/dueDate 필드 — Gemini JSON 모드 도입 시 추가 - 홈 페이지 대시보드 승격 — 녹음 흐름 보존이 우선 ## Google Docs 호환 복사 - src/lib/markdown.ts: copyMarkdownAsRichText() - ClipboardItem({text/html, text/plain}) 우선 - 미지원 브라우저는 contenteditable + execCommand 폴백 - MinutesViewer / MeetingDetail에 📋 Docs용 버튼 추가 - 기존 .md 복사는 📋 .md로 분리 라벨링 - 다운로드 버튼은 ⬇ 접두로 구분 ## 테스트 - action-items.test.ts: 8개 (다양한 마크다운 패턴) - 전체: 102 tests passing (이전 94 + 8) * docs: PR#4 본문 드래프트 추가
This commit is contained in:
40 files changed
+3153
-155
No files matched your search
@@ -0,0 +1,31 @@
|
||||
export interface ParsedActionItem {
|
||||
task: string
|
||||
isDone: boolean
|
||||
}
|
||||
|
||||
const CHECKBOX_LINE = /^\s*[-*]\s+\[(x|X|\s)\]\s+(.+)\s*$/
|
||||
|
||||
/**
|
||||
* 마크다운 텍스트에서 GFM 체크박스 줄(- [ ] / - [x])을 추출.
|
||||
* "## 액션 아이템" 같은 섹션 안에 있든 어디 있든 모두 수집.
|
||||
*
|
||||
* 빈 task / 매우 짧은 task("none", "...")는 제외하여 노이즈 감소.
|
||||
*/
|
||||
export function parseActionItems(markdown: string): ParsedActionItem[] {
|
||||
if (!markdown) return []
|
||||
|
||||
const items: ParsedActionItem[] = []
|
||||
for (const line of markdown.split('\n')) {
|
||||
const match = line.match(CHECKBOX_LINE)
|
||||
if (!match) continue
|
||||
|
||||
const checked = match[1].toLowerCase() === 'x'
|
||||
const task = match[2].trim()
|
||||
if (task.length === 0) continue
|
||||
if (task.length < 2) continue
|
||||
if (/^[.…]+$/.test(task)) continue
|
||||
|
||||
items.push({ task, isDone: checked })
|
||||
}
|
||||
return items
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
'use client'
|
||||
|
||||
const STORAGE_KEY = 'meeting-minutes:gemini-api-key'
|
||||
|
||||
export function getStoredApiKey(): string | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
try {
|
||||
const value = window.localStorage.getItem(STORAGE_KEY)
|
||||
return value && value.length > 0 ? value : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export function setStoredApiKey(key: string): void {
|
||||
if (typeof window === 'undefined') return
|
||||
try {
|
||||
window.localStorage.setItem(STORAGE_KEY, key)
|
||||
} catch {
|
||||
// ignore storage errors (private mode, quota)
|
||||
}
|
||||
}
|
||||
|
||||
export function clearStoredApiKey(): void {
|
||||
if (typeof window === 'undefined') return
|
||||
try {
|
||||
window.localStorage.removeItem(STORAGE_KEY)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
export function maskApiKey(key: string): string {
|
||||
if (key.length <= 8) return '••••'
|
||||
return `${key.slice(0, 4)}••••${key.slice(-4)}`
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Gemini API 키 해석 우선순위:
|
||||
* 1) 요청 body로 전달된 키 (브라우저 LocalStorage에서 옴)
|
||||
* 2) process.env.GEMINI_API_KEY (서버 환경변수 fallback)
|
||||
* 3) null
|
||||
*/
|
||||
export function resolveGeminiApiKey(
|
||||
requestApiKey?: string | null | undefined,
|
||||
): string | null {
|
||||
const fromRequest = typeof requestApiKey === 'string' ? requestApiKey.trim() : ''
|
||||
if (fromRequest.length > 0) return fromRequest
|
||||
|
||||
const fromEnv = (process.env.GEMINI_API_KEY ?? '').trim()
|
||||
if (fromEnv.length > 0) return fromEnv
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export function isEnvKeyConfigured(): boolean {
|
||||
return (process.env.GEMINI_API_KEY ?? '').trim().length > 0
|
||||
}
|
||||
+14
-2
@@ -1,11 +1,23 @@
|
||||
import { PrismaClient } from '@/generated/prisma/client'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import { PrismaPg } from '@prisma/adapter-pg'
|
||||
|
||||
const globalForPrisma = globalThis as unknown as {
|
||||
prisma?: PrismaClient
|
||||
}
|
||||
|
||||
function createPrismaClient(): PrismaClient {
|
||||
const connectionString =
|
||||
process.env.DATABASE_URL ??
|
||||
'postgresql://placeholder:placeholder@localhost:5432/placeholder'
|
||||
const adapter = new PrismaPg({ connectionString })
|
||||
return new PrismaClient({
|
||||
adapter,
|
||||
log: process.env.NODE_ENV === 'development' ? ['warn', 'error'] : ['error'],
|
||||
})
|
||||
}
|
||||
|
||||
export const prisma: PrismaClient =
|
||||
globalForPrisma.prisma ?? new PrismaClient()
|
||||
globalForPrisma.prisma ?? createPrismaClient()
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
globalForPrisma.prisma = prisma
|
||||
|
||||
+37
-23
@@ -1,22 +1,11 @@
|
||||
import { renderMarkdownToSafeHtml } from './markdown'
|
||||
|
||||
export function exportAsMarkdown(markdown: string): Blob {
|
||||
return new Blob([markdown], { type: 'text/markdown;charset=utf-8' })
|
||||
}
|
||||
|
||||
export function exportAsHtml(markdown: string, title: string): string {
|
||||
const lines = markdown.split('\n')
|
||||
const bodyHtml = lines
|
||||
.map((line) => {
|
||||
if (line.startsWith('# ')) return `<h1>${escapeHtml(line.slice(2))}</h1>`
|
||||
if (line.startsWith('## ')) return `<h2>${escapeHtml(line.slice(3))}</h2>`
|
||||
if (line.startsWith('### ')) return `<h3>${escapeHtml(line.slice(4))}</h3>`
|
||||
if (line.startsWith('---')) return '<hr>'
|
||||
if (line.startsWith('- ')) return `<li>${escapeHtml(line.slice(2))}</li>`
|
||||
if (line.startsWith('**') && line.endsWith('**'))
|
||||
return `<p><strong>${escapeHtml(line.slice(2, -2))}</strong></p>`
|
||||
if (line.trim() === '') return ''
|
||||
return `<p>${escapeHtml(line)}</p>`
|
||||
})
|
||||
.join('\n')
|
||||
const body = renderMarkdownToSafeHtml(markdown)
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
@@ -26,22 +15,47 @@ export function exportAsHtml(markdown: string, title: string): string {
|
||||
<title>${escapeHtml(title)}</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans KR', Arial, sans-serif;
|
||||
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
line-height: 1.7;
|
||||
color: #1f2937;
|
||||
}
|
||||
h1 { font-size: 1.8rem; border-bottom: 2px solid #333; padding-bottom: 0.5rem; }
|
||||
h2 { font-size: 1.4rem; color: #555; margin-top: 1.5rem; }
|
||||
hr { border: none; border-top: 1px solid #ddd; margin: 1.5rem 0; }
|
||||
p { margin: 0.5rem 0; }
|
||||
li { margin: 0.3rem 0; }
|
||||
h1 { font-size: 1.9rem; border-bottom: 2px solid #1f2937; padding-bottom: 0.5rem; margin-top: 0; }
|
||||
h2 { font-size: 1.4rem; color: #374151; margin-top: 2rem; }
|
||||
h3 { font-size: 1.15rem; color: #4b5563; margin-top: 1.5rem; }
|
||||
hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }
|
||||
p { margin: 0.75rem 0; }
|
||||
ul, ol { margin: 0.5rem 0; padding-left: 1.5rem; }
|
||||
li { margin: 0.25rem 0; }
|
||||
li > input[type="checkbox"] { margin-right: 0.4rem; }
|
||||
code {
|
||||
background: #f3f4f6;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
pre {
|
||||
background: #f9fafb;
|
||||
padding: 0.9rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
pre code { background: none; padding: 0; }
|
||||
blockquote {
|
||||
border-left: 4px solid #d1d5db;
|
||||
margin: 0.75rem 0;
|
||||
padding: 0.25rem 0 0.25rem 1rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
table { border-collapse: collapse; margin: 0.75rem 0; }
|
||||
th, td { border: 1px solid #e5e7eb; padding: 0.4rem 0.75rem; }
|
||||
th { background: #f9fafb; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${bodyHtml}
|
||||
${body}
|
||||
</body>
|
||||
</html>`
|
||||
}
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
import { marked } from 'marked'
|
||||
import DOMPurify from 'isomorphic-dompurify'
|
||||
|
||||
marked.setOptions({
|
||||
gfm: true,
|
||||
breaks: true,
|
||||
})
|
||||
|
||||
export function renderMarkdownToSafeHtml(markdown: string): string {
|
||||
if (!markdown) return ''
|
||||
const rawHtml = marked.parse(markdown) as string
|
||||
return DOMPurify.sanitize(rawHtml, {
|
||||
USE_PROFILES: { html: true },
|
||||
})
|
||||
}
|
||||
|
||||
export function markdownToPlainText(markdown: string, maxLength = 160): string {
|
||||
const html = marked.parse(markdown) as string
|
||||
const stripped = html
|
||||
.replace(/<[^>]+>/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim()
|
||||
if (stripped.length <= maxLength) return stripped
|
||||
return stripped.slice(0, maxLength) + '...'
|
||||
}
|
||||
|
||||
/**
|
||||
* 마크다운 → 클립보드에 (text/html + text/plain) 복사.
|
||||
* Google Docs / Notion / Word 등에 붙여넣으면 서식이 유지됨.
|
||||
*
|
||||
* @returns true 복사 성공, false fallback도 실패 시
|
||||
*/
|
||||
export async function copyMarkdownAsRichText(
|
||||
markdown: string,
|
||||
): Promise<boolean> {
|
||||
if (typeof navigator === 'undefined' || !markdown) return false
|
||||
|
||||
const html = renderMarkdownToSafeHtml(markdown)
|
||||
const wrappedHtml = `<div>${html}</div>`
|
||||
|
||||
try {
|
||||
if ('clipboard' in navigator && 'write' in navigator.clipboard) {
|
||||
const ClipboardItemRef = (window as unknown as { ClipboardItem?: typeof ClipboardItem }).ClipboardItem
|
||||
if (ClipboardItemRef) {
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItemRef({
|
||||
'text/html': new Blob([wrappedHtml], { type: 'text/html' }),
|
||||
'text/plain': new Blob([markdown], { type: 'text/plain' }),
|
||||
}),
|
||||
])
|
||||
return true
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// fall through to legacy path
|
||||
}
|
||||
|
||||
// Fallback: 임시 contenteditable로 execCommand
|
||||
try {
|
||||
const container = document.createElement('div')
|
||||
container.contentEditable = 'true'
|
||||
container.style.position = 'fixed'
|
||||
container.style.opacity = '0'
|
||||
container.style.pointerEvents = 'none'
|
||||
container.innerHTML = wrappedHtml
|
||||
document.body.appendChild(container)
|
||||
const range = document.createRange()
|
||||
range.selectNodeContents(container)
|
||||
const selection = window.getSelection()
|
||||
selection?.removeAllRanges()
|
||||
selection?.addRange(range)
|
||||
const ok = document.execCommand('copy')
|
||||
selection?.removeAllRanges()
|
||||
container.remove()
|
||||
return ok
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user