화면관리 테이블 타입관리 연계

frontend/components/screen/ScreenList.tsx

@@ -12,15 +12,16 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { MoreHorizontal, Edit, Trash2, Copy, Eye, Plus, Search } from "lucide-react";
+import { MoreHorizontal, Edit, Trash2, Copy, Eye, Plus, Search, Palette } from "lucide-react";
 import { ScreenDefinition } from "@/types/screen";
 
 interface ScreenListProps {
   onScreenSelect: (screen: ScreenDefinition) => void;
   selectedScreen: ScreenDefinition | null;
+  onDesignScreen: (screen: ScreenDefinition) => void;
 }
 
-export default function ScreenList({ onScreenSelect, selectedScreen }: ScreenListProps) {
+export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScreen }: ScreenListProps) {
   const [screens, setScreens] = useState<ScreenDefinition[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState("");
@@ -198,6 +199,10 @@ export default function ScreenList({ onScreenSelect, selectedScreen }: ScreenLis
                         </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" />
                           미리보기

frontend/components/screen/TableTypeSelector.tsx

@@ -13,12 +13,18 @@ import { tableTypeApi } from "@/lib/api/screen";
 import { useAuth } from "@/hooks/useAuth";
 
 interface TableTypeSelectorProps {
-  onTableSelect?: (tableName: string) => void;
-  onColumnSelect?: (column: ColumnInfo) => void;
+  selectedTable?: string;
+  onTableChange?: (tableName: string) => void;
+  onColumnWebTypeChange?: (columnInfo: ColumnInfo) => void;
   className?: string;
 }
 
-export default function TableTypeSelector({ onTableSelect, onColumnSelect, className }: TableTypeSelectorProps) {
+export default function TableTypeSelector({
+  selectedTable: propSelectedTable,
+  onTableChange,
+  onColumnWebTypeChange,
+  className,
+}: TableTypeSelectorProps) {
   const { user } = useAuth();
   const [tables, setTables] = useState<
     Array<{ tableName: string; displayName: string; description: string; columnCount: string }>
@@ -140,12 +146,16 @@ export default function TableTypeSelector({ onTableSelect, onColumnSelect, class
   // 테이블 선택
   const handleTableSelect = (tableName: string) => {
     setSelectedTable(tableName);
-    onTableSelect?.(tableName);
+    if (onTableChange) {
+      onTableChange(tableName);
+    }
   };
 
   // 컬럼 선택
   const handleColumnSelect = (column: ColumnInfo) => {
-    onColumnSelect?.(column);
+    if (onColumnWebTypeChange) {
+      onColumnWebTypeChange(column);
+    }
   };
 
   // 웹 타입 변경

frontend/components/screen/TemplateManager.tsx

@@ -7,18 +7,26 @@ import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Separator } from "@/components/ui/separator";
-import { Search, Plus, Download, Upload, Trash2, Eye, Edit } from "lucide-react";
-import { ScreenTemplate, LayoutData } from "@/types/screen";
+import { Search, Plus, Download, Upload, Trash2, Eye, Edit, FileText } from "lucide-react";
+import { ScreenTemplate, LayoutData, ScreenDefinition } from "@/types/screen";
 import { templateApi } from "@/lib/api/screen";
 import { useAuth } from "@/hooks/useAuth";
 
 interface TemplateManagerProps {
+  selectedScreen: ScreenDefinition | null;
+  onBackToList: () => void;
   onTemplateSelect?: (template: ScreenTemplate) => void;
   onTemplateApply?: (template: ScreenTemplate) => void;
   className?: string;
 }
 
-export default function TemplateManager({ onTemplateSelect, onTemplateApply, className }: TemplateManagerProps) {
+export default function TemplateManager({
+  selectedScreen,
+  onBackToList,
+  onTemplateSelect,
+  onTemplateApply,
+  className,
+}: TemplateManagerProps) {
   const { user } = useAuth();
   const [templates, setTemplates] = useState<ScreenTemplate[]>([]);
   const [selectedTemplate, setSelectedTemplate] = useState<ScreenTemplate | null>(null);
@@ -211,6 +219,20 @@ export default function TemplateManager({ onTemplateSelect, onTemplateApply, cla
     URL.revokeObjectURL(url);
   };
 
+  // 화면이 선택되지 않았을 때 처리
+  if (!selectedScreen) {
+    return (
+      <div className="py-12 text-center text-gray-500">
+        <FileText className="mx-auto mb-4 h-16 w-16 text-gray-300" />
+        <p className="mb-4 text-lg">템플릿을 적용할 화면을 선택해주세요</p>
+        <p className="mb-6 text-sm">화면 목록에서 화면을 선택한 후 템플릿을 관리하세요</p>
+        <Button onClick={onBackToList} variant="outline">
+          화면 목록으로 돌아가기
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <div className={`space-y-4 ${className}`}>
       {/* 헤더 */}