feat: 화면 디자이너 모달 및 제어 관리 탭 기능 추가

- 화면 설정 모달에 "제어 관리" 탭 추가하여 버튼 제어 설정을 간편하게 관리
- 버튼 액션 설정 기능 구현: 버튼 목록 표시 및 각 버튼의 액션 타입 수정 가능
- 화면 디자이너 모달 통합: 전체화면 Dialog 내부에 ScreenDesigner 임베드
- URL 쿼리 파라미터로 화면 디자이너 자동 열기 기능 추가
- 화면 캔버스 크기 자동 조절 기능 구현: 최소 크기 보장 및 여유 마진 추가
- 필드 추가/제거 기능 개선: 기존 그리드 컬럼 변경 로직과 통합하여 사용자 경험 향상

frontend/components/screen/OptimizedButtonComponent.tsx

@@ -637,24 +637,28 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
     }
   }
 
+  // 색상이 설정되어 있으면 variant 스타일을 무시하고 직접 스타일 적용
+  const hasCustomColors = config?.backgroundColor || config?.textColor;
+  
   return (
     <div className="relative">
       <Button
         onClick={handleClick}
         disabled={isExecuting || disabled}
-        variant={config?.variant || "default"}
+        // 색상이 설정되어 있으면 variant를 적용하지 않아서 Tailwind 색상 클래스가 덮어씌우지 않도록 함
+        variant={hasCustomColors ? undefined : (config?.variant || "default")}
         className={cn(
           "transition-all duration-200",
           isExecuting && "cursor-wait opacity-75",
           backgroundJobs.size > 0 && "border-primary/20 bg-accent",
-          config?.backgroundColor && { backgroundColor: config.backgroundColor },
-          config?.textColor && { color: config.textColor },
-          config?.borderColor && { borderColor: config.borderColor },
+          // 커스텀 색상이 없을 때만 기본 스타일 적용
+          !hasCustomColors && "bg-primary text-primary-foreground hover:bg-primary/90",
         )}
         style={{
-          backgroundColor: config?.backgroundColor,
-          color: config?.textColor,
-          borderColor: config?.borderColor,
+          // 커스텀 색상이 있을 때만 인라인 스타일 적용
+          ...(config?.backgroundColor && { backgroundColor: config.backgroundColor }),
+          ...(config?.textColor && { color: config.textColor }),
+          ...(config?.borderColor && { borderColor: config.borderColor }),
         }}
       >
         {/* 메인 버튼 내용 */}