+ {/* 진행률 */}
+
+
+
0 ? Math.round(sessionData.answered_questions / sessionData.total_questions * 100) : 0}%` }} />
+
+
{sessionData.answered_questions}/{sessionData.total_questions}
+
+
+ {Object.entries(grouped).map(([tplId, { template, answers }]) => (
+
+
+ {template?.name || `항목 ${tplId}`}
+
+
+ {answers.map(ans => (
+ handleSaveAnswer(sessionData.id, ans.interview_question_id, data)} />
+ ))}
+
+
+ ))}
+
+ {sessionData.status === 'in_progress' && (
+
+
+
+ )}
+
+ );
+}
+
+// ============================================================
+// 구조화 답변 행
+// ============================================================
+function StructuredAnswerRow({ answer, onSave }) {
+ const q = answer.question;
+ const qType = q?.question_type || 'checkbox';
+ const typeLabel = QUESTION_TYPE_LABELS[qType] || qType;
+
+ const handleCheckToggle = () => {
+ onSave({ is_checked: !answer.is_checked });
+ };
+
+ const handleTextSave = (value) => {
+ onSave({ is_checked: true, answer_text: value });
+ };
+
+ const handleDataSave = (data) => {
+ onSave({ is_checked: true, answer_data: data });
+ };
+
+ return (
+
+
+
+
+
+
+ {q?.question_text}
+
+ {typeLabel}
+ {q?.is_required && *필수}
+
+ {q?.ai_hint &&
{q.ai_hint}
}
+
+ {/* 타입별 입력 UI */}
+
+ {(qType === 'text' || qType === 'formula_input') && (
+
+ )}
+ {qType === 'number' && (
+
+ )}
+ {qType === 'select' && (
+
+ )}
+ {qType === 'multi_select' && (
+
+ )}
+ {qType === 'table_input' && (
+
+ )}
+ {qType === 'file_upload' && (
+
첨부파일 탭에서 파일을 업로드하세요
+ )}
+ {(qType === 'bom_tree' || qType === 'price_table' || qType === 'dimension_diagram') && (
+
+ )}
+
+
+
+
+ );
+}
+
+// ============================================================
+// 답변 입력 컴포넌트들
+// ============================================================
+function AnswerTextInput({ value, onSave, placeholder = '', format, type = 'text', multiline = false }) {
+ const [text, setText] = useState(value);
+ const [editing, setEditing] = useState(false);
+
+ if (!editing && text) {
+ return (
+
setEditing(true)}>
+ {text}
+ {format && {format}}
+
+
+ );
+ }
+
+ const InputTag = multiline ? 'textarea' : 'input';
+ return (
+
+ setText(e.target.value)}
+ className="flex-1 px-2 py-1 border border-gray-300 rounded text-sm focus:ring-1 focus:ring-blue-500"
+ placeholder={placeholder}
+ rows={multiline ? 3 : undefined}
+ onKeyDown={e => { if (e.key === 'Enter' && !multiline) { onSave(text); setEditing(false); } }}
+ autoFocus />
+ {format && {format}}
+
+
+ );
+}
+
+function AnswerSelectInput({ value, options, onSave }) {
+ return (
+
+ );
+}
+
+function AnswerMultiSelectInput({ value, options, onSave }) {
+ const selected = Array.isArray(value) ? value : [];
+ const toggle = (opt) => {
+ const next = selected.includes(opt) ? selected.filter(v => v !== opt) : [...selected, opt];
+ onSave(next);
+ };
+ return (
+
+ {options.map(opt => (
+
+ ))}
+
+ );
+}
+
+function AnswerTableInput({ value, columns, onSave }) {
+ const rows = value?.rows || [];
+ const [localRows, setLocalRows] = useState(rows);
+
+ const addRow = () => {
+ const newRow = {};
+ columns.forEach(c => { newRow[c] = ''; });
+ const updated = [...localRows, newRow];
+ setLocalRows(updated);
+ onSave({ rows: updated });
+ };
+
+ const updateCell = (rowIdx, col, val) => {
+ const updated = [...localRows];
+ updated[rowIdx] = { ...updated[rowIdx], [col]: val };
+ setLocalRows(updated);
+ };
+
+ const saveAll = () => {
+ onSave({ rows: localRows });
+ };
+
+ const removeRow = (idx) => {
+ const updated = localRows.filter((_, i) => i !== idx);
+ setLocalRows(updated);
+ onSave({ rows: updated });
+ };
+
+ return (
+
+ );
+}
+
+// ============================================================
+// 첨부파일 탭
+// ============================================================
+function ProjectAttachmentsTab({ projectId }) {
+ const [attachments, setAttachments] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [uploading, setUploading] = useState(false);
+ const fileInput = useRef(null);
+ const [fileType, setFileType] = useState('other');
+
+ const load = useCallback(async () => {
+ try {
+ const data = await api.get(`/sales/interviews/api/projects/${projectId}/attachments`);
+ setAttachments(data);
+ } catch (e) { console.error(e); }
+ finally { setLoading(false); }
+ }, [projectId]);
+
+ useEffect(() => { load(); }, [load]);
+
+ const handleUpload = async (e) => {
+ const file = e.target.files[0];
+ if (!file) return;
+ setUploading(true);
+ try {
+ const form = new FormData();
+ form.append('file', file);
+ form.append('file_type', fileType);
+ const res = await fetch(`/sales/interviews/api/projects/${projectId}/attachments`, {
+ method: 'POST',
+ headers: { 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json' },
+ body: form,
+ });
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ load();
+ } catch (e) { alert('업로드 실패: ' + e.message); }
+ finally { setUploading(false); if (fileInput.current) fileInput.current.value = ''; }
+ };
+
+ const handleDelete = async (id) => {
+ if (!confirm('삭제하시겠습니까?')) return;
+ try {
+ await api.del(`/sales/interviews/api/attachments/${id}`);
+ load();
+ } catch (e) { alert('삭제 실패: ' + e.message); }
+ };
+
+ const FILE_TYPE_LABELS = {
+ excel_template: '엑셀 템플릿',
+ pdf_quote: 'PDF 견적서',
+ sample_bom: 'BOM 샘플',
+ price_list: '단가표',
+ photo: '사진',
+ voice: '음성녹음',
+ other: '기타',
+ };
+
+ return (
+
+
+
+
+
+
+
+ {loading ? (
+
+
+
+ ) : attachments.length === 0 ? (
+
+
+ 첨부파일이 없습니다
+
+ ) : (
+
+ {attachments.map(att => (
+
+
+
+
+
{att.file_name}
+
+ {FILE_TYPE_LABELS[att.file_type] || att.file_type}
+ {(att.file_size / 1024).toFixed(1)}KB
+
+ AI: {att.ai_analysis_status}
+
+
+
+
+
+
+ ))}
+
+ )}
+
+ );
+}
+
+// ============================================================
+// 지식 탭
+// ============================================================
+function ProjectKnowledgeTab({ projectId }) {
+ const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [domainFilter, setDomainFilter] = useState('');
+ const [verifiedFilter, setVerifiedFilter] = useState('');
+ const [showAddForm, setShowAddForm] = useState(false);
+
+ const load = useCallback(async () => {
+ try {
+ let url = `/sales/interviews/api/projects/${projectId}/knowledge?`;
+ if (domainFilter) url += `domain=${domainFilter}&`;
+ if (verifiedFilter) url += `is_verified=${verifiedFilter}&`;
+ const data = await api.get(url);
+ setItems(data);
+ } catch (e) { console.error(e); }
+ finally { setLoading(false); }
+ }, [projectId, domainFilter, verifiedFilter]);
+
+ useEffect(() => { load(); }, [load]);
+
+ const handleVerify = async (id) => {
+ try {
+ await api.post(`/sales/interviews/api/knowledge/${id}/verify`);
+ load();
+ } catch (e) { alert('검증 토글 실패: ' + e.message); }
+ };
+
+ const handleDelete = async (id) => {
+ if (!confirm('삭제하시겠습니까?')) return;
+ try {
+ await api.del(`/sales/interviews/api/knowledge/${id}`);
+ load();
+ } catch (e) { alert('삭제 실패: ' + e.message); }
+ };
+
+ const handleAdd = async (data) => {
+ try {
+ await api.post(`/sales/interviews/api/projects/${projectId}/knowledge`, data);
+ setShowAddForm(false);
+ load();
+ } catch (e) { alert('추가 실패: ' + e.message); }
+ };
+
+ const KNOWLEDGE_TYPE_ICONS = {
+ fact: '📌', rule: '📏', formula: '🔢', mapping: '🔗', range: '📊', table: '📋',
+ };
+
+ return (
+
+ {/* 필터 바 */}
+
+
+
+
+
+
+ {/* 지식 추가 폼 */}
+ {showAddForm && (
+
setShowAddForm(false)}
+ />
+ )}
+
+ {loading ? (
+
+
+
+ ) : items.length === 0 ? (
+
+
+ 추출된 지식이 없습니다
+
+ ) : (
+
+ {items.map(item => (
+
+
+
+ {KNOWLEDGE_TYPE_ICONS[item.knowledge_type] || '📎'}
+
+ {item.is_verified ? '검증됨' : '미검증'}
+
+ {item.title}
+
+
+
+
+
+
+
+ {DOMAIN_LABELS[item.domain] || item.domain} · {item.knowledge_type} · 출처: {item.source_type}
+
+ {/* 신뢰도 바 */}
+
+
신뢰도
+
+
= 0.8 ? '#22c55e' : item.confidence >= 0.5 ? '#eab308' : '#ef4444'
+ }} />
+
+
{((item.confidence || 0) * 100).toFixed(0)}%
+
+
+ ))}
+
+ )}
+
+
+
+
+
+
setTitle(e.target.value)}
+ className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+ placeholder="지식 제목 (예: 가이드레일 표준 길이)" />
+