diff options
Diffstat (limited to 'components/notice')
| -rw-r--r-- | components/notice/notice-client.tsx | 438 | ||||
| -rw-r--r-- | components/notice/notice-create-dialog.tsx | 216 | ||||
| -rw-r--r-- | components/notice/notice-edit-sheet.tsx | 246 | ||||
| -rw-r--r-- | components/notice/notice-view-dialog.tsx | 56 |
4 files changed, 956 insertions, 0 deletions
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 |