mirror of https://github.com/nad4-su/meeting-minutes.git synced 2026-08-12 22:33:25 +09:00

Files

T

nad4andGitHub 908cc860e8 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-04-28 16:41:24 +09:00

12 KiB

Raw Blame History

Meeting Minutes — 실시간 AI 회의록

음성 녹음을 실시간으로 텍스트·요약으로 변환하고, 구조화된 회의록을 자동 생성하는 웹 서비스.

향후 로드맵 — 노션 AI Meeting Notes 수준의 워크스페이스: 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. 준비

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에서 무료 발급)

키가 없어도 "단순 변환" 모드는 정상 동작. Gemini 모드를 쓰려면 둘 중 하나는 필요.

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

docker compose --profile tools run --rm migrate

이 명령은 db 컨테이너를 자동 기동하고 prisma migrate deploy로 테이블을 생성합니다.

3. 기동

docker compose up -d --build

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

4. 확인 방법

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

서비스 관리

docker compose logs -f app           # 로그
docker compose restart app           # 재시작
docker compose down                  # 중지 (데이터 유지)
docker compose down -v               # 중지 + 볼륨 삭제
docker compose up -d --build         # 코드 변경 후 재빌드

테스트 (Docker)

docker compose --profile tools run --rm test

별도 Node 설치 불필요. tools 프로필 컨테이너에서 vitest 실행.

로컬 개발 (Docker 없이)

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

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

진행 관리

gh auth login 후 bash docs/CREATE_ISSUES.sh — 4개 epic issue 자동 생성
이슈당 1 브랜치 1 PR 원칙
PR 머지 전 docker compose --profile tools run --rm test 필수
완료 시 docs/ROADMAP.md 체크박스 업데이트

알려진 제약

Chrome 전용: Web Speech API 비표준 — Safari/Firefox는 제한적
화자 구분 불가: 의도적 비지원 (개인용 범위를 넘음)
Gemini 무료 등급: 15 RPM / 1000 RPD — 개인 사용에 충분하나 팀 단위는 유료 전환 권장
검색: 현재 PostgreSQL ILIKE(contains) 방식. 수천 건 이상 저장 시 tsvector GIN 인덱스로 후속 업그레이드 예정

12 KiB Raw Blame History