Merge remote-tracking branch 'origin/main' into ksh
This commit is contained in:
SeongHyun Kim
commit
384106dd95
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -2720,28 +2720,48 @@ export class NodeFlowExecutionService {
|
|||
const trueData: any[] = [];
|
||||
const falseData: any[] = [];
|
||||
|
||||
inputData.forEach((item: any) => {
|
||||
const results = conditions.map((condition: any) => {
|
||||
// 배열의 각 항목에 대해 조건 평가 (EXISTS 조건은 비동기)
|
||||
for (const item of inputData) {
|
||||
const results: boolean[] = [];
|
||||
|
||||
for (const condition of conditions) {
|
||||
const fieldValue = item[condition.field];
|
||||
|
||||
let compareValue = condition.value;
|
||||
if (condition.valueType === "field") {
|
||||
compareValue = item[condition.value];
|
||||
// EXISTS 계열 연산자 처리
|
||||
if (
|
||||
condition.operator === "EXISTS_IN" ||
|
||||
condition.operator === "NOT_EXISTS_IN"
|
||||
) {
|
||||
const existsResult = await this.evaluateExistsCondition(
|
||||
fieldValue,
|
||||
condition.operator,
|
||||
condition.lookupTable,
|
||||
condition.lookupField,
|
||||
context.buttonContext?.companyCode
|
||||
);
|
||||
results.push(existsResult);
|
||||
logger.info(
|
||||
`🔄 필드 참조 비교: ${condition.field} (${fieldValue}) vs ${condition.value} (${compareValue})`
|
||||
`🔍 EXISTS 조건: ${condition.field} (${fieldValue}) ${condition.operator} ${condition.lookupTable}.${condition.lookupField} => ${existsResult}`
|
||||
);
|
||||
} else {
|
||||
logger.info(
|
||||
`📊 고정값 비교: ${condition.field} (${fieldValue}) vs ${compareValue}`
|
||||
// 일반 연산자 처리
|
||||
let compareValue = condition.value;
|
||||
if (condition.valueType === "field") {
|
||||
compareValue = item[condition.value];
|
||||
logger.info(
|
||||
`🔄 필드 참조 비교: ${condition.field} (${fieldValue}) vs ${condition.value} (${compareValue})`
|
||||
);
|
||||
} else {
|
||||
logger.info(
|
||||
`📊 고정값 비교: ${condition.field} (${fieldValue}) vs ${compareValue}`
|
||||
);
|
||||
}
|
||||
|
||||
results.push(
|
||||
this.evaluateCondition(fieldValue, condition.operator, compareValue)
|
||||
);
|
||||
}
|
||||
|
||||
return this.evaluateCondition(
|
||||
fieldValue,
|
||||
condition.operator,
|
||||
compareValue
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
const result =
|
||||
logic === "OR"
|
||||
|
|
@ -2753,7 +2773,7 @@ export class NodeFlowExecutionService {
|
|||
} else {
|
||||
falseData.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
logger.info(
|
||||
`🔍 조건 필터링 결과: TRUE ${trueData.length}건 / FALSE ${falseData.length}건 (${logic} 로직)`
|
||||
|
|
@ -2768,27 +2788,46 @@ export class NodeFlowExecutionService {
|
|||
}
|
||||
|
||||
// 단일 객체인 경우
|
||||
const results = conditions.map((condition: any) => {
|
||||
const results: boolean[] = [];
|
||||
|
||||
for (const condition of conditions) {
|
||||
const fieldValue = inputData[condition.field];
|
||||
|
||||
let compareValue = condition.value;
|
||||
if (condition.valueType === "field") {
|
||||
compareValue = inputData[condition.value];
|
||||
// EXISTS 계열 연산자 처리
|
||||
if (
|
||||
condition.operator === "EXISTS_IN" ||
|
||||
condition.operator === "NOT_EXISTS_IN"
|
||||
) {
|
||||
const existsResult = await this.evaluateExistsCondition(
|
||||
fieldValue,
|
||||
condition.operator,
|
||||
condition.lookupTable,
|
||||
condition.lookupField,
|
||||
context.buttonContext?.companyCode
|
||||
);
|
||||
results.push(existsResult);
|
||||
logger.info(
|
||||
`🔄 필드 참조 비교: ${condition.field} (${fieldValue}) vs ${condition.value} (${compareValue})`
|
||||
`🔍 EXISTS 조건: ${condition.field} (${fieldValue}) ${condition.operator} ${condition.lookupTable}.${condition.lookupField} => ${existsResult}`
|
||||
);
|
||||
} else {
|
||||
logger.info(
|
||||
`📊 고정값 비교: ${condition.field} (${fieldValue}) vs ${compareValue}`
|
||||
// 일반 연산자 처리
|
||||
let compareValue = condition.value;
|
||||
if (condition.valueType === "field") {
|
||||
compareValue = inputData[condition.value];
|
||||
logger.info(
|
||||
`🔄 필드 참조 비교: ${condition.field} (${fieldValue}) vs ${condition.value} (${compareValue})`
|
||||
);
|
||||
} else {
|
||||
logger.info(
|
||||
`📊 고정값 비교: ${condition.field} (${fieldValue}) vs ${compareValue}`
|
||||
);
|
||||
}
|
||||
|
||||
results.push(
|
||||
this.evaluateCondition(fieldValue, condition.operator, compareValue)
|
||||
);
|
||||
}
|
||||
|
||||
return this.evaluateCondition(
|
||||
fieldValue,
|
||||
condition.operator,
|
||||
compareValue
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
const result =
|
||||
logic === "OR"
|
||||
|
|
@ -2797,7 +2836,7 @@ export class NodeFlowExecutionService {
|
|||
|
||||
logger.info(`🔍 조건 평가 결과: ${result} (${logic} 로직)`);
|
||||
|
||||
// ⚠️ 조건 노드는 TRUE/FALSE 브랜치를 위한 특별한 처리 필요
|
||||
// 조건 노드는 TRUE/FALSE 브랜치를 위한 특별한 처리 필요
|
||||
// 조건 결과를 저장하고, 원본 데이터는 항상 반환
|
||||
// 다음 노드에서 sourceHandle을 기반으로 필터링됨
|
||||
return {
|
||||
|
|
@ -2808,6 +2847,68 @@ export class NodeFlowExecutionService {
|
|||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* EXISTS_IN / NOT_EXISTS_IN 조건 평가
|
||||
* 다른 테이블에 값이 존재하는지 확인
|
||||
*/
|
||||
private static async evaluateExistsCondition(
|
||||
fieldValue: any,
|
||||
operator: string,
|
||||
lookupTable: string,
|
||||
lookupField: string,
|
||||
companyCode?: string
|
||||
): Promise<boolean> {
|
||||
if (!lookupTable || !lookupField) {
|
||||
logger.warn("⚠️ EXISTS 조건: lookupTable 또는 lookupField가 없습니다");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (fieldValue === null || fieldValue === undefined || fieldValue === "") {
|
||||
logger.info(
|
||||
`⚠️ EXISTS 조건: 필드값이 비어있어 ${operator === "NOT_EXISTS_IN" ? "TRUE" : "FALSE"} 반환`
|
||||
);
|
||||
// 값이 비어있으면: EXISTS_IN은 false, NOT_EXISTS_IN은 true
|
||||
return operator === "NOT_EXISTS_IN";
|
||||
}
|
||||
|
||||
try {
|
||||
// 멀티테넌시: company_code 필터 적용 여부 확인
|
||||
// company_mng 테이블은 제외
|
||||
const hasCompanyCode = lookupTable !== "company_mng" && companyCode;
|
||||
|
||||
let sql: string;
|
||||
let params: any[];
|
||||
|
||||
if (hasCompanyCode) {
|
||||
sql = `SELECT EXISTS(SELECT 1 FROM "${lookupTable}" WHERE "${lookupField}" = $1 AND company_code = $2) as exists_result`;
|
||||
params = [fieldValue, companyCode];
|
||||
} else {
|
||||
sql = `SELECT EXISTS(SELECT 1 FROM "${lookupTable}" WHERE "${lookupField}" = $1) as exists_result`;
|
||||
params = [fieldValue];
|
||||
}
|
||||
|
||||
logger.info(`🔍 EXISTS 쿼리: ${sql}, params: ${JSON.stringify(params)}`);
|
||||
|
||||
const result = await query(sql, params);
|
||||
const existsInTable = result[0]?.exists_result === true;
|
||||
|
||||
logger.info(
|
||||
`🔍 EXISTS 결과: ${fieldValue}이(가) ${lookupTable}.${lookupField}에 ${existsInTable ? "존재함" : "존재하지 않음"}`
|
||||
);
|
||||
|
||||
// EXISTS_IN: 존재하면 true
|
||||
// NOT_EXISTS_IN: 존재하지 않으면 true
|
||||
if (operator === "EXISTS_IN") {
|
||||
return existsInTable;
|
||||
} else {
|
||||
return !existsInTable;
|
||||
}
|
||||
} catch (error: any) {
|
||||
logger.error(`❌ EXISTS 조건 평가 실패: ${error.message}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* WHERE 절 생성
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -6,7 +6,10 @@ import { Button } from "@/components/ui/button";
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Search, Database, RefreshCw, Settings, Plus, Activity, Trash2, Copy } from "lucide-react";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Search, Database, RefreshCw, Settings, Plus, Activity, Trash2, Copy, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
|
||||
import { toast } from "sonner";
|
||||
import { useMultiLang } from "@/hooks/useMultiLang";
|
||||
|
|
@ -90,6 +93,13 @@ export default function TableManagementPage() {
|
|||
// 🎯 Entity 조인 관련 상태
|
||||
const [referenceTableColumns, setReferenceTableColumns] = useState<Record<string, ReferenceTableColumn[]>>({});
|
||||
|
||||
// 🆕 Entity 타입 Combobox 열림/닫힘 상태 (컬럼별 관리)
|
||||
const [entityComboboxOpen, setEntityComboboxOpen] = useState<Record<string, {
|
||||
table: boolean;
|
||||
joinColumn: boolean;
|
||||
displayColumn: boolean;
|
||||
}>>({});
|
||||
|
||||
// DDL 기능 관련 상태
|
||||
const [createTableModalOpen, setCreateTableModalOpen] = useState(false);
|
||||
const [addColumnModalOpen, setAddColumnModalOpen] = useState(false);
|
||||
|
|
@ -1388,113 +1398,266 @@ export default function TableManagementPage() {
|
|||
{/* 입력 타입이 'entity'인 경우 참조 테이블 선택 */}
|
||||
{column.inputType === "entity" && (
|
||||
<>
|
||||
{/* 참조 테이블 */}
|
||||
<div className="w-48">
|
||||
{/* 참조 테이블 - 검색 가능한 Combobox */}
|
||||
<div className="w-56">
|
||||
<label className="text-muted-foreground mb-1 block text-xs">참조 테이블</label>
|
||||
<Select
|
||||
value={column.referenceTable || "none"}
|
||||
onValueChange={(value) =>
|
||||
handleDetailSettingsChange(column.columnName, "entity", value)
|
||||
<Popover
|
||||
open={entityComboboxOpen[column.columnName]?.table || false}
|
||||
onOpenChange={(open) =>
|
||||
setEntityComboboxOpen((prev) => ({
|
||||
...prev,
|
||||
[column.columnName]: { ...prev[column.columnName], table: open },
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-background h-8 w-full text-xs">
|
||||
<SelectValue placeholder="선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{referenceTableOptions.map((option, index) => (
|
||||
<SelectItem key={`entity-${option.value}-${index}`} value={option.value}>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{option.label}</span>
|
||||
<span className="text-muted-foreground text-xs">{option.value}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={entityComboboxOpen[column.columnName]?.table || false}
|
||||
className="bg-background h-8 w-full justify-between text-xs"
|
||||
>
|
||||
{column.referenceTable && column.referenceTable !== "none"
|
||||
? referenceTableOptions.find((opt) => opt.value === column.referenceTable)?.label ||
|
||||
column.referenceTable
|
||||
: "테이블 선택..."}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[280px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
|
||||
<CommandList className="max-h-[200px]">
|
||||
<CommandEmpty className="py-2 text-center text-xs">
|
||||
테이블을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{referenceTableOptions.map((option) => (
|
||||
<CommandItem
|
||||
key={option.value}
|
||||
value={`${option.label} ${option.value}`}
|
||||
onSelect={() => {
|
||||
handleDetailSettingsChange(column.columnName, "entity", option.value);
|
||||
setEntityComboboxOpen((prev) => ({
|
||||
...prev,
|
||||
[column.columnName]: { ...prev[column.columnName], table: false },
|
||||
}));
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
column.referenceTable === option.value ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{option.label}</span>
|
||||
{option.value !== "none" && (
|
||||
<span className="text-muted-foreground text-[10px]">{option.value}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 조인 컬럼 */}
|
||||
{/* 조인 컬럼 - 검색 가능한 Combobox */}
|
||||
{column.referenceTable && column.referenceTable !== "none" && (
|
||||
<div className="w-48">
|
||||
<div className="w-56">
|
||||
<label className="text-muted-foreground mb-1 block text-xs">조인 컬럼</label>
|
||||
<Select
|
||||
value={column.referenceColumn || "none"}
|
||||
onValueChange={(value) =>
|
||||
handleDetailSettingsChange(
|
||||
column.columnName,
|
||||
"entity_reference_column",
|
||||
value,
|
||||
)
|
||||
<Popover
|
||||
open={entityComboboxOpen[column.columnName]?.joinColumn || false}
|
||||
onOpenChange={(open) =>
|
||||
setEntityComboboxOpen((prev) => ({
|
||||
...prev,
|
||||
[column.columnName]: { ...prev[column.columnName], joinColumn: open },
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-background h-8 w-full text-xs">
|
||||
<SelectValue placeholder="선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">-- 선택 안함 --</SelectItem>
|
||||
{referenceTableColumns[column.referenceTable]?.map((refCol, index) => (
|
||||
<SelectItem
|
||||
key={`ref-col-${refCol.columnName}-${index}`}
|
||||
value={refCol.columnName}
|
||||
>
|
||||
<span className="font-medium">{refCol.columnName}</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
{(!referenceTableColumns[column.referenceTable] ||
|
||||
referenceTableColumns[column.referenceTable].length === 0) && (
|
||||
<SelectItem value="loading" disabled>
|
||||
<div className="flex items-center gap-2">
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={entityComboboxOpen[column.columnName]?.joinColumn || false}
|
||||
className="bg-background h-8 w-full justify-between text-xs"
|
||||
disabled={!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0}
|
||||
>
|
||||
{!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0 ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="border-primary h-3 w-3 animate-spin rounded-full border border-t-transparent"></div>
|
||||
로딩중
|
||||
</div>
|
||||
</SelectItem>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
로딩중...
|
||||
</span>
|
||||
) : column.referenceColumn && column.referenceColumn !== "none" ? (
|
||||
column.referenceColumn
|
||||
) : (
|
||||
"컬럼 선택..."
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[280px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
|
||||
<CommandList className="max-h-[200px]">
|
||||
<CommandEmpty className="py-2 text-center text-xs">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
value="none"
|
||||
onSelect={() => {
|
||||
handleDetailSettingsChange(column.columnName, "entity_reference_column", "none");
|
||||
setEntityComboboxOpen((prev) => ({
|
||||
...prev,
|
||||
[column.columnName]: { ...prev[column.columnName], joinColumn: false },
|
||||
}));
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
column.referenceColumn === "none" || !column.referenceColumn ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
-- 선택 안함 --
|
||||
</CommandItem>
|
||||
{referenceTableColumns[column.referenceTable]?.map((refCol) => (
|
||||
<CommandItem
|
||||
key={refCol.columnName}
|
||||
value={`${refCol.columnLabel || ""} ${refCol.columnName}`}
|
||||
onSelect={() => {
|
||||
handleDetailSettingsChange(column.columnName, "entity_reference_column", refCol.columnName);
|
||||
setEntityComboboxOpen((prev) => ({
|
||||
...prev,
|
||||
[column.columnName]: { ...prev[column.columnName], joinColumn: false },
|
||||
}));
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
column.referenceColumn === refCol.columnName ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{refCol.columnName}</span>
|
||||
{refCol.columnLabel && (
|
||||
<span className="text-muted-foreground text-[10px]">{refCol.columnLabel}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 표시 컬럼 */}
|
||||
{/* 표시 컬럼 - 검색 가능한 Combobox */}
|
||||
{column.referenceTable &&
|
||||
column.referenceTable !== "none" &&
|
||||
column.referenceColumn &&
|
||||
column.referenceColumn !== "none" && (
|
||||
<div className="w-48">
|
||||
<div className="w-56">
|
||||
<label className="text-muted-foreground mb-1 block text-xs">표시 컬럼</label>
|
||||
<Select
|
||||
value={column.displayColumn || "none"}
|
||||
onValueChange={(value) =>
|
||||
handleDetailSettingsChange(
|
||||
column.columnName,
|
||||
"entity_display_column",
|
||||
value,
|
||||
)
|
||||
<Popover
|
||||
open={entityComboboxOpen[column.columnName]?.displayColumn || false}
|
||||
onOpenChange={(open) =>
|
||||
setEntityComboboxOpen((prev) => ({
|
||||
...prev,
|
||||
[column.columnName]: { ...prev[column.columnName], displayColumn: open },
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-background h-8 w-full text-xs">
|
||||
<SelectValue placeholder="선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">-- 선택 안함 --</SelectItem>
|
||||
{referenceTableColumns[column.referenceTable]?.map((refCol, index) => (
|
||||
<SelectItem
|
||||
key={`ref-col-${refCol.columnName}-${index}`}
|
||||
value={refCol.columnName}
|
||||
>
|
||||
<span className="font-medium">{refCol.columnName}</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
{(!referenceTableColumns[column.referenceTable] ||
|
||||
referenceTableColumns[column.referenceTable].length === 0) && (
|
||||
<SelectItem value="loading" disabled>
|
||||
<div className="flex items-center gap-2">
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={entityComboboxOpen[column.columnName]?.displayColumn || false}
|
||||
className="bg-background h-8 w-full justify-between text-xs"
|
||||
disabled={!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0}
|
||||
>
|
||||
{!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0 ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="border-primary h-3 w-3 animate-spin rounded-full border border-t-transparent"></div>
|
||||
로딩중
|
||||
</div>
|
||||
</SelectItem>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
로딩중...
|
||||
</span>
|
||||
) : column.displayColumn && column.displayColumn !== "none" ? (
|
||||
column.displayColumn
|
||||
) : (
|
||||
"컬럼 선택..."
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[280px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
|
||||
<CommandList className="max-h-[200px]">
|
||||
<CommandEmpty className="py-2 text-center text-xs">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
value="none"
|
||||
onSelect={() => {
|
||||
handleDetailSettingsChange(column.columnName, "entity_display_column", "none");
|
||||
setEntityComboboxOpen((prev) => ({
|
||||
...prev,
|
||||
[column.columnName]: { ...prev[column.columnName], displayColumn: false },
|
||||
}));
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
column.displayColumn === "none" || !column.displayColumn ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
-- 선택 안함 --
|
||||
</CommandItem>
|
||||
{referenceTableColumns[column.referenceTable]?.map((refCol) => (
|
||||
<CommandItem
|
||||
key={refCol.columnName}
|
||||
value={`${refCol.columnLabel || ""} ${refCol.columnName}`}
|
||||
onSelect={() => {
|
||||
handleDetailSettingsChange(column.columnName, "entity_display_column", refCol.columnName);
|
||||
setEntityComboboxOpen((prev) => ({
|
||||
...prev,
|
||||
[column.columnName]: { ...prev[column.columnName], displayColumn: false },
|
||||
}));
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
column.displayColumn === refCol.columnName ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{refCol.columnName}</span>
|
||||
{refCol.columnLabel && (
|
||||
<span className="text-muted-foreground text-[10px]">{refCol.columnLabel}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -1505,8 +1668,8 @@ export default function TableManagementPage() {
|
|||
column.referenceColumn !== "none" &&
|
||||
column.displayColumn &&
|
||||
column.displayColumn !== "none" && (
|
||||
<div className="bg-primary/10 text-primary flex w-48 items-center gap-1 rounded px-2 py-1 text-xs">
|
||||
<span>✓</span>
|
||||
<div className="bg-primary/10 text-primary flex items-center gap-1 rounded px-2 py-1 text-xs">
|
||||
<Check className="h-3 w-3" />
|
||||
<span className="truncate">설정 완료</span>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import "@/app/globals.css";
|
||||
|
||||
export const metadata = {
|
||||
title: "POP - 생산실적관리",
|
||||
description: "생산 현장 실적 관리 시스템",
|
||||
};
|
||||
|
||||
export default function PopLayout({ children }: { children: React.ReactNode }) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { PopDashboard } from "@/components/pop/dashboard";
|
||||
|
||||
export default function PopPage() {
|
||||
return <PopDashboard />;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
"use client";
|
||||
|
||||
import { PopApp } from "@/components/pop";
|
||||
|
||||
export default function PopWorkPage() {
|
||||
return <PopApp />;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
"use client";
|
||||
|
||||
import { PopApp } from "@/components/pop";
|
||||
|
||||
export default function PopWorkPage() {
|
||||
return <PopApp />;
|
||||
}
|
||||
|
||||
|
|
@ -388,4 +388,183 @@ select {
|
|||
border-spacing: 0 !important;
|
||||
}
|
||||
|
||||
/* ===== POP (Production Operation Panel) Styles ===== */
|
||||
|
||||
/* POP 전용 다크 테마 변수 */
|
||||
.pop-dark {
|
||||
/* 배경 색상 */
|
||||
--pop-bg-deepest: 8 12 21;
|
||||
--pop-bg-deep: 10 15 28;
|
||||
--pop-bg-primary: 13 19 35;
|
||||
--pop-bg-secondary: 18 26 47;
|
||||
--pop-bg-tertiary: 25 35 60;
|
||||
--pop-bg-elevated: 32 45 75;
|
||||
|
||||
/* 네온 강조색 */
|
||||
--pop-neon-cyan: 0 212 255;
|
||||
--pop-neon-cyan-bright: 0 240 255;
|
||||
--pop-neon-cyan-dim: 0 150 190;
|
||||
--pop-neon-pink: 255 0 102;
|
||||
--pop-neon-purple: 138 43 226;
|
||||
|
||||
/* 상태 색상 */
|
||||
--pop-success: 0 255 136;
|
||||
--pop-success-dim: 0 180 100;
|
||||
--pop-warning: 255 170 0;
|
||||
--pop-warning-dim: 200 130 0;
|
||||
--pop-danger: 255 51 51;
|
||||
--pop-danger-dim: 200 40 40;
|
||||
|
||||
/* 텍스트 색상 */
|
||||
--pop-text-primary: 255 255 255;
|
||||
--pop-text-secondary: 180 195 220;
|
||||
--pop-text-muted: 100 120 150;
|
||||
|
||||
/* 테두리 색상 */
|
||||
--pop-border: 40 55 85;
|
||||
--pop-border-light: 55 75 110;
|
||||
}
|
||||
|
||||
/* POP 전용 라이트 테마 변수 */
|
||||
.pop-light {
|
||||
--pop-bg-deepest: 245 247 250;
|
||||
--pop-bg-deep: 240 243 248;
|
||||
--pop-bg-primary: 250 251 253;
|
||||
--pop-bg-secondary: 255 255 255;
|
||||
--pop-bg-tertiary: 245 247 250;
|
||||
--pop-bg-elevated: 235 238 245;
|
||||
|
||||
--pop-neon-cyan: 0 122 204;
|
||||
--pop-neon-cyan-bright: 0 140 230;
|
||||
--pop-neon-cyan-dim: 0 100 170;
|
||||
--pop-neon-pink: 220 38 127;
|
||||
--pop-neon-purple: 118 38 200;
|
||||
|
||||
--pop-success: 22 163 74;
|
||||
--pop-success-dim: 21 128 61;
|
||||
--pop-warning: 245 158 11;
|
||||
--pop-warning-dim: 217 119 6;
|
||||
--pop-danger: 220 38 38;
|
||||
--pop-danger-dim: 185 28 28;
|
||||
|
||||
--pop-text-primary: 15 23 42;
|
||||
--pop-text-secondary: 71 85 105;
|
||||
--pop-text-muted: 148 163 184;
|
||||
|
||||
--pop-border: 226 232 240;
|
||||
--pop-border-light: 203 213 225;
|
||||
}
|
||||
|
||||
/* POP 배경 그리드 패턴 */
|
||||
.pop-bg-pattern::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.pop-light .pop-bg-pattern::before {
|
||||
background: repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
|
||||
repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
/* POP 글로우 효과 */
|
||||
.pop-glow-cyan {
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.pop-glow-cyan-strong {
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.5), 0 0 50px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.pop-glow-success {
|
||||
box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
.pop-glow-warning {
|
||||
box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
|
||||
}
|
||||
|
||||
.pop-glow-danger {
|
||||
box-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
|
||||
}
|
||||
|
||||
/* POP 펄스 글로우 애니메이션 */
|
||||
@keyframes pop-pulse-glow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.pop-animate-pulse-glow {
|
||||
animation: pop-pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* POP 프로그레스 바 샤인 애니메이션 */
|
||||
@keyframes pop-progress-shine {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.pop-progress-shine::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
|
||||
animation: pop-progress-shine 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* POP 스크롤바 스타일 */
|
||||
.pop-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.pop-scrollbar::-webkit-scrollbar-track {
|
||||
background: rgb(var(--pop-bg-secondary));
|
||||
}
|
||||
|
||||
.pop-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgb(var(--pop-border-light));
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.pop-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(var(--pop-neon-cyan-dim));
|
||||
}
|
||||
|
||||
/* POP 스크롤바 숨기기 */
|
||||
.pop-hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pop-hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* ===== End of Global Styles ===== */
|
||||
|
|
|
|||
|
|
@ -22,6 +22,13 @@ const OPERATOR_LABELS: Record<string, string> = {
|
|||
NOT_IN: "NOT IN",
|
||||
IS_NULL: "NULL",
|
||||
IS_NOT_NULL: "NOT NULL",
|
||||
EXISTS_IN: "EXISTS IN",
|
||||
NOT_EXISTS_IN: "NOT EXISTS IN",
|
||||
};
|
||||
|
||||
// EXISTS 계열 연산자인지 확인
|
||||
const isExistsOperator = (operator: string): boolean => {
|
||||
return operator === "EXISTS_IN" || operator === "NOT_EXISTS_IN";
|
||||
};
|
||||
|
||||
export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeData>) => {
|
||||
|
|
@ -54,15 +61,31 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
|
|||
{idx > 0 && (
|
||||
<div className="mb-1 text-center text-xs font-semibold text-yellow-600">{data.logic}</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<span className="font-mono text-gray-700">{condition.field}</span>
|
||||
<span className="rounded bg-yellow-200 px-1 py-0.5 text-yellow-800">
|
||||
<span
|
||||
className={`rounded px-1 py-0.5 ${
|
||||
isExistsOperator(condition.operator)
|
||||
? "bg-purple-200 text-purple-800"
|
||||
: "bg-yellow-200 text-yellow-800"
|
||||
}`}
|
||||
>
|
||||
{OPERATOR_LABELS[condition.operator] || condition.operator}
|
||||
</span>
|
||||
{condition.value !== null && condition.value !== undefined && (
|
||||
<span className="text-gray-600">
|
||||
{typeof condition.value === "string" ? `"${condition.value}"` : String(condition.value)}
|
||||
{/* EXISTS 연산자인 경우 테이블.필드 표시 */}
|
||||
{isExistsOperator(condition.operator) ? (
|
||||
<span className="text-purple-600">
|
||||
{(condition as any).lookupTableLabel || (condition as any).lookupTable || "..."}
|
||||
{(condition as any).lookupField && `.${(condition as any).lookupFieldLabel || (condition as any).lookupField}`}
|
||||
</span>
|
||||
) : (
|
||||
// 일반 연산자인 경우 값 표시
|
||||
condition.value !== null &&
|
||||
condition.value !== undefined && (
|
||||
<span className="text-gray-600">
|
||||
{typeof condition.value === "string" ? `"${condition.value}"` : String(condition.value)}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,18 @@
|
|||
* 조건 분기 노드 속성 편집
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Plus, Trash2, Database, Search, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
|
||||
import type { ConditionNodeData } from "@/types/node-editor";
|
||||
import type { ConditionNodeData, ConditionOperator } from "@/types/node-editor";
|
||||
import { tableManagementApi } from "@/lib/api/tableManagement";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// 필드 정의
|
||||
interface FieldDefinition {
|
||||
|
|
@ -20,6 +24,19 @@ interface FieldDefinition {
|
|||
type?: string;
|
||||
}
|
||||
|
||||
// 테이블 정보
|
||||
interface TableInfo {
|
||||
tableName: string;
|
||||
tableLabel: string;
|
||||
}
|
||||
|
||||
// 테이블 컬럼 정보
|
||||
interface ColumnInfo {
|
||||
columnName: string;
|
||||
columnLabel: string;
|
||||
dataType: string;
|
||||
}
|
||||
|
||||
interface ConditionPropertiesProps {
|
||||
nodeId: string;
|
||||
data: ConditionNodeData;
|
||||
|
|
@ -38,8 +55,194 @@ const OPERATORS = [
|
|||
{ value: "NOT_IN", label: "NOT IN" },
|
||||
{ value: "IS_NULL", label: "NULL" },
|
||||
{ value: "IS_NOT_NULL", label: "NOT NULL" },
|
||||
{ value: "EXISTS_IN", label: "다른 테이블에 존재함" },
|
||||
{ value: "NOT_EXISTS_IN", label: "다른 테이블에 존재하지 않음" },
|
||||
] as const;
|
||||
|
||||
// EXISTS 계열 연산자인지 확인
|
||||
const isExistsOperator = (operator: string): boolean => {
|
||||
return operator === "EXISTS_IN" || operator === "NOT_EXISTS_IN";
|
||||
};
|
||||
|
||||
// 테이블 선택용 검색 가능한 Combobox
|
||||
function TableCombobox({
|
||||
tables,
|
||||
value,
|
||||
onSelect,
|
||||
placeholder = "테이블 검색...",
|
||||
}: {
|
||||
tables: TableInfo[];
|
||||
value: string;
|
||||
onSelect: (value: string) => void;
|
||||
placeholder?: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const selectedTable = tables.find((t) => t.tableName === value);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="mt-1 h-8 w-full justify-between text-xs"
|
||||
>
|
||||
{selectedTable ? (
|
||||
<span className="truncate">
|
||||
{selectedTable.tableLabel}
|
||||
<span className="ml-1 text-gray-400">({selectedTable.tableName})</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">테이블 선택</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[300px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder={placeholder} className="h-8 text-xs" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-center text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup className="max-h-[200px] overflow-y-auto">
|
||||
{tables.map((table) => (
|
||||
<CommandItem
|
||||
key={table.tableName}
|
||||
value={`${table.tableLabel} ${table.tableName}`}
|
||||
onSelect={() => {
|
||||
onSelect(table.tableName);
|
||||
setOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check className={cn("mr-2 h-3 w-3", value === table.tableName ? "opacity-100" : "opacity-0")} />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{table.tableLabel}</span>
|
||||
<span className="text-[10px] text-gray-500">{table.tableName}</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
// 컬럼 선택용 검색 가능한 Combobox
|
||||
function ColumnCombobox({
|
||||
columns,
|
||||
value,
|
||||
onSelect,
|
||||
placeholder = "컬럼 검색...",
|
||||
}: {
|
||||
columns: ColumnInfo[];
|
||||
value: string;
|
||||
onSelect: (value: string) => void;
|
||||
placeholder?: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const selectedColumn = columns.find((c) => c.columnName === value);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="mt-1 h-8 w-full justify-between text-xs"
|
||||
>
|
||||
{selectedColumn ? (
|
||||
<span className="truncate">
|
||||
{selectedColumn.columnLabel}
|
||||
<span className="ml-1 text-gray-400">({selectedColumn.columnName})</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">컬럼 선택</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[300px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder={placeholder} className="h-8 text-xs" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup className="max-h-[200px] overflow-y-auto">
|
||||
{columns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.columnName}
|
||||
value={`${col.columnLabel} ${col.columnName}`}
|
||||
onSelect={() => {
|
||||
onSelect(col.columnName);
|
||||
setOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check className={cn("mr-2 h-3 w-3", value === col.columnName ? "opacity-100" : "opacity-0")} />
|
||||
<span className="font-medium">{col.columnLabel}</span>
|
||||
<span className="ml-1 text-[10px] text-gray-400">({col.columnName})</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
// 컬럼 선택 섹션 (자동 로드 포함)
|
||||
function ColumnSelectSection({
|
||||
lookupTable,
|
||||
lookupField,
|
||||
tableColumnsCache,
|
||||
loadingColumns,
|
||||
loadTableColumns,
|
||||
onSelect,
|
||||
}: {
|
||||
lookupTable: string;
|
||||
lookupField: string;
|
||||
tableColumnsCache: Record<string, ColumnInfo[]>;
|
||||
loadingColumns: Record<string, boolean>;
|
||||
loadTableColumns: (tableName: string) => Promise<ColumnInfo[]>;
|
||||
onSelect: (value: string) => void;
|
||||
}) {
|
||||
// 캐시에 없고 로딩 중이 아니면 자동으로 로드
|
||||
useEffect(() => {
|
||||
if (lookupTable && !tableColumnsCache[lookupTable] && !loadingColumns[lookupTable]) {
|
||||
loadTableColumns(lookupTable);
|
||||
}
|
||||
}, [lookupTable, tableColumnsCache, loadingColumns, loadTableColumns]);
|
||||
|
||||
const isLoading = loadingColumns[lookupTable];
|
||||
const columns = tableColumnsCache[lookupTable];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">
|
||||
<Search className="mr-1 inline h-3 w-3" />
|
||||
비교할 컬럼
|
||||
</Label>
|
||||
{isLoading ? (
|
||||
<div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
|
||||
컬럼 목록 로딩 중...
|
||||
</div>
|
||||
) : columns && columns.length > 0 ? (
|
||||
<ColumnCombobox columns={columns} value={lookupField} onSelect={onSelect} placeholder="컬럼 검색..." />
|
||||
) : (
|
||||
<div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
|
||||
컬럼 목록을 로드할 수 없습니다
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps) {
|
||||
const { updateNode, nodes, edges } = useFlowEditorStore();
|
||||
|
||||
|
|
@ -48,6 +251,12 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
|
|||
const [logic, setLogic] = useState<"AND" | "OR">(data.logic || "AND");
|
||||
const [availableFields, setAvailableFields] = useState<FieldDefinition[]>([]);
|
||||
|
||||
// EXISTS 연산자용 상태
|
||||
const [allTables, setAllTables] = useState<TableInfo[]>([]);
|
||||
const [tableColumnsCache, setTableColumnsCache] = useState<Record<string, ColumnInfo[]>>({});
|
||||
const [loadingTables, setLoadingTables] = useState(false);
|
||||
const [loadingColumns, setLoadingColumns] = useState<Record<string, boolean>>({});
|
||||
|
||||
// 데이터 변경 시 로컬 상태 업데이트
|
||||
useEffect(() => {
|
||||
setDisplayName(data.displayName || "조건 분기");
|
||||
|
|
@ -55,6 +264,100 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
|
|||
setLogic(data.logic || "AND");
|
||||
}, [data]);
|
||||
|
||||
// 전체 테이블 목록 로드 (EXISTS 연산자용)
|
||||
useEffect(() => {
|
||||
const loadAllTables = async () => {
|
||||
// 이미 EXISTS 연산자가 있거나 로드된 적이 있으면 스킵
|
||||
if (allTables.length > 0) return;
|
||||
|
||||
// EXISTS 연산자가 하나라도 있으면 테이블 목록 로드
|
||||
const hasExistsOperator = conditions.some((c) => isExistsOperator(c.operator));
|
||||
if (!hasExistsOperator) return;
|
||||
|
||||
setLoadingTables(true);
|
||||
try {
|
||||
const response = await tableManagementApi.getTableList();
|
||||
if (response.success && response.data) {
|
||||
setAllTables(
|
||||
response.data.map((t: any) => ({
|
||||
tableName: t.tableName,
|
||||
tableLabel: t.tableLabel || t.tableName,
|
||||
}))
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("테이블 목록 로드 실패:", error);
|
||||
} finally {
|
||||
setLoadingTables(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadAllTables();
|
||||
}, [conditions, allTables.length]);
|
||||
|
||||
// 테이블 컬럼 로드 함수
|
||||
const loadTableColumns = useCallback(
|
||||
async (tableName: string): Promise<ColumnInfo[]> => {
|
||||
// 캐시에 있으면 반환
|
||||
if (tableColumnsCache[tableName]) {
|
||||
return tableColumnsCache[tableName];
|
||||
}
|
||||
|
||||
// 이미 로딩 중이면 스킵
|
||||
if (loadingColumns[tableName]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 로딩 상태 설정
|
||||
setLoadingColumns((prev) => ({ ...prev, [tableName]: true }));
|
||||
|
||||
try {
|
||||
// getColumnList 반환: { success, data: { columns, total, ... } }
|
||||
const response = await tableManagementApi.getColumnList(tableName);
|
||||
if (response.success && response.data && response.data.columns) {
|
||||
const columns = response.data.columns.map((c: any) => ({
|
||||
columnName: c.columnName,
|
||||
columnLabel: c.columnLabel || c.columnName,
|
||||
dataType: c.dataType,
|
||||
}));
|
||||
setTableColumnsCache((prev) => ({ ...prev, [tableName]: columns }));
|
||||
console.log(`✅ 테이블 ${tableName} 컬럼 로드 완료:`, columns.length, "개");
|
||||
return columns;
|
||||
} else {
|
||||
console.warn(`⚠️ 테이블 ${tableName} 컬럼 조회 실패:`, response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`❌ 테이블 ${tableName} 컬럼 로드 실패:`, error);
|
||||
} finally {
|
||||
setLoadingColumns((prev) => ({ ...prev, [tableName]: false }));
|
||||
}
|
||||
return [];
|
||||
},
|
||||
[tableColumnsCache, loadingColumns]
|
||||
);
|
||||
|
||||
// EXISTS 연산자 선택 시 테이블 목록 강제 로드
|
||||
const ensureTablesLoaded = useCallback(async () => {
|
||||
if (allTables.length > 0) return;
|
||||
|
||||
setLoadingTables(true);
|
||||
try {
|
||||
const response = await tableManagementApi.getTableList();
|
||||
if (response.success && response.data) {
|
||||
setAllTables(
|
||||
response.data.map((t: any) => ({
|
||||
tableName: t.tableName,
|
||||
tableLabel: t.tableLabel || t.tableName,
|
||||
}))
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("테이블 목록 로드 실패:", error);
|
||||
} finally {
|
||||
setLoadingTables(false);
|
||||
}
|
||||
}, [allTables.length]);
|
||||
|
||||
// 🔥 연결된 소스 노드의 필드를 재귀적으로 수집
|
||||
useEffect(() => {
|
||||
const getAllSourceFields = (currentNodeId: string, visited: Set<string> = new Set()): FieldDefinition[] => {
|
||||
|
|
@ -170,15 +473,18 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
|
|||
}, [nodeId, nodes, edges]);
|
||||
|
||||
const handleAddCondition = () => {
|
||||
setConditions([
|
||||
...conditions,
|
||||
{
|
||||
field: "",
|
||||
operator: "EQUALS",
|
||||
value: "",
|
||||
valueType: "static", // "static" (고정값) 또는 "field" (필드 참조)
|
||||
},
|
||||
]);
|
||||
const newCondition = {
|
||||
field: "",
|
||||
operator: "EQUALS" as ConditionOperator,
|
||||
value: "",
|
||||
valueType: "static" as "static" | "field",
|
||||
// EXISTS 연산자용 필드는 초기값 없음
|
||||
lookupTable: undefined,
|
||||
lookupTableLabel: undefined,
|
||||
lookupField: undefined,
|
||||
lookupFieldLabel: undefined,
|
||||
};
|
||||
setConditions([...conditions, newCondition]);
|
||||
};
|
||||
|
||||
const handleRemoveCondition = (index: number) => {
|
||||
|
|
@ -196,9 +502,50 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
|
|||
});
|
||||
};
|
||||
|
||||
const handleConditionChange = (index: number, field: string, value: any) => {
|
||||
const handleConditionChange = async (index: number, field: string, value: any) => {
|
||||
const newConditions = [...conditions];
|
||||
newConditions[index] = { ...newConditions[index], [field]: value };
|
||||
|
||||
// EXISTS 연산자로 변경 시 테이블 목록 로드 및 기존 value/valueType 초기화
|
||||
if (field === "operator" && isExistsOperator(value)) {
|
||||
await ensureTablesLoaded();
|
||||
// EXISTS 연산자에서는 value, valueType이 필요 없으므로 초기화
|
||||
newConditions[index].value = "";
|
||||
newConditions[index].valueType = undefined;
|
||||
}
|
||||
|
||||
// EXISTS 연산자에서 다른 연산자로 변경 시 lookup 필드들 초기화
|
||||
if (field === "operator" && !isExistsOperator(value)) {
|
||||
newConditions[index].lookupTable = undefined;
|
||||
newConditions[index].lookupTableLabel = undefined;
|
||||
newConditions[index].lookupField = undefined;
|
||||
newConditions[index].lookupFieldLabel = undefined;
|
||||
}
|
||||
|
||||
// lookupTable 변경 시 컬럼 목록 로드 및 라벨 설정
|
||||
if (field === "lookupTable" && value) {
|
||||
const tableInfo = allTables.find((t) => t.tableName === value);
|
||||
if (tableInfo) {
|
||||
newConditions[index].lookupTableLabel = tableInfo.tableLabel;
|
||||
}
|
||||
// 테이블 변경 시 필드 초기화
|
||||
newConditions[index].lookupField = undefined;
|
||||
newConditions[index].lookupFieldLabel = undefined;
|
||||
// 컬럼 목록 미리 로드
|
||||
await loadTableColumns(value);
|
||||
}
|
||||
|
||||
// lookupField 변경 시 라벨 설정
|
||||
if (field === "lookupField" && value) {
|
||||
const tableName = newConditions[index].lookupTable;
|
||||
if (tableName && tableColumnsCache[tableName]) {
|
||||
const columnInfo = tableColumnsCache[tableName].find((c) => c.columnName === value);
|
||||
if (columnInfo) {
|
||||
newConditions[index].lookupFieldLabel = columnInfo.columnLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setConditions(newConditions);
|
||||
updateNode(nodeId, {
|
||||
conditions: newConditions,
|
||||
|
|
@ -329,64 +676,114 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
{condition.operator !== "IS_NULL" && condition.operator !== "IS_NOT_NULL" && (
|
||||
{/* EXISTS 연산자인 경우: 테이블/필드 선택 UI (검색 가능한 Combobox) */}
|
||||
{isExistsOperator(condition.operator) && (
|
||||
<>
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">비교 값 타입</Label>
|
||||
<Select
|
||||
value={(condition as any).valueType || "static"}
|
||||
onValueChange={(value) => handleConditionChange(index, "valueType", value)}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="static">고정값</SelectItem>
|
||||
<SelectItem value="field">필드 참조</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Label className="text-xs text-gray-600">
|
||||
<Database className="mr-1 inline h-3 w-3" />
|
||||
조회할 테이블
|
||||
</Label>
|
||||
{loadingTables ? (
|
||||
<div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
|
||||
테이블 목록 로딩 중...
|
||||
</div>
|
||||
) : allTables.length > 0 ? (
|
||||
<TableCombobox
|
||||
tables={allTables}
|
||||
value={(condition as any).lookupTable || ""}
|
||||
onSelect={(value) => handleConditionChange(index, "lookupTable", value)}
|
||||
placeholder="테이블 검색..."
|
||||
/>
|
||||
) : (
|
||||
<div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
|
||||
테이블 목록을 로드할 수 없습니다
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">
|
||||
{(condition as any).valueType === "field" ? "비교 필드" : "비교 값"}
|
||||
</Label>
|
||||
{(condition as any).valueType === "field" ? (
|
||||
// 필드 참조: 드롭다운으로 선택
|
||||
availableFields.length > 0 ? (
|
||||
<Select
|
||||
value={condition.value as string}
|
||||
onValueChange={(value) => handleConditionChange(index, "value", value)}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="비교할 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableFields.map((field) => (
|
||||
<SelectItem key={field.name} value={field.name}>
|
||||
{field.label || field.name}
|
||||
{field.type && <span className="ml-2 text-xs text-gray-400">({field.type})</span>}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
|
||||
소스 노드를 연결하세요
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
// 고정값: 직접 입력
|
||||
<Input
|
||||
value={condition.value as string}
|
||||
onChange={(e) => handleConditionChange(index, "value", e.target.value)}
|
||||
placeholder="비교할 값"
|
||||
className="mt-1 h-8 text-xs"
|
||||
/>
|
||||
)}
|
||||
{(condition as any).lookupTable && (
|
||||
<ColumnSelectSection
|
||||
lookupTable={(condition as any).lookupTable}
|
||||
lookupField={(condition as any).lookupField || ""}
|
||||
tableColumnsCache={tableColumnsCache}
|
||||
loadingColumns={loadingColumns}
|
||||
loadTableColumns={loadTableColumns}
|
||||
onSelect={(value) => handleConditionChange(index, "lookupField", value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="rounded bg-purple-50 p-2 text-xs text-purple-700">
|
||||
{condition.operator === "EXISTS_IN"
|
||||
? `소스의 "${condition.field || "..."}" 값이 "${(condition as any).lookupTableLabel || "..."}" 테이블의 "${(condition as any).lookupFieldLabel || "..."}" 컬럼에 존재하면 TRUE`
|
||||
: `소스의 "${condition.field || "..."}" 값이 "${(condition as any).lookupTableLabel || "..."}" 테이블의 "${(condition as any).lookupFieldLabel || "..."}" 컬럼에 존재하지 않으면 TRUE`}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 일반 연산자인 경우: 기존 비교값 UI */}
|
||||
{condition.operator !== "IS_NULL" &&
|
||||
condition.operator !== "IS_NOT_NULL" &&
|
||||
!isExistsOperator(condition.operator) && (
|
||||
<>
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">비교 값 타입</Label>
|
||||
<Select
|
||||
value={(condition as any).valueType || "static"}
|
||||
onValueChange={(value) => handleConditionChange(index, "valueType", value)}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="static">고정값</SelectItem>
|
||||
<SelectItem value="field">필드 참조</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">
|
||||
{(condition as any).valueType === "field" ? "비교 필드" : "비교 값"}
|
||||
</Label>
|
||||
{(condition as any).valueType === "field" ? (
|
||||
// 필드 참조: 드롭다운으로 선택
|
||||
availableFields.length > 0 ? (
|
||||
<Select
|
||||
value={condition.value as string}
|
||||
onValueChange={(value) => handleConditionChange(index, "value", value)}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="비교할 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableFields.map((field) => (
|
||||
<SelectItem key={field.name} value={field.name}>
|
||||
{field.label || field.name}
|
||||
{field.type && (
|
||||
<span className="ml-2 text-xs text-gray-400">({field.type})</span>
|
||||
)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
|
||||
소스 노드를 연결하세요
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
// 고정값: 직접 입력
|
||||
<Input
|
||||
value={condition.value as string}
|
||||
onChange={(e) => handleConditionChange(index, "value", e.target.value)}
|
||||
placeholder="비교할 값"
|
||||
className="mt-1 h-8 text-xs"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -402,20 +799,28 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
|
|||
{/* 안내 */}
|
||||
<div className="space-y-2">
|
||||
<div className="rounded bg-blue-50 p-3 text-xs text-blue-700">
|
||||
🔌 <strong>소스 노드 연결</strong>: 테이블/외부DB 노드를 연결하면 자동으로 필드 목록이 표시됩니다.
|
||||
<strong>소스 노드 연결</strong>: 테이블/외부DB 노드를 연결하면 자동으로 필드 목록이 표시됩니다.
|
||||
</div>
|
||||
<div className="rounded bg-green-50 p-3 text-xs text-green-700">
|
||||
🔄 <strong>비교 값 타입</strong>:<br />• <strong>고정값</strong>: 직접 입력한 값과 비교 (예: age > 30)
|
||||
<br />• <strong>필드 참조</strong>: 다른 필드의 값과 비교 (예: 주문수량 > 재고수량)
|
||||
<strong>비교 값 타입</strong>:<br />
|
||||
- <strong>고정값</strong>: 직접 입력한 값과 비교 (예: age > 30)
|
||||
<br />- <strong>필드 참조</strong>: 다른 필드의 값과 비교 (예: 주문수량 > 재고수량)
|
||||
</div>
|
||||
<div className="rounded bg-purple-50 p-3 text-xs text-purple-700">
|
||||
<strong>테이블 존재 여부 검사</strong>:<br />
|
||||
- <strong>다른 테이블에 존재함</strong>: 값이 다른 테이블에 있으면 TRUE
|
||||
<br />- <strong>다른 테이블에 존재하지 않음</strong>: 값이 다른 테이블에 없으면 TRUE
|
||||
<br />
|
||||
(예: 품명이 품목정보 테이블에 없으면 자동 등록)
|
||||
</div>
|
||||
<div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
|
||||
💡 <strong>AND</strong>: 모든 조건이 참이어야 TRUE 출력
|
||||
<strong>AND</strong>: 모든 조건이 참이어야 TRUE 출력
|
||||
</div>
|
||||
<div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
|
||||
💡 <strong>OR</strong>: 하나라도 참이면 TRUE 출력
|
||||
<strong>OR</strong>: 하나라도 참이면 TRUE 출력
|
||||
</div>
|
||||
<div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
|
||||
⚡ TRUE 출력은 오른쪽 위, FALSE 출력은 오른쪽 아래입니다.
|
||||
TRUE 출력은 오른쪽 위, FALSE 출력은 오른쪽 아래입니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { X, Info } from "lucide-react";
|
||||
import { WorkOrder } from "./types";
|
||||
|
||||
interface PopAcceptModalProps {
|
||||
isOpen: boolean;
|
||||
workOrder: WorkOrder | null;
|
||||
quantity: number;
|
||||
onQuantityChange: (qty: number) => void;
|
||||
onConfirm: (quantity: number) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function PopAcceptModal({
|
||||
isOpen,
|
||||
workOrder,
|
||||
quantity,
|
||||
onQuantityChange,
|
||||
onConfirm,
|
||||
onClose,
|
||||
}: PopAcceptModalProps) {
|
||||
if (!isOpen || !workOrder) return null;
|
||||
|
||||
const acceptedQty = workOrder.acceptedQuantity || 0;
|
||||
const remainingQty = workOrder.orderQuantity - acceptedQty;
|
||||
|
||||
const handleAdjust = (delta: number) => {
|
||||
const newQty = Math.max(1, Math.min(quantity + delta, remainingQty));
|
||||
onQuantityChange(newQty);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const val = parseInt(e.target.value) || 0;
|
||||
const newQty = Math.max(0, Math.min(val, remainingQty));
|
||||
onQuantityChange(newQty);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (quantity > 0) {
|
||||
onConfirm(quantity);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
||||
<div className="pop-modal">
|
||||
<div className="pop-modal-header">
|
||||
<h2 className="pop-modal-title">작업 접수</h2>
|
||||
<button className="pop-modal-close" onClick={onClose}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pop-modal-body">
|
||||
<div className="pop-accept-modal-content">
|
||||
{/* 작업지시 정보 */}
|
||||
<div className="pop-accept-work-info">
|
||||
<div className="work-id">{workOrder.id}</div>
|
||||
<div className="work-name">
|
||||
{workOrder.itemName} ({workOrder.spec})
|
||||
</div>
|
||||
<div style={{ marginTop: "var(--spacing-sm)", fontSize: "var(--text-xs)", color: "rgb(var(--text-muted))" }}>
|
||||
지시수량: {workOrder.orderQuantity} EA | 기 접수: {acceptedQty} EA
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 수량 입력 */}
|
||||
<div>
|
||||
<label className="pop-form-label">접수 수량</label>
|
||||
<div className="pop-quantity-input-wrapper">
|
||||
<button className="pop-qty-btn minus" onClick={() => handleAdjust(-10)}>
|
||||
-10
|
||||
</button>
|
||||
<button className="pop-qty-btn minus" onClick={() => handleAdjust(-1)}>
|
||||
-1
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
className="pop-qty-input"
|
||||
value={quantity}
|
||||
onChange={handleInputChange}
|
||||
min={1}
|
||||
max={remainingQty}
|
||||
/>
|
||||
<button className="pop-qty-btn" onClick={() => handleAdjust(1)}>
|
||||
+1
|
||||
</button>
|
||||
<button className="pop-qty-btn" onClick={() => handleAdjust(10)}>
|
||||
+10
|
||||
</button>
|
||||
</div>
|
||||
<div className="pop-qty-hint">미접수 수량: {remainingQty} EA</div>
|
||||
</div>
|
||||
|
||||
{/* 분할접수 안내 */}
|
||||
{quantity < remainingQty && (
|
||||
<div className="pop-accept-info-box">
|
||||
<span className="info-icon">
|
||||
<Info size={20} />
|
||||
</span>
|
||||
<div>
|
||||
<div className="info-title">분할 접수</div>
|
||||
<div className="info-desc">
|
||||
{quantity}EA 접수 후 {remainingQty - quantity}EA가 접수대기 상태로 남습니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pop-modal-footer">
|
||||
<button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
className="pop-btn pop-btn-primary"
|
||||
style={{ flex: 1 }}
|
||||
onClick={handleConfirm}
|
||||
disabled={quantity <= 0}
|
||||
>
|
||||
접수 ({quantity} EA)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,462 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import "./styles.css";
|
||||
|
||||
import {
|
||||
AppState,
|
||||
ModalState,
|
||||
PanelState,
|
||||
StatusType,
|
||||
ProductionType,
|
||||
WorkOrder,
|
||||
WorkStep,
|
||||
Equipment,
|
||||
Process,
|
||||
} from "./types";
|
||||
import { WORK_ORDERS, EQUIPMENTS, PROCESSES, WORK_STEP_TEMPLATES, STATUS_TEXT } from "./data";
|
||||
|
||||
import { PopHeader } from "./PopHeader";
|
||||
import { PopStatusTabs } from "./PopStatusTabs";
|
||||
import { PopWorkCard } from "./PopWorkCard";
|
||||
import { PopBottomNav } from "./PopBottomNav";
|
||||
import { PopEquipmentModal } from "./PopEquipmentModal";
|
||||
import { PopProcessModal } from "./PopProcessModal";
|
||||
import { PopAcceptModal } from "./PopAcceptModal";
|
||||
import { PopSettingsModal } from "./PopSettingsModal";
|
||||
import { PopProductionPanel } from "./PopProductionPanel";
|
||||
|
||||
export function PopApp() {
|
||||
// 앱 상태
|
||||
const [appState, setAppState] = useState<AppState>({
|
||||
currentStatus: "waiting",
|
||||
selectedEquipment: null,
|
||||
selectedProcess: null,
|
||||
selectedWorkOrder: null,
|
||||
showMyWorkOnly: false,
|
||||
currentWorkSteps: [],
|
||||
currentStepIndex: 0,
|
||||
currentProductionType: "work-order",
|
||||
selectionMode: "single",
|
||||
completionAction: "close",
|
||||
acceptTargetWorkOrder: null,
|
||||
acceptQuantity: 0,
|
||||
theme: "dark",
|
||||
});
|
||||
|
||||
// 모달 상태
|
||||
const [modalState, setModalState] = useState<ModalState>({
|
||||
equipment: false,
|
||||
process: false,
|
||||
accept: false,
|
||||
settings: false,
|
||||
});
|
||||
|
||||
// 패널 상태
|
||||
const [panelState, setPanelState] = useState<PanelState>({
|
||||
production: false,
|
||||
});
|
||||
|
||||
// 현재 시간 (hydration 에러 방지를 위해 초기값 null)
|
||||
const [currentDateTime, setCurrentDateTime] = useState<Date | null>(null);
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
|
||||
// 작업지시 목록 (상태 변경을 위해 로컬 상태로 관리)
|
||||
const [workOrders, setWorkOrders] = useState<WorkOrder[]>(WORK_ORDERS);
|
||||
|
||||
// 클라이언트 마운트 확인 및 시계 업데이트
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
setCurrentDateTime(new Date());
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setCurrentDateTime(new Date());
|
||||
}, 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
// 로컬 스토리지에서 설정 로드
|
||||
useEffect(() => {
|
||||
const savedSelectionMode = localStorage.getItem("selectionMode") as "single" | "multi" | null;
|
||||
const savedCompletionAction = localStorage.getItem("completionAction") as "close" | "stay" | null;
|
||||
const savedTheme = localStorage.getItem("popTheme") as "dark" | "light" | null;
|
||||
|
||||
setAppState((prev) => ({
|
||||
...prev,
|
||||
selectionMode: savedSelectionMode || "single",
|
||||
completionAction: savedCompletionAction || "close",
|
||||
theme: savedTheme || "dark",
|
||||
}));
|
||||
}, []);
|
||||
|
||||
// 상태별 카운트 계산
|
||||
const getStatusCounts = useCallback(() => {
|
||||
const myProcessId = appState.selectedProcess?.id;
|
||||
|
||||
let waitingCount = 0;
|
||||
let pendingAcceptCount = 0;
|
||||
let inProgressCount = 0;
|
||||
let completedCount = 0;
|
||||
|
||||
workOrders.forEach((wo) => {
|
||||
if (!wo.processFlow) return;
|
||||
|
||||
const myProcessIndex = myProcessId
|
||||
? wo.processFlow.findIndex((step) => step.id === myProcessId)
|
||||
: -1;
|
||||
|
||||
if (wo.status === "completed") {
|
||||
completedCount++;
|
||||
} else if (wo.status === "in-progress" && wo.accepted) {
|
||||
inProgressCount++;
|
||||
} else if (myProcessIndex >= 0) {
|
||||
const currentProcessIndex = wo.currentProcessIndex || 0;
|
||||
const myStep = wo.processFlow[myProcessIndex];
|
||||
|
||||
if (currentProcessIndex < myProcessIndex) {
|
||||
waitingCount++;
|
||||
} else if (currentProcessIndex === myProcessIndex && myStep.status !== "completed") {
|
||||
pendingAcceptCount++;
|
||||
} else if (myStep.status === "completed") {
|
||||
completedCount++;
|
||||
}
|
||||
} else {
|
||||
if (wo.status === "waiting") waitingCount++;
|
||||
else if (wo.status === "in-progress") inProgressCount++;
|
||||
}
|
||||
});
|
||||
|
||||
return { waitingCount, pendingAcceptCount, inProgressCount, completedCount };
|
||||
}, [workOrders, appState.selectedProcess]);
|
||||
|
||||
// 필터링된 작업 목록
|
||||
const getFilteredWorkOrders = useCallback(() => {
|
||||
const myProcessId = appState.selectedProcess?.id;
|
||||
let filtered: WorkOrder[] = [];
|
||||
|
||||
workOrders.forEach((wo) => {
|
||||
if (!wo.processFlow) return;
|
||||
|
||||
const myProcessIndex = myProcessId
|
||||
? wo.processFlow.findIndex((step) => step.id === myProcessId)
|
||||
: -1;
|
||||
const currentProcessIndex = wo.currentProcessIndex || 0;
|
||||
const myStep = myProcessIndex >= 0 ? wo.processFlow[myProcessIndex] : null;
|
||||
|
||||
switch (appState.currentStatus) {
|
||||
case "waiting":
|
||||
if (myProcessIndex >= 0 && currentProcessIndex < myProcessIndex) {
|
||||
filtered.push(wo);
|
||||
} else if (!myProcessId && wo.status === "waiting") {
|
||||
filtered.push(wo);
|
||||
}
|
||||
break;
|
||||
|
||||
case "pending-accept":
|
||||
if (
|
||||
myProcessIndex >= 0 &&
|
||||
currentProcessIndex === myProcessIndex &&
|
||||
myStep &&
|
||||
myStep.status !== "completed" &&
|
||||
!wo.accepted
|
||||
) {
|
||||
filtered.push(wo);
|
||||
}
|
||||
break;
|
||||
|
||||
case "in-progress":
|
||||
if (wo.accepted && wo.status === "in-progress") {
|
||||
filtered.push(wo);
|
||||
} else if (!myProcessId && wo.status === "in-progress") {
|
||||
filtered.push(wo);
|
||||
}
|
||||
break;
|
||||
|
||||
case "completed":
|
||||
if (wo.status === "completed") {
|
||||
filtered.push(wo);
|
||||
} else if (myStep && myStep.status === "completed") {
|
||||
filtered.push(wo);
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// 내 작업만 보기 필터
|
||||
if (appState.showMyWorkOnly && myProcessId) {
|
||||
filtered = filtered.filter((wo) => {
|
||||
const mySteps = wo.processFlow.filter((step) => step.id === myProcessId);
|
||||
if (mySteps.length === 0) return false;
|
||||
return !mySteps.every((step) => step.status === "completed");
|
||||
});
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [workOrders, appState.currentStatus, appState.selectedProcess, appState.showMyWorkOnly]);
|
||||
|
||||
// 상태 탭 변경
|
||||
const handleStatusChange = (status: StatusType) => {
|
||||
setAppState((prev) => ({ ...prev, currentStatus: status }));
|
||||
};
|
||||
|
||||
// 생산 유형 변경
|
||||
const handleProductionTypeChange = (type: ProductionType) => {
|
||||
setAppState((prev) => ({ ...prev, currentProductionType: type }));
|
||||
};
|
||||
|
||||
// 내 작업만 보기 토글
|
||||
const handleMyWorkToggle = () => {
|
||||
setAppState((prev) => ({ ...prev, showMyWorkOnly: !prev.showMyWorkOnly }));
|
||||
};
|
||||
|
||||
// 테마 토글
|
||||
const handleThemeToggle = () => {
|
||||
const newTheme = appState.theme === "dark" ? "light" : "dark";
|
||||
setAppState((prev) => ({ ...prev, theme: newTheme }));
|
||||
localStorage.setItem("popTheme", newTheme);
|
||||
};
|
||||
|
||||
// 모달 열기/닫기
|
||||
const openModal = (type: keyof ModalState) => {
|
||||
setModalState((prev) => ({ ...prev, [type]: true }));
|
||||
};
|
||||
|
||||
const closeModal = (type: keyof ModalState) => {
|
||||
setModalState((prev) => ({ ...prev, [type]: false }));
|
||||
};
|
||||
|
||||
// 설비 선택
|
||||
const handleEquipmentSelect = (equipment: Equipment) => {
|
||||
setAppState((prev) => ({
|
||||
...prev,
|
||||
selectedEquipment: equipment,
|
||||
// 공정이 1개면 자동 선택
|
||||
selectedProcess:
|
||||
equipment.processIds.length === 1
|
||||
? PROCESSES.find((p) => p.id === equipment.processIds[0]) || null
|
||||
: null,
|
||||
}));
|
||||
};
|
||||
|
||||
// 공정 선택
|
||||
const handleProcessSelect = (process: Process) => {
|
||||
setAppState((prev) => ({ ...prev, selectedProcess: process }));
|
||||
};
|
||||
|
||||
// 작업 접수 모달 열기
|
||||
const handleOpenAcceptModal = (workOrder: WorkOrder) => {
|
||||
const acceptedQty = workOrder.acceptedQuantity || 0;
|
||||
const remainingQty = workOrder.orderQuantity - acceptedQty;
|
||||
|
||||
setAppState((prev) => ({
|
||||
...prev,
|
||||
acceptTargetWorkOrder: workOrder,
|
||||
acceptQuantity: remainingQty,
|
||||
}));
|
||||
openModal("accept");
|
||||
};
|
||||
|
||||
// 접수 확인
|
||||
const handleConfirmAccept = (quantity: number) => {
|
||||
if (!appState.acceptTargetWorkOrder) return;
|
||||
|
||||
setWorkOrders((prev) =>
|
||||
prev.map((wo) => {
|
||||
if (wo.id === appState.acceptTargetWorkOrder!.id) {
|
||||
const previousAccepted = wo.acceptedQuantity || 0;
|
||||
const newAccepted = previousAccepted + quantity;
|
||||
return {
|
||||
...wo,
|
||||
acceptedQuantity: newAccepted,
|
||||
remainingQuantity: wo.orderQuantity - newAccepted,
|
||||
accepted: true,
|
||||
status: "in-progress" as const,
|
||||
isPartialAccept: newAccepted < wo.orderQuantity,
|
||||
};
|
||||
}
|
||||
return wo;
|
||||
})
|
||||
);
|
||||
|
||||
closeModal("accept");
|
||||
setAppState((prev) => ({
|
||||
...prev,
|
||||
acceptTargetWorkOrder: null,
|
||||
acceptQuantity: 0,
|
||||
}));
|
||||
};
|
||||
|
||||
// 접수 취소
|
||||
const handleCancelAccept = (workOrderId: string) => {
|
||||
setWorkOrders((prev) =>
|
||||
prev.map((wo) => {
|
||||
if (wo.id === workOrderId) {
|
||||
return {
|
||||
...wo,
|
||||
accepted: false,
|
||||
acceptedQuantity: 0,
|
||||
remainingQuantity: wo.orderQuantity,
|
||||
isPartialAccept: false,
|
||||
status: "waiting" as const,
|
||||
};
|
||||
}
|
||||
return wo;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
// 생산진행 패널 열기
|
||||
const handleOpenProductionPanel = (workOrder: WorkOrder) => {
|
||||
const template = WORK_STEP_TEMPLATES[workOrder.process] || WORK_STEP_TEMPLATES["default"];
|
||||
const workSteps: WorkStep[] = template.map((step) => ({
|
||||
...step,
|
||||
status: "pending" as const,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
data: {},
|
||||
}));
|
||||
|
||||
setAppState((prev) => ({
|
||||
...prev,
|
||||
selectedWorkOrder: workOrder,
|
||||
currentWorkSteps: workSteps,
|
||||
currentStepIndex: 0,
|
||||
}));
|
||||
setPanelState((prev) => ({ ...prev, production: true }));
|
||||
};
|
||||
|
||||
// 생산진행 패널 닫기
|
||||
const handleCloseProductionPanel = () => {
|
||||
setPanelState((prev) => ({ ...prev, production: false }));
|
||||
setAppState((prev) => ({
|
||||
...prev,
|
||||
selectedWorkOrder: null,
|
||||
currentWorkSteps: [],
|
||||
currentStepIndex: 0,
|
||||
}));
|
||||
};
|
||||
|
||||
// 설정 저장
|
||||
const handleSaveSettings = (selectionMode: "single" | "multi", completionAction: "close" | "stay") => {
|
||||
setAppState((prev) => ({ ...prev, selectionMode, completionAction }));
|
||||
localStorage.setItem("selectionMode", selectionMode);
|
||||
localStorage.setItem("completionAction", completionAction);
|
||||
closeModal("settings");
|
||||
};
|
||||
|
||||
const statusCounts = getStatusCounts();
|
||||
const filteredWorkOrders = getFilteredWorkOrders();
|
||||
|
||||
return (
|
||||
<div className={`pop-container ${appState.theme === "light" ? "light" : ""}`}>
|
||||
<div className="pop-app">
|
||||
{/* 헤더 */}
|
||||
<PopHeader
|
||||
currentDateTime={currentDateTime || new Date()}
|
||||
productionType={appState.currentProductionType}
|
||||
selectedEquipment={appState.selectedEquipment}
|
||||
selectedProcess={appState.selectedProcess}
|
||||
showMyWorkOnly={appState.showMyWorkOnly}
|
||||
theme={appState.theme}
|
||||
onProductionTypeChange={handleProductionTypeChange}
|
||||
onEquipmentClick={() => openModal("equipment")}
|
||||
onProcessClick={() => openModal("process")}
|
||||
onMyWorkToggle={handleMyWorkToggle}
|
||||
onSearchClick={() => {
|
||||
/* 조회 */
|
||||
}}
|
||||
onSettingsClick={() => openModal("settings")}
|
||||
onThemeToggle={handleThemeToggle}
|
||||
/>
|
||||
|
||||
{/* 상태 탭 */}
|
||||
<PopStatusTabs
|
||||
currentStatus={appState.currentStatus}
|
||||
counts={statusCounts}
|
||||
onStatusChange={handleStatusChange}
|
||||
/>
|
||||
|
||||
{/* 메인 콘텐츠 */}
|
||||
<div className="pop-main-content">
|
||||
{filteredWorkOrders.length === 0 ? (
|
||||
<div className="pop-empty-state">
|
||||
<div className="pop-empty-state-text">작업이 없습니다</div>
|
||||
<div className="pop-empty-state-desc">
|
||||
{appState.currentStatus === "waiting" && "대기 중인 작업이 없습니다"}
|
||||
{appState.currentStatus === "pending-accept" && "접수 대기 작업이 없습니다"}
|
||||
{appState.currentStatus === "in-progress" && "진행 중인 작업이 없습니다"}
|
||||
{appState.currentStatus === "completed" && "완료된 작업이 없습니다"}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="pop-work-list">
|
||||
{filteredWorkOrders.map((workOrder) => (
|
||||
<PopWorkCard
|
||||
key={workOrder.id}
|
||||
workOrder={workOrder}
|
||||
currentStatus={appState.currentStatus}
|
||||
selectedProcess={appState.selectedProcess}
|
||||
onAccept={() => handleOpenAcceptModal(workOrder)}
|
||||
onCancelAccept={() => handleCancelAccept(workOrder.id)}
|
||||
onStartProduction={() => handleOpenProductionPanel(workOrder)}
|
||||
onClick={() => handleOpenProductionPanel(workOrder)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 하단 네비게이션 */}
|
||||
<PopBottomNav />
|
||||
</div>
|
||||
|
||||
{/* 모달들 */}
|
||||
<PopEquipmentModal
|
||||
isOpen={modalState.equipment}
|
||||
equipments={EQUIPMENTS}
|
||||
selectedEquipment={appState.selectedEquipment}
|
||||
onSelect={handleEquipmentSelect}
|
||||
onClose={() => closeModal("equipment")}
|
||||
/>
|
||||
|
||||
<PopProcessModal
|
||||
isOpen={modalState.process}
|
||||
selectedEquipment={appState.selectedEquipment}
|
||||
selectedProcess={appState.selectedProcess}
|
||||
processes={PROCESSES}
|
||||
onSelect={handleProcessSelect}
|
||||
onClose={() => closeModal("process")}
|
||||
/>
|
||||
|
||||
<PopAcceptModal
|
||||
isOpen={modalState.accept}
|
||||
workOrder={appState.acceptTargetWorkOrder}
|
||||
quantity={appState.acceptQuantity}
|
||||
onQuantityChange={(qty) => setAppState((prev) => ({ ...prev, acceptQuantity: qty }))}
|
||||
onConfirm={handleConfirmAccept}
|
||||
onClose={() => closeModal("accept")}
|
||||
/>
|
||||
|
||||
<PopSettingsModal
|
||||
isOpen={modalState.settings}
|
||||
selectionMode={appState.selectionMode}
|
||||
completionAction={appState.completionAction}
|
||||
onSave={handleSaveSettings}
|
||||
onClose={() => closeModal("settings")}
|
||||
/>
|
||||
|
||||
{/* 생산진행 패널 */}
|
||||
<PopProductionPanel
|
||||
isOpen={panelState.production}
|
||||
workOrder={appState.selectedWorkOrder}
|
||||
workSteps={appState.currentWorkSteps}
|
||||
currentStepIndex={appState.currentStepIndex}
|
||||
currentDateTime={currentDateTime || new Date()}
|
||||
onStepChange={(index) => setAppState((prev) => ({ ...prev, currentStepIndex: index }))}
|
||||
onStepsUpdate={(steps) => setAppState((prev) => ({ ...prev, currentWorkSteps: steps }))}
|
||||
onClose={handleCloseProductionPanel}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Clock, ClipboardList } from "lucide-react";
|
||||
|
||||
export function PopBottomNav() {
|
||||
const handleHistoryClick = () => {
|
||||
console.log("작업이력 클릭");
|
||||
// TODO: 작업이력 페이지 이동 또는 모달 열기
|
||||
};
|
||||
|
||||
const handleRegisterClick = () => {
|
||||
console.log("실적등록 클릭");
|
||||
// TODO: 실적등록 모달 열기
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pop-bottom-nav">
|
||||
<button className="pop-nav-btn secondary" onClick={handleHistoryClick}>
|
||||
<Clock size={18} />
|
||||
작업이력
|
||||
</button>
|
||||
<button className="pop-nav-btn primary" onClick={handleRegisterClick}>
|
||||
<ClipboardList size={18} />
|
||||
실적등록
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { Equipment } from "./types";
|
||||
|
||||
interface PopEquipmentModalProps {
|
||||
isOpen: boolean;
|
||||
equipments: Equipment[];
|
||||
selectedEquipment: Equipment | null;
|
||||
onSelect: (equipment: Equipment) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function PopEquipmentModal({
|
||||
isOpen,
|
||||
equipments,
|
||||
selectedEquipment,
|
||||
onSelect,
|
||||
onClose,
|
||||
}: PopEquipmentModalProps) {
|
||||
const [tempSelected, setTempSelected] = React.useState<Equipment | null>(selectedEquipment);
|
||||
|
||||
React.useEffect(() => {
|
||||
setTempSelected(selectedEquipment);
|
||||
}, [selectedEquipment, isOpen]);
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (tempSelected) {
|
||||
onSelect(tempSelected);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
||||
<div className="pop-modal">
|
||||
<div className="pop-modal-header">
|
||||
<h2 className="pop-modal-title">설비 선택</h2>
|
||||
<button className="pop-modal-close" onClick={onClose}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pop-modal-body">
|
||||
<div className="pop-selection-grid">
|
||||
{equipments.map((equip) => (
|
||||
<div
|
||||
key={equip.id}
|
||||
className={`pop-selection-card ${tempSelected?.id === equip.id ? "selected" : ""}`}
|
||||
onClick={() => setTempSelected(equip)}
|
||||
>
|
||||
<div className="pop-selection-card-check">✓</div>
|
||||
<div className="pop-selection-card-name">{equip.name}</div>
|
||||
<div className="pop-selection-card-info">{equip.processNames.join(", ")}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pop-modal-footer">
|
||||
<button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
className="pop-btn pop-btn-primary"
|
||||
style={{ flex: 1 }}
|
||||
onClick={handleConfirm}
|
||||
disabled={!tempSelected}
|
||||
>
|
||||
확인
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { Equipment, Process, ProductionType } from "./types";
|
||||
|
||||
interface PopHeaderProps {
|
||||
currentDateTime: Date;
|
||||
productionType: ProductionType;
|
||||
selectedEquipment: Equipment | null;
|
||||
selectedProcess: Process | null;
|
||||
showMyWorkOnly: boolean;
|
||||
theme: "dark" | "light";
|
||||
onProductionTypeChange: (type: ProductionType) => void;
|
||||
onEquipmentClick: () => void;
|
||||
onProcessClick: () => void;
|
||||
onMyWorkToggle: () => void;
|
||||
onSearchClick: () => void;
|
||||
onSettingsClick: () => void;
|
||||
onThemeToggle: () => void;
|
||||
}
|
||||
|
||||
export function PopHeader({
|
||||
currentDateTime,
|
||||
productionType,
|
||||
selectedEquipment,
|
||||
selectedProcess,
|
||||
showMyWorkOnly,
|
||||
theme,
|
||||
onProductionTypeChange,
|
||||
onEquipmentClick,
|
||||
onProcessClick,
|
||||
onMyWorkToggle,
|
||||
onSearchClick,
|
||||
onSettingsClick,
|
||||
onThemeToggle,
|
||||
}: PopHeaderProps) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
return `${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pop-header-container">
|
||||
{/* 1행: 날짜/시간 + 테마 토글 + 작업지시/원자재 */}
|
||||
<div className="pop-top-bar row-1">
|
||||
<div className="pop-datetime">
|
||||
<span className="pop-date">{mounted ? formatDate(currentDateTime) : "----.--.--"}</span>
|
||||
<span className="pop-time">{mounted ? formatTime(currentDateTime) : "--:--"}</span>
|
||||
</div>
|
||||
|
||||
{/* 테마 토글 버튼 */}
|
||||
<button className="pop-theme-toggle-inline" onClick={onThemeToggle} title="테마 변경">
|
||||
{theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</button>
|
||||
|
||||
<div className="pop-spacer" />
|
||||
|
||||
<div className="pop-type-buttons">
|
||||
<button
|
||||
className={`pop-type-btn ${productionType === "work-order" ? "active" : ""}`}
|
||||
onClick={() => onProductionTypeChange("work-order")}
|
||||
>
|
||||
작업지시
|
||||
</button>
|
||||
<button
|
||||
className={`pop-type-btn ${productionType === "material" ? "active" : ""}`}
|
||||
onClick={() => onProductionTypeChange("material")}
|
||||
>
|
||||
원자재
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2행: 필터 버튼들 */}
|
||||
<div className="pop-top-bar row-2">
|
||||
<button
|
||||
className={`pop-filter-btn ${selectedEquipment ? "active" : ""}`}
|
||||
onClick={onEquipmentClick}
|
||||
>
|
||||
<span>{selectedEquipment?.name || "설비"}</span>
|
||||
</button>
|
||||
<button
|
||||
className={`pop-filter-btn ${selectedProcess ? "active" : ""}`}
|
||||
onClick={onProcessClick}
|
||||
disabled={!selectedEquipment}
|
||||
>
|
||||
<span>{selectedProcess?.name || "공정"}</span>
|
||||
</button>
|
||||
<button
|
||||
className={`pop-filter-btn ${showMyWorkOnly ? "active" : ""}`}
|
||||
onClick={onMyWorkToggle}
|
||||
>
|
||||
내 작업
|
||||
</button>
|
||||
|
||||
<div className="pop-spacer" />
|
||||
|
||||
<button className="pop-filter-btn primary" onClick={onSearchClick}>
|
||||
조회
|
||||
</button>
|
||||
<button className="pop-filter-btn" onClick={onSettingsClick}>
|
||||
설정
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { Equipment, Process } from "./types";
|
||||
|
||||
interface PopProcessModalProps {
|
||||
isOpen: boolean;
|
||||
selectedEquipment: Equipment | null;
|
||||
selectedProcess: Process | null;
|
||||
processes: Process[];
|
||||
onSelect: (process: Process) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function PopProcessModal({
|
||||
isOpen,
|
||||
selectedEquipment,
|
||||
selectedProcess,
|
||||
processes,
|
||||
onSelect,
|
||||
onClose,
|
||||
}: PopProcessModalProps) {
|
||||
const [tempSelected, setTempSelected] = React.useState<Process | null>(selectedProcess);
|
||||
|
||||
React.useEffect(() => {
|
||||
setTempSelected(selectedProcess);
|
||||
}, [selectedProcess, isOpen]);
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (tempSelected) {
|
||||
onSelect(tempSelected);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen || !selectedEquipment) return null;
|
||||
|
||||
// 선택된 설비의 공정만 필터링
|
||||
const availableProcesses = selectedEquipment.processIds.map((processId, index) => {
|
||||
const process = processes.find((p) => p.id === processId);
|
||||
return {
|
||||
id: processId,
|
||||
name: selectedEquipment.processNames[index],
|
||||
code: process?.code || "",
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
||||
<div className="pop-modal">
|
||||
<div className="pop-modal-header">
|
||||
<h2 className="pop-modal-title">공정 선택</h2>
|
||||
<button className="pop-modal-close" onClick={onClose}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pop-modal-body">
|
||||
<div className="pop-selection-grid">
|
||||
{availableProcesses.map((process) => (
|
||||
<div
|
||||
key={process.id}
|
||||
className={`pop-selection-card ${tempSelected?.id === process.id ? "selected" : ""}`}
|
||||
onClick={() => setTempSelected(process as Process)}
|
||||
>
|
||||
<div className="pop-selection-card-check">✓</div>
|
||||
<div className="pop-selection-card-name">{process.name}</div>
|
||||
<div className="pop-selection-card-info">{process.code}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pop-modal-footer">
|
||||
<button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
className="pop-btn pop-btn-primary"
|
||||
style={{ flex: 1 }}
|
||||
onClick={handleConfirm}
|
||||
disabled={!tempSelected}
|
||||
>
|
||||
확인
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,346 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { X, Play, Square, ChevronRight } from "lucide-react";
|
||||
import { WorkOrder, WorkStep } from "./types";
|
||||
|
||||
interface PopProductionPanelProps {
|
||||
isOpen: boolean;
|
||||
workOrder: WorkOrder | null;
|
||||
workSteps: WorkStep[];
|
||||
currentStepIndex: number;
|
||||
currentDateTime: Date;
|
||||
onStepChange: (index: number) => void;
|
||||
onStepsUpdate: (steps: WorkStep[]) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function PopProductionPanel({
|
||||
isOpen,
|
||||
workOrder,
|
||||
workSteps,
|
||||
currentStepIndex,
|
||||
currentDateTime,
|
||||
onStepChange,
|
||||
onStepsUpdate,
|
||||
onClose,
|
||||
}: PopProductionPanelProps) {
|
||||
if (!isOpen || !workOrder) return null;
|
||||
|
||||
const currentStep = workSteps[currentStepIndex];
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const formatTime = (date: Date | null) => {
|
||||
if (!date) return "--:--";
|
||||
const d = new Date(date);
|
||||
return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
const handleStartStep = () => {
|
||||
const newSteps = [...workSteps];
|
||||
newSteps[currentStepIndex] = {
|
||||
...newSteps[currentStepIndex],
|
||||
status: "in-progress",
|
||||
startTime: new Date(),
|
||||
};
|
||||
onStepsUpdate(newSteps);
|
||||
};
|
||||
|
||||
const handleEndStep = () => {
|
||||
const newSteps = [...workSteps];
|
||||
newSteps[currentStepIndex] = {
|
||||
...newSteps[currentStepIndex],
|
||||
endTime: new Date(),
|
||||
};
|
||||
onStepsUpdate(newSteps);
|
||||
};
|
||||
|
||||
const handleSaveAndNext = () => {
|
||||
const newSteps = [...workSteps];
|
||||
const step = newSteps[currentStepIndex];
|
||||
|
||||
// 시간 자동 설정
|
||||
if (!step.startTime) step.startTime = new Date();
|
||||
if (!step.endTime) step.endTime = new Date();
|
||||
step.status = "completed";
|
||||
|
||||
onStepsUpdate(newSteps);
|
||||
|
||||
// 다음 단계로 이동
|
||||
if (currentStepIndex < workSteps.length - 1) {
|
||||
onStepChange(currentStepIndex + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const renderStepForm = () => {
|
||||
if (!currentStep) return null;
|
||||
|
||||
const isCompleted = currentStep.status === "completed";
|
||||
|
||||
if (currentStep.type === "work" || currentStep.type === "record") {
|
||||
return (
|
||||
<div className="pop-step-form-section">
|
||||
<h4 className="pop-step-form-title">작업 내용 입력</h4>
|
||||
<div className="pop-form-row">
|
||||
<div className="pop-form-group">
|
||||
<label className="pop-form-label">생산수량</label>
|
||||
<input
|
||||
type="number"
|
||||
className="pop-input"
|
||||
placeholder="0"
|
||||
disabled={isCompleted}
|
||||
/>
|
||||
</div>
|
||||
<div className="pop-form-group">
|
||||
<label className="pop-form-label">불량수량</label>
|
||||
<input
|
||||
type="number"
|
||||
className="pop-input"
|
||||
placeholder="0"
|
||||
disabled={isCompleted}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-form-group">
|
||||
<label className="pop-form-label">비고</label>
|
||||
<textarea
|
||||
className="pop-input"
|
||||
rows={2}
|
||||
placeholder="특이사항을 입력하세요"
|
||||
disabled={isCompleted}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentStep.type === "equipment-check" || currentStep.type === "inspection") {
|
||||
return (
|
||||
<div className="pop-step-form-section">
|
||||
<h4 className="pop-step-form-title">점검 항목</h4>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "var(--spacing-sm)" }}>
|
||||
<label style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)" }}>
|
||||
<input type="checkbox" disabled={isCompleted} />
|
||||
<span>장비 상태 확인</span>
|
||||
</label>
|
||||
<label style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)" }}>
|
||||
<input type="checkbox" disabled={isCompleted} />
|
||||
<span>안전 장비 착용</span>
|
||||
</label>
|
||||
<label style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)" }}>
|
||||
<input type="checkbox" disabled={isCompleted} />
|
||||
<span>작업 환경 확인</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="pop-form-group" style={{ marginTop: "var(--spacing-md)" }}>
|
||||
<label className="pop-form-label">비고</label>
|
||||
<textarea
|
||||
className="pop-input"
|
||||
rows={2}
|
||||
placeholder="점검 결과를 입력하세요"
|
||||
disabled={isCompleted}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pop-step-form-section">
|
||||
<h4 className="pop-step-form-title">작업 메모</h4>
|
||||
<div className="pop-form-group">
|
||||
<textarea
|
||||
className="pop-input"
|
||||
rows={3}
|
||||
placeholder="메모를 입력하세요"
|
||||
disabled={isCompleted}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pop-slide-panel active">
|
||||
<div className="pop-slide-panel-overlay" onClick={onClose} />
|
||||
<div className="pop-slide-panel-content">
|
||||
{/* 헤더 */}
|
||||
<div className="pop-slide-panel-header">
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "var(--spacing-md)" }}>
|
||||
<h2 className="pop-slide-panel-title">생산진행</h2>
|
||||
<span className="pop-badge pop-badge-primary">{workOrder.processName}</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "var(--spacing-md)" }}>
|
||||
<div style={{ fontSize: "var(--text-xs)", color: "rgb(var(--text-muted))" }}>
|
||||
<span>{formatDate(currentDateTime)}</span>
|
||||
<span style={{ marginLeft: "var(--spacing-sm)", color: "rgb(var(--neon-cyan))", fontWeight: 700 }}>
|
||||
{formatTime(currentDateTime)}
|
||||
</span>
|
||||
</div>
|
||||
<button className="pop-icon-btn" onClick={onClose}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 작업지시 정보 */}
|
||||
<div className="pop-work-order-info-section">
|
||||
<div className="pop-work-order-info-card">
|
||||
<div className="pop-work-order-info-item">
|
||||
<span className="label">작업지시</span>
|
||||
<span className="value primary">{workOrder.id}</span>
|
||||
</div>
|
||||
<div className="pop-work-order-info-item">
|
||||
<span className="label">품목</span>
|
||||
<span className="value">{workOrder.itemName}</span>
|
||||
</div>
|
||||
<div className="pop-work-order-info-item">
|
||||
<span className="label">규격</span>
|
||||
<span className="value">{workOrder.spec}</span>
|
||||
</div>
|
||||
<div className="pop-work-order-info-item">
|
||||
<span className="label">지시수량</span>
|
||||
<span className="value">{workOrder.orderQuantity} EA</span>
|
||||
</div>
|
||||
<div className="pop-work-order-info-item">
|
||||
<span className="label">생산수량</span>
|
||||
<span className="value">{workOrder.producedQuantity} EA</span>
|
||||
</div>
|
||||
<div className="pop-work-order-info-item">
|
||||
<span className="label">납기일</span>
|
||||
<span className="value">{workOrder.dueDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 바디 */}
|
||||
<div className="pop-slide-panel-body">
|
||||
<div className="pop-panel-body-content">
|
||||
{/* 작업순서 사이드바 */}
|
||||
<div className="pop-work-steps-sidebar">
|
||||
<div className="pop-work-steps-header">작업순서</div>
|
||||
<div className="pop-work-steps-list">
|
||||
{workSteps.map((step, index) => (
|
||||
<div
|
||||
key={step.id}
|
||||
className={`pop-work-step-item ${index === currentStepIndex ? "active" : ""} ${step.status}`}
|
||||
onClick={() => onStepChange(index)}
|
||||
>
|
||||
<div className="pop-work-step-number">{index + 1}</div>
|
||||
<div className="pop-work-step-info">
|
||||
<div className="pop-work-step-name">{step.name}</div>
|
||||
<div className="pop-work-step-time">
|
||||
{formatTime(step.startTime)} ~ {formatTime(step.endTime)}
|
||||
</div>
|
||||
</div>
|
||||
<span className={`pop-work-step-status ${step.status}`}>
|
||||
{step.status === "completed" ? "완료" : step.status === "in-progress" ? "진행중" : "대기"}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 작업 콘텐츠 영역 */}
|
||||
<div className="pop-work-content-area">
|
||||
{currentStep && (
|
||||
<>
|
||||
{/* 스텝 헤더 */}
|
||||
<div className="pop-step-header">
|
||||
<h3 className="pop-step-title">{currentStep.name}</h3>
|
||||
<p className="pop-step-description">{currentStep.description}</p>
|
||||
</div>
|
||||
|
||||
{/* 시간 컨트롤 */}
|
||||
{currentStep.status !== "completed" && (
|
||||
<div className="pop-step-time-controls">
|
||||
<button
|
||||
className="pop-time-control-btn start"
|
||||
onClick={handleStartStep}
|
||||
disabled={!!currentStep.startTime}
|
||||
>
|
||||
<Play size={16} />
|
||||
시작 {currentStep.startTime ? formatTime(currentStep.startTime) : ""}
|
||||
</button>
|
||||
<button
|
||||
className="pop-time-control-btn end"
|
||||
onClick={handleEndStep}
|
||||
disabled={!currentStep.startTime || !!currentStep.endTime}
|
||||
>
|
||||
<Square size={16} />
|
||||
종료 {currentStep.endTime ? formatTime(currentStep.endTime) : ""}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 폼 */}
|
||||
{renderStepForm()}
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
{currentStep.status !== "completed" && (
|
||||
<div style={{ marginTop: "auto", display: "flex", gap: "var(--spacing-md)" }}>
|
||||
<button
|
||||
className="pop-btn pop-btn-outline"
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => onStepChange(Math.max(0, currentStepIndex - 1))}
|
||||
disabled={currentStepIndex === 0}
|
||||
>
|
||||
이전
|
||||
</button>
|
||||
<button
|
||||
className="pop-btn pop-btn-primary"
|
||||
style={{ flex: 1 }}
|
||||
onClick={handleSaveAndNext}
|
||||
>
|
||||
{currentStepIndex === workSteps.length - 1 ? "완료" : "저장 후 다음"}
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 완료 메시지 */}
|
||||
{currentStep.status === "completed" && (
|
||||
<div
|
||||
style={{
|
||||
padding: "var(--spacing-md)",
|
||||
background: "rgba(0, 255, 136, 0.1)",
|
||||
border: "1px solid rgba(0, 255, 136, 0.3)",
|
||||
borderRadius: "var(--radius-md)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "var(--spacing-sm)",
|
||||
color: "rgb(var(--success))",
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
<span style={{ fontWeight: 600 }}>작업이 완료되었습니다</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 푸터 */}
|
||||
<div className="pop-slide-panel-footer">
|
||||
<button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
|
||||
닫기
|
||||
</button>
|
||||
<button className="pop-btn pop-btn-primary" style={{ flex: 1 }}>
|
||||
작업 완료
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
interface PopSettingsModalProps {
|
||||
isOpen: boolean;
|
||||
selectionMode: "single" | "multi";
|
||||
completionAction: "close" | "stay";
|
||||
onSave: (selectionMode: "single" | "multi", completionAction: "close" | "stay") => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function PopSettingsModal({
|
||||
isOpen,
|
||||
selectionMode,
|
||||
completionAction,
|
||||
onSave,
|
||||
onClose,
|
||||
}: PopSettingsModalProps) {
|
||||
const [tempSelectionMode, setTempSelectionMode] = useState(selectionMode);
|
||||
const [tempCompletionAction, setTempCompletionAction] = useState(completionAction);
|
||||
|
||||
useEffect(() => {
|
||||
setTempSelectionMode(selectionMode);
|
||||
setTempCompletionAction(completionAction);
|
||||
}, [selectionMode, completionAction, isOpen]);
|
||||
|
||||
const handleSave = () => {
|
||||
onSave(tempSelectionMode, tempCompletionAction);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
||||
<div className="pop-modal">
|
||||
<div className="pop-modal-header">
|
||||
<h2 className="pop-modal-title">설정</h2>
|
||||
<button className="pop-modal-close" onClick={onClose}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pop-modal-body">
|
||||
{/* 선택 모드 */}
|
||||
<div className="pop-settings-section">
|
||||
<h3 className="pop-settings-title">설비/공정 선택 모드</h3>
|
||||
<div className="pop-mode-options">
|
||||
<label className="pop-mode-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="selectionMode"
|
||||
value="single"
|
||||
checked={tempSelectionMode === "single"}
|
||||
onChange={() => setTempSelectionMode("single")}
|
||||
/>
|
||||
<div className="pop-mode-info">
|
||||
<div className="pop-mode-name">단일 선택 모드</div>
|
||||
<div className="pop-mode-desc">
|
||||
설비와 공정을 선택하여 해당 작업만 표시합니다.
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label className="pop-mode-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="selectionMode"
|
||||
value="multi"
|
||||
checked={tempSelectionMode === "multi"}
|
||||
onChange={() => setTempSelectionMode("multi")}
|
||||
/>
|
||||
<div className="pop-mode-info">
|
||||
<div className="pop-mode-name">다중 선택 모드</div>
|
||||
<div className="pop-mode-desc">
|
||||
모든 설비/공정의 작업을 표시합니다.
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pop-settings-divider" />
|
||||
|
||||
{/* 완료 후 동작 */}
|
||||
<div className="pop-settings-section">
|
||||
<h3 className="pop-settings-title">작업 완료 후 동작</h3>
|
||||
<div className="pop-mode-options">
|
||||
<label className="pop-mode-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="completionAction"
|
||||
value="close"
|
||||
checked={tempCompletionAction === "close"}
|
||||
onChange={() => setTempCompletionAction("close")}
|
||||
/>
|
||||
<div className="pop-mode-info">
|
||||
<div className="pop-mode-name">패널 닫기</div>
|
||||
<div className="pop-mode-desc">
|
||||
작업 완료 시 생산진행 패널을 자동으로 닫습니다.
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label className="pop-mode-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="completionAction"
|
||||
value="stay"
|
||||
checked={tempCompletionAction === "stay"}
|
||||
onChange={() => setTempCompletionAction("stay")}
|
||||
/>
|
||||
<div className="pop-mode-info">
|
||||
<div className="pop-mode-name">패널 유지</div>
|
||||
<div className="pop-mode-desc">
|
||||
작업 완료 후에도 패널을 유지합니다.
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pop-modal-footer">
|
||||
<button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
|
||||
취소
|
||||
</button>
|
||||
<button className="pop-btn pop-btn-primary" style={{ flex: 1 }} onClick={handleSave}>
|
||||
저장
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { StatusType } from "./types";
|
||||
|
||||
interface StatusCounts {
|
||||
waitingCount: number;
|
||||
pendingAcceptCount: number;
|
||||
inProgressCount: number;
|
||||
completedCount: number;
|
||||
}
|
||||
|
||||
interface PopStatusTabsProps {
|
||||
currentStatus: StatusType;
|
||||
counts: StatusCounts;
|
||||
onStatusChange: (status: StatusType) => void;
|
||||
}
|
||||
|
||||
const STATUS_CONFIG: {
|
||||
id: StatusType;
|
||||
label: string;
|
||||
detail: string;
|
||||
countKey: keyof StatusCounts;
|
||||
}[] = [
|
||||
{ id: "waiting", label: "대기", detail: "내 공정 이전", countKey: "waitingCount" },
|
||||
{ id: "pending-accept", label: "접수대기", detail: "내 차례", countKey: "pendingAcceptCount" },
|
||||
{ id: "in-progress", label: "진행", detail: "작업중", countKey: "inProgressCount" },
|
||||
{ id: "completed", label: "완료", detail: "처리완료", countKey: "completedCount" },
|
||||
];
|
||||
|
||||
export function PopStatusTabs({ currentStatus, counts, onStatusChange }: PopStatusTabsProps) {
|
||||
return (
|
||||
<div className="pop-status-tabs">
|
||||
{STATUS_CONFIG.map((status) => (
|
||||
<div
|
||||
key={status.id}
|
||||
className={`pop-status-tab ${currentStatus === status.id ? "active" : ""}`}
|
||||
onClick={() => onStatusChange(status.id)}
|
||||
>
|
||||
<span className="pop-status-tab-label">{status.label}</span>
|
||||
<span className="pop-status-tab-count">{counts[status.countKey]}</span>
|
||||
<span className="pop-status-tab-detail">{status.detail}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
"use client";
|
||||
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
import { WorkOrder, Process, StatusType } from "./types";
|
||||
import { STATUS_TEXT } from "./data";
|
||||
|
||||
interface PopWorkCardProps {
|
||||
workOrder: WorkOrder;
|
||||
currentStatus: StatusType;
|
||||
selectedProcess: Process | null;
|
||||
onAccept: () => void;
|
||||
onCancelAccept: () => void;
|
||||
onStartProduction: () => void;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export function PopWorkCard({
|
||||
workOrder,
|
||||
currentStatus,
|
||||
selectedProcess,
|
||||
onAccept,
|
||||
onCancelAccept,
|
||||
onStartProduction,
|
||||
onClick,
|
||||
}: PopWorkCardProps) {
|
||||
const chipsRef = useRef<HTMLDivElement>(null);
|
||||
const [showLeftBtn, setShowLeftBtn] = useState(false);
|
||||
const [showRightBtn, setShowRightBtn] = useState(false);
|
||||
|
||||
const progress = ((workOrder.producedQuantity / workOrder.orderQuantity) * 100).toFixed(1);
|
||||
const isReturnWork = workOrder.isReturn === true;
|
||||
|
||||
// 공정 스크롤 버튼 표시 여부 확인
|
||||
const checkScrollButtons = () => {
|
||||
const container = chipsRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const isScrollable = container.scrollWidth > container.clientWidth;
|
||||
if (isScrollable) {
|
||||
const scrollLeft = container.scrollLeft;
|
||||
const maxScroll = container.scrollWidth - container.clientWidth;
|
||||
setShowLeftBtn(scrollLeft > 5);
|
||||
setShowRightBtn(scrollLeft < maxScroll - 5);
|
||||
} else {
|
||||
setShowLeftBtn(false);
|
||||
setShowRightBtn(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 현재 공정으로 스크롤
|
||||
const scrollToCurrentProcess = () => {
|
||||
const container = chipsRef.current;
|
||||
if (!container || !workOrder.processFlow) return;
|
||||
|
||||
let targetIndex = -1;
|
||||
|
||||
// 내 공정 우선
|
||||
if (selectedProcess) {
|
||||
targetIndex = workOrder.processFlow.findIndex(
|
||||
(step) =>
|
||||
step.id === selectedProcess.id &&
|
||||
(step.status === "current" || step.status === "pending")
|
||||
);
|
||||
}
|
||||
|
||||
// 없으면 현재 진행 중인 공정
|
||||
if (targetIndex === -1) {
|
||||
targetIndex = workOrder.processFlow.findIndex((step) => step.status === "current");
|
||||
}
|
||||
|
||||
if (targetIndex === -1) return;
|
||||
|
||||
const chips = container.querySelectorAll(".pop-process-chip");
|
||||
if (chips.length > targetIndex) {
|
||||
const targetChip = chips[targetIndex] as HTMLElement;
|
||||
const scrollPos =
|
||||
targetChip.offsetLeft - container.clientWidth / 2 + targetChip.offsetWidth / 2;
|
||||
container.scrollLeft = Math.max(0, scrollPos);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollToCurrentProcess();
|
||||
checkScrollButtons();
|
||||
|
||||
const container = chipsRef.current;
|
||||
if (container) {
|
||||
container.addEventListener("scroll", checkScrollButtons);
|
||||
return () => container.removeEventListener("scroll", checkScrollButtons);
|
||||
}
|
||||
}, [workOrder, selectedProcess]);
|
||||
|
||||
const handleScroll = (direction: "left" | "right", e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
const container = chipsRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const scrollAmount = 150;
|
||||
container.scrollLeft += direction === "left" ? -scrollAmount : scrollAmount;
|
||||
setTimeout(checkScrollButtons, 100);
|
||||
};
|
||||
|
||||
// 상태 텍스트 결정
|
||||
const statusText =
|
||||
isReturnWork && currentStatus === "pending-accept" ? "리턴" : STATUS_TEXT[workOrder.status];
|
||||
const statusClass = isReturnWork ? "return" : workOrder.status;
|
||||
|
||||
// 완료된 공정 수
|
||||
const completedCount = workOrder.processFlow.filter((s) => s.status === "completed").length;
|
||||
const totalCount = workOrder.processFlow.length;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`pop-work-card ${isReturnWork ? "return-card" : ""}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="pop-work-card-header">
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)", flex: 1, flexWrap: "wrap" }}>
|
||||
<span className="pop-work-number">{workOrder.id}</span>
|
||||
{isReturnWork && <span className="pop-return-badge">리턴</span>}
|
||||
{workOrder.acceptedQuantity && workOrder.acceptedQuantity > 0 && workOrder.acceptedQuantity < workOrder.orderQuantity && (
|
||||
<span className="pop-partial-badge">
|
||||
{workOrder.acceptedQuantity}/{workOrder.orderQuantity} 접수
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={`pop-work-status ${statusClass}`}>{statusText}</span>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
{currentStatus === "pending-accept" && (
|
||||
<div className="pop-work-card-actions">
|
||||
<button
|
||||
className="pop-btn pop-btn-sm pop-btn-primary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onAccept();
|
||||
}}
|
||||
>
|
||||
접수
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{currentStatus === "in-progress" && (
|
||||
<div className="pop-work-card-actions">
|
||||
<button
|
||||
className="pop-btn pop-btn-sm pop-btn-ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCancelAccept();
|
||||
}}
|
||||
>
|
||||
접수취소
|
||||
</button>
|
||||
<button
|
||||
className="pop-btn pop-btn-sm pop-btn-success"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onStartProduction();
|
||||
}}
|
||||
>
|
||||
생산진행
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 리턴 정보 배너 */}
|
||||
{isReturnWork && currentStatus === "pending-accept" && (
|
||||
<div className="pop-return-banner">
|
||||
<span className="pop-return-banner-icon">🔄</span>
|
||||
<div>
|
||||
<div className="pop-return-banner-title">
|
||||
{workOrder.returnFromProcessName} 공정에서 리턴됨
|
||||
</div>
|
||||
<div className="pop-return-banner-reason">{workOrder.returnReason || "사유 없음"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 바디 */}
|
||||
<div className="pop-work-card-body">
|
||||
<div className="pop-work-info-line">
|
||||
<div className="pop-work-info-item">
|
||||
<span className="pop-work-info-label">품목</span>
|
||||
<span className="pop-work-info-value">{workOrder.itemName}</span>
|
||||
</div>
|
||||
<div className="pop-work-info-item">
|
||||
<span className="pop-work-info-label">규격</span>
|
||||
<span className="pop-work-info-value">{workOrder.spec}</span>
|
||||
</div>
|
||||
<div className="pop-work-info-item">
|
||||
<span className="pop-work-info-label">지시</span>
|
||||
<span className="pop-work-info-value">{workOrder.orderQuantity}</span>
|
||||
</div>
|
||||
<div className="pop-work-info-item">
|
||||
<span className="pop-work-info-label">납기</span>
|
||||
<span className="pop-work-info-value">{workOrder.dueDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 공정 타임라인 */}
|
||||
<div className="pop-process-timeline">
|
||||
<div className="pop-process-bar">
|
||||
<div className="pop-process-bar-header">
|
||||
<span className="pop-process-bar-label">공정 진행</span>
|
||||
<span className="pop-process-bar-count">
|
||||
<span>{completedCount}</span>/{totalCount}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pop-process-segments">
|
||||
{workOrder.processFlow.map((step, index) => {
|
||||
let segmentClass = "";
|
||||
if (step.status === "completed") segmentClass = "done";
|
||||
else if (step.status === "current") segmentClass = "current";
|
||||
if (selectedProcess && step.id === selectedProcess.id) {
|
||||
segmentClass += " my-work";
|
||||
}
|
||||
return <div key={index} className={`pop-process-segment ${segmentClass}`} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pop-process-chips-container">
|
||||
<button
|
||||
className={`pop-process-scroll-btn left ${!showLeftBtn ? "hidden" : ""}`}
|
||||
onClick={(e) => handleScroll("left", e)}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<div className="pop-process-chips" ref={chipsRef}>
|
||||
{workOrder.processFlow.map((step, index) => {
|
||||
let chipClass = "";
|
||||
if (step.status === "completed") chipClass = "done";
|
||||
else if (step.status === "current") chipClass = "current";
|
||||
if (selectedProcess && step.id === selectedProcess.id) {
|
||||
chipClass += " my-work";
|
||||
}
|
||||
return (
|
||||
<div key={index} className={`pop-process-chip ${chipClass}`}>
|
||||
<span className="pop-chip-num">{index + 1}</span>
|
||||
{step.name}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
className={`pop-process-scroll-btn right ${!showRightBtn ? "hidden" : ""}`}
|
||||
onClick={(e) => handleScroll("right", e)}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 진행률 바 */}
|
||||
{workOrder.status !== "completed" && (
|
||||
<div className="pop-work-progress">
|
||||
<div className="pop-progress-info">
|
||||
<span className="pop-progress-text">
|
||||
{workOrder.producedQuantity} / {workOrder.orderQuantity} EA
|
||||
</span>
|
||||
<span className="pop-progress-percent">{progress}%</span>
|
||||
</div>
|
||||
<div className="pop-progress-bar">
|
||||
<div className="pop-progress-fill" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ActivityItem } from "./types";
|
||||
|
||||
interface ActivityListProps {
|
||||
items: ActivityItem[];
|
||||
onMoreClick: () => void;
|
||||
}
|
||||
|
||||
export function ActivityList({ items, onMoreClick }: ActivityListProps) {
|
||||
return (
|
||||
<div className="pop-dashboard-card">
|
||||
<div className="pop-dashboard-card-header">
|
||||
<h3 className="pop-dashboard-card-title">최근 활동</h3>
|
||||
<button className="pop-dashboard-btn-more" onClick={onMoreClick}>
|
||||
전체보기
|
||||
</button>
|
||||
</div>
|
||||
<div className="pop-dashboard-activity-list">
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className="pop-dashboard-activity-item">
|
||||
<span className="pop-dashboard-activity-time">{item.time}</span>
|
||||
<span className={`pop-dashboard-activity-dot ${item.category}`} />
|
||||
<div className="pop-dashboard-activity-content">
|
||||
<div className="pop-dashboard-activity-title">{item.title}</div>
|
||||
<div className="pop-dashboard-activity-desc">{item.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
|
||||
interface DashboardFooterProps {
|
||||
companyName: string;
|
||||
version: string;
|
||||
emergencyContact: string;
|
||||
}
|
||||
|
||||
export function DashboardFooter({
|
||||
companyName,
|
||||
version,
|
||||
emergencyContact,
|
||||
}: DashboardFooterProps) {
|
||||
return (
|
||||
<footer className="pop-dashboard-footer">
|
||||
<span>© 2024 {companyName}</span>
|
||||
<span>Version {version}</span>
|
||||
<span>긴급연락: {emergencyContact}</span>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { WeatherInfo, UserInfo, CompanyInfo } from "./types";
|
||||
|
||||
interface DashboardHeaderProps {
|
||||
theme: "dark" | "light";
|
||||
weather: WeatherInfo;
|
||||
user: UserInfo;
|
||||
company: CompanyInfo;
|
||||
onThemeToggle: () => void;
|
||||
onUserClick: () => void;
|
||||
}
|
||||
|
||||
export function DashboardHeader({
|
||||
theme,
|
||||
weather,
|
||||
user,
|
||||
company,
|
||||
onThemeToggle,
|
||||
onUserClick,
|
||||
}: DashboardHeaderProps) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [currentTime, setCurrentTime] = useState(new Date());
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const timer = setInterval(() => {
|
||||
setCurrentTime(new Date());
|
||||
}, 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
const seconds = String(date.getSeconds()).padStart(2, "0");
|
||||
return `${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="pop-dashboard-header">
|
||||
<div className="pop-dashboard-header-left">
|
||||
<div className="pop-dashboard-time-display">
|
||||
<div className="pop-dashboard-time-main">
|
||||
{mounted ? formatTime(currentTime) : "--:--:--"}
|
||||
</div>
|
||||
<div className="pop-dashboard-time-date">
|
||||
{mounted ? formatDate(currentTime) : "----.--.--"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pop-dashboard-header-right">
|
||||
{/* 테마 토글 */}
|
||||
<button
|
||||
className="pop-dashboard-theme-toggle"
|
||||
onClick={onThemeToggle}
|
||||
title="테마 변경"
|
||||
>
|
||||
{theme === "dark" ? <Moon size={16} /> : <Sun size={16} />}
|
||||
</button>
|
||||
|
||||
{/* 날씨 정보 */}
|
||||
<div className="pop-dashboard-weather">
|
||||
<span className="pop-dashboard-weather-temp">{weather.temp}</span>
|
||||
<span className="pop-dashboard-weather-desc">{weather.description}</span>
|
||||
</div>
|
||||
|
||||
{/* 회사 정보 */}
|
||||
<div className="pop-dashboard-company">
|
||||
<div className="pop-dashboard-company-name">{company.name}</div>
|
||||
<div className="pop-dashboard-company-sub">{company.subTitle}</div>
|
||||
</div>
|
||||
|
||||
{/* 사용자 배지 */}
|
||||
<button className="pop-dashboard-user-badge" onClick={onUserClick}>
|
||||
<div className="pop-dashboard-user-avatar">{user.avatar}</div>
|
||||
<div className="pop-dashboard-user-text">
|
||||
<div className="pop-dashboard-user-name">{user.name}</div>
|
||||
<div className="pop-dashboard-user-role">{user.role}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { KpiItem } from "./types";
|
||||
|
||||
interface KpiBarProps {
|
||||
items: KpiItem[];
|
||||
}
|
||||
|
||||
export function KpiBar({ items }: KpiBarProps) {
|
||||
const getStrokeDashoffset = (percentage: number) => {
|
||||
const circumference = 264; // 2 * PI * 42
|
||||
return circumference - (circumference * percentage) / 100;
|
||||
};
|
||||
|
||||
const formatValue = (value: number) => {
|
||||
if (value >= 1000) {
|
||||
return value.toLocaleString();
|
||||
}
|
||||
return value.toString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pop-dashboard-kpi-bar">
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className="pop-dashboard-kpi-item">
|
||||
<div className="pop-dashboard-kpi-gauge">
|
||||
<svg viewBox="0 0 100 100" width="52" height="52">
|
||||
<circle
|
||||
className="pop-dashboard-kpi-gauge-bg"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42"
|
||||
/>
|
||||
<circle
|
||||
className={`pop-dashboard-kpi-gauge-fill kpi-color-${item.color}`}
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42"
|
||||
strokeDasharray="264"
|
||||
strokeDashoffset={getStrokeDashoffset(item.percentage)}
|
||||
/>
|
||||
</svg>
|
||||
<span className={`pop-dashboard-kpi-gauge-text kpi-color-${item.color}`}>
|
||||
{item.percentage}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="pop-dashboard-kpi-info">
|
||||
<div className="pop-dashboard-kpi-label">{item.label}</div>
|
||||
<div className={`pop-dashboard-kpi-value kpi-color-${item.color}`}>
|
||||
{formatValue(item.value)}
|
||||
<span className="pop-dashboard-kpi-unit">{item.unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { MenuItem } from "./types";
|
||||
|
||||
interface MenuGridProps {
|
||||
items: MenuItem[];
|
||||
}
|
||||
|
||||
export function MenuGrid({ items }: MenuGridProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const handleClick = (item: MenuItem) => {
|
||||
if (item.href === "#") {
|
||||
alert(`${item.title} 화면은 준비 중입니다.`);
|
||||
} else {
|
||||
router.push(item.href);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pop-dashboard-menu-grid">
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`pop-dashboard-menu-card ${item.category}`}
|
||||
onClick={() => handleClick(item)}
|
||||
>
|
||||
<div className="pop-dashboard-menu-header">
|
||||
<div className="pop-dashboard-menu-title">{item.title}</div>
|
||||
<div className={`pop-dashboard-menu-count ${item.category}`}>
|
||||
{item.count}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-dashboard-menu-desc">{item.description}</div>
|
||||
<div className="pop-dashboard-menu-status">{item.status}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
|
||||
interface NoticeBannerProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
export function NoticeBanner({ text }: NoticeBannerProps) {
|
||||
return (
|
||||
<div className="pop-dashboard-notice-banner">
|
||||
<div className="pop-dashboard-notice-label">공지</div>
|
||||
<div className="pop-dashboard-notice-content">
|
||||
<div className="pop-dashboard-notice-marquee">
|
||||
<span className="pop-dashboard-notice-text">{text}</span>
|
||||
<span className="pop-dashboard-notice-text">{text}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { NoticeItem } from "./types";
|
||||
|
||||
interface NoticeListProps {
|
||||
items: NoticeItem[];
|
||||
onMoreClick: () => void;
|
||||
}
|
||||
|
||||
export function NoticeList({ items, onMoreClick }: NoticeListProps) {
|
||||
return (
|
||||
<div className="pop-dashboard-card">
|
||||
<div className="pop-dashboard-card-header">
|
||||
<h3 className="pop-dashboard-card-title">공지사항</h3>
|
||||
<button className="pop-dashboard-btn-more" onClick={onMoreClick}>
|
||||
더보기
|
||||
</button>
|
||||
</div>
|
||||
<div className="pop-dashboard-notice-list">
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className="pop-dashboard-notice-item">
|
||||
<div className="pop-dashboard-notice-title">{item.title}</div>
|
||||
<div className="pop-dashboard-notice-date">{item.date}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { DashboardHeader } from "./DashboardHeader";
|
||||
import { NoticeBanner } from "./NoticeBanner";
|
||||
import { KpiBar } from "./KpiBar";
|
||||
import { MenuGrid } from "./MenuGrid";
|
||||
import { ActivityList } from "./ActivityList";
|
||||
import { NoticeList } from "./NoticeList";
|
||||
import { DashboardFooter } from "./DashboardFooter";
|
||||
import {
|
||||
KPI_ITEMS,
|
||||
MENU_ITEMS,
|
||||
ACTIVITY_ITEMS,
|
||||
NOTICE_ITEMS,
|
||||
NOTICE_MARQUEE_TEXT,
|
||||
} from "./data";
|
||||
import "./dashboard.css";
|
||||
|
||||
export function PopDashboard() {
|
||||
const [theme, setTheme] = useState<"dark" | "light">("dark");
|
||||
|
||||
// 로컬 스토리지에서 테마 로드
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem("popTheme") as "dark" | "light" | null;
|
||||
if (savedTheme) {
|
||||
setTheme(savedTheme);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleThemeToggle = () => {
|
||||
const newTheme = theme === "dark" ? "light" : "dark";
|
||||
setTheme(newTheme);
|
||||
localStorage.setItem("popTheme", newTheme);
|
||||
};
|
||||
|
||||
const handleUserClick = () => {
|
||||
if (confirm("로그아웃 하시겠습니까?")) {
|
||||
alert("로그아웃되었습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleActivityMore = () => {
|
||||
alert("전체 활동 내역 화면으로 이동합니다.");
|
||||
};
|
||||
|
||||
const handleNoticeMore = () => {
|
||||
alert("전체 공지사항 화면으로 이동합니다.");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`pop-dashboard-container ${theme === "light" ? "light" : ""}`}>
|
||||
<div className="pop-dashboard">
|
||||
<DashboardHeader
|
||||
theme={theme}
|
||||
weather={{ temp: "18°C", description: "맑음" }}
|
||||
user={{ name: "김철수", role: "생산1팀", avatar: "김" }}
|
||||
company={{ name: "탑씰", subTitle: "현장 관리 시스템" }}
|
||||
onThemeToggle={handleThemeToggle}
|
||||
onUserClick={handleUserClick}
|
||||
/>
|
||||
|
||||
<NoticeBanner text={NOTICE_MARQUEE_TEXT} />
|
||||
|
||||
<KpiBar items={KPI_ITEMS} />
|
||||
|
||||
<MenuGrid items={MENU_ITEMS} />
|
||||
|
||||
<div className="pop-dashboard-bottom-section">
|
||||
<ActivityList items={ACTIVITY_ITEMS} onMoreClick={handleActivityMore} />
|
||||
<NoticeList items={NOTICE_ITEMS} onMoreClick={handleNoticeMore} />
|
||||
</div>
|
||||
|
||||
<DashboardFooter
|
||||
companyName="탑씰"
|
||||
version="1.0.0"
|
||||
emergencyContact="042-XXX-XXXX"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,906 @@
|
|||
/* ============================================
|
||||
POP 대시보드 스타일시트
|
||||
다크 모드 (사이버펑크) + 라이트 모드 (소프트 그레이 민트)
|
||||
============================================ */
|
||||
|
||||
/* ========== 다크 모드 (기본) ========== */
|
||||
.pop-dashboard-container {
|
||||
--db-bg-page: #080c15;
|
||||
--db-bg-card: linear-gradient(145deg, rgba(25, 35, 60, 0.9) 0%, rgba(18, 26, 47, 0.95) 100%);
|
||||
--db-bg-card-solid: #121a2f;
|
||||
--db-bg-card-alt: rgba(0, 0, 0, 0.2);
|
||||
--db-bg-elevated: #202d4b;
|
||||
|
||||
--db-accent-primary: #00d4ff;
|
||||
--db-accent-primary-light: #00f0ff;
|
||||
--db-indigo: #4169e1;
|
||||
--db-violet: #8a2be2;
|
||||
--db-mint: #00d4ff;
|
||||
--db-emerald: #00ff88;
|
||||
--db-amber: #ffaa00;
|
||||
--db-rose: #ff3333;
|
||||
|
||||
--db-text-primary: #ffffff;
|
||||
--db-text-secondary: #b4c3dc;
|
||||
--db-text-muted: #64788c;
|
||||
|
||||
--db-border: rgba(40, 55, 85, 1);
|
||||
--db-border-light: rgba(55, 75, 110, 1);
|
||||
|
||||
--db-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--db-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--db-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
--db-glow-accent: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(0, 212, 255, 0.3);
|
||||
|
||||
--db-radius-sm: 6px;
|
||||
--db-radius-md: 10px;
|
||||
--db-radius-lg: 14px;
|
||||
|
||||
--db-card-border-production: rgba(65, 105, 225, 0.5);
|
||||
--db-card-border-material: rgba(138, 43, 226, 0.5);
|
||||
--db-card-border-quality: rgba(0, 212, 255, 0.5);
|
||||
--db-card-border-equipment: rgba(0, 255, 136, 0.5);
|
||||
--db-card-border-safety: rgba(255, 170, 0, 0.5);
|
||||
|
||||
--db-notice-bg: rgba(255, 170, 0, 0.1);
|
||||
--db-notice-border: rgba(255, 170, 0, 0.3);
|
||||
--db-notice-text: #ffaa00;
|
||||
|
||||
--db-weather-bg: rgba(0, 0, 0, 0.2);
|
||||
--db-weather-border: rgba(40, 55, 85, 1);
|
||||
|
||||
--db-user-badge-bg: rgba(0, 0, 0, 0.3);
|
||||
--db-user-badge-hover: rgba(0, 212, 255, 0.1);
|
||||
|
||||
--db-btn-more-bg: rgba(0, 212, 255, 0.08);
|
||||
--db-btn-more-border: rgba(0, 212, 255, 0.2);
|
||||
--db-btn-more-color: #00d4ff;
|
||||
|
||||
--db-status-bg: rgba(0, 212, 255, 0.1);
|
||||
--db-status-border: rgba(0, 212, 255, 0.2);
|
||||
--db-status-color: #00d4ff;
|
||||
}
|
||||
|
||||
/* ========== 라이트 모드 ========== */
|
||||
.pop-dashboard-container.light {
|
||||
--db-bg-page: #f8f9fb;
|
||||
--db-bg-card: #ffffff;
|
||||
--db-bg-card-solid: #ffffff;
|
||||
--db-bg-card-alt: #f3f5f7;
|
||||
--db-bg-elevated: #fafbfc;
|
||||
|
||||
--db-accent-primary: #14b8a6;
|
||||
--db-accent-primary-light: #2dd4bf;
|
||||
--db-indigo: #6366f1;
|
||||
--db-violet: #8b5cf6;
|
||||
--db-mint: #14b8a6;
|
||||
--db-emerald: #10b981;
|
||||
--db-amber: #f59e0b;
|
||||
--db-rose: #f43f5e;
|
||||
|
||||
--db-text-primary: #1e293b;
|
||||
--db-text-secondary: #475569;
|
||||
--db-text-muted: #94a3b8;
|
||||
|
||||
--db-border: #e2e8f0;
|
||||
--db-border-light: #f1f5f9;
|
||||
|
||||
--db-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--db-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
|
||||
--db-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
|
||||
--db-glow-accent: none;
|
||||
|
||||
--db-card-border-production: rgba(99, 102, 241, 0.3);
|
||||
--db-card-border-material: rgba(139, 92, 246, 0.3);
|
||||
--db-card-border-quality: rgba(20, 184, 166, 0.3);
|
||||
--db-card-border-equipment: rgba(16, 185, 129, 0.3);
|
||||
--db-card-border-safety: rgba(245, 158, 11, 0.3);
|
||||
|
||||
--db-notice-bg: linear-gradient(90deg, rgba(245, 158, 11, 0.08), rgba(251, 191, 36, 0.05));
|
||||
--db-notice-border: rgba(245, 158, 11, 0.2);
|
||||
--db-notice-text: #475569;
|
||||
|
||||
--db-weather-bg: rgba(20, 184, 166, 0.08);
|
||||
--db-weather-border: rgba(20, 184, 166, 0.25);
|
||||
|
||||
--db-user-badge-bg: #f3f5f7;
|
||||
--db-user-badge-hover: #e2e8f0;
|
||||
|
||||
--db-btn-more-bg: rgba(20, 184, 166, 0.08);
|
||||
--db-btn-more-border: rgba(20, 184, 166, 0.25);
|
||||
--db-btn-more-color: #0d9488;
|
||||
|
||||
--db-status-bg: #f3f5f7;
|
||||
--db-status-border: transparent;
|
||||
--db-status-color: #475569;
|
||||
}
|
||||
|
||||
/* ========== 기본 컨테이너 ========== */
|
||||
.pop-dashboard-container {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
||||
background: var(--db-bg-page);
|
||||
color: var(--db-text-primary);
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 다크 모드 배경 그리드 */
|
||||
.pop-dashboard-container::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
|
||||
linear-gradient(180deg, #080c15 0%, #0a0f1c 50%, #0d1323 100%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.pop-dashboard-container.light::before {
|
||||
background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 50%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.pop-dashboard {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
/* ========== 헤더 ========== */
|
||||
.pop-dashboard-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 14px 24px;
|
||||
background: var(--db-bg-card);
|
||||
border: 1px solid var(--db-border);
|
||||
border-radius: var(--db-radius-lg);
|
||||
box-shadow: var(--db-shadow-sm);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--db-accent-primary), transparent);
|
||||
}
|
||||
|
||||
.pop-dashboard-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pop-dashboard-time-display {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pop-dashboard-time-main {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
color: var(--db-accent-primary);
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-time-main {
|
||||
text-shadow: var(--db-glow-accent);
|
||||
animation: neonFlicker 3s infinite;
|
||||
}
|
||||
|
||||
.pop-dashboard-time-date {
|
||||
font-size: 13px;
|
||||
color: var(--db-text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pop-dashboard-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* 테마 토글 */
|
||||
.pop-dashboard-theme-toggle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--db-bg-card-alt);
|
||||
border: 1px solid var(--db-border);
|
||||
border-radius: var(--db-radius-md);
|
||||
color: var(--db-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pop-dashboard-theme-toggle:hover {
|
||||
border-color: var(--db-accent-primary);
|
||||
color: var(--db-accent-primary);
|
||||
}
|
||||
|
||||
/* 날씨 정보 */
|
||||
.pop-dashboard-weather {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: var(--db-weather-bg);
|
||||
border: 1px solid var(--db-weather-border);
|
||||
border-radius: var(--db-radius-md);
|
||||
}
|
||||
|
||||
.pop-dashboard-weather-temp {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--db-amber);
|
||||
}
|
||||
|
||||
.pop-dashboard-container.light .pop-dashboard-weather-temp {
|
||||
color: var(--db-accent-primary);
|
||||
}
|
||||
|
||||
.pop-dashboard-weather-desc {
|
||||
font-size: 11px;
|
||||
color: var(--db-text-muted);
|
||||
}
|
||||
|
||||
/* 회사 정보 */
|
||||
.pop-dashboard-company {
|
||||
padding-right: 14px;
|
||||
border-right: 1px solid var(--db-border);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pop-dashboard-company-name {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--db-text-primary);
|
||||
}
|
||||
|
||||
.pop-dashboard-company-sub {
|
||||
font-size: 11px;
|
||||
color: var(--db-text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 사용자 배지 */
|
||||
.pop-dashboard-user-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 14px;
|
||||
background: var(--db-user-badge-bg);
|
||||
border: 1px solid var(--db-border);
|
||||
border-radius: var(--db-radius-md);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pop-dashboard-user-badge:hover {
|
||||
background: var(--db-user-badge-hover);
|
||||
}
|
||||
|
||||
.pop-dashboard-user-badge:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.pop-dashboard-user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, var(--db-accent-primary), var(--db-emerald));
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-user-avatar {
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.pop-dashboard-container.light .pop-dashboard-user-avatar {
|
||||
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
|
||||
}
|
||||
|
||||
.pop-dashboard-user-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--db-text-primary);
|
||||
}
|
||||
|
||||
.pop-dashboard-user-role {
|
||||
font-size: 11px;
|
||||
color: var(--db-text-muted);
|
||||
}
|
||||
|
||||
/* ========== 공지사항 배너 ========== */
|
||||
.pop-dashboard-notice-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px 16px;
|
||||
background: var(--db-notice-bg);
|
||||
border: 1px solid var(--db-notice-border);
|
||||
border-radius: var(--db-radius-md);
|
||||
}
|
||||
|
||||
.pop-dashboard-notice-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--db-bg-page);
|
||||
background: var(--db-amber);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.pop-dashboard-container.light .pop-dashboard-notice-label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pop-dashboard-notice-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pop-dashboard-notice-marquee {
|
||||
display: flex;
|
||||
animation: dashboardMarquee 30s linear infinite;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pop-dashboard-notice-text {
|
||||
font-size: 12px;
|
||||
color: var(--db-notice-text);
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
@keyframes dashboardMarquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.pop-dashboard-notice-banner:hover .pop-dashboard-notice-marquee {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* ========== KPI 바 ========== */
|
||||
.pop-dashboard-kpi-bar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-item {
|
||||
background: var(--db-bg-card);
|
||||
border: 1px solid var(--db-border);
|
||||
border-radius: var(--db-radius-lg);
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
box-shadow: var(--db-shadow-sm);
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-kpi-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--db-shadow-md);
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-kpi-item:hover {
|
||||
border-color: rgba(0, 212, 255, 0.3);
|
||||
box-shadow: 0 0 30px rgba(0, 212, 255, 0.1), inset 0 0 30px rgba(0, 212, 255, 0.02);
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-gauge {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-gauge svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-gauge-bg {
|
||||
fill: none;
|
||||
stroke: var(--db-border);
|
||||
stroke-width: 5;
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-gauge-fill {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.5s;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-kpi-gauge-fill {
|
||||
filter: drop-shadow(0 0 6px currentColor);
|
||||
}
|
||||
|
||||
.pop-dashboard-container.light .pop-dashboard-kpi-gauge-fill {
|
||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-gauge-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-info { flex: 1; }
|
||||
|
||||
.pop-dashboard-kpi-label {
|
||||
font-size: 11px;
|
||||
color: var(--db-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-unit {
|
||||
font-size: 12px;
|
||||
color: var(--db-text-muted);
|
||||
margin-left: 3px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* KPI 색상 */
|
||||
.kpi-color-cyan { color: var(--db-mint); stroke: var(--db-mint); }
|
||||
.kpi-color-emerald { color: var(--db-emerald); stroke: var(--db-emerald); }
|
||||
.kpi-color-rose { color: var(--db-rose); stroke: var(--db-rose); }
|
||||
.kpi-color-amber { color: var(--db-amber); stroke: var(--db-amber); }
|
||||
|
||||
/* ========== 메뉴 그리드 ========== */
|
||||
.pop-dashboard-menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pop-dashboard-menu-card {
|
||||
background: var(--db-bg-card);
|
||||
border-radius: var(--db-radius-lg);
|
||||
padding: 18px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: var(--db-shadow-sm);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pop-dashboard-menu-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--db-shadow-lg);
|
||||
}
|
||||
|
||||
.pop-dashboard-menu-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.pop-dashboard-menu-card.production { border: 2px solid var(--db-card-border-production); }
|
||||
.pop-dashboard-menu-card.material { border: 2px solid var(--db-card-border-material); }
|
||||
.pop-dashboard-menu-card.quality { border: 2px solid var(--db-card-border-quality); }
|
||||
.pop-dashboard-menu-card.equipment { border: 2px solid var(--db-card-border-equipment); }
|
||||
.pop-dashboard-menu-card.safety { border: 2px solid var(--db-card-border-safety); }
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.production:hover { box-shadow: 0 0 20px rgba(65, 105, 225, 0.3); }
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.material:hover { box-shadow: 0 0 20px rgba(138, 43, 226, 0.3); }
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.quality:hover { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.equipment:hover { box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); }
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.safety:hover { box-shadow: 0 0 20px rgba(255, 170, 0, 0.3); }
|
||||
|
||||
.pop-dashboard-menu-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pop-dashboard-menu-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--db-text-primary);
|
||||
}
|
||||
|
||||
.pop-dashboard-menu-count {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-menu-count {
|
||||
text-shadow: 0 0 20px currentColor;
|
||||
}
|
||||
|
||||
.pop-dashboard-menu-count.production { color: var(--db-indigo); }
|
||||
.pop-dashboard-menu-count.material { color: var(--db-violet); }
|
||||
.pop-dashboard-menu-count.quality { color: var(--db-mint); }
|
||||
.pop-dashboard-menu-count.equipment { color: var(--db-emerald); }
|
||||
.pop-dashboard-menu-count.safety { color: var(--db-amber); }
|
||||
|
||||
.pop-dashboard-menu-desc {
|
||||
font-size: 11px;
|
||||
color: var(--db-text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pop-dashboard-menu-status {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
padding: 4px 10px;
|
||||
background: var(--db-status-bg);
|
||||
border: 1px solid var(--db-status-border);
|
||||
border-radius: 16px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--db-status-color);
|
||||
}
|
||||
|
||||
/* ========== 하단 섹션 ========== */
|
||||
.pop-dashboard-bottom-section {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pop-dashboard-card {
|
||||
background: var(--db-bg-card);
|
||||
border: 1px solid var(--db-border);
|
||||
border-radius: var(--db-radius-lg);
|
||||
padding: 18px;
|
||||
box-shadow: var(--db-shadow-sm);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
|
||||
}
|
||||
|
||||
.pop-dashboard-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--db-border);
|
||||
}
|
||||
|
||||
.pop-dashboard-card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--db-text-primary);
|
||||
}
|
||||
|
||||
.pop-dashboard-btn-more {
|
||||
padding: 6px 12px;
|
||||
background: var(--db-btn-more-bg);
|
||||
border: 1px solid var(--db-btn-more-border);
|
||||
color: var(--db-btn-more-color);
|
||||
border-radius: var(--db-radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pop-dashboard-btn-more:hover {
|
||||
background: var(--db-accent-primary);
|
||||
color: white;
|
||||
border-color: var(--db-accent-primary);
|
||||
}
|
||||
|
||||
/* 활동 리스트 */
|
||||
.pop-dashboard-activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pop-dashboard-activity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--db-bg-card-alt);
|
||||
border-radius: var(--db-radius-md);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-activity-item {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-activity-item:hover {
|
||||
background: rgba(0, 212, 255, 0.05);
|
||||
border-color: rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
|
||||
.pop-dashboard-container.light .pop-dashboard-activity-item:hover {
|
||||
background: var(--db-border-light);
|
||||
}
|
||||
|
||||
.pop-dashboard-activity-time {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--db-accent-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-activity-time {
|
||||
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
|
||||
.pop-dashboard-activity-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-activity-dot {
|
||||
box-shadow: 0 0 8px currentColor;
|
||||
}
|
||||
|
||||
.pop-dashboard-activity-dot.production { background: var(--db-indigo); color: var(--db-indigo); }
|
||||
.pop-dashboard-activity-dot.material { background: var(--db-violet); color: var(--db-violet); }
|
||||
.pop-dashboard-activity-dot.quality { background: var(--db-mint); color: var(--db-mint); }
|
||||
.pop-dashboard-activity-dot.equipment { background: var(--db-emerald); color: var(--db-emerald); }
|
||||
|
||||
.pop-dashboard-activity-content { flex: 1; }
|
||||
|
||||
.pop-dashboard-activity-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--db-text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.pop-dashboard-activity-desc {
|
||||
font-size: 11px;
|
||||
color: var(--db-text-muted);
|
||||
}
|
||||
|
||||
/* 공지사항 리스트 */
|
||||
.pop-dashboard-notice-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pop-dashboard-notice-item {
|
||||
padding: 12px;
|
||||
background: var(--db-bg-card-alt);
|
||||
border-radius: var(--db-radius-md);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pop-dashboard-container:not(.light) .pop-dashboard-notice-item:hover {
|
||||
background: rgba(255, 170, 0, 0.05);
|
||||
}
|
||||
|
||||
.pop-dashboard-container.light .pop-dashboard-notice-item:hover {
|
||||
background: var(--db-border-light);
|
||||
}
|
||||
|
||||
.pop-dashboard-notice-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--db-text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pop-dashboard-notice-date {
|
||||
font-size: 11px;
|
||||
color: var(--db-text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ========== 푸터 ========== */
|
||||
.pop-dashboard-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
padding: 14px 18px;
|
||||
background: var(--db-bg-card);
|
||||
border: 1px solid var(--db-border);
|
||||
border-radius: var(--db-radius-md);
|
||||
font-size: 11px;
|
||||
color: var(--db-text-muted);
|
||||
}
|
||||
|
||||
/* ========== 반응형 ========== */
|
||||
|
||||
/* 가로 모드 */
|
||||
@media (orientation: landscape) {
|
||||
.pop-dashboard { padding: 16px 24px; }
|
||||
.pop-dashboard-kpi-bar { grid-template-columns: repeat(4, 1fr) !important; gap: 10px; }
|
||||
.pop-dashboard-kpi-item { padding: 12px 14px; }
|
||||
.pop-dashboard-kpi-gauge { width: 44px; height: 44px; }
|
||||
.pop-dashboard-kpi-gauge svg { width: 44px; height: 44px; }
|
||||
.pop-dashboard-kpi-value { font-size: 20px; }
|
||||
|
||||
.pop-dashboard-menu-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 10px; }
|
||||
.pop-dashboard-menu-card { padding: 14px; display: block; }
|
||||
.pop-dashboard-menu-header { margin-bottom: 8px; display: block; }
|
||||
.pop-dashboard-menu-title { font-size: 13px; }
|
||||
.pop-dashboard-menu-count { font-size: 20px; }
|
||||
.pop-dashboard-menu-desc { display: block; font-size: 10px; }
|
||||
.pop-dashboard-menu-status { margin-top: 8px; }
|
||||
|
||||
.pop-dashboard-bottom-section { grid-template-columns: 2fr 1fr; }
|
||||
}
|
||||
|
||||
/* 세로 모드 */
|
||||
@media (orientation: portrait) {
|
||||
.pop-dashboard { padding: 16px; }
|
||||
.pop-dashboard-kpi-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
|
||||
|
||||
.pop-dashboard-menu-grid { grid-template-columns: 1fr !important; gap: 8px; }
|
||||
.pop-dashboard-menu-card {
|
||||
padding: 14px 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pop-dashboard-menu-header { margin-bottom: 0; display: flex; align-items: center; gap: 12px; }
|
||||
.pop-dashboard-menu-title { font-size: 15px; }
|
||||
.pop-dashboard-menu-count { font-size: 20px; }
|
||||
.pop-dashboard-menu-desc { display: none; }
|
||||
.pop-dashboard-menu-status { margin-top: 0; padding: 5px 12px; font-size: 11px; }
|
||||
|
||||
.pop-dashboard-bottom-section { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* 작은 화면 세로 */
|
||||
@media (max-width: 600px) and (orientation: portrait) {
|
||||
.pop-dashboard { padding: 12px; }
|
||||
.pop-dashboard-header { padding: 10px 14px; }
|
||||
.pop-dashboard-time-main { font-size: 20px; }
|
||||
.pop-dashboard-time-date { display: none; }
|
||||
.pop-dashboard-weather { padding: 4px 8px; }
|
||||
.pop-dashboard-weather-temp { font-size: 11px; }
|
||||
.pop-dashboard-weather-desc { display: none; }
|
||||
.pop-dashboard-company { display: none; }
|
||||
.pop-dashboard-user-text { display: none; }
|
||||
.pop-dashboard-user-avatar { width: 30px; height: 30px; }
|
||||
|
||||
.pop-dashboard-notice-banner { padding: 8px 12px; }
|
||||
.pop-dashboard-notice-label { font-size: 9px; }
|
||||
.pop-dashboard-notice-text { font-size: 11px; }
|
||||
|
||||
.pop-dashboard-kpi-item { padding: 12px 14px; gap: 10px; }
|
||||
.pop-dashboard-kpi-gauge { width: 44px; height: 44px; }
|
||||
.pop-dashboard-kpi-gauge svg { width: 44px; height: 44px; }
|
||||
.pop-dashboard-kpi-gauge-text { font-size: 10px; }
|
||||
.pop-dashboard-kpi-label { font-size: 10px; }
|
||||
.pop-dashboard-kpi-value { font-size: 18px; }
|
||||
|
||||
.pop-dashboard-menu-card { padding: 12px 16px; }
|
||||
.pop-dashboard-menu-title { font-size: 14px; }
|
||||
.pop-dashboard-menu-count { font-size: 18px; }
|
||||
.pop-dashboard-menu-status { padding: 4px 10px; font-size: 10px; }
|
||||
}
|
||||
|
||||
/* 작은 화면 가로 */
|
||||
@media (max-width: 600px) and (orientation: landscape) {
|
||||
.pop-dashboard { padding: 10px 16px; }
|
||||
.pop-dashboard-header { padding: 8px 12px; }
|
||||
.pop-dashboard-time-main { font-size: 18px; }
|
||||
.pop-dashboard-time-date { font-size: 10px; }
|
||||
.pop-dashboard-weather { display: none; }
|
||||
.pop-dashboard-company { display: none; }
|
||||
.pop-dashboard-user-text { display: none; }
|
||||
|
||||
.pop-dashboard-notice-banner { padding: 6px 10px; margin-bottom: 10px; }
|
||||
|
||||
.pop-dashboard-kpi-item { padding: 8px 10px; gap: 8px; }
|
||||
.pop-dashboard-kpi-gauge { width: 36px; height: 36px; }
|
||||
.pop-dashboard-kpi-gauge svg { width: 36px; height: 36px; }
|
||||
.pop-dashboard-kpi-gauge-text { font-size: 9px; }
|
||||
.pop-dashboard-kpi-label { font-size: 9px; }
|
||||
.pop-dashboard-kpi-value { font-size: 16px; }
|
||||
|
||||
.pop-dashboard-menu-card { padding: 10px; }
|
||||
.pop-dashboard-menu-title { font-size: 11px; }
|
||||
.pop-dashboard-menu-count { font-size: 16px; }
|
||||
.pop-dashboard-menu-status { margin-top: 4px; padding: 2px 6px; font-size: 8px; }
|
||||
}
|
||||
|
||||
/* ========== 애니메이션 ========== */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes neonFlicker {
|
||||
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
|
||||
20%, 24%, 55% { opacity: 0.85; }
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-item, .pop-dashboard-menu-card, .pop-dashboard-card {
|
||||
animation: fadeIn 0.35s ease-out backwards;
|
||||
}
|
||||
|
||||
.pop-dashboard-kpi-item:nth-child(1) { animation-delay: 0.05s; }
|
||||
.pop-dashboard-kpi-item:nth-child(2) { animation-delay: 0.1s; }
|
||||
.pop-dashboard-kpi-item:nth-child(3) { animation-delay: 0.15s; }
|
||||
.pop-dashboard-kpi-item:nth-child(4) { animation-delay: 0.2s; }
|
||||
|
||||
.pop-dashboard-menu-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.pop-dashboard-menu-card:nth-child(2) { animation-delay: 0.15s; }
|
||||
.pop-dashboard-menu-card:nth-child(3) { animation-delay: 0.2s; }
|
||||
.pop-dashboard-menu-card:nth-child(4) { animation-delay: 0.25s; }
|
||||
.pop-dashboard-menu-card:nth-child(5) { animation-delay: 0.3s; }
|
||||
|
||||
/* 스크롤바 */
|
||||
.pop-dashboard-container ::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
.pop-dashboard-container ::-webkit-scrollbar-track { background: transparent; }
|
||||
.pop-dashboard-container ::-webkit-scrollbar-thumb { background: var(--db-border); border-radius: 3px; }
|
||||
.pop-dashboard-container ::-webkit-scrollbar-thumb:hover { background: var(--db-accent-primary); }
|
||||
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
// POP 대시보드 샘플 데이터
|
||||
|
||||
import { KpiItem, MenuItem, ActivityItem, NoticeItem } from "./types";
|
||||
|
||||
export const KPI_ITEMS: KpiItem[] = [
|
||||
{
|
||||
id: "achievement",
|
||||
label: "목표 달성률",
|
||||
value: 83.3,
|
||||
unit: "%",
|
||||
percentage: 83,
|
||||
color: "cyan",
|
||||
},
|
||||
{
|
||||
id: "production",
|
||||
label: "금일 생산실적",
|
||||
value: 1250,
|
||||
unit: "EA",
|
||||
percentage: 100,
|
||||
color: "emerald",
|
||||
},
|
||||
{
|
||||
id: "defect",
|
||||
label: "불량률",
|
||||
value: 0.8,
|
||||
unit: "%",
|
||||
percentage: 1,
|
||||
color: "rose",
|
||||
},
|
||||
{
|
||||
id: "equipment",
|
||||
label: "가동 설비",
|
||||
value: 8,
|
||||
unit: "/ 10",
|
||||
percentage: 80,
|
||||
color: "amber",
|
||||
},
|
||||
];
|
||||
|
||||
export const MENU_ITEMS: MenuItem[] = [
|
||||
{
|
||||
id: "production",
|
||||
title: "생산관리",
|
||||
count: 5,
|
||||
description: "작업지시 / 생산실적 / 공정관리",
|
||||
status: "진행중",
|
||||
category: "production",
|
||||
href: "/pop/work",
|
||||
},
|
||||
{
|
||||
id: "material",
|
||||
title: "자재관리",
|
||||
count: 12,
|
||||
description: "자재출고 / 재고확인 / 입고처리",
|
||||
status: "대기",
|
||||
category: "material",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
id: "quality",
|
||||
title: "품질관리",
|
||||
count: 3,
|
||||
description: "품질검사 / 불량처리 / 검사기록",
|
||||
status: "검사대기",
|
||||
category: "quality",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
id: "equipment",
|
||||
title: "설비관리",
|
||||
count: 2,
|
||||
description: "설비현황 / 점검관리 / 고장신고",
|
||||
status: "점검필요",
|
||||
category: "equipment",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
id: "safety",
|
||||
title: "안전관리",
|
||||
count: 0,
|
||||
description: "안전점검 / 사고신고 / 안전교육",
|
||||
status: "이상무",
|
||||
category: "safety",
|
||||
href: "#",
|
||||
},
|
||||
];
|
||||
|
||||
export const ACTIVITY_ITEMS: ActivityItem[] = [
|
||||
{
|
||||
id: "1",
|
||||
time: "14:25",
|
||||
title: "생산실적 등록",
|
||||
description: "WO-2024-156 - 500EA 생산완료",
|
||||
category: "production",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
time: "13:50",
|
||||
title: "자재출고",
|
||||
description: "알루미늄 프로파일 A100 - 200EA",
|
||||
category: "material",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
time: "11:30",
|
||||
title: "품질검사 완료",
|
||||
description: "LOT-2024-156 합격 (불량 0건)",
|
||||
category: "quality",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
time: "09:15",
|
||||
title: "설비점검",
|
||||
description: "5호기 정기점검 완료",
|
||||
category: "equipment",
|
||||
},
|
||||
];
|
||||
|
||||
export const NOTICE_ITEMS: NoticeItem[] = [
|
||||
{
|
||||
id: "1",
|
||||
title: "금일 15:00 전체 안전교육",
|
||||
date: "2024-01-05",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "3호기 정기점검 안내",
|
||||
date: "2024-01-04",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "11월 우수팀 - 생산1팀",
|
||||
date: "2024-01-03",
|
||||
},
|
||||
];
|
||||
|
||||
export const NOTICE_MARQUEE_TEXT =
|
||||
"[공지] 금일 오후 3시 전체 안전교육 실시 예정입니다. 전 직원 필참 바랍니다. | [알림] 내일 설비 정기점검으로 인한 3호기 가동 중지 예정 | [안내] 11월 생산실적 우수팀 발표 - 생산1팀 축하드립니다!";
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
export { PopDashboard } from "./PopDashboard";
|
||||
export { DashboardHeader } from "./DashboardHeader";
|
||||
export { NoticeBanner } from "./NoticeBanner";
|
||||
export { KpiBar } from "./KpiBar";
|
||||
export { MenuGrid } from "./MenuGrid";
|
||||
export { ActivityList } from "./ActivityList";
|
||||
export { NoticeList } from "./NoticeList";
|
||||
export { DashboardFooter } from "./DashboardFooter";
|
||||
export * from "./types";
|
||||
export * from "./data";
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
// POP 대시보드 타입 정의
|
||||
|
||||
export interface KpiItem {
|
||||
id: string;
|
||||
label: string;
|
||||
value: number;
|
||||
unit: string;
|
||||
percentage: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export interface MenuItem {
|
||||
id: string;
|
||||
title: string;
|
||||
count: number;
|
||||
description: string;
|
||||
status: string;
|
||||
category: "production" | "material" | "quality" | "equipment" | "safety";
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface ActivityItem {
|
||||
id: string;
|
||||
time: string;
|
||||
title: string;
|
||||
description: string;
|
||||
category: "production" | "material" | "quality" | "equipment";
|
||||
}
|
||||
|
||||
export interface NoticeItem {
|
||||
id: string;
|
||||
title: string;
|
||||
date: string;
|
||||
}
|
||||
|
||||
export interface WeatherInfo {
|
||||
temp: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface UserInfo {
|
||||
name: string;
|
||||
role: string;
|
||||
avatar: string;
|
||||
}
|
||||
|
||||
export interface CompanyInfo {
|
||||
name: string;
|
||||
subTitle: string;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,373 @@
|
|||
// POP 샘플 데이터
|
||||
|
||||
import { Process, Equipment, WorkOrder, WorkStepTemplate } from "./types";
|
||||
|
||||
// 공정 목록
|
||||
export const PROCESSES: Process[] = [
|
||||
{ id: "P001", name: "절단", code: "CUT" },
|
||||
{ id: "P002", name: "용접", code: "WELD" },
|
||||
{ id: "P003", name: "도장", code: "PAINT" },
|
||||
{ id: "P004", name: "조립", code: "ASSY" },
|
||||
{ id: "P005", name: "검사", code: "QC" },
|
||||
{ id: "P006", name: "포장", code: "PACK" },
|
||||
{ id: "P007", name: "프레스", code: "PRESS" },
|
||||
{ id: "P008", name: "연마", code: "POLISH" },
|
||||
{ id: "P009", name: "열처리", code: "HEAT" },
|
||||
{ id: "P010", name: "표면처리", code: "SURFACE" },
|
||||
{ id: "P011", name: "드릴링", code: "DRILL" },
|
||||
{ id: "P012", name: "밀링", code: "MILL" },
|
||||
{ id: "P013", name: "선반", code: "LATHE" },
|
||||
{ id: "P014", name: "연삭", code: "GRIND" },
|
||||
{ id: "P015", name: "측정", code: "MEASURE" },
|
||||
{ id: "P016", name: "세척", code: "CLEAN" },
|
||||
{ id: "P017", name: "건조", code: "DRY" },
|
||||
{ id: "P018", name: "코팅", code: "COAT" },
|
||||
{ id: "P019", name: "라벨링", code: "LABEL" },
|
||||
{ id: "P020", name: "출하검사", code: "FINAL_QC" },
|
||||
];
|
||||
|
||||
// 설비 목록
|
||||
export const EQUIPMENTS: Equipment[] = [
|
||||
{
|
||||
id: "E001",
|
||||
name: "CNC-01",
|
||||
processIds: ["P001"],
|
||||
processNames: ["절단"],
|
||||
status: "running",
|
||||
},
|
||||
{
|
||||
id: "E002",
|
||||
name: "CNC-02",
|
||||
processIds: ["P001"],
|
||||
processNames: ["절단"],
|
||||
status: "idle",
|
||||
},
|
||||
{
|
||||
id: "E003",
|
||||
name: "용접기-01",
|
||||
processIds: ["P002"],
|
||||
processNames: ["용접"],
|
||||
status: "running",
|
||||
},
|
||||
{
|
||||
id: "E004",
|
||||
name: "도장라인-A",
|
||||
processIds: ["P003"],
|
||||
processNames: ["도장"],
|
||||
status: "running",
|
||||
},
|
||||
{
|
||||
id: "E005",
|
||||
name: "조립라인-01",
|
||||
processIds: ["P004", "P006"],
|
||||
processNames: ["조립", "포장"],
|
||||
status: "running",
|
||||
},
|
||||
{
|
||||
id: "E006",
|
||||
name: "검사대-01",
|
||||
processIds: ["P005"],
|
||||
processNames: ["검사"],
|
||||
status: "idle",
|
||||
},
|
||||
{
|
||||
id: "E007",
|
||||
name: "작업대-A",
|
||||
processIds: ["P001", "P002", "P004"],
|
||||
processNames: ["절단", "용접", "조립"],
|
||||
status: "idle",
|
||||
},
|
||||
{
|
||||
id: "E008",
|
||||
name: "작업대-B",
|
||||
processIds: ["P003", "P005", "P006"],
|
||||
processNames: ["도장", "검사", "포장"],
|
||||
status: "idle",
|
||||
},
|
||||
];
|
||||
|
||||
// 작업순서 템플릿
|
||||
export const WORK_STEP_TEMPLATES: Record<string, WorkStepTemplate[]> = {
|
||||
P001: [
|
||||
// 절단 공정
|
||||
{
|
||||
id: 1,
|
||||
name: "설비 점검",
|
||||
type: "equipment-check",
|
||||
description: "설비 상태 및 안전 점검",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "원자재 확인",
|
||||
type: "material-check",
|
||||
description: "원자재 수량 및 품질 확인",
|
||||
},
|
||||
{ id: 3, name: "설비 셋팅", type: "setup", description: "절단 조건 설정" },
|
||||
{ id: 4, name: "가공 작업", type: "work", description: "절단 가공 진행" },
|
||||
{
|
||||
id: 5,
|
||||
name: "품질 검사",
|
||||
type: "inspection",
|
||||
description: "가공 결과 품질 검사",
|
||||
},
|
||||
{ id: 6, name: "작업 기록", type: "record", description: "작업 실적 기록" },
|
||||
],
|
||||
P002: [
|
||||
// 용접 공정
|
||||
{
|
||||
id: 1,
|
||||
name: "설비 점검",
|
||||
type: "equipment-check",
|
||||
description: "용접기 및 안전장비 점검",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "자재 준비",
|
||||
type: "material-check",
|
||||
description: "용접 자재 및 부품 확인",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "용접 조건 설정",
|
||||
type: "setup",
|
||||
description: "전류, 전압 등 설정",
|
||||
},
|
||||
{ id: 4, name: "용접 작업", type: "work", description: "용접 진행" },
|
||||
{
|
||||
id: 5,
|
||||
name: "용접부 검사",
|
||||
type: "inspection",
|
||||
description: "용접 품질 검사",
|
||||
},
|
||||
{ id: 6, name: "작업 기록", type: "record", description: "용접 실적 기록" },
|
||||
],
|
||||
default: [
|
||||
{
|
||||
id: 1,
|
||||
name: "작업 준비",
|
||||
type: "preparation",
|
||||
description: "작업 전 준비사항 확인",
|
||||
},
|
||||
{ id: 2, name: "작업 실행", type: "work", description: "작업 진행" },
|
||||
{
|
||||
id: 3,
|
||||
name: "품질 확인",
|
||||
type: "inspection",
|
||||
description: "작업 결과 확인",
|
||||
},
|
||||
{ id: 4, name: "작업 기록", type: "record", description: "작업 내용 기록" },
|
||||
],
|
||||
};
|
||||
|
||||
// 작업지시 목록
|
||||
export const WORK_ORDERS: WorkOrder[] = [
|
||||
{
|
||||
id: "WO-2025-001",
|
||||
itemCode: "PROD-001",
|
||||
itemName: "LCD 패널 A101",
|
||||
spec: "1920x1080",
|
||||
orderQuantity: 500,
|
||||
producedQuantity: 0,
|
||||
status: "waiting",
|
||||
process: "P001",
|
||||
processName: "절단",
|
||||
equipment: "E001",
|
||||
equipmentName: "CNC-01",
|
||||
startDate: "2025-01-06",
|
||||
dueDate: "2025-01-10",
|
||||
priority: "high",
|
||||
accepted: false,
|
||||
processFlow: [
|
||||
{ id: "P001", name: "절단", status: "pending" },
|
||||
{ id: "P007", name: "프레스", status: "pending" },
|
||||
{ id: "P011", name: "드릴링", status: "pending" },
|
||||
{ id: "P002", name: "용접", status: "pending" },
|
||||
{ id: "P008", name: "연마", status: "pending" },
|
||||
{ id: "P003", name: "도장", status: "pending" },
|
||||
{ id: "P004", name: "조립", status: "pending" },
|
||||
{ id: "P005", name: "검사", status: "pending" },
|
||||
{ id: "P006", name: "포장", status: "pending" },
|
||||
],
|
||||
currentProcessIndex: 0,
|
||||
},
|
||||
{
|
||||
id: "WO-2025-002",
|
||||
itemCode: "PROD-002",
|
||||
itemName: "LED 모듈 B202",
|
||||
spec: "500x500",
|
||||
orderQuantity: 300,
|
||||
producedQuantity: 150,
|
||||
status: "in-progress",
|
||||
process: "P002",
|
||||
processName: "용접",
|
||||
equipment: "E003",
|
||||
equipmentName: "용접기-01",
|
||||
startDate: "2025-01-05",
|
||||
dueDate: "2025-01-08",
|
||||
priority: "medium",
|
||||
accepted: true,
|
||||
processFlow: [
|
||||
{ id: "P001", name: "절단", status: "completed" },
|
||||
{ id: "P007", name: "프레스", status: "completed" },
|
||||
{ id: "P011", name: "드릴링", status: "completed" },
|
||||
{ id: "P002", name: "용접", status: "current" },
|
||||
{ id: "P008", name: "연마", status: "pending" },
|
||||
{ id: "P003", name: "도장", status: "pending" },
|
||||
{ id: "P004", name: "조립", status: "pending" },
|
||||
{ id: "P005", name: "검사", status: "pending" },
|
||||
{ id: "P006", name: "포장", status: "pending" },
|
||||
],
|
||||
currentProcessIndex: 3,
|
||||
},
|
||||
{
|
||||
id: "WO-2025-003",
|
||||
itemCode: "PROD-003",
|
||||
itemName: "OLED 디스플레이",
|
||||
spec: "2560x1440",
|
||||
orderQuantity: 200,
|
||||
producedQuantity: 50,
|
||||
status: "in-progress",
|
||||
process: "P004",
|
||||
processName: "조립",
|
||||
equipment: "E005",
|
||||
equipmentName: "조립라인-01",
|
||||
startDate: "2025-01-04",
|
||||
dueDate: "2025-01-09",
|
||||
priority: "high",
|
||||
accepted: true,
|
||||
processFlow: [
|
||||
{ id: "P001", name: "절단", status: "completed" },
|
||||
{ id: "P007", name: "프레스", status: "completed" },
|
||||
{ id: "P002", name: "용접", status: "completed" },
|
||||
{ id: "P003", name: "도장", status: "completed" },
|
||||
{ id: "P004", name: "조립", status: "current" },
|
||||
{ id: "P005", name: "검사", status: "pending" },
|
||||
{ id: "P006", name: "포장", status: "pending" },
|
||||
],
|
||||
currentProcessIndex: 4,
|
||||
},
|
||||
{
|
||||
id: "WO-2025-004",
|
||||
itemCode: "PROD-004",
|
||||
itemName: "스틸 프레임 C300",
|
||||
spec: "800x600",
|
||||
orderQuantity: 150,
|
||||
producedQuantity: 30,
|
||||
status: "in-progress",
|
||||
process: "P005",
|
||||
processName: "검사",
|
||||
equipment: "E006",
|
||||
equipmentName: "검사대-01",
|
||||
startDate: "2025-01-03",
|
||||
dueDate: "2025-01-10",
|
||||
priority: "medium",
|
||||
accepted: false,
|
||||
processFlow: [
|
||||
{ id: "P001", name: "절단", status: "completed" },
|
||||
{ id: "P002", name: "용접", status: "completed" },
|
||||
{ id: "P008", name: "연마", status: "completed" },
|
||||
{ id: "P003", name: "도장", status: "completed" },
|
||||
{ id: "P004", name: "조립", status: "completed" },
|
||||
{ id: "P005", name: "검사", status: "current" },
|
||||
{ id: "P006", name: "포장", status: "pending" },
|
||||
],
|
||||
currentProcessIndex: 5,
|
||||
},
|
||||
{
|
||||
id: "WO-2025-005",
|
||||
itemCode: "PROD-005",
|
||||
itemName: "알루미늄 케이스",
|
||||
spec: "300x400",
|
||||
orderQuantity: 400,
|
||||
producedQuantity: 400,
|
||||
status: "completed",
|
||||
process: "P006",
|
||||
processName: "포장",
|
||||
equipment: "E005",
|
||||
equipmentName: "조립라인-01",
|
||||
startDate: "2025-01-01",
|
||||
dueDate: "2025-01-05",
|
||||
completedDate: "2025-01-05",
|
||||
priority: "high",
|
||||
accepted: true,
|
||||
processFlow: [
|
||||
{ id: "P001", name: "절단", status: "completed" },
|
||||
{ id: "P007", name: "프레스", status: "completed" },
|
||||
{ id: "P008", name: "연마", status: "completed" },
|
||||
{ id: "P003", name: "도장", status: "completed" },
|
||||
{ id: "P004", name: "조립", status: "completed" },
|
||||
{ id: "P005", name: "검사", status: "completed" },
|
||||
{ id: "P006", name: "포장", status: "completed" },
|
||||
],
|
||||
currentProcessIndex: 6,
|
||||
},
|
||||
// 공정 리턴 작업지시
|
||||
{
|
||||
id: "WO-2025-006",
|
||||
itemCode: "PROD-006",
|
||||
itemName: "리턴품 샤프트 F100",
|
||||
spec: "50x300",
|
||||
orderQuantity: 80,
|
||||
producedQuantity: 30,
|
||||
status: "in-progress",
|
||||
process: "P008",
|
||||
processName: "연마",
|
||||
equipment: null,
|
||||
equipmentName: null,
|
||||
startDate: "2025-01-03",
|
||||
dueDate: "2025-01-08",
|
||||
priority: "high",
|
||||
accepted: false,
|
||||
isReturn: true,
|
||||
returnReason: "검사 불합격 - 표면 조도 미달",
|
||||
returnFromProcess: "P005",
|
||||
returnFromProcessName: "검사",
|
||||
processFlow: [
|
||||
{ id: "P001", name: "절단", status: "completed" },
|
||||
{ id: "P002", name: "용접", status: "completed" },
|
||||
{ id: "P008", name: "연마", status: "pending", isReturnTarget: true },
|
||||
{ id: "P014", name: "연삭", status: "pending" },
|
||||
{ id: "P016", name: "세척", status: "pending" },
|
||||
{ id: "P005", name: "검사", status: "pending" },
|
||||
],
|
||||
currentProcessIndex: 2,
|
||||
},
|
||||
// 분할접수 작업지시
|
||||
{
|
||||
id: "WO-2025-007",
|
||||
itemCode: "PROD-007",
|
||||
itemName: "분할접수 테스트 품목",
|
||||
spec: "100x200",
|
||||
orderQuantity: 200,
|
||||
producedQuantity: 50,
|
||||
acceptedQuantity: 50,
|
||||
remainingQuantity: 150,
|
||||
status: "in-progress",
|
||||
process: "P002",
|
||||
processName: "용접",
|
||||
equipment: "E003",
|
||||
equipmentName: "용접기-01",
|
||||
startDate: "2025-01-04",
|
||||
dueDate: "2025-01-10",
|
||||
priority: "normal",
|
||||
accepted: true,
|
||||
isPartialAccept: true,
|
||||
processFlow: [
|
||||
{ id: "P001", name: "절단", status: "completed" },
|
||||
{ id: "P002", name: "용접", status: "current" },
|
||||
{ id: "P003", name: "도장", status: "pending" },
|
||||
{ id: "P004", name: "조립", status: "pending" },
|
||||
{ id: "P005", name: "검사", status: "pending" },
|
||||
{ id: "P006", name: "포장", status: "pending" },
|
||||
],
|
||||
currentProcessIndex: 1,
|
||||
},
|
||||
];
|
||||
|
||||
// 상태 텍스트 매핑
|
||||
export const STATUS_TEXT: Record<string, string> = {
|
||||
waiting: "대기",
|
||||
"in-progress": "진행중",
|
||||
completed: "완료",
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
export { PopApp } from "./PopApp";
|
||||
export { PopHeader } from "./PopHeader";
|
||||
export { PopStatusTabs } from "./PopStatusTabs";
|
||||
export { PopWorkCard } from "./PopWorkCard";
|
||||
export { PopBottomNav } from "./PopBottomNav";
|
||||
export { PopEquipmentModal } from "./PopEquipmentModal";
|
||||
export { PopProcessModal } from "./PopProcessModal";
|
||||
export { PopAcceptModal } from "./PopAcceptModal";
|
||||
export { PopSettingsModal } from "./PopSettingsModal";
|
||||
export { PopProductionPanel } from "./PopProductionPanel";
|
||||
|
||||
export * from "./types";
|
||||
export * from "./data";
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,104 @@
|
|||
// POP 생산실적관리 타입 정의
|
||||
|
||||
export interface Process {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string;
|
||||
}
|
||||
|
||||
export interface Equipment {
|
||||
id: string;
|
||||
name: string;
|
||||
processIds: string[];
|
||||
processNames: string[];
|
||||
status: "running" | "idle" | "maintenance";
|
||||
}
|
||||
|
||||
export interface ProcessFlowStep {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "pending" | "current" | "completed";
|
||||
isReturnTarget?: boolean;
|
||||
}
|
||||
|
||||
export interface WorkOrder {
|
||||
id: string;
|
||||
itemCode: string;
|
||||
itemName: string;
|
||||
spec: string;
|
||||
orderQuantity: number;
|
||||
producedQuantity: number;
|
||||
status: "waiting" | "in-progress" | "completed";
|
||||
process: string;
|
||||
processName: string;
|
||||
equipment: string | null;
|
||||
equipmentName: string | null;
|
||||
startDate: string;
|
||||
dueDate: string;
|
||||
completedDate?: string;
|
||||
priority: "high" | "medium" | "normal" | "low";
|
||||
accepted: boolean;
|
||||
processFlow: ProcessFlowStep[];
|
||||
currentProcessIndex: number;
|
||||
// 리턴 관련
|
||||
isReturn?: boolean;
|
||||
returnReason?: string;
|
||||
returnFromProcess?: string;
|
||||
returnFromProcessName?: string;
|
||||
// 분할접수 관련
|
||||
acceptedQuantity?: number;
|
||||
remainingQuantity?: number;
|
||||
isPartialAccept?: boolean;
|
||||
}
|
||||
|
||||
export interface WorkStepTemplate {
|
||||
id: number;
|
||||
name: string;
|
||||
type:
|
||||
| "equipment-check"
|
||||
| "material-check"
|
||||
| "setup"
|
||||
| "work"
|
||||
| "inspection"
|
||||
| "record"
|
||||
| "preparation";
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface WorkStep extends WorkStepTemplate {
|
||||
status: "pending" | "in-progress" | "completed";
|
||||
startTime: Date | null;
|
||||
endTime: Date | null;
|
||||
data: Record<string, any>;
|
||||
}
|
||||
|
||||
export type StatusType = "waiting" | "pending-accept" | "in-progress" | "completed";
|
||||
|
||||
export type ProductionType = "work-order" | "material";
|
||||
|
||||
export interface AppState {
|
||||
currentStatus: StatusType;
|
||||
selectedEquipment: Equipment | null;
|
||||
selectedProcess: Process | null;
|
||||
selectedWorkOrder: WorkOrder | null;
|
||||
showMyWorkOnly: boolean;
|
||||
currentWorkSteps: WorkStep[];
|
||||
currentStepIndex: number;
|
||||
currentProductionType: ProductionType;
|
||||
selectionMode: "single" | "multi";
|
||||
completionAction: "close" | "stay";
|
||||
acceptTargetWorkOrder: WorkOrder | null;
|
||||
acceptQuantity: number;
|
||||
theme: "dark" | "light";
|
||||
}
|
||||
|
||||
export interface ModalState {
|
||||
equipment: boolean;
|
||||
process: boolean;
|
||||
accept: boolean;
|
||||
settings: boolean;
|
||||
}
|
||||
|
||||
export interface PanelState {
|
||||
production: boolean;
|
||||
}
|
||||
|
|
@ -32,6 +32,8 @@ interface TableSectionRendererProps {
|
|||
onTableDataChange: (data: any[]) => void;
|
||||
// 조건부 테이블용 콜백 (조건별 데이터 변경)
|
||||
onConditionalTableDataChange?: (conditionValue: string, data: any[]) => void;
|
||||
// 외부 데이터 (데이터 전달 모달열기 액션으로 전달받은 데이터)
|
||||
groupedData?: Record<string, any>[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
|
|
@ -337,6 +339,7 @@ export function TableSectionRenderer({
|
|||
onFormDataChange,
|
||||
onTableDataChange,
|
||||
onConditionalTableDataChange,
|
||||
groupedData,
|
||||
className,
|
||||
}: TableSectionRendererProps) {
|
||||
// 테이블 데이터 상태 (일반 모드)
|
||||
|
|
@ -373,6 +376,13 @@ export function TableSectionRenderer({
|
|||
// 초기 데이터 로드 완료 플래그 (무한 루프 방지)
|
||||
const initialDataLoadedRef = React.useRef(false);
|
||||
|
||||
// 외부 데이터 로드 완료 플래그
|
||||
const externalDataLoadedRef = React.useRef(false);
|
||||
|
||||
// 외부 데이터 소스 설정
|
||||
const externalDataConfig = tableConfig.externalDataSource;
|
||||
const isExternalDataMode = externalDataConfig?.enabled && externalDataConfig?.tableName;
|
||||
|
||||
// 조건부 테이블 설정
|
||||
const conditionalConfig = tableConfig.conditionalTable;
|
||||
const isConditionalMode = conditionalConfig?.enabled ?? false;
|
||||
|
|
@ -388,6 +398,56 @@ export function TableSectionRenderer({
|
|||
// 소스 테이블의 컬럼 라벨 (API에서 동적 로드)
|
||||
const [sourceColumnLabels, setSourceColumnLabels] = useState<Record<string, string>>({});
|
||||
|
||||
// 외부 데이터(groupedData) 처리: 데이터 전달 모달열기 액션으로 전달받은 데이터를 초기 테이블 데이터로 설정
|
||||
useEffect(() => {
|
||||
// 외부 데이터 소스가 활성화되지 않았거나, groupedData가 없으면 스킵
|
||||
if (!isExternalDataMode) return;
|
||||
if (!groupedData || groupedData.length === 0) return;
|
||||
// 이미 로드된 경우 스킵
|
||||
if (externalDataLoadedRef.current) return;
|
||||
|
||||
console.log("[TableSectionRenderer] 외부 데이터 처리 시작:", {
|
||||
externalTableName: externalDataConfig?.tableName,
|
||||
groupedDataCount: groupedData.length,
|
||||
columns: tableConfig.columns?.length,
|
||||
});
|
||||
|
||||
// groupedData를 테이블 컬럼 매핑에 따라 변환
|
||||
const mappedData = groupedData.map((externalRow, index) => {
|
||||
const newRow: Record<string, any> = {
|
||||
_id: `external_${Date.now()}_${index}`,
|
||||
_sourceData: externalRow, // 원본 데이터 보관
|
||||
};
|
||||
|
||||
// 각 컬럼에 대해 externalField 또는 field로 값을 매핑
|
||||
tableConfig.columns?.forEach((col) => {
|
||||
// externalField가 설정되어 있으면 사용, 아니면 field와 동일한 이름으로 매핑
|
||||
const externalFieldName = col.externalField || col.field;
|
||||
const value = externalRow[externalFieldName];
|
||||
|
||||
// 값이 있으면 설정
|
||||
if (value !== undefined) {
|
||||
newRow[col.field] = value;
|
||||
} else if (col.defaultValue !== undefined) {
|
||||
// 기본값이 설정되어 있으면 기본값 사용
|
||||
newRow[col.field] = col.defaultValue;
|
||||
}
|
||||
});
|
||||
|
||||
return newRow;
|
||||
});
|
||||
|
||||
console.log("[TableSectionRenderer] 외부 데이터 매핑 완료:", {
|
||||
mappedCount: mappedData.length,
|
||||
sampleRow: mappedData[0],
|
||||
});
|
||||
|
||||
// 테이블 데이터 설정
|
||||
setTableData(mappedData);
|
||||
onTableDataChange(mappedData);
|
||||
externalDataLoadedRef.current = true;
|
||||
}, [isExternalDataMode, groupedData, tableConfig.columns, externalDataConfig?.tableName, onTableDataChange]);
|
||||
|
||||
// 소스 테이블의 카테고리 타입 컬럼 목록 로드
|
||||
useEffect(() => {
|
||||
const loadCategoryColumns = async () => {
|
||||
|
|
|
|||
|
|
@ -2175,6 +2175,7 @@ export function UniversalFormModalComponent({
|
|||
// 테이블 섹션 데이터를 formData에 저장
|
||||
handleFieldChange(`_tableSection_${section.id}`, data);
|
||||
}}
|
||||
groupedData={_groupedData}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -710,6 +710,9 @@ interface ColumnSettingItemProps {
|
|||
displayColumns: string[]; // 검색 설정에서 선택한 표시 컬럼 목록
|
||||
sourceTableColumns: { column_name: string; data_type: string; is_nullable: string; comment?: string }[]; // 소스 테이블 컬럼
|
||||
sourceTableName: string; // 소스 테이블명
|
||||
externalTableColumns: { column_name: string; data_type: string; is_nullable: string; comment?: string }[]; // 외부 데이터 테이블 컬럼
|
||||
externalTableName?: string; // 외부 데이터 테이블명
|
||||
externalDataEnabled?: boolean; // 외부 데이터 소스 활성화 여부
|
||||
tables: { table_name: string; comment?: string }[]; // 전체 테이블 목록
|
||||
tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string }[]>; // 테이블별 컬럼
|
||||
sections: { id: string; title: string }[]; // 섹션 목록
|
||||
|
|
@ -731,6 +734,9 @@ function ColumnSettingItem({
|
|||
displayColumns,
|
||||
sourceTableColumns,
|
||||
sourceTableName,
|
||||
externalTableColumns,
|
||||
externalTableName,
|
||||
externalDataEnabled,
|
||||
tables,
|
||||
tableColumns,
|
||||
sections,
|
||||
|
|
@ -745,6 +751,7 @@ function ColumnSettingItem({
|
|||
}: ColumnSettingItemProps) {
|
||||
const [fieldSearchOpen, setFieldSearchOpen] = useState(false);
|
||||
const [sourceFieldSearchOpen, setSourceFieldSearchOpen] = useState(false);
|
||||
const [externalFieldSearchOpen, setExternalFieldSearchOpen] = useState(false);
|
||||
const [parentFieldSearchOpen, setParentFieldSearchOpen] = useState(false);
|
||||
const [lookupTableOpenMap, setLookupTableOpenMap] = useState<Record<string, boolean>>({});
|
||||
|
||||
|
|
@ -1014,6 +1021,88 @@ function ColumnSettingItem({
|
|||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 외부 필드 - Combobox (외부 데이터에서 가져올 컬럼) */}
|
||||
{externalDataEnabled && externalTableName && (
|
||||
<div>
|
||||
<Label className="text-xs">외부 필드</Label>
|
||||
<Popover open={externalFieldSearchOpen} onOpenChange={setExternalFieldSearchOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={externalFieldSearchOpen}
|
||||
className="h-8 w-full justify-between text-xs mt-1"
|
||||
disabled={externalTableColumns.length === 0}
|
||||
>
|
||||
<span className="truncate">
|
||||
{col.externalField || "(필드명과 동일)"}
|
||||
</span>
|
||||
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-[250px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="외부 필드 검색..." className="text-xs" />
|
||||
<CommandList className="max-h-[200px]">
|
||||
<CommandEmpty className="text-xs py-4 text-center">
|
||||
외부 필드를 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{/* 필드명과 동일 옵션 */}
|
||||
<CommandItem
|
||||
value="__same_as_field__"
|
||||
onSelect={() => {
|
||||
onUpdate({ externalField: undefined });
|
||||
setExternalFieldSearchOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
!col.externalField ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="text-muted-foreground">(필드명과 동일)</span>
|
||||
</CommandItem>
|
||||
{/* 외부 테이블 컬럼 목록 */}
|
||||
{externalTableColumns.map((extCol) => (
|
||||
<CommandItem
|
||||
key={extCol.column_name}
|
||||
value={extCol.column_name}
|
||||
onSelect={() => {
|
||||
onUpdate({ externalField: extCol.column_name });
|
||||
setExternalFieldSearchOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
col.externalField === extCol.column_name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<span className="font-medium truncate">{extCol.column_name}</span>
|
||||
{extCol.comment && (
|
||||
<span className="text-[10px] text-muted-foreground truncate">
|
||||
{extCol.comment}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<p className="text-[10px] text-muted-foreground mt-0.5">
|
||||
외부 데이터({externalTableName})에서 이 컬럼에 매핑할 필드
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 라벨 */}
|
||||
<div>
|
||||
<Label className="text-xs">라벨</Label>
|
||||
|
|
@ -2450,6 +2539,7 @@ export function TableSectionSettingsModal({
|
|||
// 테이블 검색 Combobox 상태
|
||||
const [tableSearchOpen, setTableSearchOpen] = useState(false);
|
||||
const [saveTableSearchOpen, setSaveTableSearchOpen] = useState(false);
|
||||
const [externalTableSearchOpen, setExternalTableSearchOpen] = useState(false);
|
||||
|
||||
// 활성 탭
|
||||
const [activeTab, setActiveTab] = useState("source");
|
||||
|
|
@ -2623,6 +2713,24 @@ export function TableSectionSettingsModal({
|
|||
});
|
||||
};
|
||||
|
||||
const updateExternalDataSource = (updates: Partial<NonNullable<TableSectionConfig["externalDataSource"]>>) => {
|
||||
updateTableConfig({
|
||||
externalDataSource: { ...tableConfig.externalDataSource, enabled: false, tableName: "", ...updates },
|
||||
});
|
||||
};
|
||||
|
||||
// 외부 데이터 소스 테이블 컬럼 목록
|
||||
const externalTableColumns = useMemo(() => {
|
||||
return tableColumns[tableConfig.externalDataSource?.tableName || ""] || [];
|
||||
}, [tableColumns, tableConfig.externalDataSource?.tableName]);
|
||||
|
||||
// 외부 데이터 소스 테이블 변경 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (tableConfig.externalDataSource?.enabled && tableConfig.externalDataSource?.tableName) {
|
||||
onLoadTableColumns(tableConfig.externalDataSource.tableName);
|
||||
}
|
||||
}, [tableConfig.externalDataSource?.enabled, tableConfig.externalDataSource?.tableName, onLoadTableColumns]);
|
||||
|
||||
// 저장 함수
|
||||
const handleSave = () => {
|
||||
onSave({
|
||||
|
|
@ -2986,6 +3094,98 @@ export function TableSectionSettingsModal({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 외부 데이터 소스 설정 */}
|
||||
<div className="space-y-3 border rounded-lg p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium">외부 데이터 소스</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
"데이터 전달 모달열기" 액션으로 전달받은 데이터를 테이블에 표시합니다.
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={tableConfig.externalDataSource?.enabled ?? false}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
updateExternalDataSource({ enabled: true, tableName: "" });
|
||||
} else {
|
||||
updateTableConfig({ externalDataSource: undefined });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{tableConfig.externalDataSource?.enabled && (
|
||||
<div className="space-y-3 pt-2">
|
||||
<div>
|
||||
<Label className="text-xs font-medium mb-1.5 block">외부 데이터 테이블</Label>
|
||||
<Popover open={externalTableSearchOpen} onOpenChange={setExternalTableSearchOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={externalTableSearchOpen}
|
||||
className="h-9 w-full justify-between text-sm"
|
||||
>
|
||||
{tableConfig.externalDataSource?.tableName || "테이블 선택..."}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-full min-w-[400px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="테이블 검색..." className="text-sm" />
|
||||
<CommandList className="max-h-[300px]">
|
||||
<CommandEmpty className="text-sm py-6 text-center">
|
||||
테이블을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tables.map((table) => (
|
||||
<CommandItem
|
||||
key={table.table_name}
|
||||
value={table.table_name}
|
||||
onSelect={() => {
|
||||
updateExternalDataSource({ enabled: true, tableName: table.table_name });
|
||||
onLoadTableColumns(table.table_name);
|
||||
setExternalTableSearchOpen(false);
|
||||
}}
|
||||
className="text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
tableConfig.externalDataSource?.tableName === table.table_name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{table.table_name}</span>
|
||||
{table.comment && (
|
||||
<span className="text-xs text-muted-foreground">{table.comment}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<HelpText>이전 화면에서 전달받을 데이터의 원본 테이블을 선택하세요. (예: 수주상세 데이터를 전달받는 경우 sales_order_detail)</HelpText>
|
||||
</div>
|
||||
|
||||
{tableConfig.externalDataSource?.tableName && externalTableColumns.length > 0 && (
|
||||
<div className="bg-muted/30 rounded-lg p-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
선택한 테이블 컬럼: {externalTableColumns.length}개
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground mt-1">
|
||||
"컬럼 설정" 탭에서 각 컬럼의 "외부 필드"를 설정하여 전달받은 데이터의 컬럼을 매핑하세요.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* 컬럼 설정 탭 */}
|
||||
|
|
@ -3041,6 +3241,9 @@ export function TableSectionSettingsModal({
|
|||
displayColumns={tableConfig.source.displayColumns || []}
|
||||
sourceTableColumns={sourceTableColumns}
|
||||
sourceTableName={tableConfig.source.tableName}
|
||||
externalTableColumns={externalTableColumns}
|
||||
externalTableName={tableConfig.externalDataSource?.tableName}
|
||||
externalDataEnabled={tableConfig.externalDataSource?.enabled}
|
||||
tables={tables}
|
||||
tableColumns={tableColumns}
|
||||
sections={otherSections}
|
||||
|
|
|
|||
|
|
@ -230,6 +230,12 @@ export interface TableSectionConfig {
|
|||
columnLabels?: Record<string, string>; // 컬럼 라벨 (컬럼명 -> 표시 라벨)
|
||||
};
|
||||
|
||||
// 1-1. 외부 데이터 소스 설정 (데이터 전달 모달열기 액션으로 전달받은 데이터)
|
||||
externalDataSource?: {
|
||||
enabled: boolean; // 외부 데이터 소스 사용 여부
|
||||
tableName: string; // 전달받을 데이터의 소스 테이블명 (예: sales_order_detail)
|
||||
};
|
||||
|
||||
// 2. 필터 설정
|
||||
filters?: {
|
||||
// 사전 필터 (항상 적용, 사용자에게 노출되지 않음)
|
||||
|
|
@ -374,6 +380,9 @@ export interface TableColumnConfig {
|
|||
// 소스 필드 매핑 (검색 모달에서 가져올 컬럼명)
|
||||
sourceField?: string; // 소스 테이블의 컬럼명 (미설정 시 field와 동일)
|
||||
|
||||
// 외부 데이터 필드 매핑 (데이터 전달 모달열기로 전달받은 데이터의 컬럼명)
|
||||
externalField?: string; // 외부 데이터의 컬럼명 (미설정 시 field와 동일)
|
||||
|
||||
// 편집 설정
|
||||
editable?: boolean; // 편집 가능 여부 (기본: true)
|
||||
calculated?: boolean; // 계산 필드 여부 (자동 읽기전용)
|
||||
|
|
|
|||
|
|
@ -95,24 +95,35 @@ export interface RestAPISourceNodeData {
|
|||
displayName?: string;
|
||||
}
|
||||
|
||||
// 조건 연산자 타입
|
||||
export type ConditionOperator =
|
||||
| "EQUALS"
|
||||
| "NOT_EQUALS"
|
||||
| "GREATER_THAN"
|
||||
| "LESS_THAN"
|
||||
| "GREATER_THAN_OR_EQUAL"
|
||||
| "LESS_THAN_OR_EQUAL"
|
||||
| "LIKE"
|
||||
| "NOT_LIKE"
|
||||
| "IN"
|
||||
| "NOT_IN"
|
||||
| "IS_NULL"
|
||||
| "IS_NOT_NULL"
|
||||
| "EXISTS_IN" // 다른 테이블에 존재함
|
||||
| "NOT_EXISTS_IN"; // 다른 테이블에 존재하지 않음
|
||||
|
||||
// 조건 분기 노드
|
||||
export interface ConditionNodeData {
|
||||
conditions: Array<{
|
||||
field: string;
|
||||
operator:
|
||||
| "EQUALS"
|
||||
| "NOT_EQUALS"
|
||||
| "GREATER_THAN"
|
||||
| "LESS_THAN"
|
||||
| "GREATER_THAN_OR_EQUAL"
|
||||
| "LESS_THAN_OR_EQUAL"
|
||||
| "LIKE"
|
||||
| "NOT_LIKE"
|
||||
| "IN"
|
||||
| "NOT_IN"
|
||||
| "IS_NULL"
|
||||
| "IS_NOT_NULL";
|
||||
operator: ConditionOperator;
|
||||
value: any;
|
||||
valueType?: "static" | "field"; // 비교 값 타입
|
||||
// EXISTS_IN / NOT_EXISTS_IN 전용 필드
|
||||
lookupTable?: string; // 조회할 테이블명
|
||||
lookupTableLabel?: string; // 조회할 테이블 라벨
|
||||
lookupField?: string; // 조회할 테이블의 비교 필드
|
||||
lookupFieldLabel?: string; // 조회할 테이블의 비교 필드 라벨
|
||||
}>;
|
||||
logic: "AND" | "OR";
|
||||
displayName?: string;
|
||||
|
|
|
|||
Loading…
Reference in New Issue