summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/document-viewer/pdftron-viewer-dialog.tsx207
-rw-r--r--components/information/information-button.tsx61
-rw-r--r--components/information/information-client.tsx2
3 files changed, 265 insertions, 5 deletions
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<HTMLDivElement>(null)
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState<string | null>(null)
+ const [instance, setInstance] = useState<any>(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 (
+ <Dialog open={open} onOpenChange={onOpenChange}>
+ <DialogContent className="max-w-6xl max-h-[90vh] h-[90vh] p-0">
+ <DialogHeader className="px-4 py-3 border-b">
+ <div className="flex items-center justify-between">
+ <div>
+ <DialogTitle className="text-lg font-semibold">
+ {fileName || '문서 뷰어'}
+ </DialogTitle>
+ <DialogDescription className="text-sm text-gray-600 mt-1">
+ PDF 및 Office 문서를 읽기 전용으로 보기
+ </DialogDescription>
+ </div>
+ {/* <Button
+ variant="ghost"
+ size="sm"
+ onClick={() => onOpenChange(false)}
+ >
+ </Button> */}
+ </div>
+ </DialogHeader>
+
+ <div className="flex-1 relative">
+ {isLoading && (
+ <div className="absolute inset-0 flex items-center justify-center bg-white z-10">
+ <div className="flex flex-col items-center gap-3">
+ <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+ <span className="text-gray-600">문서를 불러오는 중...</span>
+ </div>
+ </div>
+ )}
+
+ {error && (
+ <div className="absolute inset-0 flex items-center justify-center bg-white z-10">
+ <div className="flex flex-col items-center gap-3 text-center max-w-md">
+ <AlertCircle className="h-12 w-12 text-red-500" />
+ <div>
+ <h3 className="font-semibold text-gray-900 mb-2">문서를 불러올 수 없습니다</h3>
+ <p className="text-gray-600 text-sm">{error}</p>
+ </div>
+ <Button
+ variant="outline"
+ onClick={() => onOpenChange(false)}
+ className="mt-2"
+ >
+ 닫기
+ </Button>
+ </div>
+ </div>
+ )}
+
+ <div
+ ref={viewerRef}
+ className="w-full h-full"
+ style={{ height: 'calc(90vh - 60px)' }}
+ />
+ </div>
+ </DialogContent>
+ </Dialog>
+ )
+}
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<InformationAttachment | null>(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"
>
- <div className="flex-1">
- <div className="text-sm font-medium">
+ <div
+ className="flex-1"
+ >
+ <div className="text-sm font-medium flex items-center gap-2">
{attachment.fileName}
+
</div>
{attachment.fileSize && (
<div className="text-xs text-gray-500 mt-1">
- {attachment.fileSize}
+ {prettyBytes(Number(attachment.fileSize))}
</div>
)}
</div>
+ <div className="flex gap-2">
+ {isViewerSupported(attachment.fileName) &&
<Button
size="sm"
variant="outline"
+ disabled={!isViewerSupported(attachment.fileName)}
+ onClick={() => isViewerSupported(attachment.fileName) && handleFileClick(attachment)}
+ className="flex items-center gap-1"
+ >
+ <EyeIcon className="h-3 w-3" />
+ 미리보기
+ </Button>
+ }
+ <Button
+ size="sm"
+ variant="outline"
+
onClick={() => handleDownload(attachment)}
className="flex items-center gap-1"
>
<Download className="h-3 w-3" />
다운로드
</Button>
+ </div>
</div>
))}
</div>
@@ -345,6 +390,14 @@ export function InformationButton({
onSuccess={handleEditSuccess}
/>
)}
+
+ {/* PDFTron 뷰어 다이얼로그 */}
+ <PDFTronViewerDialog
+ open={viewerDialogOpen}
+ onOpenChange={setViewerDialogOpen}
+ fileUrl={selectedFile?.filePath}
+ fileName={selectedFile?.fileName}
+ />
</>
)
} \ 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)
</div>
</TableCell>
<TableCell>
- <span className="font-mono text-sm max-w-[200px] truncate block">
+ <span className="font-mono text-sm max-w-[300px] truncate block">
{information.pagePath}
</span>
</TableCell>
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 13:27:22 +0000