diff --git a/.cursor/agents/pipeline-backend.md b/.cursor/agents/pipeline-backend.md deleted file mode 100644 index 6b4ff99c..00000000 --- a/.cursor/agents/pipeline-backend.md +++ /dev/null @@ -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 diff --git a/.cursor/agents/pipeline-common-rules.md b/.cursor/agents/pipeline-common-rules.md deleted file mode 100644 index 57049ce6..00000000 --- a/.cursor/agents/pipeline-common-rules.md +++ /dev/null @@ -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으로만 구성 diff --git a/.cursor/agents/pipeline-db.md b/.cursor/agents/pipeline-db.md deleted file mode 100644 index 33e25218..00000000 --- a/.cursor/agents/pipeline-db.md +++ /dev/null @@ -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 diff --git a/.cursor/agents/pipeline-frontend.md b/.cursor/agents/pipeline-frontend.md deleted file mode 100644 index 223b5b38..00000000 --- a/.cursor/agents/pipeline-frontend.md +++ /dev/null @@ -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 diff --git a/.cursor/agents/pipeline-ui.md b/.cursor/agents/pipeline-ui.md deleted file mode 100644 index 05d3359e..00000000 --- a/.cursor/agents/pipeline-ui.md +++ /dev/null @@ -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 diff --git a/.cursor/agents/pipeline-verifier.md b/.cursor/agents/pipeline-verifier.md deleted file mode 100644 index a4f4186d..00000000 --- a/.cursor/agents/pipeline-verifier.md +++ /dev/null @@ -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. diff --git a/.cursor/rules/screen-designer-e2e-guide.mdc b/.cursor/rules/screen-designer-e2e-guide.mdc new file mode 100644 index 00000000..e52ec2dd --- /dev/null +++ b/.cursor/rules/screen-designer-e2e-guide.mdc @@ -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 (최고 관리자) diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx index 9c19405c..4726cf39 100644 --- a/frontend/components/screen/RealtimePreviewDynamic.tsx +++ b/frontend/components/screen/RealtimePreviewDynamic.tsx @@ -774,7 +774,7 @@ const RealtimePreviewDynamicComponent: React.FC = ({ /> - {/* 선택된 컴포넌트 정보 표시 - 🔧 오른쪽으로 이동 (라벨과 겹치지 않도록) */} + {/* 선택된 컴포넌트 정보 표시 */} {isSelected && (
{type === "widget" && ( @@ -785,7 +785,18 @@ const RealtimePreviewDynamicComponent: React.FC = ({ )} {type !== "widget" && (
- {component.componentConfig?.type || type} + {(() => { + const ft = (component as any).componentConfig?.fieldType; + if (ft) { + const labels: Record = { + text: "텍스트", number: "숫자", textarea: "여러줄", + select: "셀렉트", category: "카테고리", entity: "엔티티", + numbering: "채번", + }; + return labels[ft] || ft; + } + return (component as any).componentConfig?.type || componentType || type; + })()}
)}
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 6eeeb4e1..d22a9c14 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -475,6 +475,7 @@ export default function ScreenDesigner({ // 테이블 데이터 const [tables, setTables] = useState([]); + 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) => { diff --git a/frontend/components/screen/config-panels/AlertConfigPanel.tsx b/frontend/components/screen/config-panels/AlertConfigPanel.tsx index f842789e..8bae4f44 100644 --- a/frontend/components/screen/config-panels/AlertConfigPanel.tsx +++ b/frontend/components/screen/config-panels/AlertConfigPanel.tsx @@ -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; + onChange?: (key: string, value: any) => void; + component?: any; + onUpdateProperty?: (path: string, value: any) => void; } -export const AlertConfigPanel: React.FC = ({ 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 = ({ + 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 ( -
-
- - onUpdateProperty("componentConfig.title", e.target.value)} - placeholder="알림 제목을 입력하세요" - /> -
- -
- -