From d38877eef87917087a4a217bea32ae84d6738a7d Mon Sep 17 00:00:00 2001 From: dujinkim Date: Fri, 22 Aug 2025 08:20:45 +0000 Subject: (최겸) 인포메이션 첨부파일 뷰어 추가 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../document-viewer/pdftron-viewer-dialog.tsx | 207 +++++++++++++++++++++ components/information/information-button.tsx | 61 +++++- components/information/information-client.tsx | 2 +- 3 files changed, 265 insertions(+), 5 deletions(-) create mode 100644 components/document-viewer/pdftron-viewer-dialog.tsx (limited to 'components') diff --git a/components/document-viewer/pdftron-viewer-dialog.tsx b/components/document-viewer/pdftron-viewer-dialog.tsx new file mode 100644 index 00000000..58d2a91f --- /dev/null +++ b/components/document-viewer/pdftron-viewer-dialog.tsx @@ -0,0 +1,207 @@ +"use client" + +import * as React from "react" +import { useState, useRef, useEffect } from "react" +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, +} from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { X, Loader2, AlertCircle } from "lucide-react" + +interface PDFTronViewerDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + fileUrl?: string + fileName?: string +} + + + +export function PDFTronViewerDialog({ + open, + onOpenChange, + fileUrl, + fileName +}: PDFTronViewerDialogProps) { + const viewerRef = useRef(null) + const [isLoading, setIsLoading] = useState(false) + const [error, setError] = useState(null) + const [instance, setInstance] = useState(null) + + // PDFTron WebViewer 초기화 + const initializeViewer = async () => { + if (!viewerRef.current || !fileUrl) return + + setIsLoading(true) + setError(null) + + try { + // @pdftron/webviewer 패키지에서 동적으로 import + const { default: WebViewer } = await import("@pdftron/webviewer") + + const viewerInstance = await WebViewer({ + path: '/pdftronWeb', + licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY, + fullAPI: false, + enableFilePicker: false, + enableRedaction: false, + enableMeasurement: false, + enableAnnotations: false, + disabledElements: [ + 'header', + 'toolsHeader', + 'searchButton', + 'menuButton', + 'viewControlsButton', + 'selectToolButton', + 'freeHandToolButton', + 'textSelectButton', + 'panToolButton', + 'annotationCommentButton', + 'leftPanel', + 'leftPanelButton', + 'notesPanelButton', + 'searchPanel', + 'thumbnailControl', + 'outlineControl', + 'contextMenuPopup', + 'toolsOverlay', + 'signatureModal', + 'redactionModal', + 'linkModal', + 'filterModal', + 'passwordModal', + 'progressModal', + 'errorModal', + 'toolbarGroup-Annotate', + 'toolbarGroup-Shapes', + 'toolbarGroup-Edit', + 'toolbarGroup-Insert', + 'toolbarGroup-Forms', + 'toolbarGroup-View', + 'downloadButton', + 'printButton', + 'saveAsButton', + 'textToolButton', + 'stickyToolButton', + 'calloutToolButton', + 'rubberStampToolButton', + 'stampToolButton', + 'freeTextToolButton', + 'toolsButton' + ] + }, viewerRef.current) + + setInstance(viewerInstance) + + // 문서 로드 + if (fileUrl) { + const { documentViewer } = viewerInstance.Core + + // 문서 로드 완료 후 읽기 전용 설정 + documentViewer.addEventListener('documentLoaded', () => { + setIsLoading(false) + }) + + // 문서 로드 + viewerInstance.UI.loadDocument(fileUrl) + } else { + setIsLoading(false) + } + + } catch (err) { + console.error('PDFTron 뷰어 초기화 실패:', err) + setError('문서를 불러올 수 없습니다. PDFTron이 설치되어 있는지 확인해주세요.') + setIsLoading(false) + } + } + + // 다이얼로그가 열릴 때 뷰어 초기화 + useEffect(() => { + if (open && fileUrl) { + // 약간의 지연을 두어 DOM이 완전히 렌더링된 후 초기화 + const timer = setTimeout(initializeViewer, 100) + return () => clearTimeout(timer) + } + }, [open, fileUrl]) + + // 다이얼로그가 닫힐 때 정리 + useEffect(() => { + if (!open && instance) { + try { + // WebViewer 인스턴스 정리 + if (viewerRef.current) { + viewerRef.current.innerHTML = '' + } + setInstance(null) + } catch (err) { + console.error('뷰어 정리 실패:', err) + } + } + }, [open, instance]) + + return ( + + + +
+
+ + {fileName || '문서 뷰어'} + + + PDF 및 Office 문서를 읽기 전용으로 보기 + +
+ {/* */} +
+ + +
+ {isLoading && ( +
+
+ + 문서를 불러오는 중... +
+
+ )} + + {error && ( +
+
+ +
+

문서를 불러올 수 없습니다

+

{error}

+
+ +
+
+ )} + +
+
+ +
+ ) +} diff --git a/components/information/information-button.tsx b/components/information/information-button.tsx index 69cbb106..015894c1 100644 --- a/components/information/information-button.tsx +++ b/components/information/information-button.tsx @@ -11,15 +11,17 @@ import { DialogTitle, DialogTrigger, } from "@/components/ui/dialog" -import { Info, Download, Edit, Loader2 } from "lucide-react" +import { Info, Download, Edit, Loader2,Eye, EyeIcon } from "lucide-react" import { getPageInformationDirect, getEditPermissionDirect } from "@/lib/information/service" import { getPageNotices } from "@/lib/notice/service" import { UpdateInformationDialog } from "@/lib/information/table/update-information-dialog" import { NoticeViewDialog } from "@/components/notice/notice-view-dialog" +import { PDFTronViewerDialog } from "@/components/document-viewer/pdftron-viewer-dialog" import type { PageInformation, InformationAttachment } from "@/db/schema/information" import type { Notice } from "@/db/schema/notice" import { useSession } from "next-auth/react" import { formatDate } from "@/lib/utils" +import prettyBytes from "pretty-bytes" // downloadFile은 동적으로 import interface InformationButtonProps { @@ -51,6 +53,8 @@ export function InformationButton({ const [dataLoaded, setDataLoaded] = useState(false) const [isLoading, setIsLoading] = useState(false) const [retryCount, setRetryCount] = useState(0) + const [viewerDialogOpen, setViewerDialogOpen] = useState(false) + const [selectedFile, setSelectedFile] = useState(null) // 데이터 로드 함수 const loadData = React.useCallback(async () => { @@ -151,6 +155,29 @@ export function InformationButton({ setIsNoticeViewDialogOpen(true) } + // 파일 확장자 확인 함수 + const getFileExtension = (fileName: string): string => { + return fileName.split('.').pop()?.toLowerCase() || '' + } + + // 뷰어 지원 파일 형식 확인 + const isViewerSupported = (fileName: string): boolean => { + const extension = getFileExtension(fileName) + return ['pdf', 'docx', 'doc'].includes(extension) + } + + // 파일 클릭 핸들러 (뷰어 또는 다운로드) + const handleFileClick = async (attachment: InformationAttachment) => { + if (isViewerSupported(attachment.fileName)) { + // PDF/DOCX 파일은 뷰어로 열기 + setSelectedFile(attachment) + setViewerDialogOpen(true) + } else { + // 기타 파일은 다운로드 + await handleDownload(attachment) + } + } + // 파일 다운로드 핸들러 const handleDownload = async (attachment: InformationAttachment) => { try { @@ -294,25 +321,43 @@ export function InformationButton({ key={attachment.id} className="flex items-center justify-between p-3 bg-white rounded border" > -
-
+
+
{attachment.fileName} +
{attachment.fileSize && (
- {attachment.fileSize} + {prettyBytes(Number(attachment.fileSize))}
)}
+
+ {isViewerSupported(attachment.fileName) && + } + +
))}
@@ -345,6 +390,14 @@ export function InformationButton({ onSuccess={handleEditSuccess} /> )} + + {/* PDFTron 뷰어 다이얼로그 */} + ) } \ No newline at end of file diff --git a/components/information/information-client.tsx b/components/information/information-client.tsx index 50bc6a39..e2d273e5 100644 --- a/components/information/information-client.tsx +++ b/components/information/information-client.tsx @@ -370,7 +370,7 @@ export function InformationClient({ initialData = [] }: InformationClientProps) - + {information.pagePath} -- cgit v1.2.3