공통코드 계층구조 구현
This commit is contained in:
parent
b85b888007
commit
5f406fbe88
|
|
@ -94,7 +94,9 @@ export class CommonCodeController {
|
|||
sortOrder: code.sort_order,
|
||||
isActive: code.is_active,
|
||||
useYn: code.is_active,
|
||||
companyCode: code.company_code, // 추가
|
||||
companyCode: code.company_code,
|
||||
parentCodeValue: code.parent_code_value, // 계층구조: 부모 코드값
|
||||
depth: code.depth, // 계층구조: 깊이
|
||||
|
||||
// 기존 필드명도 유지 (하위 호환성)
|
||||
code_category: code.code_category,
|
||||
|
|
@ -103,7 +105,9 @@ export class CommonCodeController {
|
|||
code_name_eng: code.code_name_eng,
|
||||
sort_order: code.sort_order,
|
||||
is_active: code.is_active,
|
||||
company_code: code.company_code, // 추가
|
||||
company_code: code.company_code,
|
||||
parent_code_value: code.parent_code_value, // 계층구조: 부모 코드값
|
||||
// depth는 위에서 이미 정의됨 (snake_case와 camelCase 동일)
|
||||
created_date: code.created_date,
|
||||
created_by: code.created_by,
|
||||
updated_date: code.updated_date,
|
||||
|
|
@ -286,19 +290,17 @@ export class CommonCodeController {
|
|||
});
|
||||
}
|
||||
|
||||
if (!menuObjid) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: "메뉴 OBJID는 필수입니다.",
|
||||
});
|
||||
}
|
||||
// menuObjid가 없으면 공통코드관리 메뉴의 기본 OBJID 사용 (전역 코드)
|
||||
// 공통코드관리 메뉴 OBJID: 1757401858940
|
||||
const DEFAULT_CODE_MANAGEMENT_MENU_OBJID = 1757401858940;
|
||||
const effectiveMenuObjid = menuObjid ? Number(menuObjid) : DEFAULT_CODE_MANAGEMENT_MENU_OBJID;
|
||||
|
||||
const code = await this.commonCodeService.createCode(
|
||||
categoryCode,
|
||||
codeData,
|
||||
userId,
|
||||
companyCode,
|
||||
Number(menuObjid)
|
||||
effectiveMenuObjid
|
||||
);
|
||||
|
||||
return res.status(201).json({
|
||||
|
|
@ -588,4 +590,129 @@ export class CommonCodeController {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 계층구조 코드 조회
|
||||
* GET /api/common-codes/categories/:categoryCode/hierarchy
|
||||
* Query: parentCodeValue (optional), depth (optional), menuObjid (optional)
|
||||
*/
|
||||
async getHierarchicalCodes(req: AuthenticatedRequest, res: Response) {
|
||||
try {
|
||||
const { categoryCode } = req.params;
|
||||
const { parentCodeValue, depth, menuObjid } = req.query;
|
||||
const userCompanyCode = req.user?.companyCode;
|
||||
const menuObjidNum = menuObjid ? Number(menuObjid) : undefined;
|
||||
|
||||
// parentCodeValue가 빈 문자열이면 최상위 코드 조회
|
||||
const parentValue = parentCodeValue === '' || parentCodeValue === undefined
|
||||
? null
|
||||
: parentCodeValue as string;
|
||||
|
||||
const codes = await this.commonCodeService.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentValue,
|
||||
depth ? parseInt(depth as string) : undefined,
|
||||
userCompanyCode,
|
||||
menuObjidNum
|
||||
);
|
||||
|
||||
// 프론트엔드 형식으로 변환
|
||||
const transformedData = codes.map((code: any) => ({
|
||||
codeValue: code.code_value,
|
||||
codeName: code.code_name,
|
||||
codeNameEng: code.code_name_eng,
|
||||
description: code.description,
|
||||
sortOrder: code.sort_order,
|
||||
isActive: code.is_active,
|
||||
parentCodeValue: code.parent_code_value,
|
||||
depth: code.depth,
|
||||
// 기존 필드도 유지
|
||||
code_category: code.code_category,
|
||||
code_value: code.code_value,
|
||||
code_name: code.code_name,
|
||||
code_name_eng: code.code_name_eng,
|
||||
sort_order: code.sort_order,
|
||||
is_active: code.is_active,
|
||||
parent_code_value: code.parent_code_value,
|
||||
}));
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
data: transformedData,
|
||||
message: `계층구조 코드 조회 성공 (${categoryCode})`,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(`계층구조 코드 조회 실패 (${req.params.categoryCode}):`, error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "계층구조 코드 조회 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 코드 트리 조회
|
||||
* GET /api/common-codes/categories/:categoryCode/tree
|
||||
*/
|
||||
async getCodeTree(req: AuthenticatedRequest, res: Response) {
|
||||
try {
|
||||
const { categoryCode } = req.params;
|
||||
const { menuObjid } = req.query;
|
||||
const userCompanyCode = req.user?.companyCode;
|
||||
const menuObjidNum = menuObjid ? Number(menuObjid) : undefined;
|
||||
|
||||
const result = await this.commonCodeService.getCodeTree(
|
||||
categoryCode,
|
||||
userCompanyCode,
|
||||
menuObjidNum
|
||||
);
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
data: result,
|
||||
message: `코드 트리 조회 성공 (${categoryCode})`,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(`코드 트리 조회 실패 (${req.params.categoryCode}):`, error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "코드 트리 조회 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 자식 코드 존재 여부 확인
|
||||
* GET /api/common-codes/categories/:categoryCode/codes/:codeValue/has-children
|
||||
*/
|
||||
async hasChildren(req: AuthenticatedRequest, res: Response) {
|
||||
try {
|
||||
const { categoryCode, codeValue } = req.params;
|
||||
const companyCode = req.user?.companyCode;
|
||||
|
||||
const hasChildren = await this.commonCodeService.hasChildren(
|
||||
categoryCode,
|
||||
codeValue,
|
||||
companyCode
|
||||
);
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
data: { hasChildren },
|
||||
message: "자식 코드 확인 완료",
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`자식 코드 확인 실패 (${req.params.categoryCode}.${req.params.codeValue}):`,
|
||||
error
|
||||
);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "자식 코드 확인 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,3 +54,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -50,3 +50,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -66,3 +66,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -54,3 +54,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,21 @@ router.put("/categories/:categoryCode/codes/reorder", (req, res) =>
|
|||
commonCodeController.reorderCodes(req, res)
|
||||
);
|
||||
|
||||
// 계층구조 코드 조회 (구체적인 경로를 먼저 배치)
|
||||
router.get("/categories/:categoryCode/hierarchy", (req, res) =>
|
||||
commonCodeController.getHierarchicalCodes(req, res)
|
||||
);
|
||||
|
||||
// 코드 트리 조회
|
||||
router.get("/categories/:categoryCode/tree", (req, res) =>
|
||||
commonCodeController.getCodeTree(req, res)
|
||||
);
|
||||
|
||||
// 자식 코드 존재 여부 확인
|
||||
router.get("/categories/:categoryCode/codes/:codeValue/has-children", (req, res) =>
|
||||
commonCodeController.hasChildren(req, res)
|
||||
);
|
||||
|
||||
router.put("/categories/:categoryCode/codes/:codeValue", (req, res) =>
|
||||
commonCodeController.updateCode(req, res)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ export interface CodeInfo {
|
|||
is_active: string;
|
||||
company_code: string;
|
||||
menu_objid?: number | null; // 메뉴 기반 코드 관리용
|
||||
parent_code_value?: string | null; // 계층구조: 부모 코드값
|
||||
depth?: number; // 계층구조: 깊이 (1, 2, 3단계)
|
||||
created_date?: Date | null;
|
||||
created_by?: string | null;
|
||||
updated_date?: Date | null;
|
||||
|
|
@ -61,6 +63,8 @@ export interface CreateCodeData {
|
|||
description?: string;
|
||||
sortOrder?: number;
|
||||
isActive?: string;
|
||||
parentCodeValue?: string; // 계층구조: 부모 코드값
|
||||
depth?: number; // 계층구조: 깊이 (1, 2, 3단계)
|
||||
}
|
||||
|
||||
export class CommonCodeService {
|
||||
|
|
@ -405,11 +409,22 @@ export class CommonCodeService {
|
|||
menuObjid: number
|
||||
) {
|
||||
try {
|
||||
// 계층구조: depth 계산 (부모가 있으면 부모의 depth + 1, 없으면 1)
|
||||
let depth = 1;
|
||||
if (data.parentCodeValue) {
|
||||
const parentCode = await queryOne<CodeInfo>(
|
||||
`SELECT depth FROM code_info
|
||||
WHERE code_category = $1 AND code_value = $2 AND company_code = $3`,
|
||||
[categoryCode, data.parentCodeValue, companyCode]
|
||||
);
|
||||
depth = parentCode ? (parentCode.depth || 1) + 1 : 1;
|
||||
}
|
||||
|
||||
const code = await queryOne<CodeInfo>(
|
||||
`INSERT INTO code_info
|
||||
(code_category, code_value, code_name, code_name_eng, description, sort_order,
|
||||
is_active, menu_objid, company_code, created_by, updated_by, created_date, updated_date)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, 'Y', $7, $8, $9, $10, NOW(), NOW())
|
||||
is_active, menu_objid, company_code, parent_code_value, depth, created_by, updated_by, created_date, updated_date)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, 'Y', $7, $8, $9, $10, $11, $12, NOW(), NOW())
|
||||
RETURNING *`,
|
||||
[
|
||||
categoryCode,
|
||||
|
|
@ -420,13 +435,15 @@ export class CommonCodeService {
|
|||
data.sortOrder || 0,
|
||||
menuObjid,
|
||||
companyCode,
|
||||
data.parentCodeValue || null,
|
||||
depth,
|
||||
createdBy,
|
||||
createdBy,
|
||||
]
|
||||
);
|
||||
|
||||
logger.info(
|
||||
`코드 생성 완료: ${categoryCode}.${data.codeValue} (메뉴: ${menuObjid}, 회사: ${companyCode})`
|
||||
`코드 생성 완료: ${categoryCode}.${data.codeValue} (메뉴: ${menuObjid}, 회사: ${companyCode}, 부모: ${data.parentCodeValue || '없음'}, 깊이: ${depth})`
|
||||
);
|
||||
return code;
|
||||
} catch (error) {
|
||||
|
|
@ -491,6 +508,24 @@ export class CommonCodeService {
|
|||
updateFields.push(`is_active = $${paramIndex++}`);
|
||||
values.push(activeValue);
|
||||
}
|
||||
// 계층구조: 부모 코드값 수정
|
||||
if (data.parentCodeValue !== undefined) {
|
||||
updateFields.push(`parent_code_value = $${paramIndex++}`);
|
||||
values.push(data.parentCodeValue || null);
|
||||
|
||||
// depth도 함께 업데이트
|
||||
let newDepth = 1;
|
||||
if (data.parentCodeValue) {
|
||||
const parentCode = await queryOne<CodeInfo>(
|
||||
`SELECT depth FROM code_info
|
||||
WHERE code_category = $1 AND code_value = $2`,
|
||||
[categoryCode, data.parentCodeValue]
|
||||
);
|
||||
newDepth = parentCode ? (parentCode.depth || 1) + 1 : 1;
|
||||
}
|
||||
updateFields.push(`depth = $${paramIndex++}`);
|
||||
values.push(newDepth);
|
||||
}
|
||||
|
||||
// WHERE 절 구성
|
||||
let whereClause = `WHERE code_category = $${paramIndex++} AND code_value = $${paramIndex}`;
|
||||
|
|
@ -847,4 +882,170 @@ export class CommonCodeService {
|
|||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 계층구조 코드 조회 (특정 depth 또는 부모코드 기준)
|
||||
* @param categoryCode 카테고리 코드
|
||||
* @param parentCodeValue 부모 코드값 (없으면 최상위 코드만 조회)
|
||||
* @param depth 특정 깊이만 조회 (선택)
|
||||
*/
|
||||
async getHierarchicalCodes(
|
||||
categoryCode: string,
|
||||
parentCodeValue?: string | null,
|
||||
depth?: number,
|
||||
userCompanyCode?: string,
|
||||
menuObjid?: number
|
||||
) {
|
||||
try {
|
||||
const whereConditions: string[] = ["code_category = $1", "is_active = 'Y'"];
|
||||
const values: any[] = [categoryCode];
|
||||
let paramIndex = 2;
|
||||
|
||||
// 부모 코드값 필터링
|
||||
if (parentCodeValue === null || parentCodeValue === undefined) {
|
||||
// 최상위 코드 (부모가 없는 코드)
|
||||
whereConditions.push("(parent_code_value IS NULL OR parent_code_value = '')");
|
||||
} else if (parentCodeValue !== '') {
|
||||
whereConditions.push(`parent_code_value = $${paramIndex}`);
|
||||
values.push(parentCodeValue);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
// 특정 깊이 필터링
|
||||
if (depth !== undefined) {
|
||||
whereConditions.push(`depth = $${paramIndex}`);
|
||||
values.push(depth);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
// 메뉴별 필터링 (형제 메뉴 포함)
|
||||
if (menuObjid) {
|
||||
const { getSiblingMenuObjids } = await import('./menuService');
|
||||
const siblingMenuObjids = await getSiblingMenuObjids(menuObjid);
|
||||
whereConditions.push(`menu_objid = ANY($${paramIndex})`);
|
||||
values.push(siblingMenuObjids);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
// 회사별 필터링
|
||||
if (userCompanyCode && userCompanyCode !== "*") {
|
||||
whereConditions.push(`company_code = $${paramIndex}`);
|
||||
values.push(userCompanyCode);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
const whereClause = `WHERE ${whereConditions.join(" AND ")}`;
|
||||
|
||||
const codes = await query<CodeInfo>(
|
||||
`SELECT * FROM code_info
|
||||
${whereClause}
|
||||
ORDER BY sort_order ASC, code_value ASC`,
|
||||
values
|
||||
);
|
||||
|
||||
logger.info(
|
||||
`계층구조 코드 조회: ${categoryCode}, 부모: ${parentCodeValue || '최상위'}, 깊이: ${depth || '전체'} - ${codes.length}개`
|
||||
);
|
||||
|
||||
return codes;
|
||||
} catch (error) {
|
||||
logger.error(`계층구조 코드 조회 중 오류 (${categoryCode}):`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 계층구조 코드 트리 전체 조회 (카테고리 기준)
|
||||
*/
|
||||
async getCodeTree(
|
||||
categoryCode: string,
|
||||
userCompanyCode?: string,
|
||||
menuObjid?: number
|
||||
) {
|
||||
try {
|
||||
const whereConditions: string[] = ["code_category = $1", "is_active = 'Y'"];
|
||||
const values: any[] = [categoryCode];
|
||||
let paramIndex = 2;
|
||||
|
||||
// 메뉴별 필터링 (형제 메뉴 포함)
|
||||
if (menuObjid) {
|
||||
const { getSiblingMenuObjids } = await import('./menuService');
|
||||
const siblingMenuObjids = await getSiblingMenuObjids(menuObjid);
|
||||
whereConditions.push(`menu_objid = ANY($${paramIndex})`);
|
||||
values.push(siblingMenuObjids);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
// 회사별 필터링
|
||||
if (userCompanyCode && userCompanyCode !== "*") {
|
||||
whereConditions.push(`company_code = $${paramIndex}`);
|
||||
values.push(userCompanyCode);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
const whereClause = `WHERE ${whereConditions.join(" AND ")}`;
|
||||
|
||||
const allCodes = await query<CodeInfo>(
|
||||
`SELECT * FROM code_info
|
||||
${whereClause}
|
||||
ORDER BY depth ASC, sort_order ASC, code_value ASC`,
|
||||
values
|
||||
);
|
||||
|
||||
// 트리 구조로 변환
|
||||
const buildTree = (codes: CodeInfo[], parentValue: string | null = null): any[] => {
|
||||
return codes
|
||||
.filter(code => {
|
||||
const codeParent = code.parent_code_value || null;
|
||||
return codeParent === parentValue;
|
||||
})
|
||||
.map(code => ({
|
||||
...code,
|
||||
children: buildTree(codes, code.code_value)
|
||||
}));
|
||||
};
|
||||
|
||||
const tree = buildTree(allCodes);
|
||||
|
||||
logger.info(
|
||||
`코드 트리 조회 완료: ${categoryCode} - 전체 ${allCodes.length}개`
|
||||
);
|
||||
|
||||
return {
|
||||
flat: allCodes,
|
||||
tree
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error(`코드 트리 조회 중 오류 (${categoryCode}):`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 자식 코드가 있는지 확인
|
||||
*/
|
||||
async hasChildren(
|
||||
categoryCode: string,
|
||||
codeValue: string,
|
||||
companyCode?: string
|
||||
): Promise<boolean> {
|
||||
try {
|
||||
let sql = `SELECT COUNT(*) as count FROM code_info
|
||||
WHERE code_category = $1 AND parent_code_value = $2`;
|
||||
const values: any[] = [categoryCode, codeValue];
|
||||
|
||||
if (companyCode && companyCode !== "*") {
|
||||
sql += ` AND company_code = $3`;
|
||||
values.push(companyCode);
|
||||
}
|
||||
|
||||
const result = await queryOne<{ count: string }>(sql, values);
|
||||
const count = parseInt(result?.count || "0");
|
||||
|
||||
return count > 0;
|
||||
} catch (error) {
|
||||
logger.error(`자식 코드 확인 중 오류 (${categoryCode}.${codeValue}):`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -586,3 +586,4 @@ const result = await executeNodeFlow(flowId, {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -359,3 +359,4 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -345,3 +345,4 @@ const getComponentValue = (componentId: string) => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Link2, Layers, Filter, FormInput, Ban, Tags } from "lucide-react";
|
||||
import { Link2, Layers, Filter, FormInput, Ban, Tags, Columns } from "lucide-react";
|
||||
|
||||
// 탭별 컴포넌트
|
||||
import CascadingRelationsTab from "./tabs/CascadingRelationsTab";
|
||||
|
|
@ -12,6 +12,7 @@ import HierarchyTab from "./tabs/HierarchyTab";
|
|||
import ConditionTab from "./tabs/ConditionTab";
|
||||
import MutualExclusionTab from "./tabs/MutualExclusionTab";
|
||||
import CategoryValueCascadingTab from "./tabs/CategoryValueCascadingTab";
|
||||
import HierarchyColumnTab from "./tabs/HierarchyColumnTab";
|
||||
|
||||
export default function CascadingManagementPage() {
|
||||
const searchParams = useSearchParams();
|
||||
|
|
@ -21,7 +22,7 @@ export default function CascadingManagementPage() {
|
|||
// URL 쿼리 파라미터에서 탭 설정
|
||||
useEffect(() => {
|
||||
const tab = searchParams.get("tab");
|
||||
if (tab && ["relations", "hierarchy", "condition", "autofill", "exclusion", "category-value"].includes(tab)) {
|
||||
if (tab && ["relations", "hierarchy", "condition", "autofill", "exclusion", "category-value", "hierarchy-column"].includes(tab)) {
|
||||
setActiveTab(tab);
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,626 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Plus, Pencil, Trash2, Database, RefreshCw, Layers } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
|
||||
import {
|
||||
hierarchyColumnApi,
|
||||
HierarchyColumnGroup,
|
||||
CreateHierarchyGroupRequest,
|
||||
} from "@/lib/api/hierarchyColumn";
|
||||
import { commonCodeApi } from "@/lib/api/commonCode";
|
||||
import apiClient from "@/lib/api/client";
|
||||
|
||||
interface TableInfo {
|
||||
tableName: string;
|
||||
displayName?: string;
|
||||
}
|
||||
|
||||
interface ColumnInfo {
|
||||
columnName: string;
|
||||
displayName?: string;
|
||||
dataType?: string;
|
||||
}
|
||||
|
||||
interface CategoryInfo {
|
||||
categoryCode: string;
|
||||
categoryName: string;
|
||||
}
|
||||
|
||||
export default function HierarchyColumnTab() {
|
||||
// 상태
|
||||
const [groups, setGroups] = useState<HierarchyColumnGroup[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [selectedGroup, setSelectedGroup] = useState<HierarchyColumnGroup | null>(null);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
// 폼 상태
|
||||
const [formData, setFormData] = useState({
|
||||
groupCode: "",
|
||||
groupName: "",
|
||||
description: "",
|
||||
codeCategory: "",
|
||||
tableName: "",
|
||||
maxDepth: 3,
|
||||
mappings: [
|
||||
{ depth: 1, levelLabel: "대분류", columnName: "", placeholder: "대분류 선택", isRequired: true },
|
||||
{ depth: 2, levelLabel: "중분류", columnName: "", placeholder: "중분류 선택", isRequired: false },
|
||||
{ depth: 3, levelLabel: "소분류", columnName: "", placeholder: "소분류 선택", isRequired: false },
|
||||
],
|
||||
});
|
||||
|
||||
// 참조 데이터
|
||||
const [tables, setTables] = useState<TableInfo[]>([]);
|
||||
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||||
const [categories, setCategories] = useState<CategoryInfo[]>([]);
|
||||
const [loadingTables, setLoadingTables] = useState(false);
|
||||
const [loadingColumns, setLoadingColumns] = useState(false);
|
||||
const [loadingCategories, setLoadingCategories] = useState(false);
|
||||
|
||||
// 그룹 목록 로드
|
||||
const loadGroups = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await hierarchyColumnApi.getAll();
|
||||
if (response.success && response.data) {
|
||||
setGroups(response.data);
|
||||
} else {
|
||||
toast.error(response.error || "계층구조 그룹 로드 실패");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("계층구조 그룹 로드 에러:", error);
|
||||
toast.error("계층구조 그룹을 로드하는 중 오류가 발생했습니다.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 테이블 목록 로드
|
||||
const loadTables = useCallback(async () => {
|
||||
setLoadingTables(true);
|
||||
try {
|
||||
const response = await apiClient.get("/table-management/tables");
|
||||
if (response.data?.success && response.data?.data) {
|
||||
setTables(response.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("테이블 로드 에러:", error);
|
||||
} finally {
|
||||
setLoadingTables(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 카테고리 목록 로드
|
||||
const loadCategories = useCallback(async () => {
|
||||
setLoadingCategories(true);
|
||||
try {
|
||||
const response = await commonCodeApi.categories.getList();
|
||||
if (response.success && response.data) {
|
||||
setCategories(
|
||||
response.data.map((cat: any) => ({
|
||||
categoryCode: cat.categoryCode || cat.category_code,
|
||||
categoryName: cat.categoryName || cat.category_name,
|
||||
}))
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("카테고리 로드 에러:", error);
|
||||
} finally {
|
||||
setLoadingCategories(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 테이블 선택 시 컬럼 로드
|
||||
const loadColumns = useCallback(async (tableName: string) => {
|
||||
if (!tableName) {
|
||||
setColumns([]);
|
||||
return;
|
||||
}
|
||||
setLoadingColumns(true);
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
|
||||
if (response.data?.success && response.data?.data) {
|
||||
setColumns(response.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("컬럼 로드 에러:", error);
|
||||
} finally {
|
||||
setLoadingColumns(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 초기 로드
|
||||
useEffect(() => {
|
||||
loadGroups();
|
||||
loadTables();
|
||||
loadCategories();
|
||||
}, [loadGroups, loadTables, loadCategories]);
|
||||
|
||||
// 테이블 선택 변경 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (formData.tableName) {
|
||||
loadColumns(formData.tableName);
|
||||
}
|
||||
}, [formData.tableName, loadColumns]);
|
||||
|
||||
// 폼 초기화
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
groupCode: "",
|
||||
groupName: "",
|
||||
description: "",
|
||||
codeCategory: "",
|
||||
tableName: "",
|
||||
maxDepth: 3,
|
||||
mappings: [
|
||||
{ depth: 1, levelLabel: "대분류", columnName: "", placeholder: "대분류 선택", isRequired: true },
|
||||
{ depth: 2, levelLabel: "중분류", columnName: "", placeholder: "중분류 선택", isRequired: false },
|
||||
{ depth: 3, levelLabel: "소분류", columnName: "", placeholder: "소분류 선택", isRequired: false },
|
||||
],
|
||||
});
|
||||
setSelectedGroup(null);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
// 모달 열기 (신규)
|
||||
const openCreateModal = () => {
|
||||
resetForm();
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
// 모달 열기 (수정)
|
||||
const openEditModal = (group: HierarchyColumnGroup) => {
|
||||
setSelectedGroup(group);
|
||||
setIsEditing(true);
|
||||
|
||||
// 매핑 데이터 변환
|
||||
const mappings = [1, 2, 3].map((depth) => {
|
||||
const existing = group.mappings?.find((m) => m.depth === depth);
|
||||
return {
|
||||
depth,
|
||||
levelLabel: existing?.level_label || (depth === 1 ? "대분류" : depth === 2 ? "중분류" : "소분류"),
|
||||
columnName: existing?.column_name || "",
|
||||
placeholder: existing?.placeholder || `${depth === 1 ? "대분류" : depth === 2 ? "중분류" : "소분류"} 선택`,
|
||||
isRequired: existing?.is_required === "Y",
|
||||
};
|
||||
});
|
||||
|
||||
setFormData({
|
||||
groupCode: group.group_code,
|
||||
groupName: group.group_name,
|
||||
description: group.description || "",
|
||||
codeCategory: group.code_category,
|
||||
tableName: group.table_name,
|
||||
maxDepth: group.max_depth,
|
||||
mappings,
|
||||
});
|
||||
|
||||
// 컬럼 로드
|
||||
loadColumns(group.table_name);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
// 삭제 확인 열기
|
||||
const openDeleteDialog = (group: HierarchyColumnGroup) => {
|
||||
setSelectedGroup(group);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = async () => {
|
||||
// 필수 필드 검증
|
||||
if (!formData.groupCode || !formData.groupName || !formData.codeCategory || !formData.tableName) {
|
||||
toast.error("필수 필드를 모두 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 최소 1개 컬럼 매핑 검증
|
||||
const validMappings = formData.mappings
|
||||
.filter((m) => m.depth <= formData.maxDepth && m.columnName)
|
||||
.map((m) => ({
|
||||
depth: m.depth,
|
||||
levelLabel: m.levelLabel,
|
||||
columnName: m.columnName,
|
||||
placeholder: m.placeholder,
|
||||
isRequired: m.isRequired,
|
||||
}));
|
||||
|
||||
if (validMappings.length === 0) {
|
||||
toast.error("최소 하나의 컬럼 매핑이 필요합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (isEditing && selectedGroup) {
|
||||
// 수정
|
||||
const response = await hierarchyColumnApi.update(selectedGroup.group_id, {
|
||||
groupName: formData.groupName,
|
||||
description: formData.description,
|
||||
maxDepth: formData.maxDepth,
|
||||
mappings: validMappings,
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
toast.success("계층구조 그룹이 수정되었습니다.");
|
||||
setModalOpen(false);
|
||||
loadGroups();
|
||||
} else {
|
||||
toast.error(response.error || "수정 실패");
|
||||
}
|
||||
} else {
|
||||
// 생성
|
||||
const request: CreateHierarchyGroupRequest = {
|
||||
groupCode: formData.groupCode,
|
||||
groupName: formData.groupName,
|
||||
description: formData.description,
|
||||
codeCategory: formData.codeCategory,
|
||||
tableName: formData.tableName,
|
||||
maxDepth: formData.maxDepth,
|
||||
mappings: validMappings,
|
||||
};
|
||||
|
||||
const response = await hierarchyColumnApi.create(request);
|
||||
|
||||
if (response.success) {
|
||||
toast.success("계층구조 그룹이 생성되었습니다.");
|
||||
setModalOpen(false);
|
||||
loadGroups();
|
||||
} else {
|
||||
toast.error(response.error || "생성 실패");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("저장 에러:", error);
|
||||
toast.error("저장 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제
|
||||
const handleDelete = async () => {
|
||||
if (!selectedGroup) return;
|
||||
|
||||
try {
|
||||
const response = await hierarchyColumnApi.delete(selectedGroup.group_id);
|
||||
if (response.success) {
|
||||
toast.success("계층구조 그룹이 삭제되었습니다.");
|
||||
setDeleteDialogOpen(false);
|
||||
loadGroups();
|
||||
} else {
|
||||
toast.error(response.error || "삭제 실패");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("삭제 에러:", error);
|
||||
toast.error("삭제 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 매핑 컬럼 변경
|
||||
const handleMappingChange = (depth: number, field: string, value: any) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
mappings: prev.mappings.map((m) =>
|
||||
m.depth === depth ? { ...m, [field]: value } : m
|
||||
),
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">계층구조 컬럼 그룹</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
공통코드 계층구조를 테이블 컬럼에 매핑하여 대분류/중분류/소분류를 각각 별도 컬럼에 저장합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={loadGroups} disabled={loading}>
|
||||
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
|
||||
새로고침
|
||||
</Button>
|
||||
<Button size="sm" onClick={openCreateModal}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
새 그룹 추가
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 그룹 목록 */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<LoadingSpinner />
|
||||
<span className="ml-2 text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : groups.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Layers className="h-12 w-12 text-muted-foreground" />
|
||||
<p className="mt-4 text-muted-foreground">계층구조 컬럼 그룹이 없습니다.</p>
|
||||
<Button className="mt-4" onClick={openCreateModal}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
첫 번째 그룹 만들기
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{groups.map((group) => (
|
||||
<Card key={group.group_id} className="hover:shadow-md transition-shadow">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">{group.group_name}</CardTitle>
|
||||
<CardDescription className="text-xs">{group.group_code}</CardDescription>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEditModal(group)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => openDeleteDialog(group)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Database className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">{group.table_name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">{group.code_category}</Badge>
|
||||
<Badge variant="secondary">{group.max_depth}단계</Badge>
|
||||
</div>
|
||||
{group.mappings && group.mappings.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
{group.mappings.map((mapping) => (
|
||||
<div key={mapping.depth} className="flex items-center gap-2 text-xs">
|
||||
<Badge variant="outline" className="w-14 justify-center">
|
||||
{mapping.level_label}
|
||||
</Badge>
|
||||
<span className="font-mono text-muted-foreground">{mapping.column_name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 생성/수정 모달 */}
|
||||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||||
<DialogContent className="max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEditing ? "계층구조 그룹 수정" : "계층구조 그룹 생성"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
공통코드 계층구조를 테이블 컬럼에 매핑합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* 기본 정보 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>그룹 코드 *</Label>
|
||||
<Input
|
||||
value={formData.groupCode}
|
||||
onChange={(e) => setFormData({ ...formData, groupCode: e.target.value.toUpperCase() })}
|
||||
placeholder="예: ITEM_CAT_HIERARCHY"
|
||||
disabled={isEditing}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>그룹명 *</Label>
|
||||
<Input
|
||||
value={formData.groupName}
|
||||
onChange={(e) => setFormData({ ...formData, groupName: e.target.value })}
|
||||
placeholder="예: 품목분류 계층"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>설명</Label>
|
||||
<Input
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
placeholder="계층구조에 대한 설명"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>공통코드 카테고리 *</Label>
|
||||
<Select
|
||||
value={formData.codeCategory}
|
||||
onValueChange={(value) => setFormData({ ...formData, codeCategory: value })}
|
||||
disabled={isEditing}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="카테고리 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{loadingCategories ? (
|
||||
<SelectItem value="_loading" disabled>로딩 중...</SelectItem>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<SelectItem key={cat.categoryCode} value={cat.categoryCode}>
|
||||
{cat.categoryName} ({cat.categoryCode})
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>적용 테이블 *</Label>
|
||||
<Select
|
||||
value={formData.tableName}
|
||||
onValueChange={(value) => setFormData({ ...formData, tableName: value })}
|
||||
disabled={isEditing}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="테이블 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{loadingTables ? (
|
||||
<SelectItem value="_loading" disabled>로딩 중...</SelectItem>
|
||||
) : (
|
||||
tables.map((table) => (
|
||||
<SelectItem key={table.tableName} value={table.tableName}>
|
||||
{table.displayName || table.tableName}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>최대 깊이</Label>
|
||||
<Select
|
||||
value={String(formData.maxDepth)}
|
||||
onValueChange={(value) => setFormData({ ...formData, maxDepth: Number(value) })}
|
||||
>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">1단계 (대분류만)</SelectItem>
|
||||
<SelectItem value="2">2단계 (대/중분류)</SelectItem>
|
||||
<SelectItem value="3">3단계 (대/중/소분류)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 컬럼 매핑 */}
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
<Label className="text-base font-medium">컬럼 매핑</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
각 계층 레벨에 저장할 컬럼을 선택합니다.
|
||||
</p>
|
||||
|
||||
{formData.mappings
|
||||
.filter((m) => m.depth <= formData.maxDepth)
|
||||
.map((mapping) => (
|
||||
<div key={mapping.depth} className="grid grid-cols-4 gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={mapping.depth === 1 ? "default" : "outline"}>
|
||||
{mapping.depth}단계
|
||||
</Badge>
|
||||
<Input
|
||||
value={mapping.levelLabel}
|
||||
onChange={(e) => handleMappingChange(mapping.depth, "levelLabel", e.target.value)}
|
||||
className="h-8 text-xs"
|
||||
placeholder="라벨"
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
value={mapping.columnName || "_none"}
|
||||
onValueChange={(value) => handleMappingChange(mapping.depth, "columnName", value === "_none" ? "" : value)}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="_none">컬럼 선택</SelectItem>
|
||||
{loadingColumns ? (
|
||||
<SelectItem value="_loading" disabled>로딩 중...</SelectItem>
|
||||
) : (
|
||||
columns.map((col) => (
|
||||
<SelectItem key={col.columnName} value={col.columnName}>
|
||||
{col.displayName || col.columnName}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
value={mapping.placeholder}
|
||||
onChange={(e) => handleMappingChange(mapping.depth, "placeholder", e.target.value)}
|
||||
className="h-8 text-xs"
|
||||
placeholder="플레이스홀더"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapping.isRequired}
|
||||
onChange={(e) => handleMappingChange(mapping.depth, "isRequired", e.target.checked)}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">필수</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setModalOpen(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
{isEditing ? "수정" : "생성"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>계층구조 그룹 삭제</DialogTitle>
|
||||
<DialogDescription>
|
||||
"{selectedGroup?.group_name}" 그룹을 삭제하시겠습니까?
|
||||
<br />
|
||||
이 작업은 되돌릴 수 없습니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
삭제
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -56,6 +56,7 @@ interface ColumnTypeInfo {
|
|||
referenceColumn?: string;
|
||||
displayColumn?: string; // 🎯 Entity 조인에서 표시할 컬럼명
|
||||
categoryMenus?: number[]; // 🆕 Category 타입: 선택된 2레벨 메뉴 OBJID 배열
|
||||
hierarchyRole?: "large" | "medium" | "small"; // 🆕 계층구조 역할
|
||||
}
|
||||
|
||||
interface SecondLevelMenu {
|
||||
|
|
@ -292,11 +293,27 @@ export default function TableManagementPage() {
|
|||
});
|
||||
|
||||
// 컬럼 데이터에 기본값 설정
|
||||
const processedColumns = (data.columns || data).map((col: any) => ({
|
||||
...col,
|
||||
inputType: col.inputType || "text", // 기본값: text
|
||||
categoryMenus: col.categoryMenus || [], // 카테고리 메뉴 매핑 정보
|
||||
}));
|
||||
const processedColumns = (data.columns || data).map((col: any) => {
|
||||
// detailSettings에서 hierarchyRole 추출
|
||||
let hierarchyRole: "large" | "medium" | "small" | undefined = undefined;
|
||||
if (col.detailSettings && typeof col.detailSettings === "string") {
|
||||
try {
|
||||
const parsed = JSON.parse(col.detailSettings);
|
||||
if (parsed.hierarchyRole === "large" || parsed.hierarchyRole === "medium" || parsed.hierarchyRole === "small") {
|
||||
hierarchyRole = parsed.hierarchyRole;
|
||||
}
|
||||
} catch {
|
||||
// JSON 파싱 실패 시 무시
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...col,
|
||||
inputType: col.inputType || "text", // 기본값: text
|
||||
categoryMenus: col.categoryMenus || [], // 카테고리 메뉴 매핑 정보
|
||||
hierarchyRole, // 계층구조 역할
|
||||
};
|
||||
});
|
||||
|
||||
if (page === 1) {
|
||||
setColumns(processedColumns);
|
||||
|
|
@ -367,18 +384,40 @@ export default function TableManagementPage() {
|
|||
let referenceTable = col.referenceTable;
|
||||
let referenceColumn = col.referenceColumn;
|
||||
let displayColumn = col.displayColumn;
|
||||
let hierarchyRole = col.hierarchyRole;
|
||||
|
||||
if (settingType === "code") {
|
||||
if (value === "none") {
|
||||
newDetailSettings = "";
|
||||
codeCategory = undefined;
|
||||
codeValue = undefined;
|
||||
hierarchyRole = undefined; // 코드 선택 해제 시 계층 역할도 초기화
|
||||
} else {
|
||||
const codeOption = commonCodeOptions.find((option) => option.value === value);
|
||||
newDetailSettings = codeOption ? `공통코드: ${codeOption.label}` : "";
|
||||
// 기존 hierarchyRole 유지하면서 JSON 형식으로 저장
|
||||
const existingHierarchyRole = hierarchyRole;
|
||||
newDetailSettings = JSON.stringify({
|
||||
codeCategory: value,
|
||||
hierarchyRole: existingHierarchyRole
|
||||
});
|
||||
codeCategory = value;
|
||||
codeValue = value;
|
||||
}
|
||||
} else if (settingType === "hierarchy_role") {
|
||||
// 계층구조 역할 변경 - JSON 형식으로 저장
|
||||
hierarchyRole = value === "none" ? undefined : (value as "large" | "medium" | "small");
|
||||
// detailSettings를 JSON으로 업데이트
|
||||
let existingSettings: Record<string, any> = {};
|
||||
if (typeof col.detailSettings === "string" && col.detailSettings.trim().startsWith("{")) {
|
||||
try {
|
||||
existingSettings = JSON.parse(col.detailSettings);
|
||||
} catch {
|
||||
existingSettings = {};
|
||||
}
|
||||
}
|
||||
newDetailSettings = JSON.stringify({
|
||||
...existingSettings,
|
||||
hierarchyRole: hierarchyRole,
|
||||
});
|
||||
} else if (settingType === "entity") {
|
||||
if (value === "none") {
|
||||
newDetailSettings = "";
|
||||
|
|
@ -415,6 +454,7 @@ export default function TableManagementPage() {
|
|||
referenceTable,
|
||||
referenceColumn,
|
||||
displayColumn,
|
||||
hierarchyRole,
|
||||
};
|
||||
}
|
||||
return col;
|
||||
|
|
@ -487,6 +527,26 @@ export default function TableManagementPage() {
|
|||
console.log("🔧 Entity 설정 JSON 생성:", entitySettings);
|
||||
}
|
||||
|
||||
// 🎯 Code 타입인 경우 hierarchyRole을 detailSettings에 포함
|
||||
if (column.inputType === "code" && column.hierarchyRole) {
|
||||
let existingSettings: Record<string, unknown> = {};
|
||||
if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
|
||||
try {
|
||||
existingSettings = JSON.parse(finalDetailSettings);
|
||||
} catch {
|
||||
existingSettings = {};
|
||||
}
|
||||
}
|
||||
|
||||
const codeSettings = {
|
||||
...existingSettings,
|
||||
hierarchyRole: column.hierarchyRole,
|
||||
};
|
||||
|
||||
finalDetailSettings = JSON.stringify(codeSettings);
|
||||
console.log("🔧 Code 계층 역할 설정 JSON 생성:", codeSettings);
|
||||
}
|
||||
|
||||
const columnSetting = {
|
||||
columnName: column.columnName, // 실제 DB 컬럼명 (변경 불가)
|
||||
columnLabel: column.displayName, // 사용자가 입력한 표시명
|
||||
|
|
@ -1229,23 +1289,44 @@ export default function TableManagementPage() {
|
|||
</Select>
|
||||
{/* 입력 타입이 'code'인 경우 공통코드 선택 */}
|
||||
{column.inputType === "code" && (
|
||||
<Select
|
||||
value={column.codeCategory || "none"}
|
||||
onValueChange={(value) =>
|
||||
handleDetailSettingsChange(column.columnName, "code", value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="공통코드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{commonCodeOptions.map((option, index) => (
|
||||
<SelectItem key={`code-${option.value}-${index}`} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<>
|
||||
<Select
|
||||
value={column.codeCategory || "none"}
|
||||
onValueChange={(value) =>
|
||||
handleDetailSettingsChange(column.columnName, "code", value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="공통코드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{commonCodeOptions.map((option, index) => (
|
||||
<SelectItem key={`code-${option.value}-${index}`} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{/* 계층구조 역할 선택 */}
|
||||
{column.codeCategory && column.codeCategory !== "none" && (
|
||||
<Select
|
||||
value={column.hierarchyRole || "none"}
|
||||
onValueChange={(value) =>
|
||||
handleDetailSettingsChange(column.columnName, "hierarchy_role", value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="계층 역할" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">일반</SelectItem>
|
||||
<SelectItem value="large">대분류</SelectItem>
|
||||
<SelectItem value="medium">중분류</SelectItem>
|
||||
<SelectItem value="small">소분류</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/* 입력 타입이 'category'인 경우 2레벨 메뉴 다중 선택 */}
|
||||
{column.inputType === "category" && (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
|
@ -45,15 +45,124 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
const reorderCodesMutation = useReorderCodes();
|
||||
|
||||
// 드래그앤드롭을 위해 필터링된 코드 목록 사용
|
||||
const { filteredItems: filteredCodes } = useSearchAndFilter(codes, {
|
||||
const { filteredItems: filteredCodesRaw } = useSearchAndFilter(codes, {
|
||||
searchFields: ["code_name", "code_value"],
|
||||
});
|
||||
|
||||
// 계층 구조로 정렬 (부모 → 자식 순서)
|
||||
const filteredCodes = useMemo(() => {
|
||||
if (!filteredCodesRaw || filteredCodesRaw.length === 0) return [];
|
||||
|
||||
// 코드를 계층 순서로 정렬하는 함수
|
||||
const sortHierarchically = (codes: CodeInfo[]): CodeInfo[] => {
|
||||
const result: CodeInfo[] = [];
|
||||
const codeMap = new Map<string, CodeInfo>();
|
||||
const childrenMap = new Map<string, CodeInfo[]>();
|
||||
|
||||
// 코드 맵 생성
|
||||
codes.forEach((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const parentValue = code.parentCodeValue || code.parent_code_value;
|
||||
codeMap.set(codeValue, code);
|
||||
|
||||
if (parentValue) {
|
||||
if (!childrenMap.has(parentValue)) {
|
||||
childrenMap.set(parentValue, []);
|
||||
}
|
||||
childrenMap.get(parentValue)!.push(code);
|
||||
}
|
||||
});
|
||||
|
||||
// 재귀적으로 트리 구조 순회
|
||||
const traverse = (parentValue: string | null, depth: number) => {
|
||||
const children = parentValue
|
||||
? childrenMap.get(parentValue) || []
|
||||
: codes.filter((c) => !c.parentCodeValue && !c.parent_code_value);
|
||||
|
||||
// 정렬 순서로 정렬
|
||||
children
|
||||
.sort((a, b) => (a.sortOrder || a.sort_order || 0) - (b.sortOrder || b.sort_order || 0))
|
||||
.forEach((code) => {
|
||||
result.push(code);
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
traverse(codeValue, depth + 1);
|
||||
});
|
||||
};
|
||||
|
||||
traverse(null, 1);
|
||||
|
||||
// 트리에 포함되지 않은 코드들도 추가 (orphan 코드)
|
||||
codes.forEach((code) => {
|
||||
if (!result.includes(code)) {
|
||||
result.push(code);
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
return sortHierarchically(filteredCodesRaw);
|
||||
}, [filteredCodesRaw]);
|
||||
|
||||
// 모달 상태
|
||||
const [showFormModal, setShowFormModal] = useState(false);
|
||||
const [editingCode, setEditingCode] = useState<CodeInfo | null>(null);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [deletingCode, setDeletingCode] = useState<CodeInfo | null>(null);
|
||||
const [defaultParentCode, setDefaultParentCode] = useState<string | undefined>(undefined);
|
||||
|
||||
// 트리 접기/펼치기 상태 (코드값 Set)
|
||||
const [collapsedCodes, setCollapsedCodes] = useState<Set<string>>(new Set());
|
||||
|
||||
// 자식 정보 계산
|
||||
const childrenMap = useMemo(() => {
|
||||
const map = new Map<string, CodeInfo[]>();
|
||||
codes.forEach((code) => {
|
||||
const parentValue = code.parentCodeValue || code.parent_code_value;
|
||||
if (parentValue) {
|
||||
if (!map.has(parentValue)) {
|
||||
map.set(parentValue, []);
|
||||
}
|
||||
map.get(parentValue)!.push(code);
|
||||
}
|
||||
});
|
||||
return map;
|
||||
}, [codes]);
|
||||
|
||||
// 접기/펼치기 토글
|
||||
const toggleExpand = (codeValue: string) => {
|
||||
setCollapsedCodes((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(codeValue)) {
|
||||
newSet.delete(codeValue);
|
||||
} else {
|
||||
newSet.add(codeValue);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
// 특정 코드가 표시되어야 하는지 확인 (부모가 접혀있으면 숨김)
|
||||
const isCodeVisible = (code: CodeInfo): boolean => {
|
||||
const parentValue = code.parentCodeValue || code.parent_code_value;
|
||||
if (!parentValue) return true; // 최상위 코드는 항상 표시
|
||||
|
||||
// 부모가 접혀있으면 숨김
|
||||
if (collapsedCodes.has(parentValue)) return false;
|
||||
|
||||
// 부모의 부모도 확인 (재귀적으로)
|
||||
const parentCode = codes.find((c) => (c.codeValue || c.code_value) === parentValue);
|
||||
if (parentCode) {
|
||||
return isCodeVisible(parentCode);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 표시할 코드 목록 (접힌 상태 반영)
|
||||
const visibleCodes = useMemo(() => {
|
||||
return filteredCodes.filter(isCodeVisible);
|
||||
}, [filteredCodes, collapsedCodes, codes]);
|
||||
|
||||
// 드래그 앤 드롭 훅 사용
|
||||
const dragAndDrop = useDragAndDrop<CodeInfo>({
|
||||
|
|
@ -73,12 +182,21 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
// 새 코드 생성
|
||||
const handleNewCode = () => {
|
||||
setEditingCode(null);
|
||||
setDefaultParentCode(undefined);
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
// 코드 수정
|
||||
const handleEditCode = (code: CodeInfo) => {
|
||||
setEditingCode(code);
|
||||
setDefaultParentCode(undefined);
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
// 하위 코드 추가
|
||||
const handleAddChild = (parentCode: CodeInfo) => {
|
||||
setEditingCode(null);
|
||||
setDefaultParentCode(parentCode.codeValue || parentCode.code_value || "");
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
|
|
@ -110,7 +228,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
if (!categoryCode) {
|
||||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">카테고리를 선택하세요</p>
|
||||
<p className="text-muted-foreground text-sm">카테고리를 선택하세요</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -119,7 +237,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-semibold text-destructive">코드를 불러오는 중 오류가 발생했습니다.</p>
|
||||
<p className="text-destructive text-sm font-semibold">코드를 불러오는 중 오류가 발생했습니다.</p>
|
||||
<Button variant="outline" onClick={() => window.location.reload()} className="mt-4 h-10 text-sm font-medium">
|
||||
다시 시도
|
||||
</Button>
|
||||
|
|
@ -135,7 +253,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
{/* 검색 + 버튼 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
placeholder="코드 검색..."
|
||||
value={searchTerm}
|
||||
|
|
@ -156,9 +274,9 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
id="activeOnlyCodes"
|
||||
checked={showActiveOnly}
|
||||
onChange={(e) => setShowActiveOnly(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-input"
|
||||
className="border-input h-4 w-4 rounded"
|
||||
/>
|
||||
<label htmlFor="activeOnlyCodes" className="text-sm text-muted-foreground">
|
||||
<label htmlFor="activeOnlyCodes" className="text-muted-foreground text-sm">
|
||||
활성만 표시
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -170,9 +288,9 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
<div className="flex h-32 items-center justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : filteredCodes.length === 0 ? (
|
||||
) : visibleCodes.length === 0 ? (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{codes.length === 0 ? "코드가 없습니다." : "검색 결과가 없습니다."}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -180,23 +298,35 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
<>
|
||||
<DndContext {...dragAndDrop.dndContextProps}>
|
||||
<SortableContext
|
||||
items={filteredCodes.map((code) => code.codeValue || code.code_value)}
|
||||
items={visibleCodes.map((code) => code.codeValue || code.code_value)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
{filteredCodes.map((code, index) => (
|
||||
<SortableCodeItem
|
||||
key={`${code.codeValue || code.code_value}-${index}`}
|
||||
code={code}
|
||||
categoryCode={categoryCode}
|
||||
onEdit={() => handleEditCode(code)}
|
||||
onDelete={() => handleDeleteCode(code)}
|
||||
/>
|
||||
))}
|
||||
{visibleCodes.map((code, index) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const children = childrenMap.get(codeValue) || [];
|
||||
const hasChildren = children.length > 0;
|
||||
const isExpanded = !collapsedCodes.has(codeValue);
|
||||
|
||||
return (
|
||||
<SortableCodeItem
|
||||
key={`${codeValue}-${index}`}
|
||||
code={code}
|
||||
categoryCode={categoryCode}
|
||||
onEdit={() => handleEditCode(code)}
|
||||
onDelete={() => handleDeleteCode(code)}
|
||||
onAddChild={() => handleAddChild(code)}
|
||||
hasChildren={hasChildren}
|
||||
childCount={children.length}
|
||||
isExpanded={isExpanded}
|
||||
onToggleExpand={() => toggleExpand(codeValue)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</SortableContext>
|
||||
|
||||
<DragOverlay dropAnimation={null}>
|
||||
{dragAndDrop.activeItem ? (
|
||||
<div className="cursor-grabbing rounded-lg border bg-card p-4 shadow-lg">
|
||||
<div className="bg-card cursor-grabbing rounded-lg border p-4 shadow-lg">
|
||||
{(() => {
|
||||
const activeCode = dragAndDrop.activeItem;
|
||||
if (!activeCode) return null;
|
||||
|
|
@ -204,24 +334,20 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="text-sm font-semibold">
|
||||
{activeCode.codeName || activeCode.code_name}
|
||||
</h4>
|
||||
<h4 className="text-sm font-semibold">{activeCode.codeName || activeCode.code_name}</h4>
|
||||
<Badge
|
||||
variant={
|
||||
activeCode.isActive === "Y" || activeCode.is_active === "Y"
|
||||
? "default"
|
||||
: "secondary"
|
||||
activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "default" : "secondary"
|
||||
}
|
||||
>
|
||||
{activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
<p className="text-muted-foreground mt-1 text-xs">
|
||||
{activeCode.codeValue || activeCode.code_value}
|
||||
</p>
|
||||
{activeCode.description && (
|
||||
<p className="mt-1 text-xs text-muted-foreground">{activeCode.description}</p>
|
||||
<p className="text-muted-foreground mt-1 text-xs">{activeCode.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -236,13 +362,13 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
{isFetchingNextPage && (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<LoadingSpinner size="sm" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">코드를 더 불러오는 중...</span>
|
||||
<span className="text-muted-foreground ml-2 text-sm">코드를 더 불러오는 중...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 모든 코드 로드 완료 메시지 */}
|
||||
{!hasNextPage && codes.length > 0 && (
|
||||
<div className="py-4 text-center text-sm text-muted-foreground">모든 코드를 불러왔습니다.</div>
|
||||
<div className="text-muted-foreground py-4 text-center text-sm">모든 코드를 불러왔습니다.</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
@ -255,10 +381,12 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
onClose={() => {
|
||||
setShowFormModal(false);
|
||||
setEditingCode(null);
|
||||
setDefaultParentCode(undefined);
|
||||
}}
|
||||
categoryCode={categoryCode}
|
||||
editingCode={editingCode}
|
||||
codes={codes}
|
||||
defaultParentCode={defaultParentCode}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ interface CodeFormModalProps {
|
|||
categoryCode: string;
|
||||
editingCode?: CodeInfo | null;
|
||||
codes: CodeInfo[];
|
||||
defaultParentCode?: string; // 하위 코드 추가 시 기본 부모 코드
|
||||
}
|
||||
|
||||
// 에러 메시지를 안전하게 문자열로 변환하는 헬퍼 함수
|
||||
|
|
@ -33,28 +34,32 @@ const getErrorMessage = (error: FieldError | undefined): string => {
|
|||
return error.message || "";
|
||||
};
|
||||
|
||||
export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, codes }: CodeFormModalProps) {
|
||||
// 코드값 자동 생성 함수 (UUID 기반 짧은 코드)
|
||||
const generateCodeValue = (): string => {
|
||||
const timestamp = Date.now().toString(36).toUpperCase();
|
||||
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
|
||||
return `${timestamp}${random}`;
|
||||
};
|
||||
|
||||
export function CodeFormModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
categoryCode,
|
||||
editingCode,
|
||||
codes,
|
||||
defaultParentCode,
|
||||
}: CodeFormModalProps) {
|
||||
const createCodeMutation = useCreateCode();
|
||||
const updateCodeMutation = useUpdateCode();
|
||||
|
||||
const isEditing = !!editingCode;
|
||||
|
||||
// 검증 상태 관리
|
||||
// 검증 상태 관리 (코드명만 중복 검사)
|
||||
const [validationStates, setValidationStates] = useState({
|
||||
codeValue: { enabled: false, value: "" },
|
||||
codeName: { enabled: false, value: "" },
|
||||
codeNameEng: { enabled: false, value: "" },
|
||||
});
|
||||
|
||||
// 중복 검사 훅들
|
||||
const codeValueCheck = useCheckCodeDuplicate(
|
||||
categoryCode,
|
||||
"codeValue",
|
||||
validationStates.codeValue.value,
|
||||
isEditing ? editingCode?.codeValue || editingCode?.code_value : undefined,
|
||||
validationStates.codeValue.enabled,
|
||||
);
|
||||
|
||||
// 코드명 중복 검사
|
||||
const codeNameCheck = useCheckCodeDuplicate(
|
||||
categoryCode,
|
||||
"codeName",
|
||||
|
|
@ -63,22 +68,11 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
validationStates.codeName.enabled,
|
||||
);
|
||||
|
||||
const codeNameEngCheck = useCheckCodeDuplicate(
|
||||
categoryCode,
|
||||
"codeNameEng",
|
||||
validationStates.codeNameEng.value,
|
||||
isEditing ? editingCode?.codeValue || editingCode?.code_value : undefined,
|
||||
validationStates.codeNameEng.enabled,
|
||||
);
|
||||
|
||||
// 중복 검사 결과 확인
|
||||
const hasDuplicateErrors =
|
||||
(codeValueCheck.data?.isDuplicate && validationStates.codeValue.enabled) ||
|
||||
(codeNameCheck.data?.isDuplicate && validationStates.codeName.enabled) ||
|
||||
(codeNameEngCheck.data?.isDuplicate && validationStates.codeNameEng.enabled);
|
||||
const hasDuplicateErrors = codeNameCheck.data?.isDuplicate && validationStates.codeName.enabled;
|
||||
|
||||
// 중복 검사 로딩 중인지 확인
|
||||
const isDuplicateChecking = codeValueCheck.isLoading || codeNameCheck.isLoading || codeNameEngCheck.isLoading;
|
||||
const isDuplicateChecking = codeNameCheck.isLoading;
|
||||
|
||||
// 폼 스키마 선택 (생성/수정에 따라)
|
||||
const schema = isEditing ? updateCodeSchema : createCodeSchema;
|
||||
|
|
@ -92,6 +86,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
codeNameEng: "",
|
||||
description: "",
|
||||
sortOrder: 1,
|
||||
parentCodeValue: "" as string | undefined,
|
||||
...(isEditing && { isActive: "Y" as const }),
|
||||
},
|
||||
});
|
||||
|
|
@ -101,30 +96,40 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
if (isOpen) {
|
||||
if (isEditing && editingCode) {
|
||||
// 수정 모드: 기존 데이터 로드 (codeValue는 표시용으로만 설정)
|
||||
const parentValue = editingCode.parentCodeValue || editingCode.parent_code_value || "";
|
||||
|
||||
form.reset({
|
||||
codeName: editingCode.codeName || editingCode.code_name,
|
||||
codeNameEng: editingCode.codeNameEng || editingCode.code_name_eng || "",
|
||||
description: editingCode.description || "",
|
||||
sortOrder: editingCode.sortOrder || editingCode.sort_order,
|
||||
isActive: (editingCode.isActive || editingCode.is_active) as "Y" | "N", // 타입 캐스팅
|
||||
isActive: (editingCode.isActive || editingCode.is_active) as "Y" | "N",
|
||||
parentCodeValue: parentValue,
|
||||
});
|
||||
|
||||
// codeValue는 별도로 설정 (표시용)
|
||||
form.setValue("codeValue" as any, editingCode.codeValue || editingCode.code_value);
|
||||
} else {
|
||||
// 새 코드 모드: 자동 순서 계산
|
||||
const maxSortOrder = codes.length > 0 ? Math.max(...codes.map((c) => c.sortOrder || c.sort_order)) : 0;
|
||||
const maxSortOrder = codes.length > 0 ? Math.max(...codes.map((c) => c.sortOrder || c.sort_order || 0)) : 0;
|
||||
|
||||
// 기본 부모 코드가 있으면 설정 (하위 코드 추가 시)
|
||||
const parentValue = defaultParentCode || "";
|
||||
|
||||
// 코드값 자동 생성
|
||||
const autoCodeValue = generateCodeValue();
|
||||
|
||||
form.reset({
|
||||
codeValue: "",
|
||||
codeValue: autoCodeValue,
|
||||
codeName: "",
|
||||
codeNameEng: "",
|
||||
description: "",
|
||||
sortOrder: maxSortOrder + 1,
|
||||
parentCodeValue: parentValue,
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [isOpen, isEditing, editingCode, codes]);
|
||||
}, [isOpen, isEditing, editingCode, codes, defaultParentCode]);
|
||||
|
||||
const handleSubmit = form.handleSubmit(async (data) => {
|
||||
try {
|
||||
|
|
@ -132,7 +137,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
// 수정
|
||||
await updateCodeMutation.mutateAsync({
|
||||
categoryCode,
|
||||
codeValue: editingCode.codeValue || editingCode.code_value,
|
||||
codeValue: editingCode.codeValue || editingCode.code_value || "",
|
||||
data: data as UpdateCodeData,
|
||||
});
|
||||
} else {
|
||||
|
|
@ -156,50 +161,38 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">{isEditing ? "코드 수정" : "새 코드"}</DialogTitle>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{isEditing ? "코드 수정" : defaultParentCode ? "하위 코드 추가" : "새 코드"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4">
|
||||
{/* 코드값 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="codeValue" className="text-xs sm:text-sm">코드값 *</Label>
|
||||
<Input
|
||||
id="codeValue"
|
||||
{...form.register("codeValue")}
|
||||
disabled={isLoading || isEditing}
|
||||
placeholder="코드값을 입력하세요"
|
||||
className={(form.formState.errors as any)?.codeValue ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
|
||||
onBlur={(e) => {
|
||||
const value = e.target.value.trim();
|
||||
if (value && !isEditing) {
|
||||
setValidationStates((prev) => ({
|
||||
...prev,
|
||||
codeValue: { enabled: true, value },
|
||||
}));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{(form.formState.errors as any)?.codeValue && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage((form.formState.errors as any)?.codeValue)}</p>
|
||||
)}
|
||||
{!isEditing && !(form.formState.errors as any)?.codeValue && (
|
||||
<ValidationMessage
|
||||
message={codeValueCheck.data?.message}
|
||||
isValid={!codeValueCheck.data?.isDuplicate}
|
||||
isLoading={codeValueCheck.isLoading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* 코드값 (자동 생성, 수정 시에만 표시) */}
|
||||
{isEditing && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs sm:text-sm">코드값</Label>
|
||||
<div className="bg-muted h-8 rounded-md border px-3 py-1.5 text-xs sm:h-10 sm:py-2 sm:text-sm">
|
||||
{form.watch("codeValue")}
|
||||
</div>
|
||||
<p className="text-muted-foreground text-[10px] sm:text-xs">코드값은 변경할 수 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 코드명 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="codeName" className="text-xs sm:text-sm">코드명 *</Label>
|
||||
<Label htmlFor="codeName" className="text-xs sm:text-sm">
|
||||
코드명 *
|
||||
</Label>
|
||||
<Input
|
||||
id="codeName"
|
||||
{...form.register("codeName")}
|
||||
disabled={isLoading}
|
||||
placeholder="코드명을 입력하세요"
|
||||
className={form.formState.errors.codeName ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
|
||||
className={
|
||||
form.formState.errors.codeName
|
||||
? "border-destructive h-8 text-xs sm:h-10 sm:text-sm"
|
||||
: "h-8 text-xs sm:h-10 sm:text-sm"
|
||||
}
|
||||
onBlur={(e) => {
|
||||
const value = e.target.value.trim();
|
||||
if (value) {
|
||||
|
|
@ -211,7 +204,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
}}
|
||||
/>
|
||||
{form.formState.errors.codeName && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeName)}</p>
|
||||
<p className="text-destructive text-[10px] sm:text-xs">
|
||||
{getErrorMessage(form.formState.errors.codeName)}
|
||||
</p>
|
||||
)}
|
||||
{!form.formState.errors.codeName && (
|
||||
<ValidationMessage
|
||||
|
|
@ -222,66 +217,72 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* 영문명 */}
|
||||
{/* 영문명 (선택) */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="codeNameEng" className="text-xs sm:text-sm">코드 영문명 *</Label>
|
||||
<Label htmlFor="codeNameEng" className="text-xs sm:text-sm">
|
||||
코드 영문명
|
||||
</Label>
|
||||
<Input
|
||||
id="codeNameEng"
|
||||
{...form.register("codeNameEng")}
|
||||
disabled={isLoading}
|
||||
placeholder="코드 영문명을 입력하세요"
|
||||
className={form.formState.errors.codeNameEng ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
|
||||
onBlur={(e) => {
|
||||
const value = e.target.value.trim();
|
||||
if (value) {
|
||||
setValidationStates((prev) => ({
|
||||
...prev,
|
||||
codeNameEng: { enabled: true, value },
|
||||
}));
|
||||
}
|
||||
}}
|
||||
placeholder="코드 영문명을 입력하세요 (선택사항)"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
{form.formState.errors.codeNameEng && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeNameEng)}</p>
|
||||
)}
|
||||
{!form.formState.errors.codeNameEng && (
|
||||
<ValidationMessage
|
||||
message={codeNameEngCheck.data?.message}
|
||||
isValid={!codeNameEngCheck.data?.isDuplicate}
|
||||
isLoading={codeNameEngCheck.isLoading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 설명 */}
|
||||
{/* 설명 (선택) */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description" className="text-xs sm:text-sm">설명 *</Label>
|
||||
<Label htmlFor="description" className="text-xs sm:text-sm">
|
||||
설명
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
{...form.register("description")}
|
||||
disabled={isLoading}
|
||||
placeholder="설명을 입력하세요"
|
||||
rows={3}
|
||||
className={form.formState.errors.description ? "text-xs sm:text-sm border-destructive" : "text-xs sm:text-sm"}
|
||||
placeholder="설명을 입력하세요 (선택사항)"
|
||||
rows={2}
|
||||
className="text-xs sm:text-sm"
|
||||
/>
|
||||
{form.formState.errors.description && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.description)}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 부모 코드 표시 (하위 코드 추가 시에만 표시, 읽기 전용) */}
|
||||
{defaultParentCode && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs sm:text-sm">상위 코드</Label>
|
||||
<div className="bg-muted h-8 rounded-md border px-3 py-1.5 text-xs sm:h-10 sm:py-2 sm:text-sm">
|
||||
{(() => {
|
||||
const parentCode = codes.find((c) => (c.codeValue || c.code_value) === defaultParentCode);
|
||||
return parentCode
|
||||
? `${parentCode.codeName || parentCode.code_name} (${defaultParentCode})`
|
||||
: defaultParentCode;
|
||||
})()}
|
||||
</div>
|
||||
<p className="text-muted-foreground text-[10px] sm:text-xs">이 코드는 위 코드의 하위로 추가됩니다</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 정렬 순서 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="sortOrder" className="text-xs sm:text-sm">정렬 순서</Label>
|
||||
<Label htmlFor="sortOrder" className="text-xs sm:text-sm">
|
||||
정렬 순서
|
||||
</Label>
|
||||
<Input
|
||||
id="sortOrder"
|
||||
type="number"
|
||||
{...form.register("sortOrder", { valueAsNumber: true })}
|
||||
disabled={isLoading}
|
||||
min={1}
|
||||
className={form.formState.errors.sortOrder ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
|
||||
className={
|
||||
form.formState.errors.sortOrder
|
||||
? "border-destructive h-8 text-xs sm:h-10 sm:text-sm"
|
||||
: "h-8 text-xs sm:h-10 sm:text-sm"
|
||||
}
|
||||
/>
|
||||
{form.formState.errors.sortOrder && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.sortOrder)}</p>
|
||||
<p className="text-destructive text-[10px] sm:text-xs">
|
||||
{getErrorMessage(form.formState.errors.sortOrder)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -295,16 +296,18 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
disabled={isLoading}
|
||||
aria-label="활성 상태"
|
||||
/>
|
||||
<Label htmlFor="isActive" className="text-xs sm:text-sm">{form.watch("isActive") === "Y" ? "활성" : "비활성"}</Label>
|
||||
<Label htmlFor="isActive" className="text-xs sm:text-sm">
|
||||
{form.watch("isActive") === "Y" ? "활성" : "비활성"}
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 버튼 */}
|
||||
<div className="flex gap-2 pt-4 sm:justify-end sm:gap-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={isLoading}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useSortable } from "@dnd-kit/sortable";
|
|||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Edit, Trash2 } from "lucide-react";
|
||||
import { Edit, Trash2, CornerDownRight, Plus, ChevronRight, ChevronDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useUpdateCode } from "@/hooks/queries/useCodes";
|
||||
import type { CodeInfo } from "@/types/commonCode";
|
||||
|
|
@ -15,7 +15,13 @@ interface SortableCodeItemProps {
|
|||
categoryCode: string;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
onAddChild: () => void; // 하위 코드 추가
|
||||
isDragOverlay?: boolean;
|
||||
maxDepth?: number; // 최대 깊이 (기본값 3)
|
||||
hasChildren?: boolean; // 자식이 있는지 여부
|
||||
childCount?: number; // 자식 개수
|
||||
isExpanded?: boolean; // 펼쳐진 상태
|
||||
onToggleExpand?: () => void; // 접기/펼치기 토글
|
||||
}
|
||||
|
||||
export function SortableCodeItem({
|
||||
|
|
@ -23,10 +29,16 @@ export function SortableCodeItem({
|
|||
categoryCode,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onAddChild,
|
||||
isDragOverlay = false,
|
||||
maxDepth = 3,
|
||||
hasChildren = false,
|
||||
childCount = 0,
|
||||
isExpanded = true,
|
||||
onToggleExpand,
|
||||
}: SortableCodeItemProps) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: code.codeValue || code.code_value,
|
||||
id: code.codeValue || code.code_value || "",
|
||||
disabled: isDragOverlay,
|
||||
});
|
||||
const updateCodeMutation = useUpdateCode();
|
||||
|
|
@ -39,7 +51,6 @@ export function SortableCodeItem({
|
|||
// 활성/비활성 토글 핸들러
|
||||
const handleToggleActive = async (checked: boolean) => {
|
||||
try {
|
||||
// codeValue 또는 code_value가 없으면 에러 처리
|
||||
const codeValue = code.codeValue || code.code_value;
|
||||
if (!codeValue) {
|
||||
return;
|
||||
|
|
@ -61,73 +72,158 @@ export function SortableCodeItem({
|
|||
}
|
||||
};
|
||||
|
||||
// 계층구조 깊이에 따른 들여쓰기
|
||||
const depth = code.depth || 1;
|
||||
const indentLevel = (depth - 1) * 28; // 28px per level
|
||||
const hasParent = !!(code.parentCodeValue || code.parent_code_value);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className={cn(
|
||||
"group cursor-grab rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md",
|
||||
isDragging && "cursor-grabbing opacity-50",
|
||||
<div className="flex items-stretch">
|
||||
{/* 계층구조 들여쓰기 영역 */}
|
||||
{depth > 1 && (
|
||||
<div
|
||||
className="flex items-center justify-end pr-2"
|
||||
style={{ width: `${indentLevel}px`, minWidth: `${indentLevel}px` }}
|
||||
>
|
||||
<CornerDownRight className="text-muted-foreground/50 h-4 w-4" />
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="text-sm font-semibold">{code.codeName || code.code_name}</h4>
|
||||
<Badge
|
||||
variant={code.isActive === "Y" || code.is_active === "Y" ? "default" : "secondary"}
|
||||
className={cn(
|
||||
"cursor-pointer text-xs transition-colors",
|
||||
updateCodeMutation.isPending && "cursor-not-allowed opacity-50",
|
||||
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className={cn(
|
||||
"group bg-card flex-1 cursor-grab rounded-lg border p-4 shadow-sm transition-all hover:shadow-md",
|
||||
isDragging && "cursor-grabbing opacity-50",
|
||||
depth === 1 && "border-l-primary border-l-4",
|
||||
depth === 2 && "border-l-4 border-l-blue-400",
|
||||
depth === 3 && "border-l-4 border-l-green-400",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* 접기/펼치기 버튼 (자식이 있을 때만 표시) */}
|
||||
{hasChildren && onToggleExpand && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onToggleExpand();
|
||||
}}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-gray-100"
|
||||
title={isExpanded ? "접기" : "펼치기"}
|
||||
>
|
||||
{isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</button>
|
||||
)}
|
||||
<h4 className="text-sm font-semibold">{code.codeName || code.code_name}</h4>
|
||||
{/* 접힌 상태에서 자식 개수 표시 */}
|
||||
{hasChildren && !isExpanded && <span className="text-muted-foreground text-[10px]">({childCount})</span>}
|
||||
{/* 깊이 표시 배지 */}
|
||||
{depth === 1 && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-primary/30 bg-primary/10 text-primary px-1.5 py-0 text-[10px]"
|
||||
>
|
||||
대분류
|
||||
</Badge>
|
||||
)}
|
||||
{depth === 2 && (
|
||||
<Badge variant="outline" className="bg-blue-50 px-1.5 py-0 text-[10px] text-blue-600">
|
||||
중분류
|
||||
</Badge>
|
||||
)}
|
||||
{depth === 3 && (
|
||||
<Badge variant="outline" className="bg-green-50 px-1.5 py-0 text-[10px] text-green-600">
|
||||
소분류
|
||||
</Badge>
|
||||
)}
|
||||
{depth > 3 && (
|
||||
<Badge variant="outline" className="bg-muted px-1.5 py-0 text-[10px]">
|
||||
{depth}단계
|
||||
</Badge>
|
||||
)}
|
||||
<Badge
|
||||
variant={code.isActive === "Y" || code.is_active === "Y" ? "default" : "secondary"}
|
||||
className={cn(
|
||||
"cursor-pointer text-xs transition-colors",
|
||||
updateCodeMutation.isPending && "cursor-not-allowed opacity-50",
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!updateCodeMutation.isPending) {
|
||||
const isActive = code.isActive === "Y" || code.is_active === "Y";
|
||||
handleToggleActive(!isActive);
|
||||
}
|
||||
}}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
{code.isActive === "Y" || code.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-1 text-xs">{code.codeValue || code.code_value}</p>
|
||||
{/* 부모 코드 표시 */}
|
||||
{hasParent && (
|
||||
<p className="text-muted-foreground mt-0.5 text-[10px]">
|
||||
상위: {code.parentCodeValue || code.parent_code_value}
|
||||
</p>
|
||||
)}
|
||||
{code.description && <p className="text-muted-foreground mt-1 text-xs">{code.description}</p>}
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div
|
||||
className="flex items-center gap-1"
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 하위 코드 추가 버튼 (최대 깊이 미만일 때만 표시) */}
|
||||
{depth < maxDepth && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onAddChild();
|
||||
}}
|
||||
title="하위 코드 추가"
|
||||
className="text-blue-600 hover:bg-blue-50 hover:text-blue-700"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!updateCodeMutation.isPending) {
|
||||
const isActive = code.isActive === "Y" || code.is_active === "Y";
|
||||
handleToggleActive(!isActive);
|
||||
}
|
||||
onEdit();
|
||||
}}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
{code.isActive === "Y" || code.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{code.codeValue || code.code_value}</p>
|
||||
{code.description && <p className="mt-1 text-xs text-muted-foreground">{code.description}</p>}
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div
|
||||
className="flex items-center gap-1"
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
}}
|
||||
>
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,457 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* 계층구조 코드 선택 컴포넌트 (1단계, 2단계, 3단계 셀렉트박스)
|
||||
*
|
||||
* @example
|
||||
* // 기본 사용
|
||||
* <HierarchicalCodeSelect
|
||||
* categoryCode="PRODUCT_CATEGORY"
|
||||
* maxDepth={3}
|
||||
* value={selectedCode}
|
||||
* onChange={(code) => setSelectedCode(code)}
|
||||
* />
|
||||
*
|
||||
* @example
|
||||
* // 특정 depth까지만 선택
|
||||
* <HierarchicalCodeSelect
|
||||
* categoryCode="LOCATION"
|
||||
* maxDepth={2}
|
||||
* value={selectedCode}
|
||||
* onChange={(code) => setSelectedCode(code)}
|
||||
* />
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { commonCodeApi } from "@/lib/api/commonCode";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import type { CodeInfo } from "@/types/commonCode";
|
||||
|
||||
export interface HierarchicalCodeSelectProps {
|
||||
/** 코드 카테고리 */
|
||||
categoryCode: string;
|
||||
|
||||
/** 최대 깊이 (1, 2, 3) */
|
||||
maxDepth?: 1 | 2 | 3;
|
||||
|
||||
/** 현재 선택된 값 (최종 선택된 코드값) */
|
||||
value?: string;
|
||||
|
||||
/** 값 변경 핸들러 */
|
||||
onChange?: (codeValue: string, codeInfo?: CodeInfo, fullPath?: CodeInfo[]) => void;
|
||||
|
||||
/** 각 단계별 라벨 */
|
||||
labels?: [string, string?, string?];
|
||||
|
||||
/** 각 단계별 placeholder */
|
||||
placeholders?: [string, string?, string?];
|
||||
|
||||
/** 비활성화 */
|
||||
disabled?: boolean;
|
||||
|
||||
/** 필수 입력 */
|
||||
required?: boolean;
|
||||
|
||||
/** 메뉴 OBJID (메뉴 기반 필터링) */
|
||||
menuObjid?: number;
|
||||
|
||||
/** 추가 클래스 */
|
||||
className?: string;
|
||||
|
||||
/** 인라인 표시 (가로 배열) */
|
||||
inline?: boolean;
|
||||
}
|
||||
|
||||
interface LoadingState {
|
||||
level1: boolean;
|
||||
level2: boolean;
|
||||
level3: boolean;
|
||||
}
|
||||
|
||||
export function HierarchicalCodeSelect({
|
||||
categoryCode,
|
||||
maxDepth = 3,
|
||||
value,
|
||||
onChange,
|
||||
labels = ["1단계", "2단계", "3단계"],
|
||||
placeholders = ["선택하세요", "선택하세요", "선택하세요"],
|
||||
disabled = false,
|
||||
required = false,
|
||||
menuObjid,
|
||||
className = "",
|
||||
inline = false,
|
||||
}: HierarchicalCodeSelectProps) {
|
||||
// 각 단계별 옵션
|
||||
const [level1Options, setLevel1Options] = useState<CodeInfo[]>([]);
|
||||
const [level2Options, setLevel2Options] = useState<CodeInfo[]>([]);
|
||||
const [level3Options, setLevel3Options] = useState<CodeInfo[]>([]);
|
||||
|
||||
// 각 단계별 선택값
|
||||
const [selectedLevel1, setSelectedLevel1] = useState<string>("");
|
||||
const [selectedLevel2, setSelectedLevel2] = useState<string>("");
|
||||
const [selectedLevel3, setSelectedLevel3] = useState<string>("");
|
||||
|
||||
// 로딩 상태
|
||||
const [loading, setLoading] = useState<LoadingState>({
|
||||
level1: false,
|
||||
level2: false,
|
||||
level3: false,
|
||||
});
|
||||
|
||||
// 모든 코드 데이터 (경로 추적용)
|
||||
const [allCodes, setAllCodes] = useState<CodeInfo[]>([]);
|
||||
|
||||
// 1단계 코드 로드 (최상위)
|
||||
const loadLevel1Codes = useCallback(async () => {
|
||||
if (!categoryCode) return;
|
||||
|
||||
setLoading(prev => ({ ...prev, level1: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
null, // 부모 없음 (최상위)
|
||||
1, // depth = 1
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setLevel1Options(response.data);
|
||||
setAllCodes(prev => {
|
||||
const filtered = prev.filter(c => c.depth !== 1);
|
||||
return [...filtered, ...response.data];
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("1단계 코드 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, level1: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 2단계 코드 로드 (1단계 선택값 기준)
|
||||
const loadLevel2Codes = useCallback(async (parentCodeValue: string) => {
|
||||
if (!categoryCode || !parentCodeValue) {
|
||||
setLevel2Options([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(prev => ({ ...prev, level2: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentCodeValue,
|
||||
undefined,
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setLevel2Options(response.data);
|
||||
setAllCodes(prev => {
|
||||
const filtered = prev.filter(c => c.depth !== 2 || (c.parentCodeValue || c.parent_code_value) !== parentCodeValue);
|
||||
return [...filtered, ...response.data];
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("2단계 코드 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, level2: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 3단계 코드 로드 (2단계 선택값 기준)
|
||||
const loadLevel3Codes = useCallback(async (parentCodeValue: string) => {
|
||||
if (!categoryCode || !parentCodeValue) {
|
||||
setLevel3Options([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(prev => ({ ...prev, level3: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentCodeValue,
|
||||
undefined,
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setLevel3Options(response.data);
|
||||
setAllCodes(prev => {
|
||||
const filtered = prev.filter(c => c.depth !== 3 || (c.parentCodeValue || c.parent_code_value) !== parentCodeValue);
|
||||
return [...filtered, ...response.data];
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("3단계 코드 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, level3: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 초기 로드 및 카테고리 변경 시
|
||||
useEffect(() => {
|
||||
loadLevel1Codes();
|
||||
setSelectedLevel1("");
|
||||
setSelectedLevel2("");
|
||||
setSelectedLevel3("");
|
||||
setLevel2Options([]);
|
||||
setLevel3Options([]);
|
||||
}, [loadLevel1Codes]);
|
||||
|
||||
// value prop 변경 시 역추적 (외부에서 값이 설정된 경우)
|
||||
useEffect(() => {
|
||||
if (!value || allCodes.length === 0) return;
|
||||
|
||||
// 선택된 코드 찾기
|
||||
const selectedCode = allCodes.find(c =>
|
||||
(c.codeValue || c.code_value) === value
|
||||
);
|
||||
|
||||
if (!selectedCode) return;
|
||||
|
||||
const depth = selectedCode.depth || 1;
|
||||
|
||||
if (depth === 1) {
|
||||
setSelectedLevel1(value);
|
||||
setSelectedLevel2("");
|
||||
setSelectedLevel3("");
|
||||
} else if (depth === 2) {
|
||||
const parentValue = selectedCode.parentCodeValue || selectedCode.parent_code_value || "";
|
||||
setSelectedLevel1(parentValue);
|
||||
setSelectedLevel2(value);
|
||||
setSelectedLevel3("");
|
||||
loadLevel2Codes(parentValue);
|
||||
} else if (depth === 3) {
|
||||
const parentValue = selectedCode.parentCodeValue || selectedCode.parent_code_value || "";
|
||||
|
||||
// 2단계 부모 찾기
|
||||
const level2Code = allCodes.find(c => (c.codeValue || c.code_value) === parentValue);
|
||||
const level1Value = level2Code?.parentCodeValue || level2Code?.parent_code_value || "";
|
||||
|
||||
setSelectedLevel1(level1Value);
|
||||
setSelectedLevel2(parentValue);
|
||||
setSelectedLevel3(value);
|
||||
|
||||
loadLevel2Codes(level1Value);
|
||||
loadLevel3Codes(parentValue);
|
||||
}
|
||||
}, [value, allCodes]);
|
||||
|
||||
// 1단계 선택 변경
|
||||
const handleLevel1Change = (codeValue: string) => {
|
||||
setSelectedLevel1(codeValue);
|
||||
setSelectedLevel2("");
|
||||
setSelectedLevel3("");
|
||||
setLevel2Options([]);
|
||||
setLevel3Options([]);
|
||||
|
||||
if (codeValue && maxDepth > 1) {
|
||||
loadLevel2Codes(codeValue);
|
||||
}
|
||||
|
||||
// 최대 깊이가 1이면 즉시 onChange 호출
|
||||
if (maxDepth === 1 && onChange) {
|
||||
const selectedCodeInfo = level1Options.find(c => (c.codeValue || c.code_value) === codeValue);
|
||||
onChange(codeValue, selectedCodeInfo, selectedCodeInfo ? [selectedCodeInfo] : []);
|
||||
}
|
||||
};
|
||||
|
||||
// 2단계 선택 변경
|
||||
const handleLevel2Change = (codeValue: string) => {
|
||||
setSelectedLevel2(codeValue);
|
||||
setSelectedLevel3("");
|
||||
setLevel3Options([]);
|
||||
|
||||
if (codeValue && maxDepth > 2) {
|
||||
loadLevel3Codes(codeValue);
|
||||
}
|
||||
|
||||
// 최대 깊이가 2이면 onChange 호출
|
||||
if (maxDepth === 2 && onChange) {
|
||||
const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
|
||||
const level2Code = level2Options.find(c => (c.codeValue || c.code_value) === codeValue);
|
||||
const fullPath = [level1Code, level2Code].filter(Boolean) as CodeInfo[];
|
||||
onChange(codeValue, level2Code, fullPath);
|
||||
}
|
||||
};
|
||||
|
||||
// 3단계 선택 변경
|
||||
const handleLevel3Change = (codeValue: string) => {
|
||||
setSelectedLevel3(codeValue);
|
||||
|
||||
if (onChange) {
|
||||
const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
|
||||
const level2Code = level2Options.find(c => (c.codeValue || c.code_value) === selectedLevel2);
|
||||
const level3Code = level3Options.find(c => (c.codeValue || c.code_value) === codeValue);
|
||||
const fullPath = [level1Code, level2Code, level3Code].filter(Boolean) as CodeInfo[];
|
||||
onChange(codeValue, level3Code, fullPath);
|
||||
}
|
||||
};
|
||||
|
||||
// 최종 선택값 계산
|
||||
const finalValue = useMemo(() => {
|
||||
if (maxDepth >= 3 && selectedLevel3) return selectedLevel3;
|
||||
if (maxDepth >= 2 && selectedLevel2) return selectedLevel2;
|
||||
if (selectedLevel1) return selectedLevel1;
|
||||
return "";
|
||||
}, [maxDepth, selectedLevel1, selectedLevel2, selectedLevel3]);
|
||||
|
||||
// 최종 선택값이 변경되면 onChange 호출 (maxDepth 제한 없이)
|
||||
useEffect(() => {
|
||||
if (!onChange) return;
|
||||
|
||||
// 현재 선택된 깊이 확인
|
||||
if (selectedLevel3 && maxDepth >= 3) {
|
||||
// 3단계까지 선택됨
|
||||
return; // handleLevel3Change에서 처리
|
||||
}
|
||||
if (selectedLevel2 && maxDepth >= 2 && !selectedLevel3 && level3Options.length === 0) {
|
||||
// 2단계까지 선택되고 3단계 옵션이 없음
|
||||
const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
|
||||
const level2Code = level2Options.find(c => (c.codeValue || c.code_value) === selectedLevel2);
|
||||
const fullPath = [level1Code, level2Code].filter(Boolean) as CodeInfo[];
|
||||
onChange(selectedLevel2, level2Code, fullPath);
|
||||
} else if (selectedLevel1 && maxDepth >= 1 && !selectedLevel2 && level2Options.length === 0) {
|
||||
// 1단계까지 선택되고 2단계 옵션이 없음
|
||||
const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
|
||||
onChange(selectedLevel1, level1Code, level1Code ? [level1Code] : []);
|
||||
}
|
||||
}, [level2Options, level3Options]);
|
||||
|
||||
const containerClass = inline
|
||||
? "flex flex-wrap gap-4 items-end"
|
||||
: "space-y-4";
|
||||
|
||||
const selectItemClass = inline
|
||||
? "flex-1 min-w-[150px] space-y-1"
|
||||
: "space-y-1";
|
||||
|
||||
return (
|
||||
<div className={`${containerClass} ${className}`}>
|
||||
{/* 1단계 선택 */}
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{labels[0]}
|
||||
{required && <span className="ml-1 text-destructive">*</span>}
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedLevel1}
|
||||
onValueChange={handleLevel1Change}
|
||||
disabled={disabled || loading.level1}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.level1 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={placeholders[0]} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{level1Options.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 2단계 선택 */}
|
||||
{maxDepth >= 2 && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{labels[1] || "2단계"}
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedLevel2}
|
||||
onValueChange={handleLevel2Change}
|
||||
disabled={disabled || loading.level2 || !selectedLevel1}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.level2 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={selectedLevel1 ? (placeholders[1] || "선택하세요") : "1단계를 먼저 선택하세요"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{level2Options.length === 0 && selectedLevel1 && !loading.level2 ? (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||
하위 항목이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
level2Options.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 3단계 선택 */}
|
||||
{maxDepth >= 3 && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{labels[2] || "3단계"}
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedLevel3}
|
||||
onValueChange={handleLevel3Change}
|
||||
disabled={disabled || loading.level3 || !selectedLevel2}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.level3 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={selectedLevel2 ? (placeholders[2] || "선택하세요") : "2단계를 먼저 선택하세요"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{level3Options.length === 0 && selectedLevel2 && !loading.level3 ? (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||
하위 항목이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
level3Options.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HierarchicalCodeSelect;
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,389 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* 멀티 컬럼 계층구조 선택 컴포넌트
|
||||
*
|
||||
* 대분류, 중분류, 소분류를 각각 다른 컬럼에 저장하는 계층구조 선택 컴포넌트
|
||||
*
|
||||
* @example
|
||||
* <MultiColumnHierarchySelect
|
||||
* categoryCode="PRODUCT_CATEGORY"
|
||||
* columns={{
|
||||
* large: { columnName: "category_large", label: "대분류" },
|
||||
* medium: { columnName: "category_medium", label: "중분류" },
|
||||
* small: { columnName: "category_small", label: "소분류" },
|
||||
* }}
|
||||
* values={{
|
||||
* large: formData.category_large,
|
||||
* medium: formData.category_medium,
|
||||
* small: formData.category_small,
|
||||
* }}
|
||||
* onChange={(role, columnName, value) => {
|
||||
* setFormData(prev => ({ ...prev, [columnName]: value }));
|
||||
* }}
|
||||
* />
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { commonCodeApi } from "@/lib/api/commonCode";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import type { CodeInfo } from "@/types/commonCode";
|
||||
|
||||
export type HierarchyRole = "large" | "medium" | "small";
|
||||
|
||||
export interface HierarchyColumnConfig {
|
||||
columnName: string;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export interface MultiColumnHierarchySelectProps {
|
||||
/** 코드 카테고리 */
|
||||
categoryCode: string;
|
||||
|
||||
/** 각 계층별 컬럼 설정 */
|
||||
columns: {
|
||||
large?: HierarchyColumnConfig;
|
||||
medium?: HierarchyColumnConfig;
|
||||
small?: HierarchyColumnConfig;
|
||||
};
|
||||
|
||||
/** 현재 값들 */
|
||||
values?: {
|
||||
large?: string;
|
||||
medium?: string;
|
||||
small?: string;
|
||||
};
|
||||
|
||||
/** 값 변경 핸들러 (역할, 컬럼명, 값) */
|
||||
onChange?: (role: HierarchyRole, columnName: string, value: string) => void;
|
||||
|
||||
/** 비활성화 */
|
||||
disabled?: boolean;
|
||||
|
||||
/** 메뉴 OBJID */
|
||||
menuObjid?: number;
|
||||
|
||||
/** 추가 클래스 */
|
||||
className?: string;
|
||||
|
||||
/** 인라인 표시 (가로 배열) */
|
||||
inline?: boolean;
|
||||
}
|
||||
|
||||
interface LoadingState {
|
||||
large: boolean;
|
||||
medium: boolean;
|
||||
small: boolean;
|
||||
}
|
||||
|
||||
export function MultiColumnHierarchySelect({
|
||||
categoryCode,
|
||||
columns,
|
||||
values = {},
|
||||
onChange,
|
||||
disabled = false,
|
||||
menuObjid,
|
||||
className = "",
|
||||
inline = false,
|
||||
}: MultiColumnHierarchySelectProps) {
|
||||
// 각 단계별 옵션
|
||||
const [largeOptions, setLargeOptions] = useState<CodeInfo[]>([]);
|
||||
const [mediumOptions, setMediumOptions] = useState<CodeInfo[]>([]);
|
||||
const [smallOptions, setSmallOptions] = useState<CodeInfo[]>([]);
|
||||
|
||||
// 로딩 상태
|
||||
const [loading, setLoading] = useState<LoadingState>({
|
||||
large: false,
|
||||
medium: false,
|
||||
small: false,
|
||||
});
|
||||
|
||||
// 대분류 로드 (depth = 1)
|
||||
const loadLargeOptions = useCallback(async () => {
|
||||
if (!categoryCode) return;
|
||||
|
||||
setLoading(prev => ({ ...prev, large: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
null, // 부모 없음
|
||||
1, // depth = 1
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setLargeOptions(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("대분류 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, large: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 중분류 로드 (대분류 선택 기준)
|
||||
const loadMediumOptions = useCallback(async (parentCodeValue: string) => {
|
||||
if (!categoryCode || !parentCodeValue) {
|
||||
setMediumOptions([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(prev => ({ ...prev, medium: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentCodeValue,
|
||||
undefined,
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setMediumOptions(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("중분류 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, medium: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 소분류 로드 (중분류 선택 기준)
|
||||
const loadSmallOptions = useCallback(async (parentCodeValue: string) => {
|
||||
if (!categoryCode || !parentCodeValue) {
|
||||
setSmallOptions([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(prev => ({ ...prev, small: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentCodeValue,
|
||||
undefined,
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setSmallOptions(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("소분류 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, small: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 초기 로드
|
||||
useEffect(() => {
|
||||
loadLargeOptions();
|
||||
}, [loadLargeOptions]);
|
||||
|
||||
// 대분류 값이 있으면 중분류 로드
|
||||
useEffect(() => {
|
||||
if (values.large) {
|
||||
loadMediumOptions(values.large);
|
||||
} else {
|
||||
setMediumOptions([]);
|
||||
setSmallOptions([]);
|
||||
}
|
||||
}, [values.large, loadMediumOptions]);
|
||||
|
||||
// 중분류 값이 있으면 소분류 로드
|
||||
useEffect(() => {
|
||||
if (values.medium) {
|
||||
loadSmallOptions(values.medium);
|
||||
} else {
|
||||
setSmallOptions([]);
|
||||
}
|
||||
}, [values.medium, loadSmallOptions]);
|
||||
|
||||
// 대분류 변경
|
||||
const handleLargeChange = (codeValue: string) => {
|
||||
const columnName = columns.large?.columnName || "";
|
||||
if (onChange && columnName) {
|
||||
onChange("large", columnName, codeValue);
|
||||
}
|
||||
|
||||
// 하위 값 초기화
|
||||
if (columns.medium?.columnName && onChange) {
|
||||
onChange("medium", columns.medium.columnName, "");
|
||||
}
|
||||
if (columns.small?.columnName && onChange) {
|
||||
onChange("small", columns.small.columnName, "");
|
||||
}
|
||||
};
|
||||
|
||||
// 중분류 변경
|
||||
const handleMediumChange = (codeValue: string) => {
|
||||
const columnName = columns.medium?.columnName || "";
|
||||
if (onChange && columnName) {
|
||||
onChange("medium", columnName, codeValue);
|
||||
}
|
||||
|
||||
// 하위 값 초기화
|
||||
if (columns.small?.columnName && onChange) {
|
||||
onChange("small", columns.small.columnName, "");
|
||||
}
|
||||
};
|
||||
|
||||
// 소분류 변경
|
||||
const handleSmallChange = (codeValue: string) => {
|
||||
const columnName = columns.small?.columnName || "";
|
||||
if (onChange && columnName) {
|
||||
onChange("small", columnName, codeValue);
|
||||
}
|
||||
};
|
||||
|
||||
const containerClass = inline
|
||||
? "flex flex-wrap gap-4 items-end"
|
||||
: "space-y-4";
|
||||
|
||||
const selectItemClass = inline
|
||||
? "flex-1 min-w-[150px] space-y-1"
|
||||
: "space-y-1";
|
||||
|
||||
// 설정된 컬럼만 렌더링
|
||||
const hasLarge = !!columns.large;
|
||||
const hasMedium = !!columns.medium;
|
||||
const hasSmall = !!columns.small;
|
||||
|
||||
return (
|
||||
<div className={`${containerClass} ${className}`}>
|
||||
{/* 대분류 */}
|
||||
{hasLarge && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{columns.large?.label || "대분류"}
|
||||
</Label>
|
||||
<Select
|
||||
value={values.large || ""}
|
||||
onValueChange={handleLargeChange}
|
||||
disabled={disabled || loading.large}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.large ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={columns.large?.placeholder || "대분류 선택"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{largeOptions.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 중분류 */}
|
||||
{hasMedium && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{columns.medium?.label || "중분류"}
|
||||
</Label>
|
||||
<Select
|
||||
value={values.medium || ""}
|
||||
onValueChange={handleMediumChange}
|
||||
disabled={disabled || loading.medium || !values.large}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.medium ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue
|
||||
placeholder={values.large
|
||||
? (columns.medium?.placeholder || "중분류 선택")
|
||||
: "대분류를 먼저 선택하세요"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{mediumOptions.length === 0 && values.large && !loading.medium ? (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||
하위 항목이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
mediumOptions.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 소분류 */}
|
||||
{hasSmall && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{columns.small?.label || "소분류"}
|
||||
</Label>
|
||||
<Select
|
||||
value={values.small || ""}
|
||||
onValueChange={handleSmallChange}
|
||||
disabled={disabled || loading.small || !values.medium}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.small ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue
|
||||
placeholder={values.medium
|
||||
? (columns.small?.placeholder || "소분류 선택")
|
||||
: "중분류를 먼저 선택하세요"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{smallOptions.length === 0 && values.medium && !loading.small ? (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||
하위 항목이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
smallOptions.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MultiColumnHierarchySelect;
|
||||
|
||||
|
|
@ -0,0 +1,488 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* UnifiedDate
|
||||
*
|
||||
* 통합 날짜/시간 컴포넌트
|
||||
* - date: 날짜 선택
|
||||
* - time: 시간 선택
|
||||
* - datetime: 날짜+시간 선택
|
||||
* - range 옵션: 범위 선택 (시작~종료)
|
||||
*/
|
||||
|
||||
import React, { forwardRef, useCallback, useMemo, useState } from "react";
|
||||
import { format, parse, isValid } from "date-fns";
|
||||
import { ko } from "date-fns/locale";
|
||||
import { Calendar as CalendarIcon, Clock } from "lucide-react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { UnifiedDateProps, UnifiedDateType } from "@/types/unified-components";
|
||||
|
||||
// 날짜 형식 매핑
|
||||
const DATE_FORMATS: Record<string, string> = {
|
||||
"YYYY-MM-DD": "yyyy-MM-dd",
|
||||
"YYYY/MM/DD": "yyyy/MM/dd",
|
||||
"DD-MM-YYYY": "dd-MM-yyyy",
|
||||
"DD/MM/YYYY": "dd/MM/yyyy",
|
||||
"MM-DD-YYYY": "MM-dd-yyyy",
|
||||
"MM/DD/YYYY": "MM/dd/yyyy",
|
||||
"YYYY-MM-DD HH:mm": "yyyy-MM-dd HH:mm",
|
||||
"YYYY-MM-DD HH:mm:ss": "yyyy-MM-dd HH:mm:ss",
|
||||
};
|
||||
|
||||
// 날짜 문자열 → Date 객체
|
||||
function parseDate(value: string | undefined, formatStr: string): Date | undefined {
|
||||
if (!value) return undefined;
|
||||
|
||||
const dateFnsFormat = DATE_FORMATS[formatStr] || formatStr;
|
||||
|
||||
try {
|
||||
// ISO 형식 먼저 시도
|
||||
const isoDate = new Date(value);
|
||||
if (isValid(isoDate)) return isoDate;
|
||||
|
||||
// 포맷에 맞게 파싱
|
||||
const parsed = parse(value, dateFnsFormat, new Date());
|
||||
return isValid(parsed) ? parsed : undefined;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// Date 객체 → 날짜 문자열
|
||||
function formatDate(date: Date | undefined, formatStr: string): string {
|
||||
if (!date || !isValid(date)) return "";
|
||||
const dateFnsFormat = DATE_FORMATS[formatStr] || formatStr;
|
||||
return format(date, dateFnsFormat);
|
||||
}
|
||||
|
||||
/**
|
||||
* 단일 날짜 선택 컴포넌트
|
||||
*/
|
||||
const SingleDatePicker = forwardRef<
|
||||
HTMLButtonElement,
|
||||
{
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
dateFormat: string;
|
||||
showToday?: boolean;
|
||||
minDate?: string;
|
||||
maxDate?: string;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{ value, onChange, dateFormat = "YYYY-MM-DD", showToday = true, minDate, maxDate, disabled, readonly, className },
|
||||
ref,
|
||||
) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const date = useMemo(() => parseDate(value, dateFormat), [value, dateFormat]);
|
||||
const minDateObj = useMemo(() => parseDate(minDate, dateFormat), [minDate, dateFormat]);
|
||||
const maxDateObj = useMemo(() => parseDate(maxDate, dateFormat), [maxDate, dateFormat]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(selectedDate: Date | undefined) => {
|
||||
if (selectedDate) {
|
||||
onChange?.(formatDate(selectedDate, dateFormat));
|
||||
setOpen(false);
|
||||
}
|
||||
},
|
||||
[dateFormat, onChange],
|
||||
);
|
||||
|
||||
const handleToday = useCallback(() => {
|
||||
onChange?.(formatDate(new Date(), dateFormat));
|
||||
setOpen(false);
|
||||
}, [dateFormat, onChange]);
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
onChange?.("");
|
||||
setOpen(false);
|
||||
}, [onChange]);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="outline"
|
||||
disabled={disabled || readonly}
|
||||
className={cn(
|
||||
"h-10 w-full justify-start text-left font-normal",
|
||||
!value && "text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{value || "날짜 선택"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={date}
|
||||
onSelect={handleSelect}
|
||||
initialFocus
|
||||
locale={ko}
|
||||
disabled={(date) => {
|
||||
if (minDateObj && date < minDateObj) return true;
|
||||
if (maxDateObj && date > maxDateObj) return true;
|
||||
return false;
|
||||
}}
|
||||
/>
|
||||
<div className="flex gap-2 p-3 pt-0">
|
||||
{showToday && (
|
||||
<Button variant="outline" size="sm" onClick={handleToday}>
|
||||
오늘
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={handleClear}>
|
||||
초기화
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
},
|
||||
);
|
||||
SingleDatePicker.displayName = "SingleDatePicker";
|
||||
|
||||
/**
|
||||
* 날짜 범위 선택 컴포넌트
|
||||
*/
|
||||
const RangeDatePicker = forwardRef<
|
||||
HTMLDivElement,
|
||||
{
|
||||
value?: [string, string];
|
||||
onChange?: (value: [string, string]) => void;
|
||||
dateFormat: string;
|
||||
minDate?: string;
|
||||
maxDate?: string;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
>(({ value = ["", ""], onChange, dateFormat = "YYYY-MM-DD", minDate, maxDate, disabled, readonly, className }, ref) => {
|
||||
const [openStart, setOpenStart] = useState(false);
|
||||
const [openEnd, setOpenEnd] = useState(false);
|
||||
|
||||
const startDate = useMemo(() => parseDate(value[0], dateFormat), [value, dateFormat]);
|
||||
const endDate = useMemo(() => parseDate(value[1], dateFormat), [value, dateFormat]);
|
||||
const minDateObj = useMemo(() => parseDate(minDate, dateFormat), [minDate, dateFormat]);
|
||||
const maxDateObj = useMemo(() => parseDate(maxDate, dateFormat), [maxDate, dateFormat]);
|
||||
|
||||
const handleStartSelect = useCallback(
|
||||
(date: Date | undefined) => {
|
||||
if (date) {
|
||||
const newStart = formatDate(date, dateFormat);
|
||||
// 시작일이 종료일보다 크면 종료일도 같이 변경
|
||||
if (endDate && date > endDate) {
|
||||
onChange?.([newStart, newStart]);
|
||||
} else {
|
||||
onChange?.([newStart, value[1]]);
|
||||
}
|
||||
setOpenStart(false);
|
||||
}
|
||||
},
|
||||
[value, dateFormat, endDate, onChange],
|
||||
);
|
||||
|
||||
const handleEndSelect = useCallback(
|
||||
(date: Date | undefined) => {
|
||||
if (date) {
|
||||
const newEnd = formatDate(date, dateFormat);
|
||||
// 종료일이 시작일보다 작으면 시작일도 같이 변경
|
||||
if (startDate && date < startDate) {
|
||||
onChange?.([newEnd, newEnd]);
|
||||
} else {
|
||||
onChange?.([value[0], newEnd]);
|
||||
}
|
||||
setOpenEnd(false);
|
||||
}
|
||||
},
|
||||
[value, dateFormat, startDate, onChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={ref} className={cn("flex items-center gap-2", className)}>
|
||||
{/* 시작 날짜 */}
|
||||
<Popover open={openStart} onOpenChange={setOpenStart}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={disabled || readonly}
|
||||
className={cn("h-10 flex-1 justify-start text-left font-normal", !value[0] && "text-muted-foreground")}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{value[0] || "시작일"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={startDate}
|
||||
onSelect={handleStartSelect}
|
||||
initialFocus
|
||||
locale={ko}
|
||||
disabled={(date) => {
|
||||
if (minDateObj && date < minDateObj) return true;
|
||||
if (maxDateObj && date > maxDateObj) return true;
|
||||
return false;
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<span className="text-muted-foreground">~</span>
|
||||
|
||||
{/* 종료 날짜 */}
|
||||
<Popover open={openEnd} onOpenChange={setOpenEnd}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={disabled || readonly}
|
||||
className={cn("h-10 flex-1 justify-start text-left font-normal", !value[1] && "text-muted-foreground")}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{value[1] || "종료일"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={endDate}
|
||||
onSelect={handleEndSelect}
|
||||
initialFocus
|
||||
locale={ko}
|
||||
disabled={(date) => {
|
||||
if (minDateObj && date < minDateObj) return true;
|
||||
if (maxDateObj && date > maxDateObj) return true;
|
||||
// 시작일보다 이전 날짜는 선택 불가
|
||||
if (startDate && date < startDate) return true;
|
||||
return false;
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
RangeDatePicker.displayName = "RangeDatePicker";
|
||||
|
||||
/**
|
||||
* 시간 선택 컴포넌트
|
||||
*/
|
||||
const TimePicker = forwardRef<
|
||||
HTMLInputElement,
|
||||
{
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
>(({ value, onChange, disabled, readonly, className }, ref) => {
|
||||
return (
|
||||
<div className={cn("relative", className)}>
|
||||
<Clock className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
ref={ref}
|
||||
type="time"
|
||||
value={value || ""}
|
||||
onChange={(e) => onChange?.(e.target.value)}
|
||||
disabled={disabled}
|
||||
readOnly={readonly}
|
||||
className="h-10 pl-10"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
TimePicker.displayName = "TimePicker";
|
||||
|
||||
/**
|
||||
* 날짜+시간 선택 컴포넌트
|
||||
*/
|
||||
const DateTimePicker = forwardRef<
|
||||
HTMLDivElement,
|
||||
{
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
dateFormat: string;
|
||||
minDate?: string;
|
||||
maxDate?: string;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
>(({ value, onChange, dateFormat = "YYYY-MM-DD HH:mm", minDate, maxDate, disabled, readonly, className }, ref) => {
|
||||
// 날짜와 시간 분리
|
||||
const [datePart, timePart] = useMemo(() => {
|
||||
if (!value) return ["", ""];
|
||||
const parts = value.split(" ");
|
||||
return [parts[0] || "", parts[1] || ""];
|
||||
}, [value]);
|
||||
|
||||
const handleDateChange = useCallback(
|
||||
(newDate: string) => {
|
||||
const newValue = `${newDate} ${timePart || "00:00"}`;
|
||||
onChange?.(newValue.trim());
|
||||
},
|
||||
[timePart, onChange],
|
||||
);
|
||||
|
||||
const handleTimeChange = useCallback(
|
||||
(newTime: string) => {
|
||||
const newValue = `${datePart || format(new Date(), "yyyy-MM-dd")} ${newTime}`;
|
||||
onChange?.(newValue.trim());
|
||||
},
|
||||
[datePart, onChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={ref} className={cn("flex gap-2", className)}>
|
||||
<div className="flex-1">
|
||||
<SingleDatePicker
|
||||
value={datePart}
|
||||
onChange={handleDateChange}
|
||||
dateFormat="YYYY-MM-DD"
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
disabled={disabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-32">
|
||||
<TimePicker value={timePart} onChange={handleTimeChange} disabled={disabled} readonly={readonly} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
DateTimePicker.displayName = "DateTimePicker";
|
||||
|
||||
/**
|
||||
* 메인 UnifiedDate 컴포넌트
|
||||
*/
|
||||
export const UnifiedDate = forwardRef<HTMLDivElement, UnifiedDateProps>((props, ref) => {
|
||||
const { id, label, required, readonly, disabled, style, size, config: configProp, value, onChange } = props;
|
||||
|
||||
// config가 없으면 기본값 사용
|
||||
const config = configProp || { type: "date" as const };
|
||||
|
||||
const dateFormat = config.format || "YYYY-MM-DD";
|
||||
|
||||
// 타입별 컴포넌트 렌더링
|
||||
const renderDatePicker = () => {
|
||||
const isDisabled = disabled || readonly;
|
||||
|
||||
// 범위 선택
|
||||
if (config.range) {
|
||||
return (
|
||||
<RangeDatePicker
|
||||
value={Array.isArray(value) ? (value as [string, string]) : ["", ""]}
|
||||
onChange={onChange as (value: [string, string]) => void}
|
||||
dateFormat={dateFormat}
|
||||
minDate={config.minDate}
|
||||
maxDate={config.maxDate}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// 타입별 렌더링
|
||||
switch (config.type) {
|
||||
case "date":
|
||||
return (
|
||||
<SingleDatePicker
|
||||
value={typeof value === "string" ? value : ""}
|
||||
onChange={(v) => onChange?.(v)}
|
||||
dateFormat={dateFormat}
|
||||
showToday={config.showToday}
|
||||
minDate={config.minDate}
|
||||
maxDate={config.maxDate}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
|
||||
case "time":
|
||||
return (
|
||||
<TimePicker
|
||||
value={typeof value === "string" ? value : ""}
|
||||
onChange={(v) => onChange?.(v)}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
|
||||
case "datetime":
|
||||
return (
|
||||
<DateTimePicker
|
||||
value={typeof value === "string" ? value : ""}
|
||||
onChange={(v) => onChange?.(v)}
|
||||
dateFormat={dateFormat}
|
||||
minDate={config.minDate}
|
||||
maxDate={config.maxDate}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<SingleDatePicker
|
||||
value={typeof value === "string" ? value : ""}
|
||||
onChange={(v) => onChange?.(v)}
|
||||
dateFormat={dateFormat}
|
||||
showToday={config.showToday}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const showLabel = label && style?.labelDisplay !== false;
|
||||
const componentWidth = size?.width || style?.width;
|
||||
const componentHeight = size?.height || style?.height;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
id={id}
|
||||
className="flex flex-col"
|
||||
style={{
|
||||
width: componentWidth,
|
||||
height: componentHeight,
|
||||
}}
|
||||
>
|
||||
{showLabel && (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
style={{
|
||||
fontSize: style?.labelFontSize,
|
||||
color: style?.labelColor,
|
||||
fontWeight: style?.labelFontWeight,
|
||||
marginBottom: style?.labelMarginBottom,
|
||||
}}
|
||||
className="flex-shrink-0 text-sm font-medium"
|
||||
>
|
||||
{label}
|
||||
{required && <span className="ml-0.5 text-orange-500">*</span>}
|
||||
</Label>
|
||||
)}
|
||||
<div className="min-h-0 flex-1">{renderDatePicker()}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
UnifiedDate.displayName = "UnifiedDate";
|
||||
|
||||
export default UnifiedDate;
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* UnifiedInput 설정 패널
|
||||
* 통합 입력 컴포넌트의 세부 설정을 관리합니다.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
interface UnifiedInputConfigPanelProps {
|
||||
config: Record<string, any>;
|
||||
onChange: (config: Record<string, any>) => void;
|
||||
}
|
||||
|
||||
export const UnifiedInputConfigPanel: React.FC<UnifiedInputConfigPanelProps> = ({ config, onChange }) => {
|
||||
// 설정 업데이트 핸들러
|
||||
const updateConfig = (field: string, value: any) => {
|
||||
onChange({ ...config, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 입력 타입 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">입력 타입</Label>
|
||||
<Select
|
||||
value={config.inputType || config.type || "text"}
|
||||
onValueChange={(value) => updateConfig("inputType", value)}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="입력 타입 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="text">텍스트</SelectItem>
|
||||
<SelectItem value="number">숫자</SelectItem>
|
||||
<SelectItem value="password">비밀번호</SelectItem>
|
||||
<SelectItem value="textarea">여러 줄 텍스트</SelectItem>
|
||||
<SelectItem value="slider">슬라이더</SelectItem>
|
||||
<SelectItem value="color">색상 선택</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 형식 (텍스트/숫자용) */}
|
||||
{(config.inputType === "text" || !config.inputType) && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">입력 형식</Label>
|
||||
<Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="형식 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">제한 없음</SelectItem>
|
||||
<SelectItem value="email">이메일</SelectItem>
|
||||
<SelectItem value="tel">전화번호</SelectItem>
|
||||
<SelectItem value="url">URL</SelectItem>
|
||||
<SelectItem value="currency">통화</SelectItem>
|
||||
<SelectItem value="biz_no">사업자번호</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 플레이스홀더 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">플레이스홀더</Label>
|
||||
<Input
|
||||
value={config.placeholder || ""}
|
||||
onChange={(e) => updateConfig("placeholder", e.target.value)}
|
||||
placeholder="입력 안내 텍스트"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 숫자/슬라이더 전용 설정 */}
|
||||
{(config.inputType === "number" || config.inputType === "slider") && (
|
||||
<>
|
||||
<Separator />
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">최소값</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.min ?? ""}
|
||||
onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)}
|
||||
placeholder="0"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">최대값</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.max ?? ""}
|
||||
onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)}
|
||||
placeholder="100"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">단계</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.step ?? ""}
|
||||
onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)}
|
||||
placeholder="1"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 여러 줄 텍스트 전용 설정 */}
|
||||
{config.inputType === "textarea" && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">줄 수</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.rows || 3}
|
||||
onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)}
|
||||
min={2}
|
||||
max={20}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 마스크 입력 (선택) */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">입력 마스크 (선택)</Label>
|
||||
<Input
|
||||
value={config.mask || ""}
|
||||
onChange={(e) => updateConfig("mask", e.target.value)}
|
||||
placeholder="예: ###-####-####"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
<p className="text-muted-foreground text-[10px]"># = 숫자, A = 문자, * = 모든 문자</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
UnifiedInputConfigPanel.displayName = "UnifiedInputConfigPanel";
|
||||
|
||||
export default UnifiedInputConfigPanel;
|
||||
|
|
@ -139,3 +139,4 @@ export const useActiveTabOptional = () => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,16 +9,13 @@ export const queryKeys = {
|
|||
all: ["codes"] as const,
|
||||
list: (categoryCode: string) => ["codes", "list", categoryCode] as const,
|
||||
options: (categoryCode: string) => ["codes", "options", categoryCode] as const,
|
||||
detail: (categoryCode: string, codeValue: string) =>
|
||||
["codes", "detail", categoryCode, codeValue] as const,
|
||||
infiniteList: (categoryCode: string, filters?: any) =>
|
||||
["codes", "infiniteList", categoryCode, filters] as const,
|
||||
detail: (categoryCode: string, codeValue: string) => ["codes", "detail", categoryCode, codeValue] as const,
|
||||
infiniteList: (categoryCode: string, filters?: any) => ["codes", "infiniteList", categoryCode, filters] as const,
|
||||
},
|
||||
tables: {
|
||||
all: ["tables"] as const,
|
||||
columns: (tableName: string) => ["tables", "columns", tableName] as const,
|
||||
codeCategory: (tableName: string, columnName: string) =>
|
||||
["tables", "codeCategory", tableName, columnName] as const,
|
||||
codeCategory: (tableName: string, columnName: string) => ["tables", "codeCategory", tableName, columnName] as const,
|
||||
},
|
||||
categories: {
|
||||
all: ["categories"] as const,
|
||||
|
|
@ -36,9 +33,8 @@ export function useTableCodeCategory(tableName?: string, columnName?: string) {
|
|||
const columns = await tableTypeApi.getColumns(tableName);
|
||||
const targetColumn = columns.find((col) => col.columnName === columnName);
|
||||
|
||||
const codeCategory = targetColumn?.codeCategory && targetColumn.codeCategory !== "none"
|
||||
? targetColumn.codeCategory
|
||||
: null;
|
||||
const codeCategory =
|
||||
targetColumn?.codeCategory && targetColumn.codeCategory !== "none" ? targetColumn.codeCategory : null;
|
||||
|
||||
return codeCategory;
|
||||
},
|
||||
|
|
@ -48,27 +44,112 @@ export function useTableCodeCategory(tableName?: string, columnName?: string) {
|
|||
});
|
||||
}
|
||||
|
||||
// 🆕 테이블 컬럼의 계층구조 설정 조회 (대분류/중분류/소분류)
|
||||
interface ColumnHierarchyInfo {
|
||||
hierarchyRole?: "large" | "medium" | "small";
|
||||
hierarchyParentField?: string;
|
||||
codeCategory?: string;
|
||||
}
|
||||
|
||||
export function useTableColumnHierarchy(tableName?: string, columnName?: string) {
|
||||
return useQuery<ColumnHierarchyInfo | null>({
|
||||
queryKey: ["tables", "hierarchy", tableName || "", columnName || ""],
|
||||
queryFn: async () => {
|
||||
if (!tableName || !columnName) return null;
|
||||
|
||||
const columns = await tableTypeApi.getColumns(tableName);
|
||||
const targetColumn = columns.find((col) => col.columnName === columnName);
|
||||
|
||||
if (!targetColumn) return null;
|
||||
|
||||
// detailSettings에서 hierarchyRole 추출
|
||||
let hierarchyRole: ColumnHierarchyInfo["hierarchyRole"];
|
||||
let hierarchyParentField: string | undefined;
|
||||
|
||||
console.log("🔍 [useTableColumnHierarchy] 컬럼 정보:", {
|
||||
columnName,
|
||||
detailSettings: targetColumn.detailSettings,
|
||||
detailSettingsType: typeof targetColumn.detailSettings,
|
||||
codeCategory: targetColumn.codeCategory,
|
||||
});
|
||||
|
||||
if (targetColumn.detailSettings) {
|
||||
try {
|
||||
const settings =
|
||||
typeof targetColumn.detailSettings === "string"
|
||||
? JSON.parse(targetColumn.detailSettings)
|
||||
: targetColumn.detailSettings;
|
||||
|
||||
console.log("🔍 [useTableColumnHierarchy] 파싱된 settings:", settings);
|
||||
|
||||
hierarchyRole = settings.hierarchyRole;
|
||||
hierarchyParentField = settings.hierarchyParentField;
|
||||
} catch (e) {
|
||||
console.log("🔍 [useTableColumnHierarchy] JSON 파싱 실패:", e);
|
||||
// JSON 파싱 실패 시 무시
|
||||
}
|
||||
}
|
||||
|
||||
// hierarchyParentField가 없으면 같은 codeCategory를 가진 상위 역할 컬럼을 자동으로 찾음
|
||||
if (hierarchyRole && !hierarchyParentField && targetColumn.codeCategory) {
|
||||
const roleOrder = { large: 0, medium: 1, small: 2 };
|
||||
const currentOrder = roleOrder[hierarchyRole];
|
||||
|
||||
if (currentOrder > 0) {
|
||||
// 같은 codeCategory를 가진 컬럼들 중에서 상위 역할을 찾음
|
||||
const parentRole = currentOrder === 1 ? "large" : "medium";
|
||||
|
||||
const parentColumn = columns.find((col) => {
|
||||
if (col.codeCategory !== targetColumn.codeCategory) return false;
|
||||
|
||||
try {
|
||||
const colSettings =
|
||||
typeof col.detailSettings === "string" ? JSON.parse(col.detailSettings) : col.detailSettings;
|
||||
return colSettings?.hierarchyRole === parentRole;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (parentColumn) {
|
||||
hierarchyParentField = parentColumn.columnName;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
hierarchyRole,
|
||||
hierarchyParentField,
|
||||
codeCategory: targetColumn.codeCategory,
|
||||
};
|
||||
},
|
||||
enabled: !!(tableName && columnName),
|
||||
staleTime: 10 * 60 * 1000,
|
||||
gcTime: 30 * 60 * 1000,
|
||||
});
|
||||
}
|
||||
|
||||
// 코드 옵션 조회 (select용)
|
||||
export function useCodeOptions(codeCategory?: string, enabled: boolean = true, menuObjid?: number) {
|
||||
const query = useQuery({
|
||||
queryKey: menuObjid
|
||||
? [...queryKeys.codes.options(codeCategory || ""), 'menu', menuObjid]
|
||||
queryKey: menuObjid
|
||||
? [...queryKeys.codes.options(codeCategory || ""), "menu", menuObjid]
|
||||
: queryKeys.codes.options(codeCategory || ""),
|
||||
queryFn: async () => {
|
||||
if (!codeCategory || codeCategory === "none") return [];
|
||||
|
||||
console.log(`🔍 [useCodeOptions] 코드 옵션 조회 시작:`, {
|
||||
console.log("🔍 [useCodeOptions] 코드 옵션 조회 시작:", {
|
||||
codeCategory,
|
||||
menuObjid,
|
||||
hasMenuObjid: !!menuObjid,
|
||||
});
|
||||
|
||||
const response = await commonCodeApi.codes.getList(codeCategory, {
|
||||
const response = await commonCodeApi.codes.getList(codeCategory, {
|
||||
isActive: true,
|
||||
menuObjid
|
||||
menuObjid,
|
||||
});
|
||||
|
||||
console.log(`📦 [useCodeOptions] API 응답:`, {
|
||||
console.log("📦 [useCodeOptions] API 응답:", {
|
||||
codeCategory,
|
||||
menuObjid,
|
||||
success: response.success,
|
||||
|
|
@ -79,17 +160,32 @@ export function useCodeOptions(codeCategory?: string, enabled: boolean = true, m
|
|||
if (response.success && response.data) {
|
||||
const options = response.data.map((code: any) => {
|
||||
const actualValue = code.code || code.CODE || code.value || code.code_value || code.codeValue;
|
||||
const actualLabel = code.codeName || code.code_name || code.name || code.CODE_NAME ||
|
||||
code.NAME || code.label || code.LABEL || code.text || code.title ||
|
||||
code.description || actualValue;
|
||||
const actualLabel =
|
||||
code.codeName ||
|
||||
code.code_name ||
|
||||
code.name ||
|
||||
code.CODE_NAME ||
|
||||
code.NAME ||
|
||||
code.label ||
|
||||
code.LABEL ||
|
||||
code.text ||
|
||||
code.title ||
|
||||
code.description ||
|
||||
actualValue;
|
||||
|
||||
// 계층구조 정보 포함
|
||||
const depth = code.depth ?? 1;
|
||||
const parentCodeValue = code.parentCodeValue || code.parent_code_value || null;
|
||||
|
||||
return {
|
||||
value: actualValue,
|
||||
label: actualLabel,
|
||||
depth,
|
||||
parentCodeValue,
|
||||
};
|
||||
});
|
||||
|
||||
console.log(`✅ [useCodeOptions] 옵션 변환 완료:`, {
|
||||
console.log("✅ [useCodeOptions] 옵션 변환 완료:", {
|
||||
codeCategory,
|
||||
menuObjid,
|
||||
optionsCount: options.length,
|
||||
|
|
@ -140,15 +236,8 @@ export function useUpdateCode() {
|
|||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({
|
||||
categoryCode,
|
||||
codeValue,
|
||||
data,
|
||||
}: {
|
||||
categoryCode: string;
|
||||
codeValue: string;
|
||||
data: any;
|
||||
}) => commonCodeApi.codes.update(categoryCode, codeValue, data),
|
||||
mutationFn: ({ categoryCode, codeValue, data }: { categoryCode: string; codeValue: string; data: any }) =>
|
||||
commonCodeApi.codes.update(categoryCode, codeValue, data),
|
||||
onSuccess: (_, variables) => {
|
||||
// 해당 코드 상세 쿼리 무효화
|
||||
queryClient.invalidateQueries({
|
||||
|
|
@ -247,4 +336,4 @@ export function useReorderCodes() {
|
|||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -196,3 +196,4 @@ export function applyAutoFillToFormData(
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -166,4 +166,62 @@ export const commonCodeApi = {
|
|||
return response.data;
|
||||
},
|
||||
},
|
||||
|
||||
// 계층구조 코드 API
|
||||
hierarchy: {
|
||||
/**
|
||||
* 계층구조 코드 조회
|
||||
* @param categoryCode 카테고리 코드
|
||||
* @param parentCodeValue 부모 코드값 (빈 문자열이면 최상위 코드)
|
||||
* @param depth 특정 깊이만 조회 (선택)
|
||||
* @param menuObjid 메뉴 OBJID (선택)
|
||||
*/
|
||||
async getHierarchicalCodes(
|
||||
categoryCode: string,
|
||||
parentCodeValue?: string | null,
|
||||
depth?: number,
|
||||
menuObjid?: number
|
||||
): Promise<ApiResponse<CodeInfo[]>> {
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
if (parentCodeValue !== undefined && parentCodeValue !== null) {
|
||||
searchParams.append("parentCodeValue", parentCodeValue);
|
||||
}
|
||||
if (depth !== undefined) searchParams.append("depth", depth.toString());
|
||||
if (menuObjid !== undefined) searchParams.append("menuObjid", menuObjid.toString());
|
||||
|
||||
const queryString = searchParams.toString();
|
||||
const url = `/common-codes/categories/${categoryCode}/hierarchy${queryString ? `?${queryString}` : ""}`;
|
||||
|
||||
const response = await apiClient.get(url);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 코드 트리 조회 (전체 계층구조)
|
||||
*/
|
||||
async getCodeTree(
|
||||
categoryCode: string,
|
||||
menuObjid?: number
|
||||
): Promise<ApiResponse<{ flat: CodeInfo[]; tree: CodeInfo[] }>> {
|
||||
const searchParams = new URLSearchParams();
|
||||
if (menuObjid !== undefined) searchParams.append("menuObjid", menuObjid.toString());
|
||||
|
||||
const queryString = searchParams.toString();
|
||||
const url = `/common-codes/categories/${categoryCode}/tree${queryString ? `?${queryString}` : ""}`;
|
||||
|
||||
const response = await apiClient.get(url);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 자식 코드 존재 여부 확인
|
||||
*/
|
||||
async hasChildren(categoryCode: string, codeValue: string): Promise<ApiResponse<{ hasChildren: boolean }>> {
|
||||
const response = await apiClient.get(
|
||||
`/common-codes/categories/${categoryCode}/codes/${codeValue}/has-children`
|
||||
);
|
||||
return response.data;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useState, useEffect, useRef, useMemo } from "react";
|
||||
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
||||
import { useCodeOptions, useTableCodeCategory } from "@/hooks/queries/useCodes";
|
||||
import { useCodeOptions, useTableCodeCategory, useTableColumnHierarchy } from "@/hooks/queries/useCodes";
|
||||
import { cn } from "@/lib/registry/components/common/inputStyles";
|
||||
import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
||||
import type { DataProvidable } from "@/types/data-transfer";
|
||||
import { useCascadingDropdown } from "@/hooks/useCascadingDropdown";
|
||||
import { HierarchicalCodeSelect } from "@/components/common/HierarchicalCodeSelect";
|
||||
|
||||
interface Option {
|
||||
value: string;
|
||||
|
|
@ -58,7 +59,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
// 🆕 읽기전용/비활성화 상태 확인
|
||||
const isReadonly = (component as any).readonly || (props as any).readonly || componentConfig?.readonly || false;
|
||||
const isDisabled = (component as any).disabled || (props as any).disabled || componentConfig?.disabled || false;
|
||||
const isFieldDisabled = isDesignMode || isReadonly || isDisabled;
|
||||
const isFieldDisabledBase = isDesignMode || isReadonly || isDisabled;
|
||||
// 화면 컨텍스트 (데이터 제공자로 등록)
|
||||
const screenContext = useScreenContextOptional();
|
||||
|
||||
|
|
@ -94,7 +95,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
console.log(" componentConfig 전체:", componentConfig);
|
||||
console.log(" component.componentConfig 전체:", component.componentConfig);
|
||||
console.log(" =======================================");
|
||||
|
||||
|
||||
// 다중선택이 활성화되었는지 알림
|
||||
if (isMultiple) {
|
||||
console.log("✅ 다중선택 모드 활성화됨!");
|
||||
|
|
@ -114,7 +115,10 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
const [selectedValues, setSelectedValues] = useState<string[]>(() => {
|
||||
const initialValue = externalValue || config?.value || "";
|
||||
if (isMultiple && typeof initialValue === "string" && initialValue) {
|
||||
return initialValue.split(",").map(v => v.trim()).filter(v => v);
|
||||
return initialValue
|
||||
.split(",")
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
|
@ -122,7 +126,6 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
// autocomplete의 경우 검색어 관리
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
|
||||
const selectRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 안정적인 쿼리 키를 위한 메모이제이션
|
||||
|
|
@ -133,6 +136,9 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
// 🚀 React Query: 테이블 코드 카테고리 조회
|
||||
const { data: dynamicCodeCategory } = useTableCodeCategory(stableTableName, stableColumnName);
|
||||
|
||||
// 🆕 React Query: 테이블 컬럼의 계층구조 설정 조회
|
||||
const { data: columnHierarchy } = useTableColumnHierarchy(stableTableName, stableColumnName);
|
||||
|
||||
// 코드 카테고리 결정: 동적 카테고리 > 설정 카테고리 (메모이제이션)
|
||||
const codeCategory = useMemo(() => {
|
||||
const category = dynamicCodeCategory || staticCodeCategory;
|
||||
|
|
@ -150,6 +156,11 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
isFetching,
|
||||
} = useCodeOptions(codeCategory, isCodeCategoryValid, menuObjid);
|
||||
|
||||
// 🆕 계층구조 코드 자동 감지: 비활성화 (테이블 타입관리에서 hierarchyRole 설정 방식 사용)
|
||||
// 기존: depth > 1인 코드가 있으면 자동으로 HierarchicalCodeSelect 사용
|
||||
// 변경: 항상 false 반환하여 자동 감지 비활성화
|
||||
const hasHierarchicalCodes = false;
|
||||
|
||||
// 🆕 카테고리 타입 (category webType)을 위한 옵션 로딩
|
||||
const [categoryOptions, setCategoryOptions] = useState<Option[]>([]);
|
||||
const [isLoadingCategories, setIsLoadingCategories] = useState(false);
|
||||
|
|
@ -160,42 +171,125 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
const categoryRelationCode = config?.categoryRelationCode || componentConfig?.categoryRelationCode;
|
||||
const cascadingRole = config?.cascadingRole || componentConfig?.cascadingRole || "child";
|
||||
const cascadingParentField = config?.cascadingParentField || componentConfig?.cascadingParentField;
|
||||
|
||||
|
||||
// 🆕 계층구조 역할 설정 (대분류/중분류/소분류)
|
||||
// 1순위: 동적으로 조회된 값 (테이블 타입관리에서 설정)
|
||||
// 2순위: config에서 전달된 값
|
||||
const hierarchyRole = columnHierarchy?.hierarchyRole || config?.hierarchyRole || componentConfig?.hierarchyRole;
|
||||
const hierarchyParentField = columnHierarchy?.hierarchyParentField || config?.hierarchyParentField || componentConfig?.hierarchyParentField;
|
||||
|
||||
// 디버깅 로그
|
||||
console.log("🔍 [SelectBasic] 계층구조 설정:", {
|
||||
columnName: component.columnName,
|
||||
tableName: component.tableName,
|
||||
columnHierarchy,
|
||||
hierarchyRole,
|
||||
hierarchyParentField,
|
||||
codeCategory,
|
||||
});
|
||||
|
||||
// 🆕 자식 역할일 때 부모 값 추출 (단일 또는 다중)
|
||||
const rawParentValue = cascadingRole === "child" && cascadingParentField && formData
|
||||
? formData[cascadingParentField]
|
||||
: undefined;
|
||||
|
||||
const rawParentValue =
|
||||
cascadingRole === "child" && cascadingParentField && formData ? formData[cascadingParentField] : undefined;
|
||||
|
||||
// 🆕 계층구조 역할에 따른 부모 값 추출
|
||||
const hierarchyParentValue = useMemo(() => {
|
||||
if (!hierarchyRole || hierarchyRole === "large" || !hierarchyParentField || !formData) {
|
||||
return undefined;
|
||||
}
|
||||
return formData[hierarchyParentField] as string | undefined;
|
||||
}, [hierarchyRole, hierarchyParentField, formData]);
|
||||
|
||||
// 🆕 계층구조에서 상위 항목 미선택 시 비활성화
|
||||
const isHierarchyDisabled = (hierarchyRole === "medium" || hierarchyRole === "small") && !hierarchyParentValue;
|
||||
|
||||
// 최종 비활성화 상태
|
||||
const isFieldDisabled = isFieldDisabledBase || isHierarchyDisabled;
|
||||
|
||||
console.log("🔍 [SelectBasic] 비활성화 상태:", {
|
||||
columnName: component.columnName,
|
||||
hierarchyRole,
|
||||
hierarchyParentValue,
|
||||
isHierarchyDisabled,
|
||||
isFieldDisabled,
|
||||
});
|
||||
|
||||
// 🆕 계층구조 역할에 따라 옵션 필터링
|
||||
const filteredCodeOptions = useMemo(() => {
|
||||
console.log("🔍 [SelectBasic] 옵션 필터링:", {
|
||||
columnName: component.columnName,
|
||||
hierarchyRole,
|
||||
hierarchyParentField,
|
||||
hierarchyParentValue,
|
||||
codeOptionsCount: codeOptions?.length || 0,
|
||||
sampleOptions: codeOptions?.slice(0, 3),
|
||||
});
|
||||
|
||||
if (!hierarchyRole || !codeOptions || codeOptions.length === 0) {
|
||||
console.log("🔍 [SelectBasic] 필터링 스킵 - hierarchyRole 없음 또는 옵션 없음");
|
||||
return codeOptions;
|
||||
}
|
||||
|
||||
// 대분류: depth = 1 (최상위)
|
||||
if (hierarchyRole === "large") {
|
||||
const filtered = codeOptions.filter((opt: any) => {
|
||||
const depth = opt.depth || 1;
|
||||
const parentCodeValue = opt.parentCodeValue || opt.parent_code_value;
|
||||
return depth === 1 || !parentCodeValue;
|
||||
});
|
||||
console.log("🔍 [SelectBasic] 대분류 필터링 결과:", filtered.length, "개");
|
||||
return filtered;
|
||||
}
|
||||
|
||||
// 중분류/소분류: 부모 값이 있어야 함
|
||||
if ((hierarchyRole === "medium" || hierarchyRole === "small") && hierarchyParentValue) {
|
||||
const filtered = codeOptions.filter((opt: any) => {
|
||||
const parentCodeValue = opt.parentCodeValue || opt.parent_code_value;
|
||||
return parentCodeValue === hierarchyParentValue;
|
||||
});
|
||||
console.log("🔍 [SelectBasic] 중/소분류 필터링 결과:", filtered.length, "개");
|
||||
return filtered;
|
||||
}
|
||||
|
||||
// 부모 값이 없으면 빈 배열 반환 (선택 불가 상태)
|
||||
if (hierarchyRole === "medium" || hierarchyRole === "small") {
|
||||
console.log("🔍 [SelectBasic] 중/소분류 - 부모값 없음, 빈 배열 반환");
|
||||
return [];
|
||||
}
|
||||
|
||||
return codeOptions;
|
||||
}, [codeOptions, hierarchyRole, hierarchyParentValue, hierarchyParentField, component.columnName]);
|
||||
|
||||
// 🆕 부모값이 콤마로 구분된 문자열이면 배열로 변환 (다중 선택 지원)
|
||||
const parentValues: string[] | undefined = useMemo(() => {
|
||||
if (!rawParentValue) return undefined;
|
||||
|
||||
|
||||
// 이미 배열인 경우
|
||||
if (Array.isArray(rawParentValue)) {
|
||||
return rawParentValue.map(v => String(v)).filter(v => v);
|
||||
return rawParentValue.map((v) => String(v)).filter((v) => v);
|
||||
}
|
||||
|
||||
|
||||
// 콤마로 구분된 문자열인 경우
|
||||
const strValue = String(rawParentValue);
|
||||
if (strValue.includes(',')) {
|
||||
return strValue.split(',').map(v => v.trim()).filter(v => v);
|
||||
if (strValue.includes(",")) {
|
||||
return strValue
|
||||
.split(",")
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
}
|
||||
|
||||
|
||||
// 단일 값
|
||||
return [strValue];
|
||||
}, [rawParentValue]);
|
||||
|
||||
|
||||
// 🆕 연쇄 드롭다운 훅 사용 (역할에 따라 다른 옵션 로드) - 다중 부모값 지원
|
||||
const {
|
||||
options: cascadingOptions,
|
||||
loading: isLoadingCascading,
|
||||
} = useCascadingDropdown({
|
||||
const { options: cascadingOptions, loading: isLoadingCascading } = useCascadingDropdown({
|
||||
relationCode: cascadingRelationCode,
|
||||
categoryRelationCode: categoryRelationCode, // 🆕 카테고리 값 연쇄관계 지원
|
||||
role: cascadingRole, // 부모/자식 역할 전달
|
||||
parentValues: parentValues, // 다중 부모값
|
||||
});
|
||||
|
||||
|
||||
// 🆕 카테고리 값 연쇄관계가 활성화되었는지 확인
|
||||
const hasCategoryRelation = !!categoryRelationCode;
|
||||
|
||||
|
|
@ -206,32 +300,32 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
columnName: component.columnName,
|
||||
webType,
|
||||
});
|
||||
|
||||
|
||||
setIsLoadingCategories(true);
|
||||
|
||||
|
||||
import("@/lib/api/tableCategoryValue").then(({ getCategoryValues }) => {
|
||||
getCategoryValues(component.tableName!, component.columnName!)
|
||||
.then((response) => {
|
||||
console.log("🔍 [SelectBasic] 카테고리 API 응답:", response);
|
||||
|
||||
|
||||
if (response.success && response.data) {
|
||||
console.log("🔍 [SelectBasic] 원본 데이터 샘플:", {
|
||||
firstItem: response.data[0],
|
||||
keys: response.data[0] ? Object.keys(response.data[0]) : [],
|
||||
});
|
||||
|
||||
|
||||
const activeValues = response.data.filter((v) => v.isActive !== false);
|
||||
const options = activeValues.map((v) => ({
|
||||
value: v.valueCode,
|
||||
label: v.valueLabel || v.valueCode,
|
||||
}));
|
||||
|
||||
|
||||
console.log("✅ [SelectBasic] 카테고리 옵션 설정:", {
|
||||
activeValuesCount: activeValues.length,
|
||||
options,
|
||||
sampleOption: options[0],
|
||||
});
|
||||
|
||||
|
||||
setCategoryOptions(options);
|
||||
} else {
|
||||
console.error("❌ [SelectBasic] 카테고리 응답 실패:", response);
|
||||
|
|
@ -264,7 +358,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
// 외부 value prop 변경 시 selectedValue 업데이트
|
||||
useEffect(() => {
|
||||
const newValue = externalValue || config?.value || "";
|
||||
|
||||
|
||||
console.log("🔍 [SelectBasic] 외부 값 변경 감지:", {
|
||||
componentId: component.id,
|
||||
columnName: (component as any).columnName,
|
||||
|
|
@ -275,13 +369,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
externalValue,
|
||||
"config.value": config?.value,
|
||||
});
|
||||
|
||||
|
||||
// 다중선택 모드인 경우
|
||||
if (isMultiple) {
|
||||
if (typeof newValue === "string" && newValue) {
|
||||
const values = newValue.split(",").map(v => v.trim()).filter(v => v);
|
||||
const values = newValue
|
||||
.split(",")
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
const currentValuesStr = selectedValues.join(",");
|
||||
|
||||
|
||||
if (newValue !== currentValuesStr) {
|
||||
console.log("✅ [SelectBasic] 다중선택 값 업데이트:", {
|
||||
from: selectedValues,
|
||||
|
|
@ -310,23 +407,25 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
const dataProvider: DataProvidable = {
|
||||
componentId: component.id,
|
||||
componentType: "select",
|
||||
|
||||
|
||||
getSelectedData: () => {
|
||||
// 현재 선택된 값을 배열로 반환
|
||||
const fieldName = component.columnName || "selectedValue";
|
||||
return [{
|
||||
[fieldName]: selectedValue,
|
||||
value: selectedValue,
|
||||
label: selectedLabel,
|
||||
}];
|
||||
return [
|
||||
{
|
||||
[fieldName]: selectedValue,
|
||||
value: selectedValue,
|
||||
label: selectedLabel,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
|
||||
getAllData: () => {
|
||||
// 모든 옵션 반환
|
||||
const configOptions = config.options || [];
|
||||
return [...codeOptions, ...categoryOptions, ...configOptions];
|
||||
},
|
||||
|
||||
|
||||
clearSelection: () => {
|
||||
setSelectedValue("");
|
||||
setSelectedLabel("");
|
||||
|
|
@ -340,7 +439,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
useEffect(() => {
|
||||
if (screenContext && component.id) {
|
||||
screenContext.registerDataProvider(component.id, dataProvider);
|
||||
|
||||
|
||||
return () => {
|
||||
screenContext.unregisterDataProvider(component.id);
|
||||
};
|
||||
|
|
@ -442,9 +541,18 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
if (cascadingRelationCode) {
|
||||
return cascadingOptions;
|
||||
}
|
||||
|
||||
|
||||
const configOptions = config.options || [];
|
||||
return [...codeOptions, ...categoryOptions, ...configOptions];
|
||||
// 🆕 계층구조 역할이 설정된 경우 필터링된 옵션 사용
|
||||
console.log("🔍 [SelectBasic] getAllOptions 호출:", {
|
||||
columnName: component.columnName,
|
||||
hierarchyRole,
|
||||
codeOptionsCount: codeOptions?.length || 0,
|
||||
filteredCodeOptionsCount: filteredCodeOptions?.length || 0,
|
||||
categoryOptionsCount: categoryOptions?.length || 0,
|
||||
configOptionsCount: configOptions?.length || 0,
|
||||
});
|
||||
return [...filteredCodeOptions, ...categoryOptions, ...configOptions];
|
||||
};
|
||||
|
||||
const allOptions = getAllOptions();
|
||||
|
|
@ -482,6 +590,45 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
|
||||
// 세부 타입별 렌더링
|
||||
const renderSelectByWebType = () => {
|
||||
// 🆕 계층구조 코드: 자동 감지 또는 수동 설정 시 1,2,3단계 셀렉트박스로 렌더링
|
||||
// 단, hierarchyRole이 설정된 경우(개별 컬럼별 계층구조)는 일반 셀렉트 사용
|
||||
const shouldUseHierarchical = !hierarchyRole && (config?.useHierarchicalCode || hasHierarchicalCodes);
|
||||
|
||||
if (shouldUseHierarchical && codeCategory) {
|
||||
const maxDepth = config?.hierarchicalMaxDepth || 3;
|
||||
const labels = config?.hierarchicalLabels || ["대분류", "중분류", "소분류"];
|
||||
const placeholders = config?.hierarchicalPlaceholders || ["선택하세요", "선택하세요", "선택하세요"];
|
||||
const isInline = config?.hierarchicalInline || false;
|
||||
|
||||
return (
|
||||
<HierarchicalCodeSelect
|
||||
categoryCode={codeCategory}
|
||||
menuObjid={menuObjid}
|
||||
maxDepth={maxDepth}
|
||||
value={selectedValue}
|
||||
onChange={(codeValue: string) => {
|
||||
setSelectedValue(codeValue);
|
||||
// 라벨 업데이트 - 선택된 값을 라벨로도 설정 (계층구조에서는 값=라벨인 경우가 많음)
|
||||
setSelectedLabel(codeValue);
|
||||
|
||||
// 디자인 모드에서의 컴포넌트 속성 업데이트
|
||||
if (onUpdate) {
|
||||
onUpdate("value", codeValue);
|
||||
}
|
||||
|
||||
// 인터랙티브 모드에서 폼 데이터 업데이트
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, codeValue);
|
||||
}
|
||||
}}
|
||||
labels={labels as [string, string?, string?]}
|
||||
placeholders={placeholders as [string, string?, string?]}
|
||||
className={isInline ? "flex-row gap-2" : "flex-col gap-2"}
|
||||
disabled={isFieldDisabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// code-radio: 라디오 버튼으로 코드 선택
|
||||
if (webType === "code-radio") {
|
||||
return (
|
||||
|
|
@ -527,7 +674,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
"h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
|
||||
!isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
readOnly={isFieldDisabled}
|
||||
disabled={isFieldDisabled}
|
||||
|
|
@ -565,7 +712,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
!isFieldDisabled && "cursor-pointer hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isOpen && "border-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
onClick={handleToggle}
|
||||
style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
|
||||
|
|
@ -612,7 +759,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
"box-border flex h-full w-full flex-wrap gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
|
||||
!isFieldDisabled && "hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
>
|
||||
{selectedValues.map((val, idx) => {
|
||||
|
|
@ -673,7 +820,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
"h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
|
||||
!isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
readOnly={isFieldDisabled}
|
||||
disabled={isFieldDisabled}
|
||||
|
|
@ -713,7 +860,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
!isFieldDisabled && "cursor-pointer hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isOpen && "border-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
onClick={handleToggle}
|
||||
style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
|
||||
|
|
@ -770,12 +917,12 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
"box-border flex w-full flex-wrap items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
|
||||
!isFieldDisabled && "hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
onClick={() => !isFieldDisabled && setIsOpen(true)}
|
||||
style={{
|
||||
style={{
|
||||
pointerEvents: isFieldDisabled ? "none" : "auto",
|
||||
height: "100%"
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{selectedValues.map((val, idx) => {
|
||||
|
|
@ -801,19 +948,17 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
</span>
|
||||
);
|
||||
})}
|
||||
{selectedValues.length === 0 && (
|
||||
<span className="text-gray-500">{placeholder}</span>
|
||||
)}
|
||||
{selectedValues.length === 0 && <span className="text-gray-500">{placeholder}</span>}
|
||||
</div>
|
||||
{isOpen && !isFieldDisabled && (
|
||||
<div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
|
||||
{(isLoadingCodes || isLoadingCategories) ? (
|
||||
{isLoadingCodes || isLoadingCategories ? (
|
||||
<div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
|
||||
) : allOptions.length > 0 ? (
|
||||
(() => {
|
||||
// 부모별 그룹핑 (카테고리 연쇄관계인 경우)
|
||||
const hasParentInfo = allOptions.some((opt: any) => opt.parent_label);
|
||||
|
||||
|
||||
if (hasParentInfo) {
|
||||
// 부모별로 그룹핑
|
||||
const groupedOptions: Record<string, { parentLabel: string; options: typeof allOptions }> = {};
|
||||
|
|
@ -825,11 +970,11 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
}
|
||||
groupedOptions[parentKey].options.push(opt);
|
||||
});
|
||||
|
||||
|
||||
return Object.entries(groupedOptions).map(([parentKey, group]) => (
|
||||
<div key={parentKey}>
|
||||
{/* 그룹 헤더 */}
|
||||
<div className="sticky top-0 bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-600 border-b">
|
||||
<div className="sticky top-0 border-b bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-600">
|
||||
{group.parentLabel}
|
||||
</div>
|
||||
{/* 그룹 옵션들 */}
|
||||
|
|
@ -840,7 +985,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
key={`${option.value}-${index}`}
|
||||
className={cn(
|
||||
"cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
|
||||
isOptionSelected && "bg-blue-50 font-medium"
|
||||
isOptionSelected && "bg-blue-50 font-medium",
|
||||
)}
|
||||
onClick={() => {
|
||||
const newVals = isOptionSelected
|
||||
|
|
@ -869,7 +1014,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
onFormDataChange(component.columnName, newValue);
|
||||
}
|
||||
}}
|
||||
className="h-4 w-4 pointer-events-auto"
|
||||
className="pointer-events-auto h-4 w-4"
|
||||
/>
|
||||
<span>{option.label || option.value}</span>
|
||||
</div>
|
||||
|
|
@ -879,7 +1024,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
// 부모 정보가 없으면 기존 방식
|
||||
return allOptions.map((option, index) => {
|
||||
const isOptionSelected = selectedValues.includes(option.value);
|
||||
|
|
@ -888,7 +1033,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
key={`${option.value}-${index}`}
|
||||
className={cn(
|
||||
"cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
|
||||
isOptionSelected && "bg-blue-50 font-medium"
|
||||
isOptionSelected && "bg-blue-50 font-medium",
|
||||
)}
|
||||
onClick={() => {
|
||||
const newVals = isOptionSelected
|
||||
|
|
@ -917,7 +1062,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
onFormDataChange(component.columnName, newValue);
|
||||
}
|
||||
}}
|
||||
className="h-4 w-4 pointer-events-auto"
|
||||
className="pointer-events-auto h-4 w-4"
|
||||
/>
|
||||
<span>{option.label || option.value}</span>
|
||||
</div>
|
||||
|
|
@ -933,7 +1078,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// 단일선택 모드
|
||||
return (
|
||||
<div className="w-full">
|
||||
|
|
@ -943,7 +1088,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
!isFieldDisabled && "cursor-pointer hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isOpen && "border-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
onClick={handleToggle}
|
||||
style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
const [cascadingEnabled, setCascadingEnabled] = useState(!!config.cascadingRelationCode);
|
||||
const [relationList, setRelationList] = useState<CascadingRelation[]>([]);
|
||||
const [loadingRelations, setLoadingRelations] = useState(false);
|
||||
|
||||
|
||||
// 🆕 카테고리 값 연쇄관계 상태
|
||||
const [categoryRelationEnabled, setCategoryRelationEnabled] = useState(!!(config as any).categoryRelationCode);
|
||||
const [categoryRelationList, setCategoryRelationList] = useState<CategoryValueCascadingGroup[]>([]);
|
||||
|
|
@ -102,8 +102,8 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
setCascadingEnabled(enabled);
|
||||
if (!enabled) {
|
||||
// 비활성화 시 관계 설정 제거
|
||||
const newConfig = {
|
||||
...config,
|
||||
const newConfig = {
|
||||
...config,
|
||||
cascadingRelationCode: undefined,
|
||||
cascadingRole: undefined,
|
||||
cascadingParentField: undefined,
|
||||
|
|
@ -124,8 +124,8 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
setCategoryRelationEnabled(enabled);
|
||||
if (!enabled) {
|
||||
// 비활성화 시 관계 설정 제거
|
||||
const newConfig = {
|
||||
...config,
|
||||
const newConfig = {
|
||||
...config,
|
||||
categoryRelationCode: undefined,
|
||||
cascadingRole: undefined,
|
||||
cascadingParentField: undefined,
|
||||
|
|
@ -140,7 +140,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 🆕 같은 연쇄 관계의 부모 역할 컴포넌트 찾기
|
||||
const findParentComponent = (relationCode: string) => {
|
||||
console.log("🔍 findParentComponent 호출:", {
|
||||
|
|
@ -148,12 +148,12 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
allComponentsLength: allComponents?.length,
|
||||
currentComponentId: currentComponent?.id,
|
||||
});
|
||||
|
||||
|
||||
if (!allComponents || allComponents.length === 0) {
|
||||
console.log("❌ allComponents가 비어있음");
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
// 모든 컴포넌트의 cascading 설정 확인
|
||||
allComponents.forEach((comp: any) => {
|
||||
const compConfig = comp.componentConfig || {};
|
||||
|
|
@ -166,7 +166,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const found = allComponents.find((comp: any) => {
|
||||
const compConfig = comp.componentConfig || {};
|
||||
return (
|
||||
|
|
@ -175,7 +175,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
compConfig.cascadingRole === "parent"
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
console.log("🔍 찾은 부모 컴포넌트:", found);
|
||||
return found;
|
||||
};
|
||||
|
|
@ -183,7 +183,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
// 역할 변경 시 부모 필드 자동 감지
|
||||
const handleRoleChange = (role: "parent" | "child") => {
|
||||
let parentField = config.cascadingParentField;
|
||||
|
||||
|
||||
// 자식 역할 선택 시 부모 필드 자동 감지
|
||||
if (role === "child" && config.cascadingRelationCode) {
|
||||
const parentComp = findParentComponent(config.cascadingRelationCode);
|
||||
|
|
@ -192,9 +192,9 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
console.log("🔗 부모 필드 자동 감지:", parentField);
|
||||
}
|
||||
}
|
||||
|
||||
const newConfig = {
|
||||
...config,
|
||||
|
||||
const newConfig = {
|
||||
...config,
|
||||
cascadingRole: role,
|
||||
// 부모 역할일 때는 부모 필드 불필요, 자식일 때는 자동 감지된 값 또는 기존 값
|
||||
cascadingParentField: role === "parent" ? undefined : parentField,
|
||||
|
|
@ -203,13 +203,11 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
};
|
||||
|
||||
// 선택된 관계 정보
|
||||
const selectedRelation = relationList.find(r => r.relation_code === config.cascadingRelationCode);
|
||||
const selectedRelation = relationList.find((r) => r.relation_code === config.cascadingRelationCode);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm font-medium">
|
||||
select-basic 설정
|
||||
</div>
|
||||
<div className="text-sm font-medium">select-basic 설정</div>
|
||||
|
||||
{/* select 관련 설정 */}
|
||||
<div className="space-y-2">
|
||||
|
|
@ -259,23 +257,18 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</div>
|
||||
|
||||
{/* 연쇄 드롭다운 설정 */}
|
||||
<div className="border-t pt-4 mt-4 space-y-3">
|
||||
<div className="mt-4 space-y-3 border-t pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4" />
|
||||
<Label className="text-sm font-medium">연쇄 드롭다운</Label>
|
||||
</div>
|
||||
<Switch
|
||||
checked={cascadingEnabled}
|
||||
onCheckedChange={handleCascadingToggle}
|
||||
/>
|
||||
<Switch checked={cascadingEnabled} onCheckedChange={handleCascadingToggle} />
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
다른 필드의 값에 따라 옵션이 동적으로 변경됩니다.
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">다른 필드의 값에 따라 옵션이 동적으로 변경됩니다.</p>
|
||||
|
||||
{cascadingEnabled && (
|
||||
<div className="space-y-3 rounded-md border p-3 bg-muted/30">
|
||||
<div className="bg-muted/30 space-y-3 rounded-md border p-3">
|
||||
{/* 관계 선택 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">연쇄 관계 선택</Label>
|
||||
|
|
@ -326,66 +319,66 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</Button>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{config.cascadingRole === "parent"
|
||||
{config.cascadingRole === "parent"
|
||||
? "이 필드가 상위 선택 역할을 합니다. (예: 창고 선택)"
|
||||
: config.cascadingRole === "child"
|
||||
? "이 필드는 상위 필드 값에 따라 옵션이 변경됩니다. (예: 위치 선택)"
|
||||
: "이 필드의 역할을 선택하세요."}
|
||||
? "이 필드는 상위 필드 값에 따라 옵션이 변경됩니다. (예: 위치 선택)"
|
||||
: "이 필드의 역할을 선택하세요."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 부모 필드 설정 (자식 역할일 때만) */}
|
||||
{config.cascadingRelationCode && config.cascadingRole === "child" && (() => {
|
||||
// 선택된 관계에서 부모 값 컬럼 가져오기
|
||||
const expectedParentColumn = selectedRelation?.parent_value_column;
|
||||
|
||||
// 부모 역할에 맞는 컴포넌트만 필터링
|
||||
const parentFieldCandidates = allComponents.filter((comp) => {
|
||||
// 현재 컴포넌트 제외
|
||||
if (currentComponent && comp.id === currentComponent.id) return false;
|
||||
// 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
|
||||
if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
|
||||
// columnName이 있어야 함
|
||||
return !!comp.columnName;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">부모 필드 선택</Label>
|
||||
{expectedParentColumn && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
|
||||
</p>
|
||||
)}
|
||||
<Select
|
||||
value={config.cascadingParentField || ""}
|
||||
onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="부모 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parentFieldCandidates.map((comp) => (
|
||||
<SelectItem key={comp.id} value={comp.columnName}>
|
||||
{comp.label || comp.columnName} ({comp.columnName})
|
||||
</SelectItem>
|
||||
))}
|
||||
{parentFieldCandidates.length === 0 && (
|
||||
<div className="px-2 py-1.5 text-xs text-muted-foreground">
|
||||
{expectedParentColumn
|
||||
? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
|
||||
: "선택 가능한 부모 필드가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
상위 값을 제공할 필드를 선택하세요.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{config.cascadingRelationCode &&
|
||||
config.cascadingRole === "child" &&
|
||||
(() => {
|
||||
// 선택된 관계에서 부모 값 컬럼 가져오기
|
||||
const expectedParentColumn = selectedRelation?.parent_value_column;
|
||||
|
||||
// 부모 역할에 맞는 컴포넌트만 필터링
|
||||
const parentFieldCandidates = allComponents.filter((comp) => {
|
||||
// 현재 컴포넌트 제외
|
||||
if (currentComponent && comp.id === currentComponent.id) return false;
|
||||
// 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
|
||||
if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
|
||||
// columnName이 있어야 함
|
||||
return !!comp.columnName;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">부모 필드 선택</Label>
|
||||
{expectedParentColumn && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
|
||||
</p>
|
||||
)}
|
||||
<Select
|
||||
value={config.cascadingParentField || ""}
|
||||
onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="부모 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parentFieldCandidates.map((comp) => (
|
||||
<SelectItem key={comp.id} value={comp.columnName}>
|
||||
{comp.label || comp.columnName} ({comp.columnName})
|
||||
</SelectItem>
|
||||
))}
|
||||
{parentFieldCandidates.length === 0 && (
|
||||
<div className="text-muted-foreground px-2 py-1.5 text-xs">
|
||||
{expectedParentColumn
|
||||
? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
|
||||
: "선택 가능한 부모 필드가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">상위 값을 제공할 필드를 선택하세요.</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* 선택된 관계 정보 표시 */}
|
||||
{selectedRelation && config.cascadingRole && (
|
||||
|
|
@ -436,24 +429,22 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</div>
|
||||
|
||||
{/* 🆕 카테고리 값 연쇄관계 설정 */}
|
||||
<div className="border-t pt-4 mt-4 space-y-3">
|
||||
<div className="mt-4 space-y-3 border-t pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4" />
|
||||
<Label className="text-sm font-medium">카테고리 값 연쇄</Label>
|
||||
</div>
|
||||
<Switch
|
||||
checked={categoryRelationEnabled}
|
||||
onCheckedChange={handleCategoryRelationToggle}
|
||||
/>
|
||||
<Switch checked={categoryRelationEnabled} onCheckedChange={handleCategoryRelationToggle} />
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
부모 카테고리 값 선택에 따라 자식 카테고리 옵션이 변경됩니다.
|
||||
<br />예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
|
||||
<br />
|
||||
예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
|
||||
</p>
|
||||
|
||||
{categoryRelationEnabled && (
|
||||
<div className="space-y-3 rounded-md border p-3 bg-muted/30">
|
||||
<div className="bg-muted/30 space-y-3 rounded-md border p-3">
|
||||
{/* 관계 선택 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">카테고리 값 연쇄 관계 선택</Label>
|
||||
|
|
@ -470,7 +461,8 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
<div className="flex flex-col">
|
||||
<span>{relation.relation_name}</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{relation.parent_table_name}.{relation.parent_column_name} → {relation.child_table_name}.{relation.child_column_name}
|
||||
{relation.parent_table_name}.{relation.parent_column_name} → {relation.child_table_name}.
|
||||
{relation.child_column_name}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
|
|
@ -504,69 +496,69 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</Button>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{config.cascadingRole === "parent"
|
||||
{config.cascadingRole === "parent"
|
||||
? "이 필드가 상위 카테고리 선택 역할을 합니다. (예: 검사유형)"
|
||||
: config.cascadingRole === "child"
|
||||
? "이 필드는 상위 카테고리 값에 따라 옵션이 변경됩니다. (예: 적용대상)"
|
||||
: "이 필드의 역할을 선택하세요."}
|
||||
? "이 필드는 상위 카테고리 값에 따라 옵션이 변경됩니다. (예: 적용대상)"
|
||||
: "이 필드의 역할을 선택하세요."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 부모 필드 설정 (자식 역할일 때만) */}
|
||||
{(config as any).categoryRelationCode && config.cascadingRole === "child" && (() => {
|
||||
// 선택된 관계 정보 가져오기
|
||||
const selectedRelation = categoryRelationList.find(
|
||||
(r) => r.relation_code === (config as any).categoryRelationCode
|
||||
);
|
||||
const expectedParentColumn = selectedRelation?.parent_column_name;
|
||||
|
||||
// 부모 역할에 맞는 컴포넌트만 필터링
|
||||
const parentFieldCandidates = allComponents.filter((comp) => {
|
||||
// 현재 컴포넌트 제외
|
||||
if (currentComponent && comp.id === currentComponent.id) return false;
|
||||
// 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
|
||||
if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
|
||||
// columnName이 있어야 함
|
||||
return !!comp.columnName;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">부모 필드 선택</Label>
|
||||
{expectedParentColumn && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
|
||||
</p>
|
||||
)}
|
||||
<Select
|
||||
value={config.cascadingParentField || ""}
|
||||
onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="부모 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parentFieldCandidates.map((comp) => (
|
||||
<SelectItem key={comp.id} value={comp.columnName}>
|
||||
{comp.label || comp.columnName} ({comp.columnName})
|
||||
</SelectItem>
|
||||
))}
|
||||
{parentFieldCandidates.length === 0 && (
|
||||
<div className="px-2 py-1.5 text-xs text-muted-foreground">
|
||||
{expectedParentColumn
|
||||
? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
|
||||
: "선택 가능한 부모 필드가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
상위 카테고리 값을 제공할 필드를 선택하세요.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{(config as any).categoryRelationCode &&
|
||||
config.cascadingRole === "child" &&
|
||||
(() => {
|
||||
// 선택된 관계 정보 가져오기
|
||||
const selectedRelation = categoryRelationList.find(
|
||||
(r) => r.relation_code === (config as any).categoryRelationCode,
|
||||
);
|
||||
const expectedParentColumn = selectedRelation?.parent_column_name;
|
||||
|
||||
// 부모 역할에 맞는 컴포넌트만 필터링
|
||||
const parentFieldCandidates = allComponents.filter((comp) => {
|
||||
// 현재 컴포넌트 제외
|
||||
if (currentComponent && comp.id === currentComponent.id) return false;
|
||||
// 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
|
||||
if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
|
||||
// columnName이 있어야 함
|
||||
return !!comp.columnName;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">부모 필드 선택</Label>
|
||||
{expectedParentColumn && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
|
||||
</p>
|
||||
)}
|
||||
<Select
|
||||
value={config.cascadingParentField || ""}
|
||||
onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="부모 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parentFieldCandidates.map((comp) => (
|
||||
<SelectItem key={comp.id} value={comp.columnName}>
|
||||
{comp.label || comp.columnName} ({comp.columnName})
|
||||
</SelectItem>
|
||||
))}
|
||||
{parentFieldCandidates.length === 0 && (
|
||||
<div className="text-muted-foreground px-2 py-1.5 text-xs">
|
||||
{expectedParentColumn
|
||||
? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
|
||||
: "선택 가능한 부모 필드가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">상위 카테고리 값을 제공할 필드를 선택하세요.</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* 관계 관리 페이지 링크 */}
|
||||
<div className="flex justify-end">
|
||||
|
|
@ -580,6 +572,118 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 계층구조 코드 설정 */}
|
||||
<div className="mt-4 space-y-3 border-t pt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M12 2v4m0 12v4m-6-10H2m20 0h-4m-1.5-6.5L18 4m-12 0 1.5 1.5M6 18l-1.5 1.5M18 18l1.5 1.5" />
|
||||
</svg>
|
||||
<Label className="text-sm font-medium">계층구조 코드 설정</Label>
|
||||
</div>
|
||||
<div className="rounded border border-blue-200 bg-blue-50 p-2 text-xs text-blue-800">
|
||||
공통코드에 계층구조(depth 2 이상)가 있으면 자동으로 대분류 → 중분류 → 소분류 셀렉트박스로 표시됩니다.
|
||||
</div>
|
||||
|
||||
{/* 상세 설정 (항상 표시, 계층구조가 있을 때 적용됨) */}
|
||||
<div className="bg-muted/30 space-y-3 rounded-md border p-3">
|
||||
<p className="text-muted-foreground text-xs">계층구조 코드가 감지되면 아래 설정이 적용됩니다.</p>
|
||||
|
||||
{/* 코드 카테고리 선택 안내 */}
|
||||
{!config.codeCategory && (
|
||||
<div className="rounded border border-yellow-200 bg-yellow-50 p-2 text-xs text-yellow-800">
|
||||
먼저 상단에서 코드 카테고리를 선택해주세요.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 최대 깊이 선택 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">최대 깊이</Label>
|
||||
<Select
|
||||
value={String(config.hierarchicalMaxDepth || 3)}
|
||||
onValueChange={(value) => handleChange("hierarchicalMaxDepth", Number(value) as 1 | 2 | 3)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="깊이 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">1단계만</SelectItem>
|
||||
<SelectItem value="2">2단계까지</SelectItem>
|
||||
<SelectItem value="3">3단계까지</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">표시할 계층의 최대 깊이를 선택하세요.</p>
|
||||
</div>
|
||||
|
||||
{/* 1단계 라벨 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">1단계 라벨</Label>
|
||||
<Input
|
||||
value={config.hierarchicalLabels?.[0] || ""}
|
||||
onChange={(e) => {
|
||||
const newLabels: [string, string?, string?] = [
|
||||
e.target.value,
|
||||
config.hierarchicalLabels?.[1],
|
||||
config.hierarchicalLabels?.[2],
|
||||
];
|
||||
handleChange("hierarchicalLabels", newLabels);
|
||||
}}
|
||||
placeholder="예: 대분류"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 2단계 라벨 */}
|
||||
{(config.hierarchicalMaxDepth || 3) >= 2 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">2단계 라벨</Label>
|
||||
<Input
|
||||
value={config.hierarchicalLabels?.[1] || ""}
|
||||
onChange={(e) => {
|
||||
const newLabels: [string, string?, string?] = [
|
||||
config.hierarchicalLabels?.[0] || "대분류",
|
||||
e.target.value,
|
||||
config.hierarchicalLabels?.[2],
|
||||
];
|
||||
handleChange("hierarchicalLabels", newLabels);
|
||||
}}
|
||||
placeholder="예: 중분류"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 3단계 라벨 */}
|
||||
{(config.hierarchicalMaxDepth || 3) >= 3 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">3단계 라벨</Label>
|
||||
<Input
|
||||
value={config.hierarchicalLabels?.[2] || ""}
|
||||
onChange={(e) => {
|
||||
const newLabels: [string, string?, string?] = [
|
||||
config.hierarchicalLabels?.[0] || "대분류",
|
||||
config.hierarchicalLabels?.[1] || "중분류",
|
||||
e.target.value,
|
||||
];
|
||||
handleChange("hierarchicalLabels", newLabels);
|
||||
}}
|
||||
placeholder="예: 소분류"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 인라인 표시 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs">가로 배치</Label>
|
||||
<Switch
|
||||
checked={config.hierarchicalInline || false}
|
||||
onCheckedChange={(checked) => handleChange("hierarchicalInline", checked)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">셀렉트박스를 가로로 나란히 표시합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,6 +21,24 @@ export interface SelectBasicConfig extends ComponentConfig {
|
|||
cascadingRole?: "parent" | "child";
|
||||
/** 부모 필드명 (자식 역할일 때, 화면 내 부모 필드의 columnName) */
|
||||
cascadingParentField?: string;
|
||||
|
||||
// 🆕 계층구조 코드 설정
|
||||
/** 계층구조 코드 사용 여부 */
|
||||
useHierarchicalCode?: boolean;
|
||||
/** 계층구조 최대 깊이 (1, 2, 3) */
|
||||
hierarchicalMaxDepth?: 1 | 2 | 3;
|
||||
/** 각 단계별 라벨 */
|
||||
hierarchicalLabels?: [string, string?, string?];
|
||||
/** 각 단계별 placeholder */
|
||||
hierarchicalPlaceholders?: [string, string?, string?];
|
||||
/** 가로 배열 여부 */
|
||||
hierarchicalInline?: boolean;
|
||||
|
||||
// 🆕 다중 컬럼 계층구조 설정 (테이블 타입관리에서 설정)
|
||||
/** 계층 역할: 대분류(large), 중분류(medium), 소분류(small) */
|
||||
hierarchyRole?: "large" | "medium" | "small";
|
||||
/** 상위 계층 필드명 (중분류는 대분류 필드명, 소분류는 중분류 필드명) */
|
||||
hierarchyParentField?: string;
|
||||
|
||||
// 공통 설정
|
||||
disabled?: boolean;
|
||||
|
|
|
|||
|
|
@ -30,15 +30,12 @@ export const updateCategorySchema = categorySchema.omit({ categoryCode: true }).
|
|||
|
||||
// 코드 스키마
|
||||
export const codeSchema = z.object({
|
||||
codeValue: z
|
||||
.string()
|
||||
.min(1, "코드값은 필수입니다")
|
||||
.max(50, "코드값은 50자 이하여야 합니다")
|
||||
.regex(/^[A-Z0-9_]+$/, "대문자, 숫자, 언더스코어(_)만 사용 가능합니다"),
|
||||
codeValue: z.string().min(1, "코드값은 필수입니다").max(50, "코드값은 50자 이하여야 합니다"),
|
||||
codeName: z.string().min(1, "코드명은 필수입니다").max(100, "코드명은 100자 이하여야 합니다"),
|
||||
codeNameEng: z.string().min(1, "영문 코드명은 필수입니다").max(100, "영문 코드명은 100자 이하여야 합니다"),
|
||||
description: z.string().min(1, "설명은 필수입니다").max(500, "설명은 500자 이하여야 합니다"),
|
||||
codeNameEng: z.string().max(100, "영문 코드명은 100자 이하여야 합니다").optional().or(z.literal("")),
|
||||
description: z.string().max(500, "설명은 500자 이하여야 합니다").optional().or(z.literal("")),
|
||||
sortOrder: z.number().min(1, "정렬 순서는 1 이상이어야 합니다").max(9999, "정렬 순서는 9999 이하여야 합니다"),
|
||||
parentCodeValue: z.string().optional().nullable(), // 계층구조: 부모 코드값 (선택)
|
||||
});
|
||||
|
||||
// 코드 생성 스키마
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ export interface CodeInfo {
|
|||
sortOrder?: number;
|
||||
isActive?: string | boolean;
|
||||
useYn?: string;
|
||||
parentCodeValue?: string | null; // 계층구조: 부모 코드값
|
||||
depth?: number; // 계층구조: 깊이 (1, 2, 3단계)
|
||||
|
||||
// 기존 필드 (하위 호환성을 위해 유지)
|
||||
code_category?: string;
|
||||
|
|
@ -33,10 +35,14 @@ export interface CodeInfo {
|
|||
code_name_eng?: string | null;
|
||||
sort_order?: number;
|
||||
is_active?: string;
|
||||
parent_code_value?: string | null; // 계층구조: 부모 코드값
|
||||
created_date?: string | null;
|
||||
created_by?: string | null;
|
||||
updated_date?: string | null;
|
||||
updated_by?: string | null;
|
||||
|
||||
// 트리 구조용
|
||||
children?: CodeInfo[];
|
||||
}
|
||||
|
||||
export interface CreateCategoryRequest {
|
||||
|
|
@ -61,6 +67,7 @@ export interface CreateCodeRequest {
|
|||
codeNameEng?: string;
|
||||
description?: string;
|
||||
sortOrder?: number;
|
||||
parentCodeValue?: string; // 계층구조: 부모 코드값
|
||||
}
|
||||
|
||||
export interface UpdateCodeRequest {
|
||||
|
|
@ -69,6 +76,7 @@ export interface UpdateCodeRequest {
|
|||
description?: string;
|
||||
sortOrder?: number;
|
||||
isActive?: "Y" | "N"; // 백엔드에서 기대하는 문자열 타입
|
||||
parentCodeValue?: string; // 계층구조: 부모 코드값
|
||||
}
|
||||
|
||||
export interface CodeOption {
|
||||
|
|
|
|||
|
|
@ -1688,3 +1688,4 @@ const 출고등록_설정: ScreenSplitPanel = {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -535,3 +535,4 @@ const { data: config } = await getScreenSplitPanel(screenId);
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -522,3 +522,4 @@ function ScreenViewPage() {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue