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

11 files changed, 1473 insertions, 162 deletions

diff --git a/components/additional-info/join-form.tsx b/components/additional-info/join-form.tsx
index 4a9a3379..b6cb0d9c 100644
--- a/components/additional-info/join-form.tsx
+++ b/components/additional-info/join-form.tsx
@@ -79,7 +79,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-
+import { InformationButton } from "@/components/information/information-button"
 i18nIsoCountries.registerLocale(enLocale)
 i18nIsoCountries.registerLocale(koLocale)
 
@@ -535,11 +535,14 @@ const handleDownloadAllFiles = async () => {
       <section className="overflow-hidden rounded-md border bg-background shadow-sm">
         <div className="p-6 md:p-10 space-y-6">
           <div className="space-y-2">
+            <div className="flex items-center gap-2">
             <h3 className="text-xl font-semibold">
               {t("infoForm.title", {
                 defaultValue: "Update Vendor Information",
               })}
             </h3>
+            <InformationButton pagePath="partners/info" />
+            </div>
             <p className="text-sm text-muted-foreground">
               {t("infoForm.description", {
                 defaultValue:
diff --git a/components/additional-info/tech-vendor-info-form.tsx b/components/additional-info/tech-vendor-info-form.tsx
index 8e6f7eaf..55d01d21 100644
--- a/components/additional-info/tech-vendor-info-form.tsx
+++ b/components/additional-info/tech-vendor-info-form.tsx
@@ -30,7 +30,7 @@ import {
   CardHeader,

   CardTitle,

 } from "@/components/ui/card"

-

+import { InformationButton } from "@/components/information/information-button"

 // 타입 정의

 interface TechVendorContact {

   id: number

@@ -251,7 +251,10 @@ export function TechVendorInfoForm() {
     <div className="space-y-6 p-6">

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

         <div>

-          <h2 className="text-2xl font-bold">기술영업 벤더 정보</h2>

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

+            <h2 className="text-2xl font-bold">기술영업 벤더 정보</h2>

+            <InformationButton pagePath="partners/info" />

+          </div>

           <p className="text-gray-600">기술영업 벤더 정보를 확인하고 업데이트할 수 있습니다.</p>

         </div>

         {attachments.length > 0 && (

diff --git a/components/document-lists/vendor-doc-list-client.tsx b/components/document-lists/vendor-doc-list-client.tsx
index d914b6f0..2bd7d996 100644
--- a/components/document-lists/vendor-doc-list-client.tsx
+++ b/components/document-lists/vendor-doc-list-client.tsx
@@ -4,7 +4,7 @@ import { useRouter, useParams } from "next/navigation"
 
 import DocumentContainer from "@/components/documents/document-container"
 import { ProjectInfo, ProjectSwitcher } from "@/components/documents/project-swicher"
-
+import { InformationButton } from "@/components/information/information-button"
 interface VendorDocumentsClientProps {
     projects: ProjectInfo[]
     children: React.ReactNode
@@ -60,7 +60,10 @@ export default function VendorDocumentListClient({
             <div className="flex items-center justify-between">
                 {/* 왼쪽: 타이틀 & 설명 */}
                 <div>
-                    <h2 className="text-2xl font-bold tracking-tight">Vendor Document List</h2>
+                    <div className="flex items-center gap-2">
+                        <h2 className="text-2xl font-bold tracking-tight">Vendor Document List</h2>
+                        <InformationButton pagePath="partners/document-list" />
+                    </div>
                     <p className="text-muted-foreground">
                         {projectType === "ship" 
                             ? "삼성중공업 문서시스템으로부터 목록을 가져오고 문서 파일을 등록하여 삼성중공업으로 전달할 수 있습니다."
diff --git a/components/documents/vendor-docs.client.tsx b/components/documents/vendor-docs.client.tsx
index 9bb7988c..ebc30b83 100644
--- a/components/documents/vendor-docs.client.tsx
+++ b/components/documents/vendor-docs.client.tsx
@@ -5,7 +5,7 @@ import { useRouter, useParams } from "next/navigation"
 
 import DocumentContainer from "@/components/documents/document-container"
 import { ProjectInfo, ProjectSwitcher } from "./project-swicher"
-
+import { InformationButton } from "@/components/information/information-button"
 interface VendorDocumentsClientProps {
     projects: ProjectInfo[]
     children: React.ReactNode
@@ -55,7 +55,10 @@ export default function VendorDocumentsClient({
             <div className="flex items-center justify-between">
                 {/* 왼쪽: 타이틀 & 설명 */}
                 <div>
-                    <h2 className="text-2xl font-bold tracking-tight">Vendor Documents</h2>
+                    <div className="flex items-center gap-2">
+                        <h2 className="text-2xl font-bold tracking-tight">Vendor Documents</h2>
+                        <InformationButton pagePath="partners/documents" />
+                    </div>
                     <p className="text-muted-foreground">
                         문서리스트를 확인하고 리스트에 맞게 문서를 업로드하고 관리할 수 있으며
                         삼성중공업으로 전달할 수 있습니다.
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
diff --git a/components/items-tech/item-tech-container.tsx b/components/items-tech/item-tech-container.tsx
index c09f684a..260f3e64 100644
--- a/components/items-tech/item-tech-container.tsx
+++ b/components/items-tech/item-tech-container.tsx
@@ -11,7 +11,7 @@ import {
   DropdownMenuItem,

   DropdownMenuTrigger,

 } from "@/components/ui/dropdown-menu"

-

+import { InformationButton } from "@/components/information/information-button"

 interface ItemType {

   id: string

   name: string

@@ -56,7 +56,10 @@ export function ItemTechContainer({
       <div className="flex items-center justify-between">

         {/* 왼쪽: 타이틀 & 설명 */}

         <div>

-          <h2 className="text-2xl font-bold tracking-tight">자재 관리</h2>

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

+            <h2 className="text-2xl font-bold tracking-tight">자재 관리</h2>

+            <InformationButton pagePath="evcp/items-tech" />

+          </div>

           <p className="text-muted-foreground">

             조선 및 해양 자재를 등록하고 관리할 수 있습니다.

           </p>

diff --git a/components/notice/notice-client.tsx b/components/notice/notice-client.tsx
new file mode 100644
index 00000000..fab0d758
--- /dev/null
+++ b/components/notice/notice-client.tsx
@@ -0,0 +1,438 @@
+"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, 

+  Plus,

+  Eye,

+  Trash2

+} from "lucide-react"

+import { toast } from "sonner"

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

+import { getNoticeLists, deleteNotice, getPagePathList } from "@/lib/notice/service"

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

+import {

+  AlertDialog,

+  AlertDialogAction,

+  AlertDialogCancel,

+  AlertDialogContent,

+  AlertDialogDescription,

+  AlertDialogFooter,

+  AlertDialogHeader,

+  AlertDialogTitle,

+  AlertDialogTrigger,

+} from "@/components/ui/alert-dialog"

+import { UpdateNoticeSheet } from "./notice-edit-sheet"

+import { NoticeCreateDialog } from "./notice-create-dialog"

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

+

+type NoticeWithAuthor = Notice & {

+  authorName: string | null

+  authorEmail: string | null

+}

+

+interface NoticeClientProps {

+  initialData?: NoticeWithAuthor[]

+  currentUserId?: number

+}

+

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

+type SortDirection = "asc" | "desc"

+

+export function NoticeClient({ initialData = [], currentUserId }: NoticeClientProps) {

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

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

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

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

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

+  const [, startTransition] = useTransition()

+  const [isEditSheetOpen, setIsEditSheetOpen] = useState(false)

+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)

+  const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)

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

+  const [pagePathOptions, setPagePathOptions] = useState<Array<{ value: string; label: string }>>([])

+  // 공지사항 목록 조회

+  const fetchNotices = async () => {

+    try {

+      setLoading(true)

+      const search = searchQuery || undefined

+

+      startTransition(async () => {

+        const result = await getNoticeLists({

+          page: 1,

+          perPage: 50,

+          search: search,

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

+          flags: [],

+          filters: [],

+          joinOperator: "and",

+          pagePath: "",

+          title: "",

+          content: "",

+          authorId: null,

+          isActive: null,

+          from: "",

+          to: "",

+        })

+

+        if (result?.data) {

+          setNotices(result.data)

+        } else {

+          toast.error("공지사항 목록을 가져오는데 실패했습니다.")

+        }

+        setLoading(false)

+      })

+    } catch (error) {

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

+      toast.error("공지사항 목록을 가져오는데 실패했습니다.")

+      setLoading(false)

+    }

+  }

+

+  // 검색 핸들러

+  const handleSearch = () => {

+    fetchNotices()

+  }

+

+  // 정렬 함수

+  const sortNotices = (notices: NoticeWithAuthor[]) => {

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

+      let aValue: string | Date

+      let bValue: string | Date

+

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

+        aValue = a.title

+        bValue = b.title

+      } 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 handleDelete = async (notice: NoticeWithAuthor) => {

+    try {

+      const result = await deleteNotice(notice.id)

+      

+      if (result.success) {

+        toast.success(result.message)

+        setNotices(notices.filter(n => n.id !== notice.id))

+      } else {

+        toast.error(result.message)

+      }

+    } catch (error) {

+      console.error("Error deleting notice:", error)

+      toast.error("공지사항 삭제에 실패했습니다.")

+    }

+  }

+

+  // 정렬된 공지사항 목록

+  const sortedNotices = sortNotices(notices)

+

+  // 페이지 경로 옵션 로딩

+  const loadPagePathOptions = async () => {

+    try {

+      const paths = await getPagePathList()

+      const options = paths.map(path => ({

+        value: path.pagePath,

+        label: `${path.pageName} (${path.pagePath})`

+      }))

+      setPagePathOptions(options)

+    } catch (error) {

+      console.error("페이지 경로 로딩 실패:", error)

+    }

+  }

+

+  // View 다이얼로그 열기

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

+    setSelectedNotice(notice)

+    setIsViewDialogOpen(true)

+  }

+

+  // Edit Sheet 열기

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

+    setSelectedNotice(notice)

+    setIsEditSheetOpen(true)

+  }

+

+  // Create Dialog 열기

+  const handleCreateNotice = () => {

+    setIsCreateDialogOpen(true)

+  }

+

+  useEffect(() => {

+    if (initialData.length > 0) {

+      setNotices(initialData)

+    } else {

+      fetchNotices()

+    }

+    loadPagePathOptions()

+  }, [])

+

+  useEffect(() => {

+    if (searchQuery !== "") {

+      fetchNotices()

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

+      setNotices(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>

+        <Button onClick={handleCreateNotice}>

+          <Plus className="h-4 w-4 mr-2" />

+          공지사항 추가

+        </Button>

+      </div>

+

+      {/* 공지사항 테이블 */}

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

+        <Table>

+          <TableHeader>

+            <TableRow>

+              <TableHead>

+                <button

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

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

+                >

+                  제목

+                  {sortField === "title" && (

+                    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>

+                <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={6} className="text-center py-8">

+                  로딩 중...

+                </TableCell>

+              </TableRow>

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

+              <TableRow>

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

+                  공지사항이 없습니다.

+                </TableCell>

+              </TableRow>

+            ) : (

+              sortedNotices.map((notice) => (

+                <TableRow key={notice.id}>

+                  <TableCell className="font-medium">

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

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

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

+                        {notice.title}

+                      </span>

+                    </div>

+                  </TableCell>

+                  <TableCell>

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

+                      {notice.pagePath}

+                    </span>

+                  </TableCell>

+                  <TableCell>

+                    <div className="flex flex-col">

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

+                        {notice.authorName || "알 수 없음"}

+                      </span>

+                      {notice.authorEmail && (

+                        <span className="text-xs text-muted-foreground">

+                          {notice.authorEmail}

+                        </span>

+                      )}

+                    </div>

+                  </TableCell>

+                  <TableCell>

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

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

+                    </Badge>

+                  </TableCell>

+                  <TableCell>

+                    {formatDate(notice.createdAt)}

+                  </TableCell>

+                  <TableCell className="text-right">

+                    <div className="flex justify-end gap-2">

+                      {/* View 버튼 - 다이얼로그 방식 */}

+                      <Button 

+                        variant="outline" 

+                        size="sm"

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

+                        title="공지사항 보기 (Dialog)"

+                      >

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

+                      </Button>

+                      

+                      {/* Edit 버튼 - 다이얼로그 방식 */}

+                      <Button 

+                        variant="outline" 

+                        size="sm"

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

+                        title="공지사항 편집 (Dialog)"

+                      >

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

+                      </Button>

+

+                      {/* 기존 페이지 방식 (비교용)

+                      <Link href={`/${lng}/evcp/notice/${notice.id}/view`}>

+                        <Button variant="outline" size="sm" title="공지사항 보기 (Page)">

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

+                        </Button>

+                      </Link> */}

+                      

+                      <AlertDialog>

+                        <AlertDialogTrigger asChild>

+                          <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700">

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

+                          </Button>

+                        </AlertDialogTrigger>

+                        <AlertDialogContent>

+                          <AlertDialogHeader>

+                            <AlertDialogTitle>공지사항 삭제</AlertDialogTitle>

+                            <AlertDialogDescription>

+                              이 공지사항을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.

+                            </AlertDialogDescription>

+                          </AlertDialogHeader>

+                          <AlertDialogFooter>

+                            <AlertDialogCancel>취소</AlertDialogCancel>

+                            <AlertDialogAction 

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

+                              className="bg-red-600 hover:bg-red-700"

+                            >

+                              삭제

+                            </AlertDialogAction>

+                          </AlertDialogFooter>

+                        </AlertDialogContent>

+                      </AlertDialog>

+                    </div>

+                  </TableCell>

+                </TableRow>

+              ))

+            )}

+          </TableBody>

+        </Table>

+      </div>

+

+      {/* 다이얼로그들과 시트 - 테이블 밖에서 단일 렌더링 */}

+      <NoticeViewDialog

+        open={isViewDialogOpen}

+        onOpenChange={setIsViewDialogOpen}

+        notice={selectedNotice}

+      />

+

+      <NoticeCreateDialog

+        open={isCreateDialogOpen}

+        onOpenChange={setIsCreateDialogOpen}

+        pagePathOptions={pagePathOptions}

+        currentUserId={currentUserId}

+        onSuccess={fetchNotices}

+      />

+

+      <UpdateNoticeSheet

+        open={isEditSheetOpen}

+        onOpenChange={setIsEditSheetOpen}

+        notice={selectedNotice}

+        pagePathOptions={pagePathOptions}

+        onSuccess={fetchNotices}

+      />

+    </div>

+  )

+} 
\ No newline at end of file
diff --git a/components/notice/notice-create-dialog.tsx b/components/notice/notice-create-dialog.tsx
new file mode 100644
index 00000000..e3ce16a1
--- /dev/null
+++ b/components/notice/notice-create-dialog.tsx
@@ -0,0 +1,216 @@
+"use client"

+

+import * as React from "react"

+import { useState } from "react"

+import { zodResolver } from "@hookform/resolvers/zod"

+import { useForm } from "react-hook-form"

+import { toast } from "sonner"

+import { Loader } from "lucide-react"

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

+import {

+  Dialog,

+  DialogContent,

+  DialogHeader,

+  DialogTitle,

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

+import {

+  Form,

+  FormControl,

+  FormField,

+  FormItem,

+  FormLabel,

+  FormMessage,

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

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

+import { Switch } from "@/components/ui/switch"

+import {

+  Select,

+  SelectContent,

+  SelectItem,

+  SelectTrigger,

+  SelectValue,

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

+import TiptapEditor from "@/components/qna/tiptap-editor"

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

+import { createNoticeSchema, type CreateNoticeSchema } from "@/lib/notice/validations"

+

+interface NoticeCreateDialogProps {

+  open: boolean

+  onOpenChange: (open: boolean) => void

+  pagePathOptions: Array<{ value: string; label: string }>

+  currentUserId?: number

+  onSuccess?: () => void

+}

+

+export function NoticeCreateDialog({

+  open,

+  onOpenChange,

+  pagePathOptions,

+  currentUserId,

+  onSuccess,

+}: NoticeCreateDialogProps) {

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

+

+  const form = useForm<CreateNoticeSchema>({

+    resolver: zodResolver(createNoticeSchema),

+    defaultValues: {

+      pagePath: "",

+      title: "",

+      content: "",

+      authorId: currentUserId,

+      isActive: true,

+    },

+  })

+

+  React.useEffect(() => {

+    if (open) {

+      // 다이얼로그가 열릴 때마다 폼 초기화

+      form.reset({

+        pagePath: "",

+        title: "",

+        content: "",

+        authorId: currentUserId,

+        isActive: true,

+      })

+    }

+  }, [open, currentUserId, form])

+

+  const onSubmit = async (values: CreateNoticeSchema) => {

+    setIsLoading(true)

+    console.log("Form values:", values) // 디버깅용

+    try {

+      const result = await createNotice(values)

+      console.log("Create result:", result) // 디버깅용

+

+      if (result.success) {

+        toast.success(result.message || "공지사항이 성공적으로 생성되었습니다.")

+        if (onSuccess) onSuccess()

+        onOpenChange(false)

+      } else {

+        toast.error(result.message || "공지사항 생성에 실패했습니다.")

+        console.error("Create failed:", result.message)

+      }

+    } catch (error) {

+      toast.error("공지사항 생성에 실패했습니다.")

+      console.error("Create error:", error)

+    } finally {

+      setIsLoading(false)

+    }

+  }

+

+

+

+  return (

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

+      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">

+        <DialogHeader>

+          <DialogTitle className="text-xl font-bold">

+            새 공지사항 작성

+          </DialogTitle>

+        </DialogHeader>

+

+        <Form {...form}>

+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

+              <FormField

+                control={form.control}

+                name="pagePath"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>페이지 경로 *</FormLabel>

+                    <Select onValueChange={field.onChange} value={field.value}>

+                      <FormControl>

+                        <SelectTrigger>

+                          <SelectValue placeholder="페이지를 선택하세요" />

+                        </SelectTrigger>

+                      </FormControl>

+                      <SelectContent>

+                        {pagePathOptions.map((option) => (

+                          <SelectItem key={option.value} value={option.value}>

+                            {option.label}

+                          </SelectItem>

+                        ))}

+                      </SelectContent>

+                    </Select>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+

+              <FormField

+                control={form.control}

+                name="isActive"

+                render={({ field }) => (

+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">

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

+                      <FormLabel className="text-base">활성 상태</FormLabel>

+                      <div className="text-sm text-muted-foreground">

+                        활성화하면 해당 페이지에서 공지사항이 표시됩니다.

+                      </div>

+                    </div>

+                    <FormControl>

+                      <Switch

+                        checked={field.value}

+                        onCheckedChange={field.onChange}

+                      />

+                    </FormControl>

+                  </FormItem>

+                )}

+              />

+            </div>

+

+            <FormField

+              control={form.control}

+              name="title"

+              render={({ field }) => (

+                <FormItem>

+                  <FormLabel>제목 *</FormLabel>

+                  <FormControl>

+                    <Input placeholder="공지사항 제목을 입력하세요" {...field} />

+                  </FormControl>

+                  <FormMessage />

+                </FormItem>

+              )}

+            />

+

+            <FormField

+              control={form.control}

+              name="content"

+              render={({ field }) => (

+                <FormItem>

+                  <FormLabel>내용 *</FormLabel>

+                  <FormControl>

+                    <div className="min-h-[400px]">

+                      <TiptapEditor

+                        content={field.value}

+                        setContent={field.onChange}

+                        disabled={isLoading}

+                        height="300px"

+                      />

+                    </div>

+                  </FormControl>

+                  <FormMessage />

+                </FormItem>

+              )}

+            />

+

+            <div className="flex justify-end gap-2 pt-4">

+              <Button

+                type="button"

+                variant="outline"

+                onClick={() => onOpenChange(false)}

+                disabled={isLoading}

+              >

+                취소

+              </Button>

+              <Button type="submit" disabled={isLoading}>

+                {isLoading && <Loader className="mr-2 h-4 w-4 animate-spin" />}

+                생성

+              </Button>

+            </div>

+          </form>

+        </Form>

+      </DialogContent>

+    </Dialog>

+  )

+} 
\ No newline at end of file
diff --git a/components/notice/notice-edit-sheet.tsx b/components/notice/notice-edit-sheet.tsx
new file mode 100644
index 00000000..91bcae3b
--- /dev/null
+++ b/components/notice/notice-edit-sheet.tsx
@@ -0,0 +1,246 @@
+"use client"

+

+import * as React from "react"

+import { zodResolver } from "@hookform/resolvers/zod"

+import { useForm } from "react-hook-form"

+import { toast } from "sonner"

+

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

+import {

+  Form,

+  FormControl,

+  FormField,

+  FormItem,

+  FormLabel,

+  FormMessage,

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

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

+import {

+  Sheet,

+  SheetContent,

+  SheetDescription,

+  SheetFooter,

+  SheetHeader,

+  SheetTitle,

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

+import {

+  Select,

+  SelectContent,

+  SelectItem,

+  SelectTrigger,

+  SelectValue,

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

+import { Switch } from "@/components/ui/switch"

+

+import { updateNoticeSchema, type UpdateNoticeSchema } from "@/lib/notice/validations"

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

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

+import TiptapEditor from "@/components/qna/tiptap-editor"

+

+type NoticeWithAuthor = Notice & {

+  authorName: string | null

+  authorEmail: string | null

+}

+

+interface UpdateNoticeSheetProps {

+  open: boolean

+  onOpenChange: (open: boolean) => void

+  notice: NoticeWithAuthor | null

+  pagePathOptions: Array<{ value: string; label: string }>

+  onSuccess?: () => void

+}

+

+export function UpdateNoticeSheet({ 

+  open, 

+  onOpenChange, 

+  notice, 

+  pagePathOptions, 

+  onSuccess 

+}: UpdateNoticeSheetProps) {

+  const [isUpdatePending, startUpdateTransition] = React.useTransition()

+

+  const form = useForm<UpdateNoticeSchema>({

+    resolver: zodResolver(updateNoticeSchema),

+    defaultValues: {

+      id: 0,

+      pagePath: "",

+      title: "",

+      content: "",

+      isActive: true,

+    },

+  })

+

+  // notice 데이터가 변경될 때 폼 초기화

+  React.useEffect(() => {

+    if (notice) {

+      form.reset({

+        id: notice.id,

+        pagePath: notice.pagePath,

+        title: notice.title,

+        content: notice.content,

+        isActive: notice.isActive,

+      })

+    }

+  }, [notice, form])

+

+  function onSubmit(input: UpdateNoticeSchema) {

+    if (!notice) return

+

+    startUpdateTransition(async () => {

+      try {

+        const result = await updateNoticeData(input)

+

+        if (result.success) {

+          toast.success(result.message || "공지사항이 성공적으로 수정되었습니다.")

+          if (onSuccess) onSuccess()

+          onOpenChange(false)

+        } else {

+          toast.error(result.message || "공지사항 수정에 실패했습니다.")

+        }

+      } catch (error) {

+        toast.error("예기치 못한 오류가 발생했습니다.")

+        console.error("공지사항 수정 오류:", error)

+      }

+    })

+  }

+

+  return (

+    <Sheet open={open} onOpenChange={onOpenChange}>

+      <SheetContent className="flex h-full w-full flex-col gap-6 sm:max-w-4xl">

+        <SheetHeader className="text-left">

+          <SheetTitle>공지사항 수정</SheetTitle>

+          <SheetDescription>

+            공지사항의 제목과 내용을 수정할 수 있습니다. 수정된 내용은 즉시 반영됩니다.

+          </SheetDescription>

+        </SheetHeader>

+

+        <Form {...form}>

+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0 space-y-6">

+            {/* 공지사항 정보 표시 */}

+            {notice && (

+              <div className="rounded-md border border-muted bg-muted/50 p-3 text-sm">

+                <div className="font-medium text-muted-foreground mb-1">공지사항 정보</div>

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

+                  <div>작성자: {notice.authorName} ({notice.authorEmail})</div>

+                  <div>작성일: {new Date(notice.createdAt).toLocaleDateString("ko-KR")}</div>

+                  <div>수정일: {new Date(notice.updatedAt).toLocaleDateString("ko-KR")}</div>

+                  <div>상태: {notice.isActive ? "활성" : "비활성"}</div>

+                </div>

+              </div>

+            )}

+

+            {/* 페이지 경로 선택 */}

+            <FormField

+              control={form.control}

+              name="pagePath"

+              render={({ field }) => (

+                <FormItem>

+                  <FormLabel>페이지 경로 *</FormLabel>

+                  <Select

+                    onValueChange={field.onChange}

+                    defaultValue={field.value}

+                    disabled={isUpdatePending}

+                  >

+                    <FormControl>

+                      <SelectTrigger>

+                        <SelectValue placeholder="페이지를 선택해주세요" />

+                      </SelectTrigger>

+                    </FormControl>

+                    <SelectContent>

+                      {pagePathOptions.map((option) => (

+                        <SelectItem key={option.value} value={option.value}>

+                          {option.label}

+                        </SelectItem>

+                      ))}

+                    </SelectContent>

+                  </Select>

+                  <FormMessage />

+                </FormItem>

+              )}

+            />

+

+            {/* 제목 입력 */}

+            <FormField

+              control={form.control}

+              name="title"

+              render={({ field }) => (

+                <FormItem>

+                  <FormLabel>제목 *</FormLabel>

+                  <FormControl>

+                    <Input

+                      placeholder="공지사항의 제목을 입력해주세요"

+                      disabled={isUpdatePending}

+                      className="text-base"

+                      {...field}

+                    />

+                  </FormControl>

+                  <FormMessage />

+                </FormItem>

+              )}

+            />

+

+            {/* 활성 상태 */}

+            <FormField

+              control={form.control}

+              name="isActive"

+              render={({ field }) => (

+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">

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

+                    <FormLabel className="text-base">활성 상태</FormLabel>

+                    <div className="text-sm text-muted-foreground">

+                      활성화하면 해당 페이지에서 공지사항이 표시됩니다.

+                    </div>

+                  </div>

+                  <FormControl>

+                    <Switch

+                      checked={field.value}

+                      onCheckedChange={field.onChange}

+                      disabled={isUpdatePending}

+                    />

+                  </FormControl>

+                </FormItem>

+              )}

+            />

+

+            {/* 내용 입력 (리치텍스트 에디터) */}

+            <FormField

+              control={form.control}

+              name="content"

+              render={({ field }) => (

+                <FormItem className="flex flex-col flex-1 min-h-0">

+                  <FormLabel>내용 *</FormLabel>

+                  <FormControl className="flex flex-col flex-1 min-h-0">

+                    <TiptapEditor

+                      content={field.value}

+                      setContent={field.onChange}

+                      disabled={isUpdatePending}

+                    />

+                  </FormControl>

+                  <FormMessage />

+                </FormItem>

+              )}

+            />

+          </form>

+        </Form>

+

+        <SheetFooter className="gap-2 pt-4 border-t">

+          <Button

+            type="button"

+            variant="outline"

+            onClick={() => onOpenChange(false)}

+            disabled={isUpdatePending}

+          >

+            취소

+          </Button>

+          <Button

+            type="submit"

+            onClick={form.handleSubmit(onSubmit)}

+            disabled={isUpdatePending}

+          >

+            {isUpdatePending ? "수정 중..." : "수정 완료"}

+          </Button>

+        </SheetFooter>

+      </SheetContent>

+    </Sheet>

+  )

+} 
\ No newline at end of file
diff --git a/components/notice/notice-view-dialog.tsx b/components/notice/notice-view-dialog.tsx
new file mode 100644
index 00000000..9b42311a
--- /dev/null
+++ b/components/notice/notice-view-dialog.tsx
@@ -0,0 +1,56 @@
+"use client"

+

+import * as React from "react"

+import {

+  Dialog,

+  DialogContent,

+  DialogHeader,

+  DialogTitle,

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

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

+

+type NoticeWithAuthor = Notice & {

+  authorName: string | null

+  authorEmail: string | null

+}

+

+interface NoticeViewDialogProps {

+  open: boolean

+  onOpenChange: (open: boolean) => void

+  notice: NoticeWithAuthor | null

+}

+

+export function NoticeViewDialog({

+  open,

+  onOpenChange,

+  notice,

+}: NoticeViewDialogProps) {

+

+  if (!notice) return null

+

+  return (

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

+      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">

+        <DialogHeader>

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

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

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

+                <DialogTitle className="text-xl font-bold">

+                  제목: {notice.title}

+                </DialogTitle>

+              </div>              

+            </div>

+          </div>

+        </DialogHeader>

+        

+        <div className="mt-6 rounded-lg border border-gray-200 p-4">

+          <div 

+            className="prose prose-sm max-w-none"

+            dangerouslySetInnerHTML={{ __html: notice.content }}

+          />

+        </div>

+      </DialogContent>

+

+    </Dialog>

+  )

+} 
\ No newline at end of file