summaryrefslogtreecommitdiff
path: root/lib/basic-contract/template
diff options
context:
space:
mode:
Diffstat (limited to 'lib/basic-contract/template')
-rw-r--r--lib/basic-contract/template/add-basic-contract-template-dialog.tsx96
-rw-r--r--lib/basic-contract/template/basic-contract-template-columns.tsx78
-rw-r--r--lib/basic-contract/template/basic-contract-template-viewer.tsx234
-rw-r--r--lib/basic-contract/template/basic-contract-template.tsx31
-rw-r--r--lib/basic-contract/template/template-editor-wrapper.tsx353
-rw-r--r--lib/basic-contract/template/update-basicContract-sheet.tsx487
6 files changed, 924 insertions, 355 deletions
diff --git a/lib/basic-contract/template/add-basic-contract-template-dialog.tsx b/lib/basic-contract/template/add-basic-contract-template-dialog.tsx
index c88819e4..9b036445 100644
--- a/lib/basic-contract/template/add-basic-contract-template-dialog.tsx
+++ b/lib/basic-contract/template/add-basic-contract-template-dialog.tsx
@@ -41,13 +41,26 @@ import { Separator } from "@/components/ui/separator";
import { useRouter } from "next/navigation";
import { BUSINESS_UNITS } from "@/config/basicContractColumnsConfig";
-// 업데이트된 계약서 템플릿 스키마 정의
+// 템플릿 이름 옵션 정의
+const TEMPLATE_NAME_OPTIONS = [
+ "준법서약",
+ "기술자료 요구서",
+ "비밀유지 계약서",
+ "표준하도급기본 계약서",
+ "General GTC",
+ "안전보건관리 약정서",
+ "동반성장",
+ "윤리규범 준수 서약서",
+ "기술자료 동의서",
+ "내국신용장 미개설 합의서",
+ "직납자재 하도급대급등 연동제 의향서"
+] as const;
+
+// 업데이트된 계약서 템플릿 스키마 정의 (워드파일만 허용)
const templateFormSchema = z.object({
- templateCode: z.string()
- .min(1, "템플릿 코드는 필수입니다.")
- .max(50, "템플릿 코드는 50자 이하여야 합니다.")
- .regex(/^[A-Z0-9_-]+$/, "템플릿 코드는 영문 대문자, 숫자, '_', '-'만 사용 가능합니다."),
- templateName: z.string().min(1, "템플릿 이름은 필수입니다."),
+ templateName: z.enum(TEMPLATE_NAME_OPTIONS, {
+ required_error: "템플릿 이름을 선택해주세요.",
+ }),
revision: z.coerce.number().int().min(1).default(1),
legalReviewRequired: z.boolean().default(false),
@@ -67,8 +80,10 @@ const templateFormSchema = z.object({
message: "파일 크기는 100MB 이하여야 합니다.",
})
.refine(
- (file) => file.type === 'application/pdf',
- { message: "PDF 파일만 업로드 가능합니다." }
+ (file) =>
+ file.type === 'application/msword' ||
+ file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ { message: "워드 파일(.doc, .docx)만 업로드 가능합니다." }
),
status: z.enum(["ACTIVE", "DISPOSED"]).default("ACTIVE"),
}).refine((data) => {
@@ -95,10 +110,9 @@ export function AddTemplateDialog() {
const [showProgress, setShowProgress] = React.useState(false);
const router = useRouter();
- // 기본값 설정
+ // 기본값 설정 (templateCode 제거)
const defaultValues: Partial<TemplateFormValues> = {
- templateCode: "",
- templateName: "",
+ templateName: undefined,
revision: 1,
legalReviewRequired: false,
shipBuildingApplicable: false,
@@ -183,7 +197,7 @@ export function AddTemplateDialog() {
}
};
- // 폼 제출 핸들러
+ // 폼 제출 핸들러 (templateCode 제거)
async function onSubmit(formData: TemplateFormValues) {
setIsLoading(true);
try {
@@ -201,14 +215,13 @@ export function AddTemplateDialog() {
throw new Error("파일 업로드에 실패했습니다.");
}
- // 메타데이터 저장 (업데이트된 필드들 포함)
+ // 메타데이터 저장 (templateCode 제거됨)
const saveResponse = await fetch('/api/upload/basicContract/complete', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
- templateCode: formData.templateCode,
templateName: formData.templateName,
revision: formData.revision,
legalReviewRequired: formData.legalReviewRequired,
@@ -300,22 +313,28 @@ export function AddTemplateDialog() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
- name="templateCode"
+ name="templateName"
render={({ field }) => (
<FormItem>
<FormLabel>
- 템플릿 코드 <span className="text-red-500">*</span>
+ 템플릿 이름 <span className="text-red-500">*</span>
</FormLabel>
- <FormControl>
- <Input
- placeholder="TEMPLATE_001"
- {...field}
- style={{ textTransform: 'uppercase' }}
- onChange={(e) => field.onChange(e.target.value.toUpperCase())}
- />
- </FormControl>
+ <Select onValueChange={field.onChange} defaultValue={field.value}>
+ <FormControl>
+ <SelectTrigger>
+ <SelectValue placeholder="템플릿 이름을 선택하세요" />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ {TEMPLATE_NAME_OPTIONS.map((option) => (
+ <SelectItem key={option} value={option}>
+ {option}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
<FormDescription>
- 영문 대문자, 숫자, '_', '-'만 사용 가능
+ 미리 정의된 템플릿 중에서 선택
</FormDescription>
<FormMessage />
</FormItem>
@@ -338,6 +357,10 @@ export function AddTemplateDialog() {
</FormControl>
<FormDescription>
템플릿 버전 (기본값: 1)
+ <br />
+ <span className="text-xs text-muted-foreground">
+ 동일한 템플릿 이름의 리비전은 중복될 수 없습니다.
+ </span>
</FormDescription>
<FormMessage />
</FormItem>
@@ -347,22 +370,6 @@ export function AddTemplateDialog() {
<FormField
control={form.control}
- name="templateName"
- render={({ field }) => (
- <FormItem>
- <FormLabel>
- 템플릿 이름 <span className="text-red-500">*</span>
- </FormLabel>
- <FormControl>
- <Input placeholder="기본 계약서 템플릿" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- <FormField
- control={form.control}
name="legalReviewRequired"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
@@ -459,18 +466,19 @@ export function AddTemplateDialog() {
<Dropzone
onDrop={handleFileChange}
accept={{
- 'application/pdf': ['.pdf']
+ 'application/msword': ['.doc'],
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx']
}}
>
<DropzoneZone>
<DropzoneUploadIcon className="h-10 w-10 text-muted-foreground" />
<DropzoneTitle>
- {selectedFile ? selectedFile.name : "PDF 파일을 여기에 드래그하세요"}
+ {selectedFile ? selectedFile.name : "워드 파일을 여기에 드래그하세요"}
</DropzoneTitle>
<DropzoneDescription>
{selectedFile
? `파일 크기: ${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`
- : "또는 클릭하여 PDF 파일을 선택하세요 (최대 100MB)"}
+ : "또는 클릭하여 워드 파일(.doc, .docx)을 선택하세요 (최대 100MB)"}
</DropzoneDescription>
<DropzoneInput />
</DropzoneZone>
diff --git a/lib/basic-contract/template/basic-contract-template-columns.tsx b/lib/basic-contract/template/basic-contract-template-columns.tsx
index 3be46791..b7c2fa08 100644
--- a/lib/basic-contract/template/basic-contract-template-columns.tsx
+++ b/lib/basic-contract/template/basic-contract-template-columns.tsx
@@ -3,7 +3,7 @@
import * as React from "react"
import { type DataTableRowAction } from "@/types/table"
import { type ColumnDef } from "@tanstack/react-table"
-import { Download, Ellipsis, Paperclip, CheckCircle, XCircle } from "lucide-react"
+import { Download, Ellipsis, Paperclip, CheckCircle, XCircle, Eye } from "lucide-react"
import { toast } from "sonner"
import { getErrorMessage } from "@/lib/handle-error"
@@ -29,28 +29,20 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { scopeHelpers } from "@/config/basicContractColumnsConfig"
import { BasicContractTemplate } from "@/db/schema"
+import { quickDownload } from "@/lib/file-download"
+import { useRouter } from "next/navigation"
interface GetColumnsProps {
setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<BasicContractTemplate> | null>>
+ router: ReturnType<typeof useRouter>
}
/**
- * 파일 다운로드 함수
+ * 파일 다운로드 함수 (공용 유틸리티 사용)
*/
-const handleFileDownload = (filePath: string, fileName: string) => {
+const handleFileDownload = async (filePath: string, fileName: string) => {
try {
- // 전체 URL 생성
- const fullUrl = `${window.location.origin}${filePath}`;
-
- // a 태그를 생성하여 다운로드 실행
- const link = document.createElement('a');
- link.href = fullUrl;
- link.download = fileName; // 다운로드될 파일명 설정
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
-
- toast.success("파일 다운로드를 시작합니다.");
+ await quickDownload(filePath, fileName);
} catch (error) {
console.error("파일 다운로드 오류:", error);
toast.error("파일 다운로드 중 오류가 발생했습니다.");
@@ -60,7 +52,7 @@ const handleFileDownload = (filePath: string, fileName: string) => {
/**
* tanstack table 컬럼 정의 (중첩 헤더 버전)
*/
-export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<BasicContractTemplate>[] {
+export function getColumns({ setRowAction, router }: GetColumnsProps): ColumnDef<BasicContractTemplate>[] {
// ----------------------------------------------------------------
// 1) select 컬럼 (체크박스)
// ----------------------------------------------------------------
@@ -126,6 +118,10 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<BasicCo
const [isUpdatePending, startUpdateTransition] = React.useTransition()
const template = row.original;
+ const handleViewDetails = () => {
+ router.push(`/evcp/basic-contract-template/${template.id}`);
+ };
+
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -138,6 +134,13 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<BasicCo
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40">
+ <DropdownMenuItem onSelect={handleViewDetails}>
+ <Eye className="mr-2 h-4 w-4" />
+ View Details
+ </DropdownMenuItem>
+
+ <DropdownMenuSeparator />
+
<DropdownMenuItem
onSelect={() => setRowAction({ row, type: "update" })}
>
@@ -201,27 +204,20 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<BasicCo
header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="계약문서명" />,
cell: ({ row }) => {
const template = row.original;
- const scopeText = scopeHelpers.getScopeDisplayText(template);
+
+ const handleClick = () => {
+ router.push(`/evcp/basic-contract-template/${template.id}`);
+ };
+
return (
<div className="flex flex-col min-w-0">
- <span className="truncate">{template.templateName}</span>
- <TooltipProvider>
- <Tooltip>
- <TooltipTrigger asChild>
- <span className="text-xs text-muted-foreground cursor-help truncate">
- {scopeText}
- </span>
- </TooltipTrigger>
- <TooltipContent>
- <div className="space-y-1">
- <p className="font-medium">적용 범위:</p>
- {scopeHelpers.getApplicableScopeLabels(template).map(label => (
- <p key={label} className="text-xs">• {label}</p>
- ))}
- </div>
- </TooltipContent>
- </Tooltip>
- </TooltipProvider>
+ <button
+ onClick={handleClick}
+ className="truncate text-left hover:text-blue-600 hover:underline cursor-pointer transition-colors"
+ title="클릭하여 상세보기"
+ >
+ {template.templateName}
+ </button>
</div>
);
},
@@ -229,18 +225,6 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<BasicCo
enableResizing: true,
},
{
- accessorKey: "templateCode",
- header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="계약문서 번호" />,
- cell: ({ row }) => {
- const template = row.original;
- return (
- <span className="font-medium">{template.templateCode}</span>
- );
- },
- size: 120,
- enableResizing: true,
- },
- {
accessorKey: "revision",
header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="Rev." />,
cell: ({ row }) => {
diff --git a/lib/basic-contract/template/basic-contract-template-viewer.tsx b/lib/basic-contract/template/basic-contract-template-viewer.tsx
new file mode 100644
index 00000000..59989e46
--- /dev/null
+++ b/lib/basic-contract/template/basic-contract-template-viewer.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import React, {
+ useState,
+ useEffect,
+ useRef,
+ SetStateAction,
+ Dispatch,
+} from "react";
+import { WebViewerInstance } from "@pdftron/webviewer";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+interface BasicContractTemplateViewerProps {
+ templateId?: number;
+ filePath?: string;
+ instance: WebViewerInstance | null;
+ setInstance: Dispatch<SetStateAction<WebViewerInstance | null>>;
+}
+
+export function BasicContractTemplateViewer({
+ templateId,
+ filePath,
+ instance,
+ setInstance,
+}: BasicContractTemplateViewerProps) {
+ const [fileLoading, setFileLoading] = useState<boolean>(true);
+ const viewer = useRef<HTMLDivElement>(null);
+ const initialized = useRef(false);
+ const isCancelled = useRef(false);
+
+ // WebViewer 초기화 (기존 SignViewer와 완전히 동일)
+ useEffect(() => {
+ if (!initialized.current && viewer.current) {
+ initialized.current = true;
+ isCancelled.current = false;
+
+ requestAnimationFrame(() => {
+ if (viewer.current) {
+ import("@pdftron/webviewer").then(({ default: WebViewer }) => {
+ if (isCancelled.current) {
+ console.log("📛 WebViewer 초기화 취소됨");
+ return;
+ }
+
+ // viewerElement이 확실히 존재함을 확인
+ const viewerElement = viewer.current;
+ if (!viewerElement) return;
+
+ WebViewer(
+ {
+ path: "/pdftronWeb",
+ licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY,
+ fullAPI: true,
+ // 한글 입력 지원을 위한 설정
+ enableOfficeEditing: true, // Office 편집 모드에서 IME 지원 필요
+ l: "ko", // 한국어 로케일 설정
+ },
+ viewerElement
+ ).then((instance: WebViewerInstance) => {
+ setInstance(instance);
+ setFileLoading(false);
+
+ try {
+ const { disableElements, enableElements, setToolbarGroup } = instance.UI;
+
+ // 편집에 필요한 요소들 활성화
+ enableElements([
+ "toolbarGroup-Edit",
+ "toolbarGroup-Insert",
+ "textSelectButton",
+ "panToolButton"
+ ]);
+
+ // 불필요한 요소들만 비활성화
+ disableElements([
+ "toolbarGroup-Annotate", // 주석 도구
+ "toolbarGroup-Shapes", // 도형 도구
+ "toolbarGroup-Forms", // 폼 도구
+ "signatureToolButton", // 서명 도구
+ "stampToolButton", // 스탬프 도구
+ "rubberStampToolButton", // 러버스탬프 도구
+ "freeHandToolButton", // 자유 그리기
+ "stickyToolButton", // 스티키 노트
+ "calloutToolButton", // 콜아웃
+ ]);
+
+ // 편집 툴바 설정
+ setToolbarGroup("toolbarGroup-Edit");
+
+ // 한글 입력 지원을 위한 추가 설정
+ const iframeWindow = instance.UI.iframeWindow;
+ if (iframeWindow && iframeWindow.document) {
+ // IME 지원 활성화
+ const documentBody = iframeWindow.document.body;
+ if (documentBody) {
+ documentBody.style.imeMode = 'active';
+ documentBody.setAttribute('lang', 'ko-KR');
+ }
+
+ // 키보드 이벤트 리스너 추가 (한글 입력 감지)
+ iframeWindow.document.addEventListener('compositionstart', (e) => {
+ console.log('🇰🇷 한글 입력 시작');
+ });
+
+ iframeWindow.document.addEventListener('compositionend', (e) => {
+ console.log('🇰🇷 한글 입력 완료:', e.data);
+ });
+ }
+
+ console.log("📝 WebViewer 한글 지원 초기화 완료");
+ } catch (uiError) {
+ console.warn("⚠️ UI 설정 중 오류 (무시됨):", uiError);
+ }
+ }).catch((error) => {
+ console.error("❌ WebViewer 초기화 실패:", error);
+ setFileLoading(false);
+ toast.error("뷰어 초기화에 실패했습니다.");
+ });
+ });
+ }
+ });
+ }
+
+ return () => {
+ if (instance) {
+ instance.UI.dispose();
+ }
+ isCancelled.current = true;
+ setTimeout(() => cleanupHtmlStyle(), 500);
+ };
+ }, []);
+
+ // 문서 로드 (기존 SignViewer와 동일)
+ useEffect(() => {
+ if (!instance || !filePath) return;
+
+ loadDocument(instance, filePath);
+ }, [instance, filePath]);
+
+ // 한글 지원 Office 문서 로드
+ const loadDocument = async (instance: WebViewerInstance, documentPath: string) => {
+ setFileLoading(true);
+ try {
+ // 절대 URL로 변환
+ const fullPath = documentPath.startsWith('http')
+ ? documentPath
+ : `${window.location.origin}${documentPath}`;
+
+ // 파일명 추출
+ const fileName = documentPath.split('/').pop() || 'document.docx';
+
+ console.log("📄 한글 지원 Office 문서 로드 시작:", fullPath);
+ console.log("📎 파일명:", fileName);
+
+ // PDFTron 공식 방법: instance.UI.loadDocument() + 한글 지원 옵션
+ await instance.UI.loadDocument(fullPath, {
+ filename: fileName,
+ enableOfficeEditing: true,
+ // 한글 입력 지원을 위한 추가 옵션
+ officeOptions: {
+ locale: 'ko-KR',
+ enableIME: true,
+ }
+ });
+
+ // 문서 로드 후 한글 입력 환경 설정
+ setTimeout(() => {
+ try {
+ const iframeWindow = instance.UI.iframeWindow;
+ if (iframeWindow && iframeWindow.document) {
+ // Office 편집기 컨테이너 찾기
+ const officeContainer = iframeWindow.document.querySelector('[data-office-editor]') ||
+ iframeWindow.document.querySelector('.office-editor') ||
+ iframeWindow.document.body;
+
+ if (officeContainer) {
+ // 한글 입력 최적화 설정
+ officeContainer.style.imeMode = 'active';
+ officeContainer.setAttribute('lang', 'ko-KR');
+ officeContainer.setAttribute('inputmode', 'text');
+
+ console.log("🇰🇷 한글 입력 환경 설정 완료");
+ }
+ }
+ } catch (setupError) {
+ console.warn("⚠️ 한글 입력 환경 설정 실패:", setupError);
+ }
+ }, 1000);
+
+ console.log("✅ 한글 지원 Office 편집 모드로 문서 로드 완료");
+ toast.success("Office 편집 모드가 활성화되었습니다.", {
+ description: "한글 입력이 안 될 경우 외부에서 작성 후 복사-붙여넣기를 사용하세요."
+ });
+
+ } catch (err) {
+ console.error("❌ Office 문서 로딩 중 오류:", err);
+ toast.error(`Office 문서 로드 실패: ${err instanceof Error ? err.message : '알 수 없는 오류'}`);
+ } finally {
+ setFileLoading(false);
+ }
+ };
+
+ // 기존 SignViewer와 동일한 렌더링 (확대 문제 해결)
+ return (
+ <div className="relative w-full h-full overflow-hidden">
+ <div
+ ref={viewer}
+ className="w-full h-full"
+ style={{
+ position: 'relative',
+ overflow: 'hidden',
+ contain: 'layout style paint', // CSS containment로 격리
+ }}
+ >
+ {fileLoading && (
+ <div className="absolute inset-0 flex flex-col items-center justify-center bg-white bg-opacity-90 z-10">
+ <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" />
+ <p className="text-sm text-muted-foreground">문서 로딩 중...</p>
+ </div>
+ )}
+ </div>
+ </div>
+ );
+}
+
+// WebViewer 정리 함수 (기존과 동일)
+const cleanupHtmlStyle = () => {
+ // iframe 스타일 정리 (WebViewer가 추가한 스타일)
+ const elements = document.querySelectorAll('.Document_container');
+ elements.forEach((elem) => {
+ elem.remove();
+ });
+}; \ No newline at end of file
diff --git a/lib/basic-contract/template/basic-contract-template.tsx b/lib/basic-contract/template/basic-contract-template.tsx
index 0cca3a41..4fc70af4 100644
--- a/lib/basic-contract/template/basic-contract-template.tsx
+++ b/lib/basic-contract/template/basic-contract-template.tsx
@@ -1,6 +1,7 @@
"use client";
import * as React from "react";
+import { useRouter } from "next/navigation";
import { DataTable } from "@/components/data-table/data-table";
import { useDataTable } from "@/hooks/use-data-table";
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar";
@@ -15,7 +16,6 @@ import { UpdateTemplateSheet } from "./update-basicContract-sheet";
import { TemplateTableToolbarActions } from "./basicContract-table-toolbar-actions";
import { BasicContractTemplate } from "@/db/schema";
-
interface BasicTemplateTableProps {
promises: Promise<
[
@@ -24,21 +24,17 @@ interface BasicTemplateTableProps {
>
}
-
export function BasicContractTemplateTable({ promises }: BasicTemplateTableProps) {
-
-
+ const router = useRouter();
const [rowAction, setRowAction] =
React.useState<DataTableRowAction<BasicContractTemplate> | null>(null)
-
-
const [{ data, pageCount }] =
React.use(promises)
- // 컬럼 설정 - 외부 파일에서 가져옴
+ // 컬럼 설정 - router를 전달
const columns = React.useMemo(
- () => getColumns({ setRowAction }),
- [setRowAction]
+ () => getColumns({ setRowAction, router }),
+ [setRowAction, router]
)
// config 기반으로 필터 필드 설정
@@ -47,7 +43,7 @@ export function BasicContractTemplateTable({ promises }: BasicTemplateTableProps
{
id: "status", label: "상태", type: "select", options: [
{ label: "활성", value: "ACTIVE" },
- { label: "비활성", value: "INACTIVE" },
+ { label: "폐기", value: "DISPOSED" },
]
},
{ id: "fileName", label: "파일명", type: "text" },
@@ -59,7 +55,6 @@ export function BasicContractTemplateTable({ promises }: BasicTemplateTableProps
data,
columns,
pageCount,
- // filterFields,
enablePinning: true,
enableAdvancedFilter: true,
initialState: {
@@ -73,15 +68,13 @@ export function BasicContractTemplateTable({ promises }: BasicTemplateTableProps
return (
<>
-
- <DataTable table={table}>
+ <DataTable table={table}>
<DataTableAdvancedToolbar
table={table}
filterFields={advancedFilterFields}
>
<TemplateTableToolbarActions table={table} />
-
- </DataTableAdvancedToolbar>
+ </DataTableAdvancedToolbar>
</DataTable>
<DeleteTemplatesDialog
@@ -97,8 +90,6 @@ export function BasicContractTemplateTable({ promises }: BasicTemplateTableProps
onOpenChange={() => setRowAction(null)}
template={rowAction?.row.original ?? null}
/>
-
- </>
-
- );
-} \ No newline at end of file
+ </>
+ );
+} \ No newline at end of file
diff --git a/lib/basic-contract/template/template-editor-wrapper.tsx b/lib/basic-contract/template/template-editor-wrapper.tsx
new file mode 100644
index 00000000..ea353b91
--- /dev/null
+++ b/lib/basic-contract/template/template-editor-wrapper.tsx
@@ -0,0 +1,353 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { Save, RefreshCw, Type, FileText, AlertCircle } from "lucide-react";
+import type { WebViewerInstance } from "@pdftron/webviewer";
+import { Badge } from "@/components/ui/badge";
+import { BasicContractTemplateViewer } from "./basic-contract-template-viewer";
+import { saveTemplateFile } from "../service";
+
+interface TemplateEditorWrapperProps {
+ templateId: string | number;
+ filePath: string;
+ fileName: string;
+ refreshAction?: () => Promise<void>;
+}
+
+// 변수 패턴 감지를 위한 정규식
+const VARIABLE_PATTERN = /\{\{([^}]+)\}\}/g;
+
+export function TemplateEditorWrapper({
+ templateId,
+ filePath,
+ fileName,
+ refreshAction
+}: TemplateEditorWrapperProps) {
+ const [instance, setInstance] = React.useState<WebViewerInstance | null>(null);
+ const [isSaving, setIsSaving] = React.useState(false);
+ const [documentVariables, setDocumentVariables] = React.useState<string[]>([]);
+
+ // 문서에서 변수 추출
+ const extractVariablesFromDocument = async () => {
+ if (!instance) return;
+
+ try {
+ const { documentViewer } = instance.Core;
+ const doc = documentViewer.getDocument();
+
+ if (!doc) return;
+
+ // 문서 텍스트 추출
+ const textContent = await doc.getDocumentCompletePromise().then(async () => {
+ const pageCount = doc.getPageCount();
+ let fullText = "";
+
+ for (let i = 1; i <= pageCount; i++) {
+ try {
+ const pageText = await doc.loadPageText(i);
+ fullText += pageText + " ";
+ } catch (error) {
+ console.warn(`페이지 ${i} 텍스트 추출 실패:`, error);
+ }
+ }
+
+ return fullText;
+ });
+
+ // 변수 패턴 매칭
+ const matches = textContent.match(VARIABLE_PATTERN);
+ const variables = matches
+ ? [...new Set(matches.map(match => match.replace(/[{}]/g, '')))]
+ : [];
+
+ setDocumentVariables(variables);
+
+ if (variables.length > 0) {
+ console.log("🔍 발견된 변수들:", variables);
+ }
+
+ } catch (error) {
+ console.error("변수 추출 중 오류:", error);
+ }
+ };
+
+ // 인스턴스가 변경될 때마다 변수 추출
+ React.useEffect(() => {
+ if (instance) {
+ // 문서 로드 완료 이벤트 리스너 추가
+ const { documentViewer } = instance.Core;
+
+ const onDocumentLoaded = () => {
+ setTimeout(() => extractVariablesFromDocument(), 1000);
+ };
+
+ documentViewer.addEventListener("documentLoaded", onDocumentLoaded);
+
+ return () => {
+ documentViewer.removeEventListener("documentLoaded", onDocumentLoaded);
+ };
+ }
+ }, [instance]);
+
+ // 변수 삽입 함수 (한글 입력 제한 고려)
+ const insertVariable = async (variableName: string) => {
+ if (!instance) {
+ toast.error("뷰어가 준비되지 않았습니다.");
+ return;
+ }
+
+ try {
+ const textToInsert = `{{${variableName}}}`;
+
+ // 1단계: 클립보드 API 시도
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ try {
+ await navigator.clipboard.writeText(textToInsert);
+ toast.success(`변수 "${textToInsert}"가 클립보드에 복사되었습니다.`, {
+ description: "문서에서 원하는 위치에 Ctrl+V로 붙여넣기 하세요."
+ });
+ return;
+ } catch (clipboardError) {
+ console.warn("클립보드 API 사용 실패:", clipboardError);
+ }
+ }
+
+ // 2단계: Office 편집기에 직접 삽입 시도 (실험적)
+ try {
+ const { documentViewer } = instance.Core;
+ const doc = documentViewer.getDocument();
+
+ if (doc && typeof doc.getOfficeEditor === 'function') {
+ const officeEditor = doc.getOfficeEditor();
+ if (officeEditor && typeof officeEditor.insertText === 'function') {
+ await officeEditor.insertText(textToInsert);
+ toast.success(`변수 "${textToInsert}"가 문서에 삽입되었습니다.`);
+ return;
+ }
+ }
+ } catch (insertError) {
+ console.warn("직접 삽입 실패:", insertError);
+ }
+
+ // 3단계: 임시 텍스트 영역을 통한 복사 (대안)
+ try {
+ const tempTextArea = document.createElement('textarea');
+ tempTextArea.value = textToInsert;
+ tempTextArea.style.position = 'fixed';
+ tempTextArea.style.left = '-9999px';
+ document.body.appendChild(tempTextArea);
+ tempTextArea.select();
+ document.execCommand('copy');
+ document.body.removeChild(tempTextArea);
+
+ toast.success(`변수 "${textToInsert}"가 클립보드에 복사되었습니다.`, {
+ description: "Office 편집기에서 한글 입력이 제한될 수 있습니다. 외부에서 작성 후 붙여넣기를 권장합니다."
+ });
+ return;
+ } catch (fallbackError) {
+ console.warn("대안 복사 실패:", fallbackError);
+ }
+
+ // 4단계: 수동 입력 안내
+ toast.info(`다음 변수를 수동으로 입력해주세요: ${textToInsert}`, {
+ description: "한글과 변수는 외부 에디터에서 작성 후 복사-붙여넣기를 권장합니다.",
+ duration: 8000,
+ });
+
+ } catch (error) {
+ console.error("변수 삽입 오류:", error);
+ toast.error("변수 삽입 중 오류가 발생했습니다.");
+ }
+ };
+
+ // 문서 저장
+ const handleSave = async () => {
+ if (!instance) {
+ toast.error("뷰어가 준비되지 않았습니다.");
+ return;
+ }
+
+ setIsSaving(true);
+ try {
+ const { documentViewer } = instance.Core;
+ const doc = documentViewer.getDocument();
+
+ if (!doc) {
+ throw new Error("문서를 찾을 수 없습니다.");
+ }
+
+ // Word 문서 저장
+ const data = await doc.getFileData({
+ downloadType: "office", // Word 파일로 저장
+ includeAnnotations: true
+ });
+
+ // FormData 생성하여 서버 액션에 전달
+ const formData = new FormData();
+ formData.append('file', new Blob([data], {
+ type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+ }), fileName);
+
+ // 서버 액션 호출
+ const result = await saveTemplateFile(Number(templateId), formData);
+
+ if (result.error) {
+ throw new Error(result.error);
+ }
+
+ toast.success("템플릿이 성공적으로 저장되었습니다.");
+
+ // 변수 재추출
+ await extractVariablesFromDocument();
+
+ // 페이지 새로고침 (서버 액션)
+ if (refreshAction) {
+ await refreshAction();
+ }
+
+ } catch (error) {
+ console.error("저장 오류:", error);
+ toast.error(error instanceof Error ? error.message : "저장 중 오류가 발생했습니다.");
+ } finally {
+ setIsSaving(false);
+ }
+ };
+
+ // 문서 새로고침
+ const handleRefresh = () => {
+ window.location.reload();
+ };
+
+ // 미리 정의된 변수들
+ const predefinedVariables = [
+ "회사명", "계약자명", "계약일자", "계약금액",
+ "납기일자", "담당자명", "담당자연락처", "프로젝트명",
+ "계약번호", "사업부", "부서명", "승인자명"
+ ];
+
+ return (
+ <div className="h-full flex flex-col">
+ {/* 상단 도구 모음 */}
+ <div className="border-b bg-gray-50 p-3">
+ <div className="flex items-center justify-between">
+ <div className="flex items-center space-x-2">
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleSave}
+ disabled={isSaving || !instance}
+ >
+ {isSaving ? (
+ <>
+ <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+ 저장 중...
+ </>
+ ) : (
+ <>
+ <Save className="mr-2 h-4 w-4" />
+ 저장
+ </>
+ )}
+ </Button>
+
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleRefresh}
+ >
+ <RefreshCw className="mr-2 h-4 w-4" />
+ 새로고침
+ </Button>
+ </div>
+
+ <div className="flex items-center space-x-2">
+ <Badge variant="outline">
+ <FileText className="mr-1 h-3 w-3" />
+ {fileName}
+ </Badge>
+ {documentVariables.length > 0 && (
+ <Badge variant="secondary">
+ <Type className="mr-1 h-3 w-3" />
+ 변수 {documentVariables.length}개
+ </Badge>
+ )}
+ </div>
+ </div>
+
+ {/* 변수 도구 */}
+ {(documentVariables.length > 0 || predefinedVariables.length > 0) && (
+ <div className="mt-3 p-3 bg-white rounded border">
+ <div className="mb-2">
+ <h4 className="text-sm font-medium flex items-center">
+ <Type className="mr-2 h-4 w-4 text-blue-500" />
+ 변수 관리
+ </h4>
+ </div>
+
+ <div className="space-y-3">
+ {/* 발견된 변수들 */}
+ {documentVariables.length > 0 && (
+ <div>
+ <p className="text-xs text-muted-foreground mb-2">문서에서 발견된 변수:</p>
+ <div className="flex flex-wrap gap-1">
+ {documentVariables.map((variable, index) => (
+ <Badge key={index} variant="outline" className="text-xs">
+ {`{{${variable}}}`}
+ </Badge>
+ ))}
+ </div>
+ </div>
+ )}
+
+ {/* 미리 정의된 변수들 */}
+ <div>
+ <p className="text-xs text-muted-foreground mb-2">자주 사용하는 변수 (클릭하여 복사):</p>
+ <div className="flex flex-wrap gap-1">
+ {predefinedVariables.map((variable, index) => (
+ <Button
+ key={index}
+ variant="ghost"
+ size="sm"
+ className="h-6 px-2 text-xs"
+ onClick={() => insertVariable(variable)}
+ >
+ {`{{${variable}}}`}
+ </Button>
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
+ </div>
+
+ {/* 뷰어 영역 (확대 문제 해결을 위한 컨테이너 격리) */}
+ <div className="flex-1 relative overflow-hidden">
+ <div className="absolute inset-0">
+ <BasicContractTemplateViewer
+ templateId={templateId}
+ filePath={filePath}
+ instance={instance}
+ setInstance={setInstance}
+ />
+ </div>
+ </div>
+
+ {/* 하단 안내 (한글 입력 팁 포함) */}
+ <div className="border-t bg-gray-50 p-2">
+ <div className="flex items-center justify-between text-xs text-muted-foreground">
+ <div className="flex items-center">
+ <AlertCircle className="inline h-3 w-3 mr-1" />
+ {'{{변수명}}'} 형식으로 변수를 삽입하면 계약서 생성 시 실제 값으로 치환됩니다.
+ </div>
+ <div className="flex items-center text-orange-600">
+ <AlertCircle className="inline h-3 w-3 mr-1" />
+ 한글 입력 제한시 외부 에디터에서 작성 후 복사-붙여넣기를 사용하세요.
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+} \ No newline at end of file
diff --git a/lib/basic-contract/template/update-basicContract-sheet.tsx b/lib/basic-contract/template/update-basicContract-sheet.tsx
index 810e1b77..88783461 100644
--- a/lib/basic-contract/template/update-basicContract-sheet.tsx
+++ b/lib/basic-contract/template/update-basicContract-sheet.tsx
@@ -47,15 +47,30 @@ import {
} from "@/components/ui/dropzone"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
-import { Badge } from "@/components/ui/badge"
import { updateTemplate } from "../service"
import { BasicContractTemplate } from "@/db/schema"
import { BUSINESS_UNITS, scopeHelpers } from "@/config/basicContractColumnsConfig"
-// 업데이트 템플릿 스키마 정의
+// 템플릿 이름 옵션 정의
+const TEMPLATE_NAME_OPTIONS = [
+ "준법서약",
+ "기술자료 요구서",
+ "비밀유지 계약서",
+ "표준하도급기본 계약서",
+ "General GTC",
+ "안전보건관리 약정서",
+ "동반성장",
+ "윤리규범 준수 서약서",
+ "기술자료 동의서",
+ "내국신용장 미개설 합의서",
+ "직납자재 하도급대급등 연동제 의향서"
+] as const;
+
+// 업데이트 템플릿 스키마 정의 (templateCode, status 제거, 워드파일만 허용)
export const updateTemplateSchema = z.object({
- templateCode: z.string().min(1, "템플릿 코드는 필수입니다."), // readonly로 처리
- templateName: z.string().min(1, "템플릿 이름은 필수입니다."),
+ templateName: z.enum(TEMPLATE_NAME_OPTIONS, {
+ required_error: "템플릿 이름을 선택해주세요.",
+ }),
revision: z.coerce.number().int().min(1, "리비전은 1 이상이어야 합니다."),
legalReviewRequired: z.boolean(),
@@ -69,10 +84,18 @@ export const updateTemplateSchema = z.object({
sysApplicable: z.boolean(),
infraApplicable: z.boolean(),
- status: z.enum(["ACTIVE", "DISPOSED"], {
- required_error: "상태는 필수 선택사항입니다.",
- }),
- file: z.instanceof(File, { message: "파일을 업로드해주세요." }).optional(),
+ file: z
+ .instanceof(File, { message: "파일을 업로드해주세요." })
+ .refine((file) => file.size <= 100 * 1024 * 1024, {
+ message: "파일 크기는 100MB 이하여야 합니다.",
+ })
+ .refine(
+ (file) =>
+ file.type === 'application/msword' ||
+ file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ { message: "워드 파일(.doc, .docx)만 업로드 가능합니다." }
+ )
+ .optional(),
}).refine((data) => {
// 적어도 하나의 적용 범위는 선택되어야 함
const hasAnyScope = BUSINESS_UNITS.some(unit =>
@@ -99,8 +122,7 @@ export function UpdateTemplateSheet({ template, onSuccess, ...props }: UpdateTem
const form = useForm<UpdateTemplateSchema>({
resolver: zodResolver(updateTemplateSchema),
defaultValues: {
- templateCode: template?.templateCode ?? "",
- templateName: template?.templateName ?? "",
+ templateName: template?.templateName as typeof TEMPLATE_NAME_OPTIONS[number] ?? "준법서약",
revision: template?.revision ?? 1,
legalReviewRequired: template?.legalReviewRequired ?? false,
shipBuildingApplicable: template?.shipBuildingApplicable ?? false,
@@ -111,7 +133,6 @@ export function UpdateTemplateSheet({ template, onSuccess, ...props }: UpdateTem
gyApplicable: template?.gyApplicable ?? false,
sysApplicable: template?.sysApplicable ?? false,
infraApplicable: template?.infraApplicable ?? false,
- status: (template?.status as "ACTIVE" | "DISPOSED") || "ACTIVE"
},
mode: "onChange"
})
@@ -136,8 +157,7 @@ export function UpdateTemplateSheet({ template, onSuccess, ...props }: UpdateTem
React.useEffect(() => {
if (template) {
form.reset({
- templateCode: template.templateCode,
- templateName: template.templateName,
+ templateName: template.templateName as typeof TEMPLATE_NAME_OPTIONS[number],
revision: template.revision ?? 1,
legalReviewRequired: template.legalReviewRequired ?? false,
shipBuildingApplicable: template.shipBuildingApplicable ?? false,
@@ -148,7 +168,6 @@ export function UpdateTemplateSheet({ template, onSuccess, ...props }: UpdateTem
gyApplicable: template.gyApplicable ?? false,
sysApplicable: template.sysApplicable ?? false,
infraApplicable: template.infraApplicable ?? false,
- status: template.status as "ACTIVE" | "DISPOSED",
});
}
}, [template, form]);
@@ -162,9 +181,8 @@ export function UpdateTemplateSheet({ template, onSuccess, ...props }: UpdateTem
startUpdateTransition(async () => {
if (!template) return
- // FormData 객체 생성하여 파일과 데이터를 함께 전송
+ // FormData 객체 생성하여 파일과 데이터를 함께 전송 (templateCode, status 제거)
const formData = new FormData();
- formData.append("templateCode", input.templateCode);
formData.append("templateName", input.templateName);
formData.append("revision", input.revision.toString());
formData.append("legalReviewRequired", input.legalReviewRequired.toString());
@@ -175,8 +193,6 @@ export function UpdateTemplateSheet({ template, onSuccess, ...props }: UpdateTem
formData.append(unit.key, value.toString());
});
- formData.append("status", input.status);
-
if (input.file) {
formData.append("file", input.file);
}
@@ -209,259 +225,242 @@ export function UpdateTemplateSheet({ template, onSuccess, ...props }: UpdateTem
return (
<Sheet {...props}>
- <SheetContent className="flex flex-col gap-6 sm:max-w-[600px] overflow-y-auto">
- <SheetHeader className="text-left">
+ <SheetContent className="sm:max-w-[600px] h-[100vh] flex flex-col p-0">
+ {/* 고정된 헤더 */}
+ <SheetHeader className="p-6 pb-4 border-b">
<SheetTitle>템플릿 업데이트</SheetTitle>
<SheetDescription>
템플릿 정보를 수정하고 변경사항을 저장하세요
+ <span className="text-red-500 mt-1 block text-sm">* 표시된 항목은 필수 입력사항입니다.</span>
</SheetDescription>
</SheetHeader>
- <Form {...form}>
- <form
- onSubmit={form.handleSubmit(onSubmit)}
- className="flex flex-col gap-6"
- >
- {/* 기본 정보 */}
- <Card>
- <CardHeader>
- <CardTitle className="text-lg">기본 정보</CardTitle>
- <CardDescription>
- 현재 적용 범위: {scopeHelpers.getScopeDisplayText(template)}
- </CardDescription>
- </CardHeader>
- <CardContent className="space-y-4">
- <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
- <FormField
- control={form.control}
- name="templateCode"
- render={({ field }) => (
- <FormItem>
- <FormLabel>템플릿 코드</FormLabel>
- <FormControl>
- <Input
- {...field}
- readOnly
- className="bg-muted"
- />
- </FormControl>
- <FormDescription>
- 템플릿 코드는 수정할 수 없습니다.
- </FormDescription>
- </FormItem>
- )}
- />
+ {/* 스크롤 가능한 컨텐츠 영역 */}
+ <div className="flex-1 overflow-y-auto px-6">
+ <Form {...form}>
+ <form
+ onSubmit={form.handleSubmit(onSubmit)}
+ className="space-y-6 py-4"
+ >
+ {/* 기본 정보 */}
+ <Card>
+ <CardHeader>
+ <CardTitle className="text-lg">기본 정보</CardTitle>
+ <CardDescription>
+ 현재 적용 범위: {scopeHelpers.getScopeDisplayText(template)}
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <FormField
+ control={form.control}
+ name="templateName"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>
+ 템플릿 이름 <span className="text-red-500">*</span>
+ </FormLabel>
+ <Select onValueChange={field.onChange} defaultValue={field.value}>
+ <FormControl>
+ <SelectTrigger>
+ <SelectValue placeholder="템플릿 이름을 선택하세요" />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ <SelectGroup>
+ {TEMPLATE_NAME_OPTIONS.map((option) => (
+ <SelectItem key={option} value={option}>
+ {option}
+ </SelectItem>
+ ))}
+ </SelectGroup>
+ </SelectContent>
+ </Select>
+ <FormDescription>
+ 미리 정의된 템플릿 중에서 선택
+ </FormDescription>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="revision"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>리비전</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ min="1"
+ {...field}
+ onChange={(e) => field.onChange(parseInt(e.target.value) || 1)}
+ />
+ </FormControl>
+ <FormDescription>
+ 템플릿 버전을 업데이트하세요.
+ <br />
+ <span className="text-xs text-muted-foreground">
+ 동일한 템플릿 이름의 리비전은 중복될 수 없습니다.
+ </span>
+ </FormDescription>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
<FormField
control={form.control}
- name="revision"
+ name="legalReviewRequired"
render={({ field }) => (
- <FormItem>
- <FormLabel>리비전</FormLabel>
+ <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+ <div className="space-y-0.5">
+ <FormLabel>법무검토 필요</FormLabel>
+ <FormDescription>
+ 법무팀 검토가 필요한 템플릿인지 설정
+ </FormDescription>
+ </div>
<FormControl>
- <Input
- type="number"
- min="1"
- {...field}
- onChange={(e) => field.onChange(parseInt(e.target.value) || 1)}
+ <Switch
+ checked={field.value}
+ onCheckedChange={field.onChange}
/>
</FormControl>
- <FormDescription>
- 템플릿 버전을 업데이트하세요.
- </FormDescription>
- <FormMessage />
</FormItem>
)}
/>
- </div>
+ </CardContent>
+ </Card>
- <FormField
- control={form.control}
- name="templateName"
- render={({ field }) => (
- <FormItem>
- <FormLabel>템플릿 이름</FormLabel>
- <FormControl>
- <Input placeholder="템플릿 이름을 입력하세요" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
+ {/* 적용 범위 */}
+ <Card>
+ <CardHeader>
+ <CardTitle className="text-lg">
+ 적용 범위 <span className="text-red-500">*</span>
+ </CardTitle>
+ <CardDescription>
+ 이 템플릿이 적용될 사업부를 선택하세요. ({selectedScopesCount}개 선택됨)
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="flex items-center space-x-2">
+ <Checkbox
+ id="select-all"
+ checked={selectedScopesCount === BUSINESS_UNITS.length}
+ onCheckedChange={handleSelectAllScopes}
+ />
+ <label htmlFor="select-all" className="text-sm font-medium">
+ 전체 선택
+ </label>
+ </div>
+
+ <Separator />
+
+ <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+ {BUSINESS_UNITS.map((unit) => (
+ <FormField
+ key={unit.key}
+ control={form.control}
+ name={unit.key as keyof UpdateTemplateSchema}
+ render={({ field }) => (
+ <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+ <FormControl>
+ <Checkbox
+ checked={field.value as boolean}
+ onCheckedChange={field.onChange}
+ />
+ </FormControl>
+ <div className="space-y-1 leading-none">
+ <FormLabel className="text-sm font-normal">
+ {unit.label}
+ </FormLabel>
+ </div>
+ </FormItem>
+ )}
+ />
+ ))}
+ </div>
+
+ {form.formState.errors.shipBuildingApplicable && (
+ <p className="text-sm text-destructive">
+ {form.formState.errors.shipBuildingApplicable.message}
+ </p>
)}
- />
+ </CardContent>
+ </Card>
- <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+ {/* 파일 업데이트 */}
+ <Card>
+ <CardHeader>
+ <CardTitle className="text-lg">파일 업데이트</CardTitle>
+ <CardDescription>
+ 현재 파일: {template.fileName}
+ </CardDescription>
+ </CardHeader>
+ <CardContent>
<FormField
control={form.control}
- name="status"
- render={({ field }) => (
+ name="file"
+ render={() => (
<FormItem>
- <FormLabel>상태</FormLabel>
- <Select
- defaultValue={field.value}
- onValueChange={field.onChange}
- >
- <FormControl>
- <SelectTrigger>
- <SelectValue placeholder="템플릿 상태 선택" />
- </SelectTrigger>
- </FormControl>
- <SelectContent>
- <SelectGroup>
- <SelectItem value="ACTIVE">활성</SelectItem>
- <SelectItem value="DISPOSED">폐기</SelectItem>
- </SelectGroup>
- </SelectContent>
- </Select>
+ <FormLabel>템플릿 파일 (선택사항)</FormLabel>
+ <FormControl>
+ <Dropzone
+ onDrop={handleFileChange}
+ accept={{
+ 'application/msword': ['.doc'],
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx']
+ }}
+ >
+ <DropzoneZone>
+ <DropzoneUploadIcon className="h-10 w-10 text-muted-foreground" />
+ <DropzoneTitle>
+ {selectedFile
+ ? selectedFile.name
+ : "새 워드 파일을 드래그하세요 (선택사항)"}
+ </DropzoneTitle>
+ <DropzoneDescription>
+ {selectedFile
+ ? `파일 크기: ${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`
+ : "또는 클릭하여 워드 파일(.doc, .docx)을 선택하세요 (최대 100MB)"}
+ </DropzoneDescription>
+ <DropzoneInput />
+ </DropzoneZone>
+ </Dropzone>
+ </FormControl>
<FormMessage />
</FormItem>
)}
/>
- </div>
-
- <FormField
- control={form.control}
- name="legalReviewRequired"
- render={({ field }) => (
- <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
- <div className="space-y-0.5">
- <FormLabel>법무검토 필요</FormLabel>
- <FormDescription>
- 법무팀 검토가 필요한 템플릿인지 설정
- </FormDescription>
- </div>
- <FormControl>
- <Switch
- checked={field.value}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- </FormItem>
- )}
- />
- </CardContent>
- </Card>
-
- {/* 적용 범위 */}
- <Card>
- <CardHeader>
- <CardTitle className="text-lg">적용 범위</CardTitle>
- <CardDescription>
- 이 템플릿이 적용될 사업부를 선택하세요. ({selectedScopesCount}개 선택됨)
- </CardDescription>
- </CardHeader>
- <CardContent className="space-y-4">
- <div className="flex items-center space-x-2">
- <Checkbox
- id="select-all"
- checked={selectedScopesCount === BUSINESS_UNITS.length}
- onCheckedChange={handleSelectAllScopes}
- />
- <label htmlFor="select-all" className="text-sm font-medium">
- 전체 선택
- </label>
- </div>
-
- <Separator />
-
- <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
- {BUSINESS_UNITS.map((unit) => (
- <FormField
- key={unit.key}
- control={form.control}
- name={unit.key as keyof UpdateTemplateSchema}
- render={({ field }) => (
- <FormItem className="flex flex-row items-start space-x-3 space-y-0">
- <FormControl>
- <Checkbox
- checked={field.value as boolean}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- <div className="space-y-1 leading-none">
- <FormLabel className="text-sm font-normal">
- {unit.label}
- </FormLabel>
- </div>
- </FormItem>
- )}
- />
- ))}
- </div>
-
- {form.formState.errors.shipBuildingApplicable && (
- <p className="text-sm text-destructive">
- {form.formState.errors.shipBuildingApplicable.message}
- </p>
- )}
- </CardContent>
- </Card>
+ </CardContent>
+ </Card>
+ </form>
+ </Form>
+ </div>
- {/* 파일 업데이트 */}
- <Card>
- <CardHeader>
- <CardTitle className="text-lg">파일 업데이트</CardTitle>
- <CardDescription>
- 현재 파일: {template.fileName}
- </CardDescription>
- </CardHeader>
- <CardContent>
- <FormField
- control={form.control}
- name="file"
- render={() => (
- <FormItem>
- <FormLabel>템플릿 파일 (선택사항)</FormLabel>
- <FormControl>
- <Dropzone
- onDrop={handleFileChange}
- accept={{
- 'application/pdf': ['.pdf']
- }}
- >
- <DropzoneZone>
- <DropzoneUploadIcon className="h-10 w-10 text-muted-foreground" />
- <DropzoneTitle>
- {selectedFile
- ? selectedFile.name
- : "새 파일을 드래그하세요 (선택사항)"}
- </DropzoneTitle>
- <DropzoneDescription>
- {selectedFile
- ? `파일 크기: ${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`
- : "또는 클릭하여 파일을 선택하세요"}
- </DropzoneDescription>
- <DropzoneInput />
- </DropzoneZone>
- </Dropzone>
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- </CardContent>
- </Card>
-
- <SheetFooter className="gap-2 pt-2 sm:space-x-0">
- <SheetClose asChild>
- <Button type="button" variant="outline">
- 취소
- </Button>
- </SheetClose>
- <Button
- type="submit"
- disabled={isUpdatePending || !form.formState.isValid}
- >
- {isUpdatePending && (
- <Loader
- className="mr-2 size-4 animate-spin"
- aria-hidden="true"
- />
- )}
- 저장
- </Button>
- </SheetFooter>
- </form>
- </Form>
+ {/* 고정된 푸터 */}
+ <SheetFooter className="p-6 pt-4 border-t">
+ <SheetClose asChild>
+ <Button type="button" variant="outline">
+ 취소
+ </Button>
+ </SheetClose>
+ <Button
+ type="button"
+ onClick={form.handleSubmit(onSubmit)}
+ disabled={isUpdatePending || !form.formState.isValid}
+ >
+ {isUpdatePending && (
+ <Loader
+ className="mr-2 size-4 animate-spin"
+ aria-hidden="true"
+ />
+ )}
+ 저장
+ </Button>
+ </SheetFooter>
</SheetContent>
</Sheet>
)
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 11:44:33 +0000