feat: 리사이징, 이동 중 css 애니메이션 비활성화

lee-sihun · lee-sihun · commit 106237fab2c2 · 2026-01-04T21:05:15.000+09:00
diff --git a/src/renderer/components/Key.jsx b/src/renderer/components/Key.jsx
@@ -15,6 +15,7 @@ import { toCssRgba } from "@utils/colorUtils";
 import { useSmartGuidesElements } from "@hooks/Grid";
 import { useSmartGuidesStore } from "@stores/useSmartGuidesStore";
 import { useSettingsStore } from "@stores/useSettingsStore";
+import { useGridSelectionStore } from "@stores/useGridSelectionStore";
 import {
   calculateBounds,
   calculateSnapPoints,
@@ -57,6 +58,11 @@ export default function DraggableKey({
   // 스마트 가이드를 위한 다른 요소들의 bounds 가져오기
   const { getOtherElements } = useSmartGuidesElements();
 
+  // 드래그/리사이즈 중인 상태 (CSS 애니메이션 비활성화용)
+  const isDraggingOrResizing = useGridSelectionStore(
+    (state) => state.isDraggingOrResizing
+  );
+
   // 다중 선택 드래그 상태
   const multiDragRef = useRef({ isDragging: false, startX: 0, startY: 0 });
   const nodeRef = useRef(null);
@@ -97,6 +103,9 @@ export default function DraggableKey({
       // 드래그 시작 전 기존 스마트 가이드 클리어 (이전 드래그가 정상 종료되지 않은 경우 대비)
       useSmartGuidesStore.getState().clearGuides();
 
+      // 드래그 시작 시 애니메이션 비활성화
+      useGridSelectionStore.getState().setDraggingOrResizing(true);
+
       // 드래그 시작 시 히스토리 저장
       onMultiDragStart?.();
 
@@ -326,6 +335,8 @@ export default function DraggableKey({
         window.removeEventListener("blur", handleMouseUp);
         // 스마트 가이드 클리어
         useSmartGuidesStore.getState().clearGuides();
+        // 드래그 종료 시 애니메이션 복원
+        useGridSelectionStore.getState().setDraggingOrResizing(false);
         // 드래그 종료 시 오버레이 동기화
         onMultiDragEnd?.();
       };
@@ -449,6 +460,7 @@ export default function DraggableKey({
       } ${className || ""}`}
       style={keyStyle}
       data-state="inactive"
+      data-editing={isDraggingOrResizing ? "true" : undefined}
       onClick={handleClick}
       onMouseDown={isSelectionMode ? handleSelectionDragMouseDown : undefined}
       onContextMenu={handleContextMenu}
diff --git a/src/renderer/components/PluginElement.tsx b/src/renderer/components/PluginElement.tsx
@@ -427,6 +427,11 @@ export const PluginElement: React.FC<PluginElementProps> = ({
   // 선택된 상태면 선택 모드 활성화
   const isSelectionMode = isSelected;
 
+  // 드래그/리사이즈 중인 상태 (CSS 애니메이션 비활성화용, main 윈도우에서만)
+  const isDraggingOrResizing = useGridSelectionStore(
+    (state) => (windowType === "main" ? state.isDraggingOrResizing : false)
+  );
+
   // 드래그 지원 (main 윈도우에서만)
   const draggable = useDraggable({
     gridSize: GRID_SNAP,
@@ -476,6 +481,9 @@ export const PluginElement: React.FC<PluginElementProps> = ({
       // 드래그 시작 전 기존 스마트 가이드 클리어 (이전 드래그가 정상 종료되지 않은 경우 대비)
       useSmartGuidesStore.getState().clearGuides();
 
+      // 드래그 시작 시 애니메이션 비활성화
+      useGridSelectionStore.getState().setDraggingOrResizing(true);
+
       // 드래그 시작 시 히스토리 저장
       onMultiDragStart?.();
 
@@ -703,6 +711,8 @@ export const PluginElement: React.FC<PluginElementProps> = ({
         window.removeEventListener("blur", handleMouseUp);
         // 스마트 가이드 클리어
         useSmartGuidesStore.getState().clearGuides();
+        // 드래그 종료 시 애니메이션 복원
+        useGridSelectionStore.getState().setDraggingOrResizing(false);
         // 드래그 종료 시 오버레이 동기화
         onMultiDragEnd?.();
       };
@@ -1468,6 +1478,7 @@ export const PluginElement: React.FC<PluginElementProps> = ({
         data-plugin-element={element.fullId}
         data-plugin-id={element.pluginId}
         data-tauri-drag-region={windowType === "overlay" ? true : undefined}
+        data-editing={isDraggingOrResizing ? "true" : undefined}
         onClick={handleClick}
         onMouseDown={
           isSelectionMode
diff --git a/src/renderer/hooks/Grid/useDraggable.js b/src/renderer/hooks/Grid/useDraggable.js
@@ -160,6 +160,8 @@ export const useDraggable = ({
           // 실제 드래그가 시작될 때만 최적화 적용
           node.style.pointerEvents = "none";
           node.style.userSelect = "none";
+          // 드래그 시작 시 애니메이션 비활성화
+          useGridSelectionStore.getState().setDraggingOrResizing(true);
           // 드래그 시작 콜백 호출 (히스토리 저장용)
           onDragStart?.();
 
@@ -333,6 +335,8 @@ export const useDraggable = ({
           node.style.cursor = "grab";
           node.style.pointerEvents = "auto";
           node.style.userSelect = "auto";
+          // 드래그 종료 시 애니메이션 복원
+          useGridSelectionStore.getState().setDraggingOrResizing(false);
 
           // 최종 위치만 부모에 커밋
           const { dx: finalDx, dy: finalDy } = lastSnappedRef.current;
diff --git a/src/renderer/hooks/Grid/useGridResize.ts b/src/renderer/hooks/Grid/useGridResize.ts
@@ -10,6 +10,7 @@ import {
   calculateSizeSnap,
 } from "@utils/smartGuides";
 import type { SelectedElement } from "@stores/useGridSelectionStore";
+import { useGridSelectionStore } from "@stores/useGridSelectionStore";
 import type { KeyPositions } from "@src/types/keys";
 import type { ElementBounds } from "@utils/smartGuides";
 
@@ -82,6 +83,9 @@ export function useGridResize({
     // 기존 스마트 가이드 클리어
     useSmartGuidesStore.getState().clearGuides();
 
+    // 리사이즈 시작 시 애니메이션 비활성화
+    useGridSelectionStore.getState().setDraggingOrResizing(true);
+
     const currentPositions = useKeyStore.getState().positions;
     const currentPluginElements =
       usePluginDisplayElementStore.getState().elements;
@@ -525,6 +529,9 @@ export function useGridResize({
     // 스마트 가이드 클리어
     useSmartGuidesStore.getState().clearGuides();
 
+    // 리사이즈 종료 시 애니메이션 복원
+    useGridSelectionStore.getState().setDraggingOrResizing(false);
+
     // 최종 bounds를 실제 요소에 적용
     const finalBounds = finalBoundsRef.current;
     if (finalBounds && selectedElements.length === 1) {
@@ -592,6 +599,9 @@ export function useGridResize({
     // 스마트 가이드 클리어
     useSmartGuidesStore.getState().clearGuides();
 
+    // 리사이즈 종료 시 애니메이션 복원
+    useGridSelectionStore.getState().setDraggingOrResizing(false);
+
     const finalData = finalGroupBoundsRef.current;
     if (finalData && finalData.elementBounds.length > 0) {
       const positions = useKeyStore.getState().positions;
diff --git a/src/renderer/stores/useGridSelectionStore.ts b/src/renderer/stores/useGridSelectionStore.ts
@@ -40,6 +40,9 @@ interface GridSelectionState {
   // 미들 버튼 드래그 상태
   isMiddleButtonDragging: boolean;
 
+  // 드래그/리사이즈 중인 상태 (CSS 애니메이션 비활성화용)
+  isDraggingOrResizing: boolean;
+
   // Actions
   selectElement: (element: SelectedElement, addToSelection?: boolean) => void;
   toggleSelection: (element: SelectedElement) => void;
@@ -60,6 +63,9 @@ interface GridSelectionState {
   // 미들 버튼 드래그 Actions
   setMiddleButtonDragging: (isDragging: boolean) => void;
 
+  // 드래그/리사이즈 상태 설정
+  setDraggingOrResizing: (isDragging: boolean) => void;
+
   // 선택된 요소들 일괄 이동
   moveSelectedElements: (deltaX: number, deltaY: number) => void;
 }
@@ -71,6 +77,7 @@ export const useGridSelectionStore = create<GridSelectionState>((set, get) => ({
   marqueeStart: null,
   marqueeEnd: null,
   isMiddleButtonDragging: false,
+  isDraggingOrResizing: false,
 
   selectElement: (element, addToSelection = false) => {
     set((state) => {
@@ -168,6 +175,10 @@ export const useGridSelectionStore = create<GridSelectionState>((set, get) => ({
     set({ isMiddleButtonDragging: isDragging });
   },
 
+  setDraggingOrResizing: (isDragging) => {
+    set({ isDraggingOrResizing: isDragging });
+  },
+
   moveSelectedElements: (_deltaX, _deltaY) => {
     // 실제 이동 로직은 Grid 컴포넌트에서 처리
     // 이 함수는 외부에서 호출될 콜백을 위한 placeholder
diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css
@@ -281,3 +281,15 @@ body.dmn-custom-cursor,
 body.dmn-custom-cursor * {
   cursor: none !important;
 }
+
+/* 
+ * 드래그/리사이즈 중 애니메이션 비활성화
+ * 커스텀 CSS에서 transition이나 animation이 적용된 경우,
+ * 메인 창 그리드에서 키/플러그인 요소를 드래그하거나 크기 조절할 때
+ * 애니메이션이 적용되어 흐물흐물하게 움직이는 것을 방지
+ */
+[data-editing="true"],
+[data-editing="true"] * {
+  transition: none !important;
+  animation: none !important;
+}
