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 본문 드래프트 추가
2026-08-12 22:33:25 +09:00 · 2026-04-28 16:41:24 +09:00
parent cf6613bb94
commit 908cc860e8
40 changed files with 3153 additions and 155 deletions
@@ -40,8 +40,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts

-/src/generated/prisma
-
 # Uploads
 /uploads

@@ -21,7 +21,6 @@ COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 COPY --from=builder /app/prisma ./prisma
-COPY --from=builder /app/src/generated ./src/generated

 RUN mkdir -p uploads && chown nextjs:nodejs uploads

@@ -6,7 +6,7 @@

 ---

-## 현재 기능 (Phase 0 + 0.5)
+## 현재 기능 (Phase 0 + 0.5 + 1 + 1.5 + 2)

 ### 녹음 & 전사
 - 브라우저 실시간 음성 인식 (Web Speech API · Chrome `ko-KR`)
@@ -40,12 +40,38 @@
 - **표준** — 맥락이 이해될 정도
 - **상세** — 세부사항·수치 누락 없이 보존

+### 액션 아이템 (Phase 2)
+- 회의록 저장 시 마크다운의 `- [ ]` 항목을 자동으로 추출 → DB에 구조화 저장
+- 상세 페이지에 **체크리스트 섹션** — 체크박스 토글로 완료 표시
+- 개별 항목 삭제, 마크다운 편집 후 **🔄 재추출** 버튼으로 동기화
+- `/meetings` 상단에 "내 미완료 액션 (최근 5)" 위젯
+- 회의 카드에 미완료 카운트 배지 (예: `✅ 3 미완료`)
+- **Google Docs 호환 복사** — `📋 Docs용` 버튼으로 서식 유지 (heading/list/bold/code) 채로 클립보드에 복사 → Docs/Word/Notion에 그대로 붙여넣기
+
+### Gemini 키 웹 설정 (Phase 1.5)
+- **`/settings` 페이지** — 헤더 ⚙️ 링크로 진입
+- 브라우저 LocalStorage에 저장 (서버 DB 미사용)
+- 마스킹된 현재 키 표시 (`AIza••••XYZ12`), 보이기/숨기기 토글
+- **🧪 테스트 호출** — 가벼운 Gemini 응답으로 키 유효성 검증
+- 우선순위: 브라우저 키 → 환경변수 → 단순 변환 폴백
+- 키 미설정 시에도 단순 변환 모드로 회의록은 항상 생성됨
+
+### 저장·조회 워크스페이스 (Phase 1)
+- **`📌 저장` 버튼** — 생성된 회의록을 DB에 영속 저장
+- **`/meetings` 목록 페이지** — 카드 그리드, 페이지네이션, 빈 상태 UI
+- **`/meetings/[id]` 상세 페이지** — Markdown 렌더 + 인라인 편집 + 삭제
+  - 편집 모드는 좌(textarea) · 우(live preview) 분할
+  - 참석자/태그도 상세 페이지에서 편집
+- **검색 바** — 제목·transcript·본문 부분 검색 (300ms debounce, URL 동기화)
+- **Markdown 라이브러리** — `marked` + `isomorphic-dompurify`로 안전한 HTML 렌더 (표/리스트/인용 등 모두 정상)
+
 ### 화면
 - 녹음 시 **좌(실시간 텍스트) · 우(실시간 회의록)** 분할 뷰
 - 확정 전 interim 텍스트는 회색 이탤릭 + 깜빡이는 커서
 - 새 내용 도착 시 자동 스크롤
 - 진행률 바 (첫 요약까지 단어 수), 쿨다운 카운터
 - 템플릿/강도 변경 시 라이브 요약도 즉시 반영
+- 메인 화면 상단 우측 `📚 저장된 회의록` 링크 → 목록으로 이동

 ---

@@ -56,8 +82,9 @@
 | 프레임워크 | Next.js 16 (App Router) + TypeScript |
 | STT (실시간) | Web Speech API — Chrome 내장, 무료 |
 | AI 요약 | Gemini 2.5 Flash Lite — 무료 등급 15 RPM / 1000 RPD |
-| DB | PostgreSQL 16 + Prisma 7 (스키마 준비, Phase 1에서 활용 예정) |
-| 테스트 | Vitest (71 tests, jsdom) |
+| DB | PostgreSQL 16 + Prisma 7 (driver adapter `@prisma/adapter-pg`) |
+| Markdown | `marked` + `isomorphic-dompurify` |
+| 테스트 | Vitest (102 tests, jsdom) |
 | 배포 | Docker Compose (app + db + test profile) |

 ---
@@ -72,8 +99,11 @@ cd meeting-minutes
 cp .env.example .env
 ```

-`.env`에서 **`GEMINI_API_KEY`** 설정 ([Google AI Studio](https://aistudio.google.com/apikey)에서 무료 발급).
-> 키가 없어도 "단순 변환" 모드는 정상 동작.
+**Gemini API 키 설정 — 두 가지 방법 중 선택**:
+- (A) **웹 UI** — 앱 기동 후 `/settings` 페이지에서 입력 (브라우저 LocalStorage 저장, 추천)
+- (B) **`.env` 환경변수** — `GEMINI_API_KEY=AIza...` 작성 ([Google AI Studio](https://aistudio.google.com/apikey)에서 무료 발급)
+
+> 키가 없어도 "단순 변환" 모드는 정상 동작. Gemini 모드를 쓰려면 둘 중 하나는 필요.

 ### 2. DB 마이그레이션 (최초 1회 + 스키마 변경 시)

@@ -91,13 +121,15 @@ docker compose up -d --build

 브라우저에서 [http://localhost:3000](http://localhost:3000) 접속 → **Chrome 권장** (Web Speech API).

-### 3. 확인 방법
+### 4. 확인 방법

 1. 회의 제목 입력 (선택)
-2. **Gemini AI 요약** 모드 (기본값)
+2. **Gemini AI 요약** 모드 + 원하는 **템플릿** / **강도** 선택
 3. **녹음 시작** → 마이크 권한 허용
 4. 말하기 시작 → 좌측 실시간 텍스트, 25단어 이상 쌓이면 우측에 중간 회의록 생성
 5. **녹음 중지** → 최종 회의록이 페이지 하단에 자동 생성됨
+6. **`📌 저장`** 버튼 → `/meetings/[id]`로 영속화
+7. 상단 **`📚 저장된 회의록`** 링크 → 목록·검색·편집

 ### 서비스 관리

@@ -138,10 +170,29 @@ src/
 │   ├── api/
 │   │   ├── upload/route.ts              # 파일 업로드
 │   │   ├── summarize/route.ts           # 최종 회의록 (Gemini + simple fallback)
-│   │   └── summarize-live/route.ts      # 실시간 중간 요약
-│   ├── page.tsx                         # 메인 UI
+│   │   ├── summarize-live/route.ts      # 실시간 중간 요약
+│   │   ├── meetings/
+│   │   │   ├── route.ts                          # GET 목록 (q 검색) / POST 저장
+│   │   │   └── [id]/
+│   │   │       ├── route.ts                      # GET / PUT / DELETE 상세
+│   │   │       └── reparse-action-items/route.ts # POST 마크다운 재파싱
+│   │   ├── action-items/
+│   │   │   └── [id]/route.ts            # PATCH 토글 / DELETE
+│   │   └── settings/
+│   │       ├── status/route.ts          # 환경변수 키 설정 여부
+│   │       └── test/route.ts            # 키 유효성 검증 (가벼운 Gemini 호출)
+│   ├── meetings/
+│   │   ├── page.tsx                     # 저장된 회의록 목록 + 검색
+│   │   └── [id]/page.tsx                # 상세 + 편집 + 삭제
+│   ├── settings/page.tsx                # 키 설정 페이지 (LocalStorage)
+│   ├── page.tsx                         # 메인 UI (녹음/요약)
 │   └── layout.tsx
 ├── lib/
+│   ├── db.ts                            # Prisma 싱글톤 (pg adapter)
+│   ├── markdown.ts                      # marked + DOMPurify 렌더 + Docs용 서식 복사
+│   ├── action-items.ts                  # 마크다운 - [ ] 휴리스틱 파서
+│   ├── api-keys.ts                      # 서버: 요청 키 → env fallback 우선순위
+│   ├── api-key-storage.ts               # 클라이언트: LocalStorage 헬퍼 + 마스킹
 │   ├── audio-validation.ts
 │   ├── upload-handler.ts
 │   ├── transcript-formatter.ts
@@ -155,15 +206,21 @@ src/
 ├── components/
 │   ├── upload/AudioUploader.tsx
 │   ├── recorder/LiveRecorder.tsx        # 좌우 분할 뷰
-│   └── minutes/MinutesViewer.tsx
-└── __tests__/                           # 71 tests
+│   ├── minutes/MinutesViewer.tsx        # 미리보기/원문 토글 + 저장
+│   └── meeting/
+│       ├── MeetingCard.tsx              # 미완료 액션 카운트 배지 포함
+│       ├── MeetingSearchBar.tsx         # debounce + URL 동기화
+│       ├── MeetingDetail.tsx            # 상세/편집 UI + Docs용 복사
+│       └── ActionItemList.tsx           # 체크박스 토글 + 재추출 + 삭제
+└── __tests__/                           # 102 tests

 docs/
 ├── ROADMAP.md                           # 개발 로드맵 (Phase 0~4)
 └── CREATE_ISSUES.sh                     # gh CLI용 이슈 자동 생성 스크립트

 prisma/
-└── schema.prisma                        # Meeting 모델 (Phase 1에서 활용)
+├── schema.prisma                        # Meeting 모델
+└── migrations/                          # 마이그레이션 히스토리
 ```

 ---
@@ -176,8 +233,9 @@ prisma/
 |---|---|---|
 | **0** | 실시간 전사 + 롤링 요약 + 자동 최종 생성 | ✅ 완료 |
 | **0.5** | 템플릿 (6종) + 강도 조절 (3단계) + 커스텀 프롬프트 | ✅ 완료 |
-| **1** | 회의 저장/조회/검색 워크스페이스 | 📋 기획됨 |
-| **2** | 구조화된 액션 아이템 (Gemini JSON + 체크리스트) | 📋 기획됨 |
+| **1** | 회의 저장/조회/검색 워크스페이스 | ✅ 완료 |
+| **1.5** | 웹에서 Gemini 키 설정 (LocalStorage) | ✅ 완료 |
+| **2** | 액션 아이템 추출/체크리스트 + Google Docs 복사 | ✅ 완료 |
 | **3** | 참석자 + 태그 시스템 | 📋 기획됨 |
 | **4** | 차별화 기능 (캘린더, AI Q&A, 블록 에디터) | 💡 선택 |

@@ -193,5 +251,5 @@ prisma/

 - **Chrome 전용**: Web Speech API 비표준 — Safari/Firefox는 제한적
 - **화자 구분 불가**: 의도적 비지원 (개인용 범위를 넘음)
- **녹음 저장 없음**: 현재 페이지 세션 내에서만 유지됨. Phase 1에서 DB 영속화
 - **Gemini 무료 등급**: 15 RPM / 1000 RPD — 개인 사용에 충분하나 팀 단위는 유료 전환 권장
+- **검색**: 현재 PostgreSQL `ILIKE`(contains) 방식. 수천 건 이상 저장 시 `tsvector` GIN 인덱스로 후속 업그레이드 예정
@@ -0,0 +1,79 @@
+# Phase 1.5 — 웹에서 Gemini API 키 설정 (LocalStorage)
+
+`.env`를 만지지 않고도 브라우저 `/settings` 페이지에서 Gemini API 키를 입력·저장·테스트할 수 있도록 함.
+
+## Base
+- 🧱 **Base**: `feat/phase-1-ui` (PR #2 위에 스택)
+- main 직접 머지 시 PR#1 / PR#2 / 본 PR 변경이 합쳐짐
+
+## 설계 의도 (왜 LocalStorage?)
+- **개인용 단일 인스턴스 가정** — 여러 사용자나 디바이스 간 동기화 불필요
+- 키가 서버 DB에 남지 않음 → 백업·로그·덤프 노출 위험 없음
+- 마이그레이션·테이블 추가 불필요
+- 단점: 브라우저마다 다시 입력 / 시크릿 모드·캐시 정리 시 사라짐 (개인용으로 수용 가능)
+
+DB 저장 + env fallback 방식은 의도적으로 선택하지 않음.
+
+## 키 우선순위
+```
+1. 요청 body의 apiKey  (브라우저 LocalStorage에서 옴)
+       ↓ 없으면
+2. process.env.GEMINI_API_KEY  (서버 환경변수 fallback)
+       ↓ 없으면
+3. summarize → 단순 변환 폴백 (warning 표시)
+   summarize-live → 503 (라이브 요약은 키 필수)
+```
+
+## 변경 파일
+
+### 신규
+- `src/lib/api-keys.ts` — `resolveGeminiApiKey()`, `isEnvKeyConfigured()`
+- `src/lib/api-key-storage.ts` — `getStoredApiKey`, `setStoredApiKey`, `clearStoredApiKey`, `maskApiKey`
+- `src/app/api/settings/status/route.ts` — 환경변수 키 존재 여부만 노출 (값 X)
+- `src/app/api/settings/test/route.ts` — 키로 짧은 Gemini 호출 → 결과 분류
+- `src/app/settings/page.tsx` — 입력/저장/삭제/테스트 UI
+- `src/__tests__/api-keys.test.ts` — 7 tests
+- `src/__tests__/api-key-storage.test.ts` — 7 tests
+
+### 수정
+- `src/app/api/summarize/route.ts` — `body.apiKey` 수용, 키 없을 시 단순 변환 폴백
+- `src/app/api/summarize-live/route.ts` — `body.apiKey` 수용
+- `src/hooks/useLiveSummary.ts` — 매 요청 시 LocalStorage 키 첨부
+- `src/app/page.tsx` — generateMinutes에 LocalStorage 키 첨부 + 헤더에 ⚙️ 링크
+- `README.md` / `docs/ROADMAP.md`
+
+## UX
+
+### 설정 페이지 (`/settings`)
+- 현재 키 소스 배지: `브라우저 (LocalStorage)` / `환경변수 (서버)` / `없음`
+- 마스킹된 현재 키 표시 (`AIza••••XYZ12`)
+- 입력 필드 (보이기/숨기기 토글)
+- 버튼: 💾 저장, 🧪 테스트 호출, 🗑️ 삭제
+- 테스트 결과: ✓ 정상 / ✗ 401·403·429 등 분류된 메시지
+- Google AI Studio 무료 발급 링크
+
+### 안전장치
+- 키 GET 응답에서 절대 풀 키 노출 안 함
+- 테스트 호출은 `"OK"` 단어 한 개만 요청 → 토큰 거의 안 씀
+- HTTPS 권장 안내 (localhost는 예외)
+
+## 테스트
+- 단위 테스트 14개 추가 (서버 헬퍼 7 + LocalStorage 7)
+- 전체: **94 tests passing**
+
+## 확인 방법
+```bash
+docker compose up -d --build app
+```
+1. `http://localhost:3000` → 헤더 `⚙️ 설정`
+2. 키 입력 → 💾 저장 → 마스킹된 키가 "현재 키 소스 = 브라우저"로 표시
+3. 🧪 테스트 호출 → "키가 정상적으로 동작합니다." + Gemini 응답 미리보기
+4. 홈으로 돌아가 녹음 → Gemini 요약이 LocalStorage 키로 동작
+5. 🗑️ 삭제 → 환경변수 fallback (있으면) 또는 단순 변환으로 자동 전환
+
+## Breaking changes
+없음. 기존 `.env` 사용자는 변경 없이 동작.
+
+## 후속 (이 PR 범위 아님)
+- 다중 키 (예: OpenAI 키 추가) — 동일 패턴으로 확장 가능
+- 키 로테이션 알림 — Google이 만료 정책 도입 시
@@ -0,0 +1,89 @@
+# Phase 1 UI — 저장/목록/상세 + Markdown + 검색
+
+ROADMAP Phase 1의 #3~#7 완료. PR #1 (`feat/phase-1-foundation`) 위에 스택됨.
+
+## Base
+- 🧱 **Base branch**: `feat/phase-1-foundation` (병합 전이라면 PR#1을 먼저 머지)
+- Main에 직접 머지하고 싶다면 base를 `main`으로 바꾸면 두 PR의 변경이 합쳐져서 올라감
+
+## 포함된 변경
+
+### 📦 의존성
+- `marked@^16.4.0`
+- `isomorphic-dompurify@^2.29.0`
+- `@prisma/adapter-pg@^7.7.0`, `pg@^8.13.1`, `@types/pg`
+  (Prisma 7의 `prisma-client` 엔진은 driver adapter 필수)
+
+### 🎨 Markdown 라이브러리 (#6)
+- `src/lib/markdown.ts` — `renderMarkdownToSafeHtml`, `markdownToPlainText`
+- 기존 커스텀 파서(`export-minutes.ts`) 교체
+- 표/리스트/인용/코드블록 정상 렌더, XSS sanitize 테스트 포함
+- `globals.css`에 `.prose-minutes` 공통 스타일
+
+### 💾 저장 버튼 (#3)
+- `MinutesViewer`에 `📌 저장` → `POST /api/meetings`
+- 생성 당시 설정(template/depth/mode/customPrompt) 함께 저장
+- 저장 성공 시 `/meetings/[id]` 이동 배너
+- 미리보기 ↔ 원문 토글
+
+### 📚 목록 페이지 `/meetings` (#4)
+- 서버 컴포넌트 (Prisma 직접 조회)
+- `MeetingCard` — 제목/날짜/템플릿 배지/참석자/태그/preview
+- 빈 상태 UI (검색 시 vs 최초)
+- prev/next 페이지네이션
+
+### 📄 상세 페이지 `/meetings/[id]` (#5)
+- 서버 컴포넌트 + 클라이언트 편집 island
+- 제목/본문/참석자/태그 인라인 편집
+- 편집 모드는 좌(textarea) · 우(live preview) 분할
+- 삭제 confirm
+- 원본 transcript는 `<details>`로 접어둠
+
+### 🔍 검색 (#7)
+- `MeetingSearchBar` 클라이언트 컴포넌트
+- 300ms debounce + `useTransition` + URL query 동기화
+- 서버에서 `ILIKE contains` — title/transcript/markdown
+- `tsvector` GIN 인덱스는 후속 (개인용 규모에서 `ILIKE`로 충분)
+
+### 🔧 Prisma 7 호환
+- `generator client` → `prisma-client-js` (안정적)
+- `@prisma/adapter-pg`로 driver adapter 사용
+- `src/lib/db.ts`: `DATABASE_URL` 누락 시 placeholder fallback (build-time 안전)
+- DB 접근 페이지/라우트에 `export const dynamic = 'force-dynamic'`
+- Dockerfile에서 `src/generated` 복사 제거
+
+### 🧪 테스트
+- `src/__tests__/markdown.test.ts` 9개 추가 (렌더/sanitize/plain text)
+- 전체: **80 tests passing** (이전 71 + 9)
+
+## 확인 방법
+
+```bash
+# DB + migrate 전제 (PR#1 참고)
+docker compose up -d db
+docker compose --profile tools run --rm migrate
+
+# 빌드 + 기동
+docker compose up -d --build app
+```
+
+### 사용 흐름
+1. `http://localhost:3000`에서 녹음/업로드 → 회의록 생성
+2. `📌 저장` 버튼 클릭 → 배너에 `/meetings/[id]` 링크
+3. 링크 클릭 → 상세 페이지 → `✏️ 편집` → 마크다운/참석자/태그 수정 → 저장
+4. 상단 `← 목록으로` → `/meetings` 카드 그리드
+5. 검색창에 키워드 입력 → 300ms 후 필터링
+6. 삭제는 🗑️ 아이콘 (confirm 후 목록으로 복귀)
+
+## 스크린샷
+
+사용자가 직접 찍어서 추가 예정.
+
+## Breaking changes
+- 기존 녹음/요약 흐름은 유지
+- Prisma 6에서 올라온 환경은 `@prisma/adapter-pg` 추가 설치 필요 (package.json에 이미 반영)
+- Dockerfile의 `COPY src/generated` 제거 — 기존 이미지 캐시는 재빌드 필요
+
+## 남은 Phase 1 후속 (이 PR 범위 아님)
+- tsvector GIN 인덱스 (성능 이슈 체감 시)
+- 태그/참석자 필터 UI (검색바 외 패싯) — Phase 3에서 다룰 예정
@@ -0,0 +1,108 @@
+# Phase 2 — 액션 아이템 추출/체크리스트 + Google Docs 호환 복사
+
+ROADMAP Phase 2 (#8~#11) + 사용자 추가 요청.
+
+## Base
+- 🧱 **Base**: `feat/web-api-key-settings` (PR #3 위에 스택)
+
+## 설계 결정 — 휴리스틱 vs Gemini JSON
+
+ROADMAP은 Gemini JSON 출력 + zod 검증을 명시했지만 **마크다운 체크박스 휴리스틱**으로 갈음:
+
+| 방식 | 장점 | 단점 |
+|---|---|---|
+| **휴리스틱 (채택)** | Gemini 호출 0, 모든 템플릿 호환, 즉시 동작 | assignee/dueDate 미추출 |
+| Gemini JSON | 구조화된 출력, 정확한 메타 | 호출 추가, 프롬프트 재작성, zod 검증 |
+
+후속에 정확도 부족 체감 시 JSON 모드로 업그레이드 가능 (테이블 스키마는 이미 확장 가능).
+
+## 변경
+
+### 신규 파일
+- `prisma/migrations/20260428071709_add_action_items/`
+- `src/lib/action-items.ts` — `parseActionItems(markdown)`
+- `src/app/api/action-items/[id]/route.ts` — PATCH/DELETE
+- `src/app/api/meetings/[id]/reparse-action-items/route.ts` — POST
+- `src/components/meeting/ActionItemList.tsx` — 체크리스트 UI
+- `src/__tests__/action-items.test.ts` — 8 tests
+
+### 수정
+- `prisma/schema.prisma` — ActionItem 모델
+- `src/app/api/meetings/route.ts` — POST 시 자동 추출, GET에 미완료 카운트
+- `src/app/api/meetings/[id]/route.ts` — actionItems include
+- `src/app/meetings/page.tsx` — 미완료 위젯 (최근 5)
+- `src/app/meetings/[id]/page.tsx` — actionItems 전달
+- `src/components/meeting/MeetingCard.tsx` — 미완료 배지
+- `src/components/meeting/MeetingDetail.tsx` — ActionItemList 통합 + 📋 Docs용 버튼
+- `src/components/minutes/MinutesViewer.tsx` — 📋 Docs용 버튼
+- `src/lib/markdown.ts` — `copyMarkdownAsRichText()` 추가
+
+## API 시그니처
+
+```http
+POST /api/meetings
+{ title, markdownMinutes, ... }
+→ 201 { ...meeting, actionItems: [{ id, task, isDone, position }] }
+
+PATCH /api/action-items/[id]
+{ isDone?: boolean, task?: string }
+→ 200 { ...item }
+
+DELETE /api/action-items/[id]
+→ 204
+
+POST /api/meetings/[id]/reparse-action-items
+→ 200 { actionItems: [...], replaced: N }
+```
+
+## UX 흐름
+
+1. 회의록 생성 → `📌 저장` → 마크다운의 `- [ ]` 자동 추출
+2. `/meetings/[id]` 상세 → 본문 아래 ✅ **액션 아이템** 섹션
+3. 체크박스 클릭 (낙관적 업데이트, 서버 PATCH)
+4. 본문 편집 후 새 항목 추가 시 → `🔄 재추출` 버튼으로 동기화
+   ⚠️ 재추출은 토글 상태를 모두 초기화 (confirm 표시)
+5. `/meetings` 상단에서 "내 미완료 액션 (최근 5)" 한눈에 파악
+
+## Google Docs 복사 (사용자 추가 요청)
+
+`copyMarkdownAsRichText(markdown)`:
+- 1차: `navigator.clipboard.write([new ClipboardItem({ 'text/html', 'text/plain' })])` (모던 브라우저)
+- 폴백: 임시 contenteditable + `document.execCommand('copy')`
+
+→ Google Docs / Word / Notion에 붙여넣으면 **헤딩/리스트/굵게/코드/표 서식 유지**.
+
+버튼 라벨링 정리:
+- `📋 .md` — 마크다운 원문 복사
+- `📋 Docs용` — 서식 유지 복사 (파랑색 강조)
+- `⬇ .md` / `⬇ .html` — 파일 다운로드
+
+## 테스트
+- 102 tests passing (이전 94 + 8 action-items)
+
+## 확인 방법
+
+```bash
+# 마이그레이션 적용 (action_items 테이블 추가)
+docker compose --profile tools run --rm migrate
+
+# 빌드 + 기동
+docker compose up -d --build app
+```
+
+체크 시나리오:
+1. 회의 녹음 → 마크다운에 `- [ ] 항목` 자동 포함된 상태로 생성
+2. 📌 저장 → /meetings/[id] 이동
+3. 체크박스 토글 → 진행률 변화, 새로고침해도 유지
+4. 본문 편집 → `- [ ] 새 항목` 추가 → 저장 → 🔄 재추출 → 새 항목 등장
+5. 📋 Docs용 → Google Docs에 붙여넣어 서식 확인
+6. /meetings → 카드 배지 + 상단 위젯 노출 확인
+
+## Breaking changes
+- 마이그레이션 필요 (`action_items` 테이블)
+- 기존 회의록은 액션 아이템이 비어있음 — 상세에서 🔄 재추출 한 번 누르면 채워짐
+
+## 후속 (이 PR 범위 아님)
+- Gemini JSON 출력 모드 (assignee/dueDate 정확 추출)
+- 홈 페이지를 대시보드로 승격
+- 액션 아이템 직접 추가 (체크리스트 UI에서 +)
@@ -46,13 +46,32 @@

 ---

-## 🎯 Phase 1 — 회의 저장/조회 (1~2주)
+## ✅ Phase 1.5 — 웹 기반 API 키 설정 (완료)

-노션의 **Meeting Database** 수준. 생성한 회의록을 저장하고 다시 찾아볼 수 있게 함.
+`.env`를 만지지 않고도 브라우저에서 Gemini 키를 설정할 수 있도록 함.
+
+### 구현됨
+- [x] `/settings` 페이지 — 키 입력 / 저장 / 삭제 / 마스킹된 현재 키 표시
+- [x] LocalStorage 저장 (서버 DB에 보관 X — 개인용/단일 인스턴스 가정)
+- [x] `/api/settings/status` — 환경변수 키 존재 여부 (값 노출 X)
+- [x] `/api/settings/test` — 키로 가벼운 Gemini 호출 시도 → 200/401/429 등 분류
+- [x] `resolveGeminiApiKey()` 우선순위: 요청 body 키 → 환경변수 → null
+- [x] summarize / summarize-live 라우트가 body의 `apiKey` 사용
+- [x] 단위 테스트 14개 (api-keys 7 + api-key-storage 7)
+
+### 의도된 비목표
+- 다중 사용자 / 권한 관리 — 개인용 단일 인스턴스
+- 키 암호화 — 평문 LocalStorage (현재 .env 신뢰 모델과 동일)
+
+---
+
+## ✅ Phase 1 — 회의 저장/조회 (완료)
+
+노션의 **Meeting Database** 수준. 생성한 회의록을 저장하고 다시 찾아볼 수 있음.

 ### Issues
 - [x] **#1 Prisma 연결 + 마이그레이션 파이프라인** — PR `feat/phase-1-foundation`
-  - [x] `src/lib/db.ts` 싱글톤 Prisma 클라이언트
+  - [x] `src/lib/db.ts` 싱글톤 Prisma 클라이언트 (Prisma 7 driver adapter 경유)
  - [x] 첫 마이그레이션 생성 (`prisma migrate dev`)
  - [x] docker-compose `tools` 프로필에 `migrate` 서비스 추가
  - [x] Meeting 스키마 확장 (attendees/tags/template/depth/summaryMode/customPrompt)
@@ -62,44 +81,52 @@
  - [x] `GET /api/meetings/[id]` — 상세
  - [x] `PUT /api/meetings/[id]` — markdown/title/attendees/tags 편집
  - [x] `DELETE /api/meetings/[id]`
- [ ] **#3 MinutesViewer에 "저장" 버튼**
-  - 생성된 회의록 현재 세션에서 저장 → 토스트 알림
-  - 저장 성공 시 `/meetings/[id]` 링크 제공
- [ ] **#4 회의 목록 페이지** (`/meetings`)
-  - 카드 그리드 (제목, 날짜, 앞 2줄 미리보기, 태그)
-  - 빈 상태 UI ("첫 회의를 녹음해보세요")
- [ ] **#5 회의 상세 페이지** (`/meetings/[id]`)
-  - Transcript + Markdown 렌더링
-  - 인라인 편집 (markdown editor 도입 — 아래 #6)
-  - 삭제 버튼
- [ ] **#6 Markdown 렌더링 라이브러리 도입**
-  - `marked` + `isomorphic-dompurify`
-  - 기존 커스텀 파서(`export-minutes.ts`) 교체 — 표/리스트/인라인 스타일 정상 렌더
- [ ] **#7 전역 검색**
-  - Postgres `tsvector` 전체 텍스트 인덱스 (transcript + markdown)
-  - `/api/meetings?q=...` 엔드포인트
-  - 헤더에 검색 바 추가
+- [x] **#3 MinutesViewer에 "저장" 버튼** — PR `feat/phase-1-ui`
+  - [x] 생성된 회의록 세션에서 저장 → 배너 + 상세 링크
+  - [x] 미리보기 / 원문 토글
+- [x] **#4 회의 목록 페이지** (`/meetings`) — PR `feat/phase-1-ui`
+  - [x] 카드 그리드 (제목, 날짜, preview, 태그, 참석자, 템플릿 배지)
+  - [x] 빈 상태 UI
+  - [x] 페이지네이션
+- [x] **#5 회의 상세 페이지** (`/meetings/[id]`) — PR `feat/phase-1-ui`
+  - [x] Markdown 렌더링 (sanitize)
+  - [x] 인라인 편집 (제목/본문/참석자/태그) + 좌우 미리보기
+  - [x] 삭제 버튼
+- [x] **#6 Markdown 렌더링 라이브러리 도입** — PR `feat/phase-1-ui`
+  - [x] `marked` + `isomorphic-dompurify`
+  - [x] `src/lib/markdown.ts` 공용 유틸
+  - [x] 기존 커스텀 파서 교체, `.prose-minutes` 공통 스타일
+- [x] **#7 전역 검색** — PR `feat/phase-1-ui`
+  - [x] 검색 바 (debounce 300ms, URL query 동기화)
+  - [x] `/api/meetings?q=...` 부분 검색 (title/transcript/markdown)
+  - [ ] Postgres `tsvector` GIN 인덱스 — 현재 ILIKE로 개인용 규모 충분, 필요 시 후속

 ---

-## 🎯 Phase 2 — 구조화된 액션 아이템 (1주)
+## ✅ Phase 2 — 구조화된 액션 아이템 (완료)

-회의가 끝나면 **"내 할 일"이 자동으로 추출되어 체크리스트로 남음**. 노션 AI의 핵심 가치.
+회의가 끝나면 **"내 할 일"이 자동으로 추출되어 체크리스트로 남음**.

-### Issues
- [ ] **#8 Gemini 프롬프트 개선 — JSON 출력**
-  - `generateGeminiMinutes`가 마크다운 대신 `{ summary, discussion, actionItems: [{ assignee, due, task }], decisions }` 반환
-  - JSON schema validation (zod)
- [ ] **#9 ActionItem 테이블 + 관계**
-  - `Meeting` ↔ `ActionItem` (1:N)
-  - 필드: `id`, `meetingId`, `assignee`, `task`, `dueDate`, `isDone`, `createdAt`
- [ ] **#10 체크리스트 UI**
-  - 회의 상세 페이지에 별도 섹션
-  - 체크박스 토글 → `PATCH /api/action-items/[id]`
- [ ] **#11 대시보드 페이지** (`/`)
-  - "내 미완료 액션 아이템" 리스트
-  - 최근 회의 3건 미리보기
-  - 홈으로 승격, 녹음 UI는 `/record`로 이동
+### 구현됨
+- [x] **#8 액션 아이템 추출** — Gemini JSON 재구성 대신 마크다운 휴리스틱 채택
+  (모든 템플릿이 이미 `- [ ]` 출력 → 추가 호출 비용 0, 후속에 JSON 모드 가능)
+- [x] **#9 ActionItem 테이블** — `Meeting` ↔ `ActionItem` 1:N (cascade delete)
+  - 필드: `id`, `meetingId`, `task`, `isDone`, `position`, `createdAt`, `updatedAt`
+  - assignee/dueDate는 추후 JSON 출력 모드 도입 시 추가
+- [x] **#10 체크리스트 UI** — 상세 페이지 별도 섹션
+  - 체크박스 토글 (낙관적 업데이트) → `PATCH /api/action-items/[id]`
+  - 개별 삭제 (hover 시 ✕ 노출)
+  - 🔄 재추출 버튼 (마크다운 변경 후 수동 동기화)
+- [x] **#11 대시보드 위젯** — `/meetings` 상단에 "내 미완료 액션 (최근 5)"
+  - 회의 카드 우상단에 미완료 카운트 배지
+  - 홈 페이지 자체 승격은 보류 (현재 녹음 UI 유지)
+- [x] **부가** — Google Docs 호환 서식 복사 (`text/html` + `text/plain` ClipboardItem)
+  - MinutesViewer / MeetingDetail 둘 다 `📋 Docs용` 버튼
+
+### 비목표 (이번 단계)
+- Gemini JSON 출력 + zod 검증 — 정확도 부족 시 후속 도입
+- assignee/dueDate 필드 — JSON 출력 도입과 함께
+- 홈 페이지 대시보드 승격 — 녹음 흐름 보존이 우선

 ---

@@ -8,8 +8,12 @@
      "name": "meeting-minutes",
      "version": "0.1.0",
      "dependencies": {
+        "@prisma/adapter-pg": "^7.7.0",
        "@prisma/client": "^7.7.0",
+        "isomorphic-dompurify": "^2.29.0",
+        "marked": "^16.4.0",
        "next": "16.2.3",
+        "pg": "^8.13.1",
        "prisma": "^7.7.0",
        "react": "19.2.4",
        "react-dom": "19.2.4"
@@ -19,6 +23,7 @@
        "@testing-library/jest-dom": "^6.9.1",
        "@testing-library/react": "^16.3.2",
        "@types/node": "^20",
+        "@types/pg": "^8.11.10",
        "@types/react": "^19",
        "@types/react-dom": "^19",
        "@vitejs/plugin-react": "^6.0.1",
@@ -31,6 +36,12 @@
        "vitest": "^4.1.4"
      }
    },
+    "node_modules/@acemir/cssom": {
+      "version": "0.9.31",
+      "resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.31.tgz",
+      "integrity": "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==",
+      "license": "MIT"
+    },
    "node_modules/@adobe/css-tools": {
      "version": "4.4.4",
      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
@@ -55,7 +66,6 @@
      "version": "5.1.9",
      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.9.tgz",
      "integrity": "sha512-zd9c/Wdso6v1U7v6w3i/hbAr4K7NaSHImdpvmLt+Y9ea5BhilnIGNkfhOJ7FEIuPipAnE9tZeDOll05WDT0kgg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@csstools/css-calc": "^3.1.1",
@@ -87,7 +97,6 @@
      "version": "2.3.9",
      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@babel/code-frame": {
@@ -354,7 +363,6 @@
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "css-tree": "^3.0.0"
@@ -367,7 +375,6 @@
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
      "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -387,7 +394,6 @@
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.1.1.tgz",
      "integrity": "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -411,7 +417,6 @@
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.0.2.tgz",
      "integrity": "sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -439,7 +444,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -462,7 +466,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.2.tgz",
      "integrity": "sha512-5GkLzz4prTIpoyeUiIu3iV6CSG3Plo7xRVOFPKI7FVEJ3mZ0A8SwK0XU3Gl7xAkiQ+mDyam+NNp875/C5y+jSA==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -487,7 +490,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -711,7 +713,6 @@
      "version": "1.15.0",
      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.0.tgz",
      "integrity": "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
@@ -1526,6 +1527,18 @@
        "url": "https://github.com/sponsors/Boshen"
      }
    },
+    "node_modules/@prisma/adapter-pg": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@prisma/adapter-pg/-/adapter-pg-7.7.0.tgz",
+      "integrity": "sha512-q33Ta8sKbgzEpAy0lx45tAq//yMv0qcb+8nj+TCA3P4wiAY+OBFEFk/NDkZncAfHaNJeGo5WJpJdpbL+ijYx8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/driver-adapter-utils": "7.7.0",
+        "@types/pg": "^8.16.0",
+        "pg": "^8.16.3",
+        "postgres-array": "3.0.4"
+      }
+    },
    "node_modules/@prisma/client": {
      "version": "7.7.0",
      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-7.7.0.tgz",
@@ -1605,6 +1618,15 @@
      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
      "license": "MIT"
    },
+    "node_modules/@prisma/driver-adapter-utils": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@prisma/driver-adapter-utils/-/driver-adapter-utils-7.7.0.tgz",
+      "integrity": "sha512-gZXREeu6mOk7zXfGFJgh86p7Vhj0sXNKp+4Cg1tWYo7V2dfncP2qxS2BiTmbIIha8xPqItkl0WSw38RuSq1HoQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "7.7.0"
+      }
+    },
    "node_modules/@prisma/engines": {
      "version": "7.7.0",
      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-7.7.0.tgz",
@@ -2398,6 +2420,70 @@
        "node": ">=14.0.0"
      }
    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.2.tgz",
@@ -2595,12 +2681,22 @@
      "version": "20.19.39",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.39.tgz",
      "integrity": "sha512-orrrD74MBUyK8jOAD/r0+lfa1I2MO6I+vAkmAWzMYbCcgrN4lCrmK52gRFQq/JRxfYPfonkr4b0jcY7Olqdqbw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@types/pg": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.20.0.tgz",
+      "integrity": "sha512-bEPFOaMAHTEP1EzpvHTbmwR8UsFyHSKsRisLIHVMXnpNefSbGA1bD6CVy+qKjGSqmZqNqBDV2azOBo8TgkcVow==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "pg-protocol": "*",
+        "pg-types": "^2.2.0"
+      }
+    },
    "node_modules/@types/react": {
      "version": "19.2.14",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -2620,6 +2716,13 @@
        "@types/react": "^19.2.0"
      }
    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "8.58.1",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.1.tgz",
@@ -3389,6 +3492,15 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/ajv": {
      "version": "6.14.0",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
@@ -3730,7 +3842,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "require-from-string": "^2.0.2"
@@ -4038,7 +4149,6 @@
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "mdn-data": "2.27.1",
@@ -4055,6 +4165,30 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/cssstyle": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-6.2.0.tgz",
+      "integrity": "sha512-Fm5NvhYathRnXNVndkUsCCuR63DCLVVwGOOwQw782coXFi5HhkXdu289l59HlXZBawsyNccXfWRYvLzcDCdDig==",
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.0.1",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.28",
+        "css-tree": "^3.1.0",
+        "lru-cache": "^11.2.6"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cssstyle/node_modules/lru-cache": {
+      "version": "11.3.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.5.tgz",
+      "integrity": "sha512-NxVFwLAnrd9i7KUBxC4DrUhmgjzOs+1Qm50D3oF1/oL+r1NpZ4gA7xvG0/zJ8evR7zIKn4vLf7qTNduWFtCrRw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
    "node_modules/csstype": {
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -4072,7 +4206,6 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "whatwg-mimetype": "^5.0.0",
@@ -4140,7 +4273,6 @@
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ms": "^2.1.3"
@@ -4158,7 +4290,6 @@
      "version": "10.6.0",
      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/deep-is": {
@@ -4276,6 +4407,15 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/dompurify": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.0.tgz",
+      "integrity": "sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "node_modules/dotenv": {
      "version": "16.6.1",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -4354,7 +4494,6 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">=0.12"
@@ -5584,7 +5723,6 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@exodus/bytes": "^1.6.0"
@@ -5600,12 +5738,38 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/http-status-codes": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.3.0.tgz",
      "integrity": "sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA==",
      "license": "MIT"
    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.7.2",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
@@ -5958,7 +6122,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/is-property": {
@@ -6125,6 +6288,81 @@
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
      "license": "ISC"
    },
+    "node_modules/isomorphic-dompurify": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/isomorphic-dompurify/-/isomorphic-dompurify-2.36.0.tgz",
+      "integrity": "sha512-E8YkGyPY3a/U5s0WOoc8Ok+3SWL/33yn2IHCoxCFLBUUPVy9WGa++akJZFxQCcJIhI+UvYhbrbnTIFQkHKZbgA==",
+      "license": "MIT",
+      "dependencies": {
+        "dompurify": "^3.3.1",
+        "jsdom": "^28.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.5"
+      }
+    },
+    "node_modules/isomorphic-dompurify/node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.8.1.tgz",
+      "integrity": "sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.1.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.6"
+      }
+    },
+    "node_modules/isomorphic-dompurify/node_modules/jsdom": {
+      "version": "28.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-28.1.0.tgz",
+      "integrity": "sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==",
+      "license": "MIT",
+      "dependencies": {
+        "@acemir/cssom": "^0.9.31",
+        "@asamuzakjp/dom-selector": "^6.8.1",
+        "@bramus/specificity": "^2.4.2",
+        "@exodus/bytes": "^1.11.0",
+        "cssstyle": "^6.0.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "parse5": "^8.0.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.0",
+        "undici": "^7.21.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/isomorphic-dompurify/node_modules/lru-cache": {
+      "version": "11.3.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.5.tgz",
+      "integrity": "sha512-NxVFwLAnrd9i7KUBxC4DrUhmgjzOs+1Qm50D3oF1/oL+r1NpZ4gA7xvG0/zJ8evR7zIKn4vLf7qTNduWFtCrRw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
    "node_modules/istanbul-lib-coverage": {
      "version": "3.2.2",
      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -6760,6 +6998,18 @@
        "node": ">=10"
      }
    },
+    "node_modules/marked": {
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
+      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -6774,7 +7024,6 @@
      "version": "2.27.1",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
-      "dev": true,
      "license": "CC0-1.0"
    },
    "node_modules/merge2": {
@@ -6838,7 +7087,6 @@
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/mysql2": {
@@ -7275,7 +7523,6 @@
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
      "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "entities": "^6.0.0"
@@ -7322,6 +7569,104 @@
      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
      "license": "MIT"
    },
+    "node_modules/pg": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
+      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-connection-string": "^2.12.0",
+        "pg-pool": "^3.13.0",
+        "pg-protocol": "^1.13.0",
+        "pg-types": "2.2.0",
+        "pgpass": "1.0.5"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "optionalDependencies": {
+        "pg-cloudflare": "^1.3.0"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pg-cloudflare": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
+      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/pg-connection-string": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
+      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
+      "license": "MIT"
+    },
+    "node_modules/pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/pg-pool": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
+      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "pg": ">=8.0"
+      }
+    },
+    "node_modules/pg-protocol": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
+      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
+      "license": "MIT"
+    },
+    "node_modules/pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pg-types/node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pgpass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.1.0"
+      }
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7404,6 +7749,45 @@
        "url": "https://github.com/sponsors/porsager"
      }
    },
+    "node_modules/postgres-array": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-3.0.4.tgz",
+      "integrity": "sha512-nAUSGfSDGOaOAEGwqsRY27GPOea7CNipJPOA7lPbdEpx5Kg3qzdP0AaWC5MlhTWV9s4hFX39nomVZ+C4tnGOJQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
+      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/prelude-ls": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7518,7 +7902,6 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6"
@@ -7882,7 +8265,6 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-      "dev": true,
      "license": "ISC",
      "dependencies": {
        "xmlchars": "^2.2.0"
@@ -8144,6 +8526,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
    "node_modules/sqlstring": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
@@ -8390,7 +8781,6 @@
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/tailwindcss": {
@@ -8492,7 +8882,6 @@
      "version": "7.0.28",
      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.28.tgz",
      "integrity": "sha512-+Zg3vWhRUv8B1maGSTFdev9mjoo8Etn2Ayfs4cnjlD3CsGkxXX4QyW3j2WJ0wdjYcYmy7Lx2RDsZMhgCWafKIw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "tldts-core": "^7.0.28"
@@ -8505,7 +8894,6 @@
      "version": "7.0.28",
      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.28.tgz",
      "integrity": "sha512-7W5Efjhsc3chVdFhqtaU0KtK32J37Zcr9RKtID54nG+tIpcY79CQK/veYPODxtD/LJ4Lue66jvrQzIX2Z2/pUQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/to-regex-range": {
@@ -8525,7 +8913,6 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
-      "dev": true,
      "license": "BSD-3-Clause",
      "dependencies": {
        "tldts": "^7.0.5"
@@ -8538,7 +8925,6 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "punycode": "^2.3.1"
@@ -8744,7 +9130,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/undici/-/undici-7.24.7.tgz",
      "integrity": "sha512-H/nlJ/h0ggGC+uRL3ovD+G0i4bqhvsDOpbDv7At5eFLlj2b41L8QliGbnl2H7SnDiYhENphh1tQFJZf+MyfLsQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=20.18.1"
@@ -8754,7 +9139,6 @@
      "version": "6.21.0",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/unrs-resolver": {
@@ -9045,7 +9429,6 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "xml-name-validator": "^5.0.0"
@@ -9058,7 +9441,6 @@
      "version": "8.0.1",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">=20"
@@ -9068,7 +9450,6 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=20"
@@ -9078,7 +9459,6 @@
      "version": "16.0.1",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@exodus/bytes": "^1.11.0",
@@ -9224,7 +9604,6 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
-      "dev": true,
      "license": "Apache-2.0",
      "engines": {
        "node": ">=18"
@@ -9234,9 +9613,17 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true,
      "license": "MIT"
    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -12,8 +12,12 @@
    "test:coverage": "vitest run --coverage"
  },
  "dependencies": {
+    "@prisma/adapter-pg": "^7.7.0",
    "@prisma/client": "^7.7.0",
+    "isomorphic-dompurify": "^2.29.0",
+    "marked": "^16.4.0",
    "next": "16.2.3",
+    "pg": "^8.13.1",
    "prisma": "^7.7.0",
    "react": "19.2.4",
    "react-dom": "19.2.4"
@@ -23,6 +27,7 @@
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
    "@types/node": "^20",
+    "@types/pg": "^8.11.10",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@vitejs/plugin-react": "^6.0.1",
@@ -0,0 +1,21 @@
+-- CreateTable
+CREATE TABLE "action_items" (
+    "id" TEXT NOT NULL,
+    "meetingId" TEXT NOT NULL,
+    "task" TEXT NOT NULL,
+    "isDone" BOOLEAN NOT NULL DEFAULT false,
+    "position" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "action_items_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "action_items_meetingId_position_idx" ON "action_items"("meetingId", "position");
+
+-- CreateIndex
+CREATE INDEX "action_items_isDone_idx" ON "action_items"("isDone");
+
+-- AddForeignKey
+ALTER TABLE "action_items" ADD CONSTRAINT "action_items_meetingId_fkey" FOREIGN KEY ("meetingId") REFERENCES "meetings"("id") ON DELETE CASCADE ON UPDATE CASCADE;
@@ -1,6 +1,5 @@
 generator client {
-  provider = "prisma-client"
-  output   = "../src/generated/prisma"
+  provider = "prisma-client-js"
 }

 datasource db {
@@ -31,10 +30,29 @@ model Meeting {

  status MeetingStatus @default(COMPLETED)

+  actionItems ActionItem[]
+
  @@index([createdAt])
  @@map("meetings")
 }

+model ActionItem {
+  id        String   @id @default(cuid())
+  meetingId String
+  meeting   Meeting  @relation(fields: [meetingId], references: [id], onDelete: Cascade)
+
+  task      String
+  isDone    Boolean  @default(false)
+  position  Int      @default(0)
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@index([meetingId, position])
+  @@index([isDone])
+  @@map("action_items")
+}
+
 enum MeetingStatus {
  CREATED
  UPLOADING
@@ -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 }])
+  })
+})
@@ -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')
+  })
+})
@@ -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)
+  })
+})
@@ -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')
+  })
+})
@@ -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)
@@ -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">&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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
  )
@@ -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,
        })
@@ -0,0 +1,31 @@
+export interface ParsedActionItem {
+  task: string
+  isDone: boolean
+}
+
+const CHECKBOX_LINE = /^\s*[-*]\s+\[(x|X|\s)\]\s+(.+)\s*$/
+
+/**
+ * 마크다운 텍스트에서 GFM 체크박스 줄(- [ ] / - [x])을 추출.
+ * "## 액션 아이템" 같은 섹션 안에 있든 어디 있든 모두 수집.
+ *
+ * 빈 task / 매우 짧은 task("none", "...")는 제외하여 노이즈 감소.
+ */
+export function parseActionItems(markdown: string): ParsedActionItem[] {
+  if (!markdown) return []
+
+  const items: ParsedActionItem[] = []
+  for (const line of markdown.split('\n')) {
+    const match = line.match(CHECKBOX_LINE)
+    if (!match) continue
+
+    const checked = match[1].toLowerCase() === 'x'
+    const task = match[2].trim()
+    if (task.length === 0) continue
+    if (task.length < 2) continue
+    if (/^[.…]+$/.test(task)) continue
+
+    items.push({ task, isDone: checked })
+  }
+  return items
+}
@@ -0,0 +1,36 @@
+'use client'
+
+const STORAGE_KEY = 'meeting-minutes:gemini-api-key'
+
+export function getStoredApiKey(): string | null {
+  if (typeof window === 'undefined') return null
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY)
+    return value && value.length > 0 ? value : null
+  } catch {
+    return null
+  }
+}
+
+export function setStoredApiKey(key: string): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(STORAGE_KEY, key)
+  } catch {
+    // ignore storage errors (private mode, quota)
+  }
+}
+
+export function clearStoredApiKey(): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.removeItem(STORAGE_KEY)
+  } catch {
+    // ignore
+  }
+}
+
+export function maskApiKey(key: string): string {
+  if (key.length <= 8) return '••••'
+  return `${key.slice(0, 4)}••••${key.slice(-4)}`
+}
@@ -0,0 +1,21 @@
+/**
+ * Gemini API 키 해석 우선순위:
+ * 1) 요청 body로 전달된 키 (브라우저 LocalStorage에서 옴)
+ * 2) process.env.GEMINI_API_KEY (서버 환경변수 fallback)
+ * 3) null
+ */
+export function resolveGeminiApiKey(
+  requestApiKey?: string | null | undefined,
+): string | null {
+  const fromRequest = typeof requestApiKey === 'string' ? requestApiKey.trim() : ''
+  if (fromRequest.length > 0) return fromRequest
+
+  const fromEnv = (process.env.GEMINI_API_KEY ?? '').trim()
+  if (fromEnv.length > 0) return fromEnv
+
+  return null
+}
+
+export function isEnvKeyConfigured(): boolean {
+  return (process.env.GEMINI_API_KEY ?? '').trim().length > 0
+}
@@ -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
@@ -1,22 +1,11 @@
+import { renderMarkdownToSafeHtml } from './markdown'
+
 export function exportAsMarkdown(markdown: string): Blob {
  return new Blob([markdown], { type: 'text/markdown;charset=utf-8' })
 }

 export function exportAsHtml(markdown: string, title: string): string {
-  const lines = markdown.split('\n')
-  const bodyHtml = lines
-    .map((line) => {
-      if (line.startsWith('# ')) return `<h1>${escapeHtml(line.slice(2))}</h1>`
-      if (line.startsWith('## ')) return `<h2>${escapeHtml(line.slice(3))}</h2>`
-      if (line.startsWith('### ')) return `<h3>${escapeHtml(line.slice(4))}</h3>`
-      if (line.startsWith('---')) return '<hr>'
-      if (line.startsWith('- ')) return `<li>${escapeHtml(line.slice(2))}</li>`
-      if (line.startsWith('**') && line.endsWith('**'))
-        return `<p><strong>${escapeHtml(line.slice(2, -2))}</strong></p>`
-      if (line.trim() === '') return ''
-      return `<p>${escapeHtml(line)}</p>`
-    })
-    .join('\n')
+  const body = renderMarkdownToSafeHtml(markdown)

  return `<!DOCTYPE html>
 <html lang="ko">
@@ -26,22 +15,47 @@ export function exportAsHtml(markdown: string, title: string): string {
  <title>${escapeHtml(title)}</title>
  <style>
    body {
-      font-family: 'Noto Sans KR', Arial, sans-serif;
+      font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
-      line-height: 1.6;
-      color: #333;
+      line-height: 1.7;
+      color: #1f2937;
    }
-    h1 { font-size: 1.8rem; border-bottom: 2px solid #333; padding-bottom: 0.5rem; }
-    h2 { font-size: 1.4rem; color: #555; margin-top: 1.5rem; }
-    hr { border: none; border-top: 1px solid #ddd; margin: 1.5rem 0; }
-    p { margin: 0.5rem 0; }
-    li { margin: 0.3rem 0; }
+    h1 { font-size: 1.9rem; border-bottom: 2px solid #1f2937; padding-bottom: 0.5rem; margin-top: 0; }
+    h2 { font-size: 1.4rem; color: #374151; margin-top: 2rem; }
+    h3 { font-size: 1.15rem; color: #4b5563; margin-top: 1.5rem; }
+    hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }
+    p { margin: 0.75rem 0; }
+    ul, ol { margin: 0.5rem 0; padding-left: 1.5rem; }
+    li { margin: 0.25rem 0; }
+    li > input[type="checkbox"] { margin-right: 0.4rem; }
+    code {
+      background: #f3f4f6;
+      padding: 0.1rem 0.35rem;
+      border-radius: 4px;
+      font-size: 0.9em;
+    }
+    pre {
+      background: #f9fafb;
+      padding: 0.9rem;
+      border-radius: 6px;
+      overflow-x: auto;
+    }
+    pre code { background: none; padding: 0; }
+    blockquote {
+      border-left: 4px solid #d1d5db;
+      margin: 0.75rem 0;
+      padding: 0.25rem 0 0.25rem 1rem;
+      color: #4b5563;
+    }
+    table { border-collapse: collapse; margin: 0.75rem 0; }
+    th, td { border: 1px solid #e5e7eb; padding: 0.4rem 0.75rem; }
+    th { background: #f9fafb; }
  </style>
 </head>
 <body>
-${bodyHtml}
+${body}
 </body>
 </html>`
 }
@@ -0,0 +1,79 @@
+import { marked } from 'marked'
+import DOMPurify from 'isomorphic-dompurify'
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+})
+
+export function renderMarkdownToSafeHtml(markdown: string): string {
+  if (!markdown) return ''
+  const rawHtml = marked.parse(markdown) as string
+  return DOMPurify.sanitize(rawHtml, {
+    USE_PROFILES: { html: true },
+  })
+}
+
+export function markdownToPlainText(markdown: string, maxLength = 160): string {
+  const html = marked.parse(markdown) as string
+  const stripped = html
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+  if (stripped.length <= maxLength) return stripped
+  return stripped.slice(0, maxLength) + '...'
+}
+
+/**
+ * 마크다운 → 클립보드에 (text/html + text/plain) 복사.
+ * Google Docs / Notion / Word 등에 붙여넣으면 서식이 유지됨.
+ *
+ * @returns true 복사 성공, false fallback도 실패 시
+ */
+export async function copyMarkdownAsRichText(
+  markdown: string,
+): Promise<boolean> {
+  if (typeof navigator === 'undefined' || !markdown) return false
+
+  const html = renderMarkdownToSafeHtml(markdown)
+  const wrappedHtml = `<div>${html}</div>`
+
+  try {
+    if ('clipboard' in navigator && 'write' in navigator.clipboard) {
+      const ClipboardItemRef = (window as unknown as { ClipboardItem?: typeof ClipboardItem }).ClipboardItem
+      if (ClipboardItemRef) {
+        await navigator.clipboard.write([
+          new ClipboardItemRef({
+            'text/html': new Blob([wrappedHtml], { type: 'text/html' }),
+            'text/plain': new Blob([markdown], { type: 'text/plain' }),
+          }),
+        ])
+        return true
+      }
+    }
+  } catch {
+    // fall through to legacy path
+  }
+
+  // Fallback: 임시 contenteditable로 execCommand
+  try {
+    const container = document.createElement('div')
+    container.contentEditable = 'true'
+    container.style.position = 'fixed'
+    container.style.opacity = '0'
+    container.style.pointerEvents = 'none'
+    container.innerHTML = wrappedHtml
+    document.body.appendChild(container)
+    const range = document.createRange()
+    range.selectNodeContents(container)
+    const selection = window.getSelection()
+    selection?.removeAllRanges()
+    selection?.addRange(range)
+    const ok = document.execCommand('copy')
+    selection?.removeAllRanges()
+    container.remove()
+    return ok
+  } catch {
+    return false
+  }
+}