(최겸) 인포메이션 첨부파일 뷰어 추가

1 files changed, 57 insertions, 4 deletions

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