{"parentUuid":null,"isSidechain":true,"promptId":"3271a40f-35c4-4faa-a163-7848af7dc31b","agentId":"abfbe7acee9e43edc","type":"user","message":{"role":"user","content":"connect-b 수정. 두 가지 추가 기능:\n1. /policyholders/new 페이지에서 직접 이미지 업로드 → OCR → 폼 자동 채움 (현재는 /capture로 이동 링크만)\n2. 윈도우 클립보드 이미지 paste (Ctrl+V) 지원 — /capture + 신규 고객등록 둘 다\n\n## Context\n\n- 작업 디렉토리: `/home/lucas/.www/connect-b`\n- 직전 commit: `4586022` (임포트 표 운영 엑셀화)\n- 라이브: https://con.lucas-ai.cc\n- 기존 OCR API: POST /api/captures (kind=POLICYHOLDER) → extracted JSON 반환\n- compressImage: lib/compressImage.ts (File → base64)\n- /capture/upload-form.tsx: 이미 파일 선택 + 압축 + POST 흐름 있음\n\n## 작업\n\n### 1. 공통 ImagePicker 컴포넌트 `components/ui/image-picker.tsx` (신규)\n\n파일 선택 + paste 둘 다 지원하는 재사용 가능한 컴포넌트:\n\n```typescript\n// 이미지 선택 — 파일 input + 클립보드 paste 지원\n'use client';\n\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Upload, X, FileImage, Clipboard } from 'lucide-react';\n\ninterface Props {\n onFileSelected: (file: File | null) => void;\n pasteHelp?: boolean;\n className?: string;\n}\n\nexport function ImagePicker({ onFileSelected, pasteHelp = true, className }: Props) {\n const [file, setFile] = useState(null);\n const [pasteHint, setPasteHint] = useState(false);\n const inputRef = useRef(null);\n\n const select = useCallback((f: File | null) => {\n setFile(f);\n onFileSelected(f);\n }, [onFileSelected]);\n\n const handlePaste = useCallback((e: ClipboardEvent) => {\n const items = e.clipboardData?.items;\n if (!items) return;\n for (let i = 0; i < items.length; i++) {\n const it = items[i];\n if (it.type.startsWith('image/')) {\n const f = it.getAsFile();\n if (f) {\n e.preventDefault();\n const ext = it.type.split('/')[1] || 'png';\n const named = new File([f], `clipboard-${Date.now()}.${ext}`, { type: it.type });\n select(named);\n setPasteHint(true);\n setTimeout(() => setPasteHint(false), 2000);\n }\n return;\n }\n }\n }, [select]);\n\n useEffect(() => {\n document.addEventListener('paste', handlePaste);\n return () => document.removeEventListener('paste', handlePaste);\n }, [handlePaste]);\n\n function clear() {\n select(null);\n if (inputRef.current) inputRef.current.value = '';\n }\n\n const fileInfo = file ? {\n name: file.name,\n sizeKB: Math.round(file.size / 1024),\n type: file.type || '알 수 없음',\n modified: new Date(file.lastModified).toLocaleString('ko-KR'),\n } : null;\n\n return (\n
\n
\n select(e.target.files?.[0] ?? null)}\n className=\"block w-full text-sm text-fg file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:bg-primary file:text-primary-fg hover:file:bg-primary-hover\"\n />\n {pasteHelp && (\n

\n \n 윈도우/맥에서 캡처 후 Ctrl+V (또는 ⌘+V)로 바로 붙여넣기 가능\n {pasteHint && — 붙여넣기 완료}\n

\n )}\n {fileInfo && (\n
\n \n
\n

{fileInfo.name}

\n

{fileInfo.sizeKB.toLocaleString('ko-KR')} KB · {fileInfo.type}

\n

수정: {fileInfo.modified}

\n
\n \n
\n )}\n
\n
\n );\n}\n```\n\n### 2. /capture/upload-form.tsx 갱신 — ImagePicker 사용\n\n기존 파일 input 부분을 ``로 교체. fileInfo/clear 로직 ImagePicker 안으로 이동했으므로 기존 코드 정리.\n\n### 3. /policyholders/new 페이지 — OCR 인라인 통합\n\n현재 `app/(app)/policyholders/new/page.tsx` 확인:\n\n```bash\ncat app/\\(app\\)/policyholders/new/page.tsx\n```\n\n폼 컴포넌트 분리 필요할 수도. 클라이언트 컴포넌트로 만들어 OCR + 폼 통합.\n\n새 구조:\n- `app/(app)/policyholders/new/page.tsx` (server, 메타데이터/래퍼)\n- `app/(app)/policyholders/new/new-policyholder-form.tsx` (client, OCR + 폼)\n\n```typescript\n// new-policyholder-form.tsx\n'use client';\n\nimport { useState, useTransition } from 'react';\nimport { useRouter } from 'next/navigation';\nimport Link from 'next/link';\nimport { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { ArrowLeft, Wand2, Camera } from 'lucide-react';\nimport { ImagePicker } from '@/components/ui/image-picker';\nimport { compressImage } from '@/lib/compressImage';\nimport { safeJson } from '@/lib/safe-fetch';\n\nexport function NewPolicyholderForm() {\n const router = useRouter();\n const [ocrFile, setOcrFile] = useState(null);\n const [ocrPending, startOcrTransition] = useTransition();\n const [ocrMsg, setOcrMsg] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);\n\n const [savePending, startSaveTransition] = useTransition();\n const [saveError, setSaveError] = useState(null);\n\n const [form, setForm] = useState({\n name: '', phone: '', ssn: '', email: '', address: '', job: '', memo: '',\n birthDate: '', gender: '',\n });\n function update(k: K, v: string) {\n setForm((f) => ({ ...f, [k]: v }));\n }\n\n async function runOcr() {\n if (!ocrFile) { setOcrMsg({ type: 'err', text: '이미지를 선택하세요' }); return; }\n setOcrMsg(null);\n\n startOcrTransition(async () => {\n let compressedFile: File;\n try {\n const { base64, mediaType } = await compressImage(ocrFile);\n const binary = atob(base64);\n const bytes = new Uint8Array(binary.length);\n for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);\n const blob = new Blob([bytes], { type: mediaType });\n compressedFile = new File([blob], ocrFile.name.replace(/\\.[^.]+$/, '') + '.jpg', { type: mediaType });\n } catch (e) {\n setOcrMsg({ type: 'err', text: `압축 실패: ${e instanceof Error ? e.message : String(e)}` });\n return;\n }\n\n const fd = new FormData();\n fd.append('kind', 'POLICYHOLDER');\n fd.append('file', compressedFile);\n\n const res = await fetch('/api/captures', { method: 'POST', body: fd, cache: 'no-store' });\n const j = await safeJson(res);\n if (!res.ok) {\n setOcrMsg({ type: 'err', text: (j.error as string) ?? `오류 (${res.status})` });\n return;\n }\n const ex = (j.extracted ?? {}) as Record;\n const str = (v: unknown) => v == null ? '' : String(v);\n setForm({\n name: str(ex.name),\n phone: str(ex.phone),\n ssn: str(ex.ssn),\n email: '',\n address: str(ex.address),\n job: str(ex.job),\n memo: '',\n birthDate: str(ex.birthDate),\n gender: str(ex.gender),\n });\n setOcrMsg({ type: 'ok', text: '추출 완료 — 폼이 채워졌습니다. 확인 후 저장하세요.' });\n });\n }\n\n async function submit(e: React.FormEvent) {\n e.preventDefault();\n setSaveError(null);\n startSaveTransition(async () => {\n const res = await fetch('/api/policyholders', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(form),\n });\n const j = await safeJson(res);\n if (!res.ok) {\n const msg = j.error ?? '저장 실패';\n const detail = Array.isArray(j.issues) ? (j.issues as Array<{ path: string[]; message: string }>).map((i) => `${i.path.join('.')}: ${i.message}`).join('\\n') : '';\n setSaveError(detail ? `${msg}\\n${detail}` : (msg as string));\n return;\n }\n router.push('/policyholders');\n router.refresh();\n });\n }\n\n return (\n
\n \n 고객 목록\n \n\n \n \n \n \n 이미지로 자동 채우기 (선택)\n \n \n \n

본사 시스템 개인고객등록 화면을 캡처해 올리면 아래 폼이 자동으로 채워집니다. Ctrl+V로 클립보드 이미지도 가능.

\n \n \n {ocrMsg && (\n
{ocrMsg.text}
\n )}\n \n \n\n \n 고객 신규 등록\n \n
\n update('name', v)} />\n
\n update('phone', v)} placeholder=\"010-1234-5678\" />\n update('ssn', v)} placeholder=\"490121-2019625\" />\n
\n
\n update('birthDate', v)} placeholder=\"1977-02-10\" />\n
\n \n \n
\n
\n update('address', v)} />\n
\n update('job', v)} />\n update('email', v)} />\n
\n
\n \n