mirror of
https://github.com/nad4-su/meeting-minutes.git
synced 2026-08-12 22:33:25 +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:
@@ -0,0 +1,69 @@
|
||||
import { NextRequest } from 'next/server'
|
||||
import { prisma } from '@/lib/db'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
interface RouteContext {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
export async function PATCH(request: NextRequest, context: RouteContext) {
|
||||
try {
|
||||
const { id } = await context.params
|
||||
const body = await request.json().catch(() => ({}))
|
||||
const { isDone, task } = body
|
||||
|
||||
const data: Record<string, unknown> = {}
|
||||
if (typeof isDone === 'boolean') data.isDone = isDone
|
||||
if (typeof task === 'string' && task.trim().length > 0) {
|
||||
data.task = task.trim()
|
||||
}
|
||||
|
||||
if (Object.keys(data).length === 0) {
|
||||
return Response.json(
|
||||
{ error: '수정할 내용이 없습니다.' },
|
||||
{ status: 400 },
|
||||
)
|
||||
}
|
||||
|
||||
try {
|
||||
const item = await prisma.actionItem.update({
|
||||
where: { id },
|
||||
data,
|
||||
})
|
||||
return Response.json(item)
|
||||
} catch {
|
||||
return Response.json(
|
||||
{ error: '액션 아이템을 찾을 수 없습니다.' },
|
||||
{ status: 404 },
|
||||
)
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : '알 수 없는 오류'
|
||||
return Response.json(
|
||||
{ error: `액션 아이템 수정 실패: ${message}` },
|
||||
{ status: 500 },
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(_request: NextRequest, context: RouteContext) {
|
||||
try {
|
||||
const { id } = await context.params
|
||||
try {
|
||||
await prisma.actionItem.delete({ where: { id } })
|
||||
return new Response(null, { status: 204 })
|
||||
} catch {
|
||||
return Response.json(
|
||||
{ error: '액션 아이템을 찾을 수 없습니다.' },
|
||||
{ status: 404 },
|
||||
)
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : '알 수 없는 오류'
|
||||
return Response.json(
|
||||
{ error: `액션 아이템 삭제 실패: ${message}` },
|
||||
{ status: 500 },
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { NextRequest } from 'next/server'
|
||||
import { prisma } from '@/lib/db'
|
||||
import { parseActionItems } from '@/lib/action-items'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
interface RouteContext {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
/**
|
||||
* 마크다운에서 액션 아이템을 다시 추출하여 기존 항목을 모두 교체.
|
||||
* 사용자가 수동으로 트리거할 때만 호출됨 (PUT은 자동 재파싱하지 않음).
|
||||
*/
|
||||
export async function POST(_request: NextRequest, context: RouteContext) {
|
||||
try {
|
||||
const { id } = await context.params
|
||||
|
||||
const meeting = await prisma.meeting.findUnique({
|
||||
where: { id },
|
||||
select: { id: true, markdownMinutes: true },
|
||||
})
|
||||
|
||||
if (!meeting) {
|
||||
return Response.json(
|
||||
{ error: '회의록을 찾을 수 없습니다.' },
|
||||
{ status: 404 },
|
||||
)
|
||||
}
|
||||
|
||||
const parsed = parseActionItems(meeting.markdownMinutes ?? '')
|
||||
|
||||
await prisma.$transaction([
|
||||
prisma.actionItem.deleteMany({ where: { meetingId: id } }),
|
||||
prisma.actionItem.createMany({
|
||||
data: parsed.map((item, index) => ({
|
||||
meetingId: id,
|
||||
task: item.task,
|
||||
isDone: item.isDone,
|
||||
position: index,
|
||||
})),
|
||||
}),
|
||||
])
|
||||
|
||||
const items = await prisma.actionItem.findMany({
|
||||
where: { meetingId: id },
|
||||
orderBy: { position: 'asc' },
|
||||
})
|
||||
|
||||
return Response.json({ actionItems: items, replaced: parsed.length })
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : '알 수 없는 오류'
|
||||
return Response.json(
|
||||
{ error: `액션 아이템 재추출 실패: ${message}` },
|
||||
{ status: 500 },
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import { NextRequest } from 'next/server'
|
||||
import { prisma } from '@/lib/db'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
interface RouteContext {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
@@ -8,7 +10,12 @@ interface RouteContext {
|
||||
export async function GET(_request: NextRequest, context: RouteContext) {
|
||||
try {
|
||||
const { id } = await context.params
|
||||
const meeting = await prisma.meeting.findUnique({ where: { id } })
|
||||
const meeting = await prisma.meeting.findUnique({
|
||||
where: { id },
|
||||
include: {
|
||||
actionItems: { orderBy: { position: 'asc' } },
|
||||
},
|
||||
})
|
||||
|
||||
if (!meeting) {
|
||||
return Response.json(
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import { NextRequest } from 'next/server'
|
||||
import { prisma } from '@/lib/db'
|
||||
import { parseActionItems } from '@/lib/action-items'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
const DEFAULT_LIMIT = 20
|
||||
const MAX_LIMIT = 100
|
||||
@@ -40,6 +43,9 @@ export async function GET(request: NextRequest) {
|
||||
template: true,
|
||||
summaryMode: true,
|
||||
status: true,
|
||||
_count: {
|
||||
select: { actionItems: { where: { isDone: false } } },
|
||||
},
|
||||
},
|
||||
}),
|
||||
prisma.meeting.count({ where }),
|
||||
@@ -89,6 +95,8 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
}
|
||||
|
||||
const parsed = parseActionItems(markdownMinutes)
|
||||
|
||||
const meeting = await prisma.meeting.create({
|
||||
data: {
|
||||
title: title.trim(),
|
||||
@@ -105,7 +113,15 @@ export async function POST(request: NextRequest) {
|
||||
? tags.filter((t) => typeof t === 'string')
|
||||
: [],
|
||||
status: 'COMPLETED',
|
||||
actionItems: {
|
||||
create: parsed.map((item, index) => ({
|
||||
task: item.task,
|
||||
isDone: item.isDone,
|
||||
position: index,
|
||||
})),
|
||||
},
|
||||
},
|
||||
include: { actionItems: true },
|
||||
})
|
||||
|
||||
return Response.json(meeting, { status: 201 })
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import { isEnvKeyConfigured } from '@/lib/api-keys'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export async function GET() {
|
||||
return Response.json({
|
||||
envConfigured: isEnvKeyConfigured(),
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { NextRequest } from 'next/server'
|
||||
import { resolveGeminiApiKey } from '@/lib/api-keys'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
const TEST_PROMPT = '"OK"라고만 한 단어로 답하세요.'
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json().catch(() => ({}))
|
||||
const apiKey = resolveGeminiApiKey(body.apiKey)
|
||||
|
||||
if (!apiKey) {
|
||||
return Response.json(
|
||||
{
|
||||
ok: false,
|
||||
error: '키가 비어 있습니다.',
|
||||
},
|
||||
{ status: 400 },
|
||||
)
|
||||
}
|
||||
|
||||
const url =
|
||||
'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent'
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-goog-api-key': apiKey,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
contents: [{ parts: [{ text: TEST_PROMPT }] }],
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text().catch(() => '')
|
||||
const message =
|
||||
response.status === 400
|
||||
? '잘못된 API 키 형식입니다.'
|
||||
: response.status === 403
|
||||
? '권한이 거부되었습니다. 키를 확인해주세요.'
|
||||
: response.status === 429
|
||||
? '요청 한도를 초과했지만 키 자체는 유효해 보입니다.'
|
||||
: `Gemini API 오류: ${response.status}`
|
||||
return Response.json(
|
||||
{
|
||||
ok: false,
|
||||
error: message,
|
||||
detail: errorText.slice(0, 200),
|
||||
},
|
||||
{ status: 200 },
|
||||
)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
const reply: string =
|
||||
data?.candidates?.[0]?.content?.parts?.[0]?.text?.trim() ?? ''
|
||||
|
||||
return Response.json({
|
||||
ok: true,
|
||||
message: '키가 정상적으로 동작합니다.',
|
||||
reply: reply.slice(0, 50),
|
||||
})
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : '알 수 없는 오류'
|
||||
return Response.json(
|
||||
{ ok: false, error: `테스트 중 오류: ${message}` },
|
||||
{ status: 500 },
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { NextRequest } from 'next/server'
|
||||
import { generateLiveSummary } from '@/lib/live-summary'
|
||||
import { resolveGeminiApiKey } from '@/lib/api-keys'
|
||||
import type { SummaryDepth, TemplateId } from '@/lib/templates'
|
||||
|
||||
const MAX_TRANSCRIPT_CHARS = 40_000
|
||||
@@ -7,7 +8,7 @@ const MAX_TRANSCRIPT_CHARS = 40_000
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json()
|
||||
const { transcript, template, depth, customPrompt } = body
|
||||
const { transcript, template, depth, customPrompt, apiKey } = body
|
||||
|
||||
if (!transcript || typeof transcript !== 'string') {
|
||||
return Response.json(
|
||||
@@ -16,10 +17,13 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
}
|
||||
|
||||
const apiKey = process.env.GEMINI_API_KEY ?? ''
|
||||
if (!apiKey) {
|
||||
const resolvedKey = resolveGeminiApiKey(apiKey)
|
||||
if (!resolvedKey) {
|
||||
return Response.json(
|
||||
{ error: 'Gemini API 키가 설정되지 않았습니다.' },
|
||||
{
|
||||
error:
|
||||
'Gemini API 키가 설정되지 않았습니다. /settings에서 키를 입력해주세요.',
|
||||
},
|
||||
{ status: 503 },
|
||||
)
|
||||
}
|
||||
@@ -30,7 +34,7 @@ export async function POST(request: NextRequest) {
|
||||
: transcript
|
||||
|
||||
const result = await generateLiveSummary(truncated, {
|
||||
apiKey,
|
||||
apiKey: resolvedKey,
|
||||
template: (template as TemplateId | undefined) ?? 'meeting',
|
||||
depth: depth as SummaryDepth | undefined,
|
||||
customPrompt:
|
||||
|
||||
@@ -3,13 +3,22 @@ import {
|
||||
generateGeminiMinutes,
|
||||
generateSimpleMinutes,
|
||||
} from '@/lib/minutes-generator'
|
||||
import { resolveGeminiApiKey } from '@/lib/api-keys'
|
||||
import type { SummaryDepth, TemplateId } from '@/lib/templates'
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json()
|
||||
const { title, transcript, mode, date, template, depth, customPrompt } =
|
||||
body
|
||||
const {
|
||||
title,
|
||||
transcript,
|
||||
mode,
|
||||
date,
|
||||
template,
|
||||
depth,
|
||||
customPrompt,
|
||||
apiKey,
|
||||
} = body
|
||||
|
||||
if (!transcript || typeof transcript !== 'string') {
|
||||
return Response.json(
|
||||
@@ -29,8 +38,18 @@ export async function POST(request: NextRequest) {
|
||||
}
|
||||
|
||||
if (mode === 'gemini') {
|
||||
const apiKey = process.env.GEMINI_API_KEY ?? ''
|
||||
const result = await generateGeminiMinutes(input, { apiKey })
|
||||
const resolvedKey = resolveGeminiApiKey(apiKey)
|
||||
if (!resolvedKey) {
|
||||
const fallback = generateSimpleMinutes(input)
|
||||
return Response.json({
|
||||
markdown: fallback,
|
||||
mode: 'simple',
|
||||
warning:
|
||||
'Gemini API 키가 설정되지 않아 단순 변환으로 대체되었습니다. /settings에서 키를 설정하세요.',
|
||||
})
|
||||
}
|
||||
|
||||
const result = await generateGeminiMinutes(input, { apiKey: resolvedKey })
|
||||
|
||||
if (!result.success) {
|
||||
const fallback = generateSimpleMinutes(input)
|
||||
|
||||
+94
-8
@@ -12,15 +12,101 @@
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.prose-minutes h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
color: #111827;
|
||||
}
|
||||
.prose-minutes h2 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
.prose-minutes h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 1.25rem 0 0.5rem;
|
||||
color: #374151;
|
||||
}
|
||||
.prose-minutes p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.prose-minutes ul {
|
||||
list-style: disc;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.prose-minutes ol {
|
||||
list-style: decimal;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.prose-minutes li {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.prose-minutes li > input[type='checkbox'] {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.prose-minutes blockquote {
|
||||
border-left: 3px solid #d1d5db;
|
||||
padding-left: 0.75rem;
|
||||
color: #6b7280;
|
||||
margin: 0.75rem 0;
|
||||
font-style: italic;
|
||||
}
|
||||
.prose-minutes code {
|
||||
background: #f3f4f6;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
}
|
||||
.prose-minutes pre {
|
||||
background: #f9fafb;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
.prose-minutes pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
.prose-minutes hr {
|
||||
border: none;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
.prose-minutes strong {
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
.prose-minutes a {
|
||||
color: #7c3aed;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.prose-minutes table {
|
||||
border-collapse: collapse;
|
||||
margin: 0.75rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
.prose-minutes th,
|
||||
.prose-minutes td {
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 0.4rem 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
.prose-minutes th {
|
||||
background: #f9fafb;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import { prisma } from '@/lib/db'
|
||||
import { MeetingDetail } from '@/components/meeting/MeetingDetail'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
export default async function MeetingDetailPage({ params }: PageProps) {
|
||||
const { id } = await params
|
||||
const meeting = await prisma.meeting.findUnique({
|
||||
where: { id },
|
||||
include: {
|
||||
actionItems: { orderBy: { position: 'asc' } },
|
||||
},
|
||||
})
|
||||
|
||||
if (!meeting) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return (
|
||||
<MeetingDetail
|
||||
meeting={{
|
||||
id: meeting.id,
|
||||
title: meeting.title,
|
||||
createdAt: meeting.createdAt.toISOString(),
|
||||
updatedAt: meeting.updatedAt.toISOString(),
|
||||
markdownMinutes: meeting.markdownMinutes,
|
||||
rawTranscript: meeting.rawTranscript,
|
||||
template: meeting.template,
|
||||
summaryMode: meeting.summaryMode,
|
||||
depth: meeting.depth,
|
||||
attendees: meeting.attendees,
|
||||
tags: meeting.tags,
|
||||
actionItems: meeting.actionItems.map((a) => ({
|
||||
id: a.id,
|
||||
task: a.task,
|
||||
isDone: a.isDone,
|
||||
})),
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
import Link from 'next/link'
|
||||
import { prisma } from '@/lib/db'
|
||||
import { MeetingCard } from '@/components/meeting/MeetingCard'
|
||||
import { MeetingSearchBar } from '@/components/meeting/MeetingSearchBar'
|
||||
import { markdownToPlainText } from '@/lib/markdown'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
interface PageProps {
|
||||
searchParams: Promise<{ q?: string; limit?: string; offset?: string }>
|
||||
}
|
||||
|
||||
const DEFAULT_LIMIT = 20
|
||||
|
||||
export default async function MeetingsPage({ searchParams }: PageProps) {
|
||||
const params = await searchParams
|
||||
const q = params.q?.trim() ?? ''
|
||||
const limit = Math.min(
|
||||
100,
|
||||
Math.max(1, Number(params.limit) || DEFAULT_LIMIT),
|
||||
)
|
||||
const offset = Math.max(0, Number(params.offset) || 0)
|
||||
|
||||
const where = q
|
||||
? {
|
||||
OR: [
|
||||
{ title: { contains: q, mode: 'insensitive' as const } },
|
||||
{ rawTranscript: { contains: q, mode: 'insensitive' as const } },
|
||||
{ markdownMinutes: { contains: q, mode: 'insensitive' as const } },
|
||||
],
|
||||
}
|
||||
: undefined
|
||||
|
||||
const [meetings, total] = await Promise.all([
|
||||
prisma.meeting.findMany({
|
||||
where,
|
||||
orderBy: { createdAt: 'desc' },
|
||||
take: limit,
|
||||
skip: offset,
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
createdAt: true,
|
||||
template: true,
|
||||
summaryMode: true,
|
||||
tags: true,
|
||||
attendees: true,
|
||||
markdownMinutes: true,
|
||||
_count: {
|
||||
select: { actionItems: { where: { isDone: false } } },
|
||||
},
|
||||
},
|
||||
}),
|
||||
prisma.meeting.count({ where }),
|
||||
])
|
||||
|
||||
const cards = meetings.map((m) => ({
|
||||
id: m.id,
|
||||
title: m.title,
|
||||
createdAt: m.createdAt,
|
||||
template: m.template,
|
||||
summaryMode: m.summaryMode,
|
||||
tags: m.tags,
|
||||
attendees: m.attendees,
|
||||
preview: m.markdownMinutes
|
||||
? markdownToPlainText(m.markdownMinutes, 140)
|
||||
: undefined,
|
||||
pendingActionItems: m._count.actionItems,
|
||||
}))
|
||||
|
||||
const pendingActions = q
|
||||
? []
|
||||
: await prisma.actionItem.findMany({
|
||||
where: { isDone: false },
|
||||
orderBy: { createdAt: 'desc' },
|
||||
take: 5,
|
||||
include: {
|
||||
meeting: { select: { id: true, title: true } },
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<main className="flex-1 bg-gradient-to-b from-neutral-50 to-white">
|
||||
<div className="mx-auto max-w-5xl px-6 py-12">
|
||||
<header className="mb-8 flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-neutral-900">
|
||||
저장된 회의록
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-neutral-500">
|
||||
총 {total}건
|
||||
{q && (
|
||||
<>
|
||||
{' '}
|
||||
· <span className="text-neutral-700">"{q}"</span> 검색
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/"
|
||||
className="rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800 transition-colors"
|
||||
>
|
||||
+ 새 회의 녹음
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<section className="mb-6">
|
||||
<MeetingSearchBar />
|
||||
</section>
|
||||
|
||||
{pendingActions.length > 0 && (
|
||||
<section className="mb-8 rounded-2xl border border-amber-200 bg-amber-50/60 p-5">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h2 className="flex items-center gap-2 text-sm font-semibold text-amber-800">
|
||||
✅ 내 미완료 액션 (최근 5건)
|
||||
</h2>
|
||||
<span className="text-xs text-amber-700">
|
||||
회의별 카드의 배지에서 전체 확인
|
||||
</span>
|
||||
</div>
|
||||
<ul className="space-y-1.5">
|
||||
{pendingActions.map((a) => (
|
||||
<li key={a.id} className="flex items-baseline gap-2 text-sm">
|
||||
<span className="text-amber-700">▸</span>
|
||||
<span className="text-neutral-800">{a.task}</span>
|
||||
<Link
|
||||
href={`/meetings/${a.meeting.id}`}
|
||||
className="ml-auto text-xs text-neutral-500 hover:text-amber-700 transition-colors shrink-0"
|
||||
>
|
||||
{a.meeting.title} →
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{cards.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-neutral-300 bg-white p-16 text-center">
|
||||
<p className="text-2xl mb-2">📭</p>
|
||||
<p className="text-neutral-700 font-medium">
|
||||
{q ? '검색 결과가 없습니다.' : '아직 저장된 회의록이 없습니다.'}
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-neutral-500">
|
||||
{q
|
||||
? '다른 키워드로 검색해보세요.'
|
||||
: '첫 회의를 녹음하고 "📌 저장" 버튼으로 이곳에 추가하세요.'}
|
||||
</p>
|
||||
{!q && (
|
||||
<Link
|
||||
href="/"
|
||||
className="mt-6 inline-block rounded-lg bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-neutral-800 transition-colors"
|
||||
>
|
||||
녹음 시작하기 →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{cards.map((m) => (
|
||||
<MeetingCard key={m.id} meeting={m} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{total > limit && (
|
||||
<nav className="mt-8 flex items-center justify-between text-sm">
|
||||
{offset > 0 ? (
|
||||
<Link
|
||||
href={`/meetings?${new URLSearchParams({
|
||||
...(q ? { q } : {}),
|
||||
offset: String(Math.max(0, offset - limit)),
|
||||
}).toString()}`}
|
||||
className="rounded-lg border border-neutral-300 px-3 py-1.5 hover:bg-neutral-50 transition-colors"
|
||||
>
|
||||
← 이전
|
||||
</Link>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
<span className="text-neutral-500">
|
||||
{offset + 1}-{Math.min(offset + limit, total)} / {total}
|
||||
</span>
|
||||
{offset + limit < total ? (
|
||||
<Link
|
||||
href={`/meetings?${new URLSearchParams({
|
||||
...(q ? { q } : {}),
|
||||
offset: String(offset + limit),
|
||||
}).toString()}`}
|
||||
className="rounded-lg border border-neutral-300 px-3 py-1.5 hover:bg-neutral-50 transition-colors"
|
||||
>
|
||||
다음 →
|
||||
</Link>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
+23
-1
@@ -1,9 +1,11 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { AudioUploader } from '@/components/upload/AudioUploader'
|
||||
import { LiveRecorder } from '@/components/recorder/LiveRecorder'
|
||||
import { MinutesViewer } from '@/components/minutes/MinutesViewer'
|
||||
import { getStoredApiKey } from '@/lib/api-key-storage'
|
||||
import {
|
||||
TEMPLATES,
|
||||
DEFAULT_TEMPLATE_ID,
|
||||
@@ -117,6 +119,7 @@ export default function HomePage() {
|
||||
template,
|
||||
depth,
|
||||
customPrompt: template === 'custom' ? customPrompt : undefined,
|
||||
apiKey: getStoredApiKey(),
|
||||
}),
|
||||
})
|
||||
const data = await res.json()
|
||||
@@ -149,13 +152,27 @@ export default function HomePage() {
|
||||
return (
|
||||
<main className="flex-1 bg-gradient-to-b from-neutral-50 to-white">
|
||||
<div className="mx-auto max-w-3xl px-6 py-12">
|
||||
<header className="mb-10 text-center">
|
||||
<header className="mb-10 text-center relative">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-neutral-900">
|
||||
Meeting Minutes
|
||||
</h1>
|
||||
<p className="mt-2 text-neutral-500">
|
||||
음성을 텍스트로, 용도에 맞는 템플릿으로 정리
|
||||
</p>
|
||||
<div className="absolute right-0 top-1 flex gap-3 text-sm text-neutral-500">
|
||||
<Link
|
||||
href="/meetings"
|
||||
className="hover:text-neutral-800 transition-colors"
|
||||
>
|
||||
📚 회의록
|
||||
</Link>
|
||||
<Link
|
||||
href="/settings"
|
||||
className="hover:text-neutral-800 transition-colors"
|
||||
>
|
||||
⚙️ 설정
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="mb-8">
|
||||
@@ -369,6 +386,11 @@ export default function HomePage() {
|
||||
markdown={result.markdown}
|
||||
title={title || '무제 회의'}
|
||||
mode={result.mode}
|
||||
transcript={transcript}
|
||||
template={template}
|
||||
depth={depth}
|
||||
customPrompt={template === 'custom' ? customPrompt : undefined}
|
||||
summaryMode={summaryMode}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,267 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
clearStoredApiKey,
|
||||
getStoredApiKey,
|
||||
maskApiKey,
|
||||
setStoredApiKey,
|
||||
} from '@/lib/api-key-storage'
|
||||
|
||||
type TestState =
|
||||
| { status: 'idle' }
|
||||
| { status: 'testing' }
|
||||
| { status: 'success'; message: string; reply?: string }
|
||||
| { status: 'failed'; message: string }
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [storedKey, setStoredKey] = useState<string | null>(null)
|
||||
const [draftKey, setDraftKey] = useState('')
|
||||
const [showKey, setShowKey] = useState(false)
|
||||
const [envConfigured, setEnvConfigured] = useState<boolean | null>(null)
|
||||
const [testState, setTestState] = useState<TestState>({ status: 'idle' })
|
||||
const [savedToast, setSavedToast] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setStoredKey(getStoredApiKey())
|
||||
fetch('/api/settings/status')
|
||||
.then((r) => r.json())
|
||||
.then((d) => setEnvConfigured(!!d.envConfigured))
|
||||
.catch(() => setEnvConfigured(false))
|
||||
}, [])
|
||||
|
||||
function handleSave() {
|
||||
const trimmed = draftKey.trim()
|
||||
if (!trimmed) return
|
||||
setStoredApiKey(trimmed)
|
||||
setStoredKey(trimmed)
|
||||
setDraftKey('')
|
||||
setSavedToast(true)
|
||||
setTimeout(() => setSavedToast(false), 2000)
|
||||
}
|
||||
|
||||
function handleClear() {
|
||||
if (!confirm('브라우저에 저장된 키를 삭제할까요? 환경변수가 설정되어 있다면 그것을 사용합니다.')) {
|
||||
return
|
||||
}
|
||||
clearStoredApiKey()
|
||||
setStoredKey(null)
|
||||
setTestState({ status: 'idle' })
|
||||
}
|
||||
|
||||
async function handleTest() {
|
||||
const keyToTest = draftKey.trim() || storedKey
|
||||
if (!keyToTest) {
|
||||
setTestState({ status: 'failed', message: '테스트할 키가 없습니다.' })
|
||||
return
|
||||
}
|
||||
|
||||
setTestState({ status: 'testing' })
|
||||
try {
|
||||
const res = await fetch('/api/settings/test', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ apiKey: keyToTest }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.ok) {
|
||||
setTestState({
|
||||
status: 'success',
|
||||
message: data.message,
|
||||
reply: data.reply,
|
||||
})
|
||||
} else {
|
||||
setTestState({ status: 'failed', message: data.error ?? '실패' })
|
||||
}
|
||||
} catch (err) {
|
||||
setTestState({
|
||||
status: 'failed',
|
||||
message: err instanceof Error ? err.message : '네트워크 오류',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const activeSource = storedKey
|
||||
? '브라우저 (LocalStorage)'
|
||||
: envConfigured
|
||||
? '환경변수 (서버)'
|
||||
: '없음'
|
||||
|
||||
const activeBadgeStyle = storedKey
|
||||
? 'bg-purple-100 text-purple-700'
|
||||
: envConfigured
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-red-100 text-red-700'
|
||||
|
||||
return (
|
||||
<main className="flex-1 bg-gradient-to-b from-neutral-50 to-white">
|
||||
<div className="mx-auto max-w-2xl px-6 py-12">
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm text-neutral-500 hover:text-neutral-800 transition-colors"
|
||||
>
|
||||
← 홈으로
|
||||
</Link>
|
||||
<Link
|
||||
href="/meetings"
|
||||
className="text-sm text-neutral-500 hover:text-neutral-800 transition-colors"
|
||||
>
|
||||
📚 저장된 회의록
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<header className="mb-8">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-neutral-900">
|
||||
⚙️ 설정
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-neutral-500">
|
||||
Gemini API 키를 브라우저에 저장합니다. 키는 서버에 저장되지 않으며,
|
||||
요청 시점에만 전송되어 사용됩니다.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-base font-semibold text-neutral-800">
|
||||
현재 키 소스
|
||||
</h2>
|
||||
<span
|
||||
className={`text-xs px-2.5 py-1 rounded-full font-medium ${activeBadgeStyle}`}
|
||||
>
|
||||
{activeSource}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 text-sm text-neutral-600">
|
||||
<p>
|
||||
<span className="inline-block w-32 text-neutral-500">브라우저 키:</span>{' '}
|
||||
{storedKey ? (
|
||||
<span className="font-mono">{maskApiKey(storedKey)}</span>
|
||||
) : (
|
||||
<span className="text-neutral-400">미설정</span>
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
<span className="inline-block w-32 text-neutral-500">환경변수 키:</span>{' '}
|
||||
{envConfigured === null ? (
|
||||
<span className="text-neutral-400">확인 중...</span>
|
||||
) : envConfigured ? (
|
||||
<span className="text-green-700">설정됨</span>
|
||||
) : (
|
||||
<span className="text-neutral-400">미설정</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-xs text-neutral-500">
|
||||
💡 우선순위: 브라우저 키 → 환경변수 → 단순 변환 폴백
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-6">
|
||||
<h2 className="mb-4 text-base font-semibold text-neutral-800">
|
||||
Gemini API 키
|
||||
</h2>
|
||||
|
||||
<label className="block mb-2 text-sm text-neutral-600">
|
||||
새 키 입력
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type={showKey ? 'text' : 'password'}
|
||||
value={draftKey}
|
||||
onChange={(e) => setDraftKey(e.target.value)}
|
||||
placeholder="AIzaSy..."
|
||||
className="flex-1 rounded-xl border border-neutral-300 px-4 py-3 font-mono text-sm focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-100 transition-all"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowKey((v) => !v)}
|
||||
className="rounded-xl border border-neutral-300 px-3 text-sm hover:bg-neutral-50 transition-colors"
|
||||
title={showKey ? '숨기기' : '보이기'}
|
||||
>
|
||||
{showKey ? '🙈' : '👁️'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="mt-2 text-xs text-neutral-500">
|
||||
<a
|
||||
href="https://aistudio.google.com/apikey"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline hover:text-purple-600"
|
||||
>
|
||||
Google AI Studio
|
||||
</a>
|
||||
에서 무료로 발급할 수 있습니다.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!draftKey.trim()}
|
||||
className="rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
💾 저장
|
||||
</button>
|
||||
<button
|
||||
onClick={handleTest}
|
||||
disabled={
|
||||
testState.status === 'testing' ||
|
||||
(!draftKey.trim() && !storedKey)
|
||||
}
|
||||
className="rounded-lg border border-purple-300 bg-purple-50 px-4 py-2 text-sm font-medium text-purple-700 hover:bg-purple-100 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{testState.status === 'testing' ? '테스트 중...' : '🧪 테스트 호출'}
|
||||
</button>
|
||||
{storedKey && (
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100 transition-colors"
|
||||
>
|
||||
🗑️ 삭제
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{savedToast && (
|
||||
<div className="mt-4 rounded-lg border border-purple-200 bg-purple-50 px-3 py-2 text-sm text-purple-700">
|
||||
✓ 브라우저에 저장되었습니다.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{testState.status === 'success' && (
|
||||
<div className="mt-4 rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
|
||||
<strong>✓ {testState.message}</strong>
|
||||
{testState.reply && (
|
||||
<p className="mt-1 font-mono text-xs text-green-600">
|
||||
Gemini 응답: {testState.reply}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{testState.status === 'failed' && (
|
||||
<div className="mt-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
||||
✗ {testState.message}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
|
||||
<h3 className="mb-2 text-sm font-semibold text-neutral-700">
|
||||
보안 안내
|
||||
</h3>
|
||||
<ul className="space-y-1 text-xs text-neutral-600 list-disc list-inside">
|
||||
<li>키는 이 브라우저의 LocalStorage에만 저장됩니다 (서버 DB에 저장되지 않음).</li>
|
||||
<li>요약 요청 시 body로 함께 전송되어 일회성으로 사용됩니다.</li>
|
||||
<li>다른 브라우저/기기에서는 다시 입력해야 합니다.</li>
|
||||
<li>시크릿 모드 종료, 캐시 삭제 시 사라집니다.</li>
|
||||
<li>HTTPS 환경에서 사용하는 것을 권장합니다 (현재 localhost는 예외).</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user