Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into lhj

.cursorrules

@@ -0,0 +1,857 @@
+# Cursor Rules for ERP-node Project
+
+## shadcn/ui 웹 스타일 가이드라인
+
+모든 프론트엔드 개발 시 다음 shadcn/ui 기반 스타일 가이드라인을 준수해야 합니다.
+
+### 1. Color System (색상 시스템)
+
+#### CSS Variables 사용
+shadcn은 CSS Variables를 사용하여 테마를 관리하며, 모든 색상은 HSL 형식으로 정의됩니다.
+
+**기본 색상 토큰 (항상 사용):**
+- `--background`: 페이지 배경
+- `--foreground`: 기본 텍스트
+- `--primary`: 메인 액션 (Indigo 계열)
+- `--primary-foreground`: Primary 위 텍스트
+- `--secondary`: 보조 액션
+- `--muted`: 약한 배경
+- `--muted-foreground`: 보조 텍스트
+- `--destructive`: 삭제/에러 (Rose 계열)
+- `--border`: 테두리
+- `--ring`: 포커스 링
+
+**Tailwind 클래스로 사용:**
+```tsx
+bg-primary text-primary-foreground
+bg-secondary text-secondary-foreground
+bg-muted text-muted-foreground
+bg-destructive text-destructive-foreground
+border-border
+```
+
+**추가 시맨틱 컬러:**
+- Success: `--success` (Emerald-600 계열)
+- Warning: `--warning` (Amber-500 계열)
+- Info: `--info` (Cyan-500 계열)
+
+### 2. Spacing System (간격)
+
+**Tailwind Scale (4px 기준):**
+- 0.5 = 2px, 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 6 = 24px, 8 = 32px
+
+**컴포넌트별 권장 간격:**
+- 카드 패딩: `p-6` (24px)
+- 카드 간 마진: `gap-6` (24px)
+- 폼 필드 간격: `space-y-4` (16px)
+- 버튼 내부 패딩: `px-4 py-2`
+- 섹션 간격: `space-y-8` 또는 `space-y-12`
+
+### 3. Typography (타이포그래피)
+
+**용도별 타이포그래피 (필수):**
+- 페이지 제목: `text-3xl font-bold`
+- 섹션 제목: `text-2xl font-semibold`
+- 카드 제목: `text-xl font-semibold`
+- 서브 제목: `text-lg font-medium`
+- 본문 텍스트: `text-sm text-muted-foreground`
+- 작은 텍스트: `text-xs text-muted-foreground`
+- 버튼 텍스트: `text-sm font-medium`
+- 폼 라벨: `text-sm font-medium`
+
+### 4. Button Variants (버튼 스타일)
+
+**필수 사용 패턴:**
+```tsx
+// Primary (기본)
+<Button variant="default">저장</Button>
+
+// Secondary
+<Button variant="secondary">취소</Button>
+
+// Outline
+<Button variant="outline">편집</Button>
+
+// Ghost
+<Button variant="ghost">닫기</Button>
+
+// Destructive
+<Button variant="destructive">삭제</Button>
+```
+
+**버튼 크기:**
+- `size="sm"`: 작은 버튼 (h-9 px-3)
+- `size="default"`: 기본 버튼 (h-10 px-4 py-2)
+- `size="lg"`: 큰 버튼 (h-11 px-8)
+- `size="icon"`: 아이콘 전용 (h-10 w-10)
+
+### 5. Input States (입력 필드 상태)
+
+**필수 적용 상태:**
+```tsx
+// Default
+className="border-input"
+
+// Focus (모든 입력 필드 필수)
+className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+
+// Error
+className="border-destructive focus-visible:ring-destructive"
+
+// Disabled
+className="disabled:opacity-50 disabled:cursor-not-allowed"
+```
+
+### 6. Card Structure (카드 구조)
+
+**표준 카드 구조 (필수):**
+```tsx
+<Card className="rounded-lg border bg-card text-card-foreground shadow-sm">
+  <CardHeader className="flex flex-col space-y-1.5 p-6">
+    <CardTitle className="text-2xl font-semibold leading-none tracking-tight">제목</CardTitle>
+    <CardDescription className="text-sm text-muted-foreground">설명</CardDescription>
+  </CardHeader>
+  <CardContent className="p-6 pt-0">
+    {/* 내용 */}
+  </CardContent>
+  <CardFooter className="flex items-center p-6 pt-0">
+    {/* 액션 버튼들 */}
+  </CardFooter>
+</Card>
+```
+
+### 7. Border & Radius (테두리 및 둥근 모서리)
+
+**컴포넌트별 권장:**
+- 버튼: `rounded-md` (6px)
+- 입력 필드: `rounded-md` (6px)
+- 카드: `rounded-lg` (8px)
+- 배지: `rounded-full`
+- 모달/대화상자: `rounded-lg` (8px)
+- 드롭다운: `rounded-md` (6px)
+
+### 8. Shadow (그림자)
+
+**용도별 권장:**
+- 카드: `shadow-sm`
+- 드롭다운: `shadow-md`
+- 모달: `shadow-lg`
+- 팝오버: `shadow-md`
+- 버튼 호버: `shadow-sm`
+
+### 9. Interactive States (상호작용 상태)
+
+**필수 적용 패턴:**
+```tsx
+// Hover
+hover:bg-primary/90          // 버튼
+hover:bg-accent              // Ghost 버튼
+hover:underline              // 링크
+hover:shadow-md transition-shadow  // 카드
+
+// Focus (모든 인터랙티브 요소 필수)
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+
+// Active
+active:scale-95 transition-transform  // 버튼
+
+// Disabled
+disabled:opacity-50 disabled:cursor-not-allowed
+```
+
+### 10. Animation (애니메이션)
+
+**권장 Duration:**
+- 빠른 피드백: `duration-75`
+- 기본: `duration-150`
+- 부드러운 전환: `duration-300`
+
+**권장 패턴:**
+- 버튼 클릭: `transition-transform duration-150 active:scale-95`
+- 색상 전환: `transition-colors duration-150`
+- 드롭다운 열기: `transition-all duration-200`
+
+### 11. Responsive (반응형)
+
+**Breakpoints:**
+- `sm`: 640px (모바일 가로)
+- `md`: 768px (태블릿)
+- `lg`: 1024px (노트북)
+- `xl`: 1280px (데스크톱)
+
+**반응형 패턴:**
+```tsx
+// 모바일 우선 접근
+className="flex-col md:flex-row"
+className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+className="text-2xl md:text-3xl lg:text-4xl"
+className="p-4 md:p-6 lg:p-8"
+```
+
+### 12. Accessibility (접근성)
+
+**필수 적용 사항:**
+1. 포커스 표시: 모든 인터랙티브 요소에 `focus-visible:ring-2` 적용
+2. ARIA 레이블: 적절한 `aria-label`, `aria-describedby` 사용
+3. 키보드 네비게이션: Tab, Enter, Space, Esc 지원
+4. 색상 대비: 최소 4.5:1 (일반 텍스트), 3:1 (큰 텍스트)
+
+### 13. Class 순서 (일관성 유지)
+
+**항상 이 순서로 작성:**
+1. Layout: `flex`, `grid`, `block`
+2. Sizing: `w-full`, `h-10`
+3. Spacing: `p-4`, `m-2`, `gap-4`
+4. Typography: `text-sm`, `font-medium`
+5. Colors: `bg-primary`, `text-white`
+6. Border: `border`, `rounded-md`
+7. Effects: `shadow-sm`, `opacity-50`
+8. States: `hover:`, `focus:`, `disabled:`
+9. Responsive: `md:`, `lg:`
+
+### 14. 실무 적용 규칙
+
+1. **shadcn 컴포넌트 우선 사용**: 커스텀 스타일보다 shadcn 기본 컴포넌트 활용
+2. **cn 유틸리티 사용**: 조건부 클래스는 `cn()` 함수로 결합
+3. **테마 변수 사용**: 하드코딩된 색상 대신 CSS 변수 사용
+4. **다크모드 고려**: 모든 컴포넌트는 다크모드 호환 필수
+5. **일관성 유지**: 같은 용도의 컴포넌트는 같은 스타일 사용
+
+### 15. 금지 사항
+
+1. ❌ 하드코딩된 색상 값 사용 (예: `bg-blue-500` 대신 `bg-primary`)
+2. ❌ 인라인 스타일로 색상 지정 (예: `style={{ color: '#3b82f6' }}`)
+3. ❌ 포커스 스타일 제거 (`outline-none`만 단독 사용)
+4. ❌ 접근성 무시 (ARIA 레이블 누락)
+5. ❌ 반응형 무시 (데스크톱 전용 스타일)
+6. ❌ **중첩 박스 금지**: 사용자가 명시적으로 요청하지 않는 한 Card 안에 Card, Border 안에 Border 같은 중첩된 컨테이너 구조를 만들지 않음
+
+### 16. 중첩 박스 금지 상세 규칙
+
+**금지되는 패턴 (사용자 요청 없이):**
+```tsx
+// ❌ Card 안에 Card
+<Card>
+  <CardContent>
+    <Card>  // 중첩 금지!
+      <CardContent>내용</CardContent>
+    </Card>
+  </CardContent>
+</Card>
+
+// ❌ Border 안에 Border
+<div className="border rounded-lg p-4">
+  <div className="border rounded-lg p-4">  // 중첩 금지!
+    내용
+  </div>
+</div>
+
+// ❌ 불필요한 래퍼
+<div className="border p-4">
+  <div className="bg-card border rounded-lg">  // 중첩 금지!
+    내용
+  </div>
+</div>
+```
+
+**허용되는 패턴:**
+```tsx
+// ✅ 단일 Card
+<Card>
+  <CardHeader>
+    <CardTitle>제목</CardTitle>
+  </CardHeader>
+  <CardContent>
+    내용
+  </CardContent>
+</Card>
+
+// ✅ 의미적으로 다른 컴포넌트 조합
+<Card>
+  <CardContent>
+    <Dialog>  // Dialog는 별도 UI 레이어
+      <DialogContent>...</DialogContent>
+    </Dialog>
+  </CardContent>
+</Card>
+
+// ✅ 그리드/리스트 내부의 Card들
+<div className="grid grid-cols-3 gap-4">
+  <Card>항목 1</Card>
+  <Card>항목 2</Card>
+  <Card>항목 3</Card>
+</div>
+```
+
+**예외 상황 (사용자가 명시적으로 요청한 경우만):**
+- 대시보드에서 섹션별 그룹핑이 필요한 경우
+- 복잡한 데이터 구조를 시각적으로 구분해야 하는 경우
+- 드래그앤드롭 등 특수 기능을 위한 경우
+
+**원칙:**
+- 심플하고 깔끔한 디자인 유지
+- 불필요한 시각적 레이어 제거
+- 사용자가 명시적으로 "박스 안에 박스", "중첩된 카드" 등을 요청하지 않으면 단일 레벨 유지
+
+### 17. 표준 모달(Dialog) 디자인 패턴
+
+**프로젝트 표준 모달 구조 (플로우 관리 기준):**
+
+```tsx
+<Dialog open={isOpen} onOpenChange={setIsOpen}>
+  <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+    {/* 헤더: 제목 + 설명 */}
+    <DialogHeader>
+      <DialogTitle className="text-base sm:text-lg">모달 제목</DialogTitle>
+      <DialogDescription className="text-xs sm:text-sm">
+        모달에 대한 간단한 설명
+      </DialogDescription>
+    </DialogHeader>
+
+    {/* 컨텐츠: 폼 필드들 */}
+    <div className="space-y-3 sm:space-y-4">
+      {/* 각 입력 필드 */}
+      <div>
+        <Label htmlFor="fieldName" className="text-xs sm:text-sm">
+          필드 라벨 *
+        </Label>
+        <Input
+          id="fieldName"
+          value={value}
+          onChange={handleChange}
+          placeholder="힌트 텍스트"
+          className="h-8 text-xs sm:h-10 sm:text-sm"
+        />
+        <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+          도움말 텍스트 (선택사항)
+        </p>
+      </div>
+    </div>
+
+    {/* 푸터: 액션 버튼들 */}
+    <DialogFooter className="gap-2 sm:gap-0">
+      <Button
+        variant="outline"
+        onClick={handleCancel}
+        className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+      >
+        취소
+      </Button>
+      <Button
+        onClick={handleSubmit}
+        className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+      >
+        확인
+      </Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+**필수 적용 사항:**
+
+1. **반응형 크기**
+   - 모바일: `max-w-[95vw]` (화면 너비의 95%)
+   - 데스크톱: `sm:max-w-[500px]` (고정 500px)
+
+2. **헤더 구조**
+   - DialogTitle: `text-base sm:text-lg` (16px → 18px)
+   - DialogDescription: `text-xs sm:text-sm` (12px → 14px)
+   - 항상 제목과 설명 모두 포함
+
+3. **컨텐츠 간격**
+   - 필드 간 간격: `space-y-3 sm:space-y-4` (12px → 16px)
+   - 각 필드는 `<div>` 로 감싸기
+
+4. **입력 필드 패턴**
+   - Label: `text-xs sm:text-sm` + 필수 필드는 `*` 표시
+   - Input/Select: `h-8 text-xs sm:h-10 sm:text-sm` (32px → 40px)
+   - 도움말: `text-muted-foreground mt-1 text-[10px] sm:text-xs`
+
+5. **푸터 버튼**
+   - 컨테이너: `gap-2 sm:gap-0` (모바일에서 간격, 데스크톱에서 자동)
+   - 버튼: `h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm`
+   - 모바일: 같은 크기 (`flex-1`)
+   - 데스크톱: 자동 크기 (`flex-none`)
+   - 순서: 취소(outline) → 확인(default)
+
+6. **접근성**
+   - Label의 `htmlFor`와 Input의 `id` 매칭
+   - Button에 적절한 `onClick` 핸들러
+   - Dialog의 `open`과 `onOpenChange` 필수
+
+**확인 모달 (간단한 경고/확인):**
+
+```tsx
+<Dialog open={isOpen} onOpenChange={setIsOpen}>
+  <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+    <DialogHeader>
+      <DialogTitle className="text-base sm:text-lg">작업 확인</DialogTitle>
+      <DialogDescription className="text-xs sm:text-sm">
+        정말로 이 작업을 수행하시겠습니까?
+        <br />이 작업은 되돌릴 수 없습니다.
+      </DialogDescription>
+    </DialogHeader>
+
+    <DialogFooter className="gap-2 sm:gap-0">
+      <Button
+        variant="outline"
+        onClick={handleCancel}
+        className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+      >
+        취소
+      </Button>
+      <Button
+        variant="destructive"
+        onClick={handleConfirm}
+        className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+      >
+        삭제
+      </Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+**원칙:**
+- 모든 모달은 모바일 우선 반응형 디자인
+- 일관된 크기, 간격, 폰트 크기 사용
+- 사용자가 다른 크기를 명시하지 않으면 `sm:max-w-[500px]` 사용
+- 삭제/위험한 작업은 `variant="destructive"` 사용
+
+### 18. 검색 가능한 Select 박스 (Combobox 패턴)
+
+**적용 조건**: 사용자가 "검색 기능이 있는 Select 박스" 또는 "Combobox"를 명시적으로 요청한 경우만 사용
+
+**표준 Combobox 구조 (플로우 관리 기준):**
+
+```tsx
+import { Check, ChevronsUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+// 상태 관리
+const [open, setOpen] = useState(false);
+const [value, setValue] = useState("");
+
+// 렌더링
+<Popover open={open} onOpenChange={setOpen}>
+  <PopoverTrigger asChild>
+    <Button
+      variant="outline"
+      role="combobox"
+      aria-expanded={open}
+      className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+    >
+      {value
+        ? items.find((item) => item.value === value)?.label
+        : "항목 선택"}
+      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+    </Button>
+  </PopoverTrigger>
+  <PopoverContent 
+    className="p-0" 
+    style={{ width: "var(--radix-popover-trigger-width)" }} 
+    align="start"
+  >
+    <Command>
+      <CommandInput 
+        placeholder="검색..." 
+        className="text-xs sm:text-sm" 
+      />
+      <CommandList>
+        <CommandEmpty className="text-xs sm:text-sm">
+          항목을 찾을 수 없습니다.
+        </CommandEmpty>
+        <CommandGroup>
+          {items.map((item) => (
+            <CommandItem
+              key={item.value}
+              value={item.value}
+              onSelect={(currentValue) => {
+                setValue(currentValue === value ? "" : currentValue);
+                setOpen(false);
+              }}
+              className="text-xs sm:text-sm"
+            >
+              <Check
+                className={cn(
+                  "mr-2 h-4 w-4",
+                  value === item.value ? "opacity-100" : "opacity-0"
+                )}
+              />
+              {item.label}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  </PopoverContent>
+</Popover>
+```
+
+**복잡한 데이터 표시 (라벨 + 설명):**
+
+```tsx
+<CommandItem
+  key={item.value}
+  value={item.value}
+  onSelect={(currentValue) => {
+    setValue(currentValue);
+    setOpen(false);
+  }}
+  className="text-xs sm:text-sm"
+>
+  <Check
+    className={cn(
+      "mr-2 h-4 w-4",
+      value === item.value ? "opacity-100" : "opacity-0"
+    )}
+  />
+  <div className="flex flex-col">
+    <span className="font-medium">{item.label}</span>
+    {item.description && (
+      <span className="text-[10px] text-gray-500">{item.description}</span>
+    )}
+  </div>
+</CommandItem>
+```
+
+**필수 적용 사항:**
+
+1. **반응형 크기**
+   - 버튼 높이: `h-8 sm:h-10` (32px → 40px)
+   - 텍스트 크기: `text-xs sm:text-sm` (12px → 14px)
+   - PopoverContent 너비: `width: "var(--radix-popover-trigger-width)"` (트리거와 동일)
+
+2. **필수 컴포넌트**
+   - Popover: 드롭다운 컨테이너
+   - Command: 검색 및 필터링 기능
+   - CommandInput: 검색 입력 필드
+   - CommandList: 항목 목록 컨테이너
+   - CommandEmpty: 검색 결과 없음 메시지
+   - CommandGroup: 항목 그룹
+   - CommandItem: 개별 항목
+
+3. **아이콘 사용**
+   - ChevronsUpDown: 드롭다운 표시 아이콘 (오른쪽)
+   - Check: 선택된 항목 표시 (왼쪽)
+
+4. **접근성**
+   - `role="combobox"`: ARIA 역할 명시
+   - `aria-expanded={open}`: 열림/닫힘 상태
+   - PopoverTrigger에 `asChild` 사용
+
+5. **로딩 상태**
+   ```tsx
+   <Button
+     variant="outline"
+     role="combobox"
+     disabled={loading}
+     className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+   >
+     {loading ? "로딩 중..." : value ? "선택됨" : "항목 선택"}
+     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+   </Button>
+   ```
+
+**일반 Select vs Combobox 선택 기준:**
+
+| 상황 | 컴포넌트 | 이유 |
+|------|----------|------|
+| 항목 5개 이하 | `<Select>` | 검색 불필요 |
+| 항목 5개 초과 | 사용자 요청 시 `<Combobox>` | 검색 필요 시 |
+| 테이블/데이터베이스 선택 | `<Combobox>` | 많은 항목 + 검색 필수 |
+| 간단한 상태 선택 | `<Select>` | 빠른 선택 |
+
+**원칙:**
+- 사용자가 명시적으로 요청하지 않으면 일반 Select 사용
+- 많은 항목(10개 이상)을 다룰 때는 Combobox 권장
+- 일관된 반응형 크기 유지
+- 검색 플레이스홀더는 구체적으로 작성
+
+### 19. Form Validation (폼 검증)
+
+**입력 필드 상태별 스타일:**
+
+```tsx
+// Default (기본)
+className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+
+// Error (에러)
+className="flex h-10 w-full rounded-md border border-destructive bg-background px-3 py-2 text-sm 
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive"
+
+// Success (성공)
+className="flex h-10 w-full rounded-md border border-success bg-background px-3 py-2 text-sm 
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-success"
+
+// Disabled (비활성)
+className="flex h-10 w-full rounded-md border border-input bg-muted px-3 py-2 text-sm 
+opacity-50 cursor-not-allowed"
+```
+
+**Helper Text (도움말 텍스트):**
+
+```tsx
+// 기본 Helper Text
+<p className="text-xs text-muted-foreground mt-1.5">
+  8자 이상 입력해주세요
+</p>
+
+// Error Message
+<p className="text-xs text-destructive mt-1.5 flex items-center gap-1">
+  <AlertCircle className="h-3 w-3" />
+  이메일 형식이 올바르지 않습니다
+</p>
+
+// Success Message
+<p className="text-xs text-success mt-1.5 flex items-center gap-1">
+  <CheckCircle className="h-3 w-3" />
+  사용 가능한 이메일입니다
+</p>
+```
+
+**Form Label (폼 라벨):**
+
+```tsx
+// 기본 라벨
+<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+  이메일
+</label>
+
+// 필수 항목 표시
+<label className="text-sm font-medium leading-none">
+  이메일 <span className="text-destructive">*</span>
+</label>
+```
+
+**전체 폼 필드 구조:**
+
+```tsx
+<div className="space-y-2">
+  <label className="text-sm font-medium">
+    이메일 <span className="text-destructive">*</span>
+  </label>
+  <input
+    type="email"
+    className={cn(
+      "flex h-10 w-full rounded-md border px-3 py-2 text-sm",
+      error ? "border-destructive" : "border-input",
+      "focus-visible:outline-none focus-visible:ring-2",
+      error ? "focus-visible:ring-destructive" : "focus-visible:ring-ring"
+    )}
+  />
+  {error && (
+    <p className="text-xs text-destructive flex items-center gap-1">
+      <AlertCircle className="h-3 w-3" />
+      {errorMessage}
+    </p>
+  )}
+  {!error && helperText && (
+    <p className="text-xs text-muted-foreground">{helperText}</p>
+  )}
+</div>
+```
+
+**실시간 검증 피드백:**
+
+```tsx
+// 로딩 중 (검증 진행)
+<div className="flex items-center gap-2">
+  <input className="..." />
+  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+</div>
+
+// 성공
+<div className="flex items-center gap-2">
+  <input className="border-success ..." />
+  <CheckCircle className="h-4 w-4 text-success" />
+</div>
+
+// 실패
+<div className="flex items-center gap-2">
+  <input className="border-destructive ..." />
+  <XCircle className="h-4 w-4 text-destructive" />
+</div>
+```
+
+### 20. Loading States (로딩 상태)
+
+**Spinner (스피너) 크기별:**
+
+```tsx
+// Small
+<Loader2 className="h-4 w-4 animate-spin" />
+
+// Default
+<Loader2 className="h-6 w-6 animate-spin" />
+
+// Large
+<Loader2 className="h-8 w-8 animate-spin" />
+```
+
+**Spinner 색상별:**
+
+```tsx
+// Primary
+<Loader2 className="h-6 w-6 animate-spin text-primary" />
+
+// Muted
+<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+
+// White (다크 배경용)
+<Loader2 className="h-6 w-6 animate-spin text-primary-foreground" />
+```
+
+**Button Loading:**
+
+```tsx
+<button 
+  disabled 
+  className="inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground h-10 px-4"
+>
+  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+  처리 중...
+</button>
+```
+
+**Skeleton UI:**
+
+```tsx
+// 텍스트 스켈레톤
+<div className="space-y-2">
+  <div className="h-4 w-full bg-muted rounded animate-pulse" />
+  <div className="h-4 w-3/4 bg-muted rounded animate-pulse" />
+  <div className="h-4 w-1/2 bg-muted rounded animate-pulse" />
+</div>
+
+// 카드 스켈레톤
+<div className="rounded-lg border bg-card p-6 space-y-4">
+  <div className="flex items-center gap-4">
+    <div className="h-12 w-12 bg-muted rounded-full animate-pulse" />
+    <div className="space-y-2 flex-1">
+      <div className="h-4 w-1/3 bg-muted rounded animate-pulse" />
+      <div className="h-3 w-1/2 bg-muted rounded animate-pulse" />
+    </div>
+  </div>
+  <div className="space-y-2">
+    <div className="h-3 w-full bg-muted rounded animate-pulse" />
+    <div className="h-3 w-full bg-muted rounded animate-pulse" />
+    <div className="h-3 w-3/4 bg-muted rounded animate-pulse" />
+  </div>
+</div>
+```
+
+**Progress Bar (진행률):**
+
+```tsx
+// 기본 Progress Bar
+<div className="w-full h-2 bg-secondary rounded-full overflow-hidden">
+  <div 
+    className="h-full bg-primary transition-all duration-300"
+    style={{ width: `${progress}%` }}
+  />
+</div>
+
+// 라벨 포함
+<div className="space-y-2">
+  <div className="flex justify-between text-sm">
+    <span className="text-muted-foreground">업로드 중...</span>
+    <span className="font-medium">{progress}%</span>
+  </div>
+  <div className="w-full h-2 bg-secondary rounded-full overflow-hidden">
+    <div 
+      className="h-full bg-primary transition-all duration-300"
+      style={{ width: `${progress}%` }}
+    />
+  </div>
+</div>
+```
+
+**Full Page Loading:**
+
+```tsx
+<div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50">
+  <div className="flex flex-col items-center gap-4">
+    <Loader2 className="h-8 w-8 animate-spin text-primary" />
+    <p className="text-sm text-muted-foreground">로딩 중...</p>
+  </div>
+</div>
+```
+
+### 21. Empty States (빈 상태)
+
+**기본 Empty State:**
+
+```tsx
+<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+  <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
+    <Inbox className="h-8 w-8 text-muted-foreground" />
+  </div>
+  <h3 className="text-lg font-semibold mb-2">데이터가 없습니다</h3>
+  <p className="text-sm text-muted-foreground mb-4 max-w-sm">
+    아직 생성된 항목이 없습니다. 새로운 항목을 추가해보세요.
+  </p>
+  <button className="inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground h-10 px-4">
+    <Plus className="mr-2 h-4 w-4" />
+    새 항목 추가
+  </button>
+</div>
+```
+
+**검색 결과 없음:**
+
+```tsx
+<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+  <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
+    <Search className="h-8 w-8 text-muted-foreground" />
+  </div>
+  <h3 className="text-lg font-semibold mb-2">검색 결과가 없습니다</h3>
+  <p className="text-sm text-muted-foreground mb-4 max-w-sm">
+    "{searchQuery}"에 대한 결과를 찾을 수 없습니다. 다른 검색어로 시도해보세요.
+  </p>
+  <button className="inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent h-9 px-4">
+    검색어 초기화
+  </button>
+</div>
+```
+
+**에러 상태:**
+
+```tsx
+<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+  <div className="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mb-4">
+    <AlertCircle className="h-8 w-8 text-destructive" />
+  </div>
+  <h3 className="text-lg font-semibold mb-2">데이터를 불러올 수 없습니다</h3>
+  <p className="text-sm text-muted-foreground mb-4 max-w-sm">
+    일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.
+  </p>
+  <button className="inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground h-10 px-4">
+    <RefreshCw className="mr-2 h-4 w-4" />
+    다시 시도
+  </button>
+</div>
+```
+
+**아이콘 가이드:**
+- 데이터 없음: Inbox, Package, FileText
+- 검색 결과 없음: Search, SearchX
+- 필터 결과 없음: Filter, FilterX
+- 에러: AlertCircle, XCircle
+- 네트워크 오류: WifiOff, CloudOff
+- 권한 없음: Lock, ShieldOff
+
+---
+
+## 추가 프로젝트 규칙
+
+- 백엔드 재실행 금지
+- 항상 한글로 답변
+- 이모지 사용 금지 (명시적 요청 없이)
+- 심플하고 깔끔한 디자인 유지
+

EXTERNAL_REST_API_IMPLEMENTATION_COMPLETE.md

@@ -0,0 +1,399 @@
+# 외부 커넥션 관리 REST API 지원 구현 완료 보고서
+
+## 📋 구현 개요
+
+`/admin/external-connections` 페이지에 REST API 연결 관리 기능을 성공적으로 추가했습니다.
+이제 외부 데이터베이스 연결과 REST API 연결을 탭을 통해 통합 관리할 수 있습니다.
+
+---
+
+## ✅ 구현 완료 사항
+
+### 1. 데이터베이스 구조
+
+**파일**: `/Users/dohyeonsu/Documents/ERP-node/db/create_external_rest_api_connections.sql`
+
+- ✅ `external_rest_api_connections` 테이블 생성
+- ✅ 인증 타입 (none, api-key, bearer, basic, oauth2) 지원
+- ✅ 헤더 정보 JSONB 저장
+- ✅ 테스트 결과 저장 (last_test_date, last_test_result, last_test_message)
+- ✅ 샘플 데이터 포함 (기상청 API, JSONPlaceholder)
+
+### 2. 백엔드 구현
+
+#### 타입 정의
+
+**파일**: `backend-node/src/types/externalRestApiTypes.ts`
+
+- ✅ ExternalRestApiConnection 인터페이스
+- ✅ ExternalRestApiConnectionFilter 인터페이스
+- ✅ RestApiTestRequest 인터페이스
+- ✅ RestApiTestResult 인터페이스
+- ✅ AuthType 타입 정의
+
+#### 서비스 계층
+
+**파일**: `backend-node/src/services/externalRestApiConnectionService.ts`
+
+- ✅ CRUD 메서드 (getConnections, getConnectionById, createConnection, updateConnection, deleteConnection)
+- ✅ 연결 테스트 메서드 (testConnection, testConnectionById)
+- ✅ 민감 정보 암호화/복호화 (AES-256-GCM)
+- ✅ 유효성 검증
+- ✅ 인증 타입별 헤더 구성
+
+#### API 라우트
+
+**파일**: `backend-node/src/routes/externalRestApiConnectionRoutes.ts`
+
+- ✅ GET `/api/external-rest-api-connections` - 목록 조회
+- ✅ GET `/api/external-rest-api-connections/:id` - 상세 조회
+- ✅ POST `/api/external-rest-api-connections` - 연결 생성
+- ✅ PUT `/api/external-rest-api-connections/:id` - 연결 수정
+- ✅ DELETE `/api/external-rest-api-connections/:id` - 연결 삭제
+- ✅ POST `/api/external-rest-api-connections/test` - 연결 테스트 (데이터 기반)
+- ✅ POST `/api/external-rest-api-connections/:id/test` - 연결 테스트 (ID 기반)
+
+#### 라우트 등록
+
+**파일**: `backend-node/src/app.ts`
+
+- ✅ externalRestApiConnectionRoutes import
+- ✅ `/api/external-rest-api-connections` 경로 등록
+
+### 3. 프론트엔드 구현
+
+#### API 클라이언트
+
+**파일**: `frontend/lib/api/externalRestApiConnection.ts`
+
+- ✅ ExternalRestApiConnectionAPI 클래스
+- ✅ CRUD 메서드
+- ✅ 연결 테스트 메서드
+- ✅ 지원되는 인증 타입 조회
+
+#### 헤더 관리 컴포넌트
+
+**파일**: `frontend/components/admin/HeadersManager.tsx`
+
+- ✅ 동적 키-값 추가/삭제
+- ✅ 테이블 형식 UI
+- ✅ 실시간 업데이트
+
+#### 인증 설정 컴포넌트
+
+**파일**: `frontend/components/admin/AuthenticationConfig.tsx`
+
+- ✅ 인증 타입 선택
+- ✅ API Key 설정 (header/query 선택)
+- ✅ Bearer Token 설정
+- ✅ Basic Auth 설정
+- ✅ OAuth 2.0 설정
+- ✅ 타입별 동적 UI 표시
+
+#### REST API 연결 모달
+
+**파일**: `frontend/components/admin/RestApiConnectionModal.tsx`
+
+- ✅ 기본 정보 입력 (연결명, 설명, URL)
+- ✅ 헤더 관리 통합
+- ✅ 인증 설정 통합
+- ✅ 고급 설정 (타임아웃, 재시도)
+- ✅ 연결 테스트 기능
+- ✅ 테스트 결과 표시
+- ✅ 유효성 검증
+
+#### REST API 연결 목록 컴포넌트
+
+**파일**: `frontend/components/admin/RestApiConnectionList.tsx`
+
+- ✅ 연결 목록 테이블
+- ✅ 검색 기능 (연결명, URL)
+- ✅ 필터링 (인증 타입, 활성 상태)
+- ✅ 연결 테스트 버튼 및 결과 표시
+- ✅ 편집/삭제 기능
+- ✅ 마지막 테스트 정보 표시
+
+#### 메인 페이지 탭 구조
+
+**파일**: `frontend/app/(main)/admin/external-connections/page.tsx`
+
+- ✅ 탭 UI 추가 (Database / REST API)
+- ✅ 데이터베이스 연결 탭 (기존 기능)
+- ✅ REST API 연결 탭 (신규 기능)
+- ✅ 탭 전환 상태 관리
+
+---
+
+## 🎯 주요 기능
+
+### 1. 탭 전환
+
+- 데이터베이스 연결 관리 ↔ REST API 연결 관리 간 탭으로 전환
+- 각 탭은 독립적으로 동작
+
+### 2. REST API 연결 관리
+
+- **연결명**: 고유한 이름으로 연결 식별
+- **기본 URL**: API의 베이스 URL
+- **헤더 설정**: 키-값 쌍으로 HTTP 헤더 관리
+- **인증 설정**: 5가지 인증 타입 지원
+  - 인증 없음 (none)
+  - API Key (header 또는 query parameter)
+  - Bearer Token
+  - Basic Auth
+  - OAuth 2.0
+
+### 3. 연결 테스트
+
+- 저장 전 연결 테스트 가능
+- 테스트 엔드포인트 지정 가능 (선택)
+- 응답 시간, 상태 코드 표시
+- 테스트 결과 데이터베이스 저장
+
+### 4. 보안
+
+- 민감 정보 암호화 (API 키, 토큰, 비밀번호)
+- AES-256-GCM 알고리즘 사용
+- 환경 변수로 암호화 키 관리
+
+---
+
+## 📁 생성된 파일 목록
+
+### 데이터베이스
+
+- `db/create_external_rest_api_connections.sql`
+
+### 백엔드
+
+- `backend-node/src/types/externalRestApiTypes.ts`
+- `backend-node/src/services/externalRestApiConnectionService.ts`
+- `backend-node/src/routes/externalRestApiConnectionRoutes.ts`
+
+### 프론트엔드
+
+- `frontend/lib/api/externalRestApiConnection.ts`
+- `frontend/components/admin/HeadersManager.tsx`
+- `frontend/components/admin/AuthenticationConfig.tsx`
+- `frontend/components/admin/RestApiConnectionModal.tsx`
+- `frontend/components/admin/RestApiConnectionList.tsx`
+
+### 수정된 파일
+
+- `backend-node/src/app.ts` (라우트 등록)
+- `frontend/app/(main)/admin/external-connections/page.tsx` (탭 구조)
+
+---
+
+## 🚀 사용 방법
+
+### 1. 데이터베이스 테이블 생성
+
+SQL 스크립트를 실행하세요:
+
+```bash
+psql -U postgres -d your_database -f db/create_external_rest_api_connections.sql
+```
+
+### 2. 백엔드 재시작
+
+암호화 키 환경 변수 설정 (선택):
+
+```bash
+export DB_PASSWORD_SECRET="your-secret-key-32-characters-long"
+```
+
+백엔드 재시작:
+
+```bash
+cd backend-node
+npm run dev
+```
+
+### 3. 프론트엔드 접속
+
+브라우저에서 다음 URL로 접속:
+
+```
+http://localhost:3000/admin/external-connections
+```
+
+### 4. REST API 연결 추가
+
+1. "REST API 연결" 탭 클릭
+2. "새 연결 추가" 버튼 클릭
+3. 연결 정보 입력:
+   - 연결명 (필수)
+   - 기본 URL (필수)
+   - 헤더 설정
+   - 인증 설정
+4. 연결 테스트 (선택)
+5. 저장
+
+---
+
+## 🧪 테스트 시나리오
+
+### 테스트 1: 인증 없는 공개 API
+
+```
+연결명: JSONPlaceholder
+기본 URL: https://jsonplaceholder.typicode.com
+인증 타입: 인증 없음
+테스트 엔드포인트: /posts/1
+```
+
+### 테스트 2: API Key (Query Parameter)
+
+```
+연결명: 기상청 API
+기본 URL: https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0
+인증 타입: API Key
+키 위치: Query Parameter
+키 이름: serviceKey
+키 값: [your-api-key]
+테스트 엔드포인트: /getUltraSrtNcst
+```
+
+### 테스트 3: Bearer Token
+
+```
+연결명: GitHub API
+기본 URL: https://api.github.com
+인증 타입: Bearer Token
+토큰: ghp_your_token_here
+헤더:
+  - Accept: application/vnd.github.v3+json
+  - User-Agent: YourApp
+테스트 엔드포인트: /user
+```
+
+---
+
+## 🔧 고급 설정
+
+### 타임아웃 설정
+
+- 기본값: 30000ms (30초)
+- 범위: 1000ms ~ 120000ms
+
+### 재시도 설정
+
+- 재시도 횟수: 0~5회
+- 재시도 간격: 100ms ~ 10000ms
+
+### 헤더 관리
+
+- 동적 추가/삭제
+- 일반적인 헤더:
+  - `Content-Type: application/json`
+  - `Accept: application/json`
+  - `User-Agent: YourApp/1.0`
+
+---
+
+## 🔒 보안 고려사항
+
+### 암호화
+
+- API 키, 토큰, 비밀번호는 자동 암호화
+- AES-256-GCM 알고리즘 사용
+- 환경 변수 `DB_PASSWORD_SECRET`로 키 관리
+
+### 권한
+
+- 관리자 권한만 접근 가능
+- 회사별 데이터 분리 (`company_code`)
+
+### 테스트 제한
+
+- 동시 테스트 실행 제한
+- 타임아웃 강제 적용
+
+---
+
+## 📊 데이터베이스 스키마
+
+```sql
+external_rest_api_connections
+├── id (SERIAL PRIMARY KEY)
+├── connection_name (VARCHAR(100) UNIQUE) -- 연결명
+├── description (TEXT) -- 설명
+├── base_url (VARCHAR(500)) -- 기본 URL
+├── default_headers (JSONB) -- 헤더 (키-값)
+├── auth_type (VARCHAR(20)) -- 인증 타입
+├── auth_config (JSONB) -- 인증 설정
+├── timeout (INTEGER) -- 타임아웃
+├── retry_count (INTEGER) -- 재시도 횟수
+├── retry_delay (INTEGER) -- 재시도 간격
+├── company_code (VARCHAR(20)) -- 회사 코드
+├── is_active (CHAR(1)) -- 활성 상태
+├── created_date (TIMESTAMP) -- 생성일
+├── created_by (VARCHAR(50)) -- 생성자
+├── updated_date (TIMESTAMP) -- 수정일
+├── updated_by (VARCHAR(50)) -- 수정자
+├── last_test_date (TIMESTAMP) -- 마지막 테스트 일시
+├── last_test_result (CHAR(1)) -- 마지막 테스트 결과
+└── last_test_message (TEXT) -- 마지막 테스트 메시지
+```
+
+---
+
+## 🎉 완료 요약
+
+### 구현 완료
+
+- ✅ 데이터베이스 테이블 생성
+- ✅ 백엔드 API (CRUD + 테스트)
+- ✅ 프론트엔드 UI (탭 + 모달 + 목록)
+- ✅ 헤더 관리 기능
+- ✅ 5가지 인증 타입 지원
+- ✅ 연결 테스트 기능
+- ✅ 민감 정보 암호화
+
+### 테스트 완료
+
+- ✅ API 엔드포인트 테스트
+- ✅ UI 컴포넌트 통합
+- ✅ 탭 전환 기능
+- ✅ CRUD 작업
+- ✅ 연결 테스트
+
+### 문서 완료
+
+- ✅ 계획서 (PHASE_EXTERNAL_CONNECTION_REST_API_ENHANCEMENT.md)
+- ✅ 완료 보고서 (본 문서)
+- ✅ SQL 스크립트 (주석 포함)
+
+---
+
+## 🚀 다음 단계 (선택 사항)
+
+### 향후 확장 가능성
+
+1. **엔드포인트 프리셋 관리**
+
+   - 자주 사용하는 엔드포인트 저장
+   - 빠른 호출 지원
+
+2. **요청 템플릿**
+
+   - HTTP 메서드별 요청 바디 템플릿
+   - 변수 치환 기능
+
+3. **응답 매핑**
+
+   - API 응답을 내부 데이터 구조로 변환
+   - 매핑 룰 설정
+
+4. **로그 및 모니터링**
+   - API 호출 이력 기록
+   - 응답 시간 모니터링
+   - 오류율 추적
+
+---
+
+**구현 완료일**: 2025-10-21  
+**버전**: 1.0  
+**개발자**: AI Assistant  
+**상태**: 완료 ✅

PHASE_EXTERNAL_CONNECTION_REST_API_ENHANCEMENT.md

@@ -0,0 +1,759 @@
+# 외부 커넥션 관리 REST API 지원 확장 계획서
+
+## 📋 프로젝트 개요
+
+### 목적
+
+현재 외부 데이터베이스 연결만 관리하는 `/admin/external-connections` 페이지에 REST API 연결 관리 기능을 추가하여, DB와 REST API 커넥션을 통합 관리할 수 있도록 확장합니다.
+
+### 현재 상황
+
+- **기존 기능**: 외부 데이터베이스 연결 정보만 관리 (MySQL, PostgreSQL, Oracle, SQL Server, SQLite)
+- **기존 테이블**: `external_db_connections` - DB 연결 정보 저장
+- **기존 UI**: 단일 화면에서 DB 연결 목록 표시 및 CRUD 작업
+
+### 요구사항
+
+1. **탭 전환**: DB 연결 관리 ↔ REST API 연결 관리 간 탭 전환 UI
+2. **REST API 관리**: 요청 주소별 헤더(키-값 쌍) 관리
+3. **연결 테스트**: REST API 호출이 정상 작동하는지 테스트 기능
+
+---
+
+## 🗄️ 데이터베이스 설계
+
+### 신규 테이블: `external_rest_api_connections`
+
+```sql
+CREATE TABLE external_rest_api_connections (
+    id SERIAL PRIMARY KEY,
+
+    -- 기본 정보
+    connection_name VARCHAR(100) NOT NULL UNIQUE,
+    description TEXT,
+
+    -- REST API 연결 정보
+    base_url VARCHAR(500) NOT NULL,              -- 기본 URL (예: https://api.example.com)
+    default_headers JSONB DEFAULT '{}',          -- 기본 헤더 정보 (키-값 쌍)
+
+    -- 인증 설정
+    auth_type VARCHAR(20) DEFAULT 'none',        -- none, api-key, bearer, basic, oauth2
+    auth_config JSONB,                           -- 인증 관련 설정
+
+    -- 고급 설정
+    timeout INTEGER DEFAULT 30000,               -- 요청 타임아웃 (ms)
+    retry_count INTEGER DEFAULT 0,               -- 재시도 횟수
+    retry_delay INTEGER DEFAULT 1000,            -- 재시도 간격 (ms)
+
+    -- 관리 정보
+    company_code VARCHAR(20) DEFAULT '*',
+    is_active CHAR(1) DEFAULT 'Y',
+    created_date TIMESTAMP DEFAULT NOW(),
+    created_by VARCHAR(50),
+    updated_date TIMESTAMP DEFAULT NOW(),
+    updated_by VARCHAR(50),
+
+    -- 테스트 정보
+    last_test_date TIMESTAMP,
+    last_test_result CHAR(1),                    -- Y: 성공, N: 실패
+    last_test_message TEXT
+);
+
+-- 인덱스
+CREATE INDEX idx_rest_api_connections_company ON external_rest_api_connections(company_code);
+CREATE INDEX idx_rest_api_connections_active ON external_rest_api_connections(is_active);
+CREATE INDEX idx_rest_api_connections_name ON external_rest_api_connections(connection_name);
+```
+
+### 샘플 데이터
+
+```sql
+INSERT INTO external_rest_api_connections (
+    connection_name, description, base_url, default_headers, auth_type, auth_config
+) VALUES
+(
+    '기상청 API',
+    '기상청 공공데이터 API',
+    'https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0',
+    '{"Content-Type": "application/json", "Accept": "application/json"}',
+    'api-key',
+    '{"keyLocation": "query", "keyName": "serviceKey", "keyValue": "your-api-key-here"}'
+),
+(
+    '사내 인사 시스템 API',
+    '인사정보 조회용 내부 API',
+    'https://hr.company.com/api/v1',
+    '{"Content-Type": "application/json"}',
+    'bearer',
+    '{"token": "your-bearer-token-here"}'
+);
+```
+
+---
+
+## 🔧 백엔드 구현
+
+### 1. 타입 정의
+
+```typescript
+// backend-node/src/types/externalRestApiTypes.ts
+
+export type AuthType = "none" | "api-key" | "bearer" | "basic" | "oauth2";
+
+export interface ExternalRestApiConnection {
+  id?: number;
+  connection_name: string;
+  description?: string;
+  base_url: string;
+  default_headers: Record<string, string>;
+  auth_type: AuthType;
+  auth_config?: {
+    // API Key
+    keyLocation?: "header" | "query";
+    keyName?: string;
+    keyValue?: string;
+
+    // Bearer Token
+    token?: string;
+
+    // Basic Auth
+    username?: string;
+    password?: string;
+
+    // OAuth2
+    clientId?: string;
+    clientSecret?: string;
+    tokenUrl?: string;
+    accessToken?: string;
+  };
+  timeout?: number;
+  retry_count?: number;
+  retry_delay?: number;
+  company_code: string;
+  is_active: string;
+  created_date?: Date;
+  created_by?: string;
+  updated_date?: Date;
+  updated_by?: string;
+  last_test_date?: Date;
+  last_test_result?: string;
+  last_test_message?: string;
+}
+
+export interface ExternalRestApiConnectionFilter {
+  auth_type?: string;
+  is_active?: string;
+  company_code?: string;
+  search?: string;
+}
+
+export interface RestApiTestRequest {
+  id?: number;
+  base_url: string;
+  endpoint?: string; // 테스트할 엔드포인트 (선택)
+  method?: "GET" | "POST" | "PUT" | "DELETE";
+  headers?: Record<string, string>;
+  auth_type?: AuthType;
+  auth_config?: any;
+  timeout?: number;
+}
+
+export interface RestApiTestResult {
+  success: boolean;
+  message: string;
+  response_time?: number;
+  status_code?: number;
+  response_data?: any;
+  error_details?: string;
+}
+```
+
+### 2. 서비스 계층
+
+```typescript
+// backend-node/src/services/externalRestApiConnectionService.ts
+
+export class ExternalRestApiConnectionService {
+  // CRUD 메서드
+  static async getConnections(filter: ExternalRestApiConnectionFilter);
+  static async getConnectionById(id: number);
+  static async createConnection(data: ExternalRestApiConnection);
+  static async updateConnection(
+    id: number,
+    data: Partial<ExternalRestApiConnection>
+  );
+  static async deleteConnection(id: number);
+
+  // 테스트 메서드
+  static async testConnection(
+    testRequest: RestApiTestRequest
+  ): Promise<RestApiTestResult>;
+  static async testConnectionById(
+    id: number,
+    endpoint?: string
+  ): Promise<RestApiTestResult>;
+
+  // 헬퍼 메서드
+  private static buildHeaders(
+    connection: ExternalRestApiConnection
+  ): Record<string, string>;
+  private static validateConnectionData(data: ExternalRestApiConnection): void;
+  private static encryptSensitiveData(authConfig: any): any;
+  private static decryptSensitiveData(authConfig: any): any;
+}
+```
+
+### 3. API 라우트
+
+```typescript
+// backend-node/src/routes/externalRestApiConnectionRoutes.ts
+
+// GET    /api/external-rest-api-connections          - 목록 조회
+// GET    /api/external-rest-api-connections/:id      - 상세 조회
+// POST   /api/external-rest-api-connections          - 새 연결 생성
+// PUT    /api/external-rest-api-connections/:id      - 연결 수정
+// DELETE /api/external-rest-api-connections/:id      - 연결 삭제
+// POST   /api/external-rest-api-connections/test     - 연결 테스트 (신규)
+// POST   /api/external-rest-api-connections/:id/test - ID로 테스트 (기존 연결)
+```
+
+### 4. 연결 테스트 구현
+
+```typescript
+// REST API 연결 테스트 로직
+static async testConnection(testRequest: RestApiTestRequest): Promise<RestApiTestResult> {
+  const startTime = Date.now();
+
+  try {
+    // 헤더 구성
+    const headers = { ...testRequest.headers };
+
+    // 인증 헤더 추가
+    if (testRequest.auth_type === 'bearer' && testRequest.auth_config?.token) {
+      headers['Authorization'] = `Bearer ${testRequest.auth_config.token}`;
+    } else if (testRequest.auth_type === 'basic') {
+      const credentials = Buffer.from(
+        `${testRequest.auth_config.username}:${testRequest.auth_config.password}`
+      ).toString('base64');
+      headers['Authorization'] = `Basic ${credentials}`;
+    } else if (testRequest.auth_type === 'api-key') {
+      if (testRequest.auth_config.keyLocation === 'header') {
+        headers[testRequest.auth_config.keyName] = testRequest.auth_config.keyValue;
+      }
+    }
+
+    // URL 구성
+    let url = testRequest.base_url;
+    if (testRequest.endpoint) {
+      url = `${testRequest.base_url}${testRequest.endpoint}`;
+    }
+
+    // API Key가 쿼리에 있는 경우
+    if (testRequest.auth_type === 'api-key' &&
+        testRequest.auth_config.keyLocation === 'query') {
+      const separator = url.includes('?') ? '&' : '?';
+      url = `${url}${separator}${testRequest.auth_config.keyName}=${testRequest.auth_config.keyValue}`;
+    }
+
+    // HTTP 요청 실행
+    const response = await fetch(url, {
+      method: testRequest.method || 'GET',
+      headers,
+      signal: AbortSignal.timeout(testRequest.timeout || 30000),
+    });
+
+    const responseTime = Date.now() - startTime;
+    const responseData = await response.json().catch(() => null);
+
+    return {
+      success: response.ok,
+      message: response.ok ? '연결 성공' : `연결 실패 (${response.status})`,
+      response_time: responseTime,
+      status_code: response.status,
+      response_data: responseData,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: '연결 실패',
+      error_details: error instanceof Error ? error.message : '알 수 없는 오류',
+    };
+  }
+}
+```
+
+---
+
+## 🎨 프론트엔드 구현
+
+### 1. 탭 구조 설계
+
+```typescript
+// frontend/app/(main)/admin/external-connections/page.tsx
+
+type ConnectionTabType = "database" | "rest-api";
+
+const [activeTab, setActiveTab] = useState<ConnectionTabType>("database");
+```
+
+### 2. 메인 페이지 구조 개선
+
+```tsx
+// 탭 헤더
+<Tabs
+  value={activeTab}
+  onValueChange={(value) => setActiveTab(value as ConnectionTabType)}
+>
+  <TabsList className="grid w-[400px] grid-cols-2">
+    <TabsTrigger value="database" className="flex items-center gap-2">
+      <Database className="h-4 w-4" />
+      데이터베이스 연결
+    </TabsTrigger>
+    <TabsTrigger value="rest-api" className="flex items-center gap-2">
+      <Globe className="h-4 w-4" />
+      REST API 연결
+    </TabsTrigger>
+  </TabsList>
+
+  {/* 데이터베이스 연결 탭 */}
+  <TabsContent value="database">
+    <DatabaseConnectionList />
+  </TabsContent>
+
+  {/* REST API 연결 탭 */}
+  <TabsContent value="rest-api">
+    <RestApiConnectionList />
+  </TabsContent>
+</Tabs>
+```
+
+### 3. REST API 연결 목록 컴포넌트
+
+```typescript
+// frontend/components/admin/RestApiConnectionList.tsx
+
+export function RestApiConnectionList() {
+  const [connections, setConnections] = useState<ExternalRestApiConnection[]>(
+    []
+  );
+  const [searchTerm, setSearchTerm] = useState("");
+  const [authTypeFilter, setAuthTypeFilter] = useState("ALL");
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingConnection, setEditingConnection] = useState<
+    ExternalRestApiConnection | undefined
+  >();
+
+  // 테이블 컬럼:
+  // - 연결명
+  // - 기본 URL
+  // - 인증 타입
+  // - 헤더 수 (default_headers 개수)
+  // - 상태 (활성/비활성)
+  // - 마지막 테스트 (날짜 + 결과)
+  // - 작업 (테스트/편집/삭제)
+}
+```
+
+### 4. REST API 연결 설정 모달
+
+```typescript
+// frontend/components/admin/RestApiConnectionModal.tsx
+
+export function RestApiConnectionModal({
+  isOpen,
+  onClose,
+  onSave,
+  connection,
+}: RestApiConnectionModalProps) {
+  // 섹션 구성:
+  // 1. 기본 정보
+  //    - 연결명 (필수)
+  //    - 설명
+  //    - 기본 URL (필수)
+  // 2. 헤더 관리 (키-값 추가/삭제)
+  //    - 동적 입력 필드
+  //    - + 버튼으로 추가
+  //    - 각 행에 삭제 버튼
+  // 3. 인증 설정
+  //    - 인증 타입 선택 (none/api-key/bearer/basic/oauth2)
+  //    - 선택된 타입별 설정 필드 표시
+  // 4. 고급 설정 (접기/펼치기)
+  //    - 타임아웃
+  //    - 재시도 설정
+  // 5. 테스트 섹션
+  //    - 테스트 엔드포인트 입력 (선택)
+  //    - 테스트 실행 버튼
+  //    - 테스트 결과 표시
+}
+```
+
+### 5. 헤더 관리 컴포넌트
+
+```typescript
+// frontend/components/admin/HeadersManager.tsx
+
+interface HeadersManagerProps {
+  headers: Record<string, string>;
+  onChange: (headers: Record<string, string>) => void;
+}
+
+export function HeadersManager({ headers, onChange }: HeadersManagerProps) {
+  const [headersList, setHeadersList] = useState<
+    Array<{ key: string; value: string }>
+  >(Object.entries(headers).map(([key, value]) => ({ key, value })));
+
+  const addHeader = () => {
+    setHeadersList([...headersList, { key: "", value: "" }]);
+  };
+
+  const removeHeader = (index: number) => {
+    const newList = headersList.filter((_, i) => i !== index);
+    setHeadersList(newList);
+    updateParent(newList);
+  };
+
+  const updateHeader = (
+    index: number,
+    field: "key" | "value",
+    value: string
+  ) => {
+    const newList = [...headersList];
+    newList[index][field] = value;
+    setHeadersList(newList);
+    updateParent(newList);
+  };
+
+  const updateParent = (list: Array<{ key: string; value: string }>) => {
+    const headersObject = list.reduce((acc, { key, value }) => {
+      if (key.trim()) acc[key] = value;
+      return acc;
+    }, {} as Record<string, string>);
+    onChange(headersObject);
+  };
+
+  // UI: 테이블 형태로 키-값 입력 필드 표시
+  // 각 행: [키 입력] [값 입력] [삭제 버튼]
+  // 하단: [+ 헤더 추가] 버튼
+}
+```
+
+### 6. 인증 설정 컴포넌트
+
+```typescript
+// frontend/components/admin/AuthenticationConfig.tsx
+
+export function AuthenticationConfig({
+  authType,
+  authConfig,
+  onChange,
+}: AuthenticationConfigProps) {
+  // authType에 따라 다른 입력 필드 표시
+  // none: 추가 필드 없음
+  // api-key:
+  //   - 키 위치 (header/query)
+  //   - 키 이름
+  //   - 키 값
+  // bearer:
+  //   - 토큰 값
+  // basic:
+  //   - 사용자명
+  //   - 비밀번호
+  // oauth2:
+  //   - Client ID
+  //   - Client Secret
+  //   - Token URL
+  //   - Access Token (읽기전용, 자동 갱신)
+}
+```
+
+### 7. API 클라이언트
+
+```typescript
+// frontend/lib/api/externalRestApiConnection.ts
+
+export class ExternalRestApiConnectionAPI {
+  private static readonly BASE_URL = "/api/external-rest-api-connections";
+
+  static async getConnections(filter?: ExternalRestApiConnectionFilter) {
+    const params = new URLSearchParams();
+    if (filter?.search) params.append("search", filter.search);
+    if (filter?.auth_type && filter.auth_type !== "ALL") {
+      params.append("auth_type", filter.auth_type);
+    }
+    if (filter?.is_active && filter.is_active !== "ALL") {
+      params.append("is_active", filter.is_active);
+    }
+
+    const response = await fetch(`${this.BASE_URL}?${params}`);
+    return this.handleResponse(response);
+  }
+
+  static async getConnectionById(id: number) {
+    const response = await fetch(`${this.BASE_URL}/${id}`);
+    return this.handleResponse(response);
+  }
+
+  static async createConnection(data: ExternalRestApiConnection) {
+    const response = await fetch(this.BASE_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+    return this.handleResponse(response);
+  }
+
+  static async updateConnection(
+    id: number,
+    data: Partial<ExternalRestApiConnection>
+  ) {
+    const response = await fetch(`${this.BASE_URL}/${id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+    return this.handleResponse(response);
+  }
+
+  static async deleteConnection(id: number) {
+    const response = await fetch(`${this.BASE_URL}/${id}`, {
+      method: "DELETE",
+    });
+    return this.handleResponse(response);
+  }
+
+  static async testConnection(
+    testRequest: RestApiTestRequest
+  ): Promise<RestApiTestResult> {
+    const response = await fetch(`${this.BASE_URL}/test`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(testRequest),
+    });
+    return this.handleResponse(response);
+  }
+
+  static async testConnectionById(
+    id: number,
+    endpoint?: string
+  ): Promise<RestApiTestResult> {
+    const response = await fetch(`${this.BASE_URL}/${id}/test`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ endpoint }),
+    });
+    return this.handleResponse(response);
+  }
+
+  private static async handleResponse(response: Response) {
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.message || "요청 실패");
+    }
+    return response.json();
+  }
+}
+```
+
+---
+
+## 📋 구현 순서
+
+### Phase 1: 데이터베이스 및 백엔드 기본 구조 (1일)
+
+- [x] 데이터베이스 테이블 생성 (`external_rest_api_connections`)
+- [ ] 타입 정의 작성 (`externalRestApiTypes.ts`)
+- [ ] 서비스 계층 기본 CRUD 구현
+- [ ] API 라우트 기본 구현
+
+### Phase 2: 연결 테스트 기능 (1일)
+
+- [ ] 연결 테스트 로직 구현
+- [ ] 인증 타입별 헤더 구성 로직
+- [ ] 에러 처리 및 타임아웃 관리
+- [ ] 테스트 결과 저장 (last_test_date, last_test_result)
+
+### Phase 3: 프론트엔드 기본 UI (1-2일)
+
+- [ ] 탭 구조 추가 (Database / REST API)
+- [ ] REST API 연결 목록 컴포넌트
+- [ ] API 클라이언트 작성
+- [ ] 기본 CRUD UI 구현
+
+### Phase 4: 모달 및 상세 기능 (1-2일)
+
+- [ ] REST API 연결 설정 모달
+- [ ] 헤더 관리 컴포넌트 (키-값 동적 추가/삭제)
+- [ ] 인증 설정 컴포넌트 (타입별 입력 필드)
+- [ ] 고급 설정 섹션
+
+### Phase 5: 테스트 및 통합 (1일)
+
+- [ ] 연결 테스트 UI
+- [ ] 테스트 결과 표시
+- [ ] 에러 처리 및 사용자 피드백
+- [ ] 전체 기능 통합 테스트
+
+### Phase 6: 최적화 및 마무리 (0.5일)
+
+- [ ] 민감 정보 암호화 (API 키, 토큰, 비밀번호)
+- [ ] UI/UX 개선
+- [ ] 문서화
+
+---
+
+## 🧪 테스트 시나리오
+
+### 1. REST API 연결 등록 테스트
+
+- [ ] 기본 정보 입력 (연결명, URL)
+- [ ] 헤더 추가/삭제
+- [ ] 각 인증 타입별 설정
+- [ ] 유효성 검증 (필수 필드, URL 형식)
+
+### 2. 연결 테스트
+
+- [ ] 인증 없는 API 테스트
+- [ ] API Key (header/query) 테스트
+- [ ] Bearer Token 테스트
+- [ ] Basic Auth 테스트
+- [ ] 타임아웃 시나리오
+- [ ] 네트워크 오류 시나리오
+
+### 3. 데이터 관리
+
+- [ ] 목록 조회 및 필터링
+- [ ] 연결 수정
+- [ ] 연결 삭제
+- [ ] 활성/비활성 전환
+
+### 4. 통합 시나리오
+
+- [ ] DB 연결 탭 ↔ REST API 탭 전환
+- [ ] 여러 연결 등록 및 관리
+- [ ] 동시 테스트 실행
+
+---
+
+## 🔒 보안 고려사항
+
+### 1. 민감 정보 암호화
+
+```typescript
+// API 키, 토큰, 비밀번호 암호화
+private static encryptSensitiveData(authConfig: any): any {
+  if (!authConfig) return null;
+
+  const encrypted = { ...authConfig };
+
+  // 암호화 대상 필드
+  if (encrypted.keyValue) {
+    encrypted.keyValue = encrypt(encrypted.keyValue);
+  }
+  if (encrypted.token) {
+    encrypted.token = encrypt(encrypted.token);
+  }
+  if (encrypted.password) {
+    encrypted.password = encrypt(encrypted.password);
+  }
+  if (encrypted.clientSecret) {
+    encrypted.clientSecret = encrypt(encrypted.clientSecret);
+  }
+
+  return encrypted;
+}
+```
+
+### 2. 접근 권한 제어
+
+- 관리자 권한만 접근
+- 회사별 데이터 분리
+- API 호출 시 인증 토큰 검증
+
+### 3. 테스트 요청 제한
+
+- Rate Limiting (1분에 최대 10회)
+- 타임아웃 설정 (최대 30초)
+- 동시 테스트 제한
+
+---
+
+## 📊 성능 최적화
+
+### 1. 헤더 데이터 구조
+
+```typescript
+// JSONB 필드 인덱싱 (PostgreSQL)
+CREATE INDEX idx_rest_api_headers ON external_rest_api_connections
+USING GIN (default_headers);
+
+CREATE INDEX idx_rest_api_auth_config ON external_rest_api_connections
+USING GIN (auth_config);
+```
+
+### 2. 캐싱 전략
+
+- 자주 사용되는 연결 정보 캐싱
+- 테스트 결과 임시 캐싱 (5분)
+
+---
+
+## 📚 향후 확장 가능성
+
+### 1. 엔드포인트 관리
+
+각 REST API 연결에 대해 자주 사용하는 엔드포인트를 사전 등록하여 빠른 호출 가능
+
+### 2. 요청 템플릿
+
+HTTP 메서드별 요청 바디 템플릿 관리
+
+### 3. 응답 매핑
+
+REST API 응답을 내부 데이터 구조로 변환하는 매핑 룰 설정
+
+### 4. 로그 및 모니터링
+
+- API 호출 이력 기록
+- 응답 시간 모니터링
+- 오류율 추적
+
+---
+
+## ✅ 완료 체크리스트
+
+### 백엔드
+
+- [ ] 데이터베이스 테이블 생성
+- [ ] 타입 정의
+- [ ] 서비스 계층 CRUD
+- [ ] 연결 테스트 로직
+- [ ] API 라우트
+- [ ] 민감 정보 암호화
+
+### 프론트엔드
+
+- [ ] 탭 구조
+- [ ] REST API 연결 목록
+- [ ] 연결 설정 모달
+- [ ] 헤더 관리 컴포넌트
+- [ ] 인증 설정 컴포넌트
+- [ ] API 클라이언트
+- [ ] 연결 테스트 UI
+
+### 테스트
+
+- [ ] 단위 테스트
+- [ ] 통합 테스트
+- [ ] 사용자 시나리오 테스트
+
+### 문서
+
+- [ ] API 문서
+- [ ] 사용자 가이드
+- [ ] 배포 가이드
+
+---
+
+**작성일**: 2025-10-20  
+**버전**: 1.0  
+**담당**: AI Assistant

PHASE_EXTERNAL_CONNECTION_REST_API_ENHANCEMENT_DONE.md

@@ -0,0 +1,213 @@
+# REST API 연결 관리 기능 구현 완료
+
+## 구현 개요
+
+외부 커넥션 관리 페이지(`/admin/external-connections`)에 REST API 연결 관리 기능이 추가되었습니다.
+기존의 데이터베이스 연결 관리와 함께 REST API 연결도 관리할 수 있도록 탭 기반 UI가 구현되었습니다.
+
+## 구현 완료 사항
+
+### 1. 데이터베이스 (✅ 완료)
+
+**파일**: `/db/create_external_rest_api_connections.sql`
+
+- `external_rest_api_connections` 테이블 생성
+- 연결 정보, 인증 설정, 테스트 결과 저장
+- JSONB 타입으로 헤더 및 인증 설정 유연하게 관리
+- 인덱스 최적화 (company_code, is_active, auth_type, JSONB GIN 인덱스)
+
+**실행 방법**:
+
+```bash
+# PostgreSQL 컨테이너에 접속하여 SQL 실행
+docker exec -i esgrin-mes-db psql -U postgres -d ilshin < db/create_external_rest_api_connections.sql
+```
+
+### 2. 백엔드 구현 (✅ 완료)
+
+#### 2.1 타입 정의
+
+**파일**: `backend-node/src/types/externalRestApiTypes.ts`
+
+- `ExternalRestApiConnection`: REST API 연결 정보 인터페이스
+- `RestApiTestRequest`: 연결 테스트 요청 인터페이스
+- `RestApiTestResult`: 테스트 결과 인터페이스
+- `AuthType`: 인증 타입 (none, api-key, bearer, basic, oauth2)
+- 각 인증 타입별 세부 설정 인터페이스
+
+#### 2.2 서비스 레이어
+
+**파일**: `backend-node/src/services/externalRestApiConnectionService.ts`
+
+- CRUD 작업 구현 (생성, 조회, 수정, 삭제)
+- 민감 정보 암호화/복호화 (AES-256-GCM)
+- REST API 연결 테스트 기능
+- 필터링 및 검색 기능
+- 유효성 검증
+
+#### 2.3 API 라우트
+
+**파일**: `backend-node/src/routes/externalRestApiConnectionRoutes.ts`
+
+- `GET /api/external-rest-api-connections` - 목록 조회
+- `GET /api/external-rest-api-connections/:id` - 상세 조회
+- `POST /api/external-rest-api-connections` - 생성
+- `PUT /api/external-rest-api-connections/:id` - 수정
+- `DELETE /api/external-rest-api-connections/:id` - 삭제
+- `POST /api/external-rest-api-connections/test` - 연결 테스트
+- `POST /api/external-rest-api-connections/:id/test` - ID 기반 테스트
+
+#### 2.4 앱 통합
+
+**파일**: `backend-node/src/app.ts`
+
+- 새로운 라우트 등록 완료
+
+### 3. 프론트엔드 구현 (✅ 완료)
+
+#### 3.1 API 클라이언트
+
+**파일**: `frontend/lib/api/externalRestApiConnection.ts`
+
+- 백엔드 API와 통신하는 클라이언트 구현
+- 타입 안전한 API 호출
+- 에러 처리
+
+#### 3.2 공통 컴포넌트
+
+**파일**: `frontend/components/admin/HeadersManager.tsx`
+
+- HTTP 헤더 key-value 관리 컴포넌트
+- 동적 추가/삭제 기능
+
+**파일**: `frontend/components/admin/AuthenticationConfig.tsx`
+
+- 인증 타입별 설정 컴포넌트
+- 5가지 인증 방식 지원 (none, api-key, bearer, basic, oauth2)
+
+#### 3.3 모달 컴포넌트
+
+**파일**: `frontend/components/admin/RestApiConnectionModal.tsx`
+
+- 연결 추가/수정 모달
+- 헤더 관리 및 인증 설정 통합
+- 연결 테스트 기능
+
+#### 3.4 목록 관리 컴포넌트
+
+**파일**: `frontend/components/admin/RestApiConnectionList.tsx`
+
+- REST API 연결 목록 표시
+- 검색 및 필터링
+- CRUD 작업
+- 연결 테스트
+
+#### 3.5 메인 페이지
+
+**파일**: `frontend/app/(main)/admin/external-connections/page.tsx`
+
+- 탭 기반 UI 구현 (데이터베이스 ↔ REST API)
+- 기존 DB 연결 관리와 통합
+
+## 주요 기능
+
+### 1. 연결 관리
+
+- REST API 연결 정보 생성/수정/삭제
+- 연결명, 설명, Base URL 관리
+- Timeout, Retry 설정
+- 활성화 상태 관리
+
+### 2. 인증 관리
+
+- **None**: 인증 없음
+- **API Key**: 헤더 또는 쿼리 파라미터
+- **Bearer Token**: Authorization: Bearer {token}
+- **Basic Auth**: username/password
+- **OAuth2**: client_id, client_secret, token_url 등
+
+### 3. 헤더 관리
+
+- 기본 HTTP 헤더 설정
+- Key-Value 형식으로 동적 관리
+- Content-Type, Accept 등 자유롭게 설정
+
+### 4. 연결 테스트
+
+- 실시간 연결 테스트
+- HTTP 응답 상태 코드 확인
+- 응답 시간 측정
+- 테스트 결과 저장
+
+### 5. 보안
+
+- 민감 정보 자동 암호화 (AES-256-GCM)
+  - API Key
+  - Bearer Token
+  - 비밀번호
+  - OAuth2 Client Secret
+- 암호화된 데이터는 데이터베이스에 안전하게 저장
+
+## 사용 방법
+
+### 1. SQL 스크립트 실행
+
+```bash
+# PostgreSQL 컨테이너에 접속
+docker exec -it esgrin-mes-db psql -U postgres -d ilshin
+
+# 또는 파일 직접 실행
+docker exec -i esgrin-mes-db psql -U postgres -d ilshin < db/create_external_rest_api_connections.sql
+```
+
+### 2. 백엔드 재시작
+
+백엔드 서버가 자동으로 새로운 라우트를 인식합니다. (이미 재시작 완료)
+
+### 3. 웹 UI 접속
+
+1. `/admin/external-connections` 페이지 접속
+2. "REST API 연결" 탭 선택
+3. "새 연결 추가" 버튼 클릭
+4. 필요한 정보 입력
+   - 연결명, 설명, Base URL
+   - 기본 헤더 설정
+   - 인증 타입 선택 및 인증 정보 입력
+   - Timeout, Retry 설정
+5. "연결 테스트" 버튼으로 즉시 테스트 가능
+6. 저장
+
+### 4. 연결 관리
+
+- **목록 조회**: 모든 REST API 연결 정보 확인
+- **검색**: 연결명, 설명, URL로 검색
+- **필터링**: 인증 타입, 활성화 상태로 필터링
+- **수정**: 연필 아이콘 클릭하여 수정
+- **삭제**: 휴지통 아이콘 클릭하여 삭제
+- **테스트**: Play 아이콘 클릭하여 연결 테스트
+
+## 기술 스택
+
+- **Backend**: Node.js, Express, TypeScript, PostgreSQL
+- **Frontend**: Next.js, React, TypeScript, Shadcn UI
+- **보안**: AES-256-GCM 암호화
+- **데이터**: JSONB (PostgreSQL)
+
+## 테스트 완료
+
+- ✅ 백엔드 컴파일 성공
+- ✅ 서버 정상 실행 확인
+- ✅ 타입 에러 수정 완료
+- ✅ 모든 라우트 등록 완료
+- ✅ 인증 토큰 자동 포함 구현 (apiClient 사용)
+
+## 다음 단계
+
+1. SQL 스크립트 실행
+2. 프론트엔드 빌드 및 테스트
+3. UI에서 연결 추가/수정/삭제/테스트 기능 확인
+
+## 참고 문서
+
+- 전체 계획: `PHASE_EXTERNAL_CONNECTION_REST_API_ENHANCEMENT.md`
+- 기존 외부 DB 연결: `제어관리_외부커넥션_통합_기능_가이드.md`

backend-node/src/app.ts

@@ -35,6 +35,7 @@ import mailReceiveBasicRoutes from "./routes/mailReceiveBasicRoutes";
 import dataRoutes from "./routes/dataRoutes";
 import testButtonDataflowRoutes from "./routes/testButtonDataflowRoutes";
 import externalDbConnectionRoutes from "./routes/externalDbConnectionRoutes";
+import externalRestApiConnectionRoutes from "./routes/externalRestApiConnectionRoutes";
 import multiConnectionRoutes from "./routes/multiConnectionRoutes";
 import screenFileRoutes from "./routes/screenFileRoutes";
 //import dbTypeCategoryRoutes from "./routes/dbTypeCategoryRoutes";
@@ -190,6 +191,7 @@ app.use("/api/screen", screenStandardRoutes);
 app.use("/api/data", dataRoutes);
 app.use("/api/test-button-dataflow", testButtonDataflowRoutes);
 app.use("/api/external-db-connections", externalDbConnectionRoutes);
+app.use("/api/external-rest-api-connections", externalRestApiConnectionRoutes);
 app.use("/api/multi-connection", multiConnectionRoutes);
 app.use("/api/screen-files", screenFileRoutes);
 app.use("/api/batch-configs", batchRoutes);

backend-node/src/controllers/flowController.ts

@@ -31,30 +31,41 @@ export class FlowController {
    */
   createFlowDefinition = async (req: Request, res: Response): Promise<void> => {
     try {
-      const { name, description, tableName } = req.body;
+      const { name, description, tableName, dbSourceType, dbConnectionId } =
+        req.body;
       const userId = (req as any).user?.userId || "system";
 
-      if (!name || !tableName) {
+      console.log("🔍 createFlowDefinition called with:", {
+        name,
+        description,
+        tableName,
+        dbSourceType,
+        dbConnectionId,
+      });
+
+      if (!name) {
         res.status(400).json({
           success: false,
-          message: "Name and tableName are required",
+          message: "Name is required",
         });
         return;
       }
 
-      // 테이블 존재 확인
-      const tableExists =
-        await this.flowDefinitionService.checkTableExists(tableName);
-      if (!tableExists) {
-        res.status(400).json({
-          success: false,
-          message: `Table '${tableName}' does not exist`,
-        });
-        return;
+      // 테이블 이름이 제공된 경우에만 존재 확인
+      if (tableName) {
+        const tableExists =
+          await this.flowDefinitionService.checkTableExists(tableName);
+        if (!tableExists) {
+          res.status(400).json({
+            success: false,
+            message: `Table '${tableName}' does not exist`,
+          });
+          return;
+        }
       }
 
       const flowDef = await this.flowDefinitionService.create(
-        { name, description, tableName },
+        { name, description, tableName, dbSourceType, dbConnectionId },
         userId
       );
 
@@ -294,6 +305,13 @@ export class FlowController {
         color,
         positionX,
         positionY,
+        moveType,
+        statusColumn,
+        statusValue,
+        targetTable,
+        fieldMappings,
+        integrationType,
+        integrationConfig,
       } = req.body;
 
       const step = await this.flowStepService.update(id, {
@@ -304,6 +322,13 @@ export class FlowController {
         color,
         positionX,
         positionY,
+        moveType,
+        statusColumn,
+        statusValue,
+        targetTable,
+        fieldMappings,
+        integrationType,
+        integrationConfig,
       });
 
       if (!step) {

backend-node/src/routes/externalRestApiConnectionRoutes.ts

@@ -0,0 +1,252 @@
+import { Router, Request, Response } from "express";
+import {
+  authenticateToken,
+  AuthenticatedRequest,
+} from "../middleware/authMiddleware";
+import { ExternalRestApiConnectionService } from "../services/externalRestApiConnectionService";
+import {
+  ExternalRestApiConnection,
+  ExternalRestApiConnectionFilter,
+  RestApiTestRequest,
+} from "../types/externalRestApiTypes";
+import logger from "../utils/logger";
+
+const router = Router();
+
+/**
+ * GET /api/external-rest-api-connections
+ * REST API 연결 목록 조회
+ */
+router.get(
+  "/",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    try {
+      const filter: ExternalRestApiConnectionFilter = {
+        search: req.query.search as string,
+        auth_type: req.query.auth_type as string,
+        is_active: req.query.is_active as string,
+        company_code: req.query.company_code as string,
+      };
+
+      const result =
+        await ExternalRestApiConnectionService.getConnections(filter);
+
+      return res.status(result.success ? 200 : 400).json(result);
+    } catch (error) {
+      logger.error("REST API 연결 목록 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "서버 내부 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+);
+
+/**
+ * GET /api/external-rest-api-connections/:id
+ * REST API 연결 상세 조회
+ */
+router.get(
+  "/:id",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    try {
+      const id = parseInt(req.params.id);
+
+      if (isNaN(id)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 ID입니다.",
+        });
+      }
+
+      const result =
+        await ExternalRestApiConnectionService.getConnectionById(id);
+
+      return res.status(result.success ? 200 : 404).json(result);
+    } catch (error) {
+      logger.error("REST API 연결 상세 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "서버 내부 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+);
+
+/**
+ * POST /api/external-rest-api-connections
+ * REST API 연결 생성
+ */
+router.post(
+  "/",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    try {
+      const data: ExternalRestApiConnection = {
+        ...req.body,
+        created_by: req.user?.userId || "system",
+      };
+
+      const result =
+        await ExternalRestApiConnectionService.createConnection(data);
+
+      return res.status(result.success ? 201 : 400).json(result);
+    } catch (error) {
+      logger.error("REST API 연결 생성 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "서버 내부 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+);
+
+/**
+ * PUT /api/external-rest-api-connections/:id
+ * REST API 연결 수정
+ */
+router.put(
+  "/:id",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    try {
+      const id = parseInt(req.params.id);
+
+      if (isNaN(id)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 ID입니다.",
+        });
+      }
+
+      const data: Partial<ExternalRestApiConnection> = {
+        ...req.body,
+        updated_by: req.user?.userId || "system",
+      };
+
+      const result = await ExternalRestApiConnectionService.updateConnection(
+        id,
+        data
+      );
+
+      return res.status(result.success ? 200 : 400).json(result);
+    } catch (error) {
+      logger.error("REST API 연결 수정 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "서버 내부 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+);
+
+/**
+ * DELETE /api/external-rest-api-connections/:id
+ * REST API 연결 삭제
+ */
+router.delete(
+  "/:id",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    try {
+      const id = parseInt(req.params.id);
+
+      if (isNaN(id)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 ID입니다.",
+        });
+      }
+
+      const result =
+        await ExternalRestApiConnectionService.deleteConnection(id);
+
+      return res.status(result.success ? 200 : 404).json(result);
+    } catch (error) {
+      logger.error("REST API 연결 삭제 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "서버 내부 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+);
+
+/**
+ * POST /api/external-rest-api-connections/test
+ * REST API 연결 테스트 (테스트 데이터 기반)
+ */
+router.post(
+  "/test",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    try {
+      const testRequest: RestApiTestRequest = req.body;
+
+      if (!testRequest.base_url) {
+        return res.status(400).json({
+          success: false,
+          message: "기본 URL은 필수입니다.",
+        });
+      }
+
+      const result =
+        await ExternalRestApiConnectionService.testConnection(testRequest);
+
+      return res.status(200).json(result);
+    } catch (error) {
+      logger.error("REST API 연결 테스트 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "서버 내부 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+);
+
+/**
+ * POST /api/external-rest-api-connections/:id/test
+ * REST API 연결 테스트 (ID 기반)
+ */
+router.post(
+  "/:id/test",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    try {
+      const id = parseInt(req.params.id);
+
+      if (isNaN(id)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 ID입니다.",
+        });
+      }
+
+      const endpoint = req.body.endpoint as string | undefined;
+
+      const result = await ExternalRestApiConnectionService.testConnectionById(
+        id,
+        endpoint
+      );
+
+      return res.status(200).json(result);
+    } catch (error) {
+      logger.error("REST API 연결 테스트 (ID) 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "서버 내부 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+);
+
+export default router;

backend-node/src/routes/flowRoutes.ts

@@ -4,6 +4,7 @@
 
 import { Router } from "express";
 import { FlowController } from "../controllers/flowController";
+import { authenticateToken } from "../middleware/authMiddleware";
 
 const router = Router();
 const flowController = new FlowController();
@@ -32,8 +33,8 @@ router.get("/:flowId/step/:stepId/list", flowController.getStepDataList);
 router.get("/:flowId/steps/counts", flowController.getAllStepCounts);
 
 // ==================== 데이터 이동 ====================
-router.post("/move", flowController.moveData);
-router.post("/move-batch", flowController.moveBatchData);
+router.post("/move", authenticateToken, flowController.moveData);
+router.post("/move-batch", authenticateToken, flowController.moveBatchData);
 
 // ==================== 오딧 로그 ====================
 router.get("/audit/:flowId/:recordId", flowController.getAuditLogs);

backend-node/src/services/dbQueryBuilder.ts

@@ -0,0 +1,230 @@
+/**
+ * 데이터베이스별 쿼리 빌더
+ * PostgreSQL, MySQL/MariaDB, MSSQL, Oracle 지원
+ */
+
+export type DbType = "postgresql" | "mysql" | "mariadb" | "mssql" | "oracle";
+
+/**
+ * DB별 파라미터 플레이스홀더 생성
+ */
+export function getPlaceholder(dbType: string, index: number): string {
+  const normalizedType = dbType.toLowerCase();
+
+  switch (normalizedType) {
+    case "postgresql":
+      return `$${index}`;
+
+    case "mysql":
+    case "mariadb":
+      return "?";
+
+    case "mssql":
+      return `@p${index}`;
+
+    case "oracle":
+      return `:${index}`;
+
+    default:
+      // 기본값은 PostgreSQL
+      return `$${index}`;
+  }
+}
+
+/**
+ * UPDATE 쿼리 생성
+ */
+export function buildUpdateQuery(
+  dbType: string,
+  tableName: string,
+  updates: { column: string; value: any }[],
+  whereColumn: string = "id"
+): { query: string; values: any[] } {
+  const normalizedType = dbType.toLowerCase();
+  const values: any[] = [];
+
+  // SET 절 생성
+  const setClause = updates
+    .map((update, index) => {
+      values.push(update.value);
+      const placeholder = getPlaceholder(normalizedType, values.length);
+      return `${update.column} = ${placeholder}`;
+    })
+    .join(", ");
+
+  // WHERE 절 생성
+  values.push(undefined); // whereValue는 나중에 설정
+  const wherePlaceholder = getPlaceholder(normalizedType, values.length);
+
+  // updated_at 처리 (DB별 NOW() 함수)
+  let updatedAtExpr = "NOW()";
+  if (normalizedType === "mssql") {
+    updatedAtExpr = "GETDATE()";
+  } else if (normalizedType === "oracle") {
+    updatedAtExpr = "SYSDATE";
+  }
+
+  const query = `
+    UPDATE ${tableName}
+    SET ${setClause}, updated_at = ${updatedAtExpr}
+    WHERE ${whereColumn} = ${wherePlaceholder}
+  `;
+
+  return { query, values };
+}
+
+/**
+ * INSERT 쿼리 생성
+ */
+export function buildInsertQuery(
+  dbType: string,
+  tableName: string,
+  data: Record<string, any>
+): { query: string; values: any[]; returningClause: string } {
+  const normalizedType = dbType.toLowerCase();
+  const columns = Object.keys(data);
+  const values = Object.values(data);
+
+  // 플레이스홀더 생성
+  const placeholders = columns
+    .map((_, index) => getPlaceholder(normalizedType, index + 1))
+    .join(", ");
+
+  let query = `
+    INSERT INTO ${tableName} (${columns.join(", ")})
+    VALUES (${placeholders})
+  `;
+
+  // RETURNING/OUTPUT 절 추가 (DB별로 다름)
+  let returningClause = "";
+  if (normalizedType === "postgresql") {
+    query += " RETURNING id";
+    returningClause = "RETURNING id";
+  } else if (normalizedType === "mssql") {
+    // MSSQL은 OUTPUT 절을 INSERT와 VALUES 사이에
+    const insertIndex = query.indexOf("VALUES");
+    query =
+      query.substring(0, insertIndex) +
+      "OUTPUT INSERTED.id " +
+      query.substring(insertIndex);
+    returningClause = "OUTPUT INSERTED.id";
+  } else if (normalizedType === "oracle") {
+    query += " RETURNING id INTO :out_id";
+    returningClause = "RETURNING id INTO :out_id";
+  }
+  // MySQL/MariaDB는 RETURNING 없음, LAST_INSERT_ID() 사용
+
+  return { query, values, returningClause };
+}
+
+/**
+ * SELECT 쿼리 생성
+ */
+export function buildSelectQuery(
+  dbType: string,
+  tableName: string,
+  whereColumn: string = "id"
+): { query: string; placeholder: string } {
+  const normalizedType = dbType.toLowerCase();
+  const placeholder = getPlaceholder(normalizedType, 1);
+
+  const query = `SELECT * FROM ${tableName} WHERE ${whereColumn} = ${placeholder}`;
+
+  return { query, placeholder };
+}
+
+/**
+ * LIMIT/OFFSET 쿼리 생성 (페이징)
+ */
+export function buildPaginationClause(
+  dbType: string,
+  limit?: number,
+  offset?: number
+): string {
+  const normalizedType = dbType.toLowerCase();
+
+  if (!limit) {
+    return "";
+  }
+
+  if (
+    normalizedType === "postgresql" ||
+    normalizedType === "mysql" ||
+    normalizedType === "mariadb"
+  ) {
+    // PostgreSQL, MySQL, MariaDB: LIMIT ... OFFSET ...
+    let clause = ` LIMIT ${limit}`;
+    if (offset) {
+      clause += ` OFFSET ${offset}`;
+    }
+    return clause;
+  } else if (normalizedType === "mssql") {
+    // MSSQL: OFFSET ... ROWS FETCH NEXT ... ROWS ONLY
+    if (offset) {
+      return ` OFFSET ${offset} ROWS FETCH NEXT ${limit} ROWS ONLY`;
+    } else {
+      return ` OFFSET 0 ROWS FETCH NEXT ${limit} ROWS ONLY`;
+    }
+  } else if (normalizedType === "oracle") {
+    // Oracle: ROWNUM 또는 FETCH FIRST (12c+)
+    if (offset) {
+      return ` OFFSET ${offset} ROWS FETCH NEXT ${limit} ROWS ONLY`;
+    } else {
+      return ` FETCH FIRST ${limit} ROWS ONLY`;
+    }
+  }
+
+  return "";
+}
+
+/**
+ * 트랜잭션 시작
+ */
+export function getBeginTransactionQuery(dbType: string): string {
+  const normalizedType = dbType.toLowerCase();
+
+  if (normalizedType === "mssql") {
+    return "BEGIN TRANSACTION";
+  }
+
+  return "BEGIN";
+}
+
+/**
+ * 트랜잭션 커밋
+ */
+export function getCommitQuery(dbType: string): string {
+  return "COMMIT";
+}
+
+/**
+ * 트랜잭션 롤백
+ */
+export function getRollbackQuery(dbType: string): string {
+  return "ROLLBACK";
+}
+
+/**
+ * DB 연결 테스트 쿼리
+ */
+export function getConnectionTestQuery(dbType: string): string {
+  const normalizedType = dbType.toLowerCase();
+
+  switch (normalizedType) {
+    case "postgresql":
+      return "SELECT 1";
+
+    case "mysql":
+    case "mariadb":
+      return "SELECT 1";
+
+    case "mssql":
+      return "SELECT 1";
+
+    case "oracle":
+      return "SELECT 1 FROM DUAL";
+
+    default:
+      return "SELECT 1";
+  }
+}

backend-node/src/services/externalDbHelper.ts

@@ -0,0 +1,467 @@
+/**
+ * 외부 DB 연결 헬퍼
+ * 플로우 데이터 이동 시 외부 DB 연결 관리
+ * PostgreSQL, MySQL/MariaDB, MSSQL, Oracle 지원
+ */
+
+import { Pool as PgPool } from "pg";
+import * as mysql from "mysql2/promise";
+import db from "../database/db";
+import { PasswordEncryption } from "../utils/passwordEncryption";
+import {
+  getConnectionTestQuery,
+  getPlaceholder,
+  getBeginTransactionQuery,
+  getCommitQuery,
+  getRollbackQuery,
+} from "./dbQueryBuilder";
+
+interface ExternalDbConnection {
+  id: number;
+  connectionName: string;
+  dbType: string;
+  host: string;
+  port: number;
+  database: string;
+  username: string;
+  password: string;
+  isActive: boolean;
+}
+
+// 외부 DB 연결 풀 캐시 (타입별로 다른 풀 객체)
+const connectionPools = new Map<number, any>();
+
+/**
+ * 외부 DB 연결 정보 조회
+ */
+async function getExternalConnection(
+  connectionId: number
+): Promise<ExternalDbConnection | null> {
+  const query = `SELECT * FROM external_db_connections WHERE id = $1 AND is_active = 'Y'`;
+
+  const result = await db.query(query, [connectionId]);
+
+  if (result.length === 0) {
+    return null;
+  }
+
+  const row = result[0];
+
+  // 비밀번호 복호화 (암호화된 비밀번호는 password 컬럼에 저장됨)
+  let decryptedPassword = "";
+  try {
+    decryptedPassword = PasswordEncryption.decrypt(row.password);
+  } catch (error) {
+    console.error(`비밀번호 복호화 실패 (ID: ${connectionId}):`, error);
+    // 복호화 실패 시 원본 비밀번호 사용 (fallback)
+    decryptedPassword = row.password;
+  }
+
+  return {
+    id: row.id,
+    connectionName: row.connection_name,
+    dbType: row.db_type,
+    host: row.host,
+    port: row.port,
+    database: row.database_name,
+    username: row.username,
+    password: decryptedPassword,
+    isActive: row.is_active,
+  };
+}
+
+/**
+ * 외부 DB 연결 풀 생성 또는 재사용
+ */
+export async function getExternalPool(connectionId: number): Promise<any> {
+  // 캐시된 연결 풀 확인
+  if (connectionPools.has(connectionId)) {
+    const poolInfo = connectionPools.get(connectionId)!;
+    const connection = await getExternalConnection(connectionId);
+
+    // 연결이 유효한지 확인
+    try {
+      const testQuery = getConnectionTestQuery(connection!.dbType);
+      await executePoolQuery(poolInfo.pool, connection!.dbType, testQuery, []);
+      return poolInfo;
+    } catch (error) {
+      console.warn(
+        `캐시된 외부 DB 연결 풀 무효화 (ID: ${connectionId}), 재생성합니다.`
+      );
+      connectionPools.delete(connectionId);
+      await closePool(poolInfo.pool, connection!.dbType);
+    }
+  }
+
+  // 새로운 연결 풀 생성
+  const connection = await getExternalConnection(connectionId);
+
+  if (!connection) {
+    throw new Error(
+      `외부 DB 연결 정보를 찾을 수 없습니다 (ID: ${connectionId})`
+    );
+  }
+
+  const dbType = connection.dbType.toLowerCase();
+  let pool: any;
+
+  try {
+    switch (dbType) {
+      case "postgresql":
+        pool = await createPostgreSQLPool(connection);
+        break;
+
+      case "mysql":
+      case "mariadb":
+        pool = await createMySQLPool(connection);
+        break;
+
+      case "mssql":
+        pool = await createMSSQLPool(connection);
+        break;
+
+      case "oracle":
+        pool = await createOraclePool(connection);
+        break;
+
+      default:
+        throw new Error(`지원하지 않는 DB 타입입니다: ${connection.dbType}`);
+    }
+
+    // 연결 테스트
+    const testQuery = getConnectionTestQuery(dbType);
+    await executePoolQuery(pool, dbType, testQuery, []);
+
+    console.log(
+      `✅ 외부 DB 연결 풀 생성 성공 (ID: ${connectionId}, ${connection.connectionName}, ${connection.dbType})`
+    );
+
+    // 캐시에 저장 (dbType 정보 포함)
+    const poolInfo = { pool, dbType };
+    connectionPools.set(connectionId, poolInfo);
+
+    return poolInfo;
+  } catch (error) {
+    if (pool) {
+      await closePool(pool, dbType);
+    }
+    throw new Error(
+      `외부 DB 연결 실패 (${connection.connectionName}, ${connection.dbType}): ${error}`
+    );
+  }
+}
+
+/**
+ * PostgreSQL 연결 풀 생성
+ */
+async function createPostgreSQLPool(
+  connection: ExternalDbConnection
+): Promise<PgPool> {
+  return new PgPool({
+    host: connection.host,
+    port: connection.port,
+    database: connection.database,
+    user: connection.username,
+    password: connection.password,
+    max: 5,
+    idleTimeoutMillis: 30000,
+    connectionTimeoutMillis: 5000,
+  });
+}
+
+/**
+ * MySQL/MariaDB 연결 풀 생성
+ */
+async function createMySQLPool(
+  connection: ExternalDbConnection
+): Promise<mysql.Pool> {
+  return mysql.createPool({
+    host: connection.host,
+    port: connection.port,
+    database: connection.database,
+    user: connection.username,
+    password: connection.password,
+    connectionLimit: 5,
+    waitForConnections: true,
+    queueLimit: 0,
+  });
+}
+
+/**
+ * MSSQL 연결 풀 생성
+ */
+async function createMSSQLPool(connection: ExternalDbConnection): Promise<any> {
+  // mssql 패키지를 동적으로 import (설치되어 있는 경우만)
+  try {
+    const sql = require("mssql");
+    const config = {
+      user: connection.username,
+      password: connection.password,
+      server: connection.host,
+      port: connection.port,
+      database: connection.database,
+      options: {
+        encrypt: true,
+        trustServerCertificate: true,
+        enableArithAbort: true,
+      },
+      pool: {
+        max: 5,
+        min: 0,
+        idleTimeoutMillis: 30000,
+      },
+    };
+
+    const pool = await sql.connect(config);
+    return pool;
+  } catch (error) {
+    throw new Error(
+      `MSSQL 연결 실패: mssql 패키지가 설치되어 있는지 확인하세요. (${error})`
+    );
+  }
+}
+
+/**
+ * Oracle 연결 풀 생성
+ */
+async function createOraclePool(
+  connection: ExternalDbConnection
+): Promise<any> {
+  try {
+    // oracledb를 동적으로 import
+    const oracledb = require("oracledb");
+
+    // Oracle 클라이언트 초기화 (최초 1회만)
+    if (!oracledb.oracleClientVersion) {
+      // Instant Client 경로 설정 (환경변수로 지정 가능)
+      const instantClientPath = process.env.ORACLE_INSTANT_CLIENT_PATH;
+      if (instantClientPath) {
+        oracledb.initOracleClient({ libDir: instantClientPath });
+      }
+    }
+
+    // 연결 문자열 생성
+    const connectString = connection.database.includes("/")
+      ? connection.database // 이미 전체 연결 문자열인 경우
+      : `${connection.host}:${connection.port}/${connection.database}`;
+
+    const pool = await oracledb.createPool({
+      user: connection.username,
+      password: connection.password,
+      connectString: connectString,
+      poolMin: 1,
+      poolMax: 5,
+      poolIncrement: 1,
+      poolTimeout: 60, // 60초 후 유휴 연결 해제
+      queueTimeout: 5000, // 연결 대기 타임아웃 5초
+      enableStatistics: true,
+    });
+
+    return pool;
+  } catch (error: any) {
+    throw new Error(
+      `Oracle 연결 실패: ${error.message}. oracledb 패키지와 Oracle Instant Client가 설치되어 있는지 확인하세요.`
+    );
+  }
+}
+
+/**
+ * 풀에서 쿼리 실행 (DB 타입별 처리)
+ */
+async function executePoolQuery(
+  pool: any,
+  dbType: string,
+  query: string,
+  params: any[]
+): Promise<any> {
+  const normalizedType = dbType.toLowerCase();
+
+  switch (normalizedType) {
+    case "postgresql": {
+      const result = await pool.query(query, params);
+      return { rows: result.rows, rowCount: result.rowCount };
+    }
+
+    case "mysql":
+    case "mariadb": {
+      const [rows] = await pool.query(query, params);
+      return {
+        rows: Array.isArray(rows) ? rows : [rows],
+        rowCount: rows.length,
+      };
+    }
+
+    case "mssql": {
+      const request = pool.request();
+      // MSSQL은 명명된 파라미터 사용
+      params.forEach((param, index) => {
+        request.input(`p${index + 1}`, param);
+      });
+      const result = await request.query(query);
+      return { rows: result.recordset, rowCount: result.rowCount };
+    }
+
+    case "oracle": {
+      const oracledb = require("oracledb");
+      const connection = await pool.getConnection();
+      try {
+        // Oracle은 :1, :2 형식의 바인드 변수 사용
+        const result = await connection.execute(query, params, {
+          autoCommit: false, // 트랜잭션 관리를 위해 false
+          outFormat: oracledb.OUT_FORMAT_OBJECT, // 객체 형식으로 반환
+        });
+        return { rows: result.rows || [], rowCount: result.rowCount || 0 };
+      } finally {
+        await connection.close();
+      }
+    }
+
+    default:
+      throw new Error(`지원하지 않는 DB 타입: ${dbType}`);
+  }
+}
+
+/**
+ * 연결 풀 종료 (DB 타입별 처리)
+ */
+async function closePool(pool: any, dbType: string): Promise<void> {
+  const normalizedType = dbType.toLowerCase();
+
+  try {
+    switch (normalizedType) {
+      case "postgresql":
+      case "mysql":
+      case "mariadb":
+        await pool.end();
+        break;
+
+      case "mssql":
+      case "oracle":
+        await pool.close();
+        break;
+    }
+  } catch (error) {
+    console.error(`풀 종료 오류 (${dbType}):`, error);
+  }
+}
+
+/**
+ * 외부 DB 쿼리 실행
+ */
+export async function executeExternalQuery(
+  connectionId: number,
+  query: string,
+  params: any[] = []
+): Promise<any> {
+  const poolInfo = await getExternalPool(connectionId);
+  return await executePoolQuery(poolInfo.pool, poolInfo.dbType, query, params);
+}
+
+/**
+ * 외부 DB 트랜잭션 실행
+ */
+export async function executeExternalTransaction(
+  connectionId: number,
+  callback: (client: any, dbType: string) => Promise<any>
+): Promise<any> {
+  const poolInfo = await getExternalPool(connectionId);
+  const { pool, dbType } = poolInfo;
+  const normalizedType = dbType.toLowerCase();
+
+  let client: any;
+
+  try {
+    switch (normalizedType) {
+      case "postgresql": {
+        client = await pool.connect();
+        await client.query(getBeginTransactionQuery(dbType));
+        const result = await callback(client, dbType);
+        await client.query(getCommitQuery(dbType));
+        return result;
+      }
+
+      case "mysql":
+      case "mariadb": {
+        client = await pool.getConnection();
+        await client.beginTransaction();
+        const result = await callback(client, dbType);
+        await client.commit();
+        return result;
+      }
+
+      case "mssql": {
+        const transaction = new pool.constructor.Transaction(pool);
+        await transaction.begin();
+        client = transaction;
+        const result = await callback(client, dbType);
+        await transaction.commit();
+        return result;
+      }
+
+      case "oracle": {
+        client = await pool.getConnection();
+        // Oracle은 명시적 BEGIN 없이 트랜잭션 시작
+        const result = await callback(client, dbType);
+        // 명시적 커밋
+        await client.commit();
+        return result;
+      }
+
+      default:
+        throw new Error(`지원하지 않는 DB 타입: ${dbType}`);
+    }
+  } catch (error) {
+    console.error(`외부 DB 트랜잭션 오류 (ID: ${connectionId}):`, error);
+
+    // 롤백 시도
+    if (client) {
+      try {
+        switch (normalizedType) {
+          case "postgresql":
+            await client.query(getRollbackQuery(dbType));
+            break;
+
+          case "mysql":
+          case "mariadb":
+            await client.rollback();
+            break;
+
+          case "mssql":
+          case "oracle":
+            await client.rollback();
+            break;
+        }
+      } catch (rollbackError) {
+        console.error("트랜잭션 롤백 오류:", rollbackError);
+      }
+    }
+
+    throw error;
+  } finally {
+    // 연결 해제
+    if (client) {
+      try {
+        switch (normalizedType) {
+          case "postgresql":
+            client.release();
+            break;
+
+          case "mysql":
+          case "mariadb":
+            client.release();
+            break;
+
+          case "oracle":
+            await client.close();
+            break;
+
+          case "mssql":
+            // MSSQL Transaction 객체는 자동으로 정리됨
+            break;
+        }
+      } catch (releaseError) {
+        console.error("클라이언트 해제 오류:", releaseError);
+      }
+    }
+  }
+}

backend-node/src/services/externalRestApiConnectionService.ts

@@ -0,0 +1,669 @@
+import { Pool, QueryResult } from "pg";
+import { getPool } from "../database/db";
+import logger from "../utils/logger";
+import {
+  ExternalRestApiConnection,
+  ExternalRestApiConnectionFilter,
+  RestApiTestRequest,
+  RestApiTestResult,
+  AuthType,
+} from "../types/externalRestApiTypes";
+import { ApiResponse } from "../types/common";
+import crypto from "crypto";
+
+const pool = getPool();
+
+// 암호화 설정
+const ENCRYPTION_KEY =
+  process.env.DB_PASSWORD_SECRET || "default-secret-key-change-in-production";
+const ALGORITHM = "aes-256-gcm";
+
+export class ExternalRestApiConnectionService {
+  /**
+   * REST API 연결 목록 조회
+   */
+  static async getConnections(
+    filter: ExternalRestApiConnectionFilter = {}
+  ): Promise<ApiResponse<ExternalRestApiConnection[]>> {
+    try {
+      let query = `
+        SELECT 
+          id, connection_name, description, base_url, default_headers,
+          auth_type, auth_config, timeout, retry_count, retry_delay,
+          company_code, is_active, created_date, created_by,
+          updated_date, updated_by, last_test_date, last_test_result, last_test_message
+        FROM external_rest_api_connections
+        WHERE 1=1
+      `;
+
+      const params: any[] = [];
+      let paramIndex = 1;
+
+      // 회사 코드 필터
+      if (filter.company_code) {
+        query += ` AND company_code = $${paramIndex}`;
+        params.push(filter.company_code);
+        paramIndex++;
+      }
+
+      // 활성 상태 필터
+      if (filter.is_active) {
+        query += ` AND is_active = $${paramIndex}`;
+        params.push(filter.is_active);
+        paramIndex++;
+      }
+
+      // 인증 타입 필터
+      if (filter.auth_type) {
+        query += ` AND auth_type = $${paramIndex}`;
+        params.push(filter.auth_type);
+        paramIndex++;
+      }
+
+      // 검색어 필터 (연결명, 설명, URL)
+      if (filter.search) {
+        query += ` AND (
+          connection_name ILIKE $${paramIndex} OR 
+          description ILIKE $${paramIndex} OR 
+          base_url ILIKE $${paramIndex}
+        )`;
+        params.push(`%${filter.search}%`);
+        paramIndex++;
+      }
+
+      query += ` ORDER BY created_date DESC`;
+
+      const result: QueryResult<any> = await pool.query(query, params);
+
+      // 민감 정보 복호화
+      const connections = result.rows.map((row: any) => ({
+        ...row,
+        auth_config: row.auth_config
+          ? this.decryptSensitiveData(row.auth_config)
+          : null,
+      }));
+
+      return {
+        success: true,
+        data: connections,
+        message: `${connections.length}개의 연결을 조회했습니다.`,
+      };
+    } catch (error) {
+      logger.error("REST API 연결 목록 조회 오류:", error);
+      return {
+        success: false,
+        message: "연결 목록 조회에 실패했습니다.",
+        error: {
+          code: "FETCH_ERROR",
+          details: error instanceof Error ? error.message : "알 수 없는 오류",
+        },
+      };
+    }
+  }
+
+  /**
+   * REST API 연결 상세 조회
+   */
+  static async getConnectionById(
+    id: number
+  ): Promise<ApiResponse<ExternalRestApiConnection>> {
+    try {
+      const query = `
+        SELECT 
+          id, connection_name, description, base_url, default_headers,
+          auth_type, auth_config, timeout, retry_count, retry_delay,
+          company_code, is_active, created_date, created_by,
+          updated_date, updated_by, last_test_date, last_test_result, last_test_message
+        FROM external_rest_api_connections
+        WHERE id = $1
+      `;
+
+      const result: QueryResult<any> = await pool.query(query, [id]);
+
+      if (result.rows.length === 0) {
+        return {
+          success: false,
+          message: "연결을 찾을 수 없습니다.",
+        };
+      }
+
+      const connection = result.rows[0];
+      connection.auth_config = connection.auth_config
+        ? this.decryptSensitiveData(connection.auth_config)
+        : null;
+
+      return {
+        success: true,
+        data: connection,
+        message: "연결을 조회했습니다.",
+      };
+    } catch (error) {
+      logger.error("REST API 연결 상세 조회 오류:", error);
+      return {
+        success: false,
+        message: "연결 조회에 실패했습니다.",
+        error: {
+          code: "FETCH_ERROR",
+          details: error instanceof Error ? error.message : "알 수 없는 오류",
+        },
+      };
+    }
+  }
+
+  /**
+   * REST API 연결 생성
+   */
+  static async createConnection(
+    data: ExternalRestApiConnection
+  ): Promise<ApiResponse<ExternalRestApiConnection>> {
+    try {
+      // 유효성 검증
+      this.validateConnectionData(data);
+
+      // 민감 정보 암호화
+      const encryptedAuthConfig = data.auth_config
+        ? this.encryptSensitiveData(data.auth_config)
+        : null;
+
+      const query = `
+        INSERT INTO external_rest_api_connections (
+          connection_name, description, base_url, default_headers,
+          auth_type, auth_config, timeout, retry_count, retry_delay,
+          company_code, is_active, created_by
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
+        RETURNING *
+      `;
+
+      const params = [
+        data.connection_name,
+        data.description || null,
+        data.base_url,
+        JSON.stringify(data.default_headers || {}),
+        data.auth_type,
+        encryptedAuthConfig ? JSON.stringify(encryptedAuthConfig) : null,
+        data.timeout || 30000,
+        data.retry_count || 0,
+        data.retry_delay || 1000,
+        data.company_code || "*",
+        data.is_active || "Y",
+        data.created_by || "system",
+      ];
+
+      const result: QueryResult<any> = await pool.query(query, params);
+
+      logger.info(`REST API 연결 생성 성공: ${data.connection_name}`);
+
+      return {
+        success: true,
+        data: result.rows[0],
+        message: "연결이 생성되었습니다.",
+      };
+    } catch (error: any) {
+      logger.error("REST API 연결 생성 오류:", error);
+
+      // 중복 키 오류 처리
+      if (error.code === "23505") {
+        return {
+          success: false,
+          message: "이미 존재하는 연결명입니다.",
+        };
+      }
+
+      return {
+        success: false,
+        message: "연결 생성에 실패했습니다.",
+        error: {
+          code: "CREATE_ERROR",
+          details: error instanceof Error ? error.message : "알 수 없는 오류",
+        },
+      };
+    }
+  }
+
+  /**
+   * REST API 연결 수정
+   */
+  static async updateConnection(
+    id: number,
+    data: Partial<ExternalRestApiConnection>
+  ): Promise<ApiResponse<ExternalRestApiConnection>> {
+    try {
+      // 기존 연결 확인
+      const existing = await this.getConnectionById(id);
+      if (!existing.success) {
+        return existing;
+      }
+
+      // 민감 정보 암호화
+      const encryptedAuthConfig = data.auth_config
+        ? this.encryptSensitiveData(data.auth_config)
+        : undefined;
+
+      const updateFields: string[] = [];
+      const params: any[] = [];
+      let paramIndex = 1;
+
+      if (data.connection_name !== undefined) {
+        updateFields.push(`connection_name = $${paramIndex}`);
+        params.push(data.connection_name);
+        paramIndex++;
+      }
+
+      if (data.description !== undefined) {
+        updateFields.push(`description = $${paramIndex}`);
+        params.push(data.description);
+        paramIndex++;
+      }
+
+      if (data.base_url !== undefined) {
+        updateFields.push(`base_url = $${paramIndex}`);
+        params.push(data.base_url);
+        paramIndex++;
+      }
+
+      if (data.default_headers !== undefined) {
+        updateFields.push(`default_headers = $${paramIndex}`);
+        params.push(JSON.stringify(data.default_headers));
+        paramIndex++;
+      }
+
+      if (data.auth_type !== undefined) {
+        updateFields.push(`auth_type = $${paramIndex}`);
+        params.push(data.auth_type);
+        paramIndex++;
+      }
+
+      if (encryptedAuthConfig !== undefined) {
+        updateFields.push(`auth_config = $${paramIndex}`);
+        params.push(JSON.stringify(encryptedAuthConfig));
+        paramIndex++;
+      }
+
+      if (data.timeout !== undefined) {
+        updateFields.push(`timeout = $${paramIndex}`);
+        params.push(data.timeout);
+        paramIndex++;
+      }
+
+      if (data.retry_count !== undefined) {
+        updateFields.push(`retry_count = $${paramIndex}`);
+        params.push(data.retry_count);
+        paramIndex++;
+      }
+
+      if (data.retry_delay !== undefined) {
+        updateFields.push(`retry_delay = $${paramIndex}`);
+        params.push(data.retry_delay);
+        paramIndex++;
+      }
+
+      if (data.is_active !== undefined) {
+        updateFields.push(`is_active = $${paramIndex}`);
+        params.push(data.is_active);
+        paramIndex++;
+      }
+
+      if (data.updated_by !== undefined) {
+        updateFields.push(`updated_by = $${paramIndex}`);
+        params.push(data.updated_by);
+        paramIndex++;
+      }
+
+      updateFields.push(`updated_date = NOW()`);
+
+      params.push(id);
+
+      const query = `
+        UPDATE external_rest_api_connections
+        SET ${updateFields.join(", ")}
+        WHERE id = $${paramIndex}
+        RETURNING *
+      `;
+
+      const result: QueryResult<any> = await pool.query(query, params);
+
+      logger.info(`REST API 연결 수정 성공: ID ${id}`);
+
+      return {
+        success: true,
+        data: result.rows[0],
+        message: "연결이 수정되었습니다.",
+      };
+    } catch (error: any) {
+      logger.error("REST API 연결 수정 오류:", error);
+
+      if (error.code === "23505") {
+        return {
+          success: false,
+          message: "이미 존재하는 연결명입니다.",
+        };
+      }
+
+      return {
+        success: false,
+        message: "연결 수정에 실패했습니다.",
+        error: {
+          code: "UPDATE_ERROR",
+          details: error instanceof Error ? error.message : "알 수 없는 오류",
+        },
+      };
+    }
+  }
+
+  /**
+   * REST API 연결 삭제
+   */
+  static async deleteConnection(id: number): Promise<ApiResponse<void>> {
+    try {
+      const query = `
+        DELETE FROM external_rest_api_connections
+        WHERE id = $1
+        RETURNING connection_name
+      `;
+
+      const result: QueryResult<any> = await pool.query(query, [id]);
+
+      if (result.rows.length === 0) {
+        return {
+          success: false,
+          message: "연결을 찾을 수 없습니다.",
+        };
+      }
+
+      logger.info(`REST API 연결 삭제 성공: ${result.rows[0].connection_name}`);
+
+      return {
+        success: true,
+        message: "연결이 삭제되었습니다.",
+      };
+    } catch (error) {
+      logger.error("REST API 연결 삭제 오류:", error);
+      return {
+        success: false,
+        message: "연결 삭제에 실패했습니다.",
+        error: {
+          code: "DELETE_ERROR",
+          details: error instanceof Error ? error.message : "알 수 없는 오류",
+        },
+      };
+    }
+  }
+
+  /**
+   * REST API 연결 테스트 (테스트 요청 데이터 기반)
+   */
+  static async testConnection(
+    testRequest: RestApiTestRequest
+  ): Promise<RestApiTestResult> {
+    const startTime = Date.now();
+
+    try {
+      // 헤더 구성
+      const headers = { ...testRequest.headers };
+
+      // 인증 헤더 추가
+      if (
+        testRequest.auth_type === "bearer" &&
+        testRequest.auth_config?.token
+      ) {
+        headers["Authorization"] = `Bearer ${testRequest.auth_config.token}`;
+      } else if (testRequest.auth_type === "basic" && testRequest.auth_config) {
+        const credentials = Buffer.from(
+          `${testRequest.auth_config.username}:${testRequest.auth_config.password}`
+        ).toString("base64");
+        headers["Authorization"] = `Basic ${credentials}`;
+      } else if (
+        testRequest.auth_type === "api-key" &&
+        testRequest.auth_config
+      ) {
+        if (testRequest.auth_config.keyLocation === "header") {
+          headers[testRequest.auth_config.keyName] =
+            testRequest.auth_config.keyValue;
+        }
+      }
+
+      // URL 구성
+      let url = testRequest.base_url;
+      if (testRequest.endpoint) {
+        url = testRequest.endpoint.startsWith("/")
+          ? `${testRequest.base_url}${testRequest.endpoint}`
+          : `${testRequest.base_url}/${testRequest.endpoint}`;
+      }
+
+      // API Key가 쿼리에 있는 경우
+      if (
+        testRequest.auth_type === "api-key" &&
+        testRequest.auth_config?.keyLocation === "query" &&
+        testRequest.auth_config?.keyName &&
+        testRequest.auth_config?.keyValue
+      ) {
+        const separator = url.includes("?") ? "&" : "?";
+        url = `${url}${separator}${testRequest.auth_config.keyName}=${testRequest.auth_config.keyValue}`;
+      }
+
+      logger.info(
+        `REST API 연결 테스트: ${testRequest.method || "GET"} ${url}`
+      );
+
+      // HTTP 요청 실행
+      const response = await fetch(url, {
+        method: testRequest.method || "GET",
+        headers,
+        signal: AbortSignal.timeout(testRequest.timeout || 30000),
+      });
+
+      const responseTime = Date.now() - startTime;
+      let responseData = null;
+
+      try {
+        responseData = await response.json();
+      } catch {
+        // JSON 파싱 실패는 무시 (텍스트 응답일 수 있음)
+      }
+
+      return {
+        success: response.ok,
+        message: response.ok
+          ? "연결 성공"
+          : `연결 실패 (${response.status} ${response.statusText})`,
+        response_time: responseTime,
+        status_code: response.status,
+        response_data: responseData,
+      };
+    } catch (error) {
+      const responseTime = Date.now() - startTime;
+
+      logger.error("REST API 연결 테스트 오류:", error);
+
+      return {
+        success: false,
+        message: "연결 실패",
+        response_time: responseTime,
+        error_details:
+          error instanceof Error ? error.message : "알 수 없는 오류",
+      };
+    }
+  }
+
+  /**
+   * REST API 연결 테스트 (ID 기반)
+   */
+  static async testConnectionById(
+    id: number,
+    endpoint?: string
+  ): Promise<RestApiTestResult> {
+    try {
+      const connectionResult = await this.getConnectionById(id);
+
+      if (!connectionResult.success || !connectionResult.data) {
+        return {
+          success: false,
+          message: "연결을 찾을 수 없습니다.",
+        };
+      }
+
+      const connection = connectionResult.data;
+
+      const testRequest: RestApiTestRequest = {
+        id: connection.id,
+        base_url: connection.base_url,
+        endpoint,
+        headers: connection.default_headers,
+        auth_type: connection.auth_type,
+        auth_config: connection.auth_config,
+        timeout: connection.timeout,
+      };
+
+      const result = await this.testConnection(testRequest);
+
+      // 테스트 결과 저장
+      await pool.query(
+        `
+        UPDATE external_rest_api_connections
+        SET 
+          last_test_date = NOW(),
+          last_test_result = $1,
+          last_test_message = $2
+        WHERE id = $3
+      `,
+        [result.success ? "Y" : "N", result.message, id]
+      );
+
+      return result;
+    } catch (error) {
+      logger.error("REST API 연결 테스트 (ID) 오류:", error);
+      return {
+        success: false,
+        message: "연결 테스트에 실패했습니다.",
+        error_details:
+          error instanceof Error ? error.message : "알 수 없는 오류",
+      };
+    }
+  }
+
+  /**
+   * 민감 정보 암호화
+   */
+  private static encryptSensitiveData(authConfig: any): any {
+    if (!authConfig) return null;
+
+    const encrypted = { ...authConfig };
+
+    // 암호화 대상 필드
+    if (encrypted.keyValue) {
+      encrypted.keyValue = this.encrypt(encrypted.keyValue);
+    }
+    if (encrypted.token) {
+      encrypted.token = this.encrypt(encrypted.token);
+    }
+    if (encrypted.password) {
+      encrypted.password = this.encrypt(encrypted.password);
+    }
+    if (encrypted.clientSecret) {
+      encrypted.clientSecret = this.encrypt(encrypted.clientSecret);
+    }
+
+    return encrypted;
+  }
+
+  /**
+   * 민감 정보 복호화
+   */
+  private static decryptSensitiveData(authConfig: any): any {
+    if (!authConfig) return null;
+
+    const decrypted = { ...authConfig };
+
+    // 복호화 대상 필드
+    try {
+      if (decrypted.keyValue) {
+        decrypted.keyValue = this.decrypt(decrypted.keyValue);
+      }
+      if (decrypted.token) {
+        decrypted.token = this.decrypt(decrypted.token);
+      }
+      if (decrypted.password) {
+        decrypted.password = this.decrypt(decrypted.password);
+      }
+      if (decrypted.clientSecret) {
+        decrypted.clientSecret = this.decrypt(decrypted.clientSecret);
+      }
+    } catch (error) {
+      logger.warn("민감 정보 복호화 실패 (암호화되지 않은 데이터일 수 있음)");
+    }
+
+    return decrypted;
+  }
+
+  /**
+   * 암호화 헬퍼
+   */
+  private static encrypt(text: string): string {
+    const iv = crypto.randomBytes(16);
+    const key = crypto.scryptSync(ENCRYPTION_KEY, "salt", 32);
+    const cipher = crypto.createCipheriv(ALGORITHM, key, iv);
+
+    let encrypted = cipher.update(text, "utf8", "hex");
+    encrypted += cipher.final("hex");
+
+    const authTag = cipher.getAuthTag();
+
+    return `${iv.toString("hex")}:${authTag.toString("hex")}:${encrypted}`;
+  }
+
+  /**
+   * 복호화 헬퍼
+   */
+  private static decrypt(text: string): string {
+    const parts = text.split(":");
+    if (parts.length !== 3) {
+      // 암호화되지 않은 데이터
+      return text;
+    }
+
+    const iv = Buffer.from(parts[0], "hex");
+    const authTag = Buffer.from(parts[1], "hex");
+    const encryptedText = parts[2];
+
+    const key = crypto.scryptSync(ENCRYPTION_KEY, "salt", 32);
+    const decipher = crypto.createDecipheriv(ALGORITHM, key, iv);
+    decipher.setAuthTag(authTag);
+
+    let decrypted = decipher.update(encryptedText, "hex", "utf8");
+    decrypted += decipher.final("utf8");
+
+    return decrypted;
+  }
+
+  /**
+   * 연결 데이터 유효성 검증
+   */
+  private static validateConnectionData(data: ExternalRestApiConnection): void {
+    if (!data.connection_name || data.connection_name.trim() === "") {
+      throw new Error("연결명은 필수입니다.");
+    }
+
+    if (!data.base_url || data.base_url.trim() === "") {
+      throw new Error("기본 URL은 필수입니다.");
+    }
+
+    // URL 형식 검증
+    try {
+      new URL(data.base_url);
+    } catch {
+      throw new Error("올바른 URL 형식이 아닙니다.");
+    }
+
+    // 인증 타입 검증
+    const validAuthTypes: AuthType[] = [
+      "none",
+      "api-key",
+      "bearer",
+      "basic",
+      "oauth2",
+    ];
+    if (!validAuthTypes.includes(data.auth_type)) {
+      throw new Error("올바르지 않은 인증 타입입니다.");
+    }
+  }
+}

backend-node/src/services/flowDataMoveService.ts

@@ -6,10 +6,25 @@
  */
 
 import db from "../database/db";
-import { FlowAuditLog, FlowIntegrationContext } from "../types/flow";
+import {
+  FlowAuditLog,
+  FlowIntegrationContext,
+  FlowDefinition,
+} from "../types/flow";
 import { FlowDefinitionService } from "./flowDefinitionService";
 import { FlowStepService } from "./flowStepService";
 import { FlowExternalDbIntegrationService } from "./flowExternalDbIntegrationService";
+import {
+  getExternalPool,
+  executeExternalQuery,
+  executeExternalTransaction,
+} from "./externalDbHelper";
+import {
+  getPlaceholder,
+  buildUpdateQuery,
+  buildInsertQuery,
+  buildSelectQuery,
+} from "./dbQueryBuilder";
 
 export class FlowDataMoveService {
   private flowDefinitionService: FlowDefinitionService;
@@ -33,6 +48,28 @@ export class FlowDataMoveService {
     userId: string = "system",
     additionalData?: Record<string, any>
   ): Promise<{ success: boolean; targetDataId?: any; message?: string }> {
+    // 0. 플로우 정의 조회 (DB 소스 확인)
+    const flowDefinition = await this.flowDefinitionService.findById(flowId);
+    if (!flowDefinition) {
+      throw new Error(`플로우를 찾을 수 없습니다 (ID: ${flowId})`);
+    }
+
+    // 외부 DB인 경우 별도 처리
+    if (
+      flowDefinition.dbSourceType === "external" &&
+      flowDefinition.dbConnectionId
+    ) {
+      return await this.moveDataToStepExternal(
+        flowDefinition.dbConnectionId,
+        fromStepId,
+        toStepId,
+        dataId,
+        userId,
+        additionalData
+      );
+    }
+
+    // 내부 DB 처리 (기존 로직)
     return await db.transaction(async (client) => {
       try {
         // 1. 단계 정보 조회
@@ -124,6 +161,28 @@ export class FlowDataMoveService {
         }
 
         // 5. 감사 로그 기록
+        let dbConnectionName = null;
+        if (
+          flowDefinition.dbSourceType === "external" &&
+          flowDefinition.dbConnectionId
+        ) {
+          // 외부 DB인 경우 연결 이름 조회
+          try {
+            const connResult = await client.query(
+              `SELECT connection_name FROM external_db_connections WHERE id = $1`,
+              [flowDefinition.dbConnectionId]
+            );
+            if (connResult.rows && connResult.rows.length > 0) {
+              dbConnectionName = connResult.rows[0].connection_name;
+            }
+          } catch (error) {
+            console.warn("외부 DB 연결 이름 조회 실패:", error);
+          }
+        } else {
+          // 내부 DB인 경우
+          dbConnectionName = "내부 데이터베이스";
+        }
+
         await this.logDataMove(client, {
           flowId,
           fromStepId,
@@ -136,6 +195,11 @@ export class FlowDataMoveService {
           statusFrom: fromStep.statusValue,
           statusTo: toStep.statusValue,
           userId,
+          dbConnectionId:
+            flowDefinition.dbSourceType === "external"
+              ? flowDefinition.dbConnectionId
+              : null,
+          dbConnectionName,
         });
 
         return {
@@ -160,7 +224,14 @@ export class FlowDataMoveService {
     dataId: any,
     additionalData?: Record<string, any>
   ): Promise<void> {
-    const statusColumn = toStep.statusColumn || "flow_status";
+    // 상태 컬럼이 지정되지 않은 경우 에러
+    if (!toStep.statusColumn) {
+      throw new Error(
+        `단계 "${toStep.stepName}"의 상태 컬럼이 지정되지 않았습니다. 플로우 편집 화면에서 "상태 컬럼명"을 설정해주세요.`
+      );
+    }
+
+    const statusColumn = toStep.statusColumn;
     const tableName = fromStep.tableName;
 
     // 추가 필드 업데이트 준비
@@ -317,8 +388,9 @@ export class FlowDataMoveService {
         move_type, source_table, target_table,
         source_data_id, target_data_id,
         status_from, status_to,
-        changed_by, note
-      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
+        changed_by, note,
+        db_connection_id, db_connection_name
+      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
     `;
 
     await client.query(query, [
@@ -334,6 +406,8 @@ export class FlowDataMoveService {
       params.statusTo,
       params.userId,
       params.note || null,
+      params.dbConnectionId || null,
+      params.dbConnectionName || null,
     ]);
   }
 
@@ -408,6 +482,8 @@ export class FlowDataMoveService {
       targetDataId: row.target_data_id,
       statusFrom: row.status_from,
       statusTo: row.status_to,
+      dbConnectionId: row.db_connection_id,
+      dbConnectionName: row.db_connection_name,
     }));
   }
 
@@ -452,6 +528,8 @@ export class FlowDataMoveService {
       targetDataId: row.target_data_id,
       statusFrom: row.status_from,
       statusTo: row.status_to,
+      dbConnectionId: row.db_connection_id,
+      dbConnectionName: row.db_connection_name,
     }));
   }
 
@@ -590,4 +668,324 @@ export class FlowDataMoveService {
       userId,
     ]);
   }
+
+  /**
+   * 외부 DB 데이터 이동 처리
+   */
+  private async moveDataToStepExternal(
+    dbConnectionId: number,
+    fromStepId: number,
+    toStepId: number,
+    dataId: any,
+    userId: string = "system",
+    additionalData?: Record<string, any>
+  ): Promise<{ success: boolean; targetDataId?: any; message?: string }> {
+    return await executeExternalTransaction(
+      dbConnectionId,
+      async (externalClient, dbType) => {
+        try {
+          // 1. 단계 정보 조회 (내부 DB에서)
+          const fromStep = await this.flowStepService.findById(fromStepId);
+          const toStep = await this.flowStepService.findById(toStepId);
+
+          if (!fromStep || !toStep) {
+            throw new Error("유효하지 않은 단계입니다");
+          }
+
+          let targetDataId = dataId;
+          let sourceTable = fromStep.tableName;
+          let targetTable = toStep.tableName || fromStep.tableName;
+
+          // 2. 이동 방식에 따라 처리
+          switch (toStep.moveType || "status") {
+            case "status":
+              // 상태 변경 방식
+              await this.moveByStatusChangeExternal(
+                externalClient,
+                dbType,
+                fromStep,
+                toStep,
+                dataId,
+                additionalData
+              );
+              break;
+
+            case "table":
+              // 테이블 이동 방식
+              targetDataId = await this.moveByTableTransferExternal(
+                externalClient,
+                dbType,
+                fromStep,
+                toStep,
+                dataId,
+                additionalData
+              );
+              targetTable = toStep.targetTable || toStep.tableName;
+              break;
+
+            case "both":
+              // 하이브리드 방식: 둘 다 수행
+              await this.moveByStatusChangeExternal(
+                externalClient,
+                dbType,
+                fromStep,
+                toStep,
+                dataId,
+                additionalData
+              );
+              targetDataId = await this.moveByTableTransferExternal(
+                externalClient,
+                dbType,
+                fromStep,
+                toStep,
+                dataId,
+                additionalData
+              );
+              targetTable = toStep.targetTable || toStep.tableName;
+              break;
+
+            default:
+              throw new Error(
+                `지원하지 않는 이동 방식입니다: ${toStep.moveType}`
+              );
+          }
+
+          // 3. 외부 연동 처리는 생략 (외부 DB 자체가 외부이므로)
+
+          // 4. 외부 DB 연결 이름 조회
+          let dbConnectionName = null;
+          try {
+            const connResult = await db.query(
+              `SELECT connection_name FROM external_db_connections WHERE id = $1`,
+              [dbConnectionId]
+            );
+            if (connResult.length > 0) {
+              dbConnectionName = connResult[0].connection_name;
+            }
+          } catch (error) {
+            console.warn("외부 DB 연결 이름 조회 실패:", error);
+          }
+
+          // 5. 감사 로그 기록 (내부 DB에)
+          // 외부 DB는 내부 DB 트랜잭션 외부이므로 직접 쿼리 실행
+          const auditQuery = `
+            INSERT INTO flow_audit_log (
+              flow_definition_id, from_step_id, to_step_id,
+              move_type, source_table, target_table,
+              source_data_id, target_data_id,
+              status_from, status_to,
+              changed_by, note,
+              db_connection_id, db_connection_name
+            ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
+          `;
+
+          await db.query(auditQuery, [
+            toStep.flowDefinitionId,
+            fromStep.id,
+            toStep.id,
+            toStep.moveType || "status",
+            sourceTable,
+            targetTable,
+            dataId,
+            targetDataId,
+            null, // statusFrom
+            toStep.statusValue || null, // statusTo
+            userId,
+            `외부 DB (${dbType}) 데이터 이동`,
+            dbConnectionId,
+            dbConnectionName,
+          ]);
+
+          return {
+            success: true,
+            targetDataId,
+            message: `데이터 이동이 완료되었습니다 (외부 DB: ${dbType})`,
+          };
+        } catch (error: any) {
+          console.error("외부 DB 데이터 이동 오류:", error);
+          throw error;
+        }
+      }
+    );
+  }
+
+  /**
+   * 외부 DB 상태 변경 방식으로 데이터 이동
+   */
+  private async moveByStatusChangeExternal(
+    externalClient: any,
+    dbType: string,
+    fromStep: any,
+    toStep: any,
+    dataId: any,
+    additionalData?: Record<string, any>
+  ): Promise<void> {
+    // 상태 컬럼이 지정되지 않은 경우 에러
+    if (!toStep.statusColumn) {
+      throw new Error(
+        `단계 "${toStep.stepName}"의 상태 컬럼이 지정되지 않았습니다. 플로우 편집 화면에서 "상태 컬럼명"을 설정해주세요.`
+      );
+    }
+
+    const statusColumn = toStep.statusColumn;
+    const tableName = fromStep.tableName;
+    const normalizedDbType = dbType.toLowerCase();
+
+    // 업데이트할 필드 준비
+    const updateFields: { column: string; value: any }[] = [
+      { column: statusColumn, value: toStep.statusValue },
+    ];
+
+    // 추가 데이터가 있으면 함께 업데이트
+    if (additionalData) {
+      for (const [key, value] of Object.entries(additionalData)) {
+        updateFields.push({ column: key, value });
+      }
+    }
+
+    // DB별 쿼리 생성
+    const { query: updateQuery, values } = buildUpdateQuery(
+      dbType,
+      tableName,
+      updateFields,
+      "id"
+    );
+
+    // WHERE 절 값 설정 (마지막 파라미터)
+    values[values.length - 1] = dataId;
+
+    // 쿼리 실행 (DB 타입별 처리)
+    let result: any;
+    if (normalizedDbType === "postgresql") {
+      result = await externalClient.query(updateQuery, values);
+    } else if (normalizedDbType === "mysql" || normalizedDbType === "mariadb") {
+      [result] = await externalClient.query(updateQuery, values);
+    } else if (normalizedDbType === "mssql") {
+      const request = externalClient.request();
+      values.forEach((val: any, idx: number) => {
+        request.input(`p${idx + 1}`, val);
+      });
+      result = await request.query(updateQuery);
+    } else if (normalizedDbType === "oracle") {
+      result = await externalClient.execute(updateQuery, values, {
+        autoCommit: false,
+      });
+    }
+
+    // 결과 확인
+    const affectedRows =
+      normalizedDbType === "postgresql"
+        ? result.rowCount
+        : normalizedDbType === "mssql"
+          ? result.rowsAffected[0]
+          : normalizedDbType === "oracle"
+            ? result.rowsAffected
+            : result.affectedRows;
+
+    if (affectedRows === 0) {
+      throw new Error(`데이터를 찾을 수 없습니다: ${dataId}`);
+    }
+  }
+
+  /**
+   * 외부 DB 테이블 이동 방식으로 데이터 이동
+   */
+  private async moveByTableTransferExternal(
+    externalClient: any,
+    dbType: string,
+    fromStep: any,
+    toStep: any,
+    dataId: any,
+    additionalData?: Record<string, any>
+  ): Promise<any> {
+    const sourceTable = fromStep.tableName;
+    const targetTable = toStep.targetTable || toStep.tableName;
+    const fieldMappings = toStep.fieldMappings || {};
+    const normalizedDbType = dbType.toLowerCase();
+
+    // 1. 소스 데이터 조회
+    const { query: selectQuery, placeholder } = buildSelectQuery(
+      dbType,
+      sourceTable,
+      "id"
+    );
+
+    let sourceResult: any;
+    if (normalizedDbType === "postgresql") {
+      sourceResult = await externalClient.query(selectQuery, [dataId]);
+    } else if (normalizedDbType === "mysql" || normalizedDbType === "mariadb") {
+      [sourceResult] = await externalClient.query(selectQuery, [dataId]);
+    } else if (normalizedDbType === "mssql") {
+      const request = externalClient.request();
+      request.input("p1", dataId);
+      sourceResult = await request.query(selectQuery);
+      sourceResult = { rows: sourceResult.recordset };
+    } else if (normalizedDbType === "oracle") {
+      sourceResult = await externalClient.execute(selectQuery, [dataId], {
+        autoCommit: false,
+        outFormat: 4001, // oracledb.OUT_FORMAT_OBJECT
+      });
+    }
+
+    const rows = sourceResult.rows || sourceResult;
+    if (!rows || rows.length === 0) {
+      throw new Error(`소스 데이터를 찾을 수 없습니다: ${dataId}`);
+    }
+
+    const sourceData = rows[0];
+
+    // 2. 필드 매핑 적용
+    const targetData: Record<string, any> = {};
+
+    for (const [targetField, sourceField] of Object.entries(fieldMappings)) {
+      const sourceFieldKey = sourceField as string;
+      if (sourceData[sourceFieldKey] !== undefined) {
+        targetData[targetField] = sourceData[sourceFieldKey];
+      }
+    }
+
+    // 추가 데이터 병합
+    if (additionalData) {
+      Object.assign(targetData, additionalData);
+    }
+
+    // 3. 대상 테이블에 삽입
+    const { query: insertQuery, values } = buildInsertQuery(
+      dbType,
+      targetTable,
+      targetData
+    );
+
+    let insertResult: any;
+    let newDataId: any;
+
+    if (normalizedDbType === "postgresql") {
+      insertResult = await externalClient.query(insertQuery, values);
+      newDataId = insertResult.rows[0].id;
+    } else if (normalizedDbType === "mysql" || normalizedDbType === "mariadb") {
+      [insertResult] = await externalClient.query(insertQuery, values);
+      newDataId = insertResult.insertId;
+    } else if (normalizedDbType === "mssql") {
+      const request = externalClient.request();
+      values.forEach((val: any, idx: number) => {
+        request.input(`p${idx + 1}`, val);
+      });
+      insertResult = await request.query(insertQuery);
+      newDataId = insertResult.recordset[0].id;
+    } else if (normalizedDbType === "oracle") {
+      // Oracle RETURNING 절 처리
+      const outBinds: any = { id: { dir: 3003, type: 2001 } }; // OUT, NUMBER
+      insertResult = await externalClient.execute(insertQuery, values, {
+        autoCommit: false,
+        outBinds: outBinds,
+      });
+      newDataId = insertResult.outBinds.id[0];
+    }
+
+    // 4. 필요 시 소스 데이터 삭제 (옵션)
+    // const deletePlaceholder = getPlaceholder(dbType, 1);
+    // await externalClient.query(`DELETE FROM ${sourceTable} WHERE id = ${deletePlaceholder}`, [dataId]);
+
+    return newDataId;
+  }
 }

backend-node/src/services/flowDefinitionService.ts

@@ -17,18 +17,33 @@ export class FlowDefinitionService {
     request: CreateFlowDefinitionRequest,
     userId: string
   ): Promise<FlowDefinition> {
+    console.log("🔥 flowDefinitionService.create called with:", {
+      name: request.name,
+      description: request.description,
+      tableName: request.tableName,
+      dbSourceType: request.dbSourceType,
+      dbConnectionId: request.dbConnectionId,
+      userId,
+    });
+
     const query = `
-      INSERT INTO flow_definition (name, description, table_name, created_by)
-      VALUES ($1, $2, $3, $4)
+      INSERT INTO flow_definition (name, description, table_name, db_source_type, db_connection_id, created_by)
+      VALUES ($1, $2, $3, $4, $5, $6)
       RETURNING *
     `;
 
-    const result = await db.query(query, [
+    const values = [
       request.name,
       request.description || null,
-      request.tableName,
+      request.tableName || null,
+      request.dbSourceType || "internal",
+      request.dbConnectionId || null,
       userId,
-    ]);
+    ];
+
+    console.log("💾 Executing INSERT with values:", values);
+
+    const result = await db.query(query, values);
 
     return this.mapToFlowDefinition(result[0]);
   }
@@ -162,6 +177,8 @@ export class FlowDefinitionService {
       name: row.name,
       description: row.description,
       tableName: row.table_name,
+      dbSourceType: row.db_source_type || "internal",
+      dbConnectionId: row.db_connection_id,
       isActive: row.is_active,
       createdBy: row.created_by,
       createdAt: row.created_at,

backend-node/src/services/flowExecutionService.ts

@@ -8,6 +8,8 @@ import { FlowStepDataCount, FlowStepDataList } from "../types/flow";
 import { FlowDefinitionService } from "./flowDefinitionService";
 import { FlowStepService } from "./flowStepService";
 import { FlowConditionParser } from "./flowConditionParser";
+import { executeExternalQuery } from "./externalDbHelper";
+import { getPlaceholder, buildPaginationClause } from "./dbQueryBuilder";
 
 export class FlowExecutionService {
   private flowDefinitionService: FlowDefinitionService;
@@ -28,6 +30,13 @@ export class FlowExecutionService {
       throw new Error(`Flow definition not found: ${flowId}`);
     }
 
+    console.log("🔍 [getStepDataCount] Flow Definition:", {
+      flowId,
+      dbSourceType: flowDef.dbSourceType,
+      dbConnectionId: flowDef.dbConnectionId,
+      tableName: flowDef.tableName,
+    });
+
     // 2. 플로우 단계 조회
     const step = await this.flowStepService.findById(stepId);
     if (!step) {
@@ -46,11 +55,40 @@ export class FlowExecutionService {
       step.conditionJson
     );
 
-    // 5. 카운트 쿼리 실행
+    // 5. 카운트 쿼리 실행 (내부 또는 외부 DB)
     const query = `SELECT COUNT(*) as count FROM ${tableName} WHERE ${where}`;
-    const result = await db.query(query, params);
 
-    return parseInt(result[0].count);
+    console.log("🔍 [getStepDataCount] Query Info:", {
+      tableName,
+      query,
+      params,
+      isExternal: flowDef.dbSourceType === "external",
+      connectionId: flowDef.dbConnectionId,
+    });
+
+    let result: any;
+    if (flowDef.dbSourceType === "external" && flowDef.dbConnectionId) {
+      // 외부 DB 조회
+      console.log(
+        "✅ [getStepDataCount] Using EXTERNAL DB:",
+        flowDef.dbConnectionId
+      );
+      const externalResult = await executeExternalQuery(
+        flowDef.dbConnectionId,
+        query,
+        params
+      );
+      console.log("📦 [getStepDataCount] External result:", externalResult);
+      result = externalResult.rows;
+    } else {
+      // 내부 DB 조회
+      console.log("✅ [getStepDataCount] Using INTERNAL DB");
+      result = await db.query(query, params);
+    }
+
+    const count = parseInt(result[0].count || result[0].COUNT);
+    console.log("✅ [getStepDataCount] Final count:", count);
+    return count;
   }
 
   /**
@@ -88,47 +126,98 @@ export class FlowExecutionService {
 
     const offset = (page - 1) * pageSize;
 
+    const isExternalDb =
+      flowDef.dbSourceType === "external" && flowDef.dbConnectionId;
+
     // 5. 전체 카운트
     const countQuery = `SELECT COUNT(*) as count FROM ${tableName} WHERE ${where}`;
-    const countResult = await db.query(countQuery, params);
-    const total = parseInt(countResult[0].count);
+    let countResult: any;
+    let total: number;
 
-    // 6. 테이블의 Primary Key 컬럼 찾기
-    let orderByColumn = "";
-    try {
-      const pkQuery = `
-        SELECT a.attname
-        FROM pg_index i
-        JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey)
-        WHERE i.indrelid = $1::regclass
-        AND i.indisprimary
-        LIMIT 1
-      `;
-      const pkResult = await db.query(pkQuery, [tableName]);
-      if (pkResult.length > 0) {
-        orderByColumn = pkResult[0].attname;
-      }
-    } catch (err) {
-      // Primary Key를 찾지 못하면 ORDER BY 없이 진행
-      console.warn(`Could not find primary key for table ${tableName}:`, err);
+    if (isExternalDb) {
+      const externalCountResult = await executeExternalQuery(
+        flowDef.dbConnectionId!,
+        countQuery,
+        params
+      );
+      countResult = externalCountResult.rows;
+      total = parseInt(countResult[0].count || countResult[0].COUNT);
+    } else {
+      countResult = await db.query(countQuery, params);
+      total = parseInt(countResult[0].count);
     }
 
-    // 7. 데이터 조회
-    const orderByClause = orderByColumn ? `ORDER BY ${orderByColumn} DESC` : "";
-    const dataQuery = `
-      SELECT * FROM ${tableName} 
-      WHERE ${where} 
-      ${orderByClause}
-      LIMIT $${params.length + 1} OFFSET $${params.length + 2}
-    `;
-    const dataResult = await db.query(dataQuery, [...params, pageSize, offset]);
+    // 6. 데이터 조회 (DB 타입별 페이징 처리)
+    let dataQuery: string;
+    let dataParams: any[];
 
-    return {
-      records: dataResult,
-      total,
-      page,
-      pageSize,
-    };
+    if (isExternalDb) {
+      // 외부 DB는 id 컬럼으로 정렬 (가정)
+      // DB 타입에 따른 페이징 절은 빌더에서 처리하지 않고 직접 작성
+      // PostgreSQL, MySQL, MSSQL, Oracle 모두 지원하도록 단순화
+      dataQuery = `
+        SELECT * FROM ${tableName} 
+        WHERE ${where} 
+        ORDER BY id DESC
+        LIMIT ${pageSize} OFFSET ${offset}
+      `;
+      dataParams = params;
+
+      const externalDataResult = await executeExternalQuery(
+        flowDef.dbConnectionId!,
+        dataQuery,
+        dataParams
+      );
+
+      return {
+        records: externalDataResult.rows,
+        total,
+        page,
+        pageSize,
+      };
+    } else {
+      // 내부 DB (PostgreSQL)
+      // Primary Key 컬럼 찾기
+      let orderByColumn = "";
+      try {
+        const pkQuery = `
+          SELECT a.attname
+          FROM pg_index i
+          JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey)
+          WHERE i.indrelid = $1::regclass
+          AND i.indisprimary
+          LIMIT 1
+        `;
+        const pkResult = await db.query(pkQuery, [tableName]);
+        if (pkResult.length > 0) {
+          orderByColumn = pkResult[0].attname;
+        }
+      } catch (err) {
+        console.warn(`Could not find primary key for table ${tableName}:`, err);
+      }
+
+      const orderByClause = orderByColumn
+        ? `ORDER BY ${orderByColumn} DESC`
+        : "";
+      dataQuery = `
+        SELECT * FROM ${tableName} 
+        WHERE ${where} 
+        ${orderByClause}
+        LIMIT $${params.length + 1} OFFSET $${params.length + 2}
+      `;
+      const dataResult = await db.query(dataQuery, [
+        ...params,
+        pageSize,
+        offset,
+      ]);
+
+      return {
+        records: dataResult,
+        total,
+        page,
+        pageSize,
+      };
+    }
   }
 
   /**

backend-node/src/services/screenManagementService.ts

@@ -71,8 +71,9 @@ export class ScreenManagementService {
     // 화면 생성 (Raw Query)
     const [screen] = await query<any>(
       `INSERT INTO screen_definitions (
-        screen_name, screen_code, table_name, company_code, description, created_by
-      ) VALUES ($1, $2, $3, $4, $5, $6)
+        screen_name, screen_code, table_name, company_code, description, created_by,
+        db_source_type, db_connection_id
+      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
       RETURNING *`,
       [
         screenData.screenName,
@@ -81,6 +82,8 @@ export class ScreenManagementService {
         screenData.companyCode,
         screenData.description || null,
         screenData.createdBy,
+        screenData.dbSourceType || "internal",
+        screenData.dbConnectionId || null,
       ]
     );
 
@@ -1779,6 +1782,8 @@ export class ScreenManagementService {
       createdBy: data.created_by,
       updatedDate: data.updated_date,
       updatedBy: data.updated_by,
+      dbSourceType: data.db_source_type || "internal",
+      dbConnectionId: data.db_connection_id || undefined,
     };
   }
 

backend-node/src/types/externalRestApiTypes.ts

@@ -0,0 +1,78 @@
+// 외부 REST API 연결 관리 타입 정의
+
+export type AuthType = "none" | "api-key" | "bearer" | "basic" | "oauth2";
+
+export interface ExternalRestApiConnection {
+  id?: number;
+  connection_name: string;
+  description?: string;
+  base_url: string;
+  default_headers: Record<string, string>;
+  auth_type: AuthType;
+  auth_config?: {
+    // API Key
+    keyLocation?: "header" | "query";
+    keyName?: string;
+    keyValue?: string;
+
+    // Bearer Token
+    token?: string;
+
+    // Basic Auth
+    username?: string;
+    password?: string;
+
+    // OAuth2
+    clientId?: string;
+    clientSecret?: string;
+    tokenUrl?: string;
+    accessToken?: string;
+  };
+  timeout?: number;
+  retry_count?: number;
+  retry_delay?: number;
+  company_code: string;
+  is_active: string;
+  created_date?: Date;
+  created_by?: string;
+  updated_date?: Date;
+  updated_by?: string;
+  last_test_date?: Date;
+  last_test_result?: string;
+  last_test_message?: string;
+}
+
+export interface ExternalRestApiConnectionFilter {
+  auth_type?: string;
+  is_active?: string;
+  company_code?: string;
+  search?: string;
+}
+
+export interface RestApiTestRequest {
+  id?: number;
+  base_url: string;
+  endpoint?: string;
+  method?: "GET" | "POST" | "PUT" | "DELETE";
+  headers?: Record<string, string>;
+  auth_type?: AuthType;
+  auth_config?: any;
+  timeout?: number;
+}
+
+export interface RestApiTestResult {
+  success: boolean;
+  message: string;
+  response_time?: number;
+  status_code?: number;
+  response_data?: any;
+  error_details?: string;
+}
+
+export const AUTH_TYPE_OPTIONS = [
+  { value: "none", label: "인증 없음" },
+  { value: "api-key", label: "API Key" },
+  { value: "bearer", label: "Bearer Token" },
+  { value: "basic", label: "Basic Auth" },
+  { value: "oauth2", label: "OAuth 2.0" },
+];

backend-node/src/types/flow.ts

@@ -8,6 +8,8 @@ export interface FlowDefinition {
   name: string;
   description?: string;
   tableName: string;
+  dbSourceType?: "internal" | "external"; // 데이터베이스 소스 타입
+  dbConnectionId?: number; // 외부 DB 연결 ID (external인 경우)
   isActive: boolean;
   createdBy?: string;
   createdAt: Date;
@@ -19,6 +21,8 @@ export interface CreateFlowDefinitionRequest {
   name: string;
   description?: string;
   tableName: string;
+  dbSourceType?: "internal" | "external"; // 데이터베이스 소스 타입
+  dbConnectionId?: number; // 외부 DB 연결 ID
 }
 
 // 플로우 정의 수정 요청
@@ -178,6 +182,9 @@ export interface FlowAuditLog {
   targetDataId?: string;
   statusFrom?: string;
   statusTo?: string;
+  // 외부 DB 연결 정보
+  dbConnectionId?: number;
+  dbConnectionName?: string;
   // 조인 필드
   fromStepName?: string;
   toStepName?: string;

backend-node/src/types/screen.ts

@@ -151,6 +151,8 @@ export interface ScreenDefinition {
   createdBy?: string;
   updatedDate: Date;
   updatedBy?: string;
+  dbSourceType?: "internal" | "external";
+  dbConnectionId?: number;
 }
 
 // 화면 생성 요청
@@ -161,6 +163,8 @@ export interface CreateScreenRequest {
   companyCode: string;
   description?: string;
   createdBy?: string;
+  dbSourceType?: "internal" | "external";
+  dbConnectionId?: number;
 }
 
 // 화면 수정 요청

docker/deploy/backend.Dockerfile

@@ -1,13 +1,9 @@
-# syntax=docker/dockerfile:1
-
-# Base image (Debian-based for glibc + OpenSSL compatibility)
-FROM node:20-bookworm-slim AS base
+# Base image (WACE Docker Hub)
+FROM dockerhub.wace.me/node:20.19-alpine.linux AS base
 WORKDIR /app
 ENV NODE_ENV=production
 # Install OpenSSL, curl (for healthcheck), and required certs
-RUN apt-get update \
-    && apt-get install -y --no-install-recommends openssl ca-certificates curl \
-    && rm -rf /var/lib/apt/lists/*
+RUN apk add --no-cache openssl ca-certificates curl
 
 # Dependencies stage (install production dependencies)
 FROM base AS deps
@@ -15,7 +11,7 @@ COPY package*.json ./
 RUN npm ci --omit=dev --prefer-offline --no-audit && npm cache clean --force
 
 # Build stage (compile TypeScript)
-FROM node:20-bookworm-slim AS build
+FROM dockerhub.wace.me/node:20.19-alpine.linux AS build
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci --prefer-offline --no-audit && npm cache clean --force

docker/deploy/frontend.Dockerfile

@@ -1,5 +1,5 @@
 # Multi-stage build for Next.js
-FROM node:20-alpine AS base
+FROM dockerhub.wace.me/node:20.19-alpine.linux AS base
 
 # Install dependencies only when needed
 FROM base AS deps

docker/prod/backend.Dockerfile

@@ -1,11 +1,9 @@
-# Base image (Debian-based for glibc + OpenSSL compatibility)
-FROM node:20-bookworm-slim AS base
+# Base image (WACE Docker Hub)
+FROM dockerhub.wace.me/node:20.19-alpine.linux AS base
 WORKDIR /app
 ENV NODE_ENV=production
 # Install OpenSSL, curl (for healthcheck), and required certs
-RUN apt-get update \
-    && apt-get install -y --no-install-recommends openssl ca-certificates curl \
-    && rm -rf /var/lib/apt/lists/*
+RUN apk add --no-cache openssl ca-certificates curl
 
 # Dependencies stage (install production dependencies)
 FROM base AS deps
@@ -13,7 +11,7 @@ COPY package*.json ./
 RUN npm ci --omit=dev --prefer-offline --no-audit && npm cache clean --force
 
 # Build stage (compile TypeScript)
-FROM node:20-bookworm-slim AS build
+FROM dockerhub.wace.me/node:20.19-alpine.linux AS build
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci --prefer-offline --no-audit && npm cache clean --force
@@ -25,8 +23,8 @@ RUN npm run build
 FROM base AS runner
 ENV NODE_ENV=production
 
-# Create non-root user
-RUN groupadd -r appgroup && useradd -r -g appgroup appuser
+# Create non-root user (Alpine 방식)
+RUN addgroup -S appgroup && adduser -S -G appgroup appuser
 
 # Copy production node_modules
 COPY --from=deps /app/node_modules ./node_modules

docker/prod/docker-compose.backend.prod.yml

@@ -16,6 +16,7 @@ services:
       - CORS_ORIGIN=http://192.168.0.70:5555,http://39.117.244.52:5555,http://localhost:9771
       - CORS_CREDENTIALS=true
       - LOG_LEVEL=info
+      - ENCRYPTION_KEY=ilshin-plm-mail-encryption-key-32characters-2024-secure
     restart: unless-stopped
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:8080/health"]

docker/prod/frontend.Dockerfile

@@ -1,5 +1,5 @@
 # Multi-stage build for Next.js
-FROM node:18-alpine AS base
+FROM dockerhub.wace.me/node:20.19-alpine.linux AS base
 
 # curl 설치 (헬스체크용)
 RUN apk add --no-cache curl

frontend/app/(main)/admin/external-connections/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { Plus, Search, Pencil, Trash2, Database, Terminal } from "lucide-react";
+import { Plus, Search, Pencil, Trash2, Database, Terminal, Globe } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -27,6 +28,9 @@ import {
 } from "@/lib/api/externalDbConnection";
 import { ExternalDbConnectionModal } from "@/components/admin/ExternalDbConnectionModal";
 import { SqlQueryModal } from "@/components/admin/SqlQueryModal";
+import { RestApiConnectionList } from "@/components/admin/RestApiConnectionList";
+
+type ConnectionTabType = "database" | "rest-api";
 
 // DB 타입 매핑
 const DB_TYPE_LABELS: Record<string, string> = {
@@ -47,6 +51,9 @@ const ACTIVE_STATUS_OPTIONS = [
 export default function ExternalConnectionsPage() {
   const { toast } = useToast();
 
+  // 탭 상태
+  const [activeTab, setActiveTab] = useState<ConnectionTabType>("database");
+
   // 상태 관리
   const [connections, setConnections] = useState<ExternalDbConnection[]>([]);
   const [loading, setLoading] = useState(true);
@@ -221,235 +228,257 @@ export default function ExternalConnectionsPage() {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <div className="w-full max-w-none px-4 py-8 space-y-8">
+      <div className="w-full max-w-none space-y-8 px-4 py-8">
         {/* 페이지 제목 */}
-        <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
+        <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
           <div>
             <h1 className="text-3xl font-bold text-gray-900">외부 커넥션 관리</h1>
-            <p className="mt-2 text-gray-600">외부 데이터베이스 연결 정보를 관리합니다</p>
+            <p className="mt-2 text-gray-600">외부 데이터베이스 및 REST API 연결 정보를 관리합니다</p>
           </div>
         </div>
 
-      {/* 검색 및 필터 */}
-      <Card className="mb-6 shadow-sm">
-        <CardContent className="pt-6">
-          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <div className="flex flex-col gap-4 md:flex-row md:items-center">
-              {/* 검색 */}
-              <div className="relative">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-                <Input
-                  placeholder="연결명 또는 설명으로 검색..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="w-64 pl-10"
-                />
+        {/* 탭 */}
+        <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as ConnectionTabType)}>
+          <TabsList className="grid w-[400px] grid-cols-2">
+            <TabsTrigger value="database" className="flex items-center gap-2">
+              <Database className="h-4 w-4" />
+              데이터베이스 연결
+            </TabsTrigger>
+            <TabsTrigger value="rest-api" className="flex items-center gap-2">
+              <Globe className="h-4 w-4" />
+              REST API 연결
+            </TabsTrigger>
+          </TabsList>
+
+          {/* 데이터베이스 연결 탭 */}
+          <TabsContent value="database" className="space-y-6">
+            {/* 검색 및 필터 */}
+            <Card className="mb-6 shadow-sm">
+              <CardContent className="pt-6">
+                <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                  <div className="flex flex-col gap-4 md:flex-row md:items-center">
+                    {/* 검색 */}
+                    <div className="relative">
+                      <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                      <Input
+                        placeholder="연결명 또는 설명으로 검색..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="w-64 pl-10"
+                      />
+                    </div>
+
+                    {/* DB 타입 필터 */}
+                    <Select value={dbTypeFilter} onValueChange={setDbTypeFilter}>
+                      <SelectTrigger className="w-40">
+                        <SelectValue placeholder="DB 타입" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {supportedDbTypes.map((type) => (
+                          <SelectItem key={type.value} value={type.value}>
+                            {type.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    {/* 활성 상태 필터 */}
+                    <Select value={activeStatusFilter} onValueChange={setActiveStatusFilter}>
+                      <SelectTrigger className="w-32">
+                        <SelectValue placeholder="상태" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {ACTIVE_STATUS_OPTIONS.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 추가 버튼 */}
+                  <Button onClick={handleAddConnection} className="shrink-0">
+                    <Plus className="mr-2 h-4 w-4" />새 연결 추가
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 연결 목록 */}
+            {loading ? (
+              <div className="flex h-64 items-center justify-center">
+                <div className="text-gray-500">로딩 중...</div>
               </div>
+            ) : connections.length === 0 ? (
+              <Card className="shadow-sm">
+                <CardContent className="pt-6">
+                  <div className="py-8 text-center text-gray-500">
+                    <Database className="mx-auto mb-4 h-12 w-12 text-gray-400" />
+                    <p className="mb-2 text-lg font-medium">등록된 연결이 없습니다</p>
+                    <p className="mb-4 text-sm text-gray-400">새 외부 데이터베이스 연결을 추가해보세요.</p>
+                    <Button onClick={handleAddConnection}>
+                      <Plus className="mr-2 h-4 w-4" />첫 번째 연결 추가
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ) : (
+              <Card className="shadow-sm">
+                <CardContent className="p-0">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-[200px]">연결명</TableHead>
+                        <TableHead className="w-[120px]">DB 타입</TableHead>
+                        <TableHead className="w-[200px]">호스트:포트</TableHead>
+                        <TableHead className="w-[150px]">데이터베이스</TableHead>
+                        <TableHead className="w-[120px]">사용자</TableHead>
+                        <TableHead className="w-[80px]">상태</TableHead>
+                        <TableHead className="w-[100px]">생성일</TableHead>
+                        <TableHead className="w-[100px]">연결 테스트</TableHead>
+                        <TableHead className="w-[120px] text-right">작업</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {connections.map((connection) => (
+                        <TableRow key={connection.id} className="hover:bg-gray-50">
+                          <TableCell>
+                            <div className="font-medium">{connection.connection_name}</div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant="outline" className="text-xs">
+                              {DB_TYPE_LABELS[connection.db_type] || connection.db_type}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="font-mono text-sm">
+                            {connection.host}:{connection.port}
+                          </TableCell>
+                          <TableCell className="font-mono text-sm">{connection.database_name}</TableCell>
+                          <TableCell className="font-mono text-sm">{connection.username}</TableCell>
+                          <TableCell>
+                            <Badge variant={connection.is_active === "Y" ? "default" : "secondary"} className="text-xs">
+                              {connection.is_active === "Y" ? "활성" : "비활성"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-sm">
+                            {connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex items-center gap-2">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => handleTestConnection(connection)}
+                                disabled={testingConnections.has(connection.id!)}
+                                className="h-7 px-2 text-xs"
+                              >
+                                {testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
+                              </Button>
+                              {testResults.has(connection.id!) && (
+                                <Badge
+                                  variant={testResults.get(connection.id!) ? "default" : "destructive"}
+                                  className="text-xs text-white"
+                                >
+                                  {testResults.get(connection.id!) ? "성공" : "실패"}
+                                </Badge>
+                              )}
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <div className="flex justify-end gap-1">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => {
+                                  console.log("SQL 쿼리 실행 버튼 클릭 - connection:", connection);
+                                  setSelectedConnection(connection);
+                                  setSqlModalOpen(true);
+                                }}
+                                className="h-8 w-8 p-0"
+                                title="SQL 쿼리 실행"
+                              >
+                                <Terminal className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleEditConnection(connection)}
+                                className="h-8 w-8 p-0"
+                              >
+                                <Pencil className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleDeleteConnection(connection)}
+                                className="h-8 w-8 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </CardContent>
+              </Card>
+            )}
 
-              {/* DB 타입 필터 */}
-              <Select value={dbTypeFilter} onValueChange={setDbTypeFilter}>
-                <SelectTrigger className="w-40">
-                  <SelectValue placeholder="DB 타입" />
-                </SelectTrigger>
-                <SelectContent>
-                  {supportedDbTypes.map((type) => (
-                    <SelectItem key={type.value} value={type.value}>
-                      {type.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+            {/* 연결 설정 모달 */}
+            {isModalOpen && (
+              <ExternalDbConnectionModal
+                isOpen={isModalOpen}
+                onClose={handleModalCancel}
+                onSave={handleModalSave}
+                connection={editingConnection}
+                supportedDbTypes={supportedDbTypes.filter((type) => type.value !== "ALL")}
+              />
+            )}
 
-              {/* 활성 상태 필터 */}
-              <Select value={activeStatusFilter} onValueChange={setActiveStatusFilter}>
-                <SelectTrigger className="w-32">
-                  <SelectValue placeholder="상태" />
-                </SelectTrigger>
-                <SelectContent>
-                  {ACTIVE_STATUS_OPTIONS.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
+            {/* 삭제 확인 다이얼로그 */}
+            <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>연결 삭제 확인</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    "{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
+                    <br />
+                    <span className="font-medium text-red-600">이 작업은 되돌릴 수 없습니다.</span>
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel onClick={cancelDeleteConnection}>취소</AlertDialogCancel>
+                  <AlertDialogAction
+                    onClick={confirmDeleteConnection}
+                    className="bg-red-600 text-white hover:bg-red-700 focus:ring-red-600"
+                  >
+                    삭제
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
 
-            {/* 추가 버튼 */}
-            <Button onClick={handleAddConnection} className="shrink-0">
-              <Plus className="mr-2 h-4 w-4" />새 연결 추가
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+            {/* SQL 쿼리 모달 */}
+            {selectedConnection && (
+              <SqlQueryModal
+                isOpen={sqlModalOpen}
+                onClose={() => {
+                  setSqlModalOpen(false);
+                  setSelectedConnection(null);
+                }}
+                connectionId={selectedConnection.id!}
+                connectionName={selectedConnection.connection_name}
+              />
+            )}
+          </TabsContent>
 
-      {/* 연결 목록 */}
-      {loading ? (
-        <div className="flex h-64 items-center justify-center">
-          <div className="text-gray-500">로딩 중...</div>
-        </div>
-      ) : connections.length === 0 ? (
-        <Card className="shadow-sm">
-          <CardContent className="pt-6">
-            <div className="py-8 text-center text-gray-500">
-              <Database className="mx-auto mb-4 h-12 w-12 text-gray-400" />
-              <p className="mb-2 text-lg font-medium">등록된 연결이 없습니다</p>
-              <p className="mb-4 text-sm text-gray-400">새 외부 데이터베이스 연결을 추가해보세요.</p>
-              <Button onClick={handleAddConnection}>
-                <Plus className="mr-2 h-4 w-4" />첫 번째 연결 추가
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      ) : (
-        <Card className="shadow-sm">
-          <CardContent className="p-0">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[200px]">연결명</TableHead>
-                  <TableHead className="w-[120px]">DB 타입</TableHead>
-                  <TableHead className="w-[200px]">호스트:포트</TableHead>
-                  <TableHead className="w-[150px]">데이터베이스</TableHead>
-                  <TableHead className="w-[120px]">사용자</TableHead>
-                  <TableHead className="w-[80px]">상태</TableHead>
-                  <TableHead className="w-[100px]">생성일</TableHead>
-                  <TableHead className="w-[100px]">연결 테스트</TableHead>
-                  <TableHead className="w-[120px] text-right">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {connections.map((connection) => (
-                  <TableRow key={connection.id} className="hover:bg-gray-50">
-                    <TableCell>
-                      <div className="font-medium">{connection.connection_name}</div>
-                    </TableCell>
-                    <TableCell>
-                      <Badge variant="outline" className="text-xs">
-                        {DB_TYPE_LABELS[connection.db_type] || connection.db_type}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="font-mono text-sm">
-                      {connection.host}:{connection.port}
-                    </TableCell>
-                    <TableCell className="font-mono text-sm">{connection.database_name}</TableCell>
-                    <TableCell className="font-mono text-sm">{connection.username}</TableCell>
-                    <TableCell>
-                      <Badge variant={connection.is_active === "Y" ? "default" : "secondary"} className="text-xs">
-                        {connection.is_active === "Y" ? "활성" : "비활성"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-sm">
-                      {connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleTestConnection(connection)}
-                          disabled={testingConnections.has(connection.id!)}
-                          className="h-7 px-2 text-xs"
-                        >
-                          {testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
-                        </Button>
-                        {testResults.has(connection.id!) && (
-                          <Badge
-                            variant={testResults.get(connection.id!) ? "default" : "destructive"}
-                            className="text-xs text-white"
-                          >
-                            {testResults.get(connection.id!) ? "성공" : "실패"}
-                          </Badge>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex justify-end gap-1">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => {
-                            console.log("SQL 쿼리 실행 버튼 클릭 - connection:", connection);
-                            setSelectedConnection(connection);
-                            setSqlModalOpen(true);
-                          }}
-                          className="h-8 w-8 p-0"
-                          title="SQL 쿼리 실행"
-                        >
-                          <Terminal className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleEditConnection(connection)}
-                          className="h-8 w-8 p-0"
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleDeleteConnection(connection)}
-                          className="h-8 w-8 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* 연결 설정 모달 */}
-      {isModalOpen && (
-        <ExternalDbConnectionModal
-          isOpen={isModalOpen}
-          onClose={handleModalCancel}
-          onSave={handleModalSave}
-          connection={editingConnection}
-          supportedDbTypes={supportedDbTypes.filter((type) => type.value !== "ALL")}
-        />
-      )}
-
-      {/* 삭제 확인 다이얼로그 */}
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>연결 삭제 확인</AlertDialogTitle>
-            <AlertDialogDescription>
-              "{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
-              <br />
-              <span className="font-medium text-red-600">이 작업은 되돌릴 수 없습니다.</span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel onClick={cancelDeleteConnection}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDeleteConnection}
-              className="bg-red-600 text-white hover:bg-red-700 focus:ring-red-600"
-            >
-              삭제
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* SQL 쿼리 모달 */}
-      {selectedConnection && (
-        <SqlQueryModal
-          isOpen={sqlModalOpen}
-          onClose={() => {
-            setSqlModalOpen(false);
-            setSelectedConnection(null);
-          }}
-          connectionId={selectedConnection.id!}
-          connectionName={selectedConnection.connection_name}
-        />
-      )}
+          {/* REST API 연결 탭 */}
+          <TabsContent value="rest-api" className="space-y-6">
+            <RestApiConnectionList />
+          </TabsContent>
+        </Tabs>
       </div>
     </div>
   );

frontend/app/(main)/admin/flow-management/[id]/page.tsx

@@ -73,7 +73,9 @@ export default function FlowEditorPage() {
       // 플로우 정의 로드
       const flowRes = await getFlowDefinition(flowId);
       if (flowRes.success && flowRes.data) {
-        setFlowDefinition(flowRes.data);
+        console.log("🔍 Flow Definition loaded:", flowRes.data);
+        console.log("📋 Table Name:", flowRes.data.definition?.tableName);
+        setFlowDefinition(flowRes.data.definition);
       }
 
       // 단계 로드
@@ -314,6 +316,9 @@ export default function FlowEditorPage() {
         <FlowStepPanel
           step={selectedStep}
           flowId={flowId}
+          flowTableName={flowDefinition?.tableName} // 플로우 정의의 테이블명 전달
+          flowDbSourceType={flowDefinition?.dbSourceType} // DB 소스 타입 전달
+          flowDbConnectionId={flowDefinition?.dbConnectionId} // 외부 DB 연결 ID 전달
           onClose={() => setSelectedStep(null)}
           onUpdate={loadFlowData}
         />

frontend/app/(main)/admin/flow-management/page.tsx

@@ -9,7 +9,7 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { Plus, Edit2, Trash2, Play, Workflow, Table, Calendar, User } from "lucide-react";
+import { Plus, Edit2, Trash2, Play, Workflow, Table, Calendar, User, Check, ChevronsUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -27,6 +27,11 @@ import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/hooks/use-toast";
 import { getFlowDefinitions, createFlowDefinition, deleteFlowDefinition } from "@/lib/api/flow";
 import { FlowDefinition } from "@/types/flow";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { tableManagementApi } from "@/lib/api/tableManagement";
 
 export default function FlowManagementPage() {
   const router = useRouter();
@@ -39,6 +44,15 @@ export default function FlowManagementPage() {
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [selectedFlow, setSelectedFlow] = useState<FlowDefinition | null>(null);
 
+  // 테이블 목록 관련 상태
+  const [tableList, setTableList] = useState<any[]>([]); // 내부 DB 테이블
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [openTableCombobox, setOpenTableCombobox] = useState(false);
+  const [selectedDbSource, setSelectedDbSource] = useState<"internal" | number>("internal"); // "internal" 또는 외부 DB connection ID
+  const [externalConnections, setExternalConnections] = useState<any[]>([]);
+  const [externalTableList, setExternalTableList] = useState<string[]>([]);
+  const [loadingExternalTables, setLoadingExternalTables] = useState(false);
+
   // 생성 폼 상태
   const [formData, setFormData] = useState({
     name: "",
@@ -75,9 +89,107 @@ export default function FlowManagementPage() {
     loadFlows();
   }, []);
 
+  // 테이블 목록 로드 (내부 DB)
+  useEffect(() => {
+    const loadTables = async () => {
+      try {
+        setLoadingTables(true);
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setTableList(response.data);
+        }
+      } catch (error) {
+        console.error("Failed to load tables:", error);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 외부 DB 연결 목록 로드
+  useEffect(() => {
+    const loadConnections = async () => {
+      try {
+        const token = localStorage.getItem("authToken");
+        if (!token) {
+          console.warn("No auth token found");
+          return;
+        }
+
+        const response = await fetch("/api/external-db-connections/control/active", {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (response && response.ok) {
+          const data = await response.json();
+          if (data.success && data.data) {
+            // 메인 데이터베이스(현재 시스템) 제외 - connection_name에 "메인" 또는 "현재 시스템"이 포함된 것 필터링
+            const filtered = data.data.filter(
+              (conn: any) => !conn.connection_name.includes("메인") && !conn.connection_name.includes("현재 시스템"),
+            );
+            setExternalConnections(filtered);
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load external connections:", error);
+        setExternalConnections([]);
+      }
+    };
+    loadConnections();
+  }, []);
+
+  // 외부 DB 테이블 목록 로드
+  useEffect(() => {
+    if (selectedDbSource === "internal" || !selectedDbSource) {
+      setExternalTableList([]);
+      return;
+    }
+
+    const loadExternalTables = async () => {
+      try {
+        setLoadingExternalTables(true);
+        const token = localStorage.getItem("authToken");
+
+        const response = await fetch(`/api/multi-connection/connections/${selectedDbSource}/tables`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (response && response.ok) {
+          const data = await response.json();
+          if (data.success && data.data) {
+            const tables = Array.isArray(data.data) ? data.data : [];
+            const tableNames = tables
+              .map((t: any) => (typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name))
+              .filter(Boolean);
+            setExternalTableList(tableNames);
+          } else {
+            setExternalTableList([]);
+          }
+        } else {
+          setExternalTableList([]);
+        }
+      } catch (error) {
+        console.error("외부 DB 테이블 목록 조회 오류:", error);
+        setExternalTableList([]);
+      } finally {
+        setLoadingExternalTables(false);
+      }
+    };
+
+    loadExternalTables();
+  }, [selectedDbSource]);
+
   // 플로우 생성
   const handleCreate = async () => {
+    console.log("🚀 handleCreate called with formData:", formData);
+
     if (!formData.name || !formData.tableName) {
+      console.log("❌ Validation failed:", { name: formData.name, tableName: formData.tableName });
       toast({
         title: "입력 오류",
         description: "플로우 이름과 테이블 이름은 필수입니다.",
@@ -87,7 +199,15 @@ export default function FlowManagementPage() {
     }
 
     try {
-      const response = await createFlowDefinition(formData);
+      // DB 소스 정보 추가
+      const requestData = {
+        ...formData,
+        dbSourceType: selectedDbSource === "internal" ? "internal" : "external",
+        dbConnectionId: selectedDbSource === "internal" ? undefined : Number(selectedDbSource),
+      };
+
+      console.log("✅ Calling createFlowDefinition with:", requestData);
+      const response = await createFlowDefinition(requestData);
       if (response.success && response.data) {
         toast({
           title: "생성 완료",
@@ -95,6 +215,7 @@ export default function FlowManagementPage() {
         });
         setIsCreateDialogOpen(false);
         setFormData({ name: "", description: "", tableName: "" });
+        setSelectedDbSource("internal");
         loadFlows();
       } else {
         toast({
@@ -277,19 +398,123 @@ export default function FlowManagementPage() {
               />
             </div>
 
+            {/* DB 소스 선택 */}
+            <div>
+              <Label className="text-xs sm:text-sm">데이터베이스 소스</Label>
+              <Select
+                value={selectedDbSource.toString()}
+                onValueChange={(value) => {
+                  const dbSource = value === "internal" ? "internal" : parseInt(value);
+                  setSelectedDbSource(dbSource);
+                  // DB 소스 변경 시 테이블 선택 초기화
+                  setFormData({ ...formData, tableName: "" });
+                }}
+              >
+                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectValue placeholder="데이터베이스 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="internal">내부 데이터베이스</SelectItem>
+                  {externalConnections.map((conn: any) => (
+                    <SelectItem key={conn.id} value={conn.id.toString()}>
+                      {conn.connection_name} ({conn.db_type?.toUpperCase()})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+                플로우에서 사용할 데이터베이스를 선택합니다
+              </p>
+            </div>
+
+            {/* 테이블 선택 */}
             <div>
               <Label htmlFor="tableName" className="text-xs sm:text-sm">
                 연결 테이블 *
               </Label>
-              <Input
-                id="tableName"
-                value={formData.tableName}
-                onChange={(e) => setFormData({ ...formData, tableName: e.target.value })}
-                placeholder="예: products"
-                className="h-8 text-xs sm:h-10 sm:text-sm"
-              />
+              <Popover open={openTableCombobox} onOpenChange={setOpenTableCombobox}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={openTableCombobox}
+                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                    disabled={loadingTables || (selectedDbSource !== "internal" && loadingExternalTables)}
+                  >
+                    {formData.tableName
+                      ? selectedDbSource === "internal"
+                        ? tableList.find((table) => table.tableName === formData.tableName)?.displayName ||
+                          formData.tableName
+                        : formData.tableName
+                      : loadingTables || loadingExternalTables
+                        ? "로딩 중..."
+                        : "테이블 선택"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                  <Command>
+                    <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+                    <CommandList>
+                      <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        {selectedDbSource === "internal"
+                          ? // 내부 DB 테이블 목록
+                            tableList.map((table) => (
+                              <CommandItem
+                                key={table.tableName}
+                                value={table.tableName}
+                                onSelect={(currentValue) => {
+                                  console.log("📝 Internal table selected:", {
+                                    tableName: table.tableName,
+                                    currentValue,
+                                  });
+                                  setFormData({ ...formData, tableName: currentValue });
+                                  setOpenTableCombobox(false);
+                                }}
+                                className="text-xs sm:text-sm"
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    formData.tableName === table.tableName ? "opacity-100" : "opacity-0",
+                                  )}
+                                />
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{table.displayName || table.tableName}</span>
+                                  {table.description && (
+                                    <span className="text-[10px] text-gray-500">{table.description}</span>
+                                  )}
+                                </div>
+                              </CommandItem>
+                            ))
+                          : // 외부 DB 테이블 목록
+                            externalTableList.map((tableName, index) => (
+                              <CommandItem
+                                key={`external-${selectedDbSource}-${tableName}-${index}`}
+                                value={tableName}
+                                onSelect={(currentValue) => {
+                                  setFormData({ ...formData, tableName: currentValue });
+                                  setOpenTableCombobox(false);
+                                }}
+                                className="text-xs sm:text-sm"
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    formData.tableName === tableName ? "opacity-100" : "opacity-0",
+                                  )}
+                                />
+                                <div>{tableName}</div>
+                              </CommandItem>
+                            ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
               <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
-                플로우가 관리할 데이터 테이블 이름을 입력하세요
+                플로우의 모든 단계에서 사용할 기본 테이블입니다 (단계마다 상태 컬럼만 지정합니다)
               </p>
             </div>
 

frontend/app/(main)/main/page.tsx

@@ -9,7 +9,7 @@ import { Badge } from "@/components/ui/badge";
  */
 export default function MainPage() {
   return (
-    <div className="space-y-6 pt-10">
+    <div className="space-y-6 px-4 pt-10">
       {/* 메인 컨텐츠 */}
       {/* Welcome Message */}
       <Card>
@@ -18,7 +18,7 @@ export default function MainPage() {
             <h3 className="text-lg font-semibold">Vexolor에 오신 것을 환영합니다!</h3>
             <p className="text-muted-foreground">제품 수명 주기 관리 시스템을 통해 효율적인 업무를 시작하세요.</p>
             <div className="flex justify-center space-x-2">
-              <Badge variant="secondary">Spring Boot</Badge>
+              <Badge variant="secondary">Node.js</Badge>
               <Badge variant="secondary">Next.js</Badge>
               <Badge variant="secondary">Shadcn/ui</Badge>
             </div>

frontend/app/(main)/page.tsx

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

frontend/components/admin/AuthenticationConfig.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { AuthType } from "@/lib/api/externalRestApiConnection";
+
+interface AuthenticationConfigProps {
+  authType: AuthType;
+  authConfig: any;
+  onAuthTypeChange: (type: AuthType) => void;
+  onAuthConfigChange: (config: any) => void;
+}
+
+export function AuthenticationConfig({
+  authType,
+  authConfig = {},
+  onAuthTypeChange,
+  onAuthConfigChange,
+}: AuthenticationConfigProps) {
+  // 인증 설정 변경
+  const updateAuthConfig = (field: string, value: string) => {
+    onAuthConfigChange({
+      ...authConfig,
+      [field]: value,
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 인증 타입 선택 */}
+      <div className="space-y-2">
+        <Label htmlFor="auth-type">인증 타입</Label>
+        <Select value={authType} onValueChange={(value) => onAuthTypeChange(value as AuthType)}>
+          <SelectTrigger id="auth-type">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="none">인증 없음</SelectItem>
+            <SelectItem value="api-key">API Key</SelectItem>
+            <SelectItem value="bearer">Bearer Token</SelectItem>
+            <SelectItem value="basic">Basic Auth</SelectItem>
+            <SelectItem value="oauth2">OAuth 2.0</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 인증 타입별 설정 필드 */}
+      {authType === "api-key" && (
+        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+          <h4 className="text-sm font-medium">API Key 설정</h4>
+
+          {/* 키 위치 */}
+          <div className="space-y-2">
+            <Label htmlFor="key-location">키 위치</Label>
+            <Select
+              value={authConfig.keyLocation || "header"}
+              onValueChange={(value) => updateAuthConfig("keyLocation", value)}
+            >
+              <SelectTrigger id="key-location">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="header">Header</SelectItem>
+                <SelectItem value="query">Query Parameter</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 키 이름 */}
+          <div className="space-y-2">
+            <Label htmlFor="key-name">키 이름</Label>
+            <Input
+              id="key-name"
+              type="text"
+              value={authConfig.keyName || ""}
+              onChange={(e) => updateAuthConfig("keyName", e.target.value)}
+              placeholder="예: X-API-Key"
+            />
+          </div>
+
+          {/* 키 값 */}
+          <div className="space-y-2">
+            <Label htmlFor="key-value">키 값</Label>
+            <Input
+              id="key-value"
+              type="password"
+              value={authConfig.keyValue || ""}
+              onChange={(e) => updateAuthConfig("keyValue", e.target.value)}
+              placeholder="API Key를 입력하세요"
+            />
+          </div>
+        </div>
+      )}
+
+      {authType === "bearer" && (
+        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+          <h4 className="text-sm font-medium">Bearer Token 설정</h4>
+
+          {/* 토큰 */}
+          <div className="space-y-2">
+            <Label htmlFor="token">Token</Label>
+            <Input
+              id="token"
+              type="password"
+              value={authConfig.token || ""}
+              onChange={(e) => updateAuthConfig("token", e.target.value)}
+              placeholder="Bearer Token을 입력하세요"
+            />
+          </div>
+
+          <p className="text-xs text-gray-500">
+            * Authorization 헤더에 &quot;Bearer &#123;token&#125;&quot; 형식으로 전송됩니다.
+          </p>
+        </div>
+      )}
+
+      {authType === "basic" && (
+        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+          <h4 className="text-sm font-medium">Basic Auth 설정</h4>
+
+          {/* 사용자명 */}
+          <div className="space-y-2">
+            <Label htmlFor="username">사용자명</Label>
+            <Input
+              id="username"
+              type="text"
+              value={authConfig.username || ""}
+              onChange={(e) => updateAuthConfig("username", e.target.value)}
+              placeholder="사용자명을 입력하세요"
+            />
+          </div>
+
+          {/* 비밀번호 */}
+          <div className="space-y-2">
+            <Label htmlFor="password">비밀번호</Label>
+            <Input
+              id="password"
+              type="password"
+              value={authConfig.password || ""}
+              onChange={(e) => updateAuthConfig("password", e.target.value)}
+              placeholder="비밀번호를 입력하세요"
+            />
+          </div>
+
+          <p className="text-xs text-gray-500">* Authorization 헤더에 Base64 인코딩된 인증 정보가 전송됩니다.</p>
+        </div>
+      )}
+
+      {authType === "oauth2" && (
+        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+          <h4 className="text-sm font-medium">OAuth 2.0 설정</h4>
+
+          {/* Client ID */}
+          <div className="space-y-2">
+            <Label htmlFor="client-id">Client ID</Label>
+            <Input
+              id="client-id"
+              type="text"
+              value={authConfig.clientId || ""}
+              onChange={(e) => updateAuthConfig("clientId", e.target.value)}
+              placeholder="Client ID를 입력하세요"
+            />
+          </div>
+
+          {/* Client Secret */}
+          <div className="space-y-2">
+            <Label htmlFor="client-secret">Client Secret</Label>
+            <Input
+              id="client-secret"
+              type="password"
+              value={authConfig.clientSecret || ""}
+              onChange={(e) => updateAuthConfig("clientSecret", e.target.value)}
+              placeholder="Client Secret을 입력하세요"
+            />
+          </div>
+
+          {/* Token URL */}
+          <div className="space-y-2">
+            <Label htmlFor="token-url">Token URL</Label>
+            <Input
+              id="token-url"
+              type="text"
+              value={authConfig.tokenUrl || ""}
+              onChange={(e) => updateAuthConfig("tokenUrl", e.target.value)}
+              placeholder="예: https://oauth.example.com/token"
+            />
+          </div>
+
+          <p className="text-xs text-gray-500">* OAuth 2.0 Client Credentials Grant 방식을 사용합니다.</p>
+        </div>
+      )}
+
+      {authType === "none" && (
+        <div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
+          인증이 필요하지 않은 공개 API입니다.
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/admin/HeadersManager.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+interface HeadersManagerProps {
+  headers: Record<string, string>;
+  onChange: (headers: Record<string, string>) => void;
+}
+
+interface HeaderItem {
+  key: string;
+  value: string;
+}
+
+export function HeadersManager({ headers, onChange }: HeadersManagerProps) {
+  const [headersList, setHeadersList] = useState<HeaderItem[]>([]);
+
+  // 초기 헤더 로드
+  useEffect(() => {
+    const list = Object.entries(headers || {}).map(([key, value]) => ({
+      key,
+      value,
+    }));
+
+    // 헤더가 없으면 기본 헤더 추가
+    if (list.length === 0) {
+      list.push({ key: "Content-Type", value: "application/json" });
+    }
+
+    setHeadersList(list);
+  }, []);
+
+  // 헤더 추가
+  const addHeader = () => {
+    setHeadersList([...headersList, { key: "", value: "" }]);
+  };
+
+  // 헤더 삭제
+  const removeHeader = (index: number) => {
+    const newList = headersList.filter((_, i) => i !== index);
+    setHeadersList(newList);
+    updateParent(newList);
+  };
+
+  // 헤더 업데이트
+  const updateHeader = (index: number, field: "key" | "value", value: string) => {
+    const newList = [...headersList];
+    newList[index][field] = value;
+    setHeadersList(newList);
+    updateParent(newList);
+  };
+
+  // 부모 컴포넌트에 변경사항 전달
+  const updateParent = (list: HeaderItem[]) => {
+    const headersObject = list.reduce(
+      (acc, { key, value }) => {
+        if (key.trim()) {
+          acc[key] = value;
+        }
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
+    onChange(headersObject);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Label className="text-sm font-medium">헤더 설정</Label>
+        <Button type="button" variant="outline" size="sm" onClick={addHeader}>
+          <Plus className="mr-1 h-3 w-3" />
+          헤더 추가
+        </Button>
+      </div>
+
+      {headersList.length > 0 ? (
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[35%]">키</TableHead>
+                <TableHead className="w-[55%]">값</TableHead>
+                <TableHead className="w-[10%] text-right">작업</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {headersList.map((header, index) => (
+                <TableRow key={index}>
+                  <TableCell>
+                    <Input
+                      type="text"
+                      value={header.key}
+                      onChange={(e) => updateHeader(index, "key", e.target.value)}
+                      placeholder="예: Authorization"
+                      className="h-8"
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Input
+                      type="text"
+                      value={header.value}
+                      onChange={(e) => updateHeader(index, "value", e.target.value)}
+                      placeholder="예: Bearer token123"
+                      className="h-8"
+                    />
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeHeader(index)}
+                      className="h-8 w-8 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
+          헤더가 없습니다. 헤더 추가 버튼을 클릭하여 추가하세요.
+        </div>
+      )}
+
+      <p className="text-xs text-gray-500">
+        * 공통으로 사용할 HTTP 헤더를 설정합니다. 인증 헤더는 별도의 인증 설정에서 관리됩니다.
+      </p>
+    </div>
+  );
+}

frontend/components/admin/RestApiConnectionList.tsx

@@ -0,0 +1,412 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Plus, Search, Pencil, Trash2, TestTube } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useToast } from "@/hooks/use-toast";
+import {
+  ExternalRestApiConnectionAPI,
+  ExternalRestApiConnection,
+  ExternalRestApiConnectionFilter,
+} from "@/lib/api/externalRestApiConnection";
+import { RestApiConnectionModal } from "./RestApiConnectionModal";
+
+// 인증 타입 라벨
+const AUTH_TYPE_LABELS: Record<string, string> = {
+  none: "인증 없음",
+  "api-key": "API Key",
+  bearer: "Bearer",
+  basic: "Basic Auth",
+  oauth2: "OAuth 2.0",
+};
+
+// 활성 상태 옵션
+const ACTIVE_STATUS_OPTIONS = [
+  { value: "ALL", label: "전체" },
+  { value: "Y", label: "활성" },
+  { value: "N", label: "비활성" },
+];
+
+export function RestApiConnectionList() {
+  const { toast } = useToast();
+
+  // 상태 관리
+  const [connections, setConnections] = useState<ExternalRestApiConnection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [authTypeFilter, setAuthTypeFilter] = useState("ALL");
+  const [activeStatusFilter, setActiveStatusFilter] = useState("ALL");
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingConnection, setEditingConnection] = useState<ExternalRestApiConnection | undefined>();
+  const [supportedAuthTypes, setSupportedAuthTypes] = useState<Array<{ value: string; label: string }>>([]);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [connectionToDelete, setConnectionToDelete] = useState<ExternalRestApiConnection | null>(null);
+  const [testingConnections, setTestingConnections] = useState<Set<number>>(new Set());
+  const [testResults, setTestResults] = useState<Map<number, boolean>>(new Map());
+
+  // 데이터 로딩
+  const loadConnections = async () => {
+    try {
+      setLoading(true);
+
+      const filter: ExternalRestApiConnectionFilter = {
+        search: searchTerm.trim() || undefined,
+        auth_type: authTypeFilter === "ALL" ? undefined : authTypeFilter,
+        is_active: activeStatusFilter === "ALL" ? undefined : activeStatusFilter,
+      };
+
+      const data = await ExternalRestApiConnectionAPI.getConnections(filter);
+      setConnections(data);
+    } catch (error) {
+      toast({
+        title: "오류",
+        description: "연결 목록을 불러오는데 실패했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 지원되는 인증 타입 로딩
+  const loadSupportedAuthTypes = () => {
+    const types = ExternalRestApiConnectionAPI.getSupportedAuthTypes();
+    setSupportedAuthTypes([{ value: "ALL", label: "전체" }, ...types]);
+  };
+
+  // 초기 데이터 로딩
+  useEffect(() => {
+    loadConnections();
+    loadSupportedAuthTypes();
+  }, []);
+
+  // 필터 변경 시 데이터 재로딩
+  useEffect(() => {
+    loadConnections();
+  }, [searchTerm, authTypeFilter, activeStatusFilter]);
+
+  // 새 연결 추가
+  const handleAddConnection = () => {
+    setEditingConnection(undefined);
+    setIsModalOpen(true);
+  };
+
+  // 연결 편집
+  const handleEditConnection = (connection: ExternalRestApiConnection) => {
+    setEditingConnection(connection);
+    setIsModalOpen(true);
+  };
+
+  // 연결 삭제 확인 다이얼로그 열기
+  const handleDeleteConnection = (connection: ExternalRestApiConnection) => {
+    setConnectionToDelete(connection);
+    setDeleteDialogOpen(true);
+  };
+
+  // 연결 삭제 실행
+  const confirmDeleteConnection = async () => {
+    if (!connectionToDelete?.id) return;
+
+    try {
+      await ExternalRestApiConnectionAPI.deleteConnection(connectionToDelete.id);
+      toast({
+        title: "성공",
+        description: "연결이 삭제되었습니다.",
+      });
+      loadConnections();
+    } catch (error) {
+      toast({
+        title: "오류",
+        description: error instanceof Error ? error.message : "연결 삭제에 실패했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setDeleteDialogOpen(false);
+      setConnectionToDelete(null);
+    }
+  };
+
+  // 연결 삭제 취소
+  const cancelDeleteConnection = () => {
+    setDeleteDialogOpen(false);
+    setConnectionToDelete(null);
+  };
+
+  // 연결 테스트
+  const handleTestConnection = async (connection: ExternalRestApiConnection) => {
+    if (!connection.id) return;
+
+    setTestingConnections((prev) => new Set(prev).add(connection.id!));
+
+    try {
+      const result = await ExternalRestApiConnectionAPI.testConnectionById(connection.id);
+
+      setTestResults((prev) => new Map(prev).set(connection.id!, result.success));
+
+      if (result.success) {
+        toast({
+          title: "연결 성공",
+          description: `${connection.connection_name} 연결이 성공했습니다.`,
+        });
+      } else {
+        toast({
+          title: "연결 실패",
+          description: result.message || `${connection.connection_name} 연결에 실패했습니다.`,
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      setTestResults((prev) => new Map(prev).set(connection.id!, false));
+      toast({
+        title: "연결 테스트 오류",
+        description: "연결 테스트 중 오류가 발생했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setTestingConnections((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(connection.id!);
+        return newSet;
+      });
+    }
+  };
+
+  // 모달 저장 처리
+  const handleModalSave = () => {
+    setIsModalOpen(false);
+    setEditingConnection(undefined);
+    loadConnections();
+  };
+
+  // 모달 취소 처리
+  const handleModalCancel = () => {
+    setIsModalOpen(false);
+    setEditingConnection(undefined);
+  };
+
+  return (
+    <>
+      {/* 검색 및 필터 */}
+      <Card className="mb-6 shadow-sm">
+        <CardContent className="pt-6">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div className="flex flex-col gap-4 md:flex-row md:items-center">
+              {/* 검색 */}
+              <div className="relative">
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <Input
+                  placeholder="연결명 또는 URL로 검색..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-64 pl-10"
+                />
+              </div>
+
+              {/* 인증 타입 필터 */}
+              <Select value={authTypeFilter} onValueChange={setAuthTypeFilter}>
+                <SelectTrigger className="w-40">
+                  <SelectValue placeholder="인증 타입" />
+                </SelectTrigger>
+                <SelectContent>
+                  {supportedAuthTypes.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {type.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              {/* 활성 상태 필터 */}
+              <Select value={activeStatusFilter} onValueChange={setActiveStatusFilter}>
+                <SelectTrigger className="w-32">
+                  <SelectValue placeholder="상태" />
+                </SelectTrigger>
+                <SelectContent>
+                  {ACTIVE_STATUS_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 추가 버튼 */}
+            <Button onClick={handleAddConnection} className="shrink-0">
+              <Plus className="mr-2 h-4 w-4" />새 연결 추가
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 연결 목록 */}
+      {loading ? (
+        <div className="flex h-64 items-center justify-center">
+          <div className="text-gray-500">로딩 중...</div>
+        </div>
+      ) : connections.length === 0 ? (
+        <Card className="shadow-sm">
+          <CardContent className="pt-6">
+            <div className="py-8 text-center text-gray-500">
+              <TestTube className="mx-auto mb-4 h-12 w-12 text-gray-400" />
+              <p className="mb-2 text-lg font-medium">등록된 REST API 연결이 없습니다</p>
+              <p className="mb-4 text-sm text-gray-400">새 REST API 연결을 추가해보세요.</p>
+              <Button onClick={handleAddConnection}>
+                <Plus className="mr-2 h-4 w-4" />첫 번째 연결 추가
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card className="shadow-sm">
+          <CardContent className="p-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[180px]">연결명</TableHead>
+                  <TableHead className="w-[280px]">기본 URL</TableHead>
+                  <TableHead className="w-[100px]">인증 타입</TableHead>
+                  <TableHead className="w-[80px]">헤더 수</TableHead>
+                  <TableHead className="w-[80px]">상태</TableHead>
+                  <TableHead className="w-[140px]">마지막 테스트</TableHead>
+                  <TableHead className="w-[100px]">연결 테스트</TableHead>
+                  <TableHead className="w-[120px] text-right">작업</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {connections.map((connection) => (
+                  <TableRow key={connection.id} className="hover:bg-gray-50">
+                    <TableCell>
+                      <div className="font-medium">{connection.connection_name}</div>
+                      {connection.description && (
+                        <div className="mt-1 text-xs text-gray-500">{connection.description}</div>
+                      )}
+                    </TableCell>
+                    <TableCell className="font-mono text-xs">{connection.base_url}</TableCell>
+                    <TableCell>
+                      <Badge variant="outline" className="text-xs">
+                        {AUTH_TYPE_LABELS[connection.auth_type] || connection.auth_type}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      {Object.keys(connection.default_headers || {}).length}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={connection.is_active === "Y" ? "default" : "secondary"} className="text-xs">
+                        {connection.is_active === "Y" ? "활성" : "비활성"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-xs">
+                      {connection.last_test_date ? (
+                        <div>
+                          <div>{new Date(connection.last_test_date).toLocaleDateString()}</div>
+                          <Badge
+                            variant={connection.last_test_result === "Y" ? "default" : "destructive"}
+                            className="mt-1 text-xs"
+                          >
+                            {connection.last_test_result === "Y" ? "성공" : "실패"}
+                          </Badge>
+                        </div>
+                      ) : (
+                        <span className="text-gray-400">-</span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleTestConnection(connection)}
+                          disabled={testingConnections.has(connection.id!)}
+                          className="h-7 px-2 text-xs"
+                        >
+                          {testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
+                        </Button>
+                        {testResults.has(connection.id!) && (
+                          <Badge
+                            variant={testResults.get(connection.id!) ? "default" : "destructive"}
+                            className="text-xs text-white"
+                          >
+                            {testResults.get(connection.id!) ? "성공" : "실패"}
+                          </Badge>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-1">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleEditConnection(connection)}
+                          className="h-8 w-8 p-0"
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleDeleteConnection(connection)}
+                          className="h-8 w-8 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 연결 설정 모달 */}
+      {isModalOpen && (
+        <RestApiConnectionModal
+          isOpen={isModalOpen}
+          onClose={handleModalCancel}
+          onSave={handleModalSave}
+          connection={editingConnection}
+        />
+      )}
+
+      {/* 삭제 확인 다이얼로그 */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>연결 삭제 확인</AlertDialogTitle>
+            <AlertDialogDescription>
+              "{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
+              <br />
+              <span className="font-medium text-red-600">이 작업은 되돌릴 수 없습니다.</span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={cancelDeleteConnection}>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDeleteConnection}
+              className="bg-red-600 text-white hover:bg-red-700 focus:ring-red-600"
+            >
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

frontend/components/admin/RestApiConnectionModal.tsx

@@ -0,0 +1,394 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { X, Save, TestTube, ChevronDown, ChevronUp } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { useToast } from "@/hooks/use-toast";
+import {
+  ExternalRestApiConnectionAPI,
+  ExternalRestApiConnection,
+  AuthType,
+  RestApiTestResult,
+} from "@/lib/api/externalRestApiConnection";
+import { HeadersManager } from "./HeadersManager";
+import { AuthenticationConfig } from "./AuthenticationConfig";
+import { Badge } from "@/components/ui/badge";
+
+interface RestApiConnectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: () => void;
+  connection?: ExternalRestApiConnection;
+}
+
+export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }: RestApiConnectionModalProps) {
+  const { toast } = useToast();
+
+  // 폼 상태
+  const [connectionName, setConnectionName] = useState("");
+  const [description, setDescription] = useState("");
+  const [baseUrl, setBaseUrl] = useState("");
+  const [defaultHeaders, setDefaultHeaders] = useState<Record<string, string>>({});
+  const [authType, setAuthType] = useState<AuthType>("none");
+  const [authConfig, setAuthConfig] = useState<any>({});
+  const [timeout, setTimeout] = useState(30000);
+  const [retryCount, setRetryCount] = useState(0);
+  const [retryDelay, setRetryDelay] = useState(1000);
+  const [isActive, setIsActive] = useState(true);
+
+  // UI 상태
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [testEndpoint, setTestEndpoint] = useState("");
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<RestApiTestResult | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  // 기존 연결 데이터 로드
+  useEffect(() => {
+    if (connection) {
+      setConnectionName(connection.connection_name);
+      setDescription(connection.description || "");
+      setBaseUrl(connection.base_url);
+      setDefaultHeaders(connection.default_headers || {});
+      setAuthType(connection.auth_type);
+      setAuthConfig(connection.auth_config || {});
+      setTimeout(connection.timeout || 30000);
+      setRetryCount(connection.retry_count || 0);
+      setRetryDelay(connection.retry_delay || 1000);
+      setIsActive(connection.is_active === "Y");
+    } else {
+      // 초기화
+      setConnectionName("");
+      setDescription("");
+      setBaseUrl("");
+      setDefaultHeaders({ "Content-Type": "application/json" });
+      setAuthType("none");
+      setAuthConfig({});
+      setTimeout(30000);
+      setRetryCount(0);
+      setRetryDelay(1000);
+      setIsActive(true);
+    }
+
+    setTestResult(null);
+    setTestEndpoint("");
+  }, [connection, isOpen]);
+
+  // 연결 테스트
+  const handleTest = async () => {
+    // 유효성 검증
+    if (!baseUrl.trim()) {
+      toast({
+        title: "입력 오류",
+        description: "기본 URL을 입력해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setTesting(true);
+    setTestResult(null);
+
+    try {
+      const result = await ExternalRestApiConnectionAPI.testConnection({
+        base_url: baseUrl,
+        endpoint: testEndpoint || undefined,
+        headers: defaultHeaders,
+        auth_type: authType,
+        auth_config: authConfig,
+        timeout,
+      });
+
+      setTestResult(result);
+
+      if (result.success) {
+        toast({
+          title: "연결 성공",
+          description: `응답 시간: ${result.response_time}ms`,
+        });
+      } else {
+        toast({
+          title: "연결 실패",
+          description: result.message,
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      toast({
+        title: "테스트 오류",
+        description: error instanceof Error ? error.message : "알 수 없는 오류",
+        variant: "destructive",
+      });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  // 저장
+  const handleSave = async () => {
+    // 유효성 검증
+    if (!connectionName.trim()) {
+      toast({
+        title: "입력 오류",
+        description: "연결명을 입력해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!baseUrl.trim()) {
+      toast({
+        title: "입력 오류",
+        description: "기본 URL을 입력해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // URL 형식 검증
+    try {
+      new URL(baseUrl);
+    } catch {
+      toast({
+        title: "입력 오류",
+        description: "올바른 URL 형식이 아닙니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      const data: ExternalRestApiConnection = {
+        connection_name: connectionName,
+        description: description || undefined,
+        base_url: baseUrl,
+        default_headers: defaultHeaders,
+        auth_type: authType,
+        auth_config: authType === "none" ? undefined : authConfig,
+        timeout,
+        retry_count: retryCount,
+        retry_delay: retryDelay,
+        company_code: "*",
+        is_active: isActive ? "Y" : "N",
+      };
+
+      if (connection?.id) {
+        await ExternalRestApiConnectionAPI.updateConnection(connection.id, data);
+        toast({
+          title: "수정 완료",
+          description: "연결이 수정되었습니다.",
+        });
+      } else {
+        await ExternalRestApiConnectionAPI.createConnection(data);
+        toast({
+          title: "생성 완료",
+          description: "연결이 생성되었습니다.",
+        });
+      }
+
+      onSave();
+      onClose();
+    } catch (error) {
+      toast({
+        title: "저장 실패",
+        description: error instanceof Error ? error.message : "알 수 없는 오류",
+        variant: "destructive",
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{connection ? "REST API 연결 수정" : "새 REST API 연결 추가"}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* 기본 정보 */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold">기본 정보</h3>
+
+            <div className="space-y-2">
+              <Label htmlFor="connection-name">
+                연결명 <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="connection-name"
+                value={connectionName}
+                onChange={(e) => setConnectionName(e.target.value)}
+                placeholder="예: 날씨 API"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">설명</Label>
+              <Textarea
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="연결에 대한 설명을 입력하세요"
+                rows={2}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="base-url">
+                기본 URL <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="base-url"
+                value={baseUrl}
+                onChange={(e) => setBaseUrl(e.target.value)}
+                placeholder="https://api.example.com"
+              />
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Switch id="is-active" checked={isActive} onCheckedChange={setIsActive} />
+              <Label htmlFor="is-active" className="cursor-pointer">
+                활성 상태
+              </Label>
+            </div>
+          </div>
+
+          {/* 헤더 관리 */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold">헤더 설정</h3>
+            <HeadersManager headers={defaultHeaders} onChange={setDefaultHeaders} />
+          </div>
+
+          {/* 인증 설정 */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold">인증 설정</h3>
+            <AuthenticationConfig
+              authType={authType}
+              authConfig={authConfig}
+              onAuthTypeChange={setAuthType}
+              onAuthConfigChange={setAuthConfig}
+            />
+          </div>
+
+          {/* 고급 설정 */}
+          <div className="space-y-4">
+            <button
+              type="button"
+              onClick={() => setShowAdvanced(!showAdvanced)}
+              className="flex items-center space-x-2 text-sm font-semibold hover:text-blue-600"
+            >
+              <span>고급 설정</span>
+              {showAdvanced ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+            </button>
+
+            {showAdvanced && (
+              <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="timeout">타임아웃 (ms)</Label>
+                    <Input
+                      id="timeout"
+                      type="number"
+                      value={timeout}
+                      onChange={(e) => setTimeout(parseInt(e.target.value) || 30000)}
+                      min={1000}
+                      max={120000}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="retry-count">재시도 횟수</Label>
+                    <Input
+                      id="retry-count"
+                      type="number"
+                      value={retryCount}
+                      onChange={(e) => setRetryCount(parseInt(e.target.value) || 0)}
+                      min={0}
+                      max={5}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="retry-delay">재시도 간격 (ms)</Label>
+                    <Input
+                      id="retry-delay"
+                      type="number"
+                      value={retryDelay}
+                      onChange={(e) => setRetryDelay(parseInt(e.target.value) || 1000)}
+                      min={100}
+                      max={10000}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 연결 테스트 */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold">연결 테스트</h3>
+
+            <div className="space-y-2">
+              <Label htmlFor="test-endpoint">테스트 엔드포인트 (선택)</Label>
+              <Input
+                id="test-endpoint"
+                value={testEndpoint}
+                onChange={(e) => setTestEndpoint(e.target.value)}
+                placeholder="/api/v1/test 또는 빈칸 (기본 URL만 테스트)"
+              />
+            </div>
+
+            <Button type="button" variant="outline" onClick={handleTest} disabled={testing}>
+              <TestTube className="mr-2 h-4 w-4" />
+              {testing ? "테스트 중..." : "연결 테스트"}
+            </Button>
+
+            {testResult && (
+              <div
+                className={`rounded-md border p-4 ${
+                  testResult.success ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"
+                }`}
+              >
+                <div className="mb-2 flex items-center justify-between">
+                  <Badge variant={testResult.success ? "default" : "destructive"}>
+                    {testResult.success ? "성공" : "실패"}
+                  </Badge>
+                  {testResult.response_time && (
+                    <span className="text-sm text-gray-600">응답 시간: {testResult.response_time}ms</span>
+                  )}
+                </div>
+
+                <p className="text-sm">{testResult.message}</p>
+
+                {testResult.status_code && (
+                  <p className="mt-1 text-xs text-gray-500">상태 코드: {testResult.status_code}</p>
+                )}
+
+                {testResult.error_details && <p className="mt-2 text-xs text-red-600">{testResult.error_details}</p>}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose}>
+            <X className="mr-2 h-4 w-4" />
+            취소
+          </Button>
+          <Button type="button" onClick={handleSave} disabled={saving}>
+            <Save className="mr-2 h-4 w-4" />
+            {saving ? "저장 중..." : connection ? "수정" : "생성"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/components/dashboard/DashboardViewer.tsx

@@ -161,13 +161,24 @@ interface DashboardViewerProps {
  */
 export function DashboardViewer({
   elements,
-  dashboardId,
   refreshInterval,
   backgroundColor = "#f9fafb",
   resolution = "fhd",
 }: DashboardViewerProps) {
   const [elementData, setElementData] = useState<Record<string, QueryResult>>({});
   const [loadingElements, setLoadingElements] = useState<Set<string>>(new Set());
+  const [isMobile, setIsMobile] = useState(false);
+
+  // 화면 크기 감지
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1024); // 1024px (lg) 미만은 모바일/태블릿
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
 
   // 캔버스 설정 계산
   const canvasConfig = useMemo(() => {
@@ -269,6 +280,21 @@ export function DashboardViewer({
     return () => clearInterval(interval);
   }, [refreshInterval, loadAllData]);
 
+  // 모바일에서 요소를 자연스러운 읽기 순서로 정렬 (왼쪽→오른쪽, 위→아래)
+  const sortedElements = useMemo(() => {
+    if (!isMobile) return elements;
+
+    return [...elements].sort((a, b) => {
+      // Y 좌표 차이가 50px 이상이면 Y 우선 (같은 행으로 간주 안함)
+      const yDiff = a.position.y - b.position.y;
+      if (Math.abs(yDiff) > 50) {
+        return yDiff;
+      }
+      // 같은 행이면 X 좌표로 정렬
+      return a.position.x - b.position.x;
+    });
+  }, [elements, isMobile]);
+
   // 요소가 없는 경우
   if (elements.length === 0) {
     return (
@@ -284,30 +310,47 @@ export function DashboardViewer({
 
   return (
     <DashboardProvider>
-      {/* 스크롤 가능한 컨테이너 */}
-      <div className="flex min-h-screen items-start justify-center bg-gray-100 p-8">
-        {/* 고정 크기 캔버스 (편집 화면과 동일한 레이아웃) */}
-        <div
-          className="relative rounded-lg"
-          style={{
-            width: `${canvasConfig.width}px`,
-            minHeight: `${canvasConfig.height}px`,
-            height: `${canvasHeight}px`,
-            backgroundColor: backgroundColor,
-          }}
-        >
-          {/* 대시보드 요소들 */}
-          {elements.map((element) => (
-            <ViewerElement
-              key={element.id}
-              element={element}
-              data={elementData[element.id]}
-              isLoading={loadingElements.has(element.id)}
-              onRefresh={() => loadElementData(element)}
-            />
-          ))}
+      {isMobile ? (
+        // 모바일/태블릿: 세로 스택 레이아웃
+        <div className="min-h-screen bg-gray-100 p-4" style={{ backgroundColor }}>
+          <div className="mx-auto max-w-3xl space-y-4">
+            {sortedElements.map((element) => (
+              <ViewerElement
+                key={element.id}
+                element={element}
+                data={elementData[element.id]}
+                isLoading={loadingElements.has(element.id)}
+                onRefresh={() => loadElementData(element)}
+                isMobile={true}
+              />
+            ))}
+          </div>
         </div>
-      </div>
+      ) : (
+        // 데스크톱: 기존 고정 캔버스 레이아웃
+        <div className="flex min-h-screen items-start justify-center bg-gray-100 p-8">
+          <div
+            className="relative rounded-lg"
+            style={{
+              width: `${canvasConfig.width}px`,
+              minHeight: `${canvasConfig.height}px`,
+              height: `${canvasHeight}px`,
+              backgroundColor: backgroundColor,
+            }}
+          >
+            {sortedElements.map((element) => (
+              <ViewerElement
+                key={element.id}
+                element={element}
+                data={elementData[element.id]}
+                isLoading={loadingElements.has(element.id)}
+                onRefresh={() => loadElementData(element)}
+                isMobile={false}
+              />
+            ))}
+          </div>
+        </div>
+      )}
     </DashboardProvider>
   );
 }
@@ -317,14 +360,61 @@ interface ViewerElementProps {
   data?: QueryResult;
   isLoading: boolean;
   onRefresh: () => void;
+  isMobile: boolean;
 }
 
 /**
  * 개별 뷰어 요소 컴포넌트
  */
-function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementProps) {
+function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: ViewerElementProps) {
   const [isHovered, setIsHovered] = useState(false);
 
+  if (isMobile) {
+    // 모바일/태블릿: 세로 스택 카드 스타일
+    return (
+      <div
+        className="relative overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm"
+        style={{ minHeight: "300px" }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {element.showHeader !== false && (
+          <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
+            <h3 className="text-sm font-semibold text-gray-800">{element.customTitle || element.title}</h3>
+            <button
+              onClick={onRefresh}
+              disabled={isLoading}
+              className="text-gray-400 hover:text-gray-600 disabled:opacity-50"
+              title="새로고침"
+            >
+              {isLoading ? (
+                <div className="h-4 w-4 animate-spin rounded-full border border-gray-400 border-t-transparent" />
+              ) : (
+                "🔄"
+              )}
+            </button>
+          </div>
+        )}
+        <div className={element.showHeader !== false ? "p-4" : "p-4"} style={{ minHeight: "250px" }}>
+          {element.type === "chart" ? (
+            <ChartRenderer element={element} data={data} width={undefined} height={250} />
+          ) : (
+            renderWidget(element)
+          )}
+        </div>
+        {isLoading && (
+          <div className="bg-opacity-75 absolute inset-0 flex items-center justify-center bg-white">
+            <div className="text-center">
+              <div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+              <div className="text-sm text-gray-600">업데이트 중...</div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // 데스크톱: 기존 absolute positioning
   return (
     <div
       className="absolute overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm"
@@ -337,16 +427,13 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {/* 헤더 (showHeader가 false가 아닐 때만 표시) */}
       {element.showHeader !== false && (
         <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
           <h3 className="text-sm font-semibold text-gray-800">{element.customTitle || element.title}</h3>
-
-          {/* 새로고침 버튼 (항상 렌더링하되 opacity로 제어) */}
           <button
             onClick={onRefresh}
             disabled={isLoading}
-            className={`hover:text-muted-foreground text-gray-400 transition-opacity disabled:opacity-50 ${
+            className={`text-gray-400 transition-opacity hover:text-gray-600 disabled:opacity-50 ${
               isHovered ? "opacity-100" : "opacity-0"
             }`}
             title="새로고침"
@@ -359,8 +446,6 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
           </button>
         </div>
       )}
-
-      {/* 내용 */}
       <div className={element.showHeader !== false ? "h-[calc(100%-57px)]" : "h-full"}>
         {element.type === "chart" ? (
           <ChartRenderer element={element} data={data} width={element.size.width} height={element.size.height - 57} />
@@ -368,13 +453,11 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
           renderWidget(element)
         )}
       </div>
-
-      {/* 로딩 오버레이 */}
       {isLoading && (
         <div className="bg-opacity-75 absolute inset-0 flex items-center justify-center bg-white">
           <div className="text-center">
-            <div className="border-primary mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
-            <div className="text-muted-foreground text-sm">업데이트 중...</div>
+            <div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+            <div className="text-sm text-gray-600">업데이트 중...</div>
           </div>
         </div>
       )}

frontend/components/flow/FlowConditionBuilder.tsx

@@ -16,6 +16,8 @@ import { getTableColumns } from "@/lib/api/tableManagement";
 interface FlowConditionBuilderProps {
   flowId: number;
   tableName?: string; // 조회할 테이블명
+  dbSourceType?: "internal" | "external"; // DB 소스 타입
+  dbConnectionId?: number; // 외부 DB 연결 ID
   condition?: FlowConditionGroup;
   onChange: (condition: FlowConditionGroup | undefined) => void;
 }
@@ -35,7 +37,14 @@ const OPERATORS: { value: ConditionOperator; label: string }[] = [
   { value: "is_not_null", label: "NOT NULL" },
 ];
 
-export function FlowConditionBuilder({ flowId, tableName, condition, onChange }: FlowConditionBuilderProps) {
+export function FlowConditionBuilder({
+  flowId,
+  tableName,
+  dbSourceType = "internal",
+  dbConnectionId,
+  condition,
+  onChange,
+}: FlowConditionBuilderProps) {
   const [columns, setColumns] = useState<any[]>([]);
   const [loadingColumns, setLoadingColumns] = useState(false);
   const [conditionType, setConditionType] = useState<"AND" | "OR">(condition?.type || "AND");
@@ -52,7 +61,7 @@ export function FlowConditionBuilder({ flowId, tableName, condition, onChange }:
     }
   }, [condition]);
 
-  // 테이블 컬럼 로드
+  // 테이블 컬럼 로드 - 내부/외부 DB 모두 지원
   useEffect(() => {
     if (!tableName) {
       setColumns([]);
@@ -62,17 +71,69 @@ export function FlowConditionBuilder({ flowId, tableName, condition, onChange }:
     const loadColumns = async () => {
       try {
         setLoadingColumns(true);
-        console.log("🔍 Loading columns for table:", tableName);
-        const response = await getTableColumns(tableName);
-        console.log("📦 Column API response:", response);
+        console.log("🔍 [FlowConditionBuilder] Loading columns:", {
+          tableName,
+          dbSourceType,
+          dbConnectionId,
+        });
 
-        if (response.success && response.data?.columns) {
-          const columnArray = Array.isArray(response.data.columns) ? response.data.columns : [];
-          console.log("✅ Setting columns:", columnArray.length, "items");
-          setColumns(columnArray);
+        // 외부 DB인 경우
+        if (dbSourceType === "external" && dbConnectionId) {
+          const token = localStorage.getItem("authToken");
+          if (!token) {
+            console.warn("토큰이 없습니다. 외부 DB 컬럼 목록을 조회할 수 없습니다.");
+            setColumns([]);
+            return;
+          }
+
+          const response = await fetch(
+            `/api/multi-connection/connections/${dbConnectionId}/tables/${tableName}/columns`,
+            {
+              credentials: "include",
+              headers: {
+                Authorization: `Bearer ${token}`,
+                "Content-Type": "application/json",
+              },
+            },
+          ).catch((err) => {
+            console.warn("외부 DB 컬럼 fetch 실패:", err);
+            return null;
+          });
+
+          if (response && response.ok) {
+            const result = await response.json();
+            console.log("✅ [FlowConditionBuilder] External columns response:", result);
+
+            if (result.success && result.data) {
+              const columnList = Array.isArray(result.data)
+                ? result.data.map((col: any) => ({
+                    column_name: col.column_name || col.columnName || col.name,
+                    data_type: col.data_type || col.dataType || col.type,
+                  }))
+                : [];
+              console.log("✅ Setting external columns:", columnList.length, "items");
+              setColumns(columnList);
+            } else {
+              console.warn("❌ No data in external columns response");
+              setColumns([]);
+            }
+          } else {
+            console.warn(`외부 DB 컬럼 조회 실패: ${response?.status}`);
+            setColumns([]);
+          }
         } else {
-          console.error("❌ Failed to load columns:", response.message);
-          setColumns([]);
+          // 내부 DB인 경우 (기존 로직)
+          const response = await getTableColumns(tableName);
+          console.log("📦 [FlowConditionBuilder] Internal columns response:", response);
+
+          if (response.success && response.data?.columns) {
+            const columnArray = Array.isArray(response.data.columns) ? response.data.columns : [];
+            console.log("✅ Setting internal columns:", columnArray.length, "items");
+            setColumns(columnArray);
+          } else {
+            console.error("❌ Failed to load internal columns:", response.message);
+            setColumns([]);
+          }
         }
       } catch (error) {
         console.error("❌ Exception loading columns:", error);
@@ -83,7 +144,7 @@ export function FlowConditionBuilder({ flowId, tableName, condition, onChange }:
     };
 
     loadColumns();
-  }, [tableName]);
+  }, [tableName, dbSourceType, dbConnectionId]);
 
   // 조건 변경 시 부모에 전달
   useEffect(() => {
@@ -182,14 +243,20 @@ export function FlowConditionBuilder({ flowId, tableName, condition, onChange }:
                       <SelectValue placeholder="컬럼 선택" />
                     </SelectTrigger>
                     <SelectContent>
-                      {columns.map((col) => (
-                        <SelectItem key={col.columnName} value={col.columnName}>
-                          <div className="flex items-center gap-2">
-                            <span className="font-medium">{col.displayName || col.columnName}</span>
-                            <span className="text-xs text-gray-500">({col.dataType})</span>
-                          </div>
-                        </SelectItem>
-                      ))}
+                      {columns.map((col, idx) => {
+                        const columnName = col.column_name || col.columnName || "";
+                        const dataType = col.data_type || col.dataType || "";
+                        const displayName = col.displayName || col.display_name || columnName;
+
+                        return (
+                          <SelectItem key={`${columnName}-${idx}`} value={columnName}>
+                            <div className="flex items-center gap-2">
+                              <span className="font-medium">{displayName}</span>
+                              <span className="text-xs text-gray-500">({dataType})</span>
+                            </div>
+                          </SelectItem>
+                        );
+                      })}
                     </SelectContent>
                   </Select>
                 )}

frontend/components/flow/FlowStepPanel.tsx

@@ -31,16 +31,35 @@ import { Textarea } from "@/components/ui/textarea";
 interface FlowStepPanelProps {
   step: FlowStep;
   flowId: number;
+  flowTableName?: string; // 플로우 정의에서 선택한 테이블명
+  flowDbSourceType?: "internal" | "external"; // 플로우의 DB 소스 타입
+  flowDbConnectionId?: number; // 플로우의 외부 DB 연결 ID
   onClose: () => void;
   onUpdate: () => void;
 }
 
-export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanelProps) {
+export function FlowStepPanel({
+  step,
+  flowId,
+  flowTableName,
+  flowDbSourceType = "internal",
+  flowDbConnectionId,
+  onClose,
+  onUpdate,
+}: FlowStepPanelProps) {
   const { toast } = useToast();
 
+  console.log("🎯 FlowStepPanel Props:", {
+    stepTableName: step.tableName,
+    flowTableName,
+    flowDbSourceType,
+    flowDbConnectionId,
+    final: step.tableName || flowTableName || "",
+  });
+
   const [formData, setFormData] = useState({
     stepName: step.stepName,
-    tableName: step.tableName || "",
+    tableName: step.tableName || flowTableName || "", // 플로우 테이블명 우선 사용 (신규 방식)
     conditionJson: step.conditionJson,
     // 하이브리드 모드 필드
     moveType: step.moveType || "status",
@@ -215,11 +234,12 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
       stepName: step.stepName,
       statusColumn: step.statusColumn,
       statusValue: step.statusValue,
+      flowTableName, // 플로우 정의의 테이블명
     });
 
     const newFormData = {
       stepName: step.stepName,
-      tableName: step.tableName || "",
+      tableName: step.tableName || flowTableName || "", // 플로우 테이블명 우선 사용
       conditionJson: step.conditionJson,
       // 하이브리드 모드 필드
       moveType: step.moveType || "status",
@@ -234,9 +254,9 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
 
     console.log("✅ Setting formData:", newFormData);
     setFormData(newFormData);
-  }, [step.id]); // step 전체가 아닌 step.id만 의존성으로 설정
+  }, [step.id, flowTableName]); // flowTableName도 의존성 추가
 
-  // 테이블 선택 시 컬럼 로드
+  // 테이블 선택 시 컬럼 로드 - 내부/외부 DB 모두 지원
   useEffect(() => {
     const loadColumns = async () => {
       if (!formData.tableName) {
@@ -246,16 +266,70 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
 
       try {
         setLoadingColumns(true);
-        console.log("🔍 Loading columns for status column selector:", formData.tableName);
-        const response = await getTableColumns(formData.tableName);
-        console.log("📦 Columns response:", response);
+        console.log("🔍 Loading columns for status column selector:", {
+          tableName: formData.tableName,
+          flowDbSourceType,
+          flowDbConnectionId,
+        });
 
-        if (response.success && response.data && response.data.columns) {
-          console.log("✅ Setting columns:", response.data.columns);
-          setColumns(response.data.columns);
+        // 외부 DB인 경우
+        if (flowDbSourceType === "external" && flowDbConnectionId) {
+          const token = localStorage.getItem("authToken");
+          if (!token) {
+            console.warn("토큰이 없습니다. 외부 DB 컬럼 목록을 조회할 수 없습니다.");
+            setColumns([]);
+            return;
+          }
+
+          // 외부 DB 컬럼 조회 API
+          const response = await fetch(
+            `/api/multi-connection/connections/${flowDbConnectionId}/tables/${formData.tableName}/columns`,
+            {
+              credentials: "include",
+              headers: {
+                Authorization: `Bearer ${token}`,
+                "Content-Type": "application/json",
+              },
+            },
+          ).catch((err) => {
+            console.warn("외부 DB 컬럼 목록 fetch 실패:", err);
+            return null;
+          });
+
+          if (response && response.ok) {
+            const result = await response.json();
+            console.log("✅ External columns API response:", result);
+
+            if (result.success && result.data) {
+              // 컬럼 데이터 형식 통일
+              const columnList = Array.isArray(result.data)
+                ? result.data.map((col: any) => ({
+                    column_name: col.column_name || col.columnName || col.name,
+                    data_type: col.data_type || col.dataType || col.type,
+                  }))
+                : [];
+              console.log("✅ Setting external columns:", columnList);
+              setColumns(columnList);
+            } else {
+              console.warn("❌ No data in external columns response");
+              setColumns([]);
+            }
+          } else {
+            console.warn(`외부 DB 컬럼 목록 조회 실패: ${response?.status || "네트워크 오류"}`);
+            setColumns([]);
+          }
         } else {
-          console.log("❌ No columns in response");
-          setColumns([]);
+          // 내부 DB인 경우 (기존 로직)
+          const response = await getTableColumns(formData.tableName);
+          console.log("📦 Internal columns response:", response);
+
+          if (response.success && response.data && response.data.columns) {
+            console.log("✅ Setting internal columns:", response.data.columns);
+            setColumns(response.data.columns);
+          } else {
+            console.log("❌ No columns in response");
+            setColumns([]);
+          }
         }
       } catch (error) {
         console.error("Failed to load columns:", error);
@@ -266,7 +340,7 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
     };
 
     loadColumns();
-  }, [formData.tableName]);
+  }, [formData.tableName, flowDbSourceType, flowDbConnectionId]);
 
   // formData의 최신 값을 항상 참조하기 위한 ref
   const formDataRef = useRef(formData);
@@ -280,6 +354,27 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
   const handleSave = useCallback(async () => {
     const currentFormData = formDataRef.current;
     console.log("🚀 handleSave called, formData:", JSON.stringify(currentFormData, null, 2));
+
+    // 상태 변경 방식일 때 필수 필드 검증
+    if (currentFormData.moveType === "status") {
+      if (!currentFormData.statusColumn) {
+        toast({
+          title: "입력 오류",
+          description: "상태 변경 방식을 사용하려면 '상태 컬럼명'을 반드시 지정해야 합니다.",
+          variant: "destructive",
+        });
+        return;
+      }
+      if (!currentFormData.statusValue) {
+        toast({
+          title: "입력 오류",
+          description: "상태 변경 방식을 사용하려면 '이 단계의 상태값'을 반드시 지정해야 합니다.",
+          variant: "destructive",
+        });
+        return;
+      }
+    }
+
     try {
       const response = await updateFlowStep(step.id, currentFormData);
       console.log("📡 API response:", response);
@@ -368,8 +463,9 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
               <Input value={step.stepOrder} disabled />
             </div>
 
+            {/* ===== 구버전: 단계별 테이블 선택 방식 (주석처리) ===== */}
             {/* DB 소스 선택 */}
-            <div>
+            {/* <div>
               <Label>데이터베이스 소스</Label>
               <Select
                 value={selectedDbSource.toString()}
@@ -393,10 +489,10 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
                 </SelectContent>
               </Select>
               <p className="mt-1 text-xs text-gray-500">조회할 데이터베이스를 선택합니다</p>
-            </div>
+            </div> */}
 
             {/* 테이블 선택 */}
-            <div>
+            {/* <div>
               <Label>조회할 테이블</Label>
               <Popover open={openTableCombobox} onOpenChange={setOpenTableCombobox}>
                 <PopoverTrigger asChild>
@@ -478,7 +574,16 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
                   ? "이 단계에서 조건을 적용할 테이블을 선택합니다"
                   : "외부 데이터베이스의 테이블을 선택합니다"}
               </p>
+            </div> */}
+            {/* ===== 구버전 끝 ===== */}
+
+            {/* ===== 신버전: 플로우에서 선택한 테이블 표시만 ===== */}
+            <div>
+              <Label>연결된 테이블</Label>
+              <Input value={formData.tableName || "테이블이 지정되지 않았습니다"} disabled className="bg-gray-50" />
+              <p className="mt-1 text-xs text-gray-500">플로우 생성 시 선택한 테이블입니다 (수정 불가)</p>
             </div>
+            {/* ===== 신버전 끝 ===== */}
           </CardContent>
         </Card>
 
@@ -495,6 +600,8 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
               <FlowConditionBuilder
                 flowId={flowId}
                 tableName={formData.tableName}
+                dbSourceType={flowDbSourceType}
+                dbConnectionId={flowDbConnectionId}
                 condition={formData.conditionJson}
                 onChange={(condition) => setFormData({ ...formData, conditionJson: condition })}
               />
@@ -559,8 +666,12 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
                         {loadingColumns
                           ? "컬럼 로딩 중..."
                           : formData.statusColumn
-                            ? columns.find((col) => col.columnName === formData.statusColumn)?.columnName ||
-                              formData.statusColumn
+                            ? (() => {
+                                const col = columns.find(
+                                  (c) => (c.column_name || c.columnName) === formData.statusColumn,
+                                );
+                                return col ? col.column_name || col.columnName : formData.statusColumn;
+                              })()
                             : "상태 컬럼 선택"}
                         <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                       </Button>
@@ -571,27 +682,32 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
                         <CommandList>
                           <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
                           <CommandGroup>
-                            {columns.map((column) => (
-                              <CommandItem
-                                key={column.columnName}
-                                value={column.columnName}
-                                onSelect={() => {
-                                  setFormData({ ...formData, statusColumn: column.columnName });
-                                  setOpenStatusColumnCombobox(false);
-                                }}
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-4 w-4",
-                                    formData.statusColumn === column.columnName ? "opacity-100" : "opacity-0",
-                                  )}
-                                />
-                                <div>
-                                  <div>{column.columnName}</div>
-                                  <div className="text-xs text-gray-500">({column.dataType})</div>
-                                </div>
-                              </CommandItem>
-                            ))}
+                            {columns.map((column, idx) => {
+                              const columnName = column.column_name || column.columnName || "";
+                              const dataType = column.data_type || column.dataType || "";
+
+                              return (
+                                <CommandItem
+                                  key={`${columnName}-${idx}`}
+                                  value={columnName}
+                                  onSelect={() => {
+                                    setFormData({ ...formData, statusColumn: columnName });
+                                    setOpenStatusColumnCombobox(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.statusColumn === columnName ? "opacity-100" : "opacity-0",
+                                    )}
+                                  />
+                                  <div>
+                                    <div>{columnName}</div>
+                                    <div className="text-xs text-gray-500">({dataType})</div>
+                                  </div>
+                                </CommandItem>
+                              );
+                            })}
                           </CommandGroup>
                         </CommandList>
                       </Command>

frontend/components/screen/CreateScreenModal.tsx

@@ -6,7 +6,10 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Search, X } from "lucide-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Search, X, Check, ChevronsUpDown, Database } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { screenApi, tableTypeApi } from "@/lib/api/screen";
 import { ScreenDefinition } from "@/types/screen";
 import { useAuth } from "@/hooks/useAuth";
@@ -28,6 +31,13 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
   const [submitting, setSubmitting] = useState(false);
   const [tableSearchTerm, setTableSearchTerm] = useState("");
   const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // 외부 DB 연결 관련 상태
+  const [selectedDbSource, setSelectedDbSource] = useState<"internal" | number>("internal");
+  const [externalConnections, setExternalConnections] = useState<any[]>([]);
+  const [externalTableList, setExternalTableList] = useState<string[]>([]);
+  const [loadingExternalTables, setLoadingExternalTables] = useState(false);
+  const [openDbSourceCombobox, setOpenDbSourceCombobox] = useState(false);
   // 화면 코드 자동 생성
   const generateCode = async () => {
     try {
@@ -39,6 +49,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
     }
   };
 
+  // 내부 DB 테이블 목록 로드
   useEffect(() => {
     if (!open) return;
     let abort = false;
@@ -48,7 +59,6 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
         if (abort) return;
         setTables(list.map((t) => ({ tableName: t.tableName, displayName: t.displayName || t.tableName })));
       } catch (e) {
-        // console.error("테이블 목록 조회 실패", e);
         setTables([]);
       }
     };
@@ -58,6 +68,83 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
     };
   }, [open]);
 
+  // 외부 DB 연결 목록 로드
+  useEffect(() => {
+    if (!open) return;
+    const loadConnections = async () => {
+      try {
+        const token = localStorage.getItem("authToken");
+        if (!token) {
+          console.warn("No auth token found");
+          return;
+        }
+
+        const response = await fetch("/api/external-db-connections/control/active", {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (response && response.ok) {
+          const data = await response.json();
+          if (data.success && data.data) {
+            const filtered = data.data.filter(
+              (conn: any) => !conn.connection_name.includes("메인") && !conn.connection_name.includes("현재 시스템"),
+            );
+            setExternalConnections(filtered);
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load external connections:", error);
+        setExternalConnections([]);
+      }
+    };
+    loadConnections();
+  }, [open]);
+
+  // 외부 DB 테이블 목록 로드
+  useEffect(() => {
+    if (selectedDbSource === "internal" || !selectedDbSource) {
+      setExternalTableList([]);
+      return;
+    }
+
+    const loadExternalTables = async () => {
+      try {
+        setLoadingExternalTables(true);
+        const token = localStorage.getItem("authToken");
+
+        const response = await fetch(`/api/multi-connection/connections/${selectedDbSource}/tables`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (response && response.ok) {
+          const data = await response.json();
+          if (data.success && data.data) {
+            const tables = Array.isArray(data.data) ? data.data : [];
+            const tableNames = tables
+              .map((t: any) => (typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name))
+              .filter(Boolean);
+            setExternalTableList(tableNames);
+          } else {
+            setExternalTableList([]);
+          }
+        } else {
+          setExternalTableList([]);
+        }
+      } catch (error) {
+        console.error("외부 DB 테이블 목록 조회 오류:", error);
+        setExternalTableList([]);
+      } finally {
+        setLoadingExternalTables(false);
+      }
+    };
+
+    loadExternalTables();
+  }, [selectedDbSource]);
+
   // 모달이 열릴 때 자동으로 화면 코드 생성
   useEffect(() => {
     if (open && !screenCode) {
@@ -69,7 +156,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
     return screenName.trim().length > 0 && screenCode.trim().length > 0 && tableName.trim().length > 0;
   }, [screenName, screenCode, tableName]);
 
-  // 테이블 필터링
+  // 테이블 필터링 (내부 DB용)
   const filteredTables = useMemo(() => {
     if (!tableSearchTerm) return tables;
     const searchLower = tableSearchTerm.toLowerCase();
@@ -79,11 +166,20 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
     );
   }, [tables, tableSearchTerm]);
 
+  // 외부 DB 테이블 필터링
+  const filteredExternalTables = useMemo(() => {
+    if (!tableSearchTerm) return externalTableList;
+    const searchLower = tableSearchTerm.toLowerCase();
+    return externalTableList.filter((table) => table.toLowerCase().includes(searchLower));
+  }, [externalTableList, tableSearchTerm]);
+
   const handleSubmit = async () => {
     if (!isValid || submitting) return;
     try {
       setSubmitting(true);
       const companyCode = (user as any)?.company_code || (user as any)?.companyCode || "*";
+
+      // DB 소스 정보 추가
       const created = await screenApi.createScreen({
         screenName: screenName.trim(),
         screenCode: screenCode.trim(),
@@ -91,6 +187,8 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
         companyCode,
         description: description.trim() || undefined,
         createdBy: (user as any)?.userId,
+        dbSourceType: selectedDbSource === "internal" ? "internal" : "external",
+        dbConnectionId: selectedDbSource === "internal" ? undefined : Number(selectedDbSource),
       } as any);
 
       // 날짜 필드 보정
@@ -106,8 +204,8 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
       setScreenCode("");
       setTableName("");
       setDescription("");
+      setSelectedDbSource("internal");
     } catch (e) {
-      // console.error("화면 생성 실패", e);
       // 필요 시 토스트 추가 가능
     } finally {
       setSubmitting(false);
@@ -136,14 +234,90 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
               className="cursor-not-allowed bg-gray-50"
             />
           </div>
+
+          {/* DB 소스 선택 */}
+          <div className="space-y-2">
+            <Label htmlFor="dbSource">데이터베이스 소스</Label>
+            <Popover open={openDbSourceCombobox} onOpenChange={setOpenDbSourceCombobox}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={openDbSourceCombobox}
+                  className="w-full justify-between"
+                >
+                  <div className="flex items-center gap-2">
+                    <Database className="h-4 w-4" />
+                    {selectedDbSource === "internal"
+                      ? "내부 데이터베이스"
+                      : externalConnections.find((conn) => conn.id === selectedDbSource)?.connection_name ||
+                        "선택하세요"}
+                  </div>
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <Command>
+                  <CommandInput placeholder="데이터베이스 검색..." />
+                  <CommandList>
+                    <CommandEmpty>데이터베이스를 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup>
+                      <CommandItem
+                        value="internal"
+                        onSelect={() => {
+                          setSelectedDbSource("internal");
+                          setTableName("");
+                          setTableSearchTerm("");
+                          setOpenDbSourceCombobox(false);
+                        }}
+                      >
+                        <Check
+                          className={cn("mr-2 h-4 w-4", selectedDbSource === "internal" ? "opacity-100" : "opacity-0")}
+                        />
+                        <Database className="mr-2 h-4 w-4 text-blue-500" />
+                        <div className="flex flex-col">
+                          <span className="font-medium">내부 데이터베이스</span>
+                          <span className="text-xs text-gray-500">PostgreSQL (현재 시스템)</span>
+                        </div>
+                      </CommandItem>
+                      {externalConnections.map((conn: any) => (
+                        <CommandItem
+                          key={conn.id}
+                          value={`${conn.connection_name} ${conn.db_type}`}
+                          onSelect={() => {
+                            setSelectedDbSource(conn.id);
+                            setTableName("");
+                            setTableSearchTerm("");
+                            setOpenDbSourceCombobox(false);
+                          }}
+                        >
+                          <Check
+                            className={cn("mr-2 h-4 w-4", selectedDbSource === conn.id ? "opacity-100" : "opacity-0")}
+                          />
+                          <Database className="mr-2 h-4 w-4 text-green-500" />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{conn.connection_name}</span>
+                            <span className="text-xs text-gray-500">{conn.db_type?.toUpperCase()}</span>
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            <p className="text-xs text-gray-500">화면에서 사용할 데이터베이스를 선택합니다</p>
+          </div>
+
+          {/* 테이블 선택 */}
           <div className="space-y-2">
             <Label htmlFor="tableName">테이블</Label>
             <Select
               value={tableName}
               onValueChange={setTableName}
+              disabled={loadingExternalTables}
               onOpenChange={(open) => {
                 if (open) {
-                  // Select가 열릴 때 검색창에 포커스
                   setTimeout(() => {
                     searchInputRef.current?.focus();
                   }, 100);
@@ -151,17 +325,11 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
               }}
             >
               <SelectTrigger className="w-full">
-                <SelectValue placeholder="테이블을 선택하세요" />
+                <SelectValue placeholder={loadingExternalTables ? "로딩 중..." : "테이블을 선택하세요"} />
               </SelectTrigger>
               <SelectContent className="max-h-80">
                 {/* 검색 입력 필드 */}
-                <div
-                  className="sticky top-0 z-10 border-b bg-white p-2"
-                  onKeyDown={(e) => {
-                    // 이 div 내에서 발생하는 모든 키 이벤트를 차단
-                    e.stopPropagation();
-                  }}
-                >
+                <div className="sticky top-0 z-10 border-b bg-white p-2" onKeyDown={(e) => e.stopPropagation()}>
                   <div className="relative">
                     <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
                     <input
@@ -174,10 +342,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
                         e.stopPropagation();
                         setTableSearchTerm(e.target.value);
                       }}
-                      onKeyDown={(e) => {
-                        // 이벤트가 Select로 전파되지 않도록 완전 차단
-                        e.stopPropagation();
-                      }}
+                      onKeyDown={(e) => e.stopPropagation()}
                       onClick={(e) => e.stopPropagation()}
                       onFocus={(e) => e.stopPropagation()}
                       onMouseDown={(e) => e.stopPropagation()}
@@ -200,14 +365,28 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
 
                 {/* 테이블 옵션들 */}
                 <div className="max-h-60 overflow-y-auto">
-                  {filteredTables.length === 0 ? (
+                  {selectedDbSource === "internal" ? (
+                    // 내부 DB 테이블 목록
+                    filteredTables.length === 0 ? (
+                      <div className="px-2 py-6 text-center text-sm text-gray-500">
+                        {tableSearchTerm ? `"${tableSearchTerm}"에 대한 검색 결과가 없습니다` : "테이블이 없습니다"}
+                      </div>
+                    ) : (
+                      filteredTables.map((table) => (
+                        <SelectItem key={table.tableName} value={table.tableName}>
+                          {table.displayName} ({table.tableName})
+                        </SelectItem>
+                      ))
+                    )
+                  ) : // 외부 DB 테이블 목록
+                  filteredExternalTables.length === 0 ? (
                     <div className="px-2 py-6 text-center text-sm text-gray-500">
                       {tableSearchTerm ? `"${tableSearchTerm}"에 대한 검색 결과가 없습니다` : "테이블이 없습니다"}
                     </div>
                   ) : (
-                    filteredTables.map((table) => (
-                      <SelectItem key={table.tableName} value={table.tableName}>
-                        {table.displayName} ({table.tableName})
+                    filteredExternalTables.map((tableName) => (
+                      <SelectItem key={tableName} value={tableName}>
+                        {tableName}
                       </SelectItem>
                     ))
                   )}
@@ -215,6 +394,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
               </SelectContent>
             </Select>
           </div>
+
           <div className="space-y-2">
             <Label htmlFor="description">설명</Label>
             <Input id="description" value={description} onChange={(e) => setDescription(e.target.value)} />

frontend/components/screen/config-panels/ButtonConfigPanel.tsx

@@ -27,6 +27,24 @@ interface ScreenOption {
 
 export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component, onUpdateProperty }) => {
   const config = component.componentConfig || {};
+
+  // 로컬 상태 관리 (실시간 입력 반영)
+  const [localInputs, setLocalInputs] = useState({
+    text: config.text || "버튼",
+    modalTitle: config.action?.modalTitle || "",
+    editModalTitle: config.action?.editModalTitle || "",
+    editModalDescription: config.action?.editModalDescription || "",
+    targetUrl: config.action?.targetUrl || "",
+  });
+
+  const [localSelects, setLocalSelects] = useState({
+    variant: config.variant || "default",
+    size: config.size || "default",
+    actionType: config.action?.type || "save",
+    modalSize: config.action?.modalSize || "md",
+    editMode: config.action?.editMode || "modal",
+  });
+
   const [screens, setScreens] = useState<ScreenOption[]>([]);
   const [screensLoading, setScreensLoading] = useState(false);
   const [modalScreenOpen, setModalScreenOpen] = useState(false);
@@ -34,6 +52,36 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
   const [modalSearchTerm, setModalSearchTerm] = useState("");
   const [navSearchTerm, setNavSearchTerm] = useState("");
 
+  // 컴포넌트 변경 시 로컬 상태 동기화
+  useEffect(() => {
+    setLocalInputs({
+      text: config.text || "버튼",
+      modalTitle: config.action?.modalTitle || "",
+      editModalTitle: config.action?.editModalTitle || "",
+      editModalDescription: config.action?.editModalDescription || "",
+      targetUrl: config.action?.targetUrl || "",
+    });
+
+    setLocalSelects({
+      variant: config.variant || "default",
+      size: config.size || "default",
+      actionType: config.action?.type || "save",
+      modalSize: config.action?.modalSize || "md",
+      editMode: config.action?.editMode || "modal",
+    });
+  }, [
+    config.text,
+    config.variant,
+    config.size,
+    config.action?.type,
+    config.action?.modalTitle,
+    config.action?.modalSize,
+    config.action?.editMode,
+    config.action?.editModalTitle,
+    config.action?.editModalDescription,
+    config.action?.targetUrl,
+  ]);
+
   // 화면 목록 가져오기
   useEffect(() => {
     const fetchScreens = async () => {
@@ -86,8 +134,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
         <Label htmlFor="button-text">버튼 텍스트</Label>
         <Input
           id="button-text"
-          value={config.text || "버튼"}
-          onChange={(e) => onUpdateProperty("componentConfig.text", e.target.value)}
+          value={localInputs.text}
+          onChange={(e) => {
+            const newValue = e.target.value;
+            setLocalInputs((prev) => ({ ...prev, text: newValue }));
+            onUpdateProperty("componentConfig.text", newValue);
+          }}
           placeholder="버튼 텍스트를 입력하세요"
         />
       </div>
@@ -95,8 +147,11 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
       <div>
         <Label htmlFor="button-variant">버튼 스타일</Label>
         <Select
-          value={config.variant || "default"}
-          onValueChange={(value) => onUpdateProperty("componentConfig.variant", value)}
+          value={localSelects.variant}
+          onValueChange={(value) => {
+            setLocalSelects((prev) => ({ ...prev, variant: value }));
+            onUpdateProperty("componentConfig.variant", value);
+          }}
         >
           <SelectTrigger>
             <SelectValue placeholder="버튼 스타일 선택" />
@@ -116,8 +171,11 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
       <div>
         <Label htmlFor="button-size">버튼 크기</Label>
         <Select
-          value={config.size || "default"}
-          onValueChange={(value) => onUpdateProperty("componentConfig.size", value)}
+          value={localSelects.size}
+          onValueChange={(value) => {
+            setLocalSelects((prev) => ({ ...prev, size: value }));
+            onUpdateProperty("componentConfig.size", value);
+          }}
         >
           <SelectTrigger>
             <SelectValue placeholder="버튼 크기 선택" />
@@ -133,25 +191,27 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
       <div>
         <Label htmlFor="button-action">버튼 액션</Label>
         <Select
-          value={config.action?.type || "save"}
-          defaultValue="save"
+          value={localSelects.actionType}
           onValueChange={(value) => {
-            // 액션 설정 업데이트
-            onUpdateProperty("componentConfig.action", { type: value });
-            
-            // 액션에 따른 라벨 색상 자동 설정
-            if (value === 'delete') {
+            console.log("🔵 버튼 액션 변경:", {
+              oldValue: localSelects.actionType,
+              newValue: value,
+              componentId: component.id,
+            });
+
+            // 로컬 상태 업데이트
+            setLocalSelects((prev) => ({ ...prev, actionType: value }));
+
+            // 액션 타입 업데이트
+            onUpdateProperty("componentConfig.action.type", value);
+
+            // 액션에 따른 라벨 색상 자동 설정 (별도 호출)
+            if (value === "delete") {
               // 삭제 액션일 때 빨간색으로 설정
-              onUpdateProperty("style", {
-                ...component.style,
-                labelColor: '#ef4444'
-              });
+              onUpdateProperty("style.labelColor", "#ef4444");
             } else {
-              // 다른 액션일 때 기본 파란색으로 리셋
-              onUpdateProperty("style", {
-                ...component.style,
-                labelColor: '#212121'
-              });
+              // 다른 액션일 때 기본색으로 리셋
+              onUpdateProperty("style.labelColor", "#212121");
             }
           }}
         >
@@ -176,7 +236,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
       </div>
 
       {/* 모달 열기 액션 설정 */}
-      {config.action?.type === "modal" && (
+      {localSelects.actionType === "modal" && (
         <div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
           <h4 className="text-sm font-medium text-gray-700">모달 설정</h4>
 
@@ -185,26 +245,29 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
             <Input
               id="modal-title"
               placeholder="모달 제목을 입력하세요"
-              value={config.action?.modalTitle || ""}
-              onChange={(e) =>
+              value={localInputs.modalTitle}
+              onChange={(e) => {
+                const newValue = e.target.value;
+                setLocalInputs((prev) => ({ ...prev, modalTitle: newValue }));
                 onUpdateProperty("componentConfig.action", {
                   ...config.action,
-                  modalTitle: e.target.value,
-                })
-              }
+                  modalTitle: newValue,
+                });
+              }}
             />
           </div>
 
           <div>
             <Label htmlFor="modal-size">모달 크기</Label>
             <Select
-              value={config.action?.modalSize || "md"}
-              onValueChange={(value) =>
+              value={localSelects.modalSize}
+              onValueChange={(value) => {
+                setLocalSelects((prev) => ({ ...prev, modalSize: value }));
                 onUpdateProperty("componentConfig.action", {
                   ...config.action,
                   modalSize: value,
-                })
-              }
+                });
+              }}
             >
               <SelectTrigger>
                 <SelectValue placeholder="모달 크기 선택" />
@@ -293,7 +356,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
       )}
 
       {/* 수정 액션 설정 */}
-      {config.action?.type === "edit" && (
+      {localSelects.actionType === "edit" && (
         <div className="mt-4 space-y-4 rounded-lg border bg-green-50 p-4">
           <h4 className="text-sm font-medium text-gray-700">수정 설정</h4>
 
@@ -375,13 +438,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
           <div>
             <Label htmlFor="edit-mode">수정 모드</Label>
             <Select
-              value={config.action?.editMode || "modal"}
-              onValueChange={(value) =>
+              value={localSelects.editMode}
+              onValueChange={(value) => {
+                setLocalSelects((prev) => ({ ...prev, editMode: value }));
                 onUpdateProperty("componentConfig.action", {
                   ...config.action,
                   editMode: value,
-                })
-              }
+                });
+              }}
             >
               <SelectTrigger>
                 <SelectValue placeholder="수정 모드 선택" />
@@ -394,16 +458,17 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
             </Select>
           </div>
 
-          {config.action?.editMode === "modal" && (
+          {localSelects.editMode === "modal" && (
             <>
               <div>
                 <Label htmlFor="edit-modal-title">모달 제목</Label>
                 <Input
                   id="edit-modal-title"
                   placeholder="모달 제목을 입력하세요 (예: 데이터 수정)"
-                  value={config.action?.editModalTitle || ""}
+                  value={localInputs.editModalTitle}
                   onChange={(e) => {
                     const newValue = e.target.value;
+                    setLocalInputs((prev) => ({ ...prev, editModalTitle: newValue }));
                     onUpdateProperty("componentConfig.action", {
                       ...config.action,
                       editModalTitle: newValue,
@@ -420,9 +485,10 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                 <Input
                   id="edit-modal-description"
                   placeholder="모달 설명을 입력하세요 (예: 선택한 데이터를 수정합니다)"
-                  value={config.action?.editModalDescription || ""}
+                  value={localInputs.editModalDescription}
                   onChange={(e) => {
                     const newValue = e.target.value;
+                    setLocalInputs((prev) => ({ ...prev, editModalDescription: newValue }));
                     onUpdateProperty("componentConfig.action", {
                       ...config.action,
                       editModalDescription: newValue,
@@ -437,13 +503,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
               <div>
                 <Label htmlFor="edit-modal-size">모달 크기</Label>
                 <Select
-                  value={config.action?.modalSize || "lg"}
-                  onValueChange={(value) =>
+                  value={localSelects.modalSize}
+                  onValueChange={(value) => {
+                    setLocalSelects((prev) => ({ ...prev, modalSize: value }));
                     onUpdateProperty("componentConfig.action", {
                       ...config.action,
                       modalSize: value,
-                    })
-                  }
+                    });
+                  }}
                 >
                   <SelectTrigger>
                     <SelectValue placeholder="모달 크기 선택" />
@@ -463,7 +530,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
       )}
 
       {/* 페이지 이동 액션 설정 */}
-      {config.action?.type === "navigate" && (
+      {localSelects.actionType === "navigate" && (
         <div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
           <h4 className="text-sm font-medium text-gray-700">페이지 이동 설정</h4>
 
@@ -547,13 +614,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
             <Input
               id="target-url"
               placeholder="예: /admin/users 또는 https://example.com"
-              value={config.action?.targetUrl || ""}
-              onChange={(e) =>
+              value={localInputs.targetUrl}
+              onChange={(e) => {
+                const newValue = e.target.value;
+                setLocalInputs((prev) => ({ ...prev, targetUrl: newValue }));
                 onUpdateProperty("componentConfig.action", {
                   ...config.action,
-                  targetUrl: e.target.value,
-                })
-              }
+                  targetUrl: newValue,
+                });
+              }}
             />
             <p className="mt-1 text-xs text-gray-500">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
           </div>
@@ -564,7 +633,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
       <div className="mt-8 border-t border-gray-200 pt-6">
         <div className="mb-4">
           <h3 className="text-lg font-medium text-gray-900">🔧 고급 기능</h3>
-          <p className="mt-1 text-sm text-muted-foreground">버튼 액션과 함께 실행될 추가 기능을 설정합니다</p>
+          <p className="text-muted-foreground mt-1 text-sm">버튼 액션과 함께 실행될 추가 기능을 설정합니다</p>
         </div>
 
         <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />

frontend/components/screen/widgets/FlowWidget.tsx

@@ -397,6 +397,7 @@ export function FlowWidget({ component, onStepClick }: FlowWidgetProps) {
                             <TableHead className="w-[100px]">데이터 ID</TableHead>
                             <TableHead className="w-[140px]">상태 변경</TableHead>
                             <TableHead className="w-[100px]">변경자</TableHead>
+                            <TableHead className="w-[150px]">DB 연결</TableHead>
                             <TableHead>테이블</TableHead>
                           </TableRow>
                         </TableHeader>
@@ -450,6 +451,21 @@ export function FlowWidget({ component, onStepClick }: FlowWidgetProps) {
                                   )}
                                 </TableCell>
                                 <TableCell className="text-xs">{log.changedBy}</TableCell>
+                                <TableCell className="text-xs">
+                                  {log.dbConnectionName ? (
+                                    <span
+                                      className={
+                                        log.dbConnectionName === "내부 데이터베이스"
+                                          ? "text-blue-600"
+                                          : "text-green-600"
+                                      }
+                                    >
+                                      {log.dbConnectionName}
+                                    </span>
+                                  ) : (
+                                    <span className="text-muted-foreground">-</span>
+                                  )}
+                                </TableCell>
                                 <TableCell className="text-xs">
                                   {log.sourceTable || "-"}
                                   {log.targetTable && log.targetTable !== log.sourceTable && (

frontend/lib/api/externalRestApiConnection.ts

@@ -0,0 +1,188 @@
+// REST API 연결 관리 API 클라이언트
+
+import { apiClient } from "./client";
+
+export type AuthType = "none" | "api-key" | "bearer" | "basic" | "oauth2";
+
+export interface ExternalRestApiConnection {
+  id?: number;
+  connection_name: string;
+  description?: string;
+  base_url: string;
+  default_headers: Record<string, string>;
+  auth_type: AuthType;
+  auth_config?: {
+    keyLocation?: "header" | "query";
+    keyName?: string;
+    keyValue?: string;
+    token?: string;
+    username?: string;
+    password?: string;
+    clientId?: string;
+    clientSecret?: string;
+    tokenUrl?: string;
+    accessToken?: string;
+  };
+  timeout?: number;
+  retry_count?: number;
+  retry_delay?: number;
+  company_code: string;
+  is_active: string;
+  created_date?: Date;
+  created_by?: string;
+  updated_date?: Date;
+  updated_by?: string;
+  last_test_date?: Date;
+  last_test_result?: string;
+  last_test_message?: string;
+}
+
+export interface ExternalRestApiConnectionFilter {
+  auth_type?: string;
+  is_active?: string;
+  company_code?: string;
+  search?: string;
+}
+
+export interface RestApiTestRequest {
+  id?: number;
+  base_url: string;
+  endpoint?: string;
+  method?: "GET" | "POST" | "PUT" | "DELETE";
+  headers?: Record<string, string>;
+  auth_type?: AuthType;
+  auth_config?: any;
+  timeout?: number;
+}
+
+export interface RestApiTestResult {
+  success: boolean;
+  message: string;
+  response_time?: number;
+  status_code?: number;
+  response_data?: any;
+  error_details?: string;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: {
+    code: string;
+    details?: any;
+  };
+}
+
+export class ExternalRestApiConnectionAPI {
+  private static readonly BASE_PATH = "/external-rest-api-connections";
+
+  /**
+   * 연결 목록 조회
+   */
+  static async getConnections(filter?: ExternalRestApiConnectionFilter): Promise<ExternalRestApiConnection[]> {
+    const params = new URLSearchParams();
+
+    if (filter?.search) params.append("search", filter.search);
+    if (filter?.auth_type && filter.auth_type !== "ALL") {
+      params.append("auth_type", filter.auth_type);
+    }
+    if (filter?.is_active && filter.is_active !== "ALL") {
+      params.append("is_active", filter.is_active);
+    }
+    if (filter?.company_code) {
+      params.append("company_code", filter.company_code);
+    }
+
+    const url = params.toString() ? `${this.BASE_PATH}?${params}` : this.BASE_PATH;
+    const response = await apiClient.get<ApiResponse<ExternalRestApiConnection[]>>(url);
+
+    if (!response.data.success) {
+      throw new Error(response.data.message || "연결 목록 조회에 실패했습니다.");
+    }
+
+    return response.data.data || [];
+  }
+
+  /**
+   * 연결 상세 조회
+   */
+  static async getConnectionById(id: number): Promise<ExternalRestApiConnection> {
+    const response = await apiClient.get<ApiResponse<ExternalRestApiConnection>>(`${this.BASE_PATH}/${id}`);
+
+    if (!response.data.success) {
+      throw new Error(response.data.message || "연결 조회에 실패했습니다.");
+    }
+
+    return response.data.data!;
+  }
+
+  /**
+   * 연결 생성
+   */
+  static async createConnection(data: ExternalRestApiConnection): Promise<ExternalRestApiConnection> {
+    const response = await apiClient.post<ApiResponse<ExternalRestApiConnection>>(this.BASE_PATH, data);
+
+    if (!response.data.success) {
+      throw new Error(response.data.message || "연결 생성에 실패했습니다.");
+    }
+
+    return response.data.data!;
+  }
+
+  /**
+   * 연결 수정
+   */
+  static async updateConnection(
+    id: number,
+    data: Partial<ExternalRestApiConnection>,
+  ): Promise<ExternalRestApiConnection> {
+    const response = await apiClient.put<ApiResponse<ExternalRestApiConnection>>(`${this.BASE_PATH}/${id}`, data);
+
+    if (!response.data.success) {
+      throw new Error(response.data.message || "연결 수정에 실패했습니다.");
+    }
+
+    return response.data.data!;
+  }
+
+  /**
+   * 연결 삭제
+   */
+  static async deleteConnection(id: number): Promise<void> {
+    const response = await apiClient.delete<ApiResponse<void>>(`${this.BASE_PATH}/${id}`);
+
+    if (!response.data.success) {
+      throw new Error(response.data.message || "연결 삭제에 실패했습니다.");
+    }
+  }
+
+  /**
+   * 연결 테스트 (테스트 데이터 기반)
+   */
+  static async testConnection(testRequest: RestApiTestRequest): Promise<RestApiTestResult> {
+    const response = await apiClient.post<RestApiTestResult>(`${this.BASE_PATH}/test`, testRequest);
+    return response.data;
+  }
+
+  /**
+   * 연결 테스트 (ID 기반)
+   */
+  static async testConnectionById(id: number, endpoint?: string): Promise<RestApiTestResult> {
+    const response = await apiClient.post<RestApiTestResult>(`${this.BASE_PATH}/${id}/test`, { endpoint });
+    return response.data;
+  }
+
+  /**
+   * 지원되는 인증 타입 목록
+   */
+  static getSupportedAuthTypes(): Array<{ value: string; label: string }> {
+    return [
+      { value: "none", label: "인증 없음" },
+      { value: "api-key", label: "API Key" },
+      { value: "bearer", label: "Bearer Token" },
+      { value: "basic", label: "Basic Auth" },
+      { value: "oauth2", label: "OAuth 2.0" },
+    ];
+  }
+}

frontend/lib/api/flow.ts

@@ -21,6 +21,12 @@ import {
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || "/api";
 
+// 토큰 가져오기
+function getAuthToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem("authToken") || sessionStorage.getItem("authToken");
+}
+
 // ============================================
 // 플로우 정의 API
 // ============================================
@@ -364,10 +370,12 @@ export async function getAllStepCounts(flowId: number): Promise<ApiResponse<Flow
  */
 export async function moveData(data: MoveDataRequest): Promise<ApiResponse<{ success: boolean }>> {
   try {
+    const token = getAuthToken();
     const response = await fetch(`${API_BASE}/flow/move`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
+        ...(token && { Authorization: `Bearer ${token}` }),
       },
       credentials: "include",
       body: JSON.stringify(data),
@@ -404,10 +412,12 @@ export async function moveBatchData(
   data: MoveBatchDataRequest,
 ): Promise<ApiResponse<{ success: boolean; results: any[] }>> {
   try {
+    const token = getAuthToken();
     const response = await fetch(`${API_BASE}/flow/move-batch`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
+        ...(token && { Authorization: `Bearer ${token}` }),
       },
       credentials: "include",
       body: JSON.stringify(data),

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -200,12 +200,21 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
         // onChange 핸들러 - 컴포넌트 타입에 따라 다르게 처리
         const handleChange = (value: any) => {
+          // React 이벤트 객체인 경우 값 추출
+          let actualValue = value;
+          if (value && typeof value === "object" && value.nativeEvent && value.target) {
+            // SyntheticEvent인 경우 target.value 추출
+            actualValue = value.target.value;
+            console.log("⚠️ DynamicComponentRenderer: 이벤트 객체 감지, value 추출:", actualValue);
+          }
+
           console.log("🔄 DynamicComponentRenderer handleChange 호출:", {
             componentType,
             fieldName,
-            value,
-            valueType: typeof value,
-            isArray: Array.isArray(value),
+            originalValue: value,
+            actualValue,
+            valueType: typeof actualValue,
+            isArray: Array.isArray(actualValue),
           });
 
           if (onFormDataChange) {
@@ -213,11 +222,11 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
             // 단순 input 컴포넌트는 (fieldName, value) 형태로 전달받음
             if (componentType === "repeater-field-group" || componentType === "repeater") {
               // fieldName과 함께 전달
-              console.log("💾 RepeaterInput 데이터 저장:", fieldName, value);
-              onFormDataChange(fieldName, value);
+              console.log("💾 RepeaterInput 데이터 저장:", fieldName, actualValue);
+              onFormDataChange(fieldName, actualValue);
             } else {
               // 이미 fieldName이 포함된 경우는 그대로 전달
-              onFormDataChange(fieldName, value);
+              onFormDataChange(fieldName, actualValue);
             }
           }
         };

frontend/lib/registry/components/text-input/TextInputComponent.tsx

@@ -325,11 +325,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
               setEmailUsername(newUsername);
               const fullEmail = `${newUsername}@${emailDomain}`;
 
-              if (isInteractive && formData && onFormDataChange && component.columnName) {
-                onFormDataChange({
-                  ...formData,
-                  [component.columnName]: fullEmail,
-                });
+              if (isInteractive && onFormDataChange && component.columnName) {
+                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`}
@@ -367,11 +364,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
                     setEmailDomain(value);
                     const fullEmail = `${emailUsername}@${value}`;
 
-                    if (isInteractive && formData && onFormDataChange && component.columnName) {
-                      onFormDataChange({
-                        ...formData,
-                        [component.columnName]: fullEmail,
-                      });
+                    if (isInteractive && onFormDataChange && component.columnName) {
+                      onFormDataChange(component.columnName, fullEmail);
                     }
                   }}
                 />
@@ -388,11 +382,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
                             setEmailDomain(currentValue);
                             const fullEmail = `${emailUsername}@${currentValue}`;
 
-                            if (isInteractive && formData && onFormDataChange && component.columnName) {
-                              onFormDataChange({
-                                ...formData,
-                                [component.columnName]: fullEmail,
-                              });
+                            if (isInteractive && onFormDataChange && component.columnName) {
+                              onFormDataChange(component.columnName, fullEmail);
                             }
                             setEmailDomainOpen(false);
                           }}
@@ -437,11 +428,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
               setTelPart1(value);
               const fullTel = `${value}-${telPart2}-${telPart3}`;
 
-              if (isInteractive && formData && onFormDataChange && component.columnName) {
-                onFormDataChange({
-                  ...formData,
-                  [component.columnName]: fullTel,
-                });
+              if (isInteractive && onFormDataChange && component.columnName) {
+                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`}
@@ -462,11 +450,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
               setTelPart2(value);
               const fullTel = `${telPart1}-${value}-${telPart3}`;
 
-              if (isInteractive && formData && onFormDataChange && component.columnName) {
-                onFormDataChange({
-                  ...formData,
-                  [component.columnName]: fullTel,
-                });
+              if (isInteractive && onFormDataChange && component.columnName) {
+                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`}
@@ -487,11 +472,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
               setTelPart3(value);
               const fullTel = `${telPart1}-${telPart2}-${value}`;
 
-              if (isInteractive && formData && onFormDataChange && component.columnName) {
-                onFormDataChange({
-                  ...formData,
-                  [component.columnName]: fullTel,
-                });
+              if (isInteractive && onFormDataChange && component.columnName) {
+                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`}
@@ -523,11 +505,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
               setUrlProtocol(newProtocol);
               const fullUrl = `${newProtocol}${urlDomain}`;
 
-              if (isInteractive && formData && onFormDataChange && component.columnName) {
-                onFormDataChange({
-                  ...formData,
-                  [component.columnName]: fullUrl,
-                });
+              if (isInteractive && onFormDataChange && component.columnName) {
+                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`}
@@ -548,11 +527,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
               setUrlDomain(newDomain);
               const fullUrl = `${urlProtocol}${newDomain}`;
 
-              if (isInteractive && formData && onFormDataChange && component.columnName) {
-                onFormDataChange({
-                  ...formData,
-                  [component.columnName]: fullUrl,
-                });
+              if (isInteractive && onFormDataChange && component.columnName) {
+                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`}
@@ -595,11 +571,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
           required={componentConfig.required || false}
           readOnly={componentConfig.readonly || false}
           onChange={(e) => {
-            if (isInteractive && formData && onFormDataChange && component.columnName) {
-              onFormDataChange({
-                ...formData,
-                [component.columnName]: e.target.value,
-              });
+            if (isInteractive && onFormDataChange && component.columnName) {
+              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`}
@@ -625,10 +598,13 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
 
           if (isInteractive && formData && component.columnName) {
             // 인터랙티브 모드: formData 우선, 없으면 자동생성 값
-            displayValue = formData[component.columnName] || autoGeneratedValue || "";
+            const rawValue = formData[component.columnName] || autoGeneratedValue || "";
+            // 객체인 경우 빈 문자열로 변환 (에러 방지)
+            displayValue = typeof rawValue === "object" ? "" : String(rawValue);
           } else {
             // 디자인 모드: component.value 우선, 없으면 자동생성 값
-            displayValue = component.value || autoGeneratedValue || "";
+            const rawValue = component.value || autoGeneratedValue || "";
+            displayValue = typeof rawValue === "object" ? "" : String(rawValue);
           }
 
           console.log("📄 Input 값 계산:", {
@@ -636,9 +612,11 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
             hasFormData: !!formData,
             columnName: component.columnName,
             formDataValue: formData?.[component.columnName],
+            formDataValueType: typeof formData?.[component.columnName],
             componentValue: component.value,
             autoGeneratedValue,
             finalDisplayValue: displayValue,
+            isObject: typeof displayValue === "object",
           });
 
           return displayValue;
@@ -670,23 +648,28 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
 
           // isInteractive 모드에서는 formData 업데이트
           if (isInteractive && onFormDataChange && component.columnName) {
-            // console.log(`📤 TextInputComponent -> onFormDataChange 호출: ${component.columnName} = "${newValue}"`);
-            console.log("🔍 onFormDataChange 함수 정보:", {
-              functionName: onFormDataChange.name,
-              functionString: onFormDataChange.toString().substring(0, 200),
+            console.log(`✅ TextInputComponent onChange 조건 충족:`, {
+              columnName: component.columnName,
+              newValue,
+              valueType: typeof newValue,
+              isInteractive,
+              hasOnFormDataChange: !!onFormDataChange,
+              onFormDataChangeType: typeof onFormDataChange,
             });
             onFormDataChange(component.columnName, newValue);
+            console.log(`✅ onFormDataChange 호출 완료`);
           } else {
             console.log("❌ TextInputComponent onFormDataChange 조건 미충족:", {
               isInteractive,
               hasOnFormDataChange: !!onFormDataChange,
               hasColumnName: !!component.columnName,
+              columnName: component.columnName,
             });
           }
 
-          // 기존 onChange 핸들러도 호출
+          // props.onChange는 DynamicComponentRenderer의 handleChange
+          // 이벤트 객체 감지 및 값 추출 로직이 있으므로 안전하게 호출 가능
           if (props.onChange) {
-            // console.log(`📤 TextInputComponent -> props.onChange 호출: "${newValue}"`);
             props.onChange(newValue);
           }
         }}

frontend/types/flow.ts

@@ -148,6 +148,15 @@ export interface FlowAuditLog {
   note?: string;
   fromStepName?: string;
   toStepName?: string;
+  moveType?: "status" | "table" | "both";
+  sourceTable?: string;
+  targetTable?: string;
+  sourceDataId?: string;
+  targetDataId?: string;
+  statusFrom?: string;
+  statusTo?: string;
+  dbConnectionId?: number;
+  dbConnectionName?: string;
 }
 
 // ============================================

frontend/types/screen-management.ts

@@ -359,6 +359,8 @@ export interface ScreenDefinition {
   updatedDate: Date;
   createdBy?: string;
   updatedBy?: string;
+  dbSourceType?: "internal" | "external";
+  dbConnectionId?: number;
 }
 
 /**
@@ -371,6 +373,8 @@ export interface CreateScreenRequest {
   tableLabel?: string;
   companyCode: CompanyCode;
   description?: string;
+  dbSourceType?: "internal" | "external";
+  dbConnectionId?: number;
 }
 
 /**

scripts/prod/start-all-linux.sh

@@ -4,6 +4,13 @@ echo "============================================"
 echo "WACE 솔루션 - 전체 서비스 시작 (분리형) - Linux"
 echo "============================================"
 
+echo ""
+echo "🔄 최신 코드 가져오기..."
+echo ""
+git pull origin main || {
+    echo "❌ Git pull 실패. 계속 진행합니다..."
+}
+
 echo ""
 echo "🚀 백엔드와 프론트엔드를 순차적으로 시작합니다..."
 echo ""