From 3e59693e017742d971f490eb7c58870cb745a98d Mon Sep 17 00:00:00 2001 From: joonhoekim <26rote@gmail.com> Date: Fri, 18 Jul 2025 03:58:34 +0000 Subject: (김준회) 결재 모듈 개발 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/knox/approval/ApprovalDetail.tsx | 362 ++++++++++++++++++++++++++++ 1 file changed, 362 insertions(+) create mode 100644 components/knox/approval/ApprovalDetail.tsx (limited to 'components/knox/approval/ApprovalDetail.tsx') diff --git a/components/knox/approval/ApprovalDetail.tsx b/components/knox/approval/ApprovalDetail.tsx new file mode 100644 index 00000000..034bde7d --- /dev/null +++ b/components/knox/approval/ApprovalDetail.tsx @@ -0,0 +1,362 @@ +'use client' + +import { useState, useEffect } from 'react'; +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Badge } from '@/components/ui/badge'; +import { Separator } from '@/components/ui/separator'; +import { toast } from 'sonner'; +import { Loader2, Search, FileText, Clock, User, AlertCircle } from 'lucide-react'; + +// API 함수 및 타입 +import { getApprovalDetail, getApprovalContent } from '@/lib/knox-api/approval/approval'; +import type { ApprovalDetailResponse, ApprovalContentResponse, ApprovalLine } from '@/lib/knox-api/approval/approval'; + +// Mock 데이터 +import { mockApprovalAPI, getStatusText, getRoleText, getApprovalStatusText } from './mocks/approval-mock'; + +interface ApprovalDetailProps { + useFakeData?: boolean; + systemId?: string; + initialApInfId?: string; +} + +interface ApprovalDetailData { + detail: ApprovalDetailResponse['data']; + content: ApprovalContentResponse['data']; +} + +export default function ApprovalDetail({ + useFakeData = false, + systemId = 'EVCP_SYSTEM', + initialApInfId = '' +}: ApprovalDetailProps) { + const [apInfId, setApInfId] = useState(initialApInfId); + const [approvalData, setApprovalData] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); + + const fetchApprovalDetail = async (id: string) => { + if (!id.trim()) { + toast.error('결재 ID를 입력해주세요.'); + return; + } + + setIsLoading(true); + setError(null); + setApprovalData(null); + + try { + const [detailResponse, contentResponse] = await Promise.all([ + useFakeData + ? mockApprovalAPI.getApprovalDetail(id) + : getApprovalDetail(id, systemId), + useFakeData + ? mockApprovalAPI.getApprovalContent(id) + : getApprovalContent(id, systemId) + ]); + + if (detailResponse.result === 'SUCCESS' && contentResponse.result === 'SUCCESS') { + setApprovalData({ + detail: detailResponse.data, + content: contentResponse.data + }); + } else { + setError('결재 정보를 가져오는데 실패했습니다.'); + toast.error('결재 정보를 가져오는데 실패했습니다.'); + } + } catch (err) { + console.error('결재 상세 조회 오류:', err); + setError('결재 정보를 가져오는 중 오류가 발생했습니다.'); + toast.error('결재 정보를 가져오는 중 오류가 발생했습니다.'); + } finally { + setIsLoading(false); + } + }; + + const formatDate = (dateString: string) => { + if (!dateString || dateString.length < 14) return dateString; + // YYYYMMDDHHMMSS 형식을 YYYY-MM-DD HH:MM:SS로 변환 + const year = dateString.substring(0, 4); + const month = dateString.substring(4, 6); + const day = dateString.substring(6, 8); + const hour = dateString.substring(8, 10); + const minute = dateString.substring(10, 12); + const second = dateString.substring(12, 14); + + return `${year}-${month}-${day} ${hour}:${minute}:${second}`; + }; + + const getSecurityTypeText = (type: string) => { + const typeMap: Record = { + 'PERSONAL': '개인', + 'CONFIDENTIAL': '기밀', + 'CONFIDENTIAL_STRICT': '극기밀' + }; + return typeMap[type] || type; + }; + + const getSecurityTypeBadgeVariant = (type: string) => { + switch (type) { + case 'PERSONAL': + return 'default'; + case 'CONFIDENTIAL': + return 'secondary'; + case 'CONFIDENTIAL_STRICT': + return 'destructive'; + default: + return 'outline'; + } + }; + + const getStatusBadgeVariant = (status: string) => { + switch (status) { + case '2': // 완결 + return 'default'; + case '1': // 진행중 + return 'secondary'; + case '3': // 반려 + return 'destructive'; + case '4': // 상신취소 + return 'outline'; + default: + return 'outline'; + } + }; + + // 초기 로딩 (initialApInfId가 있는 경우) + useEffect(() => { + if (initialApInfId) { + fetchApprovalDetail(initialApInfId); + } + }, [initialApInfId, useFakeData, systemId]); + + return ( + + + + + 결재 상세 조회 + + + 결재 ID를 입력하여 상세 정보를 조회합니다. {useFakeData && '(테스트 모드)'} + + + + + {/* 검색 영역 */} +
+
+ + setApInfId(e.target.value)} + onKeyPress={(e) => e.key === 'Enter' && fetchApprovalDetail(apInfId)} + /> +
+ +
+ + {/* 에러 메시지 */} + {error && ( +
+
+ + 오류 +
+

{error}

+
+ )} + + {/* 결재 상세 정보 */} + {approvalData && ( +
+ {/* 기본 정보 */} +
+

+ + 기본 정보 +

+ +
+
+ +

{approvalData.detail.apInfId}

+
+
+ +

{approvalData.detail.systemId}

+
+
+ +

{approvalData.detail.subject}

+
+
+ +

+ + {formatDate(approvalData.detail.sbmDt)} +

+
+
+ +
+ + {getStatusText(approvalData.detail.status)} + +
+
+
+ +
+ + {getSecurityTypeText(approvalData.detail.docSecuType)} + +
+
+
+ +
+ + {approvalData.detail.urgYn === 'Y' ? '긴급' : '일반'} + +
+
+
+ +

{approvalData.detail.sbmLang}

+
+
+
+ + + + {/* 결재 내용 */} +
+

결재 내용

+ +
+
+ + + {approvalData.content.contentsType} + +
+ +
+ 
+                    {approvalData.content.contents}
+
+
+
+
+ + + + {/* 결재 경로 */} +
+

+ + 결재 경로 +

+ +
+ {approvalData.detail.aplns.map((apln: ApprovalLine, index: number) => ( +
+ + {apln.seq} + + +
+
+ +

{apln.userId || apln.epId || '-'}

+
+
+ +

{apln.emailAddress || '-'}

+
+
+ +
+ + {getRoleText(apln.role)} + +
+
+
+ +
+ + {getApprovalStatusText(apln.aplnStatsCode)} + +
+
+
+ +
+ {apln.arbPmtYn === 'Y' && ( + 전결권한 + )} + {apln.contentsMdfyPmtYn === 'Y' && ( + 본문수정 + )} + {apln.aplnMdfyPmtYn === 'Y' && ( + 경로변경 + )} +
+
+ ))} +
+
+ + {/* 첨부파일 */} + {approvalData.detail.attachments && approvalData.detail.attachments.length > 0 && ( + <> + +
+

첨부파일

+ +
+ {approvalData.detail.attachments.map((attachment: any, index: number) => ( +
+ +
+

{attachment.fileName || `첨부파일 ${index + 1}`}

+

{attachment.fileSize || '크기 정보 없음'}

+
+ +
+ ))} +
+
+ + )} +
+ )} + + + ); +} \ No newline at end of file -- cgit v1.2.3 From 5cb225e9cd6b0ba2f52572a3afa0de6e5b2a2ece Mon Sep 17 00:00:00 2001 From: joonhoekim <26rote@gmail.com> Date: Fri, 18 Jul 2025 16:32:22 +0900 Subject: 파일첨부 API 처리, 텍스트 변경 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/[lng]/admin/approval-test/page.tsx | 6 ++-- components/knox/approval/ApprovalDetail.tsx | 54 +++++++++++++++++++++++++++-- components/knox/approval/ApprovalSubmit.tsx | 46 ++++++++++++++++++++---- 3 files changed, 94 insertions(+), 12 deletions(-) (limited to 'components/knox/approval/ApprovalDetail.tsx') diff --git a/app/[lng]/admin/approval-test/page.tsx b/app/[lng]/admin/approval-test/page.tsx index de0e2b5a..f044d87d 100644 --- a/app/[lng]/admin/approval-test/page.tsx +++ b/app/[lng]/admin/approval-test/page.tsx @@ -3,7 +3,7 @@ import ApprovalManager from '@/components/knox/approval/ApprovalManager'; export const metadata: Metadata = { title: 'Knox 결재 시스템 테스트 | Admin', - description: 'Knox API를 사용한 결재 시스템의 모든 기능을 테스트할 수 있는 페이지입니다.', + description: 'Knox API를 사용한 결재 시스템 기능 테스트용', }; export default function ApprovalTestPage() { @@ -14,9 +14,9 @@ export default function ApprovalTestPage() {

Knox 결재 시스템 테스트

- Knox API를 사용한 결재 시스템의 모든 기능을 테스트할 수 있습니다. + Knox API를 사용한 결재 시스템 컴포넌트입니다.
- 테스트 모드가 기본적으로 활성화되어 있으며, 실제 API 대신 가짜 데이터를 사용합니다. + 테스트 모드가 기본적으로 활성화되어 있으며, 테스트 모드에서는 실제 API 대신 모킹 데이터를 사용

diff --git a/components/knox/approval/ApprovalDetail.tsx b/components/knox/approval/ApprovalDetail.tsx index 034bde7d..6db43cbe 100644 --- a/components/knox/approval/ApprovalDetail.tsx +++ b/components/knox/approval/ApprovalDetail.tsx @@ -28,6 +28,15 @@ interface ApprovalDetailData { content: ApprovalContentResponse['data']; } +// 첨부파일 타입 (가이드에 명확히 정의되어 있지 않아 필드 일부 추정) +interface ApprovalAttachment { + fileName?: string; + fileSize?: string; + downloadUrl?: string; + fileId?: string; + [key: string]: unknown; // 기타 필드 허용 +} + export default function ApprovalDetail({ useFakeData = false, systemId = 'EVCP_SYSTEM', @@ -126,6 +135,43 @@ export default function ApprovalDetail({ } }; + // 첨부파일 다운로드 헬퍼 + const handleDownload = async (attachment: ApprovalAttachment) => { + try { + // 1) downloadUrl 이 이미 포함된 경우 + if (attachment.downloadUrl) { + window.open(attachment.downloadUrl, '_blank'); + return; + } + + // 2) fileId + 별도 엔드포인트 조합 (가이드에 명시되지 않았으므로 best-effort 처리) + if (attachment.fileId) { + const url = `${process.env.KNOX_API_BASE_URL}/approval/api/v2.0/attachments/${attachment.fileId}`; + const resp = await fetch(url, { + method: 'GET', + headers: { + 'System-ID': systemId, + }, + }); + if (!resp.ok) throw new Error('다운로드 실패'); + + // blob 생성 후 브라우저 다운로드 + const blob = await resp.blob(); + const link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = attachment.fileName || 'attachment'; + link.click(); + URL.revokeObjectURL(link.href); + return; + } + + toast.error('다운로드 URL 정보를 찾을 수 없습니다.'); + } catch (err) { + console.error('첨부파일 다운로드 오류:', err); + toast.error('첨부파일 다운로드 중 오류가 발생했습니다.'); + } + }; + // 초기 로딩 (initialApInfId가 있는 경우) useEffect(() => { if (initialApInfId) { @@ -338,14 +384,18 @@ export default function ApprovalDetail({

첨부파일

- {approvalData.detail.attachments.map((attachment: any, index: number) => ( + {approvalData.detail.attachments.map((attachment: ApprovalAttachment, index: number) => (

{attachment.fileName || `첨부파일 ${index + 1}`}

{attachment.fileSize || '크기 정보 없음'}

-
diff --git a/components/knox/approval/ApprovalSubmit.tsx b/components/knox/approval/ApprovalSubmit.tsx index 37779ce3..526a87f3 100644 --- a/components/knox/approval/ApprovalSubmit.tsx +++ b/components/knox/approval/ApprovalSubmit.tsx @@ -17,7 +17,7 @@ import { toast } from 'sonner'; import { Loader2, Plus, Trash2, FileText, AlertCircle } from 'lucide-react'; // API 함수 및 타입 -import { submitApproval, createSubmitApprovalRequest, createApprovalLine } from '@/lib/knox-api/approval/approval'; +import { submitApproval, submitSecurityApproval, createSubmitApprovalRequest, createApprovalLine } from '@/lib/knox-api/approval/approval'; import type { ApprovalLine, SubmitApprovalRequest } from '@/lib/knox-api/approval/approval'; // Mock 데이터 @@ -40,7 +40,9 @@ const formSchema = z.object({ role: z.enum(['0', '1', '2', '3', '4', '7', '9']), seq: z.string(), opinion: z.string().optional() - })).min(1, '최소 1개의 결재 경로가 필요합니다') + })).min(1, '최소 1개의 결재 경로가 필요합니다'), + // 첨부파일 (선택) + attachments: z.any().optional() }); type FormData = z.infer; @@ -80,7 +82,8 @@ export default function ApprovalSubmit({ seq: '1', opinion: '' } - ] + ], + attachments: undefined } }); @@ -137,6 +140,8 @@ export default function ApprovalSubmit({ ); // 상신 요청 생성 + const attachmentsArray = data.attachments ? Array.from(data.attachments as FileList) : undefined; + const submitRequest: SubmitApprovalRequest = useFakeData ? { ...data, @@ -144,7 +149,8 @@ export default function ApprovalSubmit({ importantYn: data.importantYn ? 'Y' : 'N', sbmDt: new Date().toISOString().replace(/-|:|T/g, '').slice(0, 14), apInfId: 'test-ap-inf-id-' + Date.now(), - aplns: approvalLines + aplns: approvalLines, + attachments: attachmentsArray } : await createSubmitApprovalRequest( data.contents, @@ -158,14 +164,19 @@ export default function ApprovalSubmit({ notifyOption: data.notifyOption, docMngSaveCode: data.docMngSaveCode, sbmLang: data.sbmLang, - timeZone: data.timeZone + timeZone: data.timeZone, + attachments: attachmentsArray } ); - // API 호출 + // API 호출 (보안 등급에 따라 분기) + const isSecure = data.docSecuType === 'CONFIDENTIAL' || data.docSecuType === 'CONFIDENTIAL_STRICT'; + const response = useFakeData ? await mockApprovalAPI.submitApproval(submitRequest) - : await submitApproval(submitRequest, systemId); + : isSecure + ? await submitSecurityApproval(submitRequest, systemId) + : await submitApproval(submitRequest, systemId); if (response.result === 'SUCCESS') { setSubmitResult({ apInfId: response.data.apInfId }); @@ -333,6 +344,27 @@ export default function ApprovalSubmit({ )} />
+ + {/* 첨부 파일 */} + ( + + 첨부 파일 + + field.onChange(e.target.files)} + /> + + 필요 시 파일을 선택하세요. (다중 선택 가능) + + + )} + /> + -- cgit v1.2.3