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/ScreenDesigner.tsx

@@ -5474,7 +5474,6 @@ export default function ScreenDesigner({
         { ctrl: true, key: "s" }, // 저장 (필요시 차단 해제)
         { ctrl: true, key: "p" }, // 인쇄
         { ctrl: true, key: "o" }, // 파일 열기
-        { ctrl: true, key: "v" }, // 붙여넣기 (브라우저 기본 동작 차단)
 
         // 개발자 도구
         { key: "F12" }, // 개발자 도구
@@ -5499,7 +5498,20 @@ export default function ScreenDesigner({
         return ctrlMatch && shiftMatch && keyMatch;
       });
 
+      // 입력 필드(input, textarea 등)에 포커스 시 편집 단축키는 기본 동작 허용
+      const _target = e.target as HTMLElement;
+      const _activeEl = document.activeElement as HTMLElement;
+      const _isEditable = (el: HTMLElement | null) =>
+        el instanceof HTMLInputElement ||
+        el instanceof HTMLTextAreaElement ||
+        el instanceof HTMLSelectElement ||
+        el?.isContentEditable;
+      const isEditableFieldFocused = _isEditable(_target) || _isEditable(_activeEl);
+
       if (isBrowserShortcut) {
+        if (isEditableFieldFocused) {
+          return;
+        }
         // console.log("🚫 브라우저 기본 단축키 차단:", e.key);
         e.preventDefault();
         e.stopPropagation();
@@ -5508,6 +5520,11 @@ export default function ScreenDesigner({
 
       // ✅ 애플리케이션 전용 단축키 처리
 
+      // 입력 필드 포커스 시 앱 단축키 무시 (텍스트 편집 우선)
+      if (isEditableFieldFocused && (e.ctrlKey || e.metaKey)) {
+        return;
+      }
+
       // 1. 그룹 관련 단축키
       if ((e.ctrlKey || e.metaKey) && e.key?.toLowerCase() === "g" && !e.shiftKey) {
         // console.log("🔄 그룹 생성 단축키");
@@ -5584,7 +5601,6 @@ export default function ScreenDesigner({
 
       // 5. 붙여넣기 (컴포넌트 붙여넣기)
       if ((e.ctrlKey || e.metaKey) && e.key?.toLowerCase() === "v") {
-        // console.log("🔄 컴포넌트 붙여넣기");
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();