(최겸) 정보시스템 인포메이션 기능 개발

1 files changed, 329 insertions, 0 deletions

diff --git a/lib/information/table/add-information-dialog.tsx b/lib/information/table/add-information-dialog.tsx
new file mode 100644
index 00000000..a879fbfe
--- /dev/null
+++ b/lib/information/table/add-information-dialog.tsx
@@ -0,0 +1,329 @@
+"use client"

+

+import * as React from "react"

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

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

+import { toast } from "sonner"

+import { Loader, Upload, X } from "lucide-react"

+import { useRouter } from "next/navigation"

+

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

+import {

+  Dialog,

+  DialogContent,

+  DialogDescription,

+  DialogFooter,

+  DialogHeader,

+  DialogTitle,

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

+import {

+  Form,

+  FormControl,

+  FormField,

+  FormItem,

+  FormLabel,

+  FormMessage,

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

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

+import { Textarea } from "@/components/ui/textarea"

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

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

+import { createInformationSchema, type CreateInformationSchema } from "@/lib/information/validations"

+

+interface AddInformationDialogProps {

+  open: boolean

+  onOpenChange: (open: boolean) => void

+}

+

+export function AddInformationDialog({

+  open,

+  onOpenChange,

+}: AddInformationDialogProps) {

+  const router = useRouter()

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

+  const [uploadedFile, setUploadedFile] = React.useState<File | null>(null)

+

+  const form = useForm<CreateInformationSchema>({

+    resolver: zodResolver(createInformationSchema),

+    defaultValues: {

+      pageCode: "",

+      pageName: "",

+      title: "",

+      description: "",

+      noticeTitle: "",

+      noticeContent: "",

+      attachmentFileName: "",

+      attachmentFilePath: "",

+      attachmentFileSize: "",

+      isActive: true,

+    },

+  })

+

+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {

+    const file = event.target.files?.[0]

+    if (file) {

+      setUploadedFile(file)

+      // 파일 크기를 MB 단위로 변환

+      const sizeInMB = (file.size / (1024 * 1024)).toFixed(2)

+      form.setValue("attachmentFileName", file.name)

+      form.setValue("attachmentFileSize", `${sizeInMB} MB`)

+    }

+  }

+

+  const removeFile = () => {

+    setUploadedFile(null)

+    form.setValue("attachmentFileName", "")

+    form.setValue("attachmentFilePath", "")

+    form.setValue("attachmentFileSize", "")

+  }

+

+  const uploadFile = async (file: File): Promise<string> => {

+    const formData = new FormData()

+    formData.append("file", file)

+

+    const response = await fetch("/api/upload", {

+      method: "POST",

+      body: formData,

+    })

+

+    if (!response.ok) {

+      throw new Error("파일 업로드에 실패했습니다.")

+    }

+

+    const result = await response.json()

+    return result.url

+  }

+

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

+    setIsLoading(true)

+    try {

+      const finalValues = { ...values }

+

+      // 파일이 있으면 업로드

+      if (uploadedFile) {

+        const filePath = await uploadFile(uploadedFile)

+        finalValues.attachmentFilePath = filePath

+      }

+

+      const result = await createInformation(finalValues)

+

+      if (result.success) {

+        toast.success(result.message)

+        form.reset()

+        setUploadedFile(null)

+        onOpenChange(false)

+        router.refresh()

+      } else {

+        toast.error(result.message)

+      }

+    } catch (error) {

+      toast.error("인포메이션 생성에 실패했습니다.")

+      console.error(error)

+    } finally {

+      setIsLoading(false)

+    }

+  }

+

+  // 다이얼로그가 닫힐 때 폼 초기화

+  React.useEffect(() => {

+    if (!open) {

+      form.reset()

+      setUploadedFile(null)

+    }

+  }, [open, form])

+

+  return (

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

+      <DialogContent className="max-w-2xl">

+        <DialogHeader>

+          <DialogTitle>인포메이션 추가</DialogTitle>

+          <DialogDescription>

+            새로운 페이지 인포메이션을 추가합니다.

+          </DialogDescription>

+        </DialogHeader>

+

+        <Form {...form}>

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

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

+              <FormField

+                control={form.control}

+                name="pageCode"

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

+                  <FormItem>

+                    <FormLabel>페이지 코드</FormLabel>

+                    <FormControl>

+                      <Input placeholder="예: vendor-list" {...field} />

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+

+              <FormField

+                control={form.control}

+                name="pageName"

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

+                  <FormItem>

+                    <FormLabel>페이지명</FormLabel>

+                    <FormControl>

+                      <Input placeholder="예: 협력업체 목록" {...field} />

+                    </FormControl>

+                    <FormMessage />

+                  </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="description"

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

+                <FormItem>

+                  <FormLabel>설명</FormLabel>

+                  <FormControl>

+                    <Textarea 

+                      placeholder="페이지 설명을 입력하세요" 

+                      rows={4}

+                      {...field} 

+                    />

+                  </FormControl>

+                  <FormMessage />

+                </FormItem>

+              )}

+            />

+

+            <FormField

+              control={form.control}

+              name="noticeTitle"

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

+                <FormItem>

+                  <FormLabel>공지사항 제목 (선택사항)</FormLabel>

+                  <FormControl>

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

+                  </FormControl>

+                  <FormMessage />

+                </FormItem>

+              )}

+            />

+

+            <FormField

+              control={form.control}

+              name="noticeContent"

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

+                <FormItem>

+                  <FormLabel>공지사항 내용 (선택사항)</FormLabel>

+                  <FormControl>

+                    <Textarea 

+                      placeholder="공지사항 내용을 입력하세요" 

+                      rows={3}

+                      {...field} 

+                    />

+                  </FormControl>

+                  <FormMessage />

+                </FormItem>

+              )}

+            />

+

+            <div>

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

+              <div className="mt-2">

+                {uploadedFile ? (

+                  <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">

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

+                      <span className="text-sm font-medium">{uploadedFile.name}</span>

+                      <span className="text-xs text-gray-500">

+                        ({(uploadedFile.size / (1024 * 1024)).toFixed(2)} MB)

+                      </span>

+                    </div>

+                    <Button

+                      type="button"

+                      variant="ghost"

+                      size="sm"

+                      onClick={removeFile}

+                    >

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

+                    </Button>

+                  </div>

+                ) : (

+                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-4">

+                    <div className="text-center">

+                      <Upload className="mx-auto h-8 w-8 text-gray-400" />

+                      <div className="mt-2">

+                        <label

+                          htmlFor="file-upload"

+                          className="cursor-pointer text-sm text-blue-600 hover:text-blue-500"

+                        >

+                          파일을 선택하세요

+                        </label>

+                        <input

+                          id="file-upload"

+                          type="file"

+                          className="hidden"

+                          onChange={handleFileSelect}

+                          accept=".pdf,.doc,.docx,.xlsx,.ppt,.pptx,.txt,.zip"

+                        />

+                      </div>

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

+                        PDF, DOC, DOCX, XLSX, PPT, PPTX, TXT, ZIP 파일만 업로드 가능

+                      </p>

+                    </div>

+                  </div>

+                )}

+              </div>

+            </div>

+

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

+              )}

+            />

+

+            <DialogFooter>

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

+            </DialogFooter>

+          </form>

+        </Form>

+      </DialogContent>

+    </Dialog>

+  )

+} 
\ No newline at end of file