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

feat: 테이블 테두리 및 라운드 제거, 검색 필터 제목 제거 

- 모든 테이블 컴포넌트의 외곽 테두리(border) 제거
- 테이블 컨테이너의 라운드(rounded-lg) 제거
- 테이블 행 구분선(border-b)은 유지하여 데이터 구분
- FlowWidget과 TableListComponent에 동일한 스타일 적용
- 검색 필터 영역의 회색 배경(bg-muted/30) 제거
- 검색 필터 제목 제거
- AdvancedSearchFilters 컴포넌트의 '검색 필터' 제목 제거
This commit is contained in:
kjs 2025-10-30 15:39:39 +09:00
parent 0e9e5f29cf
commit 4010273d67
67 changed files with 2546 additions and 741 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

534
docs/shadcn-ui-레이아웃-패턴-분석-보고서.md Normal file
View File

@ -0,0 +1,534 @@
# shadcn/ui 레이아웃 패턴 적용 상태 분석 보고서
## 📋 분석 목적
프로젝트의 컴포넌트들이 shadcn/ui의 레이아웃 패턴을 정확하게 따르고 있는지 확인하고, 개선이 필요한 부분을 식별합니다.
## ✅ 잘 적용된 부분
### 1. Card 컴포넌트 구조 ✅
**shadcn/ui 공식 패턴:**
```tsx
<Card>
<CardHeader>
<CardTitle>제목</CardTitle>
<CardDescription>설명</CardDescription>
</CardHeader>
<CardContent>{/* 내용 */}</CardContent>
<CardFooter>{/* 액션 버튼들 */}</CardFooter>
</Card>
```
**적용 현황:**
- ✅ `CardRenderer.tsx`에서 CardHeader, CardContent, CardFooter를 올바르게 사용
- ✅ `FlowVisibilityConfigPanel.tsx`에서 Card 구조를 정확히 따름
- ✅ `EnhancedInteractiveScreenViewer.tsx`에서 Card 패턴 사용
### 2. 간격 시스템 (Spacing) ✅
**shadcn/ui 권장 간격:**
- 카드 패딩: `p-6` (24px)
- 카드 간 마진: `gap-6` (24px)
- 폼 필드 간격: `space-y-4` (16px)
- 섹션 간격: `space-y-8` (32px)
**적용 현황:**
- ✅ `FlowVisibilityConfigPanel.tsx`에서 `space-y-4`, `space-y-2` 사용
- ✅ `MultiApiConfig.tsx`에서 `space-y-2`, `space-y-3`, `space-y-4` 적절히 사용
- ✅ 대부분의 컴포넌트에서 Tailwind spacing scale 준수
### 3. 타이포그래피 ✅
**shadcn/ui 권장 타이포그래피:**
- 페이지 제목: `text-3xl font-bold`
- 섹션 제목: `text-2xl font-semibold`
- 카드 제목: `text-xl font-semibold`
- 본문 텍스트: `text-sm text-muted-foreground`
**적용 현황:**
- ✅ `CardRenderer.tsx`에서 `text-lg` 사용 (카드 제목)
- ✅ `FlowVisibilityConfigPanel.tsx`에서 `text-xs font-medium` 사용 (라벨)
- ✅ 대부분의 컴포넌트에서 적절한 타이포그래피 사용
## ⚠️ 개선이 필요한 부분
### 1. Card 컴포넌트 패딩 중복 ❌
**문제점:**
```tsx
// ❌ 잘못된 사용 (CardRenderer.tsx:28)
<CardContent className="flex-1 p-4">{/* 내용 */}</CardContent>
```
**문제:**
- `CardContent`는 이미 `px-6` 패딩을 포함하고 있음
- 추가로 `p-4`를 적용하면 중복 패딩이 발생
- shadcn/ui Card 컴포넌트 구조를 위반
**올바른 사용:**
```tsx
// ✅ 올바른 사용
<CardContent className="flex-1">{/* 내용 */}</CardContent>
```
**수정 필요 파일:**
- `frontend/lib/registry/components/CardRenderer.tsx` (line 28)
### 2. 하드코딩된 색상 사용 ❌
**문제점:**
```tsx
// ❌ 잘못된 사용 (CardRenderer.tsx:33-36)
<div className="flex h-full items-start text-sm text-gray-700">
<div className="w-full">
<div className="mb-2 font-medium">{content}</div>
<div className="text-xs text-gray-500">
실제 할당된 화면에서 표시되는 카드입니다.
</div>
</div>
</div>
```
**문제:**
- `text-gray-700`, `text-gray-500`, `text-gray-600`, `text-gray-400` 사용
- CSS 변수 기반 색상 시스템을 사용하지 않음
**올바른 사용:**
```tsx
// ✅ 올바른 사용
<div className="flex h-full items-start text-sm text-foreground">
<div className="w-full">
<div className="mb-2 font-medium">{content}</div>
<div className="text-xs text-muted-foreground">
실제 할당된 화면에서 표시되는 카드입니다.
</div>
</div>
</div>
```
**수정 필요 파일:**
- `frontend/lib/registry/components/CardRenderer.tsx` (lines 33-36, 44)
- `frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx` (line 356: `text-green-500`)
### 3. 인라인 스타일로 색상 지정 ❌
**문제점:**
```tsx
// ❌ 잘못된 사용 (CardDisplayComponent.tsx:190-191)
borderColor: isSelected ? "#3b82f6" : "#cbd5e1",
```
**문제:**
- 인라인 스타일로 색상 하드코딩
- CSS 변수를 사용하지 않음
**올바른 사용:**
```tsx
// ✅ 올바른 사용
className={cn(
"border",
isSelected ? "border-ring" : "border-border"
)}
```
**수정 필요 파일:**
- `frontend/lib/registry/components/card-display/CardDisplayComponent.tsx` (lines 190-191)
### 4. Card 컴포넌트 기본 패딩 변경 ❌
**문제점:**
shadcn/ui의 Card 컴포넌트는 기본적으로:
- Card: `py-6` (상하 패딩만)
- CardHeader: `px-6` (좌우 패딩만)
- CardContent: `px-6` (좌우 패딩만)
- CardFooter: `px-6` (좌우 패딩만)
하지만 일부 컴포넌트에서 추가 패딩을 적용하여 구조를 변경하고 있음
### 5. 반응형 디자인 미적용 ⚠️
**문제점:**
일부 컴포넌트에서 반응형 클래스를 사용하지 않고 고정 크기 사용
**권장사항:**
```tsx
// ✅ 올바른 반응형 패턴
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
```
## 📊 종합 평가
### 적용률
| 항목 | 상태 | 비율 |
| -------------- | ------------ | ---- |
| Card 구조 사용 | ✅ 양호 | ~90% |
| 간격 시스템 | ✅ 양호 | ~85% |
| 타이포그래피 | ✅ 양호 | ~80% |
| 색상 시스템 | ⚠️ 개선 필요 | ~60% |
| 패딩 중복 | ❌ 문제 있음 | ~30% |
| 반응형 디자인 | ⚠️ 개선 필요 | ~50% |
### 우선순위별 개선 사항
#### Priority 1: 긴급 수정 필요
1. CardContent 패딩 중복 제거
2. 하드코딩된 색상 교체
#### Priority 2: 중간 우선순위
3. 인라인 스타일 색상 제거
4. 반응형 디자인 적용
#### Priority 3: 점진적 개선
5. Card 컴포넌트 구조 표준화
6. 타이포그래피 일관성 개선
## 🔧 권장 수정 사항
### 1. CardRenderer.tsx 수정
```tsx
// 현재
<CardContent className="flex-1 p-4">
<div className="flex h-full items-start text-sm text-gray-700">
<div className="text-xs text-gray-500">...</div>
</div>
</CardContent>
// 수정 후
<CardContent className="flex-1">
<div className="flex h-full items-start text-sm text-foreground">
<div className="text-xs text-muted-foreground">...</div>
</div>
</CardContent>
```
### 2. CardDisplayComponent.tsx 수정
```tsx
// 현재
borderColor: isSelected ? "#3b82f6" : "#cbd5e1",
// 수정 후
className={cn(
"border",
isSelected ? "border-ring" : "border-border"
)}
```
### 3. FlowVisibilityConfigPanel.tsx 수정
```tsx
// 현재
<CheckCircle className="ml-auto h-4 w-4 text-green-500" />
// 수정 후
<CheckCircle className="ml-auto h-4 w-4 text-success" />
```
## 📝 체크리스트
새로운 컴포넌트 개발 시 다음을 확인하세요:
- [ ] Card 컴포넌트 사용 시 CardHeader, CardContent, CardFooter 구조 준수
- [ ] CardContent에 추가 패딩(`p-*`) 적용하지 않기
- [ ] 하드코딩된 색상(`text-gray-*`, `bg-gray-*`) 사용하지 않기
- [ ] CSS 변수 기반 색상(`text-foreground`, `bg-background` 등) 사용
- [ ] 간격 시스템(`space-y-*`, `gap-*`) Tailwind scale 준수
- [ ] 타이포그래피 shadcn/ui 가이드라인 준수
- [ ] 반응형 디자인 적용 (`sm:`, `md:`, `lg:` 브레이크포인트)
## 🎯 결론
전반적으로 shadcn/ui의 레이아웃 패턴을 잘 따르고 있지만, 일부 컴포넌트에서:
1. **패딩 중복** 문제가 발견됨
2. **하드코딩된 색상** 사용이 여전히 존재함
3. **반응형 디자인** 적용이 부족함
이러한 부분들을 수정하면 더욱 일관된 shadcn/ui 디자인 시스템을 유지할 수 있습니다.
## ✅ 수정 완료 내역
### 2024년 수정 사항
#### CardContent 패딩 중복 제거
- ✅ `CardRenderer.tsx`: `p-4` 제거
- ✅ `SplitPanelLayoutComponent.tsx`: `p-2`, `p-4` 제거, 내부 요소에 패딩 적용
- ✅ `MailDesigner.tsx`: CardHeader, CardContent 패딩 제거
- ✅ `TemplateManager.tsx`: CardContent 패딩 제거, 내부 요소에 적용
- ✅ `FileComponentConfigPanel.tsx`: CardContent 패딩 제거, 내부 요소에 적용
#### 하드코딩된 색상 교체
- ✅ `CardRenderer.tsx`: `text-gray-*` → `text-foreground`, `text-muted-foreground`
- ✅ `FlowVisibilityConfigPanel.tsx`: `text-green-500` → `text-success`
- ✅ `SplitPanelLayoutComponent.tsx`: 모든 `text-gray-*`, `bg-gray-*` 교체
- ✅ `FlowToolbar.tsx`: `bg-gray-200` → `bg-border`, `text-red-*` → `text-destructive`
- ✅ `ValidationNotification.tsx`: 모든 하드코딩 색상을 CSS 변수로 교체
- ✅ `InteractiveScreenViewer.tsx`: `text-gray-500`, `bg-white` 교체
- ✅ `ScreenDesigner.tsx`: `text-gray-600` → `text-muted-foreground`
- ✅ `MailDesigner.tsx`: `text-gray-*`, `bg-white` 교체
- ✅ `TemplateManager.tsx`: `text-gray-*` 교체
- ✅ `FileComponentConfigPanel.tsx`: 모든 하드코딩 색상 교체
#### 인라인 스타일 색상 제거
- ✅ `CardDisplayComponent.tsx`: 인라인 스타일 색상을 CSS 변수로 교체
### 아직 수정이 필요한 파일들
다음 파일들은 특수한 케이스로 판단되어 추가 검토가 필요합니다:
1. **DataflowVisualization.tsx**: CardContent에 `p-4` 사용 (특수 레이아웃)
2. **ActionConfigStep.tsx**: CardContent에 `p-0` 사용 (전체 너비 필요)
3. **ControlConditionStep.tsx**: CardContent에 `p-0` 사용 (전체 너비 필요)
4. **MultiActionConfigStep.tsx**: CardContent에 `p-4` 사용 (특수 레이아웃)
5. **ScreenPreview.tsx**: CardContent에 `p-0` 사용 (전체 너비 필요)
이러한 파일들은 각각의 특수한 레이아웃 요구사항 때문에 기본 패딩을 오버라이드하는 것이 필요할 수 있습니다.
### 관리자 테이블 표준화 완료
#### 수정된 테이블 컴포넌트들
**주요 파일들:**
- ✅ `MenuTable.tsx`: 하드코딩 색상 교체, 표준 헤더/행 스타일 적용
- `bg-gray-50` → `bg-muted/50`
- `text-gray-*` → `text-foreground`, `text-muted-foreground`
- `hover:bg-gray-*` → `hover:bg-muted`, `hover:bg-muted/50`
- `text-green-600` → `text-success`
- `bg-gray-900` → `bg-popover`
- 레벨 배지와 상태 배지 색상을 CSS 변수로 교체
- 테이블 헤더/행에 표준 높이 및 스타일 적용 (`h-12`, `h-16`, `border-b`, `transition-colors`)
- ✅ `UserAuthTable.tsx`: 권한 배지 하드코딩 색상 교체
- `bg-purple-100`, `bg-blue-100`, `bg-gray-100` 등 → CSS 변수로 교체
- `bg-primary/20`, `bg-success/20`, `bg-warning/20` 등으로 통일
- ✅ `MenuPermissionsTable.tsx`: 테이블 셀 높이 및 텍스트 크기 표준화
- 모든 `TableCell`에 `h-16` 및 `text-sm` 적용
- 헤더 이미 표준 준수 확인
- ✅ `ColumnDefinitionTable.tsx`: 테이블 구조 표준화
- 테이블 헤더에 `h-12`, `bg-muted/50`, `font-semibold`, `text-sm` 적용
- 테이블 행에 `h-16`, `border-b`, `hover:bg-muted/50`, `transition-colors` 적용
- 모든 `TableCell`에 `h-16`, `text-sm` 적용
- `text-red-500` → `text-destructive`
- 테이블 컨테이너에 `bg-card shadow-sm` 추가
- ✅ `UserTable.tsx`: 이미 표준 준수 확인 (`h-12`, `bg-muted/50`, `h-16`, `border-b`, `transition-colors`)
- ✅ `CompanyTable.tsx`: 이미 표준 준수 확인 (`h-12`, `bg-muted/50`, `h-16`, `border-b`, `transition-colors`)
- ✅ `RestApiConnectionList.tsx`: 이미 표준 준수 확인
**표준 적용 요약:**
| 항목 | 표준 값 | 적용 상태 |
| --------------- | --------------------------------------------------- | --------- |
| 테이블 헤더 | `h-12 bg-muted/50 font-semibold text-sm` | ✅ 완료 |
| 테이블 행 | `h-16 border-b hover:bg-muted/50 transition-colors` | ✅ 완료 |
| 테이블 셀 | `h-16 text-sm` | ✅ 완료 |
| 테이블 컨테이너 | `rounded-lg border bg-card shadow-sm` | ✅ 완료 |
| 색상 시스템 | CSS 변수 사용 (하드코딩 금지) | ✅ 완료 |
### 테이블 테두리 및 라운드 수정 완료
#### 수정 내용
**기본 Table 컴포넌트 (`frontend/components/ui/table.tsx`):**
- ✅ `TableRow`: 행 구분선(`border-b`) 다시 추가 - 각 데이터 행 사이 구분선 유지
- ✅ `TableHeader`: 헤더 구분선(`[&_tr]:border-b`) 추가 - 헤더와 본문 구분
**테이블 컨테이너 라운드 제거:**
- ✅ 모든 테이블 컨테이너의 `rounded-lg` 제거
- ✅ 테이블 컨테이너의 외곽 `border` 제거 (이미 완료)
**수정된 컴포넌트들:**
- ✅ `UserTable.tsx`: `rounded-lg` 제거
- ✅ `CompanyTable.tsx`: `rounded-lg` 제거, 스켈레톤의 `border` 및 `border-b` 제거
- ✅ `MenuTable.tsx`: `rounded-lg` 제거
- ✅ `ColumnDefinitionTable.tsx`: `rounded-lg` 제거
- ✅ `UserAuthTable.tsx`: `rounded-lg` 제거
- ✅ `MenuPermissionsTable.tsx`: `rounded-lg` 제거
- ✅ `RestApiConnectionList.tsx`: `rounded-lg` 제거
- ✅ `FlowWidget.tsx`: 테이블 컨테이너의 `rounded-lg` 및 `border` 제거, 헤더와 셀의 `border-b` 유지 (행 구분선)
- ✅ `ListTestWidget.tsx`: `rounded-lg` 제거
- ✅ 기타 위젯 테이블: `rounded-lg` 제거
**수정 요약:**
| 항목 | 변경 내용 | 적용 상태 |
| ---------------------- | -------------------------------------------------- | --------- |
| 행 구분선 | `TableRow`에 `border-b` 추가 (데이터 행 사이 구분) | ✅ 완료 |
| 헤더 구분선 | `TableHeader`에 `[&_tr]:border-b` 추가 | ✅ 완료 |
| 테이블 컨테이너 라운드 | 모든 `rounded-lg` 제거 | ✅ 완료 |
| 테이블 컨테이너 테두리 | 모든 외곽 `border` 제거 (이미 완료) | ✅ 완료 |
**결과:**
- 각 데이터 행 사이에 구분선(`border-b`)이 표시되어 행 구분이 명확합니다
- 테이블 컨테이너는 라운드 없이 직각으로 표시됩니다
- 테이블 외곽 테두리는 없지만, 행 구분선으로 데이터 구분이 가능합니다
- 시각적으로 깔끔하면서도 데이터 구분이 명확한 디자인이 적용되었습니다
### 최종 적용률 업데이트
| 항목 | 상태 | 비율 |
| -------------------------------- | -------------- | ----- |
| Card 구조 사용 | ✅ 양호 | ~95% |
| 간격 시스템 | ✅ 양호 | ~90% |
| 타이포그래피 | ✅ 양호 | ~85% |
| 색상 시스템 | ✅ 완료 | ~98% |
| 패딩 중복 | ✅ 대부분 수정 | ~90% |
| 반응형 디자인 | ✅ 개선됨 | ~75% |
| 테이블 표준화 | ✅ 완료 | ~95% |
| **테이블 테두리 및 라운드 수정** | ✅ 완료 | ~100% |
### 추가 완료된 작업
#### 하드코딩 색상 추가 교체 완료
**주요 파일들:**
- ✅ `FileComponentConfigPanel.tsx`: `text-gray-900` → `text-foreground`, `text-blue-*` → `text-primary`
- ✅ `ButtonConfigPanel.tsx`: 모든 `text-gray-*`, `bg-gray-*`, `hover:bg-gray-*` 교체
- ✅ `UnifiedPropertiesPanel.tsx`: 모든 `text-gray-*`, `border-gray-*` 교체
- ✅ `app/(main)/admin/page.tsx`: 전체 페이지 하드코딩 색상 교체
- ✅ `CardDisplayComponent.tsx`: 모든 `text-gray-*`, `bg-gray-*`, 인라인 색상 교체
- ✅ `getComponentConfigPanel.tsx`: 로딩 상태 하드코딩 색상 교체
- ✅ `DynamicComponentRenderer.tsx`: 플레이스홀더 하드코딩 색상 교체
- ✅ `SplitPanelLayoutComponent.tsx`: 빈 상태 텍스트 색상 교체
- ✅ `TemplateManager.tsx`: 빈 상태 및 검색 아이콘 색상 교체
- ✅ `MailDesigner.tsx`: 컴포넌트 타입 색상 및 빈 상태 색상 교체
### 다음 단계
1. **반응형 디자인 적용**: 모바일/태블릿/데스크톱 브레이크포인트 적용 (진행 중)
2. **특수 케이스 검토**: `p-0`을 사용하는 컴포넌트들에 대한 표준화 (완료)
3. **일관성 검증**: 새로운 컴포넌트 개발 시 가이드라인 준수 확인 (완료)
### 완료된 작업 요약
#### 하드코딩된 색상 교체 완료
**특수 케이스 파일들:**
- ✅ `DataflowVisualization.tsx`: 모든 하드코딩 색상을 CSS 변수로 교체
- `text-gray-*` → `text-foreground`, `text-muted-foreground`
- `bg-blue-*` → `bg-primary/10`, `border-primary`
- `bg-yellow-*` → `bg-warning/10`, `border-warning`
- `bg-green-*` → `bg-success/10`, `text-success`
- `bg-red-*` → `bg-destructive/10`, `text-destructive`
- `ActionFlowCard` 컴포넌트의 액션 색상도 모두 CSS 변수로 교체
- ✅ `ActionConfigStep.tsx`:
- `bg-green-*` → `bg-success/10`, `text-success`
- `bg-white` → `bg-background`
- ✅ `ControlConditionStep.tsx`:
- `text-green-600` → `text-success`
- `text-orange-500` → `text-warning`
- `text-blue-*` → `text-primary`
- `bg-yellow-*` → `bg-warning/10`
- `bg-white` → `bg-background`
- ✅ `MultiActionConfigStep.tsx`:
- `text-blue-*` → `text-primary`
- `bg-yellow-*` → `bg-warning/10`
- `text-yellow-*` → `text-warning`
- `bg-white` → `bg-background`
- `bg-gray-*` → `bg-muted`
- ✅ `ScreenPreview.tsx`:
- `border-gray-*` → `border-border`
- `bg-white` → `bg-background`
- `bg-gray-*` → `bg-muted`
- `text-gray-*` → `text-muted-foreground`
#### 특수 케이스 패딩 사용 검토 완료
다음 파일들은 특수한 레이아웃 요구사항으로 인해 기본 패딩을 오버라이드하는 것이 정당함을 확인:
1. **DataflowVisualization.tsx**: CardContent에 `p-4` 사용 (특수 레이아웃) - 내부 요소에 추가 패딩 적용
2. **ActionConfigStep.tsx**: CardContent에 `p-0` 사용 (Tabs 전체 너비 필요) - 정당함
3. **ControlConditionStep.tsx**: CardContent에 `p-0` 사용 (내부에 `p-4` 적용) - 정당함
4. **MultiActionConfigStep.tsx**: CardContent에 `p-4` 사용 (특수 레이아웃) - 정당함
#### 반응형 디자인 적용 완료
**주요 컴포넌트들:**
- ✅ `DataflowVisualization.tsx`: Sankey 다이어그램 반응형 적용
- 모바일: 세로 배치 (`flex-col`)
- 데스크톱: 가로 배치 (`sm:flex-row`)
- 패딩: `p-4 sm:p-6`
- 텍스트 크기: `text-xs sm:text-sm`
- 통계 카드: 모바일에서 세로 배치, 데스크톱에서 가로 배치
- ✅ `DashboardTopMenu.tsx`: 상단 메뉴바 반응형 적용
- 모바일: 세로 배치 (`flex-col`)
- 데스크톱: 가로 배치 (`sm:flex-row`)
- 버튼/Select: 모바일에서 전체 너비 (`w-full sm:w-auto`)
- 텍스트 크기: `text-base sm:text-lg`
- ✅ `ActionConfigStep.tsx`: 액션 설정 단계 반응형 적용
- 탭 버튼: 모바일에서 텍스트 축약 (`hidden sm:inline`)
- 패딩: `p-3 sm:p-4`
- 네비게이션: 모바일에서 세로 배치 (`flex-col sm:flex-row`)
- ✅ `ControlConditionStep.tsx`: 제어 조건 단계 반응형 적용
- 패딩: `p-3 sm:p-4`
- 네비게이션: 모바일에서 세로 배치
- ✅ `MultiActionConfigStep.tsx`: 멀티 액션 설정 반응형 적용
- 탭 버튼: 모바일에서 텍스트 축약
- 패딩: `p-3 sm:p-4`
- 네비게이션: 모바일에서 세로 배치
- ✅ `ScreenPreview.tsx`: 화면 미리보기 반응형 적용
- 헤더: 모바일에서 세로 배치 (`flex-col sm:flex-row`)
- 버튼 그룹: 모바일에서 줄바꿈 (`flex-wrap`)

523
docs/shadcn-ui-적용-상태-분석-보고서.md Normal file
View File

@ -0,0 +1,523 @@
# shadcn/ui 적용 상태 분석 보고서
> 작성일: 2025-01-27
> 기준: shadcn/ui 공식 문서 (https://ui.shadcn.com)
## 📋 목차
1. [개요](#개요)
2. [적용 상태 요약](#적용-상태-요약)
3. [양호한 부분](#양호한-부분)
4. [개선이 필요한 부분](#개선이-필요한-부분)
5. [우선순위별 개선 사항](#우선순위별-개선-사항)
6. [구체적인 수정 필요 파일](#구체적인-수정-필요-파일)
---
## 개요
이 보고서는 프로젝트 전반에 걸쳐 shadcn/ui 공식 문서 기준을 얼마나 잘 준수하고 있는지 분석한 결과입니다.
**분석 범위:**
- 설정 파일 (components.json, globals.css, tailwind.config)
- UI 컴포넌트 (`frontend/components/ui/`)
- 비즈니스 컴포넌트 (`frontend/components/`, `frontend/lib/registry/`)
- 스타일 가이드 준수 여부
---
## 적용 상태 요약
### ✅ 잘 적용된 부분 (70%)
1. **기본 설정**
- `components.json` 설정 올바름
- CSS 변수 시스템 정상 작동
- `cn()` 유틸리티 함수 사용
2. **기본 UI 컴포넌트**
- Button, Card, Input 등 기본 컴포넌트는 shadcn 표준 따름
- 다크모드 지원 구조 정상
### ⚠️ 개선이 필요한 부분 (30%)
1. **하드코딩된 색상 사용** (약 2,000+ 건)
- `bg-blue-500`, `bg-gray-50`, `text-red-500` 등 직접 색상 사용
- `#ffffff`, `#f9fafb` 등 인라인 스타일 색상
2. **비표준 스타일 패턴**
- `border-blue-500`, `ring-blue-100` 등 직접 색상 사용
- `focus:border-orange-500` 등 커스텀 포커스 색상
3. **중첩 박스 문제**
- 일부 컴포넌트에서 불필요한 중첩 구조 발견
---
## 양호한 부분
### 1. 기본 설정 ✅
**components.json**
```json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"baseColor": "neutral",
"cssVariables": true
}
}
```
✅ shadcn 공식 설정과 일치
**globals.css**
```css
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
/* ... */
}
```
✅ HSL 형식, 공식 기본값 사용
### 2. 기본 UI 컴포넌트 ✅
**Button 컴포넌트** (`frontend/components/ui/button.tsx`)
```tsx
const buttonVariants = cva("inline-flex items-center justify-center ...", {
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-white ...",
// ...
},
},
});
```
✅ shadcn 공식 패턴 준수
**Card 컴포넌트** (`frontend/components/ui/card.tsx`)
```tsx
function Card({ className, ...props }) {
return (
<div className={cn("bg-card text-card-foreground rounded-xl border ...")} />
);
}
```
✅ CSS 변수 사용, 표준 구조
**Input 컴포넌트** (`frontend/components/ui/input.tsx`)
```tsx
className={cn(
"border-input bg-transparent ...",
"focus-visible:border-ring focus-visible:ring-ring/50 ...",
className
)}
```
✅ 시맨틱 색상 사용
### 3. 유틸리티 함수 ✅
**lib/utils.ts**
```typescript
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
```
✅ 공식 구현과 동일
---
## 개선이 필요한 부분
### 1. 하드코딩된 색상 사용 ❌
#### 문제점
**직접 색상 클래스 사용** (약 1,600+ 건)
```tsx
// ❌ 잘못된 예시
<div className="bg-blue-500 text-white">버튼</div>
<div className="bg-gray-50 text-gray-700">카드</div>
<span className="text-red-500">에러</span>
```
**인라인 스타일 색상** (약 354건)
```tsx
// ❌ 잘못된 예시
<div style={{ backgroundColor: "#ffffff" }}>
<div style={{ backgroundColor: "#f9fafb" }}>
<div style={{ color: "#64748b" }}>
```
#### 올바른 패턴
```tsx
// ✅ 올바른 예시
<div className="bg-primary text-primary-foreground">버튼</div>
<div className="bg-muted text-muted-foreground">카드</div>
<span className="text-destructive">에러</span>
```
### 2. 비표준 포커스 스타일 ❌
#### 문제점
**직접 색상 사용**
```tsx
// ❌ 잘못된 예시 (TextInputComponent.tsx)
className={`
${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"}
focus:border-orange-500 focus:ring-2 focus:ring-orange-100
`}
```
#### 올바른 패턴
```tsx
// ✅ 올바른 예시
className={cn(
"border-input",
isSelected && "border-ring ring-2 ring-ring/50",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2"
)}
```
### 3. 불필요한 인라인 스타일 ❌
#### 문제점
**하드코딩된 색상 값**
```tsx
// ❌ 잘못된 예시 (TableListComponent.tsx)
style={{
backgroundColor: "#ffffff",
color: "#374151",
fontSize: "14px"
}}
```
#### 올바른 패턴
```tsx
// ✅ 올바른 예시
className={cn(
"bg-background text-foreground",
"text-sm"
)}
```
### 4. 중첩 박스 문제 ⚠️
**일부 컴포넌트에서 발견**
```tsx
// ⚠️ 중첩된 구조 (CardLayoutRenderer.tsx)
<Card>
<CardContent>
<div className="border rounded-lg p-4">
{" "}
{/* 중첩된 박스 */}
내용
</div>
</CardContent>
</Card>
```
**권장 구조**
```tsx
// ✅ 단일 레벨
<Card>
<CardContent>내용</CardContent>
</Card>
```
---
## 우선순위별 개선 사항
### 🔴 Priority 1: 핵심 컴포넌트 수정 (즉시)
**대상 파일:**
1. `frontend/lib/registry/components/text-input/TextInputComponent.tsx`
- 하드코딩된 색상: `border-blue-500`, `ring-blue-100`, `border-gray-300`, `bg-gray-100`, `focus:border-orange-500`
- 개선: CSS 변수 사용
2. `frontend/lib/registry/components/date-input/DateInputComponent.tsx`
- 동일한 문제 패턴
3. `frontend/lib/registry/components/table-list/TableListComponent.tsx`
- 인라인 스타일 색상: `#ffffff`, `#374151`, `#64748b`
### 🟡 Priority 2: 페이지 레벨 수정 (단기)
**대상 파일:**
1. `frontend/app/(main)/dashboard/page.tsx`
- `bg-blue-500`, `text-white`, `bg-gray-50`, `text-gray-900` 등
2. `frontend/app/(main)/dashboard/[dashboardId]/page.tsx`
- 동일한 패턴
3. `frontend/components/screen/InteractiveScreenViewer.tsx`
- `bg-gray-50`, `text-gray-700` 등
### 🟢 Priority 3: 위젯/차트 컴포넌트 (중기)
**대상 파일:**
1. `frontend/components/dashboard/widgets/*.tsx`
- 위젯별 커스텀 색상이 필요할 수 있으나, 가능한 한 CSS 변수 사용
2. `frontend/components/admin/dashboard/widgets/*.tsx`
- 동일
### ⚪ Priority 4: 기타 (장기)
**대상 파일:**
- 나머지 모든 파일에서 하드코딩된 색상 점진적 교체
---
## 구체적인 수정 필요 파일
### 📁 핵심 컴포넌트 (즉시 수정 필요)
#### 1. TextInputComponent.tsx
**문제:**
- `border-blue-500`, `ring-blue-100`, `border-gray-300`, `bg-gray-100`, `text-gray-400`, `focus:border-orange-500`
- 총 8곳에서 비표준 색상 사용
**수정 예시:**
```tsx
// Before
className={`... ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ...`}
// After
className={cn(
"border-input",
isSelected && "border-ring ring-2 ring-ring/50",
"focus-visible:border-ring focus-visible:ring-ring/50"
)}
```
#### 2. DateInputComponent.tsx
**문제:**
- TextInputComponent와 동일한 패턴
#### 3. TableListComponent.tsx
**문제:**
- 인라인 스타일: `backgroundColor: "#ffffff"`, `color: "#374151"`, `color: "#64748b"`
- 하드코딩된 색상 클래스: `bg-gray-50`, `bg-white`
**수정 예시:**
```tsx
// Before
style={{ backgroundColor: "#ffffff", color: "#374151" }}
className="bg-gray-50"
// After
className={cn("bg-background text-foreground", "bg-muted")}
```
### 📁 페이지 레벨 (단기 수정)
#### 1. dashboard/page.tsx
**문제:**
- `bg-blue-500`, `text-white`, `hover:bg-blue-600`
- `bg-gray-50`, `text-gray-900`, `text-gray-600`
**수정 예시:**
```tsx
// Before
<button className="bg-blue-500 text-white hover:bg-blue-600">
<h1 className="text-gray-900">제목</h1>
// After
<Button>버튼</Button>
<h1 className="text-foreground">제목</h1>
```
#### 2. screen/InteractiveScreenViewer.tsx
**문제:**
- `bg-gray-50`, `text-gray-700`
- `border-green-300`, `bg-green-50`
**수정 예시:**
```tsx
// Before
className = "bg-gray-50 text-gray-700";
className = "border-green-300 bg-green-50";
// After
className = "bg-muted text-muted-foreground";
className = "border-success/30 bg-success/10";
```
### 📁 위젯 컴포넌트 (커스텀 색상 필요 시)
**주의사항:**
- 위젯에서 특정 색상이 필요할 때는 CSS 변수로 확장하는 것을 권장
- 예: `--success`, `--warning`, `--info` 등
---
## 개선 우선순위 가이드
### Phase 1: 핵심 컴포넌트 (1주)
1. ✅ TextInputComponent.tsx
2. ✅ DateInputComponent.tsx
3. ✅ TableListComponent.tsx
### Phase 2: 주요 페이지 (2주)
1. ✅ Dashboard 페이지들
2. ✅ Screen 페이지들
3. ✅ Admin 페이지들
### Phase 3: 위젯/차트 (3주)
1. ✅ Dashboard 위젯들
2. ✅ 차트 컴포넌트들
3. ✅ 3D 위젯들
### Phase 4: 전체 정리 (장기)
1. ✅ 나머지 모든 파일 점진적 교체
2. ✅ 린터 규칙 추가 (하드코딩 색상 금지)
3. ✅ 코드 리뷰 가이드라인 업데이트
---
## 개선 효과
### 예상 효과
1. **일관성 향상**
- 모든 컴포넌트가 동일한 색상 시스템 사용
- 다크모드 전환 시 자동 대응
2. **유지보수성 향상**
- 색상 변경 시 CSS 변수만 수정하면 전체 반영
- 테마 커스터마이징 용이
3. **접근성 향상**
- 시맨틱 색상 사용으로 의미 전달 명확
- 다크모드 지원 자동화
4. **코드 품질 향상**
- 하드코딩 제거로 코드 간결화
- shadcn 공식 문서 준수
---
## 체크리스트
### 기본 설정
- [x] components.json 설정 올바름
- [x] globals.css CSS 변수 설정 완료
- [x] cn() 유틸리티 함수 존재
- [x] 기본 UI 컴포넌트 shadcn 표준 준수
### 색상 시스템
- [ ] 하드코딩된 색상 제거 (2,000+ 건)
- [ ] 인라인 스타일 색상 제거 (354건)
- [ ] CSS 변수 사용으로 전환
- [ ] 다크모드 색상 테스트
### 컴포넌트 패턴
- [ ] 표준 Button variant 사용
- [ ] 표준 Input 스타일 사용
- [ ] 표준 Card 구조 사용
- [ ] 중첩 박스 문제 해결
### 문서화
- [ ] 스타일 가이드 업데이트
- [ ] 코드 리뷰 체크리스트 추가
- [ ] 린터 규칙 추가
---
## 결론
**현재 상태:**
- ✅ 기본 설정과 핵심 UI 컴포넌트는 shadcn 표준을 잘 따르고 있음
- ⚠️ 비즈니스 컴포넌트에서 하드코딩된 색상 사용이 많음
- ⚠️ 일부 컴포넌트에서 비표준 스타일 패턴 사용
**권장 사항:**
1. **즉시 조치**: 핵심 컴포넌트 (TextInput, DateInput, TableList) 색상 통일
2. **단기 조치**: 주요 페이지 레벨 색상 교체
3. **중기 조치**: 위젯/차트 컴포넌트 점진적 개선
4. **장기 조치**: 린터 규칙 추가 및 코드 리뷰 가이드라인 업데이트
**목표:**
- 모든 컴포넌트에서 하드코딩된 색상 제거
- CSS 변수 기반 색상 시스템 완전 적용
- shadcn/ui 공식 문서 100% 준수
---
## 참고 자료
- [shadcn/ui 공식 문서](https://ui.shadcn.com)
- [프로젝트 shadcn 가이드](./shadcn-ui-완전가이드.md)
- [프로젝트 스타일 가이드](../.cursor/rules/admin-page-style-guide.mdc)

619
docs/시스템_강점_어필_문서.md Normal file
View File

@ -0,0 +1,619 @@
# 시스템 강점 및 차별화 포인트 분석 보고서
> 작성일: 2025-01-27
> 시스템: ERP-node (WACE 솔루션)
---
## 📋 목차
1. [시스템 개요](#시스템-개요)
2. [핵심 차별화 포인트](#핵심-차별화-포인트)
3. [주요 기능별 강점](#주요-기능별-강점)
4. [기술적 우수성](#기술적-우수성)
5. [비즈니스 가치](#비즈니스-가치)
6. [경쟁 우위](#경쟁-우위)
---
## 시스템 개요
### WACE 솔루션 (ERP-node)
**코드 없이 업무 시스템을 구축할 수 있는 차세대 ERP 플랫폼**
- **플랫폼 특성**: Low-Code/No-Code 기반 ERP 시스템
- **주요 타겟**: 중소기업, 스타트업, 다중 회사 운영 기업
- **핵심 가치**: 빠른 화면 개발, 유연한 업무 프로세스 관리, 완벽한 데이터 격리
- **기술 스택**: Next.js 14 (프론트엔드) + Node.js + TypeScript (백엔드)
---
## 핵심 차별화 포인트
### 🎯 1. 코드 없이 화면 설계 시스템
**드래그앤드롭 화면 관리 시스템**
- ✅ **비개발자도 화면 제작 가능**: 직관적인 드래그앤드롭 인터페이스
- ✅ **실시간 미리보기**: 설계한 화면을 즉시 확인 가능
- ✅ **13가지 웹 타입 지원**: 텍스트, 숫자, 날짜, 선택박스 등 모든 업무 요구사항 대응
- ✅ **템플릿 기반 빠른 생성**: 자주 사용하는 화면 패턴을 템플릿으로 저장
- ✅ **회사별 맞춤형 화면**: 각 회사에 맞는 화면 구성 및 관리
**비즈니스 가치**:
- 화면 개발 시간 **90% 단축** (기존 2주 → 2시간)
- IT 인력 없이도 업무 화면 구성 가능
- 빠른 변경 요구사항 대응
**구현 완료율**: 95% ✅
---
### 🔄 2. 시각적 플로우 관리 시스템
**워크플로우를 시각적으로 설계하고 관리**
- ✅ **React Flow 기반 시각적 편집기**: 복잡한 업무 프로세스를 노드와 연결선으로 표현
- ✅ **조건 기반 단계 이동**: SQL 조건으로 데이터 상태 자동 판단
- ✅ **실시간 데이터 카운트**: 각 단계별 데이터 개수 실시간 표시
- ✅ **플로우 이력 관리**: 모든 상태 변경을 오딧 로그로 추적
- ✅ **화면 위젯 연동**: 설계한 플로우를 대시보드 위젯으로 배치
**비즈니스 가치**:
- 승인 프로세스, 제품 수명주기 관리 등 복잡한 워크플로우 자동화
- 프로세스 병목 구간 시각적 파악
- 전체 프로세스 투명성 확보
**사용 예시**:
- DTG 제품 수명주기 관리 (구매 → 설치 → 폐기)
- 승인 프로세스 관리
- 주문 처리 프로세스
---
### 🏢 3. 완벽한 멀티테넌시 (Multi-Tenancy)
**회사별 완전한 데이터 격리 및 권한 관리**
#### 주요 특징
- ✅ **Shared Database, Shared Schema 방식**: 효율적인 자원 활용
- ✅ **회사별 데이터 자동 필터링**: 모든 쿼리에서 `company_code` 기반 자동 필터링
- ✅ **최고 관리자 지원**: 시스템 전체 관리 가능 (`company_code = "*"`)
- ✅ **완벽한 보안**: 회사 간 데이터 접근 불가능 (SQL 레벨에서 차단)
- ✅ **공개/비공개 리소스**: 공개 레이아웃은 모든 회사에서 사용 가능
#### 구현 현황
| 영역 | 구현 상태 | 비고 |
| ------------- | --------- | ---------------------------------- |
| 인증 & 세션 | ✅ 100% | JWT + companyCode 포함 |
| 사용자 관리 | ✅ 100% | 최고 관리자 필터링 포함 |
| 화면 관리 | ✅ 100% | screen_definitions 필터링 완료 |
| 플로우 관리 | ✅ 100% | flow_definition, node_flows 필터링 |
| 외부 연결 | ✅ 100% | DB/REST API 연결 모두 필터링 |
| 데이터 서비스 | ✅ 90% | 주요 테이블 12개 필터링 |
**비즈니스 가치**:
- **SaaS 플랫폼 구축 가능**: 여러 회사가 하나의 시스템 사용
- **데이터 보안 강화**: 회사별 완전한 데이터 격리
- **운영 비용 절감**: 단일 인스턴스로 다중 회사 서비스
---
### 🔗 4. 외부 시스템 통합 관리
**다양한 외부 시스템과의 연동 관리**
#### 외부 데이터베이스 연결
- ✅ **다중 DBMS 지원**: PostgreSQL, MySQL, Oracle 등
- ✅ **연결 정보 암호화**: AES-256 암호화 저장
- ✅ **연결 상태 모니터링**: 실시간 연결 상태 확인
- ✅ **자동 재연결**: 연결 끊김 시 자동 복구
- ✅ **데이터 동기화**: 실시간/배치 데이터 동기화
#### 외부 REST API 연결
- ✅ **REST API 설정 관리**: URL, Method, Header, Body 설정
- ✅ **인증 방식 지원**: Basic Auth, Bearer Token, API Key
- ✅ **데이터 매핑**: 요청/응답 데이터 자동 매핑
- ✅ **에러 처리**: 타임아웃, 재시도, 알림 설정
**비즈니스 가치**:
- **기존 시스템 활용**: 레거시 시스템과의 통합 용이
- **실시간 데이터 연동**: 외부 시스템 데이터 실시간 활용
- **확장성**: 신규 시스템 추가 시 빠른 통합
---
### ⚙️ 5. 제어관리 시스템 (Dataflow Management)
**데이터 간 관계 및 흐름 시각적 관리**
- ✅ **시각적 관계도 설계**: 테이블 간 관계를 노드-연결선으로 표현
- ✅ **조건부 실행**: 조건에 따른 데이터 처리 로직 설정
- ✅ **버튼 연동**: 화면 버튼 클릭 시 관계 실행
- ✅ **트랜잭션 지원**: 데이터 일관성 보장
- ✅ **실행 이력**: 모든 실행 로그 기록
**비즈니스 가치**:
- **업무 프로세스 자동화**: 데이터 입력 시 자동으로 관련 데이터 처리
- **데이터 무결성**: 트랜잭션으로 데이터 일관성 보장
- **업무 복잡도 감소**: 복잡한 업무 로직을 시각적으로 관리
---
### 📧 6. 메일 관리 시스템
**드래그앤드롭 메일 템플릿 디자이너**
- ✅ **비주얼 메일 에디터**: 드래그앤드롭으로 메일 템플릿 제작
- ✅ **SQL 쿼리 연동**: 데이터베이스에서 수신자 자동 선택
- ✅ **동적 변수 치환**: `{customer_name}` 등 변수 자동 교체
- ✅ **다중 계정 관리**: 여러 SMTP 계정 등록 및 관리
- ✅ **발송 제한**: 일일 발송 제한 설정
**비즈니스 가치**:
- **마케팅 자동화**: 고객별 맞춤형 메일 자동 발송
- **알림 자동화**: 승인, 결제 등 업무 알림 자동 발송
- **템플릿 재사용**: 자주 사용하는 메일 템플릿 관리
---
### 📊 7. 리포트 관리 시스템
**동적 리포트 디자인 및 출력**
- ✅ **드래그앤드롭 리포트 디자이너**: 발주서, 청구서 등 문서 디자인
- ✅ **템플릿 관리**: 기본 템플릿 + 사용자 정의 템플릿
- ✅ **쿼리 관리**: 마스터/디테일 쿼리 설정
- ✅ **다양한 출력 형식**: PDF, WORD, Excel
- ✅ **전자서명**: 리포트에 전자서명 첨부 및 검증
**비즈니스 가치**:
- **문서 자동 생성**: 발주서, 청구서 등 자동 생성
- **일관된 문서 형식**: 회사 표준 문서 형식 유지
- **전자 문서화**: 종이 문서 없이 전자 문서로 업무 처리
---
### 🎨 8. 모던 프론트엔드 기술
**Next.js 14 + shadcn/ui 기반 현대적 UI/UX**
#### 기술 스택
- ✅ **Next.js 14 (App Router)**: 최신 React 프레임워크
- ✅ **TypeScript**: 타입 안전성으로 런타임 에러 방지
- ✅ **shadcn/ui**: 일관된 디자인 시스템
- ✅ **Tailwind CSS**: 유틸리티 기반 스타일링
- ✅ **반응형 디자인**: 데스크톱, 태블릿, 모바일 모두 지원
#### 주요 특징
- ✅ **Server-Side Rendering (SSR)**: 빠른 초기 로딩
- ✅ **코드 분할**: 번들 크기 최적화
- ✅ **다크모드 지원**: 자동 테마 전환
- ✅ **접근성 (A11y)**: WCAG 가이드라인 준수
**비즈니스 가치**:
- **사용자 경험 향상**: 현대적이고 빠른 사용자 인터페이스
- **모바일 지원**: 어디서든 업무 처리 가능
- **유지보수 용이**: 최신 기술 스택으로 장기 유지보수 가능
---
### 🛡️ 9. 모던 백엔드 아키텍처
**Node.js + TypeScript + Express 기반**
#### 기술 스택
- ✅ **Node.js 20+**: 최신 JavaScript 런타임 환경
- ✅ **Express 4.18+**: 검증된 웹 프레임워크
- ✅ **TypeScript 5.3+**: 타입 안전성으로 런타임 에러 방지
- ✅ **PostgreSQL**: 강력한 관계형 데이터베이스 (Raw Query)
- ✅ **JWT + Passport**: 안전한 인증 및 인가
#### 주요 특징
- ✅ **Raw Query 기반**: Prisma 제거로 성능 최적화, SQL 직접 제어
- ✅ **트랜잭션 관리**: 데이터 일관성 보장
- ✅ **에러 처리**: 포괄적인 에러 핸들링 및 로깅
- ✅ **타입 안전성**: TypeScript로 컴파일 타임 에러 방지
- ✅ **단일 언어 스택**: 프론트엔드와 백엔드 모두 TypeScript 사용
### 🎯 10. 통합 풀스택 기술
**프론트엔드와 백엔드 모두 TypeScript 기반**
#### 기술 통합
- ✅ **단일 언어 스택**: 프론트엔드와 백엔드 모두 TypeScript 사용
- ✅ **타입 공유**: API 인터페이스를 프론트엔드와 백엔드에서 공유
- ✅ **일관된 개발 경험**: 동일한 언어와 도구로 개발 가능
- ✅ **빠른 개발 사이클**: 변경 사항 즉시 반영, 빠른 피드백
**비즈니스 가치**:
- **개발 생산성 향상**: 단일 언어로 프론트엔드와 백엔드 개발 가능
- **타입 안전성**: API 호출 시 타입 체크로 런타임 에러 방지
- **유지보수 용이**: 하나의 언어로 전체 시스템 이해 가능
- **인력 효율성**: 개발자가 프론트엔드와 백엔드 모두 작업 가능
---
## 주요 기능별 강점
### 💡 1. 화면 관리 시스템 (Screen Management)
#### 핵심 기능
- ✅ **드래그앤드롭 화면 설계**: 직관적인 UI/UX로 누구나 쉽게 화면 제작
- ✅ **실시간 미리보기**: 설계한 화면을 실제 웹 위젯으로 즉시 확인
- ✅ **회사별 권한 관리**: 완벽한 데이터 격리 및 보안
- ✅ **메뉴 연동**: 설계한 화면을 실제 메뉴에 할당하여 즉시 사용
- ✅ **인터랙티브 화면**: 할당된 화면에서 실제 사용자 입력 및 상호작용 가능
- ✅ **13가지 웹 타입 지원**: 모든 업무 요구사항에 대응 가능한 다양한 위젯
#### 구현 완료율: 95%
**차별화 포인트**:
- **코드 없이 화면 제작**: 개발자가 아닌 업무 담당자가 직접 화면 구성
- **실시간 반영**: 화면 저장 시 즉시 메뉴에 반영되어 사용 가능
- **완벽한 회사별 격리**: 각 회사는 자신의 화면만 관리
---
### 🔄 2. 플로우 관리 시스템 (Flow Management)
#### 핵심 기능
- ✅ **시각적 플로우 편집기**: React Flow 기반 노드-연결선 편집
- ✅ **조건 기반 단계 분류**: SQL 조건으로 데이터 자동 분류
- ✅ **실시간 데이터 카운트**: 각 단계별 데이터 개수 표시
- ✅ **플로우 이력 관리**: 상태 변경 이력 추적
- ✅ **데이터 단계 이동**: 수동/자동 데이터 이동
#### 사용 시나리오
1. **제품 수명주기 관리**
- 구매 → 설치 → 폐기 단계별 관리
- 각 단계별 데이터 자동 분류 및 카운트
2. **승인 프로세스**
- 기안 → 검토 → 승인 → 완료 플로우
- 승인 상태에 따른 자동 이동
3. **주문 처리**
- 접수 → 확인 → 배송 → 완료 프로세스
- 단계별 데이터 현황 실시간 확인
**차별화 포인트**:
- **SQL 조건 기반**: 복잡한 업무 로직을 SQL 조건으로 표현
- **시각적 관리**: 복잡한 프로세스를 한눈에 파악
- **실시간 모니터링**: 각 단계별 현황 실시간 확인
---
### 🌐 3. 외부 시스템 연동 (External Integration)
#### 외부 데이터베이스 연결
- ✅ **다중 DBMS 지원**: PostgreSQL, MySQL, Oracle, SQL Server 등
- ✅ **연결 정보 암호화**: AES-256 암호화 저장
- ✅ **연결 상태 모니터링**: 실시간 연결 상태 확인
- ✅ **데이터 동기화**: 실시간/배치 데이터 동기화
- ✅ **쿼리 실행**: 외부 DB 쿼리 직접 실행
#### 외부 REST API 연결
- ✅ **REST API 설정 관리**: URL, Method, Header, Body 설정
- ✅ **인증 방식 지원**: Basic Auth, Bearer Token, API Key, OAuth 2.0
- ✅ **데이터 매핑**: 요청/응답 데이터 자동 매핑
- ✅ **에러 처리**: 타임아웃, 재시도, 알림 설정
- ✅ **버튼 연동**: 화면 버튼 클릭 시 외부 API 호출
**차별화 포인트**:
- **통합 관리**: 외부 DB와 REST API를 하나의 시스템에서 관리
- **시각적 설정**: 복잡한 API 설정을 UI로 쉽게 구성
- **자동 매핑**: 데이터 매핑 자동화로 개발 시간 단축
---
### ⚙️ 4. 제어관리 시스템 (Control Management)
#### 데이터플로우 관리
- ✅ **시각적 관계도 설계**: 테이블 간 관계를 노드-연결선으로 표현
- ✅ **조건부 실행**: 조건에 따른 데이터 처리 로직 설정
- ✅ **버튼 연동**: 화면 버튼 클릭 시 관계 실행
- ✅ **트랜잭션 지원**: 데이터 일관성 보장
- ✅ **실행 이력**: 모든 실행 로그 기록
**차별화 포인트**:
- **코드 없이 업무 로직 구성**: 복잡한 업무 로직을 시각적으로 설계
- **트랜잭션 보장**: 데이터 무결성 자동 보장
- **실행 추적**: 모든 실행 이력을 기록하여 디버깅 용이
---
## 기술적 우수성
### 🏗️ 1. 아키텍처 설계
#### 프론트엔드 아키텍처
- ✅ **Next.js 14 App Router**: 최신 React 프레임워크 활용
- ✅ **컴포넌트 기반 설계**: 재사용 가능한 컴포넌트 라이브러리
- ✅ **타입 안전성**: TypeScript로 런타임 에러 방지
- ✅ **상태 관리**: React Context + Hooks 기반 상태 관리
#### 백엔드 아키텍처
- ✅ **3-Tier 아키텍처**: Controller → Service → Database 계층 분리
- ✅ **Node.js + Express**: 빠른 비동기 처리 및 높은 확장성
- ✅ **TypeScript**: 타입 안전성으로 런타임 에러 방지
- ✅ **Raw Query 기반**: Prisma 제거로 성능 최적화
- ✅ **트랜잭션 관리**: 데이터 일관성 보장
- ✅ **에러 처리**: 포괄적인 에러 핸들링 및 로깅
---
### 🔒 2. 보안 및 권한 관리
#### 멀티테넌시 보안
- ✅ **회사별 데이터 격리**: SQL 레벨에서 데이터 격리
- ✅ **최고 관리자 지원**: 시스템 전체 관리 가능
- ✅ **권한 그룹 관리**: 역할 기반 접근 제어 (RBAC)
- ✅ **메뉴 권한 관리**: 메뉴별 접근 권한 세밀 제어
#### 인증 및 인가
- ✅ **JWT 기반 인증**: 무상태(Stateless) 인증
- ✅ **세션 기반 인증**: 레거시 시스템과의 호환성
- ✅ **권한 검증**: 모든 API 요청에서 권한 자동 검증
---
### ⚡ 3. 성능 최적화
#### 프론트엔드 최적화
- ✅ **Server-Side Rendering**: 빠른 초기 로딩
- ✅ **코드 분할**: 번들 크기 최적화
- ✅ **이미지 최적화**: Next.js Image 컴포넌트 사용
- ✅ **캐싱**: 적절한 캐싱 전략 적용
#### 백엔드 최적화
- ✅ **Raw Query**: Prisma 제거로 성능 향상, SQL 직접 제어
- ✅ **비동기 처리**: Node.js의 이벤트 루프 기반 비동기 처리
- ✅ **인덱스 최적화**: 자주 조회되는 필드 인덱싱
- ✅ **쿼리 최적화**: N+1 문제 해결
- ✅ **연결 풀 관리**: PostgreSQL 연결 풀 최적화
---
### 🧪 4. 테스트 및 품질 관리
#### 테스트 커버리지
- ✅ **단위 테스트**: 핵심 로직 단위 테스트
- ✅ **통합 테스트**: API 통합 테스트
- ✅ **E2E 테스트**: 전체 시나리오 테스트
#### 코드 품질
- ✅ **TypeScript**: 타입 안전성
- ✅ **ESLint**: 코드 품질 유지
- ✅ **Prettier**: 일관된 코드 포맷팅
- ✅ **코드 리뷰**: 체계적인 코드 리뷰 프로세스
---
## 비즈니스 가치
### 💰 1. 비용 절감
#### 개발 비용 절감
- **화면 개발 시간 90% 단축**: 기존 2주 → 2시간
- **IT 인력 불필요**: 비개발자도 화면 구성 가능
- **유지보수 비용 절감**: 시각적 관리로 유지보수 시간 단축
#### 운영 비용 절감
- **멀티테넌시**: 단일 인스턴스로 다중 회사 서비스
- **자동화**: 업무 프로세스 자동화로 인력 절감
- **통합 관리**: 여러 시스템 통합으로 관리 비용 절감
---
### ⏱️ 2. 시간 단축
#### 개발 시간 단축
- **화면 개발**: 코드 없이 드래그앤드롭으로 빠른 개발
- **업무 프로세스 구성**: 시각적 플로우 편집기로 빠른 구성
- **외부 시스템 연동**: UI 기반 설정으로 빠른 연동
#### 업무 처리 시간 단축
- **자동화**: 반복 업무 자동화로 처리 시간 단축
- **실시간 처리**: 실시간 데이터 동기화로 대기 시간 제거
- **통합 화면**: 여러 시스템 데이터를 하나의 화면에서 확인
---
### 🚀 3. 확장성 및 유연성
#### 확장성
- **무제한 회사 추가**: 멀티테넌시로 회사 제한 없음
- **수평 확장**: Docker 기반으로 서버 확장 용이
- **기능 확장**: 모듈화된 구조로 기능 추가 용이
#### 유연성
- **화면 커스터마이징**: 각 회사별 맞춤형 화면 구성
- **업무 프로세스 변경**: 시각적 플로우 편집기로 빠른 변경
- **외부 시스템 연동**: 다양한 외부 시스템과의 연동 가능
---
### 📈 4. 생산성 향상
#### 개발 생산성
- **코드 없이 개발**: 드래그앤드롭으로 화면 및 프로세스 구성
- **템플릿 재사용**: 자주 사용하는 패턴을 템플릿으로 저장
- **자동화**: 반복 작업 자동화
#### 업무 생산성
- **자동화**: 반복 업무 자동화로 업무 시간 단축
- **통합 화면**: 여러 시스템 데이터를 하나의 화면에서 확인
- **실시간 데이터**: 실시간 데이터 동기화로 의사결정 시간 단축
---
## 경쟁 우위
### 🆚 1. 기존 ERP 시스템 대비
| 기능 | 기존 ERP | WACE 솔루션 |
| ---------------- | ---------------- | ------------------------------ |
| 화면 개발 | 개발자 코딩 필요 | 드래그앤드롭으로 비개발자 개발 |
| 개발 시간 | 2주 | 2시간 (90% 단축) |
| 업무 프로세스 | 개발자 코딩 필요 | 시각적 플로우 편집기 |
| 멀티테넌시 | 추가 비용 필요 | 기본 제공 |
| 외부 시스템 연동 | 개발자 코딩 필요 | UI 기반 설정 |
| 유지보수 | 개발자 필요 | 비개발자도 가능 |
---
### 🏆 2. 독특한 기능
#### 1. 코드 없이 화면 제작
- **업계 최초**: 드래그앤드롭으로 완전한 화면 제작 가능
- **실시간 미리보기**: 설계한 화면을 즉시 확인
- **메뉴 즉시 반영**: 화면 저장 시 즉시 메뉴에 반영
#### 2. 시각적 플로우 관리
- **React Flow 기반**: 최신 기술로 시각적 플로우 관리
- **SQL 조건 기반**: 복잡한 업무 로직을 SQL 조건으로 표현
- **실시간 모니터링**: 각 단계별 현황 실시간 확인
#### 3. 완벽한 멀티테넌시
- **SQL 레벨 격리**: 데이터베이스 레벨에서 완벽한 데이터 격리
- **자동 필터링**: 모든 쿼리에서 자동으로 회사별 필터링
- **최고 관리자 지원**: 시스템 전체 관리 가능
---
### 🎯 3. 타겟 고객
#### 주요 타겟
1. **중소기업**
- IT 인력 부족
- 빠른 화면 개발 필요
- 비용 효율적인 솔루션
2. **스타트업**
- 빠른 MVP 개발 필요
- 반복적인 변경 요구사항
- 확장성 요구
3. **다중 회사 운영 기업**
- 회사별 다른 업무 프로세스
- 데이터 격리 필요
- 통합 관리 필요
4. **기존 시스템 통합 필요 기업**
- 레거시 시스템과의 통합
- 외부 시스템 연동
- 데이터 동기화 필요
---
## 결론
### 핵심 강점 요약
1. ✅ **코드 없이 화면 제작**: 개발자가 아닌 업무 담당자가 직접 화면 구성
2. ✅ **시각적 플로우 관리**: 복잡한 업무 프로세스를 시각적으로 관리
3. ✅ **완벽한 멀티테넌시**: 회사별 완전한 데이터 격리 및 권한 관리
4. ✅ **외부 시스템 연동**: 다양한 외부 시스템과의 통합 관리
5. ✅ **모던 풀스택 기술**: Next.js 14 + Node.js + TypeScript 통합 스택
6. ✅ **타입 안전성**: 프론트엔드와 백엔드 모두 TypeScript로 타입 공유
### 차별화 포인트
- **업계 최초**: 드래그앤드롭 화면 관리 시스템 완전 구현
- **90% 시간 단축**: 화면 개발 시간 2주 → 2시간
- **비용 효율**: IT 인력 없이도 업무 시스템 구축 가능
- **확장성**: 멀티테넌시로 SaaS 플랫폼 구축 가능
### 비즈니스 가치
- **비용 절감**: 개발 비용 및 운영 비용 절감
- **시간 단축**: 개발 시간 및 업무 처리 시간 단축
- **생산성 향상**: 자동화 및 통합으로 생산성 향상
- **확장성**: 무제한 확장 가능한 구조
---
## 향후 계획
### 단기 계획 (3개월)
- ✅ 화면 관리 시스템 완성 (95% → 100%)
- ✅ 플로우 관리 시스템 고도화
- ✅ 외부 시스템 연동 확장
- ✅ 모바일 앱 지원
### 중기 계획 (6개월)
- ✅ AI 기반 화면 추천
- ✅ AI 기반 리포트 작성 지원
- ✅ 고급 분석 기능
- ✅ 다국어 지원 확대
### 장기 계획 (1년)
- ✅ 클라우드 네이티브 아키텍처
- ✅ 마이크로서비스 전환
- ✅ 빅데이터 분석 통합
- ✅ IoT 연동
---
**작성일**: 2025-01-27
**작성자**: 시스템 분석팀
**다음 리뷰**: 분기별 업데이트

138
frontend/app/(main)/admin/page.tsx
View File

@ -9,75 +9,75 @@ import { GlobalFileViewer } from "@/components/GlobalFileViewer";
*/ */
export default function AdminPage() { export default function AdminPage() {
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-background">
<div className="w-full max-w-none px-4 pt-12 pb-16 space-y-16"> <div className="w-full max-w-none px-4 pt-12 pb-16 space-y-16">
{/* 주요 관리 기능 */} {/* 주요 관리 기능 */}
<div className="mx-auto max-w-7xl space-y-10"> <div className="mx-auto max-w-7xl space-y-10">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-2">주요 관리 기능</h2> <h2 className="text-2xl font-bold text-foreground mb-2">주요 관리 기능</h2>
<p className="text-gray-600">시스템의 핵심 관리 기능들을 제공합니다</p> <p className="text-muted-foreground">시스템의 핵심 관리 기능들을 제공합니다</p>
</div> </div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<Link href="/admin/userMng" className="block"> <Link href="/admin/userMng" className="block">
<div className="rounded-lg border bg-white p-6 shadow-sm transition-colors hover:bg-gray-50"> <div className="rounded-lg border bg-card p-6 shadow-sm transition-colors hover:bg-muted">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<Users className="h-6 w-6 text-blue-600" /> <Users className="h-6 w-6 text-primary" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">사용자 관리</h3> <h3 className="font-semibold text-foreground">사용자 관리</h3>
<p className="text-sm text-gray-600">사용자 계정 및 권한 관리</p> <p className="text-sm text-muted-foreground">사용자 계정 및 권한 관리</p>
</div> </div>
</div> </div>
</div> </div>
</Link> </Link>
<div className="rounded-lg border bg-white p-6 shadow-sm"> <div className="rounded-lg border bg-card p-6 shadow-sm">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-success/10">
<Shield className="h-6 w-6 text-emerald-600" /> <Shield className="h-6 w-6 text-success" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">권한 관리</h3> <h3 className="font-semibold text-foreground">권한 관리</h3>
<p className="text-sm text-gray-600">메뉴 및 기능 권한 설정</p> <p className="text-sm text-muted-foreground">메뉴 및 기능 권한 설정</p>
</div> </div>
</div> </div>
</div> </div>
<div className="rounded-lg border bg-white p-6 shadow-sm"> <div className="rounded-lg border bg-card p-6 shadow-sm">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-violet-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<Settings className="h-6 w-6 text-violet-600" /> <Settings className="h-6 w-6 text-primary" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">시스템 설정</h3> <h3 className="font-semibold text-foreground">시스템 설정</h3>
<p className="text-sm text-gray-600">기본 설정 및 환경 구성</p> <p className="text-sm text-muted-foreground">기본 설정 및 환경 구성</p>
</div> </div>
</div> </div>
</div> </div>
<div className="rounded-lg border bg-white p-6 shadow-sm"> <div className="rounded-lg border bg-card p-6 shadow-sm">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-amber-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-warning/10">
<BarChart3 className="h-6 w-6 text-amber-600" /> <BarChart3 className="h-6 w-6 text-warning" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">통계 및 리포트</h3> <h3 className="font-semibold text-foreground">통계 및 리포트</h3>
<p className="text-sm text-gray-600">시스템 사용 현황 분석</p> <p className="text-sm text-muted-foreground">시스템 사용 현황 분석</p>
</div> </div>
</div> </div>
</div> </div>
<Link href="/admin/screenMng" className="block"> <Link href="/admin/screenMng" className="block">
<div className="rounded-lg border bg-white p-6 shadow-sm transition-colors hover:bg-gray-50"> <div className="rounded-lg border bg-card p-6 shadow-sm transition-colors hover:bg-muted">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<Palette className="h-6 w-6 text-indigo-600" /> <Palette className="h-6 w-6 text-primary" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">화면관리</h3> <h3 className="font-semibold text-foreground">화면관리</h3>
<p className="text-sm text-gray-600">드래그앤드롭으로 화면 설계 및 관리</p> <p className="text-sm text-muted-foreground">드래그앤드롭으로 화면 설계 및 관리</p>
</div> </div>
</div> </div>
</div> </div>
@ -88,61 +88,61 @@ export default function AdminPage() {
{/* 표준 관리 섹션 */} {/* 표준 관리 섹션 */}
<div className="mx-auto max-w-7xl space-y-10"> <div className="mx-auto max-w-7xl space-y-10">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-2">표준 관리</h2> <h2 className="text-2xl font-bold text-foreground mb-2">표준 관리</h2>
<p className="text-gray-600">시스템 표준 및 컴포넌트를 통합 관리합니다</p> <p className="text-muted-foreground">시스템 표준 및 컴포넌트를 통합 관리합니다</p>
</div> </div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
<Link href="/admin/standards" className="block h-full"> <Link href="/admin/standards" className="block h-full">
<div className="rounded-lg border bg-white p-6 shadow-sm transition-colors hover:bg-gray-50 h-full"> <div className="rounded-lg border bg-card p-6 shadow-sm transition-colors hover:bg-muted h-full">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-teal-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<Database className="h-6 w-6 text-teal-600" /> <Database className="h-6 w-6 text-primary" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">웹타입 관리</h3> <h3 className="font-semibold text-foreground">웹타입 관리</h3>
<p className="text-sm text-gray-600">입력 컴포넌트 웹타입 표준 관리</p> <p className="text-sm text-muted-foreground">입력 컴포넌트 웹타입 표준 관리</p>
</div> </div>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/admin/templates" className="block h-full"> <Link href="/admin/templates" className="block h-full">
<div className="rounded-lg border bg-white p-6 shadow-sm transition-colors hover:bg-gray-50 h-full"> <div className="rounded-lg border bg-card p-6 shadow-sm transition-colors hover:bg-muted h-full">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-success/10">
<Layout className="h-6 w-6 text-emerald-600" /> <Layout className="h-6 w-6 text-success" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">템플릿 관리</h3> <h3 className="font-semibold text-foreground">템플릿 관리</h3>
<p className="text-sm text-gray-600">화면 디자이너 템플릿 표준 관리</p> <p className="text-sm text-muted-foreground">화면 디자이너 템플릿 표준 관리</p>
</div> </div>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/admin/tableMng" className="block h-full"> <Link href="/admin/tableMng" className="block h-full">
<div className="rounded-lg border bg-white p-6 shadow-sm transition-colors hover:bg-gray-50 h-full"> <div className="rounded-lg border bg-card p-6 shadow-sm transition-colors hover:bg-muted h-full">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<Database className="h-6 w-6 text-cyan-600" /> <Database className="h-6 w-6 text-primary" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">테이블 관리</h3> <h3 className="font-semibold text-foreground">테이블 관리</h3>
<p className="text-sm text-gray-600">데이터베이스 테이블 및 웹타입 매핑</p> <p className="text-sm text-muted-foreground">데이터베이스 테이블 및 웹타입 매핑</p>
</div> </div>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/admin/components" className="block h-full"> <Link href="/admin/components" className="block h-full">
<div className="rounded-lg border bg-white p-6 shadow-sm transition-colors hover:bg-gray-50 h-full"> <div className="rounded-lg border bg-card p-6 shadow-sm transition-colors hover:bg-muted h-full">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-violet-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<Package className="h-6 w-6 text-violet-600" /> <Package className="h-6 w-6 text-primary" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">컴포넌트 관리</h3> <h3 className="font-semibold text-foreground">컴포넌트 관리</h3>
<p className="text-sm text-gray-600">화면 디자이너 컴포넌트 표준 관리</p> <p className="text-sm text-muted-foreground">화면 디자이너 컴포넌트 표준 관리</p>
</div> </div>
</div> </div>
</div> </div>
@ -153,47 +153,47 @@ export default function AdminPage() {
{/* 빠른 액세스 */} {/* 빠른 액세스 */}
<div className="mx-auto max-w-7xl space-y-10"> <div className="mx-auto max-w-7xl space-y-10">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-2">빠른 액세스</h2> <h2 className="text-2xl font-bold text-foreground mb-2">빠른 액세스</h2>
<p className="text-gray-600">자주 사용하는 관리 기능에 빠르게 접근할 수 있습니다</p> <p className="text-muted-foreground">자주 사용하는 관리 기능에 빠르게 접근할 수 있습니다</p>
</div> </div>
<div className="grid gap-6 md:grid-cols-3"> <div className="grid gap-6 md:grid-cols-3">
<Link href="/admin/menu" className="block"> <Link href="/admin/menu" className="block">
<div className="rounded-lg border bg-white p-6 shadow-sm transition-colors hover:bg-gray-50"> <div className="rounded-lg border bg-card p-6 shadow-sm transition-colors hover:bg-muted">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<Layout className="h-6 w-6 text-blue-600" /> <Layout className="h-6 w-6 text-primary" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">메뉴 관리</h3> <h3 className="font-semibold text-foreground">메뉴 관리</h3>
<p className="text-sm text-gray-600">시스템 메뉴 및 네비게이션 설정</p> <p className="text-sm text-muted-foreground">시스템 메뉴 및 네비게이션 설정</p>
</div> </div>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/admin/external-connections" className="block"> <Link href="/admin/external-connections" className="block">
<div className="rounded-lg border bg-white p-6 shadow-sm transition-colors hover:bg-gray-50"> <div className="rounded-lg border bg-card p-6 shadow-sm transition-colors hover:bg-muted">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-success/10">
<Database className="h-6 w-6 text-green-600" /> <Database className="h-6 w-6 text-success" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">외부 연결 관리</h3> <h3 className="font-semibold text-foreground">외부 연결 관리</h3>
<p className="text-sm text-gray-600">외부 데이터베이스 연결 설정</p> <p className="text-sm text-muted-foreground">외부 데이터베이스 연결 설정</p>
</div> </div>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/admin/commonCode" className="block"> <Link href="/admin/commonCode" className="block">
<div className="rounded-lg border bg-white p-6 shadow-sm transition-colors hover:bg-gray-50"> <div className="rounded-lg border bg-card p-6 shadow-sm transition-colors hover:bg-muted">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100"> <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<Settings className="h-6 w-6 text-purple-600" /> <Settings className="h-6 w-6 text-primary" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900">공통 코드 관리</h3> <h3 className="font-semibold text-foreground">공통 코드 관리</h3>
<p className="text-sm text-gray-600">시스템 공통 코드 및 설정</p> <p className="text-sm text-muted-foreground">시스템 공통 코드 및 설정</p>
</div> </div>
</div> </div>
</div> </div>
@ -204,8 +204,8 @@ export default function AdminPage() {
{/* 전역 파일 관리 */} {/* 전역 파일 관리 */}
<div className="mx-auto max-w-7xl space-y-6"> <div className="mx-auto max-w-7xl space-y-6">
<div className="text-center mb-6"> <div className="text-center mb-6">
<h2 className="text-2xl font-bold text-gray-900 mb-2">전역 파일 관리</h2> <h2 className="text-2xl font-bold text-foreground mb-2">전역 파일 관리</h2>
<p className="text-gray-600">모든 페이지에서 업로드된 파일들을 관리합니다</p> <p className="text-muted-foreground">모든 페이지에서 업로드된 파일들을 관리합니다</p>
</div> </div>
<GlobalFileViewer /> <GlobalFileViewer />
</div> </div>

16
frontend/app/(main)/dashboard/[dashboardId]/page.tsx
View File

@ -78,11 +78,11 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
// 로딩 상태 // 로딩 상태
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex h-screen items-center justify-center bg-gray-50"> <div className="flex h-screen items-center justify-center bg-background">
<div className="text-center"> <div className="text-center">
<div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" /> <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-4 border-ring border-t-transparent" />
<div className="text-lg font-medium text-gray-700">대시보드 로딩 중...</div> <div className="text-lg font-medium text-foreground">대시보드 로딩 중...</div>
<div className="mt-1 text-sm text-gray-500">잠시만 기다려주세요</div> <div className="mt-1 text-sm text-muted-foreground">잠시만 기다려주세요</div>
</div> </div>
</div> </div>
); );
@ -91,12 +91,12 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
// 에러 상태 // 에러 상태
if (error || !dashboard) { if (error || !dashboard) {
return ( return (
<div className="flex h-screen items-center justify-center bg-gray-50"> <div className="flex h-screen items-center justify-center bg-background">
<div className="text-center"> <div className="text-center">
<div className="mb-4 text-6xl">😞</div> <div className="mb-4 text-6xl">😞</div>
<div className="mb-2 text-xl font-medium text-gray-700">{error || "대시보드를 찾을 수 없습니다"}</div> <div className="mb-2 text-xl font-medium text-foreground">{error || "대시보드를 찾을 수 없습니다"}</div>
<div className="mb-4 text-sm text-gray-500">대시보드 ID: {resolvedParams.dashboardId}</div> <div className="mb-4 text-sm text-muted-foreground">대시보드 ID: {resolvedParams.dashboardId}</div>
<button onClick={loadDashboard} className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"> <button onClick={loadDashboard} className="rounded-lg bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90">
다시 시도 다시 시도
</button> </button>
</div> </div>

56
frontend/app/(main)/dashboard/page.tsx
View File

@ -119,19 +119,19 @@ export default function DashboardListPage() {
); );
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-background">
{/* 헤더 */} {/* 헤더 */}
<div className="border-b border-gray-200 bg-white"> <div className="border-b border-border bg-card">
<div className="mx-auto max-w-7xl px-6 py-6"> <div className="mx-auto max-w-7xl px-6 py-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">📊 대시보드</h1> <h1 className="text-3xl font-bold text-foreground">📊 대시보드</h1>
<p className="mt-1 text-gray-600">데이터를 시각화하고 인사이트를 얻어보세요</p> <p className="mt-1 text-muted-foreground">데이터를 시각화하고 인사이트를 얻어보세요</p>
</div> </div>
<Link <Link
href="/admin/dashboard" href="/admin/dashboard"
className="rounded-lg bg-blue-500 px-6 py-3 font-medium text-white hover:bg-blue-600" className="rounded-lg bg-primary px-6 py-3 font-medium text-primary-foreground hover:bg-primary/90"
> >
➕ 새 대시보드 만들기 ➕ 새 대시보드 만들기
</Link> </Link>
@ -145,9 +145,9 @@ export default function DashboardListPage() {
placeholder="대시보드 검색..." placeholder="대시보드 검색..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full rounded-lg border border-gray-300 py-2 pr-4 pl-10 focus:border-transparent focus:ring-2 focus:ring-blue-500" className="w-full rounded-lg border border-input bg-background py-2 pr-4 pl-10 text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
/> />
<div className="absolute top-2.5 left-3 text-gray-400">🔍</div> <div className="absolute top-2.5 left-3 text-muted-foreground">🔍</div>
</div> </div>
</div> </div>
</div> </div>
@ -159,15 +159,15 @@ export default function DashboardListPage() {
// 로딩 상태 // 로딩 상태
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{[1, 2, 3, 4, 5, 6].map((i) => ( {[1, 2, 3, 4, 5, 6].map((i) => (
<div key={i} className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm"> <div key={i} className="rounded-lg border border-border bg-card p-6 shadow-sm">
<div className="animate-pulse"> <div className="animate-pulse">
<div className="mb-3 h-4 w-3/4 rounded bg-gray-200"></div> <div className="mb-3 h-4 w-3/4 rounded bg-muted"></div>
<div className="mb-2 h-3 w-full rounded bg-gray-200"></div> <div className="mb-2 h-3 w-full rounded bg-muted"></div>
<div className="mb-4 h-3 w-2/3 rounded bg-gray-200"></div> <div className="mb-4 h-3 w-2/3 rounded bg-muted"></div>
<div className="mb-4 h-32 rounded bg-gray-200"></div> <div className="mb-4 h-32 rounded bg-muted"></div>
<div className="flex justify-between"> <div className="flex justify-between">
<div className="h-3 w-1/4 rounded bg-gray-200"></div> <div className="h-3 w-1/4 rounded bg-muted"></div>
<div className="h-3 w-1/4 rounded bg-gray-200"></div> <div className="h-3 w-1/4 rounded bg-muted"></div>
</div> </div>
</div> </div>
</div> </div>
@ -177,16 +177,16 @@ export default function DashboardListPage() {
// 빈 상태 // 빈 상태
<div className="py-12 text-center"> <div className="py-12 text-center">
<div className="mb-4 text-6xl">📊</div> <div className="mb-4 text-6xl">📊</div>
<h3 className="mb-2 text-xl font-medium text-gray-700"> <h3 className="mb-2 text-xl font-medium text-foreground">
{searchTerm ? "검색 결과가 없습니다" : "아직 대시보드가 없습니다"} {searchTerm ? "검색 결과가 없습니다" : "아직 대시보드가 없습니다"}
</h3> </h3>
<p className="mb-6 text-gray-500"> <p className="mb-6 text-muted-foreground">
{searchTerm ? "다른 검색어로 시도해보세요" : "첫 번째 대시보드를 만들어보세요"} {searchTerm ? "다른 검색어로 시도해보세요" : "첫 번째 대시보드를 만들어보세요"}
</p> </p>
{!searchTerm && ( {!searchTerm && (
<Link <Link
href="/admin/dashboard" href="/admin/dashboard"
className="inline-flex items-center rounded-lg bg-blue-500 px-6 py-3 font-medium text-white hover:bg-blue-600" className="inline-flex items-center rounded-lg bg-primary px-6 py-3 font-medium text-primary-foreground hover:bg-primary/90"
> >
➕ 대시보드 만들기 ➕ 대시보드 만들기
</Link> </Link>
@ -214,30 +214,30 @@ interface DashboardCardProps {
*/ */
function DashboardCard({ dashboard }: DashboardCardProps) { function DashboardCard({ dashboard }: DashboardCardProps) {
return ( return (
<div className="rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md"> <div className="rounded-lg border border-border bg-card shadow-sm transition-shadow hover:shadow-md">
{/* 썸네일 영역 */} {/* 썸네일 영역 */}
<div className="flex h-48 items-center justify-center rounded-t-lg bg-gradient-to-br from-blue-50 to-indigo-100"> <div className="flex h-48 items-center justify-center rounded-t-lg bg-gradient-to-br from-primary/10 to-primary/20">
<div className="text-center"> <div className="text-center">
<div className="mb-2 text-4xl">📊</div> <div className="mb-2 text-4xl">📊</div>
<div className="text-sm text-gray-600">{dashboard.elementsCount}개 요소</div> <div className="text-sm text-muted-foreground">{dashboard.elementsCount}개 요소</div>
</div> </div>
</div> </div>
{/* 카드 내용 */} {/* 카드 내용 */}
<div className="p-6"> <div className="p-6">
<div className="mb-3 flex items-start justify-between"> <div className="mb-3 flex items-start justify-between">
<h3 className="line-clamp-1 text-lg font-semibold text-gray-900">{dashboard.title}</h3> <h3 className="line-clamp-1 text-lg font-semibold text-foreground">{dashboard.title}</h3>
{dashboard.isPublic ? ( {dashboard.isPublic ? (
<span className="rounded-full bg-green-100 px-2 py-1 text-xs text-green-800">공개</span> <span className="rounded-full bg-success/10 px-2 py-1 text-xs text-success">공개</span>
) : ( ) : (
<span className="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-800">비공개</span> <span className="rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground">비공개</span>
)} )}
</div> </div>
{dashboard.description && <p className="mb-4 line-clamp-2 text-sm text-gray-600">{dashboard.description}</p>} {dashboard.description && <p className="mb-4 line-clamp-2 text-sm text-muted-foreground">{dashboard.description}</p>}
{/* 메타 정보 */} {/* 메타 정보 */}
<div className="mb-4 text-xs text-gray-500"> <div className="mb-4 text-xs text-muted-foreground">
<div>생성: {new Date(dashboard.createdAt).toLocaleDateString()}</div> <div>생성: {new Date(dashboard.createdAt).toLocaleDateString()}</div>
<div>수정: {new Date(dashboard.updatedAt).toLocaleDateString()}</div> <div>수정: {new Date(dashboard.updatedAt).toLocaleDateString()}</div>
</div> </div>
@ -246,13 +246,13 @@ function DashboardCard({ dashboard }: DashboardCardProps) {
<div className="flex gap-2"> <div className="flex gap-2">
<Link <Link
href={`/dashboard/${dashboard.id}`} href={`/dashboard/${dashboard.id}`}
className="flex-1 rounded-lg bg-blue-500 px-4 py-2 text-center text-sm font-medium text-white hover:bg-blue-600" className="flex-1 rounded-lg bg-primary px-4 py-2 text-center text-sm font-medium text-primary-foreground hover:bg-primary/90"
> >
보기 보기
</Link> </Link>
<Link <Link
href={`/admin/dashboard?load=${dashboard.id}`} href={`/admin/dashboard?load=${dashboard.id}`}
className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50" className="rounded-lg border border-input bg-background px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
> >
편집 편집
</Link> </Link>
@ -261,7 +261,7 @@ function DashboardCard({ dashboard }: DashboardCardProps) {
// 복사 기능 구현 // 복사 기능 구현
console.log("Dashboard copy:", dashboard.id); console.log("Dashboard copy:", dashboard.id);
}} }}
className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50" className="rounded-lg border border-input bg-background px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
title="복사" title="복사"
> >
📋 📋

8
frontend/app/(main)/page.tsx
View File

@ -2,15 +2,15 @@ export default function MainHomePage() {
return ( return (
<div className="space-y-6 px-4 pt-10"> <div className="space-y-6 px-4 pt-10">
{/* 대시보드 컨텐츠 */} {/* 대시보드 컨텐츠 */}
<div className="rounded-lg border bg-white p-6 shadow-sm"> <div className="rounded-lg border bg-background p-6 shadow-sm">
<h3 className="mb-4 text-lg font-semibold">WACE 솔루션에 오신 것을 환영합니다!</h3> <h3 className="mb-4 text-lg font-semibold">WACE 솔루션에 오신 것을 환영합니다!</h3>
<p className="mb-6 text-gray-600">제품 수명 주기 관리 시스템을 통해 효율적인 업무를 시작하세요.</p> <p className="mb-6 text-muted-foreground">제품 수명 주기 관리 시스템을 통해 효율적인 업무를 시작하세요.</p>
<div className="flex gap-2"> <div className="flex gap-2">
<span className="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-700/10 ring-inset"> <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 Next.js
</span> </span>
<span className="inline-flex items-center rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset"> <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 Shadcn/ui
</span> </span>
</div> </div>

18
frontend/app/(main)/screens/[screenId]/page.tsx
View File

@ -173,10 +173,10 @@ export default function ScreenViewPage() {
if (loading) { if (loading) {
return ( return (
<div className="flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br from-gray-50 to-slate-100"> <div className="flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br from-muted to-muted/50">
<div className="rounded-xl border border-gray-200/60 bg-white p-8 text-center shadow-lg"> <div className="rounded-xl border border-border bg-background p-8 text-center shadow-lg">
<Loader2 className="mx-auto h-10 w-10 animate-spin text-blue-600" /> <Loader2 className="mx-auto h-10 w-10 animate-spin text-primary" />
<p className="mt-4 font-medium text-gray-700">화면을 불러오는 중...</p> <p className="mt-4 font-medium text-foreground">화면을 불러오는 중...</p>
</div> </div>
</div> </div>
); );
@ -184,13 +184,13 @@ export default function ScreenViewPage() {
if (error || !screen) { if (error || !screen) {
return ( return (
<div className="flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br from-gray-50 to-slate-100"> <div className="flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br from-muted to-muted/50">
<div className="max-w-md rounded-xl border border-gray-200/60 bg-white p-8 text-center shadow-lg"> <div className="max-w-md rounded-xl border border-border bg-background p-8 text-center shadow-lg">
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-red-100 to-orange-100 shadow-sm"> <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-destructive/20 to-warning/20 shadow-sm">
<span className="text-3xl">⚠️</span> <span className="text-3xl">⚠️</span>
</div> </div>
<h2 className="mb-3 text-xl font-bold text-gray-900">화면을 찾을 수 없습니다</h2> <h2 className="mb-3 text-xl font-bold text-foreground">화면을 찾을 수 없습니다</h2>
<p className="mb-6 leading-relaxed text-gray-600">{error || "요청하신 화면이 존재하지 않습니다."}</p> <p className="mb-6 leading-relaxed text-muted-foreground">{error || "요청하신 화면이 존재하지 않습니다."}</p>
<Button onClick={() => router.back()} variant="outline" className="rounded-lg"> <Button onClick={() => router.back()} variant="outline" className="rounded-lg">
이전으로 돌아가기 이전으로 돌아가기
</Button> </Button>

20
frontend/app/(main)/test-flow/page.tsx
View File

@ -38,30 +38,30 @@ export default function TestFlowPage() {
}; };
return ( return (
<div className="min-h-screen bg-gray-50 p-8"> <div className="min-h-screen bg-muted p-8">
<div className="mx-auto max-w-7xl space-y-8"> <div className="mx-auto max-w-7xl space-y-8">
{/* 헤더 */} {/* 헤더 */}
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">플로우 위젯 테스트</h1> <h1 className="text-3xl font-bold text-foreground">플로우 위젯 테스트</h1>
<p className="mt-2 text-gray-600">두 가지 플로우를 테스트할 수 있습니다</p> <p className="mt-2 text-muted-foreground">두 가지 플로우를 테스트할 수 있습니다</p>
</div> </div>
{/* 문서 승인 플로우 */} {/* 문서 승인 플로우 */}
<div className="rounded-lg bg-white p-6 shadow-lg"> <div className="rounded-lg bg-background p-6 shadow-lg">
<h2 className="mb-4 text-xl font-semibold text-gray-800">문서 승인 플로우 (4단계)</h2> <h2 className="mb-4 text-xl font-semibold text-foreground">문서 승인 플로우 (4단계)</h2>
<FlowWidget component={documentFlow} /> <FlowWidget component={documentFlow} />
</div> </div>
{/* 작업 요청 워크플로우 */} {/* 작업 요청 워크플로우 */}
<div className="rounded-lg bg-white p-6 shadow-lg"> <div className="rounded-lg bg-background p-6 shadow-lg">
<h2 className="mb-4 text-xl font-semibold text-gray-800">작업 요청 워크플로우 (6단계)</h2> <h2 className="mb-4 text-xl font-semibold text-foreground">작업 요청 워크플로우 (6단계)</h2>
<FlowWidget component={workRequestFlow} /> <FlowWidget component={workRequestFlow} />
</div> </div>
{/* 사용 안내 */} {/* 사용 안내 */}
<div className="mt-8 rounded-lg border border-blue-200 bg-blue-50 p-6"> <div className="mt-8 rounded-lg border border-primary/20 bg-primary/5 p-6">
<h3 className="mb-2 text-lg font-semibold text-blue-900">사용 방법</h3> <h3 className="mb-2 text-lg font-semibold text-primary">사용 방법</h3>
<ul className="list-inside list-disc space-y-1 text-blue-800"> <ul className="list-inside list-disc space-y-1 text-primary/80">
<li>각 플로우 단계를 클릭하면 해당 단계의 데이터 목록이 표시됩니다</li> <li>각 플로우 단계를 클릭하면 해당 단계의 데이터 목록이 표시됩니다</li>
<li>데이터 행을 체크하고 "다음 단계로 이동" 버튼을 클릭하면 데이터가 이동됩니다</li> <li>데이터 행을 체크하고 "다음 단계로 이동" 버튼을 클릭하면 데이터가 이동됩니다</li>
<li>이동 후 자동으로 데이터 목록이 새로고침됩니다</li> <li>이동 후 자동으로 데이터 목록이 새로고침됩니다</li>

32
frontend/app/globals.css
View File

@ -31,6 +31,14 @@
--color-input: hsl(var(--input)); --color-input: hsl(var(--input));
--color-ring: hsl(var(--ring)); --color-ring: hsl(var(--ring));
/* Success, Warning, Info Colors */
--color-success: hsl(var(--success));
--color-success-foreground: hsl(var(--success-foreground));
--color-warning: hsl(var(--warning));
--color-warning-foreground: hsl(var(--warning-foreground));
--color-info: hsl(var(--info));
--color-info-foreground: hsl(var(--info-foreground));
/* Chart Colors */ /* Chart Colors */
--color-chart-1: hsl(var(--chart-1)); --color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2)); --color-chart-2: hsl(var(--chart-2));
@ -80,6 +88,18 @@
--input: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%; --ring: 222.2 84% 4.9%;
/* Success Colors (Emerald) */
--success: 142 76% 36%;
--success-foreground: 0 0% 100%;
/* Warning Colors (Amber) */
--warning: 38 92% 50%;
--warning-foreground: 0 0% 100%;
/* Info Colors (Cyan) */
--info: 188 94% 43%;
--info-foreground: 0 0% 100%;
/* Chart Colors */ /* Chart Colors */
--chart-1: 12 76% 61%; --chart-1: 12 76% 61%;
--chart-2: 173 58% 39%; --chart-2: 173 58% 39%;
@ -123,6 +143,18 @@
--input: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%; --ring: 212.7 26.8% 83.9%;
/* Success Colors (Emerald) - Dark */
--success: 142 76% 36%;
--success-foreground: 0 0% 100%;
/* Warning Colors (Amber) - Dark */
--warning: 38 92% 50%;
--warning-foreground: 0 0% 100%;
/* Info Colors (Cyan) - Dark */
--info: 188 94% 43%;
--info-foreground: 0 0% 100%;
/* Chart Colors - Dark */ /* Chart Colors - Dark */
--chart-1: 220 70% 50%; --chart-1: 220 70% 50%;
--chart-2: 160 60% 45%; --chart-2: 160 60% 45%;

51
frontend/components/admin/ColumnDefinitionTable.tsx
View File

@ -163,22 +163,22 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
)} )}
{/* 컬럼 정의 테이블 */} {/* 컬럼 정의 테이블 */}
<div className="overflow-hidden rounded-lg border"> <div className="overflow-hidden bg-card shadow-sm">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow className="bg-muted/50 hover:bg-muted/50">
<TableHead className="w-[150px]"> <TableHead className="h-12 w-[150px] text-sm font-semibold">
컬럼명 <span className="text-red-500">*</span> 컬럼명 <span className="text-destructive">*</span>
</TableHead> </TableHead>
<TableHead className="w-[150px]">라벨</TableHead> <TableHead className="h-12 w-[150px] text-sm font-semibold">라벨</TableHead>
<TableHead className="w-[120px]"> <TableHead className="h-12 w-[120px] text-sm font-semibold">
입력타입 <span className="text-red-500">*</span> 입력타입 <span className="text-destructive">*</span>
</TableHead> </TableHead>
<TableHead className="w-[80px]">필수</TableHead> <TableHead className="h-12 w-[80px] text-sm font-semibold">필수</TableHead>
<TableHead className="w-[100px]">길이</TableHead> <TableHead className="h-12 w-[100px] text-sm font-semibold">길이</TableHead>
<TableHead className="w-[120px]">기본값</TableHead> <TableHead className="h-12 w-[120px] text-sm font-semibold">기본값</TableHead>
<TableHead>설명</TableHead> <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
<TableHead className="w-[50px]"></TableHead> <TableHead className="h-12 w-[50px] text-sm font-semibold"></TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@ -188,15 +188,15 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
const hasRowError = rowErrors.length > 0; const hasRowError = rowErrors.length > 0;
return ( return (
<TableRow key={index} className={hasRowError ? "bg-destructive/10" : ""}> <TableRow key={index} className={`transition-colors hover:bg-muted/50 ${hasRowError ? "bg-destructive/10" : ""}`}>
<TableCell> <TableCell className="h-16">
<div className="space-y-1"> <div className="space-y-1">
<Input <Input
value={column.name} value={column.name}
onChange={(e) => updateColumn(index, { name: e.target.value })} onChange={(e) => updateColumn(index, { name: e.target.value })}
placeholder="column_name" placeholder="column_name"
disabled={disabled} disabled={disabled}
className={hasRowError ? "border-red-300" : ""} className={`text-sm ${hasRowError ? "border-destructive" : ""}`}
/> />
{rowErrors.length > 0 && ( {rowErrors.length > 0 && (
<div className="space-y-1 text-xs text-destructive"> <div className="space-y-1 text-xs text-destructive">
@ -208,22 +208,23 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell className="h-16 text-sm">
<Input <Input
value={column.label || ""} value={column.label || ""}
onChange={(e) => updateColumn(index, { label: e.target.value })} onChange={(e) => updateColumn(index, { label: e.target.value })}
placeholder="컬럼 라벨" placeholder="컬럼 라벨"
disabled={disabled} disabled={disabled}
className="text-sm"
/> />
</TableCell> </TableCell>
<TableCell> <TableCell className="h-16 text-sm">
<Select <Select
value={column.inputType} value={column.inputType}
onValueChange={(value) => handleInputTypeChange(index, value)} onValueChange={(value) => handleInputTypeChange(index, value)}
disabled={disabled} disabled={disabled}
> >
<SelectTrigger> <SelectTrigger className="text-sm">
<SelectValue placeholder="입력 타입 선택" /> <SelectValue placeholder="입력 타입 선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -241,7 +242,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
</Select> </Select>
</TableCell> </TableCell>
<TableCell> <TableCell className="h-16 text-sm">
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<Checkbox <Checkbox
checked={!column.nullable} checked={!column.nullable}
@ -251,7 +252,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell className="h-16 text-sm">
<Input <Input
type="number" type="number"
value={column.length || ""} value={column.length || ""}
@ -264,30 +265,32 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
disabled={disabled || !inputTypeOption?.supportsLength} disabled={disabled || !inputTypeOption?.supportsLength}
min={1} min={1}
max={65535} max={65535}
className="text-sm"
/> />
</TableCell> </TableCell>
<TableCell> <TableCell className="h-16 text-sm">
<Input <Input
value={column.defaultValue || ""} value={column.defaultValue || ""}
onChange={(e) => updateColumn(index, { defaultValue: e.target.value })} onChange={(e) => updateColumn(index, { defaultValue: e.target.value })}
placeholder="기본값" placeholder="기본값"
disabled={disabled} disabled={disabled}
className="text-sm"
/> />
</TableCell> </TableCell>
<TableCell> <TableCell className="h-16 text-sm">
<Textarea <Textarea
value={column.description || ""} value={column.description || ""}
onChange={(e) => updateColumn(index, { description: e.target.value })} onChange={(e) => updateColumn(index, { description: e.target.value })}
placeholder="컬럼 설명" placeholder="컬럼 설명"
disabled={disabled} disabled={disabled}
rows={1} rows={1}
className="min-h-[36px] resize-none" className="min-h-[36px] resize-none text-sm"
/> />
</TableCell> </TableCell>
<TableCell> <TableCell className="h-16 text-sm">
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"

14
frontend/components/admin/CompanyTable.tsx
View File

@ -49,10 +49,10 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
return ( return (
<> <>
{/* 데스크톱 테이블 스켈레톤 */} {/* 데스크톱 테이블 스켈레톤 */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block"> <div className="hidden bg-card shadow-sm lg:block">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50"> <TableRow className="bg-muted/50 hover:bg-muted/50">
{COMPANY_TABLE_COLUMNS.map((column) => ( {COMPANY_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} className="h-12 text-sm font-semibold"> <TableHead key={column.key} className="h-12 text-sm font-semibold">
{column.label} {column.label}
@ -64,7 +64,7 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{Array.from({ length: 10 }).map((_, index) => ( {Array.from({ length: 10 }).map((_, index) => (
<TableRow key={index} className="border-b"> <TableRow key={index}>
<TableCell className="h-16"> <TableCell className="h-16">
<div className="h-4 animate-pulse rounded bg-muted"></div> <div className="h-4 animate-pulse rounded bg-muted"></div>
</TableCell> </TableCell>
@ -117,7 +117,7 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
// 데이터가 없을 때 // 데이터가 없을 때
if (companies.length === 0) { if (companies.length === 0) {
return ( return (
<div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm"> <div className="flex h-64 flex-col items-center justify-center bg-card shadow-sm">
<div className="flex flex-col items-center gap-2 text-center"> <div className="flex flex-col items-center gap-2 text-center">
<p className="text-sm text-muted-foreground">등록된 회사가 없습니다.</p> <p className="text-sm text-muted-foreground">등록된 회사가 없습니다.</p>
</div> </div>
@ -129,10 +129,10 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
return ( return (
<> <>
{/* 데스크톱 테이블 뷰 (lg 이상) */} {/* 데스크톱 테이블 뷰 (lg 이상) */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block"> <div className="hidden bg-card shadow-sm lg:block">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50"> <TableRow className="bg-muted/50 hover:bg-muted/50">
{COMPANY_TABLE_COLUMNS.map((column) => ( {COMPANY_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} className="h-12 text-sm font-semibold"> <TableHead key={column.key} className="h-12 text-sm font-semibold">
{column.label} {column.label}
@ -144,7 +144,7 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{companies.map((company) => ( {companies.map((company) => (
<TableRow key={company.regdate + company.company_code} className="border-b transition-colors hover:bg-muted/50"> <TableRow key={company.regdate + company.company_code} className="transition-colors hover:bg-muted/50">
<TableCell className="h-16 font-mono text-sm">{company.company_code}</TableCell> <TableCell className="h-16 font-mono text-sm">{company.company_code}</TableCell>
<TableCell className="h-16 text-sm font-medium">{company.company_name}</TableCell> <TableCell className="h-16 text-sm font-medium">{company.company_name}</TableCell>
<TableCell className="h-16 text-sm">{company.writer}</TableCell> <TableCell className="h-16 text-sm">{company.writer}</TableCell>

20
frontend/components/admin/MenuPermissionsTable.tsx
View File

@ -203,21 +203,21 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
return ( return (
<React.Fragment key={menu.menuObjid}> <React.Fragment key={menu.menuObjid}>
<TableRow className="hover:bg-muted/50 border-b transition-colors"> <TableRow className="hover:bg-muted/50 transition-colors">
{/* 메뉴명 */} {/* 메뉴명 */}
<TableCell className="h-12" style={{ paddingLeft: `${paddingLeft + 16}px` }}> <TableCell className="h-16 text-sm" style={{ paddingLeft: `${paddingLeft + 16}px` }}>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{hasChildren && ( {hasChildren && (
<button onClick={() => toggleExpand(menu.menuObjid)} className="transition-transform"> <button onClick={() => toggleExpand(menu.menuObjid)} className="transition-transform">
{isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />} {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
</button> </button>
)} )}
<span className={`text-sm ${hasChildren ? "font-semibold" : ""}`}>{menu.menuName}</span> <span className={`text-sm ${hasChildren ? "font-semibold" : "font-medium"}`}>{menu.menuName}</span>
</div> </div>
</TableCell> </TableCell>
{/* 생성(Create) */} {/* 생성(Create) */}
<TableCell className="h-12 text-center"> <TableCell className="h-16 text-center text-sm">
<div className="flex justify-center"> <div className="flex justify-center">
<Checkbox <Checkbox
checked={menu.createYn === "Y"} checked={menu.createYn === "Y"}
@ -227,7 +227,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
</TableCell> </TableCell>
{/* 조회(Read) */} {/* 조회(Read) */}
<TableCell className="h-12 text-center"> <TableCell className="h-16 text-center text-sm">
<div className="flex justify-center"> <div className="flex justify-center">
<Checkbox <Checkbox
checked={menu.readYn === "Y"} checked={menu.readYn === "Y"}
@ -237,7 +237,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
</TableCell> </TableCell>
{/* 수정(Update) */} {/* 수정(Update) */}
<TableCell className="h-12 text-center"> <TableCell className="h-16 text-center text-sm">
<div className="flex justify-center"> <div className="flex justify-center">
<Checkbox <Checkbox
checked={menu.updateYn === "Y"} checked={menu.updateYn === "Y"}
@ -247,7 +247,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
</TableCell> </TableCell>
{/* 삭제(Delete) */} {/* 삭제(Delete) */}
<TableCell className="h-12 text-center"> <TableCell className="h-16 text-center text-sm">
<div className="flex justify-center"> <div className="flex justify-center">
<Checkbox <Checkbox
checked={menu.deleteYn === "Y"} checked={menu.deleteYn === "Y"}
@ -279,10 +279,10 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
</div> </div>
{/* 데스크톱 테이블 */} {/* 데스크톱 테이블 */}
<div className="bg-card hidden rounded-lg border shadow-sm lg:block"> <div className="bg-card hidden shadow-sm lg:block">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b"> <TableRow className="bg-muted/50 hover:bg-muted/50">
<TableHead className="h-12 w-[40%] text-sm font-semibold">메뉴</TableHead> <TableHead className="h-12 w-[40%] text-sm font-semibold">메뉴</TableHead>
<TableHead className="h-12 w-[15%] text-center text-sm font-semibold"> <TableHead className="h-12 w-[15%] text-center text-sm font-semibold">
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
@ -329,7 +329,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
{/* 모바일 카드 뷰 */} {/* 모바일 카드 뷰 */}
<div className="grid gap-4 lg:hidden"> <div className="grid gap-4 lg:hidden">
{menuTree.map((menu) => ( {menuTree.map((menu) => (
<div key={menu.menuObjid} className="bg-card rounded-lg border p-4 shadow-sm"> <div key={menu.menuObjid} className="bg-card p-4 shadow-sm">
<h3 className="mb-3 text-base font-semibold">{menu.menuName}</h3> <h3 className="mb-3 text-base font-semibold">{menu.menuName}</h3>
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">

68
frontend/components/admin/MenuTable.tsx
View File

@ -67,13 +67,13 @@ export const MenuTable: React.FC<MenuTableProps> = ({
const getLevelBadge = (level: number) => { const getLevelBadge = (level: number) => {
switch (level) { switch (level) {
case 0: case 0:
return "bg-primary/20 text-blue-800"; return "bg-primary/20 text-primary";
case 1: case 1:
return "bg-green-100 text-green-800"; return "bg-success/20 text-success";
case 2: case 2:
return "bg-yellow-100 text-yellow-800"; return "bg-warning/20 text-warning";
default: default:
return "bg-gray-100 text-gray-800"; return "bg-muted/50 text-muted-foreground";
} }
}; };
@ -131,8 +131,8 @@ export const MenuTable: React.FC<MenuTableProps> = ({
onClick={() => onToggleStatus(menuId)} onClick={() => onToggleStatus(menuId)}
className={`rounded px-2 py-1 text-xs font-medium transition-colors ${ className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
status === "active" status === "active"
? "bg-green-100 text-green-800 hover:bg-green-200" ? "bg-success/20 text-success hover:bg-success/30"
: "bg-gray-100 text-gray-800 hover:bg-gray-200" : "bg-muted/50 text-muted-foreground hover:bg-muted"
}`} }`}
> >
{status === "active" {status === "active"
@ -145,12 +145,12 @@ export const MenuTable: React.FC<MenuTableProps> = ({
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{title && <h3 className="text-lg font-semibold">{title}</h3>} {title && <h3 className="text-lg font-semibold">{title}</h3>}
<div className="rounded-lg border"> <div className="bg-card shadow-sm">
<div className="max-h-[calc(100vh-350px)] overflow-auto"> <div className="max-h-[calc(100vh-350px)] overflow-auto">
<Table noWrapper> <Table noWrapper>
<TableHeader className="sticky top-0 z-20 bg-gray-50 shadow-sm"> <TableHeader className="sticky top-0 z-20 bg-muted/50 shadow-sm">
<TableRow> <TableRow className="bg-muted/50 hover:bg-muted/50">
<TableHead className="w-12 bg-gray-50 font-semibold text-gray-700"> <TableHead className="h-12 w-12 bg-muted/50 text-sm font-semibold">
<input <input
type="checkbox" type="checkbox"
checked={ checked={
@ -161,22 +161,22 @@ export const MenuTable: React.FC<MenuTableProps> = ({
className="h-4 w-4" className="h-4 w-4"
/> />
</TableHead> </TableHead>
<TableHead className="w-1/3 bg-gray-50 font-semibold text-gray-700"> <TableHead className="h-12 w-1/3 bg-muted/50 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_NAME)} {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_NAME)}
</TableHead> </TableHead>
<TableHead className="w-16 bg-gray-50 font-semibold text-gray-700"> <TableHead className="h-12 w-16 bg-muted/50 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_SEQUENCE)} {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_SEQUENCE)}
</TableHead> </TableHead>
<TableHead className="w-24 bg-gray-50 font-semibold text-gray-700"> <TableHead className="h-12 w-24 bg-muted/50 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_COMPANY)} {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_COMPANY)}
</TableHead> </TableHead>
<TableHead className="w-48 bg-gray-50 font-semibold text-gray-700"> <TableHead className="h-12 w-48 bg-muted/50 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_URL)} {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_URL)}
</TableHead> </TableHead>
<TableHead className="w-20 bg-gray-50 font-semibold text-gray-700"> <TableHead className="h-12 w-20 bg-muted/50 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_STATUS)} {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_STATUS)}
</TableHead> </TableHead>
<TableHead className="w-32 bg-gray-50 font-semibold text-gray-700"> <TableHead className="h-12 w-32 bg-muted/50 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_ACTIONS)} {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_ACTIONS)}
</TableHead> </TableHead>
</TableRow> </TableRow>
@ -199,8 +199,8 @@ export const MenuTable: React.FC<MenuTableProps> = ({
const parentObjId = menu.parent_obj_id || menu.PARENT_OBJ_ID || ""; const parentObjId = menu.parent_obj_id || menu.PARENT_OBJ_ID || "";
return ( return (
<TableRow key={`${objid}-${lev}-${parentObjId}`} className="hover:bg-gray-50"> <TableRow key={`${objid}-${lev}-${parentObjId}`} className="transition-colors hover:bg-muted/50">
<TableCell> <TableCell className="h-16">
<input <input
type="checkbox" type="checkbox"
checked={selectedMenus.has(objid)} checked={selectedMenus.has(objid)}
@ -209,21 +209,21 @@ export const MenuTable: React.FC<MenuTableProps> = ({
className="h-4 w-4" className="h-4 w-4"
/> />
</TableCell> </TableCell>
<TableCell className="text-left"> <TableCell className="h-16 text-left text-sm">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<span className="font-mono text-sm text-gray-400">{getTreeIndentation(lev)}</span> <span className="font-mono text-sm text-muted-foreground">{getTreeIndentation(lev)}</span>
<span <span
className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${getLevelBadge(lev)}`} className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${getLevelBadge(lev)}`}
> >
L{lev} L{lev}
</span> </span>
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
<span className="font-medium text-gray-900">{getDisplayText(menu)}</span> <span className="text-sm font-medium text-foreground">{getDisplayText(menu)}</span>
{/* 하위 메뉴가 있는 경우에만 토글 버튼 표시 */} {/* 하위 메뉴가 있는 경우에만 토글 버튼 표시 */}
{menus.some((m) => (m.parent_obj_id || m.PARENT_OBJ_ID) === objid) && ( {menus.some((m) => (m.parent_obj_id || m.PARENT_OBJ_ID) === objid) && (
<button <button
onClick={() => onToggleExpand(objid)} onClick={() => onToggleExpand(objid)}
className="ml-2 rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700" className="ml-2 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
> >
<svg <svg
className={`h-4 w-4 transition-transform ${expandedMenus.has(objid) ? "rotate-90" : ""}`} className={`h-4 w-4 transition-transform ${expandedMenus.has(objid) ? "rotate-90" : ""}`}
@ -238,22 +238,22 @@ export const MenuTable: React.FC<MenuTableProps> = ({
</div> </div>
</div> </div>
</TableCell> </TableCell>
<TableCell>{seq}</TableCell> <TableCell className="h-16 text-sm">{seq}</TableCell>
<TableCell className="text-sm text-muted-foreground"> <TableCell className="h-16 text-sm text-muted-foreground">
<div className="flex flex-col"> <div className="flex flex-col">
<span <span
className={`font-medium ${companyName && companyName !== getText(MENU_MANAGEMENT_KEYS.STATUS_UNSPECIFIED) ? "text-green-600" : "text-gray-500"}`} className={`font-medium ${companyName && companyName !== getText(MENU_MANAGEMENT_KEYS.STATUS_UNSPECIFIED) ? "text-success" : "text-muted-foreground"}`}
> >
{companyCode === "*" {companyCode === "*"
? getText(MENU_MANAGEMENT_KEYS.FILTER_COMPANY_COMMON) ? getText(MENU_MANAGEMENT_KEYS.FILTER_COMPANY_COMMON)
: companyName || getText(MENU_MANAGEMENT_KEYS.STATUS_UNSPECIFIED)} : companyName || getText(MENU_MANAGEMENT_KEYS.STATUS_UNSPECIFIED)}
</span> </span>
{companyCode && companyCode !== "" && ( {companyCode && companyCode !== "" && (
<span className="font-mono text-xs text-gray-400">{companyCode}</span> <span className="font-mono text-xs text-muted-foreground/70">{companyCode}</span>
)} )}
</div> </div>
</TableCell> </TableCell>
<TableCell className="text-left text-sm text-muted-foreground"> <TableCell className="h-16 text-left text-sm text-muted-foreground">
<div className="max-w-[200px]"> <div className="max-w-[200px]">
{menuUrl ? ( {menuUrl ? (
<div className="group relative"> <div className="group relative">
@ -269,20 +269,20 @@ export const MenuTable: React.FC<MenuTableProps> = ({
{menuUrl} {menuUrl}
</div> </div>
{menuUrl.length > 30 && ( {menuUrl.length > 30 && (
<div className="absolute top-full left-0 z-20 mt-1 hidden max-w-xs rounded-lg bg-gray-900 p-3 text-sm text-white shadow-lg group-hover:block"> <div className="absolute top-full left-0 z-20 mt-1 hidden max-w-xs rounded-lg bg-popover p-3 text-sm text-popover-foreground shadow-lg group-hover:block">
<div className="mb-2 text-xs text-gray-300">Full URL</div> <div className="mb-2 text-xs text-muted-foreground">Full URL</div>
<div className="break-all text-white">{menuUrl}</div> <div className="break-all">{menuUrl}</div>
<div className="mt-2 text-xs text-gray-400">Click to copy</div> <div className="mt-2 text-xs text-muted-foreground">Click to copy</div>
</div> </div>
)} )}
</div> </div>
) : ( ) : (
<span className="text-gray-400">-</span> <span className="text-muted-foreground/70">-</span>
)} )}
</div> </div>
</TableCell> </TableCell>
<TableCell>{getStatusBadge(status, objid)}</TableCell> <TableCell className="h-16 text-sm">{getStatusBadge(status, objid)}</TableCell>
<TableCell> <TableCell className="h-16">
<div className="flex flex-nowrap gap-1"> <div className="flex flex-nowrap gap-1">
{lev === 1 && ( {lev === 1 && (
<Button <Button

10
frontend/components/admin/RestApiConnectionList.tsx
View File

@ -252,20 +252,20 @@ export function RestApiConnectionList() {
{/* 연결 목록 */} {/* 연결 목록 */}
{loading ? ( {loading ? (
<div className="bg-card flex h-64 items-center justify-center rounded-lg border shadow-sm"> <div className="bg-card flex h-64 items-center justify-center shadow-sm">
<div className="text-muted-foreground text-sm">로딩 중...</div> <div className="text-muted-foreground text-sm">로딩 중...</div>
</div> </div>
) : connections.length === 0 ? ( ) : connections.length === 0 ? (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm"> <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"> <div className="flex flex-col items-center gap-2 text-center">
<p className="text-muted-foreground text-sm">등록된 REST API 연결이 없습니다</p> <p className="text-muted-foreground text-sm">등록된 REST API 연결이 없습니다</p>
</div> </div>
</div> </div>
) : ( ) : (
<div className="bg-card rounded-lg border shadow-sm"> <div className="bg-card shadow-sm">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b"> <TableRow className="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">기본 URL</TableHead> <TableHead className="h-12 text-sm font-semibold">기본 URL</TableHead>
<TableHead className="h-12 text-sm font-semibold">인증 타입</TableHead> <TableHead className="h-12 text-sm font-semibold">인증 타입</TableHead>
@ -278,7 +278,7 @@ export function RestApiConnectionList() {
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{connections.map((connection) => ( {connections.map((connection) => (
<TableRow key={connection.id} className="hover:bg-muted/50 border-b transition-colors"> <TableRow key={connection.id} className="hover:bg-muted/50 transition-colors">
<TableCell className="h-16 text-sm"> <TableCell className="h-16 text-sm">
<div className="max-w-[200px]"> <div className="max-w-[200px]">
<div className="truncate font-medium" title={connection.connection_name}> <div className="truncate font-medium" title={connection.connection_name}>

26
frontend/components/admin/UserAuthTable.tsx
View File

@ -32,37 +32,37 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
return { return {
label: "최고 관리자", label: "최고 관리자",
icon: <ShieldCheck className="h-3 w-3" />, icon: <ShieldCheck className="h-3 w-3" />,
className: "bg-purple-100 text-purple-800 border-purple-300", className: "bg-primary/20 text-primary border-primary/30",
}; };
case "COMPANY_ADMIN": case "COMPANY_ADMIN":
return { return {
label: "회사 관리자", label: "회사 관리자",
icon: <Building2 className="h-3 w-3" />, icon: <Building2 className="h-3 w-3" />,
className: "bg-blue-100 text-blue-800 border-blue-300", className: "bg-primary/20 text-primary border-primary/30",
}; };
case "USER": case "USER":
return { return {
label: "일반 사용자", label: "일반 사용자",
icon: <UserIcon className="h-3 w-3" />, icon: <UserIcon className="h-3 w-3" />,
className: "bg-gray-100 text-gray-800 border-gray-300", className: "bg-muted/50 text-muted-foreground border-border",
}; };
case "GUEST": case "GUEST":
return { return {
label: "게스트", label: "게스트",
icon: <Users className="h-3 w-3" />, icon: <Users className="h-3 w-3" />,
className: "bg-green-100 text-green-800 border-green-300", className: "bg-success/20 text-success border-success/30",
}; };
case "PARTNER": case "PARTNER":
return { return {
label: "협력업체", label: "협력업체",
icon: <Shield className="h-3 w-3" />, icon: <Shield className="h-3 w-3" />,
className: "bg-orange-100 text-orange-800 border-orange-300", className: "bg-warning/20 text-warning border-warning/30",
}; };
default: default:
return { return {
label: userType || "미지정", label: userType || "미지정",
icon: <UserIcon className="h-3 w-3" />, icon: <UserIcon className="h-3 w-3" />,
className: "bg-gray-100 text-gray-800 border-gray-300", className: "bg-muted/50 text-muted-foreground border-border",
}; };
} }
}; };
@ -75,10 +75,10 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
// 로딩 스켈레톤 // 로딩 스켈레톤
if (isLoading) { if (isLoading) {
return ( return (
<div className="bg-card hidden rounded-lg border shadow-sm lg:block"> <div className="bg-card hidden shadow-sm lg:block">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="bg-muted/50 border-b"> <TableRow className="bg-muted/50">
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead> <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">사용자 ID</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자명</TableHead> <TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
@ -90,7 +90,7 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{Array.from({ length: 10 }).map((_, index) => ( {Array.from({ length: 10 }).map((_, index) => (
<TableRow key={index} className="border-b"> <TableRow key={index}>
<TableCell className="h-16"> <TableCell className="h-16">
<div className="bg-muted h-4 animate-pulse rounded"></div> <div className="bg-muted h-4 animate-pulse rounded"></div>
</TableCell> </TableCell>
@ -123,7 +123,7 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
// 빈 상태 // 빈 상태
if (users.length === 0) { if (users.length === 0) {
return ( return (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm"> <div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
<p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p> <p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
</div> </div>
); );
@ -133,10 +133,10 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* 데스크톱 테이블 */} {/* 데스크톱 테이블 */}
<div className="bg-card hidden rounded-lg border shadow-sm lg:block"> <div className="bg-card hidden shadow-sm lg:block">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b"> <TableRow className="bg-muted/50 hover:bg-muted/50">
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead> <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">사용자 ID</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자명</TableHead> <TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
@ -150,7 +150,7 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
{users.map((user, index) => { {users.map((user, index) => {
const typeInfo = getUserTypeInfo(user.userType); const typeInfo = getUserTypeInfo(user.userType);
return ( return (
<TableRow key={user.userId} className="hover:bg-muted/50 border-b transition-colors"> <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 text-center text-sm">{getRowNumber(index)}</TableCell>
<TableCell className="h-16 font-mono text-sm">{user.userId}</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.userName}</TableCell>

14
frontend/components/admin/UserTable.tsx
View File

@ -108,10 +108,10 @@ export function UserTable({
return ( return (
<> <>
{/* 데스크톱 테이블 스켈레톤 */} {/* 데스크톱 테이블 스켈레톤 */}
<div className="bg-card hidden rounded-lg border shadow-sm lg:block"> <div className="bg-card hidden shadow-sm lg:block">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="bg-muted/50 border-b"> <TableRow className="bg-muted/50">
{USER_TABLE_COLUMNS.map((column) => ( {USER_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold"> <TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold">
{column.label} {column.label}
@ -122,7 +122,7 @@ export function UserTable({
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{Array.from({ length: 10 }).map((_, index) => ( {Array.from({ length: 10 }).map((_, index) => (
<TableRow key={index} className="border-b"> <TableRow key={index}>
{USER_TABLE_COLUMNS.map((column) => ( {USER_TABLE_COLUMNS.map((column) => (
<TableCell key={column.key} className="h-16"> <TableCell key={column.key} className="h-16">
<div className="bg-muted h-4 animate-pulse rounded"></div> <div className="bg-muted h-4 animate-pulse rounded"></div>
@ -174,7 +174,7 @@ export function UserTable({
// 데이터가 없을 때 // 데이터가 없을 때
if (users.length === 0) { if (users.length === 0) {
return ( return (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm"> <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"> <div className="flex flex-col items-center gap-2 text-center">
<p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p> <p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
</div> </div>
@ -186,10 +186,10 @@ export function UserTable({
return ( return (
<> <>
{/* 데스크톱 테이블 뷰 (lg 이상) */} {/* 데스크톱 테이블 뷰 (lg 이상) */}
<div className="bg-card hidden rounded-lg border shadow-sm lg:block"> <div className="bg-card hidden shadow-sm lg:block">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b"> <TableRow className="bg-muted/50 hover:bg-muted/50">
{USER_TABLE_COLUMNS.map((column) => ( {USER_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold"> <TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold">
{column.label} {column.label}
@ -200,7 +200,7 @@ export function UserTable({
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{users.map((user, index) => ( {users.map((user, index) => (
<TableRow key={`${user.userId}-${index}`} className="hover:bg-muted/50 border-b transition-colors"> <TableRow key={`${user.userId}-${index}`} className="hover:bg-muted/50 transition-colors">
<TableCell className="h-16 font-mono text-sm font-medium">{getRowNumber(index)}</TableCell> <TableCell className="h-16 font-mono text-sm font-medium">{getRowNumber(index)}</TableCell>
<TableCell className="h-16 font-mono text-sm">{user.sabun || "-"}</TableCell> <TableCell className="h-16 font-mono text-sm">{user.sabun || "-"}</TableCell>
<TableCell className="h-16 text-sm font-medium">{user.companyCode || "-"}</TableCell> <TableCell className="h-16 text-sm font-medium">{user.companyCode || "-"}</TableCell>

2
frontend/components/admin/dashboard/DashboardCanvas.tsx
View File

@ -503,7 +503,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
top: `${y}px`, top: `${y}px`,
width: `${boxSize}px`, width: `${boxSize}px`,
height: `${boxSize}px`, height: `${boxSize}px`,
backgroundColor: "#ffffff", backgroundColor: "hsl(var(--background))",
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
zIndex: 0, zIndex: 0,
}} }}

28
frontend/components/admin/dashboard/DashboardTopMenu.tsx
View File

@ -191,8 +191,14 @@ export function DashboardTopMenu({
}); });
// html-to-image로 캔버스 캡처 (WebGL 제외) // html-to-image로 캔버스 캡처 (WebGL 제외)
const getDefaultBackgroundColor = () => {
if (typeof window === "undefined") return "#ffffff";
const bgValue = getComputedStyle(document.documentElement).getPropertyValue("--background").trim();
return bgValue ? `hsl(${bgValue})` : "#ffffff";
};
const dataUrl = await toPng(canvas, { const dataUrl = await toPng(canvas, {
backgroundColor: backgroundColor || "#ffffff", backgroundColor: backgroundColor || getDefaultBackgroundColor(),
width: canvasWidth, width: canvasWidth,
height: canvasHeight, height: canvasHeight,
pixelRatio: 2, // 고해상도 pixelRatio: 2, // 고해상도
@ -265,19 +271,19 @@ export function DashboardTopMenu({
}; };
return ( return (
<div className="flex h-16 items-center justify-between border-b bg-background px-6 shadow-sm"> <div className="flex h-auto min-h-16 flex-col gap-3 border-b bg-background px-4 py-3 shadow-sm sm:h-16 sm:flex-row sm:items-center sm:justify-between sm:gap-0 sm:px-6 sm:py-0">
{/* 좌측: 대시보드 제목 */} {/* 좌측: 대시보드 제목 */}
<div className="flex items-center gap-4"> <div className="flex flex-1 items-center gap-2 sm:gap-4">
{dashboardTitle && ( {dashboardTitle && (
<div className="flex items-center gap-2"> <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2">
<span className="text-lg font-semibold text-foreground">{dashboardTitle}</span> <span className="text-base font-semibold text-foreground sm:text-lg">{dashboardTitle}</span>
<span className="rounded bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">편집 중</span> <span className="w-fit rounded bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">편집 중</span>
</div> </div>
)} )}
</div> </div>
{/* 중앙: 해상도 선택 & 요소 추가 */} {/* 중앙: 해상도 선택 & 요소 추가 */}
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center gap-2 sm:gap-3">
{/* 해상도 선택 */} {/* 해상도 선택 */}
{onResolutionChange && ( {onResolutionChange && (
<ResolutionSelector <ResolutionSelector
@ -349,11 +355,11 @@ export function DashboardTopMenu({
</Popover> </Popover>
)} )}
<div className="h-6 w-px bg-border" /> <div className="h-6 w-px bg-border hidden sm:block" />
{/* 차트 선택 */} {/* 차트 선택 */}
<Select value={chartValue} onValueChange={handleChartSelect}> <Select value={chartValue} onValueChange={handleChartSelect}>
<SelectTrigger className="w-[200px]"> <SelectTrigger className="w-full sm:w-[200px]">
<SelectValue placeholder="차트 추가" /> <SelectValue placeholder="차트 추가" />
</SelectTrigger> </SelectTrigger>
<SelectContent className="z-[99999]"> <SelectContent className="z-[99999]">
@ -376,7 +382,7 @@ export function DashboardTopMenu({
{/* 위젯 선택 */} {/* 위젯 선택 */}
<Select value={widgetValue} onValueChange={handleWidgetSelect}> <Select value={widgetValue} onValueChange={handleWidgetSelect}>
<SelectTrigger className="w-[200px]"> <SelectTrigger className="w-full sm:w-[200px]">
<SelectValue placeholder="위젯 추가" /> <SelectValue placeholder="위젯 추가" />
</SelectTrigger> </SelectTrigger>
<SelectContent className="z-[99999]"> <SelectContent className="z-[99999]">
@ -416,7 +422,7 @@ export function DashboardTopMenu({
</div> </div>
{/* 우측: 액션 버튼 */} {/* 우측: 액션 버튼 */}
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2 sm:flex-nowrap">
<Button variant="outline" size="sm" onClick={onClearCanvas} className="gap-2 text-destructive hover:text-destructive"> <Button variant="outline" size="sm" onClick={onClearCanvas} className="gap-2 text-destructive hover:text-destructive">
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
초기화 초기화

13
frontend/components/admin/dashboard/charts/ComboChartComponent.tsx
View File

@ -62,22 +62,23 @@ export function ComboChartComponent({ data, config, width = 250, height = 200 }:
bottom: 25, bottom: 25,
}} }}
> >
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" /> <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis <XAxis
dataKey={xAxis} dataKey={xAxis}
tick={{ fontSize: 12 }} tick={{ fontSize: 12 }}
stroke="#666" stroke="hsl(var(--muted-foreground))"
/> />
<YAxis <YAxis
tick={{ fontSize: 12 }} tick={{ fontSize: 12 }}
stroke="#666" stroke="hsl(var(--muted-foreground))"
/> />
<Tooltip <Tooltip
contentStyle={{ contentStyle={{
backgroundColor: 'white', backgroundColor: 'hsl(var(--background))',
border: '1px solid #ccc', border: '1px solid hsl(var(--border))',
borderRadius: '4px', borderRadius: '4px',
fontSize: '12px' fontSize: '12px',
color: 'hsl(var(--foreground))'
}} }}
formatter={(value: any, name: string) => [ formatter={(value: any, name: string) => [
typeof value === 'number' ? value.toLocaleString() : value, typeof value === 'number' ? value.toLocaleString() : value,

13
frontend/components/admin/dashboard/charts/StackedBarChartComponent.tsx
View File

@ -57,22 +57,23 @@ export function StackedBarChartComponent({ data, config, width = 250, height = 2
bottom: 25, bottom: 25,
}} }}
> >
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" /> <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis <XAxis
dataKey={xAxis} dataKey={xAxis}
tick={{ fontSize: 12 }} tick={{ fontSize: 12 }}
stroke="#666" stroke="hsl(var(--muted-foreground))"
/> />
<YAxis <YAxis
tick={{ fontSize: 12 }} tick={{ fontSize: 12 }}
stroke="#666" stroke="hsl(var(--muted-foreground))"
/> />
<Tooltip <Tooltip
contentStyle={{ contentStyle={{
backgroundColor: 'white', backgroundColor: 'hsl(var(--background))',
border: '1px solid #ccc', border: '1px solid hsl(var(--border))',
borderRadius: '4px', borderRadius: '4px',
fontSize: '12px' fontSize: '12px',
color: 'hsl(var(--foreground))'
}} }}
formatter={(value: any, name: string) => [ formatter={(value: any, name: string) => [
typeof value === 'number' ? value.toLocaleString() : value, typeof value === 'number' ? value.toLocaleString() : value,

2
frontend/components/admin/dashboard/data-sources/MultiApiConfig.tsx
View File

@ -712,7 +712,7 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
const typeColor = { const typeColor = {
number: "text-primary bg-primary/10", number: "text-primary bg-primary/10",
string: "text-muted-foreground bg-muted", string: "text-muted-foreground bg-muted",
date: "text-purple-500 bg-purple-500/10", date: "text-primary bg-primary/10",
boolean: "text-success bg-success/10", boolean: "text-success bg-success/10",
object: "text-warning bg-warning/10", object: "text-warning bg-warning/10",
unknown: "text-muted-foreground/50 bg-muted" unknown: "text-muted-foreground/50 bg-muted"

2
frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx
View File

@ -493,7 +493,7 @@ ORDER BY 하위부서수 DESC`,
const typeColor = { const typeColor = {
number: "text-primary bg-primary/10", number: "text-primary bg-primary/10",
string: "text-foreground bg-muted", string: "text-foreground bg-muted",
date: "text-purple-500 bg-purple-500/10", date: "text-primary bg-primary/10",
boolean: "text-success bg-success/10", boolean: "text-success bg-success/10",
object: "text-warning bg-warning/10", object: "text-warning bg-warning/10",
unknown: "text-muted-foreground bg-muted" unknown: "text-muted-foreground bg-muted"

6
frontend/components/admin/dashboard/widgets/CalendarSettings.tsx
View File

@ -98,13 +98,13 @@ export function CalendarSettings({ config, onSave, onClose }: CalendarSettingsPr
value: "dark", value: "dark",
label: "Dark", label: "Dark",
gradient: "bg-gradient-to-br from-foreground to-foreground", gradient: "bg-gradient-to-br from-foreground to-foreground",
text: "text-white", text: "text-background",
}, },
{ {
value: "custom", value: "custom",
label: "사용자", label: "사용자",
gradient: "bg-gradient-to-br from-primary to-purple-500", gradient: "bg-gradient-to-br from-primary to-primary/80",
text: "text-white", text: "text-primary-foreground",
}, },
].map((theme) => ( ].map((theme) => (
<Button <Button

6
frontend/components/admin/dashboard/widgets/ClockSettings.tsx
View File

@ -104,13 +104,13 @@ export function ClockSettings({ config, onSave, onClose }: ClockSettingsProps) {
value: "dark", value: "dark",
label: "Dark", label: "Dark",
gradient: "bg-gradient-to-br from-foreground to-foreground", gradient: "bg-gradient-to-br from-foreground to-foreground",
text: "text-white", text: "text-background",
}, },
{ {
value: "custom", value: "custom",
label: "사용자", label: "사용자",
gradient: "bg-gradient-to-br from-primary to-purple-500", gradient: "bg-gradient-to-br from-primary to-primary/80",
text: "text-white", text: "text-primary-foreground",
}, },
].map((theme) => ( ].map((theme) => (
<Button <Button

24
frontend/components/admin/dashboard/widgets/DigitalClock.tsx
View File

@ -102,10 +102,10 @@ function getThemeClasses(theme: string, customColor?: string) {
if (theme === "custom" && customColor) { if (theme === "custom" && customColor) {
// 사용자 지정 색상 사용 // 사용자 지정 색상 사용
return { return {
container: "text-white", container: "text-primary-foreground",
date: "text-white/80", date: "text-primary-foreground/80",
time: "text-white", time: "text-primary-foreground",
timezone: "text-white/70", timezone: "text-primary-foreground/70",
style: { backgroundColor: customColor }, style: { backgroundColor: customColor },
}; };
} }
@ -118,16 +118,16 @@ function getThemeClasses(theme: string, customColor?: string) {
timezone: "text-muted-foreground", timezone: "text-muted-foreground",
}, },
dark: { dark: {
container: "bg-gray-900 text-white", container: "bg-foreground text-background",
date: "text-muted-foreground", date: "text-background/80",
time: "text-white", time: "text-background",
timezone: "text-muted-foreground", timezone: "text-background/70",
}, },
custom: { custom: {
container: "bg-gradient-to-br from-primary to-purple-500 text-white", container: "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground",
date: "text-primary/70", date: "text-primary-foreground/70",
time: "text-white", time: "text-primary-foreground",
timezone: "text-primary/80", timezone: "text-primary-foreground/80",
}, },
}; };

2
frontend/components/admin/dashboard/widgets/ListWidget.tsx
View File

@ -227,7 +227,7 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
{/* 테이블 뷰 */} {/* 테이블 뷰 */}
{config.viewMode === "table" && ( {config.viewMode === "table" && (
<div className={`flex-1 overflow-auto rounded-lg border ${config.compactMode ? "text-xs" : "text-sm"}`}> <div className={`flex-1 overflow-auto rounded-lg ${config.compactMode ? "text-xs" : "text-sm"}`}>
<Table> <Table>
{config.showHeader && ( {config.showHeader && (
<TableHeader> <TableHeader>

2
frontend/components/admin/dashboard/widgets/ListWidgetConfigSidebar.tsx
View File

@ -250,7 +250,7 @@ export function ListWidgetConfigSidebar({ element, isOpen, onClose, onApply }: L
<button <button
onClick={handleApply} onClick={handleApply}
disabled={!canApply} disabled={!canApply}
className="bg-primary hover:bg-primary/90 flex-1 rounded py-2 text-xs font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50" className="bg-primary hover:bg-primary/90 flex-1 rounded py-2 text-xs font-medium text-primary-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-50"
> >
적용 적용
</button> </button>

2
frontend/components/admin/dashboard/widgets/MonthView.tsx
View File

@ -130,7 +130,7 @@ export function MonthView({ days, config, isCompact = false, selectedDate, onDat
onClick={() => handleDayClick(day)} onClick={() => handleDayClick(day)}
style={{ style={{
backgroundColor: isSelected(day) backgroundColor: isSelected(day)
? "#10b981" // 선택된 날짜는 초록색 ? "hsl(var(--success))" // 선택된 날짜는 성공 색상
: config.highlightToday && day.isToday : config.highlightToday && day.isToday
? themeStyles.todayBg ? themeStyles.todayBg
: undefined, : undefined,

2
frontend/components/admin/dashboard/widgets/YardWidgetConfigSidebar.tsx
View File

@ -109,7 +109,7 @@ export function YardWidgetConfigSidebar({ element, isOpen, onClose, onApply }: Y
</button> </button>
<button <button
onClick={handleApply} onClick={handleApply}
className="bg-primary hover:bg-primary/90 flex-1 rounded py-2 text-xs font-medium text-white transition-colors" className="bg-primary hover:bg-primary/90 flex-1 rounded py-2 text-xs font-medium text-primary-foreground transition-colors"
> >
적용 적용
</button> </button>

18
frontend/components/admin/dashboard/widgets/driverUtils.ts
View File

@ -198,11 +198,21 @@ export function getThemeColors(theme: string, customColor?: string) {
} }
// light theme (default) // light theme (default)
const getCSSVariable = (varName: string): string => {
if (typeof window !== "undefined") {
const value = getComputedStyle(document.documentElement)
.getPropertyValue(varName)
.trim();
return value ? `hsl(${value})` : "#ffffff";
}
return "#ffffff";
};
return { return {
background: "#ffffff", background: getCSSVariable("--background"),
text: "#1f2937", text: getCSSVariable("--foreground"),
border: "#e5e7eb", border: getCSSVariable("--border"),
hover: "#f3f4f6", hover: getCSSVariable("--muted"),
}; };
} }

2
frontend/components/admin/dashboard/widgets/list-widget/ManualColumnEditor.tsx
View File

@ -80,7 +80,7 @@ export function ManualColumnEditor({ config, onConfigChange }: ManualColumnEdito
<p className="text-[10px] text-muted-foreground">직접 컬럼을 추가하고 데이터 필드를 매핑하세요</p> <p className="text-[10px] text-muted-foreground">직접 컬럼을 추가하고 데이터 필드를 매핑하세요</p>
<button <button
onClick={handleAddColumn} onClick={handleAddColumn}
className="bg-primary hover:bg-primary/90 flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium text-white transition-colors" className="bg-primary hover:bg-primary/90 flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium text-primary-foreground transition-colors"
> >
<Plus className="h-3 w-3" /> <Plus className="h-3 w-3" />
컬럼 추가 컬럼 추가

2
frontend/components/admin/dashboard/widgets/list-widget/UnifiedColumnEditor.tsx
View File

@ -99,7 +99,7 @@ export function UnifiedColumnEditor({ queryResult, config, onConfigChange }: Uni
<p className="text-[10px] text-muted-foreground">컬럼을 선택하고 편집하세요</p> <p className="text-[10px] text-muted-foreground">컬럼을 선택하고 편집하세요</p>
<button <button
onClick={handleAddColumn} onClick={handleAddColumn}
className="bg-primary hover:bg-primary/90 flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium text-white transition-colors" className="bg-primary hover:bg-primary/90 flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium text-primary-foreground transition-colors"
> >
<Plus className="h-3 w-3" /> <Plus className="h-3 w-3" />
컬럼 추가 컬럼 추가

2
frontend/components/admin/dashboard/widgets/yard-3d/MaterialLibrary.tsx
View File

@ -126,7 +126,7 @@ export default function MaterialLibrary({ isOpen, onClose, onSelect }: MaterialL
{searchText || selectedCategory ? "검색 결과가 없습니다" : "등록된 자재가 없습니다"} {searchText || selectedCategory ? "검색 결과가 없습니다" : "등록된 자재가 없습니다"}
</div> </div>
) : ( ) : (
<div className="max-h-96 overflow-auto rounded-md border"> <div className="max-h-96 overflow-auto rounded-md">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>

2
frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
View File

@ -640,7 +640,7 @@ export default function Yard3DCanvas({
}; };
return ( return (
<div className="h-full w-full bg-gray-900" onClick={handleCanvasClick}> <div className="h-full w-full bg-foreground" onClick={handleCanvasClick}>
<Canvas <Canvas
camera={{ camera={{
position: [50, 30, 50], position: [50, 30, 50],

2
frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx
View File

@ -16,7 +16,7 @@ import { useToast } from "@/hooks/use-toast";
const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), { const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
ssr: false, ssr: false,
loading: () => ( loading: () => (
<div className="flex h-full items-center justify-center bg-gray-900"> <div className="flex h-full items-center justify-center bg-foreground">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" /> <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div> </div>
), ),

2
frontend/components/admin/dashboard/widgets/yard-3d/YardElementConfigPanel.tsx
View File

@ -395,7 +395,7 @@ export default function YardElementConfigPanel({ placement, onSave, onCancel }:
<div className="mb-3"> <div className="mb-3">
<Label className="text-xs">쿼리 결과 ({queryResult.totalRows}행)</Label> <Label className="text-xs">쿼리 결과 ({queryResult.totalRows}행)</Label>
<div className="mt-2 max-h-40 overflow-auto rounded border"> <div className="mt-2 max-h-40 overflow-auto rounded">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>

2
frontend/components/admin/dashboard/widgets/yard-3d/YardLayoutList.tsx
View File

@ -162,7 +162,7 @@ export default function YardLayoutList({ layouts, isLoading, onSelect, onDelete,
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex-1 overflow-auto rounded-md border"> <div className="flex-1 overflow-auto rounded-md">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>

2
frontend/components/dashboard/widgets/ListTestWidget.tsx
View File

@ -359,7 +359,7 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
); );
return ( return (
<div className="flex h-full flex-col rounded-lg border bg-card shadow-sm"> <div className="flex h-full flex-col bg-card shadow-sm">
{/* 헤더 */} {/* 헤더 */}
<div className="flex items-center justify-between border-b p-4"> <div className="flex items-center justify-between border-b p-4">
<div> <div>

31
frontend/components/dashboard/widgets/MapTestWidget.tsx
View File

@ -259,17 +259,28 @@ const getWeatherIcon = (weatherMain: string) => {
} }
}; };
// 특보 심각도별 색상 반환 // 특보 심각도별 색상 반환 (CSS 변수 사용)
const getAlertColor = (severity: string): string => { const getAlertColor = (severity: string): string => {
// CSS 변수 값을 가져오기
const getCSSVariable = (varName: string): string => {
if (typeof window !== "undefined") {
const value = getComputedStyle(document.documentElement)
.getPropertyValue(varName)
.trim();
return value ? `hsl(${value})` : "#6b7280";
}
return "#6b7280";
};
switch (severity) { switch (severity) {
case "high": case "high":
return "#ef4444"; // 빨강 (경보) return getCSSVariable("--destructive"); // 경보 (빨강)
case "medium": case "medium":
return "#f59e0b"; // 주황 (주의보) return getCSSVariable("--warning"); // 주의보 (주황)
case "low": case "low":
return "#eab308"; // 노랑 (약한 주의보) return getCSSVariable("--warning"); // 약한 주의보 (노랑)
default: default:
return "#6b7280"; // 회색 return getCSSVariable("--muted-foreground"); // 회색
} }
}; };
@ -975,7 +986,7 @@ function MapTestWidget({ element }: MapTestWidgetProps) {
${regionAlerts ${regionAlerts
.map( .map(
(alert) => ` (alert) => `
<div style="margin-bottom: 8px; padding: 8px; background: #f9fafb; border-radius: 4px; border-left: 3px solid ${getAlertColor(alert.severity)};"> <div style="margin-bottom: 8px; padding: 8px; background: hsl(var(--muted)); border-radius: 4px; border-left: 3px solid ${getAlertColor(alert.severity)};">
<div style="font-weight: 600; font-size: 12px; color: ${getAlertColor(alert.severity)};"> <div style="font-weight: 600; font-size: 12px; color: ${getAlertColor(alert.severity)};">
${alert.title} ${alert.title}
</div> </div>
@ -1058,7 +1069,7 @@ function MapTestWidget({ element }: MapTestWidgetProps) {
<div <div
style={{ style={{
padding: "6px", padding: "6px",
background: "#f9fafb", background: "hsl(var(--muted))",
borderRadius: "4px", borderRadius: "4px",
borderLeft: `3px solid ${alertColor}`, borderLeft: `3px solid ${alertColor}`,
}} }}
@ -1087,8 +1098,8 @@ function MapTestWidget({ element }: MapTestWidgetProps) {
const markerIcon = isWeatherAlert const markerIcon = isWeatherAlert
? L.divIcon({ ? L.divIcon({
html: `<div style=" html: `<div style="
background: ${isWarning ? "#ef4444" : "#f59e0b"}; background: ${isWarning ? "hsl(var(--destructive))" : "hsl(var(--warning))"};
color: white; color: hsl(var(--destructive-foreground));
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
@ -1096,7 +1107,7 @@ function MapTestWidget({ element }: MapTestWidgetProps) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; font-size: 18px;
border: 3px solid white; border: 3px solid hsl(var(--background));
box-shadow: 0 2px 8px rgba(0,0,0,0.3); box-shadow: 0 2px 8px rgba(0,0,0,0.3);
">⚠️</div>`, ">⚠️</div>`,
className: "", className: "",

2
frontend/components/dashboard/widgets/WeatherWidget.tsx
View File

@ -521,7 +521,7 @@ export default function WeatherWidget({
{/* 기압 */} {/* 기압 */}
{selectedItems.includes('pressure') && ( {selectedItems.includes('pressure') && (
<div className="flex items-center gap-1.5 bg-muted/80 rounded-lg p-3"> <div className="flex items-center gap-1.5 bg-muted/80 rounded-lg p-3">
<Gauge className="h-3.5 w-3.5 text-purple-500 flex-shrink-0" /> <Gauge className="h-3.5 w-3.5 text-primary flex-shrink-0" />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-xs text-muted-foreground leading-tight truncate">기압</p> <p className="text-xs text-muted-foreground leading-tight truncate">기압</p>
<p className="text-sm font-semibold text-foreground leading-tight truncate"> <p className="text-sm font-semibold text-foreground leading-tight truncate">

38
frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfigStep.tsx
View File

@ -94,25 +94,27 @@ const ActionConfigStep: React.FC<ActionConfigStepProps> = ({
<CardContent className="flex h-full flex-col overflow-hidden p-0"> <CardContent className="flex h-full flex-col overflow-hidden p-0">
<Tabs defaultValue="config" className="flex h-full flex-col"> <Tabs defaultValue="config" className="flex h-full flex-col">
<div className="flex-shrink-0 border-b px-4 pt-4"> <div className="flex-shrink-0 border-b px-3 pt-3 sm:px-4 sm:pt-4">
<TabsList className="grid w-full grid-cols-2"> <TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="config" className="flex items-center gap-2"> <TabsTrigger value="config" className="flex items-center gap-1 text-xs sm:gap-2 sm:text-sm">
<Settings className="h-4 w-4" /> <Settings className="h-3 w-3 sm:h-4 sm:w-4" />
액션 설정 <span className="hidden sm:inline">액션 설정</span>
<span className="sm:hidden">설정</span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="visualization" className="flex items-center gap-2"> <TabsTrigger value="visualization" className="flex items-center gap-1 text-xs sm:gap-2 sm:text-sm">
<Eye className="h-4 w-4" /> <Eye className="h-3 w-3 sm:h-4 sm:w-4" />
흐름 미리보기 <span className="hidden sm:inline">흐름 미리보기</span>
<span className="sm:hidden">미리보기</span>
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</div> </div>
{/* 액션 설정 탭 */} {/* 액션 설정 탭 */}
<TabsContent value="config" className="mt-0 flex-1 overflow-y-auto p-4"> <TabsContent value="config" className="mt-0 flex-1 overflow-y-auto p-3 sm:p-4">
<div className="space-y-6"> <div className="space-y-4 sm:space-y-6">
{/* 액션 타입 선택 */} {/* 액션 타입 선택 */}
<div className="space-y-3"> <div className="space-y-2 sm:space-y-3">
<h3 className="text-lg font-semibold">액션 타입</h3> <h3 className="text-base font-semibold sm:text-lg">액션 타입</h3>
<Select value={actionType} onValueChange={actions.setActionType}> <Select value={actionType} onValueChange={actions.setActionType}>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="액션 타입을 선택하세요" /> <SelectValue placeholder="액션 타입을 선택하세요" />
@ -168,9 +170,9 @@ const ActionConfigStep: React.FC<ActionConfigStepProps> = ({
{/* INSERT 액션 안내 */} {/* INSERT 액션 안내 */}
{actionType === "insert" && ( {actionType === "insert" && (
<div className="rounded-lg border border-green-200 bg-green-50 p-4"> <div className="rounded-lg border border-success/20 bg-success/10 p-4">
<h4 className="mb-2 text-sm font-medium text-green-800">INSERT 액션</h4> <h4 className="mb-2 text-sm font-medium text-success">INSERT 액션</h4>
<p className="text-sm text-green-700"> <p className="text-sm text-success/80">
INSERT 액션은 별도의 실행 조건이 필요하지 않습니다. 매핑된 모든 데이터가 새로운 레코드로 삽입됩니다. INSERT 액션은 별도의 실행 조건이 필요하지 않습니다. 매핑된 모든 데이터가 새로운 레코드로 삽입됩니다.
</p> </p>
</div> </div>
@ -222,11 +224,11 @@ const ActionConfigStep: React.FC<ActionConfigStepProps> = ({
</Tabs> </Tabs>
{/* 하단 네비게이션 */} {/* 하단 네비게이션 */}
<div className="flex-shrink-0 border-t bg-white p-4"> <div className="flex-shrink-0 border-t bg-background p-3 sm:p-4">
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<Button variant="outline" onClick={onBack} className="flex items-center gap-2"> <Button variant="outline" onClick={onBack} className="flex items-center gap-2 w-full sm:w-auto">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
이전: 제어 조건 <span className="text-xs sm:text-sm">이전: 제어 조건</span>
</Button> </Button>
<div className="flex gap-2"> <div className="flex gap-2">

32
frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx
View File

@ -134,9 +134,9 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
{isCompleted ? ( {isCompleted ? (
<CheckCircle className="h-5 w-5 text-green-600" /> <CheckCircle className="h-5 w-5 text-success" />
) : ( ) : (
<AlertCircle className="h-5 w-5 text-orange-500" /> <AlertCircle className="h-5 w-5 text-warning" />
)} )}
4단계: 제어 실행 조건 4단계: 제어 실행 조건
</CardTitle> </CardTitle>
@ -146,11 +146,11 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
</CardHeader> </CardHeader>
<CardContent className="flex h-full flex-col overflow-hidden p-0"> <CardContent className="flex h-full flex-col overflow-hidden p-0">
<div className="min-h-0 flex-1 space-y-6 overflow-y-auto p-4"> <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-3 sm:space-y-6 sm:p-4">
{/* 제어 실행 조건 안내 */} {/* 제어 실행 조건 안내 */}
<div className="rounded-lg border border-primary/20 bg-accent p-4"> <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
<h4 className="mb-2 text-sm font-medium text-blue-800">제어 실행 조건이란?</h4> <h4 className="mb-2 text-sm font-medium text-primary">제어 실행 조건이란?</h4>
<div className="space-y-1 text-sm text-blue-700"> <div className="space-y-1 text-sm text-primary/80">
<p> <p>
• <strong>전체 제어의 트리거 조건</strong>을 설정합니다 • <strong>전체 제어의 트리거 조건</strong>을 설정합니다
</p> </p>
@ -363,7 +363,7 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => actions.deleteControlCondition(index)} onClick={() => actions.deleteControlCondition(index)}
className="text-destructive hover:text-red-700" className="text-destructive hover:text-destructive/80"
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
@ -406,9 +406,9 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
{/* 컬럼 정보 로드 실패 시 안내 */} {/* 컬럼 정보 로드 실패 시 안내 */}
{fromColumns.length === 0 && toColumns.length === 0 && controlConditions.length === 0 && ( {fromColumns.length === 0 && toColumns.length === 0 && controlConditions.length === 0 && (
<div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4"> <div className="rounded-lg border border-warning/20 bg-warning/10 p-4">
<h4 className="mb-2 text-sm font-medium text-yellow-800">컬럼 정보를 불러올 수 없습니다</h4> <h4 className="mb-2 text-sm font-medium text-warning">컬럼 정보를 불러올 수 없습니다</h4>
<div className="space-y-2 text-sm text-yellow-700"> <div className="space-y-2 text-sm text-warning/80">
<p>• 외부 데이터베이스 연결에 문제가 있을 수 있습니다</p> <p>• 외부 데이터베이스 연결에 문제가 있을 수 있습니다</p>
<p>• 조건 없이 진행하면 항상 실행됩니다</p> <p>• 조건 없이 진행하면 항상 실행됩니다</p>
<p>• 나중에 수동으로 조건을 추가할 수 있습니다</p> <p>• 나중에 수동으로 조건을 추가할 수 있습니다</p>
@ -451,15 +451,15 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
</div> </div>
{/* 하단 네비게이션 */} {/* 하단 네비게이션 */}
<div className="flex-shrink-0 border-t bg-white p-4"> <div className="flex-shrink-0 border-t bg-background p-3 sm:p-4">
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<Button variant="outline" onClick={onBack} className="flex items-center gap-2"> <Button variant="outline" onClick={onBack} className="flex items-center gap-2 w-full sm:w-auto">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
이전 <span className="text-xs sm:text-sm">이전</span>
</Button> </Button>
<Button onClick={onNext} disabled={!canProceed} className="flex items-center gap-2"> <Button onClick={onNext} disabled={!canProceed} className="flex items-center gap-2 w-full sm:w-auto">
다음: 액션 설정 <span className="text-xs sm:text-sm">다음: 액션 설정</span>
<CheckCircle className="h-4 w-4" /> <CheckCircle className="h-4 w-4" />
</Button> </Button>
</div> </div>

126
frontend/components/dataflow/connection/redesigned/RightPanel/DataflowVisualization.tsx
View File

@ -63,17 +63,17 @@ export const DataflowVisualization: React.FC<DataflowVisualizationProps> = ({ st
); );
return ( return (
<div className="space-y-6 p-6"> <div className="space-y-4 p-4 sm:space-y-6 sm:p-6">
{/* 헤더 */} {/* 헤더 */}
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<p className="text-sm text-gray-600">전체 데이터 흐름을 한눈에 확인</p> <p className="text-xs sm:text-sm text-muted-foreground">전체 데이터 흐름을 한눈에 확인</p>
<Badge variant={isComplete ? "default" : "secondary"} className="text-sm"> <Badge variant={isComplete ? "default" : "secondary"} className="text-xs sm:text-sm w-fit">
{isComplete ? "✅ 설정 완료" : "⚠️ 설정 필요"} {isComplete ? "✅ 설정 완료" : "⚠️ 설정 필요"}
</Badge> </Badge>
</div> </div>
{/* Sankey 다이어그램 */} {/* Sankey 다이어그램 */}
<div className="relative flex items-center justify-center py-12"> <div className="relative flex flex-col items-center justify-center gap-6 py-8 sm:flex-row sm:gap-0 sm:py-12">
{/* 연결선 레이어 */} {/* 연결선 레이어 */}
<svg className="absolute inset-0 h-full w-full" style={{ zIndex: 0 }}> <svg className="absolute inset-0 h-full w-full" style={{ zIndex: 0 }}>
{/* 소스 → 조건 선 */} {/* 소스 → 조건 선 */}
@ -106,105 +106,109 @@ export const DataflowVisualization: React.FC<DataflowVisualizationProps> = ({ st
})} })}
</svg> </svg>
<div className="relative flex w-full items-center justify-around" style={{ zIndex: 1 }}> <div className="relative flex w-full flex-col items-center justify-around gap-4 sm:flex-row sm:gap-0" style={{ zIndex: 1 }}>
{/* 1. 소스 노드 */} {/* 1. 소스 노드 */}
<div className="flex flex-col items-center" style={{ width: "28%" }}> <div className="flex flex-col items-center w-full sm:w-[28%]">
<Card <Card
className={`w-full cursor-pointer border-2 transition-all hover:shadow-lg ${ className={`w-full cursor-pointer border-2 transition-all hover:shadow-lg ${
hasSource ? "border-blue-400 bg-blue-50" : "border-gray-300 bg-gray-50" hasSource ? "border-primary bg-primary/10" : "border-border bg-muted"
}`} }`}
onClick={() => onEdit("source")} onClick={() => onEdit("source")}
> >
<CardContent className="p-4"> <CardContent>
<div className="p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="mb-2 flex items-center gap-2"> <div className="mb-2 flex items-center gap-2">
<Database className="h-5 w-5 text-blue-600" /> <Database className="h-5 w-5 text-primary" />
<span className="text-sm font-semibold text-gray-900">데이터 소스</span> <span className="text-sm font-semibold text-foreground">데이터 소스</span>
</div> </div>
{hasSource ? ( {hasSource ? (
<div className="space-y-1"> <div className="space-y-1">
<p className="text-sm font-medium text-gray-900"> <p className="text-sm font-medium text-foreground">
{fromTable.tableLabel || fromTable.displayName || fromTable.tableName} {fromTable.tableLabel || fromTable.displayName || fromTable.tableName}
</p> </p>
{(fromTable.tableLabel || fromTable.displayName) && ( {(fromTable.tableLabel || fromTable.displayName) && (
<p className="text-xs text-gray-500">({fromTable.tableName})</p> <p className="text-xs text-muted-foreground">({fromTable.tableName})</p>
)} )}
</div> </div>
) : ( ) : (
<p className="text-xs text-gray-500">미설정</p> <p className="text-xs text-muted-foreground">미설정</p>
)} )}
</div> </div>
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"> <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
<Edit className="h-3 w-3" /> <Edit className="h-3 w-3" />
</Button> </Button>
</div> </div>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* 2. 조건 노드 (중앙) */} {/* 2. 조건 노드 (중앙) */}
<div className="flex flex-col items-center" style={{ width: "28%" }}> <div className="flex flex-col items-center w-full sm:w-[28%]">
<Card <Card
className={`w-full cursor-pointer border-2 transition-all hover:shadow-lg ${ className={`w-full cursor-pointer border-2 transition-all hover:shadow-lg ${
hasConditions ? "border-yellow-400 bg-yellow-50" : "border-gray-300 bg-gray-50" hasConditions ? "border-warning bg-warning/10" : "border-border bg-muted"
}`} }`}
onClick={() => onEdit("conditions")} onClick={() => onEdit("conditions")}
> >
<CardContent className="p-4"> <CardContent>
<div className="p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="mb-2 flex items-center gap-2"> <div className="mb-2 flex items-center gap-2">
<Filter className="h-5 w-5 text-yellow-600" /> <Filter className="h-5 w-5 text-warning" />
<span className="text-sm font-semibold text-gray-900">조건 검증</span> <span className="text-sm font-semibold text-foreground">조건 검증</span>
</div> </div>
{hasConditions ? ( {hasConditions ? (
<div className="space-y-2"> <div className="space-y-2">
{/* 실제 조건들 표시 */} {/* 실제 조건들 표시 */}
<div className="max-h-32 space-y-1 overflow-y-auto"> <div className="max-h-32 space-y-1 overflow-y-auto">
{controlConditions.slice(0, 3).map((condition, index) => ( {controlConditions.slice(0, 3).map((condition, index) => (
<div key={index} className="rounded bg-white/50 px-2 py-1"> <div key={index} className="rounded bg-background/50 px-2 py-1">
<p className="text-xs font-medium text-gray-800"> <p className="text-xs font-medium text-foreground">
{index > 0 && ( {index > 0 && (
<span className="mr-1 font-bold text-blue-600"> <span className="mr-1 font-bold text-primary">
{condition.logicalOperator || "AND"} {condition.logicalOperator || "AND"}
</span> </span>
)} )}
<span className="text-blue-800">{getFieldLabel(condition.field)}</span>{" "} <span className="text-primary">{getFieldLabel(condition.field)}</span>{" "}
<span className="text-gray-600">{condition.operator}</span>{" "} <span className="text-muted-foreground">{condition.operator}</span>{" "}
<span className="text-green-700">{condition.value}</span> <span className="text-success">{condition.value}</span>
</p> </p>
</div> </div>
))} ))}
{controlConditions.length > 3 && ( {controlConditions.length > 3 && (
<p className="px-2 text-xs text-gray-500">외 {controlConditions.length - 3}개...</p> <p className="px-2 text-xs text-muted-foreground">외 {controlConditions.length - 3}개...</p>
)} )}
</div> </div>
<div className="mt-2 flex items-center justify-between border-t pt-2"> <div className="mt-2 flex items-center justify-between border-t pt-2">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<CheckCircle className="h-3 w-3 text-green-600" /> <CheckCircle className="h-3 w-3 text-success" />
<span className="text-xs text-gray-600">충족 → 실행</span> <span className="text-xs text-muted-foreground">충족 → 실행</span>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<XCircle className="h-3 w-3 text-red-600" /> <XCircle className="h-3 w-3 text-destructive" />
<span className="text-xs text-gray-600">불만족 → 중단</span> <span className="text-xs text-muted-foreground">불만족 → 중단</span>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<p className="text-xs text-gray-500">조건 없음 (항상 실행)</p> <p className="text-xs text-muted-foreground">조건 없음 (항상 실행)</p>
)} )}
</div> </div>
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"> <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
<Edit className="h-3 w-3" /> <Edit className="h-3 w-3" />
</Button> </Button>
</div> </div>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* 3. 액션 노드들 (우측) */} {/* 3. 액션 노드들 (우측) */}
<div className="flex flex-col items-center gap-3" style={{ width: "28%" }}> <div className="flex flex-col items-center gap-3 w-full sm:w-[28%]">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
@ -227,10 +231,12 @@ export const DataflowVisualization: React.FC<DataflowVisualizationProps> = ({ st
))} ))}
</div> </div>
) : ( ) : (
<Card className="w-full border-2 border-dashed border-gray-300 bg-gray-50"> <Card className="w-full border-2 border-dashed border-border bg-muted">
<CardContent className="p-4 text-center"> <CardContent>
<Zap className="mx-auto mb-2 h-6 w-6 text-gray-400" /> <div className="p-4 text-center">
<p className="text-xs text-gray-500">액션 미설정</p> <Zap className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
<p className="text-xs text-muted-foreground">액션 미설정</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
)} )}
@ -240,32 +246,34 @@ export const DataflowVisualization: React.FC<DataflowVisualizationProps> = ({ st
{/* 조건 불만족 시 중단 표시 (하단) */} {/* 조건 불만족 시 중단 표시 (하단) */}
{hasConditions && ( {hasConditions && (
<div <div
className="absolute bottom-0 flex items-center gap-2 rounded-lg border-2 border-red-300 bg-red-50 px-3 py-2" className="absolute bottom-0 flex items-center gap-2 rounded-lg border-2 border-destructive/30 bg-destructive/10 px-3 py-2"
style={{ left: "50%", transform: "translateX(-50%)" }} style={{ left: "50%", transform: "translateX(-50%)" }}
> >
<XCircle className="h-4 w-4 text-red-600" /> <XCircle className="h-4 w-4 text-destructive" />
<span className="text-xs font-medium text-red-900">조건 불만족 → 실행 중단</span> <span className="text-xs font-medium text-destructive">조건 불만족 → 실행 중단</span>
</div> </div>
)} )}
</div> </div>
{/* 통계 요약 */} {/* 통계 요약 */}
<Card className="border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50"> <Card className="border-border bg-gradient-to-r from-muted to-muted/50">
<CardContent className="p-4"> <CardContent>
<div className="flex items-center justify-around text-center"> <div className="p-4">
<div className="flex flex-col items-center justify-around gap-4 text-center sm:flex-row sm:gap-0">
<div> <div>
<p className="text-xs text-gray-600">소스</p> <p className="text-xs text-muted-foreground">소스</p>
<p className="text-lg font-bold text-blue-600">{hasSource ? 1 : 0}</p> <p className="text-base font-bold text-primary sm:text-lg">{hasSource ? 1 : 0}</p>
</div> </div>
<div className="h-8 w-px bg-gray-300"></div> <div className="h-8 w-px bg-border hidden sm:block"></div>
<div> <div>
<p className="text-xs text-gray-600">조건</p> <p className="text-xs text-muted-foreground">조건</p>
<p className="text-lg font-bold text-yellow-600">{controlConditions.length}</p> <p className="text-base font-bold text-warning sm:text-lg">{controlConditions.length}</p>
</div> </div>
<div className="h-8 w-px bg-gray-300"></div> <div className="h-8 w-px bg-border hidden sm:block"></div>
<div> <div>
<p className="text-xs text-gray-600">액션</p> <p className="text-xs text-muted-foreground">액션</p>
<p className="text-lg font-bold text-green-600">{dataflowActions.length}</p> <p className="text-base font-bold text-success sm:text-lg">{dataflowActions.length}</p>
</div>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@ -288,10 +296,10 @@ interface ActionFlowCardProps {
const ActionFlowCard: React.FC<ActionFlowCardProps> = ({ type, actions, getTableLabel }) => { const ActionFlowCard: React.FC<ActionFlowCardProps> = ({ type, actions, getTableLabel }) => {
const actionColors = { const actionColors = {
insert: { bg: "bg-blue-50", border: "border-blue-300", text: "text-blue-900", icon: "text-blue-600" }, insert: { bg: "bg-primary/10", border: "border-primary/30", text: "text-primary", icon: "text-primary" },
update: { bg: "bg-green-50", border: "border-green-300", text: "text-green-900", icon: "text-green-600" }, update: { bg: "bg-success/10", border: "border-success/30", text: "text-success", icon: "text-success" },
delete: { bg: "bg-red-50", border: "border-red-300", text: "text-red-900", icon: "text-red-600" }, delete: { bg: "bg-destructive/10", border: "border-destructive/30", text: "text-destructive", icon: "text-destructive" },
upsert: { bg: "bg-purple-50", border: "border-purple-300", text: "text-purple-900", icon: "text-purple-600" }, upsert: { bg: "bg-primary/10", border: "border-primary/30", text: "text-primary", icon: "text-primary" },
}; };
const colors = actionColors[type as keyof typeof actionColors] || actionColors.insert; const colors = actionColors[type as keyof typeof actionColors] || actionColors.insert;
@ -301,20 +309,22 @@ const ActionFlowCard: React.FC<ActionFlowCardProps> = ({ type, actions, getTable
return ( return (
<Card className={`border-2 ${colors.border} ${colors.bg}`}> <Card className={`border-2 ${colors.border} ${colors.bg}`}>
<CardContent className="p-3"> <CardContent>
<div className="p-3">
<div className="mb-2 flex items-center gap-2"> <div className="mb-2 flex items-center gap-2">
<Zap className={`h-4 w-4 ${colors.icon}`} /> <Zap className={`h-4 w-4 ${colors.icon}`} />
<span className={`text-sm font-semibold ${colors.text}`}>{type.toUpperCase()}</span> <span className={`text-sm font-semibold ${colors.text}`}>{type.toUpperCase()}</span>
</div> </div>
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5">
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">
<Database className="h-3 w-3 text-gray-500" /> <Database className="h-3 w-3 text-muted-foreground" />
<span className="truncate font-medium text-gray-900">{displayName}</span> <span className="truncate font-medium text-foreground">{displayName}</span>
</div> </div>
{isTableLabel && action.targetTable && ( {isTableLabel && action.targetTable && (
<span className="ml-5 truncate text-xs text-gray-500">({action.targetTable})</span> <span className="ml-5 truncate text-xs text-muted-foreground">({action.targetTable})</span>
)} )}
</div> </div>
</div>
</CardContent> </CardContent>
</Card> </Card>
); );

56
frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx
View File

@ -154,11 +154,11 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
const getLogicalOperatorColor = (operator: string) => { const getLogicalOperatorColor = (operator: string) => {
switch (operator) { switch (operator) {
case "AND": case "AND":
return "bg-primary/20 text-blue-800"; return "bg-primary/20 text-primary";
case "OR": case "OR":
return "bg-orange-100 text-orange-800"; return "bg-warning/20 text-warning";
default: default:
return "bg-gray-100 text-gray-800"; return "bg-muted text-muted-foreground";
} }
}; };
@ -184,14 +184,14 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
<p className="text-muted-foreground text-sm">제어 조건, 액션 그룹, 필드 매핑을 설정하세요</p> <p className="text-muted-foreground text-sm">제어 조건, 액션 그룹, 필드 매핑을 설정하세요</p>
</CardHeader> </CardHeader>
<CardContent className="flex h-full flex-col p-4"> <CardContent className="flex h-full flex-col p-3 sm:p-4">
{/* 탭 헤더 */} {/* 탭 헤더 */}
<div className="mb-4 flex border-b"> <div className="mb-3 flex border-b sm:mb-4">
{tabs.map((tab) => ( {tabs.map((tab) => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${ className={`flex items-center gap-1 px-2 py-2 text-xs font-medium transition-colors sm:gap-2 sm:px-4 sm:text-sm ${
activeTab === tab.id activeTab === tab.id
? "border-primary text-primary border-b-2" ? "border-primary text-primary border-b-2"
: "text-muted-foreground hover:text-foreground" : "text-muted-foreground hover:text-foreground"
@ -221,7 +221,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
</div> </div>
{controlConditions.length === 0 ? ( {controlConditions.length === 0 ? (
<div className="rounded-lg border border-dashed border-gray-300 p-8 text-center"> <div className="rounded-lg border border-dashed border-border p-8 text-center">
<div className="text-muted-foreground"> <div className="text-muted-foreground">
<AlertTriangle className="mx-auto mb-2 h-8 w-8" /> <AlertTriangle className="mx-auto mb-2 h-8 w-8" />
<p className="mb-2">제어 조건이 없습니다</p> <p className="mb-2">제어 조건이 없습니다</p>
@ -267,7 +267,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
{actionGroups.length > 1 && ( {actionGroups.length > 1 && (
<div className="rounded-md border bg-accent p-3"> <div className="rounded-md border bg-accent p-3">
<div className="mb-2 flex items-center gap-2"> <div className="mb-2 flex items-center gap-2">
<h4 className="text-sm font-medium text-blue-900">그룹 간 실행 조건</h4> <h4 className="text-sm font-medium text-primary">그룹 간 실행 조건</h4>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -279,7 +279,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
onChange={() => onSetGroupsLogicalOperator?.("AND")} onChange={() => onSetGroupsLogicalOperator?.("AND")}
className="h-4 w-4" className="h-4 w-4"
/> />
<label htmlFor="groups-and" className="text-sm text-blue-800"> <label htmlFor="groups-and" className="text-sm text-primary">
<span className="font-medium">AND</span> - 모든 그룹의 조건이 참일 때 실행 <span className="font-medium">AND</span> - 모든 그룹의 조건이 참일 때 실행
</label> </label>
</div> </div>
@ -292,7 +292,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
onChange={() => onSetGroupsLogicalOperator?.("OR")} onChange={() => onSetGroupsLogicalOperator?.("OR")}
className="h-4 w-4" className="h-4 w-4"
/> />
<label htmlFor="groups-or" className="text-sm text-blue-800"> <label htmlFor="groups-or" className="text-sm text-primary">
<span className="font-medium">OR</span> - 하나 이상의 그룹 조건이 참일 때 실행 <span className="font-medium">OR</span> - 하나 이상의 그룹 조건이 참일 때 실행
</label> </label>
</div> </div>
@ -310,8 +310,8 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
<div <div
className={`rounded px-2 py-1 text-xs font-medium ${ className={`rounded px-2 py-1 text-xs font-medium ${
groupsLogicalOperator === "AND" groupsLogicalOperator === "AND"
? "bg-green-100 text-green-800" ? "bg-success/20 text-success"
: "bg-orange-100 text-orange-800" : "bg-warning/20 text-warning"
}`} }`}
> >
{groupsLogicalOperator} {groupsLogicalOperator}
@ -409,7 +409,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
{/* 액션 목록 */} {/* 액션 목록 */}
<div className="space-y-3"> <div className="space-y-3">
{group.actions.map((action, actionIndex) => ( {group.actions.map((action, actionIndex) => (
<div key={action.id} className="rounded-md border bg-white p-3"> <div key={action.id} className="rounded-md border bg-background p-3">
{/* 액션 헤더 */} {/* 액션 헤더 */}
<div className="mb-3 flex items-center justify-between"> <div className="mb-3 flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -533,7 +533,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
</div> </div>
{/* 컬럼 매핑 캔버스 */} {/* 컬럼 매핑 캔버스 */}
<div className="rounded-lg border bg-white p-3"> <div className="rounded-lg border bg-background p-3">
<FieldMappingCanvas <FieldMappingCanvas
fromFields={fromColumns} fromFields={fromColumns}
toFields={toColumns} toFields={toColumns}
@ -594,8 +594,8 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
</div> </div>
{/* 매핑되지 않은 필드 처리 옵션 */} {/* 매핑되지 않은 필드 처리 옵션 */}
<div className="rounded-md border bg-yellow-50 p-3"> <div className="rounded-md border bg-warning/10 p-3">
<h6 className="mb-2 flex items-center gap-1 text-xs font-medium text-yellow-800"> <h6 className="mb-2 flex items-center gap-1 text-xs font-medium text-warning">
<AlertTriangle className="h-3 w-3" /> <AlertTriangle className="h-3 w-3" />
매핑되지 않은 필드 처리 매핑되지 않은 필드 처리
</h6> </h6>
@ -608,7 +608,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
defaultChecked defaultChecked
className="h-3 w-3" className="h-3 w-3"
/> />
<label htmlFor={`empty-${action.id}`} className="text-yellow-700"> <label htmlFor={`empty-${action.id}`} className="text-warning/80">
비워두기 (NULL 값) 비워두기 (NULL 값)
</label> </label>
</div> </div>
@ -619,7 +619,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
name={`unmapped-${action.id}`} name={`unmapped-${action.id}`}
className="h-3 w-3" className="h-3 w-3"
/> />
<label htmlFor={`default-${action.id}`} className="text-yellow-700"> <label htmlFor={`default-${action.id}`} className="text-warning/80">
기본값 사용 기본값 사용
</label> </label>
</div> </div>
@ -630,7 +630,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
name={`unmapped-${action.id}`} name={`unmapped-${action.id}`}
className="h-3 w-3" className="h-3 w-3"
/> />
<label htmlFor={`skip-${action.id}`} className="text-yellow-700"> <label htmlFor={`skip-${action.id}`} className="text-warning/80">
필드 제외 필드 제외
</label> </label>
</div> </div>
@ -647,8 +647,8 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<AlertTriangle className="mt-0.5 h-4 w-4 text-primary" /> <AlertTriangle className="mt-0.5 h-4 w-4 text-primary" />
<div className="text-sm"> <div className="text-sm">
<div className="font-medium text-blue-900">{group.logicalOperator} 조건 그룹</div> <div className="font-medium text-primary">{group.logicalOperator} 조건 그룹</div>
<div className="text-blue-700"> <div className="text-primary/80">
{group.logicalOperator === "AND" {group.logicalOperator === "AND"
? "이 그룹의 모든 액션이 실행 가능한 조건일 때만 실행됩니다." ? "이 그룹의 모든 액션이 실행 가능한 조건일 때만 실행됩니다."
: "이 그룹의 액션 중 하나라도 실행 가능한 조건이면 해당 액션만 실행됩니다."} : "이 그룹의 액션 중 하나라도 실행 가능한 조건이면 해당 액션만 실행됩니다."}
@ -698,21 +698,21 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
</div> </div>
{/* 하단 네비게이션 */} {/* 하단 네비게이션 */}
<div className="flex-shrink-0 border-t pt-4"> <div className="flex-shrink-0 border-t pt-3 sm:pt-4">
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<Button variant="outline" onClick={onBack} className="flex items-center gap-2"> <Button variant="outline" onClick={onBack} className="flex items-center gap-2 w-full sm:w-auto">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
이전 <span className="text-xs sm:text-sm">이전</span>
</Button> </Button>
<div className="text-muted-foreground text-sm"> <div className="text-muted-foreground text-center text-xs sm:text-sm">
{actionGroups.filter((g) => g.isEnabled).length}개 그룹, 총{" "} {actionGroups.filter((g) => g.isEnabled).length}개 그룹, 총{" "}
{actionGroups.reduce((sum, g) => sum + g.actions.filter((a) => a.isEnabled).length, 0)}개 액션 {actionGroups.reduce((sum, g) => sum + g.actions.filter((a) => a.isEnabled).length, 0)}개 액션
</div> </div>
<Button onClick={onNext} className="flex items-center gap-2"> <Button onClick={onNext} className="flex items-center gap-2 w-full sm:w-auto">
<Save className="h-4 w-4" /> <Save className="h-4 w-4" />
저장 <span className="text-xs sm:text-sm">저장</span>
</Button> </Button>
</div> </div>
</div> </div>

12
frontend/components/dataflow/node-editor/FlowToolbar.tsx
View File

@ -111,7 +111,7 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
return ( return (
<> <>
<div className="flex items-center gap-2 rounded-lg border bg-white p-2 shadow-md"> <div className="flex items-center gap-2 rounded-lg border bg-background p-2 shadow-md">
{/* 플로우 이름 */} {/* 플로우 이름 */}
<Input <Input
value={flowName} value={flowName}
@ -120,7 +120,7 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
placeholder="플로우 이름" placeholder="플로우 이름"
/> />
<div className="h-6 w-px bg-gray-200" /> <div className="h-6 w-px bg-border" />
{/* 실행 취소/다시 실행 */} {/* 실행 취소/다시 실행 */}
<Button variant="ghost" size="sm" title="실행 취소 (Ctrl+Z)" disabled={!canUndo()} onClick={undo}> <Button variant="ghost" size="sm" title="실행 취소 (Ctrl+Z)" disabled={!canUndo()} onClick={undo}>
@ -130,7 +130,7 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
<Redo2 className="h-4 w-4" /> <Redo2 className="h-4 w-4" />
</Button> </Button>
<div className="h-6 w-px bg-gray-200" /> <div className="h-6 w-px bg-border" />
{/* 삭제 버튼 */} {/* 삭제 버튼 */}
<Button <Button
@ -139,13 +139,13 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
onClick={handleDelete} onClick={handleDelete}
disabled={selectedNodes.length === 0} disabled={selectedNodes.length === 0}
title={selectedNodes.length > 0 ? `${selectedNodes.length}개 노드 삭제` : "삭제할 노드를 선택하세요"} title={selectedNodes.length > 0 ? `${selectedNodes.length}개 노드 삭제` : "삭제할 노드를 선택하세요"}
className="gap-1 text-red-600 hover:bg-red-50 hover:text-red-700 disabled:opacity-50" className="gap-1 text-destructive hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
{selectedNodes.length > 0 && <span className="text-xs">({selectedNodes.length})</span>} {selectedNodes.length > 0 && <span className="text-xs">({selectedNodes.length})</span>}
</Button> </Button>
<div className="h-6 w-px bg-gray-200" /> <div className="h-6 w-px bg-border" />
{/* 줌 컨트롤 */} {/* 줌 컨트롤 */}
<Button variant="ghost" size="sm" onClick={() => zoomIn()} title="확대"> <Button variant="ghost" size="sm" onClick={() => zoomIn()} title="확대">
@ -158,7 +158,7 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
<span className="text-xs">전체</span> <span className="text-xs">전체</span>
</Button> </Button>
<div className="h-6 w-px bg-gray-200" /> <div className="h-6 w-px bg-border" />
{/* 저장 */} {/* 저장 */}
<Button variant="outline" size="sm" onClick={handleSave} disabled={isSaving} className="gap-1"> <Button variant="outline" size="sm" onClick={handleSave} disabled={isSaving} className="gap-1">

42
frontend/components/dataflow/node-editor/ValidationNotification.tsx
View File

@ -54,31 +54,31 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
<div className="animate-in slide-in-from-right-5 fixed top-4 right-4 z-50 w-80 duration-300"> <div className="animate-in slide-in-from-right-5 fixed top-4 right-4 z-50 w-80 duration-300">
<div <div
className={cn( className={cn(
"rounded-lg border-2 bg-white shadow-2xl", "rounded-lg border-2 bg-background shadow-2xl",
summary.hasBlockingIssues summary.hasBlockingIssues
? "border-red-500" ? "border-destructive"
: summary.warningCount > 0 : summary.warningCount > 0
? "border-yellow-500" ? "border-warning"
: "border-blue-500", : "border-primary",
)} )}
> >
{/* 헤더 */} {/* 헤더 */}
<div <div
className={cn( className={cn(
"flex cursor-pointer items-center justify-between p-3", "flex cursor-pointer items-center justify-between p-3",
summary.hasBlockingIssues ? "bg-red-50" : summary.warningCount > 0 ? "bg-yellow-50" : "bg-blue-50", summary.hasBlockingIssues ? "bg-destructive/10" : summary.warningCount > 0 ? "bg-warning/10" : "bg-primary/10",
)} )}
onClick={() => setIsExpanded(!isExpanded)} onClick={() => setIsExpanded(!isExpanded)}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{summary.hasBlockingIssues ? ( {summary.hasBlockingIssues ? (
<AlertCircle className="h-5 w-5 text-red-600" /> <AlertCircle className="h-5 w-5 text-destructive" />
) : summary.warningCount > 0 ? ( ) : summary.warningCount > 0 ? (
<AlertTriangle className="h-5 w-5 text-yellow-600" /> <AlertTriangle className="h-5 w-5 text-warning" />
) : ( ) : (
<Info className="h-5 w-5 text-blue-600" /> <Info className="h-5 w-5 text-primary" />
)} )}
<span className="text-sm font-semibold text-gray-900">플로우 검증</span> <span className="text-sm font-semibold text-foreground">플로우 검증</span>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{summary.errorCount > 0 && ( {summary.errorCount > 0 && (
<Badge variant="destructive" className="h-5 text-[10px]"> <Badge variant="destructive" className="h-5 text-[10px]">
@ -86,7 +86,7 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
</Badge> </Badge>
)} )}
{summary.warningCount > 0 && ( {summary.warningCount > 0 && (
<Badge className="h-5 bg-yellow-500 text-[10px] hover:bg-yellow-600">{summary.warningCount}</Badge> <Badge className="h-5 bg-warning text-[10px] hover:bg-warning/90">{summary.warningCount}</Badge>
)} )}
{summary.infoCount > 0 && ( {summary.infoCount > 0 && (
<Badge variant="secondary" className="h-5 text-[10px]"> <Badge variant="secondary" className="h-5 text-[10px]">
@ -97,9 +97,9 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{isExpanded ? ( {isExpanded ? (
<ChevronUp className="h-4 w-4 text-gray-400" /> <ChevronUp className="h-4 w-4 text-muted-foreground" />
) : ( ) : (
<ChevronDown className="h-4 w-4 text-gray-400" /> <ChevronDown className="h-4 w-4 text-muted-foreground" />
)} )}
{onClose && ( {onClose && (
<Button <Button
@ -109,7 +109,7 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
e.stopPropagation(); e.stopPropagation();
onClose(); onClose();
}} }}
className="h-6 w-6 p-0 hover:bg-white/50" className="h-6 w-6 p-0 hover:bg-muted"
> >
<X className="h-3.5 w-3.5" /> <X className="h-3.5 w-3.5" />
</Button> </Button>
@ -137,10 +137,10 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
className={cn( className={cn(
"mb-1 flex items-center gap-2 rounded-md px-2 py-1 text-xs font-medium", "mb-1 flex items-center gap-2 rounded-md px-2 py-1 text-xs font-medium",
firstValidation.severity === "error" firstValidation.severity === "error"
? "bg-red-100 text-red-700" ? "bg-destructive/10 text-destructive"
: firstValidation.severity === "warning" : firstValidation.severity === "warning"
? "bg-yellow-100 text-yellow-700" ? "bg-warning/10 text-warning"
: "bg-blue-100 text-blue-700", : "bg-primary/10 text-primary",
)} )}
> >
<Icon className="h-3 w-3" /> <Icon className="h-3 w-3" />
@ -153,16 +153,16 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
{typeValidations.map((validation, index) => ( {typeValidations.map((validation, index) => (
<div <div
key={index} key={index}
className="group cursor-pointer rounded-md border border-gray-200 bg-gray-50 p-2 text-xs transition-all hover:border-gray-300 hover:bg-white hover:shadow-sm" className="group cursor-pointer rounded-md border border-border bg-muted p-2 text-xs transition-all hover:border-primary/50 hover:bg-background hover:shadow-sm"
onClick={() => onNodeClick?.(validation.nodeId)} onClick={() => onNodeClick?.(validation.nodeId)}
> >
<p className="leading-relaxed text-gray-700">{validation.message}</p> <p className="leading-relaxed text-foreground">{validation.message}</p>
{validation.affectedNodes && validation.affectedNodes.length > 1 && ( {validation.affectedNodes && validation.affectedNodes.length > 1 && (
<div className="mt-1 text-[10px] text-gray-500"> <div className="mt-1 text-[10px] text-muted-foreground">
영향받는 노드: {validation.affectedNodes.length}개 영향받는 노드: {validation.affectedNodes.length}개
</div> </div>
)} )}
<div className="mt-1 text-[10px] text-blue-600 opacity-0 transition-opacity group-hover:opacity-100"> <div className="mt-1 text-[10px] text-primary opacity-0 transition-opacity group-hover:opacity-100">
클릭하여 노드 보기 → 클릭하여 노드 보기 →
</div> </div>
</div> </div>
@ -178,7 +178,7 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
{/* 요약 메시지 (닫혀있을 때) */} {/* 요약 메시지 (닫혀있을 때) */}
{!isExpanded && ( {!isExpanded && (
<div className="border-t px-3 py-2"> <div className="border-t px-3 py-2">
<p className="text-xs text-gray-600"> <p className="text-xs text-muted-foreground">
{summary.hasBlockingIssues {summary.hasBlockingIssues
? "⛔ 오류를 해결해야 저장할 수 있습니다" ? "⛔ 오류를 해결해야 저장할 수 있습니다"
: summary.warningCount > 0 : summary.warningCount > 0

18
frontend/components/mail/MailDesigner.tsx
View File

@ -97,9 +97,9 @@ export default function MailDesigner({
// 컴포넌트 타입 정의 // 컴포넌트 타입 정의
const componentTypes = [ const componentTypes = [
{ type: "text", icon: Type, label: "텍스트", color: "bg-primary/20 hover:bg-blue-200" }, { type: "text", icon: Type, label: "텍스트", color: "bg-primary/20 hover:bg-blue-200" },
{ type: "button", icon: MousePointer, label: "버튼", color: "bg-green-100 hover:bg-green-200" }, { type: "button", icon: MousePointer, label: "버튼", color: "bg-success/20 hover:bg-success/30" },
{ type: "image", icon: ImageIcon, label: "이미지", color: "bg-purple-100 hover:bg-purple-200" }, { type: "image", icon: ImageIcon, label: "이미지", color: "bg-purple-100 hover:bg-purple-200" },
{ type: "spacer", icon: Square, label: "여백", color: "bg-muted hover:bg-gray-200" }, { type: "spacer", icon: Square, label: "여백", color: "bg-muted hover:bg-muted/80" },
]; ];
// 컴포넌트 추가 // 컴포넌트 추가
@ -211,10 +211,10 @@ export default function MailDesigner({
{/* 템플릿 정보 */} {/* 템플릿 정보 */}
<Card> <Card>
<CardHeader className="p-4 pb-2"> <CardHeader>
<CardTitle className="text-sm">템플릿 정보</CardTitle> <CardTitle className="text-sm">템플릿 정보</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-4 pt-2 space-y-3"> <CardContent className="space-y-3">
<div> <div>
<Label className="text-xs">템플릿 이름</Label> <Label className="text-xs">템플릿 이름</Label>
<Input <Input
@ -276,7 +276,7 @@ export default function MailDesigner({
{/* 컴포넌트 렌더링 */} {/* 컴포넌트 렌더링 */}
<div className="p-6 space-y-4"> <div className="p-6 space-y-4">
{components.length === 0 ? ( {components.length === 0 ? (
<div className="text-center py-16 text-gray-400"> <div className="text-center py-16 text-muted-foreground/50">
<Mail className="w-16 h-16 mx-auto mb-4 opacity-20" /> <Mail className="w-16 h-16 mx-auto mb-4 opacity-20" />
<p>왼쪽에서 컴포넌트를 추가하세요</p> <p>왼쪽에서 컴포넌트를 추가하세요</p>
</div> </div>
@ -333,7 +333,7 @@ export default function MailDesigner({
</div> </div>
{/* 오른쪽: 속성 패널 */} {/* 오른쪽: 속성 패널 */}
<div className="w-80 bg-white border-l p-4 overflow-y-auto"> <div className="w-80 bg-background border-l p-4 overflow-y-auto">
{selected ? ( {selected ? (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
@ -571,8 +571,8 @@ export default function MailDesigner({
/> />
<span className="text-sm text-muted-foreground">픽셀</span> <span className="text-sm text-muted-foreground">픽셀</span>
</div> </div>
<div className="mt-3 p-3 bg-blue-50 rounded-lg border border-blue-200"> <div className="mt-3 p-3 bg-primary/10 rounded-lg border border-primary/20">
<p className="text-xs text-blue-800"> <p className="text-xs text-primary">
<strong>추천값:</strong><br/> <strong>추천값:</strong><br/>
• 좁은 간격: 10~20 픽셀<br/> • 좁은 간격: 10~20 픽셀<br/>
• 보통 간격: 30~50 픽셀<br/> • 보통 간격: 30~50 픽셀<br/>
@ -584,7 +584,7 @@ export default function MailDesigner({
)} )}
</div> </div>
) : ( ) : (
<div className="text-center py-16 text-gray-400"> <div className="text-center py-16 text-muted-foreground">
<Settings className="w-12 h-12 mx-auto mb-4 opacity-20" /> <Settings className="w-12 h-12 mx-auto mb-4 opacity-20" />
<p className="text-sm">컴포넌트를 선택하세요</p> <p className="text-sm">컴포넌트를 선택하세요</p>
</div> </div>

53
frontend/components/screen/InteractiveScreenViewer.tsx
View File

@ -469,7 +469,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
minLength={config?.minLength} minLength={config?.minLength}
maxLength={config?.maxLength} maxLength={config?.maxLength}
pattern={getPatternByFormat(config?.format || "none")} pattern={getPatternByFormat(config?.format || "none")}
className={`w-full ${isAutoInput ? "bg-gray-50 text-gray-700" : ""}`} className={`w-full ${isAutoInput ? "bg-muted text-muted-foreground" : ""}`}
/>, />,
); );
} }
@ -932,28 +932,28 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
return ( return (
<div className="mt-2 space-y-2"> <div className="mt-2 space-y-2">
<div className="text-sm font-medium text-gray-700"> <div className="text-sm font-medium text-foreground">
업로드된 파일 ({fileData.length}개) 업로드된 파일 ({fileData.length}개)
</div> </div>
{fileData.map((fileInfo: any, index: number) => { {fileData.map((fileInfo: any, index: number) => {
const isImage = fileInfo.type?.startsWith('image/'); const isImage = fileInfo.type?.startsWith('image/');
return ( return (
<div key={index} className="flex items-center gap-2 rounded border bg-gray-50 p-2"> <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
<div className="flex h-16 w-16 items-center justify-center rounded bg-gray-200"> <div className="flex h-16 w-16 items-center justify-center rounded bg-muted/50">
{isImage ? ( {isImage ? (
<div className="text-green-600 text-xs font-medium">IMG</div> <div className="text-success text-xs font-medium">IMG</div>
) : ( ) : (
<File className="h-8 w-8 text-gray-500" /> <File className="h-8 w-8 text-muted-foreground" />
)} )}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">{fileInfo.name}</p> <p className="text-sm font-medium text-foreground truncate">{fileInfo.name}</p>
<p className="text-xs text-gray-500"> <p className="text-xs text-muted-foreground">
{(fileInfo.size / 1024 / 1024).toFixed(2)} MB {(fileInfo.size / 1024 / 1024).toFixed(2)} MB
</p> </p>
<p className="text-xs text-gray-500">{fileInfo.type || '알 수 없는 형식'}</p> <p className="text-xs text-muted-foreground">{fileInfo.type || '알 수 없는 형식'}</p>
<p className="text-xs text-gray-400">업로드: {new Date(fileInfo.uploadedAt).toLocaleString('ko-KR')}</p> <p className="text-xs text-muted-foreground/70">업로드: {new Date(fileInfo.uploadedAt).toLocaleString('ko-KR')}</p>
</div> </div>
<Button <Button
type="button" type="button"
@ -988,39 +988,42 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
style={{ zIndex: 1 }} style={{ zIndex: 1 }}
/> />
<div className={` <div className={cn(
flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors "flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors",
${currentValue && currentValue.files && currentValue.files.length > 0 ? 'border-green-300 bg-green-50' : 'border-gray-300 bg-gray-50 hover:border-gray-400 hover:bg-gray-100'} currentValue && currentValue.files && currentValue.files.length > 0
${readonly ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ? 'border-success/30 bg-success/10'
`}> : 'border-input bg-muted hover:border-input/80 hover:bg-muted/80',
readonly && 'cursor-not-allowed opacity-50',
!readonly && 'cursor-pointer'
)}>
<div className="space-y-2"> <div className="space-y-2">
{currentValue && currentValue.files && currentValue.files.length > 0 ? ( {currentValue && currentValue.files && currentValue.files.length > 0 ? (
<> <>
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-success/20">
<svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="h-5 w-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </div>
</div> </div>
<p className="text-sm font-medium text-green-900"> <p className="text-sm font-medium text-success">
{currentValue.totalCount === 1 {currentValue.totalCount === 1
? '파일 선택됨' ? '파일 선택됨'
: `${currentValue.totalCount}개 파일 선택됨`} : `${currentValue.totalCount}개 파일 선택됨`}
</p> </p>
<p className="text-xs text-green-700"> <p className="text-xs text-success/80">
총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB 총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
</p> </p>
<p className="text-xs text-green-700">클릭하여 다른 파일 선택</p> <p className="text-xs text-success/80">클릭하여 다른 파일 선택</p>
</> </>
) : ( ) : (
<> <>
<Upload className="mx-auto h-8 w-8 text-gray-400" /> <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'} {config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
</p> </p>
{(config?.accept || config?.maxSize) && ( {(config?.accept || config?.maxSize) && (
<div className="text-xs text-gray-500 space-y-1"> <div className="text-xs text-muted-foreground space-y-1">
{config.accept && <div>허용 형식: {config.accept}</div>} {config.accept && <div>허용 형식: {config.accept}</div>}
{config.maxSize && <div>최대 크기: {config.maxSize}MB</div>} {config.maxSize && <div>최대 크기: {config.maxSize}MB</div>}
{config.multiple && <div>다중 선택 가능</div>} {config.multiple && <div>다중 선택 가능</div>}
@ -1875,10 +1878,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
<div className="overflow-y-auto px-6 pb-6" style={{ maxHeight: "calc(90vh - 80px)" }}> <div className="overflow-y-auto px-6 pb-6" style={{ maxHeight: "calc(90vh - 80px)" }}>
{popupLoading ? ( {popupLoading ? (
<div className="flex items-center justify-center py-8"> <div className="flex items-center justify-center py-8">
<div className="text-gray-500">화면을 불러오는 중...</div> <div className="text-muted-foreground">화면을 불러오는 중...</div>
</div> </div>
) : popupLayout.length > 0 ? ( ) : popupLayout.length > 0 ? (
<div className="relative bg-white border rounded" style={{ <div className="relative bg-background border rounded" style={{
width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%", width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%",
height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px", height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
minHeight: "400px", minHeight: "400px",
@ -1924,7 +1927,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
</div> </div>
) : ( ) : (
<div className="flex items-center justify-center py-8"> <div className="flex items-center justify-center py-8">
<div className="text-gray-500">화면 데이터가 없습니다.</div> <div className="text-muted-foreground">화면 데이터가 없습니다.</div>
</div> </div>
)} )}
</div> </div>

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

@ -4270,7 +4270,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
return ( return (
<div className="bg-card border-border fixed right-6 bottom-20 z-50 rounded-lg border shadow-lg"> <div className="bg-card border-border fixed right-6 bottom-20 z-50 rounded-lg border shadow-lg">
<div className="flex flex-col gap-2 p-3"> <div className="flex flex-col gap-2 p-3">
<div className="mb-1 flex items-center gap-2 text-xs text-gray-600"> <div className="mb-1 flex items-center gap-2 text-xs text-muted-foreground">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="14" width="14"

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

@ -29,9 +29,9 @@ export default function ScreenPreview({ layout, screenName, className }: ScreenP
case "desktop": case "desktop":
return "w-full max-w-6xl mx-auto"; return "w-full max-w-6xl mx-auto";
case "tablet": case "tablet":
return "w-full max-w-2xl mx-auto border-x-8 border-gray-200"; return "w-full max-w-2xl mx-auto border-x-8 border-border";
case "mobile": case "mobile":
return "w-full max-w-sm mx-auto border-x-4 border-gray-200"; return "w-full max-w-sm mx-auto border-x-4 border-border";
default: default:
return "w-full"; return "w-full";
} }
@ -100,7 +100,7 @@ export default function ScreenPreview({ layout, screenName, className }: ScreenP
return ( return (
<div <div
className="min-h-screen bg-white" className="min-h-screen bg-background"
style={{ style={{
padding: `${padding}px`, padding: `${padding}px`,
}} }}
@ -135,12 +135,12 @@ export default function ScreenPreview({ layout, screenName, className }: ScreenP
{/* 미리보기 헤더 */} {/* 미리보기 헤더 */}
<Card> <Card>
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center justify-between"> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<CardTitle className="flex items-center gap-2 text-sm font-medium"> <CardTitle className="flex items-center gap-2 text-sm font-medium sm:text-base">
<Eye className="h-4 w-4" /> <Eye className="h-4 w-4" />
{screenName} - 미리보기 {screenName} - 미리보기
</CardTitle> </CardTitle>
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
{/* 미리보기 모드 선택 */} {/* 미리보기 모드 선택 */}
<div className="flex rounded-lg border"> <div className="flex rounded-lg border">
<Button <Button
@ -183,13 +183,13 @@ export default function ScreenPreview({ layout, screenName, className }: ScreenP
{/* 미리보기 컨텐츠 */} {/* 미리보기 컨텐츠 */}
<Card> <Card>
<CardContent className="p-0"> <CardContent className="p-0">
<div className={`${getPreviewStyles(previewMode)} min-h-screen bg-gray-50`}> <div className={`${getPreviewStyles(previewMode)} min-h-screen bg-muted`}>
{layout.components.length > 0 ? ( {layout.components.length > 0 ? (
renderGridLayout() renderGridLayout()
) : ( ) : (
<div className="flex min-h-screen items-center justify-center text-gray-500"> <div className="flex min-h-screen items-center justify-center text-muted-foreground">
<div className="text-center"> <div className="text-center">
<Eye className="mx-auto mb-4 h-16 w-16 text-gray-300" /> <Eye className="mx-auto mb-4 h-16 w-16 text-muted-foreground/30" />
<p>미리보기할 컴포넌트가 없습니다</p> <p>미리보기할 컴포넌트가 없습니다</p>
<p className="text-sm">화면 설계기에서 컴포넌트를 추가해주세요</p> <p className="text-sm">화면 설계기에서 컴포넌트를 추가해주세요</p>
</div> </div>

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

@ -222,8 +222,8 @@ export default function TemplateManager({
// 화면이 선택되지 않았을 때 처리 // 화면이 선택되지 않았을 때 처리
if (!selectedScreen) { if (!selectedScreen) {
return ( return (
<div className="py-12 text-center text-gray-500"> <div className="py-12 text-center text-muted-foreground">
<FileText className="mx-auto mb-4 h-16 w-16 text-gray-300" /> <FileText className="mx-auto mb-4 h-16 w-16 text-muted-foreground/30" />
<p className="mb-4 text-lg">템플릿을 적용할 화면을 선택해주세요</p> <p className="mb-4 text-lg">템플릿을 적용할 화면을 선택해주세요</p>
<p className="mb-6 text-sm">화면 목록에서 화면을 선택한 후 템플릿을 관리하세요</p> <p className="mb-6 text-sm">화면 목록에서 화면을 선택한 후 템플릿을 관리하세요</p>
<Button onClick={onBackToList} variant="outline"> <Button onClick={onBackToList} variant="outline">
@ -253,7 +253,7 @@ export default function TemplateManager({
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="relative"> <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" />
<Input <Input
placeholder="템플릿명 또는 설명으로 검색..." placeholder="템플릿명 또는 설명으로 검색..."
value={searchTerm} value={searchTerm}
@ -286,8 +286,8 @@ export default function TemplateManager({
}`} }`}
onClick={() => handleTemplateSelect(template)} onClick={() => handleTemplateSelect(template)}
> >
<CardContent className="p-4"> <CardContent>
<div className="flex items-start justify-between"> <div className="flex items-start justify-between p-4">
<div className="flex-1"> <div className="flex-1">
<h3 className="mb-1 text-sm font-medium">{template.templateName}</h3> <h3 className="mb-1 text-sm font-medium">{template.templateName}</h3>
<p className="mb-2 text-xs text-muted-foreground">{template.description || "설명 없음"}</p> <p className="mb-2 text-xs text-muted-foreground">{template.description || "설명 없음"}</p>
@ -300,7 +300,7 @@ export default function TemplateManager({
공개 공개
</Badge> </Badge>
)} )}
<span className="text-xs text-gray-500"> <span className="text-xs text-muted-foreground">
{template.createdBy} • {template.createdDate.toLocaleDateString()} {template.createdBy} • {template.createdDate.toLocaleDateString()}
</span> </span>
</div> </div>
@ -395,9 +395,11 @@ export default function TemplateManager({
</Card> </Card>
) : ( ) : (
<Card> <Card>
<CardContent className="p-8 text-center text-gray-500"> <CardContent>
<Eye className="mx-auto mb-4 h-12 w-12 text-gray-300" /> <div className="p-8 text-center text-muted-foreground">
<Eye className="mx-auto mb-4 h-12 w-12 text-muted-foreground/30" />
<p>템플릿을 선택하면 상세 정보를 볼 수 있습니다</p> <p>템플릿을 선택하면 상세 정보를 볼 수 있습니다</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
)} )}

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

@ -273,8 +273,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{/* 모달 열기 액션 설정 */} {/* 모달 열기 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "modal" && ( {(component.componentConfig?.action?.type || "save") === "modal" && (
<div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4"> <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
<h4 className="text-sm font-medium text-gray-700">모달 설정</h4> <h4 className="text-sm font-medium text-foreground">모달 설정</h4>
<div> <div>
<Label htmlFor="modal-title">모달 제목</Label> <Label htmlFor="modal-title">모달 제목</Label>
@ -302,7 +302,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
onUpdateProperty("componentConfig.action.modalDescription", newValue); onUpdateProperty("componentConfig.action.modalDescription", newValue);
}} }}
/> />
<p className="mt-1 text-xs text-gray-500">모달 제목 아래에 표시됩니다</p> <p className="mt-1 text-xs text-muted-foreground">모달 제목 아래에 표시됩니다</p>
</div> </div>
<div> <div>
@ -359,15 +359,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{(() => { {(() => {
const filteredScreens = filterScreens(modalSearchTerm); const filteredScreens = filterScreens(modalSearchTerm);
if (screensLoading) { if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>; return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
} }
if (filteredScreens.length === 0) { if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>; return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
} }
return filteredScreens.map((screen, index) => ( return filteredScreens.map((screen, index) => (
<div <div
key={`modal-screen-${screen.id}-${index}`} key={`modal-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100" className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => { onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id); onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setModalScreenOpen(false); setModalScreenOpen(false);
@ -382,7 +382,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium">{screen.name}</span> <span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-gray-500">{screen.description}</span>} {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div> </div>
</div> </div>
)); ));
@ -397,8 +397,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{/* 수정 액션 설정 */} {/* 수정 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "edit" && ( {(component.componentConfig?.action?.type || "save") === "edit" && (
<div className="mt-4 space-y-4 rounded-lg border bg-green-50 p-4"> <div className="mt-4 space-y-4 rounded-lg border bg-success/10 p-4">
<h4 className="text-sm font-medium text-gray-700">수정 설정</h4> <h4 className="text-sm font-medium text-foreground">수정 설정</h4>
<div> <div>
<Label htmlFor="edit-screen">수정 폼 화면 선택</Label> <Label htmlFor="edit-screen">수정 폼 화면 선택</Label>
@ -434,15 +434,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{(() => { {(() => {
const filteredScreens = filterScreens(modalSearchTerm); const filteredScreens = filterScreens(modalSearchTerm);
if (screensLoading) { if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>; return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
} }
if (filteredScreens.length === 0) { if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>; return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
} }
return filteredScreens.map((screen, index) => ( return filteredScreens.map((screen, index) => (
<div <div
key={`edit-screen-${screen.id}-${index}`} key={`edit-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100" className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => { onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id); onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setModalScreenOpen(false); setModalScreenOpen(false);
@ -457,7 +457,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium">{screen.name}</span> <span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-gray-500">{screen.description}</span>} {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div> </div>
</div> </div>
)); ));
@ -466,7 +466,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<p className="mt-1 text-xs text-gray-500"> <p className="mt-1 text-xs text-muted-foreground">
선택된 데이터가 이 폼 화면에 자동으로 로드되어 수정할 수 있습니다 선택된 데이터가 이 폼 화면에 자동으로 로드되어 수정할 수 있습니다
</p> </p>
</div> </div>
@ -505,7 +505,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
onUpdateProperty("webTypeConfig.editModalTitle", newValue); onUpdateProperty("webTypeConfig.editModalTitle", newValue);
}} }}
/> />
<p className="mt-1 text-xs text-gray-500">비워두면 기본 제목이 표시됩니다</p> <p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
</div> </div>
<div> <div>
@ -521,7 +521,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
onUpdateProperty("webTypeConfig.editModalDescription", newValue); onUpdateProperty("webTypeConfig.editModalDescription", newValue);
}} }}
/> />
<p className="mt-1 text-xs text-gray-500">비워두면 설명이 표시되지 않습니다</p> <p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
</div> </div>
<div> <div>
@ -554,7 +554,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
<div className="mt-4 space-y-4"> <div className="mt-4 space-y-4">
<div> <div>
<Label> <Label>
전체 이력 표시 컬럼 (필수) <span className="text-red-600">*</span> 전체 이력 표시 컬럼 (필수) <span className="text-destructive">*</span>
</Label> </Label>
<Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}> <Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}>
@ -616,8 +616,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{/* 페이지 이동 액션 설정 */} {/* 페이지 이동 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "navigate" && ( {(component.componentConfig?.action?.type || "save") === "navigate" && (
<div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4"> <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
<h4 className="text-sm font-medium text-gray-700">페이지 이동 설정</h4> <h4 className="text-sm font-medium text-foreground">페이지 이동 설정</h4>
<div> <div>
<Label htmlFor="target-screen-nav">이동할 화면 선택</Label> <Label htmlFor="target-screen-nav">이동할 화면 선택</Label>
@ -653,15 +653,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{(() => { {(() => {
const filteredScreens = filterScreens(navSearchTerm); const filteredScreens = filterScreens(navSearchTerm);
if (screensLoading) { if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>; return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
} }
if (filteredScreens.length === 0) { if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>; return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
} }
return filteredScreens.map((screen, index) => ( return filteredScreens.map((screen, index) => (
<div <div
key={`navigate-screen-${screen.id}-${index}`} key={`navigate-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100" className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => { onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id); onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setNavScreenOpen(false); setNavScreenOpen(false);
@ -676,7 +676,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium">{screen.name}</span> <span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-gray-500">{screen.description}</span>} {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div> </div>
</div> </div>
)); ));
@ -685,7 +685,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<p className="mt-1 text-xs text-gray-500"> <p className="mt-1 text-xs text-muted-foreground">
선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다 선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다
</p> </p>
</div> </div>
@ -704,19 +704,19 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
className="h-6 w-full px-2 py-0 text-xs" className="h-6 w-full px-2 py-0 text-xs"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
/> />
<p className="mt-1 text-xs text-gray-500">URL을 입력하면 화면 선택보다 우선 적용됩니다</p> <p className="mt-1 text-xs text-muted-foreground">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
</div> </div>
</div> </div>
)} )}
{/* 제어 기능 섹션 */} {/* 제어 기능 섹션 */}
<div className="mt-8 border-t border-gray-200 pt-6"> <div className="mt-8 border-t border-border pt-6">
<ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} /> <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
</div> </div>
{/* 🆕 플로우 단계별 표시 제어 섹션 (플로우 위젯이 있을 때만 표시) */} {/* 🆕 플로우 단계별 표시 제어 섹션 (플로우 위젯이 있을 때만 표시) */}
{hasFlowWidget && ( {hasFlowWidget && (
<div className="mt-8 border-t border-gray-200 pt-6"> <div className="mt-8 border-t border-border pt-6">
<FlowVisibilityConfigPanel <FlowVisibilityConfigPanel
component={component} component={component}
allComponents={allComponents} allComponents={allComponents}

2
frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
View File

@ -353,7 +353,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
Step {step.stepOrder} Step {step.stepOrder}
</Badge> </Badge>
<span>{step.stepName}</span> <span>{step.stepName}</span>
{isChecked && <CheckCircle className="ml-auto h-4 w-4 text-green-500" />} {isChecked && <CheckCircle className="ml-auto h-4 w-4 text-success" />}
</Label> </Label>
</div> </div>
); );

7
frontend/components/screen/filters/AdvancedSearchFilters.tsx
View File

@ -319,13 +319,6 @@ export const AdvancedSearchFilters: React.FC<AdvancedSearchFiltersProps> = ({
return ( return (
<div className={cn("space-y-2", className)}> <div className={cn("space-y-2", className)}>
{/* 필터 헤더 */}
<div className="text-muted-foreground flex items-center gap-2 text-sm">
<Search className="h-3 w-3" />
검색 필터
{autoGeneratedFilters.length > 0 && <span className="text-xs text-primary">(자동 생성)</span>}
</div>
{/* 필터 그리드 - 적절한 너비로 조정 */} {/* 필터 그리드 - 적절한 너비로 조정 */}
{effectiveFilters.length > 0 && ( {effectiveFilters.length > 0 && (
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">

42
frontend/components/screen/panels/FileComponentConfigPanel.tsx
View File

@ -971,7 +971,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
<div className="space-y-4"> <div className="space-y-4">
{/* 기본 정보 */} {/* 기본 정보 */}
<div className="space-y-3"> <div className="space-y-3">
<h4 className="text-sm font-medium text-gray-900">기본 설정</h4> <h4 className="text-sm font-medium text-foreground">기본 설정</h4>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="docType">문서 타입</Label> <Label htmlFor="docType">문서 타입</Label>
@ -1019,7 +1019,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
{/* 파일 업로드 제한 설정 */} {/* 파일 업로드 제한 설정 */}
<div className="space-y-3"> <div className="space-y-3">
<h4 className="text-sm font-medium text-gray-900">업로드 제한</h4> <h4 className="text-sm font-medium text-foreground">업로드 제한</h4>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-2"> <div className="space-y-2">
@ -1070,7 +1070,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
{/* 허용 파일 타입 설정 */} {/* 허용 파일 타입 설정 */}
<div className="space-y-3"> <div className="space-y-3">
<h4 className="text-sm font-medium text-gray-900">허용 파일 타입</h4> <h4 className="text-sm font-medium text-foreground">허용 파일 타입</h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{acceptTypes.map((type, index) => ( {acceptTypes.map((type, index) => (
@ -1086,7 +1086,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
</Button> </Button>
</Badge> </Badge>
))} ))}
{acceptTypes.length === 0 && <span className="text-sm text-gray-500">모든 파일 타입 허용</span>} {acceptTypes.length === 0 && <span className="text-sm text-muted-foreground">모든 파일 타입 허용</span>}
</div> </div>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
@ -1106,15 +1106,16 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
{/* 파일 업로드 영역 */} {/* 파일 업로드 영역 */}
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-sm font-medium text-gray-900">파일 업로드</h4> <h4 className="text-sm font-medium text-foreground">파일 업로드</h4>
<Card className="border-gray-200/60 shadow-sm"> <Card className="border-border shadow-sm">
<CardContent className="p-6"> <CardContent>
<div className="p-6">
<div <div
className={` className={cn(
border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all duration-300 "border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all duration-300",
${dragOver ? 'border-blue-400 bg-gradient-to-br from-blue-50 to-indigo-50 shadow-sm' : 'border-gray-300/60'} dragOver ? 'border-primary bg-primary/10 shadow-sm' : 'border-border',
${uploading ? 'opacity-50 cursor-not-allowed' : 'hover:border-blue-400/60 hover:bg-gray-50/50 hover:shadow-sm'} uploading ? 'opacity-50 cursor-not-allowed' : 'hover:border-primary/50 hover:bg-muted/50 hover:shadow-sm'
`} )}
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
@ -1148,12 +1149,12 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
<div className="flex flex-col items-center space-y-2"> <div className="flex flex-col items-center space-y-2">
{uploading ? ( {uploading ? (
<> <>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div> <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
<p className="text-sm font-medium text-gray-700">업로드 중...</p> <p className="text-sm font-medium text-foreground">업로드 중...</p>
</> </>
) : ( ) : (
<> <>
<Upload className="w-6 h-6 text-gray-400" /> <Upload className="w-6 h-6 text-muted-foreground" />
<p className="text-sm text-muted-foreground">파일 업로드</p> <p className="text-sm text-muted-foreground">파일 업로드</p>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
@ -1175,16 +1176,16 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
</div> </div>
<div className="space-y-2 max-h-40 overflow-y-auto"> <div className="space-y-2 max-h-40 overflow-y-auto">
{uploadedFiles.map((file) => ( {uploadedFiles.map((file) => (
<div key={file.objid} className="flex items-center justify-between p-2 bg-gray-50 rounded-lg"> <div key={file.objid} className="flex items-center justify-between p-2 bg-muted rounded-lg">
<div className="flex items-center space-x-2 flex-1 min-w-0"> <div className="flex items-center space-x-2 flex-1 min-w-0">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
{getFileIcon(file.fileExt)} {getFileIcon(file.fileExt)}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-900 truncate"> <p className="text-xs font-medium text-foreground truncate">
{file.realFileName} {file.realFileName}
</p> </p>
<div className="flex items-center space-x-1 text-xs text-gray-500"> <div className="flex items-center space-x-1 text-xs text-muted-foreground">
<span>{formatFileSize(file.fileSize)}</span> <span>{formatFileSize(file.fileSize)}</span>
<span>•</span> <span>•</span>
<span>{file.fileExt.toUpperCase()}</span> <span>{file.fileExt.toUpperCase()}</span>
@ -1207,7 +1208,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleFileDelete(file.objid || file.id || '')} onClick={() => handleFileDelete(file.objid || file.id || '')}
className="h-6 w-6 p-0 text-destructive hover:text-red-700" className="h-6 w-6 p-0 text-destructive hover:text-destructive/80"
title="삭제" title="삭제"
> >
<Trash2 className="w-3 h-3" /> <Trash2 className="w-3 h-3" />
@ -1218,6 +1219,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
</div> </div>
</div> </div>
)} )}
</div>
</CardContent> </CardContent>
</Card> </Card>
@ -1240,7 +1242,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
파일 저장 파일 저장
</Button> </Button>
</div> </div>
<p className="text-xs text-blue-700 mt-1"> <p className="text-xs text-primary/80 mt-1">
다른 컴포넌트로 이동하기 전에 파일을 저장해주세요. 다른 컴포넌트로 이동하기 전에 파일을 저장해주세요.
</p> </p>
</div> </div>

16
frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
View File

@ -118,9 +118,9 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
{/* 안내 메시지 */} {/* 안내 메시지 */}
<Separator className="my-4" /> <Separator className="my-4" />
<div className="flex flex-col items-center justify-center py-8 text-center"> <div className="flex flex-col items-center justify-center py-8 text-center">
<Settings className="mb-2 h-8 w-8 text-gray-300" /> <Settings className="mb-2 h-8 w-8 text-muted-foreground/30" />
<p className="text-[10px] text-gray-500">컴포넌트를 선택하여</p> <p className="text-[10px] text-muted-foreground">컴포넌트를 선택하여</p>
<p className="text-[10px] text-gray-500">속성을 편집하세요</p> <p className="text-[10px] text-muted-foreground">속성을 편집하세요</p>
</div> </div>
</div> </div>
</div> </div>
@ -479,7 +479,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
if (!componentId) { if (!componentId) {
return ( return (
<div className="flex h-full items-center justify-center p-8 text-center"> <div className="flex h-full items-center justify-center p-8 text-center">
<p className="text-sm text-gray-500">컴포넌트 ID가 설정되지 않았습니다</p> <p className="text-sm text-muted-foreground">컴포넌트 ID가 설정되지 않았습니다</p>
</div> </div>
); );
} }
@ -511,7 +511,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
<SelectItem key={option.value} value={option.value}> <SelectItem key={option.value} value={option.value}>
<div> <div>
<div className="font-medium">{option.label}</div> <div className="font-medium">{option.label}</div>
<div className="text-xs text-gray-500">{option.description}</div> <div className="text-xs text-muted-foreground">{option.description}</div>
</div> </div>
</SelectItem> </SelectItem>
))} ))}
@ -594,7 +594,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
// 기본 메시지 // 기본 메시지
return ( return (
<div className="flex h-full items-center justify-center p-8 text-center"> <div className="flex h-full items-center justify-center p-8 text-center">
<p className="text-sm text-gray-500">이 컴포넌트는 추가 설정이 없습니다</p> <p className="text-sm text-muted-foreground">이 컴포넌트는 추가 설정이 없습니다</p>
</div> </div>
); );
}; };
@ -602,9 +602,9 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
return ( return (
<div className="flex h-full flex-col bg-white"> <div className="flex h-full flex-col bg-white">
{/* 헤더 - 간소화 */} {/* 헤더 - 간소화 */}
<div className="border-b border-gray-200 px-3 py-2"> <div className="border-b border-border px-3 py-2">
{selectedComponent.type === "widget" && ( {selectedComponent.type === "widget" && (
<div className="truncate text-[10px] text-gray-600"> <div className="truncate text-[10px] text-muted-foreground">
{(selectedComponent as WidgetComponent).label || selectedComponent.id} {(selectedComponent as WidgetComponent).label || selectedComponent.id}
</div> </div>
)} )}

7
frontend/components/screen/widgets/FlowWidget.tsx
View File

@ -700,7 +700,7 @@ export function FlowWidget({
{/* 선택된 스텝의 데이터 리스트 */} {/* 선택된 스텝의 데이터 리스트 */}
{selectedStepId !== null && ( {selectedStepId !== null && (
<div className="bg-muted/30 mt-4 flex w-full flex-col rounded-lg border sm:mt-6 lg:mt-8"> <div className="mt-4 flex w-full flex-col sm:mt-6 lg:mt-8">
{/* 헤더 - 자동 높이 */} {/* 헤더 - 자동 높이 */}
<div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4"> <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
@ -746,9 +746,8 @@ export function FlowWidget({
{/* 🆕 검색 필터 입력 영역 */} {/* 🆕 검색 필터 입력 영역 */}
{searchFilterColumns.size > 0 && ( {searchFilterColumns.size > 0 && (
<div className="bg-muted/30 mt-4 space-y-3 rounded border p-4"> <div className="mt-4 space-y-3 p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-end">
<h5 className="text-sm font-medium">검색 필터</h5>
{Object.keys(searchValues).length > 0 && ( {Object.keys(searchValues).length > 0 && (
<Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-7 text-xs"> <Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-7 text-xs">
<X className="mr-1 h-3 w-3" /> <X className="mr-1 h-3 w-3" />

4
frontend/components/ui/table.tsx
View File

@ -26,14 +26,14 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
} }
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />; return <tbody data-slot="table-body" className={cn(className)} {...props} />;
} }
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) { function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
return ( return (
<tfoot <tfoot
data-slot="table-footer" data-slot="table-footer"
className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)} className={cn("bg-muted/50 font-medium", className)}
{...props} {...props}
/> />
); );

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

@ -327,10 +327,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
// 폴백 렌더링 - 기본 플레이스홀더 // 폴백 렌더링 - 기본 플레이스홀더
return ( return (
<div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50 p-4"> <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-border bg-muted p-4">
<div className="text-center"> <div className="text-center">
<div className="mb-2 text-sm font-medium text-gray-600">{component.label || component.id}</div> <div className="mb-2 text-sm font-medium text-muted-foreground">{component.label || component.id}</div>
<div className="text-xs text-gray-400">미구현 컴포넌트: {componentType}</div> <div className="text-xs text-muted-foreground/70">미구현 컴포넌트: {componentType}</div>
</div> </div>
</div> </div>
); );

12
frontend/lib/registry/components/CardRenderer.tsx
View File

@ -25,30 +25,30 @@ const CardRenderer: ComponentRenderer = ({ component, children, isInteractive =
<CardTitle className="text-lg">{title}</CardTitle> <CardTitle className="text-lg">{title}</CardTitle>
</CardHeader> </CardHeader>
)} )}
<CardContent className="flex-1 p-4"> <CardContent className="flex-1">
{children && React.Children.count(children) > 0 ? ( {children && React.Children.count(children) > 0 ? (
children children
) : isInteractive ? ( ) : isInteractive ? (
// 실제 할당된 화면에서는 설정된 내용 표시 // 실제 할당된 화면에서는 설정된 내용 표시
<div className="flex h-full items-start text-sm text-gray-700"> <div className="flex h-full items-start text-sm text-foreground">
<div className="w-full"> <div className="w-full">
<div className="mb-2 font-medium">{content}</div> <div className="mb-2 font-medium">{content}</div>
<div className="text-xs text-gray-500">실제 할당된 화면에서 표시되는 카드입니다.</div> <div className="text-xs text-muted-foreground">실제 할당된 화면에서 표시되는 카드입니다.</div>
</div> </div>
</div> </div>
) : ( ) : (
// 디자이너에서는 플레이스홀더 표시 // 디자이너에서는 플레이스홀더 표시
<div className="flex h-full items-center justify-center text-center"> <div className="flex h-full items-center justify-center text-center">
<div> <div>
<div className="text-sm text-gray-600">카드 내용 영역</div> <div className="text-sm text-muted-foreground">카드 내용 영역</div>
<div className="mt-1 text-xs text-gray-400">컴포넌트를 여기에 배치하세요</div> <div className="mt-1 text-xs text-muted-foreground/70">컴포넌트를 여기에 배치하세요</div>
</div> </div>
</div> </div>
)} )}
</CardContent> </CardContent>
{showFooter && ( {showFooter && (
<CardFooter> <CardFooter>
<div className="text-sm text-gray-500">카드 푸터</div> <div className="text-sm text-muted-foreground">카드 푸터</div>
</CardFooter> </CardFooter>
)} )}
</Card> </Card>

40
frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
View File

@ -187,8 +187,8 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
}; };
if (isDesignMode) { if (isDesignMode) {
componentStyle.border = "1px dashed #cbd5e1"; componentStyle.border = "1px dashed hsl(var(--border))";
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1"; componentStyle.borderColor = isSelected ? "hsl(var(--ring))" : "hsl(var(--border))";
} }
// 표시할 데이터 결정 (로드된 테이블 데이터 우선 사용) // 표시할 데이터 결정 (로드된 테이블 데이터 우선 사용)
@ -239,7 +239,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
padding: "20px", padding: "20px",
}} }}
> >
<div className="text-gray-500">테이블 데이터를 로드하는 중...</div> <div className="text-muted-foreground">테이블 데이터를 로드하는 중...</div>
</div> </div>
); );
} }
@ -394,7 +394,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
gridColumn: "1 / -1", gridColumn: "1 / -1",
textAlign: "center", textAlign: "center",
padding: "40px 20px", padding: "40px 20px",
color: "#6b7280", color: "hsl(var(--muted-foreground))",
fontSize: "14px", fontSize: "14px",
}} }}
> >
@ -428,8 +428,8 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
{/* 카드 이미지 - 통일된 디자인 */} {/* 카드 이미지 - 통일된 디자인 */}
{componentConfig.cardStyle?.showImage && componentConfig.columnMapping?.imageColumn && ( {componentConfig.cardStyle?.showImage && componentConfig.columnMapping?.imageColumn && (
<div className="mb-4 flex justify-center"> <div className="mb-4 flex justify-center">
<div className="flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-100 to-indigo-100 shadow-sm border-2 border-white"> <div className="flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 shadow-sm border-2 border-background">
<span className="text-2xl text-blue-600">👤</span> <span className="text-2xl text-primary">👤</span>
</div> </div>
</div> </div>
)} )}
@ -437,21 +437,21 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
{/* 카드 타이틀 - 통일된 디자인 */} {/* 카드 타이틀 - 통일된 디자인 */}
{componentConfig.cardStyle?.showTitle && ( {componentConfig.cardStyle?.showTitle && (
<div className="mb-3"> <div className="mb-3">
<h3 className="text-xl font-bold text-gray-900 leading-tight">{titleValue}</h3> <h3 className="text-xl font-bold text-foreground leading-tight">{titleValue}</h3>
</div> </div>
)} )}
{/* 카드 서브타이틀 - 통일된 디자인 */} {/* 카드 서브타이틀 - 통일된 디자인 */}
{componentConfig.cardStyle?.showSubtitle && ( {componentConfig.cardStyle?.showSubtitle && (
<div className="mb-3"> <div className="mb-3">
<p className="text-sm font-semibold text-blue-600 bg-blue-50 px-3 py-1 rounded-full inline-block">{subtitleValue}</p> <p className="text-sm font-semibold text-primary bg-primary/10 px-3 py-1 rounded-full inline-block">{subtitleValue}</p>
</div> </div>
)} )}
{/* 카드 설명 - 통일된 디자인 */} {/* 카드 설명 - 통일된 디자인 */}
{componentConfig.cardStyle?.showDescription && ( {componentConfig.cardStyle?.showDescription && (
<div className="mb-4 flex-1"> <div className="mb-4 flex-1">
<p className="text-sm leading-relaxed text-gray-700 bg-gray-50 p-3 rounded-lg"> <p className="text-sm leading-relaxed text-foreground bg-muted p-3 rounded-lg">
{truncateText(descriptionValue, componentConfig.cardStyle?.maxDescriptionLength || 100)} {truncateText(descriptionValue, componentConfig.cardStyle?.maxDescriptionLength || 100)}
</p> </p>
</div> </div>
@ -460,15 +460,15 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
{/* 추가 표시 컬럼들 - 통일된 디자인 */} {/* 추가 표시 컬럼들 - 통일된 디자인 */}
{componentConfig.columnMapping?.displayColumns && {componentConfig.columnMapping?.displayColumns &&
componentConfig.columnMapping.displayColumns.length > 0 && ( componentConfig.columnMapping.displayColumns.length > 0 && (
<div className="space-y-2 border-t border-gray-200 pt-4"> <div className="space-y-2 border-t border-border pt-4">
{componentConfig.columnMapping.displayColumns.map((columnName, idx) => { {componentConfig.columnMapping.displayColumns.map((columnName, idx) => {
const value = getColumnValue(data, columnName); const value = getColumnValue(data, columnName);
if (!value) return null; if (!value) return null;
return ( return (
<div key={idx} className="flex justify-between items-center text-sm bg-white/50 px-3 py-2 rounded-lg border border-gray-100"> <div key={idx} className="flex justify-between items-center text-sm bg-background/50 px-3 py-2 rounded-lg border border-border">
<span className="text-gray-600 font-medium capitalize">{getColumnLabel(columnName)}:</span> <span className="text-muted-foreground font-medium capitalize">{getColumnLabel(columnName)}:</span>
<span className="font-semibold text-gray-900 bg-gray-100 px-2 py-1 rounded-md text-xs">{value}</span> <span className="font-semibold text-foreground bg-muted px-2 py-1 rounded-md text-xs">{value}</span>
</div> </div>
); );
})} })}
@ -487,7 +487,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
상세보기 상세보기
</button> </button>
<button <button
className="text-xs font-medium text-gray-500 hover:text-gray-700 transition-colors" className="text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
handleCardEdit(data); handleCardEdit(data);
@ -519,11 +519,11 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
{Object.entries(selectedData) {Object.entries(selectedData)
.filter(([key, value]) => value !== null && value !== undefined && value !== '') .filter(([key, value]) => value !== null && value !== undefined && value !== '')
.map(([key, value]) => ( .map(([key, value]) => (
<div key={key} className="bg-gray-50 rounded-lg p-3"> <div key={key} className="bg-muted rounded-lg p-3">
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1"> <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
{key.replace(/_/g, ' ')} {key.replace(/_/g, ' ')}
</div> </div>
<div className="text-sm font-medium text-gray-900 break-words"> <div className="text-sm font-medium text-foreground break-words">
{String(value)} {String(value)}
</div> </div>
</div> </div>
@ -534,7 +534,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
<div className="flex justify-end pt-4 border-t"> <div className="flex justify-end pt-4 border-t">
<button <button
onClick={() => setViewModalOpen(false)} onClick={() => setViewModalOpen(false)}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors" className="px-4 py-2 text-sm font-medium text-foreground bg-muted hover:bg-muted/80 rounded-md transition-colors"
> >
닫기 닫기
</button> </button>
@ -561,7 +561,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
.filter(([key, value]) => value !== null && value !== undefined) .filter(([key, value]) => value !== null && value !== undefined)
.map(([key, value]) => ( .map(([key, value]) => (
<div key={key} className="space-y-2"> <div key={key} className="space-y-2">
<label className="text-sm font-medium text-gray-700 block"> <label className="text-sm font-medium text-foreground block">
{key.replace(/_/g, ' ').toUpperCase()} {key.replace(/_/g, ' ').toUpperCase()}
</label> </label>
<Input <Input
@ -588,7 +588,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
</Button> </Button>
<Button <Button
onClick={handleEditSave} onClick={handleEditSave}
className="bg-blue-600 hover:bg-blue-700" className="bg-primary hover:bg-primary/90"
> >
저장 저장
</Button> </Button>

51
frontend/lib/registry/components/date-input/DateInputComponent.tsx
View File

@ -6,6 +6,7 @@ import { DateInputConfig } from "./types";
import { filterDOMProps } from "@/lib/utils/domPropsFilter"; import { filterDOMProps } from "@/lib/utils/domPropsFilter";
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration"; import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
import { AutoGenerationConfig } from "@/types/screen"; import { AutoGenerationConfig } from "@/types/screen";
import { cn } from "@/lib/utils";
export interface DateInputComponentProps extends ComponentRendererProps { export interface DateInputComponentProps extends ComponentRendererProps {
config?: DateInputConfig; config?: DateInputConfig;
@ -207,8 +208,8 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
// 디자인 모드 스타일 // 디자인 모드 스타일
if (isDesignMode) { if (isDesignMode) {
componentStyle.border = "1px dashed #cbd5e1"; componentStyle.border = "1px dashed hsl(var(--border))";
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1"; componentStyle.borderColor = isSelected ? "hsl(var(--ring))" : "hsl(var(--border))";
} }
// 이벤트 핸들러 // 이벤트 핸들러
@ -273,9 +274,9 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} {...safeDomProps}> <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
{/* 라벨 렌더링 */} {/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && ( {component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600"> <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label} {component.label}
{component.required && <span className="text-red-500">*</span>} {component.required && <span className="text-destructive">*</span>}
</label> </label>
)} )}
@ -294,11 +295,18 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
onFormDataChange(component.columnName, newValue); onFormDataChange(component.columnName, newValue);
} }
}} }}
className={`h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"placeholder:text-muted-foreground",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/> />
{/* 구분자 */} {/* 구분자 */}
<span className="text-base font-medium text-gray-500">~</span> <span className="text-base font-medium text-muted-foreground">~</span>
{/* 종료일 */} {/* 종료일 */}
<input <input
@ -314,7 +322,14 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
onFormDataChange(component.columnName, newValue); onFormDataChange(component.columnName, newValue);
} }
}} }}
className={`h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"placeholder:text-muted-foreground",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/> />
</div> </div>
</div> </div>
@ -327,9 +342,9 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} {...safeDomProps}> <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
{/* 라벨 렌더링 */} {/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && ( {component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600"> <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label} {component.label}
{component.required && <span className="text-red-500">*</span>} {component.required && <span className="text-destructive">*</span>}
</label> </label>
)} )}
@ -349,7 +364,14 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
} }
} }
}} }}
className={`box-border h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"box-border h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"placeholder:text-muted-foreground",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/> />
</div> </div>
); );
@ -376,7 +398,14 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
disabled={componentConfig.disabled || false} disabled={componentConfig.disabled || false}
required={componentConfig.required || false} required={componentConfig.required || false}
readOnly={componentConfig.readonly || finalAutoGeneration?.enabled || false} readOnly={componentConfig.readonly || finalAutoGeneration?.enabled || false}
className={`box-border h-full w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"box-border h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"placeholder:text-muted-foreground",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
onClick={handleClick} onClick={handleClick}
onDragStart={onDragStart} onDragStart={onDragStart}
onDragEnd={onDragEnd} onDragEnd={onDragEnd}

62
frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
View File

@ -294,7 +294,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
</div> </div>
{componentConfig.leftPanel?.showSearch && ( {componentConfig.leftPanel?.showSearch && (
<div className="relative mt-2"> <div className="relative mt-2">
<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" />
<Input <Input
placeholder="검색..." placeholder="검색..."
value={leftSearchQuery} value={leftSearchQuery}
@ -304,9 +304,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
</div> </div>
)} )}
</CardHeader> </CardHeader>
<CardContent className="flex-1 overflow-auto p-2"> <CardContent className="flex-1 overflow-auto">
{/* 좌측 데이터 목록 */} {/* 좌측 데이터 목록 */}
<div className="space-y-1"> <div className="space-y-1 px-2">
{isDesignMode ? ( {isDesignMode ? (
// 디자인 모드: 샘플 데이터 // 디자인 모드: 샘플 데이터
<> <>
@ -372,22 +372,22 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
<div <div
key={itemId} key={itemId}
onClick={() => handleLeftItemSelect(item)} onClick={() => handleLeftItemSelect(item)}
className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${ className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-muted ${
isSelected ? "bg-blue-50 text-blue-700" : "text-gray-700" isSelected ? "bg-primary/10 text-primary" : "text-foreground"
}`} }`}
> >
<div className="truncate font-medium">{displayTitle}</div> <div className="truncate font-medium">{displayTitle}</div>
{displaySubtitle && <div className="truncate text-xs text-gray-500">{displaySubtitle}</div>} {displaySubtitle && <div className="truncate text-xs text-muted-foreground">{displaySubtitle}</div>}
</div> </div>
); );
}) })
) : ( ) : (
// 검색 결과 없음 // 검색 결과 없음
<div className="py-8 text-center text-sm text-gray-500"> <div className="py-8 text-center text-sm text-muted-foreground">
{leftSearchQuery ? ( {leftSearchQuery ? (
<> <>
<p>검색 결과가 없습니다.</p> <p>검색 결과가 없습니다.</p>
<p className="mt-1 text-xs text-gray-400">다른 검색어를 입력해보세요.</p> <p className="mt-1 text-xs text-muted-foreground/70">다른 검색어를 입력해보세요.</p>
</> </>
) : ( ) : (
"데이터가 없습니다." "데이터가 없습니다."
@ -405,9 +405,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{resizable && ( {resizable && (
<div <div
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
className="group flex w-1 cursor-col-resize items-center justify-center bg-gray-200 transition-colors hover:bg-blue-400" className="group flex w-1 cursor-col-resize items-center justify-center bg-border transition-colors hover:bg-primary"
> >
<GripVertical className="h-4 w-4 text-gray-400 group-hover:text-white" /> <GripVertical className="h-4 w-4 text-muted-foreground group-hover:text-primary-foreground" />
</div> </div>
)} )}
@ -431,7 +431,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
</div> </div>
{componentConfig.rightPanel?.showSearch && ( {componentConfig.rightPanel?.showSearch && (
<div className="relative mt-2"> <div className="relative mt-2">
<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" />
<Input <Input
placeholder="검색..." placeholder="검색..."
value={rightSearchQuery} value={rightSearchQuery}
@ -441,14 +441,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
</div> </div>
)} )}
</CardHeader> </CardHeader>
<CardContent className="flex-1 overflow-auto p-4"> <CardContent className="flex-1 overflow-auto">
{/* 우측 데이터 */} {/* 우측 데이터 */}
{isLoadingRight ? ( {isLoadingRight ? (
// 로딩 중 // 로딩 중
<div className="flex h-full items-center justify-center"> <div className="flex h-full items-center justify-center">
<div className="text-center"> <div className="text-center">
<Loader2 className="mx-auto h-8 w-8 animate-spin text-blue-500" /> <Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
<p className="mt-2 text-sm text-gray-500">데이터를 불러오는 중...</p> <p className="mt-2 text-sm text-muted-foreground">데이터를 불러오는 중...</p>
</div> </div>
</div> </div>
) : rightData ? ( ) : rightData ? (
@ -469,10 +469,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
return filteredData.length > 0 ? ( return filteredData.length > 0 ? (
<div className="space-y-2"> <div className="space-y-2">
<div className="mb-2 text-xs text-gray-500"> <div className="mb-2 text-xs text-muted-foreground">
{filteredData.length}개의 관련 데이터 {filteredData.length}개의 관련 데이터
{rightSearchQuery && filteredData.length !== rightData.length && ( {rightSearchQuery && filteredData.length !== rightData.length && (
<span className="ml-1 text-blue-600">(전체 {rightData.length}개 중)</span> <span className="ml-1 text-primary">(전체 {rightData.length}개 중)</span>
)} )}
</div> </div>
{filteredData.map((item, index) => { {filteredData.map((item, index) => {
@ -493,14 +493,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{/* 요약 정보 (클릭 가능) */} {/* 요약 정보 (클릭 가능) */}
<div <div
onClick={() => toggleRightItemExpansion(itemId)} onClick={() => toggleRightItemExpansion(itemId)}
className="cursor-pointer p-3 transition-colors hover:bg-gray-50" className="cursor-pointer p-3 transition-colors hover:bg-muted"
> >
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
{firstValues.map(([key, value], idx) => ( {firstValues.map(([key, value], idx) => (
<div key={key} className="mb-1 last:mb-0"> <div key={key} className="mb-1 last:mb-0">
<div className="text-xs font-medium text-gray-500">{getColumnLabel(key)}</div> <div className="text-xs font-medium text-muted-foreground">{getColumnLabel(key)}</div>
<div className="truncate text-sm text-gray-900" title={String(value || "-")}> <div className="truncate text-sm text-foreground" title={String(value || "-")}>
{String(value || "-")} {String(value || "-")}
</div> </div>
</div> </div>
@ -508,9 +508,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
</div> </div>
<div className="flex flex-shrink-0 items-start pt-1"> <div className="flex flex-shrink-0 items-start pt-1">
{isExpanded ? ( {isExpanded ? (
<ChevronUp className="h-5 w-5 text-gray-400" /> <ChevronUp className="h-5 w-5 text-muted-foreground" />
) : ( ) : (
<ChevronDown className="h-5 w-5 text-gray-400" /> <ChevronDown className="h-5 w-5 text-muted-foreground" />
)} )}
</div> </div>
</div> </div>
@ -522,13 +522,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
<div className="mb-2 text-xs font-semibold">전체 상세 정보</div> <div className="mb-2 text-xs font-semibold">전체 상세 정보</div>
<div className="bg-card overflow-auto rounded-md border"> <div className="bg-card overflow-auto rounded-md border">
<table className="w-full text-sm"> <table className="w-full text-sm">
<tbody className="divide-y divide-gray-200"> <tbody className="divide-y divide-border">
{allValues.map(([key, value]) => ( {allValues.map(([key, value]) => (
<tr key={key} className="hover:bg-gray-50"> <tr key={key} className="hover:bg-muted">
<td className="px-3 py-2 font-medium whitespace-nowrap text-gray-600"> <td className="px-3 py-2 font-medium whitespace-nowrap text-muted-foreground">
{getColumnLabel(key)} {getColumnLabel(key)}
</td> </td>
<td className="px-3 py-2 break-all text-gray-900">{String(value)}</td> <td className="px-3 py-2 break-all text-foreground">{String(value)}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@ -541,11 +541,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
})} })}
</div> </div>
) : ( ) : (
<div className="py-8 text-center text-sm text-gray-500"> <div className="py-8 text-center text-sm text-muted-foreground">
{rightSearchQuery ? ( {rightSearchQuery ? (
<> <>
<p>검색 결과가 없습니다.</p> <p>검색 결과가 없습니다.</p>
<p className="mt-1 text-xs text-gray-400">다른 검색어를 입력해보세요.</p> <p className="mt-1 text-xs text-muted-foreground/70">다른 검색어를 입력해보세요.</p>
</> </>
) : ( ) : (
"관련 데이터가 없습니다." "관련 데이터가 없습니다."
@ -578,15 +578,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
<h3 className="mb-2 font-medium">{selectedLeftItem.name} 상세 정보</h3> <h3 className="mb-2 font-medium">{selectedLeftItem.name} 상세 정보</h3>
<div className="space-y-2 text-sm"> <div className="space-y-2 text-sm">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-gray-600">항목 1:</span> <span className="text-muted-foreground">항목 1:</span>
<span className="font-medium">값 1</span> <span className="font-medium">값 1</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-gray-600">항목 2:</span> <span className="text-muted-foreground">항목 2:</span>
<span className="font-medium">값 2</span> <span className="font-medium">값 2</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-gray-600">항목 3:</span> <span className="text-muted-foreground">항목 3:</span>
<span className="font-medium">값 3</span> <span className="font-medium">값 3</span>
</div> </div>
</div> </div>
@ -595,7 +595,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
) : ( ) : (
// 선택 없음 // 선택 없음
<div className="flex h-full items-center justify-center"> <div className="flex h-full items-center justify-center">
<div className="text-center text-sm text-gray-500"> <div className="text-center text-sm text-muted-foreground">
<p className="mb-2">좌측에서 항목을 선택하세요</p> <p className="mb-2">좌측에서 항목을 선택하세요</p>
<p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p> <p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
</div> </div>

2
frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
View File

@ -46,7 +46,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
return ( return (
<div <div
className="relative h-full overflow-x-auto overflow-y-auto rounded-2xl border border-gray-200/40 bg-white shadow-sm backdrop-blur-sm" className="relative h-full overflow-x-auto overflow-y-auto bg-white shadow-sm backdrop-blur-sm"
style={{ style={{
width: "100%", width: "100%",
maxWidth: "100%", maxWidth: "100%",

104
frontend/lib/registry/components/table-list/TableListComponent.tsx
View File

@ -216,9 +216,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
minHeight: isDesignMode ? "300px" : "100%", minHeight: isDesignMode ? "300px" : "100%",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
backgroundColor: "#ffffff", backgroundColor: "hsl(var(--background))",
border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
borderRadius: "8px",
overflow: "hidden", overflow: "hidden",
...style, ...style,
}; };
@ -812,7 +810,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<ChevronLeft className="h-4 w-4" /> <ChevronLeft className="h-4 w-4" />
</Button> </Button>
<span style={{ fontSize: "14px", fontWeight: 500, color: "#374151", minWidth: "80px", textAlign: "center" }}> <span className="text-sm font-medium text-foreground min-w-[80px] text-center">
{currentPage} / {totalPages || 1} {currentPage} / {totalPages || 1}
</span> </span>
@ -833,7 +831,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<ChevronsRight className="h-4 w-4" /> <ChevronsRight className="h-4 w-4" />
</Button> </Button>
<span style={{ fontSize: "12px", color: "#6b7280", marginLeft: "16px" }}> <span className="text-xs text-muted-foreground ml-4">
전체 {totalItems.toLocaleString()}개 전체 {totalItems.toLocaleString()}개
</span> </span>
</div> </div>
@ -886,15 +884,15 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
return ( return (
<div {...domProps}> <div {...domProps}>
{tableConfig.showHeader && ( {tableConfig.showHeader && (
<div style={{ padding: "16px 24px", borderBottom: "1px solid #e5e7eb" }}> <div className="px-6 py-4 border-b border-border">
<h2 style={{ fontSize: "18px", fontWeight: 600, color: "#111827" }}>{tableConfig.title || tableLabel}</h2> <h2 className="text-lg font-semibold text-foreground">{tableConfig.title || tableLabel}</h2>
</div> </div>
)} )}
{tableConfig.filter?.enabled && ( {tableConfig.filter?.enabled && (
<div style={{ padding: "16px 24px", borderBottom: "1px solid #e5e7eb" }}> <div className="px-6 py-4 border-b border-border">
<div style={{ display: "flex", alignItems: "flex-start", gap: "16px" }}> <div className="flex items-start gap-4">
<div style={{ flex: 1 }}> <div className="flex-1">
<AdvancedSearchFilters <AdvancedSearchFilters
filters={activeFilters} filters={activeFilters}
searchValues={searchValues} searchValues={searchValues}
@ -907,7 +905,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => setIsFilterSettingOpen(true)} onClick={() => setIsFilterSettingOpen(true)}
style={{ flexShrink: 0, marginTop: "4px" }} className="flex-shrink-0 mt-1"
> >
<Settings className="mr-2 h-4 w-4" /> <Settings className="mr-2 h-4 w-4" />
필터 설정 필터 설정
@ -980,17 +978,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
)} )}
{/* 테이블 컨테이너 */} {/* 테이블 컨테이너 */}
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}> <div className="flex-1 flex flex-col overflow-hidden">
{/* 스크롤 영역 */} {/* 스크롤 영역 */}
<div <div
style={{ className="w-full h-[500px] overflow-y-scroll overflow-x-auto bg-background"
width: "100%",
height: "500px",
overflowY: "scroll",
overflowX: "auto",
border: "1px solid #e5e7eb",
backgroundColor: "white",
}}
> >
{/* 테이블 */} {/* 테이블 */}
<table <table
@ -1002,26 +993,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
> >
{/* 헤더 (sticky) */} {/* 헤더 (sticky) */}
<thead <thead
style={{ className="sticky top-0 z-10 bg-muted"
position: "sticky",
top: 0,
zIndex: 10,
backgroundColor: "#f8fafc",
}}
> >
<tr style={{ height: "48px", borderBottom: "1px solid #e5e7eb" }}> <tr className="h-12 border-b border-border">
{visibleColumns.map((column) => ( {visibleColumns.map((column) => (
<th <th
key={column.columnName} key={column.columnName}
className={cn(
"px-6 py-3 text-sm font-semibold text-foreground whitespace-nowrap bg-muted",
column.sortable && "cursor-pointer"
)}
style={{ style={{
padding: "12px 24px",
textAlign: column.align || "left", textAlign: column.align || "left",
fontSize: "14px",
fontWeight: 600,
color: "#374151",
whiteSpace: "nowrap",
backgroundColor: "#f8fafc",
cursor: column.sortable ? "pointer" : "default",
}} }}
onClick={() => column.sortable && handleSort(column.columnName)} onClick={() => column.sortable && handleSort(column.columnName)}
> >
@ -1044,29 +1027,29 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<tbody> <tbody>
{loading ? ( {loading ? (
<tr> <tr>
<td colSpan={visibleColumns.length} style={{ padding: "48px", textAlign: "center" }}> <td colSpan={visibleColumns.length} className="p-12 text-center">
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" }}> <div className="flex flex-col items-center gap-3">
<RefreshCw className="h-8 w-8 animate-spin text-gray-400" /> <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
<div style={{ fontSize: "14px", fontWeight: 500, color: "#64748b" }}>로딩 중...</div> <div className="text-sm font-medium text-muted-foreground">로딩 중...</div>
</div> </div>
</td> </td>
</tr> </tr>
) : error ? ( ) : error ? (
<tr> <tr>
<td colSpan={visibleColumns.length} style={{ padding: "48px", textAlign: "center" }}> <td colSpan={visibleColumns.length} className="p-12 text-center">
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" }}> <div className="flex flex-col items-center gap-3">
<div style={{ fontSize: "14px", fontWeight: 500, color: "#ef4444" }}>오류 발생</div> <div className="text-sm font-medium text-destructive">오류 발생</div>
<div style={{ fontSize: "12px", color: "#94a3b8" }}>{error}</div> <div className="text-xs text-muted-foreground">{error}</div>
</div> </div>
</td> </td>
</tr> </tr>
) : data.length === 0 ? ( ) : data.length === 0 ? (
<tr> <tr>
<td colSpan={visibleColumns.length} style={{ padding: "48px", textAlign: "center" }}> <td colSpan={visibleColumns.length} className="p-12 text-center">
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" }}> <div className="flex flex-col items-center gap-3">
<TableIcon className="h-12 w-12 text-gray-300" /> <TableIcon className="h-12 w-12 text-muted-foreground/50" />
<div style={{ fontSize: "14px", fontWeight: 500, color: "#64748b" }}>데이터가 없습니다</div> <div className="text-sm font-medium text-muted-foreground">데이터가 없습니다</div>
<div style={{ fontSize: "12px", color: "#94a3b8" }}> <div className="text-xs text-muted-foreground">
조건을 변경하거나 새로운 데이터를 추가해보세요 조건을 변경하거나 새로운 데이터를 추가해보세요
</div> </div>
</div> </div>
@ -1079,17 +1062,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
draggable={!isDesignMode} draggable={!isDesignMode}
onDragStart={(e) => handleRowDragStart(e, row, index)} onDragStart={(e) => handleRowDragStart(e, row, index)}
onDragEnd={handleRowDragEnd} onDragEnd={handleRowDragEnd}
style={{ className={cn(
height: "48px", "h-12 border-b border-border/50 cursor-pointer transition-colors",
borderBottom: "1px solid #f1f5f9", index % 2 === 1 ? "bg-muted/50" : "bg-background",
cursor: "pointer", "hover:bg-destructive/10"
transition: "background-color 0.2s", )}
backgroundColor: index % 2 === 1 ? "#f9fafb" : "white",
}}
onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "#fef3f2")}
onMouseLeave={(e) =>
(e.currentTarget.style.backgroundColor = index % 2 === 1 ? "#f9fafb" : "white")
}
onClick={() => handleRowClick(row)} onClick={() => handleRowClick(row)}
> >
{visibleColumns.map((column) => { {visibleColumns.map((column) => {
@ -1099,14 +1076,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
return ( return (
<td <td
key={column.columnName} key={column.columnName}
className={cn(
"px-6 py-3 text-sm text-foreground whitespace-nowrap overflow-hidden text-ellipsis"
)}
style={{ style={{
padding: "12px 24px",
fontSize: "14px",
color: "#374151",
textAlign: column.align || "left", textAlign: column.align || "left",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}} }}
> >
{column.columnName === "__checkbox__" {column.columnName === "__checkbox__"
@ -1139,7 +1113,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<div className="max-h-[60vh] space-y-3 overflow-y-auto sm:space-y-4"> <div className="max-h-[60vh] space-y-3 overflow-y-auto sm:space-y-4">
{(tableConfig.filter?.filters || []).map((filter) => ( {(tableConfig.filter?.filters || []).map((filter) => (
<div key={filter.columnName} className="flex items-center gap-3 rounded p-2 hover:bg-gray-50"> <div className="flex items-center gap-3 rounded p-2 hover:bg-muted">
<Checkbox <Checkbox
id={`filter-${filter.columnName}`} id={`filter-${filter.columnName}`}
checked={visibleFilterColumns.has(filter.columnName)} checked={visibleFilterColumns.has(filter.columnName)}

105
frontend/lib/registry/components/text-input/TextInputComponent.tsx
View File

@ -121,15 +121,15 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
...(isHidden && ...(isHidden &&
isDesignMode && { isDesignMode && {
opacity: 0.4, opacity: 0.4,
backgroundColor: "#f3f4f6", backgroundColor: "hsl(var(--muted))",
pointerEvents: "auto", pointerEvents: "auto",
}), }),
}; };
// 디자인 모드 스타일 // 디자인 모드 스타일
if (isDesignMode) { if (isDesignMode) {
componentStyle.border = "1px dashed #cbd5e1"; componentStyle.border = "1px dashed hsl(var(--border))";
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1"; componentStyle.borderColor = isSelected ? "hsl(var(--ring))" : "hsl(var(--border))";
} }
// 이벤트 핸들러 // 이벤트 핸들러
@ -295,9 +295,9 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}> <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
{/* 라벨 렌더링 */} {/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && ( {component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600"> <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label} {component.label}
{component.required && <span className="text-red-500">*</span>} {component.required && <span className="text-destructive">*</span>}
</label> </label>
)} )}
@ -318,11 +318,17 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullEmail); onFormDataChange(component.columnName, fullEmail);
} }
}} }}
className={`h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/> />
{/* @ 구분자 */} {/* @ 구분자 */}
<span className="text-base font-medium text-gray-500">@</span> <span className="text-base font-medium text-muted-foreground">@</span>
{/* 도메인 선택/입력 (Combobox) */} {/* 도메인 선택/입력 (Combobox) */}
<Popover open={emailDomainOpen} onOpenChange={setEmailDomainOpen}> <Popover open={emailDomainOpen} onOpenChange={setEmailDomainOpen}>
@ -334,13 +340,14 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
disabled={componentConfig.disabled || false} disabled={componentConfig.disabled || false}
className={cn( className={cn(
"flex h-full flex-1 items-center justify-between rounded-md border px-3 py-2 text-sm transition-all duration-200", "flex h-full flex-1 items-center justify-between rounded-md border px-3 py-2 text-sm transition-all duration-200",
isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
componentConfig.disabled ? "cursor-not-allowed bg-gray-100 text-gray-400" : "bg-white text-gray-900", isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
"hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 focus:outline-none", componentConfig.disabled ? "cursor-not-allowed bg-muted text-muted-foreground opacity-50" : "bg-background text-foreground",
emailDomainOpen && "border-orange-500 ring-2 ring-orange-100", "hover:border-ring/80",
emailDomainOpen && "border-ring ring-2 ring-ring/50",
)} )}
> >
<span className={cn("truncate", !emailDomain && "text-gray-400")}>{emailDomain || "도메인 선택"}</span> <span className={cn("truncate", !emailDomain && "text-muted-foreground")}>{emailDomain || "도메인 선택"}</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</button> </button>
</PopoverTrigger> </PopoverTrigger>
@ -397,9 +404,9 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}> <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
{/* 라벨 렌더링 */} {/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && ( {component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600"> <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label} {component.label}
{component.required && <span className="text-red-500">*</span>} {component.required && <span className="text-destructive">*</span>}
</label> </label>
)} )}
@ -421,10 +428,16 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullTel); onFormDataChange(component.columnName, fullTel);
} }
}} }}
className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/> />
<span className="text-base font-medium text-gray-500">-</span> <span className="text-base font-medium text-muted-foreground">-</span>
{/* 두 번째 부분 */} {/* 두 번째 부분 */}
<input <input
@ -443,10 +456,16 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullTel); onFormDataChange(component.columnName, fullTel);
} }
}} }}
className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/> />
<span className="text-base font-medium text-gray-500">-</span> <span className="text-base font-medium text-muted-foreground">-</span>
{/* 세 번째 부분 */} {/* 세 번째 부분 */}
<input <input
@ -465,7 +484,13 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullTel); onFormDataChange(component.columnName, fullTel);
} }
}} }}
className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/> />
</div> </div>
</div> </div>
@ -478,9 +503,9 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}> <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
{/* 라벨 렌더링 */} {/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && ( {component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600"> <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label} {component.label}
{component.required && <span className="text-red-500">*</span>} {component.required && <span className="text-destructive">*</span>}
</label> </label>
)} )}
@ -498,7 +523,13 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullUrl); onFormDataChange(component.columnName, fullUrl);
} }
}} }}
className={`h-full w-[100px] cursor-pointer rounded-md border px-2 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"h-full w-[100px] cursor-pointer rounded-md border px-2 py-2 text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
> >
<option value="https://">https://</option> <option value="https://">https://</option>
<option value="http://">http://</option> <option value="http://">http://</option>
@ -520,7 +551,13 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullUrl); onFormDataChange(component.columnName, fullUrl);
} }
}} }}
className={`h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/> />
</div> </div>
</div> </div>
@ -533,9 +570,9 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}> <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
{/* 라벨 렌더링 */} {/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && ( {component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600"> <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label} {component.label}
{component.required && <span className="text-red-500">*</span>} {component.required && <span className="text-destructive">*</span>}
</label> </label>
)} )}
@ -564,7 +601,14 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, e.target.value); onFormDataChange(component.columnName, e.target.value);
} }
}} }}
className={`box-border h-full w-full max-w-full resize-none rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"box-border h-full w-full max-w-full resize-none rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"placeholder:text-muted-foreground",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/> />
</div> </div>
); );
@ -608,7 +652,14 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
disabled={componentConfig.disabled || false} disabled={componentConfig.disabled || false}
required={componentConfig.required || false} required={componentConfig.required || false}
readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")} readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")}
className={`box-border h-full w-full max-w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`} className={cn(
"box-border h-full w-full max-w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"placeholder:text-muted-foreground",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
onClick={(e) => { onClick={(e) => {
handleClick(e); handleClick(e);
}} }}