summaryrefslogtreecommitdiff
path: root/lib/pq/pq-criteria/update-pq-sheet.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'lib/pq/pq-criteria/update-pq-sheet.tsx')
-rw-r--r--lib/pq/pq-criteria/update-pq-sheet.tsx952
1 files changed, 476 insertions, 476 deletions
diff --git a/lib/pq/pq-criteria/update-pq-sheet.tsx b/lib/pq/pq-criteria/update-pq-sheet.tsx
index 6aeb689f..1d8092cd 100644
--- a/lib/pq/pq-criteria/update-pq-sheet.tsx
+++ b/lib/pq/pq-criteria/update-pq-sheet.tsx
@@ -1,477 +1,477 @@
-"use client"
-
-import * as React from "react"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Loader, Save } from "lucide-react"
-import { useForm } from "react-hook-form"
-import { toast } from "sonner"
-import { z } from "zod"
-import { useRouter } from "next/navigation"
-
-import { Button } from "@/components/ui/button"
-import {
- Form,
- FormControl,
- FormDescription,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from "@/components/ui/form"
-import {
- Select,
- SelectContent,
- // SelectGroup,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select"
-import {
- Sheet,
- SheetClose,
- SheetContent,
- SheetDescription,
- SheetFooter,
- SheetHeader,
- SheetTitle,
-} from "@/components/ui/sheet"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-
-import { updatePqCriteria } from "../service"
-import { groupOptions } from "./add-pq-dialog"
-import { Checkbox } from "@/components/ui/checkbox"
-import { uploadPqCriteriaFileAction, getPqCriteriaAttachments } from "@/lib/pq/service"
-import { Dropzone, DropzoneInput, DropzoneZone, DropzoneUploadIcon, DropzoneTitle, DropzoneDescription } from "@/components/ui/dropzone"
-import { FileList, FileListHeader, FileListInfo, FileListItem, FileListName, FileListDescription, FileListAction } from "@/components/ui/file-list"
-import { X, Loader2 } from "lucide-react"
-
-// PQ 수정을 위한 Zod 스키마 정의
-const updatePqSchema = z.object({
- code: z.string().min(1, "Code is required"),
- checkPoint: z.string().min(1, "Check point is required"),
- groupName: z.string().min(1, "Group is required"),
- description: z.string().optional(),
- remarks: z.string().optional(),
- inputFormat: z.string().default("TEXT"),
-
- subGroupName: z.string().optional(),
- type: z.string().optional(),
-});
-
-type UpdatePqSchema = z.infer<typeof updatePqSchema>;
-
-// 입력 형식 옵션
-const inputFormatOptions = [
- { value: "TEXT", label: "텍스트" },
- { value: "FILE", label: "파일" },
- { value: "EMAIL", label: "이메일" },
- { value: "PHONE", label: "전화번호" },
- { value: "NUMBER", label: "숫자" },
- { value: "NUMBER_WITH_UNIT", label: "숫자+단위" },
- { value: "TEXT_FILE", label: "텍스트 + 파일" }
-];
-
-const typeOptions = [
- { value: "내자", label: "내자" },
- { value: "외자", label: "외자" },
- { value: "내외자", label: "내외자" },
-];
-
-interface UpdatePqSheetProps
- extends React.ComponentPropsWithRef<typeof Sheet> {
- pq: {
- id: number;
- code: string;
- checkPoint: string;
- description: string | null;
- remarks: string | null;
- groupName: string | null;
- inputFormat: string;
-
- subGroupName: string | null;
- type?: string | null;
- } | null
-}
-
-export function UpdatePqSheet({ pq, ...props }: UpdatePqSheetProps) {
- const [isUpdatePending, startUpdateTransition] = React.useTransition()
- const [isUploading, setIsUploading] = React.useState(false)
- const [attachments, setAttachments] = React.useState<
- { fileName: string; url: string; size?: number; originalFileName?: string }[]
- >([])
- const router = useRouter()
-
- const form = useForm<UpdatePqSchema>({
- resolver: zodResolver(updatePqSchema),
- defaultValues: {
- code: pq?.code ?? "",
- checkPoint: pq?.checkPoint ?? "",
- groupName: pq?.groupName ?? groupOptions[0],
- description: pq?.description ?? "",
- remarks: pq?.remarks ?? "",
- inputFormat: pq?.inputFormat ?? "TEXT",
-
- subGroupName: pq?.subGroupName ?? "",
- type: pq?.type ?? "내외자",
- },
- })
-
- // 폼 초기화 (pq가 변경될 때)
- React.useEffect(() => {
- if (pq) {
- form.reset({
- code: pq.code,
- checkPoint: pq.checkPoint,
- groupName: pq.groupName ?? groupOptions[0],
- description: pq.description ?? "",
- remarks: pq.remarks ?? "",
- inputFormat: pq.inputFormat ?? "TEXT",
-
- subGroupName: pq.subGroupName ?? "",
- type: pq.type ?? "내외자",
- });
-
- // 기존 첨부 로드
- getPqCriteriaAttachments(pq.id).then((res) => {
- if (res.success && res.data) {
- setAttachments(
- res.data.map((a) => ({
- fileName: a.fileName,
- url: a.filePath,
- size: a.fileSize ?? undefined,
- originalFileName: a.originalFileName || a.fileName,
- }))
- )
- } else {
- setAttachments([])
- }
- })
- }
- }, [pq, form]);
-
- const handleUpload = async (files: File[]) => {
- try {
- setIsUploading(true)
- for (const file of files) {
- const uploaded = await uploadPqCriteriaFileAction(file)
- setAttachments((prev) => [...prev, uploaded])
- }
- toast.success("첨부파일이 업로드되었습니다")
- } catch (error) {
- console.error(error)
- toast.error("첨부파일 업로드에 실패했습니다")
- } finally {
- setIsUploading(false)
- }
- }
-
- function onSubmit(input: UpdatePqSchema) {
- startUpdateTransition(async () => {
- if (!pq) return
-
- const result = await updatePqCriteria(pq.id, {
- ...input,
- attachments,
- })
-
- if (!result.success) {
- toast.error(result.message || "PQ 항목 수정에 실패했습니다")
- return
- }
-
- toast.success(result.message || "PQ 항목이 성공적으로 수정되었습니다")
- form.reset()
- props.onOpenChange?.(false)
- router.refresh()
- })
- }
- return (
- <Sheet {...props}>
- <SheetContent className="flex flex-col gap-6 sm:max-w-md">
- <SheetHeader className="text-left">
- <SheetTitle>Update PQ Criteria</SheetTitle>
- <SheetDescription>
- Update the PQ criteria details and save the changes
- </SheetDescription>
- </SheetHeader>
- <Form {...form}>
- <form
- onSubmit={form.handleSubmit(onSubmit)}
- className="flex flex-col gap-4"
- >
- {/* Code 필드 */}
- <FormField
- control={form.control}
- name="code"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Code <span className="text-destructive">*</span></FormLabel>
- <FormControl>
- <Input
- placeholder="예: 1-1, A.2.3"
- {...field}
- />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- {/* Check Point 필드 */}
- <FormField
- control={form.control}
- name="checkPoint"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Check Point <span className="text-destructive">*</span></FormLabel>
- <FormControl>
- <Input
- placeholder="검증 항목을 입력하세요"
- {...field}
- />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- {/* Group Name 필드 (Select) */}
- <FormField
- control={form.control}
- name="groupName"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Group <span className="text-destructive">*</span></FormLabel>
- <Select
- onValueChange={field.onChange}
- defaultValue={field.value}
- value={field.value}
- >
- <FormControl>
- <SelectTrigger>
- <SelectValue placeholder="그룹을 선택하세요" />
- </SelectTrigger>
- </FormControl>
- <SelectContent>
- {groupOptions.map((group) => (
- <SelectItem key={group} value={group}>
- {group}
- </SelectItem>
- ))}
- </SelectContent>
- </Select>
- <FormMessage />
- </FormItem>
- )}
- />
- {/* Sub Group Name 필드 */}
- <FormField
- control={form.control}
- name="subGroupName"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Sub Group Name</FormLabel>
- <FormControl>
- <Input
- placeholder="서브 그룹명을 입력하세요"
- {...field}
- value={field.value || ""}
- />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- {/* Type 필드 */}
- <FormField
- control={form.control}
- name="type"
- render={({ field }) => (
- <FormItem>
- <FormLabel>내/외자 구분</FormLabel>
- <Select onValueChange={field.onChange} value={field.value}>
- <FormControl>
- <SelectTrigger>
- <SelectValue placeholder="구분을 선택하세요" />
- </SelectTrigger>
- </FormControl>
- <SelectContent>
- {typeOptions.map((option) => (
- <SelectItem key={option.value} value={option.value}>
- {option.label}
- </SelectItem>
- ))}
- </SelectContent>
- </Select>
- <FormDescription>미선택 시 기본값은 내외자입니다.</FormDescription>
- <FormMessage />
- </FormItem>
- )}
- />
-
- {/* Input Format 필드 */}
- <FormField
- control={form.control}
- name="inputFormat"
- render={({ field }) => (
- <FormItem>
- <FormLabel>입력 형식</FormLabel>
- <Select onValueChange={field.onChange} defaultValue={field.value}>
- <FormControl>
- <SelectTrigger>
- <SelectValue placeholder="입력 형식을 선택하세요" />
- </SelectTrigger>
- </FormControl>
- <SelectContent>
- {inputFormatOptions.map((option) => (
- <SelectItem key={option.value} value={option.value}>
- {option.label}
- </SelectItem>
- ))}
- </SelectContent>
- </Select>
- <FormMessage />
- </FormItem>
- )}
- />
-
- {/* 첨부 파일 업로드 */}
- <div className="space-y-2">
- <div className="flex items-center justify-between">
- <FormLabel>첨부 파일</FormLabel>
- {isUploading && (
- <div className="flex items-center text-xs text-muted-foreground">
- <Loader2 className="mr-1 h-3 w-3 animate-spin" /> 업로드 중...
- </div>
- )}
- </div>
- <Dropzone
- maxSize={6e8}
- onDropAccepted={(files) => handleUpload(files)}
- onDropRejected={() =>
- toast.error("파일 크기/형식을 확인하세요.")
- }
- disabled={isUploading}
- >
- {() => (
- <FormItem>
- <DropzoneZone className="flex justify-center h-24">
- <FormControl>
- <DropzoneInput />
- </FormControl>
- <div className="flex items-center gap-4">
- <DropzoneUploadIcon />
- <div className="grid gap-0.5">
- <DropzoneTitle>파일을 드래그하거나 클릭하여 업로드</DropzoneTitle>
- <DropzoneDescription>PDF, 이미지, 문서 (최대 600MB)</DropzoneDescription>
- </div>
- </div>
- </DropzoneZone>
- <FormDescription>기준 문서 첨부가 필요한 경우 업로드하세요.</FormDescription>
- </FormItem>
- )}
- </Dropzone>
-
- {attachments.length > 0 && (
- <div className="space-y-2">
- <p className="text-sm font-medium">첨부된 파일 ({attachments.length})</p>
- <FileList>
- {attachments.map((file, idx) => (
- <FileListItem key={idx}>
- <FileListHeader>
- <FileListInfo>
- <FileListName>{file.originalFileName || file.fileName}</FileListName>
- {file.size && (
- <FileListDescription>{`${file.size} bytes`}</FileListDescription>
- )}
- </FileListInfo>
- <FileListAction
- onClick={() =>
- setAttachments((prev) => prev.filter((_, i) => i !== idx))
- }
- >
- <X className="h-4 w-4" />
- <span className="sr-only">Remove</span>
- </FileListAction>
- </FileListHeader>
- </FileListItem>
- ))}
- </FileList>
- </div>
- )}
- </div>
-
- {/* Required 체크박스 */}
-
-
- {/* Description 필드 */}
- <FormField
- control={form.control}
- name="description"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Description</FormLabel>
- <FormControl>
- <Textarea
- placeholder="상세 설명을 입력하세요"
- className="min-h-[120px] whitespace-pre-wrap"
- {...field}
- value={field.value || ""}
- />
- </FormControl>
- <FormDescription>
- 줄바꿈이 필요한 경우 Enter 키를 누르세요. 입력한 대로 저장됩니다.
- </FormDescription>
- <FormMessage />
- </FormItem>
- )}
- />
-
- {/* Remarks 필드 */}
- <FormField
- control={form.control}
- name="remarks"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Remarks</FormLabel>
- <FormControl>
- <Textarea
- placeholder="비고 사항을 입력하세요"
- className="min-h-[80px]"
- {...field}
- value={field.value || ""}
- />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- <SheetFooter className="gap-2 pt-2 sm:space-x-0">
- <SheetClose asChild>
- <Button
- type="button"
- variant="outline"
- onClick={() => form.reset()}
- >
- Cancel
- </Button>
- </SheetClose>
- <Button disabled={isUpdatePending}>
- {isUpdatePending && (
- <Loader
- className="mr-2 size-4 animate-spin"
- aria-hidden="true"
- />
- )}
- <Save className="mr-2 size-4" /> Save
- </Button>
- </SheetFooter>
- </form>
- </Form>
- </SheetContent>
- </Sheet>
- )
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader, Save } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+import { useRouter } from "next/navigation"
+
+import { Button } from "@/components/ui/button"
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import {
+ Select,
+ SelectContent,
+ // SelectGroup,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+import { updatePqCriteria } from "../service"
+import { groupOptions } from "./add-pq-dialog"
+import { Checkbox } from "@/components/ui/checkbox"
+import { uploadPqCriteriaFileAction, getPqCriteriaAttachments } from "@/lib/pq/service"
+import { Dropzone, DropzoneInput, DropzoneZone, DropzoneUploadIcon, DropzoneTitle, DropzoneDescription } from "@/components/ui/dropzone"
+import { FileList, FileListHeader, FileListInfo, FileListItem, FileListName, FileListDescription, FileListAction } from "@/components/ui/file-list"
+import { X, Loader2 } from "lucide-react"
+
+// PQ 수정을 위한 Zod 스키마 정의
+const updatePqSchema = z.object({
+ code: z.string().min(1, "Code is required"),
+ checkPoint: z.string().min(1, "Check point is required"),
+ groupName: z.string().min(1, "Group is required"),
+ description: z.string().optional(),
+ remarks: z.string().optional(),
+ inputFormat: z.string().default("TEXT"),
+
+ subGroupName: z.string().optional(),
+ type: z.string().optional(),
+});
+
+type UpdatePqSchema = z.infer<typeof updatePqSchema>;
+
+// 입력 형식 옵션
+const inputFormatOptions = [
+ { value: "TEXT", label: "텍스트" },
+ { value: "FILE", label: "파일" },
+ { value: "EMAIL", label: "이메일" },
+ { value: "PHONE", label: "전화번호" },
+ { value: "NUMBER", label: "숫자" },
+ { value: "NUMBER_WITH_UNIT", label: "숫자+단위" },
+ { value: "TEXT_FILE", label: "텍스트 + 파일" }
+];
+
+const typeOptions = [
+ { value: "내자", label: "내자" },
+ { value: "외자", label: "외자" },
+ { value: "내외자", label: "내외자" },
+];
+
+interface UpdatePqSheetProps
+ extends React.ComponentPropsWithRef<typeof Sheet> {
+ pq: {
+ id: number;
+ code: string;
+ checkPoint: string;
+ description: string | null;
+ remarks: string | null;
+ groupName: string | null;
+ inputFormat: string;
+
+ subGroupName: string | null;
+ type?: string | null;
+ } | null
+}
+
+export function UpdatePqSheet({ pq, ...props }: UpdatePqSheetProps) {
+ const [isUpdatePending, startUpdateTransition] = React.useTransition()
+ const [isUploading, setIsUploading] = React.useState(false)
+ const [attachments, setAttachments] = React.useState<
+ { fileName: string; url: string; size?: number; originalFileName?: string }[]
+ >([])
+ const router = useRouter()
+
+ const form = useForm<UpdatePqSchema>({
+ resolver: zodResolver(updatePqSchema),
+ defaultValues: {
+ code: pq?.code ?? "",
+ checkPoint: pq?.checkPoint ?? "",
+ groupName: pq?.groupName ?? groupOptions[0],
+ description: pq?.description ?? "",
+ remarks: pq?.remarks ?? "",
+ inputFormat: pq?.inputFormat ?? "TEXT",
+
+ subGroupName: pq?.subGroupName ?? "",
+ type: pq?.type ?? "내외자",
+ },
+ })
+
+ // 폼 초기화 (pq가 변경될 때)
+ React.useEffect(() => {
+ if (pq) {
+ form.reset({
+ code: pq.code,
+ checkPoint: pq.checkPoint,
+ groupName: pq.groupName ?? groupOptions[0],
+ description: pq.description ?? "",
+ remarks: pq.remarks ?? "",
+ inputFormat: pq.inputFormat ?? "TEXT",
+
+ subGroupName: pq.subGroupName ?? "",
+ type: pq.type ?? "내외자",
+ });
+
+ // 기존 첨부 로드
+ getPqCriteriaAttachments(pq.id).then((res) => {
+ if (res.success && res.data) {
+ setAttachments(
+ res.data.map((a) => ({
+ fileName: a.fileName,
+ url: a.filePath,
+ size: a.fileSize ?? undefined,
+ originalFileName: a.originalFileName || a.fileName,
+ }))
+ )
+ } else {
+ setAttachments([])
+ }
+ })
+ }
+ }, [pq, form]);
+
+ const handleUpload = async (files: File[]) => {
+ try {
+ setIsUploading(true)
+ for (const file of files) {
+ const uploaded = await uploadPqCriteriaFileAction(file)
+ setAttachments((prev) => [...prev, uploaded])
+ }
+ toast.success("첨부파일이 업로드되었습니다")
+ } catch (error) {
+ console.error(error)
+ toast.error("첨부파일 업로드에 실패했습니다")
+ } finally {
+ setIsUploading(false)
+ }
+ }
+
+ function onSubmit(input: UpdatePqSchema) {
+ startUpdateTransition(async () => {
+ if (!pq) return
+
+ const result = await updatePqCriteria(pq.id, {
+ ...input,
+ attachments,
+ })
+
+ if (!result.success) {
+ toast.error(result.message || "PQ 항목 수정에 실패했습니다")
+ return
+ }
+
+ toast.success(result.message || "PQ 항목이 성공적으로 수정되었습니다")
+ form.reset()
+ props.onOpenChange?.(false)
+ router.refresh()
+ })
+ }
+ return (
+ <Sheet {...props}>
+ <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+ <SheetHeader className="text-left">
+ <SheetTitle>Update PQ Criteria</SheetTitle>
+ <SheetDescription>
+ Update the PQ criteria details and save the changes
+ </SheetDescription>
+ </SheetHeader>
+ <Form {...form}>
+ <form
+ onSubmit={form.handleSubmit(onSubmit)}
+ className="flex flex-col gap-4"
+ >
+ {/* Code 필드 */}
+ <FormField
+ control={form.control}
+ name="code"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Code <span className="text-destructive">*</span></FormLabel>
+ <FormControl>
+ <Input
+ placeholder="예: 1-1, A.2.3"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* Check Point 필드 */}
+ <FormField
+ control={form.control}
+ name="checkPoint"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Check Point <span className="text-destructive">*</span></FormLabel>
+ <FormControl>
+ <Input
+ placeholder="검증 항목을 입력하세요"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* Group Name 필드 (Select) */}
+ <FormField
+ control={form.control}
+ name="groupName"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Group <span className="text-destructive">*</span></FormLabel>
+ <Select
+ onValueChange={field.onChange}
+ defaultValue={field.value}
+ value={field.value}
+ >
+ <FormControl>
+ <SelectTrigger>
+ <SelectValue placeholder="그룹을 선택하세요" />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ {groupOptions.map((group) => (
+ <SelectItem key={group} value={group}>
+ {group}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ {/* Sub Group Name 필드 */}
+ <FormField
+ control={form.control}
+ name="subGroupName"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Sub Group Name</FormLabel>
+ <FormControl>
+ <Input
+ placeholder="서브 그룹명을 입력하세요"
+ {...field}
+ value={field.value || ""}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* Type 필드 */}
+ <FormField
+ control={form.control}
+ name="type"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>내/외자 구분</FormLabel>
+ <Select onValueChange={field.onChange} value={field.value}>
+ <FormControl>
+ <SelectTrigger>
+ <SelectValue placeholder="구분을 선택하세요" />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ {typeOptions.map((option) => (
+ <SelectItem key={option.value} value={option.value}>
+ {option.label}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ <FormDescription>미선택 시 기본값은 내외자입니다.</FormDescription>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* Input Format 필드 */}
+ <FormField
+ control={form.control}
+ name="inputFormat"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>입력 형식</FormLabel>
+ <Select onValueChange={field.onChange} defaultValue={field.value}>
+ <FormControl>
+ <SelectTrigger>
+ <SelectValue placeholder="입력 형식을 선택하세요" />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ {inputFormatOptions.map((option) => (
+ <SelectItem key={option.value} value={option.value}>
+ {option.label}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* 첨부 파일 업로드 */}
+ <div className="space-y-2">
+ <div className="flex items-center justify-between">
+ <FormLabel>첨부 파일</FormLabel>
+ {isUploading && (
+ <div className="flex items-center text-xs text-muted-foreground">
+ <Loader2 className="mr-1 h-3 w-3 animate-spin" /> 업로드 중...
+ </div>
+ )}
+ </div>
+ <Dropzone
+ maxSize={6e8}
+ onDropAccepted={(files) => handleUpload(files)}
+ onDropRejected={() =>
+ toast.error("파일 크기/형식을 확인하세요.")
+ }
+ disabled={isUploading}
+ >
+ {() => (
+ <FormItem>
+ <DropzoneZone className="flex justify-center h-24">
+ <FormControl>
+ <DropzoneInput />
+ </FormControl>
+ <div className="flex items-center gap-4">
+ <DropzoneUploadIcon />
+ <div className="grid gap-0.5">
+ <DropzoneTitle>파일을 드래그하거나 클릭하여 업로드</DropzoneTitle>
+ <DropzoneDescription>PDF, 이미지, 문서 (최대 600MB)</DropzoneDescription>
+ </div>
+ </div>
+ </DropzoneZone>
+ <FormDescription>기준 문서 첨부가 필요한 경우 업로드하세요.</FormDescription>
+ </FormItem>
+ )}
+ </Dropzone>
+
+ {attachments.length > 0 && (
+ <div className="space-y-2">
+ <p className="text-sm font-medium">첨부된 파일 ({attachments.length})</p>
+ <FileList>
+ {attachments.map((file, idx) => (
+ <FileListItem key={idx}>
+ <FileListHeader>
+ <FileListInfo>
+ <FileListName>{file.originalFileName || file.fileName}</FileListName>
+ {file.size && (
+ <FileListDescription>{`${file.size} bytes`}</FileListDescription>
+ )}
+ </FileListInfo>
+ <FileListAction
+ onClick={() =>
+ setAttachments((prev) => prev.filter((_, i) => i !== idx))
+ }
+ >
+ <X className="h-4 w-4" />
+ <span className="sr-only">Remove</span>
+ </FileListAction>
+ </FileListHeader>
+ </FileListItem>
+ ))}
+ </FileList>
+ </div>
+ )}
+ </div>
+
+ {/* Required 체크박스 */}
+
+
+ {/* Description 필드 */}
+ <FormField
+ control={form.control}
+ name="description"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Description</FormLabel>
+ <FormControl>
+ <Textarea
+ placeholder="상세 설명을 입력하세요"
+ className="min-h-[120px] whitespace-pre-wrap"
+ {...field}
+ value={field.value || ""}
+ />
+ </FormControl>
+ <FormDescription>
+ 줄바꿈이 필요한 경우 Enter 키를 누르세요. 입력한 대로 저장됩니다.
+ </FormDescription>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* Remarks 필드 */}
+ <FormField
+ control={form.control}
+ name="remarks"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Remarks</FormLabel>
+ <FormControl>
+ <Textarea
+ placeholder="비고 사항을 입력하세요"
+ className="min-h-[80px]"
+ {...field}
+ value={field.value || ""}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+ <SheetClose asChild>
+ <Button
+ type="button"
+ variant="outline"
+ onClick={() => form.reset()}
+ >
+ Cancel
+ </Button>
+ </SheetClose>
+ <Button disabled={isUpdatePending}>
+ {isUpdatePending && (
+ <Loader
+ className="mr-2 size-4 animate-spin"
+ aria-hidden="true"
+ />
+ )}
+ <Save className="mr-2 size-4" /> Save
+ </Button>
+ </SheetFooter>
+ </form>
+ </Form>
+ </SheetContent>
+ </Sheet>
+ )
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-12 23:25:39 +0000