Merge branch 'gbpark-node' of http://39.117.244.52:3000/kjs/ERP-node into jskim-node
This commit is contained in:
commit
5a8c6df550
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
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
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
# WACE ERP 파이프라인 공통 룰 (모든 에이전트 필수 준수)
|
||||
|
||||
## 1. 화면 유형 구분 (절대 규칙!)
|
||||
|
||||
이 시스템은 **관리자 메뉴**와 **사용자 메뉴**가 완전히 다른 방식으로 동작한다.
|
||||
기능 구현 시 반드시 어느 유형인지 먼저 판단하라.
|
||||
|
||||
### 관리자 메뉴 (Admin)
|
||||
- **구현 방식**: React 코드 기반 페이지 (`.tsx` 파일)
|
||||
- **경로**: `frontend/app/(main)/admin/{기능명}/page.tsx`
|
||||
- **메뉴 등록**: `menu_info` 테이블에 INSERT 필수 (코드만 만들고 메뉴 등록 안 하면 미완성!)
|
||||
- **대상**: 시스템 설정, 사용자 관리, 결재 관리, 코드 관리 등
|
||||
- **특징**: 하드코딩된 UI, 관리자만 접근
|
||||
|
||||
### 사용자 메뉴 (User/Screen)
|
||||
- **구현 방식**: 로우코드 기반 (DB에 JSON으로 화면 구성 저장)
|
||||
- **데이터 저장**: `screen_layouts` 테이블에 JSON 형식 보관
|
||||
- **화면 디자이너**: 스크린 디자이너로 드래그앤드롭 구성
|
||||
- **V2 컴포넌트**: `frontend/lib/registry/components/v2-*` 디렉토리
|
||||
- **대상**: 일반 업무 화면, BOM, 문서 관리 등
|
||||
- **특징**: 코드 수정 없이 화면 구성 변경 가능
|
||||
|
||||
### 판단 기준
|
||||
|
||||
| 질문 | 관리자 메뉴 | 사용자 메뉴 |
|
||||
|------|-------------|-------------|
|
||||
| 누가 쓰나? | 시스템 관리자 | 일반 사용자 |
|
||||
| 화면 구조 고정? | 고정 (코드) | 유동적 (JSON) |
|
||||
| URL 패턴 | `/admin/*` | 스크린 디자이너 경유 |
|
||||
| 메뉴 등록 | `menu_info` INSERT 필수 | 스크린 레이아웃 등록 |
|
||||
|
||||
## 2. 관리자 메뉴 등록 (코드 구현 후 필수!)
|
||||
|
||||
관리자 기능을 코드로 만들었으면 반드시 `menu_info`에 등록해야 한다.
|
||||
|
||||
```sql
|
||||
-- 예시: 결재 템플릿 관리 메뉴 등록
|
||||
INSERT INTO menu_info (menu_id, menu_name, url, parent_id, menu_type, sort_order, is_active, company_code)
|
||||
VALUES ('approvalTemplate', '결재 템플릿', '/admin/approvalTemplate', 'approval', 'ADMIN', 40, 'Y', '대상회사코드');
|
||||
```
|
||||
|
||||
- 기존 메뉴 구조를 먼저 조회해서 parent_id, sort_order 등을 맞춰라
|
||||
- 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 엔드포인트 구현 + 라우트 등록
|
||||
- [ ] BE: company_code 필터링 적용
|
||||
- [ ] FE: API 클라이언트 함수 작성 (lib/api/)
|
||||
- [ ] FE: 화면 컴포넌트 구현
|
||||
- [ ] **메뉴 등록**: 관리자 메뉴면 menu_info INSERT, 사용자 메뉴면 스크린 레이아웃 등록
|
||||
- [ ] 빌드 통과: 백엔드 tsc + 프론트엔드 tsc
|
||||
|
||||
## 6. 절대 하지 말 것
|
||||
|
||||
1. 페이지 파일만 만들고 메뉴 등록 안 하기 (미완성!)
|
||||
2. fetch() 직접 사용 (lib/api/ 클라이언트 필수)
|
||||
3. company_code 필터링 빠뜨리기
|
||||
4. 하드코딩 색상/URL/사용자ID 사용
|
||||
5. Card 안에 Card 중첩 (중첩 박스 금지)
|
||||
6. 백엔드 재실행하기 (nodemon이 자동 재시작)
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
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
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
---
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
# 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
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
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
|
||||
|
||||
# Your Domain
|
||||
- frontend/components/ (UI components)
|
||||
- frontend/app/ (pages)
|
||||
|
||||
# Output Rules
|
||||
1. TypeScript strict mode
|
||||
2. "use client" for client components
|
||||
3. Comments in Korean
|
||||
4. MINIMAL targeted changes when modifying existing files
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
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.
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"setup-worktree-unix": [
|
||||
"cd backend-node && npm ci --prefer-offline --no-audit 2>/dev/null || npm install --prefer-offline --no-audit",
|
||||
"cd frontend && npm ci --prefer-offline --no-audit 2>/dev/null || npm install --prefer-offline --no-audit",
|
||||
"cp $ROOT_WORKTREE_PATH/backend-node/.env backend-node/.env 2>/dev/null || true",
|
||||
"cp $ROOT_WORKTREE_PATH/frontend/.env.local frontend/.env.local 2>/dev/null || true"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
|
||||
=== Step 1: 로그인 (topseal_admin) ===
|
||||
현재 URL: http://localhost:9771/screens/138
|
||||
스크린샷: 01-after-login.png
|
||||
OK: 로그인 완료
|
||||
|
||||
=== Step 2: 발주관리 화면 이동 ===
|
||||
스크린샷: 02-po-screen.png
|
||||
OK: 발주관리 화면 로드
|
||||
|
||||
=== Step 3: 그리드 컬럼 및 데이터 확인 ===
|
||||
컬럼 헤더 (전체): ["결재상태","발주번호","품목코드","품목명","규격","발주수량","출하수량","단위","구분","유형","재질","규격","품명"]
|
||||
첫 번째 컬럼: "결재상태"
|
||||
결재상태(한글) 표시됨
|
||||
데이터 행 수: 11
|
||||
데이터 있음
|
||||
첫 번째 컬럼 값(샘플): ["","","","",""]
|
||||
발주번호 형식 데이터: ["PO-2026-0001","PO-2026-0001","PO-2026-0001","PO-2026-0045","PO-2026-0045"]
|
||||
스크린샷: 03-grid-detail.png
|
||||
OK: 그리드 상세 스크린샷 저장
|
||||
|
||||
=== Step 4: 결재 요청 버튼 확인 ===
|
||||
OK: '결재 요청' 파란색 버튼 확인됨
|
||||
스크린샷: 04-approval-button.png
|
||||
|
||||
=== Step 5: 행 선택 후 결재 요청 ===
|
||||
OK: 행 선택 완료
|
||||
스크린샷: 05-approval-modal.png
|
||||
OK: 결재 모달 열림
|
||||
스크린샷: 06-approver-search-results.png
|
||||
결재자 검색 결과: 8명
|
||||
결재자 목록: ["상신결재","다단 결재순차적으로 결재","동시 결재모든 결재자 동시 진행","TEST(Kim1542)김동현","김혜인(qwer0578)배달집행부 / 차장","김지수(area09)배달집행부 / 대리","김한길(qoznd123)배달집행부 / 과장","김하세(kaoe123)배달집행부 / 사원"]
|
||||
스크린샷: 07-final.png
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
|
||||
=== Step 1: 로그인 ===
|
||||
스크린샷: 01-login-page.png
|
||||
스크린샷: 02-after-login.png
|
||||
OK: 로그인 완료, 대시보드 로드
|
||||
|
||||
=== Step 2: 구매관리 → 발주관리 메뉴 이동 ===
|
||||
INFO: 메뉴에서 발주관리 미발견, 직접 URL로 이동
|
||||
메뉴 목록: ["관리자 메뉴로 전환","회사 선택","관리자해외영업부"]
|
||||
스크린샷: 04-po-screen-loaded.png
|
||||
OK: /screen/COMPANY_7_064 직접 이동 완료
|
||||
|
||||
=== Step 3: 그리드 컬럼 확인 ===
|
||||
스크린샷: 05-grid-columns.png
|
||||
컬럼 목록: ["approval_status","발주번호","품목코드","품목명","규격","발주수량","출하","단위","구분","유형","재질","규격","품명"]
|
||||
FAIL: '결재상태' 컬럼 없음
|
||||
결재상태 값: 데이터 없음 또는 해당 값 없음
|
||||
|
||||
=== Step 4: 행 선택 및 결재 요청 버튼 클릭 ===
|
||||
스크린샷: 06-row-selected.png
|
||||
OK: 첫 번째 행 선택
|
||||
스크린샷: 07-approval-modal-opened.png
|
||||
OK: 결재 모달 열림
|
||||
|
||||
=== Step 5: 결재자 검색 테스트 ===
|
||||
스크린샷: 08-approver-search-results.png
|
||||
검색 결과 수: 12명
|
||||
결재자 목록: ["상신결재","템플릿","다단 결재순차적으로 결재","동시 결재모든 결재자 동시 진행","김동열(drkim)-","김아름(qwe123)생산부 / 차장","TEST(Kim1542)김동현","김혜인(qwer0578)배달집행부 / 차장","김욱동(dnrehd0171)-","김지수(area09)배달집행부 / 대리"]
|
||||
스크린샷: 09-final-state.png
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* system_notice 테이블 생성 마이그레이션 실행
|
||||
*/
|
||||
const { Pool } = require('pg');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const pool = new Pool({
|
||||
connectionString: process.env.DATABASE_URL || 'postgresql://postgres:ph0909!!@39.117.244.52:11132/plm',
|
||||
ssl: false,
|
||||
});
|
||||
|
||||
async function run() {
|
||||
const client = await pool.connect();
|
||||
try {
|
||||
const sqlPath = path.join(__dirname, '../../db/migrations/1050_create_system_notice.sql');
|
||||
const sql = fs.readFileSync(sqlPath, 'utf8');
|
||||
await client.query(sql);
|
||||
console.log('OK: system_notice 테이블 생성 완료');
|
||||
|
||||
// 검증
|
||||
const result = await client.query(
|
||||
"SELECT column_name FROM information_schema.columns WHERE table_name='system_notice' ORDER BY ordinal_position"
|
||||
);
|
||||
console.log('컬럼:', result.rows.map(r => r.column_name).join(', '));
|
||||
} catch (e) {
|
||||
console.error('ERROR:', e.message);
|
||||
process.exit(1);
|
||||
} finally {
|
||||
client.release();
|
||||
await pool.end();
|
||||
}
|
||||
}
|
||||
|
||||
run();
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* system_notice 마이그레이션 실행 스크립트
|
||||
* 사용법: node scripts/run-notice-migration.js
|
||||
*/
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { Pool } = require('pg');
|
||||
|
||||
const pool = new Pool({
|
||||
connectionString: process.env.DATABASE_URL || 'postgresql://postgres:ph0909!!@39.117.244.52:11132/plm',
|
||||
ssl: false,
|
||||
});
|
||||
|
||||
async function run() {
|
||||
const client = await pool.connect();
|
||||
try {
|
||||
const sqlPath = path.join(__dirname, '../../db/migrations/1050_create_system_notice.sql');
|
||||
const sql = fs.readFileSync(sqlPath, 'utf8');
|
||||
|
||||
console.log('마이그레이션 실행 중...');
|
||||
await client.query(sql);
|
||||
console.log('마이그레이션 완료');
|
||||
|
||||
// 컬럼 확인
|
||||
const check = await client.query(
|
||||
"SELECT column_name FROM information_schema.columns WHERE table_name='system_notice' ORDER BY ordinal_position"
|
||||
);
|
||||
console.log('테이블 컬럼:', check.rows.map(r => r.column_name).join(', '));
|
||||
} catch (e) {
|
||||
console.error('오류:', e.message);
|
||||
process.exit(1);
|
||||
} finally {
|
||||
client.release();
|
||||
await pool.end();
|
||||
}
|
||||
}
|
||||
|
||||
run();
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,212 @@
|
|||
import { Response } from "express";
|
||||
import { AuthenticatedRequest } from "../types/auth";
|
||||
import { query, queryOne } from "../database/db";
|
||||
|
||||
// ============================================================
|
||||
// 대결 위임 설정 (Approval Proxy Settings) CRUD
|
||||
// ============================================================
|
||||
|
||||
export class ApprovalProxyController {
|
||||
// 대결 위임 목록 조회 (user_info JOIN으로 이름/부서 포함)
|
||||
static async getProxySettings(req: AuthenticatedRequest, res: Response) {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode;
|
||||
if (!companyCode) {
|
||||
return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
|
||||
}
|
||||
|
||||
const rows = await query<any>(
|
||||
`SELECT ps.*,
|
||||
u1.user_name AS original_user_name, u1.dept_name AS original_dept_name,
|
||||
u2.user_name AS proxy_user_name, u2.dept_name AS proxy_dept_name
|
||||
FROM approval_proxy_settings ps
|
||||
LEFT JOIN user_info u1 ON ps.original_user_id = u1.user_id AND ps.company_code = u1.company_code
|
||||
LEFT JOIN user_info u2 ON ps.proxy_user_id = u2.user_id AND ps.company_code = u2.company_code
|
||||
WHERE ps.company_code = $1
|
||||
ORDER BY ps.created_at DESC`,
|
||||
[companyCode]
|
||||
);
|
||||
|
||||
return res.json({ success: true, data: rows });
|
||||
} catch (error) {
|
||||
console.error("대결 위임 목록 조회 오류:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "대결 위임 목록 조회 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "알 수 없는 오류",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 대결 위임 생성 (기간 중복 체크 포함)
|
||||
static async createProxySetting(req: AuthenticatedRequest, res: Response) {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode;
|
||||
if (!companyCode) {
|
||||
return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
|
||||
}
|
||||
|
||||
const { original_user_id, proxy_user_id, start_date, end_date, reason, is_active = "Y" } = req.body;
|
||||
|
||||
if (!original_user_id || !proxy_user_id) {
|
||||
return res.status(400).json({ success: false, message: "위임자와 대결자는 필수입니다." });
|
||||
}
|
||||
if (!start_date || !end_date) {
|
||||
return res.status(400).json({ success: false, message: "시작일과 종료일은 필수입니다." });
|
||||
}
|
||||
if (original_user_id === proxy_user_id) {
|
||||
return res.status(400).json({ success: false, message: "위임자와 대결자가 동일할 수 없습니다." });
|
||||
}
|
||||
|
||||
// 같은 기간 중복 체크 (daterange 오버랩)
|
||||
const overlap = await queryOne<any>(
|
||||
`SELECT COUNT(*) AS cnt FROM approval_proxy_settings
|
||||
WHERE original_user_id = $1 AND is_active = 'Y'
|
||||
AND daterange(start_date, end_date, '[]') && daterange($2::date, $3::date, '[]')
|
||||
AND company_code = $4`,
|
||||
[original_user_id, start_date, end_date, companyCode]
|
||||
);
|
||||
|
||||
if (overlap && parseInt(overlap.cnt) > 0) {
|
||||
return res.status(400).json({ success: false, message: "해당 기간에 이미 대결 설정이 존재합니다." });
|
||||
}
|
||||
|
||||
const [row] = await query<any>(
|
||||
`INSERT INTO approval_proxy_settings
|
||||
(original_user_id, proxy_user_id, start_date, end_date, reason, is_active, company_code)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7)
|
||||
RETURNING *`,
|
||||
[original_user_id, proxy_user_id, start_date, end_date, reason || null, is_active, companyCode]
|
||||
);
|
||||
|
||||
return res.status(201).json({ success: true, data: row, message: "대결 위임이 생성되었습니다." });
|
||||
} catch (error) {
|
||||
console.error("대결 위임 생성 오류:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "대결 위임 생성 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "알 수 없는 오류",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 대결 위임 수정
|
||||
static async updateProxySetting(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 existing = await queryOne<any>(
|
||||
"SELECT id FROM approval_proxy_settings WHERE id = $1 AND company_code = $2",
|
||||
[id, companyCode]
|
||||
);
|
||||
|
||||
if (!existing) {
|
||||
return res.status(404).json({ success: false, message: "대결 위임 설정을 찾을 수 없습니다." });
|
||||
}
|
||||
|
||||
const { proxy_user_id, start_date, end_date, reason, is_active } = req.body;
|
||||
|
||||
const fields: string[] = [];
|
||||
const params: any[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (proxy_user_id !== undefined) { fields.push(`proxy_user_id = $${idx++}`); params.push(proxy_user_id); }
|
||||
if (start_date !== undefined) { fields.push(`start_date = $${idx++}`); params.push(start_date); }
|
||||
if (end_date !== undefined) { fields.push(`end_date = $${idx++}`); params.push(end_date); }
|
||||
if (reason !== undefined) { fields.push(`reason = $${idx++}`); params.push(reason); }
|
||||
if (is_active !== undefined) { fields.push(`is_active = $${idx++}`); params.push(is_active); }
|
||||
|
||||
if (fields.length === 0) {
|
||||
return res.status(400).json({ success: false, message: "수정할 필드가 없습니다." });
|
||||
}
|
||||
|
||||
fields.push(`updated_at = NOW()`);
|
||||
params.push(id, companyCode);
|
||||
|
||||
const [row] = await query<any>(
|
||||
`UPDATE approval_proxy_settings SET ${fields.join(", ")}
|
||||
WHERE id = $${idx++} AND company_code = $${idx++}
|
||||
RETURNING *`,
|
||||
params
|
||||
);
|
||||
|
||||
return res.json({ success: true, data: row, message: "대결 위임이 수정되었습니다." });
|
||||
} catch (error) {
|
||||
console.error("대결 위임 수정 오류:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "대결 위임 수정 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "알 수 없는 오류",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 대결 위임 삭제
|
||||
static async deleteProxySetting(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 query<any>(
|
||||
"DELETE FROM approval_proxy_settings WHERE id = $1 AND company_code = $2 RETURNING id",
|
||||
[id, companyCode]
|
||||
);
|
||||
|
||||
if (result.length === 0) {
|
||||
return res.status(404).json({ success: false, message: "대결 위임 설정을 찾을 수 없습니다." });
|
||||
}
|
||||
|
||||
return res.json({ success: true, message: "대결 위임이 삭제되었습니다." });
|
||||
} catch (error) {
|
||||
console.error("대결 위임 삭제 오류:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "대결 위임 삭제 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "알 수 없는 오류",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 특정 사용자의 현재 활성 대결자 조회
|
||||
static async checkActiveProxy(req: AuthenticatedRequest, res: Response) {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode;
|
||||
if (!companyCode) {
|
||||
return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
|
||||
}
|
||||
|
||||
const { userId } = req.params;
|
||||
|
||||
if (!userId) {
|
||||
return res.status(400).json({ success: false, message: "userId 파라미터는 필수입니다." });
|
||||
}
|
||||
|
||||
const rows = await query<any>(
|
||||
`SELECT ps.*, u.user_name AS proxy_user_name
|
||||
FROM approval_proxy_settings ps
|
||||
LEFT JOIN user_info u ON ps.proxy_user_id = u.user_id AND ps.company_code = u.company_code
|
||||
WHERE ps.original_user_id = $1 AND ps.is_active = 'Y'
|
||||
AND ps.start_date <= CURRENT_DATE AND ps.end_date >= CURRENT_DATE
|
||||
AND ps.company_code = $2`,
|
||||
[userId, companyCode]
|
||||
);
|
||||
|
||||
return res.json({ success: true, data: rows });
|
||||
} catch (error) {
|
||||
console.error("활성 대결자 조회 오류:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "활성 대결자 조회 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "알 수 없는 오류",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
import { Response } from "express";
|
||||
import { AuthenticatedRequest } from "../types/auth";
|
||||
import { logger } from "../utils/logger";
|
||||
import { query } from "../database/db";
|
||||
|
||||
/**
|
||||
* GET /api/system-notices
|
||||
* 공지사항 목록 조회
|
||||
* - 최고 관리자(*): 전체 조회
|
||||
* - 일반 회사: 자신의 company_code 데이터만 조회
|
||||
* - is_active 필터 옵션 지원
|
||||
*/
|
||||
export const getSystemNotices = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const companyCode = req.user!.companyCode;
|
||||
const { is_active } = req.query;
|
||||
|
||||
logger.info("공지사항 목록 조회 요청", { companyCode, is_active });
|
||||
|
||||
const conditions: string[] = [];
|
||||
const params: any[] = [];
|
||||
let paramIndex = 1;
|
||||
|
||||
// 최고 관리자가 아닌 경우 company_code 필터링
|
||||
if (companyCode !== "*") {
|
||||
conditions.push(`company_code = $${paramIndex}`);
|
||||
params.push(companyCode);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
// is_active 필터 (true/false 문자열 처리)
|
||||
if (is_active !== undefined && is_active !== "") {
|
||||
const activeValue = is_active === "true" || is_active === "1";
|
||||
conditions.push(`is_active = $${paramIndex}`);
|
||||
params.push(activeValue);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
const whereClause =
|
||||
conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
|
||||
|
||||
const rows = await query<any>(
|
||||
`SELECT
|
||||
id,
|
||||
company_code,
|
||||
title,
|
||||
content,
|
||||
is_active,
|
||||
created_by,
|
||||
created_at,
|
||||
updated_at
|
||||
FROM system_notice
|
||||
${whereClause}
|
||||
ORDER BY created_at DESC`,
|
||||
params
|
||||
);
|
||||
|
||||
logger.info("공지사항 목록 조회 성공", {
|
||||
companyCode,
|
||||
count: rows.length,
|
||||
});
|
||||
|
||||
res.status(200).json({
|
||||
success: true,
|
||||
data: rows,
|
||||
total: rows.length,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error("공지사항 목록 조회 실패", { error });
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "공지사항 목록 조회 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* POST /api/system-notices
|
||||
* 공지사항 등록
|
||||
* - company_code는 req.user.companyCode에서 자동 추출 (클라이언트 입력 신뢰 금지)
|
||||
*/
|
||||
export const createSystemNotice = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const companyCode = req.user!.companyCode;
|
||||
const userId = req.user!.userId;
|
||||
const { title, content, is_active = true } = req.body;
|
||||
|
||||
logger.info("공지사항 등록 요청", { companyCode, userId, title });
|
||||
|
||||
if (!title || !title.trim()) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "제목을 입력해주세요.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!content || !content.trim()) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "내용을 입력해주세요.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const [created] = await query<any>(
|
||||
`INSERT INTO system_notice (company_code, title, content, is_active, created_by)
|
||||
VALUES ($1, $2, $3, $4, $5)
|
||||
RETURNING *`,
|
||||
[companyCode, title.trim(), content.trim(), is_active, userId]
|
||||
);
|
||||
|
||||
logger.info("공지사항 등록 성공", {
|
||||
id: created.id,
|
||||
companyCode,
|
||||
title: created.title,
|
||||
});
|
||||
|
||||
res.status(201).json({
|
||||
success: true,
|
||||
data: created,
|
||||
message: "공지사항이 등록되었습니다.",
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error("공지사항 등록 실패", { error });
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "공지사항 등록 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* PUT /api/system-notices/:id
|
||||
* 공지사항 수정
|
||||
* - WHERE id=$1 AND company_code=$2 로 타 회사 데이터 수정 차단
|
||||
* - 최고 관리자는 company_code 조건 없이 id만으로 수정 가능
|
||||
*/
|
||||
export const updateSystemNotice = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const companyCode = req.user!.companyCode;
|
||||
const { id } = req.params;
|
||||
const { title, content, is_active } = req.body;
|
||||
|
||||
logger.info("공지사항 수정 요청", { id, companyCode });
|
||||
|
||||
if (!title || !title.trim()) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "제목을 입력해주세요.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!content || !content.trim()) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "내용을 입력해주세요.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let result: any[];
|
||||
|
||||
if (companyCode === "*") {
|
||||
// 최고 관리자: id만으로 수정
|
||||
result = await query<any>(
|
||||
`UPDATE system_notice
|
||||
SET title = $1, content = $2, is_active = $3, updated_at = NOW()
|
||||
WHERE id = $4
|
||||
RETURNING *`,
|
||||
[title.trim(), content.trim(), is_active ?? true, id]
|
||||
);
|
||||
} else {
|
||||
// 일반 회사: company_code 추가 조건으로 타 회사 데이터 수정 차단
|
||||
result = await query<any>(
|
||||
`UPDATE system_notice
|
||||
SET title = $1, content = $2, is_active = $3, updated_at = NOW()
|
||||
WHERE id = $4 AND company_code = $5
|
||||
RETURNING *`,
|
||||
[title.trim(), content.trim(), is_active ?? true, id, companyCode]
|
||||
);
|
||||
}
|
||||
|
||||
if (!result || result.length === 0) {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: "공지사항을 찾을 수 없거나 수정 권한이 없습니다.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
logger.info("공지사항 수정 성공", { id, companyCode });
|
||||
|
||||
res.status(200).json({
|
||||
success: true,
|
||||
data: result[0],
|
||||
message: "공지사항이 수정되었습니다.",
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error("공지사항 수정 실패", { error, id: req.params.id });
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "공지사항 수정 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* DELETE /api/system-notices/:id
|
||||
* 공지사항 삭제
|
||||
* - WHERE id=$1 AND company_code=$2 로 타 회사 데이터 삭제 차단
|
||||
* - 최고 관리자는 company_code 조건 없이 id만으로 삭제 가능
|
||||
*/
|
||||
export const deleteSystemNotice = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const companyCode = req.user!.companyCode;
|
||||
const { id } = req.params;
|
||||
|
||||
logger.info("공지사항 삭제 요청", { id, companyCode });
|
||||
|
||||
let result: any[];
|
||||
|
||||
if (companyCode === "*") {
|
||||
// 최고 관리자: id만으로 삭제
|
||||
result = await query<any>(
|
||||
`DELETE FROM system_notice WHERE id = $1 RETURNING id`,
|
||||
[id]
|
||||
);
|
||||
} else {
|
||||
// 일반 회사: company_code 추가 조건으로 타 회사 데이터 삭제 차단
|
||||
result = await query<any>(
|
||||
`DELETE FROM system_notice WHERE id = $1 AND company_code = $2 RETURNING id`,
|
||||
[id, companyCode]
|
||||
);
|
||||
}
|
||||
|
||||
if (!result || result.length === 0) {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: "공지사항을 찾을 수 없거나 삭제 권한이 없습니다.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
logger.info("공지사항 삭제 성공", { id, companyCode });
|
||||
|
||||
res.status(200).json({
|
||||
success: true,
|
||||
message: "공지사항이 삭제되었습니다.",
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error("공지사항 삭제 실패", { error, id: req.params.id });
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "공지사항 삭제 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -5,6 +5,7 @@ import {
|
|||
ApprovalRequestController,
|
||||
ApprovalLineController,
|
||||
} from "../controllers/approvalController";
|
||||
import { ApprovalProxyController } from "../controllers/approvalProxyController";
|
||||
import { authenticateToken } from "../middleware/authMiddleware";
|
||||
|
||||
const router = express.Router();
|
||||
|
|
@ -30,9 +31,17 @@ router.get("/requests", ApprovalRequestController.getRequests);
|
|||
router.get("/requests/:id", ApprovalRequestController.getRequest);
|
||||
router.post("/requests", ApprovalRequestController.createRequest);
|
||||
router.post("/requests/:id/cancel", ApprovalRequestController.cancelRequest);
|
||||
router.post("/requests/:id/post-approve", ApprovalRequestController.postApprove);
|
||||
|
||||
// ==================== 결재 라인 처리 (Lines) ====================
|
||||
router.get("/my-pending", ApprovalLineController.getMyPendingLines);
|
||||
router.post("/lines/:lineId/process", ApprovalLineController.processApproval);
|
||||
|
||||
// ==================== 대결 위임 설정 (Proxy Settings) ====================
|
||||
router.get("/proxy-settings", ApprovalProxyController.getProxySettings);
|
||||
router.post("/proxy-settings", ApprovalProxyController.createProxySetting);
|
||||
router.put("/proxy-settings/:id", ApprovalProxyController.updateProxySetting);
|
||||
router.delete("/proxy-settings/:id", ApprovalProxyController.deleteProxySetting);
|
||||
router.get("/proxy-settings/check/:userId", ApprovalProxyController.checkActiveProxy);
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import { Router } from "express";
|
||||
import {
|
||||
getSystemNotices,
|
||||
createSystemNotice,
|
||||
updateSystemNotice,
|
||||
deleteSystemNotice,
|
||||
} from "../controllers/systemNoticeController";
|
||||
import { authenticateToken } from "../middleware/authMiddleware";
|
||||
|
||||
const router = Router();
|
||||
|
||||
// 모든 공지사항 라우트에 인증 미들웨어 적용
|
||||
router.use(authenticateToken);
|
||||
|
||||
// 공지사항 목록 조회 (is_active 필터 쿼리 파라미터 지원)
|
||||
router.get("/", getSystemNotices);
|
||||
|
||||
// 공지사항 등록
|
||||
router.post("/", createSystemNotice);
|
||||
|
||||
// 공지사항 수정
|
||||
router.put("/:id", updateSystemNotice);
|
||||
|
||||
// 공지사항 삭제
|
||||
router.delete("/:id", deleteSystemNotice);
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
# WACE 반응형 컴포넌트 전략
|
||||
|
||||
## 개요
|
||||
|
||||
WACE 프로젝트의 모든 반응형 UI는 **3개의 레이아웃 프리미티브 + 1개의 훅**으로 통일한다.
|
||||
컴포넌트마다 새로 타입을 정의하거나 리사이저를 구현하지 않는다.
|
||||
|
||||
## 아키텍처
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ useResponsive() 훅 │
|
||||
│ isMobile | isTablet | isDesktop | width │
|
||||
└──────────┬──────────┬──────────┬────────────────┘
|
||||
│ │ │
|
||||
┌───────▼──┐ ┌────▼─────┐ ┌─▼──────────────┐
|
||||
│ 데이터 │ │ 좌우분할 │ │ 캔버스(디자이너)│
|
||||
│ 목록 │ │ 패널 │ │ 화면 │
|
||||
└──────────┘ └──────────┘ └────────────────┘
|
||||
ResponsiveDataView ResponsiveSplitPanel ResponsiveGridRenderer
|
||||
```
|
||||
|
||||
## 1. useResponsive (훅)
|
||||
|
||||
**위치**: `frontend/lib/hooks/useResponsive.ts`
|
||||
|
||||
모든 반응형 판단의 기반. 직접 breakpoint 분기가 필요할 때만 사용.
|
||||
가능하면 아래 레이아웃 컴포넌트를 쓰고, 훅 직접 사용은 최소화.
|
||||
|
||||
| 반환값 | 브레이크포인트 | 해상도 |
|
||||
|--------|---------------|--------|
|
||||
| isMobile | xs, sm | < 768px |
|
||||
| isTablet | md | 768 ~ 1023px |
|
||||
| isDesktop | lg, xl, 2xl | >= 1024px |
|
||||
|
||||
## 2. ResponsiveDataView (데이터 목록)
|
||||
|
||||
**위치**: `frontend/components/common/ResponsiveDataView.tsx`
|
||||
**패턴**: 데스크톱 = 테이블, 모바일 = 카드 리스트
|
||||
**적용 대상**: 모든 목록/리스트 화면
|
||||
|
||||
```tsx
|
||||
<ResponsiveDataView<User>
|
||||
data={users}
|
||||
columns={columns}
|
||||
keyExtractor={(u) => u.id}
|
||||
cardTitle={(u) => u.name}
|
||||
cardFields={[
|
||||
{ label: "이메일", render: (u) => u.email },
|
||||
{ label: "부서", render: (u) => u.dept },
|
||||
]}
|
||||
renderActions={(u) => <Button>편집</Button>}
|
||||
/>
|
||||
```
|
||||
|
||||
**적용 완료 (12개 화면)**:
|
||||
- UserTable, CompanyTable, UserAuthTable
|
||||
- DataFlowList, ScreenList
|
||||
- system-notices, approvalTemplate, standards
|
||||
- batch-management, mail/receive, flowMgmtList
|
||||
- exconList, exCallConfList
|
||||
|
||||
## 3. ResponsiveSplitPanel (좌우 분할)
|
||||
|
||||
**위치**: `frontend/components/common/ResponsiveSplitPanel.tsx`
|
||||
**패턴**: 데스크톱 = 좌우 분할(리사이저 포함), 모바일 = 세로 스택(접기/펼치기)
|
||||
**적용 대상**: 카테고리관리, 메뉴관리, 부서관리, BOM 등 좌우 분할 레이아웃
|
||||
|
||||
```tsx
|
||||
<ResponsiveSplitPanel
|
||||
left={<TreeView />}
|
||||
right={<DetailPanel />}
|
||||
leftTitle="카테고리"
|
||||
leftWidth={25}
|
||||
minLeftWidth={10}
|
||||
maxLeftWidth={40}
|
||||
height="calc(100vh - 120px)"
|
||||
/>
|
||||
```
|
||||
|
||||
**Props**:
|
||||
| Prop | 타입 | 기본값 | 설명 |
|
||||
|------|------|--------|------|
|
||||
| left | ReactNode | 필수 | 좌측 패널 콘텐츠 |
|
||||
| right | ReactNode | 필수 | 우측 패널 콘텐츠 |
|
||||
| leftTitle | string | "목록" | 모바일 접기 헤더 |
|
||||
| leftWidth | number | 25 | 초기 좌측 너비(%) |
|
||||
| minLeftWidth | number | 10 | 최소 좌측 너비(%) |
|
||||
| maxLeftWidth | number | 50 | 최대 좌측 너비(%) |
|
||||
| showResizer | boolean | true | 리사이저 표시 |
|
||||
| collapsedOnMobile | boolean | true | 모바일 기본 접힘 |
|
||||
| height | string | "100%" | 컨테이너 높이 |
|
||||
|
||||
**동작**:
|
||||
- 데스크톱(>= 1024px): 좌우 분할 + 드래그 리사이저 + 좌측 접기 버튼
|
||||
- 모바일(< 1024px): 세로 스택, 좌측 패널 40vh 제한, 접기/펼치기
|
||||
|
||||
**마이그레이션 후보**:
|
||||
- `V2CategoryManagerComponent` (완료)
|
||||
- `SplitPanelLayoutComponent` (v1, v2)
|
||||
- `BomTreeComponent`
|
||||
- `ScreenSplitPanel`
|
||||
- menu/page.tsx (메뉴 관리)
|
||||
- departments/page.tsx (부서 관리)
|
||||
|
||||
## 4. ResponsiveGridRenderer (디자이너 캔버스)
|
||||
|
||||
**위치**: `frontend/components/screen/ResponsiveGridRenderer.tsx`
|
||||
**패턴**: 데스크톱(비전폭 컴포넌트) = 캔버스 스케일링, 그 외 = Flex 그리드
|
||||
**적용 대상**: 화면 디자이너로 만든 동적 화면
|
||||
|
||||
이 컴포넌트는 화면 디자이너 시스템 전용. 일반 개발에서 직접 사용하지 않음.
|
||||
|
||||
## 사용 가이드
|
||||
|
||||
### 새 화면 만들 때
|
||||
|
||||
| 화면 유형 | 사용 컴포넌트 |
|
||||
|-----------|--------------|
|
||||
| 데이터 목록 (테이블) | `ResponsiveDataView` |
|
||||
| 좌우 분할 (트리+상세) | `ResponsiveSplitPanel` |
|
||||
| 디자이너 화면 | `ResponsiveGridRenderer` (자동) |
|
||||
| 단순 레이아웃 | Tailwind 반응형 (`flex-col lg:flex-row`) |
|
||||
|
||||
### 금지 사항
|
||||
|
||||
1. 컴포넌트 내부에 `isDraggingRef`, `handleMouseDown/Move/Up` 직접 구현 금지
|
||||
-> `ResponsiveSplitPanel` 사용
|
||||
2. `hidden lg:block` / `lg:hidden` 패턴으로 테이블/카드 이중 렌더링 금지
|
||||
-> `ResponsiveDataView` 사용
|
||||
3. `window.innerWidth` 직접 체크 금지
|
||||
-> `useResponsive()` 훅 사용
|
||||
4. 반응형 분기를 위한 새로운 타입/인터페이스 정의 금지
|
||||
-> 기존 프리미티브의 Props 사용
|
||||
|
||||
### 폐기 예정 컴포넌트
|
||||
|
||||
| 컴포넌트 | 대체 | 상태 |
|
||||
|----------|------|------|
|
||||
| `ResponsiveContainer` | Tailwind 또는 `useResponsive` | 미사용, 삭제 예정 |
|
||||
| `ResponsiveGrid` | Tailwind `grid-cols-*` | 미사용, 삭제 예정 |
|
||||
| `ResponsiveText` | Tailwind `text-sm lg:text-lg` | 미사용, 삭제 예정 |
|
||||
|
||||
## 파일 구조
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── lib/hooks/
|
||||
│ └── useResponsive.ts # 브레이크포인트 훅 (기반)
|
||||
├── components/common/
|
||||
│ ├── ResponsiveDataView.tsx # 테이블/카드 전환
|
||||
│ └── ResponsiveSplitPanel.tsx # 좌우 분할 반응형
|
||||
└── components/screen/
|
||||
└── ResponsiveGridRenderer.tsx # 디자이너 캔버스 렌더러
|
||||
```
|
||||
|
|
@ -0,0 +1,380 @@
|
|||
# 결재 시스템 v2 사용 가이드
|
||||
|
||||
## 개요
|
||||
|
||||
결재 시스템 v2는 기존 순차결재(escalation) 외에 다양한 결재 방식을 지원합니다.
|
||||
|
||||
| 결재 유형 | 코드 | 설명 |
|
||||
|-----------|------|------|
|
||||
| 순차결재 (기본) | `escalation` | 결재선 순서대로 한 명씩 처리 |
|
||||
| 전결 (자기결재) | `self` | 상신자 본인이 직접 승인 (결재자 불필요) |
|
||||
| 합의결재 | `consensus` | 같은 단계에 여러 결재자 → 전원 승인 필요 |
|
||||
| 후결 | `post` | 먼저 실행 후 나중에 결재 (결재 전 상태에서도 업무 진행) |
|
||||
|
||||
추가 기능:
|
||||
- **대결 위임**: 부재 시 다른 사용자에게 결재 위임
|
||||
- **통보 단계**: 결재선에 통보만 하는 단계 (자동 승인 처리)
|
||||
- **긴급도**: `normal` / `urgent` / `critical`
|
||||
- **혼합형 결재선**: 한 결재선에 결재/합의/통보 단계를 자유롭게 조합
|
||||
|
||||
---
|
||||
|
||||
## DB 스키마 변경사항
|
||||
|
||||
### 마이그레이션 적용
|
||||
|
||||
```bash
|
||||
# 개발 DB에 마이그레이션 적용
|
||||
psql -h 39.117.244.52 -p 11132 -U postgres -d plm -f db/migrations/1051_approval_system_v2.sql
|
||||
psql -h 39.117.244.52 -p 11132 -U postgres -d plm -f db/migrations/1052_rename_proxy_id_to_id.sql
|
||||
```
|
||||
|
||||
### 변경된 테이블
|
||||
|
||||
#### approval_requests (추가 컬럼)
|
||||
|
||||
| 컬럼 | 타입 | 기본값 | 설명 |
|
||||
|------|------|--------|------|
|
||||
| approval_type | VARCHAR(20) | 'escalation' | self/escalation/consensus/post |
|
||||
| is_post_approved | BOOLEAN | FALSE | 후결 처리 완료 여부 |
|
||||
| post_approved_at | TIMESTAMPTZ | NULL | 후결 처리 시각 |
|
||||
| urgency | VARCHAR(20) | 'normal' | normal/urgent/critical |
|
||||
|
||||
#### approval_lines (추가 컬럼)
|
||||
|
||||
| 컬럼 | 타입 | 기본값 | 설명 |
|
||||
|------|------|--------|------|
|
||||
| step_type | VARCHAR(20) | 'approval' | approval/consensus/notification |
|
||||
| proxy_for | VARCHAR(50) | NULL | 대결 시 원래 결재자 ID |
|
||||
| proxy_reason | TEXT | NULL | 대결 사유 |
|
||||
| is_required | BOOLEAN | TRUE | 필수 결재 여부 |
|
||||
|
||||
#### approval_proxy_settings (신규)
|
||||
|
||||
| 컬럼 | 타입 | 설명 |
|
||||
|------|------|------|
|
||||
| id | SERIAL PK | |
|
||||
| company_code | VARCHAR(20) NOT NULL | |
|
||||
| original_user_id | VARCHAR(50) | 원래 결재자 |
|
||||
| proxy_user_id | VARCHAR(50) | 대결자 |
|
||||
| start_date | DATE | 위임 시작일 |
|
||||
| end_date | DATE | 위임 종료일 |
|
||||
| reason | TEXT | 위임 사유 |
|
||||
| is_active | CHAR(1) | 'Y'/'N' |
|
||||
|
||||
---
|
||||
|
||||
## API 엔드포인트
|
||||
|
||||
모든 API는 `/api/approval` 접두사 + JWT 인증 필수.
|
||||
|
||||
### 결재 요청 (Requests)
|
||||
|
||||
| Method | Endpoint | 설명 |
|
||||
|--------|----------|------|
|
||||
| GET | `/requests` | 목록 조회 |
|
||||
| GET | `/requests/:id` | 상세 조회 (lines 포함) |
|
||||
| POST | `/requests` | 결재 요청 생성 |
|
||||
| POST | `/requests/:id/cancel` | 결재 회수 |
|
||||
| POST | `/requests/:id/post-approve` | 후결 처리 |
|
||||
|
||||
#### 결재 요청 생성 Body
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: string;
|
||||
target_table: string;
|
||||
target_record_id: string;
|
||||
approval_type?: "self" | "escalation" | "consensus" | "post"; // 기본: escalation
|
||||
urgency?: "normal" | "urgent" | "critical"; // 기본: normal
|
||||
definition_id?: number;
|
||||
target_record_data?: Record<string, any>;
|
||||
approvers: Array<{
|
||||
approver_id: string;
|
||||
step_order: number;
|
||||
step_type?: "approval" | "consensus" | "notification"; // 기본: approval
|
||||
}>;
|
||||
}
|
||||
```
|
||||
|
||||
#### 결재 유형별 요청 예시
|
||||
|
||||
**전결 (self)**: 결재자 없이 본인 즉시 승인
|
||||
|
||||
```typescript
|
||||
await createApprovalRequest({
|
||||
title: "긴급 출장비 전결",
|
||||
target_table: "expense",
|
||||
target_record_id: "123",
|
||||
approval_type: "self",
|
||||
approvers: [],
|
||||
});
|
||||
```
|
||||
|
||||
**합의결재 (consensus)**: 같은 step_order에 여러 결재자
|
||||
|
||||
```typescript
|
||||
await createApprovalRequest({
|
||||
title: "프로젝트 예산안 합의",
|
||||
target_table: "budget",
|
||||
target_record_id: "456",
|
||||
approval_type: "consensus",
|
||||
approvers: [
|
||||
{ approver_id: "user1", step_order: 1, step_type: "consensus" },
|
||||
{ approver_id: "user2", step_order: 1, step_type: "consensus" },
|
||||
{ approver_id: "user3", step_order: 1, step_type: "consensus" },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
**혼합형 결재선**: 결재 → 합의 → 통보 조합
|
||||
|
||||
```typescript
|
||||
await createApprovalRequest({
|
||||
title: "신규 채용 승인",
|
||||
target_table: "recruitment",
|
||||
target_record_id: "789",
|
||||
approval_type: "escalation",
|
||||
approvers: [
|
||||
{ approver_id: "teamLead", step_order: 1, step_type: "approval" },
|
||||
{ approver_id: "hrManager", step_order: 2, step_type: "consensus" },
|
||||
{ approver_id: "cfo", step_order: 2, step_type: "consensus" },
|
||||
{ approver_id: "ceo", step_order: 3, step_type: "approval" },
|
||||
{ approver_id: "secretary", step_order: 4, step_type: "notification" },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
**후결 (post)**: 먼저 실행 후 나중에 결재
|
||||
|
||||
```typescript
|
||||
await createApprovalRequest({
|
||||
title: "긴급 자재 발주",
|
||||
target_table: "purchase_order",
|
||||
target_record_id: "101",
|
||||
approval_type: "post",
|
||||
urgency: "urgent",
|
||||
approvers: [
|
||||
{ approver_id: "manager", step_order: 1, step_type: "approval" },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### 결재 처리 (Lines)
|
||||
|
||||
| Method | Endpoint | 설명 |
|
||||
|--------|----------|------|
|
||||
| GET | `/my-pending` | 내 결재 대기 목록 |
|
||||
| POST | `/lines/:lineId/process` | 승인/반려 처리 |
|
||||
|
||||
#### 승인/반려 Body
|
||||
|
||||
```typescript
|
||||
{
|
||||
action: "approved" | "rejected";
|
||||
comment?: string;
|
||||
proxy_reason?: string; // 대결 시 사유
|
||||
}
|
||||
```
|
||||
|
||||
대결 처리: 원래 결재자가 아닌 사용자가 처리하면 자동으로 대결 설정 확인 후 `proxy_for`, `proxy_reason` 기록.
|
||||
|
||||
### 대결 위임 설정 (Proxy Settings)
|
||||
|
||||
| Method | Endpoint | 설명 |
|
||||
|--------|----------|------|
|
||||
| GET | `/proxy-settings` | 위임 목록 |
|
||||
| POST | `/proxy-settings` | 위임 생성 |
|
||||
| PUT | `/proxy-settings/:id` | 위임 수정 |
|
||||
| DELETE | `/proxy-settings/:id` | 위임 삭제 |
|
||||
| GET | `/proxy-settings/check/:userId` | 활성 대결자 확인 |
|
||||
|
||||
#### 대결 생성 Body
|
||||
|
||||
```typescript
|
||||
{
|
||||
original_user_id: string;
|
||||
proxy_user_id: string;
|
||||
start_date: string; // "2026-03-10"
|
||||
end_date: string; // "2026-03-20"
|
||||
reason?: string;
|
||||
is_active?: "Y" | "N";
|
||||
}
|
||||
```
|
||||
|
||||
### 템플릿 (Templates)
|
||||
|
||||
| Method | Endpoint | 설명 |
|
||||
|--------|----------|------|
|
||||
| GET | `/templates` | 템플릿 목록 |
|
||||
| GET | `/templates/:id` | 템플릿 상세 (steps 포함) |
|
||||
| POST | `/templates` | 템플릿 생성 |
|
||||
| PUT | `/templates/:id` | 템플릿 수정 |
|
||||
| DELETE | `/templates/:id` | 템플릿 삭제 |
|
||||
|
||||
---
|
||||
|
||||
## 프론트엔드 화면
|
||||
|
||||
### 1. 결재 요청 모달 (`ApprovalRequestModal`)
|
||||
|
||||
경로: `frontend/components/approval/ApprovalRequestModal.tsx`
|
||||
|
||||
- 결재 유형 선택: 상신결재 / 전결 / 합의결재 / 후결
|
||||
- 템플릿 불러오기: 등록된 템플릿에서 결재선 자동 세팅
|
||||
- 전결 시 결재자 섹션 숨김 + "본인이 직접 승인합니다" 안내
|
||||
- 합의결재 시 결재자 레이블 "합의 결재자"로 변경
|
||||
- 후결 시 안내 배너 표시
|
||||
- 혼합형 step_type 뱃지 표시 (결재/합의/통보)
|
||||
|
||||
### 2. 결재함 (`/admin/approvalBox`)
|
||||
|
||||
경로: `frontend/app/(main)/admin/approvalBox/page.tsx`
|
||||
|
||||
탭 구성:
|
||||
- **수신함**: 내가 결재할 건 목록
|
||||
- **상신함**: 내가 요청한 건 목록
|
||||
- **대결 설정**: 대결 위임 CRUD
|
||||
|
||||
대결 설정 기능:
|
||||
- 위임자/대결자 사용자 검색 (디바운스 300ms)
|
||||
- 시작일/종료일 설정
|
||||
- 활성/비활성 토글
|
||||
- 기간 중복 체크 (서버 측)
|
||||
- 등록/수정/삭제 모달
|
||||
|
||||
### 3. 결재 템플릿 관리 (`/admin/approvalTemplate`)
|
||||
|
||||
경로: `frontend/app/(main)/admin/approvalTemplate/page.tsx`
|
||||
|
||||
- 템플릿 목록/검색
|
||||
- 등록/수정 Dialog
|
||||
- 단계별 결재 유형 설정 (결재/합의/통보)
|
||||
- 합의 단계: "합의자 추가" 버튼으로 같은 step_order에 복수 결재자
|
||||
- 결재자 사용자 검색
|
||||
|
||||
### 4. 결재 단계 컴포넌트 (`v2-approval-step`)
|
||||
|
||||
경로: `frontend/lib/registry/components/v2-approval-step/`
|
||||
|
||||
화면 디자이너에서 사용하는 결재 단계 시각화 컴포넌트:
|
||||
- 가로형/세로형 스테퍼
|
||||
- step_order 기준 그룹핑 (합의결재 시 가로 나열)
|
||||
- step_type 아이콘: 결재(CheckCircle), 합의(Users), 통보(Bell)
|
||||
- 상태별 색상: 승인(success), 반려(destructive), 대기(warning)
|
||||
- 대결/후결/전결 뱃지
|
||||
- 긴급도 표시 (urgent: 주황 dot, critical: 빨강 배경)
|
||||
|
||||
---
|
||||
|
||||
## API 클라이언트 사용법
|
||||
|
||||
```typescript
|
||||
import {
|
||||
// 결재 요청
|
||||
createApprovalRequest,
|
||||
getApprovalRequests,
|
||||
getApprovalRequest,
|
||||
cancelApprovalRequest,
|
||||
postApproveRequest,
|
||||
|
||||
// 대결 위임
|
||||
getProxySettings,
|
||||
createProxySetting,
|
||||
updateProxySetting,
|
||||
deleteProxySetting,
|
||||
checkActiveProxy,
|
||||
|
||||
// 템플릿 단계
|
||||
getTemplateSteps,
|
||||
createTemplateStep,
|
||||
updateTemplateStep,
|
||||
deleteTemplateStep,
|
||||
|
||||
// 타입
|
||||
type ApprovalProxySetting,
|
||||
type CreateApprovalRequestInput,
|
||||
type ApprovalLineTemplateStep,
|
||||
} from "@/lib/api/approval";
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 핵심 로직 설명
|
||||
|
||||
### 동시성 보호 (FOR UPDATE)
|
||||
|
||||
결재 처리(`processApproval`)에서 동시 승인/반려 방지:
|
||||
|
||||
```sql
|
||||
SELECT * FROM approval_lines WHERE line_id = $1 FOR UPDATE
|
||||
SELECT * FROM approval_requests WHERE request_id = $1 FOR UPDATE
|
||||
```
|
||||
|
||||
### 대결 자동 감지
|
||||
|
||||
결재자가 아닌 사용자가 결재 처리하면:
|
||||
1. `approval_proxy_settings`에서 활성 대결 설정 확인
|
||||
2. 대결 설정이 있으면 → `proxy_for`, `proxy_reason` 자동 기록
|
||||
3. 없으면 → 403 에러
|
||||
|
||||
### 통보 단계 자동 처리
|
||||
|
||||
`step_type = 'notification'`인 단계가 활성화되면:
|
||||
1. 해당 단계의 모든 결재자를 자동 `approved` 처리
|
||||
2. `comment = '자동 통보 처리'` 기록
|
||||
3. `activateNextStep()` 재귀 호출로 다음 단계 진행
|
||||
|
||||
### 합의결재 단계 완료 판정
|
||||
|
||||
같은 `step_order`의 모든 결재자가 `approved`여야 다음 단계로:
|
||||
|
||||
```sql
|
||||
SELECT COUNT(*) FROM approval_lines
|
||||
WHERE request_id = $1 AND step_order = $2
|
||||
AND status NOT IN ('approved', 'skipped')
|
||||
```
|
||||
|
||||
하나라도 `rejected`면 전체 결재 반려.
|
||||
|
||||
---
|
||||
|
||||
## 메뉴 등록
|
||||
|
||||
결재 관련 화면을 메뉴에 등록하려면:
|
||||
|
||||
| 화면 | URL | 메뉴명 예시 |
|
||||
|------|-----|-------------|
|
||||
| 결재함 | `/admin/approvalBox` | 결재함 |
|
||||
| 결재 템플릿 관리 | `/admin/approvalTemplate` | 결재 템플릿 |
|
||||
| 결재 유형 관리 | `/admin/approvalMng` | 결재 유형 (기존) |
|
||||
|
||||
---
|
||||
|
||||
## 파일 구조
|
||||
|
||||
```
|
||||
backend-node/src/
|
||||
├── controllers/
|
||||
│ ├── approvalController.ts # 결재 유형/템플릿/요청/라인 처리
|
||||
│ └── approvalProxyController.ts # 대결 위임 CRUD
|
||||
└── routes/
|
||||
└── approvalRoutes.ts # 라우트 등록
|
||||
|
||||
frontend/
|
||||
├── app/(main)/admin/
|
||||
│ ├── approvalBox/page.tsx # 결재함 (수신/상신/대결)
|
||||
│ ├── approvalTemplate/page.tsx # 템플릿 관리
|
||||
│ └── approvalMng/page.tsx # 결재 유형 관리 (기존)
|
||||
├── components/approval/
|
||||
│ └── ApprovalRequestModal.tsx # 결재 요청 모달
|
||||
└── lib/
|
||||
├── api/approval.ts # API 클라이언트
|
||||
└── registry/components/v2-approval-step/
|
||||
├── ApprovalStepComponent.tsx # 결재 단계 시각화
|
||||
└── types.ts # 확장 타입
|
||||
|
||||
db/migrations/
|
||||
├── 1051_approval_system_v2.sql # v2 스키마 확장
|
||||
└── 1052_rename_proxy_id_to_id.sql # PK 컬럼명 통일
|
||||
```
|
||||
|
|
@ -0,0 +1,759 @@
|
|||
# WACE 시스템 문제점 분석 및 개선 계획
|
||||
|
||||
> **작성일**: 2026-03-01
|
||||
> **상태**: 분석 완료, 계획 수립
|
||||
> **목적**: 반복적으로 발생하는 시스템 문제의 근본 원인 분석 및 구조적 개선 방안
|
||||
|
||||
---
|
||||
|
||||
## 목차
|
||||
|
||||
1. [문제 요약](#1-문제-요약)
|
||||
2. [문제 1: AI(Cursor) 대화 길어질수록 정확도 저하](#2-문제-1-aicursor-대화-길어질수록-정확도-저하)
|
||||
3. [문제 2: 컴포넌트가 일관되지 않게 생성됨](#3-문제-2-컴포넌트가-일관되지-않게-생성됨)
|
||||
4. [문제 3: 코드 수정 시 다른 곳에 사이드 이펙트 발생](#4-문제-3-코드-수정-시-다른-곳에-사이드-이펙트-발생)
|
||||
5. [근본 원인 종합](#5-근본-원인-종합)
|
||||
6. [개선 계획](#6-개선-계획)
|
||||
7. [우선순위 로드맵](#7-우선순위-로드맵)
|
||||
|
||||
---
|
||||
|
||||
## 1. 문제 요약
|
||||
|
||||
| # | 증상 | 빈도 | 심각도 |
|
||||
|---|------|------|--------|
|
||||
| 1 | Cursor로 오래 작업하면 정확도 떨어짐 | 매 세션 | 중 |
|
||||
| 2 | 로우코드 컴포넌트 생성 시 오류, 비일관성 | 매 컴포넌트 | 높 |
|
||||
| 3 | 수정/신규 코드가 다른 곳에 영향 (저장 안됨, 특정 기능 깨짐) | 수시 | 높 |
|
||||
|
||||
세 문제는 독립적으로 보이지만, **하나의 구조적 원인**에서 파생된다.
|
||||
|
||||
---
|
||||
|
||||
## 2. 문제 1: AI(Cursor) 대화 길어질수록 정확도 저하
|
||||
|
||||
### 2.1. 증상
|
||||
|
||||
- 대화 초반에는 정확한 코드를 생성하다가, 30분~1시간 이상 작업하면 엉뚱한 코드 생성
|
||||
- 이전 맥락을 잊고 같은 질문을 반복하거나, 이미 수정한 부분을 되돌림
|
||||
- 관련 없는 파일을 수정하거나, 존재하지 않는 함수/변수를 참조
|
||||
|
||||
### 2.2. 원인 분석
|
||||
|
||||
AI의 컨텍스트 윈도우는 유한하다. 우리 코드베이스의 핵심 파일들이 **비정상적으로 거대**해서, AI가 한 번에 파악해야 할 정보량이 폭발한다.
|
||||
|
||||
#### 거대 파일 목록 (상위 10개)
|
||||
|
||||
| 파일 | 줄 수 | 역할 |
|
||||
|------|-------|------|
|
||||
| `frontend/lib/utils/buttonActions.ts` | **7,609줄** | 버튼 액션 전체 로직 |
|
||||
| `frontend/components/screen/ScreenDesigner.tsx` | **7,559줄** | 화면 설계기 |
|
||||
| `frontend/lib/registry/components/v2-table-list/TableListComponent.tsx` | **6,867줄** | V2 테이블 컴포넌트 |
|
||||
| `frontend/lib/registry/components/table-list/TableListComponent.tsx` | **6,829줄** | 레거시 테이블 컴포넌트 |
|
||||
| `frontend/components/screen/EditModal.tsx` | **1,648줄** | 편집 모달 |
|
||||
| `frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx` | **1,524줄** | 버튼 컴포넌트 |
|
||||
| `frontend/components/v2/V2Repeater.tsx` | **1,442줄** | 리피터 컴포넌트 |
|
||||
| `frontend/components/screen/InteractiveScreenViewerDynamic.tsx` | **1,435줄** | 화면 뷰어 |
|
||||
| `frontend/lib/utils/improvedButtonActionExecutor.ts` | **1,063줄** | 버튼 실행기 |
|
||||
| `frontend/lib/registry/DynamicComponentRenderer.tsx` | **980줄** | 컴포넌트 렌더러 |
|
||||
|
||||
**상위 3개 파일만 합쳐도 22,035줄**이다. AI가 이 파일 하나를 읽는 것만으로도 컨텍스트의 상당 부분을 소모한다.
|
||||
|
||||
#### 타입 안전성 부재
|
||||
|
||||
```typescript
|
||||
// frontend/types/component.ts:37-39
|
||||
export interface ComponentConfig {
|
||||
[key: string]: any; // 사실상 타입 검증 없음
|
||||
}
|
||||
|
||||
// frontend/types/component.ts:56-78
|
||||
export interface ComponentRendererProps {
|
||||
component: any; // ComponentData인데 any로 선언
|
||||
// ... 중략 ...
|
||||
[key: string]: any; // 여기도 any
|
||||
}
|
||||
```
|
||||
|
||||
`any` 타입이 핵심 인터페이스에 사용되어, AI가 "이 prop에 뭘 넣어야 하는지" 추론 불가.
|
||||
사람이 봐도 모르는데 AI가 알 리가 없다.
|
||||
|
||||
#### 이벤트 이름이 문자열 상수
|
||||
|
||||
```typescript
|
||||
// 이 이벤트들이 코드 전체에 흩어져 있음
|
||||
window.dispatchEvent(new CustomEvent("refreshTable"));
|
||||
window.dispatchEvent(new CustomEvent("closeEditModal"));
|
||||
window.dispatchEvent(new CustomEvent("saveSuccessInModal"));
|
||||
window.dispatchEvent(new CustomEvent("repeaterSaveComplete"));
|
||||
window.dispatchEvent(new CustomEvent("refreshCardDisplay"));
|
||||
window.dispatchEvent(new CustomEvent("refreshTableData"));
|
||||
window.dispatchEvent(new CustomEvent("saveSuccess"));
|
||||
window.dispatchEvent(new CustomEvent("closeScreenModal"));
|
||||
```
|
||||
|
||||
문자열 기반이라 AI가 이벤트 흐름을 추적할 수 없다. 어떤 이벤트가 어디서 발생하고 어디서 수신되는지 **정적 분석이 불가능**하다.
|
||||
|
||||
### 2.3. 영향
|
||||
|
||||
- AI가 파일 하나를 읽으면 다른 파일의 맥락을 잊음
|
||||
- 함수 시그니처를 추론하지 못하고 잘못된 파라미터를 넣음
|
||||
- 이벤트 기반 로직을 이해하지 못해 부정확한 코드 생성
|
||||
|
||||
---
|
||||
|
||||
## 3. 문제 2: 컴포넌트가 일관되지 않게 생성됨
|
||||
|
||||
### 3.1. 증상
|
||||
|
||||
- 새 컴포넌트를 만들 때마다 구조가 다름
|
||||
- Config 패널의 UI 패턴이 컴포넌트마다 제각각
|
||||
- 같은 기능인데 어떤 컴포넌트는 동작하고 어떤 컴포넌트는 안 됨
|
||||
|
||||
### 3.2. 원인 분석
|
||||
|
||||
#### 컴포넌트 수량과 중복
|
||||
|
||||
현재 등록된 컴포넌트 디렉토리: **81개**
|
||||
|
||||
이 중 V2와 레거시가 병존하는 **중복 쌍**:
|
||||
|
||||
| V2 버전 | 레거시 버전 | 기능 |
|
||||
|---------|------------|------|
|
||||
| `v2-table-list` (6,867줄) | `table-list` (6,829줄) | 테이블 |
|
||||
| `v2-button-primary` (1,524줄) | `button-primary` | 버튼 |
|
||||
| `v2-card-display` | `card-display` | 카드 표시 |
|
||||
| `v2-aggregation-widget` | `aggregation-widget` | 집계 위젯 |
|
||||
| `v2-file-upload` | `file-upload` | 파일 업로드 |
|
||||
| `v2-split-panel-layout` | `split-panel-layout` | 분할 패널 |
|
||||
| `v2-section-card` | `section-card` | 섹션 카드 |
|
||||
| `v2-section-paper` | `section-paper` | 섹션 페이퍼 |
|
||||
| `v2-category-manager` | `category-manager` | 카테고리 |
|
||||
| `v2-repeater` | `repeater-field-group` | 리피터 |
|
||||
| `v2-pivot-grid` | `pivot-grid` | 피벗 그리드 |
|
||||
| `v2-rack-structure` | `rack-structure` | 랙 구조 |
|
||||
| `v2-repeat-container` | `repeat-container` | 반복 컨테이너 |
|
||||
|
||||
**13쌍이 중복** 존재. `v2-table-list`와 `table-list`는 각각 6,800줄 이상으로, 거의 같은 코드가 두 벌 있다.
|
||||
|
||||
#### 패턴은 있지만 강제되지 않음
|
||||
|
||||
컴포넌트 표준 구조:
|
||||
```
|
||||
v2-example/
|
||||
├── index.ts # createComponentDefinition()
|
||||
├── ExampleRenderer.tsx # AutoRegisteringComponentRenderer 상속
|
||||
├── ExampleComponent.tsx # 실제 UI
|
||||
├── ExampleConfigPanel.tsx # 설정 패널 (선택)
|
||||
└── types.ts # ExampleConfig extends ComponentConfig
|
||||
```
|
||||
|
||||
이 패턴을 **문서(`.cursor/rules/component-development-guide.mdc`)에서 설명**하고 있지만:
|
||||
|
||||
1. **런타임 검증 없음**: `createComponentDefinition()`이 ID 형식만 검증, 나머지는 자유
|
||||
2. **Config 타입이 `any`**: `ComponentConfig = { [key: string]: any }` → 아무 값이나 들어감
|
||||
3. **테스트 0개**: 전체 프론트엔드에 테스트 파일 **1개** (`buttonDataflowPerformance.test.ts`), 컴포넌트 테스트는 **0개**
|
||||
4. **스캐폴딩 도구 없음**: 수동으로 파일을 만들고 index.ts에 import를 추가해야 함
|
||||
|
||||
#### 컴포넌트 간 복잡도 격차
|
||||
|
||||
| 분류 | 예시 | 줄 수 | 외부 의존 | Error Boundary |
|
||||
|------|------|-------|-----------|----------------|
|
||||
| 단순 표시형 | `v2-text-display` | ~100줄 | 거의 없음 | 없음 |
|
||||
| 입력형 | `v2-input` | ~500줄 | formData, eventBus | 없음 |
|
||||
| 버튼 | `v2-button-primary` | 1,524줄 | buttonActions, apiClient, context, eventBus, modalDataStore | 있음 |
|
||||
| 테이블 | `v2-table-list` | 6,867줄 | 거의 모든 것 | 있음 |
|
||||
|
||||
100줄짜리와 6,867줄짜리가 같은 "컴포넌트"로 취급된다. AI에게 "컴포넌트 만들어"라고 하면 어떤 수준으로 만들어야 하는지 기준이 없다.
|
||||
|
||||
#### POP 컴포넌트는 완전 별도 시스템
|
||||
|
||||
```
|
||||
frontend/lib/registry/
|
||||
├── ComponentRegistry.ts # 웹 컴포넌트 레지스트리
|
||||
├── PopComponentRegistry.ts # POP 컴포넌트 레지스트리 (별도 인터페이스)
|
||||
```
|
||||
|
||||
같은 "컴포넌트"인데 등록 방식, 인터페이스, 설정 구조가 완전히 다르다.
|
||||
|
||||
### 3.3. 영향
|
||||
|
||||
- 새 컴포넌트를 만들 때 "어떤 컴포넌트를 참고해야 하는지" 불명확
|
||||
- AI가 참조하는 컴포넌트에 따라 결과물이 달라짐
|
||||
- Config 구조가 제각각이라 설정 패널 UI도 불일치
|
||||
|
||||
---
|
||||
|
||||
## 4. 문제 3: 코드 수정 시 다른 곳에 사이드 이펙트 발생
|
||||
|
||||
### 4.1. 증상
|
||||
|
||||
- 저장 로직 수정했더니 다른 화면에서 저장이 안 됨
|
||||
- 테이블 관련 코드 수정했더니 모달에서 특정 기능이 깨짐
|
||||
- 리피터 수정했더니 버튼 동작이 달라짐
|
||||
|
||||
### 4.2. 원인 분석
|
||||
|
||||
#### 원인 A: window 전역 상태 오염
|
||||
|
||||
코드베이스 전체에서 `window.__*` 패턴 사용: **8개 파일, 32회 참조**
|
||||
|
||||
| 전역 변수 | 정의 위치 | 사용 위치 | 위험도 |
|
||||
|-----------|-----------|-----------|--------|
|
||||
| `window.__v2RepeaterInstances` | `V2Repeater.tsx` (220줄) | `EditModal.tsx`, `buttonActions.ts` (4곳) | **높음** |
|
||||
| `window.__relatedButtonsTargetTables` | `RelatedDataButtonsComponent.tsx` (25줄) | `v2-table-list`, `table-list`, `buttonActions.ts` | **높음** |
|
||||
| `window.__relatedButtonsSelectedData` | `RelatedDataButtonsComponent.tsx` (51줄) | `buttonActions.ts` (3113줄) | **높음** |
|
||||
| `window.__unifiedRepeaterInstances` | `UnifiedRepeater.tsx` (110줄) | `UnifiedRepeater.tsx` | 중간 |
|
||||
| `window.__AUTH_LOG` | `authLogger.ts` | 디버깅용 | 낮음 |
|
||||
|
||||
**사이드 이펙트 시나리오 예시**:
|
||||
|
||||
```
|
||||
1. V2Repeater 마운트 → window.__v2RepeaterInstances에 등록
|
||||
2. EditModal이 저장 시 → window.__v2RepeaterInstances 체크
|
||||
3. 만약 Repeater가 언마운트 타이밍에 늦게 정리되면?
|
||||
→ EditModal은 "리피터가 있다"고 판단
|
||||
→ 리피터 저장 로직 실행
|
||||
→ 실제로는 리피터 데이터 없음
|
||||
→ 저장 실패 또는 빈 데이터 저장
|
||||
```
|
||||
|
||||
#### 원인 B: 이벤트 스파게티
|
||||
|
||||
`window.dispatchEvent(new CustomEvent(...))` 사용: **43개 파일, 총 120회 이상**
|
||||
|
||||
주요 이벤트와 발신/수신 관계:
|
||||
|
||||
```
|
||||
[refreshTable 이벤트]
|
||||
발신 (8곳):
|
||||
- buttonActions.ts (5회)
|
||||
- BomItemEditorComponent.tsx
|
||||
- SelectedItemsDetailInputComponent.tsx
|
||||
- BomTreeComponent.tsx (2회)
|
||||
- ButtonPrimaryComponent.tsx (레거시)
|
||||
- ScreenModal.tsx (2회)
|
||||
- InteractiveScreenViewerDynamic.tsx
|
||||
|
||||
수신 (5곳):
|
||||
- v2-table-list/TableListComponent.tsx
|
||||
- table-list/TableListComponent.tsx
|
||||
- SplitPanelLayoutComponent.tsx
|
||||
- InteractiveScreenViewerDynamic.tsx
|
||||
- InteractiveScreenViewer.tsx
|
||||
```
|
||||
|
||||
```
|
||||
[closeEditModal 이벤트]
|
||||
발신 (4곳):
|
||||
- buttonActions.ts (4회)
|
||||
|
||||
수신 (2곳):
|
||||
- EditModal.tsx
|
||||
- screens/[screenId]/page.tsx
|
||||
```
|
||||
|
||||
```
|
||||
[beforeFormSave 이벤트]
|
||||
수신 (6곳):
|
||||
- V2Input.tsx
|
||||
- V2Repeater.tsx
|
||||
- BomItemEditorComponent.tsx
|
||||
- SelectedItemsDetailInputComponent.tsx
|
||||
- UniversalFormModalComponent.tsx
|
||||
- V2FormContext.tsx
|
||||
```
|
||||
|
||||
**문제**: 이벤트 이름이 **문자열 상수**이고, 발신과 수신이 **타입으로 연결되지 않음**.
|
||||
`refreshTable` 이벤트를 `refreshTableData`로 오타내도 컴파일 에러 없이 런타임에서만 발견된다.
|
||||
|
||||
#### 원인 C: 이중/삼중 이벤트 시스템
|
||||
|
||||
동시에 3개의 이벤트 시스템이 공존:
|
||||
|
||||
| 시스템 | 위치 | 방식 | 타입 안전 |
|
||||
|--------|------|------|-----------|
|
||||
| `window.dispatchEvent` | 전역 | CustomEvent 문자열 | 없음 |
|
||||
| `v2EventBus` | `lib/v2-core/events/EventBus.ts` | 타입 기반 pub/sub | 있음 |
|
||||
| `LegacyEventAdapter` | `lib/v2-core/adapters/LegacyEventAdapter.ts` | 1번↔2번 브릿지 | 부분적 |
|
||||
|
||||
어떤 컴포넌트는 `window.dispatchEvent`를 쓰고, 어떤 컴포넌트는 `v2EventBus`를 쓰고, 또 어떤 컴포넌트는 둘 다 쓴다. **같은 이벤트가 두 시스템에서 동시에 발생**할 수 있어 예측 불가능한 동작이 발생한다.
|
||||
|
||||
#### 원인 D: SplitPanelContext 이름 충돌
|
||||
|
||||
같은 이름의 Context가 2개 존재:
|
||||
|
||||
| 위치 | 용도 | 제공하는 것 |
|
||||
|------|------|------------|
|
||||
| `frontend/contexts/SplitPanelContext.tsx` | 데이터 전달 | `selectedLeftData`, `transfer()`, `registerReceiver()` |
|
||||
| `frontend/lib/registry/components/split-panel-layout/SplitPanelContext.tsx` | 리사이즈/좌표 | `getAdjustedX()`, `dividerX`, `leftWidthPercent` |
|
||||
|
||||
import 경로에 따라 **완전히 다른 Context**를 가져온다. AI가 자동완성으로 잘못된 Context를 import하면 런타임에 `undefined` 에러가 발생한다.
|
||||
|
||||
#### 원인 E: buttonActions.ts - 7,609줄의 신(God) 파일
|
||||
|
||||
이 파일 하나가 다음 기능을 전부 담당:
|
||||
|
||||
- 저장 (INSERT/UPDATE/DELETE)
|
||||
- 모달 열기/닫기
|
||||
- 리피터 데이터 수집
|
||||
- 테이블 새로고침
|
||||
- 파일 업로드
|
||||
- 외부 API 호출
|
||||
- 화면 전환
|
||||
- 데이터 검증
|
||||
- 이벤트 발송 (33회)
|
||||
- window 전역 상태 읽기 (5회)
|
||||
|
||||
**이 파일의 한 줄을 수정하면, 위의 모든 기능이 영향을 받을 수 있다.**
|
||||
|
||||
#### 원인 F: 레거시-V2 코드 동시 존재
|
||||
|
||||
```
|
||||
v2-table-list/TableListComponent.tsx (6,867줄)
|
||||
table-list/TableListComponent.tsx (6,829줄)
|
||||
```
|
||||
|
||||
거의 같은 코드가 두 벌. 한쪽을 수정하면 다른 쪽은 수정 안 되어 동작이 달라진다.
|
||||
또한 두 컴포넌트가 **같은 전역 이벤트를 수신**하므로, 한 화면에 둘 다 있으면 이중으로 반응할 수 있다.
|
||||
|
||||
#### 원인 G: Error Boundary 미적용
|
||||
|
||||
| 컴포넌트 | Error Boundary |
|
||||
|----------|----------------|
|
||||
| `v2-button-primary` | 있음 |
|
||||
| `v2-table-list` | 있음 |
|
||||
| `v2-repeater` | 있음 |
|
||||
| `v2-input` | **없음** |
|
||||
| `v2-select` | **없음** |
|
||||
| `v2-card-display` | **없음** |
|
||||
| `v2-text-display` | **없음** |
|
||||
| 기타 대부분 | **없음** |
|
||||
|
||||
Error Boundary가 없는 컴포넌트에서 에러가 발생하면, **상위 컴포넌트까지 전파**되어 화면 전체가 깨진다.
|
||||
|
||||
### 4.3. 사이드 이펙트 발생 위험 지도
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ buttonActions.ts │
|
||||
│ (7,609줄) │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ 저장 로직 │ │ 모달 로직 │ │ 이벤트 │ │
|
||||
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
|
||||
└───────┼──────────────┼─────────────┼─────────────────┘
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌──────────────┐ ┌──────────┐ ┌─────────────────┐
|
||||
│ window.__v2 │ │EditModal │ │ CustomEvent │
|
||||
│ RepeaterInst │ │(1,648줄) │ │ "refreshTable" │
|
||||
│ ances │ │ │ │ "closeEditModal" │
|
||||
└──────┬───────┘ └────┬─────┘ │ "saveSuccess" │
|
||||
│ │ └───────┬─────────┘
|
||||
▼ │ │
|
||||
┌──────────────┐ │ ┌──────▼───────┐
|
||||
│ V2Repeater │◄─────┘ │ TableList │
|
||||
│ (1,442줄) │ │ (6,867줄) │
|
||||
└──────────────┘ │ + 레거시 │
|
||||
│ (6,829줄) │
|
||||
└──────────────┘
|
||||
```
|
||||
|
||||
**위 그래프에서 어디를 수정하든 화살표를 따라 다른 곳에 영향이 전파된다.**
|
||||
|
||||
---
|
||||
|
||||
## 5. 근본 원인 종합
|
||||
|
||||
세 가지 문제의 근본 원인은 하나다: **경계(Boundary)가 없는 아키텍처**
|
||||
|
||||
| 근본 원인 | 문제 1 영향 | 문제 2 영향 | 문제 3 영향 |
|
||||
|-----------|-------------|-------------|-------------|
|
||||
| 거대 파일 (God File) | AI 컨텍스트 소모 | 참조할 기준 불명확 | 수정 영향 범위 광범위 |
|
||||
| `any` 타입 남발 | AI 타입 추론 불가 | Config 검증 없음 | 런타임 에러 |
|
||||
| 문자열 이벤트 | AI 이벤트 흐름 추적 불가 | 이벤트 패턴 불일치 | 이벤트 누락/오타 |
|
||||
| window 전역 상태 | AI 상태 추적 불가 | 컴포넌트 간 의존 증가 | 상태 오염 |
|
||||
| 테스트 부재 (0개) | 변경 검증 불가 | 컴포넌트 계약 불명 | 사이드 이펙트 감지 불가 |
|
||||
| 레거시-V2 중복 (13쌍) | AI 혼동 | 어느 쪽을 기준으로? | 한쪽만 수정 시 불일치 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 개선 계획
|
||||
|
||||
### Phase 1: 즉시 효과 (1~2주) - 안전장치 설치
|
||||
|
||||
#### 1-1. 이벤트 이름 상수화
|
||||
|
||||
**현재**:
|
||||
```typescript
|
||||
window.dispatchEvent(new CustomEvent("refreshTable"));
|
||||
```
|
||||
|
||||
**개선**:
|
||||
```typescript
|
||||
// frontend/lib/constants/events.ts
|
||||
export const EVENTS = {
|
||||
REFRESH_TABLE: "refreshTable",
|
||||
CLOSE_EDIT_MODAL: "closeEditModal",
|
||||
SAVE_SUCCESS: "saveSuccess",
|
||||
SAVE_SUCCESS_IN_MODAL: "saveSuccessInModal",
|
||||
REPEATER_SAVE_COMPLETE: "repeaterSaveComplete",
|
||||
REFRESH_CARD_DISPLAY: "refreshCardDisplay",
|
||||
REFRESH_TABLE_DATA: "refreshTableData",
|
||||
CLOSE_SCREEN_MODAL: "closeScreenModal",
|
||||
BEFORE_FORM_SAVE: "beforeFormSave",
|
||||
} as const;
|
||||
|
||||
// 사용
|
||||
window.dispatchEvent(new CustomEvent(EVENTS.REFRESH_TABLE));
|
||||
```
|
||||
|
||||
**효과**: 오타 방지, AI가 이벤트 흐름 추적 가능, IDE 자동완성 지원
|
||||
**위험도**: 낮음 (기능 변경 없음, 리팩토링만)
|
||||
**소요 예상**: 2~3시간
|
||||
|
||||
#### 1-2. window 전역 변수 타입 선언
|
||||
|
||||
**현재**: `window.__v2RepeaterInstances`를 사용하지만 타입 선언 없음
|
||||
|
||||
**개선**:
|
||||
```typescript
|
||||
// frontend/types/global.d.ts
|
||||
declare global {
|
||||
interface Window {
|
||||
__v2RepeaterInstances?: Set<string>;
|
||||
__unifiedRepeaterInstances?: Set<string>;
|
||||
__relatedButtonsTargetTables?: Set<string>;
|
||||
__relatedButtonsSelectedData?: {
|
||||
tableName: string;
|
||||
selectedRows: any[];
|
||||
};
|
||||
__AUTH_LOG?: { show: () => void };
|
||||
__COMPONENT_REGISTRY__?: Map<string, any>;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**효과**: 타입 안전성 확보, AI가 전역 상태 구조 이해 가능
|
||||
**위험도**: 낮음 (타입 선언만, 런타임 변경 없음)
|
||||
**소요 예상**: 1시간
|
||||
|
||||
#### 1-3. ComponentConfig에 제네릭 타입 적용
|
||||
|
||||
**현재**:
|
||||
```typescript
|
||||
export interface ComponentConfig {
|
||||
[key: string]: any;
|
||||
}
|
||||
```
|
||||
|
||||
**개선**:
|
||||
```typescript
|
||||
export interface ComponentConfig {
|
||||
[key: string]: unknown; // any → unknown으로 변경하여 타입 체크 강제
|
||||
}
|
||||
|
||||
// 각 컴포넌트에서
|
||||
export interface ButtonPrimaryConfig extends ComponentConfig {
|
||||
text: string; // 구체적 타입
|
||||
action: ButtonAction; // 구체적 타입
|
||||
variant?: "default" | "destructive" | "outline";
|
||||
}
|
||||
```
|
||||
|
||||
**효과**: 잘못된 config 값 사전 차단
|
||||
**위험도**: 중간 (기존 `any` 사용처에서 타입 에러 발생 가능, 점진적 적용 필요)
|
||||
**소요 예상**: 3~5일 (점진적)
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: 구조 개선 (2~4주) - 핵심 분리
|
||||
|
||||
#### 2-1. buttonActions.ts 분할
|
||||
|
||||
**현재**: 7,609줄, 1개 파일
|
||||
|
||||
**개선 목표**: 도메인별 분리
|
||||
|
||||
```
|
||||
frontend/lib/actions/
|
||||
├── index.ts # re-export
|
||||
├── types.ts # 공통 타입
|
||||
├── saveActions.ts # INSERT/UPDATE 저장 로직
|
||||
├── deleteActions.ts # DELETE 로직
|
||||
├── modalActions.ts # 모달 열기/닫기
|
||||
├── tableActions.ts # 테이블 새로고침, 데이터 조작
|
||||
├── repeaterActions.ts # 리피터 데이터 수집/저장
|
||||
├── fileActions.ts # 파일 업로드/다운로드
|
||||
├── navigationActions.ts # 화면 전환
|
||||
├── validationActions.ts # 데이터 검증
|
||||
└── externalActions.ts # 외부 API 호출
|
||||
```
|
||||
|
||||
**효과**:
|
||||
- 저장 로직 수정 시 `saveActions.ts`만 영향
|
||||
- AI가 관련 파일만 읽으면 됨 (7,600줄 → 평균 500줄)
|
||||
- import 관계로 의존성 명확화
|
||||
|
||||
**위험도**: 높음 (가장 많이 사용되는 파일, 신중한 분리 필요)
|
||||
**소요 예상**: 1~2주
|
||||
|
||||
#### 2-2. 이벤트 시스템 통일
|
||||
|
||||
**현재**: 3개 시스템 공존 (window CustomEvent, v2EventBus, LegacyEventAdapter)
|
||||
|
||||
**개선**:
|
||||
```typescript
|
||||
// v2EventBus로 통일, 타입 안전한 이벤트 정의
|
||||
interface EventMap {
|
||||
"table:refresh": { tableId?: string };
|
||||
"modal:close": { modalId: string };
|
||||
"form:save": { formData: Record<string, any> };
|
||||
"form:saveComplete": { success: boolean; message?: string };
|
||||
"repeater:saveComplete": { repeaterId: string };
|
||||
}
|
||||
|
||||
// 사용
|
||||
v2EventBus.emit("table:refresh", { tableId: "order_table" });
|
||||
v2EventBus.on("table:refresh", (data) => { /* data.tableId 타입 안전 */ });
|
||||
```
|
||||
|
||||
**마이그레이션 전략**:
|
||||
1. `v2EventBus`에 `EventMap` 타입 추가
|
||||
2. 새 코드는 반드시 `v2EventBus` 사용
|
||||
3. 기존 `window.dispatchEvent` → `v2EventBus`로 점진적 교체
|
||||
4. `LegacyEventAdapter`에서 양방향 브릿지 유지 (과도기)
|
||||
5. 모든 교체 완료 후 `LegacyEventAdapter` 제거
|
||||
|
||||
**효과**: 이벤트 흐름 추적 가능, 타입 안전, 디버깅 용이
|
||||
**위험도**: 중간 (과도기 브릿지로 안전하게 전환)
|
||||
**소요 예상**: 2~3주
|
||||
|
||||
#### 2-3. window 전역 상태 → Zustand 스토어 전환
|
||||
|
||||
**현재**:
|
||||
```typescript
|
||||
window.__v2RepeaterInstances = new Set();
|
||||
window.__relatedButtonsSelectedData = { tableName, selectedRows };
|
||||
```
|
||||
|
||||
**개선**:
|
||||
```typescript
|
||||
// frontend/lib/stores/componentInstanceStore.ts
|
||||
import { create } from "zustand";
|
||||
|
||||
interface ComponentInstanceState {
|
||||
repeaterInstances: Set<string>;
|
||||
relatedButtonsTargetTables: Set<string>;
|
||||
relatedButtonsSelectedData: {
|
||||
tableName: string;
|
||||
selectedRows: any[];
|
||||
} | null;
|
||||
|
||||
registerRepeater: (key: string) => void;
|
||||
unregisterRepeater: (key: string) => void;
|
||||
setRelatedData: (data: { tableName: string; selectedRows: any[] }) => void;
|
||||
clearRelatedData: () => void;
|
||||
}
|
||||
|
||||
export const useComponentInstanceStore = create<ComponentInstanceState>((set) => ({
|
||||
repeaterInstances: new Set(),
|
||||
relatedButtonsTargetTables: new Set(),
|
||||
relatedButtonsSelectedData: null,
|
||||
|
||||
registerRepeater: (key) =>
|
||||
set((state) => {
|
||||
const next = new Set(state.repeaterInstances);
|
||||
next.add(key);
|
||||
return { repeaterInstances: next };
|
||||
}),
|
||||
unregisterRepeater: (key) =>
|
||||
set((state) => {
|
||||
const next = new Set(state.repeaterInstances);
|
||||
next.delete(key);
|
||||
return { repeaterInstances: next };
|
||||
}),
|
||||
setRelatedData: (data) => set({ relatedButtonsSelectedData: data }),
|
||||
clearRelatedData: () => set({ relatedButtonsSelectedData: null }),
|
||||
}));
|
||||
```
|
||||
|
||||
**효과**:
|
||||
- 상태 변경 추적 가능 (Zustand devtools)
|
||||
- 컴포넌트 리렌더링 최적화 (selector 사용)
|
||||
- window 오염 제거
|
||||
|
||||
**위험도**: 중간
|
||||
**소요 예상**: 1주
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: 품질 강화 (4~8주) - 예방 체계
|
||||
|
||||
#### 3-1. 레거시 컴포넌트 제거
|
||||
|
||||
**목표**: V2-레거시 중복 13쌍 → V2만 유지
|
||||
|
||||
**전략**:
|
||||
1. 각 중복 쌍에서 레거시 사용처 검색
|
||||
2. 사용처가 없는 레거시 컴포넌트 즉시 제거
|
||||
3. 사용처가 있는 경우 V2로 교체 후 제거
|
||||
4. `components/index.ts`에서 import 제거
|
||||
|
||||
**효과**: 코드베이스 ~15,000줄 감소, AI 혼동 제거
|
||||
**소요 예상**: 2~3주
|
||||
|
||||
#### 3-2. 컴포넌트 스캐폴딩 CLI
|
||||
|
||||
**목표**: `npx create-v2-component my-component` 실행 시 표준 구조 자동 생성
|
||||
|
||||
```bash
|
||||
$ npx create-v2-component my-widget --category data
|
||||
|
||||
생성 완료:
|
||||
frontend/lib/registry/components/v2-my-widget/
|
||||
├── index.ts # 자동 생성
|
||||
├── MyWidgetRenderer.tsx # 자동 생성
|
||||
├── MyWidgetComponent.tsx # 템플릿
|
||||
├── MyWidgetConfigPanel.tsx # 템플릿
|
||||
└── types.ts # Config 인터페이스 템플릿
|
||||
|
||||
components/index.ts에 import 자동 추가 완료
|
||||
```
|
||||
|
||||
**효과**: 컴포넌트 구조 100% 일관성 보장
|
||||
**소요 예상**: 3~5일
|
||||
|
||||
#### 3-3. 핵심 컴포넌트 통합 테스트
|
||||
|
||||
**목표**: 사이드 이펙트 감지용 테스트 작성
|
||||
|
||||
```typescript
|
||||
// __tests__/integration/save-flow.test.ts
|
||||
describe("저장 플로우", () => {
|
||||
it("버튼 저장 → refreshTable 이벤트 발생", async () => {
|
||||
const listener = vi.fn();
|
||||
v2EventBus.on("table:refresh", listener);
|
||||
|
||||
await executeSaveAction({ tableName: "test_table", data: mockData });
|
||||
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("리피터가 있을 때 저장 → 리피터 데이터도 포함", async () => {
|
||||
useComponentInstanceStore.getState().registerRepeater("detail_table");
|
||||
|
||||
const result = await executeSaveAction({ tableName: "master_table", data: mockData });
|
||||
|
||||
expect(result.repeaterDataCollected).toBe(true);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
**대상**: 저장/삭제/모달/리피터 흐름 (가장 빈번하게 깨지는 부분)
|
||||
**효과**: 코드 수정 후 즉시 사이드 이펙트 감지
|
||||
**소요 예상**: 2~3주
|
||||
|
||||
#### 3-4. SplitPanelContext 통합
|
||||
|
||||
**목표**: 이름이 같은 2개의 Context → 1개로 통합 또는 명확히 분리
|
||||
|
||||
**방안 A - 통합**:
|
||||
```typescript
|
||||
// frontend/contexts/SplitPanelContext.tsx에 통합
|
||||
interface SplitPanelContextValue {
|
||||
// 데이터 전달 (기존 contexts/ 버전)
|
||||
selectedLeftData: any;
|
||||
transfer: (data: any) => void;
|
||||
registerReceiver: (handler: (data: any) => void) => void;
|
||||
// 리사이즈 (기존 components/ 버전)
|
||||
getAdjustedX: (x: number) => number;
|
||||
dividerX: number;
|
||||
leftWidthPercent: number;
|
||||
}
|
||||
```
|
||||
|
||||
**방안 B - 명확 분리**:
|
||||
```typescript
|
||||
// SplitPanelDataContext.tsx → 데이터 전달용
|
||||
// SplitPanelResizeContext.tsx → 리사이즈용
|
||||
```
|
||||
|
||||
**효과**: import 혼동 제거
|
||||
**소요 예상**: 2~3일
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: 장기 개선 (8주+) - 아키텍처 전환
|
||||
|
||||
#### 4-1. 거대 컴포넌트 분할
|
||||
|
||||
| 대상 파일 | 현재 줄 수 | 분할 목표 |
|
||||
|-----------|-----------|-----------|
|
||||
| `v2-table-list/TableListComponent.tsx` | 6,867줄 | 훅 분리, 렌더링 분리 → 각 1,000줄 이하 |
|
||||
| `ScreenDesigner.tsx` | 7,559줄 | 패널별 분리 → 각 1,500줄 이하 |
|
||||
| `EditModal.tsx` | 1,648줄 | 저장/폼/UI 분리 → 각 500줄 이하 |
|
||||
| `ButtonPrimaryComponent.tsx` | 1,524줄 | 액션 실행 분리 → 각 500줄 이하 |
|
||||
|
||||
#### 4-2. Config 스키마 검증 (Zod)
|
||||
|
||||
```typescript
|
||||
// v2-button-primary/types.ts
|
||||
import { z } from "zod";
|
||||
|
||||
export const ButtonPrimaryConfigSchema = z.object({
|
||||
text: z.string().default("버튼"),
|
||||
variant: z.enum(["default", "destructive", "outline", "secondary", "ghost"]).default("default"),
|
||||
action: z.object({
|
||||
type: z.enum(["save", "delete", "navigate", "custom"]),
|
||||
targetTable: z.string().optional(),
|
||||
// ...
|
||||
}),
|
||||
});
|
||||
|
||||
export type ButtonPrimaryConfig = z.infer<typeof ButtonPrimaryConfigSchema>;
|
||||
```
|
||||
|
||||
`createComponentDefinition()`에서 스키마 검증을 강제하여 잘못된 config가 등록 시점에 차단되도록 한다.
|
||||
|
||||
---
|
||||
|
||||
## 7. 우선순위 로드맵
|
||||
|
||||
### 즉시 (이번 주)
|
||||
|
||||
- [ ] **1-1**: 이벤트 이름 상수 파일 생성 (`frontend/lib/constants/events.ts`)
|
||||
- [ ] **1-2**: window 전역 변수 타입 선언 (`frontend/types/global.d.ts`)
|
||||
|
||||
### 단기 (1~2주)
|
||||
|
||||
- [ ] **2-3**: window 전역 상태 → Zustand 스토어 전환
|
||||
- [ ] **1-3**: ComponentConfig `any` → `unknown` 점진적 적용
|
||||
|
||||
### 중기 (2~4주)
|
||||
|
||||
- [ ] **2-1**: buttonActions.ts 분할 (7,609줄 → 도메인별)
|
||||
- [ ] **2-2**: 이벤트 시스템 통일 (v2EventBus 기반)
|
||||
- [ ] **3-4**: SplitPanelContext 통합/분리
|
||||
|
||||
### 장기 (4~8주)
|
||||
|
||||
- [ ] **3-1**: 레거시 컴포넌트 13쌍 제거
|
||||
- [ ] **3-2**: 컴포넌트 스캐폴딩 CLI
|
||||
- [ ] **3-3**: 핵심 플로우 통합 테스트
|
||||
- [ ] **4-1**: 거대 컴포넌트 분할
|
||||
- [ ] **4-2**: Config 스키마 Zod 검증
|
||||
|
||||
---
|
||||
|
||||
## 부록: 수치 요약
|
||||
|
||||
| 지표 | 현재 | 목표 |
|
||||
|------|------|------|
|
||||
| 최대 파일 크기 | 7,609줄 | 1,500줄 이하 |
|
||||
| 컴포넌트 수 | 81개 (13쌍 중복) | ~55개 (중복 제거) |
|
||||
| window 전역 변수 | 5개 | 0개 |
|
||||
| 이벤트 시스템 | 3개 공존 | 1개 (v2EventBus) |
|
||||
| 테스트 파일 | 1개 | 핵심 플로우 최소 10개 |
|
||||
| `any` 타입 사용 (핵심 인터페이스) | 3곳 | 0곳 |
|
||||
| SplitPanelContext 중복 | 2개 | 1개 (또는 명확 분리) |
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
# Agent Pipeline 한계점 분석
|
||||
|
||||
> 결재 시스템 같은 대규모 크로스도메인 프로젝트에서 현재 파이프라인이 왜 제대로 동작할 수 없는가
|
||||
|
||||
---
|
||||
|
||||
## 1. 에이전트 컨텍스트 격리 문제
|
||||
|
||||
### 현상
|
||||
`executor.ts`의 `spawnAgent()`는 매번 새로운 Cursor Agent CLI 프로세스를 생성한다. 각 에이전트는 `systemPrompt + taskDescription + fileContext`만 받고, 이전 대화/결정/아키텍처 논의는 전혀 알지 못한다.
|
||||
|
||||
```typescript
|
||||
// executor.ts:64-118
|
||||
function spawnAgent(agentType, prompt, model, workspacePath, timeoutMs) {
|
||||
const child = spawn(agentPath, ['--model', model, '--print', '--trust'], {
|
||||
cwd: workspacePath,
|
||||
stdio: ['pipe', 'pipe', 'pipe'],
|
||||
});
|
||||
child.stdin.write(prompt); // 이게 에이전트가 받는 전부
|
||||
child.stdin.end();
|
||||
}
|
||||
```
|
||||
|
||||
### 문제 본질
|
||||
- 에이전트는 **"왜 이렇게 만들어야 하는지"** 모른다. 단지 task description에 적힌 대로 만든다
|
||||
- 결재 시스템의 **설계 의도** (한국 기업 결재 문화, 자기결재/상신결재/합의결재/대결/후결)는 task description에 다 담을 수 없다
|
||||
- PM과 사용자 사이에 오간 **아키텍처 논의** (이벤트 훅 시스템, 제어관리 연동, 엔티티 조인으로 결재 상태 표시) 같은 결정 사항이 전달되지 않는다
|
||||
|
||||
### 결재 시스템에서의 구체적 영향
|
||||
- "ApprovalRequestModal에 결재 유형 선택을 추가해라"라고 지시하면, 에이전트는 기존 모달 코드를 읽겠지만, **왜 그 UI가 그렇게 생겼는지, 다른 패널(TableListConfigPanel)의 Combobox 패턴을 왜 따라야 하는지** 모른다
|
||||
- 실제로 이 대화에서 Combobox UI가 4번 수정됐다. 매번 "다른 패널 참고해서 만들라"고 해도 패턴을 정확히 못 따라했다
|
||||
|
||||
---
|
||||
|
||||
## 2. 파일 컨텍스트 3000자 절삭
|
||||
|
||||
### 현상
|
||||
```typescript
|
||||
// executor.ts:124-138
|
||||
async function readFileContexts(files, workspacePath) {
|
||||
for (const file of files) {
|
||||
const content = await readFile(fullPath, 'utf-8');
|
||||
contents.push(`--- ${file} ---\n${content.substring(0, 3000)}`); // 3000자 잘림
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 문제 본질
|
||||
주요 파일들의 실제 크기:
|
||||
- `approvalController.ts`: ~800줄 (3000자로는 약 100줄, 12.5%만 보인다)
|
||||
- `improvedButtonActionExecutor.ts`: ~1500줄
|
||||
- `ButtonConfigPanel.tsx`: ~600줄
|
||||
- `ApprovalStepConfigPanel.tsx`: ~300줄
|
||||
|
||||
에이전트가 수정해야 할 파일의 **전체 구조를 이해할 수 없다**. 앞부분만 보고 import 구문이나 초기 코드만 파악하고, 실제 수정 지점에 도달하지 못한다.
|
||||
|
||||
### 결재 시스템에서의 구체적 영향
|
||||
- `approvalController.ts`를 수정하려면 기존 함수 구조, DB 쿼리 패턴, 에러 처리 방식, 멀티테넌시 적용 패턴을 전부 알아야 한다. 3000자로는 불가능
|
||||
- `improvedButtonActionExecutor.ts`의 제어관리 연동 패턴을 이해하려면 파일 전체를 봐야 한다
|
||||
- V2 컴포넌트 표준을 따르려면 기존 컴포넌트(`v2-table-list/` 등)의 전체 구조를 참고해야 한다
|
||||
|
||||
---
|
||||
|
||||
## 3. 에이전트 간 실시간 소통 부재
|
||||
|
||||
### 현상
|
||||
병렬 실행 시 에이전트들은 **서로의 작업 결과를 실시간으로 공유하지 못한다**:
|
||||
|
||||
```typescript
|
||||
// executor.ts:442-454
|
||||
if (state.config.parallel) {
|
||||
const promises = readyTasks.map(async (task, index) => {
|
||||
if (index > 0) await sleep(index * STAGGER_DELAY); // 500ms 딜레이뿐
|
||||
return executeAndTrack(task);
|
||||
});
|
||||
await Promise.all(promises); // 완료까지 기다린 후 PM이 리뷰
|
||||
}
|
||||
```
|
||||
|
||||
PM 에이전트가 라운드 후에 리뷰하지만, 이것도 **round-N.md의 텍스트 기반 리뷰**일 뿐이다.
|
||||
|
||||
### 문제 본질
|
||||
- DB 에이전트가 스키마를 변경하면, Backend 에이전트가 그 결과를 **같은 라운드에서 즉시 반영할 수 없다**
|
||||
- Frontend 에이전트가 "이 API 응답 구조 좀 바꿔줘"라고 Backend에 요청할 수 없다
|
||||
- 협업 모드(`CollabMessage`)가 존재하지만, 이것도 **라운드 단위의 비동기 메시지**이지 실시간 대화가 아니다
|
||||
|
||||
### 결재 시스템에서의 구체적 영향
|
||||
- DB가 `approval_proxy_settings` 테이블을 만들고, Backend가 대결 API를 만들고, Frontend가 대결 설정 UI를 만드는 과정이 **최소 3라운드**가 필요하다 (각 의존성 해소를 위해)
|
||||
- 실제로는 Backend가 DB 스키마를 보고 쿼리를 짜는 과정에서 "이 컬럼 타입이 좀 다른 것 같은데"라는 이슈가 생기면, 즉시 수정 불가하고 다음 라운드로 넘어간다
|
||||
- 라운드당 에이전트 호출 1~3분 + PM 리뷰 1~2분 = **라운드당 최소 3~5분**. 8개 phase를 3라운드씩 = **최소 72~120분 (1~2시간)**
|
||||
|
||||
---
|
||||
|
||||
## 4. 시스템 프롬프트의 한계 (프로젝트 특수 패턴 부재)
|
||||
|
||||
### 현상
|
||||
`prompts.ts`의 시스템 프롬프트는 **범용적**이다:
|
||||
|
||||
```typescript
|
||||
// prompts.ts:75-118
|
||||
export const BACKEND_PROMPT = `
|
||||
# Role
|
||||
You are a Backend specialist for ERP-node project.
|
||||
Stack: Node.js + Express + TypeScript + PostgreSQL Raw Query.
|
||||
// ... 멀티테넌시, 기본 코드 패턴만 포함
|
||||
`;
|
||||
```
|
||||
|
||||
### 프로젝트 특수 패턴 중 프롬프트에 없는 것들
|
||||
|
||||
| 필수 패턴 | 프롬프트 포함 여부 | 영향 |
|
||||
|-----------|:------------------:|------|
|
||||
| V2 컴포넌트 레지스트리 (`createComponentDefinition`, `AutoRegisteringComponentRenderer`) | 프론트엔드 프롬프트에 기본 구조만 | 컴포넌트 등록 방식 오류 가능 |
|
||||
| ConfigPanelBuilder / ConfigSection | 언급만 | 직접 JSX로 패널 만드는 실수 반복 |
|
||||
| Combobox UI 패턴 (Popover + Command) | 없음 | 실제로 4번 재수정 필요했음 |
|
||||
| 엔티티 조인 시스템 | 없음 | 결재 상태를 대상 테이블에 표시하는 핵심 기능 구현 불가 |
|
||||
| 제어관리(Node Flow) 연동 | 없음 | 결재 후 자동 액션 트리거 구현 불가 |
|
||||
| ButtonActionExecutor 패턴 | 없음 | 결재 버튼 액션 구현 시 기존 패턴 미준수 |
|
||||
| apiClient 사용법 (frontend/lib/api/) | 간략한 언급 | fetch 직접 사용 가능성 |
|
||||
| CustomEvent 기반 모달 오픈 | 없음 | approval-modal 열기 방식 이해 불가 |
|
||||
| 화면 디자이너 컨텍스트 | 없음 | screenTableName 같은 설계 시 컨텍스트 활용 불가 |
|
||||
|
||||
### 결재 시스템에서의 구체적 영향
|
||||
- **이벤트 훅 시스템**을 만들려면 기존 `NodeFlowExecutionService`의 실행 패턴, 액션 타입 enum, 입력/출력 구조를 알아야 하는데, 프롬프트에 전혀 없다
|
||||
- **엔티티 조인으로 결재 상태 표시**하려면 기존 엔티티 조인 시스템이 어떻게 작동하는지(reverse lookup, join config) 알아야 하는데, 에이전트가 이 시스템 자체를 모른다
|
||||
|
||||
---
|
||||
|
||||
## 5. 단일 패스 실행 + 재시도의 비효율
|
||||
|
||||
### 현상
|
||||
```typescript
|
||||
// executor.ts:240-288
|
||||
async function executeTaskWithRetry(task, state) {
|
||||
while (task.attempts < task.maxRetries) {
|
||||
const result = await executeTaskOnce(task, state, retryContext);
|
||||
task.attempts++;
|
||||
if (result.success) break;
|
||||
// 검증 실패 → retryContext에 에러 메시지만 전달
|
||||
retryContext = failResult.retryContext || `이전 시도 실패: ${result.agentOutput.substring(0, 500)}`;
|
||||
await sleep(2000);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 문제 본질
|
||||
- 재시도 시 에이전트가 받는 건 **이전 에러 메시지 500자**뿐이다
|
||||
- "Combobox 패턴 대신 Select 박스를 썼다" 같은 **UI/UX 품질 문제**는 L1~L6 검증으로 잡을 수 없다 (빌드는 통과하니까)
|
||||
- 사용자의 실시간 피드백("이거 다른 패널이랑 UI가 다른데?")을 반영할 수 없다
|
||||
|
||||
### 검증 피라미드(L1~L6)가 못 잡는 것들
|
||||
|
||||
| 검증 레벨 | 잡을 수 있는 것 | 못 잡는 것 |
|
||||
|-----------|----------------|-----------|
|
||||
| L1 (TS 빌드) | 타입 에러, import 오류 | 로직 오류, 패턴 미준수 |
|
||||
| L2 (앱 빌드) | Next.js 빌드 에러 | 런타임 에러 |
|
||||
| L3 (API 호출) | 엔드포인트 존재 여부, 기본 응답 | 복잡한 비즈니스 로직 (다단계 결재 플로우) |
|
||||
| L4 (DB 검증) | 테이블 존재, 기본 CRUD | 결재 상태 전이 로직, 병렬 결재 집계 |
|
||||
| L5 (브라우저 E2E) | 화면 렌더링, 기본 클릭 | 결재 모달 Combobox UX, 대결 설정 UI 일관성 |
|
||||
| L6 (커스텀) | 명시적 조건 | 비명시적 품질 요구사항 |
|
||||
|
||||
### 결재 시스템에서의 구체적 영향
|
||||
- "자기결재 시 즉시 approved로 처리"가 올바르게 동작하는지 L3/L4로 검증 가능하지만, **"자기결재 선택 시 결재자 선택 UI가 숨겨지고 즉시 처리된다"는 UX**는 L5 자연어로는 불충분
|
||||
- "합의결재(병렬)에서 3명 중 2명 승인 + 1명 반려 시 전체 반려" 같은 **엣지 케이스 비즈니스 로직**은 자동 검증이 어렵다
|
||||
- 결재 완료 후 이벤트 훅 → Node Flow 실행 → 이메일 발송 같은 **체이닝된 비동기 로직**은 E2E로 검증 불가
|
||||
|
||||
---
|
||||
|
||||
## 6. 태스크 분할의 구조적 한계
|
||||
|
||||
### 현상: 파이프라인이 잘 되는 경우
|
||||
```
|
||||
[DB 테이블 생성] → [Backend CRUD API] → [Frontend 화면] → [UI 개선]
|
||||
```
|
||||
각 태스크가 **독립적**이고, 새 파일을 만들고, 의존성이 단방향이다.
|
||||
|
||||
### 현상: 파이프라인이 안 되는 경우 (결재 시스템)
|
||||
```
|
||||
[DB 스키마 변경]
|
||||
↓ ↘
|
||||
[Controller 수정] [새 API 추가] ← 기존 코드 500줄 이해 필요
|
||||
↓ ↓ ↑
|
||||
[모달 수정] [새 화면] ← 기존 UI 패턴 준수 필요 + 엔티티 조인 시스템 이해
|
||||
↓
|
||||
[V2 컴포넌트 수정] ← 레지스트리 시스템 + ConfigPanelBuilder 패턴 이해
|
||||
↓
|
||||
[이벤트 훅 시스템] ← NodeFlowExecutionService 전체 이해 + 새 시스템 설계
|
||||
↓
|
||||
[엔티티 조인 등록] ← 기존 엔티티 조인 시스템 전체 이해
|
||||
```
|
||||
|
||||
### 문제 본질
|
||||
- **기존 파일 수정**이 대부분이다. 새 파일 생성이 아니라 기존 코드에 기능을 끼워넣어야 한다
|
||||
- **패턴 준수**가 필수다. "돌아가기만 하면" 안 되고, 기존 시스템과 **일관된 방식**으로 구현해야 한다
|
||||
- **설계 결정**이 코드 작성보다 중요하다. "이벤트 훅을 어떻게 설계할까?"는 에이전트가 task description만 보고 결정할 수 없다
|
||||
|
||||
---
|
||||
|
||||
## 7. PM 에이전트의 역할 한계
|
||||
|
||||
### 현상
|
||||
```typescript
|
||||
// pm-agent.ts:21-70
|
||||
const PM_SYSTEM_PROMPT = `
|
||||
# 판단 기준
|
||||
- 빌드만 통과하면 "complete" 아니다 -- 기능이 실제로 동작해야 "complete"
|
||||
- 같은 에러 2회 반복 -> instruction에 구체적 해결책 제시
|
||||
- 같은 에러 3회 반복 -> "fail" 판정
|
||||
`;
|
||||
```
|
||||
|
||||
PM은 `round-N.md`(에이전트 응답 + git diff + 테스트 결과)와 `progress.md`만 보고 판단한다.
|
||||
|
||||
### PM이 할 수 없는 것
|
||||
|
||||
| 역할 | PM 가능 여부 | 이유 |
|
||||
|------|:----------:|------|
|
||||
| 빌드 실패 원인 파악 | 가능 | 에러 로그가 round-N.md에 있음 |
|
||||
| 비즈니스 로직 검증 | 불가 | 실제 코드를 읽지 않고 git diff만 봄 |
|
||||
| UI/UX 품질 판단 | 불가 | 스크린샷 없음, 렌더링 결과 못 봄 |
|
||||
| 아키텍처 일관성 검증 | 불가 | 전체 시스템 구조를 모름 |
|
||||
| 기존 패턴 준수 여부 | 불가 | 기존 코드를 참조하지 않음 |
|
||||
| 사용자 의도 반영 여부 | 불가 | 사용자와 대화 맥락 없음 |
|
||||
|
||||
### 결재 시스템에서의 구체적 영향
|
||||
- PM이 "Backend task 성공, Frontend task 실패"라고 판정할 수는 있지만, **"Backend가 만든 API 응답 구조가 Frontend가 기대하는 것과 다르다"**를 파악할 수 없다
|
||||
- "이 모달의 Combobox가 다른 패널과 UI가 다르다"는 사용자만 판단 가능
|
||||
- "이벤트 훅 시스템의 트리거 타이밍이 잘못됐다"는 전체 아키텍처를 이해해야 판단 가능
|
||||
|
||||
---
|
||||
|
||||
## 8. 안전성 리스크
|
||||
|
||||
### 역사적 사고
|
||||
> "과거 에이전트가 범위 밖 파일 50000줄 삭제하여 2800+ TS 에러 발생"
|
||||
> — user rules
|
||||
|
||||
### 결재 시스템의 리스크
|
||||
수정 대상 파일이 **시스템 핵심 파일**들이다:
|
||||
|
||||
| 파일 | 리스크 |
|
||||
|------|--------|
|
||||
| `improvedButtonActionExecutor.ts` (~1500줄) | 모든 버튼 동작의 핵심. 잘못 건드리면 시스템 전체 버튼 동작 불능 |
|
||||
| `approvalController.ts` (~800줄) | 기존 결재 API 깨질 수 있음 |
|
||||
| `ButtonConfigPanel.tsx` (~600줄) | 화면 디자이너 설정 패널 전체에 영향 |
|
||||
| `v2-approval-step/` (5개 파일) | V2 컴포넌트 레지스트리 손상 가능 |
|
||||
| `AppLayout.tsx` | 전체 레이아웃 메뉴 깨질 수 있음 |
|
||||
| `UserDropdown.tsx` | 사용자 프로필 메뉴 깨질 수 있음 |
|
||||
|
||||
`files` 필드로 범위를 제한하더라도, **에이전트가 `--trust` 모드로 실행**되기 때문에 실제로는 모든 파일에 접근 가능하다:
|
||||
|
||||
```typescript
|
||||
// executor.ts:78
|
||||
const child = spawn(agentPath, ['--model', model, '--print', '--trust'], {
|
||||
```
|
||||
|
||||
code-guard가 일부 보호하지만, **구조적 파괴(잘못된 import 삭제, 함수 시그니처 변경)는 코드 가드가 감지 불가**하다.
|
||||
|
||||
---
|
||||
|
||||
## 9. 종합: 파이프라인이 적합한 경우 vs 부적합한 경우
|
||||
|
||||
### 적합한 경우 (현재 파이프라인)
|
||||
|
||||
| 특성 | 예시 |
|
||||
|------|------|
|
||||
| 새 파일 생성 위주 | 새 CRUD 화면 만들기 |
|
||||
| 독립적 태스크 | 테이블 → API → 화면 순차 |
|
||||
| 패턴이 단순/반복적 | 표준 CRUD, 표준 Form |
|
||||
| 검증이 명확 | 빌드 + API 호출 + 브라우저 기본 확인 |
|
||||
| 컨텍스트 최소 | 기존 시스템 이해 불필요 |
|
||||
|
||||
### 부적합한 경우 (결재 시스템)
|
||||
|
||||
| 특성 | 결재 시스템 해당 여부 |
|
||||
|------|:-------------------:|
|
||||
| 기존 파일 대규모 수정 | 해당 (10+ 파일 수정) |
|
||||
| 크로스도메인 의존성 | 해당 (DB ↔ BE ↔ FE ↔ 기존 시스템) |
|
||||
| 복잡한 비즈니스 로직 | 해당 (5가지 결재 유형, 상태 전이, 이벤트 훅) |
|
||||
| 기존 시스템 깊은 이해 필요 | 해당 (제어관리, 엔티티 조인, 컴포넌트 레지스트리) |
|
||||
| UI/UX 일관성 필수 | 해당 (Combobox, 모달, 설정 패널 패턴 통일) |
|
||||
| 설계 결정이 선행 필요 | 해당 (이벤트 훅 아키텍처, 결재 타입 상태 머신) |
|
||||
| 사용자 피드백 반복 필요 | 해당 (실제로 4회 UI 수정 반복) |
|
||||
|
||||
---
|
||||
|
||||
## 10. 개선 방향 제안
|
||||
|
||||
현재 파이프라인을 결재 시스템 같은 대규모 프로젝트에서 사용하려면 다음이 필요하다:
|
||||
|
||||
### 10.1 컨텍스트 전달 강화
|
||||
- **프로젝트 컨텍스트 파일**: `.cursor/rules/` 수준의 프로젝트 규칙을 에이전트 프롬프트에 동적 주입
|
||||
- **아키텍처 결정 기록**: PM-사용자 간 논의된 설계 결정을 구조화된 형태로 에이전트에 전달
|
||||
- **패턴 레퍼런스 파일**: "이 파일을 참고해서 만들어라"를 task description이 아닌 시스템 차원에서 지원
|
||||
|
||||
### 10.2 파일 컨텍스트 확대
|
||||
- 3000자 절삭 → **전체 파일 전달** 또는 최소 10000자 이상
|
||||
- 관련 파일 자동 탐지 (import 그래프 기반)
|
||||
- 참고 파일(reference files)과 수정 파일(target files) 구분
|
||||
|
||||
### 10.3 에이전트 간 소통 채널
|
||||
- 라운드 내에서도 에이전트 간 **중간 결과 공유** 가능
|
||||
- "Backend가 API 스펙을 먼저 정의 → Frontend가 그 스펙 기반으로 구현" 같은 **단계적 소통**
|
||||
- 질문-응답 프로토콜 (현재 CollabMessage가 있지만 실질적으로 사용 안 됨)
|
||||
|
||||
### 10.4 PM 에이전트 강화
|
||||
- **코드 리뷰 기능**: git diff만 보지 말고 실제 파일을 읽어서 패턴 준수 여부 확인
|
||||
- **아키텍처 검증**: 전체 시스템 구조와의 일관성 검증
|
||||
- **사용자 피드백 루프**: PM이 사용자에게 "이 부분 확인 필요합니다" 알림 가능
|
||||
|
||||
### 10.5 검증 시스템 확장
|
||||
- **비즈니스 로직 검증**: 상태 전이 테스트 (결재 플로우 시나리오 자동 실행)
|
||||
- **UI 일관성 검증**: 스크린샷 비교, 컴포넌트 패턴 분석
|
||||
- **통합 테스트**: 단일 API 호출이 아닌 시나리오 기반 E2E
|
||||
|
||||
### 10.6 안전성 강화
|
||||
- `--trust` 모드 대신 **파일 범위 제한된 실행 모드**
|
||||
- 라운드별 git diff 자동 리뷰 (의도치 않은 파일 변경 감지)
|
||||
- 롤백 자동화 (검증 실패 시 자동 `git checkout`)
|
||||
|
||||
---
|
||||
|
||||
## 부록: 결재 시스템 파이프라인 실행 시 예상 시나리오
|
||||
|
||||
### 시도할 경우 예상되는 실패 패턴
|
||||
|
||||
```
|
||||
Round 1: DB 마이그레이션 (task-1)
|
||||
→ 성공 가능 (신규 파일 생성이므로)
|
||||
|
||||
Round 2: Backend Controller 수정 (task-2)
|
||||
→ approvalController.ts 3000자만 보고 수정 시도
|
||||
→ 기존 함수 구조 파악 실패
|
||||
→ L1 빌드 에러 (import 누락, 타입 불일치)
|
||||
→ 재시도 1: 에러 메시지 보고 고치지만, 기존 패턴과 다른 방식으로 구현
|
||||
→ L3 API 테스트 통과 (기능은 동작)
|
||||
→ 하지만 코드 품질/패턴 불일치 (PM이 감지 불가)
|
||||
|
||||
Round 3: Frontend 모달 수정 (task-4)
|
||||
→ 기존 ApprovalRequestModal 3000자만 보고 수정
|
||||
→ Combobox 패턴 대신 기본 Select 사용 (다른 패널 참고 불가)
|
||||
→ L1 빌드 통과, L5 브라우저 테스트도 기본 동작 통과
|
||||
→ 하지만 UI 일관성 미달 (사용자가 보면 즉시 지적)
|
||||
|
||||
Round 4-6: 이벤트 훅 시스템 (task-7)
|
||||
→ NodeFlowExecutionService 전체 이해 필요한데 3000자만 봄
|
||||
→ 기존 시스템과 연동 불가능한 독립적 구현 생산
|
||||
→ PM이 "빌드 통과했으니 complete" 판정
|
||||
→ 실제로는 기존 제어관리와 전혀 연결 안 됨
|
||||
|
||||
최종: 8/8 task "성공" 판정
|
||||
→ 사용자가 확인: "이거 다 뜯어 고쳐야 하는데?"
|
||||
→ 파이프라인 2시간 + 사용자 수동 수정 3시간 = 5시간 낭비
|
||||
→ PM이 직접 했으면 2~3시간에 끝
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*작성일: 2026-03-03*
|
||||
*대상: Agent Pipeline v3.0 (`_local/agent-pipeline/`)*
|
||||
*맥락: 결재 시스템 v2 재설계 프로젝트 (`docs/결재시스템_구현_현황.md`)*
|
||||
|
|
@ -5,17 +5,13 @@ import { LoginHeader } from "@/components/auth/LoginHeader";
|
|||
import { LoginForm } from "@/components/auth/LoginForm";
|
||||
import { LoginFooter } from "@/components/auth/LoginFooter";
|
||||
|
||||
/**
|
||||
* 로그인 페이지 컴포넌트
|
||||
* 비즈니스 로직은 useLogin 훅에서 처리하고, UI 컴포넌트들을 조합하여 구성
|
||||
*/
|
||||
export default function LoginPage() {
|
||||
const { formData, isLoading, error, showPassword, handleInputChange, handleLogin, togglePasswordVisibility } =
|
||||
useLogin();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
|
||||
<div className="w-full max-w-md space-y-8">
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
|
||||
<div className="w-full max-w-md space-y-6">
|
||||
<LoginHeader />
|
||||
|
||||
<LoginForm
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,963 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Plus,
|
||||
Edit,
|
||||
Trash2,
|
||||
Search,
|
||||
Loader2,
|
||||
UserPlus,
|
||||
GripVertical,
|
||||
} from "lucide-react";
|
||||
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
||||
import {
|
||||
type ApprovalDefinition,
|
||||
type ApprovalLineTemplate,
|
||||
type ApprovalLineTemplateStep,
|
||||
getApprovalDefinitions,
|
||||
getApprovalTemplates,
|
||||
getApprovalTemplate,
|
||||
createApprovalTemplate,
|
||||
updateApprovalTemplate,
|
||||
deleteApprovalTemplate,
|
||||
} from "@/lib/api/approval";
|
||||
import { getUserList } from "@/lib/api/user";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
// ============================================================
|
||||
// 타입 정의
|
||||
// ============================================================
|
||||
|
||||
type StepType = "approval" | "consensus" | "notification";
|
||||
|
||||
interface StepApprover {
|
||||
approver_type: "user" | "position" | "dept";
|
||||
approver_user_id?: string;
|
||||
approver_position?: string;
|
||||
approver_dept_code?: string;
|
||||
approver_label?: string;
|
||||
}
|
||||
|
||||
interface StepFormData {
|
||||
step_order: number;
|
||||
step_type: StepType;
|
||||
approvers: StepApprover[];
|
||||
}
|
||||
|
||||
interface TemplateFormData {
|
||||
template_name: string;
|
||||
description: string;
|
||||
definition_id: number | null;
|
||||
steps: StepFormData[];
|
||||
}
|
||||
|
||||
const STEP_TYPE_OPTIONS: { value: StepType; label: string }[] = [
|
||||
{ value: "approval", label: "결재" },
|
||||
{ value: "consensus", label: "합의" },
|
||||
{ value: "notification", label: "통보" },
|
||||
];
|
||||
|
||||
const STEP_TYPE_BADGE: Record<StepType, { label: string; variant: "default" | "secondary" | "outline" }> = {
|
||||
approval: { label: "결재", variant: "default" },
|
||||
consensus: { label: "합의", variant: "secondary" },
|
||||
notification: { label: "통보", variant: "outline" },
|
||||
};
|
||||
|
||||
const INITIAL_FORM: TemplateFormData = {
|
||||
template_name: "",
|
||||
description: "",
|
||||
definition_id: null,
|
||||
steps: [
|
||||
{
|
||||
step_order: 1,
|
||||
step_type: "approval",
|
||||
approvers: [{ approver_type: "user", approver_user_id: "", approver_label: "1차 결재자" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 사용자 검색 컴포넌트
|
||||
// ============================================================
|
||||
|
||||
function UserSearchInput({
|
||||
value,
|
||||
label,
|
||||
onSelect,
|
||||
onLabelChange,
|
||||
}: {
|
||||
value: string;
|
||||
label: string;
|
||||
onSelect: (userId: string, userName: string) => void;
|
||||
onLabelChange: (label: string) => void;
|
||||
}) {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [results, setResults] = useState<any[]>([]);
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setShowResults(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const handleSearch = useCallback(
|
||||
async (text: string) => {
|
||||
setSearchText(text);
|
||||
if (text.length < 1) {
|
||||
setResults([]);
|
||||
setShowResults(false);
|
||||
return;
|
||||
}
|
||||
setSearching(true);
|
||||
try {
|
||||
const res = await getUserList({ search: text, limit: 10 });
|
||||
const users = res?.success !== false ? (res?.data || res || []) : [];
|
||||
setResults(Array.isArray(users) ? users : []);
|
||||
setShowResults(true);
|
||||
} catch {
|
||||
setResults([]);
|
||||
} finally {
|
||||
setSearching(false);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const selectUser = (user: any) => {
|
||||
const userId = user.user_id || user.userId || "";
|
||||
const userName = user.user_name || user.userName || userId;
|
||||
onSelect(userId, userName);
|
||||
setSearchText("");
|
||||
setShowResults(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="text-[10px]">결재자 ID</Label>
|
||||
<div ref={containerRef} className="relative">
|
||||
<Input
|
||||
value={value || searchText}
|
||||
onChange={(e) => {
|
||||
if (value) {
|
||||
onSelect("", "");
|
||||
}
|
||||
handleSearch(e.target.value);
|
||||
}}
|
||||
placeholder="ID 또는 이름 검색"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
{showResults && results.length > 0 && (
|
||||
<div className="absolute z-50 mt-1 max-h-40 w-full overflow-y-auto rounded-md border bg-popover shadow-md">
|
||||
{results.map((user, i) => (
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
|
||||
onClick={() => selectUser(user)}
|
||||
>
|
||||
<span className="font-medium">{user.user_name || user.userName}</span>
|
||||
<span className="text-muted-foreground">({user.user_id || user.userId})</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{showResults && results.length === 0 && !searching && searchText.length > 0 && (
|
||||
<div className="absolute z-50 mt-1 w-full rounded-md border bg-popover p-2 text-center text-xs text-muted-foreground shadow-md">
|
||||
검색 결과 없음
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-[10px]">표시 라벨</Label>
|
||||
<Input
|
||||
value={label}
|
||||
onChange={(e) => onLabelChange(e.target.value)}
|
||||
placeholder="예: 팀장"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 단계 편집 행 컴포넌트
|
||||
// ============================================================
|
||||
|
||||
function StepEditor({
|
||||
step,
|
||||
stepIndex,
|
||||
onUpdate,
|
||||
onRemove,
|
||||
}: {
|
||||
step: StepFormData;
|
||||
stepIndex: number;
|
||||
onUpdate: (stepIndex: number, updated: StepFormData) => void;
|
||||
onRemove: (stepIndex: number) => void;
|
||||
}) {
|
||||
const updateStepType = (newType: StepType) => {
|
||||
const updated = { ...step, step_type: newType };
|
||||
if (newType === "notification" && updated.approvers.length > 1) {
|
||||
updated.approvers = [updated.approvers[0]];
|
||||
}
|
||||
onUpdate(stepIndex, updated);
|
||||
};
|
||||
|
||||
const addApprover = () => {
|
||||
onUpdate(stepIndex, {
|
||||
...step,
|
||||
approvers: [
|
||||
...step.approvers,
|
||||
{ approver_type: "user", approver_user_id: "", approver_label: "" },
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
const removeApprover = (approverIdx: number) => {
|
||||
if (step.approvers.length <= 1) return;
|
||||
onUpdate(stepIndex, {
|
||||
...step,
|
||||
approvers: step.approvers.filter((_, i) => i !== approverIdx),
|
||||
});
|
||||
};
|
||||
|
||||
const updateApprover = (approverIdx: number, field: string, value: string) => {
|
||||
onUpdate(stepIndex, {
|
||||
...step,
|
||||
approvers: step.approvers.map((a, i) =>
|
||||
i === approverIdx ? { ...a, [field]: value } : a,
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
const handleUserSelect = (approverIdx: number, userId: string, userName: string) => {
|
||||
onUpdate(stepIndex, {
|
||||
...step,
|
||||
approvers: step.approvers.map((a, i) =>
|
||||
i === approverIdx
|
||||
? { ...a, approver_user_id: userId, approver_label: a.approver_label || userName }
|
||||
: a,
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
const badgeInfo = STEP_TYPE_BADGE[step.step_type];
|
||||
|
||||
return (
|
||||
<div className="rounded-md border bg-muted/30 p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-xs font-semibold">{step.step_order}단계</span>
|
||||
<Badge variant={badgeInfo.variant} className="text-[10px]">
|
||||
{badgeInfo.label}
|
||||
</Badge>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-destructive"
|
||||
onClick={() => onRemove(stepIndex)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-[10px]">결재 유형</Label>
|
||||
<Select value={step.step_type} onValueChange={(v) => updateStepType(v as StepType)}>
|
||||
<SelectTrigger className="h-7 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{STEP_TYPE_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value} className="text-xs">
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{step.step_type === "notification" && (
|
||||
<p className="text-[10px] text-muted-foreground italic">
|
||||
(자동 처리됩니다 - 통보 대상자에게 알림만 발송)
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{step.approvers.map((approver, aIdx) => (
|
||||
<div key={aIdx} className="rounded border bg-background p-2 space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-medium text-muted-foreground">
|
||||
{step.step_type === "consensus"
|
||||
? `합의자 ${aIdx + 1}`
|
||||
: step.step_type === "notification"
|
||||
? "통보 대상"
|
||||
: "결재자"}
|
||||
</span>
|
||||
{step.approvers.length > 1 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 text-destructive"
|
||||
onClick={() => removeApprover(aIdx)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-[10px]">결재자 유형</Label>
|
||||
<Select
|
||||
value={approver.approver_type}
|
||||
onValueChange={(v) => updateApprover(aIdx, "approver_type", v)}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="user" className="text-xs">사용자 지정</SelectItem>
|
||||
<SelectItem value="position" className="text-xs">직급 지정</SelectItem>
|
||||
<SelectItem value="dept" className="text-xs">부서 지정</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{approver.approver_type === "user" && (
|
||||
<UserSearchInput
|
||||
value={approver.approver_user_id || ""}
|
||||
label={approver.approver_label || ""}
|
||||
onSelect={(userId, userName) => handleUserSelect(aIdx, userId, userName)}
|
||||
onLabelChange={(label) => updateApprover(aIdx, "approver_label", label)}
|
||||
/>
|
||||
)}
|
||||
{approver.approver_type === "position" && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="text-[10px]">직급</Label>
|
||||
<Input
|
||||
value={approver.approver_position || ""}
|
||||
onChange={(e) => updateApprover(aIdx, "approver_position", e.target.value)}
|
||||
placeholder="예: 부장, 이사"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-[10px]">표시 라벨</Label>
|
||||
<Input
|
||||
value={approver.approver_label || ""}
|
||||
onChange={(e) => updateApprover(aIdx, "approver_label", e.target.value)}
|
||||
placeholder="예: 팀장"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{approver.approver_type === "dept" && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="text-[10px]">부서 코드</Label>
|
||||
<Input
|
||||
value={approver.approver_dept_code || ""}
|
||||
onChange={(e) => updateApprover(aIdx, "approver_dept_code", e.target.value)}
|
||||
placeholder="예: DEPT001"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-[10px]">표시 라벨</Label>
|
||||
<Input
|
||||
value={approver.approver_label || ""}
|
||||
onChange={(e) => updateApprover(aIdx, "approver_label", e.target.value)}
|
||||
placeholder="예: 경영지원팀"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{step.step_type === "consensus" && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={addApprover}
|
||||
className="h-6 w-full gap-1 text-[10px]"
|
||||
>
|
||||
<UserPlus className="h-3 w-3" />
|
||||
합의자 추가
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 메인 페이지
|
||||
// ============================================================
|
||||
|
||||
export default function ApprovalTemplatePage() {
|
||||
const [templates, setTemplates] = useState<ApprovalLineTemplate[]>([]);
|
||||
const [definitions, setDefinitions] = useState<ApprovalDefinition[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [editingTpl, setEditingTpl] = useState<ApprovalLineTemplate | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [formData, setFormData] = useState<TemplateFormData>({ ...INITIAL_FORM });
|
||||
|
||||
const [deleteTarget, setDeleteTarget] = useState<ApprovalLineTemplate | null>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
const [tplRes, defRes] = await Promise.all([
|
||||
getApprovalTemplates(),
|
||||
getApprovalDefinitions({ is_active: "Y" }),
|
||||
]);
|
||||
if (tplRes.success && tplRes.data) setTemplates(tplRes.data);
|
||||
if (defRes.success && defRes.data) setDefinitions(defRes.data);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const stepsToFormData = (steps: ApprovalLineTemplateStep[]): StepFormData[] => {
|
||||
const stepMap = new Map<number, StepFormData>();
|
||||
|
||||
const sorted = [...steps].sort((a, b) => a.step_order - b.step_order);
|
||||
for (const s of sorted) {
|
||||
const existing = stepMap.get(s.step_order);
|
||||
const approver: StepApprover = {
|
||||
approver_type: s.approver_type,
|
||||
approver_user_id: s.approver_user_id,
|
||||
approver_position: s.approver_position,
|
||||
approver_dept_code: s.approver_dept_code,
|
||||
approver_label: s.approver_label,
|
||||
};
|
||||
|
||||
if (existing) {
|
||||
existing.approvers.push(approver);
|
||||
if (s.step_type) existing.step_type = s.step_type;
|
||||
} else {
|
||||
stepMap.set(s.step_order, {
|
||||
step_order: s.step_order,
|
||||
step_type: s.step_type || "approval",
|
||||
approvers: [approver],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(stepMap.values()).sort((a, b) => a.step_order - b.step_order);
|
||||
};
|
||||
|
||||
const formDataToSteps = (
|
||||
steps: StepFormData[],
|
||||
): Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[] => {
|
||||
const result: Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[] = [];
|
||||
for (const step of steps) {
|
||||
for (const approver of step.approvers) {
|
||||
result.push({
|
||||
step_order: step.step_order,
|
||||
step_type: step.step_type,
|
||||
approver_type: approver.approver_type,
|
||||
approver_user_id: approver.approver_user_id || undefined,
|
||||
approver_position: approver.approver_position || undefined,
|
||||
approver_dept_code: approver.approver_dept_code || undefined,
|
||||
approver_label: approver.approver_label || undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const openCreate = () => {
|
||||
setEditingTpl(null);
|
||||
setFormData({
|
||||
template_name: "",
|
||||
description: "",
|
||||
definition_id: null,
|
||||
steps: [
|
||||
{
|
||||
step_order: 1,
|
||||
step_type: "approval",
|
||||
approvers: [{ approver_type: "user", approver_user_id: "", approver_label: "1차 결재자" }],
|
||||
},
|
||||
],
|
||||
});
|
||||
setEditOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = async (tpl: ApprovalLineTemplate) => {
|
||||
const res = await getApprovalTemplate(tpl.template_id);
|
||||
if (!res.success || !res.data) {
|
||||
toast.error("템플릿 정보를 불러올 수 없습니다.");
|
||||
return;
|
||||
}
|
||||
const detail = res.data;
|
||||
setEditingTpl(detail);
|
||||
setFormData({
|
||||
template_name: detail.template_name,
|
||||
description: detail.description || "",
|
||||
definition_id: detail.definition_id || null,
|
||||
steps:
|
||||
detail.steps && detail.steps.length > 0
|
||||
? stepsToFormData(detail.steps)
|
||||
: [
|
||||
{
|
||||
step_order: 1,
|
||||
step_type: "approval",
|
||||
approvers: [{ approver_type: "user", approver_user_id: "", approver_label: "1차 결재자" }],
|
||||
},
|
||||
],
|
||||
});
|
||||
setEditOpen(true);
|
||||
};
|
||||
|
||||
const addStep = () => {
|
||||
setFormData((p) => ({
|
||||
...p,
|
||||
steps: [
|
||||
...p.steps,
|
||||
{
|
||||
step_order: p.steps.length + 1,
|
||||
step_type: "approval",
|
||||
approvers: [
|
||||
{
|
||||
approver_type: "user",
|
||||
approver_user_id: "",
|
||||
approver_label: `${p.steps.length + 1}차 결재자`,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}));
|
||||
};
|
||||
|
||||
const removeStep = (idx: number) => {
|
||||
setFormData((p) => ({
|
||||
...p,
|
||||
steps: p.steps
|
||||
.filter((_, i) => i !== idx)
|
||||
.map((s, i) => ({ ...s, step_order: i + 1 })),
|
||||
}));
|
||||
};
|
||||
|
||||
const updateStep = (idx: number, updated: StepFormData) => {
|
||||
setFormData((p) => ({
|
||||
...p,
|
||||
steps: p.steps.map((s, i) => (i === idx ? updated : s)),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formData.template_name.trim()) {
|
||||
toast.warning("템플릿명을 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
if (formData.steps.length === 0) {
|
||||
toast.warning("결재 단계를 최소 1개 추가해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
const hasEmptyApprover = formData.steps.some((step) =>
|
||||
step.approvers.some((a) => {
|
||||
if (a.approver_type === "user" && !a.approver_user_id) return true;
|
||||
if (a.approver_type === "position" && !a.approver_position) return true;
|
||||
if (a.approver_type === "dept" && !a.approver_dept_code) return true;
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
|
||||
if (hasEmptyApprover) {
|
||||
toast.warning("모든 결재자 정보를 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
const payload = {
|
||||
template_name: formData.template_name,
|
||||
description: formData.description || undefined,
|
||||
definition_id: formData.definition_id || undefined,
|
||||
steps: formDataToSteps(formData.steps),
|
||||
};
|
||||
|
||||
let res;
|
||||
if (editingTpl) {
|
||||
res = await updateApprovalTemplate(editingTpl.template_id, payload);
|
||||
} else {
|
||||
res = await createApprovalTemplate(payload);
|
||||
}
|
||||
|
||||
setSaving(false);
|
||||
if (res.success) {
|
||||
toast.success(editingTpl ? "수정되었습니다." : "등록되었습니다.");
|
||||
setEditOpen(false);
|
||||
fetchData();
|
||||
} else {
|
||||
toast.error(res.error || "저장 실패");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
const res = await deleteApprovalTemplate(deleteTarget.template_id);
|
||||
if (res.success) {
|
||||
toast.success("삭제되었습니다.");
|
||||
setDeleteTarget(null);
|
||||
fetchData();
|
||||
} else {
|
||||
toast.error(res.error || "삭제 실패");
|
||||
}
|
||||
};
|
||||
|
||||
const filtered = templates.filter(
|
||||
(t) =>
|
||||
t.template_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(t.description || "").toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
|
||||
const renderStepSummary = (tpl: ApprovalLineTemplate) => {
|
||||
if (!tpl.steps || tpl.steps.length === 0) return <span className="text-muted-foreground">-</span>;
|
||||
|
||||
const stepMap = new Map<number, { type: StepType; count: number }>();
|
||||
for (const s of tpl.steps) {
|
||||
const existing = stepMap.get(s.step_order);
|
||||
if (existing) {
|
||||
existing.count++;
|
||||
} else {
|
||||
stepMap.set(s.step_order, { type: s.step_type || "approval", count: 1 });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{Array.from(stepMap.entries())
|
||||
.sort(([a], [b]) => a - b)
|
||||
.map(([order, info]) => {
|
||||
const badge = STEP_TYPE_BADGE[info.type];
|
||||
return (
|
||||
<Badge key={order} variant={badge.variant} className="text-[10px]">
|
||||
{order}단계 {badge.label}
|
||||
{info.count > 1 && ` (${info.count}명)`}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return "-";
|
||||
const d = new Date(dateStr);
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
const columns: RDVColumn<ApprovalLineTemplate>[] = [
|
||||
{
|
||||
key: "template_name",
|
||||
label: "템플릿명",
|
||||
render: (_val, tpl) => (
|
||||
<span className="font-medium">{tpl.template_name}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "설명",
|
||||
hideOnMobile: true,
|
||||
render: (_val, tpl) => (
|
||||
<span className="text-muted-foreground">{tpl.description || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "steps",
|
||||
label: "단계 구성",
|
||||
render: (_val, tpl) => renderStepSummary(tpl),
|
||||
},
|
||||
{
|
||||
key: "definition_name",
|
||||
label: "연결된 유형",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (_val, tpl) => (
|
||||
<span>{tpl.definition_name || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "created_at",
|
||||
label: "생성일",
|
||||
width: "100px",
|
||||
hideOnMobile: true,
|
||||
className: "text-center",
|
||||
render: (_val, tpl) => (
|
||||
<span className="text-center">{formatDate(tpl.created_at)}</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const cardFields: RDVCardField<ApprovalLineTemplate>[] = [
|
||||
{
|
||||
label: "단계 구성",
|
||||
render: (tpl) => renderStepSummary(tpl),
|
||||
},
|
||||
{
|
||||
label: "생성일",
|
||||
render: (tpl) => formatDate(tpl.created_at),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-background flex min-h-screen flex-col">
|
||||
<div className="space-y-6 p-6">
|
||||
{/* 페이지 헤더 */}
|
||||
<div className="space-y-2 border-b pb-4">
|
||||
<h1 className="text-3xl font-bold tracking-tight">결재 템플릿 관리</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
결재선 템플릿의 단계 구성 및 결재자를 관리합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 검색 + 신규 등록 버튼 */}
|
||||
<div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
placeholder="템플릿명 또는 설명 검색..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
총 <span className="text-foreground font-semibold">{filtered.length}</span> 건
|
||||
</span>
|
||||
</div>
|
||||
<Button onClick={openCreate} className="h-10 gap-2 text-sm font-medium">
|
||||
<Plus className="h-4 w-4" />
|
||||
신규 등록
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ResponsiveDataView<ApprovalLineTemplate>
|
||||
data={filtered}
|
||||
columns={columns}
|
||||
keyExtractor={(tpl) => String(tpl.template_id)}
|
||||
isLoading={loading}
|
||||
emptyMessage="등록된 결재 템플릿이 없습니다."
|
||||
skeletonCount={5}
|
||||
cardTitle={(tpl) => tpl.template_name}
|
||||
cardSubtitle={(tpl) => tpl.description ? (
|
||||
<span className="text-muted-foreground text-sm">{tpl.description}</span>
|
||||
) : undefined}
|
||||
cardHeaderRight={(tpl) => tpl.definition_name ? (
|
||||
<Badge variant="outline" className="text-xs">{tpl.definition_name}</Badge>
|
||||
) : undefined}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="관리"
|
||||
actionsWidth="100px"
|
||||
renderActions={(tpl) => (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => openEdit(tpl)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive"
|
||||
onClick={() => setDeleteTarget(tpl)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 등록/수정 Dialog */}
|
||||
<Dialog open={editOpen} onOpenChange={setEditOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{editingTpl ? "결재 템플릿 수정" : "결재 템플릿 등록"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
결재선의 기본 정보와 단계별 결재자를 설정합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="max-h-[60vh] space-y-3 overflow-y-auto sm:space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="template_name" className="text-xs sm:text-sm">
|
||||
템플릿 이름 *
|
||||
</Label>
|
||||
<Input
|
||||
id="template_name"
|
||||
value={formData.template_name}
|
||||
onChange={(e) => setFormData((p) => ({ ...p, template_name: e.target.value }))}
|
||||
placeholder="예: 일반 3단계 결재선"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="description" className="text-xs sm:text-sm">
|
||||
설명
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value }))}
|
||||
placeholder="템플릿에 대한 설명을 입력하세요"
|
||||
rows={2}
|
||||
className="text-xs sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">결재 유형 연결</Label>
|
||||
<Select
|
||||
value={formData.definition_id ? String(formData.definition_id) : "none"}
|
||||
onValueChange={(v) =>
|
||||
setFormData((p) => ({ ...p, definition_id: v === "none" ? null : Number(v) }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue placeholder="결재 유형 선택 (선택사항)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">연결 없음</SelectItem>
|
||||
{definitions.map((d) => (
|
||||
<SelectItem key={d.definition_id} value={String(d.definition_id)}>
|
||||
{d.definition_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
||||
특정 결재 유형에 이 템플릿을 연결할 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs font-semibold sm:text-sm">결재 단계</Label>
|
||||
<Button variant="outline" size="sm" onClick={addStep} className="h-7 gap-1 text-xs">
|
||||
<Plus className="h-3 w-3" />
|
||||
단계 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{formData.steps.length === 0 && (
|
||||
<p className="text-muted-foreground py-4 text-center text-xs">
|
||||
결재 단계를 추가해주세요.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{formData.steps.map((step, idx) => (
|
||||
<StepEditor
|
||||
key={`step-${idx}-${step.step_order}`}
|
||||
step={step}
|
||||
stepIndex={idx}
|
||||
onUpdate={updateStep}
|
||||
onRemove={removeStep}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setEditOpen(false)}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
{saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{editingTpl ? "수정" : "등록"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 삭제 확인 Dialog */}
|
||||
<AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>결재 템플릿 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
"{deleteTarget?.template_name}"을(를) 삭제하시겠습니까?
|
||||
<br />
|
||||
이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDelete}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -69,33 +69,33 @@ const RESOURCE_TYPE_CONFIG: Record<
|
|||
string,
|
||||
{ label: string; icon: React.ElementType; color: string }
|
||||
> = {
|
||||
MENU: { label: "메뉴", icon: Layout, color: "bg-blue-100 text-blue-700" },
|
||||
MENU: { label: "메뉴", icon: Layout, color: "bg-primary/10 text-primary" },
|
||||
SCREEN: { label: "화면", icon: Monitor, color: "bg-purple-100 text-purple-700" },
|
||||
SCREEN_LAYOUT: { label: "레이아웃", icon: Monitor, color: "bg-purple-100 text-purple-700" },
|
||||
FLOW: { label: "플로우", icon: GitBranch, color: "bg-green-100 text-green-700" },
|
||||
FLOW_STEP: { label: "플로우 스텝", icon: GitBranch, color: "bg-green-100 text-green-700" },
|
||||
USER: { label: "사용자", icon: User, color: "bg-orange-100 text-orange-700" },
|
||||
ROLE: { label: "권한", icon: Shield, color: "bg-red-100 text-red-700" },
|
||||
PERMISSION: { label: "권한", icon: Shield, color: "bg-red-100 text-red-700" },
|
||||
FLOW: { label: "플로우", icon: GitBranch, color: "bg-emerald-100 text-emerald-700" },
|
||||
FLOW_STEP: { label: "플로우 스텝", icon: GitBranch, color: "bg-emerald-100 text-emerald-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-gray-100 text-gray-700" },
|
||||
TABLE: { label: "테이블", icon: Database, color: "bg-gray-100 text-gray-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 }> = {
|
||||
CREATE: { label: "생성", color: "bg-emerald-100 text-emerald-700" },
|
||||
UPDATE: { label: "수정", color: "bg-blue-100 text-blue-700" },
|
||||
DELETE: { label: "삭제", color: "bg-red-100 text-red-700" },
|
||||
UPDATE: { label: "수정", color: "bg-primary/10 text-primary" },
|
||||
DELETE: { label: "삭제", color: "bg-destructive/10 text-destructive" },
|
||||
COPY: { label: "복사", color: "bg-violet-100 text-violet-700" },
|
||||
LOGIN: { label: "로그인", color: "bg-gray-100 text-gray-700" },
|
||||
LOGIN: { label: "로그인", color: "bg-muted text-foreground" },
|
||||
STATUS_CHANGE: { label: "상태변경", color: "bg-amber-100 text-amber-700" },
|
||||
BATCH_CREATE: { label: "배치생성", color: "bg-emerald-100 text-emerald-700" },
|
||||
BATCH_UPDATE: { label: "배치수정", color: "bg-blue-100 text-blue-700" },
|
||||
BATCH_DELETE: { label: "배치삭제", color: "bg-red-100 text-red-700" },
|
||||
BATCH_UPDATE: { label: "배치수정", color: "bg-primary/10 text-primary" },
|
||||
BATCH_DELETE: { label: "배치삭제", color: "bg-destructive/10 text-destructive" },
|
||||
};
|
||||
|
||||
function formatDateTime(dateStr: string): string {
|
||||
|
|
@ -203,12 +203,12 @@ function renderChanges(changes: Record<string, unknown>) {
|
|||
<tr className="bg-muted/50">
|
||||
<th className="px-3 py-1.5 text-left font-medium">항목</th>
|
||||
{hasBefore && (
|
||||
<th className="px-3 py-1.5 text-left font-medium text-red-600">
|
||||
<th className="px-3 py-1.5 text-left font-medium text-destructive">
|
||||
변경 전
|
||||
</th>
|
||||
)}
|
||||
{hasAfter && (
|
||||
<th className="px-3 py-1.5 text-left font-medium text-blue-600">
|
||||
<th className="px-3 py-1.5 text-left font-medium text-primary">
|
||||
변경 후
|
||||
</th>
|
||||
)}
|
||||
|
|
@ -234,7 +234,7 @@ function renderChanges(changes: Record<string, unknown>) {
|
|||
{hasBefore && (
|
||||
<td className="px-3 py-1.5">
|
||||
{row.beforeVal !== null ? (
|
||||
<span className="rounded bg-red-50 px-1.5 py-0.5 text-red-700">
|
||||
<span className="rounded bg-destructive/10 px-1.5 py-0.5 text-destructive">
|
||||
{row.beforeVal}
|
||||
</span>
|
||||
) : (
|
||||
|
|
@ -245,7 +245,7 @@ function renderChanges(changes: Record<string, unknown>) {
|
|||
{hasAfter && (
|
||||
<td className="px-3 py-1.5">
|
||||
{row.afterVal !== null ? (
|
||||
<span className="rounded bg-blue-50 px-1.5 py-0.5 text-blue-700">
|
||||
<span className="rounded bg-primary/10 px-1.5 py-0.5 text-primary">
|
||||
{row.afterVal}
|
||||
</span>
|
||||
) : (
|
||||
|
|
@ -460,9 +460,9 @@ export default function AuditLogPage() {
|
|||
<CardContent className="p-4">
|
||||
<form
|
||||
onSubmit={handleSearch}
|
||||
className="flex flex-wrap items-end gap-3"
|
||||
className="flex flex-col gap-3 sm:flex-wrap sm:flex-row sm:items-end"
|
||||
>
|
||||
<div className="min-w-[120px] flex-1">
|
||||
<div className="w-full sm:min-w-[120px] sm:flex-1">
|
||||
<label className="text-xs font-medium">검색어</label>
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
|
||||
|
|
@ -475,7 +475,7 @@ export default function AuditLogPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-[130px]">
|
||||
<div className="w-full sm:w-[130px]">
|
||||
<label className="text-xs font-medium">유형</label>
|
||||
<Select
|
||||
value={filters.resourceType || "all"}
|
||||
|
|
@ -497,7 +497,7 @@ export default function AuditLogPage() {
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="w-[120px]">
|
||||
<div className="w-full sm:w-[120px]">
|
||||
<label className="text-xs font-medium">동작</label>
|
||||
<Select
|
||||
value={filters.action || "all"}
|
||||
|
|
@ -520,7 +520,7 @@ export default function AuditLogPage() {
|
|||
</div>
|
||||
|
||||
{isSuperAdmin && (
|
||||
<div className="w-[160px]">
|
||||
<div className="w-full sm:w-[160px]">
|
||||
<label className="text-xs font-medium">회사</label>
|
||||
<Popover open={companyComboOpen} onOpenChange={setCompanyComboOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
|
|
@ -604,7 +604,7 @@ export default function AuditLogPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-[160px]">
|
||||
<div className="w-full sm:w-[160px]">
|
||||
<label className="text-xs font-medium">사용자</label>
|
||||
<Popover open={userComboOpen} onOpenChange={setUserComboOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
|
|
@ -685,7 +685,7 @@ export default function AuditLogPage() {
|
|||
</Popover>
|
||||
</div>
|
||||
|
||||
<div className="w-[130px]">
|
||||
<div className="w-full sm:w-[130px]">
|
||||
<label className="text-xs font-medium">시작일</label>
|
||||
<Input
|
||||
type="date"
|
||||
|
|
@ -695,7 +695,7 @@ export default function AuditLogPage() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-[130px]">
|
||||
<div className="w-full sm:w-[130px]">
|
||||
<label className="text-xs font-medium">종료일</label>
|
||||
<Input
|
||||
type="date"
|
||||
|
|
@ -705,7 +705,7 @@ export default function AuditLogPage() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" size="sm" className="h-9">
|
||||
<Button type="submit" size="sm" className="h-9 w-full sm:w-auto">
|
||||
<Filter className="mr-1 h-4 w-4" />
|
||||
필터 적용
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -311,10 +311,10 @@ export default function BatchCreatePage() {
|
|||
{/* 매핑 설정 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* FROM 섹션 */}
|
||||
<Card className="border-green-200">
|
||||
<CardHeader className="bg-green-50">
|
||||
<CardTitle className="text-green-700">FROM (원본 데이터베이스)</CardTitle>
|
||||
<p className="text-sm text-green-600">
|
||||
<Card className="border-emerald-200">
|
||||
<CardHeader className="bg-emerald-50">
|
||||
<CardTitle className="text-emerald-700">FROM (원본 데이터베이스)</CardTitle>
|
||||
<p className="text-sm text-emerald-600">
|
||||
1단계: 커넥션을 선택하세요 → 2단계: 테이블을 선택하세요 → 3단계: 컬럼을 클릭해서 매핑하세요
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
|
@ -365,7 +365,7 @@ export default function BatchCreatePage() {
|
|||
{/* FROM 컬럼 목록 */}
|
||||
{fromTable && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-blue-600 font-semibold">{fromTable} 테이블</Label>
|
||||
<Label className="text-primary font-semibold">{fromTable} 테이블</Label>
|
||||
<div className="border rounded-lg p-4 max-h-80 overflow-y-auto space-y-2">
|
||||
{fromColumns.map((column) => (
|
||||
<div
|
||||
|
|
@ -373,16 +373,16 @@ export default function BatchCreatePage() {
|
|||
onClick={() => handleFromColumnClick(column)}
|
||||
className={`p-3 border rounded cursor-pointer transition-colors ${
|
||||
selectedFromColumn?.column_name === column.column_name
|
||||
? 'bg-green-100 border-green-300'
|
||||
: 'hover:bg-gray-50 border-gray-200'
|
||||
? 'bg-emerald-100 border-green-300'
|
||||
: 'hover:bg-muted border-border'
|
||||
}`}
|
||||
>
|
||||
<div className="font-medium">{column.column_name}</div>
|
||||
<div className="text-sm text-gray-500">{column.data_type}</div>
|
||||
<div className="text-sm text-muted-foreground">{column.data_type}</div>
|
||||
</div>
|
||||
))}
|
||||
{fromColumns.length === 0 && fromTable && (
|
||||
<div className="text-center text-gray-500 py-4">
|
||||
<div className="text-center text-muted-foreground py-4">
|
||||
컬럼을 불러오는 중...
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -393,10 +393,10 @@ export default function BatchCreatePage() {
|
|||
</Card>
|
||||
|
||||
{/* TO 섹션 */}
|
||||
<Card className="border-red-200">
|
||||
<CardHeader className="bg-red-50">
|
||||
<CardTitle className="text-red-700">TO (대상 데이터베이스)</CardTitle>
|
||||
<p className="text-sm text-red-600">
|
||||
<Card className="border-destructive/20">
|
||||
<CardHeader className="bg-destructive/10">
|
||||
<CardTitle className="text-destructive">TO (대상 데이터베이스)</CardTitle>
|
||||
<p className="text-sm text-destructive">
|
||||
FROM에서 컬럼을 선택한 후, 여기서 대상 컬럼을 클릭하면 매핑됩니다
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
|
@ -447,7 +447,7 @@ export default function BatchCreatePage() {
|
|||
{/* TO 컬럼 목록 */}
|
||||
{toTable && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-blue-600 font-semibold">{toTable} 테이블</Label>
|
||||
<Label className="text-primary font-semibold">{toTable} 테이블</Label>
|
||||
<div className="border rounded-lg p-4 max-h-80 overflow-y-auto space-y-2">
|
||||
{toColumns.map((column) => (
|
||||
<div
|
||||
|
|
@ -455,16 +455,16 @@ export default function BatchCreatePage() {
|
|||
onClick={() => handleToColumnClick(column)}
|
||||
className={`p-3 border rounded cursor-pointer transition-colors ${
|
||||
selectedFromColumn
|
||||
? 'hover:bg-red-50 border-gray-200'
|
||||
: 'bg-gray-100 border-gray-300 cursor-not-allowed'
|
||||
? 'hover:bg-destructive/10 border-border'
|
||||
: 'bg-muted border-input cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
<div className="font-medium">{column.column_name}</div>
|
||||
<div className="text-sm text-gray-500">{column.data_type}</div>
|
||||
<div className="text-sm text-muted-foreground">{column.data_type}</div>
|
||||
</div>
|
||||
))}
|
||||
{toColumns.length === 0 && toTable && (
|
||||
<div className="text-center text-gray-500 py-4">
|
||||
<div className="text-center text-muted-foreground py-4">
|
||||
컬럼을 불러오는 중...
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -484,22 +484,22 @@ export default function BatchCreatePage() {
|
|||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{mappings.map((mapping, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-4 border rounded-lg bg-yellow-50">
|
||||
<div key={index} className="flex items-center justify-between p-4 border rounded-lg bg-amber-50">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-sm">
|
||||
<div className="font-medium">
|
||||
{mapping.from_table_name}.{mapping.from_column_name}
|
||||
</div>
|
||||
<div className="text-gray-500">
|
||||
<div className="text-muted-foreground">
|
||||
{mapping.from_column_type}
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRight className="h-4 w-4 text-gray-400" />
|
||||
<ArrowRight className="h-4 w-4 text-muted-foreground/70" />
|
||||
<div className="text-sm">
|
||||
<div className="font-medium">
|
||||
{mapping.to_table_name}.{mapping.to_column_name}
|
||||
</div>
|
||||
<div className="text-gray-500">
|
||||
<div className="text-muted-foreground">
|
||||
{mapping.to_column_type}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -508,7 +508,7 @@ export default function BatchCreatePage() {
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeMapping(index)}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -815,7 +815,7 @@ export default function BatchEditPage() {
|
|||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{authTokenMode === "direct"
|
||||
? "API 호출 시 Authorization 헤더에 사용할 토큰을 입력하세요."
|
||||
: "auth_tokens 테이블에서 선택한 서비스의 최신 토큰을 사용합니다."}
|
||||
|
|
@ -874,7 +874,7 @@ export default function BatchEditPage() {
|
|||
onChange={(e) => setDataArrayPath(e.target.value)}
|
||||
placeholder="response (예: data.items, results)"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
API 응답에서 배열 데이터가 있는 경로를 입력하세요. 비워두면 응답 전체를 사용합니다.
|
||||
<br />
|
||||
예시: response, data.items, result.list
|
||||
|
|
@ -902,7 +902,7 @@ export default function BatchEditPage() {
|
|||
className="min-h-[100px]"
|
||||
rows={5}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -910,7 +910,7 @@ export default function BatchEditPage() {
|
|||
<div className="space-y-4">
|
||||
<div className="border-t pt-4">
|
||||
<Label className="text-base font-medium">API 파라미터 설정</Label>
|
||||
<p className="mt-1 text-sm text-gray-600">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -967,26 +967,26 @@ export default function BatchEditPage() {
|
|||
}
|
||||
/>
|
||||
{apiParamSource === "dynamic" && (
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
동적값은 배치 실행 시 설정된 값으로 치환됩니다. 예: {"{{user_id}}"} → 실제 사용자 ID
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{apiParamType === "url" && (
|
||||
<div className="rounded-lg bg-blue-50 p-3">
|
||||
<div className="text-sm font-medium text-blue-800">URL 파라미터 예시</div>
|
||||
<div className="mt-1 text-sm text-blue-700">
|
||||
<div className="rounded-lg bg-primary/10 p-3">
|
||||
<div className="text-sm font-medium text-primary">URL 파라미터 예시</div>
|
||||
<div className="mt-1 text-sm text-primary">
|
||||
엔드포인트: /api/users/{`{${apiParamName || "userId"}}`}
|
||||
</div>
|
||||
<div className="text-sm text-blue-700">실제 호출: /api/users/{apiParamValue || "123"}</div>
|
||||
<div className="text-sm text-primary">실제 호출: /api/users/{apiParamValue || "123"}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{apiParamType === "query" && (
|
||||
<div className="rounded-lg bg-green-50 p-3">
|
||||
<div className="text-sm font-medium text-green-800">쿼리 파라미터 예시</div>
|
||||
<div className="mt-1 text-sm text-green-700">
|
||||
<div className="rounded-lg bg-emerald-50 p-3">
|
||||
<div className="text-sm font-medium text-emerald-800">쿼리 파라미터 예시</div>
|
||||
<div className="mt-1 text-sm text-emerald-700">
|
||||
실제 호출: {mappings[0]?.from_table_name || "/api/users"}?{apiParamName || "userId"}=
|
||||
{apiParamValue || "123"}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,8 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Plus, Search, Edit, Trash2, TestTube, Filter } from "lucide-react";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Plus, Search, Edit, Trash2, TestTube } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { showErrorToast } from "@/lib/utils/toastUtils";
|
||||
import {
|
||||
|
|
@ -29,9 +27,16 @@ import {
|
|||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
||||
|
||||
// API 응답에 실제로 포함되는 필드를 위한 확장 타입
|
||||
type ExternalCallConfigWithDate = ExternalCallConfig & {
|
||||
created_date?: string;
|
||||
};
|
||||
|
||||
export default function ExternalCallConfigsPage() {
|
||||
const [configs, setConfigs] = useState<ExternalCallConfig[]>([]);
|
||||
const [configs, setConfigs] = useState<ExternalCallConfigWithDate[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [filter, setFilter] = useState<ExternalCallConfigFilter>({
|
||||
|
|
@ -50,15 +55,17 @@ export default function ExternalCallConfigsPage() {
|
|||
const fetchConfigs = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await ExternalCallConfigAPI.getConfigs({
|
||||
...filter,
|
||||
search: searchQuery.trim() || undefined,
|
||||
});
|
||||
const filterWithSearch: Record<string, string | undefined> = { ...filter };
|
||||
const trimmed = searchQuery.trim();
|
||||
if (trimmed) {
|
||||
filterWithSearch.search = trimmed;
|
||||
}
|
||||
const response = await ExternalCallConfigAPI.getConfigs(filterWithSearch as ExternalCallConfigFilter);
|
||||
|
||||
if (response.success) {
|
||||
setConfigs(response.data || []);
|
||||
setConfigs((response.data || []) as ExternalCallConfigWithDate[]);
|
||||
} else {
|
||||
showErrorToast("외부 호출 설정 조회에 실패했습니다", response.message, {
|
||||
showErrorToast("외부 호출 설정 조회에 실패했습니다", response.error, {
|
||||
guidance: "네트워크 연결을 확인하고 다시 시도해 주세요.",
|
||||
});
|
||||
}
|
||||
|
|
@ -72,9 +79,10 @@ export default function ExternalCallConfigsPage() {
|
|||
}
|
||||
};
|
||||
|
||||
// 초기 로드 및 필터/검색 변경 시 재조회
|
||||
// 초기 로드 및 필터 변경 시 재조회
|
||||
useEffect(() => {
|
||||
fetchConfigs();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [filter]);
|
||||
|
||||
// 검색 실행
|
||||
|
|
@ -118,7 +126,7 @@ export default function ExternalCallConfigsPage() {
|
|||
toast.success("외부 호출 설정이 삭제되었습니다.");
|
||||
fetchConfigs();
|
||||
} else {
|
||||
showErrorToast("외부 호출 설정 삭제에 실패했습니다", response.message, {
|
||||
showErrorToast("외부 호출 설정 삭제에 실패했습니다", response.error, {
|
||||
guidance: "잠시 후 다시 시도해 주세요.",
|
||||
});
|
||||
}
|
||||
|
|
@ -140,10 +148,10 @@ export default function ExternalCallConfigsPage() {
|
|||
try {
|
||||
const response = await ExternalCallConfigAPI.testConfig(config.id);
|
||||
|
||||
if (response.success && response.data?.success) {
|
||||
toast.success(`테스트 성공: ${response.data.message}`);
|
||||
if (response.success) {
|
||||
toast.success(`테스트 성공: ${response.message || "정상"}`);
|
||||
} else {
|
||||
toast.error(`테스트 실패: ${response.data?.message || response.message}`);
|
||||
toast.error(`테스트 실패: ${response.message || response.error || "알 수 없는 오류"}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("외부 호출 설정 테스트 오류:", error);
|
||||
|
|
@ -171,244 +179,283 @@ export default function ExternalCallConfigsPage() {
|
|||
return API_TYPE_OPTIONS.find((option) => option.value === apiType)?.label || apiType;
|
||||
};
|
||||
|
||||
// ResponsiveDataView 컬럼 정의
|
||||
const columns: RDVColumn<ExternalCallConfigWithDate>[] = [
|
||||
{
|
||||
key: "config_name",
|
||||
label: "설정명",
|
||||
render: (_v, row) => <span className="font-medium">{row.config_name}</span>,
|
||||
},
|
||||
{
|
||||
key: "call_type",
|
||||
label: "호출 타입",
|
||||
width: "120px",
|
||||
render: (_v, row) => <Badge variant="outline">{getCallTypeLabel(row.call_type)}</Badge>,
|
||||
},
|
||||
{
|
||||
key: "api_type",
|
||||
label: "API 타입",
|
||||
width: "120px",
|
||||
render: (_v, row) =>
|
||||
row.api_type ? (
|
||||
<Badge variant="secondary">{getApiTypeLabel(row.api_type)}</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "설명",
|
||||
render: (_v, row) =>
|
||||
row.description ? (
|
||||
<span className="block max-w-xs truncate text-muted-foreground" title={row.description}>
|
||||
{row.description}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
label: "상태",
|
||||
width: "80px",
|
||||
render: (_v, row) => (
|
||||
<Badge variant={row.is_active === "Y" ? "default" : "destructive"}>
|
||||
{row.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "created_date",
|
||||
label: "생성일",
|
||||
width: "120px",
|
||||
render: (_v, row) =>
|
||||
row.created_date ? new Date(row.created_date).toLocaleDateString() : "-",
|
||||
},
|
||||
];
|
||||
|
||||
// 모바일 카드 필드 정의
|
||||
const cardFields: RDVCardField<ExternalCallConfigWithDate>[] = [
|
||||
{
|
||||
label: "호출 타입",
|
||||
render: (c) => <Badge variant="outline">{getCallTypeLabel(c.call_type)}</Badge>,
|
||||
},
|
||||
{
|
||||
label: "API 타입",
|
||||
render: (c) =>
|
||||
c.api_type ? (
|
||||
<Badge variant="secondary">{getApiTypeLabel(c.api_type)}</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "설명",
|
||||
render: (c) => (
|
||||
<span className="max-w-[200px] truncate">{c.description || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "생성일",
|
||||
render: (c) =>
|
||||
c.created_date ? new Date(c.created_date).toLocaleDateString() : "-",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-background">
|
||||
<div className="space-y-6 p-6">
|
||||
<div className="space-y-6 p-4 sm:p-6">
|
||||
{/* 페이지 헤더 */}
|
||||
<div className="space-y-2 border-b pb-4">
|
||||
<h1 className="text-3xl font-bold tracking-tight">외부 호출 관리</h1>
|
||||
<p className="text-sm text-muted-foreground">Discord, Slack, 카카오톡 등 외부 호출 설정을 관리합니다.</p>
|
||||
</div>
|
||||
|
||||
{/* 검색 및 필터 영역 */}
|
||||
<div className="space-y-4">
|
||||
{/* 첫 번째 줄: 검색 + 추가 버튼 */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="w-full sm:w-[320px]">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="설정 이름 또는 설명으로 검색..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyPress={handleSearchKeyPress}
|
||||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={handleSearch} variant="outline" className="h-10 gap-2 text-sm font-medium">
|
||||
<Search className="h-4 w-4" />
|
||||
검색
|
||||
</Button>
|
||||
{/* 검색 및 필터 영역 (반응형) */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="설정 이름 또는 설명으로 검색..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyPress={handleSearchKeyPress}
|
||||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<Button onClick={handleAddConfig} className="h-10 gap-2 text-sm font-medium">
|
||||
<Plus className="h-4 w-4" />
|
||||
새 외부 호출 추가
|
||||
<Button onClick={handleSearch} variant="outline" className="h-10 gap-2 text-sm font-medium">
|
||||
<Search className="h-4 w-4" />
|
||||
검색
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 두 번째 줄: 필터 */}
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<Select
|
||||
value={filter.call_type || "all"}
|
||||
onValueChange={(value) =>
|
||||
setFilter((prev) => ({
|
||||
...prev,
|
||||
call_type: value === "all" ? undefined : value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="호출 타입" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체</SelectItem>
|
||||
{CALL_TYPE_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filter.api_type || "all"}
|
||||
onValueChange={(value) =>
|
||||
setFilter((prev) => ({
|
||||
...prev,
|
||||
api_type: value === "all" ? undefined : value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="API 타입" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체</SelectItem>
|
||||
{API_TYPE_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filter.is_active || "Y"}
|
||||
onValueChange={(value) =>
|
||||
setFilter((prev) => ({
|
||||
...prev,
|
||||
is_active: value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="상태" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{ACTIVE_STATUS_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button onClick={handleAddConfig} className="h-10 gap-2 text-sm font-medium">
|
||||
<Plus className="h-4 w-4" />
|
||||
새 외부 호출 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 설정 목록 */}
|
||||
<div className="rounded-lg border bg-card shadow-sm">
|
||||
{loading ? (
|
||||
// 로딩 상태
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<div className="text-sm text-muted-foreground">로딩 중...</div>
|
||||
</div>
|
||||
) : configs.length === 0 ? (
|
||||
// 빈 상태
|
||||
<div className="flex h-64 flex-col items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<p className="text-sm text-muted-foreground">등록된 외부 호출 설정이 없습니다.</p>
|
||||
<p className="text-xs text-muted-foreground">새 외부 호출을 추가해보세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// 설정 테이블 목록
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
|
||||
<TableHead className="h-12 text-sm font-semibold">설정명</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">호출 타입</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">API 타입</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">설명</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">상태</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
|
||||
<TableHead className="h-12 text-center text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{configs.map((config) => (
|
||||
<TableRow key={config.id} className="border-b transition-colors hover:bg-muted/50">
|
||||
<TableCell className="h-16 text-sm font-medium">{config.config_name}</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<Badge variant="outline">{getCallTypeLabel(config.call_type)}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
{config.api_type ? (
|
||||
<Badge variant="secondary">{getApiTypeLabel(config.api_type)}</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<div className="max-w-xs">
|
||||
{config.description ? (
|
||||
<span className="block truncate text-muted-foreground" title={config.description}>
|
||||
{config.description}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<Badge variant={config.is_active === "Y" ? "default" : "destructive"}>
|
||||
{config.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm text-muted-foreground">
|
||||
{config.created_date ? new Date(config.created_date).toLocaleDateString() : "-"}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-sm">
|
||||
<div className="flex justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleTestConfig(config)}
|
||||
title="테스트"
|
||||
>
|
||||
<TestTube className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleEditConfig(config)}
|
||||
title="편집"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => handleDeleteConfig(config)}
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{/* 필터 영역 */}
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<Select
|
||||
value={filter.call_type || "all"}
|
||||
onValueChange={(value) =>
|
||||
setFilter((prev) => ({
|
||||
...prev,
|
||||
call_type: value === "all" ? undefined : value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="호출 타입" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체</SelectItem>
|
||||
{CALL_TYPE_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filter.api_type || "all"}
|
||||
onValueChange={(value) =>
|
||||
setFilter((prev) => ({
|
||||
...prev,
|
||||
api_type: value === "all" ? undefined : value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="API 타입" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체</SelectItem>
|
||||
{API_TYPE_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filter.is_active || "Y"}
|
||||
onValueChange={(value) =>
|
||||
setFilter((prev) => ({
|
||||
...prev,
|
||||
is_active: value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="상태" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{ACTIVE_STATUS_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 설정 목록 (ResponsiveDataView) */}
|
||||
<ResponsiveDataView<ExternalCallConfigWithDate>
|
||||
data={configs}
|
||||
columns={columns}
|
||||
keyExtractor={(c) => String(c.id || c.config_name)}
|
||||
isLoading={loading}
|
||||
emptyMessage="등록된 외부 호출 설정이 없습니다."
|
||||
skeletonCount={5}
|
||||
cardTitle={(c) => c.config_name}
|
||||
cardSubtitle={(c) => c.description || "설명 없음"}
|
||||
cardHeaderRight={(c) => (
|
||||
<Badge variant={c.is_active === "Y" ? "default" : "destructive"}>
|
||||
{c.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
cardFields={cardFields}
|
||||
renderActions={(c) => (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleTestConfig(c);
|
||||
}}
|
||||
>
|
||||
<TestTube className="h-4 w-4" />
|
||||
테스트
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEditConfig(c);
|
||||
}}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
편집
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 gap-2 text-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteConfig(c);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
actionsWidth="200px"
|
||||
/>
|
||||
|
||||
{/* 외부 호출 설정 모달 */}
|
||||
<ExternalCallConfigModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
onSave={handleModalSave}
|
||||
editingConfig={editingConfig}
|
||||
/>
|
||||
{/* 외부 호출 설정 모달 */}
|
||||
<ExternalCallConfigModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
onSave={handleModalSave}
|
||||
editingConfig={editingConfig}
|
||||
/>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-base sm:text-lg">외부 호출 설정 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-xs sm:text-sm">
|
||||
"{configToDelete?.config_name}" 설정을 삭제하시겠습니까?
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter className="gap-2 sm:gap-0">
|
||||
<AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
||||
취소
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmDeleteConfig}
|
||||
className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-base sm:text-lg">외부 호출 설정 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-xs sm:text-sm">
|
||||
"{configToDelete?.config_name}" 설정을 삭제하시겠습니까?
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter className="gap-2 sm:gap-0">
|
||||
<AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
||||
취소
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmDeleteConfig}
|
||||
className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
|
||||
{/* Scroll to Top 버튼 */}
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,8 @@ import React, { useState, useEffect } from "react";
|
|||
import { Plus, Search, Pencil, Trash2, Database, Terminal, Globe } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
AlertDialog,
|
||||
|
|
@ -24,11 +22,12 @@ import {
|
|||
ExternalDbConnectionAPI,
|
||||
ExternalDbConnection,
|
||||
ExternalDbConnectionFilter,
|
||||
ConnectionTestRequest,
|
||||
} from "@/lib/api/externalDbConnection";
|
||||
import { ExternalDbConnectionModal } from "@/components/admin/ExternalDbConnectionModal";
|
||||
import { SqlQueryModal } from "@/components/admin/SqlQueryModal";
|
||||
import { RestApiConnectionList } from "@/components/admin/RestApiConnectionList";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
||||
|
||||
type ConnectionTabType = "database" | "rest-api";
|
||||
|
||||
|
|
@ -102,7 +101,6 @@ export default function ExternalConnectionsPage() {
|
|||
setSupportedDbTypes([{ value: "ALL", label: "전체" }, ...types]);
|
||||
} catch (error) {
|
||||
console.error("지원 DB 타입 로딩 오류:", error);
|
||||
// 실패 시 기본값 사용
|
||||
setSupportedDbTypes([
|
||||
{ value: "ALL", label: "전체" },
|
||||
{ value: "mysql", label: "MySQL" },
|
||||
|
|
@ -114,45 +112,36 @@ export default function ExternalConnectionsPage() {
|
|||
}
|
||||
};
|
||||
|
||||
// 초기 데이터 로딩
|
||||
useEffect(() => {
|
||||
loadConnections();
|
||||
loadSupportedDbTypes();
|
||||
}, []);
|
||||
|
||||
// 필터 변경 시 데이터 재로딩
|
||||
useEffect(() => {
|
||||
loadConnections();
|
||||
}, [searchTerm, dbTypeFilter, activeStatusFilter]);
|
||||
|
||||
// 새 연결 추가
|
||||
const handleAddConnection = () => {
|
||||
setEditingConnection(undefined);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
// 연결 편집
|
||||
const handleEditConnection = (connection: ExternalDbConnection) => {
|
||||
setEditingConnection(connection);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
// 연결 삭제 확인 다이얼로그 열기
|
||||
const handleDeleteConnection = (connection: ExternalDbConnection) => {
|
||||
setConnectionToDelete(connection);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
// 연결 삭제 실행
|
||||
const confirmDeleteConnection = async () => {
|
||||
if (!connectionToDelete?.id) return;
|
||||
|
||||
try {
|
||||
await ExternalDbConnectionAPI.deleteConnection(connectionToDelete.id);
|
||||
toast({
|
||||
title: "성공",
|
||||
description: "연결이 삭제되었습니다.",
|
||||
});
|
||||
toast({ title: "성공", description: "연결이 삭제되었습니다." });
|
||||
loadConnections();
|
||||
} catch (error) {
|
||||
console.error("연결 삭제 오류:", error);
|
||||
|
|
@ -167,13 +156,11 @@ export default function ExternalConnectionsPage() {
|
|||
}
|
||||
};
|
||||
|
||||
// 연결 삭제 취소
|
||||
const cancelDeleteConnection = () => {
|
||||
setDeleteDialogOpen(false);
|
||||
setConnectionToDelete(null);
|
||||
};
|
||||
|
||||
// 연결 테스트
|
||||
const handleTestConnection = async (connection: ExternalDbConnection) => {
|
||||
if (!connection.id) return;
|
||||
|
||||
|
|
@ -181,14 +168,10 @@ export default function ExternalConnectionsPage() {
|
|||
|
||||
try {
|
||||
const result = await ExternalDbConnectionAPI.testConnection(connection.id);
|
||||
|
||||
setTestResults((prev) => new Map(prev).set(connection.id!, result.success));
|
||||
|
||||
if (result.success) {
|
||||
toast({
|
||||
title: "연결 성공",
|
||||
description: `${connection.connection_name} 연결이 성공했습니다.`,
|
||||
});
|
||||
toast({ title: "연결 성공", description: `${connection.connection_name} 연결이 성공했습니다.` });
|
||||
} else {
|
||||
toast({
|
||||
title: "연결 실패",
|
||||
|
|
@ -199,11 +182,7 @@ export default function ExternalConnectionsPage() {
|
|||
} catch (error) {
|
||||
console.error("연결 테스트 오류:", error);
|
||||
setTestResults((prev) => new Map(prev).set(connection.id!, false));
|
||||
toast({
|
||||
title: "연결 테스트 오류",
|
||||
description: "연결 테스트 중 오류가 발생했습니다.",
|
||||
variant: "destructive",
|
||||
});
|
||||
toast({ title: "연결 테스트 오류", description: "연결 테스트 중 오류가 발생했습니다.", variant: "destructive" });
|
||||
} finally {
|
||||
setTestingConnections((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
|
|
@ -213,19 +192,77 @@ export default function ExternalConnectionsPage() {
|
|||
}
|
||||
};
|
||||
|
||||
// 모달 저장 처리
|
||||
const handleModalSave = () => {
|
||||
setIsModalOpen(false);
|
||||
setEditingConnection(undefined);
|
||||
loadConnections();
|
||||
};
|
||||
|
||||
// 모달 취소 처리
|
||||
const handleModalCancel = () => {
|
||||
setIsModalOpen(false);
|
||||
setEditingConnection(undefined);
|
||||
};
|
||||
|
||||
// 테이블 컬럼 정의
|
||||
const columns: RDVColumn<ExternalDbConnection>[] = [
|
||||
{ key: "connection_name", label: "연결명",
|
||||
render: (v) => <span className="font-medium">{v}</span> },
|
||||
{ key: "company_code", label: "회사", width: "100px",
|
||||
render: (_v, row) => (row as any).company_name || row.company_code },
|
||||
{ key: "db_type", label: "DB 타입", width: "120px",
|
||||
render: (v) => <Badge variant="outline">{DB_TYPE_LABELS[v] || v}</Badge> },
|
||||
{ key: "host", label: "호스트:포트", width: "180px", hideOnMobile: true,
|
||||
render: (_v, row) => <span className="font-mono">{row.host}:{row.port}</span> },
|
||||
{ key: "database_name", label: "데이터베이스", width: "140px", hideOnMobile: true,
|
||||
render: (v) => <span className="font-mono">{v}</span> },
|
||||
{ key: "username", label: "사용자", width: "100px", hideOnMobile: true,
|
||||
render: (v) => <span className="font-mono">{v}</span> },
|
||||
{ key: "is_active", label: "상태", width: "80px",
|
||||
render: (v) => (
|
||||
<Badge variant={v === "Y" ? "default" : "secondary"}>
|
||||
{v === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
) },
|
||||
{ key: "created_date", label: "생성일", width: "100px", hideOnMobile: true,
|
||||
render: (v) => (
|
||||
<span className="text-muted-foreground">
|
||||
{v ? new Date(v).toLocaleDateString() : "N/A"}
|
||||
</span>
|
||||
) },
|
||||
{ key: "id", label: "연결 테스트", width: "150px", hideOnMobile: true,
|
||||
render: (_v, row) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={(e) => { e.stopPropagation(); handleTestConnection(row); }}
|
||||
disabled={testingConnections.has(row.id!)}
|
||||
className="h-9 text-sm">
|
||||
{testingConnections.has(row.id!) ? "테스트 중..." : "테스트"}
|
||||
</Button>
|
||||
{testResults.has(row.id!) && (
|
||||
<Badge variant={testResults.get(row.id!) ? "default" : "destructive"}>
|
||||
{testResults.get(row.id!) ? "성공" : "실패"}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
) },
|
||||
];
|
||||
|
||||
// 모바일 카드 필드 정의
|
||||
const cardFields: RDVCardField<ExternalDbConnection>[] = [
|
||||
{ label: "DB 타입",
|
||||
render: (c) => <Badge variant="outline">{DB_TYPE_LABELS[c.db_type] || c.db_type}</Badge> },
|
||||
{ label: "호스트",
|
||||
render: (c) => <span className="font-mono text-xs">{c.host}:{c.port}</span> },
|
||||
{ label: "데이터베이스",
|
||||
render: (c) => <span className="font-mono text-xs">{c.database_name}</span> },
|
||||
{ label: "상태",
|
||||
render: (c) => (
|
||||
<Badge variant={c.is_active === "Y" ? "default" : "secondary"}>
|
||||
{c.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
) },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-background">
|
||||
<div className="space-y-6 p-6">
|
||||
|
|
@ -237,7 +274,7 @@ export default function ExternalConnectionsPage() {
|
|||
|
||||
{/* 탭 */}
|
||||
<Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as ConnectionTabType)}>
|
||||
<TabsList className="grid w-[400px] grid-cols-2">
|
||||
<TabsList className="grid w-full max-w-[400px] grid-cols-2">
|
||||
<TabsTrigger value="database" className="flex items-center gap-2">
|
||||
<Database className="h-4 w-4" />
|
||||
데이터베이스 연결
|
||||
|
|
@ -252,8 +289,7 @@ export default function ExternalConnectionsPage() {
|
|||
<TabsContent value="database" className="space-y-6">
|
||||
{/* 검색 및 필터 */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
{/* 검색 */}
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
|
|
@ -263,8 +299,6 @@ export default function ExternalConnectionsPage() {
|
|||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* DB 타입 필터 */}
|
||||
<Select value={dbTypeFilter} onValueChange={setDbTypeFilter}>
|
||||
<SelectTrigger className="h-10 w-full sm:w-[160px]">
|
||||
<SelectValue placeholder="DB 타입" />
|
||||
|
|
@ -277,8 +311,6 @@ export default function ExternalConnectionsPage() {
|
|||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 활성 상태 필터 */}
|
||||
<Select value={activeStatusFilter} onValueChange={setActiveStatusFilter}>
|
||||
<SelectTrigger className="h-10 w-full sm:w-[120px]">
|
||||
<SelectValue placeholder="상태" />
|
||||
|
|
@ -292,126 +324,63 @@ export default function ExternalConnectionsPage() {
|
|||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 추가 버튼 */}
|
||||
<Button onClick={handleAddConnection} className="h-10 gap-2 text-sm font-medium">
|
||||
<Plus className="h-4 w-4" />
|
||||
새 연결 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 연결 목록 */}
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center bg-card">
|
||||
<div className="text-sm text-muted-foreground">로딩 중...</div>
|
||||
</div>
|
||||
) : connections.length === 0 ? (
|
||||
<div className="flex h-64 flex-col items-center justify-center bg-card">
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<p className="text-sm text-muted-foreground">등록된 연결이 없습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-card">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-background">
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결명</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">회사</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">DB 타입</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">호스트:포트</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">데이터베이스</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">사용자</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결 테스트</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{connections.map((connection) => (
|
||||
<TableRow key={connection.id} className="bg-background transition-colors hover:bg-muted/50">
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<div className="font-medium">{connection.connection_name}</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
{(connection as any).company_name || connection.company_code}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<Badge variant="outline">
|
||||
{DB_TYPE_LABELS[connection.db_type] || connection.db_type}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm">
|
||||
{connection.host}:{connection.port}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.database_name}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.username}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<Badge variant={connection.is_active === "Y" ? "default" : "secondary"}>
|
||||
{connection.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
{connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleTestConnection(connection)}
|
||||
disabled={testingConnections.has(connection.id!)}
|
||||
className="h-9 text-sm"
|
||||
>
|
||||
{testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
|
||||
</Button>
|
||||
{testResults.has(connection.id!) && (
|
||||
<Badge variant={testResults.get(connection.id!) ? "default" : "destructive"}>
|
||||
{testResults.get(connection.id!) ? "성공" : "실패"}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
console.log("SQL 쿼리 실행 버튼 클릭 - connection:", connection);
|
||||
setSelectedConnection(connection);
|
||||
setSqlModalOpen(true);
|
||||
}}
|
||||
className="h-8 w-8"
|
||||
title="SQL 쿼리 실행"
|
||||
>
|
||||
<Terminal className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleEditConnection(connection)}
|
||||
className="h-8 w-8"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteConnection(connection)}
|
||||
className="h-8 w-8 text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
{/* 연결 목록 - ResponsiveDataView */}
|
||||
<ResponsiveDataView
|
||||
data={connections}
|
||||
columns={columns}
|
||||
keyExtractor={(c) => String(c.id || c.connection_name)}
|
||||
isLoading={loading}
|
||||
emptyMessage="등록된 연결이 없습니다"
|
||||
skeletonCount={5}
|
||||
cardTitle={(c) => c.connection_name}
|
||||
cardSubtitle={(c) => <span className="font-mono text-xs">{c.host}:{c.port}/{c.database_name}</span>}
|
||||
cardHeaderRight={(c) => (
|
||||
<Badge variant={c.is_active === "Y" ? "default" : "secondary"}>
|
||||
{c.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
)}
|
||||
cardFields={cardFields}
|
||||
renderActions={(c) => (
|
||||
<>
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={(e) => { e.stopPropagation(); handleTestConnection(c); }}
|
||||
disabled={testingConnections.has(c.id!)}
|
||||
className="h-9 flex-1 gap-2 text-sm">
|
||||
{testingConnections.has(c.id!) ? "테스트 중..." : "테스트"}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedConnection(c);
|
||||
setSqlModalOpen(true);
|
||||
}}
|
||||
className="h-9 flex-1 gap-2 text-sm">
|
||||
<Terminal className="h-4 w-4" />
|
||||
SQL
|
||||
</Button>
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={(e) => { e.stopPropagation(); handleEditConnection(c); }}
|
||||
className="h-9 flex-1 gap-2 text-sm">
|
||||
<Pencil className="h-4 w-4" />
|
||||
편집
|
||||
</Button>
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={(e) => { e.stopPropagation(); handleDeleteConnection(c); }}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 flex-1 gap-2 text-sm">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
삭제
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="180px"
|
||||
/>
|
||||
|
||||
{/* 연결 설정 모달 */}
|
||||
{isModalOpen && (
|
||||
|
|
@ -430,7 +399,7 @@ export default function ExternalConnectionsPage() {
|
|||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-base sm:text-lg">연결 삭제 확인</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-xs sm:text-sm">
|
||||
"{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
|
||||
“{connectionToDelete?.connection_name}” 연결을 삭제하시겠습니까?
|
||||
<br />
|
||||
이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
|
|
@ -472,6 +441,7 @@ export default function ExternalConnectionsPage() {
|
|||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -294,7 +294,7 @@ export default function FlowEditorPage() {
|
|||
onNodeDragStop={handleNodeDragStop}
|
||||
nodeTypes={nodeTypes}
|
||||
fitView
|
||||
className="bg-gray-50"
|
||||
className="bg-muted"
|
||||
>
|
||||
<Background />
|
||||
<Controls />
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Plus, Edit2, Trash2, Workflow, Table, Calendar, User, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { Plus, Edit2, Trash2, Workflow, Search, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
|
|
@ -33,8 +33,9 @@ import { cn } from "@/lib/utils";
|
|||
import { formatErrorMessage } from "@/lib/utils/errorUtils";
|
||||
import { tableManagementApi } from "@/lib/api/tableManagement";
|
||||
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
||||
import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
|
||||
import { ExternalDbConnectionAPI, ExternalDbConnection } from "@/lib/api/externalDbConnection";
|
||||
import { ExternalRestApiConnectionAPI, ExternalRestApiConnection } from "@/lib/api/externalRestApiConnection";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
export default function FlowManagementPage() {
|
||||
const router = useRouter();
|
||||
|
|
@ -55,9 +56,7 @@ export default function FlowManagementPage() {
|
|||
const [openTableCombobox, setOpenTableCombobox] = useState(false);
|
||||
// 데이터 소스 타입: "internal" (내부 DB), "external_db_숫자" (외부 DB), "restapi_숫자" (REST API)
|
||||
const [selectedDbSource, setSelectedDbSource] = useState<string>("internal");
|
||||
const [externalConnections, setExternalConnections] = useState<
|
||||
Array<{ id: number; connection_name: string; db_type: string }>
|
||||
>([]);
|
||||
const [externalConnections, setExternalConnections] = useState<ExternalDbConnection[]>([]);
|
||||
const [externalTableList, setExternalTableList] = useState<string[]>([]);
|
||||
const [loadingExternalTables, setLoadingExternalTables] = useState(false);
|
||||
|
||||
|
|
@ -254,7 +253,7 @@ export default function FlowManagementPage() {
|
|||
.map((t: string | { tableName?: string; table_name?: string; tablename?: string; name?: string }) =>
|
||||
typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name,
|
||||
)
|
||||
.filter(Boolean);
|
||||
.filter((v): v is string => Boolean(v));
|
||||
setMultiDbTableLists(prev => ({ ...prev, [connectionId]: tableNames }));
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
@ -446,7 +445,7 @@ export default function FlowManagementPage() {
|
|||
}
|
||||
|
||||
console.log("✅ Calling createFlowDefinition with:", requestData);
|
||||
const response = await createFlowDefinition(requestData as Parameters<typeof createFlowDefinition>[0]);
|
||||
const response = await createFlowDefinition(requestData as unknown as Parameters<typeof createFlowDefinition>[0]);
|
||||
if (response.success && response.data) {
|
||||
toast({
|
||||
title: "생성 완료",
|
||||
|
|
@ -513,6 +512,81 @@ export default function FlowManagementPage() {
|
|||
router.push(`/admin/flow-management/${flowId}`);
|
||||
};
|
||||
|
||||
// 검색 필터 상태
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
// 검색 필터링된 플로우 목록
|
||||
const filteredFlows = searchText
|
||||
? flows.filter(
|
||||
(f) =>
|
||||
f.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
f.tableName?.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
f.description?.toLowerCase().includes(searchText.toLowerCase()),
|
||||
)
|
||||
: flows;
|
||||
|
||||
// ResponsiveDataView 컬럼 정의
|
||||
const columns: RDVColumn<FlowDefinition>[] = [
|
||||
{
|
||||
key: "name",
|
||||
label: "플로우명",
|
||||
render: (_v, row) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleEdit(row.id)}
|
||||
className="hover:text-primary truncate text-left font-medium transition-colors hover:underline"
|
||||
>
|
||||
{row.name}
|
||||
</button>
|
||||
{row.isActive && (
|
||||
<Badge variant="default" className="shrink-0">활성</Badge>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "설명",
|
||||
render: (_v, row) => (
|
||||
<span className="text-muted-foreground line-clamp-1">
|
||||
{row.description || "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "tableName",
|
||||
label: "연결 테이블",
|
||||
render: (_v, row) => (
|
||||
<span className="text-muted-foreground font-mono text-xs">{row.tableName}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "createdBy",
|
||||
label: "생성자",
|
||||
width: "120px",
|
||||
},
|
||||
{
|
||||
key: "updatedAt",
|
||||
label: "수정일",
|
||||
width: "120px",
|
||||
render: (_v, row) => new Date(row.updatedAt).toLocaleDateString("ko-KR"),
|
||||
},
|
||||
];
|
||||
|
||||
// 모바일 카드 필드 정의
|
||||
const cardFields: RDVCardField<FlowDefinition>[] = [
|
||||
{ label: "설명", render: (f) => f.description || "-" },
|
||||
{
|
||||
label: "테이블",
|
||||
render: (f) => <span className="font-mono text-xs">{f.tableName}</span>,
|
||||
},
|
||||
{ label: "생성자", render: (f) => f.createdBy },
|
||||
{
|
||||
label: "수정일",
|
||||
render: (f) => new Date(f.updatedAt).toLocaleDateString("ko-KR"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-background flex min-h-screen flex-col">
|
||||
<div className="space-y-6 p-4 sm:p-6">
|
||||
|
|
@ -522,123 +596,74 @@ export default function FlowManagementPage() {
|
|||
<p className="text-muted-foreground text-sm">업무 프로세스 플로우를 생성하고 관리합니다</p>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 영역 */}
|
||||
<div className="flex items-center justify-end">
|
||||
{/* 검색 툴바 (반응형) */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
placeholder="플로우명, 테이블, 설명으로 검색..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-muted-foreground hidden text-sm sm:block">
|
||||
총 <span className="text-foreground font-semibold">{filteredFlows.length}</span> 건
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)} className="h-10 gap-2 text-sm font-medium">
|
||||
<Plus className="h-4 w-4" />새 플로우 생성
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 플로우 카드 목록 */}
|
||||
{loading ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<div key={index} className="bg-card rounded-lg border p-6 shadow-sm">
|
||||
<div className="mb-4 space-y-2">
|
||||
<div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-4 w-full animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-4 w-3/4 animate-pulse rounded"></div>
|
||||
</div>
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-2">
|
||||
<div className="bg-muted h-4 w-4 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-4 flex-1 animate-pulse rounded"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 flex gap-2 border-t pt-4">
|
||||
<div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-9 w-9 animate-pulse rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : flows.length === 0 ? (
|
||||
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<div className="bg-muted flex h-16 w-16 items-center justify-center rounded-full">
|
||||
<Workflow className="text-muted-foreground h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">생성된 플로우가 없습니다</h3>
|
||||
<p className="text-muted-foreground max-w-sm text-sm">
|
||||
새 플로우를 생성하여 업무 프로세스를 관리해보세요.
|
||||
</p>
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)} className="mt-4 h-10 gap-2 text-sm font-medium">
|
||||
<Plus className="h-4 w-4" />첫 플로우 만들기
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{flows.map((flow) => (
|
||||
<div
|
||||
key={flow.id}
|
||||
className="bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-6 shadow-sm transition-colors"
|
||||
onClick={() => handleEdit(flow.id)}
|
||||
{/* 플로우 목록 (ResponsiveDataView) */}
|
||||
<ResponsiveDataView<FlowDefinition>
|
||||
data={filteredFlows}
|
||||
columns={columns}
|
||||
keyExtractor={(f) => String(f.id)}
|
||||
isLoading={loading}
|
||||
emptyMessage="생성된 플로우가 없습니다."
|
||||
skeletonCount={6}
|
||||
cardTitle={(f) => f.name}
|
||||
cardSubtitle={(f) => f.description || "설명 없음"}
|
||||
cardHeaderRight={(f) =>
|
||||
f.isActive ? (
|
||||
<Badge variant="default" className="shrink-0">활성</Badge>
|
||||
) : null
|
||||
}
|
||||
cardFields={cardFields}
|
||||
onRowClick={(f) => handleEdit(f.id)}
|
||||
renderActions={(f) => (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEdit(f.id);
|
||||
}}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="truncate text-base font-semibold">{flow.name}</h3>
|
||||
{flow.isActive && (
|
||||
<Badge className="shrink-0 bg-emerald-500 text-white hover:bg-emerald-600">활성</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-1 line-clamp-2 text-sm">{flow.description || "설명 없음"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 정보 */}
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Table className="text-muted-foreground h-4 w-4 shrink-0" />
|
||||
<span className="text-muted-foreground truncate">{flow.tableName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<User className="text-muted-foreground h-4 w-4 shrink-0" />
|
||||
<span className="text-muted-foreground truncate">생성자: {flow.createdBy}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Calendar className="text-muted-foreground h-4 w-4 shrink-0" />
|
||||
<span className="text-muted-foreground">
|
||||
{new Date(flow.updatedAt).toLocaleDateString("ko-KR")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 */}
|
||||
<div className="mt-4 flex gap-2 border-t pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEdit(flow.id);
|
||||
}}
|
||||
>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
편집
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 w-9 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedFlow(flow);
|
||||
setIsDeleteDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Edit2 className="h-4 w-4" />
|
||||
편집
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 w-9 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedFlow(f);
|
||||
setIsDeleteDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
actionsWidth="160px"
|
||||
/>
|
||||
|
||||
{/* 생성 다이얼로그 */}
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
|
|
@ -996,7 +1021,7 @@ export default function FlowManagementPage() {
|
|||
<div className="flex flex-col">
|
||||
<span className="font-medium">{table.displayName || table.tableName}</span>
|
||||
{table.description && (
|
||||
<span className="text-[10px] text-gray-500">{table.description}</span>
|
||||
<span className="text-[10px] text-muted-foreground">{table.description}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
|
|
|
|||
|
|
@ -409,7 +409,7 @@ example2@example.com,김철수,XYZ회사`;
|
|||
{recipients.length > 0 && (
|
||||
<div className="rounded-md border bg-muted p-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-600" />
|
||||
<span className="font-medium">{recipients.length}명의 수신자</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
|
|
|
|||
|
|
@ -101,8 +101,8 @@ export default function MailDashboardPage() {
|
|||
value: stats.totalAccounts,
|
||||
icon: Users,
|
||||
color: "blue",
|
||||
bgColor: "bg-blue-100",
|
||||
iconColor: "text-blue-600",
|
||||
bgColor: "bg-primary/10",
|
||||
iconColor: "text-primary",
|
||||
href: "/admin/mail/accounts",
|
||||
},
|
||||
{
|
||||
|
|
@ -110,8 +110,8 @@ export default function MailDashboardPage() {
|
|||
value: stats.totalTemplates,
|
||||
icon: FileText,
|
||||
color: "green",
|
||||
bgColor: "bg-green-100",
|
||||
iconColor: "text-green-600",
|
||||
bgColor: "bg-emerald-100",
|
||||
iconColor: "text-emerald-600",
|
||||
href: "/admin/mail/templates",
|
||||
},
|
||||
{
|
||||
|
|
@ -119,8 +119,8 @@ export default function MailDashboardPage() {
|
|||
value: stats.sentToday,
|
||||
icon: Send,
|
||||
color: "orange",
|
||||
bgColor: "bg-orange-100",
|
||||
iconColor: "text-orange-600",
|
||||
bgColor: "bg-amber-100",
|
||||
iconColor: "text-amber-600",
|
||||
href: "/admin/mail/sent",
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -438,8 +438,8 @@ export default function MailReceivePage() {
|
|||
<div
|
||||
className={`mt-4 p-3 rounded-lg flex items-center gap-2 ${
|
||||
testResult.success
|
||||
? "bg-green-50 text-green-800 border border-green-200"
|
||||
: "bg-red-50 text-red-800 border border-red-200"
|
||||
? "bg-emerald-50 text-emerald-800 border border-emerald-200"
|
||||
: "bg-destructive/10 text-red-800 border border-destructive/20"
|
||||
}`}
|
||||
>
|
||||
{testResult.success ? (
|
||||
|
|
@ -460,7 +460,7 @@ export default function MailReceivePage() {
|
|||
<div className="flex flex-col md:flex-row gap-3">
|
||||
{/* 검색 */}
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/70" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
|
|
@ -511,7 +511,7 @@ export default function MailReceivePage() {
|
|||
{filteredAndSortedMails.length}개의 메일이 검색되었습니다
|
||||
{searchTerm && (
|
||||
<span className="ml-2">
|
||||
(검색어: <span className="font-medium text-orange-600">{searchTerm}</span>)
|
||||
(검색어: <span className="font-medium text-amber-600">{searchTerm}</span>)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -527,14 +527,14 @@ export default function MailReceivePage() {
|
|||
{loading ? (
|
||||
<Card className="">
|
||||
<CardContent className="flex justify-center items-center py-16">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-orange-500" />
|
||||
<Loader2 className="w-8 h-8 animate-spin text-amber-500" />
|
||||
<span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : filteredAndSortedMails.length === 0 ? (
|
||||
<Card className="text-center py-16 bg-card ">
|
||||
<CardContent className="pt-6">
|
||||
<Mail className="w-16 h-16 mx-auto mb-4 text-gray-300" />
|
||||
<Mail className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
|
||||
<p className="text-muted-foreground mb-4">
|
||||
{!selectedAccountId
|
||||
? "메일 계정을 선택하세요"
|
||||
|
|
@ -560,9 +560,9 @@ export default function MailReceivePage() {
|
|||
</Card>
|
||||
) : (
|
||||
<Card className="">
|
||||
<CardHeader className="bg-gradient-to-r from-slate-50 to-gray-50 border-b">
|
||||
<CardHeader className="bg-gradient-to-r from-slate-50 to-muted border-b">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Inbox className="w-5 h-5 text-orange-500" />
|
||||
<Inbox className="w-5 h-5 text-amber-500" />
|
||||
받은 메일함 ({filteredAndSortedMails.length}/{mails.length}개)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
@ -573,14 +573,14 @@ export default function MailReceivePage() {
|
|||
key={mail.id}
|
||||
onClick={() => handleMailClick(mail)}
|
||||
className={`p-4 hover:bg-background transition-colors cursor-pointer ${
|
||||
!mail.isRead ? "bg-blue-50/30" : ""
|
||||
!mail.isRead ? "bg-primary/10/30" : ""
|
||||
} ${selectedMailId === mail.id ? "bg-accent border-l-4 border-l-primary" : ""}`}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
{/* 읽음 표시 */}
|
||||
<div className="flex-shrink-0 w-2 h-2 mt-2">
|
||||
{!mail.isRead && (
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-primary rounded-full"></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -598,7 +598,7 @@ export default function MailReceivePage() {
|
|||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{mail.hasAttachments && (
|
||||
<Paperclip className="w-4 h-4 text-gray-400" />
|
||||
<Paperclip className="w-4 h-4 text-muted-foreground/70" />
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDate(mail.date)}
|
||||
|
|
@ -882,14 +882,14 @@ export default function MailReceivePage() {
|
|||
) : loadingDetail ? (
|
||||
<Card className="sticky top-6">
|
||||
<CardContent className="flex justify-center items-center py-16">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-orange-500" />
|
||||
<Loader2 className="w-8 h-8 animate-spin text-amber-500" />
|
||||
<span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="sticky top-6">
|
||||
<CardContent className="flex flex-col justify-center items-center py-16 text-center">
|
||||
<Mail className="w-16 h-16 mb-4 text-gray-300" />
|
||||
<Mail className="w-16 h-16 mb-4 text-muted-foreground/50" />
|
||||
<p className="text-muted-foreground">
|
||||
메일을 선택하면 내용이 표시됩니다
|
||||
</p>
|
||||
|
|
@ -900,10 +900,10 @@ export default function MailReceivePage() {
|
|||
</div>
|
||||
|
||||
{/* 안내 정보 */}
|
||||
<Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 ">
|
||||
<Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-emerald-200 ">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-green-600" />
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-emerald-600" />
|
||||
메일 수신 기능 완성! 🎉
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
@ -913,81 +913,81 @@ export default function MailReceivePage() {
|
|||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="font-medium text-gray-800 mb-2">📬 기본 기능</p>
|
||||
<p className="font-medium text-foreground mb-2">📬 기본 기능</p>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>IMAP 프로토콜 메일 수신</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>메일 목록 표시</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>읽음/안읽음 상태</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>첨부파일 유무 표시</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-800 mb-2">📄 상세보기</p>
|
||||
<p className="font-medium text-foreground mb-2">📄 상세보기</p>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>HTML 본문 렌더링</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>텍스트 본문 보기</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>자동 읽음 처리</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>첨부파일 다운로드</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-800 mb-2">🔍 고급 기능</p>
|
||||
<p className="font-medium text-foreground mb-2">🔍 고급 기능</p>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>통합 검색 (제목/발신자/내용)</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>필터링 (읽음/첨부파일)</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>정렬 (날짜/발신자)</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>자동 새로고침 (30초)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-800 mb-2">🔒 보안</p>
|
||||
<p className="font-medium text-foreground mb-2">🔒 보안</p>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>XSS 방지 (DOMPurify)</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>비밀번호 암호화</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
<span className="text-emerald-500 mr-2">✓</span>
|
||||
<span>안전한 파일명 생성</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -516,12 +516,12 @@ ${data.originalBody}`;
|
|||
toast({
|
||||
title: (
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-500" />
|
||||
<CheckCircle2 className="w-5 h-5 text-emerald-500" />
|
||||
<span>메일 발송 완료!</span>
|
||||
</div>
|
||||
) as any,
|
||||
description: `${to.length}명${cc.length > 0 ? ` (참조 ${cc.length}명)` : ""}${bcc.length > 0 ? ` (숨은참조 ${bcc.length}명)` : ""}${attachments.length > 0 ? ` (첨부파일 ${attachments.length}개)` : ""}에게 메일이 성공적으로 발송되었습니다.`,
|
||||
className: "border-green-500 bg-green-50",
|
||||
className: "border-emerald-500 bg-emerald-50",
|
||||
});
|
||||
|
||||
// 알림 갱신 이벤트 발생
|
||||
|
|
@ -544,7 +544,7 @@ ${data.originalBody}`;
|
|||
toast({
|
||||
title: (
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle className="w-5 h-5 text-red-500" />
|
||||
<AlertCircle className="w-5 h-5 text-destructive" />
|
||||
<span>메일 발송 실패</span>
|
||||
</div>
|
||||
) as any,
|
||||
|
|
@ -781,7 +781,7 @@ ${data.originalBody}`;
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-500" />
|
||||
<span>
|
||||
{new Date(lastSaved).toLocaleTimeString('ko-KR', {
|
||||
hour: '2-digit',
|
||||
|
|
@ -895,7 +895,7 @@ ${data.originalBody}`;
|
|||
{to.map((email) => (
|
||||
<div
|
||||
key={email}
|
||||
className="flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 rounded-md text-sm"
|
||||
className="flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary rounded-md text-sm"
|
||||
>
|
||||
<span>{email}</span>
|
||||
<button
|
||||
|
|
@ -933,12 +933,12 @@ ${data.originalBody}`;
|
|||
{cc.map((email) => (
|
||||
<div
|
||||
key={email}
|
||||
className="flex items-center gap-1 px-2 py-1 bg-green-100 text-green-700 rounded-md text-sm"
|
||||
className="flex items-center gap-1 px-2 py-1 bg-emerald-100 text-emerald-700 rounded-md text-sm"
|
||||
>
|
||||
<span>{email}</span>
|
||||
<button
|
||||
onClick={() => removeEmail(email, "cc")}
|
||||
className="hover:bg-green-200 rounded p-0.5"
|
||||
className="hover:bg-emerald-200 rounded p-0.5"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
|
|
@ -1222,7 +1222,7 @@ ${data.originalBody}`;
|
|||
<div
|
||||
key={component.id}
|
||||
style={{ height: `${component.height || 20}px` }}
|
||||
className="bg-background rounded flex items-center justify-center text-xs text-gray-400"
|
||||
className="bg-background rounded flex items-center justify-center text-xs text-muted-foreground/70"
|
||||
>
|
||||
여백
|
||||
</div>
|
||||
|
|
@ -1236,7 +1236,7 @@ ${data.originalBody}`;
|
|||
{component.logoSrc && <img src={component.logoSrc} alt="로고" className="h-10" />}
|
||||
<span className="font-bold text-lg">{component.brandName}</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500">{component.sendDate}</span>
|
||||
<span className="text-sm text-muted-foreground">{component.sendDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1245,13 +1245,13 @@ ${data.originalBody}`;
|
|||
return (
|
||||
<div key={component.id} className="border rounded-lg overflow-hidden">
|
||||
{component.tableTitle && (
|
||||
<div className="bg-gray-50 px-4 py-2 font-semibold border-b">{component.tableTitle}</div>
|
||||
<div className="bg-muted px-4 py-2 font-semibold border-b">{component.tableTitle}</div>
|
||||
)}
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
{component.rows?.map((row: any, i: number) => (
|
||||
<tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||
<td className="px-4 py-2 font-medium text-gray-600 w-1/3 border-r">{row.label}</td>
|
||||
<tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-muted'}>
|
||||
<td className="px-4 py-2 font-medium text-muted-foreground w-1/3 border-r">{row.label}</td>
|
||||
<td className="px-4 py-2">{row.value}</td>
|
||||
</tr>
|
||||
))}
|
||||
|
|
@ -1263,9 +1263,9 @@ ${data.originalBody}`;
|
|||
case 'alertBox':
|
||||
return (
|
||||
<div key={component.id} className={`p-4 rounded-lg border-l-4 ${
|
||||
component.alertType === 'info' ? 'bg-blue-50 border-blue-500 text-blue-800' :
|
||||
component.alertType === 'info' ? 'bg-primary/10 border-primary text-primary' :
|
||||
component.alertType === 'warning' ? 'bg-amber-50 border-amber-500 text-amber-800' :
|
||||
component.alertType === 'danger' ? 'bg-red-50 border-red-500 text-red-800' :
|
||||
component.alertType === 'danger' ? 'bg-destructive/10 border-destructive text-red-800' :
|
||||
'bg-emerald-50 border-emerald-500 text-emerald-800'
|
||||
}`}>
|
||||
{component.alertTitle && <div className="font-bold mb-1">{component.alertTitle}</div>}
|
||||
|
|
@ -1275,13 +1275,13 @@ ${data.originalBody}`;
|
|||
|
||||
case 'divider':
|
||||
return (
|
||||
<hr key={component.id} className="border-gray-300" style={{ borderWidth: `${component.height || 1}px` }} />
|
||||
<hr key={component.id} className="border-input" style={{ borderWidth: `${component.height || 1}px` }} />
|
||||
);
|
||||
|
||||
case 'footer':
|
||||
return (
|
||||
<div key={component.id} className="text-center text-sm text-gray-500 py-4 border-t bg-gray-50">
|
||||
{component.companyName && <div className="font-semibold text-gray-700">{component.companyName}</div>}
|
||||
<div key={component.id} className="text-center text-sm text-muted-foreground py-4 border-t bg-muted">
|
||||
{component.companyName && <div className="font-semibold text-foreground">{component.companyName}</div>}
|
||||
{(component.ceoName || component.businessNumber) && (
|
||||
<div className="mt-1">
|
||||
{component.ceoName && <span>대표: {component.ceoName}</span>}
|
||||
|
|
@ -1297,7 +1297,7 @@ ${data.originalBody}`;
|
|||
{component.email && <span>Email: {component.email}</span>}
|
||||
</div>
|
||||
)}
|
||||
{component.copyright && <div className="mt-2 text-xs text-gray-400">{component.copyright}</div>}
|
||||
{component.copyright && <div className="mt-2 text-xs text-muted-foreground/70">{component.copyright}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -1318,9 +1318,9 @@ ${data.originalBody}`;
|
|||
}
|
||||
})}
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-3 border-t border-green-200">
|
||||
<p className="text-sm text-green-800 flex items-center gap-2 font-medium">
|
||||
<CheckCircle2 className="w-4 h-4 text-green-600" />
|
||||
<div className="bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-3 border-t border-emerald-200">
|
||||
<p className="text-sm text-emerald-800 flex items-center gap-2 font-medium">
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-600" />
|
||||
위 내용으로 메일이 발송됩니다
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1396,7 +1396,7 @@ ${data.originalBody}`;
|
|||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
/>
|
||||
<Upload className="w-12 h-12 mx-auto text-gray-400 mb-3" />
|
||||
<Upload className="w-12 h-12 mx-auto text-muted-foreground/70 mb-3" />
|
||||
<p className="text-sm text-muted-foreground mb-1">
|
||||
파일을 드래그하거나 클릭하여 선택하세요
|
||||
</p>
|
||||
|
|
@ -1430,7 +1430,7 @@ ${data.originalBody}`;
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeFile(index)}
|
||||
className="flex-shrink-0 text-red-500 hover:text-red-600 hover:bg-red-50"
|
||||
className="flex-shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
|
|
@ -1530,7 +1530,7 @@ ${data.originalBody}`;
|
|||
<div key={index} className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<File className="w-3 h-3" />
|
||||
<span className="truncate">{file.name}</span>
|
||||
<span className="text-gray-400">({formatFileSize(file.size)})</span>
|
||||
<span className="text-muted-foreground/70">({formatFileSize(file.size)})</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -371,8 +371,8 @@ export default function SentMailPage() {
|
|||
{stats.successCount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-green-500/10 rounded-lg">
|
||||
<CheckCircle2 className="w-6 h-6 text-green-600" />
|
||||
<div className="p-3 bg-emerald-500/10 rounded-lg">
|
||||
<CheckCircle2 className="w-6 h-6 text-emerald-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -387,8 +387,8 @@ export default function SentMailPage() {
|
|||
{stats.failedCount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-red-500/10 rounded-lg">
|
||||
<XCircle className="w-6 h-6 text-red-600" />
|
||||
<div className="p-3 bg-destructive/10 rounded-lg">
|
||||
<XCircle className="w-6 h-6 text-destructive" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -403,8 +403,8 @@ export default function SentMailPage() {
|
|||
{stats.todayCount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-blue-500/10 rounded-lg">
|
||||
<Calendar className="w-6 h-6 text-blue-600" />
|
||||
<div className="p-3 bg-primary/10 rounded-lg">
|
||||
<Calendar className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -592,19 +592,19 @@ export default function BatchManagementNewPage() {
|
|||
<div
|
||||
key={option.value}
|
||||
className={`cursor-pointer rounded-lg border p-3 transition-all ${
|
||||
batchType === option.value ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"
|
||||
batchType === option.value ? "border-primary bg-primary/10" : "border-border hover:border-input"
|
||||
}`}
|
||||
onClick={() => setBatchType(option.value)}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
{option.value === "restapi-to-db" ? (
|
||||
<Globe className="h-4 w-4 text-blue-600" />
|
||||
<Globe className="h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<Database className="h-4 w-4 text-green-600" />
|
||||
<Database className="h-4 w-4 text-emerald-600" />
|
||||
)}
|
||||
<div>
|
||||
<div className="text-sm font-medium">{option.label}</div>
|
||||
<div className="mt-1 text-xs text-gray-500">{option.description}</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">{option.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -739,7 +739,7 @@ export default function BatchManagementNewPage() {
|
|||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{authTokenMode === "direct"
|
||||
? "API 호출 시 Authorization 헤더에 사용할 토큰을 입력하세요."
|
||||
: "auth_tokens 테이블에서 선택한 서비스의 최신 토큰을 사용합니다."}
|
||||
|
|
@ -782,7 +782,7 @@ export default function BatchManagementNewPage() {
|
|||
onChange={(e) => setDataArrayPath(e.target.value)}
|
||||
placeholder="response (예: data.items, results)"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
API 응답에서 배열 데이터가 있는 경로를 입력하세요. 비워두면 응답 전체를 사용합니다.
|
||||
<br />
|
||||
예시: response, data.items, result.list
|
||||
|
|
@ -801,7 +801,7 @@ export default function BatchManagementNewPage() {
|
|||
className="min-h-[100px]"
|
||||
rows={5}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -809,7 +809,7 @@ export default function BatchManagementNewPage() {
|
|||
<div className="space-y-4">
|
||||
<div className="border-t pt-4">
|
||||
<Label className="text-base font-medium">API 파라미터 설정</Label>
|
||||
<p className="mt-1 text-sm text-gray-600">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -868,26 +868,26 @@ export default function BatchManagementNewPage() {
|
|||
}
|
||||
/>
|
||||
{apiParamSource === "dynamic" && (
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
동적값은 배치 실행 시 설정된 값으로 치환됩니다. 예: {"{{user_id}}"} → 실제 사용자 ID
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{apiParamType === "url" && (
|
||||
<div className="rounded-lg bg-blue-50 p-3">
|
||||
<div className="text-sm font-medium text-blue-800">URL 파라미터 예시</div>
|
||||
<div className="mt-1 text-sm text-blue-700">
|
||||
<div className="rounded-lg bg-primary/10 p-3">
|
||||
<div className="text-sm font-medium text-primary">URL 파라미터 예시</div>
|
||||
<div className="mt-1 text-sm text-primary">
|
||||
엔드포인트: /api/users/{`{${apiParamName || "userId"}}`}
|
||||
</div>
|
||||
<div className="text-sm text-blue-700">실제 호출: /api/users/{apiParamValue || "123"}</div>
|
||||
<div className="text-sm text-primary">실제 호출: /api/users/{apiParamValue || "123"}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{apiParamType === "query" && (
|
||||
<div className="rounded-lg bg-green-50 p-3">
|
||||
<div className="text-sm font-medium text-green-800">쿼리 파라미터 예시</div>
|
||||
<div className="mt-1 text-sm text-green-700">
|
||||
<div className="rounded-lg bg-emerald-50 p-3">
|
||||
<div className="text-sm font-medium text-emerald-800">쿼리 파라미터 예시</div>
|
||||
<div className="mt-1 text-sm text-emerald-700">
|
||||
실제 호출: {fromEndpoint || "/api/users"}?{apiParamName || "userId"}=
|
||||
{apiParamValue || "123"}
|
||||
</div>
|
||||
|
|
@ -899,9 +899,9 @@ export default function BatchManagementNewPage() {
|
|||
|
||||
{/* API 호출 미리보기 정보 */}
|
||||
{fromApiUrl && fromEndpoint && (
|
||||
<div className="rounded-lg bg-gray-50 p-3">
|
||||
<div className="text-sm font-medium text-gray-700">API 호출 정보</div>
|
||||
<div className="mt-1 text-sm text-gray-600">
|
||||
<div className="rounded-lg bg-muted p-3">
|
||||
<div className="text-sm font-medium text-foreground">API 호출 정보</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
{fromApiMethod} {fromApiUrl}
|
||||
{apiParamType === "url" && apiParamName && apiParamValue
|
||||
? fromEndpoint.replace(`{${apiParamName}}`, apiParamValue) || fromEndpoint + `/${apiParamValue}`
|
||||
|
|
@ -911,14 +911,14 @@ export default function BatchManagementNewPage() {
|
|||
: ""}
|
||||
</div>
|
||||
{((authTokenMode === "direct" && fromApiKey) || (authTokenMode === "db" && authServiceName)) && (
|
||||
<div className="mt-1 text-xs text-gray-500">
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
{authTokenMode === "direct"
|
||||
? `Authorization: Bearer ${fromApiKey.substring(0, 15)}...`
|
||||
: `Authorization: DB 토큰 (${authServiceName})`}
|
||||
</div>
|
||||
)}
|
||||
{apiParamType !== "none" && apiParamName && apiParamValue && (
|
||||
<div className="mt-1 text-xs text-blue-600">
|
||||
<div className="mt-1 text-xs text-primary">
|
||||
파라미터: {apiParamName} = {apiParamValue} ({apiParamSource === "static" ? "고정값" : "동적값"})
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -988,7 +988,7 @@ export default function BatchManagementNewPage() {
|
|||
setSelectedColumns(selectedColumns.filter((col) => col !== column.column_name));
|
||||
}
|
||||
}}
|
||||
className="rounded border-gray-300"
|
||||
className="rounded border-input"
|
||||
/>
|
||||
<label
|
||||
htmlFor={`col-${column.column_name}`}
|
||||
|
|
@ -1002,14 +1002,14 @@ export default function BatchManagementNewPage() {
|
|||
</div>
|
||||
|
||||
{/* 선택된 컬럼 개수 표시 */}
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
선택된 컬럼: {selectedColumns.length}개 / 전체: {fromColumns.length}개
|
||||
</div>
|
||||
|
||||
{/* 빠른 매핑 버튼들 */}
|
||||
{selectedColumns.length > 0 && toApiFields.length > 0 && (
|
||||
<div className="mt-3 rounded-lg border border-green-200 bg-green-50 p-3">
|
||||
<div className="mb-2 text-sm font-medium text-green-800">빠른 매핑</div>
|
||||
<div className="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3">
|
||||
<div className="mb-2 text-sm font-medium text-emerald-800">빠른 매핑</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -1051,7 +1051,7 @@ export default function BatchManagementNewPage() {
|
|||
setDbToApiFieldMapping(mapping);
|
||||
toast.success(`${Object.keys(mapping).length}개 컬럼이 자동 매핑되었습니다.`);
|
||||
}}
|
||||
className="rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
|
||||
className="rounded bg-primary px-3 py-1 text-xs text-white hover:bg-primary/90"
|
||||
>
|
||||
스마트 자동 매핑
|
||||
</button>
|
||||
|
|
@ -1061,7 +1061,7 @@ export default function BatchManagementNewPage() {
|
|||
setDbToApiFieldMapping({});
|
||||
toast.success("매핑이 초기화되었습니다.");
|
||||
}}
|
||||
className="rounded bg-gray-600 px-3 py-1 text-xs text-white hover:bg-gray-700"
|
||||
className="rounded bg-foreground/80 px-3 py-1 text-xs text-white hover:bg-foreground/90"
|
||||
>
|
||||
매핑 초기화
|
||||
</button>
|
||||
|
|
@ -1071,9 +1071,9 @@ export default function BatchManagementNewPage() {
|
|||
|
||||
{/* 자동 생성된 JSON 미리보기 */}
|
||||
{selectedColumns.length > 0 && (
|
||||
<div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
|
||||
<div className="mb-2 text-sm font-medium text-blue-800">자동 생성된 JSON 구조</div>
|
||||
<pre className="overflow-x-auto font-mono text-xs text-blue-600">
|
||||
<div className="mt-3 rounded-lg border border-primary/20 bg-primary/10 p-3">
|
||||
<div className="mb-2 text-sm font-medium text-primary">자동 생성된 JSON 구조</div>
|
||||
<pre className="overflow-x-auto font-mono text-xs text-primary">
|
||||
{JSON.stringify(
|
||||
selectedColumns.reduce(
|
||||
(obj, col) => {
|
||||
|
|
@ -1105,7 +1105,7 @@ export default function BatchManagementNewPage() {
|
|||
setToApiBody(autoJson);
|
||||
toast.success("Request Body에 자동 생성된 JSON이 적용되었습니다.");
|
||||
}}
|
||||
className="mt-2 rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
|
||||
className="mt-2 rounded bg-primary px-3 py-1 text-xs text-white hover:bg-primary/90"
|
||||
>
|
||||
Request Body에 적용
|
||||
</button>
|
||||
|
|
@ -1231,7 +1231,7 @@ export default function BatchManagementNewPage() {
|
|||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
이 컬럼 값이 같으면 UPDATE, 없으면 INSERT 합니다. (예: device_serial_number)
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1273,7 +1273,7 @@ export default function BatchManagementNewPage() {
|
|||
placeholder="/api/users"
|
||||
/>
|
||||
{(toApiMethod === "PUT" || toApiMethod === "DELETE") && (
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
실제 URL: {toEndpoint}/{urlPathColumn ? `{${urlPathColumn}}` : "{ID}"}
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -1310,7 +1310,7 @@ export default function BatchManagementNewPage() {
|
|||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
PUT/DELETE 요청 시 URL 경로에 포함될 컬럼을 선택하세요. (예: USER_ID → /api/users/user123)
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1321,7 +1321,7 @@ export default function BatchManagementNewPage() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={previewToApiData}
|
||||
className="flex items-center space-x-2 rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700"
|
||||
className="flex items-center space-x-2 rounded-md bg-emerald-600 px-4 py-2 text-white hover:bg-green-700"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
<span>API 필드 미리보기</span>
|
||||
|
|
@ -1330,13 +1330,13 @@ export default function BatchManagementNewPage() {
|
|||
|
||||
{/* TO API 필드 표시 */}
|
||||
{toApiFields.length > 0 && (
|
||||
<div className="rounded-lg border border-green-200 bg-green-50 p-3">
|
||||
<div className="mb-2 text-sm font-medium text-green-800">
|
||||
<div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
|
||||
<div className="mb-2 text-sm font-medium text-emerald-800">
|
||||
API 필드 목록 ({toApiFields.length}개)
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{toApiFields.map((field) => (
|
||||
<span key={field} className="rounded bg-green-100 px-2 py-1 text-xs text-green-700">
|
||||
<span key={field} className="rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-700">
|
||||
{field}
|
||||
</span>
|
||||
))}
|
||||
|
|
@ -1355,7 +1355,7 @@ export default function BatchManagementNewPage() {
|
|||
placeholder='{"id": "{{id}}", "name": "{{name}}", "email": "{{email}}"}'
|
||||
className="h-24 w-full rounded-md border p-2 font-mono text-sm"
|
||||
/>
|
||||
<div className="mt-1 text-xs text-gray-500">
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
DB 컬럼 값을 {"{{컬럼명}}"} 형태로 매핑하세요. 예: {"{{user_id}}, {{user_name}}"}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1363,15 +1363,15 @@ export default function BatchManagementNewPage() {
|
|||
|
||||
{/* API 호출 정보 */}
|
||||
{toApiUrl && toApiKey && toEndpoint && (
|
||||
<div className="rounded-lg bg-gray-50 p-3">
|
||||
<div className="text-sm font-medium text-gray-700">API 호출 정보</div>
|
||||
<div className="mt-1 text-sm text-gray-600">
|
||||
<div className="rounded-lg bg-muted p-3">
|
||||
<div className="text-sm font-medium text-foreground">API 호출 정보</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
{toApiMethod} {toApiUrl}
|
||||
{toEndpoint}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-gray-500">Headers: X-API-Key: {toApiKey.substring(0, 10)}...</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">Headers: X-API-Key: {toApiKey.substring(0, 10)}...</div>
|
||||
{toApiBody && (
|
||||
<div className="mt-1 text-xs text-blue-600">Body: {toApiBody.substring(0, 50)}...</div>
|
||||
<div className="mt-1 text-xs text-primary">Body: {toApiBody.substring(0, 50)}...</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -1394,7 +1394,7 @@ export default function BatchManagementNewPage() {
|
|||
데이터 불러오고 매핑하기
|
||||
</Button>
|
||||
{(!fromApiUrl || !fromEndpoint || !toTable) && (
|
||||
<p className="ml-4 flex items-center text-xs text-gray-500">
|
||||
<p className="ml-4 flex items-center text-xs text-muted-foreground">
|
||||
FROM 섹션과 TO 섹션의 필수 값을 모두 입력해야 합니다.
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -1693,17 +1693,17 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
|
|||
<CardContent>
|
||||
<div className="max-h-96 space-y-3 overflow-y-auto rounded-lg border p-4">
|
||||
{selectedColumnObjects.map((column) => (
|
||||
<div key={column.column_name} className="flex items-center space-x-4 rounded-lg bg-gray-50 p-3">
|
||||
<div key={column.column_name} className="flex items-center space-x-4 rounded-lg bg-muted p-3">
|
||||
{/* DB 컬럼 정보 */}
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-medium">{column.column_name}</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
타입: {column.data_type} | NULL: {column.is_nullable ? "Y" : "N"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 화살표 */}
|
||||
<div className="text-gray-400">→</div>
|
||||
<div className="text-muted-foreground/70">→</div>
|
||||
|
||||
{/* API 필드 선택 드롭다운 */}
|
||||
<div className="flex-1">
|
||||
|
|
@ -1735,7 +1735,7 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
|
|||
<input
|
||||
type="text"
|
||||
placeholder="API 필드명을 직접 입력하세요"
|
||||
className="mt-2 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
className="mt-2 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-2 focus:ring-ring focus:outline-none"
|
||||
onChange={(e) => {
|
||||
setDbToApiFieldMapping((prev) => ({
|
||||
...prev,
|
||||
|
|
@ -1745,7 +1745,7 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
|
|||
/>
|
||||
)}
|
||||
|
||||
<div className="mt-1 text-xs text-gray-500">
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
{dbToApiFieldMapping[column.column_name]
|
||||
? `매핑: ${column.column_name} → ${dbToApiFieldMapping[column.column_name]}`
|
||||
: `기본값: ${column.column_name} (DB 컬럼명 사용)`}
|
||||
|
|
@ -1755,32 +1755,32 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
|
|||
{/* 템플릿 미리보기 */}
|
||||
<div className="flex-1">
|
||||
<div className="rounded border bg-white p-2 font-mono text-sm">{`{{${column.column_name}}}`}</div>
|
||||
<div className="mt-1 text-xs text-gray-500">실제 DB 값으로 치환됩니다</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">실제 DB 값으로 치환됩니다</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{selectedColumns.length > 0 && (
|
||||
<div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
|
||||
<div className="text-sm font-medium text-blue-800">자동 생성된 JSON 구조</div>
|
||||
<pre className="mt-1 overflow-x-auto font-mono text-xs text-blue-600">{autoJsonPreview}</pre>
|
||||
<div className="mt-4 rounded-lg border border-primary/20 bg-primary/10 p-3">
|
||||
<div className="text-sm font-medium text-primary">자동 생성된 JSON 구조</div>
|
||||
<pre className="mt-1 overflow-x-auto font-mono text-xs text-primary">{autoJsonPreview}</pre>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setToApiBody(autoJsonPreview);
|
||||
toast.success("Request Body에 자동 생성된 JSON이 적용되었습니다.");
|
||||
}}
|
||||
className="mt-2 rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
|
||||
className="mt-2 rounded bg-primary px-3 py-1 text-xs text-white hover:bg-primary/90"
|
||||
>
|
||||
Request Body에 적용
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
|
||||
<div className="text-sm font-medium text-blue-800">매핑 사용 예시</div>
|
||||
<div className="mt-1 font-mono text-xs text-blue-600">
|
||||
<div className="mt-4 rounded-lg border border-primary/20 bg-primary/10 p-3">
|
||||
<div className="text-sm font-medium text-primary">매핑 사용 예시</div>
|
||||
<div className="mt-1 font-mono text-xs text-primary">
|
||||
{'{"id": "{{id}}", "name": "{{user_name}}", "email": "{{email}}"}'}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,6 @@ import {
|
|||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
|
|
@ -43,6 +35,8 @@ import {
|
|||
import { toast } from "sonner";
|
||||
import { BatchAPI, BatchJob } from "@/lib/api/batch";
|
||||
import BatchJobModal from "@/components/admin/BatchJobModal";
|
||||
import { showErrorToast } from "@/lib/utils/toastUtils";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
export default function BatchManagementPage() {
|
||||
const router = useRouter();
|
||||
|
|
@ -54,7 +48,6 @@ export default function BatchManagementPage() {
|
|||
const [typeFilter, setTypeFilter] = useState("all");
|
||||
const [jobTypes, setJobTypes] = useState<Array<{ value: string; label: string }>>([]);
|
||||
|
||||
// 모달 상태
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [selectedJob, setSelectedJob] = useState<BatchJob | null>(null);
|
||||
const [isBatchTypeModalOpen, setIsBatchTypeModalOpen] = useState(false);
|
||||
|
|
@ -84,7 +77,7 @@ export default function BatchManagementPage() {
|
|||
const loadJobTypes = async () => {
|
||||
try {
|
||||
const types = await BatchAPI.getSupportedJobTypes();
|
||||
setJobTypes(types);
|
||||
setJobTypes(types.map(t => ({ value: t, label: t })));
|
||||
} catch (error) {
|
||||
console.error("작업 타입 조회 오류:", error);
|
||||
}
|
||||
|
|
@ -93,7 +86,6 @@ export default function BatchManagementPage() {
|
|||
const filterJobs = () => {
|
||||
let filtered = jobs;
|
||||
|
||||
// 검색어 필터
|
||||
if (searchTerm) {
|
||||
filtered = filtered.filter(job =>
|
||||
job.job_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
|
|
@ -101,12 +93,10 @@ export default function BatchManagementPage() {
|
|||
);
|
||||
}
|
||||
|
||||
// 상태 필터
|
||||
if (statusFilter !== "all") {
|
||||
filtered = filtered.filter(job => job.is_active === statusFilter);
|
||||
}
|
||||
|
||||
// 타입 필터
|
||||
if (typeFilter !== "all") {
|
||||
filtered = filtered.filter(job => job.job_type === typeFilter);
|
||||
}
|
||||
|
|
@ -123,12 +113,10 @@ export default function BatchManagementPage() {
|
|||
setIsBatchTypeModalOpen(false);
|
||||
|
||||
if (type === 'db-to-db') {
|
||||
// 기존 배치 생성 모달 열기
|
||||
console.log("DB → DB 배치 모달 열기");
|
||||
setSelectedJob(null);
|
||||
setIsModalOpen(true);
|
||||
} else if (type === 'restapi-to-db') {
|
||||
// 새로운 REST API 배치 페이지로 이동
|
||||
console.log("REST API → DB 페이지로 이동:", '/admin/batch-management-new');
|
||||
router.push('/admin/batch-management-new');
|
||||
}
|
||||
|
|
@ -170,41 +158,167 @@ export default function BatchManagementPage() {
|
|||
|
||||
const getStatusBadge = (isActive: string) => {
|
||||
return isActive === "Y" ? (
|
||||
<Badge className="bg-green-100 text-green-800">활성</Badge>
|
||||
<Badge variant="default">활성</Badge>
|
||||
) : (
|
||||
<Badge className="bg-red-100 text-red-800">비활성</Badge>
|
||||
<Badge variant="secondary">비활성</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getTypeBadge = (type: string) => {
|
||||
const option = jobTypes.find(opt => opt.value === type);
|
||||
const colors = {
|
||||
collection: "bg-blue-100 text-blue-800",
|
||||
sync: "bg-purple-100 text-purple-800",
|
||||
cleanup: "bg-orange-100 text-orange-800",
|
||||
custom: "bg-gray-100 text-gray-800",
|
||||
};
|
||||
|
||||
const icons = {
|
||||
collection: "📥",
|
||||
sync: "🔄",
|
||||
cleanup: "🧹",
|
||||
custom: "⚙️",
|
||||
};
|
||||
|
||||
return (
|
||||
<Badge className={colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800"}>
|
||||
<span className="mr-1">{icons[type as keyof typeof icons] || "📋"}</span>
|
||||
{option?.label || type}
|
||||
</Badge>
|
||||
<Badge variant="outline">{option?.label || type}</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getSuccessRate = (job: BatchJob) => {
|
||||
if (job.execution_count === 0) return 100;
|
||||
return Math.round((job.success_count / job.execution_count) * 100);
|
||||
if (!job.execution_count) return 100;
|
||||
return Math.round(((job.success_count ?? 0) / job.execution_count) * 100);
|
||||
};
|
||||
|
||||
const getSuccessRateColor = (rate: number) => {
|
||||
if (rate >= 90) return 'text-success';
|
||||
if (rate >= 70) return 'text-warning';
|
||||
return 'text-destructive';
|
||||
};
|
||||
|
||||
const columns: RDVColumn<BatchJob>[] = [
|
||||
{
|
||||
key: "job_name",
|
||||
label: "작업명",
|
||||
render: (_val, job) => (
|
||||
<div>
|
||||
<div className="font-medium">{job.job_name}</div>
|
||||
{job.description && (
|
||||
<div className="text-xs text-muted-foreground">{job.description}</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "job_type",
|
||||
label: "타입",
|
||||
hideOnMobile: true,
|
||||
render: (_val, job) => getTypeBadge(job.job_type),
|
||||
},
|
||||
{
|
||||
key: "schedule_cron",
|
||||
label: "스케줄",
|
||||
hideOnMobile: true,
|
||||
render: (_val, job) => (
|
||||
<span className="font-mono">{job.schedule_cron || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
label: "상태",
|
||||
width: "100px",
|
||||
render: (_val, job) => getStatusBadge(job.is_active),
|
||||
},
|
||||
{
|
||||
key: "execution_count",
|
||||
label: "실행",
|
||||
hideOnMobile: true,
|
||||
render: (_val, job) => (
|
||||
<div>
|
||||
<div>총 {job.execution_count}회</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
성공 {job.success_count} / 실패 {job.failure_count}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "success_rate",
|
||||
label: "성공률",
|
||||
hideOnMobile: true,
|
||||
render: (_val, job) => {
|
||||
const rate = getSuccessRate(job);
|
||||
return (
|
||||
<span className={`font-medium ${getSuccessRateColor(rate)}`}>
|
||||
{rate}%
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "last_executed_at",
|
||||
label: "마지막 실행",
|
||||
render: (_val, job) => (
|
||||
<span>
|
||||
{job.last_executed_at
|
||||
? new Date(job.last_executed_at).toLocaleString()
|
||||
: "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const cardFields: RDVCardField<BatchJob>[] = [
|
||||
{
|
||||
label: "타입",
|
||||
render: (job) => getTypeBadge(job.job_type),
|
||||
},
|
||||
{
|
||||
label: "스케줄",
|
||||
render: (job) => (
|
||||
<span className="font-mono text-xs">{job.schedule_cron || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "실행 횟수",
|
||||
render: (job) => <span className="font-medium">{job.execution_count}회</span>,
|
||||
},
|
||||
{
|
||||
label: "성공률",
|
||||
render: (job) => {
|
||||
const rate = getSuccessRate(job);
|
||||
return (
|
||||
<span className={`font-medium ${getSuccessRateColor(rate)}`}>
|
||||
{rate}%
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "마지막 실행",
|
||||
render: (job) => (
|
||||
<span className="text-xs">
|
||||
{job.last_executed_at
|
||||
? new Date(job.last_executed_at).toLocaleDateString()
|
||||
: "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const renderDropdownActions = (job: BatchJob) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleEdit(job)}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
수정
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExecute(job)}
|
||||
disabled={job.is_active !== "Y"}
|
||||
>
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
실행
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(job)}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 헤더 */}
|
||||
|
|
@ -228,11 +342,10 @@ export default function BatchManagementPage() {
|
|||
</div>
|
||||
|
||||
{/* 통계 카드 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">총 작업</CardTitle>
|
||||
<div className="text-2xl">📋</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{jobs.length}</div>
|
||||
|
|
@ -245,11 +358,10 @@ export default function BatchManagementPage() {
|
|||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">총 실행</CardTitle>
|
||||
<div className="text-2xl">▶️</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{jobs.reduce((sum, job) => sum + job.execution_count, 0)}
|
||||
{jobs.reduce((sum, job) => sum + (job.execution_count ?? 0), 0)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">누적 실행 횟수</p>
|
||||
</CardContent>
|
||||
|
|
@ -258,11 +370,10 @@ export default function BatchManagementPage() {
|
|||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">성공</CardTitle>
|
||||
<div className="text-2xl">✅</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{jobs.reduce((sum, job) => sum + job.success_count, 0)}
|
||||
<div className="text-2xl font-bold text-success">
|
||||
{jobs.reduce((sum, job) => sum + (job.success_count ?? 0), 0)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">총 성공 횟수</p>
|
||||
</CardContent>
|
||||
|
|
@ -271,11 +382,10 @@ export default function BatchManagementPage() {
|
|||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">실패</CardTitle>
|
||||
<div className="text-2xl">❌</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-red-600">
|
||||
{jobs.reduce((sum, job) => sum + job.failure_count, 0)}
|
||||
<div className="text-2xl font-bold text-destructive">
|
||||
{jobs.reduce((sum, job) => sum + (job.failure_count ?? 0), 0)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">총 실패 횟수</p>
|
||||
</CardContent>
|
||||
|
|
@ -283,203 +393,109 @@ export default function BatchManagementPage() {
|
|||
</div>
|
||||
|
||||
{/* 필터 및 검색 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>필터 및 검색</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="작업명, 설명으로 검색..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="상태" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체</SelectItem>
|
||||
<SelectItem value="Y">활성</SelectItem>
|
||||
<SelectItem value="N">비활성</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="작업 타입" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체 타입</SelectItem>
|
||||
{jobTypes.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button variant="outline" onClick={loadJobs} disabled={isLoading}>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
새로고침
|
||||
</Button>
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="작업명, 설명으로 검색..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 배치 작업 목록 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>배치 작업 목록 ({filteredJobs.length}개)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8">
|
||||
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-2" />
|
||||
<p>배치 작업을 불러오는 중...</p>
|
||||
</div>
|
||||
) : filteredJobs.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
{jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업명</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">타입</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">스케줄</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">실행 통계</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">성공률</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">마지막 실행</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredJobs.map((job) => (
|
||||
<TableRow key={job.id}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="font-medium">{job.job_name}</div>
|
||||
{job.description && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{job.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getTypeBadge(job.job_type)}
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm">
|
||||
{job.schedule_cron || "-"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getStatusBadge(job.is_active)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm">
|
||||
<div>총 {job.execution_count}회</div>
|
||||
<div className="text-muted-foreground">
|
||||
성공 {job.success_count} / 실패 {job.failure_count}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`text-sm font-medium ${
|
||||
getSuccessRate(job) >= 90 ? 'text-green-600' :
|
||||
getSuccessRate(job) >= 70 ? 'text-yellow-600' : 'text-red-600'
|
||||
}`}>
|
||||
{getSuccessRate(job)}%
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{job.last_executed_at
|
||||
? new Date(job.last_executed_at).toLocaleString()
|
||||
: "-"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleEdit(job)}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
수정
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExecute(job)}
|
||||
disabled={job.is_active !== "Y"}
|
||||
>
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
실행
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(job)}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="h-10 w-full sm:w-[160px]">
|
||||
<SelectValue placeholder="상태" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체</SelectItem>
|
||||
<SelectItem value="Y">활성</SelectItem>
|
||||
<SelectItem value="N">비활성</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="h-10 w-full sm:w-[160px]">
|
||||
<SelectValue placeholder="작업 타입" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체 타입</SelectItem>
|
||||
{jobTypes.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Button variant="outline" onClick={loadJobs} disabled={isLoading} className="h-10 w-full sm:w-auto">
|
||||
<RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 배치 작업 목록 제목 */}
|
||||
<div className="text-sm text-muted-foreground">
|
||||
총 <span className="font-semibold text-foreground">{filteredJobs.length}</span>개
|
||||
</div>
|
||||
|
||||
<ResponsiveDataView<BatchJob>
|
||||
data={filteredJobs}
|
||||
columns={columns}
|
||||
keyExtractor={(job) => String(job.id)}
|
||||
isLoading={isLoading}
|
||||
emptyMessage={jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
|
||||
skeletonCount={5}
|
||||
cardTitle={(job) => job.job_name}
|
||||
cardSubtitle={(job) => job.description ? (
|
||||
<span className="truncate text-sm text-muted-foreground">{job.description}</span>
|
||||
) : undefined}
|
||||
cardHeaderRight={(job) => getStatusBadge(job.is_active)}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="80px"
|
||||
renderActions={renderDropdownActions}
|
||||
/>
|
||||
|
||||
{/* 배치 타입 선택 모달 */}
|
||||
{isBatchTypeModalOpen && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<Card className="w-full max-w-2xl mx-4">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<Card className="mx-4 w-full max-w-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-center">배치 타입 선택</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* DB → DB */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div
|
||||
className="p-6 border rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:bg-blue-50"
|
||||
className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
|
||||
onClick={() => handleBatchTypeSelect('db-to-db')}
|
||||
>
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<Database className="w-8 h-8 text-blue-600 mr-2" />
|
||||
<ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
|
||||
<Database className="w-8 h-8 text-blue-600" />
|
||||
<div className="mb-4 flex items-center justify-center">
|
||||
<Database className="mr-2 h-8 w-8 text-primary" />
|
||||
<ArrowRight className="mr-2 h-6 w-6 text-muted-foreground" />
|
||||
<Database className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="font-medium text-lg mb-2">DB → DB</div>
|
||||
<div className="text-sm text-gray-500">데이터베이스 간 데이터 동기화</div>
|
||||
<div className="mb-2 text-lg font-medium">DB → DB</div>
|
||||
<div className="text-sm text-muted-foreground">데이터베이스 간 데이터 동기화</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* REST API → DB */}
|
||||
<div
|
||||
className="p-6 border rounded-lg cursor-pointer transition-all hover:border-green-500 hover:bg-green-50"
|
||||
className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
|
||||
onClick={() => handleBatchTypeSelect('restapi-to-db')}
|
||||
>
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<Globe className="w-8 h-8 text-green-600 mr-2" />
|
||||
<ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
|
||||
<Database className="w-8 h-8 text-green-600" />
|
||||
<div className="mb-4 flex items-center justify-center">
|
||||
<Globe className="mr-2 h-8 w-8 text-success" />
|
||||
<ArrowRight className="mr-2 h-6 w-6 text-muted-foreground" />
|
||||
<Database className="h-8 w-8 text-success" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="font-medium text-lg mb-2">REST API → DB</div>
|
||||
<div className="text-sm text-gray-500">REST API에서 데이터베이스로 데이터 수집</div>
|
||||
<div className="mb-2 text-lg font-medium">REST API → DB</div>
|
||||
<div className="text-sm text-muted-foreground">REST API에서 데이터베이스로 데이터 수집</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -381,7 +381,7 @@ export default function AutoFillTab() {
|
|||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(group.groupCode)}>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -676,7 +676,7 @@ export default function AutoFillTab() {
|
|||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
|
|
|||
|
|
@ -577,9 +577,9 @@ export default function CascadingRelationsTab() {
|
|||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="rounded bg-blue-100 px-2 py-0.5 text-blue-700">{relation.parent_table}</span>
|
||||
<span className="rounded bg-primary/10 px-2 py-0.5 text-primary">{relation.parent_table}</span>
|
||||
<ChevronRight className="text-muted-foreground h-4 w-4" />
|
||||
<span className="rounded bg-green-100 px-2 py-0.5 text-green-700">
|
||||
<span className="rounded bg-emerald-100 px-2 py-0.5 text-emerald-700">
|
||||
{relation.child_table}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -619,7 +619,7 @@ export default function CascadingRelationsTab() {
|
|||
<div className="space-y-4">
|
||||
{/* Step 1: 부모 테이블 */}
|
||||
<div className="rounded-lg border p-4">
|
||||
<h4 className="mb-3 text-sm font-semibold text-blue-600">1. 부모 (상위 선택)</h4>
|
||||
<h4 className="mb-3 text-sm font-semibold text-primary">1. 부모 (상위 선택)</h4>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">테이블</Label>
|
||||
|
|
@ -696,7 +696,7 @@ export default function CascadingRelationsTab() {
|
|||
|
||||
{/* Step 2: 자식 테이블 */}
|
||||
<div className="rounded-lg border p-4">
|
||||
<h4 className="mb-3 text-sm font-semibold text-green-600">2. 자식 (하위 옵션)</h4>
|
||||
<h4 className="mb-3 text-sm font-semibold text-emerald-600">2. 자식 (하위 옵션)</h4>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">테이블</Label>
|
||||
|
|
|
|||
|
|
@ -304,7 +304,7 @@ export default function ConditionTab() {
|
|||
<TableCell>
|
||||
<div className="text-sm">
|
||||
<span className="text-muted-foreground">{condition.conditionField}</span>
|
||||
<span className="mx-1 text-blue-600">{getOperatorLabel(condition.conditionOperator)}</span>
|
||||
<span className="mx-1 text-primary">{getOperatorLabel(condition.conditionOperator)}</span>
|
||||
<span className="font-medium">{condition.conditionValue}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
|
@ -329,7 +329,7 @@ export default function ConditionTab() {
|
|||
size="icon"
|
||||
onClick={() => handleDeleteConfirm(condition.conditionId!)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -491,7 +491,7 @@ export default function ConditionTab() {
|
|||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
|
|
|||
|
|
@ -501,7 +501,7 @@ export default function HierarchyTab() {
|
|||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(group.groupCode)}>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -548,7 +548,7 @@ export default function HierarchyTab() {
|
|||
size="icon"
|
||||
onClick={() => handleDeleteLevel(level.levelId!, group.groupCode)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -836,7 +836,7 @@ export default function HierarchyTab() {
|
|||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
|
|
|||
|
|
@ -354,7 +354,7 @@ export default function MutualExclusionTab() {
|
|||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(exclusion.exclusionId!)}>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -404,7 +404,7 @@ export default function MutualExclusionTab() {
|
|||
/>
|
||||
{fieldList.length > 2 && (
|
||||
<Button variant="ghost" size="icon" onClick={() => removeField(index)}>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -571,7 +571,7 @@ export default function MutualExclusionTab() {
|
|||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ export default function DebugLayoutPage() {
|
|||
<h1 className="mb-4 text-2xl font-bold">관리자 레이아웃 디버깅</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded bg-green-100 p-4">
|
||||
<div className="rounded bg-emerald-100 p-4">
|
||||
<h2 className="mb-2 font-semibold">토큰 상태</h2>
|
||||
<p>토큰 존재: {debugInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
|
||||
<p>토큰 길이: {debugInfo.tokenLength}</p>
|
||||
|
|
@ -142,14 +142,14 @@ export default function DebugLayoutPage() {
|
|||
<p>SessionStorage 토큰: {debugInfo.sessionToken ? "✅ 존재" : "❌ 없음"}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded bg-blue-100 p-4">
|
||||
<div className="rounded bg-primary/10 p-4">
|
||||
<h2 className="mb-2 font-semibold">페이지 정보</h2>
|
||||
<p>현재 URL: {debugInfo.currentUrl}</p>
|
||||
<p>Pathname: {debugInfo.pathname}</p>
|
||||
<p>시간: {debugInfo.timestamp}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded bg-yellow-100 p-4">
|
||||
<div className="rounded bg-amber-100 p-4">
|
||||
<h2 className="mb-2 font-semibold">토큰 관리</h2>
|
||||
<div className="space-x-2">
|
||||
<button
|
||||
|
|
@ -157,11 +157,11 @@ export default function DebugLayoutPage() {
|
|||
const token = localStorage.getItem("authToken");
|
||||
alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
|
||||
}}
|
||||
className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
|
||||
className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
|
||||
>
|
||||
토큰 확인
|
||||
</button>
|
||||
<button onClick={handleTokenSync} className="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600">
|
||||
<button onClick={handleTokenSync} className="rounded bg-emerald-500 px-4 py-2 text-white hover:bg-emerald-600">
|
||||
토큰 동기화
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -173,13 +173,13 @@ export default function DebugLayoutPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded bg-orange-100 p-4">
|
||||
<div className="rounded bg-amber-100 p-4">
|
||||
<h2 className="mb-2 font-semibold">API 테스트</h2>
|
||||
<div className="mb-4 space-x-2">
|
||||
<button onClick={handleApiTest} className="rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600">
|
||||
<button onClick={handleApiTest} className="rounded bg-amber-500 px-4 py-2 text-white hover:bg-orange-600">
|
||||
인증 상태 API 테스트
|
||||
</button>
|
||||
<button onClick={handleUserApiTest} className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600">
|
||||
<button onClick={handleUserApiTest} className="rounded bg-destructive px-4 py-2 text-white hover:bg-destructive">
|
||||
사용자 API 테스트
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -194,7 +194,7 @@ export default function DebugLayoutPage() {
|
|||
<div
|
||||
className={`rounded p-3 ${
|
||||
apiTestResult.status === "success"
|
||||
? "bg-green-200"
|
||||
? "bg-emerald-200"
|
||||
: apiTestResult.status === "error"
|
||||
? "bg-red-200"
|
||||
: "bg-yellow-200"
|
||||
|
|
|
|||
|
|
@ -28,27 +28,27 @@ export default function SimpleDebugPage() {
|
|||
<h1 className="mb-4 text-2xl font-bold">간단한 토큰 디버깅</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded bg-green-100 p-4">
|
||||
<div className="rounded bg-emerald-100 p-4">
|
||||
<h2 className="mb-2 font-semibold">토큰 상태</h2>
|
||||
<p>토큰 존재: {tokenInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
|
||||
<p>토큰 길이: {tokenInfo.tokenLength}</p>
|
||||
<p>토큰 시작: {tokenInfo.tokenStart}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded bg-blue-100 p-4">
|
||||
<div className="rounded bg-primary/10 p-4">
|
||||
<h2 className="mb-2 font-semibold">페이지 정보</h2>
|
||||
<p>현재 URL: {tokenInfo.currentUrl}</p>
|
||||
<p>시간: {tokenInfo.timestamp}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded bg-yellow-100 p-4">
|
||||
<div className="rounded bg-amber-100 p-4">
|
||||
<h2 className="mb-2 font-semibold">테스트 버튼</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
const token = localStorage.getItem("authToken");
|
||||
alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
|
||||
}}
|
||||
className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
|
||||
className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
|
||||
>
|
||||
토큰 확인
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -15,16 +15,16 @@ export default function AdminDebugPage() {
|
|||
<h1 className="mb-4 text-2xl font-bold">어드민 권한 디버깅</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded bg-gray-100 p-4">
|
||||
<div className="rounded bg-muted p-4">
|
||||
<h2 className="mb-2 font-semibold">인증 상태</h2>
|
||||
<p>로딩: {loading ? "예" : "아니오"}</p>
|
||||
<p>로그인: {isLoggedIn ? "예" : "아니오"}</p>
|
||||
<p>관리자: {isAdmin ? "예" : "아니오"}</p>
|
||||
{error && <p className="text-red-500">에러: {error}</p>}
|
||||
{error && <p className="text-destructive">에러: {error}</p>}
|
||||
</div>
|
||||
|
||||
{user && (
|
||||
<div className="rounded bg-blue-100 p-4">
|
||||
<div className="rounded bg-primary/10 p-4">
|
||||
<h2 className="mb-2 font-semibold">사용자 정보</h2>
|
||||
<p>ID: {user.userId}</p>
|
||||
<p>이름: {user.userName}</p>
|
||||
|
|
@ -34,7 +34,7 @@ export default function AdminDebugPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded bg-green-100 p-4">
|
||||
<div className="rounded bg-emerald-100 p-4">
|
||||
<h2 className="mb-2 font-semibold">토큰 정보</h2>
|
||||
<p>
|
||||
localStorage 토큰: {typeof window !== "undefined" && localStorage.getItem("authToken") ? "존재" : "없음"}
|
||||
|
|
|
|||
|
|
@ -220,13 +220,13 @@ export default function LayoutManagementPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none px-4 py-8 space-y-8">
|
||||
{/* 페이지 제목 */}
|
||||
<div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">레이아웃 관리</h1>
|
||||
<p className="mt-2 text-gray-600">화면 레이아웃을 생성하고 관리합니다</p>
|
||||
<h1 className="text-3xl font-bold text-foreground">레이아웃 관리</h1>
|
||||
<p className="mt-2 text-muted-foreground">화면 레이아웃을 생성하고 관리합니다</p>
|
||||
</div>
|
||||
<Button className="flex items-center gap-2 shadow-sm" onClick={() => setCreateModalOpen(true)}>
|
||||
<Plus className="h-4 w-4" />새 레이아웃
|
||||
|
|
@ -239,7 +239,7 @@ export default function LayoutManagementPage() {
|
|||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
|
||||
<Input
|
||||
placeholder="레이아웃 이름 또는 설명으로 검색..."
|
||||
value={searchTerm}
|
||||
|
|
@ -276,7 +276,7 @@ export default function LayoutManagementPage() {
|
|||
{loading ? (
|
||||
<div className="py-8 text-center">로딩 중...</div>
|
||||
) : layouts.length === 0 ? (
|
||||
<div className="py-8 text-center text-gray-500">레이아웃이 없습니다.</div>
|
||||
<div className="py-8 text-center text-muted-foreground">레이아웃이 없습니다.</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 레이아웃 그리드 */}
|
||||
|
|
@ -288,7 +288,7 @@ export default function LayoutManagementPage() {
|
|||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<CategoryIcon className="h-5 w-5 text-gray-600" />
|
||||
<CategoryIcon className="h-5 w-5 text-muted-foreground" />
|
||||
<Badge variant="secondary">
|
||||
{CATEGORY_NAMES[layout.category as keyof typeof CATEGORY_NAMES]}
|
||||
</Badge>
|
||||
|
|
@ -312,7 +312,7 @@ export default function LayoutManagementPage() {
|
|||
<Copy className="mr-2 h-4 w-4" />
|
||||
복제
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(layout)} className="text-red-600">
|
||||
<DropdownMenuItem onClick={() => handleDelete(layout)} className="text-destructive">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
|
|
@ -321,17 +321,17 @@ export default function LayoutManagementPage() {
|
|||
</div>
|
||||
<CardTitle className="text-lg">{layout.layoutName}</CardTitle>
|
||||
{layout.description && (
|
||||
<p className="line-clamp-2 text-sm text-gray-600">{layout.description}</p>
|
||||
<p className="line-clamp-2 text-sm text-muted-foreground">{layout.description}</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-500">타입:</span>
|
||||
<span className="text-muted-foreground">타입:</span>
|
||||
<Badge variant="outline">{layout.layoutType}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-500">존 개수:</span>
|
||||
<span className="text-muted-foreground">존 개수:</span>
|
||||
<span>{layout.zonesConfig.length}개</span>
|
||||
</div>
|
||||
{layout.isPublic === "Y" && (
|
||||
|
|
@ -397,7 +397,7 @@ export default function LayoutManagementPage() {
|
|||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
|
||||
<AlertDialogAction onClick={confirmDelete} className="bg-destructive hover:bg-red-700">
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
|
|
|||
|
|
@ -59,25 +59,25 @@ export default function MonitoringPage() {
|
|||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return <CheckCircle className="h-4 w-4 text-green-500" />;
|
||||
return <CheckCircle className="h-4 w-4 text-emerald-500" />;
|
||||
case 'failed':
|
||||
return <AlertCircle className="h-4 w-4 text-red-500" />;
|
||||
return <AlertCircle className="h-4 w-4 text-destructive" />;
|
||||
case 'running':
|
||||
return <Play className="h-4 w-4 text-blue-500" />;
|
||||
return <Play className="h-4 w-4 text-primary" />;
|
||||
case 'pending':
|
||||
return <Clock className="h-4 w-4 text-yellow-500" />;
|
||||
return <Clock className="h-4 w-4 text-amber-500" />;
|
||||
default:
|
||||
return <Clock className="h-4 w-4 text-gray-500" />;
|
||||
return <Clock className="h-4 w-4 text-muted-foreground" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const variants = {
|
||||
completed: "bg-green-100 text-green-800",
|
||||
completed: "bg-emerald-100 text-emerald-800",
|
||||
failed: "bg-destructive/20 text-red-800",
|
||||
running: "bg-primary/20 text-blue-800",
|
||||
pending: "bg-yellow-100 text-yellow-800",
|
||||
cancelled: "bg-gray-100 text-gray-800",
|
||||
running: "bg-primary/20 text-primary",
|
||||
pending: "bg-amber-100 text-yellow-800",
|
||||
cancelled: "bg-muted text-foreground",
|
||||
};
|
||||
|
||||
const labels = {
|
||||
|
|
@ -120,7 +120,7 @@ export default function MonitoringPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none px-4 py-8 space-y-8">
|
||||
{/* 헤더 */}
|
||||
<div>
|
||||
|
|
@ -191,7 +191,7 @@ export default function MonitoringPage() {
|
|||
<div className="text-2xl">✅</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">{monitoring.successful_jobs_today}</div>
|
||||
<div className="text-2xl font-bold text-emerald-600">{monitoring.successful_jobs_today}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
성공률: {getSuccessRate()}%
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default function BarcodeLabelDesignerPage() {
|
|||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<BarcodeDesignerProvider labelId={labelId}>
|
||||
<div className="flex h-screen flex-col overflow-hidden bg-gray-50">
|
||||
<div className="flex h-screen flex-col overflow-hidden bg-muted">
|
||||
<BarcodeDesignerToolbar />
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<BarcodeDesignerLeftPanel />
|
||||
|
|
|
|||
|
|
@ -32,12 +32,12 @@ export default function BarcodeLabelManagementPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none space-y-8 px-4 py-8">
|
||||
<div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">바코드 라벨 관리</h1>
|
||||
<p className="mt-2 text-gray-600">ZD421 등 바코드 프린터용 라벨을 작성하고 출력합니다</p>
|
||||
<h1 className="text-3xl font-bold text-foreground">바코드 라벨 관리</h1>
|
||||
<p className="mt-2 text-muted-foreground">ZD421 등 바코드 프린터용 라벨을 작성하고 출력합니다</p>
|
||||
</div>
|
||||
<Button onClick={handleCreateNew} className="gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
|
|
@ -46,7 +46,7 @@ export default function BarcodeLabelManagementPage() {
|
|||
</div>
|
||||
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader className="bg-gray-50/50">
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Search className="h-5 w-5" />
|
||||
검색
|
||||
|
|
@ -105,7 +105,7 @@ export default function BarcodeLabelManagementPage() {
|
|||
</Card>
|
||||
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader className="bg-gray-50/50">
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
바코드 라벨 목록
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { dashboardApi } from "@/lib/api/dashboard";
|
|||
import { Dashboard } from "@/lib/api/dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
|
|
@ -16,6 +15,8 @@ import {
|
|||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Pagination, PaginationInfo } from "@/components/common/Pagination";
|
||||
import { DeleteConfirmModal } from "@/components/common/DeleteConfirmModal";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
||||
import { Plus, Search, Edit, Trash2, Copy, MoreVertical, AlertCircle, RefreshCw } from "lucide-react";
|
||||
|
||||
/**
|
||||
|
|
@ -30,7 +31,7 @@ export default function DashboardListPage() {
|
|||
|
||||
// 상태 관리
|
||||
const [dashboards, setDashboards] = useState<Dashboard[]>([]);
|
||||
const [loading, setLoading] = useState(true); // CSR이므로 초기 로딩 true
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
|
|
@ -83,52 +84,36 @@ export default function DashboardListPage() {
|
|||
endItem: Math.min(currentPage * pageSize, totalCount),
|
||||
};
|
||||
|
||||
// 페이지 변경 핸들러
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
const handlePageChange = (page: number) => setCurrentPage(page);
|
||||
|
||||
// 페이지 크기 변경 핸들러
|
||||
const handlePageSizeChange = (size: number) => {
|
||||
setPageSize(size);
|
||||
setCurrentPage(1); // 페이지 크기 변경 시 첫 페이지로
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
// 대시보드 삭제 확인 모달 열기
|
||||
const handleDeleteClick = (id: string, title: string) => {
|
||||
setDeleteTarget({ id, title });
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
// 대시보드 삭제 실행
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!deleteTarget) return;
|
||||
|
||||
try {
|
||||
await dashboardApi.deleteDashboard(deleteTarget.id);
|
||||
setDeleteDialogOpen(false);
|
||||
setDeleteTarget(null);
|
||||
toast({
|
||||
title: "성공",
|
||||
description: "대시보드가 삭제되었습니다.",
|
||||
});
|
||||
toast({ title: "성공", description: "대시보드가 삭제되었습니다." });
|
||||
loadDashboards();
|
||||
} catch (err) {
|
||||
console.error("Failed to delete dashboard:", err);
|
||||
setDeleteDialogOpen(false);
|
||||
toast({
|
||||
title: "오류",
|
||||
description: "대시보드 삭제에 실패했습니다.",
|
||||
variant: "destructive",
|
||||
});
|
||||
toast({ title: "오류", description: "대시보드 삭제에 실패했습니다.", variant: "destructive" });
|
||||
}
|
||||
};
|
||||
|
||||
// 대시보드 복사
|
||||
const handleCopy = async (dashboard: Dashboard) => {
|
||||
try {
|
||||
const fullDashboard = await dashboardApi.getDashboard(dashboard.id);
|
||||
|
||||
await dashboardApi.createDashboard({
|
||||
title: `${fullDashboard.title} (복사본)`,
|
||||
description: fullDashboard.description,
|
||||
|
|
@ -138,40 +123,85 @@ export default function DashboardListPage() {
|
|||
category: fullDashboard.category,
|
||||
settings: fullDashboard.settings as { resolution?: string; backgroundColor?: string },
|
||||
});
|
||||
toast({
|
||||
title: "성공",
|
||||
description: "대시보드가 복사되었습니다.",
|
||||
});
|
||||
toast({ title: "성공", description: "대시보드가 복사되었습니다." });
|
||||
loadDashboards();
|
||||
} catch (err) {
|
||||
console.error("Failed to copy dashboard:", err);
|
||||
toast({
|
||||
title: "오류",
|
||||
description: "대시보드 복사에 실패했습니다.",
|
||||
variant: "destructive",
|
||||
});
|
||||
toast({ title: "오류", description: "대시보드 복사에 실패했습니다.", variant: "destructive" });
|
||||
}
|
||||
};
|
||||
|
||||
// 포맷팅 헬퍼
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString("ko-KR", {
|
||||
const formatDate = (dateString: string) =>
|
||||
new Date(dateString).toLocaleDateString("ko-KR", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
// ResponsiveDataView 컬럼 정의
|
||||
const columns: RDVColumn<Dashboard>[] = [
|
||||
{
|
||||
key: "title",
|
||||
label: "제목",
|
||||
render: (_v, row) => (
|
||||
<button
|
||||
onClick={() => router.push(`/admin/screenMng/dashboardList/${row.id}`)}
|
||||
className="hover:text-primary cursor-pointer text-left font-medium transition-colors hover:underline"
|
||||
>
|
||||
{row.title}
|
||||
</button>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "설명",
|
||||
render: (_v, row) => (
|
||||
<span className="text-muted-foreground max-w-md truncate">{row.description || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "createdByName",
|
||||
label: "생성자",
|
||||
width: "120px",
|
||||
render: (_v, row) => row.createdByName || row.createdBy || "-",
|
||||
},
|
||||
{
|
||||
key: "createdAt",
|
||||
label: "생성일",
|
||||
width: "120px",
|
||||
render: (_v, row) => formatDate(row.createdAt),
|
||||
},
|
||||
{
|
||||
key: "updatedAt",
|
||||
label: "수정일",
|
||||
width: "120px",
|
||||
render: (_v, row) => formatDate(row.updatedAt),
|
||||
},
|
||||
];
|
||||
|
||||
// 모바일 카드 필드 정의
|
||||
const cardFields: RDVCardField<Dashboard>[] = [
|
||||
{
|
||||
label: "설명",
|
||||
render: (d) => (
|
||||
<span className="max-w-[200px] truncate">{d.description || "-"}</span>
|
||||
),
|
||||
},
|
||||
{ label: "생성자", render: (d) => d.createdByName || d.createdBy || "-" },
|
||||
{ label: "생성일", render: (d) => formatDate(d.createdAt) },
|
||||
{ label: "수정일", render: (d) => formatDate(d.updatedAt) },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-background flex min-h-screen flex-col">
|
||||
<div className="space-y-6 p-6">
|
||||
<div className="space-y-6 p-4 sm:p-6">
|
||||
{/* 페이지 헤더 */}
|
||||
<div className="space-y-2 border-b pb-4">
|
||||
<h1 className="text-3xl font-bold tracking-tight">대시보드 관리</h1>
|
||||
<p className="text-muted-foreground text-sm">대시보드를 생성하고 관리할 수 있습니다</p>
|
||||
</div>
|
||||
|
||||
{/* 검색 및 액션 */}
|
||||
{/* 검색 및 액션 (반응형) */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
|
|
@ -183,7 +213,7 @@ export default function DashboardListPage() {
|
|||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-sm">
|
||||
<div className="text-muted-foreground hidden text-sm sm:block">
|
||||
총 <span className="text-foreground font-semibold">{totalCount.toLocaleString()}</span> 건
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -194,71 +224,7 @@ export default function DashboardListPage() {
|
|||
</div>
|
||||
|
||||
{/* 대시보드 목록 */}
|
||||
{loading ? (
|
||||
<>
|
||||
{/* 데스크톱 테이블 스켈레톤 */}
|
||||
<div className="bg-card hidden shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
|
||||
<TableHead className="h-12 text-sm font-semibold">제목</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">설명</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">생성자</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">수정일</TableHead>
|
||||
<TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<TableRow key={index} className="border-b">
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 w-20 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-right">
|
||||
<div className="bg-muted ml-auto h-8 w-8 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일/태블릿 카드 스켈레톤 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="flex justify-between">
|
||||
<div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : error ? (
|
||||
{error ? (
|
||||
<div className="border-destructive/50 bg-destructive/10 flex flex-col items-center justify-center rounded-lg border p-12">
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
<div className="bg-destructive/20 flex h-16 w-16 items-center justify-center rounded-full">
|
||||
|
|
@ -274,158 +240,50 @@ export default function DashboardListPage() {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : dashboards.length === 0 ? (
|
||||
<div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<p className="text-muted-foreground text-sm">대시보드가 없습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 데스크톱 테이블 뷰 (lg 이상) */}
|
||||
<div className="bg-card hidden shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
|
||||
<TableHead className="h-12 text-sm font-semibold">제목</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">설명</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">생성자</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">수정일</TableHead>
|
||||
<TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{dashboards.map((dashboard) => (
|
||||
<TableRow key={dashboard.id} className="hover:bg-muted/50 border-b transition-colors">
|
||||
<TableCell className="h-16 text-sm font-medium">
|
||||
<button
|
||||
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
|
||||
className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
|
||||
>
|
||||
{dashboard.title}
|
||||
</button>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground h-16 max-w-md truncate text-sm">
|
||||
{dashboard.description || "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground h-16 text-sm">
|
||||
{dashboard.createdByName || dashboard.createdBy || "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground h-16 text-sm">
|
||||
{formatDate(dashboard.createdAt)}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground h-16 text-sm">
|
||||
{formatDate(dashboard.updatedAt)}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
|
||||
className="gap-2 text-sm"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
편집
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopy(dashboard)} className="gap-2 text-sm">
|
||||
<Copy className="h-4 w-4" />
|
||||
복사
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
|
||||
className="text-destructive focus:text-destructive gap-2 text-sm"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일/태블릿 카드 뷰 (lg 미만) */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{dashboards.map((dashboard) => (
|
||||
<div
|
||||
key={dashboard.id}
|
||||
className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<button
|
||||
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
|
||||
className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
|
||||
>
|
||||
<h3 className="text-base font-semibold">{dashboard.title}</h3>
|
||||
</button>
|
||||
<p className="text-muted-foreground mt-1 text-sm">{dashboard.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 정보 */}
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">설명</span>
|
||||
<span className="max-w-[200px] truncate font-medium">{dashboard.description || "-"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">생성자</span>
|
||||
<span className="font-medium">{dashboard.createdByName || dashboard.createdBy || "-"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">생성일</span>
|
||||
<span className="font-medium">{formatDate(dashboard.createdAt)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">수정일</span>
|
||||
<span className="font-medium">{formatDate(dashboard.updatedAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 */}
|
||||
<div className="mt-4 flex gap-2 border-t pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
편집
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
onClick={() => handleCopy(dashboard)}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
복사
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 gap-2 text-sm"
|
||||
onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
<ResponsiveDataView<Dashboard>
|
||||
data={dashboards}
|
||||
columns={columns}
|
||||
keyExtractor={(d) => d.id}
|
||||
isLoading={loading}
|
||||
emptyMessage="대시보드가 없습니다."
|
||||
skeletonCount={10}
|
||||
cardTitle={(d) => d.title}
|
||||
cardSubtitle={(d) => d.id}
|
||||
cardFields={cardFields}
|
||||
onRowClick={(d) => router.push(`/admin/screenMng/dashboardList/${d.id}`)}
|
||||
renderActions={(d) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e) => e.stopPropagation()}>
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => router.push(`/admin/screenMng/dashboardList/${d.id}`)}
|
||||
className="gap-2 text-sm"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
편집
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopy(d)} className="gap-2 text-sm">
|
||||
<Copy className="h-4 w-4" />
|
||||
복사
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDeleteClick(d.id, d.title)}
|
||||
className="text-destructive focus:text-destructive gap-2 text-sm"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="80px"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
|
|
@ -453,6 +311,9 @@ export default function DashboardListPage() {
|
|||
onConfirm={handleDeleteConfirm}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Scroll to Top 버튼 */}
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export default function ReportDesignerPage() {
|
|||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<ReportDesignerProvider reportId={reportId}>
|
||||
<div className="flex h-screen flex-col overflow-hidden bg-gray-50">
|
||||
<div className="flex h-screen flex-col overflow-hidden bg-muted">
|
||||
{/* 상단 툴바 */}
|
||||
<ReportDesignerToolbar />
|
||||
|
||||
|
|
|
|||
|
|
@ -30,13 +30,13 @@ export default function ReportManagementPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none space-y-8 px-4 py-8">
|
||||
{/* 페이지 제목 */}
|
||||
<div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">리포트 관리</h1>
|
||||
<p className="mt-2 text-gray-600">리포트를 생성하고 관리합니다</p>
|
||||
<h1 className="text-3xl font-bold text-foreground">리포트 관리</h1>
|
||||
<p className="mt-2 text-muted-foreground">리포트를 생성하고 관리합니다</p>
|
||||
</div>
|
||||
<Button onClick={handleCreateNew} className="gap-2">
|
||||
<Plus className="h-4 w-4" />새 리포트
|
||||
|
|
@ -45,7 +45,7 @@ export default function ReportManagementPage() {
|
|||
|
||||
{/* 검색 영역 */}
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader className="bg-gray-50/50">
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Search className="h-5 w-5" />
|
||||
검색
|
||||
|
|
@ -78,7 +78,7 @@ export default function ReportManagementPage() {
|
|||
|
||||
{/* 리포트 목록 */}
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader className="bg-gray-50/50">
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
📋 리포트 목록
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ export default function EditWebTypePage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none px-4 py-8 space-y-8">
|
||||
{/* 헤더 */}
|
||||
<div className="mb-6 flex items-center gap-4">
|
||||
|
|
@ -244,7 +244,7 @@ export default function EditWebTypePage() {
|
|||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="type_name">
|
||||
웹타입명 <span className="text-red-500">*</span>
|
||||
웹타입명 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="type_name"
|
||||
|
|
@ -267,7 +267,7 @@ export default function EditWebTypePage() {
|
|||
{/* 카테고리 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="category">
|
||||
카테고리 <span className="text-red-500">*</span>
|
||||
카테고리 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select value={formData.category || ""} onValueChange={(value) => handleInputChange("category", value)}>
|
||||
<SelectTrigger>
|
||||
|
|
@ -286,7 +286,7 @@ export default function EditWebTypePage() {
|
|||
{/* 연결된 컴포넌트 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="component_name">
|
||||
연결된 컴포넌트 <span className="text-red-500">*</span>
|
||||
연결된 컴포넌트 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.component_name || "TextWidget"}
|
||||
|
|
@ -338,15 +338,15 @@ export default function EditWebTypePage() {
|
|||
</SelectContent>
|
||||
</Select>
|
||||
{formData.config_panel && (
|
||||
<div className="rounded-lg border border-green-200 bg-green-50 p-3">
|
||||
<div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-green-500"></div>
|
||||
<span className="text-sm font-medium text-green-700">
|
||||
<div className="h-2 w-2 rounded-full bg-emerald-500"></div>
|
||||
<span className="text-sm font-medium text-emerald-700">
|
||||
현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
|
||||
</span>
|
||||
</div>
|
||||
{getConfigPanelInfo(formData.config_panel)?.description && (
|
||||
<p className="mt-1 ml-4 text-xs text-green-600">
|
||||
<p className="mt-1 ml-4 text-xs text-emerald-600">
|
||||
{getConfigPanelInfo(formData.config_panel)?.description}
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -427,7 +427,7 @@ export default function EditWebTypePage() {
|
|||
rows={4}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
{jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
|
||||
{jsonErrors.default_config && <p className="text-xs text-destructive">{jsonErrors.default_config}</p>}
|
||||
</div>
|
||||
|
||||
{/* 유효성 검사 규칙 */}
|
||||
|
|
@ -441,7 +441,7 @@ export default function EditWebTypePage() {
|
|||
rows={4}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
{jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
|
||||
{jsonErrors.validation_rules && <p className="text-xs text-destructive">{jsonErrors.validation_rules}</p>}
|
||||
</div>
|
||||
|
||||
{/* 기본 스타일 */}
|
||||
|
|
@ -455,7 +455,7 @@ export default function EditWebTypePage() {
|
|||
rows={4}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
{jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
|
||||
{jsonErrors.default_style && <p className="text-xs text-destructive">{jsonErrors.default_style}</p>}
|
||||
</div>
|
||||
|
||||
{/* 입력 속성 */}
|
||||
|
|
@ -469,7 +469,7 @@ export default function EditWebTypePage() {
|
|||
rows={4}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
{jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
|
||||
{jsonErrors.input_properties && <p className="text-xs text-destructive">{jsonErrors.input_properties}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -498,8 +498,8 @@ export default function EditWebTypePage() {
|
|||
|
||||
{/* 에러 메시지 */}
|
||||
{updateError && (
|
||||
<div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
|
||||
<p className="text-red-600">
|
||||
<div className="mt-4 rounded-md border border-destructive/20 bg-destructive/10 p-4">
|
||||
<p className="text-destructive">
|
||||
수정 중 오류가 발생했습니다: {updateError instanceof Error ? updateError.message : "알 수 없는 오류"}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export default function WebTypeDetailPage() {
|
|||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mb-2 text-lg text-red-600">웹타입 정보를 불러오는데 실패했습니다.</div>
|
||||
<div className="mb-2 text-lg text-destructive">웹타입 정보를 불러오는데 실패했습니다.</div>
|
||||
<Link href="/admin/standards">
|
||||
<Button variant="outline">목록으로 돌아가기</Button>
|
||||
</Link>
|
||||
|
|
@ -80,7 +80,7 @@ export default function WebTypeDetailPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none px-4 py-8 space-y-8">
|
||||
{/* 헤더 */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ export default function NewWebTypePage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none px-4 py-8 space-y-8">
|
||||
{/* 헤더 */}
|
||||
<div className="mb-6 flex items-center gap-4">
|
||||
|
|
@ -186,7 +186,7 @@ export default function NewWebTypePage() {
|
|||
{/* 웹타입 코드 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="web_type">
|
||||
웹타입 코드 <span className="text-red-500">*</span>
|
||||
웹타입 코드 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="web_type"
|
||||
|
|
@ -202,7 +202,7 @@ export default function NewWebTypePage() {
|
|||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="type_name">
|
||||
웹타입명 <span className="text-red-500">*</span>
|
||||
웹타입명 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="type_name"
|
||||
|
|
@ -225,7 +225,7 @@ export default function NewWebTypePage() {
|
|||
{/* 카테고리 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="category">
|
||||
카테고리 <span className="text-red-500">*</span>
|
||||
카테고리 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select value={formData.category} onValueChange={(value) => handleInputChange("category", value)}>
|
||||
<SelectTrigger>
|
||||
|
|
@ -244,7 +244,7 @@ export default function NewWebTypePage() {
|
|||
{/* 연결된 컴포넌트 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="component_name">
|
||||
연결된 컴포넌트 <span className="text-red-500">*</span>
|
||||
연결된 컴포넌트 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.component_name || "TextWidget"}
|
||||
|
|
@ -296,15 +296,15 @@ export default function NewWebTypePage() {
|
|||
</SelectContent>
|
||||
</Select>
|
||||
{formData.config_panel && (
|
||||
<div className="rounded-lg border border-green-200 bg-green-50 p-3">
|
||||
<div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-green-500"></div>
|
||||
<span className="text-sm font-medium text-green-700">
|
||||
<div className="h-2 w-2 rounded-full bg-emerald-500"></div>
|
||||
<span className="text-sm font-medium text-emerald-700">
|
||||
현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
|
||||
</span>
|
||||
</div>
|
||||
{getConfigPanelInfo(formData.config_panel)?.description && (
|
||||
<p className="mt-1 ml-4 text-xs text-green-600">
|
||||
<p className="mt-1 ml-4 text-xs text-emerald-600">
|
||||
{getConfigPanelInfo(formData.config_panel)?.description}
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -385,7 +385,7 @@ export default function NewWebTypePage() {
|
|||
rows={4}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
{jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
|
||||
{jsonErrors.default_config && <p className="text-xs text-destructive">{jsonErrors.default_config}</p>}
|
||||
</div>
|
||||
|
||||
{/* 유효성 검사 규칙 */}
|
||||
|
|
@ -399,7 +399,7 @@ export default function NewWebTypePage() {
|
|||
rows={4}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
{jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
|
||||
{jsonErrors.validation_rules && <p className="text-xs text-destructive">{jsonErrors.validation_rules}</p>}
|
||||
</div>
|
||||
|
||||
{/* 기본 스타일 */}
|
||||
|
|
@ -413,7 +413,7 @@ export default function NewWebTypePage() {
|
|||
rows={4}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
{jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
|
||||
{jsonErrors.default_style && <p className="text-xs text-destructive">{jsonErrors.default_style}</p>}
|
||||
</div>
|
||||
|
||||
{/* 입력 속성 */}
|
||||
|
|
@ -427,7 +427,7 @@ export default function NewWebTypePage() {
|
|||
rows={4}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
{jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
|
||||
{jsonErrors.input_properties && <p className="text-xs text-destructive">{jsonErrors.input_properties}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -448,8 +448,8 @@ export default function NewWebTypePage() {
|
|||
|
||||
{/* 에러 메시지 */}
|
||||
{createError && (
|
||||
<div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
|
||||
<p className="text-red-600">
|
||||
<div className="mt-4 rounded-md border border-destructive/20 bg-destructive/10 p-4">
|
||||
<p className="text-destructive">
|
||||
생성 중 오류가 발생했습니다: {createError instanceof Error ? createError.message : "알 수 없는 오류"}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import React, { useState, useMemo } from "react";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
AlertDialog,
|
||||
|
|
@ -20,9 +18,11 @@ import {
|
|||
} from "@/components/ui/alert-dialog";
|
||||
import { toast } from "sonner";
|
||||
import { showErrorToast } from "@/lib/utils/toastUtils";
|
||||
import { Plus, Search, Edit, Trash2, Eye, Filter, RotateCcw, Settings, SortAsc, SortDesc } from "lucide-react";
|
||||
import { Plus, Search, Edit, Trash2, Eye, RotateCcw, SortAsc, SortDesc } from "lucide-react";
|
||||
import { useWebTypes } from "@/hooks/admin/useWebTypes";
|
||||
import Link from "next/link";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
import type { WebTypeStandard } from "@/hooks/admin/useWebTypes";
|
||||
|
||||
export default function WebTypesManagePage() {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
|
@ -31,35 +31,29 @@ export default function WebTypesManagePage() {
|
|||
const [sortField, setSortField] = useState<string>("sort_order");
|
||||
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
|
||||
|
||||
// 웹타입 데이터 조회
|
||||
const { webTypes, isLoading, error, deleteWebType, isDeleting, deleteError, refetch } = useWebTypes({
|
||||
active: activeFilter === "all" ? undefined : activeFilter,
|
||||
search: searchTerm || undefined,
|
||||
category: categoryFilter === "all" ? undefined : categoryFilter,
|
||||
});
|
||||
|
||||
// 카테고리 목록 생성
|
||||
const categories = useMemo(() => {
|
||||
const uniqueCategories = Array.from(new Set(webTypes.map((wt) => wt.category).filter(Boolean)));
|
||||
return uniqueCategories.sort();
|
||||
}, [webTypes]);
|
||||
|
||||
// 필터링 및 정렬된 데이터
|
||||
const filteredAndSortedWebTypes = useMemo(() => {
|
||||
let filtered = [...webTypes];
|
||||
|
||||
// 정렬
|
||||
filtered.sort((a, b) => {
|
||||
let aValue: any = a[sortField as keyof typeof a];
|
||||
let bValue: any = b[sortField as keyof typeof b];
|
||||
|
||||
// 숫자 필드 처리
|
||||
if (sortField === "sort_order") {
|
||||
aValue = aValue || 0;
|
||||
bValue = bValue || 0;
|
||||
}
|
||||
|
||||
// 문자열 필드 처리
|
||||
if (typeof aValue === "string") {
|
||||
aValue = aValue.toLowerCase();
|
||||
}
|
||||
|
|
@ -75,17 +69,6 @@ export default function WebTypesManagePage() {
|
|||
return filtered;
|
||||
}, [webTypes, sortField, sortDirection]);
|
||||
|
||||
// 정렬 변경 핸들러
|
||||
const handleSort = (field: string) => {
|
||||
if (sortField === field) {
|
||||
setSortDirection(sortDirection === "asc" ? "desc" : "asc");
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제 핸들러
|
||||
const handleDelete = async (webType: string, typeName: string) => {
|
||||
try {
|
||||
await deleteWebType(webType);
|
||||
|
|
@ -95,7 +78,6 @@ export default function WebTypesManagePage() {
|
|||
}
|
||||
};
|
||||
|
||||
// 필터 초기화
|
||||
const resetFilters = () => {
|
||||
setSearchTerm("");
|
||||
setCategoryFilter("all");
|
||||
|
|
@ -104,267 +86,266 @@ export default function WebTypesManagePage() {
|
|||
setSortDirection("asc");
|
||||
};
|
||||
|
||||
// 로딩 상태
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-lg">웹타입 목록을 불러오는 중...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// 삭제 AlertDialog 렌더 헬퍼
|
||||
const renderDeleteDialog = (wt: WebTypeStandard) => (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
'{wt.type_name}' 웹타입을 삭제하시겠습니까?
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleDelete(wt.web_type, wt.type_name)}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? "삭제 중..." : "삭제"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
|
||||
// 에러 상태
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mb-2 text-lg text-destructive">웹타입 목록을 불러오는데 실패했습니다.</div>
|
||||
<Button onClick={() => refetch()} variant="outline">
|
||||
const columns: RDVColumn<WebTypeStandard>[] = [
|
||||
{
|
||||
key: "sort_order",
|
||||
label: "순서",
|
||||
width: "80px",
|
||||
render: (_val, wt) => <span className="font-mono">{wt.sort_order || 0}</span>,
|
||||
},
|
||||
{
|
||||
key: "web_type",
|
||||
label: "웹타입 코드",
|
||||
hideOnMobile: true,
|
||||
render: (_val, wt) => <span className="font-mono">{wt.web_type}</span>,
|
||||
},
|
||||
{
|
||||
key: "type_name",
|
||||
label: "웹타입명",
|
||||
render: (_val, wt) => (
|
||||
<div>
|
||||
<div className="font-medium">{wt.type_name}</div>
|
||||
{wt.type_name_eng && (
|
||||
<div className="text-xs text-muted-foreground">{wt.type_name_eng}</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "category",
|
||||
label: "카테고리",
|
||||
render: (_val, wt) => <Badge variant="secondary">{wt.category}</Badge>,
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "설명",
|
||||
hideOnMobile: true,
|
||||
render: (_val, wt) => (
|
||||
<span className="max-w-xs truncate">{wt.description || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
label: "상태",
|
||||
render: (_val, wt) => (
|
||||
<Badge variant={wt.is_active === "Y" ? "default" : "secondary"}>
|
||||
{wt.is_active === "Y" ? "활성화" : "비활성화"}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "updated_date",
|
||||
label: "최종 수정일",
|
||||
hideOnMobile: true,
|
||||
render: (_val, wt) => (
|
||||
<span className="text-muted-foreground">
|
||||
{wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const cardFields: RDVCardField<WebTypeStandard>[] = [
|
||||
{
|
||||
label: "카테고리",
|
||||
render: (wt) => <Badge variant="secondary">{wt.category}</Badge>,
|
||||
},
|
||||
{
|
||||
label: "순서",
|
||||
render: (wt) => String(wt.sort_order || 0),
|
||||
},
|
||||
{
|
||||
label: "설명",
|
||||
render: (wt) => wt.description || "-",
|
||||
hideEmpty: true,
|
||||
},
|
||||
{
|
||||
label: "수정일",
|
||||
render: (wt) =>
|
||||
wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 페이지 헤더 */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">웹타입 관리</h1>
|
||||
<p className="text-sm text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다</p>
|
||||
</div>
|
||||
<Link href="/admin/standards/new">
|
||||
<Button className="w-full sm:w-auto">
|
||||
<Plus className="mr-2 h-4 w-4" />새 웹타입 추가
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 에러 상태 */}
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
|
||||
<p className="text-sm font-semibold text-destructive">웹타입 목록을 불러오는데 실패했습니다.</p>
|
||||
<Button onClick={() => refetch()} variant="outline" size="sm" className="mt-2">
|
||||
다시 시도
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="w-full max-w-none px-4 py-8 space-y-8">
|
||||
{/* 페이지 제목 */}
|
||||
<div className="flex items-center justify-between bg-background rounded-lg shadow-sm border p-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-foreground">웹타입 관리</h1>
|
||||
<p className="mt-2 text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다</p>
|
||||
{/* 검색 툴바 */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="웹타입명, 설명 검색..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<Link href="/admin/standards/new">
|
||||
<Button className="shadow-sm">
|
||||
<Plus className="mr-2 h-4 w-4" />새 웹타입 추가
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 필터 및 검색 */}
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<Filter className="h-5 w-5 text-muted-foreground" />
|
||||
필터 및 검색
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{/* 검색 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="웹타입명, 설명 검색..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
||||
<SelectTrigger className="h-10 w-full sm:w-[160px]">
|
||||
<SelectValue placeholder="카테고리 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체 카테고리</SelectItem>
|
||||
{categories.map((category) => (
|
||||
<SelectItem key={category} value={category}>
|
||||
{category}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 카테고리 필터 */}
|
||||
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="카테고리 선택" />
|
||||
</SelectTrigger>
|
||||
<Select value={activeFilter} onValueChange={setActiveFilter}>
|
||||
<SelectTrigger className="h-10 w-full sm:w-[160px]">
|
||||
<SelectValue placeholder="상태 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체</SelectItem>
|
||||
<SelectItem value="Y">활성화</SelectItem>
|
||||
<SelectItem value="N">비활성화</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 정렬 선택 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Select value={sortField} onValueChange={(v) => { setSortField(v); }}>
|
||||
<SelectTrigger className="h-10 w-full sm:w-[140px]">
|
||||
<SelectValue placeholder="정렬 기준" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체 카테고리</SelectItem>
|
||||
{categories.map((category) => (
|
||||
<SelectItem key={category} value={category}>
|
||||
{category}
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectItem value="sort_order">순서</SelectItem>
|
||||
<SelectItem value="web_type">웹타입 코드</SelectItem>
|
||||
<SelectItem value="type_name">웹타입명</SelectItem>
|
||||
<SelectItem value="category">카테고리</SelectItem>
|
||||
<SelectItem value="is_active">상태</SelectItem>
|
||||
<SelectItem value="updated_date">수정일</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 활성화 상태 필터 */}
|
||||
<Select value={activeFilter} onValueChange={setActiveFilter}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="상태 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체</SelectItem>
|
||||
<SelectItem value="Y">활성화</SelectItem>
|
||||
<SelectItem value="N">비활성화</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 초기화 버튼 */}
|
||||
<Button variant="outline" onClick={resetFilters}>
|
||||
<RotateCcw className="mr-2 h-4 w-4" />
|
||||
초기화
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setSortDirection(sortDirection === "asc" ? "desc" : "asc")}
|
||||
className="h-10 w-10 shrink-0"
|
||||
title={sortDirection === "asc" ? "오름차순" : "내림차순"}
|
||||
>
|
||||
{sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 결과 통계 */}
|
||||
<div className="bg-background rounded-lg border px-4 py-3">
|
||||
<p className="text-foreground text-sm font-medium">총 {filteredAndSortedWebTypes.length}개의 웹타입이 있습니다.</p>
|
||||
</div>
|
||||
|
||||
{/* 웹타입 목록 테이블 */}
|
||||
<div className="bg-card shadow-sm">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-background">
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("sort_order")}>
|
||||
<div className="flex items-center gap-2">
|
||||
순서
|
||||
{sortField === "sort_order" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("web_type")}>
|
||||
<div className="flex items-center gap-2">
|
||||
웹타입 코드
|
||||
{sortField === "web_type" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("type_name")}>
|
||||
<div className="flex items-center gap-2">
|
||||
웹타입명
|
||||
{sortField === "type_name" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("category")}>
|
||||
<div className="flex items-center gap-2">
|
||||
카테고리
|
||||
{sortField === "category" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("component_name")}>
|
||||
<div className="flex items-center gap-2">
|
||||
연결된 컴포넌트
|
||||
{sortField === "component_name" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("config_panel")}>
|
||||
<div className="flex items-center gap-2">
|
||||
설정 패널
|
||||
{sortField === "config_panel" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("is_active")}>
|
||||
<div className="flex items-center gap-2">
|
||||
상태
|
||||
{sortField === "is_active" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("updated_date")}>
|
||||
<div className="flex items-center gap-2">
|
||||
최종 수정일
|
||||
{sortField === "updated_date" &&
|
||||
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold text-center">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredAndSortedWebTypes.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={10} className="py-8 text-center">
|
||||
조건에 맞는 웹타입이 없습니다.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredAndSortedWebTypes.map((webType) => (
|
||||
<TableRow key={webType.web_type} className="bg-background transition-colors hover:bg-muted/50">
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{webType.sort_order || 0}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{webType.web_type}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 font-medium text-sm">
|
||||
{webType.type_name}
|
||||
{webType.type_name_eng && (
|
||||
<div className="text-muted-foreground text-xs">{webType.type_name_eng}</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<Badge variant="secondary">{webType.category}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 max-w-xs truncate text-sm">{webType.description || "-"}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
{webType.component_name || "TextWidget"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
{webType.config_panel === "none" || !webType.config_panel ? "기본 설정" : webType.config_panel}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<Badge variant={webType.is_active === "Y" ? "default" : "secondary"}>
|
||||
{webType.is_active === "Y" ? "활성화" : "비활성화"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-muted-foreground text-sm">
|
||||
{webType.updated_date ? new Date(webType.updated_date).toLocaleDateString("ko-KR") : "-"}
|
||||
</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link href={`/admin/standards/${webType.web_type}`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/admin/standards/${webType.web_type}/edit`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
'{webType.type_name}' 웹타입을 삭제하시겠습니까?
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleDelete(webType.web_type, webType.type_name)}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? "삭제 중..." : "삭제"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<Button variant="outline" onClick={resetFilters} className="h-10 w-full sm:w-auto">
|
||||
<RotateCcw className="mr-2 h-4 w-4" />
|
||||
초기화
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 결과 수 */}
|
||||
<div className="text-sm text-muted-foreground">
|
||||
총 <span className="font-semibold text-foreground">{filteredAndSortedWebTypes.length}</span>개의 웹타입
|
||||
</div>
|
||||
|
||||
{/* 삭제 에러 */}
|
||||
{deleteError && (
|
||||
<div className="mt-4 rounded-md border border-destructive/30 bg-destructive/10 p-4">
|
||||
<p className="text-destructive">
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
|
||||
<p className="text-sm text-destructive">
|
||||
삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ResponsiveDataView<WebTypeStandard>
|
||||
data={filteredAndSortedWebTypes}
|
||||
columns={columns}
|
||||
keyExtractor={(wt) => wt.web_type}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="조건에 맞는 웹타입이 없습니다."
|
||||
skeletonCount={6}
|
||||
cardTitle={(wt) => wt.type_name}
|
||||
cardSubtitle={(wt) => (
|
||||
<>
|
||||
{wt.type_name_eng && (
|
||||
<span className="text-xs text-muted-foreground">{wt.type_name_eng} / </span>
|
||||
)}
|
||||
<span className="font-mono text-xs text-muted-foreground">{wt.web_type}</span>
|
||||
</>
|
||||
)}
|
||||
cardHeaderRight={(wt) => (
|
||||
<Badge variant={wt.is_active === "Y" ? "default" : "secondary"} className="shrink-0">
|
||||
{wt.is_active === "Y" ? "활성화" : "비활성화"}
|
||||
</Badge>
|
||||
)}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="140px"
|
||||
renderActions={(wt) => (
|
||||
<>
|
||||
<Link href={`/admin/standards/${wt.web_type}`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/admin/standards/${wt.web_type}/edit`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
{renderDeleteDialog(wt)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,504 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Plus, Pencil, Trash2, Search, RefreshCw } from "lucide-react";
|
||||
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
||||
import {
|
||||
SystemNotice,
|
||||
CreateSystemNoticePayload,
|
||||
getSystemNotices,
|
||||
createSystemNotice,
|
||||
updateSystemNotice,
|
||||
deleteSystemNotice,
|
||||
} from "@/lib/api/systemNotice";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
function getPriorityLabel(priority: number): { label: string; variant: "default" | "secondary" | "destructive" | "outline" } {
|
||||
if (priority >= 3) return { label: "높음", variant: "destructive" };
|
||||
if (priority === 2) return { label: "보통", variant: "default" };
|
||||
return { label: "낮음", variant: "secondary" };
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
if (!dateStr) return "-";
|
||||
return new Date(dateStr).toLocaleDateString("ko-KR", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
const EMPTY_FORM: CreateSystemNoticePayload = {
|
||||
title: "",
|
||||
content: "",
|
||||
is_active: true,
|
||||
priority: 1,
|
||||
};
|
||||
|
||||
export default function SystemNoticesPage() {
|
||||
const [notices, setNotices] = useState<SystemNotice[]>([]);
|
||||
const [filteredNotices, setFilteredNotices] = useState<SystemNotice[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [editTarget, setEditTarget] = useState<SystemNotice | null>(null);
|
||||
const [formData, setFormData] = useState<CreateSystemNoticePayload>(EMPTY_FORM);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const [deleteTarget, setDeleteTarget] = useState<SystemNotice | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const loadNotices = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setErrorMsg(null);
|
||||
const result = await getSystemNotices();
|
||||
if (result.success && result.data) {
|
||||
setNotices(result.data);
|
||||
} else {
|
||||
setErrorMsg(result.message || "공지사항 목록을 불러오는 데 실패했습니다.");
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadNotices();
|
||||
}, [loadNotices]);
|
||||
|
||||
useEffect(() => {
|
||||
let result = [...notices];
|
||||
|
||||
if (statusFilter !== "all") {
|
||||
const isActive = statusFilter === "active";
|
||||
result = result.filter((n) => n.is_active === isActive);
|
||||
}
|
||||
|
||||
if (searchText.trim()) {
|
||||
const keyword = searchText.toLowerCase();
|
||||
result = result.filter(
|
||||
(n) =>
|
||||
n.title.toLowerCase().includes(keyword) ||
|
||||
n.content.toLowerCase().includes(keyword)
|
||||
);
|
||||
}
|
||||
|
||||
setFilteredNotices(result);
|
||||
}, [notices, searchText, statusFilter]);
|
||||
|
||||
const handleOpenCreate = () => {
|
||||
setEditTarget(null);
|
||||
setFormData(EMPTY_FORM);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleOpenEdit = (notice: SystemNotice) => {
|
||||
setEditTarget(notice);
|
||||
setFormData({
|
||||
title: notice.title,
|
||||
content: notice.content,
|
||||
is_active: notice.is_active,
|
||||
priority: notice.priority,
|
||||
});
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formData.title.trim()) {
|
||||
alert("제목을 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
if (!formData.content.trim()) {
|
||||
alert("내용을 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
let result;
|
||||
|
||||
if (editTarget) {
|
||||
result = await updateSystemNotice(editTarget.id, formData);
|
||||
} else {
|
||||
result = await createSystemNotice(formData);
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
setIsFormOpen(false);
|
||||
await loadNotices();
|
||||
} else {
|
||||
alert(result.message || "저장에 실패했습니다.");
|
||||
}
|
||||
setIsSaving(false);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
setIsDeleting(true);
|
||||
const result = await deleteSystemNotice(deleteTarget.id);
|
||||
if (result.success) {
|
||||
setDeleteTarget(null);
|
||||
await loadNotices();
|
||||
} else {
|
||||
alert(result.message || "삭제에 실패했습니다.");
|
||||
}
|
||||
setIsDeleting(false);
|
||||
};
|
||||
|
||||
const columns: RDVColumn<SystemNotice>[] = [
|
||||
{
|
||||
key: "title",
|
||||
label: "제목",
|
||||
render: (_val, notice) => (
|
||||
<span className="font-medium">{notice.title}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
label: "상태",
|
||||
width: "100px",
|
||||
render: (_val, notice) => (
|
||||
<Badge variant={notice.is_active ? "default" : "secondary"}>
|
||||
{notice.is_active ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "priority",
|
||||
label: "우선순위",
|
||||
width: "100px",
|
||||
render: (_val, notice) => {
|
||||
const p = getPriorityLabel(notice.priority);
|
||||
return <Badge variant={p.variant}>{p.label}</Badge>;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "created_by",
|
||||
label: "작성자",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (_val, notice) => (
|
||||
<span className="text-muted-foreground">{notice.created_by || "-"}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "created_at",
|
||||
label: "작성일",
|
||||
width: "120px",
|
||||
hideOnMobile: true,
|
||||
render: (_val, notice) => (
|
||||
<span className="text-muted-foreground">{formatDate(notice.created_at)}</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const cardFields: RDVCardField<SystemNotice>[] = [
|
||||
{
|
||||
label: "작성자",
|
||||
render: (notice) => notice.created_by || "-",
|
||||
},
|
||||
{
|
||||
label: "작성일",
|
||||
render: (notice) => formatDate(notice.created_at),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-background">
|
||||
<div className="space-y-6 p-6">
|
||||
{/* 페이지 헤더 */}
|
||||
<div className="space-y-2 border-b pb-4">
|
||||
<h1 className="text-3xl font-bold tracking-tight">시스템 공지사항</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
시스템 사용자에게 전달할 공지사항을 관리합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 에러 메시지 */}
|
||||
{errorMsg && (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-semibold text-destructive">오류가 발생했습니다</p>
|
||||
<button
|
||||
onClick={() => setErrorMsg(null)}
|
||||
className="text-destructive transition-colors hover:text-destructive/80"
|
||||
aria-label="에러 메시지 닫기"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<p className="mt-1.5 text-sm text-destructive/80">{errorMsg}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 검색 툴바 */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="w-full sm:w-[160px]">
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="상태 필터" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체</SelectItem>
|
||||
<SelectItem value="active">활성</SelectItem>
|
||||
<SelectItem value="inactive">비활성</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="제목 또는 내용으로 검색..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
총 <span className="font-semibold text-foreground">{filteredNotices.length}</span> 건
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={loadNotices}
|
||||
aria-label="새로고침"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button className="h-10 gap-2 text-sm font-medium" onClick={handleOpenCreate}>
|
||||
<Plus className="h-4 w-4" />
|
||||
등록
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ResponsiveDataView<SystemNotice>
|
||||
data={filteredNotices}
|
||||
columns={columns}
|
||||
keyExtractor={(n) => String(n.id)}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="공지사항이 없습니다."
|
||||
skeletonCount={5}
|
||||
cardTitle={(n) => n.title}
|
||||
cardHeaderRight={(n) => (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleOpenEdit(n)}
|
||||
aria-label="수정"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => setDeleteTarget(n)}
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
cardSubtitle={(n) => {
|
||||
const p = getPriorityLabel(n.priority);
|
||||
return (
|
||||
<span className="flex flex-wrap gap-2 pt-1">
|
||||
<Badge variant={n.is_active ? "default" : "secondary"}>
|
||||
{n.is_active ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
<Badge variant={p.variant}>{p.label}</Badge>
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="관리"
|
||||
actionsWidth="120px"
|
||||
renderActions={(notice) => (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleOpenEdit(notice)}
|
||||
aria-label="수정"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => setDeleteTarget(notice)}
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 등록/수정 모달 */}
|
||||
<Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[540px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{editTarget ? "공지사항 수정" : "공지사항 등록"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
{editTarget ? "공지사항 내용을 수정합니다." : "새로운 공지사항을 등록합니다."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="notice-title" className="text-xs sm:text-sm">
|
||||
제목 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="notice-title"
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
|
||||
placeholder="공지사항 제목을 입력하세요"
|
||||
className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="notice-content" className="text-xs sm:text-sm">
|
||||
내용 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Textarea
|
||||
id="notice-content"
|
||||
value={formData.content}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, content: e.target.value }))}
|
||||
placeholder="공지사항 내용을 입력하세요"
|
||||
className="mt-1 min-h-[120px] text-xs sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="notice-priority" className="text-xs sm:text-sm">
|
||||
우선순위
|
||||
</Label>
|
||||
<Select
|
||||
value={String(formData.priority)}
|
||||
onValueChange={(val) =>
|
||||
setFormData((prev) => ({ ...prev, priority: Number(val) }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="notice-priority" className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue placeholder="우선순위 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">낮음</SelectItem>
|
||||
<SelectItem value="2">보통</SelectItem>
|
||||
<SelectItem value="3">높음</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="notice-active"
|
||||
checked={formData.is_active}
|
||||
onCheckedChange={(checked) =>
|
||||
setFormData((prev) => ({ ...prev, is_active: !!checked }))
|
||||
}
|
||||
/>
|
||||
<Label htmlFor="notice-active" className="cursor-pointer text-xs sm:text-sm">
|
||||
활성화 (체크 시 공지사항이 사용자에게 표시됩니다)
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsFormOpen(false)}
|
||||
disabled={isSaving}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
{isSaving ? "저장 중..." : "저장"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 삭제 확인 모달 */}
|
||||
<Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[440px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">공지사항 삭제</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
아래 공지사항을 삭제하시겠습니까?
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
<br />
|
||||
<span className="mt-2 block font-medium text-foreground">
|
||||
"{deleteTarget?.title}"
|
||||
</span>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setDeleteTarget(null)}
|
||||
disabled={isDeleting}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
{isDeleting ? "삭제 중..." : "삭제"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -142,28 +142,28 @@ export default function CollectionManagementPage() {
|
|||
|
||||
const getStatusBadge = (isActive: string) => {
|
||||
return isActive === "Y" ? (
|
||||
<Badge className="bg-green-100 text-green-800">활성</Badge>
|
||||
<Badge className="bg-emerald-100 text-emerald-800">활성</Badge>
|
||||
) : (
|
||||
<Badge className="bg-red-100 text-red-800">비활성</Badge>
|
||||
<Badge className="bg-destructive/10 text-red-800">비활성</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getTypeBadge = (type: string) => {
|
||||
const option = collectionTypeOptions.find(opt => opt.value === type);
|
||||
const colors = {
|
||||
full: "bg-blue-100 text-blue-800",
|
||||
full: "bg-primary/10 text-primary",
|
||||
incremental: "bg-purple-100 text-purple-800",
|
||||
delta: "bg-orange-100 text-orange-800",
|
||||
delta: "bg-amber-100 text-orange-800",
|
||||
};
|
||||
return (
|
||||
<Badge className={colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800"}>
|
||||
<Badge className={colors[type as keyof typeof colors] || "bg-muted text-foreground"}>
|
||||
{option?.label || type}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none px-4 py-8 space-y-8">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
|
|||
|
|
@ -51,8 +51,8 @@ export default function DataFlowEditPage() {
|
|||
return (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
|
||||
<p className="text-gray-500">관계도 정보를 불러오는 중...</p>
|
||||
<div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
|
||||
<p className="text-muted-foreground">관계도 정보를 불러오는 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -68,16 +68,16 @@ export default function DataFlowEditPage() {
|
|||
<span>목록으로</span>
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">📊 관계도 편집</h1>
|
||||
<p className="mt-1 text-gray-600">
|
||||
<span className="font-medium text-blue-600">{diagramName}</span> 관계도를 편집하고 있습니다
|
||||
<h1 className="text-2xl font-bold text-foreground">📊 관계도 편집</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
<span className="font-medium text-primary">{diagramName}</span> 관계도를 편집하고 있습니다
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 데이터플로우 디자이너 */}
|
||||
<div className="rounded-lg border border-gray-200 bg-white">
|
||||
<div className="rounded-lg border border-border bg-white">
|
||||
<DataFlowDesigner
|
||||
key={diagramId}
|
||||
selectedDiagram={diagramName}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ export default function NodeEditorPage() {
|
|||
}, [router]);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center bg-gray-50">
|
||||
<div className="text-gray-500">제어 관리 페이지로 이동중...</div>
|
||||
<div className="flex h-screen items-center justify-center bg-muted">
|
||||
<div className="text-muted-foreground">제어 관리 페이지로 이동중...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -528,14 +528,14 @@ export default function I18nPage() {
|
|||
? "공통"
|
||||
: companies.find((c) => c.code === row.original.companyCode)?.name || row.original.companyCode;
|
||||
|
||||
return <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{companyName}</span>;
|
||||
return <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{companyName}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "menuName",
|
||||
header: "메뉴명",
|
||||
cell: ({ row }: any) => (
|
||||
<span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.menuName}</span>
|
||||
<span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.menuName}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
|
|
@ -543,8 +543,8 @@ export default function I18nPage() {
|
|||
header: "언어 키",
|
||||
cell: ({ row }: any) => (
|
||||
<div
|
||||
className={`cursor-pointer rounded p-1 hover:bg-gray-100 ${
|
||||
row.original.isActive === "N" ? "text-gray-400" : ""
|
||||
className={`cursor-pointer rounded p-1 hover:bg-muted ${
|
||||
row.original.isActive === "N" ? "text-muted-foreground/70" : ""
|
||||
}`}
|
||||
onDoubleClick={() => handleEditKey(row.original)}
|
||||
>
|
||||
|
|
@ -556,7 +556,7 @@ export default function I18nPage() {
|
|||
accessorKey: "description",
|
||||
header: "설명",
|
||||
cell: ({ row }: any) => (
|
||||
<span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.description}</span>
|
||||
<span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.description}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
|
|
@ -567,8 +567,8 @@ export default function I18nPage() {
|
|||
onClick={() => handleToggleStatus(row.original.keyId)}
|
||||
className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
|
||||
row.original.isActive === "Y"
|
||||
? "bg-green-100 text-green-800 hover:bg-green-200"
|
||||
: "bg-gray-100 text-gray-800 hover:bg-gray-200"
|
||||
? "bg-emerald-100 text-emerald-800 hover:bg-emerald-200"
|
||||
: "bg-muted text-foreground hover:bg-muted/80"
|
||||
}`}
|
||||
>
|
||||
{row.original.isActive === "Y" ? "활성" : "비활성"}
|
||||
|
|
@ -605,8 +605,8 @@ export default function I18nPage() {
|
|||
header: "언어 코드",
|
||||
cell: ({ row }: any) => (
|
||||
<div
|
||||
className={`cursor-pointer rounded p-1 hover:bg-gray-100 ${
|
||||
row.original.isActive === "N" ? "text-gray-400" : ""
|
||||
className={`cursor-pointer rounded p-1 hover:bg-muted ${
|
||||
row.original.isActive === "N" ? "text-muted-foreground/70" : ""
|
||||
}`}
|
||||
onDoubleClick={() => handleEditLanguage(row.original)}
|
||||
>
|
||||
|
|
@ -618,14 +618,14 @@ export default function I18nPage() {
|
|||
accessorKey: "langName",
|
||||
header: "언어명 (영문)",
|
||||
cell: ({ row }: any) => (
|
||||
<span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.langName}</span>
|
||||
<span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.langName}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "langNative",
|
||||
header: "언어명 (원어)",
|
||||
cell: ({ row }: any) => (
|
||||
<span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.langNative}</span>
|
||||
<span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.langNative}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
|
|
@ -636,8 +636,8 @@ export default function I18nPage() {
|
|||
onClick={() => handleToggleLanguageStatus(row.original.langCode)}
|
||||
className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
|
||||
row.original.isActive === "Y"
|
||||
? "bg-green-100 text-green-800 hover:bg-green-200"
|
||||
: "bg-gray-100 text-gray-800 hover:bg-gray-200"
|
||||
? "bg-emerald-100 text-emerald-800 hover:bg-emerald-200"
|
||||
: "bg-muted text-foreground hover:bg-muted/80"
|
||||
}`}
|
||||
>
|
||||
{row.original.isActive === "Y" ? "활성" : "비활성"}
|
||||
|
|
@ -651,7 +651,7 @@ export default function I18nPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none px-4 py-8">
|
||||
<div className="container mx-auto p-2">
|
||||
{/* 탭 네비게이션 */}
|
||||
|
|
@ -659,7 +659,7 @@ export default function I18nPage() {
|
|||
<button
|
||||
onClick={() => setActiveTab("keys")}
|
||||
className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
|
||||
activeTab === "keys" ? "bg-accent0 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||||
activeTab === "keys" ? "bg-accent0 text-white" : "bg-muted text-foreground hover:bg-muted/80"
|
||||
}`}
|
||||
>
|
||||
다국어 키 관리
|
||||
|
|
@ -667,7 +667,7 @@ export default function I18nPage() {
|
|||
<button
|
||||
onClick={() => setActiveTab("languages")}
|
||||
className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
|
||||
activeTab === "languages" ? "bg-accent0 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||||
activeTab === "languages" ? "bg-accent0 text-white" : "bg-muted text-foreground hover:bg-muted/80"
|
||||
}`}
|
||||
>
|
||||
언어 관리
|
||||
|
|
@ -854,7 +854,7 @@ export default function I18nPage() {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-64 items-center justify-center text-gray-500">
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">
|
||||
<div className="text-center">
|
||||
<div className="mb-2 text-lg font-medium">언어 키를 선택하세요</div>
|
||||
<div className="text-sm">좌측 목록에서 편집할 언어 키를 클릭하세요</div>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import {
|
|||
ChevronsUpDown,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { ResponsiveSplitPanel } from "@/components/common/ResponsiveSplitPanel";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
|
||||
import { toast } from "sonner";
|
||||
|
|
@ -1409,9 +1410,8 @@ export default function TableManagementPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex h-full flex-1 gap-6 overflow-hidden">
|
||||
{/* 좌측 사이드바: 테이블 목록 (20%) */}
|
||||
<div className="flex h-full w-[20%] flex-col border-r pr-4">
|
||||
<ResponsiveSplitPanel
|
||||
left={
|
||||
<div className="flex h-full flex-col space-y-4">
|
||||
{/* 검색 */}
|
||||
<div className="flex-shrink-0">
|
||||
|
|
@ -1530,10 +1530,8 @@ export default function TableManagementPage() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 우측 메인 영역: 컬럼 타입 관리 (80%) */}
|
||||
<div className="flex h-full w-[80%] flex-col overflow-hidden pl-0">
|
||||
}
|
||||
right={
|
||||
<div className="flex h-full flex-col overflow-hidden">
|
||||
{!selectedTable ? (
|
||||
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border">
|
||||
|
|
@ -1878,7 +1876,7 @@ export default function TableManagementPage() {
|
|||
{referenceTableColumns[column.referenceTable]?.map((refCol) => (
|
||||
<CommandItem
|
||||
key={refCol.columnName}
|
||||
value={`${refCol.columnLabel || ""} ${refCol.columnName}`}
|
||||
value={`${refCol.displayName || ""} ${refCol.columnName}`}
|
||||
onSelect={() => {
|
||||
handleDetailSettingsChange(
|
||||
column.columnName,
|
||||
|
|
@ -1905,9 +1903,9 @@ export default function TableManagementPage() {
|
|||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{refCol.columnName}</span>
|
||||
{refCol.columnLabel && (
|
||||
{refCol.displayName && (
|
||||
<span className="text-muted-foreground text-[10px]">
|
||||
{refCol.columnLabel}
|
||||
{refCol.displayName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -2006,8 +2004,14 @@ export default function TableManagementPage() {
|
|||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
leftTitle="테이블 목록"
|
||||
leftWidth={20}
|
||||
minLeftWidth={10}
|
||||
maxLeftWidth={35}
|
||||
height="100%"
|
||||
className="flex-1 overflow-hidden"
|
||||
/>
|
||||
|
||||
{/* DDL 모달 컴포넌트들 */}
|
||||
{isSuperAdmin && (
|
||||
|
|
|
|||
|
|
@ -120,12 +120,12 @@ export default function TemplatesManagePage() {
|
|||
|
||||
// 간단한 아이콘 매핑 (실제로는 더 복잡한 시스템 필요)
|
||||
const iconMap: Record<string, JSX.Element> = {
|
||||
table: <div className="h-4 w-4 border border-gray-400" />,
|
||||
"mouse-pointer": <div className="h-4 w-4 rounded bg-blue-500" />,
|
||||
upload: <div className="h-4 w-4 border-2 border-dashed border-gray-400" />,
|
||||
table: <div className="h-4 w-4 border border-input" />,
|
||||
"mouse-pointer": <div className="h-4 w-4 rounded bg-primary" />,
|
||||
upload: <div className="h-4 w-4 border-2 border-dashed border-input" />,
|
||||
};
|
||||
|
||||
return iconMap[iconName] || <div className="h-4 w-4 rounded bg-gray-300" />;
|
||||
return iconMap[iconName] || <div className="h-4 w-4 rounded bg-muted/60" />;
|
||||
};
|
||||
|
||||
if (error) {
|
||||
|
|
@ -133,7 +133,7 @@ export default function TemplatesManagePage() {
|
|||
<div className="w-full max-w-none px-4 py-8">
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-8">
|
||||
<p className="mb-4 text-red-600">템플릿 목록을 불러오는 중 오류가 발생했습니다.</p>
|
||||
<p className="mb-4 text-destructive">템플릿 목록을 불러오는 중 오류가 발생했습니다.</p>
|
||||
<Button onClick={() => refetch()} variant="outline">
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
다시 시도
|
||||
|
|
@ -145,13 +145,13 @@ export default function TemplatesManagePage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="min-h-screen bg-muted">
|
||||
<div className="w-full max-w-none px-4 py-8 space-y-8">
|
||||
{/* 페이지 제목 */}
|
||||
<div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">템플릿 관리</h1>
|
||||
<p className="mt-2 text-gray-600">화면 디자이너에서 사용할 템플릿을 관리합니다</p>
|
||||
<h1 className="text-3xl font-bold text-foreground">템플릿 관리</h1>
|
||||
<p className="mt-2 text-muted-foreground">화면 디자이너에서 사용할 템플릿을 관리합니다</p>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<Button asChild className="shadow-sm">
|
||||
|
|
@ -164,9 +164,9 @@ export default function TemplatesManagePage() {
|
|||
|
||||
{/* 필터 및 검색 */}
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader className="bg-gray-50/50">
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="flex items-center">
|
||||
<Filter className="mr-2 h-5 w-5 text-gray-600" />
|
||||
<Filter className="mr-2 h-5 w-5 text-muted-foreground" />
|
||||
필터 및 검색
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
@ -176,7 +176,7 @@ export default function TemplatesManagePage() {
|
|||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">검색</label>
|
||||
<div className="relative">
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
|
||||
<Input
|
||||
placeholder="템플릿명, 설명 검색..."
|
||||
value={searchTerm}
|
||||
|
|
@ -232,7 +232,7 @@ export default function TemplatesManagePage() {
|
|||
|
||||
{/* 템플릿 목록 테이블 */}
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader className="bg-gray-50/50">
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle>템플릿 목록 ({filteredAndSortedTemplates.length}개)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
|
@ -293,7 +293,7 @@ export default function TemplatesManagePage() {
|
|||
</TableRow>
|
||||
) : filteredAndSortedTemplates.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={11} className="py-8 text-center text-gray-500">
|
||||
<TableCell colSpan={11} className="py-8 text-center text-muted-foreground">
|
||||
검색 조건에 맞는 템플릿이 없습니다.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -357,7 +357,7 @@ export default function TemplatesManagePage() {
|
|||
</Button>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button size="sm" variant="ghost" className="text-red-600 hover:text-red-700">
|
||||
<Button size="sm" variant="ghost" className="text-destructive hover:text-destructive">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
|
|
@ -373,7 +373,7 @@ export default function TemplatesManagePage() {
|
|||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleDelete(template.template_code, template.template_name)}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
className="bg-destructive hover:bg-red-700"
|
||||
disabled={isDeleting}
|
||||
>
|
||||
삭제
|
||||
|
|
|
|||
|
|
@ -25,27 +25,27 @@ export default function TestPage() {
|
|||
<h1 className="mb-4 text-2xl font-bold">토큰 테스트 페이지</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded bg-green-100 p-4">
|
||||
<div className="rounded bg-emerald-100 p-4">
|
||||
<h2 className="mb-2 font-semibold">토큰 상태</h2>
|
||||
<p>토큰 존재: {tokenInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
|
||||
<p>토큰 길이: {tokenInfo.tokenLength}</p>
|
||||
<p>토큰 시작: {tokenInfo.tokenStart}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded bg-blue-100 p-4">
|
||||
<div className="rounded bg-primary/10 p-4">
|
||||
<h2 className="mb-2 font-semibold">페이지 정보</h2>
|
||||
<p>현재 URL: {tokenInfo.currentUrl}</p>
|
||||
<p>시간: {tokenInfo.timestamp}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded bg-yellow-100 p-4">
|
||||
<div className="rounded bg-amber-100 p-4">
|
||||
<h2 className="mb-2 font-semibold">테스트 버튼</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
const token = localStorage.getItem("authToken");
|
||||
alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
|
||||
}}
|
||||
className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
|
||||
className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
|
||||
>
|
||||
토큰 확인
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -31,12 +31,12 @@ export default function TokenTestPage() {
|
|||
<h1 className="mb-4 text-2xl font-bold">토큰 상태 테스트</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded bg-gray-100 p-4">
|
||||
<div className="rounded bg-muted p-4">
|
||||
<h2 className="mb-2 font-semibold">토큰 정보</h2>
|
||||
<pre className="text-sm">{JSON.stringify(tokenInfo, null, 2)}</pre>
|
||||
</div>
|
||||
|
||||
<div className="rounded bg-blue-100 p-4">
|
||||
<div className="rounded bg-primary/10 p-4">
|
||||
<h2 className="mb-2 font-semibold">테스트 버튼</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
|
|
@ -44,7 +44,7 @@ export default function TokenTestPage() {
|
|||
console.log("현재 토큰:", token);
|
||||
alert(`토큰: ${token ? "존재" : "없음"}`);
|
||||
}}
|
||||
className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
|
||||
className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
|
||||
>
|
||||
토큰 확인
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -259,7 +259,7 @@ export default function RoleDetailPage({ params }: { params: Promise<{ id: strin
|
|||
</div>
|
||||
<span
|
||||
className={`rounded-full px-3 py-1 text-sm font-medium ${
|
||||
roleGroup.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
|
||||
roleGroup.status === "active" ? "bg-emerald-100 text-emerald-800" : "bg-muted text-foreground"
|
||||
}`}
|
||||
>
|
||||
{roleGroup.status === "active" ? "활성" : "비활성"}
|
||||
|
|
|
|||
|
|
@ -273,7 +273,7 @@ export default function RolesPage() {
|
|||
</div>
|
||||
<span
|
||||
className={`rounded-full px-2 py-1 text-xs font-medium ${
|
||||
role.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
|
||||
role.status === "active" ? "bg-emerald-100 text-emerald-800" : "bg-muted text-foreground"
|
||||
}`}
|
||||
>
|
||||
{role.status === "active" ? "활성" : "비활성"}
|
||||
|
|
|
|||
|
|
@ -388,7 +388,7 @@ export default function ValidationDemoPage() {
|
|||
<CardDescription>실시간 검증이 적용된 폼입니다. 입력하면서 검증 결과를 확인해보세요.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="relative min-h-[400px] rounded-lg border border-dashed border-gray-300 p-4">
|
||||
<div className="relative min-h-[400px] rounded-lg border border-dashed border-input p-4">
|
||||
<EnhancedInteractiveScreenViewer
|
||||
component={TEST_COMPONENTS[0]} // container
|
||||
allComponents={TEST_COMPONENTS}
|
||||
|
|
@ -485,7 +485,7 @@ export default function ValidationDemoPage() {
|
|||
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold">폼 데이터</h4>
|
||||
<pre className="max-h-60 overflow-auto rounded-md bg-gray-100 p-3 text-sm">
|
||||
<pre className="max-h-60 overflow-auto rounded-md bg-muted p-3 text-sm">
|
||||
{JSON.stringify(formData, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
|
|
@ -493,15 +493,15 @@ export default function ValidationDemoPage() {
|
|||
<div className="space-y-2">
|
||||
<h4 className="font-semibold">검증 통계</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="rounded-md bg-green-50 p-3">
|
||||
<div className="text-lg font-bold text-green-600">
|
||||
<div className="rounded-md bg-emerald-50 p-3">
|
||||
<div className="text-lg font-bold text-emerald-600">
|
||||
{Object.values(validationState.fieldStates).filter((f) => f.status === "valid").length}
|
||||
</div>
|
||||
<div className="text-sm text-green-700">유효한 필드</div>
|
||||
<div className="text-sm text-emerald-700">유효한 필드</div>
|
||||
</div>
|
||||
<div className="rounded-md bg-red-50 p-3">
|
||||
<div className="text-lg font-bold text-red-600">{validationState.errors.length}</div>
|
||||
<div className="text-sm text-red-700">오류 개수</div>
|
||||
<div className="rounded-md bg-destructive/10 p-3">
|
||||
<div className="text-lg font-bold text-destructive">{validationState.errors.length}</div>
|
||||
<div className="text-sm text-destructive">오류 개수</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const statusConfig: Record<string, { label: string; variant: "default" | "second
|
|||
const lineStatusConfig: Record<string, { label: string; icon: React.ReactNode }> = {
|
||||
waiting: { label: "대기", icon: <Clock className="h-3 w-3 text-muted-foreground" /> },
|
||||
pending: { label: "진행 중", icon: <Clock className="h-3 w-3 text-primary" /> },
|
||||
approved: { label: "승인", icon: <CheckCircle2 className="h-3 w-3 text-green-600" /> },
|
||||
approved: { label: "승인", icon: <CheckCircle2 className="h-3 w-3 text-emerald-600" /> },
|
||||
rejected: { label: "반려", icon: <XCircle className="h-3 w-3 text-destructive" /> },
|
||||
skipped: { label: "건너뜀", icon: <Clock className="h-3 w-3 text-muted-foreground" /> },
|
||||
};
|
||||
|
|
|
|||
|
|
@ -107,18 +107,18 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
|
|||
return (
|
||||
<div className="h-screen">
|
||||
{/* 대시보드 헤더 - 보기 모드에서는 숨김 */}
|
||||
{/* <div className="border-b border-gray-200 bg-white px-6 py-4">
|
||||
{/* <div className="border-b border-border bg-white px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-800">{dashboard.title}</h1>
|
||||
{dashboard.description && <p className="mt-1 text-sm text-gray-600">{dashboard.description}</p>}
|
||||
<h1 className="text-2xl font-bold text-foreground">{dashboard.title}</h1>
|
||||
{dashboard.description && <p className="mt-1 text-sm text-muted-foreground">{dashboard.description}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 새로고침 버튼 *\/}
|
||||
<button
|
||||
onClick={loadDashboard}
|
||||
className="rounded-lg border border-gray-300 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-800"
|
||||
className="rounded-lg border border-input px-3 py-2 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
title="새로고침"
|
||||
>
|
||||
🔄
|
||||
|
|
@ -133,7 +133,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
|
|||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
}}
|
||||
className="rounded-lg border border-gray-300 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-800"
|
||||
className="rounded-lg border border-input px-3 py-2 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
title="전체화면"
|
||||
>
|
||||
⛶
|
||||
|
|
@ -144,7 +144,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
|
|||
onClick={() => {
|
||||
router.push(`/admin/screenMng/dashboardList?load=${resolvedParams.dashboardId}`);
|
||||
}}
|
||||
className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
|
||||
className="rounded-lg bg-primary px-4 py-2 text-white hover:bg-primary"
|
||||
>
|
||||
편집
|
||||
</button>
|
||||
|
|
@ -152,7 +152,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
|
|||
</div>
|
||||
|
||||
{/* 메타 정보 *\/}
|
||||
<div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
|
||||
<div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span>생성: {new Date(dashboard.createdAt).toLocaleString()}</span>
|
||||
<span>수정: {new Date(dashboard.updatedAt).toLocaleString()}</span>
|
||||
<span>요소: {dashboard.elements.length}개</span>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,93 @@
|
|||
"use client";
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { FileCheck, Menu, Users, Bell, FileText, Layout, Server, Shield, Calendar } from "lucide-react";
|
||||
|
||||
const quickAccessItems = [
|
||||
{ label: "결재함", icon: FileCheck, href: "/admin/approvalBox", color: "text-primary bg-primary/10" },
|
||||
{ label: "메뉴 관리", icon: Menu, href: "/admin/menu", color: "text-violet-600 bg-violet-50" },
|
||||
{ label: "사용자 관리", icon: Users, href: "/admin/userMng", color: "text-emerald-600 bg-emerald-50" },
|
||||
{ label: "공지사항", icon: Bell, href: "/admin/system-notices", color: "text-amber-600 bg-amber-50" },
|
||||
{ label: "감사 로그", icon: FileText, href: "/admin/audit-log", color: "text-rose-600 bg-rose-50" },
|
||||
{ label: "화면 관리", icon: Layout, href: "/admin/screenMng", color: "text-cyan-600 bg-cyan-50" },
|
||||
];
|
||||
|
||||
/**
|
||||
* 메인 페이지 컴포넌트
|
||||
* 대시보드 내용만 포함
|
||||
*/
|
||||
export default function MainPage() {
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
|
||||
const userName = user?.userName || "사용자";
|
||||
const today = new Date();
|
||||
const dateStr = today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric", weekday: "long" });
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-4">
|
||||
{/* Welcome Message */}
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-6 text-center">
|
||||
<h3 className="text-lg font-semibold">Vexplor에 오신 것을 환영합니다!</h3>
|
||||
<p className="text-muted-foreground">제품 수명 주기 관리 시스템을 통해 효율적인 업무를 시작하세요.</p>
|
||||
<div className="flex justify-center space-x-2">
|
||||
<Badge variant="secondary">Node.js</Badge>
|
||||
<Badge variant="secondary">Next.js</Badge>
|
||||
<Badge variant="secondary">Shadcn/ui</Badge>
|
||||
<div className="space-y-6 p-4 sm:p-6 lg:p-8">
|
||||
{/* 헤더 영역 */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
|
||||
{userName}님, 좋은 하루 되세요
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">{dateStr}</p>
|
||||
</div>
|
||||
|
||||
{/* 바로가기 */}
|
||||
<div>
|
||||
<h2 className="mb-3 text-base font-semibold text-foreground">바로가기</h2>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
|
||||
{quickAccessItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<button
|
||||
key={item.href}
|
||||
onClick={() => router.push(item.href)}
|
||||
className="group flex flex-col items-center gap-2.5 rounded-lg border bg-card p-4 transition-all hover:shadow-md"
|
||||
>
|
||||
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${item.color} transition-transform group-hover:scale-105`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<span className="text-xs font-medium text-foreground">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 시스템 정보 */}
|
||||
<div className="rounded-lg border bg-card p-4 sm:p-5">
|
||||
<h2 className="mb-3 text-base font-semibold text-foreground">시스템 정보</h2>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Server className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">플랫폼</p>
|
||||
<p className="text-sm font-medium">WACE ERP/PLM</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Shield className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">버전</p>
|
||||
<p className="text-sm font-medium">v2.0.0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">오늘 날짜</p>
|
||||
<p className="text-sm font-medium">
|
||||
{today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -385,13 +385,13 @@ export default function MultiLangPage() {
|
|||
</div>
|
||||
|
||||
<div className="flex items-end">
|
||||
<div className="text-sm text-gray-600">검색 결과: {filteredLangKeys.length}건</div>
|
||||
<div className="text-sm text-muted-foreground">검색 결과: {filteredLangKeys.length}건</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="text-sm text-gray-600">전체: {filteredLangKeys.length}건</div>
|
||||
<div className="text-sm text-muted-foreground">전체: {filteredLangKeys.length}건</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
|
|
@ -417,7 +417,7 @@ export default function MultiLangPage() {
|
|||
{languages.map((lang) => (
|
||||
<div key={lang.langCode} className="rounded-lg border p-4">
|
||||
<div className="font-semibold">{lang.langName}</div>
|
||||
<div className="text-sm text-gray-600">{lang.langNative}</div>
|
||||
<div className="text-sm text-muted-foreground">{lang.langNative}</div>
|
||||
<Badge variant={lang.isActive === "Y" ? "default" : "secondary"} className="mt-2">
|
||||
{lang.isActive === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
|
|
@ -440,7 +440,7 @@ export default function MultiLangPage() {
|
|||
<h3 className="mb-2 font-semibold">{company.name}</h3>
|
||||
<div className="space-y-1">
|
||||
{menus.map((menu) => (
|
||||
<div key={menu.code} className="text-sm text-gray-600">
|
||||
<div key={menu.code} className="text-sm text-muted-foreground">
|
||||
{menu.name}
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,91 @@
|
|||
export default function MainHomePage() {
|
||||
return (
|
||||
<div className="space-y-6 p-4">
|
||||
{/* 대시보드 컨텐츠 */}
|
||||
<div className="rounded-lg border bg-background p-6 shadow-sm">
|
||||
<h3 className="mb-4 text-lg font-semibold">WACE 솔루션에 오신 것을 환영합니다!</h3>
|
||||
<p className="mb-6 text-muted-foreground">제품 수명 주기 관리 시스템을 통해 효율적인 업무를 시작하세요.</p>
|
||||
"use client";
|
||||
|
||||
<div className="flex gap-2">
|
||||
<span className="inline-flex items-center rounded-md bg-success/10 px-2 py-1 text-xs font-medium text-success ring-1 ring-success/10 ring-inset">
|
||||
Next.js
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary ring-1 ring-primary/10 ring-inset">
|
||||
Shadcn/ui
|
||||
</span>
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { FileCheck, Menu, Users, Bell, FileText, Layout, Server, Shield, Calendar, ArrowRight } from "lucide-react";
|
||||
|
||||
const quickAccessItems = [
|
||||
{ label: "결재함", icon: FileCheck, href: "/admin/approvalBox", color: "text-primary bg-primary/10" },
|
||||
{ label: "메뉴 관리", icon: Menu, href: "/admin/menu", color: "text-violet-600 bg-violet-50" },
|
||||
{ label: "사용자 관리", icon: Users, href: "/admin/userMng", color: "text-emerald-600 bg-emerald-50" },
|
||||
{ label: "공지사항", icon: Bell, href: "/admin/system-notices", color: "text-amber-600 bg-amber-50" },
|
||||
{ label: "감사 로그", icon: FileText, href: "/admin/audit-log", color: "text-rose-600 bg-rose-50" },
|
||||
{ label: "화면 관리", icon: Layout, href: "/admin/screenMng", color: "text-cyan-600 bg-cyan-50" },
|
||||
];
|
||||
|
||||
export default function MainHomePage() {
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
|
||||
const userName = user?.userName || "사용자";
|
||||
const today = new Date();
|
||||
const dateStr = today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric", weekday: "long" });
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-4 sm:p-6 lg:p-8">
|
||||
{/* 헤더 영역 */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
|
||||
{userName}님, 좋은 하루 되세요
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">{dateStr}</p>
|
||||
</div>
|
||||
|
||||
{/* 바로가기 */}
|
||||
<div>
|
||||
<h2 className="mb-3 text-base font-semibold text-foreground">바로가기</h2>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
|
||||
{quickAccessItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<button
|
||||
key={item.href}
|
||||
onClick={() => router.push(item.href)}
|
||||
className="group flex flex-col items-center gap-2.5 rounded-lg border bg-card p-4 transition-all hover:shadow-md"
|
||||
>
|
||||
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${item.color} transition-transform group-hover:scale-105`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<span className="text-xs font-medium text-foreground">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 시스템 정보 */}
|
||||
<div className="rounded-lg border bg-card p-4 sm:p-5">
|
||||
<h2 className="mb-3 text-base font-semibold text-foreground">시스템 정보</h2>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Server className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">플랫폼</p>
|
||||
<p className="text-sm font-medium">WACE ERP/PLM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Shield className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">버전</p>
|
||||
<p className="text-sm font-medium">v2.0.0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">오늘 날짜</p>
|
||||
<p className="text-sm font-medium">
|
||||
{today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -174,10 +174,10 @@ function PopScreenViewPage() {
|
|||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-screen w-full items-center justify-center bg-gray-100">
|
||||
<div className="flex h-screen w-full items-center justify-center bg-muted">
|
||||
<div className="text-center">
|
||||
<Loader2 className="mx-auto h-10 w-10 animate-spin text-blue-500" />
|
||||
<p className="mt-4 text-gray-600">POP 화면 로딩 중...</p>
|
||||
<Loader2 className="mx-auto h-10 w-10 animate-spin text-primary" />
|
||||
<p className="mt-4 text-muted-foreground">POP 화면 로딩 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -185,13 +185,13 @@ function PopScreenViewPage() {
|
|||
|
||||
if (error || !screen) {
|
||||
return (
|
||||
<div className="flex h-screen w-full items-center justify-center bg-gray-100">
|
||||
<div className="flex h-screen w-full items-center justify-center bg-muted">
|
||||
<div className="text-center max-w-md p-6">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
|
||||
<span className="text-2xl">!</span>
|
||||
</div>
|
||||
<h2 className="mb-2 text-xl font-bold text-gray-800">화면을 찾을 수 없습니다</h2>
|
||||
<p className="mb-4 text-gray-600">{error || "요청하신 POP 화면이 존재하지 않습니다."}</p>
|
||||
<h2 className="mb-2 text-xl font-bold text-foreground">화면을 찾을 수 없습니다</h2>
|
||||
<p className="mb-4 text-muted-foreground">{error || "요청하신 POP 화면이 존재하지 않습니다."}</p>
|
||||
<Button onClick={() => router.back()} variant="outline">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
돌아가기
|
||||
|
|
@ -205,7 +205,7 @@ function PopScreenViewPage() {
|
|||
<ScreenPreviewProvider isPreviewMode={isPreviewMode}>
|
||||
<ActiveTabProvider>
|
||||
<TableOptionsProvider>
|
||||
<div className="h-screen bg-gray-100 flex flex-col">
|
||||
<div className="h-screen bg-muted flex flex-col">
|
||||
{/* 상단 툴바 (프리뷰 모드에서만) */}
|
||||
{isPreviewMode && (
|
||||
<div className="sticky top-0 z-50 bg-white border-b shadow-sm">
|
||||
|
|
@ -216,13 +216,13 @@ function PopScreenViewPage() {
|
|||
닫기
|
||||
</Button>
|
||||
<span className="text-sm font-medium">{screen.screenName}</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
<span className="text-xs text-muted-foreground/70">
|
||||
({currentModeKey.replace("_", " ")})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
|
||||
<div className="flex items-center gap-1 bg-muted rounded-lg p-1">
|
||||
<Button
|
||||
variant={deviceType === "mobile" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
|
|
@ -243,7 +243,7 @@ function PopScreenViewPage() {
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
|
||||
<div className="flex items-center gap-1 bg-muted rounded-lg p-1">
|
||||
<Button
|
||||
variant={isLandscape ? "default" : "ghost"}
|
||||
size="sm"
|
||||
|
|
@ -295,7 +295,7 @@ function PopScreenViewPage() {
|
|||
)}
|
||||
|
||||
<div
|
||||
className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full min-h-full"}`}
|
||||
className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-foreground" : "w-full min-h-full"}`}
|
||||
style={isPreviewMode ? {
|
||||
width: currentDevice.width,
|
||||
maxHeight: "80vh",
|
||||
|
|
@ -333,13 +333,13 @@ function PopScreenViewPage() {
|
|||
) : (
|
||||
// 빈 화면
|
||||
<div className="flex flex-col items-center justify-center min-h-[400px] p-8 text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
|
||||
<Smartphone className="h-8 w-8 text-gray-400" />
|
||||
<div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
|
||||
<Smartphone className="h-8 w-8 text-muted-foreground/70" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-2">
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">
|
||||
화면이 비어있습니다
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 max-w-xs">
|
||||
<p className="text-sm text-muted-foreground max-w-xs">
|
||||
POP 화면 디자이너에서 컴포넌트를 추가하여 화면을 구성하세요.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -65,28 +65,28 @@
|
|||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
/* ===== CSS Variables (shadcn/ui Official) ===== */
|
||||
/* ===== CSS Variables (Vivid Blue Theme) ===== */
|
||||
:root {
|
||||
/* Light Theme Colors - HSL Format */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--foreground: 224 71% 4%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card-foreground: 224 71% 4%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--popover-foreground: 224 71% 4%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 220 14.3% 95.9%;
|
||||
--secondary-foreground: 220.9 39.3% 11%;
|
||||
--muted: 220 14.3% 95.9%;
|
||||
--muted-foreground: 220 8.9% 46.1%;
|
||||
--accent: 220 14.3% 95.9%;
|
||||
--accent-foreground: 220.9 39.3% 11%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 220 13% 88%;
|
||||
--input: 220 13% 88%;
|
||||
--ring: 217.2 91.2% 59.8%;
|
||||
|
||||
/* Success Colors (Emerald) */
|
||||
--success: 142 76% 36%;
|
||||
|
|
@ -111,66 +111,83 @@
|
|||
--radius: 0.5rem;
|
||||
|
||||
/* Sidebar Colors */
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-background: 220 20% 97%;
|
||||
--sidebar-foreground: 224 71% 4%;
|
||||
--sidebar-primary: 217.2 91.2% 59.8%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 220 14.3% 95.9%;
|
||||
--sidebar-accent-foreground: 220.9 39.3% 11%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
|
||||
/* ===== Dark Theme ===== */
|
||||
/* ===== Dark Theme (Palantir-Inspired) ===== */
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
/* 배경: 팔란티어 스타일 깊은 네이비 */
|
||||
--background: 222 47% 6%;
|
||||
--foreground: 210 20% 95%;
|
||||
|
||||
/* Success Colors (Emerald) - Dark */
|
||||
--success: 142 76% 36%;
|
||||
/* 카드: 배경보다 약간 밝게 (레이어 구분) */
|
||||
--card: 220 40% 9%;
|
||||
--card-foreground: 210 20% 95%;
|
||||
|
||||
/* 팝오버: 카드와 동일 */
|
||||
--popover: 220 40% 9%;
|
||||
--popover-foreground: 210 20% 95%;
|
||||
|
||||
/* Primary: 다크 배경에서 약간 더 밝은 블루 */
|
||||
--primary: 217 91% 65%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
/* Secondary: 어두운 슬레이트 */
|
||||
--secondary: 220 25% 14%;
|
||||
--secondary-foreground: 210 20% 90%;
|
||||
|
||||
/* Muted: 차분한 회색-네이비 */
|
||||
--muted: 220 20% 13%;
|
||||
--muted-foreground: 215 15% 58%;
|
||||
|
||||
/* Accent: secondary와 유사 */
|
||||
--accent: 220 25% 16%;
|
||||
--accent-foreground: 210 20% 90%;
|
||||
|
||||
/* Destructive: 다크에서 더 밝은 레드 */
|
||||
--destructive: 0 72% 51%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
/* Border: 팔란티어 스타일 - 보더가 더 잘 보임 */
|
||||
--border: 220 20% 18%;
|
||||
--input: 220 20% 18%;
|
||||
--ring: 217 91% 65%;
|
||||
|
||||
/* Success (Emerald) - 다크 배경용 밝기 조정 */
|
||||
--success: 142 70% 42%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
|
||||
/* Warning Colors (Amber) - Dark */
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 0 0% 100%;
|
||||
/* Warning (Amber) - 다크 배경용 밝기 조정 */
|
||||
--warning: 38 92% 55%;
|
||||
--warning-foreground: 0 0% 10%;
|
||||
|
||||
/* Info Colors (Cyan) - Dark */
|
||||
--info: 188 94% 43%;
|
||||
/* Info (Cyan) - 다크 배경용 밝기 조정 */
|
||||
--info: 188 90% 48%;
|
||||
--info-foreground: 0 0% 100%;
|
||||
|
||||
/* Chart Colors - Dark */
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
/* Chart Colors - 다크 배경에서 선명한 컬러 */
|
||||
--chart-1: 220 70% 55%;
|
||||
--chart-2: 160 60% 48%;
|
||||
--chart-3: 30 80% 58%;
|
||||
--chart-4: 280 65% 63%;
|
||||
--chart-5: 340 75% 58%;
|
||||
|
||||
/* Sidebar Colors - Dark */
|
||||
--sidebar-background: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 217.2 91.2% 59.8%;
|
||||
--sidebar-primary-foreground: 222.2 47.4% 11.2%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
/* Sidebar - 메인 배경보다 약간 어둡게 */
|
||||
--sidebar-background: 222 47% 5%;
|
||||
--sidebar-foreground: 210 20% 90%;
|
||||
--sidebar-primary: 217 91% 65%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 220 25% 14%;
|
||||
--sidebar-accent-foreground: 210 20% 90%;
|
||||
--sidebar-border: 220 20% 16%;
|
||||
--sidebar-ring: 217 91% 65%;
|
||||
}
|
||||
|
||||
/* ===== Base Styles ===== */
|
||||
|
|
@ -459,3 +476,166 @@ select {
|
|||
}
|
||||
|
||||
/* ===== End of Global Styles ===== */
|
||||
|
||||
/* ===== Dark Mode Compatibility Layer ===== */
|
||||
/* 하드코딩된 Tailwind 색상 → 다크 모드 자동 변환 */
|
||||
/* 개별 컴포넌트 수정 없이, 이 한 곳에서 전체 프로젝트 커버 */
|
||||
|
||||
/* --- 1. 배경색: white/gray → 시맨틱 토큰 --- */
|
||||
.dark .bg-white { background-color: hsl(var(--card)) !important; }
|
||||
.dark .bg-gray-50 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .bg-gray-100 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .bg-gray-200 { background-color: hsl(var(--accent)) !important; }
|
||||
|
||||
/* --- 2. 텍스트: gray → 시맨틱 토큰 --- */
|
||||
.dark .text-gray-400 { color: hsl(var(--muted-foreground)) !important; }
|
||||
.dark .text-gray-500 { color: hsl(var(--muted-foreground)) !important; }
|
||||
.dark .text-gray-600 { color: hsl(var(--foreground) / 0.7) !important; }
|
||||
.dark .text-gray-700 { color: hsl(var(--foreground) / 0.8) !important; }
|
||||
.dark .text-gray-800 { color: hsl(var(--foreground) / 0.9) !important; }
|
||||
.dark .text-gray-900 { color: hsl(var(--foreground)) !important; }
|
||||
|
||||
/* --- 3. 보더: gray → 시맨틱 토큰 --- */
|
||||
.dark .border-gray-100 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .border-gray-200 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .border-gray-300 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .divide-gray-200 > * + * { border-color: hsl(var(--border)) !important; }
|
||||
|
||||
/* --- 4. 호버: gray → 시맨틱 토큰 --- */
|
||||
.dark .hover\:bg-gray-50:hover { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .hover\:bg-gray-100:hover { background-color: hsl(var(--accent)) !important; }
|
||||
.dark .hover\:bg-gray-200:hover { background-color: hsl(var(--accent)) !important; }
|
||||
|
||||
/* --- 5. Emerald (성공/완료 상태) --- */
|
||||
.dark .bg-emerald-50 { background-color: hsl(142 40% 12%) !important; }
|
||||
.dark .bg-emerald-100 { background-color: hsl(142 40% 15%) !important; }
|
||||
.dark .text-emerald-600 { color: hsl(142 70% 55%) !important; }
|
||||
.dark .text-emerald-700 { color: hsl(142 70% 50%) !important; }
|
||||
.dark .text-emerald-800 { color: hsl(142 70% 60%) !important; }
|
||||
.dark .text-emerald-900 { color: hsl(142 70% 65%) !important; }
|
||||
.dark .border-emerald-200 { border-color: hsl(142 40% 25%) !important; }
|
||||
.dark .border-emerald-300 { border-color: hsl(142 40% 30%) !important; }
|
||||
.dark .ring-emerald-200 { --tw-ring-color: hsl(142 40% 25%) !important; }
|
||||
|
||||
/* --- 6. Amber/Yellow (경고/주의 상태) --- */
|
||||
.dark .bg-amber-50 { background-color: hsl(38 40% 12%) !important; }
|
||||
.dark .bg-amber-100 { background-color: hsl(38 40% 15%) !important; }
|
||||
.dark .bg-yellow-50 { background-color: hsl(48 40% 12%) !important; }
|
||||
.dark .bg-yellow-100 { background-color: hsl(48 40% 15%) !important; }
|
||||
.dark .text-amber-600 { color: hsl(38 90% 58%) !important; }
|
||||
.dark .text-amber-700 { color: hsl(38 90% 55%) !important; }
|
||||
.dark .text-amber-800 { color: hsl(38 90% 60%) !important; }
|
||||
.dark .text-amber-900 { color: hsl(38 90% 65%) !important; }
|
||||
.dark .text-yellow-600 { color: hsl(48 90% 55%) !important; }
|
||||
.dark .text-yellow-700 { color: hsl(48 90% 50%) !important; }
|
||||
.dark .text-yellow-800 { color: hsl(48 90% 60%) !important; }
|
||||
.dark .border-amber-200 { border-color: hsl(38 40% 25%) !important; }
|
||||
.dark .border-amber-300 { border-color: hsl(38 40% 30%) !important; }
|
||||
.dark .border-yellow-200 { border-color: hsl(48 40% 25%) !important; }
|
||||
.dark .ring-amber-200 { --tw-ring-color: hsl(38 40% 25%) !important; }
|
||||
|
||||
/* --- 7. Blue (정보/프라이머리 상태) --- */
|
||||
.dark .bg-blue-50 { background-color: hsl(217 40% 12%) !important; }
|
||||
.dark .bg-blue-100 { background-color: hsl(217 40% 15%) !important; }
|
||||
.dark .text-blue-600 { color: hsl(217 90% 65%) !important; }
|
||||
.dark .text-blue-700 { color: hsl(217 90% 60%) !important; }
|
||||
.dark .text-blue-800 { color: hsl(217 90% 65%) !important; }
|
||||
.dark .border-blue-200 { border-color: hsl(217 40% 25%) !important; }
|
||||
.dark .ring-blue-200 { --tw-ring-color: hsl(217 40% 25%) !important; }
|
||||
|
||||
/* --- 8. Red (에러/삭제 상태) --- */
|
||||
.dark .bg-red-50 { background-color: hsl(0 40% 12%) !important; }
|
||||
.dark .bg-red-100 { background-color: hsl(0 40% 15%) !important; }
|
||||
.dark .text-red-600 { color: hsl(0 75% 60%) !important; }
|
||||
.dark .text-red-700 { color: hsl(0 75% 55%) !important; }
|
||||
.dark .text-red-800 { color: hsl(0 75% 60%) !important; }
|
||||
.dark .border-red-200 { border-color: hsl(0 40% 25%) !important; }
|
||||
.dark .ring-red-200 { --tw-ring-color: hsl(0 40% 25%) !important; }
|
||||
|
||||
/* --- 9. Green (성공 - emerald 변형) --- */
|
||||
.dark .bg-green-50 { background-color: hsl(142 40% 12%) !important; }
|
||||
.dark .bg-green-100 { background-color: hsl(142 40% 15%) !important; }
|
||||
.dark .text-green-600 { color: hsl(142 70% 55%) !important; }
|
||||
.dark .text-green-700 { color: hsl(142 70% 50%) !important; }
|
||||
.dark .border-green-200 { border-color: hsl(142 40% 25%) !important; }
|
||||
|
||||
/* --- 10. Slate (gray 변형) --- */
|
||||
.dark .bg-slate-50 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .bg-slate-100 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .text-slate-500 { color: hsl(var(--muted-foreground)) !important; }
|
||||
.dark .text-slate-600 { color: hsl(var(--foreground) / 0.7) !important; }
|
||||
.dark .text-slate-700 { color: hsl(var(--foreground) / 0.8) !important; }
|
||||
.dark .border-slate-200 { border-color: hsl(var(--border)) !important; }
|
||||
|
||||
/* --- 11. bg-white opacity 변형 --- */
|
||||
.dark .bg-white\/30 { background-color: hsl(var(--card) / 0.3) !important; }
|
||||
.dark .bg-white\/50 { background-color: hsl(var(--card) / 0.5) !important; }
|
||||
.dark .bg-white\/80 { background-color: hsl(var(--card) / 0.8) !important; }
|
||||
.dark .bg-white\/90 { background-color: hsl(var(--card) / 0.9) !important; }
|
||||
.dark .hover\:bg-white:hover { background-color: hsl(var(--card)) !important; }
|
||||
|
||||
/* --- 12. text-black → foreground --- */
|
||||
.dark .text-black { color: hsl(var(--foreground)) !important; }
|
||||
|
||||
/* --- 13. bg/text/border - purple (관리 UI) --- */
|
||||
.dark .bg-purple-50 { background-color: hsl(270 40% 12%) !important; }
|
||||
.dark .bg-purple-100 { background-color: hsl(270 40% 15%) !important; }
|
||||
.dark .bg-purple-200 { background-color: hsl(270 40% 20%) !important; }
|
||||
.dark .text-purple-500 { color: hsl(270 70% 60%) !important; }
|
||||
.dark .text-purple-600 { color: hsl(270 70% 55%) !important; }
|
||||
.dark .text-purple-700 { color: hsl(270 70% 50%) !important; }
|
||||
.dark .border-purple-200 { border-color: hsl(270 40% 25%) !important; }
|
||||
.dark .border-purple-300 { border-color: hsl(270 40% 30%) !important; }
|
||||
|
||||
/* --- 14. bg/text/border - indigo --- */
|
||||
.dark .bg-indigo-50 { background-color: hsl(231 40% 12%) !important; }
|
||||
.dark .bg-indigo-100 { background-color: hsl(231 40% 15%) !important; }
|
||||
.dark .text-indigo-600 { color: hsl(231 70% 60%) !important; }
|
||||
.dark .text-indigo-700 { color: hsl(231 70% 55%) !important; }
|
||||
.dark .border-indigo-200 { border-color: hsl(231 40% 25%) !important; }
|
||||
|
||||
/* --- 15. bg/text - pink/rose (상태 뱃지) --- */
|
||||
.dark .bg-pink-50 { background-color: hsl(330 40% 12%) !important; }
|
||||
.dark .bg-pink-100 { background-color: hsl(330 40% 15%) !important; }
|
||||
.dark .text-pink-600 { color: hsl(330 70% 60%) !important; }
|
||||
.dark .text-pink-700 { color: hsl(330 70% 55%) !important; }
|
||||
.dark .bg-rose-50 { background-color: hsl(350 40% 12%) !important; }
|
||||
.dark .bg-rose-100 { background-color: hsl(350 40% 15%) !important; }
|
||||
.dark .text-rose-600 { color: hsl(350 70% 60%) !important; }
|
||||
.dark .text-rose-700 { color: hsl(350 70% 55%) !important; }
|
||||
|
||||
/* --- 16. bg/text - cyan/teal (정보/상태) --- */
|
||||
.dark .bg-cyan-50 { background-color: hsl(187 40% 12%) !important; }
|
||||
.dark .bg-cyan-100 { background-color: hsl(187 40% 15%) !important; }
|
||||
.dark .text-cyan-600 { color: hsl(187 70% 55%) !important; }
|
||||
.dark .text-cyan-700 { color: hsl(187 70% 50%) !important; }
|
||||
.dark .bg-teal-50 { background-color: hsl(162 40% 12%) !important; }
|
||||
.dark .bg-teal-100 { background-color: hsl(162 40% 15%) !important; }
|
||||
.dark .text-teal-600 { color: hsl(162 70% 55%) !important; }
|
||||
.dark .text-teal-700 { color: hsl(162 70% 50%) !important; }
|
||||
|
||||
/* --- 17. bg/text - orange (경고 변형) --- */
|
||||
.dark .bg-orange-50 { background-color: hsl(25 40% 12%) !important; }
|
||||
.dark .bg-orange-100 { background-color: hsl(25 40% 15%) !important; }
|
||||
.dark .bg-orange-200 { background-color: hsl(25 40% 20%) !important; }
|
||||
.dark .text-orange-600 { color: hsl(25 90% 65%) !important; }
|
||||
.dark .text-orange-700 { color: hsl(25 90% 70%) !important; }
|
||||
.dark .border-orange-200 { border-color: hsl(25 40% 25%) !important; }
|
||||
.dark .border-orange-300 { border-color: hsl(25 40% 30%) !important; }
|
||||
|
||||
/* --- 18. bg/text/border - violet (필터/관계 표시) --- */
|
||||
.dark .bg-violet-50 { background-color: hsl(263 40% 12%) !important; }
|
||||
.dark .bg-violet-100 { background-color: hsl(263 40% 18%) !important; }
|
||||
.dark .bg-violet-200 { background-color: hsl(263 40% 22%) !important; }
|
||||
.dark .text-violet-500 { color: hsl(263 80% 70%) !important; }
|
||||
.dark .text-violet-600 { color: hsl(263 80% 65%) !important; }
|
||||
.dark .text-violet-700 { color: hsl(263 80% 72%) !important; }
|
||||
.dark .border-violet-200 { border-color: hsl(263 40% 30%) !important; }
|
||||
.dark .border-violet-300 { border-color: hsl(263 40% 35%) !important; }
|
||||
|
||||
/* --- 19. bg/text/border - amber (조인/경고) --- */
|
||||
.dark .bg-amber-200 { background-color: hsl(38 40% 20%) !important; }
|
||||
.dark .text-amber-500 { color: hsl(38 90% 60%) !important; }
|
||||
.dark .text-amber-600 { color: hsl(38 90% 65%) !important; }
|
||||
|
||||
/* ===== End Dark Mode Compatibility Layer ===== */
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import type { Metadata, Viewport } from "next";
|
||||
import { Inter, JetBrains_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ThemeProvider } from "@/components/providers/ThemeProvider";
|
||||
import { QueryProvider } from "@/providers/QueryProvider";
|
||||
import { RegistryProvider } from "./registry-provider";
|
||||
import { Toaster } from "sonner";
|
||||
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
|
|
@ -39,13 +39,15 @@ export default function RootLayout({
|
|||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="ko" className="h-full">
|
||||
<body className={`${inter.variable} ${jetbrainsMono.variable} h-full bg-white font-sans antialiased`}>
|
||||
<html lang="ko" className="h-full" suppressHydrationWarning>
|
||||
<body className={`${inter.variable} ${jetbrainsMono.variable} bg-background h-full font-sans antialiased`}>
|
||||
<div id="root" className="h-full">
|
||||
<QueryProvider>
|
||||
<RegistryProvider>{children}</RegistryProvider>
|
||||
<Toaster position="top-right" />
|
||||
</QueryProvider>
|
||||
<ThemeProvider>
|
||||
<QueryProvider>
|
||||
<RegistryProvider>{children}</RegistryProvider>
|
||||
<Toaster position="top-right" />
|
||||
</QueryProvider>
|
||||
</ThemeProvider>
|
||||
{/* Portal 컨테이너 */}
|
||||
<div id="portal-root" data-radix-portal="true" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -227,9 +227,9 @@ export default function SimpleTypeSafetyTest() {
|
|||
</div>
|
||||
|
||||
{passedTests === totalTests && totalTests > 0 && (
|
||||
<div className="mt-4 rounded-lg border border-green-200 bg-green-50 p-4">
|
||||
<div className="font-medium text-green-800">🎉 모든 타입 안전성 테스트가 통과되었습니다!</div>
|
||||
<div className="mt-2 text-sm text-green-600">
|
||||
<div className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-4">
|
||||
<div className="font-medium text-emerald-800">🎉 모든 타입 안전성 테스트가 통과되었습니다!</div>
|
||||
<div className="mt-2 text-sm text-emerald-600">
|
||||
화면관리, 제어관리, 테이블타입관리 시스템이 안전하게 작동합니다.
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ export default function StressTestPage() {
|
|||
<div className="space-y-4 text-center">
|
||||
<h1 className="text-3xl font-bold">🔥 타입 시스템 스트레스 테스트</h1>
|
||||
<p className="text-muted-foreground">극한 상황에서 타입 시스템의 견고함과 성능을 검증합니다</p>
|
||||
<div className="rounded-lg bg-orange-50 p-3 text-sm text-orange-600">
|
||||
<div className="rounded-lg bg-amber-50 p-3 text-sm text-amber-600">
|
||||
⚠️ 주의: 이 테스트는 시스템에 높은 부하를 가할 수 있습니다
|
||||
</div>
|
||||
|
||||
|
|
@ -184,19 +184,19 @@ export default function StressTestPage() {
|
|||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-green-600">{testResults.passedTests}</div>
|
||||
<div className="text-2xl font-bold text-emerald-600">{testResults.passedTests}</div>
|
||||
<div className="text-muted-foreground text-sm">통과</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-red-600">{testResults.failedTests}</div>
|
||||
<div className="text-2xl font-bold text-destructive">{testResults.failedTests}</div>
|
||||
<div className="text-muted-foreground text-sm">실패</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-yellow-600">{testResults.warningTests}</div>
|
||||
<div className="text-2xl font-bold text-amber-600">{testResults.warningTests}</div>
|
||||
<div className="text-muted-foreground text-sm">경고</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">{Math.round(testResults.totalDuration)}ms</div>
|
||||
<div className="text-2xl font-bold text-primary">{Math.round(testResults.totalDuration)}ms</div>
|
||||
<div className="text-muted-foreground text-sm">총 소요시간</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -212,16 +212,16 @@ export default function StressTestPage() {
|
|||
</div>
|
||||
|
||||
{testResults.success ? (
|
||||
<div className="rounded-lg border border-green-200 bg-green-50 p-4">
|
||||
<div className="font-medium text-green-800">🎉 모든 스트레스 테스트 통과!</div>
|
||||
<div className="mt-2 text-sm text-green-600">
|
||||
<div className="rounded-lg border border-emerald-200 bg-emerald-50 p-4">
|
||||
<div className="font-medium text-emerald-800">🎉 모든 스트레스 테스트 통과!</div>
|
||||
<div className="mt-2 text-sm text-emerald-600">
|
||||
타입 시스템이 극한 상황에서도 안정적으로 작동합니다.
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg border border-red-200 bg-red-50 p-4">
|
||||
<div className="rounded-lg border border-destructive/20 bg-destructive/10 p-4">
|
||||
<div className="font-medium text-red-800">⚠️ 일부 스트레스 테스트 실패</div>
|
||||
<div className="mt-2 text-sm text-red-600">
|
||||
<div className="mt-2 text-sm text-destructive">
|
||||
개선이 필요한 영역이 있습니다. 아래 권장사항을 확인하세요.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -253,7 +253,7 @@ export default function StressTestPage() {
|
|||
|
||||
{/* 메트릭스 표시 */}
|
||||
{result.metrics && (
|
||||
<div className="mt-3 rounded bg-gray-50 p-3 text-xs">
|
||||
<div className="mt-3 rounded bg-muted p-3 text-xs">
|
||||
<div className="mb-1 font-medium">📊 상세 메트릭스:</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Object.entries(result.metrics).map(([key, value]) => (
|
||||
|
|
@ -286,7 +286,7 @@ export default function StressTestPage() {
|
|||
<ul className="space-y-2">
|
||||
{testResults.recommendation.map((rec, index) => (
|
||||
<li key={index} className="flex items-start gap-2">
|
||||
<span className="mt-0.5 text-blue-500">•</span>
|
||||
<span className="mt-0.5 text-primary">•</span>
|
||||
<span className="text-sm">{rec}</span>
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -304,7 +304,7 @@ export default function StressTestPage() {
|
|||
<CardTitle className="text-lg">📋 테스트 로그 (최근 10개)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-40 overflow-y-auto rounded bg-black p-4 font-mono text-xs text-green-400">
|
||||
<div className="h-40 overflow-y-auto rounded bg-black p-4 font-mono text-xs text-emerald-400">
|
||||
{testLogs.slice(-10).map((log, index) => (
|
||||
<div key={index}>{log}</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -66,10 +66,10 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
|
|||
return <Video {...iconProps} className="text-purple-600" />;
|
||||
}
|
||||
if (['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(extension)) {
|
||||
return <Music {...iconProps} className="text-green-600" />;
|
||||
return <Music {...iconProps} className="text-emerald-600" />;
|
||||
}
|
||||
if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) {
|
||||
return <Archive {...iconProps} className="text-yellow-600" />;
|
||||
return <Archive {...iconProps} className="text-amber-600" />;
|
||||
}
|
||||
if (['txt', 'md', 'doc', 'docx', 'pdf', 'rtf'].includes(extension)) {
|
||||
return <FileText {...iconProps} className="text-destructive" />;
|
||||
|
|
@ -192,7 +192,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
|
|||
{showControls && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground/70" />
|
||||
<Input
|
||||
placeholder="파일명으로 검색..."
|
||||
value={searchQuery}
|
||||
|
|
@ -219,7 +219,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
|
|||
style={{ maxHeight }}
|
||||
>
|
||||
{filteredFiles.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
{searchQuery ? "검색 결과가 없습니다." : "저장된 파일이 없습니다."}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -232,7 +232,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
|
|||
<div className="font-medium truncate">
|
||||
{file.realFileName || file.savedFileName}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 flex items-center gap-2">
|
||||
<div className="text-sm text-muted-foreground flex items-center gap-2">
|
||||
<span>{formatFileSize(file.fileSize)}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
|
|
@ -273,7 +273,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemove(file)}
|
||||
className="flex items-center gap-1 text-destructive hover:text-red-700"
|
||||
className="flex items-center gap-1 text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -225,7 +225,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
|
|||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="columnName">
|
||||
컬럼명 <span className="text-red-500">*</span>
|
||||
컬럼명 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="columnName"
|
||||
|
|
@ -233,7 +233,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
|
|||
onChange={(e) => updateColumn({ name: e.target.value })}
|
||||
placeholder="column_name"
|
||||
disabled={loading}
|
||||
className={validationErrors.some((e) => e.includes("컬럼명")) ? "border-red-300" : ""}
|
||||
className={validationErrors.some((e) => e.includes("컬럼명")) ? "border-destructive/30" : ""}
|
||||
/>
|
||||
<p className="text-muted-foreground text-xs">영문자로 시작, 영문자/숫자/언더스코어만 사용 가능</p>
|
||||
</div>
|
||||
|
|
@ -255,7 +255,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
|
|||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
입력타입 <span className="text-red-500">*</span>
|
||||
입력타입 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select value={column.inputType} onValueChange={handleInputTypeChange} disabled={loading}>
|
||||
<SelectTrigger>
|
||||
|
|
@ -354,7 +354,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
|
|||
<Button
|
||||
onClick={handleAddColumn}
|
||||
disabled={!isFormValid || loading}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
className="bg-primary hover:bg-primary/90"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export function AuthenticationConfig({
|
|||
|
||||
{/* 인증 타입별 설정 필드 */}
|
||||
{authType === "api-key" && (
|
||||
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
||||
<div className="space-y-4 rounded-md border bg-muted p-4">
|
||||
<h4 className="text-sm font-medium">API Key 설정</h4>
|
||||
|
||||
{/* 키 위치 */}
|
||||
|
|
@ -96,7 +96,7 @@ export function AuthenticationConfig({
|
|||
)}
|
||||
|
||||
{authType === "bearer" && (
|
||||
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
||||
<div className="space-y-4 rounded-md border bg-muted p-4">
|
||||
<h4 className="text-sm font-medium">Bearer Token 설정</h4>
|
||||
|
||||
{/* 토큰 */}
|
||||
|
|
@ -111,14 +111,14 @@ export function AuthenticationConfig({
|
|||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
* Authorization 헤더에 "Bearer {token}" 형식으로 전송됩니다.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{authType === "basic" && (
|
||||
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
||||
<div className="space-y-4 rounded-md border bg-muted p-4">
|
||||
<h4 className="text-sm font-medium">Basic Auth 설정</h4>
|
||||
|
||||
{/* 사용자명 */}
|
||||
|
|
@ -145,12 +145,12 @@ export function AuthenticationConfig({
|
|||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500">* Authorization 헤더에 Base64 인코딩된 인증 정보가 전송됩니다.</p>
|
||||
<p className="text-xs text-muted-foreground">* Authorization 헤더에 Base64 인코딩된 인증 정보가 전송됩니다.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{authType === "oauth2" && (
|
||||
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
||||
<div className="space-y-4 rounded-md border bg-muted p-4">
|
||||
<h4 className="text-sm font-medium">OAuth 2.0 설정</h4>
|
||||
|
||||
{/* Client ID */}
|
||||
|
|
@ -189,12 +189,12 @@ export function AuthenticationConfig({
|
|||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500">* OAuth 2.0 Client Credentials Grant 방식을 사용합니다.</p>
|
||||
<p className="text-xs text-muted-foreground">* OAuth 2.0 Client Credentials Grant 방식을 사용합니다.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{authType === "db-token" && (
|
||||
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
||||
<div className="space-y-4 rounded-md border bg-muted p-4">
|
||||
<h4 className="text-sm font-medium">DB 기반 토큰 설정</h4>
|
||||
|
||||
<div className="space-y-2">
|
||||
|
|
@ -275,14 +275,14 @@ export function AuthenticationConfig({
|
|||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
company_code는 현재 로그인한 사용자의 회사 코드로 자동 필터링됩니다.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{authType === "none" && (
|
||||
<div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
|
||||
<div className="rounded-md border border-dashed p-4 text-center text-sm text-muted-foreground">
|
||||
인증이 필요하지 않은 공개 API입니다.
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
|
|||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 현재 회사 정보 */}
|
||||
<div className="rounded-lg border bg-gradient-to-r from-primary/10 to-primary/5 p-4">
|
||||
<div className="rounded-lg border bg-muted/40 p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/20">
|
||||
<Building2 className="h-5 w-5 text-primary" />
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { Edit, Trash2, HardDrive, FileText, Users } from "lucide-react";
|
||||
import { Company } from "@/types/company";
|
||||
import { COMPANY_TABLE_COLUMNS } from "@/constants/company";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface CompanyTableProps {
|
||||
|
|
@ -14,8 +13,6 @@ interface CompanyTableProps {
|
|||
|
||||
/**
|
||||
* 회사 목록 테이블 컴포넌트
|
||||
* 데스크톱: 테이블 뷰
|
||||
* 모바일/태블릿: 카드 뷰
|
||||
*/
|
||||
export function CompanyTable({ companies, isLoading, onEdit, onDelete }: CompanyTableProps) {
|
||||
const router = useRouter();
|
||||
|
|
@ -52,206 +49,88 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
|
|||
);
|
||||
};
|
||||
|
||||
// 로딩 상태 렌더링
|
||||
if (isLoading) {
|
||||
return (
|
||||
<>
|
||||
{/* 데스크톱 테이블 스켈레톤 */}
|
||||
<div className="bg-card hidden shadow-sm lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{COMPANY_TABLE_COLUMNS.map((column) => (
|
||||
<TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
|
||||
{column.label}
|
||||
</TableHead>
|
||||
))}
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="flex gap-2">
|
||||
<div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
// 데스크톱 테이블 컬럼 정의
|
||||
const columns: RDVColumn<Company>[] = [
|
||||
{
|
||||
key: "company_code",
|
||||
label: "회사코드",
|
||||
width: "150px",
|
||||
render: (value) => <span className="font-mono">{value}</span>,
|
||||
},
|
||||
{
|
||||
key: "company_name",
|
||||
label: "회사명",
|
||||
render: (value) => <span className="font-medium">{value}</span>,
|
||||
},
|
||||
{
|
||||
key: "writer",
|
||||
label: "등록자",
|
||||
width: "200px",
|
||||
},
|
||||
{
|
||||
key: "diskUsage",
|
||||
label: "디스크 사용량",
|
||||
hideOnMobile: true,
|
||||
render: (_value, row) => formatDiskUsage(row),
|
||||
},
|
||||
];
|
||||
|
||||
{/* 모바일/태블릿 카드 스켈레톤 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="flex justify-between">
|
||||
<div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
|
||||
<div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
// 모바일 카드 필드 정의
|
||||
const cardFields: RDVCardField<Company>[] = [
|
||||
{
|
||||
label: "작성자",
|
||||
render: (company) => <span className="font-medium">{company.writer}</span>,
|
||||
},
|
||||
{
|
||||
label: "디스크 사용량",
|
||||
render: (company) => formatDiskUsage(company),
|
||||
},
|
||||
];
|
||||
|
||||
// 데이터가 없을 때
|
||||
if (companies.length === 0) {
|
||||
return (
|
||||
<div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<p className="text-muted-foreground text-sm">등록된 회사가 없습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 실제 데이터 렌더링
|
||||
return (
|
||||
<>
|
||||
{/* 데스크톱 테이블 뷰 (lg 이상) */}
|
||||
<div className="bg-card hidden lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{COMPANY_TABLE_COLUMNS.map((column) => (
|
||||
<TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
|
||||
{column.label}
|
||||
</TableHead>
|
||||
))}
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
|
||||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{companies.map((company) => (
|
||||
<TableRow
|
||||
key={company.regdate + company.company_code}
|
||||
className="bg-background hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{company.company_code}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm font-medium">{company.company_name}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3 text-sm">{company.writer}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">{formatDiskUsage(company)}</TableCell>
|
||||
<TableCell className="h-16 px-6 py-3">
|
||||
<div className="flex gap-2">
|
||||
{/* <Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleManageDepartments(company)}
|
||||
className="h-8 w-8"
|
||||
aria-label="부서관리"
|
||||
>
|
||||
<Users className="h-4 w-4" />
|
||||
</Button> */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(company)}
|
||||
className="h-8 w-8"
|
||||
aria-label="수정"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onDelete(company)}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일/태블릿 카드 뷰 (lg 미만) */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{companies.map((company) => (
|
||||
<div
|
||||
key={company.regdate + company.company_code}
|
||||
className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
|
||||
<ResponsiveDataView<Company>
|
||||
data={companies}
|
||||
columns={columns}
|
||||
keyExtractor={(c) => c.regdate + c.company_code}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="등록된 회사가 없습니다."
|
||||
skeletonCount={10}
|
||||
cardTitle={(c) => c.company_name}
|
||||
cardSubtitle={(c) => <span className="font-mono">{c.company_code}</span>}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="작업"
|
||||
actionsWidth="180px"
|
||||
renderActions={(company) => (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleManageDepartments(company)}
|
||||
className="h-8 w-8"
|
||||
aria-label="부서관리"
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base font-semibold">{company.company_name}</h3>
|
||||
<p className="text-muted-foreground mt-1 font-mono text-sm">{company.company_code}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 정보 */}
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">작성자</span>
|
||||
<span className="font-medium">{company.writer}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">디스크 사용량</span>
|
||||
<div>{formatDiskUsage(company)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 */}
|
||||
<div className="mt-4 flex gap-2 border-t pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleManageDepartments(company)}
|
||||
className="h-9 flex-1 gap-2 text-sm"
|
||||
>
|
||||
<Users className="h-4 w-4" />
|
||||
부서
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => onEdit(company)} className="h-9 flex-1 gap-2 text-sm">
|
||||
<Edit className="h-4 w-4" />
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onDelete(company)}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 flex-1 gap-2 text-sm"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
<Users className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(company)}
|
||||
className="h-8 w-8"
|
||||
aria-label="수정"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onDelete(company)}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
|
||||
aria-label="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -341,14 +341,14 @@ export function CreateTableModal({
|
|||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tableName">
|
||||
테이블명 <span className="text-red-500">*</span>
|
||||
테이블명 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="tableName"
|
||||
value={tableName}
|
||||
onChange={(e) => handleTableNameChange(e.target.value)}
|
||||
placeholder="예: customer_info"
|
||||
className={tableNameError ? "border-red-300" : ""}
|
||||
className={tableNameError ? "border-destructive/30" : ""}
|
||||
/>
|
||||
{tableNameError && <p className="text-destructive text-sm">{tableNameError}</p>}
|
||||
<p className="text-muted-foreground text-xs">영문자로 시작, 영문자/숫자/언더스코어만 사용 가능</p>
|
||||
|
|
@ -369,7 +369,7 @@ export function CreateTableModal({
|
|||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>
|
||||
컬럼 정의 <span className="text-red-500">*</span>
|
||||
컬럼 정의 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Button type="button" variant="outline" size="sm" onClick={addColumn} disabled={loading}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
|
|
@ -440,7 +440,7 @@ export function CreateTableModal({
|
|||
<div className="font-medium">경고:</div>
|
||||
<ul className="list-inside list-disc space-y-1">
|
||||
{validationResult.warnings.map((warning: string, index: number) => (
|
||||
<li key={index} className="text-sm text-orange-600">
|
||||
<li key={index} className="text-sm text-amber-600">
|
||||
{warning}
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -471,7 +471,7 @@ export function CreateTableModal({
|
|||
<Button
|
||||
onClick={handleCreateTable}
|
||||
disabled={!isFormValid || loading || (validationResult && !validationResult.isValid)}
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
className="bg-emerald-600 hover:bg-green-700"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -276,11 +276,11 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
|
|||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
{log.success ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-600" />
|
||||
) : (
|
||||
<XCircle className="h-4 w-4 text-destructive" />
|
||||
)}
|
||||
<span className={log.success ? "text-green-600" : "text-destructive"}>
|
||||
<span className={log.success ? "text-emerald-600" : "text-destructive"}>
|
||||
{log.success ? "성공" : "실패"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -323,7 +323,7 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
|
|||
<CardTitle className="text-sm font-medium">성공</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">{statistics.successfulExecutions}</div>
|
||||
<div className="text-2xl font-bold text-emerald-600">{statistics.successfulExecutions}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
|
|
|||
|
|
@ -484,7 +484,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
|
|||
<div
|
||||
className={`rounded-md border p-3 text-sm ${
|
||||
testResult.success
|
||||
? "border-green-200 bg-green-50 text-green-800"
|
||||
? "border-emerald-200 bg-emerald-50 text-emerald-800"
|
||||
: "border-destructive/20 bg-destructive/10 text-red-800"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -527,7 +527,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
|
|||
</Button>
|
||||
|
||||
{showAdvanced && (
|
||||
<div className="space-y-4 border-l-2 border-gray-200 pl-6">
|
||||
<div className="space-y-4 border-l-2 border-border pl-6">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="connection_timeout">연결 타임아웃 (초)</Label>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ export function HeadersManager({ headers, onChange }: HeadersManagerProps) {
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeHeader(index)}
|
||||
className="h-8 w-8 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
|
||||
className="h-8 w-8 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
@ -127,12 +127,12 @@ export function HeadersManager({ headers, onChange }: HeadersManagerProps) {
|
|||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
|
||||
<div className="rounded-md border border-dashed p-4 text-center text-sm text-muted-foreground">
|
||||
헤더가 없습니다. 헤더 추가 버튼을 클릭하여 추가하세요.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-gray-500">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
* 공통으로 사용할 HTTP 헤더를 설정합니다. 인증 헤더는 별도의 인증 설정에서 관리됩니다.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -239,30 +239,30 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
|
|||
<div className="mb-6 flex items-center justify-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className={`flex items-center gap-2 ${step === "basic" ? "text-primary" : step === "template" || step === "advanced" ? "text-green-600" : "text-gray-400"}`}
|
||||
className={`flex items-center gap-2 ${step === "basic" ? "text-primary" : step === "template" || step === "advanced" ? "text-emerald-600" : "text-muted-foreground/70"}`}
|
||||
>
|
||||
<div
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "basic" ? "bg-primary/20 text-primary" : step === "template" || step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "basic" ? "bg-primary/20 text-primary" : step === "template" || step === "advanced" ? "bg-emerald-100 text-emerald-600" : "bg-muted"}`}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<span className="text-sm font-medium">기본 정보</span>
|
||||
</div>
|
||||
<div className="h-px w-8 bg-gray-300" />
|
||||
<div className="h-px w-8 bg-muted/60" />
|
||||
<div
|
||||
className={`flex items-center gap-2 ${step === "template" ? "text-primary" : step === "advanced" ? "text-green-600" : "text-gray-400"}`}
|
||||
className={`flex items-center gap-2 ${step === "template" ? "text-primary" : step === "advanced" ? "text-emerald-600" : "text-muted-foreground/70"}`}
|
||||
>
|
||||
<div
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "template" ? "bg-primary/20 text-primary" : step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "template" ? "bg-primary/20 text-primary" : step === "advanced" ? "bg-emerald-100 text-emerald-600" : "bg-muted"}`}
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<span className="text-sm font-medium">템플릿 선택</span>
|
||||
</div>
|
||||
<div className="h-px w-8 bg-gray-300" />
|
||||
<div className={`flex items-center gap-2 ${step === "advanced" ? "text-primary" : "text-gray-400"}`}>
|
||||
<div className="h-px w-8 bg-muted/60" />
|
||||
<div className={`flex items-center gap-2 ${step === "advanced" ? "text-primary" : "text-muted-foreground/70"}`}>
|
||||
<div
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "advanced" ? "bg-primary/20 text-primary" : "bg-gray-100"}`}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "advanced" ? "bg-primary/20 text-primary" : "bg-muted"}`}
|
||||
>
|
||||
3
|
||||
</div>
|
||||
|
|
@ -305,7 +305,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
|
|||
<Card
|
||||
key={category.id}
|
||||
className={`cursor-pointer transition-all ${
|
||||
formData.category === category.id ? "bg-accent ring-2 ring-blue-500" : "hover:bg-gray-50"
|
||||
formData.category === category.id ? "bg-accent ring-2 ring-ring" : "hover:bg-muted"
|
||||
}`}
|
||||
onClick={() => setFormData((prev) => ({ ...prev, category: category.id }))}
|
||||
>
|
||||
|
|
@ -314,7 +314,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
|
|||
<IconComponent className="h-5 w-5 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium">{category.name}</div>
|
||||
<div className="text-xs text-gray-500">{category.description}</div>
|
||||
<div className="text-xs text-muted-foreground">{category.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -341,13 +341,13 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
|
|||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>레이아웃 템플릿 *</Label>
|
||||
<p className="mb-3 text-sm text-gray-500">원하는 레이아웃 구조를 선택하세요</p>
|
||||
<p className="mb-3 text-sm text-muted-foreground">원하는 레이아웃 구조를 선택하세요</p>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{LAYOUT_TEMPLATES.map((template) => (
|
||||
<Card
|
||||
key={template.id}
|
||||
className={`cursor-pointer transition-all ${
|
||||
formData.template === template.id ? "bg-accent ring-2 ring-blue-500" : "hover:bg-gray-50"
|
||||
formData.template === template.id ? "bg-accent ring-2 ring-ring" : "hover:bg-muted"
|
||||
}`}
|
||||
onClick={() =>
|
||||
setFormData((prev) => ({
|
||||
|
|
@ -364,8 +364,8 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
|
|||
<Badge variant="secondary">{template.zones}개 영역</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">{template.description}</div>
|
||||
<div className="text-xs text-gray-500">예: {template.example}</div>
|
||||
<div className="rounded bg-gray-100 p-2 text-center font-mono text-xs">{template.icon}</div>
|
||||
<div className="text-xs text-muted-foreground">예: {template.example}</div>
|
||||
<div className="rounded bg-muted p-2 text-center font-mono text-xs">{template.icon}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -418,7 +418,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
|
|||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-sm text-gray-500">개 영역</span>
|
||||
<span className="text-sm text-muted-foreground">개 영역</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -428,17 +428,17 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
|
|||
<div className="space-y-4">
|
||||
{generationResult ? (
|
||||
<Alert
|
||||
className={generationResult.success ? "border-green-200 bg-green-50" : "border-destructive/20 bg-destructive/10"}
|
||||
className={generationResult.success ? "border-emerald-200 bg-emerald-50" : "border-destructive/20 bg-destructive/10"}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription className={generationResult.success ? "text-green-800" : "text-red-800"}>
|
||||
<AlertDescription className={generationResult.success ? "text-emerald-800" : "text-red-800"}>
|
||||
{generationResult.message}
|
||||
{generationResult.success && generationResult.files && (
|
||||
<div className="mt-2">
|
||||
<div className="text-sm font-medium">생성된 파일들:</div>
|
||||
<ul className="mt-1 space-y-1 text-xs">
|
||||
{generationResult.files.map((file, index) => (
|
||||
<li key={index} className="text-green-700">
|
||||
<li key={index} className="text-emerald-700">
|
||||
• {file}
|
||||
</li>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -748,7 +748,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
</SelectContent>
|
||||
</Select>
|
||||
{!isEdit && level !== 1 && (
|
||||
<p className="text-xs text-gray-500">{getText(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE)}</p>
|
||||
<p className="text-xs text-muted-foreground">{getText(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE)}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -817,7 +817,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
}}
|
||||
>
|
||||
<div className="font-medium">{key.langKey}</div>
|
||||
{key.description && <div className="text-xs text-gray-500">{key.description}</div>}
|
||||
{key.description && <div className="text-xs text-muted-foreground">{key.description}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -825,7 +825,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
)}
|
||||
</div>
|
||||
{selectedLangKeyInfo && (
|
||||
<p className="text-xs text-gray-500">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{getText(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SELECTED)
|
||||
.replace("{key}", selectedLangKeyInfo.langKey)
|
||||
.replace("{description}", selectedLangKeyInfo.description)}
|
||||
|
|
@ -896,7 +896,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
{/* 검색 입력 */}
|
||||
<div className="sticky top-0 border-b bg-white p-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
||||
<Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
|
||||
<Input
|
||||
placeholder="화면 검색..."
|
||||
value={screenSearchText}
|
||||
|
|
@ -918,14 +918,14 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
<div
|
||||
key={`screen-${screen.screenId || screen.id || index}-${screen.screenCode || index}`}
|
||||
onClick={() => handleScreenSelect(screen)}
|
||||
className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-gray-100"
|
||||
className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-muted"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-medium">{screen.screenName}</div>
|
||||
<div className="text-xs text-gray-500">{screen.screenCode}</div>
|
||||
<div className="text-xs text-muted-foreground">{screen.screenCode}</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">ID: {screen.screenId || screen.id || "N/A"}</div>
|
||||
<div className="text-xs text-muted-foreground/70">ID: {screen.screenId || screen.id || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -933,7 +933,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
(screen) =>
|
||||
screen.screenName.toLowerCase().includes(screenSearchText.toLowerCase()) ||
|
||||
screen.screenCode.toLowerCase().includes(screenSearchText.toLowerCase()),
|
||||
).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
|
||||
).length === 0 && <div className="px-3 py-2 text-sm text-muted-foreground">검색 결과가 없습니다.</div>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -942,7 +942,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
{/* 선택된 화면 정보 표시 */}
|
||||
{selectedScreen && (
|
||||
<div className="bg-accent rounded-md border p-3">
|
||||
<div className="text-sm font-medium text-blue-900">{selectedScreen.screenName}</div>
|
||||
<div className="text-sm font-medium text-primary">{selectedScreen.screenName}</div>
|
||||
<div className="text-primary text-xs">코드: {selectedScreen.screenCode}</div>
|
||||
<div className="text-primary text-xs">생성된 URL: {formData.menuUrl}</div>
|
||||
</div>
|
||||
|
|
@ -971,7 +971,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
{/* 검색창 */}
|
||||
<div className="border-b p-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute top-2.5 left-2 h-4 w-4 text-gray-400" />
|
||||
<Search className="absolute top-2.5 left-2 h-4 w-4 text-muted-foreground/70" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="대시보드 검색..."
|
||||
|
|
@ -995,13 +995,13 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
<div
|
||||
key={dashboard.id}
|
||||
onClick={() => handleDashboardSelect(dashboard)}
|
||||
className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-gray-100"
|
||||
className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-muted"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-medium">{dashboard.title}</div>
|
||||
{dashboard.description && (
|
||||
<div className="text-xs text-gray-500">{dashboard.description}</div>
|
||||
<div className="text-xs text-muted-foreground">{dashboard.description}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1012,7 +1012,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
dashboard.title.toLowerCase().includes(dashboardSearchText.toLowerCase()) ||
|
||||
(dashboard.description &&
|
||||
dashboard.description.toLowerCase().includes(dashboardSearchText.toLowerCase())),
|
||||
).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
|
||||
).length === 0 && <div className="px-3 py-2 text-sm text-muted-foreground">검색 결과가 없습니다.</div>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -1021,7 +1021,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
|||
{/* 선택된 대시보드 정보 표시 */}
|
||||
{selectedDashboard && (
|
||||
<div className="bg-accent rounded-md border p-3">
|
||||
<div className="text-sm font-medium text-blue-900">{selectedDashboard.title}</div>
|
||||
<div className="text-sm font-medium text-primary">{selectedDashboard.title}</div>
|
||||
{selectedDashboard.description && (
|
||||
<div className="text-primary text-xs">설명: {selectedDashboard.description}</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -745,7 +745,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
|
|||
<span>생성 (C)</span>
|
||||
<Checkbox
|
||||
onCheckedChange={(checked) => handleSelectAll("createYn", checked as boolean)}
|
||||
className="data-[state=checked]:bg-green-600"
|
||||
className="data-[state=checked]:bg-emerald-600"
|
||||
/>
|
||||
</div>
|
||||
</TableHead>
|
||||
|
|
@ -754,7 +754,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
|
|||
<span>조회 (R)</span>
|
||||
<Checkbox
|
||||
onCheckedChange={(checked) => handleSelectAll("readYn", checked as boolean)}
|
||||
className="data-[state=checked]:bg-blue-600"
|
||||
className="data-[state=checked]:bg-primary"
|
||||
/>
|
||||
</div>
|
||||
</TableHead>
|
||||
|
|
@ -772,7 +772,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
|
|||
<span>삭제 (D)</span>
|
||||
<Checkbox
|
||||
onCheckedChange={(checked) => handleSelectAll("deleteYn", checked as boolean)}
|
||||
className="data-[state=checked]:bg-red-600"
|
||||
className="data-[state=checked]:bg-destructive"
|
||||
/>
|
||||
</div>
|
||||
</TableHead>
|
||||
|
|
@ -834,7 +834,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
|
|||
<Checkbox
|
||||
checked={menu.createYn === "Y"}
|
||||
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "createYn", checked as boolean)}
|
||||
className="data-[state=checked]:bg-green-600"
|
||||
className="data-[state=checked]:bg-emerald-600"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
|
|
@ -842,7 +842,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
|
|||
<Checkbox
|
||||
checked={menu.readYn === "Y"}
|
||||
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "readYn", checked as boolean)}
|
||||
className="data-[state=checked]:bg-blue-600"
|
||||
className="data-[state=checked]:bg-primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
|
|
@ -858,7 +858,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
|
|||
<Checkbox
|
||||
checked={menu.deleteYn === "Y"}
|
||||
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "deleteYn", checked as boolean)}
|
||||
className="data-[state=checked]:bg-red-600"
|
||||
className="data-[state=checked]:bg-destructive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -564,7 +564,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
{testResult && (
|
||||
<div
|
||||
className={`rounded-md border p-4 ${
|
||||
testResult.success ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"
|
||||
testResult.success ? "border-emerald-200 bg-emerald-50" : "border-destructive/20 bg-destructive/10"
|
||||
}`}
|
||||
>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
|
|
@ -572,17 +572,17 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
|
|||
{testResult.success ? "성공" : "실패"}
|
||||
</Badge>
|
||||
{testResult.response_time && (
|
||||
<span className="text-sm text-gray-600">응답 시간: {testResult.response_time}ms</span>
|
||||
<span className="text-sm text-muted-foreground">응답 시간: {testResult.response_time}ms</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm">{testResult.message}</p>
|
||||
|
||||
{testResult.status_code && (
|
||||
<p className="mt-1 text-xs text-gray-500">상태 코드: {testResult.status_code}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">상태 코드: {testResult.status_code}</p>
|
||||
)}
|
||||
|
||||
{testResult.error_details && <p className="mt-2 text-xs text-red-600">{testResult.error_details}</p>}
|
||||
{testResult.error_details && <p className="mt-2 text-xs text-destructive">{testResult.error_details}</p>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -79,9 +79,9 @@ export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDelete
|
|||
|
||||
<div className="space-y-4">
|
||||
{/* 경고 메시지 */}
|
||||
<div className="rounded-lg border border-orange-300 bg-orange-50 p-4">
|
||||
<div className="rounded-lg border border-orange-300 bg-amber-50 p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-orange-600" />
|
||||
<AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600" />
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-semibold text-orange-900">정말로 삭제하시겠습니까?</p>
|
||||
<p className="text-xs text-orange-800">
|
||||
|
|
@ -124,7 +124,7 @@ export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDelete
|
|||
<div
|
||||
className={`rounded-lg border p-3 text-sm ${
|
||||
alertType === "success"
|
||||
? "border-green-300 bg-green-50 text-green-800"
|
||||
? "border-green-300 bg-emerald-50 text-emerald-800"
|
||||
: "border-destructive/50 bg-destructive/10 text-destructive"
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
|
|||
{/* 권한 그룹명 */}
|
||||
<div>
|
||||
<Label htmlFor="authName" className="text-xs sm:text-sm">
|
||||
권한 그룹명 <span className="text-red-500">*</span>
|
||||
권한 그룹명 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="authName"
|
||||
|
|
@ -210,7 +210,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
|
|||
{/* 권한 코드 */}
|
||||
<div>
|
||||
<Label htmlFor="authCode" className="text-xs sm:text-sm">
|
||||
권한 코드 <span className="text-red-500">*</span>
|
||||
권한 코드 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="authCode"
|
||||
|
|
@ -243,7 +243,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
|
|||
) : (
|
||||
<div>
|
||||
<Label htmlFor="companyCode" className="text-xs sm:text-sm">
|
||||
회사 <span className="text-red-500">*</span>
|
||||
회사 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
{isSuperAdmin ? (
|
||||
<>
|
||||
|
|
@ -345,10 +345,10 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
|
|||
<div
|
||||
className={`rounded-lg border p-3 text-sm ${
|
||||
alertType === "success"
|
||||
? "border-green-300 bg-green-50 text-green-800"
|
||||
? "border-green-300 bg-emerald-50 text-emerald-800"
|
||||
: alertType === "error"
|
||||
? "border-destructive/50 bg-destructive/10 text-destructive"
|
||||
: "border-blue-300 bg-blue-50 text-blue-800"
|
||||
: "border-primary/40 bg-primary/10 text-primary"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
|
|
|
|||
|
|
@ -223,7 +223,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
</div>
|
||||
|
||||
{selectedMenu && (
|
||||
<div className="rounded-lg border bg-gray-50 p-4">
|
||||
<div className="rounded-lg border bg-muted p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium">
|
||||
|
|
@ -267,7 +267,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
<Monitor className="h-5 w-5" />
|
||||
할당된 화면 ({assignedScreens.length}개)
|
||||
</CardTitle>
|
||||
<Button onClick={openAssignDialog} className="bg-blue-600 hover:bg-blue-700">
|
||||
<Button onClick={openAssignDialog} className="bg-primary hover:bg-primary/90">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
화면 할당
|
||||
</Button>
|
||||
|
|
@ -275,15 +275,15 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="py-8 text-center text-gray-500">로딩 중...</div>
|
||||
<div className="py-8 text-center text-muted-foreground">로딩 중...</div>
|
||||
) : assignedScreens.length === 0 ? (
|
||||
<div className="py-8 text-center text-gray-500">할당된 화면이 없습니다. 화면을 할당해보세요.</div>
|
||||
<div className="py-8 text-center text-muted-foreground">할당된 화면이 없습니다. 화면을 할당해보세요.</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{assignedScreens.map((screen) => (
|
||||
<div
|
||||
key={screen.screenId}
|
||||
className="flex items-center justify-between rounded-lg border p-4 hover:bg-gray-50"
|
||||
className="flex items-center justify-between rounded-lg border p-4 hover:bg-muted"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
|
|
@ -298,7 +298,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
테이블: {screen.tableName} | 생성일: {screen.createdDate.toLocaleDateString()}
|
||||
</p>
|
||||
{screen.description && <p className="mt-1 text-sm text-gray-500">{screen.description}</p>}
|
||||
{screen.description && <p className="mt-1 text-sm text-muted-foreground">{screen.description}</p>}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
|
@ -307,7 +307,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
setSelectedScreen(screen);
|
||||
setShowUnassignDialog(true);
|
||||
}}
|
||||
className="text-destructive hover:text-red-700"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
@ -330,7 +330,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
<div className="space-y-4">
|
||||
{/* 검색 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
|
||||
<Input
|
||||
placeholder="화면명 또는 코드로 검색..."
|
||||
value={searchTerm}
|
||||
|
|
@ -342,13 +342,13 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
{/* 화면 목록 */}
|
||||
<div className="max-h-64 space-y-2 overflow-y-auto">
|
||||
{filteredAvailableScreens.length === 0 ? (
|
||||
<div className="py-4 text-center text-gray-500">할당 가능한 화면이 없습니다.</div>
|
||||
<div className="py-4 text-center text-muted-foreground">할당 가능한 화면이 없습니다.</div>
|
||||
) : (
|
||||
filteredAvailableScreens.map((screen) => (
|
||||
<div
|
||||
key={screen.screenId}
|
||||
className={`cursor-pointer rounded-lg border p-3 transition-colors ${
|
||||
selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : "hover:bg-gray-50"
|
||||
selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : "hover:bg-muted"
|
||||
}`}
|
||||
onClick={() => setSelectedScreen(screen)}
|
||||
>
|
||||
|
|
@ -385,7 +385,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setSelectedScreen(null)}>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleUnassignScreen} className="bg-red-600 hover:bg-red-700">
|
||||
<AlertDialogAction onClick={handleUnassignScreen} className="bg-destructive hover:bg-red-700">
|
||||
할당 해제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ export function SortableCodeItem({
|
|||
}}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-gray-100"
|
||||
className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-muted"
|
||||
title={isExpanded ? "접기" : "펼치기"}
|
||||
>
|
||||
{isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
|
|
@ -135,12 +135,12 @@ export function SortableCodeItem({
|
|||
</Badge>
|
||||
)}
|
||||
{depth === 2 && (
|
||||
<Badge variant="outline" className="bg-blue-50 px-1.5 py-0 text-[10px] text-blue-600">
|
||||
<Badge variant="outline" className="bg-primary/10 px-1.5 py-0 text-[10px] text-primary">
|
||||
중분류
|
||||
</Badge>
|
||||
)}
|
||||
{depth === 3 && (
|
||||
<Badge variant="outline" className="bg-green-50 px-1.5 py-0 text-[10px] text-green-600">
|
||||
<Badge variant="outline" className="bg-emerald-50 px-1.5 py-0 text-[10px] text-emerald-600">
|
||||
소분류
|
||||
</Badge>
|
||||
)}
|
||||
|
|
@ -196,7 +196,7 @@ export function SortableCodeItem({
|
|||
onAddChild();
|
||||
}}
|
||||
title="하위 코드 추가"
|
||||
className="text-blue-600 hover:bg-blue-50 hover:text-blue-700"
|
||||
className="text-primary hover:bg-primary/10 hover:text-primary"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -102,11 +102,11 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
|
|||
const getOperationBadge = (type: string) => {
|
||||
switch (type) {
|
||||
case "INSERT":
|
||||
return <Badge className="bg-green-500">추가</Badge>;
|
||||
return <Badge className="bg-emerald-500">추가</Badge>;
|
||||
case "UPDATE":
|
||||
return <Badge className="bg-blue-500">수정</Badge>;
|
||||
return <Badge className="bg-primary">수정</Badge>;
|
||||
case "DELETE":
|
||||
return <Badge className="bg-red-500">삭제</Badge>;
|
||||
return <Badge className="bg-destructive">삭제</Badge>;
|
||||
default:
|
||||
return <Badge>{type}</Badge>;
|
||||
}
|
||||
|
|
@ -150,7 +150,7 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
|
|||
|
||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-gray-600">작업 유형</label>
|
||||
<label className="mb-1 block text-sm text-muted-foreground">작업 유형</label>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
|
||||
<Select
|
||||
value={operationType || "__all__"}
|
||||
|
|
@ -169,22 +169,22 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-gray-600">시작 날짜</label>
|
||||
<label className="mb-1 block text-sm text-muted-foreground">시작 날짜</label>
|
||||
<Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-gray-600">종료 날짜</label>
|
||||
<label className="mb-1 block text-sm text-muted-foreground">종료 날짜</label>
|
||||
<Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-gray-600">변경자</label>
|
||||
<label className="mb-1 block text-sm text-muted-foreground">변경자</label>
|
||||
<Input placeholder="사용자 ID" value={changedBy} onChange={(e) => setChangedBy(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-gray-600">원본 ID</label>
|
||||
<label className="mb-1 block text-sm text-muted-foreground">원본 ID</label>
|
||||
<Input placeholder="레코드 ID" value={originalId} onChange={(e) => setOriginalId(e.target.value)} />
|
||||
</div>
|
||||
|
||||
|
|
@ -204,7 +204,7 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
|
|||
<LoadingSpinner />
|
||||
</div>
|
||||
) : logs.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-gray-500">변경 이력이 없습니다.</div>
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">변경 이력이 없습니다.</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
|
|
@ -243,7 +243,7 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
|
|||
|
||||
{/* 페이지네이션 */}
|
||||
<div className="flex items-center justify-between border-t pt-4">
|
||||
<div className="text-sm text-gray-600">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
전체 {total}건 (페이지 {page} / {totalPages})
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
|
|
|
|||
|
|
@ -157,12 +157,12 @@ export function TemplateImportExport({ onTemplateImported }: TemplateImportExpor
|
|||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div
|
||||
className="cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-8 text-center transition-colors hover:border-gray-400"
|
||||
className="cursor-pointer rounded-lg border-2 border-dashed border-input p-8 text-center transition-colors hover:border-input"
|
||||
onClick={triggerFileSelect}
|
||||
>
|
||||
<Upload className="mx-auto mb-4 h-12 w-12 text-gray-400" />
|
||||
<p className="mb-2 text-lg font-medium text-gray-900">템플릿 JSON 파일을 선택하세요</p>
|
||||
<p className="text-sm text-gray-500">또는 아래에 JSON 내용을 직접 입력하세요</p>
|
||||
<Upload className="mx-auto mb-4 h-12 w-12 text-muted-foreground/70" />
|
||||
<p className="mb-2 text-lg font-medium text-foreground">템플릿 JSON 파일을 선택하세요</p>
|
||||
<p className="text-sm text-muted-foreground">또는 아래에 JSON 내용을 직접 입력하세요</p>
|
||||
</div>
|
||||
<input ref={fileInputRef} type="file" accept=".json" onChange={handleFileUpload} className="hidden" />
|
||||
</CardContent>
|
||||
|
|
@ -196,7 +196,7 @@ export function TemplateImportExport({ onTemplateImported }: TemplateImportExpor
|
|||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center text-lg">
|
||||
<CheckCircle className="mr-2 h-5 w-5 text-green-600" />
|
||||
<CheckCircle className="mr-2 h-5 w-5 text-emerald-600" />
|
||||
3. 템플릿 미리보기
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
|
|||
|
|
@ -54,28 +54,28 @@ export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuth
|
|||
label: "회사 관리자",
|
||||
description: "자기 회사 데이터 및 사용자 관리 가능",
|
||||
icon: <Building2 className="h-4 w-4" />,
|
||||
color: "text-blue-600",
|
||||
color: "text-primary",
|
||||
},
|
||||
{
|
||||
value: "USER",
|
||||
label: "일반 사용자",
|
||||
description: "자기 회사 데이터 조회/수정만 가능",
|
||||
icon: <User className="h-4 w-4" />,
|
||||
color: "text-gray-600",
|
||||
color: "text-muted-foreground",
|
||||
},
|
||||
{
|
||||
value: "GUEST",
|
||||
label: "게스트",
|
||||
description: "제한된 조회 권한",
|
||||
icon: <Users className="h-4 w-4" />,
|
||||
color: "text-green-600",
|
||||
color: "text-emerald-600",
|
||||
},
|
||||
{
|
||||
value: "PARTNER",
|
||||
label: "협력업체",
|
||||
description: "협력업체 전용 권한",
|
||||
icon: <Shield className="h-4 w-4" />,
|
||||
color: "text-orange-600",
|
||||
color: "text-amber-600",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -158,7 +158,7 @@ export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuth
|
|||
{/* 권한 선택 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="userType" className="text-sm font-medium">
|
||||
새로운 권한 <span className="text-red-500">*</span>
|
||||
새로운 권한 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select value={selectedUserType} onValueChange={setSelectedUserType}>
|
||||
<SelectTrigger className="h-10">
|
||||
|
|
@ -180,9 +180,9 @@ export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuth
|
|||
|
||||
{/* SUPER_ADMIN 경고 */}
|
||||
{showConfirmation && selectedUserType === "SUPER_ADMIN" && (
|
||||
<div className="rounded-lg border border-orange-300 bg-orange-50 p-4">
|
||||
<div className="rounded-lg border border-orange-300 bg-amber-50 p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-orange-600" />
|
||||
<AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600" />
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-semibold text-orange-900">최고 관리자 권한 부여 경고</p>
|
||||
<p className="text-xs text-orange-800">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Shield, ShieldCheck, User as UserIcon, Users, Building2 } from "lucide-react";
|
||||
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
||||
|
||||
interface UserAuthTableProps {
|
||||
users: any[];
|
||||
|
|
@ -72,158 +72,94 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
|
|||
return (paginationInfo.currentPage - 1) * paginationInfo.pageSize + index + 1;
|
||||
};
|
||||
|
||||
// 로딩 스켈레톤
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="bg-card hidden lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">회사</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">부서</TableHead>
|
||||
<TableHead className="h-12 text-center text-sm font-semibold">현재 권한</TableHead>
|
||||
<TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted mx-auto h-6 w-24 animate-pulse rounded-full"></div>
|
||||
</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="bg-muted mx-auto h-8 w-20 animate-pulse rounded"></div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// 데스크톱 테이블 컬럼 정의
|
||||
const columns: RDVColumn<any>[] = [
|
||||
{
|
||||
key: "no",
|
||||
label: "No",
|
||||
width: "80px",
|
||||
className: "text-center",
|
||||
render: (_value, _row, index) => <span>{getRowNumber(index)}</span>,
|
||||
},
|
||||
{
|
||||
key: "userId",
|
||||
label: "사용자 ID",
|
||||
render: (value) => <span className="font-mono">{value}</span>,
|
||||
},
|
||||
{
|
||||
key: "userName",
|
||||
label: "사용자명",
|
||||
},
|
||||
{
|
||||
key: "companyName",
|
||||
label: "회사",
|
||||
hideOnMobile: true,
|
||||
render: (_value, row) => <span>{row.companyName || row.companyCode}</span>,
|
||||
},
|
||||
{
|
||||
key: "deptName",
|
||||
label: "부서",
|
||||
hideOnMobile: true,
|
||||
render: (value) => <span>{value || "-"}</span>,
|
||||
},
|
||||
{
|
||||
key: "userType",
|
||||
label: "현재 권한",
|
||||
className: "text-center",
|
||||
render: (_value, row) => {
|
||||
const typeInfo = getUserTypeInfo(row.userType);
|
||||
return (
|
||||
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
|
||||
{typeInfo.icon}
|
||||
{typeInfo.label}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// 빈 상태
|
||||
if (users.length === 0) {
|
||||
return (
|
||||
<div className="bg-card flex h-64 flex-col items-center justify-center">
|
||||
<p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// 모바일 카드 필드 정의
|
||||
const cardFields: RDVCardField<any>[] = [
|
||||
{
|
||||
label: "회사",
|
||||
render: (user) => <span>{user.companyName || user.companyCode}</span>,
|
||||
},
|
||||
{
|
||||
label: "부서",
|
||||
render: (user) => <span>{user.deptName || "-"}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
// 실제 데이터 렌더링
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 데스크톱 테이블 */}
|
||||
<div className="bg-card hidden lg:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">회사</TableHead>
|
||||
<TableHead className="h-12 text-sm font-semibold">부서</TableHead>
|
||||
<TableHead className="h-12 text-center text-sm font-semibold">현재 권한</TableHead>
|
||||
<TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.map((user, index) => {
|
||||
const typeInfo = getUserTypeInfo(user.userType);
|
||||
return (
|
||||
<TableRow key={user.userId} className="hover:bg-muted/50 transition-colors">
|
||||
<TableCell className="h-16 text-center text-sm">{getRowNumber(index)}</TableCell>
|
||||
<TableCell className="h-16 font-mono text-sm">{user.userId}</TableCell>
|
||||
<TableCell className="h-16 text-sm">{user.userName}</TableCell>
|
||||
<TableCell className="h-16 text-sm">{user.companyName || user.companyCode}</TableCell>
|
||||
<TableCell className="h-16 text-sm">{user.deptName || "-"}</TableCell>
|
||||
<TableCell className="h-16 text-center">
|
||||
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
|
||||
{typeInfo.icon}
|
||||
{typeInfo.label}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="h-16 text-center">
|
||||
<Button variant="outline" size="sm" onClick={() => onEditAuth(user)} className="h-8 gap-1 text-sm">
|
||||
<Shield className="h-3 w-3" />
|
||||
권한 변경
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 모바일 카드 뷰 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
|
||||
{users.map((user, index) => {
|
||||
const typeInfo = getUserTypeInfo(user.userType);
|
||||
<ResponsiveDataView<any>
|
||||
data={users}
|
||||
columns={columns}
|
||||
keyExtractor={(u) => u.userId}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="등록된 사용자가 없습니다."
|
||||
skeletonCount={10}
|
||||
cardTitle={(u) => u.userName}
|
||||
cardSubtitle={(u) => <span className="font-mono">{u.userId}</span>}
|
||||
cardHeaderRight={(u) => {
|
||||
const typeInfo = getUserTypeInfo(u.userType);
|
||||
return (
|
||||
<div
|
||||
key={user.userId}
|
||||
className="bg-card hover:bg-muted/50 rounded-lg border p-4 transition-colors"
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base font-semibold">{user.userName}</h3>
|
||||
<p className="text-muted-foreground mt-1 font-mono text-sm">{user.userId}</p>
|
||||
</div>
|
||||
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
|
||||
{typeInfo.icon}
|
||||
{typeInfo.label}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* 정보 */}
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">회사</span>
|
||||
<span className="font-medium">{user.companyName || user.companyCode}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">부서</span>
|
||||
<span className="font-medium">{user.deptName || "-"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 */}
|
||||
<div className="mt-4 border-t pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onEditAuth(user)}
|
||||
className="h-9 w-full gap-2 text-sm"
|
||||
>
|
||||
<Shield className="h-4 w-4" />
|
||||
권한 변경
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
|
||||
{typeInfo.icon}
|
||||
{typeInfo.label}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}}
|
||||
cardFields={cardFields}
|
||||
actionsLabel="액션"
|
||||
actionsWidth="120px"
|
||||
renderActions={(user) => (
|
||||
<Button variant="outline" size="sm" onClick={() => onEditAuth(user)} className="h-8 gap-1 text-sm">
|
||||
<Shield className="h-3 w-3" />
|
||||
권한 변경
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{paginationInfo.totalPages > 1 && (
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue