diff options
Diffstat (limited to 'lib/basic-contract')
16 files changed, 5434 insertions, 1622 deletions
diff --git a/lib/basic-contract/repository.ts b/lib/basic-contract/repository.ts index aab70106..237402d0 100644 --- a/lib/basic-contract/repository.ts +++ b/lib/basic-contract/repository.ts @@ -1,7 +1,7 @@ "use server";
import { asc, count,inArray ,eq} from "drizzle-orm";
-import { basicContractTemplates, basicContractView, type BasicContractTemplate } from "@/db/schema";
+import { basicContractTemplates, basicContractView,basicContractTemplateStatsView, type BasicContractTemplate } from "@/db/schema";
import { PgTransaction } from "drizzle-orm/pg-core";
import db from "@/db/db";
@@ -39,6 +39,47 @@ export async function selectBasicContracts( return tx
.select()
+ .from(basicContractTemplateStatsView)
+ .where(where || undefined)
+ .orderBy(...(orderBy || [asc(basicContractTemplateStatsView.lastActivityDate)]))
+ .offset(offset || 0)
+ .limit(limit || 50);
+}
+
+export async function selectBasicContractsVendor(
+ tx: PgTransaction<any, any, any>,
+ options: {
+ where?: any;
+ orderBy?: any[];
+ offset?: number;
+ limit?: number;
+ }
+) {
+ const { where, orderBy, offset, limit } = options;
+
+ return tx
+ .select()
+ .from(basicContractView)
+ .where(where || undefined)
+ .orderBy(...(orderBy || [asc(basicContractView.createdAt)]))
+ .offset(offset || 0)
+ .limit(limit || 50);
+}
+
+
+export async function selectBasicContractsById(
+ tx: PgTransaction<any, any, any>,
+ options: {
+ where?: any;
+ orderBy?: any[];
+ offset?: number;
+ limit?: number;
+ }
+) {
+ const { where, orderBy, offset, limit } = options;
+
+ return tx
+ .select()
.from(basicContractView)
.where(where || undefined)
.orderBy(...(orderBy || [asc(basicContractView.createdAt)]))
@@ -65,12 +106,35 @@ export async function countBasicContracts( ) {
const result = await tx
.select({ count: count() })
+ .from(basicContractTemplateStatsView)
+ .where(where || undefined);
+
+ return result[0]?.count || 0;
+}
+
+export async function countBasicContractsVendor(
+ tx: PgTransaction<any, any, any>,
+ where?: any
+) {
+ const result = await tx
+ .select({ count: count() })
.from(basicContractView)
.where(where || undefined);
return result[0]?.count || 0;
}
+export async function countBasicContractsById(
+ tx: PgTransaction<any, any, any>,
+ where?: any
+) {
+ const result = await tx
+ .select({ count: count() })
+ .from(basicContractView)
+ .where(where || undefined);
+
+ return result[0]?.count || 0;
+}
// 템플릿 생성
export async function insertBasicContractTemplate(
diff --git a/lib/basic-contract/service.ts b/lib/basic-contract/service.ts index 58463f16..194d27eb 100644 --- a/lib/basic-contract/service.ts +++ b/lib/basic-contract/service.ts @@ -17,19 +17,30 @@ import { complianceResponseFiles,
complianceResponses,
complianceSurveyTemplates,
- vendorAttachments,
- vendors,
+ vendorAttachments, basicContractTemplateStatsView,
type BasicContractTemplate as DBBasicContractTemplate,
type NewComplianceResponse,
type NewComplianceResponseAnswer,
- type NewComplianceResponseFile
+ type NewComplianceResponseFile,
+ gtcVendorDocuments,
+ gtcVendorClauses,
+ gtcClauses,
+ gtcDocuments,
+ vendors,
+ gtcNegotiationHistory,
+ type GtcVendorClause,
+ type GtcClause,
+ projects,
+ legalWorks
} from "@/db/schema";
+import path from "path";
import {
GetBasicContractTemplatesSchema,
CreateBasicContractTemplateSchema,
GetBasciContractsSchema,
} from "./validations";
+import { readFile } from "fs/promises"
import {
insertBasicContractTemplate,
@@ -39,7 +50,11 @@ import { getBasicContractTemplateById,
selectBasicContracts,
countBasicContracts,
- findAllTemplates
+ findAllTemplates,
+ countBasicContractsById,
+ selectBasicContractsById,
+ selectBasicContractsVendor,
+ countBasicContractsVendor
} from "./repository";
import { revalidatePath } from 'next/cache';
import { sendEmail } from "../mail/sendEmail";
@@ -47,7 +62,8 @@ import { headers } from 'next/headers'; import { filterColumns } from "@/lib/filter-columns";
import { differenceInDays, addYears, isBefore } from "date-fns";
import { deleteFile, saveFile } from "@/lib/file-stroage";
-
+import { getServerSession } from "next-auth/next"
+import { authOptions } from "@/app/api/auth/[...nextauth]/route"
// 템플릿 추가
@@ -607,7 +623,7 @@ export async function getBasicContracts(input: GetBasciContractsSchema) { // advancedTable 모드면 filterColumns()로 where 절 구성
const advancedWhere = filterColumns({
- table: basicContractView,
+ table: basicContractTemplateStatsView,
filters: input.filters,
joinOperator: input.joinOperator,
});
@@ -616,11 +632,7 @@ export async function getBasicContracts(input: GetBasciContractsSchema) { let globalWhere
if (input.search) {
const s = `%${input.search}%`
- globalWhere = or(ilike(basicContractView.templateName, s),
- ilike(basicContractView.vendorName, s)
- , ilike(basicContractView.vendorCode, s)
- , ilike(basicContractView.vendorEmail, s)
- , ilike(basicContractView.status, s)
+ globalWhere = or(ilike(basicContractTemplateStatsView.templateName, s),
)
// 필요시 여러 칼럼 OR조건 (status, priority, etc)
}
@@ -638,9 +650,9 @@ export async function getBasicContracts(input: GetBasciContractsSchema) { const orderBy =
input.sort.length > 0
? input.sort.map((item) =>
- item.desc ? desc(basicContractView[item.id]) : asc(basicContractView[item.id])
+ item.desc ? desc(basicContractTemplateStatsView[item.id]) : asc(basicContractTemplateStatsView[item.id])
)
- : [asc(basicContractView.createdAt)];
+ : [asc(basicContractTemplateStatsView.lastActivityDate)];
// 트랜잭션 내부에서 Repository 호출
const { data, total } = await db.transaction(async (tx) => {
@@ -659,6 +671,7 @@ export async function getBasicContracts(input: GetBasciContractsSchema) { return { data, pageCount };
} catch (err) {
+ console.log(err)
// 에러 발생 시 디폴트
return { data: [], pageCount: 0 };
}
@@ -666,14 +679,14 @@ export async function getBasicContracts(input: GetBasciContractsSchema) { [JSON.stringify(input)], // 캐싱 키
{
revalidate: 3600,
- tags: ["basicContractView"], // revalidateTag("basicContractView") 호출 시 무효화
+ tags: ["basicContractTemplateStatsView"], // revalidateTag("basicContractTemplateStatsView") 호출 시 무효화
}
)();
}
export async function getBasicContractsByVendorId(
- input: GetBasciContractsSchema,
+ input: GetBasciContractsVendorSchema,
vendorId: number
) {
// return unstable_cache(
@@ -726,14 +739,14 @@ export async function getBasicContractsByVendorId( // 트랜잭션 내부에서 Repository 호출
const { data, total } = await db.transaction(async (tx) => {
- const data = await selectBasicContracts(tx, {
+ const data = await selectBasicContractsVendor(tx, {
where,
orderBy,
offset,
limit: input.perPage,
});
- const total = await countBasicContracts(tx, where);
+ const total = await countBasicContractsVendor(tx, where);
return { data, total };
});
@@ -753,6 +766,91 @@ export async function getBasicContractsByVendorId( // )();
}
+
+export async function getBasicContractsByTemplateId(
+ input: GetBasciContractsByIdSchema,
+ templateId: number
+) {
+ // return unstable_cache(
+ // async () => {
+ try {
+
+ console.log(input.sort)
+ const offset = (input.page - 1) * input.perPage;
+
+ // const advancedTable = input.flags.includes("advancedTable");
+ const advancedTable = true;
+
+ // advancedTable 모드면 filterColumns()로 where 절 구성
+ const advancedWhere = filterColumns({
+ table: basicContractView,
+ filters: input.filters,
+ joinOperator: input.joinOperator,
+ });
+
+ let globalWhere;
+ if (input.search) {
+ const s = `%${input.search}%`;
+ globalWhere = or(
+ ilike(basicContractView.templateName, s),
+ ilike(basicContractView.vendorName, s),
+ ilike(basicContractView.vendorCode, s),
+ ilike(basicContractView.vendorEmail, s),
+ ilike(basicContractView.status, s)
+ );
+ // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+ }
+
+ // 벤더 ID 필터링 조건 추가
+ const templateCondition = eq(basicContractView.templateId, templateId);
+
+ const finalWhere = and(
+ // 항상 벤더 ID 조건을 포함
+ templateCondition,
+ // 기존 조건들
+ advancedWhere,
+ globalWhere
+ );
+
+ const where = finalWhere;
+
+ const orderBy =
+ input.sort.length > 0
+ ? input.sort.map((item) =>
+ item.desc ? desc(basicContractView[item.id]) : asc(basicContractView[item.id])
+ )
+ : [asc(basicContractView.createdAt)];
+
+ // 트랜잭션 내부에서 Repository 호출
+ const { data, total } = await db.transaction(async (tx) => {
+ const data = await selectBasicContractsById(tx, {
+ where,
+ orderBy,
+ offset,
+ limit: input.perPage,
+ });
+
+ const total = await countBasicContractsById(tx, where);
+ return { data, total };
+ });
+
+ const pageCount = Math.ceil(total / input.perPage);
+
+ return { data, pageCount };
+ } catch (err) {
+ // 에러 발생 시 디폴트\
+ console.log(err)
+ return { data: [], pageCount: 0 };
+ }
+ // },
+ // [JSON.stringify(input), String(vendorId)], // 캐싱 키에 vendorId 추가
+ // {
+ // revalidate: 3600,
+ // tags: ["basicContractView-vendor"], // revalidateTag("basicContractView") 호출 시 무효화
+ // }
+ // )();
+}
+
export async function getAllTemplates(): Promise<BasicContractTemplate[]> {
try {
return await findAllTemplates();
@@ -1677,4 +1775,1191 @@ export async function uploadSurveyFile(file: File, contractId: number, answerId: message: error instanceof Error ? error.message : '파일 업로드에 실패했습니다.'
};
}
+}
+
+
+// 기존 응답 조회를 위한 타입
+export interface ExistingResponse {
+ responseId: number;
+ status: string;
+ completedAt: string | null;
+ answers: {
+ questionId: number;
+ answerValue: string | null;
+ detailText: string | null;
+ otherText: string | null;
+ files: Array<{
+ id: number;
+ fileName: string;
+ filePath: string;
+ fileSize: number;
+ }>;
+ }[];
+}
+
+// 기존 응답 조회 서버 액션
+export async function getExistingSurveyResponse(
+ contractId: number,
+ templateId: number
+): Promise<{ success: boolean; data: ExistingResponse | null; message?: string }> {
+ try {
+ // 1. 해당 계약서의 응답 조회
+ const response = await db
+ .select()
+ .from(complianceResponses)
+ .where(
+ and(
+ eq(complianceResponses.basicContractId, contractId),
+ eq(complianceResponses.templateId, templateId)
+ )
+ )
+ .limit(1);
+
+ if (!response || response.length === 0) {
+ return { success: true, data: null };
+ }
+
+ const responseData = response[0];
+
+ // 2. 해당 응답의 모든 답변 조회
+ const answers = await db
+ .select({
+ questionId: complianceResponseAnswers.questionId,
+ answerValue: complianceResponseAnswers.answerValue,
+ detailText: complianceResponseAnswers.detailText,
+ otherText: complianceResponseAnswers.otherText,
+ answerId: complianceResponseAnswers.id,
+ })
+ .from(complianceResponseAnswers)
+ .where(eq(complianceResponseAnswers.responseId, responseData.id));
+
+ // 3. 각 답변의 파일들 조회
+ const answerIds = answers.map(a => a.answerId);
+ const files = answerIds.length > 0
+ ? await db
+ .select()
+ .from(complianceResponseFiles)
+ .where(inArray(complianceResponseFiles.answerId, answerIds))
+ : [];
+
+ // 4. 답변별 파일 그룹화
+ const filesByAnswerId = files.reduce((acc, file) => {
+ if (!acc[file.answerId]) {
+ acc[file.answerId] = [];
+ }
+ acc[file.answerId].push({
+ id: file.id,
+ fileName: file.fileName,
+ filePath: file.filePath,
+ fileSize: file.fileSize || 0,
+ });
+ return acc;
+ }, {} as Record<number, Array<{id: number; fileName: string; filePath: string; fileSize: number}>>);
+
+ // 5. 최종 데이터 구성
+ const answersWithFiles = answers.map(answer => ({
+ questionId: answer.questionId,
+ answerValue: answer.answerValue,
+ detailText: answer.detailText,
+ otherText: answer.otherText,
+ files: filesByAnswerId[answer.answerId] || [],
+ }));
+
+ return {
+ success: true,
+ data: {
+ responseId: responseData.id,
+ status: responseData.status,
+ completedAt: responseData.completedAt?.toISOString() || null,
+ answers: answersWithFiles,
+ },
+ };
+
+ } catch (error) {
+ console.error('기존 설문 응답 조회 실패:', error);
+ return {
+ success: false,
+ data: null,
+ message: '기존 응답을 불러오는데 실패했습니다.'
+ };
+ }
+}
+
+export type GtcVendorData = {
+ vendorDocument: {
+ id: number;
+ name: string;
+ description: string | null;
+ version: string;
+ reviewStatus: string;
+ vendorId: number;
+ baseDocumentId: number;
+ vendorName: string;
+ vendorCode: string;
+ };
+ clauses: Array<{
+ id: number;
+ baseClauseId: number;
+ vendorDocumentId: number;
+ parentId: number | null;
+ depth: number;
+ sortOrder: string;
+ fullPath: string | null;
+ reviewStatus: string;
+ negotiationNote: string | null;
+ isExcluded: boolean;
+
+ // 실제 표시될 값들 (수정된 값이 우선, 없으면 기본값)
+ effectiveItemNumber: string;
+ effectiveCategory: string | null;
+ effectiveSubtitle: string;
+ effectiveContent: string | null;
+
+ // 기본 조항 정보
+ baseItemNumber: string;
+ baseCategory: string | null;
+ baseSubtitle: string;
+ baseContent: string | null;
+
+ // 수정 여부
+ hasModifications: boolean;
+ isNumberModified: boolean;
+ isCategoryModified: boolean;
+ isSubtitleModified: boolean;
+ isContentModified: boolean;
+
+ // 코멘트 관련
+ hasComment: boolean;
+ pendingComment: string | null;
+ }>;
+};
+
+/**
+ * 현재 사용자(벤더)의 GTC 데이터를 가져옵니다.
+ * @param contractId 기본 GTC 문서 ID (선택사항, 없으면 가장 최신 문서 사용)
+ * @returns GTC 벤더 데이터 또는 null
+ */
+export async function getVendorGtcData(contractId?: number): Promise<GtcVendorData | null> {
+ try {
+ const session = await getServerSession(authOptions);
+ if (!session?.user?.companyId) {
+ throw new Error("회사 정보가 없습니다.");
+ }
+
+ console.log(contractId, "contractId");
+
+ const companyId = session.user.companyId;
+ const vendorId = companyId; // companyId를 vendorId로 사용
+
+ // 1. 계약 정보 가져오기
+ const existingContract = await db.query.basicContract.findFirst({
+ where: eq(basicContract.id, contractId),
+ });
+
+ if (!existingContract) {
+ throw new Error("계약을 찾을 수 없습니다.");
+ }
+
+ // 2. 계약 템플릿 정보 가져오기
+ const existingContractTemplate = await db.query.basicContractTemplates.findFirst({
+ where: eq(basicContractTemplates.id, existingContract.templateId), // id가 아니라 templateId여야 할 것 같음
+ });
+
+ if (!existingContractTemplate) {
+ throw new Error("계약 템플릿을 찾을 수 없습니다.");
+ }
+
+ // 3. General 타입인지 확인
+ const isGeneral = existingContractTemplate.templateName.toLowerCase().includes('general');
+
+ let targetBaseDocumentId: number;
+
+ if (isGeneral) {
+ // General인 경우: type이 'standard'인 활성 상태의 첫 번째 문서 사용
+ const standardGtcDoc = await db.query.gtcDocuments.findFirst({
+ where: and(
+ eq(gtcDocuments.type, 'standard'),
+ eq(gtcDocuments.isActive, true)
+ ),
+ orderBy: [desc(gtcDocuments.revision), desc(gtcDocuments.createdAt)] // 최신 리비전 우선
+ });
+
+ if (!standardGtcDoc) {
+ throw new Error("표준 GTC 문서를 찾을 수 없습니다.");
+ }
+
+ targetBaseDocumentId = standardGtcDoc.id;
+ console.log(`표준 GTC 문서 사용: ${targetBaseDocumentId}`);
+
+ } else {
+ // General이 아닌 경우: 프로젝트별 GTC 문서 사용
+ const projectCode = existingContractTemplate.templateName.split(" ")[0];
+
+ if (!projectCode) {
+ throw new Error("템플릿 이름에서 프로젝트 코드를 찾을 수 없습니다.");
+ }
+
+ // 프로젝트 찾기
+ const existingProject = await db.query.projects.findFirst({
+ where: eq(projects.code, projectCode),
+ });
+
+ if (!existingProject) {
+ throw new Error(`프로젝트를 찾을 수 없습니다: ${projectCode}`);
+ }
+
+ // 해당 프로젝트의 GTC 문서 찾기
+ const projectGtcDoc = await db.query.gtcDocuments.findFirst({
+ where: and(
+ eq(gtcDocuments.type, 'project'),
+ eq(gtcDocuments.projectId, existingProject.id),
+ eq(gtcDocuments.isActive, true)
+ ),
+ orderBy: [desc(gtcDocuments.revision), desc(gtcDocuments.createdAt)] // 최신 리비전 우선
+ });
+
+ if (!projectGtcDoc) {
+ console.warn(`프로젝트 ${projectCode}에 대한 GTC 문서가 없습니다. 표준 GTC 문서를 사용합니다.`);
+
+ // 프로젝트별 GTC가 없으면 표준 GTC 사용
+ const standardGtcDoc = await db.query.gtcDocuments.findFirst({
+ where: and(
+ eq(gtcDocuments.type, 'standard'),
+ eq(gtcDocuments.isActive, true)
+ ),
+ orderBy: [desc(gtcDocuments.revision), desc(gtcDocuments.createdAt)]
+ });
+
+ if (!standardGtcDoc) {
+ throw new Error("표준 GTC 문서도 찾을 수 없습니다.");
+ }
+
+ targetBaseDocumentId = standardGtcDoc.id;
+ } else {
+ targetBaseDocumentId = projectGtcDoc.id;
+ console.log(`프로젝트 GTC 문서 사용: ${targetBaseDocumentId} (프로젝트: ${projectCode})`);
+ }
+ }
+
+ // 4. 벤더 문서 정보 가져오기 (없어도 기본 조항은 보여줌)
+ const vendorDocResult = await db
+ .select({
+ id: gtcVendorDocuments.id,
+ name: gtcVendorDocuments.name,
+ description: gtcVendorDocuments.description,
+ version: gtcVendorDocuments.version,
+ reviewStatus: gtcVendorDocuments.reviewStatus,
+ vendorId: gtcVendorDocuments.vendorId,
+ baseDocumentId: gtcVendorDocuments.baseDocumentId,
+ vendorName: vendors.vendorName,
+ vendorCode: vendors.vendorCode,
+ })
+ .from(gtcVendorDocuments)
+ .leftJoin(vendors, eq(gtcVendorDocuments.vendorId, vendors.id))
+ .where(
+ and(
+ eq(gtcVendorDocuments.vendorId, vendorId),
+ eq(gtcVendorDocuments.baseDocumentId, targetBaseDocumentId),
+ eq(gtcVendorDocuments.isActive, true)
+ )
+ )
+ .limit(1);
+
+ // 벤더 문서가 없으면 기본 정보로 생성
+ const vendorDocument = vendorDocResult.length > 0 ? vendorDocResult[0] : {
+ id: null, // 벤더 문서가 아직 생성되지 않음
+ name: `GTC 검토 (벤더 ID: ${vendorId})`,
+ description: "기본 GTC 조항 검토",
+ version: "1.0",
+ reviewStatus: "pending",
+ vendorId: vendorId,
+ baseDocumentId: targetBaseDocumentId,
+ vendorName: "Unknown Vendor",
+ vendorCode: "UNKNOWN"
+ };
+
+ if (vendorDocResult.length === 0) {
+ console.info(`벤더 ID ${vendorId}에 대한 GTC 벤더 문서가 없습니다. 기본 조항만 표시합니다. (baseDocumentId: ${targetBaseDocumentId})`);
+ }
+
+ // 5. 기본 조항들 가져오기 (벤더별 수정 사항과 함께)
+ const clausesResult = await db
+ .select({
+ // 기본 조항 정보 (메인)
+ baseClauseId: gtcClauses.id,
+ baseItemNumber: gtcClauses.itemNumber,
+ baseCategory: gtcClauses.category,
+ baseSubtitle: gtcClauses.subtitle,
+ baseContent: gtcClauses.content,
+ baseParentId: gtcClauses.parentId,
+ baseDepth: gtcClauses.depth,
+ baseSortOrder: gtcClauses.sortOrder,
+ baseFullPath: gtcClauses.fullPath,
+
+ // 벤더 조항 정보 (있는 경우만)
+ vendorClauseId: gtcVendorClauses.id,
+ vendorDocumentId: gtcVendorClauses.vendorDocumentId,
+ reviewStatus: gtcVendorClauses.reviewStatus,
+ negotiationNote: gtcVendorClauses.negotiationNote,
+ isExcluded: gtcVendorClauses.isExcluded,
+
+ // 수정된 값들 (있는 경우만)
+ modifiedItemNumber: gtcVendorClauses.modifiedItemNumber,
+ modifiedCategory: gtcVendorClauses.modifiedCategory,
+ modifiedSubtitle: gtcVendorClauses.modifiedSubtitle,
+ modifiedContent: gtcVendorClauses.modifiedContent,
+
+ // 수정 여부
+ isNumberModified: gtcVendorClauses.isNumberModified,
+ isCategoryModified: gtcVendorClauses.isCategoryModified,
+ isSubtitleModified: gtcVendorClauses.isSubtitleModified,
+ isContentModified: gtcVendorClauses.isContentModified,
+ })
+ .from(gtcClauses)
+ .leftJoin(gtcVendorClauses, and(
+ eq(gtcVendorClauses.baseClauseId, gtcClauses.id),
+ vendorDocument.id ? eq(gtcVendorClauses.vendorDocumentId, vendorDocument.id) : sql`false`, // 벤더 문서가 없으면 조인하지 않음
+ eq(gtcVendorClauses.isActive, true)
+ ))
+ .where(
+ and(
+ eq(gtcClauses.documentId, targetBaseDocumentId),
+ eq(gtcClauses.isActive, true)
+ )
+ )
+ .orderBy(gtcClauses.sortOrder);
+
+ // 6. 데이터 변환 및 추가 정보 계산
+ const clauses = clausesResult.map(clause => {
+ // 벤더별 수정사항이 있는지 확인
+ const hasVendorData = !!clause.vendorClauseId;
+
+ const hasModifications = hasVendorData && (
+ clause.isNumberModified ||
+ clause.isCategoryModified ||
+ clause.isSubtitleModified ||
+ clause.isContentModified
+ );
+
+ const hasComment = hasVendorData && !!clause.negotiationNote;
+
+ return {
+ // 벤더 조항 ID (있는 경우만, 없으면 null)
+ // id: clause.vendorClauseId,
+ id: clause.baseClauseId,
+ vendorClauseId: clause.vendorClauseId,
+ vendorDocumentId: hasVendorData ? clause.vendorDocumentId : null,
+
+ // 기본 조항의 계층 구조 정보 사용
+ parentId: clause.baseParentId,
+ depth: clause.baseDepth,
+ sortOrder: clause.baseSortOrder,
+ fullPath: clause.baseFullPath,
+
+ // 상태 정보 (벤더 데이터가 있는 경우만)
+ reviewStatus: clause.reviewStatus || 'pending',
+ negotiationNote: clause.negotiationNote,
+ isExcluded: clause.isExcluded || false,
+
+ // 실제 표시될 값들 (수정된 값이 있으면 그것을, 없으면 기본값)
+ effectiveItemNumber: clause.modifiedItemNumber || clause.baseItemNumber,
+ effectiveCategory: clause.modifiedCategory || clause.baseCategory,
+ effectiveSubtitle: clause.modifiedSubtitle || clause.baseSubtitle,
+ effectiveContent: clause.modifiedContent || clause.baseContent,
+
+ // 기본 조항 정보
+ baseItemNumber: clause.baseItemNumber,
+ baseCategory: clause.baseCategory,
+ baseSubtitle: clause.baseSubtitle,
+ baseContent: clause.baseContent,
+
+ // 수정 여부
+ hasModifications,
+ isNumberModified: clause.isNumberModified || false,
+ isCategoryModified: clause.isCategoryModified || false,
+ isSubtitleModified: clause.isSubtitleModified || false,
+ isContentModified: clause.isContentModified || false,
+
+ // 코멘트 관련
+ hasComment,
+ pendingComment: null, // 클라이언트에서 관리
+ };
+ });
+
+ return {
+ vendorDocument,
+ clauses,
+ };
+
+ } catch (error) {
+ console.error('GTC 벤더 데이터 가져오기 실패:', error);
+ throw error;
+ }
+}
+
+
+interface ClauseUpdateData {
+ itemNumber: string;
+ category: string | null;
+ subtitle: string;
+ content: string | null;
+ comment: string;
+}
+
+interface VendorDocument {
+ id: number | null;
+ vendorId: number;
+ baseDocumentId: number;
+ name: string;
+ description: string;
+ version: string;
+}
+
+export async function updateVendorClause(
+ baseClauseId: number,
+ vendorClauseId: number | null,
+ clauseData: ClauseUpdateData,
+ vendorDocument?: VendorDocument
+): Promise<{ success: boolean; error?: string; vendorClauseId?: number; vendorDocumentId?: number }> {
+ try {
+ const session = await getServerSession(authOptions);
+ if (!session?.user?.companyId) {
+ return { success: false, error: "회사 정보가 없습니다." };
+ }
+
+ const companyId = session.user.companyId;
+ const vendorId = companyId; // companyId를 vendorId로 사용
+ const userId = Number(session.user.id);
+
+ // 1. 기본 조항 정보 가져오기 (비교용)
+ const baseClause = await db.query.gtcClauses.findFirst({
+ where: eq(gtcClauses.id, baseClauseId),
+ });
+
+ if (!baseClause) {
+ return { success: false, error: "기본 조항을 찾을 수 없습니다." };
+ }
+
+ // 2. 벤더 문서 ID 확보 (없으면 생성)
+ let finalVendorDocumentId = vendorDocument?.id;
+
+ if (!finalVendorDocumentId && vendorDocument) {
+ // 벤더 문서 생성
+ const newVendorDoc = await db.insert(gtcVendorDocuments).values({
+ vendorId: vendorId,
+ baseDocumentId: vendorDocument.baseDocumentId,
+ name: vendorDocument.name,
+ description: vendorDocument.description,
+ version: vendorDocument.version,
+ reviewStatus: 'reviewing',
+ createdById: userId,
+ updatedById: userId,
+ }).returning({ id: gtcVendorDocuments.id });
+
+ if (newVendorDoc.length === 0) {
+ return { success: false, error: "벤더 문서 생성에 실패했습니다." };
+ }
+
+ finalVendorDocumentId = newVendorDoc[0].id;
+ console.log(`새 벤더 문서 생성: ${finalVendorDocumentId}`);
+ }
+
+ if (!finalVendorDocumentId) {
+ return { success: false, error: "벤더 문서 ID를 확보할 수 없습니다." };
+ }
+
+ // 3. 수정 여부 확인
+ const isNumberModified = clauseData.itemNumber !== baseClause.itemNumber;
+ const isCategoryModified = clauseData.category !== baseClause.category;
+ const isSubtitleModified = clauseData.subtitle !== baseClause.subtitle;
+ const isContentModified = clauseData.content !== baseClause.content;
+
+ const hasAnyModifications = isNumberModified || isCategoryModified || isSubtitleModified || isContentModified;
+ const hasComment = !!(clauseData.comment?.trim());
+
+ // 4. 벤더 조항 데이터 준비
+ const vendorClauseData = {
+ vendorDocumentId: finalVendorDocumentId,
+ baseClauseId: baseClauseId,
+ parentId: baseClause.parentId,
+ depth: baseClause.depth,
+ sortOrder: baseClause.sortOrder,
+ fullPath: baseClause.fullPath,
+
+ // 수정된 값들 (수정되지 않았으면 null로 저장)
+ modifiedItemNumber: isNumberModified ? clauseData.itemNumber : null,
+ modifiedCategory: isCategoryModified ? clauseData.category : null,
+ modifiedSubtitle: isSubtitleModified ? clauseData.subtitle : null,
+ modifiedContent: isContentModified ? clauseData.content : null,
+
+ // 수정 여부 플래그
+ isNumberModified,
+ isCategoryModified,
+ isSubtitleModified,
+ isContentModified,
+
+ // 상태 정보
+ reviewStatus: (hasAnyModifications || hasComment) ? 'reviewing' : 'draft',
+ negotiationNote: clauseData.comment?.trim() || null,
+ editReason: clauseData.comment?.trim() || null, // 수정 이유도 동일하게 저장
+
+ updatedAt: new Date(),
+ updatedById: userId,
+ };
+
+ let finalVendorClauseId = vendorClauseId;
+
+ // 5. 벤더 조항 생성 또는 업데이트
+ if (vendorClauseId) {
+ // 기존 벤더 조항 업데이트
+ await db
+ .update(gtcVendorClauses)
+ .set(vendorClauseData)
+ .where(eq(gtcVendorClauses.id, vendorClauseId));
+
+ console.log(`벤더 조항 업데이트: ${vendorClauseId}`);
+ } else {
+ // 새 벤더 조항 생성
+ const newVendorClause = await db.insert(gtcVendorClauses).values({
+ ...vendorClauseData,
+ createdById: userId,
+ }).returning({ id: gtcVendorClauses.id });
+
+ if (newVendorClause.length === 0) {
+ return { success: false, error: "벤더 조항 생성에 실패했습니다." };
+ }
+
+ finalVendorClauseId = newVendorClause[0].id;
+ console.log(`새 벤더 조항 생성: ${finalVendorClauseId}`);
+ }
+
+ // 6. 협의 이력에 기록
+ if (hasAnyModifications || hasComment) {
+ const historyAction = hasAnyModifications ? 'modified' : 'commented';
+ const historyComment = hasAnyModifications
+ ? `조항 수정: ${clauseData.comment || '수정 이유 없음'}`
+ : clauseData.comment;
+
+ await db.insert(gtcNegotiationHistory).values({
+ vendorClauseId: finalVendorClauseId,
+ action: historyAction,
+ comment: historyComment?.trim(),
+ actorType: 'vendor',
+ actorId: session.user.id,
+ actorName: session.user.name,
+ actorEmail: session.user.email,
+ });
+ }
+
+ return {
+ success: true,
+ vendorClauseId: finalVendorClauseId,
+ vendorDocumentId: finalVendorDocumentId
+ };
+
+ } catch (error) {
+ console.error('벤더 조항 업데이트 실패:', error);
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : '알 수 없는 오류가 발생했습니다.'
+ };
+ }
+}
+
+// 기존 함수는 호환성을 위해 유지하되, 새 함수를 호출하도록 변경
+export async function updateVendorClauseComment(
+ clauseId: number,
+ comment: string
+): Promise<{ success: boolean; error?: string }> {
+ console.warn('updateVendorClauseComment is deprecated. Use updateVendorClause instead.');
+
+ // 기본 조항 정보 가져오기
+ const baseClause = await db.query.gtcClauses.findFirst({
+ where: eq(gtcClauses.id, clauseId),
+ });
+
+ if (!baseClause) {
+ return { success: false, error: "기본 조항을 찾을 수 없습니다." };
+ }
+
+ // 기존 벤더 조항 찾기
+ const session = await getServerSession(authOptions);
+ const vendorId = session?.user?.companyId;
+
+ const existingVendorClause = await db.query.gtcVendorClauses.findFirst({
+ where: and(
+ eq(gtcVendorClauses.baseClauseId, clauseId),
+ eq(gtcVendorClauses.isActive, true)
+ ),
+ with: {
+ vendorDocument: true
+ }
+ });
+
+ const clauseData: ClauseUpdateData = {
+ itemNumber: baseClause.itemNumber,
+ category: baseClause.category,
+ subtitle: baseClause.subtitle,
+ content: baseClause.content,
+ comment: comment,
+ };
+
+ const result = await updateVendorClause(
+ clauseId,
+ existingVendorClause?.id || null,
+ clauseData,
+ existingVendorClause?.vendorDocument || undefined
+ );
+
+ return {
+ success: result.success,
+ error: result.error
+ };
+}
+
+
+/**
+ * 벤더 조항 코멘트들의 상태 체크
+ */
+export async function checkVendorClausesCommentStatus(
+ vendorDocumentId: number
+): Promise<{ hasComments: boolean; commentCount: number }> {
+ try {
+ const clausesWithComments = await db
+ .select({
+ id: gtcVendorClauses.id,
+ negotiationNote: gtcVendorClauses.negotiationNote
+ })
+ .from(gtcVendorClauses)
+ .where(
+ and(
+ eq(gtcVendorClauses.vendorDocumentId, vendorDocumentId),
+ eq(gtcVendorClauses.isActive, true)
+ )
+ );
+
+ const commentCount = clausesWithComments.filter(
+ clause => clause.negotiationNote && clause.negotiationNote.trim().length > 0
+ ).length;
+
+ return {
+ hasComments: commentCount > 0,
+ commentCount,
+ };
+
+ } catch (error) {
+ console.error('벤더 조항 코멘트 상태 체크 실패:', error);
+ return { hasComments: false, commentCount: 0 };
+ }
+}
+
+/**
+ * 특정 템플릿의 기본 정보를 조회하는 서버 액션
+ * @param templateId - 조회할 템플릿의 ID
+ * @returns 템플릿 기본 정보 또는 null
+ */
+export async function getBasicContractTemplateInfo(templateId: number) {
+ try {
+ const templateInfo = await db
+ .select({
+ templateId: basicContractTemplates.id,
+ templateName: basicContractTemplates.templateName,
+ revision: basicContractTemplates.revision,
+ status: basicContractTemplates.status,
+ legalReviewRequired: basicContractTemplates.legalReviewRequired,
+ validityPeriod: basicContractTemplates.validityPeriod,
+ fileName: basicContractTemplates.fileName,
+ filePath: basicContractTemplates.filePath,
+ createdAt: basicContractTemplates.createdAt,
+ updatedAt: basicContractTemplates.updatedAt,
+ createdBy: basicContractTemplates.createdBy,
+ updatedBy: basicContractTemplates.updatedBy,
+ disposedAt: basicContractTemplates.disposedAt,
+ restoredAt: basicContractTemplates.restoredAt,
+ })
+ .from(basicContractTemplates)
+ .where(eq(basicContractTemplates.id, templateId))
+ .then((res) => res[0] || null)
+
+ return templateInfo
+ } catch (error) {
+ console.error("Error fetching template info:", error)
+ return null
+ }
+}
+
+
+
+/**
+ * 카테고리 자동 분류 함수
+ */
+function getCategoryFromTemplateName(templateName: string | null): string {
+ if (!templateName) return "기타"
+
+ const templateNameLower = templateName.toLowerCase()
+
+ if (templateNameLower.includes("준법")) {
+ return "CP"
+ } else if (templateNameLower.includes("gtc")) {
+ return "GTC"
+ }
+
+ return "기타"
+}
+
+/**
+ * 법무검토 요청 서버 액션
+ */
+export async function requestLegalReviewAction(
+ contractIds: number[],
+ reviewNote?: string
+): Promise<{ success: boolean; message: string; data?: any }> {
+ try {
+ // 세션 확인
+ const session = await getServerSession(authOptions)
+
+ if (!session?.user) {
+ return {
+ success: false,
+ message: "로그인이 필요합니다."
+ }
+ }
+
+ // 계약서 정보 조회
+ const contracts = await db
+ .select({
+ id: basicContractView.id,
+ vendorId: basicContractView.vendorId,
+ vendorCode: basicContractView.vendorCode,
+ vendorName: basicContractView.vendorName,
+ templateName: basicContractView.templateName,
+ legalReviewRequired: basicContractView.legalReviewRequired,
+ legalReviewRequestedAt: basicContractView.legalReviewRequestedAt,
+ })
+ .from(basicContractView)
+ .where(inArray(basicContractView.id, contractIds))
+
+ if (contracts.length === 0) {
+ return {
+ success: false,
+ message: "선택된 계약서를 찾을 수 없습니다."
+ }
+ }
+
+ // 법무검토 요청 가능한 계약서 필터링
+ const eligibleContracts = contracts.filter(contract =>
+ contract.legalReviewRequired && !contract.legalReviewRequestedAt
+ )
+
+ if (eligibleContracts.length === 0) {
+ return {
+ success: false,
+ message: "법무검토 요청 가능한 계약서가 없습니다."
+ }
+ }
+
+ const currentDate = new Date()
+ const reviewer = session.user.name || session.user.email || "알 수 없음"
+
+ // 트랜잭션으로 처리
+ const results = await db.transaction(async (tx) => {
+ const legalWorkResults = []
+ const contractUpdateResults = []
+
+ // 각 계약서에 대해 legalWorks 레코드 생성
+ for (const contract of eligibleContracts) {
+ const category = getCategoryFromTemplateName(contract.templateName)
+
+ // legalWorks에 레코드 삽입
+ const legalWorkResult = await tx.insert(legalWorks).values({
+ basicContractId: contract.id, // 레퍼런스 ID
+ category: category,
+ status: "검토요청",
+ vendorId: contract.vendorId,
+ vendorCode: contract.vendorCode,
+ vendorName: contract.vendorName || "업체명 없음",
+ isUrgent: false,
+ consultationDate: currentDate.toISOString().split('T')[0], // YYYY-MM-DD 형식
+ reviewer: reviewer,
+ hasAttachment: false, // 기본값, 나중에 첨부파일 로직 추가 시 수정
+ createdAt: currentDate,
+ updatedAt: currentDate,
+ }).returning({ id: legalWorks.id })
+
+ legalWorkResults.push(legalWorkResult[0])
+
+ // basicContract 테이블의 legalReviewRequestedAt 업데이트
+ const contractUpdateResult = await tx
+ .update(basicContract)
+ .set({
+ legalReviewRequestedAt: currentDate,
+ updatedAt: currentDate,
+ })
+ .where(eq(basicContract.id, contract.id))
+ .returning({ id: basicContract.id })
+
+ contractUpdateResults.push(contractUpdateResult[0])
+ }
+
+ return {
+ legalWorks: legalWorkResults,
+ contractUpdates: contractUpdateResults
+ }
+ })
+
+
+ console.log("법무검토 요청 완료:", {
+ requestedBy: reviewer,
+ contractIds: eligibleContracts.map(c => c.id),
+ legalWorkIds: results.legalWorks.map(r => r.id),
+ reviewNote,
+ })
+
+ return {
+ success: true,
+ message: `${eligibleContracts.length}건의 계약서에 대한 법무검토를 요청했습니다.`,
+ data: {
+ processedCount: eligibleContracts.length,
+ totalRequested: contractIds.length,
+ legalWorkIds: results.legalWorks.map(r => r.id),
+ }
+ }
+
+ } catch (error) {
+ console.error("법무검토 요청 중 오류:", error)
+
+ return {
+ success: false,
+ message: "법무검토 요청 중 오류가 발생했습니다. 다시 시도해 주세요.",
+ }
+ }
+}
+
+export async function processBuyerSignatureAction(
+ contractId: number,
+ signedFileData: ArrayBuffer,
+ fileName: string
+): Promise<{ success: boolean; message: string; data?: any }> {
+ try {
+ // 세션 확인
+ const session = await getServerSession(authOptions)
+
+ if (!session?.user) {
+ return {
+ success: false,
+ message: "로그인이 필요합니다."
+ }
+ }
+
+ // 계약서 정보 조회 및 상태 확인
+ const contract = await db
+ .select()
+ .from(basicContractView)
+ .where(eq(basicContractView.id, contractId))
+ .limit(1)
+
+ if (contract.length === 0) {
+ return {
+ success: false,
+ message: "계약서를 찾을 수 없습니다."
+ }
+ }
+
+ const contractData = contract[0]
+
+ // 최종승인 가능 상태 확인
+ if (contractData.completedAt !== null) {
+ return {
+ success: false,
+ message: "이미 완료된 계약서입니다."
+ }
+ }
+
+ if (!contractData.signedFilePath) {
+ return {
+ success: false,
+ message: "협력업체 서명이 완료되지 않았습니다."
+ }
+ }
+
+ if (contractData.legalReviewRequestedAt && !contractData.legalReviewCompletedAt) {
+ return {
+ success: false,
+ message: "법무검토가 완료되지 않았습니다."
+ }
+ }
+
+ // 파일 저장 로직 (기존 파일 덮어쓰기)
+ // TODO: 실제 파일 저장 구현
+ const saveResult = await saveFile({signedFileData,directory: "basicContract/signed" });
+
+ const currentDate = new Date()
+
+ // 계약서 상태 업데이트
+ const updatedContract = await db
+ .update(basicContract)
+ .set({
+ buyerSignedAt: currentDate,
+ completedAt: currentDate,
+ status: "COMPLETED",
+ updatedAt: currentDate,
+ // signedFilePath: savedFilePath, // 새로운 파일 경로로 업데이트
+ })
+ .where(eq(basicContract.id, contractId))
+ .returning()
+
+ // 캐시 재검증
+ revalidatePath("/contracts")
+
+ console.log("구매자 서명 및 최종승인 완료:", {
+ contractId,
+ buyerSigner: session.user.name || session.user.email,
+ completedAt: currentDate,
+ })
+
+ return {
+ success: true,
+ message: "계약서 최종승인이 완료되었습니다.",
+ data: {
+ contractId,
+ completedAt: currentDate,
+ }
+ }
+
+ } catch (error) {
+ console.error("구매자 서명 처리 중 오류:", error)
+
+ return {
+ success: false,
+ message: "최종승인 처리 중 오류가 발생했습니다. 다시 시도해 주세요.",
+ }
+ }
+}
+
+/**
+ * 일괄 최종승인 (서명 다이얼로그 호출용)
+ */
+export async function prepareFinalApprovalAction(
+ contractIds: number[]
+): Promise<{ success: boolean; message: string; contracts?: any[] }> {
+ try {
+ // 세션 확인
+ const session = await getServerSession(authOptions)
+
+ if (!session?.user) {
+ return {
+ success: false,
+ message: "로그인이 필요합니다."
+ }
+ }
+
+ // 계약서 정보 조회
+ const contracts = await db
+ .select()
+ .from(basicContractView)
+ .where(inArray(basicContractView.id, contractIds))
+
+ if (contracts.length === 0) {
+ return {
+ success: false,
+ message: "선택된 계약서를 찾을 수 없습니다."
+ }
+ }
+
+ // 최종승인 가능한 계약서 필터링
+ const eligibleContracts = contracts.filter(contract => {
+ if (contract.completedAt !== null || !contract.signedFilePath) {
+ return false
+ }
+ if (contract.legalReviewRequestedAt && !contract.legalReviewCompletedAt) {
+ return false
+ }
+ return true
+ })
+
+ if (eligibleContracts.length === 0) {
+ return {
+ success: false,
+ message: "최종승인 가능한 계약서가 없습니다."
+ }
+ }
+
+ // 서명 다이얼로그에서 사용할 수 있는 형태로 변환
+ const contractsForSigning = eligibleContracts.map(contract => ({
+ id: contract.id,
+ templateName: contract.templateName,
+ signedFilePath: contract.signedFilePath,
+ signedFileName: contract.signedFileName,
+ vendorName: contract.vendorName,
+ vendorCode: contract.vendorCode,
+ requestedByName: "구매팀", // 최종승인자 표시
+ createdAt: contract.createdAt,
+ // 다른 필요한 필드들...
+ }))
+
+ return {
+ success: true,
+ message: `${eligibleContracts.length}건의 계약서를 최종승인할 준비가 되었습니다.`,
+ contracts: contractsForSigning
+ }
+
+ } catch (error) {
+ console.error("최종승인 준비 중 오류:", error)
+
+ return {
+ success: false,
+ message: "최종승인 준비 중 오류가 발생했습니다.",
+ }
+ }
+}
+
+/**
+ * 서명 없이 승인만 처리 (간단한 승인 방식)
+ */
+export async function quickFinalApprovalAction(
+ contractIds: number[]
+): Promise<{ success: boolean; message: string; data?: any }> {
+ try {
+ // 세션 확인
+ const session = await getServerSession(authOptions)
+
+ if (!session?.user) {
+ return {
+ success: false,
+ message: "로그인이 필요합니다."
+ }
+ }
+
+ // 계약서 정보 조회
+ const contracts = await db
+ .select()
+ .from(basicContract)
+ .where(inArray(basicContract.id, contractIds))
+
+ // 승인 가능한 계약서 필터링
+ const eligibleContracts = contracts.filter(contract => {
+ if (contract.completedAt !== null || !contract.signedFilePath) {
+ return false
+ }
+ if (contract.legalReviewRequestedAt && !contract.legalReviewCompletedAt) {
+ return false
+ }
+ return true
+ })
+
+ if (eligibleContracts.length === 0) {
+ return {
+ success: false,
+ message: "최종승인 가능한 계약서가 없습니다."
+ }
+ }
+
+ const currentDate = new Date()
+ const approver = session.user.name || session.user.email || "알 수 없음"
+
+ // 일괄 업데이트
+ const updatedContracts = await db
+ .update(basicContract)
+ .set({
+ buyerSignedAt: currentDate,
+ completedAt: currentDate,
+ status: "COMPLETED",
+ updatedAt: currentDate,
+ })
+ .where(inArray(basicContract.id, eligibleContracts.map(c => c.id)))
+ .returning({ id: basicContract.id })
+
+ // 캐시 재검증
+ revalidatePath("/contracts")
+
+ console.log("일괄 최종승인 완료:", {
+ approver,
+ contractIds: updatedContracts.map(c => c.id),
+ completedAt: currentDate,
+ })
+
+ return {
+ success: true,
+ message: `${updatedContracts.length}건의 계약서 최종승인이 완료되었습니다.`,
+ data: {
+ processedCount: updatedContracts.length,
+ contractIds: updatedContracts.map(c => c.id),
+ }
+ }
+
+ } catch (error) {
+ console.error("일괄 최종승인 중 오류:", error)
+
+ return {
+ success: false,
+ message: "최종승인 처리 중 오류가 발생했습니다. 다시 시도해 주세요.",
+ }
+ }
+}
+
+
+export async function getVendorSignatureFile() {
+ try {
+ // 세션에서 사용자 정보 가져오기
+ const session = await getServerSession(authOptions)
+
+ if (!session?.user?.companyId) {
+ throw new Error("인증되지 않은 사용자이거나 회사 정보가 없습니다.")
+ }
+
+ // 조건에 맞는 vendor attachment 찾기
+ const signatureAttachment = await db.query.vendorAttachments.findFirst({
+ where: and(
+ eq(vendorAttachments.vendorId, session.user.companyId),
+ eq(vendorAttachments.attachmentType, "SIGNATURE")
+ )
+ })
+
+ if (!signatureAttachment) {
+ return {
+ success: false,
+ error: "서명 파일을 찾을 수 없습니다."
+ }
+ }
+
+ // 파일 읽기
+ let filePath: string;
+ const nasPath = process.env.NAS_PATH || "/evcp_nas"
+
+
+ if (process.env.NODE_ENV === 'production') {
+ // ✅ 프로덕션: NAS 경로 사용
+ filePath = path.join(nasPath, signatureAttachment.filePath);
+
+ } else {
+ // 개발: public 폴더
+ filePath = path.join(process.cwd(), 'public', signatureAttachment.filePath);
+ }
+
+ const fileBuffer = await readFile(filePath)
+
+ // Base64로 인코딩
+ const base64File = fileBuffer.toString('base64')
+
+ return {
+ success: true,
+ data: {
+ id: signatureAttachment.id,
+ fileName: signatureAttachment.fileName,
+ fileType: signatureAttachment.fileType,
+ base64: base64File,
+ // 웹에서 사용할 수 있는 data URL 형식도 제공
+ dataUrl: `data:${signatureAttachment.fileType || 'application/octet-stream'};base64,${base64File}`
+ }
+ }
+
+ } catch (error) {
+ console.error("서명 파일 조회 중 오류:", error)
+ console.log("서명 파일 조회 중 오류:", error)
+
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : "파일을 읽는 중 오류가 발생했습니다."
+ }
+ }
}
\ No newline at end of file diff --git a/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx b/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx new file mode 100644 index 00000000..3b5cdd21 --- /dev/null +++ b/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx @@ -0,0 +1,622 @@ +"use client" + +import * as React from "react" +import { type Table } from "@tanstack/react-table" +import { Download, FileDown, Mail, Scale, CheckCircle, AlertTriangle, Send, Gavel, Check, FileSignature } from "lucide-react" + +import { exportTableToExcel } from "@/lib/export" +import { downloadFile } from "@/lib/file-download" +import { Button } from "@/components/ui/button" +import { BasicContractView } from "@/db/schema" +import { toast } from "sonner" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { Badge } from "@/components/ui/badge" +import { Textarea } from "@/components/ui/textarea" +import { Label } from "@/components/ui/label" +import { Separator } from "@/components/ui/separator" +import { prepareFinalApprovalAction, quickFinalApprovalAction, requestLegalReviewAction } from "../service" +import { BasicContractSignDialog } from "../vendor-table/basic-contract-sign-dialog" + +interface BasicContractDetailTableToolbarActionsProps { + table: Table<BasicContractView> +} + +export function BasicContractDetailTableToolbarActions({ table }: BasicContractDetailTableToolbarActionsProps) { + // 선택된 행들 가져오기 + const selectedRows = table.getSelectedRowModel().rows + const hasSelectedRows = selectedRows.length > 0 + + // 다이얼로그 상태 + const [resendDialog, setResendDialog] = React.useState(false) + const [legalReviewDialog, setLegalReviewDialog] = React.useState(false) + const [finalApproveDialog, setFinalApproveDialog] = React.useState(false) + const [loading, setLoading] = React.useState(false) + const [reviewNote, setReviewNote] = React.useState("") + const [buyerSignDialog, setBuyerSignDialog] = React.useState(false) + const [contractsToSign, setContractsToSign] = React.useState<any[]>([]) + + // 각 버튼별 활성화 조건 계산 + const canBulkDownload = hasSelectedRows && selectedRows.some(row => + row.original.signedFilePath && row.original.signedFileName && row.original.vendorSignedAt + ) + + const canBulkResend = hasSelectedRows + + const canRequestLegalReview = hasSelectedRows && selectedRows.some(row => + row.original.legalReviewRequired && !row.original.legalReviewRequestedAt + ) + + const canFinalApprove = hasSelectedRows && selectedRows.some(row => { + const contract = row.original; + if (contract.completedAt !== null || !contract.signedFilePath) { + return false; + } + if (contract.legalReviewRequestedAt && !contract.legalReviewCompletedAt) { + return false; + } + return true; + }); + + // 필터링된 계약서들 계산 + const resendContracts = selectedRows.map(row => row.original) + + const legalReviewContracts = selectedRows + .map(row => row.original) + .filter(contract => contract.legalReviewRequired && !contract.legalReviewRequestedAt) + + const finalApproveContracts = selectedRows + .map(row => row.original) + .filter(contract => { + if (contract.completedAt !== null || !contract.signedFilePath) { + return false; + } + if (contract.legalReviewRequestedAt && !contract.legalReviewCompletedAt) { + return false; + } + return true; + }); + + const contractsWithoutLegalReview = finalApproveContracts.filter(contract => + !contract.legalReviewRequestedAt && !contract.legalReviewCompletedAt + ); + + // 대량 재발송 + const handleBulkResend = async () => { + if (!hasSelectedRows) { + toast.error("재발송할 계약서를 선택해주세요") + return + } + setResendDialog(true) + } + + // 선택된 계약서들 일괄 다운로드 + const handleBulkDownload = async () => { + if (!canBulkDownload) { + toast.error("다운로드할 파일이 있는 계약서를 선택해주세요") + return + } + + const selectedContracts = selectedRows + .map(row => row.original) + .filter(contract => contract.signedFilePath && contract.signedFileName) + + if (selectedContracts.length === 0) { + toast.error("다운로드할 파일이 없습니다") + return + } + + // 다운로드 시작 알림 + toast.success(`${selectedContracts.length}건의 파일 다운로드를 시작합니다`) + + let successCount = 0 + let failedCount = 0 + const failedFiles: string[] = [] + + // 순차적으로 다운로드 (병렬 다운로드는 브라우저 제한으로 인해 문제가 될 수 있음) + for (let i = 0; i < selectedContracts.length; i++) { + const contract = selectedContracts[i] + + try { + // 진행 상황 표시 + if (selectedContracts.length > 3) { + toast.loading(`다운로드 중... (${i + 1}/${selectedContracts.length})`, { + id: 'bulk-download-progress' + }) + } + + const result = await downloadFile( + contract.signedFilePath!, + contract.signedFileName!, + { + action: 'download', + showToast: false, // 개별 토스트는 비활성화 + onError: (error) => { + console.error(`다운로드 실패 - ${contract.signedFileName}:`, error) + failedFiles.push(`${contract.vendorName || '업체명 없음'} (${contract.signedFileName})`) + failedCount++ + }, + onSuccess: (fileName) => { + console.log(`다운로드 성공 - ${fileName}`) + successCount++ + } + } + ) + + if (result.success) { + successCount++ + } else { + failedCount++ + failedFiles.push(`${contract.vendorName || '업체명 없음'} (${contract.signedFileName})`) + } + + // 다운로드 간격 (브라우저 부하 방지) + if (i < selectedContracts.length - 1) { + await new Promise(resolve => setTimeout(resolve, 300)) + } + + } catch (error) { + console.error(`다운로드 에러 - ${contract.signedFileName}:`, error) + failedCount++ + failedFiles.push(`${contract.vendorName || '업체명 없음'} (${contract.signedFileName})`) + } + } + + // 진행 상황 토스트 제거 + toast.dismiss('bulk-download-progress') + + // 최종 결과 표시 + if (successCount === selectedContracts.length) { + toast.success(`모든 파일 다운로드 완료 (${successCount}건)`) + } else if (successCount > 0) { + toast.warning( + `일부 파일 다운로드 완료\n성공: ${successCount}건, 실패: ${failedCount}건`, + { + duration: 5000, + description: failedFiles.length > 0 + ? `실패한 파일: ${failedFiles.slice(0, 3).join(', ')}${failedFiles.length > 3 ? ` 외 ${failedFiles.length - 3}건` : ''}` + : undefined + } + ) + } else { + toast.error( + `모든 파일 다운로드 실패 (${failedCount}건)`, + { + duration: 5000, + description: failedFiles.length > 0 + ? `실패한 파일: ${failedFiles.slice(0, 3).join(', ')}${failedFiles.length > 3 ? ` 외 ${failedFiles.length - 3}건` : ''}` + : undefined + } + ) + } + + console.log("일괄 다운로드 완료:", { + total: selectedContracts.length, + success: successCount, + failed: failedCount, + failedFiles + }) + } + + // 법무검토 요청 + const handleLegalReviewRequest = async () => { + if (!canRequestLegalReview) { + toast.error("법무검토 요청 가능한 계약서를 선택해주세요") + return + } + setLegalReviewDialog(true) + } + + // 최종승인 + const handleFinalApprove = async () => { + if (!canFinalApprove) { + toast.error("최종승인 가능한 계약서를 선택해주세요") + return + } + setFinalApproveDialog(true) + } + + // 재발송 확인 + const confirmResend = async () => { + setLoading(true) + try { + // TODO: 서버액션 호출 + // await resendContractsAction(resendContracts.map(c => c.id)) + + console.log("대량 재발송:", resendContracts) + toast.success(`${resendContracts.length}건의 계약서 재발송을 완료했습니다`) + setResendDialog(false) + table.toggleAllPageRowsSelected(false) // 선택 해제 + } catch (error) { + toast.error("재발송 중 오류가 발생했습니다") + console.error(error) + } finally { + setLoading(false) + } + } + + // 법무검토 요청 확인 + const confirmLegalReview = async () => { + setLoading(true) + try { + // TODO: 서버액션 호출 + await requestLegalReviewAction(legalReviewContracts.map(c => c.id), reviewNote) + + console.log("법무검토 요청:", legalReviewContracts, "메모:", reviewNote) + toast.success(`${legalReviewContracts.length}건의 법무검토 요청을 완료했습니다`) + setLegalReviewDialog(false) + setReviewNote("") + table.toggleAllPageRowsSelected(false) // 선택 해제 + } catch (error) { + toast.error("법무검토 요청 중 오류가 발생했습니다") + console.error(error) + } finally { + setLoading(false) + } + } + + // 최종승인 확인 (수정됨) + const confirmFinalApprove = async () => { + setLoading(true) + try { + // 먼저 서명 가능한 계약서들을 준비 + const prepareResult = await prepareFinalApprovalAction( + finalApproveContracts.map(c => c.id) + ) + + if (prepareResult.success && prepareResult.contracts) { + // 서명이 필요한 경우 서명 다이얼로그 열기 + setContractsToSign(prepareResult.contracts) + setFinalApproveDialog(false) // 기존 다이얼로그는 닫기 + // buyerSignDialog는 더 이상 필요 없으므로 제거 + } else { + toast.error(prepareResult.message) + } + } catch (error) { + toast.error("최종승인 준비 중 오류가 발생했습니다") + console.error(error) + } finally { + setLoading(false) + } + } + + // 구매자 서명 완료 콜백 + const handleBuyerSignComplete = () => { + setContractsToSign([]) // 계약서 목록 초기화하여 BasicContractSignDialog 언마운트 + table.toggleAllPageRowsSelected(false) + toast.success("모든 계약서의 최종승인이 완료되었습니다!") + } + + // 빠른 승인 (서명 없이) + const confirmQuickApproval = async () => { + setLoading(true) + try { + const result = await quickFinalApprovalAction( + finalApproveContracts.map(c => c.id) + ) + + if (result.success) { + toast.success(result.message) + setFinalApproveDialog(false) + table.toggleAllPageRowsSelected(false) + } else { + toast.error(result.message) + } + } catch (error) { + toast.error("최종승인 중 오류가 발생했습니다") + console.error(error) + } finally { + setLoading(false) + } + } + + return ( + <> + <div className="flex items-center gap-2"> + {/* 일괄 다운로드 버튼 */} + <Button + variant="outline" + size="sm" + onClick={handleBulkDownload} + disabled={!canBulkDownload} + className="gap-2" + title={!hasSelectedRows + ? "계약서를 선택해주세요" + : !canBulkDownload + ? "다운로드할 파일이 있는 계약서를 선택해주세요" + : `${selectedRows.filter(row => row.original.signedFilePath && row.original.signedFileName).length}건 다운로드` + } + > + <FileDown className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline"> + 일괄 다운로드 {hasSelectedRows ? `(${selectedRows.length})` : ''} + </span> + </Button> + + {/* 재발송 버튼 */} + <Button + variant="outline" + size="sm" + onClick={handleBulkResend} + disabled={!canBulkResend} + className="gap-2" + title={!hasSelectedRows ? "계약서를 선택해주세요" : `${selectedRows.length}건 재발송`} + > + <Mail className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline"> + 재발송 {hasSelectedRows ? `(${selectedRows.length})` : ''} + </span> + </Button> + + {/* 법무검토 요청 버튼 */} + <Button + variant="outline" + size="sm" + onClick={handleLegalReviewRequest} + disabled={!canRequestLegalReview} + className="gap-2" + title={!hasSelectedRows + ? "계약서를 선택해주세요" + : !canRequestLegalReview + ? "법무검토 요청 가능한 계약서가 없습니다" + : `${legalReviewContracts.length}건 법무검토 요청` + } + > + <Scale className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline"> + 법무검토 {hasSelectedRows ? `(${selectedRows.length})` : ''} + </span> + </Button> + + {/* 최종승인 버튼 */} + <Button + variant="outline" + size="sm" + onClick={handleFinalApprove} + disabled={!canFinalApprove} + className="gap-2" + title={!hasSelectedRows + ? "계약서를 선택해주세요" + : !canFinalApprove + ? "최종승인 가능한 계약서가 없습니다" + : `${finalApproveContracts.length}건 최종승인` + } + > + <CheckCircle className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline"> + 최종승인 {hasSelectedRows ? `(${selectedRows.length})` : ''} + </span> + </Button> + + {/* 실제 구매자 서명을 위한 BasicContractSignDialog */} + {contractsToSign.length > 0 && ( + <BasicContractSignDialog + contracts={contractsToSign} + onSuccess={handleBuyerSignComplete} + hasSelectedRows={contractsToSign.length > 0} + mode="buyer" // 구매자 모드 prop + t={(key) => key} + /> + )} + + {/* Export 버튼 */} + <Button + variant="outline" + size="sm" + onClick={() => + exportTableToExcel(table, { + filename: "basic-contract-details", + excludeColumns: ["select", "actions"], + }) + } + className="gap-2" + > + <Download className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline">Export</span> + </Button> + </div> + + {/* 재발송 다이얼로그 */} + <Dialog open={resendDialog} onOpenChange={setResendDialog}> + <DialogContent className="max-w-2xl"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <Send className="size-5" /> + 계약서 재발송 확인 + </DialogTitle> + <DialogDescription> + 선택한 {resendContracts.length}건의 계약서를 재발송합니다. + </DialogDescription> + </DialogHeader> + + <div className="max-h-60 overflow-y-auto"> + <div className="space-y-3"> + {resendContracts.map((contract, index) => ( + <div key={contract.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> + <div className="flex-1"> + <div className="font-medium">{contract.vendorName || '업체명 없음'}</div> + <div className="text-sm text-gray-500"> + {contract.vendorCode || '코드 없음'} | {contract.templateName || '템플릿명 없음'} + </div> + </div> + <Badge variant="secondary">{contract.status}</Badge> + </div> + ))} + </div> + </div> + + <DialogFooter> + <Button + variant="outline" + onClick={() => setResendDialog(false)} + disabled={loading} + > + 취소 + </Button> + <Button + onClick={confirmResend} + disabled={loading} + className="gap-2" + > + <Send className="size-4" /> + {loading ? "재발송 중..." : `${resendContracts.length}건 재발송`} + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + + {/* 법무검토 요청 다이얼로그 */} + <Dialog open={legalReviewDialog} onOpenChange={setLegalReviewDialog}> + <DialogContent className="max-w-2xl"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <Gavel className="size-5" /> + 법무검토 요청 + </DialogTitle> + <DialogDescription> + 선택한 {legalReviewContracts.length}건의 계약서에 대한 법무검토를 요청합니다. + </DialogDescription> + </DialogHeader> + + <div className="space-y-4"> + <div className="max-h-48 overflow-y-auto"> + <div className="space-y-3"> + {legalReviewContracts.map((contract, index) => ( + <div key={contract.id} className="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> + <div className="flex-1"> + <div className="font-medium">{contract.vendorName || '업체명 없음'}</div> + <div className="text-sm text-gray-500"> + {contract.vendorCode || '코드 없음'} | {contract.templateName || '템플릿명 없음'} + </div> + </div> + <Badge variant="secondary">{contract.status}</Badge> + </div> + ))} + </div> + </div> + + <Separator /> + + <div className="space-y-2"> + <Label htmlFor="review-note">검토 요청 메모 (선택사항)</Label> + <Textarea + id="review-note" + placeholder="법무팀에게 전달할 특별한 요청사항이나 검토 포인트를 입력해주세요..." + value={reviewNote} + onChange={(e) => setReviewNote(e.target.value)} + rows={3} + /> + </div> + </div> + + <DialogFooter> + <Button + variant="outline" + onClick={() => { + setLegalReviewDialog(false) + setReviewNote("") + }} + disabled={loading} + > + 취소 + </Button> + <Button + onClick={confirmLegalReview} + disabled={loading} + className="gap-2" + > + <Gavel className="size-4" /> + {loading ? "요청 중..." : `${legalReviewContracts.length}건 검토요청`} + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + + {/* 최종승인 다이얼로그 */} + <Dialog open={finalApproveDialog} onOpenChange={setFinalApproveDialog}> + <DialogContent className="max-w-2xl"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <Check className="size-5" /> + 최종승인 전 확인 + </DialogTitle> + <DialogDescription> + 선택한 {finalApproveContracts.length}건의 계약서를 최종승인을 위해 서명을 호출합니다. + </DialogDescription> + </DialogHeader> + + <div className="space-y-4"> + {contractsWithoutLegalReview.length > 0 && ( + <div className="flex items-start gap-3 p-4 bg-amber-50 border border-amber-200 rounded-lg"> + <AlertTriangle className="size-5 text-amber-600 flex-shrink-0 mt-0.5" /> + <div> + <div className="font-medium text-amber-800">법무검토 없이 승인되는 계약서</div> + <div className="text-sm text-amber-700 mt-1"> + {contractsWithoutLegalReview.length}건의 계약서가 법무검토 없이 승인됩니다. + 승인 후에는 되돌릴 수 없으니 신중히 검토해주세요. + </div> + </div> + </div> + )} + + <div className="max-h-60 overflow-y-auto"> + <div className="space-y-3"> + {finalApproveContracts.map((contract) => { + const hasLegalReview = contract.legalReviewRequestedAt && contract.legalReviewCompletedAt + const noLegalReview = !contract.legalReviewRequestedAt && !contract.legalReviewCompletedAt + + return ( + <div + key={contract.id} + className={`flex items-center justify-between p-3 rounded-lg ${noLegalReview ? 'bg-amber-50 border border-amber-200' : 'bg-green-50 border border-green-200' + }`} + > + <div className="flex-1"> + <div className="font-medium">{contract.vendorName || '업체명 없음'}</div> + <div className="text-sm text-gray-500"> + {contract.vendorCode || '코드 없음'} | {contract.templateName || '템플릿명 없음'} + </div> + {noLegalReview && ( + <div className="text-xs text-amber-600 mt-1">법무검토 없음</div> + )} + {hasLegalReview && ( + <div className="text-xs text-green-600 mt-1">법무검토 완료</div> + )} + </div> + <Badge variant="secondary">{contract.status}</Badge> + </div> + ) + })} + </div> + </div> + </div> + + <DialogFooter> + <Button + variant="outline" + onClick={() => setFinalApproveDialog(false)} + disabled={loading} + > + 취소 + </Button> + <Button + onClick={confirmFinalApprove} + disabled={loading} + className="gap-2" + variant={contractsWithoutLegalReview.length > 0 ? "destructive" : "default"} + > + <Check className="size-4" /> + {loading ? "호출 중..." : `${finalApproveContracts.length}건 서명호출`} + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + </> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/status-detail/basic-contracts-detail-columns.tsx b/lib/basic-contract/status-detail/basic-contracts-detail-columns.tsx new file mode 100644 index 00000000..80c39d1e --- /dev/null +++ b/lib/basic-contract/status-detail/basic-contracts-detail-columns.tsx @@ -0,0 +1,418 @@ +// basic-contracts-detail-columns.tsx +"use client" + +import * as React from "react" +import { type DataTableRowAction } from "@/types/table" +import { type ColumnDef } from "@tanstack/react-table" + +import { formatDateTime } from "@/lib/utils" +import { Badge } from "@/components/ui/badge" +import { Checkbox } from "@/components/ui/checkbox" +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { Button } from "@/components/ui/button" +import { MoreHorizontal, Download, Eye, Mail, FileText, Clock } from "lucide-react" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { BasicContractView } from "@/db/schema" +import { downloadFile, quickPreview } from "@/lib/file-download" +import { toast } from "sonner" + +interface GetColumnsProps { + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<BasicContractView> | null>> +} + +const CONTRACT_STATUS_CONFIG = { + PENDING: { label: "발송완료", color: "gray" }, + VENDOR_SIGNED: { label: "협력업체 서명완료", color: "blue" }, + BUYER_SIGNED: { label: "구매팀 서명완료", color: "green" }, + LEGAL_REVIEW_REQUESTED: { label: "법무검토 요청", color: "purple" }, + LEGAL_REVIEW_COMPLETED: { label: "법무검토 완료", color: "indigo" }, + COMPLETED: { label: "계약완료", color: "emerald" }, + REJECTED: { label: "거절됨", color: "red" }, +} as const + +export function getDetailColumns({ setRowAction }: GetColumnsProps): ColumnDef<BasicContractView>[] { + + const selectColumn: ColumnDef<BasicContractView> = { + id: "select", + header: ({ table }) => ( + <Checkbox + checked={ + table.getIsAllPageRowsSelected() || + (table.getIsSomePageRowsSelected() && "indeterminate") + } + onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + className="translate-y-0.5" + /> + ), + cell: ({ row }) => ( + <Checkbox + checked={row.getIsSelected()} + onCheckedChange={(value) => row.toggleSelected(!!value)} + aria-label="Select row" + className="translate-y-0.5" + /> + ), + maxSize: 30, + enableSorting: false, + enableHiding: false, + } + + const actionsColumn: ColumnDef<BasicContractView> = { + id: "actions", + header: "작업", + cell: ({ row }) => { + const contract = row.original + const hasSignedFile = contract.signedFilePath && contract.signedFileName + + const handleDownload = async () => { + if (!hasSignedFile) { + toast.error("다운로드할 파일이 없습니다") + return + } + + await downloadFile( + contract.signedFilePath!, + contract.signedFileName!, + { + action: 'download', + showToast: true, + onError: (error) => { + console.error("Download failed:", error) + }, + onSuccess: (fileName, fileSize) => { + console.log(`Downloaded: ${fileName} (${fileSize} bytes)`) + } + } + ) + } + + const handlePreview = async () => { + if (!hasSignedFile) { + toast.error("미리볼 파일이 없습니다") + return + } + + await quickPreview(contract.signedFilePath!, contract.signedFileName!) + } + + const handleResend = () => { + setRowAction({ type: "resend", row }) + } + + return ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="ghost" className="h-8 w-8 p-0"> + <span className="sr-only">Open menu</span> + <MoreHorizontal className="h-4 w-4" /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end"> + {hasSignedFile && ( + <> + <DropdownMenuItem onClick={handlePreview}> + <Eye className="mr-2 h-4 w-4" /> + 파일 미리보기 + </DropdownMenuItem> + <DropdownMenuItem onClick={handleDownload}> + <Download className="mr-2 h-4 w-4" /> + 파일 다운로드 + </DropdownMenuItem> + </> + )} + <DropdownMenuItem onClick={handleResend}> + <Mail className="mr-2 h-4 w-4" /> + 재발송 + </DropdownMenuItem> + <DropdownMenuItem onClick={() => setRowAction({ type: "view", row })}> + <FileText className="mr-2 h-4 w-4" /> + 상세 정보 + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + ) + }, + enableSorting: false, + enableHiding: false, + maxSize: 80, + } + + return [ + selectColumn, + + // 업체 코드 + { + accessorKey: "vendorCode", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="업체코드" /> + ), + cell: ({ row }) => { + const code = row.getValue("vendorCode") as string | null + return code ? ( + <span className="font-mono text-sm bg-gray-100 px-2 py-1 rounded"> + {code} + </span> + ) : "-" + }, + minSize: 120, + }, + + // 업체명 + { + accessorKey: "vendorName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="업체명" /> + ), + cell: ({ row }) => { + const name = row.getValue("vendorName") as string | null + return ( + <div className="font-medium">{name || "-"}</div> + ) + }, + minSize: 180, + }, + + // 진행상태 + { + accessorKey: "status", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="진행상태" /> + ), + cell: ({ row }) => { + const status = row.getValue("status") as keyof typeof CONTRACT_STATUS_CONFIG + const config = CONTRACT_STATUS_CONFIG[status] || { label: status, color: "gray" } + + const variantMap = { + gray: "secondary", + blue: "default", + green: "default", + purple: "secondary", + indigo: "secondary", + emerald: "default", + red: "destructive", + } as const + + return ( + <Badge variant={variantMap[config.color as keyof typeof variantMap]}> + {config.label} + </Badge> + ) + }, + minSize: 140, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)) + }, + }, + + // 요청일 + { + accessorKey: "createdAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="요청일" /> + ), + cell: ({ row }) => { + const date = row.getValue("createdAt") as Date + return ( + <div className="text-sm"> + <div>{formatDateTime(date, "KR")}</div> + </div> + ) + }, + minSize: 130, + }, + + // 마감일 + { + accessorKey: "deadline", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="마감일" /> + ), + cell: ({ row }) => { + const deadline = row.getValue("deadline") as string | null + const status = row.getValue("status") as string + + if (!deadline) return "-" + + const deadlineDate = new Date(deadline) + const today = new Date() + const isOverdue = deadlineDate < today && !["COMPLETED", "REJECTED"].includes(status) + const isNearDeadline = !isOverdue && deadlineDate.getTime() - today.getTime() < 2 * 24 * 60 * 60 * 1000 // 2일 이내 + + return ( + <div className={`text-sm flex items-center gap-1 ${ + isOverdue ? 'text-red-600 font-medium' : + isNearDeadline ? 'text-orange-600' : + 'text-gray-900' + }`}> + <Clock className="h-3 w-3" /> + <div> + <div>{deadlineDate.toLocaleDateString('ko-KR')}</div> + {isOverdue && <div className="text-xs">(지연)</div>} + {isNearDeadline && !isOverdue && <div className="text-xs">(임박)</div>} + </div> + </div> + ) + }, + minSize: 120, + }, + + // 협력업체 서명일 + { + accessorKey: "vendorSignedAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="협력업체 서명" /> + ), + cell: ({ row }) => { + const date = row.getValue("vendorSignedAt") as Date | null + return date ? ( + <div className="text-sm text-blue-600"> + <div className="font-medium">완료</div> + <div className="text-xs">{formatDateTime(date, "KR")}</div> + </div> + ) : ( + <div className="text-sm text-gray-400">미완료</div> + ) + }, + minSize: 130, + }, + + // 법무검토 요청일 + { + accessorKey: "legalReviewRequestedAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="법무검토 요청" /> + ), + cell: ({ row }) => { + const date = row.getValue("legalReviewRequestedAt") as Date | null + return date ? ( + <div className="text-sm text-purple-600"> + <div className="font-medium">요청됨</div> + <div className="text-xs">{formatDateTime(date, "KR")}</div> + </div> + ) : ( + <div className="text-sm text-gray-400">-</div> + ) + }, + minSize: 140, + }, + + // 법무검토 완료일 + { + accessorKey: "legalReviewCompletedAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="법무검토 완료" /> + ), + cell: ({ row }) => { + const date = row.getValue("legalReviewCompletedAt") as Date | null + const requestedDate = row.getValue("legalReviewRequestedAt") as Date | null + + return date ? ( + <div className="text-sm text-indigo-600"> + <div className="font-medium">완료</div> + <div className="text-xs">{formatDateTime(date, "KR")}</div> + </div> + ) : requestedDate ? ( + <div className="text-sm text-orange-500"> + <div className="font-medium">진행중</div> + <div className="text-xs">검토 대기</div> + </div> + ) : ( + <div className="text-sm text-gray-400">-</div> + ) + }, + minSize: 140, + }, + + // 계약완료일 + { + accessorKey: "completedAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="계약완료" /> + ), + cell: ({ row }) => { + const date = row.getValue("completedAt") as Date | null + return date ? ( + <div className="text-sm text-emerald-600"> + <div className="font-medium">완료</div> + <div className="text-xs">{formatDateTime(date, "KR")}</div> + </div> + ) : ( + <div className="text-sm text-gray-400">미완료</div> + ) + }, + minSize: 120, + }, + + + // 서명된 파일 + { + accessorKey: "signedFileName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="서명파일" /> + ), + cell: ({ row }) => { + const fileName = row.getValue("signedFileName") as string | null + const filePath = row.original.signedFilePath + const vendorSignedAt = row.original.vendorSignedAt + + if (!fileName || !filePath|| !vendorSignedAt) { + return <div className="text-sm text-gray-400">파일 없음</div> + } + + const handleQuickDownload = async (e: React.MouseEvent) => { + e.stopPropagation() + await downloadFile(filePath, fileName, { + action: 'download', + showToast: true + }) + } + + const handleQuickPreview = async (e: React.MouseEvent) => { + e.stopPropagation() + await quickPreview(filePath, fileName) + } + + return ( + <div className="flex items-center gap-2"> + <div className="text-sm"> + <div className="font-medium text-blue-600 truncate max-w-[150px]" title={fileName}> + 서명파일 + </div> + <div className="text-xs text-gray-500">클릭하여 다운로드</div> + </div> + <div className="flex gap-1"> + <Button + variant="ghost" + size="sm" + onClick={handleQuickPreview} + className="h-6 w-6 p-0" + title="미리보기" + > + <Eye className="h-3 w-3" /> + </Button> + <Button + variant="ghost" + size="sm" + onClick={handleQuickDownload} + className="h-6 w-6 p-0" + title="다운로드" + > + <Download className="h-3 w-3" /> + </Button> + </div> + </div> + ) + }, + minSize: 200, + enableSorting: false, + }, + + actionsColumn, + ] +}
\ No newline at end of file diff --git a/lib/basic-contract/status-detail/basic-contracts-detail-table.tsx b/lib/basic-contract/status-detail/basic-contracts-detail-table.tsx new file mode 100644 index 00000000..2698842e --- /dev/null +++ b/lib/basic-contract/status-detail/basic-contracts-detail-table.tsx @@ -0,0 +1,90 @@ +"use client" + +import * as React from "react" +import { DataTable } from "@/components/data-table/data-table" +import { useDataTable } from "@/hooks/use-data-table" +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" +import type { + DataTableAdvancedFilterField, + DataTableRowAction, +} from "@/types/table" +import { getDetailColumns } from "./basic-contracts-detail-columns" +import { getBasicContractsByTemplateId } from "@/lib/basic-contract/service" +import { BasicContractView } from "@/db/schema" +import { BasicContractDetailTableToolbarActions } from "./basic-contract-detail-table-toolbar-actions" + +interface BasicContractsDetailTableProps { + templateId: number + promises: Promise< + [ + Awaited<ReturnType<typeof getBasicContractsByTemplateId>>, + ] + > +} + +export function BasicContractsDetailTable({ templateId, promises }: BasicContractsDetailTableProps) { + const [rowAction, setRowAction] = + React.useState<DataTableRowAction<BasicContractView> | null>(null) + + const [{ data, pageCount }] = React.use(promises) + + console.log(data,"data") + + const columns = React.useMemo( + () => getDetailColumns({ setRowAction }), + [setRowAction] + ) + + const advancedFilterFields: DataTableAdvancedFilterField<BasicContractView>[] = [ + { id: "vendorName", label: "업체명", type: "text" }, + { id: "vendorCode", label: "업체코드", type: "text" }, + { + id: "status", + label: "진행상태", + type: "select", + options: [ + { label: "발송완료", value: "PENDING" }, + { label: "협력업체 서명완료", value: "VENDOR_SIGNED" }, + { label: "구매팀 서명완료", value: "BUYER_SIGNED" }, + { label: "법무검토 요청", value: "LEGAL_REVIEW_REQUESTED" }, + { label: "법무검토 완료", value: "LEGAL_REVIEW_COMPLETED" }, + { label: "계약완료", value: "COMPLETED" }, + { label: "거절됨", value: "REJECTED" }, + ] + }, + { id: "requestedByName", label: "요청자", type: "text" }, + { id: "createdAt", label: "요청일", type: "date" }, + { id: "deadline", label: "마감일", type: "date" }, + { id: "vendorSignedAt", label: "협력업체 서명일", type: "date" }, + { id: "buyerSignedAt", label: "구매팀 서명일", type: "date" }, + { id: "completedAt", label: "계약완료일", type: "date" }, + ] + + const { table } = useDataTable({ + data, + columns, + pageCount, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String(originalRow.id), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + <DataTable table={table}> + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + > + <BasicContractDetailTableToolbarActions table={table} /> + </DataTableAdvancedToolbar> + </DataTable> + </> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/status/basic-contract-columns.tsx b/lib/basic-contract/status/basic-contract-columns.tsx index cc9d9bff..8ae8fa1e 100644 --- a/lib/basic-contract/status/basic-contract-columns.tsx +++ b/lib/basic-contract/status/basic-contract-columns.tsx @@ -8,26 +8,34 @@ import { formatDateTime } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Checkbox } from "@/components/ui/checkbox" import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" -import { - FileActionsDropdown, - FileNameLink -} from "@/components/ui/file-actions" +import { Button } from "@/components/ui/button" +import { MoreHorizontal, Eye, FileText, Calendar } from "lucide-react" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { useRouter } from "next/navigation" +import { BasicContractTemplateStatsView } from "@/db/schema" + +type NextRouter = ReturnType<typeof useRouter>; -import { basicContractColumnsConfig } from "@/config/basicContractColumnsConfig" -import { BasicContractView } from "@/db/schema" interface GetColumnsProps { - setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<BasicContractView> | null>> + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<BasicContractTemplateStatsView> | null>> + router: NextRouter; + } /** - * 공용 파일 다운로드 유틸리티를 사용하는 간소화된 컬럼 정의 + * BasicContractTemplateStatsView용 컬럼 정의 */ -export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<BasicContractView>[] { +export function getColumns({ setRowAction, router }: GetColumnsProps): ColumnDef<BasicContractTemplateStatsView>[] { // ---------------------------------------------------------------- // 1) select 컬럼 (체크박스) // ---------------------------------------------------------------- - const selectColumn: ColumnDef<BasicContractView> = { + const selectColumn: ColumnDef<BasicContractTemplateStatsView> = { id: "select", header: ({ table }) => ( <Checkbox @@ -54,143 +62,252 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<BasicCo } // ---------------------------------------------------------------- - // 2) 파일 다운로드 컬럼 (공용 컴포넌트 사용) + // 2) Actions 컬럼 // ---------------------------------------------------------------- - const downloadColumn: ColumnDef<BasicContractView> = { - id: "download", - header: "", + const actionsColumn: ColumnDef<BasicContractTemplateStatsView> = { + id: "actions", + header: "작업", cell: ({ row }) => { - const template = row.original; - - if (!template.filePath || !template.fileName) { - return null; - } + const template = row.original + const detailUrl = `/evcp/basic-contract/${template.templateId}`; return ( - <FileActionsDropdown - filePath={template.filePath} - fileName={template.fileName} - variant="ghost" - size="icon" - /> - ); + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="ghost" className="h-8 w-8 p-0"> + <span className="sr-only">Open menu</span> + <MoreHorizontal className="h-4 w-4" /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end"> + <DropdownMenuItem onClick={() => router.push(detailUrl)}> + <Eye className="mr-2 h-4 w-4" /> + 상세 보기 + </DropdownMenuItem> + <DropdownMenuItem onClick={() => setRowAction({ type: "view", row })}> + <FileText className="mr-2 h-4 w-4" /> + 템플릿 보기 + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + ) }, - maxSize: 30, enableSorting: false, + enableHiding: false, + maxSize: 80, } // ---------------------------------------------------------------- - // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성 + // 3) 기본 정보 컬럼들 // ---------------------------------------------------------------- - const groupMap: Record<string, ColumnDef<BasicContractView>[]> = {} - - basicContractColumnsConfig.forEach((cfg) => { - const groupName = cfg.group || "_noGroup" - - if (!groupMap[groupName]) { - groupMap[groupName] = [] - } + const basicInfoColumns: ColumnDef<BasicContractTemplateStatsView>[] = [ + { + accessorKey: "templateName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="템플릿명" /> + ), + cell: ({ row }) => { + const name = row.getValue("templateName") as string + return ( + <div className="font-medium"> + {name} + </div> + ) + }, + minSize: 200, + }, + { + accessorKey: "revision", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="리비전" /> + ), + cell: ({ row }) => { + const revision = row.getValue("revision") as number + return ( + <Badge variant="outline"> + v{revision} + </Badge> + ) + }, + minSize: 80, + }, + ] - const childCol: ColumnDef<BasicContractView> = { - accessorKey: cfg.id, - enableResizing: true, + // ---------------------------------------------------------------- + // 4) 발송/처리 현황 컬럼들 + // ---------------------------------------------------------------- + const processStatusColumns: ColumnDef<BasicContractTemplateStatsView>[] = [ + { + accessorKey: "totalSentCount", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title={cfg.label} /> + <DataTableColumnHeaderSimple column={column} title="발송건수" /> ), - meta: { - excelHeader: cfg.excelHeader, - group: cfg.group, - type: cfg.type, + cell: ({ row }) => { + const count = row.getValue("totalSentCount") as number + return ( + <div className="text-center font-medium"> + {count.toLocaleString()} + </div> + ) }, - cell: ({ row, cell }) => { - // 날짜 형식 처리 - if (cfg.id === "createdAt" || cfg.id === "updatedAt") { - const dateVal = cell.getValue() as Date - return formatDateTime(dateVal, "KR") - } + minSize: 100, + }, + { + accessorKey: "overdueCount", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="지연건수" /> + ), + cell: ({ row }) => { + const count = row.getValue("overdueCount") as number + const total = row.getValue("totalSentCount") as number + const isHigh = total > 0 && (count / total) > 0.2 - // Status 컬럼에 Badge 적용 (확장) - if (cfg.id === "status") { - const status = row.getValue(cfg.id) as string - - let variant: "default" | "secondary" | "destructive" | "outline" = "secondary"; - let label = status; - - switch (status) { - case "ACTIVE": - variant = "default"; - label = "활성"; - break; - case "INACTIVE": - variant = "secondary"; - label = "비활성"; - break; - case "PENDING": - variant = "outline"; - label = "대기중"; - break; - case "COMPLETED": - variant = "default"; - label = "완료"; - break; - default: - variant = "secondary"; - label = status; - } - - return <Badge variant={variant}>{label}</Badge> - } - - // ✅ 파일 이름 컬럼 (공용 컴포넌트 사용) - if (cfg.id === "fileName") { - const fileName = cell.getValue() as string; - const filePath = row.original.filePath; - - if (fileName && filePath) { - return ( - <FileNameLink - filePath={filePath} - fileName={fileName} - maxLength={200} - showIcon={true} - /> - ); - } - return fileName || ""; - } - - // 나머지 컬럼은 그대로 값 표시 - return row.getValue(cfg.id) ?? "" + return ( + <div className={`text-center font-medium ${isHigh ? 'text-red-600' : 'text-gray-900'}`}> + {count.toLocaleString()} + </div> + ) }, - minSize: 80, - } + minSize: 100, + }, + { + accessorKey: "unsignedCount", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="미서명건수" /> + ), + cell: ({ row }) => { + const count = row.getValue("unsignedCount") as number + return ( + <div className="text-center font-medium text-orange-600"> + {count.toLocaleString()} + </div> + ) + }, + minSize: 120, + }, + ] - groupMap[groupName].push(childCol) - }) + // ---------------------------------------------------------------- + // 5) 법무검토 현황 컬럼들 + // ---------------------------------------------------------------- + const legalReviewColumns: ColumnDef<BasicContractTemplateStatsView>[] = [ + { + accessorKey: "legalRequestCount", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="법무요청" /> + ), + cell: ({ row }) => { + const count = row.getValue("legalRequestCount") as number + return ( + <div className="text-center font-medium text-purple-600"> + {count.toLocaleString()} + </div> + ) + }, + minSize: 100, + }, + { + accessorKey: "legalCompletedCount", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="법무완료" /> + ), + cell: ({ row }) => { + const count = row.getValue("legalCompletedCount") as number + return ( + <div className="text-center font-medium text-indigo-600"> + {count.toLocaleString()} + </div> + ) + }, + minSize: 100, + }, + { + accessorKey: "contractCompletedCount", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="계약완료" /> + ), + cell: ({ row }) => { + const count = row.getValue("contractCompletedCount") as number + return ( + <div className="text-center font-medium text-indigo-600"> + {count.toLocaleString()} + </div> + ) + }, + minSize: 100, + }, + ] // ---------------------------------------------------------------- - // 4) groupMap에서 실제 상위 컬럼(그룹)을 만들기 + // 6) 성과 지표 컬럼들 // ---------------------------------------------------------------- - const nestedColumns: ColumnDef<BasicContractView>[] = [] + const performanceColumns: ColumnDef<BasicContractTemplateStatsView>[] = [ + { + accessorKey: "avgProcessingDays", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="평균처리일" /> + ), + cell: ({ row }) => { + const days = row.getValue("avgProcessingDays") as number | null + if (!days) return "-" + + const rounded = Math.round(days * 10) / 10 + const isGood = rounded <= 5 + const isWarning = rounded > 5 && rounded <= 10 + + let colorClass = "text-gray-900" + if (isGood) colorClass = "text-green-600" + else if (isWarning) colorClass = "text-orange-600" + else colorClass = "text-red-600" + + return ( + <div className={`text-center font-medium ${colorClass}`}> + {rounded}일 + </div> + ) + }, + minSize: 100, + }, + ] - Object.entries(groupMap).forEach(([groupName, colDefs]) => { - if (groupName === "_noGroup") { - nestedColumns.push(...colDefs) - } else { - nestedColumns.push({ - id: groupName, - header: groupName, - columns: colDefs, - }) - } - }) + // ---------------------------------------------------------------- + // 7) 시간 정보 컬럼들 + // ---------------------------------------------------------------- + const timeInfoColumns: ColumnDef<BasicContractTemplateStatsView>[] = [ + { + accessorKey: "templateCreatedAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="생성일" /> + ), + cell: ({ row }) => { + const date = row.getValue("templateCreatedAt") as Date + return formatDateTime(date, "KR") + }, + minSize: 120, + }, + { + accessorKey: "lastActivityDate", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="최근활동" /> + ), + cell: ({ row }) => { + const date = row.getValue("lastActivityDate") as Date | null + return date ? formatDateTime(date, "KR") : "-" + }, + minSize: 120, + }, + ] // ---------------------------------------------------------------- - // 5) 최종 컬럼 배열 + // 8) 최종 컬럼 배열 (평면 구조) // ---------------------------------------------------------------- return [ selectColumn, - downloadColumn, // ✅ 공용 파일 액션 컴포넌트 사용 - ...nestedColumns, + ...basicInfoColumns, + ...processStatusColumns, + ...legalReviewColumns, + ...performanceColumns, + ...timeInfoColumns, + actionsColumn, ] -} +}
\ No newline at end of file diff --git a/lib/basic-contract/status/basic-contract-table.tsx b/lib/basic-contract/status/basic-contract-table.tsx index 22845144..07707ff0 100644 --- a/lib/basic-contract/status/basic-contract-table.tsx +++ b/lib/basic-contract/status/basic-contract-table.tsx @@ -14,9 +14,9 @@ import type { import { toast } from "sonner"; import { getColumns } from "./basic-contract-columns"; import { getBasicContracts } from "../service"; -import { BasicContractView } from "@/db/schema"; +import { BasicContractTemplateStatsView } from "@/db/schema"; import { BasicContractTableToolbarActions } from "./basicContract-table-toolbar-actions"; - +import { useRouter } from "next/navigation" interface BasicTemplateTableProps { promises: Promise< @@ -26,38 +26,36 @@ interface BasicTemplateTableProps { > } - export function BasicContractsTable({ promises }: BasicTemplateTableProps) { - const [rowAction, setRowAction] = - React.useState<DataTableRowAction<BasicContractView> | null>(null) - + React.useState<DataTableRowAction<BasicContractTemplateStatsView> | null>(null) + const router = useRouter() const [{ data, pageCount }] = React.use(promises) // 컬럼 설정 - 외부 파일에서 가져옴 const columns = React.useMemo( - () => getColumns({ setRowAction }), - [setRowAction] + () => getColumns({ setRowAction,router }), + [setRowAction,router] ) // config 기반으로 필터 필드 설정 - const advancedFilterFields: DataTableAdvancedFilterField<BasicContractView>[] = [ + const advancedFilterFields: DataTableAdvancedFilterField<BasicContractTemplateStatsView>[] = [ { id: "templateName", label: "템플릿명", type: "text" }, - { - id: "status", label: "상태", type: "select", options: [ - { label: "활성", value: "ACTIVE" }, - { label: "비활성", value: "INACTIVE" }, - ] - }, - { id: "userName", label: "요청자", type: "text" }, - { id: "vendorName", label: "업체명", type: "text" }, - { id: "vendorCode", label: "업체코드", type: "text" }, - { id: "vendorEmail", label: "업체대표이메일", type: "text" }, - { id: "createdAt", label: "생성일", type: "date" }, - { id: "updatedAt", label: "수정일", type: "date" }, + { id: "revision", label: "리비전", type: "number" }, + { id: "validityPeriod", label: "유효기간(개월)", type: "number" }, + { id: "totalSentCount", label: "발송건수", type: "number" }, + { id: "overdueCount", label: "지연건수", type: "number" }, + { id: "unsignedCount", label: "미서명건수", type: "number" }, + { id: "legalRequestCount", label: "법무요청건수", type: "number" }, + { id: "legalCompletedCount", label: "법무완료건수", type: "number" }, + { id: "contractCompletedCount", label: "계약완료건수", type: "number" }, + { id: "rejectedCount", label: "거절건수", type: "number" }, + { id: "avgProcessingDays", label: "평균처리일", type: "number" }, + { id: "templateCreatedAt", label: "템플릿 생성일", type: "date" }, + { id: "lastActivityDate", label: "최근활동일", type: "date" }, ]; const { table } = useDataTable({ @@ -68,10 +66,10 @@ export function BasicContractsTable({ promises }: BasicTemplateTableProps) { enablePinning: true, enableAdvancedFilter: true, initialState: { - sorting: [{ id: "createdAt", desc: true }], + sorting: [{ id: "lastActivityDate", desc: true }], columnPinning: { right: ["actions"] }, }, - getRowId: (originalRow) => String(originalRow.id), + getRowId: (originalRow) => String(originalRow.templateId), shallow: false, clearOnDefault: true, }) diff --git a/lib/basic-contract/status/basicContract-table-toolbar-actions.tsx b/lib/basic-contract/status/basicContract-table-toolbar-actions.tsx index cee94790..a74a6e4d 100644 --- a/lib/basic-contract/status/basicContract-table-toolbar-actions.tsx +++ b/lib/basic-contract/status/basicContract-table-toolbar-actions.tsx @@ -7,10 +7,10 @@ import { Download, Upload } from "lucide-react" import { exportTableToExcel } from "@/lib/export" import { Button } from "@/components/ui/button" -import { BasicContractView } from "@/db/schema" +import { BasicContractTemplateStatsView } from "@/db/schema" interface TemplateTableToolbarActionsProps { - table: Table<BasicContractView> + table: Table<BasicContractTemplateStatsView> } export function BasicContractTableToolbarActions({ table }: TemplateTableToolbarActionsProps) { diff --git a/lib/basic-contract/template/add-basic-contract-template-dialog.tsx b/lib/basic-contract/template/add-basic-contract-template-dialog.tsx index 141cb1e3..a248407e 100644 --- a/lib/basic-contract/template/add-basic-contract-template-dialog.tsx +++ b/lib/basic-contract/template/add-basic-contract-template-dialog.tsx @@ -149,6 +149,7 @@ export function AddTemplateDialog() { setAvailableProjects(projects);
} catch (err) {
+ console.log("Failed to load template data", err);
console.error("Failed to load template data", err);
toast.error("템플릿 정보를 불러오는데 실패했습니다.");
}
diff --git a/lib/basic-contract/validations.ts b/lib/basic-contract/validations.ts index bb9e3b8d..53738dfc 100644 --- a/lib/basic-contract/validations.ts +++ b/lib/basic-contract/validations.ts @@ -7,7 +7,7 @@ import { createSearchParamsCache, } from "nuqs/server"
import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
-import { BasicContractTemplate, BasicContractView } from "@/db/schema";
+import { BasicContractTemplate, BasicContractTemplateStatsView, BasicContractView } from "@/db/schema";
export const basicContractTemplateSchema = z.object({
templateName: z.string().min(1, "템플릿 이름은 필수입니다."),
@@ -96,6 +96,25 @@ export const searchParamsCache = createSearchParamsCache({ flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
page: parseAsInteger.withDefault(1),
perPage: parseAsInteger.withDefault(10),
+ sort: getSortingStateParser<BasicContractTemplateStatsView>().withDefault([
+ { id: "lastActivityDate", desc: true },
+ ]),
+
+ // 고급 필터
+ filters: getFiltersStateParser().withDefault([]),
+ joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+ search: parseAsString.withDefault(""),
+
+});
+
+export type GetBasciContractsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>;
+
+
+
+export const searchParamsVendorCache = createSearchParamsCache({
+ flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+ page: parseAsInteger.withDefault(1),
+ perPage: parseAsInteger.withDefault(10),
sort: getSortingStateParser<BasicContractView>().withDefault([
{ id: "createdAt", desc: true },
]),
@@ -107,4 +126,23 @@ export const searchParamsCache = createSearchParamsCache({ });
-export type GetBasciContractsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>;
+export type GetBasciContractsVendorSchema = Awaited<ReturnType<typeof searchParamsVendorCache.parse>>;
+
+
+export const searchParamsCacheByTemplateId = createSearchParamsCache({
+ flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+ page: parseAsInteger.withDefault(1),
+ perPage: parseAsInteger.withDefault(10),
+ sort: getSortingStateParser<BasicContractView>().withDefault([
+ { id: "createdAt", desc: true },
+ ]),
+
+ // 고급 필터
+ filters: getFiltersStateParser().withDefault([]),
+ joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+ search: parseAsString.withDefault(""),
+
+});
+
+export type GetBasciContractsByIdSchema = Awaited<ReturnType<typeof searchParamsCacheByTemplateId.parse>>;
+
diff --git a/lib/basic-contract/vendor-table/basic-contract-sign-dialog.tsx b/lib/basic-contract/vendor-table/basic-contract-sign-dialog.tsx index 319ae4b9..f70bed94 100644 --- a/lib/basic-contract/vendor-table/basic-contract-sign-dialog.tsx +++ b/lib/basic-contract/vendor-table/basic-contract-sign-dialog.tsx @@ -22,14 +22,15 @@ import { Loader2, ArrowRight, Trophy, - Target + Target, + Shield } from "lucide-react"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { useRouter } from "next/navigation" import { BasicContractSignViewer } from "../viewer/basic-contract-sign-viewer"; -import { getVendorAttachments } from "../service"; +import { getVendorAttachments, processBuyerSignatureAction } from "../service"; // 계약서 상태 타입 정의 interface ContractStatus { @@ -42,16 +43,27 @@ interface BasicContractSignDialogProps { contracts: BasicContractView[]; onSuccess?: () => void; hasSelectedRows?: boolean; + mode?: 'vendor' | 'buyer'; + onBuyerSignComplete?: (contractId: number, signedData: ArrayBuffer) => void; t: (key: string) => string; + // 외부 상태 제어를 위한 새로운 props (선택적) + open?: boolean; + onOpenChange?: (open: boolean) => void; } export function BasicContractSignDialog({ contracts, onSuccess, hasSelectedRows = false, - t + mode = 'vendor', + onBuyerSignComplete, + t, + // 새로 추가된 props + open: externalOpen, + onOpenChange: externalOnOpenChange }: BasicContractSignDialogProps) { - const [open, setOpen] = React.useState(false); + // 내부 상태 (외부 제어가 없을 때 사용) + const [internalOpen, setInternalOpen] = React.useState(false); const [selectedContract, setSelectedContract] = React.useState<BasicContractView | null>(null); const [instance, setInstance] = React.useState<null | WebViewerInstance>(null); const [searchTerm, setSearchTerm] = React.useState(""); @@ -64,14 +76,21 @@ export function BasicContractSignDialog({ // 계약서 상태 관리 const [contractStatuses, setContractStatuses] = React.useState<ContractStatus[]>([]); - // 🔥 새로 추가: 서명/설문 완료 상태 관리 + // 서명/설문/GTC 코멘트 완료 상태 관리 const [surveyCompletionStatus, setSurveyCompletionStatus] = React.useState<Record<number, boolean>>({}); const [signatureStatus, setSignatureStatus] = React.useState<Record<number, boolean>>({}); + const [gtcCommentStatus, setGtcCommentStatus] = React.useState<Record<number, { hasComments: boolean; commentCount: number }>>({}); const router = useRouter() - console.log(selectedContract,"selectedContract") - console.log(additionalFiles,"additionalFiles") + // 실제 사용할 open 상태 (외부 제어가 있으면 외부 상태 사용, 없으면 내부 상태 사용) + const isControlledExternally = externalOpen !== undefined; + const open = isControlledExternally ? externalOpen : internalOpen; + + // 모드에 따른 텍스트 + const isBuyerMode = mode === 'buyer'; + const dialogTitle = isBuyerMode ? "구매자 최종승인 서명" : t("basicContracts.dialog.title"); + const signButtonText = isBuyerMode ? "최종승인 완료" : "서명 완료 및 저장"; // 버튼 비활성화 조건 const isButtonDisabled = !hasSelectedRows || contracts.length === 0; @@ -87,29 +106,28 @@ export function BasicContractSignDialog({ return ""; }; - // 🔥 현재 선택된 계약서의 서명 완료 가능 여부 확인 + // 현재 선택된 계약서의 서명 완료 가능 여부 확인 const canCompleteCurrentContract = React.useMemo(() => { if (!selectedContract) return false; const contractId = selectedContract.id; + + // 구매자 모드에서는 설문조사나 GTC 체크 불필요 + if (isBuyerMode) { + const signatureCompleted = signatureStatus[contractId] === true; + return signatureCompleted; + } + + // 협력업체 모드의 기존 로직 const isComplianceTemplate = selectedContract.templateName?.includes('준법'); + const isGTCTemplate = selectedContract.templateName?.includes('GTC'); - // 1. 준법 템플릿인 경우 설문조사 완료 여부 확인 const surveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contractId] === true : true; - - // 2. 서명 완료 여부 확인 + const gtcCompleted = isGTCTemplate ? (gtcCommentStatus[contractId]?.hasComments !== true) : true; const signatureCompleted = signatureStatus[contractId] === true; - console.log('🔍 서명 완료 가능 여부 체크:', { - contractId, - isComplianceTemplate, - surveyCompleted, - signatureCompleted, - canComplete: surveyCompleted && signatureCompleted - }); - - return surveyCompleted && signatureCompleted; - }, [selectedContract, surveyCompletionStatus, signatureStatus]); + return surveyCompleted && gtcCompleted && signatureCompleted; + }, [selectedContract, surveyCompletionStatus, signatureStatus, gtcCommentStatus, isBuyerMode]); // 계약서별 상태 초기화 React.useEffect(() => { @@ -142,7 +160,7 @@ export function BasicContractSignDialog({ return contracts.find(contract => contract.id === nextPendingId) || null; }; - // 다이얼로그 열기/닫기 핸들러 + // 다이얼로그 열기/닫기 핸들러 (외부 제어 지원) const handleOpenChange = (isOpen: boolean) => { if (!isOpen && !allCompleted && completedCount > 0) { // 완료되지 않은 계약서가 있으면 확인 대화상자 @@ -152,7 +170,12 @@ export function BasicContractSignDialog({ if (!confirmClose) return; } - setOpen(isOpen); + // 외부 제어가 있으면 외부 콜백 호출, 없으면 내부 상태 업데이트 + if (isControlledExternally && externalOnOpenChange) { + externalOnOpenChange(isOpen); + } else { + setInternalOpen(isOpen); + } if (!isOpen) { // 다이얼로그 닫을 때 상태 초기화 @@ -160,8 +183,9 @@ export function BasicContractSignDialog({ setSearchTerm(""); setAdditionalFiles([]); setContractStatuses([]); - setSurveyCompletionStatus({}); // 🔥 추가 - setSignatureStatus({}); // 🔥 추가 + setSurveyCompletionStatus({}); + setSignatureStatus({}); + setGtcCommentStatus({}); // WebViewer 인스턴스 정리 if (instance) { try { @@ -202,9 +226,14 @@ export function BasicContractSignDialog({ } } }, [open, contracts, selectedContract, contractStatuses]); - - // 추가 파일 가져오기 useEffect + + // 추가 파일 가져오기 useEffect (구매자 모드에서는 스킵) React.useEffect(() => { + if (isBuyerMode) { + setAdditionalFiles([]); + return; + } + const fetchAdditionalFiles = async () => { if (!selectedContract) { setAdditionalFiles([]); @@ -235,9 +264,9 @@ export function BasicContractSignDialog({ }; fetchAdditionalFiles(); - }, [selectedContract]); + }, [selectedContract, isBuyerMode]); - // 🔥 설문조사 완료 콜백 함수 + // 설문조사 완료 콜백 함수 const handleSurveyComplete = React.useCallback((contractId: number) => { console.log(`📋 설문조사 완료: 계약서 ${contractId}`); setSurveyCompletionStatus(prev => ({ @@ -246,7 +275,7 @@ export function BasicContractSignDialog({ })); }, []); - // 🔥 서명 완료 콜백 함수 + // 서명 완료 콜백 함수 const handleSignatureComplete = React.useCallback((contractId: number) => { console.log(`✍️ 서명 완료: 계약서 ${contractId}`); setSignatureStatus(prev => ({ @@ -255,31 +284,64 @@ export function BasicContractSignDialog({ })); }, []); - // 서명 완료 핸들러 (수정됨) + // GTC 코멘트 상태 변경 콜백 함수 + const handleGtcCommentStatusChange = React.useCallback((contractId: number, hasComments: boolean, commentCount: number) => { + console.log(`📋 GTC 코멘트 상태 변경: 계약서 ${contractId}, 코멘트 ${commentCount}개`); + setGtcCommentStatus(prev => ({ + ...prev, + [contractId]: { hasComments, commentCount } + })); + }, []); + + // 서명 완료 핸들러 const completeSign = async () => { if (!instance || !selectedContract) return; - // 🔥 서명 완료 가능 여부 재확인 + // 서명 완료 가능 여부 재확인 if (!canCompleteCurrentContract) { const contractId = selectedContract.id; - const isComplianceTemplate = selectedContract.templateName?.includes('준법'); - const surveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contractId] === true : true; - const signatureCompleted = signatureStatus[contractId] === true; - if (!surveyCompleted) { - toast.error("준법 설문조사를 먼저 완료해주세요.", { - description: "설문조사 탭에서 모든 필수 항목을 완료해주세요.", - icon: <AlertCircle className="h-5 w-5 text-red-500" /> - }); - return; - } - - if (!signatureCompleted) { - toast.error("계약서에 서명을 먼저 완료해주세요.", { - description: "문서의 서명 필드에 서명해주세요.", - icon: <Target className="h-5 w-5 text-blue-500" /> - }); - return; + if (isBuyerMode) { + const signatureCompleted = signatureStatus[contractId] === true; + + if (!signatureCompleted) { + toast.error("계약서에 서명을 먼저 완료해주세요.", { + description: "문서의 서명 필드에 서명해주세요.", + icon: <Target className="h-5 w-5 text-blue-500" /> + }); + return; + } + } else { + // 협력업체 모드의 기존 검증 로직 + const isComplianceTemplate = selectedContract.templateName?.includes('준법'); + const isGTCTemplate = selectedContract.templateName?.includes('GTC'); + const surveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contractId] === true : true; + const gtcCompleted = isGTCTemplate ? (gtcCommentStatus[contractId]?.hasComments !== true) : true; + const signatureCompleted = signatureStatus[contractId] === true; + + if (!surveyCompleted) { + toast.error("준법 설문조사를 먼저 완료해주세요.", { + description: "설문조사 탭에서 모든 필수 항목을 완료해주세요.", + icon: <AlertCircle className="h-5 w-5 text-red-500" /> + }); + return; + } + + if (!gtcCompleted) { + toast.error("GTC 조항에 코멘트가 있어 서명할 수 없습니다.", { + description: "조항 검토 탭에서 모든 코멘트를 삭제하거나 협의를 완료해주세요.", + icon: <AlertCircle className="h-5 w-5 text-red-500" /> + }); + return; + } + + if (!signatureCompleted) { + toast.error("계약서에 서명을 먼저 완료해주세요.", { + description: "문서의 서명 필드에 서명해주세요.", + icon: <Target className="h-5 w-5 text-blue-500" /> + }); + return; + } } return; @@ -303,73 +365,135 @@ export function BasicContractSignDialog({ xfdfString, downloadType: "pdf", }); - - // FormData 생성 및 파일 추가 - const submitFormData = new FormData(); - submitFormData.append('file', new Blob([data], { type: 'application/pdf' })); - submitFormData.append('tableRowId', selectedContract.id.toString()); - submitFormData.append('templateName', selectedContract.signedFileName || ''); - - // 폼 필드 데이터 추가 - if (Object.keys(formData).length > 0) { - submitFormData.append('formData', JSON.stringify(formData)); - } - - // API 호출 - const response = await fetch('/api/upload/signed-contract', { - method: 'POST', - body: submitFormData, - next: { tags: ["basicContractView-vendor"] }, - }); - - const result = await response.json(); - - if (result.result) { - // 성공시 해당 계약서 상태를 완료로 업데이트 - setContractStatuses(prev => - prev.map(status => - status.id === selectedContract.id - ? { ...status, status: 'completed' as const } - : status - ) + + if (isBuyerMode) { + // 구매자 모드: 최종승인 처리 + const result = await processBuyerSignatureAction( + selectedContract.id, + data, + selectedContract.signedFileName || `contract_${selectedContract.id}_buyer_signed.pdf` ); - toast.success("계약서 서명이 완료되었습니다!", { - description: `${selectedContract.templateName} - ${completedCount + 1}/${totalCount}개 완료`, - icon: <CheckCircle2 className="h-5 w-5 text-green-500" /> - }); + if (result.success) { + // 성공시 해당 계약서 상태를 완료로 업데이트 + setContractStatuses(prev => + prev.map(status => + status.id === selectedContract.id + ? { ...status, status: 'completed' as const } + : status + ) + ); - // 다음 미완료 계약서로 자동 이동 - const nextContract = getNextPendingContract(); - if (nextContract) { - setSelectedContract(nextContract); - toast.info(`다음 계약서로 이동합니다`, { - description: nextContract.templateName, - icon: <ArrowRight className="h-4 w-4 text-blue-500" /> + toast.success("최종승인이 완료되었습니다!", { + description: `${selectedContract.templateName} - ${completedCount + 1}/${totalCount}개 완료`, + icon: <CheckCircle2 className="h-5 w-5 text-green-500" /> }); + + // 구매자 서명 완료 콜백 호출 + if (onBuyerSignComplete) { + onBuyerSignComplete(selectedContract.id, data); + } + + // 다음 미완료 계약서로 자동 이동 + const nextContract = getNextPendingContract(); + if (nextContract) { + setSelectedContract(nextContract); + toast.info(`다음 계약서로 이동합니다`, { + description: nextContract.templateName, + icon: <ArrowRight className="h-4 w-4 text-blue-500" /> + }); + } else { + // 모든 계약서 완료시 + toast.success("🎉 모든 계약서 최종승인이 완료되었습니다!", { + description: `총 ${totalCount}개 계약서 승인 완료`, + icon: <Trophy className="h-5 w-5 text-yellow-500" /> + }); + } + + router.refresh(); } else { - // 모든 계약서 완료시 - toast.success("🎉 모든 계약서 서명이 완료되었습니다!", { - description: `총 ${totalCount}개 계약서 서명 완료`, - icon: <Trophy className="h-5 w-5 text-yellow-500" /> + // 실패시 에러 상태 업데이트 + setContractStatuses(prev => + prev.map(status => + status.id === selectedContract.id + ? { ...status, status: 'error' as const, errorMessage: result.message } + : status + ) + ); + + toast.error("최종승인 처리 중 오류가 발생했습니다", { + description: result.message, + icon: <AlertCircle className="h-5 w-5 text-red-500" /> }); } - - router.refresh(); } else { - // 실패시 에러 상태 업데이트 - setContractStatuses(prev => - prev.map(status => - status.id === selectedContract.id - ? { ...status, status: 'error' as const, errorMessage: result.error } - : status - ) - ); - - toast.error("서명 처리 중 오류가 발생했습니다", { - description: result.error, - icon: <AlertCircle className="h-5 w-5 text-red-500" /> + // 협력업체 모드: 기존 로직 + const submitFormData = new FormData(); + submitFormData.append('file', new Blob([data], { type: 'application/pdf' })); + submitFormData.append('tableRowId', selectedContract.id.toString()); + submitFormData.append('templateName', selectedContract.signedFileName || ''); + + // 폼 필드 데이터 추가 + if (Object.keys(formData).length > 0) { + submitFormData.append('formData', JSON.stringify(formData)); + } + + // API 호출 + const response = await fetch('/api/upload/signed-contract', { + method: 'POST', + body: submitFormData, + next: { tags: ["basicContractView-vendor"] }, }); + + const result = await response.json(); + + if (result.result) { + // 성공시 해당 계약서 상태를 완료로 업데이트 + setContractStatuses(prev => + prev.map(status => + status.id === selectedContract.id + ? { ...status, status: 'completed' as const } + : status + ) + ); + + toast.success("계약서 서명이 완료되었습니다!", { + description: `${selectedContract.templateName} - ${completedCount + 1}/${totalCount}개 완료`, + icon: <CheckCircle2 className="h-5 w-5 text-green-500" /> + }); + + // 다음 미완료 계약서로 자동 이동 + const nextContract = getNextPendingContract(); + if (nextContract) { + setSelectedContract(nextContract); + toast.info(`다음 계약서로 이동합니다`, { + description: nextContract.templateName, + icon: <ArrowRight className="h-4 w-4 text-blue-500" /> + }); + } else { + // 모든 계약서 완료시 + toast.success("🎉 모든 계약서 서명이 완료되었습니다!", { + description: `총 ${totalCount}개 계약서 서명 완료`, + icon: <Trophy className="h-5 w-5 text-yellow-500" /> + }); + } + + router.refresh(); + } else { + // 실패시 에러 상태 업데이트 + setContractStatuses(prev => + prev.map(status => + status.id === selectedContract.id + ? { ...status, status: 'error' as const, errorMessage: result.error } + : status + ) + ); + + toast.error("서명 처리 중 오류가 발생했습니다", { + description: result.error, + icon: <AlertCircle className="h-5 w-5 text-red-500" /> + }); + } } } catch (error) { console.error("서명 완료 중 오류:", error); @@ -391,56 +515,99 @@ export function BasicContractSignDialog({ // 모든 서명 완료 핸들러 const completeAllSigns = () => { - setOpen(false); + handleOpenChange(false); if (onSuccess) { onSuccess(); } - toast.success("모든 계약서 서명이 완료되었습니다!", { - description: "계약서 관리 페이지가 새로고침됩니다.", + const successMessage = isBuyerMode + ? "모든 계약서 최종승인이 완료되었습니다!" + : "모든 계약서 서명이 완료되었습니다!"; + + toast.success(successMessage, { + description: "계약서 관리 페이지가 새고침됩니다.", icon: <Trophy className="h-5 w-5 text-yellow-500" /> }); }; return ( <> - {/* 서명 버튼 */} - <Button - variant="outline" - size="sm" - onClick={() => setOpen(true)} - disabled={isButtonDisabled} - className="gap-2 transition-all hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 disabled:opacity-50 disabled:cursor-not-allowed" - > - <Upload - className={`size-4 ${isButtonDisabled ? 'text-gray-400' : 'text-blue-500'}`} - aria-hidden="true" - /> - <span className="hidden sm:inline flex items-center"> - {t("basicContracts.toolbar.sign")} - {contracts.length > 0 && !isButtonDisabled && ( - <Badge variant="secondary" className="ml-2 bg-blue-100 text-blue-700 hover:bg-blue-200"> - {contracts.length} - </Badge> + {/* 서명 버튼 - 외부 제어가 없을 때만 표시 */} + {!isControlledExternally && ( + <Button + variant="outline" + size="sm" + onClick={() => handleOpenChange(true)} + disabled={isButtonDisabled} + className={cn( + "gap-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed", + isBuyerMode + ? "hover:bg-green-50 hover:text-green-600 hover:border-green-200" + : "hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200" )} - {isButtonDisabled && ( - <span className="ml-2 text-xs text-gray-400"> - ({getDisabledReason()}) - </span> + > + {isBuyerMode ? ( + <Shield + className={`size-4 ${isButtonDisabled ? 'text-gray-400' : 'text-green-500'}`} + aria-hidden="true" + /> + ) : ( + <Upload + className={`size-4 ${isButtonDisabled ? 'text-gray-400' : 'text-blue-500'}`} + aria-hidden="true" + /> )} - </span> - </Button> + <span className="hidden sm:inline flex items-center"> + {isBuyerMode ? "구매자 승인" : t("basicContracts.toolbar.sign")} + {contracts.length > 0 && !isButtonDisabled && ( + <Badge + variant="secondary" + className={cn( + "ml-2", + isBuyerMode + ? "bg-green-100 text-green-700 hover:bg-green-200" + : "bg-blue-100 text-blue-700 hover:bg-blue-200" + )}최 + > + {contracts.length} + </Badge> + )} + {isButtonDisabled && ( + <span className="ml-2 text-xs text-gray-400"> + ({getDisabledReason()}) + </span> + )} + </span> + </Button> + )} {/* 서명 다이얼로그 */} <Dialog open={open} onOpenChange={handleOpenChange}> <DialogContent className="max-w-7xl w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden" style={{width:'95vw', maxWidth:'95vw'}}> {/* 고정 헤더 - 진행 상황 표시 */} - <DialogHeader className="px-6 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b flex-shrink-0"> + <DialogHeader className={cn( + "px-6 py-4 border-b flex-shrink-0", + isBuyerMode + ? "bg-gradient-to-r from-green-50 to-emerald-50" + : "bg-gradient-to-r from-blue-50 to-purple-50" + )}> <DialogTitle className="text-xl font-bold flex items-center justify-between text-gray-800"> <div className="flex items-center"> - <FileSignature className="mr-2 h-5 w-5 text-blue-500" /> - {t("basicContracts.dialog.title")} + {isBuyerMode ? ( + <Shield className="mr-2 h-5 w-5 text-green-500" /> + ) : ( + <FileSignature className="mr-2 h-5 w-5 text-blue-500" /> + )} + {dialogTitle} {/* 진행 상황 표시 */} - <Badge variant="outline" className="ml-3 bg-blue-50 text-blue-700 border-blue-200"> + <Badge + variant="outline" + className={cn( + "ml-3", + isBuyerMode + ? "bg-green-50 text-green-700 border-green-200" + : "bg-blue-50 text-blue-700 border-blue-200" + )} + > {completedCount}/{totalCount} 완료 </Badge> {/* 추가 파일 로딩 표시 */} @@ -466,7 +633,12 @@ export function BasicContractSignDialog({ </div> <div className="w-full bg-gray-200 rounded-full h-2"> <div - className="bg-gradient-to-r from-blue-500 to-green-500 h-2 rounded-full transition-all duration-500" + className={cn( + "h-2 rounded-full transition-all duration-500", + isBuyerMode + ? "bg-gradient-to-r from-green-500 to-emerald-500" + : "bg-gradient-to-r from-blue-500 to-green-500" + )} style={{ width: `${(completedCount / totalCount) * 100}%` }} /> </div> @@ -506,9 +678,11 @@ export function BasicContractSignDialog({ const isCompleted = contractStatus?.status === 'completed'; const hasError = contractStatus?.status === 'error'; - // 🔥 계약서별 완료 상태 확인 + // 계약서별 완료 상태 확인 const isComplianceTemplate = contract.templateName?.includes('준법'); + const isGTCTemplate = contract.templateName?.includes('GTC'); const hasSurveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contract.id] === true : true; + const hasGtcCompleted = isGTCTemplate ? (gtcCommentStatus[contract.id]?.hasComments !== true) : true; const hasSignatureCompleted = signatureStatus[contract.id] === true; return ( @@ -530,7 +704,11 @@ export function BasicContractSignDialog({ {/* 첫 번째 줄: 제목 + 상태 */} <div className="flex items-center justify-between w-full"> <span className="font-medium text-xs truncate text-gray-800 flex items-center min-w-0"> - <FileText className="h-3 w-3 mr-1 text-blue-500 flex-shrink-0" /> + {isBuyerMode ? ( + <Shield className="h-3 w-3 mr-1 text-green-500 flex-shrink-0" /> + ) : ( + <FileText className="h-3 w-3 mr-1 text-blue-500 flex-shrink-0" /> + )} <span className="truncate">{contract.templateName || t("basicContracts.dialog.document")}</span> {/* 비밀유지 계약서인 경우 표시 */} {contract.templateName === "비밀유지 계약서" && ( @@ -538,6 +716,12 @@ export function BasicContractSignDialog({ NDA </Badge> )} + {/* GTC 계약서인 경우 표시 */} + {contract.templateName?.includes('GTC') && ( + <Badge variant="outline" className="ml-1 bg-purple-50 text-purple-700 border-purple-200 text-xs"> + GTC + </Badge> + )} </span> {/* 상태 표시 */} @@ -558,8 +742,8 @@ export function BasicContractSignDialog({ )} </div> - {/* 🔥 완료 상태 표시 */} - {!isCompleted && !hasError && ( + {/* 완료 상태 표시 (구매자 모드에서는 간소화) */} + {!isCompleted && !hasError && !isBuyerMode && ( <div className="flex items-center space-x-2 text-xs"> {isComplianceTemplate && ( <span className={`flex items-center ${hasSurveyCompleted ? 'text-green-600' : 'text-gray-400'}`}> @@ -567,6 +751,12 @@ export function BasicContractSignDialog({ 설문 </span> )} + {isGTCTemplate && ( + <span className={`flex items-center ${hasGtcCompleted ? 'text-green-600' : 'text-red-600'}`}> + <CheckCircle2 className={`h-3 w-3 mr-1 ${hasGtcCompleted ? 'text-green-500' : 'text-red-500'}`} /> + 조항검토 + </span> + )} <span className={`flex items-center ${hasSignatureCompleted ? 'text-green-600' : 'text-gray-400'}`}> <Target className={`h-3 w-3 mr-1 ${hasSignatureCompleted ? 'text-green-500' : 'text-gray-300'}`} /> 서명 @@ -574,6 +764,16 @@ export function BasicContractSignDialog({ </div> )} + {/* 구매자 모드의 간소화된 상태 표시 */} + {!isCompleted && !hasError && isBuyerMode && ( + <div className="flex items-center space-x-2 text-xs"> + <span className={`flex items-center ${hasSignatureCompleted ? 'text-green-600' : 'text-gray-400'}`}> + <Target className={`h-3 w-3 mr-1 ${hasSignatureCompleted ? 'text-green-500' : 'text-gray-300'}`} /> + 구매자 서명 + </span> + </div> + )} + {/* 두 번째 줄: 사용자 + 날짜 */} <div className="flex items-center justify-between text-xs text-gray-500"> <div className="flex items-center min-w-0"> @@ -609,14 +809,18 @@ export function BasicContractSignDialog({ {/* 뷰어 헤더 */} <div className="p-4 border-b bg-gray-50 flex-shrink-0"> <h3 className="font-semibold text-gray-800 flex items-center"> - <FileText className="h-4 w-4 mr-2 text-blue-500" /> + {isBuyerMode ? ( + <Shield className="h-4 w-4 mr-2 text-green-500" /> + ) : ( + <FileText className="h-4 w-4 mr-2 text-blue-500" /> + )} {selectedContract.templateName || t("basicContracts.dialog.document")} {/* 현재 계약서 상태 표시 */} {currentContractStatus?.status === 'completed' ? ( <Badge variant="outline" className="ml-2 bg-green-50 text-green-700 border-green-200"> <CheckCircle2 className="h-3 w-3 mr-1" /> - 서명 완료 + {isBuyerMode ? "승인 완료" : "서명 완료"} </Badge> ) : currentContractStatus?.status === 'error' ? ( <Badge variant="outline" className="ml-2 bg-red-50 text-red-700 border-red-200"> @@ -625,19 +829,32 @@ export function BasicContractSignDialog({ </Badge> ) : ( <Badge variant="outline" className="ml-2 bg-yellow-50 text-yellow-700 border-yellow-200"> - 서명 대기 + {isBuyerMode ? "승인 대기" : "서명 대기"} + </Badge> + )} + + {/* 구매자 모드 배지 */} + {isBuyerMode && ( + <Badge variant="outline" className="ml-2 bg-green-50 text-green-700 border-green-200"> + 구매자 모드 </Badge> )} - {/* 준법 템플릿 표시 */} - {selectedContract.templateName?.includes('준법') && ( + {/* 준법/GTC 템플릿 표시 (구매자 모드가 아닐 때만) */} + {!isBuyerMode && selectedContract.templateName?.includes('준법') && ( <Badge variant="outline" className="ml-2 bg-amber-50 text-amber-700 border-amber-200"> 준법 서류 </Badge> )} + + {!isBuyerMode && selectedContract.templateName?.includes('GTC') && ( + <Badge variant="outline" className="ml-2 bg-purple-50 text-purple-700 border-purple-200"> + GTC 계약서 + </Badge> + )} - {/* 비밀유지 계약서인 경우 추가 파일 수 표시 */} - {selectedContract.templateName === "비밀유지 계약서" && additionalFiles.length > 0 && ( + {/* 비밀유지 계약서인 경우 추가 파일 수 표시 (구매자 모드가 아닐 때만) */} + {!isBuyerMode && selectedContract.templateName === "비밀유지 계약서" && additionalFiles.length > 0 && ( <Badge variant="outline" className="ml-2 bg-blue-50 text-blue-700 border-blue-200"> 첨부파일 {additionalFiles.length}개 </Badge> @@ -665,8 +882,12 @@ export function BasicContractSignDialog({ additionalFiles={additionalFiles} instance={instance} setInstance={setInstance} - onSurveyComplete={() => handleSurveyComplete(selectedContract.id)} // 🔥 추가 - onSignatureComplete={() => handleSignatureComplete(selectedContract.id)} // 🔥 추가 + onSurveyComplete={() => handleSurveyComplete(selectedContract.id)} + onSignatureComplete={() => handleSignatureComplete(selectedContract.id)} + onGtcCommentStatusChange={(hasComments, commentCount) => + handleGtcCommentStatusChange(selectedContract.id, hasComments, commentCount) + } + mode={mode} t={t} /> </div> @@ -678,44 +899,58 @@ export function BasicContractSignDialog({ {currentContractStatus?.status === 'completed' ? ( <p className="text-sm text-green-600 flex items-center"> <CheckCircle2 className="h-4 w-4 text-green-500 mr-1" /> - 이 계약서는 이미 서명이 완료되었습니다 + 이 계약서는 이미 {isBuyerMode ? "승인이" : "서명이"} 완료되었습니다 </p> ) : currentContractStatus?.status === 'error' ? ( <p className="text-sm text-red-600 flex items-center"> <AlertCircle className="h-4 w-4 text-red-500 mr-1" /> - 서명 처리 중 오류가 발생했습니다. 다시 시도해주세요. + {isBuyerMode ? "승인" : "서명"} 처리 중 오류가 발생했습니다. 다시 시도해주세요. </p> ) : ( <> - {/* 🔥 완료 조건 안내 메시지 개선 */} + {/* 완료 조건 안내 메시지 */} <div className="flex flex-col space-y-1"> <p className="text-sm text-gray-600 flex items-center"> <AlertCircle className="h-4 w-4 text-yellow-500 mr-1" /> - {t("basicContracts.dialog.signWarning")} + {isBuyerMode + ? "계약서에 구매자 서명을 완료해주세요." + : t("basicContracts.dialog.signWarning") + } </p> {/* 완료 상태 체크리스트 */} - <div className="flex items-center space-x-4 text-xs"> - {selectedContract.templateName?.includes('준법') && ( - <span className={`flex items-center ${surveyCompletionStatus[selectedContract.id] ? 'text-green-600' : 'text-red-600'}`}> - <CheckCircle2 className={`h-3 w-3 mr-1 ${surveyCompletionStatus[selectedContract.id] ? 'text-green-500' : 'text-red-500'}`} /> - 설문조사 {surveyCompletionStatus[selectedContract.id] ? '완료' : '미완료'} + {!isBuyerMode && ( + <div className="flex items-center space-x-4 text-xs"> + {selectedContract.templateName?.includes('준법') && ( + <span className={`flex items-center ${surveyCompletionStatus[selectedContract.id] ? 'text-green-600' : 'text-red-600'}`}> + <CheckCircle2 className={`h-3 w-3 mr-1 ${surveyCompletionStatus[selectedContract.id] ? 'text-green-500' : 'text-red-500'}`} /> + 설문조사 {surveyCompletionStatus[selectedContract.id] ? '완료' : '미완료'} + </span> + )} + {selectedContract.templateName?.includes('GTC') && ( + <span className={`flex items-center ${(gtcCommentStatus[selectedContract.id]?.hasComments !== true) ? 'text-green-600' : 'text-red-600'}`}> + <CheckCircle2 className={`h-3 w-3 mr-1 ${(gtcCommentStatus[selectedContract.id]?.hasComments !== true) ? 'text-green-500' : 'text-red-500'}`} /> + 조항검토 {(gtcCommentStatus[selectedContract.id]?.hasComments !== true) ? '완료' : + `미완료 (코멘트 ${gtcCommentStatus[selectedContract.id]?.commentCount || 0}개)`} + </span> + )} + <span className={`flex items-center ${signatureStatus[selectedContract.id] ? 'text-green-600' : 'text-red-600'}`}> + <Target className={`h-3 w-3 mr-1 ${signatureStatus[selectedContract.id] ? 'text-green-500' : 'text-red-500'}`} /> + 서명 {signatureStatus[selectedContract.id] ? '완료' : '미완료'} </span> - )} - <span className={`flex items-center ${signatureStatus[selectedContract.id] ? 'text-green-600' : 'text-red-600'}`}> - <Target className={`h-3 w-3 mr-1 ${signatureStatus[selectedContract.id] ? 'text-green-500' : 'text-red-500'}`} /> - 서명 {signatureStatus[selectedContract.id] ? '완료' : '미완료'} - </span> - </div> + </div> + )} + + {/* 구매자 모드의 간소화된 체크리스트 */} + {isBuyerMode && ( + <div className="flex items-center space-x-4 text-xs"> + <span className={`flex items-center ${signatureStatus[selectedContract.id] ? 'text-green-600' : 'text-red-600'}`}> + <Target className={`h-3 w-3 mr-1 ${signatureStatus[selectedContract.id] ? 'text-green-500' : 'text-red-500'}`} /> + 구매자 서명 {signatureStatus[selectedContract.id] ? '완료' : '미완료'} + </span> + </div> + )} </div> - - {/* 비밀유지 계약서인 경우 추가 안내 */} - {selectedContract.templateName === "비밀유지 계약서" && additionalFiles.length > 0 && ( - <p className="text-xs text-blue-600 flex items-center"> - <FileText className="h-3 w-3 text-blue-500 mr-1" /> - 첨부 서류도 확인해주세요 - </p> - )} </> )} </div> @@ -725,11 +960,16 @@ export function BasicContractSignDialog({ {allCompleted ? ( // 모든 계약서 완료시 <Button - className="gap-2 bg-green-600 hover:bg-green-700 transition-colors" + className={cn( + "gap-2 transition-colors", + isBuyerMode + ? "bg-green-600 hover:bg-green-700" + : "bg-green-600 hover:bg-green-700" + )} onClick={completeAllSigns} > <Trophy className="h-4 w-4" /> - 모든 서명 완료 + 모든 {isBuyerMode ? "승인" : "서명"} 완료 </Button> ) : currentContractStatus?.status === 'completed' ? ( // 현재 계약서가 완료된 경우 @@ -750,13 +990,16 @@ export function BasicContractSignDialog({ ) : ( // 현재 계약서를 서명해야 하는 경우 <Button - className={`gap-2 transition-colors ${ + className={cn( + "gap-2 transition-colors", canCompleteCurrentContract - ? "bg-blue-600 hover:bg-blue-700" + ? isBuyerMode + ? "bg-green-600 hover:bg-green-700" + : "bg-blue-600 hover:bg-blue-700" : "bg-gray-400 cursor-not-allowed" - }`} + )} onClick={completeSign} - disabled={!canCompleteCurrentContract || isSubmitting} // 🔥 조건 수정 + disabled={!canCompleteCurrentContract || isSubmitting} > {isSubmitting ? ( <> @@ -768,11 +1011,15 @@ export function BasicContractSignDialog({ </> ) : ( <> - <FileSignature className="h-4 w-4" /> - 서명 완료 + {isBuyerMode ? ( + <Shield className="h-4 w-4" /> + ) : ( + <FileSignature className="h-4 w-4" /> + )} + {signButtonText} {totalCount > 1 && ( <span className="ml-1 text-xs"> - ({completedCount + 1}/{totalCount}) + ({completedCount}/{totalCount}) </span> )} </> @@ -784,12 +1031,22 @@ export function BasicContractSignDialog({ </> ) : ( <div className="flex flex-col items-center justify-center h-full text-center p-6"> - <div className="bg-blue-50 p-6 rounded-full mb-4"> - <FileSignature className="h-12 w-12 text-blue-500" /> + <div className={cn( + "p-6 rounded-full mb-4", + isBuyerMode ? "bg-green-50" : "bg-blue-50" + )}> + {isBuyerMode ? ( + <Shield className="h-12 w-12 text-green-500" /> + ) : ( + <FileSignature className="h-12 w-12 text-blue-500" /> + )} </div> <h3 className="text-xl font-medium text-gray-800 mb-2">{t("basicContracts.dialog.selectDocument")}</h3> <p className="text-gray-500 max-w-md"> - {t("basicContracts.dialog.selectDocumentDescription")} + {isBuyerMode + ? "승인할 계약서를 선택해주세요." + : t("basicContracts.dialog.selectDocumentDescription") + } </p> </div> )} diff --git a/lib/basic-contract/vendor-table/basic-contract-table.tsx b/lib/basic-contract/vendor-table/basic-contract-table.tsx index 48298f21..cefc0fb2 100644 --- a/lib/basic-contract/vendor-table/basic-contract-table.tsx +++ b/lib/basic-contract/vendor-table/basic-contract-table.tsx @@ -38,6 +38,8 @@ export function BasicContractsVendorTable({ promises }: BasicTemplateTableProps) const [{ data, pageCount }] = React.use(promises) + console.log(data,"data") + // 안전한 번역 함수 (fallback 포함) const safeT = React.useCallback((key: string, fallback: string) => { diff --git a/lib/basic-contract/vendor-table/survey-conditional.ts b/lib/basic-contract/vendor-table/survey-conditional.ts index 71c2c1ff..686cc4ba 100644 --- a/lib/basic-contract/vendor-table/survey-conditional.ts +++ b/lib/basic-contract/vendor-table/survey-conditional.ts @@ -131,6 +131,22 @@ public getIncompleteReason(question: SurveyQuestion, surveyAnswers: Record<numbe return true; } + private isValidFile(file: any): boolean { + if (!file || typeof file !== 'object') return false; + + // 브라우저 File 객체 체크 (새로 업로드한 파일) + if (file.name || file.size || file.type) return true; + + // 서버 파일 메타데이터 체크 (기존 파일) + if (file.filename || file.originalName || file.id || file.mimeType) return true; + + return false; + } + + private hasValidFiles(files: any[]): boolean { + return files && files.length > 0 && files.every(file => this.isValidFile(file)); + } + private isQuestionCompleteEnhanced(question: SurveyQuestion, surveyAnswers: Record<number, any>): boolean { const answer = surveyAnswers[question.id]; @@ -157,60 +173,50 @@ public getIncompleteReason(question: SurveyQuestion, surveyAnswers: Record<numbe const hasOtherText = answer.answerValue === 'OTHER' ? (answer.otherText && answer.otherText.trim() !== '') : true; - // 4️⃣ files 체크 (실제 파일이 있는 경우) - const hasValidFiles = answer.files && answer.files.length > 0 && - answer.files.every((file: any) => file && typeof file === 'object' && - (file.name || file.size || file.type)); // 빈 객체 {} 제외 + // 4️⃣ files 체크 (브라우저 File 객체와 서버 파일 메타데이터 모두 처리) - 수정된 부분 + const hasValidFilesResult = this.hasValidFiles(answer.files || []); console.log(`📊 Q${question.questionNumber} 완료 조건 체크:`, { hasAnswerValue, hasDetailText, hasOtherText, - hasValidFiles, + hasValidFiles: hasValidFilesResult, questionType: question.questionType, hasDetailTextRequired: question.hasDetailText, hasFileUploadRequired: question.hasFileUpload || question.questionType === 'FILE' }); - // 🎯 질문 타입별 완료 조건 + // 질문 타입별 완료 조건은 동일하지만 hasValidFilesResult 변수 사용 switch (question.questionType) { case 'RADIO': case 'DROPDOWN': - // 선택형: answerValue가 있고, OTHER인 경우 otherText도 필요 const isSelectComplete = hasAnswerValue && hasOtherText; - // detailText가 필요한 경우 추가 체크 if (question.hasDetailText && isSelectComplete) { return hasDetailText; } - // 파일 업로드가 필요한 경우 추가 체크 if ((question.hasFileUpload || question.questionType === 'FILE') && isSelectComplete) { - return hasValidFiles; + return hasValidFilesResult; // 수정된 부분 } return isSelectComplete; case 'TEXTAREA': - // 텍스트 영역: detailText 또는 answerValue 중 하나라도 있으면 됨 return hasDetailText || hasAnswerValue; case 'FILE': - // 파일 업로드: 유효한 파일이 있어야 함 - return hasValidFiles; + return hasValidFilesResult; // 수정된 부분 default: - // 기본: answerValue, detailText, 파일 중 하나라도 있으면 완료 - let isComplete = hasAnswerValue || hasDetailText || hasValidFiles; + let isComplete = hasAnswerValue || hasDetailText || hasValidFilesResult; // 수정된 부분 - // detailText가 필수인 경우 if (question.hasDetailText) { isComplete = isComplete && hasDetailText; } - // 파일 업로드가 필수인 경우 if (question.hasFileUpload) { - isComplete = isComplete && hasValidFiles; + isComplete = isComplete && hasValidFilesResult; // 수정된 부분 } return isComplete; @@ -303,17 +309,7 @@ private getCompletionDetailsEnhanced(question: SurveyQuestion, answer: any): any // 🎯 현재 답변 상태에 따라 표시되는 질문들 계산 const visibleQuestions = this.getVisibleQuestions(surveyAnswers); - console.log('🔍 표시되는 모든 질문들의 상세 정보:', visibleQuestions.map(q => ({ - id: q.id, - questionNumber: q.questionNumber, - questionText: q.questionText?.substring(0, 30) + '...', - isRequired: q.isRequired, - parentQuestionId: q.parentQuestionId, - conditionalValue: q.conditionalValue, - isConditional: !!q.parentQuestionId, - hasAnswer: !!surveyAnswers[q.id]?.answerValue, - answerValue: surveyAnswers[q.id]?.answerValue - }))); + // 🚨 중요: 트리거된 조건부 질문들을 필수로 처리 const requiredQuestions = visibleQuestions.filter(q => { @@ -334,26 +330,6 @@ private getCompletionDetailsEnhanced(question: SurveyQuestion, answer: any): any return false; }); - console.log('📊 필수 질문 필터링 결과:', { - 전체질문수: this.questions.length, - 표시되는질문수: visibleQuestions.length, - 원래필수질문: visibleQuestions.filter(q => q.isRequired).length, - 트리거된조건부질문: visibleQuestions.filter(q => { - if (!q.parentQuestionId || !q.conditionalValue) return false; - const parentAnswer = surveyAnswers[q.parentQuestionId]; - return parentAnswer?.answerValue === q.conditionalValue; - }).length, - 최종필수질문: requiredQuestions.length, - 현재답변수: Object.keys(surveyAnswers).length, - 필수질문들: requiredQuestions.map(q => ({ - id: q.id, - questionNumber: q.questionNumber, - isRequired: q.isRequired, - isConditional: !!q.parentQuestionId, - hasAnswer: !!surveyAnswers[q.id]?.answerValue, - 처리방식: q.isRequired ? '원래필수' : '트리거됨' - })) - }); const completedQuestionIds: number[] = []; const incompleteQuestionIds: number[] = []; @@ -365,10 +341,7 @@ private getCompletionDetailsEnhanced(question: SurveyQuestion, answer: any): any // 🎯 개선된 완료 체크: 모든 답변 형태를 고려 const isComplete = this.isQuestionCompleteEnhanced(question, surveyAnswers); - - console.log(`📊 Q${question.questionNumber} 완료 상태: ${isComplete}`); - console.log(`📝 Q${question.questionNumber} 답변 내용:`, surveyAnswers[question.id]); - + // 디버깅 정보 수집 debugInfo[question.id] = { questionText: question.questionText, @@ -414,25 +387,6 @@ private getCompletionDetailsEnhanced(question: SurveyQuestion, answer: any): any if (process.env.NODE_ENV === 'development') { (result as any).debugInfo = debugInfo; - // 📋 상세한 진행 상황 로그 - console.log('📋 최종 진행 상황:', { - 총필수질문: requiredQuestions.length, - 완료된질문: completedQuestionIds.length, - 미완료질문: incompleteQuestionIds.length, - 진행률: `${Math.round(progressPercentage)}%`, - 기본질문: visibleQuestions.filter(q => !q.parentQuestionId).length, - 조건부질문: visibleQuestions.filter(q => q.parentQuestionId).length, - 완료된기본질문: completedQuestionIds.filter(id => !visibleQuestions.find(q => q.id === id)?.parentQuestionId).length, - 완료된조건부질문: completedQuestionIds.filter(id => !!visibleQuestions.find(q => q.id === id)?.parentQuestionId).length, - 필수질문상세: requiredQuestions.map(q => ({ - id: q.id, - questionNumber: q.questionNumber, - isRequired: q.isRequired, - isConditional: !!q.parentQuestionId, - isComplete: completedQuestionIds.includes(q.id) - })) - }); - // 🔍 미완료 질문들의 구체적 이유 if (incompleteQuestionIds.length > 0) { console.log('🔍 미완료 질문들:', incompleteQuestionIds.map(id => ({ @@ -446,24 +400,7 @@ private getCompletionDetailsEnhanced(question: SurveyQuestion, answer: any): any // ⚡ 조건부 질문 활성화 및 완료 현황 const conditionalQuestions = visibleQuestions.filter(q => q.parentQuestionId); - if (conditionalQuestions.length > 0) { - console.log('⚡ 조건부 질문 상세 현황:', conditionalQuestions.map(q => ({ - id: q.id, - questionNumber: q.questionNumber, - isRequired: q.isRequired, - parentId: q.parentQuestionId, - condition: q.conditionalValue, - parentAnswer: surveyAnswers[q.parentQuestionId!]?.answerValue, - isTriggered: surveyAnswers[q.parentQuestionId!]?.answerValue === q.conditionalValue, - hasAnswer: !!surveyAnswers[q.id]?.answerValue, - answerValue: surveyAnswers[q.id]?.answerValue, - detailText: surveyAnswers[q.id]?.detailText, - files: surveyAnswers[q.id]?.files, - isComplete: debugInfo[q.id]?.isComplete, - isIncludedInRequired: requiredQuestions.some(rq => rq.id === q.id), - completionDetails: this.getCompletionDetailsEnhanced(q, surveyAnswers[q.id]) - }))); - } + } return result; @@ -606,37 +543,21 @@ getOverallProgressStatus(surveyAnswers: Record<number, any>): { const childQuestion = this.questions.find(q => q.id === childId); if (!childQuestion) return; - console.log(`🔍 자식 질문 ${childId} 체크:`, { - childId, - questionNumber: childQuestion.questionNumber, - conditionalValue: childQuestion.conditionalValue, - newParentValue, - shouldKeep: childQuestion.conditionalValue === newParentValue, - currentAnswer: updatedAnswers[childId]?.answerValue - }); - // 새로운 부모 값이 자식의 조건과 맞지 않으면 자식 답변 삭제 if (childQuestion.conditionalValue !== newParentValue) { - console.log(`🗑️ 자식 질문 Q${childQuestion.questionNumber} 답변 초기화 (조건 불일치)`); delete updatedAnswers[childId]; // 재귀적으로 손자 질문들도 정리 const grandChildAnswers = this.clearAffectedChildAnswers(childId, '', updatedAnswers); Object.assign(updatedAnswers, grandChildAnswers); } else { - console.log(`✅ 자식 질문 Q${childQuestion.questionNumber} 유지 (조건 일치)`); } }); const clearedCount = childQuestionIds.filter(childId => !updatedAnswers[childId]).length; const keptCount = childQuestionIds.filter(childId => !!updatedAnswers[childId]).length; - console.log(`📊 자식 질문 정리 완료:`, { - parentQuestionId, - 총자식질문: childQuestionIds.length, - 초기화된질문: clearedCount, - 유지된질문: keptCount - }); + return updatedAnswers; } @@ -680,21 +601,17 @@ getOverallProgressStatus(surveyAnswers: Record<number, any>): { conditionalValue: question.conditionalValue }; - console.log(`🔍 질문 완료 체크 [Q${question.questionNumber}]:`, logData); if (!question.isRequired) { - console.log(`✅ Q${question.questionNumber}: 선택 질문이므로 완료`); return true; } if (!answer?.answerValue) { - console.log(`❌ Q${question.questionNumber}: 답변이 없음`); return false; } // 1. '기타' 선택 시 추가 입력이 필요한 경우 if (answer.answerValue === 'OTHER' && !answer.otherText?.trim()) { - console.log(`❌ Q${question.questionNumber}: '기타' 선택했지만 상세 내용 없음`); return false; } @@ -702,16 +619,8 @@ getOverallProgressStatus(surveyAnswers: Record<number, any>): { if (question.hasDetailText) { const needsDetailText = ['YES', '네', 'Y', 'true', '1'].includes(answer.answerValue); - console.log(`📝 Q${question.questionNumber} 상세텍스트 체크:`, { - hasDetailText: question.hasDetailText, - answerValue: answer.answerValue, - needsDetailText, - detailText: answer.detailText?.length || 0, - detailTextExists: !!answer.detailText?.trim() - }); if (needsDetailText && !answer.detailText?.trim()) { - console.log(`❌ Q${question.questionNumber}: '${answer.answerValue}' 선택했지만 상세 내용 없음`); return false; } } @@ -720,17 +629,7 @@ getOverallProgressStatus(surveyAnswers: Record<number, any>): { if (question.hasFileUpload || question.questionType === 'FILE') { const needsFileUpload = ['YES', '네', 'Y', 'true', '1'].includes(answer.answerValue); - console.log(`📁 Q${question.questionNumber} 파일업로드 체크:`, { - hasFileUpload: question.hasFileUpload, - questionType: question.questionType, - answerValue: answer.answerValue, - needsFileUpload, - filesCount: answer.files?.length || 0, - hasFiles: !!answer.files && answer.files.length > 0 - }); - if (needsFileUpload && (!answer.files || answer.files.length === 0)) { - console.log(`❌ Q${question.questionNumber}: '${answer.answerValue}' 선택했지만 파일 업로드 없음`); return false; } } @@ -739,50 +638,27 @@ getOverallProgressStatus(surveyAnswers: Record<number, any>): { const childQuestions = this.getChildQuestions(question.id); if (childQuestions.length > 0) { - console.log(`🔗 Q${question.questionNumber} 부모 질문 - 자식 질문들:`, - childQuestions.map(c => ({ - id: c.id, - questionNumber: c.questionNumber, - condition: c.conditionalValue, - required: c.isRequired, - text: c.questionText?.substring(0, 20) + '...' - })) - ); // 현재 답변으로 트리거되는 자식 질문들 찾기 const triggeredChildren = childQuestions.filter(child => child.conditionalValue === answer.answerValue ); - console.log(`🎯 Q${question.questionNumber} 답변 '${answer.answerValue}'로 트리거된 자식들:`, - triggeredChildren.map(c => ({ - id: c.id, - questionNumber: c.questionNumber, - required: c.isRequired, - text: c.questionText?.substring(0, 30) + '...' - })) - ); - // 트리거된 필수 자식 질문들이 모두 완료되었는지 확인 for (const childQuestion of triggeredChildren) { if (childQuestion.isRequired) { - console.log(`🔄 자식 질문 Q${childQuestion.questionNumber} 완료 체크 시작...`); const childComplete = this.isQuestionComplete(childQuestion, surveyAnswers); - console.log(`📊 자식 질문 Q${childQuestion.questionNumber} 완료 상태: ${childComplete}`); if (!childComplete) { - console.log(`❌ 부모 Q${question.questionNumber}의 자식 Q${childQuestion.questionNumber} 미완료`); return false; } } } if (triggeredChildren.filter(c => c.isRequired).length > 0) { - console.log(`✅ Q${question.questionNumber}의 모든 필수 조건부 자식 질문들 완료됨`); } } - console.log(`✅ Q${question.questionNumber} 완료 체크 통과`); return true; } diff --git a/lib/basic-contract/viewer/GtcClausesComponent.tsx b/lib/basic-contract/viewer/GtcClausesComponent.tsx new file mode 100644 index 00000000..8f565971 --- /dev/null +++ b/lib/basic-contract/viewer/GtcClausesComponent.tsx @@ -0,0 +1,837 @@ +"use client"; + +import React, { useState, useEffect, useCallback,useRef } from 'react'; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Textarea } from "@/components/ui/textarea"; +import { Input } from "@/components/ui/input"; +import { toast } from "sonner"; +import { + FileText, + MessageSquare, + ChevronRight, + ChevronDown, + Search, + AlertTriangle, + CheckCircle2, + Edit3, + Save, + X, + Loader2, + Hash, + BookOpen, + Minimize2, + Maximize2, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + getVendorGtcData, + updateVendorClause, + checkVendorClausesCommentStatus, + type GtcVendorData +} from "../service"; + +interface GtcClausesComponentProps { + contractId?: number; + onCommentStatusChange?: (hasComments: boolean, commentCount: number) => void; + t?: (key: string) => string; +} + +// GTC 조항의 기본 타입 정의 +type GtcVendorClause = { + id: number; + vendorClauseId: number | null; + baseClauseId: number; + vendorDocumentId: number | null; + parentId: number | null; + depth: number; + sortOrder: string; + fullPath: string | null; + reviewStatus: string; + negotiationNote: string | null; + isExcluded: boolean; + + // 실제 표시될 값들 (기본 조항 값) + effectiveItemNumber: string; + effectiveCategory: string | null; + effectiveSubtitle: string; + effectiveContent: string | null; + + // 기본 조항 정보 (동일) + baseItemNumber: string; + baseCategory: string | null; + baseSubtitle: string; + baseContent: string | null; + + // 수정 여부 (코멘트만 있으면 false) + hasModifications: boolean; + isNumberModified: boolean; + isCategoryModified: boolean; + isSubtitleModified: boolean; + isContentModified: boolean; + + // 코멘트 관련 + hasComment: boolean; + pendingComment: string | null; +}; + +interface ClauseState extends GtcVendorClause { + isExpanded?: boolean; + isEditing?: boolean; + tempComment?: string; + isSaving?: boolean; + // 고유 식별자를 위한 헬퍼 속성 + uniqueId: number; +} + +export function GtcClausesComponent({ + contractId, + onCommentStatusChange, + t = (key: string) => key +}: GtcClausesComponentProps) { + const [gtcData, setGtcData] = useState<GtcVendorData | null>(null); + const [clauses, setClauses] = useState<ClauseState[]>([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState<string | null>(null); + const [searchTerm, setSearchTerm] = useState(""); + const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set()); + const [compactMode, setCompactMode] = useState(true); // 컴팩트 모드 상태 추가 + + const onCommentStatusChangeRef = useRef(onCommentStatusChange); + onCommentStatusChangeRef.current = onCommentStatusChange; + + // 데이터 로드 + const loadGtcData = useCallback(async () => { + try { + setLoading(true); + setError(null); + + const data = await getVendorGtcData(contractId); + + if (!data) { + setError("GTC 데이터를 찾을 수 없습니다."); + return; + } + + setGtcData(data); + + const initialClauses: ClauseState[] = data.clauses.map(clause => ({ + ...clause, + uniqueId: clause.id, + isExpanded: false, + isEditing: false, + tempComment: clause.negotiationNote || "", + isSaving: false, + })); + + setClauses(initialClauses); + + } catch (err) { + console.error('GTC 데이터 로드 실패:', err); + setError(err instanceof Error ? err.message : 'GTC 데이터를 불러오는데 실패했습니다.'); + } finally { + setLoading(false); + } + }, [contractId]); + + const lastCommentStatusRef = useRef<{ hasComments: boolean; commentCount: number } | null>(null); + + // 코멘트 상태 변경을 별도 useEffect로 처리 + useEffect(() => { + if (clauses.length > 0) { + const commentCount = clauses.filter(c => c.hasComment).length; + const hasComments = commentCount > 0; + + // Only call callback if status actually changed + const currentStatus = { hasComments, commentCount }; + if (!lastCommentStatusRef.current || + lastCommentStatusRef.current.hasComments !== hasComments || + lastCommentStatusRef.current.commentCount !== commentCount) { + + lastCommentStatusRef.current = currentStatus; + onCommentStatusChangeRef.current?.(hasComments, commentCount); + } + } + }, [clauses]); + + useEffect(() => { + loadGtcData(); + }, [loadGtcData]); + + // 검색 필터링 + const filteredClauses = React.useMemo(() => { + if (!searchTerm.trim()) return clauses; + + const term = searchTerm.toLowerCase(); + return clauses.filter(clause => + clause.effectiveItemNumber.toLowerCase().includes(term) || + clause.effectiveSubtitle.toLowerCase().includes(term) || + clause.effectiveContent?.toLowerCase().includes(term) || + clause.negotiationNote?.toLowerCase().includes(term) + ); + }, [clauses, searchTerm]); + + // 계층 구조로 조항 그룹화 + const groupedClauses = React.useMemo(() => { + const grouped: { [key: number]: ClauseState[] } = { 0: [] }; // 최상위는 0 + + filteredClauses.forEach(clause => { + // parentId를 baseClauseId와 매핑 (parentId는 실제 baseClauseId를 가리킴) + let parentKey = 0; // 기본값은 최상위 + + if (clause.parentId !== null) { + // parentId에 해당하는 조항을 찾아서 그 조항의 uniqueId를 사용 + const parentClause = filteredClauses.find(c => c.baseClauseId === clause.parentId); + if (parentClause) { + parentKey = parentClause.uniqueId; + } + } + + if (!grouped[parentKey]) { + grouped[parentKey] = []; + } + grouped[parentKey].push(clause); + }); + + // 정렬 + Object.keys(grouped).forEach(key => { + grouped[parseInt(key)].sort((a, b) => parseFloat(a.sortOrder) - parseFloat(b.sortOrder)); + }); + + return grouped; + }, [filteredClauses]); + + // 토글 확장/축소 + const toggleExpand = useCallback((uniqueId: number) => { + setExpandedItems(prev => { + const next = new Set(prev); + if (next.has(uniqueId)) { + next.delete(uniqueId); + } else { + next.add(uniqueId); + } + return next; + }); + }, []); + + // 편집 모드 토글 + const toggleEdit = useCallback((uniqueId: number) => { + setClauses(prev => prev.map(clause => { + if (clause.uniqueId === uniqueId) { + return { + ...clause, + isEditing: !clause.isEditing, + tempComment: clause.negotiationNote || "", + }; + } + return clause; + })); + }, []); + + // 임시 코멘트 업데이트 + const updateTempComment = useCallback((uniqueId: number, comment: string) => { + setClauses(prev => prev.map(clause => { + if (clause.uniqueId === uniqueId) { + return { ...clause, tempComment: comment }; + } + return clause; + })); + }, []); + + // 코멘트 저장 + const saveComment = useCallback(async (uniqueId: number) => { + const clause = clauses.find(c => c.uniqueId === uniqueId); + if (!clause) return; + + setClauses(prev => prev.map(c => + c.uniqueId === uniqueId ? { ...c, isSaving: true } : c + )); + + try { + // 기본 조항 정보를 그대로 사용하고 코멘트만 처리 + const clauseData = { + itemNumber: clause.effectiveItemNumber, + category: clause.effectiveCategory, + subtitle: clause.effectiveSubtitle, + content: clause.effectiveContent, + comment: clause.tempComment || "", + }; + + const result = await updateVendorClause( + clause.id, + clause.vendorClauseId, + clauseData, + gtcData?.vendorDocument + ); + + if (result.success) { + const hasComment = !!(clause.tempComment?.trim()); + + setClauses(prev => prev.map(c => { + if (c.uniqueId === uniqueId) { + return { + ...c, + vendorClauseId: result.vendorClauseId || c.vendorClauseId, + negotiationNote: clause.tempComment?.trim() || null, + hasComment, + isEditing: false, + isSaving: false, + }; + } + return c; + })); + + toast.success("코멘트가 저장되었습니다."); + + } else { + toast.error(result.error || "코멘트 저장에 실패했습니다."); + setClauses(prev => prev.map(c => + c.uniqueId === uniqueId ? { ...c, isSaving: false } : c + )); + } + } catch (error) { + console.error('코멘트 저장 실패:', error); + toast.error("코멘트 저장 중 오류가 발생했습니다."); + setClauses(prev => prev.map(c => + c.uniqueId === uniqueId ? { ...c, isSaving: false } : c + )); + } + }, [clauses, gtcData]); + + // 편집 취소 + const cancelEdit = useCallback((uniqueId: number) => { + setClauses(prev => prev.map(clause => { + if (clause.uniqueId === uniqueId) { + return { + ...clause, + isEditing: false, + tempComment: clause.negotiationNote || "", + }; + } + return clause; + })); + }, []); + + // 컴팩트 모드 렌더링 + const renderCompactClause = useCallback((clause: ClauseState, depth: number = 0): React.ReactNode => { + const isExpanded = expandedItems.has(clause.uniqueId); + const children = groupedClauses[clause.uniqueId] || []; + const hasChildren = children.length > 0; + + return ( + <div key={clause.uniqueId} className={`${depth > 0 ? 'ml-4' : ''}`}> + <div className={cn( + "flex items-center justify-between p-2 rounded border transition-all duration-200 hover:bg-gray-50 mb-1", + clause.hasComment && "border-amber-200 bg-amber-50", + clause.isExcluded && "opacity-50 border-gray-300" + )}> + <div className="flex items-center space-x-2 flex-1 min-w-0"> + {/* 확장/축소 버튼 */} + <Button + variant="ghost" + size="sm" + className="h-5 w-5 p-0 flex-shrink-0" + onClick={() => toggleExpand(clause.uniqueId)} + > + {isExpanded ? ( + <ChevronDown className="h-3 w-3" /> + ) : ( + <ChevronRight className="h-3 w-3" /> + )} + </Button> + + {/* 조항 번호 */} + <span className="font-mono text-blue-600 text-sm flex-shrink-0 min-w-0 font-medium"> + {clause.effectiveItemNumber} + </span> + + {/* 제목 */} + <span className="text-sm text-gray-800 truncate flex-1 min-w-0"> + {clause.effectiveSubtitle} + </span> + + {/* 상태 표시 */} + <div className="flex items-center space-x-1 flex-shrink-0"> + {/* {clause.hasComment && ( + <Badge variant="outline" className="text-xs px-1.5 py-0.5 h-5 bg-amber-50 text-amber-600 border-amber-200"> + <MessageSquare className="h-2.5 w-2.5" /> + </Badge> + )} */} + {clause.isExcluded && ( + <Badge variant="outline" className="text-xs px-1.5 py-0.5 h-5 bg-gray-50 text-gray-500 border-gray-300"> + 제외 + </Badge> + )} + </div> + </div> + + {/* 편집 버튼 */} + <div className="flex items-center space-x-1 flex-shrink-0 ml-2"> + {clause.isEditing ? ( + <div className="flex items-center space-x-1"> + <Button + variant="ghost" + size="sm" + onClick={() => saveComment(clause.uniqueId)} + disabled={clause.isSaving} + className="h-6 w-6 p-0 text-green-600 hover:text-green-700 hover:bg-green-50" + > + {clause.isSaving ? ( + <Loader2 className="h-3 w-3 animate-spin" /> + ) : ( + <Save className="h-3 w-3" /> + )} + </Button> + <Button + variant="ghost" + size="sm" + onClick={() => cancelEdit(clause.uniqueId)} + disabled={clause.isSaving} + className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700 hover:bg-gray-50" + > + <X className="h-3 w-3" /> + </Button> + </div> + ) : ( + <Button + variant="ghost" + size="sm" + onClick={() => toggleEdit(clause.uniqueId)} + className={cn( + "h-6 w-6 p-0 transition-colors", + clause.hasComment + ? "text-amber-600 hover:text-amber-700 hover:bg-amber-50" + : "text-gray-500 hover:text-gray-700 hover:bg-gray-50" + )} + > + {clause.hasComment ? ( + <MessageSquare className="h-3 w-3" /> + ) : ( + <Edit3 className="h-3 w-3" /> + )} + </Button> + )} + </div> + </div> + + {/* 확장된 내용 */} + {isExpanded && ( + <div className="mt-1 ml-5 p-3 bg-white rounded border border-gray-200"> + {/* 카테고리 */} + {clause.effectiveCategory && ( + <div className="mb-2"> + <span className="text-sm text-gray-500 font-medium">카테고리: </span> + <span className="text-sm text-gray-700">{clause.effectiveCategory}</span> + </div> + )} + + {/* 내용 */} + {clause.effectiveContent && ( + <p className="text-sm text-gray-700 leading-relaxed mb-3 whitespace-pre-wrap"> + {clause.effectiveContent} + </p> + )} + + {/* 코멘트 편집 영역 */} + {clause.isEditing && ( + <div className="mb-3 p-2.5 bg-amber-50 rounded border border-amber-200"> + <div className="flex items-center text-sm font-medium text-amber-800 mb-2"> + <MessageSquare className="h-4 w-4 mr-2" /> + 협의 코멘트 + </div> + <Textarea + value={clause.tempComment || ""} + onChange={(e) => updateTempComment(clause.uniqueId, e.target.value)} + placeholder="이 조항에 대한 의견이나 수정 요청 사항을 입력해주세요..." + className="min-h-[60px] text-sm bg-white border-amber-200 focus:border-amber-300" + disabled={clause.isSaving} + /> + <p className="text-xs text-amber-600 mt-1"> + 코멘트를 입력하면 이 계약서는 서명할 수 없게 됩니다. + </p> + </div> + )} + + {/* 기존 코멘트 표시 */} + {!clause.isEditing && clause.hasComment && clause.negotiationNote && ( + <div className="mb-2 p-2.5 bg-amber-50 rounded border border-amber-200"> + <div className="flex items-center text-sm font-medium text-amber-800 mb-2"> + <MessageSquare className="h-4 w-4 mr-2" /> + 협의 코멘트 + </div> + <p className="text-sm text-amber-700 whitespace-pre-wrap"> + {clause.negotiationNote} + </p> + </div> + )} + </div> + )} + + {/* 자식 조항들 */} + {hasChildren && ( + <div className={isExpanded ? "mt-1 border-l border-gray-200 pl-3" : ""}> + {children.map(child => renderCompactClause(child, depth + 1))} + </div> + )} + </div> + ); + }, [expandedItems, groupedClauses, toggleExpand, saveComment, cancelEdit, toggleEdit, updateTempComment]); + + // 기본 모드 렌더링 (기존 코드 최적화) + const renderNormalClause = useCallback((clause: ClauseState, depth: number = 0): React.ReactNode => { + const isExpanded = expandedItems.has(clause.uniqueId); + const children = groupedClauses[clause.uniqueId] || []; + const hasChildren = children.length > 0; + + return ( + <div key={clause.uniqueId} className={`mb-1 ${depth > 0 ? 'ml-4' : ''}`}> + <Card className={cn( + "transition-all duration-200", + clause.hasComment && "border-amber-200 bg-amber-50", + clause.isExcluded && "opacity-50 border-gray-300" + )}> + <CardHeader className="pb-1 pt-2 px-3"> + <div className="flex items-start justify-between"> + <div className="flex items-start space-x-2 flex-1 min-w-0"> + {/* 확장/축소 버튼 */} + <Button + variant="ghost" + size="sm" + className="h-5 w-5 p-0 flex-shrink-0" + onClick={() => toggleExpand(clause.uniqueId)} + > + {isExpanded ? ( + <ChevronDown className="h-3 w-3" /> + ) : ( + <ChevronRight className="h-3 w-3" /> + )} + </Button> + + <div className="flex-1 min-w-0"> + <CardTitle className="text-sm font-medium text-gray-800 flex items-center"> + <Hash className="h-3 w-3 mr-1 text-blue-500" /> + {clause.effectiveItemNumber} + {clause.hasComment && ( + <Badge variant="outline" className="ml-2 text-xs bg-amber-50 text-amber-700 border-amber-200"> + <MessageSquare className="h-2 w-2 mr-1" /> + 코멘트 + </Badge> + )} + {clause.isExcluded && ( + <Badge variant="outline" className="ml-2 text-xs bg-gray-50 text-gray-500 border-gray-300"> + 제외됨 + </Badge> + )} + </CardTitle> + <p className="text-sm font-medium text-gray-700 mt-0.5"> + {clause.effectiveSubtitle} + </p> + </div> + + {/* 코멘트 버튼 */} + <div className="flex items-center space-x-0.5 flex-shrink-0"> + {clause.isEditing ? ( + <div className="flex items-center space-x-0.5"> + <Button + variant="ghost" + size="sm" + onClick={() => saveComment(clause.uniqueId)} + disabled={clause.isSaving} + className="h-6 px-2 text-green-600 hover:text-green-700 hover:bg-green-50" + > + {clause.isSaving ? ( + <Loader2 className="h-3 w-3 animate-spin" /> + ) : ( + <Save className="h-3 w-3" /> + )} + </Button> + <Button + variant="ghost" + size="sm" + onClick={() => cancelEdit(clause.uniqueId)} + disabled={clause.isSaving} + className="h-6 px-2 text-gray-500 hover:text-gray-700 hover:bg-gray-50" + > + <X className="h-3 w-3" /> + </Button> + </div> + ) : ( + <Button + variant="ghost" + size="sm" + onClick={() => toggleEdit(clause.uniqueId)} + className={cn( + "h-6 px-2 transition-colors", + clause.hasComment + ? "text-amber-600 hover:text-amber-700 hover:bg-amber-50" + : "text-gray-500 hover:text-gray-700 hover:bg-gray-50" + )} + > + {clause.hasComment ? ( + <MessageSquare className="h-3 w-3" /> + ) : ( + <Edit3 className="h-3 w-3" /> + )} + </Button> + )} + </div> + </div> + </div> + </CardHeader> + + {isExpanded && ( + <CardContent className="pt-0 px-3 pb-2"> + {/* 카테고리 */} + {clause.effectiveCategory && ( + <div className="mb-2"> + <div className="flex items-center text-xs text-gray-500 mb-1"> + <BookOpen className="h-3 w-3 mr-1" /> + 카테고리 + </div> + <p className="text-sm text-gray-700 bg-gray-50 p-2 rounded"> + {clause.effectiveCategory} + </p> + </div> + )} + + {/* 내용 */} + {clause.effectiveContent && ( + <div className="mb-2"> + <div className="flex items-center text-xs text-gray-500 mb-1"> + <FileText className="h-3 w-3 mr-1" /> + 내용 + </div> + <p className="text-sm text-gray-700 bg-gray-50 p-2 rounded whitespace-pre-wrap leading-tight"> + {clause.effectiveContent} + </p> + </div> + )} + + {/* 코멘트 편집 영역 */} + {clause.isEditing && ( + <div className="mb-2 p-2 bg-amber-50 rounded border border-amber-200"> + <div className="flex items-center text-sm font-medium text-amber-800 mb-1"> + <MessageSquare className="h-4 w-4 mr-2" /> + 협의 코멘트 + </div> + <Textarea + value={clause.tempComment || ""} + onChange={(e) => updateTempComment(clause.uniqueId, e.target.value)} + placeholder="이 조항에 대한 의견이나 수정 요청 사항을 입력해주세요..." + className="min-h-[60px] text-sm bg-white border-amber-200 focus:border-amber-300" + disabled={clause.isSaving} + /> + <p className="text-xs text-amber-600 mt-1"> + 코멘트를 입력하면 이 계약서는 서명할 수 없게 됩니다. + </p> + </div> + )} + + {/* 기존 코멘트 표시 */} + {!clause.isEditing && clause.hasComment && clause.negotiationNote && ( + <div className="mb-2 p-2 bg-amber-50 rounded border border-amber-200"> + <div className="flex items-center text-sm font-medium text-amber-800 mb-1"> + <MessageSquare className="h-4 w-4 mr-2" /> + 협의 코멘트 + </div> + <p className="text-sm text-amber-700 whitespace-pre-wrap"> + {clause.negotiationNote} + </p> + </div> + )} + + {/* 자식 조항들 */} + {hasChildren && ( + <div className="mt-2 border-l-2 border-gray-200 pl-2"> + {children.map(child => renderNormalClause(child, depth + 1))} + </div> + )} + </CardContent> + )} + </Card> + + {/* 확장되지 않았을 때 자식 조항들 */} + {!isExpanded && hasChildren && ( + <div className="ml-4"> + {children.map(child => renderNormalClause(child, depth + 1))} + </div> + )} + </div> + ); + }, [expandedItems, groupedClauses, toggleExpand, saveComment, cancelEdit, toggleEdit, updateTempComment]); + + if (loading) { + return ( + <div className="flex items-center justify-center h-64"> + <div className="text-center"> + <Loader2 className="h-8 w-8 text-blue-500 animate-spin mx-auto mb-4" /> + <p className="text-sm text-gray-500">GTC 조항을 불러오는 중...</p> + </div> + </div> + ); + } + + if (error) { + return ( + <div className="flex items-center justify-center h-64"> + <div className="text-center"> + <AlertTriangle className="h-8 w-8 text-red-500 mx-auto mb-4" /> + <p className="text-sm text-gray-700 font-medium mb-2">GTC 데이터 로드 실패</p> + <p className="text-sm text-gray-500 mb-4">{error}</p> + <Button onClick={loadGtcData} size="sm"> + 다시 시도 + </Button> + </div> + </div> + ); + } + + if (!gtcData) { + return ( + <div className="flex items-center justify-center h-64"> + <div className="text-center"> + <FileText className="h-8 w-8 text-gray-400 mx-auto mb-4" /> + <p className="text-sm text-gray-500">GTC 데이터가 없습니다.</p> + </div> + </div> + ); + } + + const totalComments = clauses.filter(c => c.hasComment).length; + + return ( + <div className="h-full flex flex-col"> + {/* 헤더 */} + <div className={cn( + "flex-shrink-0 border-b bg-gray-50", + compactMode ? "p-2.5" : "p-3" + )}> + <div className={cn( + "flex items-center justify-between", + compactMode ? "mb-2" : "mb-2" + )}> + <div className="flex-1 min-w-0"> + <h3 className={cn( + "font-semibold text-gray-800 flex items-center", + compactMode ? "text-sm" : "text-base" + )}> + <FileText className={cn( + "mr-2 text-blue-500", + compactMode ? "h-4 w-4" : "h-5 w-5" + )} /> + {gtcData.vendorDocument.name} + </h3> + {!compactMode && ( + <p className="text-sm text-gray-500 mt-0.5"> + {gtcData.vendorDocument.description || "GTC 조항 검토 및 협의"} + </p> + )} + </div> + <div className="flex items-center space-x-1.5"> + {/* 모드 전환 버튼 */} + <Button + variant="ghost" + size="sm" + onClick={() => setCompactMode(!compactMode)} + className={cn( + "transition-colors", + compactMode ? "h-7 px-2" : "h-7 px-2" + )} + title={compactMode ? "일반 모드로 전환" : "컴팩트 모드로 전환"} + > + {compactMode ? ( + <Maximize2 className="h-3 w-3" /> + ) : ( + <Minimize2 className="h-3 w-3" /> + )} + </Button> + + <Badge variant="outline" className={cn( + "bg-blue-50 text-blue-700 border-blue-200", + compactMode ? "text-xs px-1.5 py-0.5" : "text-xs" + )}> + 총 {clauses.length}개 조항 + </Badge> + {totalComments > 0 && ( + <Badge variant="outline" className={cn( + "bg-amber-50 text-amber-700 border-amber-200", + compactMode ? "text-xs px-1.5 py-0.5" : "text-xs" + )}> + <MessageSquare className={cn( + "mr-1", + compactMode ? "h-2.5 w-2.5" : "h-3 w-3" + )} /> + {totalComments}개 코멘트 + </Badge> + )} + </div> + </div> + + {/* 검색 */} + <div className="relative"> + <div className="absolute inset-y-0 left-2 flex items-center pointer-events-none"> + <Search className={cn( + "text-gray-400", + compactMode ? "h-3.5 w-3.5" : "h-4 w-4" + )} /> + </div> + <Input + placeholder={compactMode ? "조항 검색..." : "조항 번호, 제목, 내용, 코멘트로 검색..."} + className={cn( + "bg-white text-gray-700", + compactMode ? "pl-8 text-sm h-8" : "pl-8 text-sm" + )} + value={searchTerm} + onChange={(e) => setSearchTerm(e.target.value)} + /> + </div> + + {/* 안내 메시지 */} + {totalComments > 0 && ( + <div className={cn( + "bg-amber-50 rounded border border-amber-200", + compactMode ? "mt-2 p-2" : "mt-2 p-2" + )}> + <div className={cn( + "flex items-center text-amber-800", + compactMode ? "text-sm" : "text-sm" + )}> + <AlertTriangle className={cn( + "mr-2", + compactMode ? "h-4 w-4" : "h-4 w-4" + )} /> + <span className="font-medium">코멘트가 있어 서명할 수 없습니다.</span> + </div> + {!compactMode && ( + <p className="text-sm text-amber-700 mt-0.5"> + 모든 코멘트를 삭제하거나 협의를 완료한 후 서명해주세요. + </p> + )} + </div> + )} + </div> + + {/* 조항 목록 */} + <ScrollArea className="flex-1"> + <div className={compactMode ? "p-2.5" : "p-3"}> + {filteredClauses.length === 0 ? ( + <div className="text-center py-6"> + <FileText className="h-6 w-6 text-gray-300 mx-auto mb-2" /> + <p className="text-sm text-gray-500"> + {searchTerm ? "검색 결과가 없습니다." : "조항이 없습니다."} + </p> + </div> + ) : ( + <div className={compactMode ? "space-y-0.5" : "space-y-1"}> + {(groupedClauses[0] || []).map(clause => + compactMode ? renderCompactClause(clause) : renderNormalClause(clause) + )} + </div> + )} + </div> + </ScrollArea> + </div> + ); +}
\ No newline at end of file diff --git a/lib/basic-contract/viewer/SurveyComponent.tsx b/lib/basic-contract/viewer/SurveyComponent.tsx new file mode 100644 index 00000000..299fe6fa --- /dev/null +++ b/lib/basic-contract/viewer/SurveyComponent.tsx @@ -0,0 +1,922 @@ +import React, { useState, useEffect, useRef, useMemo, useCallback } from "react"; +import { useForm, useWatch, Controller } from "react-hook-form"; +import { Loader2, FileText, ClipboardList, AlertTriangle, CheckCircle2, Upload, ChevronDown, ChevronUp } from "lucide-react"; +import { toast } from "sonner"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Label } from "@/components/ui/label"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { + CompleteSurveyRequest, + ExistingResponse, + SurveyAnswerData, + completeSurvey, + getExistingSurveyResponse, + type SurveyTemplateWithQuestions +} from '../service'; +import { ConditionalSurveyHandler } from '../vendor-table/survey-conditional'; + +// 폼 데이터 타입 정의 +interface SurveyFormData { + [key: string]: { + answerValue?: string; + detailText?: string; + otherText?: string; + files?: File[]; + }; +} + +interface SurveyComponentProps { + contractId?: number; + surveyTemplate: SurveyTemplateWithQuestions | null; + surveyLoading: boolean; + conditionalHandler: ConditionalSurveyHandler | null; + onSurveyComplete?: () => void; + onSurveyDataUpdate: (data: any) => void; + onLoadSurveyTemplate: () => void; + setActiveTab: (tab: string) => void; +} + +export const SurveyComponent: React.FC<SurveyComponentProps> = ({ + contractId, + surveyTemplate, + surveyLoading, + conditionalHandler, + onSurveyComplete, + onSurveyDataUpdate, + onLoadSurveyTemplate, + setActiveTab +}) => { + const [uploadedFiles, setUploadedFiles] = useState<Record<number, File[]>>({}); + const [existingResponse, setExistingResponse] = useState<ExistingResponse | null>(null); + const [loadingExistingResponse, setLoadingExistingResponse] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false); + const [formInitialized, setFormInitialized] = useState(false); + const [isHeaderExpanded, setIsHeaderExpanded] = useState(false); + + console.log(uploadedFiles,"uploadedFiles") + + // 무한 렌더링 방지를 위한 ref + const loadingRef = useRef(false); + const initializedRef = useRef(false); + + // 기본 폼 설정 - 의존성 최소화 + const { control, watch, setValue, getValues, formState: { errors }, trigger, reset } = useForm<SurveyFormData>({ + defaultValues: {}, + mode: 'onChange' + }); + + const watchedValues = watch(); + + + // 기존 응답 로드 - 한 번만 실행되도록 최적화 + useEffect(() => { + // 중복 실행 방지 + if (loadingRef.current || !contractId || !surveyTemplate?.id || initializedRef.current) { + return; + } + + loadingRef.current = true; + setLoadingExistingResponse(true); + + const loadExistingResponse = async () => { + try { + console.log('📥 기존 설문 응답 조회 시작...', { contractId, templateId: surveyTemplate.id }); + + const result = await getExistingSurveyResponse(contractId, surveyTemplate.id); + + if (result.success && result.data) { + console.log('✅ 기존 응답 발견:', result.data); + setExistingResponse(result.data); + + // 폼 초기값 설정 + const formValues: SurveyFormData = {}; + const existingFiles: Record<number, File[]> = {}; + + result.data.answers.forEach(answer => { + formValues[answer.questionId] = { + answerValue: answer.answerValue || '', + detailText: answer.detailText || '', + otherText: answer.otherText || '', + files: answer.files || [], // 기존 파일 정보 유지 + }; + + // 파일이 있다면 uploadedFiles에도 설정 (표시용) + if (answer.files && answer.files.length > 0) { + existingFiles[answer.questionId] = answer.files; + } + }); + + console.log('📝 폼 초기값 설정:', formValues); + + // reset을 사용하여 폼 전체를 한 번에 초기화 + reset(formValues); + setUploadedFiles(existingFiles) + + // 기존 응답이 완료되었다면 부모에게 알림 + if (result.data.status === 'COMPLETED') { + const completedData = { + completed: true, + answers: result.data.answers, + timestamp: result.data.completedAt || new Date().toISOString(), + responseId: result.data.responseId, + }; + + onSurveyDataUpdate(completedData); + + // ⭐ 여기가 핵심: 기존 완료된 설문이 있으면 즉시 부모의 설문 완료 상태 업데이트 + if (onSurveyComplete) { + console.log(`📋 기존 완료된 설문조사 감지 - 부모 상태 업데이트: 계약서 ${contractId}`); + onSurveyComplete(); + } + } + + } else { + console.log('📭 기존 응답 없음'); + setExistingResponse(null); + } + + initializedRef.current = true; + setFormInitialized(true); + + } catch (error) { + console.error('❌ 기존 응답 로드 중 오류:', error); + setExistingResponse(null); + initializedRef.current = true; + setFormInitialized(true); + } finally { + setLoadingExistingResponse(false); + loadingRef.current = false; + } + }; + + loadExistingResponse(); + }, [contractId, surveyTemplate?.id,onSurveyComplete]); // 의존성 최소화 + + // 실시간 진행 상태 계산 - 안정화 + const progressStatus = useMemo(() => { + if (!formInitialized || !conditionalHandler || !surveyTemplate) { + return { + visibleQuestions: [], + totalRequired: 0, + completedRequired: 0, + completedQuestionIds: [], + incompleteQuestionIds: [], + progressPercentage: 0, + debugInfo: {} + }; + } + + // 현재 답변을 조건부 핸들러가 인식할 수 있는 형태로 변환 + const convertedAnswers: Record<number, any> = {}; + Object.entries(watchedValues || {}).forEach(([questionId, value]) => { + const id = parseInt(questionId); + if (!isNaN(id) && value) { + convertedAnswers[id] = { + questionId: id, + answerValue: value.answerValue || '', + detailText: value.detailText || '', + otherText: value.otherText || '', + files: value.files || [] + }; + } + }); + + console.log(convertedAnswers,"convertedAnswers") + + return conditionalHandler.getSimpleProgressStatus(convertedAnswers); + }, [conditionalHandler, watchedValues, surveyTemplate, formInitialized]); + + console.log(progressStatus,"progressStatus") + + // 동적 상태 정보 - 메모화 + const { + visibleQuestions, + totalVisibleQuestions, + baseQuestionCount, + conditionalQuestionCount, + hasConditionalQuestions, + canComplete + } = useMemo(() => { + const visibleQuestions = progressStatus.visibleQuestions; + const totalVisibleQuestions = visibleQuestions.length; + const baseQuestionCount = surveyTemplate?.questions.length || 0; + const conditionalQuestionCount = totalVisibleQuestions - baseQuestionCount; + const hasConditionalQuestions = conditionalQuestionCount > 0; + const canComplete = progressStatus.totalRequired > 0 && + progressStatus.completedRequired === progressStatus.totalRequired; + + return { + visibleQuestions, + totalVisibleQuestions, + baseQuestionCount, + conditionalQuestionCount, + hasConditionalQuestions, + canComplete + }; + }, [progressStatus, surveyTemplate?.questions]); + + // 파일 업로드 핸들러 - 안정적인 참조 + const handleFileUpload = useCallback((questionId: number, files: FileList | null) => { + if (!files) return; + + const fileArray = Array.from(files); + setUploadedFiles(prev => ({ + ...prev, + [questionId]: fileArray + })); + + setValue(`${questionId}.files`, fileArray); + }, [setValue]); + + // 답변 변경 핸들러 - 안정적인 참조 + const handleAnswerChange = useCallback((questionId: number, field: string, value: any) => { + console.log(`📝 답변 변경: 질문 ${questionId}, 필드 ${field}, 값:`, value); + + setValue(`${questionId}.${field}`, value); + + // 부모 질문의 답변이 변경되면 조건부 자식 질문들 처리 + if (field === 'answerValue' && conditionalHandler) { + // setTimeout으로 다음 tick에서 처리하여 상태 업데이트 충돌 방지 + setTimeout(() => { + const currentValues = getValues(); + const convertedAnswers: Record<number, any> = {}; + + Object.entries(currentValues).forEach(([qId, qValue]) => { + const id = parseInt(qId); + if (!isNaN(id) && qValue) { + convertedAnswers[id] = { + questionId: id, + answerValue: qValue.answerValue || '', + detailText: qValue.detailText || '', + otherText: qValue.otherText || '', + files: qValue.files || [] + }; + } + }); + + // 새로운 답변 반영 + convertedAnswers[questionId] = { + ...convertedAnswers[questionId], + questionId, + [field]: value + }; + + // 영향받는 자식 질문들의 답변 초기화 + const clearedAnswers = conditionalHandler.clearAffectedChildAnswers(questionId, value, convertedAnswers); + + // 삭제된 답변들을 폼에서도 제거 + Object.keys(convertedAnswers).forEach(qId => { + const id = parseInt(qId); + if (id !== questionId && !clearedAnswers[id]) { + console.log(`🗑️ 질문 ${id} 답변 초기화`); + setValue(`${id}`, { + answerValue: '', + detailText: '', + otherText: '', + files: [] + }); + + setUploadedFiles(prev => { + const updated = { ...prev }; + delete updated[id]; + return updated; + }); + } + }); + }, 0); + } + }, [setValue, getValues, conditionalHandler]); + + // OTHER 텍스트 입력 컴포넌트 + const OtherTextInput = useCallback(({ questionId, fieldName }: { questionId: number; fieldName: string }) => { + const answerValue = useWatch({ + control, + name: `${fieldName}.answerValue` + }); + + const question = visibleQuestions.find(q => q.id === questionId); + const selectedOption = question?.options?.find(opt => opt.optionValue === answerValue); + + if (!selectedOption?.allowsOtherInput) return null; + + return ( + <Controller + name={`${fieldName}.otherText`} + control={control} + render={({ field }) => ( + <Input + {...field} + placeholder="기타 내용을 입력해주세요" + className="mt-2" + /> + )} + /> + ); + }, [control, visibleQuestions]); + + // 설문조사 완료 핸들러 + const handleSurveyComplete = useCallback(async () => { + console.log('🎯 설문조사 완료 시도'); + + if (isSubmitting) { + console.log('⚠️ 이미 제출 중...'); + return; + } + + setIsSubmitting(true); + + try { + const currentValues = getValues(); + const isValid = await trigger(); + + if (!canComplete) { + let errorMessage = '모든 필수 항목을 완료해주세요.'; + let errorDescription = `${progressStatus.completedRequired}/${progressStatus.totalRequired} 완료됨`; + + if (progressStatus.incompleteQuestionIds.length > 0) { + const incompleteReasons = progressStatus.incompleteQuestionIds.map(id => { + const debug = progressStatus.debugInfo?.[id]; + const question = visibleQuestions.find(q => q.id === id); + return `• Q${question?.questionNumber}: ${question?.questionText?.substring(0, 40)}...\n → ${debug?.incompleteReason || '답변 필요'}`; + }).slice(0, 3); + + errorDescription = incompleteReasons.join('\n\n'); + + if (progressStatus.incompleteQuestionIds.length > 3) { + errorDescription += `\n\n... 외 ${progressStatus.incompleteQuestionIds.length - 3}개 항목`; + } + } + + toast.error(errorMessage, { + description: errorDescription, + icon: <AlertTriangle className="h-5 w-5 text-red-500" />, + duration: 12000 + }); + + if (progressStatus.incompleteQuestionIds.length > 0) { + const firstIncompleteId = progressStatus.incompleteQuestionIds[0]; + const element = document.getElementById(`question-${firstIncompleteId}`); + if (element) { + element.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + } + + return; + } + + if (!contractId || !surveyTemplate?.id) { + toast.error('계약서 정보 또는 설문 템플릿 정보가 없습니다.'); + return; + } + + const surveyAnswers: SurveyAnswerData[] = Object.entries(currentValues) + .map(([questionId, value]) => ({ + questionId: parseInt(questionId), + answerValue: value?.answerValue || '', + detailText: value?.detailText || '', + otherText: value?.otherText || '', + files: value?.files || [] + })) + .filter(answer => + answer.answerValue || answer.detailText || (answer.files && answer.files.length > 0) + ); + + const requestData: CompleteSurveyRequest = { + contractId: contractId, + templateId: surveyTemplate.id, + answers: surveyAnswers, + progressStatus: progressStatus + }; + + const submitToast = toast.loading('설문조사를 저장하는 중...', { + description: '잠시만 기다려주세요.', + duration: Infinity + }); + + const result = await completeSurvey(requestData); + toast.dismiss(submitToast); + + if (result.success) { + const completedSurveyData = { + completed: true, + answers: surveyAnswers, + timestamp: new Date().toISOString(), + progressStatus: progressStatus, + totalQuestions: totalVisibleQuestions, + conditionalQuestions: conditionalQuestionCount, + responseId: result.data?.responseId + }; + + onSurveyDataUpdate(completedSurveyData); + + if (onSurveyComplete) { + onSurveyComplete(); + } + + toast.success("🎉 설문조사가 완료되었습니다!", { + description: `총 ${progressStatus.totalRequired}개 필수 질문 완료${hasConditionalQuestions ? ` (조건부 ${conditionalQuestionCount}개 포함)` : ''}`, + icon: <CheckCircle2 className="h-5 w-5 text-green-500" />, + duration: 5000 + }); + + setTimeout(() => { + setActiveTab('main'); + }, 2000); + + } else { + console.error('❌ 서버 응답 에러:', result.message); + toast.error('설문조사 저장 실패', { + description: result.message || '서버에서 오류가 발생했습니다.', + icon: <AlertTriangle className="h-5 w-5 text-red-500" />, + duration: 8000 + }); + } + + } catch (error) { + console.error('❌ 설문조사 저장 중 예외 발생:', error); + + let errorMessage = '설문조사 저장에 실패했습니다.'; + let errorDescription = '네트워크 연결을 확인하고 다시 시도해주세요.'; + + if (error instanceof Error) { + errorDescription = error.message; + } + + toast.error(errorMessage, { + description: errorDescription, + icon: <AlertTriangle className="h-5 w-5 text-red-500" />, + duration: 10000 + }); + } finally { + setIsSubmitting(false); + } + }, [ + getValues, + trigger, + canComplete, + progressStatus, + visibleQuestions, + contractId, + surveyTemplate?.id, + totalVisibleQuestions, + conditionalQuestionCount, + hasConditionalQuestions, + isSubmitting, + onSurveyComplete, + onSurveyDataUpdate, + setActiveTab + ]); + + if (surveyLoading || loadingExistingResponse) { + return ( + <div className="h-full w-full"> + <Card className="h-full"> + <CardContent className="flex flex-col items-center justify-center h-full py-12"> + <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" /> + <p className="text-sm text-muted-foreground"> + {surveyLoading ? '설문조사를 불러오는 중...' : '기존 응답을 확인하는 중...'} + </p> + </CardContent> + </Card> + </div> + ); + } + + if (!surveyTemplate) { + return ( + <div className="h-full w-full"> + <Card className="h-full"> + <CardContent className="flex flex-col items-center justify-center h-full py-12"> + <AlertTriangle className="h-8 w-8 text-red-500 mb-4" /> + <p className="text-sm text-muted-foreground">설문조사 템플릿을 불러올 수 없습니다.</p> + <Button + variant="outline" + onClick={onLoadSurveyTemplate} + className="mt-2" + > + 다시 시도 + </Button> + </CardContent> + </Card> + </div> + ); + } + + return ( + <div className="h-full w-full flex flex-col"> + <Card className="h-full flex flex-col"> + <CardHeader className="pb-2"> + {/* 항상 보이는 컴팩트 헤더 */} + <div className="flex items-center justify-between"> + <CardTitle className="flex items-center text-lg"> + <ClipboardList className="h-5 w-5 mr-2 text-amber-500" /> + <span className="truncate max-w-[300px]">{surveyTemplate.name}</span> + {existingResponse && ( + <Badge + variant={existingResponse.status === 'COMPLETED' ? 'default' : 'secondary'} + className="ml-2 text-xs" + > + {existingResponse.status === 'COMPLETED' ? '완료됨' : '작성중'} + </Badge> + )} + </CardTitle> + + <div className="flex items-center space-x-3"> + {/* 컴팩트 진행률 표시 */} + <div className="flex items-center space-x-2"> + <div className="w-20 bg-gray-200 rounded-full h-1.5"> + <div + className="bg-gradient-to-r from-blue-500 to-blue-600 h-1.5 rounded-full transition-all duration-300" + style={{ width: `${progressStatus.progressPercentage}%` }} + /> + </div> + <span className="text-xs text-gray-600 whitespace-nowrap"> + {progressStatus.completedRequired}/{progressStatus.totalRequired} + </span> + </div> + + {/* 펼치기/접기 버튼 */} + <Button + variant="ghost" + size="sm" + onClick={() => setIsHeaderExpanded(!isHeaderExpanded)} + className="p-1 h-8 w-8" + > + {isHeaderExpanded ? ( + <ChevronUp className="h-4 w-4" /> + ) : ( + <ChevronDown className="h-4 w-4" /> + )} + </Button> + </div> + </div> + + {/* 접을 수 있는 상세 정보 - 조건부 렌더링 */} + {isHeaderExpanded && ( + <div className="mt-3 pt-3 space-y-3 border-t"> + {/* 기존 응답 정보 */} + {existingResponse && ( + <div className="p-2 bg-blue-50 border border-blue-200 rounded-lg"> + <div className="flex items-center text-sm"> + <CheckCircle2 className="h-4 w-4 text-blue-600 mr-2" /> + <span className="text-blue-800"> + {existingResponse.status === 'COMPLETED' + ? '이미 완료된 설문조사입니다. 내용을 수정할 수 있습니다.' + : '이전에 작성하던 내용이 복원되었습니다.'} + </span> + </div> + {existingResponse.completedAt && ( + <div className="text-xs text-blue-600 mt-1"> + 완료일시: {new Date(existingResponse.completedAt).toLocaleString('ko-KR')} + </div> + )} + </div> + )} + + {/* 질문 정보 - 그리드로 컴팩트하게 */} + {/* <div className="grid grid-cols-2 gap-4 text-sm"> + <div className="space-y-1"> + <div className="text-gray-600"> + 📋 총 {totalVisibleQuestions}개 질문 + </div> + {hasConditionalQuestions && ( + <div className="text-blue-600 text-xs"> + ⚡ 조건부 {conditionalQuestionCount}개 추가됨 + </div> + )} + </div> + + <div className="space-y-1"> + <div className="text-gray-600"> + ✅ 완료: {progressStatus.completedRequired}개 + </div> + <div className="text-gray-600"> + ⏳ 남은 필수: {progressStatus.totalRequired - progressStatus.completedRequired}개 + </div> + </div> + </div> */} + + {/* 상세 진행률 바 */} + {/* <div className="space-y-2"> + <div className="flex justify-between text-xs text-gray-600"> + <span>필수 질문 진행률</span> + <span> + {Math.round(progressStatus.progressPercentage)}% + {hasConditionalQuestions && ( + <span className="ml-1 text-blue-600">(조건부 포함)</span> + )} + </span> + </div> + <div className="w-full bg-gray-200 rounded-full h-3"> + <div + className="bg-gradient-to-r from-blue-500 to-blue-600 h-3 rounded-full transition-all duration-500 ease-out" + style={{ width: `${progressStatus.progressPercentage}%` }} + /> + </div> + </div> */} + + {/* 중요 안내 - 컴팩트하게 */} + <div className="p-3 border rounded-lg bg-yellow-50 border-yellow-200"> + <div className="flex items-start"> + <AlertTriangle className="h-4 w-4 text-yellow-600 mt-0.5 mr-2 flex-shrink-0" /> + <div> + <p className="font-medium text-yellow-800 text-sm">준법 의무 확인 필수</p> + <p className="text-xs text-yellow-700 mt-1"> + 모든 필수 항목을 정확히 작성해주세요. 답변에 따라 추가 질문이 나타날 수 있습니다. + </p> + </div> + </div> + </div> + </div> + )} + + {/* 헤더가 접혀있을 때 보이는 요약 정보 */} + {!isHeaderExpanded && ( + <div className="flex items-center justify-between text-xs text-gray-500 mt-2 pt-2 border-t"> + <span> + 📋 {totalVisibleQuestions}개 질문 + {hasConditionalQuestions && ( + <span className="text-blue-600 ml-1">(+{conditionalQuestionCount}개 조건부)</span> + )} + </span> + <span + className="text-blue-600 hover:underline cursor-pointer" + onClick={() => setIsHeaderExpanded(true)} + > + 상세 정보 보기 ↑ + </span> + </div> + )} +</CardHeader> + + <CardContent className="flex-1 min-h-0 overflow-y-auto"> + <form onSubmit={(e) => e.preventDefault()} className="space-y-6"> + {/* <div className="p-4 border rounded-lg bg-yellow-50"> + <div className="flex items-start"> + <AlertTriangle className="h-5 w-5 text-yellow-600 mt-0.5 mr-2" /> + <div> + <p className="font-medium text-yellow-800">중요 안내</p> + <p className="text-sm text-yellow-700 mt-1"> + 본 설문조사는 준법 의무 확인을 위한 필수 절차입니다. 모든 항목을 정확히 작성해주세요. + {conditionalHandler && ( + <span className="block mt-1"> + ⚡ 답변에 따라 추가 질문이 나타날 수 있으며, 이 경우 모든 추가 질문도 완료해야 합니다. + </span> + )} + </p> + </div> + </div> + </div> */} + + <div className="space-y-4"> + {visibleQuestions.map((question: any) => { + const fieldName = `${question.id}`; + const isComplete = progressStatus.completedQuestionIds.includes(question.id); + const isConditional = !!question.parentQuestionId; + + return ( + <div + key={question.id} + id={`question-${question.id}`} + className={`mb-6 p-4 border rounded-lg transition-colors duration-200 ${ + isConditional + ? 'bg-blue-50 border-blue-200' + : 'bg-gray-50 border-gray-200' + } ${!isComplete && question.isRequired ? 'ring-2 ring-red-100' : ''}`} + > + <div className="flex items-start justify-between mb-3"> + <div className="flex-1"> + <Label className="text-sm font-medium text-gray-900 flex items-center flex-wrap gap-2"> + <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs"> + Q{question.questionNumber} + </span> + + {isConditional && ( + <span className="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs"> + ⚡ 조건부 질문 + </span> + )} + + {question.questionType === 'FILE' && ( + <span className="px-2 py-1 bg-green-100 text-green-700 rounded text-xs"> + 📎 파일 업로드 + </span> + )} + + <div className="w-full mt-1"> + {question.questionText} + {question.isRequired && <span className="text-red-500 ml-1">*</span>} + </div> + </Label> + </div> + + {isComplete && ( + <CheckCircle2 className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" /> + )} + </div> + + {/* 질문 타입별 렌더링 */} + {question.questionType === 'RADIO' && ( + <Controller + name={`${fieldName}.answerValue`} + control={control} + rules={{ required: question.isRequired ? '필수 항목입니다.' : false }} + render={({ field }) => ( + <RadioGroup + value={field.value || ''} + onValueChange={(value) => { + field.onChange(value); + handleAnswerChange(question.id, 'answerValue', value); + }} + className="space-y-2" + > + {question.options?.map((option: any) => ( + <div key={option.id} className="flex items-center space-x-2"> + <RadioGroupItem value={option.optionValue} id={`${question.id}-${option.id}`} /> + <Label htmlFor={`${question.id}-${option.id}`} className="text-sm"> + {option.optionText} + </Label> + </div> + ))} + </RadioGroup> + )} + /> + )} + + {question.questionType === 'DROPDOWN' && ( + <div className="space-y-2"> + <Controller + name={`${fieldName}.answerValue`} + control={control} + rules={{ required: question.isRequired ? '필수 항목입니다.' : false }} + render={({ field }) => ( + <Select + value={field.value || ''} + onValueChange={(value) => { + field.onChange(value); + handleAnswerChange(question.id, 'answerValue', value); + }} + > + <SelectTrigger> + <SelectValue placeholder="선택해주세요" /> + </SelectTrigger> + <SelectContent> + {question.options?.map((option: any) => ( + <SelectItem key={option.id} value={option.optionValue}> + {option.optionText} + </SelectItem> + ))} + </SelectContent> + </Select> + )} + /> + <OtherTextInput questionId={question.id} fieldName={fieldName} /> + </div> + )} + + {question.questionType === 'TEXTAREA' && ( + <Controller + name={`${fieldName}.detailText`} + control={control} + rules={{ required: question.isRequired ? '필수 항목입니다.' : false }} + render={({ field }) => ( + <Textarea + {...field} + placeholder="상세한 내용을 입력해주세요" + rows={4} + /> + )} + /> + )} + + {question.hasDetailText && ( + <div className="mt-3"> + <Label className="text-sm text-gray-700 mb-2 block">상세 내용을 기술해주세요:</Label> + <Controller + name={`${fieldName}.detailText`} + control={control} + rules={{ required: question.isRequired ? '상세 내용을 입력해주세요.' : false }} + render={({ field }) => ( + <Textarea + {...field} + placeholder="상세한 내용을 입력해주세요" + rows={3} + className="w-full" + /> + )} + /> + </div> + )} + + {(question.hasFileUpload || question.questionType === 'FILE') && ( + <div className="mt-3"> + <Label className="text-sm text-gray-700 mb-2 block">첨부파일:</Label> + <div className="border-2 border-dashed border-gray-300 rounded-lg p-4"> + <input + type="file" + multiple + onChange={(e) => handleFileUpload(question.id, e.target.files)} + className="hidden" + id={`file-${question.id}`} + /> + <label htmlFor={`file-${question.id}`} className="cursor-pointer"> + <div className="flex flex-col items-center"> + <Upload className="h-8 w-8 text-gray-400 mb-2" /> + <span className="text-sm text-gray-500">파일을 선택하거나 여기에 드래그하세요</span> + </div> + </label> + + {uploadedFiles[question.id] && uploadedFiles[question.id].length > 0 && ( + <div className="mt-3 space-y-1"> + {uploadedFiles[question.id].map((file, index) => ( + <div key={index} className="flex items-center space-x-2 text-sm"> + <FileText className="h-4 w-4 text-blue-500" /> + <span>{file.fileName}</span> + <span className="text-gray-500">({(file.fileSize / 1024).toFixed(1)} KB)</span> + </div> + ))} + </div> + )} + </div> + </div> + )} + + {errors[fieldName] && ( + <p className="mt-2 text-sm text-red-600 flex items-center"> + <AlertTriangle className="h-4 w-4 mr-1" /> + {errors[fieldName]?.answerValue?.message || + errors[fieldName]?.detailText?.message || + '필수 항목을 완료해주세요.'} + </p> + )} + </div> + ); + })} + </div> + + <div className="flex justify-end pt-6 border-t"> + <div className="flex items-center space-x-4"> + <div className="text-sm"> + {canComplete ? ( + <div className="text-green-600 font-medium flex items-center"> + <CheckCircle2 className="h-4 w-4 mr-1" /> + 모든 필수 항목 완료됨 + {hasConditionalQuestions && ( + <span className="ml-2 text-xs text-blue-600"> + (조건부 {conditionalQuestionCount}개 포함) + </span> + )} + </div> + ) : ( + <div className="space-y-1"> + <div className="flex items-center text-gray-600"> + <AlertTriangle className="h-4 w-4 mr-1 text-red-500" /> + {progressStatus.completedRequired}/{progressStatus.totalRequired} 완료 + </div> + {hasConditionalQuestions && ( + <div className="text-xs text-blue-600"> + 기본 + 조건부 {conditionalQuestionCount}개 포함 + </div> + )} + </div> + )} + </div> + + <Button + type="button" + onClick={handleSurveyComplete} + disabled={!canComplete || isSubmitting} + className={`transition-all duration-200 ${ + canComplete && !isSubmitting + ? 'bg-green-600 hover:bg-green-700 shadow-lg' + : 'bg-gray-400 cursor-not-allowed' + }`} + > + {isSubmitting ? ( + <> + <Loader2 className="h-4 w-4 mr-2 animate-spin" /> + 저장 중... + </> + ) : ( + <> + <CheckCircle2 className="h-4 w-4 mr-2" /> + 설문조사 완료 + </> + )} + <span className="ml-1 text-xs"> + ({progressStatus.completedRequired}/{progressStatus.totalRequired}) + </span> + </Button> + </div> + </div> + </form> + </CardContent> + </Card> + </div> + ); +};
\ No newline at end of file diff --git a/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx b/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx index fbf36738..943878da 100644 --- a/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx +++ b/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx @@ -6,16 +6,13 @@ import React, { useRef, SetStateAction, Dispatch, - useMemo, - useCallback, } from "react"; import { WebViewerInstance } from "@pdftron/webviewer"; -import { Loader2, FileText, ClipboardList, AlertTriangle, FileSignature, Target, CheckCircle2 } from "lucide-react"; +import { Loader2, FileText, ClipboardList, AlertTriangle, FileSignature, Target, CheckCircle2, BookOpen } from "lucide-react"; import { toast } from "sonner"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Dialog, DialogContent, @@ -24,20 +21,15 @@ import { DialogDescription, DialogFooter, } from "@/components/ui/dialog"; -import { Label } from "@/components/ui/label"; -import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Input } from "@/components/ui/input"; -import { Textarea } from "@/components/ui/textarea"; -import { Upload } from "lucide-react"; -import { CompleteSurveyRequest, SurveyAnswerData, completeSurvey, getActiveSurveyTemplate, type SurveyTemplateWithQuestions } from '../service'; -import { ConditionalSurveyHandler, useConditionalSurvey } from '../vendor-table/survey-conditional'; -import { useForm, useWatch, Controller } from "react-hook-form"; +import { getActiveSurveyTemplate, getVendorSignatureFile, type SurveyTemplateWithQuestions } from '../service'; +import { useConditionalSurvey } from '../vendor-table/survey-conditional'; +import { SurveyComponent } from './SurveyComponent'; +import { GtcClausesComponent } from './GtcClausesComponent'; interface FileInfo { path: string; name: string; - type: 'main' | 'attachment' | 'survey'; + type: 'main' | 'attachment' | 'survey' | 'clauses'; } interface BasicContractSignViewerProps { @@ -50,21 +42,13 @@ interface BasicContractSignViewerProps { onSign?: (documentData: ArrayBuffer, surveyData?: any) => Promise<void>; instance: WebViewerInstance | null; setInstance: Dispatch<SetStateAction<WebViewerInstance | null>>; - onSurveyComplete?: () => void; // 🔥 새로 추가 - onSignatureComplete?: () => void; // 🔥 새로 추가 + onSurveyComplete?: () => void; + onSignatureComplete?: () => void; + onGtcCommentStatusChange?: (hasComments: boolean, commentCount: number) => void; + mode?: 'vendor' | 'buyer'; // 추가된 mode prop t?: (key: string) => string; } -// 폼 데이터 타입 정의 -interface SurveyFormData { - [key: string]: { - answerValue?: string; - detailText?: string; - otherText?: string; - files?: File[]; - }; -} - // 자동 서명 필드 생성을 위한 타입 정의 interface SignaturePattern { regex: RegExp; @@ -80,9 +64,11 @@ interface SignaturePattern { class AutoSignatureFieldDetector { private instance: WebViewerInstance; private signaturePatterns: SignaturePattern[]; + private mode: 'vendor' | 'buyer'; // mode 추가 - constructor(instance: WebViewerInstance) { + constructor(instance: WebViewerInstance, mode: 'vendor' | 'buyer' = 'vendor') { this.instance = instance; + this.mode = mode; this.signaturePatterns = this.initializePatterns(); } @@ -128,7 +114,7 @@ class AutoSignatureFieldDetector { } async detectAndCreateSignatureFields(): Promise<string[]> { - console.log("🔍 안전한 서명 필드 감지 시작..."); + console.log(`🔍 안전한 서명 필드 감지 시작... (모드: ${this.mode})`); try { if (!this.instance?.Core?.documentViewer) { @@ -166,77 +152,87 @@ class AutoSignatureFieldDetector { } private async createSimpleSignatureField(): Promise<string> { - try { - const { Core } = this.instance; - const { documentViewer, annotationManager, Annotations } = Core; + const { Core } = this.instance; + const { documentViewer, annotationManager, Annotations } = Core; - const pageCount = documentViewer.getPageCount(); - const pageWidth = documentViewer.getPageWidth(pageCount) || 612; - const pageHeight = documentViewer.getPageHeight(pageCount) || 792; + const page = documentViewer.getPageCount(); + const w = documentViewer.getPageWidth(page) || 612; + const h = documentViewer.getPageHeight(page) || 792; - console.log(`📏 페이지 정보: ${pageCount}페이지, 크기 ${pageWidth}x${pageHeight}`); - - const fieldName = `simple_signature_${Date.now()}`; - const flags = new Annotations.WidgetFlags(); - - const formField = new Core.Annotations.Forms.Field( - `SignatureFormField`, - { - type: "Sig", - flags, - } - ); - - const signatureWidget = new Annotations.SignatureWidgetAnnotation(formField, { - Width: 150, - Height: 50 - }); + const fieldName = `simple_signature_${Date.now()}`; + const flags = new Annotations.WidgetFlags(); + flags.set('Required', true); - signatureWidget.setPageNumber(pageCount); - signatureWidget.setX(pageWidth * 0.7); - signatureWidget.setY(pageHeight * 0.85); - signatureWidget.setWidth(150); - signatureWidget.setHeight(50); + const field = new Core.Annotations.Forms.Field(fieldName, { type: 'Sig', flags }); - annotationManager.addAnnotation(signatureWidget); - annotationManager.redrawAnnotation(signatureWidget); + const widget = new Annotations.SignatureWidgetAnnotation(field, { Width: 150, Height: 50 }); + widget.setPageNumber(page); + + // 구매자 모드일 때는 왼쪽 하단으로 위치 설정 + if (this.mode === 'buyer') { + widget.setX(w * 0.1); // 왼쪽 (10%) + widget.setY(h * 0.85); // 하단 (85%) + } else { + // 협력업체 모드일 때는 기존처럼 오른쪽 + widget.setX(w * 0.7); // 오른쪽 (70%) + widget.setY(h * 0.85); // 하단 (85%) + } + + widget.setWidth(150); + widget.setHeight(50); - console.log(`✅ 서명 필드 생성: ${fieldName}`); - return fieldName; + const fm = annotationManager.getFieldManager(); + fm.addField(field); + annotationManager.addAnnotation(widget); + annotationManager.drawAnnotationsFromList([widget]); - } catch (error) { - console.error("📛 서명 필드 생성 실패:", error); - return "manual_signature_required"; - } + return fieldName; } } -function useAutoSignatureFields(instance: WebViewerInstance | null) { +function useAutoSignatureFields(instance: WebViewerInstance | null, mode: 'vendor' | 'buyer' = 'vendor') { const [signatureFields, setSignatureFields] = useState<string[]>([]); const [isProcessing, setIsProcessing] = useState(false); const [error, setError] = useState<string | null>(null); + // 한 번만 실행되도록 보장하는 플래그들 const processingRef = useRef(false); const timeoutRef = useRef<NodeJS.Timeout | null>(null); + const processedDocumentRef = useRef<string | null>(null); // 처리된 문서 추적 + const handlerRef = useRef<(() => void) | null>(null); // 핸들러 참조 저장 useEffect(() => { if (!instance) return; const { documentViewer } = instance.Core; + // 새로운 핸들러 생성 (참조가 변하지 않도록) const handleDocumentLoaded = () => { + // 현재 문서의 고유 식별자 생성 + const currentDoc = documentViewer.getDocument(); + const documentId = currentDoc ? `${currentDoc.getFilename()}_${Date.now()}` : null; + + // 같은 문서를 이미 처리했다면 스킵 + if (documentId && processedDocumentRef.current === documentId) { + console.log("📛 이미 처리된 문서이므로 스킵:", documentId); + return; + } + if (processingRef.current) { console.log("📛 이미 처리 중이므로 스킵"); return; } + // 이전 타이머 클리어 if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; } timeoutRef.current = setTimeout(async () => { + // 다시 한번 중복 체크 if (processingRef.current) return; + if (documentId && processedDocumentRef.current === documentId) return; processingRef.current = true; setIsProcessing(true); @@ -249,32 +245,58 @@ function useAutoSignatureFields(instance: WebViewerInstance | null) { throw new Error("문서가 준비되지 않았습니다."); } - const detector = new AutoSignatureFieldDetector(instance); + // 기존 서명 필드 확인 + const { annotationManager } = instance.Core; + const existingAnnotations = annotationManager.getAnnotationsList(); + const existingSignatureFields = existingAnnotations.filter( + annot => annot instanceof instance.Core.Annotations.SignatureWidgetAnnotation + ); + + // 이미 서명 필드가 있으면 생성하지 않음 + if (existingSignatureFields.length > 0) { + console.log("📋 기존 서명 필드 발견:", existingSignatureFields.length); + const fieldNames = existingSignatureFields.map((field, idx) => + field.getField()?.name || `existing_signature_${idx}` + ); + setSignatureFields(fieldNames); + + // 처리 완료 표시 + if (documentId) { + processedDocumentRef.current = documentId; + } + + toast.success(`📋 ${fieldNames.length}개의 기존 서명 필드를 확인했습니다.`); + return; + } + + const detector = new AutoSignatureFieldDetector(instance, mode); // mode 전달 const fields = await detector.detectAndCreateSignatureFields(); setSignatureFields(fields); + // 처리 완료 표시 + if (documentId) { + processedDocumentRef.current = documentId; + } + if (fields.length > 0) { const hasSimpleField = fields.some(field => field.startsWith('simple_signature_')); if (hasSimpleField) { + const positionMessage = mode === 'buyer' + ? "마지막 페이지 왼쪽 하단의 파란색 영역에서 서명해주세요." + : "마지막 페이지 하단의 파란색 영역에서 서명해주세요."; + toast.success("📝 서명 필드가 생성되었습니다.", { - description: "마지막 페이지 하단의 파란색 영역에서 서명해주세요.", + description: positionMessage, icon: <FileSignature className="h-4 w-4 text-blue-500" />, duration: 5000 }); - } else { - toast.success(`📋 ${fields.length}개의 서명 필드를 확인했습니다.`, { - description: "기존 서명 필드가 발견되었습니다.", - icon: <CheckCircle2 className="h-4 w-4 text-green-500" />, - duration: 4000 - }); } } } catch (error) { console.error("📛 서명 필드 처리 실패:", error); - const errorMessage = error instanceof Error ? error.message : "서명 필드 처리에 실패했습니다."; setError(errorMessage); @@ -289,27 +311,53 @@ function useAutoSignatureFields(instance: WebViewerInstance | null) { }, 3000); }; - documentViewer.removeEventListener('documentLoaded', handleDocumentLoaded); + // 핸들러 참조 저장 + handlerRef.current = handleDocumentLoaded; + + // 이전 리스너 제거 (저장된 참조 사용) + if (handlerRef.current) { + documentViewer.removeEventListener('documentLoaded', handlerRef.current); + } + + // 새 리스너 등록 documentViewer.addEventListener('documentLoaded', handleDocumentLoaded); + // 이미 문서가 로드되어 있다면 즉시 실행 + if (documentViewer.getDocument()) { + // 짧은 지연 후 실행 (WebViewer 초기화 완료 보장) + setTimeout(() => { + if (!processingRef.current) { + handleDocumentLoaded(); + } + }, 1000); + } + return () => { - documentViewer.removeEventListener('documentLoaded', handleDocumentLoaded); + // 클리어 시 저장된 참조 사용 + if (handlerRef.current) { + documentViewer.removeEventListener('documentLoaded', handlerRef.current); + } if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; } + // 상태 리셋 processingRef.current = false; + processedDocumentRef.current = null; + handlerRef.current = null; }; - }, [instance]); + }, [instance, mode]); // mode 의존성 추가 + // 컴포넌트 언마운트 시 정리 useEffect(() => { return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } processingRef.current = false; + processedDocumentRef.current = null; }; }, []); @@ -320,198 +368,121 @@ function useAutoSignatureFields(instance: WebViewerInstance | null) { error }; } - -// 🔥 서명 감지를 위한 커스텀 훅 수정 +// XFDF 기반 서명 감지 function useSignatureDetection(instance: WebViewerInstance | null, onSignatureComplete?: () => void) { const [hasValidSignature, setHasValidSignature] = useState(false); - const checkIntervalRef = useRef<NodeJS.Timeout | null>(null); - const lastSignatureStateRef = useRef(false); - const onSignatureCompleteRef = useRef(onSignatureComplete); + const onCompleteRef = useRef(onSignatureComplete); - // 콜백 레퍼런스 업데이트 useEffect(() => { - onSignatureCompleteRef.current = onSignatureComplete; + onCompleteRef.current = onSignatureComplete }, [onSignatureComplete]); - const checkSignatureFields = useCallback(async () => { - if (!instance?.Core?.annotationManager) { - console.log('🔍 서명 체크: annotationManager 없음'); - return false; - } - - try { - const { annotationManager, documentViewer } = instance.Core; - - // 문서가 로드되지 않았으면 false 반환 - if (!documentViewer.getDocument()) { - console.log('🔍 서명 체크: 문서 미로드'); - return false; - } + useEffect(() => { + if (!instance?.Core) return; - let hasSignature = false; + const { annotationManager, documentViewer } = instance.Core; + const checkSignedByAppearance = () => { + try { + const annotations = annotationManager.getAnnotationsList(); + const signatureWidgets = annotations.filter( + annot => annot instanceof instance.Core.Annotations.SignatureWidgetAnnotation + ); - // 1. Form Fields 확인 (더 정확한 방법) - const fieldManager = annotationManager.getFieldManager(); - const fields = fieldManager.getFields(); - - console.log('🔍 폼 필드 확인:', fields.map(field => ({ - name: field.name, - type: field.type, - value: field.value, - hasValue: !!field.value - }))); - - // 서명 필드 확인 - for (const field of fields) { - // PDFTron에서 서명 필드는 보통 'Sig' 타입이지만, 값이 있는지 정확히 확인 - if (field.type === 'Sig' || field.name?.toLowerCase().includes('signature')) { - if (field.value && ( - typeof field.value === 'string' && field.value.length > 0 || - typeof field.value === 'object' && field.value !== null - )) { - hasSignature = true; - console.log('🔍 서명 필드에서 서명 발견:', field.name, field.value); - break; - } + if (signatureWidgets.length === 0) { + return false; } - } - // 2. Signature Widget Annotations 확인 - if (!hasSignature) { - const annotations = annotationManager.getAnnotationsList(); - console.log('🔍 주석 확인:', annotations.length, '개'); - - for (const annotation of annotations) { - // SignatureWidgetAnnotation 타입 확인 - if (annotation.elementName === 'signatureWidget' || - annotation.constructor.name === 'SignatureWidgetAnnotation' || - annotation.Subject === 'Signature') { - - // 서명 데이터가 있는지 확인 - const hasSignatureData = annotation.getImageData && annotation.getImageData() || - annotation.getPath && annotation.getPath() || - annotation.getCustomData && annotation.getCustomData('signature-data'); - - if (hasSignatureData) { - hasSignature = true; - console.log('🔍 서명 위젯에서 서명 발견:', annotation); - break; - } + for (const widget of signatureWidgets) { + const isSignedByAppearance = widget.isSignedByAppearance(); + + if (isSignedByAppearance) { + return true; } } + return false; + + } catch (error) { + console.error('서명 위젯 확인 중 오류:', error); + return false; } + }; - // 3. Ink/FreeHand Annotations 확인 (직접 그린 서명) - if (!hasSignature) { - const annotations = annotationManager.getAnnotationsList(); - - for (const annotation of annotations) { - if (annotation.elementName === 'freeHand' || - annotation.elementName === 'ink' || - annotation.constructor.name === 'FreeHandAnnotation') { - - // 경로 데이터가 있으면 서명으로 간주 - const hasPath = annotation.getPath && annotation.getPath().length > 0; - if (hasPath) { - hasSignature = true; - console.log('🔍 자유 그리기에서 서명 발견:', annotation); - break; - } + const checkSigned = async () => { + try { + const hasSignature = await checkSignedByAppearance(); + + if (hasSignature !== hasValidSignature) { + setHasValidSignature(hasSignature); + + if (hasSignature && onCompleteRef.current) { + onCompleteRef.current(); } } + + } catch (error) { + console.error('서명 확인 중 오류:', error); } + }; - console.log('🔍 최종 서명 감지 결과:', { - hasSignature, - fieldsCount: fields.length, - annotationsCount: annotationManager.getAnnotationsList().length - }); - - return hasSignature; - } catch (error) { - console.error('📛 서명 확인 중 에러:', error); - return false; - } - }, [instance]); + const onAnnotationChanged = (annotations: any[], action: string) => { + console.log("서명 변경") + // if (action === 'delete') return; - // 실시간 서명 감지 (무한 렌더링 방지) - useEffect(() => { - if (!instance?.Core) return; + setTimeout(checkSigned, 800); + }; - const startMonitoring = () => { - // 기존 인터벌 정리 - if (checkIntervalRef.current) { - clearInterval(checkIntervalRef.current); - checkIntervalRef.current = null; - } - console.log('🔍 서명 모니터링 시작'); - // 2초마다 서명 상태 확인 (1초보다 간격을 늘려 성능 개선) - checkIntervalRef.current = setInterval(async () => { - try { - const hasSignature = await checkSignatureFields(); - - // 상태가 실제로 변경되었을 때만 업데이트 - if (hasSignature !== lastSignatureStateRef.current) { - console.log('🔍 서명 상태 변경:', lastSignatureStateRef.current, '->', hasSignature); - - lastSignatureStateRef.current = hasSignature; - setHasValidSignature(hasSignature); - - // 서명이 완료되었을 때 콜백 실행 - if (hasSignature && onSignatureCompleteRef.current) { - console.log('✍️ 서명 완료 콜백 실행!'); - onSignatureCompleteRef.current(); - } - } - } catch (error) { - console.error('📛 서명 모니터링 에러:', error); - } - }, 2000); + const onDocumentLoaded = () => { + setTimeout(checkSigned, 2000); }; - // 문서 로드 후 모니터링 시작 - const { documentViewer } = instance.Core; - - const handleDocumentLoaded = () => { - console.log('📄 문서 로드 완료, 서명 모니터링 준비'); - // 문서 로드 후 3초 뒤에 모니터링 시작 (안정성 확보) - setTimeout(startMonitoring, 3000); + const onPageUpdated = () => { + setTimeout(checkSigned, 1000); }; - if (documentViewer?.getDocument()) { - // 이미 문서가 로드되어 있다면 바로 시작 - setTimeout(startMonitoring, 1000); - } else { - // 문서 로드 대기 - documentViewer?.addEventListener('documentLoaded', handleDocumentLoaded); + const onAnnotationSelected = () => { + setTimeout(checkSigned, 500); + }; + + const onAnnotationUnselected = () => { + setTimeout(checkSigned, 1000); + }; + + try { + annotationManager.addEventListener('annotationChanged', onAnnotationChanged); + annotationManager.addEventListener('annotationSelected', onAnnotationSelected); + annotationManager.addEventListener('annotationUnselected', onAnnotationUnselected); + documentViewer.addEventListener('documentLoaded', onDocumentLoaded); + documentViewer.addEventListener('pageNumberUpdated', onPageUpdated); + + } catch (error) { + console.error('이벤트 리스너 등록 실패:', error); } - // 클리너 함수 + if (documentViewer.getDocument()) { + setTimeout(checkSigned, 1000); + } + + const pollInterval = setInterval(() => { + checkSigned(); + }, 5000); + return () => { - console.log('🧹 서명 모니터링 정리'); - if (checkIntervalRef.current) { - clearInterval(checkIntervalRef.current); - checkIntervalRef.current = null; + try { + annotationManager.removeEventListener('annotationChanged', onAnnotationChanged); + annotationManager.removeEventListener('annotationSelected', onAnnotationSelected); + annotationManager.removeEventListener('annotationUnselected', onAnnotationUnselected); + documentViewer.removeEventListener('documentLoaded', onDocumentLoaded); + documentViewer.removeEventListener('pageNumberUpdated', onPageUpdated); + clearInterval(pollInterval); + } catch (error) { + console.error('클린업 중 오류:', error); } - documentViewer?.removeEventListener('documentLoaded', handleDocumentLoaded); }; - }, [instance]); // onSignatureComplete 제거하여 무한 렌더링 방지 + }, [instance, hasValidSignature]); - // 수동 서명 확인 함수 - const manualCheckSignature = useCallback(async () => { - console.log('🔍 수동 서명 확인 요청'); - const hasSignature = await checkSignatureFields(); - setHasValidSignature(hasSignature); - lastSignatureStateRef.current = hasSignature; - return hasSignature; - }, [checkSignatureFields]); - - return { - hasValidSignature, - checkSignature: manualCheckSignature - }; + return { hasValidSignature }; } export function BasicContractSignViewer({ @@ -524,8 +495,10 @@ export function BasicContractSignViewer({ onSign, instance, setInstance, - onSurveyComplete, // 🔥 추가 - onSignatureComplete, // 🔥 추가 + onSurveyComplete, + onSignatureComplete, + onGtcCommentStatusChange, + mode = 'vendor', // 기본값 vendor t = (key: string) => key, }: BasicContractSignViewerProps) { @@ -535,7 +508,9 @@ export function BasicContractSignViewer({ const [isInitialLoaded, setIsInitialLoaded] = useState<boolean>(false); const [surveyTemplate, setSurveyTemplate] = useState<SurveyTemplateWithQuestions | null>(null); const [surveyLoading, setSurveyLoading] = useState<boolean>(false); - const [isSubmitting, setIsSubmitting] = useState(false); // 제출 상태 추가 + const [gtcCommentStatus, setGtcCommentStatus] = useState<{ hasComments: boolean; commentCount: number }>({ hasComments: false, commentCount: 0 }); + + console.log(surveyTemplate, "surveyTemplate") const conditionalHandler = useConditionalSurvey(surveyTemplate); @@ -546,13 +521,15 @@ export function BasicContractSignViewer({ const [showDialog, setShowDialog] = useState(isOpen); const webViewerInstance = useRef<WebViewerInstance | null>(null); - const { signatureFields, isProcessing: isAutoSignProcessing, hasSignatureFields, error: autoSignError } = useAutoSignatureFields(webViewerInstance.current || instance); - - // 🔥 서명 감지 훅 사용 + // mode 전달 + const { signatureFields, isProcessing: isAutoSignProcessing, hasSignatureFields, error: autoSignError } = useAutoSignatureFields(webViewerInstance.current || instance, mode); + const { hasValidSignature } = useSignatureDetection(webViewerInstance.current || instance, onSignatureComplete); - const isComplianceTemplate = templateName.includes('준법'); - const isNDATemplate = templateName.includes('비밀유지') || templateName.includes('NDA'); + // 구매자 모드일 때는 템플릿 관련 로직 비활성화 + const isComplianceTemplate = mode === 'buyer' ? false : templateName.includes('준법'); + const isNDATemplate = mode === 'buyer' ? false : (templateName.includes('비밀유지') || templateName.includes('NDA')); + const isGTCTemplate = mode === 'buyer' ? false : templateName.includes('GTC'); const allFiles: FileInfo[] = React.useMemo(() => { const files: FileInfo[] = []; @@ -565,6 +542,11 @@ export function BasicContractSignViewer({ }); } + // 구매자 모드일 때는 추가 파일, 설문조사, 조항 검토 탭 제외 + if (mode === 'buyer') { + return files; // 메인 계약서 파일만 반환 + } + const normalizedAttachments: FileInfo[] = (additionalFiles || []) .map((f: any, idx: number) => ({ path: f.path ?? f.filePath ?? "", @@ -583,8 +565,16 @@ export function BasicContractSignViewer({ }); } + if (isGTCTemplate) { + files.push({ + path: "", + name: "조항 검토", + type: "clauses", + }); + } + return files; - }, [filePath, additionalFiles, templateName, isComplianceTemplate]); + }, [filePath, additionalFiles, templateName, isComplianceTemplate, isGTCTemplate, mode]); const cleanupHtmlStyle = () => { const elements = document.querySelectorAll('.Document_container'); @@ -623,7 +613,8 @@ export function BasicContractSignViewer({ useEffect(() => { setShowDialog(isOpen); - if (isOpen && isComplianceTemplate && !surveyTemplate) { + // 구매자 모드가 아닐 때만 설문조사 템플릿 로드 + if (isOpen && isComplianceTemplate && !surveyTemplate && mode !== 'buyer') { loadSurveyTemplate(); } @@ -631,7 +622,7 @@ export function BasicContractSignViewer({ setIsInitialLoaded(false); currentDocumentPath.current = ""; } - }, [isOpen, isComplianceTemplate]); + }, [isOpen, isComplianceTemplate, mode]); useEffect(() => { if (!filePath) return; @@ -709,7 +700,9 @@ export function BasicContractSignViewer({ setInstance(newInstance); setFileLoading(false); - const { documentViewer } = newInstance.Core; + const { documentViewer, annotationManager, Annotations } = newInstance.Core; + + const { WidgetFlags } = Annotations; const FitMode = newInstance.UI.FitMode; const handleDocumentLoaded = () => { @@ -730,6 +723,30 @@ export function BasicContractSignViewer({ documentViewer.addEventListener('documentLoaded', handleDocumentLoaded); + // 구매자 모드가 아닐 때만 자동 서명 적용 + if (mode !== 'buyer') { + annotationManager.addEventListener('annotationChanged', async (annotList, type) => { + for (const annot of annotList) { + const { fieldName, X, Y, Width, Height, PageNumber } = annot; + + if (type === "add" && annot.Subject === "Widget") { + const signatureImage = await getVendorSignatureFile() + + const stamp = new Annotations.StampAnnotation(); + stamp.PageNumber = PageNumber; + stamp.X = X; + stamp.Y = Y; + stamp.Width = Width; + stamp.Height = Height; + + await stamp.setImageData(signatureImage.data.dataUrl); + annot.sign(stamp); + annot.setFieldFlag(WidgetFlags.READ_ONLY, true); + } + } + }); + } + newInstance.UI.setMinZoomLevel('25%'); newInstance.UI.setMaxZoomLevel('400%'); @@ -789,7 +806,7 @@ export function BasicContractSignViewer({ isCancelled.current = true; cleanupWebViewer(); }; - }, [setInstance]); + }, [setInstance, mode]); const getExtFromPath = (p: string) => { const m = p.toLowerCase().match(/\.([a-z0-9]+)(?:\?.*)?$/); @@ -873,17 +890,21 @@ export function BasicContractSignViewer({ const handleTabChange = async (newTab: string) => { setActiveTab(newTab); - if (newTab === "survey") return; + if (newTab === "survey" || newTab === "clauses") return; const currentInstance = webViewerInstance.current || instance; if (!currentInstance || fileLoading) return; + if (newTab === 'survey' && !surveyTemplate && !surveyLoading && mode !== 'buyer') { + loadSurveyTemplate(); + } + let targetFile: FileInfo | undefined; if (newTab === "main") { targetFile = allFiles.find(f => f.type === "main"); } else if (newTab.startsWith("file-")) { const fileIndex = parseInt(newTab.replace("file-", ""), 10); - targetFile = allFiles.filter(f => f.type !== 'survey')[fileIndex]; + targetFile = allFiles.filter(f => f.type !== 'survey' && f.type !== 'clauses')[fileIndex]; } if (!targetFile?.path) { @@ -909,7 +930,7 @@ export function BasicContractSignViewer({ documentViewer.updateView(); window.dispatchEvent(new Event("resize")); } catch (e) { - console.warn("탭 변경 후 레이아웃 새로고침 스킵:", e); + console.warn("탭 변경 후 레이아웃 새고침 스킵:", e); } }); } catch (e) { @@ -965,22 +986,34 @@ export function BasicContractSignViewer({ downloadType: "pdf", }); - if (isComplianceTemplate && !surveyData.completed) { - toast.error("준법 설문조사를 먼저 완료해주세요."); - setActiveTab('survey'); - return; + // 구매자 모드일 때는 설문조사와 GTC 검증 건너뛰기 + if (mode !== 'buyer') { + if (isComplianceTemplate && !surveyData.completed) { + toast.error("준법 설문조사를 먼저 완료해주세요."); + setActiveTab('survey'); + return; + } + + if (isGTCTemplate && gtcCommentStatus.hasComments) { + toast.error("GTC 조항에 코멘트가 있어 서명할 수 없습니다."); + toast.info("모든 코멘트를 삭제하거나 협의를 완료한 후 서명해주세요."); + setActiveTab('clauses'); + return; + } } if (onSign) { await onSign(documentData, { formData, surveyData, signatureFields }); } else { - toast.success("계약서가 성공적으로 서명되었습니다."); + const actionText = mode === 'buyer' ? "최종승인" : "서명"; + toast.success(`계약서가 성공적으로 ${actionText}되었습니다.`); } handleClose(); } catch (error) { - console.error("📛 서명 저장 실패:", error); - toast.error("서명을 저장하는데 실패했습니다."); + console.error(`📛 ${mode === 'buyer' ? '최종승인' : '서명'} 저장 실패:`, error); + const actionText = mode === 'buyer' ? "최종승인" : "서명"; + toast.error(`${actionText}을 저장하는데 실패했습니다.`); } }; @@ -992,842 +1025,7 @@ export function BasicContractSignViewer({ } }; - // 개선된 SurveyComponent - const SurveyComponent = () => { - const { - control, - watch, - setValue, - getValues, - formState: { errors }, - trigger, - } = useForm<SurveyFormData>({ - defaultValues: {}, - mode: 'onChange' - }); - - const watchedValues = watch(); - const [uploadedFiles, setUploadedFiles] = useState<Record<number, File[]>>({}); - - // 📊 실시간 진행 상태 계산 - const progressStatus = useMemo(() => { - if (!conditionalHandler || !surveyTemplate) { - return { - visibleQuestions: [], - totalRequired: 0, - completedRequired: 0, - completedQuestionIds: [], - incompleteQuestionIds: [], - progressPercentage: 0, - debugInfo: {} - }; - } - - console.log('🔄 실시간 프로그레스 재계산 중...'); - console.log('📝 원본 watchedValues:', watchedValues); - - // 현재 답변을 조건부 핸들러가 인식할 수 있는 형태로 변환 - const convertedAnswers: Record<number, any> = {}; - Object.entries(watchedValues).forEach(([questionId, value]) => { - const id = parseInt(questionId); - const convertedValue = { - questionId: id, - answerValue: value?.answerValue || '', - detailText: value?.detailText || '', - otherText: value?.otherText || '', - files: value?.files || [] - }; - - convertedAnswers[id] = convertedValue; - - // 각 질문의 변환 과정 로그 - if (value?.answerValue) { - console.log(`📝 질문 ${id} 변환:`, { - 원본: value, - 변환후: convertedValue - }); - } - }); - - console.log('📝 변환된 답변들 최종:', convertedAnswers); - - const result = conditionalHandler.getSimpleProgressStatus(convertedAnswers); - - console.log('📊 실시간 진행 상태 최종 결과:', { - 전체표시질문: result.visibleQuestions.length, - 필수질문수: result.totalRequired, - 완료된필수질문: result.completedRequired, - 진행률: result.progressPercentage, - 완료된질문들: result.completedQuestionIds, - 미완료질문들: result.incompleteQuestionIds, - 기본질문: result.visibleQuestions.filter(q => !q.parentQuestionId).length, - 조건부질문: result.visibleQuestions.filter(q => q.parentQuestionId).length, - 완료된기본질문: result.completedQuestionIds.filter(id => !result.visibleQuestions.find(q => q.id === id)?.parentQuestionId).length, - 완료된조건부질문: result.completedQuestionIds.filter(id => !!result.visibleQuestions.find(q => q.id === id)?.parentQuestionId).length - }); - - // 🚨 조건부 질문들의 답변 상태 특별 점검 - const conditionalQuestions = result.visibleQuestions.filter(q => q.parentQuestionId); - if (conditionalQuestions.length > 0) { - console.log('🚨 조건부 질문들 답변 상태 점검:', conditionalQuestions.map(q => ({ - id: q.id, - questionNumber: q.questionNumber, - isRequired: q.isRequired, - parentId: q.parentQuestionId, - watchedValue: watchedValues[q.id], - convertedAnswer: convertedAnswers[q.id], - hasWatchedAnswer: !!watchedValues[q.id]?.answerValue, - hasConvertedAnswer: !!convertedAnswers[q.id]?.answerValue, - isInRequiredList: result.totalRequired, - isCompleted: result.completedQuestionIds.includes(q.id) - }))); - } - - return result; - }, [conditionalHandler, watchedValues, surveyTemplate]); - - // 🎯 동적 상태 정보 - const visibleQuestions = progressStatus.visibleQuestions; - const totalVisibleQuestions = visibleQuestions.length; - const baseQuestionCount = surveyTemplate?.questions.length || 0; - const conditionalQuestionCount = totalVisibleQuestions - baseQuestionCount; - const hasConditionalQuestions = conditionalQuestionCount > 0; - - // ✅ 완료 가능 여부 - const canComplete = progressStatus.totalRequired > 0 && - progressStatus.completedRequired === progressStatus.totalRequired; - - if (surveyLoading) { - return ( - <div className="h-full w-full"> - <Card className="h-full"> - <CardContent className="flex flex-col items-center justify-center h-full py-12"> - <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" /> - <p className="text-sm text-muted-foreground">설문조사를 불러오는 중...</p> - </CardContent> - </Card> - </div> - ); - } - - if (!surveyTemplate) { - return ( - <div className="h-full w-full"> - <Card className="h-full"> - <CardContent className="flex flex-col items-center justify-center h-full py-12"> - <AlertTriangle className="h-8 w-8 text-red-500 mb-4" /> - <p className="text-sm text-muted-foreground">설문조사 템플릿을 불러올 수 없습니다.</p> - <Button - variant="outline" - onClick={loadSurveyTemplate} - className="mt-2" - > - 다시 시도 - </Button> - </CardContent> - </Card> - </div> - ); - } - - // 🚨 템플릿이 로드되면 모든 질문들의 isRequired 속성 확인 - React.useEffect(() => { - if (surveyTemplate && surveyTemplate.questions) { - console.log('🚨 설문 템플릿의 모든 질문들 isRequired 속성 확인:', surveyTemplate.questions.map(q => ({ - id: q.id, - questionNumber: q.questionNumber, - questionText: q.questionText?.substring(0, 30) + '...', - isRequired: q.isRequired, - parentQuestionId: q.parentQuestionId, - conditionalValue: q.conditionalValue, - isConditional: !!q.parentQuestionId - }))); - - const allQuestions = surveyTemplate.questions.length; - const requiredQuestions = surveyTemplate.questions.filter(q => q.isRequired).length; - const conditionalQuestions = surveyTemplate.questions.filter(q => q.parentQuestionId).length; - const requiredConditionalQuestions = surveyTemplate.questions.filter(q => q.parentQuestionId && q.isRequired).length; - - console.log('📊 템플릿 질문 통계:', { - 전체질문수: allQuestions, - 전체필수질문수: requiredQuestions, - 조건부질문수: conditionalQuestions, - 필수조건부질문수: requiredConditionalQuestions, - 기본질문수: allQuestions - conditionalQuestions, - 필수기본질문수: requiredQuestions - requiredConditionalQuestions - }); - - // 🚨 만약 조건부 질문들이 필수가 아니라면 경고 - if (conditionalQuestions > 0 && requiredConditionalQuestions === 0) { - console.warn('⚠️ 경고: 조건부 질문들이 모두 필수가 아닙니다! 데이터베이스 확인 필요'); - console.warn('조건부 질문들:', surveyTemplate.questions.filter(q => q.parentQuestionId)); - } - } - }, [surveyTemplate]); - - const handleFileUpload = useCallback((questionId: number, files: FileList | null) => { - if (!files) return; - - const fileArray = Array.from(files); - setUploadedFiles(prev => ({ - ...prev, - [questionId]: fileArray - })); - - setValue(`${questionId}.files`, fileArray); - }, [setValue]); - - const handleAnswerChange = useCallback((questionId: number, field: string, value: any) => { - console.log(`📝 답변 변경: 질문 ${questionId}, 필드 ${field}, 값:`, value); - - // 해당 질문이 조건부 질문인지 확인 - const question = visibleQuestions.find(q => q.id === questionId); - if (question) { - console.log(`📋 질문 ${questionId} 상세 정보:`, { - id: question.id, - questionNumber: question.questionNumber, - isRequired: question.isRequired, - parentQuestionId: question.parentQuestionId, - conditionalValue: question.conditionalValue, - isConditional: !!question.parentQuestionId - }); - } - - setValue(`${questionId}.${field}`, value); - - // setValue 후 현재 값 확인 - setTimeout(() => { - const currentFormValues = getValues(); - console.log(`✅ setValue 후 확인 - 질문 ${questionId}:`, { - 설정한값: value, - 저장된전체값: currentFormValues[questionId], - 전체폼값: currentFormValues - }); - }, 0); - - // 부모 질문의 답변이 변경되면 조건부 자식 질문들 처리 - if (field === 'answerValue' && conditionalHandler) { - const currentValues = getValues(); - const convertedAnswers: Record<number, any> = {}; - - Object.entries(currentValues).forEach(([qId, qValue]) => { - const id = parseInt(qId); - convertedAnswers[id] = { - questionId: id, - answerValue: qValue?.answerValue || '', - detailText: qValue?.detailText || '', - otherText: qValue?.otherText || '', - files: qValue?.files || [] - }; - }); - - // 새로운 답변 반영 - convertedAnswers[questionId] = { - ...convertedAnswers[questionId], - questionId, - [field]: value - }; - - console.log(`🔄 질문 ${questionId}의 답변 변경으로 인한 조건부 질문 처리...`); - console.log(`🔄 변경 후 전체 답변:`, convertedAnswers); - - // 영향받는 자식 질문들의 답변 초기화 - const clearedAnswers = conditionalHandler.clearAffectedChildAnswers(questionId, value, convertedAnswers); - - console.log(`🧹 정리된 답변들:`, clearedAnswers); - - // 삭제된 답변들을 폼에서도 제거 - Object.keys(convertedAnswers).forEach(qId => { - const id = parseInt(qId); - if (id !== questionId && !clearedAnswers[id]) { - console.log(`🗑️ 질문 ${id} 답변 초기화`); - setValue(`${id}`, { - answerValue: '', - detailText: '', - otherText: '', - files: [] - }); - - // 업로드된 파일도 초기화 - setUploadedFiles(prev => { - const updated = { ...prev }; - delete updated[id]; - return updated; - }); - } - }); - } - }, [setValue, getValues, conditionalHandler, visibleQuestions]); - - // 🔥 설문조사 완료 핸들러 수정 - const handleSurveyComplete = useCallback(async () => { - console.log('🎯 설문조사 완료 시도'); - - // 이미 제출 중이면 중복 실행 방지 - if (isSubmitting) { - console.log('⚠️ 이미 제출 중...'); - return; - } - - setIsSubmitting(true); - - try { - const currentValues = getValues(); - console.log('📝 현재 폼 값들:', currentValues); - - // 폼 검증 - const isValid = await trigger(); - console.log('🔍 폼 검증 결과:', isValid); - - // 진행 상태 최종 확인 - console.log('📊 최종 진행 상태:', { - totalRequired: progressStatus.totalRequired, - completedRequired: progressStatus.completedRequired, - canComplete, - 완료된질문들: progressStatus.completedQuestionIds, - 미완료질문들: progressStatus.incompleteQuestionIds - }); - - if (!canComplete) { - let errorMessage = '모든 필수 항목을 완료해주세요.'; - let errorDescription = `${progressStatus.completedRequired}/${progressStatus.totalRequired} 완료됨`; - - // 구체적인 미완료 이유 표시 - if (progressStatus.incompleteQuestionIds.length > 0) { - const incompleteReasons = progressStatus.incompleteQuestionIds.map(id => { - const debug = progressStatus.debugInfo?.[id]; - const question = visibleQuestions.find(q => q.id === id); - return `• Q${question?.questionNumber}: ${question?.questionText?.substring(0, 40)}...\n → ${debug?.incompleteReason || '답변 필요'}`; - }).slice(0, 3); - - errorDescription = incompleteReasons.join('\n\n'); - - if (progressStatus.incompleteQuestionIds.length > 3) { - errorDescription += `\n\n... 외 ${progressStatus.incompleteQuestionIds.length - 3}개 항목`; - } - } - - toast.error(errorMessage, { - description: errorDescription, - icon: <AlertTriangle className="h-5 w-5 text-red-500" />, - duration: 12000 - }); - - // 첫 번째 미완료 질문으로 스크롤 - if (progressStatus.incompleteQuestionIds.length > 0) { - const firstIncompleteId = progressStatus.incompleteQuestionIds[0]; - const element = document.getElementById(`question-${firstIncompleteId}`); - if (element) { - element.scrollIntoView({ behavior: 'smooth', block: 'center' }); - } - } - - return; - } - - // 필수 데이터 확인 - if (!contractId || !surveyTemplate?.id) { - toast.error('계약서 정보 또는 설문 템플릿 정보가 없습니다.'); - return; - } - - // 서버 액션에 전달할 데이터 준비 - const surveyAnswers: SurveyAnswerData[] = Object.entries(currentValues) - .map(([questionId, value]) => ({ - questionId: parseInt(questionId), - answerValue: value?.answerValue || '', - detailText: value?.detailText || '', - otherText: value?.otherText || '', - files: value?.files || [] - })) - .filter(answer => - // 빈 답변 필터링 (하지만 필수 질문의 답변이 완료되었음을 이미 확인했음) - answer.answerValue || answer.detailText || (answer.files && answer.files.length > 0) - ); - - const requestData: CompleteSurveyRequest = { - contractId: contractId, - templateId: surveyTemplate.id, - answers: surveyAnswers, - progressStatus: progressStatus // 디버깅용 추가 정보 - }; - - console.log('📤 서버로 전송할 데이터:', { - contractId: requestData.contractId, - templateId: requestData.templateId, - answersCount: requestData.answers.length, - answers: requestData.answers.map(a => ({ - questionId: a.questionId, - hasAnswer: !!a.answerValue, - hasDetail: !!a.detailText, - hasOther: !!a.otherText, - filesCount: a.files?.length || 0 - })) - }); - - // 제출 중 토스트 표시 - const submitToast = toast.loading('설문조사를 저장하는 중...', { - description: '잠시만 기다려주세요.', - duration: Infinity - }); - - // 서버 액션 호출 - const result = await completeSurvey(requestData); - - // 로딩 토스트 제거 - toast.dismiss(submitToast); - - if (result.success) { - // 클라이언트 상태 업데이트 (기존 로직 유지) - setSurveyData({ - completed: true, - answers: surveyAnswers, - timestamp: new Date().toISOString(), - progressStatus: progressStatus, - totalQuestions: totalVisibleQuestions, - conditionalQuestions: conditionalQuestionCount, - responseId: result.data?.responseId // 서버에서 반환된 응답 ID 저장 - }); - - // 🔥 부모 컴포넌트에 설문조사 완료 알림 - if (onSurveyComplete) { - onSurveyComplete(); - } - - toast.success("🎉 설문조사가 완료되었습니다!", { - description: `총 ${progressStatus.totalRequired}개 필수 질문 완료${hasConditionalQuestions ? ` (조건부 ${conditionalQuestionCount}개 포함)` : ''}`, - icon: <CheckCircle2 className="h-5 w-5 text-green-500" />, - duration: 5000 - }); - - console.log('✅ 설문조사 완료:', { - totalAnswered: surveyAnswers.length, - totalRequired: progressStatus.totalRequired, - conditionalQuestions: conditionalQuestionCount, - responseId: result.data?.responseId - }); - - // 자동으로 메인 탭으로 이동 (선택사항) - setTimeout(() => { - setActiveTab('main'); - }, 2000); - - } else { - // 서버 에러 처리 - console.error('❌ 서버 응답 에러:', result.message); - toast.error('설문조사 저장 실패', { - description: result.message || '서버에서 오류가 발생했습니다.', - icon: <AlertTriangle className="h-5 w-5 text-red-500" />, - duration: 8000 - }); - } - - } catch (error) { - console.error('❌ 설문조사 저장 중 예외 발생:', error); - - let errorMessage = '설문조사 저장에 실패했습니다.'; - let errorDescription = '네트워크 연결을 확인하고 다시 시도해주세요.'; - - if (error instanceof Error) { - errorDescription = error.message; - } - - toast.error(errorMessage, { - description: errorDescription, - icon: <AlertTriangle className="h-5 w-5 text-red-500" />, - duration: 10000 - }); - } finally { - setIsSubmitting(false); - } - }, [ - getValues, - trigger, - progressStatus, - visibleQuestions, - canComplete, - contractId, - surveyTemplate?.id, - totalVisibleQuestions, - conditionalQuestionCount, - hasConditionalQuestions, - isSubmitting, - setActiveTab, - onSurveyComplete // 🔥 추가 - ]); - - // OTHER 텍스트 입력 컴포넌트 - const OtherTextInput = ({ questionId, fieldName }: { questionId: number; fieldName: string }) => { - const answerValue = useWatch({ - control, - name: `${fieldName}.answerValue` - }); - - if (answerValue !== 'OTHER') return null; - - return ( - <Controller - name={`${fieldName}.otherText`} - control={control} - render={({ field }) => ( - <Input - {...field} - placeholder="기타 내용을 입력해주세요" - className="mt-2" - /> - )} - /> - ); - }; - - return ( - <div className="h-full w-full flex flex-col"> - <Card className="h-full flex flex-col"> - <CardHeader className="flex-shrink-0"> - <CardTitle className="flex items-center justify-between"> - <div className="flex items-center"> - <ClipboardList className="h-5 w-5 mr-2 text-amber-500" /> - {surveyTemplate.name} - {conditionalHandler && ( - <Badge variant="outline" className="ml-2 text-xs"> - 조건부 질문 지원 - </Badge> - )} - </div> - <div className="text-sm text-gray-600"> - {progressStatus.completedRequired}/{progressStatus.totalRequired} 완료 - </div> - </CardTitle> - - <CardDescription> - {surveyTemplate.description} - - {/* 🎯 동적 질문 수 표시 */} - <div className="mt-2 space-y-1"> - <div className="flex items-center text-sm"> - <span className="text-gray-600"> - 📋 총 {totalVisibleQuestions}개 질문 - {hasConditionalQuestions && ( - <span className="text-blue-600 ml-1"> - (기본 {baseQuestionCount}개 + 조건부 {conditionalQuestionCount}개) - </span> - )} - </span> - </div> - - {hasConditionalQuestions && ( - <div className="text-blue-600 text-sm"> - ⚡ 답변에 따라 {conditionalQuestionCount}개 추가 질문이 나타났습니다 - </div> - )} - </div> - </CardDescription> - - {/* 📊 동적 프로그레스 바 */} - <div className="space-y-2"> - <div className="flex justify-between text-xs text-gray-600"> - <span>필수 질문 진행률</span> - <span> - {Math.round(progressStatus.progressPercentage)}% - {hasConditionalQuestions && ( - <span className="ml-1 text-blue-600"> - (조건부 포함) - </span> - )} - </span> - </div> - <div className="w-full bg-gray-200 rounded-full h-2"> - <div - className="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full transition-all duration-500 ease-out" - style={{ width: `${progressStatus.progressPercentage}%` }} - /> - </div> - - {/* 세부 진행 상황 */} - {progressStatus.totalRequired > 0 && ( - <div className="text-xs text-gray-500 flex justify-between"> - <span>완료: {progressStatus.completedRequired}개</span> - <span>남은 필수: {progressStatus.totalRequired - progressStatus.completedRequired}개</span> - </div> - )} - </div> - </CardHeader> - - <CardContent className="flex-1 min-h-0 overflow-y-auto"> - <form onSubmit={(e) => e.preventDefault()} className="space-y-6"> - <div className="p-4 border rounded-lg bg-yellow-50"> - <div className="flex items-start"> - <AlertTriangle className="h-5 w-5 text-yellow-600 mt-0.5 mr-2" /> - <div> - <p className="font-medium text-yellow-800">중요 안내</p> - <p className="text-sm text-yellow-700 mt-1"> - 본 설문조사는 준법 의무 확인을 위한 필수 절차입니다. 모든 항목을 정확히 작성해주세요. - {conditionalHandler && ( - <span className="block mt-1"> - ⚡ 답변에 따라 추가 질문이 나타날 수 있으며, 이 경우 모든 추가 질문도 완료해야 합니다. - </span> - )} - </p> - </div> - </div> - </div> - - <div className="space-y-4"> - {visibleQuestions.map((question: any) => { - const fieldName = `${question.id}`; - const isComplete = progressStatus.completedQuestionIds.includes(question.id); - const isConditional = !!question.parentQuestionId; - - return ( - <div - key={question.id} - id={`question-${question.id}`} - className={`mb-6 p-4 border rounded-lg transition-colors duration-200 ${isConditional - ? 'bg-blue-50 border-blue-200' - : 'bg-gray-50 border-gray-200' - } ${!isComplete && question.isRequired ? 'ring-2 ring-red-100' : ''}`} - > - <div className="flex items-start justify-between mb-3"> - <div className="flex-1"> - <Label className="text-sm font-medium text-gray-900 flex items-center flex-wrap gap-2"> - <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs"> - Q{question.questionNumber} - </span> - - {isConditional && ( - <span className="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs"> - ⚡ 조건부 질문 - </span> - )} - - {question.questionType === 'FILE' && ( - <span className="px-2 py-1 bg-green-100 text-green-700 rounded text-xs"> - 📎 파일 업로드 - </span> - )} - - <div className="w-full mt-1"> - {question.questionText} - {question.isRequired && <span className="text-red-500 ml-1">*</span>} - </div> - </Label> - </div> - - {isComplete && ( - <CheckCircle2 className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" /> - )} - </div> - - {/* 질문 타입별 렌더링 (기존 코드와 동일) */} - {/* RADIO 타입 */} - {question.questionType === 'RADIO' && ( - <Controller - name={`${fieldName}.answerValue`} - control={control} - rules={{ required: question.isRequired ? '필수 항목입니다.' : false }} - render={({ field }) => ( - <RadioGroup - value={field.value || ''} - onValueChange={(value) => { - field.onChange(value); - handleAnswerChange(question.id, 'answerValue', value); - }} - className="space-y-2" - > - {question.options?.map((option: any) => ( - <div key={option.id} className="flex items-center space-x-2"> - <RadioGroupItem value={option.optionValue} id={`${question.id}-${option.id}`} /> - <Label htmlFor={`${question.id}-${option.id}`} className="text-sm"> - {option.optionText} - </Label> - </div> - ))} - </RadioGroup> - )} - /> - )} - - {/* DROPDOWN 타입 */} - {question.questionType === 'DROPDOWN' && ( - <div className="space-y-2"> - <Controller - name={`${fieldName}.answerValue`} - control={control} - rules={{ required: question.isRequired ? '필수 항목입니다.' : false }} - render={({ field }) => ( - <Select - value={field.value || ''} - onValueChange={(value) => { - field.onChange(value); - handleAnswerChange(question.id, 'answerValue', value); - }} - > - <SelectTrigger> - <SelectValue placeholder="선택해주세요" /> - </SelectTrigger> - <SelectContent> - {question.options?.map((option: any) => ( - <SelectItem key={option.id} value={option.optionValue}> - {option.optionText} - </SelectItem> - ))} - </SelectContent> - </Select> - )} - /> - - <OtherTextInput questionId={question.id} fieldName={fieldName} /> - </div> - )} - - {/* TEXTAREA 타입 */} - {question.questionType === 'TEXTAREA' && ( - <Controller - name={`${fieldName}.detailText`} - control={control} - rules={{ required: question.isRequired ? '필수 항목입니다.' : false }} - render={({ field }) => ( - <Textarea - {...field} - placeholder="상세한 내용을 입력해주세요" - rows={4} - /> - )} - /> - )} - - {/* 상세 텍스트 입력 */} - {question.hasDetailText && ( - <div className="mt-3"> - <Label className="text-sm text-gray-700 mb-2 block">상세 내용을 기술해주세요:</Label> - <Controller - name={`${fieldName}.detailText`} - control={control} - rules={{ required: question.isRequired ? '상세 내용을 입력해주세요.' : false }} - render={({ field }) => ( - <Textarea - {...field} - placeholder="상세한 내용을 입력해주세요" - rows={3} - className="w-full" - /> - )} - /> - </div> - )} - - {/* 파일 업로드 */} - {(question.hasFileUpload || question.questionType === 'FILE') && ( - <div className="mt-3"> - <Label className="text-sm text-gray-700 mb-2 block">첨부파일:</Label> - <div className="border-2 border-dashed border-gray-300 rounded-lg p-4"> - <input - type="file" - multiple - onChange={(e) => handleFileUpload(question.id, e.target.files)} - className="hidden" - id={`file-${question.id}`} - /> - <label htmlFor={`file-${question.id}`} className="cursor-pointer"> - <div className="flex flex-col items-center"> - <Upload className="h-8 w-8 text-gray-400 mb-2" /> - <span className="text-sm text-gray-500">파일을 선택하거나 여기에 드래그하세요</span> - </div> - </label> - - {uploadedFiles[question.id] && uploadedFiles[question.id].length > 0 && ( - <div className="mt-3 space-y-1"> - {uploadedFiles[question.id].map((file, index) => ( - <div key={index} className="flex items-center space-x-2 text-sm"> - <FileText className="h-4 w-4 text-blue-500" /> - <span>{file.name}</span> - <span className="text-gray-500">({(file.size / 1024).toFixed(1)} KB)</span> - </div> - ))} - </div> - )} - </div> - </div> - )} - - {/* 에러 메시지 */} - {errors[fieldName] && ( - <p className="mt-2 text-sm text-red-600 flex items-center"> - <AlertTriangle className="h-4 w-4 mr-1" /> - {errors[fieldName]?.answerValue?.message || - errors[fieldName]?.detailText?.message || - '필수 항목을 완료해주세요.'} - </p> - )} - </div> - ); - })} - </div> - - {/* ✅ 향상된 완료 버튼 */} - <div className="flex justify-end pt-6 border-t"> - <div className="flex items-center space-x-4"> - {/* 진행 상황 요약 */} - <div className="text-sm"> - {canComplete ? ( - <div className="text-green-600 font-medium flex items-center"> - <CheckCircle2 className="h-4 w-4 mr-1" /> - 모든 필수 항목 완료됨 - {hasConditionalQuestions && ( - <span className="ml-2 text-xs text-blue-600"> - (조건부 {conditionalQuestionCount}개 포함) - </span> - )} - </div> - ) : ( - <div className="space-y-1"> - <div className="flex items-center text-gray-600"> - <AlertTriangle className="h-4 w-4 mr-1 text-red-500" /> - {progressStatus.completedRequired}/{progressStatus.totalRequired} 완료 - </div> - {hasConditionalQuestions && ( - <div className="text-xs text-blue-600"> - 기본 + 조건부 {conditionalQuestionCount}개 포함 - </div> - )} - </div> - )} - </div> - - <Button - type="button" - onClick={handleSurveyComplete} - disabled={!canComplete || isSubmitting} - className={`transition-all duration-200 ${canComplete && !isSubmitting - ? 'bg-green-600 hover:bg-green-700 shadow-lg' - : 'bg-gray-400 cursor-not-allowed' - }`} - > - {isSubmitting ? ( - <> - <Loader2 className="h-4 w-4 mr-2 animate-spin" /> - 저장 중... - </> - ) : ( - <> - <CheckCircle2 className="h-4 w-4 mr-2" /> - 설문조사 완료 - </> - )} - <span className="ml-1 text-xs"> - ({progressStatus.completedRequired}/{progressStatus.totalRequired}) - </span> - </Button> - </div> - </div> - </form> - </CardContent> - </Card> - </div> - ); - }; - - // 🔥 서명 상태 표시 컴포넌트 개선 + // 서명 상태 표시 컴포넌트 const SignatureFieldsStatus = () => { if (!hasSignatureFields && !isAutoSignProcessing && !autoSignError && !hasValidSignature) return null; @@ -1846,11 +1044,10 @@ export function BasicContractSignViewer({ ) : hasSignatureFields ? ( <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200"> <Target className="h-3 w-3 mr-1" /> - {signatureFields.length}개 서명 필드 자동 생성됨 + {signatureFields.length}개 서명 필드 자동 생성됨 {mode === 'buyer' ? '(왼쪽 하단)' : ''} </Badge> ) : null} - - {/* 🔥 서명 완료 상태 표시 */} + {hasValidSignature && ( <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-200"> <CheckCircle2 className="h-3 w-3 mr-1" /> @@ -1865,7 +1062,8 @@ export function BasicContractSignViewer({ if (!isOpen && !onClose) { return ( <div className="h-full w-full flex flex-col overflow-hidden"> - {allFiles.length > 1 ? ( + {/* 구매자 모드에서는 탭 없이 단일 뷰어만 표시 */} + {allFiles.length > 1 && mode !== 'buyer' ? ( <Tabs value={activeTab} onValueChange={handleTabChange} className="h-full flex flex-col"> <div className="border-b bg-gray-50 px-3 py-2 flex-shrink-0"> <SignatureFieldsStatus /> @@ -1876,8 +1074,10 @@ export function BasicContractSignViewer({ tabId = 'main'; } else if (file.type === 'survey') { tabId = 'survey'; + } else if (file.type === 'clauses') { + tabId = 'clauses'; } else { - const fileOnlyIndex = allFiles.slice(0, index).filter(f => f.type !== 'survey').length; + const fileOnlyIndex = allFiles.slice(0, index).filter(f => f.type !== 'survey' && f.type !== 'clauses').length; tabId = `file-${fileOnlyIndex}`; } @@ -1886,6 +1086,8 @@ export function BasicContractSignViewer({ <div className="flex items-center space-x-1"> {file.type === 'survey' ? ( <ClipboardList className="h-3 w-3" /> + ) : file.type === 'clauses' ? ( + <BookOpen className="h-3 w-3" /> ) : ( <FileText className="h-3 w-3" /> )} @@ -1893,6 +1095,11 @@ export function BasicContractSignViewer({ {file.type === 'survey' && surveyData.completed && ( <Badge variant="secondary" className="ml-1 h-4 px-1 text-xs">완료</Badge> )} + {file.type === 'clauses' && gtcCommentStatus.hasComments && ( + <Badge variant="destructive" className="ml-1 h-4 px-1 text-xs"> + 코멘트 {gtcCommentStatus.commentCount} + </Badge> + )} </div> </TabsTrigger> ); @@ -1904,11 +1111,35 @@ export function BasicContractSignViewer({ <div className={`absolute inset-0 p-3 ${activeTab === 'survey' ? 'block' : 'hidden'}`} > - <SurveyComponent /> + {/* 분리된 SurveyComponent 사용 */} + <SurveyComponent + contractId={contractId} + surveyTemplate={surveyTemplate} + surveyLoading={surveyLoading} + conditionalHandler={conditionalHandler} + onSurveyComplete={onSurveyComplete} + onSurveyDataUpdate={setSurveyData} + onLoadSurveyTemplate={loadSurveyTemplate} + setActiveTab={setActiveTab} + /> + </div> + + <div + className={`absolute inset-0 p-3 ${activeTab === 'clauses' ? 'block' : 'hidden'}`} + > + {/* GTC 조항 컴포넌트 */} + <GtcClausesComponent + contractId={contractId} + onCommentStatusChange={(hasComments, commentCount) => { + setGtcCommentStatus({ hasComments, commentCount }); + onGtcCommentStatusChange?.(hasComments, commentCount); + }} + t={t} + /> </div> <div - className={`absolute inset-0 ${activeTab !== 'survey' ? 'block' : 'hidden'}`} + className={`absolute inset-0 ${activeTab !== 'survey' && activeTab !== 'clauses' ? 'block' : 'hidden'}`} > <div className="w-full h-full overflow-auto"> <div @@ -1962,49 +1193,84 @@ export function BasicContractSignViewer({ ); } + const handleGtcCommentStatusChange = React.useCallback((hasComments: boolean, commentCount: number) => { + setGtcCommentStatus({ hasComments, commentCount }); + onGtcCommentStatusChange?.(hasComments, commentCount); + }, [onGtcCommentStatusChange]); + // 다이얼로그 뷰어 렌더링 return ( <Dialog open={showDialog} onOpenChange={handleClose}> <DialogContent className="w-[90vw] max-w-6xl h-[90vh] flex flex-col p-0"> <DialogHeader className="px-6 py-4 border-b flex-shrink-0"> <DialogTitle className="flex items-center justify-between"> - <span>기본계약서 서명</span> + <span>{mode === 'buyer' ? '구매자 최종승인' : '기본계약서 서명'}</span> <SignatureFieldsStatus /> </DialogTitle> <DialogDescription> - 계약서를 확인하고 서명을 진행해주세요. - {isComplianceTemplate && ( + 계약서를 확인하고 {mode === 'buyer' ? '최종승인을' : '서명을'} 진행해주세요. + {mode !== 'buyer' && isComplianceTemplate && ( <span className="block mt-1 text-amber-600">📋 준법 설문조사를 먼저 완료해주세요.</span> )} + {mode !== 'buyer' && isGTCTemplate && ( + <span className="block mt-1 text-blue-600">📋 GTC 조항을 검토하고 코멘트가 없는지 확인해주세요.</span> + )} {hasSignatureFields && ( <span className="block mt-1 text-green-600"> - 🎯 서명 위치가 자동으로 감지되었습니다. + 🎯 서명 위치가 자동으로 감지되었습니다{mode === 'buyer' ? ' (왼쪽 하단)' : ''}. </span> )} - {/* 🔥 서명 완료 상태 안내 */} {hasValidSignature && ( <span className="block mt-1 text-green-600"> - ✅ 서명이 완료되었습니다. + ✅ {mode === 'buyer' ? '승인이' : '서명이'} 완료되었습니다. + </span> + )} + {mode !== 'buyer' && isGTCTemplate && gtcCommentStatus.hasComments && ( + <span className="block mt-1 text-red-600"> + ⚠️ GTC 조항에 {gtcCommentStatus.commentCount}개의 코멘트가 있어 서명할 수 없습니다. </span> )} </DialogDescription> </DialogHeader> <div className="flex-1 min-h-0 overflow-hidden"> - {allFiles.length > 1 ? ( + {/* 구매자 모드에서는 탭 없이 단일 뷰어만 표시 */} + {allFiles.length > 1 && mode !== 'buyer' ? ( <Tabs value={activeTab} onValueChange={handleTabChange} className="h-full flex flex-col"> <div className="border-b bg-gray-50 px-3 py-2 flex-shrink-0"> <TabsList className="grid w-full h-8" style={{ gridTemplateColumns: `repeat(${allFiles.length}, 1fr)` }}> {allFiles.map((file, index) => { - const tabId = index === 0 ? 'main' : file.type === 'survey' ? 'survey' : `file-${index}`; + let tabId: string; + if (index === 0) { + tabId = 'main'; + } else if (file.type === 'survey') { + tabId = 'survey'; + } else if (file.type === 'clauses') { + tabId = 'clauses'; + } else { + const fileOnlyIndex = allFiles.slice(0, index).filter(f => f.type !== 'survey' && f.type !== 'clauses').length; + tabId = `file-${fileOnlyIndex}`; + } + return ( <TabsTrigger key={tabId} value={tabId} className="text-xs"> <div className="flex items-center space-x-1"> - {file.type === 'survey' ? <ClipboardList className="h-3 w-3" /> : <FileText className="h-3 w-3" />} + {file.type === 'survey' ? ( + <ClipboardList className="h-3 w-3" /> + ) : file.type === 'clauses' ? ( + <BookOpen className="h-3 w-3" /> + ) : ( + <FileText className="h-3 w-3" /> + )} <span className="truncate">{file.name}</span> {file.type === 'survey' && surveyData.completed && ( <Badge variant="secondary" className="ml-1 h-4 px-1 text-xs">완료</Badge> )} + {file.type === 'clauses' && gtcCommentStatus.hasComments && ( + <Badge variant="destructive" className="ml-1 h-4 px-1 text-xs"> + 코멘트 {gtcCommentStatus.commentCount} + </Badge> + )} </div> </TabsTrigger> ); @@ -2014,10 +1280,29 @@ export function BasicContractSignViewer({ <div className="flex-1 min-h-0 overflow-hidden relative"> <div className={`absolute inset-0 p-3 ${activeTab === 'survey' ? 'block' : 'hidden'}`}> - <SurveyComponent /> + {/* 분리된 SurveyComponent 사용 */} + <SurveyComponent + contractId={contractId} + surveyTemplate={surveyTemplate} + surveyLoading={surveyLoading} + conditionalHandler={conditionalHandler} + onSurveyComplete={onSurveyComplete} + onSurveyDataUpdate={setSurveyData} + onLoadSurveyTemplate={loadSurveyTemplate} + setActiveTab={setActiveTab} + /> + </div> + + <div className={`absolute inset-0 p-3 ${activeTab === 'clauses' ? 'block' : 'hidden'}`}> + {/* GTC 조항 컴포넌트 */} + <GtcClausesComponent + contractId={contractId} + onCommentStatusChange={handleGtcCommentStatusChange} // 메모이제이션된 콜백 사용 + t={t} + /> </div> - <div className={`absolute inset-0 ${activeTab !== 'survey' ? 'block' : 'hidden'}`}> + <div className={`absolute inset-0 ${activeTab !== 'survey' && activeTab !== 'clauses' ? 'block' : 'hidden'}`}> <div className="w-full h-full overflow-auto"> <div ref={viewer} @@ -2069,7 +1354,7 @@ export function BasicContractSignViewer({ <Button variant="outline" onClick={handleClose} disabled={fileLoading}>취소</Button> <Button onClick={handleSave} disabled={fileLoading || isAutoSignProcessing}> <FileSignature className="h-4 w-4 mr-2" /> - 서명 완료 + {mode === 'buyer' ? '최종승인 완료' : '서명 완료'} </Button> </DialogFooter> </DialogContent> |