Merge remote-tracking branch 'upstream/main'
This commit is contained in:
dohyeons
commit
3862559bd8
|
|
@ -0,0 +1,209 @@
|
|||
---
|
||||
alwaysApply: true
|
||||
description: API 요청 시 항상 전용 API 클라이언트를 사용하도록 강제하는 규칙
|
||||
---
|
||||
|
||||
# API 클라이언트 사용 규칙
|
||||
|
||||
## 핵심 원칙
|
||||
|
||||
**절대 `fetch`를 직접 사용하지 않고, 반드시 전용 API 클라이언트를 사용해야 합니다.**
|
||||
|
||||
## 이유
|
||||
|
||||
1. **환경별 URL 자동 처리**: 프로덕션(`v1.vexplor.com`)과 개발(`localhost`) 환경에서 올바른 백엔드 서버로 요청
|
||||
2. **일관된 에러 처리**: 모든 API 호출에서 동일한 에러 핸들링
|
||||
3. **인증 토큰 자동 포함**: Authorization 헤더 자동 추가
|
||||
4. **유지보수성**: API 변경 시 한 곳에서만 수정
|
||||
|
||||
## API 클라이언트 위치
|
||||
|
||||
```
|
||||
frontend/lib/api/
|
||||
├── client.ts # Axios 기반 공통 클라이언트
|
||||
├── flow.ts # 플로우 관리 API
|
||||
├── dashboard.ts # 대시보드 API
|
||||
├── mail.ts # 메일 API
|
||||
├── externalCall.ts # 외부 호출 API
|
||||
├── company.ts # 회사 관리 API
|
||||
└── file.ts # 파일 업로드/다운로드 API
|
||||
```
|
||||
|
||||
## 올바른 사용법
|
||||
|
||||
### ❌ 잘못된 방법 (절대 사용 금지)
|
||||
|
||||
```typescript
|
||||
// 직접 fetch 사용 - 환경별 URL이 자동 처리되지 않음
|
||||
const response = await fetch("/api/flow/definitions/29/steps");
|
||||
const data = await response.json();
|
||||
|
||||
// 상대 경로 - 프로덕션에서 잘못된 도메인으로 요청
|
||||
const response = await fetch(`/api/flow/${flowId}/steps`);
|
||||
```
|
||||
|
||||
### ✅ 올바른 방법
|
||||
|
||||
```typescript
|
||||
// 1. API 클라이언트 함수 import
|
||||
import { getFlowSteps } from "@/lib/api/flow";
|
||||
|
||||
// 2. 함수 호출
|
||||
const stepsResponse = await getFlowSteps(flowId);
|
||||
if (stepsResponse.success && stepsResponse.data) {
|
||||
setSteps(stepsResponse.data);
|
||||
}
|
||||
```
|
||||
|
||||
## 주요 API 클라이언트 함수
|
||||
|
||||
### 플로우 관리 ([flow.ts](mdc:frontend/lib/api/flow.ts))
|
||||
|
||||
```typescript
|
||||
import {
|
||||
getFlowDefinitions, // 플로우 목록
|
||||
getFlowById, // 플로우 상세
|
||||
createFlowDefinition, // 플로우 생성
|
||||
updateFlowDefinition, // 플로우 수정
|
||||
deleteFlowDefinition, // 플로우 삭제
|
||||
getFlowSteps, // 스텝 목록 ⭐
|
||||
createFlowStep, // 스텝 생성
|
||||
updateFlowStep, // 스텝 수정
|
||||
deleteFlowStep, // 스텝 삭제
|
||||
getFlowConnections, // 연결 목록 ⭐
|
||||
createFlowConnection, // 연결 생성
|
||||
deleteFlowConnection, // 연결 삭제
|
||||
getStepDataCount, // 스텝 데이터 카운트
|
||||
getStepDataList, // 스텝 데이터 목록
|
||||
getAllStepCounts, // 모든 스텝 카운트
|
||||
moveData, // 데이터 이동
|
||||
moveBatchData, // 배치 데이터 이동
|
||||
getAuditLogs, // 오딧 로그
|
||||
} from "@/lib/api/flow";
|
||||
```
|
||||
|
||||
### Axios 클라이언트 ([client.ts](mdc:frontend/lib/api/client.ts))
|
||||
|
||||
```typescript
|
||||
import apiClient from "@/lib/api/client";
|
||||
|
||||
// GET 요청
|
||||
const response = await apiClient.get("/api/endpoint");
|
||||
|
||||
// POST 요청
|
||||
const response = await apiClient.post("/api/endpoint", { data });
|
||||
|
||||
// PUT 요청
|
||||
const response = await apiClient.put("/api/endpoint", { data });
|
||||
|
||||
// DELETE 요청
|
||||
const response = await apiClient.delete("/api/endpoint");
|
||||
```
|
||||
|
||||
## 새로운 API 함수 추가 가이드
|
||||
|
||||
기존 API 클라이언트에 함수가 없는 경우:
|
||||
|
||||
```typescript
|
||||
// frontend/lib/api/yourModule.ts
|
||||
|
||||
// 1. API URL 동적 설정 (필수)
|
||||
const getApiBaseUrl = (): string => {
|
||||
if (process.env.NEXT_PUBLIC_API_URL) {
|
||||
return process.env.NEXT_PUBLIC_API_URL;
|
||||
}
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
const currentHost = window.location.hostname;
|
||||
|
||||
// 프로덕션: v1.vexplor.com → api.vexplor.com
|
||||
if (currentHost === "v1.vexplor.com") {
|
||||
return "https://api.vexplor.com/api";
|
||||
}
|
||||
|
||||
// 로컬 개발
|
||||
if (currentHost === "localhost" || currentHost === "127.0.0.1") {
|
||||
return "http://localhost:8080/api";
|
||||
}
|
||||
}
|
||||
|
||||
return "/api";
|
||||
};
|
||||
|
||||
const API_BASE = getApiBaseUrl();
|
||||
|
||||
// 2. API 함수 작성
|
||||
export async function getYourData(id: number): Promise<ApiResponse<YourType>> {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/your-endpoint/${id}`, {
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
return await response.json();
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: error.message,
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 환경별 URL 매핑
|
||||
|
||||
API 클라이언트는 자동으로 환경을 감지합니다:
|
||||
|
||||
| 현재 호스트 | 백엔드 API URL |
|
||||
| ---------------- | ----------------------------- |
|
||||
| `v1.vexplor.com` | `https://api.vexplor.com/api` |
|
||||
| `localhost:9771` | `http://localhost:8080/api` |
|
||||
| `localhost:3000` | `http://localhost:8080/api` |
|
||||
|
||||
## 체크리스트
|
||||
|
||||
코드 작성 시 다음을 확인하세요:
|
||||
|
||||
- [ ] `fetch('/api/...')` 직접 사용하지 않음
|
||||
- [ ] 적절한 API 클라이언트 함수를 import 함
|
||||
- [ ] API 응답의 `success` 필드를 체크함
|
||||
- [ ] 에러 처리를 구현함
|
||||
- [ ] 새로운 API가 필요하면 `lib/api/` 에 함수 추가
|
||||
|
||||
## 예외 상황
|
||||
|
||||
다음 경우에만 `fetch`를 직접 사용할 수 있습니다:
|
||||
|
||||
1. **외부 서비스 호출**: 다른 도메인의 API 호출 시
|
||||
2. **특수한 헤더가 필요한 경우**: FormData, Blob 등
|
||||
|
||||
이 경우에도 가능하면 전용 API 클라이언트 함수로 래핑하세요.
|
||||
|
||||
## 실제 적용 예시
|
||||
|
||||
### 플로우 위젯 ([FlowWidget.tsx](mdc:frontend/components/screen/widgets/FlowWidget.tsx))
|
||||
|
||||
```typescript
|
||||
// ❌ 이전 코드
|
||||
const stepsResponse = await fetch(`/api/flow/definitions/${flowId}/steps`);
|
||||
const connectionsResponse = await fetch(`/api/flow/connections/${flowId}`);
|
||||
|
||||
// ✅ 수정된 코드
|
||||
const stepsResponse = await getFlowSteps(flowId);
|
||||
const connectionsResponse = await getFlowConnections(flowId);
|
||||
```
|
||||
|
||||
### 플로우 가시성 패널 ([FlowVisibilityConfigPanel.tsx](mdc:frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx))
|
||||
|
||||
```typescript
|
||||
// ❌ 이전 코드
|
||||
const stepsResponse = await fetch(`/api/flow/definitions/${flowId}/steps`);
|
||||
|
||||
// ✅ 수정된 코드
|
||||
const stepsResponse = await getFlowSteps(flowId);
|
||||
```
|
||||
|
||||
## 참고 자료
|
||||
|
||||
- [API 클라이언트 공통 설정](mdc:frontend/lib/api/client.ts)
|
||||
- [플로우 API 클라이언트](mdc:frontend/lib/api/flow.ts)
|
||||
- [API URL 유틸리티](mdc:frontend/lib/utils/apiUrl.ts)
|
||||
|
|
@ -0,0 +1,343 @@
|
|||
# 고정 헤더 테이블 표준 가이드
|
||||
|
||||
## 개요
|
||||
|
||||
스크롤 가능한 테이블에서 헤더를 상단에 고정하는 표준 구조입니다.
|
||||
플로우 위젯의 스텝 데이터 리스트 테이블을 참조 기준으로 합니다.
|
||||
|
||||
## 필수 구조
|
||||
|
||||
### 1. 기본 HTML 구조
|
||||
|
||||
```tsx
|
||||
<div className="relative overflow-auto" style={{ height: "450px" }}>
|
||||
<Table noWrapper>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="bg-background sticky top-0 z-10 border-b shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
|
||||
헤더 1
|
||||
</TableHead>
|
||||
<TableHead className="bg-background sticky top-0 z-10 border-b shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
|
||||
헤더 2
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>{/* 데이터 행들 */}</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 2. 필수 클래스 설명
|
||||
|
||||
#### 스크롤 컨테이너 (외부 div)
|
||||
|
||||
```tsx
|
||||
className="relative overflow-auto"
|
||||
style={{ height: "450px" }}
|
||||
```
|
||||
|
||||
**필수 요소:**
|
||||
|
||||
- `relative`: sticky positioning의 기준점
|
||||
- `overflow-auto`: 스크롤 활성화
|
||||
- `height`: 고정 높이 (인라인 스타일 또는 Tailwind 클래스)
|
||||
|
||||
#### Table 컴포넌트
|
||||
|
||||
```tsx
|
||||
<Table noWrapper>
|
||||
```
|
||||
|
||||
**필수 props:**
|
||||
|
||||
- `noWrapper`: Table 컴포넌트의 내부 wrapper 제거 (매우 중요!)
|
||||
- 이것이 없으면 sticky header가 작동하지 않음
|
||||
|
||||
#### TableHead (헤더 셀)
|
||||
|
||||
```tsx
|
||||
className =
|
||||
"bg-background sticky top-0 z-10 border-b shadow-[0_1px_0_0_rgb(0,0,0,0.1)]";
|
||||
```
|
||||
|
||||
**필수 클래스:**
|
||||
|
||||
- `bg-background`: 배경색 (스크롤 시 데이터가 보이지 않도록)
|
||||
- `sticky top-0`: 상단 고정
|
||||
- `z-10`: 다른 요소 위에 표시
|
||||
- `border-b`: 하단 테두리
|
||||
- `shadow-[0_1px_0_0_rgb(0,0,0,0.1)]`: 얇은 그림자 (헤더와 본문 구분)
|
||||
|
||||
### 3. 왼쪽 열 고정 (체크박스 등)
|
||||
|
||||
첫 번째 열도 고정하려면:
|
||||
|
||||
```tsx
|
||||
<TableHead className="bg-background sticky top-0 left-0 z-20 border-b shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
|
||||
<Checkbox />
|
||||
</TableHead>
|
||||
```
|
||||
|
||||
**z-index 규칙:**
|
||||
|
||||
- 왼쪽+상단 고정: `z-20`
|
||||
- 상단만 고정: `z-10`
|
||||
- 왼쪽만 고정: `z-10`
|
||||
- 일반 셀: z-index 없음
|
||||
|
||||
### 4. 완전한 예제 (체크박스 포함)
|
||||
|
||||
```tsx
|
||||
<div className="relative overflow-auto" style={{ height: "450px" }}>
|
||||
<Table noWrapper>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{/* 왼쪽 고정 체크박스 열 */}
|
||||
<TableHead className="bg-background sticky top-0 left-0 z-20 w-12 border-b px-3 py-2 text-center shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
|
||||
<Checkbox checked={allSelected} onCheckedChange={handleSelectAll} />
|
||||
</TableHead>
|
||||
|
||||
{/* 일반 헤더 열들 */}
|
||||
{columns.map((col) => (
|
||||
<TableHead
|
||||
key={col}
|
||||
className="bg-background sticky top-0 z-10 border-b px-3 py-2 text-xs font-semibold whitespace-nowrap shadow-[0_1px_0_0_rgb(0,0,0,0.1)] sm:text-sm"
|
||||
>
|
||||
{col}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{data.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
{/* 왼쪽 고정 체크박스 */}
|
||||
<TableCell className="bg-background sticky left-0 z-10 border-b px-3 py-2 text-center">
|
||||
<Checkbox
|
||||
checked={selectedRows.has(index)}
|
||||
onCheckedChange={() => toggleRow(index)}
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
{/* 데이터 셀들 */}
|
||||
{columns.map((col) => (
|
||||
<TableCell key={col} className="border-b px-3 py-2">
|
||||
{row[col]}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 반응형 대응
|
||||
|
||||
### 모바일: 카드 뷰
|
||||
|
||||
```tsx
|
||||
{
|
||||
/* 모바일: 카드 뷰 */
|
||||
}
|
||||
<div className="overflow-y-auto sm:hidden" style={{ height: "450px" }}>
|
||||
<div className="space-y-2 p-3">
|
||||
{data.map((item, index) => (
|
||||
<div key={index} className="bg-card rounded-md border p-3">
|
||||
{/* 카드 내용 */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
{
|
||||
/* 데스크톱: 테이블 뷰 */
|
||||
}
|
||||
<div
|
||||
className="relative hidden overflow-auto sm:block"
|
||||
style={{ height: "450px" }}
|
||||
>
|
||||
<Table noWrapper>{/* 위의 테이블 구조 */}</Table>
|
||||
</div>;
|
||||
```
|
||||
|
||||
## 자주하는 실수
|
||||
|
||||
### ❌ 잘못된 예시
|
||||
|
||||
```tsx
|
||||
{
|
||||
/* 1. noWrapper 없음 - sticky 작동 안함 */
|
||||
}
|
||||
<Table>
|
||||
<TableHeader>...</TableHeader>
|
||||
</Table>;
|
||||
|
||||
{
|
||||
/* 2. 배경색 없음 - 스크롤 시 데이터가 보임 */
|
||||
}
|
||||
<TableHead className="sticky top-0">헤더</TableHead>;
|
||||
|
||||
{
|
||||
/* 3. relative 없음 - sticky 기준점 없음 */
|
||||
}
|
||||
<div className="overflow-auto">
|
||||
<Table noWrapper>...</Table>
|
||||
</div>;
|
||||
|
||||
{
|
||||
/* 4. 고정 높이 없음 - 스크롤 발생 안함 */
|
||||
}
|
||||
<div className="relative overflow-auto">
|
||||
<Table noWrapper>...</Table>
|
||||
</div>;
|
||||
```
|
||||
|
||||
### ✅ 올바른 예시
|
||||
|
||||
```tsx
|
||||
{
|
||||
/* 모든 필수 요소 포함 */
|
||||
}
|
||||
<div className="relative overflow-auto" style={{ height: "450px" }}>
|
||||
<Table noWrapper>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="bg-background sticky top-0 z-10 border-b shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
|
||||
헤더
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>...</TableBody>
|
||||
</Table>
|
||||
</div>;
|
||||
```
|
||||
|
||||
## 높이 설정 가이드
|
||||
|
||||
### 권장 높이값
|
||||
|
||||
- **소형 리스트**: `300px` ~ `400px`
|
||||
- **중형 리스트**: `450px` ~ `600px` (플로우 위젯 기준)
|
||||
- **대형 리스트**: `calc(100vh - 200px)` (화면 높이 기준)
|
||||
|
||||
### 동적 높이 계산
|
||||
|
||||
```tsx
|
||||
// 화면 높이의 60%
|
||||
style={{ height: "60vh" }}
|
||||
|
||||
// 화면 높이 - 헤더/푸터 제외
|
||||
style={{ height: "calc(100vh - 250px)" }}
|
||||
|
||||
// 부모 요소 기준
|
||||
className="h-full overflow-auto"
|
||||
```
|
||||
|
||||
## 성능 최적화
|
||||
|
||||
### 1. 가상 스크롤 (대량 데이터)
|
||||
|
||||
데이터가 1000건 이상인 경우 `react-virtual` 사용 권장:
|
||||
|
||||
```tsx
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const rowVirtualizer = useVirtualizer({
|
||||
count: data.length,
|
||||
getScrollElement: () => parentRef.current,
|
||||
estimateSize: () => 50, // 행 높이
|
||||
});
|
||||
```
|
||||
|
||||
### 2. 페이지네이션
|
||||
|
||||
대량 데이터는 페이지 단위로 렌더링:
|
||||
|
||||
```tsx
|
||||
const paginatedData = data.slice((page - 1) * pageSize, page * pageSize);
|
||||
```
|
||||
|
||||
## 접근성
|
||||
|
||||
### ARIA 레이블
|
||||
|
||||
```tsx
|
||||
<div
|
||||
className="relative overflow-auto"
|
||||
style={{ height: "450px" }}
|
||||
role="region"
|
||||
aria-label="스크롤 가능한 데이터 테이블"
|
||||
tabIndex={0}
|
||||
>
|
||||
<Table noWrapper aria-label="데이터 목록">
|
||||
{/* 테이블 내용 */}
|
||||
</Table>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 키보드 네비게이션
|
||||
|
||||
```tsx
|
||||
<TableRow
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
handleRowClick();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* 행 내용 */}
|
||||
</TableRow>
|
||||
```
|
||||
|
||||
## 다크 모드 대응
|
||||
|
||||
### 배경색
|
||||
|
||||
```tsx
|
||||
{
|
||||
/* 라이트/다크 모드 모두 대응 */
|
||||
}
|
||||
className = "bg-background"; // ✅ 권장
|
||||
|
||||
{
|
||||
/* 고정 색상 - 다크 모드 문제 */
|
||||
}
|
||||
className = "bg-white"; // ❌ 비권장
|
||||
```
|
||||
|
||||
### 그림자
|
||||
|
||||
```tsx
|
||||
{
|
||||
/* 다크 모드에서도 보이는 그림자 */
|
||||
}
|
||||
className = "shadow-[0_1px_0_0_hsl(var(--border))]";
|
||||
|
||||
{
|
||||
/* 또는 */
|
||||
}
|
||||
className = "shadow-[0_1px_0_0_rgb(0,0,0,0.1)]";
|
||||
```
|
||||
|
||||
## 참조 파일
|
||||
|
||||
- **구현 예시**: `frontend/components/screen/widgets/FlowWidget.tsx` (line 760-820)
|
||||
- **Table 컴포넌트**: `frontend/components/ui/table.tsx`
|
||||
|
||||
## 체크리스트
|
||||
|
||||
테이블 구현 시 다음을 확인하세요:
|
||||
|
||||
- [ ] 외부 div에 `relative overflow-auto` 적용
|
||||
- [ ] 외부 div에 고정 높이 설정
|
||||
- [ ] `<Table noWrapper>` 사용
|
||||
- [ ] TableHead에 `bg-background sticky top-0 z-10` 적용
|
||||
- [ ] TableHead에 `border-b shadow-[...]` 적용
|
||||
- [ ] 왼쪽 고정 열은 `z-20` 사용
|
||||
- [ ] 모바일 반응형 대응 (카드 뷰)
|
||||
- [ ] 다크 모드 호환 색상 사용
|
||||
|
|
@ -105,7 +105,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-gray-50">
|
||||
<div className="h-screen">
|
||||
{/* 대시보드 헤더 - 보기 모드에서는 숨김 */}
|
||||
{/* <div className="border-b border-gray-200 bg-white px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
|
|||
|
|
@ -73,6 +73,9 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
|
|||
|
||||
// 연결 정보가 변경될 때 폼 데이터 업데이트
|
||||
useEffect(() => {
|
||||
// 테스트 관련 상태 초기화
|
||||
setTestResult(null);
|
||||
|
||||
if (connection) {
|
||||
setFormData({
|
||||
...connection,
|
||||
|
|
@ -304,7 +307,9 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
|
|||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-h-[90vh] max-w-[95vw] overflow-y-auto sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">{isEditMode ? "연결 정보 수정" : "새 외부 DB 연결 추가"}</DialogTitle>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{isEditMode ? "연결 정보 수정" : "새 외부 DB 연결 추가"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
|
|
@ -437,7 +442,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
|
|||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
|
|
@ -464,7 +469,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
|
|||
>
|
||||
{testingConnection ? "테스트 중..." : "연결 테스트"}
|
||||
</Button>
|
||||
{testingConnection && <div className="text-sm text-gray-500">연결을 확인하고 있습니다...</div>}
|
||||
{testingConnection && <div className="text-muted-foreground text-sm">연결을 확인하고 있습니다...</div>}
|
||||
</div>
|
||||
|
||||
{/* 테스트 결과 표시 */}
|
||||
|
|
@ -492,7 +497,9 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
|
|||
{!testResult.success && testResult.error && (
|
||||
<div className="mt-2 text-xs">
|
||||
<div>오류 코드: {testResult.error.code}</div>
|
||||
{testResult.error.details && <div className="mt-1 text-destructive">{testResult.error.details}</div>}
|
||||
{testResult.error.details && (
|
||||
<div className="text-destructive mt-1">{testResult.error.details}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -602,7 +609,11 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
|
|||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={loading} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
{loading ? "저장 중..." : isEditMode ? "수정" : "생성"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ export function RestApiConnectionList() {
|
|||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
{/* 검색 */}
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
placeholder="연결명 또는 URL로 검색..."
|
||||
value={searchTerm}
|
||||
|
|
@ -246,27 +246,26 @@ export function RestApiConnectionList() {
|
|||
|
||||
{/* 추가 버튼 */}
|
||||
<Button onClick={handleAddConnection} className="h-10 gap-2 text-sm font-medium">
|
||||
<Plus className="h-4 w-4" />
|
||||
새 연결 추가
|
||||
<Plus className="h-4 w-4" />새 연결 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 연결 목록 */}
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center rounded-lg border bg-card shadow-sm">
|
||||
<div className="text-sm text-muted-foreground">로딩 중...</div>
|
||||
<div className="bg-card flex h-64 items-center justify-center rounded-lg border shadow-sm">
|
||||
<div className="text-muted-foreground text-sm">로딩 중...</div>
|
||||
</div>
|
||||
) : connections.length === 0 ? (
|
||||
<div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
|
||||
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<p className="text-sm text-muted-foreground">등록된 REST API 연결이 없습니다</p>
|
||||
<p className="text-muted-foreground text-sm">등록된 REST API 연결이 없습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg border bg-card shadow-sm">
|
||||
<div className="bg-card rounded-lg border shadow-sm">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
|
||||
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
|
||||
<TableHead className="h-12 text-sm font-semibold">연결명</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">기본 URL</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">인증 타입</TableHead>
|
||||
|
|
@ -279,18 +278,26 @@ export function RestApiConnectionList() {
|
|||
</TableHeader>
|
||||
<TableBody>
|
||||
{connections.map((connection) => (
|
||||
<TableRow key={connection.id} className="border-b transition-colors hover:bg-muted/50">
|
||||
<TableRow key={connection.id} className="hover:bg-muted/50 border-b transition-colors">
|
||||
<TableCell className="h-16 text-sm">
|
||||
<div className="font-medium">{connection.connection_name}</div>
|
||||
<div className="max-w-[200px]">
|
||||
<div className="truncate font-medium" title={connection.connection_name}>
|
||||
{connection.connection_name}
|
||||
</div>
|
||||
{connection.description && (
|
||||
<div className="mt-1 text-xs text-muted-foreground">{connection.description}</div>
|
||||
<div className="text-muted-foreground mt-1 truncate text-xs" title={connection.description}>
|
||||
{connection.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 font-mono text-sm">
|
||||
<div className="max-w-[300px] truncate" title={connection.base_url}>
|
||||
{connection.base_url}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 font-mono text-sm">{connection.base_url}</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<Badge variant="outline">
|
||||
{AUTH_TYPE_LABELS[connection.auth_type] || connection.auth_type}
|
||||
</Badge>
|
||||
<Badge variant="outline">{AUTH_TYPE_LABELS[connection.auth_type] || connection.auth_type}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-center text-sm">
|
||||
{Object.keys(connection.default_headers || {}).length}
|
||||
|
|
@ -347,7 +354,7 @@ export function RestApiConnectionList() {
|
|||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteConnection(connection)}
|
||||
className="h-8 w-8 text-destructive hover:bg-destructive/10"
|
||||
className="text-destructive hover:bg-destructive/10 h-8 w-8"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
@ -377,8 +384,7 @@ export function RestApiConnectionList() {
|
|||
<AlertDialogTitle className="text-base sm:text-lg">연결 삭제 확인</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-xs sm:text-sm">
|
||||
"{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
|
||||
<br />
|
||||
이 작업은 되돌릴 수 없습니다.
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter className="gap-2 sm:gap-0">
|
||||
|
|
@ -390,7 +396,7 @@ export function RestApiConnectionList() {
|
|||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmDeleteConnection}
|
||||
className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
|
||||
className="bg-destructive hover:bg-destructive/90 h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
const [testEndpoint, setTestEndpoint] = useState("");
|
||||
const [testing, setTesting] = useState(false);
|
||||
const [testResult, setTestResult] = useState<RestApiTestResult | null>(null);
|
||||
const [testRequestUrl, setTestRequestUrl] = useState<string>("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// 기존 연결 데이터 로드
|
||||
|
|
@ -77,6 +78,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
|
||||
setTestResult(null);
|
||||
setTestEndpoint("");
|
||||
setTestRequestUrl("");
|
||||
}, [connection, isOpen]);
|
||||
|
||||
// 연결 테스트
|
||||
|
|
@ -94,6 +96,10 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
setTesting(true);
|
||||
setTestResult(null);
|
||||
|
||||
// 사용자가 테스트하려는 실제 외부 API URL 설정
|
||||
const fullUrl = testEndpoint ? `${baseUrl}${testEndpoint}` : baseUrl;
|
||||
setTestRequestUrl(fullUrl);
|
||||
|
||||
try {
|
||||
const result = await ExternalRestApiConnectionAPI.testConnection({
|
||||
base_url: baseUrl,
|
||||
|
|
@ -220,7 +226,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="connection-name">
|
||||
연결명 <span className="text-red-500">*</span>
|
||||
연결명 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="connection-name"
|
||||
|
|
@ -243,7 +249,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="base-url">
|
||||
기본 URL <span className="text-red-500">*</span>
|
||||
기본 URL <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="base-url"
|
||||
|
|
@ -283,14 +289,14 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||||
className="flex items-center space-x-2 text-sm font-semibold hover:text-blue-600"
|
||||
className="hover:text-primary flex items-center space-x-2 text-sm font-semibold transition-colors"
|
||||
>
|
||||
<span>고급 설정</span>
|
||||
{showAdvanced ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</button>
|
||||
|
||||
{showAdvanced && (
|
||||
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
||||
<div className="bg-muted space-y-4 rounded-md border p-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="timeout">타임아웃 (ms)</Label>
|
||||
|
|
@ -342,7 +348,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
id="test-endpoint"
|
||||
value={testEndpoint}
|
||||
onChange={(e) => setTestEndpoint(e.target.value)}
|
||||
placeholder="/api/v1/test 또는 빈칸 (기본 URL만 테스트)"
|
||||
placeholder="엔드포인트 또는 빈칸(기본 URL만 테스트)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -351,6 +357,41 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
{testing ? "테스트 중..." : "연결 테스트"}
|
||||
</Button>
|
||||
|
||||
{/* 테스트 요청 정보 표시 */}
|
||||
{testRequestUrl && (
|
||||
<div className="bg-muted/30 space-y-3 rounded-md border p-3">
|
||||
<div>
|
||||
<div className="text-muted-foreground mb-1 text-xs font-medium">테스트 요청 URL</div>
|
||||
<code className="text-foreground block text-xs break-all">GET {testRequestUrl}</code>
|
||||
</div>
|
||||
|
||||
{Object.keys(defaultHeaders).length > 0 && (
|
||||
<div>
|
||||
<div className="text-muted-foreground mb-1 text-xs font-medium">요청 헤더</div>
|
||||
<div className="space-y-1">
|
||||
{Object.entries(defaultHeaders).map(([key, value]) => (
|
||||
<code key={key} className="text-foreground block text-xs">
|
||||
{key}: {value}
|
||||
</code>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{authType !== "none" && (
|
||||
<div>
|
||||
<div className="text-muted-foreground mb-1 text-xs font-medium">인증 방식</div>
|
||||
<code className="text-foreground block text-xs">
|
||||
{authType === "api-key" && "API Key"}
|
||||
{authType === "bearer" && "Bearer Token"}
|
||||
{authType === "basic" && "Basic Auth"}
|
||||
{authType === "oauth2" && "OAuth 2.0"}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{testResult && (
|
||||
<div
|
||||
className={`rounded-md border p-4 ${
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { DashboardElement, QueryResult, ChartData } from "../types";
|
||||
import { Chart } from "./Chart";
|
||||
import { transformQueryResultToChartData } from "../utils/chartDataTransform";
|
||||
|
|
@ -21,11 +21,39 @@ interface ChartRendererProps {
|
|||
* - QueryResult를 ChartData로 변환
|
||||
* - D3 Chart 컴포넌트에 전달
|
||||
*/
|
||||
export function ChartRenderer({ element, data, width = 250, height = 200 }: ChartRendererProps) {
|
||||
export function ChartRenderer({ element, data, width, height = 200 }: ChartRendererProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [containerWidth, setContainerWidth] = useState(width || 250);
|
||||
const [chartData, setChartData] = useState<ChartData | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// 컨테이너 너비 측정 (width가 undefined일 때)
|
||||
useEffect(() => {
|
||||
if (width !== undefined) {
|
||||
setContainerWidth(width);
|
||||
return;
|
||||
}
|
||||
|
||||
const updateWidth = () => {
|
||||
if (containerRef.current) {
|
||||
const measuredWidth = containerRef.current.offsetWidth;
|
||||
console.log("📏 컨테이너 너비 측정:", measuredWidth);
|
||||
setContainerWidth(measuredWidth || 500); // 기본값 500
|
||||
}
|
||||
};
|
||||
|
||||
// 약간의 지연을 두고 측정 (DOM 렌더링 완료 후)
|
||||
const timer = setTimeout(updateWidth, 100);
|
||||
updateWidth();
|
||||
|
||||
window.addEventListener("resize", updateWidth);
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
window.removeEventListener("resize", updateWidth);
|
||||
};
|
||||
}, [width]);
|
||||
|
||||
// 데이터 페칭
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
|
|
@ -212,15 +240,39 @@ export function ChartRenderer({ element, data, width = 250, height = 200 }: Char
|
|||
}
|
||||
|
||||
// D3 차트 렌더링
|
||||
const actualWidth = width !== undefined ? width : containerWidth;
|
||||
|
||||
// 원형 차트는 더 큰 크기가 필요 (최소 400px)
|
||||
const isCircularChart = element.subtype === "pie" || element.subtype === "donut";
|
||||
const minWidth = isCircularChart ? 400 : 200;
|
||||
const finalWidth = Math.max(actualWidth - 20, minWidth);
|
||||
// 원형 차트는 범례 공간을 위해 더 많은 여백 필요
|
||||
const finalHeight = Math.max(height - (isCircularChart ? 60 : 20), 300);
|
||||
|
||||
console.log("🎨 ChartRenderer:", {
|
||||
elementSubtype: element.subtype,
|
||||
propWidth: width,
|
||||
containerWidth,
|
||||
actualWidth,
|
||||
finalWidth,
|
||||
finalHeight,
|
||||
hasChartData: !!chartData,
|
||||
chartDataLabels: chartData?.labels,
|
||||
chartDataDatasets: chartData?.datasets?.length,
|
||||
isCircularChart,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center bg-white p-2">
|
||||
<div ref={containerRef} className="flex h-full w-full items-center justify-center bg-white p-2">
|
||||
<div className="flex items-center justify-center">
|
||||
<Chart
|
||||
chartType={element.subtype}
|
||||
data={chartData}
|
||||
config={element.chartConfig}
|
||||
width={width - 20}
|
||||
height={height - 20}
|
||||
width={finalWidth}
|
||||
height={finalHeight}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,12 +24,17 @@ export function PieChart({ data, config, width = 500, height = 500, isDonut = fa
|
|||
const svg = d3.select(svgRef.current);
|
||||
svg.selectAll("*").remove();
|
||||
|
||||
const margin = { top: 40, right: 150, bottom: 40, left: 120 };
|
||||
// 범례를 위한 여백 확보 (아래 80px)
|
||||
const legendHeight = config.showLegend !== false ? 80 : 0;
|
||||
const margin = { top: 20, right: 20, bottom: 20 + legendHeight, left: 20 };
|
||||
const chartWidth = width - margin.left - margin.right;
|
||||
const chartHeight = height - margin.top - margin.bottom;
|
||||
const chartHeight = height - margin.top - margin.bottom - legendHeight;
|
||||
const radius = Math.min(chartWidth, chartHeight) / 2;
|
||||
|
||||
const g = svg.append("g").attr("transform", `translate(${width / 2},${height / 2})`);
|
||||
// 차트를 위쪽에 배치 (범례 공간 확보)
|
||||
const centerX = width / 2;
|
||||
const centerY = margin.top + radius + 20;
|
||||
const g = svg.append("g").attr("transform", `translate(${centerX},${centerY})`);
|
||||
|
||||
// 색상 팔레트
|
||||
const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B", "#8B5CF6", "#EC4899"];
|
||||
|
|
@ -136,33 +141,35 @@ export function PieChart({ data, config, width = 500, height = 500, isDonut = fa
|
|||
.text(config.title);
|
||||
}
|
||||
|
||||
// 범례 (차트 오른쪽, 세로 배치)
|
||||
// 범례 (차트 아래, 가로 배치, 중앙 정렬)
|
||||
if (config.showLegend !== false) {
|
||||
const legendX = width / 2 + radius + 30; // 차트 오른쪽
|
||||
const legendY = (height - pieData.length * 25) / 2; // 세로 중앙 정렬
|
||||
const itemSpacing = 100; // 각 범례 항목 사이 간격 (줄임)
|
||||
const totalWidth = pieData.length * itemSpacing;
|
||||
const legendStartX = (width - totalWidth) / 2; // 시작 위치
|
||||
const legendY = centerY + radius + 40; // 차트 아래 40px
|
||||
|
||||
const legend = svg
|
||||
.append("g")
|
||||
.attr("class", "legend")
|
||||
.attr("transform", `translate(${legendX}, ${legendY})`);
|
||||
const legend = svg.append("g").attr("class", "legend");
|
||||
|
||||
pieData.forEach((d, i) => {
|
||||
const legendItem = legend
|
||||
.append("g")
|
||||
.attr("transform", `translate(0, ${i * 25})`);
|
||||
.attr("transform", `translate(${legendStartX + i * itemSpacing + itemSpacing / 2}, ${legendY})`);
|
||||
|
||||
legendItem
|
||||
.append("rect")
|
||||
.attr("width", 15)
|
||||
.attr("height", 15)
|
||||
.attr("x", -6) // 사각형을 중앙 기준으로
|
||||
.attr("y", -6)
|
||||
.attr("width", 12)
|
||||
.attr("height", 12)
|
||||
.attr("fill", colors[i % colors.length])
|
||||
.attr("rx", 3);
|
||||
.attr("rx", 2);
|
||||
|
||||
legendItem
|
||||
.append("text")
|
||||
.attr("x", 20)
|
||||
.attr("y", 12)
|
||||
.style("font-size", "11px")
|
||||
.attr("x", 0)
|
||||
.attr("y", 18)
|
||||
.attr("text-anchor", "middle") // 텍스트 중앙 정렬
|
||||
.style("font-size", "10px")
|
||||
.style("fill", "#333")
|
||||
.text(`${d.label} (${d.value})`);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -111,7 +111,8 @@ export function ClockWidget({ element, onConfigUpdate }: ClockWidgetProps) {
|
|||
{/* 시계 콘텐츠 */}
|
||||
{renderClockContent()}
|
||||
|
||||
{/* 설정 버튼 - 우측 상단 */}
|
||||
{/* 설정 버튼 - 우측 상단 (디자이너 모드에서만 표시) */}
|
||||
{onConfigUpdate && (
|
||||
<div className="absolute top-2 right-2">
|
||||
<Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
|
|
@ -124,6 +125,7 @@ export function ClockWidget({ element, onConfigUpdate }: ClockWidgetProps) {
|
|||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -216,12 +216,7 @@ export function ListWidget({ element }: ListWidgetProps) {
|
|||
const paginatedRows = config.enablePagination ? data.rows.slice(startIdx, endIdx) : data.rows;
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col p-4">
|
||||
{/* 제목 - 항상 표시 */}
|
||||
<div className="mb-4">
|
||||
<h3 className="text-sm font-semibold text-gray-700">{element.customTitle || element.title}</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex h-full w-full flex-col gap-3 p-4">
|
||||
{/* 테이블 뷰 */}
|
||||
{config.viewMode === "table" && (
|
||||
<div className={`flex-1 overflow-auto rounded-lg border ${config.compactMode ? "text-xs" : "text-sm"}`}>
|
||||
|
|
@ -311,7 +306,7 @@ export function ListWidget({ element }: ListWidgetProps) {
|
|||
|
||||
{/* 페이지네이션 */}
|
||||
{config.enablePagination && totalPages > 1 && (
|
||||
<div className="mt-4 flex items-center justify-between text-sm">
|
||||
<div className="flex shrink-0 items-center justify-between border-t pt-3 text-sm">
|
||||
<div className="text-gray-600">
|
||||
{startIdx + 1}-{Math.min(endIdx, data.rows.length)} / {data.rows.length}개
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { Canvas, useThree } from "@react-three/fiber";
|
||||
import { OrbitControls, Grid, Box } from "@react-three/drei";
|
||||
import { OrbitControls, Grid, Box, Text } from "@react-three/drei";
|
||||
import { Suspense, useRef, useState, useEffect } from "react";
|
||||
import * as THREE from "three";
|
||||
|
||||
|
|
@ -29,6 +29,19 @@ interface Yard3DCanvasProps {
|
|||
selectedPlacementId: number | null;
|
||||
onPlacementClick: (placement: YardPlacement | null) => void;
|
||||
onPlacementDrag?: (id: number, position: { x: number; y: number; z: number }) => void;
|
||||
gridSize?: number; // 그리드 크기 (기본값: 5)
|
||||
onCollisionDetected?: () => void; // 충돌 감지 시 콜백
|
||||
}
|
||||
|
||||
// 좌표를 그리드 칸의 중심에 스냅 (마인크래프트 스타일)
|
||||
// Three.js Box의 position은 중심점이므로, 그리드 칸의 중심에 배치해야 칸에 딱 맞음
|
||||
function snapToGrid(value: number, gridSize: number): number {
|
||||
// 가장 가까운 그리드 칸 찾기
|
||||
const gridIndex = Math.round(value / gridSize);
|
||||
// 그리드 칸의 중심점 반환
|
||||
// gridSize=5일 때: ..., -7.5, -2.5, 2.5, 7.5, 12.5, 17.5...
|
||||
// 이렇게 하면 Box가 칸 안에 정확히 들어감
|
||||
return gridIndex * gridSize + gridSize / 2;
|
||||
}
|
||||
|
||||
// 자재 박스 컴포넌트 (드래그 가능)
|
||||
|
|
@ -39,6 +52,9 @@ function MaterialBox({
|
|||
onDrag,
|
||||
onDragStart,
|
||||
onDragEnd,
|
||||
gridSize = 5,
|
||||
allPlacements = [],
|
||||
onCollisionDetected,
|
||||
}: {
|
||||
placement: YardPlacement;
|
||||
isSelected: boolean;
|
||||
|
|
@ -46,6 +62,9 @@ function MaterialBox({
|
|||
onDrag?: (position: { x: number; y: number; z: number }) => void;
|
||||
onDragStart?: () => void;
|
||||
onDragEnd?: () => void;
|
||||
gridSize?: number;
|
||||
allPlacements?: YardPlacement[];
|
||||
onCollisionDetected?: () => void;
|
||||
}) {
|
||||
const meshRef = useRef<THREE.Mesh>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
|
@ -53,10 +72,83 @@ function MaterialBox({
|
|||
const mouseStartPos = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
|
||||
const { camera, gl } = useThree();
|
||||
|
||||
// 드래그 중이 아닐 때 위치 업데이트
|
||||
// 특정 좌표에 요소를 배치할 수 있는지 확인하고, 필요하면 Y 위치를 조정
|
||||
const checkCollisionAndAdjustY = (x: number, y: number, z: number): { hasCollision: boolean; adjustedY: number } => {
|
||||
const palletHeight = 0.3; // 팔레트 높이
|
||||
const palletGap = 0.05; // 팔레트와 박스 사이 간격
|
||||
|
||||
const mySize = placement.size_x || gridSize; // 내 크기 (5)
|
||||
const myHalfSize = mySize / 2; // 2.5
|
||||
const mySizeY = placement.size_y || gridSize; // 박스 높이 (5)
|
||||
const myTotalHeight = mySizeY + palletHeight + palletGap; // 팔레트 포함한 전체 높이
|
||||
|
||||
let maxYBelow = gridSize / 2; // 기본 바닥 높이 (2.5)
|
||||
|
||||
for (const p of allPlacements) {
|
||||
// 자기 자신은 제외
|
||||
if (Number(p.id) === Number(placement.id)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const pSize = p.size_x || gridSize; // 상대방 크기 (5)
|
||||
const pHalfSize = pSize / 2; // 2.5
|
||||
const pSizeY = p.size_y || gridSize; // 상대방 박스 높이 (5)
|
||||
const pTotalHeight = pSizeY + palletHeight + palletGap; // 상대방 팔레트 포함 전체 높이
|
||||
|
||||
// 1단계: 넓은 범위로 겹침 감지 (살짝만 가까이 가도 감지)
|
||||
const detectionMargin = 0.5; // 감지 범위 확장 (0.5 유닛)
|
||||
const isNearby =
|
||||
Math.abs(x - p.position_x) < myHalfSize + pHalfSize + detectionMargin && // X축 근접
|
||||
Math.abs(z - p.position_z) < myHalfSize + pHalfSize + detectionMargin; // Z축 근접
|
||||
|
||||
if (isNearby) {
|
||||
// 2단계: 실제로 겹치는지 정확히 판단 (바닥에 둘지, 위에 둘지 결정)
|
||||
const isActuallyOverlapping =
|
||||
Math.abs(x - p.position_x) < myHalfSize + pHalfSize && // X축 실제 겹침
|
||||
Math.abs(z - p.position_z) < myHalfSize + pHalfSize; // Z축 실제 겹침
|
||||
|
||||
if (isActuallyOverlapping) {
|
||||
// 실제로 겹침: 위에 배치
|
||||
// 상대방 전체 높이 (박스 + 팔레트)의 윗면 계산
|
||||
const topOfOtherElement = p.position_y + pTotalHeight / 2;
|
||||
// 내 전체 높이의 절반을 더해서 내가 올라갈 Y 위치 계산
|
||||
const myYOnTop = topOfOtherElement + myTotalHeight / 2;
|
||||
|
||||
if (myYOnTop > maxYBelow) {
|
||||
maxYBelow = myYOnTop;
|
||||
}
|
||||
}
|
||||
// 근처에만 있고 실제로 안 겹침: 바닥에 배치 (maxYBelow 유지)
|
||||
}
|
||||
}
|
||||
|
||||
// 요청한 Y와 조정된 Y가 다르면 충돌로 간주 (위로 올려야 함)
|
||||
const needsAdjustment = Math.abs(y - maxYBelow) > 0.1;
|
||||
|
||||
return {
|
||||
hasCollision: needsAdjustment,
|
||||
adjustedY: maxYBelow,
|
||||
};
|
||||
};
|
||||
|
||||
// 드래그 중이 아닐 때만 위치 동기화
|
||||
useEffect(() => {
|
||||
if (!isDragging && meshRef.current) {
|
||||
meshRef.current.position.set(placement.position_x, placement.position_y, placement.position_z);
|
||||
const currentPos = meshRef.current.position;
|
||||
const targetX = placement.position_x;
|
||||
const targetY = placement.position_y;
|
||||
const targetZ = placement.position_z;
|
||||
|
||||
// 현재 위치와 목표 위치가 다를 때만 업데이트 (0.01 이상 차이)
|
||||
const threshold = 0.01;
|
||||
const needsUpdate =
|
||||
Math.abs(currentPos.x - targetX) > threshold ||
|
||||
Math.abs(currentPos.y - targetY) > threshold ||
|
||||
Math.abs(currentPos.z - targetZ) > threshold;
|
||||
|
||||
if (needsUpdate) {
|
||||
meshRef.current.position.set(targetX, targetY, targetZ);
|
||||
}
|
||||
}
|
||||
}, [placement.position_x, placement.position_y, placement.position_z, isDragging]);
|
||||
|
||||
|
|
@ -98,20 +190,56 @@ function MaterialBox({
|
|||
return;
|
||||
}
|
||||
|
||||
// 즉시 mesh 위치 업데이트 (부드러운 드래그)
|
||||
meshRef.current.position.set(finalX, dragStartPos.current.y, finalZ);
|
||||
// 그리드에 스냅
|
||||
const snappedX = snapToGrid(finalX, gridSize);
|
||||
const snappedZ = snapToGrid(finalZ, gridSize);
|
||||
|
||||
// 상태 업데이트 (저장용)
|
||||
onDrag({
|
||||
x: finalX,
|
||||
y: dragStartPos.current.y,
|
||||
z: finalZ,
|
||||
});
|
||||
// 충돌 체크 및 Y 위치 조정
|
||||
const { adjustedY } = checkCollisionAndAdjustY(snappedX, dragStartPos.current.y, snappedZ);
|
||||
|
||||
// 즉시 mesh 위치 업데이트 (조정된 Y 위치로)
|
||||
meshRef.current.position.set(finalX, adjustedY, finalZ);
|
||||
|
||||
// ⚠️ 드래그 중에는 상태 업데이트 안 함 (미리보기만)
|
||||
// 실제 저장은 handleGlobalMouseUp에서만 수행
|
||||
}
|
||||
};
|
||||
|
||||
const handleGlobalMouseUp = () => {
|
||||
if (isDragging) {
|
||||
if (isDragging && meshRef.current) {
|
||||
const currentPos = meshRef.current.position;
|
||||
|
||||
// 실제로 이동했는지 확인 (최소 이동 거리: 0.1)
|
||||
const minMovement = 0.1;
|
||||
const deltaX = Math.abs(currentPos.x - dragStartPos.current.x);
|
||||
const deltaZ = Math.abs(currentPos.z - dragStartPos.current.z);
|
||||
const hasMoved = deltaX > minMovement || deltaZ > minMovement;
|
||||
|
||||
if (hasMoved) {
|
||||
// 실제로 드래그한 경우: 그리드에 스냅
|
||||
const snappedX = snapToGrid(currentPos.x, gridSize);
|
||||
const snappedZ = snapToGrid(currentPos.z, gridSize);
|
||||
|
||||
// Y 위치 조정 (마인크래프트처럼 쌓기)
|
||||
const { adjustedY } = checkCollisionAndAdjustY(snappedX, currentPos.y, snappedZ);
|
||||
|
||||
// ✅ 항상 배치 가능 (위로 올라가므로)
|
||||
console.log("✅ 배치 완료! 저장:", { x: snappedX, y: adjustedY, z: snappedZ });
|
||||
meshRef.current.position.set(snappedX, adjustedY, snappedZ);
|
||||
|
||||
// 최종 위치 저장 (조정된 Y 위치로)
|
||||
if (onDrag) {
|
||||
onDrag({
|
||||
x: snappedX,
|
||||
y: adjustedY,
|
||||
z: snappedZ,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 클릭만 한 경우: 원래 위치 유지 (아무것도 안 함)
|
||||
meshRef.current.position.set(dragStartPos.current.x, dragStartPos.current.y, dragStartPos.current.z);
|
||||
}
|
||||
|
||||
setIsDragging(false);
|
||||
gl.domElement.style.cursor = isSelected ? "grab" : "pointer";
|
||||
if (onDragEnd) {
|
||||
|
|
@ -141,11 +269,12 @@ function MaterialBox({
|
|||
|
||||
// 편집 모드에서 선택되었고 드래그 가능한 경우
|
||||
if (isSelected && meshRef.current) {
|
||||
// 드래그 시작 시점의 자재 위치 저장 (숫자로 변환)
|
||||
// 드래그 시작 시점의 mesh 실제 위치 저장 (현재 렌더링된 위치)
|
||||
const currentPos = meshRef.current.position;
|
||||
dragStartPos.current = {
|
||||
x: Number(placement.position_x),
|
||||
y: Number(placement.position_y),
|
||||
z: Number(placement.position_z),
|
||||
x: currentPos.x,
|
||||
y: currentPos.y,
|
||||
z: currentPos.z,
|
||||
};
|
||||
|
||||
// 마우스 시작 위치 저장
|
||||
|
|
@ -165,11 +294,19 @@ function MaterialBox({
|
|||
// 요소가 설정되었는지 확인
|
||||
const isConfigured = !!(placement.material_name && placement.quantity && placement.unit);
|
||||
|
||||
const boxHeight = placement.size_y || gridSize;
|
||||
const boxWidth = placement.size_x || gridSize;
|
||||
const boxDepth = placement.size_z || gridSize;
|
||||
const palletHeight = 0.3; // 팔레트 높이
|
||||
const palletGap = 0.05; // 팔레트와 박스 사이 간격 (매우 작게)
|
||||
|
||||
// 팔레트 위치 계산: 박스 하단부터 시작
|
||||
const palletYOffset = -(boxHeight / 2) - palletHeight / 2 - palletGap;
|
||||
|
||||
return (
|
||||
<Box
|
||||
<group
|
||||
ref={meshRef}
|
||||
position={[placement.position_x, placement.position_y, placement.position_z]}
|
||||
args={[placement.size_x, placement.size_y, placement.size_z]}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.nativeEvent?.stopPropagation();
|
||||
|
|
@ -178,7 +315,6 @@ function MaterialBox({
|
|||
}}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerOver={() => {
|
||||
// 뷰어 모드(onDrag 없음)에서는 기본 커서, 편집 모드에서는 grab 커서
|
||||
if (onDrag) {
|
||||
gl.domElement.style.cursor = isSelected ? "grab" : "pointer";
|
||||
} else {
|
||||
|
|
@ -191,6 +327,57 @@ function MaterialBox({
|
|||
}
|
||||
}}
|
||||
>
|
||||
{/* 팔레트 그룹 - 박스 하단에 붙어있도록 */}
|
||||
<group position={[0, palletYOffset, 0]}>
|
||||
{/* 상단 가로 판자들 (5개) */}
|
||||
{[-boxDepth * 0.4, -boxDepth * 0.2, 0, boxDepth * 0.2, boxDepth * 0.4].map((zOffset, idx) => (
|
||||
<Box
|
||||
key={`top-${idx}`}
|
||||
args={[boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15]}
|
||||
position={[0, palletHeight * 0.35, zOffset]}
|
||||
>
|
||||
<meshStandardMaterial color="#8B4513" roughness={0.95} metalness={0.0} />
|
||||
<lineSegments>
|
||||
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15)]} />
|
||||
<lineBasicMaterial color="#000000" opacity={0.3} transparent />
|
||||
</lineSegments>
|
||||
</Box>
|
||||
))}
|
||||
|
||||
{/* 중간 세로 받침대 (3개) */}
|
||||
{[-boxWidth * 0.35, 0, boxWidth * 0.35].map((xOffset, idx) => (
|
||||
<Box
|
||||
key={`middle-${idx}`}
|
||||
args={[boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2]}
|
||||
position={[xOffset, 0, 0]}
|
||||
>
|
||||
<meshStandardMaterial color="#654321" roughness={0.98} metalness={0.0} />
|
||||
<lineSegments>
|
||||
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2)]} />
|
||||
<lineBasicMaterial color="#000000" opacity={0.4} transparent />
|
||||
</lineSegments>
|
||||
</Box>
|
||||
))}
|
||||
|
||||
{/* 하단 가로 판자들 (3개) */}
|
||||
{[-boxDepth * 0.3, 0, boxDepth * 0.3].map((zOffset, idx) => (
|
||||
<Box
|
||||
key={`bottom-${idx}`}
|
||||
args={[boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18]}
|
||||
position={[0, -palletHeight * 0.35, zOffset]}
|
||||
>
|
||||
<meshStandardMaterial color="#6B4423" roughness={0.97} metalness={0.0} />
|
||||
<lineSegments>
|
||||
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18)]} />
|
||||
<lineBasicMaterial color="#000000" opacity={0.3} transparent />
|
||||
</lineSegments>
|
||||
</Box>
|
||||
))}
|
||||
</group>
|
||||
|
||||
{/* 메인 박스 */}
|
||||
<Box args={[boxWidth, boxHeight, boxDepth]} position={[0, 0, 0]}>
|
||||
{/* 메인 재질 - 골판지 느낌 */}
|
||||
<meshStandardMaterial
|
||||
color={placement.color}
|
||||
opacity={isConfigured ? (isSelected ? 1 : 0.8) : 0.5}
|
||||
|
|
@ -198,13 +385,96 @@ function MaterialBox({
|
|||
emissive={isSelected ? "#ffffff" : "#000000"}
|
||||
emissiveIntensity={isSelected ? 0.2 : 0}
|
||||
wireframe={!isConfigured}
|
||||
roughness={0.95}
|
||||
metalness={0.05}
|
||||
/>
|
||||
|
||||
{/* 외곽선 - 더 진하게 */}
|
||||
<lineSegments>
|
||||
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)]} />
|
||||
<lineBasicMaterial color="#1a1a1a" opacity={0.8} transparent />
|
||||
</lineSegments>
|
||||
</Box>
|
||||
|
||||
{/* 포장 테이프 (가로) - 윗면 */}
|
||||
{isConfigured && (
|
||||
<>
|
||||
{/* 테이프 세로 */}
|
||||
<Box args={[boxWidth * 0.12, 0.02, boxDepth * 0.95]} position={[0, boxHeight / 2 + 0.01, 0]}>
|
||||
<meshStandardMaterial color="#d4a574" opacity={0.7} transparent roughness={0.3} metalness={0.3} />
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 자재명 라벨 스티커 (앞면) - 흰색 배경 */}
|
||||
{isConfigured && placement.material_name && (
|
||||
<group position={[0, boxHeight * 0.1, boxDepth / 2 + 0.02]}>
|
||||
{/* 라벨 배경 (흰색 스티커) */}
|
||||
<Box args={[boxWidth * 0.7, boxHeight * 0.25, 0.01]}>
|
||||
<meshStandardMaterial color="#ffffff" roughness={0.4} metalness={0.1} />
|
||||
<lineSegments>
|
||||
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.7, boxHeight * 0.25, 0.01)]} />
|
||||
<lineBasicMaterial color="#cccccc" opacity={0.8} transparent />
|
||||
</lineSegments>
|
||||
</Box>
|
||||
{/* 라벨 텍스트 */}
|
||||
<Text
|
||||
position={[0, 0, 0.02]}
|
||||
fontSize={0.3}
|
||||
color="#000000"
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{placement.material_name}
|
||||
</Text>
|
||||
</group>
|
||||
)}
|
||||
|
||||
{/* 수량 라벨 (윗면) - 큰 글씨 */}
|
||||
{isConfigured && placement.quantity && (
|
||||
<Text
|
||||
position={[0, boxHeight / 2 + 0.03, 0]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
fontSize={0.6}
|
||||
color="#000000"
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
outlineWidth={0.1}
|
||||
outlineColor="#ffffff"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{placement.quantity} {placement.unit || ""}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{/* 디테일 표시 */}
|
||||
{isConfigured && (
|
||||
<>
|
||||
{/* 화살표 표시 (이 쪽이 위) */}
|
||||
<group position={[0, boxHeight * 0.35, boxDepth / 2 + 0.01]}>
|
||||
<Text fontSize={0.6} color="#000000" anchorX="center" anchorY="middle">
|
||||
▲
|
||||
</Text>
|
||||
<Text position={[0, -0.4, 0]} fontSize={0.3} color="#666666" anchorX="center" anchorY="middle">
|
||||
UP
|
||||
</Text>
|
||||
</group>
|
||||
</>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
// 3D 씬 컴포넌트
|
||||
function Scene({ placements, selectedPlacementId, onPlacementClick, onPlacementDrag }: Yard3DCanvasProps) {
|
||||
function Scene({
|
||||
placements,
|
||||
selectedPlacementId,
|
||||
onPlacementClick,
|
||||
onPlacementDrag,
|
||||
gridSize = 5,
|
||||
onCollisionDetected,
|
||||
}: Yard3DCanvasProps) {
|
||||
const [isDraggingAny, setIsDraggingAny] = useState(false);
|
||||
const orbitControlsRef = useRef<any>(null);
|
||||
|
||||
|
|
@ -215,15 +485,15 @@ function Scene({ placements, selectedPlacementId, onPlacementClick, onPlacementD
|
|||
<directionalLight position={[10, 10, 5]} intensity={1} />
|
||||
<directionalLight position={[-10, -10, -5]} intensity={0.3} />
|
||||
|
||||
{/* 바닥 그리드 */}
|
||||
{/* 바닥 그리드 (타일을 4등분) */}
|
||||
<Grid
|
||||
args={[100, 100]}
|
||||
cellSize={5}
|
||||
cellThickness={0.5}
|
||||
cellColor="#6b7280"
|
||||
sectionSize={10}
|
||||
sectionThickness={1}
|
||||
sectionColor="#374151"
|
||||
cellSize={gridSize / 2} // 타일을 2x2로 나눔 (2.5칸)
|
||||
cellThickness={0.6}
|
||||
cellColor="#1f2937" // 얇은 선 (서브 그리드) - 매우 어두운 회색
|
||||
sectionSize={gridSize} // 타일 경계선 (5칸마다)
|
||||
sectionThickness={1.5}
|
||||
sectionColor="#374151" // 타일 경계는 조금 밝게
|
||||
fadeDistance={200}
|
||||
fadeStrength={1}
|
||||
followCamera={false}
|
||||
|
|
@ -250,6 +520,9 @@ function Scene({ placements, selectedPlacementId, onPlacementClick, onPlacementD
|
|||
orbitControlsRef.current.enabled = true;
|
||||
}
|
||||
}}
|
||||
gridSize={gridSize}
|
||||
allPlacements={placements}
|
||||
onCollisionDetected={onCollisionDetected}
|
||||
/>
|
||||
))}
|
||||
|
||||
|
|
@ -259,10 +532,13 @@ function Scene({ placements, selectedPlacementId, onPlacementClick, onPlacementD
|
|||
enablePan={true}
|
||||
enableZoom={true}
|
||||
enableRotate={true}
|
||||
minDistance={10}
|
||||
minDistance={8}
|
||||
maxDistance={200}
|
||||
maxPolarAngle={Math.PI / 2}
|
||||
enabled={!isDraggingAny}
|
||||
screenSpacePanning={true} // 화면 공간 패닝
|
||||
panSpeed={0.8} // 패닝 속도 (기본값 1.0, 낮을수록 느림)
|
||||
rotateSpeed={0.5} // 회전 속도
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
@ -273,6 +549,8 @@ export default function Yard3DCanvas({
|
|||
selectedPlacementId,
|
||||
onPlacementClick,
|
||||
onPlacementDrag,
|
||||
gridSize = 5,
|
||||
onCollisionDetected,
|
||||
}: Yard3DCanvasProps) {
|
||||
const handleCanvasClick = (e: any) => {
|
||||
// Canvas의 빈 공간을 클릭했을 때만 선택 해제
|
||||
|
|
@ -297,6 +575,8 @@ export default function Yard3DCanvas({
|
|||
selectedPlacementId={selectedPlacementId}
|
||||
onPlacementClick={onPlacementClick}
|
||||
onPlacementDrag={onPlacementDrag}
|
||||
gridSize={gridSize}
|
||||
onCollisionDetected={onCollisionDetected}
|
||||
/>
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,11 @@ import { yardLayoutApi } from "@/lib/api/yardLayoutApi";
|
|||
import dynamic from "next/dynamic";
|
||||
import { YardLayout, YardPlacement } from "./types";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { AlertCircle, CheckCircle } from "lucide-react";
|
||||
import { AlertCircle, CheckCircle, XCircle } from "lucide-react";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
|
||||
ssr: false,
|
||||
|
|
@ -33,6 +34,7 @@ interface YardEditorProps {
|
|||
}
|
||||
|
||||
export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
||||
const { toast } = useToast();
|
||||
const [placements, setPlacements] = useState<YardPlacement[]>([]);
|
||||
const [originalPlacements, setOriginalPlacements] = useState<YardPlacement[]>([]); // 원본 데이터 보관
|
||||
const [selectedPlacement, setSelectedPlacement] = useState<YardPlacement | null>(null);
|
||||
|
|
@ -63,7 +65,17 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|||
setIsLoading(true);
|
||||
const response = await yardLayoutApi.getPlacementsByLayoutId(layout.id);
|
||||
if (response.success) {
|
||||
const loadedData = response.data as YardPlacement[];
|
||||
const loadedData = (response.data as YardPlacement[]).map((p) => ({
|
||||
...p,
|
||||
// 문자열로 저장된 숫자 필드를 숫자로 변환
|
||||
position_x: Number(p.position_x),
|
||||
position_y: Number(p.position_y),
|
||||
position_z: Number(p.position_z),
|
||||
size_x: Number(p.size_x),
|
||||
size_y: Number(p.size_y),
|
||||
size_z: Number(p.size_z),
|
||||
quantity: p.quantity !== null && p.quantity !== undefined ? Number(p.quantity) : null,
|
||||
}));
|
||||
setPlacements(loadedData);
|
||||
setOriginalPlacements(JSON.parse(JSON.stringify(loadedData))); // 깊은 복사
|
||||
}
|
||||
|
|
@ -78,8 +90,89 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|||
loadPlacements();
|
||||
}, [layout.id]);
|
||||
|
||||
// 빈 공간 찾기 (그리드 기반)
|
||||
const findEmptyGridPosition = (gridSize = 5) => {
|
||||
// 이미 사용 중인 좌표 Set
|
||||
const occupiedPositions = new Set(
|
||||
placements.map((p) => {
|
||||
const x = Math.round(p.position_x / gridSize) * gridSize;
|
||||
const z = Math.round(p.position_z / gridSize) * gridSize;
|
||||
return `${x},${z}`;
|
||||
}),
|
||||
);
|
||||
|
||||
// 나선형으로 빈 공간 찾기
|
||||
let x = 0;
|
||||
let z = 0;
|
||||
let direction = 0; // 0: 우, 1: 하, 2: 좌, 3: 상
|
||||
let steps = 1;
|
||||
let stepsTaken = 0;
|
||||
let stepsInDirection = 0;
|
||||
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
const key = `${x},${z}`;
|
||||
if (!occupiedPositions.has(key)) {
|
||||
return { x, z };
|
||||
}
|
||||
|
||||
// 다음 위치로 이동
|
||||
stepsInDirection++;
|
||||
if (direction === 0)
|
||||
x += gridSize; // 우
|
||||
else if (direction === 1)
|
||||
z += gridSize; // 하
|
||||
else if (direction === 2)
|
||||
x -= gridSize; // 좌
|
||||
else z -= gridSize; // 상
|
||||
|
||||
if (stepsInDirection >= steps) {
|
||||
stepsInDirection = 0;
|
||||
direction = (direction + 1) % 4;
|
||||
stepsTaken++;
|
||||
if (stepsTaken === 2) {
|
||||
stepsTaken = 0;
|
||||
steps++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { x: 0, z: 0 };
|
||||
};
|
||||
|
||||
// 특정 XZ 위치에 배치할 때 적절한 Y 위치 계산 (마인크래프트 쌓기)
|
||||
const calculateYPosition = (x: number, z: number, existingPlacements: YardPlacement[]) => {
|
||||
const gridSize = 5;
|
||||
const halfSize = gridSize / 2;
|
||||
let maxY = halfSize; // 기본 바닥 높이 (2.5)
|
||||
|
||||
for (const p of existingPlacements) {
|
||||
// XZ가 겹치는지 확인
|
||||
const isXZOverlapping = Math.abs(x - p.position_x) < gridSize && Math.abs(z - p.position_z) < gridSize;
|
||||
|
||||
if (isXZOverlapping) {
|
||||
// 이 요소의 윗면 높이
|
||||
const topY = p.position_y + (p.size_y || gridSize) / 2;
|
||||
// 새 요소의 Y 위치 (윗면 + 새 요소 높이/2)
|
||||
const newY = topY + gridSize / 2;
|
||||
if (newY > maxY) {
|
||||
maxY = newY;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return maxY;
|
||||
};
|
||||
|
||||
// 빈 요소 추가 (로컬 상태에만 추가, 저장 시 서버에 반영)
|
||||
const handleAddElement = () => {
|
||||
const gridSize = 5;
|
||||
const emptyPos = findEmptyGridPosition(gridSize);
|
||||
const centerX = emptyPos.x + gridSize / 2;
|
||||
const centerZ = emptyPos.z + gridSize / 2;
|
||||
|
||||
// 해당 위치에 적절한 Y 계산 (쌓기)
|
||||
const appropriateY = calculateYPosition(centerX, centerZ, placements);
|
||||
|
||||
const newPlacement: YardPlacement = {
|
||||
id: nextPlacementId, // 임시 음수 ID
|
||||
yard_layout_id: layout.id,
|
||||
|
|
@ -87,12 +180,13 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|||
material_name: null,
|
||||
quantity: null,
|
||||
unit: null,
|
||||
position_x: 0,
|
||||
position_y: 2.5,
|
||||
position_z: 0,
|
||||
size_x: 5,
|
||||
size_y: 5,
|
||||
size_z: 5,
|
||||
// 그리드 칸의 중심에 배치 (Three.js Box position은 중심점)
|
||||
position_x: centerX, // 칸 중심: 0→2.5, 5→7.5, 10→12.5...
|
||||
position_y: appropriateY, // 쌓기 고려한 Y 위치
|
||||
position_z: centerZ, // 칸 중심: 0→2.5, 5→7.5, 10→12.5...
|
||||
size_x: gridSize,
|
||||
size_y: gridSize,
|
||||
size_z: gridSize,
|
||||
color: "#9ca3af",
|
||||
data_source_type: null,
|
||||
data_source_config: null,
|
||||
|
|
@ -125,12 +219,62 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|||
setDeleteConfirmDialog({ open: true, placementId });
|
||||
};
|
||||
|
||||
// 중력 적용: 삭제된 요소 위에 있던 요소들을 아래로 내림
|
||||
const applyGravity = (deletedPlacement: YardPlacement, remainingPlacements: YardPlacement[]) => {
|
||||
const gridSize = 5;
|
||||
const halfSize = gridSize / 2;
|
||||
|
||||
return remainingPlacements.map((p) => {
|
||||
// 삭제된 요소와 XZ가 겹치는지 확인
|
||||
const isXZOverlapping =
|
||||
Math.abs(p.position_x - deletedPlacement.position_x) < gridSize &&
|
||||
Math.abs(p.position_z - deletedPlacement.position_z) < gridSize;
|
||||
|
||||
// 삭제된 요소보다 위에 있는지 확인
|
||||
const isAbove = p.position_y > deletedPlacement.position_y;
|
||||
|
||||
if (isXZOverlapping && isAbove) {
|
||||
// 아래로 내림: 삭제된 요소의 크기만큼
|
||||
const fallDistance = deletedPlacement.size_y || gridSize;
|
||||
const newY = Math.max(halfSize, p.position_y - fallDistance); // 바닥(2.5) 아래로는 안 내려감
|
||||
|
||||
return {
|
||||
...p,
|
||||
position_y: newY,
|
||||
};
|
||||
}
|
||||
|
||||
return p;
|
||||
});
|
||||
};
|
||||
|
||||
// 요소 삭제 확정 (로컬 상태에서만 삭제, 저장 시 서버에 반영)
|
||||
const confirmDeletePlacement = () => {
|
||||
const { placementId } = deleteConfirmDialog;
|
||||
if (placementId === null) return;
|
||||
|
||||
setPlacements((prev) => prev.filter((p) => p.id !== placementId));
|
||||
setPlacements((prev) => {
|
||||
const deletedPlacement = prev.find((p) => p.id === placementId);
|
||||
if (!deletedPlacement) return prev;
|
||||
|
||||
// 삭제 후 남은 요소들
|
||||
const remaining = prev.filter((p) => p.id !== placementId);
|
||||
|
||||
// 중력 적용 (재귀적으로 계속 적용)
|
||||
let result = remaining;
|
||||
let hasChanges = true;
|
||||
|
||||
// 모든 요소가 안정될 때까지 반복
|
||||
while (hasChanges) {
|
||||
const before = JSON.stringify(result.map((p) => p.position_y));
|
||||
result = applyGravity(deletedPlacement, result);
|
||||
const after = JSON.stringify(result.map((p) => p.position_y));
|
||||
hasChanges = before !== after;
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
if (selectedPlacement?.id === placementId) {
|
||||
setSelectedPlacement(null);
|
||||
setShowConfigPanel(false);
|
||||
|
|
@ -358,6 +502,13 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|||
selectedPlacementId={selectedPlacement?.id || null}
|
||||
onPlacementClick={(placement) => handleSelectPlacement(placement as YardPlacement)}
|
||||
onPlacementDrag={handlePlacementDrag}
|
||||
onCollisionDetected={() => {
|
||||
toast({
|
||||
title: "배치 불가",
|
||||
description: "해당 위치에 이미 다른 요소가 있습니다.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -174,18 +174,6 @@ export function DashboardViewer({
|
|||
}: DashboardViewerProps) {
|
||||
const [elementData, setElementData] = useState<Record<string, QueryResult>>({});
|
||||
const [loadingElements, setLoadingElements] = useState<Set<string>>(new Set());
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
// 화면 크기 감지
|
||||
useEffect(() => {
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth < 1024); // 1024px (lg) 미만은 모바일/태블릿
|
||||
};
|
||||
|
||||
checkMobile();
|
||||
window.addEventListener("resize", checkMobile);
|
||||
return () => window.removeEventListener("resize", checkMobile);
|
||||
}, []);
|
||||
|
||||
// 캔버스 설정 계산
|
||||
const canvasConfig = useMemo(() => {
|
||||
|
|
@ -287,10 +275,8 @@ export function DashboardViewer({
|
|||
return () => clearInterval(interval);
|
||||
}, [refreshInterval, loadAllData]);
|
||||
|
||||
// 모바일에서 요소를 자연스러운 읽기 순서로 정렬 (왼쪽→오른쪽, 위→아래)
|
||||
// 요소를 자연스러운 읽기 순서로 정렬 (왼쪽→오른쪽, 위→아래) - 태블릿 이하에서 세로 정렬 시 사용
|
||||
const sortedElements = useMemo(() => {
|
||||
if (!isMobile) return elements;
|
||||
|
||||
return [...elements].sort((a, b) => {
|
||||
// Y 좌표 차이가 50px 이상이면 Y 우선 (같은 행으로 간주 안함)
|
||||
const yDiff = a.position.y - b.position.y;
|
||||
|
|
@ -300,7 +286,7 @@ export function DashboardViewer({
|
|||
// 같은 행이면 X 좌표로 정렬
|
||||
return a.position.x - b.position.x;
|
||||
});
|
||||
}, [elements, isMobile]);
|
||||
}, [elements]);
|
||||
|
||||
// 요소가 없는 경우
|
||||
if (elements.length === 0) {
|
||||
|
|
@ -317,30 +303,13 @@ export function DashboardViewer({
|
|||
|
||||
return (
|
||||
<DashboardProvider>
|
||||
{isMobile ? (
|
||||
// 모바일/태블릿: 세로 스택 레이아웃
|
||||
<div className="min-h-screen bg-gray-100 p-4" style={{ backgroundColor }}>
|
||||
<div className="mx-auto max-w-3xl space-y-4">
|
||||
{sortedElements.map((element) => (
|
||||
<ViewerElement
|
||||
key={element.id}
|
||||
element={element}
|
||||
data={elementData[element.id]}
|
||||
isLoading={loadingElements.has(element.id)}
|
||||
onRefresh={() => loadElementData(element)}
|
||||
isMobile={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// 데스크톱: 기존 고정 캔버스 레이아웃
|
||||
<div className="min-h-screen bg-gray-100 py-8">
|
||||
<div className="mx-auto" style={{ width: `${canvasConfig.width}px` }}>
|
||||
{/* 데스크톱: 디자이너에서 설정한 위치 그대로 렌더링 (화면에 맞춰 비율 유지) */}
|
||||
<div className="hidden min-h-screen bg-gray-100 py-8 lg:block" style={{ backgroundColor }}>
|
||||
<div className="mx-auto px-4" style={{ maxWidth: `${canvasConfig.width}px` }}>
|
||||
<div
|
||||
className="relative rounded-lg"
|
||||
style={{
|
||||
width: `${canvasConfig.width}px`,
|
||||
width: "100%",
|
||||
minHeight: `${canvasConfig.height}px`,
|
||||
height: `${canvasHeight}px`,
|
||||
backgroundColor: backgroundColor,
|
||||
|
|
@ -354,12 +323,28 @@ export function DashboardViewer({
|
|||
isLoading={loadingElements.has(element.id)}
|
||||
onRefresh={() => loadElementData(element)}
|
||||
isMobile={false}
|
||||
canvasWidth={canvasConfig.width}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 태블릿 이하: 반응형 세로 정렬 */}
|
||||
<div className="block min-h-screen bg-gray-100 p-4 lg:hidden" style={{ backgroundColor }}>
|
||||
<div className="mx-auto max-w-3xl space-y-4">
|
||||
{sortedElements.map((element) => (
|
||||
<ViewerElement
|
||||
key={element.id}
|
||||
element={element}
|
||||
data={elementData[element.id]}
|
||||
isLoading={loadingElements.has(element.id)}
|
||||
onRefresh={() => loadElementData(element)}
|
||||
isMobile={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DashboardProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -370,22 +355,28 @@ interface ViewerElementProps {
|
|||
isLoading: boolean;
|
||||
onRefresh: () => void;
|
||||
isMobile: boolean;
|
||||
canvasWidth?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 개별 뷰어 요소 컴포넌트
|
||||
* - 데스크톱(lg 이상): absolute positioning으로 디자이너에서 설정한 위치 그대로 렌더링 (너비는 화면 비율에 따라 조정)
|
||||
* - 태블릿 이하: 세로 스택 카드 레이아웃
|
||||
*/
|
||||
function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: ViewerElementProps) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWidth = 1920 }: ViewerElementProps) {
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
// 마운트 확인 (Leaflet 지도 초기화 문제 해결)
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
if (isMobile) {
|
||||
// 모바일/태블릿: 세로 스택 카드 스타일
|
||||
// 태블릿 이하: 세로 스택 카드 스타일
|
||||
return (
|
||||
<div
|
||||
className="relative overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm"
|
||||
style={{ minHeight: "300px" }}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
{element.showHeader !== false && (
|
||||
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
|
||||
|
|
@ -393,19 +384,31 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: Viewer
|
|||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className="text-gray-400 hover:text-gray-600 disabled:opacity-50"
|
||||
className="text-gray-400 transition-colors hover:text-gray-600 disabled:opacity-50"
|
||||
title="새로고침"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="h-4 w-4 animate-spin rounded-full border border-gray-400 border-t-transparent" />
|
||||
) : (
|
||||
"🔄"
|
||||
)}
|
||||
<svg
|
||||
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className={element.showHeader !== false ? "p-4" : "p-4"} style={{ minHeight: "250px" }}>
|
||||
{element.type === "chart" ? (
|
||||
{!isMounted ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
|
||||
</div>
|
||||
) : element.type === "chart" ? (
|
||||
<ChartRenderer element={element} data={data} width={undefined} height={250} />
|
||||
) : (
|
||||
renderWidget(element)
|
||||
|
|
@ -423,18 +426,19 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: Viewer
|
|||
);
|
||||
}
|
||||
|
||||
// 데스크톱: 기존 absolute positioning
|
||||
// 데스크톱: 디자이너에서 설정한 위치 그대로 absolute positioning
|
||||
// 단, 너비는 화면 크기에 따라 비율로 조정
|
||||
const widthPercentage = (element.size.width / canvasWidth) * 100;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm"
|
||||
style={{
|
||||
left: element.position.x,
|
||||
left: `${(element.position.x / canvasWidth) * 100}%`,
|
||||
top: element.position.y,
|
||||
width: element.size.width,
|
||||
width: `${widthPercentage}%`,
|
||||
height: element.size.height,
|
||||
}}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
{element.showHeader !== false && (
|
||||
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
|
||||
|
|
@ -442,22 +446,37 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: Viewer
|
|||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className={`text-gray-400 transition-opacity hover:text-gray-600 disabled:opacity-50 ${
|
||||
isHovered ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
className="text-gray-400 transition-colors hover:text-gray-600 disabled:opacity-50"
|
||||
title="새로고침"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="h-4 w-4 animate-spin rounded-full border border-gray-400 border-t-transparent" />
|
||||
) : (
|
||||
"🔄"
|
||||
)}
|
||||
<svg
|
||||
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className={element.showHeader !== false ? "h-[calc(100%-57px)]" : "h-full"}>
|
||||
{element.type === "chart" ? (
|
||||
<ChartRenderer element={element} data={data} width={element.size.width} height={element.size.height - 57} />
|
||||
<div className={element.showHeader !== false ? "h-[calc(100%-50px)] w-full" : "h-full w-full"}>
|
||||
{!isMounted ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
|
||||
</div>
|
||||
) : element.type === "chart" ? (
|
||||
<ChartRenderer
|
||||
element={element}
|
||||
data={data}
|
||||
width={undefined}
|
||||
height={element.showHeader !== false ? element.size.height - 50 : element.size.height}
|
||||
/>
|
||||
) : (
|
||||
renderWidget(element)
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
// 자동 새로고침 (30초마다)
|
||||
const interval = setInterval(loadData, 30000);
|
||||
return () => clearInterval(interval);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [element]);
|
||||
|
||||
const loadData = async () => {
|
||||
|
|
@ -101,7 +102,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
body: JSON.stringify({
|
||||
query: groupByDS.query,
|
||||
connectionType: groupByDS.connectionType || "current",
|
||||
connectionId: groupByDS.connectionId,
|
||||
connectionId: (groupByDS as any).connectionId,
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
@ -116,7 +117,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
const labelColumn = columns[0];
|
||||
const valueColumn = columns[1];
|
||||
|
||||
const cards = rows.map((row) => ({
|
||||
const cards = rows.map((row: any) => ({
|
||||
label: String(row[labelColumn] || ""),
|
||||
value: parseFloat(row[valueColumn]) || 0,
|
||||
}));
|
||||
|
|
@ -137,12 +138,12 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
method: groupByDS.method || "GET",
|
||||
method: (groupByDS as any).method || "GET",
|
||||
url: groupByDS.endpoint,
|
||||
headers: groupByDS.headers || {},
|
||||
body: groupByDS.body,
|
||||
authType: groupByDS.authType,
|
||||
authConfig: groupByDS.authConfig,
|
||||
headers: (groupByDS as any).headers || {},
|
||||
body: (groupByDS as any).body,
|
||||
authType: (groupByDS as any).authType,
|
||||
authConfig: (groupByDS as any).authConfig,
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
@ -169,7 +170,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
const labelColumn = columns[0];
|
||||
const valueColumn = columns[1];
|
||||
|
||||
const cards = rows.map((row) => ({
|
||||
const cards = rows.map((row: any) => ({
|
||||
label: String(row[labelColumn] || ""),
|
||||
value: parseFloat(row[valueColumn]) || 0,
|
||||
}));
|
||||
|
|
@ -201,7 +202,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
body: JSON.stringify({
|
||||
query: element.dataSource.query,
|
||||
connectionType: element.dataSource.connectionType || "current",
|
||||
connectionId: element.dataSource.connectionId,
|
||||
connectionId: (element.dataSource as any).connectionId,
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
@ -212,13 +213,14 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
if (result.success && result.data?.rows) {
|
||||
const rows = result.data.rows;
|
||||
|
||||
const calculatedMetrics = element.customMetricConfig.metrics.map((metric) => {
|
||||
const calculatedMetrics =
|
||||
element.customMetricConfig?.metrics.map((metric) => {
|
||||
const value = calculateMetric(rows, metric.field, metric.aggregation);
|
||||
return {
|
||||
...metric,
|
||||
calculatedValue: value,
|
||||
};
|
||||
});
|
||||
}) || [];
|
||||
|
||||
setMetrics(calculatedMetrics);
|
||||
} else {
|
||||
|
|
@ -240,12 +242,12 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
method: element.dataSource.method || "GET",
|
||||
method: (element.dataSource as any).method || "GET",
|
||||
url: element.dataSource.endpoint,
|
||||
headers: element.dataSource.headers || {},
|
||||
body: element.dataSource.body,
|
||||
authType: element.dataSource.authType,
|
||||
authConfig: element.dataSource.authConfig,
|
||||
headers: (element.dataSource as any).headers || {},
|
||||
body: (element.dataSource as any).body,
|
||||
authType: (element.dataSource as any).authType,
|
||||
authConfig: (element.dataSource as any).authConfig,
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
@ -278,13 +280,14 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
rows = [result.data];
|
||||
}
|
||||
|
||||
const calculatedMetrics = element.customMetricConfig.metrics.map((metric) => {
|
||||
const calculatedMetrics =
|
||||
element.customMetricConfig?.metrics.map((metric) => {
|
||||
const value = calculateMetric(rows, metric.field, metric.aggregation);
|
||||
return {
|
||||
...metric,
|
||||
calculatedValue: value,
|
||||
};
|
||||
});
|
||||
}) || [];
|
||||
|
||||
setMetrics(calculatedMetrics);
|
||||
} else {
|
||||
|
|
@ -351,7 +354,9 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
<li>• 선택한 컬럼의 데이터로 지표를 계산합니다</li>
|
||||
<li>• COUNT, SUM, AVG, MIN, MAX 등 집계 함수 지원</li>
|
||||
<li>• 사용자 정의 단위 설정 가능</li>
|
||||
<li>• <strong>그룹별 카드 생성 모드</strong>로 간편하게 사용 가능</li>
|
||||
<li>
|
||||
• <strong>그룹별 카드 생성 모드</strong>로 간편하게 사용 가능
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="mt-2 rounded-lg bg-blue-50 p-2 text-[10px] text-blue-700">
|
||||
|
|
@ -361,11 +366,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
? "SQL 쿼리를 입력하고 실행하세요 (지표 추가 불필요)"
|
||||
: "SQL 쿼리를 입력하고 지표를 추가하세요"}
|
||||
</p>
|
||||
{isGroupByMode && (
|
||||
<p className="text-[9px]">
|
||||
💡 첫 번째 컬럼: 카드 제목, 두 번째 컬럼: 카드 값
|
||||
</p>
|
||||
)}
|
||||
{isGroupByMode && <p className="text-[9px]">💡 첫 번째 컬럼: 카드 제목, 두 번째 컬럼: 카드 값</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -373,10 +374,9 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col overflow-hidden bg-white p-4">
|
||||
{/* 스크롤 가능한 콘텐츠 영역 */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="grid w-full gap-4" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))" }}>
|
||||
<div className="flex h-full w-full items-center justify-center overflow-hidden bg-white p-2">
|
||||
{/* 콘텐츠 영역 - 스크롤 없이 자동으로 크기 조정 */}
|
||||
<div className="grid h-full w-full gap-2" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))" }}>
|
||||
{/* 그룹별 카드 (활성화 시) */}
|
||||
{isGroupByMode &&
|
||||
groupedCards.map((card, index) => {
|
||||
|
|
@ -386,9 +386,12 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
const colors = colorMap[colorKey];
|
||||
|
||||
return (
|
||||
<div key={`group-${index}`} className={`rounded-lg border ${colors.bg} ${colors.border} p-4 text-center`}>
|
||||
<div className="text-sm text-gray-600">{card.label}</div>
|
||||
<div className={`mt-2 text-3xl font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
|
||||
<div
|
||||
key={`group-${index}`}
|
||||
className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-2`}
|
||||
>
|
||||
<div className="text-[10px] text-gray-600">{card.label}</div>
|
||||
<div className={`mt-0.5 text-xl font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
@ -399,17 +402,19 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
|
|||
const formattedValue = metric.calculatedValue.toFixed(metric.decimals);
|
||||
|
||||
return (
|
||||
<div key={metric.id} className={`rounded-lg border ${colors.bg} ${colors.border} p-4 text-center`}>
|
||||
<div className="text-sm text-gray-600">{metric.label}</div>
|
||||
<div className={`mt-2 text-3xl font-bold ${colors.text}`}>
|
||||
<div
|
||||
key={metric.id}
|
||||
className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-2`}
|
||||
>
|
||||
<div className="text-[10px] text-gray-600">{metric.label}</div>
|
||||
<div className={`mt-0.5 text-xl font-bold ${colors.text}`}>
|
||||
{formattedValue}
|
||||
<span className="ml-1 text-lg">{metric.unit}</span>
|
||||
<span className="ml-0.5 text-sm">{metric.unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,6 +147,14 @@ function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
|
|||
flowData.nodes || [],
|
||||
flowData.edges || [],
|
||||
);
|
||||
|
||||
// 🆕 플로우 로드 후 첫 번째 노드 자동 선택
|
||||
if (flowData.nodes && flowData.nodes.length > 0) {
|
||||
const firstNode = flowData.nodes[0];
|
||||
selectNodes([firstNode.id]);
|
||||
setShowPropertiesPanelLocal(true);
|
||||
console.log("✅ 첫 번째 노드 자동 선택:", firstNode.id);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("플로우 로드 실패:", error);
|
||||
|
|
@ -155,7 +163,7 @@ function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
|
|||
};
|
||||
|
||||
fetchAndLoadFlow();
|
||||
}, [initialFlowId]);
|
||||
}, [initialFlowId, loadFlow, selectNodes]);
|
||||
|
||||
/**
|
||||
* 노드 선택 변경 핸들러
|
||||
|
|
|
|||
|
|
@ -67,6 +67,19 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
|
|||
const [tablesOpen, setTablesOpen] = useState(false);
|
||||
const [selectedTableLabel, setSelectedTableLabel] = useState(data.targetTable);
|
||||
|
||||
// 내부 DB 컬럼 관련 상태
|
||||
interface ColumnInfo {
|
||||
columnName: string;
|
||||
columnLabel?: string;
|
||||
dataType: string;
|
||||
isNullable: boolean;
|
||||
}
|
||||
const [targetColumns, setTargetColumns] = useState<ColumnInfo[]>([]);
|
||||
const [columnsLoading, setColumnsLoading] = useState(false);
|
||||
|
||||
// Combobox 열림 상태 관리
|
||||
const [fieldOpenState, setFieldOpenState] = useState<boolean[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setDisplayName(data.displayName || `${data.targetTable} 삭제`);
|
||||
setTargetTable(data.targetTable);
|
||||
|
|
@ -101,6 +114,18 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
|
|||
}
|
||||
}, [targetType, selectedExternalConnectionId, externalTargetTable]);
|
||||
|
||||
// 🔥 내부 DB 컬럼 로딩
|
||||
useEffect(() => {
|
||||
if (targetType === "internal" && targetTable) {
|
||||
loadColumns(targetTable);
|
||||
}
|
||||
}, [targetType, targetTable]);
|
||||
|
||||
// whereConditions 변경 시 fieldOpenState 초기화
|
||||
useEffect(() => {
|
||||
setFieldOpenState(new Array(whereConditions.length).fill(false));
|
||||
}, [whereConditions.length]);
|
||||
|
||||
const loadExternalConnections = async () => {
|
||||
try {
|
||||
setExternalConnectionsLoading(true);
|
||||
|
|
@ -171,6 +196,28 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
|
|||
}
|
||||
};
|
||||
|
||||
// 🔥 내부 DB 컬럼 로딩
|
||||
const loadColumns = async (tableName: string) => {
|
||||
try {
|
||||
setColumnsLoading(true);
|
||||
const response = await tableTypeApi.getColumns(tableName);
|
||||
if (response && Array.isArray(response)) {
|
||||
const columnInfos: ColumnInfo[] = response.map((col: any) => ({
|
||||
columnName: col.columnName || col.column_name,
|
||||
columnLabel: col.columnLabel || col.column_label,
|
||||
dataType: col.dataType || col.data_type || "text",
|
||||
isNullable: col.isNullable !== undefined ? col.isNullable : true,
|
||||
}));
|
||||
setTargetColumns(columnInfos);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("컬럼 로딩 실패:", error);
|
||||
setTargetColumns([]);
|
||||
} finally {
|
||||
setColumnsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTableSelect = (tableName: string) => {
|
||||
const selectedTable = tables.find((t: any) => t.tableName === tableName);
|
||||
const label = (selectedTable as any)?.tableLabel || selectedTable?.displayName || tableName;
|
||||
|
|
@ -186,18 +233,22 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
|
|||
};
|
||||
|
||||
const handleAddCondition = () => {
|
||||
setWhereConditions([
|
||||
const newConditions = [
|
||||
...whereConditions,
|
||||
{
|
||||
field: "",
|
||||
operator: "EQUALS",
|
||||
value: "",
|
||||
},
|
||||
]);
|
||||
];
|
||||
setWhereConditions(newConditions);
|
||||
setFieldOpenState(new Array(newConditions.length).fill(false));
|
||||
};
|
||||
|
||||
const handleRemoveCondition = (index: number) => {
|
||||
setWhereConditions(whereConditions.filter((_, i) => i !== index));
|
||||
const newConditions = whereConditions.filter((_, i) => i !== index);
|
||||
setWhereConditions(newConditions);
|
||||
setFieldOpenState(new Array(newConditions.length).fill(false));
|
||||
};
|
||||
|
||||
const handleConditionChange = (index: number, field: string, value: any) => {
|
||||
|
|
@ -639,9 +690,37 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 컬럼 로딩 상태 */}
|
||||
{targetType === "internal" && targetTable && columnsLoading && (
|
||||
<div className="rounded border border-gray-200 bg-gray-50 p-3 text-center text-xs text-gray-500">
|
||||
컬럼 정보를 불러오는 중...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 테이블 미선택 안내 */}
|
||||
{targetType === "internal" && !targetTable && (
|
||||
<div className="rounded border border-dashed border-gray-300 bg-gray-50 p-3 text-center text-xs text-gray-500">
|
||||
먼저 타겟 테이블을 선택하세요
|
||||
</div>
|
||||
)}
|
||||
|
||||
{whereConditions.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{whereConditions.map((condition, index) => (
|
||||
{whereConditions.map((condition, index) => {
|
||||
// 현재 타입에 따라 사용 가능한 컬럼 리스트 결정
|
||||
const availableColumns =
|
||||
targetType === "internal"
|
||||
? targetColumns
|
||||
: targetType === "external"
|
||||
? externalColumns.map((col) => ({
|
||||
columnName: col.column_name,
|
||||
columnLabel: col.column_name,
|
||||
dataType: col.data_type,
|
||||
isNullable: true,
|
||||
}))
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div key={index} className="rounded border-2 border-red-200 bg-red-50 p-2">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-red-700">조건 #{index + 1}</span>
|
||||
|
|
@ -656,14 +735,90 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
|
|||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* 필드 - Combobox */}
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">필드</Label>
|
||||
{availableColumns.length > 0 ? (
|
||||
<Popover
|
||||
open={fieldOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...fieldOpenState];
|
||||
newState[index] = open;
|
||||
setFieldOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={fieldOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{condition.field
|
||||
? (() => {
|
||||
const col = availableColumns.find((c) => c.columnName === condition.field);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-mono">
|
||||
{col?.columnLabel || condition.field}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">{col?.dataType}</span>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
: "필드 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{availableColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.columnName}
|
||||
value={col.columnName}
|
||||
onSelect={(currentValue) => {
|
||||
handleConditionChange(index, "field", currentValue);
|
||||
const newState = [...fieldOpenState];
|
||||
newState[index] = false;
|
||||
setFieldOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
condition.field === col.columnName ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-mono font-medium">
|
||||
{col.columnLabel || col.columnName}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-[10px]">{col.dataType}</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={condition.field}
|
||||
onChange={(e) => handleConditionChange(index, "field", e.target.value)}
|
||||
placeholder="조건 필드명"
|
||||
className="mt-1 h-8 text-xs"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -696,7 +851,8 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded border-2 border-dashed border-red-300 bg-red-50 p-4 text-center text-xs text-red-600">
|
||||
|
|
@ -705,7 +861,6 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
|
|||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="rounded bg-red-50 p-3 text-xs text-red-700">
|
||||
🚨 WHERE 조건 없이 삭제하면 테이블의 모든 데이터가 영구 삭제됩니다!
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { Checkbox } from "@/components/ui/checkbox";
|
|||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
|
||||
import { tableTypeApi } from "@/lib/api/screen";
|
||||
|
|
@ -37,6 +38,7 @@ interface ColumnInfo {
|
|||
columnLabel?: string;
|
||||
dataType: string;
|
||||
isNullable: boolean;
|
||||
columnDefault?: string | null;
|
||||
}
|
||||
|
||||
export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesProps) {
|
||||
|
|
@ -63,6 +65,10 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
|
|||
// REST API 소스 노드 연결 여부
|
||||
const [hasRestAPISource, setHasRestAPISource] = useState(false);
|
||||
|
||||
// Combobox 열림 상태 관리 (필드 매핑)
|
||||
const [mappingSourceFieldsOpenState, setMappingSourceFieldsOpenState] = useState<boolean[]>([]);
|
||||
const [mappingTargetFieldsOpenState, setMappingTargetFieldsOpenState] = useState<boolean[]>([]);
|
||||
|
||||
// 🔥 외부 DB 관련 상태
|
||||
const [externalConnections, setExternalConnections] = useState<ExternalConnection[]>([]);
|
||||
const [externalConnectionsLoading, setExternalConnectionsLoading] = useState(false);
|
||||
|
|
@ -118,6 +124,12 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
|
|||
}
|
||||
}, [targetType, selectedExternalConnectionId]);
|
||||
|
||||
// fieldMappings 변경 시 Combobox 열림 상태 초기화
|
||||
useEffect(() => {
|
||||
setMappingSourceFieldsOpenState(new Array(fieldMappings.length).fill(false));
|
||||
setMappingTargetFieldsOpenState(new Array(fieldMappings.length).fill(false));
|
||||
}, [fieldMappings.length]);
|
||||
|
||||
// 🔥 외부 테이블 변경 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (targetType === "external" && selectedExternalConnectionId && externalTargetTable) {
|
||||
|
|
@ -340,12 +352,27 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
|
|||
|
||||
const columns = await tableTypeApi.getColumns(tableName);
|
||||
|
||||
const columnInfo: ColumnInfo[] = columns.map((col: any) => ({
|
||||
const columnInfo: ColumnInfo[] = columns.map((col: any) => {
|
||||
// is_nullable 파싱: "YES", true, 1 등을 true로, "NO", false, 0 등을 false로 변환
|
||||
const isNullableValue = col.is_nullable ?? col.isNullable;
|
||||
let isNullable = true; // 기본값: nullable
|
||||
|
||||
if (typeof isNullableValue === "boolean") {
|
||||
isNullable = isNullableValue;
|
||||
} else if (typeof isNullableValue === "string") {
|
||||
isNullable = isNullableValue.toUpperCase() === "YES" || isNullableValue.toUpperCase() === "TRUE";
|
||||
} else if (typeof isNullableValue === "number") {
|
||||
isNullable = isNullableValue !== 0;
|
||||
}
|
||||
|
||||
return {
|
||||
columnName: col.column_name || col.columnName,
|
||||
columnLabel: col.label_ko || col.columnLabel,
|
||||
dataType: col.data_type || col.dataType || "unknown",
|
||||
isNullable: col.is_nullable === "YES" || col.isNullable === true,
|
||||
}));
|
||||
isNullable,
|
||||
columnDefault: col.column_default ?? col.columnDefault ?? null,
|
||||
};
|
||||
});
|
||||
|
||||
setTargetColumns(columnInfo);
|
||||
console.log(`✅ 컬럼 ${columnInfo.length}개 로딩 완료`);
|
||||
|
|
@ -449,12 +476,20 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
|
|||
];
|
||||
setFieldMappings(newMappings);
|
||||
updateNode(nodeId, { fieldMappings: newMappings });
|
||||
|
||||
// Combobox 열림 상태 배열 초기화
|
||||
setMappingSourceFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
setMappingTargetFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
};
|
||||
|
||||
const handleRemoveMapping = (index: number) => {
|
||||
const newMappings = fieldMappings.filter((_, i) => i !== index);
|
||||
setFieldMappings(newMappings);
|
||||
updateNode(nodeId, { fieldMappings: newMappings });
|
||||
|
||||
// Combobox 열림 상태 배열도 업데이트
|
||||
setMappingSourceFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
setMappingTargetFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
};
|
||||
|
||||
const handleMappingChange = (index: number, field: string, value: any) => {
|
||||
|
|
@ -1077,35 +1112,87 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
|
|||
className="mt-1 h-8 text-xs"
|
||||
/>
|
||||
) : (
|
||||
// 일반 소스인 경우: 드롭다운 선택
|
||||
<Select
|
||||
value={mapping.sourceField || ""}
|
||||
onValueChange={(value) => handleMappingChange(index, "sourceField", value || null)}
|
||||
// 일반 소스인 경우: Combobox 선택
|
||||
<Popover
|
||||
open={mappingSourceFieldsOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...mappingSourceFieldsOpenState];
|
||||
newState[index] = open;
|
||||
setMappingSourceFieldsOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="소스 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sourceFields.length === 0 ? (
|
||||
<div className="p-2 text-center text-xs text-gray-400">
|
||||
연결된 소스 노드가 없습니다
|
||||
</div>
|
||||
) : (
|
||||
sourceFields.map((field) => (
|
||||
<SelectItem key={field.name} value={field.name} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-medium">{field.label || field.name}</span>
|
||||
{field.label && field.label !== field.name && (
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={mappingSourceFieldsOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{mapping.sourceField
|
||||
? (() => {
|
||||
const field = sourceFields.find((f) => f.name === mapping.sourceField);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-medium">
|
||||
{field?.label || mapping.sourceField}
|
||||
</span>
|
||||
{field?.label && field.label !== field.name && (
|
||||
<span className="text-muted-foreground font-mono text-xs">
|
||||
{field.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))
|
||||
);
|
||||
})()
|
||||
: "소스 필드 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="소스 필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">
|
||||
필드를 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sourceFields.map((field) => (
|
||||
<CommandItem
|
||||
key={field.name}
|
||||
value={field.name}
|
||||
onSelect={(currentValue) => {
|
||||
handleMappingChange(index, "sourceField", currentValue || null);
|
||||
const newState = [...mappingSourceFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setMappingSourceFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
mapping.sourceField === field.name ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{field.label || field.name}</span>
|
||||
{field.label && field.label !== field.name && (
|
||||
<span className="text-muted-foreground font-mono text-[10px]">
|
||||
{field.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
{hasRestAPISource && (
|
||||
<p className="mt-1 text-xs text-gray-500">API 응답 JSON의 필드명을 입력하세요</p>
|
||||
|
|
@ -1116,43 +1203,134 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
|
|||
<ArrowRight className="h-4 w-4 text-green-600" />
|
||||
</div>
|
||||
|
||||
{/* 타겟 필드 드롭다운 (🔥 타입별 컬럼 사용) */}
|
||||
{/* 타겟 필드 Combobox (🔥 타입별 컬럼 사용) */}
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">타겟 필드</Label>
|
||||
<Select
|
||||
value={mapping.targetField}
|
||||
onValueChange={(value) => handleMappingChange(index, "targetField", value)}
|
||||
<Popover
|
||||
open={mappingTargetFieldsOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...mappingTargetFieldsOpenState];
|
||||
newState[index] = open;
|
||||
setMappingTargetFieldsOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="타겟 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={mappingTargetFieldsOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{mapping.targetField
|
||||
? (() => {
|
||||
if (targetType === "internal") {
|
||||
const col = targetColumns.find((c) => c.columnName === mapping.targetField);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-mono">
|
||||
{col?.columnLabel || mapping.targetField}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{col?.dataType}
|
||||
{col && !col.isNullable && <span className="text-red-500">*</span>}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const col = externalColumns.find(
|
||||
(c) => c.column_name === mapping.targetField,
|
||||
);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-mono">
|
||||
{col?.column_name || mapping.targetField}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">{col?.data_type}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})()
|
||||
: "타겟 필드 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="타겟 필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{/* 🔥 내부 DB 컬럼 */}
|
||||
{targetType === "internal" &&
|
||||
targetColumns.map((col) => (
|
||||
<SelectItem key={col.columnName} value={col.columnName} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono">{col.columnLabel || col.columnName}</span>
|
||||
<span className="text-muted-foreground">
|
||||
<CommandItem
|
||||
key={col.columnName}
|
||||
value={col.columnName}
|
||||
onSelect={(currentValue) => {
|
||||
handleMappingChange(index, "targetField", currentValue);
|
||||
const newState = [...mappingTargetFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setMappingTargetFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
mapping.targetField === col.columnName ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-mono font-medium">
|
||||
{col.columnLabel || col.columnName}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-[10px]">
|
||||
{col.dataType}
|
||||
{!col.isNullable && <span className="text-red-500">*</span>}
|
||||
{col.columnDefault ? (
|
||||
<span className="text-blue-600"> 🔵기본값</span>
|
||||
) : (
|
||||
!col.isNullable && <span className="text-red-500"> *필수</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</CommandItem>
|
||||
))}
|
||||
|
||||
{/* 🔥 외부 DB 컬럼 */}
|
||||
{targetType === "external" &&
|
||||
externalColumns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono">{col.column_name}</span>
|
||||
<span className="text-muted-foreground">{col.data_type}</span>
|
||||
<CommandItem
|
||||
key={col.column_name}
|
||||
value={col.column_name}
|
||||
onSelect={(currentValue) => {
|
||||
handleMappingChange(index, "targetField", currentValue);
|
||||
const newState = [...mappingTargetFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setMappingTargetFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
mapping.targetField === col.column_name ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-mono font-medium">{col.column_name}</span>
|
||||
<span className="text-muted-foreground text-[10px]">{col.data_type}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</CommandItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 정적 값 */}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,13 @@
|
|||
*/
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Plus, Trash2, Search } from "lucide-react";
|
||||
import { Plus, Trash2, 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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Check } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
|
||||
import type { ReferenceLookupNodeData } from "@/types/node-editor";
|
||||
|
|
@ -62,6 +61,9 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
|
|||
const [referenceColumns, setReferenceColumns] = useState<FieldDefinition[]>([]);
|
||||
const [columnsLoading, setColumnsLoading] = useState(false);
|
||||
|
||||
// Combobox 열림 상태 관리
|
||||
const [whereFieldOpenState, setWhereFieldOpenState] = useState<boolean[]>([]);
|
||||
|
||||
// 데이터 변경 시 로컬 상태 동기화
|
||||
useEffect(() => {
|
||||
setDisplayName(data.displayName || "참조 조회");
|
||||
|
|
@ -72,6 +74,11 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
|
|||
setOutputFields(data.outputFields || []);
|
||||
}, [data]);
|
||||
|
||||
// whereConditions 변경 시 whereFieldOpenState 초기화
|
||||
useEffect(() => {
|
||||
setWhereFieldOpenState(new Array(whereConditions.length).fill(false));
|
||||
}, [whereConditions.length]);
|
||||
|
||||
// 🔍 소스 필드 수집 (업스트림 노드에서)
|
||||
useEffect(() => {
|
||||
const incomingEdges = edges.filter((e) => e.target === nodeId);
|
||||
|
|
@ -187,7 +194,7 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
|
|||
|
||||
// WHERE 조건 추가
|
||||
const handleAddWhereCondition = () => {
|
||||
setWhereConditions([
|
||||
const newConditions = [
|
||||
...whereConditions,
|
||||
{
|
||||
field: "",
|
||||
|
|
@ -195,11 +202,15 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
|
|||
value: "",
|
||||
valueType: "static",
|
||||
},
|
||||
]);
|
||||
];
|
||||
setWhereConditions(newConditions);
|
||||
setWhereFieldOpenState(new Array(newConditions.length).fill(false));
|
||||
};
|
||||
|
||||
const handleRemoveWhereCondition = (index: number) => {
|
||||
setWhereConditions(whereConditions.filter((_, i) => i !== index));
|
||||
const newConditions = whereConditions.filter((_, i) => i !== index);
|
||||
setWhereConditions(newConditions);
|
||||
setWhereFieldOpenState(new Array(newConditions.length).fill(false));
|
||||
};
|
||||
|
||||
const handleWhereConditionChange = (index: number, field: string, value: any) => {
|
||||
|
|
@ -455,23 +466,81 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
|
|||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* 필드 - Combobox */}
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">필드</Label>
|
||||
<Select
|
||||
value={condition.field}
|
||||
onValueChange={(value) => handleWhereConditionChange(index, "field", value)}
|
||||
<Popover
|
||||
open={whereFieldOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...whereFieldOpenState];
|
||||
newState[index] = open;
|
||||
setWhereFieldOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={whereFieldOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{condition.field
|
||||
? (() => {
|
||||
const field = referenceColumns.find((f) => f.name === condition.field);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate">{field?.label || condition.field}</span>
|
||||
{field?.type && (
|
||||
<span className="text-muted-foreground text-xs">{field.type}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
: "필드 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{referenceColumns.map((field) => (
|
||||
<SelectItem key={field.name} value={field.name}>
|
||||
{field.label || field.name}
|
||||
</SelectItem>
|
||||
<CommandItem
|
||||
key={field.name}
|
||||
value={field.name}
|
||||
onSelect={(currentValue) => {
|
||||
handleWhereConditionChange(index, "field", currentValue);
|
||||
const newState = [...whereFieldOpenState];
|
||||
newState[index] = false;
|
||||
setWhereFieldOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
condition.field === field.name ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{field.label || field.name}</span>
|
||||
{field.type && (
|
||||
<span className="text-muted-foreground text-[10px]">{field.type}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ interface ColumnInfo {
|
|||
columnLabel?: string;
|
||||
dataType: string;
|
||||
isNullable: boolean;
|
||||
columnDefault?: string | null;
|
||||
}
|
||||
|
||||
const OPERATORS = [
|
||||
|
|
@ -79,6 +80,14 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
// REST API 소스 노드 연결 여부
|
||||
const [hasRestAPISource, setHasRestAPISource] = useState(false);
|
||||
|
||||
// Combobox 열림 상태 관리 (WHERE 조건)
|
||||
const [sourceFieldsOpenState, setSourceFieldsOpenState] = useState<boolean[]>([]);
|
||||
const [targetFieldsOpenState, setTargetFieldsOpenState] = useState<boolean[]>([]);
|
||||
|
||||
// Combobox 열림 상태 관리 (필드 매핑)
|
||||
const [mappingSourceFieldsOpenState, setMappingSourceFieldsOpenState] = useState<boolean[]>([]);
|
||||
const [mappingTargetFieldsOpenState, setMappingTargetFieldsOpenState] = useState<boolean[]>([]);
|
||||
|
||||
// 🔥 외부 DB 관련 상태
|
||||
const [externalConnections, setExternalConnections] = useState<ExternalConnection[]>([]);
|
||||
const [externalConnectionsLoading, setExternalConnectionsLoading] = useState(false);
|
||||
|
|
@ -142,6 +151,18 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
}
|
||||
}, [targetType, selectedExternalConnectionId, externalTargetTable]);
|
||||
|
||||
// whereConditions 변경 시 Combobox 열림 상태 초기화
|
||||
useEffect(() => {
|
||||
setSourceFieldsOpenState(new Array(whereConditions.length).fill(false));
|
||||
setTargetFieldsOpenState(new Array(whereConditions.length).fill(false));
|
||||
}, [whereConditions.length]);
|
||||
|
||||
// fieldMappings 변경 시 Combobox 열림 상태 초기화
|
||||
useEffect(() => {
|
||||
setMappingSourceFieldsOpenState(new Array(fieldMappings.length).fill(false));
|
||||
setMappingTargetFieldsOpenState(new Array(fieldMappings.length).fill(false));
|
||||
}, [fieldMappings.length]);
|
||||
|
||||
// 연결된 소스 노드에서 필드 가져오기 (재귀적으로 모든 상위 노드 탐색)
|
||||
useEffect(() => {
|
||||
const getAllSourceFields = (
|
||||
|
|
@ -331,12 +352,27 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
|
||||
const columns = await tableTypeApi.getColumns(tableName);
|
||||
|
||||
const columnInfo: ColumnInfo[] = columns.map((col: any) => ({
|
||||
const columnInfo: ColumnInfo[] = columns.map((col: any) => {
|
||||
// is_nullable 파싱: "YES", true, 1 등을 true로, "NO", false, 0 등을 false로 변환
|
||||
const isNullableValue = col.is_nullable ?? col.isNullable;
|
||||
let isNullable = true; // 기본값: nullable
|
||||
|
||||
if (typeof isNullableValue === "boolean") {
|
||||
isNullable = isNullableValue;
|
||||
} else if (typeof isNullableValue === "string") {
|
||||
isNullable = isNullableValue.toUpperCase() === "YES" || isNullableValue.toUpperCase() === "TRUE";
|
||||
} else if (typeof isNullableValue === "number") {
|
||||
isNullable = isNullableValue !== 0;
|
||||
}
|
||||
|
||||
return {
|
||||
columnName: col.column_name || col.columnName,
|
||||
columnLabel: col.label_ko || col.columnLabel,
|
||||
dataType: col.data_type || col.dataType || "unknown",
|
||||
isNullable: col.is_nullable === "YES" || col.isNullable === true,
|
||||
}));
|
||||
isNullable,
|
||||
columnDefault: col.column_default ?? col.columnDefault ?? null,
|
||||
};
|
||||
});
|
||||
|
||||
setTargetColumns(columnInfo);
|
||||
console.log(`✅ UPDATE 노드 - 컬럼 ${columnInfo.length}개 로딩 완료`);
|
||||
|
|
@ -379,12 +415,20 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
];
|
||||
setFieldMappings(newMappings);
|
||||
updateNode(nodeId, { fieldMappings: newMappings });
|
||||
|
||||
// Combobox 열림 상태 배열 초기화
|
||||
setMappingSourceFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
setMappingTargetFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
};
|
||||
|
||||
const handleRemoveMapping = (index: number) => {
|
||||
const newMappings = fieldMappings.filter((_, i) => i !== index);
|
||||
setFieldMappings(newMappings);
|
||||
updateNode(nodeId, { fieldMappings: newMappings });
|
||||
|
||||
// Combobox 열림 상태 배열도 업데이트
|
||||
setMappingSourceFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
setMappingTargetFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
};
|
||||
|
||||
const handleMappingChange = (index: number, field: string, value: any) => {
|
||||
|
|
@ -452,12 +496,20 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
];
|
||||
setWhereConditions(newConditions);
|
||||
updateNode(nodeId, { whereConditions: newConditions });
|
||||
|
||||
// Combobox 열림 상태 배열 초기화
|
||||
setSourceFieldsOpenState(new Array(newConditions.length).fill(false));
|
||||
setTargetFieldsOpenState(new Array(newConditions.length).fill(false));
|
||||
};
|
||||
|
||||
const handleRemoveCondition = (index: number) => {
|
||||
const newConditions = whereConditions.filter((_, i) => i !== index);
|
||||
setWhereConditions(newConditions);
|
||||
updateNode(nodeId, { whereConditions: newConditions });
|
||||
|
||||
// Combobox 열림 상태 배열도 업데이트
|
||||
setSourceFieldsOpenState(new Array(newConditions.length).fill(false));
|
||||
setTargetFieldsOpenState(new Array(newConditions.length).fill(false));
|
||||
};
|
||||
|
||||
const handleConditionChange = (index: number, field: string, value: any) => {
|
||||
|
|
@ -550,17 +602,12 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
onClick={() => handleTargetTypeChange("external")}
|
||||
className={cn(
|
||||
"relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
|
||||
targetType === "external"
|
||||
? "border-green-500 bg-green-50"
|
||||
: "border-gray-200 hover:border-gray-300",
|
||||
targetType === "external" ? "border-green-500 bg-green-50" : "border-gray-200 hover:border-gray-300",
|
||||
)}
|
||||
>
|
||||
<Globe className={cn("h-5 w-5", targetType === "external" ? "text-green-600" : "text-gray-400")} />
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs font-medium",
|
||||
targetType === "external" ? "text-green-700" : "text-gray-600",
|
||||
)}
|
||||
className={cn("text-xs font-medium", targetType === "external" ? "text-green-700" : "text-gray-600")}
|
||||
>
|
||||
외부 DB
|
||||
</span>
|
||||
|
|
@ -576,9 +623,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
)}
|
||||
>
|
||||
<Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-gray-400")} />
|
||||
<span
|
||||
className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}
|
||||
>
|
||||
<span className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}>
|
||||
REST API
|
||||
</span>
|
||||
{targetType === "api" && <Check className="absolute top-2 right-2 h-4 w-4 text-purple-600" />}
|
||||
|
|
@ -933,10 +978,10 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
<div>
|
||||
<Label className="mb-1.5 block text-xs font-medium">
|
||||
요청 바디 템플릿
|
||||
<span className="ml-1 text-gray-500">{`{{fieldName}}`}으로 소스 필드 참조</span>
|
||||
<span className="ml-1 text-gray-500">{"{{fieldName}}"}으로 소스 필드 참조</span>
|
||||
</Label>
|
||||
<textarea
|
||||
placeholder={`{\n "id": "{{id}}",\n "name": "{{name}}",\n "email": "{{email}}"\n}`}
|
||||
placeholder={'{\n "id": "{{id}}",\n "name": "{{name}}",\n "email": "{{email}}"\n}'}
|
||||
value={apiBodyTemplate}
|
||||
onChange={(e) => {
|
||||
setApiBodyTemplate(e.target.value);
|
||||
|
|
@ -946,7 +991,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
rows={8}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
소스 데이터의 필드명을 {`{{필드명}}`} 형태로 참조할 수 있습니다.
|
||||
소스 데이터의 필드명을 {"{{필드명}}"} 형태로 참조할 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -993,27 +1038,77 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* 타겟 필드 */}
|
||||
{/* 타겟 필드 - Combobox */}
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">타겟 필드</Label>
|
||||
<Select
|
||||
value={condition.field}
|
||||
onValueChange={(value) => handleConditionChange(index, "field", value)}
|
||||
<Popover
|
||||
open={targetFieldsOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...targetFieldsOpenState];
|
||||
newState[index] = open;
|
||||
setTargetFieldsOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{targetColumns.map((col) => (
|
||||
<SelectItem key={col.columnName} value={col.columnName} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono">{col.columnLabel || col.columnName}</span>
|
||||
<span className="text-muted-foreground">{col.dataType}</span>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={targetFieldsOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{condition.field
|
||||
? (() => {
|
||||
const col = targetColumns.find((c) => c.columnName === condition.field);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-mono">{col?.columnLabel || condition.field}</span>
|
||||
<span className="text-muted-foreground text-xs">{col?.dataType}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
);
|
||||
})()
|
||||
: "필드 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{targetColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.columnName}
|
||||
value={col.columnName}
|
||||
onSelect={(currentValue) => {
|
||||
handleConditionChange(index, "field", currentValue);
|
||||
const newState = [...targetFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setTargetFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
condition.field === col.columnName ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-mono font-medium">{col.columnLabel || col.columnName}</span>
|
||||
<span className="text-muted-foreground text-[10px]">{col.dataType}</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 연산자 */}
|
||||
|
|
@ -1039,34 +1134,103 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
{/* IS_NULL, IS_NOT_NULL이 아닐 때만 소스 필드와 정적 값 표시 */}
|
||||
{condition.operator !== "IS_NULL" && condition.operator !== "IS_NOT_NULL" && (
|
||||
<>
|
||||
{/* 소스 필드 또는 값 */}
|
||||
{/* 소스 필드 - Combobox */}
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">소스 필드 (선택)</Label>
|
||||
<Select
|
||||
value={condition.sourceField || "_NONE_"}
|
||||
onValueChange={(value) =>
|
||||
handleConditionChange(index, "sourceField", value === "_NONE_" ? undefined : value)
|
||||
}
|
||||
<Popover
|
||||
open={sourceFieldsOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...sourceFieldsOpenState];
|
||||
newState[index] = open;
|
||||
setSourceFieldsOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="소스 필드 선택 (선택)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="_NONE_" className="text-xs text-gray-400">
|
||||
없음 (정적 값 사용)
|
||||
</SelectItem>
|
||||
{sourceFields.map((field) => (
|
||||
<SelectItem key={field.name} value={field.name} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-medium">{field.label || field.name}</span>
|
||||
{field.label && field.label !== field.name && (
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={sourceFieldsOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{condition.sourceField
|
||||
? (() => {
|
||||
const field = sourceFields.find((f) => f.name === condition.sourceField);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-medium">
|
||||
{field?.label || condition.sourceField}
|
||||
</span>
|
||||
{field?.label && field.label !== field.name && (
|
||||
<span className="text-muted-foreground font-mono text-xs">{field.name}</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
);
|
||||
})()
|
||||
: "소스 필드 선택 (선택)"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="소스 필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
value="_NONE_"
|
||||
onSelect={() => {
|
||||
handleConditionChange(index, "sourceField", undefined);
|
||||
const newState = [...sourceFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setSourceFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs text-gray-400 sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
!condition.sourceField ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
없음 (정적 값 사용)
|
||||
</CommandItem>
|
||||
{sourceFields.map((field) => (
|
||||
<CommandItem
|
||||
key={field.name}
|
||||
value={field.name}
|
||||
onSelect={(currentValue) => {
|
||||
handleConditionChange(index, "sourceField", currentValue);
|
||||
const newState = [...sourceFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setSourceFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
condition.sourceField === field.name ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{field.label || field.name}</span>
|
||||
{field.label && field.label !== field.name && (
|
||||
<span className="text-muted-foreground font-mono text-[10px]">
|
||||
{field.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 정적 값 */}
|
||||
|
|
@ -1139,7 +1303,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* 소스 필드 - REST API인 경우 입력, 아니면 드롭다운 */}
|
||||
{/* 소스 필드 - REST API인 경우 입력, 아니면 Combobox */}
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">
|
||||
소스 필드{hasRestAPISource && " (REST API - 직접 입력)"}
|
||||
|
|
@ -1151,35 +1315,89 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
placeholder="API 응답 JSON의 필드명을 입력하세요"
|
||||
className="mt-1 h-8 text-xs"
|
||||
/>
|
||||
) : (
|
||||
<Select
|
||||
value={mapping.sourceField || ""}
|
||||
onValueChange={(value) => handleMappingChange(index, "sourceField", value || null)}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="소스 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sourceFields.length === 0 ? (
|
||||
<div className="p-2 text-center text-xs text-gray-400">
|
||||
) : sourceFields.length === 0 ? (
|
||||
<div className="mt-1 rounded border bg-gray-50 p-2 text-center text-xs text-gray-400">
|
||||
연결된 소스 노드가 없습니다
|
||||
</div>
|
||||
) : (
|
||||
sourceFields.map((field) => (
|
||||
<SelectItem key={field.name} value={field.name} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-medium">{field.label || field.name}</span>
|
||||
{field.label && field.label !== field.name && (
|
||||
<Popover
|
||||
open={mappingSourceFieldsOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...mappingSourceFieldsOpenState];
|
||||
newState[index] = open;
|
||||
setMappingSourceFieldsOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={mappingSourceFieldsOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{mapping.sourceField
|
||||
? (() => {
|
||||
const field = sourceFields.find((f) => f.name === mapping.sourceField);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-medium">
|
||||
{field?.label || mapping.sourceField}
|
||||
</span>
|
||||
{field?.label && field.label !== field.name && (
|
||||
<span className="text-muted-foreground font-mono text-xs">
|
||||
{field.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))
|
||||
);
|
||||
})()
|
||||
: "소스 필드 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="소스 필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sourceFields.map((field) => (
|
||||
<CommandItem
|
||||
key={field.name}
|
||||
value={field.name}
|
||||
onSelect={(currentValue) => {
|
||||
handleMappingChange(index, "sourceField", currentValue || null);
|
||||
const newState = [...mappingSourceFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setMappingSourceFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
mapping.sourceField === field.name ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{field.label || field.name}</span>
|
||||
{field.label && field.label !== field.name && (
|
||||
<span className="text-muted-foreground font-mono text-[10px]">
|
||||
{field.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -1187,30 +1405,91 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
<ArrowRight className="h-4 w-4 text-blue-600" />
|
||||
</div>
|
||||
|
||||
{/* 타겟 필드 드롭다운 */}
|
||||
{/* 타겟 필드 - Combobox */}
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">타겟 필드</Label>
|
||||
<Select
|
||||
value={mapping.targetField}
|
||||
onValueChange={(value) => handleMappingChange(index, "targetField", value)}
|
||||
<Popover
|
||||
open={mappingTargetFieldsOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...mappingTargetFieldsOpenState];
|
||||
newState[index] = open;
|
||||
setMappingTargetFieldsOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="타겟 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{targetColumns.map((col) => (
|
||||
<SelectItem key={col.columnName} value={col.columnName} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono">{col.columnLabel || col.columnName}</span>
|
||||
<span className="text-muted-foreground">
|
||||
{col.dataType}
|
||||
{!col.isNullable && <span className="text-red-500">*</span>}
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={mappingTargetFieldsOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{mapping.targetField
|
||||
? (() => {
|
||||
const col = targetColumns.find((c) => c.columnName === mapping.targetField);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-mono">
|
||||
{col?.columnLabel || mapping.targetField}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{col?.dataType}
|
||||
{col && !col.isNullable && <span className="text-red-500">*</span>}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
);
|
||||
})()
|
||||
: "타겟 필드 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="타겟 필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{targetColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.columnName}
|
||||
value={col.columnName}
|
||||
onSelect={(currentValue) => {
|
||||
handleMappingChange(index, "targetField", currentValue);
|
||||
const newState = [...mappingTargetFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setMappingTargetFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
mapping.targetField === col.columnName ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-mono font-medium">
|
||||
{col.columnLabel || col.columnName}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-[10px]">
|
||||
{col.dataType}
|
||||
{col.columnDefault ? (
|
||||
<span className="text-blue-600"> 🔵기본값</span>
|
||||
) : (
|
||||
!col.isNullable && <span className="text-red-500"> *필수</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 정적 값 */}
|
||||
|
|
@ -1237,7 +1516,6 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ interface ColumnInfo {
|
|||
columnLabel?: string;
|
||||
dataType: string;
|
||||
isNullable: boolean;
|
||||
columnDefault?: string | null;
|
||||
}
|
||||
|
||||
export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesProps) {
|
||||
|
|
@ -85,6 +86,11 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
|
|||
// REST API 소스 노드 연결 여부
|
||||
const [hasRestAPISource, setHasRestAPISource] = useState(false);
|
||||
|
||||
// Combobox 열림 상태 관리
|
||||
const [conflictKeysOpenState, setConflictKeysOpenState] = useState<boolean[]>([]);
|
||||
const [mappingSourceFieldsOpenState, setMappingSourceFieldsOpenState] = useState<boolean[]>([]);
|
||||
const [mappingTargetFieldsOpenState, setMappingTargetFieldsOpenState] = useState<boolean[]>([]);
|
||||
|
||||
// 데이터 변경 시 로컬 상태 업데이트
|
||||
useEffect(() => {
|
||||
setDisplayName(data.displayName || data.targetTable);
|
||||
|
|
@ -129,6 +135,17 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
|
|||
}
|
||||
}, [targetType, selectedExternalConnectionId, externalTargetTable]);
|
||||
|
||||
// conflictKeys 변경 시 Combobox 열림 상태 초기화
|
||||
useEffect(() => {
|
||||
setConflictKeysOpenState(new Array(conflictKeys.length).fill(false));
|
||||
}, [conflictKeys.length]);
|
||||
|
||||
// fieldMappings 변경 시 Combobox 열림 상태 초기화
|
||||
useEffect(() => {
|
||||
setMappingSourceFieldsOpenState(new Array(fieldMappings.length).fill(false));
|
||||
setMappingTargetFieldsOpenState(new Array(fieldMappings.length).fill(false));
|
||||
}, [fieldMappings.length]);
|
||||
|
||||
// 연결된 소스 노드에서 필드 가져오기 (재귀적으로 모든 상위 노드 탐색)
|
||||
useEffect(() => {
|
||||
const getAllSourceFields = (
|
||||
|
|
@ -326,12 +343,27 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
|
|||
setColumnsLoading(true);
|
||||
const columns = await tableTypeApi.getColumns(tableName);
|
||||
|
||||
const columnInfo: ColumnInfo[] = columns.map((col: any) => ({
|
||||
const columnInfo: ColumnInfo[] = columns.map((col: any) => {
|
||||
// is_nullable 파싱: "YES", true, 1 등을 true로, "NO", false, 0 등을 false로 변환
|
||||
const isNullableValue = col.is_nullable ?? col.isNullable;
|
||||
let isNullable = true; // 기본값: nullable
|
||||
|
||||
if (typeof isNullableValue === "boolean") {
|
||||
isNullable = isNullableValue;
|
||||
} else if (typeof isNullableValue === "string") {
|
||||
isNullable = isNullableValue.toUpperCase() === "YES" || isNullableValue.toUpperCase() === "TRUE";
|
||||
} else if (typeof isNullableValue === "number") {
|
||||
isNullable = isNullableValue !== 0;
|
||||
}
|
||||
|
||||
return {
|
||||
columnName: col.column_name || col.columnName,
|
||||
columnLabel: col.label_ko || col.columnLabel,
|
||||
dataType: col.data_type || col.dataType || "unknown",
|
||||
isNullable: col.is_nullable === "YES" || col.isNullable === true,
|
||||
}));
|
||||
isNullable,
|
||||
columnDefault: col.column_default ?? col.columnDefault ?? null,
|
||||
};
|
||||
});
|
||||
|
||||
setTargetColumns(columnInfo);
|
||||
} catch (error) {
|
||||
|
|
@ -401,12 +433,20 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
|
|||
];
|
||||
setFieldMappings(newMappings);
|
||||
updateNode(nodeId, { fieldMappings: newMappings });
|
||||
|
||||
// Combobox 열림 상태 배열 초기화
|
||||
setMappingSourceFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
setMappingTargetFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
};
|
||||
|
||||
const handleRemoveMapping = (index: number) => {
|
||||
const newMappings = fieldMappings.filter((_, i) => i !== index);
|
||||
setFieldMappings(newMappings);
|
||||
updateNode(nodeId, { fieldMappings: newMappings });
|
||||
|
||||
// Combobox 열림 상태 배열도 업데이트
|
||||
setMappingSourceFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
setMappingTargetFieldsOpenState(new Array(newMappings.length).fill(false));
|
||||
};
|
||||
|
||||
const handleMappingChange = (index: number, field: string, value: any) => {
|
||||
|
|
@ -934,24 +974,46 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* 충돌 키 추가 드롭다운 */}
|
||||
<Select onValueChange={handleAddConflictKey}>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="충돌 키 추가..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{/* 충돌 키 추가 Combobox */}
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
충돌 키 추가...
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="충돌 키 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{targetColumns
|
||||
.filter((col) => !conflictKeys.includes(col.columnName))
|
||||
.map((col) => (
|
||||
<SelectItem key={col.columnName} value={col.columnName} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono">{col.columnLabel || col.columnName}</span>
|
||||
<span className="text-muted-foreground">{col.dataType}</span>
|
||||
<CommandItem
|
||||
key={col.columnName}
|
||||
value={col.columnName}
|
||||
onSelect={(currentValue) => {
|
||||
handleAddConflictKey(currentValue);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-mono font-medium">{col.columnLabel || col.columnName}</span>
|
||||
<span className="text-muted-foreground text-[10px]">{col.dataType}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</CommandItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -1010,32 +1072,84 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
|
|||
className="mt-1 h-8 text-xs"
|
||||
/>
|
||||
) : (
|
||||
<Select
|
||||
value={mapping.sourceField || ""}
|
||||
onValueChange={(value) => handleMappingChange(index, "sourceField", value || null)}
|
||||
<Popover
|
||||
open={mappingSourceFieldsOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...mappingSourceFieldsOpenState];
|
||||
newState[index] = open;
|
||||
setMappingSourceFieldsOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="소스 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sourceFields.length === 0 ? (
|
||||
<div className="p-2 text-center text-xs text-gray-400">
|
||||
연결된 소스 노드가 없습니다
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={mappingSourceFieldsOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{mapping.sourceField
|
||||
? (() => {
|
||||
const field = sourceFields.find((f) => f.name === mapping.sourceField);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-medium">
|
||||
{field?.label || mapping.sourceField}
|
||||
</span>
|
||||
{field?.label && field.label !== field.name && (
|
||||
<span className="text-muted-foreground font-mono text-xs">
|
||||
{field.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
sourceFields.map((field) => (
|
||||
<SelectItem key={field.name} value={field.name} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
);
|
||||
})()
|
||||
: "소스 필드 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="소스 필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sourceFields.map((field) => (
|
||||
<CommandItem
|
||||
key={field.name}
|
||||
value={field.name}
|
||||
onSelect={(currentValue) => {
|
||||
handleMappingChange(index, "sourceField", currentValue || null);
|
||||
const newState = [...mappingSourceFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setMappingSourceFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
mapping.sourceField === field.name ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{field.label || field.name}</span>
|
||||
{field.label && field.label !== field.name && (
|
||||
<span className="text-muted-foreground font-mono text-xs">{field.name}</span>
|
||||
<span className="text-muted-foreground font-mono text-[10px]">
|
||||
{field.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -1043,30 +1157,91 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
|
|||
<ArrowRight className="h-4 w-4 text-purple-600" />
|
||||
</div>
|
||||
|
||||
{/* 타겟 필드 드롭다운 */}
|
||||
{/* 타겟 필드 Combobox */}
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">타겟 필드</Label>
|
||||
<Select
|
||||
value={mapping.targetField}
|
||||
onValueChange={(value) => handleMappingChange(index, "targetField", value)}
|
||||
<Popover
|
||||
open={mappingTargetFieldsOpenState[index]}
|
||||
onOpenChange={(open) => {
|
||||
const newState = [...mappingTargetFieldsOpenState];
|
||||
newState[index] = open;
|
||||
setMappingTargetFieldsOpenState(newState);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-8 text-xs">
|
||||
<SelectValue placeholder="타겟 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{targetColumns.map((col) => (
|
||||
<SelectItem key={col.columnName} value={col.columnName} className="text-xs">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono">{col.columnLabel || col.columnName}</span>
|
||||
<span className="text-muted-foreground">
|
||||
{col.dataType}
|
||||
{!col.isNullable && <span className="text-red-500">*</span>}
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={mappingTargetFieldsOpenState[index]}
|
||||
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{mapping.targetField
|
||||
? (() => {
|
||||
const col = targetColumns.find((c) => c.columnName === mapping.targetField);
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 overflow-hidden">
|
||||
<span className="truncate font-mono">
|
||||
{col?.columnLabel || mapping.targetField}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{col?.dataType}
|
||||
{col && !col.isNullable && <span className="text-red-500">*</span>}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
);
|
||||
})()
|
||||
: "타겟 필드 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="타겟 필드 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{targetColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.columnName}
|
||||
value={col.columnName}
|
||||
onSelect={(currentValue) => {
|
||||
handleMappingChange(index, "targetField", currentValue);
|
||||
const newState = [...mappingTargetFieldsOpenState];
|
||||
newState[index] = false;
|
||||
setMappingTargetFieldsOpenState(newState);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
mapping.targetField === col.columnName ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-mono font-medium">
|
||||
{col.columnLabel || col.columnName}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-[10px]">
|
||||
{col.dataType}
|
||||
{col.columnDefault ? (
|
||||
<span className="text-blue-600"> 🔵기본값</span>
|
||||
) : (
|
||||
!col.isNullable && <span className="text-red-500"> *필수</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 정적 값 */}
|
||||
|
|
@ -1092,7 +1267,6 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
|
|||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import type { NodePaletteItem } from "@/types/node-editor";
|
|||
|
||||
export function NodePalette() {
|
||||
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
|
||||
new Set(["source", "transform", "action", "utility"]),
|
||||
new Set(), // 기본적으로 모든 아코디언 닫힘
|
||||
);
|
||||
|
||||
const toggleCategory = (categoryId: string) => {
|
||||
|
|
|
|||
|
|
@ -416,7 +416,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
|
|||
} flex h-[calc(100vh-3.5rem)] w-72 max-w-72 min-w-72 flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
|
||||
>
|
||||
{/* 사이드바 상단 - Admin/User 모드 전환 버튼 (관리자만) */}
|
||||
{(user as ExtendedUserInfo)?.userType === "admin" && (
|
||||
{(user as ExtendedUserInfo)?.userType?.toLowerCase().includes("admin") && (
|
||||
<div className="border-b border-slate-200 p-3">
|
||||
<Button
|
||||
onClick={handleModeSwitch}
|
||||
|
|
|
|||
|
|
@ -3076,7 +3076,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
})
|
||||
: null;
|
||||
|
||||
// 일반 컴포넌트만 격자 스냅 적용 (그룹 제외)
|
||||
// 일반 컴포넌트 및 플로우 버튼 그룹에 격자 스냅 적용 (일반 그룹 제외)
|
||||
if (draggedComponent?.type !== "group" && layout.gridSettings?.snapToGrid && currentGridInfo) {
|
||||
finalPosition = snapToGrid(
|
||||
{
|
||||
|
|
@ -3094,6 +3094,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
);
|
||||
|
||||
console.log("🎯 격자 스냅 적용됨:", {
|
||||
componentType: draggedComponent?.type,
|
||||
resolution: `${screenResolution.width}x${screenResolution.height}`,
|
||||
originalPosition: dragState.currentPosition,
|
||||
snappedPosition: finalPosition,
|
||||
|
|
@ -3516,12 +3517,79 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
// 고유한 그룹 ID 생성
|
||||
const newGroupId = generateGroupId();
|
||||
|
||||
// 버튼들을 그룹으로 묶기 (설정 포함)
|
||||
// 🔧 그룹 위치 및 버튼 재배치 계산
|
||||
const align = settings.align;
|
||||
const direction = settings.direction;
|
||||
const gap = settings.gap;
|
||||
|
||||
const groupY = Math.min(...selectedComponents.map((b) => b.position.y));
|
||||
let anchorButton; // 기준이 되는 버튼
|
||||
let groupX: number;
|
||||
|
||||
// align에 따라 기준 버튼과 그룹 시작점 결정
|
||||
if (direction === "horizontal") {
|
||||
if (align === "end") {
|
||||
// 끝점 정렬: 가장 오른쪽 버튼이 기준
|
||||
anchorButton = selectedComponents.reduce((max, btn) => {
|
||||
const rightEdge = btn.position.x + (btn.size?.width || 100);
|
||||
const maxRightEdge = max.position.x + (max.size?.width || 100);
|
||||
return rightEdge > maxRightEdge ? btn : max;
|
||||
});
|
||||
|
||||
// 전체 그룹 너비 계산
|
||||
const totalWidth = selectedComponents.reduce((total, btn, index) => {
|
||||
const buttonWidth = btn.size?.width || 100;
|
||||
const gapWidth = index < selectedComponents.length - 1 ? gap : 0;
|
||||
return total + buttonWidth + gapWidth;
|
||||
}, 0);
|
||||
|
||||
// 그룹 시작점 = 기준 버튼의 오른쪽 끝 - 전체 그룹 너비
|
||||
groupX = anchorButton.position.x + (anchorButton.size?.width || 100) - totalWidth;
|
||||
} else if (align === "center") {
|
||||
// 중앙 정렬: 버튼들의 중심점을 기준으로
|
||||
const minX = Math.min(...selectedComponents.map((b) => b.position.x));
|
||||
const maxX = Math.max(...selectedComponents.map((b) => b.position.x + (b.size?.width || 100)));
|
||||
const centerX = (minX + maxX) / 2;
|
||||
|
||||
const totalWidth = selectedComponents.reduce((total, btn, index) => {
|
||||
const buttonWidth = btn.size?.width || 100;
|
||||
const gapWidth = index < selectedComponents.length - 1 ? gap : 0;
|
||||
return total + buttonWidth + gapWidth;
|
||||
}, 0);
|
||||
|
||||
groupX = centerX - totalWidth / 2;
|
||||
anchorButton = selectedComponents[0]; // 중앙 정렬은 첫 번째 버튼 기준
|
||||
} else {
|
||||
// 시작점 정렬: 가장 왼쪽 버튼이 기준
|
||||
anchorButton = selectedComponents.reduce((min, btn) => {
|
||||
return btn.position.x < min.position.x ? btn : min;
|
||||
});
|
||||
groupX = anchorButton.position.x;
|
||||
}
|
||||
} else {
|
||||
// 세로 정렬: 가장 위쪽 버튼이 기준
|
||||
anchorButton = selectedComponents.reduce((min, btn) => {
|
||||
return btn.position.y < min.position.y ? btn : min;
|
||||
});
|
||||
groupX = Math.min(...selectedComponents.map((b) => b.position.x));
|
||||
}
|
||||
|
||||
// 🔧 버튼들의 위치를 그룹 기준으로 재배치
|
||||
// 기준 버튼의 절대 위치를 유지하고, FlexBox가 나머지를 자동 정렬
|
||||
const groupedButtons = selectedComponents.map((button) => {
|
||||
const currentConfig = (button as any).webTypeConfig?.flowVisibilityConfig || {};
|
||||
|
||||
// 모든 버튼을 그룹 시작점에 배치
|
||||
// FlexBox가 자동으로 정렬하여 기준 버튼의 위치가 유지됨
|
||||
const newPosition = {
|
||||
x: groupX,
|
||||
y: groupY,
|
||||
z: button.position.z || 1,
|
||||
};
|
||||
|
||||
return {
|
||||
...button,
|
||||
position: newPosition,
|
||||
webTypeConfig: {
|
||||
...(button as any).webTypeConfig,
|
||||
flowVisibilityConfig: {
|
||||
|
|
@ -3558,7 +3626,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
console.log("✅ 플로우 버튼 그룹 생성 완료:", {
|
||||
groupId: newGroupId,
|
||||
buttonCount: selectedComponents.length,
|
||||
buttons: selectedComponents.map((b) => b.id),
|
||||
buttons: selectedComponents.map((b) => ({ id: b.id, position: b.position })),
|
||||
groupPosition: { x: groupX, y: groupY },
|
||||
settings,
|
||||
});
|
||||
},
|
||||
|
|
@ -4316,8 +4385,26 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
<div className="bg-card text-foreground border-border pointer-events-none fixed right-6 bottom-6 z-50 rounded-lg border px-4 py-2 text-sm font-medium shadow-md">
|
||||
🔍 {Math.round(zoomLevel * 100)}%
|
||||
</div>
|
||||
{/* 🆕 플로우 버튼 그룹 제어 (다중 선택 시 표시) */}
|
||||
{groupState.selectedComponents.length >= 2 && (
|
||||
{/* 🆕 플로우 버튼 그룹 제어 (버튼 선택 시 표시) */}
|
||||
{(() => {
|
||||
// 선택된 컴포넌트들
|
||||
const selectedComps = layout.components.filter((c) => groupState.selectedComponents.includes(c.id));
|
||||
|
||||
// 버튼 컴포넌트만 필터링
|
||||
const selectedButtons = selectedComps.filter((comp) => areAllButtons([comp]));
|
||||
|
||||
// 플로우 그룹에 속한 버튼이 있는지 확인
|
||||
const hasFlowGroupButton = selectedButtons.some((btn) => {
|
||||
const flowConfig = (btn as any).webTypeConfig?.flowVisibilityConfig;
|
||||
return flowConfig?.enabled && flowConfig.layoutBehavior === "auto-compact" && flowConfig.groupId;
|
||||
});
|
||||
|
||||
// 버튼이 선택되었거나 플로우 그룹 버튼이 있으면 표시
|
||||
const shouldShow = selectedButtons.length >= 1 && (selectedButtons.length >= 2 || hasFlowGroupButton);
|
||||
|
||||
if (!shouldShow) return null;
|
||||
|
||||
return (
|
||||
<div className="bg-card border-border fixed right-6 bottom-20 z-50 rounded-lg border shadow-lg">
|
||||
<div className="flex flex-col gap-2 p-3">
|
||||
<div className="mb-1 flex items-center gap-2 text-xs text-gray-600">
|
||||
|
|
@ -4336,15 +4423,16 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
<polyline points="3.29 7 12 12 20.71 7"></polyline>
|
||||
<line x1="12" y1="22" x2="12" y2="12"></line>
|
||||
</svg>
|
||||
<span className="font-medium">{groupState.selectedComponents.length}개 선택됨</span>
|
||||
<span className="font-medium">{selectedButtons.length}개 버튼 선택됨</span>
|
||||
</div>
|
||||
|
||||
{/* 그룹 생성 버튼 (2개 이상 선택 시) */}
|
||||
{selectedButtons.length >= 2 && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="default"
|
||||
onClick={handleFlowButtonGroup}
|
||||
disabled={
|
||||
!areAllButtons(layout.components.filter((c) => groupState.selectedComponents.includes(c.id)))
|
||||
}
|
||||
disabled={selectedButtons.length < 2}
|
||||
className="flex items-center gap-2 text-xs"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -4364,6 +4452,10 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
</svg>
|
||||
플로우 그룹으로 묶기
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 그룹 해제 버튼 (플로우 그룹 버튼이 있으면 항상 표시) */}
|
||||
{hasFlowGroupButton && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
|
|
@ -4388,14 +4480,14 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
</svg>
|
||||
그룹 해제
|
||||
</Button>
|
||||
{areAllButtons(layout.components.filter((c) => groupState.selectedComponents.includes(c.id))) ? (
|
||||
<p className="mt-1 text-[10px] text-green-600">✓ 모두 버튼 컴포넌트</p>
|
||||
) : (
|
||||
<p className="mt-1 text-[10px] text-orange-600">⚠ 버튼만 그룹 가능</p>
|
||||
)}
|
||||
|
||||
{/* 상태 표시 */}
|
||||
{hasFlowGroupButton && <p className="mt-1 text-[10px] text-blue-600">✓ 플로우 그룹 버튼</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
);
|
||||
})()}
|
||||
{/* 🔥 줌 적용 시 스크롤 영역 확보를 위한 래퍼 */}
|
||||
<div
|
||||
className="flex justify-center"
|
||||
|
|
@ -4707,20 +4799,20 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
const groupConfig = (firstButton as any).webTypeConfig
|
||||
?.flowVisibilityConfig as FlowVisibilityConfig;
|
||||
|
||||
// 🔧 그룹의 위치는 모든 버튼 중 가장 왼쪽/위쪽 버튼의 위치 사용
|
||||
const groupPosition = buttons.reduce(
|
||||
(min, button) => ({
|
||||
x: Math.min(min.x, button.position.x),
|
||||
y: Math.min(min.y, button.position.y),
|
||||
z: min.z,
|
||||
}),
|
||||
{ x: buttons[0].position.x, y: buttons[0].position.y, z: buttons[0].position.z || 2 },
|
||||
);
|
||||
|
||||
// 🆕 그룹의 크기 계산: 버튼들의 실제 크기 + 간격을 기준으로 계산
|
||||
// 🔧 그룹의 위치 및 크기 계산
|
||||
// 모든 버튼이 같은 위치(groupX, groupY)에 배치되어 있으므로
|
||||
// 첫 번째 버튼의 위치를 그룹 시작점으로 사용
|
||||
const direction = groupConfig.groupDirection || "horizontal";
|
||||
const gap = groupConfig.groupGap ?? 8;
|
||||
const align = groupConfig.groupAlign || "start";
|
||||
|
||||
const groupPosition = {
|
||||
x: buttons[0].position.x,
|
||||
y: buttons[0].position.y,
|
||||
z: buttons[0].position.z || 2,
|
||||
};
|
||||
|
||||
// 버튼들의 실제 크기 계산
|
||||
let groupWidth = 0;
|
||||
let groupHeight = 0;
|
||||
|
||||
|
|
@ -4731,12 +4823,10 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
const gapWidth = index < buttons.length - 1 ? gap : 0;
|
||||
return total + buttonWidth + gapWidth;
|
||||
}, 0);
|
||||
// 세로는 가장 큰 버튼의 높이
|
||||
groupHeight = Math.max(...buttons.map((b) => b.size?.height || 40));
|
||||
} else {
|
||||
// 세로 정렬: 가로는 가장 큰 버튼의 너비
|
||||
// 세로 정렬
|
||||
groupWidth = Math.max(...buttons.map((b) => b.size?.width || 100));
|
||||
// 세로는 모든 버튼의 높이 + 간격
|
||||
groupHeight = buttons.reduce((total, button, index) => {
|
||||
const buttonHeight = button.size?.height || 40;
|
||||
const gapHeight = index < buttons.length - 1 ? gap : 0;
|
||||
|
|
@ -4744,6 +4834,14 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
}, 0);
|
||||
}
|
||||
|
||||
// 🆕 그룹 전체가 선택되었는지 확인
|
||||
const isGroupSelected = buttons.every(
|
||||
(btn) => selectedComponent?.id === btn.id || groupState.selectedComponents.includes(btn.id),
|
||||
);
|
||||
const hasAnySelected = buttons.some(
|
||||
(btn) => selectedComponent?.id === btn.id || groupState.selectedComponents.includes(btn.id),
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`flow-button-group-${groupId}`}
|
||||
|
|
@ -4754,7 +4852,9 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
zIndex: groupPosition.z,
|
||||
width: `${groupWidth}px`, // 🆕 명시적 너비
|
||||
height: `${groupHeight}px`, // 🆕 명시적 높이
|
||||
pointerEvents: "none", // 그룹 컨테이너는 이벤트 차단하여 개별 버튼 클릭 가능
|
||||
}}
|
||||
className={hasAnySelected ? "rounded outline-2 outline-offset-2 outline-blue-500" : ""}
|
||||
>
|
||||
<FlowButtonGroup
|
||||
buttons={buttons}
|
||||
|
|
@ -4805,10 +4905,62 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
display: "inline-block",
|
||||
width: button.size?.width || 100,
|
||||
height: button.size?.height || 40,
|
||||
pointerEvents: "auto", // 개별 버튼은 이벤트 활성화
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={(e) => {
|
||||
onMouseDown={(e) => {
|
||||
// 클릭이 아닌 드래그인 경우에만 드래그 시작
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const startX = e.clientX;
|
||||
const startY = e.clientY;
|
||||
let isDragging = false;
|
||||
let dragStarted = false;
|
||||
|
||||
const handleMouseMove = (moveEvent: MouseEvent) => {
|
||||
const deltaX = Math.abs(moveEvent.clientX - startX);
|
||||
const deltaY = Math.abs(moveEvent.clientY - startY);
|
||||
|
||||
// 5픽셀 이상 움직이면 드래그로 간주
|
||||
if ((deltaX > 5 || deltaY > 5) && !dragStarted) {
|
||||
isDragging = true;
|
||||
dragStarted = true;
|
||||
|
||||
// Shift 키를 누르지 않았으면 같은 그룹의 버튼들도 모두 선택
|
||||
if (!e.shiftKey) {
|
||||
const buttonIds = buttons.map((b) => b.id);
|
||||
setGroupState((prev) => ({
|
||||
...prev,
|
||||
selectedComponents: buttonIds,
|
||||
}));
|
||||
}
|
||||
|
||||
// 드래그 시작
|
||||
startComponentDrag(button, e as any);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
|
||||
// 드래그가 아니면 클릭으로 처리
|
||||
if (!isDragging) {
|
||||
// Shift 키를 누르지 않았으면 같은 그룹의 버튼들도 모두 선택
|
||||
if (!e.shiftKey) {
|
||||
const buttonIds = buttons.map((b) => b.id);
|
||||
setGroupState((prev) => ({
|
||||
...prev,
|
||||
selectedComponents: buttonIds,
|
||||
}));
|
||||
}
|
||||
handleComponentClick(button, e);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
}}
|
||||
onDoubleClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -4817,12 +4969,12 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
className={
|
||||
selectedComponent?.id === button.id ||
|
||||
groupState.selectedComponents.includes(button.id)
|
||||
? "outline outline-2 outline-offset-2 outline-blue-500"
|
||||
? "outline-1 outline-offset-1 outline-blue-400"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{/* 그룹 내부에서는 DynamicComponentRenderer로 직접 렌더링 */}
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
<div style={{ width: "100%", height: "100%", pointerEvents: "none" }}>
|
||||
<DynamicComponentRenderer
|
||||
component={relativeButton}
|
||||
isDesignMode={true}
|
||||
|
|
|
|||
|
|
@ -195,6 +195,32 @@ export function FlowWidget({
|
|||
setStepCounts(countsMap);
|
||||
}
|
||||
}
|
||||
|
||||
// 🆕 플로우 로드 후 첫 번째 스텝 자동 선택
|
||||
if (sortedSteps.length > 0) {
|
||||
const firstStep = sortedSteps[0];
|
||||
setSelectedStepId(firstStep.id);
|
||||
setSelectedStep(flowComponentId, firstStep.id);
|
||||
console.log("✅ [FlowWidget] 첫 번째 단계 자동 선택:", {
|
||||
flowComponentId,
|
||||
stepId: firstStep.id,
|
||||
stepName: firstStep.stepName,
|
||||
});
|
||||
|
||||
// 첫 번째 스텝의 데이터 로드
|
||||
try {
|
||||
const response = await getStepDataList(flowId!, firstStep.id, 1, 100);
|
||||
if (response.success) {
|
||||
const rows = response.data?.records || [];
|
||||
setStepData(rows);
|
||||
if (rows.length > 0) {
|
||||
setStepDataColumns(Object.keys(rows[0]));
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("첫 번째 스텝 데이터 로드 실패:", err);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error("Failed to load flow data:", err);
|
||||
|
|
@ -732,12 +758,12 @@ export function FlowWidget({
|
|||
</div>
|
||||
|
||||
{/* 데스크톱: 테이블 뷰 - 고정 높이 + 스크롤 */}
|
||||
<div className="hidden overflow-auto @sm:block" style={{ height: "450px" }}>
|
||||
<Table>
|
||||
<div className="relative hidden overflow-auto @sm:block" style={{ height: "450px" }}>
|
||||
<Table noWrapper>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50 hover:bg-muted/50">
|
||||
<TableRow className="hover:bg-muted/50">
|
||||
{allowDataMove && (
|
||||
<TableHead className="bg-muted/50 sticky top-0 left-0 z-20 w-12 border-b px-3 py-2 text-center shadow-sm">
|
||||
<TableHead className="bg-background sticky top-0 left-0 z-20 w-12 border-b px-3 py-2 text-center shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
|
||||
<Checkbox
|
||||
checked={selectedRows.size === stepData.length && stepData.length > 0}
|
||||
onCheckedChange={toggleAllRows}
|
||||
|
|
@ -747,7 +773,7 @@ export function FlowWidget({
|
|||
{stepDataColumns.map((col) => (
|
||||
<TableHead
|
||||
key={col}
|
||||
className="bg-muted/50 sticky top-0 z-10 border-b px-3 py-2 text-xs font-semibold whitespace-nowrap sm:text-sm"
|
||||
className="bg-background sticky top-0 z-10 border-b px-3 py-2 text-xs font-semibold whitespace-nowrap shadow-[0_1px_0_0_rgb(0,0,0,0.1)] sm:text-sm"
|
||||
>
|
||||
{col}
|
||||
</TableHead>
|
||||
|
|
|
|||
Loading…
Reference in New Issue