From 9f761849c2e98f650d089d00aed9df090497ada9 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Mon, 27 Oct 2025 03:12:26 +0000
Subject: (최겸) 공지사항 팝업기능 및 다시보지않기 기능 구현(로컬 스토리지
 활용)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/notice/notice-create-dialog.tsx | 203 +++++++++++++++++++++++++++++
 1 file changed, 203 insertions(+)

(limited to 'components/notice/notice-create-dialog.tsx')

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"
-- 
cgit v1.2.3