2681 lines
90 KiB
TypeScript
2681 lines
90 KiB
TypeScript
"use client";
|
|
|
|
import React, { useCallback, useState, useEffect, useMemo } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { PopComponentRegistry } from "@/lib/registry/PopComponentRegistry";
|
|
import { usePopAction } from "@/hooks/pop/usePopAction";
|
|
import { executeTaskList, type CollectedPayload } from "@/hooks/pop/executePopAction";
|
|
import { usePopDesignerContext } from "@/components/pop/designer/PopDesignerContext";
|
|
import { usePopEvent } from "@/hooks/pop/usePopEvent";
|
|
import {
|
|
Save,
|
|
Trash2,
|
|
LogOut,
|
|
Menu,
|
|
ExternalLink,
|
|
Plus,
|
|
Check,
|
|
X,
|
|
Edit,
|
|
Search,
|
|
RefreshCw,
|
|
Download,
|
|
Upload,
|
|
Send,
|
|
Copy,
|
|
Settings,
|
|
ChevronDown,
|
|
ShoppingCart,
|
|
ShoppingBag,
|
|
PackageCheck,
|
|
ChevronRight,
|
|
GripVertical,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import type { CollectedDataResponse, StatusChangeRule, ConditionalValue } from "./types";
|
|
import { apiClient } from "@/lib/api/client";
|
|
import { TableCombobox } from "./pop-shared/TableCombobox";
|
|
import { ColumnCombobox } from "./pop-shared/ColumnCombobox";
|
|
import {
|
|
fetchTableList,
|
|
fetchTableColumns,
|
|
type TableInfo,
|
|
type ColumnInfo,
|
|
} from "./pop-dashboard/utils/dataFetcher";
|
|
|
|
// ========================================
|
|
// STEP 1: 타입 정의
|
|
// ========================================
|
|
|
|
/** 메인 액션 타입 (5종) */
|
|
export type ButtonActionType = "save" | "delete" | "api" | "modal" | "event";
|
|
|
|
/** 후속 액션 타입 (4종) */
|
|
export type FollowUpActionType = "event" | "refresh" | "navigate" | "close-modal";
|
|
|
|
/** 버튼 variant (shadcn 기반 4종) */
|
|
export type ButtonVariant = "default" | "secondary" | "outline" | "destructive";
|
|
|
|
/** 모달 열기 방식 */
|
|
export type ModalMode = "dropdown" | "fullscreen" | "screen-ref";
|
|
|
|
/** 확인 다이얼로그 설정 */
|
|
export interface ConfirmConfig {
|
|
enabled: boolean;
|
|
message?: string; // 빈값이면 기본 메시지
|
|
}
|
|
|
|
/** 후속 액션 1건 */
|
|
export interface FollowUpAction {
|
|
type: FollowUpActionType;
|
|
// event
|
|
eventName?: string;
|
|
eventPayload?: Record<string, unknown>;
|
|
// navigate
|
|
targetScreenId?: string;
|
|
params?: Record<string, string>;
|
|
}
|
|
|
|
/** 드롭다운 모달 메뉴 항목 */
|
|
export interface ModalMenuItem {
|
|
label: string;
|
|
screenId?: string;
|
|
action?: string; // 커스텀 이벤트명
|
|
}
|
|
|
|
/** 메인 액션 설정 */
|
|
export interface ButtonMainAction {
|
|
type: ButtonActionType;
|
|
// save/delete 공통
|
|
targetTable?: string;
|
|
// api
|
|
apiEndpoint?: string;
|
|
apiMethod?: "GET" | "POST" | "PUT" | "DELETE";
|
|
// modal
|
|
modalMode?: ModalMode;
|
|
modalScreenId?: string;
|
|
modalTitle?: string;
|
|
modalItems?: ModalMenuItem[];
|
|
// event
|
|
eventName?: string;
|
|
eventPayload?: Record<string, unknown>;
|
|
}
|
|
|
|
/** 프리셋 이름 */
|
|
export type ButtonPreset =
|
|
| "save"
|
|
| "delete"
|
|
| "logout"
|
|
| "menu"
|
|
| "modal-open"
|
|
| "cart"
|
|
| "inbound-confirm"
|
|
| "custom";
|
|
|
|
/** row_data 저장 모드 */
|
|
export type RowDataMode = "all" | "selected";
|
|
|
|
/** 장바구니 버튼 전용 설정 */
|
|
export interface CartButtonConfig {
|
|
cartScreenId?: string;
|
|
rowDataMode?: RowDataMode;
|
|
selectedColumns?: string[];
|
|
}
|
|
|
|
/** pop-button 전체 설정 */
|
|
export interface PopButtonConfig {
|
|
label: string;
|
|
variant: ButtonVariant;
|
|
icon?: string;
|
|
iconOnly?: boolean;
|
|
preset: ButtonPreset;
|
|
confirm?: ConfirmConfig;
|
|
action: ButtonMainAction;
|
|
followUpActions?: FollowUpAction[];
|
|
cart?: CartButtonConfig;
|
|
statusChangeRules?: StatusChangeRule[];
|
|
/** @deprecated inboundConfirm.statusChangeRules -> statusChangeRules로 이동 */
|
|
inboundConfirm?: { statusChangeRules?: StatusChangeRule[] };
|
|
}
|
|
|
|
// ========================================
|
|
// STEP 1-B: 통합 작업 목록 타입 (v2)
|
|
// ========================================
|
|
|
|
/** 작업 타입 (10종) */
|
|
export type ButtonTaskType =
|
|
| "data-save"
|
|
| "data-update"
|
|
| "data-delete"
|
|
| "cart-save"
|
|
| "modal-open"
|
|
| "navigate"
|
|
| "close-modal"
|
|
| "refresh"
|
|
| "api-call"
|
|
| "custom-event";
|
|
|
|
/** 데이터 수정 연산 */
|
|
export type UpdateOperationType = "assign" | "add" | "subtract" | "multiply" | "divide" | "conditional" | "db-conditional";
|
|
|
|
/** 데이터 수정 값 출처 */
|
|
export type UpdateValueSource = "fixed" | "linked" | "reference";
|
|
|
|
/** 작업 1건 설정 */
|
|
export interface ButtonTask {
|
|
id: string;
|
|
type: ButtonTaskType;
|
|
label?: string;
|
|
|
|
// data-update / data-delete
|
|
targetTable?: string;
|
|
targetColumn?: string;
|
|
operationType?: UpdateOperationType;
|
|
valueSource?: UpdateValueSource;
|
|
fixedValue?: string;
|
|
sourceField?: string;
|
|
referenceTable?: string;
|
|
referenceColumn?: string;
|
|
referenceJoinKey?: string;
|
|
conditionalValue?: ConditionalValue;
|
|
// db-conditional (DB 컬럼 간 비교 후 값 판정)
|
|
compareColumn?: string;
|
|
compareOperator?: "=" | "!=" | ">" | "<" | ">=" | "<=";
|
|
compareWith?: string;
|
|
dbThenValue?: string;
|
|
dbElseValue?: string;
|
|
lookupMode?: "auto" | "manual";
|
|
manualItemField?: string;
|
|
manualPkColumn?: string;
|
|
|
|
// cart-save
|
|
cartScreenId?: string;
|
|
|
|
// modal-open
|
|
modalMode?: ModalMode;
|
|
modalScreenId?: string;
|
|
modalTitle?: string;
|
|
modalItems?: ModalMenuItem[];
|
|
|
|
// navigate
|
|
targetScreenId?: string;
|
|
params?: Record<string, string>;
|
|
|
|
// api-call
|
|
apiEndpoint?: string;
|
|
apiMethod?: "GET" | "POST" | "PUT" | "DELETE";
|
|
|
|
// custom-event
|
|
eventName?: string;
|
|
eventPayload?: Record<string, unknown>;
|
|
}
|
|
|
|
/** 빠른 시작 템플릿 */
|
|
export type QuickStartTemplate = "save" | "delete" | "confirm" | "cart" | "modal" | "custom";
|
|
|
|
/** pop-button 설정 v2 (작업 목록 기반) */
|
|
export interface PopButtonConfigV2 {
|
|
label: string;
|
|
variant: ButtonVariant;
|
|
icon?: string;
|
|
iconOnly?: boolean;
|
|
confirm?: ConfirmConfig;
|
|
tasks: ButtonTask[];
|
|
}
|
|
|
|
/** 기존 config(v1) → v2 변환. tasks 필드가 이미 있으면 그대로 반환. */
|
|
export function migrateButtonConfig(old: PopButtonConfig): PopButtonConfigV2 {
|
|
if ("tasks" in old && Array.isArray((old as unknown as PopButtonConfigV2).tasks)) {
|
|
return old as unknown as PopButtonConfigV2;
|
|
}
|
|
|
|
const tasks: ButtonTask[] = [];
|
|
let tid = 1;
|
|
const nextId = () => `t${tid++}`;
|
|
|
|
// 메인 액션 → task 변환
|
|
if (old.preset === "cart") {
|
|
tasks.push({ id: nextId(), type: "cart-save", cartScreenId: old.cart?.cartScreenId });
|
|
} else if (old.action?.type === "modal") {
|
|
tasks.push({
|
|
id: nextId(),
|
|
type: "modal-open",
|
|
modalMode: old.action.modalMode,
|
|
modalScreenId: old.action.modalScreenId,
|
|
modalTitle: old.action.modalTitle,
|
|
modalItems: old.action.modalItems,
|
|
});
|
|
} else if (old.action?.type === "delete") {
|
|
tasks.push({ id: nextId(), type: "data-delete", targetTable: old.action.targetTable });
|
|
} else if (old.action?.type === "api") {
|
|
tasks.push({
|
|
id: nextId(),
|
|
type: "api-call",
|
|
apiEndpoint: old.action.apiEndpoint,
|
|
apiMethod: old.action.apiMethod,
|
|
});
|
|
} else if (old.action?.type === "event" && old.preset !== "inbound-confirm") {
|
|
tasks.push({
|
|
id: nextId(),
|
|
type: "custom-event",
|
|
eventName: old.action.eventName,
|
|
eventPayload: old.action.eventPayload,
|
|
});
|
|
} else {
|
|
// save / inbound-confirm / 기본
|
|
tasks.push({ id: nextId(), type: "data-save" });
|
|
}
|
|
|
|
// 상태변경 규칙 → data-update task
|
|
const rules = old.statusChangeRules ?? old.inboundConfirm?.statusChangeRules ?? [];
|
|
for (const rule of rules) {
|
|
tasks.push({
|
|
id: nextId(),
|
|
type: "data-update",
|
|
targetTable: rule.targetTable,
|
|
targetColumn: rule.targetColumn,
|
|
operationType: "assign",
|
|
valueSource: rule.valueType === "conditional" ? "fixed" : "fixed",
|
|
fixedValue: rule.fixedValue,
|
|
conditionalValue: rule.conditionalValue,
|
|
lookupMode: rule.lookupMode,
|
|
manualItemField: rule.manualItemField,
|
|
manualPkColumn: rule.manualPkColumn,
|
|
});
|
|
}
|
|
|
|
// 후속 액션 → task
|
|
for (const fa of old.followUpActions ?? []) {
|
|
switch (fa.type) {
|
|
case "refresh":
|
|
tasks.push({ id: nextId(), type: "refresh" });
|
|
break;
|
|
case "navigate":
|
|
tasks.push({ id: nextId(), type: "navigate", targetScreenId: fa.targetScreenId, params: fa.params });
|
|
break;
|
|
case "close-modal":
|
|
tasks.push({ id: nextId(), type: "close-modal" });
|
|
break;
|
|
case "event":
|
|
tasks.push({ id: nextId(), type: "custom-event", eventName: fa.eventName, eventPayload: fa.eventPayload });
|
|
break;
|
|
}
|
|
}
|
|
|
|
return {
|
|
label: old.label,
|
|
variant: old.variant,
|
|
icon: old.icon,
|
|
iconOnly: old.iconOnly,
|
|
confirm: old.confirm,
|
|
tasks,
|
|
};
|
|
}
|
|
|
|
/** 작업 타입 한글 라벨 */
|
|
export const TASK_TYPE_LABELS: Record<ButtonTaskType, string> = {
|
|
"data-save": "데이터 저장",
|
|
"data-update": "데이터 수정",
|
|
"data-delete": "데이터 삭제",
|
|
"cart-save": "장바구니 저장",
|
|
"modal-open": "모달 열기",
|
|
"navigate": "페이지 이동",
|
|
"close-modal": "모달 닫기",
|
|
"refresh": "새로고침",
|
|
"api-call": "API 호출",
|
|
"custom-event": "커스텀 이벤트",
|
|
};
|
|
|
|
/** 빠른 시작 템플릿별 기본 작업 목록 + 외형 */
|
|
export const QUICK_START_DEFAULTS: Record<QuickStartTemplate, { label: string; variant: ButtonVariant; icon: string; confirm?: ConfirmConfig; tasks: ButtonTask[] }> = {
|
|
save: {
|
|
label: "저장",
|
|
variant: "default",
|
|
icon: "Save",
|
|
confirm: { enabled: false },
|
|
tasks: [{ id: "t1", type: "data-save" }],
|
|
},
|
|
delete: {
|
|
label: "삭제",
|
|
variant: "destructive",
|
|
icon: "Trash2",
|
|
confirm: { enabled: true, message: "삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다." },
|
|
tasks: [{ id: "t1", type: "data-delete" }],
|
|
},
|
|
confirm: {
|
|
label: "확정",
|
|
variant: "default",
|
|
icon: "PackageCheck",
|
|
confirm: { enabled: true, message: "선택한 항목을 확정하시겠습니까?" },
|
|
tasks: [
|
|
{ id: "t1", type: "data-save" },
|
|
{ id: "t2", type: "data-update" },
|
|
{ id: "t3", type: "refresh" },
|
|
],
|
|
},
|
|
cart: {
|
|
label: "장바구니 저장",
|
|
variant: "default",
|
|
icon: "ShoppingCart",
|
|
confirm: { enabled: true, message: "장바구니에 담은 항목을 저장하시겠습니까?" },
|
|
tasks: [{ id: "t1", type: "cart-save" }],
|
|
},
|
|
modal: {
|
|
label: "열기",
|
|
variant: "outline",
|
|
icon: "ExternalLink",
|
|
confirm: { enabled: false },
|
|
tasks: [{ id: "t1", type: "modal-open" }],
|
|
},
|
|
custom: {
|
|
label: "버튼",
|
|
variant: "default",
|
|
icon: "none",
|
|
confirm: { enabled: false },
|
|
tasks: [],
|
|
},
|
|
};
|
|
|
|
// ========================================
|
|
// 상수
|
|
// ========================================
|
|
|
|
/** 메인 액션 타입 라벨 */
|
|
const ACTION_TYPE_LABELS: Record<ButtonActionType, string> = {
|
|
save: "저장",
|
|
delete: "삭제",
|
|
api: "API 호출",
|
|
modal: "모달 열기",
|
|
event: "이벤트 발행",
|
|
};
|
|
|
|
/** 후속 액션 타입 라벨 */
|
|
const FOLLOWUP_TYPE_LABELS: Record<FollowUpActionType, string> = {
|
|
event: "이벤트 발행",
|
|
refresh: "새로고침",
|
|
navigate: "화면 이동",
|
|
"close-modal": "모달 닫기",
|
|
};
|
|
|
|
/** variant 라벨 */
|
|
const VARIANT_LABELS: Record<ButtonVariant, string> = {
|
|
default: "기본 (Primary)",
|
|
secondary: "보조 (Secondary)",
|
|
outline: "외곽선 (Outline)",
|
|
destructive: "위험 (Destructive)",
|
|
};
|
|
|
|
/** 프리셋 라벨 */
|
|
const PRESET_LABELS: Record<ButtonPreset, string> = {
|
|
save: "저장",
|
|
delete: "삭제",
|
|
logout: "로그아웃",
|
|
menu: "메뉴 (드롭다운)",
|
|
"modal-open": "모달 열기",
|
|
cart: "장바구니 저장",
|
|
"inbound-confirm": "입고 확정",
|
|
custom: "직접 설정",
|
|
};
|
|
|
|
/** 모달 모드 라벨 */
|
|
const MODAL_MODE_LABELS: Record<ModalMode, string> = {
|
|
dropdown: "드롭다운",
|
|
fullscreen: "전체 모달",
|
|
"screen-ref": "화면 선택",
|
|
};
|
|
|
|
/** API 메서드 라벨 */
|
|
const API_METHOD_LABELS: Record<string, string> = {
|
|
GET: "GET",
|
|
POST: "POST",
|
|
PUT: "PUT",
|
|
DELETE: "DELETE",
|
|
};
|
|
|
|
/** 주요 Lucide 아이콘 목록 (설정 패널용) */
|
|
const ICON_OPTIONS: { value: string; label: string }[] = [
|
|
{ value: "none", label: "없음" },
|
|
{ value: "Save", label: "저장 (Save)" },
|
|
{ value: "Trash2", label: "삭제 (Trash)" },
|
|
{ value: "LogOut", label: "로그아웃 (LogOut)" },
|
|
{ value: "Menu", label: "메뉴 (Menu)" },
|
|
{ value: "ExternalLink", label: "외부링크 (ExternalLink)" },
|
|
{ value: "Plus", label: "추가 (Plus)" },
|
|
{ value: "Check", label: "확인 (Check)" },
|
|
{ value: "X", label: "취소 (X)" },
|
|
{ value: "Edit", label: "수정 (Edit)" },
|
|
{ value: "Search", label: "검색 (Search)" },
|
|
{ value: "RefreshCw", label: "새로고침 (RefreshCw)" },
|
|
{ value: "Download", label: "다운로드 (Download)" },
|
|
{ value: "Upload", label: "업로드 (Upload)" },
|
|
{ value: "Send", label: "전송 (Send)" },
|
|
{ value: "Copy", label: "복사 (Copy)" },
|
|
{ value: "Settings", label: "설정 (Settings)" },
|
|
{ value: "ChevronDown", label: "아래 화살표 (ChevronDown)" },
|
|
{ value: "ShoppingCart", label: "장바구니 (ShoppingCart)" },
|
|
{ value: "ShoppingBag", label: "장바구니 담김 (ShoppingBag)" },
|
|
];
|
|
|
|
/** 프리셋별 기본 설정 */
|
|
const PRESET_DEFAULTS: Record<ButtonPreset, Partial<PopButtonConfig>> = {
|
|
save: {
|
|
label: "저장",
|
|
variant: "default",
|
|
icon: "Save",
|
|
confirm: { enabled: false },
|
|
action: { type: "save" },
|
|
},
|
|
delete: {
|
|
label: "삭제",
|
|
variant: "destructive",
|
|
icon: "Trash2",
|
|
confirm: { enabled: true, message: "" },
|
|
action: { type: "delete" },
|
|
},
|
|
logout: {
|
|
label: "로그아웃",
|
|
variant: "outline",
|
|
icon: "LogOut",
|
|
confirm: { enabled: true, message: "로그아웃 하시겠습니까?" },
|
|
action: {
|
|
type: "api",
|
|
apiEndpoint: "/api/auth/logout",
|
|
apiMethod: "POST",
|
|
},
|
|
},
|
|
menu: {
|
|
label: "메뉴",
|
|
variant: "secondary",
|
|
icon: "Menu",
|
|
confirm: { enabled: false },
|
|
action: { type: "modal", modalMode: "dropdown" },
|
|
},
|
|
"modal-open": {
|
|
label: "열기",
|
|
variant: "outline",
|
|
icon: "ExternalLink",
|
|
confirm: { enabled: false },
|
|
action: { type: "modal", modalMode: "fullscreen" },
|
|
},
|
|
cart: {
|
|
label: "장바구니 저장",
|
|
variant: "default",
|
|
icon: "ShoppingCart",
|
|
confirm: { enabled: true, message: "장바구니에 담은 항목을 저장하시겠습니까?" },
|
|
action: { type: "event" },
|
|
},
|
|
"inbound-confirm": {
|
|
label: "입고 확정",
|
|
variant: "default",
|
|
icon: "PackageCheck",
|
|
confirm: { enabled: true, message: "선택한 품목을 입고 확정하시겠습니까?" },
|
|
action: { type: "event" },
|
|
},
|
|
custom: {
|
|
label: "버튼",
|
|
variant: "default",
|
|
icon: "none",
|
|
confirm: { enabled: false },
|
|
action: { type: "save" },
|
|
},
|
|
};
|
|
|
|
/** 확인 다이얼로그 기본 메시지 (액션별) */
|
|
const DEFAULT_CONFIRM_MESSAGES: Record<ButtonActionType, string> = {
|
|
save: "저장하시겠습니까?",
|
|
delete: "삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
|
|
api: "실행하시겠습니까?",
|
|
modal: "열기하시겠습니까?",
|
|
event: "실행하시겠습니까?",
|
|
};
|
|
|
|
// ========================================
|
|
// 헬퍼 함수
|
|
// ========================================
|
|
|
|
/** 섹션 구분선 */
|
|
function SectionDivider({ label }: { label: string }) {
|
|
return (
|
|
<div className="pt-3 pb-1">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-px flex-1 bg-gray-300" />
|
|
<span className="text-xs font-medium text-gray-500">{label}</span>
|
|
<div className="h-px flex-1 bg-gray-300" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 장바구니 데이터 매핑 행 (읽기 전용) */
|
|
function CartMappingRow({
|
|
source,
|
|
target,
|
|
desc,
|
|
auto,
|
|
}: {
|
|
source: string;
|
|
target: string;
|
|
desc?: string;
|
|
auto?: boolean;
|
|
}) {
|
|
return (
|
|
<div className="flex items-start gap-1 py-0.5">
|
|
<span className={cn("min-w-0 flex-1 text-[10px]", auto ? "text-muted-foreground" : "text-foreground")}>
|
|
{source}
|
|
</span>
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">→</span>
|
|
<div className="shrink-0 text-right">
|
|
<code className="rounded bg-muted px-1 font-mono text-[10px] text-foreground">
|
|
{target}
|
|
</code>
|
|
{desc && (
|
|
<p className="mt-0.5 text-[9px] text-muted-foreground leading-tight">{desc}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 허용된 아이콘 맵 (개별 import로 트리 쉐이킹 적용) */
|
|
const LUCIDE_ICON_MAP: Record<string, LucideIcon> = {
|
|
Save, Trash2, LogOut, Menu, ExternalLink, Plus, Check, X,
|
|
Edit, Search, RefreshCw, Download, Upload, Send, Copy, Settings, ChevronDown,
|
|
ShoppingCart,
|
|
ShoppingBag,
|
|
PackageCheck,
|
|
ChevronRight,
|
|
GripVertical,
|
|
};
|
|
|
|
/** Lucide 아이콘 동적 렌더링 */
|
|
function DynamicLucideIcon({
|
|
name,
|
|
size = 16,
|
|
className,
|
|
}: {
|
|
name: string;
|
|
size?: number;
|
|
className?: string;
|
|
}) {
|
|
const IconComponent = LUCIDE_ICON_MAP[name];
|
|
if (!IconComponent) return null;
|
|
return <IconComponent size={size} className={className} />;
|
|
}
|
|
|
|
// ========================================
|
|
// STEP 2: 메인 컴포넌트
|
|
// ========================================
|
|
|
|
interface PopButtonComponentProps {
|
|
config?: PopButtonConfig;
|
|
label?: string;
|
|
isDesignMode?: boolean;
|
|
screenId?: string;
|
|
componentId?: string;
|
|
}
|
|
|
|
export function PopButtonComponent({
|
|
config,
|
|
label,
|
|
isDesignMode,
|
|
screenId,
|
|
componentId,
|
|
}: PopButtonComponentProps) {
|
|
const {
|
|
execute,
|
|
isLoading,
|
|
pendingConfirm,
|
|
confirmExecute,
|
|
cancelConfirm,
|
|
} = usePopAction(screenId || "");
|
|
|
|
const { subscribe, publish } = usePopEvent(screenId || "default");
|
|
|
|
// 장바구니 모드 상태
|
|
const isCartMode = config?.preset === "cart";
|
|
const isInboundConfirmMode = config?.preset === "inbound-confirm";
|
|
const [cartCount, setCartCount] = useState(0);
|
|
const [cartIsDirty, setCartIsDirty] = useState(false);
|
|
const [cartSaving, setCartSaving] = useState(false);
|
|
const [showCartConfirm, setShowCartConfirm] = useState(false);
|
|
const [confirmProcessing, setConfirmProcessing] = useState(false);
|
|
const [showInboundConfirm, setShowInboundConfirm] = useState(false);
|
|
const [inboundSelectedCount, setInboundSelectedCount] = useState(0);
|
|
const [generatedCodesResult, setGeneratedCodesResult] = useState<Array<{ targetColumn: string; code: string; showResultModal?: boolean }>>([]);
|
|
|
|
const [deferredV2Tasks, setDeferredV2Tasks] = useState<Array<{ type: string; targetScreenId?: string; params?: Record<string, string> }>>([]);
|
|
|
|
const handleCloseGeneratedCodesModal = useCallback(() => {
|
|
setGeneratedCodesResult([]);
|
|
toast.success("작업 완료");
|
|
publish(`__comp_output__${componentId}__action_completed`, {
|
|
action: "task-list",
|
|
success: true,
|
|
});
|
|
|
|
// v2 보류된 작업 실행
|
|
if (deferredV2Tasks.length > 0) {
|
|
for (const task of deferredV2Tasks) {
|
|
if (task.type === "navigate" && task.targetScreenId) {
|
|
publish("__pop_navigate__", { screenId: task.targetScreenId, params: task.params });
|
|
}
|
|
}
|
|
setDeferredV2Tasks([]);
|
|
return;
|
|
}
|
|
|
|
// v1 후속 액션
|
|
const followUps = config?.followUpActions ?? [];
|
|
for (const fa of followUps) {
|
|
switch (fa.type) {
|
|
case "navigate":
|
|
if (fa.targetScreenId) {
|
|
publish("__pop_navigate__", { screenId: fa.targetScreenId, params: fa.params });
|
|
}
|
|
break;
|
|
case "refresh":
|
|
publish("__pop_refresh__");
|
|
break;
|
|
case "event":
|
|
if (fa.eventName) publish(fa.eventName, fa.eventPayload);
|
|
break;
|
|
}
|
|
}
|
|
}, [componentId, publish, config?.followUpActions, deferredV2Tasks]);
|
|
|
|
// v2 작업 목록 감지 (선택 항목 구독보다 먼저 선언)
|
|
const v2Config = useMemo(() => {
|
|
if (!config) return null;
|
|
if ("tasks" in config && Array.isArray((config as unknown as PopButtonConfigV2).tasks)) {
|
|
return config as unknown as PopButtonConfigV2;
|
|
}
|
|
return null;
|
|
}, [config]);
|
|
|
|
// 선택 항목 수 수신 (v1 inbound-confirm + v2 모두 활성)
|
|
const hasDataTasks = useMemo(() => {
|
|
if (isInboundConfirmMode) return true;
|
|
if (!v2Config) return false;
|
|
return v2Config.tasks.some((t) => t.type === "data-save" || t.type === "data-update");
|
|
}, [isInboundConfirmMode, v2Config]);
|
|
|
|
useEffect(() => {
|
|
if (!hasDataTasks || !componentId) return;
|
|
const unsub = subscribe(
|
|
`__comp_input__${componentId}__selected_items`,
|
|
(payload: unknown) => {
|
|
const data = payload as { value?: unknown[] } | undefined;
|
|
const items = Array.isArray(data?.value) ? data.value : [];
|
|
setInboundSelectedCount(items.length);
|
|
}
|
|
);
|
|
return unsub;
|
|
}, [hasDataTasks, componentId, subscribe]);
|
|
|
|
// 장바구니 상태 수신 (카드 목록에서 count/isDirty 전달)
|
|
useEffect(() => {
|
|
if (!isCartMode || !componentId) return;
|
|
const unsub = subscribe(
|
|
`__comp_input__${componentId}__cart_updated`,
|
|
(payload: unknown) => {
|
|
const data = payload as { value?: { count?: number; isDirty?: boolean } } | undefined;
|
|
const inner = data?.value;
|
|
if (inner?.count !== undefined) setCartCount(inner.count);
|
|
if (inner?.isDirty !== undefined) setCartIsDirty(inner.isDirty);
|
|
}
|
|
);
|
|
return unsub;
|
|
}, [isCartMode, componentId, subscribe]);
|
|
|
|
// 저장 완료 수신 (카드 목록에서 saveToDb 완료 후 전달)
|
|
const cartScreenIdRef = React.useRef(config?.cart?.cartScreenId);
|
|
cartScreenIdRef.current = config?.cart?.cartScreenId;
|
|
|
|
useEffect(() => {
|
|
if (!isCartMode || !componentId) return;
|
|
const unsub = subscribe(
|
|
`__comp_input__${componentId}__cart_save_completed`,
|
|
(payload: unknown) => {
|
|
const data = payload as { value?: { success?: boolean } } | undefined;
|
|
setCartSaving(false);
|
|
if (data?.value?.success) {
|
|
setCartIsDirty(false);
|
|
const targetScreenId = cartScreenIdRef.current;
|
|
if (targetScreenId) {
|
|
const cleanId = targetScreenId.replace(/^.*\/(\d+)$/, "$1").trim();
|
|
window.location.href = `/pop/screens/${cleanId}`;
|
|
} else {
|
|
toast.success("장바구니가 저장되었습니다.");
|
|
}
|
|
} else {
|
|
toast.error("장바구니 저장에 실패했습니다.");
|
|
}
|
|
}
|
|
);
|
|
return unsub;
|
|
}, [isCartMode, componentId, subscribe]);
|
|
|
|
const getConfirmMessage = useCallback((): string => {
|
|
if (pendingConfirm?.confirm?.message) return pendingConfirm.confirm.message;
|
|
if (config?.confirm?.message) return config.confirm.message;
|
|
return DEFAULT_CONFIRM_MESSAGES[config?.action?.type || "save"];
|
|
}, [pendingConfirm?.confirm?.message, config?.confirm?.message, config?.action?.type]);
|
|
|
|
// 장바구니 저장 트리거 (연결 미설정 시 10초 타임아웃으로 복구)
|
|
const cartSaveTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
const handleCartSave = useCallback(() => {
|
|
if (!componentId) return;
|
|
setCartSaving(true);
|
|
const selectedCols =
|
|
config?.cart?.rowDataMode === "selected" ? config.cart.selectedColumns : undefined;
|
|
publish(`__comp_output__${componentId}__cart_save_trigger`, {
|
|
selectedColumns: selectedCols,
|
|
});
|
|
|
|
if (cartSaveTimeoutRef.current) clearTimeout(cartSaveTimeoutRef.current);
|
|
cartSaveTimeoutRef.current = setTimeout(() => {
|
|
setCartSaving((prev) => {
|
|
if (prev) {
|
|
toast.error("장바구니 저장 응답이 없습니다. 연결 설정을 확인하세요.");
|
|
}
|
|
return false;
|
|
});
|
|
}, 10_000);
|
|
}, [componentId, publish, config?.cart?.rowDataMode, config?.cart?.selectedColumns]);
|
|
|
|
// 저장 완료 시 타임아웃 정리
|
|
useEffect(() => {
|
|
if (!cartSaving && cartSaveTimeoutRef.current) {
|
|
clearTimeout(cartSaveTimeoutRef.current);
|
|
cartSaveTimeoutRef.current = null;
|
|
}
|
|
}, [cartSaving]);
|
|
|
|
// 입고 확정: 데이터 수집 → API 호출
|
|
const handleInboundConfirm = useCallback(async () => {
|
|
if (!componentId) return;
|
|
setConfirmProcessing(true);
|
|
|
|
try {
|
|
// 동기적 이벤트 수집 (connectionResolver가 동기 중계)
|
|
const responses: CollectedDataResponse[] = [];
|
|
const unsub = subscribe(
|
|
`__comp_input__${componentId}__collected_data`,
|
|
(payload: unknown) => {
|
|
const enriched = payload as { value?: CollectedDataResponse };
|
|
if (enriched?.value) {
|
|
responses.push(enriched.value);
|
|
}
|
|
}
|
|
);
|
|
|
|
publish(`__comp_output__${componentId}__collect_data`, {
|
|
requestId: crypto.randomUUID(),
|
|
action: "inbound-confirm",
|
|
});
|
|
|
|
unsub();
|
|
|
|
if (responses.length === 0) {
|
|
toast.error("연결된 컴포넌트에서 데이터를 수집할 수 없습니다. 연결 설정을 확인하세요.");
|
|
return;
|
|
}
|
|
|
|
const cardListData = responses.find(r => r.componentType === "pop-card-list");
|
|
const fieldData = responses.find(r => r.componentType === "pop-field");
|
|
|
|
const selectedItems = cardListData?.data?.items ?? [];
|
|
if (selectedItems.length === 0) {
|
|
toast.error("확정할 항목을 선택해주세요.");
|
|
return;
|
|
}
|
|
|
|
const fieldValues = fieldData?.data?.values ?? {};
|
|
|
|
const statusChangeRules = config?.statusChangeRules ?? config?.inboundConfirm?.statusChangeRules ?? [];
|
|
|
|
const cardListMapping = cardListData?.mapping ?? null;
|
|
const fieldMapping = fieldData?.mapping ?? null;
|
|
|
|
const result = await apiClient.post("/pop/execute-action", {
|
|
action: "inbound-confirm",
|
|
data: {
|
|
items: selectedItems,
|
|
fieldValues,
|
|
},
|
|
mappings: {
|
|
cardList: cardListMapping,
|
|
field: fieldMapping,
|
|
},
|
|
statusChanges: statusChangeRules,
|
|
});
|
|
|
|
if (result.data?.success) {
|
|
const codes: Array<{ targetColumn: string; code: string; showResultModal?: boolean }> = result.data.data?.generatedCodes ?? [];
|
|
const modalCodes = codes.filter((c) => c.showResultModal);
|
|
if (modalCodes.length > 0) {
|
|
setGeneratedCodesResult(modalCodes);
|
|
} else {
|
|
toast.success(`${selectedItems.length}건 입고 확정 완료`);
|
|
publish(`__comp_output__${componentId}__action_completed`, {
|
|
action: "inbound-confirm",
|
|
success: true,
|
|
count: selectedItems.length,
|
|
});
|
|
const followUps = config?.followUpActions ?? [];
|
|
for (const fa of followUps) {
|
|
switch (fa.type) {
|
|
case "navigate":
|
|
if (fa.targetScreenId) {
|
|
publish("__pop_navigate__", { screenId: fa.targetScreenId, params: fa.params });
|
|
}
|
|
break;
|
|
case "refresh":
|
|
publish("__pop_refresh__");
|
|
break;
|
|
case "event":
|
|
if (fa.eventName) publish(fa.eventName, fa.eventPayload);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
toast.error(result.data?.message || "입고 확정에 실패했습니다.");
|
|
}
|
|
} catch (err: unknown) {
|
|
const message = err instanceof Error ? err.message : "입고 확정 중 오류가 발생했습니다.";
|
|
toast.error(message);
|
|
} finally {
|
|
setConfirmProcessing(false);
|
|
setShowInboundConfirm(false);
|
|
}
|
|
}, [componentId, subscribe, publish, config?.statusChangeRules, config?.inboundConfirm?.statusChangeRules, config?.followUpActions]);
|
|
|
|
// v2: 데이터 수집 → executeTaskList 호출
|
|
const handleV2Execute = useCallback(async () => {
|
|
if (!v2Config || !componentId) return;
|
|
setConfirmProcessing(true);
|
|
|
|
try {
|
|
const responses: CollectedDataResponse[] = [];
|
|
const unsub = subscribe(
|
|
`__comp_input__${componentId}__collected_data`,
|
|
(payload: unknown) => {
|
|
const enriched = payload as { value?: CollectedDataResponse };
|
|
if (enriched?.value) responses.push(enriched.value);
|
|
},
|
|
);
|
|
|
|
publish(`__comp_output__${componentId}__collect_data`, {
|
|
requestId: crypto.randomUUID(),
|
|
action: "task-list",
|
|
});
|
|
unsub();
|
|
|
|
const cardListData = responses.find((r) => r.componentType === "pop-card-list");
|
|
const fieldData = responses.find((r) => r.componentType === "pop-field");
|
|
|
|
const collectedData: CollectedPayload = {
|
|
items: cardListData?.data?.items ?? [],
|
|
fieldValues: fieldData?.data?.values ?? {},
|
|
mappings: {
|
|
cardList: cardListData?.mapping ?? null,
|
|
field: fieldData?.mapping ?? null,
|
|
},
|
|
cartChanges: (cardListData?.data as Record<string, unknown>)?.cartChanges as CollectedPayload["cartChanges"],
|
|
};
|
|
|
|
const result = await executeTaskList(v2Config.tasks, {
|
|
publish,
|
|
componentId,
|
|
collectedData,
|
|
});
|
|
|
|
if (result.success) {
|
|
const resultData = result.data as Record<string, unknown> | undefined;
|
|
const generatedCodes = resultData?.generatedCodes as
|
|
Array<{ targetColumn: string; code: string; showResultModal?: boolean }> | undefined;
|
|
const deferred = resultData?.deferredTasks as
|
|
Array<{ type: string; targetScreenId?: string; params?: Record<string, string> }> | undefined;
|
|
|
|
if (generatedCodes?.some((g) => g.showResultModal)) {
|
|
setGeneratedCodesResult(generatedCodes);
|
|
if (deferred && deferred.length > 0) {
|
|
setDeferredV2Tasks(deferred);
|
|
}
|
|
} else {
|
|
toast.success("작업 완료");
|
|
}
|
|
} else {
|
|
toast.error(result.error || "작업 실행에 실패했습니다.");
|
|
}
|
|
} catch (err: unknown) {
|
|
const message = err instanceof Error ? err.message : "작업 실행 중 오류가 발생했습니다.";
|
|
toast.error(message);
|
|
} finally {
|
|
setConfirmProcessing(false);
|
|
}
|
|
}, [v2Config, componentId, subscribe, publish]);
|
|
|
|
// 클릭 핸들러
|
|
const handleClick = useCallback(async () => {
|
|
if (isDesignMode) {
|
|
const modeLabel = v2Config
|
|
? v2Config.tasks.map((t) => TASK_TYPE_LABELS[t.type]).join(" → ")
|
|
: isCartMode ? "장바구니 저장" : isInboundConfirmMode ? "입고 확정" : ACTION_TYPE_LABELS[config?.action?.type || "save"];
|
|
toast.info(`[디자인 모드] ${modeLabel}`);
|
|
return;
|
|
}
|
|
|
|
// v2 경로: tasks 배열이 있으면 새 실행 엔진 사용
|
|
if (v2Config) {
|
|
if (v2Config.confirm?.enabled) {
|
|
setShowInboundConfirm(true);
|
|
} else {
|
|
await handleV2Execute();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// === 이하 v1 레거시 경로 ===
|
|
|
|
// 입고 확정 모드: confirm 다이얼로그 후 데이터 수집 → API 호출
|
|
if (isInboundConfirmMode) {
|
|
if (config?.confirm?.enabled !== false) {
|
|
setShowInboundConfirm(true);
|
|
} else {
|
|
await handleInboundConfirm();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// 장바구니 모드: isDirty 여부에 따라 분기
|
|
if (isCartMode) {
|
|
if (cartCount === 0 && !cartIsDirty) {
|
|
toast.info("장바구니가 비어 있습니다.");
|
|
return;
|
|
}
|
|
|
|
if (cartIsDirty) {
|
|
setShowCartConfirm(true);
|
|
} else {
|
|
const targetScreenId = config?.cart?.cartScreenId;
|
|
if (targetScreenId) {
|
|
const cleanId = targetScreenId.replace(/^.*\/(\d+)$/, "$1").trim();
|
|
window.location.href = `/pop/screens/${cleanId}`;
|
|
} else {
|
|
toast.info("장바구니 화면이 설정되지 않았습니다.");
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
const action = config?.action;
|
|
if (!action) return;
|
|
|
|
await execute(action, {
|
|
confirm: config?.confirm,
|
|
followUpActions: config?.followUpActions,
|
|
});
|
|
}, [isDesignMode, v2Config, isCartMode, isInboundConfirmMode, config, cartCount, cartIsDirty, execute, handleCartSave, handleInboundConfirm, handleV2Execute]);
|
|
|
|
// 외형
|
|
const buttonLabel = config?.label || label || "버튼";
|
|
const variant = config?.variant || "default";
|
|
const iconName = config?.icon || "";
|
|
const isIconOnly = config?.iconOnly || false;
|
|
|
|
// 장바구니 3상태 아이콘: 빈 장바구니 / 저장 완료 / 변경사항 있음
|
|
const cartIconName = useMemo(() => {
|
|
if (!isCartMode) return iconName;
|
|
if (cartCount === 0 && !cartIsDirty) return "ShoppingCart";
|
|
if (cartCount > 0 && !cartIsDirty) return "ShoppingBag";
|
|
return "ShoppingCart";
|
|
}, [isCartMode, cartCount, cartIsDirty, iconName]);
|
|
|
|
// 장바구니 3상태 버튼 색상
|
|
const cartButtonClass = useMemo(() => {
|
|
if (!isCartMode) return "";
|
|
if (cartCount > 0 && !cartIsDirty) {
|
|
return "bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600";
|
|
}
|
|
if (cartIsDirty) {
|
|
return "bg-orange-500 hover:bg-orange-600 text-white border-orange-500 animate-pulse";
|
|
}
|
|
return "";
|
|
}, [isCartMode, cartCount, cartIsDirty]);
|
|
|
|
// 데이터 작업 버튼 2상태 아이콘: 미선택(기본) / 선택됨(아이콘 유지)
|
|
const inboundIconName = useMemo(() => {
|
|
if (!hasDataTasks && !isInboundConfirmMode) return iconName;
|
|
return config?.icon || iconName || "PackageCheck";
|
|
}, [hasDataTasks, isInboundConfirmMode, config?.icon, iconName]);
|
|
|
|
// 데이터 작업 버튼 2상태 색상: 미선택(기본) / 선택됨(초록)
|
|
const inboundButtonClass = useMemo(() => {
|
|
if (isCartMode) return "";
|
|
return inboundSelectedCount > 0
|
|
? "bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600"
|
|
: "";
|
|
}, [isCartMode, inboundSelectedCount]);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<div className="relative">
|
|
<Button
|
|
variant={variant}
|
|
onClick={handleClick}
|
|
disabled={isLoading || cartSaving || confirmProcessing}
|
|
className={cn(
|
|
"transition-transform active:scale-95",
|
|
isIconOnly && "px-2",
|
|
cartButtonClass,
|
|
inboundButtonClass,
|
|
)}
|
|
>
|
|
{(isCartMode ? cartIconName : hasDataTasks ? inboundIconName : iconName) && (
|
|
<DynamicLucideIcon
|
|
name={isCartMode ? cartIconName : hasDataTasks ? inboundIconName : iconName}
|
|
size={16}
|
|
className={isIconOnly ? "" : "mr-1.5"}
|
|
/>
|
|
)}
|
|
{!isIconOnly && <span>{buttonLabel}</span>}
|
|
</Button>
|
|
|
|
{/* 장바구니 배지 */}
|
|
{isCartMode && cartCount > 0 && (
|
|
<div
|
|
className={cn(
|
|
"absolute -top-2 -right-2 flex items-center justify-center rounded-full text-[10px] font-bold",
|
|
cartIsDirty
|
|
? "bg-orange-500 text-white"
|
|
: "bg-emerald-600 text-white",
|
|
)}
|
|
style={{ minWidth: 18, height: 18, padding: "0 4px" }}
|
|
>
|
|
{cartCount}
|
|
</div>
|
|
)}
|
|
|
|
{/* 선택 개수 배지 (v1 inbound-confirm + v2 data tasks) */}
|
|
{!isCartMode && hasDataTasks && inboundSelectedCount > 0 && (
|
|
<div
|
|
className="absolute -top-2 -right-2 flex items-center justify-center rounded-full bg-emerald-600 text-white text-[10px] font-bold"
|
|
style={{ minWidth: 18, height: 18, padding: "0 4px" }}
|
|
>
|
|
{inboundSelectedCount}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 장바구니 확인 다이얼로그 */}
|
|
<AlertDialog open={showCartConfirm} onOpenChange={setShowCartConfirm}>
|
|
<AlertDialogContent className="max-w-[95vw] sm:max-w-[400px]">
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle className="text-base sm:text-lg">
|
|
장바구니 저장
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription className="text-xs sm:text-sm">
|
|
{config?.confirm?.message || `${cartCount}개 항목을 장바구니에 저장하시겠습니까?`}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter className="gap-2 sm:gap-0">
|
|
<AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
|
취소
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={() => {
|
|
setShowCartConfirm(false);
|
|
handleCartSave();
|
|
}}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
저장
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
{/* 확정/실행 확인 다이얼로그 (v2 + v1 입고확정 공용) */}
|
|
<AlertDialog open={showInboundConfirm} onOpenChange={setShowInboundConfirm}>
|
|
<AlertDialogContent className="max-w-[95vw] sm:max-w-[400px]">
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle className="text-base sm:text-lg">
|
|
{v2Config ? "실행 확인" : "입고 확정"}
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription className="text-xs sm:text-sm">
|
|
{v2Config
|
|
? (v2Config.confirm?.message || "작업을 실행하시겠습니까?")
|
|
: (config?.confirm?.message || "선택한 품목을 입고 확정하시겠습니까?")}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter className="gap-2 sm:gap-0">
|
|
<AlertDialogCancel
|
|
disabled={confirmProcessing}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
취소
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={() => { v2Config ? handleV2Execute() : handleInboundConfirm(); }}
|
|
disabled={confirmProcessing}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
{confirmProcessing ? "처리 중..." : "확인"}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
{/* 채번 결과 다이얼로그 - 사용자가 확인 누를 때까지 유지 */}
|
|
<AlertDialog open={generatedCodesResult.length > 0} onOpenChange={(open) => { if (!open) handleCloseGeneratedCodesModal(); }}>
|
|
<AlertDialogContent className="max-w-[95vw] sm:max-w-[400px]">
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle className="text-base sm:text-lg">
|
|
자동 생성 완료
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription asChild>
|
|
<div className="space-y-2 text-xs sm:text-sm">
|
|
<p>다음 번호가 자동 생성되었습니다.</p>
|
|
{generatedCodesResult.map((c, i) => (
|
|
<div key={i} className="flex items-center justify-between rounded-md border p-2">
|
|
<span className="text-muted-foreground">{c.targetColumn}</span>
|
|
<span className="font-mono font-semibold">{c.code}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogAction
|
|
onClick={handleCloseGeneratedCodesModal}
|
|
className="h-8 w-full text-xs sm:h-10 sm:text-sm"
|
|
>
|
|
확인
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
{/* 일반 확인 다이얼로그 */}
|
|
<AlertDialog open={!!pendingConfirm} onOpenChange={(open) => { if (!open) cancelConfirm(); }}>
|
|
<AlertDialogContent className="max-w-[95vw] sm:max-w-[400px]">
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle className="text-base sm:text-lg">
|
|
실행 확인
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription className="text-xs sm:text-sm">
|
|
{getConfirmMessage()}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter className="gap-2 sm:gap-0">
|
|
<AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
|
취소
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={confirmExecute}
|
|
className={cn(
|
|
"h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm",
|
|
config?.action?.type === "delete" &&
|
|
"bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
)}
|
|
>
|
|
확인
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// STEP 3: 설정 패널 (v2 작업 목록 기반)
|
|
// ========================================
|
|
|
|
interface PopButtonConfigPanelProps {
|
|
config: PopButtonConfig;
|
|
onUpdate: (config: PopButtonConfig) => void;
|
|
allComponents?: { id: string; type: string; config?: Record<string, unknown> }[];
|
|
connections?: { sourceComponent: string; targetComponent: string; sourceOutput?: string; targetInput?: string }[];
|
|
componentId?: string;
|
|
}
|
|
|
|
export function PopButtonConfigPanel({
|
|
config,
|
|
onUpdate,
|
|
}: PopButtonConfigPanelProps) {
|
|
const v2 = useMemo(() => migrateButtonConfig(config), [config]);
|
|
|
|
const updateV2 = useCallback(
|
|
(partial: Partial<PopButtonConfigV2>) => {
|
|
const merged = { ...v2, ...partial };
|
|
onUpdate(merged as unknown as PopButtonConfig);
|
|
},
|
|
[v2, onUpdate],
|
|
);
|
|
|
|
const updateTask = useCallback(
|
|
(taskId: string, partial: Partial<ButtonTask>) => {
|
|
const next = v2.tasks.map((t) => (t.id === taskId ? { ...t, ...partial } : t));
|
|
updateV2({ tasks: next });
|
|
},
|
|
[v2.tasks, updateV2],
|
|
);
|
|
|
|
const removeTask = useCallback(
|
|
(taskId: string) => {
|
|
updateV2({ tasks: v2.tasks.filter((t) => t.id !== taskId) });
|
|
},
|
|
[v2.tasks, updateV2],
|
|
);
|
|
|
|
const addTask = useCallback(
|
|
(type: ButtonTaskType) => {
|
|
const id = `t${Date.now()}`;
|
|
updateV2({ tasks: [...v2.tasks, { id, type }] });
|
|
},
|
|
[v2.tasks, updateV2],
|
|
);
|
|
|
|
// 빠른 시작
|
|
const applyQuickStart = useCallback(
|
|
(template: QuickStartTemplate) => {
|
|
const defaults = QUICK_START_DEFAULTS[template];
|
|
updateV2({
|
|
label: defaults.label,
|
|
variant: defaults.variant,
|
|
icon: defaults.icon === "none" ? undefined : defaults.icon,
|
|
confirm: defaults.confirm,
|
|
tasks: defaults.tasks.map((t) => ({ ...t, id: `t${Date.now()}_${Math.random().toString(36).slice(2, 6)}` })),
|
|
});
|
|
},
|
|
[updateV2],
|
|
);
|
|
|
|
// 작업 순서 이동
|
|
const moveTask = useCallback(
|
|
(taskId: string, direction: "up" | "down") => {
|
|
const idx = v2.tasks.findIndex((t) => t.id === taskId);
|
|
if (idx < 0) return;
|
|
const swapIdx = direction === "up" ? idx - 1 : idx + 1;
|
|
if (swapIdx < 0 || swapIdx >= v2.tasks.length) return;
|
|
const next = [...v2.tasks];
|
|
[next[idx], next[swapIdx]] = [next[swapIdx], next[idx]];
|
|
updateV2({ tasks: next });
|
|
},
|
|
[v2.tasks, updateV2],
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-2 overflow-y-auto pr-1 pb-32">
|
|
{/* 빠른 시작 */}
|
|
<SectionDivider label="빠른 시작" />
|
|
<div className="flex flex-wrap gap-1">
|
|
{(Object.keys(QUICK_START_DEFAULTS) as QuickStartTemplate[]).map((key) => (
|
|
<Button
|
|
key={key}
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 text-[10px]"
|
|
onClick={() => applyQuickStart(key)}
|
|
>
|
|
{QUICK_START_DEFAULTS[key].label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
클릭하면 외형과 작업 목록이 자동 설정됩니다
|
|
</p>
|
|
|
|
{/* 외형 설정 */}
|
|
<SectionDivider label="외형" />
|
|
<div className="space-y-2">
|
|
<div>
|
|
<Label className="text-xs">라벨</Label>
|
|
<Input
|
|
value={v2.label || ""}
|
|
onChange={(e) => updateV2({ label: e.target.value })}
|
|
placeholder="버튼 텍스트"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs">스타일</Label>
|
|
<Select
|
|
value={v2.variant || "default"}
|
|
onValueChange={(v) => updateV2({ variant: v as ButtonVariant })}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(VARIANT_LABELS).map(([key, lbl]) => (
|
|
<SelectItem key={key} value={key} className="text-xs">
|
|
{lbl}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs">아이콘</Label>
|
|
<Select
|
|
value={v2.icon || "none"}
|
|
onValueChange={(v) => updateV2({ icon: v === "none" ? undefined : v })}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="없음" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{ICON_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value} className="text-xs">
|
|
<div className="flex items-center gap-2">
|
|
{opt.value && <DynamicLucideIcon name={opt.value} size={14} />}
|
|
<span>{opt.label}</span>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="iconOnlyV2"
|
|
checked={v2.iconOnly || false}
|
|
onCheckedChange={(checked) => updateV2({ iconOnly: checked === true })}
|
|
/>
|
|
<Label htmlFor="iconOnlyV2" className="text-xs">
|
|
아이콘만 표시 (라벨 숨김)
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 확인 메시지 */}
|
|
<SectionDivider label="확인 메시지" />
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="confirmEnabledV2"
|
|
checked={v2.confirm?.enabled || false}
|
|
onCheckedChange={(checked) =>
|
|
updateV2({ confirm: { ...v2.confirm, enabled: checked === true } })
|
|
}
|
|
/>
|
|
<Label htmlFor="confirmEnabledV2" className="text-xs">
|
|
실행 전 확인 메시지 표시
|
|
</Label>
|
|
</div>
|
|
{v2.confirm?.enabled && (
|
|
<Input
|
|
value={v2.confirm?.message || ""}
|
|
onChange={(e) =>
|
|
updateV2({ confirm: { ...v2.confirm, enabled: true, message: e.target.value } })
|
|
}
|
|
placeholder="비워두면 기본 메시지 사용"
|
|
className="h-8 text-xs"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* 작업 목록 */}
|
|
<SectionDivider label="작업 목록" />
|
|
<div className="space-y-1.5">
|
|
{v2.tasks.length === 0 && (
|
|
<p className="text-[10px] text-muted-foreground py-2 text-center">
|
|
작업이 없습니다. 빠른 시작 또는 아래 버튼으로 추가하세요.
|
|
</p>
|
|
)}
|
|
|
|
{v2.tasks.map((task, idx) => (
|
|
<TaskItemEditor
|
|
key={task.id}
|
|
task={task}
|
|
index={idx}
|
|
totalCount={v2.tasks.length}
|
|
onUpdate={(partial) => updateTask(task.id, partial)}
|
|
onRemove={() => removeTask(task.id)}
|
|
onMove={(dir) => moveTask(task.id, dir)}
|
|
/>
|
|
))}
|
|
|
|
{/* 작업 추가 */}
|
|
<Select onValueChange={(v) => addTask(v as ButtonTaskType)}>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="+ 작업 추가" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(Object.entries(TASK_TYPE_LABELS) as [ButtonTaskType, string][]).map(([key, lbl]) => (
|
|
<SelectItem key={key} value={key} className="text-xs">
|
|
{lbl}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// 작업 항목 에디터 (접힘/펼침)
|
|
// ========================================
|
|
|
|
function TaskItemEditor({
|
|
task,
|
|
index,
|
|
totalCount,
|
|
onUpdate,
|
|
onRemove,
|
|
onMove,
|
|
}: {
|
|
task: ButtonTask;
|
|
index: number;
|
|
totalCount: number;
|
|
onUpdate: (partial: Partial<ButtonTask>) => void;
|
|
onRemove: () => void;
|
|
onMove: (direction: "up" | "down") => void;
|
|
}) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const designerCtx = usePopDesignerContext();
|
|
|
|
return (
|
|
<div className="rounded border border-border">
|
|
{/* 헤더: 타입 + 순서 + 삭제 */}
|
|
<div
|
|
className="flex cursor-pointer items-center gap-1 px-2 py-1.5 hover:bg-muted/30"
|
|
onClick={() => setExpanded(!expanded)}
|
|
>
|
|
<ChevronRight
|
|
className={cn("h-3 w-3 shrink-0 transition-transform", expanded && "rotate-90")}
|
|
/>
|
|
<GripVertical className="h-3 w-3 shrink-0 text-muted-foreground" />
|
|
<span className="text-[10px] font-medium">
|
|
{index + 1}. {TASK_TYPE_LABELS[task.type]}
|
|
</span>
|
|
{task.label && (
|
|
<span className="ml-1 text-[10px] text-muted-foreground truncate">
|
|
({task.label})
|
|
</span>
|
|
)}
|
|
<div className="ml-auto flex items-center gap-0.5">
|
|
{index > 0 && (
|
|
<Button variant="ghost" size="icon" className="h-5 w-5" onClick={(e) => { e.stopPropagation(); onMove("up"); }}>
|
|
<span className="text-[10px]">^</span>
|
|
</Button>
|
|
)}
|
|
{index < totalCount - 1 && (
|
|
<Button variant="ghost" size="icon" className="h-5 w-5" onClick={(e) => { e.stopPropagation(); onMove("down"); }}>
|
|
<span className="text-[10px]">v</span>
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-5 w-5 text-destructive"
|
|
onClick={(e) => { e.stopPropagation(); onRemove(); }}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 펼침: 타입별 설정 폼 */}
|
|
{expanded && (
|
|
<div className="space-y-2 border-t px-2 py-2">
|
|
<TaskDetailForm task={task} onUpdate={onUpdate} designerCtx={designerCtx} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// 작업별 설정 폼 (M-4)
|
|
// ========================================
|
|
|
|
function TaskDetailForm({
|
|
task,
|
|
onUpdate,
|
|
designerCtx,
|
|
}: {
|
|
task: ButtonTask;
|
|
onUpdate: (partial: Partial<ButtonTask>) => void;
|
|
designerCtx: ReturnType<typeof usePopDesignerContext>;
|
|
}) {
|
|
// 테이블/컬럼 조회 (data-update, data-delete용)
|
|
const [tables, setTables] = useState<TableInfo[]>([]);
|
|
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
|
const needsTable = task.type === "data-update" || task.type === "data-delete";
|
|
|
|
useEffect(() => {
|
|
if (needsTable) fetchTableList().then(setTables);
|
|
}, [needsTable]);
|
|
|
|
useEffect(() => {
|
|
if (needsTable && task.targetTable) {
|
|
fetchTableColumns(task.targetTable).then(setColumns);
|
|
} else {
|
|
setColumns([]);
|
|
}
|
|
}, [needsTable, task.targetTable]);
|
|
|
|
switch (task.type) {
|
|
case "data-save":
|
|
return (
|
|
<p className="text-[10px] text-muted-foreground">
|
|
연결된 입력 컴포넌트의 저장 매핑을 사용합니다. 별도 설정 불필요.
|
|
</p>
|
|
);
|
|
|
|
case "data-update":
|
|
return (
|
|
<DataUpdateTaskForm
|
|
task={task}
|
|
onUpdate={onUpdate}
|
|
tables={tables}
|
|
columns={columns}
|
|
/>
|
|
);
|
|
|
|
case "data-delete":
|
|
return (
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">대상 테이블</Label>
|
|
<TableCombobox
|
|
tables={tables}
|
|
value={task.targetTable || ""}
|
|
onSelect={(v) => onUpdate({ targetTable: v })}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
case "cart-save":
|
|
return (
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">장바구니 화면 ID (저장 후 이동)</Label>
|
|
<Input
|
|
value={task.cartScreenId || ""}
|
|
onChange={(e) => onUpdate({ cartScreenId: e.target.value })}
|
|
placeholder="비워두면 이동 없이 저장만"
|
|
className="h-7 text-xs"
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
case "modal-open":
|
|
return (
|
|
<div className="space-y-2">
|
|
<div>
|
|
<Label className="text-[10px]">모달 방식</Label>
|
|
<Select
|
|
value={task.modalMode || "fullscreen"}
|
|
onValueChange={(v) => onUpdate({ modalMode: v as ModalMode })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(MODAL_MODE_LABELS).map(([key, lbl]) => (
|
|
<SelectItem key={key} value={key} className="text-xs">{lbl}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{task.modalMode === "screen-ref" && (
|
|
<div>
|
|
<Label className="text-[10px]">화면 ID</Label>
|
|
<Input
|
|
value={task.modalScreenId || ""}
|
|
onChange={(e) => onUpdate({ modalScreenId: e.target.value })}
|
|
placeholder="화면 ID"
|
|
className="h-7 text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<Label className="text-[10px]">모달 제목</Label>
|
|
<Input
|
|
value={task.modalTitle || ""}
|
|
onChange={(e) => onUpdate({ modalTitle: e.target.value })}
|
|
placeholder="모달 제목 (선택)"
|
|
className="h-7 text-xs"
|
|
/>
|
|
</div>
|
|
{task.modalMode === "fullscreen" && designerCtx && (
|
|
<div>
|
|
{task.modalScreenId ? (
|
|
<Button variant="outline" size="sm" className="h-7 w-full text-xs" onClick={() => designerCtx.navigateToCanvas(task.modalScreenId!)}>
|
|
모달 캔버스 열기
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 w-full text-xs"
|
|
onClick={() => {
|
|
const selectedId = designerCtx.selectedComponentId;
|
|
if (!selectedId) return;
|
|
const modalId = designerCtx.createModalCanvas(selectedId, task.modalTitle || "새 모달");
|
|
onUpdate({ modalScreenId: modalId });
|
|
}}
|
|
>
|
|
모달 캔버스 생성
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
case "navigate":
|
|
return (
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">대상 화면 ID</Label>
|
|
<Input
|
|
value={task.targetScreenId || ""}
|
|
onChange={(e) => onUpdate({ targetScreenId: e.target.value })}
|
|
placeholder="이동할 화면 ID"
|
|
className="h-7 text-xs"
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
case "api-call":
|
|
return (
|
|
<div className="space-y-2">
|
|
<div>
|
|
<Label className="text-[10px]">엔드포인트</Label>
|
|
<Input
|
|
value={task.apiEndpoint || ""}
|
|
onChange={(e) => onUpdate({ apiEndpoint: e.target.value })}
|
|
placeholder="/api/..."
|
|
className="h-7 text-xs"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-[10px]">HTTP 메서드</Label>
|
|
<Select
|
|
value={task.apiMethod || "POST"}
|
|
onValueChange={(v) => onUpdate({ apiMethod: v as "GET" | "POST" | "PUT" | "DELETE" })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(API_METHOD_LABELS).map(([key, lbl]) => (
|
|
<SelectItem key={key} value={key} className="text-xs">{lbl}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "custom-event":
|
|
return (
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">이벤트명</Label>
|
|
<Input
|
|
value={task.eventName || ""}
|
|
onChange={(e) => onUpdate({ eventName: e.target.value })}
|
|
placeholder="예: data-saved, item-selected"
|
|
className="h-7 text-xs"
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
case "refresh":
|
|
case "close-modal":
|
|
return (
|
|
<p className="text-[10px] text-muted-foreground">설정 불필요</p>
|
|
);
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ========================================
|
|
// 데이터 수정 작업 폼 (data-update 전용)
|
|
// ========================================
|
|
|
|
function DataUpdateTaskForm({
|
|
task,
|
|
onUpdate,
|
|
tables,
|
|
columns,
|
|
}: {
|
|
task: ButtonTask;
|
|
onUpdate: (partial: Partial<ButtonTask>) => void;
|
|
tables: TableInfo[];
|
|
columns: ColumnInfo[];
|
|
}) {
|
|
const conditions = task.conditionalValue?.conditions ?? [];
|
|
const defaultValue = task.conditionalValue?.defaultValue ?? "";
|
|
|
|
const updateCondition = (cIdx: number, partial: Partial<(typeof conditions)[0]>) => {
|
|
const next = [...conditions];
|
|
next[cIdx] = { ...next[cIdx], ...partial };
|
|
onUpdate({ conditionalValue: { conditions: next, defaultValue } });
|
|
};
|
|
|
|
const removeCondition = (cIdx: number) => {
|
|
const next = [...conditions];
|
|
next.splice(cIdx, 1);
|
|
onUpdate({ conditionalValue: { conditions: next, defaultValue } });
|
|
};
|
|
|
|
const addCondition = () => {
|
|
onUpdate({
|
|
conditionalValue: {
|
|
conditions: [...conditions, { whenColumn: "", operator: "=" as const, whenValue: "", thenValue: "" }],
|
|
defaultValue,
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{/* 대상 테이블 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">대상 테이블</Label>
|
|
<TableCombobox
|
|
tables={tables}
|
|
value={task.targetTable || ""}
|
|
onSelect={(v) => onUpdate({ targetTable: v, targetColumn: "" })}
|
|
/>
|
|
</div>
|
|
|
|
{/* 변경 컬럼 */}
|
|
{task.targetTable && (
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">변경 컬럼</Label>
|
|
<ColumnCombobox
|
|
columns={columns}
|
|
value={task.targetColumn || ""}
|
|
onSelect={(v) => onUpdate({ targetColumn: v })}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 연산 타입 */}
|
|
{task.targetColumn && (
|
|
<>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">연산</Label>
|
|
<Select
|
|
value={task.operationType || "assign"}
|
|
onValueChange={(v) => onUpdate({ operationType: v as UpdateOperationType })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="assign" className="text-xs">대입 (=)</SelectItem>
|
|
<SelectItem value="add" className="text-xs">더하기 (+=)</SelectItem>
|
|
<SelectItem value="subtract" className="text-xs">빼기 (-=)</SelectItem>
|
|
<SelectItem value="multiply" className="text-xs">곱하기 (*=)</SelectItem>
|
|
<SelectItem value="divide" className="text-xs">나누기 (/=)</SelectItem>
|
|
<SelectItem value="conditional" className="text-xs">조건부 (클라이언트)</SelectItem>
|
|
<SelectItem value="db-conditional" className="text-xs">조건부 (DB 컬럼 비교)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 값 출처 (conditional/db-conditional이 아닐 때) */}
|
|
{task.operationType !== "conditional" && task.operationType !== "db-conditional" && (
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">값 출처</Label>
|
|
<Select
|
|
value={task.valueSource || "fixed"}
|
|
onValueChange={(v) => onUpdate({ valueSource: v as UpdateValueSource })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="fixed" className="text-xs">고정값</SelectItem>
|
|
<SelectItem value="linked" className="text-xs">연결 데이터</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{/* 고정값 입력 */}
|
|
{task.valueSource === "fixed" && task.operationType !== "conditional" && task.operationType !== "db-conditional" && (
|
|
<Input
|
|
value={task.fixedValue || ""}
|
|
onChange={(e) => onUpdate({ fixedValue: e.target.value })}
|
|
className="h-7 text-xs"
|
|
placeholder="변경할 값"
|
|
/>
|
|
)}
|
|
|
|
{/* 연결 데이터 필드명 */}
|
|
{task.valueSource === "linked" && task.operationType !== "conditional" && task.operationType !== "db-conditional" && (
|
|
<Input
|
|
value={task.sourceField || ""}
|
|
onChange={(e) => onUpdate({ sourceField: e.target.value })}
|
|
className="h-7 text-xs"
|
|
placeholder="연결 필드명 (예: qty)"
|
|
/>
|
|
)}
|
|
|
|
{/* DB 컬럼 비교 조건부 설정 */}
|
|
{task.operationType === "db-conditional" && (
|
|
<div className="space-y-2 rounded border border-dashed border-muted-foreground/30 p-2">
|
|
<p className="text-[10px] text-muted-foreground">DB에서 컬럼 A와 컬럼 B를 비교하여 값을 판정합니다</p>
|
|
<div className="flex items-center gap-1">
|
|
<ColumnCombobox columns={columns} value={task.compareColumn ?? ""} onSelect={(v) => onUpdate({ compareColumn: v })} placeholder="비교 컬럼 A" />
|
|
<Select value={task.compareOperator ?? ">="} onValueChange={(v) => onUpdate({ compareOperator: v as ButtonTask["compareOperator"] })}>
|
|
<SelectTrigger className="h-7 w-14 text-[10px]"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
{["=", "!=", ">", "<", ">=", "<="].map((op) => (
|
|
<SelectItem key={op} value={op} className="text-xs">{op}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<ColumnCombobox columns={columns} value={task.compareWith ?? ""} onSelect={(v) => onUpdate({ compareWith: v })} placeholder="비교 컬럼 B" />
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">참 -></span>
|
|
<Input value={task.dbThenValue ?? ""} onChange={(e) => onUpdate({ dbThenValue: e.target.value })} className="h-7 flex-1 text-[10px]" placeholder="예: 입고완료" />
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">거짓 -></span>
|
|
<Input value={task.dbElseValue ?? ""} onChange={(e) => onUpdate({ dbElseValue: e.target.value })} className="h-7 flex-1 text-[10px]" placeholder="예: 부분입고" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 조건부 값 설정 */}
|
|
{task.operationType === "conditional" && (
|
|
<div className="space-y-2 rounded border border-dashed border-muted-foreground/30 p-2">
|
|
{conditions.map((cond, cIdx) => (
|
|
<div key={cIdx} className="space-y-1">
|
|
<div className="flex items-center gap-1">
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">만약</span>
|
|
<ColumnCombobox columns={columns} value={cond.whenColumn} onSelect={(v) => updateCondition(cIdx, { whenColumn: v })} placeholder="컬럼" />
|
|
<Select value={cond.operator} onValueChange={(v) => updateCondition(cIdx, { operator: v as "=" | "!=" | ">" | "<" | ">=" | "<=" })}>
|
|
<SelectTrigger className="h-7 w-14 text-[10px]"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
{["=", "!=", ">", "<", ">=", "<="].map((op) => (
|
|
<SelectItem key={op} value={op} className="text-xs">{op}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Input value={cond.whenValue} onChange={(e) => updateCondition(cIdx, { whenValue: e.target.value })} className="h-7 w-16 text-[10px]" placeholder="값" />
|
|
<Button variant="ghost" size="icon" className="h-5 w-5 shrink-0" onClick={() => removeCondition(cIdx)}>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-1 pl-4">
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">이면 -></span>
|
|
<Input value={cond.thenValue} onChange={(e) => updateCondition(cIdx, { thenValue: e.target.value })} className="h-7 text-[10px]" placeholder="변경할 값" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
<Button variant="ghost" size="sm" className="w-full text-[10px]" onClick={addCondition}>
|
|
<Plus className="mr-1 h-3 w-3" /> 조건 추가
|
|
</Button>
|
|
<div className="flex items-center gap-1">
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">그 외 -></span>
|
|
<Input
|
|
value={defaultValue}
|
|
onChange={(e) => onUpdate({ conditionalValue: { conditions, defaultValue: e.target.value } })}
|
|
className="h-7 text-[10px]"
|
|
placeholder="기본값"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 조회 키 */}
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<Label className="text-[10px]">조회 키</Label>
|
|
<Select
|
|
value={task.lookupMode ?? "auto"}
|
|
onValueChange={(v) => onUpdate({ lookupMode: v as "auto" | "manual" })}
|
|
>
|
|
<SelectTrigger className="h-6 w-16 text-[10px]"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="auto" className="text-[10px]">자동</SelectItem>
|
|
<SelectItem value="manual" className="text-[10px]">수동</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{task.lookupMode === "manual" && (
|
|
<div className="flex items-center gap-1">
|
|
<Select value={task.manualItemField ?? ""} onValueChange={(v) => onUpdate({ manualItemField: v })}>
|
|
<SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="카드 항목 필드" /></SelectTrigger>
|
|
<SelectContent>
|
|
{KNOWN_ITEM_FIELDS.map((f) => (
|
|
<SelectItem key={f.value} value={f.value} className="text-[10px]">{f.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">-></span>
|
|
<ColumnCombobox columns={columns} value={task.manualPkColumn ?? ""} onSelect={(v) => onUpdate({ manualPkColumn: v })} placeholder="대상 PK 컬럼" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// 액션 세부 필드 (타입별)
|
|
// ========================================
|
|
|
|
function ActionDetailFields({
|
|
action,
|
|
onUpdate,
|
|
disabled,
|
|
}: {
|
|
action?: ButtonMainAction;
|
|
onUpdate: (updates: Partial<ButtonMainAction>) => void;
|
|
disabled?: boolean;
|
|
}) {
|
|
// 디자이너 컨텍스트 (뷰어에서는 null)
|
|
const designerCtx = usePopDesignerContext();
|
|
const actionType = action?.type || "save";
|
|
|
|
switch (actionType) {
|
|
case "save":
|
|
case "delete":
|
|
return (
|
|
<div>
|
|
<Label className="text-xs">대상 테이블</Label>
|
|
<Input
|
|
value={action?.targetTable || ""}
|
|
onChange={(e) => onUpdate({ targetTable: e.target.value })}
|
|
placeholder="테이블명 입력"
|
|
className="h-8 text-xs"
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
case "api":
|
|
return (
|
|
<div className="space-y-2">
|
|
<div>
|
|
<Label className="text-xs">엔드포인트</Label>
|
|
<Input
|
|
value={action?.apiEndpoint || ""}
|
|
onChange={(e) => onUpdate({ apiEndpoint: e.target.value })}
|
|
placeholder="/api/..."
|
|
className="h-8 text-xs"
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs">HTTP 메서드</Label>
|
|
<Select
|
|
value={action?.apiMethod || "POST"}
|
|
onValueChange={(v) =>
|
|
onUpdate({
|
|
apiMethod: v as "GET" | "POST" | "PUT" | "DELETE",
|
|
})
|
|
}
|
|
disabled={disabled}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(API_METHOD_LABELS).map(([key, label]) => (
|
|
<SelectItem key={key} value={key} className="text-xs">
|
|
{label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "modal":
|
|
return (
|
|
<div className="space-y-2">
|
|
<div>
|
|
<Label className="text-xs">모달 방식</Label>
|
|
<Select
|
|
value={action?.modalMode || "fullscreen"}
|
|
onValueChange={(v) =>
|
|
onUpdate({ modalMode: v as ModalMode })
|
|
}
|
|
disabled={disabled}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(MODAL_MODE_LABELS).map(([key, label]) => (
|
|
<SelectItem key={key} value={key} className="text-xs">
|
|
{label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{action?.modalMode === "screen-ref" && (
|
|
<div>
|
|
<Label className="text-xs">화면 ID</Label>
|
|
<Input
|
|
value={action?.modalScreenId || ""}
|
|
onChange={(e) =>
|
|
onUpdate({ modalScreenId: e.target.value })
|
|
}
|
|
placeholder="화면 ID"
|
|
className="h-8 text-xs"
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<Label className="text-xs">모달 제목</Label>
|
|
<Input
|
|
value={action?.modalTitle || ""}
|
|
onChange={(e) => onUpdate({ modalTitle: e.target.value })}
|
|
placeholder="모달 제목 (선택)"
|
|
className="h-8 text-xs"
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
{/* 모달 캔버스 생성/열기 (fullscreen 모드 + 디자이너 내부) */}
|
|
{action?.modalMode === "fullscreen" && designerCtx && (
|
|
<div>
|
|
{action?.modalScreenId ? (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 w-full text-xs"
|
|
onClick={() => designerCtx.navigateToCanvas(action.modalScreenId!)}
|
|
>
|
|
모달 캔버스 열기
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 w-full text-xs"
|
|
onClick={() => {
|
|
const selectedId = designerCtx.selectedComponentId;
|
|
if (!selectedId) return;
|
|
const modalId = designerCtx.createModalCanvas(
|
|
selectedId,
|
|
action?.modalTitle || "새 모달"
|
|
);
|
|
onUpdate({ modalScreenId: modalId });
|
|
}}
|
|
>
|
|
모달 캔버스 생성
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
case "event":
|
|
return (
|
|
<div className="space-y-2">
|
|
<div>
|
|
<Label className="text-xs">이벤트명</Label>
|
|
<Input
|
|
value={action?.eventName || ""}
|
|
onChange={(e) => onUpdate({ eventName: e.target.value })}
|
|
placeholder="예: data-saved, item-selected"
|
|
className="h-8 text-xs"
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ========================================
|
|
// 후속 액션 편집기
|
|
// ========================================
|
|
|
|
function FollowUpActionsEditor({
|
|
actions,
|
|
onUpdate,
|
|
}: {
|
|
actions: FollowUpAction[];
|
|
onUpdate: (actions: FollowUpAction[]) => void;
|
|
}) {
|
|
// 추가
|
|
const handleAdd = () => {
|
|
onUpdate([...actions, { type: "event" }]);
|
|
};
|
|
|
|
// 삭제
|
|
const handleRemove = (index: number) => {
|
|
onUpdate(actions.filter((_, i) => i !== index));
|
|
};
|
|
|
|
// 수정
|
|
const handleUpdate = (index: number, updates: Partial<FollowUpAction>) => {
|
|
const newActions = [...actions];
|
|
newActions[index] = { ...newActions[index], ...updates };
|
|
onUpdate(newActions);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{actions.length === 0 && (
|
|
<p className="text-[10px] text-muted-foreground">
|
|
메인 액션 성공 후 순차 실행할 후속 동작
|
|
</p>
|
|
)}
|
|
|
|
{actions.map((fa, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="space-y-1.5 rounded border p-2"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-medium text-muted-foreground">
|
|
후속 {idx + 1}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleRemove(idx)}
|
|
className="h-5 px-1 text-[10px] text-destructive"
|
|
>
|
|
삭제
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 타입 선택 */}
|
|
<Select
|
|
value={fa.type}
|
|
onValueChange={(v) =>
|
|
handleUpdate(idx, { type: v as FollowUpActionType })
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(FOLLOWUP_TYPE_LABELS).map(([key, label]) => (
|
|
<SelectItem key={key} value={key} className="text-xs">
|
|
{label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{/* 타입별 추가 입력 */}
|
|
{fa.type === "event" && (
|
|
<Input
|
|
value={fa.eventName || ""}
|
|
onChange={(e) =>
|
|
handleUpdate(idx, { eventName: e.target.value })
|
|
}
|
|
placeholder="이벤트명"
|
|
className="h-7 text-xs"
|
|
/>
|
|
)}
|
|
{fa.type === "navigate" && (
|
|
<Input
|
|
value={fa.targetScreenId || ""}
|
|
onChange={(e) =>
|
|
handleUpdate(idx, { targetScreenId: e.target.value })
|
|
}
|
|
placeholder="화면 ID"
|
|
className="h-7 text-xs"
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleAdd}
|
|
className="w-full h-7 text-xs"
|
|
>
|
|
후속 액션 추가
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// STEP 4: 미리보기 + 레지스트리 등록
|
|
// ========================================
|
|
|
|
function PopButtonPreviewComponent({
|
|
config,
|
|
}: {
|
|
config?: PopButtonConfig;
|
|
}) {
|
|
const buttonLabel = config?.label || "버튼";
|
|
const variant = config?.variant || "default";
|
|
const iconName = config?.icon || "";
|
|
const isIconOnly = config?.iconOnly || false;
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center overflow-hidden">
|
|
<Button
|
|
variant={variant}
|
|
className={cn(
|
|
"pointer-events-none",
|
|
isIconOnly && "px-2"
|
|
)}
|
|
tabIndex={-1}
|
|
>
|
|
{iconName && (
|
|
<DynamicLucideIcon
|
|
name={iconName}
|
|
size={16}
|
|
className={isIconOnly ? "" : "mr-1.5"}
|
|
/>
|
|
)}
|
|
{!isIconOnly && <span>{buttonLabel}</span>}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// 상태 변경 규칙 편집기
|
|
// ========================================
|
|
|
|
const KNOWN_ITEM_FIELDS = [
|
|
{ value: "__cart_id", label: "__cart_id (카드 항목 ID)" },
|
|
{ value: "__cart_row_key", label: "__cart_row_key (원본 PK 값)" },
|
|
{ value: "id", label: "id" },
|
|
{ value: "row_key", label: "row_key" },
|
|
];
|
|
|
|
function StatusChangeRuleEditor({
|
|
rules,
|
|
onUpdate,
|
|
}: {
|
|
rules: StatusChangeRule[];
|
|
onUpdate: (rules: StatusChangeRule[]) => void;
|
|
}) {
|
|
const [tables, setTables] = useState<TableInfo[]>([]);
|
|
const [columnsMap, setColumnsMap] = useState<Record<string, ColumnInfo[]>>({});
|
|
|
|
useEffect(() => {
|
|
fetchTableList().then(setTables);
|
|
}, []);
|
|
|
|
const loadColumns = (tableName: string) => {
|
|
if (!tableName || columnsMap[tableName]) return;
|
|
fetchTableColumns(tableName).then((cols) => {
|
|
setColumnsMap((prev) => ({ ...prev, [tableName]: cols }));
|
|
});
|
|
};
|
|
|
|
const updateRule = (idx: number, partial: Partial<StatusChangeRule>) => {
|
|
const next = [...rules];
|
|
next[idx] = { ...next[idx], ...partial };
|
|
onUpdate(next);
|
|
};
|
|
|
|
const removeRule = (idx: number) => {
|
|
const next = [...rules];
|
|
next.splice(idx, 1);
|
|
onUpdate(next);
|
|
};
|
|
|
|
const addRule = () => {
|
|
onUpdate([
|
|
...rules,
|
|
{
|
|
targetTable: "",
|
|
targetColumn: "",
|
|
valueType: "fixed",
|
|
fixedValue: "",
|
|
},
|
|
]);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2 px-1">
|
|
{rules.map((rule, idx) => (
|
|
<SingleRuleEditor
|
|
key={idx}
|
|
rule={rule}
|
|
idx={idx}
|
|
tables={tables}
|
|
columns={columnsMap[rule.targetTable] ?? []}
|
|
onLoadColumns={loadColumns}
|
|
onUpdate={(partial) => updateRule(idx, partial)}
|
|
onRemove={() => removeRule(idx)}
|
|
/>
|
|
))}
|
|
<Button variant="outline" size="sm" className="w-full text-xs" onClick={addRule}>
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
규칙 추가
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SingleRuleEditor({
|
|
rule,
|
|
idx,
|
|
tables,
|
|
columns,
|
|
onLoadColumns,
|
|
onUpdate,
|
|
onRemove,
|
|
}: {
|
|
rule: StatusChangeRule;
|
|
idx: number;
|
|
tables: TableInfo[];
|
|
columns: ColumnInfo[];
|
|
onLoadColumns: (tableName: string) => void;
|
|
onUpdate: (partial: Partial<StatusChangeRule>) => void;
|
|
onRemove: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
if (rule.targetTable) onLoadColumns(rule.targetTable);
|
|
}, [rule.targetTable]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const conditions = rule.conditionalValue?.conditions ?? [];
|
|
const defaultValue = rule.conditionalValue?.defaultValue ?? "";
|
|
|
|
const updateCondition = (cIdx: number, partial: Partial<(typeof conditions)[0]>) => {
|
|
const next = [...conditions];
|
|
next[cIdx] = { ...next[cIdx], ...partial };
|
|
onUpdate({
|
|
conditionalValue: { ...rule.conditionalValue, conditions: next, defaultValue },
|
|
});
|
|
};
|
|
|
|
const removeCondition = (cIdx: number) => {
|
|
const next = [...conditions];
|
|
next.splice(cIdx, 1);
|
|
onUpdate({
|
|
conditionalValue: { ...rule.conditionalValue, conditions: next, defaultValue },
|
|
});
|
|
};
|
|
|
|
const addCondition = () => {
|
|
onUpdate({
|
|
conditionalValue: {
|
|
...rule.conditionalValue,
|
|
conditions: [...conditions, { whenColumn: "", operator: "=" as const, whenValue: "", thenValue: "" }],
|
|
defaultValue,
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2 rounded border border-border p-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-medium text-muted-foreground">규칙 {idx + 1}</span>
|
|
<Button variant="ghost" size="icon" className="h-5 w-5" onClick={onRemove}>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 대상 테이블 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">대상 테이블</Label>
|
|
<TableCombobox
|
|
tables={tables}
|
|
value={rule.targetTable}
|
|
onSelect={(v) => onUpdate({ targetTable: v, targetColumn: "" })}
|
|
/>
|
|
</div>
|
|
|
|
{/* 변경 컬럼 */}
|
|
{rule.targetTable && (
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">변경 컬럼</Label>
|
|
<ColumnCombobox
|
|
columns={columns}
|
|
value={rule.targetColumn}
|
|
onSelect={(v) => onUpdate({ targetColumn: v })}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 조회 키 */}
|
|
{rule.targetColumn && (
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<Label className="text-[10px]">조회 키</Label>
|
|
<Select
|
|
value={rule.lookupMode ?? "auto"}
|
|
onValueChange={(v) => onUpdate({ lookupMode: v as "auto" | "manual" })}
|
|
>
|
|
<SelectTrigger className="h-6 w-16 text-[10px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="auto" className="text-[10px]">자동</SelectItem>
|
|
<SelectItem value="manual" className="text-[10px]">수동</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{(rule.lookupMode ?? "auto") === "auto" ? (
|
|
<p className="text-[10px] text-muted-foreground">
|
|
{rule.targetTable === "cart_items"
|
|
? `카드 항목.__cart_id → ${rule.targetTable}.id`
|
|
: `카드 항목.row_key → ${rule.targetTable}.${columns.find(c => c.isPrimaryKey)?.name ?? "PK(조회중)"}`}
|
|
</p>
|
|
) : (
|
|
<div className="flex items-center gap-1">
|
|
<Select
|
|
value={rule.manualItemField ?? ""}
|
|
onValueChange={(v) => onUpdate({ manualItemField: v })}
|
|
>
|
|
<SelectTrigger className="h-7 flex-1 text-[10px]">
|
|
<SelectValue placeholder="카드 항목 필드" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{KNOWN_ITEM_FIELDS.map((f) => (
|
|
<SelectItem key={f.value} value={f.value} className="text-[10px]">{f.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">→</span>
|
|
<ColumnCombobox
|
|
columns={columns}
|
|
value={rule.manualPkColumn ?? ""}
|
|
onSelect={(v) => onUpdate({ manualPkColumn: v })}
|
|
placeholder="대상 PK 컬럼"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 변경 값 타입 */}
|
|
{rule.targetColumn && (
|
|
<>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">변경 값</Label>
|
|
<div className="flex items-center gap-3">
|
|
<label className="flex items-center gap-1 text-[10px]">
|
|
<input
|
|
type="radio"
|
|
name={`valueType-${idx}`}
|
|
checked={rule.valueType === "fixed"}
|
|
onChange={() => onUpdate({ valueType: "fixed" })}
|
|
className="h-3 w-3"
|
|
/>
|
|
고정값
|
|
</label>
|
|
<label className="flex items-center gap-1 text-[10px]">
|
|
<input
|
|
type="radio"
|
|
name={`valueType-${idx}`}
|
|
checked={rule.valueType === "conditional"}
|
|
onChange={() => onUpdate({ valueType: "conditional" })}
|
|
className="h-3 w-3"
|
|
/>
|
|
조건부
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 고정값 */}
|
|
{rule.valueType === "fixed" && (
|
|
<div className="space-y-1">
|
|
<Input
|
|
value={rule.fixedValue ?? ""}
|
|
onChange={(e) => onUpdate({ fixedValue: e.target.value })}
|
|
className="h-7 text-xs"
|
|
placeholder="변경할 값 입력"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 조건부 */}
|
|
{rule.valueType === "conditional" && (
|
|
<div className="space-y-2 rounded border border-dashed border-muted-foreground/30 p-2">
|
|
{conditions.map((cond, cIdx) => (
|
|
<div key={cIdx} className="space-y-1">
|
|
<div className="flex items-center gap-1">
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">만약</span>
|
|
<ColumnCombobox
|
|
columns={columns}
|
|
value={cond.whenColumn}
|
|
onSelect={(v) => updateCondition(cIdx, { whenColumn: v })}
|
|
placeholder="컬럼"
|
|
/>
|
|
<Select
|
|
value={cond.operator}
|
|
onValueChange={(v) => updateCondition(cIdx, { operator: v as "=" | "!=" | ">" | "<" | ">=" | "<=" })}
|
|
>
|
|
<SelectTrigger className="h-7 w-14 text-[10px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{["=", "!=", ">", "<", ">=", "<="].map((op) => (
|
|
<SelectItem key={op} value={op} className="text-xs">{op}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
value={cond.whenValue}
|
|
onChange={(e) => updateCondition(cIdx, { whenValue: e.target.value })}
|
|
className="h-7 w-16 text-[10px]"
|
|
placeholder="값"
|
|
/>
|
|
<Button variant="ghost" size="icon" className="h-5 w-5 shrink-0" onClick={() => removeCondition(cIdx)}>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-1 pl-4">
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">이면 -></span>
|
|
<Input
|
|
value={cond.thenValue}
|
|
onChange={(e) => updateCondition(cIdx, { thenValue: e.target.value })}
|
|
className="h-7 text-[10px]"
|
|
placeholder="변경할 값"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<Button variant="ghost" size="sm" className="w-full text-[10px]" onClick={addCondition}>
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
조건 추가
|
|
</Button>
|
|
<div className="flex items-center gap-1">
|
|
<span className="shrink-0 text-[10px] text-muted-foreground">그 외 -></span>
|
|
<Input
|
|
value={defaultValue}
|
|
onChange={(e) =>
|
|
onUpdate({
|
|
conditionalValue: { ...rule.conditionalValue, conditions, defaultValue: e.target.value },
|
|
})
|
|
}
|
|
className="h-7 text-[10px]"
|
|
placeholder="기본값"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 레지스트리 등록
|
|
PopComponentRegistry.registerComponent({
|
|
id: "pop-button",
|
|
name: "버튼",
|
|
description: "액션 버튼 (저장/삭제/API/모달/이벤트/장바구니)",
|
|
category: "action",
|
|
icon: "MousePointerClick",
|
|
component: PopButtonComponent,
|
|
configPanel: PopButtonConfigPanel,
|
|
preview: PopButtonPreviewComponent,
|
|
defaultProps: {
|
|
label: "버튼",
|
|
variant: "default",
|
|
preset: "custom",
|
|
confirm: { enabled: false },
|
|
action: { type: "save" },
|
|
} as PopButtonConfig,
|
|
connectionMeta: {
|
|
sendable: [
|
|
{ key: "cart_save_trigger", label: "저장 요청", type: "event", category: "event", description: "장바구니 일괄 저장 요청 (카드 목록에 전달)" },
|
|
{ key: "collect_data", label: "데이터 수집 요청", type: "event", category: "event", description: "연결된 컴포넌트에 데이터+매핑 수집 요청" },
|
|
{ key: "action_completed", label: "액션 완료", type: "event", category: "event", description: "확정/저장 완료 후 결과 전달" },
|
|
],
|
|
receivable: [
|
|
{ key: "cart_updated", label: "장바구니 상태", type: "event", category: "event", description: "카드 목록에서 장바구니 변경 시 count/isDirty 수신" },
|
|
{ key: "cart_save_completed", label: "저장 완료", type: "event", category: "event", description: "카드 목록에서 DB 저장 완료 시 수신" },
|
|
{ key: "collected_data", label: "수집된 데이터", type: "event", category: "event", description: "컴포넌트에서 수집한 데이터+매핑 응답" },
|
|
{ key: "selected_items", label: "선택된 항목", type: "event", category: "event", description: "카드 목록에서 체크박스로 선택된 항목 수 수신" },
|
|
],
|
|
},
|
|
touchOptimized: true,
|
|
supportedDevices: ["mobile", "tablet"],
|
|
});
|