mirror of
https://github.com/nad4-su/meeting-minutes.git
synced 2026-08-12 22:33:25 +09:00
nad4andGitHub
908cc860e8
* 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 본문 드래프트 추가
256 lines
12 KiB
Markdown
256 lines
12 KiB
Markdown
# Meeting Minutes — 실시간 AI 회의록
|
|
|
|
음성 녹음을 실시간으로 텍스트·요약으로 변환하고, 구조화된 회의록을 자동 생성하는 웹 서비스.
|
|
|
|
향후 로드맵 — 노션 AI Meeting Notes 수준의 워크스페이스: [`docs/ROADMAP.md`](docs/ROADMAP.md)
|
|
|
|
---
|
|
|
|
## 현재 기능 (Phase 0 + 0.5 + 1 + 1.5 + 2)
|
|
|
|
### 녹음 & 전사
|
|
- 브라우저 실시간 음성 인식 (Web Speech API · Chrome `ko-KR`)
|
|
- 네트워크 끊김 시 **자동 재연결** (최대 8회) — 누적 transcript 보존
|
|
- 파일 업로드: MP3, WAV, WebM, M4A, OGG, FLAC (최대 500MB)
|
|
- 인식된 텍스트는 textarea에서 직접 편집 가능
|
|
|
|
### AI 요약 (Gemini)
|
|
- **실시간 회의록**: 녹음 중 30초 간격으로 Gemini가 중간 요약 갱신 (25단어 이상, 40단어 증분 게이트)
|
|
- **최종 회의록**: 녹음 중지 시 자동 생성
|
|
- 모델: `gemini-2.5-flash-lite` (개인 무료 등급에서 여유있게 동작)
|
|
- 429 쿼터 초과 시 **60초 쿨다운** + UI 안내, 그 외 실패는 지수 백오프
|
|
- Gemini 실패 시 **단순 변환 마크다운으로 자동 폴백** — 결과물은 항상 보장
|
|
- 내보내기: Markdown(.md), HTML(.html), 클립보드 복사
|
|
|
|
### 템플릿 & 강도 조절 (Phase 0.5)
|
|
용도에 맞게 출력 구조와 요약 깊이를 조절할 수 있음.
|
|
|
|
| 템플릿 | 생성되는 구조 | 기본 강도 | 라이브 요약 |
|
|
|---|---|---|---|
|
|
| 🗂️ 회의록 | 요약 / 논의 / 액션 / 결정 | 표준 | ✅ |
|
|
| 🎓 강의·세미나 노트 | 핵심 개념 / 예시 / 인용 / 후속 질문 | 상세 | ✅ |
|
|
| 🤝 1:1 미팅 | 주제 / 고민 / 피드백 / 다음 액션 | 표준 | ✅ |
|
|
| 💡 브레인스토밍 | 카테고리별 아이디어 / 즉시 시도 / 보류 | 상세 | ✅ |
|
|
| 🎤 인터뷰 | Q&A 포맷 / 인상적 발언 / 종합 | 표준 | ❌ |
|
|
| 📝 원문 정리 | 요약 없이 문단화·오탈자 정리만 | 상세 고정 | ❌ |
|
|
| ⚙️ 커스텀 | 자유 프롬프트 입력 | - | ✅ |
|
|
|
|
강도 3단계:
|
|
- **간결** — 각 섹션 3줄 이내
|
|
- **표준** — 맥락이 이해될 정도
|
|
- **상세** — 세부사항·수치 누락 없이 보존
|
|
|
|
### 액션 아이템 (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 텍스트는 회색 이탤릭 + 깜빡이는 커서
|
|
- 새 내용 도착 시 자동 스크롤
|
|
- 진행률 바 (첫 요약까지 단어 수), 쿨다운 카운터
|
|
- 템플릿/강도 변경 시 라이브 요약도 즉시 반영
|
|
- 메인 화면 상단 우측 `📚 저장된 회의록` 링크 → 목록으로 이동
|
|
|
|
---
|
|
|
|
## 기술 스택
|
|
|
|
| 구분 | 기술 |
|
|
|------|------|
|
|
| 프레임워크 | 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 (driver adapter `@prisma/adapter-pg`) |
|
|
| Markdown | `marked` + `isomorphic-dompurify` |
|
|
| 테스트 | Vitest (102 tests, jsdom) |
|
|
| 배포 | Docker Compose (app + db + test profile) |
|
|
|
|
---
|
|
|
|
## 빠른 시작 (Docker Compose)
|
|
|
|
### 1. 준비
|
|
|
|
```bash
|
|
git clone git@github.com:nad4-su/meeting-minutes.git
|
|
cd meeting-minutes
|
|
cp .env.example .env
|
|
```
|
|
|
|
**Gemini API 키 설정 — 두 가지 방법 중 선택**:
|
|
- (A) **웹 UI** — 앱 기동 후 `/settings` 페이지에서 입력 (브라우저 LocalStorage 저장, 추천)
|
|
- (B) **`.env` 환경변수** — `GEMINI_API_KEY=AIza...` 작성 ([Google AI Studio](https://aistudio.google.com/apikey)에서 무료 발급)
|
|
|
|
> 키가 없어도 "단순 변환" 모드는 정상 동작. Gemini 모드를 쓰려면 둘 중 하나는 필요.
|
|
|
|
### 2. DB 마이그레이션 (최초 1회 + 스키마 변경 시)
|
|
|
|
```bash
|
|
docker compose --profile tools run --rm migrate
|
|
```
|
|
|
|
이 명령은 `db` 컨테이너를 자동 기동하고 `prisma migrate deploy`로 테이블을 생성합니다.
|
|
|
|
### 3. 기동
|
|
|
|
```bash
|
|
docker compose up -d --build
|
|
```
|
|
|
|
브라우저에서 [http://localhost:3000](http://localhost:3000) 접속 → **Chrome 권장** (Web Speech API).
|
|
|
|
### 4. 확인 방법
|
|
|
|
1. 회의 제목 입력 (선택)
|
|
2. **Gemini AI 요약** 모드 + 원하는 **템플릿** / **강도** 선택
|
|
3. **녹음 시작** → 마이크 권한 허용
|
|
4. 말하기 시작 → 좌측 실시간 텍스트, 25단어 이상 쌓이면 우측에 중간 회의록 생성
|
|
5. **녹음 중지** → 최종 회의록이 페이지 하단에 자동 생성됨
|
|
6. **`📌 저장`** 버튼 → `/meetings/[id]`로 영속화
|
|
7. 상단 **`📚 저장된 회의록`** 링크 → 목록·검색·편집
|
|
|
|
### 서비스 관리
|
|
|
|
```bash
|
|
docker compose logs -f app # 로그
|
|
docker compose restart app # 재시작
|
|
docker compose down # 중지 (데이터 유지)
|
|
docker compose down -v # 중지 + 볼륨 삭제
|
|
docker compose up -d --build # 코드 변경 후 재빌드
|
|
```
|
|
|
|
### 테스트 (Docker)
|
|
|
|
```bash
|
|
docker compose --profile tools run --rm test
|
|
```
|
|
|
|
별도 Node 설치 불필요. `tools` 프로필 컨테이너에서 `vitest` 실행.
|
|
|
|
---
|
|
|
|
## 로컬 개발 (Docker 없이)
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # http://localhost:3000
|
|
npm test # 전체 테스트
|
|
npm run test:coverage # 커버리지 리포트
|
|
```
|
|
|
|
---
|
|
|
|
## 프로젝트 구조
|
|
|
|
```
|
|
src/
|
|
├── app/
|
|
│ ├── api/
|
|
│ │ ├── upload/route.ts # 파일 업로드
|
|
│ │ ├── summarize/route.ts # 최종 회의록 (Gemini + simple fallback)
|
|
│ │ ├── 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
|
|
│ ├── templates.ts # 템플릿 레지스트리 + 프롬프트 빌더
|
|
│ ├── minutes-generator.ts # 최종 요약 생성 (템플릿 적용)
|
|
│ ├── live-summary.ts # 롤링 요약 생성 (템플릿 적용)
|
|
│ └── export-minutes.ts
|
|
├── hooks/
|
|
│ ├── useSpeechRecognition.ts # Web Speech API + 네트워크 재시도
|
|
│ └── useLiveSummary.ts # 30s 폴링 + 429 쿨다운 + 증분 게이트
|
|
├── components/
|
|
│ ├── upload/AudioUploader.tsx
|
|
│ ├── recorder/LiveRecorder.tsx # 좌우 분할 뷰
|
|
│ ├── 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 모델
|
|
└── migrations/ # 마이그레이션 히스토리
|
|
```
|
|
|
|
---
|
|
|
|
## 로드맵 요약
|
|
|
|
상세: [`docs/ROADMAP.md`](docs/ROADMAP.md)
|
|
|
|
| Phase | 내용 | 상태 |
|
|
|---|---|---|
|
|
| **0** | 실시간 전사 + 롤링 요약 + 자동 최종 생성 | ✅ 완료 |
|
|
| **0.5** | 템플릿 (6종) + 강도 조절 (3단계) + 커스텀 프롬프트 | ✅ 완료 |
|
|
| **1** | 회의 저장/조회/검색 워크스페이스 | ✅ 완료 |
|
|
| **1.5** | 웹에서 Gemini 키 설정 (LocalStorage) | ✅ 완료 |
|
|
| **2** | 액션 아이템 추출/체크리스트 + Google Docs 복사 | ✅ 완료 |
|
|
| **3** | 참석자 + 태그 시스템 | 📋 기획됨 |
|
|
| **4** | 차별화 기능 (캘린더, AI Q&A, 블록 에디터) | 💡 선택 |
|
|
|
|
### 진행 관리
|
|
1. `gh auth login` 후 `bash docs/CREATE_ISSUES.sh` — 4개 epic issue 자동 생성
|
|
2. 이슈당 1 브랜치 1 PR 원칙
|
|
3. PR 머지 전 `docker compose --profile tools run --rm test` 필수
|
|
4. 완료 시 `docs/ROADMAP.md` 체크박스 업데이트
|
|
|
|
---
|
|
|
|
## 알려진 제약
|
|
|
|
- **Chrome 전용**: Web Speech API 비표준 — Safari/Firefox는 제한적
|
|
- **화자 구분 불가**: 의도적 비지원 (개인용 범위를 넘음)
|
|
- **Gemini 무료 등급**: 15 RPM / 1000 RPD — 개인 사용에 충분하나 팀 단위는 유료 전환 권장
|
|
- **검색**: 현재 PostgreSQL `ILIKE`(contains) 방식. 수천 건 이상 저장 시 `tsvector` GIN 인덱스로 후속 업그레이드 예정
|