kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge branch 'ksh-v2-work' into ksh-partial-quantity-flow 

ksh-v2-work의 최신 변경사항을 동기화한다.
주요 병합 내용:
- GRID-V6 정사각형 블록 그리드 시스템 (842ac27d)
- POP 그리드 시스템 명칭 통일 + Dead Code 제거 (320100c4)
- 다수 PC 화면 config-panel 리팩토링 (jskim/mhkim/gbpark)
- V2 컴포넌트 config-panel 신규 18종
- 감사 로그 기능 강화
충돌 해결: 0건 (자동 병합 완료)
This commit is contained in:
SeongHyun Kim 2026-03-13 16:58:58 +09:00
parent c4d7b16538 320100c4e2
commit ed0f3393f6
187 changed files with 36584 additions and 13029 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
.cursor/agents/pipeline-backend.md
View File

@ -1,66 +0,0 @@
---
name: pipeline-backend
description: Agent Pipeline 백엔드 전문가. Express + TypeScript + PostgreSQL Raw Query 기반 API 구현. 멀티테넌시(company_code) 필터링 필수.
model: inherit
---
# Role
You are a Backend specialist for ERP-node project.
Stack: Node.js + Express + TypeScript + PostgreSQL Raw Query.
# CRITICAL PROJECT RULES
## 1. Multi-tenancy (ABSOLUTE MUST!)
- ALL queries MUST include company_code filter
- Use req.user!.companyCode from auth middleware
- NEVER trust client-sent company_code
- Super Admin (company_code = "*") sees all data
- Regular users CANNOT see company_code = "*" data
## 2. Required Code Pattern
```typescript
const companyCode = req.user!.companyCode;
if (companyCode === "*") {
query = "SELECT * FROM table ORDER BY company_code";
} else {
query = "SELECT * FROM table WHERE company_code = $1 AND company_code != '*'";
params = [companyCode];
}
```
## 3. Controller Structure
```typescript
import { Request, Response } from "express";
import pool from "../config/database";
import { logger } from "../config/logger";
export const getList = async (req: Request, res: Response) => {
try {
const companyCode = req.user!.companyCode;
// ... company_code 분기 처리
const result = await pool.query(query, params);
res.json({ success: true, data: result.rows });
} catch (error: any) {
logger.error("조회 실패", error);
res.status(500).json({ success: false, message: error.message });
}
};
```
## 4. Route Registration
- backend-node/src/routes/index.ts에 import 추가 필수
- authenticateToken 미들웨어 적용 필수
# Your Domain
- backend-node/src/controllers/
- backend-node/src/services/
- backend-node/src/routes/
- backend-node/src/middleware/
# Code Rules
1. TypeScript strict mode
2. Error handling with try/catch
3. Comments in Korean
4. Follow existing code patterns
5. Use logger for important operations
6. Parameter binding ($1, $2) for SQL injection prevention

182
.cursor/agents/pipeline-common-rules.md
View File

@ -1,182 +0,0 @@
# WACE ERP 파이프라인 공통 룰 (모든 에이전트 필수 준수)
## 1. 화면 유형 구분 (절대 규칙!)
이 시스템은 **관리자 메뉴**와 **사용자 메뉴**가 완전히 다른 방식으로 동작한다.
기능 구현 시 반드시 어느 유형인지 먼저 판단하라.
### 관리자 메뉴 (Admin)
- **구현 방식**: React 코드 기반 페이지 (`.tsx` 파일)
- **경로**: `frontend/app/(main)/admin/{기능명}/page.tsx`
- **메뉴 등록**: `menu_info` 테이블에 INSERT 필수 (코드만 만들고 메뉴 등록 안 하면 미완성!)
- **대상**: 시스템 설정, 사용자 관리, 결재 관리, 코드 관리 등
- **특징**: 하드코딩된 UI, 관리자만 접근
### 사용자 메뉴 (User/Screen) - 절대 하드코딩 금지!!!
- **구현 방식**: 로우코드 기반 (DB에 JSON으로 화면 구성 저장)
- **데이터 저장**: `screen_layouts_v2` 테이블에 V2 JSON 형식 보관
- **화면 디자이너**: 스크린 디자이너로 드래그앤드롭 구성
- **V2 컴포넌트**: `frontend/lib/registry/components/v2-*` 디렉토리
- **대상**: 일반 업무 화면, BOM, 문서 관리, 포장/적재, 금형 관리 등
- **특징**: 코드 수정 없이 화면 구성 변경 가능
- **절대 금지**: React `.tsx` 페이지 파일로 직접 UI를 하드코딩하는 것!
### 판단 기준
| 질문 | 관리자 메뉴 | 사용자 메뉴 |
|------|-------------|-------------|
| 누가 쓰나? | 시스템 관리자 | 일반 사용자 |
| 화면 구조 고정? | 고정 (코드) | 유동적 (JSON) |
| URL 패턴 | `/admin/*` | `/screen/{screen_code}` |
| 메뉴 등록 | `menu_info` INSERT | `screen_definitions` + `menu_info` INSERT |
| 프론트엔드 코드 | `frontend/app/(main)/admin/` 하위에 page.tsx 작성 | **코드 작성 금지!** DB에 스크린 정의만 등록 |
### 사용자 메뉴 구현 방법 (반드시 이 방식으로!)
**절대 규칙: 사용자 메뉴는 React 페이지(.tsx)를 직접 만들지 않는다!**
이미 `/screen/[screenCode]/page.tsx` → `/screens/[screenId]/page.tsx` 렌더링 시스템이 존재한다.
새 화면이 필요하면 DB에 등록만 하면 자동으로 렌더링된다.
#### Step 1: screen_definitions에 화면 등록
```sql
INSERT INTO screen_definitions (screen_name, screen_code, table_name, company_code, is_active)
VALUES ('포장/적재정보 관리', 'COMPANY_7_PKG', 'pkg_unit', 'COMPANY_7', 'Y')
RETURNING screen_id;
```
- `screen_code`: `{company_code}_{기능약어}` 형식 (예: COMPANY_7_PKG)
- `table_name`: 메인 테이블명 (V2 컴포넌트가 이 테이블 기준으로 동작)
- `company_code`: 대상 회사 코드
#### Step 2: screen_layouts_v2에 V2 레이아웃 JSON 등록
```sql
INSERT INTO screen_layouts_v2 (screen_id, company_code, layer_id, layer_name, layout_data)
VALUES (
{screen_id},
'COMPANY_7',
1,
'기본 레이어',
'{
"version": "2.0",
"components": [
{
"id": "comp_split_1",
"url": "@/lib/registry/components/v2-split-panel-layout",
"position": {"x": 0, "y": 0},
"size": {"width": 1200, "height": 800},
"displayOrder": 0,
"overrides": {
"leftTitle": "포장단위 목록",
"rightTitle": "상세 정보",
"splitRatio": 40,
"leftTableName": "pkg_unit",
"rightTableName": "pkg_unit",
"tabs": [
{"id": "basic", "label": "기본정보"},
{"id": "items", "label": "매칭품목"}
]
}
}
]
}'::jsonb
);
```
- V2 컴포넌트 목록: v2-split-panel-layout, v2-table-list, v2-table-search-widget, v2-repeater, v2-button-primary, v2-tabs-widget 등
- 상세 컴포넌트 가이드: `.cursor/rules/component-development-guide.mdc` 참조
#### Step 3: menu_info에 메뉴 등록
```sql
-- 먼저 부모 메뉴 objid 조회
-- SELECT objid, menu_name_kor FROM menu_info WHERE company_code = '{회사코드}' AND menu_name_kor LIKE '%물류%';
INSERT INTO menu_info (objid, menu_type, parent_obj_id, menu_name_kor, seq, menu_url, screen_code, company_code, status)
VALUES (
(SELECT COALESCE(MAX(objid), 0) + 1 FROM menu_info),
2, -- 2 = 메뉴 항목
{부모_objid}, -- 상위 메뉴의 objid
'포장/적재정보',
10, -- 정렬 순서
'/screen/COMPANY_7_PKG', -- /screen/{screen_code} 형식 (절대!)
'COMPANY_7_PKG', -- screen_definitions.screen_code와 일치
'COMPANY_7',
'Y'
);
```
**핵심**: `menu_url`은 반드시 `/screen/{screen_code}` 형식이어야 한다!
프론트엔드가 이 URL을 받아 `screen_definitions`에서 screen_id를 찾고, `screen_layouts_v2`에서 레이아웃을 로드한다.
## 2. 관리자 메뉴 등록 (코드 구현 후 필수!)
관리자 기능을 코드로 만들었으면 반드시 `menu_info`에 등록해야 한다.
```sql
-- 예시: 결재 템플릿 관리 메뉴 등록
INSERT INTO menu_info (objid, menu_type, parent_obj_id, menu_name_kor, seq, menu_url, company_code, status)
VALUES (
(SELECT COALESCE(MAX(objid), 0) + 1 FROM menu_info),
2, {부모_objid}, '결재 템플릿', 40, '/admin/approvalTemplate', '대상회사코드', 'Y'
);
```
- 기존 메뉴 구조를 먼저 조회해서 parent_obj_id, seq 등을 맞춰라
- company_code 별로 등록이 필요할 수 있다
- menu_auth_group 권한 매핑도 필요하면 추가
## 3. 하드코딩 금지 / 범용성 필수
- 특정 회사에만 동작하는 코드 금지
- 특정 사용자 ID에 의존하는 로직 금지
- 매직 넘버 사용 금지 (상수 또는 설정 파일로 관리)
- 하드코딩 색상 금지 (CSS 변수 사용: bg-primary, text-destructive 등)
- 하드코딩 URL 금지 (환경 변수 또는 API 클라이언트 사용)
## 4. 테스트 환경 정보
- **테스트 계정**: userId=`wace`, password=`qlalfqjsgh11`
- **역할**: SUPER_ADMIN (company_code = "*")
- **개발 프론트엔드**: http://localhost:9771
- **개발 백엔드 API**: http://localhost:8080
- **개발 DB**: postgresql://postgres:ph0909!!@39.117.244.52:11132/plm
## 5. 기능 구현 완성 체크리스트
기능 하나를 "완성"이라고 말하려면 아래를 전부 충족해야 한다:
### 공통
- [ ] DB: 마이그레이션 작성 + 실행 완료
- [ ] DB: company_code 컬럼 + 인덱스 존재
- [ ] BE: API 엔드포인트 구현 + 라우트 등록 (app.ts에 import + use 추가!)
- [ ] BE: company_code 필터링 적용
- [ ] 빌드 통과: 백엔드 tsc + 프론트엔드 tsc
### 관리자 메뉴인 경우
- [ ] FE: `frontend/app/(main)/admin/{기능}/page.tsx` 작성
- [ ] FE: API 클라이언트 함수 작성 (lib/api/)
- [ ] DB: `menu_info` INSERT (menu_url = `/admin/{기능}`)
### 사용자 메뉴인 경우 (코드 작성 금지!)
- [ ] DB: `screen_definitions` INSERT (screen_code, table_name, company_code)
- [ ] DB: `screen_layouts_v2` INSERT (V2 레이아웃 JSON)
- [ ] DB: `menu_info` INSERT (menu_url = `/screen/{screen_code}`)
- [ ] BE: 필요한 경우 전용 API 작성 (범용 table-management API로 커버 안 되는 경우만)
- [ ] FE: .tsx 페이지 파일 만들지 않음 (이미 `/screens/[screenId]/page.tsx`가 렌더링)
## 6. 절대 하지 말 것
1. 페이지 파일만 만들고 메뉴 등록 안 하기 (미완성!)
2. fetch() 직접 사용 (lib/api/ 클라이언트 필수)
3. company_code 필터링 빠뜨리기
4. 하드코딩 색상/URL/사용자ID 사용
5. Card 안에 Card 중첩 (중첩 박스 금지)
6. 백엔드 재실행하기 (nodemon이 자동 재시작)
7. **사용자 메뉴를 React 하드코딩(.tsx)으로 만들기 (절대 금지!!!)**
- `frontend/app/(main)/production/`, `frontend/app/(main)/warehouse/` 등에 page.tsx 파일을 만들어서 직접 UI를 코딩하는 것은 절대 금지
- 사용자 메뉴는 반드시 `screen_definitions` + `screen_layouts_v2` + `menu_info` DB 등록 방식으로 구현
- 이미 `/screen/[screenCode]` → `/screens/[screenId]` 렌더링 시스템이 존재함
- 백엔드 API(controller/routes)와 프론트엔드 API 클라이언트(lib/api/)는 필요하면 코드로 작성 가능
- 하지만 프론트엔드 화면 UI 자체는 DB의 V2 레이아웃 JSON으로만 구성

50
.cursor/agents/pipeline-db.md
View File

@ -1,50 +0,0 @@
---
name: pipeline-db
description: Agent Pipeline DB 전문가. PostgreSQL 스키마 설계, 마이그레이션 작성 및 실행. 모든 테이블에 company_code 필수.
model: inherit
---
# Role
You are a Database specialist for ERP-node project.
Stack: PostgreSQL + Raw Query (no ORM). Migrations in db/migrations/.
# CRITICAL PROJECT RULES
## 1. Multi-tenancy (ABSOLUTE MUST!)
- ALL tables MUST have company_code VARCHAR(20) NOT NULL
- ALL queries MUST filter by company_code
- JOINs MUST include company_code matching condition
- CREATE INDEX on company_code for every table
## 2. Migration Rules
- File naming: NNN_description.sql
- Always include company_code column
- Always create index on company_code
- Use IF NOT EXISTS for idempotent migrations
- Use TIMESTAMPTZ for dates (not TIMESTAMP)
## 3. MIGRATION EXECUTION (절대 규칙!)
마이그레이션 SQL 파일을 생성한 후, 반드시 직접 실행해서 테이블을 생성해라.
절대 사용자에게 "직접 실행해주세요"라고 떠넘기지 마라.
Docker 환경:
```bash
DOCKER_HOST=unix:///Users/gbpark/.orbstack/run/docker.sock docker exec pms-backend-mac node -e "
const {Pool}=require('pg');
const p=new Pool({connectionString:process.env.DATABASE_URL,ssl:false});
const fs=require('fs');
const sql=fs.readFileSync('/app/db/migrations/파일명.sql','utf8');
p.query(sql).then(()=>{console.log('OK');p.end()}).catch(e=>{console.error(e.message);p.end();process.exit(1)})
"
```
# Your Domain
- db/migrations/
- SQL schema design
- Query optimization
# Code Rules
1. PostgreSQL syntax only
2. Parameter binding ($1, $2)
3. Use COALESCE for NULL handling
4. Use TIMESTAMPTZ for dates

92
.cursor/agents/pipeline-frontend.md
View File

@ -1,92 +0,0 @@
---
name: pipeline-frontend
description: Agent Pipeline 프론트엔드 전문가. Next.js 14 + React + TypeScript + shadcn/ui 기반 화면 구현. fetch 직접 사용 금지, lib/api/ 클라이언트 필수.
model: inherit
---
# Role
You are a Frontend specialist for ERP-node project.
Stack: Next.js 14 + React + TypeScript + Tailwind CSS + shadcn/ui.
# CRITICAL PROJECT RULES
## 1. API Client (ABSOLUTE RULE!)
- NEVER use fetch() directly!
- ALWAYS use lib/api/ clients (Axios-based)
- 환경별 URL 자동 처리: v1.vexplor.com → api.vexplor.com, localhost → localhost:8080
## 2. shadcn/ui Style Rules
- Use CSS variables: bg-primary, text-muted-foreground (하드코딩 색상 금지)
- No nested boxes: Card inside Card is FORBIDDEN
- Responsive: mobile-first approach (flex-col md:flex-row)
## 3. V2 Component Standard
V2 컴포넌트를 만들거나 수정할 때 반드시 이 규격을 따라야 한다.
### 폴더 구조 (필수)
```
frontend/lib/registry/components/v2-{name}/
├── index.ts # createComponentDefinition() 호출
├── types.ts # Config extends ComponentConfig
├── {Name}Component.tsx # React 함수 컴포넌트
├── {Name}Renderer.tsx # extends AutoRegisteringComponentRenderer + registerSelf()
├── {Name}ConfigPanel.tsx # ConfigPanelBuilder 사용
└── config.ts # 기본 설정값 상수
```
### ConfigPanel 규칙 (절대!)
- 반드시 ConfigPanelBuilder 또는 ConfigSection 사용
- 직접 JSX로 설정 UI 작성 금지
## 4. API Client 생성 패턴
```typescript
// frontend/lib/api/yourModule.ts
import apiClient from "@/lib/api/client";
export async function getYourData(id: number) {
const response = await apiClient.get(`/api/your-endpoint/${id}`);
return response.data;
}
```
# CRITICAL: 사용자 메뉴 화면은 코드로 만들지 않는다!!!
**이 프로젝트는 로우코드 스크린 디자이너 시스템을 사용한다.**
사용자 업무 화면(포장관리, 금형관리, BOM, 문서관리 등)은 절대 React 페이지(.tsx)로 직접 UI를 하드코딩하지 않는다!
## 금지 패턴 (절대 하지 말 것)
```
frontend/app/(main)/production/packaging/page.tsx ← 이런 파일 만들지 마라!
frontend/app/(main)/warehouse/something/page.tsx ← 이런 파일 만들지 마라!
```
## 올바른 패턴
사용자 화면은 DB에 등록만 하면 자동으로 렌더링된다:
1. `screen_definitions` 테이블에 화면 등록 (screen_code, table_name 등)
2. `screen_layouts_v2` 테이블에 V2 레이아웃 JSON 등록 (v2-split-panel-layout, v2-table-list 등)
3. `menu_info` 테이블에 메뉴 등록 (menu_url = `/screen/{screen_code}`)
이미 존재하는 렌더링 시스템:
- `/screen/[screenCode]/page.tsx` → screenCode를 screenId로 변환
- `/screens/[screenId]/page.tsx` → screen_layouts_v2에서 V2 레이아웃 로드 → DynamicComponentRenderer로 렌더링
## 프론트엔드 에이전트가 할 수 있는 것
- `frontend/lib/api/` 하위에 API 클라이언트 함수 작성 (백엔드와 통신)
- V2 컴포넌트 자체를 수정/신규 개발 (`frontend/lib/registry/components/v2-*/`)
- 관리자 메뉴(`/admin/*`)는 React 페이지 코딩 가능
## 프론트엔드 에이전트가 할 수 없는 것
- 사용자 메뉴 화면을 React 페이지로 직접 코딩하는 것
# Your Domain
- frontend/components/
- frontend/app/
- frontend/lib/
- frontend/hooks/
# Code Rules
1. TypeScript strict mode
2. React functional components with hooks
3. Prefer shadcn/ui components
4. Use cn() utility for conditional classes
5. Comments in Korean

64
.cursor/agents/pipeline-ui.md
View File

@ -1,64 +0,0 @@
---
name: pipeline-ui
description: Agent Pipeline UI/UX 디자인 전문가. 모던 엔터프라이즈 UI 구현. CSS 변수 필수, 하드코딩 색상 금지, 반응형 필수.
model: inherit
---
# Role
You are a UI/UX Design specialist for the ERP-node project.
Stack: Next.js 14 + React + TypeScript + Tailwind CSS + shadcn/ui + lucide-react icons.
# Design Philosophy
- Apple-level polish with enterprise functionality
- Consistent spacing, typography, color usage
- Subtle animations and micro-interactions
- Dark mode compatible using CSS variables
# CRITICAL STYLE RULES
## 1. Color System (CSS Variables ONLY)
- bg-background / text-foreground (base)
- bg-primary / text-primary-foreground (actions)
- bg-muted / text-muted-foreground (secondary)
- bg-destructive / text-destructive-foreground (danger)
FORBIDDEN: bg-gray-50, text-blue-500, bg-white, text-black
## 2. Layout Rules
- No nested boxes (Card inside Card FORBIDDEN)
- Spacing: p-6 for cards, space-y-4 for forms, gap-4 for grids
- Mobile-first responsive: flex-col md:flex-row
## 3. Typography
- Page title: text-3xl font-bold
- Section: text-xl font-semibold
- Body: text-sm
- Helper: text-xs text-muted-foreground
## 4. Components
- ALWAYS use shadcn/ui components
- Use cn() for conditional classes
- Use lucide-react for ALL icons
# CRITICAL: 사용자 메뉴 화면은 코드로 만들지 않는다!!!
사용자 업무 화면(포장관리, 금형관리, BOM 등)의 UI는 DB의 `screen_layouts_v2` 테이블에 V2 레이아웃 JSON으로 정의된다.
React 페이지(.tsx)로 직접 UI를 하드코딩하는 것은 절대 금지!
UI 에이전트가 할 수 있는 것:
- V2 컴포넌트 자체의 스타일/UX 개선 (`frontend/lib/registry/components/v2-*/`)
- 관리자 메뉴(`/admin/*`) 페이지의 UI 개선
- 공통 UI 컴포넌트(`frontend/components/ui/`) 스타일 개선
UI 에이전트가 할 수 없는 것:
- 사용자 메뉴 화면을 React 페이지로 직접 코딩
# Your Domain
- frontend/components/ (UI components)
- frontend/app/ (pages - 관리자 메뉴만)
- frontend/lib/registry/components/v2-*/ (V2 컴포넌트)
# Output Rules
1. TypeScript strict mode
2. "use client" for client components
3. Comments in Korean
4. MINIMAL targeted changes when modifying existing files

57
.cursor/agents/pipeline-verifier.md
View File

@ -1,57 +0,0 @@
---
name: pipeline-verifier
description: Agent Pipeline 검증 전문가. 구현 완료 후 실제 동작 검증. 빈 껍데기 탐지, 패턴 준수 확인, 멀티테넌시 검증.
model: fast
readonly: true
---
# Role
You are a skeptical validator for the ERP-node project.
Your job is to verify that work claimed as complete actually works.
# Verification Checklist
## 1. Multi-tenancy (최우선)
- [ ] 모든 SQL에 company_code 필터 존재
- [ ] req.user!.companyCode 사용 (클라이언트 입력 아님)
- [ ] INSERT에 company_code 포함
- [ ] JOIN에 company_code 매칭 조건 존재
- [ ] company_code = "*" 최고관리자 예외 처리
## 2. Empty Shell Detection (빈 껍데기)
- [ ] API가 실제 DB 쿼리 실행 (mock 아님)
- [ ] 컴포넌트가 실제 데이터 로딩 (하드코딩 아님)
- [ ] TODO/FIXME/placeholder 없음
- [ ] 타입만 정의하고 구현 없는 함수 없음
## 3. Pattern Compliance (패턴 준수)
- [ ] Frontend: fetch 직접 사용 안 함 (lib/api/ 사용)
- [ ] Frontend: CSS 변수 사용 (하드코딩 색상 없음)
- [ ] Frontend: V2 컴포넌트 규격 준수
- [ ] Backend: logger 사용
- [ ] Backend: try/catch 에러 처리
## 4. Integration Check
- [ ] Route가 index.ts에 등록됨
- [ ] Import 경로 정확
- [ ] Export 존재
- [ ] TypeScript 타입 일치
# Reporting Format
```
## 검증 결과: [PASS/FAIL]
### 통과 항목
- item 1
- item 2
### 실패 항목
- item 1: 구체적 이유
- item 2: 구체적 이유
### 권장 수정사항
- fix 1
- fix 2
```
Do not accept claims at face value. Check the actual code.

98
.cursor/rules/screen-designer-e2e-guide.mdc Normal file
View File

@ -0,0 +1,98 @@
# 화면 디자이너 E2E 테스트 접근 가이드
## 화면 디자이너 접근 방법 (Playwright)
화면 디자이너는 SPA 탭 기반 시스템이라 URL 직접 접근이 안 된다.
다음 3단계를 반드시 따라야 한다.
### 1단계: 로그인
```typescript
await page.goto('http://localhost:9771/login');
await page.waitForLoadState('networkidle');
await page.getByPlaceholder('사용자 ID를 입력하세요').fill('wace');
await page.getByPlaceholder('비밀번호를 입력하세요').fill('qlalfqjsgh11');
await page.getByRole('button', { name: '로그인' }).click();
await page.waitForTimeout(8000);
```
### 2단계: sessionStorage 탭 상태 주입 + openDesigner 쿼리
```typescript
await page.evaluate(() => {
sessionStorage.setItem('erp-tab-store', JSON.stringify({
state: {
tabs: [{
id: 'tab-screenmng',
title: '화면 관리',
path: '/admin/screenMng/screenMngList',
isActive: true,
isPinned: false
}],
activeTabId: 'tab-screenmng'
},
version: 0
}));
});
// openDesigner 쿼리 파라미터로 화면 디자이너 자동 열기
await page.goto('http://localhost:9771/admin/screenMng/screenMngList?openDesigner=' + screenId);
await page.waitForTimeout(10000);
```
### 3단계: 컴포넌트 클릭 + 설정 패널 확인
```typescript
// 패널 버튼 클릭 (설정 패널 열기)
const panelBtn = page.locator('button:has-text("패널")');
if (await panelBtn.count() > 0) {
await panelBtn.first().click();
await page.waitForTimeout(2000);
}
// 편집 탭 확인
const editTab = page.locator('button:has-text("편집")');
// editTab.count() > 0 이면 설정 패널 열림 확인
```
## 화면 ID 찾기 (API)
특정 컴포넌트를 포함한 화면을 API로 검색:
```typescript
const screenId = await page.evaluate(async () => {
const token = localStorage.getItem('authToken') || '';
const h = { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token };
const resp = await fetch('http://localhost:8080/api/screen-management/screens?page=1&size=50', { headers: h });
const data = await resp.json();
const items = data.data || [];
for (const s of items) {
try {
const lr = await fetch('http://localhost:8080/api/screen-management/screens/' + s.screenId + '/layout-v2', { headers: h });
const ld = await lr.json();
const raw = JSON.stringify(ld);
// 원하는 컴포넌트 타입 검색
if (raw.includes('v2-select')) return s.screenId;
} catch {}
}
return items[0]?.screenId || null;
});
```
## 검증 포인트
| 확인 항목 | Locator | 기대값 |
|----------|---------|--------|
| 디자이너 열림 | `button:has-text("패널")` | count > 0 |
| 편집 탭 | `button:has-text("편집")` | count > 0 |
| 카드 선택 | `text=이 필드는 어떤 데이터를 선택하나요?` | visible |
| 고급 설정 | `text=고급 설정` | visible |
| JS 에러 없음 | `page.on('pageerror')` | 0건 |
## 테스트 계정
- ID: `wace`
- PW: `qlalfqjsgh11`
- 권한: SUPER_ADMIN (최고 관리자)

2
backend-node/src/controllers/adminController.ts
View File

@ -1854,7 +1854,7 @@ export async function toggleMenuStatus(
// 현재 상태 및 회사 코드 조회
const currentMenu = await queryOne<any>(
`SELECT objid, status, company_code FROM menu_info WHERE objid = $1`,
`SELECT objid, status, company_code, menu_name_kor FROM menu_info WHERE objid = $1`,
[Number(menuId)]
);

39
backend-node/src/controllers/auditLogController.ts
View File

@ -1,6 +1,6 @@
import { Response } from "express";
import { AuthenticatedRequest } from "../middleware/authMiddleware";
import { auditLogService } from "../services/auditLogService";
import { auditLogService, getClientIp, AuditAction, AuditResourceType } from "../services/auditLogService";
import { query } from "../database/db";
import logger from "../utils/logger";
@ -137,3 +137,40 @@ export const getAuditLogUsers = async (
});
}
};
/**
* 프론트엔드에서 직접 감사 로그 기록 (그룹 복제 등 프론트 오케스트레이션 작업용)
*/
export const createAuditLog = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const { action, resourceType, resourceId, resourceName, tableName, summary, changes } = req.body;
if (!action || !resourceType) {
res.status(400).json({ success: false, message: "action, resourceType은 필수입니다." });
return;
}
await auditLogService.log({
companyCode: req.user?.companyCode || "",
userId: req.user?.userId || "",
userName: req.user?.userName || "",
action: action as AuditAction,
resourceType: resourceType as AuditResourceType,
resourceId: resourceId || undefined,
resourceName: resourceName || undefined,
tableName: tableName || undefined,
summary: summary || undefined,
changes: changes || undefined,
ipAddress: getClientIp(req),
requestPath: req.originalUrl,
});
res.json({ success: true });
} catch (error: any) {
logger.error("감사 로그 기록 실패", { error: error.message });
res.status(500).json({ success: false, message: "감사 로그 기록 실패" });
}
};

52
backend-node/src/controllers/categoryTreeController.ts
View File

@ -6,6 +6,7 @@ import { Router, Request, Response } from "express";
import { categoryTreeService, CreateCategoryValueInput, UpdateCategoryValueInput } from "../services/categoryTreeService";
import { logger } from "../utils/logger";
import { authenticateToken } from "../middleware/authMiddleware";
import { auditLogService, getClientIp } from "../services/auditLogService";
const router = Router();
@ -16,6 +17,7 @@ router.use(authenticateToken);
interface AuthenticatedRequest extends Request {
user?: {
userId: string;
userName: string;
companyCode: string;
};
}
@ -157,6 +159,21 @@ router.post("/test/value", async (req: AuthenticatedRequest, res: Response) => {
const value = await categoryTreeService.createCategoryValue(companyCode, input, createdBy);
auditLogService.log({
companyCode,
userId: req.user?.userId || "",
userName: req.user?.userName,
action: "CREATE",
resourceType: "CODE_CATEGORY",
resourceId: String(value.valueId),
resourceName: input.valueLabel,
tableName: "category_values",
summary: `카테고리 값 "${input.valueLabel}" 생성 (${input.tableName}.${input.columnName})`,
changes: { after: { tableName: input.tableName, columnName: input.columnName, valueCode: input.valueCode, valueLabel: input.valueLabel } },
ipAddress: getClientIp(req),
requestPath: req.originalUrl,
});
res.json({
success: true,
data: value,
@ -182,6 +199,7 @@ router.put("/test/value/:valueId", async (req: AuthenticatedRequest, res: Respon
const companyCode = req.user?.companyCode || "*";
const updatedBy = req.user?.userId;
const beforeValue = await categoryTreeService.getCategoryValue(companyCode, Number(valueId));
const value = await categoryTreeService.updateCategoryValue(companyCode, Number(valueId), input, updatedBy);
if (!value) {
@ -191,6 +209,24 @@ router.put("/test/value/:valueId", async (req: AuthenticatedRequest, res: Respon
});
}
auditLogService.log({
companyCode,
userId: req.user?.userId || "",
userName: req.user?.userName,
action: "UPDATE",
resourceType: "CODE_CATEGORY",
resourceId: valueId,
resourceName: value.valueLabel,
tableName: "category_values",
summary: `카테고리 값 "${value.valueLabel}" 수정 (${value.tableName}.${value.columnName})`,
changes: {
before: beforeValue ? { valueLabel: beforeValue.valueLabel, valueCode: beforeValue.valueCode } : undefined,
after: input,
},
ipAddress: getClientIp(req),
requestPath: req.originalUrl,
});
res.json({
success: true,
data: value,
@ -239,6 +275,7 @@ router.delete("/test/value/:valueId", async (req: AuthenticatedRequest, res: Res
const { valueId } = req.params;
const companyCode = req.user?.companyCode || "*";
const beforeValue = await categoryTreeService.getCategoryValue(companyCode, Number(valueId));
const success = await categoryTreeService.deleteCategoryValue(companyCode, Number(valueId));
if (!success) {
@ -248,6 +285,21 @@ router.delete("/test/value/:valueId", async (req: AuthenticatedRequest, res: Res
});
}
auditLogService.log({
companyCode,
userId: req.user?.userId || "",
userName: req.user?.userName,
action: "DELETE",
resourceType: "CODE_CATEGORY",
resourceId: valueId,
resourceName: beforeValue?.valueLabel || valueId,
tableName: "category_values",
summary: `카테고리 값 "${beforeValue?.valueLabel || valueId}" 삭제 (${beforeValue?.tableName || ""}.${beforeValue?.columnName || ""})`,
changes: beforeValue ? { before: { valueLabel: beforeValue.valueLabel, valueCode: beforeValue.valueCode, tableName: beforeValue.tableName, columnName: beforeValue.columnName } } : undefined,
ipAddress: getClientIp(req),
requestPath: req.originalUrl,
});
res.json({
success: true,
message: "삭제되었습니다",

27
backend-node/src/controllers/commonCodeController.ts
View File

@ -396,6 +396,20 @@ export class CommonCodeController {
companyCode
);
auditLogService.log({
companyCode: companyCode || "",
userId: userId || "",
action: "UPDATE",
resourceType: "CODE",
resourceId: codeValue,
resourceName: codeData.codeName || codeValue,
tableName: "code_info",
summary: `코드 "${categoryCode}.${codeValue}" 수정`,
changes: { after: codeData },
ipAddress: getClientIp(req as any),
requestPath: req.originalUrl,
});
return res.json({
success: true,
data: code,
@ -440,6 +454,19 @@ export class CommonCodeController {
companyCode
);
auditLogService.log({
companyCode: companyCode || "",
userId: req.user?.userId || "",
action: "DELETE",
resourceType: "CODE",
resourceId: codeValue,
tableName: "code_info",
summary: `코드 "${categoryCode}.${codeValue}" 삭제`,
changes: { before: { categoryCode, codeValue } },
ipAddress: getClientIp(req as any),
requestPath: req.originalUrl,
});
return res.json({
success: true,
message: "코드 삭제 성공",

13
backend-node/src/controllers/ddlController.ts
View File

@ -438,6 +438,19 @@ export class DDLController {
);
if (result.success) {
auditLogService.log({
companyCode: userCompanyCode || "",
userId,
action: "DELETE",
resourceType: "TABLE",
resourceId: tableName,
resourceName: tableName,
tableName,
summary: `테이블 "${tableName}" 삭제`,
ipAddress: getClientIp(req as any),
requestPath: req.originalUrl,
});
res.status(200).json({
success: true,
message: result.message,

68
backend-node/src/controllers/numberingRuleController.ts
View File

@ -193,6 +193,7 @@ router.post(
auditLogService.log({
companyCode,
userId,
userName: req.user?.userName,
action: "CREATE",
resourceType: "NUMBERING_RULE",
resourceId: String(newRule.ruleId),
@ -243,6 +244,7 @@ router.put(
auditLogService.log({
companyCode,
userId: req.user?.userId || "",
userName: req.user?.userName,
action: "UPDATE",
resourceType: "NUMBERING_RULE",
resourceId: ruleId,
@ -285,6 +287,7 @@ router.delete(
auditLogService.log({
companyCode,
userId: req.user?.userId || "",
userName: req.user?.userName,
action: "DELETE",
resourceType: "NUMBERING_RULE",
resourceId: ruleId,
@ -521,6 +524,56 @@ router.post(
companyCode,
userId
);
const isUpdate = !!ruleConfig.ruleId;
const resetPeriodLabel: Record<string, string> = {
none: "초기화 안함", daily: "일별", monthly: "월별", yearly: "연별",
};
const partTypeLabel: Record<string, string> = {
sequence: "순번", number: "숫자", date: "날짜", text: "문자", category: "카테고리", reference: "참조",
};
const partsDescription = (ruleConfig.parts || [])
.sort((a: any, b: any) => (a.order || 0) - (b.order || 0))
.map((p: any) => {
const type = partTypeLabel[p.partType] || p.partType;
if (p.partType === "text" && p.autoConfig?.textValue) return `${type}("${p.autoConfig.textValue}")`;
if (p.partType === "sequence" && p.autoConfig?.sequenceLength) return `${type}(${p.autoConfig.sequenceLength}자리)`;
if (p.partType === "date" && p.autoConfig?.dateFormat) return `${type}(${p.autoConfig.dateFormat})`;
if (p.partType === "category") return `${type}(${p.autoConfig?.categoryKey || ""})`;
if (p.partType === "reference") return `${type}(${p.autoConfig?.referenceColumnName || ""})`;
return type;
})
.join(` ${ruleConfig.separator || "-"} `);
auditLogService.log({
companyCode,
userId,
userName: req.user?.userName,
action: isUpdate ? "UPDATE" : "CREATE",
resourceType: "NUMBERING_RULE",
resourceId: String(savedRule.ruleId),
resourceName: ruleConfig.ruleName,
tableName: "numbering_rules",
summary: isUpdate
? `채번 규칙 "${ruleConfig.ruleName}" 수정`
: `채번 규칙 "${ruleConfig.ruleName}" 생성`,
changes: {
after: {
규칙명: ruleConfig.ruleName,
적용테이블: ruleConfig.tableName || "(미지정)",
적용컬럼: ruleConfig.columnName || "(미지정)",
구분자: ruleConfig.separator || "-",
리셋주기: resetPeriodLabel[ruleConfig.resetPeriod] || ruleConfig.resetPeriod || "초기화 안함",
적용범위: ruleConfig.scopeType === "menu" ? "메뉴별" : "전역",
코드구성: partsDescription || "(파트 없음)",
파트수: (ruleConfig.parts || []).length,
},
},
ipAddress: getClientIp(req),
requestPath: req.originalUrl,
});
return res.json({ success: true, data: savedRule });
} catch (error: any) {
logger.error("[테스트] 채번 규칙 저장 실패", { error: error.message });
@ -535,10 +588,25 @@ router.delete(
authenticateToken,
async (req: AuthenticatedRequest, res: Response) => {
const companyCode = req.user!.companyCode;
const userId = req.user!.userId;
const { ruleId } = req.params;
try {
await numberingRuleService.deleteRuleFromTest(ruleId, companyCode);
auditLogService.log({
companyCode,
userId,
userName: req.user?.userName,
action: "DELETE",
resourceType: "NUMBERING_RULE",
resourceId: ruleId,
tableName: "numbering_rules",
summary: `채번 규칙(ID:${ruleId}) 삭제`,
ipAddress: getClientIp(req),
requestPath: req.originalUrl,
});
return res.json({
success: true,
message: "테스트 채번 규칙이 삭제되었습니다",

235
backend-node/src/controllers/processWorkStandardController.ts
View File

@ -30,26 +30,68 @@ export async function getItemsWithRouting(req: AuthenticatedRequest, res: Respon
routingTable = "item_routing_version",
routingFkColumn = "item_code",
search = "",
extraColumns = "",
filterConditions = "",
} = req.query as Record<string, string>;
const searchCondition = search
? `AND (i.${nameColumn} ILIKE $2 OR i.${codeColumn} ILIKE $2)`
: "";
const params: any[] = [companyCode];
if (search) params.push(`%${search}%`);
let paramIndex = 2;
// 검색 조건
let searchCondition = "";
if (search) {
searchCondition = `AND (i.${nameColumn} ILIKE $${paramIndex} OR i.${codeColumn} ILIKE $${paramIndex})`;
params.push(`%${search}%`);
paramIndex++;
}
// 추가 컬럼 SELECT
const extraColumnNames: string[] = extraColumns
? extraColumns.split(",").map((c: string) => c.trim()).filter(Boolean)
: [];
const extraSelect = extraColumnNames.map((col) => `i.${col}`).join(", ");
const extraGroupBy = extraColumnNames.map((col) => `i.${col}`).join(", ");
// 사전 필터 조건
let filterWhere = "";
if (filterConditions) {
try {
const filters = JSON.parse(filterConditions) as Array<{
column: string;
operator: string;
value: string;
}>;
for (const f of filters) {
if (!f.column || !f.value) continue;
if (f.operator === "equals") {
filterWhere += ` AND i.${f.column} = $${paramIndex}`;
params.push(f.value);
} else if (f.operator === "contains") {
filterWhere += ` AND i.${f.column} ILIKE $${paramIndex}`;
params.push(`%${f.value}%`);
} else if (f.operator === "not_equals") {
filterWhere += ` AND i.${f.column} != $${paramIndex}`;
params.push(f.value);
}
paramIndex++;
}
} catch { /* 파싱 실패 시 무시 */ }
}
const query = `
SELECT
i.id,
i.${nameColumn} AS item_name,
i.${codeColumn} AS item_code,
i.${codeColumn} AS item_code
${extraSelect ? ", " + extraSelect : ""},
COUNT(rv.id) AS routing_count
FROM ${tableName} i
LEFT JOIN ${routingTable} rv ON rv.${routingFkColumn} = i.${codeColumn}
AND rv.company_code = i.company_code
WHERE i.company_code = $1
${searchCondition}
GROUP BY i.id, i.${nameColumn}, i.${codeColumn}, i.created_date
${filterWhere}
GROUP BY i.id, i.${nameColumn}, i.${codeColumn}${extraGroupBy ? ", " + extraGroupBy : ""}, i.created_date
ORDER BY i.created_date DESC NULLS LAST
`;
@ -711,3 +753,184 @@ export async function saveAll(req: AuthenticatedRequest, res: Response) {
client.release();
}
}
// ============================================================
// 등록 품목 관리 (item_routing_registered)
// ============================================================
/**
* 화면별 등록된 품목 목록 조회
*/
export async function getRegisteredItems(req: AuthenticatedRequest, res: Response) {
try {
const companyCode = req.user?.companyCode;
if (!companyCode) {
return res.status(401).json({ success: false, message: "인증 필요" });
}
const { screenCode } = req.params;
const {
tableName = "item_info",
nameColumn = "item_name",
codeColumn = "item_number",
routingTable = "item_routing_version",
routingFkColumn = "item_code",
search = "",
extraColumns = "",
} = req.query as Record<string, string>;
const params: any[] = [companyCode, screenCode];
let paramIndex = 3;
let searchCondition = "";
if (search) {
searchCondition = `AND (i.${nameColumn} ILIKE $${paramIndex} OR i.${codeColumn} ILIKE $${paramIndex})`;
params.push(`%${search}%`);
paramIndex++;
}
const extraColumnNames: string[] = extraColumns
? extraColumns.split(",").map((c: string) => c.trim()).filter(Boolean)
: [];
const extraSelect = extraColumnNames.map((col) => `i.${col}`).join(", ");
const extraGroupBy = extraColumnNames.map((col) => `i.${col}`).join(", ");
const query = `
SELECT
irr.id AS registered_id,
irr.sort_order,
i.id,
i.${nameColumn} AS item_name,
i.${codeColumn} AS item_code
${extraSelect ? ", " + extraSelect : ""},
COUNT(rv.id) AS routing_count
FROM item_routing_registered irr
JOIN ${tableName} i ON irr.item_id = i.id
AND i.company_code = irr.company_code
LEFT JOIN ${routingTable} rv ON rv.${routingFkColumn} = i.${codeColumn}
AND rv.company_code = i.company_code
WHERE irr.company_code = $1
AND irr.screen_code = $2
${searchCondition}
GROUP BY irr.id, irr.sort_order, i.id, i.${nameColumn}, i.${codeColumn}${extraGroupBy ? ", " + extraGroupBy : ""}
ORDER BY CAST(irr.sort_order AS int) ASC, irr.created_date ASC
`;
const result = await getPool().query(query, params);
return res.json({ success: true, data: result.rows });
} catch (error: any) {
logger.error("등록 품목 조회 실패", { error: error.message });
return res.status(500).json({ success: false, message: error.message });
}
}
/**
* 품목 등록 (화면에 품목 추가)
*/
export async function registerItem(req: AuthenticatedRequest, res: Response) {
try {
const companyCode = req.user?.companyCode;
if (!companyCode) {
return res.status(401).json({ success: false, message: "인증 필요" });
}
const { screenCode, itemId, itemCode } = req.body;
if (!screenCode || !itemId) {
return res.status(400).json({ success: false, message: "screenCode, itemId 필수" });
}
const query = `
INSERT INTO item_routing_registered (screen_code, item_id, item_code, company_code, writer)
VALUES ($1, $2, $3, $4, $5)
ON CONFLICT (screen_code, item_id, company_code) DO NOTHING
RETURNING *
`;
const result = await getPool().query(query, [
screenCode, itemId, itemCode || null, companyCode, req.user?.userId || null,
]);
if (result.rowCount === 0) {
return res.json({ success: true, message: "이미 등록된 품목입니다", data: null });
}
logger.info("품목 등록", { companyCode, screenCode, itemId });
return res.json({ success: true, data: result.rows[0] });
} catch (error: any) {
logger.error("품목 등록 실패", { error: error.message });
return res.status(500).json({ success: false, message: error.message });
}
}
/**
* 여러 품목 일괄 등록
*/
export async function registerItemsBatch(req: AuthenticatedRequest, res: Response) {
try {
const companyCode = req.user?.companyCode;
if (!companyCode) {
return res.status(401).json({ success: false, message: "인증 필요" });
}
const { screenCode, items } = req.body;
if (!screenCode || !Array.isArray(items) || items.length === 0) {
return res.status(400).json({ success: false, message: "screenCode, items[] 필수" });
}
const client = await getPool().connect();
try {
await client.query("BEGIN");
const inserted: any[] = [];
for (const item of items) {
const result = await client.query(
`INSERT INTO item_routing_registered (screen_code, item_id, item_code, company_code, writer)
VALUES ($1, $2, $3, $4, $5)
ON CONFLICT (screen_code, item_id, company_code) DO NOTHING
RETURNING *`,
[screenCode, item.itemId, item.itemCode || null, companyCode, req.user?.userId || null]
);
if (result.rows[0]) inserted.push(result.rows[0]);
}
await client.query("COMMIT");
logger.info("품목 일괄 등록", { companyCode, screenCode, count: inserted.length });
return res.json({ success: true, data: inserted });
} catch (err) {
await client.query("ROLLBACK");
throw err;
} finally {
client.release();
}
} catch (error: any) {
logger.error("품목 일괄 등록 실패", { error: error.message });
return res.status(500).json({ success: false, message: error.message });
}
}
/**
* 등록 품목 제거
*/
export async function unregisterItem(req: AuthenticatedRequest, res: Response) {
try {
const companyCode = req.user?.companyCode;
if (!companyCode) {
return res.status(401).json({ success: false, message: "인증 필요" });
}
const { id } = req.params;
const result = await getPool().query(
`DELETE FROM item_routing_registered WHERE id = $1 AND company_code = $2 RETURNING id`,
[id, companyCode]
);
if (result.rowCount === 0) {
return res.status(404).json({ success: false, message: "데이터를 찾을 수 없습니다" });
}
logger.info("등록 품목 제거", { companyCode, id });
return res.json({ success: true });
} catch (error: any) {
logger.error("등록 품목 제거 실패", { error: error.message });
return res.status(500).json({ success: false, message: error.message });
}
}

28
backend-node/src/controllers/screenManagementController.ts
View File

@ -614,20 +614,6 @@ export const copyScreenWithModals = async (
modalScreens: modalScreens || [],
});
auditLogService.log({
companyCode: targetCompanyCode || companyCode,
userId: userId || "",
userName: (req.user as any)?.userName || "",
action: "COPY",
resourceType: "SCREEN",
resourceId: id,
resourceName: mainScreen?.screenName,
summary: `화면 일괄 복사 (메인 1개 + 모달 ${result.modalScreens.length}개, 원본 ID:${id})`,
changes: { after: { sourceScreenId: id, targetCompanyCode, mainScreenName: mainScreen?.screenName } },
ipAddress: getClientIp(req),
requestPath: req.originalUrl,
});
res.json({
success: true,
data: result,
@ -663,20 +649,6 @@ export const copyScreen = async (
}
);
auditLogService.log({
companyCode,
userId: userId || "",
userName: (req.user as any)?.userName || "",
action: "COPY",
resourceType: "SCREEN",
resourceId: String(copiedScreen?.screenId || ""),
resourceName: screenName,
summary: `화면 "${screenName}" 복사 (원본 ID:${id})`,
changes: { after: { sourceScreenId: id, screenName, screenCode } },
ipAddress: getClientIp(req),
requestPath: req.originalUrl,
});
res.json({
success: true,
data: copiedScreen,

17
backend-node/src/controllers/tableManagementController.ts
View File

@ -963,6 +963,15 @@ export async function addTableData(
logger.info(`테이블 데이터 추가 완료: ${tableName}, id: ${result.insertedId}`);
const systemFields = new Set([
"id", "created_date", "updated_date", "writer", "company_code",
"createdDate", "updatedDate", "companyCode",
]);
const auditData: Record<string, any> = {};
for (const [k, v] of Object.entries(data)) {
if (!systemFields.has(k)) auditData[k] = v;
}
auditLogService.log({
companyCode: req.user?.companyCode || "",
userId: req.user?.userId || "",
@ -973,7 +982,7 @@ export async function addTableData(
resourceName: tableName,
tableName,
summary: `${tableName} 데이터 추가`,
changes: { after: data },
changes: { after: auditData },
ipAddress: getClientIp(req),
requestPath: req.originalUrl,
});
@ -1096,10 +1105,14 @@ export async function editTableData(
return;
}
// 변경된 필드만 추출
const systemFieldsForEdit = new Set([
"id", "created_date", "updated_date", "writer", "company_code",
"createdDate", "updatedDate", "companyCode",
]);
const changedBefore: Record<string, any> = {};
const changedAfter: Record<string, any> = {};
for (const key of Object.keys(updatedData)) {
if (systemFieldsForEdit.has(key)) continue;
if (String(originalData[key] ?? "") !== String(updatedData[key] ?? "")) {
changedBefore[key] = originalData[key];
changedAfter[key] = updatedData[key];

3
backend-node/src/routes/auditLogRoutes.ts
View File

@ -1,11 +1,12 @@
import { Router } from "express";
import { authenticateToken } from "../middleware/authMiddleware";
import { getAuditLogs, getAuditLogStats, getAuditLogUsers } from "../controllers/auditLogController";
import { getAuditLogs, getAuditLogStats, getAuditLogUsers, createAuditLog } from "../controllers/auditLogController";
const router = Router();
router.get("/", authenticateToken, getAuditLogs);
router.get("/stats", authenticateToken, getAuditLogStats);
router.get("/users", authenticateToken, getAuditLogUsers);
router.post("/", authenticateToken, createAuditLog);
export default router;

6
backend-node/src/routes/processWorkStandardRoutes.ts
View File

@ -33,4 +33,10 @@ router.delete("/work-item-details/:id", ctrl.deleteWorkItemDetail);
// 전체 저장 (일괄)
router.put("/save-all", ctrl.saveAll);
// 등록 품목 관리 (화면별 품목 목록)
router.get("/registered-items/:screenCode", ctrl.getRegisteredItems);
router.post("/registered-items", ctrl.registerItem);
router.post("/registered-items/batch", ctrl.registerItemsBatch);
router.delete("/registered-items/:id", ctrl.unregisterItem);
export default router;

34
backend-node/src/services/auditLogService.ts
View File

@ -66,6 +66,7 @@ export interface AuditLogParams {
export interface AuditLogEntry {
id: number;
company_code: string;
company_name: string | null;
user_id: string;
user_name: string | null;
action: string;
@ -107,6 +108,7 @@ class AuditLogService {
*/
async log(params: AuditLogParams): Promise<void> {
try {
logger.info(`[AuditLog] 기록 시도: ${params.resourceType} / ${params.action} / ${params.resourceName || params.resourceId || "N/A"}`);
await query(
`INSERT INTO system_audit_log
(company_code, user_id, user_name, action, resource_type,
@ -128,8 +130,9 @@ class AuditLogService {
params.requestPath || null,
]
);
} catch (error) {
logger.error("감사 로그 기록 실패 (무시됨)", { error, params });
logger.info(`[AuditLog] 기록 성공: ${params.resourceType} / ${params.action}`);
} catch (error: any) {
logger.error(`[AuditLog] 기록 실패: ${params.resourceType} / ${params.action} - ${error?.message}`, { error, params });
}
}
@ -186,40 +189,40 @@ class AuditLogService {
let paramIndex = 1;
if (!isSuperAdmin && filters.companyCode) {
conditions.push(`company_code = $${paramIndex++}`);
conditions.push(`sal.company_code = $${paramIndex++}`);
params.push(filters.companyCode);
} else if (isSuperAdmin && filters.companyCode) {
conditions.push(`company_code = $${paramIndex++}`);
conditions.push(`sal.company_code = $${paramIndex++}`);
params.push(filters.companyCode);
}
if (filters.userId) {
conditions.push(`user_id = $${paramIndex++}`);
conditions.push(`sal.user_id = $${paramIndex++}`);
params.push(filters.userId);
}
if (filters.resourceType) {
conditions.push(`resource_type = $${paramIndex++}`);
conditions.push(`sal.resource_type = $${paramIndex++}`);
params.push(filters.resourceType);
}
if (filters.action) {
conditions.push(`action = $${paramIndex++}`);
conditions.push(`sal.action = $${paramIndex++}`);
params.push(filters.action);
}
if (filters.tableName) {
conditions.push(`table_name = $${paramIndex++}`);
conditions.push(`sal.table_name = $${paramIndex++}`);
params.push(filters.tableName);
}
if (filters.dateFrom) {
conditions.push(`created_at >= $${paramIndex++}::timestamptz`);
conditions.push(`sal.created_at >= $${paramIndex++}::timestamptz`);
params.push(filters.dateFrom);
}
if (filters.dateTo) {
conditions.push(`created_at <= $${paramIndex++}::timestamptz`);
conditions.push(`sal.created_at <= $${paramIndex++}::timestamptz`);
params.push(filters.dateTo);
}
if (filters.search) {
conditions.push(
`(summary ILIKE $${paramIndex} OR resource_name ILIKE $${paramIndex} OR user_name ILIKE $${paramIndex})`
`(sal.summary ILIKE $${paramIndex} OR sal.resource_name ILIKE $${paramIndex} OR sal.user_name ILIKE $${paramIndex})`
);
params.push(`%${filters.search}%`);
paramIndex++;
@ -233,14 +236,17 @@ class AuditLogService {
const offset = (page - 1) * limit;
const countResult = await query<{ count: string }>(
`SELECT COUNT(*) as count FROM system_audit_log ${whereClause}`,
`SELECT COUNT(*) as count FROM system_audit_log sal ${whereClause}`,
params
);
const total = parseInt(countResult[0].count, 10);
const data = await query<AuditLogEntry>(
`SELECT * FROM system_audit_log ${whereClause}
ORDER BY created_at DESC
`SELECT sal.*, ci.company_name
FROM system_audit_log sal
LEFT JOIN company_mng ci ON sal.company_code = ci.company_code
${whereClause}
ORDER BY sal.created_at DESC
LIMIT $${paramIndex++} OFFSET $${paramIndex++}`,
[...params, limit, offset]
);

620
docs/POP_작업진행_설계서.md Normal file
View File

@ -0,0 +1,620 @@
# POP 작업진행 관리 설계서
> 작성일: 2026-03-13
> 목적: POP 시스템에서 작업지시 기반으로 라우팅/작업기준정보를 조회하고, 공정별 작업 진행 상태를 관리하는 구조 설계
---
## 1. 핵심 설계 원칙
**작업지시에 라우팅ID, 작업기준정보ID 등을 별도 컬럼으로 넣지 않는다.**
- 작업지시(`work_instruction`)에는 `item_id`(품목 ID)만 있으면 충분
- 품목 → 라우팅 → 작업기준정보는 마스터 데이터 체인으로 조회
- 작업 진행 상태만 별도 테이블에서 관리
---
## 2. 기존 테이블 구조 (마스터 데이터)
### 2-1. ER 다이어그램
> GitHub / VSCode Mermaid 플러그인에서 렌더링됩니다.
```mermaid
erDiagram
%% ========== 마스터 데이터 (변경 없음) ==========
item_info {
varchar id PK "UUID"
varchar item_number "품번"
varchar item_name "품명"
varchar company_code "회사코드"
}
item_routing_version {
varchar id PK "UUID"
varchar item_code "품번 (= item_info.item_number)"
varchar version_name "버전명"
boolean is_default "기본버전 여부"
varchar company_code "회사코드"
}
item_routing_detail {
varchar id PK "UUID"
varchar routing_version_id FK "→ item_routing_version.id"
varchar seq_no "공정순서 10,20,30..."
varchar process_code FK "→ process_mng.process_code"
varchar is_required "필수/선택"
varchar is_fixed_order "고정/선택"
varchar standard_time "표준시간(분)"
varchar company_code "회사코드"
}
process_mng {
varchar id PK "UUID"
varchar process_code "공정코드"
varchar process_name "공정명"
varchar process_type "공정유형"
varchar company_code "회사코드"
}
process_work_item {
varchar id PK "UUID"
varchar routing_detail_id FK "→ item_routing_detail.id"
varchar work_phase "PRE / IN / POST"
varchar title "작업항목명"
varchar is_required "Y/N"
int sort_order "정렬순서"
varchar company_code "회사코드"
}
process_work_item_detail {
varchar id PK "UUID"
varchar work_item_id FK "→ process_work_item.id"
varchar detail_type "check/inspect/input/procedure/info"
varchar content "내용"
varchar input_type "입력타입"
varchar inspection_code "검사코드"
varchar unit "단위"
varchar lower_limit "하한값"
varchar upper_limit "상한값"
varchar company_code "회사코드"
}
%% ========== 트랜잭션 데이터 ==========
work_instruction {
varchar id PK "UUID"
varchar work_instruction_no "작업지시번호"
varchar item_id FK "→ item_info.id ★핵심★"
varchar status "waiting/in_progress/completed/cancelled"
varchar qty "지시수량"
varchar completed_qty "완성수량"
varchar worker "작업자"
varchar company_code "회사코드"
}
work_order_process {
varchar id PK "UUID"
varchar wo_id FK "→ work_instruction.id"
varchar routing_detail_id FK "→ item_routing_detail.id ★추가★"
varchar seq_no "공정순서"
varchar process_code "공정코드"
varchar process_name "공정명"
varchar status "waiting/in_progress/completed/skipped"
varchar plan_qty "계획수량"
varchar good_qty "양품수량"
varchar defect_qty "불량수량"
timestamp started_at "시작시간"
timestamp completed_at "완료시간"
varchar company_code "회사코드"
}
work_order_work_item {
varchar id PK "UUID ★신규★"
varchar company_code "회사코드"
varchar work_order_process_id FK "→ work_order_process.id"
varchar work_item_id FK "→ process_work_item.id"
varchar work_phase "PRE/IN/POST"
varchar status "pending/completed/skipped/failed"
varchar completed_by "완료자"
timestamp completed_at "완료시간"
}
work_order_work_item_result {
varchar id PK "UUID ★신규★"
varchar company_code "회사코드"
varchar work_order_work_item_id FK "→ work_order_work_item.id"
varchar work_item_detail_id FK "→ process_work_item_detail.id"
varchar detail_type "check/inspect/input/procedure"
varchar result_value "결과값"
varchar is_passed "Y/N/null"
varchar recorded_by "기록자"
timestamp recorded_at "기록시간"
}
%% ========== 관계 ==========
%% 마스터 체인: 품목 → 라우팅 → 작업기준정보
item_info ||--o{ item_routing_version : "item_number = item_code"
item_routing_version ||--o{ item_routing_detail : "id = routing_version_id"
item_routing_detail }o--|| process_mng : "process_code"
item_routing_detail ||--o{ process_work_item : "id = routing_detail_id"
process_work_item ||--o{ process_work_item_detail : "id = work_item_id"
%% 트랜잭션: 작업지시 → 공정진행 → 작업기준정보 진행
work_instruction }o--|| item_info : "item_id = id"
work_instruction ||--o{ work_order_process : "id = wo_id"
work_order_process }o--|| item_routing_detail : "routing_detail_id = id"
work_order_process ||--o{ work_order_work_item : "id = work_order_process_id"
work_order_work_item }o--|| process_work_item : "work_item_id = id"
work_order_work_item ||--o{ work_order_work_item_result : "id = work_order_work_item_id"
work_order_work_item_result }o--|| process_work_item_detail : "work_item_detail_id = id"
```
### 2-1-1. 관계 요약 (텍스트)
```
[마스터 데이터 체인 - 조회용, 변경 없음]
item_info ─── 1:N ───→ item_routing_version ─── 1:N ───→ item_routing_detail
(품목) item_number (라우팅 버전) routing_ (공정별 상세)
= item_code version_id
│
process_mng ◄───┘ process_code (공정 마스터)
│
├── 1:N ───→ process_work_item ─── 1:N ───→ process_work_item_detail
│ (작업기준정보) (작업기준정보 상세)
│ routing_detail_id work_item_id
│
[트랜잭션 데이터 - 상태 관리] │
│
work_instruction ─── 1:N ───→ work_order_process ─┘ routing_detail_id (★추가★)
(작업지시) wo_id (공정별 진행)
item_id → item_info │
├── 1:N ───→ work_order_work_item ─── 1:N ───→ work_order_work_item_result
│ (작업기준정보 진행) (상세 결과값)
│ work_order_process_id work_order_work_item_id
│ work_item_id → process_work_item work_item_detail_id → process_work_item_detail
│ ★신규 테이블★ ★신규 테이블★
```
### 2-2. 마스터 테이블 상세
#### item_info (품목 마스터)
| 컬럼 | 설명 | 비고 |
|------|------|------|
| id | PK (UUID) | |
| item_number | 품번 | item_routing_version.item_code와 매칭 |
| item_name | 품명 | |
| company_code | 회사코드 | 멀티테넌시 |
#### item_routing_version (라우팅 버전)
| 컬럼 | 설명 | 비고 |
|------|------|------|
| id | PK (UUID) | |
| item_code | 품번 | item_info.item_number와 매칭 |
| version_name | 버전명 | 예: "기본 라우팅", "버전2" |
| is_default | 기본 버전 여부 | true/false, 기본 버전을 사용 |
| company_code | 회사코드 | |
#### item_routing_detail (라우팅 상세 - 공정별)
| 컬럼 | 설명 | 비고 |
|------|------|------|
| id | PK (UUID) | |
| routing_version_id | FK → item_routing_version.id | |
| seq_no | 공정 순서 | 10, 20, 30... |
| process_code | 공정코드 | FK → process_mng.process_code |
| is_required | 필수/선택 | "필수" / "선택" |
| is_fixed_order | 순서고정 여부 | "고정" / "선택" |
| work_type | 작업유형 | |
| standard_time | 표준시간(분) | |
| outsource_supplier | 외주업체 | |
| company_code | 회사코드 | |
#### process_work_item (작업기준정보)
| 컬럼 | 설명 | 비고 |
|------|------|------|
| id | PK (UUID) | |
| routing_detail_id | FK → item_routing_detail.id | |
| work_phase | 작업단계 | PRE(작업전) / IN(작업중) / POST(작업후) |
| title | 작업항목명 | 예: "장비 체크", "소재 준비" |
| is_required | 필수여부 | Y/N |
| sort_order | 정렬순서 | |
| description | 설명 | |
| company_code | 회사코드 | |
#### process_work_item_detail (작업기준정보 상세)
| 컬럼 | 설명 | 비고 |
|------|------|------|
| id | PK (UUID) | |
| work_item_id | FK → process_work_item.id | |
| detail_type | 상세유형 | check(체크) / inspect(검사) / input(입력) / procedure(절차) / info(정보) |
| content | 내용 | 예: "소음검사", "치수검사" |
| input_type | 입력타입 | select, text 등 |
| inspection_code | 검사코드 | |
| inspection_method | 검사방법 | |
| unit | 단위 | |
| lower_limit | 하한값 | |
| upper_limit | 상한값 | |
| is_required | 필수여부 | Y/N |
| sort_order | 정렬순서 | |
| company_code | 회사코드 | |
---
## 3. 작업 진행 테이블 (트랜잭션 데이터)
### 3-1. work_instruction (작업지시) - 기존 테이블
| 컬럼 | 설명 | 비고 |
|------|------|------|
| id | PK (UUID) | |
| work_instruction_no | 작업지시번호 | 예: WO-2026-001 |
| **item_id** | **FK → item_info.id** | **이것만으로 라우팅/작업기준정보 전부 조회 가능** |
| status | 작업지시 상태 | waiting / in_progress / completed / cancelled |
| qty | 지시수량 | |
| completed_qty | 완성수량 | |
| work_team | 작업팀 | |
| worker | 작업자 | |
| equipment_id | 설비 | |
| start_date | 시작일 | |
| end_date | 종료일 | |
| remark | 비고 | |
| company_code | 회사코드 | |
> **routing 컬럼**: 현재 존재하지만 사용하지 않음 (null). 라우팅 버전을 지정하고 싶으면 이 컬럼에 `item_routing_version.id`를 넣어 특정 버전을 지정할 수 있음. 없으면 `is_default=true` 버전 자동 사용.
### 3-2. work_order_process (공정별 진행) - 기존 테이블, 변경 필요
작업지시가 생성될 때, 해당 품목의 라우팅 공정을 복사해서 이 테이블에 INSERT.
| 컬럼 | 설명 | 비고 |
|------|------|------|
| id | PK (UUID) | |
| wo_id | FK → work_instruction.id | 작업지시 참조 |
| **routing_detail_id** | **FK → item_routing_detail.id** | **추가 필요 - 라우팅 상세 참조** |
| seq_no | 공정 순서 | 라우팅에서 복사 |
| process_code | 공정코드 | 라우팅에서 복사 |
| process_name | 공정명 | 라우팅에서 복사 (비정규화, 조회 편의) |
| is_required | 필수여부 | 라우팅에서 복사 |
| is_fixed_order | 순서고정 | 라우팅에서 복사 |
| standard_time | 표준시간 | 라우팅에서 복사 |
| **status** | **공정 상태** | **waiting / in_progress / completed / skipped** |
| plan_qty | 계획수량 | |
| input_qty | 투입수량 | |
| good_qty | 양품수량 | |
| defect_qty | 불량수량 | |
| equipment_code | 사용설비 | |
| accepted_by | 접수자 | |
| accepted_at | 접수시간 | |
| started_at | 시작시간 | |
| completed_at | 완료시간 | |
| remark | 비고 | |
| company_code | 회사코드 | |
### 3-3. work_order_work_item (작업기준정보별 진행) - 신규 테이블
POP에서 작업자가 각 작업기준정보 항목을 체크/입력할 때 사용.
| 컬럼 | 설명 | 비고 |
|------|------|------|
| id | PK (UUID) | gen_random_uuid() |
| company_code | 회사코드 | 멀티테넌시 |
| work_order_process_id | FK → work_order_process.id | 어떤 작업지시의 어떤 공정인지 |
| work_item_id | FK → process_work_item.id | 어떤 작업기준정보인지 |
| work_phase | 작업단계 | PRE / IN / POST (마스터에서 복사) |
| status | 완료상태 | pending / completed / skipped / failed |
| completed_by | 완료자 | 작업자 ID |
| completed_at | 완료시간 | |
| created_date | 생성일 | |
| updated_date | 수정일 | |
| writer | 작성자 | |
### 3-4. work_order_work_item_result (작업기준정보 상세 결과) - 신규 테이블
작업기준정보의 상세 항목(체크, 검사, 입력 등)에 대한 실제 결과값 저장.
| 컬럼 | 설명 | 비고 |
|------|------|------|
| id | PK (UUID) | gen_random_uuid() |
| company_code | 회사코드 | 멀티테넌시 |
| work_order_work_item_id | FK → work_order_work_item.id | |
| work_item_detail_id | FK → process_work_item_detail.id | 어떤 상세항목인지 |
| detail_type | 상세유형 | check / inspect / input / procedure (마스터에서 복사) |
| result_value | 결과값 | 체크: "Y"/"N", 검사: 측정값, 입력: 입력값 |
| is_passed | 합격여부 | Y / N / null(해당없음) |
| remark | 비고 | 불합격 사유 등 |
| recorded_by | 기록자 | |
| recorded_at | 기록시간 | |
| created_date | 생성일 | |
| updated_date | 수정일 | |
| writer | 작성자 | |
---
## 4. POP 데이터 플로우
### 4-1. 작업지시 등록 시 (ERP 측)
```
[작업지시 생성]
│
├── 1. work_instruction INSERT (item_id, qty, status='waiting' 등)
│
├── 2. item_id → item_info.item_number 조회
│
├── 3. item_number → item_routing_version 조회 (is_default=true 또는 지정 버전)
│
├── 4. routing_version_id → item_routing_detail 조회 (공정 목록)
│
└── 5. 각 공정별로 work_order_process INSERT
├── wo_id = work_instruction.id
├── routing_detail_id = item_routing_detail.id ← 핵심!
├── seq_no, process_code, process_name 복사
├── status = 'waiting'
└── plan_qty = work_instruction.qty
```
### 4-2. POP 작업 조회 시
```
[POP 화면: 작업지시 선택]
│
├── 1. work_instruction 목록 조회 (status = 'waiting' or 'in_progress')
│
├── 2. 선택한 작업지시의 공정 목록 조회
│ SELECT wop.*, pm.process_name
│ FROM work_order_process wop
│ LEFT JOIN process_mng pm ON wop.process_code = pm.process_code
│ WHERE wop.wo_id = {작업지시ID}
│ ORDER BY CAST(wop.seq_no AS int)
│
└── 3. 선택한 공정의 작업기준정보 조회 (마스터 데이터 참조)
SELECT pwi.*, pwid.*
FROM process_work_item pwi
LEFT JOIN process_work_item_detail pwid ON pwi.id = pwid.work_item_id
WHERE pwi.routing_detail_id = {work_order_process.routing_detail_id}
ORDER BY pwi.work_phase, pwi.sort_order, pwid.sort_order
```
### 4-3. POP 작업 실행 시
```
[작업자가 공정 시작]
│
├── 1. work_order_process UPDATE
│ SET status = 'in_progress', started_at = NOW(), accepted_by = {작업자}
│
├── 2. work_instruction UPDATE (첫 공정 시작 시)
│ SET status = 'in_progress'
│
├── 3. 작업기준정보 항목별 체크/입력 시
│ ├── work_order_work_item UPSERT (항목별 상태)
│ └── work_order_work_item_result UPSERT (상세 결과값)
│
└── 4. 공정 완료 시
├── work_order_process UPDATE
│ SET status = 'completed', completed_at = NOW(),
│ good_qty = {양품}, defect_qty = {불량}
│
└── (모든 공정 완료 시)
work_instruction UPDATE
SET status = 'completed', completed_qty = {최종양품}
```
---
## 5. 핵심 조회 쿼리
### 5-1. 작업지시 → 전체 공정 + 작업기준정보 한방 조회
```sql
-- 작업지시의 공정별 진행 현황 + 작업기준정보
SELECT
wi.work_instruction_no,
wi.qty,
wi.status as wi_status,
ii.item_number,
ii.item_name,
wop.id as process_id,
wop.seq_no,
wop.process_code,
wop.process_name,
wop.status as process_status,
wop.plan_qty,
wop.good_qty,
wop.defect_qty,
wop.started_at,
wop.completed_at,
wop.routing_detail_id,
-- 작업기준정보는 routing_detail_id로 마스터 조회
pwi.id as work_item_id,
pwi.work_phase,
pwi.title as work_item_title,
pwi.is_required as work_item_required
FROM work_instruction wi
JOIN item_info ii ON wi.item_id = ii.id
JOIN work_order_process wop ON wi.id = wop.wo_id
LEFT JOIN process_work_item pwi ON wop.routing_detail_id = pwi.routing_detail_id
WHERE wi.id = $1
AND wi.company_code = $2
ORDER BY CAST(wop.seq_no AS int), pwi.work_phase, pwi.sort_order;
```
### 5-2. 특정 공정의 작업기준정보 + 진행 상태 조회
```sql
-- POP에서 특정 공정 선택 시: 마스터 + 진행 상태 조인
SELECT
pwi.id as work_item_id,
pwi.work_phase,
pwi.title,
pwi.is_required,
pwid.id as detail_id,
pwid.detail_type,
pwid.content,
pwid.input_type,
pwid.inspection_code,
pwid.inspection_method,
pwid.unit,
pwid.lower_limit,
pwid.upper_limit,
-- 진행 상태
wowi.status as item_status,
wowi.completed_by,
wowi.completed_at,
-- 결과값
wowir.result_value,
wowir.is_passed,
wowir.remark as result_remark
FROM process_work_item pwi
LEFT JOIN process_work_item_detail pwid
ON pwi.id = pwid.work_item_id
LEFT JOIN work_order_work_item wowi
ON wowi.work_item_id = pwi.id
AND wowi.work_order_process_id = $1 -- work_order_process.id
LEFT JOIN work_order_work_item_result wowir
ON wowir.work_order_work_item_id = wowi.id
AND wowir.work_item_detail_id = pwid.id
WHERE pwi.routing_detail_id = $2 -- work_order_process.routing_detail_id
ORDER BY
CASE pwi.work_phase WHEN 'PRE' THEN 1 WHEN 'IN' THEN 2 WHEN 'POST' THEN 3 END,
pwi.sort_order,
pwid.sort_order;
```
---
## 6. 변경사항 요약
### 6-1. 기존 테이블 변경
| 테이블 | 변경내용 |
|--------|---------|
| work_order_process | `routing_detail_id VARCHAR(500)` 컬럼 추가 |
### 6-2. 신규 테이블
| 테이블 | 용도 |
|--------|------|
| work_order_work_item | 작업지시 공정별 작업기준정보 진행 상태 |
| work_order_work_item_result | 작업기준정보 상세 항목의 실제 결과값 |
### 6-3. 건드리지 않는 것
| 테이블 | 이유 |
|--------|------|
| work_instruction | item_id만 있으면 충분. 라우팅/작업기준정보 ID 추가 불필요 |
| item_routing_version | 마스터 데이터, 변경 없음 |
| item_routing_detail | 마스터 데이터, 변경 없음 |
| process_work_item | 마스터 데이터, 변경 없음 |
| process_work_item_detail | 마스터 데이터, 변경 없음 |
---
## 7. DDL (마이그레이션 SQL)
```sql
-- 1. work_order_process에 routing_detail_id 추가
ALTER TABLE work_order_process
ADD COLUMN IF NOT EXISTS routing_detail_id VARCHAR(500);
CREATE INDEX IF NOT EXISTS idx_wop_routing_detail_id
ON work_order_process(routing_detail_id);
-- 2. 작업기준정보별 진행 상태 테이블
CREATE TABLE IF NOT EXISTS work_order_work_item (
id VARCHAR(500) PRIMARY KEY DEFAULT gen_random_uuid()::text,
company_code VARCHAR(500) NOT NULL,
work_order_process_id VARCHAR(500) NOT NULL,
work_item_id VARCHAR(500) NOT NULL,
work_phase VARCHAR(500),
status VARCHAR(500) DEFAULT 'pending',
completed_by VARCHAR(500),
completed_at TIMESTAMP,
created_date TIMESTAMP DEFAULT NOW(),
updated_date TIMESTAMP DEFAULT NOW(),
writer VARCHAR(500)
);
CREATE INDEX idx_wowi_process_id ON work_order_work_item(work_order_process_id);
CREATE INDEX idx_wowi_work_item_id ON work_order_work_item(work_item_id);
CREATE INDEX idx_wowi_company_code ON work_order_work_item(company_code);
-- 3. 작업기준정보 상세 결과 테이블
CREATE TABLE IF NOT EXISTS work_order_work_item_result (
id VARCHAR(500) PRIMARY KEY DEFAULT gen_random_uuid()::text,
company_code VARCHAR(500) NOT NULL,
work_order_work_item_id VARCHAR(500) NOT NULL,
work_item_detail_id VARCHAR(500) NOT NULL,
detail_type VARCHAR(500),
result_value VARCHAR(500),
is_passed VARCHAR(500),
remark TEXT,
recorded_by VARCHAR(500),
recorded_at TIMESTAMP DEFAULT NOW(),
created_date TIMESTAMP DEFAULT NOW(),
updated_date TIMESTAMP DEFAULT NOW(),
writer VARCHAR(500)
);
CREATE INDEX idx_wowir_work_order_work_item_id ON work_order_work_item_result(work_order_work_item_id);
CREATE INDEX idx_wowir_detail_id ON work_order_work_item_result(work_item_detail_id);
CREATE INDEX idx_wowir_company_code ON work_order_work_item_result(company_code);
```
---
## 8. 상태값 정의
### work_instruction.status (작업지시 상태)
| 값 | 의미 |
|----|------|
| waiting | 대기 |
| in_progress | 진행중 |
| completed | 완료 |
| cancelled | 취소 |
### work_order_process.status (공정 상태)
| 값 | 의미 |
|----|------|
| waiting | 대기 (아직 시작 안 함) |
| in_progress | 진행중 (작업자가 시작) |
| completed | 완료 |
| skipped | 건너뜀 (선택 공정인 경우) |
### work_order_work_item.status (작업기준정보 항목 상태)
| 값 | 의미 |
|----|------|
| pending | 미완료 |
| completed | 완료 |
| skipped | 건너뜀 |
| failed | 실패 (검사 불합격 등) |
### work_order_work_item_result.is_passed (검사 합격여부)
| 값 | 의미 |
|----|------|
| Y | 합격 |
| N | 불합격 |
| null | 해당없음 (체크/입력 항목) |
---
## 9. 설계 의도 요약
1. **마스터와 트랜잭션 분리**: 라우팅/작업기준정보는 마스터(템플릿), 실제 진행은 트랜잭션 테이블에서 관리
2. **조회 경로**: `work_instruction.item_id` → `item_info.item_number` → `item_routing_version` → `item_routing_detail` → `process_work_item` → `process_work_item_detail`
3. **진행 경로**: `work_order_process.routing_detail_id`로 마스터 작업기준정보를 참조하되, 실제 진행/결과는 `work_order_work_item` + `work_order_work_item_result`에 저장
4. **중복 저장 최소화**: 작업지시에 공정/작업기준정보 ID를 넣지 않음. 품목만 있으면 전부 파생 조회 가능
5. **work_order_process**: 작업지시 생성 시 라우팅 공정을 복사하는 이유는 진행 중 수량/상태/시간 등 트랜잭션 데이터를 기록해야 하기 때문 (마스터가 변경되어도 이미 발행된 작업지시의 공정은 유지)
---
## 10. 주의사항
- `work_order_process`에 공정 정보를 복사(스냅샷)하는 이유: 마스터 라우팅이 나중에 변경되어도 이미 진행 중인 작업지시의 공정 구성은 영향받지 않아야 함
- `routing_detail_id`는 "이 공정이 어떤 마스터 라우팅에서 왔는지" 추적용. 작업기준정보 조회 키로 사용
- POP에서 작업기준정보를 표시할 때는 항상 마스터(`process_work_item`)를 조회하고, 결과만 트랜잭션 테이블에 저장
- 모든 테이블에 `company_code` 필수 (멀티테넌시)

10
frontend/app/(main)/admin/audit-log/page.tsx
View File

@ -77,14 +77,12 @@ const RESOURCE_TYPE_CONFIG: Record<
NODE_FLOW: { label: "플로우 제어", icon: GitBranch, color: "bg-teal-100 text-teal-700" },
USER: { label: "사용자", icon: User, color: "bg-amber-100 text-orange-700" },
ROLE: { label: "권한", icon: Shield, color: "bg-destructive/10 text-destructive" },
PERMISSION: { label: "권한", icon: Shield, color: "bg-destructive/10 text-destructive" },
COMPANY: { label: "회사", icon: Building2, color: "bg-indigo-100 text-indigo-700" },
CODE_CATEGORY: { label: "코드 카테고리", icon: Hash, color: "bg-cyan-100 text-cyan-700" },
CODE: { label: "코드", icon: Hash, color: "bg-cyan-100 text-cyan-700" },
DATA: { label: "데이터", icon: Database, color: "bg-muted text-foreground" },
TABLE: { label: "테이블", icon: Database, color: "bg-muted text-foreground" },
NUMBERING_RULE: { label: "채번 규칙", icon: FileText, color: "bg-amber-100 text-amber-700" },
BATCH: { label: "배치", icon: RefreshCw, color: "bg-teal-100 text-teal-700" },
};
const ACTION_CONFIG: Record<string, { label: string; color: string }> = {
@ -817,7 +815,7 @@ export default function AuditLogPage() {
</Badge>
{entry.company_code && entry.company_code !== "*" && (
<span className="text-muted-foreground text-[10px]">
[{entry.company_code}]
[{entry.company_name || entry.company_code}]
</span>
)}
</div>
@ -862,9 +860,11 @@ export default function AuditLogPage() {
</div>
<div>
<label className="text-muted-foreground text-xs">
회사코드
회사
</label>
<p className="font-medium">{selectedEntry.company_code}</p>
<p className="font-medium">
{selectedEntry.company_name || selectedEntry.company_code}
</p>
</div>
<div>
<label className="text-muted-foreground text-xs">

31
frontend/app/(pop)/pop/screens/[screenId]/page.tsx
View File

@ -17,14 +17,17 @@ import { ScreenContextProvider } from "@/contexts/ScreenContext";
import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
import { ActiveTabProvider } from "@/contexts/ActiveTabContext";
import {
PopLayoutDataV5,
PopLayoutData,
GridMode,
isV5Layout,
createEmptyPopLayoutV5,
isPopLayout,
createEmptyLayout,
GAP_PRESETS,
GRID_BREAKPOINTS,
BLOCK_GAP,
BLOCK_PADDING,
detectGridMode,
} from "@/components/pop/designer/types/pop-layout";
import { loadLegacyLayout } from "@/components/pop/designer/utils/legacyLoader";
// POP 컴포넌트 자동 등록 (레지스트리 초기화 - PopRenderer보다 먼저 import)
import "@/lib/registry/pop-components";
import PopViewerWithModals from "@/components/pop/viewer/PopViewerWithModals";
@ -79,7 +82,7 @@ function PopScreenViewPage() {
const { user } = useAuth();
const [screen, setScreen] = useState<ScreenDefinition | null>(null);
const [layout, setLayout] = useState<PopLayoutDataV5>(createEmptyPopLayoutV5());
const [layout, setLayout] = useState<PopLayoutData>(createEmptyLayout());
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@ -116,22 +119,22 @@ function PopScreenViewPage() {
try {
const popLayout = await screenApi.getLayoutPop(screenId);
if (popLayout && isV5Layout(popLayout)) {
// v5 레이아웃 로드
setLayout(popLayout);
if (popLayout && isPopLayout(popLayout)) {
const v6Layout = loadLegacyLayout(popLayout);
setLayout(v6Layout);
const componentCount = Object.keys(popLayout.components).length;
console.log(`[POP] v5 레이아웃 로드됨: ${componentCount}개 컴포넌트`);
} else if (popLayout) {
// 다른 버전 레이아웃은 빈 v5로 처리
console.log("[POP] 레거시 레이아웃 감지, 빈 레이아웃으로 시작합니다:", popLayout.version);
setLayout(createEmptyPopLayoutV5());
setLayout(createEmptyLayout());
} else {
console.log("[POP] 레이아웃 없음");
setLayout(createEmptyPopLayoutV5());
setLayout(createEmptyLayout());
}
} catch (layoutError) {
console.warn("[POP] 레이아웃 로드 실패:", layoutError);
setLayout(createEmptyPopLayoutV5());
setLayout(createEmptyLayout());
}
} catch (error) {
console.error("[POP] 화면 로드 실패:", error);
@ -318,12 +321,8 @@ function PopScreenViewPage() {
style={{ maxWidth: 1366 }}
>
{(() => {
// Gap 프리셋 계산
const currentGapPreset = layout.settings.gapPreset || "medium";
const gapMultiplier = GAP_PRESETS[currentGapPreset]?.multiplier || 1.0;
const breakpoint = GRID_BREAKPOINTS[currentModeKey];
const adjustedGap = Math.round(breakpoint.gap * gapMultiplier);
const adjustedPadding = Math.max(8, Math.round(breakpoint.padding * gapMultiplier));
const adjustedGap = BLOCK_GAP;
const adjustedPadding = BLOCK_PADDING;
return (
<PopViewerWithModals

35
frontend/components/common/ScreenModal.tsx
View File

@ -98,10 +98,43 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
const savedMode = localStorage.getItem("screenModal_continuousMode");
if (savedMode === "true") {
setContinuousMode(true);
// console.log("🔄 연속 모드 복원: true");
}
}, []);
// dataBinding: 테이블 선택 시 바인딩된 input의 formData를 자동 업데이트
useEffect(() => {
if (!modalState.isOpen || !screenData?.components?.length) return;
const handler = (e: Event) => {
const detail = (e as CustomEvent).detail;
if (!detail?.source || !detail?.data) return;
const bindingUpdates: Record<string, any> = {};
for (const comp of screenData.components) {
const db =
comp.componentConfig?.dataBinding ||
(comp as any).dataBinding;
if (!db?.sourceComponentId || !db?.sourceColumn) continue;
if (db.sourceComponentId !== detail.source) continue;
const colName = (comp as any).columnName || comp.componentConfig?.columnName;
if (!colName) continue;
const selectedRow = detail.data[0];
const value = selectedRow?.[db.sourceColumn] ?? "";
bindingUpdates[colName] = value;
}
if (Object.keys(bindingUpdates).length > 0) {
setFormData((prev) => ({ ...prev, ...bindingUpdates }));
formDataChangedRef.current = true;
}
};
window.addEventListener("v2-table-selection", handler);
return () => window.removeEventListener("v2-table-selection", handler);
}, [modalState.isOpen, screenData?.components]);
// 화면의 실제 크기 계산 함수
const calculateScreenDimensions = (components: ComponentData[]) => {
if (components.length === 0) {

186
frontend/components/pop/designer/PopCanvas.tsx
View File

@ -4,8 +4,8 @@ import { useCallback, useRef, useState, useEffect, useMemo } from "react";
import { useDrop } from "react-dnd";
import { cn } from "@/lib/utils";
import {
PopLayoutDataV5,
PopComponentDefinitionV5,
PopLayoutData,
PopComponentDefinition,
PopComponentType,
PopGridPosition,
GridMode,
@ -17,8 +17,12 @@ import {
ModalSizePreset,
MODAL_SIZE_PRESETS,
resolveModalWidth,
BLOCK_SIZE,
BLOCK_GAP,
BLOCK_PADDING,
getBlockColumns,
} from "./types/pop-layout";
import { ZoomIn, ZoomOut, Maximize2, Smartphone, Tablet, Lock, RotateCcw, AlertTriangle, EyeOff, Monitor, ChevronDown, ChevronUp } from "lucide-react";
import { ZoomIn, ZoomOut, Maximize2, Smartphone, Tablet, Lock, RotateCcw, EyeOff, Monitor, ChevronDown, ChevronUp } from "lucide-react";
import { useDrag } from "react-dnd";
import { Button } from "@/components/ui/button";
import {
@ -30,13 +34,12 @@ import {
} from "@/components/ui/select";
import { toast } from "sonner";
import PopRenderer from "./renderers/PopRenderer";
import { findNextEmptyPosition, isOverlapping, getAllEffectivePositions, needsReview } from "./utils/gridUtils";
import { findNextEmptyPosition, isOverlapping, getAllEffectivePositions } from "./utils/gridUtils";
import { DND_ITEM_TYPES } from "./constants";
/**
* 캔버스 내 상대 좌표 → 그리드 좌표 변환
* @param relX 캔버스 내 X 좌표 (패딩 포함)
* @param relY 캔버스 내 Y 좌표 (패딩 포함)
* V6: 캔버스 내 상대 좌표 → 블록 그리드 좌표 변환
* 블록 크기가 고정(BLOCK_SIZE)이므로 1fr 계산 불필요
*/
function calcGridPosition(
relX: number,
@ -47,21 +50,13 @@ function calcGridPosition(
gap: number,
padding: number
): { col: number; row: number } {
// 패딩 제외한 좌표
const x = relX - padding;
const y = relY - padding;
// 사용 가능한 너비 (패딩과 gap 제외)
const availableWidth = canvasWidth - padding * 2 - gap * (columns - 1);
const colWidth = availableWidth / columns;
const cellStride = BLOCK_SIZE + gap;
// 셀+gap 단위로 계산
const cellStride = colWidth + gap;
const rowStride = rowHeight + gap;
// 그리드 좌표 (1부터 시작)
const col = Math.max(1, Math.min(columns, Math.floor(x / cellStride) + 1));
const row = Math.max(1, Math.floor(y / rowStride) + 1);
const row = Math.max(1, Math.floor(y / cellStride) + 1);
return { col, row };
}
@ -78,13 +73,13 @@ interface DragItemMoveComponent {
}
// ========================================
// 프리셋 해상도 (4개 모드) - 너비만 정의
// V6: 프리셋 해상도 (블록 칸 수 동적 계산)
// ========================================
const VIEWPORT_PRESETS = [
{ id: "mobile_portrait", label: "모바일 세로", shortLabel: "모바일↕ (4칸)", width: 375, icon: Smartphone },
{ id: "mobile_landscape", label: "모바일 가로", shortLabel: "모바일↔ (6칸)", width: 600, icon: Smartphone },
{ id: "tablet_portrait", label: "태블릿 세로", shortLabel: "태블릿↕ (8칸)", width: 820, icon: Tablet },
{ id: "tablet_landscape", label: "태블릿 가로", shortLabel: "태블릿↔ (12칸)", width: 1024, icon: Tablet },
{ id: "mobile_portrait", label: "모바일 세로", shortLabel: `모바일↕ (${getBlockColumns(375)}칸)`, width: 375, icon: Smartphone },
{ id: "mobile_landscape", label: "모바일 가로", shortLabel: `모바일↔ (${getBlockColumns(600)}칸)`, width: 600, icon: Smartphone },
{ id: "tablet_portrait", label: "태블릿 세로", shortLabel: `태블릿↕ (${getBlockColumns(820)}칸)`, width: 820, icon: Tablet },
{ id: "tablet_landscape", label: "태블릿 가로", shortLabel: `태블릿↔ (${getBlockColumns(1024)}칸)`, width: 1024, icon: Tablet },
] as const;
type ViewportPreset = GridMode;
@ -100,13 +95,13 @@ const CANVAS_EXTRA_ROWS = 3; // 여유 행 수
// Props
// ========================================
interface PopCanvasProps {
layout: PopLayoutDataV5;
layout: PopLayoutData;
selectedComponentId: string | null;
currentMode: GridMode;
onModeChange: (mode: GridMode) => void;
onSelectComponent: (id: string | null) => void;
onDropComponent: (type: PopComponentType, position: PopGridPosition) => void;
onUpdateComponent: (componentId: string, updates: Partial<PopComponentDefinitionV5>) => void;
onUpdateComponent: (componentId: string, updates: Partial<PopComponentDefinition>) => void;
onDeleteComponent: (componentId: string) => void;
onMoveComponent?: (componentId: string, newPosition: PopGridPosition) => void;
onResizeComponent?: (componentId: string, newPosition: PopGridPosition) => void;
@ -168,7 +163,7 @@ export default function PopCanvas({
}, [layout.modals]);
// activeCanvasId에 따라 렌더링할 layout 분기
const activeLayout = useMemo((): PopLayoutDataV5 => {
const activeLayout = useMemo((): PopLayoutData => {
if (activeCanvasId === "main") return layout;
const modal = layout.modals?.find(m => m.id === activeCanvasId);
if (!modal) return layout; // fallback
@ -202,15 +197,22 @@ export default function PopCanvas({
const containerRef = useRef<HTMLDivElement>(null);
const canvasRef = useRef<HTMLDivElement>(null);
// 현재 뷰포트 해상도
// V6: 뷰포트에서 동적 블록 칸 수 계산
const currentPreset = VIEWPORT_PRESETS.find((p) => p.id === currentMode)!;
const breakpoint = GRID_BREAKPOINTS[currentMode];
const dynamicColumns = getBlockColumns(customWidth);
const breakpoint = {
...GRID_BREAKPOINTS[currentMode],
columns: dynamicColumns,
rowHeight: BLOCK_SIZE,
gap: BLOCK_GAP,
padding: BLOCK_PADDING,
label: `${dynamicColumns}칸 블록`,
};
// Gap 프리셋 적용
// V6: 블록 간격 고정 (프리셋 무관)
const currentGapPreset = layout.settings.gapPreset || "medium";
const gapMultiplier = GAP_PRESETS[currentGapPreset]?.multiplier || 1.0;
const adjustedGap = Math.round(breakpoint.gap * gapMultiplier);
const adjustedPadding = Math.max(8, Math.round(breakpoint.padding * gapMultiplier));
const adjustedGap = BLOCK_GAP;
const adjustedPadding = BLOCK_PADDING;
// 숨김 컴포넌트 ID 목록 (activeLayout 기반)
const hiddenComponentIds = activeLayout.overrides?.[currentMode]?.hidden || [];
@ -399,7 +401,7 @@ export default function PopCanvas({
const effectivePositions = getAllEffectivePositions(activeLayout, currentMode);
// 이동 중인 컴포넌트의 현재 유효 위치에서 colSpan/rowSpan 가져오기
// 검토 필요(ReviewPanel에서 클릭)나 숨김 컴포넌트는 effectivePositions에 없으므로 원본 사용
// 숨김 컴포넌트는 effectivePositions에 없으므로 원본 사용
const currentEffectivePos = effectivePositions.get(dragItem.componentId);
const componentData = layout.components[dragItem.componentId];
@ -470,22 +472,8 @@ export default function PopCanvas({
);
}, [activeLayout.components, hiddenComponentIds]);
// 검토 필요 컴포넌트 목록
const reviewComponents = useMemo(() => {
return visibleComponents.filter(comp => {
const hasOverride = !!activeLayout.overrides?.[currentMode]?.positions?.[comp.id];
return needsReview(currentMode, hasOverride);
});
}, [visibleComponents, activeLayout.overrides, currentMode]);
// 검토 패널 표시 여부 (12칸 모드가 아니고, 검토 필요 컴포넌트가 있을 때)
const showReviewPanel = currentMode !== "tablet_landscape" && reviewComponents.length > 0;
// 12칸 모드가 아닐 때만 패널 표시
// 숨김 패널: 숨김 컴포넌트가 있거나, 그리드에 컴포넌트가 있을 때 드롭 영역으로 표시
const hasGridComponents = Object.keys(activeLayout.components).length > 0;
const showHiddenPanel = currentMode !== "tablet_landscape" && (hiddenComponents.length > 0 || hasGridComponents);
const showRightPanel = showReviewPanel || showHiddenPanel;
return (
<div className="flex h-full flex-col bg-muted">
@ -666,7 +654,7 @@ export default function PopCanvas({
<div
className="relative mx-auto my-8 origin-top overflow-visible flex gap-4"
style={{
width: showRightPanel
width: showHiddenPanel
? `${customWidth + 32 + 220}px` // 오른쪽 패널 공간 추가
: `${customWidth + 32}px`,
minHeight: `${dynamicCanvasHeight + 32}px`,
@ -774,20 +762,11 @@ export default function PopCanvas({
</div>
{/* 오른쪽 패널 영역 (초과 컴포넌트 + 숨김 컴포넌트) */}
{showRightPanel && (
{showHiddenPanel && (
<div
className="flex flex-col gap-3"
style={{ marginTop: "32px" }}
>
{/* 검토 필요 패널 */}
{showReviewPanel && (
<ReviewPanel
components={reviewComponents}
selectedComponentId={selectedComponentId}
onSelectComponent={onSelectComponent}
/>
)}
{/* 숨김 컴포넌트 패널 */}
{showHiddenPanel && (
<HiddenPanel
@ -805,7 +784,7 @@ export default function PopCanvas({
{/* 하단 정보 */}
<div className="flex items-center justify-between border-t bg-background px-4 py-2">
<div className="text-xs text-muted-foreground">
{breakpoint.label} - {breakpoint.columns}칸 그리드 (행 높이: {breakpoint.rowHeight}px)
V6 블록 그리드 - {dynamicColumns}칸 (블록: {BLOCK_SIZE}px, 간격: {BLOCK_GAP}px)
</div>
<div className="text-xs text-muted-foreground">
Space + 드래그: 패닝 | Ctrl + 휠: 줌
@ -819,99 +798,12 @@ export default function PopCanvas({
// 검토 필요 영역 (오른쪽 패널)
// ========================================
interface ReviewPanelProps {
components: PopComponentDefinitionV5[];
selectedComponentId: string | null;
onSelectComponent: (id: string | null) => void;
}
function ReviewPanel({
components,
selectedComponentId,
onSelectComponent,
}: ReviewPanelProps) {
return (
<div
className="flex flex-col rounded-lg border-2 border-dashed border-primary/40 bg-primary/5"
style={{
width: "200px",
maxHeight: "300px",
}}
>
{/* 헤더 */}
<div className="flex items-center gap-2 border-b border-primary/20 bg-primary/5 px-3 py-2 rounded-t-lg">
<AlertTriangle className="h-4 w-4 text-primary" />
<span className="text-xs font-semibold text-primary">
검토 필요 ({components.length}개)
</span>
</div>
{/* 컴포넌트 목록 */}
<div className="flex-1 overflow-auto p-2 space-y-2">
{components.map((comp) => (
<ReviewItem
key={comp.id}
component={comp}
isSelected={selectedComponentId === comp.id}
onSelect={() => onSelectComponent(comp.id)}
/>
))}
</div>
{/* 안내 문구 */}
<div className="border-t border-primary/20 px-3 py-2 bg-primary/10 rounded-b-lg">
<p className="text-[10px] text-primary leading-tight">
자동 배치됨. 클릭하여 확인 후 편집 가능
</p>
</div>
</div>
);
}
// ========================================
// 검토 필요 아이템 (ReviewPanel 내부)
// ========================================
interface ReviewItemProps {
component: PopComponentDefinitionV5;
isSelected: boolean;
onSelect: () => void;
}
function ReviewItem({
component,
isSelected,
onSelect,
}: ReviewItemProps) {
return (
<div
className={cn(
"flex flex-col gap-1 rounded-md border-2 p-2 cursor-pointer transition-all",
isSelected
? "border-primary bg-primary/10 shadow-sm"
: "border-primary/20 bg-background hover:border-primary/60 hover:bg-primary/10"
)}
onClick={(e) => {
e.stopPropagation();
onSelect();
}}
>
<span className="text-xs font-medium text-primary line-clamp-1">
{component.label || component.id}
</span>
<span className="text-[10px] text-primary bg-primary/10 rounded px-1.5 py-0.5 self-start">
자동 배치됨
</span>
</div>
);
}
// ========================================
// 숨김 컴포넌트 영역 (오른쪽 패널)
// ========================================
interface HiddenPanelProps {
components: PopComponentDefinitionV5[];
components: PopComponentDefinition[];
selectedComponentId: string | null;
onSelectComponent: (id: string | null) => void;
onHideComponent?: (componentId: string) => void;
@ -997,7 +889,7 @@ function HiddenPanel({
// ========================================
interface HiddenItemProps {
component: PopComponentDefinitionV5;
component: PopComponentDefinition;
isSelected: boolean;
onSelect: () => void;
}

49
frontend/components/pop/designer/PopDesigner.tsx
View File

@ -19,21 +19,22 @@ import PopCanvas from "./PopCanvas";
import ComponentEditorPanel from "./panels/ComponentEditorPanel";
import ComponentPalette from "./panels/ComponentPalette";
import {
PopLayoutDataV5,
PopLayoutData,
PopComponentType,
PopComponentDefinitionV5,
PopComponentDefinition,
PopGridPosition,
GridMode,
GapPreset,
createEmptyPopLayoutV5,
isV5Layout,
addComponentToV5Layout,
createComponentDefinitionV5,
createEmptyLayout,
isPopLayout,
addComponentToLayout,
createComponentDefinition,
GRID_BREAKPOINTS,
PopModalDefinition,
PopDataConnection,
} from "./types/pop-layout";
import { getAllEffectivePositions } from "./utils/gridUtils";
import { loadLegacyLayout } from "./utils/legacyLoader";
import { screenApi } from "@/lib/api/screen";
import { ScreenDefinition } from "@/types/screen";
import { PopDesignerContext } from "./PopDesignerContext";
@ -59,10 +60,10 @@ export default function PopDesigner({
// ========================================
// 레이아웃 상태
// ========================================
const [layout, setLayout] = useState<PopLayoutDataV5>(createEmptyPopLayoutV5());
const [layout, setLayout] = useState<PopLayoutData>(createEmptyLayout());
// 히스토리
const [history, setHistory] = useState<PopLayoutDataV5[]>([]);
const [history, setHistory] = useState<PopLayoutData[]>([]);
const [historyIndex, setHistoryIndex] = useState(-1);
// UI 상태
@ -84,7 +85,7 @@ export default function PopDesigner({
const [activeCanvasId, setActiveCanvasId] = useState<string>("main");
// 선택된 컴포넌트 (activeCanvasId에 따라 메인 또는 모달에서 조회)
const selectedComponent: PopComponentDefinitionV5 | null = (() => {
const selectedComponent: PopComponentDefinition | null = (() => {
if (!selectedComponentId) return null;
if (activeCanvasId === "main") {
return layout.components[selectedComponentId] || null;
@ -96,7 +97,7 @@ export default function PopDesigner({
// ========================================
// 히스토리 관리
// ========================================
const saveToHistory = useCallback((newLayout: PopLayoutDataV5) => {
const saveToHistory = useCallback((newLayout: PopLayoutData) => {
setHistory((prev) => {
const newHistory = prev.slice(0, historyIndex + 1);
newHistory.push(JSON.parse(JSON.stringify(newLayout)));
@ -150,14 +151,13 @@ export default function PopDesigner({
try {
const loadedLayout = await screenApi.getLayoutPop(selectedScreen.screenId);
if (loadedLayout && isV5Layout(loadedLayout) && loadedLayout.components && Object.keys(loadedLayout.components).length > 0) {
// v5 레이아웃 로드
// 기존 레이아웃 호환성: gapPreset이 없으면 기본값 추가
if (loadedLayout && isPopLayout(loadedLayout) && loadedLayout.components && Object.keys(loadedLayout.components).length > 0) {
if (!loadedLayout.settings.gapPreset) {
loadedLayout.settings.gapPreset = "medium";
}
setLayout(loadedLayout);
setHistory([loadedLayout]);
const v6Layout = loadLegacyLayout(loadedLayout);
setLayout(v6Layout);
setHistory([v6Layout]);
setHistoryIndex(0);
// 기존 컴포넌트 ID에서 최대 숫자 추출하여 idCounter 설정 (중복 방지)
@ -175,7 +175,7 @@ export default function PopDesigner({
console.log(`POP 레이아웃 로드: ${existingIds.length}개 컴포넌트, idCounter: ${maxId + 1}`);
} else {
// 새 화면 또는 빈 레이아웃
const emptyLayout = createEmptyPopLayoutV5();
const emptyLayout = createEmptyLayout();
setLayout(emptyLayout);
setHistory([emptyLayout]);
setHistoryIndex(0);
@ -184,7 +184,7 @@ export default function PopDesigner({
} catch (error) {
console.error("레이아웃 로드 실패:", error);
toast.error("레이아웃을 불러오는데 실패했습니다");
const emptyLayout = createEmptyPopLayoutV5();
const emptyLayout = createEmptyLayout();
setLayout(emptyLayout);
setHistory([emptyLayout]);
setHistoryIndex(0);
@ -225,13 +225,13 @@ export default function PopDesigner({
if (activeCanvasId === "main") {
// 메인 캔버스
const newLayout = addComponentToV5Layout(layout, componentId, type, position, `${type} ${idCounter}`);
const newLayout = addComponentToLayout(layout, componentId, type, position, `${type} ${idCounter}`);
setLayout(newLayout);
saveToHistory(newLayout);
} else {
// 모달 캔버스
setLayout(prev => {
const comp = createComponentDefinitionV5(componentId, type, position, `${type} ${idCounter}`);
const comp = createComponentDefinition(componentId, type, position, `${type} ${idCounter}`);
const newLayout = {
...prev,
modals: (prev.modals || []).map(m => {
@ -250,7 +250,7 @@ export default function PopDesigner({
);
const handleUpdateComponent = useCallback(
(componentId: string, updates: Partial<PopComponentDefinitionV5>) => {
(componentId: string, updates: Partial<PopComponentDefinition>) => {
// 함수적 업데이트로 stale closure 방지
setLayout((prev) => {
if (activeCanvasId === "main") {
@ -303,7 +303,7 @@ export default function PopDesigner({
const newId = `conn_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
const newConnection: PopDataConnection = { ...conn, id: newId };
const prevConnections = prev.dataFlow?.connections || [];
const newLayout: PopLayoutDataV5 = {
const newLayout: PopLayoutData = {
...prev,
dataFlow: {
...prev.dataFlow,
@ -322,7 +322,7 @@ export default function PopDesigner({
(connectionId: string, conn: Omit<PopDataConnection, "id">) => {
setLayout((prev) => {
const prevConnections = prev.dataFlow?.connections || [];
const newLayout: PopLayoutDataV5 = {
const newLayout: PopLayoutData = {
...prev,
dataFlow: {
...prev.dataFlow,
@ -343,7 +343,7 @@ export default function PopDesigner({
(connectionId: string) => {
setLayout((prev) => {
const prevConnections = prev.dataFlow?.connections || [];
const newLayout: PopLayoutDataV5 = {
const newLayout: PopLayoutData = {
...prev,
dataFlow: {
...prev.dataFlow,
@ -605,9 +605,6 @@ export default function PopDesigner({
// ========================================
const handleHideComponent = useCallback((componentId: string) => {
// 12칸 모드에서는 숨기기 불가
if (currentMode === "tablet_landscape") return;
const currentHidden = layout.overrides?.[currentMode]?.hidden || [];
// 이미 숨겨져 있으면 무시

7
frontend/components/pop/designer/index.ts
View File

@ -1,4 +1,4 @@
// POP 디자이너 컴포넌트 export (v5 그리드 시스템)
// POP 디자이너 컴포넌트 export (블록 그리드 시스템)
// 타입
export * from "./types";
@ -17,11 +17,12 @@ export { default as PopRenderer } from "./renderers/PopRenderer";
// 유틸리티
export * from "./utils/gridUtils";
export * from "./utils/legacyLoader";
// 핵심 타입 재export (편의)
export type {
PopLayoutDataV5,
PopComponentDefinitionV5,
PopLayoutData,
PopComponentDefinition,
PopComponentType,
PopGridPosition,
GridMode,

34
frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
View File

@ -3,10 +3,12 @@
import React from "react";
import { cn } from "@/lib/utils";
import {
PopComponentDefinitionV5,
PopComponentDefinition,
PopGridPosition,
GridMode,
GRID_BREAKPOINTS,
BLOCK_SIZE,
getBlockColumns,
} from "../types/pop-layout";
import {
Settings,
@ -31,15 +33,15 @@ import ConnectionEditor from "./ConnectionEditor";
interface ComponentEditorPanelProps {
/** 선택된 컴포넌트 */
component: PopComponentDefinitionV5 | null;
component: PopComponentDefinition | null;
/** 현재 모드 */
currentMode: GridMode;
/** 컴포넌트 업데이트 */
onUpdateComponent?: (updates: Partial<PopComponentDefinitionV5>) => void;
onUpdateComponent?: (updates: Partial<PopComponentDefinition>) => void;
/** 추가 className */
className?: string;
/** 그리드에 배치된 모든 컴포넌트 */
allComponents?: PopComponentDefinitionV5[];
allComponents?: PopComponentDefinition[];
/** 컴포넌트 선택 콜백 */
onSelectComponent?: (componentId: string) => void;
/** 현재 선택된 컴포넌트 ID */
@ -247,11 +249,11 @@ export default function ComponentEditorPanel({
// ========================================
interface PositionFormProps {
component: PopComponentDefinitionV5;
component: PopComponentDefinition;
currentMode: GridMode;
isDefaultMode: boolean;
columns: number;
onUpdate?: (updates: Partial<PopComponentDefinitionV5>) => void;
onUpdate?: (updates: Partial<PopComponentDefinition>) => void;
}
function PositionForm({ component, currentMode, isDefaultMode, columns, onUpdate }: PositionFormProps) {
@ -378,7 +380,7 @@ function PositionForm({ component, currentMode, isDefaultMode, columns, onUpdate
</span>
</div>
<p className="text-xs text-muted-foreground">
높이: {position.rowSpan * GRID_BREAKPOINTS[currentMode].rowHeight}px
높이: {position.rowSpan * BLOCK_SIZE + (position.rowSpan - 1) * 2}px
</p>
</div>
@ -400,13 +402,13 @@ function PositionForm({ component, currentMode, isDefaultMode, columns, onUpdate
// ========================================
interface ComponentSettingsFormProps {
component: PopComponentDefinitionV5;
onUpdate?: (updates: Partial<PopComponentDefinitionV5>) => void;
component: PopComponentDefinition;
onUpdate?: (updates: Partial<PopComponentDefinition>) => void;
currentMode?: GridMode;
previewPageIndex?: number;
onPreviewPage?: (pageIndex: number) => void;
modals?: PopModalDefinition[];
allComponents?: PopComponentDefinitionV5[];
allComponents?: PopComponentDefinition[];
connections?: PopDataConnection[];
}
@ -464,16 +466,16 @@ function ComponentSettingsForm({ component, onUpdate, currentMode, previewPageIn
// ========================================
interface VisibilityFormProps {
component: PopComponentDefinitionV5;
onUpdate?: (updates: Partial<PopComponentDefinitionV5>) => void;
component: PopComponentDefinition;
onUpdate?: (updates: Partial<PopComponentDefinition>) => void;
}
function VisibilityForm({ component, onUpdate }: VisibilityFormProps) {
const modes: Array<{ key: GridMode; label: string }> = [
{ key: "tablet_landscape", label: "태블릿 가로 (12칸)" },
{ key: "tablet_portrait", label: "태블릿 세로 (8칸)" },
{ key: "mobile_landscape", label: "모바일 가로 (6칸)" },
{ key: "mobile_portrait", label: "모바일 세로 (4칸)" },
{ key: "tablet_landscape", label: `태블릿 가로 (${getBlockColumns(1024)}칸)` },
{ key: "tablet_portrait", label: `태블릿 세로 (${getBlockColumns(820)}칸)` },
{ key: "mobile_landscape", label: `모바일 가로 (${getBlockColumns(600)}칸)` },
{ key: "mobile_portrait", label: `모바일 세로 (${getBlockColumns(375)}칸)` },
];
const handleVisibilityChange = (mode: GridMode, visible: boolean) => {

20
frontend/components/pop/designer/panels/ConnectionEditor.tsx
View File

@ -13,7 +13,7 @@ import {
SelectValue,
} from "@/components/ui/select";
import {
PopComponentDefinitionV5,
PopComponentDefinition,
PopDataConnection,
} from "../types/pop-layout";
import {
@ -26,8 +26,8 @@ import { getTableColumns } from "@/lib/api/tableManagement";
// ========================================
interface ConnectionEditorProps {
component: PopComponentDefinitionV5;
allComponents: PopComponentDefinitionV5[];
component: PopComponentDefinition;
allComponents: PopComponentDefinition[];
connections: PopDataConnection[];
onAddConnection?: (conn: Omit<PopDataConnection, "id">) => void;
onUpdateConnection?: (connectionId: string, conn: Omit<PopDataConnection, "id">) => void;
@ -102,8 +102,8 @@ export default function ConnectionEditor({
// ========================================
interface SendSectionProps {
component: PopComponentDefinitionV5;
allComponents: PopComponentDefinitionV5[];
component: PopComponentDefinition;
allComponents: PopComponentDefinition[];
outgoing: PopDataConnection[];
onAddConnection?: (conn: Omit<PopDataConnection, "id">) => void;
onUpdateConnection?: (connectionId: string, conn: Omit<PopDataConnection, "id">) => void;
@ -197,15 +197,15 @@ function SendSection({
// ========================================
interface SimpleConnectionFormProps {
component: PopComponentDefinitionV5;
allComponents: PopComponentDefinitionV5[];
component: PopComponentDefinition;
allComponents: PopComponentDefinition[];
initial?: PopDataConnection;
onSubmit: (data: Omit<PopDataConnection, "id">) => void;
onCancel?: () => void;
submitLabel: string;
}
function extractSubTableName(comp: PopComponentDefinitionV5): string | null {
function extractSubTableName(comp: PopComponentDefinition): string | null {
const cfg = comp.config as Record<string, unknown> | undefined;
if (!cfg) return null;
@ -423,8 +423,8 @@ function SimpleConnectionForm({
// ========================================
interface ReceiveSectionProps {
component: PopComponentDefinitionV5;
allComponents: PopComponentDefinitionV5[];
component: PopComponentDefinition;
allComponents: PopComponentDefinition[];
incoming: PopDataConnection[];
}

67
frontend/components/pop/designer/renderers/PopRenderer.tsx
View File

@ -5,14 +5,18 @@ import { useDrag } from "react-dnd";
import { cn } from "@/lib/utils";
import { DND_ITEM_TYPES } from "../constants";
import {
PopLayoutDataV5,
PopComponentDefinitionV5,
PopLayoutData,
PopComponentDefinition,
PopGridPosition,
GridMode,
GRID_BREAKPOINTS,
GridBreakpoint,
detectGridMode,
PopComponentType,
BLOCK_SIZE,
BLOCK_GAP,
BLOCK_PADDING,
getBlockColumns,
} from "../types/pop-layout";
import {
convertAndResolvePositions,
@ -27,7 +31,7 @@ import { PopComponentRegistry } from "@/lib/registry/PopComponentRegistry";
interface PopRendererProps {
/** v5 레이아웃 데이터 */
layout: PopLayoutDataV5;
layout: PopLayoutData;
/** 현재 뷰포트 너비 */
viewportWidth: number;
/** 현재 모드 (자동 감지 또는 수동 지정) */
@ -107,18 +111,27 @@ export default function PopRenderer({
}: PopRendererProps) {
const { gridConfig, components, overrides } = layout;
// 현재 모드 (자동 감지 또는 지정)
// V6: 뷰포트 너비에서 블록 칸 수 동적 계산
const mode = currentMode || detectGridMode(viewportWidth);
const breakpoint = GRID_BREAKPOINTS[mode];
const columns = getBlockColumns(viewportWidth);
// Gap/Padding: 오버라이드 우선, 없으면 기본값 사용
const finalGap = overrideGap !== undefined ? overrideGap : breakpoint.gap;
const finalPadding = overridePadding !== undefined ? overridePadding : breakpoint.padding;
// V6: 블록 간격 고정
const finalGap = overrideGap !== undefined ? overrideGap : BLOCK_GAP;
const finalPadding = overridePadding !== undefined ? overridePadding : BLOCK_PADDING;
// 하위 호환: breakpoint 객체 (ResizeHandles 등에서 사용)
const breakpoint: GridBreakpoint = {
columns,
rowHeight: BLOCK_SIZE,
gap: finalGap,
padding: finalPadding,
label: `${columns}칸 블록`,
};
// 숨김 컴포넌트 ID 목록
const hiddenIds = overrides?.[mode]?.hidden || [];
// 동적 행 수 계산 (가이드 셀 + Grid 스타일 공유, 숨김 컴포넌트 제외)
// 동적 행 수 계산
const dynamicRowCount = useMemo(() => {
const visibleComps = Object.values(components).filter(
comp => !hiddenIds.includes(comp.id)
@ -131,19 +144,17 @@ export default function PopRenderer({
return Math.max(10, maxRowEnd + 3);
}, [components, overrides, mode, hiddenIds]);
// CSS Grid 스타일
// 디자인 모드: 행 높이 고정 (정밀한 레이아웃 편집)
// 뷰어 모드: minmax(rowHeight, auto) (컴포넌트가 컨텐츠에 맞게 확장 가능)
// V6: CSS Grid - 열은 1fr(뷰포트 꽉 채움), 행은 고정 BLOCK_SIZE
const rowTemplate = isDesignMode
? `repeat(${dynamicRowCount}, ${breakpoint.rowHeight}px)`
: `repeat(${dynamicRowCount}, minmax(${breakpoint.rowHeight}px, auto))`;
? `repeat(${dynamicRowCount}, ${BLOCK_SIZE}px)`
: `repeat(${dynamicRowCount}, minmax(${BLOCK_SIZE}px, auto))`;
const autoRowHeight = isDesignMode
? `${breakpoint.rowHeight}px`
: `minmax(${breakpoint.rowHeight}px, auto)`;
? `${BLOCK_SIZE}px`
: `minmax(${BLOCK_SIZE}px, auto)`;
const gridStyle = useMemo((): React.CSSProperties => ({
display: "grid",
gridTemplateColumns: `repeat(${breakpoint.columns}, 1fr)`,
gridTemplateColumns: `repeat(${columns}, 1fr)`,
gridTemplateRows: rowTemplate,
gridAutoRows: autoRowHeight,
gap: `${finalGap}px`,
@ -151,15 +162,15 @@ export default function PopRenderer({
minHeight: "100%",
backgroundColor: "#ffffff",
position: "relative",
}), [breakpoint, finalGap, finalPadding, dynamicRowCount, rowTemplate, autoRowHeight]);
}), [columns, finalGap, finalPadding, dynamicRowCount, rowTemplate, autoRowHeight]);
// 그리드 가이드 셀 생성 (동적 행 수)
// 그리드 가이드 셀 생성
const gridCells = useMemo(() => {
if (!isDesignMode || !showGridGuide) return [];
const cells = [];
for (let row = 1; row <= dynamicRowCount; row++) {
for (let col = 1; col <= breakpoint.columns; col++) {
for (let col = 1; col <= columns; col++) {
cells.push({
id: `cell-${col}-${row}`,
col,
@ -168,10 +179,10 @@ export default function PopRenderer({
}
}
return cells;
}, [isDesignMode, showGridGuide, breakpoint.columns, dynamicRowCount]);
}, [isDesignMode, showGridGuide, columns, dynamicRowCount]);
// visibility 체크
const isVisible = (comp: PopComponentDefinitionV5): boolean => {
const isVisible = (comp: PopComponentDefinition): boolean => {
if (!comp.visibility) return true;
const modeVisibility = comp.visibility[mode];
return modeVisibility !== false;
@ -196,7 +207,7 @@ export default function PopRenderer({
};
// 오버라이드 적용 또는 자동 재배치
const getEffectivePosition = (comp: PopComponentDefinitionV5): PopGridPosition => {
const getEffectivePosition = (comp: PopComponentDefinition): PopGridPosition => {
// 1순위: 오버라이드가 있으면 사용
const override = overrides?.[mode]?.positions?.[comp.id];
if (override) {
@ -214,7 +225,7 @@ export default function PopRenderer({
};
// 오버라이드 숨김 체크
const isHiddenByOverride = (comp: PopComponentDefinitionV5): boolean => {
const isHiddenByOverride = (comp: PopComponentDefinition): boolean => {
return overrides?.[mode]?.hidden?.includes(comp.id) ?? false;
};
@ -311,7 +322,7 @@ export default function PopRenderer({
// ========================================
interface DraggableComponentProps {
component: PopComponentDefinitionV5;
component: PopComponentDefinition;
position: PopGridPosition;
positionStyle: React.CSSProperties;
isSelected: boolean;
@ -412,7 +423,7 @@ function DraggableComponent({
// ========================================
interface ResizeHandlesProps {
component: PopComponentDefinitionV5;
component: PopComponentDefinition;
position: PopGridPosition;
breakpoint: GridBreakpoint;
viewportWidth: number;
@ -533,7 +544,7 @@ function ResizeHandles({
// ========================================
interface ComponentContentProps {
component: PopComponentDefinitionV5;
component: PopComponentDefinition;
effectivePosition: PopGridPosition;
isDesignMode: boolean;
isSelected: boolean;
@ -603,7 +614,7 @@ function ComponentContent({ component, effectivePosition, isDesignMode, isSelect
// ========================================
function renderActualComponent(
component: PopComponentDefinitionV5,
component: PopComponentDefinition,
effectivePosition?: PopGridPosition,
onRequestResize?: (componentId: string, newRowSpan: number, newColSpan?: number) => void,
screenId?: string,

242
frontend/components/pop/designer/types/pop-layout.ts
View File

@ -1,6 +1,4 @@
// POP 디자이너 레이아웃 타입 정의
// v5.0: CSS Grid 기반 그리드 시스템
// 2024-02 버전 통합: v1~v4 제거, v5 단일 버전
// POP 블록 그리드 레이아웃 타입 정의
// ========================================
// 공통 타입
@ -99,24 +97,39 @@ export interface PopLayoutMetadata {
}
// ========================================
// v5 그리드 기반 레이아웃
// v6 정사각형 블록 그리드 시스템
// ========================================
// 핵심: CSS Grid로 정확한 위치 지정
// - 열/행 좌표로 배치 (col, row)
// - 칸 단위 크기 (colSpan, rowSpan)
// - Material Design 브레이크포인트 기반
// 핵심: 균일한 정사각형 블록 (24px x 24px)
// - 열/행 좌표로 배치 (col, row) - 블록 단위
// - 뷰포트 너비에 따라 칸 수 동적 계산
// - 단일 좌표계 (모드별 변환 불필요)
/**
* 그리드 모드 (4가지)
* V6 블록 상수
*/
export const BLOCK_SIZE = 24; // 블록 크기 (px, 정사각형)
export const BLOCK_GAP = 2; // 블록 간격 (px)
export const BLOCK_PADDING = 8; // 캔버스 패딩 (px)
/**
* 뷰포트 너비에서 블록 칸 수 계산
*/
export function getBlockColumns(viewportWidth: number): number {
const available = viewportWidth - BLOCK_PADDING * 2;
return Math.max(1, Math.floor((available + BLOCK_GAP) / (BLOCK_SIZE + BLOCK_GAP)));
}
/**
* 뷰포트 프리셋 (디자이너 해상도 전환용)
*/
export type GridMode =
| "mobile_portrait" // 4칸
| "mobile_landscape" // 6칸
| "tablet_portrait" // 8칸
| "tablet_landscape"; // 12칸 (기본)
| "mobile_portrait"
| "mobile_landscape"
| "tablet_portrait"
| "tablet_landscape";
/**
* 그리드 브레이크포인트 설정
* 뷰포트 프리셋 설정
*/
export interface GridBreakpoint {
minWidth?: number;
@ -129,50 +142,43 @@ export interface GridBreakpoint {
}
/**
* 브레이크포인트 상수
* 업계 표준 (768px, 1024px) + 실제 기기 커버리지 기반
* V6 브레이크포인트 (블록 기반 동적 칸 수)
* columns는 각 뷰포트 너비에서의 블록 수
*/
export const GRID_BREAKPOINTS: Record<GridMode, GridBreakpoint> = {
// 스마트폰 세로 (iPhone SE ~ Galaxy S25 Ultra)
mobile_portrait: {
maxWidth: 479,
columns: 4,
rowHeight: 40,
gap: 8,
padding: 12,
label: "모바일 세로 (4칸)",
columns: getBlockColumns(375),
rowHeight: BLOCK_SIZE,
gap: BLOCK_GAP,
padding: BLOCK_PADDING,
label: `모바일 세로 (${getBlockColumns(375)}칸)`,
},
// 스마트폰 가로 + 소형 태블릿
mobile_landscape: {
minWidth: 480,
maxWidth: 767,
columns: 6,
rowHeight: 44,
gap: 8,
padding: 16,
label: "모바일 가로 (6칸)",
columns: getBlockColumns(600),
rowHeight: BLOCK_SIZE,
gap: BLOCK_GAP,
padding: BLOCK_PADDING,
label: `모바일 가로 (${getBlockColumns(600)}칸)`,
},
// 태블릿 세로 (iPad Mini ~ iPad Pro)
tablet_portrait: {
minWidth: 768,
maxWidth: 1023,
columns: 8,
rowHeight: 48,
gap: 12,
padding: 16,
label: "태블릿 세로 (8칸)",
columns: getBlockColumns(820),
rowHeight: BLOCK_SIZE,
gap: BLOCK_GAP,
padding: BLOCK_PADDING,
label: `태블릿 세로 (${getBlockColumns(820)}칸)`,
},
// 태블릿 가로 + 데스크톱 (기본)
tablet_landscape: {
minWidth: 1024,
columns: 12,
rowHeight: 48,
gap: 16,
padding: 24,
label: "태블릿 가로 (12칸)",
columns: getBlockColumns(1024),
rowHeight: BLOCK_SIZE,
gap: BLOCK_GAP,
padding: BLOCK_PADDING,
label: `태블릿 가로 (${getBlockColumns(1024)}칸)`,
},
} as const;
@ -183,7 +189,6 @@ export const DEFAULT_GRID_MODE: GridMode = "tablet_landscape";
/**
* 뷰포트 너비로 모드 감지
* GRID_BREAKPOINTS와 일치하는 브레이크포인트 사용
*/
export function detectGridMode(viewportWidth: number): GridMode {
if (viewportWidth < 480) return "mobile_portrait";
@ -193,31 +198,31 @@ export function detectGridMode(viewportWidth: number): GridMode {
}
/**
* v5 레이아웃 (그리드 기반)
* POP 레이아웃 데이터
*/
export interface PopLayoutDataV5 {
export interface PopLayoutData {
version: "pop-5.0";
// 그리드 설정
gridConfig: PopGridConfig;
// 컴포넌트 정의 (ID → 정의)
components: Record<string, PopComponentDefinitionV5>;
components: Record<string, PopComponentDefinition>;
// 데이터 흐름
dataFlow: PopDataFlow;
// 전역 설정
settings: PopGlobalSettingsV5;
settings: PopGlobalSettings;
// 메타데이터
metadata?: PopLayoutMetadata;
// 모드별 오버라이드 (위치 변경용)
overrides?: {
mobile_portrait?: PopModeOverrideV5;
mobile_landscape?: PopModeOverrideV5;
tablet_portrait?: PopModeOverrideV5;
mobile_portrait?: PopModeOverride;
mobile_landscape?: PopModeOverride;
tablet_portrait?: PopModeOverride;
};
// 모달 캔버스 목록 (버튼의 "모달 열기" 액션으로 생성)
@ -225,17 +230,17 @@ export interface PopLayoutDataV5 {
}
/**
* 그리드 설정
* 그리드 설정 (V6: 블록 단위)
*/
export interface PopGridConfig {
// 행 높이 (px) - 1행의 기본 높이
rowHeight: number; // 기본 48px
// 행 높이 = 블록 크기 (px)
rowHeight: number; // V6 기본 24px (= BLOCK_SIZE)
// 간격 (px)
gap: number; // 기본 8px
gap: number; // V6 기본 2px (= BLOCK_GAP)
// 패딩 (px)
padding: number; // 기본 16px
padding: number; // V6 기본 8px (= BLOCK_PADDING)
}
/**
@ -249,9 +254,9 @@ export interface PopGridPosition {
}
/**
* v5 컴포넌트 정의
* POP 컴포넌트 정의
*/
export interface PopComponentDefinitionV5 {
export interface PopComponentDefinition {
id: string;
type: PopComponentType;
label?: string;
@ -274,7 +279,7 @@ export interface PopComponentDefinitionV5 {
}
/**
* Gap 프리셋 타입
* Gap 프리셋 타입 (V6: 단일 간격이므로 medium만 유효, 하위 호환용 유지)
*/
export type GapPreset = "narrow" | "medium" | "wide";
@ -287,18 +292,18 @@ export interface GapPresetConfig {
}
/**
* Gap 프리셋 상수
* Gap 프리셋 상수 (V6: 모두 동일 - 블록 간격 고정)
*/
export const GAP_PRESETS: Record<GapPreset, GapPresetConfig> = {
narrow: { multiplier: 0.5, label: "좁게" },
medium: { multiplier: 1.0, label: "보통" },
wide: { multiplier: 1.5, label: "넓게" },
narrow: { multiplier: 1.0, label: "기본" },
medium: { multiplier: 1.0, label: "기본" },
wide: { multiplier: 1.0, label: "기본" },
};
/**
* v5 전역 설정
* POP 전역 설정
*/
export interface PopGlobalSettingsV5 {
export interface PopGlobalSettings {
// 터치 최소 크기 (px)
touchTargetMin: number; // 기본 48
@ -310,9 +315,9 @@ export interface PopGlobalSettingsV5 {
}
/**
* v5 모드별 오버라이드
* 모드별 오버라이드 (위치/숨김)
*/
export interface PopModeOverrideV5 {
export interface PopModeOverride {
// 컴포넌트별 위치 오버라이드
positions?: Record<string, Partial<PopGridPosition>>;
@ -321,18 +326,18 @@ export interface PopModeOverrideV5 {
}
// ========================================
// v5 유틸리티 함수
// 레이아웃 유틸리티 함수
// ========================================
/**
* 빈 v5 레이아웃 생성
* 빈 POP 레이아웃 생성
*/
export const createEmptyPopLayoutV5 = (): PopLayoutDataV5 => ({
export const createEmptyLayout = (): PopLayoutData => ({
version: "pop-5.0",
gridConfig: {
rowHeight: 48,
gap: 8,
padding: 16,
rowHeight: BLOCK_SIZE,
gap: BLOCK_GAP,
padding: BLOCK_PADDING,
},
components: {},
dataFlow: { connections: [] },
@ -344,40 +349,45 @@ export const createEmptyPopLayoutV5 = (): PopLayoutDataV5 => ({
});
/**
* v5 레이아웃 여부 확인
* POP 레이아웃 데이터인지 확인
*/
export const isV5Layout = (layout: any): layout is PopLayoutDataV5 => {
export const isPopLayout = (layout: any): layout is PopLayoutData => {
return layout?.version === "pop-5.0";
};
/**
* 컴포넌트 타입별 기본 크기 (칸 단위)
* 컴포넌트 타입별 기본 크기 (블록 단위, V6)
*
* 소형 (2x2) : 최소 단위. 아이콘, 프로필, 스캐너 등 단일 요소
* 중형 (8x4) : 검색, 버튼, 텍스트 등 한 줄 입력/표시
* 대형 (8x6) : 샘플, 상태바, 필드 등 여러 줄 컨텐츠
* 초대형 (19x8~) : 카드, 리스트, 대시보드 등 메인 영역
*/
export const DEFAULT_COMPONENT_GRID_SIZE: Record<PopComponentType, { colSpan: number; rowSpan: number }> = {
"pop-sample": { colSpan: 2, rowSpan: 1 },
"pop-text": { colSpan: 3, rowSpan: 1 },
"pop-icon": { colSpan: 1, rowSpan: 2 },
"pop-dashboard": { colSpan: 6, rowSpan: 3 },
"pop-card-list": { colSpan: 4, rowSpan: 3 },
"pop-card-list-v2": { colSpan: 4, rowSpan: 3 },
"pop-button": { colSpan: 2, rowSpan: 1 },
"pop-string-list": { colSpan: 4, rowSpan: 3 },
"pop-search": { colSpan: 2, rowSpan: 1 },
"pop-status-bar": { colSpan: 6, rowSpan: 1 },
"pop-field": { colSpan: 6, rowSpan: 2 },
"pop-scanner": { colSpan: 1, rowSpan: 1 },
"pop-profile": { colSpan: 1, rowSpan: 1 },
"pop-sample": { colSpan: 8, rowSpan: 6 },
"pop-text": { colSpan: 8, rowSpan: 4 },
"pop-icon": { colSpan: 2, rowSpan: 2 },
"pop-dashboard": { colSpan: 19, rowSpan: 10 },
"pop-card-list": { colSpan: 19, rowSpan: 10 },
"pop-card-list-v2": { colSpan: 19, rowSpan: 10 },
"pop-button": { colSpan: 8, rowSpan: 4 },
"pop-string-list": { colSpan: 19, rowSpan: 10 },
"pop-search": { colSpan: 8, rowSpan: 4 },
"pop-status-bar": { colSpan: 19, rowSpan: 4 },
"pop-field": { colSpan: 19, rowSpan: 6 },
"pop-scanner": { colSpan: 2, rowSpan: 2 },
"pop-profile": { colSpan: 2, rowSpan: 2 },
};
/**
* v5 컴포넌트 정의 생성
* POP 컴포넌트 정의 생성
*/
export const createComponentDefinitionV5 = (
export const createComponentDefinition = (
id: string,
type: PopComponentType,
position: PopGridPosition,
label?: string
): PopComponentDefinitionV5 => ({
): PopComponentDefinition => ({
id,
type,
label,
@ -385,21 +395,21 @@ export const createComponentDefinitionV5 = (
});
/**
* v5 레이아웃에 컴포넌트 추가
* POP 레이아웃에 컴포넌트 추가
*/
export const addComponentToV5Layout = (
layout: PopLayoutDataV5,
export const addComponentToLayout = (
layout: PopLayoutData,
componentId: string,
type: PopComponentType,
position: PopGridPosition,
label?: string
): PopLayoutDataV5 => {
): PopLayoutData => {
const newLayout = { ...layout };
// 컴포넌트 정의 추가
newLayout.components = {
...newLayout.components,
[componentId]: createComponentDefinitionV5(componentId, type, position, label),
[componentId]: createComponentDefinition(componentId, type, position, label),
};
return newLayout;
@ -474,12 +484,12 @@ export interface PopModalDefinition {
/** 모달 내부 그리드 설정 */
gridConfig: PopGridConfig;
/** 모달 내부 컴포넌트 */
components: Record<string, PopComponentDefinitionV5>;
components: Record<string, PopComponentDefinition>;
/** 모드별 오버라이드 */
overrides?: {
mobile_portrait?: PopModeOverrideV5;
mobile_landscape?: PopModeOverrideV5;
tablet_portrait?: PopModeOverrideV5;
mobile_portrait?: PopModeOverride;
mobile_landscape?: PopModeOverride;
tablet_portrait?: PopModeOverride;
};
/** 모달 프레임 설정 (닫기 방식) */
frameConfig?: {
@ -495,15 +505,29 @@ export interface PopModalDefinition {
}
// ========================================
// 레거시 타입 별칭 (하위 호환 - 추후 제거)
// 레거시 타입 별칭 (이전 코드 호환용)
// ========================================
// 기존 코드에서 import 오류 방지용
/** @deprecated v5에서는 PopLayoutDataV5 사용 */
export type PopLayoutData = PopLayoutDataV5;
/** @deprecated PopLayoutData 사용 */
export type PopLayoutDataV5 = PopLayoutData;
/** @deprecated v5에서는 PopComponentDefinitionV5 사용 */
export type PopComponentDefinition = PopComponentDefinitionV5;
/** @deprecated PopComponentDefinition 사용 */
export type PopComponentDefinitionV5 = PopComponentDefinition;
/** @deprecated v5에서는 PopGridPosition 사용 */
export type GridPosition = PopGridPosition;
/** @deprecated PopGlobalSettings 사용 */
export type PopGlobalSettingsV5 = PopGlobalSettings;
/** @deprecated PopModeOverride 사용 */
export type PopModeOverrideV5 = PopModeOverride;
/** @deprecated createEmptyLayout 사용 */
export const createEmptyPopLayoutV5 = createEmptyLayout;
/** @deprecated isPopLayout 사용 */
export const isV5Layout = isPopLayout;
/** @deprecated addComponentToLayout 사용 */
export const addComponentToV5Layout = addComponentToLayout;
/** @deprecated createComponentDefinition 사용 */
export const createComponentDefinitionV5 = createComponentDefinition;

468
frontend/components/pop/designer/utils/gridUtils.ts
View File

@ -1,217 +1,106 @@
// POP 그리드 유틸리티 (리플로우, 겹침 해결, 위치 계산)
import {
PopGridPosition,
GridMode,
GRID_BREAKPOINTS,
GridBreakpoint,
GapPreset,
GAP_PRESETS,
PopLayoutDataV5,
PopComponentDefinitionV5,
PopLayoutData,
} from "../types/pop-layout";
// ========================================
// Gap/Padding 조정
// 리플로우 (행 그룹 기반 자동 재배치)
// ========================================
/**
* Gap 프리셋에 따라 breakpoint의 gap/padding 조정
* 행 그룹 리플로우
*
* @param base 기본 breakpoint 설정
* @param preset Gap 프리셋 ("narrow" | "medium" | "wide")
* @returns 조정된 breakpoint (gap, padding 계산됨)
*/
export function getAdjustedBreakpoint(
base: GridBreakpoint,
preset: GapPreset
): GridBreakpoint {
const multiplier = GAP_PRESETS[preset]?.multiplier || 1.0;
return {
...base,
gap: Math.round(base.gap * multiplier),
padding: Math.max(8, Math.round(base.padding * multiplier)), // 최소 8px
};
}
// ========================================
// 그리드 위치 변환
// ========================================
/**
* 12칸 기준 위치를 다른 모드로 변환
*/
export function convertPositionToMode(
position: PopGridPosition,
targetMode: GridMode
): PopGridPosition {
const sourceColumns = 12;
const targetColumns = GRID_BREAKPOINTS[targetMode].columns;
// 같은 칸 수면 그대로 반환
if (sourceColumns === targetColumns) {
return position;
}
const ratio = targetColumns / sourceColumns;
// 열 위치 변환
let newCol = Math.max(1, Math.ceil((position.col - 1) * ratio) + 1);
let newColSpan = Math.max(1, Math.round(position.colSpan * ratio));
// 범위 초과 방지
if (newCol > targetColumns) {
newCol = 1;
}
if (newCol + newColSpan - 1 > targetColumns) {
newColSpan = targetColumns - newCol + 1;
}
return {
col: newCol,
row: position.row,
colSpan: Math.max(1, newColSpan),
rowSpan: position.rowSpan,
};
}
/**
* 여러 컴포넌트를 모드별로 변환하고 겹침 해결
*
* v5.1 자동 줄바꿈:
* - 원본 col > targetColumns인 컴포넌트는 자동으로 맨 아래에 배치
* - 정보 손실 방지: 모든 컴포넌트가 그리드 안에 배치됨
* CSS Flexbox wrap 원리로 자동 재배치한다.
* 1. 같은 행의 컴포넌트를 한 묶음으로 처리
* 2. 최소 2x2칸 보장 (터치 가능한 최소 크기)
* 3. 한 줄에 안 들어가면 다음 줄로 줄바꿈 (숨김 없음)
* 4. 설계 너비의 50% 이상인 컴포넌트는 전체 너비 확장
* 5. 리플로우 후 겹침 해결
*/
export function convertAndResolvePositions(
components: Array<{ id: string; position: PopGridPosition }>,
targetMode: GridMode
): Array<{ id: string; position: PopGridPosition }> {
// 엣지 케이스: 빈 배열
if (components.length === 0) {
return [];
}
if (components.length === 0) return [];
const targetColumns = GRID_BREAKPOINTS[targetMode].columns;
const designColumns = GRID_BREAKPOINTS["tablet_landscape"].columns;
// 1단계: 각 컴포넌트를 비율로 변환 (원본 col 보존)
const converted = components.map(comp => ({
id: comp.id,
position: convertPositionToMode(comp.position, targetMode),
originalCol: comp.position.col, // 원본 col 보존
}));
if (targetColumns >= designColumns) {
return components.map(c => ({ id: c.id, position: { ...c.position } }));
}
// 2단계: 정상 컴포넌트 vs 초과 컴포넌트 분리
const normalComponents = converted.filter(c => c.originalCol <= targetColumns);
const overflowComponents = converted.filter(c => c.originalCol > targetColumns);
const ratio = targetColumns / designColumns;
const MIN_COL_SPAN = 2;
const MIN_ROW_SPAN = 2;
// 3단계: 정상 컴포넌트의 최대 row 계산
const maxRow = normalComponents.length > 0
? Math.max(...normalComponents.map(c => c.position.row + c.position.rowSpan - 1))
: 0;
// 4단계: 초과 컴포넌트들을 맨 아래에 순차 배치
let currentRow = maxRow + 1;
const wrappedComponents = overflowComponents.map(comp => {
const wrappedPosition: PopGridPosition = {
col: 1, // 왼쪽 끝부터 시작
row: currentRow,
colSpan: Math.min(comp.position.colSpan, targetColumns), // 최대 칸 수 제한
rowSpan: comp.position.rowSpan,
};
currentRow += comp.position.rowSpan; // 다음 행으로 이동
return {
id: comp.id,
position: wrappedPosition,
};
const rowGroups: Record<number, Array<{ id: string; position: PopGridPosition }>> = {};
components.forEach(comp => {
const r = comp.position.row;
if (!rowGroups[r]) rowGroups[r] = [];
rowGroups[r].push(comp);
});
// 5단계: 정상 + 줄바꿈 컴포넌트 병합
const adjusted = [
...normalComponents.map(c => ({ id: c.id, position: c.position })),
...wrappedComponents,
];
const placed: Array<{ id: string; position: PopGridPosition }> = [];
let outputRow = 1;
// 6단계: 겹침 해결 (아래로 밀기)
return resolveOverlaps(adjusted, targetColumns);
}
const sortedRows = Object.keys(rowGroups).map(Number).sort((a, b) => a - b);
// ========================================
// 검토 필요 판별
// ========================================
for (const rowKey of sortedRows) {
const group = rowGroups[rowKey].sort((a, b) => a.position.col - b.position.col);
let currentCol = 1;
let maxRowSpanInLine = 0;
/**
* 컴포넌트가 현재 모드에서 "검토 필요" 상태인지 확인
*
* v5.1 검토 필요 기준:
* - 12칸 모드(기본 모드)가 아님
* - 해당 모드에서 오버라이드가 없음 (아직 편집 안 함)
*
* @param currentMode 현재 그리드 모드
* @param hasOverride 해당 모드에서 오버라이드 존재 여부
* @returns true = 검토 필요, false = 검토 완료 또는 불필요
*/
export function needsReview(
currentMode: GridMode,
hasOverride: boolean
): boolean {
const targetColumns = GRID_BREAKPOINTS[currentMode].columns;
for (const comp of group) {
const pos = comp.position;
const isMainContent = pos.colSpan >= designColumns * 0.5;
// 12칸 모드는 기본 모드이므로 검토 불필요
if (targetColumns === 12) {
return false;
let scaledSpan = isMainContent
? targetColumns
: Math.max(MIN_COL_SPAN, Math.round(pos.colSpan * ratio));
scaledSpan = Math.min(scaledSpan, targetColumns);
const scaledRowSpan = Math.max(MIN_ROW_SPAN, pos.rowSpan);
if (currentCol + scaledSpan - 1 > targetColumns) {
outputRow += Math.max(1, maxRowSpanInLine);
currentCol = 1;
maxRowSpanInLine = 0;
}
placed.push({
id: comp.id,
position: {
col: currentCol,
row: outputRow,
colSpan: scaledSpan,
rowSpan: scaledRowSpan,
},
});
maxRowSpanInLine = Math.max(maxRowSpanInLine, scaledRowSpan);
currentCol += scaledSpan;
}
outputRow += Math.max(1, maxRowSpanInLine);
}
// 오버라이드가 있으면 이미 편집함 → 검토 완료
if (hasOverride) {
return false;
}
// 오버라이드 없으면 → 검토 필요
return true;
}
/**
* @deprecated v5.1부터 needsReview() 사용 권장
*
* 기존 isOutOfBounds는 "화면 밖" 개념이었으나,
* v5.1 자동 줄바꿈으로 인해 모든 컴포넌트가 그리드 안에 배치됩니다.
* 대신 needsReview()로 "검토 필요" 여부를 판별하세요.
*/
export function isOutOfBounds(
originalPosition: PopGridPosition,
currentMode: GridMode,
overridePosition?: PopGridPosition | null
): boolean {
const targetColumns = GRID_BREAKPOINTS[currentMode].columns;
// 12칸 모드면 초과 불가
if (targetColumns === 12) {
return false;
}
// 오버라이드가 있으면 오버라이드 위치로 판단
if (overridePosition) {
return overridePosition.col > targetColumns;
}
// 오버라이드 없으면 원본 col로 판단
return originalPosition.col > targetColumns;
return resolveOverlaps(placed, targetColumns);
}
// ========================================
// 겹침 감지 및 해결
// ========================================
/**
* 두 위치가 겹치는지 확인
*/
export function isOverlapping(a: PopGridPosition, b: PopGridPosition): boolean {
// 열 겹침 체크
const aColEnd = a.col + a.colSpan - 1;
const bColEnd = b.col + b.colSpan - 1;
const colOverlap = !(aColEnd < b.col || bColEnd < a.col);
// 행 겹침 체크
const aRowEnd = a.row + a.rowSpan - 1;
const bRowEnd = b.row + b.rowSpan - 1;
const rowOverlap = !(aRowEnd < b.row || bRowEnd < a.row);
@ -219,14 +108,10 @@ export function isOverlapping(a: PopGridPosition, b: PopGridPosition): boolean {
return colOverlap && rowOverlap;
}
/**
* 겹침 해결 (아래로 밀기)
*/
export function resolveOverlaps(
positions: Array<{ id: string; position: PopGridPosition }>,
columns: number
): Array<{ id: string; position: PopGridPosition }> {
// row, col 순으로 정렬
const sorted = [...positions].sort((a, b) =>
a.position.row - b.position.row || a.position.col - b.position.col
);
@ -236,21 +121,15 @@ export function resolveOverlaps(
sorted.forEach((item) => {
let { row, col, colSpan, rowSpan } = item.position;
// 열이 범위를 초과하면 조정
if (col + colSpan - 1 > columns) {
colSpan = columns - col + 1;
}
// 기존 배치와 겹치면 아래로 이동
let attempts = 0;
const maxAttempts = 100;
while (attempts < maxAttempts) {
while (attempts < 100) {
const currentPos: PopGridPosition = { col, row, colSpan, rowSpan };
const hasOverlap = resolved.some(r => isOverlapping(currentPos, r.position));
if (!hasOverlap) break;
row++;
attempts++;
}
@ -265,124 +144,9 @@ export function resolveOverlaps(
}
// ========================================
// 좌표 변환
// 자동 배치 (새 컴포넌트 드롭 시)
// ========================================
/**
* 마우스 좌표 → 그리드 좌표 변환
*
* CSS Grid 계산 방식:
* - 사용 가능 너비 = 캔버스 너비 - 패딩*2 - gap*(columns-1)
* - 각 칸 너비 = 사용 가능 너비 / columns
* - 셀 N의 시작 X = padding + (N-1) * (칸너비 + gap)
*/
export function mouseToGridPosition(
mouseX: number,
mouseY: number,
canvasRect: DOMRect,
columns: number,
rowHeight: number,
gap: number,
padding: number
): { col: number; row: number } {
// 캔버스 내 상대 위치 (패딩 영역 포함)
const relX = mouseX - canvasRect.left - padding;
const relY = mouseY - canvasRect.top - padding;
// CSS Grid 1fr 계산과 동일하게
// 사용 가능 너비 = 전체 너비 - 양쪽 패딩 - (칸 사이 gap)
const availableWidth = canvasRect.width - padding * 2 - gap * (columns - 1);
const colWidth = availableWidth / columns;
// 각 셀의 실제 간격 (셀 너비 + gap)
const cellStride = colWidth + gap;
// 그리드 좌표 계산 (1부터 시작)
// relX를 cellStride로 나누면 몇 번째 칸인지 알 수 있음
const col = Math.max(1, Math.min(columns, Math.floor(relX / cellStride) + 1));
const row = Math.max(1, Math.floor(relY / (rowHeight + gap)) + 1);
return { col, row };
}
/**
* 그리드 좌표 → 픽셀 좌표 변환
*/
export function gridToPixelPosition(
col: number,
row: number,
colSpan: number,
rowSpan: number,
canvasWidth: number,
columns: number,
rowHeight: number,
gap: number,
padding: number
): { x: number; y: number; width: number; height: number } {
const totalGap = gap * (columns - 1);
const colWidth = (canvasWidth - padding * 2 - totalGap) / columns;
return {
x: padding + (col - 1) * (colWidth + gap),
y: padding + (row - 1) * (rowHeight + gap),
width: colWidth * colSpan + gap * (colSpan - 1),
height: rowHeight * rowSpan + gap * (rowSpan - 1),
};
}
// ========================================
// 위치 검증
// ========================================
/**
* 위치가 그리드 범위 내에 있는지 확인
*/
export function isValidPosition(
position: PopGridPosition,
columns: number
): boolean {
return (
position.col >= 1 &&
position.row >= 1 &&
position.colSpan >= 1 &&
position.rowSpan >= 1 &&
position.col + position.colSpan - 1 <= columns
);
}
/**
* 위치를 그리드 범위 내로 조정
*/
export function clampPosition(
position: PopGridPosition,
columns: number
): PopGridPosition {
let { col, row, colSpan, rowSpan } = position;
// 최소값 보장
col = Math.max(1, col);
row = Math.max(1, row);
colSpan = Math.max(1, colSpan);
rowSpan = Math.max(1, rowSpan);
// 열 범위 초과 방지
if (col + colSpan - 1 > columns) {
if (col > columns) {
col = 1;
}
colSpan = columns - col + 1;
}
return { col, row, colSpan, rowSpan };
}
// ========================================
// 자동 배치
// ========================================
/**
* 다음 빈 위치 찾기
*/
export function findNextEmptyPosition(
existingPositions: PopGridPosition[],
colSpan: number,
@ -391,168 +155,94 @@ export function findNextEmptyPosition(
): PopGridPosition {
let row = 1;
let col = 1;
const maxAttempts = 1000;
let attempts = 0;
while (attempts < maxAttempts) {
while (attempts < 1000) {
const candidatePos: PopGridPosition = { col, row, colSpan, rowSpan };
// 범위 체크
if (col + colSpan - 1 > columns) {
col = 1;
row++;
continue;
}
// 겹침 체크
const hasOverlap = existingPositions.some(pos =>
isOverlapping(candidatePos, pos)
);
const hasOverlap = existingPositions.some(pos => isOverlapping(candidatePos, pos));
if (!hasOverlap) return candidatePos;
if (!hasOverlap) {
return candidatePos;
}
// 다음 위치로 이동
col++;
if (col + colSpan - 1 > columns) {
col = 1;
row++;
}
attempts++;
}
// 실패 시 마지막 행에 배치
return { col: 1, row: row + 1, colSpan, rowSpan };
}
/**
* 컴포넌트들을 자동으로 배치
*/
export function autoLayoutComponents(
components: Array<{ id: string; colSpan: number; rowSpan: number }>,
columns: number
): Array<{ id: string; position: PopGridPosition }> {
const result: Array<{ id: string; position: PopGridPosition }> = [];
let currentRow = 1;
let currentCol = 1;
components.forEach(comp => {
// 현재 행에 공간이 부족하면 다음 행으로
if (currentCol + comp.colSpan - 1 > columns) {
currentRow++;
currentCol = 1;
}
result.push({
id: comp.id,
position: {
col: currentCol,
row: currentRow,
colSpan: comp.colSpan,
rowSpan: comp.rowSpan,
},
});
currentCol += comp.colSpan;
});
return result;
}
// ========================================
// 유효 위치 계산 (통합 함수)
// 유효 위치 계산
// ========================================
/**
* 컴포넌트의 유효 위치를 계산합니다.
* 컴포넌트의 유효 위치를 계산한다.
* 우선순위: 1. 오버라이드 → 2. 자동 재배치 → 3. 원본 위치
*
* @param componentId 컴포넌트 ID
* @param layout 전체 레이아웃 데이터
* @param mode 현재 그리드 모드
* @param autoResolvedPositions 미리 계산된 자동 재배치 위치 (선택적)
*/
export function getEffectiveComponentPosition(
function getEffectiveComponentPosition(
componentId: string,
layout: PopLayoutDataV5,
layout: PopLayoutData,
mode: GridMode,
autoResolvedPositions?: Array<{ id: string; position: PopGridPosition }>
): PopGridPosition | null {
const component = layout.components[componentId];
if (!component) return null;
// 1순위: 오버라이드가 있으면 사용
const override = layout.overrides?.[mode]?.positions?.[componentId];
if (override) {
return { ...component.position, ...override };
}
// 2순위: 자동 재배치된 위치 사용
if (autoResolvedPositions) {
const autoResolved = autoResolvedPositions.find(p => p.id === componentId);
if (autoResolved) {
return autoResolved.position;
}
if (autoResolved) return autoResolved.position;
} else {
// 자동 재배치 직접 계산
const componentsArray = Object.entries(layout.components).map(([id, comp]) => ({
id,
position: comp.position,
}));
const resolved = convertAndResolvePositions(componentsArray, mode);
const autoResolved = resolved.find(p => p.id === componentId);
if (autoResolved) {
return autoResolved.position;
}
if (autoResolved) return autoResolved.position;
}
// 3순위: 원본 위치 (12칸 모드)
return component.position;
}
/**
* 모든 컴포넌트의 유효 위치를 일괄 계산합니다.
* 숨김 처리된 컴포넌트는 제외됩니다.
*
* v5.1: 자동 줄바꿈 시스템으로 인해 모든 컴포넌트가 그리드 안에 배치되므로
* "화면 밖" 개념이 제거되었습니다.
* 모든 컴포넌트의 유효 위치를 일괄 계산한다.
* 숨김 처리된 컴포넌트는 제외.
*/
export function getAllEffectivePositions(
layout: PopLayoutDataV5,
layout: PopLayoutData,
mode: GridMode
): Map<string, PopGridPosition> {
const result = new Map<string, PopGridPosition>();
// 숨김 처리된 컴포넌트 ID 목록
const hiddenIds = layout.overrides?.[mode]?.hidden || [];
// 자동 재배치 위치 미리 계산
const componentsArray = Object.entries(layout.components).map(([id, comp]) => ({
id,
position: comp.position,
}));
const autoResolvedPositions = convertAndResolvePositions(componentsArray, mode);
// 각 컴포넌트의 유효 위치 계산
Object.keys(layout.components).forEach(componentId => {
// 숨김 처리된 컴포넌트는 제외
if (hiddenIds.includes(componentId)) {
return;
}
if (hiddenIds.includes(componentId)) return;
const position = getEffectiveComponentPosition(
componentId,
layout,
mode,
autoResolvedPositions
componentId, layout, mode, autoResolvedPositions
);
// v5.1: 자동 줄바꿈으로 인해 모든 컴포넌트가 그리드 안에 있음
// 따라서 추가 필터링 불필요
if (position) {
result.set(componentId, position);
}

128
frontend/components/pop/designer/utils/legacyLoader.ts Normal file
View File

@ -0,0 +1,128 @@
// 레거시 레이아웃 로더
// DB에 저장된 V5(12칸) 좌표를 현재 블록 좌표로 변환한다.
// DB 데이터는 건드리지 않고, 로드 시 메모리에서만 변환.
import {
PopGridPosition,
PopLayoutData,
BLOCK_SIZE,
BLOCK_GAP,
BLOCK_PADDING,
getBlockColumns,
} from "../types/pop-layout";
const LEGACY_COLUMNS = 12;
const LEGACY_ROW_HEIGHT = 48;
const LEGACY_GAP = 16;
const DESIGN_WIDTH = 1024;
function isLegacyGridConfig(layout: PopLayoutData): boolean {
if (layout.gridConfig?.rowHeight === BLOCK_SIZE) return false;
const maxCol = Object.values(layout.components).reduce((max, comp) => {
const end = comp.position.col + comp.position.colSpan - 1;
return Math.max(max, end);
}, 0);
return maxCol <= LEGACY_COLUMNS;
}
function convertLegacyPosition(
pos: PopGridPosition,
targetColumns: number,
): PopGridPosition {
const colRatio = targetColumns / LEGACY_COLUMNS;
const rowRatio = (LEGACY_ROW_HEIGHT + LEGACY_GAP) / (BLOCK_SIZE + BLOCK_GAP);
const newCol = Math.max(1, Math.round((pos.col - 1) * colRatio) + 1);
let newColSpan = Math.max(1, Math.round(pos.colSpan * colRatio));
const newRowSpan = Math.max(1, Math.round(pos.rowSpan * rowRatio));
if (newCol + newColSpan - 1 > targetColumns) {
newColSpan = targetColumns - newCol + 1;
}
return { col: newCol, row: pos.row, colSpan: newColSpan, rowSpan: newRowSpan };
}
const BLOCK_GRID_CONFIG = {
rowHeight: BLOCK_SIZE,
gap: BLOCK_GAP,
padding: BLOCK_PADDING,
};
/**
* DB에서 로드한 레이아웃을 현재 블록 좌표로 변환한다.
*
* - 12칸 레거시 좌표 → 블록 좌표 변환
* - 이미 블록 좌표인 경우 → gridConfig만 보정
* - 구 모드별 overrides는 항상 제거 (리플로우가 대체)
*/
export function loadLegacyLayout(layout: PopLayoutData): PopLayoutData {
if (!isLegacyGridConfig(layout)) {
return {
...layout,
gridConfig: BLOCK_GRID_CONFIG,
overrides: undefined,
};
}
const blockColumns = getBlockColumns(DESIGN_WIDTH);
const rowGroups: Record<number, string[]> = {};
Object.entries(layout.components).forEach(([id, comp]) => {
const r = comp.position.row;
if (!rowGroups[r]) rowGroups[r] = [];
rowGroups[r].push(id);
});
const convertedPositions: Record<string, PopGridPosition> = {};
Object.entries(layout.components).forEach(([id, comp]) => {
convertedPositions[id] = convertLegacyPosition(comp.position, blockColumns);
});
const sortedRows = Object.keys(rowGroups).map(Number).sort((a, b) => a - b);
const rowMapping: Record<number, number> = {};
let currentRow = 1;
for (const legacyRow of sortedRows) {
rowMapping[legacyRow] = currentRow;
const maxSpan = Math.max(
...rowGroups[legacyRow].map(id => convertedPositions[id].rowSpan)
);
currentRow += maxSpan;
}
const newComponents = { ...layout.components };
Object.entries(newComponents).forEach(([id, comp]) => {
const converted = convertedPositions[id];
const mappedRow = rowMapping[comp.position.row] ?? converted.row;
newComponents[id] = {
...comp,
position: { ...converted, row: mappedRow },
};
});
const newModals = layout.modals?.map(modal => {
const modalComps = { ...modal.components };
Object.entries(modalComps).forEach(([id, comp]) => {
modalComps[id] = {
...comp,
position: convertLegacyPosition(comp.position, blockColumns),
};
});
return {
...modal,
gridConfig: BLOCK_GRID_CONFIG,
components: modalComps,
overrides: undefined,
};
});
return {
...layout,
gridConfig: BLOCK_GRID_CONFIG,
components: newComponents,
overrides: undefined,
modals: newModals,
};
}

6
frontend/components/pop/viewer/PopViewerWithModals.tsx
View File

@ -20,7 +20,7 @@ import {
DialogTitle,
} from "@/components/ui/dialog";
import PopRenderer from "../designer/renderers/PopRenderer";
import type { PopLayoutDataV5, PopModalDefinition, GridMode } from "../designer/types/pop-layout";
import type { PopLayoutData, PopModalDefinition, GridMode } from "../designer/types/pop-layout";
import { detectGridMode, resolveModalWidth } from "../designer/types/pop-layout";
import { usePopEvent } from "@/hooks/pop/usePopEvent";
import { useConnectionResolver } from "@/hooks/pop/useConnectionResolver";
@ -31,7 +31,7 @@ import { useConnectionResolver } from "@/hooks/pop/useConnectionResolver";
interface PopViewerWithModalsProps {
/** 전체 레이아웃 (모달 정의 포함) */
layout: PopLayoutDataV5;
layout: PopLayoutData;
/** 뷰포트 너비 */
viewportWidth: number;
/** 화면 ID (이벤트 버스용) */
@ -178,7 +178,7 @@ export default function PopViewerWithModals({
const closeOnOverlay = definition.frameConfig?.closeOnOverlay !== false;
const closeOnEsc = definition.frameConfig?.closeOnEsc !== false;
const modalLayout: PopLayoutDataV5 = {
const modalLayout: PopLayoutData = {
...layout,
gridConfig: definition.gridConfig,
components: definition.components,

22
frontend/components/screen/CopyScreenModal.tsx
View File

@ -1165,6 +1165,28 @@ export default function CopyScreenModal({
}
}
// 그룹 복제 요약 감사 로그 1건 기록
try {
await apiClient.post("/audit-log", {
action: "COPY",
resourceType: "SCREEN",
resourceId: String(sourceGroup.id),
resourceName: sourceGroup.group_name,
summary: `그룹 "${sourceGroup.group_name}" → "${rootGroupName}" 복제 (그룹 ${stats.groups}개, 화면 ${stats.screens}개)${finalCompanyCode !== sourceGroup.company_code ? ` [${sourceGroup.company_code} → ${finalCompanyCode}]` : ""}`,
changes: {
after: {
원본그룹: sourceGroup.group_name,
대상그룹: rootGroupName,
복제그룹수: stats.groups,
복제화면수: stats.screens,
대상회사: finalCompanyCode,
},
},
});
} catch (auditError) {
console.warn("그룹 복제 감사 로그 기록 실패 (무시):", auditError);
}
toast.success(
`그룹 복제가 완료되었습니다! (그룹 ${stats.groups}개 + 화면 ${stats.screens}개)`
);

18
frontend/components/screen/RealtimePreviewDynamic.tsx
View File

@ -47,6 +47,7 @@ interface RealtimePreviewProps {
selectedTabComponentId?: string; // 🆕 선택된 탭 컴포넌트 ID
onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: any) => void; // 🆕 분할 패널 내부 컴포넌트 선택 콜백
selectedPanelComponentId?: string; // 🆕 선택된 분할 패널 컴포넌트 ID
onNestedPanelSelect?: (splitPanelId: string, panelSide: "left" | "right", compId: string, comp: any) => void;
onResize?: (componentId: string, newSize: { width: number; height: number }) => void; // 🆕 리사이즈 콜백
// 버튼 액션을 위한 props
@ -150,6 +151,7 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
selectedTabComponentId, // 🆕 선택된 탭 컴포넌트 ID
onSelectPanelComponent, // 🆕 분할 패널 내부 컴포넌트 선택 콜백
selectedPanelComponentId, // 🆕 선택된 분할 패널 컴포넌트 ID
onNestedPanelSelect,
onResize, // 🆕 리사이즈 콜백
}) => {
// 🆕 화면 다국어 컨텍스트
@ -768,10 +770,11 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
selectedTabComponentId={selectedTabComponentId}
onSelectPanelComponent={onSelectPanelComponent}
selectedPanelComponentId={selectedPanelComponentId}
onNestedPanelSelect={onNestedPanelSelect}
/>
</div>
{/* 선택된 컴포넌트 정보 표시 - 🔧 오른쪽으로 이동 (라벨과 겹치지 않도록) */}
{/* 선택된 컴포넌트 정보 표시 */}
{isSelected && (
<div className="bg-primary text-primary-foreground absolute -top-7 right-0 rounded-md px-2.5 py-1 text-xs font-medium shadow-sm">
{type === "widget" && (
@ -782,7 +785,18 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
)}
{type !== "widget" && (
<div className="flex items-center gap-1.5">
<span>{component.componentConfig?.type || type}</span>
<span>{(() => {
const ft = (component as any).componentConfig?.fieldType;
if (ft) {
const labels: Record<string, string> = {
text: "텍스트", number: "숫자", textarea: "여러줄",
select: "셀렉트", category: "카테고리", entity: "엔티티",
numbering: "채번",
};
return labels[ft] || ft;
}
return (component as any).componentConfig?.type || componentType || type;
})()}</span>
</div>
)}
</div>

161
frontend/components/screen/ResponsiveGridRenderer.tsx
View File

@ -109,6 +109,8 @@ interface ProcessedRow {
mainComponent?: ComponentData;
overlayComps: ComponentData[];
normalComps: ComponentData[];
rowMinY?: number;
rowMaxBottom?: number;
}
function FullWidthOverlayRow({
@ -202,6 +204,66 @@ function FullWidthOverlayRow({
);
}
function ProportionalRenderer({
components,
canvasWidth,
canvasHeight,
renderComponent,
}: ResponsiveGridRendererProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [containerW, setContainerW] = useState(0);
useEffect(() => {
const el = containerRef.current;
if (!el) return;
const ro = new ResizeObserver((entries) => {
const w = entries[0]?.contentRect.width;
if (w && w > 0) setContainerW(w);
});
ro.observe(el);
return () => ro.disconnect();
}, []);
const topLevel = components.filter((c) => !c.parentId);
const ratio = containerW > 0 ? containerW / canvasWidth : 1;
const maxBottom = topLevel.reduce((max, c) => {
const bottom = c.position.y + (c.size?.height || 40);
return Math.max(max, bottom);
}, 0);
return (
<div
ref={containerRef}
data-screen-runtime="true"
className="bg-background relative w-full overflow-x-hidden"
style={{ minHeight: containerW > 0 ? `${maxBottom * ratio}px` : "200px" }}
>
{containerW > 0 &&
topLevel.map((component) => {
const typeId = getComponentTypeId(component);
return (
<div
key={component.id}
data-component-id={component.id}
data-component-type={typeId}
style={{
position: "absolute",
left: `${(component.position.x / canvasWidth) * 100}%`,
top: `${component.position.y * ratio}px`,
width: `${((component.size?.width || 100) / canvasWidth) * 100}%`,
height: `${(component.size?.height || 40) * ratio}px`,
zIndex: component.position.z || 1,
}}
>
{renderComponent(component)}
</div>
);
})}
</div>
);
}
export function ResponsiveGridRenderer({
components,
canvasWidth,
@ -211,6 +273,18 @@ export function ResponsiveGridRenderer({
const { isMobile } = useResponsive();
const topLevel = components.filter((c) => !c.parentId);
const hasFullWidthComponent = topLevel.some((c) => isFullWidthComponent(c));
if (!isMobile && !hasFullWidthComponent) {
return (
<ProportionalRenderer
components={components}
canvasWidth={canvasWidth}
canvasHeight={canvasHeight}
renderComponent={renderComponent}
/>
);
}
const rows = groupComponentsIntoRows(topLevel);
const processedRows: ProcessedRow[] = [];
@ -227,6 +301,10 @@ export function ResponsiveGridRenderer({
}
}
const allComps = [...fullWidthComps, ...normalComps];
const rowMinY = allComps.length > 0 ? Math.min(...allComps.map(c => c.position.y)) : 0;
const rowMaxBottom = allComps.length > 0 ? Math.max(...allComps.map(c => c.position.y + (c.size?.height || 40))) : 0;
if (fullWidthComps.length > 0 && normalComps.length > 0) {
for (const fwComp of fullWidthComps) {
processedRows.push({
@ -234,6 +312,8 @@ export function ResponsiveGridRenderer({
mainComponent: fwComp,
overlayComps: normalComps,
normalComps: [],
rowMinY,
rowMaxBottom,
});
}
} else if (fullWidthComps.length > 0) {
@ -243,6 +323,8 @@ export function ResponsiveGridRenderer({
mainComponent: fwComp,
overlayComps: [],
normalComps: [],
rowMinY,
rowMaxBottom,
});
}
} else {
@ -250,6 +332,8 @@ export function ResponsiveGridRenderer({
type: "normal",
overlayComps: [],
normalComps,
rowMinY,
rowMaxBottom,
});
}
}
@ -261,21 +345,71 @@ export function ResponsiveGridRenderer({
style={{ minHeight: "200px" }}
>
{processedRows.map((processedRow, rowIndex) => {
const rowMarginTop = (() => {
if (rowIndex === 0) return 0;
const prevRow = processedRows[rowIndex - 1];
const prevBottom = prevRow.rowMaxBottom ?? 0;
const currTop = processedRow.rowMinY ?? 0;
const designGap = currTop - prevBottom;
if (designGap <= 0) return 0;
return Math.min(Math.max(Math.round(designGap * 0.5), 4), 48);
})();
if (processedRow.type === "fullwidth" && processedRow.mainComponent) {
return (
<FullWidthOverlayRow
key={`row-${rowIndex}`}
main={processedRow.mainComponent}
overlayComps={processedRow.overlayComps}
canvasWidth={canvasWidth}
renderComponent={renderComponent}
/>
<div key={`row-${rowIndex}`} style={{ marginTop: rowMarginTop > 0 ? `${rowMarginTop}px` : undefined }}>
<FullWidthOverlayRow
main={processedRow.mainComponent}
overlayComps={processedRow.overlayComps}
canvasWidth={canvasWidth}
renderComponent={renderComponent}
/>
</div>
);
}
const { normalComps } = processedRow;
const allButtons = normalComps.every((c) => isButtonComponent(c));
const gap = isMobile ? 8 : allButtons ? 8 : getRowGap(normalComps, canvasWidth);
// 데스크톱에서 버튼만 있는 행: 디자이너의 x, width를 비율로 적용
if (allButtons && normalComps.length > 0 && !isMobile) {
const rowHeight = Math.max(...normalComps.map(c => c.size?.height || 40));
return (
<div
key={`row-${rowIndex}`}
className="relative w-full flex-shrink-0"
style={{
height: `${rowHeight}px`,
marginTop: rowMarginTop > 0 ? `${rowMarginTop}px` : undefined,
}}
>
{normalComps.map((component) => {
const typeId = getComponentTypeId(component);
const leftPct = (component.position.x / canvasWidth) * 100;
const widthPct = ((component.size?.width || 90) / canvasWidth) * 100;
return (
<div
key={component.id}
data-component-id={component.id}
data-component-type={typeId}
style={{
position: "absolute",
left: `${leftPct}%`,
width: `${widthPct}%`,
height: `${component.size?.height || 40}px`,
}}
>
{renderComponent(component)}
</div>
);
})}
</div>
);
}
const gap = isMobile ? 8 : getRowGap(normalComps, canvasWidth);
const hasFlexHeightComp = normalComps.some((c) => {
const h = c.size?.height || 0;
@ -287,10 +421,9 @@ export function ResponsiveGridRenderer({
key={`row-${rowIndex}`}
className={cn(
"flex w-full flex-wrap overflow-hidden",
allButtons && "justify-end px-2 py-1",
hasFlexHeightComp ? "min-h-0 flex-1" : "flex-shrink-0"
)}
style={{ gap: `${gap}px` }}
style={{ gap: `${gap}px`, marginTop: rowMarginTop > 0 ? `${rowMarginTop}px` : undefined }}
>
{normalComps.map((component) => {
const typeId = getComponentTypeId(component);
@ -334,13 +467,13 @@ export function ResponsiveGridRenderer({
style={{
width: isFullWidth ? "100%" : undefined,
flexBasis: useFlexHeight ? undefined : flexBasis,
flexGrow: 1,
flexGrow: percentWidth,
flexShrink: 1,
minWidth: isMobile ? "100%" : undefined,
minHeight: useFlexHeight ? "300px" : undefined,
height: useFlexHeight ? "100%" : (component.size?.height
minHeight: useFlexHeight ? "300px" : (component.size?.height
? `${component.size.height}px`
: "auto"),
: undefined),
height: useFlexHeight ? "100%" : "auto",
}}
>
{renderComponent(component)}

597
frontend/components/screen/ScreenDesigner.tsx
View File

@ -475,6 +475,7 @@ export default function ScreenDesigner({
// 테이블 데이터
const [tables, setTables] = useState<TableInfo[]>([]);
const [tableRefreshCounter, setTableRefreshCounter] = useState(0);
const [searchTerm, setSearchTerm] = useState("");
// 🆕 검색어로 필터링된 테이블 목록
@ -1434,8 +1435,16 @@ export default function ScreenDesigner({
selectedScreen?.restApiConnectionId,
selectedScreen?.restApiEndpoint,
selectedScreen?.restApiJsonPath,
tableRefreshCounter,
]);
// 필드 타입 변경 시 테이블 컬럼 정보 갱신 (화면 디자이너에서 input_type 변경 반영)
useEffect(() => {
const handler = () => setTableRefreshCounter((c) => c + 1);
window.addEventListener("table-columns-refresh", handler);
return () => window.removeEventListener("table-columns-refresh", handler);
}, []);
// 테이블 선택 핸들러 - 사이드바에서 테이블 선택 시 호출
const handleTableSelect = useCallback(
async (tableName: string) => {
@ -2861,9 +2870,190 @@ export default function ScreenDesigner({
}
}
// 🎯 탭 컨테이너 내부 드롭 처리 (중첩 구조 지원)
// 🎯 컨테이너 드롭 우선순위: 가장 안쪽(innermost) 컨테이너 우선
// 분할패널과 탭 둘 다 감지될 경우, DOM 트리에서 더 가까운 쪽을 우선 처리
const tabsContainer = dropTarget.closest('[data-tabs-container="true"]');
if (tabsContainer) {
const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
// 분할패널이 탭보다 안쪽에 있으면 분할패널 우선 처리
const splitPanelFirst =
splitPanelContainer &&
(!tabsContainer || tabsContainer.contains(splitPanelContainer));
if (splitPanelFirst && splitPanelContainer) {
const containerId = splitPanelContainer.getAttribute("data-component-id");
const panelSide = splitPanelContainer.getAttribute("data-panel-side");
if (containerId && panelSide) {
// 분할 패널을 최상위 또는 중첩(탭 안)에서 찾기
let targetComponent: any = layout.components.find((c) => c.id === containerId);
let parentTabsId: string | null = null;
let parentTabId: string | null = null;
let parentSplitId: string | null = null;
let parentSplitSide: string | null = null;
if (!targetComponent) {
// 탭 안에 중첩된 분할패널 찾기
// top-level: overrides.type / overrides.tabs
// nested: componentType / componentConfig.tabs
for (const comp of layout.components) {
const compType = (comp as any)?.componentType || (comp as any)?.overrides?.type;
const compConfig = (comp as any)?.componentConfig || (comp as any)?.overrides || {};
if (compType === "tabs-widget" || compType === "v2-tabs-widget") {
const tabs = compConfig.tabs || [];
for (const tab of tabs) {
const found = (tab.components || []).find((c: any) => c.id === containerId);
if (found) {
targetComponent = found;
parentTabsId = comp.id;
parentTabId = tab.id;
break;
}
}
if (targetComponent) break;
}
if (compType === "split-panel-layout" || compType === "v2-split-panel-layout") {
for (const side of ["leftPanel", "rightPanel"] as const) {
const panelComps = compConfig[side]?.components || [];
for (const pc of panelComps) {
const pct = pc.componentType || pc.overrides?.type;
if (pct === "tabs-widget" || pct === "v2-tabs-widget") {
const tabs = (pc.componentConfig || pc.overrides || {}).tabs || [];
for (const tab of tabs) {
const found = (tab.components || []).find((c: any) => c.id === containerId);
if (found) {
targetComponent = found;
parentSplitId = comp.id;
parentSplitSide = side === "leftPanel" ? "left" : "right";
parentTabsId = pc.id;
parentTabId = tab.id;
break;
}
}
if (targetComponent) break;
}
}
if (targetComponent) break;
}
if (targetComponent) break;
}
}
}
const compType = (targetComponent as any)?.componentType;
if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
const currentConfig = (targetComponent as any).componentConfig || {};
const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
const panelConfig = currentConfig[panelKey] || {};
const currentComponents = panelConfig.components || [];
const panelRect = splitPanelContainer.getBoundingClientRect();
const cs1 = window.getComputedStyle(splitPanelContainer);
const dropX = (e.clientX - panelRect.left - (parseFloat(cs1.paddingLeft) || 0)) / zoomLevel;
const dropY = (e.clientY - panelRect.top - (parseFloat(cs1.paddingTop) || 0)) / zoomLevel;
const componentType = component.id || component.componentType || "v2-text-display";
const newPanelComponent = {
id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
componentType: componentType,
label: component.name || component.label || "새 컴포넌트",
position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
size: component.defaultSize || { width: 200, height: 100 },
componentConfig: component.defaultConfig || {},
};
const updatedPanelConfig = {
...panelConfig,
components: [...currentComponents, newPanelComponent],
};
const updatedSplitPanel = {
...targetComponent,
componentConfig: {
...currentConfig,
[panelKey]: updatedPanelConfig,
},
};
let newLayout;
if (parentTabsId && parentTabId) {
// 중첩: (최상위 분할패널 →) 탭 → 분할패널
const updateTabsComponent = (tabsComp: any) => {
const ck = tabsComp.componentConfig ? "componentConfig" : "overrides";
const cfg = tabsComp[ck] || {};
const tabs = cfg.tabs || [];
return {
...tabsComp,
[ck]: {
...cfg,
tabs: tabs.map((tab: any) =>
tab.id === parentTabId
? {
...tab,
components: (tab.components || []).map((c: any) =>
c.id === containerId ? updatedSplitPanel : c,
),
}
: tab,
),
},
};
};
if (parentSplitId && parentSplitSide) {
// 최상위 분할패널 → 탭 → 분할패널
const pKey = parentSplitSide === "left" ? "leftPanel" : "rightPanel";
newLayout = {
...layout,
components: layout.components.map((c) => {
if (c.id === parentSplitId) {
const sc = (c as any).componentConfig || {};
return {
...c,
componentConfig: {
...sc,
[pKey]: {
...sc[pKey],
components: (sc[pKey]?.components || []).map((pc: any) =>
pc.id === parentTabsId ? updateTabsComponent(pc) : pc,
),
},
},
};
}
return c;
}),
};
} else {
// 최상위 탭 → 분할패널
newLayout = {
...layout,
components: layout.components.map((c) =>
c.id === parentTabsId ? updateTabsComponent(c) : c,
),
};
}
} else {
// 최상위 분할패널
newLayout = {
...layout,
components: layout.components.map((c) => (c.id === containerId ? updatedSplitPanel : c)),
};
}
setLayout(newLayout);
saveToHistory(newLayout);
toast.success(`컴포넌트가 ${panelSide === "left" ? "좌측" : "우측"} 패널에 추가되었습니다`);
return;
}
}
}
if (tabsContainer && !splitPanelFirst) {
const containerId = tabsContainer.getAttribute("data-component-id");
const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
if (containerId && activeTabId) {
@ -3004,69 +3194,6 @@ export default function ScreenDesigner({
}
}
// 🎯 분할 패널 커스텀 모드 컨테이너 내부 드롭 처리
const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
if (splitPanelContainer) {
const containerId = splitPanelContainer.getAttribute("data-component-id");
const panelSide = splitPanelContainer.getAttribute("data-panel-side"); // "left" or "right"
if (containerId && panelSide) {
const targetComponent = layout.components.find((c) => c.id === containerId);
const compType = (targetComponent as any)?.componentType;
if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
const currentConfig = (targetComponent as any).componentConfig || {};
const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
const panelConfig = currentConfig[panelKey] || {};
const currentComponents = panelConfig.components || [];
// 드롭 위치 계산
const panelRect = splitPanelContainer.getBoundingClientRect();
const dropX = (e.clientX - panelRect.left) / zoomLevel;
const dropY = (e.clientY - panelRect.top) / zoomLevel;
// 새 컴포넌트 생성
const componentType = component.id || component.componentType || "v2-text-display";
console.log("🎯 분할 패널에 컴포넌트 드롭:", {
componentId: component.id,
componentType: componentType,
panelSide: panelSide,
dropPosition: { x: dropX, y: dropY },
});
const newPanelComponent = {
id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
componentType: componentType,
label: component.name || component.label || "새 컴포넌트",
position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
size: component.defaultSize || { width: 200, height: 100 },
componentConfig: component.defaultConfig || {},
};
const updatedPanelConfig = {
...panelConfig,
components: [...currentComponents, newPanelComponent],
};
const updatedComponent = {
...targetComponent,
componentConfig: {
...currentConfig,
[panelKey]: updatedPanelConfig,
},
};
const newLayout = {
...layout,
components: layout.components.map((c) => (c.id === containerId ? updatedComponent : c)),
};
setLayout(newLayout);
saveToHistory(newLayout);
toast.success(`컴포넌트가 ${panelSide === "left" ? "좌측" : "우측"} 패널에 추가되었습니다`);
return; // 분할 패널 처리 완료
}
}
}
const rect = canvasRef.current?.getBoundingClientRect();
if (!rect) return;
@ -3378,15 +3505,12 @@ export default function ScreenDesigner({
e.preventDefault();
const dragData = e.dataTransfer.getData("application/json");
// console.log("🎯 드롭 이벤트:", { dragData });
if (!dragData) {
// console.log("❌ 드래그 데이터가 없습니다");
return;
}
try {
const parsedData = JSON.parse(dragData);
// console.log("📋 파싱된 데이터:", parsedData);
// 템플릿 드래그인 경우
if (parsedData.type === "template") {
@ -3480,9 +3604,225 @@ export default function ScreenDesigner({
}
}
// 🎯 탭 컨테이너 내부에 컬럼 드롭 시 처리 (중첩 구조 지원)
// 🎯 컨테이너 감지: innermost 우선 (분할패널 > 탭)
const tabsContainer = dropTarget.closest('[data-tabs-container="true"]');
if (tabsContainer && type === "column" && column) {
const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
// 분할패널이 탭 안에 있으면 분할패널이 innermost → 분할패널 우선
const splitPanelFirst =
splitPanelContainer &&
(!tabsContainer || tabsContainer.contains(splitPanelContainer));
// 🎯 분할패널 커스텀 모드 컨테이너 내부에 컬럼 드롭 시 처리 (우선 처리)
if (splitPanelFirst && splitPanelContainer && type === "column" && column) {
const containerId = splitPanelContainer.getAttribute("data-component-id");
let panelSide = splitPanelContainer.getAttribute("data-panel-side");
// panelSide가 없으면 드롭 좌표와 splitRatio로 좌/우 판별
if (!panelSide) {
const splitRatio = parseInt(splitPanelContainer.getAttribute("data-split-ratio") || "40", 10);
const containerRect = splitPanelContainer.getBoundingClientRect();
const relativeX = e.clientX - containerRect.left;
const splitPoint = containerRect.width * (splitRatio / 100);
panelSide = relativeX < splitPoint ? "left" : "right";
}
if (containerId && panelSide) {
// 최상위에서 찾기
let targetComponent: any = layout.components.find((c) => c.id === containerId);
let parentTabsId: string | null = null;
let parentTabId: string | null = null;
let parentSplitId: string | null = null;
let parentSplitSide: string | null = null;
if (!targetComponent) {
// 탭 안 중첩 분할패널 찾기
// top-level 컴포넌트: overrides.type / overrides.tabs
// nested 컴포넌트: componentType / componentConfig.tabs
for (const comp of layout.components) {
const ct = (comp as any)?.componentType || (comp as any)?.overrides?.type;
const compConfig = (comp as any)?.componentConfig || (comp as any)?.overrides || {};
if (ct === "tabs-widget" || ct === "v2-tabs-widget") {
const tabs = compConfig.tabs || [];
for (const tab of tabs) {
const found = (tab.components || []).find((c: any) => c.id === containerId);
if (found) {
targetComponent = found;
parentTabsId = comp.id;
parentTabId = tab.id;
break;
}
}
if (targetComponent) break;
}
// 분할패널 → 탭 → 분할패널 중첩
if (ct === "split-panel-layout" || ct === "v2-split-panel-layout") {
for (const side of ["leftPanel", "rightPanel"] as const) {
const panelComps = compConfig[side]?.components || [];
for (const pc of panelComps) {
const pct = pc.componentType || pc.overrides?.type;
if (pct === "tabs-widget" || pct === "v2-tabs-widget") {
const tabs = (pc.componentConfig || pc.overrides || {}).tabs || [];
for (const tab of tabs) {
const found = (tab.components || []).find((c: any) => c.id === containerId);
if (found) {
targetComponent = found;
parentSplitId = comp.id;
parentSplitSide = side === "leftPanel" ? "left" : "right";
parentTabsId = pc.id;
parentTabId = tab.id;
break;
}
}
if (targetComponent) break;
}
}
if (targetComponent) break;
}
if (targetComponent) break;
}
}
}
const compType = (targetComponent as any)?.componentType;
if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
const currentConfig = (targetComponent as any).componentConfig || {};
const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
const panelConfig = currentConfig[panelKey] || {};
const currentComponents = panelConfig.components || [];
const panelRect = splitPanelContainer.getBoundingClientRect();
const computedStyle = window.getComputedStyle(splitPanelContainer);
const padLeft = parseFloat(computedStyle.paddingLeft) || 0;
const padTop = parseFloat(computedStyle.paddingTop) || 0;
const dropX = (e.clientX - panelRect.left - padLeft) / zoomLevel;
const dropY = (e.clientY - panelRect.top - padTop) / zoomLevel;
const v2Mapping = createV2ConfigFromColumn({
widgetType: column.widgetType,
columnName: column.columnName,
columnLabel: column.columnLabel,
codeCategory: column.codeCategory,
inputType: column.inputType,
required: column.required,
detailSettings: column.detailSettings,
referenceTable: column.referenceTable,
referenceColumn: column.referenceColumn,
displayColumn: column.displayColumn,
});
const newPanelComponent = {
id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
componentType: v2Mapping.componentType,
label: column.columnLabel || column.columnName,
position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
size: { width: 200, height: 36 },
inputType: column.inputType || column.widgetType,
widgetType: column.widgetType,
componentConfig: {
...v2Mapping.componentConfig,
columnName: column.columnName,
tableName: column.tableName,
inputType: column.inputType || column.widgetType,
},
};
const updatedSplitPanel = {
...targetComponent,
componentConfig: {
...currentConfig,
[panelKey]: {
...panelConfig,
displayMode: "custom",
components: [...currentComponents, newPanelComponent],
},
},
};
let newLayout;
if (parentSplitId && parentSplitSide && parentTabsId && parentTabId) {
// 분할패널 → 탭 → 분할패널 3중 중첩
newLayout = {
...layout,
components: layout.components.map((c) => {
if (c.id !== parentSplitId) return c;
const sc = (c as any).componentConfig || {};
const pk = parentSplitSide === "left" ? "leftPanel" : "rightPanel";
return {
...c,
componentConfig: {
...sc,
[pk]: {
...sc[pk],
components: (sc[pk]?.components || []).map((pc: any) => {
if (pc.id !== parentTabsId) return pc;
return {
...pc,
componentConfig: {
...pc.componentConfig,
tabs: (pc.componentConfig?.tabs || []).map((tab: any) => {
if (tab.id !== parentTabId) return tab;
return {
...tab,
components: (tab.components || []).map((tc: any) =>
tc.id === containerId ? updatedSplitPanel : tc,
),
};
}),
},
};
}),
},
},
};
}),
};
} else if (parentTabsId && parentTabId) {
// 탭 → 분할패널 2중 중첩
newLayout = {
...layout,
components: layout.components.map((c) => {
if (c.id !== parentTabsId) return c;
// top-level은 overrides, nested는 componentConfig
const configKey = (c as any).componentConfig ? "componentConfig" : "overrides";
const tabsConfig = (c as any)[configKey] || {};
return {
...c,
[configKey]: {
...tabsConfig,
tabs: (tabsConfig.tabs || []).map((tab: any) => {
if (tab.id !== parentTabId) return tab;
return {
...tab,
components: (tab.components || []).map((tc: any) =>
tc.id === containerId ? updatedSplitPanel : tc,
),
};
}),
},
};
}),
};
} else {
// 최상위 분할패널
newLayout = {
...layout,
components: layout.components.map((c) => (c.id === containerId ? updatedSplitPanel : c)),
};
}
toast.success("컬럼이 분할패널에 추가되었습니다");
setLayout(newLayout);
saveToHistory(newLayout);
return;
}
}
}
// 🎯 탭 컨테이너 내부에 컬럼 드롭 시 처리 (중첩 구조 지원)
if (tabsContainer && !splitPanelFirst && type === "column" && column) {
const containerId = tabsContainer.getAttribute("data-component-id");
const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
if (containerId && activeTabId) {
@ -3648,9 +3988,8 @@ export default function ScreenDesigner({
}
}
// 🎯 분할 패널 커스텀 모드 컨테이너 내부에 컬럼 드롭 시 처리
const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
if (splitPanelContainer && type === "column" && column) {
// 🎯 분할 패널 커스텀 모드 (탭 밖 최상위) 컬럼 드롭 처리
if (splitPanelContainer && !splitPanelFirst && type === "column" && column) {
const containerId = splitPanelContainer.getAttribute("data-component-id");
const panelSide = splitPanelContainer.getAttribute("data-panel-side"); // "left" or "right"
if (containerId && panelSide) {
@ -3662,12 +4001,11 @@ export default function ScreenDesigner({
const panelConfig = currentConfig[panelKey] || {};
const currentComponents = panelConfig.components || [];
// 드롭 위치 계산
const panelRect = splitPanelContainer.getBoundingClientRect();
const dropX = (e.clientX - panelRect.left) / zoomLevel;
const dropY = (e.clientY - panelRect.top) / zoomLevel;
const cs2 = window.getComputedStyle(splitPanelContainer);
const dropX = (e.clientX - panelRect.left - (parseFloat(cs2.paddingLeft) || 0)) / zoomLevel;
const dropY = (e.clientY - panelRect.top - (parseFloat(cs2.paddingTop) || 0)) / zoomLevel;
// V2 컴포넌트 매핑 사용
const v2Mapping = createV2ConfigFromColumn({
widgetType: column.widgetType,
columnName: column.columnName,
@ -6415,15 +6753,6 @@ export default function ScreenDesigner({
const { splitPanelId, panelSide } = selectedPanelComponentInfo;
const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
console.log("🔧 updatePanelComponentProperty 호출:", {
componentId,
path,
value,
splitPanelId,
panelSide,
});
// 🆕 안전한 깊은 경로 업데이트 헬퍼 함수
const setNestedValue = (obj: any, pathStr: string, val: any): any => {
const result = JSON.parse(JSON.stringify(obj));
const parts = pathStr.split(".");
@ -6440,9 +6769,27 @@ export default function ScreenDesigner({
return result;
};
// 중첩 구조 포함 분할패널 찾기 헬퍼
const findSplitPanelInLayout = (components: any[]): { found: any; path: "top" | "nested"; parentTabId?: string; parentTabTabId?: string } | null => {
const direct = components.find((c) => c.id === splitPanelId);
if (direct) return { found: direct, path: "top" };
for (const comp of components) {
const ct = (comp as any)?.componentType || (comp as any)?.overrides?.type;
const cfg = (comp as any)?.componentConfig || (comp as any)?.overrides || {};
if (ct === "tabs-widget" || ct === "v2-tabs-widget") {
for (const tab of (cfg.tabs || [])) {
const nested = (tab.components || []).find((c: any) => c.id === splitPanelId);
if (nested) return { found: nested, path: "nested", parentTabId: comp.id, parentTabTabId: tab.id };
}
}
}
return null;
};
setLayout((prevLayout) => {
const splitPanelComponent = prevLayout.components.find((c) => c.id === splitPanelId);
if (!splitPanelComponent) return prevLayout;
const result = findSplitPanelInLayout(prevLayout.components);
if (!result) return prevLayout;
const splitPanelComponent = result.found;
const currentConfig = (splitPanelComponent as any).componentConfig || {};
const panelConfig = currentConfig[panelKey] || {};
@ -6478,17 +6825,37 @@ export default function ScreenDesigner({
},
};
// selectedPanelComponentInfo 업데이트
setSelectedPanelComponentInfo((prev) =>
prev ? { ...prev, component: updatedComp } : null,
);
return {
...prevLayout,
components: prevLayout.components.map((c) =>
c.id === splitPanelId ? updatedComponent : c,
),
// 중첩 구조 반영
const applyUpdatedSplitPanel = (layout: any, updated: any, info: any) => {
if (info.path === "top") {
return { ...layout, components: layout.components.map((c: any) => c.id === splitPanelId ? updated : c) };
}
return {
...layout,
components: layout.components.map((c: any) => {
if (c.id !== info.parentTabId) return c;
const cfgKey = c.componentConfig?.tabs ? "componentConfig" : "overrides";
const cfg = c[cfgKey] || {};
return {
...c,
[cfgKey]: {
...cfg,
tabs: (cfg.tabs || []).map((t: any) =>
t.id === info.parentTabTabId
? { ...t, components: (t.components || []).map((tc: any) => tc.id === splitPanelId ? updated : tc) }
: t,
),
},
};
}),
};
};
return applyUpdatedSplitPanel(prevLayout, updatedComponent, result);
});
};
@ -6498,8 +6865,23 @@ export default function ScreenDesigner({
const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
setLayout((prevLayout) => {
const splitPanelComponent = prevLayout.components.find((c) => c.id === splitPanelId);
if (!splitPanelComponent) return prevLayout;
const findResult = (() => {
const direct = prevLayout.components.find((c: any) => c.id === splitPanelId);
if (direct) return { found: direct, path: "top" as const };
for (const comp of prevLayout.components) {
const ct = (comp as any)?.componentType || (comp as any)?.overrides?.type;
const cfg = (comp as any)?.componentConfig || (comp as any)?.overrides || {};
if (ct === "tabs-widget" || ct === "v2-tabs-widget") {
for (const tab of (cfg.tabs || [])) {
const nested = (tab.components || []).find((c: any) => c.id === splitPanelId);
if (nested) return { found: nested, path: "nested" as const, parentTabId: comp.id, parentTabTabId: tab.id };
}
}
}
return null;
})();
if (!findResult) return prevLayout;
const splitPanelComponent = findResult.found;
const currentConfig = (splitPanelComponent as any).componentConfig || {};
const panelConfig = currentConfig[panelKey] || {};
@ -6520,11 +6902,27 @@ export default function ScreenDesigner({
setSelectedPanelComponentInfo(null);
if (findResult.path === "top") {
return { ...prevLayout, components: prevLayout.components.map((c: any) => c.id === splitPanelId ? updatedComponent : c) };
}
return {
...prevLayout,
components: prevLayout.components.map((c) =>
c.id === splitPanelId ? updatedComponent : c,
),
components: prevLayout.components.map((c: any) => {
if (c.id !== findResult.parentTabId) return c;
const cfgKey = c.componentConfig?.tabs ? "componentConfig" : "overrides";
const cfg = c[cfgKey] || {};
return {
...c,
[cfgKey]: {
...cfg,
tabs: (cfg.tabs || []).map((t: any) =>
t.id === findResult.parentTabTabId
? { ...t, components: (t.components || []).map((tc: any) => tc.id === splitPanelId ? updatedComponent : tc) }
: t,
),
},
};
}),
};
});
};
@ -7128,6 +7526,7 @@ export default function ScreenDesigner({
onSelectPanelComponent={(panelSide, compId, comp) =>
handleSelectPanelComponent(component.id, panelSide, compId, comp)
}
onNestedPanelSelect={handleSelectPanelComponent}
selectedPanelComponentId={
selectedPanelComponentInfo?.splitPanelId === component.id
? selectedPanelComponentInfo.componentId

128
frontend/components/screen/config-panels/AlertConfigPanel.tsx
View File

@ -1,70 +1,80 @@
"use client";
import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { ComponentData } from "@/types/screen";
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
interface AlertConfigPanelProps {
component: ComponentData;
onUpdateProperty: (path: string, value: any) => void;
config?: Record<string, any>;
onChange?: (key: string, value: any) => void;
component?: any;
onUpdateProperty?: (path: string, value: any) => void;
}
export const AlertConfigPanel: React.FC<AlertConfigPanelProps> = ({ component, onUpdateProperty }) => {
const config = component.componentConfig || {};
const sections: ConfigSectionDefinition[] = [
{
id: "content",
title: "콘텐츠",
fields: [
{
key: "title",
label: "제목",
type: "text",
placeholder: "알림 제목을 입력하세요",
},
{
key: "message",
label: "메시지",
type: "textarea",
placeholder: "알림 메시지를 입력하세요",
},
],
},
{
id: "style",
title: "스타일",
fields: [
{
key: "type",
label: "알림 타입",
type: "select",
options: [
{ label: "정보 (Info)", value: "info" },
{ label: "경고 (Warning)", value: "warning" },
{ label: "성공 (Success)", value: "success" },
{ label: "오류 (Error)", value: "error" },
],
},
{
key: "showIcon",
label: "아이콘 표시",
type: "switch",
},
],
},
];
export const AlertConfigPanel: React.FC<AlertConfigPanelProps> = ({
config: directConfig,
onChange: directOnChange,
component,
onUpdateProperty,
}) => {
const config = directConfig || component?.componentConfig || {};
const handleChange = (key: string, value: any) => {
if (directOnChange) {
directOnChange(key, value);
} else if (onUpdateProperty) {
onUpdateProperty(`componentConfig.${key}`, value);
}
};
return (
<div className="space-y-4">
<div>
<Label htmlFor="alert-title">제목</Label>
<Input
id="alert-title"
value={config.title || "알림 제목"}
onChange={(e) => onUpdateProperty("componentConfig.title", e.target.value)}
placeholder="알림 제목을 입력하세요"
/>
</div>
<div>
<Label htmlFor="alert-message">메시지</Label>
<Textarea
id="alert-message"
value={config.message || "알림 메시지입니다."}
onChange={(e) => onUpdateProperty("componentConfig.message", e.target.value)}
placeholder="알림 메시지를 입력하세요"
rows={3}
/>
</div>
<div>
<Label htmlFor="alert-type">알림 타입</Label>
<Select
value={config.type || "info"}
onValueChange={(value) => onUpdateProperty("componentConfig.type", value)}
>
<SelectTrigger>
<SelectValue placeholder="알림 타입 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="info">정보 (Info)</SelectItem>
<SelectItem value="warning">경고 (Warning)</SelectItem>
<SelectItem value="success">성공 (Success)</SelectItem>
<SelectItem value="error">오류 (Error)</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center space-x-2">
<Switch
id="show-icon"
checked={config.showIcon ?? true}
onCheckedChange={(checked) => onUpdateProperty("componentConfig.showIcon", checked)}
/>
<Label htmlFor="show-icon">아이콘 표시</Label>
</div>
</div>
<ConfigPanelBuilder
config={config}
onChange={handleChange}
sections={sections}
/>
);
};

122
frontend/components/screen/config-panels/BadgeConfigPanel.tsx
View File

@ -1,65 +1,79 @@
"use client";
import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ComponentData } from "@/types/screen";
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
interface BadgeConfigPanelProps {
component: ComponentData;
onUpdateProperty: (path: string, value: any) => void;
config?: Record<string, any>;
onChange?: (key: string, value: any) => void;
component?: any;
onUpdateProperty?: (path: string, value: any) => void;
}
export const BadgeConfigPanel: React.FC<BadgeConfigPanelProps> = ({ component, onUpdateProperty }) => {
const config = component.componentConfig || {};
const sections: ConfigSectionDefinition[] = [
{
id: "content",
title: "콘텐츠",
fields: [
{
key: "text",
label: "뱃지 텍스트",
type: "text",
placeholder: "뱃지 텍스트를 입력하세요",
},
],
},
{
id: "style",
title: "스타일",
fields: [
{
key: "variant",
label: "뱃지 스타일",
type: "select",
options: [
{ label: "기본 (Default)", value: "default" },
{ label: "보조 (Secondary)", value: "secondary" },
{ label: "위험 (Destructive)", value: "destructive" },
{ label: "외곽선 (Outline)", value: "outline" },
],
},
{
key: "size",
label: "뱃지 크기",
type: "select",
options: [
{ label: "작음 (Small)", value: "small" },
{ label: "기본 (Default)", value: "default" },
{ label: "큼 (Large)", value: "large" },
],
},
],
},
];
export const BadgeConfigPanel: React.FC<BadgeConfigPanelProps> = ({
config: directConfig,
onChange: directOnChange,
component,
onUpdateProperty,
}) => {
const config = directConfig || component?.componentConfig || {};
const handleChange = (key: string, value: any) => {
if (directOnChange) {
directOnChange(key, value);
} else if (onUpdateProperty) {
onUpdateProperty(`componentConfig.${key}`, value);
}
};
return (
<div className="space-y-4">
<div>
<Label htmlFor="badge-text">뱃지 텍스트</Label>
<Input
id="badge-text"
value={config.text || "상태"}
onChange={(e) => onUpdateProperty("componentConfig.text", e.target.value)}
placeholder="뱃지 텍스트를 입력하세요"
/>
</div>
<div>
<Label htmlFor="badge-variant">뱃지 스타일</Label>
<Select
value={config.variant || "default"}
onValueChange={(value) => onUpdateProperty("componentConfig.variant", value)}
>
<SelectTrigger>
<SelectValue placeholder="뱃지 스타일 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">기본 (Default)</SelectItem>
<SelectItem value="secondary">보조 (Secondary)</SelectItem>
<SelectItem value="destructive">위험 (Destructive)</SelectItem>
<SelectItem value="outline">외곽선 (Outline)</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="badge-size">뱃지 크기</Label>
<Select
value={config.size || "default"}
onValueChange={(value) => onUpdateProperty("componentConfig.size", value)}
>
<SelectTrigger>
<SelectValue placeholder="뱃지 크기 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="small">작음 (Small)</SelectItem>
<SelectItem value="default">기본 (Default)</SelectItem>
<SelectItem value="large">큼 (Large)</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<ConfigPanelBuilder
config={config}
onChange={handleChange}
sections={sections}
/>
);
};

5491
frontend/components/screen/config-panels/ButtonConfigPanel.tsx
View File

File diff suppressed because it is too large Load Diff

205
frontend/components/screen/config-panels/CardConfigPanel.tsx
View File

@ -1,119 +1,108 @@
"use client";
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { ComponentData } from "@/types/screen";
import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
interface CardConfigPanelProps {
component: ComponentData;
onUpdateProperty: (path: string, value: any) => void;
config?: Record<string, any>;
onChange?: (key: string, value: any) => void;
component?: any;
onUpdateProperty?: (path: string, value: any) => void;
}
export const CardConfigPanel: React.FC<CardConfigPanelProps> = ({ component, onUpdateProperty }) => {
const config = component.componentConfig || {};
const sections: ConfigSectionDefinition[] = [
{
id: "content",
title: "콘텐츠",
fields: [
{
key: "title",
label: "카드 제목",
type: "text",
placeholder: "카드 제목을 입력하세요",
},
{
key: "content",
label: "카드 내용",
type: "textarea",
placeholder: "카드 내용을 입력하세요",
},
],
},
{
id: "style",
title: "스타일",
fields: [
{
key: "variant",
label: "카드 스타일",
type: "select",
options: [
{ label: "기본 (Default)", value: "default" },
{ label: "테두리 (Outlined)", value: "outlined" },
{ label: "그림자 (Elevated)", value: "elevated" },
{ label: "채움 (Filled)", value: "filled" },
],
},
{
key: "padding",
label: "패딩",
type: "select",
options: [
{ label: "없음 (None)", value: "none" },
{ label: "작게 (Small)", value: "small" },
{ label: "기본 (Default)", value: "default" },
{ label: "크게 (Large)", value: "large" },
],
},
{
key: "backgroundColor",
label: "배경색",
type: "color",
},
{
key: "borderRadius",
label: "테두리 반경",
type: "text",
placeholder: "8px",
},
],
},
{
id: "display",
title: "표시 옵션",
fields: [
{
key: "showHeader",
label: "헤더 표시",
type: "switch",
},
],
},
];
const handleConfigChange = (key: string, value: any) => {
onUpdateProperty(`componentConfig.${key}`, value);
export const CardConfigPanel: React.FC<CardConfigPanelProps> = ({
config: directConfig,
onChange: directOnChange,
component,
onUpdateProperty,
}) => {
const config = directConfig || component?.componentConfig || {};
const handleChange = (key: string, value: any) => {
if (directOnChange) {
directOnChange(key, value);
} else if (onUpdateProperty) {
onUpdateProperty(`componentConfig.${key}`, value);
}
};
return (
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">카드 설정</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* 카드 제목 */}
<div className="space-y-2">
<Label htmlFor="card-title">카드 제목</Label>
<Input
id="card-title"
placeholder="카드 제목을 입력하세요"
value={config.title || "카드 제목"}
onChange={(e) => handleConfigChange("title", e.target.value)}
/>
</div>
{/* 카드 내용 */}
<div className="space-y-2">
<Label htmlFor="card-content">카드 내용</Label>
<Textarea
id="card-content"
placeholder="카드 내용을 입력하세요"
value={config.content || "카드 내용 영역"}
onChange={(e) => handleConfigChange("content", e.target.value)}
rows={3}
/>
</div>
{/* 카드 스타일 */}
<div className="space-y-2">
<Label htmlFor="card-variant">카드 스타일</Label>
<Select value={config.variant || "default"} onValueChange={(value) => handleConfigChange("variant", value)}>
<SelectTrigger>
<SelectValue placeholder="카드 스타일 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">기본 (Default)</SelectItem>
<SelectItem value="outlined">테두리 (Outlined)</SelectItem>
<SelectItem value="elevated">그림자 (Elevated)</SelectItem>
<SelectItem value="filled">채움 (Filled)</SelectItem>
</SelectContent>
</Select>
</div>
{/* 헤더 표시 여부 */}
<div className="flex items-center space-x-2">
<Switch
id="show-header"
checked={config.showHeader !== false}
onCheckedChange={(checked) => handleConfigChange("showHeader", checked)}
/>
<Label htmlFor="show-header">헤더 표시</Label>
</div>
{/* 패딩 설정 */}
<div className="space-y-2">
<Label htmlFor="card-padding">패딩</Label>
<Select value={config.padding || "default"} onValueChange={(value) => handleConfigChange("padding", value)}>
<SelectTrigger>
<SelectValue placeholder="패딩 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="none">없음 (None)</SelectItem>
<SelectItem value="small">작게 (Small)</SelectItem>
<SelectItem value="default">기본 (Default)</SelectItem>
<SelectItem value="large">크게 (Large)</SelectItem>
</SelectContent>
</Select>
</div>
{/* 배경색 */}
<div className="space-y-2">
<Label htmlFor="background-color">배경색</Label>
<ColorPickerWithTransparent
id="background-color"
value={config.backgroundColor}
onChange={(value) => handleConfigChange("backgroundColor", value)}
defaultColor="#ffffff"
placeholder="#ffffff"
/>
</div>
{/* 테두리 반경 */}
<div className="space-y-2">
<Label htmlFor="border-radius">테두리 반경</Label>
<Input
id="border-radius"
placeholder="8px"
value={config.borderRadius || "8px"}
onChange={(e) => handleConfigChange("borderRadius", e.target.value)}
/>
</div>
</CardContent>
</Card>
<ConfigPanelBuilder
config={config}
onChange={handleChange}
sections={sections}
/>
);
};

259
frontend/components/screen/config-panels/DashboardConfigPanel.tsx
View File

@ -1,150 +1,131 @@
"use client";
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { ComponentData } from "@/types/screen";
import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
interface DashboardConfigPanelProps {
component: ComponentData;
onUpdateProperty: (path: string, value: any) => void;
config?: Record<string, any>;
onChange?: (key: string, value: any) => void;
component?: any;
onUpdateProperty?: (path: string, value: any) => void;
}
export const DashboardConfigPanel: React.FC<DashboardConfigPanelProps> = ({ component, onUpdateProperty }) => {
const config = component.componentConfig || {};
const sections: ConfigSectionDefinition[] = [
{
id: "content",
title: "콘텐츠",
fields: [
{
key: "title",
label: "그리드 제목",
type: "text",
placeholder: "그리드 제목을 입력하세요",
},
],
},
{
id: "grid",
title: "그리드 설정",
fields: [
{
key: "rows",
label: "행 개수",
type: "select",
options: [
{ label: "1행", value: "1" },
{ label: "2행", value: "2" },
{ label: "3행", value: "3" },
{ label: "4행", value: "4" },
],
},
{
key: "columns",
label: "열 개수",
type: "select",
options: [
{ label: "1열", value: "1" },
{ label: "2열", value: "2" },
{ label: "3열", value: "3" },
{ label: "4열", value: "4" },
{ label: "6열", value: "6" },
],
},
{
key: "gap",
label: "그리드 간격",
type: "select",
options: [
{ label: "없음 (0px)", value: "none" },
{ label: "작게 (8px)", value: "small" },
{ label: "보통 (16px)", value: "medium" },
{ label: "크게 (24px)", value: "large" },
],
},
{
key: "itemHeight",
label: "아이템 높이",
type: "text",
placeholder: "120px",
},
],
},
{
id: "style",
title: "스타일",
fields: [
{
key: "backgroundColor",
label: "배경색",
type: "color",
},
{
key: "borderRadius",
label: "테두리 반경",
type: "text",
placeholder: "8px",
},
],
},
{
id: "display",
title: "표시 옵션",
fields: [
{
key: "responsive",
label: "반응형 레이아웃",
type: "switch",
},
{
key: "showBorders",
label: "그리드 테두리 표시",
type: "switch",
},
],
},
];
const handleConfigChange = (key: string, value: any) => {
onUpdateProperty(`componentConfig.${key}`, value);
export const DashboardConfigPanel: React.FC<DashboardConfigPanelProps> = ({
config: directConfig,
onChange: directOnChange,
component,
onUpdateProperty,
}) => {
const config = directConfig || component?.componentConfig || {};
const handleChange = (key: string, value: any) => {
if (directOnChange) {
directOnChange(key, value);
} else if (onUpdateProperty) {
onUpdateProperty(`componentConfig.${key}`, value);
}
};
return (
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">대시보드 그리드 설정</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* 그리드 제목 */}
<div className="space-y-2">
<Label htmlFor="grid-title">그리드 제목</Label>
<Input
id="grid-title"
placeholder="그리드 제목을 입력하세요"
value={config.title || "대시보드 그리드"}
onChange={(e) => handleConfigChange("title", e.target.value)}
/>
</div>
{/* 행 개수 */}
<div className="space-y-2">
<Label htmlFor="grid-rows">행 개수</Label>
<Select
value={String(config.rows || 2)}
onValueChange={(value) => handleConfigChange("rows", parseInt(value))}
>
<SelectTrigger>
<SelectValue placeholder="행 개수 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">1행</SelectItem>
<SelectItem value="2">2행</SelectItem>
<SelectItem value="3">3행</SelectItem>
<SelectItem value="4">4행</SelectItem>
</SelectContent>
</Select>
</div>
{/* 열 개수 */}
<div className="space-y-2">
<Label htmlFor="grid-columns">열 개수</Label>
<Select
value={String(config.columns || 3)}
onValueChange={(value) => handleConfigChange("columns", parseInt(value))}
>
<SelectTrigger>
<SelectValue placeholder="열 개수 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">1열</SelectItem>
<SelectItem value="2">2열</SelectItem>
<SelectItem value="3">3열</SelectItem>
<SelectItem value="4">4열</SelectItem>
<SelectItem value="6">6열</SelectItem>
</SelectContent>
</Select>
</div>
{/* 간격 설정 */}
<div className="space-y-2">
<Label htmlFor="grid-gap">그리드 간격</Label>
<Select value={config.gap || "medium"} onValueChange={(value) => handleConfigChange("gap", value)}>
<SelectTrigger>
<SelectValue placeholder="간격 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="none">없음 (0px)</SelectItem>
<SelectItem value="small">작게 (8px)</SelectItem>
<SelectItem value="medium">보통 (16px)</SelectItem>
<SelectItem value="large">크게 (24px)</SelectItem>
</SelectContent>
</Select>
</div>
{/* 그리드 아이템 높이 */}
<div className="space-y-2">
<Label htmlFor="item-height">아이템 높이</Label>
<Input
id="item-height"
placeholder="120px"
value={config.itemHeight || "120px"}
onChange={(e) => handleConfigChange("itemHeight", e.target.value)}
/>
</div>
{/* 반응형 설정 */}
<div className="flex items-center space-x-2">
<Switch
id="responsive"
checked={config.responsive !== false}
onCheckedChange={(checked) => handleConfigChange("responsive", checked)}
/>
<Label htmlFor="responsive">반응형 레이아웃</Label>
</div>
{/* 테두리 표시 */}
<div className="flex items-center space-x-2">
<Switch
id="show-borders"
checked={config.showBorders !== false}
onCheckedChange={(checked) => handleConfigChange("showBorders", checked)}
/>
<Label htmlFor="show-borders">그리드 테두리 표시</Label>
</div>
{/* 배경색 */}
<div className="space-y-2">
<Label htmlFor="background-color">배경색</Label>
<ColorPickerWithTransparent
id="background-color"
value={config.backgroundColor}
onChange={(value) => handleConfigChange("backgroundColor", value)}
defaultColor="#f8f9fa"
placeholder="#f8f9fa"
/>
</div>
{/* 테두리 반경 */}
<div className="space-y-2">
<Label htmlFor="border-radius">테두리 반경</Label>
<Input
id="border-radius"
placeholder="8px"
value={config.borderRadius || "8px"}
onChange={(e) => handleConfigChange("borderRadius", e.target.value)}
/>
</div>
</CardContent>
</Card>
<ConfigPanelBuilder
config={config}
onChange={handleChange}
sections={sections}
/>
);
};

155
frontend/components/screen/config-panels/ProgressBarConfigPanel.tsx
View File

@ -1,84 +1,93 @@
"use client";
import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { ComponentData } from "@/types/screen";
import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
interface ProgressBarConfigPanelProps {
component: ComponentData;
onUpdateProperty: (path: string, value: any) => void;
config?: Record<string, any>;
onChange?: (key: string, value: any) => void;
component?: any;
onUpdateProperty?: (path: string, value: any) => void;
}
export const ProgressBarConfigPanel: React.FC<ProgressBarConfigPanelProps> = ({ component, onUpdateProperty }) => {
const config = component.componentConfig || {};
const sections: ConfigSectionDefinition[] = [
{
id: "content",
title: "콘텐츠",
fields: [
{
key: "label",
label: "라벨",
type: "text",
placeholder: "진행률 라벨을 입력하세요",
},
{
key: "value",
label: "현재 값",
type: "number",
min: 0,
placeholder: "현재 값",
},
{
key: "max",
label: "최대 값",
type: "number",
min: 1,
placeholder: "최대 값",
},
],
},
{
id: "style",
title: "스타일",
fields: [
{
key: "color",
label: "진행률 색상",
type: "color",
},
],
},
{
id: "display",
title: "표시 옵션",
fields: [
{
key: "showPercentage",
label: "퍼센트 표시",
type: "switch",
},
{
key: "showValue",
label: "값 표시",
type: "switch",
},
],
},
];
export const ProgressBarConfigPanel: React.FC<ProgressBarConfigPanelProps> = ({
config: directConfig,
onChange: directOnChange,
component,
onUpdateProperty,
}) => {
const config = directConfig || component?.componentConfig || {};
const handleChange = (key: string, value: any) => {
if (directOnChange) {
directOnChange(key, value);
} else if (onUpdateProperty) {
onUpdateProperty(`componentConfig.${key}`, value);
}
};
return (
<div className="space-y-4">
<div>
<Label htmlFor="progress-label">라벨</Label>
<Input
id="progress-label"
value={config.label || "진행률"}
onChange={(e) => onUpdateProperty("componentConfig.label", e.target.value)}
placeholder="진행률 라벨을 입력하세요"
/>
</div>
<div>
<Label htmlFor="progress-value">현재 값</Label>
<Input
id="progress-value"
type="number"
value={config.value || 65}
onChange={(e) => onUpdateProperty("componentConfig.value", parseInt(e.target.value) || 0)}
placeholder="현재 값"
min="0"
/>
</div>
<div>
<Label htmlFor="progress-max">최대 값</Label>
<Input
id="progress-max"
type="number"
value={config.max || 100}
onChange={(e) => onUpdateProperty("componentConfig.max", parseInt(e.target.value) || 100)}
placeholder="최대 값"
min="1"
/>
</div>
<div>
<Label htmlFor="progress-color">진행률 색상</Label>
<ColorPickerWithTransparent
id="progress-color"
value={config.color}
onChange={(value) => onUpdateProperty("componentConfig.color", value)}
defaultColor="#3b82f6"
placeholder="#3b82f6"
/>
</div>
<div className="flex items-center space-x-2">
<Switch
id="show-percentage"
checked={config.showPercentage ?? true}
onCheckedChange={(checked) => onUpdateProperty("componentConfig.showPercentage", checked)}
/>
<Label htmlFor="show-percentage">퍼센트 표시</Label>
</div>
<div className="flex items-center space-x-2">
<Switch
id="show-value"
checked={config.showValue ?? true}
onCheckedChange={(checked) => onUpdateProperty("componentConfig.showValue", checked)}
/>
<Label htmlFor="show-value">값 표시</Label>
</div>
</div>
<ConfigPanelBuilder
config={config}
onChange={handleChange}
sections={sections}
/>
);
};

4540
frontend/components/screen/config-panels/button-config/ActionTab.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

132
frontend/components/screen/config-panels/button-config/AdvancedTab.tsx Normal file
View File

@ -0,0 +1,132 @@
"use client";
import React, { useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { ImprovedButtonControlConfigPanel } from "../ImprovedButtonControlConfigPanel";
import { FlowVisibilityConfigPanel } from "../FlowVisibilityConfigPanel";
import type { ButtonTabProps } from "./types";
/**
* AdvancedTab - 행 선택 활성화, 제어 기능, 플로우 표시 제어
*/
export const AdvancedTab: React.FC<ButtonTabProps> = ({
component,
onUpdateProperty,
allComponents,
}) => {
// 플로우 위젯이 화면에 있는지 확인
const hasFlowWidget = useMemo(() => {
return allComponents.some((comp: { componentType?: string; widgetType?: string }) => {
const compType = comp.componentType || comp.widgetType || "";
return compType === "flow-widget" || compType?.toLowerCase().includes("flow");
});
}, [allComponents]);
const actionType = component.componentConfig?.action?.type;
return (
<div className="space-y-4">
{/* 행 선택 시에만 활성화 설정 */}
<div className="space-y-4 rounded-lg border bg-muted/50 p-4">
<h4 className="text-sm font-medium text-foreground">행 선택 활성화 조건</h4>
<p className="text-xs text-muted-foreground">
테이블 리스트나 분할 패널에서 데이터가 선택되었을 때만 버튼을 활성화합니다.
</p>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>행 선택 시에만 활성화</Label>
<p className="text-xs text-muted-foreground">
체크하면 테이블에서 행을 선택해야만 버튼이 활성화됩니다.
</p>
</div>
<Switch
checked={component.componentConfig?.action?.requireRowSelection || false}
onCheckedChange={(checked) => {
onUpdateProperty("componentConfig.action.requireRowSelection", checked);
}}
/>
</div>
{component.componentConfig?.action?.requireRowSelection && (
<div className="space-y-3 border-l-2 border-primary/20 pl-4">
<div>
<Label htmlFor="row-selection-source">선택 데이터 소스</Label>
<Select
value={component.componentConfig?.action?.rowSelectionSource || "auto"}
onValueChange={(value) => {
onUpdateProperty("componentConfig.action.rowSelectionSource", value);
}}
>
<SelectTrigger id="row-selection-source" className="h-8 text-xs">
<SelectValue placeholder="데이터 소스 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="auto">자동 감지 (권장)</SelectItem>
<SelectItem value="tableList">테이블 리스트 선택</SelectItem>
<SelectItem value="splitPanelLeft">분할 패널 좌측 선택</SelectItem>
<SelectItem value="flowWidget">플로우 위젯 선택</SelectItem>
</SelectContent>
</Select>
<p className="mt-1 text-xs text-muted-foreground">
자동 감지: 테이블, 분할 패널, 플로우 위젯 중 선택된 항목이 있으면 활성화
</p>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>다중 선택 허용</Label>
<p className="text-xs text-muted-foreground">
여러 행이 선택되어도 활성화 (기본: 1개 이상 선택 시 활성화)
</p>
</div>
<Switch
checked={component.componentConfig?.action?.allowMultiRowSelection ?? true}
onCheckedChange={(checked) => {
onUpdateProperty("componentConfig.action.allowMultiRowSelection", checked);
}}
/>
</div>
{!(component.componentConfig?.action?.allowMultiRowSelection ?? true) && (
<div className="rounded-md bg-muted p-2">
<p className="text-xs text-muted-foreground">
정확히 1개의 행만 선택되어야 버튼이 활성화됩니다.
</p>
</div>
)}
</div>
)}
</div>
{/* 제어 기능 섹션 - 엑셀 업로드 계열이 아닐 때만 표시 */}
{actionType !== "excel_upload" && actionType !== "multi_table_excel_upload" && (
<div className="border-t border-border pt-6">
<ImprovedButtonControlConfigPanel
component={component}
onUpdateProperty={onUpdateProperty}
/>
</div>
)}
{/* 플로우 단계별 표시 제어 (플로우 위젯이 있을 때만) */}
{hasFlowWidget && (
<div className="border-t border-border pt-6">
<FlowVisibilityConfigPanel
component={component}
allComponents={allComponents}
onUpdateProperty={onUpdateProperty}
/>
</div>
)}
</div>
);
};

1024
frontend/components/screen/config-panels/button-config/BasicTab.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

20
frontend/components/screen/config-panels/button-config/DataflowTab.tsx Normal file
View File

@ -0,0 +1,20 @@
"use client";
import React from "react";
import { ButtonTabProps } from "./types";
import { ButtonDataflowConfigPanel } from "../ButtonDataflowConfigPanel";
/** 데이터플로우 탭: 버튼 제어관리 설정 패널 래퍼 */
export const DataflowTab: React.FC<ButtonTabProps> = ({
component,
onUpdateProperty,
}) => {
return (
<div className="space-y-4">
<ButtonDataflowConfigPanel
component={component}
onUpdateProperty={onUpdateProperty}
/>
</div>
);
};

31
frontend/components/screen/config-panels/button-config/types.ts Normal file
View File

@ -0,0 +1,31 @@
import { ComponentData } from "@/types/screen";
export interface TitleBlock {
id: string;
type: "text" | "field";
value: string;
tableName?: string;
label?: string;
}
export interface ButtonConfigPanelProps {
component: ComponentData;
onUpdateProperty: (path: string, value: any) => void;
allComponents?: ComponentData[];
currentTableName?: string;
currentScreenCompanyCode?: string;
}
export interface ScreenOption {
id: number;
name: string;
description?: string;
}
export interface ButtonTabProps {
component: ComponentData;
onUpdateProperty: (path: string, value: any) => void;
allComponents: ComponentData[];
currentTableName?: string;
currentScreenCompanyCode?: string;
}

885
frontend/components/screen/panels/V2PropertiesPanel.tsx
View File

File diff suppressed because it is too large Load Diff

14
frontend/components/screen/table-options/FilterPanel.tsx
View File

@ -194,7 +194,7 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
operator: "contains", // 기본 연산자
value: "",
filterType: cf.filterType,
width: cf.width || 200, // 너비 포함 (기본 200px)
width: cf.width && cf.width >= 10 && cf.width <= 100 ? cf.width : 25,
}));
// localStorage에 저장 (화면별로 독립적)
@ -334,20 +334,20 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
{/* 너비 입력 */}
<Input
type="number"
value={filter.width || 200}
value={filter.width && filter.width >= 10 && filter.width <= 100 ? filter.width : 25}
onChange={(e) => {
const newWidth = parseInt(e.target.value) || 200;
const newWidth = Math.min(100, Math.max(10, parseInt(e.target.value) || 25));
setColumnFilters((prev) =>
prev.map((f) => (f.columnName === filter.columnName ? { ...f, width: newWidth } : f)),
);
}}
disabled={!filter.enabled}
placeholder="너비"
placeholder="25"
className="h-8 w-[80px] text-xs sm:h-9 sm:text-sm"
min={50}
max={500}
min={10}
max={100}
/>
<span className="text-muted-foreground text-xs">px</span>
<span className="text-muted-foreground text-xs">%</span>
</div>
))}
</div>

14
frontend/components/screen/table-options/TableSettingsModal.tsx
View File

@ -136,7 +136,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
inputType,
enabled: false,
filterType,
width: 200,
width: 25,
};
});
@ -271,7 +271,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
operator: "contains",
value: "",
filterType: f.filterType,
width: f.width || 200,
width: f.width && f.width >= 10 && f.width <= 100 ? f.width : 25,
}));
onFiltersApplied?.(activeFilters);
@ -498,15 +498,15 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
</Select>
<Input
type="number"
min={100}
max={400}
value={filter.width || 200}
min={10}
max={100}
value={filter.width && filter.width >= 10 && filter.width <= 100 ? filter.width : 25}
onChange={(e) =>
handleFilterWidthChange(filter.columnName, parseInt(e.target.value) || 200)
handleFilterWidthChange(filter.columnName, Math.min(100, Math.max(10, parseInt(e.target.value) || 25)))
}
className="h-7 w-16 text-center text-xs"
/>
<span className="text-muted-foreground text-xs">px</span>
<span className="text-muted-foreground text-xs">%</span>
</div>
))}
</div>

44
frontend/components/screen/widgets/TabsWidget.tsx
View File

@ -430,28 +430,28 @@ export function TabsWidget({
return (
<ResponsiveGridRenderer
components={componentDataList}
canvasWidth={canvasWidth}
canvasHeight={canvasHeight}
renderComponent={(comp) => (
<DynamicComponentRenderer
{...restProps}
component={comp}
formData={formData}
onFormDataChange={onFormDataChange}
menuObjid={menuObjid}
isDesignMode={false}
isInteractive={true}
selectedRowsData={localSelectedRowsData}
onSelectedRowsChange={handleSelectedRowsChange}
parentTabId={tab.id}
parentTabsComponentId={component.id}
{...(screenInfoMap[tab.id]
? { tableName: screenInfoMap[tab.id].tableName, screenId: screenInfoMap[tab.id].id }
: {})}
/>
)}
/>
components={componentDataList}
canvasWidth={canvasWidth}
canvasHeight={canvasHeight}
renderComponent={(comp) => (
<DynamicComponentRenderer
{...restProps}
component={comp}
formData={formData}
onFormDataChange={onFormDataChange}
menuObjid={menuObjid}
isDesignMode={false}
isInteractive={true}
selectedRowsData={localSelectedRowsData}
onSelectedRowsChange={handleSelectedRowsChange}
parentTabId={tab.id}
parentTabsComponentId={component.id}
{...(screenInfoMap[tab.id]
? { tableName: screenInfoMap[tab.id].tableName, screenId: screenInfoMap[tab.id].id }
: {})}
/>
)}
/>
);
};

1199
frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

397
frontend/components/v2/config-panels/V2ApprovalStepConfigPanel.tsx Normal file
View File

@ -0,0 +1,397 @@
"use client";
/**
* V2 결재 단계 설정 패널
* 토스식 단계별 UX: 데이터 소스(Combobox) -> 표시 모드 -> 표시 옵션(Collapsible)
*/
import React, { useState, useEffect } from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Check, ChevronsUpDown, Database, ChevronDown, Settings } from "lucide-react";
import { cn } from "@/lib/utils";
import { tableTypeApi } from "@/lib/api/screen";
import { tableManagementApi } from "@/lib/api/tableManagement";
import type { ApprovalStepConfig } from "@/lib/registry/components/v2-approval-step/types";
interface V2ApprovalStepConfigPanelProps {
config: ApprovalStepConfig;
onChange: (config: Partial<ApprovalStepConfig>) => void;
screenTableName?: string;
}
export const V2ApprovalStepConfigPanel: React.FC<V2ApprovalStepConfigPanelProps> = ({
config,
onChange,
screenTableName,
}) => {
const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
const [loadingTables, setLoadingTables] = useState(false);
const [tableOpen, setTableOpen] = useState(false);
const [availableColumns, setAvailableColumns] = useState<Array<{ columnName: string; label: string }>>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
const [columnOpen, setColumnOpen] = useState(false);
const [displayOpen, setDisplayOpen] = useState(false);
const targetTableName = config.targetTable || screenTableName;
const handleChange = (key: keyof ApprovalStepConfig, value: any) => {
onChange({ [key]: value });
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: { ...config, [key]: value } },
})
);
}
};
useEffect(() => {
const fetchTables = async () => {
setLoadingTables(true);
try {
const response = await tableTypeApi.getTables();
setAvailableTables(
response.map((table: any) => ({
tableName: table.tableName,
displayName: table.displayName || table.tableName,
}))
);
} catch {
/* ignore */
} finally {
setLoadingTables(false);
}
};
fetchTables();
}, []);
useEffect(() => {
if (!targetTableName) {
setAvailableColumns([]);
return;
}
const fetchColumns = async () => {
setLoadingColumns(true);
try {
const result = await tableManagementApi.getColumnList(targetTableName);
if (result.success && result.data) {
const columns = Array.isArray(result.data) ? result.data : result.data.columns;
if (columns && Array.isArray(columns)) {
setAvailableColumns(
columns.map((col: any) => ({
columnName: col.columnName || col.column_name || col.name,
label:
col.displayName ||
col.columnLabel ||
col.column_label ||
col.columnName ||
col.column_name ||
col.name,
}))
);
}
}
} catch {
setAvailableColumns([]);
} finally {
setLoadingColumns(false);
}
};
fetchColumns();
}, [targetTableName]);
const handleTableChange = (newTableName: string) => {
if (newTableName === targetTableName) return;
const patch = { targetTable: newTableName, targetRecordIdField: "" };
onChange(patch);
setTableOpen(false);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: { ...config, ...patch } },
})
);
}
};
return (
<div className="space-y-4">
{/* ─── 1단계: 데이터 소스 ─── */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium">데이터 소스</p>
</div>
<p className="text-[11px] text-muted-foreground">
결재 상태를 조회할 대상 테이블을 설정해요
</p>
</div>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
{/* 대상 테이블 */}
<div className="space-y-1">
<span className="text-xs text-muted-foreground">대상 테이블</span>
<Popover open={tableOpen} onOpenChange={setTableOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={tableOpen}
className="h-7 w-full justify-between text-xs"
disabled={loadingTables}
>
{loadingTables
? "로딩 중..."
: targetTableName
? availableTables.find((t) => t.tableName === targetTableName)?.displayName ||
targetTableName
: "테이블 선택"}
<ChevronsUpDown className="ml-2 h-3 w-3 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" />
<CommandList>
<CommandEmpty className="py-4 text-center text-xs">
테이블을 찾을 수 없습니다.
</CommandEmpty>
<CommandGroup className="max-h-[200px] overflow-auto">
{availableTables.map((table) => (
<CommandItem
key={table.tableName}
value={`${table.tableName} ${table.displayName}`}
onSelect={() => handleTableChange(table.tableName)}
className="text-xs"
>
<Check
className={cn(
"mr-2 h-3 w-3",
targetTableName === table.tableName ? "opacity-100" : "opacity-0"
)}
/>
<div className="flex flex-col">
<span className="font-medium">{table.displayName}</span>
{table.displayName !== table.tableName && (
<span className="text-[10px] text-muted-foreground">
{table.tableName}
</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{screenTableName && targetTableName !== screenTableName && (
<div className="mt-1 flex items-center justify-between rounded-md bg-amber-50 px-2 py-1">
<span className="text-[10px] text-amber-700">
화면 기본 테이블({screenTableName})과 다른 테이블 사용 중
</span>
<Button
variant="ghost"
size="sm"
className="h-5 px-1.5 text-[10px] text-amber-700 hover:text-amber-900"
onClick={() => handleTableChange(screenTableName)}
>
기본으로
</Button>
</div>
)}
</div>
{/* 레코드 ID 필드 */}
<div className="space-y-1">
<span className="text-xs text-muted-foreground">레코드 ID 필드</span>
{targetTableName ? (
<Popover open={columnOpen} onOpenChange={setColumnOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={columnOpen}
className="h-7 w-full justify-between text-xs"
disabled={loadingColumns}
>
{loadingColumns
? "컬럼 로딩 중..."
: config.targetRecordIdField
? availableColumns.find((c) => c.columnName === config.targetRecordIdField)
?.label || config.targetRecordIdField
: "PK 컬럼 선택"}
<ChevronsUpDown className="ml-2 h-3 w-3 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" />
<CommandList>
<CommandEmpty className="py-4 text-center text-xs">
컬럼을 찾을 수 없습니다.
</CommandEmpty>
<CommandGroup className="max-h-[200px] overflow-auto">
{availableColumns.map((col) => (
<CommandItem
key={col.columnName}
value={`${col.columnName} ${col.label}`}
onSelect={() => {
handleChange("targetRecordIdField", col.columnName);
setColumnOpen(false);
}}
className="text-xs"
>
<Check
className={cn(
"mr-2 h-3 w-3",
config.targetRecordIdField === col.columnName
? "opacity-100"
: "opacity-0"
)}
/>
<div className="flex flex-col">
<span className="font-medium">{col.label}</span>
{col.label !== col.columnName && (
<span className="text-[10px] text-muted-foreground">
{col.columnName}
</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
) : (
<p className="text-[10px] text-muted-foreground">대상 테이블을 먼저 선택하세요</p>
)}
<p className="text-[10px] text-muted-foreground mt-0.5">
결재 대상 레코드를 식별할 PK 컬럼
</p>
</div>
</div>
{/* ─── 2단계: 표시 모드 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">표시 모드</p>
<p className="text-[11px] text-muted-foreground">결재 단계의 방향을 설정해요</p>
</div>
<div className="rounded-lg border bg-muted/30 p-4">
<Select
value={config.displayMode || "horizontal"}
onValueChange={(v) => handleChange("displayMode", v)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="horizontal">가로형 스테퍼</SelectItem>
<SelectItem value="vertical">세로형 타임라인</SelectItem>
</SelectContent>
</Select>
</div>
{/* ─── 3단계: 표시 옵션 (Collapsible) ─── */}
<Collapsible open={displayOpen} onOpenChange={setDisplayOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">표시 옵션</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
displayOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">부서/직급 표시</p>
<p className="text-[11px] text-muted-foreground">
결재자의 부서와 직급을 보여줘요
</p>
</div>
<Switch
checked={config.showDept !== false}
onCheckedChange={(checked) => handleChange("showDept", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">결재 코멘트</p>
<p className="text-[11px] text-muted-foreground">
결재자가 남긴 의견을 표시해요
</p>
</div>
<Switch
checked={config.showComment !== false}
onCheckedChange={(checked) => handleChange("showComment", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">처리 시각</p>
<p className="text-[11px] text-muted-foreground">
각 단계의 처리 일시를 보여줘요
</p>
</div>
<Switch
checked={config.showTimestamp !== false}
onCheckedChange={(checked) => handleChange("showTimestamp", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">콤팩트 모드</p>
<p className="text-[11px] text-muted-foreground">
좁은 공간에 맞게 작게 표시해요
</p>
</div>
<Switch
checked={config.compact || false}
onCheckedChange={(checked) => handleChange("compact", checked)}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2ApprovalStepConfigPanel.displayName = "V2ApprovalStepConfigPanel";
export default V2ApprovalStepConfigPanel;

486
frontend/components/v2/config-panels/V2BizConfigPanel.tsx
View File

@ -2,15 +2,25 @@
/**
* V2Biz 설정 패널
* 통합 비즈니스 컴포넌트의 세부 설정을 관리합니다.
* 토스식 단계별 UX: 비즈니스 타입 카드 선택 -> 타입별 설정 -> 고급 설정(접힘)
*/
import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";
import {
GitBranch,
LayoutGrid,
MapPin,
Hash,
FolderTree,
ArrowRightLeft,
Link2,
Loader2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { tableTypeApi } from "@/lib/api/screen";
interface V2BizConfigPanelProps {
@ -28,27 +38,32 @@ interface ColumnOption {
displayName: string;
}
const BIZ_TYPE_CARDS = [
{ value: "flow", icon: GitBranch, title: "플로우", description: "워크플로우를 구성해요" },
{ value: "rack", icon: LayoutGrid, title: "랙 구조", description: "창고 렉 위치를 관리해요" },
{ value: "map", icon: MapPin, title: "지도", description: "위치 정보를 표시해요" },
{ value: "numbering", icon: Hash, title: "채번 규칙", description: "자동 번호를 생성해요" },
{ value: "category", icon: FolderTree, title: "카테고리", description: "분류 체계를 관리해요" },
{ value: "data-mapping", icon: ArrowRightLeft, title: "데이터 매핑", description: "테이블 간 매핑해요" },
{ value: "related-data", icon: Link2, title: "관련 데이터", description: "연결된 데이터를 조회해요" },
] as const;
export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
config,
onChange,
}) => {
// 테이블 목록
const [tables, setTables] = useState<TableOption[]>([]);
const [loadingTables, setLoadingTables] = useState(false);
// 컬럼 목록 (소스/대상/관련 테이블용)
const [sourceColumns, setSourceColumns] = useState<ColumnOption[]>([]);
const [targetColumns, setTargetColumns] = useState<ColumnOption[]>([]);
const [relatedColumns, setRelatedColumns] = useState<ColumnOption[]>([]);
const [categoryColumns, setCategoryColumns] = useState<ColumnOption[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
// 설정 업데이트 핸들러
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
// 테이블 목록 로드
useEffect(() => {
const loadTables = async () => {
setLoadingTables(true);
@ -67,13 +82,9 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
loadTables();
}, []);
// 소스 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.sourceTable) {
setSourceColumns([]);
return;
}
if (!config.sourceTable) { setSourceColumns([]); return; }
try {
const data = await tableTypeApi.getColumns(config.sourceTable);
setSourceColumns(data.map((c: any) => ({
@ -87,13 +98,9 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
loadColumns();
}, [config.sourceTable]);
// 대상 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.targetTable) {
setTargetColumns([]);
return;
}
if (!config.targetTable) { setTargetColumns([]); return; }
try {
const data = await tableTypeApi.getColumns(config.targetTable);
setTargetColumns(data.map((c: any) => ({
@ -107,13 +114,9 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
loadColumns();
}, [config.targetTable]);
// 관련 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.relatedTable) {
setRelatedColumns([]);
return;
}
if (!config.relatedTable) { setRelatedColumns([]); return; }
try {
const data = await tableTypeApi.getColumns(config.relatedTable);
setRelatedColumns(data.map((c: any) => ({
@ -127,13 +130,9 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
loadColumns();
}, [config.relatedTable]);
// 카테고리 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.tableName) {
setCategoryColumns([]);
return;
}
if (!config.tableName) { setCategoryColumns([]); return; }
setLoadingColumns(true);
try {
const data = await tableTypeApi.getColumns(config.tableName);
@ -150,281 +149,348 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
loadColumns();
}, [config.tableName]);
const bizType = config.bizType || config.type || "flow";
return (
<div className="space-y-4">
{/* 비즈니스 타입 */}
{/* ─── 1단계: 비즈니스 타입 선택 (카드) ─── */}
<div className="space-y-2">
<Label className="text-xs font-medium">비즈니스 타입</Label>
<Select
value={config.bizType || config.type || "flow"}
onValueChange={(value) => updateConfig("bizType", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="타입 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="flow">플로우</SelectItem>
<SelectItem value="rack">랙 구조</SelectItem>
<SelectItem value="map">지도</SelectItem>
<SelectItem value="numbering">채번 규칙</SelectItem>
<SelectItem value="category">카테고리</SelectItem>
<SelectItem value="data-mapping">데이터 매핑</SelectItem>
<SelectItem value="related-data">관련 데이터</SelectItem>
</SelectContent>
</Select>
<p className="text-sm font-medium">어떤 비즈니스 기능을 사용하나요?</p>
<div className="grid grid-cols-2 gap-2">
{BIZ_TYPE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = bizType === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("bizType", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">{card.title}</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
</button>
);
})}
</div>
</div>
<Separator />
{/* ─── 2단계: 타입별 설정 ─── */}
{/* 플로우 설정 */}
{config.bizType === "flow" && (
<div className="space-y-3">
<Label className="text-xs font-medium">플로우 설정</Label>
{bizType === "flow" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<GitBranch className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">플로우 설정</span>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">플로우 ID</Label>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">플로우 ID</span>
<Input
type="number"
value={config.flowId || ""}
onChange={(e) => updateConfig("flowId", e.target.value ? Number(e.target.value) : undefined)}
placeholder="플로우 ID"
className="h-8 text-xs"
className="h-7 w-[160px] text-xs"
/>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="editable"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">편집 가능</p>
<p className="text-[11px] text-muted-foreground">플로우를 직접 수정할 수 있어요</p>
</div>
<Switch
checked={config.editable || false}
onCheckedChange={(checked) => updateConfig("editable", checked)}
/>
<label htmlFor="editable" className="text-xs">편집 가능</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="showMinimap"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">미니맵 표시</p>
<p className="text-[11px] text-muted-foreground">전체 구조를 한눈에 볼 수 있어요</p>
</div>
<Switch
checked={config.showMinimap || false}
onCheckedChange={(checked) => updateConfig("showMinimap", checked)}
/>
<label htmlFor="showMinimap" className="text-xs">미니맵 표시</label>
</div>
</div>
)}
{/* 랙 구조 설정 */}
{config.bizType === "rack" && (
<div className="space-y-3">
<Label className="text-xs font-medium">랙 설정</Label>
{bizType === "rack" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<LayoutGrid className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">랙 구조 설정</span>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">행 수</Label>
<Input
type="number"
value={config.rows || ""}
onChange={(e) => updateConfig("rows", e.target.value ? Number(e.target.value) : undefined)}
placeholder="5"
min="1"
className="h-8 text-xs"
/>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">열 수</Label>
<Input
type="number"
value={config.columns || ""}
onChange={(e) => updateConfig("columns", e.target.value ? Number(e.target.value) : undefined)}
placeholder="10"
min="1"
className="h-8 text-xs"
/>
<div className="space-y-2">
<p className="text-xs text-muted-foreground">렉 크기</p>
<div className="flex gap-2">
<div className="flex-1">
<Label className="text-[10px] text-muted-foreground">행 수</Label>
<Input
type="number"
value={config.rows || ""}
onChange={(e) => updateConfig("rows", e.target.value ? Number(e.target.value) : undefined)}
placeholder="5"
min="1"
className="h-7 text-xs"
/>
</div>
<div className="flex-1">
<Label className="text-[10px] text-muted-foreground">열 수</Label>
<Input
type="number"
value={config.columns || ""}
onChange={(e) => updateConfig("columns", e.target.value ? Number(e.target.value) : undefined)}
placeholder="10"
min="1"
className="h-7 text-xs"
/>
</div>
</div>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="showLabels"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">라벨 표시</p>
<p className="text-[11px] text-muted-foreground">각 셀에 위치 라벨이 표시돼요</p>
</div>
<Switch
checked={config.showLabels !== false}
onCheckedChange={(checked) => updateConfig("showLabels", checked)}
/>
<label htmlFor="showLabels" className="text-xs">라벨 표시</label>
</div>
</div>
)}
{/* 채번 규칙 설정 */}
{config.bizType === "numbering" && (
<div className="space-y-3">
<Label className="text-xs font-medium">채번 설정</Label>
{bizType === "numbering" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Hash className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">채번 규칙 설정</span>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">채번 규칙 ID</Label>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">채번 규칙 ID</span>
<Input
type="number"
value={config.ruleId || ""}
onChange={(e) => updateConfig("ruleId", e.target.value ? Number(e.target.value) : undefined)}
placeholder="규칙 ID"
className="h-8 text-xs"
className="h-7 w-[160px] text-xs"
/>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">접두사</Label>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">접두사</span>
<Input
value={config.prefix || ""}
onChange={(e) => updateConfig("prefix", e.target.value)}
placeholder="예: INV-"
className="h-8 text-xs"
className="h-7 w-[160px] text-xs"
/>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="autoGenerate"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">자동 생성</p>
<p className="text-[11px] text-muted-foreground">저장할 때 번호가 자동으로 생성돼요</p>
</div>
<Switch
checked={config.autoGenerate !== false}
onCheckedChange={(checked) => updateConfig("autoGenerate", checked)}
/>
<label htmlFor="autoGenerate" className="text-xs">자동 생성</label>
</div>
</div>
)}
{/* 카테고리 설정 */}
{config.bizType === "category" && (
<div className="space-y-3">
<Label className="text-xs font-medium">카테고리 설정</Label>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">카테고리 테이블</Label>
<Select
value={config.tableName || ""}
onValueChange={(value) => {
updateConfig("tableName", value);
updateConfig("columnName", "");
}}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
{bizType === "category" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<FolderTree className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">카테고리 설정</span>
</div>
{config.tableName && (
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">컬럼</Label>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">카테고리 테이블</p>
{loadingTables ? (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" />
테이블 로딩 중...
</div>
) : (
<Select
value={config.columnName || ""}
onValueChange={(value) => updateConfig("columnName", value)}
disabled={loadingColumns}
value={config.tableName || ""}
onValueChange={(value) => {
updateConfig("tableName", value);
updateConfig("columnName", "");
}}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "컬럼 선택"} />
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="테이블 선택" />
</SelectTrigger>
<SelectContent>
{categoryColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
{config.tableName && (
<div>
<p className="mb-1.5 text-xs text-muted-foreground">컬럼</p>
{loadingColumns ? (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" />
컬럼 로딩 중...
</div>
) : (
<Select
value={config.columnName || ""}
onValueChange={(value) => updateConfig("columnName", value)}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="컬럼 선택" />
</SelectTrigger>
<SelectContent>
{categoryColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
)}
</div>
)}
{/* 데이터 매핑 설정 */}
{config.bizType === "data-mapping" && (
<div className="space-y-3">
<Label className="text-xs font-medium">매핑 설정</Label>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">소스 테이블</Label>
<Select
value={config.sourceTable || ""}
onValueChange={(value) => updateConfig("sourceTable", value)}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
{bizType === "data-mapping" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<ArrowRightLeft className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">데이터 매핑 설정</span>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">대상 테이블</Label>
<Select
value={config.targetTable || ""}
onValueChange={(value) => updateConfig("targetTable", value)}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">소스 테이블</p>
{loadingTables ? (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" />
테이블 로딩 중...
</div>
) : (
<Select
value={config.sourceTable || ""}
onValueChange={(value) => updateConfig("sourceTable", value)}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="소스 테이블 선택" />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">대상 테이블</p>
{loadingTables ? (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" />
테이블 로딩 중...
</div>
) : (
<Select
value={config.targetTable || ""}
onValueChange={(value) => updateConfig("targetTable", value)}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="대상 테이블 선택" />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
</div>
)}
{/* 관련 데이터 설정 */}
{config.bizType === "related-data" && (
<div className="space-y-3">
<Label className="text-xs font-medium">관련 데이터 설정</Label>
{bizType === "related-data" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Link2 className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">관련 데이터 설정</span>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">관련 테이블</Label>
<Select
value={config.relatedTable || ""}
onValueChange={(value) => {
updateConfig("relatedTable", value);
updateConfig("linkColumn", "");
}}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">관련 테이블</p>
{loadingTables ? (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" />
테이블 로딩 중...
</div>
) : (
<Select
value={config.relatedTable || ""}
onValueChange={(value) => {
updateConfig("relatedTable", value);
updateConfig("linkColumn", "");
}}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="관련 테이블 선택" />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
{config.relatedTable && (
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">연결 컬럼</Label>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">연결 컬럼</p>
<Select
value={config.linkColumn || ""}
onValueChange={(value) => updateConfig("linkColumn", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="컬럼 선택" />
</SelectTrigger>
<SelectContent>
@ -438,13 +504,13 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
</div>
)}
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">버튼 텍스트</Label>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">버튼 텍스트</span>
<Input
value={config.buttonText || ""}
onChange={(e) => updateConfig("buttonText", e.target.value)}
placeholder="관련 데이터 보기"
className="h-8 text-xs"
className="h-7 w-[160px] text-xs"
/>
</div>
</div>

759
frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
View File

@ -3,13 +3,12 @@
/**
* BOM 하위품목 편집기 설정 패널
*
* V2RepeaterConfigPanel 구조를 기반으로 구현:
* - 기본 탭: 저장 테이블 + 엔티티 선택 + 트리 설정 + 기능 옵션
* 토스식 단계별 UX:
* - 기본 탭: 저장 테이블 → 트리 구조 → 엔티티 선택 → 기능 옵션(고급)
* - 컬럼 탭: 소스 표시 컬럼 + 저장 입력 컬럼 + 선택된 컬럼 상세
*/
import React, { useState, useEffect, useMemo, useCallback } from "react";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
@ -17,7 +16,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
@ -35,6 +34,7 @@ import {
Check,
ChevronsUpDown,
GitBranch,
Settings,
} from "lucide-react";
import {
Command,
@ -49,6 +49,12 @@ import {
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Badge } from "@/components/ui/badge";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { tableTypeApi } from "@/lib/api/screen";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { cn } from "@/lib/utils";
@ -102,27 +108,18 @@ interface BomColumnConfig {
}
interface BomItemEditorConfig {
// 저장 테이블 설정 (리피터 패턴)
useCustomTable?: boolean;
mainTableName?: string;
foreignKeyColumn?: string;
foreignKeySourceColumn?: string;
// 트리 구조 설정
parentKeyColumn?: string;
// 엔티티 (품목 참조) 설정
dataSource?: {
sourceTable?: string;
foreignKey?: string;
referenceKey?: string;
displayColumn?: string;
};
// 컬럼 설정
columns: BomColumnConfig[];
// 기능 옵션
features?: {
showAddButton?: boolean;
showDeleteButton?: boolean;
@ -150,19 +147,22 @@ export function V2BomItemEditorConfigPanel({
const currentTableName = screenTableName || propCurrentTableName;
const config: BomItemEditorConfig = useMemo(
() => ({
columns: [],
...propConfig,
dataSource: { ...propConfig?.dataSource },
features: {
showAddButton: true,
showDeleteButton: true,
inlineEdit: false,
showRowNumber: false,
maxDepth: 3,
...propConfig?.features,
},
}),
() => {
const { columns: propColumns, ...rest } = propConfig || {} as BomItemEditorConfig;
return {
...rest,
columns: propColumns || [],
dataSource: { ...propConfig?.dataSource },
features: {
showAddButton: true,
showDeleteButton: true,
inlineEdit: false,
showRowNumber: false,
maxDepth: 3,
...propConfig?.features,
},
};
},
[propConfig],
);
@ -178,6 +178,9 @@ export function V2BomItemEditorConfigPanel({
const [loadingRelations, setLoadingRelations] = useState(false);
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
const [expandedColumn, setExpandedColumn] = useState<string | null>(null);
const [featureOptionsOpen, setFeatureOptionsOpen] = useState(false);
const [columnSelectOpen, setColumnSelectOpen] = useState(false);
const [selectedColumnsOpen, setSelectedColumnsOpen] = useState(false);
// ─── 업데이트 헬퍼 (리피터 패턴) ───
const updateConfig = useCallback(
@ -472,7 +475,6 @@ export function V2BomItemEditorConfigPanel({
});
};
// FK 컬럼 제외한 입력 가능 컬럼
const inputableColumns = useMemo(() => {
const fkColumn = config.dataSource?.foreignKey;
return currentTableColumns.filter(
@ -495,9 +497,12 @@ export function V2BomItemEditorConfigPanel({
{/* ─── 기본 설정 탭 ─── */}
<TabsContent value="basic" className="mt-4 space-y-4">
{/* 저장 대상 테이블 (리피터 동일) */}
<div className="space-y-2">
<Label className="text-xs font-medium">저장 테이블</Label>
{/* 저장 대상 테이블 */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">BOM 데이터를 어디에 저장하나요?</span>
</div>
<div
className={cn(
@ -539,7 +544,7 @@ export function V2BomItemEditorConfigPanel({
</div>
</div>
{/* 테이블 Combobox (리피터 동일) */}
{/* 테이블 Combobox */}
<Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
<PopoverTrigger asChild>
<Button
@ -651,19 +656,18 @@ export function V2BomItemEditorConfigPanel({
</PopoverContent>
</Popover>
{/* FK 직접 입력 (연관 없는 테이블 선택 시) */}
{/* FK 직접 입력 */}
{config.useCustomTable &&
config.mainTableName &&
currentTableName &&
!relatedTables.some((r) => r.tableName === config.mainTableName) && (
<div className="space-y-2 rounded border border-amber-200 bg-amber-50 p-2">
<p className="text-[10px] text-amber-700">
화면 테이블({currentTableName})과의 엔티티 관계가 없습니다. FK 컬럼을 직접
입력하세요.
화면 테이블({currentTableName})과의 엔티티 관계가 없어요. FK 컬럼을 직접 입력해주세요.
</p>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-[10px]">FK 컬럼 (저장 테이블)</Label>
<p className="text-xs text-muted-foreground">FK 컬럼 (저장 테이블)</p>
<Input
value={config.foreignKeyColumn || ""}
onChange={(e) => updateConfig({ foreignKeyColumn: e.target.value })}
@ -672,7 +676,7 @@ export function V2BomItemEditorConfigPanel({
/>
</div>
<div className="space-y-1">
<Label className="text-[10px]">PK 컬럼 (화면 테이블)</Label>
<p className="text-xs text-muted-foreground">PK 컬럼 (화면 테이블)</p>
<Input
value={config.foreignKeySourceColumn || "id"}
onChange={(e) => updateConfig({ foreignKeySourceColumn: e.target.value })}
@ -683,72 +687,85 @@ export function V2BomItemEditorConfigPanel({
</div>
</div>
)}
{/* 화면 메인 테이블 참고 정보 */}
{currentTableName && (
<div className="rounded-md border bg-background p-3">
<p className="text-xs text-muted-foreground">화면 메인 테이블</p>
<p className="mt-0.5 text-sm font-medium">{currentTableName}</p>
<p className="text-[10px] text-muted-foreground mt-0.5">
컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
</p>
</div>
)}
</div>
<Separator />
{/* 트리 구조 설정 (BOM 전용) */}
<div className="space-y-2">
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<GitBranch className="h-4 w-4" />
<Label className="text-xs font-medium">트리 구조 설정</Label>
<GitBranch className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">트리 구조는 어떻게 만드나요?</span>
</div>
<p className="text-muted-foreground text-[10px]">
계층 구조를 위한 자기 참조 FK 컬럼을 선택하세요
<p className="text-[11px] text-muted-foreground">
계층 구조를 위한 자기 참조 FK 컬럼을 선택하면 부모-자식 관계가 만들어져요
</p>
{currentTableColumns.length > 0 ? (
<Select
value={config.parentKeyColumn || ""}
onValueChange={(value) => updateConfig({ parentKeyColumn: value })}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="부모 키 컬럼 선택" />
</SelectTrigger>
<SelectContent>
{currentTableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
<div className="flex items-center gap-2">
<span>{col.displayName}</span>
{col.displayName !== col.columnName && (
<span className="text-muted-foreground text-[10px]">
({col.columnName})
</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
</Select>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">부모 키 컬럼</p>
<Select
value={config.parentKeyColumn || ""}
onValueChange={(value) => updateConfig({ parentKeyColumn: value })}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="컬럼 선택" />
</SelectTrigger>
<SelectContent>
{currentTableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
<div className="flex items-center gap-2">
<span>{col.displayName}</span>
{col.displayName !== col.columnName && (
<span className="text-muted-foreground text-[10px]">
({col.columnName})
</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
) : (
<div className="rounded border border-border bg-muted p-2">
<p className="text-[10px] text-muted-foreground">
{loadingColumns ? "로딩 중..." : "저장 테이블을 먼저 선택하세요"}
<div className="rounded-md border-2 border-dashed p-4 text-center">
<GitBranch className="mx-auto mb-2 h-8 w-8 opacity-30 text-muted-foreground" />
<p className="text-sm text-muted-foreground">
{loadingColumns ? "컬럼 정보를 불러오고 있어요..." : "저장 테이블을 먼저 선택해주세요"}
</p>
</div>
)}
{/* 최대 깊이 */}
<div className="space-y-1">
<Label className="text-[10px]">최대 트리 깊이</Label>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">최대 트리 깊이</span>
<Input
type="number"
min={1}
max={10}
value={config.features?.maxDepth ?? 3}
onChange={(e) => updateFeatures("maxDepth", parseInt(e.target.value) || 3)}
className="h-7 w-20 text-xs"
className="h-7 w-[80px] text-xs"
/>
</div>
</div>
<Separator />
{/* 엔티티 선택 (리피터 모달 모드와 동일) */}
<div className="space-y-2">
<Label className="text-xs font-medium">엔티티 선택 (품목 참조)</Label>
<p className="text-muted-foreground text-[10px]">
품목 검색 시 참조할 엔티티를 선택하세요 (FK만 저장됨)
{/* 엔티티 선택 (품목 참조) */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Link2 className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">어떤 품목을 참조하나요?</span>
</div>
<p className="text-[11px] text-muted-foreground">
품목 검색 시 참조할 엔티티를 선택하면 FK만 저장돼요
</p>
{entityColumns.length > 0 ? (
@ -757,7 +774,7 @@ export function V2BomItemEditorConfigPanel({
onValueChange={handleEntityColumnSelect}
disabled={!targetTableForColumns}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="엔티티 컬럼 선택" />
</SelectTrigger>
<SelectContent>
@ -774,308 +791,366 @@ export function V2BomItemEditorConfigPanel({
</SelectContent>
</Select>
) : (
<div className="rounded border border-border bg-muted p-2">
<p className="text-[10px] text-muted-foreground">
<div className="rounded-md border-2 border-dashed p-4 text-center">
<p className="text-sm text-muted-foreground">
{loadingColumns
? "로딩 중..."
? "컬럼 정보를 불러오고 있어요..."
: !targetTableForColumns
? "저장 테이블을 먼저 선택하세요"
: "엔티티 타입 컬럼이 없습니다"}
? "저장 테이블을 먼저 선택해주세요"
: "엔티티 타입 컬럼이 없어요"}
</p>
</div>
)}
{config.dataSource?.sourceTable && (
<div className="space-y-1 rounded border border-emerald-200 bg-emerald-50 p-2">
<p className="text-xs font-medium text-emerald-700">선택된 엔티티</p>
<div className="text-[10px] text-emerald-600">
<p>검색 테이블: {config.dataSource.sourceTable}</p>
<p>저장 컬럼: {config.dataSource.foreignKey} (FK)</p>
</div>
<div className="rounded-md border bg-background p-3 space-y-1">
<p className="text-xs text-muted-foreground">선택된 엔티티</p>
<p className="text-sm font-medium">{config.dataSource.sourceTable}</p>
<p className="text-[11px] text-muted-foreground">
{config.dataSource.foreignKey} 컬럼에 FK로 저장돼요
</p>
</div>
)}
</div>
<Separator />
{/* 기능 옵션 */}
<div className="space-y-3">
<Label className="text-xs font-medium">기능 옵션</Label>
<div className="grid grid-cols-2 gap-2">
<div className="flex items-center space-x-2">
<Checkbox
id="bom-showAddButton"
checked={config.features?.showAddButton ?? true}
onCheckedChange={(checked) => updateFeatures("showAddButton", !!checked)}
{/* 기능 옵션 - Collapsible + Badge */}
<Collapsible open={featureOptionsOpen} onOpenChange={setFeatureOptionsOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">기능 옵션</span>
<Badge
variant="secondary"
className="text-[10px] h-5"
>
{[
config.features?.showAddButton ?? true,
config.features?.showDeleteButton ?? true,
config.features?.inlineEdit ?? false,
config.features?.showRowNumber ?? false,
].filter(Boolean).length}
개
</Badge>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
featureOptionsOpen && "rotate-180",
)}
/>
<label htmlFor="bom-showAddButton" className="text-xs">
추가 버튼
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="bom-showDeleteButton"
checked={config.features?.showDeleteButton ?? true}
onCheckedChange={(checked) => updateFeatures("showDeleteButton", !!checked)}
/>
<label htmlFor="bom-showDeleteButton" className="text-xs">
삭제 버튼
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="bom-inlineEdit"
checked={config.features?.inlineEdit ?? false}
onCheckedChange={(checked) => updateFeatures("inlineEdit", !!checked)}
/>
<label htmlFor="bom-inlineEdit" className="text-xs">
인라인 편집
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="bom-showRowNumber"
checked={config.features?.showRowNumber ?? false}
onCheckedChange={(checked) => updateFeatures("showRowNumber", !!checked)}
/>
<label htmlFor="bom-showRowNumber" className="text-xs">
행 번호
</label>
</div>
</div>
</div>
{/* 메인 화면 테이블 참고 */}
{currentTableName && (
<>
<Separator />
<div className="space-y-2">
<Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
<div className="rounded border border-border bg-muted p-2">
<p className="text-xs font-medium text-foreground">{currentTableName}</p>
<p className="text-[10px] text-muted-foreground">
컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
</p>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-2">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">추가 버튼</p>
<p className="text-[11px] text-muted-foreground">하위 품목을 추가할 수 있어요</p>
</div>
<Switch
checked={config.features?.showAddButton ?? true}
onCheckedChange={(checked) => updateFeatures("showAddButton", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">삭제 버튼</p>
<p className="text-[11px] text-muted-foreground">선택한 품목을 삭제할 수 있어요</p>
</div>
<Switch
checked={config.features?.showDeleteButton ?? true}
onCheckedChange={(checked) => updateFeatures("showDeleteButton", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">인라인 편집</p>
<p className="text-[11px] text-muted-foreground">셀을 클릭하면 바로 수정할 수 있어요</p>
</div>
<Switch
checked={config.features?.inlineEdit ?? false}
onCheckedChange={(checked) => updateFeatures("inlineEdit", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">행 번호</p>
<p className="text-[11px] text-muted-foreground">각 행에 순번을 표시해요</p>
</div>
<Switch
checked={config.features?.showRowNumber ?? false}
onCheckedChange={(checked) => updateFeatures("showRowNumber", checked)}
/>
</div>
</div>
</>
)}
</CollapsibleContent>
</Collapsible>
</TabsContent>
{/* ─── 컬럼 설정 탭 (리피터 동일 패턴) ─── */}
{/* ─── 컬럼 설정 탭 ─── */}
<TabsContent value="columns" className="mt-4 space-y-4">
<div className="space-y-2">
<Label className="text-xs font-medium">컬럼 선택</Label>
<p className="text-muted-foreground text-[10px]">
표시할 소스 컬럼과 입력 컬럼을 선택하세요
</p>
{/* 소스 테이블 컬럼 (표시용) */}
{config.dataSource?.sourceTable && (
<>
<div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
<Link2 className="h-3 w-3" />
소스 테이블 ({config.dataSource.sourceTable}) - 표시용
{/* 컬럼 선택 - Collapsible + Badge */}
<Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">컬럼 선택</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.columns.length}개 선택됨
</Badge>
</div>
{loadingSourceColumns ? (
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
columnSelectOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
<p className="text-[11px] text-muted-foreground">
소스 테이블 컬럼은 표시용, 저장 테이블 컬럼은 입력용이에요
</p>
{/* 소스 테이블 컬럼 (표시용) */}
{config.dataSource?.sourceTable && (
<>
<div className="mb-1 flex items-center gap-1 text-[10px] font-medium text-primary">
<Link2 className="h-3 w-3" />
소스 테이블 ({config.dataSource.sourceTable}) - 표시용
</div>
{loadingSourceColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : sourceTableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
) : (
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
{sourceTableColumns.map((column) => (
<div
key={`source-${column.columnName}`}
className={cn(
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
isSourceColumnSelected(column.columnName) && "bg-primary/10",
)}
onClick={() => toggleSourceDisplayColumn(column)}
>
<Checkbox
checked={isSourceColumnSelected(column.columnName)}
onCheckedChange={() => toggleSourceDisplayColumn(column)}
className="pointer-events-none h-3.5 w-3.5"
/>
<Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
<span className="truncate text-xs">{column.displayName}</span>
<span className="ml-auto text-[10px] text-primary/80">표시</span>
</div>
))}
</div>
)}
</>
)}
{/* 저장 테이블 컬럼 (입력용) */}
<div className="mb-1 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
<Database className="h-3 w-3" />
저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
</div>
{loadingColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : sourceTableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
) : inputableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
) : (
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
{sourceTableColumns.map((column) => (
<div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
{inputableColumns.map((column) => (
<div
key={`source-${column.columnName}`}
key={`input-${column.columnName}`}
className={cn(
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
isSourceColumnSelected(column.columnName) && "bg-primary/10",
"hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
isColumnAdded(column.columnName) && "bg-primary/10",
)}
onClick={() => toggleSourceDisplayColumn(column)}
onClick={() => toggleInputColumn(column)}
>
<Checkbox
checked={isSourceColumnSelected(column.columnName)}
onCheckedChange={() => toggleSourceDisplayColumn(column)}
checked={isColumnAdded(column.columnName)}
onCheckedChange={() => toggleInputColumn(column)}
className="pointer-events-none h-3.5 w-3.5"
/>
<Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
<span className="truncate text-xs">{column.displayName}</span>
<span className="ml-auto text-[10px] text-primary/80">표시</span>
<span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
</div>
))}
</div>
)}
</>
)}
{/* 저장 테이블 컬럼 (입력용) */}
<div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
<Database className="h-3 w-3" />
저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
</div>
{loadingColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : inputableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
) : (
<div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
{inputableColumns.map((column) => (
<div
key={`input-${column.columnName}`}
className={cn(
"hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
isColumnAdded(column.columnName) && "bg-primary/10",
)}
onClick={() => toggleInputColumn(column)}
>
<Checkbox
checked={isColumnAdded(column.columnName)}
onCheckedChange={() => toggleInputColumn(column)}
className="pointer-events-none h-3.5 w-3.5"
/>
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
<span className="truncate text-xs">{column.displayName}</span>
<span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
</div>
))}
</div>
)}
</div>
</CollapsibleContent>
</Collapsible>
{/* 선택된 컬럼 상세 (리피터 동일 패턴) */}
{/* 선택된 컬럼 상세 - Collapsible + Badge */}
{config.columns.length > 0 && (
<>
<Separator />
<div className="space-y-2">
<Label className="text-xs font-medium">
선택된 컬럼 ({config.columns.length}개)
<span className="text-muted-foreground ml-2 font-normal">드래그로 순서 변경</span>
</Label>
<div className="max-h-48 space-y-1 overflow-y-auto">
{config.columns.map((col, index) => (
<div key={col.key} className="space-y-1">
<div
className={cn(
"flex items-center gap-2 rounded-md border p-2",
col.isSourceDisplay
? "border-primary/20 bg-primary/10/50"
: "border-border bg-muted/30",
col.hidden && "opacity-50",
)}
draggable
onDragStart={(e) => e.dataTransfer.setData("columnIndex", String(index))}
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => {
e.preventDefault();
const fromIndex = parseInt(e.dataTransfer.getData("columnIndex"), 10);
if (fromIndex !== index) {
const newColumns = [...config.columns];
const [movedCol] = newColumns.splice(fromIndex, 1);
newColumns.splice(index, 0, movedCol);
updateConfig({ columns: newColumns });
<Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<span className="text-sm font-medium">선택된 컬럼</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.columns.length}개
</Badge>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
selectedColumnsOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
<div className="flex items-center justify-between">
<span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span>
</div>
<div className="max-h-48 space-y-1 overflow-y-auto">
{config.columns.map((col, index) => (
<div key={col.key} className="space-y-1">
<div
className={cn(
"flex items-center gap-2 rounded-md border p-2",
col.isSourceDisplay
? "border-primary/20 bg-primary/10/50"
: "border-border bg-muted/30",
col.hidden && "opacity-50",
)}
draggable
onDragStart={(e) => e.dataTransfer.setData("columnIndex", String(index))}
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => {
e.preventDefault();
const fromIndex = parseInt(e.dataTransfer.getData("columnIndex"), 10);
if (fromIndex !== index) {
const newColumns = [...config.columns];
const [movedCol] = newColumns.splice(fromIndex, 1);
newColumns.splice(index, 0, movedCol);
updateConfig({ columns: newColumns });
}
}}
>
<GripVertical className="text-muted-foreground h-3 w-3 cursor-grab flex-shrink-0" />
{!col.isSourceDisplay && (
<button
type="button"
onClick={() =>
setExpandedColumn(expandedColumn === col.key ? null : col.key)
}
className="rounded p-0.5 hover:bg-muted/80"
>
{expandedColumn === col.key ? (
<ChevronDown className="h-3 w-3 text-muted-foreground" />
) : (
<ChevronRight className="h-3 w-3 text-muted-foreground" />
)}
</button>
)}
{col.isSourceDisplay ? (
<Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
) : (
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
)}
<Input
value={col.title}
onChange={(e) => updateColumnProp(col.key, "title", e.target.value)}
placeholder="제목"
className="h-6 flex-1 text-xs"
/>
{!col.isSourceDisplay && (
<button
type="button"
onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
className={cn(
"rounded p-1 hover:bg-muted/80",
col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
)}
title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
>
{col.hidden ? (
<EyeOff className="h-3 w-3" />
) : (
<Eye className="h-3 w-3" />
)}
</button>
)}
{!col.isSourceDisplay && (
<button
type="button"
onClick={() => updateColumnProp(col.key, "editable", !(col.editable ?? true))}
className={cn(
"shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium transition-colors",
(col.editable ?? true)
? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
: "bg-muted text-muted-foreground dark:bg-foreground/90 dark:text-muted-foreground/70"
)}
title={(col.editable ?? true) ? "편집 가능" : "읽기 전용"}
>
{(col.editable ?? true) ? "편집" : "읽기"}
</button>
)}
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => {
if (col.isSourceDisplay) {
toggleSourceDisplayColumn({
columnName: col.key,
displayName: col.title,
});
} else {
toggleInputColumn({ columnName: col.key, displayName: col.title });
}
}}
className="text-destructive h-6 w-6 p-0"
>
<GripVertical className="text-muted-foreground h-3 w-3 cursor-grab flex-shrink-0" />
{!col.isSourceDisplay && (
<button
type="button"
onClick={() =>
setExpandedColumn(expandedColumn === col.key ? null : col.key)
}
className="rounded p-0.5 hover:bg-muted/80"
>
{expandedColumn === col.key ? (
<ChevronDown className="h-3 w-3 text-muted-foreground" />
) : (
<ChevronRight className="h-3 w-3 text-muted-foreground" />
)}
</button>
)}
{col.isSourceDisplay ? (
<Link2
className="h-3 w-3 flex-shrink-0 text-primary"
title="소스 표시 (읽기 전용)"
/>
) : (
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
)}
<Input
value={col.title}
onChange={(e) => updateColumnProp(col.key, "title", e.target.value)}
placeholder="제목"
className="h-6 flex-1 text-xs"
/>
{!col.isSourceDisplay && (
<button
type="button"
onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
className={cn(
"rounded p-1 hover:bg-muted/80",
col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
)}
title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
>
{col.hidden ? (
<EyeOff className="h-3 w-3" />
) : (
<Eye className="h-3 w-3" />
)}
</button>
)}
{!col.isSourceDisplay && (
<Checkbox
checked={col.editable ?? true}
onCheckedChange={(checked) =>
updateColumnProp(col.key, "editable", !!checked)
}
title="편집 가능"
/>
)}
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => {
if (col.isSourceDisplay) {
toggleSourceDisplayColumn({
columnName: col.key,
displayName: col.title,
});
} else {
toggleInputColumn({ columnName: col.key, displayName: col.title });
}
}}
className="text-destructive h-6 w-6 p-0"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
{/* 확장 상세 */}
{!col.isSourceDisplay && expandedColumn === col.key && (
<div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
<div className="space-y-1">
<Label className="text-[10px] text-muted-foreground">컬럼 너비</Label>
<Input
value={col.width || "auto"}
onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
placeholder="auto, 100px, 20%"
className="h-6 text-xs"
/>
</div>
</div>
)}
<Trash2 className="h-3 w-3" />
</Button>
</div>
))}
{/* 확장 상세 */}
{!col.isSourceDisplay && expandedColumn === col.key && (
<div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
<div className="space-y-1">
<p className="text-[10px] text-muted-foreground">컬럼 너비</p>
<Input
value={col.width || "auto"}
onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
placeholder="auto, 100px, 20%"
className="h-6 text-xs"
/>
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</>
</CollapsibleContent>
</Collapsible>
)}
</TabsContent>
</Tabs>

938
frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
View File

File diff suppressed because it is too large Load Diff

1378
frontend/components/v2/config-panels/V2ButtonConfigPanel.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

789
frontend/components/v2/config-panels/V2CardDisplayConfigPanel.tsx Normal file
View File

@ -0,0 +1,789 @@
"use client";
/**
* V2CardDisplay 설정 패널
* 토스식 단계별 UX: 테이블 선택 -> 컬럼 매핑 -> 카드 스타일 -> 고급 설정(접힘)
*/
import React, { useState, useEffect, useMemo } from "react";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import { Badge } from "@/components/ui/badge";
import {
Settings,
ChevronDown,
Database,
ChevronsUpDown,
Check,
Plus,
Trash2,
Loader2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { entityJoinApi } from "@/lib/api/entityJoin";
import { tableManagementApi } from "@/lib/api/tableManagement";
// ─── 한 행당 카드 수 카드 정의 ───
const CARDS_PER_ROW_OPTIONS = [
{ value: 1, label: "1개" },
{ value: 2, label: "2개" },
{ value: 3, label: "3개" },
{ value: 4, label: "4개" },
{ value: 5, label: "5개" },
{ value: 6, label: "6개" },
] as const;
interface EntityJoinColumn {
tableName: string;
columnName: string;
columnLabel: string;
dataType: string;
joinAlias: string;
suggestedLabel: string;
}
interface JoinTable {
tableName: string;
currentDisplayColumn: string;
joinConfig?: { sourceColumn: string };
availableColumns: Array<{
columnName: string;
columnLabel: string;
dataType: string;
description?: string;
}>;
}
interface V2CardDisplayConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
screenTableName?: string;
tableColumns?: any[];
}
export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> = ({
config,
onChange,
screenTableName,
tableColumns = [],
}) => {
const [advancedOpen, setAdvancedOpen] = useState(false);
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
const [allTables, setAllTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
const [loadingTables, setLoadingTables] = useState(false);
const [availableColumns, setAvailableColumns] = useState<any[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
const [entityJoinColumns, setEntityJoinColumns] = useState<{
availableColumns: EntityJoinColumn[];
joinTables: JoinTable[];
}>({ availableColumns: [], joinTables: [] });
const [loadingEntityJoins, setLoadingEntityJoins] = useState(false);
const targetTableName = useMemo(() => {
if (config.useCustomTable && config.customTableName) {
return config.customTableName;
}
return config.tableName || screenTableName;
}, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);
const updateConfig = (field: string, value: any) => {
const newConfig = { ...config, [field]: value };
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
);
}
};
const updateNestedConfig = (path: string, value: any) => {
const keys = path.split(".");
const newConfig = { ...config };
let current = newConfig;
for (let i = 0; i < keys.length - 1; i++) {
if (!current[keys[i]]) current[keys[i]] = {};
current[keys[i]] = { ...current[keys[i]] };
current = current[keys[i]];
}
current[keys[keys.length - 1]] = value;
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
);
}
};
// 테이블 목록 로드
useEffect(() => {
const loadAllTables = async () => {
setLoadingTables(true);
try {
const response = await tableManagementApi.getTableList();
if (response.success && response.data) {
setAllTables(
response.data.map((t: any) => ({
tableName: t.tableName || t.table_name,
displayName: t.tableLabel || t.displayName || t.tableName || t.table_name,
}))
);
}
} catch {
/* 무시 */
} finally {
setLoadingTables(false);
}
};
loadAllTables();
}, []);
// 컬럼 로드
useEffect(() => {
const loadColumns = async () => {
if (!targetTableName) {
setAvailableColumns([]);
return;
}
if (!config.useCustomTable && tableColumns && tableColumns.length > 0) {
setAvailableColumns(tableColumns);
return;
}
setLoadingColumns(true);
try {
const result = await tableManagementApi.getColumnList(targetTableName);
if (result.success && result.data?.columns) {
setAvailableColumns(
result.data.columns.map((col: any) => ({
columnName: col.columnName,
columnLabel: col.displayName || col.columnLabel || col.columnName,
dataType: col.dataType,
}))
);
}
} catch {
setAvailableColumns([]);
} finally {
setLoadingColumns(false);
}
};
loadColumns();
}, [targetTableName, config.useCustomTable, tableColumns]);
// 엔티티 조인 컬럼 로드
useEffect(() => {
const fetchEntityJoinColumns = async () => {
if (!targetTableName) {
setEntityJoinColumns({ availableColumns: [], joinTables: [] });
return;
}
setLoadingEntityJoins(true);
try {
const result = await entityJoinApi.getEntityJoinColumns(targetTableName);
setEntityJoinColumns({
availableColumns: result.availableColumns || [],
joinTables: result.joinTables || [],
});
} catch {
setEntityJoinColumns({ availableColumns: [], joinTables: [] });
} finally {
setLoadingEntityJoins(false);
}
};
fetchEntityJoinColumns();
}, [targetTableName]);
const handleTableSelect = (selectedTable: string, isScreenTable: boolean) => {
const newConfig = isScreenTable
? { ...config, useCustomTable: false, customTableName: undefined, tableName: selectedTable, columnMapping: { displayColumns: [] } }
: { ...config, useCustomTable: true, customTableName: selectedTable, tableName: selectedTable, columnMapping: { displayColumns: [] } };
onChange(newConfig);
setTableComboboxOpen(false);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
);
}
};
const getSelectedTableDisplay = () => {
if (!targetTableName) return "테이블을 선택하세요";
const found = allTables.find((t) => t.tableName === targetTableName);
return found?.displayName || targetTableName;
};
const handleColumnSelect = (path: string, columnName: string) => {
const joinColumn = entityJoinColumns.availableColumns.find(
(col) => col.joinAlias === columnName
);
if (joinColumn) {
const joinColumnsConfig = config.joinColumns || [];
const exists = joinColumnsConfig.find((jc: any) => jc.columnName === columnName);
if (!exists) {
const joinTableInfo = entityJoinColumns.joinTables?.find(
(jt) => jt.tableName === joinColumn.tableName
);
const newJoinColumnConfig = {
columnName: joinColumn.joinAlias,
label: joinColumn.suggestedLabel || joinColumn.columnLabel,
sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
referenceTable: joinColumn.tableName,
referenceColumn: joinColumn.columnName,
isJoinColumn: true,
};
const newConfig = {
...config,
columnMapping: { ...config.columnMapping, [path.split(".")[1]]: columnName },
joinColumns: [...joinColumnsConfig, newJoinColumnConfig],
};
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
);
}
return;
}
}
updateNestedConfig(path, columnName);
};
// 표시 컬럼 관리
const addDisplayColumn = () => {
const current = config.columnMapping?.displayColumns || [];
updateNestedConfig("columnMapping.displayColumns", [...current, ""]);
};
const removeDisplayColumn = (index: number) => {
const current = [...(config.columnMapping?.displayColumns || [])];
current.splice(index, 1);
updateNestedConfig("columnMapping.displayColumns", current);
};
const updateDisplayColumn = (index: number, value: string) => {
const current = [...(config.columnMapping?.displayColumns || [])];
current[index] = value;
const joinColumn = entityJoinColumns.availableColumns.find(
(col) => col.joinAlias === value
);
if (joinColumn) {
const joinColumnsConfig = config.joinColumns || [];
const exists = joinColumnsConfig.find((jc: any) => jc.columnName === value);
if (!exists) {
const joinTableInfo = entityJoinColumns.joinTables?.find(
(jt) => jt.tableName === joinColumn.tableName
);
const newConfig = {
...config,
columnMapping: { ...config.columnMapping, displayColumns: current },
joinColumns: [
...joinColumnsConfig,
{
columnName: joinColumn.joinAlias,
label: joinColumn.suggestedLabel || joinColumn.columnLabel,
sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
referenceTable: joinColumn.tableName,
referenceColumn: joinColumn.columnName,
isJoinColumn: true,
},
],
};
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
);
}
return;
}
}
updateNestedConfig("columnMapping.displayColumns", current);
};
// 테이블별 조인 컬럼 그룹화
const joinColumnsByTable: Record<string, EntityJoinColumn[]> = {};
entityJoinColumns.availableColumns.forEach((col) => {
if (!joinColumnsByTable[col.tableName]) joinColumnsByTable[col.tableName] = [];
joinColumnsByTable[col.tableName].push(col);
});
const currentTableColumns = config.useCustomTable
? availableColumns
: tableColumns.length > 0
? tableColumns
: availableColumns;
// 컬럼 선택 Select 렌더링
const renderColumnSelect = (
value: string,
onChangeHandler: (value: string) => void,
placeholder: string = "컬럼 선택"
) => (
<Select
value={value || "__none__"}
onValueChange={(val) => onChangeHandler(val === "__none__" ? "" : val)}
>
<SelectTrigger className="h-7 text-[11px]">
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__" className="text-[11px] text-muted-foreground">
선택 안함
</SelectItem>
{currentTableColumns.length > 0 && (
<SelectGroup>
<SelectLabel className="text-[10px] font-semibold text-muted-foreground">
기본 컬럼
</SelectLabel>
{currentTableColumns.map((column: any) => (
<SelectItem key={column.columnName} value={column.columnName} className="text-[11px]">
{column.columnLabel || column.columnName}
</SelectItem>
))}
</SelectGroup>
)}
{Object.entries(joinColumnsByTable).map(([tableName, columns]) => (
<SelectGroup key={tableName}>
<SelectLabel className="text-[10px] font-semibold text-primary">
{tableName} (조인)
</SelectLabel>
{columns.map((col) => (
<SelectItem key={col.joinAlias} value={col.joinAlias} className="text-[11px]">
{col.suggestedLabel || col.columnLabel}
</SelectItem>
))}
</SelectGroup>
))}
</SelectContent>
</Select>
);
return (
<div className="space-y-4">
{/* ─── 1단계: 테이블 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">데이터 소스</p>
<Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={tableComboboxOpen}
className="h-8 w-full justify-between text-xs"
disabled={loadingTables}
>
<div className="flex items-center gap-2 truncate">
<Database className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span className="truncate">
{loadingTables ? "로딩 중..." : getSelectedTableDisplay()}
</span>
</div>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-0" align="start">
<Command>
<CommandInput placeholder="테이블 검색..." className="text-xs" />
<CommandList>
<CommandEmpty className="py-3 text-center text-xs text-muted-foreground">
테이블을 찾을 수 없어요
</CommandEmpty>
{screenTableName && (
<CommandGroup heading="기본 (화면 테이블)">
<CommandItem
value={screenTableName}
onSelect={() => handleTableSelect(screenTableName, true)}
className="text-xs"
>
<Check
className={cn(
"mr-2 h-4 w-4",
targetTableName === screenTableName && !config.useCustomTable
? "opacity-100"
: "opacity-0"
)}
/>
<Database className="mr-2 h-3.5 w-3.5 text-primary" />
{allTables.find((t) => t.tableName === screenTableName)?.displayName ||
screenTableName}
</CommandItem>
</CommandGroup>
)}
<CommandGroup heading="전체 테이블">
{allTables
.filter((t) => t.tableName !== screenTableName)
.map((table) => (
<CommandItem
key={table.tableName}
value={table.tableName}
onSelect={() => handleTableSelect(table.tableName, false)}
className="text-xs"
>
<Check
className={cn(
"mr-2 h-4 w-4",
config.useCustomTable && targetTableName === table.tableName
? "opacity-100"
: "opacity-0"
)}
/>
<Database className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
<span className="truncate">{table.displayName}</span>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{config.useCustomTable && (
<p className="text-[10px] text-muted-foreground">
화면 기본 테이블이 아닌 다른 테이블의 데이터를 표시해요
</p>
)}
</div>
{/* ─── 2단계: 컬럼 매핑 ─── */}
{(currentTableColumns.length > 0 || loadingColumns) && (
<div className="space-y-3">
<p className="text-sm font-medium truncate">컬럼 매핑</p>
{(loadingEntityJoins || loadingColumns) && (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" />
{loadingColumns ? "컬럼 로딩 중..." : "조인 컬럼 로딩 중..."}
</div>
)}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground truncate">타이틀</span>
<div className="w-[180px]">
{renderColumnSelect(
config.columnMapping?.titleColumn || "",
(value) => handleColumnSelect("columnMapping.titleColumn", value)
)}
</div>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground truncate">서브타이틀</span>
<div className="w-[180px]">
{renderColumnSelect(
config.columnMapping?.subtitleColumn || "",
(value) => handleColumnSelect("columnMapping.subtitleColumn", value)
)}
</div>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground truncate">설명</span>
<div className="w-[180px]">
{renderColumnSelect(
config.columnMapping?.descriptionColumn || "",
(value) => handleColumnSelect("columnMapping.descriptionColumn", value)
)}
</div>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground truncate">이미지</span>
<div className="w-[180px]">
{renderColumnSelect(
config.columnMapping?.imageColumn || "",
(value) => handleColumnSelect("columnMapping.imageColumn", value)
)}
</div>
</div>
</div>
{/* 표시 컬럼 */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs font-medium truncate">추가 표시 컬럼</span>
<Button
type="button"
variant="ghost"
size="sm"
onClick={addDisplayColumn}
className="h-6 px-2 text-xs"
>
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
{(config.columnMapping?.displayColumns || []).length > 0 ? (
<div className="space-y-1.5">
{(config.columnMapping?.displayColumns || []).map(
(column: string, index: number) => (
<div key={index} className="flex items-center gap-2">
<div className="flex-1">
{renderColumnSelect(column, (value) =>
updateDisplayColumn(index, value)
)}
</div>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeDisplayColumn(index)}
className="h-7 w-7 shrink-0 p-0 text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
)
)}
</div>
) : (
<div className="rounded-md border border-dashed border-muted-foreground/30 py-3 text-center text-xs text-muted-foreground">
추가 버튼으로 표시할 컬럼을 추가해요
</div>
)}
</div>
</div>
)}
{/* ─── 3단계: 카드 레이아웃 ─── */}
<div className="space-y-3">
<p className="text-sm font-medium truncate">카드 레이아웃</p>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground truncate">한 행당 카드 수</span>
<Select
value={String(config.cardsPerRow || 3)}
onValueChange={(v) => updateConfig("cardsPerRow", parseInt(v))}
>
<SelectTrigger className="h-7 w-[100px] text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{CARDS_PER_ROW_OPTIONS.map((opt) => (
<SelectItem key={opt.value} value={String(opt.value)}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground truncate">카드 간격 (px)</span>
<Input
type="number"
min={0}
max={50}
value={config.cardSpacing ?? 16}
onChange={(e) => updateConfig("cardSpacing", parseInt(e.target.value))}
className="h-7 w-[100px] text-xs"
/>
</div>
</div>
</div>
{/* ─── 4단계: 표시 요소 토글 ─── */}
<div className="space-y-3">
<p className="text-sm font-medium truncate">표시 요소</p>
<div className="rounded-lg border bg-muted/30 p-4 space-y-2">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">타이틀</p>
<p className="text-[11px] text-muted-foreground">카드 상단 제목</p>
</div>
<Switch
checked={config.cardStyle?.showTitle ?? true}
onCheckedChange={(checked) => updateNestedConfig("cardStyle.showTitle", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">서브타이틀</p>
<p className="text-[11px] text-muted-foreground">제목 아래 보조 텍스트</p>
</div>
<Switch
checked={config.cardStyle?.showSubtitle ?? true}
onCheckedChange={(checked) =>
updateNestedConfig("cardStyle.showSubtitle", checked)
}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">설명</p>
<p className="text-[11px] text-muted-foreground">카드 본문 텍스트</p>
</div>
<Switch
checked={config.cardStyle?.showDescription ?? true}
onCheckedChange={(checked) =>
updateNestedConfig("cardStyle.showDescription", checked)
}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">이미지</p>
<p className="text-[11px] text-muted-foreground">카드 이미지 영역</p>
</div>
<Switch
checked={config.cardStyle?.showImage ?? false}
onCheckedChange={(checked) =>
updateNestedConfig("cardStyle.showImage", checked)
}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">액션 버튼</p>
<p className="text-[11px] text-muted-foreground">
상세보기, 편집, 삭제 버튼
</p>
</div>
<Switch
checked={config.cardStyle?.showActions ?? true}
onCheckedChange={(checked) =>
updateNestedConfig("cardStyle.showActions", checked)
}
/>
</div>
{(config.cardStyle?.showActions ?? true) && (
<div className="ml-4 border-l-2 border-primary/20 pl-3 space-y-2">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">상세보기</span>
<Switch
checked={config.cardStyle?.showViewButton ?? true}
onCheckedChange={(checked) =>
updateNestedConfig("cardStyle.showViewButton", checked)
}
/>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">편집</span>
<Switch
checked={config.cardStyle?.showEditButton ?? true}
onCheckedChange={(checked) =>
updateNestedConfig("cardStyle.showEditButton", checked)
}
/>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">삭제</span>
<Switch
checked={config.cardStyle?.showDeleteButton ?? false}
onCheckedChange={(checked) =>
updateNestedConfig("cardStyle.showDeleteButton", checked)
}
/>
</div>
</div>
)}
</div>
</div>
{/* ─── 5단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium truncate">고급 설정</span>
<Badge variant="secondary" className="text-[10px] h-5">3개</Badge>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground truncate">설명 최대 길이</span>
<Input
type="number"
min={10}
max={500}
value={config.cardStyle?.maxDescriptionLength ?? 100}
onChange={(e) =>
updateNestedConfig(
"cardStyle.maxDescriptionLength",
parseInt(e.target.value)
)
}
className="h-7 w-[100px] text-xs"
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">비활성화</p>
<p className="text-[11px] text-muted-foreground">
카드 상호작용을 비활성화해요
</p>
</div>
<Switch
checked={config.disabled || false}
onCheckedChange={(checked) => updateConfig("disabled", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">읽기 전용</p>
<p className="text-[11px] text-muted-foreground">
데이터 수정을 막아요
</p>
</div>
<Switch
checked={config.readonly || false}
onCheckedChange={(checked) => updateConfig("readonly", checked)}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2CardDisplayConfigPanel.displayName = "V2CardDisplayConfigPanel";
export default V2CardDisplayConfigPanel;

198
frontend/components/v2/config-panels/V2CategoryManagerConfigPanel.tsx Normal file
View File

@ -0,0 +1,198 @@
"use client";
/**
* V2 카테고리 관리 설정 패널 (토스식 리디자인)
* 토스식 단계별 UX: 뷰 모드 -> 트리 설정 -> 레이아웃(접힘)
*/
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Settings, ChevronDown, FolderTree } from "lucide-react";
import { cn } from "@/lib/utils";
import type { V2CategoryManagerConfig, ViewMode } from "@/lib/registry/components/v2-category-manager/types";
import { defaultV2CategoryManagerConfig } from "@/lib/registry/components/v2-category-manager/types";
interface V2CategoryManagerConfigPanelProps {
config: Partial<V2CategoryManagerConfig>;
onChange: (config: Partial<V2CategoryManagerConfig>) => void;
}
export const V2CategoryManagerConfigPanel: React.FC<V2CategoryManagerConfigPanelProps> = ({
config: externalConfig,
onChange,
}) => {
const [layoutOpen, setLayoutOpen] = useState(false);
const config: V2CategoryManagerConfig = {
...defaultV2CategoryManagerConfig,
...externalConfig,
};
const handleChange = <K extends keyof V2CategoryManagerConfig>(key: K, value: V2CategoryManagerConfig[K]) => {
const newConfig = { ...config, [key]: value };
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
);
}
};
return (
<div className="space-y-4">
{/* ─── 1단계: 뷰 모드 설정 ─── */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<FolderTree className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium">뷰 모드 설정</p>
</div>
<p className="text-[11px] text-muted-foreground">카테고리 표시 방식을 설정해요</p>
</div>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">기본 뷰 모드</span>
<Select
value={config.viewMode}
onValueChange={(value: ViewMode) => handleChange("viewMode", value)}
>
<SelectTrigger className="h-7 w-[120px] text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="tree">트리 뷰</SelectItem>
<SelectItem value="list">목록 뷰</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">뷰 모드 토글</p>
<p className="text-[11px] text-muted-foreground">트리/목록 전환 버튼을 표시해요</p>
</div>
<Switch
checked={config.showViewModeToggle}
onCheckedChange={(checked) => handleChange("showViewModeToggle", checked)}
/>
</div>
</div>
{/* ─── 2단계: 트리 설정 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">트리 설정</p>
<p className="text-[11px] text-muted-foreground">트리 뷰의 기본 동작을 설정해요</p>
</div>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<span className="text-xs text-muted-foreground">기본 펼침 단계</span>
<p className="text-[10px] text-muted-foreground mt-0.5">처음 로드 시 펼쳐지는 깊이</p>
</div>
<Select
value={String(config.defaultExpandLevel)}
onValueChange={(value) => handleChange("defaultExpandLevel", Number(value))}
>
<SelectTrigger className="h-7 w-[120px] text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">1단계 (대분류만)</SelectItem>
<SelectItem value="2">2단계 (중분류까지)</SelectItem>
<SelectItem value="3">3단계 (전체 펼침)</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">비활성 항목 표시</p>
<p className="text-[11px] text-muted-foreground">비활성화된 카테고리도 보여줘요</p>
</div>
<Switch
checked={config.showInactiveItems}
onCheckedChange={(checked) => handleChange("showInactiveItems", checked)}
/>
</div>
</div>
{/* ─── 3단계: 레이아웃 (Collapsible) ─── */}
<Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">레이아웃 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
layoutOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">컬럼 목록 표시</p>
<p className="text-[11px] text-muted-foreground">좌측 카테고리 컬럼 목록 패널을 보여줘요</p>
</div>
<Switch
checked={config.showColumnList}
onCheckedChange={(checked) => handleChange("showColumnList", checked)}
/>
</div>
{config.showColumnList && (
<div className="ml-1 border-l-2 border-primary/20 pl-3">
<div className="flex items-center justify-between py-1">
<div>
<span className="text-xs text-muted-foreground">좌측 패널 너비 (%)</span>
<p className="text-[10px] text-muted-foreground mt-0.5">10~40% 범위</p>
</div>
<Input
type="number"
min={10}
max={40}
value={config.leftPanelWidth}
onChange={(e) => handleChange("leftPanelWidth", Number(e.target.value))}
className="h-7 w-[80px] text-xs"
/>
</div>
</div>
)}
<div className="flex items-center justify-between py-1">
<div>
<span className="text-xs text-muted-foreground">높이</span>
<p className="text-[10px] text-muted-foreground mt-0.5">px 또는 % (예: 100%, 600)</p>
</div>
<Input
value={String(config.height)}
onChange={(e) => {
const v = e.target.value;
handleChange("height", isNaN(Number(v)) ? v : Number(v));
}}
placeholder="100%"
className="h-7 w-[100px] text-xs"
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2CategoryManagerConfigPanel.displayName = "V2CategoryManagerConfigPanel";
export default V2CategoryManagerConfigPanel;

319
frontend/components/v2/config-panels/V2DateConfigPanel.tsx
View File

@ -2,15 +2,70 @@
/**
* V2Date 설정 패널
* 통합 날짜 컴포넌트의 세부 설정을 관리합니다.
* 토스식 단계별 UX: 날짜 타입 카드 선택 -> 표시 설정 -> 고급 설정(접힘)
*/
import React from "react";
import React, { useState, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Calendar, Clock, CalendarClock, Settings, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
// ─── 날짜 타입 카드 정의 ───
const DATE_TYPE_CARDS = [
{
value: "date",
icon: Calendar,
title: "날짜",
description: "연/월/일을 선택해요",
},
{
value: "time",
icon: Clock,
title: "시간",
description: "시/분을 선택해요",
},
{
value: "datetime",
icon: CalendarClock,
title: "날짜+시간",
description: "날짜와 시간을 함께 선택해요",
},
] as const;
// ─── 날짜 타입별 표시 형식 옵션 ───
const FORMAT_OPTIONS: Record<string, { value: string; label: string }[]> = {
date: [
{ value: "YYYY-MM-DD", label: "YYYY-MM-DD" },
{ value: "YYYY/MM/DD", label: "YYYY/MM/DD" },
{ value: "DD/MM/YYYY", label: "DD/MM/YYYY" },
{ value: "MM/DD/YYYY", label: "MM/DD/YYYY" },
{ value: "YYYY년 MM월 DD일", label: "YYYY년 MM월 DD일" },
],
time: [
{ value: "HH:mm", label: "HH:mm" },
{ value: "HH:mm:ss", label: "HH:mm:ss" },
],
datetime: [
{ value: "YYYY-MM-DD HH:mm", label: "YYYY-MM-DD HH:mm" },
{ value: "YYYY-MM-DD HH:mm:ss", label: "YYYY-MM-DD HH:mm:ss" },
{ value: "YYYY/MM/DD HH:mm", label: "YYYY/MM/DD HH:mm" },
{ value: "YYYY년 MM월 DD일", label: "YYYY년 MM월 DD일" },
],
};
interface V2DateConfigPanelProps {
config: Record<string, any>;
@ -21,137 +76,183 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
config,
onChange,
}) => {
// 설정 업데이트 핸들러
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
const currentDateType = config.dateType || config.type || "date";
const showTimeOptions = currentDateType === "datetime" || currentDateType === "time";
const formatOptions = useMemo(() => {
return FORMAT_OPTIONS[currentDateType] || FORMAT_OPTIONS.date;
}, [currentDateType]);
return (
<div className="space-y-4">
{/* 날짜 타입 */}
{/* ─── 1단계: 날짜 타입 선택 (카드) ─── */}
<div className="space-y-2">
<Label className="text-xs font-medium">날짜 타입</Label>
<Select
value={config.dateType || config.type || "date"}
onValueChange={(value) => updateConfig("dateType", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="타입 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="date">날짜</SelectItem>
<SelectItem value="time">시간</SelectItem>
<SelectItem value="datetime">날짜+시간</SelectItem>
</SelectContent>
</Select>
</div>
<Separator />
{/* 플레이스홀더 */}
<div className="space-y-2">
<Label className="text-xs font-medium">플레이스홀더</Label>
<Input
value={config.placeholder || ""}
onChange={(e) => updateConfig("placeholder", e.target.value)}
placeholder="날짜 선택"
className="h-8 text-xs"
/>
<p className="text-muted-foreground text-[10px]">날짜가 선택되지 않았을 때 표시할 텍스트</p>
</div>
<Separator />
{/* 표시 형식 */}
<div className="space-y-2">
<Label className="text-xs font-medium">표시 형식</Label>
<Select
value={config.format || "YYYY-MM-DD"}
onValueChange={(value) => updateConfig("format", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="형식 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
<SelectItem value="YYYY/MM/DD">YYYY/MM/DD</SelectItem>
<SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
<SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
<SelectItem value="YYYY년 MM월 DD일">YYYY년 MM월 DD일</SelectItem>
{(config.dateType === "time" || config.dateType === "datetime") && (
<>
<SelectItem value="HH:mm">HH:mm</SelectItem>
<SelectItem value="HH:mm:ss">HH:mm:ss</SelectItem>
<SelectItem value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</SelectItem>
<SelectItem value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</SelectItem>
</>
)}
</SelectContent>
</Select>
</div>
<Separator />
{/* 날짜 범위 제한 */}
<div className="space-y-3">
<Label className="text-xs font-medium">날짜 범위 제한</Label>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">최소 날짜</Label>
<Input
type="date"
value={config.minDate || ""}
onChange={(e) => updateConfig("minDate", e.target.value)}
className="h-8 text-xs"
/>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">최대 날짜</Label>
<Input
type="date"
value={config.maxDate || ""}
onChange={(e) => updateConfig("maxDate", e.target.value)}
className="h-8 text-xs"
/>
</div>
<p className="text-sm font-medium">어떤 날짜 정보를 입력받나요?</p>
<div className="grid grid-cols-3 gap-2">
{DATE_TYPE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = currentDateType === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("dateType", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50",
)}
>
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">
{card.title}
</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
{card.description}
</span>
</button>
);
})}
</div>
</div>
<Separator />
{/* ─── 2단계: 표시 설정 ─── */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<span className="text-sm font-medium">표시 설정</span>
{/* 추가 옵션 */}
<div className="space-y-3">
<Label className="text-xs font-medium">추가 옵션</Label>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">표시 형식</span>
<Select
value={config.format || formatOptions[0]?.value || "YYYY-MM-DD"}
onValueChange={(value) => updateConfig("format", value)}
>
<SelectTrigger className="h-8 w-[180px] text-sm">
<SelectValue placeholder="형식 선택" />
</SelectTrigger>
<SelectContent>
{formatOptions.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="range"
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">안내 텍스트</span>
<Input
value={config.placeholder || ""}
onChange={(e) => updateConfig("placeholder", e.target.value)}
placeholder="날짜 선택"
className="h-8 w-[180px] text-sm"
/>
</div>
</div>
{/* ─── 3단계: 옵션 (Switch + 설명) ─── */}
<div className="space-y-2">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">기간 선택</p>
<p className="text-[11px] text-muted-foreground">
시작일~종료일을 함께 선택할 수 있어요
</p>
</div>
<Switch
checked={config.range || false}
onCheckedChange={(checked) => updateConfig("range", checked)}
/>
<label htmlFor="range" className="text-xs">기간 선택 (시작~종료)</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="showToday"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">오늘 버튼</p>
<p className="text-[11px] text-muted-foreground">
오늘 날짜로 빠르게 이동할 수 있어요
</p>
</div>
<Switch
checked={config.showToday !== false}
onCheckedChange={(checked) => updateConfig("showToday", checked)}
/>
<label htmlFor="showToday" className="text-xs">오늘 버튼 표시</label>
</div>
{(config.dateType === "datetime" || config.dateType === "time") && (
<div className="flex items-center space-x-2">
<Checkbox
id="showSeconds"
{showTimeOptions && (
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">초 단위 표시</p>
<p className="text-[11px] text-muted-foreground">
시:분 외에 초까지 입력할 수 있어요
</p>
</div>
<Switch
checked={config.showSeconds || false}
onCheckedChange={(checked) => updateConfig("showSeconds", checked)}
/>
<label htmlFor="showSeconds" className="text-xs">초 단위 표시</label>
</div>
)}
</div>
{/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<p className="text-xs text-muted-foreground">
선택 가능한 날짜 범위를 제한할 수 있어요
</p>
<div className="flex gap-2">
<div className="flex-1">
<Label className="text-xs text-muted-foreground">최소 날짜</Label>
<Input
type="date"
value={config.minDate || ""}
onChange={(e) => updateConfig("minDate", e.target.value)}
className="h-8 w-full text-sm"
/>
</div>
<div className="flex-1">
<Label className="text-xs text-muted-foreground">최대 날짜</Label>
<Input
type="date"
value={config.maxDate || ""}
onChange={(e) => updateConfig("maxDate", e.target.value)}
className="h-8 w-full text-sm"
/>
</div>
</div>
<p className="text-[11px] text-muted-foreground">
비워두면 제한 없이 모든 날짜를 선택할 수 있어요
</p>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
@ -159,5 +260,3 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
V2DateConfigPanel.displayName = "V2DateConfigPanel";
export default V2DateConfigPanel;

236
frontend/components/v2/config-panels/V2DividerLineConfigPanel.tsx Normal file
View File

@ -0,0 +1,236 @@
"use client";
/**
* V2DividerLine 설정 패널
* 토스식 UX: 구분선 스타일 카드 선택 -> 텍스트 설정 -> 고급 설정(접힘)
*/
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Settings, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
const THICKNESS_CARDS = [
{ value: "1px", label: "얇게", size: "1px" },
{ value: "2px", label: "보통", size: "2px" },
{ value: "4px", label: "두껍게", size: "4px" },
] as const;
const COLOR_CARDS = [
{ value: "#d1d5db", label: "기본", description: "연한 회색" },
{ value: "#9ca3af", label: "진하게", description: "중간 회색" },
{ value: "#3b82f6", label: "강조", description: "파란색" },
] as const;
interface V2DividerLineConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
}
export const V2DividerLineConfigPanel: React.FC<V2DividerLineConfigPanelProps> = ({
config,
onChange,
}) => {
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
const newConfig = { ...config, [field]: value };
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
};
return (
<div className="space-y-4">
{/* ─── 1단계: 선 두께 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">선 두께</p>
<div className="grid grid-cols-3 gap-2">
{THICKNESS_CARDS.map((card) => {
const isSelected = (config.thickness || "1px") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("thickness", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[56px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<div
className="mb-1.5 w-full rounded-full"
style={{
height: card.size,
backgroundColor: config.color || "#d1d5db",
}}
/>
<span className="text-xs font-medium">{card.label}</span>
</button>
);
})}
</div>
</div>
{/* ─── 2단계: 선 색상 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">선 색상</p>
<div className="grid grid-cols-3 gap-2">
{COLOR_CARDS.map((card) => {
const isSelected = (config.color || "#d1d5db") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("color", card.value)}
className={cn(
"flex flex-col items-center rounded-md border p-2 text-center transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<div
className="mb-1 h-3 w-3 rounded-full"
style={{ backgroundColor: card.value }}
/>
<span className="text-xs font-medium">{card.label}</span>
</button>
);
})}
</div>
{/* 커스텀 색상 */}
<div className="flex items-center gap-2 pt-1">
<input
type="color"
value={config.color || "#d1d5db"}
onChange={(e) => updateConfig("color", e.target.value)}
className="h-7 w-7 cursor-pointer rounded border"
/>
<Input
value={config.color || "#d1d5db"}
onChange={(e) => updateConfig("color", e.target.value)}
placeholder="#d1d5db"
className="h-7 flex-1 text-xs"
/>
</div>
</div>
{/* ─── 3단계: 구분선 텍스트 ─── */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium">구분 텍스트</p>
<p className="text-[11px] text-muted-foreground">
선 가운데에 텍스트를 표시해요
</p>
</div>
<Switch
checked={!!config.dividerText}
onCheckedChange={(checked) =>
updateConfig("dividerText", checked ? "구분" : "")
}
/>
</div>
{config.dividerText && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">텍스트</span>
<Input
value={config.dividerText || ""}
onChange={(e) => updateConfig("dividerText", e.target.value)}
placeholder="구분 텍스트 입력"
className="h-7 w-[160px] text-xs"
/>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">텍스트 색상</span>
<div className="flex items-center gap-1.5">
<input
type="color"
value={config.textColor || "#6b7280"}
onChange={(e) => updateConfig("textColor", e.target.value)}
className="h-6 w-6 cursor-pointer rounded border"
/>
<Input
value={config.textColor || "#6b7280"}
onChange={(e) => updateConfig("textColor", e.target.value)}
className="h-7 w-[100px] text-xs"
/>
</div>
</div>
</div>
)}
</div>
{/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">둥근 끝</p>
<p className="text-[11px] text-muted-foreground">
선의 양쪽 끝을 둥글게 처리해요
</p>
</div>
<Switch
checked={config.rounded || false}
onCheckedChange={(checked) => updateConfig("rounded", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">비활성화</p>
<p className="text-[11px] text-muted-foreground">
컴포넌트를 비활성화 상태로 표시해요
</p>
</div>
<Switch
checked={config.disabled || false}
onCheckedChange={(checked) => updateConfig("disabled", checked)}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2DividerLineConfigPanel.displayName = "V2DividerLineConfigPanel";
export default V2DividerLineConfigPanel;

749
frontend/components/v2/config-panels/V2FieldConfigPanel.tsx Normal file
View File

@ -0,0 +1,749 @@
"use client";
/**
* V2 통합 필드 설정 패널
* 입력(text/number/textarea/numbering)과 선택(select/category/entity)을
* 하나의 패널에서 전환할 수 있는 통합 설정 UI
*/
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Separator } from "@/components/ui/separator";
import {
Type, Hash, AlignLeft, ListOrdered, List, Database, FolderTree,
Settings, ChevronDown, Plus, Trash2, Loader2, Filter,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { AutoGenerationType } from "@/types/screen";
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
import { getAvailableNumberingRulesForScreen } from "@/lib/api/numberingRule";
import { NumberingRuleConfig } from "@/types/numbering-rule";
import type { V2SelectFilter } from "@/types/v2-components";
// ─── 필드 유형 카드 정의 ───
const FIELD_TYPE_CARDS = [
{ value: "text", icon: Type, label: "텍스트", desc: "일반 텍스트 입력", group: "input" },
{ value: "number", icon: Hash, label: "숫자", desc: "숫자만 입력", group: "input" },
{ value: "textarea", icon: AlignLeft, label: "여러 줄", desc: "긴 텍스트 입력", group: "input" },
{ value: "select", icon: List, label: "셀렉트", desc: "직접 옵션 선택", group: "select" },
{ value: "category", icon: FolderTree, label: "카테고리", desc: "등록된 선택지", group: "select" },
{ value: "entity", icon: Database, label: "테이블 참조", desc: "다른 테이블 참조", group: "select" },
{ value: "numbering", icon: ListOrdered, label: "채번", desc: "자동 번호 생성", group: "input" },
] as const;
type FieldType = typeof FIELD_TYPE_CARDS[number]["value"];
// 필터 조건 관련 상수
const OPERATOR_OPTIONS = [
{ value: "=", label: "같음 (=)" },
{ value: "!=", label: "다름 (!=)" },
{ value: ">", label: "초과 (>)" },
{ value: "<", label: "미만 (<)" },
{ value: ">=", label: "이상 (>=)" },
{ value: "<=", label: "이하 (<=)" },
{ value: "in", label: "포함 (IN)" },
{ value: "notIn", label: "미포함 (NOT IN)" },
{ value: "like", label: "유사 (LIKE)" },
{ value: "isNull", label: "NULL" },
{ value: "isNotNull", label: "NOT NULL" },
] as const;
const VALUE_TYPE_OPTIONS = [
{ value: "static", label: "고정값" },
{ value: "field", label: "폼 필드 참조" },
{ value: "user", label: "로그인 사용자" },
] as const;
const USER_FIELD_OPTIONS = [
{ value: "companyCode", label: "회사코드" },
{ value: "userId", label: "사용자ID" },
{ value: "deptCode", label: "부서코드" },
{ value: "userName", label: "사용자명" },
] as const;
interface ColumnOption {
columnName: string;
columnLabel: string;
}
interface CategoryValueOption {
valueCode: string;
valueLabel: string;
}
// ─── 하위 호환: 기존 config에서 fieldType 추론 ───
function resolveFieldType(config: Record<string, any>, componentType?: string): FieldType {
if (config.fieldType) return config.fieldType as FieldType;
// v2-select 계열
if (componentType === "v2-select" || config.source) {
const source = config.source === "code" ? "category" : config.source;
if (source === "entity") return "entity";
if (source === "category") return "category";
return "select";
}
// v2-input 계열
const it = config.inputType || config.type;
if (it === "number") return "number";
if (it === "textarea") return "textarea";
if (it === "numbering") return "numbering";
return "text";
}
// ─── 필터 조건 서브 컴포넌트 ───
const FilterConditionsSection: React.FC<{
filters: V2SelectFilter[];
columns: ColumnOption[];
loadingColumns: boolean;
targetTable: string;
onFiltersChange: (filters: V2SelectFilter[]) => void;
}> = ({ filters, columns, loadingColumns, targetTable, onFiltersChange }) => {
const addFilter = () => {
onFiltersChange([...filters, { column: "", operator: "=", valueType: "static", value: "" }]);
};
const updateFilter = (index: number, patch: Partial<V2SelectFilter>) => {
const updated = [...filters];
updated[index] = { ...updated[index], ...patch };
if (patch.valueType) {
if (patch.valueType === "static") { updated[index].fieldRef = undefined; updated[index].userField = undefined; }
else if (patch.valueType === "field") { updated[index].value = undefined; updated[index].userField = undefined; }
else if (patch.valueType === "user") { updated[index].value = undefined; updated[index].fieldRef = undefined; }
}
if (patch.operator === "isNull" || patch.operator === "isNotNull") {
updated[index].value = undefined; updated[index].fieldRef = undefined;
updated[index].userField = undefined; updated[index].valueType = "static";
}
onFiltersChange(updated);
};
const removeFilter = (index: number) => onFiltersChange(filters.filter((_, i) => i !== index));
const needsValue = (op: string) => op !== "isNull" && op !== "isNotNull";
return (
<div className="space-y-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-1.5">
<Filter className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-medium">데이터 필터</span>
</div>
<Button type="button" variant="ghost" size="sm" onClick={addFilter} className="h-6 px-2 text-xs">
<Plus className="mr-1 h-3 w-3" />추가
</Button>
</div>
<p className="text-muted-foreground text-[10px]">{targetTable} 테이블에서 옵션을 불러올 때 적용할 조건</p>
{loadingColumns && (
<div className="text-muted-foreground flex items-center gap-2 text-xs"><Loader2 className="h-3 w-3 animate-spin" />컬럼 목록 로딩 중...</div>
)}
{filters.length === 0 && <p className="text-muted-foreground py-2 text-center text-xs">필터 조건이 없습니다</p>}
<div className="space-y-2">
{filters.map((filter, index) => (
<div key={index} className="space-y-2 rounded-md border p-3">
<div className="flex items-center gap-1.5">
<Select value={filter.column || ""} onValueChange={(v) => updateFilter(index, { column: v })}>
<SelectTrigger className="h-7 flex-1 text-[11px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
<SelectContent>{columns.map((col) => (<SelectItem key={col.columnName} value={col.columnName}>{col.columnLabel}</SelectItem>))}</SelectContent>
</Select>
<Select value={filter.operator || "="} onValueChange={(v) => updateFilter(index, { operator: v as V2SelectFilter["operator"] })}>
<SelectTrigger className="h-7 flex-1 text-[11px]"><SelectValue /></SelectTrigger>
<SelectContent>{OPERATOR_OPTIONS.map((op) => (<SelectItem key={op.value} value={op.value}>{op.label}</SelectItem>))}</SelectContent>
</Select>
<Button type="button" variant="ghost" size="sm" onClick={() => removeFilter(index)} className="text-destructive h-8 w-8 shrink-0 p-0"><Trash2 className="h-3 w-3" /></Button>
</div>
{needsValue(filter.operator) && (
<div className="flex items-center gap-1.5">
<Select value={filter.valueType || "static"} onValueChange={(v) => updateFilter(index, { valueType: v as V2SelectFilter["valueType"] })}>
<SelectTrigger className="h-7 w-[100px] shrink-0 text-[11px]"><SelectValue /></SelectTrigger>
<SelectContent>{VALUE_TYPE_OPTIONS.map((vt) => (<SelectItem key={vt.value} value={vt.value}>{vt.label}</SelectItem>))}</SelectContent>
</Select>
{(filter.valueType || "static") === "static" && (
<Input value={String(filter.value ?? "")} onChange={(e) => updateFilter(index, { value: e.target.value })}
placeholder={filter.operator === "in" || filter.operator === "notIn" ? "값1, 값2, ..." : "값 입력"} className="h-7 flex-1 text-[11px]" />
)}
{filter.valueType === "field" && (
<Input value={filter.fieldRef || ""} onChange={(e) => updateFilter(index, { fieldRef: e.target.value })} placeholder="참조할 필드명" className="h-7 flex-1 text-[11px]" />
)}
{filter.valueType === "user" && (
<Select value={filter.userField || ""} onValueChange={(v) => updateFilter(index, { userField: v as V2SelectFilter["userField"] })}>
<SelectTrigger className="h-7 flex-1 text-[11px]"><SelectValue placeholder="사용자 필드" /></SelectTrigger>
<SelectContent>{USER_FIELD_OPTIONS.map((uf) => (<SelectItem key={uf.value} value={uf.value}>{uf.label}</SelectItem>))}</SelectContent>
</Select>
)}
</div>
)}
</div>
))}
</div>
</div>
);
};
// ─── 메인 컴포넌트 ───
interface V2FieldConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
tableName?: string;
columnName?: string;
tables?: Array<{ tableName: string; displayName?: string; tableComment?: string }>;
menuObjid?: number;
screenTableName?: string;
inputType?: string;
componentType?: string;
}
export const V2FieldConfigPanel: React.FC<V2FieldConfigPanelProps> = ({
config,
onChange,
tableName,
columnName,
tables = [],
screenTableName,
inputType: metaInputType,
componentType,
}) => {
const fieldType = resolveFieldType(config, componentType);
const isSelectGroup = ["select", "category", "entity"].includes(fieldType);
// ─── 채번 관련 상태 (테이블 기반) ───
const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
const [loadingRules, setLoadingRules] = useState(false);
const numberingTableName = screenTableName || tableName;
// ─── 셀렉트 관련 상태 ───
const [entityColumns, setEntityColumns] = useState<ColumnOption[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
const [categoryValues, setCategoryValues] = useState<CategoryValueOption[]>([]);
const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);
const [filterColumns, setFilterColumns] = useState<ColumnOption[]>([]);
const [loadingFilterColumns, setLoadingFilterColumns] = useState(false);
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
// ─── 필드 타입 전환 핸들러 ───
const handleFieldTypeChange = (newType: FieldType) => {
const newIsSelect = ["select", "category", "entity"].includes(newType);
const base: Record<string, any> = { ...config, fieldType: newType };
if (newIsSelect) {
base.source = newType === "category" ? "category" : newType === "entity" ? "entity" : "static";
delete base.inputType;
} else {
base.inputType = newType;
// 선택형 -> 입력형 전환 시 source 잔류 제거 (안 지우면 '카테고리 값이 없습니다' 같은 오류 표시)
delete base.source;
}
if (newType === "numbering") {
base.autoGeneration = {
...config.autoGeneration,
type: "numbering_rule" as AutoGenerationType,
tableName: numberingTableName,
};
base.readonly = config.readonly ?? true;
}
onChange(base);
// table_type_columns.input_type 동기화 (카테고리/엔티티 등 설정 가능하도록)
const syncTableName = screenTableName || tableName;
const syncColumnName = columnName || config.columnName || config.fieldName;
if (syncTableName && syncColumnName) {
apiClient.put(`/table-management/tables/${syncTableName}/columns/${syncColumnName}/input-type`, {
inputType: newType,
}).then(() => {
// 왼쪽 테이블 패널의 컬럼 타입 뱃지 갱신
window.dispatchEvent(new CustomEvent("table-columns-refresh"));
}).catch(() => { /* 동기화 실패해도 화면 설정은 유지 */ });
}
};
// ─── 채번 규칙 로드 (테이블 기반) ───
useEffect(() => {
if (fieldType !== "numbering") return;
if (!numberingTableName) { setNumberingRules([]); return; }
const load = async () => {
setLoadingRules(true);
try {
const resp = await getAvailableNumberingRulesForScreen(numberingTableName);
if (resp.success && resp.data) setNumberingRules(resp.data);
else setNumberingRules([]);
} catch { setNumberingRules([]); } finally { setLoadingRules(false); }
};
load();
}, [numberingTableName, fieldType]);
// ─── 엔티티 컬럼 로드 ───
const loadEntityColumns = useCallback(async (tblName: string) => {
if (!tblName) { setEntityColumns([]); return; }
setLoadingColumns(true);
try {
const resp = await apiClient.get(`/table-management/tables/${tblName}/columns?size=500`);
const data = resp.data.data || resp.data;
const cols = data.columns || data || [];
setEntityColumns(cols.map((col: any) => ({
columnName: col.columnName || col.column_name || col.name,
columnLabel: col.displayName || col.display_name || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
})));
} catch { setEntityColumns([]); } finally { setLoadingColumns(false); }
}, []);
useEffect(() => {
if (fieldType === "entity" && config.entityTable) loadEntityColumns(config.entityTable);
}, [fieldType, config.entityTable, loadEntityColumns]);
// ─── 카테고리 값 로드 ───
const loadCategoryValues = useCallback(async (catTable: string, catColumn: string) => {
if (!catTable || !catColumn) { setCategoryValues([]); return; }
setLoadingCategoryValues(true);
try {
const resp = await apiClient.get(`/table-categories/${catTable}/${catColumn}/values`);
if (resp.data.success && resp.data.data) {
const flattenTree = (items: any[], depth = 0): CategoryValueOption[] => {
const result: CategoryValueOption[] = [];
for (const item of items) {
result.push({ valueCode: item.valueCode, valueLabel: depth > 0 ? `${" ".repeat(depth)}${item.valueLabel}` : item.valueLabel });
if (item.children?.length) result.push(...flattenTree(item.children, depth + 1));
}
return result;
};
setCategoryValues(flattenTree(resp.data.data));
}
} catch { setCategoryValues([]); } finally { setLoadingCategoryValues(false); }
}, []);
useEffect(() => {
if (fieldType === "category") {
const catTable = config.categoryTable || tableName;
const catColumn = config.categoryColumn || columnName;
if (catTable && catColumn) loadCategoryValues(catTable, catColumn);
}
}, [fieldType, config.categoryTable, config.categoryColumn, tableName, columnName, loadCategoryValues]);
// ─── 필터 컬럼 로드 ───
const filterTargetTable = useMemo(() => {
if (fieldType === "entity") return config.entityTable;
if (fieldType === "category") return config.categoryTable || tableName;
return null;
}, [fieldType, config.entityTable, config.categoryTable, tableName]);
useEffect(() => {
if (!filterTargetTable) { setFilterColumns([]); return; }
const load = async () => {
setLoadingFilterColumns(true);
try {
const resp = await apiClient.get(`/table-management/tables/${filterTargetTable}/columns?size=500`);
const data = resp.data.data || resp.data;
const cols = data.columns || data || [];
setFilterColumns(cols.map((col: any) => ({
columnName: col.columnName || col.column_name || col.name,
columnLabel: col.displayName || col.display_name || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
})));
} catch { setFilterColumns([]); } finally { setLoadingFilterColumns(false); }
};
load();
}, [filterTargetTable]);
// ─── 옵션 관리 (select static) ───
const options = config.options || [];
const addOption = () => updateConfig("options", [...options, { value: "", label: "" }]);
const updateOptionValue = (index: number, value: string) => {
const newOpts = [...options];
newOpts[index] = { ...newOpts[index], value, label: value };
updateConfig("options", newOpts);
};
const removeOption = (index: number) => updateConfig("options", options.filter((_: any, i: number) => i !== index));
return (
<div className="space-y-4">
{/* ═══ 1단계: 필드 유형 선택 ═══ */}
<div className="space-y-2">
<p className="text-sm font-medium">이 필드는 어떤 유형인가요?</p>
<p className="text-[11px] text-muted-foreground">유형에 따라 입력 방식이 바뀌어요</p>
</div>
<div className="grid grid-cols-3 gap-2">
{FIELD_TYPE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = fieldType === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => handleFieldTypeChange(card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[72px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className={cn("h-4 w-4 mb-1", isSelected ? "text-primary" : "text-muted-foreground")} />
<span className={cn("text-[11px] font-medium leading-tight", isSelected ? "text-primary" : "text-foreground")}>{card.label}</span>
<span className="text-[9px] text-muted-foreground leading-tight mt-0.5">{card.desc}</span>
</button>
);
})}
</div>
{/* ═══ 2단계: 유형별 상세 설정 ═══ */}
{/* ─── 텍스트/숫자/여러줄: 기본 설정 ─── */}
{(fieldType === "text" || fieldType === "number" || fieldType === "textarea") && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">안내 텍스트</span>
<Input value={config.placeholder || ""} onChange={(e) => updateConfig("placeholder", e.target.value)} placeholder="입력 안내" className="h-7 w-[160px] text-xs" />
</div>
{fieldType === "text" && (
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">입력 형식</span>
<Select value={config.format || "none"} onValueChange={(v) => updateConfig("format", v)}>
<SelectTrigger className="h-7 w-[160px] text-xs"><SelectValue placeholder="형식 선택" /></SelectTrigger>
<SelectContent>
<SelectItem value="none">제한 없음</SelectItem>
<SelectItem value="email">이메일</SelectItem>
<SelectItem value="tel">전화번호</SelectItem>
<SelectItem value="url">URL</SelectItem>
<SelectItem value="currency">통화</SelectItem>
<SelectItem value="biz_no">사업자번호</SelectItem>
</SelectContent>
</Select>
</div>
)}
{fieldType === "number" && (
<div className="space-y-2 pt-1">
<p className="text-xs text-muted-foreground">값 범위</p>
<div className="flex gap-2">
<div className="flex-1">
<Label className="text-[10px] text-muted-foreground">최소값</Label>
<Input type="number" value={config.min ?? ""} onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)} placeholder="0" className="h-7 text-xs" />
</div>
<div className="flex-1">
<Label className="text-[10px] text-muted-foreground">최대값</Label>
<Input type="number" value={config.max ?? ""} onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)} placeholder="100" className="h-7 text-xs" />
</div>
<div className="flex-1">
<Label className="text-[10px] text-muted-foreground">단계</Label>
<Input type="number" value={config.step ?? ""} onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)} placeholder="1" className="h-7 text-xs" />
</div>
</div>
</div>
)}
{fieldType === "textarea" && (
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">줄 수</span>
<Input type="number" value={config.rows || 3} onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)} min={2} max={20} className="h-7 w-[160px] text-xs" />
</div>
)}
</div>
)}
{/* ─── 셀렉트 (직접 입력): 옵션 관리 ─── */}
{fieldType === "select" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">옵션 목록</span>
<Button type="button" variant="outline" size="sm" onClick={addOption} className="h-7 px-2 text-xs">
<Plus className="mr-1 h-3 w-3" />추가
</Button>
</div>
{options.length > 0 ? (
<div className="max-h-40 space-y-1.5 overflow-y-auto">
{options.map((option: any, index: number) => (
<div key={index} className="flex items-center gap-2">
<Input value={option.value || ""} onChange={(e) => updateOptionValue(index, e.target.value)} placeholder={`옵션 ${index + 1}`} className="h-8 flex-1 text-sm" />
<Button type="button" variant="ghost" size="icon" onClick={() => removeOption(index)} className="text-destructive h-8 w-8 shrink-0"><Trash2 className="h-4 w-4" /></Button>
</div>
))}
</div>
) : (
<div className="text-center py-6 text-muted-foreground">
<List className="mx-auto mb-2 h-8 w-8 opacity-30" />
<p className="text-sm">아직 옵션이 없어요</p>
<p className="text-xs">위의 추가 버튼으로 옵션을 만들어보세요</p>
</div>
)}
{options.length > 0 && (
<div className="border-t pt-3 mt-3">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">기본 선택값</span>
<Select value={config.defaultValue || "_none_"} onValueChange={(v) => updateConfig("defaultValue", v === "_none_" ? "" : v)}>
<SelectTrigger className="h-8 w-[160px] text-sm"><SelectValue placeholder="선택 안함" /></SelectTrigger>
<SelectContent>
<SelectItem value="_none_">선택 안함</SelectItem>
{options.map((opt: any, i: number) => (<SelectItem key={`d-${i}`} value={opt.value || `_idx_${i}`}>{opt.label || opt.value || `옵션 ${i + 1}`}</SelectItem>))}
</SelectContent>
</Select>
</div>
</div>
)}
</div>
)}
{/* ─── 카테고리 ─── */}
{fieldType === "category" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<FolderTree className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">카테고리</span>
</div>
{config.source === "code" && config.codeGroup && (
<div className="rounded-md border bg-background p-3">
<p className="text-xs text-muted-foreground">코드 그룹</p>
<p className="mt-0.5 text-sm font-medium">{config.codeGroup}</p>
</div>
)}
<div className="rounded-md border bg-background p-3">
<div className="flex gap-6">
<div><p className="text-xs text-muted-foreground">테이블</p><p className="text-sm font-medium">{config.categoryTable || tableName || "-"}</p></div>
<div><p className="text-xs text-muted-foreground">컬럼</p><p className="text-sm font-medium">{config.categoryColumn || columnName || "-"}</p></div>
</div>
</div>
{loadingCategoryValues && <div className="text-muted-foreground flex items-center gap-2 text-xs"><Loader2 className="h-3 w-3 animate-spin" />카테고리 값 로딩 중...</div>}
{categoryValues.length > 0 && (
<div>
<p className="mb-1.5 text-xs text-muted-foreground">{categoryValues.length}개의 값이 있어요</p>
<div className="max-h-28 overflow-y-auto rounded-md border bg-background p-2 space-y-0.5">
{categoryValues.map((cv) => (
<div key={cv.valueCode} className="flex items-center gap-2 px-1.5 py-0.5 text-xs">
<span className="shrink-0 font-mono text-[10px] text-muted-foreground">{cv.valueCode}</span>
<span className="truncate">{cv.valueLabel}</span>
</div>
))}
</div>
<div className="mt-3 flex items-center justify-between">
<span className="text-xs text-muted-foreground">기본 선택값</span>
<Select value={config.defaultValue || "_none_"} onValueChange={(v) => updateConfig("defaultValue", v === "_none_" ? "" : v)}>
<SelectTrigger className="h-8 w-[160px] text-sm"><SelectValue placeholder="선택 안함" /></SelectTrigger>
<SelectContent>
<SelectItem value="_none_">선택 안함</SelectItem>
{categoryValues.map((cv) => (<SelectItem key={cv.valueCode} value={cv.valueCode}>{cv.valueLabel}</SelectItem>))}
</SelectContent>
</Select>
</div>
</div>
)}
{!loadingCategoryValues && categoryValues.length === 0 && (
<p className="text-[10px] text-amber-600">카테고리 값이 없습니다. 테이블 카테고리 관리에서 값을 추가해주세요.</p>
)}
</div>
)}
{/* ─── 테이블 참조 (entity) ─── */}
{fieldType === "entity" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">테이블 참조</span>
</div>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">참조 테이블</p>
<Select value={config.entityTable || ""} onValueChange={(v) => onChange({ ...config, entityTable: v, entityValueColumn: "", entityLabelColumn: "" })}>
<SelectTrigger className="h-8 text-sm"><SelectValue placeholder="테이블을 선택해주세요" /></SelectTrigger>
<SelectContent>
{tables.map((t) => (<SelectItem key={t.tableName} value={t.tableName}>{t.displayName || t.tableComment ? `${t.displayName || t.tableComment} (${t.tableName})` : t.tableName}</SelectItem>))}
</SelectContent>
</Select>
</div>
{loadingColumns && <div className="text-muted-foreground flex items-center gap-2 text-xs"><Loader2 className="h-3 w-3 animate-spin" />컬럼 목록 로딩 중...</div>}
{entityColumns.length > 0 && (
<div className="space-y-3">
<div>
<p className="mb-1.5 text-xs text-muted-foreground">실제 저장되는 값</p>
<Select value={config.entityValueColumn || ""} onValueChange={(v) => updateConfig("entityValueColumn", v)}>
<SelectTrigger className="h-8 text-sm"><SelectValue placeholder="컬럼 선택" /></SelectTrigger>
<SelectContent>{entityColumns.map((col) => (<SelectItem key={col.columnName} value={col.columnName}>{col.columnLabel}</SelectItem>))}</SelectContent>
</Select>
</div>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">사용자에게 보여지는 텍스트</p>
<Select value={config.entityLabelColumn || ""} onValueChange={(v) => updateConfig("entityLabelColumn", v)}>
<SelectTrigger className="h-8 text-sm"><SelectValue placeholder="컬럼 선택" /></SelectTrigger>
<SelectContent>{entityColumns.map((col) => (<SelectItem key={col.columnName} value={col.columnName}>{col.columnLabel}</SelectItem>))}</SelectContent>
</Select>
</div>
<p className="text-[11px] text-muted-foreground">엔티티 선택 시 같은 폼의 관련 필드가 자동으로 채워져요</p>
</div>
)}
{config.entityTable && !loadingColumns && entityColumns.length === 0 && (
<p className="text-[10px] text-amber-600">선택한 테이블의 컬럼 정보를 불러올 수 없어요.</p>
)}
</div>
)}
{/* ─── 채번 (테이블 기반) ─── */}
{fieldType === "numbering" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<ListOrdered className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">채번 규칙</span>
</div>
{numberingTableName ? (
<div className="rounded-md border bg-background p-2">
<p className="text-xs text-muted-foreground">대상 테이블</p>
<p className="text-sm font-medium mt-0.5">{numberingTableName}</p>
</div>
) : (
<p className="text-xs text-amber-600">화면에 연결된 테이블이 없어서 채번 규칙을 불러올 수 없어요.</p>
)}
{numberingTableName && (
<div>
<p className="mb-1.5 text-xs text-muted-foreground">채번 규칙</p>
{loadingRules ? (
<div className="text-muted-foreground flex items-center gap-2 text-xs py-1"><Loader2 className="h-3 w-3 animate-spin" />채번 규칙 로딩 중...</div>
) : numberingRules.length > 0 ? (
<Select value={config.autoGeneration?.numberingRuleId || ""} onValueChange={(v) => {
onChange({ ...config, autoGeneration: { ...config.autoGeneration, type: "numbering_rule" as AutoGenerationType, numberingRuleId: v, tableName: numberingTableName } });
}}>
<SelectTrigger className="h-8 text-sm"><SelectValue placeholder="채번 규칙 선택" /></SelectTrigger>
<SelectContent>
{numberingRules.map((rule) => (<SelectItem key={rule.ruleId} value={String(rule.ruleId)}>{rule.ruleName} ({rule.separator || "-"}{"{번호}"})</SelectItem>))}
</SelectContent>
</Select>
) : (
<p className="text-xs text-muted-foreground">이 테이블에 등록된 채번 규칙이 없어요</p>
)}
</div>
)}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">읽기전용</p>
<p className="text-[11px] text-muted-foreground">채번 필드는 자동 생성되므로 읽기전용을 권장해요</p>
</div>
<Switch checked={config.readonly !== false} onCheckedChange={(checked) => updateConfig("readonly", checked)} />
</div>
</div>
)}
{/* ─── 데이터 필터 (선택형 + 테이블 있을 때만) ─── */}
{isSelectGroup && fieldType !== "select" && filterTargetTable && (
<div className="rounded-lg border bg-muted/30 p-4">
<FilterConditionsSection
filters={(config.filters as V2SelectFilter[]) || []}
columns={filterColumns}
loadingColumns={loadingFilterColumns}
targetTable={filterTargetTable}
onFiltersChange={(filters) => updateConfig("filters", filters)}
/>
</div>
)}
{/* ═══ 3단계: 고급 설정 ═══ */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", advancedOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 선택형: 선택 방식, 복수 선택, 검색 등 */}
{isSelectGroup && (
<>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">선택 방식</p>
<Select value={config.mode || "dropdown"} onValueChange={(v) => updateConfig("mode", v)}>
<SelectTrigger className="h-8 text-sm"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="dropdown">드롭다운</SelectItem>
<SelectItem value="combobox">검색 가능 드롭다운</SelectItem>
<SelectItem value="radio">라디오 버튼</SelectItem>
<SelectItem value="check">체크박스</SelectItem>
<Separator className="my-1" />
<SelectItem value="tag">태그 선택</SelectItem>
<SelectItem value="toggle">토글</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between py-1">
<div><p className="text-sm">여러 개 선택</p><p className="text-[11px] text-muted-foreground">한 번에 여러 값을 선택할 수 있어요</p></div>
<Switch checked={config.multiple || false} onCheckedChange={(v) => updateConfig("multiple", v)} />
</div>
{config.multiple && (
<div className="ml-4 border-l-2 border-primary/20 pl-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">최대 선택 개수</span>
<Input type="number" value={config.maxSelect ?? ""} onChange={(e) => updateConfig("maxSelect", e.target.value ? Number(e.target.value) : undefined)} placeholder="제한 없음" min={1} className="h-7 w-[100px] text-xs" />
</div>
</div>
)}
<div className="flex items-center justify-between py-1">
<div><p className="text-sm">검색 기능</p><p className="text-[11px] text-muted-foreground">옵션이 많을 때 검색으로 찾을 수 있어요</p></div>
<Switch checked={config.searchable || false} onCheckedChange={(v) => updateConfig("searchable", v)} />
</div>
<div className="flex items-center justify-between py-1">
<div><p className="text-sm">선택 초기화</p><p className="text-[11px] text-muted-foreground">선택한 값을 지울 수 있는 X 버튼이 표시돼요</p></div>
<Switch checked={config.allowClear !== false} onCheckedChange={(v) => updateConfig("allowClear", v)} />
</div>
</div>
</>
)}
{/* 입력형: 자동 생성 */}
{!isSelectGroup && fieldType !== "numbering" && (
<div className="space-y-3">
<div className="flex items-center justify-between py-1">
<div><p className="text-sm">자동 생성</p><p className="text-[11px] text-muted-foreground">값이 자동으로 채워져요</p></div>
<Switch checked={config.autoGeneration?.enabled || false} onCheckedChange={(checked) => updateConfig("autoGeneration", { ...config.autoGeneration || { type: "none", enabled: false }, enabled: checked })} />
</div>
{config.autoGeneration?.enabled && (
<div className="ml-1 border-l-2 border-primary/20 pl-3">
<div>
<p className="mb-1.5 text-xs text-muted-foreground">생성 방식</p>
<Select value={config.autoGeneration?.type || "none"} onValueChange={(v: AutoGenerationType) => updateConfig("autoGeneration", { ...config.autoGeneration, type: v })}>
<SelectTrigger className="h-8 text-sm"><SelectValue placeholder="자동생성 타입 선택" /></SelectTrigger>
<SelectContent>
<SelectItem value="none">자동생성 없음</SelectItem>
<SelectItem value="uuid">UUID 생성</SelectItem>
<SelectItem value="current_user">현재 사용자 ID</SelectItem>
<SelectItem value="current_time">현재 시간</SelectItem>
<SelectItem value="sequence">순차 번호</SelectItem>
<SelectItem value="company_code">회사 코드</SelectItem>
<SelectItem value="department">부서 코드</SelectItem>
</SelectContent>
</Select>
</div>
{config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
<p className="text-[11px] text-muted-foreground mt-1">{AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}</p>
)}
</div>
)}
{/* 입력 마스크 */}
<div className="flex items-center justify-between py-1">
<div>
<span className="text-xs text-muted-foreground">입력 마스크</span>
<p className="text-[10px] text-muted-foreground mt-0.5"># = 숫자, A = 문자, * = 모두</p>
</div>
<Input value={config.mask || ""} onChange={(e) => updateConfig("mask", e.target.value)} placeholder="###-####-####" className="h-7 w-[140px] text-xs" />
</div>
</div>
)}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2FieldConfigPanel.displayName = "V2FieldConfigPanel";
export default V2FieldConfigPanel;

371
frontend/components/v2/config-panels/V2FileUploadConfigPanel.tsx Normal file
View File

@ -0,0 +1,371 @@
"use client";
/**
* V2FileUpload 설정 패널
* 토스식 단계별 UX: 파일 형식(카드선택) -> 제한 설정 -> 동작/표시(Switch) -> 고급 설정(접힘)
*/
import React, { useState, useMemo, useCallback } from "react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
Settings,
ChevronDown,
FileText,
Image,
Archive,
File,
FileImage,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { FileUploadConfig } from "@/lib/registry/components/v2-file-upload/types";
import { V2FileUploadDefaultConfig } from "@/lib/registry/components/v2-file-upload/config";
const FILE_TYPE_CARDS = [
{ value: "*/*", label: "모든 파일", icon: File, desc: "제한 없음" },
{ value: "image/*", label: "이미지", icon: Image, desc: "JPG, PNG 등" },
{ value: ".pdf,.doc,.docx,.xls,.xlsx", label: "문서", icon: FileText, desc: "PDF, Word, Excel" },
{ value: "image/*,.pdf", label: "이미지+PDF", icon: FileImage, desc: "이미지와 PDF" },
{ value: ".zip,.rar,.7z", label: "압축 파일", icon: Archive, desc: "ZIP, RAR 등" },
] as const;
const VARIANT_CARDS = [
{ value: "default", label: "기본", desc: "기본 스타일" },
{ value: "outlined", label: "테두리", desc: "테두리 강조" },
{ value: "filled", label: "채움", desc: "배경 채움" },
] as const;
const SIZE_CARDS = [
{ value: "sm", label: "작게" },
{ value: "md", label: "보통" },
{ value: "lg", label: "크게" },
] as const;
interface V2FileUploadConfigPanelProps {
config: FileUploadConfig;
onChange: (config: Partial<FileUploadConfig>) => void;
screenTableName?: string;
}
export const V2FileUploadConfigPanel: React.FC<V2FileUploadConfigPanelProps> = ({
config: propConfig,
onChange,
screenTableName,
}) => {
const [advancedOpen, setAdvancedOpen] = useState(false);
const config = useMemo(() => ({
...V2FileUploadDefaultConfig,
...propConfig,
}), [propConfig]);
const maxSizeMB = useMemo(() => {
return (config.maxSize || 10 * 1024 * 1024) / (1024 * 1024);
}, [config.maxSize]);
const updateConfig = useCallback(<K extends keyof FileUploadConfig>(
field: K,
value: FileUploadConfig[K]
) => {
const newConfig = { ...config, [field]: value };
onChange({ [field]: value });
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
}, [config, onChange]);
const handleMaxSizeChange = useCallback((value: string) => {
const mb = parseFloat(value) || 10;
updateConfig("maxSize", mb * 1024 * 1024);
}, [updateConfig]);
return (
<div className="space-y-4">
{/* ─── 1단계: 허용 파일 형식 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">허용 파일 형식</p>
<div className="grid grid-cols-2 gap-2">
{FILE_TYPE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = (config.accept || "*/*") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("accept", card.value)}
className={cn(
"flex items-center gap-2 rounded-lg border p-2.5 text-left transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
<div className="min-w-0">
<span className="text-xs font-medium block">{card.label}</span>
<span className="text-[10px] text-muted-foreground block">
{card.desc}
</span>
</div>
</button>
);
})}
</div>
<p className="text-[11px] text-muted-foreground">업로드 가능한 파일 유형을 선택해요</p>
</div>
{/* ─── 2단계: 파일 제한 설정 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">파일 제한</p>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">안내 텍스트</span>
<Input
value={config.placeholder || ""}
onChange={(e) => updateConfig("placeholder", e.target.value)}
placeholder="파일을 선택하세요"
className="h-7 w-[160px] text-xs"
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<span className="text-xs text-muted-foreground">최대 크기 (MB)</span>
<Input
type="number"
min={1}
max={100}
value={maxSizeMB}
onChange={(e) => handleMaxSizeChange(e.target.value)}
className="mt-1 h-7 text-xs"
/>
</div>
<div>
<span className="text-xs text-muted-foreground">최대 파일 수</span>
<Input
type="number"
min={1}
max={50}
value={config.maxFiles || 10}
onChange={(e) => updateConfig("maxFiles", parseInt(e.target.value) || 10)}
className="mt-1 h-7 text-xs"
/>
</div>
</div>
</div>
</div>
{/* ─── 3단계: 동작 설정 (Switch) ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">동작 설정</p>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">다중 파일 선택</p>
<p className="text-[11px] text-muted-foreground">여러 파일을 한 번에 선택할 수 있어요</p>
</div>
<Switch
checked={config.multiple !== false}
onCheckedChange={(checked) => updateConfig("multiple", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">파일 삭제 허용</p>
<p className="text-[11px] text-muted-foreground">업로드된 파일을 삭제할 수 있어요</p>
</div>
<Switch
checked={config.allowDelete !== false}
onCheckedChange={(checked) => updateConfig("allowDelete", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">파일 다운로드 허용</p>
<p className="text-[11px] text-muted-foreground">업로드된 파일을 다운로드할 수 있어요</p>
</div>
<Switch
checked={config.allowDownload !== false}
onCheckedChange={(checked) => updateConfig("allowDownload", checked)}
/>
</div>
</div>
</div>
{/* ─── 4단계: 표시 설정 (Switch) ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">표시 설정</p>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">미리보기 표시</p>
<p className="text-[11px] text-muted-foreground">이미지 파일의 미리보기를 보여줘요</p>
</div>
<Switch
checked={config.showPreview !== false}
onCheckedChange={(checked) => updateConfig("showPreview", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">파일 목록 표시</p>
<p className="text-[11px] text-muted-foreground">업로드된 파일의 목록을 보여줘요</p>
</div>
<Switch
checked={config.showFileList !== false}
onCheckedChange={(checked) => updateConfig("showFileList", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">파일 크기 표시</p>
<p className="text-[11px] text-muted-foreground">각 파일의 크기를 함께 보여줘요</p>
</div>
<Switch
checked={config.showFileSize !== false}
onCheckedChange={(checked) => updateConfig("showFileSize", checked)}
/>
</div>
</div>
</div>
{/* ─── 5단계: 스타일 카드 선택 ─── */}
<div className="space-y-3">
<p className="text-sm font-medium">스타일</p>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div>
<span className="text-xs text-muted-foreground">스타일 변형</span>
<div className="mt-1.5 grid grid-cols-3 gap-2">
{VARIANT_CARDS.map((card) => {
const isSelected = (config.variant || "default") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("variant", card.value as "default" | "outlined" | "filled")}
className={cn(
"flex flex-col items-center rounded-md border p-2 text-center transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span className="text-xs font-medium">{card.label}</span>
<span className="text-[10px] text-muted-foreground">{card.desc}</span>
</button>
);
})}
</div>
</div>
<div>
<span className="text-xs text-muted-foreground">크기</span>
<div className="mt-1.5 grid grid-cols-3 gap-2">
{SIZE_CARDS.map((card) => {
const isSelected = (config.size || "md") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("size", card.value as "sm" | "md" | "lg")}
className={cn(
"flex items-center justify-center rounded-md border p-2 text-center transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span className="text-xs font-medium">{card.label}</span>
</button>
);
})}
</div>
</div>
</div>
</div>
{/* ─── 6단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 도움말 */}
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">도움말</span>
<Input
value={config.helperText || ""}
onChange={(e) => updateConfig("helperText", e.target.value)}
placeholder="안내 문구 입력"
className="h-7 w-[160px] text-xs"
/>
</div>
{/* 필수 입력 */}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">필수 입력</p>
<p className="text-[11px] text-muted-foreground">파일 첨부를 필수로 해요</p>
</div>
<Switch
checked={config.required || false}
onCheckedChange={(checked) => updateConfig("required", checked)}
/>
</div>
{/* 읽기 전용 */}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">읽기 전용</p>
<p className="text-[11px] text-muted-foreground">파일 목록만 볼 수 있어요</p>
</div>
<Switch
checked={config.readonly || false}
onCheckedChange={(checked) => updateConfig("readonly", checked)}
/>
</div>
{/* 비활성화 */}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">비활성화</p>
<p className="text-[11px] text-muted-foreground">컴포넌트를 비활성화해요</p>
</div>
<Switch
checked={config.disabled || false}
onCheckedChange={(checked) => updateConfig("disabled", checked)}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2FileUploadConfigPanel.displayName = "V2FileUploadConfigPanel";
export default V2FileUploadConfigPanel;

413
frontend/components/v2/config-panels/V2GroupConfigPanel.tsx
View File

@ -2,17 +2,78 @@
/**
* V2Group 설정 패널
* 통합 그룹 컴포넌트의 세부 설정을 관리합니다.
* 토스식 단계별 UX: 그룹 타입 카드 선택 -> 타입별 설정 -> 고급 설정(접힘)
*/
import React from "react";
import { Label } from "@/components/ui/label";
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Plus, Trash2 } from "lucide-react";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
LayoutList,
Rows3,
ChevronsDownUp,
SquareStack,
AppWindow,
FileInput,
Settings,
ChevronDown,
Plus,
Trash2,
} from "lucide-react";
import { cn } from "@/lib/utils";
// ─── 그룹 타입 카드 정의 ───
const GROUP_TYPE_CARDS = [
{
value: "section",
icon: LayoutList,
title: "섹션",
description: "기본 영역 구분이에요",
},
{
value: "tabs",
icon: Rows3,
title: "탭",
description: "탭으로 내용을 나눠요",
},
{
value: "accordion",
icon: ChevronsDownUp,
title: "아코디언",
description: "접었다 펼 수 있어요",
},
{
value: "card",
icon: SquareStack,
title: "카드 섹션",
description: "카드 형태로 묶어요",
},
{
value: "modal",
icon: AppWindow,
title: "모달",
description: "팝업으로 표시해요",
},
{
value: "form-modal",
icon: FileInput,
title: "폼 모달",
description: "입력 폼 팝업이에요",
},
] as const;
interface V2GroupConfigPanelProps {
config: Record<string, any>;
@ -23,12 +84,17 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
config,
onChange,
}) => {
// 설정 업데이트 핸들러
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
// 탭 관리
const currentGroupType = config.groupType || config.type || "section";
const isSectionType = currentGroupType === "section" || currentGroupType === "accordion";
const isModalType = currentGroupType === "modal" || currentGroupType === "form-modal";
const isTabsType = currentGroupType === "tabs";
const tabs = config.tabs || [];
const addTab = () => {
@ -49,168 +115,241 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
return (
<div className="space-y-4">
{/* 그룹 타입 */}
{/* ─── 1단계: 그룹 타입 선택 (카드) ─── */}
<div className="space-y-2">
<Label className="text-xs font-medium">그룹 타입</Label>
<Select
value={config.groupType || config.type || "section"}
onValueChange={(value) => updateConfig("groupType", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="타입 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="section">섹션</SelectItem>
<SelectItem value="tabs">탭</SelectItem>
<SelectItem value="accordion">아코디언</SelectItem>
<SelectItem value="card">카드 섹션</SelectItem>
<SelectItem value="modal">모달</SelectItem>
<SelectItem value="form-modal">폼 모달</SelectItem>
</SelectContent>
</Select>
<p className="text-sm font-medium">어떤 방식으로 영역을 구성하나요?</p>
<div className="grid grid-cols-3 gap-2">
{GROUP_TYPE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = currentGroupType === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("groupType", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50",
)}
>
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">
{card.title}
</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
{card.description}
</span>
</button>
);
})}
</div>
</div>
<Separator />
{/* ─── 2단계: 기본 설정 ─── */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<span className="text-sm font-medium">기본 설정</span>
{/* 제목 */}
<div className="space-y-2">
<Label className="text-xs font-medium">제목</Label>
<Input
value={config.title || ""}
onChange={(e) => updateConfig("title", e.target.value)}
placeholder="그룹 제목"
className="h-8 text-xs"
/>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">제목</span>
<Input
value={config.title || ""}
onChange={(e) => updateConfig("title", e.target.value)}
placeholder="그룹 제목"
className="h-8 w-[180px] text-sm"
/>
</div>
</div>
{/* 탭 설정 */}
{config.groupType === "tabs" && (
<div className="space-y-2">
{/* ─── 3단계: 타입별 설정 ─── */}
{/* 탭 타입: 탭 목록 관리 */}
{isTabsType && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between">
<Label className="text-xs font-medium">탭 목록</Label>
<div className="flex items-center gap-2">
<Rows3 className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">탭 목록</span>
</div>
<Button
type="button"
variant="ghost"
variant="outline"
size="sm"
onClick={addTab}
className="h-6 px-2 text-xs"
className="h-7 px-2 text-xs"
>
<Plus className="h-3 w-3 mr-1" />
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
<div className="space-y-2 max-h-40 overflow-y-auto">
{tabs.map((tab: any, index: number) => (
<div key={index} className="flex items-center gap-2">
<Input
value={tab.id || ""}
onChange={(e) => updateTab(index, "id", e.target.value)}
placeholder="ID"
className="h-7 text-xs flex-1"
/>
<Input
value={tab.label || ""}
onChange={(e) => updateTab(index, "label", e.target.value)}
placeholder="라벨"
className="h-7 text-xs flex-1"
/>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeTab(index)}
className="h-7 w-7 p-0 text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
))}
{tabs.length === 0 && (
<p className="text-xs text-muted-foreground text-center py-2">
탭을 추가해주세요
</p>
)}
</div>
</div>
)}
{/* 섹션/아코디언 옵션 */}
{(config.groupType === "section" || config.groupType === "accordion" || !config.groupType) && (
<div className="space-y-3">
<div className="flex items-center space-x-2">
<Checkbox
id="collapsible"
checked={config.collapsible || false}
onCheckedChange={(checked) => updateConfig("collapsible", checked)}
/>
<label htmlFor="collapsible" className="text-xs">접기/펴기 가능</label>
</div>
{config.collapsible && (
<div className="flex items-center space-x-2">
<Checkbox
id="defaultOpen"
checked={config.defaultOpen !== false}
onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
/>
<label htmlFor="defaultOpen" className="text-xs">기본으로 펼침</label>
{tabs.length > 0 ? (
<div className="max-h-40 space-y-1.5 overflow-y-auto">
{tabs.map((tab: any, index: number) => (
<div key={index} className="flex items-center gap-1.5">
<Input
value={tab.id || ""}
onChange={(e) => updateTab(index, "id", e.target.value)}
placeholder="ID"
className="h-8 flex-1 text-sm"
/>
<Input
value={tab.label || ""}
onChange={(e) => updateTab(index, "label", e.target.value)}
placeholder="라벨"
className="h-8 flex-1 text-sm"
/>
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => removeTab(index)}
className="text-destructive h-8 w-8 shrink-0"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
))}
</div>
) : (
<div className="text-center py-6 text-muted-foreground">
<Rows3 className="mx-auto mb-2 h-8 w-8 opacity-30" />
<p className="text-sm">아직 탭이 없어요</p>
<p className="text-xs mt-0.5">위의 추가 버튼으로 탭을 만들어보세요</p>
</div>
)}
</div>
)}
{/* 모달 옵션 */}
{(config.groupType === "modal" || config.groupType === "form-modal") && (
<div className="space-y-3">
<div className="space-y-2">
<Label className="text-xs font-medium">모달 크기</Label>
<Select
value={config.modalSize || "md"}
onValueChange={(value) => updateConfig("modalSize", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="sm">작게 (400px)</SelectItem>
<SelectItem value="md">보통 (600px)</SelectItem>
<SelectItem value="lg">크게 (800px)</SelectItem>
<SelectItem value="xl">매우 크게 (1000px)</SelectItem>
<SelectItem value="full">전체 화면</SelectItem>
</SelectContent>
</Select>
{/* 섹션/아코디언 타입: 접기/펴기 옵션 */}
{isSectionType && (
<div className="space-y-2">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">접기/펴기</p>
<p className="text-[11px] text-muted-foreground">
사용자가 섹션을 접었다 펼 수 있어요
</p>
</div>
<Switch
checked={config.collapsible || false}
onCheckedChange={(checked) => updateConfig("collapsible", checked)}
/>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="closeable"
{config.collapsible && (
<div className="ml-4 border-l-2 border-primary/20 pl-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">기본으로 펼침</p>
<p className="text-[11px] text-muted-foreground">
처음에 펼쳐진 상태로 보여줘요
</p>
</div>
<Switch
checked={config.defaultOpen !== false}
onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
/>
</div>
</div>
)}
</div>
)}
{/* 모달/폼모달 타입: 모달 옵션 */}
{isModalType && (
<div className="space-y-3">
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<AppWindow className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">모달 설정</span>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">모달 크기</span>
<Select
value={config.modalSize || "md"}
onValueChange={(value) => updateConfig("modalSize", value)}
>
<SelectTrigger className="h-8 w-[180px] text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="sm">작게 (400px)</SelectItem>
<SelectItem value="md">보통 (600px)</SelectItem>
<SelectItem value="lg">크게 (800px)</SelectItem>
<SelectItem value="xl">매우 크게 (1000px)</SelectItem>
<SelectItem value="full">전체 화면</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">닫기 버튼</p>
<p className="text-[11px] text-muted-foreground">
모달 우측 상단에 X 버튼이 표시돼요
</p>
</div>
<Switch
checked={config.closeable !== false}
onCheckedChange={(checked) => updateConfig("closeable", checked)}
/>
<label htmlFor="closeable" className="text-xs">닫기 버튼 표시</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="backdrop"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">배경 클릭 닫기</p>
<p className="text-[11px] text-muted-foreground">
모달 바깥을 클릭하면 닫혀요
</p>
</div>
<Switch
checked={config.backdrop !== false}
onCheckedChange={(checked) => updateConfig("backdrop", checked)}
/>
<label htmlFor="backdrop" className="text-xs">배경 클릭으로 닫기</label>
</div>
</div>
)}
{/* 헤더 표시 여부 */}
<Separator />
<div className="flex items-center space-x-2">
<Checkbox
id="showHeader"
checked={config.showHeader !== false}
onCheckedChange={(checked) => updateConfig("showHeader", checked)}
/>
<label htmlFor="showHeader" className="text-xs">헤더 표시</label>
</div>
{/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">헤더 표시</p>
<p className="text-[11px] text-muted-foreground">
그룹 상단에 제목 영역이 표시돼요
</p>
</div>
<Switch
checked={config.showHeader !== false}
onCheckedChange={(checked) => updateConfig("showHeader", checked)}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
@ -218,5 +357,3 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
V2GroupConfigPanel.displayName = "V2GroupConfigPanel";
export default V2GroupConfigPanel;

665
frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx
View File

@ -2,15 +2,28 @@
/**
* V2Hierarchy 설정 패널
* 통합 계층 컴포넌트의 세부 설정을 관리합니다.
* 토스식 단계별 UX: 계층 타입 카드 선택 -> 데이터 소스 설정 -> 고급 설정(접힘)
*/
import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import {
GitFork,
Building2,
Layers,
ListTree,
Database,
FileJson,
Globe,
Settings,
ChevronDown,
Loader2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { tableTypeApi } from "@/lib/api/screen";
interface V2HierarchyConfigPanelProps {
@ -28,24 +41,33 @@ interface ColumnOption {
displayName: string;
}
const HIERARCHY_TYPE_CARDS = [
{ value: "tree", icon: GitFork, title: "트리", description: "계층 구조를 표시해요" },
{ value: "org-chart", icon: Building2, title: "조직도", description: "조직 구조를 보여줘요" },
{ value: "bom", icon: Layers, title: "BOM", description: "부품 구성을 관리해요" },
{ value: "cascading", icon: ListTree, title: "연쇄 선택", description: "단계별로 선택해요" },
] as const;
const DATA_SOURCE_CARDS = [
{ value: "static", icon: FileJson, title: "정적 데이터", description: "직접 입력해요" },
{ value: "db", icon: Database, title: "데이터베이스", description: "테이블에서 가져와요" },
{ value: "api", icon: Globe, title: "API", description: "외부 API로 조회해요" },
] as const;
export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
config,
onChange,
}) => {
// 테이블 목록
const [tables, setTables] = useState<TableOption[]>([]);
const [loadingTables, setLoadingTables] = useState(false);
// 컬럼 목록
const [columns, setColumns] = useState<ColumnOption[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
const [advancedOpen, setAdvancedOpen] = useState(false);
// 설정 업데이트 핸들러
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
// 테이블 목록 로드
useEffect(() => {
const loadTables = async () => {
setLoadingTables(true);
@ -64,14 +86,9 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
loadTables();
}, []);
// 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.tableName) {
setColumns([]);
return;
}
if (!config.tableName) { setColumns([]); return; }
setLoadingColumns(true);
try {
const data = await tableTypeApi.getColumns(config.tableName);
@ -88,37 +105,47 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
loadColumns();
}, [config.tableName]);
const hierarchyType = config.hierarchyType || config.type || "tree";
const dataSource = config.dataSource || "static";
return (
<div className="space-y-4">
{/* 계층 타입 */}
{/* ─── 1단계: 계층 타입 선택 (카드) ─── */}
<div className="space-y-2">
<Label className="text-xs font-medium">계층 타입</Label>
<Select
value={config.hierarchyType || config.type || "tree"}
onValueChange={(value) => updateConfig("hierarchyType", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="타입 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="tree">트리</SelectItem>
<SelectItem value="org-chart">조직도</SelectItem>
<SelectItem value="bom">BOM (Bill of Materials)</SelectItem>
<SelectItem value="cascading">연쇄 선택박스</SelectItem>
</SelectContent>
</Select>
<p className="text-sm font-medium">어떤 계층 구조를 사용하나요?</p>
<div className="grid grid-cols-2 gap-2">
{HIERARCHY_TYPE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = hierarchyType === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("hierarchyType", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">{card.title}</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
</button>
);
})}
</div>
</div>
<Separator />
{/* 뷰 모드 */}
<div className="space-y-2">
<Label className="text-xs font-medium">표시 방식</Label>
{/* ─── 2단계: 표시 방식 ─── */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<span className="text-sm font-medium">표시 방식</span>
<Select
value={config.viewMode || "tree"}
onValueChange={(value) => updateConfig("viewMode", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="방식 선택" />
</SelectTrigger>
<SelectContent>
@ -128,279 +155,345 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
<SelectItem value="cascading">연쇄 드롭다운</SelectItem>
</SelectContent>
</Select>
<p className="text-[11px] text-muted-foreground">데이터를 어떤 형태로 보여줄지 선택해요</p>
</div>
<Separator />
{/* 데이터 소스 */}
{/* ─── 3단계: 데이터 소스 선택 (카드) ─── */}
<div className="space-y-2">
<Label className="text-xs font-medium">데이터 소스</Label>
<Select
value={config.dataSource || "static"}
onValueChange={(value) => updateConfig("dataSource", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="소스 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="static">정적 데이터</SelectItem>
<SelectItem value="db">데이터베이스</SelectItem>
<SelectItem value="api">API</SelectItem>
</SelectContent>
</Select>
<p className="text-sm font-medium">데이터는 어디서 가져오나요?</p>
<div className="grid grid-cols-3 gap-2">
{DATA_SOURCE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = dataSource === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("dataSource", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">{card.title}</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
</button>
);
})}
</div>
</div>
{/* DB 설정 */}
{config.dataSource === "db" && (
<div className="space-y-3">
{/* 테이블 선택 */}
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">테이블</Label>
{/* ─── DB 소스 설정 ─── */}
{dataSource === "db" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">테이블 설정</span>
</div>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">데이터 테이블</p>
{loadingTables ? (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" />
테이블 로딩 중...
</div>
) : (
<Select
value={config.tableName || ""}
onValueChange={(value) => {
updateConfig("tableName", value);
updateConfig("idColumn", "");
updateConfig("parentIdColumn", "");
updateConfig("labelColumn", "");
}}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="테이블 선택" />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
{config.tableName && (
<>
{loadingColumns ? (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" />
컬럼 로딩 중...
</div>
) : (
<>
<div className="space-y-2">
<p className="text-xs text-muted-foreground">컬럼 매핑</p>
<div className="flex gap-2">
<div className="flex-1">
<Label className="text-[10px] text-muted-foreground">ID 컬럼</Label>
<Select
value={config.idColumn || ""}
onValueChange={(value) => updateConfig("idColumn", value)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex-1">
<Label className="text-[10px] text-muted-foreground">부모 ID 컬럼</Label>
<Select
value={config.parentIdColumn || ""}
onValueChange={(value) => updateConfig("parentIdColumn", value)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</div>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">표시 컬럼</p>
<Select
value={config.labelColumn || ""}
onValueChange={(value) => updateConfig("labelColumn", value)}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="표시할 컬럼 선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</>
)}
</>
)}
</div>
)}
{/* ─── API 소스 설정 ─── */}
{dataSource === "api" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Globe className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">API 설정</span>
</div>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">엔드포인트 URL</p>
<Input
value={config.apiEndpoint || ""}
onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
placeholder="/api/hierarchy"
className="h-8 text-sm"
/>
</div>
</div>
)}
{/* ─── BOM 전용 설정 ─── */}
{hierarchyType === "bom" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Layers className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">BOM 설정</span>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">수량 표시</p>
<p className="text-[11px] text-muted-foreground">부품별 수량이 표시돼요</p>
</div>
<Switch
checked={config.showQuantity !== false}
onCheckedChange={(checked) => updateConfig("showQuantity", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">수량 컬럼</span>
<Select
value={config.tableName || ""}
onValueChange={(value) => {
updateConfig("tableName", value);
// 테이블 변경 시 컬럼 초기화
updateConfig("idColumn", "");
updateConfig("parentIdColumn", "");
updateConfig("labelColumn", "");
}}
disabled={loadingTables}
value={config.quantityColumn || ""}
onValueChange={(value) => updateConfig("quantityColumn", value)}
disabled={loadingColumns || !config.tableName}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
<SelectTrigger className="h-7 w-[160px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
)}
{/* ─── Cascading 전용 설정 ─── */}
{hierarchyType === "cascading" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<ListTree className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">연쇄 선택 설정</span>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">부모 필드</span>
<Select
value={config.parentField || ""}
onValueChange={(value) => updateConfig("parentField", value)}
disabled={loadingColumns || !config.tableName}
>
<SelectTrigger className="h-7 w-[160px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 컬럼 선택 */}
{config.tableName && (
<>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">ID 컬럼</Label>
<Select
value={config.idColumn || ""}
onValueChange={(value) => updateConfig("idColumn", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">부모 ID 컬럼</Label>
<Select
value={config.parentIdColumn || ""}
onValueChange={(value) => updateConfig("parentIdColumn", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">표시 컬럼</Label>
<Select
value={config.labelColumn || ""}
onValueChange={(value) => updateConfig("labelColumn", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</>
)}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">부모 변경 시 초기화</p>
<p className="text-[11px] text-muted-foreground">상위 항목이 바뀌면 하위 선택이 초기화돼요</p>
</div>
<Switch
checked={config.clearOnParentChange !== false}
onCheckedChange={(checked) => updateConfig("clearOnParentChange", checked)}
/>
</div>
</div>
)}
{/* API 설정 */}
{config.dataSource === "api" && (
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">API 엔드포인트</Label>
<Input
value={config.apiEndpoint || ""}
onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
placeholder="/api/hierarchy"
className="h-8 text-xs"
/>
</div>
)}
<Separator />
{/* 옵션 */}
<div className="space-y-3">
<Label className="text-xs font-medium">옵션</Label>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">최대 레벨</Label>
<Input
type="number"
value={config.maxLevel || ""}
onChange={(e) => updateConfig("maxLevel", e.target.value ? Number(e.target.value) : undefined)}
placeholder="제한 없음"
min="1"
className="h-8 text-xs"
/>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="draggable"
checked={config.draggable || false}
onCheckedChange={(checked) => updateConfig("draggable", checked)}
/>
<label htmlFor="draggable" className="text-xs">드래그 앤 드롭</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="selectable"
checked={config.selectable !== false}
onCheckedChange={(checked) => updateConfig("selectable", checked)}
/>
<label htmlFor="selectable" className="text-xs">선택 가능</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="multiSelect"
checked={config.multiSelect || false}
onCheckedChange={(checked) => updateConfig("multiSelect", checked)}
/>
<label htmlFor="multiSelect" className="text-xs">다중 선택</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="showCheckbox"
checked={config.showCheckbox || false}
onCheckedChange={(checked) => updateConfig("showCheckbox", checked)}
/>
<label htmlFor="showCheckbox" className="text-xs">체크박스 표시</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="expandAll"
checked={config.expandAll || false}
onCheckedChange={(checked) => updateConfig("expandAll", checked)}
/>
<label htmlFor="expandAll" className="text-xs">기본 전체 펼침</label>
</div>
</div>
{/* BOM 전용 설정 */}
{config.hierarchyType === "bom" && (
<>
<Separator />
<div className="space-y-3">
<Label className="text-xs font-medium">BOM 설정</Label>
<div className="flex items-center space-x-2">
<Checkbox
id="showQuantity"
checked={config.showQuantity !== false}
onCheckedChange={(checked) => updateConfig("showQuantity", checked)}
{/* ─── 고급 설정 (Collapsible) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 최대 레벨 */}
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">최대 레벨</span>
<Input
type="number"
value={config.maxLevel || ""}
onChange={(e) => updateConfig("maxLevel", e.target.value ? Number(e.target.value) : undefined)}
placeholder="제한 없음"
min="1"
className="h-7 w-[120px] text-xs"
/>
<label htmlFor="showQuantity" className="text-xs">수량 표시</label>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">수량 컬럼</Label>
<Select
value={config.quantityColumn || ""}
onValueChange={(value) => updateConfig("quantityColumn", value)}
disabled={loadingColumns || !config.tableName}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
{/* 토글 옵션들 */}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">드래그 앤 드롭</p>
<p className="text-[11px] text-muted-foreground">항목을 끌어서 위치를 변경할 수 있어요</p>
</div>
<Switch
checked={config.draggable || false}
onCheckedChange={(checked) => updateConfig("draggable", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">선택 가능</p>
<p className="text-[11px] text-muted-foreground">항목을 클릭해서 선택할 수 있어요</p>
</div>
<Switch
checked={config.selectable !== false}
onCheckedChange={(checked) => updateConfig("selectable", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">다중 선택</p>
<p className="text-[11px] text-muted-foreground">여러 항목을 동시에 선택할 수 있어요</p>
</div>
<Switch
checked={config.multiSelect || false}
onCheckedChange={(checked) => updateConfig("multiSelect", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">체크박스 표시</p>
<p className="text-[11px] text-muted-foreground">각 항목에 체크박스가 표시돼요</p>
</div>
<Switch
checked={config.showCheckbox || false}
onCheckedChange={(checked) => updateConfig("showCheckbox", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">기본 전체 펼침</p>
<p className="text-[11px] text-muted-foreground">처음부터 모든 노드가 열려있어요</p>
</div>
<Switch
checked={config.expandAll || false}
onCheckedChange={(checked) => updateConfig("expandAll", checked)}
/>
</div>
</div>
</>
)}
{/* 연쇄 선택박스 전용 설정 */}
{config.hierarchyType === "cascading" && (
<>
<Separator />
<div className="space-y-3">
<Label className="text-xs font-medium">연쇄 설정</Label>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">부모 필드</Label>
<Select
value={config.parentField || ""}
onValueChange={(value) => updateConfig("parentField", value)}
disabled={loadingColumns || !config.tableName}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="clearOnParentChange"
checked={config.clearOnParentChange !== false}
onCheckedChange={(checked) => updateConfig("clearOnParentChange", checked)}
/>
<label htmlFor="clearOnParentChange" className="text-xs">부모 변경 시 값 초기화</label>
</div>
</div>
</>
)}
</CollapsibleContent>
</Collapsible>
</div>
);
};

1151
frontend/components/v2/config-panels/V2InputConfigPanel.tsx
View File

File diff suppressed because it is too large Load Diff

609
frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx Normal file
View File

@ -0,0 +1,609 @@
"use client";
/**
* V2 품목별 라우팅 설정 패널
*/
import React, { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Badge } from "@/components/ui/badge";
import {
Settings, ChevronDown, ChevronRight, Plus, Trash2, Check, ChevronsUpDown,
Database, Monitor, Columns, List, Filter, Eye,
} from "lucide-react";
import { cn } from "@/lib/utils";
import type { ItemRoutingConfig, ProcessColumnDef, ColumnDef, ItemFilterCondition } from "@/lib/registry/components/v2-item-routing/types";
import { defaultConfig } from "@/lib/registry/components/v2-item-routing/config";
interface V2ItemRoutingConfigPanelProps {
config: Partial<ItemRoutingConfig>;
onChange: (config: Partial<ItemRoutingConfig>) => void;
}
interface TableInfo { tableName: string; displayName?: string; }
interface ColumnInfo { columnName: string; displayName?: string; dataType?: string; }
interface ScreenInfo { screenId: number; screenName: string; screenCode: string; }
// ─── 공용: 테이블 Combobox ───
function TableCombobox({ value, onChange, tables, loading }: {
value: string; onChange: (v: string) => void; tables: TableInfo[]; loading: boolean;
}) {
const [open, setOpen] = useState(false);
const selected = tables.find((t) => t.tableName === value);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button variant="outline" role="combobox" aria-expanded={open} className="h-7 w-full justify-between text-xs" disabled={loading}>
{loading ? "로딩 중..." : selected ? selected.displayName || selected.tableName : "테이블 선택"}
<ChevronsUpDown className="ml-2 h-3 w-3 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" />
<CommandList>
<CommandEmpty className="py-4 text-center text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup className="max-h-[200px] overflow-auto">
{tables.map((t) => (
<CommandItem key={t.tableName} value={`${t.displayName || ""} ${t.tableName}`}
onSelect={() => { onChange(t.tableName); setOpen(false); }} className="text-xs">
<Check className={cn("mr-2 h-3 w-3", value === t.tableName ? "opacity-100" : "opacity-0")} />
<div className="flex flex-col">
<span className="font-medium">{t.displayName || t.tableName}</span>
{t.displayName && <span className="text-[10px] text-muted-foreground">{t.tableName}</span>}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}
// ─── 공용: 컬럼 Combobox ───
function ColumnCombobox({ value, onChange, tableName, placeholder }: {
value: string; onChange: (v: string, displayName?: string) => void; tableName: string; placeholder?: string;
}) {
const [open, setOpen] = useState(false);
const [columns, setColumns] = useState<ColumnInfo[]>([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (!tableName) { setColumns([]); return; }
const load = async () => {
setLoading(true);
try {
const { tableManagementApi } = await import("@/lib/api/tableManagement");
const res = await tableManagementApi.getColumnList(tableName);
if (res.success && res.data?.columns) setColumns(res.data.columns);
} catch { /* ignore */ } finally { setLoading(false); }
};
load();
}, [tableName]);
const selected = columns.find((c) => c.columnName === value);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button variant="outline" role="combobox" aria-expanded={open} className="h-7 w-full justify-between text-xs" disabled={loading || !tableName}>
<span className="truncate">
{loading ? "로딩..." : !tableName ? "테이블 먼저 선택" : selected ? selected.displayName || selected.columnName : placeholder || "컬럼 선택"}
</span>
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[240px] p-0" align="start">
<Command>
<CommandInput placeholder="컬럼 검색..." className="text-xs" />
<CommandList>
<CommandEmpty className="py-4 text-center text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup className="max-h-[200px] overflow-auto">
{columns.map((c) => (
<CommandItem key={c.columnName} value={`${c.displayName || ""} ${c.columnName}`}
onSelect={() => { onChange(c.columnName, c.displayName); setOpen(false); }} className="text-xs">
<Check className={cn("mr-2 h-3 w-3", value === c.columnName ? "opacity-100" : "opacity-0")} />
<div className="flex flex-col">
<span className="font-medium">{c.displayName || c.columnName}</span>
{c.displayName && <span className="text-[10px] text-muted-foreground">{c.columnName}</span>}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}
// ─── 공용: 화면 Combobox ───
function ScreenCombobox({ value, onChange }: { value?: number; onChange: (v?: number) => void; }) {
const [open, setOpen] = useState(false);
const [screens, setScreens] = useState<ScreenInfo[]>([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const load = async () => {
setLoading(true);
try {
const { screenApi } = await import("@/lib/api/screen");
const res = await screenApi.getScreens({ page: 1, size: 1000 });
if (res.data) {
setScreens(res.data.map((s: any) => ({
screenId: s.screenId, screenName: s.screenName || `화면 ${s.screenId}`, screenCode: s.screenCode || "",
})));
}
} catch { /* ignore */ } finally { setLoading(false); }
};
load();
}, []);
const selected = screens.find((s) => s.screenId === value);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button variant="outline" role="combobox" aria-expanded={open} className="h-7 w-full justify-between text-xs" disabled={loading}>
<span className="truncate">{loading ? "로딩..." : selected ? selected.screenName : "화면 선택"}</span>
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[260px] p-0" align="start">
<Command>
<CommandInput placeholder="화면 검색..." className="text-xs" />
<CommandList>
<CommandEmpty className="py-4 text-center text-xs">화면을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup className="max-h-[200px] overflow-auto">
{screens.map((s) => (
<CommandItem key={s.screenId} value={`${s.screenName} ${s.screenCode} ${s.screenId}`}
onSelect={() => { onChange(s.screenId); setOpen(false); }} className="text-xs">
<Check className={cn("mr-2 h-3 w-3", value === s.screenId ? "opacity-100" : "opacity-0")} />
<div className="flex flex-col">
<span className="font-medium">{s.screenName}</span>
<span className="text-[10px] text-muted-foreground">ID: {s.screenId}</span>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}
// ─── 컬럼 편집 카드 (품목/모달/공정 공용) ───
function ColumnEditor({ columns, onChange, tableName, title, icon }: {
columns: ColumnDef[];
onChange: (cols: ColumnDef[]) => void;
tableName: string;
title: string;
icon: React.ReactNode;
}) {
const [open, setOpen] = useState(false);
const addColumn = () => onChange([...columns, { name: "", label: "새 컬럼", width: 100, align: "left" }]);
const removeColumn = (idx: number) => onChange(columns.filter((_, i) => i !== idx));
const updateColumn = (idx: number, field: keyof ColumnDef, value: string | number) => {
const next = [...columns];
next[idx] = { ...next[idx], [field]: value };
onChange(next);
};
return (
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger asChild>
<button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
<div className="flex items-center gap-2">
{icon}
<span className="text-sm font-medium">{title}</span>
<Badge variant="secondary" className="text-[10px] h-5">{columns.length}개</Badge>
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", open && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
{columns.map((col, idx) => (
<Collapsible key={idx}>
<div className="rounded-md border">
<CollapsibleTrigger asChild>
<button type="button" className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors">
<ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
<span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
<span className="text-xs font-medium truncate flex-1 min-w-0">{col.label || col.name || "미설정"}</span>
<Badge variant="outline" className="text-[9px] h-4 shrink-0">{col.name || "?"}</Badge>
<Button type="button" variant="ghost" size="sm"
onClick={(e) => { e.stopPropagation(); removeColumn(idx); }}
className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0">
<Trash2 className="h-3 w-3" />
</Button>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="grid grid-cols-2 gap-1.5 border-t px-2.5 py-2">
<div className="space-y-0.5">
<span className="text-[10px] text-muted-foreground">컬럼</span>
<ColumnCombobox value={col.name} onChange={(v, displayName) => {
updateColumn(idx, "name", v);
if (!col.label || col.label === "새 컬럼" || col.label === col.name) updateColumn(idx, "label", displayName || v);
}} tableName={tableName} placeholder="컬럼 선택" />
</div>
<div className="space-y-0.5">
<span className="text-[10px] text-muted-foreground">표시명</span>
<Input value={col.label} onChange={(e) => updateColumn(idx, "label", e.target.value)} className="h-7 text-xs" />
</div>
<div className="space-y-0.5">
<span className="text-[10px] text-muted-foreground">너비</span>
<Input type="number" value={col.width || 100} onChange={(e) => updateColumn(idx, "width", parseInt(e.target.value) || 100)} className="h-7 text-xs" />
</div>
<div className="space-y-0.5">
<span className="text-[10px] text-muted-foreground">정렬</span>
<Select value={col.align || "left"} onValueChange={(v) => updateColumn(idx, "align", v)}>
<SelectTrigger className="h-7 text-xs"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="left">좌</SelectItem>
<SelectItem value="center">중</SelectItem>
<SelectItem value="right">우</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</CollapsibleContent>
</div>
</Collapsible>
))}
<Button variant="outline" size="sm" className="h-7 w-full gap-1 text-xs border-dashed" onClick={addColumn}>
<Plus className="h-3 w-3" /> 컬럼 추가
</Button>
</div>
</CollapsibleContent>
</Collapsible>
);
}
// ─── 메인 컴포넌트 ───
export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> = ({ config: configProp, onChange }) => {
const [tables, setTables] = useState<TableInfo[]>([]);
const [loadingTables, setLoadingTables] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const [dataSourceOpen, setDataSourceOpen] = useState(false);
const [layoutOpen, setLayoutOpen] = useState(false);
const [filterOpen, setFilterOpen] = useState(false);
const config: ItemRoutingConfig = {
...defaultConfig,
...configProp,
dataSource: { ...defaultConfig.dataSource, ...configProp?.dataSource },
modals: { ...defaultConfig.modals, ...configProp?.modals },
processColumns: configProp?.processColumns?.length ? configProp.processColumns : defaultConfig.processColumns,
itemDisplayColumns: configProp?.itemDisplayColumns?.length ? configProp.itemDisplayColumns : defaultConfig.itemDisplayColumns,
modalDisplayColumns: configProp?.modalDisplayColumns?.length ? configProp.modalDisplayColumns : defaultConfig.modalDisplayColumns,
itemFilterConditions: configProp?.itemFilterConditions || [],
};
useEffect(() => {
const loadTables = async () => {
setLoadingTables(true);
try {
const { tableManagementApi } = await import("@/lib/api/tableManagement");
const res = await tableManagementApi.getTableList();
if (res.success && res.data) {
setTables(res.data.map((t: any) => ({ tableName: t.tableName, displayName: t.displayName || t.tableName })));
}
} catch { /* ignore */ } finally { setLoadingTables(false); }
};
loadTables();
}, []);
const dispatchConfigEvent = (newConfig: Partial<ItemRoutingConfig>) => {
if (typeof window !== "undefined") {
window.dispatchEvent(new CustomEvent("componentConfigChanged", { detail: { config: { ...config, ...newConfig } } }));
}
};
const update = (partial: Partial<ItemRoutingConfig>) => {
const merged = { ...configProp, ...partial };
onChange(merged);
dispatchConfigEvent(partial);
};
const updateDataSource = (field: string, value: string) => {
const newDS = { ...config.dataSource, [field]: value };
onChange({ ...configProp, dataSource: newDS });
dispatchConfigEvent({ dataSource: newDS });
};
const updateModals = (field: string, value?: number) => {
const newM = { ...config.modals, [field]: value };
onChange({ ...configProp, modals: newM });
dispatchConfigEvent({ modals: newM });
};
// 필터 조건 관리
const filters = config.itemFilterConditions || [];
const addFilter = () => update({ itemFilterConditions: [...filters, { column: "", operator: "equals", value: "" }] });
const removeFilter = (idx: number) => update({ itemFilterConditions: filters.filter((_, i) => i !== idx) });
const updateFilter = (idx: number, field: keyof ItemFilterCondition, val: string) => {
const next = [...filters];
next[idx] = { ...next[idx], [field]: val };
update({ itemFilterConditions: next });
};
return (
<div className="space-y-4">
{/* ─── 품목 목록 모드 ─── */}
<div className="rounded-lg border p-4 space-y-3">
<div className="flex items-center gap-2">
<List className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">품목 목록 모드</span>
</div>
<p className="text-[10px] text-muted-foreground">좌측 품목 목록에 표시할 방식을 선택하세요</p>
<div className="grid grid-cols-2 gap-2">
<button type="button"
className={cn("flex flex-col items-center gap-1 rounded-md border px-3 py-2.5 text-xs transition-colors",
(config.itemListMode || "all") === "all" ? "border-primary bg-primary/5 text-primary" : "border-input hover:bg-muted/50")}
onClick={() => update({ itemListMode: "all" })}>
<span className="font-medium">전체 품목</span>
<span className="text-[10px] text-muted-foreground">모든 품목 표시</span>
</button>
<button type="button"
className={cn("flex flex-col items-center gap-1 rounded-md border px-3 py-2.5 text-xs transition-colors",
config.itemListMode === "registered" ? "border-primary bg-primary/5 text-primary" : "border-input hover:bg-muted/50")}
onClick={() => update({ itemListMode: "registered" })}>
<span className="font-medium">등록 품목만</span>
<span className="text-[10px] text-muted-foreground">선택한 품목만 표시</span>
</button>
</div>
{config.itemListMode === "registered" && (
<p className="text-[10px] text-muted-foreground pt-1">
현재 화면 ID를 기준으로 품목 목록이 자동 관리됩니다.
</p>
)}
</div>
{/* ─── 품목 표시 컬럼 ─── */}
<ColumnEditor
columns={config.itemDisplayColumns || []}
onChange={(cols) => update({ itemDisplayColumns: cols })}
tableName={config.dataSource.itemTable}
title="품목 목록 컬럼"
icon={<Eye className="h-4 w-4 text-muted-foreground" />}
/>
{/* ─── 모달 표시 컬럼 (등록 모드에서만 의미 있지만 항상 설정 가능) ─── */}
<ColumnEditor
columns={config.modalDisplayColumns || []}
onChange={(cols) => update({ modalDisplayColumns: cols })}
tableName={config.dataSource.itemTable}
title="품목 추가 모달 컬럼"
icon={<Columns className="h-4 w-4 text-muted-foreground" />}
/>
{/* ─── 품목 필터 조건 ─── */}
<Collapsible open={filterOpen} onOpenChange={setFilterOpen}>
<CollapsibleTrigger asChild>
<button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
<div className="flex items-center gap-2">
<Filter className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">품목 필터 조건</span>
{filters.length > 0 && <Badge variant="secondary" className="text-[10px] h-5">{filters.length}건</Badge>}
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", filterOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-2">
<p className="text-[10px] text-muted-foreground">품목 조회 시 자동으로 적용되는 필터 조건입니다</p>
{filters.map((f, idx) => (
<div key={idx} className="flex items-end gap-1.5 rounded-md border p-2">
<div className="flex-1 space-y-0.5">
<span className="text-[10px] text-muted-foreground">컬럼</span>
<ColumnCombobox value={f.column} onChange={(v) => updateFilter(idx, "column", v)}
tableName={config.dataSource.itemTable} placeholder="필터 컬럼" />
</div>
<div className="w-[90px] space-y-0.5">
<span className="text-[10px] text-muted-foreground">조건</span>
<Select value={f.operator} onValueChange={(v) => updateFilter(idx, "operator", v)}>
<SelectTrigger className="h-7 text-xs"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="equals">같음</SelectItem>
<SelectItem value="contains">포함</SelectItem>
<SelectItem value="not_equals">다름</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex-1 space-y-0.5">
<span className="text-[10px] text-muted-foreground">값</span>
<Input value={f.value} onChange={(e) => updateFilter(idx, "value", e.target.value)}
placeholder="필터값" className="h-7 text-xs" />
</div>
<Button type="button" variant="ghost" size="sm"
onClick={() => removeFilter(idx)}
className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive shrink-0">
<Trash2 className="h-3 w-3" />
</Button>
</div>
))}
<Button variant="outline" size="sm" className="h-7 w-full gap-1 text-xs border-dashed" onClick={addFilter}>
<Plus className="h-3 w-3" /> 필터 추가
</Button>
</div>
</CollapsibleContent>
</Collapsible>
{/* ─── 모달 연동 ─── */}
<Collapsible open={modalOpen} onOpenChange={setModalOpen}>
<CollapsibleTrigger asChild>
<button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
<div className="flex items-center gap-2">
<Monitor className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">모달 연동</span>
<Badge variant="secondary" className="text-[10px] h-5">
{[config.modals.versionAddScreenId, config.modals.processAddScreenId, config.modals.processEditScreenId].filter(Boolean).length}개
</Badge>
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", modalOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-2">
<p className="text-[10px] text-muted-foreground">버전 추가/공정 추가·수정 시 열리는 화면</p>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">버전 추가</span>
<ScreenCombobox value={config.modals.versionAddScreenId} onChange={(v) => updateModals("versionAddScreenId", v)} />
</div>
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">공정 추가</span>
<ScreenCombobox value={config.modals.processAddScreenId} onChange={(v) => updateModals("processAddScreenId", v)} />
</div>
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">공정 수정</span>
<ScreenCombobox value={config.modals.processEditScreenId} onChange={(v) => updateModals("processEditScreenId", v)} />
</div>
</div>
</div>
</CollapsibleContent>
</Collapsible>
{/* ─── 공정 테이블 컬럼 ─── */}
<ColumnEditor
columns={config.processColumns}
onChange={(cols) => update({ processColumns: cols })}
tableName={config.dataSource.routingDetailTable}
title="공정 테이블 컬럼"
icon={<Columns className="h-4 w-4 text-muted-foreground" />}
/>
{/* ─── 데이터 소스 ─── */}
<Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
<CollapsibleTrigger asChild>
<button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">데이터 소스 설정</span>
{config.dataSource.itemTable && (
<Badge variant="secondary" className="text-[10px] h-5 truncate max-w-[100px]">{config.dataSource.itemTable}</Badge>
)}
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", dataSourceOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="space-y-1">
<span className="text-xs text-muted-foreground">품목 테이블</span>
<TableCombobox value={config.dataSource.itemTable} onChange={(v) => updateDataSource("itemTable", v)} tables={tables} loading={loadingTables} />
</div>
<div className="space-y-1">
<span className="text-xs text-muted-foreground">품목명 컬럼</span>
<ColumnCombobox value={config.dataSource.itemNameColumn} onChange={(v) => updateDataSource("itemNameColumn", v)} tableName={config.dataSource.itemTable} placeholder="품목명" />
</div>
<div className="space-y-1">
<span className="text-xs text-muted-foreground">품목코드 컬럼</span>
<ColumnCombobox value={config.dataSource.itemCodeColumn} onChange={(v) => updateDataSource("itemCodeColumn", v)} tableName={config.dataSource.itemTable} placeholder="품목코드" />
</div>
<div className="space-y-1 pt-2">
<span className="text-xs text-muted-foreground">라우팅 버전 테이블</span>
<TableCombobox value={config.dataSource.routingVersionTable} onChange={(v) => updateDataSource("routingVersionTable", v)} tables={tables} loading={loadingTables} />
</div>
<div className="space-y-1">
<span className="text-xs text-muted-foreground">품목 FK 컬럼</span>
<ColumnCombobox value={config.dataSource.routingVersionFkColumn} onChange={(v) => updateDataSource("routingVersionFkColumn", v)} tableName={config.dataSource.routingVersionTable} placeholder="FK 컬럼" />
</div>
<div className="space-y-1">
<span className="text-xs text-muted-foreground">버전명 컬럼</span>
<ColumnCombobox value={config.dataSource.routingVersionNameColumn} onChange={(v) => updateDataSource("routingVersionNameColumn", v)} tableName={config.dataSource.routingVersionTable} placeholder="버전명" />
</div>
<div className="space-y-1 pt-2">
<span className="text-xs text-muted-foreground">라우팅 상세 테이블</span>
<TableCombobox value={config.dataSource.routingDetailTable} onChange={(v) => updateDataSource("routingDetailTable", v)} tables={tables} loading={loadingTables} />
</div>
<div className="space-y-1">
<span className="text-xs text-muted-foreground">버전 FK 컬럼</span>
<ColumnCombobox value={config.dataSource.routingDetailFkColumn} onChange={(v) => updateDataSource("routingDetailFkColumn", v)} tableName={config.dataSource.routingDetailTable} placeholder="FK 컬럼" />
</div>
<div className="space-y-1 pt-2">
<span className="text-xs text-muted-foreground">공정 마스터 테이블</span>
<TableCombobox value={config.dataSource.processTable} onChange={(v) => updateDataSource("processTable", v)} tables={tables} loading={loadingTables} />
</div>
<div className="space-y-1">
<span className="text-xs text-muted-foreground">공정명 컬럼</span>
<ColumnCombobox value={config.dataSource.processNameColumn} onChange={(v) => updateDataSource("processNameColumn", v)} tableName={config.dataSource.processTable} placeholder="공정명" />
</div>
<div className="space-y-1">
<span className="text-xs text-muted-foreground">공정코드 컬럼</span>
<ColumnCombobox value={config.dataSource.processCodeColumn} onChange={(v) => updateDataSource("processCodeColumn", v)} tableName={config.dataSource.processTable} placeholder="공정코드" />
</div>
</div>
</CollapsibleContent>
</Collapsible>
{/* ─── 레이아웃 & 기타 ─── */}
<Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
<CollapsibleTrigger asChild>
<button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">레이아웃 & 기타</span>
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", layoutOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<span className="text-xs text-muted-foreground">좌측 패널 비율 (%)</span>
<p className="text-[10px] text-muted-foreground mt-0.5">품목 목록 패널의 너비</p>
</div>
<Input type="number" min={20} max={60} value={config.splitRatio || 40}
onChange={(e) => update({ splitRatio: parseInt(e.target.value) || 40 })} className="h-7 w-[80px] text-xs" />
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">좌측 패널 제목</span>
<Input value={config.leftPanelTitle || ""} onChange={(e) => update({ leftPanelTitle: e.target.value })} placeholder="품목 목록" className="h-7 w-[140px] text-xs" />
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">우측 패널 제목</span>
<Input value={config.rightPanelTitle || ""} onChange={(e) => update({ rightPanelTitle: e.target.value })} placeholder="공정 순서" className="h-7 w-[140px] text-xs" />
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">버전 추가 버튼 텍스트</span>
<Input value={config.versionAddButtonText || ""} onChange={(e) => update({ versionAddButtonText: e.target.value })} placeholder="+ 라우팅 버전 추가" className="h-7 w-[140px] text-xs" />
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">공정 추가 버튼 텍스트</span>
<Input value={config.processAddButtonText || ""} onChange={(e) => update({ processAddButtonText: e.target.value })} placeholder="+ 공정 추가" className="h-7 w-[140px] text-xs" />
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">첫 번째 버전 자동 선택</p>
<p className="text-[11px] text-muted-foreground">품목 선택 시 첫 버전을 자동으로 선택해요</p>
</div>
<Switch checked={config.autoSelectFirstVersion !== false} onCheckedChange={(checked) => update({ autoSelectFirstVersion: checked })} />
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">읽기 전용</p>
<p className="text-[11px] text-muted-foreground">추가/수정/삭제 버튼을 숨겨요</p>
</div>
<Switch checked={config.readonly || false} onCheckedChange={(checked) => update({ readonly: checked })} />
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2ItemRoutingConfigPanel.displayName = "V2ItemRoutingConfigPanel";
export default V2ItemRoutingConfigPanel;

468
frontend/components/v2/config-panels/V2LayoutConfigPanel.tsx
View File

@ -2,15 +2,68 @@
/**
* V2Layout 설정 패널
* 통합 레이아웃 컴포넌트의 세부 설정을 관리합니다.
* 토스식 단계별 UX: 레이아웃 타입 카드 선택 -> 타입별 설정 -> 고급 설정(접힘)
*/
import React from "react";
import { Label } from "@/components/ui/label";
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
LayoutGrid,
PanelLeftClose,
MoveHorizontal,
Minus,
MonitorPlay,
Settings,
ChevronDown,
} from "lucide-react";
import { cn } from "@/lib/utils";
// ─── 레이아웃 타입 카드 정의 ───
const LAYOUT_TYPE_CARDS = [
{
value: "grid",
icon: LayoutGrid,
title: "그리드",
description: "행과 열로 배치해요",
},
{
value: "split",
icon: PanelLeftClose,
title: "분할 패널",
description: "영역을 나눠서 배치해요",
},
{
value: "flex",
icon: MoveHorizontal,
title: "플렉스",
description: "유연하게 배치해요",
},
{
value: "divider",
icon: Minus,
title: "구분선",
description: "영역을 구분해요",
},
{
value: "screen-embed",
icon: MonitorPlay,
title: "화면 임베드",
description: "다른 화면을 불러와요",
},
] as const;
interface V2LayoutConfigPanelProps {
config: Record<string, any>;
@ -21,166 +74,208 @@ export const V2LayoutConfigPanel: React.FC<V2LayoutConfigPanelProps> = ({
config,
onChange,
}) => {
// 설정 업데이트 핸들러
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
const currentLayoutType = config.layoutType || config.type || "grid";
const isGridType = currentLayoutType === "grid";
const isSplitType = currentLayoutType === "split";
const isFlexType = currentLayoutType === "flex";
const isScreenEmbedType = currentLayoutType === "screen-embed";
return (
<div className="space-y-4">
{/* 레이아웃 타입 */}
{/* ─── 1단계: 레이아웃 타입 선택 (카드) ─── */}
<div className="space-y-2">
<Label className="text-xs font-medium">레이아웃 타입</Label>
<Select
value={config.layoutType || config.type || "grid"}
onValueChange={(value) => updateConfig("layoutType", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="타입 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="grid">그리드</SelectItem>
<SelectItem value="split">분할 패널</SelectItem>
<SelectItem value="flex">플렉스</SelectItem>
<SelectItem value="divider">구분선</SelectItem>
<SelectItem value="screen-embed">화면 임베드</SelectItem>
</SelectContent>
</Select>
<p className="text-sm font-medium">어떤 레이아웃을 사용하나요?</p>
<div className="grid grid-cols-3 gap-2">
{LAYOUT_TYPE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = currentLayoutType === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("layoutType", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50",
)}
>
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">
{card.title}
</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
{card.description}
</span>
</button>
);
})}
</div>
</div>
<Separator />
{/* ─── 2단계: 타입별 설정 ─── */}
{/* 그리드 설정 */}
{(config.layoutType === "grid" || !config.layoutType) && (
{/* 그리드 타입 설정 */}
{isGridType && (
<div className="space-y-3">
<Label className="text-xs font-medium">그리드 설정</Label>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<LayoutGrid className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">그리드 설정</span>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="use12Column"
checked={config.use12Column !== false}
onCheckedChange={(checked) => updateConfig("use12Column", checked)}
/>
<label htmlFor="use12Column" className="text-xs">12컬럼 그리드 시스템 사용</label>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">컬럼 수</Label>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">컬럼 수</span>
<Select
value={String(config.columns || 12)}
onValueChange={(value) => updateConfig("columns", Number(value))}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-8 w-[180px] text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">1</SelectItem>
<SelectItem value="2">2</SelectItem>
<SelectItem value="3">3</SelectItem>
<SelectItem value="4">4</SelectItem>
<SelectItem value="6">6</SelectItem>
<SelectItem value="12">12</SelectItem>
<SelectItem value="1">1 컬럼</SelectItem>
<SelectItem value="2">2 컬럼</SelectItem>
<SelectItem value="3">3 컬럼</SelectItem>
<SelectItem value="4">4 컬럼</SelectItem>
<SelectItem value="6">6 컬럼</SelectItem>
<SelectItem value="12">12 컬럼</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">간격 (px)</Label>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">간격 (px)</span>
<Input
value={config.gap || "16"}
onChange={(e) => updateConfig("gap", e.target.value)}
placeholder="16"
className="h-8 text-xs"
className="h-8 w-[180px] text-sm"
/>
</div>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">12컬럼 그리드</p>
<p className="text-[11px] text-muted-foreground">
표준 12컬럼 그리드 시스템을 사용해요
</p>
</div>
<Switch
checked={config.use12Column !== false}
onCheckedChange={(checked) => updateConfig("use12Column", checked)}
/>
</div>
</div>
)}
{/* 분할 패널 설정 */}
{config.layoutType === "split" && (
{/* 분할 패널 타입 설정 */}
{isSplitType && (
<div className="space-y-3">
<Label className="text-xs font-medium">분할 설정</Label>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<PanelLeftClose className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">분할 설정</span>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">분할 방향</Label>
<Select
value={config.direction || "horizontal"}
onValueChange={(value) => updateConfig("direction", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="horizontal">가로</SelectItem>
<SelectItem value="vertical">세로</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">분할 방향</span>
<Select
value={config.direction || "horizontal"}
onValueChange={(value) => updateConfig("direction", value)}
>
<SelectTrigger className="h-8 w-[180px] text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="horizontal">가로</SelectItem>
<SelectItem value="vertical">세로</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">비율 (%)</Label>
<div className="grid grid-cols-2 gap-2">
<Input
type="number"
value={config.splitRatio?.[0] || 50}
onChange={(e) => updateConfig("splitRatio", [Number(e.target.value), 100 - Number(e.target.value)])}
placeholder="50"
min="10"
max="90"
className="h-8 text-xs"
/>
<Input
type="number"
value={config.splitRatio?.[1] || 50}
disabled
className="h-8 text-xs bg-muted"
/>
<div className="flex gap-2">
<div className="flex-1">
<span className="text-xs text-muted-foreground">비율 (%)</span>
<Input
type="number"
value={config.splitRatio?.[0] || 50}
onChange={(e) => updateConfig("splitRatio", [Number(e.target.value), 100 - Number(e.target.value)])}
placeholder="50"
min="10"
max="90"
className="mt-1 h-8 text-sm"
/>
</div>
<div className="flex-1">
<span className="text-xs text-muted-foreground">나머지</span>
<Input
type="number"
value={config.splitRatio?.[1] || 50}
disabled
className="mt-1 h-8 text-sm bg-muted"
/>
</div>
</div>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="resizable"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">크기 조절</p>
<p className="text-[11px] text-muted-foreground">
사용자가 패널 크기를 드래그해서 조절할 수 있어요
</p>
</div>
<Switch
checked={config.resizable !== false}
onCheckedChange={(checked) => updateConfig("resizable", checked)}
/>
<label htmlFor="resizable" className="text-xs">크기 조절 가능</label>
</div>
</div>
)}
{/* 플렉스 설정 */}
{config.layoutType === "flex" && (
{/* 플렉스 타입 설정 */}
{isFlexType && (
<div className="space-y-3">
<Label className="text-xs font-medium">플렉스 설정</Label>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<MoveHorizontal className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">플렉스 설정</span>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">방향</Label>
<Select
value={config.direction || "row"}
onValueChange={(value) => updateConfig("direction", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="row">가로</SelectItem>
<SelectItem value="column">세로</SelectItem>
<SelectItem value="row-reverse">가로 (역순)</SelectItem>
<SelectItem value="column-reverse">세로 (역순)</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">방향</span>
<Select
value={config.direction || "row"}
onValueChange={(value) => updateConfig("direction", value)}
>
<SelectTrigger className="h-8 w-[180px] text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="row">가로</SelectItem>
<SelectItem value="column">세로</SelectItem>
<SelectItem value="row-reverse">가로 (역순)</SelectItem>
<SelectItem value="column-reverse">세로 (역순)</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">정렬</Label>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">정렬</span>
<Select
value={config.justifyContent || "flex-start"}
onValueChange={(value) => updateConfig("justifyContent", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-8 w-[180px] text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
@ -192,13 +287,14 @@ export const V2LayoutConfigPanel: React.FC<V2LayoutConfigPanelProps> = ({
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">교차축 정렬</Label>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">교차축 정렬</span>
<Select
value={config.alignItems || "stretch"}
onValueChange={(value) => updateConfig("alignItems", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-8 w-[180px] text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
@ -209,42 +305,128 @@ export const V2LayoutConfigPanel: React.FC<V2LayoutConfigPanelProps> = ({
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">간격 (px)</span>
<Input
value={config.gap || "16"}
onChange={(e) => updateConfig("gap", e.target.value)}
placeholder="16"
className="h-8 w-[180px] text-sm"
/>
</div>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">간격 (px)</Label>
<Input
value={config.gap || "16"}
onChange={(e) => updateConfig("gap", e.target.value)}
placeholder="16"
className="h-8 text-xs"
/>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="wrap"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">줄바꿈 허용</p>
<p className="text-[11px] text-muted-foreground">
공간이 부족하면 다음 줄로 넘겨요
</p>
</div>
<Switch
checked={config.wrap || false}
onCheckedChange={(checked) => updateConfig("wrap", checked)}
/>
<label htmlFor="wrap" className="text-xs">줄바꿈 허용</label>
</div>
</div>
)}
{/* 화면 임베드 설정 */}
{config.layoutType === "screen-embed" && (
<div className="space-y-2">
<Label className="text-xs font-medium">임베드할 화면 ID</Label>
<Input
type="number"
value={config.screenId || ""}
onChange={(e) => updateConfig("screenId", e.target.value ? Number(e.target.value) : undefined)}
placeholder="화면 ID"
className="h-8 text-xs"
/>
{/* 화면 임베드 타입 설정 */}
{isScreenEmbedType && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<MonitorPlay className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">임베드 설정</span>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">화면 ID</span>
<Input
type="number"
value={config.screenId || ""}
onChange={(e) => updateConfig("screenId", e.target.value ? Number(e.target.value) : undefined)}
placeholder="화면 ID 입력"
className="h-8 w-[180px] text-sm"
/>
</div>
</div>
)}
{/* 구분선 타입: 별도 설정 없음 - 빈 상태 표시 */}
{currentLayoutType === "divider" && (
<div className="text-center py-6 text-muted-foreground">
<Minus className="mx-auto mb-2 h-8 w-8 opacity-30" />
<p className="text-sm">추가 설정이 없어요</p>
<p className="text-xs mt-0.5">구분선은 기본 스타일로 표시돼요</p>
</div>
)}
{/* ─── 3단계: 고급 설정 (그리드/플렉스 타입에서만) ─── */}
{(isGridType || isFlexType || isSplitType) && (
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{isGridType && (
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">반응형 그리드</p>
<p className="text-[11px] text-muted-foreground">
화면 크기에 따라 컬럼 수가 자동 조정돼요
</p>
</div>
<Switch
checked={config.responsive !== false}
onCheckedChange={(checked) => updateConfig("responsive", checked)}
/>
</div>
)}
{isFlexType && (
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">최소 아이템 너비</span>
<Input
value={config.minItemWidth || ""}
onChange={(e) => updateConfig("minItemWidth", e.target.value)}
placeholder="자동"
className="h-8 w-[180px] text-sm"
/>
</div>
)}
{isSplitType && (
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">최소 패널 크기 (px)</span>
<Input
type="number"
value={config.minPanelSize || ""}
onChange={(e) => updateConfig("minPanelSize", e.target.value ? Number(e.target.value) : undefined)}
placeholder="자동"
className="h-8 w-[180px] text-sm"
/>
</div>
)}
</div>
</CollapsibleContent>
</Collapsible>
)}
</div>
);
};
@ -252,5 +434,3 @@ export const V2LayoutConfigPanel: React.FC<V2LayoutConfigPanelProps> = ({
V2LayoutConfigPanel.displayName = "V2LayoutConfigPanel";
export default V2LayoutConfigPanel;

240
frontend/components/v2/config-panels/V2ListConfigPanel.tsx
View File

@ -2,33 +2,51 @@
/**
* V2List 설정 패널
* TableListConfigPanel을 래핑하여 동일한 설정 기능을 제공합니다.
* 카드 표시는 별도의 card-display 컴포넌트를 사용합니다.
* 토스식 단계별 UX: 테이블 정보 표시 -> 기본 옵션(Switch) -> 상세 설정(Collapsible)
* 컬럼/필터 등 복잡한 설정은 TableListConfigPanel에 위임하여 기능 누락 방지
*/
import React, { useMemo } from "react";
import React, { useState, useMemo } from "react";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Table2, Settings, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { TableListConfigPanel } from "@/lib/registry/components/table-list/TableListConfigPanel";
import { TableListConfig } from "@/lib/registry/components/table-list/types";
interface V2ListConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
/** 현재 화면의 테이블명 */
currentTableName?: string;
}
/**
* V2List 설정 패널
* TableListConfigPanel과 동일한 기능을 제공
*/
export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
config,
onChange,
currentTableName,
}) => {
// V2List config를 TableListConfig 형식으로 변환
const [detailOpen, setDetailOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
const tableName = config.tableName || config.dataSource?.table || currentTableName || "";
const columnCount = (config.columns || []).length;
// ─── V2List config → TableListConfig 변환 (기존 로직 100% 유지) ───
const tableListConfig: TableListConfig = useMemo(() => {
// 컬럼 형식 변환: V2List columns -> TableList columns
const columns = (config.columns || []).map((col: any, index: number) => ({
columnName: col.key || col.columnName || col.field || "",
displayName: col.title || col.header || col.displayName || col.key || col.columnName || col.field || "",
@ -50,27 +68,44 @@ export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
columns,
useCustomTable: config.useCustomTable,
customTableName: config.customTableName,
isReadOnly: config.isReadOnly !== false, // V2List는 기본적으로 읽기 전용
displayMode: "table", // 테이블 모드 고정 (카드는 card-display 컴포넌트 사용)
isReadOnly: config.isReadOnly !== false,
displayMode: "table",
showHeader: true,
showFooter: false,
pagination: config.pagination !== false ? {
enabled: true,
pageSize: config.pageSize || 10,
position: "bottom",
showPageSize: true,
showSizeSelector: true,
showPageInfo: true,
pageSizeOptions: [5, 10, 20, 50, 100],
} : {
enabled: false,
pageSize: 10,
position: "bottom",
showPageSize: false,
showSizeSelector: false,
showPageInfo: false,
pageSizeOptions: [10],
},
filter: config.filter,
filter: config.filter || { enabled: false, filters: [] },
dataFilter: config.dataFilter,
actions: config.actions || {
showActions: false,
actions: [],
bulkActions: false,
bulkActionList: [],
},
tableStyle: config.tableStyle || {
theme: "default",
headerStyle: "default",
rowHeight: "normal",
alternateRows: false,
hoverEffect: true,
borderStyle: "light",
},
checkbox: {
enabled: true,
multiple: true,
position: "left",
showHeader: true,
selectAll: true,
},
height: "auto",
autoWidth: true,
@ -81,31 +116,30 @@ export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
minColumnWidth: 100,
maxColumnWidth: 300,
},
toolbar: config.toolbar,
linkedFilters: config.linkedFilters,
excludeFilter: config.excludeFilter,
defaultSort: config.defaultSort,
};
}, [config, currentTableName]);
// TableListConfig 변경을 V2List config 형식으로 변환
// ─── TableListConfig 변경 → V2List config 변환 (기존 로직 100% 유지) ───
const handleConfigChange = (partialConfig: Partial<TableListConfig>) => {
const newConfig: Record<string, any> = { ...config };
// 테이블 설정 변환
if (partialConfig.selectedTable !== undefined) {
newConfig.tableName = partialConfig.selectedTable;
if (!newConfig.dataSource) {
newConfig.dataSource = {};
}
if (!newConfig.dataSource) newConfig.dataSource = {};
newConfig.dataSource.table = partialConfig.selectedTable;
}
if (partialConfig.tableName !== undefined) {
newConfig.tableName = partialConfig.tableName;
if (!newConfig.dataSource) {
newConfig.dataSource = {};
}
if (!newConfig.dataSource) newConfig.dataSource = {};
newConfig.dataSource.table = partialConfig.tableName;
}
if (partialConfig.useCustomTable !== undefined) {
newConfig.useCustomTable = partialConfig.useCustomTable;
}
}
if (partialConfig.customTableName !== undefined) {
newConfig.customTableName = partialConfig.customTableName;
}
@ -113,7 +147,6 @@ export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
newConfig.isReadOnly = partialConfig.isReadOnly;
}
// 컬럼 형식 변환: TableList columns -> V2List columns
if (partialConfig.columns !== undefined) {
newConfig.columns = partialConfig.columns.map((col: any) => ({
key: col.columnName,
@ -133,32 +166,165 @@ export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
}));
}
// 페이지네이션 변환
if (partialConfig.pagination !== undefined) {
newConfig.pagination = partialConfig.pagination?.enabled;
newConfig.pageSize = partialConfig.pagination?.pageSize || 10;
}
// 필터 변환
if (partialConfig.filter !== undefined) {
newConfig.filter = partialConfig.filter;
}
// 데이터 필터 변환
if (partialConfig.dataFilter !== undefined) {
newConfig.dataFilter = partialConfig.dataFilter;
}
console.log("⚙️ V2ListConfigPanel handleConfigChange:", { partialConfig, newConfig });
if (partialConfig.actions !== undefined) {
newConfig.actions = partialConfig.actions;
}
if (partialConfig.tableStyle !== undefined) {
newConfig.tableStyle = partialConfig.tableStyle;
}
if (partialConfig.toolbar !== undefined) {
newConfig.toolbar = partialConfig.toolbar;
}
if (partialConfig.linkedFilters !== undefined) {
newConfig.linkedFilters = partialConfig.linkedFilters;
}
if (partialConfig.excludeFilter !== undefined) {
newConfig.excludeFilter = partialConfig.excludeFilter;
}
if (partialConfig.defaultSort !== undefined) {
newConfig.defaultSort = partialConfig.defaultSort;
}
onChange(newConfig);
};
return (
<TableListConfigPanel
config={tableListConfig}
onChange={handleConfigChange}
screenTableName={currentTableName}
/>
<div className="space-y-4">
{/* ─── 1단계: 테이블 정보 ─── */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Table2 className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">데이터 소스</span>
</div>
{tableName ? (
<div className="rounded-md border bg-background p-3">
<p className="text-xs text-muted-foreground">연결된 테이블</p>
<p className="mt-0.5 text-sm font-medium">{tableName}</p>
{columnCount > 0 && (
<p className="mt-1 text-[11px] text-muted-foreground">
{columnCount}개의 컬럼이 설정되어 있어요
</p>
)}
</div>
) : (
<div className="rounded-md border-2 border-dashed p-4 text-center">
<Table2 className="mx-auto mb-2 h-8 w-8 opacity-30 text-muted-foreground" />
<p className="text-sm text-muted-foreground">
아직 테이블이 연결되지 않았어요
</p>
<p className="mt-1 text-xs text-muted-foreground">
아래 상세 설정에서 테이블을 선택해주세요
</p>
</div>
)}
</div>
{/* ─── 2단계: 기본 옵션 (Switch + 설명) ─── */}
<div className="space-y-2">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">읽기 전용</p>
<p className="text-[11px] text-muted-foreground">
데이터 조회만 가능하고 수정할 수 없어요
</p>
</div>
<Switch
checked={config.isReadOnly !== false}
onCheckedChange={(checked) => updateConfig("isReadOnly", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">페이지네이션</p>
<p className="text-[11px] text-muted-foreground">
데이터를 페이지 단위로 나눠서 보여줘요
</p>
</div>
<Switch
checked={config.pagination !== false}
onCheckedChange={(checked) => {
updateConfig("pagination", checked);
}}
/>
</div>
{config.pagination !== false && (
<div className="ml-4 border-l-2 border-primary/20 pl-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">페이지당 행 수</span>
<Select
value={String(config.pageSize || 10)}
onValueChange={(v) => updateConfig("pageSize", Number(v))}
>
<SelectTrigger className="h-8 w-[180px] text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="5">5개</SelectItem>
<SelectItem value="10">10개</SelectItem>
<SelectItem value="20">20개</SelectItem>
<SelectItem value="50">50개</SelectItem>
<SelectItem value="100">100개</SelectItem>
</SelectContent>
</Select>
</div>
</div>
)}
</div>
{/* ─── 3단계: 상세 설정 (컬럼, 필터, 테이블 선택 등) ─── */}
<Collapsible open={detailOpen} onOpenChange={setDetailOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">컬럼 및 상세 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
detailOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-2">
<p className="text-xs text-muted-foreground px-2 pb-2">
테이블 선택, 컬럼 구성, 필터 조건 등을 설정할 수 있어요
</p>
<TableListConfigPanel
config={tableListConfig}
onChange={handleConfigChange}
screenTableName={currentTableName}
/>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};

573
frontend/components/v2/config-panels/V2LocationSwapSelectorConfigPanel.tsx Normal file
View File

@ -0,0 +1,573 @@
"use client";
/**
* V2 출발지/도착지 선택 설정 패널
* 토스식 단계별 UX: 데이터 소스 -> 필드 매핑 -> UI 설정 -> DB 초기값(접힘)
*/
import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Settings, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
interface V2LocationSwapSelectorConfigPanelProps {
config: any;
onChange: (config: any) => void;
tableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>;
screenTableName?: string;
}
export const V2LocationSwapSelectorConfigPanel: React.FC<V2LocationSwapSelectorConfigPanelProps> = ({
config,
onChange,
tableColumns = [],
screenTableName,
}) => {
const [tables, setTables] = useState<Array<{ name: string; label: string }>>([]);
const [columns, setColumns] = useState<Array<{ name: string; label: string }>>([]);
const [codeCategories, setCodeCategories] = useState<Array<{ value: string; label: string }>>([]);
const [dbSettingsOpen, setDbSettingsOpen] = useState(false);
useEffect(() => {
const loadTables = async () => {
try {
const response = await apiClient.get("/table-management/tables");
if (response.data.success && response.data.data) {
setTables(
response.data.data.map((t: any) => ({
name: t.tableName || t.table_name,
label: t.displayName || t.tableLabel || t.table_label || t.tableName || t.table_name,
}))
);
}
} catch (error) {
console.error("테이블 목록 로드 실패:", error);
}
};
loadTables();
}, []);
useEffect(() => {
const loadColumns = async () => {
const tableName = config?.dataSource?.tableName;
if (!tableName) {
setColumns([]);
return;
}
try {
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
if (response.data.success) {
let columnData = response.data.data;
if (!Array.isArray(columnData) && columnData?.columns) {
columnData = columnData.columns;
}
if (Array.isArray(columnData)) {
setColumns(
columnData.map((c: any) => ({
name: c.columnName || c.column_name || c.name,
label: c.displayName || c.columnLabel || c.column_label || c.columnName || c.column_name || c.name,
}))
);
}
}
} catch (error) {
console.error("컬럼 목록 로드 실패:", error);
}
};
if (config?.dataSource?.type === "table") {
loadColumns();
}
}, [config?.dataSource?.tableName, config?.dataSource?.type]);
useEffect(() => {
const loadCodeCategories = async () => {
try {
const response = await apiClient.get("/code-management/categories");
if (response.data.success && response.data.data) {
setCodeCategories(
response.data.data.map((c: any) => ({
value: c.category_code || c.categoryCode || c.code,
label: c.category_name || c.categoryName || c.name,
}))
);
}
} catch (error: any) {
if (error?.response?.status !== 404) {
console.error("코드 카테고리 로드 실패:", error);
}
}
};
loadCodeCategories();
}, []);
const handleChange = (path: string, value: any) => {
const keys = path.split(".");
const newConfig = { ...config };
let current: any = newConfig;
for (let i = 0; i < keys.length - 1; i++) {
if (!current[keys[i]]) {
current[keys[i]] = {};
}
current[keys[i]] = { ...current[keys[i]] };
current = current[keys[i]];
}
current[keys[keys.length - 1]] = value;
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
};
const dataSourceType = config?.dataSource?.type || "static";
return (
<div className="space-y-4">
{/* ─── 1단계: 데이터 소스 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">데이터 소스</p>
<p className="text-[11px] text-muted-foreground">장소 목록을 어디서 가져올지 선택해요</p>
</div>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
{/* 소스 타입 카드 선택 */}
<div className="grid grid-cols-3 gap-2">
{[
{ value: "static", label: "고정 옵션" },
{ value: "table", label: "테이블" },
{ value: "code", label: "코드 관리" },
].map(({ value, label }) => (
<button
key={value}
type="button"
onClick={() => handleChange("dataSource.type", value)}
className={cn(
"rounded-md border p-2 text-xs transition-colors text-center",
dataSourceType === value
? "border-primary bg-primary/5 text-primary"
: "border-border bg-background text-muted-foreground hover:bg-muted/50"
)}
>
{label}
</button>
))}
</div>
{/* 고정 옵션 설정 */}
{dataSourceType === "static" && (
<div className="space-y-2 pt-1">
<div className="rounded-md border border-primary/20 bg-primary/5 p-2">
<p className="text-[10px] text-primary">고정된 2개 장소만 사용할 때 설정해요 (예: 포항 / 광양)</p>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-[10px] text-muted-foreground">옵션 1 값</Label>
<Input
value={config?.dataSource?.staticOptions?.[0]?.value || ""}
onChange={(e) => {
const options = config?.dataSource?.staticOptions || [];
const newOptions = [...options];
newOptions[0] = { ...newOptions[0], value: e.target.value };
handleChange("dataSource.staticOptions", newOptions);
}}
placeholder="포항"
className="h-7 text-xs"
/>
</div>
<div className="space-y-1">
<Label className="text-[10px] text-muted-foreground">옵션 1 표시명</Label>
<Input
value={config?.dataSource?.staticOptions?.[0]?.label || ""}
onChange={(e) => {
const options = config?.dataSource?.staticOptions || [];
const newOptions = [...options];
newOptions[0] = { ...newOptions[0], label: e.target.value };
handleChange("dataSource.staticOptions", newOptions);
}}
placeholder="포항"
className="h-7 text-xs"
/>
</div>
<div className="space-y-1">
<Label className="text-[10px] text-muted-foreground">옵션 2 값</Label>
<Input
value={config?.dataSource?.staticOptions?.[1]?.value || ""}
onChange={(e) => {
const options = config?.dataSource?.staticOptions || [];
const newOptions = [...options];
newOptions[1] = { ...newOptions[1], value: e.target.value };
handleChange("dataSource.staticOptions", newOptions);
}}
placeholder="광양"
className="h-7 text-xs"
/>
</div>
<div className="space-y-1">
<Label className="text-[10px] text-muted-foreground">옵션 2 표시명</Label>
<Input
value={config?.dataSource?.staticOptions?.[1]?.label || ""}
onChange={(e) => {
const options = config?.dataSource?.staticOptions || [];
const newOptions = [...options];
newOptions[1] = { ...newOptions[1], label: e.target.value };
handleChange("dataSource.staticOptions", newOptions);
}}
placeholder="광양"
className="h-7 text-xs"
/>
</div>
</div>
</div>
)}
{/* 테이블 설정 */}
{dataSourceType === "table" && (
<div className="space-y-2 pt-1">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">테이블</span>
<Select
value={config?.dataSource?.tableName || ""}
onValueChange={(value) => handleChange("dataSource.tableName", value)}
>
<SelectTrigger className="h-7 w-[160px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.name} value={table.name}>
{table.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">값 필드</span>
<Select
value={config?.dataSource?.valueField || ""}
onValueChange={(value) => handleChange("dataSource.valueField", value)}
>
<SelectTrigger className="h-7 w-[160px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.name} value={col.name}>{col.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">표시 필드</span>
<Select
value={config?.dataSource?.labelField || ""}
onValueChange={(value) => handleChange("dataSource.labelField", value)}
>
<SelectTrigger className="h-7 w-[160px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.name} value={col.name}>{col.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
)}
{/* 코드 카테고리 설정 */}
{dataSourceType === "code" && (
<div className="pt-1">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">코드 카테고리</span>
<Select
value={config?.dataSource?.codeCategory || ""}
onValueChange={(value) => handleChange("dataSource.codeCategory", value)}
>
<SelectTrigger className="h-7 w-[160px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{codeCategories.map((cat) => (
<SelectItem key={cat.value} value={cat.value}>{cat.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
)}
</div>
{/* ─── 2단계: 필드 매핑 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">필드 매핑</p>
<p className="text-[11px] text-muted-foreground">
출발지/도착지 값이 저장될 컬럼을 지정해요
{screenTableName && (
<span className="ml-1">(화면 테이블: <strong>{screenTableName}</strong>)</span>
)}
</p>
</div>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">출발지 저장 컬럼</span>
{tableColumns.length > 0 ? (
<Select
value={config?.departureField || ""}
onValueChange={(value) => handleChange("departureField", value)}
>
<SelectTrigger className="h-7 w-[140px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{tableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.columnLabel || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
) : (
<Input
value={config?.departureField || "departure"}
onChange={(e) => handleChange("departureField", e.target.value)}
className="h-7 w-[140px] text-xs"
/>
)}
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">도착지 저장 컬럼</span>
{tableColumns.length > 0 ? (
<Select
value={config?.destinationField || ""}
onValueChange={(value) => handleChange("destinationField", value)}
>
<SelectTrigger className="h-7 w-[140px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{tableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.columnLabel || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
) : (
<Input
value={config?.destinationField || "destination"}
onChange={(e) => handleChange("destinationField", e.target.value)}
className="h-7 w-[140px] text-xs"
/>
)}
</div>
<div className="flex items-center justify-between py-1">
<div>
<span className="text-xs text-muted-foreground">출발지명 컬럼</span>
<p className="text-[10px] text-muted-foreground mt-0.5">라벨 저장용 (선택)</p>
</div>
{tableColumns.length > 0 ? (
<Select
value={config?.departureLabelField || "__none__"}
onValueChange={(value) => handleChange("departureLabelField", value === "__none__" ? "" : value)}
>
<SelectTrigger className="h-7 w-[140px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__">없음</SelectItem>
{tableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.columnLabel || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
) : (
<Input
value={config?.departureLabelField || ""}
onChange={(e) => handleChange("departureLabelField", e.target.value)}
placeholder="departure_name"
className="h-7 w-[140px] text-xs"
/>
)}
</div>
<div className="flex items-center justify-between py-1">
<div>
<span className="text-xs text-muted-foreground">도착지명 컬럼</span>
<p className="text-[10px] text-muted-foreground mt-0.5">라벨 저장용 (선택)</p>
</div>
{tableColumns.length > 0 ? (
<Select
value={config?.destinationLabelField || "__none__"}
onValueChange={(value) => handleChange("destinationLabelField", value === "__none__" ? "" : value)}
>
<SelectTrigger className="h-7 w-[140px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__">없음</SelectItem>
{tableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.columnLabel || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
) : (
<Input
value={config?.destinationLabelField || ""}
onChange={(e) => handleChange("destinationLabelField", e.target.value)}
placeholder="destination_name"
className="h-7 w-[140px] text-xs"
/>
)}
</div>
</div>
{/* ─── 3단계: UI 설정 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">UI 설정</p>
<p className="text-[11px] text-muted-foreground">라벨과 스타일을 설정해요</p>
</div>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">출발지 라벨</span>
<Input
value={config?.departureLabel || "출발지"}
onChange={(e) => handleChange("departureLabel", e.target.value)}
className="h-7 w-[120px] text-xs"
/>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">도착지 라벨</span>
<Input
value={config?.destinationLabel || "도착지"}
onChange={(e) => handleChange("destinationLabel", e.target.value)}
className="h-7 w-[120px] text-xs"
/>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">스타일</span>
<Select
value={config?.variant || "card"}
onValueChange={(value) => handleChange("variant", value)}
>
<SelectTrigger className="h-7 w-[120px] text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="card">카드</SelectItem>
<SelectItem value="inline">인라인</SelectItem>
<SelectItem value="minimal">미니멀</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">교환 버튼</p>
<p className="text-[11px] text-muted-foreground">출발지와 도착지를 바꿀 수 있어요</p>
</div>
<Switch
checked={config?.showSwapButton !== false}
onCheckedChange={(checked) => handleChange("showSwapButton", checked)}
/>
</div>
</div>
{/* ─── 4단계: DB 초기값 로드 (Collapsible) ─── */}
<Collapsible open={dbSettingsOpen} onOpenChange={setDbSettingsOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">DB 초기값 로드</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
dbSettingsOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">DB에서 초기값 로드</p>
<p className="text-[11px] text-muted-foreground">새로고침 후에도 DB에 저장된 값을 자동으로 불러와요</p>
</div>
<Switch
checked={config?.loadFromDb !== false}
onCheckedChange={(checked) => handleChange("loadFromDb", checked)}
/>
</div>
{config?.loadFromDb !== false && (
<div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">조회 테이블</span>
<Select
value={config?.dbTableName || "vehicles"}
onValueChange={(value) => handleChange("dbTableName", value)}
>
<SelectTrigger className="h-7 w-[140px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="vehicles">vehicles (기본)</SelectItem>
{tables.map((table) => (
<SelectItem key={table.name} value={table.name}>
{table.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between py-1">
<div>
<span className="text-xs text-muted-foreground">키 필드</span>
<p className="text-[10px] text-muted-foreground mt-0.5">현재 사용자 ID로 조회할 필드</p>
</div>
<Input
value={config?.dbKeyField || "user_id"}
onChange={(e) => handleChange("dbKeyField", e.target.value)}
placeholder="user_id"
className="h-7 w-[120px] text-xs"
/>
</div>
</div>
)}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2LocationSwapSelectorConfigPanel.displayName = "V2LocationSwapSelectorConfigPanel";
export default V2LocationSwapSelectorConfigPanel;

384
frontend/components/v2/config-panels/V2MediaConfigPanel.tsx
View File

@ -2,15 +2,54 @@
/**
* V2Media 설정 패널
* 통합 미디어 컴포넌트의 세부 설정을 관리합니다.
* 토스식 단계별 UX: 미디어 타입 카드 선택 -> 기본 설정 -> 타입별 설정 -> 고급 설정(접힘)
*/
import React from "react";
import { Label } from "@/components/ui/label";
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
FileText,
Image,
Video,
Music,
Settings,
ChevronDown,
} from "lucide-react";
import { cn } from "@/lib/utils";
// ─── 미디어 타입 카드 정의 ───
const MEDIA_TYPE_CARDS = [
{
value: "file",
icon: FileText,
title: "파일",
description: "일반 파일을 업로드해요",
},
{
value: "image",
icon: Image,
title: "이미지",
description: "사진이나 그림을 올려요",
},
{
value: "video",
icon: Video,
title: "비디오",
description: "동영상을 업로드해요",
},
{
value: "audio",
icon: Music,
title: "오디오",
description: "음악이나 녹음을 올려요",
},
] as const;
interface V2MediaConfigPanelProps {
config: Record<string, any>;
@ -21,186 +60,259 @@ export const V2MediaConfigPanel: React.FC<V2MediaConfigPanelProps> = ({
config,
onChange,
}) => {
// 설정 업데이트 핸들러
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
const currentMediaType = config.mediaType || config.type || "image";
const isImageType = currentMediaType === "image";
const isPlayerType = currentMediaType === "video" || currentMediaType === "audio";
return (
<div className="space-y-4">
{/* 미디어 타입 */}
{/* ─── 1단계: 미디어 타입 선택 (카드) ─── */}
<div className="space-y-2">
<Label className="text-xs font-medium">미디어 타입</Label>
<Select
value={config.mediaType || config.type || "image"}
onValueChange={(value) => updateConfig("mediaType", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="타입 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="file">파일</SelectItem>
<SelectItem value="image">이미지</SelectItem>
<SelectItem value="video">비디오</SelectItem>
<SelectItem value="audio">오디오</SelectItem>
</SelectContent>
</Select>
<p className="text-sm font-medium">어떤 미디어를 업로드하나요?</p>
<div className="grid grid-cols-2 gap-2">
{MEDIA_TYPE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = currentMediaType === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("mediaType", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50",
)}
>
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">
{card.title}
</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
{card.description}
</span>
</button>
);
})}
</div>
</div>
<Separator />
{/* ─── 2단계: 기본 설정 ─── */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<span className="text-sm font-medium">파일 설정</span>
{/* 허용 파일 형식 */}
<div className="space-y-2">
<Label className="text-xs font-medium">허용 파일 형식</Label>
<Input
value={config.accept || ""}
onChange={(e) => updateConfig("accept", e.target.value)}
placeholder="예: .jpg,.png,.pdf"
className="h-8 text-xs"
/>
<p className="text-[10px] text-muted-foreground">
쉼표로 구분. 예: .jpg,.png,.gif 또는 image/*
</p>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">허용 형식</span>
<Input
value={config.accept || ""}
onChange={(e) => updateConfig("accept", e.target.value)}
placeholder=".jpg,.png,.pdf"
className="h-8 w-[180px] text-sm"
/>
</div>
</div>
{/* 최대 파일 크기 */}
{/* ─── 3단계: 업로드 옵션 (Switch + 설명) ─── */}
<div className="space-y-2">
<Label className="text-xs font-medium">최대 파일 크기 (MB)</Label>
<Input
type="number"
value={config.maxSize || ""}
onChange={(e) => updateConfig("maxSize", e.target.value ? Number(e.target.value) : undefined)}
placeholder="10"
min="1"
className="h-8 text-xs"
/>
</div>
{/* 최대 파일 수 */}
<div className="space-y-2">
<Label className="text-xs font-medium">최대 파일 수</Label>
<Input
type="number"
value={config.maxFiles || ""}
onChange={(e) => updateConfig("maxFiles", e.target.value ? Number(e.target.value) : undefined)}
placeholder="제한 없음"
min="1"
className="h-8 text-xs"
/>
</div>
<Separator />
{/* 옵션 */}
<div className="space-y-3">
<Label className="text-xs font-medium">옵션</Label>
<div className="flex items-center space-x-2">
<Checkbox
id="multiple"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">여러 파일 업로드</p>
<p className="text-[11px] text-muted-foreground">
한 번에 여러 파일을 선택할 수 있어요
</p>
</div>
<Switch
checked={config.multiple || false}
onCheckedChange={(checked) => updateConfig("multiple", checked)}
/>
<label htmlFor="multiple" className="text-xs">다중 파일 업로드</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="preview"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">미리보기</p>
<p className="text-[11px] text-muted-foreground">
업로드한 파일의 미리보기가 표시돼요
</p>
</div>
<Switch
checked={config.preview !== false}
onCheckedChange={(checked) => updateConfig("preview", checked)}
/>
<label htmlFor="preview" className="text-xs">미리보기 표시</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="dragDrop"
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">드래그 앤 드롭</p>
<p className="text-[11px] text-muted-foreground">
파일을 끌어다 놓아서 업로드할 수 있어요
</p>
</div>
<Switch
checked={config.dragDrop !== false}
onCheckedChange={(checked) => updateConfig("dragDrop", checked)}
/>
<label htmlFor="dragDrop" className="text-xs">드래그 앤 드롭</label>
</div>
</div>
{/* 이미지 전용 설정 */}
{config.mediaType === "image" && (
<>
<Separator />
<div className="space-y-3">
<Label className="text-xs font-medium">이미지 설정</Label>
{/* ─── 4단계: 타입별 설정 ─── */}
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">최대 너비 (px)</Label>
{/* 이미지 타입: 크기 제한 + 자르기 */}
{isImageType && (
<div className="space-y-3">
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Image className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">이미지 설정</span>
</div>
<div className="flex gap-2">
<div className="flex-1">
<span className="text-xs text-muted-foreground">최대 너비 (px)</span>
<Input
type="number"
value={config.maxWidth || ""}
onChange={(e) => updateConfig("maxWidth", e.target.value ? Number(e.target.value) : undefined)}
placeholder="자동"
className="h-8 text-xs"
className="mt-1 h-8 text-sm"
/>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">최대 높이 (px)</Label>
<div className="flex-1">
<span className="text-xs text-muted-foreground">최대 높이 (px)</span>
<Input
type="number"
value={config.maxHeight || ""}
onChange={(e) => updateConfig("maxHeight", e.target.value ? Number(e.target.value) : undefined)}
placeholder="자동"
className="h-8 text-xs"
className="mt-1 h-8 text-sm"
/>
</div>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="crop"
checked={config.crop || false}
onCheckedChange={(checked) => updateConfig("crop", checked)}
/>
<label htmlFor="crop" className="text-xs">자르기 기능</label>
</div>
</div>
</>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">자르기 기능</p>
<p className="text-[11px] text-muted-foreground">
이미지를 원하는 크기로 잘라서 올릴 수 있어요
</p>
</div>
<Switch
checked={config.crop || false}
onCheckedChange={(checked) => updateConfig("crop", checked)}
/>
</div>
</div>
)}
{/* 비디오/오디오 전용 설정 */}
{(config.mediaType === "video" || config.mediaType === "audio") && (
<>
<Separator />
<div className="space-y-3">
<Label className="text-xs font-medium">플레이어 설정</Label>
<div className="flex items-center space-x-2">
<Checkbox
id="autoplay"
checked={config.autoplay || false}
onCheckedChange={(checked) => updateConfig("autoplay", checked)}
/>
<label htmlFor="autoplay" className="text-xs">자동 재생</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="controls"
checked={config.controls !== false}
onCheckedChange={(checked) => updateConfig("controls", checked)}
/>
<label htmlFor="controls" className="text-xs">컨트롤 표시</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="loop"
checked={config.loop || false}
onCheckedChange={(checked) => updateConfig("loop", checked)}
/>
<label htmlFor="loop" className="text-xs">반복 재생</label>
{/* 비디오/오디오 타입: 플레이어 설정 */}
{isPlayerType && (
<div className="space-y-2">
<div className="rounded-lg border bg-muted/30 p-4">
<div className="flex items-center gap-2">
{currentMediaType === "video" ? (
<Video className="h-4 w-4 text-primary" />
) : (
<Music className="h-4 w-4 text-primary" />
)}
<span className="text-sm font-medium">플레이어 설정</span>
</div>
</div>
</>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">자동 재생</p>
<p className="text-[11px] text-muted-foreground">
페이지를 열면 자동으로 재생돼요
</p>
</div>
<Switch
checked={config.autoplay || false}
onCheckedChange={(checked) => updateConfig("autoplay", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">컨트롤 표시</p>
<p className="text-[11px] text-muted-foreground">
재생, 정지, 볼륨 등 조작 버튼이 보여요
</p>
</div>
<Switch
checked={config.controls !== false}
onCheckedChange={(checked) => updateConfig("controls", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">반복 재생</p>
<p className="text-[11px] text-muted-foreground">
끝나면 처음부터 다시 재생해요
</p>
</div>
<Switch
checked={config.loop || false}
onCheckedChange={(checked) => updateConfig("loop", checked)}
/>
</div>
</div>
)}
{/* ─── 5단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">최대 크기 (MB)</span>
<Input
type="number"
value={config.maxSize || ""}
onChange={(e) => updateConfig("maxSize", e.target.value ? Number(e.target.value) : undefined)}
placeholder="10"
min="1"
className="h-8 w-[180px] text-sm"
/>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">최대 파일 수</span>
<Input
type="number"
value={config.maxFiles || ""}
onChange={(e) => updateConfig("maxFiles", e.target.value ? Number(e.target.value) : undefined)}
placeholder="제한 없음"
min="1"
className="h-8 w-[180px] text-sm"
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
@ -208,5 +320,3 @@ export const V2MediaConfigPanel: React.FC<V2MediaConfigPanelProps> = ({
V2MediaConfigPanel.displayName = "V2MediaConfigPanel";
export default V2MediaConfigPanel;

206
frontend/components/v2/config-panels/V2NumberingRuleConfigPanel.tsx Normal file
View File

@ -0,0 +1,206 @@
"use client";
/**
* V2NumberingRule 설정 패널
* 토스식 단계별 UX: 최대 규칙 수(카드선택) -> 카드 레이아웃(카드선택) -> 표시/동작(Switch) -> 고급(접힘)
*/
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Settings, ChevronDown, LayoutList, LayoutGrid } from "lucide-react";
import { cn } from "@/lib/utils";
import { NumberingRuleComponentConfig } from "@/lib/registry/components/v2-numbering-rule/types";
const MAX_RULES_CARDS = [
{ value: 3, label: "3개", desc: "간단한 코드" },
{ value: 6, label: "6개", desc: "기본 (권장)" },
{ value: 8, label: "8개", desc: "복잡한 코드" },
{ value: 10, label: "10개", desc: "최대" },
] as const;
const LAYOUT_CARDS = [
{ value: "vertical", label: "세로", desc: "위에서 아래로", icon: LayoutList },
{ value: "horizontal", label: "가로", desc: "왼쪽에서 오른쪽으로", icon: LayoutGrid },
] as const;
interface V2NumberingRuleConfigPanelProps {
config: NumberingRuleComponentConfig;
onChange: (config: NumberingRuleComponentConfig) => void;
}
export const V2NumberingRuleConfigPanel: React.FC<V2NumberingRuleConfigPanelProps> = ({
config,
onChange,
}) => {
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: keyof NumberingRuleComponentConfig, value: any) => {
const newConfig = { ...config, [field]: value };
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
};
return (
<div className="space-y-4">
{/* ─── 1단계: 최대 규칙 수 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">최대 파트 수</p>
<div className="grid grid-cols-4 gap-2">
{MAX_RULES_CARDS.map((card) => {
const isSelected = (config.maxRules || 6) === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("maxRules", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span className="text-xs font-medium">{card.label}</span>
<span className="text-[10px] text-muted-foreground mt-0.5">
{card.desc}
</span>
</button>
);
})}
</div>
<p className="text-[11px] text-muted-foreground">
하나의 채번 규칙에 추가할 수 있는 최대 파트 개수에요
</p>
</div>
{/* ─── 2단계: 카드 레이아웃 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">파트 배치 방향</p>
<div className="grid grid-cols-2 gap-2">
{LAYOUT_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = (config.cardLayout || "vertical") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("cardLayout", card.value)}
className={cn(
"flex items-center gap-2 rounded-lg border p-3 text-left transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="h-5 w-5 shrink-0 text-muted-foreground" />
<div>
<span className="text-xs font-medium block">{card.label}</span>
<span className="text-[10px] text-muted-foreground block">
{card.desc}
</span>
</div>
</button>
);
})}
</div>
</div>
{/* ─── 3단계: 표시 설정 (Switch) ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">표시 설정</p>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">미리보기 표시</p>
<p className="text-[11px] text-muted-foreground">
코드 미리보기를 항상 보여줘요
</p>
</div>
<Switch
checked={config.showPreview !== false}
onCheckedChange={(checked) => updateConfig("showPreview", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">규칙 목록 표시</p>
<p className="text-[11px] text-muted-foreground">
저장된 규칙 목록을 보여줘요
</p>
</div>
<Switch
checked={config.showRuleList !== false}
onCheckedChange={(checked) => updateConfig("showRuleList", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">파트 순서 변경</p>
<p className="text-[11px] text-muted-foreground">
파트 드래그로 순서를 바꿀 수 있어요
</p>
</div>
<Switch
checked={config.enableReorder !== false}
onCheckedChange={(checked) => updateConfig("enableReorder", checked)}
/>
</div>
</div>
</div>
{/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">읽기 전용</p>
<p className="text-[11px] text-muted-foreground">
편집 기능을 비활성화해요
</p>
</div>
<Switch
checked={config.readonly || false}
onCheckedChange={(checked) => updateConfig("readonly", checked)}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2NumberingRuleConfigPanel.displayName = "V2NumberingRuleConfigPanel";
export default V2NumberingRuleConfigPanel;

804
frontend/components/v2/config-panels/V2PivotGridConfigPanel.tsx Normal file
View File

@ -0,0 +1,804 @@
"use client";
/**
* V2 피벗 그리드 설정 패널
* 토스식 단계별 UX: 테이블 선택(Combobox) -> 필드 배치(AreaDropZone) -> 고급 설정(Collapsible)
*/
import React, { useState, useEffect, useCallback } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import {
Rows, Columns, Calculator, X, Plus, GripVertical,
Check, ChevronsUpDown, ChevronDown, ChevronUp,
Settings, Database, Info,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { tableTypeApi } from "@/lib/api/screen";
import type {
PivotGridComponentConfig,
PivotFieldConfig,
PivotAreaType,
AggregationType,
FieldDataType,
ConditionalFormatRule,
} from "@/lib/registry/components/v2-pivot-grid/types";
interface TableInfo {
tableName: string;
displayName: string;
}
interface ColumnInfo {
column_name: string;
data_type: string;
column_comment?: string;
}
interface V2PivotGridConfigPanelProps {
config: PivotGridComponentConfig;
onChange: (config: PivotGridComponentConfig) => void;
}
function mapDbTypeToFieldType(dbType: string): FieldDataType {
const type = dbType.toLowerCase();
if (type.includes("int") || type.includes("numeric") || type.includes("decimal") || type.includes("float")) return "number";
if (type.includes("date") || type.includes("time") || type.includes("timestamp")) return "date";
if (type.includes("bool")) return "boolean";
return "string";
}
/* ─── 영역 드롭존 서브 컴포넌트 ─── */
interface AreaDropZoneProps {
area: PivotAreaType;
label: string;
description: string;
icon: React.ReactNode;
fields: PivotFieldConfig[];
columns: ColumnInfo[];
onAddField: (column: ColumnInfo) => void;
onRemoveField: (index: number) => void;
onUpdateField: (index: number, updates: Partial<PivotFieldConfig>) => void;
color: string;
}
const AreaDropZone: React.FC<AreaDropZoneProps> = ({
area,
label,
description,
icon,
fields,
columns,
onAddField,
onRemoveField,
onUpdateField,
color,
}) => {
const [isExpanded, setIsExpanded] = useState(true);
const availableColumns = columns.filter(
(col) => !fields.some((f) => f.field === col.column_name)
);
return (
<div className={cn("rounded-lg border-2 p-3", color)}>
<div
className="flex cursor-pointer items-center justify-between"
onClick={() => setIsExpanded(!isExpanded)}
>
<div className="flex items-center gap-2">
{icon}
<span className="text-sm font-medium">{label}</span>
<Badge variant="secondary" className="text-xs">{fields.length}</Badge>
</div>
{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</div>
<p className="mt-1 text-xs text-muted-foreground">{description}</p>
{isExpanded && (
<div className="mt-3 space-y-2">
{fields.length > 0 ? (
<div className="space-y-1">
{fields.map((field, idx) => (
<div
key={`${field.field}-${idx}`}
className="flex items-center gap-2 rounded-md border bg-background px-2 py-1.5"
>
<GripVertical className="h-3 w-3 text-muted-foreground" />
<span className="flex-1 truncate text-xs font-medium">
{field.caption || field.field}
</span>
{area === "data" && (
<Select
value={field.summaryType || "sum"}
onValueChange={(v) => onUpdateField(idx, { summaryType: v as AggregationType })}
>
<SelectTrigger className="h-6 w-20 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="sum">합계</SelectItem>
<SelectItem value="count">개수</SelectItem>
<SelectItem value="avg">평균</SelectItem>
<SelectItem value="min">최소</SelectItem>
<SelectItem value="max">최대</SelectItem>
</SelectContent>
</Select>
)}
<Button
variant="ghost"
size="icon"
className="h-5 w-5"
onClick={() => onRemoveField(idx)}
>
<X className="h-3 w-3" />
</Button>
</div>
))}
</div>
) : (
<div className="rounded-md border border-dashed py-2 text-center text-xs text-muted-foreground">
아래에서 컬럼을 선택하세요
</div>
)}
{availableColumns.length > 0 && (
<Select
onValueChange={(v) => {
const col = columns.find((c) => c.column_name === v);
if (col) onAddField(col);
}}
>
<SelectTrigger className="h-8 text-xs">
<Plus className="mr-1 h-3 w-3" />
<span>컬럼 추가</span>
</SelectTrigger>
<SelectContent>
{availableColumns.map((col) => (
<SelectItem key={col.column_name} value={col.column_name}>
<div className="flex items-center gap-2">
<span>{col.column_comment || col.column_name}</span>
<span className="text-xs text-muted-foreground">
({mapDbTypeToFieldType(col.data_type)})
</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
)}
</div>
);
};
const STYLE_DEFAULTS: { theme: "default"; headerStyle: "default"; cellPadding: "normal"; borderStyle: "light" } = {
theme: "default",
headerStyle: "default",
cellPadding: "normal",
borderStyle: "light",
};
/* ─── 메인 컴포넌트 ─── */
export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
config,
onChange,
}) => {
const [tables, setTables] = useState<TableInfo[]>([]);
const [columns, setColumns] = useState<ColumnInfo[]>([]);
const [loadingTables, setLoadingTables] = useState(false);
const [loadingColumns, setLoadingColumns] = useState(false);
const [tableOpen, setTableOpen] = useState(false);
const [advancedOpen, setAdvancedOpen] = useState(false);
useEffect(() => {
const loadTables = async () => {
setLoadingTables(true);
try {
const tableList = await tableTypeApi.getTables();
setTables(
tableList.map((t: any) => ({
tableName: t.tableName,
displayName: t.tableLabel || t.displayName || t.tableName,
}))
);
} catch {
/* ignore */
} finally {
setLoadingTables(false);
}
};
loadTables();
}, []);
useEffect(() => {
if (!config.dataSource?.tableName) {
setColumns([]);
return;
}
const loadColumns = async () => {
setLoadingColumns(true);
try {
const columnList = await tableTypeApi.getColumns(config.dataSource!.tableName!);
setColumns(
columnList.map((c: any) => ({
column_name: c.columnName || c.column_name,
data_type: c.dataType || c.data_type || "text",
column_comment: c.columnLabel || c.column_label || c.columnName || c.column_name,
}))
);
} catch {
/* ignore */
} finally {
setLoadingColumns(false);
}
};
loadColumns();
}, [config.dataSource?.tableName]);
const updateConfig = useCallback(
(updates: Partial<PivotGridComponentConfig>) => {
const newConfig = { ...config, ...updates };
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
},
[config, onChange]
);
const handleAddField = (area: PivotAreaType, column: ColumnInfo) => {
const currentFields = config.fields || [];
const areaFields = currentFields.filter((f) => f.area === area);
const newField: PivotFieldConfig = {
field: column.column_name,
caption: column.column_comment || column.column_name,
area,
areaIndex: areaFields.length,
dataType: mapDbTypeToFieldType(column.data_type),
visible: true,
};
if (area === "data") newField.summaryType = "sum";
updateConfig({ fields: [...currentFields, newField] });
};
const handleRemoveField = (area: PivotAreaType, index: number) => {
const currentFields = config.fields || [];
const newFields = currentFields.filter(
(f) => !(f.area === area && f.areaIndex === index)
);
let idx = 0;
newFields.forEach((f) => {
if (f.area === area) f.areaIndex = idx++;
});
updateConfig({ fields: newFields });
};
const handleUpdateField = (area: PivotAreaType, index: number, updates: Partial<PivotFieldConfig>) => {
const currentFields = config.fields || [];
const newFields = currentFields.map((f) =>
f.area === area && f.areaIndex === index ? { ...f, ...updates } : f
);
updateConfig({ fields: newFields });
};
const getFieldsByArea = (area: PivotAreaType) =>
(config.fields || []).filter((f) => f.area === area).sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
const handleTableChange = (tableName: string) => {
updateConfig({
dataSource: { ...config.dataSource, type: "table", tableName },
fields: [],
});
setTableOpen(false);
};
return (
<div className="space-y-4">
{/* ─── 안내 ─── */}
<div className="rounded-lg border border-primary/20 bg-primary/5 p-3">
<div className="flex items-start gap-2">
<Info className="mt-0.5 h-4 w-4 text-primary" />
<div className="text-xs text-primary">
<p className="mb-1 font-medium">피벗 테이블 설정 방법</p>
<ol className="list-inside list-decimal space-y-0.5">
<li>데이터를 가져올 <strong>테이블</strong>을 선택</li>
<li><strong>행 그룹</strong>에 그룹화 컬럼 추가 (예: 지역, 부서)</li>
<li><strong>열 그룹</strong>에 가로 펼칠 컬럼 추가 (예: 월, 분기)</li>
<li><strong>값</strong>에 집계할 숫자 컬럼 추가 (예: 매출, 수량)</li>
</ol>
</div>
</div>
</div>
{/* ─── 1단계: 테이블 선택 ─── */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium">테이블 선택</p>
</div>
<p className="text-[11px] text-muted-foreground">
피벗 분석에 사용할 데이터 테이블을 골라요
</p>
</div>
<Popover open={tableOpen} onOpenChange={setTableOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={tableOpen}
className="h-8 w-full justify-between text-xs"
disabled={loadingTables}
>
{loadingTables
? "로딩 중..."
: config.dataSource?.tableName
? tables.find((t) => t.tableName === config.dataSource?.tableName)?.displayName ||
config.dataSource.tableName
: "테이블 선택"}
<ChevronsUpDown className="ml-2 h-3 w-3 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" />
<CommandList>
<CommandEmpty className="py-4 text-center text-xs">
테이블을 찾을 수 없습니다.
</CommandEmpty>
<CommandGroup className="max-h-[200px] overflow-auto">
{tables.map((table) => (
<CommandItem
key={table.tableName}
value={`${table.tableName} ${table.displayName}`}
onSelect={() => handleTableChange(table.tableName)}
className="text-xs"
>
<Check
className={cn(
"mr-2 h-3 w-3",
config.dataSource?.tableName === table.tableName ? "opacity-100" : "opacity-0"
)}
/>
<div className="flex flex-col">
<span className="font-medium">{table.displayName}</span>
{table.displayName !== table.tableName && (
<span className="text-[10px] text-muted-foreground">{table.tableName}</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{/* ─── 2단계: 필드 배치 ─── */}
{config.dataSource?.tableName && (
<div className="space-y-3">
<div className="flex items-center gap-2">
<Rows className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium truncate">필드 배치</p>
{loadingColumns && (
<span className="text-[11px] text-muted-foreground">(컬럼 로딩 중...)</span>
)}
</div>
<p className="text-[11px] text-muted-foreground">
각 영역에 컬럼을 추가하여 피벗 구조를 만들어요
</p>
<div className="grid gap-3">
<AreaDropZone
area="row"
label="행 그룹"
description="세로로 그룹화할 항목 (예: 지역, 부서, 제품)"
icon={<Rows className="h-4 w-4 text-emerald-600" />}
fields={getFieldsByArea("row")}
columns={columns}
onAddField={(col) => handleAddField("row", col)}
onRemoveField={(idx) => handleRemoveField("row", idx)}
onUpdateField={(idx, updates) => handleUpdateField("row", idx, updates)}
color="border-emerald-200 bg-emerald-50/50"
/>
<AreaDropZone
area="column"
label="열 그룹"
description="가로로 펼칠 항목 (예: 월, 분기, 연도)"
icon={<Columns className="h-4 w-4 text-primary" />}
fields={getFieldsByArea("column")}
columns={columns}
onAddField={(col) => handleAddField("column", col)}
onRemoveField={(idx) => handleRemoveField("column", idx)}
onUpdateField={(idx, updates) => handleUpdateField("column", idx, updates)}
color="border-primary/20 bg-primary/5"
/>
<AreaDropZone
area="data"
label="값 (집계)"
description="합계, 평균 등을 계산할 숫자 항목 (예: 매출, 수량)"
icon={<Calculator className="h-4 w-4 text-amber-600" />}
fields={getFieldsByArea("data")}
columns={columns}
onAddField={(col) => handleAddField("data", col)}
onRemoveField={(idx) => handleRemoveField("data", idx)}
onUpdateField={(idx, updates) => handleUpdateField("data", idx, updates)}
color="border-amber-200 bg-amber-50/50"
/>
</div>
</div>
)}
{/* ─── 3단계: 고급 설정 (Collapsible) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium truncate">고급 설정</span>
<Badge variant="secondary" className="text-[10px] h-5">12개</Badge>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="space-y-4 rounded-b-lg border border-t-0 p-4">
{/* 총계 설정 */}
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground truncate">총계 설정</p>
<div className="grid grid-cols-2 gap-2">
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
<span className="text-xs truncate">행 총계</span>
<Switch
checked={config.totals?.showRowGrandTotals !== false}
onCheckedChange={(v) =>
updateConfig({ totals: { ...config.totals, showRowGrandTotals: v } })
}
/>
</div>
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
<span className="text-xs truncate">열 총계</span>
<Switch
checked={config.totals?.showColumnGrandTotals !== false}
onCheckedChange={(v) =>
updateConfig({ totals: { ...config.totals, showColumnGrandTotals: v } })
}
/>
</div>
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
<span className="text-xs truncate">행 총계 위치</span>
<Select
value={config.totals?.rowGrandTotalPosition || "bottom"}
onValueChange={(v) =>
updateConfig({ totals: { ...config.totals, rowGrandTotalPosition: v as "top" | "bottom" } })
}
>
<SelectTrigger className="h-6 w-16 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="top">상단</SelectItem>
<SelectItem value="bottom">하단</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
<span className="text-xs truncate">열 총계 위치</span>
<Select
value={config.totals?.columnGrandTotalPosition || "right"}
onValueChange={(v) =>
updateConfig({ totals: { ...config.totals, columnGrandTotalPosition: v as "left" | "right" } })
}
>
<SelectTrigger className="h-6 w-16 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="left">좌측</SelectItem>
<SelectItem value="right">우측</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
<span className="text-xs truncate">행 소계</span>
<Switch
checked={config.totals?.showRowTotals !== false}
onCheckedChange={(v) =>
updateConfig({ totals: { ...config.totals, showRowTotals: v } })
}
/>
</div>
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
<span className="text-xs truncate">열 소계</span>
<Switch
checked={config.totals?.showColumnTotals !== false}
onCheckedChange={(v) =>
updateConfig({ totals: { ...config.totals, showColumnTotals: v } })
}
/>
</div>
</div>
</div>
{/* 스타일 설정 */}
<div className="space-y-3">
<p className="text-xs font-medium text-muted-foreground truncate">스타일 설정</p>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">줄무늬 배경</p>
<p className="text-[11px] text-muted-foreground">행마다 번갈아 배경색을 적용해요</p>
</div>
<Switch
checked={config.style?.alternateRowColors !== false}
onCheckedChange={(v) =>
updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, alternateRowColors: v } })
}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">셀 병합</p>
<p className="text-[11px] text-muted-foreground">같은 값을 가진 인접 셀을 병합해요</p>
</div>
<Switch
checked={config.style?.mergeCells === true}
onCheckedChange={(v) =>
updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, mergeCells: v } })
}
/>
</div>
</div>
{/* 크기 설정 */}
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground truncate">크기 설정</p>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<span className="text-[11px] text-muted-foreground">높이</span>
<Input
value={config.height || ""}
onChange={(e) => updateConfig({ height: e.target.value })}
placeholder="400px"
className="h-7 text-xs"
/>
</div>
<div className="space-y-1">
<span className="text-[11px] text-muted-foreground">최대 높이</span>
<Input
value={config.maxHeight || ""}
onChange={(e) => updateConfig({ maxHeight: e.target.value })}
placeholder="600px"
className="h-7 text-xs"
/>
</div>
</div>
</div>
{/* 기능 설정 */}
<div className="space-y-3">
<p className="text-xs font-medium text-muted-foreground truncate">기능 설정</p>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">CSV 내보내기</p>
<p className="text-[11px] text-muted-foreground">데이터를 CSV 파일로 내보낼 수 있어요</p>
</div>
<Switch
checked={config.exportConfig?.excel === true}
onCheckedChange={(v) =>
updateConfig({ exportConfig: { ...config.exportConfig, excel: v } })
}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">전체 확장/축소</p>
<p className="text-[11px] text-muted-foreground">모든 그룹을 한번에 열거나 닫을 수 있어요</p>
</div>
<Switch
checked={config.allowExpandAll !== false}
onCheckedChange={(v) => updateConfig({ allowExpandAll: v })}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">필터링</p>
<p className="text-[11px] text-muted-foreground">필드별 필터를 사용할 수 있어요</p>
</div>
<Switch
checked={config.allowFiltering !== false}
onCheckedChange={(v) => updateConfig({ allowFiltering: v })}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">요약값 기준 정렬</p>
<p className="text-[11px] text-muted-foreground">집계 결과를 클릭해서 정렬할 수 있어요</p>
</div>
<Switch
checked={config.allowSortingBySummary !== false}
onCheckedChange={(v) => updateConfig({ allowSortingBySummary: v })}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">텍스트 줄바꿈</p>
<p className="text-[11px] text-muted-foreground">긴 텍스트를 셀 안에서 줄바꿈해요</p>
</div>
<Switch
checked={config.wordWrapEnabled === true}
onCheckedChange={(v) => updateConfig({ wordWrapEnabled: v })}
/>
</div>
</div>
{/* 조건부 서식 */}
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground truncate">조건부 서식</p>
<div className="space-y-2">
{(config.style?.conditionalFormats || []).map((rule, index) => (
<div key={rule.id} className="flex items-center gap-2 rounded-md bg-muted/30 p-2">
<Select
value={rule.type}
onValueChange={(v) => {
const newFormats = [...(config.style?.conditionalFormats || [])];
newFormats[index] = { ...rule, type: v as ConditionalFormatRule["type"] };
updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
}}
>
<SelectTrigger className="h-7 w-24 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="colorScale">색상 스케일</SelectItem>
<SelectItem value="dataBar">데이터 바</SelectItem>
<SelectItem value="iconSet">아이콘 세트</SelectItem>
<SelectItem value="cellValue">셀 값 조건</SelectItem>
</SelectContent>
</Select>
{rule.type === "colorScale" && (
<div className="flex items-center gap-1">
<input
type="color"
value={rule.colorScale?.minColor || "#ff0000"}
onChange={(e) => {
const newFormats = [...(config.style?.conditionalFormats || [])];
newFormats[index] = {
...rule,
colorScale: {
...rule.colorScale,
minColor: e.target.value,
maxColor: rule.colorScale?.maxColor || "#00ff00",
},
};
updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
}}
className="h-6 w-6 cursor-pointer rounded"
title="최소값 색상"
/>
<span className="text-xs">→</span>
<input
type="color"
value={rule.colorScale?.maxColor || "#00ff00"}
onChange={(e) => {
const newFormats = [...(config.style?.conditionalFormats || [])];
newFormats[index] = {
...rule,
colorScale: {
...rule.colorScale,
minColor: rule.colorScale?.minColor || "#ff0000",
maxColor: e.target.value,
},
};
updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
}}
className="h-6 w-6 cursor-pointer rounded"
title="최대값 색상"
/>
</div>
)}
{rule.type === "dataBar" && (
<input
type="color"
value={rule.dataBar?.color || "#3b82f6"}
onChange={(e) => {
const newFormats = [...(config.style?.conditionalFormats || [])];
newFormats[index] = { ...rule, dataBar: { color: e.target.value } };
updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
}}
className="h-6 w-6 cursor-pointer rounded"
title="바 색상"
/>
)}
{rule.type === "iconSet" && (
<Select
value={rule.iconSet?.type || "traffic"}
onValueChange={(v) => {
const newFormats = [...(config.style?.conditionalFormats || [])];
newFormats[index] = { ...rule, iconSet: { type: v as "arrows" | "traffic" | "rating" | "flags", thresholds: [33, 67] } };
updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
}}
>
<SelectTrigger className="h-7 w-20 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="arrows">화살표</SelectItem>
<SelectItem value="traffic">신호등</SelectItem>
<SelectItem value="rating">별점</SelectItem>
<SelectItem value="flags">깃발</SelectItem>
</SelectContent>
</Select>
)}
<Button
variant="ghost"
size="icon"
className="ml-auto h-6 w-6"
onClick={() => {
const newFormats = (config.style?.conditionalFormats || []).filter((_, i) => i !== index);
updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
}}
>
<X className="h-3 w-3" />
</Button>
</div>
))}
<Button
variant="outline"
size="sm"
className="w-full"
onClick={() => {
const newFormats = [
...(config.style?.conditionalFormats || []),
{
id: `cf_${Date.now()}`,
type: "colorScale" as const,
colorScale: { minColor: "#ff0000", maxColor: "#00ff00" },
},
];
updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
}}
>
<Plus className="mr-1 h-3 w-3" />
조건부 서식 추가
</Button>
</div>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
export default V2PivotGridConfigPanel;

467
frontend/components/v2/config-panels/V2ProcessWorkStandardConfigPanel.tsx Normal file
View File

@ -0,0 +1,467 @@
"use client";
/**
* V2 공정 작업기준 설정 패널
* Progressive Disclosure: 작업 단계 -> 상세 유형 -> 고급 설정(접힘)
*/
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Badge } from "@/components/ui/badge";
import { Settings, ChevronDown, ChevronRight, Plus, Trash2, Database, Layers, List } from "lucide-react";
import { cn } from "@/lib/utils";
import type {
ProcessWorkStandardConfig,
WorkPhaseDefinition,
DetailTypeDefinition,
} from "@/lib/registry/components/v2-process-work-standard/types";
import { defaultConfig } from "@/lib/registry/components/v2-process-work-standard/config";
interface V2ProcessWorkStandardConfigPanelProps {
config: Partial<ProcessWorkStandardConfig>;
onChange: (config: Partial<ProcessWorkStandardConfig>) => void;
}
export const V2ProcessWorkStandardConfigPanel: React.FC<V2ProcessWorkStandardConfigPanelProps> = ({
config: configProp,
onChange,
}) => {
const [phasesOpen, setPhasesOpen] = useState(false);
const [detailTypesOpen, setDetailTypesOpen] = useState(false);
const [advancedOpen, setAdvancedOpen] = useState(false);
const [dataSourceOpen, setDataSourceOpen] = useState(false);
const config: ProcessWorkStandardConfig = {
...defaultConfig,
...configProp,
dataSource: { ...defaultConfig.dataSource, ...configProp?.dataSource },
phases: configProp?.phases?.length ? configProp.phases : defaultConfig.phases,
detailTypes: configProp?.detailTypes?.length ? configProp.detailTypes : defaultConfig.detailTypes,
};
const update = (partial: Partial<ProcessWorkStandardConfig>) => {
onChange({ ...configProp, ...partial });
};
const updateDataSource = (field: string, value: string) => {
update({ dataSource: { ...config.dataSource, [field]: value } });
};
// ─── 작업 단계 관리 ───
const addPhase = () => {
const nextOrder = config.phases.length + 1;
update({
phases: [
...config.phases,
{ key: `PHASE_${nextOrder}`, label: `단계 ${nextOrder}`, sortOrder: nextOrder },
],
});
};
const removePhase = (idx: number) => {
update({ phases: config.phases.filter((_, i) => i !== idx) });
};
const updatePhase = (idx: number, field: keyof WorkPhaseDefinition, value: string | number) => {
const next = [...config.phases];
next[idx] = { ...next[idx], [field]: value };
update({ phases: next });
};
// ─── 상세 유형 관리 ───
const addDetailType = () => {
update({
detailTypes: [
...config.detailTypes,
{ value: `TYPE_${config.detailTypes.length + 1}`, label: "신규 유형" },
],
});
};
const removeDetailType = (idx: number) => {
update({ detailTypes: config.detailTypes.filter((_, i) => i !== idx) });
};
const updateDetailType = (idx: number, field: keyof DetailTypeDefinition, value: string) => {
const next = [...config.detailTypes];
next[idx] = { ...next[idx], [field]: value };
update({ detailTypes: next });
};
return (
<div className="space-y-4">
{/* ─── 1단계: 작업 단계 설정 (Collapsible + 접이식 카드) ─── */}
<Collapsible open={phasesOpen} onOpenChange={setPhasesOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Layers className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">작업 단계</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.phases.length}개
</Badge>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
phasesOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
<p className="text-[10px] text-muted-foreground mb-1">공정별 작업 단계(Phase)를 정의</p>
<div className="space-y-1">
{config.phases.map((phase, idx) => (
<Collapsible key={idx}>
<div className="rounded-md border">
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
>
<ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
<span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
<span className="text-xs font-medium truncate flex-1 min-w-0">{phase.label}</span>
<Badge variant="outline" className="text-[9px] h-4 shrink-0">{phase.key}</Badge>
<Button
type="button"
variant="ghost"
size="sm"
onClick={(e) => { e.stopPropagation(); removePhase(idx); }}
className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
disabled={config.phases.length <= 1}
>
<Trash2 className="h-3 w-3" />
</Button>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="grid grid-cols-3 gap-1.5 border-t px-2.5 py-2">
<div className="space-y-0.5">
<span className="text-[10px] text-muted-foreground">키</span>
<Input
value={phase.key}
onChange={(e) => updatePhase(idx, "key", e.target.value)}
className="h-7 text-xs"
placeholder="키"
/>
</div>
<div className="space-y-0.5">
<span className="text-[10px] text-muted-foreground">표시명</span>
<Input
value={phase.label}
onChange={(e) => updatePhase(idx, "label", e.target.value)}
className="h-7 text-xs"
placeholder="표시명"
/>
</div>
<div className="space-y-0.5">
<span className="text-[10px] text-muted-foreground">순서</span>
<Input
type="number"
min={1}
value={phase.sortOrder}
onChange={(e) => updatePhase(idx, "sortOrder", parseInt(e.target.value) || 1)}
className="h-7 text-xs text-center"
placeholder="1"
/>
</div>
</div>
</CollapsibleContent>
</div>
</Collapsible>
))}
</div>
<Button
variant="outline"
size="sm"
className="h-7 w-full gap-1 text-xs border-dashed"
onClick={addPhase}
>
<Plus className="h-3 w-3" />
단계 추가
</Button>
</div>
</CollapsibleContent>
</Collapsible>
{/* ─── 2단계: 상세 유형 옵션 (Collapsible + 접이식 카드) ─── */}
<Collapsible open={detailTypesOpen} onOpenChange={setDetailTypesOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<List className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">상세 유형</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.detailTypes.length}개
</Badge>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
detailTypesOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
<p className="text-[10px] text-muted-foreground mb-1">작업 항목의 상세 유형 드롭다운 옵션</p>
<div className="space-y-1">
{config.detailTypes.map((dt, idx) => (
<Collapsible key={idx}>
<div className="rounded-md border">
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
>
<ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
<span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
<span className="text-xs font-medium truncate flex-1 min-w-0">{dt.label}</span>
<Badge variant="outline" className="text-[9px] h-4 shrink-0">{dt.value}</Badge>
<Button
type="button"
variant="ghost"
size="sm"
onClick={(e) => { e.stopPropagation(); removeDetailType(idx); }}
className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
disabled={config.detailTypes.length <= 1}
>
<Trash2 className="h-3 w-3" />
</Button>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="grid grid-cols-2 gap-1.5 border-t px-2.5 py-2">
<div className="space-y-0.5">
<span className="text-[10px] text-muted-foreground">값</span>
<Input
value={dt.value}
onChange={(e) => updateDetailType(idx, "value", e.target.value)}
className="h-7 text-xs"
placeholder="값"
/>
</div>
<div className="space-y-0.5">
<span className="text-[10px] text-muted-foreground">표시명</span>
<Input
value={dt.label}
onChange={(e) => updateDetailType(idx, "label", e.target.value)}
className="h-7 text-xs"
placeholder="표시명"
/>
</div>
</div>
</CollapsibleContent>
</div>
</Collapsible>
))}
</div>
<Button
variant="outline"
size="sm"
className="h-7 w-full gap-1 text-xs border-dashed"
onClick={addDetailType}
>
<Plus className="h-3 w-3" />
유형 추가
</Button>
</div>
</CollapsibleContent>
</Collapsible>
{/* ─── 3단계: 고급 설정 (데이터 소스 + 레이아웃 통합) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
{/* 레이아웃 기본 설정 */}
<div className="space-y-2">
<div className="flex items-center justify-between py-1">
<div>
<span className="text-xs text-muted-foreground">좌측 패널 비율 (%)</span>
<p className="text-[10px] text-muted-foreground mt-0.5">품목/공정 선택 패널의 너비</p>
</div>
<Input
type="number"
min={15}
max={50}
value={config.splitRatio || 30}
onChange={(e) => update({ splitRatio: parseInt(e.target.value) || 30 })}
className="h-7 w-[80px] text-xs"
/>
</div>
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">좌측 패널 제목</span>
<Input
value={config.leftPanelTitle || ""}
onChange={(e) => update({ leftPanelTitle: e.target.value })}
placeholder="품목 및 공정 선택"
className="h-7 w-[140px] text-xs"
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-xs">읽기 전용</p>
<p className="text-[10px] text-muted-foreground">수정/삭제 버튼을 숨겨요</p>
</div>
<Switch
checked={config.readonly || false}
onCheckedChange={(checked) => update({ readonly: checked })}
/>
</div>
</div>
{/* 데이터 소스 (서브 Collapsible) */}
<Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-md border px-3 py-2 transition-colors hover:bg-muted/30"
>
<div className="flex items-center gap-2">
<Database className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-medium">데이터 소스</span>
{config.dataSource.itemTable && (
<Badge variant="secondary" className="text-[10px] h-5 truncate max-w-[100px]">
{config.dataSource.itemTable}
</Badge>
)}
</div>
<ChevronDown
className={cn(
"h-3.5 w-3.5 text-muted-foreground transition-transform",
dataSourceOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 pt-2">
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">품목 테이블</span>
<Input
value={config.dataSource.itemTable}
onChange={(e) => updateDataSource("itemTable", e.target.value)}
className="h-7 w-full text-xs"
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">품목명 컬럼</span>
<Input
value={config.dataSource.itemNameColumn}
onChange={(e) => updateDataSource("itemNameColumn", e.target.value)}
className="h-7 text-xs"
/>
</div>
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">품목코드 컬럼</span>
<Input
value={config.dataSource.itemCodeColumn}
onChange={(e) => updateDataSource("itemCodeColumn", e.target.value)}
className="h-7 text-xs"
/>
</div>
</div>
<div className="space-y-1 pt-1">
<span className="text-[10px] text-muted-foreground">라우팅 버전 테이블</span>
<Input
value={config.dataSource.routingVersionTable}
onChange={(e) => updateDataSource("routingVersionTable", e.target.value)}
className="h-7 w-full text-xs"
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">품목 연결 FK</span>
<Input
value={config.dataSource.routingFkColumn}
onChange={(e) => updateDataSource("routingFkColumn", e.target.value)}
className="h-7 text-xs"
/>
</div>
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">버전명 컬럼</span>
<Input
value={config.dataSource.routingVersionNameColumn}
onChange={(e) => updateDataSource("routingVersionNameColumn", e.target.value)}
className="h-7 text-xs"
/>
</div>
</div>
<div className="space-y-1 pt-1">
<span className="text-[10px] text-muted-foreground">라우팅 상세 테이블</span>
<Input
value={config.dataSource.routingDetailTable}
onChange={(e) => updateDataSource("routingDetailTable", e.target.value)}
className="h-7 w-full text-xs"
/>
</div>
<div className="space-y-1 pt-1">
<span className="text-[10px] text-muted-foreground">공정 마스터 테이블</span>
<Input
value={config.dataSource.processTable}
onChange={(e) => updateDataSource("processTable", e.target.value)}
className="h-7 w-full text-xs"
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">공정명 컬럼</span>
<Input
value={config.dataSource.processNameColumn}
onChange={(e) => updateDataSource("processNameColumn", e.target.value)}
className="h-7 text-xs"
/>
</div>
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">공정코드 컬럼</span>
<Input
value={config.dataSource.processCodeColumn}
onChange={(e) => updateDataSource("processCodeColumn", e.target.value)}
className="h-7 text-xs"
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2ProcessWorkStandardConfigPanel.displayName = "V2ProcessWorkStandardConfigPanel";
export default V2ProcessWorkStandardConfigPanel;

267
frontend/components/v2/config-panels/V2RackStructureConfigPanel.tsx Normal file
View File

@ -0,0 +1,267 @@
"use client";
/**
* V2 렉 구조 설정 패널
* 토스식 단계별 UX: 필드 매핑 -> 제한 설정 -> UI 설정(접힘)
*/
import React, { useState, useEffect, useMemo } from "react";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Badge } from "@/components/ui/badge";
import { Database, SlidersHorizontal, Settings, ChevronDown, CheckCircle2, Circle } from "lucide-react";
import { cn } from "@/lib/utils";
import type { RackStructureComponentConfig, FieldMapping } from "@/lib/registry/components/v2-rack-structure/types";
interface V2RackStructureConfigPanelProps {
config: RackStructureComponentConfig;
onChange: (config: RackStructureComponentConfig) => void;
tables?: Array<{
tableName: string;
tableLabel?: string;
columns: Array<{
columnName: string;
columnLabel?: string;
dataType?: string;
}>;
}>;
}
export const V2RackStructureConfigPanel: React.FC<V2RackStructureConfigPanelProps> = ({
config,
onChange,
tables = [],
}) => {
const [availableColumns, setAvailableColumns] = useState<
Array<{ value: string; label: string }>
>([]);
const [advancedOpen, setAdvancedOpen] = useState(false);
useEffect(() => {
const columns: Array<{ value: string; label: string }> = [];
tables.forEach((table) => {
table.columns.forEach((col) => {
columns.push({
value: col.columnName,
label: col.columnLabel || col.columnName,
});
});
});
setAvailableColumns(columns);
}, [tables]);
const handleChange = (key: keyof RackStructureComponentConfig, value: any) => {
onChange({ ...config, [key]: value });
};
const handleFieldMappingChange = (field: keyof FieldMapping, value: string) => {
const currentMapping = config.fieldMapping || {};
onChange({
...config,
fieldMapping: {
...currentMapping,
[field]: value === "__none__" ? undefined : value,
},
});
};
const fieldMapping = config.fieldMapping || {};
const fieldMappingItems: Array<{
key: keyof FieldMapping;
label: string;
description: string;
}> = [
{ key: "warehouseCodeField", label: "창고 코드", description: "창고를 식별하는 코드 필드예요" },
{ key: "warehouseNameField", label: "창고명", description: "창고 이름을 표시하는 필드예요" },
{ key: "floorField", label: "층", description: "몇 층인지 나타내는 필드예요" },
{ key: "zoneField", label: "구역", description: "구역 정보를 가져올 필드예요" },
{ key: "locationTypeField", label: "위치 유형", description: "위치의 유형(선반, 바닥 등)을 나타내요" },
{ key: "statusField", label: "사용 여부", description: "사용/미사용 상태를 나타내는 필드예요" },
];
const mappedCount = useMemo(
() => fieldMappingItems.filter((item) => fieldMapping[item.key]).length,
[fieldMapping]
);
return (
<div className="space-y-4">
{/* ─── 1단계: 필드 매핑 ─── */}
<div className="space-y-1">
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-primary" />
<p className="text-sm font-medium">필드 매핑</p>
<Badge variant="secondary" className="ml-auto text-[10px] px-1.5 py-0">
{mappedCount}/{fieldMappingItems.length}
</Badge>
</div>
<p className="text-[11px] text-muted-foreground pl-6">
상위 폼의 필드 중 렉 생성에 사용할 필드를 선택해요
</p>
</div>
<div className="space-y-1.5">
{fieldMappingItems.map((item) => {
const isMapped = !!fieldMapping[item.key];
return (
<div
key={item.key}
className={cn(
"flex items-center gap-3 rounded-lg border px-3 py-2 transition-colors",
isMapped ? "border-primary/30 bg-primary/5" : "bg-muted/30"
)}
>
{isMapped ? (
<CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-primary" />
) : (
<Circle className="h-3.5 w-3.5 shrink-0 text-muted-foreground/40" />
)}
<div className="min-w-0 flex-1">
<p className="text-xs font-medium truncate">{item.label}</p>
<p className="text-[10px] text-muted-foreground truncate">{item.description}</p>
</div>
<Select
value={fieldMapping[item.key] || "__none__"}
onValueChange={(v) => handleFieldMappingChange(item.key, v)}
>
<SelectTrigger className="h-7 w-[120px] shrink-0 text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__">선택 안함</SelectItem>
{availableColumns.map((col) => (
<SelectItem key={col.value} value={col.value}>
{col.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
})}
</div>
{/* ─── 2단계: 제한 설정 ─── */}
<div className="space-y-1">
<div className="flex items-center gap-2">
<SlidersHorizontal className="h-4 w-4 text-primary" />
<p className="text-sm font-medium">제한 설정</p>
</div>
<p className="text-[11px] text-muted-foreground pl-6">
렉 조건의 최대값을 설정해요
</p>
</div>
<div className="grid grid-cols-3 gap-2">
<div className="rounded-lg border bg-muted/30 p-3 text-center space-y-1.5">
<p className="text-[10px] text-muted-foreground">최대 조건</p>
<Input
type="number"
min={1}
max={20}
value={config.maxConditions || 10}
onChange={(e) => handleChange("maxConditions", parseInt(e.target.value) || 10)}
className="h-7 text-xs text-center"
/>
</div>
<div className="rounded-lg border bg-muted/30 p-3 text-center space-y-1.5">
<p className="text-[10px] text-muted-foreground">최대 열</p>
<Input
type="number"
min={1}
max={999}
value={config.maxRows || 99}
onChange={(e) => handleChange("maxRows", parseInt(e.target.value) || 99)}
className="h-7 text-xs text-center"
/>
</div>
<div className="rounded-lg border bg-muted/30 p-3 text-center space-y-1.5">
<p className="text-[10px] text-muted-foreground">최대 단</p>
<Input
type="number"
min={1}
max={99}
value={config.maxLevels || 20}
onChange={(e) => handleChange("maxLevels", parseInt(e.target.value) || 20)}
className="h-7 text-xs text-center"
/>
</div>
</div>
{/* ─── 3단계: 고급 설정 (Collapsible) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">UI 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<div className="min-w-0 flex-1 mr-3">
<p className="text-xs font-medium">템플릿 기능</p>
<p className="text-[10px] text-muted-foreground">조건을 템플릿으로 저장/불러오기할 수 있어요</p>
</div>
<Switch
checked={config.showTemplates ?? true}
onCheckedChange={(checked) => handleChange("showTemplates", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div className="min-w-0 flex-1 mr-3">
<p className="text-xs font-medium">미리보기</p>
<p className="text-[10px] text-muted-foreground">생성될 위치를 미리 확인할 수 있어요</p>
</div>
<Switch
checked={config.showPreview ?? true}
onCheckedChange={(checked) => handleChange("showPreview", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div className="min-w-0 flex-1 mr-3">
<p className="text-xs font-medium">통계 카드</p>
<p className="text-[10px] text-muted-foreground">총 위치 수 등 통계를 카드로 표시해요</p>
</div>
<Switch
checked={config.showStatistics ?? true}
onCheckedChange={(checked) => handleChange("showStatistics", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div className="min-w-0 flex-1 mr-3">
<p className="text-xs font-medium">읽기 전용</p>
<p className="text-[10px] text-muted-foreground">조건을 수정할 수 없게 해요</p>
</div>
<Switch
checked={config.readonly ?? false}
onCheckedChange={(checked) => handleChange("readonly", checked)}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2RackStructureConfigPanel.displayName = "V2RackStructureConfigPanel";
export default V2RackStructureConfigPanel;

1266
frontend/components/v2/config-panels/V2RepeatContainerConfigPanel.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

2413
frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
View File

File diff suppressed because it is too large Load Diff

277
frontend/components/v2/config-panels/V2SectionCardConfigPanel.tsx Normal file
View File

@ -0,0 +1,277 @@
"use client";
/**
* V2SectionCard 설정 패널
* 토스식 단계별 UX: 패딩 카드 선택 -> 배경/테두리 설정 -> 고급 설정(접힘)
*/
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
Settings,
ChevronDown,
Square,
Minus,
SquareDashed,
} from "lucide-react";
import { cn } from "@/lib/utils";
// ─── 내부 여백 카드 정의 ───
const PADDING_CARDS = [
{ value: "none", label: "없음", size: "0px" },
{ value: "sm", label: "작게", size: "12px" },
{ value: "md", label: "중간", size: "24px" },
{ value: "lg", label: "크게", size: "32px" },
] as const;
// ─── 배경색 카드 정의 ───
const BG_CARDS = [
{ value: "default", label: "카드", description: "기본 카드 배경" },
{ value: "muted", label: "회색", description: "연한 회색 배경" },
{ value: "transparent", label: "투명", description: "배경 없음" },
] as const;
// ─── 테두리 스타일 카드 정의 ───
const BORDER_CARDS = [
{ value: "solid", label: "실선", icon: Minus },
{ value: "dashed", label: "점선", icon: SquareDashed },
{ value: "none", label: "없음", icon: Square },
] as const;
interface V2SectionCardConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
}
export const V2SectionCardConfigPanel: React.FC<
V2SectionCardConfigPanelProps
> = ({ config, onChange }) => {
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
const newConfig = { ...config, [field]: value };
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
};
return (
<div className="space-y-4">
{/* ─── 1단계: 헤더 설정 ─── */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium">헤더 표시</p>
<p className="text-[11px] text-muted-foreground">
섹션 상단에 제목과 설명을 표시해요
</p>
</div>
<Switch
checked={config.showHeader !== false}
onCheckedChange={(checked) => updateConfig("showHeader", checked)}
/>
</div>
{config.showHeader !== false && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">제목</span>
<Input
value={config.title || ""}
onChange={(e) => updateConfig("title", e.target.value)}
placeholder="섹션 제목 입력"
className="h-7 w-[180px] text-xs"
/>
</div>
<div>
<span className="text-xs text-muted-foreground">설명 (선택)</span>
<Textarea
value={config.description || ""}
onChange={(e) => updateConfig("description", e.target.value)}
placeholder="섹션에 대한 간단한 설명"
className="mt-1.5 text-xs resize-none"
rows={2}
/>
</div>
</div>
)}
</div>
{/* ─── 2단계: 내부 여백 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">내부 여백</p>
<div className="grid grid-cols-4 gap-2">
{PADDING_CARDS.map((card) => {
const isSelected = (config.padding || "md") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("padding", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span className="text-xs font-medium">{card.label}</span>
<span className="text-[10px] text-muted-foreground mt-0.5">
{card.size}
</span>
</button>
);
})}
</div>
</div>
{/* ─── 3단계: 외관 설정 ─── */}
<div className="space-y-3">
<p className="text-sm font-medium">외관</p>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
{/* 배경색 */}
<div>
<span className="text-xs text-muted-foreground">배경색</span>
<div className="mt-1.5 grid grid-cols-3 gap-2">
{BG_CARDS.map((card) => {
const isSelected =
(config.backgroundColor || "default") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() =>
updateConfig("backgroundColor", card.value)
}
className={cn(
"flex flex-col items-center rounded-md border p-2 text-center transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span className="text-xs font-medium">{card.label}</span>
<span className="text-[10px] text-muted-foreground">
{card.description}
</span>
</button>
);
})}
</div>
</div>
{/* 테두리 스타일 */}
<div>
<span className="text-xs text-muted-foreground">테두리</span>
<div className="mt-1.5 grid grid-cols-3 gap-2">
{BORDER_CARDS.map((card) => {
const Icon = card.icon;
const isSelected =
(config.borderStyle || "solid") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("borderStyle", card.value)}
className={cn(
"flex flex-col items-center rounded-md border p-2 text-center transition-all gap-1",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="h-4 w-4 text-muted-foreground" />
<span className="text-xs font-medium">{card.label}</span>
</button>
);
})}
</div>
</div>
</div>
</div>
{/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 접기/펼치기 */}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">접기/펼치기</p>
<p className="text-[11px] text-muted-foreground">
사용자가 섹션을 접거나 펼칠 수 있어요
</p>
</div>
<Switch
checked={config.collapsible || false}
onCheckedChange={(checked) =>
updateConfig("collapsible", checked)
}
/>
</div>
{config.collapsible && (
<div className="ml-4 border-l-2 border-primary/20 pl-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">기본으로 펼치기</p>
<p className="text-[11px] text-muted-foreground">
화면 로드 시 섹션이 펼쳐진 상태에요
</p>
</div>
<Switch
checked={config.defaultOpen !== false}
onCheckedChange={(checked) =>
updateConfig("defaultOpen", checked)
}
/>
</div>
</div>
)}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2SectionCardConfigPanel.displayName = "V2SectionCardConfigPanel";
export default V2SectionCardConfigPanel;

275
frontend/components/v2/config-panels/V2SectionPaperConfigPanel.tsx Normal file
View File

@ -0,0 +1,275 @@
"use client";
/**
* V2SectionPaper 설정 패널
* 토스식 단계별 UX: 배경색 카드 선택 -> 여백/모서리 카드 선택 -> 고급 설정(접힘)
*/
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Settings, ChevronDown, Palette } from "lucide-react";
import { cn } from "@/lib/utils";
// ─── 배경색 카드 정의 ───
const BG_CARDS = [
{ value: "default", label: "기본", description: "연한 회색" },
{ value: "muted", label: "회색", description: "조금 더 진한" },
{ value: "accent", label: "강조", description: "연한 파랑" },
{ value: "primary", label: "브랜드", description: "브랜드 컬러" },
{ value: "custom", label: "커스텀", description: "직접 선택" },
] as const;
// ─── 내부 여백 카드 정의 ───
const PADDING_CARDS = [
{ value: "none", label: "없음", size: "0px" },
{ value: "sm", label: "작게", size: "12px" },
{ value: "md", label: "중간", size: "16px" },
{ value: "lg", label: "크게", size: "24px" },
] as const;
// ─── 둥근 모서리 카드 정의 ───
const ROUNDED_CARDS = [
{ value: "none", label: "없음", size: "0px" },
{ value: "sm", label: "작게", size: "2px" },
{ value: "md", label: "중간", size: "6px" },
{ value: "lg", label: "크게", size: "8px" },
] as const;
// ─── 그림자 카드 정의 ───
const SHADOW_CARDS = [
{ value: "none", label: "없음" },
{ value: "sm", label: "작게" },
{ value: "md", label: "중간" },
] as const;
interface V2SectionPaperConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
}
export const V2SectionPaperConfigPanel: React.FC<
V2SectionPaperConfigPanelProps
> = ({ config, onChange }) => {
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
const newConfig = { ...config, [field]: value };
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
};
const selectedBg = config.backgroundColor || "default";
return (
<div className="space-y-4">
{/* ─── 1단계: 배경색 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">배경색</p>
<div className="grid grid-cols-3 gap-2">
{BG_CARDS.map((card) => {
const isSelected = selectedBg === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("backgroundColor", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
{card.value === "custom" ? (
<Palette className="h-4 w-4 mb-0.5 text-muted-foreground" />
) : null}
<span className="text-xs font-medium">{card.label}</span>
<span className="text-[10px] text-muted-foreground mt-0.5">
{card.description}
</span>
</button>
);
})}
</div>
<p className="text-[11px] text-muted-foreground">
색종이 컨셉의 배경색을 선택해요
</p>
</div>
{/* 커스텀 색상 선택 */}
{selectedBg === "custom" && (
<div className="rounded-lg border bg-muted/30 p-4">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">커스텀 색상</span>
<Input
type="color"
value={config.customColor || "#f0f0f0"}
onChange={(e) => updateConfig("customColor", e.target.value)}
className="h-8 w-[80px] cursor-pointer"
/>
</div>
</div>
)}
{/* ─── 2단계: 내부 여백 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">내부 여백</p>
<div className="grid grid-cols-4 gap-2">
{PADDING_CARDS.map((card) => {
const isSelected = (config.padding || "md") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("padding", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span className="text-xs font-medium">{card.label}</span>
<span className="text-[10px] text-muted-foreground mt-0.5">
{card.size}
</span>
</button>
);
})}
</div>
</div>
{/* ─── 3단계: 모서리 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">둥근 모서리</p>
<div className="grid grid-cols-4 gap-2">
{ROUNDED_CARDS.map((card) => {
const isSelected =
(config.roundedCorners || "md") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("roundedCorners", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span className="text-xs font-medium">{card.label}</span>
<span className="text-[10px] text-muted-foreground mt-0.5">
{card.size}
</span>
</button>
);
})}
</div>
</div>
{/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 그림자 */}
<div>
<span className="text-xs text-muted-foreground">그림자</span>
<div className="mt-1.5 grid grid-cols-3 gap-2">
{SHADOW_CARDS.map((card) => {
const isSelected =
(config.shadow || "none") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("shadow", card.value)}
className={cn(
"flex items-center justify-center rounded-md border p-2 text-center transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span className="text-xs font-medium">{card.label}</span>
</button>
);
})}
</div>
</div>
{/* 테두리 표시 */}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">미묘한 테두리</p>
<p className="text-[11px] text-muted-foreground">
섹션 경계를 살짝 구분하는 테두리에요
</p>
</div>
<Switch
checked={config.showBorder || false}
onCheckedChange={(checked) =>
updateConfig("showBorder", checked)
}
/>
</div>
{/* 테두리 스타일 */}
{config.showBorder && (
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">테두리 스타일</span>
<Select
value={config.borderStyle || "subtle"}
onValueChange={(value) => updateConfig("borderStyle", value)}
>
<SelectTrigger className="h-7 w-[100px] text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="none">없음</SelectItem>
<SelectItem value="subtle">은은하게</SelectItem>
</SelectContent>
</Select>
</div>
)}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2SectionPaperConfigPanel.displayName = "V2SectionPaperConfigPanel";
export default V2SectionPaperConfigPanel;

677
frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
View File

@ -2,17 +2,18 @@
/**
* V2Select 설정 패널
* 통합 선택 컴포넌트의 세부 설정을 관리합니다.
* 토스식 단계별 UX: 소스 카드 선택 -> 소스별 설정 -> 고급 설정(접힘)
*/
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Plus, Trash2, Loader2, Filter } from "lucide-react";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Separator } from "@/components/ui/separator";
import { List, Database, FolderTree, Settings, ChevronDown, Plus, Trash2, Loader2, Filter } from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import type { V2SelectFilter } from "@/types/v2-components";
@ -53,6 +54,28 @@ const USER_FIELD_OPTIONS = [
{ value: "userName", label: "사용자명" },
] as const;
// ─── 데이터 소스 카드 정의 ───
const SOURCE_CARDS = [
{
value: "static",
icon: List,
title: "직접 입력",
description: "옵션을 직접 추가해요",
},
{
value: "category",
icon: FolderTree,
title: "카테고리",
description: "등록된 선택지를 사용해요",
},
{
value: "entity",
icon: Database,
title: "테이블 참조",
description: "다른 테이블에서 가져와요",
},
] as const;
/**
* 필터 조건 설정 서브 컴포넌트
*/
@ -75,7 +98,6 @@ const FilterConditionsSection: React.FC<{
const updated = [...filters];
updated[index] = { ...updated[index], ...patch };
// valueType 변경 시 관련 필드 초기화
if (patch.valueType) {
if (patch.valueType === "static") {
updated[index].fieldRef = undefined;
@ -89,7 +111,6 @@ const FilterConditionsSection: React.FC<{
}
}
// isNull/isNotNull 연산자는 값 불필요
if (patch.operator === "isNull" || patch.operator === "isNotNull") {
updated[index].value = undefined;
updated[index].fieldRef = undefined;
@ -107,11 +128,11 @@ const FilterConditionsSection: React.FC<{
const needsValue = (op: string) => op !== "isNull" && op !== "isNotNull";
return (
<div className="space-y-3">
<div className="space-y-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-1.5">
<Filter className="h-3.5 w-3.5 text-muted-foreground" />
<Label className="text-xs font-medium">데이터 필터 조건</Label>
<span className="text-xs font-medium">데이터 필터</span>
</div>
<Button
type="button"
@ -142,12 +163,10 @@ const FilterConditionsSection: React.FC<{
</p>
)}
<div className="space-y-3">
<div className="space-y-2">
{filters.map((filter, index) => (
<div key={index} className="space-y-1.5 rounded-md border p-2">
{/* 행 1: 컬럼 + 연산자 + 삭제 */}
<div key={index} className="space-y-2 rounded-md border p-3">
<div className="flex items-center gap-1.5">
{/* 컬럼 선택 */}
<Select
value={filter.column || ""}
onValueChange={(v) => updateFilter(index, { column: v })}
@ -164,12 +183,11 @@ const FilterConditionsSection: React.FC<{
</SelectContent>
</Select>
{/* 연산자 선택 */}
<Select
value={filter.operator || "="}
onValueChange={(v) => updateFilter(index, { operator: v as V2SelectFilter["operator"] })}
>
<SelectTrigger className="h-7 w-[90px] shrink-0 text-[11px]">
<SelectTrigger className="h-7 flex-1 text-[11px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
@ -181,22 +199,19 @@ const FilterConditionsSection: React.FC<{
</SelectContent>
</Select>
{/* 삭제 버튼 */}
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeFilter(index)}
className="text-destructive h-7 w-7 shrink-0 p-0"
className="text-destructive h-8 w-8 shrink-0 p-0"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
{/* 행 2: 값 유형 + 값 입력 (isNull/isNotNull 제외) */}
{needsValue(filter.operator) && (
<div className="flex items-center gap-1.5">
{/* 값 유형 */}
<Select
value={filter.valueType || "static"}
onValueChange={(v) => updateFilter(index, { valueType: v as V2SelectFilter["valueType"] })}
@ -213,7 +228,6 @@ const FilterConditionsSection: React.FC<{
</SelectContent>
</Select>
{/* 값 입력 영역 */}
{(filter.valueType || "static") === "static" && (
<Input
value={String(filter.value ?? "")}
@ -261,12 +275,11 @@ const FilterConditionsSection: React.FC<{
interface V2SelectConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
/** 컬럼의 inputType (entity/category 타입 확인용) */
inputType?: string;
/** 현재 테이블명 (카테고리 값 조회용) */
tableName?: string;
/** 현재 컬럼명 (카테고리 값 조회용) */
columnName?: string;
tables?: Array<{ tableName: string; displayName?: string; tableComment?: string }>;
screenTableName?: string;
}
export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
@ -275,26 +288,27 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
inputType,
tableName,
columnName,
tables = [],
screenTableName,
}) => {
const isEntityType = inputType === "entity";
const isEntityType = inputType === "entity" || config.source === "entity" || !!config.entityTable;
const isCategoryType = inputType === "category";
const [entityColumns, setEntityColumns] = useState<ColumnOption[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
// 카테고리 값 목록
const [categoryValues, setCategoryValues] = useState<CategoryValueOption[]>([]);
const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);
// 필터용 컬럼 목록 (옵션 데이터 소스 테이블의 컬럼)
const [filterColumns, setFilterColumns] = useState<ColumnOption[]>([]);
const [loadingFilterColumns, setLoadingFilterColumns] = useState(false);
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
// 필터 대상 테이블 결정
const filterTargetTable = useMemo(() => {
const src = config.source || "static";
if (src === "entity") return config.entityTable;
@ -303,7 +317,6 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
return null;
}, [config.source, config.entityTable, config.table, tableName]);
// 필터 대상 테이블의 컬럼 로드
useEffect(() => {
if (!filterTargetTable) {
setFilterColumns([]);
@ -332,14 +345,13 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
loadFilterColumns();
}, [filterTargetTable]);
// 카테고리 타입이면 source를 자동으로 category로 설정
// 초기 source가 설정 안 된 경우에만 기본값 설정
useEffect(() => {
if (isCategoryType && config.source !== "category") {
if (!config.source && isCategoryType) {
onChange({ ...config, source: "category" });
}
}, [isCategoryType]);
}, []);
// 카테고리 값 로드
const loadCategoryValues = useCallback(async (catTable: string, catColumn: string) => {
if (!catTable || !catColumn) {
setCategoryValues([]);
@ -374,9 +386,8 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
}
}, []);
// 카테고리 소스일 때 값 로드
useEffect(() => {
if (config.source === "category") {
if (config.source === "category" || config.source === "code") {
const catTable = config.categoryTable || tableName;
const catColumn = config.categoryColumn || columnName;
if (catTable && catColumn) {
@ -385,7 +396,6 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
}
}, [config.source, config.categoryTable, config.categoryColumn, tableName, columnName, loadCategoryValues]);
// 엔티티 테이블 변경 시 컬럼 목록 조회
const loadEntityColumns = useCallback(async (tblName: string) => {
if (!tblName) {
setEntityColumns([]);
@ -423,7 +433,6 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
}
}, [config.source, config.entityTable, loadEntityColumns]);
// 정적 옵션 관리
const options = config.options || [];
const addOption = () => {
@ -442,218 +451,140 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
updateConfig("options", newOptions);
};
// 현재 source 결정 (카테고리 타입이면 강제 category)
const effectiveSource = isCategoryType ? "category" : config.source || "static";
const effectiveSource = config.source === "code"
? "category"
: config.source || (isCategoryType ? "category" : "static");
const visibleCards = SOURCE_CARDS;
const gridCols = "grid-cols-3";
return (
<div className="space-y-4">
{/* 선택 모드 */}
{/* ─── 1단계: 데이터 소스 선택 ─── */}
<div className="space-y-2">
<Label className="text-xs font-medium">선택 모드</Label>
<Select value={config.mode || "dropdown"} onValueChange={(value) => updateConfig("mode", value)}>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="모드 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="dropdown">드롭다운</SelectItem>
<SelectItem value="combobox">콤보박스 (검색)</SelectItem>
<SelectItem value="radio">라디오 버튼</SelectItem>
<SelectItem value="check">체크박스</SelectItem>
<SelectItem value="tag">태그 선택</SelectItem>
<SelectItem value="tagbox">태그박스 (태그+드롭다운)</SelectItem>
<SelectItem value="toggle">토글 스위치</SelectItem>
<SelectItem value="swap">스왑 선택</SelectItem>
</SelectContent>
</Select>
</div>
<Separator />
{/* 데이터 소스 */}
<div className="space-y-2">
<Label className="text-xs font-medium">데이터 소스</Label>
{isCategoryType ? (
<div className="bg-muted flex h-8 items-center rounded-md px-3">
<span className="text-xs font-medium text-emerald-600">카테고리 (자동 설정)</span>
</div>
) : (
<Select value={config.source || "static"} onValueChange={(value) => updateConfig("source", value)}>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="소스 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="static">정적 옵션</SelectItem>
<SelectItem value="code">공통 코드</SelectItem>
<SelectItem value="category">카테고리</SelectItem>
{isEntityType && <SelectItem value="entity">엔티티</SelectItem>}
</SelectContent>
</Select>
)}
</div>
{/* 카테고리 설정 */}
{effectiveSource === "category" && (
<div className="space-y-3">
<div className="space-y-1">
<Label className="text-xs font-medium">카테고리 정보</Label>
<div className="bg-muted rounded-md p-2">
<div className="grid grid-cols-2 gap-2">
<div>
<p className="text-muted-foreground text-[10px]">테이블</p>
<p className="text-xs font-medium">{config.categoryTable || tableName || "-"}</p>
</div>
<div>
<p className="text-muted-foreground text-[10px]">컬럼</p>
<p className="text-xs font-medium">{config.categoryColumn || columnName || "-"}</p>
</div>
</div>
</div>
</div>
{/* 카테고리 값 로딩 중 */}
{loadingCategoryValues && (
<div className="text-muted-foreground flex items-center gap-2 text-xs">
<Loader2 className="h-3 w-3 animate-spin" />
카테고리 값 로딩 중...
</div>
)}
{/* 카테고리 값 목록 표시 */}
{categoryValues.length > 0 && (
<div className="space-y-2">
<Label className="text-xs font-medium">카테고리 값 ({categoryValues.length}개)</Label>
<div className="bg-muted max-h-32 space-y-0.5 overflow-y-auto rounded-md p-1.5">
{categoryValues.map((cv) => (
<div key={cv.valueCode} className="flex items-center gap-2 px-1.5 py-0.5">
<span className="text-muted-foreground shrink-0 font-mono text-[10px]">{cv.valueCode}</span>
<span className="truncate text-xs">{cv.valueLabel}</span>
</div>
))}
</div>
</div>
)}
{/* 기본값 설정 */}
{categoryValues.length > 0 && (
<div className="border-t pt-2">
<Label className="text-xs font-medium">기본값</Label>
<Select
value={config.defaultValue || "_none_"}
onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
<p className="text-sm font-medium">이 필드는 어떤 데이터를 선택하나요?</p>
<div className={cn("grid gap-2", gridCols)}>
{visibleCards.map((card) => {
const Icon = card.icon;
const isSelected = effectiveSource === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("source", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<SelectTrigger className="mt-1 h-8 text-xs">
<SelectValue placeholder="기본값 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="_none_">선택 안함</SelectItem>
{categoryValues.map((cv) => (
<SelectItem key={cv.valueCode} value={cv.valueCode}>
{cv.valueLabel}
</SelectItem>
))}
</SelectContent>
</Select>
<p className="text-muted-foreground mt-1 text-[10px]">화면 로드 시 자동 선택될 카테고리 값</p>
</div>
)}
{/* 카테고리 값 없음 안내 */}
{!loadingCategoryValues && categoryValues.length === 0 && (
<p className="text-[10px] text-amber-600">
카테고리 값이 없습니다. 테이블 카테고리 관리에서 값을 추가해주세요.
</p>
)}
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">{card.title}</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
</button>
);
})}
</div>
)}
</div>
{/* 정적 옵션 관리 */}
{/* ─── 2단계: 소스별 설정 ─── */}
{/* 직접 입력 (static) */}
{effectiveSource === "static" && (
<div className="space-y-2">
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between">
<Label className="text-xs font-medium">옵션 목록</Label>
<Button type="button" variant="ghost" size="sm" onClick={addOption} className="h-6 px-2 text-xs">
<span className="text-sm font-medium">옵션 목록</span>
<Button type="button" variant="outline" size="sm" onClick={addOption} className="h-7 px-2 text-xs">
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
<div className="max-h-40 space-y-1.5 overflow-y-auto">
{options.map((option: any, index: number) => (
<div key={index} className="flex items-center gap-1.5">
<Input
value={option.value || ""}
onChange={(e) => updateOptionValue(index, e.target.value)}
placeholder={`옵션 ${index + 1}`}
className="h-7 flex-1 text-xs"
/>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeOption(index)}
className="text-destructive h-7 w-7 shrink-0 p-0"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
))}
{options.length === 0 && (
<p className="text-muted-foreground py-2 text-center text-xs">옵션을 추가해주세요</p>
)}
</div>
{/* 기본값 설정 */}
{options.length > 0 ? (
<div className="max-h-40 space-y-1.5 overflow-y-auto">
{options.map((option: any, index: number) => (
<div key={index} className="flex items-center gap-2">
<Input
value={option.value || ""}
onChange={(e) => updateOptionValue(index, e.target.value)}
placeholder={`옵션 ${index + 1}`}
className="h-8 flex-1 text-sm"
/>
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => removeOption(index)}
className="text-destructive h-8 w-8 shrink-0"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
))}
</div>
) : (
<div className="text-center py-6 text-muted-foreground">
<List className="mx-auto mb-2 h-8 w-8 opacity-30" />
<p className="text-sm">아직 옵션이 없어요</p>
<p className="text-xs">위의 추가 버튼으로 옵션을 만들어보세요</p>
</div>
)}
{options.length > 0 && (
<div className="mt-3 border-t pt-2">
<Label className="text-xs font-medium">기본값</Label>
<Select
value={config.defaultValue || "_none_"}
onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
>
<SelectTrigger className="mt-1 h-8 text-xs">
<SelectValue placeholder="기본값 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="_none_">선택 안함</SelectItem>
{options.map((option: any, index: number) => (
<SelectItem key={`default-${index}`} value={option.value || `_idx_${index}`}>
{option.label || option.value || `옵션 ${index + 1}`}
</SelectItem>
))}
</SelectContent>
</Select>
<p className="text-muted-foreground mt-1 text-[10px]">화면 로드 시 자동 선택될 값</p>
<div className="border-t pt-3 mt-3">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">기본 선택값</span>
<Select
value={config.defaultValue || "_none_"}
onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
>
<SelectTrigger className="h-8 w-[160px] text-sm">
<SelectValue placeholder="선택 안함" />
</SelectTrigger>
<SelectContent>
<SelectItem value="_none_">선택 안함</SelectItem>
{options.map((option: any, index: number) => (
<SelectItem key={`default-${index}`} value={option.value || `_idx_${index}`}>
{option.label || option.value || `옵션 ${index + 1}`}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
)}
</div>
)}
{/* 공통 코드 설정 */}
{effectiveSource === "code" && (
<div className="space-y-1">
<Label className="text-xs font-medium">코드 그룹</Label>
{config.codeGroup ? (
<p className="text-foreground text-sm font-medium">{config.codeGroup}</p>
) : (
<p className="text-xs text-amber-600">테이블 타입 관리에서 코드 그룹을 설정해주세요</p>
)}
</div>
)}
{/* 엔티티(참조 테이블) 설정 */}
{/* 테이블 참조 (entity) */}
{effectiveSource === "entity" && (
<div className="space-y-3">
<div className="space-y-2">
<Label className="text-xs font-medium">참조 테이블</Label>
<Input
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">테이블 참조</span>
</div>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">참조 테이블</p>
<Select
value={config.entityTable || ""}
readOnly
disabled
placeholder="테이블 타입 관리에서 설정"
className="bg-muted h-8 text-xs"
/>
<p className="text-muted-foreground text-[10px]">
조인할 테이블명 (테이블 타입 관리에서 설정된 경우 자동 입력됨)
</p>
onValueChange={(v) => {
onChange({ ...config, entityTable: v, entityValueColumn: "", entityLabelColumn: "" });
}}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="테이블을 선택해주세요" />
</SelectTrigger>
<SelectContent>
{tables.map((t) => (
<SelectItem key={t.tableName} value={t.tableName}>
{t.displayName || t.tableComment ? `${t.displayName || t.tableComment} (${t.tableName})` : t.tableName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{loadingColumns && (
@ -663,141 +594,143 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
</div>
)}
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-xs font-medium">값 컬럼 (코드)</Label>
{entityColumns.length > 0 ? (
{entityColumns.length > 0 && (
<div className="space-y-3">
<div>
<p className="mb-1.5 text-xs text-muted-foreground">실제 저장되는 값</p>
<Select
value={config.entityValueColumn || ""}
onValueChange={(value) => updateConfig("entityValueColumn", value)}
onValueChange={(v) => updateConfig("entityValueColumn", v)}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="컬럼 선택" />
</SelectTrigger>
<SelectContent>
{entityColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.columnLabel || col.columnName}
{col.columnLabel}
</SelectItem>
))}
</SelectContent>
</Select>
) : (
<Input
value={config.entityValueColumn || ""}
onChange={(e) => updateConfig("entityValueColumn", e.target.value)}
placeholder="id"
className="h-8 text-xs"
/>
)}
<p className="text-muted-foreground text-[10px]">저장될 값</p>
</div>
<div className="space-y-2">
<Label className="text-xs font-medium">표시 컬럼</Label>
{entityColumns.length > 0 ? (
</div>
<div>
<p className="mb-1.5 text-xs text-muted-foreground">사용자에게 보여지는 텍스트</p>
<Select
value={config.entityLabelColumn || ""}
onValueChange={(value) => updateConfig("entityLabelColumn", value)}
onValueChange={(v) => updateConfig("entityLabelColumn", v)}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="컬럼 선택" />
</SelectTrigger>
<SelectContent>
{entityColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.columnLabel || col.columnName}
{col.columnLabel}
</SelectItem>
))}
</SelectContent>
</Select>
) : (
<Input
value={config.entityLabelColumn || ""}
onChange={(e) => updateConfig("entityLabelColumn", e.target.value)}
placeholder="name"
className="h-8 text-xs"
/>
)}
<p className="text-muted-foreground text-[10px]">화면에 표시될 값</p>
</div>
</div>
{config.entityTable && !loadingColumns && entityColumns.length === 0 && (
<p className="text-[10px] text-amber-600">
테이블 컬럼을 조회할 수 없습니다. 테이블 타입 관리에서 참조 테이블을 설정해주세요.
</p>
)}
{config.entityTable && entityColumns.length > 0 && (
<div className="border-t pt-3">
<p className="text-muted-foreground text-[10px]">
같은 폼에 참조 테이블({config.entityTable})의 컬럼이 배치되어 있으면, 엔티티 선택 시 해당 필드가 자동으로
채워집니다.
</div>
<p className="text-[11px] text-muted-foreground">
엔티티 선택 시 같은 폼의 관련 필드가 자동으로 채워져요
</p>
</div>
)}
{config.entityTable && !loadingColumns && entityColumns.length === 0 && (
<p className="text-[10px] text-amber-600">
선택한 테이블의 컬럼 정보를 불러올 수 없어요. 테이블 타입 관리에서 컬럼 정보를 확인해주세요.
</p>
)}
</div>
)}
<Separator />
{/* 카테고리 (category) - source="code" 하위 호환 포함 */}
{effectiveSource === "category" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center gap-2">
<FolderTree className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">카테고리</span>
</div>
{/* 추가 옵션 */}
<div className="space-y-3">
<Label className="text-xs font-medium">추가 옵션</Label>
{config.source === "code" && config.codeGroup && (
<div className="rounded-md border bg-background p-3">
<p className="text-xs text-muted-foreground">코드 그룹</p>
<p className="mt-0.5 text-sm font-medium">{config.codeGroup}</p>
<p className="mt-1 text-[11px] text-muted-foreground">
테이블 컬럼에 설정된 코드 그룹이 자동으로 적용돼요
</p>
</div>
)}
<div className="flex items-center space-x-2">
<Checkbox
id="multiple"
checked={config.multiple || false}
onCheckedChange={(checked) => updateConfig("multiple", checked)}
/>
<label htmlFor="multiple" className="text-xs">
다중 선택 허용
</label>
</div>
<div className="rounded-md border bg-background p-3">
<div className="flex gap-6">
<div>
<p className="text-xs text-muted-foreground">테이블</p>
<p className="text-sm font-medium">{config.categoryTable || tableName || "-"}</p>
</div>
<div>
<p className="text-xs text-muted-foreground">컬럼</p>
<p className="text-sm font-medium">{config.categoryColumn || columnName || "-"}</p>
</div>
</div>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="searchable"
checked={config.searchable || false}
onCheckedChange={(checked) => updateConfig("searchable", checked)}
/>
<label htmlFor="searchable" className="text-xs">
검색 기능
</label>
</div>
{loadingCategoryValues && (
<div className="text-muted-foreground flex items-center gap-2 text-xs">
<Loader2 className="h-3 w-3 animate-spin" />
카테고리 값 로딩 중...
</div>
)}
<div className="flex items-center space-x-2">
<Checkbox
id="allowClear"
checked={config.allowClear !== false}
onCheckedChange={(checked) => updateConfig("allowClear", checked)}
/>
<label htmlFor="allowClear" className="text-xs">
값 초기화 허용
</label>
</div>
</div>
{categoryValues.length > 0 && (
<div>
<p className="mb-1.5 text-xs text-muted-foreground">
{categoryValues.length}개의 값이 있어요
</p>
<div className="max-h-28 overflow-y-auto rounded-md border bg-background p-2 space-y-0.5">
{categoryValues.map((cv) => (
<div key={cv.valueCode} className="flex items-center gap-2 px-1.5 py-0.5 text-xs">
<span className="shrink-0 font-mono text-[10px] text-muted-foreground">{cv.valueCode}</span>
<span className="truncate">{cv.valueLabel}</span>
</div>
))}
</div>
{/* 다중 선택 시 최대 개수 */}
{config.multiple && (
<div className="space-y-2">
<Label className="text-xs font-medium">최대 선택 개수</Label>
<Input
type="number"
value={config.maxSelect ?? ""}
onChange={(e) => updateConfig("maxSelect", e.target.value ? Number(e.target.value) : undefined)}
placeholder="제한 없음"
min="1"
className="h-8 text-xs"
/>
<div className="mt-3 flex items-center justify-between">
<span className="text-xs text-muted-foreground">기본 선택값</span>
<Select
value={config.defaultValue || "_none_"}
onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
>
<SelectTrigger className="h-8 w-[160px] text-sm">
<SelectValue placeholder="선택 안함" />
</SelectTrigger>
<SelectContent>
<SelectItem value="_none_">선택 안함</SelectItem>
{categoryValues.map((cv) => (
<SelectItem key={cv.valueCode} value={cv.valueCode}>
{cv.valueLabel}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
)}
{!loadingCategoryValues && categoryValues.length === 0 && (
<p className="text-[10px] text-amber-600">
카테고리 값이 없습니다. 테이블 카테고리 관리에서 값을 추가해주세요.
</p>
)}
</div>
)}
{/* 데이터 필터 조건 - static 소스 외 모든 소스에서 사용 */}
{/* 데이터 필터 (static 제외, filterTargetTable 있을 때만) */}
{effectiveSource !== "static" && filterTargetTable && (
<>
<Separator />
<div className="rounded-lg border bg-muted/30 p-4">
<FilterConditionsSection
filters={(config.filters as V2SelectFilter[]) || []}
columns={filterColumns}
@ -805,8 +738,106 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
targetTable={filterTargetTable}
onFiltersChange={(filters) => updateConfig("filters", filters)}
/>
</>
</div>
)}
{/* ─── 3단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 선택 모드 */}
<div>
<p className="mb-1.5 text-xs text-muted-foreground">선택 방식</p>
<Select value={config.mode || "dropdown"} onValueChange={(v) => updateConfig("mode", v)}>
<SelectTrigger className="h-8 text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="dropdown">드롭다운</SelectItem>
<SelectItem value="combobox">검색 가능 드롭다운</SelectItem>
<SelectItem value="radio">라디오 버튼</SelectItem>
<SelectItem value="check">체크박스</SelectItem>
<Separator className="my-1" />
<SelectItem value="tag">태그 선택</SelectItem>
<SelectItem value="tagbox">태그박스</SelectItem>
<SelectItem value="toggle">토글</SelectItem>
<SelectItem value="swap">스왑</SelectItem>
</SelectContent>
</Select>
<p className="mt-1 text-[11px] text-muted-foreground">대부분의 경우 드롭다운이 적합해요</p>
</div>
{/* 토글 옵션들 */}
<div className="space-y-2">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">여러 개 선택</p>
<p className="text-[11px] text-muted-foreground">한 번에 여러 값을 선택할 수 있어요</p>
</div>
<Switch
checked={config.multiple || false}
onCheckedChange={(checked) => updateConfig("multiple", checked)}
/>
</div>
{config.multiple && (
<div className="ml-4 border-l-2 border-primary/20 pl-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">최대 선택 개수</span>
<Input
type="number"
value={config.maxSelect ?? ""}
onChange={(e) => updateConfig("maxSelect", e.target.value ? Number(e.target.value) : undefined)}
placeholder="제한 없음"
min={1}
className="h-7 w-[100px] text-xs"
/>
</div>
</div>
)}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">검색 기능</p>
<p className="text-[11px] text-muted-foreground">옵션이 많을 때 검색으로 찾을 수 있어요</p>
</div>
<Switch
checked={config.searchable || false}
onCheckedChange={(checked) => updateConfig("searchable", checked)}
/>
</div>
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">선택 초기화</p>
<p className="text-[11px] text-muted-foreground">선택한 값을 지울 수 있는 X 버튼이 표시돼요</p>
</div>
<Switch
checked={config.allowClear !== false}
onCheckedChange={(checked) => updateConfig("allowClear", checked)}
/>
</div>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};

1542
frontend/components/v2/config-panels/V2SelectedItemsDetailInputConfigPanel.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

207
frontend/components/v2/config-panels/V2SplitLineConfigPanel.tsx Normal file
View File

@ -0,0 +1,207 @@
"use client";
/**
* V2SplitLine 설정 패널
* 토스식 UX: 리사이즈 Switch -> 두께 카드 선택 -> 색상 설정
*/
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Settings, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
const WIDTH_CARDS = [
{ value: 2, label: "얇게" },
{ value: 4, label: "보통" },
{ value: 6, label: "두껍게" },
{ value: 8, label: "넓게" },
] as const;
const COLOR_CARDS = [
{ value: "#e2e8f0", label: "기본", description: "연한 회색" },
{ value: "#94a3b8", label: "진하게", description: "중간 회색" },
{ value: "#3b82f6", label: "강조", description: "파란색" },
] as const;
interface V2SplitLineConfigPanelProps {
config: Record<string, any>;
onConfigChange: (config: Record<string, any>) => void;
}
export const V2SplitLineConfigPanel: React.FC<V2SplitLineConfigPanelProps> = ({
config,
onConfigChange,
}) => {
const [advancedOpen, setAdvancedOpen] = useState(false);
const currentConfig = config || {};
const updateConfig = (field: string, value: any) => {
const newConfig = { ...currentConfig, [field]: value };
onConfigChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
};
return (
<div className="space-y-4">
{/* ─── 1단계: 드래그 리사이즈 ─── */}
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium">드래그 리사이즈</p>
<p className="text-[11px] text-muted-foreground">
런타임에서 드래그로 좌우 영역을 조절할 수 있어요
</p>
</div>
<Switch
checked={currentConfig.resizable ?? true}
onCheckedChange={(checked) => updateConfig("resizable", checked)}
/>
</div>
{/* ─── 2단계: 분할선 두께 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">분할선 두께</p>
<div className="grid grid-cols-4 gap-2">
{WIDTH_CARDS.map((card) => {
const isSelected = (currentConfig.lineWidth || 4) === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("lineWidth", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2 text-center transition-all min-h-[52px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<div
className="mb-1.5 h-6 rounded-sm"
style={{
width: `${card.value}px`,
backgroundColor: currentConfig.lineColor || "#e2e8f0",
border: "1px solid rgba(0,0,0,0.1)",
}}
/>
<span className="text-[10px] font-medium">{card.label}</span>
</button>
);
})}
</div>
<p className="text-[11px] text-muted-foreground">
현재: {currentConfig.lineWidth || 4}px
</p>
</div>
{/* ─── 3단계: 분할선 색상 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">분할선 색상</p>
<div className="grid grid-cols-3 gap-2">
{COLOR_CARDS.map((card) => {
const isSelected =
(currentConfig.lineColor || "#e2e8f0") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("lineColor", card.value)}
className={cn(
"flex flex-col items-center rounded-md border p-2 text-center transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<div
className="mb-1 h-3 w-3 rounded-full"
style={{ backgroundColor: card.value }}
/>
<span className="text-xs font-medium">{card.label}</span>
</button>
);
})}
</div>
</div>
{/* ─── 고급 설정: 커스텀 색상 입력 ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 커스텀 색상 입력 */}
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">직접 입력</span>
<div className="flex items-center gap-1.5">
<input
type="color"
value={currentConfig.lineColor || "#e2e8f0"}
onChange={(e) => updateConfig("lineColor", e.target.value)}
className="h-7 w-7 cursor-pointer rounded border"
/>
<Input
value={currentConfig.lineColor || "#e2e8f0"}
onChange={(e) => updateConfig("lineColor", e.target.value)}
placeholder="#e2e8f0"
className="h-7 w-[100px] text-xs"
/>
</div>
</div>
{/* 커스텀 두께 입력 */}
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">두께 직접 입력 (px)</span>
<Input
type="number"
value={currentConfig.lineWidth || 4}
onChange={(e) =>
updateConfig("lineWidth", parseInt(e.target.value) || 4)
}
className="h-7 w-[80px] text-xs"
min={1}
max={12}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
<p className="text-[10px] text-muted-foreground">
캔버스에서 스플릿선의 X 위치가 초기 분할 지점이 돼요. 런타임에서
드래그하면 좌우 컴포넌트가 함께 이동해요.
</p>
</div>
);
};
V2SplitLineConfigPanel.displayName = "V2SplitLineConfigPanel";
export default V2SplitLineConfigPanel;

2598
frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

679
frontend/components/v2/config-panels/V2StatusCountConfigPanel.tsx Normal file
View File

@ -0,0 +1,679 @@
"use client";
/**
* V2StatusCount 설정 패널
* 토스식 단계별 UX: 데이터 소스 -> 컬럼 매핑 -> 상태 항목 관리 -> 표시 설정(접힘)
* 기존 StatusCountConfigPanel의 모든 기능을 자체 UI로 완전 구현
*/
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
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 { Separator } from "@/components/ui/separator";
import {
Table2,
Columns3,
Check,
ChevronsUpDown,
Loader2,
Link2,
Plus,
Trash2,
BarChart3,
Type,
Maximize2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { tableTypeApi } from "@/lib/api/screen";
import { entityJoinApi, type EntityJoinConfig } from "@/lib/api/entityJoin";
import { apiClient } from "@/lib/api/client";
import type { StatusCountConfig, StatusCountItem } from "@/lib/registry/components/v2-status-count/types";
import { STATUS_COLOR_MAP } from "@/lib/registry/components/v2-status-count/types";
const COLOR_OPTIONS = Object.keys(STATUS_COLOR_MAP);
// ─── 카드 크기 선택 카드 ───
const SIZE_CARDS = [
{ value: "sm", title: "작게", description: "컴팩트" },
{ value: "md", title: "보통", description: "기본 크기" },
{ value: "lg", title: "크게", description: "넓은 카드" },
] as const;
// ─── 섹션 헤더 컴포넌트 ───
function SectionHeader({ icon: Icon, title, description }: {
icon: React.ComponentType<{ className?: string }>;
title: string;
description?: string;
}) {
return (
<div className="space-y-1">
<div className="flex items-center gap-2">
<Icon className="h-4 w-4 text-muted-foreground" />
<h3 className="text-sm font-semibold">{title}</h3>
</div>
{description && <p className="text-muted-foreground text-[10px]">{description}</p>}
</div>
);
}
// ─── 수평 라벨 + 컨트롤 Row ───
function LabeledRow({ label, description, children }: {
label: string;
description?: string;
children: React.ReactNode;
}) {
return (
<div className="flex items-center justify-between py-1">
<div className="space-y-0.5">
<p className="text-xs text-muted-foreground">{label}</p>
{description && <p className="text-[10px] text-muted-foreground">{description}</p>}
</div>
{children}
</div>
);
}
interface V2StatusCountConfigPanelProps {
config: StatusCountConfig;
onChange: (config: Partial<StatusCountConfig>) => void;
}
export const V2StatusCountConfigPanel: React.FC<V2StatusCountConfigPanelProps> = ({
config,
onChange,
}) => {
// componentConfigChanged 이벤트 발행 래퍼
const handleChange = useCallback((newConfig: Partial<StatusCountConfig>) => {
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: { ...config, ...newConfig } },
})
);
}
}, [onChange, config]);
const updateField = useCallback((key: keyof StatusCountConfig, value: any) => {
handleChange({ [key]: value });
}, [handleChange]);
// ─── 상태 ───
const [tables, setTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
const [columns, setColumns] = useState<Array<{ columnName: string; columnLabel: string }>>([]);
const [entityJoins, setEntityJoins] = useState<EntityJoinConfig[]>([]);
const [loadingTables, setLoadingTables] = useState(false);
const [loadingColumns, setLoadingColumns] = useState(false);
const [loadingJoins, setLoadingJoins] = useState(false);
const [statusCategoryValues, setStatusCategoryValues] = useState<Array<{ value: string; label: string }>>([]);
const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
const [statusColumnOpen, setStatusColumnOpen] = useState(false);
const [relationOpen, setRelationOpen] = useState(false);
const items = config.items || [];
// ─── 테이블 목록 로드 ───
useEffect(() => {
const loadTables = async () => {
setLoadingTables(true);
try {
const result = await tableTypeApi.getTables();
setTables(
(result || []).map((t: any) => ({
tableName: t.tableName || t.table_name,
displayName: t.displayName || t.tableName || t.table_name,
}))
);
} catch (err) {
console.error("테이블 목록 로드 실패:", err);
} finally {
setLoadingTables(false);
}
};
loadTables();
}, []);
// ─── 선택된 테이블의 컬럼 + 엔티티 조인 로드 ───
useEffect(() => {
if (!config.tableName) {
setColumns([]);
setEntityJoins([]);
return;
}
const loadColumns = async () => {
setLoadingColumns(true);
try {
const result = await tableTypeApi.getColumns(config.tableName);
setColumns(
(result || []).map((c: any) => ({
columnName: c.columnName || c.column_name,
columnLabel: c.columnLabel || c.column_label || c.displayName || c.columnName || c.column_name,
}))
);
} catch (err) {
console.error("컬럼 목록 로드 실패:", err);
} finally {
setLoadingColumns(false);
}
};
const loadEntityJoins = async () => {
setLoadingJoins(true);
try {
const result = await entityJoinApi.getEntityJoinConfigs(config.tableName);
setEntityJoins(result?.joinConfigs || []);
} catch (err) {
console.error("엔티티 조인 설정 로드 실패:", err);
setEntityJoins([]);
} finally {
setLoadingJoins(false);
}
};
loadColumns();
loadEntityJoins();
}, [config.tableName]);
// ─── 상태 컬럼의 카테고리 값 로드 ───
useEffect(() => {
if (!config.tableName || !config.statusColumn) {
setStatusCategoryValues([]);
return;
}
const loadCategoryValues = async () => {
setLoadingCategoryValues(true);
try {
const response = await apiClient.get(
`/table-categories/${config.tableName}/${config.statusColumn}/values`
);
if (response.data?.success && response.data?.data) {
const flatValues: Array<{ value: string; label: string }> = [];
const flatten = (categoryItems: any[]) => {
for (const item of categoryItems) {
flatValues.push({
value: item.valueCode || item.value_code,
label: item.valueLabel || item.value_label,
});
if (item.children?.length > 0) flatten(item.children);
}
};
flatten(response.data.data);
setStatusCategoryValues(flatValues);
}
} catch {
setStatusCategoryValues([]);
} finally {
setLoadingCategoryValues(false);
}
};
loadCategoryValues();
}, [config.tableName, config.statusColumn]);
// ─── 엔티티 관계 Combobox 아이템 ───
const relationComboItems = useMemo(() => {
return entityJoins.map((ej) => {
const refTableLabel = tables.find((t) => t.tableName === ej.referenceTable)?.displayName || ej.referenceTable;
return {
value: `${ej.sourceColumn}::${ej.referenceTable}.${ej.referenceColumn}`,
label: `${ej.sourceColumn} -> ${refTableLabel}`,
sublabel: `${ej.referenceTable}.${ej.referenceColumn}`,
};
});
}, [entityJoins, tables]);
const currentRelationValue = useMemo(() => {
if (!config.relationColumn) return "";
return relationComboItems.find((item) => {
const [srcCol] = item.value.split("::");
return srcCol === config.relationColumn;
})?.value || "";
}, [config.relationColumn, relationComboItems]);
// ─── 상태 항목 관리 ───
const addItem = useCallback(() => {
updateField("items", [...items, { value: "", label: "새 상태", color: "gray" }]);
}, [items, updateField]);
const removeItem = useCallback((index: number) => {
updateField("items", items.filter((_: StatusCountItem, i: number) => i !== index));
}, [items, updateField]);
const updateItem = useCallback((index: number, key: keyof StatusCountItem, value: string) => {
const newItems = [...items];
newItems[index] = { ...newItems[index], [key]: value };
updateField("items", newItems);
}, [items, updateField]);
// ─── 테이블 변경 핸들러 ───
const handleTableChange = useCallback((newTableName: string) => {
handleChange({ tableName: newTableName, statusColumn: "", relationColumn: "", parentColumn: "" });
setTableComboboxOpen(false);
}, [handleChange]);
// ─── 렌더링 ───
return (
<div className="space-y-4">
{/* ═══════════════════════════════════════ */}
{/* 1단계: 데이터 소스 (테이블 선택) */}
{/* ═══════════════════════════════════════ */}
<div className="space-y-3">
<SectionHeader icon={Table2} title="데이터 소스" description="상태를 집계할 테이블을 선택하세요" />
<Separator />
{/* 제목 */}
<div className="space-y-1">
<div className="flex items-center gap-2">
<Type className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-medium truncate">제목</span>
</div>
<Input
value={config.title || ""}
onChange={(e) => updateField("title", e.target.value)}
placeholder="예: 일련번호 현황"
className="h-7 text-xs"
/>
</div>
{/* 테이블 선택 */}
<Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={tableComboboxOpen}
className="h-8 w-full justify-between text-xs"
disabled={loadingTables}
>
<div className="flex items-center gap-2 truncate">
<Table2 className="h-3 w-3 shrink-0" />
<span className="truncate">
{loadingTables
? "테이블 로딩 중..."
: config.tableName
? tables.find((t) => t.tableName === config.tableName)?.displayName || config.tableName
: "테이블 선택"}
</span>
</div>
<ChevronsUpDown className="ml-2 h-3 w-3 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" />
<CommandList>
<CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup>
{tables.map((table) => (
<CommandItem
key={table.tableName}
value={`${table.displayName} ${table.tableName}`}
onSelect={() => handleTableChange(table.tableName)}
className="text-xs"
>
<Check
className={cn("mr-2 h-3 w-3", config.tableName === table.tableName ? "opacity-100" : "opacity-0")}
/>
<div className="flex flex-col">
<span>{table.displayName}</span>
{table.displayName !== table.tableName && (
<span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
{/* ═══════════════════════════════════════ */}
{/* 2단계: 컬럼 매핑 */}
{/* ═══════════════════════════════════════ */}
{config.tableName && (
<div className="space-y-3">
<SectionHeader icon={Columns3} title="컬럼 매핑" description="상태 컬럼과 부모 관계를 설정하세요" />
<Separator />
{/* 상태 컬럼 */}
<div className="space-y-1">
<span className="text-xs font-medium truncate">상태 컬럼 *</span>
<Popover open={statusColumnOpen} onOpenChange={setStatusColumnOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={statusColumnOpen}
className="h-8 w-full justify-between text-xs"
disabled={loadingColumns}
>
<span className="truncate">
{loadingColumns
? "컬럼 로딩 중..."
: config.statusColumn
? columns.find((c) => c.columnName === config.statusColumn)?.columnLabel || config.statusColumn
: "상태 컬럼 선택"}
</span>
<ChevronsUpDown className="ml-2 h-3 w-3 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" />
<CommandList>
<CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup>
{columns.map((col) => (
<CommandItem
key={col.columnName}
value={`${col.columnLabel} ${col.columnName}`}
onSelect={() => {
updateField("statusColumn", col.columnName);
setStatusColumnOpen(false);
}}
className="text-xs"
>
<Check
className={cn("mr-2 h-3 w-3", config.statusColumn === col.columnName ? "opacity-100" : "opacity-0")}
/>
<div className="flex flex-col">
<span>{col.columnLabel}</span>
{col.columnLabel !== col.columnName && (
<span className="text-[10px] text-muted-foreground/70">{col.columnName}</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
{/* 엔티티 관계 */}
<div className="space-y-1">
<div className="flex items-center gap-2">
<Link2 className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-medium truncate">엔티티 관계</span>
</div>
{loadingJoins ? (
<div className="flex items-center gap-1 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" /> 로딩중...
</div>
) : entityJoins.length > 0 ? (
<Popover open={relationOpen} onOpenChange={setRelationOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={relationOpen}
className="h-8 w-full justify-between text-xs"
>
<span className="truncate">
{currentRelationValue
? relationComboItems.find((r) => r.value === currentRelationValue)?.label || "관계 선택"
: "엔티티 관계 선택"}
</span>
<ChevronsUpDown className="ml-2 h-3 w-3 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" />
<CommandList>
<CommandEmpty className="text-xs">엔티티 관계가 없습니다.</CommandEmpty>
<CommandGroup>
{relationComboItems.map((item) => (
<CommandItem
key={item.value}
value={`${item.label} ${item.sublabel}`}
onSelect={() => {
if (item.value === currentRelationValue) {
handleChange({ relationColumn: "", parentColumn: "" });
} else {
const [sourceCol, refPart] = item.value.split("::");
const [, refCol] = refPart.split(".");
handleChange({ relationColumn: sourceCol, parentColumn: refCol });
}
setRelationOpen(false);
}}
className="text-xs"
>
<Check
className={cn("mr-2 h-3 w-3", currentRelationValue === item.value ? "opacity-100" : "opacity-0")}
/>
<div className="flex flex-col">
<span>{item.label}</span>
<span className="text-[10px] text-muted-foreground/70">{item.sublabel}</span>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
) : (
<div className="rounded-lg border-2 border-dashed py-3 text-center">
<p className="text-[10px] text-muted-foreground">설정된 엔티티 관계가 없습니다</p>
</div>
)}
{config.relationColumn && config.parentColumn && (
<div className="rounded bg-muted/50 px-2 py-1.5 text-[10px] text-muted-foreground">
자식 FK: <span className="font-medium text-foreground">{config.relationColumn}</span>
{" -> "}
부모 매칭: <span className="font-medium text-foreground">{config.parentColumn}</span>
</div>
)}
</div>
</div>
)}
{/* 테이블 미선택 안내 */}
{!config.tableName && (
<div className="rounded-lg border-2 border-dashed p-6 text-center">
<Table2 className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
<p className="text-sm text-muted-foreground">테이블이 선택되지 않았습니다</p>
<p className="text-xs text-muted-foreground">위 데이터 소스에서 테이블을 선택하세요</p>
</div>
)}
{/* ═══════════════════════════════════════ */}
{/* 3단계: 카드 크기 (카드 선택 UI) */}
{/* ═══════════════════════════════════════ */}
<div className="space-y-3">
<SectionHeader icon={Maximize2} title="카드 크기" description="상태 카드의 크기를 선택하세요" />
<Separator />
<div className="grid grid-cols-3 gap-2">
{SIZE_CARDS.map((card) => {
const isSelected = (config.cardSize || "md") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateField("cardSize", card.value)}
className={cn(
"flex min-h-[60px] flex-col items-center justify-center rounded-lg border p-2 text-center transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span className="text-xs font-medium leading-tight">{card.title}</span>
<span className="mt-0.5 text-[10px] leading-tight text-muted-foreground">{card.description}</span>
</button>
);
})}
</div>
</div>
{/* ═══════════════════════════════════════ */}
{/* 4단계: 상태 항목 관리 */}
{/* ═══════════════════════════════════════ */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<SectionHeader icon={BarChart3} title="상태 항목" description="집계할 상태 값과 표시 스타일을 설정하세요" />
<Badge variant="secondary" className="text-[10px] h-5">{items.length}개</Badge>
</div>
<Button
type="button"
variant="outline"
size="sm"
onClick={addItem}
className="h-6 shrink-0 px-2 text-xs"
>
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
<Separator />
{loadingCategoryValues && (
<div className="flex items-center gap-1 text-xs text-muted-foreground">
<Loader2 className="h-3 w-3 animate-spin" /> 카테고리 값 로딩...
</div>
)}
{items.length === 0 ? (
<div className="rounded-lg border-2 border-dashed py-6 text-center">
<BarChart3 className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
<p className="text-sm text-muted-foreground">아직 상태 항목이 없어요</p>
<p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
</div>
) : (
<div className="space-y-2">
{items.map((item: StatusCountItem, i: number) => (
<div key={i} className="space-y-1.5 rounded-md border p-2.5">
{/* 첫 번째 줄: 상태값 + 삭제 */}
<div className="flex items-center gap-1">
{statusCategoryValues.length > 0 ? (
<Select
value={item.value || ""}
onValueChange={(v) => {
updateItem(i, "value", v);
if (v === "__ALL__" && !item.label) {
updateItem(i, "label", "전체");
} else {
const catVal = statusCategoryValues.find((cv) => cv.value === v);
if (catVal && !item.label) {
updateItem(i, "label", catVal.label);
}
}
}}
>
<SelectTrigger className="h-7 flex-1 text-xs">
<SelectValue placeholder="카테고리 값 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="__ALL__" className="text-xs font-medium">
전체
</SelectItem>
{statusCategoryValues.map((cv) => (
<SelectItem key={cv.value} value={cv.value} className="text-xs">
{cv.label} ({cv.value})
</SelectItem>
))}
</SelectContent>
</Select>
) : (
<Input
value={item.value}
onChange={(e) => updateItem(i, "value", e.target.value)}
placeholder="상태값 (예: IN_USE)"
className="h-7 text-xs"
/>
)}
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeItem(i)}
className="h-6 w-6 shrink-0 p-0 text-muted-foreground hover:text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
{/* 두 번째 줄: 라벨 + 색상 */}
<div className="flex gap-1">
<Input
value={item.label}
onChange={(e) => updateItem(i, "label", e.target.value)}
placeholder="표시 라벨"
className="h-7 text-xs"
/>
<Select
value={item.color}
onValueChange={(v) => updateItem(i, "color", v)}
>
<SelectTrigger className="h-7 w-24 shrink-0 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{COLOR_OPTIONS.map((c) => (
<SelectItem key={c} value={c} className="text-xs">
<div className="flex items-center gap-1.5">
<div
className={cn("h-3 w-3 rounded-full border", STATUS_COLOR_MAP[c].bg, STATUS_COLOR_MAP[c].border)}
/>
{c}
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
))}
</div>
)}
{!loadingCategoryValues && statusCategoryValues.length === 0 && config.tableName && config.statusColumn && (
<div className="rounded bg-amber-50 px-2 py-1.5 text-[10px] text-amber-700 dark:bg-amber-950/30 dark:text-amber-400">
카테고리 값이 없습니다. 옵션설정 &gt; 카테고리설정에서 값을 추가하거나 직접 입력하세요.
</div>
)}
{/* 미리보기 */}
{items.length > 0 && (
<div className="space-y-1.5">
<span className="text-xs text-muted-foreground truncate">미리보기</span>
<div className="flex gap-1.5 rounded-md bg-muted/30 p-2">
{items.map((item, i) => {
const colors = STATUS_COLOR_MAP[item.color] || STATUS_COLOR_MAP.gray;
return (
<div
key={i}
className={cn("flex flex-1 flex-col items-center rounded-md border p-1.5", colors.bg, colors.border)}
>
<span className={cn("text-sm font-bold", colors.text)}>0</span>
<span className={cn("text-[10px]", colors.text)}>{item.label || "라벨"}</span>
</div>
);
})}
</div>
</div>
)}
</div>
</div>
);
};
V2StatusCountConfigPanel.displayName = "V2StatusCountConfigPanel";
export default V2StatusCountConfigPanel;

771
frontend/components/v2/config-panels/V2TableGroupedConfigPanel.tsx Normal file
View File

@ -0,0 +1,771 @@
"use client";
/**
* V2TableGrouped 설정 패널
* 토스식 단계별 UX: 데이터 소스 -> 그룹화 설정 -> 컬럼 선택 -> 표시 설정(접힘) -> 연동 설정(접힘)
* 기존 TableGroupedConfigPanel의 모든 기능을 자체 UI로 완전 구현
*/
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Separator } from "@/components/ui/separator";
import {
Table2,
Database,
Layers,
Columns3,
Check,
ChevronsUpDown,
Settings,
ChevronDown,
Loader2,
Link2,
Plus,
Trash2,
FoldVertical,
ArrowUpDown,
CheckSquare,
LayoutGrid,
Type,
Hash,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { tableTypeApi } from "@/lib/api/screen";
import type { TableGroupedConfig, LinkedFilterConfig } from "@/lib/registry/components/v2-table-grouped/types";
import type { ColumnConfig } from "@/lib/registry/components/v2-table-list/types";
import {
groupHeaderStyleOptions,
checkboxModeOptions,
sortDirectionOptions,
} from "@/lib/registry/components/v2-table-grouped/config";
// ─── 섹션 헤더 컴포넌트 ───
function SectionHeader({ icon: Icon, title, description }: {
icon: React.ComponentType<{ className?: string }>;
title: string;
description?: string;
}) {
return (
<div className="space-y-1">
<div className="flex items-center gap-2">
<Icon className="h-4 w-4 text-muted-foreground" />
<h3 className="text-sm font-semibold">{title}</h3>
</div>
{description && <p className="text-muted-foreground text-[10px]">{description}</p>}
</div>
);
}
// ─── 수평 Switch Row (토스 패턴) ───
function SwitchRow({ label, description, checked, onCheckedChange }: {
label: string;
description?: string;
checked: boolean;
onCheckedChange: (checked: boolean) => void;
}) {
return (
<div className="flex items-center justify-between py-1">
<div className="space-y-0.5">
<p className="text-sm">{label}</p>
{description && <p className="text-[11px] text-muted-foreground">{description}</p>}
</div>
<Switch checked={checked} onCheckedChange={onCheckedChange} />
</div>
);
}
// ─── 수평 라벨 + 컨트롤 Row ───
function LabeledRow({ label, description, children }: {
label: string;
description?: string;
children: React.ReactNode;
}) {
return (
<div className="flex items-center justify-between py-1">
<div className="space-y-0.5">
<p className="text-xs text-muted-foreground">{label}</p>
{description && <p className="text-[10px] text-muted-foreground">{description}</p>}
</div>
{children}
</div>
);
}
// ─── 그룹 헤더 스타일 카드 ───
const HEADER_STYLE_CARDS = [
{ value: "default", icon: LayoutGrid, title: "기본", description: "표준 그룹 헤더" },
{ value: "compact", icon: FoldVertical, title: "컴팩트", description: "간결한 헤더" },
{ value: "card", icon: Layers, title: "카드", description: "카드 스타일 헤더" },
] as const;
interface V2TableGroupedConfigPanelProps {
config: TableGroupedConfig;
onChange: (newConfig: Partial<TableGroupedConfig>) => void;
}
export const V2TableGroupedConfigPanel: React.FC<V2TableGroupedConfigPanelProps> = ({
config,
onChange,
}) => {
// componentConfigChanged 이벤트 발행 래퍼
const handleChange = useCallback((newConfig: Partial<TableGroupedConfig>) => {
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: { ...config, ...newConfig } },
})
);
}
}, [onChange, config]);
const updateConfig = useCallback((updates: Partial<TableGroupedConfig>) => {
handleChange({ ...config, ...updates });
}, [handleChange, config]);
const updateGroupConfig = useCallback((updates: Partial<TableGroupedConfig["groupConfig"]>) => {
handleChange({
...config,
groupConfig: { ...config.groupConfig, ...updates },
});
}, [handleChange, config]);
// ─── 상태 ───
const [tables, setTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
const [tableColumns, setTableColumns] = useState<ColumnConfig[]>([]);
const [loadingTables, setLoadingTables] = useState(false);
const [loadingColumns, setLoadingColumns] = useState(false);
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
// Collapsible 상태
const [displayOpen, setDisplayOpen] = useState(false);
const [linkedOpen, setLinkedOpen] = useState(false);
// ─── 실제 사용할 테이블 이름 ───
const targetTableName = useMemo(() => {
if (config.useCustomTable && config.customTableName) {
return config.customTableName;
}
return config.selectedTable;
}, [config.useCustomTable, config.customTableName, config.selectedTable]);
// ─── 테이블 목록 로드 ───
useEffect(() => {
const loadTables = async () => {
setLoadingTables(true);
try {
const tableList = await tableTypeApi.getTables();
if (tableList && Array.isArray(tableList)) {
setTables(
tableList.map((t: any) => ({
tableName: t.tableName || t.table_name,
displayName: t.displayName || t.display_name || t.tableName || t.table_name,
}))
);
}
} catch (err) {
console.error("테이블 목록 로드 실패:", err);
} finally {
setLoadingTables(false);
}
};
loadTables();
}, []);
// ─── 선택된 테이블의 컬럼 로드 ───
useEffect(() => {
if (!targetTableName) {
setTableColumns([]);
return;
}
const loadColumns = async () => {
setLoadingColumns(true);
try {
const columns = await tableTypeApi.getColumns(targetTableName);
if (columns && Array.isArray(columns)) {
const cols: ColumnConfig[] = columns.map((col: any, idx: number) => ({
columnName: col.column_name || col.columnName,
displayName: col.display_name || col.displayName || col.column_name || col.columnName,
visible: true,
sortable: true,
searchable: false,
align: "left" as const,
order: idx,
}));
setTableColumns(cols);
if (!config.columns || config.columns.length === 0) {
updateConfig({ columns: cols });
}
}
} catch (err) {
console.error("컬럼 로드 실패:", err);
} finally {
setLoadingColumns(false);
}
};
loadColumns();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [targetTableName]);
// ─── 테이블 변경 핸들러 ───
const handleTableChange = useCallback((newTableName: string) => {
if (newTableName === config.selectedTable) return;
updateConfig({ selectedTable: newTableName, columns: [] });
setTableComboboxOpen(false);
}, [config.selectedTable, updateConfig]);
// ─── 컬럼 가시성 토글 ───
const toggleColumnVisibility = useCallback((columnName: string) => {
const updatedColumns = (config.columns || []).map((col) =>
col.columnName === columnName ? { ...col, visible: !col.visible } : col
);
updateConfig({ columns: updatedColumns });
}, [config.columns, updateConfig]);
// ─── 합계 컬럼 토글 ───
const toggleSumColumn = useCallback((columnName: string) => {
const currentSumCols = config.groupConfig?.summary?.sumColumns || [];
const newSumCols = currentSumCols.includes(columnName)
? currentSumCols.filter((c) => c !== columnName)
: [...currentSumCols, columnName];
updateGroupConfig({
summary: {
...config.groupConfig?.summary,
sumColumns: newSumCols,
},
});
}, [config.groupConfig?.summary, updateGroupConfig]);
// ─── 연결 필터 관리 ───
const addLinkedFilter = useCallback(() => {
const newFilter: LinkedFilterConfig = {
sourceComponentId: "",
sourceField: "value",
targetColumn: "",
enabled: true,
};
updateConfig({
linkedFilters: [...(config.linkedFilters || []), newFilter],
});
}, [config.linkedFilters, updateConfig]);
const removeLinkedFilter = useCallback((index: number) => {
const filters = [...(config.linkedFilters || [])];
filters.splice(index, 1);
updateConfig({ linkedFilters: filters });
}, [config.linkedFilters, updateConfig]);
const updateLinkedFilter = useCallback((index: number, updates: Partial<LinkedFilterConfig>) => {
const filters = [...(config.linkedFilters || [])];
filters[index] = { ...filters[index], ...updates };
updateConfig({ linkedFilters: filters });
}, [config.linkedFilters, updateConfig]);
// ─── 렌더링 ───
return (
<div className="space-y-4">
{/* ═══════════════════════════════════════ */}
{/* 1단계: 데이터 소스 (테이블 선택) */}
{/* ═══════════════════════════════════════ */}
<div className="space-y-3">
<SectionHeader icon={Table2} title="데이터 소스" description="그룹화할 테이블을 선택하세요" />
<Separator />
<SwitchRow
label="커스텀 테이블 사용"
description="화면 메인 테이블 대신 다른 테이블을 사용합니다"
checked={config.useCustomTable ?? false}
onCheckedChange={(checked) => updateConfig({ useCustomTable: checked })}
/>
{config.useCustomTable ? (
<Input
value={config.customTableName || ""}
onChange={(e) => updateConfig({ customTableName: e.target.value })}
placeholder="테이블명을 직접 입력하세요"
className="h-8 text-xs"
/>
) : (
<Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={tableComboboxOpen}
className="h-8 w-full justify-between text-xs"
disabled={loadingTables}
>
<div className="flex items-center gap-2 truncate">
<Table2 className="h-3 w-3 shrink-0" />
<span className="truncate">
{loadingTables
? "테이블 로딩 중..."
: config.selectedTable
? tables.find((t) => t.tableName === config.selectedTable)?.displayName || config.selectedTable
: "테이블 선택"}
</span>
</div>
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
<Command
filter={(value, search) => {
if (value.toLowerCase().includes(search.toLowerCase())) return 1;
return 0;
}}
>
<CommandInput placeholder="테이블 검색..." className="text-xs" />
<CommandList>
<CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup>
{tables.map((table) => (
<CommandItem
key={table.tableName}
value={`${table.displayName} ${table.tableName}`}
onSelect={() => handleTableChange(table.tableName)}
className="text-xs"
>
<Check
className={cn("mr-2 h-3 w-3", config.selectedTable === table.tableName ? "opacity-100" : "opacity-0")}
/>
<div className="flex flex-col">
<span>{table.displayName}</span>
{table.displayName !== table.tableName && (
<span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)}
</div>
{/* ═══════════════════════════════════════ */}
{/* 2단계: 그룹화 설정 */}
{/* ═══════════════════════════════════════ */}
{targetTableName && (
<div className="space-y-3">
<SectionHeader icon={Layers} title="그룹화 설정" description="데이터를 어떤 컬럼 기준으로 그룹화할지 설정합니다" />
<Separator />
{/* 그룹화 기준 컬럼 */}
<LabeledRow label="그룹화 기준 컬럼 *">
<Select
value={config.groupConfig?.groupByColumn || ""}
onValueChange={(value) => updateGroupConfig({ groupByColumn: value })}
>
<SelectTrigger className="h-7 w-[160px] text-xs">
<SelectValue placeholder="컬럼 선택" />
</SelectTrigger>
<SelectContent>
{(loadingColumns ? [] : tableColumns).map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
</LabeledRow>
{/* 그룹 라벨 형식 */}
<div className="space-y-1">
<div className="flex items-center gap-2">
<Type className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-medium truncate">그룹 라벨 형식</span>
</div>
<Input
value={config.groupConfig?.groupLabelFormat || "{value}"}
onChange={(e) => updateGroupConfig({ groupLabelFormat: e.target.value })}
placeholder="{value} ({컬럼명})"
className="h-7 text-xs"
/>
<p className="text-[10px] text-muted-foreground">
{"{value}"} = 그룹값, {"{컬럼명}"} = 해당 컬럼 값
</p>
</div>
<SwitchRow
label="기본 펼침 상태"
description="그룹이 기본으로 펼쳐진 상태로 표시됩니다"
checked={config.groupConfig?.defaultExpanded ?? true}
onCheckedChange={(checked) => updateGroupConfig({ defaultExpanded: checked })}
/>
{/* 그룹 정렬 */}
<LabeledRow label="그룹 정렬">
<Select
value={config.groupConfig?.sortDirection || "asc"}
onValueChange={(value: string) => updateGroupConfig({ sortDirection: value as "asc" | "desc" })}
>
<SelectTrigger className="h-7 w-[120px] text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{sortDirectionOptions.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
</LabeledRow>
<SwitchRow
label="개수 표시"
description="그룹 헤더에 항목 수를 표시합니다"
checked={config.groupConfig?.summary?.showCount ?? true}
onCheckedChange={(checked) =>
updateGroupConfig({
summary: { ...config.groupConfig?.summary, showCount: checked },
})
}
/>
{/* 합계 컬럼 */}
{tableColumns.length > 0 && (
<div className="space-y-1.5">
<div className="flex items-center gap-2">
<Hash className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-medium truncate">합계 표시 컬럼</span>
</div>
<p className="text-[10px] text-muted-foreground">그룹별 합계를 계산할 컬럼을 선택하세요</p>
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border p-2">
{tableColumns.map((col) => {
const isChecked = config.groupConfig?.summary?.sumColumns?.includes(col.columnName) ?? false;
return (
<div
key={col.columnName}
className={cn(
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-muted/50",
isChecked && "bg-primary/10",
)}
onClick={() => toggleSumColumn(col.columnName)}
>
<Checkbox
checked={isChecked}
onCheckedChange={() => toggleSumColumn(col.columnName)}
className="pointer-events-none h-3.5 w-3.5"
/>
<span className="truncate text-xs">{col.displayName || col.columnName}</span>
</div>
);
})}
</div>
</div>
)}
</div>
)}
{/* 테이블 미선택 안내 */}
{!targetTableName && (
<div className="rounded-lg border-2 border-dashed p-6 text-center">
<Table2 className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
<p className="text-sm text-muted-foreground">테이블이 선택되지 않았습니다</p>
<p className="text-xs text-muted-foreground">위 데이터 소스에서 테이블을 선택하세요</p>
</div>
)}
{/* ═══════════════════════════════════════ */}
{/* 3단계: 컬럼 선택 */}
{/* ═══════════════════════════════════════ */}
{targetTableName && (config.columns || tableColumns).length > 0 && (
<div className="space-y-3">
<SectionHeader
icon={Columns3}
title={`컬럼 선택 (${(config.columns || tableColumns).filter((c) => c.visible !== false).length}개 표시)`}
description="표시할 컬럼을 선택하세요"
/>
<Separator />
<div className="max-h-48 space-y-0.5 overflow-y-auto rounded-md border p-2">
{(config.columns || tableColumns).map((col) => {
const isVisible = col.visible !== false;
return (
<div
key={col.columnName}
className={cn(
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-muted/50",
isVisible && "bg-primary/10",
)}
onClick={() => toggleColumnVisibility(col.columnName)}
>
<Checkbox
checked={isVisible}
onCheckedChange={() => toggleColumnVisibility(col.columnName)}
className="pointer-events-none h-3.5 w-3.5"
/>
<Database className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
<span className="truncate text-xs">{col.displayName || col.columnName}</span>
</div>
);
})}
</div>
</div>
)}
{/* ═══════════════════════════════════════ */}
{/* 4단계: 그룹 헤더 스타일 (카드 선택) */}
{/* ═══════════════════════════════════════ */}
{targetTableName && (
<div className="space-y-3">
<SectionHeader icon={LayoutGrid} title="그룹 헤더 스타일" description="그룹 헤더의 디자인을 선택하세요" />
<Separator />
<div className="grid grid-cols-3 gap-2">
{HEADER_STYLE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = (config.groupHeaderStyle || "default") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig({ groupHeaderStyle: card.value as "default" | "compact" | "card" })}
className={cn(
"flex min-h-[70px] flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="mb-1 h-4 w-4 text-primary" />
<span className="text-xs font-medium leading-tight">{card.title}</span>
<span className="mt-0.5 text-[10px] leading-tight text-muted-foreground">{card.description}</span>
</button>
);
})}
</div>
</div>
)}
{/* ═══════════════════════════════════════ */}
{/* 5단계: 표시 설정 (기본 접힘) */}
{/* ═══════════════════════════════════════ */}
<Collapsible open={displayOpen} onOpenChange={setDisplayOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium truncate">표시 설정</span>
<Badge variant="secondary" className="text-[10px] h-5">6개</Badge>
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", displayOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 체크박스 */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<CheckSquare className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-medium truncate">체크박스</span>
</div>
<SwitchRow
label="체크박스 표시"
description="행 선택용 체크박스를 표시합니다"
checked={config.showCheckbox ?? false}
onCheckedChange={(checked) => updateConfig({ showCheckbox: checked })}
/>
{config.showCheckbox && (
<div className="ml-4 border-l-2 border-primary/20 pl-3">
<LabeledRow label="선택 모드">
<Select
value={config.checkboxMode || "multi"}
onValueChange={(value: string) => updateConfig({ checkboxMode: value as "single" | "multi" })}
>
<SelectTrigger className="h-7 w-[120px] text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{checkboxModeOptions.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
</LabeledRow>
</div>
)}
</div>
<Separator />
{/* UI 옵션 */}
<SwitchRow
label="펼치기/접기 버튼 표시"
description="전체 펼치기/접기 버튼을 상단에 표시합니다"
checked={config.showExpandAllButton ?? true}
onCheckedChange={(checked) => updateConfig({ showExpandAllButton: checked })}
/>
<SwitchRow
label="행 클릭 가능"
description="행 클릭 시 이벤트를 발생시킵니다"
checked={config.rowClickable ?? true}
onCheckedChange={(checked) => updateConfig({ rowClickable: checked })}
/>
<Separator />
{/* 높이 및 메시지 */}
<LabeledRow label="최대 높이 (px)">
<Input
type="number"
value={typeof config.maxHeight === "number" ? config.maxHeight : 600}
onChange={(e) => updateConfig({ maxHeight: parseInt(e.target.value) || 600 })}
min={200}
max={2000}
className="h-7 w-[100px] text-xs"
/>
</LabeledRow>
<div className="space-y-1">
<span className="text-xs text-muted-foreground truncate">빈 데이터 메시지</span>
<Input
value={config.emptyMessage || ""}
onChange={(e) => updateConfig({ emptyMessage: e.target.value })}
placeholder="데이터가 없습니다."
className="h-7 text-xs"
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
{/* ═══════════════════════════════════════ */}
{/* 6단계: 연동 설정 (기본 접힘) */}
{/* ═══════════════════════════════════════ */}
<Collapsible open={linkedOpen} onOpenChange={setLinkedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Link2 className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium truncate">연동 설정</span>
<Badge variant="secondary" className="text-[10px] h-5">{config.linkedFilters?.length || 0}개</Badge>
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", linkedOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between">
<p className="text-[10px] text-muted-foreground">
다른 컴포넌트(검색필터 등)의 선택 값으로 이 테이블을 필터링합니다
</p>
<Button
type="button"
variant="outline"
size="sm"
onClick={addLinkedFilter}
className="h-6 shrink-0 px-2 text-xs"
>
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
{(config.linkedFilters || []).length === 0 ? (
<div className="rounded-lg border-2 border-dashed py-4 text-center">
<Link2 className="mx-auto mb-1 h-6 w-6 text-muted-foreground opacity-30" />
<p className="text-xs text-muted-foreground">연결된 필터가 없습니다</p>
</div>
) : (
<div className="space-y-2">
{(config.linkedFilters || []).map((filter, idx) => (
<div key={idx} className="space-y-2 rounded-md border p-3">
<div className="flex items-center justify-between">
<span className="text-xs font-medium">필터 #{idx + 1}</span>
<div className="flex items-center gap-2">
<Switch
checked={filter.enabled !== false}
onCheckedChange={(checked) => updateLinkedFilter(idx, { enabled: checked })}
/>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeLinkedFilter(idx)}
className="h-5 w-5 p-0 text-destructive hover:text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
</div>
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">소스 컴포넌트 ID</span>
<Input
value={filter.sourceComponentId}
onChange={(e) => updateLinkedFilter(idx, { sourceComponentId: e.target.value })}
placeholder="예: search-filter-1"
className="h-6 text-xs"
/>
</div>
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">소스 필드</span>
<Input
value={filter.sourceField || "value"}
onChange={(e) => updateLinkedFilter(idx, { sourceField: e.target.value })}
placeholder="value"
className="h-6 text-xs"
/>
</div>
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">대상 컬럼</span>
<Select
value={filter.targetColumn}
onValueChange={(value) => updateLinkedFilter(idx, { targetColumn: value })}
>
<SelectTrigger className="h-6 text-xs">
<SelectValue placeholder="컬럼 선택" />
</SelectTrigger>
<SelectContent>
{tableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
))}
</div>
)}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2TableGroupedConfigPanel.displayName = "V2TableGroupedConfigPanel";
export default V2TableGroupedConfigPanel;

1466
frontend/components/v2/config-panels/V2TableListConfigPanel.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

563
frontend/components/v2/config-panels/V2TableSearchWidgetConfigPanel.tsx Normal file
View File

@ -0,0 +1,563 @@
"use client";
/**
* V2TableSearchWidget 설정 패널
* 토스식 단계별 UX: 대상 패널 카드 선택 -> 필터 모드 카드 선택 -> 고정 필터 목록 -> 고급 설정(접힘)
*/
import React, { useState, useEffect, useCallback } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
PanelLeft,
PanelRight,
Layers,
Zap,
Lock,
Plus,
Trash2,
Settings,
ChevronDown,
Search,
Filter,
} from "lucide-react";
import { cn } from "@/lib/utils";
// ─── 대상 패널 위치 카드 정의 ───
const PANEL_POSITION_CARDS = [
{
value: "left",
icon: PanelLeft,
title: "좌측 패널",
description: "카드 디스플레이 등",
},
{
value: "right",
icon: PanelRight,
title: "우측 패널",
description: "테이블 리스트 등",
},
{
value: "auto",
icon: Layers,
title: "자동",
description: "모든 테이블 대상",
},
] as const;
// ─── 필터 모드 카드 정의 ───
const FILTER_MODE_CARDS = [
{
value: "dynamic",
icon: Zap,
title: "동적 모드",
description: "사용자가 직접 필터를 선택해요",
},
{
value: "preset",
icon: Lock,
title: "고정 모드",
description: "디자이너가 미리 필터를 지정해요",
},
] as const;
// ─── 필터 타입 옵션 ───
const FILTER_TYPE_OPTIONS = [
{ value: "text", label: "텍스트" },
{ value: "number", label: "숫자" },
{ value: "date", label: "날짜" },
{ value: "select", label: "선택" },
] as const;
interface PresetFilter {
id: string;
columnName: string;
columnLabel: string;
filterType: "text" | "number" | "date" | "select";
width?: number;
multiSelect?: boolean;
}
// ─── 수평 Switch Row (토스 패턴) ───
function SwitchRow({
label,
description,
checked,
onCheckedChange,
}: {
label: string;
description?: string;
checked: boolean;
onCheckedChange: (checked: boolean) => void;
}) {
return (
<div className="flex items-center justify-between py-1">
<div className="space-y-0.5">
<p className="text-sm">{label}</p>
{description && (
<p className="text-[11px] text-muted-foreground">{description}</p>
)}
</div>
<Switch checked={checked} onCheckedChange={onCheckedChange} />
</div>
);
}
// ─── 섹션 헤더 컴포넌트 ───
function SectionHeader({
icon: Icon,
title,
description,
}: {
icon: React.ComponentType<{ className?: string }>;
title: string;
description?: string;
}) {
return (
<div className="space-y-1">
<div className="flex items-center gap-2">
<Icon className="h-4 w-4 text-muted-foreground" />
<h3 className="text-sm font-semibold">{title}</h3>
</div>
{description && (
<p className="text-muted-foreground text-[10px]">{description}</p>
)}
</div>
);
}
// ─── inputType에서 filterType 추출 헬퍼 ───
function getFilterTypeFromInputType(
inputType: string
): "text" | "number" | "date" | "select" {
if (
inputType.includes("number") ||
inputType.includes("decimal") ||
inputType.includes("integer")
) {
return "number";
}
if (inputType.includes("date") || inputType.includes("time")) {
return "date";
}
if (
inputType.includes("select") ||
inputType.includes("dropdown") ||
inputType.includes("code") ||
inputType.includes("category")
) {
return "select";
}
return "text";
}
interface V2TableSearchWidgetConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
tables?: any[];
}
export const V2TableSearchWidgetConfigPanel: React.FC<
V2TableSearchWidgetConfigPanelProps
> = ({ config: configProp, onChange, tables = [] }) => {
const config = configProp || {};
// componentConfigChanged 이벤트 발행 래퍼
const handleChange = useCallback(
(newConfig: Record<string, any>) => {
onChange(newConfig);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
},
[onChange]
);
// key-value 형태 업데이트 헬퍼
const updateField = useCallback(
(key: string, value: any) => {
handleChange({ ...config, [key]: value });
},
[handleChange, config]
);
// 첫 번째 테이블의 컬럼 목록
const availableColumns =
tables.length > 0 && tables[0].columns ? tables[0].columns : [];
// ─── 로컬 상태 ───
const [advancedOpen, setAdvancedOpen] = useState(false);
const [localPresetFilters, setLocalPresetFilters] = useState<PresetFilter[]>(
config.presetFilters ?? []
);
// config 외부 변경 시 로컬 상태 동기화
useEffect(() => {
setLocalPresetFilters(config.presetFilters ?? []);
}, [config.presetFilters]);
// 현재 config 값들
const targetPanelPosition = config.targetPanelPosition ?? "left";
const filterMode = config.filterMode ?? "dynamic";
const autoSelectFirstTable = config.autoSelectFirstTable ?? true;
const showTableSelector = config.showTableSelector ?? true;
// ─── 고정 필터 CRUD ───
const addFilter = useCallback(() => {
const newFilter: PresetFilter = {
id: `filter_${Date.now()}`,
columnName: "",
columnLabel: "",
filterType: "text",
width: 200,
};
const updated = [...localPresetFilters, newFilter];
setLocalPresetFilters(updated);
handleChange({ ...config, presetFilters: updated });
}, [localPresetFilters, handleChange, config]);
const removeFilter = useCallback(
(id: string) => {
const updated = localPresetFilters.filter((f) => f.id !== id);
setLocalPresetFilters(updated);
handleChange({ ...config, presetFilters: updated });
},
[localPresetFilters, handleChange, config]
);
const updateFilter = useCallback(
(id: string, field: keyof PresetFilter, value: any) => {
const updated = localPresetFilters.map((f) =>
f.id === id ? { ...f, [field]: value } : f
);
setLocalPresetFilters(updated);
handleChange({ ...config, presetFilters: updated });
},
[localPresetFilters, handleChange, config]
);
// 컬럼 선택 시 라벨+타입 자동 설정
const handleColumnSelect = useCallback(
(filterId: string, columnName: string) => {
const selectedColumn = availableColumns.find(
(col: any) => col.columnName === columnName
);
const updated = localPresetFilters.map((f) =>
f.id === filterId
? {
...f,
columnName,
columnLabel: selectedColumn?.columnLabel || columnName,
filterType: getFilterTypeFromInputType(
selectedColumn?.inputType || "text"
),
}
: f
);
setLocalPresetFilters(updated);
handleChange({ ...config, presetFilters: updated });
},
[availableColumns, localPresetFilters, handleChange, config]
);
return (
<div className="space-y-4">
{/* ─── 1단계: 대상 패널 위치 선택 ─── */}
<div className="space-y-2">
<SectionHeader
icon={Search}
title="검색 필터 위젯"
description="화면 내 테이블을 자동 감지하여 검색, 필터, 그룹 기능을 제공합니다"
/>
<p className="text-sm font-medium mt-3">
어떤 패널의 테이블을 대상으로 하나요?
</p>
<div className="grid grid-cols-3 gap-2">
{PANEL_POSITION_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = targetPanelPosition === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateField("targetPanelPosition", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">
{card.title}
</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
{card.description}
</span>
</button>
);
})}
</div>
</div>
{/* ─── 2단계: 필터 모드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">필터를 어떻게 구성할까요?</p>
<div className="grid grid-cols-2 gap-2">
{FILTER_MODE_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = filterMode === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateField("filterMode", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="h-5 w-5 mb-1.5 text-primary" />
<span className="text-xs font-medium leading-tight">
{card.title}
</span>
<span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
{card.description}
</span>
</button>
);
})}
</div>
</div>
{/* ─── 3단계: 고정 모드 필터 목록 ─── */}
{filterMode === "preset" && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Filter className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">고정 필터 목록</span>
</div>
<Button
type="button"
variant="outline"
size="sm"
onClick={addFilter}
className="h-7 px-2 text-xs"
>
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
{localPresetFilters.length === 0 ? (
<div className="text-center py-6 text-muted-foreground">
<Filter className="mx-auto mb-2 h-8 w-8 opacity-30" />
<p className="text-sm">아직 필터가 없어요</p>
<p className="text-xs">
위의 추가 버튼으로 필터를 만들어보세요
</p>
</div>
) : (
<div className="space-y-2">
{localPresetFilters.map((filter) => (
<div
key={filter.id}
className="bg-card flex flex-col gap-2 rounded-md border px-3 py-2.5"
>
{/* 상단: 컬럼 선택 + 삭제 */}
<div className="flex items-center gap-1.5">
<div className="flex-1">
{availableColumns.length > 0 ? (
<Select
value={filter.columnName || ""}
onValueChange={(value) =>
handleColumnSelect(filter.id, value)
}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="컬럼 선택" />
</SelectTrigger>
<SelectContent>
{availableColumns.map((col: any) => (
<SelectItem
key={col.columnName}
value={col.columnName}
>
<div className="flex items-center gap-2">
<span className="font-medium">
{col.columnLabel}
</span>
<span className="text-muted-foreground text-[10px]">
({col.columnName})
</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
) : (
<Input
value={filter.columnName}
onChange={(e) =>
updateFilter(
filter.id,
"columnName",
e.target.value
)
}
placeholder="예: customer_name"
className="h-7 text-xs"
/>
)}
</div>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeFilter(filter.id)}
className="text-muted-foreground hover:text-destructive h-7 w-7 shrink-0 p-0"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
{/* 하단: 필터 타입 + 너비 */}
<div className="flex items-center gap-1.5">
<Select
value={filter.filterType}
onValueChange={(
value: "text" | "number" | "date" | "select"
) => updateFilter(filter.id, "filterType", value)}
>
<SelectTrigger className="h-7 flex-1 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{FILTER_TYPE_OPTIONS.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
<div className="flex items-center gap-1">
<span className="text-muted-foreground shrink-0 text-[10px]">
너비
</span>
<Input
type="number"
value={filter.width || 200}
onChange={(e) =>
updateFilter(
filter.id,
"width",
parseInt(e.target.value) || 200
)
}
className="h-7 w-16 text-xs"
min={100}
max={500}
/>
</div>
</div>
{/* 표시명 (컬럼 선택 시 자동 설정, 수동 변경 가능) */}
{filter.columnLabel && (
<p className="text-muted-foreground text-[10px]">
표시명: {filter.columnLabel}
</p>
)}
</div>
))}
</div>
)}
<p className="text-[11px] text-muted-foreground">
고정 모드에서는 설정 버튼이 숨겨지고 지정된 필터만 표시돼요
</p>
</div>
)}
{/* 동적 모드 안내 */}
{filterMode === "dynamic" && (
<div className="rounded-lg border bg-muted/30 p-4">
<div className="flex items-center gap-2 mb-2">
<Zap className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">동적 모드 안내</span>
</div>
<p className="text-[11px] text-muted-foreground">
사용자가 테이블 설정 버튼을 클릭하여 원하는 필터를 직접 선택할 수
있어요. 필터 설정은 브라우저에 저장되어 다음 접속 시에도 유지돼요.
</p>
</div>
)}
{/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-2">
<SwitchRow
label="첫 번째 테이블 자동 선택"
description="화면 로딩 시 대상 패널의 첫 번째 테이블을 자동으로 선택해요"
checked={autoSelectFirstTable}
onCheckedChange={(checked) =>
updateField("autoSelectFirstTable", checked)
}
/>
<SwitchRow
label="테이블 선택 드롭다운 표시"
description="여러 테이블이 있을 때 사용자가 직접 대상을 선택할 수 있어요"
checked={showTableSelector}
onCheckedChange={(checked) =>
updateField("showTableSelector", checked)
}
/>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2TableSearchWidgetConfigPanel.displayName = "V2TableSearchWidgetConfigPanel";
export default V2TableSearchWidgetConfigPanel;

304
frontend/components/v2/config-panels/V2TextDisplayConfigPanel.tsx Normal file
View File

@ -0,0 +1,304 @@
"use client";
/**
* V2TextDisplay 설정 패널
* 토스식 단계별 UX: 텍스트 내용 -> 폰트 설정(카드선택) -> 정렬(카드선택) -> 고급 설정(접힘)
*/
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
Settings,
ChevronDown,
AlignLeft,
AlignCenter,
AlignRight,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { TextDisplayConfig } from "@/lib/registry/components/v2-text-display/types";
const FONT_SIZE_CARDS = [
{ value: "12px", label: "작게", preview: "Aa" },
{ value: "14px", label: "보통", preview: "Aa" },
{ value: "18px", label: "크게", preview: "Aa" },
{ value: "24px", label: "제목", preview: "Aa" },
] as const;
const FONT_WEIGHT_CARDS = [
{ value: "lighter", label: "얇게" },
{ value: "normal", label: "보통" },
{ value: "bold", label: "굵게" },
] as const;
const ALIGN_CARDS = [
{ value: "left", label: "왼쪽", icon: AlignLeft },
{ value: "center", label: "가운데", icon: AlignCenter },
{ value: "right", label: "오른쪽", icon: AlignRight },
] as const;
interface V2TextDisplayConfigPanelProps {
config: TextDisplayConfig;
onChange: (config: Partial<TextDisplayConfig>) => void;
}
export const V2TextDisplayConfigPanel: React.FC<V2TextDisplayConfigPanelProps> = ({
config,
onChange,
}) => {
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = (field: keyof TextDisplayConfig, value: any) => {
const newConfig = { ...config, [field]: value };
onChange({ [field]: value });
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent("componentConfigChanged", {
detail: { config: newConfig },
})
);
}
};
return (
<div className="space-y-4">
{/* ─── 1단계: 표시 텍스트 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">표시 텍스트</p>
<Input
value={config.text || ""}
onChange={(e) => updateConfig("text", e.target.value)}
placeholder="표시할 텍스트를 입력하세요"
className="h-8 text-sm"
/>
<p className="text-[11px] text-muted-foreground">화면에 보여질 텍스트를 입력해요</p>
</div>
{/* ─── 2단계: 폰트 크기 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">폰트 크기</p>
<div className="grid grid-cols-4 gap-2">
{FONT_SIZE_CARDS.map((card) => {
const isSelected = (config.fontSize || "14px") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("fontSize", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span
className="font-medium"
style={{ fontSize: card.value }}
>
{card.preview}
</span>
<span className="text-[10px] text-muted-foreground mt-0.5">
{card.label}
</span>
</button>
);
})}
</div>
<div className="flex items-center justify-between pt-1">
<span className="text-[11px] text-muted-foreground">직접 입력</span>
<Input
value={config.fontSize || "14px"}
onChange={(e) => updateConfig("fontSize", e.target.value)}
placeholder="14px"
className="h-7 w-[100px] text-xs"
/>
</div>
</div>
{/* ─── 3단계: 폰트 굵기 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">폰트 굵기</p>
<div className="grid grid-cols-3 gap-2">
{FONT_WEIGHT_CARDS.map((card) => {
const isSelected = (config.fontWeight || "normal") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("fontWeight", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[50px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<span
className="text-sm"
style={{ fontWeight: card.value }}
>
가나다
</span>
<span className="text-[10px] text-muted-foreground mt-0.5">
{card.label}
</span>
</button>
);
})}
</div>
</div>
{/* ─── 4단계: 텍스트 정렬 카드 선택 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">텍스트 정렬</p>
<div className="grid grid-cols-3 gap-2">
{ALIGN_CARDS.map((card) => {
const Icon = card.icon;
const isSelected = (config.textAlign || "left") === card.value;
return (
<button
key={card.value}
type="button"
onClick={() => updateConfig("textAlign", card.value)}
className={cn(
"flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all gap-1 min-h-[50px]",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary/20"
: "border-border hover:border-primary/50 hover:bg-muted/50"
)}
>
<Icon className="h-4 w-4 text-muted-foreground" />
<span className="text-[10px] text-muted-foreground">
{card.label}
</span>
</button>
);
})}
</div>
</div>
{/* ─── 5단계: 텍스트 색상 ─── */}
<div className="space-y-2">
<p className="text-sm font-medium">텍스트 색상</p>
<div className="rounded-lg border bg-muted/30 p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div
className="h-6 w-6 rounded-md border"
style={{ backgroundColor: config.color || "#212121" }}
/>
<span className="text-xs text-muted-foreground">
{config.color || "#212121"}
</span>
</div>
<Input
type="color"
value={config.color || "#212121"}
onChange={(e) => updateConfig("color", e.target.value)}
className="h-7 w-[60px] cursor-pointer p-0.5"
/>
</div>
</div>
</div>
{/* ─── 6단계: 고급 설정 (기본 접혀있음) ─── */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">고급 설정</span>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180"
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 배경색 */}
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">배경색</span>
<div className="flex items-center gap-2">
<div
className="h-5 w-5 rounded border"
style={{ backgroundColor: config.backgroundColor || "#ffffff" }}
/>
<Input
type="color"
value={config.backgroundColor || "#ffffff"}
onChange={(e) => updateConfig("backgroundColor", e.target.value)}
className="h-7 w-[60px] cursor-pointer p-0.5"
/>
</div>
</div>
{/* 패딩 */}
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">패딩</span>
<Input
value={config.padding || ""}
onChange={(e) => updateConfig("padding", e.target.value)}
placeholder="8px"
className="h-7 w-[100px] text-xs"
/>
</div>
{/* 모서리 둥글기 */}
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">모서리 둥글기</span>
<Input
value={config.borderRadius || ""}
onChange={(e) => updateConfig("borderRadius", e.target.value)}
placeholder="4px"
className="h-7 w-[100px] text-xs"
/>
</div>
{/* 테두리 */}
<div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">테두리</span>
<Input
value={config.border || ""}
onChange={(e) => updateConfig("border", e.target.value)}
placeholder="1px solid #d1d5db"
className="h-7 w-[140px] text-xs"
/>
</div>
{/* 비활성화 */}
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">비활성화</p>
<p className="text-[11px] text-muted-foreground">
컴포넌트를 비활성화 상태로 만들어요
</p>
</div>
<Switch
checked={config.disabled || false}
onCheckedChange={(checked) => updateConfig("disabled", checked)}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
V2TextDisplayConfigPanel.displayName = "V2TextDisplayConfigPanel";
export default V2TextDisplayConfigPanel;

1123
frontend/components/v2/config-panels/V2TimelineSchedulerConfigPanel.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

1
frontend/lib/api/auditLog.ts
View File

@ -3,6 +3,7 @@ import { apiClient } from "./client";
export interface AuditLogEntry {
id: number;
company_code: string;
company_name: string | null;
user_id: string;
user_name: string | null;
action: string;

6
frontend/lib/button-icon-map.tsx
View File

@ -1,5 +1,8 @@
import React from "react";
import DOMPurify from "isomorphic-dompurify";
let DOMPurify: any = null;
if (typeof window !== "undefined") {
DOMPurify = require("isomorphic-dompurify");
}
import {
Check, Save, CheckCircle, CircleCheck, FileCheck, ShieldCheck,
Trash2, Trash, XCircle, X, Eraser, CircleX,
@ -119,6 +122,7 @@ export function addToIconMap(name: string, component: LucideIcon): void {
// SVG 정화
// ---------------------------------------------------------------------------
export function sanitizeSvg(svgString: string): string {
if (!DOMPurify) return svgString;
return DOMPurify.sanitize(svgString, { USE_PROFILES: { svg: true } });
}

43
frontend/lib/registry/DynamicComponentRenderer.tsx
View File

@ -235,6 +235,8 @@ export interface DynamicComponentRendererProps {
// 🆕 분할 패널 내부 컴포넌트 선택 콜백
onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: any) => void;
selectedPanelComponentId?: string;
// 중첩된 분할패널 내부 컴포넌트 선택 콜백 (탭 안의 분할패널)
onNestedPanelSelect?: (splitPanelId: string, panelSide: "left" | "right", compId: string, comp: any) => void;
flowSelectedStepId?: number | null;
onFlowSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
// 테이블 새로고침 키
@ -302,9 +304,16 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
return type;
};
const componentType = mapToV2ComponentType(rawComponentType);
const mappedComponentType = mapToV2ComponentType(rawComponentType);
// 컴포넌트 타입 변환 완료
// fieldType 기반 동적 컴포넌트 전환 (통합 필드 설정 패널에서 설정된 값)
const componentType = (() => {
const ft = (component as any).componentConfig?.fieldType;
if (!ft) return mappedComponentType;
if (["text", "number", "password", "textarea", "slider", "color", "numbering"].includes(ft)) return "v2-input";
if (["select", "category", "entity"].includes(ft)) return "v2-select";
return mappedComponentType;
})();
// 🆕 조건부 렌더링 체크 (conditionalConfig)
// componentConfig 또는 overrides에서 conditionalConfig를 가져와서 formData와 비교
@ -738,7 +747,21 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
// 컬럼 메타데이터 기반 componentConfig 병합 (DB 최신 설정 우선)
const isEntityJoinColumn = fieldName?.includes(".");
const baseColumnName = isEntityJoinColumn ? undefined : fieldName;
const mergedComponentConfig = mergeColumnMeta(screenTableName, baseColumnName, component.componentConfig || {});
const rawMergedConfig = mergeColumnMeta(screenTableName, baseColumnName, component.componentConfig || {});
// fieldType이 설정된 경우, source/inputType 보조 속성 자동 보완
const mergedComponentConfig = (() => {
const ft = rawMergedConfig?.fieldType;
if (!ft) return rawMergedConfig;
const patch: Record<string, any> = {};
if (["select", "category", "entity"].includes(ft) && !rawMergedConfig.source) {
patch.source = ft === "category" ? "category" : ft === "entity" ? "entity" : "static";
}
if (["text", "number", "password", "textarea", "slider", "color", "numbering"].includes(ft) && !rawMergedConfig.inputType) {
patch.inputType = ft;
}
return Object.keys(patch).length > 0 ? { ...rawMergedConfig, ...patch } : rawMergedConfig;
})();
// NOT NULL 기반 필수 여부를 component.required에 반영
const notNullRequired = isColumnRequiredByMeta(screenTableName, baseColumnName);
@ -755,17 +778,16 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
onClick,
onDragStart,
onDragEnd,
size: needsExternalHorizLabel
? { ...(component.size || newComponent.defaultSize), width: undefined, height: undefined }
: component.size || newComponent.defaultSize,
position: component.position,
config: mergedComponentConfig,
componentConfig: mergedComponentConfig,
// componentConfig의 모든 속성을 props로 spread (tableName, displayField 등)
// componentConfig spread를 먼저 → 이후 명시적 속성이 override
...(mergedComponentConfig || {}),
// 🔧 style은 맨 마지막에! (componentConfig.style이 있어도 mergedStyle이 우선)
// size/position/style/label은 componentConfig spread 이후에 설정 (덮어쓰기 방지)
size: needsExternalHorizLabel
? { ...(component.size || newComponent.defaultSize), width: undefined }
: component.size || newComponent.defaultSize,
position: component.position,
style: mergedStyle,
// 수평 라벨 → 외부에서 처리하므로 label 전달 안 함
label: needsExternalHorizLabel ? undefined : effectiveLabel,
// NOT NULL 메타데이터 포함된 필수 여부 (V2Hierarchy 등 직접 props.required 참조하는 컴포넌트용)
required: effectiveRequired,
@ -868,6 +890,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
// 🆕 분할 패널 내부 컴포넌트 선택 콜백
onSelectPanelComponent: props.onSelectPanelComponent,
selectedPanelComponentId: props.selectedPanelComponentId,
onNestedPanelSelect: props.onNestedPanelSelect,
};
// 렌더러가 클래스인지 함수인지 확인

161
frontend/lib/registry/components/common/ConfigField.tsx
View File

@ -1,6 +1,6 @@
"use client";
import React from "react";
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
@ -13,7 +13,18 @@ import {
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Plus, X } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { ConfigFieldDefinition, ConfigOption } from "./ConfigPanelTypes";
interface ConfigFieldProps<T = any> {
@ -29,6 +40,8 @@ export function ConfigField<T>({
onChange,
tableColumns,
}: ConfigFieldProps<T>) {
const [comboboxOpen, setComboboxOpen] = useState(false);
const handleChange = (newValue: any) => {
onChange(field.key, newValue);
};
@ -41,7 +54,7 @@ export function ConfigField<T>({
value={value ?? ""}
onChange={(e) => handleChange(e.target.value)}
placeholder={field.placeholder}
className="h-8 text-xs"
className="h-7 text-xs"
/>
);
@ -59,7 +72,7 @@ export function ConfigField<T>({
min={field.min}
max={field.max}
step={field.step}
className="h-8 text-xs"
className="h-7 text-xs"
/>
);
@ -77,7 +90,7 @@ export function ConfigField<T>({
value={value ?? ""}
onValueChange={handleChange}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder={field.placeholder || "선택"} />
</SelectTrigger>
<SelectContent>
@ -103,25 +116,25 @@ export function ConfigField<T>({
case "color":
return (
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<input
type="color"
value={value ?? "#000000"}
onChange={(e) => handleChange(e.target.value)}
className="h-8 w-8 cursor-pointer rounded border"
className="h-7 w-7 cursor-pointer rounded border"
/>
<Input
value={value ?? ""}
onChange={(e) => handleChange(e.target.value)}
placeholder="#000000"
className="h-8 flex-1 text-xs"
className="h-7 flex-1 text-xs"
/>
</div>
);
case "slider":
return (
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<Input
type="number"
value={value ?? field.min ?? 0}
@ -129,17 +142,17 @@ export function ConfigField<T>({
min={field.min}
max={field.max}
step={field.step}
className="h-8 w-20 text-xs"
className="h-7 w-16 text-xs"
/>
<span className="text-muted-foreground text-[10px]">
{field.min ?? 0} ~ {field.max ?? 100}
<span className="text-muted-foreground text-[9px]">
{field.min ?? 0}~{field.max ?? 100}
</span>
</div>
);
case "multi-select":
return (
<div className="space-y-1">
<div className="space-y-0.5">
{(field.options || []).map((opt) => {
const selected = Array.isArray(value) && value.includes(opt.value);
return (
@ -230,7 +243,7 @@ export function ConfigField<T>({
value={value ?? ""}
onValueChange={handleChange}
>
<SelectTrigger className="h-8 text-xs">
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder={field.placeholder || "컬럼 선택"} />
</SelectTrigger>
<SelectContent>
@ -244,21 +257,123 @@ export function ConfigField<T>({
);
}
case "checkbox":
return (
<div className="flex items-center gap-2">
<Checkbox
id={`field-${field.key}`}
checked={!!value}
onCheckedChange={handleChange}
/>
{field.description && (
<label
htmlFor={`field-${field.key}`}
className="cursor-pointer text-xs text-muted-foreground"
>
{field.description}
</label>
)}
</div>
);
case "combobox": {
const options = field.options || [];
const selectedLabel = options.find((opt) => opt.value === value)?.label;
return (
<Popover open={comboboxOpen} onOpenChange={setComboboxOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={comboboxOpen}
className="h-7 w-full justify-between text-xs font-normal"
>
<span className="truncate">
{selectedLabel || field.placeholder || "선택"}
</span>
<ChevronsUpDown className="ml-1 h-3 w-3 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" />
<CommandList>
<CommandEmpty className="py-2 text-center text-xs">
결과 없음
</CommandEmpty>
<CommandGroup>
{options.map((opt) => (
<CommandItem
key={opt.value}
value={opt.value}
onSelect={(currentValue) => {
handleChange(currentValue === value ? "" : currentValue);
setComboboxOpen(false);
}}
className="text-xs"
>
<Check
className={cn(
"mr-1.5 h-3 w-3",
value === opt.value ? "opacity-100" : "opacity-0",
)}
/>
{opt.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}
default:
return null;
}
};
return (
<div className="space-y-1">
<div className="flex items-center justify-between">
<Label className="text-xs font-medium">{field.label}</Label>
{field.type === "switch" && renderField()}
// textarea, multi-select, key-value는 전체 폭 수직 레이아웃
const isFullWidth = ["textarea", "multi-select", "key-value"].includes(field.type);
// checkbox는 description을 인라인으로 표시하므로 별도 처리
const isCheckbox = field.type === "checkbox";
if (isFullWidth) {
return (
<div className="py-1.5">
<Label className="mb-1 block text-xs text-muted-foreground">{field.label}</Label>
{field.description && !isCheckbox && (
<p className="text-muted-foreground/60 mb-1 text-[9px]">{field.description}</p>
)}
{renderField()}
</div>
);
}
// switch, checkbox: 라벨 왼쪽, 컨트롤 오른쪽 (고정폭 없이)
if (field.type === "switch" || isCheckbox) {
return (
<div className="flex items-center justify-between py-1.5">
<Label className="mr-3 truncate text-xs text-muted-foreground">{field.label}</Label>
{renderField()}
</div>
);
}
// 기본: 수평 property row (라벨 왼쪽, 컨트롤 오른쪽 고정폭)
return (
<div className="flex items-center justify-between py-1.5">
<Label className="mr-3 min-w-0 shrink truncate text-xs text-muted-foreground">
{field.label}
</Label>
<div className="w-[140px] flex-shrink-0">
{renderField()}
</div>
{field.description && (
<p className="text-muted-foreground text-[10px]">{field.description}</p>
)}
{field.type !== "switch" && renderField()}
</div>
);
}

171
frontend/lib/registry/components/common/ConfigPanelBuilder.tsx
View File

@ -1,75 +1,144 @@
"use client";
import React from "react";
import { ConfigPanelBuilderProps } from "./ConfigPanelTypes";
import { ConfigPanelBuilderProps, ConfigSectionDefinition } from "./ConfigPanelTypes";
import { ConfigSection } from "./ConfigSection";
import { ConfigField } from "./ConfigField";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
function renderSections<T extends Record<string, any>>(
sections: ConfigSectionDefinition<T>[],
config: T,
onChange: (key: string, value: any) => void,
tableColumns?: any[],
) {
return sections.map((section) => {
if (section.condition && !section.condition(config)) {
return null;
}
const visibleFields = section.fields.filter(
(field) => !field.condition || field.condition(config),
);
if (visibleFields.length === 0) {
return null;
}
return (
<ConfigSection key={section.id} section={section}>
{visibleFields.map((field) => (
<ConfigField
key={field.key}
field={field}
value={(config as any)[field.key]}
onChange={onChange}
tableColumns={tableColumns}
/>
))}
</ConfigSection>
);
});
}
export function ConfigPanelBuilder<T extends Record<string, any>>({
config,
onChange,
onConfigChange,
sections,
presets,
tableColumns,
children,
mode = "flat",
context,
}: ConfigPanelBuilderProps<T>) {
return (
<div className="space-y-3">
{/* 프리셋 버튼 */}
{presets && presets.length > 0 && (
<div className="border-b pb-3">
<h4 className="mb-2 text-xs font-medium text-muted-foreground">
빠른 설정
</h4>
<div className="flex flex-wrap gap-1">
{presets.map((preset, idx) => (
<button
key={idx}
onClick={() => {
Object.entries(preset.values).forEach(([key, value]) => {
onChange(key, value);
});
}}
className="rounded-full bg-muted px-2.5 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-primary hover:text-primary-foreground"
title={preset.description}
>
{preset.label}
</button>
))}
</div>
const effectiveTableColumns = tableColumns || context?.tableColumns;
const presetSection = presets && presets.length > 0 && (
<div className="border-b border-border/40 pb-2.5">
<h4 className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
빠른 설정
</h4>
<div className="flex flex-wrap gap-1">
{presets.map((preset, idx) => (
<button
key={idx}
onClick={() => {
Object.entries(preset.values).forEach(([key, value]) => {
onChange(key, value);
});
if (onConfigChange) {
onConfigChange({ ...config, ...preset.values } as Record<string, any>);
}
}}
className="rounded border border-border bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:border-primary hover:text-primary"
title={preset.description}
>
{preset.label}
</button>
))}
</div>
</div>
);
if (mode === "tabs") {
const groupMap = new Map<string, ConfigSectionDefinition<T>[]>();
const ungrouped: ConfigSectionDefinition<T>[] = [];
for (const section of sections) {
if (section.group) {
const existing = groupMap.get(section.group) || [];
existing.push(section);
groupMap.set(section.group, existing);
} else {
ungrouped.push(section);
}
}
const tabGroups = Array.from(groupMap.entries());
if (tabGroups.length === 0) {
return (
<div className="space-y-1">
{presetSection}
{renderSections(sections, config, onChange, effectiveTableColumns)}
{children}
</div>
)}
);
}
{/* 섹션 렌더링 */}
{sections.map((section) => {
if (section.condition && !section.condition(config)) {
return null;
}
const defaultTab = tabGroups[0]?.[0] || "general";
const visibleFields = section.fields.filter(
(field) => !field.condition || field.condition(config),
);
return (
<div className="space-y-1">
{presetSection}
if (visibleFields.length === 0) {
return null;
}
{ungrouped.length > 0 && renderSections(ungrouped, config, onChange, effectiveTableColumns)}
return (
<ConfigSection key={section.id} section={section}>
{visibleFields.map((field) => (
<ConfigField
key={field.key}
field={field}
value={(config as any)[field.key]}
onChange={onChange}
tableColumns={tableColumns}
/>
<Tabs defaultValue={defaultTab} className="w-full">
<TabsList className="h-7 w-full">
{tabGroups.map(([groupName]) => (
<TabsTrigger key={groupName} value={groupName} className="h-6 text-xs">
{groupName}
</TabsTrigger>
))}
</ConfigSection>
);
})}
</TabsList>
{tabGroups.map(([groupName, groupSections]) => (
<TabsContent key={groupName} value={groupName} className="mt-1">
{renderSections(groupSections, config, onChange, effectiveTableColumns)}
</TabsContent>
))}
</Tabs>
{/* 커스텀 children */}
{children}
</div>
);
}
return (
<div className="space-y-1">
{presetSection}
{renderSections(sections, config, onChange, effectiveTableColumns)}
{children}
</div>
);

32
frontend/lib/registry/components/common/ConfigPanelTypes.ts
View File

@ -10,7 +10,9 @@ export type ConfigFieldType =
| "slider"
| "multi-select"
| "key-value"
| "column-picker";
| "column-picker"
| "checkbox"
| "combobox";
export interface ConfigOption {
label: string;
@ -40,11 +42,13 @@ export interface ConfigSectionDefinition<T = any> {
defaultOpen?: boolean;
fields: ConfigFieldDefinition<T>[];
condition?: (config: T) => boolean;
group?: string;
}
export interface ConfigPanelBuilderProps<T = any> {
config: T;
onChange: (key: string, value: any) => void;
onConfigChange?: (config: Record<string, any>) => void;
sections: ConfigSectionDefinition<T>[];
presets?: Array<{
label: string;
@ -53,4 +57,30 @@ export interface ConfigPanelBuilderProps<T = any> {
}>;
tableColumns?: ConfigOption[];
children?: React.ReactNode;
mode?: "flat" | "tabs";
context?: ConfigPanelContext;
}
/**
* 설정 패널에 전달되는 화면/컴포넌트 컨텍스트 정보
*/
export interface ConfigPanelContext {
tables?: any[];
tableColumns?: any[];
screenTableName?: string;
menuObjid?: number;
allComponents?: any[];
currentComponent?: any;
allTables?: any[];
screenComponents?: any[];
currentScreenCompanyCode?: string;
}
/**
* 모든 ConfigPanel이 공통으로 받는 표준 Props
*/
export interface StandardConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
context?: ConfigPanelContext;
}

46
frontend/lib/registry/components/common/ConfigSection.tsx
View File

@ -14,39 +14,45 @@ export function ConfigSection({ section, children }: ConfigSectionProps) {
if (section.collapsible) {
return (
<div className="border-b pb-3">
<div className="border-b border-border/40 py-2.5">
<button
onClick={() => setIsOpen(!isOpen)}
className="flex w-full items-center gap-1.5 py-1 text-left"
className="flex w-full items-center justify-between py-0.5 text-left"
>
{isOpen ? (
<ChevronDown className="h-3.5 w-3.5 shrink-0" />
) : (
<ChevronRight className="h-3.5 w-3.5 shrink-0" />
)}
<span className="text-sm font-medium">{section.title}</span>
{section.description && (
<span className="text-muted-foreground ml-auto text-[10px]">
{section.description}
</span>
)}
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
{section.title}
</span>
<div className="flex items-center gap-1.5">
{section.description && (
<span className="text-muted-foreground/60 text-[9px]">
{section.description}
</span>
)}
{isOpen ? (
<ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground/50" />
) : (
<ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/50" />
)}
</div>
</button>
{isOpen && <div className="mt-2 space-y-3">{children}</div>}
{isOpen && <div className="mt-1.5 space-y-1">{children}</div>}
</div>
);
}
return (
<div className="border-b pb-3">
<div className="mb-2">
<h4 className="text-sm font-medium">{section.title}</h4>
<div className="border-b border-border/40 py-2.5">
<div className="mb-1.5 flex items-center justify-between">
<h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
{section.title}
</h4>
{section.description && (
<p className="text-muted-foreground text-[10px]">
<span className="text-muted-foreground/60 text-[9px]">
{section.description}
</p>
</span>
)}
</div>
<div className="space-y-3">{children}</div>
<div className="space-y-1">{children}</div>
</div>
);
}

29
frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
View File

@ -20,7 +20,6 @@ import {
GeneratedLocation,
RackStructureContext,
} from "./types";
import { applyLocationPattern, DEFAULT_CODE_PATTERN, DEFAULT_NAME_PATTERN } from "./patternUtils";
// 기존 위치 데이터 타입
interface ExistingLocation {
@ -513,27 +512,23 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
return { totalLocations, totalRows, maxLevel };
}, [conditions]);
// 위치 코드 생성 (패턴 기반)
// 위치 코드 생성
const generateLocationCode = useCallback(
(row: number, level: number): { code: string; name: string } => {
const vars = {
warehouse: context?.warehouseCode || "WH001",
warehouseName: context?.warehouseName || "",
floor: context?.floor || "1",
zone: context?.zone || "A",
row,
level,
};
const warehouseCode = context?.warehouseCode || "WH001";
const floor = context?.floor || "1";
const zone = context?.zone || "A";
const codePattern = config.codePattern || DEFAULT_CODE_PATTERN;
const namePattern = config.namePattern || DEFAULT_NAME_PATTERN;
// 코드 생성 (예: WH001-1층D구역-01-1)
const code = `${warehouseCode}-${floor}${zone}-${row.toString().padStart(2, "0")}-${level}`;
return {
code: applyLocationPattern(codePattern, vars),
name: applyLocationPattern(namePattern, vars),
};
// 이름 생성 - zone에 이미 "구역"이 포함되어 있으면 그대로 사용
const zoneName = zone.includes("구역") ? zone : `${zone}구역`;
const name = `${zoneName}-${row.toString().padStart(2, "0")}열-${level}단`;
return { code, name };
},
[context, config.codePattern, config.namePattern],
[context],
);
// 미리보기 생성

98
frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
View File

@ -1,6 +1,6 @@
"use client";
import React, { useState, useEffect, useMemo } from "react";
import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
@ -12,47 +12,6 @@ import {
SelectValue,
} from "@/components/ui/select";
import { RackStructureComponentConfig, FieldMapping } from "./types";
import { applyLocationPattern, DEFAULT_CODE_PATTERN, DEFAULT_NAME_PATTERN, PATTERN_VARIABLES } from "./patternUtils";
// 패턴 미리보기 서브 컴포넌트
const PatternPreview: React.FC<{
codePattern?: string;
namePattern?: string;
}> = ({ codePattern, namePattern }) => {
const sampleVars = {
warehouse: "WH002",
warehouseName: "2창고",
floor: "2층",
zone: "A구역",
row: 1,
level: 3,
};
const previewCode = useMemo(
() => applyLocationPattern(codePattern || DEFAULT_CODE_PATTERN, sampleVars),
[codePattern],
);
const previewName = useMemo(
() => applyLocationPattern(namePattern || DEFAULT_NAME_PATTERN, sampleVars),
[namePattern],
);
return (
<div className="rounded-md border border-primary/20 bg-primary/5 p-2.5">
<div className="mb-1.5 text-[10px] font-medium text-primary">미리보기 (2창고 / 2층 / A구역 / 1열 / 3단)</div>
<div className="space-y-1">
<div className="flex items-center gap-2 text-xs">
<span className="w-14 shrink-0 text-muted-foreground">위치코드:</span>
<code className="rounded bg-background px-1.5 py-0.5 font-mono text-foreground">{previewCode}</code>
</div>
<div className="flex items-center gap-2 text-xs">
<span className="w-14 shrink-0 text-muted-foreground">위치명:</span>
<code className="rounded bg-background px-1.5 py-0.5 font-mono text-foreground">{previewName}</code>
</div>
</div>
</div>
);
};
interface RackStructureConfigPanelProps {
config: RackStructureComponentConfig;
@ -246,61 +205,6 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
</div>
</div>
{/* 위치코드 패턴 설정 */}
<div className="space-y-3 border-t pt-3">
<div className="text-sm font-medium text-foreground">위치코드/위치명 패턴</div>
<p className="text-xs text-muted-foreground">
변수를 조합하여 위치코드와 위치명 생성 규칙을 설정하세요
</p>
{/* 위치코드 패턴 */}
<div>
<Label className="text-xs">위치코드 패턴</Label>
<Input
value={config.codePattern || ""}
onChange={(e) => handleChange("codePattern", e.target.value || undefined)}
placeholder="{warehouse}-{floor}{zone}-{row:02}-{level}"
className="h-8 font-mono text-xs"
/>
<p className="mt-1 text-[10px] text-muted-foreground">
비워두면 기본값: {"{warehouse}-{floor}{zone}-{row:02}-{level}"}
</p>
</div>
{/* 위치명 패턴 */}
<div>
<Label className="text-xs">위치명 패턴</Label>
<Input
value={config.namePattern || ""}
onChange={(e) => handleChange("namePattern", e.target.value || undefined)}
placeholder="{zone}-{row:02}열-{level}단"
className="h-8 font-mono text-xs"
/>
<p className="mt-1 text-[10px] text-muted-foreground">
비워두면 기본값: {"{zone}-{row:02}열-{level}단"}
</p>
</div>
{/* 실시간 미리보기 */}
<PatternPreview
codePattern={config.codePattern}
namePattern={config.namePattern}
/>
{/* 사용 가능한 변수 목록 */}
<div className="rounded-md border bg-muted/50 p-2">
<div className="mb-1 text-[10px] font-medium text-foreground">사용 가능한 변수</div>
<div className="grid grid-cols-2 gap-x-3 gap-y-0.5">
{PATTERN_VARIABLES.map((v) => (
<div key={v.token} className="flex items-center gap-1 text-[10px]">
<code className="rounded bg-primary/10 px-1 font-mono text-primary">{v.token}</code>
<span className="text-muted-foreground">{v.description}</span>
</div>
))}
</div>
</div>
</div>
{/* 제한 설정 */}
<div className="space-y-3 border-t pt-3">
<div className="text-sm font-medium text-foreground">제한 설정</div>

7
frontend/lib/registry/components/rack-structure/patternUtils.ts
View File

@ -1,7 +0,0 @@
// rack-structure는 v2-rack-structure의 patternUtils를 재사용
export {
applyLocationPattern,
DEFAULT_CODE_PATTERN,
DEFAULT_NAME_PATTERN,
PATTERN_VARIABLES,
} from "../v2-rack-structure/patternUtils";

Some files were not shown because too many files have changed in this diff Show More