feat: 회의록 자동 작성 웹 서비스 구현

- 오디오 파일 업로드 + 유효성 검사 - 실시간 음성 인식 (Web Speech API) - 회의록 생성 (단순 STT→MD 변환 / Gemini AI 요약) - 마크다운/HTML 내보내기 - PostgreSQL + Prisma ORM - Docker Compose 배포 지원 - TDD: 31개 테스트, 96% 커버리지
2026-08-12 22:33:25 +09:00 · 2026-04-11 23:18:05 +09:00
parent b5743fe896
commit adb48c2352
31 changed files with 4288 additions and 82 deletions
@@ -0,0 +1,82 @@
+'use client'
+
+import { exportAsMarkdown, exportAsHtml, generateDownloadFilename } from '@/lib/export-minutes'
+
+interface MinutesViewerProps {
+  markdown: string
+  title: string
+  mode: 'simple' | 'gemini'
+}
+
+export function MinutesViewer({ markdown, title, mode }: MinutesViewerProps) {
+  function download(type: 'md' | 'html') {
+    const filename = generateDownloadFilename(title, new Date())
+
+    if (type === 'md') {
+      const blob = exportAsMarkdown(markdown)
+      triggerDownload(blob, `${filename}.md`)
+    } else {
+      const html = exportAsHtml(markdown, title)
+      const blob = new Blob([html], { type: 'text/html;charset=utf-8' })
+      triggerDownload(blob, `${filename}.html`)
+    }
+  }
+
+  function triggerDownload(blob: Blob, filename: string) {
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function copyToClipboard() {
+    navigator.clipboard.writeText(markdown)
+  }
+
+  const modeLabel = mode === 'gemini' ? 'Gemini AI 요약' : '단순 변환'
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <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'
+          }`}>
+            {modeLabel}
+          </span>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={copyToClipboard}
+            className="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50 transition-colors"
+          >
+            복사
+          </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 다운로드
+          </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 다운로드
+          </button>
+        </div>
+      </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>
+      </div>
+    </div>
+  )
+}