nad4/meeting-minutes
1
0
Fork 0
mirror of https://github.com/nad4-su/meeting-minutes.git synced 2026-08-12 22:33:25 +09:00
Code Issues Packages Projects Releases Wiki Activity

Phase 2: 액션 아이템 + Google Docs 호환 복사 (#4)

Browse Source 
* feat(phase-1): 저장/목록/상세 UI + 마크다운 라이브러리 + 검색

ROADMAP Phase 1 #3~#7 완료.

## Markdown 렌더링 (#6)
- marked + isomorphic-dompurify 도입
- src/lib/markdown.ts 공용 유틸 (renderMarkdownToSafeHtml + markdownToPlainText)
- 기존 커스텀 파서(export-minutes.ts) 교체 — 표/리스트/인용/코드블록 정상 렌더
- globals.css에 .prose-minutes 스타일 추가

## 저장 버튼 (#3)
- MinutesViewer에 📌 저장 버튼 + 상태별 피드백
- 미리보기/원문 토글
- 저장 성공 시 /meetings/[id] 상세 링크 배너
- URL.revokeObjectURL 타이밍을 setTimeout으로 지연 (Firefox/Safari 호환)

## 목록 페이지 (#4)
- /meetings 서버 컴포넌트, 페이지네이션 (prev/next)
- MeetingCard: 제목/날짜/템플릿 배지/참석자/태그/preview
- 빈 상태 UI (검색 결과 없음 / 첫 녹음 안내)
- preview는 markdown → plain text 변환 후 160자로 자르기

## 상세 페이지 + 편집 (#5)
- /meetings/[id] 서버 컴포넌트 + 클라이언트 편집 island
- 제목/본문/참석자/태그 인라인 편집
- 편집 모드에서 좌(textarea) · 우(live preview) 분할
- 삭제 버튼 (confirm)
- 원본 transcript는 <details>로 접어둠

## 검색 (#7)
- MeetingSearchBar 클라이언트 컴포넌트
- 300ms debounce + useTransition + URL query 동기화 (replace, scroll false)
- 서버에서 ILIKE contains로 title/transcript/markdown 검색
- tsvector GIN 인덱스는 후속 최적화로 분리 (개인용 규모에서 ILIKE 충분)

## Prisma 7 호환
- @prisma/adapter-pg + pg 추가 (driver adapter 필수)
- generator를 prisma-client-js로 전환 (안정적 레거시)
- src/lib/db.ts에 PrismaPg 어댑터 사용 + DATABASE_URL 누락 시 placeholder로 fallback
- DB 접근 페이지/라우트에 export const dynamic = 'force-dynamic' 추가
  (Next 16 pre-render 시 Prisma 초기화 회피)
- Dockerfile에서 src/generated 복사 제거, .gitignore도 정리

## UX
- 메인 페이지 우상단 "📚 저장된 회의록" 링크 추가

## 테스트
- src/__tests__/markdown.test.ts 9개 신규 (렌더/sanitize/plain text)
- 전체: 80 tests passing (이전 71 + 9)

* docs: PR#2 본문 드래프트 추가

* feat(phase-1.5): 웹에서 Gemini API 키 설정 (LocalStorage)

.env를 만지지 않고도 브라우저에서 키를 설정·관리할 수 있게 함.
개인용 단일 인스턴스 가정으로 LocalStorage만 사용 (DB 미관여).

## 구조
- src/lib/api-keys.ts (서버): resolveGeminiApiKey() 우선순위
  요청 body 키 → process.env.GEMINI_API_KEY → null
- src/lib/api-key-storage.ts (클라이언트): get/set/clear/maskApiKey
- /api/settings/status: 환경변수 키 존재 여부만 노출 (값 X)
- /api/settings/test: 키로 짧은 Gemini 호출 → 200/401/403/429 분류
- /settings 페이지: 입력/저장/삭제/마스킹 표시/테스트 호출

## 라우트 변경
- /api/summarize, /api/summarize-live가 body.apiKey 수용
- 키 없을 때 summarize는 단순 변환으로 폴백 (UX 보존)
- summarize-live는 503 + 안내 메시지 (라이브 요약은 키 필수)

## UI
- 메인 헤더에 ⚙️ 설정 링크 추가
- 설정 페이지에 현재 키 소스 배지 (브라우저 / 환경변수 / 없음)
- 보이기/숨기기 토글, 테스트 호출 버튼, 보안 안내

## 테스트
- api-keys.test.ts: 7개 (요청>env, 공백 처리, env 미설정 시 null)
- api-key-storage.test.ts: 7개 (LocalStorage CRUD + 마스킹)
- 전체: 94 tests (이전 80 + 14)

## 비목표 (개인용 가정)
- 다중 사용자 / 권한
- DB 영속화 / 키 암호화

* docs: PR#3 본문 드래프트 추가

* feat(phase-2): 액션 아이템 추출/체크리스트 + Google Docs 호환 복사

## 액션 아이템 (ROADMAP #8~#11)
ROADMAP의 Gemini JSON 출력 대신 마크다운 체크박스 휴리스틱 채택.
모든 템플릿이 이미 - [ ] 형식 출력하므로 Gemini 호출 비용 0.

### Schema
- ActionItem 테이블 추가 (Meeting 1:N, cascade delete)
- 필드: id, meetingId, task, isDone, position, createdAt, updatedAt
- 인덱스: (meetingId, position) / isDone
- 마이그레이션 20260428071709_add_action_items

### 추출 (src/lib/action-items.ts)
- /^\s*[-*]\s+\[(x|X|\s)\]\s+(.+)/ 매칭
- 빈/짧은(<2자)/점만(...) task 노이즈 제거
- 들여쓰기/대문자 X 모두 허용
- 단위 테스트 8개

### API
- POST /api/meetings: 마크다운에서 액션 아이템 자동 추출 후 함께 저장
- GET /api/meetings (목록): _count로 미완료 액션 카운트 포함
- GET /api/meetings/[id] (상세): actionItems include
- PATCH /api/action-items/[id]: isDone 토글, task 수정
- DELETE /api/action-items/[id]
- POST /api/meetings/[id]/reparse-action-items: 마크다운 재파싱으로 교체

### UI
- ActionItemList 컴포넌트: 체크박스 + 낙관적 업데이트 + 진행률(완료/전체)
  + 개별 삭제 (hover ✕) + 🔄 재추출 버튼
- MeetingDetail에 통합 (조회 모드에서만 노출, 편집 중에는 숨김)
- MeetingCard에 미완료 카운트 배지 (✅ N 미완료)
- /meetings 상단에 "내 미완료 액션 (최근 5)" 위젯

### 비목표 (이번 단계)
- assignee/dueDate 필드 — Gemini JSON 모드 도입 시 추가
- 홈 페이지 대시보드 승격 — 녹음 흐름 보존이 우선

## Google Docs 호환 복사
- src/lib/markdown.ts: copyMarkdownAsRichText()
  - ClipboardItem({text/html, text/plain}) 우선
  - 미지원 브라우저는 contenteditable + execCommand 폴백
- MinutesViewer / MeetingDetail에 📋 Docs용 버튼 추가
- 기존 .md 복사는 📋 .md로 분리 라벨링
- 다운로드 버튼은 ⬇ 접두로 구분

## 테스트
- action-items.test.ts: 8개 (다양한 마크다운 패턴)
- 전체: 102 tests passing (이전 94 + 8)

* docs: PR#4 본문 드래프트 추가
This commit is contained in:
nad4
2026-04-28 16:41:24 +09:00
committed by GitHub
parent cf6613bb94
commit 908cc860e8
40 changed files with 3153 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+73 -15
View File
@@ -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 인덱스로 후속 업그레이드 예정