feat: Implement button iconization feature for screen designer

- Added a comprehensive plan for expanding button display modes in the screen designer, allowing for text, icon, and icon+text modes.
- Introduced a new `ButtonIconRenderer` component to handle dynamic rendering of buttons based on selected display modes and actions.
- Enhanced the `ButtonConfigPanel` to include UI for selecting display modes and managing icon settings, including size, color, and position.
- Implemented functionality for custom icon addition via lucide search and SVG paste, ensuring flexibility for users.
- Updated relevant components to utilize the new button rendering logic, improving the overall user experience and visual consistency.

Made-with: Cursor

frontend/components/screen/OptimizedButtonComponent.tsx

@@ -15,6 +15,7 @@ import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { executeButtonWithFlow, handleFlowExecutionResult } from "@/lib/utils/nodeFlowButtonExecutor";
 import { useCurrentFlowStep } from "@/stores/flowStepStore";
+import { ButtonIconRenderer, getButtonDisplayContent } from "@/lib/button-icon-map";
 
 interface OptimizedButtonProps {
   component: ComponentData;
@@ -645,17 +646,14 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
       <Button
         onClick={handleClick}
         disabled={isExecuting || disabled}
-        // 색상이 설정되어 있으면 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",
-          // 커스텀 색상이 없을 때만 기본 스타일 적용
           !hasCustomColors && "bg-primary text-primary-foreground hover:bg-primary/90",
         )}
         style={{
-          // 커스텀 색상이 있을 때만 인라인 스타일 적용
           ...(config?.backgroundColor && { backgroundColor: config.backgroundColor }),
           ...(config?.textColor && { color: config.textColor }),
           ...(config?.borderColor && { borderColor: config.borderColor }),
@@ -664,7 +662,14 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
         {/* 메인 버튼 내용 */}
         <div className="flex items-center space-x-2">
           {getStatusIcon()}
-          <span>{isExecuting ? "처리 중..." : buttonLabel}</span>
+          <span>
+            {isExecuting ? "처리 중..." : (
+              <ButtonIconRenderer
+                componentConfig={component.componentConfig}
+                fallbackLabel={buttonLabel}
+              />
+            )}
+          </span>
         </div>
 
         {/* 개발 모드에서 성능 정보 표시 */}