diff options
| author | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-10-27 03:12:26 +0000 |
|---|---|---|
| committer | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-10-27 03:12:26 +0000 |
| commit | 9f761849c2e98f650d089d00aed9df090497ada9 (patch) | |
| tree | cb06b8dad5b34d1cd17997cdc82b2de5b981d965 /components/notice/notice-create-dialog.tsx | |
| parent | 94f55e3300063511c2799096128afa1b815f4f56 (diff) | |
(최겸) 공지사항 팝업기능 및 다시보지않기 기능 구현(로컬 스토리지 활용)
Diffstat (limited to 'components/notice/notice-create-dialog.tsx')
| -rw-r--r-- | components/notice/notice-create-dialog.tsx | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/components/notice/notice-create-dialog.tsx b/components/notice/notice-create-dialog.tsx index 98c66c99..9b7183a6 100644 --- a/components/notice/notice-create-dialog.tsx +++ b/components/notice/notice-create-dialog.tsx @@ -31,6 +31,11 @@ import { cn } from "@/lib/utils" import TiptapEditor from "@/components/qna/tiptap-editor"
import { createNotice } from "@/lib/notice/service"
import { createNoticeSchema, type CreateNoticeSchema } from "@/lib/notice/validations"
+import { Calendar } from "@/components/ui/calendar"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { CalendarIcon } from "lucide-react"
+import { format } from "date-fns"
+import { ko } from "date-fns/locale"
interface NoticeCreateDialogProps {
open: boolean
@@ -75,6 +80,10 @@ export function NoticeCreateDialog({ content: "",
authorId: currentUserId,
isActive: true,
+ isPopup: false,
+ startAt: undefined,
+ endAt: undefined,
+ dontShowDuration: "never", // 기본값을 영구로 설정
},
})
@@ -87,6 +96,10 @@ export function NoticeCreateDialog({ content: "",
authorId: currentUserId,
isActive: true,
+ isPopup: false,
+ startAt: undefined,
+ endAt: undefined,
+ dontShowDuration: "never", // 기본값을 영구로 설정
})
}
}, [open, currentUserId, form])
@@ -230,6 +243,28 @@ export function NoticeCreateDialog({ />
</div>
+ {/* 팝업 여부 */}
+ <FormField
+ control={form.control}
+ name="isPopup"
+ 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>
+ )}
+ />
+
<FormField
control={form.control}
name="title"
@@ -244,6 +279,174 @@ export function NoticeCreateDialog({ )}
/>
+ {/* 유효기간 설정 (팝업인 경우에만 표시) */}
+ {form.watch('isPopup') && (
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <FormField
+ control={form.control}
+ name="startAt"
+ render={({ field }) => (
+ <FormItem className="flex flex-col">
+ <FormLabel>게시 시작 일시 *</FormLabel>
+ <Popover>
+ <PopoverTrigger asChild>
+ <FormControl>
+ <Button
+ variant="outline"
+ className={cn(
+ "w-full pl-3 text-left font-normal",
+ !field.value && "text-muted-foreground"
+ )}
+ >
+ {field.value ? (
+ format(field.value, "PPP HH:mm", { locale: ko })
+ ) : (
+ <span>시작 일시 선택</span>
+ )}
+ <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+ </Button>
+ </FormControl>
+ </PopoverTrigger>
+ <PopoverContent className="w-auto p-0" align="start">
+ <Calendar
+ mode="single"
+ selected={field.value}
+ onSelect={(date) => {
+ if (date) {
+ // 시간을 보존하거나 설정
+ const dateTime = new Date(date)
+ if (field.value) {
+ dateTime.setHours(field.value.getHours())
+ dateTime.setMinutes(field.value.getMinutes())
+ } else {
+ dateTime.setHours(0, 0, 0, 0)
+ }
+ field.onChange(dateTime)
+ }
+ }}
+ disabled={(date) =>
+ date < new Date("1900-01-01")
+ }
+ initialFocus
+ />
+ <div className="p-3 border-t">
+ <Input
+ type="time"
+ value={field.value ? format(field.value, "HH:mm") : ""}
+ onChange={(e) => {
+ if (field.value && e.target.value) {
+ const [hours, minutes] = e.target.value.split(':')
+ const newDate = new Date(field.value)
+ newDate.setHours(parseInt(hours), parseInt(minutes))
+ field.onChange(newDate)
+ }
+ }}
+ />
+ </div>
+ </PopoverContent>
+ </Popover>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="endAt"
+ render={({ field }) => (
+ <FormItem className="flex flex-col">
+ <FormLabel>게시 종료 일시 *</FormLabel>
+ <Popover>
+ <PopoverTrigger asChild>
+ <FormControl>
+ <Button
+ variant="outline"
+ className={cn(
+ "w-full pl-3 text-left font-normal",
+ !field.value && "text-muted-foreground"
+ )}
+ >
+ {field.value ? (
+ format(field.value, "PPP HH:mm", { locale: ko })
+ ) : (
+ <span>종료 일시 선택</span>
+ )}
+ <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+ </Button>
+ </FormControl>
+ </PopoverTrigger>
+ <PopoverContent className="w-auto p-0" align="start">
+ <Calendar
+ mode="single"
+ selected={field.value}
+ onSelect={(date) => {
+ if (date) {
+ const dateTime = new Date(date)
+ if (field.value) {
+ dateTime.setHours(field.value.getHours())
+ dateTime.setMinutes(field.value.getMinutes())
+ } else {
+ dateTime.setHours(23, 59, 59, 999)
+ }
+ field.onChange(dateTime)
+ }
+ }}
+ disabled={(date) =>
+ date < new Date("1900-01-01")
+ }
+ initialFocus
+ />
+ <div className="p-3 border-t">
+ <Input
+ type="time"
+ value={field.value ? format(field.value, "HH:mm") : ""}
+ onChange={(e) => {
+ if (field.value && e.target.value) {
+ const [hours, minutes] = e.target.value.split(':')
+ const newDate = new Date(field.value)
+ newDate.setHours(parseInt(hours), parseInt(minutes))
+ field.onChange(newDate)
+ }
+ }}
+ />
+ </div>
+ </PopoverContent>
+ </Popover>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+ )}
+
+ {/* 다시 보지 않기 설정 (팝업인 경우에만 표시) - 임시 주석처리 */}
+ {/* {form.watch('isPopup') && (
+ <FormField
+ control={form.control}
+ name="dontShowDuration"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>'다시 보지 않기' 기간 설정 *</FormLabel>
+ <Select onValueChange={field.onChange} defaultValue={field.value}>
+ <FormControl>
+ <SelectTrigger>
+ <SelectValue placeholder="기간을 선택하세요" />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ <SelectItem value="day">하루 동안 표시하지 않음</SelectItem>
+ <SelectItem value="never">영구적으로 표시하지 않음</SelectItem>
+ </SelectContent>
+ </Select>
+ <div className="text-sm text-muted-foreground">
+ 사용자가 '다시 보지 않기'를 체크하면 설정한 기간 동안 해당 공지사항이 표시되지 않습니다.
+ </div>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ )} */}
+
<FormField
control={form.control}
name="content"
|