(최겸) 정보시스템 공지사항 개발

2 files changed, 493 insertions, 153 deletions

diff --git a/components/information/information-button.tsx b/components/information/information-button.tsx
index da0de548..38e8cb12 100644
--- a/components/information/information-button.tsx
+++ b/components/information/information-button.tsx
@@ -1,137 +1,129 @@
 "use client"

 

-import React, { useState, useEffect } from "react"

-import { Info, Download, Edit } from "lucide-react"

+import * as React from "react"

+import { useState } from "react"

 import { Button } from "@/components/ui/button"

+

 import {

   Dialog,

   DialogContent,

-  DialogDescription,

   DialogHeader,

   DialogTitle,

   DialogTrigger,

 } from "@/components/ui/dialog"

+import { Info, Download, Edit } from "lucide-react"

 import { getCachedPageInformation, getCachedEditPermission } from "@/lib/information/service"

+import { getCachedPageNotices } from "@/lib/notice/service"

 import { UpdateInformationDialog } from "@/lib/information/table/update-information-dialog"

+import { NoticeViewDialog } from "@/components/notice/notice-view-dialog"

 import type { PageInformation } from "@/db/schema/information"

+import type { Notice } from "@/db/schema/notice"

 import { useSession } from "next-auth/react"

+import { formatDate } from "@/lib/utils"

 

 interface InformationButtonProps {

-  pageCode: string

+  pagePath: string

   className?: string

   variant?: "default" | "outline" | "ghost" | "secondary"

   size?: "default" | "sm" | "lg" | "icon"

 }

 

+type NoticeWithAuthor = Notice & {

+  authorName: string | null

+  authorEmail: string | null

+}

+

 export function InformationButton({ 

-  pageCode, 

+  pagePath, 

   className,

   variant = "ghost",

   size = "icon"

 }: InformationButtonProps) {

   const { data: session } = useSession()

-  const [information, setInformation] = useState<PageInformation | null>(null)

-  const [isLoading, setIsLoading] = useState(false)

   const [isOpen, setIsOpen] = useState(false)

+  const [information, setInformation] = useState<PageInformation | null>(null)

+  const [notices, setNotices] = useState<NoticeWithAuthor[]>([])

   const [hasEditPermission, setHasEditPermission] = useState(false)

   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)

+  const [selectedNotice, setSelectedNotice] = useState<NoticeWithAuthor | null>(null)

+  const [isNoticeViewDialogOpen, setIsNoticeViewDialogOpen] = useState(false)

+  const [dataLoaded, setDataLoaded] = useState(false)

 

-  useEffect(() => {

-    if (isOpen && !information) {

-      loadInformation()

-    }

-  }, [isOpen, information])

-

-  // 편집 권한 확인

-  useEffect(() => {

-    const checkEditPermission = async () => {

-      if (session?.user?.id) {

-        try {

-          const permission = await getCachedEditPermission(pageCode, session.user.id)

-          setHasEditPermission(permission)

-        } catch (error) {

-          console.error("Failed to check edit permission:", error)

-          setHasEditPermission(false)

-        }

-      }

-    }

+  // 데이터 로드 함수 (단순화)

+  const loadData = React.useCallback(async () => {

+    if (dataLoaded) return // 이미 로드되었으면 중복 방지

     

-    checkEditPermission()

-  }, [pageCode, session?.user?.id])

-

-  const loadInformation = async () => {

-    setIsLoading(true)

     try {

-      const data = await getCachedPageInformation(pageCode)

-      setInformation(data)

+      // pagePath 정규화 (앞의 / 제거)

+      const normalizedPath = pagePath.startsWith('/') ? pagePath.slice(1) : pagePath

+      

+      // 병렬로 데이터 조회

+      const [infoResult, noticesResult] = await Promise.all([

+        getCachedPageInformation(normalizedPath),

+        getCachedPageNotices(normalizedPath)

+      ])

+      

+      setInformation(infoResult)

+      setNotices(noticesResult)

+      setDataLoaded(true)

+      

+      // 권한 확인

+      if (session?.user?.id) {

+        const hasPermission = await getCachedEditPermission(normalizedPath, session.user.id)

+        setHasEditPermission(hasPermission)

+      }

     } catch (error) {

-      console.error("Failed to load information:", error)

-    } finally {

-      setIsLoading(false)

+      console.error("데이터 로딩 중 오류:", error)

     }

-  }

+  }, [pagePath, session?.user?.id, dataLoaded])

 

-  const handleDownload = () => {

-    if (information?.attachmentFilePath && information?.attachmentFileName) {

-      const link = document.createElement('a')

-      link.href = information.attachmentFilePath

-      link.download = information.attachmentFileName

-      document.body.appendChild(link)

-      link.click()

-      document.body.removeChild(link)

+  // 다이얼로그 열기

+  const handleDialogOpen = (open: boolean) => {

+    setIsOpen(open)

+    

+    if (open && !dataLoaded) {

+      loadData()

     }

   }

 

+  // 편집 관련 핸들러

   const handleEditClick = () => {

     setIsEditDialogOpen(true)

   }

 

-  const handleEditClose = () => {

+  const handleEditSuccess = () => {

     setIsEditDialogOpen(false)

-    refreshInformation()

+    // 편집 후 데이터 다시 로드

+    setDataLoaded(false)

+    loadData()

+  }

+

+  // 공지사항 클릭 핸들러

+  const handleNoticeClick = (notice: NoticeWithAuthor) => {

+    setSelectedNotice(notice)

+    setIsNoticeViewDialogOpen(true)

   }

 

-  const refreshInformation = () => {

-    // 편집 후 정보 다시 로드

-    setInformation(null)

-    if (isOpen) {

-      loadInformation()

+  // 파일 다운로드 핸들러

+  const handleDownload = () => {

+    if (information?.attachmentFilePath) {

+      window.open(information.attachmentFilePath, '_blank')

     }

-    // 캐시 무효화를 위해 다시 확인

-    setTimeout(() => {

-      loadInformation()

-    }, 500)

   }

 

-  // 인포메이션이 없으면 버튼을 숨김

-  const [hasInformation, setHasInformation] = useState<boolean | null>(null)

 

-  useEffect(() => {

-    const checkInformation = async () => {

-      try {

-        const data = await getCachedPageInformation(pageCode)

-        setHasInformation(!!data)

-      } catch {

-        setHasInformation(false)

-      }

-    }

-    checkInformation()

-  }, [pageCode])

 

-  // 인포메이션이 없으면 버튼을 숨김

-  if (hasInformation === false) {

-    return null

-  }

 

+  

   return (

     <>

-      <Dialog open={isOpen} onOpenChange={setIsOpen}>

+      <Dialog open={isOpen} onOpenChange={handleDialogOpen}>

         <DialogTrigger asChild>

           <Button 

             variant={variant} 

             size={size} 

             className={className}

-            title="페이지 정보"

+            title="인포메이션"

           >

             <Info className="h-4 w-4" />

             {size !== "icon" && <span className="ml-1">정보</span>}

@@ -141,13 +133,53 @@ export function InformationButton({
           <DialogHeader>

             <div className="flex items-center justify-between">

               <div className="flex items-center gap-2">

-                {/* <Info className="h-5 w-5" /> */}

                 <div>

-                  <DialogTitle>{information?.title || "페이지 정보"}</DialogTitle>

-                  <DialogDescription>{information?.pageName}</DialogDescription>

+                  <DialogTitle>{information?.pageName}</DialogTitle>

                 </div>

               </div>

-              {hasEditPermission && (

+            </div>

+          </DialogHeader>

+          

+          <div className="mt-4 space-y-6">

+            {/* 공지사항 섹션 */}

+            {notices.length > 0 && (

+              <div className="space-y-3">

+                <div className="flex items-center justify-between">

+                  <h4 className="font-semibold">공지사항</h4>

+                  <span className="text-xs text-gray-500">{notices.length}개</span>

+                </div>

+                <div className="max-h-60 overflow-y-auto border rounded-lg bg-gray-50 p-2">

+                  <div className="space-y-2">

+                    {notices.map((notice) => (

+                      <div

+                        key={notice.id}

+                        className="p-3 bg-white border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"

+                        onClick={() => handleNoticeClick(notice)}

+                      >

+                        <div className="space-y-1">

+                          <h5 className="font-medium text-sm line-clamp-2">

+                            {notice.title}

+                          </h5>

+                          <div className="flex items-center gap-3 text-xs text-gray-500">

+                            <span>{formatDate(notice.createdAt)}</span>

+                            {notice.authorName && (

+                              <span>{notice.authorName}</span>

+                            )}

+                          </div>

+                        </div>

+                      </div>

+                    ))}

+                  </div>

+                </div>

+              </div>

+            )}

+

+            {/* 인포메이션 컨텐츠 */}

+            {information?.informationContent && (

+              <div className="space-y-3">

+                <div className="flex items-center justify-between">

+                <h4 className="font-semibold">안내사항</h4>

+                {hasEditPermission && information && (

                 <Button

                   variant="outline"

                   size="sm"

@@ -158,100 +190,68 @@ export function InformationButton({
                   편집

                 </Button>

               )}

-            </div>

-          </DialogHeader>

-          

-          <div className="mt-4 space-y-6">

-            {isLoading ? (

-              <div className="flex items-center justify-center py-8">

-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>

               </div>

-            ) : information ? (

-              <>

-                {/* 공지사항 */}

-                {(information.noticeTitle || information.noticeContent) && (

-                  <div className="space-y-4">

-                    <div className="flex items-center gap-2">

-                      <h4 className="font-semibold text-xl">공지사항</h4>

-                    </div>

-                    <div className="bg-blue-50 border-2 border-blue-200 rounded-xl p-6">

-                      {information.noticeTitle && (

-                        <div className="text-base font-semibold  mb-4">

-                          제목: {information.noticeTitle}

-                        </div>

-                      )}

-                      {information.noticeContent && (

-                        <div className="bg-white border-2 border-blue-200 rounded-lg p-4 max-h-48 overflow-y-auto">

-                          <div className="text-base  whitespace-pre-wrap leading-relaxed">

-                            {information.noticeContent}

-                          </div>

-                        </div>

-                      )}

-                    </div>

-                  </div>

-                )}

-

-                {/* 페이지 정보 */}

-                <div className="space-y-3">

-                  <h4 className="font-medium text-lg">도움말</h4>

-                  <div className="bg-gray-50 border rounded-lg p-4">

-                    <div className="text-sm text-gray-600 whitespace-pre-wrap max-h-40 overflow-y-auto">

-                      {information.description || "페이지 설명이 없습니다."}

-                    </div>

+                <div className="bg-gray-50 border rounded-lg p-4">

+                  <div className="text-sm text-gray-600 whitespace-pre-wrap max-h-40 overflow-y-auto">

+                    {information.informationContent}

                   </div>

                 </div>

+              </div>

+            )}

 

-                {/* 첨부파일 */}

-                <div className="space-y-3">

-                  <h4 className="font-medium text-lg">첨부파일</h4>

-                  {information.attachmentFileName ? (

-                    <div className="bg-gray-50 border rounded-lg p-4">

-                      <div className="flex items-center justify-between p-3 bg-white rounded border">

-                        <div className="flex-1">

-                          <div className="text-sm font-medium">

-                            {information.attachmentFileName}

-                          </div>

-                          {information.attachmentFileSize && (

-                            <div className="text-xs text-gray-500 mt-1">

-                              {information.attachmentFileSize}

-                            </div>

-                          )}

-                        </div>

-                        <Button

-                          size="sm"

-                          variant="outline"

-                          onClick={handleDownload}

-                          className="flex items-center gap-1"

-                        >

-                          <Download className="h-3 w-3" />

-                          다운로드

-                        </Button>

+            {/* 첨부파일 */}

+            {information?.attachmentFileName && (

+              <div className="space-y-3">

+                <h4 className="font-semibold">첨부파일</h4>

+                <div className="bg-gray-50 border rounded-lg p-4">

+                  <div className="flex items-center justify-between p-3 bg-white rounded border">

+                    <div className="flex-1">

+                      <div className="text-sm font-medium">

+                        {information.attachmentFileName}

                       </div>

+                      {information.attachmentFileSize && (

+                        <div className="text-xs text-gray-500 mt-1">

+                          {information.attachmentFileSize}

+                        </div>

+                      )}

                     </div>

-                  ) : (

-                    <div className="text-center py-6 text-gray-500 bg-gray-50 rounded-lg">

-                      <Download className="h-6 w-6 mx-auto mb-2 text-gray-400" />

-                      <p className="text-sm">첨부된 파일이 없습니다.</p>

-                    </div>

-                  )}

+                    <Button

+                      size="sm"

+                      variant="outline"

+                      onClick={handleDownload}

+                      className="flex items-center gap-1"

+                    >

+                      <Download className="h-3 w-3" />

+                      다운로드

+                    </Button>

+                  </div>

                 </div>

-              </>

-            ) : (

+              </div>

+            )}

+

+            {!information && notices.length === 0 && (

               <div className="text-center py-8 text-gray-500">

-                이 페이지에 대한 정보가 없습니다.

+                <p>이 페이지에 대한 정보가 없습니다.</p>

               </div>

             )}

           </div>

         </DialogContent>

       </Dialog>

 

+      {/* 공지사항 보기 다이얼로그 */}

+      <NoticeViewDialog

+        open={isNoticeViewDialogOpen}

+        onOpenChange={setIsNoticeViewDialogOpen}

+        notice={selectedNotice}

+      />

+

       {/* 편집 다이얼로그 */}

       {information && (

         <UpdateInformationDialog

           open={isEditDialogOpen}

           onOpenChange={setIsEditDialogOpen}

           information={information}

-          onClose={handleEditClose}

+          onSuccess={handleEditSuccess}

         />

       )}

     </>

diff --git a/components/information/information-client.tsx b/components/information/information-client.tsx
new file mode 100644
index 00000000..513b8f20
--- /dev/null
+++ b/components/information/information-client.tsx
@@ -0,0 +1,340 @@
+"use client"

+

+import { useState, useEffect, useTransition } from "react"

+import { Button } from "@/components/ui/button"

+import { Input } from "@/components/ui/input"

+import {

+  Table,

+  TableBody,

+  TableCell,

+  TableHead,

+  TableHeader,

+  TableRow,

+} from "@/components/ui/table"

+import { Badge } from "@/components/ui/badge"

+import { 

+  Search, 

+  Edit, 

+  FileText, 

+  ChevronUp, 

+  ChevronDown, 

+  Download

+} from "lucide-react"

+import { toast } from "sonner"

+import { formatDate } from "@/lib/utils"

+import { getInformationLists } from "@/lib/information/service"

+import type { PageInformation } from "@/db/schema/information"

+import { UpdateInformationDialog } from "@/lib/information/table/update-information-dialog"

+

+interface InformationClientProps {

+  initialData?: PageInformation[]

+}

+

+type SortField = "pageName" | "pagePath" | "createdAt"

+type SortDirection = "asc" | "desc"

+

+export function InformationClient({ initialData = [] }: InformationClientProps) {

+  const [informations, setInformations] = useState<PageInformation[]>(initialData)

+  const [loading, setLoading] = useState(false)

+  const [searchQuery, setSearchQuery] = useState("")

+  const [sortField, setSortField] = useState<SortField>("createdAt")

+  const [sortDirection, setSortDirection] = useState<SortDirection>("desc")

+  const [editingInformation, setEditingInformation] = useState<PageInformation | null>(null)

+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)

+  const [, startTransition] = useTransition()

+

+  // 정보 목록 조회

+  const fetchInformations = async () => {

+    try {

+      setLoading(true)

+      const search = searchQuery || undefined

+

+      startTransition(async () => {

+        const result = await getInformationLists({

+          page: 1,

+          perPage: 50,

+          search: search,

+          sort: [{ id: sortField, desc: sortDirection === "desc" }],

+          flags: [],

+          filters: [],

+          joinOperator: "and",

+          pagePath: "",

+          pageName: "",

+          informationContent: "",

+          isActive: null,

+        })

+

+        if (result?.data) {

+          setInformations(result.data)

+        } else {

+          toast.error("정보 목록을 가져오는데 실패했습니다.")

+        }

+        setLoading(false)

+      })

+    } catch (error) {

+      console.error("Error fetching informations:", error)

+      toast.error("정보 목록을 가져오는데 실패했습니다.")

+      setLoading(false)

+    }

+  }

+

+  // 검색 핸들러

+  const handleSearch = () => {

+    fetchInformations()

+  }

+

+  // 정렬 함수

+  const sortInformations = (informations: PageInformation[]) => {

+    return [...informations].sort((a, b) => {

+      let aValue: string | Date

+      let bValue: string | Date

+

+      if (sortField === "pageName") {

+        aValue = a.pageName

+        bValue = b.pageName

+      } else if (sortField === "pagePath") {

+        aValue = a.pagePath

+        bValue = b.pagePath

+      } else {

+        aValue = new Date(a.createdAt)

+        bValue = new Date(b.createdAt)

+      }

+

+      if (aValue < bValue) {

+        return sortDirection === "asc" ? -1 : 1

+      }

+      if (aValue > bValue) {

+        return sortDirection === "asc" ? 1 : -1

+      }

+      return 0

+    })

+  }

+

+  // 정렬 핸들러

+  const handleSort = (field: SortField) => {

+    if (sortField === field) {

+      setSortDirection(sortDirection === "asc" ? "desc" : "asc")

+    } else {

+      setSortField(field)

+      setSortDirection("asc")

+    }

+  }

+

+  // 편집 핸들러

+  const handleEdit = (information: PageInformation) => {

+    setEditingInformation(information)

+    setIsEditDialogOpen(true)

+  }

+

+  // 편집 완료 핸들러

+  const handleEditClose = () => {

+    setIsEditDialogOpen(false)

+    setEditingInformation(null)

+    // 데이터 새로고침

+    fetchInformations()

+  }

+

+  // 다운로드 핸들러

+  const handleDownload = (information: PageInformation) => {

+    if (information.attachmentFilePath && information.attachmentFileName) {

+      const link = document.createElement('a')

+      link.href = information.attachmentFilePath

+      link.download = information.attachmentFileName

+      document.body.appendChild(link)

+      link.click()

+      document.body.removeChild(link)

+    }

+  }

+

+  // 정렬된 정보 목록

+  const sortedInformations = sortInformations(informations)

+

+  useEffect(() => {

+    if (initialData.length > 0) {

+      setInformations(initialData)

+    } else {

+      fetchInformations()

+    }

+  }, [])

+

+  useEffect(() => {

+    if (searchQuery !== "") {

+      fetchInformations()

+    } else if (initialData.length > 0) {

+      setInformations(initialData)

+    }

+  }, [searchQuery])

+

+  return (

+    <div className="space-y-6">

+      {/* 검색 */}

+      <div className="flex items-center justify-between gap-4">

+        <div className="flex items-center gap-4">

+          <div className="relative flex-1 max-w-md">

+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />

+            <Input

+              placeholder="페이지명이나 경로로 검색..."

+              value={searchQuery}

+              onChange={(e) => setSearchQuery(e.target.value)}

+              className="pl-10"

+              onKeyPress={(e) => e.key === "Enter" && handleSearch()}

+            />

+          </div>

+          <Button onClick={handleSearch} variant="outline">

+            검색

+          </Button>

+          <Button

+            variant="outline"

+            onClick={() => window.location.reload()}

+          >

+            새로고침

+          </Button>

+        </div>

+      </div>

+

+      {/* 정보 테이블 */}

+      <div className="bg-white rounded-lg shadow">

+        <Table>

+          <TableHeader>

+            <TableRow>

+              <TableHead>

+                <button

+                  className="flex items-center gap-1 hover:text-foreground"

+                  onClick={() => handleSort("pageName")}

+                >

+                  페이지명

+                  {sortField === "pageName" && (

+                    sortDirection === "asc" ? (

+                      <ChevronUp className="h-4 w-4" />

+                    ) : (

+                      <ChevronDown className="h-4 w-4" />

+                    )

+                  )}

+                </button>

+              </TableHead>

+              <TableHead>

+                <button

+                  className="flex items-center gap-1 hover:text-foreground"

+                  onClick={() => handleSort("pagePath")}

+                >

+                  페이지 경로

+                  {sortField === "pagePath" && (

+                    sortDirection === "asc" ? (

+                      <ChevronUp className="h-4 w-4" />

+                    ) : (

+                      <ChevronDown className="h-4 w-4" />

+                    )

+                  )}

+                </button>

+              </TableHead>

+              <TableHead>정보 내용</TableHead>

+              <TableHead>첨부파일</TableHead>

+              <TableHead>상태</TableHead>

+              <TableHead>

+                <button

+                  className="flex items-center gap-1 hover:text-foreground"

+                  onClick={() => handleSort("createdAt")}

+                >

+                  생성일

+                  {sortField === "createdAt" && (

+                    sortDirection === "asc" ? (

+                      <ChevronUp className="h-4 w-4" />

+                    ) : (

+                      <ChevronDown className="h-4 w-4" />

+                    )

+                  )}

+                </button>

+              </TableHead>

+              <TableHead className="text-right">작업</TableHead>

+            </TableRow>

+          </TableHeader>

+          <TableBody>

+            {loading ? (

+              <TableRow>

+                <TableCell colSpan={7} className="text-center py-8">

+                  로딩 중...

+                </TableCell>

+              </TableRow>

+            ) : informations.length === 0 ? (

+              <TableRow>

+                <TableCell colSpan={7} className="text-center py-8 text-gray-500">

+                  정보가 없습니다.

+                </TableCell>

+              </TableRow>

+            ) : (

+              sortedInformations.map((information) => (

+                <TableRow key={information.id}>

+                  <TableCell className="font-medium">

+                    <div className="flex items-center gap-2">

+                      <FileText className="h-4 w-4" />

+                      <span className="max-w-[200px] truncate">

+                        {information.pageName}

+                      </span>

+                    </div>

+                  </TableCell>

+                  <TableCell>

+                    <span className="font-mono text-sm max-w-[200px] truncate block">

+                      {information.pagePath}

+                    </span>

+                  </TableCell>

+                  <TableCell>

+                    <div 

+                      className="max-w-[300px] text-sm text-gray-600 line-clamp-2"

+                      dangerouslySetInnerHTML={{ 

+                        __html: information.informationContent?.substring(0, 100) + '...' || '' 

+                      }}

+                    />

+                  </TableCell>

+                  <TableCell>

+                    {information.attachmentFileName ? (

+                      <Button

+                        variant="outline"

+                        size="sm"

+                        onClick={() => handleDownload(information)}

+                        className="flex items-center gap-1"

+                      >

+                        <Download className="h-3 w-3" />

+                        <span className="max-w-[100px] truncate">

+                          {information.attachmentFileName}

+                        </span>

+                      </Button>

+                    ) : (

+                      <span className="text-gray-400">없음</span>

+                    )}

+                  </TableCell>

+                  <TableCell>

+                    <Badge variant={information.isActive ? "default" : "secondary"}>

+                      {information.isActive ? "활성" : "비활성"}

+                    </Badge>

+                  </TableCell>

+                  <TableCell>

+                    {formatDate(information.createdAt)}

+                  </TableCell>

+                  <TableCell className="text-right">

+                    <Button 

+                      variant="outline" 

+                      size="sm"

+                      onClick={() => handleEdit(information)}

+                    >

+                      <Edit className="h-4 w-4" />

+                    </Button>

+                  </TableCell>

+                </TableRow>

+              ))

+            )}

+          </TableBody>

+        </Table>

+      </div>

+

+      {/* 편집 다이얼로그 */}

+      {editingInformation && (

+        <UpdateInformationDialog

+          open={isEditDialogOpen}

+          onOpenChange={setIsEditDialogOpen}

+          information={editingInformation}

+          onSuccess={handleEditClose}

+        />

+      )}

+    </div>

+  )

+} 
\ No newline at end of file