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 본문 드래프트 추가

src/__tests__/action-items.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest'
+import { parseActionItems } from '@/lib/action-items'
+
+describe('parseActionItems', () => {
+  it('마크다운에서 - [ ] / - [x] 항목을 추출한다', () => {
+    const md = `## 액션 아이템
+- [ ] QA 일정 확정
+- [x] PR 머지
+- [ ] 다음 주 발표 자료 준비`
+    const result = parseActionItems(md)
+    expect(result).toHaveLength(3)
+    expect(result[0]).toEqual({ task: 'QA 일정 확정', isDone: false })
+    expect(result[1]).toEqual({ task: 'PR 머지', isDone: true })
+    expect(result[2]).toEqual({
+      task: '다음 주 발표 자료 준비',
+      isDone: false,
+    })
+  })
+
+  it('대문자 X 도 done으로 인식', () => {
+    const result = parseActionItems('- [X] 완료')
+    expect(result).toEqual([{ task: '완료', isDone: true }])
+  })
+
+  it('* 불릿도 인식한다', () => {
+    const result = parseActionItems('* [ ] 별표 항목')
+    expect(result).toEqual([{ task: '별표 항목', isDone: false }])
+  })
+
+  it('체크박스 없는 일반 불릿은 무시한다', () => {
+    const md = `- 그냥 불릿
+- [ ] 액션 아이템
+- 또 일반 불릿`
+    const result = parseActionItems(md)
+    expect(result).toHaveLength(1)
+    expect(result[0].task).toBe('액션 아이템')
+  })
+
+  it('빈 task / 매우 짧은 task / 점만 있는 task 는 제외', () => {
+    const md = `- [ ]
+- [ ] a
+- [ ] ...
+- [ ] 정상 항목`
+    const result = parseActionItems(md)
+    expect(result).toHaveLength(1)
+    expect(result[0].task).toBe('정상 항목')
+  })
+
+  it('섹션과 무관하게 모든 체크박스를 수집', () => {
+    const md = `## 요약
+이것저것
+
+## 회의 내용
+- [ ] 본문에 있는 항목
+
+## 다른 섹션
+- [x] 다른 섹션의 항목`
+    const result = parseActionItems(md)
+    expect(result).toHaveLength(2)
+  })
+
+  it('빈 문자열은 빈 배열', () => {
+    expect(parseActionItems('')).toEqual([])
+    expect(parseActionItems('# 제목만 있음')).toEqual([])
+  })
+
+  it('들여쓰기된 체크박스도 인식', () => {
+    const result = parseActionItems('  - [ ] 들여쓰기')
+    expect(result).toEqual([{ task: '들여쓰기', isDone: false }])
+  })
+})

src/__tests__/api-key-storage.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import {
+  getStoredApiKey,
+  setStoredApiKey,
+  clearStoredApiKey,
+  maskApiKey,
+} from '@/lib/api-key-storage'
+
+describe('LocalStorage api key helpers', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+  })
+
+  it('저장 후 동일 키를 반환한다', () => {
+    setStoredApiKey('AIza-test-key')
+    expect(getStoredApiKey()).toBe('AIza-test-key')
+  })
+
+  it('미설정 시 null 반환', () => {
+    expect(getStoredApiKey()).toBeNull()
+  })
+
+  it('빈 문자열 저장 시 null로 취급', () => {
+    setStoredApiKey('')
+    expect(getStoredApiKey()).toBeNull()
+  })
+
+  it('clear 시 삭제된다', () => {
+    setStoredApiKey('AIza-test-key')
+    clearStoredApiKey()
+    expect(getStoredApiKey()).toBeNull()
+  })
+})
+
+describe('maskApiKey', () => {
+  it('긴 키는 앞 4자 + ••• + 뒤 4자', () => {
+    expect(maskApiKey('AIzaSyABCDEFGHIJKLMNOPQRSTUVWXYZ1234')).toBe(
+      'AIza••••1234',
+    )
+  })
+
+  it('8자 이하는 전부 마스킹', () => {
+    expect(maskApiKey('short')).toBe('••••')
+    expect(maskApiKey('12345678')).toBe('••••')
+  })
+
+  it('정확히 9자는 마스킹 적용', () => {
+    expect(maskApiKey('123456789')).toBe('1234••••6789')
+  })
+})

src/__tests__/api-keys.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { resolveGeminiApiKey, isEnvKeyConfigured } from '@/lib/api-keys'
+
+describe('resolveGeminiApiKey', () => {
+  const originalEnv = process.env.GEMINI_API_KEY
+
+  beforeEach(() => {
+    delete process.env.GEMINI_API_KEY
+  })
+
+  afterEach(() => {
+    if (originalEnv === undefined) {
+      delete process.env.GEMINI_API_KEY
+    } else {
+      process.env.GEMINI_API_KEY = originalEnv
+    }
+  })
+
+  it('요청 키가 우선이다', () => {
+    process.env.GEMINI_API_KEY = 'env-key'
+    expect(resolveGeminiApiKey('request-key')).toBe('request-key')
+  })
+
+  it('요청 키가 없으면 환경변수 키로 폴백한다', () => {
+    process.env.GEMINI_API_KEY = 'env-key'
+    expect(resolveGeminiApiKey()).toBe('env-key')
+    expect(resolveGeminiApiKey(null)).toBe('env-key')
+    expect(resolveGeminiApiKey(undefined)).toBe('env-key')
+    expect(resolveGeminiApiKey('')).toBe('env-key')
+    expect(resolveGeminiApiKey('   ')).toBe('env-key')
+  })
+
+  it('둘 다 비어있으면 null', () => {
+    expect(resolveGeminiApiKey()).toBeNull()
+    expect(resolveGeminiApiKey('')).toBeNull()
+  })
+
+  it('요청 키 앞뒤 공백을 제거한다', () => {
+    expect(resolveGeminiApiKey('  abc  ')).toBe('abc')
+  })
+
+  it('환경변수 키 앞뒤 공백을 제거한다', () => {
+    process.env.GEMINI_API_KEY = '  env-key  '
+    expect(resolveGeminiApiKey()).toBe('env-key')
+  })
+})
+
+describe('isEnvKeyConfigured', () => {
+  const originalEnv = process.env.GEMINI_API_KEY
+
+  afterEach(() => {
+    if (originalEnv === undefined) {
+      delete process.env.GEMINI_API_KEY
+    } else {
+      process.env.GEMINI_API_KEY = originalEnv
+    }
+  })
+
+  it('환경변수가 설정되어 있으면 true', () => {
+    process.env.GEMINI_API_KEY = 'AIza...'
+    expect(isEnvKeyConfigured()).toBe(true)
+  })
+
+  it('비어있거나 공백만 있으면 false', () => {
+    delete process.env.GEMINI_API_KEY
+    expect(isEnvKeyConfigured()).toBe(false)
+    process.env.GEMINI_API_KEY = ''
+    expect(isEnvKeyConfigured()).toBe(false)
+    process.env.GEMINI_API_KEY = '   '
+    expect(isEnvKeyConfigured()).toBe(false)
+  })
+})

src/__tests__/markdown.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest'
+import {
+  renderMarkdownToSafeHtml,
+  markdownToPlainText,
+} from '@/lib/markdown'
+
+describe('renderMarkdownToSafeHtml', () => {
+  it('헤딩/리스트/굵은 글씨를 HTML로 변환한다', () => {
+    const html = renderMarkdownToSafeHtml(`# 제목
+- 항목1
+- **중요** 항목2`)
+    expect(html).toContain('<h1>제목</h1>')
+    expect(html).toContain('<ul>')
+    expect(html).toContain('<strong>중요</strong>')
+  })
+
+  it('GFM 체크박스를 렌더한다', () => {
+    const html = renderMarkdownToSafeHtml('- [ ] 할 일\n- [x] 완료')
+    expect(html).toContain('type="checkbox"')
+  })
+
+  it('코드 블록을 pre><code>로 감싼다', () => {
+    const html = renderMarkdownToSafeHtml('```\nconst x = 1\n```')
+    expect(html).toContain('<pre>')
+    expect(html).toContain('<code>')
+  })
+
+  it('인라인 HTML 스크립트는 살균되어 제거된다', () => {
+    const html = renderMarkdownToSafeHtml(
+      '안녕 <script>alert("xss")</script> 세계',
+    )
+    expect(html).not.toContain('<script>')
+    expect(html).not.toContain('alert')
+  })
+
+  it('onerror 속성 같은 이벤트 핸들러는 살균된다', () => {
+    const html = renderMarkdownToSafeHtml(
+      '<img src="x" onerror="alert(1)">',
+    )
+    expect(html).not.toContain('onerror')
+  })
+
+  it('빈 문자열은 빈 문자열을 반환한다', () => {
+    expect(renderMarkdownToSafeHtml('')).toBe('')
+  })
+})
+
+describe('markdownToPlainText', () => {
+  it('마크다운을 스트립하여 평문을 반환한다', () => {
+    const text = markdownToPlainText('# 제목\n**굵은** 글씨와 [링크](http://x.com)')
+    expect(text).toContain('제목')
+    expect(text).toContain('굵은')
+    expect(text).toContain('링크')
+    expect(text).not.toContain('#')
+    expect(text).not.toContain('**')
+  })
+
+  it('길이 초과 시 말줄임표를 붙인다', () => {
+    const long = 'a '.repeat(200)
+    const text = markdownToPlainText(long, 20)
+    expect(text.endsWith('...')).toBe(true)
+    expect(text.length).toBeLessThanOrEqual(23)
+  })
+
+  it('연속 공백은 하나로 줄어든다', () => {
+    const text = markdownToPlainText('A\n\n\nB\n\n\nC')
+    expect(text).toBe('A B C')
+  })
+})

src/app/api/action-items/[id]/route.ts

@@ -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 },
+    )
+  }
+}

src/app/api/meetings/[id]/reparse-action-items/route.ts

@@ -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 },
+    )
+  }
+}

src/app/api/meetings/[id]/route.ts

@@ -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(

src/app/api/meetings/route.ts

@@ -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 })

src/app/api/settings/status/route.ts

@@ -0,0 +1,9 @@
+import { isEnvKeyConfigured } from '@/lib/api-keys'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET() {
+  return Response.json({
+    envConfigured: isEnvKeyConfigured(),
+  })
+}

src/app/api/settings/test/route.ts

@@ -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 },
+    )
+  }
+}

src/app/api/summarize-live/route.ts

@@ -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:

src/app/api/summarize/route.ts

@@ -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)

src/app/globals.css

@@ -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;
 }

src/app/meetings/[id]/page.tsx

@@ -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,
+        })),
+      }}
+    />
+  )
+}

src/app/meetings/page.tsx

@@ -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">&quot;{q}&quot;</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>
+  )
+}

src/app/page.tsx

@@ -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>

src/app/settings/page.tsx

@@ -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>
+  )
+}

src/components/meeting/ActionItemList.tsx

@@ -0,0 +1,171 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { useRouter } from 'next/navigation'
+
+export interface ActionItemView {
+  id: string
+  task: string
+  isDone: boolean
+}
+
+interface ActionItemListProps {
+  meetingId: string
+  items: ActionItemView[]
+}
+
+export function ActionItemList({ meetingId, items }: ActionItemListProps) {
+  const router = useRouter()
+  const [optimistic, setOptimistic] = useState<Record<string, boolean>>({})
+  const [isPending, startTransition] = useTransition()
+  const [reparsing, setReparsing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const merged = items.map((item) => ({
+    ...item,
+    isDone: optimistic[item.id] ?? item.isDone,
+  }))
+
+  const total = merged.length
+  const done = merged.filter((i) => i.isDone).length
+
+  async function toggle(id: string, next: boolean) {
+    setOptimistic((prev) => ({ ...prev, [id]: next }))
+    setError(null)
+    try {
+      const res = await fetch(`/api/action-items/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ isDone: next }),
+      })
+      if (!res.ok) {
+        setOptimistic((prev) => {
+          const copy = { ...prev }
+          delete copy[id]
+          return copy
+        })
+        const data = await res.json().catch(() => ({ error: '실패' }))
+        setError(data.error ?? '토글 실패')
+        return
+      }
+      startTransition(() => router.refresh())
+    } catch (err) {
+      setOptimistic((prev) => {
+        const copy = { ...prev }
+        delete copy[id]
+        return copy
+      })
+      setError(err instanceof Error ? err.message : '토글 실패')
+    }
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm('이 액션 아이템을 삭제할까요?')) return
+    try {
+      const res = await fetch(`/api/action-items/${id}`, { method: 'DELETE' })
+      if (res.ok || res.status === 204) {
+        startTransition(() => router.refresh())
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  async function handleReparse() {
+    if (
+      total > 0 &&
+      !confirm(
+        '마크다운에서 액션 아이템을 다시 추출합니다. 현재 체크 상태가 모두 초기화됩니다. 계속할까요?',
+      )
+    ) {
+      return
+    }
+    setReparsing(true)
+    setError(null)
+    try {
+      const res = await fetch(
+        `/api/meetings/${meetingId}/reparse-action-items`,
+        { method: 'POST' },
+      )
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: '실패' }))
+        setError(data.error ?? '재추출 실패')
+        return
+      }
+      startTransition(() => router.refresh())
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '재추출 실패')
+    } finally {
+      setReparsing(false)
+    }
+  }
+
+  return (
+    <section className="rounded-2xl border border-purple-200 bg-purple-50/40 p-5">
+      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <h2 className="flex items-center gap-2 text-base font-semibold text-purple-800">
+          ✅ 액션 아이템
+          {total > 0 && (
+            <span className="rounded-full bg-purple-200 px-2 py-0.5 text-xs font-normal text-purple-800">
+              {done}/{total}
+            </span>
+          )}
+        </h2>
+        <button
+          onClick={handleReparse}
+          disabled={reparsing}
+          className="rounded-lg border border-purple-300 bg-white px-3 py-1 text-xs text-purple-700 hover:bg-purple-100 disabled:opacity-50 transition-colors"
+          title="마크다운의 - [ ] 항목을 다시 읽어 액션 아이템을 갱신"
+        >
+          {reparsing ? '재추출 중...' : '🔄 재추출'}
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+          {error}
+        </div>
+      )}
+
+      {total === 0 ? (
+        <p className="text-sm text-purple-600/70">
+          마크다운에 <code className="text-xs">- [ ]</code> 형식 항목이 없습니다.
+          본문에 추가한 뒤 <strong>🔄 재추출</strong> 버튼을 눌러주세요.
+        </p>
+      ) : (
+        <ul className="space-y-1.5">
+          {merged.map((item) => (
+            <li
+              key={item.id}
+              className="group flex items-start gap-2 rounded-lg px-2 py-1.5 hover:bg-white/60"
+            >
+              <input
+                type="checkbox"
+                checked={item.isDone}
+                onChange={(e) => toggle(item.id, e.target.checked)}
+                disabled={isPending}
+                className="mt-1 h-4 w-4 cursor-pointer accent-purple-600"
+              />
+              <span
+                className={`flex-1 text-sm ${
+                  item.isDone
+                    ? 'text-neutral-400 line-through'
+                    : 'text-neutral-800'
+                }`}
+              >
+                {item.task}
+              </span>
+              <button
+                onClick={() => handleDelete(item.id)}
+                className="invisible text-xs text-neutral-400 hover:text-red-600 group-hover:visible transition-colors"
+                title="삭제"
+              >
+                ✕
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}

src/components/meeting/MeetingCard.tsx

@@ -0,0 +1,92 @@
+import Link from 'next/link'
+
+export interface MeetingCardData {
+  id: string
+  title: string
+  createdAt: string | Date
+  template?: string | null
+  summaryMode?: string | null
+  tags?: string[]
+  attendees?: string[]
+  preview?: string
+  pendingActionItems?: number
+}
+
+const TEMPLATE_LABELS: Record<string, { icon: string; name: string }> = {
+  meeting: { icon: '🗂️', name: '회의록' },
+  lecture: { icon: '🎓', name: '강의' },
+  one_on_one: { icon: '🤝', name: '1:1' },
+  brainstorm: { icon: '💡', name: '브레인' },
+  interview: { icon: '🎤', name: '인터뷰' },
+  raw: { icon: '📝', name: '원문' },
+  custom: { icon: '⚙️', name: '커스텀' },
+}
+
+function formatDate(value: string | Date): string {
+  const d = typeof value === 'string' ? new Date(value) : value
+  return new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(d)
+}
+
+export function MeetingCard({ meeting }: { meeting: MeetingCardData }) {
+  const tpl = meeting.template
+    ? TEMPLATE_LABELS[meeting.template]
+    : undefined
+
+  return (
+    <Link
+      href={`/meetings/${meeting.id}`}
+      className="group block rounded-2xl border border-neutral-200 bg-white p-5 hover:border-purple-300 hover:shadow-md transition-all"
+    >
+      <div className="flex items-start justify-between gap-3 mb-2">
+        <h3 className="font-semibold text-neutral-800 group-hover:text-purple-700 transition-colors line-clamp-2">
+          {meeting.title}
+        </h3>
+        {tpl && (
+          <span className="shrink-0 text-xs px-2 py-0.5 rounded-full bg-neutral-100 text-neutral-600">
+            {tpl.icon} {tpl.name}
+          </span>
+        )}
+      </div>
+
+      <div className="text-xs text-neutral-500 mb-3 flex items-center gap-2">
+        <span>{formatDate(meeting.createdAt)}</span>
+        {(meeting.pendingActionItems ?? 0) > 0 && (
+          <span className="rounded-full bg-amber-50 px-2 py-0.5 text-amber-700 border border-amber-200">
+            ✅ {meeting.pendingActionItems} 미완료
+          </span>
+        )}
+      </div>
+
+      {meeting.preview && (
+        <p className="text-sm text-neutral-600 line-clamp-3 mb-3">
+          {meeting.preview}
+        </p>
+      )}
+
+      {(meeting.attendees?.length ?? 0) > 0 && (
+        <p className="text-xs text-neutral-500 mb-2">
+          👤 {meeting.attendees!.join(', ')}
+        </p>
+      )}
+
+      {(meeting.tags?.length ?? 0) > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {meeting.tags!.map((t) => (
+            <span
+              key={t}
+              className="text-xs px-2 py-0.5 rounded-full bg-purple-50 text-purple-700 border border-purple-100"
+            >
+              #{t}
+            </span>
+          ))}
+        </div>
+      )}
+    </Link>
+  )
+}

src/components/meeting/MeetingDetail.tsx

@@ -0,0 +1,393 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import {
+  copyMarkdownAsRichText,
+  renderMarkdownToSafeHtml,
+} from '@/lib/markdown'
+import {
+  exportAsMarkdown,
+  exportAsHtml,
+  generateDownloadFilename,
+} from '@/lib/export-minutes'
+import {
+  ActionItemList,
+  type ActionItemView,
+} from './ActionItemList'
+
+export interface MeetingDetailData {
+  id: string
+  title: string
+  createdAt: string
+  updatedAt: string
+  markdownMinutes: string | null
+  rawTranscript: string | null
+  template: string | null
+  summaryMode: string | null
+  depth: string | null
+  attendees: string[]
+  tags: string[]
+  actionItems: ActionItemView[]
+}
+
+interface MeetingDetailProps {
+  meeting: MeetingDetailData
+}
+
+type EditState =
+  | { status: 'view' }
+  | { status: 'editing' }
+  | { status: 'saving' }
+  | { status: 'error'; message: string }
+
+export function MeetingDetail({ meeting }: MeetingDetailProps) {
+  const router = useRouter()
+
+  const [title, setTitle] = useState(meeting.title)
+  const [markdown, setMarkdown] = useState(meeting.markdownMinutes ?? '')
+  const [attendees, setAttendees] = useState(meeting.attendees.join(', '))
+  const [tags, setTags] = useState(meeting.tags.join(', '))
+  const [state, setState] = useState<EditState>({ status: 'view' })
+  const [copyHint, setCopyHint] = useState<string | null>(null)
+
+  function flashCopyHint(message: string) {
+    setCopyHint(message)
+    setTimeout(() => setCopyHint(null), 2500)
+  }
+
+  async function copyMd() {
+    try {
+      await navigator.clipboard.writeText(markdown)
+      flashCopyHint('마크다운이 복사되었습니다.')
+    } catch {
+      flashCopyHint('복사 실패')
+    }
+  }
+
+  async function copyDocs() {
+    const ok = await copyMarkdownAsRichText(markdown)
+    flashCopyHint(
+      ok
+        ? '서식 유지 복사 완료 — Google Docs에 붙여넣어보세요.'
+        : '서식 복사 실패 — 일반 복사를 사용해주세요.',
+    )
+  }
+
+  const renderedHtml = useMemo(
+    () => renderMarkdownToSafeHtml(markdown),
+    [markdown],
+  )
+
+  const isDirty =
+    title !== meeting.title ||
+    markdown !== (meeting.markdownMinutes ?? '') ||
+    attendees !== meeting.attendees.join(', ') ||
+    tags !== meeting.tags.join(', ')
+
+  async function handleSave() {
+    setState({ status: 'saving' })
+    try {
+      const res = await fetch(`/api/meetings/${meeting.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: title.trim(),
+          markdownMinutes: markdown,
+          attendees: attendees
+            .split(',')
+            .map((a) => a.trim())
+            .filter(Boolean),
+          tags: tags
+            .split(',')
+            .map((t) => t.trim())
+            .filter(Boolean),
+        }),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: '저장 실패' }))
+        setState({ status: 'error', message: data.error ?? '저장 실패' })
+        return
+      }
+      setState({ status: 'view' })
+      router.refresh()
+    } catch (err) {
+      setState({
+        status: 'error',
+        message: err instanceof Error ? err.message : '저장 실패',
+      })
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm('이 회의록을 삭제하시겠습니까? 되돌릴 수 없습니다.')) return
+    try {
+      const res = await fetch(`/api/meetings/${meeting.id}`, {
+        method: 'DELETE',
+      })
+      if (res.ok || res.status === 204) {
+        router.push('/meetings')
+      }
+    } catch {
+      // no-op
+    }
+  }
+
+  function handleDownload(type: 'md' | 'html') {
+    const filename = generateDownloadFilename(title, new Date(meeting.createdAt))
+    if (type === 'md') {
+      const blob = exportAsMarkdown(markdown)
+      trigger(blob, `${filename}.md`)
+    } else {
+      const html = exportAsHtml(markdown, title)
+      const blob = new Blob([html], { type: 'text/html;charset=utf-8' })
+      trigger(blob, `${filename}.html`)
+    }
+  }
+
+  function trigger(blob: Blob, filename: string) {
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.click()
+    setTimeout(() => URL.revokeObjectURL(url), 1000)
+  }
+
+  const isEditing = state.status === 'editing' || state.status === 'saving'
+
+  return (
+    <main className="flex-1 bg-gradient-to-b from-neutral-50 to-white">
+      <div className="mx-auto max-w-4xl px-6 py-12">
+        <div className="mb-6 flex items-center justify-between gap-3">
+          <Link
+            href="/meetings"
+            className="text-sm text-neutral-500 hover:text-neutral-800 transition-colors"
+          >
+            ← 목록으로
+          </Link>
+          <div className="flex flex-wrap gap-2">
+            <button
+              onClick={copyMd}
+              className="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50 transition-colors"
+              title="마크다운 원문 복사"
+            >
+              📋 .md
+            </button>
+            <button
+              onClick={copyDocs}
+              className="rounded-lg border border-blue-300 bg-blue-50 px-3 py-1.5 text-sm text-blue-700 hover:bg-blue-100 transition-colors"
+              title="서식 유지 복사 (Google Docs/Word/Notion 호환)"
+            >
+              📋 Docs용
+            </button>
+            <button
+              onClick={() => handleDownload('md')}
+              className="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50 transition-colors"
+            >
+              ⬇ .md
+            </button>
+            <button
+              onClick={() => handleDownload('html')}
+              className="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50 transition-colors"
+            >
+              ⬇ .html
+            </button>
+            {!isEditing ? (
+              <button
+                onClick={() => setState({ status: 'editing' })}
+                className="rounded-lg bg-purple-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-purple-700 transition-colors"
+              >
+                ✏️ 편집
+              </button>
+            ) : (
+              <>
+                <button
+                  onClick={() => {
+                    setTitle(meeting.title)
+                    setMarkdown(meeting.markdownMinutes ?? '')
+                    setAttendees(meeting.attendees.join(', '))
+                    setTags(meeting.tags.join(', '))
+                    setState({ status: 'view' })
+                  }}
+                  className="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50 transition-colors"
+                >
+                  취소
+                </button>
+                <button
+                  onClick={handleSave}
+                  disabled={!isDirty || state.status === 'saving'}
+                  className="rounded-lg bg-purple-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-purple-700 disabled:opacity-50 transition-colors"
+                >
+                  {state.status === 'saving' ? '저장 중...' : '저장'}
+                </button>
+              </>
+            )}
+            <button
+              onClick={handleDelete}
+              className="rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-sm text-red-700 hover:bg-red-100 transition-colors"
+            >
+              🗑️
+            </button>
+          </div>
+        </div>
+
+        {state.status === 'error' && (
+          <div className="mb-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+            {state.message}
+          </div>
+        )}
+
+        {copyHint && (
+          <div className="mb-4 rounded-xl border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-700">
+            {copyHint}
+          </div>
+        )}
+
+        {isEditing ? (
+          <input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="mb-4 w-full text-3xl font-bold tracking-tight text-neutral-900 bg-transparent focus:outline-none border-b border-dashed border-neutral-300 pb-1 focus:border-purple-400"
+          />
+        ) : (
+          <h1 className="mb-4 text-3xl font-bold tracking-tight text-neutral-900">
+            {meeting.title}
+          </h1>
+        )}
+
+        <div className="mb-6 flex flex-wrap items-center gap-3 text-sm text-neutral-500">
+          <span>
+            📅 {new Intl.DateTimeFormat('ko-KR', {
+              year: 'numeric',
+              month: '2-digit',
+              day: '2-digit',
+              hour: '2-digit',
+              minute: '2-digit',
+            }).format(new Date(meeting.createdAt))}
+          </span>
+          {meeting.template && (
+            <span className="rounded-full bg-neutral-100 px-2 py-0.5 text-xs">
+              {meeting.template}
+              {meeting.depth && ` · ${meeting.depth}`}
+            </span>
+          )}
+          {meeting.summaryMode && (
+            <span
+              className={`rounded-full px-2 py-0.5 text-xs ${
+                meeting.summaryMode === 'gemini'
+                  ? 'bg-purple-100 text-purple-700'
+                  : 'bg-green-100 text-green-700'
+              }`}
+            >
+              {meeting.summaryMode === 'gemini' ? 'Gemini' : '단순'}
+            </span>
+          )}
+        </div>
+
+        {isEditing && (
+          <div className="mb-6 grid gap-3 sm:grid-cols-2">
+            <div>
+              <label className="block text-xs font-medium text-neutral-500 mb-1">
+                참석자 (쉼표 구분)
+              </label>
+              <input
+                value={attendees}
+                onChange={(e) => setAttendees(e.target.value)}
+                placeholder="이름1, 이름2"
+                className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-100"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-neutral-500 mb-1">
+                태그 (쉼표 구분)
+              </label>
+              <input
+                value={tags}
+                onChange={(e) => setTags(e.target.value)}
+                placeholder="sprint, review"
+                className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-100"
+              />
+            </div>
+          </div>
+        )}
+
+        {!isEditing &&
+          ((meeting.attendees.length ?? 0) > 0 ||
+            (meeting.tags.length ?? 0) > 0) && (
+            <div className="mb-6 space-y-1 text-sm text-neutral-600">
+              {meeting.attendees.length > 0 && (
+                <p>👤 {meeting.attendees.join(', ')}</p>
+              )}
+              {meeting.tags.length > 0 && (
+                <div className="flex flex-wrap gap-1">
+                  {meeting.tags.map((t) => (
+                    <span
+                      key={t}
+                      className="text-xs px-2 py-0.5 rounded-full bg-purple-50 text-purple-700 border border-purple-100"
+                    >
+                      #{t}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+        {isEditing ? (
+          <div className="grid gap-4 lg:grid-cols-2">
+            <div>
+              <label className="block text-xs font-medium text-neutral-500 mb-1">
+                마크다운 편집
+              </label>
+              <textarea
+                value={markdown}
+                onChange={(e) => setMarkdown(e.target.value)}
+                className="w-full h-[500px] rounded-xl border border-neutral-300 px-4 py-3 text-sm font-mono text-neutral-700 focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-100 resize-none"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-neutral-500 mb-1">
+                미리보기
+              </label>
+              <div className="w-full h-[500px] rounded-xl border border-neutral-200 bg-white px-5 py-4 overflow-y-auto">
+                <div
+                  className="prose-minutes text-sm text-neutral-800 leading-relaxed"
+                  dangerouslySetInnerHTML={{ __html: renderedHtml }}
+                />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="rounded-2xl border border-neutral-200 bg-white p-6">
+            <div
+              className="prose-minutes text-sm text-neutral-800 leading-relaxed"
+              dangerouslySetInnerHTML={{ __html: renderedHtml }}
+            />
+          </div>
+        )}
+
+        {!isEditing && (
+          <div className="mt-6">
+            <ActionItemList
+              meetingId={meeting.id}
+              items={meeting.actionItems}
+            />
+          </div>
+        )}
+
+        {meeting.rawTranscript && (
+          <details className="mt-6 rounded-2xl border border-neutral-200 bg-neutral-50 p-5">
+            <summary className="cursor-pointer text-sm font-medium text-neutral-600">
+              원본 transcript 보기
+            </summary>
+            <pre className="mt-3 whitespace-pre-wrap text-xs font-mono text-neutral-600 leading-relaxed">
+              {meeting.rawTranscript}
+            </pre>
+          </details>
+        )}
+      </div>
+    </main>
+  )
+}

src/components/meeting/MeetingSearchBar.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useEffect, useState, useTransition } from 'react'
+import { useRouter, useSearchParams, usePathname } from 'next/navigation'
+
+export function MeetingSearchBar() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const initial = searchParams.get('q') ?? ''
+  const [q, setQ] = useState(initial)
+  const [isPending, startTransition] = useTransition()
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      const params = new URLSearchParams(Array.from(searchParams.entries()))
+      if (q.trim()) {
+        params.set('q', q.trim())
+      } else {
+        params.delete('q')
+      }
+      startTransition(() => {
+        router.replace(
+          params.toString() ? `${pathname}?${params.toString()}` : pathname,
+          { scroll: false },
+        )
+      })
+    }, 300)
+
+    return () => clearTimeout(handle)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [q])
+
+  return (
+    <div className="relative">
+      <input
+        type="search"
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        placeholder="제목 또는 내용 검색..."
+        className="w-full rounded-xl border border-neutral-300 px-4 py-3 pr-10 text-neutral-800 placeholder:text-neutral-400 focus:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-100 transition-all"
+      />
+      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400">
+        {isPending ? (
+          <span className="text-xs">검색 중...</span>
+        ) : (
+          <span>🔍</span>
+        )}
+      </div>
+    </div>
+  )
+}

src/components/minutes/MinutesViewer.tsx

@@ -1,14 +1,56 @@
 'use client'
 
-import { exportAsMarkdown, exportAsHtml, generateDownloadFilename } from '@/lib/export-minutes'
+import { useMemo, useState } from 'react'
+import Link from 'next/link'
+import {
+  exportAsMarkdown,
+  exportAsHtml,
+  generateDownloadFilename,
+} from '@/lib/export-minutes'
+import {
+  copyMarkdownAsRichText,
+  renderMarkdownToSafeHtml,
+} from '@/lib/markdown'
+import type { SummaryDepth, TemplateId } from '@/lib/templates'
 
 interface MinutesViewerProps {
   markdown: string
   title: string
   mode: 'simple' | 'gemini'
+  transcript?: string
+  template?: TemplateId
+  depth?: SummaryDepth
+  customPrompt?: string
+  summaryMode?: 'simple' | 'gemini'
 }
 
-export function MinutesViewer({ markdown, title, mode }: MinutesViewerProps) {
+type SaveState =
+  | { status: 'idle' }
+  | { status: 'saving' }
+  | { status: 'saved'; id: string }
+  | { status: 'error'; message: string }
+
+export function MinutesViewer({
+  markdown,
+  title,
+  mode,
+  transcript,
+  template,
+  depth,
+  customPrompt,
+  summaryMode,
+}: MinutesViewerProps) {
+  const [renderedView, setRenderedView] = useState<'rendered' | 'raw'>(
+    'rendered',
+  )
+  const [save, setSave] = useState<SaveState>({ status: 'idle' })
+  const [copyHint, setCopyHint] = useState<string | null>(null)
+
+  const renderedHtml = useMemo(
+    () => renderMarkdownToSafeHtml(markdown),
+    [markdown],
+  )
+
   function download(type: 'md' | 'html') {
     const filename = generateDownloadFilename(title, new Date())
 
@@ -28,54 +70,177 @@ export function MinutesViewer({ markdown, title, mode }: MinutesViewerProps) {
     a.href = url
     a.download = filename
     a.click()
-    URL.revokeObjectURL(url)
+    setTimeout(() => URL.revokeObjectURL(url), 1000)
   }
 
-  function copyToClipboard() {
-    navigator.clipboard.writeText(markdown)
+  async function copyToClipboard() {
+    try {
+      await navigator.clipboard.writeText(markdown)
+      flashCopyHint('마크다운이 클립보드에 복사되었습니다.')
+    } catch {
+      flashCopyHint('복사에 실패했습니다.')
+    }
+  }
+
+  async function copyForGoogleDocs() {
+    const ok = await copyMarkdownAsRichText(markdown)
+    flashCopyHint(
+      ok
+        ? '서식 유지 복사 완료 — Google Docs/Word/Notion에 붙여넣어보세요.'
+        : '서식 복사 실패 — 일반 복사를 사용해주세요.',
+    )
+  }
+
+  function flashCopyHint(message: string) {
+    setCopyHint(message)
+    setTimeout(() => setCopyHint(null), 2500)
+  }
+
+  async function saveMeeting() {
+    setSave({ status: 'saving' })
+    try {
+      const res = await fetch('/api/meetings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title,
+          rawTranscript: transcript,
+          markdownMinutes: markdown,
+          summaryMode: summaryMode ?? mode,
+          template,
+          depth,
+          customPrompt,
+        }),
+      })
+      const data = await res.json()
+      if (!res.ok) {
+        setSave({ status: 'error', message: data.error ?? '저장 실패' })
+        return
+      }
+      setSave({ status: 'saved', id: data.id })
+    } catch (err) {
+      setSave({
+        status: 'error',
+        message: err instanceof Error ? err.message : '저장 실패',
+      })
+    }
   }
 
   const modeLabel = mode === 'gemini' ? 'Gemini AI 요약' : '단순 변환'
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-wrap items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <h2 className="text-lg font-semibold text-neutral-800">회의록</h2>
-          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
-            mode === 'gemini'
-              ? 'bg-purple-100 text-purple-700'
-              : 'bg-green-100 text-green-700'
-          }`}>
+          <span
+            className={`text-xs px-2 py-0.5 rounded-full font-medium ${
+              mode === 'gemini'
+                ? 'bg-purple-100 text-purple-700'
+                : 'bg-green-100 text-green-700'
+            }`}
+          >
             {modeLabel}
           </span>
         </div>
-        <div className="flex gap-2">
+        <div className="flex flex-wrap gap-2">
+          <div className="flex gap-1 rounded-lg bg-neutral-100 p-0.5 text-xs">
+            <button
+              onClick={() => setRenderedView('rendered')}
+              className={`rounded-md px-2 py-1 transition-colors ${
+                renderedView === 'rendered'
+                  ? 'bg-white text-neutral-800 shadow-sm'
+                  : 'text-neutral-500'
+              }`}
+            >
+              미리보기
+            </button>
+            <button
+              onClick={() => setRenderedView('raw')}
+              className={`rounded-md px-2 py-1 transition-colors ${
+                renderedView === 'raw'
+                  ? 'bg-white text-neutral-800 shadow-sm'
+                  : 'text-neutral-500'
+              }`}
+            >
+              원문
+            </button>
+          </div>
           <button
             onClick={copyToClipboard}
             className="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50 transition-colors"
+            title="마크다운 원문 복사"
           >
-            복사
+            📋 .md
+          </button>
+          <button
+            onClick={copyForGoogleDocs}
+            className="rounded-lg border border-blue-300 bg-blue-50 px-3 py-1.5 text-sm text-blue-700 hover:bg-blue-100 transition-colors"
+            title="서식 유지 복사 (Google Docs/Word/Notion 호환)"
+          >
+            📋 Docs용
           </button>
           <button
             onClick={() => download('md')}
             className="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50 transition-colors"
           >
-            .md 다운로드
+            ⬇ .md
           </button>
           <button
             onClick={() => download('html')}
             className="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50 transition-colors"
           >
-            .html 다운로드
+            ⬇ .html
+          </button>
+          <button
+            onClick={saveMeeting}
+            disabled={save.status === 'saving' || save.status === 'saved'}
+            className="rounded-lg bg-purple-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-purple-700 disabled:opacity-50 transition-colors"
+          >
+            {save.status === 'saving'
+              ? '저장 중...'
+              : save.status === 'saved'
+              ? '저장됨 ✓'
+              : '📌 저장'}
           </button>
         </div>
       </div>
 
+      {save.status === 'saved' && (
+        <div className="rounded-xl border border-purple-200 bg-purple-50 p-3 text-sm text-purple-700 flex items-center justify-between gap-3">
+          <span>회의록이 저장되었습니다.</span>
+          <Link
+            href={`/meetings/${save.id}`}
+            className="underline font-medium hover:text-purple-900"
+          >
+            상세 보기 →
+          </Link>
+        </div>
+      )}
+
+      {copyHint && (
+        <div className="rounded-xl border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-700">
+          {copyHint}
+        </div>
+      )}
+
+      {save.status === 'error' && (
+        <div className="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+          저장 실패: {save.message}
+        </div>
+      )}
+
       <div className="rounded-2xl border border-neutral-200 bg-white p-6 max-h-[500px] overflow-y-auto">
-        <pre className="whitespace-pre-wrap text-sm text-neutral-700 font-mono leading-relaxed">
-          {markdown}
-        </pre>
+        {renderedView === 'rendered' ? (
+          <div
+            className="prose-minutes text-sm text-neutral-800 leading-relaxed"
+            dangerouslySetInnerHTML={{ __html: renderedHtml }}
+          />
+        ) : (
+          <pre className="whitespace-pre-wrap text-sm text-neutral-700 font-mono leading-relaxed">
+            {markdown}
+          </pre>
+        )}
       </div>
     </div>
   )

src/hooks/useLiveSummary.ts

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import type { TranscriptChunk } from '@/lib/transcript-formatter'
 import { formatTranscriptChunks } from '@/lib/transcript-formatter'
 import type { SummaryDepth, TemplateId } from '@/lib/templates'
+import { getStoredApiKey } from '@/lib/api-key-storage'
 
 interface UseLiveSummaryOptions {
   enabled: boolean
@@ -118,6 +119,7 @@ export function useLiveSummary(
             template: configRef.current.template,
             depth: configRef.current.depth,
             customPrompt: configRef.current.customPrompt,
+            apiKey: getStoredApiKey(),
           }),
           signal: controller.signal,
         })

src/lib/action-items.ts

@@ -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
+}

src/lib/api-key-storage.ts

@@ -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)}`
+}

src/lib/api-keys.ts

@@ -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
+}

src/lib/db.ts

@@ -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

src/lib/export-minutes.ts

@@ -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>`
 }

src/lib/markdown.ts

@@ -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
+  }
+}