From 969c25b56f6d29d7ffa4bc2ce04c5fb4e5846b34 Mon Sep 17 00:00:00 2001 From: dujinkim Date: Thu, 14 Aug 2025 11:54:47 +0000 Subject: (대표님) 정규벤더등록, 벤더문서관리, 벤더데이터입력, 첨부파일관리 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(evcp)/vendor-regular-registrations/page.tsx | 6 +- .../document-list-only/[contractId]/page.tsx | 21 +- .../(partners)/document-list-only/page.tsx | 16 +- .../partners/(partners)/document-list/page.tsx | 16 +- .../(partners)/registration-status/page.tsx | 24 + .../partners/(partners)/vendor-data/layout.tsx | 7 +- app/[lng]/partners/(partners)/vendor-data/page.tsx | 9 +- app/api/attachment-delete/route.ts | 76 + app/api/files/[...path]/route.ts | 1 + app/api/revision-attachment/route.ts | 102 +- app/api/revision-upload-ship/route.ts | 17 +- app/api/sync/batches/route.ts | 2 +- app/api/sync/config/route.ts | 8 +- app/api/sync/status/route.ts | 2 +- .../document-lists/vendor-doc-list-client.tsx | 15 +- components/documents/project-swicher.tsx | 14 +- components/form-data/form-data-table.tsx | 6 +- components/form-data/spreadJS-dialog copy 2.tsx | 1002 + components/form-data/spreadJS-dialog copy 3.tsx | 1916 + components/form-data/spreadJS-dialog.tsx | 24 +- components/information/information-button.tsx | 9 +- components/information/information-client.tsx | 4 +- .../ship-vendor-document/edit-revision-dialog.tsx | 726 + .../user-vendor-document-table-container.tsx | 615 +- components/signup/join-form.tsx | 12 +- .../vendor-data/vendor-data-container copy.tsx | 464 + components/vendor-data/vendor-data-container.tsx | 11 +- .../document-status-dialog.tsx | 213 +- .../registration-request-dialog.tsx | 691 + config/vendorRegularRegistrationsColumnsConfig.ts | 13 +- db/migrations/0287_busy_darkhawk.sql | 3 + db/migrations/0288_serious_iron_lad.sql | 37 + db/migrations/0289_watery_stryfe.sql | 37 + db/migrations/0290_conscious_avengers.sql | 23 + db/migrations/0291_stiff_big_bertha.sql | 2 + db/migrations/0292_aromatic_mandrill.sql | 231 + db/migrations/meta/0287_snapshot.json | 48206 ++++++++++++++++++ db/migrations/meta/0288_snapshot.json | 48206 ++++++++++++++++++ db/migrations/meta/0289_snapshot.json | 48206 ++++++++++++++++++ db/migrations/meta/0290_snapshot.json | 48444 ++++++++++++++++++ db/migrations/meta/0291_snapshot.json | 48457 +++++++++++++++++++ db/migrations/meta/0292_snapshot.json | 48457 +++++++++++++++++++ db/migrations/meta/_journal.json | 42 + db/schema/vendorDocu.ts | 28 +- db/schema/vendorRegistrations.ts | 5 + i18n/locales/en/document.json | 77 + i18n/locales/en/engineering.json | 197 +- i18n/locales/ko/document.json | 78 + i18n/locales/ko/engineering.json | 58 +- lib/sedp/get-form-tags.ts | 9 +- lib/tags/table/add-tag-dialog.tsx | 76 +- lib/vendor-document-list/dolce-upload-service.ts | 606 +- .../enhanced-document-service.ts | 163 +- .../plant/document-stages-table.tsx | 39 +- .../ship/send-to-shi-button.tsx | 18 +- lib/vendor-document-list/sync-service.ts | 65 +- .../table/enhanced-documents-table.tsx | 90 +- .../vendor-registration-status-view.tsx | 260 +- .../major-items-update-sheet.tsx | 245 + lib/vendor-regular-registrations/repository.ts | 157 +- .../safety-qualification-update-sheet.tsx | 143 + lib/vendor-regular-registrations/service.ts | 400 +- .../table/safety-qualification-update-sheet.tsx | 143 + .../vendor-regular-registrations-table-columns.tsx | 105 +- ...regular-registrations-table-toolbar-actions.tsx | 108 +- lib/vendors/table/request-pq-dialog.tsx | 34 +- 66 files changed, 298330 insertions(+), 1167 deletions(-) create mode 100644 app/[lng]/partners/(partners)/registration-status/page.tsx create mode 100644 app/api/attachment-delete/route.ts create mode 100644 components/form-data/spreadJS-dialog copy 2.tsx create mode 100644 components/form-data/spreadJS-dialog copy 3.tsx create mode 100644 components/ship-vendor-document/edit-revision-dialog.tsx create mode 100644 components/vendor-data/vendor-data-container copy.tsx create mode 100644 components/vendor-regular-registrations/registration-request-dialog.tsx create mode 100644 db/migrations/0287_busy_darkhawk.sql create mode 100644 db/migrations/0288_serious_iron_lad.sql create mode 100644 db/migrations/0289_watery_stryfe.sql create mode 100644 db/migrations/0290_conscious_avengers.sql create mode 100644 db/migrations/0291_stiff_big_bertha.sql create mode 100644 db/migrations/0292_aromatic_mandrill.sql create mode 100644 db/migrations/meta/0287_snapshot.json create mode 100644 db/migrations/meta/0288_snapshot.json create mode 100644 db/migrations/meta/0289_snapshot.json create mode 100644 db/migrations/meta/0290_snapshot.json create mode 100644 db/migrations/meta/0291_snapshot.json create mode 100644 db/migrations/meta/0292_snapshot.json create mode 100644 i18n/locales/en/document.json create mode 100644 i18n/locales/ko/document.json create mode 100644 lib/vendor-regular-registrations/major-items-update-sheet.tsx create mode 100644 lib/vendor-regular-registrations/safety-qualification-update-sheet.tsx create mode 100644 lib/vendor-regular-registrations/table/safety-qualification-update-sheet.tsx diff --git a/app/[lng]/evcp/(evcp)/vendor-regular-registrations/page.tsx b/app/[lng]/evcp/(evcp)/vendor-regular-registrations/page.tsx index 2260396c..e8433c55 100644 --- a/app/[lng]/evcp/(evcp)/vendor-regular-registrations/page.tsx +++ b/app/[lng]/evcp/(evcp)/vendor-regular-registrations/page.tsx @@ -1,5 +1,7 @@ import * as React from "react" +export const dynamic = "force-dynamic" + import { Skeleton } from "@/components/ui/skeleton" import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton" @@ -27,9 +29,9 @@ export default async function VendorRegularRegistrationsPage() { -

+ {/*

정규업체 등록 현황을 확인하세요. 구매담당자가 정규업체 등록을 위한 현황 조회 및 협력업체에게 누락자료 요청하는 화면입니다. -

+

*/} diff --git a/app/[lng]/partners/(partners)/document-list-only/[contractId]/page.tsx b/app/[lng]/partners/(partners)/document-list-only/[contractId]/page.tsx index e3cda9b4..7c38d5cf 100644 --- a/app/[lng]/partners/(partners)/document-list-only/[contractId]/page.tsx +++ b/app/[lng]/partners/(partners)/document-list-only/[contractId]/page.tsx @@ -6,6 +6,7 @@ import { type SearchParams } from "@/types/table" import { getValidFilters } from "@/lib/data-table" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" +import { useTranslation } from "@/i18n" import { TrendingUp, AlertTriangle, @@ -22,6 +23,7 @@ import { getDocumentProgressStats, getDocumentStagesOnly } from "@/lib/vendor-do interface DocumentStagesManagementPageProps { params: { + lng?: string contractId: string } searchParams: Promise @@ -29,14 +31,15 @@ interface DocumentStagesManagementPageProps { // 전체 진행률 카드 컴포넌트 -async function ProgressCard({ contractId }: { contractId: number }) { +async function ProgressCard({ contractId, lng }: { contractId: number, lng: string }) { const stats = await getDocumentProgressStats(contractId) + const { t } = await useTranslation(lng, 'engineering') return (
- 전체 진행률 + {t('vendorDocuments.progress.overallProgress')}
@@ -44,7 +47,7 @@ async function ProgressCard({ contractId }: { contractId: number }) {
- 평균 진행률 + {t('vendorDocuments.progress.averageProgress')} {stats.avgProgress}%
@@ -52,19 +55,19 @@ async function ProgressCard({ contractId }: { contractId: number }) {
{stats.totalDocuments}
-
전체
+
{t('vendorDocuments.progress.total')}
{stats.completedDocuments}
-
완료
+
{t('vendorDocuments.progress.completed')}
{stats.inProgressDocuments}
-
진행중
+
{t('vendorDocuments.progress.inProgress')}
{stats.overdueDocuments}
-
지연
+
{t('vendorDocuments.progress.overdue')}
@@ -139,14 +142,16 @@ export default async function DocumentStagesManagementPage({ searchParams }: DocumentStagesManagementPageProps) { const resolvedParams = await params + const lng = resolvedParams?.lng || 'ko' const contractId = Number(resolvedParams.contractId) const resolvedSearchParams = await searchParams + const { t } = await useTranslation(lng, 'engineering') // 프로젝트 타입 결정 (실제로는 계약 정보에서 가져와야 함) const projectType = resolvedSearchParams.projectType === "plant" ? "plant" : "ship" if (isNaN(contractId)) { - throw new Error("유효하지 않은 계약 ID입니다") + throw new Error(t('vendorDocuments.errors.invalidContractId')) } return ( diff --git a/app/[lng]/partners/(partners)/document-list-only/page.tsx b/app/[lng]/partners/(partners)/document-list-only/page.tsx index 721eb408..fe7cf47a 100644 --- a/app/[lng]/partners/(partners)/document-list-only/page.tsx +++ b/app/[lng]/partners/(partners)/document-list-only/page.tsx @@ -1,18 +1,24 @@ // app/vendor-data/page.tsx import * as React from "react" import { Separator } from "@/components/ui/separator" +import { useTranslation } from "@/i18n" -export default async function IndexPage() { +interface Props { + params: { lng?: string } +} + +export default async function IndexPage({ params }: Props) { + const { lng } = await params + const language = lng || 'ko' + const { t } = await useTranslation(language, 'engineering') return (
-

시작하는 방법

+

{t('vendorDocuments.gettingStarted.title')}

- 오른쪽 상단에서 프로젝트/계약을 선택하세요.
- - + {t('vendorDocuments.gettingStarted.selectProject')}

diff --git a/app/[lng]/partners/(partners)/document-list/page.tsx b/app/[lng]/partners/(partners)/document-list/page.tsx index 721eb408..fe7cf47a 100644 --- a/app/[lng]/partners/(partners)/document-list/page.tsx +++ b/app/[lng]/partners/(partners)/document-list/page.tsx @@ -1,18 +1,24 @@ // app/vendor-data/page.tsx import * as React from "react" import { Separator } from "@/components/ui/separator" +import { useTranslation } from "@/i18n" -export default async function IndexPage() { +interface Props { + params: { lng?: string } +} + +export default async function IndexPage({ params }: Props) { + const { lng } = await params + const language = lng || 'ko' + const { t } = await useTranslation(language, 'engineering') return (
-

시작하는 방법

+

{t('vendorDocuments.gettingStarted.title')}

- 오른쪽 상단에서 프로젝트/계약을 선택하세요.
- - + {t('vendorDocuments.gettingStarted.selectProject')}

diff --git a/app/[lng]/partners/(partners)/registration-status/page.tsx b/app/[lng]/partners/(partners)/registration-status/page.tsx new file mode 100644 index 00000000..21bcea59 --- /dev/null +++ b/app/[lng]/partners/(partners)/registration-status/page.tsx @@ -0,0 +1,24 @@ +import * as React from "react" +import { Suspense } from "react" + +import { Skeleton } from "@/components/ui/skeleton" +import { Shell } from "@/components/shell" +import { VendorRegistrationStatusView } from "@/lib/vendor-registration-status/vendor-registration-status-view" + +export default async function VendorRegistrationStatusPage() { + return ( + + + + + +
+ } + > + + + + ) +} diff --git a/app/[lng]/partners/(partners)/vendor-data/layout.tsx b/app/[lng]/partners/(partners)/vendor-data/layout.tsx index 9621d23f..c37a983a 100644 --- a/app/[lng]/partners/(partners)/vendor-data/layout.tsx +++ b/app/[lng]/partners/(partners)/vendor-data/layout.tsx @@ -11,7 +11,7 @@ import { useTranslation } from "@/i18n" interface VendorDataLayoutProps { children: React.ReactNode - params?: { locale?: string } + params: { lng?: string } } // Layout 컴포넌트는 서버 컴포넌트입니다 @@ -20,8 +20,9 @@ export default async function VendorDataLayout({ params, }: VendorDataLayoutProps) { // 기본 언어는 'ko'로 설정, params.locale이 있으면 사용 - const lng = params?.locale || 'ko' - const { t } = await useTranslation(lng, 'engineering') + const { lng } = await params; + const language = lng || 'en' + const { t } = await useTranslation(language, 'engineering') const session = await getServerSession(authOptions) const vendorId = session?.user.companyId diff --git a/app/[lng]/partners/(partners)/vendor-data/page.tsx b/app/[lng]/partners/(partners)/vendor-data/page.tsx index db032377..0fbb6f0a 100644 --- a/app/[lng]/partners/(partners)/vendor-data/page.tsx +++ b/app/[lng]/partners/(partners)/vendor-data/page.tsx @@ -3,13 +3,14 @@ import { Separator } from "@/components/ui/separator" import { useTranslation } from "@/i18n" interface Props { - params: { locale?: string } + params: { lng?: string } } export default async function VendorDataPage({ params }: Props) { - // 기본 언어는 'ko'로 설정, params.locale이 있으면 사용 - const lng = params?.locale || 'ko' - const { t } = await useTranslation(lng, 'engineering') + // 기본 언어는 'ko'로 설정, params.lng이 있으면 사용 + const { lng } = await params + const language = lng || 'en' + const { t } = await useTranslation(language, 'engineering') return (
diff --git a/app/api/attachment-delete/route.ts b/app/api/attachment-delete/route.ts new file mode 100644 index 00000000..254c579f --- /dev/null +++ b/app/api/attachment-delete/route.ts @@ -0,0 +1,76 @@ +// /api/attachment-delete/route.ts + +import { NextRequest, NextResponse } from 'next/server' +import db from '@/db/db' +import { documentAttachments } from '@/db/schema' // 실제 스키마에 맞게 수정 +import { eq, and } from 'drizzle-orm' +import fs from 'fs/promises' +import path from 'path' + +export async function DELETE(request: NextRequest) { + try { + const { attachmentId, revisionId } = await request.json() + + if (!attachmentId || !revisionId) { + return NextResponse.json( + { error: 'attachmentId and revisionId are required' }, + { status: 400 } + ) + } + + // 1. 데이터베이스에서 첨부파일 정보 조회 + const attachment = await db + .select() + .from(documentAttachments) + .where( + and( + eq(documentAttachments.id, attachmentId), + eq(documentAttachments.revisionId, revisionId) + ) + ) + .limit(1) + + if (!attachment || attachment.length === 0) { + return NextResponse.json( + { error: 'Attachment not found' }, + { status: 404 } + ) + } + + const attachmentData = attachment[0] + + // 2. dolceFilePath 체크 - 있으면 삭제 불가 + if (attachmentData.dolceFilePath && attachmentData.dolceFilePath.trim() !== '') { + return NextResponse.json( + { error: 'Cannot delete processed file' }, + { status: 403 } + ) + } + + // 4. 데이터베이스에서 첨부파일 레코드 삭제 + await db + .delete(documentAttachments) + .where( + and( + eq(documentAttachments.id, attachmentId), + eq(documentAttachments.revisionId, revisionId) + ) + ) + + return NextResponse.json({ + success: true, + message: 'Attachment deleted successfully', + deletedAttachmentId: attachmentId + }) + + } catch (error) { + console.error('Attachment deletion error:', error) + return NextResponse.json( + { + error: 'Internal server error', + details: error instanceof Error ? error.message : 'Unknown error' + }, + { status: 500 } + ) + } +} \ No newline at end of file diff --git a/app/api/files/[...path]/route.ts b/app/api/files/[...path]/route.ts index 5eab8210..9ef11bc7 100644 --- a/app/api/files/[...path]/route.ts +++ b/app/api/files/[...path]/route.ts @@ -36,6 +36,7 @@ const isAllowedPath = (requestedPath: string): boolean => { 'vendorFormReportSample', 'vendorFormData', 'uploads', + 'documents', 'tech-sales', 'techsales-rfq', 'tech-vendors', diff --git a/app/api/revision-attachment/route.ts b/app/api/revision-attachment/route.ts index 092eed8d..46c2e9c9 100644 --- a/app/api/revision-attachment/route.ts +++ b/app/api/revision-attachment/route.ts @@ -1,8 +1,4 @@ import { NextRequest, NextResponse } from "next/server" -import { writeFile } from "fs/promises" -import { join } from "path" -import { v4 as uuidv4 } from "uuid" -import path from "path" import { revalidateTag } from "next/cache" import db from "@/db/db" @@ -14,6 +10,9 @@ import { } from "@/db/schema/vendorDocu" import { eq } from "drizzle-orm" +/* 보안 강화된 파일 저장 유틸리티 */ +import { saveFile, SaveFileResult, saveFileStream } from "@/lib/file-stroage" + /* change log 유틸 */ import { logAttachmentChange, @@ -35,13 +34,16 @@ export async function POST(request: NextRequest) { if (!attachmentFiles.length) return NextResponse.json({ error: "No files provided" }, { status: 400 }) - const MAX = 50 * 1024 * 1024 // 50MB - for (const f of attachmentFiles) - if (f.size > MAX) + // 기본 파일 크기 검증 (보안 함수에서도 검증하지만 조기 체크) + const MAX = 1024 * 1024 * 1024 // 1GB로 증가 (첫 번째 파일과 동일) + for (const f of attachmentFiles) { + if (f.size > MAX) { return NextResponse.json( - { error: `${f.name} exceeds 50MB limit` }, + { error: `${f.name} exceeds 1GB limit` }, { status: 400 } ) + } + } /* ------- 리비전 및 계약 정보 확보 ------- */ const [revisionInfo] = await db @@ -52,6 +54,7 @@ export async function POST(request: NextRequest) { usageType: revisions.usageType, issueStageId: revisions.issueStageId, projectId: documents.projectId, + vendorId: documents.vendorId, }) .from(revisions) .innerJoin(issueStages, eq(revisions.issueStageId, issueStages.id)) @@ -63,41 +66,60 @@ export async function POST(request: NextRequest) { return NextResponse.json({ error: "Revision not found" }, { status: 404 }) } + // vendorId가 null인 경우 처리 + if (!revisionInfo.vendorId) { + return NextResponse.json({ + error: "Revision must have a valid vendor ID for synchronization" + }, { status: 400 }) + } + /* ------- 트랜잭션 ------- */ const result = await db.transaction(async (tx) => { - /* 첨부파일 처리 */ + /* ------- 보안 강화된 첨부파일 처리 ------- */ const uploadedFiles: any[] = [] - const baseDir = join(process.cwd(), "public", "documents") + const securityFailures: string[] = [] for (const file of attachmentFiles) { - const ext = path.extname(file.name) - const fname = uuidv4() + ext - const dest = join(baseDir, fname) - - await writeFile(dest, Buffer.from(await file.arrayBuffer())) - + console.log(`🔐 보안 검증 시작: ${file.name}`) + + // 보안 강화된 파일 저장 + const saveResult = file.size > 100 * 1024 * 1024 + ? await saveFileStream({ file, directory: "documents", userId: uploaderName || "" }) + : await saveFile({ file, directory: "documents", userId: uploaderName || "" }) + + if (!saveResult.success) { + console.error(`❌ 파일 보안 검증 실패: ${file.name} - ${saveResult.error}`) + securityFailures.push(`${file.name}: ${saveResult.error}`) + continue // 실패한 파일은 건너뛰고 계속 진행 + } + + console.log(`✅ 파일 보안 검증 통과: ${file.name}`) + console.log(`📁 저장된 경로: ${saveResult.publicPath}`) + + // DB에 첨부파일 정보 저장 const [att] = await tx.insert(documentAttachments) .values({ revisionId, - fileName: file.name, - filePath: "/documents/" + fname, - fileSize: file.size, - fileType: ext.slice(1).toLowerCase() || undefined, + fileName: saveResult.originalName!, // 원본 파일명 + filePath: saveResult.publicPath!, // 웹 접근 경로 + fileSize: saveResult.fileSize!, + fileType: saveResult.fileName!.split('.').pop()?.toLowerCase() || undefined, updatedAt: new Date(), }) .returning() uploadedFiles.push({ id: att.id, - fileName: file.name, - fileSize: file.size, - filePath: att.filePath, - fileType: ext.slice(1).toLowerCase() || null, + fileName: saveResult.originalName, + fileSize: saveResult.fileSize, + filePath: saveResult.publicPath, + fileType: saveResult.fileName!.split('.').pop()?.toLowerCase() || null, + securityChecks: saveResult.securityChecks, // 보안 검증 결과 }) // change_logs: attachment CREATE await logAttachmentChange( - revisionInfo.projectId, + revisionInfo.vendorId!, att.id, "CREATE", att, @@ -108,6 +130,16 @@ export async function POST(request: NextRequest) { ) } + // 보안 검증 실패한 파일이 있으면 경고 반환 + if (securityFailures.length > 0) { + console.warn(`⚠️ 일부 파일의 보안 검증 실패:`, securityFailures) + + // 모든 파일이 실패한 경우 에러 반환 + if (uploadedFiles.length === 0) { + throw new Error(`모든 파일의 보안 검증이 실패했습니다: ${securityFailures.join(', ')}`) + } + } + /* 리비전 updatedAt 업데이트 */ await tx.update(revisions) .set({ updatedAt: new Date() }) @@ -119,30 +151,36 @@ export async function POST(request: NextRequest) { usage: revisionInfo.usage, usageType: revisionInfo.usageType, uploadedFiles, - projectId: revisionInfo.projectId + vendorId: revisionInfo.vendorId, + securityFailures // 보안 실패 정보 포함 } }) // 캐시 무효화 try { - // revalidateTag(`enhanced-documents-${result.projectId}`) - revalidateTag(`sync-status-${result.projectId}`) - - console.log(`✅ Cache invalidated for contract ${result.projectId}`) + revalidateTag(`sync-status-${result.vendorId}`) + console.log(`✅ Cache invalidated for contract ${result.vendorId}`) } catch (cacheError) { console.warn('⚠️ Cache invalidation failed:', cacheError) } + // 응답 메시지 구성 + let message = `${result.uploadedFiles.length}개 첨부파일이 추가되었습니다` + if (result.securityFailures.length > 0) { + message += ` (일부 파일 보안 검증 실패: ${result.securityFailures.length}개)` + } + return NextResponse.json({ success: true, - message: `${result.uploadedFiles.length}개 첨부파일이 추가되었습니다`, + message, data: { revisionId: result.revisionId, revision: result.revision, usage: result.usage, usageType: result.usageType, uploadedFiles: result.uploadedFiles, - filesCount: result.uploadedFiles.length + filesCount: result.uploadedFiles.length, + securityFailures: result.securityFailures, // 클라이언트에 보안 실패 정보 전달 }, }) } catch (e) { diff --git a/app/api/revision-upload-ship/route.ts b/app/api/revision-upload-ship/route.ts index 671b8bac..b07a3d9c 100644 --- a/app/api/revision-upload-ship/route.ts +++ b/app/api/revision-upload-ship/route.ts @@ -56,7 +56,8 @@ export async function POST(request: NextRequest) { const [docInfo] = await db .select({ contractId: documents.contractId, - projectId: documents.projectId + projectId: documents.projectId , + vendorId: documents.vendorId , }) .from(documents) .where(eq(documents.id, docId)) @@ -67,7 +68,7 @@ export async function POST(request: NextRequest) { } // projectId가 null인 경우 처리 - if (!docInfo.projectId) { + if (!docInfo.vendorId) { return NextResponse.json({ error: "Document must have a valid project ID for synchronization" }, { status: 400 }) @@ -158,7 +159,7 @@ export async function POST(request: NextRequest) { revisionData = updated await logRevisionChange( - docInfo.projectId!, // null 체크 후이므로 non-null assertion 사용 + docInfo.vendorId!, // null 체크 후이므로 non-null assertion 사용 revisionId, "UPDATE", updated, @@ -188,7 +189,7 @@ export async function POST(request: NextRequest) { revisionData = newRev await logRevisionChange( - docInfo.projectId!, // null 체크 후이므로 non-null assertion 사용 + docInfo.vendorId!, // null 체크 후이므로 non-null assertion 사용 revisionId, "CREATE", newRev, @@ -243,7 +244,7 @@ export async function POST(request: NextRequest) { // change_logs: attachment CREATE await logAttachmentChange( - docInfo.projectId!, + docInfo.vendorId!, att.id, "CREATE", att, @@ -275,7 +276,7 @@ export async function POST(request: NextRequest) { stage, revision, uploadedFiles, - contractId: docInfo.contractId, + vendorId: docInfo.vendorId, usage, usageType, securityFailures // 보안 실패 정보 포함 @@ -284,8 +285,8 @@ export async function POST(request: NextRequest) { // 캐시 무효화 try { - revalidateTag(`sync-status-${result.contractId}`) - console.log(`✅ Cache invalidated for contract ${result.contractId}`) + revalidateTag(`sync-status-${result.vendorId}`) + console.log(`✅ Cache invalidated for contract ${result.vendorId}`) } catch (cacheError) { console.warn('⚠️ Cache invalidation failed:', cacheError) } diff --git a/app/api/sync/batches/route.ts b/app/api/sync/batches/route.ts index 7a72530d..1f37d6e6 100644 --- a/app/api/sync/batches/route.ts +++ b/app/api/sync/batches/route.ts @@ -10,7 +10,7 @@ export async function GET(request: NextRequest) { if (!projectId) { return NextResponse.json( - { error: 'Contract ID is required' }, + { error: 'Vendor ID is required' }, { status: 400 } ) } diff --git a/app/api/sync/config/route.ts b/app/api/sync/config/route.ts index db5d17ca..2e9a073a 100644 --- a/app/api/sync/config/route.ts +++ b/app/api/sync/config/route.ts @@ -6,10 +6,10 @@ import { authOptions } from "@/app/api/auth/[...nextauth]/route" export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) - const projectId = searchParams.get('projectId') + const vendorId = searchParams.get('vendorId') const targetSystem = searchParams.get('targetSystem') || 'SHI' - if (!projectId) { + if (!vendorId) { return NextResponse.json( { error: 'Contract ID is required' }, { status: 400 } @@ -17,7 +17,7 @@ export async function GET(request: NextRequest) { } const config = await syncService.getSyncConfig( - parseInt(projectId), + parseInt(vendorId), targetSystem ) @@ -65,7 +65,7 @@ export async function POST(request: NextRequest) { } await syncService.upsertSyncConfig({ - projectId, + vendorId, targetSystem, endpointUrl, authToken, diff --git a/app/api/sync/status/route.ts b/app/api/sync/status/route.ts index b4b18577..05101d2b 100644 --- a/app/api/sync/status/route.ts +++ b/app/api/sync/status/route.ts @@ -38,7 +38,7 @@ export async function GET(request: NextRequest) { if (!projectId) { return NextResponse.json( - { error: 'Project ID is required' }, + { error: 'project ID is required' }, { status: 400 } ) } diff --git a/components/document-lists/vendor-doc-list-client.tsx b/components/document-lists/vendor-doc-list-client.tsx index 0c4af106..4aa00ad7 100644 --- a/components/document-lists/vendor-doc-list-client.tsx +++ b/components/document-lists/vendor-doc-list-client.tsx @@ -5,6 +5,7 @@ import { useRouter, useParams } from "next/navigation" import DocumentContainer from "@/components/documents/document-container" import { ProjectInfo, ProjectSwitcher } from "@/components/documents/project-swicher" import { InformationButton } from "@/components/information/information-button" +import { useTranslation } from "@/i18n/client" interface VendorDocumentsClientProps { projects: ProjectInfo[] children: React.ReactNode @@ -16,6 +17,8 @@ export default function VendorDocumentListClient({ }: VendorDocumentsClientProps) { const router = useRouter() const params = useParams() + const lng = (params?.lng as string) || "ko" + const { t } = useTranslation(lng, "engineering") // Get the contractId from route parameters const contractIdFromUrl = React.useMemo(() => { @@ -51,7 +54,7 @@ export default function VendorDocumentListClient({ setProjectType("plant") // Navigate to the contract's documents page - router.push(`/partners/document-list-only/${contractId}?projectType=plant`) + router.push(`/${lng}/partners/document-list-only/${contractId}?projectType=plant`) } return ( @@ -61,15 +64,15 @@ export default function VendorDocumentListClient({ {/* 왼쪽: 타이틀 & 설명 */}
-

협력업체 문서 리스트 관리

+

{t("vendorDocuments.title")}

- {/*

+

{projectType === "ship" - ? "삼성중공업 문서시스템으로부터 목록을 가져오고 문서 파일을 등록하여 삼성중공업으로 전달할 수 있습니다." - : "문서리스트와 이슈스테이지를 생성하고 관리할 수 있으며 문서 파일을 등록하여 삼성중공업으로 전달할 수 있습니다." + ? t("vendorDocuments.shipDescription") + : t("vendorDocuments.plantDescription") } -

*/} +

{/* 오른쪽: ProjectSwitcher */} diff --git a/components/documents/project-swicher.tsx b/components/documents/project-swicher.tsx index 5c70ea88..45300b56 100644 --- a/components/documents/project-swicher.tsx +++ b/components/documents/project-swicher.tsx @@ -1,7 +1,9 @@ "use client" import * as React from "react" +import { useParams } from "next/navigation" import { cn } from "@/lib/utils" +import { useTranslation } from "@/i18n/client" import { Select, SelectContent, @@ -54,6 +56,10 @@ export function ProjectSwitcher({ selectedContractId, onSelectContract, }: ProjectSwitcherProps) { + const params = useParams() + const lng = (params?.lng as string) || "ko" + const { t } = useTranslation(lng, "engineering") + // Select value = stringified contractId const selectValue = selectedContractId ? String(selectedContractId) : "" @@ -69,8 +75,8 @@ export function ProjectSwitcher({ return null }, [projects, selectedContractId]) - // Trigger Label => 계약 이름 or "Select a contract" - const triggerLabel = selectedContract?.contractName ?? "Select a contract" + // Trigger Label => 계약 이름 or placeholder + const triggerLabel = selectedContract?.contractName ?? t("vendorDocuments.projectSwitcher.selectContractPlaceholder") function handleValueChange(val: string) { const contractId = Number(val) @@ -98,9 +104,9 @@ export function ProjectSwitcher({ isCollapsed && "flex h-9 w-9 shrink-0 items-center justify-center p-0", "max-w-[300px] whitespace-nowrap overflow-hidden text-ellipsis" )} - aria-label="Select Contract" + aria-label={t("vendorDocuments.projectSwitcher.selectContract")} > - + {/* 실제 표시부분에도 ellipsis 처리. */} diff --git a/components/form-data/spreadJS-dialog copy 2.tsx b/components/form-data/spreadJS-dialog copy 2.tsx new file mode 100644 index 00000000..520362ff --- /dev/null +++ b/components/form-data/spreadJS-dialog copy 2.tsx @@ -0,0 +1,1002 @@ +"use client"; + +import * as React from "react"; +import dynamic from "next/dynamic"; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog"; +import { Button } from "@/components/ui/button"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { GenericData } from "./export-excel-form"; +import * as GC from "@mescius/spread-sheets"; +import { toast } from "sonner"; +import { updateFormDataInDB } from "@/lib/forms/services"; +import { Loader, Save, AlertTriangle } from "lucide-react"; +import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'; +import { DataTableColumnJSON, ColumnType } from "./form-data-table-columns"; + +// SpreadSheets를 동적으로 import (SSR 비활성화) +const SpreadSheets = dynamic( + () => import("@mescius/spread-sheets-react").then(mod => mod.SpreadSheets), + { + ssr: false, + loading: () => ( +
+ + Loading SpreadSheets... +
+ ) + } +); + +// 라이센스 키 설정을 클라이언트에서만 실행 +if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_SPREAD_LICENSE) { + GC.Spread.Sheets.LicenseKey = process.env.NEXT_PUBLIC_SPREAD_LICENSE; +} + +interface TemplateItem { + TMPL_ID: string; + NAME: string; + TMPL_TYPE: string; + SPR_LST_SETUP: { + ACT_SHEET: string; + HIDN_SHEETS: Array; + CONTENT?: string; + DATA_SHEETS: Array<{ + SHEET_NAME: string; + REG_TYPE_ID: string; + MAP_CELL_ATT: Array<{ + ATT_ID: string; + IN: string; + }>; + }>; + }; + GRD_LST_SETUP: { + REG_TYPE_ID: string; + SPR_ITM_IDS: Array; + ATTS: Array<{}>; + }; + SPR_ITM_LST_SETUP: { + ACT_SHEET: string; + HIDN_SHEETS: Array; + CONTENT?: string; + DATA_SHEETS: Array<{ + SHEET_NAME: string; + REG_TYPE_ID: string; + MAP_CELL_ATT: Array<{ + ATT_ID: string; + IN: string; + }>; + }>; + }; +} + +interface ValidationError { + cellAddress: string; + attId: string; + value: any; + expectedType: ColumnType; + message: string; +} + +interface CellMapping { + attId: string; + cellAddress: string; + isEditable: boolean; + dataRowIndex?: number; +} + +interface TemplateViewDialogProps { + isOpen: boolean; + onClose: () => void; + templateData: TemplateItem[] | any; + selectedRow?: GenericData; // SPREAD_ITEM용 + tableData?: GenericData[]; // SPREAD_LIST용 + formCode: string; + columnsJSON: DataTableColumnJSON[] + contractItemId: number; + editableFieldsMap?: Map; + onUpdateSuccess?: (updatedValues: Record | GenericData[]) => void; +} + +export function TemplateViewDialog({ + isOpen, + onClose, + templateData, + selectedRow, + tableData = [], + formCode, + contractItemId, + columnsJSON, + editableFieldsMap = new Map(), + onUpdateSuccess +}: TemplateViewDialogProps) { + const [hostStyle, setHostStyle] = React.useState({ + width: '100%', + height: '100%' + }); + + const [isPending, setIsPending] = React.useState(false); + const [hasChanges, setHasChanges] = React.useState(false); + const [currentSpread, setCurrentSpread] = React.useState(null); + const [cellMappings, setCellMappings] = React.useState([]); + const [isClient, setIsClient] = React.useState(false); + const [templateType, setTemplateType] = React.useState<'SPREAD_LIST' | 'SPREAD_ITEM' | null>(null); + const [validationErrors, setValidationErrors] = React.useState([]); + const [selectedTemplateId, setSelectedTemplateId] = React.useState(""); + const [availableTemplates, setAvailableTemplates] = React.useState([]); + + // 클라이언트 사이드에서만 렌더링되도록 보장 + React.useEffect(() => { + setIsClient(true); + }, []); + + // 사용 가능한 템플릿들을 필터링하고 설정 + React.useEffect(() => { + if (!templateData) return; + + let templates: TemplateItem[]; + if (Array.isArray(templateData)) { + templates = templateData as TemplateItem[]; + } else { + templates = [templateData as TemplateItem]; + } + + // CONTENT가 있는 템플릿들 필터링 + const validTemplates = templates.filter(template => { + const hasSpreadListContent = template.SPR_LST_SETUP?.CONTENT; + const hasSpreadItemContent = template.SPR_ITM_LST_SETUP?.CONTENT; + const isValidType = template.TMPL_TYPE === "SPREAD_LIST" || template.TMPL_TYPE === "SPREAD_ITEM"; + + return isValidType && (hasSpreadListContent || hasSpreadItemContent); + }); + + setAvailableTemplates(validTemplates); + + // 첫 번째 유효한 템플릿을 기본으로 선택 + if (validTemplates.length > 0 && !selectedTemplateId) { + setSelectedTemplateId(validTemplates[0].TMPL_ID); + setTemplateType(validTemplates[0].TMPL_TYPE as 'SPREAD_LIST' | 'SPREAD_ITEM'); + } + }, [templateData, selectedTemplateId]); + + // 선택된 템플릿 변경 처리 + const handleTemplateChange = (templateId: string) => { + const template = availableTemplates.find(t => t.TMPL_ID === templateId); + if (template) { + setSelectedTemplateId(templateId); + setTemplateType(template.TMPL_TYPE as 'SPREAD_LIST' | 'SPREAD_ITEM'); + setHasChanges(false); + setValidationErrors([]); + + // SpreadSheets 재초기화 + if (currentSpread) { + const template = availableTemplates.find(t => t.TMPL_ID === templateId); + if (template) { + initSpread(currentSpread, template); + } + } + } + }; + + // 현재 선택된 템플릿 가져오기 + const selectedTemplate = React.useMemo(() => { + return availableTemplates.find(t => t.TMPL_ID === selectedTemplateId); + }, [availableTemplates, selectedTemplateId]); + + // 편집 가능한 필드 목록 계산 + const editableFields = React.useMemo(() => { + // SPREAD_ITEM인 경우: selectedRow의 TAG_NO로 확인 + if (templateType === 'SPREAD_ITEM' && selectedRow?.TAG_NO) { + if (!editableFieldsMap.has(selectedRow.TAG_NO)) { + return []; + } + return editableFieldsMap.get(selectedRow.TAG_NO) || []; + } + + // SPREAD_LIST인 경우: 첫 번째 행의 TAG_NO를 기준으로 처리 + if (templateType === 'SPREAD_LIST' && tableData.length > 0) { + const firstRowTagNo = tableData[0]?.TAG_NO; + if (firstRowTagNo && editableFieldsMap.has(firstRowTagNo)) { + return editableFieldsMap.get(firstRowTagNo) || []; + } + } + + return []; + }, [templateType, selectedRow?.TAG_NO, tableData, editableFieldsMap]); + + // 필드가 편집 가능한지 판별하는 함수 + const isFieldEditable = React.useCallback((attId: string, rowData?: GenericData) => { + // columnsJSON에서 해당 attId의 shi 값 확인 + const columnConfig = columnsJSON.find(col => col.key === attId); + if (columnConfig?.shi === true) { + return false; // columnsJSON에서 shi가 true이면 편집 불가 + } + + // TAG_NO와 TAG_DESC는 기본적으로 편집 가능 (columnsJSON의 shi가 false인 경우) + if (attId === "TAG_NO" || attId === "TAG_DESC") { + return true; + } + + // SPREAD_ITEM인 경우: editableFields 체크 + if (templateType === 'SPREAD_ITEM') { + return editableFields.includes(attId); + } + + // SPREAD_LIST인 경우: 개별 행의 편집 가능성도 고려 + if (templateType === 'SPREAD_LIST') { + // 기본적으로 editableFields에 포함되어야 함 + if (!editableFields.includes(attId)) { + return false; + } + + // rowData가 제공된 경우 해당 행의 shi 상태도 확인 + if (rowData && rowData.shi === true) { + return false; + } + + return true; + } + + // 기본적으로는 editableFields 체크 + // return editableFields.includes(attId); + return true; + }, [templateType, columnsJSON, editableFields]); + + // 편집 가능한 필드 개수 계산 + const editableFieldsCount = React.useMemo(() => { + return cellMappings.filter(m => m.isEditable).length; + }, [cellMappings]); + + // 셀 주소를 행과 열로 변환하는 함수 + const parseCellAddress = (address: string): { row: number, col: number } | null => { + if (!address || address.trim() === "") return null; + + const match = address.match(/^([A-Z]+)(\d+)$/); + if (!match) return null; + + const [, colStr, rowStr] = match; + + let col = 0; + for (let i = 0; i < colStr.length; i++) { + col = col * 26 + (colStr.charCodeAt(i) - 65 + 1); + } + col -= 1; + + const row = parseInt(rowStr) - 1; + + return { row, col }; + }; + + // 데이터 타입 검증 함수 + const validateCellValue = (value: any, columnType: ColumnType, options?: string[]): string | null => { + if (value === undefined || value === null || value === "") { + return null; // 빈 값은 별도 required 검증에서 처리 + } + + switch (columnType) { + case "NUMBER": + if (isNaN(Number(value))) { + return "Value must be a valid number"; + } + break; + case "LIST": + if (options && !options.includes(String(value))) { + return `Value must be one of: ${options.join(", ")}`; + } + break; + case "STRING": + // STRING 타입은 대부분의 값을 허용 + break; + default: + // 커스텀 타입의 경우 추가 검증 로직이 필요할 수 있음 + break; + } + + return null; + }; + + // 전체 데이터 검증 함수 + const validateAllData = React.useCallback(() => { + if (!currentSpread || !selectedTemplate) return []; + + const activeSheet = currentSpread.getActiveSheet(); + const errors: ValidationError[] = []; + + cellMappings.forEach(mapping => { + const columnConfig = columnsJSON.find(col => col.key === mapping.attId); + if (!columnConfig) return; + + const cellPos = parseCellAddress(mapping.cellAddress); + if (!cellPos) return; + + if (templateType === 'SPREAD_ITEM') { + // 단일 행 검증 + const cellValue = activeSheet.getValue(cellPos.row, cellPos.col); + const errorMessage = validateCellValue(cellValue, columnConfig.type, columnConfig.options); + + if (errorMessage) { + errors.push({ + cellAddress: mapping.cellAddress, + attId: mapping.attId, + value: cellValue, + expectedType: columnConfig.type, + message: errorMessage + }); + } + } else if (templateType === 'SPREAD_LIST') { + // 복수 행 검증 - 각 매핑은 이미 개별 행을 가리킴 + const cellValue = activeSheet.getValue(cellPos.row, cellPos.col); + const errorMessage = validateCellValue(cellValue, columnConfig.type, columnConfig.options); + + if (errorMessage) { + errors.push({ + cellAddress: mapping.cellAddress, + attId: mapping.attId, + value: cellValue, + expectedType: columnConfig.type, + message: errorMessage + }); + } + } + }); + + setValidationErrors(errors); + return errors; + }, [currentSpread, selectedTemplate, cellMappings, columnsJSON, templateType]); + + // ═══════════════════════════════════════════════════════════════════════════════ + // 🛠️ 헬퍼 함수들 + // ═══════════════════════════════════════════════════════════════════════════════ + + // 🎨 셀 스타일 생성 + const createCellStyle = React.useCallback((isEditable: boolean) => { + const style = new GC.Spread.Sheets.Style(); + if (isEditable) { + style.backColor = "#f0fdf4"; // 연한 초록 (편집 가능) + } else { + style.backColor = "#f9fafb"; // 연한 회색 (읽기 전용) + style.foreColor = "#6b7280"; + } + return style; + }, []); + + +// 🎯 간소화된 드롭다운 설정 - setupSimpleValidation 완전 제거 + +const setupOptimizedListValidation = React.useCallback((activeSheet: any, cellPos: { row: number, col: number }, options: string[], rowCount: number) => { + try { + console.log(`🎯 Setting up dropdown for ${rowCount} rows with options:`, options); + + // ✅ options 정규화 + const safeOptions = options + .filter(opt => opt !== null && opt !== undefined && opt !== '') + .map(opt => String(opt).trim()) + .filter(opt => opt.length > 0) + .filter((opt, index, arr) => arr.indexOf(opt) === index) + .slice(0, 20); + + if (safeOptions.length === 0) { + console.warn(`⚠️ No valid options found, skipping`); + return; + } + + console.log(`📋 Safe options:`, safeOptions); + + // ✅ DataValidation용 문자열 준비 + const optionsString = safeOptions.join(','); + + // 🔑 핵심 수정: 각 셀마다 개별 ComboBox 인스턴스 생성! + for (let i = 0; i < rowCount; i++) { + try { + const targetRow = cellPos.row + i; + + // ✅ 각 셀마다 새로운 ComboBox 인스턴스 생성 + const comboBoxCellType = new GC.Spread.Sheets.CellTypes.ComboBox(); + comboBoxCellType.items(safeOptions); // 배열로 전달 + comboBoxCellType.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); + + // ✅ 각 셀마다 새로운 DataValidation 인스턴스 생성 + const cellValidator = GC.Spread.Sheets.DataValidation.createListValidator(optionsString); + + // ComboBox + DataValidation 둘 다 적용 + activeSheet.setCellType(targetRow, cellPos.col, comboBoxCellType); + activeSheet.setDataValidator(targetRow, cellPos.col, cellValidator); + + // 셀 잠금 해제 + const cell = activeSheet.getCell(targetRow, cellPos.col); + cell.locked(false); + + console.log(`✅ Individual dropdown applied to [${targetRow}, ${cellPos.col}]`); + + } catch (cellError) { + console.warn(`⚠️ Failed to apply to row ${cellPos.row + i}:`, cellError); + } + } + + console.log(`✅ Safe dropdown setup completed for ${rowCount} cells`); + + } catch (error) { + console.error('❌ Dropdown setup failed:', error); + } +}, []); + // 🚀 행 용량 확보 + const ensureRowCapacity = React.useCallback((activeSheet: any, requiredRowCount: number) => { + const currentRowCount = activeSheet.getRowCount(); + if (requiredRowCount > currentRowCount) { + activeSheet.setRowCount(requiredRowCount + 10); // 여유분 추가 + console.log(`📈 Expanded sheet to ${requiredRowCount + 10} rows`); + } + }, []); + + // 🛡️ 시트 보호 및 이벤트 설정 + const setupSheetProtectionAndEvents = React.useCallback((activeSheet: any, mappings: CellMapping[]) => { + console.log(`🛡️ Setting up protection and events for ${mappings.length} mappings`); + + // 시트 보호 설정 + activeSheet.options.isProtected = true; + activeSheet.options.protectionOptions = { + allowSelectLockedCells: true, + allowSelectUnlockedCells: true, + allowSort: false, + allowFilter: false, + allowEditObjects: false, + allowResizeRows: false, + allowResizeColumns: false + }; + + // 🎯 변경 감지 이벤트 + const changeEvents = [ + GC.Spread.Sheets.Events.CellChanged, + GC.Spread.Sheets.Events.ValueChanged, + GC.Spread.Sheets.Events.ClipboardPasted + ]; + + changeEvents.forEach(eventType => { + activeSheet.bind(eventType, () => { + console.log(`📝 ${eventType} detected`); + setHasChanges(true); + }); + }); + + // 🚫 편집 시작 권한 확인 (수정됨) + activeSheet.bind(GC.Spread.Sheets.Events.EditStarting, (event: any, info: any) => { + console.log(`🎯 EditStarting: Row ${info.row}, Col ${info.col}`); + + // ✅ 정확한 매핑 찾기 (행/열 정확히 일치) + const exactMapping = mappings.find(m => { + const cellPos = parseCellAddress(m.cellAddress); + return cellPos && cellPos.row === info.row && cellPos.col === info.col; + }); + + if (!exactMapping) { + console.log(`ℹ️ No mapping found for [${info.row}, ${info.col}] - allowing edit`); + return; // 매핑이 없으면 허용 (템플릿 영역 밖) + } + + console.log(`📋 Found mapping: ${exactMapping.attId} at ${exactMapping.cellAddress}`); + + // 기본 편집 권한 확인 + if (!exactMapping.isEditable) { + console.log(`🚫 Field ${exactMapping.attId} is not editable`); + toast.warning(`${exactMapping.attId} field is read-only`); + info.cancel = true; + return; + } + + // SPREAD_LIST 개별 행 SHI 확인 + if (templateType === 'SPREAD_LIST' && exactMapping.dataRowIndex !== undefined) { + const dataRowIndex = exactMapping.dataRowIndex; + + console.log(`🔍 Checking SHI for data row ${dataRowIndex}`); + + if (dataRowIndex >= 0 && dataRowIndex < tableData.length) { + const rowData = tableData[dataRowIndex]; + if (rowData?.shi === true) { + console.log(`🚫 Row ${dataRowIndex} is in SHI mode`); + toast.warning(`Row ${dataRowIndex + 1}: ${exactMapping.attId} field is read-only (SHI mode)`); + info.cancel = true; + return; + } + } else { + console.warn(`⚠️ Invalid dataRowIndex: ${dataRowIndex} (tableData.length: ${tableData.length})`); + } + } + + console.log(`✅ Edit allowed for ${exactMapping.attId}`); + }); + + // ✅ 편집 완료 검증 (수정됨) + activeSheet.bind(GC.Spread.Sheets.Events.EditEnded, (event: any, info: any) => { + console.log(`🏁 EditEnded: Row ${info.row}, Col ${info.col}`); + + // ✅ 정확한 매핑 찾기 + const exactMapping = mappings.find(m => { + const cellPos = parseCellAddress(m.cellAddress); + return cellPos && cellPos.row === info.row && cellPos.col === info.col; + }); + + if (!exactMapping) { + console.log(`ℹ️ No mapping found for [${info.row}, ${info.col}] - skipping validation`); + return; + } + + const columnConfig = columnsJSON.find(col => col.key === exactMapping.attId); + if (columnConfig) { + const cellValue = activeSheet.getValue(info.row, info.col); + console.log(`🔍 Validating ${exactMapping.attId}: "${cellValue}"`); + + const errorMessage = validateCellValue(cellValue, columnConfig.type, columnConfig.options); + const cell = activeSheet.getCell(info.row, info.col); + + if (errorMessage) { + console.log(`❌ Validation failed: ${errorMessage}`); + + // 🚨 에러 스타일 적용 (편집 가능 상태 유지) + const errorStyle = new GC.Spread.Sheets.Style(); + errorStyle.backColor = "#fef2f2"; + errorStyle.foreColor = "#dc2626"; + errorStyle.borderLeft = new GC.Spread.Sheets.LineBorder("#dc2626", GC.Spread.Sheets.LineStyle.thick); + errorStyle.borderRight = new GC.Spread.Sheets.LineBorder("#dc2626", GC.Spread.Sheets.LineStyle.thick); + errorStyle.borderTop = new GC.Spread.Sheets.LineBorder("#dc2626", GC.Spread.Sheets.LineStyle.thick); + errorStyle.borderBottom = new GC.Spread.Sheets.LineBorder("#dc2626", GC.Spread.Sheets.LineStyle.thick); + + activeSheet.setStyle(info.row, info.col, errorStyle); + cell.locked(!exactMapping.isEditable); + + toast.warning(`Invalid value in ${exactMapping.attId}: ${errorMessage}. Please correct the value.`, { duration: 5000 }); + } else { + console.log(`✅ Validation passed`); + + // ✅ 정상 스타일 복원 + const normalStyle = createCellStyle(exactMapping.isEditable); + activeSheet.setStyle(info.row, info.col, normalStyle); + cell.locked(!exactMapping.isEditable); + } + } + }); + + console.log(`🛡️ Protection and events configured for ${mappings.length} mappings`); + }, [templateType, tableData, createCellStyle, validateCellValue, columnsJSON]); + + // ═══════════════════════════════════════════════════════════════════════════════ + // 🏗️ 메인 SpreadSheets 초기화 함수 + // ═══════════════════════════════════════════════════════════════════════════════ + + const initSpread = React.useCallback((spread: any, template?: TemplateItem) => { + const workingTemplate = template || selectedTemplate; + if (!spread || !workingTemplate) return; + + try { + // 🔄 초기 설정 + setCurrentSpread(spread); + setHasChanges(false); + setValidationErrors([]); + + // 📋 템플릿 콘텐츠 및 데이터 시트 추출 + let contentJson = null; + let dataSheets = null; + + // SPR_LST_SETUP.CONTENT 우선 사용 + if (workingTemplate.SPR_LST_SETUP?.CONTENT) { + contentJson = workingTemplate.SPR_LST_SETUP.CONTENT; + dataSheets = workingTemplate.SPR_LST_SETUP.DATA_SHEETS; + console.log('✅ Using SPR_LST_SETUP.CONTENT for template:', workingTemplate.NAME); + } + // SPR_ITM_LST_SETUP.CONTENT 대안 사용 + else if (workingTemplate.SPR_ITM_LST_SETUP?.CONTENT) { + contentJson = workingTemplate.SPR_ITM_LST_SETUP.CONTENT; + dataSheets = workingTemplate.SPR_ITM_LST_SETUP.DATA_SHEETS; + console.log('✅ Using SPR_ITM_LST_SETUP.CONTENT for template:', workingTemplate.NAME); + } + + if (!contentJson) { + console.warn('❌ No CONTENT found in template:', workingTemplate.NAME); + return; + } + + // 🏗️ SpreadSheets 초기화 + const jsonData = typeof contentJson === 'string' ? JSON.parse(contentJson) : contentJson; + + // 성능을 위한 렌더링 일시 중단 + spread.suspendPaint(); + + try { + // 템플릿 구조 로드 + spread.fromJSON(jsonData); + const activeSheet = spread.getActiveSheet(); + + // 시트 보호 해제 (편집을 위해) + activeSheet.options.isProtected = false; + + // 📊 셀 매핑 및 데이터 처리 + if (dataSheets && dataSheets.length > 0) { + const mappings: CellMapping[] = []; + + // 🔄 각 데이터 시트의 매핑 정보 처리 + dataSheets.forEach(dataSheet => { + if (dataSheet.MAP_CELL_ATT) { + dataSheet.MAP_CELL_ATT.forEach(mapping => { + const { ATT_ID, IN } = mapping; + + if (IN && IN.trim() !== "") { + const cellPos = parseCellAddress(IN); + if (cellPos) { + const columnConfig = columnsJSON.find(col => col.key === ATT_ID); + + // 🎯 템플릿 타입별 데이터 처리 + if (templateType === 'SPREAD_ITEM' && selectedRow) { + // 📝 단일 행 처리 (SPREAD_ITEM) + const isEditable = isFieldEditable(ATT_ID); + + // 매핑 정보 저장 + mappings.push({ + attId: ATT_ID, + cellAddress: IN, + isEditable: isEditable, + dataRowIndex: 0 + }); + + const cell = activeSheet.getCell(cellPos.row, cellPos.col); + const value = selectedRow[ATT_ID]; + + // 값 설정 + cell.value(value ?? null); + + // 🎨 스타일 및 편집 권한 설정 + cell.locked(!isEditable); + const style = createCellStyle(isEditable); + activeSheet.setStyle(cellPos.row, cellPos.col, style); + + // 📋 LIST 타입 드롭다운 설정 + if (columnConfig?.type === "LIST" && columnConfig.options && isEditable) { + setupOptimizedListValidation(activeSheet, cellPos, columnConfig.options, 1); + } + + } else if (templateType === 'SPREAD_LIST' && tableData.length > 0) { + // 📊 복수 행 처리 (SPREAD_LIST) - 성능 최적화됨 + console.log(`🔄 Processing SPREAD_LIST for ${ATT_ID} with ${tableData.length} rows`); + + // 🚀 행 확장 (필요시) + ensureRowCapacity(activeSheet, cellPos.row + tableData.length); + + // 📋 각 행마다 개별 매핑 생성 + tableData.forEach((rowData, index) => { + const targetRow = cellPos.row + index; + const targetCellAddress = `${String.fromCharCode(65 + cellPos.col)}${targetRow + 1}`; + const cellEditable = isFieldEditable(ATT_ID, rowData); + + // 개별 매핑 추가 + mappings.push({ + attId: ATT_ID, + cellAddress: targetCellAddress, // 각 행마다 다른 주소 + isEditable: cellEditable, + dataRowIndex: index // 원본 데이터 인덱스 + }); + + console.log(`📝 Mapping ${ATT_ID} Row ${index}: ${targetCellAddress} (${cellEditable ? 'Editable' : 'ReadOnly'})`); + }); + + // 📋 LIST 타입 드롭다운 설정 (조건부) + if (columnConfig?.type === "LIST" && columnConfig.options) { + // 편집 가능한 행이 하나라도 있으면 드롭다운 설정 + const hasEditableRows = tableData.some((rowData) => isFieldEditable(ATT_ID, rowData)); + if (hasEditableRows) { + setupOptimizedListValidation(activeSheet, cellPos, columnConfig.options, tableData.length); + } + } + + // 🎨 개별 셀 데이터 및 스타일 설정 + tableData.forEach((rowData, index) => { + const targetRow = cellPos.row + index; + const cell = activeSheet.getCell(targetRow, cellPos.col); + const value = rowData[ATT_ID]; + + // 값 설정 + cell.value(value ?? null); + console.log(`📝 Row ${targetRow}: ${ATT_ID} = "${value}"`); + + // 편집 권한 및 스타일 설정 + const cellEditable = isFieldEditable(ATT_ID, rowData); + cell.locked(!cellEditable); + const style = createCellStyle(cellEditable); + activeSheet.setStyle(targetRow, cellPos.col, style); + }); + } + + console.log(`📌 Mapped ${ATT_ID} → ${IN} (${templateType})`); + } + } + }); + } + }); + + // 💾 매핑 정보 저장 및 이벤트 설정 + setCellMappings(mappings); + setupSheetProtectionAndEvents(activeSheet, mappings); + } + + } finally { + // 렌더링 재개 + spread.resumePaint(); + } + + } catch (error) { + console.error('❌ Error initializing spread:', error); + toast.error('Failed to load template'); + if (spread?.resumePaint) { + spread.resumePaint(); + } + } + }, [selectedTemplate, templateType, selectedRow, tableData, isFieldEditable, columnsJSON, createCellStyle, setupOptimizedListValidation, ensureRowCapacity, setupSheetProtectionAndEvents]); + + // 변경사항 저장 함수 + const handleSaveChanges = React.useCallback(async () => { + if (!currentSpread || !hasChanges) { + toast.info("No changes to save"); + return; + } + + // 저장 전 데이터 검증 + const errors = validateAllData(); + if (errors.length > 0) { + toast.error(`Cannot save: ${errors.length} validation errors found. Please fix them first.`); + return; + } + + try { + setIsPending(true); + + const activeSheet = currentSpread.getActiveSheet(); + + if (templateType === 'SPREAD_ITEM' && selectedRow) { + // 단일 행 저장 + const dataToSave = { ...selectedRow }; + + cellMappings.forEach(mapping => { + if (mapping.isEditable) { + const cellPos = parseCellAddress(mapping.cellAddress); + if (cellPos) { + const cellValue = activeSheet.getValue(cellPos.row, cellPos.col); + dataToSave[mapping.attId] = cellValue; + } + } + }); + + dataToSave.TAG_NO = selectedRow.TAG_NO; + + const { success, message } = await updateFormDataInDB( + formCode, + contractItemId, + dataToSave + ); + + if (!success) { + toast.error(message); + return; + } + + toast.success("Changes saved successfully!"); + onUpdateSuccess?.(dataToSave); + + } else if (templateType === 'SPREAD_LIST' && tableData.length > 0) { + // 복수 행 저장 + const updatedRows: GenericData[] = []; + let saveCount = 0; + + for (let i = 0; i < tableData.length; i++) { + const originalRow = tableData[i]; + const dataToSave = { ...originalRow }; + let hasRowChanges = false; + + // 각 매핑에 대해 해당 행의 값 확인 + cellMappings.forEach(mapping => { + if (mapping.dataRowIndex === i && mapping.isEditable) { + const columnConfig = columnsJSON.find(col => col.key === mapping.attId); + const isColumnEditable = columnConfig?.shi !== true; + const isRowEditable = originalRow.shi !== true; + + if (isColumnEditable && isRowEditable) { + const cellPos = parseCellAddress(mapping.cellAddress); + if (cellPos) { + const cellValue = activeSheet.getValue(cellPos.row, cellPos.col); + + // 값이 변경되었는지 확인 + if (cellValue !== originalRow[mapping.attId]) { + dataToSave[mapping.attId] = cellValue; + hasRowChanges = true; + } + } + } + } + }); + + // 변경사항이 있는 행만 저장 + if (hasRowChanges) { + dataToSave.TAG_NO = originalRow.TAG_NO; // TAG_NO는 절대 변경되지 않도록 + + const { success } = await updateFormDataInDB( + formCode, + contractItemId, + dataToSave + ); + + if (success) { + updatedRows.push(dataToSave); + saveCount++; + } + } else { + updatedRows.push(originalRow); // 변경사항이 없으면 원본 유지 + } + } + + if (saveCount > 0) { + toast.success(`${saveCount} rows saved successfully!`); + onUpdateSuccess?.(updatedRows); + } else { + toast.info("No changes to save"); + } + } + + setHasChanges(false); + setValidationErrors([]); + + } catch (error) { + console.error("Error saving changes:", error); + toast.error("An unexpected error occurred while saving"); + } finally { + setIsPending(false); + } + }, [currentSpread, hasChanges, templateType, selectedRow, tableData, formCode, contractItemId, onUpdateSuccess, cellMappings, columnsJSON, validateAllData]); + + if (!isOpen) return null; + + // 데이터 유효성 검사 + const isDataValid = templateType === 'SPREAD_ITEM' ? !!selectedRow : tableData.length > 0; + const dataCount = templateType === 'SPREAD_ITEM' ? 1 : tableData.length; + + return ( + + + + SEDP Template - {formCode} + +
+ {/* 템플릿 선택 */} + {availableTemplates.length > 1 && ( +
+ Template: + +
+ )} + + {/* 템플릿 정보 */} + {selectedTemplate && ( +
+ + Template Type: {selectedTemplate.TMPL_TYPE === 'SPREAD_LIST' ? 'List View (SPREAD_LIST)' : 'Item View (SPREAD_ITEM)'} + + {templateType === 'SPREAD_ITEM' && selectedRow && ( + • Selected TAG_NO: {selectedRow.TAG_NO || 'N/A'} + )} + {templateType === 'SPREAD_LIST' && ( + • {dataCount} rows + )} + {hasChanges && ( + + • Unsaved changes + + )} + {validationErrors.length > 0 && ( + + + {validationErrors.length} validation errors + + )} +
+ )} + + {/* 범례 */} +
+ + + Editable fields + + + + Read-only fields + + + + Validation errors + + {cellMappings.length > 0 && ( + + {editableFieldsCount} of {cellMappings.length} fields editable + + )} +
+
+ + + + {/* SpreadSheets 컴포넌트 영역 */} +
+ {selectedTemplate && isClient && isDataValid ? ( + + ) : ( +
+ {!isClient ? ( + <> + + Loading... + + ) : !selectedTemplate ? ( + "No template available" + ) : !isDataValid ? ( + `No ${templateType === 'SPREAD_ITEM' ? 'selected row' : 'data'} available` + ) : ( + "Template not ready" + )} +
+ )} +
+ + +
+ + + {hasChanges && ( + + )} + + {validationErrors.length > 0 && ( + + )} +
+ + + + ); +} \ No newline at end of file diff --git a/components/form-data/spreadJS-dialog copy 3.tsx b/components/form-data/spreadJS-dialog copy 3.tsx new file mode 100644 index 00000000..1ea8232b --- /dev/null +++ b/components/form-data/spreadJS-dialog copy 3.tsx @@ -0,0 +1,1916 @@ +"use client"; + +import * as React from "react"; +import dynamic from "next/dynamic"; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog"; +import { Button } from "@/components/ui/button"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { GenericData } from "./export-excel-form"; +import * as GC from "@mescius/spread-sheets"; +import { toast } from "sonner"; +import { updateFormDataInDB } from "@/lib/forms/services"; +import { Loader, Save, AlertTriangle } from "lucide-react"; +import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'; +import { DataTableColumnJSON, ColumnType } from "./form-data-table-columns"; + + +// SpreadSheets를 동적으로 import (SSR 비활성화) +const SpreadSheets = dynamic( + () => import("@mescius/spread-sheets-react").then(mod => mod.SpreadSheets), + { + ssr: false, + loading: () => ( +
+ + Loading SpreadSheets... +
+ ) + } +); + +// 라이센스 키 설정을 클라이언트에서만 실행 +if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_SPREAD_LICENSE) { + GC.Spread.Sheets.LicenseKey = process.env.NEXT_PUBLIC_SPREAD_LICENSE; +} + +interface TemplateItem { + TMPL_ID: string; + NAME: string; + TMPL_TYPE: string; + SPR_LST_SETUP: { + ACT_SHEET: string; + HIDN_SHEETS: Array; + CONTENT?: string; + DATA_SHEETS: Array<{ + SHEET_NAME: string; + REG_TYPE_ID: string; + MAP_CELL_ATT: Array<{ + ATT_ID: string; + IN: string; + }>; + }>; + }; + GRD_LST_SETUP: { + REG_TYPE_ID: string; + SPR_ITM_IDS: Array; + ATTS: Array<{}>; + }; + SPR_ITM_LST_SETUP: { + ACT_SHEET: string; + HIDN_SHEETS: Array; + CONTENT?: string; + DATA_SHEETS: Array<{ + SHEET_NAME: string; + REG_TYPE_ID: string; + MAP_CELL_ATT: Array<{ + ATT_ID: string; + IN: string; + }>; + }>; + }; +} + +interface ValidationError { + cellAddress: string; + attId: string; + value: any; + expectedType: ColumnType; + message: string; +} + +interface CellMapping { + attId: string; + cellAddress: string; + isEditable: boolean; + dataRowIndex?: number; +} + +interface TemplateViewDialogProps { + isOpen: boolean; + onClose: () => void; + templateData: TemplateItem[] | any; + selectedRow?: GenericData; // SPREAD_ITEM용 + tableData?: GenericData[]; // SPREAD_LIST용 + formCode: string; + columnsJSON: DataTableColumnJSON[] + contractItemId: number; + editableFieldsMap?: Map; + onUpdateSuccess?: (updatedValues: Record | GenericData[]) => void; +} + +export function TemplateViewDialog({ + isOpen, + onClose, + templateData, + selectedRow, + tableData = [], + formCode, + contractItemId, + columnsJSON, + editableFieldsMap = new Map(), + onUpdateSuccess +}: TemplateViewDialogProps) { + const [hostStyle, setHostStyle] = React.useState({ + width: '100%', + height: '100%' + }); + + const [isPending, setIsPending] = React.useState(false); + const [hasChanges, setHasChanges] = React.useState(false); + const [currentSpread, setCurrentSpread] = React.useState(null); + const [cellMappings, setCellMappings] = React.useState([]); + const [isClient, setIsClient] = React.useState(false); + const [templateType, setTemplateType] = React.useState<'SPREAD_LIST' | 'SPREAD_ITEM' | 'GRD_LIST' | null>(null); + const [validationErrors, setValidationErrors] = React.useState([]); + const [selectedTemplateId, setSelectedTemplateId] = React.useState(""); + const [availableTemplates, setAvailableTemplates] = React.useState([]); + + const determineTemplateType = React.useCallback((template: TemplateItem): 'SPREAD_LIST' | 'SPREAD_ITEM' | 'GRD_LIST' | null => { + // 1. SPREAD_LIST: TMPL_TYPE이 SPREAD_LIST이고 SPR_LST_SETUP.CONTENT가 있음 + if (template.TMPL_TYPE === "SPREAD_LIST" && (template.SPR_LST_SETUP?.CONTENT || template.SPR_ITM_LST_SETUP?.CONTENT)) { + return 'SPREAD_LIST'; + } + + // 2. SPREAD_ITEM: TMPL_TYPE이 SPREAD_ITEM이고 SPR_ITM_LST_SETUP.CONTENT가 있음 + if (template.TMPL_TYPE === "SPREAD_ITEM" && (template.SPR_LST_SETUP?.CONTENT || template.SPR_ITM_LST_SETUP?.CONTENT)) { + return 'SPREAD_ITEM'; + } + + // 3. GRD_LIST: GRD_LST_SETUP이 있고 columnsJSON이 있음 (동적 테이블) + if (template.GRD_LST_SETUP && columnsJSON.length > 0) { + return 'GRD_LIST'; + } + + return null; // 유효하지 않은 템플릿 + }, [columnsJSON]); + + const isValidTemplate = React.useCallback((template: TemplateItem): boolean => { + return determineTemplateType(template) !== null; + }, [determineTemplateType]); + + + // 클라이언트 사이드에서만 렌더링되도록 보장 + React.useEffect(() => { + setIsClient(true); + }, []); + + // 사용 가능한 템플릿들을 필터링하고 설정 + React.useEffect(() => { + if (!templateData) return; + + let templates: TemplateItem[]; + if (Array.isArray(templateData)) { + templates = templateData as TemplateItem[]; + } else { + templates = [templateData as TemplateItem]; + } + + // 유효한 템플릿들만 필터링 + const validTemplates = templates.filter(isValidTemplate); + + setAvailableTemplates(validTemplates); + + // 첫 번째 유효한 템플릿을 기본으로 선택 + if (validTemplates.length > 0 && !selectedTemplateId) { + const firstTemplate = validTemplates[0]; + const templateTypeToSet = determineTemplateType(firstTemplate); + + setSelectedTemplateId(firstTemplate.TMPL_ID); + setTemplateType(templateTypeToSet); + } + }, [templateData, selectedTemplateId, isValidTemplate, determineTemplateType]); + + + // 선택된 템플릿 변경 처리 + const handleTemplateChange = (templateId: string) => { + const template = availableTemplates.find(t => t.TMPL_ID === templateId); + if (template) { + const templateTypeToSet = determineTemplateType(template); + + setSelectedTemplateId(templateId); + setTemplateType(templateTypeToSet); + setHasChanges(false); + setValidationErrors([]); + + // SpreadSheets 재초기화 + if (currentSpread && template) { + initSpread(currentSpread, template); + } + } + }; + // 현재 선택된 템플릿 가져오기 + const selectedTemplate = React.useMemo(() => { + return availableTemplates.find(t => t.TMPL_ID === selectedTemplateId); + }, [availableTemplates, selectedTemplateId]); + + + // 편집 가능한 필드 목록 계산 + const editableFields = React.useMemo(() => { + // SPREAD_ITEM인 경우: selectedRow의 TAG_NO로 확인 + if (templateType === 'SPREAD_ITEM' && selectedRow?.TAG_NO) { + if (!editableFieldsMap.has(selectedRow.TAG_NO)) { + return []; + } + return editableFieldsMap.get(selectedRow.TAG_NO) || []; + } + + // SPREAD_LIST 또는 GRD_LIST인 경우: 첫 번째 행의 TAG_NO를 기준으로 처리 + if ((templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') && tableData.length > 0) { + const firstRowTagNo = tableData[0]?.TAG_NO; + if (firstRowTagNo && editableFieldsMap.has(firstRowTagNo)) { + return editableFieldsMap.get(firstRowTagNo) || []; + } + } + + return []; + }, [templateType, selectedRow?.TAG_NO, tableData, editableFieldsMap]); + + // 필드가 편집 가능한지 판별하는 함수 + const isFieldEditable = React.useCallback((attId: string, rowData?: GenericData) => { + // columnsJSON에서 해당 attId의 shi 값 확인 + const columnConfig = columnsJSON.find(col => col.key === attId); + if (columnConfig?.shi === true) { + return false; // columnsJSON에서 shi가 true이면 편집 불가 + } + + // TAG_NO와 TAG_DESC는 기본적으로 편집 가능 (columnsJSON의 shi가 false인 경우) + if (attId === "TAG_NO" || attId === "TAG_DESC") { + return false; + } + + if (attId === "status") { + return false; + } + + // SPREAD_ITEM인 경우: editableFields 체크 + // if (templateType === 'SPREAD_ITEM') { + // return editableFields.includes(attId); + // } + + // SPREAD_LIST 또는 GRD_LIST인 경우: 개별 행의 편집 가능성도 고려 + if (templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') { + // 기본적으로 editableFields에 포함되어야 함 + // if (!editableFields.includes(attId)) { + // return false; + // } + + // rowData가 제공된 경우 해당 행의 shi 상태도 확인 + if (rowData && rowData.shi === true) { + return false; + } + + return true; + } + + return true; + }, [templateType, columnsJSON, editableFields]); + + // 편집 가능한 필드 개수 계산 + const editableFieldsCount = React.useMemo(() => { + return cellMappings.filter(m => m.isEditable).length; + }, [cellMappings]); + + // 셀 주소를 행과 열로 변환하는 함수 + const parseCellAddress = (address: string): { row: number, col: number } | null => { + if (!address || address.trim() === "") return null; + + const match = address.match(/^([A-Z]+)(\d+)$/); + if (!match) return null; + + const [, colStr, rowStr] = match; + + let col = 0; + for (let i = 0; i < colStr.length; i++) { + col = col * 26 + (colStr.charCodeAt(i) - 65 + 1); + } + col -= 1; + + const row = parseInt(rowStr) - 1; + + return { row, col }; + }; + + // 행과 열을 셀 주소로 변환하는 함수 (GRD_LIST용) + const getCellAddress = (row: number, col: number): string => { + let colStr = ''; + let colNum = col; + while (colNum >= 0) { + colStr = String.fromCharCode((colNum % 26) + 65) + colStr; + colNum = Math.floor(colNum / 26) - 1; + } + return colStr + (row + 1); + }; + + // 데이터 타입 검증 함수 + const validateCellValue = (value: any, columnType: ColumnType, options?: string[]): string | null => { + if (value === undefined || value === null || value === "") { + return null; // 빈 값은 별도 required 검증에서 처리 + } + + switch (columnType) { + case "NUMBER": + if (isNaN(Number(value))) { + return "Value must be a valid number"; + } + break; + case "LIST": + if (options && !options.includes(String(value))) { + return `Value must be one of: ${options.join(", ")}`; + } + break; + case "STRING": + // STRING 타입은 대부분의 값을 허용 + break; + default: + // 커스텀 타입의 경우 추가 검증 로직이 필요할 수 있음 + break; + } + + return null; + }; + + // 전체 데이터 검증 함수 + const validateAllData = React.useCallback(() => { + if (!currentSpread || !selectedTemplate) return []; + + const activeSheet = currentSpread.getActiveSheet(); + const errors: ValidationError[] = []; + + cellMappings.forEach(mapping => { + const columnConfig = columnsJSON.find(col => col.key === mapping.attId); + if (!columnConfig) return; + + const cellPos = parseCellAddress(mapping.cellAddress); + if (!cellPos) return; + + if (templateType === 'SPREAD_ITEM') { + // 단일 행 검증 + const cellValue = activeSheet.getValue(cellPos.row, cellPos.col); + const errorMessage = validateCellValue(cellValue, columnConfig.type, columnConfig.options); + + if (errorMessage) { + errors.push({ + cellAddress: mapping.cellAddress, + attId: mapping.attId, + value: cellValue, + expectedType: columnConfig.type, + message: errorMessage + }); + } + } else if (templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') { + // 복수 행 검증 - 각 매핑은 이미 개별 행을 가리킴 + const cellValue = activeSheet.getValue(cellPos.row, cellPos.col); + const errorMessage = validateCellValue(cellValue, columnConfig.type, columnConfig.options); + + if (errorMessage) { + errors.push({ + cellAddress: mapping.cellAddress, + attId: mapping.attId, + value: cellValue, + expectedType: columnConfig.type, + message: errorMessage + }); + } + } + }); + + setValidationErrors(errors); + return errors; + }, [currentSpread, selectedTemplate, cellMappings, columnsJSON, templateType]); + + // ═══════════════════════════════════════════════════════════════════════════════ + // 🛠️ 헬퍼 함수들 + // ═══════════════════════════════════════════════════════════════════════════════ + + // 🎨 셀 스타일 생성 + const createCellStyle = React.useCallback((isEditable: boolean) => { + const style = new GC.Spread.Sheets.Style(); + if (isEditable) { + style.backColor = "#f0fdf4"; // 연한 초록 (편집 가능) + } else { + style.backColor = "#f9fafb"; // 연한 회색 (읽기 전용) + style.foreColor = "#6b7280"; + } + return style; + }, []); + + // 🎯 드롭다운 설정 + const setupOptimizedListValidation = React.useCallback((activeSheet: any, cellPos: { row: number, col: number }, options: string[], rowCount: number) => { + try { + console.log(`🎯 Setting up dropdown for ${rowCount} rows with options:`, options); + + // ✅ options 정규화 + const safeOptions = options + .filter(opt => opt !== null && opt !== undefined && opt !== '') + .map(opt => String(opt).trim()) + .filter(opt => opt.length > 0) + .filter((opt, index, arr) => arr.indexOf(opt) === index) + .slice(0, 20); + + if (safeOptions.length === 0) { + console.warn(`⚠️ No valid options found, skipping`); + return; + } + + console.log(`📋 Safe options:`, safeOptions); + + // ✅ DataValidation용 문자열 준비 + const optionsString = safeOptions.join(','); + + // 🔑 핵심 수정: 각 셀마다 개별 ComboBox 인스턴스 생성! + for (let i = 0; i < rowCount; i++) { + try { + const targetRow = cellPos.row + i; + + // ✅ 각 셀마다 새로운 ComboBox 인스턴스 생성 + const comboBoxCellType = new GC.Spread.Sheets.CellTypes.ComboBox(); + comboBoxCellType.items(safeOptions); // 배열로 전달 + comboBoxCellType.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); + + // ✅ 각 셀마다 새로운 DataValidation 인스턴스 생성 + const cellValidator = GC.Spread.Sheets.DataValidation.createListValidator(optionsString); + + // ComboBox + DataValidation 둘 다 적용 + activeSheet.setCellType(targetRow, cellPos.col, comboBoxCellType); + activeSheet.setDataValidator(targetRow, cellPos.col, cellValidator); + + // 셀 잠금 해제 + const cell = activeSheet.getCell(targetRow, cellPos.col); + cell.locked(false); + + console.log(`✅ Individual dropdown applied to [${targetRow}, ${cellPos.col}]`); + + } catch (cellError) { + console.warn(`⚠️ Failed to apply to row ${cellPos.row + i}:`, cellError); + } + } + + console.log(`✅ Safe dropdown setup completed for ${rowCount} cells`); + + } catch (error) { + console.error('❌ Dropdown setup failed:', error); + } + }, []); + + // 🛡️ 안전한 시트 검증 함수 추가 +const validateActiveSheet = React.useCallback((activeSheet: any, functionName: string = 'unknown') => { + console.log(`🔍 Validating activeSheet for ${functionName}:`); + + if (!activeSheet) { + console.error(`❌ activeSheet is null/undefined in ${functionName}`); + return false; + } + + console.log(`✅ activeSheet exists (type: ${typeof activeSheet})`); + console.log(`✅ constructor: ${activeSheet.constructor?.name}`); + + // 핵심 메서드들 존재 여부 확인 + const requiredMethods = ['getRowCount', 'getColumnCount', 'setRowCount', 'setColumnCount', 'getCell', 'getValue', 'setStyle']; + const missingMethods = requiredMethods.filter(method => typeof activeSheet[method] !== 'function'); + + if (missingMethods.length > 0) { + console.error(`❌ Missing methods in ${functionName}:`, missingMethods); + console.log(`📋 Available methods:`, Object.getOwnPropertyNames(activeSheet).filter(prop => typeof activeSheet[prop] === 'function').slice(0, 20)); + return false; + } + + console.log(`✅ All required methods available for ${functionName}`); + return true; +}, []); +// 🛡️ 안전한 ActiveSheet 가져오기 함수 +const getSafeActiveSheet = React.useCallback((spread: any, functionName: string = 'unknown') => { + console.log(`🔍 Getting safe activeSheet for ${functionName}`); + + if (!spread) { + console.error(`❌ Spread is null/undefined in ${functionName}`); + return null; + } + + try { + // 현재 활성 시트 가져오기 + let activeSheet = spread.getActiveSheet(); + + if (!activeSheet) { + console.warn(`⚠️ ActiveSheet is null, attempting to get first sheet in ${functionName}`); + + // 첫 번째 시트 시도 + const sheetCount = spread.getSheetCount(); + console.log(`📊 Total sheets: ${sheetCount}`); + + if (sheetCount > 0) { + activeSheet = spread.getSheet(0); + if (activeSheet) { + spread.setActiveSheetIndex(0); + console.log(`✅ Successfully got first sheet in ${functionName}`); + } + } + } + + if (!activeSheet) { + console.error(`❌ Failed to get any valid sheet in ${functionName}`); + return null; + } + + // 시트 유효성 검증 + const validation = validateActiveSheet(activeSheet, functionName); + if (!validation) { + console.error(`❌ Sheet validation failed in ${functionName}`); + return null; + } + + console.log(`✅ Got valid activeSheet for ${functionName}: ${activeSheet.name?.() || 'unnamed'}`); + return activeSheet; + + } catch (error) { + console.error(`❌ Error getting activeSheet in ${functionName}:`, error); + return null; + } +}, [validateActiveSheet]); + +// 🛡️ 수정된 ensureRowCapacity 함수 +const ensureRowCapacity = React.useCallback((activeSheet: any, requiredRowCount: number) => { + try { + // 🔍 상세한 null/undefined 체크 + if (!activeSheet) { + console.error('❌ activeSheet is null/undefined in ensureRowCapacity'); + return false; + } + + console.log('🔍 ActiveSheet validation in ensureRowCapacity:'); + console.log(' - Type:', typeof activeSheet); + console.log(' - Constructor:', activeSheet.constructor?.name); + console.log(' - Is null:', activeSheet === null); + console.log(' - Is undefined:', activeSheet === undefined); + + // 🔍 메서드 존재 여부 확인 + if (typeof activeSheet.getRowCount !== 'function') { + console.error('❌ getRowCount method does not exist on activeSheet'); + console.log('📋 Available properties:', Object.getOwnPropertyNames(activeSheet).slice(0, 20)); + return false; + } + + // 🔍 시트 상태 확인 + const currentRowCount = activeSheet.getRowCount(); + console.log(`📊 Current row count: ${currentRowCount} (type: ${typeof currentRowCount})`); + + if (typeof currentRowCount !== 'number' || isNaN(currentRowCount)) { + console.error('❌ getRowCount returned invalid value:', currentRowCount); + return false; + } + + if (requiredRowCount > currentRowCount) { + // 🔍 setRowCount 메서드 확인 + if (typeof activeSheet.setRowCount !== 'function') { + console.error('❌ setRowCount method does not exist on activeSheet'); + return false; + } + + const newRowCount = requiredRowCount + 10; + activeSheet.setRowCount(newRowCount); + console.log(`📈 Expanded sheet: ${currentRowCount} → ${newRowCount} rows`); + + // 🔍 설정 후 검증 + const verifyRowCount = activeSheet.getRowCount(); + console.log(`✅ Verified new row count: ${verifyRowCount}`); + + return true; + } else { + console.log(`✅ Sheet already has sufficient rows: ${currentRowCount} >= ${requiredRowCount}`); + return true; + } + + } catch (error) { + console.error('❌ Error in ensureRowCapacity:', error); + console.error('❌ Error stack:', error.stack); + return false; + } +}, []); + +// 🛡️ 안전한 컬럼 용량 확보 함수 +const ensureColumnCapacity = React.useCallback((activeSheet: any, requiredColumnCount: number) => { + try { + // 🔍 상세한 null/undefined 체크 + if (!activeSheet) { + console.error('❌ activeSheet is null/undefined in ensureColumnCapacity'); + return false; + } + + console.log('🔍 ActiveSheet validation in ensureColumnCapacity:'); + console.log(' - Type:', typeof activeSheet); + console.log(' - Constructor:', activeSheet.constructor?.name); + console.log(' - Is null:', activeSheet === null); + console.log(' - Is undefined:', activeSheet === undefined); + + // 🔍 메서드 존재 여부 확인 + if (typeof activeSheet.getColumnCount !== 'function') { + console.error('❌ getColumnCount method does not exist on activeSheet'); + console.log('📋 Available properties:', Object.getOwnPropertyNames(activeSheet).slice(0, 20)); + return false; + } + + const currentColumnCount = activeSheet.getColumnCount(); + console.log(`📊 Current column count: ${currentColumnCount} (type: ${typeof currentColumnCount})`); + + if (typeof currentColumnCount !== 'number' || isNaN(currentColumnCount)) { + console.error('❌ getColumnCount returned invalid value:', currentColumnCount); + return false; + } + + if (requiredColumnCount > currentColumnCount) { + if (typeof activeSheet.setColumnCount !== 'function') { + console.error('❌ setColumnCount method does not exist on activeSheet'); + return false; + } + + const newColumnCount = requiredColumnCount + 10; + activeSheet.setColumnCount(newColumnCount); + console.log(`📈 Expanded columns: ${currentColumnCount} → ${newColumnCount}`); + + // 🔍 설정 후 검증 + const verifyColumnCount = activeSheet.getColumnCount(); + console.log(`✅ Verified new column count: ${verifyColumnCount}`); + + return true; + } else { + console.log(`✅ Sheet already has sufficient columns: ${currentColumnCount} >= ${requiredColumnCount}`); + return true; + } + + } catch (error) { + console.error('❌ Error in ensureColumnCapacity:', error); + console.error('❌ Error stack:', error.stack); + return false; + } +}, []); + + +// 🎯 텍스트 너비 계산 함수들 (createGrdListTable 함수 위에 추가) +const measureTextWidth = React.useCallback((text: string, fontSize: number = 12, fontFamily: string = 'Arial'): number => { + // Canvas를 사용한 정확한 텍스트 너비 측정 + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + if (!context) return text.length * 8; // fallback + + context.font = `${fontSize}px ${fontFamily}`; + const metrics = context.measureText(text || ''); + return Math.ceil(metrics.width); +}, []); + +const calculateColumnWidth = React.useCallback(( + headerText: string, + dataValues: any[] = [], + minWidth: number = 80, + maxWidth: number = 300, + padding: number = 20 +): number => { + // 헤더 텍스트 너비 계산 + const headerWidth = measureTextWidth(headerText, 12, 'Arial'); + + // 데이터 값들의 최대 너비 계산 + let maxDataWidth = 0; + if (dataValues.length > 0) { + maxDataWidth = Math.max( + ...dataValues + .slice(0, 10) // 성능을 위해 처음 10개만 샘플링 + .map(value => measureTextWidth(String(value || ''), 11, 'Arial')) + ); + } + + // 헤더와 데이터 중 더 큰 너비 + 패딩 적용 + const calculatedWidth = Math.max(headerWidth, maxDataWidth) + padding; + + // 최소/최대 너비 제한 적용 + return Math.min(Math.max(calculatedWidth, minWidth), maxWidth); +}, [measureTextWidth]); + +const setOptimalColumnWidths = React.useCallback((activeSheet: any, columns: any[], startCol: number, tableData: any[]) => { + console.log('🎨 Setting optimal column widths...'); + + columns.forEach((column, colIndex) => { + const targetCol = startCol + colIndex; + + // 해당 컬럼의 데이터 값들 추출 + const dataValues = tableData.map(row => row[column.key]).filter(val => val != null); + + // 최적 너비 계산 + const optimalWidth = calculateColumnWidth( + column.label || column.key, + dataValues, + column.type === 'NUMBER' ? 100 : 80, // 숫자는 좀 더 넓게 + column.type === 'STRING' ? 250 : 200, // 문자열은 더 넓게 + column.type === 'LIST' ? 30 : 20 // 드롭다운은 여유 패딩 + ); + + // 컬럼 너비 설정 + activeSheet.setColumnWidth(targetCol, optimalWidth); + + console.log(`📏 Column ${targetCol} (${column.key}): width set to ${optimalWidth}px`); + }); +}, [calculateColumnWidth]); + + // 🔍 컬럼 그룹 분석 함수 + const analyzeColumnGroups = React.useCallback((columns: DataTableColumnJSON[]) => { + const groups: Array<{ + head: string; + isGroup: boolean; + columns: DataTableColumnJSON[]; + }> = []; + + let i = 0; + while (i < columns.length) { + const currentCol = columns[i]; + + // head가 없거나 빈 문자열인 경우 단일 컬럼으로 처리 + if (!currentCol.head || !currentCol.head.trim()) { + groups.push({ + head: '', + isGroup: false, + columns: [currentCol] + }); + i++; + continue; + } + + // 같은 head를 가진 연속된 컬럼들을 찾기 + const groupHead = currentCol.head.trim(); + const groupColumns: DataTableColumnJSON[] = [currentCol]; + let j = i + 1; + + while (j < columns.length && columns[j].head && columns[j].head.trim() === groupHead) { + groupColumns.push(columns[j]); + j++; + } + + // 그룹 추가 + groups.push({ + head: groupHead, + isGroup: groupColumns.length > 1, + columns: groupColumns + }); + + i = j; // 다음 그룹으로 이동 + } + + return { groups }; + }, []); + + +// 🆕 수정된 createGrdListTable 함수 +// 🆕 개선된 GRD_LIST용 동적 테이블 생성 함수 +const createGrdListTable = React.useCallback((activeSheet: any, template: TemplateItem) => { + console.log('🏗️ Creating GRD_LIST table'); + + // columnsJSON의 visible 컬럼들을 seq 순서로 정렬하여 사용 + const visibleColumns = columnsJSON + .filter(col => col.hidden !== true) + .sort((a, b) => { + const seqA = a.seq !== undefined ? a.seq : 999999; + const seqB = b.seq !== undefined ? b.seq : 999999; + return seqA - seqB; + }); + + console.log('📊 Using columns:', visibleColumns.map(c => `${c.key}(seq:${c.seq})`)); + console.log(`📊 Total visible columns: ${visibleColumns.length}`); + + if (visibleColumns.length === 0) { + console.warn('❌ No visible columns found in columnsJSON'); + return []; + } + + // ⭐ 컬럼 용량 확보 + const startCol = 1; + const requiredColumnCount = startCol + visibleColumns.length; + ensureColumnCapacity(activeSheet, requiredColumnCount); + + // 테이블 생성 시작 + const mappings: CellMapping[] = []; + + // 🔍 그룹 헤더 분석 + const groupInfo = analyzeColumnGroups(visibleColumns); + const hasGroups = groupInfo.groups.length > 0; + + // 헤더 행 계산: 그룹이 있으면 2행, 없으면 1행 + const groupHeaderRow = 0; + const columnHeaderRow = hasGroups ? 1 : 0; + const dataStartRow = hasGroups ? 2 : 1; + + // 🎨 헤더 스타일 생성 + const groupHeaderStyle = new GC.Spread.Sheets.Style(); + groupHeaderStyle.backColor = "#1e40af"; + groupHeaderStyle.foreColor = "#ffffff"; + groupHeaderStyle.font = "bold 13px Arial"; + groupHeaderStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; + groupHeaderStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center; + + const columnHeaderStyle = new GC.Spread.Sheets.Style(); + columnHeaderStyle.backColor = "#3b82f6"; + columnHeaderStyle.foreColor = "#ffffff"; + columnHeaderStyle.font = "bold 12px Arial"; + columnHeaderStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; + columnHeaderStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center; + + let currentCol = startCol; + + // 🏗️ 그룹 헤더 및 컬럼 헤더 생성 + if (hasGroups) { + // 그룹 헤더가 있는 경우 + groupInfo.groups.forEach(group => { + if (group.isGroup) { + // 그룹 헤더 생성 및 병합 + const groupStartCol = currentCol; + const groupEndCol = currentCol + group.columns.length - 1; + + // 그룹 헤더 셀 설정 + const groupHeaderCell = activeSheet.getCell(groupHeaderRow, groupStartCol); + groupHeaderCell.value(group.head); + + // 그룹 헤더 병합 + if (group.columns.length > 1) { + activeSheet.addSpan(groupHeaderRow, groupStartCol, 1, group.columns.length); + } + + // 그룹 헤더 스타일 적용 + for (let col = groupStartCol; col <= groupEndCol; col++) { + activeSheet.setStyle(groupHeaderRow, col, groupHeaderStyle); + activeSheet.getCell(groupHeaderRow, col).locked(true); + } + + console.log(`📝 Group Header [${groupHeaderRow}, ${groupStartCol}-${groupEndCol}]: ${group.head}`); + + // 그룹 내 개별 컬럼 헤더 생성 + group.columns.forEach((column, index) => { + const colIndex = groupStartCol + index; + const columnHeaderCell = activeSheet.getCell(columnHeaderRow, colIndex); + columnHeaderCell.value(column.label); + activeSheet.setStyle(columnHeaderRow, colIndex, columnHeaderStyle); + columnHeaderCell.locked(true); + + console.log(`📝 Column Header [${columnHeaderRow}, ${colIndex}]: ${column.label}`); + }); + + currentCol += group.columns.length; + } else { + // 그룹이 아닌 단일 컬럼 + const column = group.columns[0]; + + // 그룹 헤더 행에는 빈 셀 + const groupHeaderCell = activeSheet.getCell(groupHeaderRow, currentCol); + groupHeaderCell.value(""); + activeSheet.setStyle(groupHeaderRow, currentCol, groupHeaderStyle); + groupHeaderCell.locked(true); + + // 컬럼 헤더 생성 + const columnHeaderCell = activeSheet.getCell(columnHeaderRow, currentCol); + columnHeaderCell.value(column.label); + activeSheet.setStyle(columnHeaderRow, currentCol, columnHeaderStyle); + columnHeaderCell.locked(true); + + console.log(`📝 Single Column [${columnHeaderRow}, ${currentCol}]: ${column.label}`); + currentCol++; + } + }); + } else { + // 그룹이 없는 경우 + visibleColumns.forEach((column, colIndex) => { + const targetCol = startCol + colIndex; + const columnConfig = columnsJSON.find(col => col.key === column.key); + + // 📋 각 행마다 개별 셀 설정 + tableData.forEach((rowData, rowIndex) => { + const targetRow = dataStartRow + rowIndex; + const cell = activeSheet.getCell(targetRow, targetCol); + const value = rowData[column.key]; + const cellEditable = isFieldEditable(column.key, rowData); + + // 🔧 새로 추가: 셀 타입 및 편집기 설정 + if (columnConfig) { + setupCellTypeAndEditor(activeSheet, { row: targetRow, col: targetCol }, columnConfig, cellEditable, 1); + } + + // 값 설정 + cell.value(value ?? null); + + // 스타일 설정 + const style = createCellStyle(cellEditable); + activeSheet.setStyle(targetRow, targetCol, style); + + // 개별 매핑 추가 + mappings.push({ + attId: column.key, + cellAddress: getCellAddress(targetRow, targetCol), + isEditable: cellEditable, + dataRowIndex: rowIndex + }); + }); + }); + } + + // 🔄 데이터 행 및 매핑 생성 (SPREAD_LIST 방식과 동일한 로직) + const dataRowCount = tableData.length; + ensureRowCapacity(activeSheet, dataStartRow + dataRowCount); + + // 📋 각 컬럼별로 매핑 생성 (SPREAD_LIST와 동일한 방식) + visibleColumns.forEach((column, colIndex) => { + const targetCol = startCol + colIndex; + + console.log(`🔄 Processing column ${column.key} with ${dataRowCount} rows`); + + // 📋 각 행마다 개별 매핑 생성 (SPREAD_LIST와 동일) + tableData.forEach((rowData, rowIndex) => { + const targetRow = dataStartRow + rowIndex; + const cellAddress = getCellAddress(targetRow, targetCol); + + // 🛡️ readonly 체크 (SPREAD_LIST와 동일한 로직) + const cellEditable = isFieldEditable(column.key, rowData); + + // 개별 매핑 추가 + mappings.push({ + attId: column.key, + cellAddress: cellAddress, + isEditable: cellEditable, + dataRowIndex: rowIndex + }); + + console.log(`📝 Mapping ${column.key} Row ${rowIndex}: ${cellAddress} (${cellEditable ? 'Editable' : 'ReadOnly'})`); + }); + + // 📋 LIST 타입 드롭다운 설정 (편집 가능한 행이 있는 경우만) + if (column.type === "LIST" && column.options) { + const hasEditableRows = tableData.some((rowData) => isFieldEditable(column.key, rowData)); + if (hasEditableRows) { + const cellPos = { row: dataStartRow, col: targetCol }; + setupOptimizedListValidation(activeSheet, cellPos, column.options, dataRowCount); + console.log(`📋 Dropdown set for ${column.key}: ${hasEditableRows ? 'Has editable rows' : 'All readonly'}`); + } + } + }); + + // 🎨 개별 셀 데이터 및 스타일 설정 (SPREAD_LIST와 동일한 방식) + tableData.forEach((rowData, rowIndex) => { + const targetRow = dataStartRow + rowIndex; + + visibleColumns.forEach((column, colIndex) => { + const targetCol = startCol + colIndex; + const cell = activeSheet.getCell(targetRow, targetCol); + const value = rowData[column.key]; + + // 값 설정 + cell.value(value ?? null); + + // 🛡️ 편집 권한 및 스타일 재확인 (SPREAD_LIST와 동일) + const cellEditable = isFieldEditable(column.key, rowData); + cell.locked(!cellEditable); + const style = createCellStyle(cellEditable); + activeSheet.setStyle(targetRow, targetCol, style); + + // 🔍 디버깅: readonly 상태 로깅 + if (!cellEditable) { + const columnConfig = columnsJSON.find(col => col.key === column.key); + const reasons = []; + + if (columnConfig?.shi === true) { + reasons.push('column.shi=true'); + } + if (rowData.shi === true) { + reasons.push('row.shi=true'); + } + if (!editableFields.includes(column.key) && column.key !== "TAG_NO" && column.key !== "TAG_DESC") { + reasons.push('not in editableFields'); + } + + console.log(`🔒 ReadOnly [${targetRow}, ${targetCol}] ${column.key}: ${reasons.join(', ')}`); + } + }); + }); + + // 🎨 컬럼 너비 자동 설정 + setOptimalColumnWidths(activeSheet, visibleColumns, startCol, tableData); + + console.log(`🏗️ GRD_LIST table created with ${mappings.length} mappings, hasGroups: ${hasGroups}`); + console.log(`📊 Readonly analysis:`); + console.log(` Total cells: ${mappings.length}`); + console.log(` Editable cells: ${mappings.filter(m => m.isEditable).length}`); + console.log(` Readonly cells: ${mappings.filter(m => !m.isEditable).length}`); + + return mappings; +}, [tableData, columnsJSON, isFieldEditable, createCellStyle, ensureRowCapacity, ensureColumnCapacity, setupOptimizedListValidation, setOptimalColumnWidths, editableFields, getCellAddress, analyzeColumnGroups]); + +// 🛡️ 추가: readonly 상태 확인 헬퍼 함수 +const analyzeReadonlyStatus = React.useCallback((column: DataTableColumnJSON, rowData: GenericData) => { + const reasons: string[] = []; + + // 1. 컬럼 자체가 readonly인지 확인 + if (column.shi === true) { + reasons.push('Column marked as readonly (shi=true)'); + } + + // 2. 행 자체가 readonly인지 확인 + if (rowData.shi === true) { + reasons.push('Row marked as readonly (shi=true)'); + } + + // 3. editableFields에 포함되지 않은 경우 + if (!editableFields.includes(column.key) && column.key !== "TAG_NO" && column.key !== "TAG_DESC") { + reasons.push('Not in editable fields list'); + } + + // 4. 특수 필드 체크 + if (column.key === "TAG_NO" || column.key === "TAG_DESC") { + // TAG_NO와 TAG_DESC는 기본 편집 가능하지만 다른 조건들은 적용됨 + if (column.shi === true || rowData.shi === true) { + // 다른 readonly 조건이 있으면 적용 + } else { + return { isEditable: true, reasons: ['Default editable field'] }; + } + } + + const isEditable = reasons.length === 0; + + return { + isEditable, + reasons: isEditable ? ['Editable'] : reasons + }; +}, [editableFields]); + + + +// 🛡️ 수정된 시트 보호 및 이벤트 설정 함수 +const setupSheetProtectionAndEvents = React.useCallback((activeSheet: any, mappings: CellMapping[]) => { + console.log(`🛡️ Setting up protection and events for ${mappings.length} mappings`); + + // 🔧 1단계: 먼저 시트 보호를 완전히 해제하고 강력한 잠금 해제 실행 + console.log('🔓 Step 1: Forcing unlock all editable cells...'); + activeSheet.options.isProtected = false; + + // 🔧 2단계: 모든 편집 가능한 셀에 대해 강제 잠금 해제 및 CellType 설정 + mappings.forEach((mapping, index) => { + if (!mapping.isEditable) return; + + const cellPos = parseCellAddress(mapping.cellAddress); + if (!cellPos) return; + + try { + const cell = activeSheet.getCell(cellPos.row, cellPos.col); + const columnConfig = columnsJSON.find(col => col.key === mapping.attId); + + // 강제 잠금 해제 + cell.locked(false); + + // CellType 명시적 설정 + if (columnConfig?.type === "LIST" && columnConfig.options) { + // LIST 타입: ComboBox 설정 + const comboBox = new GC.Spread.Sheets.CellTypes.ComboBox(); + comboBox.items(columnConfig.options); + comboBox.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); + activeSheet.setCellType(cellPos.row, cellPos.col, comboBox); + console.log(`📋 ComboBox set for ${mapping.attId} at ${mapping.cellAddress}`); + } else { + // 다른 모든 타입: 기본 텍스트 편집기 설정 + const textCellType = new GC.Spread.Sheets.CellTypes.Text(); + activeSheet.setCellType(cellPos.row, cellPos.col, textCellType); + console.log(`📝 Text editor set for ${mapping.attId} at ${mapping.cellAddress}`); + + // NUMBER 타입인 경우에만 validation 추가 (편집은 가능하게) + if (columnConfig?.type === "NUMBER") { + const numberValidator = GC.Spread.Sheets.DataValidation.createNumberValidator( + GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, + -999999999, 999999999, true + ); + numberValidator.showInputMessage(false); + numberValidator.showErrorMessage(false); + activeSheet.setDataValidator(cellPos.row, cellPos.col, numberValidator); + } + } + + // 편집 가능 스타일 명확히 표시 + const editableStyle = createCellStyle(true); + activeSheet.setStyle(cellPos.row, cellPos.col, editableStyle); + + console.log(`🔓 Forced unlock: ${mapping.attId} at ${mapping.cellAddress}`); + + } catch (error) { + console.error(`❌ Error processing cell ${mapping.cellAddress}:`, error); + } + }); + + // 🔧 3단계: 시트 보호 재설정 (편집 허용하는 설정으로) + activeSheet.options.isProtected = true; + activeSheet.options.protectionOptions = { + allowSelectLockedCells: true, + allowSelectUnlockedCells: true, + allowSort: false, + allowFilter: false, + allowEditObjects: true, // ✅ 편집 객체 허용 + allowResizeRows: false, + allowResizeColumns: false, + allowFormatCells: false, + allowInsertRows: false, + allowInsertColumns: false, + allowDeleteRows: false, + allowDeleteColumns: false + }; + + // 🔧 4단계: 편집 테스트 실행 + console.log('🧪 Testing cell editability...'); + const editableMapping = mappings.find(m => m.isEditable); + if (editableMapping) { + const cellPos = parseCellAddress(editableMapping.cellAddress); + if (cellPos) { + try { + const cell = activeSheet.getCell(cellPos.row, cellPos.col); + const testValue = 'TEST_' + Math.random().toString(36).substr(2, 5); + const originalValue = cell.value(); + + console.log(`🧪 Testing ${editableMapping.attId} at ${editableMapping.cellAddress}`); + console.log(`🧪 Locked status: ${cell.locked()}`); + + // 직접 값 설정 테스트 + cell.value(testValue); + const newValue = cell.value(); + + if (newValue === testValue) { + console.log('✅ Cell edit test PASSED'); + cell.value(originalValue); // 원래 값 복원 + } else { + console.log(`❌ Cell edit test FAILED: ${newValue} !== ${testValue}`); + } + } catch (testError) { + console.error('❌ Edit test error:', testError); + } + } + } + + // 🎯 변경 감지 이벤트 + const changeEvents = [ + GC.Spread.Sheets.Events.CellChanged, + GC.Spread.Sheets.Events.ValueChanged, + GC.Spread.Sheets.Events.ClipboardPasted + ]; + + changeEvents.forEach(eventType => { + activeSheet.bind(eventType, () => { + console.log(`📝 ${eventType} detected`); + setHasChanges(true); + }); + }); + + // 🚫 편집 시작 권한 확인 (수정됨) + activeSheet.bind(GC.Spread.Sheets.Events.EditStarting, (event: any, info: any) => { + console.log(`🎯 EditStarting: Row ${info.row}, Col ${info.col}`); + + // ✅ 정확한 매핑 찾기 (행/열 정확히 일치) + const exactMapping = mappings.find(m => { + const cellPos = parseCellAddress(m.cellAddress); + return cellPos && cellPos.row === info.row && cellPos.col === info.col; + }); + + if (!exactMapping) { + console.log(`ℹ️ No mapping found for [${info.row}, ${info.col}] - allowing edit`); + return; // 매핑이 없으면 허용 (템플릿 영역 밖) + } + + console.log(`📋 Found mapping: ${exactMapping.attId} at ${exactMapping.cellAddress}, isEditable: ${exactMapping.isEditable}`); + + // 🔍 추가 디버깅: 셀의 실제 상태 확인 + const cell = activeSheet.getCell(info.row, info.col); + const isLocked = cell.locked(); + const cellValue = cell.value(); + + console.log(`🔍 Cell state check:`, { + attId: exactMapping.attId, + isEditable: exactMapping.isEditable, + isLocked: isLocked, + currentValue: cellValue + }); + + // 🔧 추가: EditStarting 시점에서도 강제 잠금 해제 재시도 + if (exactMapping.isEditable && isLocked) { + console.log(`🔓 Re-unlocking cell during EditStarting...`); + cell.locked(false); + + // CellType도 재설정 + const columnConfig = columnsJSON.find(col => col.key === exactMapping.attId); + if (columnConfig?.type !== "LIST") { + const textCellType = new GC.Spread.Sheets.CellTypes.Text(); + activeSheet.setCellType(info.row, info.col, textCellType); + } + } + + // 기본 편집 권한 확인 + if (!exactMapping.isEditable) { + console.log(`🚫 Field ${exactMapping.attId} is not editable`); + toast.warning(`${exactMapping.attId} field is read-only`); + info.cancel = true; + return; + } + + // SPREAD_LIST 또는 GRD_LIST 개별 행 SHI 확인 + if ((templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') && exactMapping.dataRowIndex !== undefined) { + const dataRowIndex = exactMapping.dataRowIndex; + + console.log(`🔍 Checking SHI for data row ${dataRowIndex}`); + + if (dataRowIndex >= 0 && dataRowIndex < tableData.length) { + const rowData = tableData[dataRowIndex]; + if (rowData?.shi === true) { + console.log(`🚫 Row ${dataRowIndex} is in SHI mode`); + toast.warning(`Row ${dataRowIndex + 1}: ${exactMapping.attId} field is read-only (SHI mode)`); + info.cancel = true; + return; + } + } else { + console.warn(`⚠️ Invalid dataRowIndex: ${dataRowIndex} (tableData.length: ${tableData.length})`); + } + } + + console.log(`✅ Edit allowed for ${exactMapping.attId}`); + }); + + // ✅ 편집 완료 검증 (기존 로직 유지) + activeSheet.bind(GC.Spread.Sheets.Events.EditEnded, (event: any, info: any) => { + console.log(`🏁 EditEnded: Row ${info.row}, Col ${info.col}, New value: ${activeSheet.getValue(info.row, info.col)}`); + + // ✅ 정확한 매핑 찾기 + const exactMapping = mappings.find(m => { + const cellPos = parseCellAddress(m.cellAddress); + return cellPos && cellPos.row === info.row && cellPos.col === info.col; + }); + + if (!exactMapping) { + console.log(`ℹ️ No mapping found for [${info.row}, ${info.col}] - skipping validation`); + return; + } + + const columnConfig = columnsJSON.find(col => col.key === exactMapping.attId); + if (columnConfig) { + const cellValue = activeSheet.getValue(info.row, info.col); + console.log(`🔍 Validating ${exactMapping.attId}: "${cellValue}"`); + + const errorMessage = validateCellValue(cellValue, columnConfig.type, columnConfig.options); + const cell = activeSheet.getCell(info.row, info.col); + + if (errorMessage) { + console.log(`❌ Validation failed: ${errorMessage}`); + + // 🚨 에러 스타일 적용 (편집 가능 상태 유지) + const errorStyle = new GC.Spread.Sheets.Style(); + errorStyle.backColor = "#fef2f2"; + errorStyle.foreColor = "#dc2626"; + errorStyle.borderLeft = new GC.Spread.Sheets.LineBorder("#dc2626", GC.Spread.Sheets.LineStyle.thick); + errorStyle.borderRight = new GC.Spread.Sheets.LineBorder("#dc2626", GC.Spread.Sheets.LineStyle.thick); + errorStyle.borderTop = new GC.Spread.Sheets.LineBorder("#dc2626", GC.Spread.Sheets.LineStyle.thick); + errorStyle.borderBottom = new GC.Spread.Sheets.LineBorder("#dc2626", GC.Spread.Sheets.LineStyle.thick); + + activeSheet.setStyle(info.row, info.col, errorStyle); + cell.locked(!exactMapping.isEditable); // 편집 가능 상태 유지 + + toast.warning(`Invalid value in ${exactMapping.attId}: ${errorMessage}. Please correct the value.`, { duration: 5000 }); + } else { + console.log(`✅ Validation passed`); + + // ✅ 정상 스타일 복원 + const normalStyle = createCellStyle(exactMapping.isEditable); + activeSheet.setStyle(info.row, info.col, normalStyle); + cell.locked(!exactMapping.isEditable); + } + } + + // 🔄 변경 상태 업데이트 + setHasChanges(true); + }); + + // 🔧 5단계: 설정 완료 후 1초 뒤에 추가 잠금 해제 실행 (안전장치) + setTimeout(() => { + console.log('🔄 Running safety unlock after 1 second...'); + mappings.forEach(mapping => { + if (!mapping.isEditable) return; + + const cellPos = parseCellAddress(mapping.cellAddress); + if (!cellPos) return; + + try { + const cell = activeSheet.getCell(cellPos.row, cellPos.col); + if (cell.locked()) { + console.log(`🔓 Safety unlock: ${mapping.attId}`); + cell.locked(false); + } + } catch (error) { + console.error(`❌ Safety unlock error for ${mapping.cellAddress}:`, error); + } + }); + }, 1000); + + console.log(`🛡️ Protection and events configured for ${mappings.length} mappings`); + console.log(`🔓 Editable cells: ${mappings.filter(m => m.isEditable).length}`); + console.log(`🔒 Readonly cells: ${mappings.filter(m => !m.isEditable).length}`); +}, [templateType, tableData, createCellStyle, validateCellValue, columnsJSON]); + +// 🔧 셀 타입 및 편집기 설정 함수 (initSpread 함수 내부에 추가) +const setupCellTypeAndEditor = React.useCallback((activeSheet: any, cellPos: { row: number, col: number }, columnConfig: DataTableColumnJSON, isEditable: boolean, rowCount: number = 1) => { + console.log(`🔧 Setting up cell type for ${columnConfig.key} (${columnConfig.type}) at [${cellPos.row}, ${cellPos.col}]`); + + try { + // 편집 가능한 셀에만 적절한 셀 타입 설정 + if (isEditable) { + for (let i = 0; i < rowCount; i++) { + const targetRow = cellPos.row + i; + const cell = activeSheet.getCell(targetRow, cellPos.col); + + // 셀 잠금 해제 + cell.locked(false); + + switch (columnConfig.type) { + case "LIST": + // 드롭다운은 기존 setupOptimizedListValidation 함수에서 처리 + break; + + case "NUMBER": + // 숫자 입력용 셀 타입 설정 + const numberCellType = new GC.Spread.Sheets.CellTypes.Text(); + activeSheet.setCellType(targetRow, cellPos.col, numberCellType); + + // 숫자 validation 설정 (선택사항) + const numberValidator = GC.Spread.Sheets.DataValidation.createNumberValidator( + GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, + -999999999, 999999999, true + ); + numberValidator.showInputMessage(true); + numberValidator.inputTitle("Number Input"); + numberValidator.inputMessage("Please enter a valid number"); + activeSheet.setDataValidator(targetRow, cellPos.col, numberValidator); + break; + + case "STRING": + default: + // 기본 텍스트 입력용 셀 타입 설정 + const textCellType = new GC.Spread.Sheets.CellTypes.Text(); + activeSheet.setCellType(targetRow, cellPos.col, textCellType); + break; + } + + console.log(`✅ Cell type set for [${targetRow}, ${cellPos.col}]: ${columnConfig.type}`); + } + } else { + // 읽기 전용 셀 설정 + for (let i = 0; i < rowCount; i++) { + const targetRow = cellPos.row + i; + const cell = activeSheet.getCell(targetRow, cellPos.col); + cell.locked(true); + } + } + + } catch (error) { + console.error(`❌ Error setting cell type for ${columnConfig.key}:`, error); + } +}, []); + + // ═══════════════════════════════════════════════════════════════════════════════ + // 🏗️ 메인 SpreadSheets 초기화 함수 + // ═══════════════════════════════════════════════════════════════════════════════ + +// 🛡️ 수정된 initSpread 함수 - activeSheet 참조 문제 해결 +const initSpread = React.useCallback((spread: any, template?: TemplateItem) => { + const workingTemplate = template || selectedTemplate; + if (!spread || !workingTemplate) { + console.error('❌ Invalid spread or template in initSpread'); + return; + } + + try { + // 🔄 초기 설정 + setCurrentSpread(spread); + setHasChanges(false); + setValidationErrors([]); + + // 성능을 위한 렌더링 일시 중단 + spread.suspendPaint(); + + try { + // ⚠️ 초기 activeSheet 가져오기 + let activeSheet = getSafeActiveSheet(spread, 'initSpread-initial'); + if (!activeSheet) { + throw new Error('Failed to get initial activeSheet'); + } + + // 시트 보호 해제 (편집을 위해) + activeSheet.options.isProtected = false; + + let mappings: CellMapping[] = []; + + // 🆕 GRD_LIST 처리 + if (templateType === 'GRD_LIST' && workingTemplate.GRD_LST_SETUP) { + console.log('🏗️ Processing GRD_LIST template'); + + // 기본 워크북 설정 + spread.clearSheets(); + spread.addSheet(0); + const sheet = spread.getSheet(0); + sheet.name('Data'); + spread.setActiveSheet('Data'); + + // 동적 테이블 생성 + mappings = createGrdListTable(sheet, workingTemplate); + + } else { + // 🔍 SPREAD_LIST 및 SPREAD_ITEM 처리 + let contentJson = null; + let dataSheets = null; + + // SPR_LST_SETUP.CONTENT 우선 사용 + if (workingTemplate.SPR_LST_SETUP?.CONTENT) { + contentJson = workingTemplate.SPR_LST_SETUP.CONTENT; + dataSheets = workingTemplate.SPR_LST_SETUP.DATA_SHEETS; + console.log('✅ Using SPR_LST_SETUP for template:', workingTemplate.NAME); + } + // SPR_ITM_LST_SETUP.CONTENT 대안 사용 + else if (workingTemplate.SPR_ITM_LST_SETUP?.CONTENT) { + contentJson = workingTemplate.SPR_ITM_LST_SETUP.CONTENT; + dataSheets = workingTemplate.SPR_ITM_LST_SETUP.DATA_SHEETS; + console.log('✅ Using SPR_ITM_LST_SETUP for template:', workingTemplate.NAME); + } + + if (!contentJson) { + throw new Error(`No template content found for ${workingTemplate.NAME}`); + } + + if (!dataSheets || dataSheets.length === 0) { + throw new Error(`No data sheets configuration found for ${workingTemplate.NAME}`); + } + + console.log('🔍 Template info:', { + templateName: workingTemplate.NAME, + templateType: templateType, + dataSheetsCount: dataSheets.length, + hasSelectedRow: !!selectedRow, + tableDataLength: tableData.length + }); + + // 🏗️ SpreadSheets 템플릿 로드 + const jsonData = typeof contentJson === 'string' ? JSON.parse(contentJson) : contentJson; + + console.log('📥 Loading template JSON...'); + spread.fromJSON(jsonData); + console.log('✅ Template JSON loaded'); + + // ⚠️ 중요: 템플릿 로드 후 activeSheet 다시 가져오기 + activeSheet = getSafeActiveSheet(spread, 'initSpread-after-fromJSON'); + if (!activeSheet) { + throw new Error('ActiveSheet became null after loading template'); + } + + console.log('🔍 Active sheet after template load:', { + name: activeSheet.name?.() || 'unnamed', + rowCount: activeSheet.getRowCount(), + colCount: activeSheet.getColumnCount() + }); + + // 시트 보호 다시 해제 (템플릿 로드 후 다시 설정될 수 있음) + activeSheet.options.isProtected = false; + + // 📊 데이터 매핑 및 로딩 처리 + console.log(`🔄 Processing ${dataSheets.length} data sheets`); + + dataSheets.forEach((dataSheet, sheetIndex) => { + console.log(`📋 Processing data sheet ${sheetIndex}:`, { + sheetName: dataSheet.SHEET_NAME, + mappingCount: dataSheet.MAP_CELL_ATT?.length || 0 + }); + + if (dataSheet.MAP_CELL_ATT && dataSheet.MAP_CELL_ATT.length > 0) { + dataSheet.MAP_CELL_ATT.forEach((mapping, mappingIndex) => { + const { ATT_ID, IN } = mapping; + + if (!ATT_ID || !IN || IN.trim() === "") { + console.warn(`⚠️ Invalid mapping: ATT_ID=${ATT_ID}, IN=${IN}`); + return; + } + + const cellPos = parseCellAddress(IN); + if (!cellPos) { + console.warn(`⚠️ Invalid cell address: ${IN}`); + return; + } + + const columnConfig = columnsJSON.find(col => col.key === ATT_ID); + + // 🎯 템플릿 타입별 데이터 처리 + if (templateType === 'SPREAD_ITEM' && selectedRow) { + console.log(`📝 Processing SPREAD_ITEM for ${ATT_ID}`); + + const isEditable = isFieldEditable(ATT_ID); + const value = selectedRow[ATT_ID]; + + // 매핑 정보 저장 + mappings.push({ + attId: ATT_ID, + cellAddress: IN, + isEditable: isEditable, + dataRowIndex: 0 + }); + + // ⚠️ 안전한 셀 참조 및 값 설정 + try { + const cell = activeSheet.getCell(cellPos.row, cellPos.col); + console.log(`🔄 Setting SPREAD_ITEM cell [${cellPos.row}, ${cellPos.col}] ${ATT_ID}: "${value}"`); + + // 🔧 새로 추가: 셀 타입 및 편집기 설정 + setupCellTypeAndEditor(activeSheet, cellPos, columnConfig, isEditable, 1); + + // 값 설정 + cell.value(value ?? null); + + // 스타일 설정 + const style = createCellStyle(isEditable); + activeSheet.setStyle(cellPos.row, cellPos.col, style); + + // LIST 타입 드롭다운 설정 (기존 코드 유지) + if (columnConfig?.type === "LIST" && columnConfig.options && isEditable) { + setupOptimizedListValidation(activeSheet, cellPos, columnConfig.options, 1); + } + + console.log(`✅ SPREAD_ITEM cell set successfully`); + } catch (cellError) { + console.error(`❌ Error setting SPREAD_ITEM cell:`, cellError); + } + } else if (templateType === 'SPREAD_LIST' && tableData.length > 0) { + console.log(`📊 Processing SPREAD_LIST for ${ATT_ID} with ${tableData.length} rows`); + + // 🚀 행 확장 - 안전한 방법으로 + const requiredRows = cellPos.row + tableData.length; + console.log(`🚀 Ensuring ${requiredRows} rows for SPREAD_LIST`); + + // ⚠️ activeSheet 유효성 재검증 + const currentActiveSheet = getSafeActiveSheet(spread, 'ensureRowCapacity'); + if (!currentActiveSheet) { + console.error(`❌ ActiveSheet is null before ensureRowCapacity`); + return; + } + + if (!ensureRowCapacity(currentActiveSheet, requiredRows)) { + console.error(`❌ Failed to ensure row capacity for ${requiredRows} rows`); + return; + } + + // activeSheet 참조 업데이트 + activeSheet = currentActiveSheet; + + // 매핑 생성 + tableData.forEach((rowData, index) => { + const targetRow = cellPos.row + index; + const targetCellAddress = getCellAddress(targetRow, cellPos.col); + const cellEditable = isFieldEditable(ATT_ID, rowData); + + mappings.push({ + attId: ATT_ID, + cellAddress: targetCellAddress, + isEditable: cellEditable, + dataRowIndex: index + }); + }); + + // LIST 타입 드롭다운 설정 + if (columnConfig?.type === "LIST" && columnConfig.options) { + const hasEditableRows = tableData.some((rowData) => isFieldEditable(ATT_ID, rowData)); + if (hasEditableRows) { + setupOptimizedListValidation(activeSheet, cellPos, columnConfig.options, tableData.length); + } + } +// 개별 셀 데이터 및 스타일 설정 +tableData.forEach((rowData, index) => { + const targetRow = cellPos.row + index; + + try { + const cell = activeSheet.getCell(targetRow, cellPos.col); + const value = rowData[ATT_ID]; + const cellEditable = isFieldEditable(ATT_ID, rowData); + + console.log(`🔄 Setting SPREAD_LIST Row ${index} ${ATT_ID}: "${value}"`); + + // 🔧 새로 추가: 각 셀에 대한 타입 및 편집기 설정 + setupCellTypeAndEditor(activeSheet, { row: targetRow, col: cellPos.col }, columnConfig, cellEditable, 1); + + // 값 설정 + cell.value(value ?? null); + + // 스타일 설정 + const style = createCellStyle(cellEditable); + activeSheet.setStyle(targetRow, cellPos.col, style); + + } catch (cellError) { + console.error(`❌ Error setting SPREAD_LIST cell Row ${index}:`, cellError); + } +}); + + + console.log(`✅ SPREAD_LIST processing completed for ${ATT_ID}`); + } + }); + } + }); + } + + // 💾 매핑 정보 저장 및 이벤트 설정 + setCellMappings(mappings); + + // ⚠️ 최종 activeSheet 재확인 후 이벤트 설정 + const finalActiveSheet = getSafeActiveSheet(spread, 'setupSheetProtectionAndEvents'); + if (finalActiveSheet) { + setupSheetProtectionAndEvents(finalActiveSheet, mappings); + } else { + console.error('❌ Failed to get activeSheet for events setup'); + } + + console.log(`✅ Template initialization completed with ${mappings.length} mappings`); + + } finally { + // 렌더링 재개 + spread.resumePaint(); + } + + } catch (error) { + console.error('❌ Error initializing spread:', error); + // toast.error(`Failed to load template: ${error.message}`); + if (spread?.resumePaint) { + spread.resumePaint(); + } + } +}, [selectedTemplate, templateType, selectedRow, tableData, isFieldEditable, columnsJSON, createCellStyle, setupOptimizedListValidation, ensureRowCapacity, setupSheetProtectionAndEvents, createGrdListTable, getCellAddress, getSafeActiveSheet, validateActiveSheet]); + // 변경사항 저장 함수 + const handleSaveChanges = React.useCallback(async () => { + if (!currentSpread || !hasChanges) { + toast.info("No changes to save"); + return; + } + + // 저장 전 데이터 검증 + const errors = validateAllData(); + if (errors.length > 0) { + toast.error(`Cannot save: ${errors.length} validation errors found. Please fix them first.`); + return; + } + + try { + setIsPending(true); + + const activeSheet = currentSpread.getActiveSheet(); + + if (templateType === 'SPREAD_ITEM' && selectedRow) { + // 단일 행 저장 + const dataToSave = { ...selectedRow }; + + cellMappings.forEach(mapping => { + if (mapping.isEditable) { + const cellPos = parseCellAddress(mapping.cellAddress); + if (cellPos) { + const cellValue = activeSheet.getValue(cellPos.row, cellPos.col); + dataToSave[mapping.attId] = cellValue; + } + } + }); + + dataToSave.TAG_NO = selectedRow.TAG_NO; + + const { success, message } = await updateFormDataInDB( + formCode, + contractItemId, + dataToSave + ); + + if (!success) { + toast.error(message); + return; + } + + toast.success("Changes saved successfully!"); + onUpdateSuccess?.(dataToSave); + + } else if ((templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') && tableData.length > 0) { + // 복수 행 저장 (SPREAD_LIST와 GRD_LIST 동일 처리) + const updatedRows: GenericData[] = []; + let saveCount = 0; + + for (let i = 0; i < tableData.length; i++) { + const originalRow = tableData[i]; + const dataToSave = { ...originalRow }; + let hasRowChanges = false; + + // 각 매핑에 대해 해당 행의 값 확인 + cellMappings.forEach(mapping => { + if (mapping.dataRowIndex === i && mapping.isEditable) { + const columnConfig = columnsJSON.find(col => col.key === mapping.attId); + const isColumnEditable = columnConfig?.shi !== true; + const isRowEditable = originalRow.shi !== true; + + if (isColumnEditable && isRowEditable) { + const cellPos = parseCellAddress(mapping.cellAddress); + if (cellPos) { + const cellValue = activeSheet.getValue(cellPos.row, cellPos.col); + + // 값이 변경되었는지 확인 + if (cellValue !== originalRow[mapping.attId]) { + dataToSave[mapping.attId] = cellValue; + hasRowChanges = true; + } + } + } + } + }); + + // 변경사항이 있는 행만 저장 + if (hasRowChanges) { + dataToSave.TAG_NO = originalRow.TAG_NO; // TAG_NO는 절대 변경되지 않도록 + + const { success } = await updateFormDataInDB( + formCode, + contractItemId, + dataToSave + ); + + if (success) { + updatedRows.push(dataToSave); + saveCount++; + } + } else { + updatedRows.push(originalRow); // 변경사항이 없으면 원본 유지 + } + } + + if (saveCount > 0) { + toast.success(`${saveCount} rows saved successfully!`); + onUpdateSuccess?.(updatedRows); + } else { + toast.info("No changes to save"); + } + } + + setHasChanges(false); + setValidationErrors([]); + + } catch (error) { + console.error("Error saving changes:", error); + toast.error("An unexpected error occurred while saving"); + } finally { + setIsPending(false); + } + }, [currentSpread, hasChanges, templateType, selectedRow, tableData, formCode, contractItemId, onUpdateSuccess, cellMappings, columnsJSON, validateAllData]); + + if (!isOpen) return null; + + // 데이터 유효성 검사 + const isDataValid = templateType === 'SPREAD_ITEM' ? !!selectedRow : tableData.length > 0; + const dataCount = templateType === 'SPREAD_ITEM' ? 1 : tableData.length; + + + return ( + + + + SEDP Template - {formCode} + +
+ {/* 템플릿 선택 */} + {availableTemplates.length > 1 && ( +
+ Template: + +
+ )} + + {/* 템플릿 정보 */} + {selectedTemplate && ( +
+ + Template Type: { + templateType === 'SPREAD_LIST' ? 'List View (SPREAD_LIST)' : + templateType === 'SPREAD_ITEM' ? 'Item View (SPREAD_ITEM)' : + 'Grid List View (GRD_LIST)' + } + + {templateType === 'SPREAD_ITEM' && selectedRow && ( + • Selected TAG_NO: {selectedRow.TAG_NO || 'N/A'} + )} + {(templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') && ( + • {dataCount} rows + )} + {hasChanges && ( + + • Unsaved changes + + )} + {validationErrors.length > 0 && ( + + + {validationErrors.length} validation errors + + )} +
+ )} + + {/* 범례 */} +
+ + + Editable fields + + + + Read-only fields + + + + Validation errors + + {cellMappings.length > 0 && ( + + {editableFieldsCount} of {cellMappings.length} fields editable + + )} +
+
+ + + + {/* SpreadSheets 컴포넌트 영역 */} +
+ {selectedTemplate && isClient && isDataValid ? ( + + ) : ( +
+ {!isClient ? ( + <> + + Loading... + + ) : !selectedTemplate ? ( + "No template available" + ) : !isDataValid ? ( + `No ${templateType === 'SPREAD_ITEM' ? 'selected row' : 'data'} available` + ) : ( + "Template not ready" + )} +
+ )} +
+ + +
+ + + {hasChanges && ( + + )} + + {validationErrors.length > 0 && ( + + )} +
+ + + + ); +} \ No newline at end of file diff --git a/components/form-data/spreadJS-dialog.tsx b/components/form-data/spreadJS-dialog.tsx index 54a70d9d..a223a849 100644 --- a/components/form-data/spreadJS-dialog.tsx +++ b/components/form-data/spreadJS-dialog.tsx @@ -327,6 +327,17 @@ export function TemplateViewDialog({ }); }, []); + const createCellStyle = React.useCallback((isEditable: boolean) => { + const style = new GC.Spread.Sheets.Style(); + if (isEditable) { + style.backColor = "#f0fdf4"; + } else { + style.backColor = "#f9fafb"; + style.foreColor = "#6b7280"; + } + return style; + }, []); + const setBatchStyles = React.useCallback(( activeSheet: any, stylesToSet: Array<{row: number, col: number, isEditable: boolean}> @@ -440,16 +451,7 @@ export function TemplateViewDialog({ return errors; }, [currentSpread, selectedTemplate, cellMappings, columnsJSON]); - const createCellStyle = React.useCallback((isEditable: boolean) => { - const style = new GC.Spread.Sheets.Style(); - if (isEditable) { - style.backColor = "#f0fdf4"; - } else { - style.backColor = "#f9fafb"; - style.foreColor = "#6b7280"; - } - return style; - }, []); + const setupOptimizedListValidation = React.useCallback((activeSheet: any, cellPos: { row: number, col: number }, options: string[], rowCount: number) => { try { @@ -780,7 +782,7 @@ export function TemplateViewDialog({ }); // 🛡️ 시트 보호 재설정 (편집 허용 모드로) - activeSheet.options.isProtected = true; + activeSheet.options.isProtected = false; activeSheet.options.protectionOptions = { allowSelectLockedCells: true, allowSelectUnlockedCells: true, diff --git a/components/information/information-button.tsx b/components/information/information-button.tsx index 5a9dc4d4..52079767 100644 --- a/components/information/information-button.tsx +++ b/components/information/information-button.tsx @@ -111,7 +111,14 @@ export function InformationButton({ // 파일 다운로드 핸들러 const handleDownload = () => { if (information?.attachmentFilePath) { - window.open(information.attachmentFilePath, '_blank') + // window.open 대신 link 요소 사용 + const link = document.createElement('a') + link.href = information.attachmentFilePath + link.target = '_blank' + link.rel = 'noopener noreferrer' + document.body.appendChild(link) + link.click() + document.body.removeChild(link) } } diff --git a/components/information/information-client.tsx b/components/information/information-client.tsx index 69835599..d863175f 100644 --- a/components/information/information-client.tsx +++ b/components/information/information-client.tsx @@ -1,6 +1,7 @@ "use client" import { useState, useEffect, useTransition } from "react" +import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { @@ -34,6 +35,7 @@ type SortField = "pageName" | "pagePath" | "createdAt" type SortDirection = "asc" | "desc" export function InformationClient({ initialData = [] }: InformationClientProps) { + const router = useRouter() const [informations, setInformations] = useState(initialData) const [loading, setLoading] = useState(false) const [searchQuery, setSearchQuery] = useState("") @@ -185,7 +187,7 @@ export function InformationClient({ initialData = [] }: InformationClientProps) diff --git a/components/ship-vendor-document/edit-revision-dialog.tsx b/components/ship-vendor-document/edit-revision-dialog.tsx new file mode 100644 index 00000000..313a27bc --- /dev/null +++ b/components/ship-vendor-document/edit-revision-dialog.tsx @@ -0,0 +1,726 @@ +"use client" + +import React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { z } from "zod" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Button } from "@/components/ui/button" +import { Badge } from "@/components/ui/badge" +import { + Edit, + FileText, + Loader2, + AlertTriangle, + Trash2, + CheckCircle, + Clock +} from "lucide-react" +import { toast } from "sonner" +import { updateRevisionAction, deleteRevisionAction } from "@/lib/vendor-document-list/enhanced-document-service" // ✅ 서버 액션 import + +/* ------------------------------------------------------------------------------------------------- + * Schema & Types + * -----------------------------------------------------------------------------------------------*/ + +interface RevisionInfo { + id: number + issueStageId: number + revision: string + uploaderType: string + uploaderId: number | null + uploaderName: string | null + comment: string | null + usage: string | null + usageType: string | null + revisionStatus: string + submittedDate: string | null + approvedDate: string | null + uploadedAt: string | null + reviewStartDate: string | null + rejectedDate: string | null + reviewerId: number | null + reviewerName: string | null + reviewComments: string | null + createdAt: Date + updatedAt: Date + stageName?: string + attachments: AttachmentInfo[] +} + +interface AttachmentInfo { + id: number + revisionId: number + fileName: string + filePath: string + dolceFilePath: string | null + fileSize: number | null + fileType: string | null + createdAt: Date + updatedAt: Date +} + +// drawingKind에 따른 동적 스키마 생성 (수정용) +const createEditRevisionSchema = (drawingKind: string) => { + const baseSchema = { + usage: z.string().min(1, "Please select a usage"), + revision: z.string().min(1, "Please enter a revision").max(50, "Revision must be 50 characters or less"), // ✅ revision 필드 추가 + comment: z.string().optional(), + } + + // B3인 경우에만 usageType 필드 추가 + if (drawingKind === 'B3') { + return z.object({ + ...baseSchema, + usageType: z.string().min(1, "Please select a usage type"), + }) + } else { + return z.object({ + ...baseSchema, + usageType: z.string().optional(), + }) + } +} + +// drawingKind에 따른 용도 옵션 +const getUsageOptions = (drawingKind: string) => { + switch (drawingKind) { + case 'B3': + return [ + { value: "Approval", label: "Approval" }, + { value: "Working", label: "Working" }, + { value: "Comments", label: "Comments" }, + ] + case 'B4': + return [ + { value: "Pre", label: "Pre" }, + { value: "Working", label: "Working" }, + ] + case 'B5': + return [ + { value: "Pre", label: "Pre" }, + { value: "Working", label: "Working" }, + ] + default: + return [ + { value: "Pre", label: "Pre" }, + { value: "Working", label: "Working" }, + ] + } +} + +// B3 전용 용도 타입 옵션 +const getUsageTypeOptions = (usage: string) => { + switch (usage) { + case 'Approval': + return [ + { value: "Full", label: "Full" }, + { value: "Partial", label: "Partial" }, + ] + case 'Working': + return [ + { value: "Full", label: "Full" }, + { value: "Partial", label: "Partial" }, + ] + case 'Comments': + return [ + { value: "Comments", label: "Comments" }, + ] + default: + return [] + } +} + +// ✅ 리비전 가이드 생성 (NewRevisionDialog와 동일) +const getRevisionGuide = () => { + return "Enter in R01, R02, R03... format" +} + +interface EditRevisionDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + revision: RevisionInfo | null + drawingKind?: string + onSuccess: (action: 'update' | 'delete', result?: any) => void +} + +/* ------------------------------------------------------------------------------------------------- + * Revision Info Display Component + * -----------------------------------------------------------------------------------------------*/ +function RevisionInfoDisplay({ revision }: { revision: RevisionInfo }) { + const canEdit = React.useMemo(() => { + if (!revision.attachments || revision.attachments.length === 0) { + return true + } + return revision.attachments.every(attachment => + !attachment.dolceFilePath || attachment.dolceFilePath.trim() === '' + ) + }, [revision.attachments]) + + const processedCount = revision.attachments?.filter(attachment => + attachment.dolceFilePath && attachment.dolceFilePath.trim() !== '' + ).length || 0 + + const getStatusColor = (status: string) => { + switch (status) { + case 'APPROVED': return 'bg-green-100 text-green-800' + case 'UPLOADED': return 'bg-blue-100 text-blue-800' + case 'REJECTED': return 'bg-red-100 text-red-800' + default: return 'bg-gray-100 text-gray-800' + } + } + + return ( +
+
+
+ + {revision.revision} + + + {revision.revisionStatus} + + {!canEdit && ( + + Partially Processed + + )} +
+ +
+ + {revision.attachments?.length || 0} file(s) + {processedCount > 0 && ( + + ({processedCount} processed) + + )} +
+
+ +
+
+ Uploader: + {revision.uploaderName || '-'} +
+
+ Upload Date: + + {revision.uploadedAt + ? new Date(revision.uploadedAt).toLocaleDateString() + : '-' + } + +
+
+ + {revision.comment && ( +
+ Current Comment: +

+ {revision.comment} +

+
+ )} + + {!canEdit && ( +
+ + + Some files have been processed. Editing is limited. + +
+ )} +
+ ) +} + +/* ------------------------------------------------------------------------------------------------- + * Main Dialog Component + * -----------------------------------------------------------------------------------------------*/ +export function EditRevisionDialog({ + open, + onOpenChange, + revision, + drawingKind = 'B4', + onSuccess +}: EditRevisionDialogProps) { + const [isLoading, setIsLoading] = React.useState(false) + const [isDeleting, setIsDeleting] = React.useState(false) + const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false) + + // drawingKind에 따른 동적 스키마 및 옵션 생성 + const editRevisionSchema = React.useMemo(() => createEditRevisionSchema(drawingKind), [drawingKind]) + const usageOptions = React.useMemo(() => getUsageOptions(drawingKind), [drawingKind]) + const showUsageType = drawingKind === 'B3' + + type EditRevisionSchema = z.infer + + const form = useForm({ + resolver: zodResolver(editRevisionSchema), + defaultValues: { + usage: "", + revision: "", // ✅ revision 기본값 추가 + comment: "", + usageType: showUsageType ? "" : undefined, + }, + }) + + const watchedUsage = form.watch("usage") + + // 용도 선택에 따른 용도 타입 옵션 업데이트 + const usageTypeOptions = React.useMemo(() => { + if (drawingKind === 'B3' && watchedUsage) { + return getUsageTypeOptions(watchedUsage) + } + return [] + }, [drawingKind, watchedUsage]) + + // ✅ 리비전 가이드 텍스트 + const revisionGuide = React.useMemo(() => { + return getRevisionGuide() + }, []) + + // revision이 변경될 때 폼 데이터 초기화 + React.useEffect(() => { + if (revision) { + form.reset({ + usage: revision.usage || "", + revision: revision.revision || "", // ✅ revision 값 설정 + comment: revision.comment || "", + usageType: showUsageType ? (revision.usageType || "") : undefined, + }) + } + }, [revision, showUsageType, form]) + + // 용도 변경 시 용도 타입 초기화 또는 자동 설정 (NewRevisionDialog와 동일한 로직) + React.useEffect(() => { + if (showUsageType && watchedUsage) { + if (watchedUsage === "Comments") { + form.setValue("usageType", "Comments") + } else { + // Comments가 아닌 경우, 초기 로드가 아니라면 초기화 + const currentValue = form.getValues("usageType") + if (revision && watchedUsage !== revision.usage) { + form.setValue("usageType", "") + } + } + } + }, [watchedUsage, showUsageType, form, revision]) + + // 수정 가능 여부 확인 + const canEdit = React.useMemo(() => { + if (!revision?.attachments || revision.attachments.length === 0) { + return true + } + return revision.attachments.every(attachment => + !attachment.dolceFilePath || attachment.dolceFilePath.trim() === '' + ) + }, [revision?.attachments]) + + // 폼 변경 체크 + const hasChanges = React.useMemo(() => { + if (!revision) return false + const currentValues = form.getValues() + return ( + currentValues.comment !== (revision.comment || '') || + currentValues.usage !== (revision.usage || '') || + currentValues.revision !== (revision.revision || '') || // ✅ revision 변경 체크 추가 + (showUsageType && currentValues.usageType !== (revision.usageType || '')) + ) + }, [revision, form, showUsageType]) + + const handleDialogClose = () => { + if (!isLoading && !isDeleting) { + setShowDeleteConfirm(false) + form.reset() + onOpenChange(false) + } + } + + const onSubmit = async (data: EditRevisionSchema) => { + if (!revision || !canEdit) { + toast.error("Cannot edit this revision") + return + } + + setIsLoading(true) + + try { + // ✅ 서버 액션 호출 - revision 필드 추가 + const result = await updateRevisionAction({ + revisionId: revision.id, + revision: data.revision.trim(), // ✅ revision 추가 + comment: data.comment?.trim() || null, + usage: data.usage.trim(), + usageType: showUsageType && 'usageType' in data ? data.usageType?.trim() || null : null, + }) + + if (!result.success) { + throw new Error(result.error || 'Failed to update revision') + } + + toast.success( + result.message || + `Revision ${data.revision} updated successfully` // ✅ 새 revision 값 사용 + ) + + setTimeout(() => { + handleDialogClose() + onSuccess('update', result) + }, 1000) + + } catch (error) { + console.error('❌ Update error:', error) + toast.error(error instanceof Error ? error.message : "An error occurred during update") + } finally { + setIsLoading(false) + } + } + + const handleDelete = async () => { + if (!revision || !canEdit) { + toast.error("Cannot delete this revision") + return + } + + setIsDeleting(true) + + try { + // ✅ 서버 액션 호출 + const result = await deleteRevisionAction({ + revisionId: revision.id, + }) + + if (!result.success) { + throw new Error(result.error || 'Failed to delete revision') + } + + toast.success( + result.message || + `Revision ${revision.revision} deleted successfully` + ) + + setTimeout(() => { + handleDialogClose() + onSuccess('delete', result) + }, 1000) + + } catch (error) { + console.error('❌ Delete error:', error) + toast.error(error instanceof Error ? error.message : "An error occurred during deletion") + } finally { + setIsDeleting(false) + } + } + + if (!revision) return null + + return ( + + + {/* 고정 헤더 */} + + + + Edit Revision + + + Modify revision details and metadata + + + + {!showDeleteConfirm ? ( +
+ + {/* 스크롤 가능한 중간 영역 */} +
+ + {/* 리비전 정보 표시 */} + + + {/* ✅ 리비전 필드 추가 */} + ( + + Revision + + + +
+ {revisionGuide} +
+ + + )} + /> + + {/* 용도 선택 */} + ( + + Usage + + + + )} + /> + + {/* 용도 타입 선택 (B3만) */} + {showUsageType && watchedUsage && ( + ( + + Usage Type + + {watchedUsage === "Comments" && ( +
+ Automatically set to "Comments" for this usage +
+ )} + + + )} + /> + )} + + {/* 코멘트 */} + ( + + Comment + +