redi 이슈 해결

2025-06-26 17:01:28 +09:00
parent 71036d3727
commit 2d8e4524b7
4 changed files with 421 additions and 37 deletions
--- a/.cursor/rules/cursor-step-by-step-rule.mdc
+++ b/.cursor/rules/cursor-step-by-step-rule.mdc
@@ -0,0 +1,103 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+---
+description: 
+globs: 
+alwaysApply: true
+---
+
+## Core Directive
+You are a senior software engineer AI assistant. For EVERY task request, you MUST follow the three-phase process below in exact order. Each phase must be completed with expert-level precision and detail.
+
+## Guiding Principles
+- **Minimalistic Approach**: Implement high-quality, clean solutions while avoiding unnecessary complexity
+- **Expert-Level Standards**: Every output must meet professional software engineering standards
+- **Concrete Results**: Provide specific, actionable details at each step
+
+---
+
+## Phase 1: Codebase Exploration & Analysis
+**REQUIRED ACTIONS:**
+1. **Systematic File Discovery**
+   - List ALL potentially relevant files, directories, and modules
+   - Search for related keywords, functions, classes, and patterns
+   - Examine each identified file thoroughly
+
+2. **Convention & Style Analysis**
+   - Document coding conventions (naming, formatting, architecture patterns)
+   - Identify existing code style guidelines
+   - Note framework/library usage patterns
+   - Catalog error handling approaches
+
+**OUTPUT FORMAT:**
+```
+### Codebase Analysis Results
+**Relevant Files Found:**
+- [file_path]: [brief description of relevance]
+
+**Code Conventions Identified:**
+- Naming: [convention details]
+- Architecture: [pattern details]
+- Styling: [format details]
+
+**Key Dependencies & Patterns:**
+- [library/framework]: [usage pattern]
+```
+
+---
+
+## Phase 2: Implementation Planning
+**REQUIRED ACTIONS:**
+Based on Phase 1 findings, create a detailed implementation roadmap.
+
+**OUTPUT FORMAT:**
+```markdown
+## Implementation Plan
+
+### Module: [Module Name]
+**Summary:** [1-2 sentence description of what needs to be implemented]
+
+**Tasks:**
+- [ ] [Specific implementation task]
+- [ ] [Specific implementation task]
+
+**Acceptance Criteria:**
+- [ ] [Measurable success criterion]
+- [ ] [Measurable success criterion]
+- [ ] [Performance/quality requirement]
+
+### Module: [Next Module Name]
+[Repeat structure above]
+```
+
+---
+
+## Phase 3: Implementation Execution
+**REQUIRED ACTIONS:**
+1. Implement each module following the plan from Phase 2
+2. Verify ALL acceptance criteria are met before proceeding
+3. Ensure code adheres to conventions identified in Phase 1
+
+**QUALITY GATES:**
+- [ ] All acceptance criteria validated
+- [ ] Code follows established conventions
+- [ ] Minimalistic approach maintained
+- [ ] Expert-level implementation standards met
+
+---
+
+## Success Validation
+Before completing any task, confirm:
+- ✅ All three phases completed sequentially
+- ✅ Each phase output meets specified format requirements
+- ✅ Implementation satisfies all acceptance criteria
+- ✅ Code quality meets professional standards
+
+## Response Structure
+Always structure your response as:
+1. **Phase 1 Results**: [Codebase analysis findings]
+2. **Phase 2 Plan**: [Implementation roadmap]  
+3. **Phase 3 Implementation**: [Actual code with validation]
--- a/.cursor/rules/univer-redi-management.mdc
+++ b/.cursor/rules/univer-redi-management.mdc
@@ -0,0 +1,154 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+## REDI Duplicate Identifier Prevention in Univer CE
+
+### **Problem Analysis**
+- **Root Cause**: REDI dependency injection system retains global service identifiers in memory even after Univer instance disposal
+- **Trigger**: Component remounting causes duplicate service registration attempts
+- **Symptoms**: "Identifier [service-name] already exists" console errors
+
+### **Core Prevention Patterns**
+
+#### **1. Global Instance Management**
+```typescript
+// ✅ DO: Use singleton pattern with proper state tracking
+const UniverseManager = {
+  async createInstance(container: HTMLElement): Promise<any> {
+    const state = getGlobalState();
+    
+    // Check existing instance with complete validation
+    if (state.instance && state.univerAPI && 
+        !state.isInitializing && !state.isDisposing) {
+      return { univer: state.instance, univerAPI: state.univerAPI };
+    }
+    
+    // Wait for ongoing operations
+    if (state.isInitializing && state.initializationPromise) {
+      return state.initializationPromise;
+    }
+  }
+};
+
+// ❌ DON'T: Create new instances without checking global state
+const univer = createUniver({ /* config */ }); // Direct creation
+```
+
+#### **2. Component Mount Lifecycle**
+```typescript
+// ✅ DO: Smart initialization with state checks
+useEffect(() => {
+  const existingUniver = UniverseManager.getInstance();
+  const state = getGlobalState();
+  
+  // Reuse existing instance if available and stable
+  if (existingUniver && state.univerAPI && 
+      !UniverseManager.isInitializing() && !UniverseManager.isDisposing()) {
+    setIsInitialized(true);
+    return;
+  }
+  
+  // Wait for ongoing operations
+  if (UniverseManager.isInitializing() || UniverseManager.isDisposing()) {
+    const waitTimer = setInterval(() => {
+      if (!UniverseManager.isInitializing() && !UniverseManager.isDisposing()) {
+        clearInterval(waitTimer);
+        // Check and initialize as needed
+      }
+    }, 100);
+    return () => clearInterval(waitTimer);
+  }
+}, []); // Empty dependency array to prevent re-execution
+
+// ❌ DON'T: Include dependencies that cause re-initialization
+useEffect(() => {
+  initializeUniver();
+}, [initializeUniver]); // This causes re-execution on every render
+```
+
+#### **3. Complete Cleanup Strategy**
+```typescript
+// ✅ DO: Implement thorough REDI state cleanup
+forceReset(): void {
+  // Standard disposal
+  if (state.instance) {
+    state.instance.dispose();
+  }
+  
+  // REDI global state cleanup attempt
+  if (typeof window !== "undefined") {
+    const globalKeys = Object.keys(window).filter(key => 
+      key.includes('redi') || key.includes('REDI') || 
+      key.includes('univerjs') || key.includes('univer')
+    );
+    
+    globalKeys.forEach(key => {
+      try {
+        delete (window as any)[key];
+      } catch (e) {
+        console.warn(`Global key ${key} cleanup failed:`, e);
+      }
+    });
+  }
+  
+  // Reset all state flags
+  Object.assign(state, {
+    instance: null,
+    univerAPI: null,
+    isInitializing: false,
+    isDisposing: false,
+    initializationPromise: null,
+    lastContainerId: null,
+  });
+}
+```
+
+### **4. State Validation Patterns**
+```typescript
+// ✅ DO: Multi-level state validation
+const isInstanceReady = (state: GlobalUniverState): boolean => {
+  return !!(
+    state.instance && 
+    state.univerAPI && 
+    !state.isInitializing && 
+    !state.isDisposing &&
+    state.lastContainerId
+  );
+};
+
+// ❌ DON'T: Simple existence check
+if (state.instance) { /* insufficient validation */ }
+```
+
+### **5. Debug Tools Integration**
+```typescript
+// ✅ DO: Provide comprehensive debugging tools
+window.__UNIVER_DEBUG__ = {
+  getGlobalUniver: () => UniverseManager.getInstance(),
+  getGlobalState: () => getGlobalState(),
+  forceReset: () => UniverseManager.forceReset(),
+  completeCleanup: () => UniverseManager.completeCleanup(),
+};
+```
+
+### **Error Resolution Steps**
+1. **Immediate**: Call `window.__UNIVER_DEBUG__.completeCleanup()` in console
+2. **Prevention**: Use empty dependency arrays in useEffect for initialization
+3. **Validation**: Always check both `instance` and `univerAPI` existence
+4. **Cleanup**: Implement thorough REDI global state cleanup in disposal methods
+
+### **Common Anti-Patterns to Avoid**
+- ❌ Re-initializing on every component render
+- ❌ Not waiting for ongoing initialization/disposal operations
+- ❌ Incomplete state validation before reuse
+- ❌ Missing REDI global state cleanup
+- ❌ Using complex dependency arrays in initialization useEffect
+
+### **Best Practices**
+- ✅ Implement singleton pattern with proper state management
+- ✅ Use polling-based waiting for state transitions
+- ✅ Provide debug tools for runtime state inspection
+- ✅ Separate initialization concerns from component lifecycle
+- ✅ Implement both standard and emergency cleanup methods