37 changed files with 3448 additions and 5278 deletions
--- a/.cursor/rules/admin-page-style-guide.mdc
+++ b/.cursor/rules/admin-page-style-guide.mdc
@ -1,749 +0,0 @@
 ---
 description: 관리자 페이지 표준 스타일 가이드 - shadcn/ui 기반 일관된 디자인 시스템
 globs: **/app/(main)/admin/**/*.tsx,**/components/admin/**/*.tsx
 ---
 # 관리자 페이지 표준 스타일 가이드
 이 가이드는 관리자 페이지의 일관된 UI/UX를 위한 표준 스타일 규칙입니다.
 모든 관리자 페이지는 이 가이드를 따라야 합니다.
 ## 1. 페이지 레이아웃 구조
 ### 기본 페이지 템플릿
 ```tsx
 export default function AdminPage() {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <div className="space-y-6 p-6">
        {/* 페이지 헤더 */}
        <div className="space-y-2 border-b pb-4">
          <h1 className="text-3xl font-bold tracking-tight">페이지 제목</h1>
          <p className="text-sm text-muted-foreground">페이지 설명</p>
        </div>
        {/* 메인 컨텐츠 */}
        <MainComponent />
      </div>
      {/* Scroll to Top 버튼 (모바일/태블릿 전용) */}
      <ScrollToTop />
    </div>
  );
 }
 ```
 **필수 적용 사항:**
 - 최상위: `flex min-h-screen flex-col bg-background`
 - 컨텐츠 영역: `space-y-6 p-6` (24px 좌우 여백, 24px 간격)
 - 헤더 구분선: `border-b pb-4` (테두리 박스 사용 금지)
 - Scroll to Top: 모든 관리자 페이지에 포함
 ## 2. Color System (색상 시스템)
 ### CSS Variables 사용 (하드코딩 금지)
 ```tsx
 // ❌ 잘못된 예시
 <div className="bg-gray-50 text-gray-900 border-gray-200">
 // ✅ 올바른 예시
 <div className="bg-background text-foreground border-border">
 <div className="bg-card text-card-foreground">
 <div className="bg-muted text-muted-foreground">
 ```
 **표준 색상 토큰:**
 - `bg-background` / `text-foreground`: 기본 배경/텍스트
 - `bg-card` / `text-card-foreground`: 카드 배경/텍스트
 - `bg-muted` / `text-muted-foreground`: 보조 배경/텍스트
 - `bg-primary` / `text-primary`: 메인 액션
 - `bg-destructive` / `text-destructive`: 삭제/에러
 - `border-border`: 테두리
 - `ring-ring`: 포커스 링
 ## 3. Typography (타이포그래피)
 ### 표준 텍스트 크기와 가중치
 ```tsx
 // 페이지 제목
 <h1 className="text-3xl font-bold tracking-tight">
 // 섹션 제목
 <h2 className="text-xl font-semibold">
 <h3 className="text-lg font-semibold">
 <h4 className="text-sm font-semibold">
 // 본문 텍스트
 <p className="text-sm">
 // 보조 텍스트
 <p className="text-sm text-muted-foreground">
 <p className="text-xs text-muted-foreground">
 // 라벨
 <label className="text-sm font-medium">
 ```
 ## 4. Spacing System (간격)
 ### 일관된 간격 (4px 기준)
 ```tsx
 // 페이지 레벨 간격
 <div className="space-y-6">        // 24px
 // 섹션 레벨 간격
 <div className="space-y-4">        // 16px
 // 필드 레벨 간격
 <div className="space-y-2">        // 8px
 // 패딩
 <div className="p-6">              // 24px (카드)
 <div className="p-4">              // 16px (내부 섹션)
 // 갭
 <div className="gap-4">            // 16px (flex/grid)
 <div className="gap-2">            // 8px (버튼 그룹)
 ```
 ## 5. 검색 툴바 (Toolbar)
 ### 패턴 A: 통합 검색 영역 (권장)
 ```tsx
 <div className="space-y-4">
  {/* 검색 및 액션 영역 */}
  <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
    {/* 검색 영역 */}
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
      {/* 통합 검색 */}
      <div className="w-full sm:w-[400px]">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input placeholder="통합 검색..." className="h-10 pl-10 text-sm" />
        </div>
      </div>
      {/* 고급 검색 토글 */}
      <Button variant="outline" className="h-10 gap-2 text-sm font-medium">
        고급 검색
      </Button>
    </div>
    {/* 액션 버튼 영역 */}
    <div className="flex items-center gap-4">
      <div className="text-sm text-muted-foreground">
        총{" "}
        <span className="font-semibold text-foreground">
          {count.toLocaleString()}
        </span>{" "}
        건
      </div>
      <Button className="h-10 gap-2 text-sm font-medium">
        <Plus className="h-4 w-4" />
        등록
      </Button>
    </div>
  </div>
  {/* 고급 검색 옵션 */}
  {showAdvanced && (
    <div className="space-y-4">
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">고급 검색 옵션</h4>
        <p className="text-xs text-muted-foreground">설명</p>
      </div>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Input placeholder="필드 검색" className="h-10 text-sm" />
      </div>
    </div>
  )}
 </div>
 ```
 ### 패턴 B: 제목 + 검색 + 버튼 한 줄 (공간 효율적)
 ```tsx
 {
  /* 상단 헤더: 제목 + 검색 + 버튼 */
 }
 <div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
  {/* 왼쪽: 제목 */}
  <h2 className="text-xl font-semibold">페이지 제목</h2>
  {/* 오른쪽: 검색 + 버튼 */}
  <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
    {/* 필터 선택 */}
    <div className="w-full sm:w-[160px]">
      <Select>
        <SelectTrigger className="h-10">
          <SelectValue placeholder="필터" />
        </SelectTrigger>
      </Select>
    </div>
    {/* 검색 입력 */}
    <div className="w-full sm:w-[240px]">
      <Input placeholder="검색..." className="h-10 text-sm" />
    </div>
    {/* 초기화 버튼 */}
    <Button variant="outline" className="h-10 text-sm font-medium">
      초기화
    </Button>
    {/* 주요 액션 버튼 */}
    <Button variant="outline" className="h-10 gap-2 text-sm font-medium">
      <Plus className="h-4 w-4" />
      등록
    </Button>
    {/* 조건부 버튼 (선택 시) */}
    {selectedCount > 0 && (
      <Button variant="destructive" className="h-10 gap-2 text-sm font-medium">
        삭제 ({selectedCount})
      </Button>
    )}
  </div>
 </div>;
 ```
 **필수 적용 사항:**
 - ❌ 검색 영역에 박스/테두리 사용 금지
 - ✅ 검색창 권장 너비: `w-full sm:w-[240px]` ~ `sm:w-[400px]`
 - ✅ 필터/Select 권장 너비: `w-full sm:w-[160px]` ~ `sm:w-[200px]`
 - ✅ 고급 검색 필드: placeholder만 사용 (라벨 제거)
 - ✅ 검색 아이콘: `Search` (lucide-react)
 - ✅ Input/Select 높이: `h-10` (40px)
 - ✅ 상단 헤더에 `relative` 추가 (드롭다운 표시용)
 ## 6. Button (버튼)
 ### 표준 버튼 variants와 크기
 ```tsx
 // Primary 액션
 <Button variant="default" size="default" className="h-10 gap-2 text-sm font-medium">
  <Plus className="h-4 w-4" />
  등록
 </Button>
 // Secondary 액션
 <Button variant="outline" size="default" className="h-10 gap-2 text-sm font-medium">
  취소
 </Button>
 // Ghost 버튼 (아이콘 전용)
 <Button variant="ghost" size="icon" className="h-8 w-8">
  <Icon className="h-4 w-4" />
 </Button>
 // Destructive
 <Button variant="destructive" size="default" className="h-10 gap-2 text-sm font-medium">
  삭제
 </Button>
 ```
 **표준 크기:**
 - `h-10`: 기본 버튼 (40px)
 - `h-9`: 작은 버튼 (36px)
 - `h-8`: 아이콘 버튼 (32px)
 **아이콘 크기:**
 - `h-4 w-4`: 버튼 내 아이콘 (16px)
 ## 7. Input (입력 필드)
 ### 표준 Input 스타일
 ```tsx
 // 기본
 <Input placeholder="입력..." className="h-10 text-sm" />
 // 검색 (아이콘 포함)
 <div className="relative">
  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
  <Input placeholder="검색..." className="h-10 pl-10 text-sm" />
 </div>
 // 로딩/액티브
 <Input className="h-10 text-sm border-primary ring-2 ring-primary/20" />
 // 비활성화
 <Input disabled className="h-10 text-sm cursor-not-allowed bg-muted text-muted-foreground" />
 ```
 **필수 적용 사항:**
 - 높이: `h-10` (40px)
 - 텍스트: `text-sm`
 - 포커스: 자동 적용 (`ring-2 ring-ring`)
 ## 8. Table & Card (테이블과 카드)
 ### 반응형 테이블/카드 구조
 ```tsx
 // 실제 데이터 렌더링
 return (
  <>
    {/* 데스크톱 테이블 뷰 (lg 이상) */}
    <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
      <Table>
        <TableHeader>
          <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
            <TableHead className="h-12 text-sm font-semibold">컬럼</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow className="border-b transition-colors hover:bg-muted/50">
            <TableCell className="h-16 text-sm">데이터</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
    {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
    <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
      {items.map((item) => (
        <div
          key={item.id}
          className="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
        >
          {/* 헤더 */}
          <div className="mb-4 flex items-start justify-between">
            <div className="flex-1">
              <h3 className="text-base font-semibold">{item.name}</h3>
              <p className="mt-1 text-sm text-muted-foreground">{item.id}</p>
            </div>
            <Switch checked={item.active} />
          </div>
          {/* 정보 */}
          <div className="space-y-2 border-t pt-4">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">필드</span>
              <span className="font-medium">{item.value}</span>
            </div>
          </div>
          {/* 액션 */}
          <div className="mt-4 flex gap-2 border-t pt-4">
            <Button
              variant="outline"
              size="sm"
              className="h-9 flex-1 gap-2 text-sm"
            >
              <Icon className="h-4 w-4" />
              액션
            </Button>
          </div>
        </div>
      ))}
    </div>
  </>
 );
 ```
 **테이블 표준:**
 - 헤더: `h-12` (48px), `bg-muted/50`, `font-semibold`
 - 데이터 행: `h-16` (64px), `hover:bg-muted/50`
 - 텍스트: `text-sm`
 **카드 표준:**
 - 컨테이너: `rounded-lg border bg-card p-4 shadow-sm`
 - 헤더 제목: `text-base font-semibold`
 - 부제목: `text-sm text-muted-foreground`
 - 정보 라벨: `text-sm text-muted-foreground`
 - 정보 값: `text-sm font-medium`
 - 버튼: `h-9 flex-1 gap-2 text-sm`
 ## 9. Loading States (로딩 상태)
 ### Skeleton UI 패턴
 ```tsx
 // 테이블 스켈레톤 (데스크톱)
 <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
  <Table>
    <TableHeader>...</TableHeader>
    <TableBody>
      {Array.from({ length: 10 }).map((_, index) => (
        <TableRow key={index} className="border-b">
          <TableCell className="h-16">
            <div className="h-4 animate-pulse rounded bg-muted"></div>
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
 </div>
 // 카드 스켈레톤 (모바일/태블릿)
 <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
  {Array.from({ length: 6 }).map((_, index) => (
    <div key={index} className="rounded-lg border bg-card p-4 shadow-sm">
      <div className="mb-4 flex items-start justify-between">
        <div className="flex-1 space-y-2">
          <div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
          <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
        </div>
        <div className="h-6 w-11 animate-pulse rounded-full bg-muted"></div>
      </div>
      <div className="space-y-2 border-t pt-4">
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className="flex justify-between">
            <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
            <div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
          </div>
        ))}
      </div>
    </div>
  ))}
 </div>
 ```
 ## 10. Empty States (빈 상태)
 ### 표준 Empty State
 ```tsx
 <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
  <div className="flex flex-col items-center gap-2 text-center">
    <p className="text-sm text-muted-foreground">데이터가 없습니다.</p>
  </div>
 </div>
 ```
 ## 11. Error States (에러 상태)
 ### 표준 에러 메시지
 ```tsx
 <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
  <div className="flex items-center justify-between">
    <p className="text-sm font-semibold text-destructive">
      오류가 발생했습니다
    </p>
    <button
      onClick={clearError}
      className="text-destructive transition-colors hover:text-destructive/80"
      aria-label="에러 메시지 닫기"
    >
      ✕
    </button>
  </div>
  <p className="mt-1.5 text-sm text-destructive/80">{errorMessage}</p>
 </div>
 ```
 ## 12. Responsive Design (반응형)
 ### Breakpoints
 - `sm`: 640px (모바일 가로/태블릿)
 - `md`: 768px (태블릿)
 - `lg`: 1024px (노트북)
 - `xl`: 1280px (데스크톱)
 ### 모바일 우선 패턴
 ```tsx
 // 레이아웃
 <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
 // 그리드
 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
 // 검색창
 <div className="w-full sm:w-[400px]">
 // 테이블/카드 전환
 <div className="hidden lg:block">    {/* 데스크톱 테이블 */}
 <div className="lg:hidden">          {/* 모바일 카드 */}
 // 간격
 <div className="p-4 sm:p-6">
 <div className="gap-2 sm:gap-4">
 ```
 ## 13. 좌우 레이아웃 (Side-by-Side Layout)
 ### 사이드바 + 메인 영역 구조
 ```tsx
 <div className="flex h-full gap-6">
  {/* 좌측 사이드바 (20-30%) */}
  <div className="w-[20%] border-r pr-6">
    <div className="space-y-4">
      <h3 className="text-lg font-semibold">사이드바 제목</h3>
      {/* 사이드바 컨텐츠 */}
      <div className="space-y-3">
        <div className="cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md">
          <h4 className="text-sm font-semibold">항목</h4>
          <p className="mt-1 text-xs text-muted-foreground">설명</p>
        </div>
      </div>
    </div>
  </div>
  {/* 우측 메인 영역 (70-80%) */}
  <div className="w-[80%] pl-0">
    <div className="flex h-full flex-col space-y-4">
      <h2 className="text-xl font-semibold">메인 제목</h2>
      {/* 메인 컨텐츠 */}
      <div className="flex-1 overflow-hidden">{/* 컨텐츠 */}</div>
    </div>
  </div>
 </div>
 ```
 **필수 적용 사항:**
 - ✅ 좌우 구분: `border-r` 사용 (세로 구분선)
 - ✅ 간격: `gap-6` (24px)
 - ✅ 사이드바 패딩: `pr-6` (오른쪽 24px)
 - ✅ 메인 영역 패딩: `pl-0` (gap으로 간격 확보)
 - ✅ 비율: 20:80 또는 30:70
 - ❌ 과도한 구분선 사용 금지 (세로 구분선 1개만)
 - ❌ 사이드바와 메인 영역 각각에 추가 border 금지
 ## 14. Custom Dropdown (커스텀 드롭다운)
 ### 커스텀 Select/Dropdown 구조
 ```tsx
 {
  /* 드롭다운 컨테이너 */
 }
 <div className="w-full sm:w-[160px]">
  <div className="company-dropdown relative">
    {/* 트리거 버튼 */}
    <button
      type="button"
      onClick={() => setIsOpen(!isOpen)}
      className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
    >
      <span className={!value ? "text-muted-foreground" : ""}>
        {value || "선택하세요"}
      </span>
      <svg
        className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    {/* 드롭다운 메뉴 */}
    {isOpen && (
      <div className="absolute top-full left-0 z-[100] mt-1 w-full min-w-[200px] rounded-md border bg-popover text-popover-foreground shadow-lg">
        {/* 검색 (선택사항) */}
        <div className="border-b p-2">
          <Input
            placeholder="검색..."
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            className="h-8 text-sm"
            onClick={(e) => e.stopPropagation()}
          />
        </div>
        {/* 옵션 목록 */}
        <div className="max-h-48 overflow-y-auto">
          {options.map((option) => (
            <div
              key={option.value}
              className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
              onClick={() => {
                setValue(option.value);
                setIsOpen(false);
              }}
            >
              {option.label}
            </div>
          ))}
        </div>
      </div>
    )}
  </div>
 </div>;
 ```
 **필수 적용 사항:**
 - ✅ z-index: `z-[100]` (다른 요소 위에 표시)
 - ✅ 그림자: `shadow-lg` (명확한 레이어 구분)
 - ✅ 최소 너비: `min-w-[200px]` (내용이 잘리지 않도록)
 - ✅ 최대 높이: `max-h-48` (스크롤 가능)
 - ✅ 애니메이션: 화살표 아이콘 회전 (`rotate-180`)
 - ✅ 부모 요소: `relative` 클래스 필요
 - ⚠️ 부모에 `overflow-hidden` 사용 시 드롭다운 잘림 주의
 **드롭다운이 잘릴 때 해결방법:**
 ```tsx
 // 부모 요소의 overflow 제거
 <div className="w-[80%] pl-0">  // overflow-hidden 제거
 // 또는 상단 헤더에 relative 추가
 <div className="relative flex ...">  // 드롭다운 포지셔닝 기준점
 ```
 ## 15. Scroll to Top Button
 ### 모바일/태블릿 전용 버튼
 ```tsx
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 // 페이지에 추가
 <ScrollToTop />;
 ```
 **특징:**
 - 데스크톱에서 숨김 (`lg:hidden`)
 - 스크롤 200px 이상 시 나타남
 - 부드러운 페이드 인/아웃 애니메이션
 - 오른쪽 하단 고정 위치
 - 원형 디자인 (`rounded-full`)
 ## 14. Accessibility (접근성)
 ### 필수 적용 사항
 ```tsx
 // Label과 Input 연결
 <label htmlFor="field-id" className="text-sm font-medium">
  라벨
 </label>
 <Input id="field-id" />
 // 버튼에 aria-label
 <Button aria-label="설명">
  <Icon />
 </Button>
 // Switch에 aria-label
 <Switch
  checked={isActive}
  onCheckedChange={handleChange}
  aria-label="상태 토글"
 />
 // 포커스 표시 (자동 적용)
 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
 ```
 ## 15. Class 순서 (일관성)
 ### 표준 클래스 작성 순서
 1. Layout: `flex`, `grid`, `block`
 2. Position: `fixed`, `absolute`, `relative`
 3. Sizing: `w-full`, `h-10`
 4. Spacing: `p-4`, `m-2`, `gap-4`
 5. Typography: `text-sm`, `font-medium`
 6. Colors: `bg-primary`, `text-white`
 7. Border: `border`, `rounded-md`
 8. Effects: `shadow-sm`, `opacity-50`
 9. States: `hover:`, `focus:`, `disabled:`
 10. Responsive: `sm:`, `md:`, `lg:`
 ## 16. 금지 사항
 ### ❌ 절대 사용하지 말 것
 1. 하드코딩된 색상 (`bg-gray-50`, `text-blue-500` 등)
 2. 인라인 스타일로 색상 지정 (`style={{ color: '#3b82f6' }}`)
 3. 포커스 스타일 제거 (`outline-none`만 단독 사용)
 4. 중첩된 박스 (Card 안에 Card, Border 안에 Border)
 5. 검색 영역에 불필요한 박스/테두리
 6. 검색 필드에 라벨 (placeholder만 사용)
 7. 반응형 무시 (데스크톱 전용 스타일)
 8. **이모지 사용** (사용자가 명시적으로 요청하지 않는 한 절대 사용 금지)
 9. 과도한 구분선 사용 (최소한으로 유지)
 10. 드롭다운 부모에 `overflow-hidden` (잘림 발생)
 ## 17. 체크리스트
 새로운 관리자 페이지 작성 시 다음을 확인하세요:
 ### 페이지 레벨
 - [ ] `bg-background` 사용 (하드코딩 금지)
 - [ ] `space-y-6 p-6` 구조
 - [ ] 페이지 헤더에 `border-b pb-4`
 - [ ] `ScrollToTop` 컴포넌트 포함
 ### 검색 툴바
 - [ ] 박스/테두리 없음
 - [ ] 검색창 최대 너비 `sm:w-[400px]`
 - [ ] 고급 검색 필드에 라벨 없음 (placeholder만)
 - [ ] 반응형 레이아웃 적용
 ### 테이블/카드
 - [ ] 데스크톱: 테이블 (`hidden lg:block`)
 - [ ] 모바일: 카드 (`lg:hidden`)
 - [ ] 표준 높이와 간격 적용
 - [ ] 로딩/Empty 상태 구현
 ### 버튼
 - [ ] 표준 variants 사용
 - [ ] 표준 높이: `h-10`, `h-9`, `h-8`
 - [ ] 아이콘 크기: `h-4 w-4`
 - [ ] `gap-2`로 아이콘과 텍스트 간격
 ### 반응형
 - [ ] 모바일 우선 디자인
 - [ ] Breakpoints 적용 (`sm:`, `lg:`)
 - [ ] 테이블/카드 전환
 - [ ] Scroll to Top 버튼
 ### 접근성
 - [ ] Label `htmlFor` / Input `id` 연결
 - [ ] 버튼 `aria-label`
 - [ ] Switch `aria-label`
 - [ ] 포커스 표시 유지
 ## 참고 파일
 완성된 예시:
 ### 기본 패턴
 - [사용자 관리 페이지](<mdc:frontend/app/(main)/admin/userMng/page.tsx>) - 기본 페이지 구조
 - [검색 툴바](mdc:frontend/components/admin/UserToolbar.tsx) - 패턴 A (통합 검색)
 - [테이블/카드](mdc:frontend/components/admin/UserTable.tsx) - 반응형 테이블/카드
 - [Scroll to Top](mdc:frontend/components/common/ScrollToTop.tsx) - 스크롤 버튼
 ### 고급 패턴
 - [메뉴 관리 페이지](<mdc:frontend/app/(main)/admin/menu/page.tsx>) - 좌우 레이아웃 + 패턴 B (제목+검색+버튼)
 - [메뉴 관리 컴포넌트](mdc:frontend/components/admin/MenuManagement.tsx) - 커스텀 드롭다운 + 좌우 레이아웃
--- a/docs/ADMIN_STYLE_GUIDE_EXAMPLE.md
+++ b/docs/ADMIN_STYLE_GUIDE_EXAMPLE.md
@ -1,435 +0,0 @@
 # 관리자 페이지 스타일 가이드 적용 예시
 ## 개요
 사용자 관리 페이지를 예시로 shadcn/ui 스타일 가이드에 맞춰 재작성했습니다.
 이 예시를 기준으로 다른 관리자 페이지들도 일관된 스타일로 통일할 수 있습니다.
 ## 적용된 주요 원칙
 ### 1. Color System (색상 시스템)
 **CSS Variables 사용 (하드코딩된 색상 금지)**
 ```tsx
 // ❌ 잘못된 예시
 <div className="bg-gray-50 text-gray-900">
 // ✅ 올바른 예시
 <div className="bg-background text-foreground">
 <div className="bg-card text-card-foreground">
 <div className="bg-muted text-muted-foreground">
 <div className="text-primary">
 <div className="text-destructive">
 ```
 **적용 사례:**
 - 페이지 배경: `bg-background`
 - 카드 배경: `bg-card`
 - 보조 텍스트: `text-muted-foreground`
 - 주요 액션: `text-primary`, `border-primary`
 - 에러 메시지: `text-destructive`, `bg-destructive/10`
 ### 2. Typography (타이포그래피)
 **일관된 폰트 크기와 가중치**
 ```tsx
 // 페이지 제목
 <h1 className="text-3xl font-bold tracking-tight">사용자 관리</h1>
 // 섹션 제목
 <h4 className="text-sm font-semibold">고급 검색 옵션</h4>
 // 본문 텍스트
 <p className="text-sm text-muted-foreground">설명 텍스트</p>
 // 라벨
 <label className="text-sm font-medium">필드 라벨</label>
 // 보조 텍스트
 <p className="text-xs text-muted-foreground">도움말</p>
 ```
 ### 3. Spacing System (간격)
 **일관된 간격 사용 (4px 기준)**
 ```tsx
 // 컴포넌트 간 간격
 <div className="space-y-6">          // 24px (페이지 레벨)
 <div className="space-y-4">          // 16px (섹션 레벨)
 <div className="space-y-2">          // 8px (필드 레벨)
 // 패딩
 <div className="p-6">                // 24px (카드)
 <div className="p-4">                // 16px (내부 섹션)
 // 갭
 <div className="gap-4">              // 16px (flex/grid)
 <div className="gap-2">              // 8px (버튼 그룹)
 ```
 ### 4. Border & Radius (테두리 및 둥근 모서리)
 **표준 radius 사용**
 ```tsx
 // 카드/패널
 <div className="rounded-lg border bg-card">
 // 입력 필드
 <Input className="rounded-md">
 // 버튼
 <Button className="rounded-md">
 ```
 ### 5. Button Variants (버튼 스타일)
 **표준 variants 사용**
 ```tsx
 // Primary 액션
 <Button variant="default" size="default" className="h-10 gap-2 text-sm font-medium">
  <Plus className="h-4 w-4" />
  사용자 등록
 </Button>
 // Secondary 액션
 <Button variant="outline" size="default" className="h-10 gap-2 text-sm font-medium">
  고급 검색
 </Button>
 // Ghost 버튼 (아이콘 전용)
 <Button variant="ghost" size="icon" className="h-8 w-8">
  <Key className="h-4 w-4" />
 </Button>
 ```
 **크기 표준:**
 - `h-10`: 기본 버튼 (40px)
 - `h-9`: 작은 버튼 (36px)
 - `h-8`: 아이콘 버튼 (32px)
 ### 6. Input States (입력 필드 상태)
 **표준 Input 스타일**
 ```tsx
 // 기본
 <Input className="h-10 text-sm" />
 // 포커스 (자동 적용)
 // focus:ring-2 focus:ring-ring
 // 로딩/액티브
 <Input className="h-10 text-sm border-primary ring-2 ring-primary/20" />
 // 비활성화
 <Input disabled className="cursor-not-allowed bg-muted text-muted-foreground" />
 ```
 ### 7. Form Structure (폼 구조)
 **표준 필드 구조**
 ```tsx
 <div className="space-y-2">
  <label htmlFor="field-id" className="text-sm font-medium">
    필드 라벨
  </label>
  <Input
    id="field-id"
    placeholder="힌트 텍스트"
    className="h-10 text-sm"
  />
  <p className="text-xs text-muted-foreground">
    도움말 텍스트
  </p>
 </div>
 ```
 ### 8. Table Structure (테이블 구조)
 **표준 테이블 스타일**
 ```tsx
 <div className="rounded-lg border bg-card shadow-sm">
  <Table>
    <TableHeader>
      <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
        <TableHead className="h-12 text-sm font-semibold">
          컬럼명
        </TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow className="border-b transition-colors hover:bg-muted/50">
        <TableCell className="h-16 text-sm">
          데이터
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
 </div>
 ```
 **높이 표준:**
 - 헤더: `h-12` (48px)
 - 데이터 행: `h-16` (64px)
 ### 9. Loading States (로딩 상태)
 **Skeleton UI**
 ```tsx
 <div className="h-4 animate-pulse rounded bg-muted"></div>
 ```
 ### 10. Empty States (빈 상태)
 **표준 Empty State**
 ```tsx
 <TableCell colSpan={columns} className="h-32 text-center">
  <div className="flex flex-col items-center justify-center gap-2 text-muted-foreground">
    <p className="text-sm">등록된 데이터가 없습니다.</p>
  </div>
 </TableCell>
 ```
 ### 11. Error States (에러 상태)
 **표준 에러 메시지**
 ```tsx
 <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
  <div className="flex items-center justify-between">
    <p className="text-sm font-semibold text-destructive">오류가 발생했습니다</p>
    <button
      onClick={clearError}
      className="text-destructive transition-colors hover:text-destructive/80"
      aria-label="에러 메시지 닫기"
    >
      ✕
    </button>
  </div>
  <p className="mt-1.5 text-sm text-destructive/80">{errorMessage}</p>
 </div>
 ```
 ### 12. Responsive Design (반응형)
 **모바일 우선 접근**
 ```tsx
 // 레이아웃
 <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
 // 그리드
 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
 // 텍스트
 <h1 className="text-2xl sm:text-3xl font-bold">
 // 간격
 <div className="p-4 sm:p-6">
 ```
 ### 13. Accessibility (접근성)
 **필수 적용 사항**
 ```tsx
 // Label과 Input 연결
 <label htmlFor="user-id" className="text-sm font-medium">
  사용자 ID
 </label>
 <Input id="user-id" />
 // 버튼에 aria-label
 <Button aria-label="에러 메시지 닫기">
  ✕
 </Button>
 // Switch에 aria-label
 <Switch
  checked={isActive}
  onCheckedChange={handleChange}
  aria-label="사용자 상태 토글"
 />
 ```
 ## 페이지 구조 템플릿
 ### Page Component
 ```tsx
 export default function AdminPage() {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <div className="container mx-auto space-y-6 p-6">
        {/* 페이지 헤더 */}
        <div className="space-y-2 border-b pb-4">
          <h1 className="text-3xl font-bold tracking-tight">페이지 제목</h1>
          <p className="text-sm text-muted-foreground">페이지 설명</p>
        </div>
        {/* 메인 컨텐츠 */}
        <MainComponent />
      </div>
    </div>
  );
 }
 ```
 ### Toolbar Component
 ```tsx
 export function Toolbar() {
  return (
    <div className="space-y-4">
      {/* 검색 영역 */}
      <div className="rounded-lg border bg-card p-4">
        <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center">
          {/* 검색 입력 */}
          <div className="flex-1">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input placeholder="검색..." className="h-10 pl-10 text-sm" />
            </div>
          </div>
          {/* 버튼 */}
          <Button variant="outline" className="h-10 gap-2 text-sm font-medium">
            고급 검색
          </Button>
        </div>
      </div>
      {/* 액션 버튼 영역 */}
      <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
        <div className="text-sm text-muted-foreground">
          총 <span className="font-semibold text-foreground">{count.toLocaleString()}</span> 건
        </div>
        <Button className="h-10 gap-2 text-sm font-medium">
          <Plus className="h-4 w-4" />
          등록
        </Button>
      </div>
    </div>
  );
 }
 ```
 ## 적용해야 할 다른 관리자 페이지
 ### 우선순위 1 (핵심 페이지)
 - [ ] 메뉴 관리 (`/admin/menu`)
 - [ ] 공통코드 관리 (`/admin/commonCode`)
 - [ ] 회사 관리 (`/admin/company`)
 - [ ] 테이블 관리 (`/admin/tableMng`)
 ### 우선순위 2 (자주 사용하는 페이지)
 - [ ] 외부 연결 관리 (`/admin/external-connections`)
 - [ ] 외부 호출 설정 (`/admin/external-call-configs`)
 - [ ] 배치 관리 (`/admin/batch-management`)
 - [ ] 레이아웃 관리 (`/admin/layouts`)
 ### 우선순위 3 (기타 관리 페이지)
 - [ ] 템플릿 관리 (`/admin/templates`)
 - [ ] 표준 관리 (`/admin/standards`)
 - [ ] 다국어 관리 (`/admin/i18n`)
 - [ ] 수집 관리 (`/admin/collection-management`)
 ## 체크리스트
 각 페이지 작업 시 다음을 확인하세요:
 ### 레이아웃
 - [ ] `bg-background` 사용 (하드코딩된 색상 없음)
 - [ ] `container mx-auto space-y-6 p-6` 구조
 - [ ] 페이지 헤더에 `border-b pb-4`
 ### 색상
 - [ ] CSS Variables만 사용 (`bg-card`, `text-muted-foreground` 등)
 - [ ] `bg-gray-*`, `text-gray-*` 등 하드코딩 제거
 ### 타이포그래피
 - [ ] 페이지 제목: `text-3xl font-bold tracking-tight`
 - [ ] 섹션 제목: `text-sm font-semibold`
 - [ ] 본문: `text-sm`
 - [ ] 보조 텍스트: `text-xs text-muted-foreground`
 ### 간격
 - [ ] 페이지 레벨: `space-y-6`
 - [ ] 섹션 레벨: `space-y-4`
 - [ ] 필드 레벨: `space-y-2`
 - [ ] 카드 패딩: `p-4` 또는 `p-6`
 ### 버튼
 - [ ] 표준 variants 사용 (`default`, `outline`, `ghost`)
 - [ ] 표준 크기: `h-10` (기본), `h-9` (작음), `h-8` (아이콘)
 - [ ] 텍스트: `text-sm font-medium`
 - [ ] 아이콘 + 텍스트: `gap-2`
 ### 입력 필드
 - [ ] 높이: `h-10`
 - [ ] 텍스트: `text-sm`
 - [ ] Label과 Input `htmlFor`/`id` 연결
 - [ ] `space-y-2` 구조
 ### 테이블
 - [ ] `rounded-lg border bg-card shadow-sm`
 - [ ] 헤더: `h-12 text-sm font-semibold bg-muted/50`
 - [ ] 데이터 행: `h-16 text-sm`
 - [ ] Hover: `hover:bg-muted/50`
 ### 반응형
 - [ ] 모바일 우선 디자인
 - [ ] `sm:`, `md:`, `lg:` 브레이크포인트 사용
 - [ ] `flex-col sm:flex-row` 패턴
 ### 접근성
 - [ ] Label `htmlFor` 속성
 - [ ] Input `id` 속성
 - [ ] 버튼 `aria-label`
 - [ ] Switch `aria-label`
 ## 마이그레이션 절차
 1. **페이지 컴포넌트 수정** (`page.tsx`)
   - 레이아웃 구조 변경
   - 색상 CSS Variables로 변경
   - 페이지 헤더 표준화
 2. **Toolbar 컴포넌트 수정**
   - 검색 영역 스타일 통일
   - 버튼 스타일 표준화
   - 반응형 레이아웃 적용
 3. **Table 컴포넌트 수정**
   - 테이블 컨테이너 스타일 통일
   - 헤더/데이터 행 높이 표준화
   - 로딩/Empty State 표준화
 4. **Form 컴포넌트 수정** (있는 경우)
   - 필드 구조 표준화
   - 라벨과 입력 필드 연결
   - 에러 메시지 스타일 통일
 5. **Modal 컴포넌트 수정** (있는 경우)
   - Dialog 표준 패턴 적용
   - 반응형 크기 (`max-w-[95vw] sm:max-w-[500px]`)
   - 버튼 스타일 표준화
 6. **린트 에러 확인**
   ```bash
   # 수정한 파일들 확인
   npm run lint
   ```
 7. **테스트**
   - 기능 동작 확인
   - 반응형 확인 (모바일/태블릿/데스크톱)
   - 다크모드 확인 (있는 경우)
 ## 참고 파일
 ### 완성된 예시
 - `frontend/app/(main)/admin/userMng/page.tsx`
 - `frontend/components/admin/UserToolbar.tsx`
 - `frontend/components/admin/UserTable.tsx`
 - `frontend/components/admin/UserManagement.tsx`
 ### 스타일 가이드
 - `.cursorrules` - 전체 스타일 규칙
 - Section 1-21: 각 스타일 요소별 상세 가이드
--- a/frontend/app/(main)/admin/batchmng/page.tsx
+++ b/frontend/app/(main)/admin/batchmng/page.tsx
@ -1,8 +1,17 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { 
  Table, 
  TableBody, 
  TableCell, 
  TableHead, 
  TableHeader, 
  TableRow 
 } from "@/components/ui/table";
 import { 
  Plus, 
  Search, 
@ -17,7 +26,6 @@ import {
  BatchMapping,
 } from "@/lib/api/batch";
 import BatchCard from "@/components/admin/BatchCard";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 export default function BatchManagementPage() {
  const router = useRouter();
@ -170,198 +178,187 @@ export default function BatchManagementPage() {
  };
  return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="container mx-auto p-4 space-y-2">
-      <div className="space-y-6 p-6">
+      {/* 헤더 */}
-        {/* 페이지 헤더 */}
+      <div className="flex items-center justify-between">
-        <div className="space-y-2 border-b pb-4">
+        <div>
-          <h1 className="text-3xl font-bold tracking-tight">배치 관리</h1>
+          <h1 className="text-3xl font-bold">배치 관리</h1>
-          <p className="text-sm text-muted-foreground">데이터베이스 간 배치 작업을 관리합니다.</p>
+          <p className="text-muted-foreground">데이터베이스 간 배치 작업을 관리합니다.</p>
        </div>
        <Button
          onClick={handleCreateBatch}
          className="flex items-center space-x-2"
        >
          <Plus className="h-4 w-4" />
          <span>배치 추가</span>
        </Button>
      </div>
-        {/* 검색 및 액션 영역 */}
+      {/* 검색 및 필터 */}
-        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <Card>
-          {/* 검색 영역 */}
+        <CardContent className="py-2">
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+          <div className="flex items-center space-x-4">
-            <div className="w-full sm:w-[400px]">
+            <div className="flex-1 relative">
-              <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
-                <Input
+                placeholder="배치명 또는 설명으로 검색..."
-                  placeholder="배치명 또는 설명으로 검색..."
+                value={searchTerm}
-                  value={searchTerm}
+                onChange={(e) => handleSearch(e.target.value)}
-                  onChange={(e) => handleSearch(e.target.value)}
+                className="pl-10"
-                  className="h-10 pl-10 text-sm"
+              />
                />
              </div>
            </div>
            <Button
              variant="outline"
              onClick={loadBatchConfigs}
              disabled={loading}
-              className="h-10 gap-2 text-sm font-medium"
+              className="flex items-center space-x-2"
            >
              <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
-              새로고침
+              <span>새로고침</span>
            </Button>
          </div>
        </CardContent>
      </Card>
-          {/* 액션 버튼 영역 */}
+      {/* 배치 목록 */}
-          <div className="flex items-center gap-4">
+      <Card>
-            <div className="text-sm text-muted-foreground">
+        <CardHeader>
-              총{" "}
+          <CardTitle className="flex items-center justify-between">
-              <span className="font-semibold text-foreground">
+            <span>배치 목록 ({batchConfigs.length}개)</span>
-                {batchConfigs.length.toLocaleString()}
+            {loading && <RefreshCw className="h-4 w-4 animate-spin" />}
-              </span>{" "}
+          </CardTitle>
-              건
+        </CardHeader>
-            </div>
+        <CardContent>
-            <Button
+          {batchConfigs.length === 0 ? (
-              onClick={handleCreateBatch}
+            <div className="text-center py-12">
-              className="h-10 gap-2 text-sm font-medium"
+              <Database className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-            >
+              <h3 className="text-lg font-semibold mb-2">배치가 없습니다</h3>
-              <Plus className="h-4 w-4" />
+              <p className="text-muted-foreground mb-4">
-              배치 추가
+                {searchTerm ? "검색 결과가 없습니다." : "새로운 배치를 추가해보세요."}
-            </Button>
+              </p>
          </div>
        </div>
        {/* 배치 목록 */}
        {batchConfigs.length === 0 ? (
          <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
            <div className="flex flex-col items-center gap-4 text-center">
              <Database className="h-12 w-12 text-muted-foreground" />
              <div className="space-y-2">
                <h3 className="text-lg font-semibold">배치가 없습니다</h3>
                <p className="text-sm text-muted-foreground">
                  {searchTerm ? "검색 결과가 없습니다." : "새로운 배치를 추가해보세요."}
                </p>
              </div>
              {!searchTerm && (
                <Button
                  onClick={handleCreateBatch}
-                  className="h-10 gap-2 text-sm font-medium"
+                  className="flex items-center space-x-2"
                >
                  <Plus className="h-4 w-4" />
-                  첫 번째 배치 추가
+                  <span>첫 번째 배치 추가</span>
                </Button>
              )}
            </div>
-          </div>
+          ) : (
-        ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3">
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+              {batchConfigs.map((batch) => (
-            {batchConfigs.map((batch) => (
+                <BatchCard
-              <BatchCard
+                  key={batch.id}
-                key={batch.id}
+                  batch={batch}
-                batch={batch}
+                  executingBatch={executingBatch}
-                executingBatch={executingBatch}
+                  onExecute={executeBatch}
-                onExecute={executeBatch}
+                  onToggleStatus={(batchId, currentStatus) => {
-                onToggleStatus={(batchId, currentStatus) => {
+                    console.log("🖱️ 비활성화/활성화 버튼 클릭:", { batchId, currentStatus });
-                  toggleBatchStatus(batchId, currentStatus);
+                    toggleBatchStatus(batchId, currentStatus);
-                }}
+                  }}
-                onEdit={(batchId) => router.push(`/admin/batchmng/edit/${batchId}`)}
+                  onEdit={(batchId) => router.push(`/admin/batchmng/edit/${batchId}`)}
-                onDelete={deleteBatch}
+                  onDelete={deleteBatch}
-                getMappingSummary={getMappingSummary}
+                  getMappingSummary={getMappingSummary}
-              />
+                />
-            ))}
+              ))}
          </div>
        )}
        {/* 페이지네이션 */}
        {totalPages > 1 && (
          <div className="flex items-center justify-center gap-2">
            <Button
              variant="outline"
              onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
              disabled={currentPage === 1}
              className="h-10 text-sm font-medium"
            >
              이전
            </Button>
            <div className="flex items-center gap-1">
              {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                const pageNum = i + 1;
                return (
                  <Button
                    key={pageNum}
                    variant={currentPage === pageNum ? "default" : "outline"}
                    onClick={() => setCurrentPage(pageNum)}
                    className="h-10 min-w-[40px] text-sm"
                  >
                    {pageNum}
                  </Button>
                );
              })}
            </div>
-            
+          )}
-            <Button
+        </CardContent>
-              variant="outline"
+      </Card>
-              onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
+
-              disabled={currentPage === totalPages}
+      {/* 페이지네이션 */}
-              className="h-10 text-sm font-medium"
+      {totalPages > 1 && (
-            >
+        <div className="flex justify-center space-x-2">
-              다음
+          <Button
-            </Button>
+            variant="outline"
            onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
            disabled={currentPage === 1}
          >
            이전
          </Button>
          <div className="flex items-center space-x-1">
            {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
              const pageNum = i + 1;
              return (
                <Button
                  key={pageNum}
                  variant={currentPage === pageNum ? "default" : "outline"}
                  size="sm"
                  onClick={() => setCurrentPage(pageNum)}
                >
                  {pageNum}
                </Button>
              );
            })}
          </div>
-        )}
+          
          <Button
            variant="outline"
            onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
            disabled={currentPage === totalPages}
          >
            다음
          </Button>
        </div>
      )}
-        {/* 배치 타입 선택 모달 */}
+      {/* 배치 타입 선택 모달 */}
-        {isBatchTypeModalOpen && (
+      {isBatchTypeModalOpen && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <div className="w-full max-w-2xl rounded-lg border bg-card p-6 shadow-lg">
+          <Card className="w-full max-w-2xl mx-4">
-              <div className="space-y-6">
+            <CardHeader>
-                <h2 className="text-xl font-semibold text-center">배치 타입 선택</h2>
+              <CardTitle className="text-center">배치 타입 선택</CardTitle>
-                
+            </CardHeader>
-                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <CardContent className="space-y-4">
-                  {/* DB → DB */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <button
+                {/* DB → DB */}
-                    className="flex flex-col items-center gap-4 rounded-lg border bg-card p-6 shadow-sm transition-all hover:border-primary hover:bg-accent"
+                <div
-                    onClick={() => handleBatchTypeSelect('db-to-db')}
+                  className="p-6 border rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:bg-blue-50"
-                  >
+                  onClick={() => handleBatchTypeSelect('db-to-db')}
-                    <div className="flex items-center gap-2">
+                >
-                      <Database className="h-8 w-8 text-primary" />
+                  <div className="flex items-center justify-center mb-4">
-                      <span className="text-muted-foreground">→</span>
+                    <Database className="w-8 h-8 text-blue-600 mr-2" />
-                      <Database className="h-8 w-8 text-primary" />
+                    <ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
-                    </div>
+                    <Database className="w-8 h-8 text-blue-600" />
-                    <div className="space-y-1 text-center">
+                  </div>
-                      <div className="text-lg font-medium">DB → DB</div>
+                  <div className="text-center">
-                      <div className="text-sm text-muted-foreground">데이터베이스 간 데이터 동기화</div>
+                    <div className="font-medium text-lg mb-2">DB → DB</div>
-                    </div>
+                    <div className="text-sm text-gray-500">데이터베이스 간 데이터 동기화</div>
-                  </button>
+                  </div>
                  {/* REST API → DB */}
                  <button
                    className="flex flex-col items-center gap-4 rounded-lg border bg-card p-6 shadow-sm transition-all hover:border-primary hover:bg-accent"
                    onClick={() => handleBatchTypeSelect('restapi-to-db')}
                  >
                    <div className="flex items-center gap-2">
                      <span className="text-2xl">🌐</span>
                      <span className="text-muted-foreground">→</span>
                      <Database className="h-8 w-8 text-primary" />
                    </div>
                    <div className="space-y-1 text-center">
                      <div className="text-lg font-medium">REST API → DB</div>
                      <div className="text-sm text-muted-foreground">REST API에서 데이터베이스로 데이터 수집</div>
                    </div>
                  </button>
                </div>
-                <div className="flex justify-center pt-2">
+                {/* REST API → DB */}
-                  <Button
+                <div
-                    variant="outline"
+                  className="p-6 border rounded-lg cursor-pointer transition-all hover:border-green-500 hover:bg-green-50"
-                    onClick={() => setIsBatchTypeModalOpen(false)}
+                  onClick={() => handleBatchTypeSelect('restapi-to-db')}
-                    className="h-10 text-sm font-medium"
+                >
-                  >
+                  <div className="flex items-center justify-center mb-4">
-                    취소
+                    <Globe className="w-8 h-8 text-green-600 mr-2" />
-                  </Button>
+                    <ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
                    <Database className="w-8 h-8 text-green-600" />
                  </div>
                  <div className="text-center">
                    <div className="font-medium text-lg mb-2">REST API → DB</div>
                    <div className="text-sm text-gray-500">REST API에서 데이터베이스로 데이터 수집</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
-      {/* Scroll to Top 버튼 */}
+              <div className="flex justify-center pt-4">
-      <ScrollToTop />
+                <Button
                  variant="outline"
                  onClick={() => setIsBatchTypeModalOpen(false)}
                >
                  취소
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
 }
--- a/frontend/app/(main)/admin/commonCode/page.tsx
+++ b/frontend/app/(main)/admin/commonCode/page.tsx
@ -1,49 +1,59 @@
 "use client";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CodeCategoryPanel } from "@/components/admin/CodeCategoryPanel";
 import { CodeDetailPanel } from "@/components/admin/CodeDetailPanel";
 import { useSelectedCategory } from "@/hooks/useSelectedCategory";
-import { ScrollToTop } from "@/components/common/ScrollToTop";
+// import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거
 export default function CommonCodeManagementPage() {
  // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
  const { selectedCategoryCode, selectCategory } = useSelectedCategory();
  return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="min-h-screen bg-gray-50">
-      <div className="space-y-6 p-6">
+      <div className="w-full max-w-none px-4 py-8 space-y-8">
-        {/* 페이지 헤더 */}
+        {/* 페이지 제목 */}
-        <div className="space-y-2 border-b pb-4">
+        <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
-          <h1 className="text-3xl font-bold tracking-tight">공통코드 관리</h1>
+          <div>
-          <p className="text-sm text-muted-foreground">시스템에서 사용하는 공통코드를 관리합니다</p>
+            <h1 className="text-3xl font-bold text-gray-900">공통코드 관리</h1>
            <p className="mt-2 text-gray-600">시스템에서 사용하는 공통코드를 관리합니다</p>
          </div>
        </div>
-        {/* 메인 콘텐츠 - 좌우 레이아웃 */}
+      {/* 메인 콘텐츠 */}
-        <div className="flex flex-col gap-6 lg:flex-row lg:gap-6">
+      {/* 반응형 레이아웃: PC는 가로, 모바일은 세로 */}
-          {/* 좌측: 카테고리 패널 */}
+      <div className="flex flex-col gap-6 lg:flex-row lg:gap-8">
-          <div className="w-full lg:w-80 lg:border-r lg:pr-6">
+        {/* 카테고리 패널 - PC에서 좌측 고정 너비, 모바일에서 전체 너비 */}
-            <div className="space-y-4">
+        <div className="w-full lg:w-80 lg:flex-shrink-0">
-              <h2 className="text-lg font-semibold">코드 카테고리</h2>
+          <Card className="h-full shadow-sm">
            <CardHeader className="bg-gray-50/50">
              <CardTitle className="flex items-center gap-2">📂 코드 카테고리</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <CodeCategoryPanel selectedCategoryCode={selectedCategoryCode} onSelectCategory={selectCategory} />
-            </div>
+            </CardContent>
-          </div>
+          </Card>
        </div>
-          {/* 우측: 코드 상세 패널 */}
+        {/* 코드 상세 패널 - PC에서 나머지 공간, 모바일에서 전체 너비 */}
-          <div className="min-w-0 flex-1 lg:pl-0">
+        <div className="min-w-0 flex-1">
-            <div className="space-y-4">
+          <Card className="h-fit shadow-sm">
-              <h2 className="text-lg font-semibold">
+            <CardHeader className="bg-gray-50/50">
-                코드 상세 정보
+              <CardTitle className="flex items-center gap-2">
                📋 코드 상세 정보
                {selectedCategoryCode && (
-                  <span className="ml-2 text-sm font-normal text-muted-foreground">({selectedCategoryCode})</span>
+                  <span className="text-muted-foreground text-sm font-normal">({selectedCategoryCode})</span>
                )}
-              </h2>
+              </CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <CodeDetailPanel categoryCode={selectedCategoryCode} />
-            </div>
+            </CardContent>
-          </div>
+          </Card>
        </div>
      </div>
-
+      </div>
      {/* Scroll to Top 버튼 */}
      <ScrollToTop />
    </div>
  );
 }
--- a/frontend/app/(main)/admin/company/page.tsx
+++ b/frontend/app/(main)/admin/company/page.tsx
@ -1,25 +1,21 @@
 import { CompanyManagement } from "@/components/admin/CompanyManagement";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 /**
 * 회사 관리 페이지
 */
 export default function CompanyPage() {
  return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="min-h-screen bg-gray-50">
-      <div className="space-y-6 p-6">
+      <div className="w-full max-w-none px-4 py-8 space-y-8">
-        {/* 페이지 헤더 */}
+        {/* 페이지 제목 */}
-        <div className="space-y-2 border-b pb-4">
+        <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
-          <h1 className="text-3xl font-bold tracking-tight">회사 관리</h1>
+          <div>
-          <p className="text-sm text-muted-foreground">시스템에서 사용하는 회사 정보를 관리합니다</p>
+            <h1 className="text-3xl font-bold text-gray-900">회사 관리</h1>
            <p className="mt-2 text-gray-600">시스템에서 사용하는 회사 정보를 관리합니다</p>
          </div>
        </div>
        {/* 메인 컨텐츠 */}
        <CompanyManagement />
      </div>
      {/* Scroll to Top 버튼 */}
      <ScrollToTop />
    </div>
  );
 }
--- a/frontend/app/(main)/admin/dashboard/page.tsx
+++ b/frontend/app/(main)/admin/dashboard/page.tsx
@ -5,14 +5,10 @@ import { useRouter } from "next/navigation";
 import { dashboardApi } from "@/lib/api/dashboard";
 import { Dashboard } from "@/lib/api/dashboard";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import {
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
  AlertDialog,
  AlertDialogAction,
@ -25,7 +21,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { useToast } from "@/hooks/use-toast";
 import { Pagination, PaginationInfo } from "@/components/common/Pagination";
-import { Plus, Search, Edit, Trash2, Copy, MoreVertical } from "lucide-react";
+import { Plus, Search, Edit, Trash2, Copy, LayoutDashboard, MoreHorizontal } from "lucide-react";
 /**
 * 대시보드 관리 페이지
@ -165,108 +161,123 @@ export default function DashboardListPage() {
    });
  };
  if (loading) {
    return (
      <div className="bg-card flex h-full items-center justify-center rounded-lg border shadow-sm">
        <div className="text-center">
          <div className="text-sm font-medium">로딩 중...</div>
          <div className="text-muted-foreground mt-2 text-xs">대시보드 목록을 불러오고 있습니다</div>
        </div>
      </div>
    );
  }
  return (
-    <div className="bg-background flex min-h-screen flex-col">
+    <div className="min-h-[calc(100vh-4rem)] bg-gray-50">
-      <div className="space-y-6 p-6">
+      <div className="w-full max-w-none space-y-8 px-4 py-8">
-        {/* 페이지 헤더 */}
+        {/* 페이지 제목 */}
-        <div className="space-y-2 border-b pb-4">
+        <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
-          <h1 className="text-3xl font-bold tracking-tight">대시보드 관리</h1>
+          <div>
-          <p className="text-muted-foreground text-sm">대시보드를 생성하고 관리할 수 있습니다</p>
+            <h1 className="text-3xl font-bold text-gray-900">대시보드 관리</h1>
            <p className="mt-2 text-gray-600">대시보드를 생성하고 관리할 수 있습니다</p>
          </div>
        </div>
-        {/* 검색 및 액션 */}
+        {/* 검색 및 필터 */}
-        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <Card className="shadow-sm">
-          <div className="relative w-full sm:w-[300px]">
+          <CardContent className="pt-6">
-            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <Input
+              <div className="relative">
-              placeholder="대시보드 검색..."
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-              value={searchTerm}
+                <Input
-              onChange={(e) => setSearchTerm(e.target.value)}
+                  placeholder="대시보드 검색..."
-              className="h-10 pl-10 text-sm"
+                  value={searchTerm}
-            />
+                  onChange={(e) => setSearchTerm(e.target.value)}
-          </div>
+                  className="w-64 pl-10"
-          <Button onClick={() => router.push("/admin/dashboard/new")} className="h-10 gap-2 text-sm font-medium">
+                />
-            <Plus className="h-4 w-4" />새 대시보드 생성
+              </div>
-          </Button>
+              <Button onClick={() => router.push("/admin/dashboard/new")} className="shrink-0">
-        </div>
+                <Plus className="mr-2 h-4 w-4" />새 대시보드 생성
              </Button>
            </div>
          </CardContent>
        </Card>
        {/* 대시보드 목록 */}
-        {dashboards.length === 0 ? (
+        {loading ? (
-          <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+          <div className="flex h-64 items-center justify-center">
-            <div className="flex flex-col items-center gap-2 text-center">
+            <div className="text-gray-500">로딩 중...</div>
              <p className="text-muted-foreground text-sm">대시보드가 없습니다</p>
            </div>
          </div>
        ) : dashboards.length === 0 ? (
          <Card className="shadow-sm">
            <CardContent className="pt-6">
              <div className="py-8 text-center text-gray-500">
                <LayoutDashboard 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={() => router.push("/admin/dashboard/new")}>
                  <Plus className="mr-2 h-4 w-4" />첫 번째 대시보드 생성
                </Button>
              </div>
            </CardContent>
          </Card>
        ) : (
-          <div className="bg-card rounded-lg border shadow-sm">
+          <Card className="shadow-sm">
-            <Table>
+            <CardContent className="p-4">
-              <TableHeader>
+              <Table>
-                <TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
+                <TableHeader>
-                  <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
+                  <TableRow>
-                  <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
+                    <TableHead className="w-[250px]">제목</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
+                    <TableHead>설명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">수정일</TableHead>
+                    <TableHead className="w-[150px]">생성일</TableHead>
-                  <TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
+                    <TableHead className="w-[100px] text-right">작업</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {dashboards.map((dashboard) => (
                  <TableRow key={dashboard.id} className="hover:bg-muted/50 border-b transition-colors">
                    <TableCell className="h-16 text-sm font-medium">{dashboard.title}</TableCell>
                    <TableCell className="text-muted-foreground h-16 max-w-md truncate text-sm">
                      {dashboard.description || "-"}
                    </TableCell>
                    <TableCell className="text-muted-foreground h-16 text-sm">
                      {formatDate(dashboard.createdAt)}
                    </TableCell>
                    <TableCell className="text-muted-foreground h-16 text-sm">
                      {formatDate(dashboard.updatedAt)}
                    </TableCell>
                    <TableCell className="h-16 text-right">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <MoreVertical className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem
                            onClick={() => router.push(`/admin/dashboard/edit/${dashboard.id}`)}
                            className="gap-2 text-sm"
                          >
                            <Edit className="h-4 w-4" />
                            편집
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleCopy(dashboard)} className="gap-2 text-sm">
                            <Copy className="h-4 w-4" />
                            복사
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
                            className="text-destructive focus:text-destructive gap-2 text-sm"
                          >
                            <Trash2 className="h-4 w-4" />
                            삭제
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
-                ))}
+                </TableHeader>
-              </TableBody>
+                <TableBody>
-            </Table>
+                  {dashboards.map((dashboard) => (
-          </div>
+                    <TableRow key={dashboard.id} className="hover:bg-gray-50">
                      <TableCell>
                        <div className="font-medium">{dashboard.title}</div>
                      </TableCell>
                      <TableCell className="max-w-md truncate text-sm text-gray-500">
                        {dashboard.description || "-"}
                      </TableCell>
                      <TableCell className="text-sm">{formatDate(dashboard.createdAt)}</TableCell>
                      <TableCell className="text-right">
                        <Popover>
                          <PopoverTrigger asChild>
                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-40 p-1" align="end">
                            <div className="flex flex-col gap-1">
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => router.push(`/admin/dashboard/edit/${dashboard.id}`)}
                                className="h-8 w-full justify-start gap-2 px-2 text-xs"
                              >
                                <Edit className="h-3.5 w-3.5" />
                                편집
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => handleCopy(dashboard)}
                                className="h-8 w-full justify-start gap-2 px-2 text-xs"
                              >
                                <Copy className="h-3.5 w-3.5" />
                                복사
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
                                className="h-8 w-full justify-start gap-2 px-2 text-xs text-red-600 hover:bg-red-50 hover:text-red-700"
                              >
                                <Trash2 className="h-3.5 w-3.5" />
                                삭제
                              </Button>
                            </div>
                          </PopoverContent>
                        </Popover>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        )}
        {/* 페이지네이션 */}
@ -283,19 +294,20 @@ export default function DashboardListPage() {
      {/* 삭제 확인 모달 */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">대시보드 삭제</AlertDialogTitle>
+            <AlertDialogTitle>대시보드 삭제 확인</AlertDialogTitle>
-            <AlertDialogDescription className="text-xs sm:text-sm">
+            <AlertDialogDescription>
              &quot;{deleteTarget?.title}&quot; 대시보드를 삭제하시겠습니까?
-              <br />이 작업은 되돌릴 수 없습니다.
+              <br />
              <span className="font-medium text-red-600">이 작업은 되돌릴 수 없습니다.</span>
            </AlertDialogDescription>
          </AlertDialogHeader>
-          <AlertDialogFooter className="gap-2 sm:gap-0">
+          <AlertDialogFooter>
-            <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</AlertDialogCancel>
+            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeleteConfirm}
-              className="bg-destructive hover:bg-destructive/90 h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+              className="bg-red-600 text-white hover:bg-red-700 focus:ring-red-600"
            >
              삭제
            </AlertDialogAction>
--- a/frontend/app/(main)/admin/dataflow/page.tsx
+++ b/frontend/app/(main)/admin/dataflow/page.tsx
@ -7,7 +7,6 @@ import { FlowEditor } from "@/components/dataflow/node-editor/FlowEditor";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 import { ArrowLeft } from "lucide-react";
 type Step = "list" | "editor";
@ -51,17 +50,17 @@ export default function DataFlowPage() {
  // 에디터 모드일 때는 레이아웃 없이 전체 화면 사용
  if (isEditorMode) {
    return (
-      <div className="fixed inset-0 z-50 bg-background">
+      <div className="fixed inset-0 z-50 bg-white">
        <div className="flex h-full flex-col">
          {/* 에디터 헤더 */}
-          <div className="flex items-center gap-4 border-b bg-background p-4">
+          <div className="flex items-center gap-4 border-b bg-white p-4">
            <Button variant="outline" size="sm" onClick={handleBackToList} className="flex items-center gap-2">
              <ArrowLeft className="h-4 w-4" />
              목록으로
            </Button>
            <div>
-              <h1 className="text-2xl font-bold tracking-tight">노드 플로우 에디터</h1>
+              <h1 className="text-2xl font-bold text-gray-900">노드 플로우 에디터</h1>
-              <p className="mt-1 text-sm text-muted-foreground">
+              <p className="mt-1 text-sm text-gray-600">
                드래그 앤 드롭으로 데이터 제어 플로우를 시각적으로 설계합니다
              </p>
            </div>
@ -77,20 +76,19 @@ export default function DataFlowPage() {
  }
  return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="min-h-screen bg-gray-50">
-      <div className="space-y-6 p-4 sm:p-6">
+      <div className="mx-auto space-y-4 px-5 py-4">
-        {/* 페이지 헤더 */}
+        {/* 페이지 제목 */}
-        <div className="space-y-2 border-b pb-4">
+        <div className="flex items-center justify-between rounded-lg border bg-white p-4 shadow-sm">
-          <h1 className="text-3xl font-bold tracking-tight">제어 관리</h1>
+          <div>
-          <p className="text-sm text-muted-foreground">노드 기반 데이터 플로우를 시각적으로 설계하고 관리합니다</p>
+            <h1 className="text-3xl font-bold text-gray-900">제어 관리</h1>
            <p className="mt-2 text-gray-600">노드 기반 데이터 플로우를 시각적으로 설계하고 관리합니다</p>
          </div>
        </div>
        {/* 플로우 목록 */}
        <DataFlowList onLoadFlow={handleLoadFlow} />
      </div>
      {/* Scroll to Top 버튼 */}
      <ScrollToTop />
    </div>
  );
 }
--- a/frontend/app/(main)/admin/external-call-configs/page.tsx
+++ b/frontend/app/(main)/admin/external-call-configs/page.tsx
@ -161,201 +161,205 @@ export default function ExternalCallConfigsPage() {
  };
  return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="min-h-screen bg-gray-50">
-      <div className="space-y-6 p-6">
+      <div className="w-full max-w-none px-4 py-8 space-y-8">
-        {/* 페이지 헤더 */}
+      {/* 페이지 헤더 */}
-        <div className="space-y-2 border-b pb-4">
+      <div className="flex items-center justify-between">
-          <h1 className="text-3xl font-bold tracking-tight">외부 호출 관리</h1>
+        <div>
-          <p className="text-sm text-muted-foreground">Discord, Slack, 카카오톡 등 외부 호출 설정을 관리합니다.</p>
+          <h1 className="text-3xl font-bold">외부 호출 관리</h1>
          <p className="text-muted-foreground mt-1">Discord, Slack, 카카오톡 등 외부 호출 설정을 관리합니다.</p>
        </div>
        <Button onClick={handleAddConfig} className="flex items-center gap-2">
          <Plus size={16} />새 외부 호출 추가
        </Button>
      </div>
-        {/* 검색 및 필터 영역 */}
+      {/* 검색 및 필터 */}
-        <div className="space-y-4">
+      <Card>
-          {/* 첫 번째 줄: 검색 + 추가 버튼 */}
+        <CardHeader>
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <CardTitle className="flex items-center gap-2">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <Filter size={18} />
-              <div className="w-full sm:w-[320px]">
+            검색 및 필터
-                <div className="relative">
+          </CardTitle>
-                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        </CardHeader>
-                  <Input
+        <CardContent className="space-y-4">
-                    placeholder="설정 이름 또는 설명으로 검색..."
+          {/* 검색 */}
-                    value={searchQuery}
+          <div className="flex gap-2">
-                    onChange={(e) => setSearchQuery(e.target.value)}
+            <div className="flex-1">
-                    onKeyPress={handleSearchKeyPress}
+              <Input
-                    className="h-10 pl-10 text-sm"
+                placeholder="설정 이름 또는 설명으로 검색..."
-                  />
+                value={searchQuery}
-                </div>
+                onChange={(e) => setSearchQuery(e.target.value)}
-              </div>
+                onKeyPress={handleSearchKeyPress}
-              <Button onClick={handleSearch} variant="outline" className="h-10 gap-2 text-sm font-medium">
+              />
                <Search className="h-4 w-4" />
                검색
              </Button>
            </div>
-            <Button onClick={handleAddConfig} className="h-10 gap-2 text-sm font-medium">
+            <Button onClick={handleSearch} variant="outline">
-              <Plus className="h-4 w-4" />
+              <Search size={16} />
              새 외부 호출 추가
            </Button>
          </div>
-          {/* 두 번째 줄: 필터 */}
+          {/* 필터 */}
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-            <Select
+            <div>
-              value={filter.call_type || "all"}
+              <label className="mb-1 block text-sm font-medium">호출 타입</label>
-              onValueChange={(value) =>
+              <Select
-                setFilter((prev) => ({
+                value={filter.call_type || "all"}
-                  ...prev,
+                onValueChange={(value) =>
-                  call_type: value === "all" ? undefined : value,
+                  setFilter((prev) => ({
-                }))
+                    ...prev,
-              }
+                    call_type: value === "all" ? undefined : value,
-            >
+                  }))
-              <SelectTrigger className="h-10">
+                }
-                <SelectValue placeholder="호출 타입" />
+              >
-              </SelectTrigger>
+                <SelectTrigger>
-              <SelectContent>
+                  <SelectValue />
-                <SelectItem value="all">전체</SelectItem>
+                </SelectTrigger>
-                {CALL_TYPE_OPTIONS.map((option) => (
+                <SelectContent>
-                  <SelectItem key={option.value} value={option.value}>
+                  <SelectItem value="all">전체</SelectItem>
-                    {option.label}
+                  {CALL_TYPE_OPTIONS.map((option) => (
-                  </SelectItem>
+                    <SelectItem key={option.value} value={option.value}>
-                ))}
+                      {option.label}
-              </SelectContent>
+                    </SelectItem>
-            </Select>
+                  ))}
                </SelectContent>
              </Select>
            </div>
-            <Select
+            <div>
-              value={filter.api_type || "all"}
+              <label className="mb-1 block text-sm font-medium">API 타입</label>
-              onValueChange={(value) =>
+              <Select
-                setFilter((prev) => ({
+                value={filter.api_type || "all"}
-                  ...prev,
+                onValueChange={(value) =>
-                  api_type: value === "all" ? undefined : value,
+                  setFilter((prev) => ({
-                }))
+                    ...prev,
-              }
+                    api_type: value === "all" ? undefined : value,
-            >
+                  }))
-              <SelectTrigger className="h-10">
+                }
-                <SelectValue placeholder="API 타입" />
+              >
-              </SelectTrigger>
+                <SelectTrigger>
-              <SelectContent>
+                  <SelectValue />
-                <SelectItem value="all">전체</SelectItem>
+                </SelectTrigger>
-                {API_TYPE_OPTIONS.map((option) => (
+                <SelectContent>
-                  <SelectItem key={option.value} value={option.value}>
+                  <SelectItem value="all">전체</SelectItem>
-                    {option.label}
+                  {API_TYPE_OPTIONS.map((option) => (
-                  </SelectItem>
+                    <SelectItem key={option.value} value={option.value}>
-                ))}
+                      {option.label}
-              </SelectContent>
+                    </SelectItem>
-            </Select>
+                  ))}
                </SelectContent>
              </Select>
            </div>
-            <Select
+            <div>
-              value={filter.is_active || "Y"}
+              <label className="mb-1 block text-sm font-medium">상태</label>
-              onValueChange={(value) =>
+              <Select
-                setFilter((prev) => ({
+                value={filter.is_active || "Y"}
-                  ...prev,
+                onValueChange={(value) =>
-                  is_active: value,
+                  setFilter((prev) => ({
-                }))
+                    ...prev,
-              }
+                    is_active: value,
-            >
+                  }))
-              <SelectTrigger className="h-10">
+                }
-                <SelectValue placeholder="상태" />
+              >
-              </SelectTrigger>
+                <SelectTrigger>
-              <SelectContent>
+                  <SelectValue />
-                {ACTIVE_STATUS_OPTIONS.map((option) => (
+                </SelectTrigger>
-                  <SelectItem key={option.value} value={option.value}>
+                <SelectContent>
-                    {option.label}
+                  {ACTIVE_STATUS_OPTIONS.map((option) => (
-                  </SelectItem>
+                    <SelectItem key={option.value} value={option.value}>
-                ))}
+                      {option.label}
-              </SelectContent>
+                    </SelectItem>
-            </Select>
+                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
-        </div>
+        </CardContent>
      </Card>
-        {/* 설정 목록 */}
+      {/* 설정 목록 */}
-        <div className="rounded-lg border bg-card shadow-sm">
+      <Card>
        <CardHeader>
          <CardTitle>외부 호출 설정 목록</CardTitle>
        </CardHeader>
        <CardContent>
          {loading ? (
            // 로딩 상태
-            <div className="flex h-64 items-center justify-center">
+            <div className="py-8 text-center">
-              <div className="text-sm text-muted-foreground">로딩 중...</div>
+              <div className="text-muted-foreground">로딩 중...</div>
            </div>
          ) : configs.length === 0 ? (
            // 빈 상태
-            <div className="flex h-64 flex-col items-center justify-center">
+            <div className="py-12 text-center">
-              <div className="flex flex-col items-center gap-2 text-center">
+              <div className="text-muted-foreground">
-                <p className="text-sm text-muted-foreground">등록된 외부 호출 설정이 없습니다.</p>
+                <Plus size={48} className="mx-auto mb-4 opacity-20" />
-                <p className="text-xs text-muted-foreground">새 외부 호출을 추가해보세요.</p>
+                <p className="text-lg font-medium">등록된 외부 호출 설정이 없습니다.</p>
                <p className="text-sm">새 외부 호출을 추가해보세요.</p>
              </div>
            </div>
          ) : (
            // 설정 테이블 목록
            <Table>
              <TableHeader>
-                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                <TableRow>
-                  <TableHead className="h-12 text-sm font-semibold">설정명</TableHead>
+                  <TableHead>설정명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">호출 타입</TableHead>
+                  <TableHead>호출 타입</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">API 타입</TableHead>
+                  <TableHead>API 타입</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
+                  <TableHead>설명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">상태</TableHead>
+                  <TableHead>상태</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
+                  <TableHead>생성일</TableHead>
-                  <TableHead className="h-12 text-center text-sm font-semibold">작업</TableHead>
+                  <TableHead className="text-center">작업</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {configs.map((config) => (
-                  <TableRow key={config.id} className="border-b transition-colors hover:bg-muted/50">
+                  <TableRow key={config.id} className="hover:bg-muted/50">
-                    <TableCell className="h-16 text-sm font-medium">{config.config_name}</TableCell>
+                    <TableCell className="font-medium">{config.config_name}</TableCell>
-                    <TableCell className="h-16 text-sm">
+                    <TableCell>
                      <Badge variant="outline">{getCallTypeLabel(config.call_type)}</Badge>
                    </TableCell>
-                    <TableCell className="h-16 text-sm">
+                    <TableCell>
                      {config.api_type ? (
                        <Badge variant="secondary">{getApiTypeLabel(config.api_type)}</Badge>
                      ) : (
-                        <span className="text-muted-foreground">-</span>
+                        <span className="text-muted-foreground text-sm">-</span>
                      )}
                    </TableCell>
-                    <TableCell className="h-16 text-sm">
+                    <TableCell>
                      <div className="max-w-xs">
                        {config.description ? (
-                          <span className="block truncate text-muted-foreground" title={config.description}>
+                          <span className="text-muted-foreground block truncate text-sm" title={config.description}>
                            {config.description}
                          </span>
                        ) : (
-                          <span className="text-muted-foreground">-</span>
+                          <span className="text-muted-foreground text-sm">-</span>
                        )}
                      </div>
                    </TableCell>
-                    <TableCell className="h-16 text-sm">
+                    <TableCell>
                      <Badge variant={config.is_active === "Y" ? "default" : "destructive"}>
                        {config.is_active === "Y" ? "활성" : "비활성"}
                      </Badge>
                    </TableCell>
-                    <TableCell className="h-16 text-sm text-muted-foreground">
+                    <TableCell className="text-muted-foreground text-sm">
                      {config.created_date ? new Date(config.created_date).toLocaleDateString() : "-"}
                    </TableCell>
-                    <TableCell className="h-16 text-sm">
+                    <TableCell>
                      <div className="flex justify-center gap-1">
-                        <Button 
+                        <Button size="sm" variant="outline" onClick={() => handleTestConfig(config)} title="테스트">
-                          variant="ghost" 
+                          <TestTube size={14} />
                          size="icon" 
                          className="h-8 w-8" 
                          onClick={() => handleTestConfig(config)} 
                          title="테스트"
                        >
                          <TestTube className="h-4 w-4" />
                        </Button>
-                        <Button 
+                        <Button size="sm" variant="outline" onClick={() => handleEditConfig(config)} title="편집">
-                          variant="ghost" 
+                          <Edit size={14} />
                          size="icon" 
                          className="h-8 w-8" 
                          onClick={() => handleEditConfig(config)} 
                          title="편집"
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
-                          variant="ghost"
+                          size="sm"
-                          size="icon"
+                          variant="outline"
                          className="h-8 w-8 text-destructive hover:text-destructive"
                          onClick={() => handleDeleteConfig(config)}
                          className="text-destructive hover:text-destructive"
                          title="삭제"
                        >
-                          <Trash2 className="h-4 w-4" />
+                          <Trash2 size={14} />
                        </Button>
                      </div>
                    </TableCell>
@ -364,7 +368,8 @@ export default function ExternalCallConfigsPage() {
              </TableBody>
            </Table>
          )}
-        </div>
+        </CardContent>
      </Card>
      {/* 외부 호출 설정 모달 */}
      <ExternalCallConfigModal
@ -376,22 +381,17 @@ export default function ExternalCallConfigsPage() {
      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">외부 호출 설정 삭제</AlertDialogTitle>
+            <AlertDialogTitle>외부 호출 설정 삭제</AlertDialogTitle>
-            <AlertDialogDescription className="text-xs sm:text-sm">
+            <AlertDialogDescription>
              "{configToDelete?.config_name}" 설정을 삭제하시겠습니까?
              <br />이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
-          <AlertDialogFooter className="gap-2 sm:gap-0">
+          <AlertDialogFooter>
-            <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+            <AlertDialogCancel>취소</AlertDialogCancel>
-              취소
+            <AlertDialogAction onClick={confirmDeleteConfig} className="bg-destructive hover:bg-destructive/90">
            </AlertDialogCancel>
            <AlertDialogAction 
              onClick={confirmDeleteConfig} 
              className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
            >
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
--- a/frontend/app/(main)/admin/external-connections/page.tsx
+++ b/frontend/app/(main)/admin/external-connections/page.tsx
@ -227,12 +227,14 @@ export default function ExternalConnectionsPage() {
  };
  return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="min-h-screen bg-gray-50">
-      <div className="space-y-6 p-6">
+      <div className="w-full max-w-none space-y-8 px-4 py-8">
-        {/* 페이지 헤더 */}
+        {/* 페이지 제목 */}
-        <div className="space-y-2 border-b pb-4">
+        <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
-          <h1 className="text-3xl font-bold tracking-tight">외부 커넥션 관리</h1>
+          <div>
-          <p className="text-sm text-muted-foreground">외부 데이터베이스 및 REST API 연결 정보를 관리합니다</p>
+            <h1 className="text-3xl font-bold text-gray-900">외부 커넥션 관리</h1>
            <p className="mt-2 text-gray-600">외부 데이터베이스 및 REST API 연결 정보를 관리합니다</p>
          </div>
        </div>
        {/* 탭 */}
@ -251,152 +253,166 @@ export default function ExternalConnectionsPage() {
          {/* 데이터베이스 연결 탭 */}
          <TabsContent value="database" className="space-y-6">
            {/* 검색 및 필터 */}
-            <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <Card className="mb-6 shadow-sm">
-              <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+              <CardContent className="pt-6">
-                {/* 검색 */}
+                <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-                <div className="relative w-full sm:w-[300px]">
+                  <div className="flex flex-col gap-4 md:flex-row md:items-center">
-                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                    {/* 검색 */}
-                  <Input
+                    <div className="relative">
-                    placeholder="연결명 또는 설명으로 검색..."
+                      <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-                    value={searchTerm}
+                      <Input
-                    onChange={(e) => setSearchTerm(e.target.value)}
+                        placeholder="연결명 또는 설명으로 검색..."
-                    className="h-10 pl-10 text-sm"
+                        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>
-                {/* DB 타입 필터 */}
+            </Card>
                <Select value={dbTypeFilter} onValueChange={setDbTypeFilter}>
                  <SelectTrigger className="h-10 w-full sm:w-[160px]">
                    <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="h-10 w-full sm:w-[120px]">
                    <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="h-10 gap-2 text-sm font-medium">
                <Plus className="h-4 w-4" />
                새 연결 추가
              </Button>
            </div>
            {/* 연결 목록 */}
            {loading ? (
-              <div className="flex h-64 items-center justify-center rounded-lg border bg-card shadow-sm">
+              <div className="flex h-64 items-center justify-center">
-                <div className="text-sm text-muted-foreground">로딩 중...</div>
+                <div className="text-gray-500">로딩 중...</div>
              </div>
            ) : connections.length === 0 ? (
-              <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
+              <Card className="shadow-sm">
-                <div className="flex flex-col items-center gap-2 text-center">
+                <CardContent className="pt-6">
-                  <p className="text-sm text-muted-foreground">등록된 연결이 없습니다</p>
+                  <div className="py-8 text-center text-gray-500">
-                </div>
+                    <Database className="mx-auto mb-4 h-12 w-12 text-gray-400" />
-              </div>
+                    <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>
            ) : (
-              <div className="rounded-lg border bg-card shadow-sm">
+              <Card className="shadow-sm">
-                <Table>
+                <CardContent className="p-0">
                  <Table>
                    <TableHeader>
-                      <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                      <TableRow>
-                        <TableHead className="h-12 text-sm font-semibold">연결명</TableHead>
+                        <TableHead className="w-[200px]">연결명</TableHead>
-                        <TableHead className="h-12 text-sm font-semibold">DB 타입</TableHead>
+                        <TableHead className="w-[120px]">DB 타입</TableHead>
-                        <TableHead className="h-12 text-sm font-semibold">호스트:포트</TableHead>
+                        <TableHead className="w-[200px]">호스트:포트</TableHead>
-                        <TableHead className="h-12 text-sm font-semibold">데이터베이스</TableHead>
+                        <TableHead className="w-[150px]">데이터베이스</TableHead>
-                        <TableHead className="h-12 text-sm font-semibold">사용자</TableHead>
+                        <TableHead className="w-[120px]">사용자</TableHead>
-                        <TableHead className="h-12 text-sm font-semibold">상태</TableHead>
+                        <TableHead className="w-[80px]">상태</TableHead>
-                        <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
+                        <TableHead className="w-[100px]">생성일</TableHead>
-                        <TableHead className="h-12 text-sm font-semibold">연결 테스트</TableHead>
+                        <TableHead className="w-[100px]">연결 테스트</TableHead>
-                        <TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
+                        <TableHead className="w-[120px] text-right">작업</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {connections.map((connection) => (
-                        <TableRow key={connection.id} className="border-b transition-colors hover:bg-muted/50">
+                        <TableRow key={connection.id} className="hover:bg-gray-50">
-                          <TableCell className="h-16 text-sm">
+                          <TableCell>
                            <div className="font-medium">{connection.connection_name}</div>
                          </TableCell>
-                          <TableCell className="h-16 text-sm">
+                          <TableCell>
-                            <Badge variant="outline">
+                            <Badge variant="outline" className="text-xs">
                              {DB_TYPE_LABELS[connection.db_type] || connection.db_type}
                            </Badge>
                          </TableCell>
-                          <TableCell className="h-16 font-mono text-sm">
+                          <TableCell className="font-mono text-sm">
                            {connection.host}:{connection.port}
                          </TableCell>
-                          <TableCell className="h-16 font-mono text-sm">{connection.database_name}</TableCell>
+                          <TableCell className="font-mono text-sm">{connection.database_name}</TableCell>
-                          <TableCell className="h-16 font-mono text-sm">{connection.username}</TableCell>
+                          <TableCell className="font-mono text-sm">{connection.username}</TableCell>
-                          <TableCell className="h-16 text-sm">
+                          <TableCell>
-                            <Badge variant={connection.is_active === "Y" ? "default" : "secondary"}>
+                            <Badge variant={connection.is_active === "Y" ? "default" : "secondary"} className="text-xs">
                              {connection.is_active === "Y" ? "활성" : "비활성"}
                            </Badge>
                          </TableCell>
-                          <TableCell className="h-16 text-sm">
+                          <TableCell className="text-sm">
                            {connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"}
                          </TableCell>
-                          <TableCell className="h-16 text-sm">
+                          <TableCell>
                            <div className="flex items-center gap-2">
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => handleTestConnection(connection)}
                                disabled={testingConnections.has(connection.id!)}
-                                className="h-9 text-sm"
+                                className="h-7 px-2 text-xs"
                              >
                                {testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
                              </Button>
                              {testResults.has(connection.id!) && (
-                                <Badge variant={testResults.get(connection.id!) ? "default" : "destructive"}>
+                                <Badge
                                  variant={testResults.get(connection.id!) ? "default" : "destructive"}
                                  className="text-xs text-white"
                                >
                                  {testResults.get(connection.id!) ? "성공" : "실패"}
                                </Badge>
                              )}
                            </div>
                          </TableCell>
-                          <TableCell className="h-16 text-right">
+                          <TableCell className="text-right">
-                            <div className="flex justify-end gap-2">
+                            <div className="flex justify-end gap-1">
                              <Button
                                variant="ghost"
-                                size="icon"
+                                size="sm"
                                onClick={() => {
                                  console.log("SQL 쿼리 실행 버튼 클릭 - connection:", connection);
                                  setSelectedConnection(connection);
                                  setSqlModalOpen(true);
                                }}
-                                className="h-8 w-8"
+                                className="h-8 w-8 p-0"
                                title="SQL 쿼리 실행"
                              >
                                <Terminal className="h-4 w-4" />
                              </Button>
                              <Button
                                variant="ghost"
-                                size="icon"
+                                size="sm"
                                onClick={() => handleEditConnection(connection)}
-                                className="h-8 w-8"
+                                className="h-8 w-8 p-0"
                              >
                                <Pencil className="h-4 w-4" />
                              </Button>
                              <Button
                                variant="ghost"
-                                size="icon"
+                                size="sm"
                                onClick={() => handleDeleteConnection(connection)}
-                                className="h-8 w-8 text-destructive hover:bg-destructive/10"
+                                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>
@ -406,7 +422,8 @@ export default function ExternalConnectionsPage() {
                      ))}
                    </TableBody>
                  </Table>
-                </div>
+                </CardContent>
              </Card>
            )}
            {/* 연결 설정 모달 */}
@ -422,25 +439,20 @@ export default function ExternalConnectionsPage() {
            {/* 삭제 확인 다이얼로그 */}
            <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-              <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
+              <AlertDialogContent>
                <AlertDialogHeader>
-                  <AlertDialogTitle className="text-base sm:text-lg">연결 삭제 확인</AlertDialogTitle>
+                  <AlertDialogTitle>연결 삭제 확인</AlertDialogTitle>
-                  <AlertDialogDescription className="text-xs sm:text-sm">
+                  <AlertDialogDescription>
                    "{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
                    <br />
-                    이 작업은 되돌릴 수 없습니다.
+                    <span className="font-medium text-red-600">이 작업은 되돌릴 수 없습니다.</span>
                  </AlertDialogDescription>
                </AlertDialogHeader>
-                <AlertDialogFooter className="gap-2 sm:gap-0">
+                <AlertDialogFooter>
-                  <AlertDialogCancel
+                  <AlertDialogCancel onClick={cancelDeleteConnection}>취소</AlertDialogCancel>
                    onClick={cancelDeleteConnection}
                    className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
                  >
                    취소
                  </AlertDialogCancel>
                  <AlertDialogAction
                    onClick={confirmDeleteConnection}
-                    className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
+                    className="bg-red-600 text-white hover:bg-red-700 focus:ring-red-600"
                  >
                    삭제
                  </AlertDialogAction>
--- a/frontend/app/(main)/admin/flow-management/page.tsx
+++ b/frontend/app/(main)/admin/flow-management/page.tsx
@ -9,8 +9,9 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { Plus, Edit2, Trash2, Workflow, Table, Calendar, User, Check, ChevronsUpDown } from "lucide-react";
+import { Plus, Edit2, Trash2, 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";
 import {
  Dialog,
@ -31,7 +32,6 @@ 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";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 export default function FlowManagementPage() {
  const router = useRouter();
@ -45,15 +45,11 @@ export default function FlowManagementPage() {
  const [selectedFlow, setSelectedFlow] = useState<FlowDefinition | null>(null);
  // 테이블 목록 관련 상태
-  const [tableList, setTableList] = useState<Array<{ tableName: string; displayName?: string; description?: string }>>(
+  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<
+  const [externalConnections, setExternalConnections] = useState<any[]>([]);
    Array<{ id: number; connection_name: string; db_type: string }>
  >([]);
  const [externalTableList, setExternalTableList] = useState<string[]>([]);
  const [loadingExternalTables, setLoadingExternalTables] = useState(false);
@ -78,10 +74,10 @@ export default function FlowManagementPage() {
          variant: "destructive",
        });
      }
-    } catch (error) {
+    } catch (error: any) {
      toast({
        title: "오류 발생",
-        description: error instanceof Error ? error.message : "알 수 없는 오류가 발생했습니다.",
+        description: error.message,
        variant: "destructive",
      });
    } finally {
@ -91,7 +87,6 @@ export default function FlowManagementPage() {
  useEffect(() => {
    loadFlows();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // 테이블 목록 로드 (내부 DB)
@ -133,8 +128,7 @@ export default function FlowManagementPage() {
          if (data.success && data.data) {
            // 메인 데이터베이스(현재 시스템) 제외 - connection_name에 "메인" 또는 "현재 시스템"이 포함된 것 필터링
            const filtered = data.data.filter(
-              (conn: { connection_name: string }) =>
+              (conn: any) => !conn.connection_name.includes("메인") && !conn.connection_name.includes("현재 시스템"),
                !conn.connection_name.includes("메인") && !conn.connection_name.includes("현재 시스템"),
            );
            setExternalConnections(filtered);
          }
@ -170,9 +164,7 @@ export default function FlowManagementPage() {
          if (data.success && data.data) {
            const tables = Array.isArray(data.data) ? data.data : [];
            const tableNames = tables
-              .map((t: string | { tableName?: string; table_name?: string; tablename?: string; name?: string }) =>
+              .map((t: any) => (typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name))
                typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name,
              )
              .filter(Boolean);
            setExternalTableList(tableNames);
          } else {
@ -232,10 +224,10 @@ export default function FlowManagementPage() {
          variant: "destructive",
        });
      }
-    } catch (error) {
+    } catch (error: any) {
      toast({
        title: "오류 발생",
-        description: error instanceof Error ? error.message : "알 수 없는 오류가 발생했습니다.",
+        description: error.message,
        variant: "destructive",
      });
    }
@ -262,10 +254,10 @@ export default function FlowManagementPage() {
          variant: "destructive",
        });
      }
-    } catch (error) {
+    } catch (error: any) {
      toast({
        title: "오류 발생",
-        description: error instanceof Error ? error.message : "알 수 없는 오류가 발생했습니다.",
+        description: error.message,
        variant: "destructive",
      });
    }
@ -277,342 +269,317 @@ export default function FlowManagementPage() {
  };
  return (
-    <div className="bg-background flex min-h-screen flex-col">
+    <div className="container mx-auto space-y-4 p-3 sm:space-y-6 sm:p-4 lg:p-6">
-      <div className="space-y-6 p-4 sm:p-6">
+      {/* 헤더 */}
-        {/* 페이지 헤더 */}
+      <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
-        <div className="space-y-2 border-b pb-4">
+        <div className="flex-1">
-          <h1 className="text-3xl font-bold tracking-tight">플로우 관리</h1>
+          <h1 className="flex items-center gap-2 text-xl font-bold sm:text-2xl lg:text-3xl">
-          <p className="text-muted-foreground text-sm">업무 프로세스 플로우를 생성하고 관리합니다</p>
+            <Workflow className="h-6 w-6 sm:h-7 sm:w-7 lg:h-8 lg:w-8" />
            플로우 관리
          </h1>
          <p className="text-muted-foreground mt-1 text-xs sm:text-sm">업무 프로세스 플로우를 생성하고 관리합니다</p>
        </div>
        <Button onClick={() => setIsCreateDialogOpen(true)} className="w-full sm:w-auto">
          <Plus className="mr-2 h-4 w-4" />
          <span className="hidden sm:inline">새 플로우 생성</span>
          <span className="sm:hidden">생성</span>
        </Button>
      </div>
-        {/* 액션 버튼 영역 */}
+      {/* 플로우 카드 목록 */}
-        <div className="flex items-center justify-end">
+      {loading ? (
-          <Button onClick={() => setIsCreateDialogOpen(true)} className="h-10 gap-2 text-sm font-medium">
+        <div className="py-8 text-center sm:py-12">
-            <Plus className="h-4 w-4" />새 플로우 생성
+          <p className="text-muted-foreground text-sm sm:text-base">로딩 중...</p>
          </Button>
        </div>
-
+      ) : flows.length === 0 ? (
-        {/* 플로우 카드 목록 */}
+        <Card>
-        {loading ? (
+          <CardContent className="py-8 text-center sm:py-12">
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <Workflow className="text-muted-foreground mx-auto mb-3 h-10 w-10 sm:mb-4 sm:h-12 sm:w-12" />
-            {Array.from({ length: 6 }).map((_, index) => (
+            <p className="text-muted-foreground mb-3 text-sm sm:mb-4 sm:text-base">생성된 플로우가 없습니다</p>
-              <div key={index} className="bg-card rounded-lg border p-6 shadow-sm">
+            <Button onClick={() => setIsCreateDialogOpen(true)} className="w-full sm:w-auto">
-                <div className="mb-4 space-y-2">
+              <Plus className="mr-2 h-4 w-4" />첫 플로우 만들기
-                  <div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
+            </Button>
-                  <div className="bg-muted h-4 w-full animate-pulse rounded"></div>
+          </CardContent>
-                  <div className="bg-muted h-4 w-3/4 animate-pulse rounded"></div>
+        </Card>
-                </div>
+      ) : (
-                <div className="space-y-2 border-t pt-4">
+        <div className="grid grid-cols-1 gap-4 sm:gap-5 md:grid-cols-2 lg:gap-6 xl:grid-cols-3">
-                  {Array.from({ length: 3 }).map((_, i) => (
+          {flows.map((flow) => (
-                    <div key={i} className="flex items-center gap-2">
+            <Card
-                      <div className="bg-muted h-4 w-4 animate-pulse rounded"></div>
+              key={flow.id}
-                      <div className="bg-muted h-4 flex-1 animate-pulse rounded"></div>
+              className="cursor-pointer transition-shadow hover:shadow-lg"
-                    </div>
+              onClick={() => handleEdit(flow.id)}
-                  ))}
+            >
-                </div>
+              <CardHeader className="p-4 sm:p-6">
-                <div className="mt-4 flex gap-2 border-t pt-4">
+                <div className="flex items-start justify-between">
                  <div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
                  <div className="bg-muted h-9 w-9 animate-pulse rounded"></div>
                </div>
              </div>
            ))}
          </div>
        ) : flows.length === 0 ? (
          <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
            <div className="flex flex-col items-center gap-2 text-center">
              <div className="bg-muted flex h-16 w-16 items-center justify-center rounded-full">
                <Workflow className="text-muted-foreground h-8 w-8" />
              </div>
              <h3 className="text-lg font-semibold">생성된 플로우가 없습니다</h3>
              <p className="text-muted-foreground max-w-sm text-sm">
                새 플로우를 생성하여 업무 프로세스를 관리해보세요.
              </p>
              <Button onClick={() => setIsCreateDialogOpen(true)} className="mt-4 h-10 gap-2 text-sm font-medium">
                <Plus className="h-4 w-4" />첫 플로우 만들기
              </Button>
            </div>
          </div>
        ) : (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {flows.map((flow) => (
              <div
                key={flow.id}
                className="bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-6 shadow-sm transition-colors"
                onClick={() => handleEdit(flow.id)}
              >
                {/* 헤더 */}
                <div className="mb-4 flex items-start justify-between">
                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
+                    <CardTitle className="flex flex-col gap-1 text-base sm:flex-row sm:items-center sm:gap-2 sm:text-lg">
-                      <h3 className="truncate text-base font-semibold">{flow.name}</h3>
+                      <span className="truncate">{flow.name}</span>
                      {flow.isActive && (
-                        <Badge className="shrink-0 bg-emerald-500 text-white hover:bg-emerald-600">활성</Badge>
+                        <Badge variant="success" className="self-start">
                          활성
                        </Badge>
                      )}
-                    </div>
+                    </CardTitle>
-                    <p className="text-muted-foreground mt-1 line-clamp-2 text-sm">{flow.description || "설명 없음"}</p>
+                    <CardDescription className="mt-1 line-clamp-2 text-xs sm:mt-2 sm:text-sm">
                      {flow.description || "설명 없음"}
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="p-4 pt-0 sm:p-6">
                <div className="space-y-1.5 text-xs sm:space-y-2 sm:text-sm">
                  <div className="text-muted-foreground flex items-center gap-1.5 sm:gap-2">
                    <Table className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
                    <span className="truncate">{flow.tableName}</span>
                  </div>
                  <div className="text-muted-foreground flex items-center gap-1.5 sm:gap-2">
                    <User className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
                    <span className="truncate">생성자: {flow.createdBy}</span>
                  </div>
                  <div className="text-muted-foreground flex items-center gap-1.5 sm:gap-2">
                    <Calendar className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
                    <span>{new Date(flow.updatedAt).toLocaleDateString("ko-KR")}</span>
                  </div>
                </div>
-                {/* 정보 */}
+                <div className="mt-3 flex gap-2 sm:mt-4">
                <div className="space-y-2 border-t pt-4">
                  <div className="flex items-center gap-2 text-sm">
                    <Table className="text-muted-foreground h-4 w-4 shrink-0" />
                    <span className="text-muted-foreground truncate">{flow.tableName}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm">
                    <User className="text-muted-foreground h-4 w-4 shrink-0" />
                    <span className="text-muted-foreground truncate">생성자: {flow.createdBy}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm">
                    <Calendar className="text-muted-foreground h-4 w-4 shrink-0" />
                    <span className="text-muted-foreground">
                      {new Date(flow.updatedAt).toLocaleDateString("ko-KR")}
                    </span>
                  </div>
                </div>
                {/* 액션 */}
                <div className="mt-4 flex gap-2 border-t pt-4">
                  <Button
                    variant="outline"
                    size="sm"
-                    className="h-9 flex-1 gap-2 text-sm"
+                    className="h-8 flex-1 text-xs sm:h-9 sm:text-sm"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleEdit(flow.id);
                    }}
                  >
-                    <Edit2 className="h-4 w-4" />
+                    <Edit2 className="mr-1 h-3 w-3 sm:mr-2 sm:h-4 sm:w-4" />
                    편집
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
-                    className="h-9 w-9 p-0"
+                    className="h-8 px-2 text-xs sm:h-9 sm:px-3 sm:text-sm"
                    onClick={(e) => {
                      e.stopPropagation();
                      setSelectedFlow(flow);
                      setIsDeleteDialogOpen(true);
                    }}
                  >
-                    <Trash2 className="h-4 w-4" />
+                    <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
                  </Button>
                </div>
-              </div>
+              </CardContent>
-            ))}
+            </Card>
-          </div>
+          ))}
-        )}
+        </div>
      )}
-        {/* 생성 다이얼로그 */}
+      {/* 생성 다이얼로그 */}
-        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-          <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
-            <DialogHeader>
+          <DialogHeader>
-              <DialogTitle className="text-base sm:text-lg">새 플로우 생성</DialogTitle>
+            <DialogTitle className="text-base sm:text-lg">새 플로우 생성</DialogTitle>
-              <DialogDescription className="text-xs sm:text-sm">
+            <DialogDescription className="text-xs sm:text-sm">
-                새로운 업무 프로세스 플로우를 생성합니다
+              새로운 업무 프로세스 플로우를 생성합니다
-              </DialogDescription>
+            </DialogDescription>
-            </DialogHeader>
+          </DialogHeader>
-            <div className="space-y-3 sm:space-y-4">
+          <div className="space-y-3 sm:space-y-4">
-              <div>
+            <div>
-                <Label htmlFor="name" className="text-xs sm:text-sm">
+              <Label htmlFor="name" className="text-xs sm:text-sm">
-                  플로우 이름 *
+                플로우 이름 *
-                </Label>
+              </Label>
-                <Input
+              <Input
-                  id="name"
+                id="name"
-                  value={formData.name}
+                value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  placeholder="예: 제품 수명주기 관리"
+                placeholder="예: 제품 수명주기 관리"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
+                className="h-8 text-xs sm:h-10 sm:text-sm"
-                />
+              />
              </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) => (
                      <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>
                <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>
              <div>
                <Label htmlFor="description" className="text-xs sm:text-sm">
                  설명
                </Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="플로우에 대한 설명을 입력하세요"
                  rows={3}
                  className="text-xs sm:text-sm"
                />
              </div>
            </div>
-            <DialogFooter className="gap-2 sm:gap-0">
+            {/* DB 소스 선택 */}
-              <Button
+            <div>
-                variant="outline"
+              <Label className="text-xs sm:text-sm">데이터베이스 소스</Label>
-                onClick={() => setIsCreateDialogOpen(false)}
+              <Select
-                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+                value={selectedDbSource.toString()}
-              >
+                onValueChange={(value) => {
-                취소
+                  const dbSource = value === "internal" ? "internal" : parseInt(value);
-              </Button>
+                  setSelectedDbSource(dbSource);
-              <Button onClick={handleCreate} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+                  // DB 소스 변경 시 테이블 선택 초기화
-                생성
+                  setFormData({ ...formData, tableName: "" });
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        {/* 삭제 확인 다이얼로그 */}
        <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
          <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">
                정말로 &ldquo;{selectedFlow?.name}&rdquo; 플로우를 삭제하시겠습니까?
                <br />이 작업은 되돌릴 수 없습니다.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter className="gap-2 sm:gap-0">
              <Button
                variant="outline"
                onClick={() => {
                  setIsDeleteDialogOpen(false);
                  setSelectedFlow(null);
                }}
                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
              >
-                취소
+                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-              </Button>
+                  <SelectValue placeholder="데이터베이스 선택" />
-              <Button
+                </SelectTrigger>
-                variant="destructive"
+                <SelectContent>
-                onClick={handleDelete}
+                  <SelectItem value="internal">내부 데이터베이스</SelectItem>
-                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+                  {externalConnections.map((conn: any) => (
-              >
+                    <SelectItem key={conn.id} value={conn.id.toString()}>
-                삭제
+                      {conn.connection_name} ({conn.db_type?.toUpperCase()})
-              </Button>
+                    </SelectItem>
-            </DialogFooter>
+                  ))}
-          </DialogContent>
+                </SelectContent>
-        </Dialog>
+              </Select>
-      </div>
+              <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
                플로우에서 사용할 데이터베이스를 선택합니다
              </p>
            </div>
-      {/* Scroll to Top 버튼 */}
+            {/* 테이블 선택 */}
-      <ScrollToTop />
+            <div>
              <Label htmlFor="tableName" className="text-xs sm:text-sm">
                연결 테이블 *
              </Label>
              <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>
            <div>
              <Label htmlFor="description" className="text-xs sm:text-sm">
                설명
              </Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="플로우에 대한 설명을 입력하세요"
                rows={3}
                className="text-xs sm:text-sm"
              />
            </div>
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={() => setIsCreateDialogOpen(false)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button onClick={handleCreate} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
              생성
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      {/* 삭제 확인 다이얼로그 */}
      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <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">
              정말로 "{selectedFlow?.name}" 플로우를 삭제하시겠습니까?
              <br />이 작업은 되돌릴 수 없습니다.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={() => {
                setIsDeleteDialogOpen(false);
                setSelectedFlow(null);
              }}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              variant="destructive"
              onClick={handleDelete}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              삭제
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
 }
--- a/frontend/app/(main)/admin/menu/page.tsx
+++ b/frontend/app/(main)/admin/menu/page.tsx
@ -1,24 +1,20 @@
 "use client";
 import { MenuManagement } from "@/components/admin/MenuManagement";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 export default function MenuPage() {
  return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="min-h-screen bg-gray-50">
-      <div className="space-y-6 p-6">
+      <div className="w-full max-w-none px-4 py-8 space-y-8">
-        {/* 페이지 헤더 */}
+        {/* 페이지 제목 */}
-        <div className="space-y-2 border-b pb-4">
+        <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
-          <h1 className="text-3xl font-bold tracking-tight">메뉴 관리</h1>
+          <div>
-          <p className="text-sm text-muted-foreground">시스템 메뉴를 관리하고 화면을 할당합니다</p>
+            <h1 className="text-3xl font-bold text-gray-900">메뉴 관리</h1>
            <p className="mt-2 text-gray-600">시스템 메뉴를 관리하고 화면을 할당합니다</p>
          </div>
        </div>
        {/* 메인 컨텐츠 */}
        <MenuManagement />
      </div>
      {/* Scroll to Top 버튼 (모바일/태블릿 전용) */}
      <ScrollToTop />
    </div>
  );
 }
--- a/frontend/app/(main)/admin/screenMng/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/page.tsx
@ -2,11 +2,11 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Plus, ArrowLeft, ArrowRight, Circle } from "lucide-react";
 import ScreenList from "@/components/screen/ScreenList";
 import ScreenDesigner from "@/components/screen/ScreenDesigner";
 import TemplateManager from "@/components/screen/TemplateManager";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 import { ScreenDefinition } from "@/types/screen";
 // 단계별 진행을 위한 타입 정의
@ -25,14 +25,17 @@ export default function ScreenManagementPage() {
    list: {
      title: "화면 목록 관리",
      description: "생성된 화면들을 확인하고 관리하세요",
      icon: "📋",
    },
    design: {
      title: "화면 설계",
      description: "드래그앤드롭으로 화면을 설계하세요",
      icon: "🎨",
    },
    template: {
      title: "템플릿 관리",
      description: "화면 템플릿을 관리하고 재사용하세요",
      icon: "📝",
    },
  };
@ -62,56 +65,62 @@ export default function ScreenManagementPage() {
    }
  };
  // 현재 단계가 마지막 단계인지 확인
  const isLastStep = currentStep === "template";
  // 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용 (고정 높이)
  if (isDesignMode) {
    return (
-      <div className="fixed inset-0 z-50 bg-background">
+      <div className="fixed inset-0 z-50 bg-white">
        <ScreenDesigner selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
      </div>
    );
  }
  return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="min-h-screen bg-gray-50">
-      <div className="space-y-6 p-6">
+      <div className="w-full max-w-none space-y-6 px-4 py-8">
-        {/* 페이지 헤더 */}
+        {/* 페이지 제목 */}
-        <div className="space-y-2 border-b pb-4">
+        <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
-          <h1 className="text-3xl font-bold tracking-tight">화면 관리</h1>
+          <div>
-          <p className="text-sm text-muted-foreground">화면을 설계하고 템플릿을 관리합니다</p>
+            <h1 className="text-3xl font-bold text-gray-900">화면 관리</h1>
            <p className="mt-2 text-gray-600">화면을 설계하고 템플릿을 관리합니다</p>
          </div>
        </div>
        {/* 단계별 내용 */}
-        <div className="flex-1">
+        <div className="flex-1 overflow-hidden">
          {/* 화면 목록 단계 */}
          {currentStep === "list" && (
-            <ScreenList
+            <div className="space-y-8">
-              onScreenSelect={setSelectedScreen}
+              <div className="flex items-center justify-between rounded-lg border bg-white p-4 shadow-sm">
-              selectedScreen={selectedScreen}
+                <h2 className="text-xl font-semibold text-gray-800">{stepConfig.list.title}</h2>
-              onDesignScreen={(screen) => {
+                <Button variant="default" className="shadow-sm" onClick={() => goToNextStep("design")}>
-                setSelectedScreen(screen);
+                  화면 설계하기 <ArrowRight className="ml-2 h-4 w-4" />
-                goToNextStep("design");
+                </Button>
-              }}
+              </div>
-            />
+              <ScreenList
                onScreenSelect={setSelectedScreen}
                selectedScreen={selectedScreen}
                onDesignScreen={(screen) => {
                  setSelectedScreen(screen);
                  goToNextStep("design");
                }}
              />
            </div>
          )}
          {/* 템플릿 관리 단계 */}
          {currentStep === "template" && (
-            <div className="space-y-6">
+            <div className="space-y-8">
-              <div className="flex items-center justify-between rounded-lg border bg-card p-4 shadow-sm">
+              <div className="flex items-center justify-between rounded-lg border bg-white p-4 shadow-sm">
-                <h2 className="text-xl font-semibold">{stepConfig.template.title}</h2>
+                <h2 className="text-xl font-semibold text-gray-800">{stepConfig.template.title}</h2>
                <div className="flex gap-2">
-                  <Button 
+                  <Button variant="outline" className="shadow-sm" onClick={goToPreviousStep}>
-                    variant="outline" 
+                    <ArrowLeft className="mr-2 h-4 w-4" />
                    onClick={goToPreviousStep}
                    className="h-10 gap-2 text-sm font-medium"
                  >
                    <ArrowLeft className="h-4 w-4" />
                    이전 단계
                  </Button>
-                  <Button 
+                  <Button variant="default" className="shadow-sm" onClick={() => goToStep("list")}>
                    onClick={() => goToStep("list")}
                    className="h-10 gap-2 text-sm font-medium"
                  >
                    목록으로 돌아가기
                  </Button>
                </div>
@ -121,9 +130,6 @@ export default function ScreenManagementPage() {
          )}
        </div>
      </div>
      {/* Scroll to Top 버튼 */}
      <ScrollToTop />
    </div>
  );
 }
--- a/frontend/app/(main)/admin/tableMng/page.tsx
+++ b/frontend/app/(main)/admin/tableMng/page.tsx
@ -1,11 +1,13 @@
 "use client";
 import { useState, useEffect, useMemo, useCallback } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Search, Database, RefreshCw, Settings, Plus, Activity } from "lucide-react";
+import { Search, Database, RefreshCw, Settings, Menu, X, Plus, Activity } from "lucide-react";
 import { LoadingSpinner } from "@/components/common/LoadingSpinner";
 import { toast } from "sonner";
 import { useMultiLang } from "@/hooks/useMultiLang";
@ -19,7 +21,7 @@ import { CreateTableModal } from "@/components/admin/CreateTableModal";
 import { AddColumnModal } from "@/components/admin/AddColumnModal";
 import { DDLLogViewer } from "@/components/admin/DDLLogViewer";
 import { TableLogViewer } from "@/components/admin/TableLogViewer";
-import { ScrollToTop } from "@/components/common/ScrollToTop";
+// 가상화 스크롤링을 위한 간단한 구현
 interface TableInfo {
  tableName: string;
@ -544,468 +546,457 @@ export default function TableManagementPage() {
  }, [selectedTable, columns.length, totalColumns, columnsLoading, pageSize, loadColumnTypes]);
  return (
-    <div className="bg-background flex min-h-screen flex-col">
+    <div className="w-full max-w-none space-y-8 px-4 py-8">
-      <div className="space-y-6 p-6">
+      {/* 페이지 제목 */}
-        {/* 페이지 헤더 */}
+      <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
-        <div className="space-y-2 border-b pb-4">
+        <div>
-          <div className="flex flex-col gap-2 lg:flex-row lg:items-start lg:justify-between">
+          <h1 className="text-3xl font-bold text-gray-900">
-            <div>
+            {getTextFromUI(TABLE_MANAGEMENT_KEYS.PAGE_TITLE, "테이블 타입 관리")}
-              <h1 className="text-3xl font-bold tracking-tight">
+          </h1>
-                {getTextFromUI(TABLE_MANAGEMENT_KEYS.PAGE_TITLE, "테이블 타입 관리")}
+          <p className="mt-2 text-gray-600">
-              </h1>
+            {getTextFromUI(TABLE_MANAGEMENT_KEYS.PAGE_DESCRIPTION, "데이터베이스 테이블과 컬럼의 타입을 관리합니다")}
-              <p className="text-muted-foreground mt-2 text-sm">
+          </p>
-                {getTextFromUI(
+          {isSuperAdmin && (
-                  TABLE_MANAGEMENT_KEYS.PAGE_DESCRIPTION,
+            <p className="mt-1 text-sm font-medium text-blue-600">
-                  "데이터베이스 테이블과 컬럼의 타입을 관리합니다",
+              🔧 최고 관리자 권한으로 새 테이블 생성 및 컬럼 추가가 가능합니다
-                )}
+            </p>
-              </p>
+          )}
              {isSuperAdmin && (
                <p className="text-primary mt-1 text-sm font-medium">
                  최고 관리자 권한으로 새 테이블 생성 및 컬럼 추가가 가능합니다
                </p>
              )}
            </div>
            <div className="flex items-center gap-2">
              {/* DDL 기능 버튼들 (최고 관리자만) */}
              {isSuperAdmin && (
                <>
                  <Button
                    onClick={() => setCreateTableModalOpen(true)}
                    className="h-10 gap-2 text-sm font-medium"
                    size="default"
                  >
                    <Plus className="h-4 w-4" />새 테이블 생성
                  </Button>
                  {selectedTable && (
                    <Button
                      onClick={() => setAddColumnModalOpen(true)}
                      variant="outline"
                      className="h-10 gap-2 text-sm font-medium"
                    >
                      <Plus className="h-4 w-4" />
                      컬럼 추가
                    </Button>
                  )}
                  <Button
                    onClick={() => setDdlLogViewerOpen(true)}
                    variant="outline"
                    className="h-10 gap-2 text-sm font-medium"
                  >
                    <Activity className="h-4 w-4" />
                    DDL 로그
                  </Button>
                </>
              )}
              <Button
                onClick={loadTables}
                disabled={loading}
                variant="outline"
                className="h-10 gap-2 text-sm font-medium"
              >
                <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
                {getTextFromUI(TABLE_MANAGEMENT_KEYS.BUTTON_REFRESH, "새로고침")}
              </Button>
            </div>
          </div>
        </div>
-        <div className="flex h-full gap-6">
+        <div className="flex items-center gap-2">
-          {/* 좌측 사이드바: 테이블 목록 (20%) */}
+          {/* DDL 기능 버튼들 (최고 관리자만) */}
-          <div className="w-[20%] border-r pr-6">
+          {isSuperAdmin && (
-            <div className="space-y-4">
+            <>
-              <h2 className="flex items-center gap-2 text-lg font-semibold">
+              <Button
-                <Database className="text-muted-foreground h-5 w-5" />
+                onClick={() => setCreateTableModalOpen(true)}
-                {getTextFromUI(TABLE_MANAGEMENT_KEYS.TABLE_NAME, "테이블 목록")}
+                className="bg-green-600 text-white hover:bg-green-700"
-              </h2>
+                size="sm"
              >
                <Plus className="mr-2 h-4 w-4" />새 테이블 생성
              </Button>
-              {/* 검색 */}
+              {selectedTable && (
                <Button onClick={() => setAddColumnModalOpen(true)} variant="outline" size="sm">
                  <Plus className="mr-2 h-4 w-4" />
                  컬럼 추가
                </Button>
              )}
              <Button onClick={() => setDdlLogViewerOpen(true)} variant="outline" size="sm">
                <Activity className="mr-2 h-4 w-4" />
                DDL 로그
              </Button>
            </>
          )}
          <Button onClick={loadTables} disabled={loading} className="flex items-center gap-2" size="sm">
            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
            {getTextFromUI(TABLE_MANAGEMENT_KEYS.BUTTON_REFRESH, "새로고침")}
          </Button>
        </div>
      </div>
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-5">
        {/* 테이블 목록 */}
        <Card className="shadow-sm lg:col-span-1">
          <CardHeader className="bg-gray-50/50">
            <CardTitle className="flex items-center gap-2">
              <Database className="h-5 w-5 text-gray-600" />
              {getTextFromUI(TABLE_MANAGEMENT_KEYS.TABLE_NAME, "테이블 목록")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            {/* 검색 */}
            <div className="mb-4">
              <div className="relative">
-                <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
                <Input
                  placeholder={getTextFromUI(TABLE_MANAGEMENT_KEYS.SEARCH_PLACEHOLDER, "테이블 검색...")}
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="h-10 pl-10 text-sm"
+                  className="pl-10"
                />
              </div>
              {/* 테이블 목록 */}
              <div className="space-y-3">
                {loading ? (
                  <div className="flex items-center justify-center py-8">
                    <LoadingSpinner />
                    <span className="text-muted-foreground ml-2 text-sm">
                      {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_LOADING_TABLES, "테이블 로딩 중...")}
                    </span>
                  </div>
                ) : tables.length === 0 ? (
                  <div className="text-muted-foreground py-8 text-center text-sm">
                    {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_NO_TABLES, "테이블이 없습니다")}
                  </div>
                ) : (
                  tables
                    .filter(
                      (table) =>
                        table.tableName.toLowerCase().includes(searchTerm.toLowerCase()) ||
                        (table.displayName && table.displayName.toLowerCase().includes(searchTerm.toLowerCase())),
                    )
                    .map((table) => (
                      <div
                        key={table.tableName}
                        className={`bg-card cursor-pointer rounded-lg border p-4 shadow-sm transition-all ${
                          selectedTable === table.tableName ? "shadow-md" : "hover:shadow-md"
                        }`}
                        onClick={() => handleTableSelect(table.tableName)}
                      >
                        <h4 className="text-sm font-semibold">{table.displayName || table.tableName}</h4>
                        <p className="text-muted-foreground mt-1 text-xs">
                          {table.description || getTextFromUI(TABLE_MANAGEMENT_KEYS.TABLE_DESCRIPTION, "설명 없음")}
                        </p>
                        <div className="mt-2 flex items-center justify-between border-t pt-2">
                          <span className="text-muted-foreground text-xs">컬럼</span>
                          <Badge variant="secondary" className="text-xs">
                            {table.columnCount}
                          </Badge>
                        </div>
                      </div>
                    ))
                )}
              </div>
            </div>
          </div>
-          {/* 우측 메인 영역: 컬럼 타입 관리 (80%) */}
+            {/* 테이블 목록 */}
-          <div className="w-[80%] pl-0">
+            <div className="max-h-96 space-y-2 overflow-y-auto">
-            <div className="flex h-full flex-col space-y-4">
+              {loading ? (
-              <h2 className="flex items-center gap-2 text-xl font-semibold">
+                <div className="flex items-center justify-center py-8">
-                <Settings className="text-muted-foreground h-5 w-5" />
+                  <LoadingSpinner />
-                {selectedTable ? <>테이블 설정 - {selectedTable}</> : "테이블 타입 관리"}
+                  <span className="ml-2 text-sm text-gray-500">
-              </h2>
+                    {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_LOADING_TABLES, "테이블 로딩 중...")}
-
+                  </span>
-              <div className="flex-1 overflow-hidden">
+                </div>
-                {!selectedTable ? (
+              ) : tables.length === 0 ? (
-                  <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+                <div className="py-8 text-center text-gray-500">
-                    <div className="flex flex-col items-center gap-2 text-center">
+                  {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_NO_TABLES, "테이블이 없습니다")}
-                      <p className="text-muted-foreground text-sm">
+                </div>
-                        {getTextFromUI(TABLE_MANAGEMENT_KEYS.SELECT_TABLE_PLACEHOLDER, "테이블을 선택해주세요")}
+              ) : (
-                      </p>
+                tables
-                    </div>
+                  .filter(
-                  </div>
+                    (table) =>
-                ) : (
+                      table.tableName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                  <>
+                      (table.displayName && table.displayName.toLowerCase().includes(searchTerm.toLowerCase())),
-                    {/* 테이블 라벨 설정 */}
+                  )
-                    <div className="mb-4 flex items-center gap-4">
+                  .map((table) => (
-                      <div className="flex-1">
+                    <div
-                        <Input
+                      key={table.tableName}
-                          value={tableLabel}
+                      className={`cursor-pointer rounded-lg border p-3 transition-colors ${
-                          onChange={(e) => setTableLabel(e.target.value)}
+                        selectedTable === table.tableName
-                          placeholder="테이블 표시명"
+                          ? "border-blue-500 bg-blue-50"
-                          className="h-10 text-sm"
+                          : "border-gray-200 hover:border-gray-300"
-                        />
+                      }`}
-                      </div>
+                      onClick={() => handleTableSelect(table.tableName)}
-                      <div className="flex-1">
+                    >
-                        <Input
+                      <div className="flex items-center justify-between">
-                          value={tableDescription}
+                        <div className="flex-1">
-                          onChange={(e) => setTableDescription(e.target.value)}
+                          <h3 className="font-medium text-gray-900">{table.displayName || table.tableName}</h3>
-                          placeholder="테이블 설명"
+                          <p className="text-sm text-gray-500">
-                          className="h-10 text-sm"
+                            {table.description || getTextFromUI(TABLE_MANAGEMENT_KEYS.TABLE_DESCRIPTION, "설명 없음")}
-                        />
+                          </p>
                      </div>
                    </div>
                    {columnsLoading ? (
                      <div className="flex items-center justify-center py-8">
                        <LoadingSpinner />
                        <span className="text-muted-foreground ml-2 text-sm">
                          {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_LOADING_COLUMNS, "컬럼 정보 로딩 중...")}
                        </span>
                      </div>
                    ) : columns.length === 0 ? (
                      <div className="text-muted-foreground py-8 text-center text-sm">
                        {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_NO_COLUMNS, "컬럼이 없습니다")}
                      </div>
                    ) : (
                      <div className="space-y-4">
                        {/* 컬럼 헤더 */}
                        <div className="text-foreground flex items-center border-b pb-2 text-sm font-semibold">
                          <div className="w-40 px-4">컬럼명</div>
                          <div className="w-48 px-4">라벨</div>
                          <div className="w-48 px-4">입력 타입</div>
                          <div className="flex-1 px-4" style={{ maxWidth: "calc(100% - 808px)" }}>
                            상세 설정
                          </div>
                          <div className="w-80 px-4">설명</div>
                        </div>
-
+                        <div className="flex items-center gap-2">
-                        {/* 컬럼 리스트 */}
+                          <Badge variant="secondary">
-                        <div
+                            {table.columnCount} {getTextFromUI(TABLE_MANAGEMENT_KEYS.TABLE_COLUMN_COUNT, "컬럼")}
-                          className="max-h-96 overflow-y-auto rounded-lg border"
+                          </Badge>
                          onScroll={(e) => {
                            const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
                            // 스크롤이 끝에 가까워지면 더 많은 데이터 로드
                            if (scrollHeight - scrollTop <= clientHeight + 100) {
                              loadMoreColumns();
                            }
                          }}
                        >
                          {columns.map((column, index) => (
                            <div
                              key={column.columnName}
                              className="hover:bg-muted/50 flex items-center border-b py-2 transition-colors"
                            >
                              <div className="w-40 px-4">
                                <div className="font-mono text-sm">{column.columnName}</div>
                              </div>
                              <div className="w-48 px-4">
                                <Input
                                  value={column.displayName || ""}
                                  onChange={(e) => handleLabelChange(column.columnName, e.target.value)}
                                  placeholder={column.columnName}
                                  className="h-8 text-xs"
                                />
                              </div>
                              <div className="w-48 px-4">
                                <Select
                                  value={column.inputType || "text"}
                                  onValueChange={(value) => handleInputTypeChange(column.columnName, value)}
                                >
                                  <SelectTrigger className="h-8 text-xs">
                                    <SelectValue placeholder="입력 타입 선택" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {memoizedInputTypeOptions.map((option) => (
                                      <SelectItem key={option.value} value={option.value}>
                                        {option.label}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>
                              <div className="flex-1 px-4" style={{ maxWidth: "calc(100% - 808px)" }}>
                                {/* 웹 타입이 'code'인 경우 공통코드 선택 */}
                                {column.inputType === "code" && (
                                  <Select
                                    value={column.codeCategory || "none"}
                                    onValueChange={(value) =>
                                      handleDetailSettingsChange(column.columnName, "code", value)
                                    }
                                  >
                                    <SelectTrigger className="h-8 text-xs">
                                      <SelectValue placeholder="공통코드 선택" />
                                    </SelectTrigger>
                                    <SelectContent>
                                      {commonCodeOptions.map((option, index) => (
                                        <SelectItem key={`code-${option.value}-${index}`} value={option.value}>
                                          {option.label}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                )}
                                {/* 웹 타입이 'entity'인 경우 참조 테이블 선택 */}
                                {column.inputType === "entity" && (
                                  <div className="space-y-1">
                                    {/* Entity 타입 설정 - 가로 배치 */}
                                    <div className="border-primary/20 bg-primary/5 rounded-lg border p-2">
                                      <div className="mb-2 flex items-center gap-2">
                                        <span className="text-primary text-xs font-medium">Entity 설정</span>
                                      </div>
                                      <div className="grid grid-cols-3 gap-2">
                                        {/* 참조 테이블 */}
                                        <div>
                                          <label className="text-muted-foreground mb-1 block text-xs">
                                            참조 테이블
                                          </label>
                                          <Select
                                            value={column.referenceTable || "none"}
                                            onValueChange={(value) =>
                                              handleDetailSettingsChange(column.columnName, "entity", value)
                                            }
                                          >
                                            <SelectTrigger className="bg-background h-8 text-xs">
                                              <SelectValue placeholder="선택" />
                                            </SelectTrigger>
                                            <SelectContent>
                                              {referenceTableOptions.map((option, index) => (
                                                <SelectItem
                                                  key={`entity-${option.value}-${index}`}
                                                  value={option.value}
                                                >
                                                  <div className="flex flex-col">
                                                    <span className="font-medium">{option.label}</span>
                                                    <span className="text-muted-foreground text-xs">
                                                      {option.value}
                                                    </span>
                                                  </div>
                                                </SelectItem>
                                              ))}
                                            </SelectContent>
                                          </Select>
                                        </div>
                                        {/* 조인 컬럼 */}
                                        {column.referenceTable && column.referenceTable !== "none" && (
                                          <div>
                                            <label className="text-muted-foreground mb-1 block text-xs">
                                              조인 컬럼
                                            </label>
                                            <Select
                                              value={column.referenceColumn || "none"}
                                              onValueChange={(value) =>
                                                handleDetailSettingsChange(
                                                  column.columnName,
                                                  "entity_reference_column",
                                                  value,
                                                )
                                              }
                                            >
                                              <SelectTrigger className="bg-background h-8 text-xs">
                                                <SelectValue placeholder="선택" />
                                              </SelectTrigger>
                                              <SelectContent>
                                                <SelectItem value="none">-- 선택 안함 --</SelectItem>
                                                {referenceTableColumns[column.referenceTable]?.map((refCol, index) => (
                                                  <SelectItem
                                                    key={`ref-col-${refCol.columnName}-${index}`}
                                                    value={refCol.columnName}
                                                  >
                                                    <span className="font-medium">{refCol.columnName}</span>
                                                  </SelectItem>
                                                ))}
                                                {(!referenceTableColumns[column.referenceTable] ||
                                                  referenceTableColumns[column.referenceTable].length === 0) && (
                                                  <SelectItem value="loading" disabled>
                                                    <div className="flex items-center gap-2">
                                                      <div className="border-primary h-3 w-3 animate-spin rounded-full border border-t-transparent"></div>
                                                      로딩중
                                                    </div>
                                                  </SelectItem>
                                                )}
                                              </SelectContent>
                                            </Select>
                                          </div>
                                        )}
                                      </div>
                                      {/* 설정 완료 표시 - 간소화 */}
                                      {column.referenceTable &&
                                        column.referenceTable !== "none" &&
                                        column.referenceColumn &&
                                        column.referenceColumn !== "none" &&
                                        column.displayColumn &&
                                        column.displayColumn !== "none" && (
                                          <div className="bg-primary/10 text-primary mt-1 flex items-center gap-1 rounded px-2 py-1 text-xs">
                                            <span>✓</span>
                                            <span className="truncate">
                                              {column.columnName} → {column.referenceTable}.{column.displayColumn}
                                            </span>
                                          </div>
                                        )}
                                    </div>
                                  </div>
                                )}
                                {/* 다른 웹 타입인 경우 빈 공간 */}
                                {column.inputType !== "code" && column.inputType !== "entity" && (
                                  <div className="text-muted-foreground flex h-8 items-center text-xs">-</div>
                                )}
                              </div>
                              <div className="w-80 px-4">
                                <Input
                                  value={column.description || ""}
                                  onChange={(e) => handleColumnChange(index, "description", e.target.value)}
                                  placeholder="설명"
                                  className="h-8 text-xs"
                                />
                              </div>
                            </div>
                          ))}
                        </div>
                        {/* 로딩 표시 */}
                        {columnsLoading && (
                          <div className="flex items-center justify-center py-4">
                            <LoadingSpinner />
                            <span className="text-muted-foreground ml-2 text-sm">더 많은 컬럼 로딩 중...</span>
                          </div>
                        )}
                        {/* 페이지 정보 */}
                        <div className="text-muted-foreground text-center text-sm">
                          {columns.length} / {totalColumns} 컬럼 표시됨
                        </div>
                        {/* 전체 저장 버튼 */}
                        <div className="flex justify-end pt-4">
                          <Button
-                            onClick={saveAllSettings}
+                            variant="ghost"
-                            disabled={!selectedTable || columns.length === 0}
+                            size="sm"
-                            className="h-10 gap-2 text-sm font-medium"
+                            className="h-8 w-8 p-0"
                            onClick={(e) => {
                              e.stopPropagation();
                              setLogViewerTableName(table.tableName);
                              setLogViewerOpen(true);
                            }}
                            title="변경 이력 조회"
                          >
-                            <Settings className="h-4 w-4" />
+                            <Activity className="h-4 w-4" />
                            전체 설정 저장
                          </Button>
                        </div>
                      </div>
-                    )}
+                    </div>
-                  </>
+                  ))
-                )}
+              )}
              </div>
            </div>
-          </div>
+          </CardContent>
-        </div>
+        </Card>
-        {/* DDL 모달 컴포넌트들 */}
+        {/* 컬럼 타입 관리 */}
-        {isSuperAdmin && (
+        <Card className="shadow-sm lg:col-span-4">
-          <>
+          <CardHeader className="bg-gray-50/50">
-            <CreateTableModal
+            <CardTitle className="flex items-center gap-2">
-              isOpen={createTableModalOpen}
+              <Settings className="h-5 w-5 text-gray-600" />
-              onClose={() => setCreateTableModalOpen(false)}
+              {selectedTable ? <>테이블 설정 - {selectedTable}</> : "테이블 타입 관리"}
-              onSuccess={async (result) => {
+            </CardTitle>
-                toast.success("테이블이 성공적으로 생성되었습니다!");
+          </CardHeader>
-                // 테이블 목록 새로고침
+          <CardContent>
-                await loadTables();
+            {!selectedTable ? (
-                // 새로 생성된 테이블 자동 선택 및 컬럼 로드
+              <div className="py-12 text-center text-gray-500">
-                if (result.data?.tableName) {
+                {getTextFromUI(TABLE_MANAGEMENT_KEYS.SELECT_TABLE_PLACEHOLDER, "테이블을 선택해주세요")}
-                  setSelectedTable(result.data.tableName);
+              </div>
-                  setCurrentPage(1);
+            ) : (
-                  setColumns([]);
+              <>
-                  await loadColumnTypes(result.data.tableName, 1, pageSize);
+                {/* 테이블 라벨 설정 */}
-                }
+                <div className="mb-6 space-y-4 rounded-lg border border-gray-200 p-4">
-              }}
+                  <h3 className="text-lg font-medium text-gray-900">테이블 정보</h3>
-            />
+                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                      <label className="mb-1 block text-sm font-medium text-gray-700">테이블명 (읽기 전용)</label>
                      <Input value={selectedTable} disabled className="bg-gray-50" />
                    </div>
                    <div>
                      <label className="mb-1 block text-sm font-medium text-gray-700">표시명</label>
                      <Input
                        value={tableLabel}
                        onChange={(e) => setTableLabel(e.target.value)}
                        placeholder="테이블 표시명을 입력하세요"
                      />
                    </div>
                    <div className="md:col-span-2">
                      <label className="mb-1 block text-sm font-medium text-gray-700">설명</label>
                      <Input
                        value={tableDescription}
                        onChange={(e) => setTableDescription(e.target.value)}
                        placeholder="테이블 설명을 입력하세요"
                      />
                    </div>
                  </div>
                </div>
-            <AddColumnModal
+                {columnsLoading ? (
-              isOpen={addColumnModalOpen}
+                  <div className="flex items-center justify-center py-8">
-              onClose={() => setAddColumnModalOpen(false)}
+                    <LoadingSpinner />
-              tableName={selectedTable || ""}
+                    <span className="ml-2 text-sm text-gray-500">
-              onSuccess={async (result) => {
+                      {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_LOADING_COLUMNS, "컬럼 정보 로딩 중...")}
-                toast.success("컬럼이 성공적으로 추가되었습니다!");
+                    </span>
-                // 테이블 목록 새로고침 (컬럼 수 업데이트)
+                  </div>
-                await loadTables();
+                ) : columns.length === 0 ? (
-                // 선택된 테이블의 컬럼 목록 새로고침 - 페이지 리셋
+                  <div className="py-8 text-center text-gray-500">
-                if (selectedTable) {
+                    {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_NO_COLUMNS, "컬럼이 없습니다")}
-                  setCurrentPage(1);
+                  </div>
-                  setColumns([]); // 기존 컬럼 목록 초기화
+                ) : (
-                  await loadColumnTypes(selectedTable, 1, pageSize);
+                  <div className="space-y-4">
-                }
+                    {/* 컬럼 헤더 */}
-              }}
+                    <div className="flex items-center border-b border-gray-200 pb-2 text-sm font-medium text-gray-700">
-            />
+                      <div className="w-40 px-4">컬럼명</div>
                      <div className="w-48 px-4">라벨</div>
                      <div className="w-48 px-4">입력 타입</div>
                      <div className="flex-1 px-4" style={{ maxWidth: "calc(100% - 808px)" }}>
                        상세 설정
                      </div>
                      <div className="w-80 px-4">설명</div>
                    </div>
-            <DDLLogViewer isOpen={ddlLogViewerOpen} onClose={() => setDdlLogViewerOpen(false)} />
+                    {/* 컬럼 리스트 */}
                    <div
                      className="max-h-96 overflow-y-auto rounded-lg border border-gray-200"
                      onScroll={(e) => {
                        const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
                        // 스크롤이 끝에 가까워지면 더 많은 데이터 로드
                        if (scrollHeight - scrollTop <= clientHeight + 100) {
                          loadMoreColumns();
                        }
                      }}
                    >
                      {columns.map((column, index) => (
                        <div
                          key={column.columnName}
                          className="flex items-center border-b border-gray-200 py-2 hover:bg-gray-50"
                        >
                          <div className="w-40 px-4">
                            <div className="font-mono text-sm text-gray-700">{column.columnName}</div>
                          </div>
                          <div className="w-48 px-4">
                            <Input
                              value={column.displayName || ""}
                              onChange={(e) => handleLabelChange(column.columnName, e.target.value)}
                              placeholder={column.columnName}
                              className="h-7 text-xs"
                            />
                          </div>
                          <div className="w-48 px-4">
                            <Select
                              value={column.inputType || "text"}
                              onValueChange={(value) => handleInputTypeChange(column.columnName, value)}
                            >
                              <SelectTrigger className="h-7 text-xs">
                                <SelectValue placeholder="입력 타입 선택" />
                              </SelectTrigger>
                              <SelectContent>
                                {memoizedInputTypeOptions.map((option) => (
                                  <SelectItem key={option.value} value={option.value}>
                                    {option.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="flex-1 px-4" style={{ maxWidth: "calc(100% - 808px)" }}>
                            {/* 웹 타입이 'code'인 경우 공통코드 선택 */}
                            {column.inputType === "code" && (
                              <Select
                                value={column.codeCategory || "none"}
                                onValueChange={(value) => handleDetailSettingsChange(column.columnName, "code", value)}
                              >
                                <SelectTrigger className="h-7 text-xs">
                                  <SelectValue placeholder="공통코드 선택" />
                                </SelectTrigger>
                                <SelectContent>
                                  {commonCodeOptions.map((option, index) => (
                                    <SelectItem key={`code-${option.value}-${index}`} value={option.value}>
                                      {option.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            )}
                            {/* 웹 타입이 'entity'인 경우 참조 테이블 선택 */}
                            {column.inputType === "entity" && (
                              <div className="space-y-1">
                                {/* 🎯 Entity 타입 설정 - 가로 배치 */}
                                <div className="rounded-lg border border-blue-200 bg-blue-50 p-2">
                                  <div className="mb-2 flex items-center gap-2">
                                    <span className="text-xs font-medium text-blue-800">Entity 설정</span>
                                  </div>
-            {/* 테이블 로그 뷰어 */}
+                                  <div className="grid grid-cols-3 gap-2">
-            <TableLogViewer tableName={logViewerTableName} open={logViewerOpen} onOpenChange={setLogViewerOpen} />
+                                    {/* 참조 테이블 */}
-          </>
+                                    <div>
-        )}
+                                      <label className="mb-1 block text-xs text-gray-600">참조 테이블</label>
                                      <Select
                                        value={column.referenceTable || "none"}
                                        onValueChange={(value) =>
                                          handleDetailSettingsChange(column.columnName, "entity", value)
                                        }
                                      >
                                        <SelectTrigger className="h-7 bg-white text-xs">
                                          <SelectValue placeholder="선택" />
                                        </SelectTrigger>
                                        <SelectContent>
                                          {referenceTableOptions.map((option, index) => (
                                            <SelectItem key={`entity-${option.value}-${index}`} value={option.value}>
                                              <div className="flex flex-col">
                                                <span className="font-medium">{option.label}</span>
                                                <span className="text-xs text-gray-500">{option.value}</span>
                                              </div>
                                            </SelectItem>
                                          ))}
                                        </SelectContent>
                                      </Select>
                                    </div>
-        {/* Scroll to Top 버튼 */}
+                                    {/* 조인 컬럼 */}
-        <ScrollToTop />
+                                    {column.referenceTable && column.referenceTable !== "none" && (
                                      <div>
                                        <label className="mb-1 block text-xs text-gray-600">조인 컬럼</label>
                                        <Select
                                          value={column.referenceColumn || "none"}
                                          onValueChange={(value) =>
                                            handleDetailSettingsChange(
                                              column.columnName,
                                              "entity_reference_column",
                                              value,
                                            )
                                          }
                                        >
                                          <SelectTrigger className="h-7 bg-white text-xs">
                                            <SelectValue placeholder="선택" />
                                          </SelectTrigger>
                                          <SelectContent>
                                            <SelectItem value="none">-- 선택 안함 --</SelectItem>
                                            {referenceTableColumns[column.referenceTable]?.map((refCol, index) => (
                                              <SelectItem
                                                key={`ref-col-${refCol.columnName}-${index}`}
                                                value={refCol.columnName}
                                              >
                                                <span className="font-medium">{refCol.columnName}</span>
                                              </SelectItem>
                                            ))}
                                            {(!referenceTableColumns[column.referenceTable] ||
                                              referenceTableColumns[column.referenceTable].length === 0) && (
                                              <SelectItem value="loading" disabled>
                                                <div className="flex items-center gap-2">
                                                  <div className="h-3 w-3 animate-spin rounded-full border border-blue-500 border-t-transparent"></div>
                                                  로딩중
                                                </div>
                                              </SelectItem>
                                            )}
                                          </SelectContent>
                                        </Select>
                                      </div>
                                    )}
                                  </div>
                                  {/* 설정 완료 표시 - 간소화 */}
                                  {column.referenceTable &&
                                    column.referenceTable !== "none" &&
                                    column.referenceColumn &&
                                    column.referenceColumn !== "none" &&
                                    column.displayColumn &&
                                    column.displayColumn !== "none" && (
                                      <div className="mt-1 flex items-center gap-1 rounded bg-green-100 px-2 py-1 text-xs text-green-700">
                                        <span className="text-green-600">✓</span>
                                        <span className="truncate">
                                          {column.columnName} → {column.referenceTable}.{column.displayColumn}
                                        </span>
                                      </div>
                                    )}
                                </div>
                              </div>
                            )}
                            {/* 다른 웹 타입인 경우 빈 공간 */}
                            {column.inputType !== "code" && column.inputType !== "entity" && (
                              <div className="flex h-7 items-center text-xs text-gray-400">-</div>
                            )}
                          </div>
                          <div className="w-80 px-4">
                            <Input
                              value={column.description || ""}
                              onChange={(e) => handleColumnChange(index, "description", e.target.value)}
                              placeholder="설명"
                              className="h-7 text-xs"
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                    {/* 로딩 표시 */}
                    {columnsLoading && (
                      <div className="flex items-center justify-center py-4">
                        <LoadingSpinner />
                        <span className="ml-2 text-sm text-gray-500">더 많은 컬럼 로딩 중...</span>
                      </div>
                    )}
                    {/* 페이지 정보 */}
                    <div className="text-center text-sm text-gray-500">
                      {columns.length} / {totalColumns} 컬럼 표시됨
                    </div>
                    {/* 전체 저장 버튼 */}
                    <div className="flex justify-end pt-4">
                      <Button
                        onClick={saveAllSettings}
                        disabled={!selectedTable || columns.length === 0}
                        className="flex items-center gap-2"
                      >
                        <Settings className="h-4 w-4" />
                        전체 설정 저장
                      </Button>
                    </div>
                  </div>
                )}
              </>
            )}
          </CardContent>
        </Card>
      </div>
      {/* DDL 모달 컴포넌트들 */}
      {isSuperAdmin && (
        <>
          <CreateTableModal
            isOpen={createTableModalOpen}
            onClose={() => setCreateTableModalOpen(false)}
            onSuccess={async (result) => {
              toast.success("테이블이 성공적으로 생성되었습니다!");
              // 테이블 목록 새로고침
              await loadTables();
              // 새로 생성된 테이블 자동 선택 및 컬럼 로드
              if (result.data?.tableName) {
                setSelectedTable(result.data.tableName);
                setCurrentPage(1);
                setColumns([]);
                await loadColumnTypes(result.data.tableName, 1, pageSize);
              }
            }}
          />
          <AddColumnModal
            isOpen={addColumnModalOpen}
            onClose={() => setAddColumnModalOpen(false)}
            tableName={selectedTable || ""}
            onSuccess={async (result) => {
              toast.success("컬럼이 성공적으로 추가되었습니다!");
              // 테이블 목록 새로고침 (컬럼 수 업데이트)
              await loadTables();
              // 선택된 테이블의 컬럼 목록 새로고침 - 페이지 리셋
              if (selectedTable) {
                setCurrentPage(1);
                setColumns([]); // 기존 컬럼 목록 초기화
                await loadColumnTypes(selectedTable, 1, pageSize);
              }
            }}
          />
          <DDLLogViewer isOpen={ddlLogViewerOpen} onClose={() => setDdlLogViewerOpen(false)} />
          {/* 테이블 로그 뷰어 */}
          <TableLogViewer tableName={logViewerTableName} open={logViewerOpen} onOpenChange={setLogViewerOpen} />
        </>
      )}
    </div>
  );
 }
--- a/frontend/app/(main)/admin/userMng/page.tsx
+++ b/frontend/app/(main)/admin/userMng/page.tsx
@ -1,30 +1,24 @@
 "use client";
 import { UserManagement } from "@/components/admin/UserManagement";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 /**
 * 사용자관리 페이지
 * URL: /admin/userMng
 *
 * shadcn/ui 스타일 가이드 적용
 */
 export default function UserMngPage() {
  return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="min-h-screen bg-gray-50">
-      <div className="space-y-6 p-6">
+      <div className="w-full max-w-none px-4 py-8 space-y-8">
-        {/* 페이지 헤더 */}
+        {/* 페이지 제목 */}
-        <div className="space-y-2 border-b pb-4">
+        <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
-          <h1 className="text-3xl font-bold tracking-tight">사용자 관리</h1>
+          <div>
-          <p className="text-sm text-muted-foreground">시스템 사용자 계정 및 권한을 관리합니다</p>
+            <h1 className="text-3xl font-bold text-gray-900">사용자 관리</h1>
            <p className="mt-2 text-gray-600">시스템 사용자 계정 및 권한을 관리합니다</p>
          </div>
        </div>
        {/* 메인 컨텐츠 */}
        <UserManagement />
      </div>
      {/* Scroll to Top 버튼 (모바일/태블릿 전용) */}
      <ScrollToTop />
    </div>
  );
 }
--- a/frontend/components/admin/BatchCard.tsx
+++ b/frontend/components/admin/BatchCard.tsx
@ -12,6 +12,8 @@ import {
  RefreshCw,
  Clock,
  Database,
  ArrowRight,
  Globe,
  Calendar,
  Activity,
  Settings
@ -37,97 +39,90 @@ export default function BatchCard({
  onDelete,
  getMappingSummary
 }: BatchCardProps) {
-  // 상태에 따른 스타일 결정
+  // 상태에 따른 색상 및 스타일 결정
-  const isExecuting = executingBatch === batch.id;
+  const getStatusColor = () => {
-  const isActive = batch.is_active === 'Y';
+    if (executingBatch === batch.id) return "bg-blue-50 border-blue-200";
    if (batch.is_active === 'Y') return "bg-green-50 border-green-200";
    return "bg-gray-50 border-gray-200";
  };
  const getStatusBadge = () => {
    if (executingBatch === batch.id) {
      return <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs px-1.5 py-0.5 h-5">실행 중</Badge>;
    }
    return (
      <Badge variant={batch.is_active === 'Y' ? 'default' : 'secondary'} className="text-xs px-1.5 py-0.5 h-5">
        {batch.is_active === 'Y' ? '활성' : '비활성'}
      </Badge>
    );
  };
  return (
-    <Card className="rounded-lg border bg-card shadow-sm transition-colors hover:bg-muted/50">
+    <Card className={`transition-all duration-200 hover:shadow-md ${getStatusColor()} h-fit`}>
-      <CardContent className="p-4">
+      <CardContent className="p-3">
-        {/* 헤더 */}
+        {/* 헤더 섹션 */}
-        <div className="mb-4 flex items-start justify-between">
+        <div className="mb-1.5">
-          <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between mb-1">
-            <div className="flex items-center gap-2 mb-1">
+            <div className="flex items-center space-x-1 min-w-0 flex-1">
-              <Settings className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+              <Settings className="h-2.5 w-2.5 text-gray-600 flex-shrink-0" />
-              <h3 className="text-base font-semibold truncate">{batch.batch_name}</h3>
+              <h3 className="text-xs font-medium text-gray-900 truncate">{batch.batch_name}</h3>
            </div>
-            <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+            {getStatusBadge()}
              {batch.description || '설명 없음'}
            </p>
          </div>
-          <Badge variant={isActive ? 'default' : 'secondary'} className="ml-2 flex-shrink-0">
+          
-            {isExecuting ? '실행 중' : isActive ? '활성' : '비활성'}
+          <p className="text-xs text-gray-500 line-clamp-1 leading-tight h-3 flex items-start">
-          </Badge>
+            {batch.description || '\u00A0'}
          </p>
        </div>
-        {/* 정보 */}
+        {/* 정보 섹션 */}
-        <div className="space-y-2 border-t pt-4">
+        <div className="space-y-1 mb-2">
          {/* 스케줄 정보 */}
-          <div className="flex justify-between text-sm">
+          <div className="flex items-center space-x-1 text-xs">
-            <span className="flex items-center gap-2 text-muted-foreground">
+            <Clock className="h-2.5 w-2.5 text-blue-600" />
-              <Clock className="h-4 w-4" />
+            <span className="text-gray-600 truncate text-xs">{batch.cron_schedule}</span>
              스케줄
            </span>
            <span className="font-medium truncate ml-2">{batch.cron_schedule}</span>
          </div>
          {/* 생성일 정보 */}
-          <div className="flex justify-between text-sm">
+          <div className="flex items-center space-x-1 text-xs">
-            <span className="flex items-center gap-2 text-muted-foreground">
+            <Calendar className="h-2.5 w-2.5 text-green-600" />
-              <Calendar className="h-4 w-4" />
+            <span className="text-gray-600 text-xs">
              생성일
            </span>
            <span className="font-medium">
              {new Date(batch.created_date).toLocaleDateString('ko-KR')}
            </span>
          </div>
          {/* 매핑 정보 */}
          {batch.batch_mappings && batch.batch_mappings.length > 0 && (
            <div className="flex justify-between text-sm">
              <span className="flex items-center gap-2 text-muted-foreground">
                <Database className="h-4 w-4" />
                매핑
              </span>
              <span className="font-medium">
                {batch.batch_mappings.length}개
              </span>
            </div>
          )}
        </div>
-        {/* 실행 중 프로그레스 */}
+        {/* 매핑 정보 섹션 */}
-        {isExecuting && (
+        {batch.batch_mappings && batch.batch_mappings.length > 0 && (
-          <div className="mt-4 space-y-2 border-t pt-4">
+          <div className="mb-2 p-1.5 bg-white rounded border border-gray-100">
-            <div className="flex items-center gap-2 text-sm text-primary">
+            <div className="flex items-center space-x-1 mb-1">
-              <Activity className="h-4 w-4 animate-pulse" />
+              <Database className="h-2.5 w-2.5 text-purple-600" />
-              <span>실행 중...</span>
+              <span className="text-xs font-medium text-gray-700">
                매핑 ({batch.batch_mappings.length})
              </span>
            </div>
-            <div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
+            <div className="text-xs text-gray-600 line-clamp-1">
-              <div 
+              {getMappingSummary(batch.batch_mappings)}
                className="h-full animate-pulse rounded-full bg-primary" 
                style={{ width: '45%' }}
              />
            </div>
          </div>
        )}
-        {/* 액션 버튼 */}
+        {/* 액션 버튼 섹션 */}
-        <div className="mt-4 grid grid-cols-2 gap-2 border-t pt-4">
+        <div className="grid grid-cols-2 gap-1 pt-2 border-t border-gray-100">
          {/* 실행 버튼 */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => onExecute(batch.id)}
-            disabled={isExecuting}
+            disabled={executingBatch === batch.id}
-            className="h-9 flex-1 gap-2 text-sm"
+            className="flex items-center justify-center space-x-1 bg-blue-50 hover:bg-blue-100 text-blue-700 border-blue-200 text-xs h-6"
          >
-            {isExecuting ? (
+            {executingBatch === batch.id ? (
-              <RefreshCw className="h-4 w-4 animate-spin" />
+              <RefreshCw className="h-2.5 w-2.5 animate-spin" />
            ) : (
-              <Play className="h-4 w-4" />
+              <Play className="h-2.5 w-2.5" />
            )}
-            실행
+            <span>실행</span>
          </Button>
          {/* 활성화/비활성화 버튼 */}
@ -135,14 +130,18 @@ export default function BatchCard({
            variant="outline"
            size="sm"
            onClick={() => onToggleStatus(batch.id, batch.is_active)}
-            className="h-9 flex-1 gap-2 text-sm"
+            className={`flex items-center justify-center space-x-1 text-xs h-6 ${
              batch.is_active === 'Y' 
                ? 'bg-orange-50 hover:bg-orange-100 text-orange-700 border-orange-200'
                : 'bg-green-50 hover:bg-green-100 text-green-700 border-green-200'
            }`}
          >
-            {isActive ? (
+            {batch.is_active === 'Y' ? (
-              <Pause className="h-4 w-4" />
+              <Pause className="h-2.5 w-2.5" />
            ) : (
-              <Play className="h-4 w-4" />
+              <Play className="h-2.5 w-2.5" />
            )}
-            {isActive ? '비활성' : '활성'}
+            <span>{batch.is_active === 'Y' ? '비활성' : '활성'}</span>
          </Button>
          {/* 수정 버튼 */}
@ -150,23 +149,36 @@ export default function BatchCard({
            variant="outline"
            size="sm"
            onClick={() => onEdit(batch.id)}
-            className="h-9 flex-1 gap-2 text-sm"
+            className="flex items-center justify-center space-x-1 bg-gray-50 hover:bg-gray-100 text-gray-700 border-gray-200 text-xs h-6"
          >
-            <Edit className="h-4 w-4" />
+            <Edit className="h-2.5 w-2.5" />
-            수정
+            <span>수정</span>
          </Button>
          {/* 삭제 버튼 */}
          <Button
-            variant="destructive"
+            variant="outline"
            size="sm"
            onClick={() => onDelete(batch.id, batch.batch_name)}
-            className="h-9 flex-1 gap-2 text-sm"
+            className="flex items-center justify-center space-x-1 bg-red-50 hover:bg-red-100 text-red-700 border-red-200 text-xs h-6"
          >
-            <Trash2 className="h-4 w-4" />
+            <Trash2 className="h-2.5 w-2.5" />
-            삭제
+            <span>삭제</span>
          </Button>
        </div>
        {/* 실행 중일 때 프로그레스 표시 */}
        {executingBatch === batch.id && (
          <div className="mt-2 pt-2 border-t border-blue-100">
            <div className="flex items-center space-x-1 text-xs text-blue-600">
              <Activity className="h-3 w-3 animate-pulse" />
              <span>실행 중...</span>
            </div>
            <div className="mt-1 w-full bg-blue-100 rounded-full h-1">
              <div className="bg-blue-600 h-1 rounded-full animate-pulse" style={{ width: '45%' }}></div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
--- a/frontend/components/admin/BatchJobModal.tsx
+++ b/frontend/components/admin/BatchJobModal.tsx
@ -166,25 +166,41 @@ export default function BatchJobModal({
    }));
  };
-  // 상태 제거 - 필요없음
+  const getJobTypeIcon = (type: string) => {
    switch (type) {
      case 'collection': return '📥';
      case 'sync': return '🔄';
      case 'cleanup': return '🧹';
      case 'custom': return '⚙️';
      default: return '📋';
    }
  };
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'Y': return 'bg-green-100 text-green-800';
      case 'N': return 'bg-destructive/20 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+      <DialogContent className="max-w-2xl">
        <DialogHeader>
-          <DialogTitle className="text-base sm:text-lg">
+          <DialogTitle>
            {job ? "배치 작업 수정" : "새 배치 작업"}
          </DialogTitle>
        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-6">
          {/* 기본 정보 */}
-          <div className="space-y-3 sm:space-y-4">
+          <div className="space-y-4">
-            <h3 className="text-sm font-semibold sm:text-base">기본 정보</h3>
+            <h3 className="text-lg font-medium">기본 정보</h3>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
+            <div className="grid grid-cols-2 gap-4">
-              <div>
+              <div className="space-y-2">
-                <Label htmlFor="job_name" className="text-xs sm:text-sm">작업명 *</Label>
+                <Label htmlFor="job_name">작업명 *</Label>
                <Input
                  id="job_name"
                  value={formData.job_name || ""}
@ -192,24 +208,26 @@ export default function BatchJobModal({
                    setFormData(prev => ({ ...prev, job_name: e.target.value }))
                  }
                  placeholder="배치 작업명을 입력하세요"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                  required
                />
              </div>
-              <div>
+              <div className="space-y-2">
-                <Label htmlFor="job_type" className="text-xs sm:text-sm">작업 타입 *</Label>
+                <Label htmlFor="job_type">작업 타입 *</Label>
                <Select
                  value={formData.job_type || "collection"}
                  onValueChange={handleJobTypeChange}
                >
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {jobTypes.map((type) => (
-                      <SelectItem key={type.value} value={type.value} className="text-xs sm:text-sm">
+                      <SelectItem key={type.value} value={type.value}>
-                        {type.label}
+                        <span className="flex items-center gap-2">
                          <span>{getJobTypeIcon(type.value)}</span>
                          {type.label}
                        </span>
                      </SelectItem>
                    ))}
                  </SelectContent>
@ -217,8 +235,8 @@ export default function BatchJobModal({
              </div>
            </div>
-            <div>
+            <div className="space-y-2">
-              <Label htmlFor="description" className="text-xs sm:text-sm">설명</Label>
+              <Label htmlFor="description">설명</Label>
              <Textarea
                id="description"
                value={formData.description || ""}
@ -226,7 +244,6 @@ export default function BatchJobModal({
                  setFormData(prev => ({ ...prev, description: e.target.value }))
                }
                placeholder="배치 작업에 대한 설명을 입력하세요"
                className="min-h-[60px] text-xs sm:min-h-[80px] sm:text-sm"
                rows={3}
              />
            </div>
@ -234,21 +251,21 @@ export default function BatchJobModal({
          {/* 작업 설정 */}
          {formData.job_type === 'collection' && (
-            <div className="space-y-3 sm:space-y-4">
+            <div className="space-y-4">
-              <h3 className="text-sm font-semibold sm:text-base">수집 설정</h3>
+              <h3 className="text-lg font-medium">수집 설정</h3>
-              <div>
+              <div className="space-y-2">
-                <Label htmlFor="collection_config" className="text-xs sm:text-sm">수집 설정</Label>
+                <Label htmlFor="collection_config">수집 설정</Label>
                <Select
                  value={formData.config_json?.collectionConfigId?.toString() || ""}
                  onValueChange={handleCollectionConfigChange}
                >
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectTrigger>
                    <SelectValue placeholder="수집 설정을 선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    {collectionConfigs.map((config) => (
-                      <SelectItem key={config.id} value={config.id.toString()} className="text-xs sm:text-sm">
+                      <SelectItem key={config.id} value={config.id.toString()}>
                        {config.config_name} - {config.source_table}
                      </SelectItem>
                    ))}
@ -259,11 +276,11 @@ export default function BatchJobModal({
          )}
          {/* 스케줄 설정 */}
-          <div className="space-y-3 sm:space-y-4">
+          <div className="space-y-4">
-            <h3 className="text-sm font-semibold sm:text-base">스케줄 설정</h3>
+            <h3 className="text-lg font-medium">스케줄 설정</h3>
-            <div>
+            <div className="space-y-2">
-              <Label htmlFor="schedule_cron" className="text-xs sm:text-sm">Cron 표현식</Label>
+              <Label htmlFor="schedule_cron">Cron 표현식</Label>
              <div className="flex gap-2">
                <Input
                  id="schedule_cron"
@ -272,15 +289,15 @@ export default function BatchJobModal({
                    setFormData(prev => ({ ...prev, schedule_cron: e.target.value }))
                  }
                  placeholder="예: 0 0 * * * (매일 자정)"
-                  className="h-8 flex-1 text-xs sm:h-10 sm:text-sm"
+                  className="flex-1"
                />
                <Select onValueChange={handleSchedulePresetSelect}>
-                  <SelectTrigger className="h-8 w-24 text-xs sm:h-10 sm:w-32 sm:text-sm">
+                  <SelectTrigger className="w-32">
                    <SelectValue placeholder="프리셋" />
                  </SelectTrigger>
                  <SelectContent>
                    {schedulePresets.map((preset) => (
-                      <SelectItem key={preset.value} value={preset.value} className="text-xs sm:text-sm">
+                      <SelectItem key={preset.value} value={preset.value}>
                        {preset.label}
                      </SelectItem>
                    ))}
@ -292,43 +309,43 @@ export default function BatchJobModal({
          {/* 실행 통계 (수정 모드일 때만) */}
          {job?.id && (
-            <div className="space-y-3 sm:space-y-4">
+            <div className="space-y-4">
-              <h3 className="text-sm font-semibold sm:text-base">실행 통계</h3>
+              <h3 className="text-lg font-medium">실행 통계</h3>
-              <div className="grid grid-cols-3 gap-2 sm:gap-4">
+              <div className="grid grid-cols-3 gap-4">
-                <div className="rounded-lg border bg-card p-3 sm:p-4">
+                <div className="p-4 border rounded-lg">
-                  <div className="text-xl font-bold text-primary sm:text-2xl">
+                  <div className="text-2xl font-bold text-primary">
                    {formData.execution_count || 0}
                  </div>
-                  <div className="text-xs text-muted-foreground sm:text-sm">총 실행</div>
+                  <div className="text-sm text-muted-foreground">총 실행 횟수</div>
                </div>
-                <div className="rounded-lg border bg-card p-3 sm:p-4">
+                <div className="p-4 border rounded-lg">
-                  <div className="text-xl font-bold text-primary sm:text-2xl">
+                  <div className="text-2xl font-bold text-green-600">
                    {formData.success_count || 0}
                  </div>
-                  <div className="text-xs text-muted-foreground sm:text-sm">성공</div>
+                  <div className="text-sm text-muted-foreground">성공 횟수</div>
                </div>
-                <div className="rounded-lg border bg-card p-3 sm:p-4">
+                <div className="p-4 border rounded-lg">
-                  <div className="text-xl font-bold text-destructive sm:text-2xl">
+                  <div className="text-2xl font-bold text-destructive">
                    {formData.failure_count || 0}
                  </div>
-                  <div className="text-xs text-muted-foreground sm:text-sm">실패</div>
+                  <div className="text-sm text-muted-foreground">실패 횟수</div>
                </div>
              </div>
              {formData.last_executed_at && (
-                <p className="text-xs text-muted-foreground sm:text-sm">
+                <div className="text-sm text-muted-foreground">
                  마지막 실행: {new Date(formData.last_executed_at).toLocaleString()}
-                </p>
+                </div>
              )}
            </div>
          )}
          {/* 활성화 설정 */}
          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center space-x-2">
              <Switch
                id="is_active"
                checked={formData.is_active === "Y"}
@ -336,28 +353,19 @@ export default function BatchJobModal({
                  setFormData(prev => ({ ...prev, is_active: checked ? "Y" : "N" }))
                }
              />
-              <Label htmlFor="is_active" className="text-xs sm:text-sm">활성화</Label>
+              <Label htmlFor="is_active">활성화</Label>
            </div>
-            <Badge variant={formData.is_active === "Y" ? "default" : "secondary"}>
+            <Badge className={getStatusColor(formData.is_active || "N")}>
              {formData.is_active === "Y" ? "활성" : "비활성"}
            </Badge>
          </div>
-          <DialogFooter className="gap-2 sm:gap-0">
+          <DialogFooter>
-            <Button 
+            <Button type="button" variant="outline" onClick={onClose}>
              type="button" 
              variant="outline" 
              onClick={onClose}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
-            <Button 
+            <Button type="submit" disabled={isLoading}>
              type="submit" 
              disabled={isLoading}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {isLoading ? "저장 중..." : "저장"}
            </Button>
          </DialogFooter>
--- a/frontend/components/admin/CategoryItem.tsx
+++ b/frontend/components/admin/CategoryItem.tsx
@ -40,21 +40,22 @@ export function CategoryItem({ category, isSelected, onSelect, onEdit, onDelete
  return (
    <div
      className={cn(
-        "cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all",
+        "group cursor-pointer rounded-lg border p-3 transition-all hover:shadow-sm",
-        isSelected 
+        isSelected ? "border-gray-300 bg-gray-100" : "border-gray-200 bg-white hover:bg-gray-50",
          ? "shadow-md" 
          : "hover:shadow-md",
      )}
      onClick={onSelect}
    >
-      <div className="flex items-start justify-between gap-2">
+      <div className="flex items-start justify-between">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
-            <h4 className="text-sm font-semibold">{category.category_name}</h4>
+            <h3 className="font-medium text-gray-900">{category.category_name}</h3>
            <Badge
              variant={category.is_active === "Y" ? "default" : "secondary"}
              className={cn(
-                "cursor-pointer text-xs transition-colors",
+                "cursor-pointer transition-colors",
                category.is_active === "Y"
                  ? "bg-green-100 text-green-800 hover:bg-green-200 hover:text-green-900"
                  : "bg-gray-100 text-muted-foreground hover:bg-gray-200 hover:text-gray-700",
                updateCategoryMutation.isPending && "cursor-not-allowed opacity-50",
              )}
              onClick={(e) => {
@ -70,17 +71,17 @@ export function CategoryItem({ category, isSelected, onSelect, onEdit, onDelete
              {category.is_active === "Y" ? "활성" : "비활성"}
            </Badge>
          </div>
-          <p className="mt-1 text-xs text-muted-foreground">{category.category_code}</p>
+          <p className="mt-1 text-sm text-muted-foreground">{category.category_code}</p>
-          {category.description && <p className="mt-1 text-xs text-muted-foreground">{category.description}</p>}
+          {category.description && <p className="mt-1 text-sm text-gray-500">{category.description}</p>}
        </div>
        {/* 액션 버튼 */}
        {isSelected && (
          <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
-            <Button variant="ghost" size="sm" onClick={onEdit}>
+            <Button size="sm" variant="ghost" onClick={onEdit}>
              <Edit className="h-3 w-3" />
            </Button>
-            <Button variant="ghost" size="sm" onClick={onDelete}>
+            <Button size="sm" variant="ghost" onClick={onDelete}>
              <Trash2 className="h-3 w-3" />
            </Button>
          </div>
--- a/frontend/components/admin/CodeCategoryFormModal.tsx
+++ b/frontend/components/admin/CodeCategoryFormModal.tsx
@ -165,26 +165,26 @@ export function CodeCategoryFormModal({
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
-          <DialogTitle className="text-base sm:text-lg">{isEditing ? "카테고리 수정" : "새 카테고리"}</DialogTitle>
+          <DialogTitle>{isEditing ? "카테고리 수정" : "새 카테고리"}</DialogTitle>
        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4">
          {/* 카테고리 코드 */}
          {!isEditing && (
            <div className="space-y-2">
-              <Label htmlFor="categoryCode" className="text-xs sm:text-sm">카테고리 코드 *</Label>
+              <Label htmlFor="categoryCode">카테고리 코드 *</Label>
              <Input
                id="categoryCode"
                {...createForm.register("categoryCode")}
                disabled={isLoading}
                placeholder="카테고리 코드를 입력하세요"
-                className={createForm.formState.errors.categoryCode ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
+                className={createForm.formState.errors.categoryCode ? "border-destructive" : ""}
                onBlur={() => handleFieldBlur("categoryCode")}
              />
              {createForm.formState.errors.categoryCode && (
-                <p className="text-[10px] sm:text-xs text-destructive">{createForm.formState.errors.categoryCode.message}</p>
+                <p className="text-sm text-destructive">{createForm.formState.errors.categoryCode.message}</p>
              )}
              {!createForm.formState.errors.categoryCode && (
                <ValidationMessage
@ -199,9 +199,9 @@ export function CodeCategoryFormModal({
          {/* 카테고리 코드 표시 (수정 시) */}
          {isEditing && editingCategory && (
            <div className="space-y-2">
-              <Label htmlFor="categoryCodeDisplay" className="text-xs sm:text-sm">카테고리 코드</Label>
+              <Label htmlFor="categoryCodeDisplay">카테고리 코드</Label>
-              <Input id="categoryCodeDisplay" value={editingCategory.category_code} disabled className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+              <Input id="categoryCodeDisplay" value={editingCategory.category_code} disabled className="bg-muted" />
-              <p className="text-[10px] sm:text-xs text-muted-foreground">카테고리 코드는 수정할 수 없습니다.</p>
+              <p className="text-sm text-gray-500">카테고리 코드는 수정할 수 없습니다.</p>
            </div>
          )}
@ -350,14 +350,8 @@ export function CodeCategoryFormModal({
          )}
          {/* 버튼 */}
-          <div className="flex gap-2 pt-4 sm:justify-end sm:gap-0">
+          <div className="flex justify-end space-x-2 pt-4">
-            <Button 
+            <Button type="button" variant="outline" onClick={onClose} disabled={isLoading}>
              type="button" 
              variant="outline" 
              onClick={onClose} 
              disabled={isLoading}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
@ -368,7 +362,6 @@ export function CodeCategoryFormModal({
                hasDuplicateErrors ||
                isDuplicateChecking
              }
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {isLoading ? (
                <>
--- a/frontend/components/admin/CodeCategoryPanel.tsx
+++ b/frontend/components/admin/CodeCategoryPanel.tsx
@ -92,77 +92,78 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
  }
  return (
-    <div className="flex h-full flex-col space-y-4">
+    <div className="flex h-full flex-col">
-      {/* 검색 및 액션 */}
+      {/* 검색 및 필터 */}
-      <div className="space-y-3">
+      <div className="border-b p-4">
-        {/* 검색 + 버튼 */}
+        <div className="space-y-3">
-        <div className="flex items-center gap-2">
+          {/* 검색 */}
-          <div className="relative flex-1">
+          <div className="relative">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <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="h-10 pl-10 text-sm"
+              className="pl-10"
            />
          </div>
          <Button onClick={handleNewCategory} className="h-10 gap-2 text-sm font-medium">
            <Plus className="h-4 w-4" />
            등록
          </Button>
        </div>
-        {/* 활성 필터 */}
+          {/* 활성 필터 */}
-        <div className="flex items-center gap-2">
+          <div className="flex items-center space-x-2">
-          <input
+            <input
-            type="checkbox"
+              type="checkbox"
-            id="activeOnly"
+              id="activeOnly"
-            checked={showActiveOnly}
+              checked={showActiveOnly}
-            onChange={(e) => setShowActiveOnly(e.target.checked)}
+              onChange={(e) => setShowActiveOnly(e.target.checked)}
-            className="h-4 w-4 rounded border-input"
+              className="rounded border-gray-300"
-          />
+            />
-          <label htmlFor="activeOnly" className="text-sm text-muted-foreground">
+            <label htmlFor="activeOnly" className="text-sm text-muted-foreground">
-            활성만 표시
+              활성 카테고리만 표시
-          </label>
+            </label>
          </div>
          {/* 새 카테고리 버튼 */}
          <Button onClick={handleNewCategory} className="w-full" size="sm">
            <Plus className="mr-2 h-4 w-4" />새 카테고리
          </Button>
        </div>
      </div>
      {/* 카테고리 목록 (무한 스크롤) */}
-      <div className="space-y-3" onScroll={handleScroll}>
+      <div className="h-96 overflow-y-auto" onScroll={handleScroll}>
        {isLoading ? (
          <div className="flex h-32 items-center justify-center">
            <LoadingSpinner />
          </div>
        ) : categories.length === 0 ? (
-          <div className="flex h-32 items-center justify-center">
+          <div className="p-4 text-center text-gray-500">
-            <p className="text-sm text-muted-foreground">
+            {searchTerm ? "검색 결과가 없습니다." : "카테고리가 없습니다."}
              {searchTerm ? "검색 결과가 없습니다." : "카테고리가 없습니다."}
            </p>
          </div>
        ) : (
          <>
-            {categories.map((category, index) => (
+            <div className="space-y-1 p-2">
-              <CategoryItem
+              {categories.map((category, index) => (
-                key={`${category.category_code}-${index}`}
+                <CategoryItem
-                category={category}
+                  key={`${category.category_code}-${index}`}
-                isSelected={selectedCategoryCode === category.category_code}
+                  category={category}
-                onSelect={() => onSelectCategory(category.category_code)}
+                  isSelected={selectedCategoryCode === category.category_code}
-                onEdit={() => handleEditCategory(category.category_code)}
+                  onSelect={() => onSelectCategory(category.category_code)}
-                onDelete={() => handleDeleteCategory(category.category_code)}
+                  onEdit={() => handleEditCategory(category.category_code)}
-              />
+                  onDelete={() => handleDeleteCategory(category.category_code)}
-            ))}
+                />
              ))}
            </div>
            {/* 추가 로딩 표시 */}
            {isFetchingNextPage && (
-              <div className="flex items-center justify-center py-4">
+              <div className="flex justify-center py-4">
                <LoadingSpinner size="sm" />
-                <span className="ml-2 text-sm text-muted-foreground">추가 로딩 중...</span>
+                <span className="ml-2 text-sm text-gray-500">추가 로딩 중...</span>
              </div>
            )}
            {/* 더 이상 데이터가 없을 때 */}
            {!hasNextPage && categories.length > 0 && (
-              <div className="py-4 text-center text-sm text-muted-foreground">모든 카테고리를 불러왔습니다.</div>
+              <div className="py-4 text-center text-sm text-gray-400">모든 카테고리를 불러왔습니다.</div>
            )}
          </>
        )}
--- a/frontend/components/admin/CodeDetailPanel.tsx
+++ b/frontend/components/admin/CodeDetailPanel.tsx
@ -109,18 +109,20 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
  if (!categoryCode) {
    return (
-      <div className="flex h-96 items-center justify-center">
+      <div className="flex h-full items-center justify-center">
-        <p className="text-sm text-muted-foreground">카테고리를 선택하세요</p>
+        <div className="text-center text-gray-500">
          <p>카테고리를 선택하세요</p>
        </div>
      </div>
    );
  }
  if (error) {
    return (
-      <div className="flex h-96 items-center justify-center">
+      <div className="flex h-full items-center justify-center">
        <div className="text-center">
-          <p className="text-sm font-semibold text-destructive">코드를 불러오는 중 오류가 발생했습니다.</p>
+          <p className="text-destructive">코드를 불러오는 중 오류가 발생했습니다.</p>
-          <Button variant="outline" onClick={() => window.location.reload()} className="mt-4 h-10 text-sm font-medium">
+          <Button variant="outline" onClick={() => window.location.reload()} className="mt-2">
            다시 시도
          </Button>
        </div>
@ -129,120 +131,129 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
  }
  return (
-    <div className="flex h-full flex-col space-y-4">
+    <div className="flex h-full flex-col">
-      {/* 검색 및 액션 */}
+      {/* 검색 및 필터 */}
-      <div className="space-y-3">
+      <div className="border-b p-4">
-        {/* 검색 + 버튼 */}
+        <div className="space-y-3">
-        <div className="flex items-center gap-2">
+          {/* 검색 */}
-          <div className="relative w-full sm:w-[300px]">
+          <div className="relative">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <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="h-10 pl-10 text-sm"
+              className="pl-10"
            />
          </div>
          <Button onClick={handleNewCode} className="h-10 gap-2 text-sm font-medium">
            <Plus className="h-4 w-4" />
            등록
          </Button>
        </div>
-        {/* 활성 필터 */}
+          {/* 활성 필터 */}
-        <div className="flex items-center gap-2">
+          <div className="flex items-center space-x-2">
-          <input
+            <input
-            type="checkbox"
+              type="checkbox"
-            id="activeOnlyCodes"
+              id="activeOnlyCodes"
-            checked={showActiveOnly}
+              checked={showActiveOnly}
-            onChange={(e) => setShowActiveOnly(e.target.checked)}
+              onChange={(e) => setShowActiveOnly(e.target.checked)}
-            className="h-4 w-4 rounded border-input"
+              className="rounded border-gray-300"
-          />
+            />
-          <label htmlFor="activeOnlyCodes" className="text-sm text-muted-foreground">
+            <label htmlFor="activeOnlyCodes" className="text-sm text-muted-foreground">
-            활성만 표시
+              활성 코드만 표시
-          </label>
+            </label>
          </div>
          {/* 새 코드 버튼 */}
          <Button onClick={handleNewCode} className="w-full" size="sm">
            <Plus className="mr-2 h-4 w-4" />새 코드
          </Button>
        </div>
      </div>
      {/* 코드 목록 (무한 스크롤) */}
-      <div className="space-y-3" onScroll={handleScroll}>
+      <div className="h-96 overflow-y-auto" onScroll={handleScroll}>
        {isLoading ? (
          <div className="flex h-32 items-center justify-center">
            <LoadingSpinner />
          </div>
        ) : filteredCodes.length === 0 ? (
-          <div className="flex h-32 items-center justify-center">
+          <div className="p-4 text-center text-gray-500">
-            <p className="text-sm text-muted-foreground">
+            {codes.length === 0 ? "코드가 없습니다." : "검색 결과가 없습니다."}
              {codes.length === 0 ? "코드가 없습니다." : "검색 결과가 없습니다."}
            </p>
          </div>
        ) : (
          <>
-            <DndContext {...dragAndDrop.dndContextProps}>
+            <div className="p-2">
-              <SortableContext
+              <DndContext {...dragAndDrop.dndContextProps}>
-                items={filteredCodes.map((code) => code.codeValue || code.code_value)}
+                <SortableContext
-                strategy={verticalListSortingStrategy}
+                  items={filteredCodes.map((code) => code.codeValue || code.code_value)}
-              >
+                  strategy={verticalListSortingStrategy}
-                {filteredCodes.map((code, index) => (
+                >
-                  <SortableCodeItem
+                  <div className="space-y-1">
-                    key={`${code.codeValue || code.code_value}-${index}`}
+                    {filteredCodes.map((code, index) => (
-                    code={code}
+                      <SortableCodeItem
-                    categoryCode={categoryCode}
+                        key={`${code.codeValue || code.code_value}-${index}`}
-                    onEdit={() => handleEditCode(code)}
+                        code={code}
-                    onDelete={() => handleDeleteCode(code)}
+                        categoryCode={categoryCode}
-                  />
+                        onEdit={() => handleEditCode(code)}
-                ))}
+                        onDelete={() => handleDeleteCode(code)}
-              </SortableContext>
+                      />
-
+                    ))}
              <DragOverlay dropAnimation={null}>
                {dragAndDrop.activeItem ? (
                  <div className="cursor-grabbing rounded-lg border bg-card p-4 shadow-lg">
                    {(() => {
                      const activeCode = dragAndDrop.activeItem;
                      if (!activeCode) return null;
                      return (
                        <div className="flex items-start justify-between">
                          <div className="min-w-0 flex-1">
                            <div className="flex items-center gap-2">
                              <h4 className="text-sm font-semibold">
                                {activeCode.codeName || activeCode.code_name}
                              </h4>
                              <Badge
                                variant={
                                  activeCode.isActive === "Y" || activeCode.is_active === "Y"
                                    ? "default"
                                    : "secondary"
                                }
                              >
                                {activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "활성" : "비활성"}
                              </Badge>
                            </div>
                            <p className="mt-1 text-xs text-muted-foreground">
                              {activeCode.codeValue || activeCode.code_value}
                            </p>
                            {activeCode.description && (
                              <p className="mt-1 text-xs text-muted-foreground">{activeCode.description}</p>
                            )}
                          </div>
                        </div>
                      );
                    })()}
                  </div>
-                ) : null}
+                </SortableContext>
-              </DragOverlay>
+
-            </DndContext>
+                <DragOverlay dropAnimation={null}>
                  {dragAndDrop.activeItem ? (
                    <div className="cursor-grabbing rounded-lg border border-gray-300 bg-white p-3 shadow-lg">
                      {(() => {
                        const activeCode = dragAndDrop.activeItem;
                        if (!activeCode) return null;
                        return (
                          <div className="flex items-start justify-between">
                            <div className="min-w-0 flex-1">
                              <div className="flex items-center gap-2">
                                <h3 className="font-medium text-gray-900">
                                  {activeCode.codeName || activeCode.code_name}
                                </h3>
                                <Badge
                                  variant={
                                    activeCode.isActive === "Y" || activeCode.is_active === "Y"
                                      ? "default"
                                      : "secondary"
                                  }
                                  className={cn(
                                    "transition-colors",
                                    activeCode.isActive === "Y" || activeCode.is_active === "Y"
                                      ? "bg-green-100 text-green-800"
                                      : "bg-gray-100 text-muted-foreground",
                                  )}
                                >
                                  {activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "활성" : "비활성"}
                                </Badge>
                              </div>
                              <p className="mt-1 text-sm text-muted-foreground">
                                {activeCode.codeValue || activeCode.code_value}
                              </p>
                              {activeCode.description && (
                                <p className="mt-1 text-sm text-gray-500">{activeCode.description}</p>
                              )}
                            </div>
                          </div>
                        );
                      })()}
                    </div>
                  ) : null}
                </DragOverlay>
              </DndContext>
            </div>
            {/* 무한 스크롤 로딩 인디케이터 */}
            {isFetchingNextPage && (
              <div className="flex items-center justify-center py-4">
                <LoadingSpinner size="sm" />
-                <span className="ml-2 text-sm text-muted-foreground">코드를 더 불러오는 중...</span>
+                <span className="ml-2 text-sm text-gray-500">코드를 더 불러오는 중...</span>
              </div>
            )}
            {/* 모든 코드 로드 완료 메시지 */}
            {!hasNextPage && codes.length > 0 && (
-              <div className="py-4 text-center text-sm text-muted-foreground">모든 코드를 불러왔습니다.</div>
+              <div className="py-4 text-center text-sm text-gray-500">모든 코드를 불러왔습니다.</div>
            )}
          </>
        )}
--- a/frontend/components/admin/CodeFormModal.tsx
+++ b/frontend/components/admin/CodeFormModal.tsx
@ -154,21 +154,21 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
-          <DialogTitle className="text-base sm:text-lg">{isEditing ? "코드 수정" : "새 코드"}</DialogTitle>
+          <DialogTitle>{isEditing ? "코드 수정" : "새 코드"}</DialogTitle>
        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4">
          {/* 코드값 */}
          <div className="space-y-2">
-            <Label htmlFor="codeValue" className="text-xs sm:text-sm">코드값 *</Label>
+            <Label htmlFor="codeValue">코드값 *</Label>
            <Input
              id="codeValue"
              {...form.register("codeValue")}
-              disabled={isLoading || isEditing}
+              disabled={isLoading || isEditing} // 수정 시에는 비활성화
              placeholder="코드값을 입력하세요"
-              className={(form.formState.errors as any)?.codeValue ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
+              className={(form.formState.errors as any)?.codeValue ? "border-destructive" : ""}
              onBlur={(e) => {
                const value = e.target.value.trim();
                if (value && !isEditing) {
@ -180,7 +180,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
              }}
            />
            {(form.formState.errors as any)?.codeValue && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage((form.formState.errors as any)?.codeValue)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage((form.formState.errors as any)?.codeValue)}</p>
            )}
            {!isEditing && !(form.formState.errors as any)?.codeValue && (
              <ValidationMessage
@ -193,13 +193,13 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
          {/* 코드명 */}
          <div className="space-y-2">
-            <Label htmlFor="codeName" className="text-xs sm:text-sm">코드명 *</Label>
+            <Label htmlFor="codeName">코드명 *</Label>
            <Input
              id="codeName"
              {...form.register("codeName")}
              disabled={isLoading}
              placeholder="코드명을 입력하세요"
-              className={form.formState.errors.codeName ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
+              className={form.formState.errors.codeName ? "border-destructive" : ""}
              onBlur={(e) => {
                const value = e.target.value.trim();
                if (value) {
@ -211,7 +211,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
              }}
            />
            {form.formState.errors.codeName && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeName)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.codeName)}</p>
            )}
            {!form.formState.errors.codeName && (
              <ValidationMessage
@ -224,13 +224,13 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
          {/* 영문명 */}
          <div className="space-y-2">
-            <Label htmlFor="codeNameEng" className="text-xs sm:text-sm">코드 영문명 *</Label>
+            <Label htmlFor="codeNameEng">코드 영문명 *</Label>
            <Input
              id="codeNameEng"
              {...form.register("codeNameEng")}
              disabled={isLoading}
              placeholder="코드 영문명을 입력하세요"
-              className={form.formState.errors.codeNameEng ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
+              className={form.formState.errors.codeNameEng ? "border-destructive" : ""}
              onBlur={(e) => {
                const value = e.target.value.trim();
                if (value) {
@ -242,7 +242,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
              }}
            />
            {form.formState.errors.codeNameEng && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeNameEng)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.codeNameEng)}</p>
            )}
            {!form.formState.errors.codeNameEng && (
              <ValidationMessage
@ -255,65 +255,57 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
          {/* 설명 */}
          <div className="space-y-2">
-            <Label htmlFor="description" className="text-xs sm:text-sm">설명 *</Label>
+            <Label htmlFor="description">설명 *</Label>
            <Textarea
              id="description"
              {...form.register("description")}
              disabled={isLoading}
              placeholder="설명을 입력하세요"
              rows={3}
-              className={form.formState.errors.description ? "text-xs sm:text-sm border-destructive" : "text-xs sm:text-sm"}
+              className={form.formState.errors.description ? "border-destructive" : ""}
            />
            {form.formState.errors.description && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.description)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.description)}</p>
            )}
          </div>
          {/* 정렬 순서 */}
          <div className="space-y-2">
-            <Label htmlFor="sortOrder" className="text-xs sm:text-sm">정렬 순서</Label>
+            <Label htmlFor="sortOrder">정렬 순서</Label>
            <Input
              id="sortOrder"
              type="number"
              {...form.register("sortOrder", { valueAsNumber: true })}
              disabled={isLoading}
              min={1}
-              className={form.formState.errors.sortOrder ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
+              className={form.formState.errors.sortOrder ? "border-destructive" : ""}
            />
            {form.formState.errors.sortOrder && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.sortOrder)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.sortOrder)}</p>
            )}
          </div>
          {/* 활성 상태 (수정 시에만) */}
          {isEditing && (
-            <div className="flex items-center gap-2">
+            <div className="flex items-center space-x-2">
              <Switch
                id="isActive"
                checked={form.watch("isActive") === "Y"}
                onCheckedChange={(checked) => form.setValue("isActive", checked ? "Y" : "N")}
                disabled={isLoading}
                aria-label="활성 상태"
              />
-              <Label htmlFor="isActive" className="text-xs sm:text-sm">{form.watch("isActive") === "Y" ? "활성" : "비활성"}</Label>
+              <Label htmlFor="isActive">{form.watch("isActive") === "Y" ? "활성" : "비활성"}</Label>
            </div>
          )}
          {/* 버튼 */}
-          <div className="flex gap-2 pt-4 sm:justify-end sm:gap-0">
+          <div className="flex justify-end space-x-2 pt-4">
-            <Button 
+            <Button type="button" variant="outline" onClick={onClose} disabled={isLoading}>
              type="button" 
              variant="outline" 
              onClick={onClose} 
              disabled={isLoading}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              type="submit"
              disabled={isLoading || !form.formState.isValid || hasDuplicateErrors || isDuplicateChecking}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {isLoading ? (
                <>
--- a/frontend/components/admin/CompanyTable.tsx
+++ b/frontend/components/admin/CompanyTable.tsx
@ -3,6 +3,7 @@ import { Company } from "@/types/company";
 import { COMPANY_TABLE_COLUMNS } from "@/constants/company";
 import { Button } from "@/components/ui/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 interface CompanyTableProps {
  companies: Company[];
@ -13,15 +14,13 @@ interface CompanyTableProps {
 /**
 * 회사 목록 테이블 컴포넌트
 * 데스크톱: 테이블 뷰
 * 모바일/태블릿: 카드 뷰
 */
 export function CompanyTable({ companies, isLoading, onEdit, onDelete }: CompanyTableProps) {
  // 디스크 사용량 포맷팅 함수
  const formatDiskUsage = (company: Company) => {
    if (!company.diskUsage) {
      return (
-        <div className="flex items-center gap-1 text-muted-foreground">
+        <div className="text-muted-foreground flex items-center gap-1">
          <HardDrive className="h-3 w-3" />
          <span className="text-xs">정보 없음</span>
        </div>
@ -33,142 +32,45 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
    return (
      <div className="flex flex-col gap-1">
        <div className="flex items-center gap-1">
-          <FileText className="h-3 w-3 text-primary" />
+          <FileText className="h-3 w-3 text-blue-500" />
          <span className="text-xs font-medium">{fileCount}개 파일</span>
        </div>
        <div className="flex items-center gap-1">
-          <HardDrive className="h-3 w-3 text-primary" />
+          <HardDrive className="h-3 w-3 text-green-500" />
          <span className="text-xs">{totalSizeMB.toFixed(1)} MB</span>
        </div>
      </div>
    );
  };
-
+  // 상태에 따른 Badge 색상 결정
  // console.log(companies);
  // 로딩 상태 렌더링
  if (isLoading) {
    return (
-      <>
+      <div className="rounded-md border">
        {/* 데스크톱 테이블 스켈레톤 */}
        <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
          <Table>
            <TableHeader>
              <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
                {COMPANY_TABLE_COLUMNS.map((column) => (
                  <TableHead key={column.key} className="h-12 text-sm font-semibold">
                    {column.label}
                  </TableHead>
                ))}
                <TableHead className="h-12 text-sm font-semibold">디스크 사용량</TableHead>
                <TableHead className="h-12 text-sm font-semibold">작업</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {Array.from({ length: 10 }).map((_, index) => (
                <TableRow key={index} className="border-b">
                  <TableCell className="h-16">
                    <div className="h-4 animate-pulse rounded bg-muted"></div>
                  </TableCell>
                  <TableCell className="h-16">
                    <div className="h-4 animate-pulse rounded bg-muted"></div>
                  </TableCell>
                  <TableCell className="h-16">
                    <div className="h-4 animate-pulse rounded bg-muted"></div>
                  </TableCell>
                  <TableCell className="h-16">
                    <div className="h-4 animate-pulse rounded bg-muted"></div>
                  </TableCell>
                  <TableCell className="h-16">
                    <div className="flex gap-2">
                      <div className="h-8 w-8 animate-pulse rounded bg-muted"></div>
                      <div className="h-8 w-8 animate-pulse rounded bg-muted"></div>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
        {/* 모바일/태블릿 카드 스켈레톤 */}
        <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
          {Array.from({ length: 6 }).map((_, index) => (
            <div key={index} className="rounded-lg border bg-card p-4 shadow-sm">
              <div className="mb-4 flex items-start justify-between">
                <div className="flex-1 space-y-2">
                  <div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
                  <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
                </div>
              </div>
              <div className="space-y-2 border-t pt-4">
                {Array.from({ length: 3 }).map((_, i) => (
                  <div key={i} className="flex justify-between">
                    <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
                    <div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }
  // 데이터가 없을 때
  if (companies.length === 0) {
    return (
      <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
        <div className="flex flex-col items-center gap-2 text-center">
          <p className="text-sm text-muted-foreground">등록된 회사가 없습니다.</p>
        </div>
      </div>
    );
  }
  // 실제 데이터 렌더링
  return (
    <>
      {/* 데스크톱 테이블 뷰 (lg 이상) */}
      <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
        <Table>
          <TableHeader>
-            <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+            <TableRow>
              {COMPANY_TABLE_COLUMNS.map((column) => (
-                <TableHead key={column.key} className="h-12 text-sm font-semibold">
+                <TableHead key={column.key} style={{ width: column.width }}>
                  {column.label}
                </TableHead>
              ))}
-              <TableHead className="h-12 text-sm font-semibold">디스크 사용량</TableHead>
+              <TableHead className="w-[140px]">작업</TableHead>
              <TableHead className="h-12 text-sm font-semibold">작업</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
-            {companies.map((company) => (
+            {Array.from({ length: 5 }).map((_, index) => (
-              <TableRow key={company.regdate + company.company_code} className="border-b transition-colors hover:bg-muted/50">
+              <TableRow key={index}>
-                <TableCell className="h-16 font-mono text-sm">{company.company_code}</TableCell>
+                {COMPANY_TABLE_COLUMNS.map((column) => (
-                <TableCell className="h-16 text-sm font-medium">{company.company_name}</TableCell>
+                  <TableCell key={column.key}>
-                <TableCell className="h-16 text-sm">{company.writer}</TableCell>
+                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                <TableCell className="h-16">{formatDiskUsage(company)}</TableCell>
+                  </TableCell>
-                <TableCell className="h-16">
+                ))}
                <TableCell>
                  <div className="flex gap-2">
-                    <Button
+                    <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
-                      variant="ghost"
+                    <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
                      size="icon"
                      onClick={() => onEdit(company)}
                      className="h-8 w-8"
                      aria-label="수정"
                    >
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => onDelete(company)}
                      className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
                      aria-label="삭제"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
@ -176,58 +78,86 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
          </TableBody>
        </Table>
      </div>
    );
  }
-      {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
+  // 데이터가 없을 때
-      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+  if (companies.length === 0) {
-        {companies.map((company) => (
+    return (
-          <div
+      <div className="rounded-md border">
-            key={company.regdate + company.company_code}
+        <Table>
-            className="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
+          <TableHeader>
-          >
+            <TableRow>
-            {/* 헤더 */}
+              {COMPANY_TABLE_COLUMNS.map((column) => (
-            <div className="mb-4 flex items-start justify-between">
+                <TableHead key={column.key} style={{ width: column.width }}>
-              <div className="flex-1">
+                  {column.label}
-                <h3 className="text-base font-semibold">{company.company_name}</h3>
+                </TableHead>
-                <p className="mt-1 font-mono text-sm text-muted-foreground">{company.company_code}</p>
+              ))}
-              </div>
+              <TableHead className="w-[140px]">작업</TableHead>
-            </div>
+            </TableRow>
-
+          </TableHeader>
-            {/* 정보 */}
+          <TableBody>
-            <div className="space-y-2 border-t pt-4">
+            <TableRow>
-              <div className="flex justify-between text-sm">
+              <TableCell colSpan={COMPANY_TABLE_COLUMNS.length + 1} className="h-24 text-center">
-                <span className="text-muted-foreground">작성자</span>
+                <div className="text-muted-foreground flex flex-col items-center justify-center">
-                <span className="font-medium">{company.writer}</span>
+                  <p>등록된 회사가 없습니다.</p>
-              </div>
+                </div>
-              <div className="flex justify-between text-sm">
+              </TableCell>
-                <span className="text-muted-foreground">디스크 사용량</span>
+            </TableRow>
-                <div>{formatDiskUsage(company)}</div>
+          </TableBody>
-              </div>
+        </Table>
            </div>
            {/* 액션 */}
            <div className="mt-4 flex gap-2 border-t pt-4">
              <Button
                variant="outline"
                size="sm"
                onClick={() => onEdit(company)}
                className="h-9 flex-1 gap-2 text-sm"
              >
                <Edit className="h-4 w-4" />
                수정
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => onDelete(company)}
                className="h-9 flex-1 gap-2 text-sm text-destructive hover:bg-destructive/10 hover:text-destructive"
              >
                <Trash2 className="h-4 w-4" />
                삭제
              </Button>
            </div>
          </div>
        ))}
      </div>
-    </>
+    );
  }
  // 실제 데이터 렌더링
  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader className="bg-muted">
          <TableRow>
            {COMPANY_TABLE_COLUMNS.map((column) => (
              <TableHead key={column.key} style={{ width: column.width }}>
                {column.label}
              </TableHead>
            ))}
            <TableHead className="w-[140px]">디스크 사용량</TableHead>
            <TableHead className="w-[120px]">작업</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {companies.map((company) => (
            <TableRow key={company.regdate + company.company_code} className="hover:bg-muted/50">
              <TableCell className="font-mono text-sm">{company.company_code}</TableCell>
              <TableCell className="font-medium">{company.company_name}</TableCell>
              <TableCell>{company.writer}</TableCell>
              <TableCell className="py-2">{formatDiskUsage(company)}</TableCell>
              <TableCell>
                <div className="flex gap-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onEdit(company)}
                    className="h-8 w-8 p-0"
                    title="수정"
                  >
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onDelete(company)}
                    className="text-destructive hover:text-destructive h-8 w-8 p-0 hover:font-bold"
                    title="삭제"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
 }
--- a/frontend/components/admin/CompanyToolbar.tsx
+++ b/frontend/components/admin/CompanyToolbar.tsx
@ -15,19 +15,22 @@ interface CompanyToolbarProps {
 * 회사 관리 툴바 컴포넌트
 * 검색, 필터링, 등록 기능 제공
 */
-export function CompanyToolbar({ totalCount, onCreateClick }: CompanyToolbarProps) {
+export function CompanyToolbar({ onCreateClick }: CompanyToolbarProps) {
-  return (
+  // 검색어 변경 처리
    <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      {/* 왼쪽: 카운트 정보 */}
      <div className="text-sm text-muted-foreground">
        총 <span className="font-semibold text-foreground">{totalCount.toLocaleString()}</span> 건
      </div>
-      {/* 오른쪽: 등록 버튼 */}
+  // 상태 필터 변경 처리
-      <Button onClick={onCreateClick} className="h-10 gap-2 text-sm font-medium">
+
-        <Plus className="h-4 w-4" />
+  // 검색 조건이 있는지 확인
-        회사 등록
+
-      </Button>
+  return (
    <div className="space-y-4">
      {/* 상단: 제목과 등록 버튼 */}
      <div className="flex items-center justify-end">
        <Button onClick={onCreateClick} className="gap-2">
          <Plus className="h-4 w-4" />
          회사 등록
        </Button>
      </div>
    </div>
  );
 }
--- a/frontend/components/admin/DiskUsageSummary.tsx
+++ b/frontend/components/admin/DiskUsageSummary.tsx
@ -1,6 +1,7 @@
 import { RefreshCw, HardDrive, FileText, Building2, Clock } from "lucide-react";
 import { AllDiskUsageInfo } from "@/types/company";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 interface DiskUsageSummaryProps {
@ -15,30 +16,25 @@ interface DiskUsageSummaryProps {
 export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUsageSummaryProps) {
  if (!diskUsageInfo) {
    return (
-      <div className="rounded-lg border bg-card p-6 shadow-sm">
+      <Card>
-        <div className="mb-4 flex items-center justify-between">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <div>
-            <h3 className="text-sm font-semibold">디스크 사용량</h3>
+            <CardTitle className="text-sm font-medium">디스크 사용량</CardTitle>
-            <p className="text-xs text-muted-foreground">전체 회사 파일 저장 현황</p>
+            <CardDescription>전체 회사 파일 저장 현황</CardDescription>
          </div>
-          <Button 
+          <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading} className="h-8 w-8 p-0">
            variant="outline" 
            size="icon" 
            onClick={onRefresh} 
            disabled={isLoading} 
            className="h-8 w-8"
            aria-label="새로고침"
          >
            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
          </Button>
-        </div>
+        </CardHeader>
-        <div className="flex items-center justify-center py-6 text-muted-foreground">
+        <CardContent>
-          <div className="text-center">
+          <div className="text-muted-foreground flex items-center justify-center py-6">
-            <HardDrive className="mx-auto mb-2 h-8 w-8" />
+            <div className="text-center">
-            <p className="text-sm">디스크 사용량 정보를 불러오는 중...</p>
+              <HardDrive className="mx-auto mb-2 h-8 w-8" />
              <p className="text-sm">디스크 사용량 정보를 불러오는 중...</p>
            </div>
          </div>
-        </div>
+        </CardContent>
-      </div>
+      </Card>
    );
  }
@ -46,96 +42,97 @@ export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUs
  const lastCheckedDate = new Date(lastChecked);
  return (
-    <div className="rounded-lg border bg-card p-6 shadow-sm">
+    <Card>
-      <div className="mb-4 flex items-center justify-between">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <div>
-          <h3 className="text-sm font-semibold">디스크 사용량 현황</h3>
+          <CardTitle className="text-sm font-medium">디스크 사용량 현황</CardTitle>
-          <p className="text-xs text-muted-foreground">전체 회사 파일 저장 통계</p>
+          <CardDescription>전체 회사 파일 저장 통계</CardDescription>
        </div>
        <Button
          variant="outline"
-          size="icon"
+          size="sm"
          onClick={onRefresh}
          disabled={isLoading}
-          className="h-8 w-8"
+          className="h-8 w-8 p-0"
-          aria-label="새로고침"
+          title="새로고침"
        >
          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
        </Button>
-      </div>
+      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
          {/* 총 회사 수 */}
          <div className="flex items-center space-x-2">
            <Building2 className="h-4 w-4 text-blue-500" />
            <div>
              <p className="text-muted-foreground text-xs">총 회사</p>
              <p className="text-lg font-semibold">{summary.totalCompanies}개</p>
            </div>
          </div>
-      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          {/* 총 파일 수 */}
-        {/* 총 회사 수 */}
+          <div className="flex items-center space-x-2">
-        <div className="flex items-center space-x-2">
+            <FileText className="h-4 w-4 text-green-500" />
-          <Building2 className="h-4 w-4 text-primary" />
+            <div>
-          <div>
+              <p className="text-muted-foreground text-xs">총 파일</p>
-            <p className="text-xs text-muted-foreground">총 회사</p>
+              <p className="text-lg font-semibold">{summary.totalFiles.toLocaleString()}개</p>
-            <p className="text-lg font-semibold">{summary.totalCompanies}개</p>
+            </div>
          </div>
          {/* 총 용량 */}
          <div className="flex items-center space-x-2">
            <HardDrive className="h-4 w-4 text-orange-500" />
            <div>
              <p className="text-muted-foreground text-xs">총 용량</p>
              <p className="text-lg font-semibold">{summary.totalSizeMB.toFixed(1)} MB</p>
            </div>
          </div>
          {/* 마지막 업데이트 */}
          <div className="flex items-center space-x-2">
            <Clock className="h-4 w-4 text-gray-500" />
            <div>
              <p className="text-muted-foreground text-xs">마지막 확인</p>
              <p className="text-xs font-medium">
                {lastCheckedDate.toLocaleString("ko-KR", {
                  month: "short",
                  day: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </p>
            </div>
          </div>
        </div>
-        {/* 총 파일 수 */}
+        {/* 용량 기준 상태 표시 */}
-        <div className="flex items-center space-x-2">
+        <div className="mt-4 border-t pt-4">
-          <FileText className="h-4 w-4 text-primary" />
+          <div className="flex items-center justify-between">
-          <div>
+            <span className="text-muted-foreground text-xs">저장소 상태</span>
-            <p className="text-xs text-muted-foreground">총 파일</p>
+            <Badge
-            <p className="text-lg font-semibold">{summary.totalFiles.toLocaleString()}개</p>
+              variant={summary.totalSizeMB > 1000 ? "destructive" : summary.totalSizeMB > 500 ? "secondary" : "default"}
            >
              {summary.totalSizeMB > 1000 ? "용량 주의" : summary.totalSizeMB > 500 ? "보통" : "여유"}
            </Badge>
          </div>
          {/* 간단한 진행 바 */}
          <div className="mt-2 h-2 w-full rounded-full bg-gray-200">
            <div
              className={`h-2 rounded-full transition-all duration-300 ${
                summary.totalSizeMB > 1000 ? "bg-destructive/100" : summary.totalSizeMB > 500 ? "bg-yellow-500" : "bg-green-500"
              }`}
              style={{
                width: `${Math.min((summary.totalSizeMB / 2000) * 100, 100)}%`,
              }}
            />
          </div>
          <div className="text-muted-foreground mt-1 flex justify-between text-xs">
            <span>0 MB</span>
            <span>2,000 MB (권장 최대)</span>
          </div>
        </div>
-
+      </CardContent>
-        {/* 총 용량 */}
+    </Card>
        <div className="flex items-center space-x-2">
          <HardDrive className="h-4 w-4 text-primary" />
          <div>
            <p className="text-xs text-muted-foreground">총 용량</p>
            <p className="text-lg font-semibold">{summary.totalSizeMB.toFixed(1)} MB</p>
          </div>
        </div>
        {/* 마지막 업데이트 */}
        <div className="flex items-center space-x-2">
          <Clock className="h-4 w-4 text-muted-foreground" />
          <div>
            <p className="text-xs text-muted-foreground">마지막 확인</p>
            <p className="text-xs font-medium">
              {lastCheckedDate.toLocaleString("ko-KR", {
                month: "short",
                day: "numeric",
                hour: "2-digit",
                minute: "2-digit",
              })}
            </p>
          </div>
        </div>
      </div>
      {/* 용량 기준 상태 표시 */}
      <div className="mt-4 border-t pt-4">
        <div className="flex items-center justify-between">
          <span className="text-xs text-muted-foreground">저장소 상태</span>
          <Badge
            variant={summary.totalSizeMB > 1000 ? "destructive" : summary.totalSizeMB > 500 ? "secondary" : "default"}
          >
            {summary.totalSizeMB > 1000 ? "용량 주의" : summary.totalSizeMB > 500 ? "보통" : "여유"}
          </Badge>
        </div>
        {/* 간단한 진행 바 */}
        <div className="mt-2 h-2 w-full rounded-full bg-muted">
          <div
            className={`h-2 rounded-full transition-all duration-300 ${
              summary.totalSizeMB > 1000 ? "bg-destructive" : summary.totalSizeMB > 500 ? "bg-primary/60" : "bg-primary"
            }`}
            style={{
              width: `${Math.min((summary.totalSizeMB / 2000) * 100, 100)}%`,
            }}
          />
        </div>
        <div className="mt-1 flex justify-between text-xs text-muted-foreground">
          <span>0 MB</span>
          <span>2,000 MB (권장 최대)</span>
        </div>
      </div>
    </div>
  );
 }
--- a/frontend/components/admin/ExternalCallConfigModal.tsx
+++ b/frontend/components/admin/ExternalCallConfigModal.tsx
@ -260,55 +260,45 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[95vw] sm:max-w-2xl">
+      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
        <DialogHeader>
-          <DialogTitle className="text-base sm:text-lg">
+          <DialogTitle>{editingConfig ? "외부 호출 설정 편집" : "새 외부 호출 설정"}</DialogTitle>
            {editingConfig ? "외부 호출 설정 편집" : "새 외부 호출 설정"}
          </DialogTitle>
        </DialogHeader>
-        <div className="max-h-[60vh] space-y-4 overflow-y-auto sm:space-y-6">
+        <div className="space-y-6">
          {/* 기본 정보 */}
-          <div className="space-y-3 sm:space-y-4">
+          <div className="space-y-4">
            <div>
-              <Label htmlFor="config_name" className="text-xs sm:text-sm">
+              <Label htmlFor="config_name">설정 이름 *</Label>
                설정 이름 *
              </Label>
              <Input
                id="config_name"
                value={formData.config_name}
                onChange={(e) => setFormData((prev) => ({ ...prev, config_name: e.target.value }))}
                placeholder="예: 개발팀 Discord"
                className="h-8 text-xs sm:h-10 sm:text-sm"
              />
            </div>
            <div>
-              <Label htmlFor="description" className="text-xs sm:text-sm">
+              <Label htmlFor="description">설명</Label>
                설명
              </Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                placeholder="이 외부 호출 설정에 대한 설명을 입력하세요."
                rows={2}
                className="text-xs sm:text-sm"
              />
            </div>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
+            <div className="grid grid-cols-2 gap-4">
              <div>
-                <Label htmlFor="call_type" className="text-xs sm:text-sm">
+                <Label htmlFor="call_type">호출 타입 *</Label>
                  호출 타입 *
                </Label>
                <Select value={formData.call_type} onValueChange={handleCallTypeChange}>
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {CALL_TYPE_OPTIONS.map((option) => (
-                      <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
+                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
@ -317,19 +307,17 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
              </div>
              <div>
-                <Label htmlFor="is_active" className="text-xs sm:text-sm">
+                <Label htmlFor="is_active">상태</Label>
                  상태
                </Label>
                <Select
                  value={formData.is_active}
                  onValueChange={(value) => setFormData((prev) => ({ ...prev, is_active: value }))}
                >
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {ACTIVE_STATUS_OPTIONS.map((option) => (
-                      <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
+                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
@ -341,21 +329,19 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
          {/* REST API 설정 */}
          {formData.call_type === "rest-api" && (
-            <div className="space-y-3 sm:space-y-4">
+            <div className="space-y-4">
              <div>
-                <Label htmlFor="api_type" className="text-xs sm:text-sm">
+                <Label htmlFor="api_type">API 타입 *</Label>
                  API 타입 *
                </Label>
                <Select
                  value={formData.api_type}
                  onValueChange={(value) => setFormData((prev) => ({ ...prev, api_type: value }))}
                >
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {API_TYPE_OPTIONS.map((option) => (
-                      <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
+                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
@ -365,42 +351,33 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
              {/* Discord 설정 */}
              {formData.api_type === "discord" && (
-                <div className="space-y-3 rounded-lg border bg-muted/20 p-3 sm:p-4">
+                <div className="space-y-3 rounded-lg border p-4">
-                  <h4 className="text-xs font-semibold sm:text-sm">Discord 설정</h4>
+                  <h4 className="font-medium">Discord 설정</h4>
                  <div>
-                    <Label htmlFor="discord_webhook" className="text-xs sm:text-sm">
+                    <Label htmlFor="discord_webhook">웹훅 URL *</Label>
                      웹훅 URL *
                    </Label>
                    <Input
                      id="discord_webhook"
                      value={discordSettings.webhookUrl}
                      onChange={(e) => setDiscordSettings((prev) => ({ ...prev, webhookUrl: e.target.value }))}
                      placeholder="https://discord.com/api/webhooks/..."
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                    />
                  </div>
                  <div>
-                    <Label htmlFor="discord_username" className="text-xs sm:text-sm">
+                    <Label htmlFor="discord_username">사용자명</Label>
                      사용자명
                    </Label>
                    <Input
                      id="discord_username"
                      value={discordSettings.username}
                      onChange={(e) => setDiscordSettings((prev) => ({ ...prev, username: e.target.value }))}
                      placeholder="ERP 시스템"
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                    />
                  </div>
                  <div>
-                    <Label htmlFor="discord_avatar" className="text-xs sm:text-sm">
+                    <Label htmlFor="discord_avatar">아바타 URL</Label>
                      아바타 URL
                    </Label>
                    <Input
                      id="discord_avatar"
                      value={discordSettings.avatarUrl}
                      onChange={(e) => setDiscordSettings((prev) => ({ ...prev, avatarUrl: e.target.value }))}
                      placeholder="https://example.com/avatar.png"
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                    />
                  </div>
                </div>
@ -408,42 +385,33 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
              {/* Slack 설정 */}
              {formData.api_type === "slack" && (
-                <div className="space-y-3 rounded-lg border bg-muted/20 p-3 sm:p-4">
+                <div className="space-y-3 rounded-lg border p-4">
-                  <h4 className="text-xs font-semibold sm:text-sm">Slack 설정</h4>
+                  <h4 className="font-medium">Slack 설정</h4>
                  <div>
-                    <Label htmlFor="slack_webhook" className="text-xs sm:text-sm">
+                    <Label htmlFor="slack_webhook">웹훅 URL *</Label>
                      웹훅 URL *
                    </Label>
                    <Input
                      id="slack_webhook"
                      value={slackSettings.webhookUrl}
                      onChange={(e) => setSlackSettings((prev) => ({ ...prev, webhookUrl: e.target.value }))}
                      placeholder="https://hooks.slack.com/services/..."
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                    />
                  </div>
                  <div>
-                    <Label htmlFor="slack_channel" className="text-xs sm:text-sm">
+                    <Label htmlFor="slack_channel">채널</Label>
                      채널
                    </Label>
                    <Input
                      id="slack_channel"
                      value={slackSettings.channel}
                      onChange={(e) => setSlackSettings((prev) => ({ ...prev, channel: e.target.value }))}
                      placeholder="#general"
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                    />
                  </div>
                  <div>
-                    <Label htmlFor="slack_username" className="text-xs sm:text-sm">
+                    <Label htmlFor="slack_username">사용자명</Label>
                      사용자명
                    </Label>
                    <Input
                      id="slack_username"
                      value={slackSettings.username}
                      onChange={(e) => setSlackSettings((prev) => ({ ...prev, username: e.target.value }))}
                      placeholder="ERP Bot"
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                    />
                  </div>
                </div>
@ -451,31 +419,25 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
              {/* 카카오톡 설정 */}
              {formData.api_type === "kakao-talk" && (
-                <div className="space-y-3 rounded-lg border bg-muted/20 p-3 sm:p-4">
+                <div className="space-y-3 rounded-lg border p-4">
-                  <h4 className="text-xs font-semibold sm:text-sm">카카오톡 설정</h4>
+                  <h4 className="font-medium">카카오톡 설정</h4>
                  <div>
-                    <Label htmlFor="kakao_token" className="text-xs sm:text-sm">
+                    <Label htmlFor="kakao_token">액세스 토큰 *</Label>
                      액세스 토큰 *
                    </Label>
                    <Input
                      id="kakao_token"
                      type="password"
                      value={kakaoSettings.accessToken}
                      onChange={(e) => setKakaoSettings((prev) => ({ ...prev, accessToken: e.target.value }))}
                      placeholder="카카오 API 액세스 토큰"
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                    />
                  </div>
                  <div>
-                    <Label htmlFor="kakao_template" className="text-xs sm:text-sm">
+                    <Label htmlFor="kakao_template">템플릿 ID</Label>
                      템플릿 ID
                    </Label>
                    <Input
                      id="kakao_template"
                      value={kakaoSettings.templateId}
                      onChange={(e) => setKakaoSettings((prev) => ({ ...prev, templateId: e.target.value }))}
                      placeholder="template_001"
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                    />
                  </div>
                </div>
@ -483,65 +445,54 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
              {/* 일반 API 설정 */}
              {formData.api_type === "generic" && (
-                <div className="space-y-3 rounded-lg border bg-muted/20 p-3 sm:p-4">
+                <div className="space-y-3 rounded-lg border p-4">
-                  <h4 className="text-xs font-semibold sm:text-sm">일반 API 설정</h4>
+                  <h4 className="font-medium">일반 API 설정</h4>
                  <div>
-                    <Label htmlFor="generic_url" className="text-xs sm:text-sm">
+                    <Label htmlFor="generic_url">API URL *</Label>
                      API URL *
                    </Label>
                    <Input
                      id="generic_url"
                      value={genericSettings.url}
                      onChange={(e) => setGenericSettings((prev) => ({ ...prev, url: e.target.value }))}
                      placeholder="https://api.example.com/webhook"
                      className="h-8 text-xs sm:h-10 sm:text-sm"
                    />
                  </div>
-                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
+                  <div className="grid grid-cols-2 gap-4">
                    <div>
-                      <Label htmlFor="generic_method" className="text-xs sm:text-sm">
+                      <Label htmlFor="generic_method">HTTP 메서드</Label>
                        HTTP 메서드
                      </Label>
                      <Select
                        value={genericSettings.method}
                        onValueChange={(value) => setGenericSettings((prev) => ({ ...prev, method: value }))}
                      >
-                        <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
-                          <SelectItem value="GET" className="text-xs sm:text-sm">GET</SelectItem>
+                          <SelectItem value="GET">GET</SelectItem>
-                          <SelectItem value="POST" className="text-xs sm:text-sm">POST</SelectItem>
+                          <SelectItem value="POST">POST</SelectItem>
-                          <SelectItem value="PUT" className="text-xs sm:text-sm">PUT</SelectItem>
+                          <SelectItem value="PUT">PUT</SelectItem>
-                          <SelectItem value="DELETE" className="text-xs sm:text-sm">DELETE</SelectItem>
+                          <SelectItem value="DELETE">DELETE</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
-                      <Label htmlFor="generic_timeout" className="text-xs sm:text-sm">
+                      <Label htmlFor="generic_timeout">타임아웃 (ms)</Label>
                        타임아웃 (ms)
                      </Label>
                      <Input
                        id="generic_timeout"
                        type="number"
                        value={genericSettings.timeout}
                        onChange={(e) => setGenericSettings((prev) => ({ ...prev, timeout: e.target.value }))}
                        placeholder="30000"
                        className="h-8 text-xs sm:h-10 sm:text-sm"
                      />
                    </div>
                  </div>
                  <div>
-                    <Label htmlFor="generic_headers" className="text-xs sm:text-sm">
+                    <Label htmlFor="generic_headers">헤더 (JSON)</Label>
                      헤더 (JSON)
                    </Label>
                    <Textarea
                      id="generic_headers"
                      value={genericSettings.headers}
                      onChange={(e) => setGenericSettings((prev) => ({ ...prev, headers: e.target.value }))}
                      placeholder='{"Content-Type": "application/json"}'
                      rows={3}
                      className="text-xs sm:text-sm"
                    />
                  </div>
                </div>
@ -551,26 +502,17 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
          {/* 다른 호출 타입들 (이메일, FTP, 큐) */}
          {formData.call_type !== "rest-api" && (
-            <div className="rounded-lg border bg-muted/20 p-3 text-center text-xs text-muted-foreground sm:p-4 sm:text-sm">
+            <div className="text-muted-foreground rounded-lg border p-4 text-center">
              {formData.call_type} 타입의 설정은 아직 구현되지 않았습니다.
            </div>
          )}
        </div>
-        <DialogFooter className="gap-2 sm:gap-0">
+        <DialogFooter>
-          <Button 
+          <Button variant="outline" onClick={onClose} disabled={loading}>
            variant="outline" 
            onClick={onClose} 
            disabled={loading}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            취소
          </Button>
-          <Button 
+          <Button onClick={handleSave} disabled={loading}>
            onClick={handleSave} 
            disabled={loading}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            {loading ? "저장 중..." : editingConfig ? "수정" : "생성"}
          </Button>
        </DialogFooter>
--- a/frontend/components/admin/ExternalDbConnectionModal.tsx
+++ b/frontend/components/admin/ExternalDbConnectionModal.tsx
@ -302,36 +302,31 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-h-[90vh] max-w-[95vw] overflow-y-auto sm:max-w-2xl">
+      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
        <DialogHeader>
-          <DialogTitle className="text-base sm:text-lg">{isEditMode ? "연결 정보 수정" : "새 외부 DB 연결 추가"}</DialogTitle>
+          <DialogTitle>{isEditMode ? "연결 정보 수정" : "새 외부 DB 연결 추가"}</DialogTitle>
        </DialogHeader>
-        <div className="space-y-3 sm:space-y-4">
+        <div className="space-y-6">
          {/* 기본 정보 */}
-          <div className="space-y-3 sm:space-y-4">
+          <div className="space-y-4">
-            <h3 className="text-sm font-semibold sm:text-base">기본 정보</h3>
+            <h3 className="text-lg font-medium">기본 정보</h3>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
+            <div className="grid grid-cols-2 gap-4">
              <div>
-                <Label htmlFor="connection_name" className="text-xs sm:text-sm">
+                <Label htmlFor="connection_name">연결명 *</Label>
                  연결명 <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="connection_name"
                  value={formData.connection_name}
                  onChange={(e) => handleInputChange("connection_name", e.target.value)}
                  placeholder="예: 운영 DB"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
              </div>
              <div>
-                <Label htmlFor="db_type" className="text-xs sm:text-sm">
+                <Label htmlFor="db_type">DB 타입 *</Label>
                  DB 타입 <span className="text-destructive">*</span>
                </Label>
                <Select value={formData.db_type} onValueChange={handleDbTypeChange}>
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
@ -346,84 +341,67 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
            </div>
            <div>
-              <Label htmlFor="description" className="text-xs sm:text-sm">
+              <Label htmlFor="description">설명</Label>
                설명
              </Label>
              <Textarea
                id="description"
                value={formData.description || ""}
                onChange={(e) => handleInputChange("description", e.target.value)}
                placeholder="연결에 대한 설명을 입력하세요"
                rows={2}
                className="text-xs sm:text-sm"
              />
            </div>
          </div>
          {/* 연결 정보 */}
-          <div className="space-y-3 sm:space-y-4">
+          <div className="space-y-4">
-            <h3 className="text-sm font-semibold sm:text-base">연결 정보</h3>
+            <h3 className="text-lg font-medium">연결 정보</h3>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
+            <div className="grid grid-cols-2 gap-4">
              <div>
-                <Label htmlFor="host" className="text-xs sm:text-sm">
+                <Label htmlFor="host">호스트 *</Label>
                  호스트 <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="host"
                  value={formData.host}
                  onChange={(e) => handleInputChange("host", e.target.value)}
                  placeholder="localhost"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
              </div>
              <div>
-                <Label htmlFor="port" className="text-xs sm:text-sm">
+                <Label htmlFor="port">포트 *</Label>
                  포트 <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="port"
                  type="number"
                  value={formData.port}
                  onChange={(e) => handleInputChange("port", parseInt(e.target.value) || 0)}
                  placeholder="5432"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
              </div>
            </div>
            <div>
-              <Label htmlFor="database_name" className="text-xs sm:text-sm">
+              <Label htmlFor="database_name">데이터베이스명 *</Label>
                데이터베이스명 <span className="text-destructive">*</span>
              </Label>
              <Input
                id="database_name"
                value={formData.database_name}
                onChange={(e) => handleInputChange("database_name", e.target.value)}
                placeholder="database_name"
                className="h-8 text-xs sm:h-10 sm:text-sm"
              />
            </div>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
+            <div className="grid grid-cols-2 gap-4">
              <div>
-                <Label htmlFor="username" className="text-xs sm:text-sm">
+                <Label htmlFor="username">사용자명 *</Label>
                  사용자명 <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="username"
                  value={formData.username}
                  onChange={(e) => handleInputChange("username", e.target.value)}
                  placeholder="username"
                  className="h-8 text-xs sm:h-10 sm:text-sm"
                />
              </div>
              <div>
-                <Label htmlFor="password" className="text-xs sm:text-sm">
+                <Label htmlFor="password">비밀번호 {isEditMode ? "(변경 시에만 입력)" : "*"}</Label>
                  비밀번호 {isEditMode ? "(변경 시에만 입력)" : <span className="text-destructive">*</span>}
                </Label>
                <div className="relative">
                  <Input
                    id="password"
@ -431,13 +409,12 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
                    value={formData.password}
                    onChange={(e) => handleInputChange("password", e.target.value)}
                    placeholder={isEditMode ? "변경하지 않으려면 비워두세요" : "password"}
                    className="h-8 text-xs sm:h-10 sm:text-sm"
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
-                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                    className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@ -593,16 +570,11 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
          </div>
        </div>
-        <DialogFooter className="gap-2 sm:gap-0">
+        <DialogFooter>
-          <Button
+          <Button variant="outline" onClick={onClose} disabled={loading}>
            variant="outline"
            onClick={onClose}
            disabled={loading}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            취소
          </Button>
-          <Button onClick={handleSave} disabled={loading} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+          <Button onClick={handleSave} disabled={loading}>
            {loading ? "저장 중..." : isEditMode ? "수정" : "생성"}
          </Button>
        </DialogFooter>
--- a/frontend/components/admin/MenuManagement.tsx
+++ b/frontend/components/admin/MenuManagement.tsx
@ -8,9 +8,12 @@ import { MenuFormModal } from "./MenuFormModal";
 import { Button } from "@/components/ui/button";
 import { LoadingSpinner, LoadingOverlay } from "@/components/common/LoadingSpinner";
 import { toast } from "sonner";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
  AlertDialog,
  AlertDialogAction,
@ -25,6 +28,7 @@ import { useMenu } from "@/contexts/MenuContext";
 import { useMenuManagementText, setTranslationCache } from "@/lib/utils/multilang";
 import { useMultiLang } from "@/hooks/useMultiLang";
 import { apiClient } from "@/lib/api/client";
 import { ScreenAssignmentTab } from "./ScreenAssignmentTab";
 type MenuType = "admin" | "user";
@ -801,251 +805,297 @@ export const MenuManagement: React.FC = () => {
  return (
    <LoadingOverlay isLoading={deleting} text={getUITextSync("button.delete.processing")}>
-      <div className="flex h-full gap-6">
+      <div className="flex h-full flex-col">
-        {/* 좌측 사이드바 - 메뉴 타입 선택 (20%) */}
+        {/* 탭 컨테이너 */}
-        <div className="w-[20%] border-r pr-6">
+        <Tabs defaultValue="menus" className="flex flex-1 flex-col">
-          <div className="space-y-4">
+          <TabsList className="grid w-full grid-cols-2">
-            <h3 className="text-lg font-semibold">{getUITextSync("menu.type.title")}</h3>
+            <TabsTrigger value="menus">메뉴 관리</TabsTrigger>
            <TabsTrigger value="screen-assignment">화면 할당</TabsTrigger>
          </TabsList>
-            {/* 메뉴 타입 선택 카드들 */}
+          {/* 메뉴 관리 탭 */}
-            <div className="space-y-3">
+          <TabsContent value="menus" className="flex-1 overflow-hidden">
-              <div
+            <div className="flex h-full">
-                className={`cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md ${
+              {/* 메인 컨텐츠 - 2:8 비율 */}
-                  selectedMenuType === "admin" ? "border-primary bg-accent" : "hover:border-border"
+              <div className="flex flex-1 overflow-hidden">
-                }`}
+                {/* 좌측 사이드바 - 메뉴 타입 선택 (20%) */}
-                onClick={() => handleMenuTypeChange("admin")}
+                <div className="w-[20%] border-r bg-gray-50">
-              >
+                  <div className="p-6">
-                <div className="flex items-center justify-between">
+                    <Card className="shadow-sm">
-                  <div className="flex-1">
+                      <CardHeader className="bg-gray-50/50 pb-3">
-                    <h4 className="text-sm font-semibold">{getUITextSync("menu.management.admin")}</h4>
+                        <CardTitle className="text-lg">{getUITextSync("menu.type.title")}</CardTitle>
-                    <p className="mt-1 text-xs text-muted-foreground">
+                      </CardHeader>
-                      {getUITextSync("menu.management.admin.description")}
+                      <CardContent className="space-y-3 pt-4">
-                    </p>
+                      <Card
-                  </div>
+                        className={`cursor-pointer transition-all ${
-                  <Badge variant={selectedMenuType === "admin" ? "default" : "secondary"}>
+                          selectedMenuType === "admin" ? "border-primary bg-accent" : "hover:border-gray-300"
-                    {adminMenus.length}
+                        }`}
-                  </Badge>
+                        onClick={() => handleMenuTypeChange("admin")}
-                </div>
+                      >
-              </div>
+                        <CardContent className="p-4">
-
+                          <div className="flex items-center justify-between">
-              <div
+                            <div>
-                className={`cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md ${
+                              <h3 className="font-medium">{getUITextSync("menu.management.admin")}</h3>
-                  selectedMenuType === "user" ? "border-primary bg-accent" : "hover:border-border"
+                              <p className="mt-1 text-sm text-muted-foreground">
-                }`}
+                                {getUITextSync("menu.management.admin.description")}
-                onClick={() => handleMenuTypeChange("user")}
+                              </p>
              >
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    <h4 className="text-sm font-semibold">{getUITextSync("menu.management.user")}</h4>
                    <p className="mt-1 text-xs text-muted-foreground">
                      {getUITextSync("menu.management.user.description")}
                    </p>
                  </div>
                  <Badge variant={selectedMenuType === "user" ? "default" : "secondary"}>
                    {userMenus.length}
                  </Badge>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* 우측 메인 영역 - 메뉴 목록 (80%) */}
        <div className="w-[80%] pl-0">
          <div className="flex h-full flex-col space-y-4">
            {/* 상단 헤더: 제목 + 검색 + 버튼 */}
            <div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
              {/* 왼쪽: 제목 */}
              <h2 className="text-xl font-semibold">
                {getMenuTypeString()} {getUITextSync("menu.list.title")}
              </h2>
              {/* 오른쪽: 검색 + 버튼 */}
              <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
                {/* 회사 선택 */}
                <div className="w-full sm:w-[160px]">
                  <div className="company-dropdown relative">
                        <button
                          type="button"
                          onClick={() => setIsCompanyDropdownOpen(!isCompanyDropdownOpen)}
                          className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        >
                          <span className={selectedCompany === "all" ? "text-muted-foreground" : ""}>
                            {selectedCompany === "all"
                              ? getUITextSync("filter.company.all")
                              : selectedCompany === "*"
                                ? getUITextSync("filter.company.common")
                                : companies.find((c) => c.code === selectedCompany)?.name ||
                                  getUITextSync("filter.company.all")}
                          </span>
                          <svg
                            className={`h-4 w-4 transition-transform ${isCompanyDropdownOpen ? "rotate-180" : ""}`}
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                          </svg>
                        </button>
                        {isCompanyDropdownOpen && (
                          <div className="absolute top-full left-0 z-[100] mt-1 w-full min-w-[200px] rounded-md border bg-popover text-popover-foreground shadow-lg">
                            <div className="border-b p-2">
                              <Input
                                placeholder={getUITextSync("filter.company.search")}
                                value={companySearchText}
                                onChange={(e) => setCompanySearchText(e.target.value)}
                                className="h-8 text-sm"
                                onClick={(e) => e.stopPropagation()}
                              />
                            </div>
                            <Badge variant={selectedMenuType === "admin" ? "default" : "secondary"}>
                              {adminMenus.length}
                            </Badge>
                          </div>
                        </CardContent>
                      </Card>
-                            <div className="max-h-48 overflow-y-auto">
+                      <Card
-                              <div
+                        className={`cursor-pointer transition-all ${
-                                className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
+                          selectedMenuType === "user" ? "border-primary bg-accent" : "hover:border-gray-300"
-                                onClick={() => {
+                        }`}
-                                  setSelectedCompany("all");
+                        onClick={() => handleMenuTypeChange("user")}
-                                  setIsCompanyDropdownOpen(false);
+                      >
-                                  setCompanySearchText("");
+                        <CardContent className="p-4">
-                                }}
+                          <div className="flex items-center justify-between">
-                              >
+                            <div>
-                                {getUITextSync("filter.company.all")}
+                              <h3 className="font-medium">{getUITextSync("menu.management.user")}</h3>
-                              </div>
+                              <p className="mt-1 text-sm text-muted-foreground">
-                              <div
+                                {getUITextSync("menu.management.user.description")}
-                                className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
+                              </p>
-                                onClick={() => {
+                            </div>
-                                  setSelectedCompany("*");
+                            <Badge variant={selectedMenuType === "user" ? "default" : "secondary"}>
-                                  setIsCompanyDropdownOpen(false);
+                              {userMenus.length}
-                                  setCompanySearchText("");
+                            </Badge>
-                                }}
+                          </div>
-                              >
+                        </CardContent>
-                                {getUITextSync("filter.company.common")}
+                      </Card>
-                              </div>
+                      </CardContent>
                    </Card>
                  </div>
                </div>
-                              {companies
+                {/* 우측 메인 영역 - 메뉴 목록 (80%) */}
-                                .filter((company) => company.code && company.code.trim() !== "")
+                <div className="w-[80%] overflow-hidden">
-                                .filter(
+                  <div className="flex h-full flex-col p-6">
-                                  (company) =>
+                    <Card className="flex-1 shadow-sm">
-                                    company.name.toLowerCase().includes(companySearchText.toLowerCase()) ||
+                      <CardHeader className="bg-gray-50/50">
-                                    company.code.toLowerCase().includes(companySearchText.toLowerCase()),
+                        <CardTitle className="text-xl">
-                                )
+                          {getMenuTypeString()} {getUITextSync("menu.list.title")}
-                                .map((company, index) => (
+                        </CardTitle>
                      </CardHeader>
                      <CardContent className="flex-1 overflow-hidden">
                        {/* 검색 및 필터 영역 */}
                        <div className="mb-4 flex-shrink-0">
                      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
                        <div>
                          <Label htmlFor="company">{getUITextSync("filter.company")}</Label>
                          <div className="company-dropdown relative">
                            <button
                              type="button"
                              onClick={() => setIsCompanyDropdownOpen(!isCompanyDropdownOpen)}
                              className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                            >
                              <span className={selectedCompany === "all" ? "text-muted-foreground" : ""}>
                                {selectedCompany === "all"
                                  ? getUITextSync("filter.company.all")
                                  : selectedCompany === "*"
                                    ? getUITextSync("filter.company.common")
                                    : companies.find((c) => c.code === selectedCompany)?.name ||
                                      getUITextSync("filter.company.all")}
                              </span>
                              <svg
                                className={`h-4 w-4 transition-transform ${isCompanyDropdownOpen ? "rotate-180" : ""}`}
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                              >
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                              </svg>
                            </button>
                            {isCompanyDropdownOpen && (
                              <div className="bg-popover text-popover-foreground absolute top-full left-0 z-50 mt-1 w-full rounded-md border shadow-md">
                                {/* 검색 입력 */}
                                <div className="border-b p-2">
                                  <Input
                                    placeholder={getUITextSync("filter.company.search")}
                                    value={companySearchText}
                                    onChange={(e) => setCompanySearchText(e.target.value)}
                                    className="h-8 text-sm"
                                    onClick={(e) => e.stopPropagation()}
                                  />
                                </div>
                                {/* 회사 목록 */}
                                <div className="max-h-48 overflow-y-auto">
                                  <div
-                                    key={company.code || `company-${index}`}
+                                    className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center px-2 py-1.5 text-sm"
                                    className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
                                    onClick={() => {
-                                      setSelectedCompany(company.code);
+                                      setSelectedCompany("all");
                                      setIsCompanyDropdownOpen(false);
                                      setCompanySearchText("");
                                    }}
                                  >
-                                    {company.code === "*" ? getUITextSync("filter.company.common") : company.name}
+                                    {getUITextSync("filter.company.all")}
                                  </div>
-                                ))}
+                                  <div
                                    className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center px-2 py-1.5 text-sm"
                                    onClick={() => {
                                      setSelectedCompany("*");
                                      setIsCompanyDropdownOpen(false);
                                      setCompanySearchText("");
                                    }}
                                  >
                                    {getUITextSync("filter.company.common")}
                                  </div>
                                  {companies
                                    .filter((company) => company.code && company.code.trim() !== "")
                                    .filter(
                                      (company) =>
                                        company.name.toLowerCase().includes(companySearchText.toLowerCase()) ||
                                        company.code.toLowerCase().includes(companySearchText.toLowerCase()),
                                    )
                                    .map((company, index) => (
                                      <div
                                        key={company.code || `company-${index}`}
                                        className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center px-2 py-1.5 text-sm"
                                        onClick={() => {
                                          setSelectedCompany(company.code);
                                          setIsCompanyDropdownOpen(false);
                                          setCompanySearchText("");
                                        }}
                                      >
                                        {company.code === "*" ? getUITextSync("filter.company.common") : company.name}
                                      </div>
                                    ))}
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                        <div>
                          <Label htmlFor="search">{getUITextSync("filter.search")}</Label>
                          <Input
                            placeholder={getUITextSync("filter.search.placeholder")}
                            value={searchText}
                            onChange={(e) => setSearchText(e.target.value)}
                          />
                        </div>
                        <div className="flex items-end">
                          <Button
                            onClick={() => {
                              setSearchText("");
                              setSelectedCompany("all");
                              setCompanySearchText("");
                            }}
                            variant="outline"
                            className="w-full"
                          >
                            {getUITextSync("filter.reset")}
                          </Button>
                        </div>
                        <div className="flex items-end">
                          <div className="text-sm text-muted-foreground">
                            {getUITextSync("menu.list.search.result", { count: getCurrentMenus().length })}
                          </div>
                        </div>
                      </div>
                        </div>
                        <div className="flex-1 overflow-hidden">
                          <div className="mb-4 flex items-center justify-between">
                            <div className="text-sm text-muted-foreground">
                              {getUITextSync("menu.list.total", { count: getCurrentMenus().length })}
                            </div>
                            <div className="flex space-x-2">
                              <Button variant="outline" onClick={() => handleAddTopLevelMenu()} className="min-w-[100px]">
                                {getUITextSync("button.add.top.level")}
                              </Button>
                              {selectedMenus.size > 0 && (
                                <Button
                                  variant="destructive"
                                  onClick={handleDeleteSelectedMenus}
                                  disabled={deleting}
                                  className="min-w-[120px]"
                                >
                                  {deleting ? (
                                    <>
                                      <LoadingSpinner size="sm" className="mr-2" />
                                      {getUITextSync("button.delete.processing")}
                                    </>
                                  ) : (
                                    getUITextSync("button.delete.selected.count", {
                                      count: selectedMenus.size,
                                    })
                                  )}
                                </Button>
                              )}
                            </div>
                          </div>
-                        )}
+                          <MenuTable
-                      </div>
+                            menus={getCurrentMenus()}
-                    </div>
+                            title=""
-
+                            onAddMenu={handleAddMenu}
-                {/* 검색 입력 */}
+                            onEditMenu={handleEditMenu}
-                <div className="w-full sm:w-[240px]">
+                            onToggleStatus={handleToggleStatus}
-                  <Input
+                            selectedMenus={selectedMenus}
-                    id="search"
+                            onMenuSelectionChange={handleMenuSelectionChange}
-                    placeholder={getUITextSync("filter.search.placeholder")}
+                            onSelectAllMenus={handleSelectAllMenus}
-                    value={searchText}
+                            expandedMenus={expandedMenus}
-                    onChange={(e) => setSearchText(e.target.value)}
+                            onToggleExpand={handleToggleExpand}
-                    className="h-10 text-sm"
+                            uiTexts={uiTexts}
-                  />
+                          />
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </div>
                {/* 초기화 버튼 */}
                <Button
                  onClick={() => {
                    setSearchText("");
                    setSelectedCompany("all");
                    setCompanySearchText("");
                  }}
                  variant="outline"
                  className="h-10 text-sm font-medium"
                >
                  {getUITextSync("filter.reset")}
                </Button>
                {/* 최상위 메뉴 추가 */}
                <Button variant="outline" onClick={() => handleAddTopLevelMenu()} className="h-10 gap-2 text-sm font-medium">
                  {getUITextSync("button.add.top.level")}
                </Button>
                {/* 선택 삭제 */}
                {selectedMenus.size > 0 && (
                  <Button
                    variant="destructive"
                    onClick={handleDeleteSelectedMenus}
                    disabled={deleting}
                    className="h-10 gap-2 text-sm font-medium"
                  >
                    {deleting ? (
                      <>
                        <LoadingSpinner size="sm" className="mr-2" />
                        {getUITextSync("button.delete.processing")}
                      </>
                    ) : (
                      getUITextSync("button.delete.selected.count", {
                        count: selectedMenus.size,
                      })
                    )}
                  </Button>
                )}
              </div>
            </div>
          </TabsContent>
-            {/* 테이블 영역 */}
+          {/* 화면 할당 탭 */}
-            <div className="flex-1 overflow-hidden">
+          <TabsContent value="screen-assignment" className="flex-1 overflow-hidden p-6">
-              <MenuTable
+            <Card className="h-full shadow-sm">
-                menus={getCurrentMenus()}
+              <CardHeader className="bg-gray-50/50">
-                title=""
+                <CardTitle>화면 할당</CardTitle>
-                onAddMenu={handleAddMenu}
+              </CardHeader>
-                onEditMenu={handleEditMenu}
+              <CardContent className="h-full overflow-hidden">
-                onToggleStatus={handleToggleStatus}
+                <ScreenAssignmentTab menus={[...adminMenus, ...userMenus]} />
-                selectedMenus={selectedMenus}
+              </CardContent>
-                onMenuSelectionChange={handleMenuSelectionChange}
+            </Card>
-                onSelectAllMenus={handleSelectAllMenus}
+          </TabsContent>
-                expandedMenus={expandedMenus}
+        </Tabs>
-                onToggleExpand={handleToggleExpand}
+
-                uiTexts={uiTexts}
+        <MenuFormModal
-              />
+          isOpen={formModalOpen}
-            </div>
+          onClose={() => setFormModalOpen(false)}
-          </div>
+          onSuccess={handleFormSuccess}
-        </div>
+          menuId={formData.menuId}
          parentId={formData.parentId}
          menuType={formData.menuType}
          level={formData.level}
          parentCompanyCode={formData.parentCompanyCode}
          uiTexts={uiTexts}
        />
        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>메뉴 삭제</AlertDialogTitle>
              <AlertDialogDescription>
                해당 메뉴를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>취소</AlertDialogCancel>
              <AlertDialogAction onClick={confirmDelete}>삭제</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>
      <MenuFormModal
        isOpen={formModalOpen}
        onClose={() => setFormModalOpen(false)}
        onSuccess={handleFormSuccess}
        menuId={formData.menuId}
        parentId={formData.parentId}
        menuType={formData.menuType}
        level={formData.level}
        parentCompanyCode={formData.parentCompanyCode}
        uiTexts={uiTexts}
      />
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>메뉴 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              해당 메뉴를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDelete}>삭제</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </LoadingOverlay>
  );
 };
--- a/frontend/components/admin/RestApiConnectionList.tsx
+++ b/frontend/components/admin/RestApiConnectionList.tsx
@ -202,152 +202,166 @@ export function RestApiConnectionList() {
  return (
    <>
      {/* 검색 및 필터 */}
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <Card className="mb-6 shadow-sm">
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <CardContent className="pt-6">
-          {/* 검색 */}
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div className="relative w-full sm:w-[300px]">
+            <div className="flex flex-col gap-4 md:flex-row md:items-center">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              {/* 검색 */}
-            <Input
+              <div className="relative">
-              placeholder="연결명 또는 URL로 검색..."
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-              value={searchTerm}
+                <Input
-              onChange={(e) => setSearchTerm(e.target.value)}
+                  placeholder="연결명 또는 URL로 검색..."
-              className="h-10 pl-10 text-sm"
+                  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>
          <Select value={authTypeFilter} onValueChange={setAuthTypeFilter}>
            <SelectTrigger className="h-10 w-full sm:w-[160px]">
              <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="h-10 w-full sm:w-[120px]">
              <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="h-10 gap-2 text-sm font-medium">
          <Plus className="h-4 w-4" />
          새 연결 추가
        </Button>
      </div>
      {/* 연결 목록 */}
      {loading ? (
-        <div className="flex h-64 items-center justify-center rounded-lg border bg-card shadow-sm">
+        <div className="flex h-64 items-center justify-center">
-          <div className="text-sm text-muted-foreground">로딩 중...</div>
+          <div className="text-gray-500">로딩 중...</div>
        </div>
      ) : connections.length === 0 ? (
-        <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
+        <Card className="shadow-sm">
-          <div className="flex flex-col items-center gap-2 text-center">
+          <CardContent className="pt-6">
-            <p className="text-sm text-muted-foreground">등록된 REST API 연결이 없습니다</p>
+            <div className="py-8 text-center text-gray-500">
-          </div>
+              <TestTube className="mx-auto mb-4 h-12 w-12 text-gray-400" />
-        </div>
+              <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>
      ) : (
-        <div className="rounded-lg border bg-card shadow-sm">
+        <Card className="shadow-sm">
-          <Table>
+          <CardContent className="p-0">
            <Table>
              <TableHeader>
-                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                <TableRow>
-                  <TableHead className="h-12 text-sm font-semibold">연결명</TableHead>
+                  <TableHead className="w-[180px]">연결명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">기본 URL</TableHead>
+                  <TableHead className="w-[280px]">기본 URL</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">인증 타입</TableHead>
+                  <TableHead className="w-[100px]">인증 타입</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">헤더 수</TableHead>
+                  <TableHead className="w-[80px]">헤더 수</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">상태</TableHead>
+                  <TableHead className="w-[80px]">상태</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">마지막 테스트</TableHead>
+                  <TableHead className="w-[140px]">마지막 테스트</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">연결 테스트</TableHead>
+                  <TableHead className="w-[100px]">연결 테스트</TableHead>
-                  <TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
+                  <TableHead className="w-[120px] text-right">작업</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {connections.map((connection) => (
-                  <TableRow key={connection.id} className="border-b transition-colors hover:bg-muted/50">
+                  <TableRow key={connection.id} className="hover:bg-gray-50">
-                    <TableCell className="h-16 text-sm">
+                    <TableCell>
                      <div className="font-medium">{connection.connection_name}</div>
                      {connection.description && (
-                        <div className="mt-1 text-xs text-muted-foreground">{connection.description}</div>
+                        <div className="mt-1 text-xs text-gray-500">{connection.description}</div>
                      )}
                    </TableCell>
-                    <TableCell className="h-16 font-mono text-sm">{connection.base_url}</TableCell>
+                    <TableCell className="font-mono text-xs">{connection.base_url}</TableCell>
-                    <TableCell className="h-16 text-sm">
+                    <TableCell>
-                      <Badge variant="outline">
+                      <Badge variant="outline" className="text-xs">
                        {AUTH_TYPE_LABELS[connection.auth_type] || connection.auth_type}
                      </Badge>
                    </TableCell>
-                    <TableCell className="h-16 text-center text-sm">
+                    <TableCell className="text-center">
                      {Object.keys(connection.default_headers || {}).length}
                    </TableCell>
-                    <TableCell className="h-16 text-sm">
+                    <TableCell>
-                      <Badge variant={connection.is_active === "Y" ? "default" : "secondary"}>
+                      <Badge variant={connection.is_active === "Y" ? "default" : "secondary"} className="text-xs">
                        {connection.is_active === "Y" ? "활성" : "비활성"}
                      </Badge>
                    </TableCell>
-                    <TableCell className="h-16 text-sm">
+                    <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"
+                            className="mt-1 text-xs"
                          >
                            {connection.last_test_result === "Y" ? "성공" : "실패"}
                          </Badge>
                        </div>
                      ) : (
-                        <span className="text-muted-foreground">-</span>
+                        <span className="text-gray-400">-</span>
                      )}
                    </TableCell>
-                    <TableCell className="h-16 text-sm">
+                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleTestConnection(connection)}
                          disabled={testingConnections.has(connection.id!)}
-                          className="h-9 text-sm"
+                          className="h-7 px-2 text-xs"
                        >
                          {testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
                        </Button>
                        {testResults.has(connection.id!) && (
-                          <Badge variant={testResults.get(connection.id!) ? "default" : "destructive"}>
+                          <Badge
                            variant={testResults.get(connection.id!) ? "default" : "destructive"}
                            className="text-xs text-white"
                          >
                            {testResults.get(connection.id!) ? "성공" : "실패"}
                          </Badge>
                        )}
                      </div>
                    </TableCell>
-                    <TableCell className="h-16 text-right">
+                    <TableCell className="text-right">
-                      <div className="flex justify-end gap-2">
+                      <div className="flex justify-end gap-1">
                        <Button
                          variant="ghost"
-                          size="icon"
+                          size="sm"
                          onClick={() => handleEditConnection(connection)}
-                          className="h-8 w-8"
+                          className="h-8 w-8 p-0"
                        >
                          <Pencil className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
-                          size="icon"
+                          size="sm"
                          onClick={() => handleDeleteConnection(connection)}
-                          className="h-8 w-8 text-destructive hover:bg-destructive/10"
+                          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>
@ -357,7 +371,8 @@ export function RestApiConnectionList() {
                ))}
              </TableBody>
            </Table>
-          </div>
+          </CardContent>
        </Card>
      )}
      {/* 연결 설정 모달 */}
@ -372,25 +387,20 @@ export function RestApiConnectionList() {
      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">연결 삭제 확인</AlertDialogTitle>
+            <AlertDialogTitle>연결 삭제 확인</AlertDialogTitle>
-            <AlertDialogDescription className="text-xs sm:text-sm">
+            <AlertDialogDescription>
              "{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
              <br />
-              이 작업은 되돌릴 수 없습니다.
+              <span className="font-medium text-red-600">이 작업은 되돌릴 수 없습니다.</span>
            </AlertDialogDescription>
          </AlertDialogHeader>
-          <AlertDialogFooter className="gap-2 sm:gap-0">
+          <AlertDialogFooter>
-            <AlertDialogCancel
+            <AlertDialogCancel onClick={cancelDeleteConnection}>취소</AlertDialogCancel>
              onClick={cancelDeleteConnection}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmDeleteConnection}
-              className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
+              className="bg-red-600 text-white hover:bg-red-700 focus:ring-red-600"
            >
              삭제
            </AlertDialogAction>
--- a/frontend/components/admin/SortableCodeItem.tsx
+++ b/frontend/components/admin/SortableCodeItem.tsx
@ -68,18 +68,22 @@ export function SortableCodeItem({
      {...attributes}
      {...listeners}
      className={cn(
-        "group cursor-grab rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md",
+        "group cursor-grab rounded-lg border p-3 transition-all hover:shadow-sm",
        "border-gray-200 bg-white hover:bg-gray-50",
        isDragging && "cursor-grabbing opacity-50",
      )}
    >
-      <div className="flex items-start justify-between gap-2">
+      <div className="flex items-start justify-between">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
-            <h4 className="text-sm font-semibold">{code.codeName || code.code_name}</h4>
+            <h3 className="font-medium text-gray-900">{code.codeName || code.code_name}</h3>
            <Badge
              variant={code.isActive === "Y" || code.is_active === "Y" ? "default" : "secondary"}
              className={cn(
-                "cursor-pointer text-xs transition-colors",
+                "cursor-pointer transition-colors",
                code.isActive === "Y" || code.is_active === "Y"
                  ? "bg-green-100 text-green-800 hover:bg-green-200 hover:text-green-900"
                  : "bg-gray-100 text-muted-foreground hover:bg-gray-200 hover:text-gray-700",
                updateCodeMutation.isPending && "cursor-not-allowed opacity-50",
              )}
              onClick={(e) => {
@ -96,8 +100,8 @@ export function SortableCodeItem({
              {code.isActive === "Y" || code.is_active === "Y" ? "활성" : "비활성"}
            </Badge>
          </div>
-          <p className="mt-1 text-xs text-muted-foreground">{code.codeValue || code.code_value}</p>
+          <p className="mt-1 text-sm text-muted-foreground">{code.codeValue || code.code_value}</p>
-          {code.description && <p className="mt-1 text-xs text-muted-foreground">{code.description}</p>}
+          {code.description && <p className="mt-1 text-sm text-gray-500">{code.description}</p>}
        </div>
        {/* 액션 버튼 */}
@ -107,8 +111,8 @@ export function SortableCodeItem({
          onMouseDown={(e) => e.stopPropagation()}
        >
          <Button
            variant="ghost"
            size="sm"
            variant="ghost"
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
@ -118,8 +122,8 @@ export function SortableCodeItem({
            <Edit className="h-3 w-3" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            variant="ghost"
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
--- a/frontend/components/admin/SqlQueryModal.tsx
+++ b/frontend/components/admin/SqlQueryModal.tsx
@ -220,15 +220,15 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
              </div>
              {/* 테이블 정보 */}
-              <div className="rounded-md border bg-muted/50 p-4 space-y-4">
+              <div className="bg-muted/50 rounded-md border p-4 space-y-4">
                <div>
-                  <h3 className="mb-2 font-medium text-sm">사용 가능한 테이블</h3>
+                  <h3 className="mb-2 font-medium">사용 가능한 테이블</h3>
                  <div className="max-h-[200px] overflow-y-auto">
-                    <div className="space-y-2 pr-2">
+                    <div className="pr-2 space-y-2">
                      {tables.map((table) => (
-                        <div key={table.table_name} className="rounded-lg border bg-card p-3 shadow-sm">
+                        <div key={table.table_name} className="bg-white rounded-lg shadow-sm border p-3">
                          <div className="flex items-center justify-between">
-                            <h4 className="font-mono font-bold text-sm">{table.table_name}</h4>
+                            <h4 className="font-mono font-bold">{table.table_name}</h4>
                            <Button 
                              variant="ghost" 
                              size="sm" 
@ -237,13 +237,12 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
                                loadTableColumns(table.table_name);
                                setQuery(`SELECT * FROM ${table.table_name}`);
                              }}
                              className="h-8 text-xs"
                            >
                              선택
                            </Button>
                          </div>
                          {table.description && (
-                            <p className="mt-1 text-sm text-muted-foreground">{table.description}</p>
+                            <p className="text-muted-foreground mt-1 text-sm">{table.description}</p>
                          )}
                        </div>
                      ))}
@ -254,12 +253,12 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
                {/* 선택된 테이블의 컬럼 정보 */}
                {selectedTable && (
                  <div>
-                    <h3 className="mb-2 font-medium text-sm">테이블 컬럼 정보: {selectedTable}</h3>
+                    <h3 className="mb-2 font-medium">테이블 컬럼 정보: {selectedTable}</h3>
                    {loadingColumns ? (
                      <div className="text-sm text-muted-foreground">컬럼 정보 로딩 중...</div>
                    ) : selectedTableColumns.length > 0 ? (
                      <div className="max-h-[200px] overflow-y-auto">
-                        <div className="rounded-lg border bg-card shadow-sm">
+                        <div className="bg-white rounded-lg shadow-sm border">
                          <Table>
                            <TableHeader>
                              <TableRow>
@ -316,20 +315,20 @@ export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, c
        {/* 결과 섹션 */}
        <div className="space-y-4">
          <div className="flex items-center justify-between">
-            <div className="text-sm text-muted-foreground">
+            <div className="text-muted-foreground text-sm">
              {loading ? "쿼리 실행 중..." : results.length > 0 ? `${results.length}개의 결과가 있습니다.` : "실행된 쿼리가 없습니다."}
            </div>
          </div>
          {/* 결과 그리드 */}
-          <div className="rounded-md border bg-card">
+          <div className="rounded-md border">
            <div className="max-h-[300px] overflow-y-auto">
-              <div className="inline-block min-w-full align-middle">
+              <div className="min-w-full inline-block align-middle">
                <div className="overflow-x-auto">
                  <Table>
                    {results.length > 0 ? (
                      <>
-                        <TableHeader className="sticky top-0 z-10 bg-card">
+                        <TableHeader className="sticky top-0 bg-white z-10">
                          <TableRow>
                            {Object.keys(results[0]).map((key) => (
                              <TableHead key={key} className="font-mono font-bold">
--- a/frontend/components/admin/UserManagement.tsx
+++ b/frontend/components/admin/UserManagement.tsx
@ -101,18 +101,14 @@ export function UserManagement() {
      {/* 에러 메시지 */}
      {error && (
-        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
+        <div className="bg-destructive/10 border-destructive/20 rounded-lg border p-4">
          <div className="flex items-center justify-between">
-            <p className="text-sm font-semibold text-destructive">오류가 발생했습니다</p>
+            <p className="text-destructive font-medium">오류가 발생했습니다</p>
-            <button
+            <button onClick={clearError} className="text-destructive hover:text-destructive/80">
              onClick={clearError}
              className="text-destructive transition-colors hover:text-destructive/80"
              aria-label="에러 메시지 닫기"
            >
              ✕
            </button>
          </div>
-          <p className="mt-1.5 text-sm text-destructive/80">{error}</p>
+          <p className="text-destructive/80 mt-1">{error}</p>
        </div>
      )}
--- a/frontend/components/admin/UserTable.tsx
+++ b/frontend/components/admin/UserTable.tsx
@ -98,145 +98,31 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
  // 로딩 상태 렌더링
  if (isLoading) {
    return (
-      <>
+      <div className="rounded-md border">
        {/* 데스크톱 테이블 스켈레톤 */}
        <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
          <Table>
            <TableHeader>
              <TableRow className="border-b bg-muted/50">
                {USER_TABLE_COLUMNS.map((column) => (
                  <TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold">
                    {column.label}
                  </TableHead>
                ))}
                <TableHead className="h-12 w-[200px] text-sm font-semibold">작업</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {Array.from({ length: 10 }).map((_, index) => (
                <TableRow key={index} className="border-b">
                  {USER_TABLE_COLUMNS.map((column) => (
                    <TableCell key={column.key} className="h-16">
                      <div className="h-4 animate-pulse rounded bg-muted"></div>
                    </TableCell>
                  ))}
                  <TableCell className="h-16">
                    <div className="flex gap-2">
                      {Array.from({ length: 2 }).map((_, i) => (
                        <div key={i} className="h-8 w-8 animate-pulse rounded bg-muted"></div>
                      ))}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
        {/* 모바일/태블릿 카드 스켈레톤 */}
        <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
          {Array.from({ length: 6 }).map((_, index) => (
            <div key={index} className="rounded-lg border bg-card p-4 shadow-sm">
              <div className="mb-4 flex items-start justify-between">
                <div className="flex-1 space-y-2">
                  <div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
                  <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
                </div>
                <div className="h-6 w-11 animate-pulse rounded-full bg-muted"></div>
              </div>
              <div className="space-y-2 border-t pt-4">
                {Array.from({ length: 5 }).map((_, i) => (
                  <div key={i} className="flex justify-between">
                    <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
                    <div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
                  </div>
                ))}
              </div>
              <div className="mt-4 flex gap-2 border-t pt-4">
                <div className="h-9 flex-1 animate-pulse rounded bg-muted"></div>
                <div className="h-9 flex-1 animate-pulse rounded bg-muted"></div>
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }
  // 데이터가 없을 때
  if (users.length === 0) {
    return (
      <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
        <div className="flex flex-col items-center gap-2 text-center">
          <p className="text-sm text-muted-foreground">등록된 사용자가 없습니다.</p>
        </div>
      </div>
    );
  }
  // 실제 데이터 렌더링
  return (
    <>
      {/* 데스크톱 테이블 뷰 (lg 이상) */}
      <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
        <Table>
          <TableHeader>
-            <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+            <TableRow>
              {USER_TABLE_COLUMNS.map((column) => (
-                <TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold">
+                <TableHead key={column.key} style={{ width: column.width }}>
                  {column.label}
                </TableHead>
              ))}
-              <TableHead className="h-12 w-[200px] text-sm font-semibold">작업</TableHead>
+              <TableHead className="w-[200px]">작업</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
-            {users.map((user, index) => (
+            {Array.from({ length: 10 }).map((_, index) => (
-              <TableRow
+              <TableRow key={index}>
-                key={`${user.userId}-${index}`}
+                {USER_TABLE_COLUMNS.map((column) => (
-                className="border-b transition-colors hover:bg-muted/50"
+                  <TableCell key={column.key}>
-              >
+                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                <TableCell className="h-16 font-mono text-sm font-medium">{getRowNumber(index)}</TableCell>
+                  </TableCell>
-                <TableCell className="h-16 font-mono text-sm">{user.sabun || "-"}</TableCell>
+                ))}
-                <TableCell className="h-16 text-sm font-medium">{user.companyCode || "-"}</TableCell>
+                <TableCell>
-                <TableCell className="h-16 text-sm font-medium">{user.deptName || "-"}</TableCell>
+                  <div className="flex gap-1">
-                <TableCell className="h-16 text-sm font-medium">{user.positionName || "-"}</TableCell>
+                    {Array.from({ length: 4 }).map((_, i) => (
-                <TableCell className="h-16 font-mono text-sm">{user.userId}</TableCell>
+                      <div key={i} className="bg-muted h-8 w-8 animate-pulse rounded"></div>
-                <TableCell className="h-16 text-sm font-medium">{user.userName}</TableCell>
+                    ))}
                <TableCell className="h-16 text-sm">{user.tel || user.cellPhone || "-"}</TableCell>
                <TableCell className="h-16 max-w-[200px] truncate text-sm" title={user.email}>
                  {user.email || "-"}
                </TableCell>
                <TableCell className="h-16 text-sm">{formatDate(user.regDate || "")}</TableCell>
                <TableCell className="h-16">
                  <div className="flex items-center">
                    <Switch
                      checked={user.status === "active"}
                      onCheckedChange={(checked) => handleStatusToggle(user, checked)}
                      aria-label={`${user.userName} 상태 토글`}
                    />
                  </div>
                </TableCell>
                <TableCell className="h-16">
                  <div className="flex gap-2">
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
                      className="h-8 w-8"
                      title="비밀번호 초기화"
                    >
                      <Key className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => handleOpenHistoryModal(user)}
                      className="h-8 w-8"
                      title="변경이력 조회"
                    >
                      <History className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
@ -244,95 +130,102 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
          </TableBody>
        </Table>
      </div>
    );
  }
-      {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
+  // 데이터가 없을 때
-      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+  if (users.length === 0) {
-        {users.map((user, index) => (
+    return (
-          <div
+      <div className="rounded-md border">
-            key={`${user.userId}-${index}`}
+        <Table>
-            className="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
+          <TableHeader>
-          >
+            <TableRow>
-            {/* 헤더: 이름과 상태 */}
+              {USER_TABLE_COLUMNS.map((column) => (
-            <div className="mb-4 flex items-start justify-between">
+                <TableHead key={column.key} style={{ width: column.width }}>
-              <div className="flex-1">
+                  {column.label}
-                <h3 className="text-base font-semibold">{user.userName}</h3>
+                </TableHead>
-                <p className="mt-1 font-mono text-sm text-muted-foreground">{user.userId}</p>
+              ))}
-              </div>
+              <TableHead className="w-[200px]">작업</TableHead>
-              <Switch
+            </TableRow>
-                checked={user.status === "active"}
+          </TableHeader>
-                onCheckedChange={(checked) => handleStatusToggle(user, checked)}
+          <TableBody>
-                aria-label={`${user.userName} 상태 토글`}
+            <TableRow>
-              />
+              <TableCell colSpan={USER_TABLE_COLUMNS.length + 1} className="h-24 text-center">
-            </div>
+                <div className="text-muted-foreground flex flex-col items-center justify-center">
-
+                  <p>등록된 사용자가 없습니다.</p>
            {/* 정보 그리드 */}
            <div className="space-y-2 border-t pt-4">
              {user.sabun && (
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">사번</span>
                  <span className="font-mono font-medium">{user.sabun}</span>
                </div>
-              )}
+              </TableCell>
-              {user.companyCode && (
+            </TableRow>
-                <div className="flex justify-between text-sm">
+          </TableBody>
-                  <span className="text-muted-foreground">회사</span>
+        </Table>
                  <span className="font-medium">{user.companyCode}</span>
                </div>
              )}
              {user.deptName && (
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">부서</span>
                  <span className="font-medium">{user.deptName}</span>
                </div>
              )}
              {user.positionName && (
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">직책</span>
                  <span className="font-medium">{user.positionName}</span>
                </div>
              )}
              {(user.tel || user.cellPhone) && (
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">연락처</span>
                  <span>{user.tel || user.cellPhone}</span>
                </div>
              )}
              {user.email && (
                <div className="flex flex-col gap-1 text-sm">
                  <span className="text-muted-foreground">이메일</span>
                  <span className="break-all">{user.email}</span>
                </div>
              )}
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">등록일</span>
                <span>{formatDate(user.regDate || "")}</span>
              </div>
            </div>
            {/* 액션 버튼 */}
            <div className="mt-4 flex gap-2 border-t pt-4">
              <Button
                variant="outline"
                size="sm"
                onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
                className="h-9 flex-1 gap-2 text-sm"
              >
                <Key className="h-4 w-4" />
                비밀번호 초기화
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => handleOpenHistoryModal(user)}
                className="h-9 flex-1 gap-2 text-sm"
              >
                <History className="h-4 w-4" />
                변경이력
              </Button>
            </div>
          </div>
        ))}
      </div>
    );
  }
  // 실제 데이터 렌더링
  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader className="bg-muted">
          <TableRow>
            {USER_TABLE_COLUMNS.map((column) => (
              <TableHead key={column.key} style={{ width: column.width }}>
                {column.label}
              </TableHead>
            ))}
            <TableHead className="w-[200px]">작업</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {users.map((user, index) => (
            <TableRow key={`${user.userId}-${index}`} className="hover:bg-muted/50">
              <TableCell className="font-mono text-sm font-medium">{getRowNumber(index)}</TableCell>
              <TableCell className="font-mono text-sm">{user.sabun || "-"}</TableCell>
              <TableCell className="font-medium">{user.companyCode || "-"}</TableCell>
              <TableCell className="font-medium">{user.deptName || "-"}</TableCell>
              <TableCell className="font-medium">{user.positionName || "-"}</TableCell>
              <TableCell className="font-mono">{user.userId}</TableCell>
              <TableCell className="font-medium">{user.userName}</TableCell>
              <TableCell>{user.tel || user.cellPhone || "-"}</TableCell>
              <TableCell className="max-w-[200px] truncate" title={user.email}>
                {user.email || "-"}
              </TableCell>
              <TableCell>{formatDate(user.regDate || "")}</TableCell>
              <TableCell>
                <div className="flex items-center gap-2">
                  <Switch
                    checked={user.status === "active"}
                    onCheckedChange={(checked) => handleStatusToggle(user, checked)}
                    aria-label={`${user.userName} 상태 토글`}
                  />
                </div>
              </TableCell>
              <TableCell>
                <div className="flex gap-1">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
                    className="h-8 w-8 p-0"
                    title="비밀번호 초기화"
                  >
                    <Key className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => handleOpenHistoryModal(user)}
                    className="h-8 w-8 p-0"
                    title="변경이력 조회"
                  >
                    <History className="h-4 w-4" />
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      {/* 상태 변경 확인 모달 */}
      <UserStatusConfirmDialog
@ -350,6 +243,6 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
        userId={historyModal.userId}
        userName={historyModal.userName}
      />
-    </>
+    </div>
  );
 }
--- a/frontend/components/admin/UserToolbar.tsx
+++ b/frontend/components/admin/UserToolbar.tsx
@ -65,15 +65,15 @@ export function UserToolbar({
  return (
    <div className="space-y-4">
-      {/* 검색 및 액션 영역 */}
+      {/* 메인 검색 영역 */}
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <div className="bg-muted/30 rounded-lg p-4">
-        {/* 검색 영역 */}
+        {/* 통합 검색 */}
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <div className="mb-4 flex items-center gap-4">
-          <div className="w-full sm:w-[400px]">
+          <div className="flex-1">
            <div className="relative">
              <Search
-                className={`absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 ${
+                className={`absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform ${
-                  isSearching ? "animate-pulse text-primary" : "text-muted-foreground"
+                  isSearching ? "animate-pulse text-blue-500" : "text-muted-foreground"
                }`}
              />
              <Input
@ -81,14 +81,14 @@ export function UserToolbar({
                value={searchFilter.searchValue || ""}
                onChange={(e) => handleUnifiedSearchChange(e.target.value)}
                disabled={isAdvancedSearchMode}
-                className={`h-10 pl-10 text-sm ${
+                className={`pl-10 ${isSearching ? "border-blue-300 ring-1 ring-blue-200" : ""} ${
-                  isSearching ? "border-primary ring-2 ring-primary/20" : ""
+                  isAdvancedSearchMode ? "bg-muted text-muted-foreground cursor-not-allowed" : ""
-                } ${isAdvancedSearchMode ? "cursor-not-allowed bg-muted text-muted-foreground" : ""}`}
+                }`}
              />
            </div>
-            {isSearching && <p className="mt-1.5 text-xs text-primary">검색 중...</p>}
+            {isSearching && <p className="mt-1 text-xs text-blue-500">검색 중...</p>}
            {isAdvancedSearchMode && (
-              <p className="mt-1.5 text-xs text-warning">
+              <p className="mt-1 text-xs text-amber-600">
                고급 검색 모드가 활성화되어 있습니다. 통합 검색을 사용하려면 고급 검색 조건을 초기화하세요.
              </p>
            )}
@ -97,96 +97,95 @@ export function UserToolbar({
          {/* 고급 검색 토글 버튼 */}
          <Button
            variant="outline"
-            size="default"
+            size="sm"
            onClick={() => setShowAdvancedSearch(!showAdvancedSearch)}
-            className="h-10 gap-2 text-sm font-medium"
+            className="gap-2"
          >
-            고급 검색
+            🔍 고급 검색
            {showAdvancedSearch ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
          </Button>
        </div>
-        {/* 액션 버튼 영역 */}
+        {/* 고급 검색 옵션 */}
-        <div className="flex items-center gap-4">
+        {showAdvancedSearch && (
-          {/* 조회 결과 정보 */}
+          <div className="border-t pt-4">
-          <div className="text-sm text-muted-foreground">
+            <div className="mb-3">
-            총 <span className="font-semibold text-foreground">{totalCount.toLocaleString()}</span> 명
+              <h4 className="text-sm font-medium">고급 검색 옵션</h4>
-          </div>
+              <span className="text-muted-foreground text-xs">(각 필드별로 개별 검색 조건을 설정할 수 있습니다)</span>
-
+            </div>
          {/* 사용자 등록 버튼 */}
          <Button onClick={onCreateClick} size="default" className="h-10 gap-2 text-sm font-medium">
            <Plus className="h-4 w-4" />
            사용자 등록
          </Button>
        </div>
      </div>
      {/* 고급 검색 옵션 */}
      {showAdvancedSearch && (
        <div className="space-y-4">
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">고급 검색 옵션</h4>
            <p className="text-xs text-muted-foreground">각 필드별로 개별 검색 조건을 설정할 수 있습니다</p>
          </div>
            {/* 고급 검색 필드들 */}
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
              <Input
                placeholder="회사명 검색"
                value={searchFilter.search_companyName || ""}
                onChange={(e) => handleAdvancedSearchChange("search_companyName", e.target.value)}
                className="h-10 text-sm"
              />
-              <Input
+              <div>
-                placeholder="부서명 검색"
+                <label className="text-muted-foreground mb-1 block text-xs font-medium">회사명</label>
-                value={searchFilter.search_deptName || ""}
+                <Input
-                onChange={(e) => handleAdvancedSearchChange("search_deptName", e.target.value)}
+                  placeholder="회사명 검색"
-                className="h-10 text-sm"
+                  value={searchFilter.search_companyName || ""}
-              />
+                  onChange={(e) => handleAdvancedSearchChange("search_companyName", e.target.value)}
                />
              </div>
-              <Input
+              <div>
-                placeholder="직책 검색"
+                <label className="text-muted-foreground mb-1 block text-xs font-medium">부서명</label>
-                value={searchFilter.search_positionName || ""}
+                <Input
-                onChange={(e) => handleAdvancedSearchChange("search_positionName", e.target.value)}
+                  placeholder="부서명 검색"
-                className="h-10 text-sm"
+                  value={searchFilter.search_deptName || ""}
-              />
+                  onChange={(e) => handleAdvancedSearchChange("search_deptName", e.target.value)}
                />
              </div>
-              <Input
+              <div>
-                placeholder="사용자 ID 검색"
+                <label className="text-muted-foreground mb-1 block text-xs font-medium">직책</label>
-                value={searchFilter.search_userId || ""}
+                <Input
-                onChange={(e) => handleAdvancedSearchChange("search_userId", e.target.value)}
+                  placeholder="직책 검색"
-                className="h-10 text-sm"
+                  value={searchFilter.search_positionName || ""}
-              />
+                  onChange={(e) => handleAdvancedSearchChange("search_positionName", e.target.value)}
                />
              </div>
-              <Input
+              <div>
-                placeholder="사용자명 검색"
+                <label className="text-muted-foreground mb-1 block text-xs font-medium">사용자 ID</label>
-                value={searchFilter.search_userName || ""}
+                <Input
-                onChange={(e) => handleAdvancedSearchChange("search_userName", e.target.value)}
+                  placeholder="사용자 ID 검색"
-                className="h-10 text-sm"
+                  value={searchFilter.search_userId || ""}
-              />
+                  onChange={(e) => handleAdvancedSearchChange("search_userId", e.target.value)}
                />
              </div>
-              <Input
+              <div>
-                placeholder="전화번호/휴대폰 검색"
+                <label className="text-muted-foreground mb-1 block text-xs font-medium">사용자명</label>
-                value={searchFilter.search_tel || ""}
+                <Input
-                onChange={(e) => handleAdvancedSearchChange("search_tel", e.target.value)}
+                  placeholder="사용자명 검색"
-                className="h-10 text-sm"
+                  value={searchFilter.search_userName || ""}
-              />
+                  onChange={(e) => handleAdvancedSearchChange("search_userName", e.target.value)}
                />
              </div>
-              <Input
+              <div>
-                placeholder="이메일 검색"
+                <label className="text-muted-foreground mb-1 block text-xs font-medium">전화번호</label>
-                value={searchFilter.search_email || ""}
+                <Input
-                onChange={(e) => handleAdvancedSearchChange("search_email", e.target.value)}
+                  placeholder="전화번호/휴대폰 검색"
-                className="h-10 text-sm"
+                  value={searchFilter.search_tel || ""}
-              />
+                  onChange={(e) => handleAdvancedSearchChange("search_tel", e.target.value)}
                />
              </div>
              <div>
                <label className="text-muted-foreground mb-1 block text-xs font-medium">이메일</label>
                <Input
                  placeholder="이메일 검색"
                  value={searchFilter.search_email || ""}
                  onChange={(e) => handleAdvancedSearchChange("search_email", e.target.value)}
                />
              </div>
            </div>
            {/* 고급 검색 초기화 버튼 */}
            {isAdvancedSearchMode && (
-              <div>
+              <div className="mt-4 border-t pt-2">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() =>
                    onSearchChange({
                      search_sabun: undefined,
@ -199,7 +198,7 @@ export function UserToolbar({
                      search_email: undefined,
                    })
                  }
-                  className="h-9 text-sm text-muted-foreground hover:text-foreground"
+                  className="text-muted-foreground hover:text-foreground"
                >
                  고급 검색 조건 초기화
                </Button>
@ -207,6 +206,23 @@ export function UserToolbar({
            )}
          </div>
        )}
      </div>
      {/* 액션 버튼 영역 */}
      <div className="flex items-center justify-between">
        {/* 조회 결과 정보 */}
        <div className="text-muted-foreground text-sm">
          총 <span className="text-foreground font-medium">{totalCount}</span> 명
        </div>
        {/* 액션 버튼들 */}
        <div className="flex gap-2">
          <Button onClick={onCreateClick} className="gap-2">
            <Plus className="h-4 w-4" />
            사용자 등록
          </Button>
        </div>
      </div>
    </div>
  );
 }
--- a/frontend/components/common/ScrollToTop.tsx
+++ b/frontend/components/common/ScrollToTop.tsx
@ -1,60 +0,0 @@
 "use client";
 import { useState, useEffect } from "react";
 import { ArrowUp } from "lucide-react";
 import { Button } from "@/components/ui/button";
 /**
 * Scroll to Top 버튼 컴포넌트
 * - 모바일/태블릿에서만 표시 (lg 미만)
 * - 스크롤 시 페이드 인/아웃 애니메이션
 * - 부드러운 스크롤 효과
 */
 export function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    // 스크롤 이벤트 핸들러
    const toggleVisibility = () => {
      // 200px 이상 스크롤 시 버튼 표시
      if (window.scrollY > 200) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };
    // 스크롤 이벤트 리스너 등록
    window.addEventListener("scroll", toggleVisibility);
    // 초기 상태 설정
    toggleVisibility();
    // 클린업
    return () => {
      window.removeEventListener("scroll", toggleVisibility);
    };
  }, []);
  // 상단으로 스크롤
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth", // 부드러운 스크롤 애니메이션
    });
  };
  return (
    <Button
      onClick={scrollToTop}
      size="icon"
      className={`fixed bottom-6 right-6 z-50 h-12 w-12 rounded-full shadow-lg transition-all duration-300 lg:hidden ${
        isVisible ? "translate-y-0 opacity-100" : "translate-y-16 opacity-0"
      }`}
      aria-label="맨 위로 스크롤"
    >
      <ArrowUp className="h-5 w-5" />
    </Button>
  );
 }
--- a/frontend/components/dataflow/DataFlowList.tsx
+++ b/frontend/components/dataflow/DataFlowList.tsx
@ -146,280 +146,139 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
  return (
    <div className="space-y-4">
-      {/* 섹션 제목 */}
+      {/* 검색 및 필터 */}
-      <div className="space-y-1">
+      <div className="flex items-center justify-between">
-        <h2 className="text-xl font-semibold">플로우 목록</h2>
+        <div className="flex items-center space-x-2">
-        <p className="text-sm text-muted-foreground">저장된 노드 플로우를 불러오거나 새로운 플로우를 생성합니다</p>
+          <div className="relative">
            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
            <Input
              placeholder="플로우명, 설명으로 검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-80 pl-10"
            />
          </div>
        </div>
        <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => onLoadFlow(null)}>
          <Plus className="mr-2 h-4 w-4" />새 플로우 생성
        </Button>
      </div>
-      {/* 검색 및 액션 영역 */}
+      {/* 플로우 목록 테이블 */}
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <Card>
-        {/* 검색 영역 */}
+        <CardHeader>
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+          <CardTitle className="flex items-center justify-between">
-          <div className="w-full sm:w-[400px]">
+            <span className="flex items-center">
-            <div className="relative">
+              <Network className="mr-2 h-5 w-5" />
-              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              노드 플로우 목록 ({filteredFlows.length})
-              <Input
+            </span>
-                placeholder="플로우명, 설명으로 검색..."
+          </CardTitle>
-                value={searchTerm}
+        </CardHeader>
-                onChange={(e) => setSearchTerm(e.target.value)}
+        <CardContent>
-                className="h-10 pl-10 text-sm"
+          {loading ? (
-              />
+            <div className="flex items-center justify-center py-8">
              <div className="text-gray-500">로딩 중...</div>
            </div>
-          </div>
+          ) : (
-        </div>
+            <>
-
+              <Table>
-        {/* 액션 버튼 영역 */}
+                <TableHeader>
-        <div className="flex items-center gap-4">
+                  <TableRow>
-          <div className="text-sm text-muted-foreground">
+                    <TableHead>플로우명</TableHead>
-            총 <span className="font-semibold text-foreground">{filteredFlows.length}</span> 건
+                    <TableHead>설명</TableHead>
-          </div>
+                    <TableHead>생성일</TableHead>
-          <Button onClick={() => onLoadFlow(null)} className="h-10 gap-2 text-sm font-medium">
+                    <TableHead>최근 수정</TableHead>
-            <Plus className="h-4 w-4" />
+                    <TableHead className="text-right">작업</TableHead>
            새 플로우 생성
          </Button>
        </div>
      </div>
      {loading ? (
        <>
          {/* 데스크톱 테이블 스켈레톤 */}
          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
            <Table>
              <TableHeader>
                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
                  <TableHead className="h-12 text-sm font-semibold">플로우명</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">최근 수정</TableHead>
                  <TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {Array.from({ length: 5 }).map((_, index) => (
                  <TableRow key={index} className="border-b">
                    <TableCell className="h-16">
                      <div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
                    </TableCell>
                    <TableCell className="h-16">
                      <div className="h-4 w-48 animate-pulse rounded bg-muted"></div>
                    </TableCell>
                    <TableCell className="h-16">
                      <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
                    </TableCell>
                    <TableCell className="h-16">
                      <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
                    </TableCell>
                    <TableCell className="h-16">
                      <div className="flex justify-end">
                        <div className="h-8 w-8 animate-pulse rounded bg-muted"></div>
                      </div>
                    </TableCell>
                  </TableRow>
-                ))}
+                </TableHeader>
-              </TableBody>
+                <TableBody>
-            </Table>
+                  {filteredFlows.map((flow) => (
-          </div>
+                    <TableRow
                      key={flow.flowId}
                      className="cursor-pointer hover:bg-gray-50"
                      onClick={() => onLoadFlow(flow.flowId)}
                    >
                      <TableCell>
                        <div className="flex items-center font-medium text-gray-900">
                          <Network className="mr-2 h-4 w-4 text-blue-500" />
                          {flow.flowName}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="text-sm text-gray-500">{flow.flowDescription || "설명 없음"}</div>
                      </TableCell>
                      <TableCell>
                        <div className="text-muted-foreground flex items-center text-sm">
                          <Calendar className="mr-1 h-3 w-3 text-gray-400" />
                          {new Date(flow.createdAt).toLocaleDateString()}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="text-muted-foreground flex items-center text-sm">
                          <Calendar className="mr-1 h-3 w-3 text-gray-400" />
                          {new Date(flow.updatedAt).toLocaleDateString()}
                        </div>
                      </TableCell>
                      <TableCell onClick={(e) => e.stopPropagation()}>
                        <div className="flex justify-end">
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" className="h-8 w-8 p-0">
                                <MoreHorizontal className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
                                <Network className="mr-2 h-4 w-4" />
                                불러오기
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => handleCopy(flow)}>
                                <Copy className="mr-2 h-4 w-4" />
                                복사
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
                                <Trash2 className="mr-2 h-4 w-4" />
                                삭제
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
-          {/* 모바일/태블릿 카드 스켈레톤 */}
+              {filteredFlows.length === 0 && (
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+                <div className="py-8 text-center text-gray-500">
-            {Array.from({ length: 4 }).map((_, index) => (
+                  <Network className="mx-auto mb-4 h-12 w-12 text-gray-300" />
-              <div key={index} className="rounded-lg border bg-card p-4 shadow-sm">
+                  <div className="mb-2 text-lg font-medium">플로우가 없습니다</div>
-                <div className="mb-4 flex items-start justify-between">
+                  <div className="text-sm">새 플로우를 생성하여 노드 기반 데이터 제어를 설계해보세요.</div>
                  <div className="flex-1 space-y-2">
                    <div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
                  </div>
                </div>
-                <div className="space-y-2 border-t pt-4">
+              )}
-                  <div className="flex justify-between">
+            </>
-                    <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
+          )}
-                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
+        </CardContent>
-                  </div>
+      </Card>
                  <div className="flex justify-between">
                    <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </>
      ) : filteredFlows.length === 0 ? (
        <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
          <div className="flex flex-col items-center gap-2 text-center">
            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
              <Network className="h-8 w-8 text-muted-foreground" />
            </div>
            <h3 className="text-lg font-semibold">플로우가 없습니다</h3>
            <p className="max-w-sm text-sm text-muted-foreground">
              새 플로우를 생성하여 노드 기반 데이터 제어를 설계해보세요.
            </p>
            <Button onClick={() => onLoadFlow(null)} className="mt-4 h-10 gap-2 text-sm font-medium">
              <Plus className="h-4 w-4" />
              새 플로우 생성
            </Button>
          </div>
        </div>
      ) : (
        <>
          {/* 데스크톱 테이블 뷰 (lg 이상) */}
          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
            <Table>
              <TableHeader>
                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
                  <TableHead className="h-12 text-sm font-semibold">플로우명</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">최근 수정</TableHead>
                  <TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredFlows.map((flow) => (
                  <TableRow
                    key={flow.flowId}
                    className="cursor-pointer border-b transition-colors hover:bg-muted/50"
                    onClick={() => onLoadFlow(flow.flowId)}
                  >
                    <TableCell className="h-16 text-sm">
                      <div className="flex items-center font-medium">
                        <Network className="mr-2 h-4 w-4 text-primary" />
                        {flow.flowName}
                      </div>
                    </TableCell>
                    <TableCell className="h-16 text-sm">
                      <div className="text-muted-foreground">{flow.flowDescription || "설명 없음"}</div>
                    </TableCell>
                    <TableCell className="h-16 text-sm">
                      <div className="flex items-center text-muted-foreground">
                        <Calendar className="mr-1 h-3 w-3" />
                        {new Date(flow.createdAt).toLocaleDateString()}
                      </div>
                    </TableCell>
                    <TableCell className="h-16 text-sm">
                      <div className="flex items-center text-muted-foreground">
                        <Calendar className="mr-1 h-3 w-3" />
                        {new Date(flow.updatedAt).toLocaleDateString()}
                      </div>
                    </TableCell>
                    <TableCell className="h-16" onClick={(e) => e.stopPropagation()}>
                      <div className="flex justify-end">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
                              <Network className="mr-2 h-4 w-4" />
                              불러오기
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleCopy(flow)}>
                              <Copy className="mr-2 h-4 w-4" />
                              복사
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
                              <Trash2 className="mr-2 h-4 w-4" />
                              삭제
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
          {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
            {filteredFlows.map((flow) => (
              <div
                key={flow.flowId}
                className="cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
                onClick={() => onLoadFlow(flow.flowId)}
              >
                {/* 헤더 */}
                <div className="mb-4 flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center">
                      <Network className="mr-2 h-4 w-4 text-primary" />
                      <h3 className="text-base font-semibold">{flow.flowName}</h3>
                    </div>
                    <p className="mt-1 text-sm text-muted-foreground">{flow.flowDescription || "설명 없음"}</p>
                  </div>
                  <div onClick={(e) => e.stopPropagation()}>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
                          <Network className="mr-2 h-4 w-4" />
                          불러오기
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleCopy(flow)}>
                          <Copy className="mr-2 h-4 w-4" />
                          복사
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
                          <Trash2 className="mr-2 h-4 w-4" />
                          삭제
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </div>
                {/* 정보 */}
                <div className="space-y-2 border-t pt-4">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">생성일</span>
                    <span className="font-medium">{new Date(flow.createdAt).toLocaleDateString()}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">최근 수정</span>
                    <span className="font-medium">{new Date(flow.updatedAt).toLocaleDateString()}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}
      {/* 삭제 확인 모달 */}
      <Dialog open={showDeleteModal} onOpenChange={setShowDeleteModal}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent>
          <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">플로우 삭제</DialogTitle>
+            <DialogTitle className="text-red-600">플로우 삭제</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
+            <DialogDescription>
              &ldquo;{selectedFlow?.flowName}&rdquo; 플로우를 완전히 삭제하시겠습니까?
              <br />
-              <span className="font-medium text-destructive">
+              <span className="font-medium text-red-600">
                이 작업은 되돌릴 수 없으며, 모든 플로우 정보가 영구적으로 삭제됩니다.
              </span>
            </DialogDescription>
          </DialogHeader>
-          <DialogFooter className="gap-2 sm:gap-0">
+          <DialogFooter>
-            <Button
+            <Button variant="outline" onClick={() => setShowDeleteModal(false)}>
              variant="outline"
              onClick={() => setShowDeleteModal(false)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
-            <Button
+            <Button variant="destructive" onClick={handleConfirmDelete} disabled={loading}>
              variant="destructive"
              onClick={handleConfirmDelete}
              disabled={loading}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {loading ? "삭제 중..." : "삭제"}
            </Button>
          </DialogFooter>
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Checkbox } from "@/components/ui/checkbox";
@ -389,7 +390,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
  if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
-        <div className="text-muted-foreground text-sm">로딩 중...</div>
+        <div className="text-gray-500">로딩 중...</div>
      </div>
    );
  }
@ -397,25 +398,21 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
  return (
    <div className="space-y-4">
      {/* 검색 및 필터 */}
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <div className="flex items-center justify-between">
-        <div className="w-full sm:w-[400px]">
+        <div className="flex items-center space-x-2">
          <div className="relative">
-            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
            <Input
              placeholder="화면명, 코드, 테이블명으로 검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
-              className="h-10 pl-10 text-sm"
+              className="w-80 pl-10"
              disabled={activeTab === "trash"}
            />
          </div>
        </div>
-        <Button
+        <Button variant="default" onClick={() => setIsCreateOpen(true)} disabled={activeTab === "trash"}>
-          onClick={() => setIsCreateOpen(true)}
+          <Plus className="mr-2 h-4 w-4" />새 화면 생성
          disabled={activeTab === "trash"}
          className="h-10 gap-2 text-sm font-medium"
        >
          <Plus className="h-4 w-4" />새 화면 생성
        </Button>
      </div>
@ -428,457 +425,212 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
        {/* 활성 화면 탭 */}
        <TabsContent value="active">
-          {/* 데스크톱 테이블 뷰 (lg 이상) */}
+          <Card>
-          <div className="bg-card hidden rounded-lg border shadow-sm lg:block">
+            <CardHeader>
-            <div className="border-b p-6">
+              <CardTitle className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold">화면 목록 ({screens.length})</h3>
+                <span>화면 목록 ({screens.length})</span>
-            </div>
+              </CardTitle>
-            <Table>
+            </CardHeader>
-              <TableHeader>
+            <CardContent>
-                <TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
+              <Table>
-                  <TableHead className="h-12 text-sm font-semibold">화면명</TableHead>
+                <TableHeader>
-                  <TableHead className="h-12 text-sm font-semibold">화면 코드</TableHead>
+                  <TableRow>
-                  <TableHead className="h-12 text-sm font-semibold">테이블명</TableHead>
+                    <TableHead>화면명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">상태</TableHead>
+                    <TableHead>화면 코드</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
+                    <TableHead>테이블명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">작업</TableHead>
+                    <TableHead>상태</TableHead>
-                </TableRow>
+                    <TableHead>생성일</TableHead>
-              </TableHeader>
+                    <TableHead>작업</TableHead>
              <TableBody>
                {screens.map((screen) => (
                  <TableRow
                    key={screen.screenId}
                    className={`hover:bg-muted/50 border-b transition-colors ${
                      selectedScreen?.screenId === screen.screenId ? "border-primary/20 bg-accent" : ""
                    }`}
                    onClick={() => handleScreenSelect(screen)}
                  >
                    <TableCell className="h-16 cursor-pointer">
                      <div>
                        <div className="font-medium">{screen.screenName}</div>
                        {screen.description && (
                          <div className="text-muted-foreground mt-1 text-sm">{screen.description}</div>
                        )}
                      </div>
                    </TableCell>
                    <TableCell className="h-16">
                      <Badge variant="outline" className="font-mono">
                        {screen.screenCode}
                      </Badge>
                    </TableCell>
                    <TableCell className="h-16">
                      <span className="text-muted-foreground font-mono text-sm">
                        {screen.tableLabel || screen.tableName}
                      </span>
                    </TableCell>
                    <TableCell className="h-16">
                      <Badge variant={screen.isActive === "Y" ? "default" : "secondary"}>
                        {screen.isActive === "Y" ? "활성" : "비활성"}
                      </Badge>
                    </TableCell>
                    <TableCell className="h-16">
                      <div className="text-muted-foreground text-sm">{screen.createdDate.toLocaleDateString()}</div>
                      <div className="text-muted-foreground text-xs">{screen.createdBy}</div>
                    </TableCell>
                    <TableCell className="h-16">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem
                            onClick={(e) => {
                              e.stopPropagation();
                              onDesignScreen(screen);
                            }}
                          >
                            <Palette className="mr-2 h-4 w-4" />
                            화면 설계
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={(e) => {
                              e.stopPropagation();
                              handleView(screen);
                            }}
                          >
                            <Eye className="mr-2 h-4 w-4" />
                            미리보기
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={(e) => {
                              e.stopPropagation();
                              handleEdit(screen);
                            }}
                          >
                            <Edit className="mr-2 h-4 w-4" />
                            편집
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={(e) => {
                              e.stopPropagation();
                              handleCopy(screen);
                            }}
                          >
                            <Copy className="mr-2 h-4 w-4" />
                            복사
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={(e) => {
                              e.stopPropagation();
                              handleDelete(screen);
                            }}
                            className="text-destructive"
                            disabled={checkingDependencies && screenToDelete?.screenId === screen.screenId}
                          >
                            <Trash2 className="mr-2 h-4 w-4" />
                            {checkingDependencies && screenToDelete?.screenId === screen.screenId
                              ? "확인 중..."
                              : "삭제"}
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
-                ))}
+                </TableHeader>
-              </TableBody>
+                <TableBody>
-            </Table>
+                  {screens.map((screen) => (
                    <TableRow
                      key={screen.screenId}
                      className={`cursor-pointer hover:bg-gray-50 ${
                        selectedScreen?.screenId === screen.screenId ? "border-primary/20 bg-accent" : ""
                      }`}
                      onClick={() => handleScreenSelect(screen)}
                    >
                      <TableCell>
                        <div>
                          <div className="font-medium text-gray-900">{screen.screenName}</div>
                          {screen.description && <div className="mt-1 text-sm text-gray-500">{screen.description}</div>}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline" className="font-mono">
                          {screen.screenCode}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <span className="text-muted-foreground font-mono text-sm">
                          {screen.tableLabel || screen.tableName}
                        </span>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant={screen.isActive === "Y" ? "default" : "secondary"}
                          className={
                            screen.isActive === "Y" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                          }
                        >
                          {screen.isActive === "Y" ? "활성" : "비활성"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <div className="text-muted-foreground text-sm">{screen.createdDate.toLocaleDateString()}</div>
                        <div className="text-xs text-gray-400">{screen.createdBy}</div>
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => onDesignScreen(screen)}>
                              <Palette className="mr-2 h-4 w-4" />
                              화면 설계
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleView(screen)}>
                              <Eye className="mr-2 h-4 w-4" />
                              미리보기
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleEdit(screen)}>
                              <Edit className="mr-2 h-4 w-4" />
                              편집
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleCopy(screen)}>
                              <Copy className="mr-2 h-4 w-4" />
                              복사
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              onClick={() => handleDelete(screen)}
                              className="text-destructive"
                              disabled={checkingDependencies && screenToDelete?.screenId === screen.screenId}
                            >
                              <Trash2 className="mr-2 h-4 w-4" />
                              {checkingDependencies && screenToDelete?.screenId === screen.screenId
                                ? "확인 중..."
                                : "삭제"}
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
-            {filteredScreens.length === 0 && (
+              {filteredScreens.length === 0 && (
-              <div className="flex h-64 flex-col items-center justify-center">
+                <div className="py-8 text-center text-gray-500">검색 결과가 없습니다.</div>
-                <p className="text-muted-foreground text-sm">검색 결과가 없습니다.</p>
+              )}
-              </div>
+            </CardContent>
-            )}
+          </Card>
          </div>
          {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
            {screens.map((screen) => (
              <div
                key={screen.screenId}
                className={`bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 shadow-sm transition-colors ${
                  selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : ""
                }`}
                onClick={() => handleScreenSelect(screen)}
              >
                {/* 헤더 */}
                <div className="mb-4 flex items-start justify-between">
                  <div className="flex-1">
                    <h3 className="text-base font-semibold">{screen.screenName}</h3>
                    <p className="text-muted-foreground mt-1 font-mono text-sm">{screen.screenCode}</p>
                  </div>
                  <Badge variant={screen.isActive === "Y" ? "default" : "secondary"}>
                    {screen.isActive === "Y" ? "활성" : "비활성"}
                  </Badge>
                </div>
                {/* 설명 */}
                {screen.description && <p className="text-muted-foreground mb-4 text-sm">{screen.description}</p>}
                {/* 정보 */}
                <div className="space-y-2 border-t pt-4">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">테이블</span>
                    <span className="font-mono font-medium">{screen.tableLabel || screen.tableName}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">생성일</span>
                    <span className="font-medium">{screen.createdDate.toLocaleDateString()}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">작성자</span>
                    <span className="font-medium">{screen.createdBy}</span>
                  </div>
                </div>
                {/* 액션 */}
                <div className="mt-4 flex gap-2 border-t pt-4">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={(e) => {
                      e.stopPropagation();
                      onDesignScreen(screen);
                    }}
                    className="h-9 flex-1 gap-2 text-sm"
                  >
                    <Palette className="h-4 w-4" />
                    설계
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleView(screen);
                    }}
                    className="h-9 flex-1 gap-2 text-sm"
                  >
                    <Eye className="h-4 w-4" />
                    미리보기
                  </Button>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                      <Button variant="outline" size="sm" className="h-9 px-3">
                        <MoreHorizontal className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem
                        onClick={(e) => {
                          e.stopPropagation();
                          handleEdit(screen);
                        }}
                      >
                        <Edit className="mr-2 h-4 w-4" />
                        편집
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onClick={(e) => {
                          e.stopPropagation();
                          handleCopy(screen);
                        }}
                      >
                        <Copy className="mr-2 h-4 w-4" />
                        복사
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onClick={(e) => {
                          e.stopPropagation();
                          handleDelete(screen);
                        }}
                        className="text-destructive"
                        disabled={checkingDependencies && screenToDelete?.screenId === screen.screenId}
                      >
                        <Trash2 className="mr-2 h-4 w-4" />
                        {checkingDependencies && screenToDelete?.screenId === screen.screenId ? "확인 중..." : "삭제"}
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>
            ))}
            {filteredScreens.length === 0 && (
              <div className="bg-card col-span-2 flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
                <p className="text-muted-foreground text-sm">검색 결과가 없습니다.</p>
              </div>
            )}
          </div>
        </TabsContent>
        {/* 휴지통 탭 */}
        <TabsContent value="trash">
-          {/* 데스크톱 테이블 뷰 (lg 이상) */}
+          <Card>
-          <div className="bg-card hidden rounded-lg border shadow-sm lg:block">
+            <CardHeader>
-            <div className="flex items-center justify-between border-b p-6">
+              <CardTitle className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold">휴지통 ({deletedScreens.length})</h3>
+                <span>휴지통 ({deletedScreens.length})</span>
-              {selectedScreenIds.length > 0 && (
+                {selectedScreenIds.length > 0 && (
-                <Button
+                  <Button variant="destructive" size="sm" onClick={handleBulkDelete} disabled={bulkDeleting}>
-                  variant="destructive"
+                    {bulkDeleting ? "삭제 중..." : `선택된 ${selectedScreenIds.length}개 영구삭제`}
-                  size="sm"
+                  </Button>
-                  onClick={handleBulkDelete}
+                )}
-                  disabled={bulkDeleting}
+              </CardTitle>
-                  className="h-9 gap-2 text-sm font-medium"
+            </CardHeader>
-                >
+            <CardContent>
-                  <Trash className="h-4 w-4" />
+              <Table>
-                  {bulkDeleting ? "삭제 중..." : `선택된 ${selectedScreenIds.length}개 영구삭제`}
+                <TableHeader>
-                </Button>
+                  <TableRow>
-              )}
+                    <TableHead className="w-12">
            </div>
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
                  <TableHead className="h-12 w-12">
                    <Checkbox
                      checked={deletedScreens.length > 0 && selectedScreenIds.length === deletedScreens.length}
                      onCheckedChange={handleSelectAll}
                      aria-label="전체 선택"
                    />
                  </TableHead>
                  <TableHead className="h-12 text-sm font-semibold">화면명</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">화면 코드</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">테이블명</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">삭제일</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">삭제자</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">삭제 사유</TableHead>
                  <TableHead className="h-12 text-sm font-semibold">작업</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {deletedScreens.map((screen) => (
                  <TableRow key={screen.screenId} className="hover:bg-muted/50 border-b transition-colors">
                    <TableCell className="h-16">
                      <Checkbox
-                        checked={selectedScreenIds.includes(screen.screenId)}
+                        checked={deletedScreens.length > 0 && selectedScreenIds.length === deletedScreens.length}
-                        onCheckedChange={(checked) => handleScreenCheck(screen.screenId, checked as boolean)}
+                        onCheckedChange={handleSelectAll}
                        aria-label={`${screen.screenName} 선택`}
                      />
-                    </TableCell>
+                    </TableHead>
-                    <TableCell className="h-16">
+                    <TableHead>화면명</TableHead>
-                      <div>
+                    <TableHead>화면 코드</TableHead>
-                        <div className="font-medium">{screen.screenName}</div>
+                    <TableHead>테이블명</TableHead>
-                        {screen.description && (
+                    <TableHead>삭제일</TableHead>
-                          <div className="text-muted-foreground mt-1 text-sm">{screen.description}</div>
+                    <TableHead>삭제자</TableHead>
-                        )}
+                    <TableHead>삭제 사유</TableHead>
-                      </div>
+                    <TableHead>작업</TableHead>
                    </TableCell>
                    <TableCell className="h-16">
                      <Badge variant="outline" className="font-mono">
                        {screen.screenCode}
                      </Badge>
                    </TableCell>
                    <TableCell className="h-16">
                      <span className="text-muted-foreground font-mono text-sm">
                        {screen.tableLabel || screen.tableName}
                      </span>
                    </TableCell>
                    <TableCell className="h-16">
                      <div className="text-muted-foreground text-sm">{screen.deletedDate?.toLocaleDateString()}</div>
                    </TableCell>
                    <TableCell className="h-16">
                      <div className="text-muted-foreground text-sm">{screen.deletedBy}</div>
                    </TableCell>
                    <TableCell className="h-16">
                      <div className="text-muted-foreground max-w-32 truncate text-sm" title={screen.deleteReason}>
                        {screen.deleteReason || "-"}
                      </div>
                    </TableCell>
                    <TableCell className="h-16">
                      <div className="flex items-center gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleRestore(screen)}
                          className="text-primary hover:text-primary/80 h-9 gap-2 text-sm"
                        >
                          <RotateCcw className="h-4 w-4" />
                          복원
                        </Button>
                        <Button
                          variant="destructive"
                          size="sm"
                          onClick={() => handlePermanentDelete(screen)}
                          className="h-9 gap-2 text-sm"
                        >
                          <Trash className="h-4 w-4" />
                          영구삭제
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
-                ))}
+                </TableHeader>
-              </TableBody>
+                <TableBody>
-            </Table>
+                  {deletedScreens.map((screen) => (
                    <TableRow key={screen.screenId} className="hover:bg-gray-50">
                      <TableCell>
                        <Checkbox
                          checked={selectedScreenIds.includes(screen.screenId)}
                          onCheckedChange={(checked) => handleScreenCheck(screen.screenId, checked as boolean)}
                        />
                      </TableCell>
                      <TableCell>
                        <div>
                          <div className="font-medium text-gray-900">{screen.screenName}</div>
                          {screen.description && <div className="mt-1 text-sm text-gray-500">{screen.description}</div>}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline" className="font-mono">
                          {screen.screenCode}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <span className="text-muted-foreground font-mono text-sm">
                          {screen.tableLabel || screen.tableName}
                        </span>
                      </TableCell>
                      <TableCell>
                        <div className="text-muted-foreground text-sm">{screen.deletedDate?.toLocaleDateString()}</div>
                      </TableCell>
                      <TableCell>
                        <div className="text-muted-foreground text-sm">{screen.deletedBy}</div>
                      </TableCell>
                      <TableCell>
                        <div className="text-muted-foreground max-w-32 truncate text-sm" title={screen.deleteReason}>
                          {screen.deleteReason || "-"}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleRestore(screen)}
                            className="text-green-600 hover:text-green-700"
                          >
                            <RotateCcw className="mr-1 h-3 w-3" />
                            복원
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handlePermanentDelete(screen)}
                            className="text-destructive hover:text-red-700"
                          >
                            <Trash className="mr-1 h-3 w-3" />
                            영구삭제
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
-            {deletedScreens.length === 0 && (
+              {deletedScreens.length === 0 && (
-              <div className="flex h-64 flex-col items-center justify-center">
+                <div className="py-8 text-center text-gray-500">휴지통이 비어있습니다.</div>
                <p className="text-muted-foreground text-sm">휴지통이 비어있습니다.</p>
              </div>
            )}
          </div>
          {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
          <div className="space-y-4 lg:hidden">
            {/* 헤더 */}
            <div className="bg-card flex items-center justify-between rounded-lg border p-4 shadow-sm">
              <div className="flex items-center gap-3">
                <Checkbox
                  checked={deletedScreens.length > 0 && selectedScreenIds.length === deletedScreens.length}
                  onCheckedChange={handleSelectAll}
                  aria-label="전체 선택"
                />
                <h3 className="text-base font-semibold">휴지통 ({deletedScreens.length})</h3>
              </div>
              {selectedScreenIds.length > 0 && (
                <Button
                  variant="destructive"
                  size="sm"
                  onClick={handleBulkDelete}
                  disabled={bulkDeleting}
                  className="h-9 gap-2 text-sm"
                >
                  <Trash className="h-4 w-4" />
                  {bulkDeleting ? "삭제 중..." : `${selectedScreenIds.length}개`}
                </Button>
              )}
-            </div>
+            </CardContent>
-
+          </Card>
            {/* 카드 목록 */}
            <div className="grid gap-4 sm:grid-cols-2">
              {deletedScreens.map((screen) => (
                <div key={screen.screenId} className="bg-card rounded-lg border p-4 shadow-sm">
                  {/* 헤더 */}
                  <div className="mb-4 flex items-start gap-3">
                    <Checkbox
                      checked={selectedScreenIds.includes(screen.screenId)}
                      onCheckedChange={(checked) => handleScreenCheck(screen.screenId, checked as boolean)}
                      className="mt-1"
                      aria-label={`${screen.screenName} 선택`}
                    />
                    <div className="flex-1">
                      <h3 className="text-base font-semibold">{screen.screenName}</h3>
                      <p className="text-muted-foreground mt-1 font-mono text-sm">{screen.screenCode}</p>
                    </div>
                  </div>
                  {/* 설명 */}
                  {screen.description && <p className="text-muted-foreground mb-4 text-sm">{screen.description}</p>}
                  {/* 정보 */}
                  <div className="space-y-2 border-t pt-4">
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">테이블</span>
                      <span className="font-mono font-medium">{screen.tableLabel || screen.tableName}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">삭제일</span>
                      <span className="font-medium">{screen.deletedDate?.toLocaleDateString()}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">삭제자</span>
                      <span className="font-medium">{screen.deletedBy}</span>
                    </div>
                    {screen.deleteReason && (
                      <div className="flex flex-col gap-1 text-sm">
                        <span className="text-muted-foreground">삭제 사유</span>
                        <span className="font-medium">{screen.deleteReason}</span>
                      </div>
                    )}
                  </div>
                  {/* 액션 */}
                  <div className="mt-4 flex gap-2 border-t pt-4">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleRestore(screen)}
                      className="text-primary hover:text-primary/80 h-9 flex-1 gap-2 text-sm"
                    >
                      <RotateCcw className="h-4 w-4" />
                      복원
                    </Button>
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={() => handlePermanentDelete(screen)}
                      className="h-9 flex-1 gap-2 text-sm"
                    >
                      <Trash className="h-4 w-4" />
                      영구삭제
                    </Button>
                  </div>
                </div>
              ))}
            </div>
            {deletedScreens.length === 0 && (
              <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
                <p className="text-muted-foreground text-sm">휴지통이 비어있습니다.</p>
              </div>
            )}
          </div>
        </TabsContent>
      </Tabs>
@ -967,12 +719,12 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
          <div className="max-h-60 overflow-y-auto">
            <div className="space-y-3">
-              <h4 className="font-medium">사용 중인 화면 목록:</h4>
+              <h4 className="font-medium text-gray-900">사용 중인 화면 목록:</h4>
              {dependencies.map((dep, index) => (
                <div key={index} className="rounded-lg border border-orange-200 bg-orange-50 p-3">
                  <div className="flex items-center justify-between">
                    <div>
-                      <div className="font-medium">{dep.screenName}</div>
+                      <div className="font-medium text-gray-900">{dep.screenName}</div>
                      <div className="text-muted-foreground text-sm">화면 코드: {dep.screenCode}</div>
                    </div>
                    <div className="text-right">
@ -982,7 +734,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                        {dep.referenceType === "url" && "URL 링크"}
                        {dep.referenceType === "menu_assignment" && "메뉴 할당"}
                      </div>
-                      <div className="text-muted-foreground text-xs">
+                      <div className="text-xs text-gray-500">
                        {dep.referenceType === "menu_assignment" ? "메뉴" : "컴포넌트"}: {dep.componentId}
                      </div>
                    </div>
@ -1138,7 +890,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
              <div className="flex h-full items-center justify-center">
                <div className="text-center">
                  <div className="mb-2 text-lg font-medium">레이아웃 로딩 중...</div>
-                  <div className="text-muted-foreground text-sm">화면 정보를 불러오고 있습니다.</div>
+                  <div className="text-sm text-gray-500">화면 정보를 불러오고 있습니다.</div>
                </div>
              </div>
            ) : previewLayout && previewLayout.components ? (
@ -1154,7 +906,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                return (
                  <div
-                    className="bg-card relative mx-auto rounded-xl border shadow-lg"
+                    className="relative mx-auto rounded-xl border border-gray-200/60 bg-white shadow-lg shadow-gray-900/5"
                    style={{
                      width: `${screenWidth}px`,
                      height: `${screenHeight}px`,
@ -1345,8 +1097,8 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
            ) : (
              <div className="flex h-full items-center justify-center">
                <div className="text-center">
-                  <div className="text-muted-foreground mb-2 text-lg font-medium">레이아웃이 비어있습니다</div>
+                  <div className="mb-2 text-lg font-medium text-gray-600">레이아웃이 비어있습니다</div>
-                  <div className="text-muted-foreground text-sm">이 화면에는 아직 컴포넌트가 배치되지 않았습니다.</div>
+                  <div className="text-sm text-gray-500">이 화면에는 아직 컴포넌트가 배치되지 않았습니다.</div>
                </div>
              </div>
            )}